/* Էթիունի — ethiuni.ai հրապարակային կայք (նոր տուն, 2026-09-01).
 *
 * Մեկ էջ + Խոսել։ Բովանդակությունը՝ Նախագծեր/ԿԱՅՔ-ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ-v1.md
 * (կողպված), ձևը՝ հաստատված մակետից (artifact «Էթիունի կայք v1»)։
 * Մեկ թեմա՝ տաք կրեմ + մուգ բլոկներ — դիտավորյալ մեկ տեսք, ոչ երկթեմա։
 * Չաթ-կոմպոնենտի CSS-ը բերված է site/css/site.css-ից անփոփոխ (ֆայլի պոչում)։
 */

/* ---- Տոկեններ ---- */

:root {
  --paper: oklch(0.955 0.010 78);
  --paper-soft: oklch(0.938 0.013 82);
  --ink: oklch(0.198 0.013 62);
  --ink-2: oklch(0.245 0.008 62);
  --dark: oklch(0.225 0.014 62);
  --dark-deep: oklch(0.198 0.013 62);
  --cream-on-dark: oklch(0.938 0.013 82);
  --muted-on-dark: oklch(0.762 0.016 78);
  --muted: oklch(0.455 0.016 62);
  --faint: oklch(0.53 0.014 62);
  --rule: oklch(0.225 0.014 62 / 0.16);
  --rule-soft: oklch(0.225 0.014 62 / 0.09);
  --gold: #B08D63;
  --gold-deep: #8f7350;
  --gold-ink: #77603f;   /* ≥4.5:1 կրեմի վրա — հղում-տեքստի ոսկի (WCAG AA) */
  --gold-light: oklch(0.800 0.062 66);
  --accent: var(--gold-deep);
  --focus: oklch(0.475 0.065 62);
  --know: oklch(0.62 0.10 230);
  --prove: oklch(0.62 0.12 45);
  --be: oklch(0.62 0.10 140);
  --measure-prose: 42em;   /* ≈78ch հայերեն արձակի համար — հին կայքի չափված խարիսխը */
  --serif: 'Noto Serif Armenian', 'Noto Serif', serif;
  --sans: 'Noto Sans Armenian', 'Noto Sans', sans-serif;
}

/* ---- Հիմք ---- */

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--gold-ink); text-decoration: none; }
a:hover { color: var(--ink); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }
p { margin: 0; }

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

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wrap { max-width: 1248px; margin: 0 auto; padding: 0 32px; }

/* ---- Նշան (mark.svg՝ CSS-mask, հետևում է տեքստի գույնին) ---- */

.mark {
  display: block;
  background-color: currentColor;
  -webkit-mask: url("../assets/mark.svg") center / contain no-repeat;
  mask: url("../assets/mark.svg") center / contain no-repeat;
}
.mark--header { width: 38px; height: 38px; flex: none; }

/* ---- Վերնաշերտ ---- */

.site-header { padding: 24px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lockup { display: flex; align-items: center; gap: 13px; color: var(--ink); }
.wordmark { font-family: var(--serif); font-size: 22px; letter-spacing: 0.02em; }
.wordmark-suffix { font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em; color: var(--faint); }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.site-nav a { color: var(--ink); }
.site-nav a:hover { color: var(--gold-deep); }
.nav-cta {
  border: 1px solid var(--gold); padding: 10px 22px; border-radius: 2px;
}

/* ---- Hero ---- */

.hero { position: relative; overflow: hidden; padding: 88px 0 100px; }
.hero-ornament {
  position: absolute; right: -220px; top: -120px; width: 620px; height: 620px;
  color: var(--ink); opacity: 0.06; pointer-events: none;
}
.hero h1 {
  position: relative;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.5;
  font-weight: 400;
  max-width: 1140px;
}
.hero h1 .em { color: var(--gold-deep); font-weight: 500; }
.hero-lead {
  position: relative; font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 24px); line-height: 1.6;
  max-width: 900px; margin-top: 22px; color: var(--ink-2);
}
.hero-lead .em { color: var(--gold-deep); font-weight: 500; }
.hero-actions { position: relative; margin-top: 40px; }
.btn-primary {
  display: inline-block;
  background: var(--dark-deep); color: var(--paper);
  padding: 16px 34px; border-radius: 2px; font-size: 16px;
}
.btn-primary:hover { color: var(--paper); opacity: 0.88; }

