/* ═══════════════════════════════════════════════════════════
   REDESIGN — Chat + Ask
   Ported from design_handoff_namtar_pages/redesign/app.css
   Token mapping applied: --bg2/--panel/--panel2 -> --surface/--surface-2,
   --ink -> --text, --ink-dim -> --text-dim, --faint -> --muted-deep,
   --crimson -> --error, --crimson-dim -> --error-dim.
   Tokens NOT redefined here — they already exist in style.css :root.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   CHAT  — messenger layout
   ═══════════════════════════════════════════════════════════ */
.chat-layout{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - var(--ahead-h, 70px));overflow:hidden;}

/* — sessions sidebar — */
.chat-aside{border-right:1px solid var(--line-soft);background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden;}
.chat-aside .ah{padding:26px 26px 18px;border-bottom:1px solid var(--line-soft);}
.chat-aside .ah .lat{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);}
.chat-aside .ah h2{font-family:var(--serif);font-weight:500;font-size:30px;margin-top:8px;display:flex;align-items:baseline;gap:10px;}
.chat-aside .ah h2 .n{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em;}
.chat-aside .newbtn{margin-top:16px;width:100%;justify-content:center;
  border:1px dashed var(--line);color:var(--gold-bright);background:transparent;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:11px;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:8px;}
.chat-aside .newbtn:hover{border-color:var(--gold);background:rgba(212,178,90,.06);}
.sess-list{flex:1;overflow-y:auto;padding:12px;}
.sess{display:block;width:100%;text-align:left;padding:16px 16px;border:1px solid transparent;border-bottom:1px solid var(--line-soft);
  cursor:pointer;transition:.2s;background:transparent;}
.sess:hover{background:var(--surface-2);}
.sess.on{background:var(--surface-2);border-color:var(--line-soft);border-left:2px solid var(--gold);}
.sess .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;gap:10px;}
.sess .date{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);}
.sess .cnt{font-family:var(--mono);font-size:10px;color:var(--gold-deep);white-space:nowrap;}
.sess .q{font-size:14px;color:var(--text-dim);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sess.on .q{color:var(--text);}
.sess-empty{padding:24px 16px;font-size:13px;color:var(--muted-deep);text-align:center;}

/* — main column — */
.chat-main{display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:0;}
.chat-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 32px;border-bottom:1px solid var(--line-soft);background:rgba(10,9,12,.6);flex:none;}
.chat-bar .sess-pill{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.1em;color:var(--text-dim);}
.chat-bar .sess-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px var(--gold);animation:pulseSoft 2.4s ease-in-out infinite;flex:none;}
.chat-bar .mode{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line);padding:6px 13px;white-space:nowrap;}
@keyframes pulseSoft{0%,100%{opacity:1}50%{opacity:.35}}

.chat-histbtn{display:none;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--line-soft);
  padding:7px 13px;cursor:pointer;background:transparent;flex:none;}
.chat-histbtn:hover{border-color:var(--line);color:var(--champ);}

.feed{flex:1;overflow-y:auto;padding:36px 32px 24px;}
.feed-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:24px;}
.daysep{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted-deep);margin:8px 0;position:relative;}
.daysep::before,.daysep::after{content:"";position:absolute;top:50%;width:32%;height:1px;background:var(--line-soft);}
.daysep::before{left:0;} .daysep::after{right:0;}

