/*
 * «دستیار هوشمند» (resources/views/default/site-assistant/widget.blade.php).
 * Plain CSS on purpose: a deploy does not rebuild the Tailwind bundle. Every
 * colour comes from the shell's own tokens: the panel's HSL roles
 * (scss/base/_vars.scss, dark = body.theme-dark) or the public site's
 * home-v2 colours (dark by default, html[data-theme=light] for light).
 */

/* ---------- tokens ---------- */
.hn-sa[data-shell=panel] {
    --sa-canvas: hsl(var(--background));
    --sa-surface: hsl(var(--card-background));
    --sa-raised: hsl(var(--input-background));
    --sa-border: hsl(var(--border));
    --sa-field-border: hsl(var(--input-border));
    --sa-text: hsl(var(--heading-foreground));
    --sa-soft: hsl(var(--foreground));
    --sa-muted: hsl(var(--label));
    --sa-accent: hsl(var(--primary));
    --sa-action: hsl(var(--primary));
    --sa-on-action: hsl(var(--primary-foreground));
    --sa-tint: hsl(var(--primary) / .08);
    --sa-ring: hsl(var(--primary) / .55);
    --sa-shadow: 0 24px 64px -12px hsl(var(--heading-foreground) / .22), 0 2px 6px hsl(var(--heading-foreground) / .06);
}
/* In dark the panel's primary is a light violet; white text on it is too faint. */
.theme-dark .hn-sa[data-shell=panel] {
    --sa-action: color-mix(in oklab, hsl(var(--primary)) 72%, black);
    --sa-tint: hsl(var(--primary) / .14);
    --sa-shadow: 0 24px 64px -12px rgb(0 0 0 / .6), 0 0 0 1px hsl(var(--border));
}
.hn-sa[data-shell=home] {
    --sa-canvas: var(--bg);
    --sa-surface: var(--panel);
    --sa-raised: var(--panel-2);
    --sa-border: var(--stroke);
    --sa-field-border: var(--stroke);
    --sa-text: var(--text);
    --sa-soft: color-mix(in srgb, var(--text) 82%, var(--muted));
    --sa-muted: var(--muted);
    --sa-accent: var(--purple-soft);
    --sa-action: var(--purple);
    --sa-on-action: #fff;
    --sa-tint: color-mix(in srgb, var(--purple) 14%, transparent);
    --sa-ring: color-mix(in srgb, var(--purple-soft) 70%, transparent);
    --sa-shadow: 0 24px 64px -12px rgb(0 0 0 / .55), 0 0 0 1px var(--stroke);
}
html[data-theme=light] .hn-sa[data-shell=home] {
    --sa-tint: color-mix(in srgb, var(--purple) 9%, transparent);
    --sa-shadow: 0 24px 64px -12px rgb(34 33 63 / .2), 0 2px 6px rgb(34 33 63 / .06);
}

/* The theme's Dana draws ASCII digits as Persian ones, so "Soul 2" would read
   "Soul ۲". Only the digit range comes from a Latin font; Persian digits
   (U+06F0-06F9) still come from Dana. */
@font-face {
    font-family: "hn-sa-latin-digits";
    src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial");
    unicode-range: U+0030-0039;
}

.hn-sa {
    --sa-ease: cubic-bezier(.2, .8, .2, 1);
    --sa-gap: 20px;
    --sa-start: 20px;
    --sa-bottom: 20px;
    --sa-lift: 0px;
    direction: rtl;
}
/* --sa-font: the page's own font stack, set by the script. */
.hn-sa-panel, .hn-sa-spot__label { font-family: "hn-sa-latin-digits", var(--sa-font, sans-serif); }
.hn-sa[hidden] { display: none; }
.hn-sa *, .hn-sa *::before, .hn-sa *::after { box-sizing: border-box; letter-spacing: 0; }
.hn-sa-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hn-sa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- where the button sits ---------- */
/* Panel: just inside the content, next to the right-hand sidebar. */
@media (min-width: 992px) {
    .hn-sa[data-shell=panel] { --sa-start: calc(var(--navbar-width, 17.875rem) + 20px); }
}
/* Public site: clear of the 82px rail; above the bottom dock on phones. */
.hn-sa[data-shell=home] { --sa-start: 102px; }
@media (max-width: 820px) { .hn-sa[data-shell=home] { --sa-start: 16px; } }
@media (max-width: 620px) { .hn-sa[data-shell=home] { --sa-bottom: 76px; } }