/* ---- Էություն ---- */

.essence { background: var(--dark); color: var(--cream-on-dark); position: relative; overflow: hidden; padding: 96px 0; }
.essence-ornament {
  position: absolute; right: -170px; top: -280px; width: 640px; height: 640px;
  color: var(--gold-light); opacity: 0.10; pointer-events: none;
}
.essence .wrap { position: relative; }
.essence-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.essence h2 { font-size: 34px; }
.essence-gloss { font-size: 14px; font-style: italic; color: var(--muted-on-dark); opacity: 0.85; }
.essence-lead { font-size: 18px; line-height: 1.7; margin-top: 22px; max-width: var(--measure-prose); }
.essence-lead-in { font-size: 16px; color: var(--muted-on-dark); margin-top: 10px; }
.pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px;
  margin: 46px 0 0; padding: 0;
}
.pillar { border-left: 3px solid; padding-left: 20px; }
.pillar--know { border-color: var(--know); }
.pillar--prove { border-color: var(--prove); }
.pillar--be { border-color: var(--be); }
.pillar h3 { font-size: 21px; }
.pillar-en { font-size: 12px; color: var(--muted-on-dark); opacity: 0.8; letter-spacing: 0.08em; margin-top: 10px; }
.pillar p { font-size: 14.5px; line-height: 1.65; color: var(--muted-on-dark); margin-top: 10px; }
.essence-close { font-size: 15px; line-height: 1.7; color: var(--muted-on-dark); margin-top: 44px; max-width: var(--measure-prose); }

/* ---- Ծառայություններ ---- */

.services-intro { padding: 96px 0 36px; }
.services-intro h2 { font-size: 34px; }
.services-intro > .wrap > p { font-size: 16px; max-width: var(--measure-prose); color: var(--ink-2); margin-top: 16px; }
.core-head { margin-top: 26px; }
.core-head h3 { font-size: 24px; }
.core-head h3 .em { color: var(--gold-deep); }
.core-head p { font-size: 16px; max-width: var(--measure-prose); color: var(--ink-2); margin-top: 8px; }

/* ---- Լուծման ցիկլ ---- */

.cycle {
  background: oklch(0.938 0.013 82 / 0.35);
  border: 1px solid var(--rule-soft);
  padding: 46px 48px;
  margin-top: 36px;
  display: flex; flex-direction: column; gap: 26px;
}
.cycle-groups { display: flex; gap: 22px; align-items: stretch; }
.cycle-group { display: flex; flex-direction: column; gap: 12px; border-top: 3px solid; padding-top: 14px; }
.cycle-group--know { flex: 3; border-color: var(--know); }
.cycle-group--prove { flex: 2; border-color: var(--prove); }
.cycle-group--be { flex: 1; border-color: var(--be); }
.cycle-group-label { font-size: 12.5px; letter-spacing: 0.08em; color: var(--faint); }
.cycle-cards { display: grid; gap: 14px; flex: 1; }
.cycle-group--know .cycle-cards { grid-template-columns: repeat(3, 1fr); }
.cycle-group--prove .cycle-cards { grid-template-columns: repeat(2, 1fr); }
.cycle-group--be .cycle-cards { grid-template-columns: 1fr; }
.step {
  background: var(--paper);
  border: 1px solid oklch(0.225 0.014 62 / 0.12);
  border-radius: 3px;
  padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.step--open { background: oklch(0.800 0.062 66 / 0.16); border-color: var(--gold); }
.step-top { display: flex; justify-content: space-between; align-items: center; min-height: 20px; }
.step-num { font-size: 12px; color: var(--faint); letter-spacing: 0.1em; }
.step-chip {
  font-size: 10.5px; color: var(--gold-deep);
  border: 1px solid var(--gold); border-radius: 10px; padding: 2px 9px;
}
.step h4 { font-family: var(--serif); font-weight: 500; font-size: 17px; margin: 0; }
.step p { font-size: 13px; line-height: 1.55; color: var(--muted); }
.cycle-meta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cycle-loop { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.cycle-loop svg { flex: none; color: var(--gold-deep); }
.cycle-legend { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.cycle-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: baseline; }
.dot--you { background: var(--gold); }
.dot--human { background: var(--ink-2); }
.dot--ethiuni { background: transparent; border: 2px solid var(--muted); width: 6px; height: 6px; }
.cycle-note { font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 14px; max-width: var(--measure-prose); }
.cycle-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: oklch(0.800 0.062 66 / 0.14);
  border: 1px solid var(--gold); border-radius: 3px;
  padding: 16px 22px;
}
.cycle-cta p { font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: var(--measure-prose); }
.btn-dark {
  display: inline-block; background: var(--dark-deep); color: var(--paper);
  padding: 12px 24px; border-radius: 2px; font-size: 14.5px; white-space: nowrap;
}
.btn-dark:hover { color: var(--paper); opacity: 0.88; }

/* ---- Վեց դրսևորում ---- */

.manifestations { padding: 56px 0 40px; }
.manifestations h2 { font-size: 24px; }
.man-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;
  margin-top: 36px;
}
.man {
  border-top: 2px solid var(--gold); padding-top: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.man-num { font-size: 13px; color: var(--gold-deep); letter-spacing: 0.1em; }
.man h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.4; margin: 0; }
.man p { font-size: 15px; line-height: 1.65; color: var(--muted); }
.man-value { font-size: 14px; line-height: 1.6; color: var(--ink); }
.man-value .em { color: var(--gold-deep); }
.man a { font-size: 14px; margin-top: 4px; }

