.hhai{
  --ink:#06131b; --deck:#0b2230; --hull:#123246; --line:#1f4258;
  --lagoon:#26d0c0; --brass:#e3b45a; --coral:#ff7a66; --text:#e9f2f4; --mute:#8fa9b6;
  display:grid; grid-template-columns:230px 1fr; gap:0;
  max-width:1040px; margin:24px auto; min-height:560px;
  background:var(--ink); color:var(--text);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box;
}
.hhai *,.hhai *::before,.hhai *::after{box-sizing:border-box}
.hhai-rail{background:var(--deck); border-right:1px solid var(--line); padding:18px 14px}
.hhai-brand{font-size:20px; font-weight:700; letter-spacing:.02em; margin:0 6px 16px}
.hhai-brand b{color:var(--brass)}
.hhai-modes{display:flex; flex-direction:column; gap:4px}
.hhai-mode{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border:1px solid transparent; border-radius:10px;
  background:none; color:var(--mute); font:inherit; cursor:pointer;
}
.hhai-mode:hover{color:var(--text); background:var(--hull)}
.hhai-mode[aria-selected="true"]{color:var(--text); background:var(--hull); border-color:var(--lagoon)}
.hhai-mode i{font-style:normal; width:1.4em; text-align:center}

.hhai-main{display:flex; flex-direction:column; min-width:0; padding:16px 18px}
.hhai-log{flex:1; min-height:340px; max-height:60vh; overflow-y:auto; padding:4px 2px 12px}

.hhai-empty{color:var(--mute); padding:28px 4px}
.hhai-empty h3{margin:0 0 6px; color:var(--text); font-size:20px}
.hhai-empty p{margin:0 0 14px}
.hhai-ex{display:flex; flex-wrap:wrap; gap:8px}
.hhai-ex button{
  padding:8px 12px; border:1px dashed var(--brass); border-radius:999px;
  background:none; color:var(--brass); font:inherit; font-size:14px; cursor:pointer; text-align:left;
}
.hhai-ex button:hover{background:rgba(227,180,90,.1)}

.hhai-msg{margin:0 0 14px; max-width:92%}
.hhai-msg.user{margin-left:auto}
.hhai-bub{padding:10px 14px; border-radius:12px; overflow-wrap:anywhere}
.hhai-msg.user .hhai-bub{background:var(--hull); border:1px solid var(--line); white-space:pre-wrap}
.hhai-msg.ai .hhai-bub{background:var(--deck); border-left:3px solid var(--lagoon); border-radius:4px 12px 12px 4px}
.hhai-msg.err .hhai-bub{background:rgba(255,122,102,.08); border-left:3px solid var(--coral); color:#ffd2ca}
.hhai-bub p{margin:0 0 .6em} .hhai-bub p:last-child{margin-bottom:0}
.hhai-bub h4{margin:.6em 0 .3em; font-size:1em; color:var(--brass)}
.hhai-bub ul,.hhai-bub ol{margin:.3em 0 .6em; padding-left:1.4em}
.hhai-bub code{background:var(--ink); padding:1px 5px; border-radius:4px; font-size:.9em}
.hhai-code{position:relative; margin:.5em 0}
.hhai-code pre{margin:0; padding:12px; padding-top:34px; background:var(--ink); border:1px solid var(--line); border-radius:8px; overflow-x:auto}
.hhai-code pre code{background:none; padding:0; font:13px/1.5 ui-monospace,Consolas,monospace; white-space:pre}
.hhai-copy{
  position:absolute; top:6px; right:6px; padding:3px 9px; font:inherit; font-size:12px;
  background:var(--hull); color:var(--text); border:1px solid var(--line); border-radius:6px; cursor:pointer;
}
.hhai-acts{margin-top:4px}
.hhai-acts button{background:none; border:0; color:var(--mute); font:inherit; font-size:13px; cursor:pointer; padding:2px 6px}
.hhai-acts button:hover{color:var(--lagoon)}

.hhai-typing{display:inline-flex; gap:5px; padding:4px 0}
.hhai-typing span{width:7px; height:7px; border-radius:50%; background:var(--lagoon); opacity:.35; animation:hhai-b 1s infinite}
.hhai-typing span:nth-child(2){animation-delay:.15s} .hhai-typing span:nth-child(3){animation-delay:.3s}
@keyframes hhai-b{50%{opacity:1}}

.hhai-compose{border:1px solid var(--line); border-radius:12px; background:var(--deck); padding:10px}
.hhai-compose:focus-within{border-color:var(--lagoon)}
.hhai-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.hhai-input{
  width:100%; resize:vertical; min-height:56px; max-height:220px; border:0; outline:0;
  background:none; color:var(--text); font:inherit;
}
.hhai-bar{display:flex; align-items:center; gap:10px; margin-top:6px}
.hhai-count{margin-right:auto; color:var(--mute); font-size:13px}
.hhai-clear,.hhai-send{font:inherit; border-radius:8px; padding:8px 16px; cursor:pointer}
.hhai-clear{background:none; border:1px solid var(--line); color:var(--mute)}
.hhai-clear:hover{color:var(--text)}
.hhai-send{background:var(--brass); border:1px solid var(--brass); color:#1a1405; font-weight:700}
.hhai-send:disabled{opacity:.5; cursor:wait}
.hhai-note{margin:10px 2px 0; color:var(--mute); font-size:12.5px}

.hhai button:focus-visible,.hhai textarea:focus-visible{outline:3px solid var(--brass); outline-offset:2px}

@media (max-width:760px){
  .hhai{grid-template-columns:1fr; margin:12px 0; border-radius:0; border-left:0; border-right:0}
  .hhai-rail{border-right:0; border-bottom:1px solid var(--line); padding:12px}
  .hhai-brand{margin-bottom:10px}
  .hhai-modes{flex-direction:row; overflow-x:auto; padding-bottom:4px}
  .hhai-mode{width:auto; white-space:nowrap; flex:0 0 auto}
  .hhai-msg{max-width:100%}
  .hhai-log{max-height:55vh}
}
@media (prefers-reduced-motion:reduce){.hhai-typing span{animation:none; opacity:.7}}