/* ---------- the button ----------
 * After FlameButton (Ayush, 21st.dev): a brushed-silver pill; on hover a
 * flame follows the pointer inside it, and a warm glow wakes at whichever end
 * the pointer is nearer. The script (flame() in assistant.js) moves --mx and
 * eases --glow; the warm colours are the original's, on purpose not violet. */
.hn-sa-launch {
    --mx: 50%;
    --glow: 0;
    --edge: 88%;
    --flame-ink: #FFFFFF;
    --coral: #DA6556;
    position: fixed; z-index: 60; isolation: isolate;
    inset-inline-start: var(--sa-start);
    bottom: calc(var(--sa-bottom) + var(--sa-lift) + env(safe-area-inset-bottom, 0px));
    display: inline-block; height: 44px; padding: 0; cursor: pointer; user-select: none;
    border: 0; border-radius: 9999px; background: none;
    color: var(--flame-ink); font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms var(--sa-ease), opacity 180ms var(--sa-ease), bottom 240ms var(--sa-ease);
}
.hn-sa-launch:active { transform: scale(.97); }
.hn-sa-launch:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.hn-sa-launch[aria-expanded=true] { opacity: 0; pointer-events: none; transform: scale(.9); }

/* The glow round the pill, at the end the pointer is nearer. */
.hn-sa-flame-glow {
    position: absolute; inset: -6px; z-index: -1; border-radius: 9999px; pointer-events: none;
    background: radial-gradient(ellipse 44% 85% at var(--edge) 50%,
        rgb(255 214 130 / 1) 0%, rgb(255 106 45 / .95) 28%, rgb(255 45 85 / .5) 50%,
        rgb(255 45 85 / .12) 68%, transparent 80%);
    filter: blur(7px) saturate(1.4);
    opacity: var(--glow);
}
/* The pill itself. */
.hn-sa-flame-face {
    position: absolute; inset: 0; overflow: hidden; border-radius: 9999px; pointer-events: none;
    border: 1px solid transparent;
    /* The owner's colour, #DA6556, a touch lighter and deeper at the ends so it reads as a surface. */
    background: linear-gradient(100deg, #E57767 0%, #DA6556 45%, #CF5848 100%);
    /* A halo of the same colour, as a shadow. */
    box-shadow: 0 10px 30px -6px rgb(218 101 86 / .65), 0 0 22px rgb(218 101 86 / .35), inset 0 1px 0 rgb(255 255 255 / .28);
    transition: box-shadow 180ms var(--sa-ease);
}
.hn-sa-launch:hover .hn-sa-flame-face { box-shadow: 0 12px 36px -6px rgb(218 101 86 / .8), 0 0 30px rgb(218 101 86 / .45), inset 0 1px 0 rgb(255 255 255 / .32); }
/* The flame under the pointer. */
.hn-sa-flame-heat { position: absolute; inset: 0; opacity: 0; transition: opacity 150ms ease-out; }
.hn-sa-launch.is-hot .hn-sa-flame-heat { opacity: 1; }
/* Under the flame the text turns dark, as in the original, so it stays readable. */
.hn-sa-launch.is-hot .hn-sa-launch__label { color: #5A250A; text-shadow: none; }
.hn-sa-launch.is-hot .hn-sa-ico { filter: none; }
.hn-sa-flame-heat span { position: absolute; top: 50%; translate: 0 -50%; border-radius: 9999px; }
.hn-sa-flame-heat span:first-child {
    width: 121px; height: 121px; left: calc(var(--mx) - 60.5px);
    background: radial-gradient(50% 50% at 50% 50%, #FFFFF5 3.5%, rgb(255 106 45 / 1) 26.5%, #FFDA9F 37.5%, rgb(255 106 45 / .5) 49%, rgb(255 45 85 / 0) 92.5%);
}
.hn-sa-flame-heat span:last-child {
    width: 204px; height: 103px; left: calc(var(--mx) - 102px); filter: blur(5px);
    background: radial-gradient(43.3% 44.23% at 50% 49.51%, #FFFFF7 29%, #FFFACD 48.5%, #F4D2BF 60.71%, rgb(214 211 210 / 0) 100%);
}

.hn-sa-launch__label {
    position: relative; z-index: 1; height: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding-inline: 22px 26px; white-space: nowrap;
}
.hn-sa-launch__label { text-shadow: 0 1px 2px rgb(110 30 20 / .45); transition: color 150ms ease-out; }
.hn-sa-launch .hn-sa-ico { width: 20px; height: 20px; stroke-width: 2; filter: drop-shadow(0 1px 2px rgb(110 30 20 / .45)); }

/* Phones: an icon only, so it covers as little of the page as it can. */
@media (max-width: 767.98px) {
    .hn-sa-launch { width: 52px; height: 52px; }
    .hn-sa-launch__label { padding: 0; }
    .hn-sa-launch__text { display: none; }
    .hn-sa-launch .hn-sa-ico { width: 24px; height: 24px; }
    .hn-sa[data-shell=panel] .hn-sa-launch { --sa-start: 12px; }
}

/* Out of the way while a menu drawer is open. */
body.menu-open .hn-sa-launch, body.mobile-nav-open .hn-sa-launch { opacity: 0; pointer-events: none; }

/* ---------- the panel ---------- */
.hn-sa-panel {
    position: fixed; z-index: 61;
    inset-inline-start: var(--sa-start);
    bottom: calc(var(--sa-bottom) + env(safe-area-inset-bottom, 0px));
    width: min(400px, calc(100vw - 32px));
    height: min(640px, calc(100dvh - var(--sa-bottom) - 40px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--sa-surface); color: var(--sa-soft);
    border: 1px solid var(--sa-border); border-radius: 20px;
    box-shadow: var(--sa-shadow);
    font-size: 14px; line-height: 1.85;
    transform-origin: bottom right;
    animation: hn-sa-in 240ms var(--sa-ease);
}
.hn-sa-panel[hidden] { display: none; }
@keyframes hn-sa-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }

@media (max-width: 767.98px) {
    /* A bottom sheet: the whole width, most of the height. */
    .hn-sa-panel {
        inset-inline: 0; bottom: 0; width: 100%;
        height: min(86dvh, 720px);
        border-radius: 20px 20px 0 0; border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation-name: hn-sa-up;
    }
    @keyframes hn-sa-up { from { transform: translateY(100%); } }
    .hn-sa-scrim { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .45); animation: hn-sa-fade 240ms var(--sa-ease); }
    @keyframes hn-sa-fade { from { opacity: 0; } }
}
@media (min-width: 768px) { .hn-sa-scrim { display: none; } }

.hn-sa-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px 12px 10px; border-bottom: 1px solid var(--sa-border);
}
.hn-sa-head__mark {
    width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px;
    background: var(--sa-tint); color: var(--sa-accent);
}
.hn-sa-head__mark .hn-sa-ico { stroke-width: 2; }
.hn-sa-head__text { flex: 1; min-width: 0; }
.hn-sa-head h2 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--sa-text); }
.hn-sa-head p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--sa-muted); }

