/* =====================================================================
   LARA — WORKSPACE  (app.html)
   The page a user lands on after the phone + OTP dialog.
   Same design system as the landing: stone/cream/white surfaces,
   green as the only chroma, hairline borders, r24, soft warm shadows.
   RTL: the rail sits on the RIGHT (inline-start).
   ===================================================================== */

html, body { height:100%; }
[hidden]{ display:none !important; }
body.ws-body{ background:var(--cream); overflow:hidden; font-size:16px; }

.ws{
  display:grid; grid-template-columns:288px 1fr;
  height:100dvh; width:100%;
}

/* ===================================================================
   1. RAIL
   =================================================================== */
.rail{
  position:relative; z-index:30;
  display:flex; flex-direction:column; min-height:0;
  background:var(--cream); border-inline-end:1px solid rgba(30,40,36,.07);
  padding:14px 12px;
}

.rail__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 6px 14px; }
.rail__brand{ display:inline-flex; align-items:center; gap:9px; }
.rail__mark{ width:26px; height:26px; color:var(--green-700); }
.rail__name{ font-size:19px; font-weight:700; font-variation-settings:"wght" 700; letter-spacing:normal; }
.iconbtn{
  width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center;
  color:var(--ink-3); transition:background .2s, color .2s;
}
.iconbtn:hover{ background:rgba(30,40,36,.055); color:var(--ink); }
.iconbtn svg{ width:19px; height:19px; }

.rail__new{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:46px; border-radius:var(--r-pill); background:var(--green-700); color:#F6FAF6;
  font-size:14.5px; font-weight:600;
  box-shadow:0 12px 26px -18px rgba(var(--green-rgb),.8), inset 0 1px 0 rgba(255,255,255,.14);
  transition:background .24s, transform .2s;
}
.rail__new:hover{ background:var(--green-900); transform:translateY(-1px); }
.rail__new svg{ width:17px; height:17px; }

.rail__search{
  display:flex; align-items:center; gap:8px; margin-top:12px; height:42px; padding-inline:12px;
  background:var(--paper); border:1px solid var(--line-2); border-radius:13px;
  transition:border-color .2s, box-shadow .2s;
}
.rail__search:focus-within{ border-color:var(--green-600); box-shadow:0 0 0 3px rgba(var(--green-rgb),.09); }
.rail__search svg{ width:17px; height:17px; color:var(--ink-4); flex:none; }
.rail__search input{ flex:1; min-width:0; border:none; background:none; outline:none; font-size:var(--t-input); color:var(--ink); }
.rail__search input::placeholder{ color:var(--ink-4); }

.rail__scroll{ flex:1; min-height:0; overflow-y:auto; margin-top:16px; padding-inline:2px; scrollbar-width:thin; }
.rail__scroll::-webkit-scrollbar{ width:6px; }
.rail__scroll::-webkit-scrollbar-thumb{ background:rgba(30,40,36,.13); border-radius:99px; }

.rail__cap{
  display:block; padding:0 10px 8px; font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-4);
}
.rail__group + .rail__group{ margin-top:20px; }

.rail__item{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:40px; padding:8px 10px; border-radius:11px;
  font-size:14px; font-weight:500; color:var(--ink-2); text-align:start;
  transition:background .18s, color .18s;
}
.rail__item svg{ width:18px; height:18px; flex:none; color:var(--ink-4); transition:color .18s; }
.rail__item span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail__item:hover{ background:rgba(30,40,36,.075); color:var(--ink); }
.rail__item:hover svg{ color:var(--green-700); }
.rail__item.is-active{ background:var(--green-tint); color:var(--green-800); font-weight:600; }
.rail__item.is-active svg{ color:var(--green-700); }
.rail__item--soon{cursor:default;color:var(--ink-4);background:transparent}
.rail__item--soon svg{color:var(--ink-4)}
.rail__item--soon:hover{background:transparent;color:var(--ink-4)}
.rail__item--soon:hover svg{color:var(--ink-4)}
.rail__item--soon span{white-space:nowrap}
.rail__soon{flex:none;border:1px solid var(--line-2);border-radius:999px;padding:2px 6px;font-size:10px;font-weight:600;white-space:nowrap;color:var(--ink-4);background:var(--paper)}

