/* P!NK UX — AI Asistent */

:root { --ppx-ai-c: var(--ppx-accent, #e0157f); --ppx-ai-grad: linear-gradient(100deg, var(--ppx-accent, #e0157f) 0%, #ff5fae 100%); --ppx-ai-soft: var(--ppx-soft, #fff1f8); }



/* Button next to search */

.ppx-ai-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px !important; border: 1.5px solid transparent !important; border-radius: 999px !important; background: linear-gradient(#fff, #fff) padding-box, var(--ppx-ai-grad) border-box !important; color: var(--ppx-ai-c) !important; font-weight: 700; font-size: 13px; line-height: 1; font-family: inherit; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; box-shadow: none !important; transition: transform .15s, box-shadow .15s; }

.ppx-ai-btn span { background: var(--ppx-ai-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 15px; }

.ppx-ai-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(224, 21, 127, .18) !important; }

.ppx-ai-btn:focus-visible { outline: 2px solid var(--ppx-ai-c); outline-offset: 2px; }

form.ppx-has-ai { display: flex !important; align-items: center; gap: 8px; }

form.ppx-has-ai > :first-child, form.ppx-has-ai input[name="s"] { flex: 1 1 auto; min-width: 0; }

.ppx-ai-btn--inline { flex: none; }

.ppx-ai-btn--wide { width: 100%; min-height: 46px; margin-top: 10px; font-size: 14px; }

@media (max-width: 600px) { .ppx-ai-btn--inline { padding: 0 10px !important; } }



/* Panel */

html.ppx-ai-open { overflow: hidden; }

.ppx-ai { position: fixed; inset: 0; z-index: 2147483000; }

.ppx-ai[hidden] { display: none; }

.ppx-ai__backdrop { position: absolute; inset: 0; background: rgba(27, 24, 48, .45); animation: ppxAiFade .18s ease; }

.ppx-ai__box { position: absolute; inset: 24px max(24px, calc((100vw - 1100px) / 2)); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(27, 24, 48, .3); color: var(--ppx-ink, #1b1830); font-size: 15px; line-height: 1.5; animation: ppxAiUp .22s ease; }

@keyframes ppxAiFade { from { opacity: 0; } }

@keyframes ppxAiUp { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) { .ppx-ai__backdrop, .ppx-ai__box { animation: none; } }



.ppx-ai__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--ppx-line, #ece9f1); }

.ppx-ai__new { min-height: 36px; padding: 0 16px !important; border: 0 !important; border-radius: 999px !important; background: var(--ppx-ai-grad) !important; color: #fff !important; font-weight: 600; font-size: 13px; line-height: 1; font-family: inherit; cursor: pointer; }

.ppx-ai__title { flex: 1; color: var(--ppx-muted, #6a6679); font-size: 13px; font-weight: 600; text-align: center; }

.ppx-ai__x { display: grid; place-items: center; width: 40px; height: 40px; padding: 0 !important; border: 0 !important; border-radius: 50%; background: none !important; color: var(--ppx-ink, #1b1830) !important; cursor: pointer; }

.ppx-ai__x:hover { background: #f4f2f8 !important; }

.ppx-ai svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }



.ppx-ai__log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 18px 8px; }

.ppx-ai__msg { display: flex; gap: 12px; max-width: 860px; margin: 0 auto 18px; }

.ppx-ai__msg.is-user { flex-direction: column; align-items: flex-end; }

.ppx-ai__bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ppx-ai-soft); white-space: normal; word-wrap: break-word; }

.ppx-ai__uimg { max-width: 160px; max-height: 160px; margin-bottom: 6px; border-radius: 12px; object-fit: cover; }

.ppx-ai__avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid transparent; border-radius: 50%; background: linear-gradient(#fff, #fff) padding-box, var(--ppx-ai-grad) border-box; color: var(--ppx-ai-c); }

.ppx-ai__body { flex: 1; min-width: 0; padding-top: 8px; }

.ppx-ai__text p { margin: 0 0 8px; }

.ppx-ai__text ul { margin: 0 0 8px; padding-left: 20px; }

.ppx-ai__text li { margin: 0 0 4px; }



.ppx-ai__starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.ppx-ai__starters button { min-height: 38px; padding: 6px 14px !important; border: 1px solid var(--ppx-line, #ece9f1) !important; border-radius: 999px !important; background: #fff !important; color: var(--ppx-ink, #1b1830) !important; font-weight: 500; font-size: 13px; line-height: 1.3; font-family: inherit; text-align: left; text-transform: none; cursor: pointer; }

.ppx-ai__starters button:hover { border-color: var(--ppx-ai-c) !important; background: var(--ppx-ai-soft) !important; color: var(--ppx-ai-c) !important; }



.ppx-ai__cards { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 10px; overflow-x: auto; margin: 6px 0 8px; padding-bottom: 6px; scroll-snap-type: x mandatory; }

.ppx-ai__card { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--ppx-line, #ece9f1); border-radius: 12px; background: #fff; color: var(--ppx-ink, #1b1830) !important; text-decoration: none !important; scroll-snap-align: start; transition: border-color .15s, box-shadow .15s; }

.ppx-ai__card:hover { border-color: var(--ppx-accent, #e0157f); box-shadow: 0 6px 18px rgba(27, 24, 48, .08); }

.ppx-ai__img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #f6f5f9; }

.ppx-ai__img img { width: 100%; height: 100%; object-fit: cover; }

.ppx-ai__name { display: -webkit-box; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.6em; }

.ppx-ai__meta { color: var(--ppx-muted, #6a6679); font-size: 11px; }

.ppx-ai__meta .is-in { color: #13795b; }

.ppx-ai__meta .is-out { color: #b42318; }

.ppx-ai__price { font-size: 14px; font-weight: 800; }

.ppx-ai__login { color: var(--ppx-accent, #e0157f); font-size: 12px; font-weight: 700; }

.ppx-ai__view { margin-top: auto; color: var(--ppx-accent, #e0157f); font-size: 12px; font-weight: 700; }

.ppx-ai__wa { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: #128c4b !important; font-size: 13px; font-weight: 600; text-decoration: none !important; }

.ppx-ai__wa svg { width: 16px; height: 16px; }



.ppx-ai__typing { display: flex; gap: 5px; padding: 16px 4px; }

.ppx-ai__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ppx-ai-c); opacity: .35; animation: ppxAiDot 1s infinite; }

.ppx-ai__typing i:nth-child(2) { animation-delay: .15s; }

.ppx-ai__typing i:nth-child(3) { animation-delay: .3s; }

@keyframes ppxAiDot { 50% { opacity: 1; transform: translateY(-3px); } }



.ppx-ai__form { margin: 0; padding: 10px 16px 8px; border-top: 1px solid var(--ppx-line, #ece9f1); }

.ppx-ai__row { display: flex; align-items: flex-end; gap: 10px; max-width: 900px; margin: 0 auto; }

.ppx-ai__row textarea { box-sizing: border-box !important; flex: 1; width: auto !important; height: 46px; min-height: 46px !important; max-height: 140px; margin: 0 !important; padding: 12px 18px !important; border: 1px solid #dcd7e6 !important; border-radius: 24px !important; background: #fff !important; color: var(--ppx-ink, #1b1830) !important; font-size: 16px !important; line-height: 1.4 !important; font-family: inherit !important; resize: none; box-shadow: none; overflow-y: auto; }

.ppx-ai__row textarea:focus { border-color: var(--ppx-ai-c); outline: none; box-shadow: 0 0 0 3px rgba(224, 21, 127, .14); }

.ppx-ai__icon, .ppx-ai__send { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0 !important; border-radius: 50% !important; cursor: pointer; }

.ppx-ai__icon { border: 1px solid #dcd7e6 !important; background: #fff !important; color: var(--ppx-ink, #1b1830) !important; }

.ppx-ai__send { border: 0 !important; background: var(--ppx-ai-grad) !important; color: #fff !important; }

.ppx-ai__send:disabled { opacity: .45; cursor: default; }

.ppx-ai__note { margin: 6px 0 0; color: var(--ppx-muted, #6a6679); font-size: 11px; text-align: center; }

.ppx-ai__preview { position: relative; max-width: 900px; margin: 0 auto 8px; }

.ppx-ai__preview img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }

.ppx-ai__preview button { position: absolute; top: -6px; left: 52px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0 !important; border: 0 !important; border-radius: 50%; background: #1b1830 !important; color: #fff !important; cursor: pointer; }

.ppx-ai__preview button svg { width: 12px; height: 12px; }



@media (max-width: 700px) {

    .ppx-ai__box { inset: 0; border-radius: 0; }

    .ppx-ai__title { display: none; }

    .ppx-ai__head { justify-content: space-between; padding-top: max(12px, env(safe-area-inset-top)); }

    .ppx-ai__log { padding: 16px 12px 6px; }

    .ppx-ai__avatar { width: 32px; height: 32px; }

    .ppx-ai__avatar svg { width: 16px; height: 16px; }

    .ppx-ai__cards { grid-auto-columns: 150px; }

    .ppx-ai__form { padding: 8px 10px max(8px, env(safe-area-inset-bottom)); }

}



/* Stability: error + retry */

.ppx-ai__err { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.ppx-ai__retry { min-height: 34px; padding: 0 14px !important; border: 1px solid var(--ppx-ai-c) !important; border-radius: 999px !important; background: #fff !important; color: var(--ppx-ai-c) !important; font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer; }

.ppx-ai__retry:hover { background: var(--ppx-ai-soft) !important; }

.ppx-ai__send:not(:disabled):hover { filter: brightness(1.05); }

.ppx-ai__wa { color: #128c4b !important; }