.feed .msg{display:flex;flex-direction:column;max-width:78%;}
.feed .msg.user{align-self:flex-end;align-items:flex-end;}
.feed .msg.namtar{align-self:flex-start;align-items:flex-start;}
.feed .msg .head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.feed .msg .head .nm{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.feed .msg .head .tm{font-family:var(--mono);font-size:10px;color:var(--muted-deep);}
.feed .bubble{padding:16px 20px;font-size:15px;line-height:1.65;}
.feed .msg.user .bubble{background:linear-gradient(150deg,var(--gold-bright),var(--gold-deep));
  color:#1a1407;font-weight:450;}
.feed .msg.namtar .bubble{background:var(--surface);border:1px solid var(--line-soft);
  border-left:2px solid var(--gold);color:var(--text);}
.feed .msg.namtar .bubble p{margin-bottom:11px;} .feed .msg.namtar .bubble p:last-child{margin-bottom:0;}
.feed .msg.namtar .bubble em{color:var(--champ);font-style:italic;}
.feed .msg-system{align-self:center;font-family:var(--mono);font-size:11.5px;color:var(--error);
  border:1px solid var(--error-dim);background:rgba(192,70,61,.07);padding:10px 16px;max-width:90%;text-align:center;}

/* "typing" */
.typing{display:inline-flex;gap:5px;align-items:center;padding:18px 22px;background:var(--surface);
  border:1px solid var(--line-soft);border-left:2px solid var(--gold);}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--gold-deep);animation:dot 1.2s ease-in-out infinite;}
.typing i:nth-child(2){animation-delay:.18s;} .typing i:nth-child(3){animation-delay:.36s;}
@keyframes dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* — composer — */
.composer{flex:none;border-top:1px solid var(--line-soft);background:var(--surface);padding:18px 32px 22px;}
.composer-inner{max-width:760px;margin:0 auto;}
.billing{display:flex;align-items:center;gap:12px;margin-bottom:13px;font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;color:var(--muted);flex-wrap:wrap;}
.billing b{color:var(--champ);font-weight:500;}
.billing .bar{flex:1;max-width:160px;height:3px;background:var(--line-soft);overflow:hidden;}
.billing .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));transition:width .35s ease;}
.comp-box{display:flex;gap:12px;align-items:flex-end;border:1px solid var(--line-soft);
  background:var(--surface-2);padding:10px 10px 10px 18px;transition:.2s;}
.comp-box:focus-within{border-color:var(--line);box-shadow:0 0 0 3px rgba(212,178,90,.07);}
.comp-box textarea{flex:1;resize:none;border:none;background:transparent;color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.55;padding:8px 0;max-height:120px;outline:none;}
.comp-box textarea::placeholder{color:var(--muted-deep);}
.comp-box textarea:disabled{opacity:.5;}
.send{width:44px;height:44px;flex:none;border:none;cursor:pointer;
  background:linear-gradient(150deg,var(--gold-bright),var(--gold-deep));
  display:flex;align-items:center;justify-content:center;color:#1a1407;transition:.2s;}
.send:hover:not(:disabled){filter:brightness(1.08);}
.send:disabled{opacity:.45;cursor:not-allowed;}
.send svg{width:19px;height:19px;}
.comp-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);}
.comp-meta .counter b{color:var(--text-dim);font-weight:400;}

/* history drawer (mobile) */
.aside-scrim{display:none;}

/* ═══════════════════════════════════════════════════════════
   ASK  — editorial oracle "scroll"
   ═══════════════════════════════════════════════════════════ */
.ask-wrap{max-width:880px;margin:0 auto;padding:24px 40px 80px;}
.ask-intro{text-align:center;padding:48px 0 56px;position:relative;}
.ask-intro .ksig{width:50px;height:58px;margin:0 auto 26px;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.6));display:flex;align-items:center;justify-content:center;color:var(--gold);}
.ask-intro .kick{margin-bottom:22px;font-family:var(--mono);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);}
.ask-intro h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,6vw,68px);line-height:.98;color:var(--text);}
.ask-intro .sub{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.2vw,22px);
  color:var(--text-dim);max-width:560px;margin:24px auto 0;line-height:1.5;}

/* form-scroll */
.ask-form{border:1px solid var(--line);background:linear-gradient(160deg,var(--surface),var(--bg-solid) 80%);
  padding:14px;position:relative;}