.rail__foot{ padding-top:12px; margin-top:8px; border-top:1px solid rgba(30,40,36,.07); }

.quota{
  padding:13px 14px; border-radius:16px; background:var(--paper);
  border:1px solid var(--line-2); box-shadow:var(--sh-xs);
}
.quota__row{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-3); }
.quota__row b{ color:var(--ink); font-weight:600; }
.quota__bar{ height:5px; margin:9px 0 11px; border-radius:99px; background:var(--line); overflow:hidden; }
.quota__bar i{ display:block; height:100%; width:var(--p,40%); border-radius:99px;
  background:linear-gradient(90deg, var(--green-600), var(--green-400)); }
.quota__cta{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:36px;
  border-radius:var(--r-pill); border:1px solid var(--green-line); background:var(--green-tint-2);
  font-size:13px; font-weight:600; color:var(--green-800); transition:background .2s;
}
.quota__cta:hover{ background:var(--green-tint); }
.quota__cta svg{ width:15px; height:15px; }

.me{ display:flex; align-items:center; gap:10px; width:100%; margin-top:10px; padding:8px 8px; border-radius:12px; transition:background .2s; }
.me:hover{ background:rgba(30,40,36,.05); }
.me__av{
  width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--green-800); color:#F6FAF6; font-size:13px; font-weight:700;
}
.me__tx{ flex:1; min-width:0; text-align:start; }
.me__tx b{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.me__tx span{ display:block; font-size:12px; color:var(--ink-4); direction:ltr; text-align:start;
  font-feature-settings:"tnum"; }
.me > svg{ width:16px; height:16px; color:var(--ink-4); flex:none; }

/* ===================================================================
   2. MAIN COLUMN
   =================================================================== */
.main{
  position:relative; display:flex; flex-direction:column; min-width:0; min-height:0;
  background:var(--stone);
  border-start-start-radius:0;
}

/* ---- the hero's light wall, carried into the workspace ----
   Full strength on the empty state (you are still in the same room);
   it recedes once a conversation starts so it never fights the answer. */
.ws__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  transition:opacity .7s var(--ease); }
.main.is-working .ws__bg{ opacity:.3; }

.ws__bars{ position:absolute; inset-inline:-6%; inset-block-end:0; height:72%;
  display:flex; align-items:flex-end; gap:clamp(8px,1.1vw,16px);
  filter:blur(15px);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.5) 0%, #000 12%, #000 44%, transparent 94%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.5) 0%, #000 12%, #000 44%, transparent 94%); }
.ws__bars i{ flex:1 1 0; height:var(--h);
  background:linear-gradient(to top,
    rgba(var(--wg-rgb), calc(var(--o) * 1.85)) 0%,
    rgba(var(--wg-warm-rgb), calc(var(--o) * 1.0)) 34%,
    rgba(var(--wg-warm-rgb), calc(var(--o) * .32)) 66%,
    rgba(var(--wg-warm-rgb), 0) 100%);
  border-radius:40px 40px 0 0; transform-origin:50% 100%;
  animation:wsBar 26s ease-in-out infinite alternate;
  animation-delay:calc(var(--o) * -18s); }
@keyframes wsBar{ from{ transform:scaleY(.985); } to{ transform:scaleY(1.015); } }

.ws__glow{ position:absolute; inset-block-end:-8%; inset-inline-start:50%;
  width:min(900px,88%); height:min(520px,54%); transform:translateX(50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(var(--wg-rgb),.28) 0%, rgba(var(--wg-warm-rgb),.14) 42%, rgba(var(--wg-rgb),0) 72%);
  filter:blur(12px); }
.ws__fade{ position:absolute; inset-inline:0; inset-block-end:0; height:76px;
  background:linear-gradient(to top, var(--stone) 10%, rgba(251,248,242,0) 100%); }

