:root { color-scheme: dark; --bg:#111516; --surface:#171d1f; --surface-2:#222a2d; --line:#3b4548; --text:#f6f2eb; --muted:#b7c0c2; --red:#e3292e; --green:#74c69d; font-family:Inter,Arial,sans-serif; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); } button,input,textarea { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.55; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:244px minmax(300px,390px) minmax(400px,1fr); }
.sidebar,.inbox,.thread { min-width:0; }.sidebar { padding:26px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:34px; }.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.04em; }.brand small { font-size:.62rem; letter-spacing:.16em; }.brand-mark { display:grid; place-items:center; width:38px; height:38px; background:var(--red); color:#fff; clip-path:polygon(15% 0,100% 0,85% 100%,0 100%); font-size:1.3rem; }
nav { display:grid; gap:6px; }.nav-item { border:0; background:transparent; color:var(--text); text-align:left; padding:12px; border-left:3px solid transparent; display:flex; justify-content:space-between; }.nav-item:hover,.nav-item.is-active { background:var(--surface-2); border-left-color:var(--red); }.nav-item span { color:var(--muted); }.notice { margin-top:auto; color:var(--muted); font-size:.78rem; line-height:1.45; }
.inbox { border-right:1px solid var(--line); padding:28px 20px; background:linear-gradient(180deg,#13191a,var(--bg)); }.section-header,.thread-header { display:flex; align-items:start; justify-content:space-between; gap:14px; }.eyebrow { margin:0 0 8px; color:#ff6266; font-size:.71rem; font-weight:800; letter-spacing:.14em; }.section-header h1,.thread-header h2 { margin:0; font-size:2rem; }.status-chip { border:1px solid #805b22; color:#ffc15d; padding:6px 8px; font-size:.65rem; font-weight:800; letter-spacing:.07em; white-space:nowrap; }.search { margin:24px 0 14px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface); padding:10px; }.search input { border:0; outline:0; background:transparent; color:var(--text); width:100%; }.conversation-list { display:grid; gap:8px; }.conversation-card { width:100%; border:1px solid transparent; background:var(--surface); color:var(--text); display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; text-align:left; padding:12px; }.conversation-card:hover,.conversation-card.is-selected { border-color:var(--red); background:var(--surface-2); }.avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#52636a; font-size:.75rem; font-weight:800; }.card-copy { display:grid; gap:4px; }.card-copy small,.conversation-card time,.thread-header p,.message small { color:var(--muted); font-size:.75rem; }.conversation-card time { white-space:nowrap; }
.thread { padding:28px clamp(22px,4vw,58px); display:grid; grid-template-rows:auto 1fr auto; gap:22px; }.thread-header p { margin:.4rem 0 0; }.button-primary,.button-secondary { padding:11px 14px; border:1px solid var(--line); color:#fff; font-weight:700; }.button-primary { background:var(--red); border-color:var(--red); }.button-secondary { background:transparent; }.message-thread { min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; }.message { width:min(78%,560px); background:var(--surface); border:1px solid var(--line); padding:12px 14px; border-radius:2px 12px 12px 12px; }.message.is-outbound { align-self:flex-end; background:#422024; border-color:#8a373d; border-radius:12px 2px 12px 12px; }.message p { margin:0 0 8px; line-height:1.45; }.composer { display:grid; grid-template-columns:1fr auto; gap:12px; border-top:1px solid var(--line); padding-top:18px; }.composer textarea { resize:vertical; min-height:58px; background:var(--surface); border:1px solid var(--line); color:var(--muted); padding:10px; }.empty-state { color:var(--muted); display:grid; place-items:center; text-align:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) { .app-shell { grid-template-columns:190px minmax(280px,1fr); }.thread { grid-column:2; border-top:1px solid var(--line); min-height:520px; }.sidebar { grid-row:span 2; } }
@media (max-width:640px) { .app-shell { display:block; }.sidebar { padding:15px; border-right:0; border-bottom:1px solid var(--line); }.sidebar nav { grid-template-columns:repeat(3,1fr); }.nav-item { font-size:.82rem; }.notice { display:none; }.inbox,.thread { border:0; padding:20px 16px; }.section-header h1,.thread-header h2 { font-size:1.55rem; }.thread { min-height:500px; }.message { width:92%; }.composer { grid-template-columns:1fr; } }