/* Level10ai Advisor shell — the chrome every Advisor page shares.
 *
 * Header, layout, left rail, chat column and welcome block lived in three
 * near-identical <style> blocks, which is how the rails and the panes drifted
 * apart in the first place. One copy here, linked after l10-theme.css and
 * l10-ui.css so page-specific rules can still be added on top.
 *
 * Rail contents are in js/l10-advisor-rail.js — same reason.
 */
:root{--gold:#c9a84c;--gold-light:#f0d48a;--black:#020c1b;--dark:#04152d;--mid:#0a2744;--text:#b5d4f4;--muted:#8ca4be;--border:rgba(201,168,76,0.2);}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--black);color:var(--text);font-family:Georgia,serif;min-height:100vh;display:flex;flex-direction:column;}
#app{display:flex;flex-direction:column;height:100vh;}
header{background:var(--dark);border-bottom:1px solid var(--border);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.h-back{font-size:13px;color:#8ca4be;text-decoration:none;}
.h-back:hover{color:var(--gold);}
.h-logo{font-size:16px;color:var(--gold);font-weight:700;display:flex;align-items:center;gap:8px;}
.h-mark{width:20px;height:20px;flex-shrink:0;display:block;}
.h-user{font-size:11px;color:#8ca4be;font-family:Arial,sans-serif;display:flex;align-items:center;gap:12px;}
.h-logout{font-size:11px;color:#8ca4be;cursor:pointer;font-family:Arial,sans-serif;background:none;border:none;padding:0;}
.h-logout:hover{color:var(--gold);}
.layout{display:grid;grid-template-columns:260px 1fr;flex:1;min-height:0;}
.sidebar{background:var(--dark);border-right:1px solid var(--border);padding:20px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;}
/* Two plain gold labels at the head of the rail. No tab chrome - they only
   scroll the rail to one section or the other, which both stay on the page. */
.rail-jump{display:flex;gap:10px;margin:-20px -16px 0;padding:14px 16px 10px;position:sticky;top:0;background:var(--dark);z-index:2;}
.rail-jump a{flex:1;text-align:center;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);text-decoration:none;padding:6px 4px;line-height:1.3;}
.rail-jump a:hover{color:var(--gold-light);}
.sidebar-title{font-size:11px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;margin-bottom:8px;}
.topic-btn{display:block;width:100%;text-align:left;background:var(--gold);border:1px solid var(--gold);color:#000;font-weight:700;padding:6px 12px;font-size:13px;cursor:pointer;font-family:Georgia,serif;margin-bottom:3px;text-decoration:none;}
.topic-btn:hover,.topic-btn.active{background:var(--gold-light);border-color:var(--gold-light);color:#000;}
/* Base only. l10-ui.css styles .topic-btn and .tool-link together and loads
   after this file, so the tool/advisor distinction is made there -- putting it
   here as well would just be a rule that never applies. */
.tool-link{display:block;width:100%;text-align:left;background:var(--gold);border:1px solid var(--gold);color:#000;font-weight:700;font-size:11px;text-decoration:none;padding:5px 12px;margin:0 0 3px;font-family:Georgia,serif;cursor:pointer;}
.chat-area{display:flex;flex-direction:column;min-height:0;}
.messages{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:16px;}
.msg{max-width:78%;}
.msg.user{align-self:flex-end;}
.msg.advisor{align-self:flex-start;}
.msg-who{font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:5px;color:var(--muted);}
.msg.advisor .msg-who{color:var(--gold);}
.msg-text{font-size:14px;line-height:1.7;padding:14px 18px;background:var(--mid);border:1px solid var(--border);}
.msg.advisor .msg-text{border-color:rgba(201,168,76,0.3);}
.msg.user .msg-text{background:rgba(201,168,76,0.08);border-color:rgba(201,168,76,0.25);}
.msg-text.loading{color:var(--muted);font-style:italic;}
.input-area{border-top:1px solid var(--border);padding:16px 24px;display:flex;gap:10px;flex-shrink:0;}
.chat-input{flex:1;background:var(--mid);border:1px solid var(--border);color:var(--text);padding:10px 14px;font-size:14px;font-family:Georgia,serif;outline:none;resize:none;min-height:42px;max-height:120px;}
.chat-input:focus{border-color:var(--gold);}
.send-btn{background:var(--gold);color:var(--black);border:none;padding:10px 22px;font-size:14px;cursor:pointer;font-family:Georgia,serif;letter-spacing:1px;flex-shrink:0;}
.send-btn:hover{background:var(--gold-light);}
.send-btn:disabled{opacity:0.5;cursor:not-allowed;}
/* Just the advisor name now, sitting high on the page rather than floating
   in a block of explanatory copy. */
.welcome{align-self:center;text-align:center;padding:10px 20px 0;max-width:520px;}
.welcome h2{font-size:22px;font-weight:400;color:var(--gold);margin-bottom:12px;}
.welcome p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:16px;}
.starter-q{display:block;width:100%;text-align:left;background:none;border:1px solid rgba(201,168,76,0.5);color:#b5d4f4;padding:8px 12px;font-size:13px;cursor:pointer;font-family:Georgia,serif;margin-bottom:6px;line-height:1.4;}
.starter-q:hover{border-color:var(--gold);color:var(--gold);}
@media(max-width:768px){.layout{grid-template-columns:1fr;}.sidebar{display:none;}}
/* When a side panel (evaluation report or saved chat) is open, the chat content
   shifts left into the remaining space so nothing is hidden behind the panel. */
.chat-area.side-open{padding-right:344px;}
@media(max-width:900px){.chat-area.side-open{padding-right:0;}}