.hn-sa-iconbtn {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 12px; background: transparent; color: var(--sa-muted); cursor: pointer;
    transition: background 120ms, color 120ms;
}
.hn-sa-iconbtn:hover { background: var(--sa-tint); color: var(--sa-text); }
.hn-sa-iconbtn:focus-visible { outline: 2px solid var(--sa-ring); outline-offset: 2px; }
.hn-sa-iconbtn:disabled { opacity: .45; cursor: not-allowed; }

/* «گزارش مشکل» in the header, and its form in place of the conversation. */
.hn-sa-report-btn {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; cursor: pointer;
    border: 1px solid var(--sa-border); border-radius: 10px; background: transparent; color: var(--sa-soft);
    font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.hn-sa-report-btn .hn-sa-ico { width: 16px; height: 16px; }
.hn-sa-report-btn:hover { background: var(--sa-tint); color: var(--sa-text); }
.hn-sa-report-btn[aria-expanded=true] { background: var(--sa-tint); border-color: var(--sa-ring); color: var(--sa-text); }
.hn-sa-report-btn:focus-visible { outline: 2px solid var(--sa-ring); outline-offset: 2px; }
.hn-sa-report-btn[hidden] { display: none; }
@media (max-width: 380px) {
    .hn-sa-report-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; }
    .hn-sa-report-btn span { display: none; }
}
.hn-sa-report { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hn-sa-report[hidden] { display: none; }
.hn-sa-report__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--sa-text); }
.hn-sa-report__lead { margin: 0; font-size: 13px; line-height: 1.85; color: var(--sa-muted); }
.hn-sa-report__text {
    width: 100%; min-height: 120px; resize: vertical; padding: 10px 12px;
    border: 1px solid var(--sa-field-border); border-radius: 12px; background: var(--sa-raised); color: var(--sa-text);
    font: inherit; font-size: 14px; line-height: 1.85; outline: none;
    transition: border-color 120ms, box-shadow 120ms;
}
.hn-sa-report__text::placeholder { color: var(--sa-muted); opacity: 1; }
.hn-sa-report__text:focus { border-color: var(--sa-ring); box-shadow: inset 0 0 0 1px var(--sa-ring); }
.hn-sa-report__text[aria-invalid=true] { border-color: #FF5C68; }
.hn-sa-report__pic { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hn-sa-report__pic label.hn-sa-chip { cursor: pointer; }
.hn-sa-report__pic:has(#hn-sa-report-file:focus-visible) label.hn-sa-chip { outline: 2px solid var(--sa-ring); outline-offset: 2px; }
.hn-sa-report__thumb { position: relative; margin: 0; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; border: 1px solid var(--sa-border); }
.hn-sa-report__thumb[hidden] { display: none; }
.hn-sa-report__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-sa-report__thumb .hn-sa-iconbtn { position: absolute; top: 2px; inset-inline-end: 2px; width: 28px; height: 28px; border-radius: 8px; background: rgb(0 0 0 / .55); color: #fff; }
.hn-sa-report__thumb .hn-sa-iconbtn .hn-sa-ico { width: 16px; height: 16px; }
.hn-sa-report__msg { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--sa-muted); }
.hn-sa-report__msg:empty { display: none; }
.hn-sa-report__msg[data-tone=error] { color: #FF5C68; }
.hn-sa-report__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hn-sa-report__acts .hn-sa-chip { min-height: 40px; padding: 4px 16px; }
.hn-sa-report__acts .hn-sa-chip:disabled { opacity: .55; cursor: progress; }
.hn-sa-panel[data-view=report] .hn-sa-log, .hn-sa-panel[data-view=report] .hn-sa-compose { display: none; }

/* ---------- conversation ---------- */
.hn-sa-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
.hn-sa-log:focus { outline: none; }

.hn-sa-hello__title { margin: 4px 0 2px; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--sa-text); }
.hn-sa-hello__lead { margin: 0 0 14px; color: var(--sa-muted); }
.hn-sa-suggest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hn-sa-suggest button {
    width: 100%; display: block; text-align: start; padding: 10px 14px; cursor: pointer;
    border: 1px solid var(--sa-border); border-radius: 12px; background: var(--sa-raised); color: var(--sa-soft);
    font: inherit; font-size: 13.5px; line-height: 1.7;
    transition: border-color 120ms, background 120ms, color 120ms;
}
.hn-sa-suggest button:hover { border-color: var(--sa-ring); color: var(--sa-text); }
.hn-sa-suggest button:focus-visible { outline: 2px solid var(--sa-ring); outline-offset: 2px; }

/* «دستیار از تو چه یادش هست؟» */
.hn-sa-mem { margin-top: 14px; }
.hn-sa-mem__open, .hn-sa-mem__forget {
    padding: 6px 2px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 13px; line-height: 1.7; color: var(--sa-muted);
    text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sa-border);
}
.hn-sa-mem__open:hover, .hn-sa-mem__forget:hover { color: var(--sa-text); }
.hn-sa-mem__open:focus-visible, .hn-sa-mem__forget:focus-visible { outline: 2px solid var(--sa-ring); outline-offset: 2px; border-radius: 6px; }
.hn-sa-mem__box { margin-top: 6px; padding: 10px 14px; border: 1px solid var(--sa-border); border-radius: 12px; background: var(--sa-raised); }
.hn-sa-mem__list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.8; color: var(--sa-soft); }
.hn-sa-mem__empty { margin: 0; font-size: 13px; line-height: 1.8; color: var(--sa-muted); }
.hn-sa-mem__forget[data-sure] { color: #FF5C68; text-decoration-color: currentColor; }

.hn-sa-msg { max-width: 100%; }
.hn-sa-msg--user {
    align-self: flex-start; max-width: 86%;
    padding: 9px 14px; border-radius: 16px 16px 16px 4px;
    background: var(--sa-tint); color: var(--sa-text); white-space: pre-wrap; overflow-wrap: anywhere;
}
.hn-sa-msg--bot { align-self: stretch; color: var(--sa-soft); }
.hn-sa-msg--bot .hn-sa-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hn-sa-msg--error .hn-sa-text { color: var(--sa-text); }
.hn-sa-msg--error {
    padding: 10px 14px; border-radius: 14px; border: 1px solid var(--sa-border); background: var(--sa-raised);
}

.hn-sa-steps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: sa-step; }
.hn-sa-step { position: relative; padding-inline-start: 34px; counter-increment: sa-step; }
.hn-sa-step::before {
    content: counter(sa-step, persian); position: absolute; inset-inline-start: 0; top: 2px;
    width: 24px; height: 24px; display: grid; place-items: center; border-radius: 9999px;
    background: var(--sa-tint); color: var(--sa-accent); font-size: 12px; font-weight: 700; line-height: 1;
}
.hn-sa-step p { margin: 0; overflow-wrap: anywhere; }
.hn-sa-step__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.hn-sa-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; cursor: pointer;
    border: 1px solid var(--sa-border); border-radius: 9999px; background: var(--sa-surface); color: var(--sa-text);
    font: inherit; font-size: 13px; font-weight: 500; line-height: 1.5; text-decoration: none;
    transition: border-color 120ms, background 120ms, color 120ms;
}
.hn-sa-chip .hn-sa-ico { width: 16px; height: 16px; }
.hn-sa-chip:hover { border-color: var(--sa-ring); background: var(--sa-tint); }
.hn-sa-chip:focus-visible { outline: 2px solid var(--sa-ring); outline-offset: 2px; }
.hn-sa-chip--go { background: var(--sa-action); border-color: transparent; color: var(--sa-on-action); }
.hn-sa-chip--go:hover { background: var(--sa-action); border-color: transparent; filter: brightness(1.08); }
.hn-sa-chip[aria-busy=true] { opacity: .6; cursor: progress; }

