/* Ethiuni chat dialog — drop-in styles for site-src/partials/chat.html
 * (Astra-integration, 2026-09-17). Ported from the starter's
 * app/public/chat.css + app/templates/chat.html DOM, re-tokenized onto the
 * new design-language custom properties. This file does NOT define those
 * properties -- it consumes them. The template that includes this
 * stylesheet (site-src, written in parallel) is the canonical source of:
 *
 *   --bg --bg2 --card --text --muted --faint --line --line-strong
 *   --btn --btn-text --gold --apricot --red --elev
 *
 * [data-theme="dark"] is the primary surface; light is secondary but the
 * same rules apply -- no dark-only literal colors below, only tokens.
 */

#chat-dialog, #chat-dialog *, #chat-dialog *::before, #chat-dialog *::after { box-sizing: border-box; } /* width:100% + padding-ը (sidebar, input, textarea) overflow էր տալիս 390-ում */
#chat-dialog [hidden] { display: none !important; } /* designer 09-18. .text-button/.button-ի display:inline-flex-ը UA-ի [hidden]-ը հաղթում էր — #chat-cancel-ը «Չեղարկել սպասումը» միշտ երևում էր */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Launcher ------------------------------------------------------- */

.chat-launch {
  position: fixed; right: 24px; bottom: 24px; z-index: 9;
  display: flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 9px 18px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--card); color: var(--text);
  box-shadow: 0 6px 28px oklch(0.2 0.02 60 / 0.14); font-size: 13px;
}
.chat-launch svg { width: 19px; height: 19px; }
.chat-launch:hover { background: var(--bg2); border-color: var(--line-strong); }

/* ---- Dialog shell ----------------------------------------------------- */

#chat-dialog {
  width: min(1060px, calc(100% - 48px)); max-width: 1060px;
  max-height: calc(100dvh - 48px); padding: 0;
  border: 1px solid var(--line); border-radius: 24px;
  background: var(--card); color: var(--text); overflow: hidden;
}
#chat-dialog::backdrop { background: oklch(0.14 0.02 60 / 0.55); backdrop-filter: blur(9px); }
#chat-dialog button:disabled { cursor: not-allowed; }

.chat-shell { display: flex; flex-direction: column; height: min(830px, calc(100dvh - 52px)); }

.chat-top {
  display: flex; align-items: center; gap: 13px; padding: 18px 24px;
  border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--card);
}
.chat-top .chat-mark { width: 44px; height: 44px; color: var(--gold); flex-shrink: 0; }
.chat-eti { object-fit: contain; border-radius: 50%; background: radial-gradient(circle, var(--bg2) 55%, transparent 72%); }
.chat-top h1, .chat-top h2 { font-size: 19px; line-height: 1.5; margin: 0; font-weight: 600; }
.chat-top p { font-size: 11px; color: var(--muted); margin: 2px 0 0; }
.chat-top .icon-button { margin-left: auto; flex-shrink: 0; }

/* ---- Layout: sidebar + workspace --------------------------------------- */

.chat-layout { display: flex; flex: 1; min-height: 0; }

.chat-sidebar {
  width: 242px; flex-shrink: 0; background: var(--bg2);
  border-right: 1px solid var(--line); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 13px; overflow: auto;
}
.chat-sidebar button { line-height: 1.65; font-size: 12px; }
.chat-sidebar svg { width: 20px; height: 20px; flex-shrink: 0; }
.chat-account-link { display: block; font-size: 11px; line-height: 1.8; color: var(--apricot); }
.chat-new {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--line); background: var(--card); border-radius: 12px;
  min-height: 44px; text-align: left; color: var(--text);
}
.chat-sidebar label { font-size: 11px; color: var(--muted); margin-top: 6px; }
.chat-sidebar select {
  min-height: 44px; width: 100%; max-width: 100%; padding: 8px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text); font-size: 12px;
}
.chat-sidebar-note { margin-block: auto; padding-block: 28px; }
.chat-sidebar-note h3 { font-size: 20px; line-height: 1.55; margin: 14px 0 0; }
.chat-sidebar-note p { font-size: 12px; line-height: 1.85; color: var(--muted); margin: 14px 0 0; }