.top{
  position:relative; z-index:10; flex:none;
  display:flex; align-items:center; gap:10px;
  height:64px; padding-inline:clamp(14px,2vw,26px);
  border-block-end:1px solid transparent; transition:border-color .3s, background .3s;
}
.top.is-stuck{ background:rgba(251,248,242,.86); backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); border-block-end-color:rgba(30,40,36,.07); }
.top__burger{ display:none; }
/* the rail only closes when it is an overlay (≤860px) */
#railClose{ display:none; }
.top__title{ flex:1; min-width:0; font-size:15px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top__chip{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding-inline:12px;
  border-radius:var(--r-pill); background:var(--green-tint); border:1px solid var(--green-line);
  font-size:12.5px; font-weight:600; color:var(--green-800); flex:none;
}
.top__chip svg{ width:14px; height:14px; }

/* ---------- scroll area ---------- */
.stream{
  position:relative; z-index:2; flex:1; min-height:0; overflow-y:auto; scroll-behavior:smooth;
  padding-inline:clamp(14px,3vw,28px);
}
.stream::-webkit-scrollbar{ width:9px; }
.stream::-webkit-scrollbar-thumb{ background:rgba(30,40,36,.13); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
.wrap{ width:min(820px,100%); margin-inline:auto; }

/* ===================================================================
   3. EMPTY STATE
   =================================================================== */
.hello{ display:flex; flex-direction:column; justify-content:center; min-height:100%; padding-block:32px 20px; }
.hello__pill{
  align-self:center; display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:500; color:var(--ink-2);
  background:rgba(255,255,255,.7); border:1px solid rgba(30,40,36,.07);
  padding:6px 14px; border-radius:var(--r-pill); backdrop-filter:blur(8px);
}
.hello__dot{ width:6px; height:6px; border-radius:50%; background:var(--green-600); }
.hello__title{
  margin-top:16px; text-align:center; font-size:clamp(26px,4.2vw,38px); font-weight:800;
  font-variation-settings:"wght" 800; letter-spacing:normal; line-height:1.45; text-wrap:balance;
}
.hello__title em{ font-style:normal; color:var(--green-700); }
.hello__sub{ margin-top:10px; text-align:center; font-size:15.5px; color:var(--ink-3); line-height:1.85; text-wrap:balance; }

/* quick actions — four tools, equal weight */
.quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:26px; }
.quick__c{
  display:flex; flex-direction:column; gap:9px; padding:15px 14px 16px;
  background:var(--paper); border:1px solid rgba(30,40,36,.075); border-radius:18px;
  text-align:start; box-shadow:var(--sh-xs);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s;
}
.quick__c:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--green-line); }
.quick__ic{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:var(--green-tint-2); color:var(--green-700); border:1px solid var(--green-line); }
.quick__ic svg{ width:18px; height:18px; }
.quick__c > div{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.quick__c b{ font-size:14px; font-weight:600; color:var(--ink); }
.quick__c > div span{ font-size:12.5px; line-height:1.7; color:var(--ink-3); }
.quick__c--soon{cursor:default;background:var(--paper-warm);box-shadow:none;border-color:var(--line-2)}
.quick__c--soon:hover{transform:none;box-shadow:none;border-color:var(--line-2)}
.quick__c--soon .quick__ic{background:var(--paper);color:var(--ink-4);border-color:var(--line-2)}
.quick__c--soon b,.quick__c--soon > div span{color:var(--ink-4)}
.quick__soon{display:inline-block;vertical-align:middle;margin-inline-start:4px;border-radius:999px;padding:2px 6px;background:var(--paper);border:1px solid var(--line-2);font-size:10px;font-weight:600;white-space:nowrap;color:var(--ink-3)}

/* suggested questions */
.sugg{ margin-top:22px; }
.sugg__cap{ display:block; margin-bottom:10px; font-size:12.5px; font-weight:600; color:var(--ink-4); text-align:center; }
.sugg__row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.sugg__q{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.72); border:1px solid rgba(30,40,36,.07);
  font-size:13.5px; color:var(--ink-2); transition:background .2s, border-color .2s, color .2s;
}
.sugg__q:hover{ background:var(--paper); border-color:var(--green-line); color:var(--ink); }
.sugg__q svg{ width:14px; height:14px; color:var(--green-600); }

/* ===================================================================
   4. CONVERSATION
   =================================================================== */
.chat{ padding-block:22px 12px; display:flex; flex-direction:column; gap:28px; }

