/*
 * «دستیار هوشمند» (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);
}
/* Every palette sets a dark --primary-foreground that reads on its own --primary, so the action keeps both. */
.theme-dark .hn-sa[data-shell=panel] {
    --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(52 33 63 / .2), 0 2px 6px rgb(52 33 63 / .06);
}

/* The box, the hello bubble and its close pill stand apart from the page
   (the owner, 2026-10-25): both shells used their card colour, which is the
   page colour in light and only a shade off it in dark. Light takes the
   lavender chrome, dark a clearly lifted surface; fields inside stay raised. */
.hn-sa[data-shell=panel] {
    --sa-surface: hsl(var(--studio-chrome));
    --sa-raised: hsl(var(--background));
    --sa-border: hsl(258 40% 86%);
}
.theme-dark .hn-sa[data-shell=panel] {
    /* Still read as the page (the owner, 2026-10-25): lifted further, and the
       chips and the field sit a step lighter than the box, not darker. */
    --sa-surface: hsl(236 20% 19%);
    --sa-raised: hsl(236 18% 25%);
    --sa-border: hsl(236 16% 32%);
    --sa-field-border: hsl(236 16% 36%);
}
.hn-sa[data-shell=home] {
    --sa-surface: #312638;
    --sa-raised: #3d3045;
    --sa-border: #52415c;
    --sa-field-border: #5d4a68;
}
html[data-theme=light] .hn-sa[data-shell=home] {
    --sa-surface: #f6f1f9;
    --sa-raised: #fff;
    --sa-border: #e4d3ee;
}

/* 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 ----------
 * The bottom-left corner, the end side in RTL (the owner, 2026-10-25), away
 * from the right-hand sidebar and rail. --sa-start is the gap from that edge. */
@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-end: 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; }
}

/* ---------- the brain ----------
 * Replaces the flame pill: a little brain that blinks twice, quickly, every
 * 3.6 seconds. brain.webp is six frames side by side, eyes open (1) to shut
 * (6); background-position walks them with step-end, so no frame is blended. */
.hn-sa-launch--brain { width: 80px; height: 64px; border-radius: 16px; }
.hn-sa-brain {
    display: block; width: 100%; height: 100%;
    background: url(brain.webp) 0 0 / 600% 100% no-repeat;
    filter: drop-shadow(0 6px 14px rgb(188 112 235 / .35));
    animation: hn-sa-blink 3.6s step-end infinite;
    transition: transform 180ms var(--sa-ease);
}
.hn-sa-launch--brain:hover .hn-sa-brain { transform: translateY(-2px) scale(1.05); }
.hn-sa-launch--brain:focus-visible { outline: 2px solid var(--sa-ring); outline-offset: 4px; }
@keyframes hn-sa-blink {
    0% { background-position-x: 0%; }
    81.33% { background-position-x: 0%; }
    82.22% { background-position-x: 20%; }
    83.11% { background-position-x: 40%; }
    84.00% { background-position-x: 60%; }
    84.89% { background-position-x: 80%; }
    85.78% { background-position-x: 100%; }
    86.67% { background-position-x: 80%; }
    87.56% { background-position-x: 60%; }
    88.44% { background-position-x: 40%; }
    89.33% { background-position-x: 20%; }
    90.22% { background-position-x: 0%; }
    91.11% { background-position-x: 20%; }
    92.00% { background-position-x: 40%; }
    92.89% { background-position-x: 60%; }
    93.78% { background-position-x: 80%; }
    94.67% { background-position-x: 100%; }
    95.56% { background-position-x: 80%; }
    96.44% { background-position-x: 60%; }
    97.33% { background-position-x: 40%; }
    98.22% { background-position-x: 20%; }
    99.11% { background-position-x: 0%; }
}
@media (max-width: 767.98px) {
    .hn-sa-launch--brain { width: 60px; height: 48px; }
}