/* Human decision point -- prepared-and-sent to the team is a handoff, not a
 * chat action, so it gets the accent that means "this leaves the AI loop". */
.chat-team-button {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px;
  border: 1px solid var(--red); border-radius: 14px;
  background: var(--red); color: #fff; text-align: left;
}
.chat-team-button:hover:not(:disabled) { filter: brightness(1.08); }
.chat-team-button:disabled { background: var(--line); border-color: var(--line); color: var(--muted); filter: none; }
/* --- Թիմին ուղարկելու երկրորդ կոճակ՝ composer-ից վերև (Վահան 09-20) --------
 * ≤1100px-ում ձախ սյունը drawer է (ethi.css:153) — կոճակը հասանելի էր, բայց
 * գտնվելի չէր։ Տեսանելիությունը կառավարում է chat.js-ը `hidden`-ով
 * (matchMedia '(min-width: 1101px)'), իսկ JS-ից ԱՌԱՋՎԱ վիճակը՝ ստորև երկու
 * media-կանոնը — և հենց դրանց հաշվին է composer-ի ցատկը 0 px (chat.js-ը
 * `defer` է)։ Մի՛ ջնջիր դրանք որպես «JS-անջատի քաղաքավարություն»։
 *
 * ՉԱՓՎԱԾ. HTML-ում ոչ մի կոճակ `hidden` ՉԷ, և դա ոճի հարց չէ. այս ֆայլի
 * 16-րդ տողը `#chat-dialog [hidden] { display: none !important }` է, ուստի
 * `hidden`-ը հետ բերող author-կանոն գոյություն ունենալ չի կարող — 390px-ում
 * կոճակը առանց JS-ի ԱՆՀԵՏԱՆՈՒՄ էր (զրո տեսանելի կոճակ)։ `hidden`-ը գրում է
 * ՄԻԱՅՆ chat.js-ը՝ երկուսից մեկին; նույն 16-րդ տողն էլ այն իրոք թաքցնում է։ */