.msg{ display:flex; gap:12px; animation:msgIn .45s var(--ease) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* user turn — a compact card, aligned to the reading edge */
.msg--me{ justify-content:flex-start; }
.msg--me .msg__body{
  max-width:min(88%,640px); padding:13px 17px; border-radius:20px 6px 20px 20px;
  background:var(--green-800); color:#EDF3EE; font-size:15.5px; line-height:1.85;
  box-shadow:0 16px 34px -26px rgba(var(--green-rgb),.9);
}

/* lara turn */
.msg__av{
  width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--green-tint); border:1px solid var(--green-line); color:var(--green-700);
}
.msg__av svg{ width:17px; height:17px; }
.msg__body{ min-width:0; }
.msg--ai .msg__body{ flex:1; }
.msg__name{ display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--ink-4); }

.ans{ font-size:16px; line-height:2.05; color:var(--ink-2); }
.ans p + p{ margin-top:13px; }
.ans b, .ans strong{ color:var(--ink); font-weight:600; }
.ans ul{ margin-top:11px; display:flex; flex-direction:column; gap:9px; list-style:none; }
.ans li{ position:relative; padding-inline-start:20px; }
.ans li::before{
  content:""; position:absolute; inset-inline-start:5px; inset-block-start:14px;
  width:6px; height:6px; border-radius:50%; background:var(--green-400);
}

/* legal citation — the thing a lawyer actually checks */
.cite{
  display:inline-flex; align-items:center; gap:5px; margin-inline:2px; padding:2px 9px;
  border-radius:var(--r-pill); background:var(--green-tint-2); border:1px solid var(--green-line);
  font-size:13px; font-weight:600; color:var(--green-800); cursor:pointer; vertical-align:baseline;
  transition:background .18s, border-color .18s;
}
.cite:hover{ background:var(--green-tint); border-color:var(--green-600); }
.cite svg{ width:12px; height:12px; }

.sources{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.src{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:12px;
  background:var(--paper); border:1px solid var(--line-2); font-size:12.5px; color:var(--ink-2);
  box-shadow:var(--sh-xs); transition:border-color .2s, transform .2s;
}
.src:hover{ border-color:var(--green-line); transform:translateY(-1px); }
.src svg{ width:14px; height:14px; color:var(--green-600); }
.src b{ font-weight:600; color:var(--ink); }

.tools{ margin-top:14px; display:flex; align-items:center; gap:4px; opacity:0; transition:opacity .25s; }
.msg:hover .tools, .tools:focus-within{ opacity:1; }
.tools button{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--ink-4);
  transition:background .18s, color .18s;
}
.tools button:hover{ background:rgba(30,40,36,.06); color:var(--ink); }
.tools button.is-on{ color:var(--green-700); background:var(--green-tint); }
.tools svg{ width:16px; height:16px; }
.tools__sep{ width:1px; height:18px; background:var(--line-2); margin-inline:6px; }
.tools__note{ font-size:12px; color:var(--ink-4); }

/* thinking */
.think{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink-3); }
.think__o{ display:inline-flex; gap:4px; }
.think__o i{ width:6px; height:6px; border-radius:50%; background:var(--green-500); animation:thinkB 1.15s ease-in-out infinite; }
.think__o i:nth-child(2){ animation-delay:.16s; } .think__o i:nth-child(3){ animation-delay:.32s; }
@keyframes thinkB{ 0%,80%,100%{ transform:translateY(0); opacity:.4 } 40%{ transform:translateY(-5px); opacity:1 } }

/* caret while the answer streams in */
.ans.is-streaming::after{
  content:""; display:inline-block; width:2px; height:1.05em; margin-inline-start:3px;
  background:var(--green-600); vertical-align:-2px; animation:caret 1s steps(2) infinite;
}
@keyframes caret{ 50%{ opacity:0 } }

/* ===================================================================
   5. COMPOSER
   =================================================================== */
.comp{ position:relative; z-index:6; flex:none; padding:10px clamp(14px,3vw,28px) 16px; }
.hello .comp{ padding-inline:0; }          /* inside the empty state it is already centred */

.comp__box{
  position:relative; z-index:2;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(30,40,36,.075); border-radius:24px;
  box-shadow:var(--sh-md), 0 30px 64px -44px rgba(var(--wg-rgb),.55);
  transition:border-color .28s, box-shadow .28s, background .28s;
}
.comp__box:focus-within{
  border-color:rgba(var(--green-rgb),.45);
  box-shadow:var(--sh-md), 0 0 0 4px rgba(var(--green-rgb),.09), 0 30px 60px -40px rgba(var(--green-rgb),.5);
}
.comp__ta{
  display:block; width:100%; resize:none; border:none; outline:none; background:none;
  padding:16px 20px 4px; max-height:200px; overflow-y:auto;
  font-size:var(--t-input); line-height:1.9; color:var(--ink);
}
.comp__ta::placeholder{ color:var(--ink-4); }

