/* ============================================================
   AI agent widget — floating button + draggable / resizable panel
   ============================================================ */
.agent { --ag-r: 24px; --ag-deep: #141E26; --ag-deep-2: #22313C; position: fixed; right: 22px; bottom: 22px; z-index: 1400; font-family: 'Inter', system-ui, sans-serif; }
[data-theme="dark"] .agent { --ag-deep: #151515; --ag-deep-2: #242424; }

/* ---------- floating button ---------- */
.agent-fab {
    position: relative; width: 62px; height: 62px; border: 0; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; color: #fff;
    background: radial-gradient(120% 120% at 30% 20%, #FFC28F 0%, var(--accent) 45%, var(--accent-strong) 100%);
    box-shadow: 0 18px 40px -14px var(--accent-shadow), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -6px 14px rgba(0,0,0,.12);
    transition: transform .3s cubic-bezier(.2,.8,.3,1.2);
}
.agent-fab:hover { transform: translateY(-3px) scale(1.05); }
.agent-fab:focus-visible { outline: 3px solid var(--heading); outline-offset: 4px; }
.agent-fab__halo { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); opacity: .55; animation: ag-halo 2.6s ease-out infinite; pointer-events: none; }
@keyframes ag-halo { from { transform: scale(.9); opacity: .6; } to { transform: scale(1.35); opacity: 0; } }
.agent-fab__icon { grid-area: 1 / 1; font-size: 30px; transition: transform .3s ease, opacity .2s ease; }
.agent-fab__icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.agent.is-open .agent-fab__halo { display: none; }
.agent.is-open .agent-fab__icon--open { opacity: 0; transform: rotate(90deg) scale(.6); }
.agent.is-open .agent-fab__icon--close { opacity: 1; transform: none; }
.agent-fab__tip {
    position: absolute; right: calc(100% + 14px); top: 50%; transform: translate(10px, -50%);
    white-space: nowrap; padding: .6rem 1rem; border-radius: 14px;
    background: var(--ag-deep); color: #fff; font-size: .88rem; font-weight: 600;
    box-shadow: 0 16px 36px -14px rgba(0,0,0,.5); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .25s ease;
}
.agent-fab__tip::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--ag-deep); }
.agent-fab:hover .agent-fab__tip, .agent-fab:focus-visible .agent-fab__tip { opacity: 1; transform: translate(0, -50%); }
.agent.is-open .agent-fab__tip { display: none; }