/* ---- Հիմք-տող ---- */

.foundation { padding: 8px 0 40px; }
.foundation p { font-size: 15px; line-height: 1.7; color: var(--muted); max-width: var(--measure-prose); }
.foundation .em { color: var(--gold-deep); }

/* ---- Դուռ ---- */

.door-block { padding-bottom: 96px; }
.door {
  background: var(--dark-deep);
  padding: 76px 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 60px;
  position: relative; overflow: hidden;
}
.door-ornament {
  position: absolute; right: -140px; bottom: -260px; width: 560px; height: 560px;
  color: var(--gold-light); opacity: 0.12; pointer-events: none;
}
.door-text { position: relative; display: flex; flex-direction: column; gap: 14px; max-width: 700px; }
.door h2 { font-size: 29px; color: var(--cream-on-dark); line-height: 1.45; }
.door p { font-size: 15.5px; line-height: 1.7; color: var(--muted-on-dark); }
.door .door-note { font-size: 13.5px; font-style: italic; color: var(--gold-light); opacity: 0.9; }
.btn-gold {
  position: relative;
  display: inline-block; background: var(--gold-light); color: var(--dark-deep);
  padding: 18px 38px; border-radius: 2px; font-size: 16px; white-space: nowrap;
}
.btn-gold:hover { color: var(--dark-deep); opacity: 0.88; }

/* ---- Ստորաշերտ ---- */

.site-footer { border-top: 1px solid var(--rule); padding: 34px 0; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--faint); }
.site-footer a { color: var(--faint); }
.site-footer a:hover { color: var(--gold-deep); }

/* ---- Խոսել էջ ---- */

