/* ==========================================================================
   AIKO widget v3.1 (assets/aiko.css)

   The original AIKO layout, restyled:
   - AIKO stands at the bottom-right at 95% of her 420 x 600 size (her videos
     have a transparent background, so she is never boxed or cropped);
   - a small chat bar floats in front of her: type, send, nothing more;
   - her reply rises in a bubble from behind the bar;
   - the conversation log and settings open on demand;
   - she folds away into a round face button.
   On phones she is hidden (as before) and the bar spans the screen.
   ========================================================================== */
.aiko {
    --ai-ink: #1d1d1f;
    --ai-muted: #6e6e73;
    --ai-blue: #0071e3;
    --ai-ease: cubic-bezier(.22, 1, .36, 1);
    --ai-spring: cubic-bezier(.34, 1.4, .64, 1);
    --ai-dock-w: 380px;
    --ai-dock-right: 10px;
    --ai-dock-bottom: 46px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 300;
    width: 0;
    height: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
.aiko[hidden] { display: none; }
.aiko *, .aiko *::before, .aiko *::after { box-sizing: border-box; }
.aiko button { font: inherit; }
.aiko .aiko__chip { font: 500 .7rem/1.2 "Inter", sans-serif; }
.aiko .aiko__clear { font: 500 .72rem/1 "Inter", sans-serif; }
.ag-sheet-open .aiko, .ag-modal-open .aiko { display: none; }

/* ── Her figure: full size, bottom-right ─────────────────────────────────── */
.aiko__figure {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 399px;   /* 95% of 420 */
    height: 570px;  /* 95% of 600 */
    pointer-events: none;
    transition: transform .8s var(--ai-ease), opacity .5s ease, visibility 0s;
}
.aiko__still, .aiko__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
}
.aiko__video { opacity: 0; transition: opacity var(--ai-fade, 420ms) cubic-bezier(.22, .61, .36, 1); }
.aiko__video.is-on { opacity: 1; }
.aiko.is-live .aiko__still { opacity: 0; transition: opacity .3s ease .3s; }

/* ── The dock: bubble and panels stack above the chat bar ───────────────── */
.aiko__dock {
    position: fixed;
    right: var(--ai-dock-right);
    bottom: var(--ai-dock-bottom);
    z-index: 3;
    width: var(--ai-dock-w);
    transition: transform .7s var(--ai-ease), opacity .4s ease, visibility 0s;
}
.aiko.is-folded .aiko__figure, .aiko.is-folded .aiko__dock {
    opacity: 0;
    visibility: hidden;
    transform: translateY(48px);
    pointer-events: none;
    transition: transform .6s var(--ai-ease), opacity .35s ease, visibility 0s .6s;
}

