:root {
  color-scheme: light;
  --ink: #17313a; --muted: #6d7f82; --paper: #f5f1e8; --white: #fffdf8;
  --teal: #166a67; --teal-soft: #d9ece8; --coral: #e56b4d; --line: #d9ded9; --warn: #fff0cf;
  --shadow: 0 18px 55px rgba(25,48,52,.10);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 8% 8%,#dcebe3 0,transparent 28%),var(--paper); min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 18px; }
h2 { font: 600 clamp(30px,4vw,56px)/1.04 Georgia,serif; letter-spacing: -.03em; }
h3 { font: 600 24px/1.1 Georgia,serif; }
.shell { min-height: 100vh; }
.topbar { min-height: 84px; display: flex; align-items: center; gap: 13px; padding: 12px clamp(24px,5vw,72px); border-bottom: 1px solid rgba(23,49,58,.12); background: rgba(255,253,248,.82); backdrop-filter: blur(14px); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--ink); color: #fff; font: 25px Georgia,serif; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.coral { color: var(--coral); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.app-nav { margin-left: 26px; display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.nav-button { border: 0; border-radius: 8px; padding: 8px 12px; background: transparent; color: var(--muted); font-weight: 800; }
.nav-button.active { background: var(--teal-soft); color: var(--teal); }
.language-control { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.language-control select { width: auto; padding: 8px 30px 8px 10px; background: var(--white); }
.top-status { font-size: 13px; font-weight: 700; color: var(--teal); display: flex; gap: 8px; align-items: center; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(229,107,77,.15); }
.login-layout { width: min(1160px,calc(100% - 40px)); margin: 9vh auto; display: grid; grid-template-columns: 1.35fr .75fr; gap: 28px; }
.hero-card, .login-card { border: 1px solid rgba(23,49,58,.12); border-radius: 28px; box-shadow: var(--shadow); }
.hero-card { min-height: 520px; padding: clamp(38px,6vw,76px); background: linear-gradient(145deg,#17313a,#166a67); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 25px; position: relative; overflow: hidden; }
.hero-logo { display: block; width: clamp(200px,22vw,240px); height: auto; max-width: 100%; object-fit: contain; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.18); position: relative; z-index: 1; }
.hero-card::after { content: ""; position: absolute; width: 290px; height: 290px; border: 46px solid rgba(255,255,255,.06); border-radius: 50%; right: -115px; bottom: -110px; }
.hero-copy { max-width: 620px; color: #cfe0dc; font-size: 18px; line-height: 1.65; }
.guardrails { display: flex; flex-wrap: wrap; gap: 8px; }
.guardrails span { border-radius: 999px; padding: 8px 11px; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 700; }
.login-card { background: var(--white); padding: 38px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.login-card h2 { font-size: 34px; }
label { display: grid; gap: 8px; font-size: 13px; font-weight: 800; }
input, select, textarea { width: 100%; border: 1px solid var(--line); padding: 13px 14px; border-radius: 12px; background: #fff; color: var(--ink); }
.primary, .ghost, .action { border: 0; border-radius: 12px; padding: 13px 16px; font-weight: 800; }
.primary { background: var(--coral); color: #fff; box-shadow: 0 8px 20px rgba(229,107,77,.24); }
.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
button:disabled { opacity: .45; cursor: not-allowed; }
.fine-print, .error, .local-note { color: var(--muted); font-size: 12px; line-height: 1.45; }
.error { color: #ad3926; min-height: 18px; }
.hidden { display: none !important; }
.dashboard { width: min(1440px,calc(100% - 40px)); margin: 28px auto 52px; }
.warning-strip { background: var(--warn); border: 1px solid #e8cf93; border-radius: 14px; padding: 12px 16px; font-size: 13px; }
.dashboard-heading { display: flex; justify-content: space-between; align-items: end; margin: 30px 0 22px; }
.dashboard-heading h2 { font-size: 38px; }
.metrics { display: grid; grid-template-columns: repeat(3,1fr) 1.7fr; gap: 14px; }
.metrics article { background: var(--white); border: 1px solid var(--line); border-radius: 17px; padding: 18px 20px; display: grid; gap: 5px; }
.metrics span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.metrics strong { font-size: 28px; }
.connector-card strong { color: var(--coral); font-size: 15px; }
.connector-card small { color: var(--muted); }
.accounts-section { margin-top: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.accounts-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.accounts-heading h3 { margin-top: 4px; }
.account-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 12px; }
.account-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: #fbfcf9; }
.account-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.account-card-head div { display: grid; gap: 4px; }
.account-card-head small { color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.connection-badge { padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.connection-badge.online { color: var(--teal); background: var(--teal-soft); }
.connection-badge.offline { color: #a13b28; background: #fde5df; }
.account-card dl { margin: 12px 0 0; display: grid; gap: 7px; }
.account-card dl div { display: flex; justify-content: space-between; gap: 12px; }
.account-card dt { color: var(--muted); font-size: 11px; }
.account-card dd { margin: 0; font-size: 11px; font-weight: 800; text-align: right; }
.workspace { margin-top: 18px; min-height: 560px; display: grid; grid-template-columns: minmax(320px,.85fr) minmax(450px,1.45fr); background: var(--white); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.queue-panel { border-right: 1px solid var(--line); }
.panel-title { padding: 22px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.count-pill { background: var(--teal-soft); color: var(--teal); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 800; }
.conversation-item { width: 100%; text-align: left; padding: 18px 22px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; gap: 8px; }
.conversation-item:hover, .conversation-item.active { background: #edf5f1; }
.conversation-top { display: flex; justify-content: space-between; gap: 12px; }
.conversation-top strong { font-size: 14px; }
.conversation-item p { color: var(--muted); font-size: 13px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--coral); }
.status.claimed { color: var(--teal); }
.status.resolved_local_only { color: var(--muted); }
.detail-panel { padding: 28px; }
.empty-state { min-height: 480px; display: grid; place-content: center; text-align: center; gap: 10px; color: var(--muted); }
.empty-icon { margin: auto; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font-size: 23px; }
.detail-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.detail-head h3 { margin-top: 6px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.info-box { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 6px; }
.info-box span { font-size: 10px; letter-spacing: .1em; color: var(--muted); font-weight: 900; }
.info-box strong { font-size: 13px; }
.reason-box { background: #fff8e9; border-left: 4px solid var(--coral); border-radius: 8px 14px 14px 8px; padding: 16px; margin-bottom: 18px; }
.reason-box strong { display: block; font-size: 12px; margin-bottom: 6px; }
.reason-box p, .message p { line-height: 1.55; font-size: 14px; }
.message { background: #f0f5f3; border-radius: 16px 16px 16px 4px; padding: 16px; margin: 12px 0 20px; max-width: 80%; }
.message small { display: block; color: var(--muted); margin-bottom: 5px; }
.composer { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: #fbfcf9; margin: 16px 0; }
.composer textarea { resize: vertical; margin: 8px 0 10px; line-height: 1.5; }
.composer textarea:focus { outline: 3px solid rgba(22,106,103,.13); border-color: var(--teal); }
.composer textarea:disabled { background: #eef1ed; color: var(--muted); }
.composer-tools { display: flex; gap: 8px; margin: 0 0 10px; }
.compact { padding: 8px 10px; font-size: 12px; }
.upload-label { display: inline-flex; align-items: center; width: auto; cursor: pointer; }
.upload-label input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.emoji-picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 10px; }
.emoji-picker button { border: 0; background: var(--paper); border-radius: 8px; padding: 7px 9px; font-size: 19px; }
.attachment-preview { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.attachment-preview img { width: 64px; height: 52px; object-fit: cover; border-radius: 8px; }
.attachment-preview div { display: grid; gap: 4px; min-width: 0; }
.attachment-preview strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.attachment-preview small { color: var(--muted); }
.simulate { width: 100%; }
.account-blocker { margin-top: 10px; padding: 10px 12px; border-left: 4px solid var(--coral); border-radius: 7px; background: #fff0eb; color: #873321; font-weight: 800; line-height: 1.45; }
.audit { margin: 18px 0; }
.audit-entry { border-left: 4px solid var(--teal); background: var(--teal-soft); border-radius: 8px 14px 14px 8px; padding: 14px; margin-top: 9px; }
.audit-entry p { font-size: 14px; line-height: 1.5; }
.audit-entry small { display: block; color: var(--teal); font-weight: 800; margin-top: 7px; }
.audit-entry img { display: block; max-width: min(320px,100%); max-height: 220px; object-fit: contain; border-radius: 10px; margin: 8px 0; background: #fff; }
.audit-entry > strong { display: block; font-size: 11px; }
.action-feedback { padding: 11px 13px; border-radius: 10px; margin: 12px 0; }
.action-feedback.success { background: #dff1df; color: #25643a; }
.action-feedback.error { background: #fde5df; color: #9f321f; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.action { background: var(--teal); color: #fff; }
.action.secondary { background: var(--ink); }
.local-note { margin-top: 10px; }
.settings-intro { color: var(--muted); max-width: 760px; line-height: 1.6; margin-top: -10px; }
.channel-settings-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 16px; margin-top: 22px; }
.settings-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); }
.settings-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.settings-card-head h3 { margin-top: 5px; font-size: 21px; }
.settings-card dl { margin: 18px 0; display: grid; gap: 9px; }
.settings-card dl div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.settings-card dt { color: var(--muted); font-size: 12px; }
.settings-card dd { margin: 0; text-align: right; font-size: 12px; font-weight: 800; max-width: 60%; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-actions button { padding: 9px 11px; font-size: 12px; }
.provider-note { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 12px; background: var(--paper); border-radius: 10px; }
@media (max-width: 900px) { .login-layout, .workspace { grid-template-columns: 1fr; } .hero-card { min-height: 400px; } .metrics { grid-template-columns: 1fr 1fr; } .queue-panel { border-right: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 900px) { .app-nav { order: 3; margin-left: 0; } .topbar { flex-wrap: wrap; } }
@media (max-width: 700px) { .top-status { display: none; } .header-actions { gap: 8px; } }
@media (max-width: 580px) { .language-control span { display: none; } .login-layout, .dashboard { width: calc(100% - 24px); margin-top: 20px; } .metrics, .detail-grid { grid-template-columns: 1fr; } .dashboard-heading { align-items: center; } .dashboard-heading h2 { font-size: 30px; } }