.talk-main { min-height: 60vh; padding: 64px 0 120px; text-align: center; position: relative; overflow: hidden; }
.talk-ornament {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 860px; height: 860px; color: var(--ink); opacity: 0.05; pointer-events: none;
}
.talk-main .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.talk-mark { width: 72px; height: 72px; color: var(--ink); opacity: 0.85; }
.talk-main h1 { font-size: 30px; font-weight: 500; }
.talk-main .talk-lead { font-size: 15px; color: var(--muted); max-width: 520px; line-height: 1.65; }
.talk-hints { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.talk-hint {
  border: 1px solid var(--rule); border-radius: 20px;
  padding: 9px 18px; font-size: 13.5px; color: var(--muted);
}
.talk-privacy { font-size: 12.5px; color: var(--faint); margin-top: 10px; }
.talk-alt { font-size: 14px; color: var(--muted); margin-top: 22px; max-width: 520px; line-height: 1.6; }
.talk-alt a { text-decoration: underline; text-underline-offset: 0.16em; }

/* ---- Շարժում ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Նեղ էկրաններ ---- */

@media (max-width: 1151px) {
  /* Ցիկլի սյուն-անցումը 1023-ից բարձրացված. 1024-1150 գոտում (iPad landscape)
     3-սյուն know-քարտերը ջարդվում էին։ */
  .cycle-groups { flex-direction: column; }
  .cycle-group--know .cycle-cards,
  .cycle-group--prove .cycle-cards { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 1151px) {
  /* Միջանկյալ 2-սյուն աստիճան — 768px-ում 6 քարտ իրար տակ scroll-պատ չդառնա։ */
  .cycle-group--know .cycle-cards,
  .cycle-group--prove .cycle-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .pillars { grid-template-columns: 1fr; gap: 34px; }
  .door { flex-direction: column; align-items: flex-start; padding: 52px 36px; }
}

@media (max-width: 719px) {
  .wrap { padding: 0 20px; }
  .hero { padding: 56px 0 64px; }
  .hero h1 { font-size: 26px; line-height: 1.5; }
  .hero-lead { font-size: 17px; }
  .site-nav { gap: 18px; font-size: 14px; }
  /* anchor-ները թաքցվում են ՄԻԱՅՆ nav-cta ունեցող nav-ում (index) —
     talk-էջի nav-ը միայն anchor-ներ ունի, դատարկ չմնա։ */
  .site-nav:has(.nav-cta) .nav-anchor { display: none; }
  .man-grid { grid-template-columns: 1fr; }
  .door { padding: 44px 24px; }
  .btn-gold { white-space: normal; text-align: center; }
  .essence { padding: 64px 0; }
  .cycle { padding: 28px 20px; }
  .cycle-cta { flex-direction: column; align-items: flex-start; }
  .services-intro { padding: 64px 0 28px; }
}

/* =============================================================
 * Չաթ-կոմպոնենտ — բերված site/css/site.css:614-1007,1154-1237-ից անփոփոխ
 * (chat.js-ի UI-ն; տոկենները վերևում սահմանված են)
 * ============================================================= */

/* ---- Chat mount ---- */

#ethiuni-chat {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 12px 18px;
  pointer-events: none;
}

@keyframes chatRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes chatFade { from { opacity: 0; } to { opacity: 0.72; } }
@keyframes chatPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } }

/* Several chat elements are toggled via the `hidden` IDL attribute AND carry their own
 * author `display` declaration (flex/grid) below. Author-origin rules always beat the
 * user-agent stylesheet's `[hidden] { display: none }`, regardless of selector specificity
 * — so without this, `.hidden = true` would silently do nothing on any of them. Scope the
 * override to the chat mount only. */
#ethiuni-chat [hidden] { display: none !important; }

/* ---- Pill (state A — closed) ---- */

.chat-pill {
  width: min(720px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-family: var(--sans);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  animation: chatRise 0.3s ease both;
}
.chat-pill:hover { border-color: var(--accent); color: var(--ink); }
.chat-pill--disabled, .chat-pill--disabled:hover { cursor: default; border-color: var(--rule); color: var(--muted); }
.chat-pill-mark { width: 20px; height: 20px; flex: none; color: var(--accent); opacity: 0.85; }
.chat-pill-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pill-arrow { font-size: 15px; color: var(--faint); }
.chat-pill--disabled .chat-pill-arrow { display: none; }

/* ---- Backdrop ---- */

.chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  opacity: 0.72;
  backdrop-filter: blur(7px) saturate(0.9);
  -webkit-backdrop-filter: blur(7px) saturate(0.9);
  animation: chatFade 0.25s ease both;
  pointer-events: auto;
}

/* ---- Panel (state B — open) ---- */

.chat-panel {
  width: min(720px, 100%);
  max-height: min(76vh, 660px);
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatRise 0.28s ease both;
  pointer-events: auto;
  font-family: var(--sans);
  color: var(--ink);
}
.chat-panel--large { width: min(1080px, 100%); max-height: min(88vh, 940px); }

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.chat-header-mark { width: 22px; height: 22px; flex: none; color: var(--accent); opacity: 0.8; }
.chat-header-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.chat-title { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.2; }
.chat-subtitle { margin: 0; font-size: 11.5px; letter-spacing: 0.04em; color: var(--faint); }

