/* David Charles Leads. Apple-style system UI. */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f9f9fb;
  --fill: rgba(120, 120, 128, 0.12);
  --fill-2: rgba(120, 120, 128, 0.07);
  --text: #1d1d1f;
  --text-2: #56565b;
  --text-3: #6e6e73;
  --sep: rgba(60, 60, 67, 0.13);
  --blue: #0071e3;
  --blue-fill: #0071e3;
  --blue-tint: rgba(0, 113, 227, 0.1);
  --green: #34c759;
  --green-text: #1d7a35;
  --red: #ff3b30;
  --red-text: #d70015;
  --orange: #ff9500;
  --indigo: #5856d6;
  --teal: #30b0c7;
  --pink: #ff2d55;
  --sidebar: rgba(242, 242, 245, 0.78);
  --bar: rgba(245, 245, 247, 0.72);
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 6px 22px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.18);
  --r: 14px;
  --r-lg: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #232325;
    --fill: rgba(120, 120, 128, 0.24);
    --fill-2: rgba(120, 120, 128, 0.14);
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #8e8e93;
    --sep: rgba(84, 84, 88, 0.55);
    --blue: #0a84ff;
    --blue-fill: #0071e3;
    --blue-tint: rgba(10, 132, 255, 0.18);
    --green: #30d158;
    --green-text: #30d158;
    --red: #ff453a;
    --red-text: #ff6961;
    --orange: #ff9f0a;
    --indigo: #5e5ce6;
    --teal: #40c8e0;
    --pink: #ff375f;
    --sidebar: rgba(28, 28, 30, 0.78);
    --bar: rgba(0, 0, 0, 0.7);
    --shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 var(--font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
input, textarea { font: inherit; color: inherit; }
a { color: var(--blue); text-decoration: none; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 16px; height: 16px; }
.ic.lg { width: 24px; height: 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boot */
.boot { position: fixed; inset: 0; display: grid; place-items: center; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--fill); border-top-color: var(--text-2); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Logo */
.logo-light, .logo-dark { display: block; height: auto; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .logo-light { display: none; } .logo-dark { display: block; } }

/* Sign in */
.login { min-height: 100%; display: grid; place-items: center; padding: 32px 16px; }
.login-card { width: 100%; max-width: 380px; text-align: center; }
.login-card .logo-light, .login-card .logo-dark { width: 168px; margin: 0 auto 32px; }
.login-card h1 { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.login-card .lead-in { color: var(--text-2); margin: 0 0 28px; font-size: 15px; }
.field-group { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.field-group label { display: block; position: relative; }
.field-group label + label { border-top: 1px solid var(--sep); }
.field-group span { position: absolute; left: 16px; top: 9px; font-size: 12px; color: var(--text-3); pointer-events: none; }
.field-group input { width: 100%; border: 0; outline: 0; background: transparent; padding: 27px 16px 10px; font-size: 16px; }
.field-group label:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.btn-primary { width: 100%; margin-top: 18px; border: 0; border-radius: 12px; padding: 13px 18px; background: var(--blue-fill); color: #fff; font-weight: 600; font-size: 16px; cursor: pointer; transition: transform 0.15s, opacity 0.2s; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.login-error { min-height: 22px; margin: 14px 0 0; color: var(--red-text); font-size: 14px; }
.login-note { margin-top: 28px; color: var(--text-3); font-size: 13px; }
.pill-demo { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 6px; background: rgba(255, 149, 0, 0.16); color: #b25e00; font-size: 12px; font-weight: 600; }
@media (prefers-color-scheme: dark) { .pill-demo { color: #ffb340; } }
.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* App shell */
.app { display: grid; grid-template-columns: 252px 1fr; min-height: 100%; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--sidebar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--sep); padding: 22px 12px 16px; display: flex; flex-direction: column; gap: 4px;
}
.sidebar .brand { padding: 4px 10px 22px; }
.sidebar .brand img { width: 138px; }
.sidebar .brand small { display: block; margin-top: 10px; color: var(--text-3); font-size: 12px; font-weight: 500; }
.nav-title { margin: 14px 10px 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: left;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--text);
}
.nav-item:hover { background: var(--fill-2); }
.nav-item.active { background: var(--fill); font-weight: 600; }
.nav-item .count { margin-left: auto; color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.nav-item .ic { color: var(--text-2); }
.nav-item.active .ic { color: var(--blue); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin: 0 5px; }
.dot.red { background: var(--red); }
.dot.green { background: var(--green); }
.sidebar .spacer { flex: 1; }
.me { display: flex; align-items: center; gap: 10px; padding: 12px 10px 4px; border-top: 1px solid var(--sep); margin-top: 12px; }
.me .avatar { width: 32px; height: 32px; font-size: 12px; }
.me .who { min-width: 0; flex: 1; }
.me .who b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .who span { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--fill-2); color: var(--text); }

.main { min-width: 0; padding: 0 32px 64px; }
.toolbar {
  position: sticky; top: 0; z-index: 5; margin: 0 -32px; padding: 22px 32px 14px;
  background: var(--bar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.toolbar .titles { flex: 1; min-width: 200px; }
.toolbar h1 { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
.toolbar .sub { margin-top: 4px; color: var(--text-2); font-size: 13px; }
.search { display: flex; align-items: center; gap: 8px; width: 260px; max-width: 100%; background: var(--fill); border-radius: 10px; padding: 0 10px; color: var(--text-2); }
.search input { border: 0; outline: 0; background: transparent; width: 100%; padding: 8px 0; font-size: 15px; color: var(--text); }
.search:focus-within { box-shadow: 0 0 0 2px var(--blue); }
.tool-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--fill); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--text); }
.tool-btn:hover { background: var(--fill); filter: brightness(0.96); }
.tool-btn.spin .ic { animation: spin 0.8s linear infinite; }
.tool-actions { display: flex; gap: 8px; }
.m-brand { display: none; margin-bottom: 10px; }
.m-brand img { width: 104px; }

/* Summary tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 10px 0 22px; }
.tile { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px 18px; display: flex; align-items: center; gap: 14px; min-width: 0; }
.tile .t-text { min-width: 0; }
.tile .t-label { font-size: 13px; color: var(--text-2); font-weight: 500; }
.tile .t-value { font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.tile .t-value.red { color: var(--red-text); }
.tile .t-value.green { color: var(--green-text); }
.tile .t-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; }
.ring { width: 44px; height: 44px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .track { stroke: var(--fill); }
.ring .bar { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset 0.8s var(--ease); }

/* Mobile filter bar */
.filters { display: none; gap: 8px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--surface); box-shadow: var(--shadow); border-radius: 999px; padding: 7px 13px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.chip-btn.active { background: var(--text); color: var(--bg); }

/* Lead list */
.list { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.list-head, .row {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr) minmax(0, 1fr) 96px 168px;
  padding: 0 20px;
}
.list-head { height: 40px; font-size: 12px; font-weight: 600; color: var(--text-3); border-bottom: 1px solid var(--sep); }
.row { min-height: 72px; padding-top: 12px; padding-bottom: 12px; cursor: pointer; position: relative; transition: background 0.15s; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 76px; right: 0; border-top: 1px solid var(--sep); }
.row:hover { background: var(--fill-2); }
.row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.who-cell { display: flex; align-items: center; gap: 14px; min-width: 0; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 15px; flex: none; letter-spacing: 0; }
.avatar.anon { background: var(--fill) !important; color: var(--text-2); }
.who-cell .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.who-cell .meta { color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-cell .text { min-width: 0; }
.badge-new { flex: none; font-size: 11px; font-weight: 700; color: #0058c7; background: var(--blue-tint); border-radius: 6px; padding: 1px 6px; letter-spacing: 0.02em; }
.badge-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none; }
.prop-cell { min-width: 0; }
.prop-cell .loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.prop-cell .need { color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muted { color: var(--text-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip .ic { width: 15px; height: 15px; }
.src-google_search { color: #0b57d0; background: rgba(11, 87, 208, 0.1); }
.src-google_display { color: #c5221f; background: rgba(234, 67, 53, 0.11); }
.src-meta { color: #4f46e5; background: rgba(88, 86, 214, 0.12); }
.src-linkedin { color: #0a66c2; background: rgba(10, 102, 194, 0.1); }
.src-microsoft { color: #006a80; background: rgba(48, 176, 199, 0.13); }
.src-letter { color: #7a4a00; background: rgba(163, 95, 0, 0.12); }
.src-email { color: #8f4a00; background: rgba(255, 149, 0, 0.14); }
.src-whatsapp { color: #1a7f37; background: rgba(52, 199, 89, 0.14); }
.src-other, .src-direct { color: var(--text-2); background: var(--fill); }
@media (prefers-color-scheme: dark) {
  .src-google_search { color: #8ab4f8; }
  .src-google_display { color: #f28b82; }
  .src-meta { color: #a5a3ff; }
  .src-linkedin { color: #70b5f9; }
  .src-microsoft { color: #6fd6ea; }
  .src-email { color: #ffb340; }
  .src-whatsapp { color: #4cd964; }
}
.time-cell { color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.contact-cell { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.state-label { font-size: 13px; font-weight: 600; min-width: 92px; text-align: right; transition: color 0.25s; }
.state-label.on { color: var(--green-text); }
.state-label.off { color: var(--red-text); }

/* iOS switch: red when off, green when on */
.switch {
  position: relative; width: 51px; height: 31px; flex: none; border: 0; padding: 0; border-radius: 999px; cursor: pointer;
  background: var(--red); transition: background-color 0.25s ease;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 999px; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.32s cubic-bezier(0.3, 1.4, 0.55, 1), width 0.2s ease;
}
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch:active::after { width: 33px; }
.switch[aria-checked="true"]:active::after { transform: translateX(14px); }
.switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.switch[aria-busy="true"] { opacity: 0.75; }

/* Empty and info states */
.empty { padding: 64px 24px; text-align: center; color: var(--text-2); }
.empty .ic { width: 44px; height: 44px; color: var(--text-3); stroke-width: 1.4; margin-bottom: 12px; }
.empty h3 { margin: 0 0 6px; color: var(--text); font-size: 18px; font-weight: 600; }
.empty p { margin: 0 auto; max-width: 380px; font-size: 14px; }

/* Detail sheet */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity 0.3s var(--ease); }
.scrim.open { opacity: 1; }
.sheet {
  position: fixed; z-index: 21; top: 12px; right: 12px; bottom: 12px; width: 460px; max-width: calc(100% - 24px);
  background: var(--bg); border-radius: 22px; box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(calc(100% + 24px)); transition: transform 0.42s var(--ease);
}
.sheet.open { transform: none; }
.sheet-inner { padding: 18px 20px 32px; }
.sheet-top { display: flex; justify-content: flex-end; }
.close { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--fill); color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.close .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.sheet-head { text-align: center; padding: 0 0 18px; }
.sheet-head .avatar { width: 76px; height: 76px; font-size: 28px; margin: 0 auto 12px; }
.sheet-head h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.sheet-head p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.action { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 9px; border-radius: 12px; background: var(--surface); color: var(--blue); font-size: 12px; font-weight: 500; border: 0; cursor: pointer; box-shadow: var(--shadow); }
.action .ic { width: 22px; height: 22px; }
.action[aria-disabled="true"] { color: var(--text-3); pointer-events: none; }
.group { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden; }
.group-title { margin: 0 4px 7px 16px; font-size: 13px; color: var(--text-2); font-weight: 500; }
.g-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 48px; position: relative; }
.g-row + .g-row::before { content: ""; position: absolute; top: 0; left: 48px; right: 0; border-top: 1px solid var(--sep); }
.g-row.no-icon + .g-row::before, .g-row.no-icon::before { left: 16px; }
.g-row .ic { color: var(--text-3); }
.g-row .k { color: var(--text-2); font-size: 14px; flex: none; width: 112px; }
.g-row .v { flex: 1; min-width: 0; text-align: right; font-size: 15px; word-break: break-word; }
.contact-row { justify-content: space-between; }
.contact-row b { font-size: 16px; font-weight: 600; display: block; }
.contact-row small { color: var(--text-2); font-size: 13px; }
.stages { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px; }
.stage { border: 0; border-radius: 999px; padding: 7px 12px; background: var(--fill-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.stage.active { background: var(--blue-fill); color: #fff; }
.notes { width: 100%; min-height: 96px; border: 0; outline: 0; resize: vertical; background: transparent; padding: 14px 16px; font-size: 15px; line-height: 1.45; display: block; }
.notes-meta { padding: 0 16px 10px; color: var(--text-3); font-size: 12px; min-height: 22px; }
.thread { padding: 14px 14px 6px; }
.thread + .thread { border-top: 1px solid var(--sep); }
.thread-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 10px; font-size: 13px; color: var(--text-2); }
.thread-head a { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.bubble { max-width: 86%; padding: 9px 13px; border-radius: 18px; margin: 0 0 6px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.bubble.lead { background: var(--fill); border-bottom-left-radius: 6px; }
.bubble.team, .bubble.bot { margin-left: auto; background: var(--blue-fill); color: #fff; border-bottom-right-radius: 6px; }
.bubble.bot { background: var(--fill-2); color: var(--text-2); }
.bubble-meta { font-size: 11px; color: var(--text-3); margin: -2px 4px 10px; }
.bubble-meta.right { text-align: right; }
.skeleton { height: 14px; border-radius: 7px; background: var(--fill-2); margin: 10px 16px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* Toast */
.toast {
  position: fixed; left: 16px; right: 16px; width: fit-content; margin: 0 auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40; transform: translateY(20px); opacity: 0; pointer-events: none;
  background: rgba(30, 30, 32, 0.92); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-lg); transition: opacity 0.25s, transform 0.35s var(--ease);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toast .tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.toast.err .tdot { background: var(--red); }

.foot { margin-top: 22px; color: var(--text-3); font-size: 12px; text-align: center; }

/* Tablet */
@media (max-width: 1180px) {
  .list-head, .row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) 156px; }
  .list-head .col-time, .row .time-cell { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 0 16px 48px; }
  .toolbar { position: static; margin: 0 -16px; padding: 16px 16px 12px; }
  .toolbar { align-items: flex-end; gap: 12px; }
  .toolbar h1 { font-size: 30px; }
  .toolbar .titles { min-width: 0; }
  .m-brand { display: block; }
  .search { width: 100%; order: 3; }
  .tool-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
  .tool-btn span { display: none; }
  .filters { display: flex; }
  .tiles { gap: 10px; margin: 6px 0 14px; }
  .tile { padding: 13px 14px; gap: 10px; }
  .tile .t-value { font-size: 26px; }
  .tile .t-icon, .ring { width: 34px; height: 34px; }
  .list-head { display: none; }
  .row { grid-template-columns: 1fr auto; grid-template-areas: "who toggle" "prop prop" "src src"; gap: 8px 12px; padding: 14px 16px; }
  .row .who-cell { grid-area: who; }
  .row .prop-cell { grid-area: prop; padding-left: 56px; }
  .row .src-cell { grid-area: src; padding-left: 56px; }
  .row .contact-cell { grid-area: toggle; }
  .row .state-label { display: none; }
  .row + .row::before { left: 72px; }
  .sheet { top: calc(env(safe-area-inset-top, 0px) + 40px); left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: auto; border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .sheet.open { transform: none; }
  .sheet-inner { padding: 12px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
  .g-row .k { width: 92px; }
}
@media (min-width: 861px) { .mobile-me { display: none; } .sheet.open ~ .toast { right: 496px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .spinner, .tool-btn.spin .ic, .skeleton, .shake { animation: none !important; }
}

/* Review fixes */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.notes:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
html.sheet-open, html.sheet-open body { overflow: hidden; }
.scrim { touch-action: none; }
button, a, .row { -webkit-tap-highlight-color: transparent; }
.who-cell .name .nm, .chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-unread { flex: none; }
.badge-again { flex: none; font-size: 11px; font-weight: 700; color: #8f4a00; background: rgba(255, 149, 0, 0.18); border-radius: 6px; padding: 1px 6px; }
.list-head .col-contacted { text-align: right; }
.row.leaving { opacity: 0.35; transition: opacity 0.4s ease 0.9s; }
#viewSub.warn { color: var(--red-text); }
.retry { margin-top: 14px; }
.toast-btn { border: 0; background: transparent; color: #64d2ff; font-weight: 600; font-size: 14px; padding: 4px 4px 4px 10px; cursor: pointer; }
.note-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 12px 16px; }
.note-bar .tool-btn:disabled { opacity: 0.45; cursor: default; }
.note { padding: 12px 16px; border-top: 1px solid var(--sep); }
.note p { margin: 0 0 4px; white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.note span { color: var(--text-3); font-size: 12px; }
.switch::before { content: ""; position: absolute; inset: -7px -4px; }
@media (hover: none) { .nav-item:hover, .icon-btn:hover, .tool-btn:hover { background: inherit; filter: none; } .row:hover { background: transparent; } }
@media (any-pointer: coarse) {
  .search input, .notes { font-size: 16px; }
  .close { width: 44px; height: 44px; }
  .stage { min-height: 44px; padding: 10px 14px; }
  .chip-btn { min-height: 44px; }
  .tool-btn { min-height: 44px; min-width: 44px; }
  .search { min-height: 44px; }
}
@media (min-width: 861px) and (max-width: 1040px) {
  .list-head, .row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) 72px; }
  .row .state-label { display: none; }
}
@media (forced-colors: active) {
  .switch { border: 2px solid ButtonText; background: Canvas; forced-color-adjust: none; }
  .switch::after { background: ButtonText; box-shadow: none; }
  .switch[aria-checked="true"] { background: Highlight; }
}
@media (prefers-color-scheme: dark) {
  .sheet { background: #1c1c1e; }
  .sheet .group, .sheet .action { background: #2c2c2e; }
  .scrim { background: rgba(0, 0, 0, 0.5); }
  .toast { background: rgba(58, 58, 60, 0.95); }
  .badge-new { color: #64b5ff; }
  .badge-again, .src-letter { color: #ffb340; }
}