/* The hello bubble above the brain (desktop). Its close pill sits on top, at the end side. */
.hn-sa-bubble {
    position: fixed; z-index: 60;
    inset-inline-end: var(--sa-start);
    bottom: calc(var(--sa-bottom) + var(--sa-lift) + 64px + 14px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    max-width: 264px;
    font-family: "hn-sa-latin-digits", var(--sa-font, sans-serif);
    animation: hn-sa-bubble-in 240ms var(--sa-ease);
}
.hn-sa-bubble[hidden] { display: none; }
.hn-sa-bubble__close {
    display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 12px;
    border: 1px solid var(--sa-border); border-radius: 9999px; background: var(--sa-surface);
    color: var(--sa-soft); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.4; cursor: pointer;
    box-shadow: 0 2px 8px rgb(0 0 0 / .08);
    transition: color 120ms var(--sa-ease), border-color 120ms var(--sa-ease);
}
.hn-sa-bubble__close .hn-sa-ico { width: 14px; height: 14px; }
.hn-sa-bubble__close:hover { color: var(--sa-text); border-color: var(--sa-field-border); }
.hn-sa-bubble__body {
    position: relative; display: block; padding: 14px 18px;
    border: 1px solid var(--sa-border); border-radius: 20px; background: var(--sa-surface);
    color: var(--sa-text); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.85; text-align: start;
    cursor: pointer; box-shadow: var(--sa-shadow);
    transition: transform 180ms var(--sa-ease);
}
.hn-sa-bubble__body:hover { transform: translateY(-1px); }
/* The tail, pointing down at the brain. */
.hn-sa-bubble__body::after {
    content: ""; position: absolute; bottom: -7px; inset-inline-end: 33px;
    width: 14px; height: 14px; rotate: 45deg;
    background: var(--sa-surface); border-inline-end: 1px solid var(--sa-border); border-bottom: 1px solid var(--sa-border);
}
.hn-sa-bubble__close:focus-visible, .hn-sa-bubble__body:focus-visible { outline: 2px solid var(--sa-ring); outline-offset: 2px; }
@keyframes hn-sa-bubble-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (max-width: 767.98px) { .hn-sa-bubble { display: none !important; } }

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

/* ---------- the panel (redesign, 2026-11-02) ----------
 * The owner's approved boards: a near-black box with a breath of the brand
 * colour in dark, white on a faintly tinted body in light; every value is
 * worked out from four inputs per shell and theme, so all fifteen palettes
 * follow. The palettes still set the older --sa-surface/--sa-border for the
 * hello bubble; the panel reads only the --sv-* tokens below. */
.hn-sa[data-shell=panel] {
    --sv-base: white;
    --sv-pri: hsl(var(--primary));
    --sv-on: hsl(var(--primary-foreground));
}
.theme-dark .hn-sa[data-shell=panel] {
    --sv-base: hsl(var(--background));
}
.hn-sa[data-shell=home] {
    --sv-base: var(--bg);
    --sv-pri: var(--purple-soft);
    --sv-on: var(--bg);
}
html[data-theme=light] .hn-sa[data-shell=home] {
    --sv-base: white;
    /* --purple, not -soft: white on it is what every palette was built for. */
    --sv-pri: var(--purple);
    --sv-on: white;
}
/* The base (purple) palette sets no dark --primary-foreground, so it would be
   white on light violet (about 3.5:1); its near-black page colour reads instead. */
:root:not([class*="palette-p"]) .theme-dark .hn-sa[data-shell=panel] {
    --sv-on: hsl(var(--background));
    --sa-on-action: hsl(var(--background));
}
/* Dark (the panel's .theme-dark, the public site's default). */
.theme-dark .hn-sa[data-shell=panel],
html:not([data-theme=light]) .hn-sa[data-shell=home] {
    --sv-surface: color-mix(in oklab, var(--sv-base) 95%, var(--sv-pri));
    --sv-body: var(--sv-surface);
    --sv-card: color-mix(in oklab, var(--sv-surface) 95%, var(--sa-text));
    --sv-card-hover: color-mix(in oklab, var(--sv-surface) 91%, var(--sa-text));
    --sv-field: color-mix(in oklab, var(--sv-surface) 55%, black);
    --sv-line: color-mix(in oklab, var(--sv-surface) 89%, var(--sa-text));
    --sv-line-2: color-mix(in oklab, var(--sv-surface) 81%, var(--sa-text));
    --sv-tint: color-mix(in oklab, var(--sv-pri) 14%, transparent);
    --sv-tint-2: color-mix(in oklab, var(--sv-pri) 8%, transparent);
    --sv-link: color-mix(in oklab, var(--sv-pri), white 25%);
    --sv-menu: color-mix(in oklab, var(--sv-pri) 60%, black);
    --sv-shadow: 0 24px 64px -12px rgb(0 0 0 / .6);
}
/* Light. */
.hn-sa[data-shell=panel],
html[data-theme=light] .hn-sa[data-shell=home] {
    --sv-surface: white;
    --sv-body: color-mix(in oklab, white 96%, var(--sv-pri));
    --sv-card: white;
    --sv-card-hover: color-mix(in oklab, white 94%, var(--sv-pri));
    --sv-field: white;
    --sv-line: color-mix(in oklab, color-mix(in oklab, white 88%, var(--sa-text)) 92%, var(--sv-pri));
    --sv-line-2: color-mix(in oklab, color-mix(in oklab, white 79%, var(--sa-text)) 92%, var(--sv-pri));
    --sv-tint: color-mix(in oklab, var(--sv-pri) 12%, transparent);
    --sv-tint-2: color-mix(in oklab, var(--sv-pri) 8%, transparent);
    --sv-link: var(--sv-pri);
    --sv-menu: color-mix(in oklab, var(--sv-pri) 85%, black);
    --sv-shadow: 0 24px 64px -12px color-mix(in oklab, var(--sa-text) 22%, transparent), 0 2px 6px color-mix(in oklab, var(--sa-text) 6%, transparent);
}
.hn-sa-panel {
    position: fixed; z-index: 61;
    inset-inline-end: var(--sa-start);
    bottom: calc(var(--sa-bottom) + env(safe-area-inset-bottom, 0px));
    width: min(400px, calc(100vw - 32px));
    height: min(680px, calc(100dvh - var(--sa-bottom) - 40px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--sv-surface); color: var(--sa-soft);
    border: 1px solid var(--sv-line); border-radius: 20px;
    box-shadow: var(--sv-shadow);
    font-size: 14px; line-height: 1.85;
    transform-origin: bottom left;
    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; } }

/* ---------- header: close, mark, title, new, ⋯ ---------- */
.hn-sa-head {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 12px 12px 10px; border-bottom: 1px solid var(--sv-line);
}
.hn-sa-head__mark {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 14px;
    background: var(--sv-tint); color: var(--sv-pri);
}
.hn-sa-head__mark .hn-sa-ico { width: 22px; height: 22px; }
.hn-sa-head__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hn-sa-head h2 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.6; color: var(--sa-text); }
.hn-sa-head p { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.7; color: var(--sa-muted); }
.hn-sa-head__dot { width: 7px; height: 7px; flex: none; border-radius: 9999px; background: #34D399; }

.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(--sv-tint); color: var(--sa-text); }
.hn-sa-iconbtn[aria-expanded=true] { background: var(--sv-card-hover); color: var(--sa-text); }
.hn-sa-iconbtn:focus-visible { outline: 2px solid var(--sv-pri); outline-offset: 2px; }
.hn-sa-iconbtn:disabled { opacity: .45; cursor: not-allowed; }