.chat-btn {
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.chat-btn:hover { color: var(--accent); border-color: var(--accent); }
.chat-btn--icon { min-width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.chat-btn--reset { padding: 5px 11px; font-size: 11.5px; letter-spacing: 0.04em; }
.chat-btn--close { min-width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-color: transparent; font-size: 16px; }

/* ---- Transcript ---- */

.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
}

/* This element is the transcript live region (role="log", chat.js) — it must be a real box
 * in the accessibility tree, and `display: contents` is not dependably exposed there. The
 * flex column reproduces exactly the 18 px rhythm .chat-scroll's own gap used to give the
 * individual messages when they were its direct children. */
.chat-messages { display: flex; flex-direction: column; gap: 18px; }

.chat-msg { display: grid; gap: 6px; max-width: 74ch; }
.chat-msg--notice { max-width: 62ch; }
.chat-msg-role { margin: 0; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.chat-msg-text {
  margin: 0;
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.62;
  white-space: pre-wrap;
  text-wrap: pretty;
  color: var(--ink);
}

.chat-thinking { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); animation: chatPulse 1.4s ease-in-out infinite; }

.chat-error { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--accent); text-wrap: pretty; }
/* The budget window being exhausted is a normal operating condition, not a fault — it uses
 * the same slot but not the alert colour. */
.chat-error--calm { color: var(--muted); }

/* Client-authored state line inside the transcript — a truncated, refused, or empty reply
 * (chat.js appendNotice). Deliberately quieter than a message and distinct from one. */
.chat-notice {
  margin: 0;
  padding-left: 12px;
  border-left: 1px solid var(--accent);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---- Shared chat fields / chips ---- */

.chat-field {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 14px;
  min-height: 44px;
  padding: 10px 13px;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
}
.chat-field:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chat-field::placeholder { color: var(--muted); opacity: 1; }

.chat-field-label { display: grid; gap: 6px; }
.chat-field-label > span { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.chat-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-chip {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 2px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.chat-chip:hover { border-color: var(--accent); }
.chat-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.chat-chip--form { min-height: 44px; padding: 10px 14px; }

/* ---- Gate (intake card) ---- */

.chat-gate { display: grid; gap: 14px; max-width: 68ch; }
.chat-gate-title { margin: 0; font-family: var(--serif); font-size: 17.5px; line-height: 1.45; text-wrap: pretty; }
.chat-gate-body { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.chat-gate-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.chat-gate-error { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--accent); }

.chat-gate-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 16px 15px;
  border-top: 1px solid var(--rule-soft);
}
.chat-start-btn {
  min-height: 44px;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.03em;
  cursor: pointer;
  flex: none;
}
.chat-start-btn:hover { background: var(--accent); border-color: var(--accent); }
.chat-gate-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--faint); flex: 1; min-width: 18ch; }
.chat-gate-note-link { text-decoration: underline; text-underline-offset: 0.16em; }

/* ---- In-conversation form ---- */

.chat-form { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--rule); border-radius: 20px; max-width: 62ch; }
.chat-form-title { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.4; }
.chat-form-actions { display: flex; gap: 10px; align-items: center; }
.chat-form-send {
  min-height: 44px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.chat-form-send:hover { background: var(--accent); border-color: var(--accent); }
.chat-form-skip {
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.chat-form-skip:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Closing card ---- */

.chat-done { display: grid; gap: 10px; padding: 20px 22px; border-left: 1px solid var(--accent); border-radius: 0 20px 20px 0; max-width: 62ch; }
.chat-done-thanks { margin: 0; font-family: var(--serif); font-size: 17.5px; line-height: 1.5; text-wrap: pretty; }
.chat-done-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.chat-done-disclosure { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.chat-done-contact { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); }

/* ---- Composer ---- */

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--rule-soft);
}

/* Auto-growing textarea via the CSS-only "grid + mirrored ::after" technique — avoids
 * setting inline `style.height` from JS, which a hash-only CSP with no style-src escape
 * hatch would otherwise make indistinguishable from a blocked inline style attribute. */
.chat-grow-wrap {
  flex: 1;
  display: grid;
  max-height: 140px;
  overflow-y: auto;
}
.chat-grow-wrap::after {
  content: attr(data-value) " ";
  visibility: hidden;
  white-space: pre-wrap;
  grid-area: 1 / 1 / 2 / 2;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.4;
  padding: 8px 2px;
}
.chat-grow-wrap textarea.chat-field {
  grid-area: 1 / 1 / 2 / 2;
  resize: none;
  overflow: hidden;
  border-color: transparent;
  padding: 8px 2px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.4;
}