.comp__bar{ display:flex; align-items:center; gap:6px; padding:8px 12px 10px; }
.chip{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding-inline:12px;
  border-radius:var(--r-pill); border:1px solid transparent;
  font-size:13px; font-weight:500; color:var(--ink-3);
  transition:background .2s, color .2s, border-color .2s;
}
.chip svg{ width:16px; height:16px; }
.chip:hover{ background:rgba(30,40,36,.05); color:var(--ink); }
.chip.is-on{ background:var(--green-tint); border-color:var(--green-line); color:var(--green-800); font-weight:600; }
.comp__spacer{ flex:1; }
.comp__count{ font-size:12px; color:var(--ink-4); font-feature-settings:"tnum"; }
.comp__send{
  width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--green-700); color:#F6FAF6;
  box-shadow:0 10px 22px -14px rgba(var(--green-rgb),.9);
  transition:background .22s, transform .2s, opacity .22s;
}
.comp__send svg{ width:19px; height:19px; }
.comp__send:hover:not([disabled]){ background:var(--green-900); transform:translateY(-1px); }
.comp__send[disabled]{ opacity:.35; cursor:not-allowed; box-shadow:none; }

.comp__note{ margin-top:9px; text-align:center; font-size:11.5px; line-height:1.8; color:var(--ink-4); }

/* ===================================================================
   6. SOURCE DRAWER
   =================================================================== */
.drw{
  position:fixed; inset-block:0; inset-inline-end:0; width:min(420px,92vw); z-index:200;
  background:var(--paper); border-inline-start:1px solid rgba(30,40,36,.08);
  box-shadow:-30px 0 70px -40px rgba(30,40,36,.3);
  transform:translateX(-100%); visibility:hidden; opacity:0;
  transition:transform .42s var(--ease), opacity .3s, visibility .3s;
  display:flex; flex-direction:column;
}
[dir="rtl"] .drw{ transform:translateX(-100%); }
.drw.is-open{ transform:none; visibility:visible; opacity:1; }
.drw__top{ flex:none; display:flex; align-items:center; gap:10px; padding:18px 20px;
  border-block-end:1px solid var(--line); }
