/* Colors and sidebar proportions follow the approved communications workspace. */
:root { --bg:#faf7f0; --card:#fffefa; --ink:#302738; --muted:#766b7c; --line:#d6ccd9; --purple:#593777; --gold:#ae873e; --tint:#f0eaf4; --deep:#2b1838; }
body.dark { --bg:#19131f; --card:#251d2c; --ink:#f4eef6; --muted:#c1b3c9; --line:#54425e; --purple:#c5a0df; --gold:#cfb376; --tint:#35263f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.6 system-ui,sans-serif; }
.sidebar { width:242px; background:var(--deep); color:#f8f1e5; position:fixed; inset:0 auto 0 0; padding:30px 22px; overflow:auto; display:flex; flex-direction:column; }
.brand strong { display:block; font:25px Georgia,serif; }
.brand small { font-size:9px; letter-spacing:2.5px; color:#d5bd92; }
nav { margin-top:26px; }
.nav-label { text-transform:uppercase; letter-spacing:2px; font-size:10px; color:#d5bd92; margin:24px 10px 8px; }
summary { cursor:pointer; padding:9px 10px; color:#ead29c; }
.email-group { margin-left:10px; }
nav a,.unavailable { display:block; padding:9px 10px; border-radius:8px; color:#e7dfea; text-decoration:none; }
nav a:hover,nav a[aria-current] { background:#ffffff15; color:white; }
.unavailable { color:#c5b7cd; font-size:12px; }
.unavailable small { display:block; color:#aa99b5; font-size:10px; }
.sidebar-note { margin-top:auto; padding-top:35px; color:#c5b7cd; font-size:11px; }
.layout { margin-left:242px; }
.topbar { min-height:68px; padding:12px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); background:var(--card); color:var(--muted); font-size:12px; }
main { max-width:1320px; margin:auto; padding:32px; }
h1,h2 { font-family:Georgia,serif; font-weight:400; margin:0 0 10px; }
h1 { font-size:38px; } h2 { font-size:23px; }
p { color:var(--muted); overflow-wrap:anywhere; }
a { color:var(--purple); }
button,select { font:inherit; border:1px solid var(--line); border-radius:8px; padding:9px 12px; background:var(--card); color:var(--ink); }
button { cursor:pointer; color:var(--purple); }
button:hover { border-color:var(--purple); }
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:1.8px; font-size:11px; }
.heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; }
.badge { border:1px solid var(--line); border-radius:20px; padding:4px 10px; font-size:11px; white-space:nowrap; }
.mailbox-controls,.panel { background:var(--card); border:1px solid var(--line); border-radius:13px; padding:22px; margin:16px 0; box-shadow:0 3px 0 #b9a8c029,0 12px 28px #3027380d; overflow-wrap:anywhere; }
.panel { border-left:3px solid var(--purple); }
.toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:16px; }
label { color:var(--muted); font-size:12px; max-width:100%; }
select { display:block; max-width:100%; min-width:140px; margin-top:5px; }
.account-context { margin-bottom:0; font-size:12px; color:var(--purple); }
.scope-note { font-size:12px; }
#status:not(:empty) { padding:12px 16px; border:1px solid var(--line); border-left:4px solid var(--gold); background:var(--tint); border-radius:8px; }
.skip { position:absolute; top:-60px; left:255px; background:var(--card); padding:12px; z-index:2; }
.skip:focus { top:10px; }
[hidden] { display:none!important; }
@media(prefers-reduced-motion:no-preference) { .panel { transition:transform .18s,box-shadow .18s; } .panel:hover { transform:translateY(-2px); box-shadow:0 4px 0 #b9a8c029,0 16px 28px #30273818; } }
@media(max-width:760px) { .sidebar { position:static; width:auto; padding:20px; } .sidebar-note { display:none; } nav { margin-top:10px; } .layout { margin-left:0; } main,.topbar { padding:18px; } .skip { left:10px; } .toolbar label { width:100%; } select { width:100%; } }

.message-body { white-space:pre-wrap; overflow-wrap:anywhere; padding:18px 0; border-top:1px solid var(--line); }
#draft-form input,#draft-form textarea,#reply-form input,#reply-form textarea { display:block; box-sizing:border-box; width:100%; padding:12px; margin:6px 0 16px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--card); font:inherit; }
#draft-form textarea,#reply-form textarea { resize:vertical; }
#save-status:not(:empty),#permission-message:not(:empty) { padding:12px; border-left:4px solid var(--gold); background:var(--tint); }
#conversation .heading { position:sticky; top:0; background:var(--bg); padding:12px 0; z-index:1; }
#conversation-status:not(:empty) { padding:12px 16px; border:1px solid var(--line); border-left:4px solid var(--gold); background:var(--tint); border-radius:8px; }

#assist-text{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;}
#agent-settings-form label,#composer details>label { display:block; margin:12px 0; }
#agent-settings-form textarea,#agent-settings-form input[type=number],#assist-instructions,#assist-voice { display:block; box-sizing:border-box; width:100%; padding:12px; margin:6px 0; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--card); font:inherit; }
#agent-settings-status:not(:empty),#assist-status:not(:empty) { padding:12px; border-left:4px solid var(--gold); background:var(--tint); }

#signature-frame { width: 100%; height: 280px; border: 1px solid currentColor; border-radius: 8px; margin-top: 12px; background: white; }