html,body{height:100%}
.appshell{display:flex;align-items:stretch;min-height:100vh}
.mainpane{flex:1;min-width:0}
.sidepanel{width:380px;flex:none;height:100vh;position:sticky;top:0;align-self:flex-start;display:flex;flex-direction:column;background:var(--surf);border-left:1px solid var(--bdr)}
.sp-close{display:none}
.sp-head{background:#252122;color:#f2ede1;padding:16px 18px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex:none}
.sp-title{font-size:15px;font-weight:800}
.sp-ctx{font-size:12px;color:#a89f95;margin-top:3px}.sp-ctx b{color:var(--a5)}
.sp-howto{padding:12px 16px;border-bottom:1px solid var(--bdr);flex:none;background:var(--surf2)}
.sp-howto-label{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--a1);margin-bottom:4px}
.sp-howto-text{font-size:12.5px;color:var(--tx);line-height:1.5}
.sp-thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.sp-thread:empty::before{content:"👋 Ask a question below, or tap a suggestion.";color:var(--mu);font-size:13px;line-height:1.6}
.msg{max-width:92%;font-size:13.5px;line-height:1.5;padding:10px 13px;border-radius:14px}
.msg.u{align-self:flex-end;background:var(--a1);color:#fff;border-bottom-right-radius:4px}
.msg.b{align-self:flex-start;background:var(--surf2);border:1px solid var(--bdr);color:var(--tx);border-bottom-left-radius:4px}
.msg.b .src{margin-top:6px;font-size:11px;color:var(--mu)}
.thinking{color:var(--mu)}
.xbar{margin-top:8px}
.xtoggle{display:inline-flex;align-items:center;gap:6px;background:var(--surf);border:1px solid var(--bdr);border-radius:8px;color:var(--a1);font-size:11px;font-weight:800;cursor:pointer;padding:5px 10px;text-transform:uppercase;letter-spacing:.04em;transition:background .12s,border-color .12s}
.xtoggle:hover{background:rgba(39,161,163,.12);border-color:var(--a1)}
.xtoggle .chev{display:inline-block;font-size:14px;line-height:1;transition:transform .15s}
.xtoggle[aria-expanded="true"] .chev{transform:rotate(90deg)}
.xtoggle:focus-visible,.xmenu button:focus-visible,.schip:focus-visible,.sp-input button:focus-visible,.sp-input input:focus-visible,.sp-close:focus-visible,.sp-toggle:focus-visible{outline:2px solid var(--a1);outline-offset:2px}
.xmenu{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.xmenu button{background:rgba(39,161,163,.08);border:1px solid rgba(39,161,163,.28);color:var(--a1);border-radius:8px;padding:4px 9px;font-size:11px;font-weight:800;cursor:pointer}
.xmenu button:hover{background:rgba(39,161,163,.16)}
.xmenu button:disabled{opacity:.6;cursor:default}
.sp-suggest{padding:12px 14px;border-top:1px solid var(--bdr);display:flex;flex-direction:column;gap:8px;flex:none}
.sp-suggest .lbl{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.schip{text-align:left;background:rgba(39,161,163,.08);border:1px solid rgba(39,161,163,.28);color:var(--a1);border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:700;cursor:pointer}
.schip:hover{background:rgba(39,161,163,.16)}
.sp-input{padding:12px 14px;border-top:1px solid var(--bdr);display:flex;gap:8px;flex:none}
.sp-input input{flex:1;background:var(--surf2);border:1px solid var(--bdr);border-radius:10px;padding:10px;font-size:13px;color:var(--tx)}
.sp-input button{background:var(--a1);color:#fff;border:none;border-radius:10px;padding:0 16px;font-weight:800;font-size:12px;cursor:pointer}
.sp-toggle{display:none}
@media(max-width:900px){
  .sidepanel{position:fixed;top:0;right:0;height:100%;width:100%;max-width:400px;z-index:70;transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);box-shadow:-16px 0 40px -20px rgba(37,33,34,.4)}
  .sidepanel.open{transform:translateX(0)}
  .sp-close{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:none;color:#f2ede1;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:15px;flex:none}
  .sp-toggle{display:inline-flex}
}