.chat-send-btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 50%;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.chat-send-btn:hover { background: var(--accent); border-color: var(--accent); }
.chat-send-btn:disabled, .chat-grow-wrap textarea:disabled { opacity: 0.5; cursor: default; }

/* ---- Focus ring inside the chat widget ---- */

/* A selected chip is already painted in --accent; the page-wide --focus ring is the same
 * hue, so on that one state the ring would merge into the fill. --ink is the only token
 * that separates from it in both themes. */
.chat-chip[aria-pressed="true"]:focus-visible { outline-color: var(--ink); }

/* ---- Narrow viewport (phone) ----
 * The sheet's only other query is min-width:900px, which governs the header chips alone.
 * At 390 px the header's own content (lockup + language pair + theme toggle) measures out
 * wider than the viewport at the base padding and gaps, so the lockup and the language
 * labels get squeezed into wrapping. These are the smallest reductions that fit it. */
@media (max-width: 599px) {
  .site-header { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .wordmark-name { font-size: 19px; }
  .site-nav { gap: 0; font-size: 12px; }
  .chat-scroll { padding: 18px 14px; }
  /* The enlarge/shrink control is meaningless where the panel is already full width, and
   * dropping it is what buys the 44 px close button its room in the panel header. */
  .chat-btn--icon { display: none; }
}

/* ---- Discovery: «Ձեր ելակետի պատկերը» (ԶՐՈՒՅՑ, 08-31) ----
 * 5 շերտ; visitor-շերտերը՝ խարսխված պնդման հոծ ոսկե գիծը, ethiuni-նշույթը՝
 * մանր ու մարած — հեղինակությունը երբեք չի շփոթվում։ */
.chat-picture { margin: 14px 0; padding: 14px 14px 14px 16px; border-left: 2px solid var(--accent); }
.chat-picture-title { margin: 0 0 10px; font-weight: 600; color: var(--ink); }
.chat-picture-layer { margin: 0 0 10px; }
.chat-picture-label { margin: 0; font-family: 'Noto Sans', sans-serif; font-size: 12.5px; letter-spacing: .04em; color: var(--muted); }
.chat-picture-author { color: var(--faint); font-size: 11.5px; }
.chat-picture-text { margin: 2px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink); }

/* Discovery-պատկերի պատճենել-կոճակը — chip-ի ձևով, քարտի ներսում */
.chat-picture-copy { margin-top: .6rem; align-self: flex-start; }

/* ---- Legal (Գաղտնիության ծանուցում) — բերված հին sheet-ից, նոր տոկեններով ---- */

.legal-wrap { max-width: 820px; padding-top: 40px; padding-bottom: 80px; }
.eyebrow { font-size: 12.5px; letter-spacing: 0.1em; color: var(--gold-deep); margin: 0 0 8px; }
.legal-title { margin: 0 0 10px; font-weight: 500; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.15; }
.legal-updated { margin: 0 0 clamp(36px, 6vh, 56px); font-size: 13px; letter-spacing: 0.05em; color: var(--faint); }
.legal-section { padding: clamp(26px, 4.2vh, 40px) 0; border-top: 1px solid var(--rule-soft); }
.legal-section:first-of-type { border-top: none; padding-top: 0; }
.legal-heading { margin: 0 0 10px; font-family: var(--sans); font-weight: 500; font-size: clamp(17px, 1.7vw, 19px); line-height: 1.35; }
.legal-text { margin: 0 0 12px; font-size: 16.5px; line-height: 1.66; color: var(--muted); text-wrap: pretty; }
.legal-text:last-child { margin-bottom: 0; }
.legal-flag { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--faint); font-style: italic; }

/* ---- Կոճակ-ձևի ուղղումներ (button-տարրերի համար) ---- */

button.btn-primary, button.btn-dark { border: 0; cursor: pointer; font-family: inherit; }
.talk-dir {
  font-size: 13.5px; color: var(--gold-deep);
  border: 1px solid var(--gold); border-radius: 20px;
  padding: 8px 18px; margin: 0;
}


/* ---- Ալիք 1 բարելավումներ (2026-09-02, ԲԱՐԵԼԱՎՈՒՄՆԵՐ.md) ---- */

/* Արձակի գեղեցիկ փաթաթում — progressive enhancement */
.hero h1, .essence-lead, .essence-close, .pillar p, .man p, .door p { text-wrap: pretty; }