.chat-handoff-inline { width: 100%; justify-content: center; min-height: 44px; margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; font-size: 12px; }
.chat-handoff-inline svg { width: 18px; height: 18px; }
@media (max-width: 1100px) { .chat-sidebar #chat-handoff { display: none; } }
@media (min-width: 1101px) { #chat-handoff-inline { display: none; } }

/* Հուշման տողը հոսքում (Վահան 09-20). համակարգային ձայն, ոչ Էթիի քարտ —
 * ուստի ոչ .chat-message-ի ֆոն, ոչ ավատար. մեկ նուրբ, կենտրոնացված տող։ */
.chat-hint {
  max-width: 820px; margin: 14px auto 2px; padding: 8px 12px;
  border-left: 2px solid var(--red); border-radius: 0 8px 8px 0; background: var(--bg2);
  font-size: 12px; line-height: 1.75; color: var(--muted);
}
.chat-hint:empty { display: none; }
.chat-sidebar-fine { font-size: 11px; line-height: 1.8; color: var(--muted); }

.chat-workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

.chat-notice {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 22px;
  background: var(--bg2); border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.chat-notice .icon-slot { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); }
.chat-notice p { font-size: 11px; line-height: 1.85; color: var(--muted); margin: 0; }
.chat-notice .text-button { min-height: 28px; font-size: 11px; text-decoration: underline; color: var(--apricot); }

/* ---- Conversation ------------------------------------------------------ */

.chat-conversation { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-scroll {
  padding: 24px 28px; overflow: auto; overscroll-behavior: contain;
  flex: 1; min-height: 65px; scrollbar-gutter: stable;
}

.chat-welcome { padding: 4px 0 24px; }
.chat-welcome-mark {
  display: inline-flex; width: 76px; height: 76px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg2); margin-bottom: 16px; color: var(--gold);
}
.chat-welcome-mark svg { width: 40px; height: 40px; }
.chat-welcome-mark .chat-eti { width: 76px; height: 76px; }
.chat-welcome h3 { font-size: 26px; line-height: 1.55; max-width: 470px; margin: 0; }
.chat-welcome > p { font-size: 14px; color: var(--muted); margin: 12px 0 0; max-width: 500px; }
.chat-prompts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
.chat-prompts button {
  min-height: 44px; padding: 9px 14px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 12px; text-align: left;
  font-size: 12px; line-height: 1.7; color: var(--text);
}
.chat-prompts button:hover { border-color: var(--line-strong); }

.chat-message { margin-bottom: 24px; max-width: 96%; overflow-wrap: anywhere; }
.chat-message[data-role="user"] {
  margin-left: auto; max-width: 90%; padding: 13px 18px;
  border-radius: 18px 18px 4px 18px; background: var(--bg2); border: 1px solid var(--line);
}
.chat-message[data-role="assistant"] { padding: 4px 0 4px 16px; border-left: 2px solid var(--gold); }
.chat-message strong { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 7px; }
/* Էթին խոսում է. ամեն պատասխանի «ով է խոսում» տողը կրում է նրա նշանը (Z2, 09-18) */
.chat-message[data-role="assistant"] strong::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: url("/assets/mult/eti.webp") center / contain no-repeat; }
.chat-message p { white-space: pre-wrap; font-size: 14px; line-height: 1.95; margin: 0; }
.chat-message small { display: block; font-size: 11px; color: var(--muted); margin-top: 8px; }

/* ---- Thinking/progress indicator (Vahan 09-18. Vordan karmir text, not a
 * spinner over a blank wait) -- --red-text is measured AA (5.3:1 on --card
 * dark, 6.7:1 light; see weave.css/site.css token comment), same token the
 * status-error line above already uses. */
.chat-progress { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; min-height: 27px; font-size: 13px; line-height: 1.6; color: var(--red-text); } /* designer 09-18. min-height = p-ի մեկ տող (14×1.95) — տեքստը հայտնվելիս article-ը չի ցատկում */
.chat-progress-dots { display: inline-block; letter-spacing: 2px; font-size: 10px; animation: chat-progress-blink 1.6s ease-in-out infinite; } /* ռիթմը դանդաղ ու փոքր — ներկայություն, ոչ ահազանգ */
@keyframes chat-progress-blink { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.3; } }
/* designer 09-18. սպասման ընթացքում երկու ազդանշան էր՝ article-ի կարմիր տողը ԵՎ composer-ի «Պահպանում ենք…» status-ը (նույն բանը երկու տեղ)։
 * Քանի դեռ ընթացքի տողն է երևում, ոչ-սխալ status-ը լռում է; սխալը (data-error) միշտ երևում է։ :has-ը չունեցող browser-ում երկուսն էլ մնում են — դեգրադացիա, ոչ կորուստ։
 * KARMIR item 6 (09-18-lock). display:none հանում էր #chat-status-ը access-tree-ից ամբողջությամբ, ուստի role=status-ը
 * դառնում էր ոչինչ browser-ների մեծ մասում. visually-hidden (.sr-only-ի նույն երեք-հատկանիշանոց տեխնիկան) տեսանելիությունը
 * հանում է, բայց access-tree-ում ու aria-live-ի announce-ի մեջ պահում։ */
.chat-conversation:has(.chat-progress:not([hidden])) .chat-status:not([data-error="true"]) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Suggested-answer chips (form fields offered alongside a reply) ---- */
.chat-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 12px 0 4px; }
.chat-chip-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.chat-chip {
  min-height: 44px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--text);
  font-size: 13px; line-height: 1.5; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, background-color 0.15s;
}
.chat-chip:hover:not(:disabled) { border-color: var(--line-strong); background: var(--card); }
.chat-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chat-chip.selected, .chat-chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.chat-chip:disabled { opacity: 0.5; cursor: not-allowed; }
/* designer 09-18. submit-chip-ը Որդան կարմիր էր — այդ գույնը ՄԻԱՅՆ «Հաստատել և փոխանցել թիմին»-ինն է (մարդու որոշման կետ)։
 * Chip-ի submit-ը composer-ի «Ուղարկել»-ի հարազատն է → նույն --btn/--btn-text զույգը */
