/* =====================================================================
   The site's assistant (assistant.js): a breathing orb with a friendly
   face in the corner, and the conversation window above it.
   ===================================================================== */
:root {
  --orb-a: #4a7cf2;
  --orb-b: #8b5cf6;
  --orb-c: #22d3ee;
  --orb-glow: rgba(99, 102, 241, .38);
}

/* The orb: breathes slowly; thinks faster; blinks now and then. */
.as-orb { position: relative; display: grid; place-items: center; width: var(--orb, 58px); height: var(--orb, 58px); flex: none; border-radius: 50%;
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .55), transparent 34%), conic-gradient(from 210deg, var(--orb-a), var(--orb-b), var(--orb-c), var(--orb-a));
  box-shadow: 0 10px 26px var(--orb-glow), inset 0 -6px 14px rgba(30, 27, 75, .28); }
.as-orb::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--orb-b); opacity: 0; }
.as-orb svg { width: 74%; height: 74%; overflow: visible; }
.as-orb .as-eye { transform-box: fill-box; transform-origin: center; animation: as-blink 5.5s infinite; }
.as-orb .as-white { fill: #fff; }
.as-orb .as-iris { fill: #1e1b4b; }
.as-orb .as-shine { fill: #fff; }
.as-orb .as-pupil { transform: translate(var(--px, 0), var(--py, 0)); transition: transform .12s linear; }
.as-orb .as-lash, .as-orb .as-brow { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }
.as-orb .as-brow { opacity: .9; }
.as-orb .as-cheek { fill: #ff8fb1; opacity: .7; }
.as-orb .as-mouth { fill: #1e1b4b; }
.as-orb .as-tongue { fill: #ff7aa2; }
.as-orb.is-happy { animation: as-hop .7s var(--ease); }
.as-orb .as-visor { fill: #1e1b4b; }
.as-orb .as-led { fill: #67e8f9; }
.as-orb .as-led-smile { fill: none; stroke: #67e8f9; stroke-width: 1.8; stroke-linecap: round; }
.as-orb .as-antenna { stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.as-orb .as-antenna-tip { fill: #fde047; }
.as-orb.is-logo { background: #fff; box-shadow: 0 10px 26px var(--orb-glow), inset 0 0 0 2px color-mix(in srgb, var(--orb-a) 40%, transparent); }
.as-orb.is-logo img { width: 64%; height: 64%; object-fit: contain; border-radius: 22%; }
.as-orb.is-logo b { color: var(--orb-a); font-size: calc(var(--orb, 58px) * .42); font-weight: 800; }

/* Opti, the robot head: its eyes show its mood */
.as-orb.is-head { background: none; box-shadow: none; border-radius: 34%; filter: drop-shadow(0 7px 11px rgba(23, 37, 84, .26)); }
.as-orb.is-head::after { border-radius: 36%; border-color: #4fa3f7; }
.as-orb.is-head svg { width: 100%; height: 100%; }
.as-msg .as-orb.is-head { box-shadow: none; filter: drop-shadow(0 2px 4px rgba(23, 37, 84, .25)); }
.as-orb .oh-head { fill: #f7f8fa; stroke: #c4ccd6; stroke-width: .7; }
.as-orb .oh-shade { fill: #dfe5ec; }
.as-orb .oh-gloss { fill: #fff; }
.as-orb .oh-visor { fill: #14171d; }
.as-orb .oh-eyes { transform: translate(calc(var(--px, 0px) * 1.7), calc(var(--py, 0px) * 1.5)); transition: transform .12s linear; filter: drop-shadow(0 0 1.1px var(--act, #6cb6ff)); }
.as-orb .oh-norm rect, .as-orb .oh-sad path, .as-orb .oh-wow circle { fill: var(--act, #4fa3f7); transition: fill .3s ease; }
.as-orb .oh-glad path { fill: none; stroke: var(--act, #4fa3f7); stroke-width: 2.3; stroke-linecap: round; transition: stroke .3s ease; }
.as-orb .oh-norm, .as-orb .oh-glad, .as-orb .oh-sad, .as-orb .oh-wow { transition: opacity .16s var(--ease); }
.as-orb .oh-glad, .as-orb .oh-sad, .as-orb .oh-wow { opacity: 0; }
.as-orb .oh-status { fill: var(--act, #4fa3f7); opacity: .75; }
/* doing something: its eyes take that action's colour and it glows softly with it */
.as-orb.is-head.is-acting { animation: as-act 1.8s ease-in-out infinite; }
@keyframes as-act { 0%, 100% { filter: drop-shadow(0 7px 11px rgba(23, 37, 84, .26)) drop-shadow(0 0 2px var(--act)); }
  50% { filter: drop-shadow(0 7px 11px rgba(23, 37, 84, .26)) drop-shadow(0 0 11px var(--act)); } }
@media (prefers-reduced-motion: reduce) { .as-orb.is-head.is-acting { animation: none; filter: drop-shadow(0 0 6px var(--act)); } }
/* the settings: no hands; eyes still */
.as-no-hands .as-orb .oh-hands { display: none; }
.as-still-eyes .as-orb .oh-eyes { transform: none; }
.as-mic.as-mic-off { display: none; }
/* listening for its name: the switch in the chat's title bar, and a small light on the corner Opti */
.as-wake-btn { position: relative; }
.as-wake-btn i { position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2, #94a3b8); }
.as-wake-btn[aria-pressed="true"] { color: var(--green); }
.as-wake-btn[aria-pressed="true"] i { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
/* the wake box: its switch, what it hears now, teaching it one's own voice -- under the chat's title bar and in the settings */
.as-wakepanel { position: absolute; left: 10px; right: 10px; top: 62px; z-index: 4; max-height: calc(100% - 74px); overflow-y: auto; padding: 10px 14px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel-elevated); box-shadow: var(--shadow-md); }
.as-wakepanel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.as-wakepanel-h b { color: var(--text); font-size: 13.5px; }
.as-wakebox { display: grid; gap: 10px; color: var(--text-2); font-size: 12.5px; }
.as-wakebox .switch { justify-self: start; white-space: normal; }
.as-wakebox-p { margin: 0; line-height: 1.5; }
.as-wakebox-p b { color: var(--text); font-weight: 650; }
.as-wakebox-live { padding: 7px 10px; border-radius: 9px; background: var(--panel-muted); color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.as-wakebox-live span { color: var(--text); font-weight: 600; }
.as-wakebox-teach { display: grid; gap: 7px; justify-items: start; padding-top: 10px; border-top: 1px solid var(--line); }
.as-wakebox-teach > b { color: var(--text); font-size: 13.5px; }
.as-wakebox-teach small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.as-wakebox-teach small.is-warn { color: var(--amber-text, var(--amber)); font-weight: 600; }
.as-wakebox-teach small.is-ok { color: var(--green); font-weight: 600; }
.as-wakebox-teach .as-wakebox-live { justify-self: stretch; }
.as-wakebox-steps { display: inline-flex; align-items: center; gap: 5px; }
.as-wakebox-steps i { width: 22px; height: 6px; border-radius: 3px; background: var(--line-strong); }
.as-wakebox-steps i.is-done { background: var(--green); }
.as-wakebox-steps em { margin-left: 4px; color: var(--muted); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }
.as-wakebox-known { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.as-wakebox-known > span { color: var(--muted); }
.as-wakebox-known i { display: inline-flex; align-items: center; gap: 2px; padding: 2px 3px 2px 10px; border-radius: 999px; background: var(--panel-muted); color: var(--text); font-style: normal; }
.as-wakebox-known i button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.as-wakebox-known i button:hover { background: var(--red-bg); color: var(--red); }
.as-wakebox-known i button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.as-wakebox-names { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.as-wakebox-names > small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.as-wakebox-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0; }
.as-wakebox-add input { min-height: 36px; }
.as-wakebox-link { padding: 2px 4px; border: 0; background: none; color: var(--primary); font: inherit; cursor: pointer; text-decoration: underline; }
.as-wakebox-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.as-wakebox-note { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
/* its name was heard: the words, for a moment, by the corner Opti */
.as-heard { position: absolute; right: 0; bottom: calc(100% + 8px); max-width: min(280px, 70vw); padding: 5px 10px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-elevated); color: var(--text-2); box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.as-heard::before { content: "მესმის: "; color: var(--muted); }
.as-heard.is-hit { border-color: var(--green); color: var(--green); font-weight: 650; }
.as-launcher.on-left .as-heard { right: auto; left: 0; }
.as-launcher.is-wake::before { content: ""; position: absolute; left: 2px; bottom: 2px; z-index: 2; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; }
@media (prefers-reduced-motion: no-preference) { .as-launcher.is-wake::before { animation: as-wake 2.4s ease-in-out infinite; } }
@keyframes as-wake { 50% { opacity: .45; } }
/* an action's card while it runs: its colour */
.as-card.is-working { border-color: var(--act, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--act, transparent) 18%, transparent); }
/* each answer can be heard */
.as-say { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: 4px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.as-say:hover { background: var(--panel-muted); color: var(--primary); }
.as-say .icon { width: 15px; height: 15px; }
/* Settings -> ოპტი */
.opti-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.opti-size { display: inline-flex; }
.opti-sub { display: grid; gap: 2px; margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.opti-sub b { font-size: 13px; }
.opti-sub small { color: var(--muted); font-size: 12px; }
.opti-sugg { display: grid; gap: 6px; margin-bottom: 8px; }
.opti-sugg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.opti-sugg-row .field { margin: 0; }
.opti-group { padding: 4px 0 10px; }
.opti-group-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 2px; }
.opti-group-h b { font-size: 13px; }
.opti-group-h small { color: var(--muted); font-size: 12px; }
.opti-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.opti-dot.g-read { background: #3b82f6; } .opti-dot.g-open { background: #06b6d4; } .opti-dot.g-act { background: #a855f7; }
.opti-dot.k-sms { background: #a855f7; } .opti-dot.k-invoice { background: #f59e0b; } .opti-dot.k-register { background: #14b8a6; } .opti-dot.k-payment { background: #22c55e; }
.opti-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 12px; }
.opti-stats > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; }
.opti-stats span { color: var(--muted); font-size: 12px; }
.opti-stats b { font-size: 20px; font-variant-numeric: tabular-nums; }
.opti-stats small { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.opti-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; padding: 4px; border-radius: 9px; background: var(--panel-muted); }
.opti-bars i { flex: 1; min-width: 3px; border-radius: 3px 3px 0 0; background: var(--primary); opacity: .8; }
.opti-log { min-width: 620px; }
.opti-log td { vertical-align: top; font-size: 12.5px; }
.opti-log td.is-ok { color: var(--green); } .opti-log td.is-bad { color: var(--red); }
.opti-save { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; margin-top: 16px; pointer-events: none; }
.opti-save .btn { pointer-events: auto; box-shadow: var(--shadow-md); }
.user-assist.is-off { opacity: .45; pointer-events: none; }
@media (max-width: 640px) { .opti-stats { grid-template-columns: minmax(0, 1fr); } }
/* glad: an answer came, or the mouse is on it */
.as-orb.is-glad .oh-norm, .as-launcher:hover .as-orb.is-head:not(.is-thinking) .oh-norm { opacity: 0; }
.as-orb.is-glad .oh-glad, .as-launcher:hover .as-orb.is-head:not(.is-thinking) .oh-glad { opacity: 1; }
/* sorry: something failed */
.as-orb.is-sad .oh-norm, .as-orb.is-sad .oh-glad { opacity: 0; }
.as-orb.is-sad .oh-sad { opacity: 1; }
/* surprised: being carried */
.as-launcher.is-dragging .as-orb.is-head .oh-norm, .as-launcher.is-dragging .as-orb.is-head .oh-glad { opacity: 0; }
.as-launcher.is-dragging .as-orb.is-head .oh-wow { opacity: 1; }
/* thinking: the eyes narrow and look from side to side, the light below pulses */
.as-orb.is-head.is-thinking { animation: as-breathe 1.3s ease-in-out infinite; }
.as-orb.is-head.is-thinking .as-face { animation: none; }
.as-orb.is-head.is-thinking .oh-norm { animation: oh-scan 1.6s ease-in-out infinite; }
.as-orb.is-head.is-thinking .oh-status { animation: oh-pulse .8s ease-in-out infinite; }
@keyframes oh-scan { 0%, 100% { transform: translateX(-2px) scaleY(.55); } 50% { transform: translateX(2px) scaleY(.55); } }
@keyframes oh-pulse { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .as-orb .oh-norm, .as-orb .oh-status { animation: none !important; } }
/* Its little hands: resting at its sides; thinking -- one hand at the chin, tapping, the other under it; glad -- a
   wave; sorry -- they droop; carried -- both up. The outer group takes the pose, the inner one the motion. */
.as-orb .oh-palm, .as-orb .oh-thumb { fill: #f7f8fa; stroke: #c4ccd6; stroke-width: .6; }
.as-orb .oh-hand { transition: transform .45s cubic-bezier(.34, 1.45, .64, 1); }
.as-orb .oh-hand-l { transform: translate(1.8px, 34.8px) rotate(-14deg); }
.as-orb .oh-hand-r { transform: translate(38.2px, 34.8px) rotate(14deg); }
.as-orb.is-head.is-thinking .oh-hand-r { transform: translate(25.2px, 37.2px) rotate(-30deg); }
.as-orb.is-head.is-thinking .oh-hand-l { transform: translate(15.6px, 38.8px) rotate(-6deg); }
.as-orb.is-glad .oh-hand-r, .as-launcher:hover .as-orb.is-head:not(.is-thinking) .oh-hand-r { transform: translate(39.6px, 23.5px) rotate(24deg); }
.as-orb.is-glad .oh-hand-l { transform: translate(.8px, 30.5px) rotate(-22deg); }
.as-orb.is-sad .oh-hand-l { transform: translate(3.4px, 38px) rotate(-34deg); }
.as-orb.is-sad .oh-hand-r { transform: translate(36.6px, 38px) rotate(34deg); }
.as-launcher.is-dragging .as-orb.is-head .oh-hand-l { transform: translate(-1.6px, 18.5px) rotate(-38deg); }
.as-launcher.is-dragging .as-orb.is-head .oh-hand-r { transform: translate(41.6px, 18.5px) rotate(38deg); }
@media (prefers-reduced-motion: no-preference) {
  .as-orb.is-head.is-thinking .oh-hand-r .oh-hand-in { animation: oh-tap .9s ease-in-out infinite; }
  .as-orb.is-glad .oh-hand-r .oh-hand-in, .as-launcher:hover .as-orb.is-head:not(.is-thinking) .oh-hand-r .oh-hand-in { animation: oh-wave .6s ease-in-out 3; }
  .as-launcher.is-dragging .as-orb.is-head .oh-hand-in { animation: oh-flail .32s ease-in-out infinite alternate; }
  .as-launcher.is-dragging .as-orb.is-head .oh-hand-r .oh-hand-in { animation-delay: -.16s; }
}
/* each turns about its wrist, a little below the palm's middle */
@keyframes oh-tap { 0%, 100% { transform: translate(0, 2px) rotate(0deg) translate(0, -2px); } 50% { transform: translate(0, 2px) rotate(-12deg) translate(0, -2.9px); } }
@keyframes oh-wave { 0%, 100% { transform: translate(0, 2px) rotate(0deg) translate(0, -2px); } 30% { transform: translate(0, 2px) rotate(24deg) translate(0, -2px); } 70% { transform: translate(0, 2px) rotate(-20deg) translate(0, -2px); } }
@keyframes oh-flail { from { transform: translate(0, 2px) rotate(-14deg) translate(0, -2px); } to { transform: translate(0, 2px) rotate(14deg) translate(0, -2px); } }

/* The Profile page's choice of avatar */
.profile-assistant { grid-column: 1 / -1; }
.avatar-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; border: 0; }
.avatar-choice legend { margin-bottom: 8px; padding: 0; color: var(--text-2); font-size: 13px; font-weight: 650; }
.avatar-option { position: relative; display: grid; justify-items: center; gap: 10px; padding: 16px 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text-2); font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer; transition: border-color .14s var(--ease), box-shadow .14s var(--ease); }
.avatar-option input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-option:hover { border-color: var(--primary-line); }
.avatar-option:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); color: var(--primary); }
.avatar-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
@keyframes as-hop { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-5px) scale(1.06, .96); } 60% { transform: translateY(0) scale(.97, 1.03); } }
.as-orb.is-breathing { animation: as-breathe 4.2s ease-in-out infinite; }
.as-orb.is-breathing::after { animation: as-halo 4.2s ease-out infinite; }
.as-orb.is-thinking { animation: as-breathe 1.3s ease-in-out infinite, as-turn 3.5s linear infinite; }
.as-orb.is-thinking .as-face { animation: as-look 2.6s ease-in-out infinite; }
@keyframes as-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes as-halo { 0% { opacity: .5; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.22); } }
@keyframes as-turn { to { filter: hue-rotate(360deg); } }
@keyframes as-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes as-look { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-2px); } 65% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .as-orb, .as-orb::after, .as-orb .as-eye, .as-orb .as-face { animation: none !important; } }

/* The launcher in the corner */
.as-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 70; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .18s var(--ease); }
.as-launcher:hover { transform: translateY(-2px); }
/* moved with the mouse or a finger: no page scroll while dragging, no lift animation under the pointer */
.as-launcher { touch-action: none; }
.as-launcher.is-dragging { cursor: grabbing; transform: scale(1.06); transition: none; }
.as-launcher.is-dragging .as-launcher-tip { display: none; }
.as-launcher:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.as-launcher-tip { position: absolute; right: calc(100% + 12px); top: 50%; padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-elevated); color: var(--text); box-shadow: var(--shadow-sm); font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(6px, -50%); transition: opacity .15s var(--ease), transform .15s var(--ease); }
.as-launcher:hover .as-launcher-tip, .as-launcher:focus-visible .as-launcher-tip { opacity: 1; transform: translate(0, -50%); }
.as-launcher-tip small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 500; }
/* put on the left half: the tip shows on its right */
.as-launcher.on-left .as-launcher-tip { right: auto; left: calc(100% + 12px); transform: translate(-6px, -50%); }
.as-launcher.on-left:hover .as-launcher-tip, .as-launcher.on-left:focus-visible .as-launcher-tip { transform: translate(0, -50%); }
.as-launcher[aria-expanded="true"] .as-launcher-tip { display: none; }

/* The window */
.as-window { position: fixed; right: 24px; bottom: 96px; z-index: 71; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(410px, calc(100vw - 32px)); height: min(640px, calc(100vh - 128px)); border: 1px solid var(--line-strong); border-radius: 20px; background: var(--panel-elevated); box-shadow: var(--shadow-lg); overflow: hidden; transform-origin: bottom right; animation: as-open .18s var(--ease); }
@keyframes as-open { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.as-head { display: flex; align-items: center; gap: 11px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--orb-a) 10%, var(--panel-elevated)), color-mix(in srgb, var(--orb-b) 10%, var(--panel-elevated))); }
.as-head .as-orb { --orb: 38px; }
.as-head-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.as-head-text b { color: var(--text); font-size: 14.5px; font-weight: 700; }
.as-head-text small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.as-head-text small i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.as-head-text small.is-off i { background: var(--muted-2); }
.as-icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.as-icon-btn .icon { width: 17px; height: 17px; }
.as-icon-btn:hover { background: var(--panel-muted); color: var(--text); }
.as-icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.as-log { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; scroll-behavior: smooth; }
.as-msg { display: flex; gap: 8px; max-width: 100%; }
.as-msg .as-orb { --orb: 26px; margin-top: 2px; box-shadow: 0 3px 8px var(--orb-glow); }
.as-msg.is-user { justify-content: flex-end; }
.as-bubble { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.as-msg.is-bot .as-bubble { border: 1px solid var(--line); border-top-left-radius: 5px; background: var(--panel); color: var(--text); }
.as-msg.is-user .as-bubble { border-top-right-radius: 5px; background: var(--primary); color: #fff; white-space: pre-wrap; }
.as-bubble p { margin: 0 0 6px; }
.as-bubble p:last-child { margin-bottom: 0; }
.as-bubble ul { margin: 4px 0 6px; padding-left: 18px; }
.as-bubble li { margin: 2px 0; }
.as-bubble strong { font-weight: 700; }
.as-msg.is-error .as-bubble { border-color: var(--red-line); background: var(--red-bg); }
.as-refs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.as-refs button { max-width: 100%; overflow: hidden; padding: 3px 10px; border: 1px solid var(--primary-line); border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: inherit; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.as-refs button:hover { background: var(--primary); color: #fff; }
.as-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.as-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: as-dot 1.2s infinite ease-in-out; }
.as-typing i:nth-child(2) { animation-delay: .15s; }
.as-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes as-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Something to be done: shown in full, done only on "yes". */
.as-card { display: grid; gap: 8px; margin-top: 8px; padding: 11px 12px; border: 1px solid var(--primary-line); border-radius: 12px; background: color-mix(in srgb, var(--primary) 5%, var(--panel)); }
.as-card-title { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 13px; font-weight: 700; }
.as-card-title .icon { width: 16px; height: 16px; color: var(--primary); }
.as-card dl { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 5px 12px; margin: 0; font-size: 12.5px; }
.as-card dt { color: var(--muted); }
.as-card dd { margin: 0; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.as-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.as-card-actions .btn { white-space: nowrap; }
.as-card-actions .btn { min-height: 34px; }
.as-card.is-done { border-color: var(--green-line); background: var(--green-bg); }
.as-card.is-cancelled { opacity: .65; border-color: var(--line); background: var(--panel-muted); }
.as-card-state { font-size: 12.5px; font-weight: 650; }
.as-card.is-done .as-card-state { color: var(--green); }
.as-card.is-failed { border-color: var(--red-line); }
.as-card.is-failed .as-card-state { color: var(--red); }

.as-welcome { display: grid; gap: 10px; }
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.as-chips button { padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .14s var(--ease), color .14s var(--ease); }
.as-chips button:hover, .as-chips button:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }

.as-foot { display: grid; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: var(--panel-elevated); }
.as-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); transition: border-color .14s var(--ease), box-shadow .14s var(--ease); }
.as-input-row:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.as-input-row textarea { flex: 1; min-height: 24px; max-height: 140px; overflow-y: hidden; padding: 6px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.45; resize: none; outline: none; }
.as-input-row textarea::placeholder { color: var(--muted-2); }
.as-send { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 11px; background: var(--primary); color: #fff; cursor: pointer; }
.as-send:disabled { background: var(--line-strong); cursor: not-allowed; }
.as-send .icon { width: 18px; height: 18px; }
.as-mic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; }
.as-mic .icon { width: 19px; height: 19px; }
.as-mic:hover { background: var(--panel-muted); color: var(--primary); }
.as-mic.is-live { background: var(--red-bg); color: var(--red); animation: as-live 1.2s ease-in-out infinite; }
@keyframes as-live { 50% { box-shadow: 0 0 0 5px var(--red-bg); } }
.as-mic:focus-visible, .as-send:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.as-hint { color: var(--muted-2); font-size: 11px; text-align: center; }

@media (max-width: 640px) {
  .as-launcher { right: 16px; bottom: 16px; }
  .as-window { inset: 0; width: auto; height: auto; border-radius: 0; animation: none; }
}