/* The chat bar: dark liquid glass in front of her */
.aiko__bar {
    position: relative;
    z-index: 3;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(44, 44, 46, .8), rgba(18, 18, 20, .74));
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 50px rgba(0, 0, 0, .3);
}
.aiko__chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 0; padding: 0 14px; overflow: hidden; opacity: 0; transition: max-height .45s var(--ai-ease), padding .45s var(--ai-ease), opacity .3s ease; }
.aiko__bar:hover .aiko__chips, .aiko__bar:focus-within .aiko__chips { max-height: 90px; padding: 10px 12px 2px; opacity: 1; }
.aiko__chip { padding: 5px 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .86); font-size: .74rem; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); cursor: pointer; transition: background .25s ease, transform .35s var(--ai-spring); }
.aiko__chip:hover { background: rgba(255, 255, 255, .2); color: #fff; transform: translateY(-1px); }
.aiko__row { display: flex; align-items: center; gap: 2px; padding: 7px; }
.aiko__input { flex: 1; min-width: 0; height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: 400 14px/1 "Inter", sans-serif; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background .25s ease, box-shadow .25s ease; }
.aiko__input::placeholder { color: rgba(255, 255, 255, .45); }
.aiko__input:focus { outline: none; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1.5px rgba(10, 132, 255, .85); }
.aiko__btn { display: grid; flex: none; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .65); cursor: pointer; transition: background .25s ease, color .25s ease, transform .35s var(--ai-spring); }
.aiko__btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.aiko__btn.is-on { background: rgba(255, 255, 255, .22); color: #fff; }
.aiko__btn svg { width: 15px; height: 15px; }
.aiko__btn--send { width: 34px; height: 34px; background: #fff; color: var(--ai-ink); }
.aiko__btn--send:hover { background: #fff; color: var(--ai-ink); transform: scale(1.07); }
.aiko__btn--send:disabled { opacity: .35; cursor: default; transform: none; }
.aiko__btn--mic.is-listening { background: #ff3b30; color: #fff; animation: aiko-rec 1.2s ease-in-out infinite; }
@keyframes aiko-rec { 50% { box-shadow: 0 0 0 6px rgba(255, 59, 48, .25); } }

/* Reply bubble: rises from behind the bar */
.aiko__bubble {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-height: min(210px, 30vh);
    padding: 10px 14px 10px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88));
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 1px 0 #fff, 0 16px 40px rgba(0, 0, 0, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(70%) scale(.96);
    transform-origin: 50% 100%;
    transition: transform .6s var(--ai-ease), opacity .35s ease, visibility 0s .6s;
    scrollbar-width: none;
}
.aiko__bubble.is-on { opacity: 1; visibility: visible; transform: none; transition: transform .6s var(--ai-ease), opacity .35s ease, visibility 0s; }
.aiko__bubble img { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, .12); }
.aiko__say { flex: 1; min-width: 0; padding-top: 3px; color: var(--ai-ink); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.aiko__say a { color: var(--ai-blue); text-decoration: underline; text-underline-offset: 2px; }
.aiko__word { opacity: 0; animation: aiko-word .4s ease forwards; }
@keyframes aiko-word { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
.aiko__typing { display: inline-flex; align-items: center; gap: 8px; color: var(--ai-muted); font-size: .74rem; }
.aiko__typing span { display: inline-flex; gap: 4px; }
.aiko__typing i { width: 6px; height: 6px; border-radius: 50%; background: #8e8e93; animation: aiko-dot 1.1s infinite; }
.aiko__typing i:nth-child(2) { animation-delay: .15s; }
.aiko__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aiko-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* Log and settings: glass cards above the bar */
.aiko__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(400px, 56vh);
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(248, 248, 250, .9));
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter: blur(30px) saturate(190%);
    box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.97);
    transform-origin: 100% 100%;
    transition: transform .5s var(--ai-spring), opacity .3s ease, visibility .3s;
}
.aiko__panel.is-open { opacity: 1; visibility: visible; transform: none; }
.aiko__panel-head { display: flex; flex: none; align-items: center; justify-content: space-between; padding: 12px 12px 8px 16px; color: var(--ai-ink); font: 600 .84rem/1.2 "Inter Tight", "Inter", sans-serif; letter-spacing: -.01em; }
.aiko__panel-head button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .05); color: var(--ai-muted); cursor: pointer; }
.aiko__panel-head svg { width: 12px; height: 12px; }
.aiko__log { display: flex; flex-direction: column; gap: 6px; min-height: 60px; padding: 2px 12px 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.aiko__log-empty { margin: 6px 4px 10px; color: var(--ai-muted); font-size: .76rem; }
.aiko__msg { max-width: 88%; padding: 7px 11px; color: var(--ai-ink); font-size: .76rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.aiko__msg--ai { align-self: flex-start; border-radius: 18px 18px 18px 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.aiko__msg--me { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--ai-ink); color: #fff; }
.aiko__msg a { color: var(--ai-blue); }
.aiko__msg--me a { color: #fff; }
.aiko__panel-foot { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 12px; border-top: 1px solid rgba(0, 0, 0, .06); color: var(--ai-muted); font-size: .7rem; }
.aiko__panel-foot a { color: var(--ai-muted); }
.aiko__clear { padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .05); color: var(--ai-ink); font-size: .78rem; cursor: pointer; }
.aiko__set { display: grid; gap: 12px; padding: 2px 16px 16px; color: var(--ai-ink); font-size: .78rem; }
.aiko__set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aiko__set select { width: 100%; margin-top: 6px; padding: 9px 12px; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .05); color: var(--ai-ink); font: 400 .76rem "Inter", sans-serif; }
.aiko__set small { color: var(--ai-muted); font-size: .68rem; line-height: 1.45; }
.aiko__set-block { display: grid; gap: 6px; }
.aiko__segs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .05); }
.aiko .aiko__seg { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--ai-muted); font: 500 .74rem/1 "Inter", sans-serif; cursor: pointer; transition: background .25s ease, color .25s ease; }
.aiko .aiko__seg.is-on { background: #fff; color: var(--ai-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.aiko .aiko__seg:disabled { color: #aeaeb2; cursor: not-allowed; }
.aiko__seg em { padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, .06); color: var(--ai-muted); font: 600 .6rem/1 "Inter", sans-serif; font-style: normal; }
.aiko__pick { display: flex; gap: 6px; }
.aiko__voice-name { display: flex; flex: 1; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 12px; background: rgba(0, 0, 0, .05); color: var(--ai-ink); font-size: .76rem; }
.aiko__pick select { flex: 1; min-width: 0; margin-top: 0; }
.aiko .aiko__test { flex: none; padding: 0 12px; border: 0; border-radius: 12px; background: var(--ai-ink); color: #fff; font: 500 .74rem/1 "Inter", sans-serif; cursor: pointer; }
.aiko .aiko__test:disabled { opacity: .4; cursor: default; }
.aiko__switch { position: relative; flex: none; width: 38px; height: 23px; }
.aiko__switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.aiko__switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(0, 0, 0, .15); transition: background .25s ease; pointer-events: none; }
.aiko__switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .35s var(--ai-spring); }
.aiko__switch input:checked + span { background: #30d158; }
.aiko__switch input:checked + span::after { transform: translateX(15px); }

/* ── Round face button (folded away) ─────────────────────────────────────── */
.aiko__face {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    width: 58px;
    height: 58px;
    padding: 3px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .6));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 12px 32px rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: scale(.6);
    transition: transform .55s var(--ai-spring), opacity .3s ease, visibility .3s;
}
.aiko__face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.aiko__face::after { content: ""; position: absolute; right: 3px; bottom: 5px; width: 13px; height: 13px; border: 2.5px solid #fff; border-radius: 50%; background: #30d158; }
.aiko.is-folded .aiko__face { opacity: 1; visibility: visible; transform: none; }
.aiko.is-folded .aiko__face:hover { transform: scale(1.06); }

/* ── Smaller laptops: she keeps her size; the bar narrows a little ───────── */
@media (max-width: 1100px) {
    .aiko { --ai-dock-w: 360px; }
}
/* ── Phones: no figure (as before); the bar spans the screen ─────────────── */
@media (max-width: 768px) {
    .aiko { --ai-dock-bottom: 12px; }
    .aiko__figure { display: none; }
    .aiko__dock { left: 10px; width: auto; }
    .aiko__panel { width: 100%; }
    .aiko__bar { border-radius: 24px; }
    .aiko__input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .aiko *, .aiko *::before, .aiko *::after { animation: none !important; transition-duration: .001ms !important; }
    .aiko__word { opacity: 1; }
}