:root { --ink:#17221f; --muted:#68736f; --line:#e4e9e6; --paper:#fff; --ground:#f5f7f6; --green:#0d5c4f; --green-soft:#e0f1eb; --yellow:#fff2c2; --danger:#9d312d; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--ink); background:var(--ground); font:15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button,input,textarea { font:inherit; } button { cursor:pointer; } .app-shell { display:grid; grid-template-columns:295px minmax(390px,1fr) 390px; height:100vh; overflow:hidden; }
.access-screen { position:fixed;inset:0;z-index:10;background:linear-gradient(145deg,#0b493f,#102824);display:grid;place-items:center;padding:20px; }.access-screen.hidden { display:none; }.access-card { width:min(390px,100%);background:#fff;border-radius:18px;padding:34px;text-align:center;box-shadow:0 20px 60px #0008; }.access-card .brand-mark { margin:0 auto 15px; }.access-card h1 { margin:0;font-size:28px; }.access-card p { color:var(--muted);margin:4px 0 23px; }.access-card form { display:grid;text-align:left;gap:8px; }.access-card label { font-size:13px;font-weight:700; }.access-card input { border:1px solid var(--line);border-radius:9px;padding:11px;outline-color:var(--green); }.access-card small { display:block;color:var(--muted);margin-top:18px;line-height:1.4; }
.sidebar,.draft-panel { background:var(--paper); padding:24px; } .sidebar { border-right:1px solid var(--line); display:flex; flex-direction:column; gap:22px; }
.brand { display:flex; align-items:center; gap:11px; } .brand-mark { width:38px;height:38px;border-radius:12px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px; } .brand strong,.brand span { display:block; } .brand strong { font-size:18px; } .brand span,.eyebrow { color:var(--muted); font-size:12px; }
.search { height:43px; display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:10px; padding:0 12px; color:var(--muted); } .search input { border:0; outline:0; width:100%; }
.sidebar-heading { display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:700;color:var(--muted); } .chat-list { overflow:auto; margin:0 -8px; padding:0 8px; } .chat-item { width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;padding:13px 7px; } .chat-item:hover,.chat-item.active { background:#f0f7f4; } .chat-top { display:flex;justify-content:space-between;gap:8px;font-weight:700; } .chat-preview { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:13px;margin-top:3px; } .unread { color:var(--green); font-size:12px; }
.demo-note { margin-top:auto;border-radius:10px;background:#f1f5f3;padding:10px;font-size:12px;color:var(--muted); } .status-dot { display:inline-block;width:7px;height:7px;border-radius:50%;background:#d29f00;margin-right:4px; }
.conversation { min-width:0;display:grid;grid-template-rows:auto 1fr auto; } .conversation-header { background:var(--paper); padding:19px 28px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center; } .contact-name { font-size:18px;font-weight:800; }.contact-meta { color:var(--muted);font-size:13px; }.message-thread { overflow:auto;padding:30px;display:flex;flex-direction:column;gap:13px; }
.message { max-width:78%;padding:11px 13px;border-radius:12px;background:#fff;box-shadow:0 1px 1px #0000000a;align-self:flex-start; } .message.outbound { align-self:flex-end;background:var(--green-soft); } .message .time { display:block;font-size:11px;color:var(--muted);margin-top:5px;text-align:right; }.message.audio { border-left:4px solid #d29f00; }.audio-label {font-size:12px;font-weight:800;color:#876a00;text-transform:uppercase;letter-spacing:.05em;}
.message-form { background:#fff;padding:16px 28px;border-top:1px solid var(--line);display:flex;gap:10px; }.message-form input { min-width:0;flex:1;border:1px solid var(--line);border-radius:9px;padding:10px;outline-color:var(--green); }.message-form .primary { white-space:nowrap; }
.draft-panel { border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:auto; }.panel-title { display:flex;align-items:start;justify-content:space-between;gap:12px; }.panel-title h1 { margin:1px 0 0;font-size:21px; }.eyebrow { letter-spacing:.1em;font-weight:800; }.pill { border-radius:99px;padding:4px 9px;font-size:12px;background:var(--yellow); }.ai-summary { padding:12px;background:#f1f5f3;border-radius:9px;color:#43514c;font-size:13px; }.case-card,.reminders-card { border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-top:10px; }.case-heading { display:flex;justify-content:space-between;align-items:center;gap:10px; }.case-card strong { font-size:14px;display:block;margin-top:5px; }.case-card p { color:var(--muted);font-size:12px;margin:3px 0 0; }.case-status { color:#926a00;background:var(--yellow);border-radius:50px;padding:2px 7px;font-size:11px;font-weight:700; }.mini-button { border:0;background:transparent;color:var(--green);font-weight:800;padding:0; }.reminder-list { list-style:none;padding:0;margin:7px 0 0; }.reminder-list li { display:flex;align-items:center;gap:7px;border-top:1px solid var(--line);padding:7px 0 0;margin-top:7px;font-size:12px; }.reminder-list input { accent-color:var(--green); }.reminder-list .done { color:var(--muted);text-decoration:line-through; }.draft-label { font-size:13px;font-weight:600;margin:12px 0 6px; }.draft-panel textarea { width:100%;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:12px;outline-color:var(--green);line-height:1.5; }.draft-actions { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px; }.draft-actions .primary { grid-column:1/-1; }.primary,.secondary { border-radius:9px;padding:10px 12px;border:1px solid var(--line);font-weight:700; }.primary { background:var(--green);color:white;border-color:var(--green); }.secondary { background:#fff;color:var(--ink); }.danger { color:var(--danger); }.privacy-note { color:var(--muted);font-size:12px;margin-top:15px; }.toast { position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#17221f;color:#fff;border-radius:9px;padding:10px 15px;opacity:0;transition:.2s;pointer-events:none; }.toast.show {opacity:1;transform:translate(-50%,0);}
.link-button { border:0;background:transparent;color:var(--green);font-weight:700;padding:4px 0;text-align:left; }.settings-dialog { width:min(450px,calc(100% - 32px));border:0;border-radius:15px;padding:0;box-shadow:0 15px 55px #0005; }.settings-dialog::backdrop { background:#0b201caa; }.settings-dialog form { padding:25px; }.settings-dialog h2 { margin:0; }.settings-dialog p { color:var(--muted);font-size:13px; }.settings-dialog label { display:block;font-size:13px;font-weight:700;margin:16px 0 6px; }.settings-dialog input,.settings-dialog select,.settings-dialog textarea { width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit; }.settings-dialog textarea { resize:vertical; }.dialog-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:20px; }
@media (max-width:1050px) { .app-shell { grid-template-columns:260px minmax(360px,1fr); }.draft-panel { grid-column:1/-1;border-top:1px solid var(--line);border-left:0;min-height:360px; }.app-shell { height:auto;min-height:100vh;overflow:visible; }.conversation { min-height:70vh; } }
@media (max-width:700px) { .app-shell { display:block; }.sidebar { min-height:265px; }.chat-list { max-height:185px; }.conversation { min-height:600px; }.conversation-header,.message-form { padding-left:16px;padding-right:16px; }.message-thread {padding:18px;}.draft-panel {padding:20px;} }
.case-label { display:block;font-weight:700;font-size:11px;color:var(--muted);margin:10px 0 4px; }.case-card select,.case-card input { width:100%;border:1px solid var(--line);border-radius:7px;padding:7px;font:inherit;font-size:12px;margin-bottom:6px; }.compact { width:100%;padding:7px;font-size:12px; }