/* ---------- panel ---------- */
.agent-panel {
    position: fixed; right: 22px; bottom: 100px;
    width: min(400px, calc(100vw - 44px));
    height: min(600px, calc(100vh - 124px)); height: min(600px, calc(100dvh - 124px));
    min-width: min(320px, calc(100vw - 16px)); min-height: min(420px, calc(100vh - 124px));
    max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
    display: flex; flex-direction: column;
    border-radius: var(--ag-r);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
    box-shadow: 0 60px 120px -40px rgba(0,0,0,.55), 0 20px 40px -24px rgba(0,0,0,.3), 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
    transform-origin: bottom right;
    animation: ag-in .32s cubic-bezier(.2,.8,.3,1.1);
    isolation: isolate;
}
.agent-panel::before { /* gradient hairline border */
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 70%, transparent), transparent 35%, transparent 70%, color-mix(in srgb, var(--accent) 35%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.agent-panel[hidden] { display: none; }
@keyframes ag-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.agent-panel.is-dragging, .agent-panel.is-resizing { animation: none; transition: none; user-select: none; }
.agent-panel.is-dragging { box-shadow: 0 80px 140px -40px rgba(0,0,0,.6), 0 0 0 1px var(--accent); cursor: grabbing; }

/* resize handles */
.agent-rz { position: absolute; z-index: 5; }
.agent-rz--n, .agent-rz--s { left: 14px; right: 14px; height: 8px; cursor: ns-resize; }
.agent-rz--n { top: -4px; } .agent-rz--s { bottom: -4px; }
.agent-rz--e, .agent-rz--w { top: 14px; bottom: 14px; width: 8px; cursor: ew-resize; }
.agent-rz--e { right: -4px; } .agent-rz--w { left: -4px; }
.agent-rz--ne, .agent-rz--nw, .agent-rz--se, .agent-rz--sw { width: 18px; height: 18px; }
.agent-rz--ne { top: -4px; right: -4px; cursor: nesw-resize; }
.agent-rz--sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.agent-rz--nw { top: -4px; left: -4px; cursor: nwse-resize; }
.agent-rz--se { bottom: -4px; right: -4px; cursor: nwse-resize; }

/* ---------- header ---------- */
.agent-head {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: .8rem;
    padding: 1rem 1rem 1.05rem 1.1rem;
    border-radius: var(--ag-r) var(--ag-r) 0 0;
    background: linear-gradient(135deg, var(--ag-deep) 0%, var(--ag-deep-2) 100%);
    color: #fff; cursor: grab; touch-action: none; user-select: none;
}
.agent-head__aurora {
    position: absolute; inset: -60% -20% auto; height: 220%; pointer-events: none; opacity: .55;
    background:
        radial-gradient(40% 35% at 20% 60%, color-mix(in srgb, var(--accent) 65%, transparent), transparent 70%),
        radial-gradient(30% 30% at 80% 30%, rgba(99,102,241,.45), transparent 70%),
        radial-gradient(35% 30% at 60% 80%, rgba(34,197,94,.25), transparent 70%);
    filter: blur(18px); animation: ag-aurora 12s ease-in-out infinite alternate;
}
@keyframes ag-aurora { to { transform: translateX(12%) rotate(8deg); } }
.agent-head > *:not(.agent-head__aurora) { position: relative; }
.agent-head__grip { position: absolute !important; left: 50%; top: 6px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: rgba(255,255,255,.22); }
.agent-head__who { flex: 1; min-width: 0; }
.agent-head__who b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.04rem; letter-spacing: -.01em; }
.agent-head__who small { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; color: rgba(255,255,255,.7); }
.agent-head__who small i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); animation: ag-live 2s ease-in-out infinite; }
@keyframes ag-live { 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }
.agent-head__actions { display: flex; gap: .3rem; }
.agent-hbtn {
    width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: pointer; display: grid; place-items: center;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); transition: background .2s ease, color .2s ease;
}
.agent-hbtn:hover { background: rgba(255,255,255,.18); color: #fff; }
.agent-hbtn .material-symbols-outlined { font-size: 19px; }

/* ---------- conversation ---------- */
.agent-body {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 1.1rem 1rem .6rem; display: flex; flex-direction: column; gap: .85rem;
    background:
        radial-gradient(60% 40% at 100% 0%, var(--accent-soft), transparent 70%),
        color-mix(in srgb, var(--bg-alt) 70%, transparent);
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.agent-row { display: flex; gap: .55rem; align-items: flex-end; animation: ag-msg .35s cubic-bezier(.2,.8,.3,1) both; }
@keyframes ag-msg { from { opacity: 0; transform: translateY(8px); } }
.agent-row--user { justify-content: flex-end; }
.agent-row__ava {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; display: grid; place-items: center; align-self: flex-start;
    background: radial-gradient(120% 120% at 30% 20%, #FFC28F, var(--accent) 55%, var(--accent-strong)); color: #fff;
}
.agent-row__ava .material-symbols-outlined { font-size: 17px; }
.agent-row__main { min-width: 0; max-width: calc(100% - 36px); display: flex; flex-direction: column; gap: .4rem; }
.agent-bubble {
    padding: .7rem .9rem; border-radius: 18px; font-size: .92rem; line-height: 1.55;
    white-space: pre-line; overflow-wrap: anywhere;
}
.agent-row--bot .agent-bubble {
    background: var(--surface); color: var(--text); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-top-left-radius: 6px; box-shadow: 0 8px 22px -16px rgba(0,0,0,.35);
}
.agent-row--user .agent-bubble {
    max-width: 85%; color: #fff; border-bottom-right-radius: 6px;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    box-shadow: 0 10px 24px -14px var(--accent-shadow);
}
.agent-bubble a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.agent-bubble.is-typing::after { content: ''; display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--accent); border-radius: 2px; animation: ag-caret .8s steps(1) infinite; }
@keyframes ag-caret { 50% { opacity: 0; } }
.agent-wa-btn {
    display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
    padding: .55rem .95rem; border-radius: 12px; background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff; font-weight: 600; font-size: .86rem; box-shadow: 0 10px 22px -12px rgba(18,140,126,.8);
    transition: transform .2s ease;
}
.agent-wa-btn:hover { transform: translateY(-1px); color: #fff; }

/* thinking */
.agent-think {
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 80%, var(--surface)), var(--surface));
    border-radius: 16px; padding: .75rem .9rem; font-size: .84rem;
}
.agent-think__head { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
.agent-think__spin {
    width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px;
    background: conic-gradient(from 0deg, transparent 0 25%, var(--accent) 100%);
    -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px);
    animation: ag-spin .8s linear infinite;
}
@keyframes ag-spin { to { transform: rotate(360deg); } }
.agent-think__title {
    background: linear-gradient(90deg, var(--text-soft) 0%, var(--heading) 40%, var(--accent) 50%, var(--heading) 60%, var(--text-soft) 100%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: ag-shimmer 1.6s linear infinite;
}
@keyframes ag-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.agent-think__steps { list-style: none; margin: .55rem 0 0; padding: 0 0 0 .35rem; border-left: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent); display: grid; gap: .35rem; }
.agent-think__steps li { display: flex; align-items: center; gap: .5rem; color: var(--text-soft); padding-left: .55rem; opacity: 0; transform: translateX(-4px); transition: opacity .25s ease, transform .25s ease, color .25s ease; }
.agent-think__steps li.is-on { opacity: 1; transform: none; }
.agent-think__steps li.is-active { color: var(--heading); }
.agent-think__steps li .material-symbols-outlined { font-size: 16px; }
.agent-think__steps li.is-active .material-symbols-outlined { color: var(--accent); animation: ag-pulse 1s ease-in-out infinite; }
.agent-think__steps li.is-done .material-symbols-outlined { color: #19A974; }
@keyframes ag-pulse { 50% { opacity: .35; } }
.agent-think.is-done { padding: .35rem .7rem; background: transparent; border-style: dashed; cursor: pointer; }
.agent-think.is-done .agent-think__spin { display: none; }
.agent-think.is-done .agent-think__title { animation: none; color: var(--text-soft); background: none; font-weight: 600; }
.agent-think.is-done .agent-think__steps { display: none; }
.agent-think.is-done.is-expanded .agent-think__steps { display: grid; }
.agent-think.is-done .agent-think__head::before { content: 'psychology'; font-family: 'Material Symbols Outlined'; font-size: 17px; color: var(--accent); font-weight: 400; }
.agent-think__caret { margin-left: auto; font-size: 18px !important; color: var(--text-soft); display: none; transition: transform .2s ease; }
.agent-think.is-done .agent-think__caret { display: inline-block; }
.agent-think.is-expanded .agent-think__caret { transform: rotate(180deg); }
.agent-src { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; font-size: .72rem; color: var(--text-soft); padding: .15rem .55rem; border-radius: 999px; background: var(--bg-soft); }
.agent-src .material-symbols-outlined { font-size: 14px; color: var(--accent); }

/* ---------- footer: chips, input ---------- */
.agent-foot { padding: .65rem .85rem .55rem; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); background: var(--surface); border-radius: 0 0 var(--ag-r) var(--ag-r); }
.agent-chips-wrap { position: relative; margin-bottom: .6rem; }
.agent-chips {
    display: flex; gap: .45rem; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
    cursor: grab; touch-action: pan-x; user-select: none; padding: 1px 0;
}
.agent-chips.is-grabbing { cursor: grabbing; scroll-behavior: auto; }
.agent-chips.is-grabbing .agent-chip { pointer-events: none; }
.agent-chips-wrap.can-prev .agent-chips { mask-image: linear-gradient(90deg, transparent 0, #000 44px); }
.agent-chips-wrap.can-next .agent-chips { mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.agent-chips-wrap.can-prev.can-next .agent-chips { mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent); }
.agent-chips-nav {
    position: absolute; top: 50%; z-index: 2; width: 28px; height: 28px; margin-top: -14px;
    display: grid; place-items: center; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--heading);
    box-shadow: 0 6px 16px -8px rgba(0,0,0,.4);
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.agent-chips-nav .material-symbols-outlined { font-size: 20px; }
.agent-chips-nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.agent-chips-nav--prev { left: -4px; } .agent-chips-nav--next { right: -4px; }
.agent-chips-wrap.can-prev .agent-chips-nav--prev, .agent-chips-wrap.can-next .agent-chips-nav--next { opacity: 1; pointer-events: auto; }
.agent-chips::-webkit-scrollbar { display: none; }
.agent-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
    padding: .42rem .8rem .42rem .6rem; border-radius: 999px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-soft); color: var(--heading);
    font: 600 .8rem/1.2 'Inter', sans-serif; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.agent-chip .material-symbols-outlined { font-size: 16px; color: var(--accent); }
.agent-chip:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.agent-chip:hover .material-symbols-outlined { color: #fff; }
.agent-form {
    display: flex; align-items: center; gap: .4rem; padding: .3rem .3rem .3rem .95rem; border-radius: 16px;
    background: var(--bg-alt); border: 1px solid var(--border); transition: border-color .2s ease, box-shadow .2s ease;
}
.agent-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.agent-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 400 .93rem 'Inter', sans-serif; padding: .55rem 0; outline: none; }
.agent-form button {
    width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 12px; cursor: pointer; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong)); box-shadow: 0 8px 18px -10px var(--accent-shadow); transition: transform .2s ease, opacity .2s ease;
}
.agent-form button:hover { transform: translateY(-1px); }
.agent-form button:disabled { opacity: .45; cursor: default; transform: none; }
.agent-wa { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 0 .1rem; font-size: .76rem; color: var(--text-soft); }
.agent-wa:hover { color: #1ebe5b; }

/* ---------- responsive ---------- */
/* tablets / small laptops: a bit narrower, tighter paddings */
@media (max-width: 900px) {
    .agent-head { padding: .85rem .85rem .9rem 1rem; }
    .agent-body { padding: .9rem .8rem .5rem; }
}
/* phones (portrait): bottom sheet, no drag/resize */
@media (max-width: 560px) {
    .agent { right: 14px; bottom: 14px; }
    .agent-fab { width: 56px; height: 56px; }
    .agent-fab__icon { font-size: 27px; }
    .agent-fab__tip, .agent-rz, .agent-head__grip, [data-agent-max] { display: none; }
    .agent-panel {
        left: 8px !important; right: 8px !important; top: auto !important; bottom: 80px !important;
        width: auto !important; min-width: 0; min-height: 0;
        height: min(620px, calc(100vh - 96px)) !important; height: min(620px, calc(100dvh - 96px)) !important;
        --ag-r: 20px;
    }
    .agent-head { cursor: default; padding: .8rem .75rem .85rem .95rem; }
    .agent-head__who b { font-size: .98rem; }
    .agent-hbtn { width: 32px; height: 32px; }
    .agent-bubble { font-size: .9rem; }
    .agent-row__ava { display: none; }
    .agent-row__main { max-width: 100%; }
    .agent-foot { padding: .55rem .65rem .45rem; }
    .agent-form input { font-size: 16px; } /* stops iOS zooming into the field */
}
/* very narrow phones */
@media (max-width: 360px) {
    .agent-panel { left: 4px !important; right: 4px !important; }
    .agent-head__who small { display: none; }
    .agent-wa span { font-size: .72rem; }
}
/* phones in landscape / very short windows: full-height panel beside the button */
@media (max-height: 560px) {
    .agent-panel {
        top: 8px !important; bottom: 8px !important; height: auto !important; min-height: 0;
        right: 86px !important; left: auto !important; width: min(440px, calc(100vw - 100px)) !important;
    }
    .agent-chips-wrap { display: none; }
    .agent-head { padding-top: .6rem; padding-bottom: .6rem; }
    .agent-rz, .agent-head__grip, [data-agent-max] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .agent-fab__halo, .agent-head__aurora, .agent-panel, .agent-row { animation: none; }
}
.agent-row--user .agent-row__main { align-items: flex-end; max-width: 100%; }