.ask-form .frame-cnr{position:absolute;z-index:3;width:22px;height:22px;border:1px solid var(--gold);pointer-events:none;}
.ask-form .frame-cnr.tl{top:8px;left:8px;border-right:none;border-bottom:none;}
.ask-form .frame-cnr.tr{top:8px;right:8px;border-left:none;border-bottom:none;}
.ask-form .frame-cnr.bl{bottom:8px;left:8px;border-right:none;border-top:none;}
.ask-form .frame-cnr.br{bottom:8px;right:8px;border-left:none;border-top:none;}
.ask-form .inner{padding:36px 38px 34px;}
.ask-form textarea.q{width:100%;min-height:140px;resize:vertical;border:none;background:transparent;
  color:var(--text);font-family:var(--serif);font-size:22px;line-height:1.55;outline:none;}
.ask-form textarea.q::placeholder{color:var(--muted-deep);font-style:italic;}
.ask-form textarea.q:disabled{opacity:.5;}
.ask-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:24px;padding-top:22px;border-top:1px solid var(--line-soft);}
.ask-foot .price{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);}
.ask-foot .price b{color:var(--champ);font-weight:500;}

/* answer-scroll */
.scroll-answer{margin-top:64px;border-top:1px solid var(--line);padding-top:8px;position:relative;}
.scroll-answer .ribbon{display:flex;align-items:center;gap:14px;margin:32px 0 30px;}
.scroll-answer .ribbon .nm{font-family:var(--mono);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);}
.scroll-answer .ribbon .ln{flex:1;height:1px;background:var(--line-soft);}
.scroll-answer .ribbon .tm{font-family:var(--mono);font-size:10.5px;color:var(--muted);}
.answer-body{font-family:var(--serif);font-size:21px;line-height:1.68;color:var(--text-dim);}
.answer-body > p{margin-bottom:22px;}
.answer-body > p:first-of-type::first-letter{font-family:var(--serif-sc);font-weight:600;
  font-size:74px;line-height:.7;float:left;margin:8px 14px 0 0;color:var(--champ);}
.answer-body em{color:var(--champ);font-style:italic;}
.answer-body .lede{color:var(--text);}
.answer-sign{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--champ);
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line-soft);}
.answer-tools{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;}

/* ask archive */
.ask-archive{margin-top:96px;}
.ask-archive .sec-label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px;}
.ask-archive .sec-label .ln{flex:1;height:1px;background:var(--line-soft);}
.ask-archive h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,4vw,42px);margin-top:18px;color:var(--text);}
.arch-list{display:flex;flex-direction:column;margin-top:24px;}
.arch-row{display:grid;grid-template-columns:118px 1fr auto;gap:22px;align-items:center;
  width:100%;text-align:left;background:transparent;border:none;border-bottom:1px solid var(--line-soft);
  padding:22px 4px;transition:.2s;cursor:pointer;}
.arch-row:hover{background:var(--surface);padding-left:12px;}
.arch-row .date{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.06em;}
.arch-row .t{font-size:16px;color:var(--text-dim);line-height:1.4;}
.arch-row .arr{color:var(--gold-deep);transition:.2s;}
.arch-row:hover .arr{color:var(--gold);transform:translateX(4px);}
.arch-empty{padding:24px 4px;font-size:13px;color:var(--muted-deep);}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1024px){
  .chat-layout{grid-template-columns:1fr;}
  .chat-aside{position:fixed;top:var(--ahead-h, 70px);bottom:0;left:0;width:320px;max-width:86vw;z-index:70;
    transform:translateX(-100%);transition:transform .28s ease;}
  .chat-aside.open{transform:none;}
  .aside-scrim{display:block;position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;transition:.28s;}
  .aside-scrim.open{opacity:1;pointer-events:auto;}
  .chat-histbtn{display:inline-flex;}
}
@media (max-width:680px){
  .ask-wrap{padding:16px 22px 60px;}
  .ask-form .inner{padding:26px 22px;}
  .answer-body{font-size:19px;}
  .feed,.composer{padding-left:18px;padding-right:18px;}
  .chat-bar{padding:14px 18px;}
  .feed .msg{max-width:90%;}
}