/* The ⋯ menu: «گزارش مشکل» and the memory. */
.hn-sa-more { position: relative; flex: none; }
.hn-sa-menu {
    position: absolute; top: 46px; inset-inline-end: 0; z-index: 3;
    width: max-content; min-width: 210px; max-width: calc(100vw - 48px); padding: 6px; display: flex; flex-direction: column; gap: 2px;
    border: 1px solid color-mix(in oklab, var(--sv-menu), white 14%); border-radius: 14px;
    background: var(--sv-menu); box-shadow: 0 20px 52px rgb(0 0 0 / .45);
    transform-origin: top left;
    animation: hn-sa-menu-in 180ms var(--sa-ease);
}
.hn-sa-menu[hidden] { display: none; }
@keyframes hn-sa-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.hn-sa-menu__item {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; cursor: pointer;
    border: 0; border-radius: 10px; background: transparent; color: white;
    font: inherit; font-size: 14px; font-weight: 500; line-height: 1.6; text-align: start; white-space: nowrap;
    transition: background 120ms;
}
.hn-sa-menu__item[hidden] { display: none; }
.hn-sa-menu__item .hn-sa-ico { width: 18px; height: 18px; }
.hn-sa-menu__item:hover, .hn-sa-menu__item:focus-visible { background: rgb(255 255 255 / .12); outline: none; }
.hn-sa-menu__item:focus-visible { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .7); }
.hn-sa-menu__item[aria-busy=true] { opacity: .6; cursor: progress; }