.chat-chip-submit { background: var(--btn); border-color: var(--btn); color: var(--btn-text); }
.chat-chip-submit:hover:not(:disabled) { background: var(--btn); border-color: var(--btn); filter: brightness(1.05); }
.chat-chip-other { background: none; text-decoration: underline; color: var(--apricot); border-color: transparent; padding-inline: 4px; } /* align-self-ը .chat-chips-ի flex-start-ից է — նախկինում stretch-ից ամբողջ լայնությամբ էր ու տեքստը կենտրոնում */
.chat-chip-other:hover:not(:disabled) { background: none; border-color: transparent; color: var(--text); }
.chat-chip-input {
  flex: 1 1 180px; min-height: 44px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--text); font-size: 13px; font-family: inherit;
}
textarea.chat-chip-input { min-height: 70px; flex-basis: 100%; resize: vertical; }

.chat-bottom { padding: 12px 24px 18px; border-top: 1px solid var(--line); background: var(--card); flex-shrink: 0; }
.chat-status { font-size: 12px; line-height: 1.75; color: var(--muted); margin: 0 0 9px; }
.chat-status[data-error="true"] { color: var(--red-text); } /* designer 09-18. --red-ը մուգում 2.3:1 էր */
.chat-loading { animation: chat-pulse 1.5s ease-in-out infinite; }
@keyframes chat-pulse { 50% { opacity: 0.55; } }

.chat-composer {
  border: 1px solid var(--line-strong); border-radius: 17px; padding: 12px;
  background: var(--bg2); transition: border-color 0.2s;
}
.chat-composer:focus-within { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.chat-composer textarea {
  display: block; resize: vertical; width: 100%; min-height: 44px; max-height: 40vh;
  border: 0; background: transparent; padding: 2px; font-size: 14px; line-height: 1.75;
  color: var(--text); font-family: inherit;
}
/* T1 (09-18). field-sizing:content-ով textarea-ն ինքն է աճում idle-ից՝ առանց JS-ի;
 * @supports-ից դուրս (Firefox<128, Safari<18.4) resize:vertical + rows=2 (chat.html:91) մնում է fallback։ */
@supports (field-sizing: content) {
  .chat-composer textarea { field-sizing: content; resize: none; overflow-y: auto; }
}
.chat-composer textarea::placeholder { color: var(--faint); }
.chat-composer textarea:focus { outline: none; } /* focus-ը կրում է .chat-composer:focus-within-ի ոսկե եզրը, ոչ browser-ի կապույտը */
#chat-team-form input:focus-visible, #chat-team-form textarea:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.chat-compose-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.chat-compose-actions small { font-size: 10px; color: var(--muted); }
/* #7 (10-12). սահմանին հաշվիչը տեսանելի է; հեռախոսում մուտքի դաշտը չի ծածկում զրույցը (40vh → 25vh). */
.chat-compose-actions small.is-limit { color: var(--gold); font-weight: 600; }
@media (max-width: 600px) { .chat-composer textarea { max-height: 25vh; } }
.chat-compose-actions .button { min-height: 44px; font-size: 12px; padding: 8px 16px; gap: 14px; }
.chat-compose-actions svg { width: 18px; height: 18px; }

.chat-provider { font-size: 11px; line-height: 1.75; color: var(--muted); margin: 8px 0 0; }
.chat-provider:empty { display: none; }
/* G8/G9 (09-19). Tap target >=44px առանց տողի տեսողական բարձրացման. display:inline
 * (ՈՉ inline-block) vertical padding-ը մեծացնում է hit-area-ն, բայց ՉԻ մտնում line-box
 * հաշվարկի մեջ (ի տարբերություն inline-block-ի, որի padding+բացասական margin-ը
 * չափված փորձարկումով փաստացի մեծացնում էր պարբերության բարձրությունը՝ 390px լայնքում
 * 2.68 line-height, 2-ի փոխարեն. bad measurement, ուղղված inline-ով, playwright-ով
 * վերաչափված՝ 44px tap target + ≤2 line պարբերություն)։ */
.chat-provider-detail {
  display: inline; color: var(--gold); text-decoration: underline; text-underline-offset: 2px;
  padding: 15px 4px;
}
.chat-provider-detail:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- Handoff to the team (human decision point) ------------------------ */

.chat-team { overflow: auto; flex: 1; padding: 20px 28px 30px; overscroll-behavior: contain; }
.chat-team > .text-button { font-size: 12px; margin-bottom: 18px; gap: 10px; color: var(--apricot); }
.chat-team .text-button svg { width: 18px; height: 18px; }
.chat-team h3 { font-size: 23px; line-height: 1.6; margin: 0; }
.chat-draft-label { font-size: 12px; color: var(--muted); margin: 10px 0 22px; line-height: 1.85; }

#chat-team-form label { display: block; font-size: 12px; margin-bottom: 8px; color: var(--text); }
#chat-team-form input, #chat-team-form textarea {
  display: block; width: 100%; padding: 12px; border: 1px solid var(--line-strong);
  border-radius: 12px; background: var(--bg2); color: var(--text); font-size: 14px; line-height: 1.8;
}
#chat-team-form textarea { min-height: 190px; resize: vertical; max-height: 400px; }
.chat-contact-fields { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 20px; }