.drw__top h3{ flex:1; font-size:16px; font-weight:700; font-variation-settings:"wght" 700; }
.drw__body{ flex:1; overflow-y:auto; padding:18px 20px 28px; display:flex; flex-direction:column; gap:14px; }
.law{ padding:15px 16px; border:1px solid var(--line-2); border-radius:16px; background:var(--paper-warm); }
.law b{ display:block; font-size:14px; font-weight:700; color:var(--green-800); margin-bottom:7px; }
.law p{ font-size:13.5px; line-height:2; color:var(--ink-2); }
.law span{ display:block; margin-top:9px; font-size:12px; color:var(--ink-4); }
.scrim{
  position:fixed; inset:0; z-index:190; background:rgba(24,35,31,.3);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.scrim.is-on{ opacity:1; visibility:visible; }

/* ===================================================================
   7. RESPONSIVE
   =================================================================== */
@media (max-width:1080px){
  .quick{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .ws{ grid-template-columns:1fr; }
  .rail{
    position:fixed; inset-block:0; inset-inline-start:0; width:290px; z-index:210;
    transform:translateX(100%); transition:transform .38s var(--ease);
    box-shadow:-24px 0 60px -40px rgba(30,40,36,.4);
  }
  .rail.is-open{ transform:none; }
  .top__burger{ display:grid; }
  #railClose{ display:grid; }
  .msg--me .msg__body{ max-width:92%; }
}
@media (max-width:560px){
  .quick{ grid-template-columns:1fr; }
  .quick__c{ flex-direction:row; align-items:center; gap:12px; }
  .quick__c > div{ min-width:0; }
  .comp__bar{ flex-wrap:wrap; }
  .chip span{ display:none; }
  .chip{ padding-inline:10px; }
  .hello__sub{ font-size:14.5px; }
}

@media (prefers-reduced-motion:reduce){
  .msg, .think__o i, .ans.is-streaming::after{ animation:none !important; }
  .stream{ scroll-behavior:auto; }
  .quick__c:hover, .src:hover{ transform:none; }
}

/* ===================================================================
   8. A11Y UTILITIES
   =================================================================== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{
  position:absolute; inset-block-start:-60px; inset-inline-start:16px; z-index:500;
  padding:10px 18px; border-radius:var(--r-pill);
  background:var(--green-700); color:#F6FAF6; font-size:14px; font-weight:600;
  transition:inset-block-start .22s var(--ease);
}
.skip:focus{ inset-block-start:16px; }
:focus-visible{ outline:2px solid var(--green-600); outline-offset:3px; border-radius:6px; }

/* ---------- live answers (server text) ---------- */
.ans h3{ margin:16px 0 4px; font-size:16px; font-weight:700; color:var(--green-800); }
.ans h3:first-child{ margin-top:0; }
.ans h4{ margin:12px 0 2px; font-size:15px; font-weight:700; color:var(--ink); }
.ans ol{ margin-top:11px; display:flex; flex-direction:column; gap:9px; padding-inline-start:22px; }
.ans ul + p, .ans ol + p, .ans p + ul, .ans p + ol{ margin-top:13px; }
/* feedback matters: the thumbs stay visible, not only on hover */
.tools{ opacity:.85; }
.law.is-hit{ animation:lawHit 1.8s ease-out; }
@keyframes lawHit{ 0%,30%{ border-color:var(--green-600); box-shadow:0 0 0 3px rgba(var(--green-rgb),.14); } 100%{ box-shadow:none; } }

/* clarifying questions before an answer */
.clar{ margin-top:16px; padding:16px; border:1px solid var(--line-2); border-radius:18px; background:var(--paper); display:flex; flex-direction:column; gap:14px; }
.clar > p{ font-size:14px; line-height:1.9; color:var(--ink-2); }
.clar__q b{ display:block; margin-bottom:8px; font-size:14px; font-weight:600; color:var(--ink); }
.clar__q > div{ display:flex; flex-wrap:wrap; gap:8px; }
.clar__o{ padding:8px 14px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--paper-warm); font-size:13px; color:var(--ink-2); }
.clar__o:hover{ border-color:var(--green-line); }
.clar__o.is-on{ border-color:var(--green-600); background:var(--green-tint); color:var(--green-800); font-weight:600; }
.clar__go{ align-self:flex-start; min-height:40px; padding:8px 20px; border-radius:var(--r-pill); background:var(--green-700); color:#fff; font-size:14px; font-weight:600; }
.clar__go:disabled{ opacity:.45; cursor:default; }

/* feedback pop-up */
.fb{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; background:rgba(19,31,27,.46); backdrop-filter:blur(6px); }
.fb__card{ position:relative; width:min(440px,100%); padding:34px 30px 28px; border-radius:26px; background:var(--paper); box-shadow:var(--sh-lg); text-align:center; }
.fb__x{ position:absolute; top:14px; inset-inline-start:14px; }
.fb__mark{ width:52px; height:52px; margin:0 auto 14px; display:grid; place-items:center; border-radius:16px; background:var(--green-tint); color:var(--green-700); }
.fb__mark svg{ width:22px; height:22px; }
.fb__card h2{ font-size:21px; font-weight:700; color:var(--ink); }
.fb__q{ margin-top:6px; font-size:14px; color:var(--ink-3); }
.fb__card form{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.fb__card textarea{ width:100%; min-height:120px; padding:12px 14px; border:1.5px solid var(--line-2); border-radius:16px; background:var(--paper-warm); font:inherit; font-size:16px; line-height:1.9; color:var(--ink); resize:vertical; outline:none; }
.fb__card textarea:focus{ border-color:var(--green-600); box-shadow:0 0 0 4px rgba(var(--green-rgb),.10); background:var(--paper); }
.fb__err{ font-size:13px; color:var(--coral-ink); }
.fb__send{ min-height:48px; border-radius:var(--r-pill); background:var(--green-700); color:#fff; font-size:15px; font-weight:600; box-shadow:var(--btn-sh); }
.fb__send:disabled{ opacity:.6; }