/* ---------- «گزارش مشکل» and the memory, each in place of the conversation ---------- */
.hn-sa-report, .hn-sa-memview { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--sv-body); }
.hn-sa-report[hidden], .hn-sa-memview[hidden] { display: none; }
.hn-sa-report__title { margin: 0; font-size: 16px; font-weight: 800; 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(--sv-line-2); border-radius: 14px; background: var(--sv-field); 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(--sv-pri); box-shadow: 0 0 0 4px var(--sv-tint); }
.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(--sv-pri); outline-offset: 2px; }
.hn-sa-report__thumb { position: relative; margin: 0; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; border: 1px solid var(--sv-line); }
.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: 13px; 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: 44px; padding: 4px 16px; border-radius: 12px; }
.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,
.hn-sa-panel[data-view=memory] .hn-sa-log, .hn-sa-panel[data-view=memory] .hn-sa-compose { display: none; }
.hn-sa-mem__list {
    margin: 0; padding: 12px 14px; padding-inline-start: 30px; display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--sv-line); border-radius: 14px; background: var(--sv-card);
    font-size: 13px; line-height: 1.85; color: var(--sa-soft);
}
.hn-sa-mem__list[hidden] { display: none; }
.hn-sa-mem__empty { margin: 0; padding: 12px 14px; border: 1px dashed var(--sv-line-2); border-radius: 14px; font-size: 13px; line-height: 1.85; color: var(--sa-muted); }
.hn-sa-mem__forget[data-sure] { color: #FF5C68; border-color: currentColor; }

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

.hn-sa-hello { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.hn-sa-hello[hidden] { display: none; }
.hn-sa-hello__title { margin: 0; font-family: inherit; font-size: 20px; font-weight: 800; line-height: 1.6; color: var(--sa-text); text-wrap: balance; }
/* The owner set the lead at 10px on the board and left the rest to me: 13px keeps it a quiet second line and still readable. */
.hn-sa-hello__lead { margin: -12px 0 0; font-size: 13px; line-height: 1.9; color: var(--sa-soft); }
.hn-sa-suggest { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hn-sa-suggest li { display: flex; }
.hn-sa-suggest button {
    width: 100%; min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 12px; text-align: start; cursor: pointer;
    border: 1px solid var(--sv-line); border-radius: 16px; background: var(--sv-card); color: var(--sa-text);
    font: inherit; font-size: 12px; font-weight: 500; line-height: 1.8;
    transition: border-color 120ms, background 120ms, transform 120ms;
}
.hn-sa-suggest button:hover { border-color: color-mix(in oklab, var(--sv-pri) 45%, var(--sv-line)); background: var(--sv-card-hover); }
.hn-sa-suggest button:active { transform: scale(.98); }
.hn-sa-suggest button:focus-visible { outline: 2px solid var(--sv-pri); outline-offset: 2px; }
.hn-sa-suggest__ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--sv-tint); color: var(--sv-pri); }
.hn-sa-suggest__ico .hn-sa-ico { width: 17px; height: 17px; }
.hn-sa-suggest__text { overflow-wrap: anywhere; }
@media (max-width: 340px) { .hn-sa-suggest { grid-template-columns: minmax(0, 1fr); } .hn-sa-suggest button { min-height: 0; } }

/* «دستیار از تو چه یادش هست؟» */
.hn-sa-mem-chip {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; cursor: pointer;
    border: 1px dashed var(--sv-line-2); border-radius: 9999px; background: transparent; color: var(--sa-soft);
    font: inherit; font-size: 13px; line-height: 1.6;
    transition: border-color 120ms, color 120ms, background 120ms;
}
.hn-sa-mem-chip[hidden] { display: none; }
.hn-sa-mem-chip .hn-sa-ico { width: 16px; height: 16px; }
.hn-sa-mem-chip:hover { border-color: var(--sv-pri); color: var(--sa-text); background: var(--sv-tint-2); }
.hn-sa-mem-chip:focus-visible { outline: 2px solid var(--sv-pri); outline-offset: 2px; }
.hn-sa-mem-chip[aria-busy=true] { opacity: .6; cursor: progress; }

.hn-sa-msg { max-width: 100%; }
/* The question: a bubble in the brand colour, at the start side (the right), tail at the bottom. */
.hn-sa-msg--user {
    align-self: flex-start; max-width: 82%;
    padding: 10px 14px; border-radius: 18px 18px 6px 18px;
    background: var(--sv-pri); color: var(--sv-on); line-height: 1.9;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
/* The answer: plain text beside the assistant's mark. */
.hn-sa-msg--bot { align-self: stretch; display: flex; align-items: flex-start; gap: 10px; color: var(--sa-soft); }
.hn-sa-msg__mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--sv-tint); color: var(--sv-pri); }
.hn-sa-msg__mark .hn-sa-ico { width: 16px; height: 16px; }
.hn-sa-msg__body { flex: 1; min-width: 0; line-height: 1.95; }
.hn-sa-msg--bot .hn-sa-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hn-sa-msg--error { display: block; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--sv-line); background: var(--sv-card); }
.hn-sa-msg--error .hn-sa-text { color: var(--sa-text); }