.hn-sa-shots { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.hn-sa-shot { margin: 0; border: 1px solid var(--sa-border); border-radius: 14px; overflow: hidden; background: var(--sa-raised); }
.hn-sa-shot a { display: block; }
.hn-sa-shot img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; object-position: top; }
.hn-sa-shot figcaption { padding: 6px 12px 8px; font-size: 12px; line-height: 1.7; color: var(--sa-muted); }

.hn-sa-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hn-sa-foot .hn-sa-iconbtn { width: 34px; height: 34px; border-radius: 10px; }
.hn-sa-foot .hn-sa-iconbtn .hn-sa-ico { width: 18px; height: 18px; }
.hn-sa-foot .hn-sa-iconbtn[aria-pressed=true] { background: var(--sa-tint); color: var(--sa-accent); }
.hn-sa-foot__thanks { font-size: 12px; color: var(--sa-muted); }
.hn-sa-foot .hn-sa-chip { margin-inline-start: auto; }

.hn-sa-typing { display: inline-flex; align-items: center; gap: 8px; color: var(--sa-muted); font-size: 13px; }
.hn-sa-typing i { display: inline-flex; gap: 4px; }
.hn-sa-typing b { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; opacity: .35; animation: hn-sa-dot 1.2s infinite ease-in-out; }
.hn-sa-typing b:nth-child(2) { animation-delay: .15s; }
.hn-sa-typing b:nth-child(3) { animation-delay: .3s; }
@keyframes hn-sa-dot { 40% { opacity: 1; transform: translateY(-2px); } }