/* Հղումը հոսող տեքստում տարբերվում է ոչ միայն գույնով (WCAG 1.4.1) */
.legal-text a, .site-footer a, .talk-privacy a {
  text-decoration: underline; text-underline-offset: 0.16em;
}

/* Նշանի շնչառությունը — մեկ շունչ ժամանման պահին, ապա հանգիստ (ԴԻԶԱՅՆ-ԼԵԶՈՒ §1)։
   4.5s < 5s — SC 2.2.2-ի շրջանակից դուրս (հին sheet-ի չափված a11y-հիմնավորումը);
   ձևը չի շարժվում — միայն լույսը։ Rest = տարրի սեփական opacity։ */
@keyframes mark-breath-strong {
  0% { opacity: 0.10; } 50% { opacity: 0.95; } 100% { opacity: 0.85; }
}
@keyframes mark-breath-soft {
  0% { opacity: 0.02; } 50% { opacity: 0.19; } 100% { opacity: 0.12; }
}
.talk-mark { animation: mark-breath-strong 4.5s ease-in-out 1; }
.door-ornament { animation: mark-breath-soft 4.5s ease-in-out 1; }

/* Չկոտրվող երկար token-ը (URL, email) պանելից դուրս չգա 360px-ում */
.chat-msg-text, .chat-notice, .chat-picture-text, .chat-gate-body { overflow-wrap: anywhere; }

/* Ելակետի պատկերի պիտակները հայերեն են — sans-stack-ը հայկական family-ով */
.chat-picture-label { font-family: var(--sans); }

/* Talk/404 կենտրոն-ֆոնը՝ օղակ, ոչ լրիվ նշան — նշանը ինքնություն է, ոչ պաստառ
   (ԴԻԶԱՅՆ-ԼԵԶՈՒ «չշփոթել» աղյուսակ)։ */
.talk-ornament {
  -webkit-mask-image: url("../assets/ring.svg");
  mask-image: url("../assets/ring.svg");
}

/* Բջջային dynamic viewport + iOS safe-area */
.chat-panel { max-height: min(76dvh, 660px); }
.chat-panel--large { max-height: min(88dvh, 940px); }
#ethiuni-chat { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

/* ---- Բազմընտրանք ձև (09-02, դիզայն՝ artifact b4089ef7) ----
   Տող-ցանկ չեկ-քառակուսիով; ընտրածը՝ ձևով + ոսկե լվացքով, ոչ միայն գույնով։ */
.chat-opt-counter { font-size: 12.5px; color: var(--faint); justify-self: end; }
.chat-opt-counter--on { color: var(--gold-deep); }
.chat-opt-list { display: flex; flex-direction: column; gap: 8px; }
.chat-opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  min-height: 48px; padding: 12px 14px; width: 100%;
  border: 1px solid var(--rule); border-radius: 12px; background: transparent;
  color: var(--ink); font: inherit; font-size: 14px; line-height: 1.5; cursor: pointer;
}
.chat-opt:hover { border-color: var(--gold); }
.chat-opt-box {
  flex: none; width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--faint); position: relative;
}
.chat-opt[aria-pressed="true"] { border-color: var(--gold); background: oklch(0.800 0.062 66 / 0.16); }
.chat-opt[aria-pressed="true"] .chat-opt-box { border-color: var(--gold-deep); background: var(--gold-deep); }
.chat-opt[aria-pressed="true"] .chat-opt-box::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px;
  border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.chat-opt-text { flex: 1; }

/* ---- Զրույց-կամուրջ (09-02). վերադարձ-քարտը gate-ի ձևով ---- */
.chat-resume { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--gold); border-radius: 20px; background: oklch(0.800 0.062 66 / 0.10); max-width: 62ch; }
.chat-resume-title { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.4; }
.chat-resume-body { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ---- Discovery→intake կամուրջի համաձայնություն (09-02) ---- */
.chat-link-consent { display: grid; gap: 12px; }
.chat-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--muted); cursor: pointer; }
.chat-consent-box { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--gold-deep); flex: none; }
.chat-link-go { display: inline-flex; align-items: center; justify-self: start; text-decoration: none; }
/* Պանելը գլխավոր էջում. pill-ը footer-ը չծածկի */
body:has(#ethiuni-chat) { padding-bottom: 104px; }