.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: 3px;
    width: 24px; height: 24px; display: grid; place-items: center; border-radius: 9999px;
    background: var(--sv-tint); color: var(--sv-pri); 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: 8px; }

.hn-sa-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; cursor: pointer;
    border: 1px solid var(--sv-line-2); border-radius: 12px; background: var(--sv-card); 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, filter 120ms;
}
.hn-sa-chip .hn-sa-ico { width: 16px; height: 16px; }
.hn-sa-chip:hover { border-color: var(--sv-pri); background: var(--sv-tint-2); }
.hn-sa-chip:focus-visible { outline: 2px solid var(--sv-pri); outline-offset: 2px; }
.hn-sa-chip--go { background: var(--sv-pri); border-color: transparent; color: var(--sv-on); font-weight: 700; }
.hn-sa-chip--go:hover { background: var(--sv-pri); border-color: transparent; filter: brightness(1.08); }
.hn-sa-chip[aria-busy=true] { opacity: .6; cursor: progress; }
/* «برو به …» inside an answer: a quiet tinted link, not a second send button. */
.hn-sa-step .hn-sa-chip--go {
    min-height: 40px; padding: 0 14px;
    border: 1px solid color-mix(in oklab, var(--sv-pri) 40%, transparent); background: var(--sv-tint-2); color: var(--sv-link);
}
.hn-sa-step .hn-sa-chip--go:hover { background: var(--sv-tint); filter: none; }

.hn-sa-shots { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.hn-sa-shot { margin: 0; border: 1px solid var(--sv-line); border-radius: 14px; overflow: hidden; background: var(--sv-card); }
.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: 4px; margin-top: 8px; }
.hn-sa-foot .hn-sa-iconbtn { width: 36px; height: 36px; border-radius: 10px; }
.hn-sa-foot .hn-sa-iconbtn .hn-sa-ico { width: 17px; height: 17px; }
.hn-sa-foot .hn-sa-iconbtn[aria-pressed=true] { background: var(--sv-tint); color: var(--sv-pri); }
.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: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--sv-line); background: var(--sv-surface); }
.hn-sa-status { margin: 0 4px; 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); }
/* The «بوردر درخشان پایین» wrapper (beam.css) takes the field's 18px radius;
   the soft ring sits on it, because the beam clips everything inside. */
.hn-sa .hn-sa-beam[data-beam] {
    border-radius: 18px;
    box-shadow: 0 0 0 4px var(--sv-tint-2);
    transition: box-shadow 120ms;
}
.hn-sa .hn-sa-beam[data-beam]::after { border-radius: 17px; clip-path: inset(0 round 18px); }
.hn-sa .hn-sa-beam[data-beam]:focus-within { box-shadow: 0 0 0 4px var(--sv-tint); }
.hn-sa-field {
    display: flex; align-items: center; gap: 6px; padding: 6px;
    border: 1px solid var(--sv-line-2); border-radius: 18px; background: var(--sv-field);
    transition: border-color 120ms;
}
.hn-sa-field:focus-within { border-color: var(--sv-pri); }
.hn-sa-field textarea {
    flex: 1; min-width: 0; min-height: 44px; max-height: 132px; resize: none; overflow-y: hidden; scrollbar-width: thin;
    padding: 10px 10px 8px; border: 0; background: transparent; color: var(--sa-text);
    font: inherit; font-size: 14px; font-weight: 400; line-height: 1.8; outline: none; box-shadow: none;
}
.hn-sa-field textarea::placeholder { color: var(--sa-muted); opacity: 1; }
.hn-sa-field .hn-sa-iconbtn { width: 44px; height: 44px; border-radius: 14px; }
.hn-sa-send {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
    border: 0; border-radius: 14px; background: var(--sv-pri); color: var(--sv-on);
    transition: filter 120ms, opacity 120ms, transform 120ms;
}
.hn-sa-send .hn-sa-ico { stroke-width: 2.2; }
.hn-sa-send:hover { filter: brightness(1.08); }
.hn-sa-send:active { transform: scale(.95); }
.hn-sa-send:focus-visible { outline: 2px solid var(--sv-pri); 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: 0; font-size: 12px; line-height: 1.8; color: var(--sa-muted); text-align: center; }

/* ---------- "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-brain, .hn-sa-bubble { animation: none; }
    .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; }
}