/* ---------- composer ---------- */
.hn-sa-compose { padding: 8px 12px 10px; border-top: 1px solid var(--sa-border); }
.hn-sa-status { margin: 0 4px 6px; font-size: 12px; line-height: 1.7; color: var(--sa-muted); }
.hn-sa-status:empty { display: none; }
.hn-sa-status[data-tone=warn] { color: var(--sa-text); }
.hn-sa-field {
    display: flex; align-items: flex-end; gap: 4px; padding: 4px;
    border: 1px solid var(--sa-field-border); border-radius: 16px; background: var(--sa-raised);
    transition: border-color 120ms, box-shadow 120ms;
}
.hn-sa-field:focus-within { border-color: var(--sa-ring); box-shadow: inset 0 0 0 1px var(--sa-ring); }
/* The «بوردر درخشان پایین» wrapper (beam.css); it takes the field's radius. */
.hn-sa-beam { border-radius: 16px; }
.hn-sa-field textarea {
    flex: 1; min-width: 0; min-height: 40px; max-height: 132px; resize: none; overflow-y: hidden; scrollbar-width: thin;
    padding: 8px 10px; border: 0; background: transparent; color: var(--sa-text);
    font: inherit; font-size: 14px; font-weight: 400; line-height: 1.75; outline: none; box-shadow: none;
}
.hn-sa-field textarea::placeholder { color: var(--sa-muted); opacity: 1; }
.hn-sa-send {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
    border: 0; border-radius: 12px; background: var(--sa-action); color: var(--sa-on-action);
    transition: filter 120ms, opacity 120ms, transform 120ms;
}
/* The paper plane points the way the text reads. */
.hn-sa-send .hn-sa-ico { transform: scaleX(-1); }
.hn-sa-send:hover { filter: brightness(1.08); }
.hn-sa-send:active { transform: scale(.95); }
.hn-sa-send:focus-visible { outline: 2px solid var(--sa-ring); outline-offset: 2px; }
.hn-sa-send:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.hn-sa-send[aria-busy=true] { cursor: progress; }
/* Recording: the mic turns red, breathes, and two rings spread out from it. */
.hn-sa-mic { position: relative; }
.hn-sa-mic[aria-pressed=true] { background: rgb(255 92 104 / .14); color: #FF5C68; }
.hn-sa-mic[aria-pressed=true] .hn-sa-ico { animation: hn-sa-rec-beat 1.1s ease-in-out infinite; }
.hn-sa-mic[aria-pressed=true]::before,
.hn-sa-mic[aria-pressed=true]::after {
    content: ""; position: absolute; inset: 4px; border-radius: 12px; pointer-events: none;
    border: 2px solid #FF5C68; opacity: 0;
    animation: hn-sa-rec-ring 1.6s cubic-bezier(.2, .8, .2, 1) infinite;
}
.hn-sa-mic[aria-pressed=true]::after { animation-delay: .8s; }
@keyframes hn-sa-rec-beat { 50% { transform: scale(1.18); } }
@keyframes hn-sa-rec-ring { 0% { opacity: .7; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.5); } }
.hn-sa-status[data-tone=rec]::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 9999px;
    background: #FF5C68; vertical-align: middle; animation: hn-sa-rec-beat 1.1s ease-in-out infinite;
}
.hn-sa-note { margin: 6px 4px 0; font-size: 11.5px; line-height: 1.7; color: var(--sa-muted); }