/* Human decision point -- confirming and sending to the team is red, the
 * same accent the sidebar handoff button carries. */
#chat-team-send {
  margin-top: 18px; min-height: 48px; font-size: 13px; gap: 14px; max-width: 100%;
  text-align: left; background: var(--red); color: #fff; border: 1px solid var(--red);
  border-radius: 14px; display: flex; align-items: center; padding: 12px 18px;
}
#chat-team-send:hover:not(:disabled) { filter: brightness(1.08); }
#chat-team-send:disabled { background: var(--line); border-color: var(--line); color: var(--muted); filter: none; }
#chat-team-send svg { width: 20px; height: 20px; flex-shrink: 0; }
#chat-team-error { font-size: 12px; line-height: 1.8; margin-top: 10px; color: var(--red-text); min-height: 1em; }

#chat-receipt { padding: 25px 0; }
.chat-receipt-mark {
  display: flex; width: 58px; height: 58px; padding: 15px; border-radius: 50%;
  background: var(--bg2); color: var(--gold); margin-bottom: 20px;
}
.chat-receipt-mark svg { width: 100%; height: 100%; }
#chat-receipt-id { font: 12px/1.8 ui-monospace, monospace; overflow-wrap: anywhere; margin-top: 18px; color: var(--text); }
#chat-receipt-notification { font-size: 13px; line-height: 1.9; color: var(--muted); margin-block: 16px; }
#chat-receipt .text-button { margin-top: 12px; font-size: 13px; color: var(--apricot); }
#chat-receipt h3 { margin: 0; color: var(--text); }

/* Shared button/icon-button primitives, scoped to the dialog so this file
 * stays drop-in without depending on the host stylesheet's own .button. */
