/* ============================================================
   Assistant — matches portfolio "Engineering Console" theme
   ============================================================ */
:root{
  --paper:#ece8df; --paper-2:#e4dfd3; --ink:#17150f; --ink-2:#45413a;
  --mute:#8b867b; --rule:#cfc9bb; --sig:#c1440e; --math:#2f6f6a;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html[data-theme="dark"]{
  --paper:#0c0c0b; --paper-2:#151412; --ink:#f1eee6; --ink-2:#c4c0b5;
  --mute:#797569; --rule:#2a2823; --sig:#e2591d; --math:#54b3aa;
}
*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink-2);
  line-height:1.6; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-height:100vh;
  transition:background-color .3s ease,color .3s ease;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:100% 100%,88px 100%; opacity:.16;
}
html[data-theme="dark"] body::before{opacity:.4;}
::selection{background:var(--sig); color:#fff7f0;}
a{color:inherit; text-decoration:none;}

.chat-top{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px; border-bottom:1px solid var(--ink); font-family:var(--mono);
}
.back{font-size:.9rem; font-weight:600; color:var(--ink);} .back:hover{color:var(--sig);}
.theme-btn{font-family:var(--mono); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; cursor:pointer;
  background:transparent; color:var(--ink-2); border:1px solid var(--rule); padding:6px 12px; display:inline-flex; align-items:center; gap:8px;}
.theme-btn:hover{color:var(--sig); border-color:var(--sig);}
.tdot{width:11px; height:11px; border-radius:50%; border:1.5px solid var(--ink); background:linear-gradient(90deg,var(--ink) 0 50%,transparent 50%); box-sizing:border-box;}
.theme-btn:hover .tdot{border-color:var(--sig); background:linear-gradient(90deg,var(--sig) 0 50%,transparent 50%);}

.chat-app{position:relative; z-index:1; width:100%; max-width:820px; margin:0 auto; padding:26px 20px 22px;
  flex:1; display:flex; flex-direction:column; min-height:0;}
.chat-intro{margin-bottom:18px;}
.kicker{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); margin-bottom:8px;}
.kicker .sig{color:var(--sig); font-weight:600;}
.chat-intro h1{font-family:var(--sans); font-weight:700; letter-spacing:-.02em; font-size:clamp(1.7rem,3.5vw,2.3rem); color:var(--ink); line-height:1;}
.chat-intro .sub{color:var(--mute); margin-top:8px; max-width:64ch; font-size:.95rem;}
.chat-intro .sub b{color:var(--math); font-weight:600;}

.chat-window{
  flex:1; min-height:240px; overflow-y:auto; padding:18px; background:var(--paper-2);
  border:1px solid var(--rule); display:flex; flex-direction:column; gap:16px;
}
.msg{display:flex; gap:12px; max-width:92%;}
.msg.user{align-self:flex-end; flex-direction:row-reverse;}
.avatar{
  flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; font-family:var(--mono);
  font-size:.9rem; border:1px solid var(--rule); color:var(--ink); background:var(--paper);
}
.msg.user .avatar{color:var(--paper); background:var(--ink); border-color:var(--ink);}
.msg.bot[data-agent="math"] .avatar{color:#fff; background:var(--math); border-color:var(--math);}
.bubble{min-width:0;}
.who{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mute); margin-bottom:5px;}
.msg.bot[data-agent="math"] .who{color:var(--math);}
.msg.user .who{text-align:right;}
.body{
  font-size:.96rem; color:var(--ink); background:var(--paper); border:1px solid var(--rule);
  padding:11px 14px; white-space:normal; word-wrap:break-word; overflow-wrap:anywhere;
}
.msg.user .body{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.msg.bot[data-agent="math"] .body{border-left:3px solid var(--math);}
.body p{margin:0 0 .55em;} .body p:last-child{margin-bottom:0;}
.body ul,.body ol{margin:.2em 0 .6em 1.2em;} .body li{margin:.15em 0;}
.body code{font-family:var(--mono); font-size:.86em; background:rgba(127,127,127,.16); padding:1px 5px; border-radius:3px;}
.body pre{font-family:var(--mono); font-size:.84em; background:rgba(127,127,127,.14); padding:10px 12px; overflow-x:auto; margin:.4em 0; border-left:2px solid var(--rule);}
.body pre code{background:none; padding:0;}
.body strong{color:inherit; font-weight:600;}
.body a{color:var(--sig); text-decoration:underline;}

.typing .body{color:var(--mute);}
.typing .dots span{animation:blink 1.2s infinite; }
.typing .dots span:nth-child(2){animation-delay:.2s;} .typing .dots span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.25;}30%{opacity:1;}}

.notice{
  margin:12px 0 0; padding:11px 14px; font-family:var(--mono); font-size:.82rem;
  border:1px solid var(--sig); color:var(--sig); background:rgba(193,68,14,.06);
}

/* handoff announcement: appears when a math question is asked */
.handoff{
  align-self:center; display:flex; align-items:center; gap:10px; margin:4px 0;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; color:var(--math);
}
.handoff::before, .handoff::after{content:""; height:1px; width:26px; background:var(--math); opacity:.45;}
.handoff .h-ico{font-weight:600;}

.composer{display:flex; gap:10px; margin-top:14px; align-items:flex-end;}
#input{
  flex:1; resize:none; max-height:160px; background:var(--paper-2); color:var(--ink);
  border:1px solid var(--rule); padding:13px 14px; font-family:var(--sans); font-size:.96rem; line-height:1.5;
}
#input:focus{outline:none; border-color:var(--sig);}
.send{
  font-family:var(--mono); font-size:.84rem; cursor:pointer; padding:13px 22px; white-space:nowrap;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink); transition:.15s;
}
.send:hover:not(:disabled){background:var(--sig); border-color:var(--sig); color:#fff;}
.send:disabled{opacity:.45; cursor:not-allowed;}
html[data-theme="dark"] .send{background:var(--sig); border-color:var(--sig); color:#0c0c0b;}

.foot{font-family:var(--mono); font-size:.72rem; color:var(--mute); margin-top:12px; text-align:center;}
.foot a{color:var(--sig);} .foot a:hover{text-decoration:underline;}

@media (max-width:600px){
  .chat-app{padding:18px 14px;}
  .msg{max-width:100%;}
}