:root {
  color-scheme: light;
  --bg: oklch(.977 .003 200);
  --surface: oklch(1 0 0);
  --surface-soft: oklch(.965 .009 200);
  --ink: oklch(.245 .022 200);
  --muted: oklch(.46 .018 200);
  --line: oklch(.9 .008 200);
  --primary: oklch(.4 .073 200);
  --primary-hover: oklch(.34 .065 200);
  --primary-soft: oklch(.94 .025 200);
  --sidebar: oklch(.205 .015 200);
  --sidebar-ink: oklch(.95 .006 200);
  --sidebar-muted: oklch(.73 .015 200);
  --success: oklch(.37 .07 155);
  --success-soft: oklch(.95 .03 155);
  --error: oklch(.43 .15 25);
  --warning: oklch(.4 .08 65);
  --focus: oklch(.57 .09 200);
  --z-sidebar: 20;
  --z-header: 10;
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--surface); cursor: pointer; font-weight: 550; transition: background .16s ease-out, border-color .16s ease-out; }
button:hover { background: var(--surface-soft); border-color: oklch(.8 .015 200); }
button:active { background: var(--primary-soft); }
button:disabled { opacity: .48; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
button.primary { color: var(--surface); background: var(--primary); border-color: var(--primary); }
button.primary:hover { background: var(--primary-hover); }
button.danger { color: var(--error); }
button.text-button { color: var(--primary); background: transparent; border: 0; padding: 8px 0; }
button.compact-button { padding: 8px 12px; font-size: 12px; }
button.icon-button { padding: 8px; border: 0; background: transparent; }
svg { flex-shrink: 0; vertical-align: middle; }
input, select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); padding: 10px 12px; }
input::placeholder { color: var(--muted); opacity: 1; }
label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; }
a { color: var(--primary); text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: 27px; letter-spacing: -.03em; font-weight: 680; line-height: 1.3; }
h2 { font-size: 17px; font-weight: 650; line-height: 1.4; letter-spacing: -.015em; }
h3 { font-size: 14px; font-weight: 650; }
p { text-wrap: pretty; max-width: 75ch; }
small, .muted, .caption { color: var(--muted); }
small, .caption { font-size: 12px; }
code { font: 12px/1.6 ui-monospace, SFMono-Regular, monospace; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.stack { display: grid; gap: 16px; }
.row, .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row { justify-content: space-between; gap: 12px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 5px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 550; white-space: nowrap; }
.badge.good { background: var(--success-soft); color: var(--success); }
.badge.warn { background: oklch(.96 .035 85); color: var(--warning); }
.badge.bad { background: oklch(.96 .025 25); color: var(--error); }
.error { color: var(--error); }
.app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; padding: 28px 16px 16px; background: var(--sidebar); color: var(--sidebar-ink); z-index: var(--z-sidebar); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 23px; font-weight: 720; letter-spacing: -.035em; }
.brand-mark { display: grid; place-items: center; width: 33px; height: 36px; border: 1px solid oklch(.42 .055 200); border-radius: 9px; color: oklch(.82 .07 200); }
.workspace-switcher { display: flex; align-items: center; gap: 9px; margin: 29px 2px 24px; padding: 10px 8px; border: 1px solid oklch(.34 .015 200); border-radius: 7px; font-size: 11px; }
.workspace-switcher>div { flex: 1; font-weight: 550; }
.workspace-switcher>small { color: var(--sidebar-muted); font-size: 10px; }
.workspace-avatar, .profile-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; background: oklch(.34 .035 200); color: var(--sidebar-ink); font-size: 12px; font-weight: 650; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { width: 100%; justify-content: flex-start; gap: 11px; padding: 10px 12px; background: transparent; color: var(--sidebar-muted); border: 0; font-size: 12px; font-weight: 500; }
.nav-item:hover { background: oklch(.27 .02 200); color: var(--sidebar-ink); }
.nav-item[aria-current=page] { background: oklch(.33 .045 200); color: oklch(.99 0 0); }
.nav-item>span:first-of-type { flex: 1; text-align: left; }
.nav-count { font-size: 10px; padding: 0 5px; border-radius: 4px; color: var(--sidebar-muted); background: oklch(.29 .015 200); }
.nav-item[aria-current=page] .nav-count { color: oklch(.94 .025 200); background: oklch(.4 .045 200); }
.nav-item[data-view=health] { margin-top: 17px; }
.sidebar-devices { margin-top: 28px; padding-top: 18px; border-top: 1px solid oklch(.32 .015 200); }
.sidebar-label { padding: 0 12px; color: var(--sidebar-muted); font-size: 11px; margin-bottom: 10px; }
.device-list { display: grid; gap: 6px; }
.device-item { width: 100%; justify-content: flex-start; gap: 9px; text-align: left; padding: 9px; border: 1px solid transparent; color: var(--sidebar-ink); background: transparent; }
.device-item:hover, .device-item[aria-pressed=true] { background: oklch(.27 .02 200); border-color: oklch(.36 .025 200); }
.device-item strong { display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }
.device-item small { display: block; color: var(--sidebar-muted); font-size: 10px; }
.device-indicator { display: grid; place-items: center; width: 28px; height: 32px; flex-shrink: 0; color: var(--sidebar-muted); }
.sidebar-profile { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 24px 6px 0; }
.sidebar-profile>div { flex: 1; }
.sidebar-profile strong, .sidebar-profile small { display: block; font-size: 11px; }
.sidebar-profile small { color: var(--sidebar-muted); font-size: 10px; margin-top: 2px; }
.sidebar-profile button { color: var(--sidebar-muted); }
.profile-avatar { border-radius: 50%; }
.app-content { min-width: 0; }
.topbar { height: 70px; position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px; border-bottom: 1px solid var(--line); background: var(--surface); }
.breadcrumb { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.breadcrumb span { color: var(--muted); }
.breadcrumb strong { font-weight: 550; }
.topbar-tools { display: flex; align-items: center; gap: 25px; }
.topbar-search { padding: 7px 0; border: 0; background: transparent; color: var(--muted); font-weight: 400; font-size: 12px; }
.local-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 11px; }
.menu-toggle { display: none; }
.main-content { max-width: 1580px; padding: 30px 32px 48px; margin: 0 auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-heading p { margin-top: 7px; font-size: 12px; }
#message:empty { display: none; }
.notice { font-size: 12px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); margin-bottom: 18px; }
.device-strip { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.device-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.device-identity>svg { color: var(--muted); }
.device-identity h2 { font-size: 13px; }
.device-identity small { font-size: 10px; }
.device-identity .badge { margin-left: 8px; }
.alert-list { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.surface { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 20px; }
.connection-surface { display: flex; align-items: center; gap: 26px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.phone-illustration { display: grid; place-items: center; height: 146px; width: 100px; flex-shrink: 0; background: var(--primary-soft); color: var(--primary); border-radius: 18px; }
.connection-copy h2 { font-size: 23px; margin: 3px 0 7px; }
.connection-copy>p { font-size: 12px; }
.connection-copy .primary { margin-top: 16px; padding: 8px 12px; font-size: 12px; }
.connection-facts { display: flex; gap: 25px; margin-top: 16px; flex-wrap: wrap; }
.connection-facts small, .connection-facts strong { display: block; }
.connection-facts strong { font-size: 11px; font-weight: 600; margin-top: 4px; }
.connection-facts small { font-size: 10px; }
.privacy-surface { display: flex; align-items: flex-start; flex-direction: column; gap: 13px; padding: 26px; background: var(--primary-soft); border: 1px solid oklch(.87 .025 200); border-radius: 10px; }
.privacy-surface>svg { color: var(--primary); }
.privacy-surface p { font-size: 12px; }
.privacy-surface button { margin-top: auto; font-size: 12px; }
.archive-summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary-stat { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; padding: 0 22px; }
.summary-stat+ .summary-stat { border-left: 1px solid var(--line); }
.summary-stat>svg { grid-row: span 2; align-self: center; color: var(--muted); }
.summary-stat>strong { font-size: 23px; font-weight: 650; letter-spacing: -.025em; }
.summary-stat>.caption { font-size: 11px; }
.panel-title { font-size: 16px; font-weight: 650; }
.source-breakdown>p { margin: 4px 0 20px; }
.source-row { display: grid; grid-template-columns: 115px minmax(40px, 1fr) 30px; align-items: center; gap: 13px; margin: 18px 0; font-size: 12px; }
.source-row-label { display: flex; align-items: center; gap: 9px; }
.source-row-label svg { color: var(--muted); }
.source-row>strong { text-align: right; font-weight: 550; }
progress { display: block; width: 100%; height: 6px; border: 0; border-radius: 10px; overflow: hidden; background: var(--surface-soft); appearance: none; }
progress::-webkit-progress-bar { background: var(--surface-soft); border-radius: 10px; }
progress::-webkit-progress-value { background: var(--primary); border-radius: 10px; }
progress::-moz-progress-bar { background: var(--primary); border-radius: 10px; }
.recent-records .row { margin-bottom: 8px; }
.recent-records h2 { font-size: 16px; }
.recent-record { display: flex; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.recent-record:last-child { border: 0; }
.recent-record>div { min-width: 0; flex: 1; }
.recent-record strong { display: block; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.recent-record>small { max-width: 90px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-avatar, .contact-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 700; }
.contact-avatar { border-radius: 50%; width: 33px; height: 33px; background: var(--surface-soft); color: var(--muted); }
.workspace { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; overflow: hidden; }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 22px; }
.workspace-toolbar strong { font-size: 15px; }
.count-label { display: inline-flex; font-size: 11px; color: var(--muted); margin-left: 10px; }
.download-link { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; text-decoration: none; }
.workspace-filters { display: flex; align-items: center; gap: 12px; padding: 0 22px 18px; }
.search-field { display: flex; align-items: center; flex: 1; min-width: 0; gap: 8px; border: 1px solid var(--line); border-radius: 7px; padding-left: 11px; }
.search-field>svg { color: var(--muted); }
.search-field input { border: 0; background: transparent; padding: 9px 0; font-size: 12px; }
.search-submit { border: 0; border-radius: 0 7px 7px 0; background: transparent; font-size: 11px; padding: 10px; flex-shrink: 0; color: var(--primary); }
.workspace-filters select { width: 165px; flex-shrink: 0; font-size: 12px; }
.inbox-layout { display: flex; min-height: 500px; border-top: 1px solid var(--line); }
.inbox-layout.chat-layout { display: grid; grid-template-columns: 145px 235px minmax(0, 1fr); }
.app-rail { padding: 17px 9px; background: var(--surface); border-right: 1px solid var(--line); min-width: 0; }
.rail-label { font-size: 10px; color: var(--muted); padding: 0 7px 14px; }
.app-source { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 7px; padding: 9px 6px; margin-bottom: 6px; border: 0; font-size: 10px; background: transparent; border-radius: 6px; }
.app-source strong { text-align: left; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.app-source .app-avatar { width: 25px; height: 25px; font-size: 9px; }
.app-source[aria-pressed=true] { background: var(--primary-soft); color: var(--primary); }
.source-count { font-size: 9px; color: var(--muted); }
.threads { min-width: 0; flex: 0 0 250px; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; max-height: 650px; }
.thread-list-heading { font-size: 11px; font-weight: 600; color: var(--muted); padding: 17px 16px; border-bottom: 1px solid var(--line); }
.thread { display: flex; align-items: flex-start; width: 100%; gap: 10px; text-align: left; border: 0; border-radius: 0; padding: 16px 13px; background: var(--surface); border-bottom: 1px solid var(--line); }
.thread[aria-pressed=true] { background: var(--primary-soft); }
.thread-copy { min-width: 0; }
.thread-copy>strong { display: block; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.thread-copy>small { display: block; margin-top: 5px; font-size: 9px; }
.thread-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); margin-top: 3px; }
.thread-app-heading { padding: 10px 15px; font-size: 10px; font-weight: 600; color: var(--muted); background: var(--surface-soft); }
.thread-empty { padding: 20px 15px; font-size: 12px; color: var(--muted); }
.conversation-panel { display: flex; flex-direction: column; flex: 1; min-width: 0; background: var(--surface); }
.conversation-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); min-height: 79px; }
.conversation-header h2 { font-size: 14px; overflow-wrap: anywhere; }
.conversation-header .caption { font-size: 10px; margin-top: 4px; }
.conversation-scroll { height: 480px; overflow-y: auto; overscroll-behavior: contain; }
.bubble-list { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: oklch(.984 .004 200); }
.date-separator { text-align: center; padding: 9px 0; font-size: 10px; color: var(--muted); flex-shrink: 0; }
.message-bubble { max-width: 85%; padding: 12px 14px 10px; border: 1px solid var(--line); border-radius: 11px 11px 11px 3px; align-self: flex-start; background: var(--surface); flex-shrink: 0; min-width: 100px; }
.message-bubble.outgoing { align-self: flex-end; color: var(--ink); background: var(--primary-soft); border-color: oklch(.87 .025 200); border-radius: 11px 11px 3px 11px; }
.message-bubble.unknown { align-self: center; border-style: dashed; border-radius: 9px; }
.bubble-author { display: flex; align-items: center; gap: 5px; color: var(--primary); font-size: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.bubble-author strong { font-weight: 650; }
.bubble-author>span { color: var(--muted); font-size: 9px; margin-left: 3px; }
.bubble-body { font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-time { display: block; font-size: 9px; margin-top: 8px; color: var(--muted); }
.pagination { display: flex; align-items: center; justify-content: space-between; min-height: 45px; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line); }
.pagination .caption { font-size: 10px; }
.pagination button { padding: 5px 9px; font-size: 10px; }
.archive-footnote { display: flex; align-items: center; gap: 7px; padding: 12px 20px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); font-size: 10px; }
.record-list { padding: 0 20px; }
.message-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.message-item:last-child { border-bottom: 0; }
.record-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.record-title svg { color: var(--primary); }
.record-title strong { font-size: 12px; overflow-wrap: anywhere; }
.message-item>.caption { font-size: 10px; margin: 8px 0 0; overflow-wrap: anywhere; }
.message-body { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow-y: auto; margin-top: 12px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 45px 24px; }
.empty>svg { color: var(--primary); }
.empty p { max-width: 48ch; font-size: 12px; color: var(--muted); }
.empty h3 { font-size: 16px; }
.archive-empty { min-height: 360px; width: 100%; margin: auto; }
.archive-empty button { font-size: 11px; padding: 7px 12px; }
.welcome-empty { min-height: 420px; }
.empty-copy { padding: 26px 0; color: var(--muted); font-size: 12px; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0,1fr); gap: 20px; align-items: start; }
.coverage { display: grid; gap: 13px; }
.coverage>strong { font-size: 13px; }
.permission-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.importer { padding-top: 20px; border-top: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; font-size: 12px; }
.importer>div { padding-top: 18px; }
.importer input { font-size: 11px; }
.import-example { padding: 12px; border-radius: 6px; background: var(--surface-soft); font-size: 10px; }
.package-list { display: flex; flex-direction: column; gap: 2px; max-height: 550px; overflow-y: auto; }
.package-row { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 0; }
.package-row code { font-size: 10px; }
.management-panel { margin-top: 20px; }
.management-panel button { font-size: 12px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 25px; margin-bottom: 20px; }
.metric { display: grid; gap: 7px; }
.metric strong { font-size: 20px; font-weight: 600; }
.section { padding: 22px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; margin-top: 20px; }
.chart { display: block; width: 100%; height: 150px; margin-top: 20px; }
.chart polyline { fill: none; stroke: var(--primary); stroke-width: 2; }
.chart text { font-size: 11px; fill: var(--muted); }
.table-wrap { width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 11px; }
th, td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-weight: 550; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.audit-panel h2 { margin-bottom: 15px; }
.audit-row { display: grid; grid-template-columns: 20px 1fr 1fr auto; align-items: center; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.audit-row>svg { color: var(--muted); }
.audit-row strong { font-weight: 550; }
.audit-row code, .audit-row small { font-size: 10px; }
.panel.pairing { display: grid; gap: 15px; padding: 24px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.pairing p { font-size: 12px; }
.login-page { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; background: var(--surface); }
.login-story { display: flex; flex-direction: column; justify-content: space-between; padding: 45px 55px; background: var(--sidebar); color: var(--sidebar-ink); }
.login-story .brand { padding: 0; }
.login-story h1 { font-size: 46px; line-height: 1.2; letter-spacing: -.035em; white-space: pre-line; margin-bottom: 22px; }
.login-story p { max-width: 36ch; color: var(--sidebar-muted); font-size: 15px; }
.login-features { display: grid; gap: 17px; font-size: 12px; color: var(--sidebar-muted); }
.login-features>div { display: flex; align-items: center; gap: 12px; }
.login-form-panel { align-self: center; max-width: 430px; width: 100%; padding: 45px 30px; margin: 0 auto; }
.login-form-panel h2 { font-size: 27px; margin: 24px 0 8px; }
.login-form-panel>p { font-size: 13px; }
.login-form-panel form { display: grid; gap: 18px; margin-top: 30px; }
.login-form-panel form .error:empty { display: none; }
.login-form-panel .primary { justify-content: space-between; }
.login-note { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid var(--line); margin-top: 30px; padding-top: 20px; color: var(--muted); }
@media (min-width: 1600px) { .inbox-layout.chat-layout { grid-template-columns: 170px 280px minmax(0, 1fr); } .conversation-scroll { height: 550px; } }
@media (max-width: 1200px) { .app-shell { grid-template-columns: 208px minmax(0,1fr); } .main-content { padding: 24px; } .topbar { padding: 0 24px; } .overview-grid { grid-template-columns: 1fr 1fr; } .connection-surface { padding: 22px; gap: 15px; } .phone-illustration { width: 64px; height: 120px; } .inbox-layout.chat-layout { grid-template-columns: 115px 180px minmax(0, 1fr); } .app-source { display: flex; flex-direction: column; gap: 5px; } .app-source strong { max-width: 100%; } .thread .contact-avatar { display: none; } .message-bubble { max-width: 95%; } .workspace-toolbar, .workspace-filters { padding-left: 16px; padding-right: 16px; } .summary-stat { padding: 0 12px; } }
@media (max-width: 1000px) { .overview-grid { grid-template-columns: 1fr; } .archive-summary { grid-template-columns: repeat(4,minmax(0,1fr)); } .privacy-surface { gap: 10px; } .settings-layout { grid-template-columns: 1fr; } .source-row { grid-template-columns: 115px minmax(0,1fr) 35px; } .page-heading { align-items: flex-start; } .page-heading>.actions { flex-shrink: 0; max-width: 150px; justify-content: flex-end; } .page-heading>.actions button { width: 100%; } .device-strip { flex-wrap: wrap; } .summary-stat { grid-template-columns: 1fr; } .summary-stat>svg { grid-row: auto; } .topbar-search { font-size: 0; } .topbar-search svg { width: 19px; height: 19px; } .audit-row { grid-template-columns: 20px 1fr auto; } .audit-row code { display: none; } }
@media (max-width: 800px) { .app-shell { display: block; } .sidebar { display: none; position: fixed; width: 232px; left: 0; top: 60px; height: calc(100dvh - 60px); padding-top: 18px; } .navigation-open .sidebar { display: flex; } .sidebar>.brand { display: none; } .workspace-switcher { margin-top: 0; } .menu-toggle { display: flex; } .topbar { height: 60px; padding: 0 16px; justify-content: flex-start; gap: 12px; } .topbar-tools { margin-left: auto; gap: 17px; } .main-content { padding: 22px 16px 36px; } .local-badge { font-size: 10px; } .breadcrumb { gap: 8px; font-size: 11px; } .page-heading { margin-bottom: 18px; gap: 12px; } h1 { font-size: 23px; } .page-heading>div>p { font-size: 11px; } .page-heading>.actions { max-width: 140px; } .inbox-layout.chat-layout { grid-template-columns: 110px 185px minmax(0,1fr); } .thread .contact-avatar { display: grid; } .login-story { padding: 35px 25px; } .login-story h1 { font-size: 37px; } }
@media (max-width: 650px) { .inbox-layout.chat-layout { grid-template-columns: 1fr; } .app-rail { display: flex; gap: 7px; overflow-x: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); } .rail-label { display: none; } .app-source { flex-direction: row; width: auto; flex-shrink: 0; padding: 7px 10px; margin: 0; } .app-source strong { max-width: 100px; } .app-source .app-avatar { width: 23px; height: 23px; } .threads { display: flex; gap: 6px; flex-wrap: nowrap; flex-basis: auto; overflow-x: auto; overflow-y: hidden; max-height: 110px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); } .thread-list-heading, .thread-app-heading { display: none; } .thread { width: 190px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 6px; padding: 10px; } .thread .contact-avatar { display: none; } .inbox-layout { flex-direction: column; } .workspace-filters { flex-wrap: wrap; gap: 8px; } .workspace-filters .search-field { flex-basis: 100%; } .workspace-filters select { width: 100%; } .workspace-toolbar { align-items: flex-start; } .workspace-toolbar>div { display: grid; gap: 3px; } .count-label { margin: 0; } .download-link { font-size: 10px; } .conversation-scroll { height: 420px; } .conversation-header { min-height: 70px; padding: 14px 16px; } .bubble-list { padding: 15px; } .message-bubble { max-width: 91%; } .archive-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 0; } .summary-stat { grid-template-columns: auto 1fr; } .summary-stat>svg { grid-row: span 2; } .summary-stat:nth-child(3) { border-left: 0; } .connection-surface { padding: 22px 18px; } .connection-copy h2 { font-size: 20px; } .privacy-surface { padding: 22px; } .surface { padding: 20px; } .device-strip { padding: 13px; } .device-strip>.actions { width: 100%; } .device-strip>.actions button { flex: 1; } .device-identity .badge { margin-left: 0; } .device-identity { flex-wrap: wrap; gap: 9px; } .metrics { grid-template-columns: 1fr 1fr; } .metric strong { font-size: 16px; } .form-grid { grid-template-columns: 1fr; } .section { padding: 18px; } .audit-row { grid-template-columns: 18px 1fr; gap: 10px; } .audit-row small { grid-column: 2; } .login-page { grid-template-columns: 1fr; } .login-story { padding: 28px; gap: 32px; } .login-story h1 { font-size: 30px; white-space: normal; margin-bottom: 12px; } .login-story p { font-size: 13px; } .login-features { display: none; } .login-form-panel { padding: 30px; } }
@media (max-width: 380px) { .local-badge { font-size: 0; } .page-heading { flex-direction: column; } .page-heading>.actions { max-width: none; width: 100%; } .page-heading>.actions button { width: auto; flex: 1; } .phone-illustration { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 650px) {
  .page-heading { flex-direction: column; align-items: stretch; }
  .page-heading>.actions { max-width: none; width: 100%; }
  .page-heading>.actions button { width: auto; flex: 1; }
}
.bubble-body { font-size: 13px; }
.bubble-time { font-size: 10px; }
.bubble-author { font-size: 11px; }
 .call-introduction { display: flex; align-items: flex-start; gap: 18px; }
 .call-introduction > div { flex: 1; }
 .call-introduction h2 { margin-top: 0; }
 .vault-panel { margin-bottom: 24px; }
 .vault-form { max-width: 480px; }
 .call-recording { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
 .recording-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
 .recording-identity > div { min-width: 0; overflow-wrap: anywhere; }
 .recording-player { width: 300px; max-width: 100%; flex: 0 1 300px; }
 .recording-player audio { display: block; width: 100%; }
 @media (max-width: 700px) { .call-introduction { flex-wrap: wrap; } .recording-player { width: 100%; } }