/* ---------- "show me" on the page ---------- */
.hn-sa-spot {
    position: fixed; z-index: 59; pointer-events: none; border-radius: 12px;
    box-shadow: 0 0 0 3px var(--sa-ring), 0 0 0 9999px rgb(0 0 0 / .38);
    transition: inset 180ms var(--sa-ease);
    animation: hn-sa-spot 1.6s ease-in-out 2;
}
@keyframes hn-sa-spot { 50% { box-shadow: 0 0 0 6px var(--sa-ring), 0 0 0 9999px rgb(0 0 0 / .38); } }
.hn-sa-spot__label {
    position: fixed; z-index: 59; max-width: min(280px, calc(100vw - 32px)); pointer-events: auto;
    padding: 8px 12px; border-radius: 12px; background: var(--sa-action); color: var(--sa-on-action);
    font-size: 13px; font-weight: 500; line-height: 1.7; box-shadow: var(--sa-shadow);
}

@media (prefers-reduced-motion: reduce) {
    .hn-sa-launch, .hn-sa-panel, .hn-sa-scrim, .hn-sa-spot, .hn-sa-typing b,
    .hn-sa-mic[aria-pressed=true] .hn-sa-ico, .hn-sa-mic[aria-pressed=true]::before, .hn-sa-mic[aria-pressed=true]::after,
    .hn-sa-status[data-tone=rec]::before { animation: none !important; transition: none !important; }
    .hn-sa-log { scroll-behavior: auto; }
}