#chat-dialog .button {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 12px;
  border: 1px solid var(--btn); background: var(--btn); color: var(--btn-text);
  padding: 10px 16px; font-size: 13px; cursor: pointer;
}
#chat-dialog .button:hover:not(:disabled) { filter: brightness(1.05); }
#chat-dialog .button:disabled { opacity: 0.55; cursor: not-allowed; }
#chat-dialog .text-button {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  color: var(--apricot); cursor: pointer; padding: 0;
}
#chat-dialog .icon-button {
  /* G13(գ) (Georgi, Vahan-approved 09-19). 36px < WCAG 2.5.8-ի 44px tap-target-ից */
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--text); cursor: pointer;
}
#chat-dialog .icon-button:hover { background: var(--bg2); }
#chat-dialog .icon-button svg { width: 18px; height: 18px; }
.field-error { color: var(--red-text); font-size: 12px; min-height: 1em; }

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 700px) {
  #chat-dialog { width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .chat-shell { height: 100dvh; }
  .chat-top { padding: 12px 16px; gap: 10px; }
  .chat-top h1, .chat-top h2 { font-size: 17px; }
  .chat-top p { font-size: 10px; } /* 11px-ում հայերեն subtitle-ը 390-ում երկու տող է դառնում (չափված 09-18); մեկ տողը առաջնային է */
  .chat-top .chat-mark { width: 32px; height: 32px; }
  .chat-layout { flex-direction: column; }
  .chat-sidebar {
    width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; /* minmax(0) — «Նոր զրույց» կոճակի min-content-ը սյունը չի լայնացնում 390-ում */
    padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible;
  }
  .chat-sidebar-note, .chat-sidebar-fine, .chat-sidebar > label { display: none; }
  .chat-sidebar select { grid-column: 2; grid-row: 1; font-size: 16px; min-width: 0; } /* designer 09-18 (T4). 11px-ը iOS-ում focus-ի zoom էր տալիս; select-ը դաշտ է, 16px-ը կանոնն է */
  .chat-new { grid-column: 1; grid-row: 1; font-size: 11px !important; padding: 7px 10px; }
  .chat-team-button { grid-column: 1 / -1; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 12px; justify-content: center; font-size: 12px !important; }
  .chat-notice { padding: 9px 16px; gap: 7px; }
  .chat-notice p, .chat-notice .text-button { font-size: 11px; }
  .chat-scroll { padding: 18px; min-height: 60px; }
  .chat-welcome-mark { width: 50px; height: 50px; margin-bottom: 10px; }
  .chat-welcome-mark svg { width: 26px; height: 26px; }
  .chat-welcome-mark .chat-eti { width: 50px; height: 50px; } /* առանց սրա 76px-ը 50px շրջանից դուրս էր թափվում */
  .chat-welcome h3 { font-size: 22px; }
  .chat-welcome > p { font-size: 13px; }
  .chat-prompts { margin-top: 16px; }
  .chat-prompts button { font-size: 11px; }
  .chat-message { max-width: 100%; }
  .chat-message p { font-size: 14px; }
  .chat-message[data-role="user"] { max-width: 94%; }
  .chat-bottom { padding: 10px 16px max(12px, env(safe-area-inset-bottom)); }
  .chat-composer textarea, #chat-team-form input, #chat-team-form textarea { font-size: 16px; } /* designer 09-18 (T4, webkit). iOS Safari-ն <16px դաշտի focus-ին էջը zoom է անում. 14px-ը 390-ում ստեղնաշարի հետ էջը մեծացնում էր */
  .chat-status, .chat-provider { font-size: 11px; }
  .chat-team { padding: 16px 18px 25px; }
  .chat-team h3 { font-size: 21px; }
  .chat-contact-fields { grid-template-columns: 1fr; gap: 12px; }
  .chat-launch { right: 14px; bottom: 14px; font-size: 12px; }
}

@media (max-height: 620px) {
  #chat-dialog { overflow: auto; }
  .chat-shell { height: auto; min-height: 100%; }
  .chat-top { position: sticky; top: 0; z-index: 3; }
  .chat-layout { min-height: 620px; }
  .chat-workspace { min-height: 580px; }
  .chat-scroll { max-height: 200px; min-height: 100px; }
  .chat-team { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-loading { animation: none; }
  .chat-composer { transition: none; }
  .chat-progress-dots { animation: none; }
  .chat-chip { transition: none; }
}