:root {
  font:
    14px/1.5 ui-sans-serif,
    system-ui,
    sans-serif;
  color: #25332f;
  background: #f6f8f7;
  --line: #e4e9e6;
  --green: #17765b;
  --muted: #79857f;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  padding-left: 216px;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font-weight: 600;
}
button:hover {
  background: #eaf1eb;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
:focus-visible {
  outline: 3px solid #6aaa95;
  outline-offset: 3px;
}
input,
select,
textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid #b9c9be;
  border-radius: 7px;
  padding: 6px 9px;
  background: white;
}
input[type="checkbox"] {
  width: 20px;
  min-height: 20px;
  vertical-align: middle;
}
label {
  display: block;
  font-weight: 600;
  margin: 8px 0 3px;
}
h1 {
  font-size: 22px;
  letter-spacing: -0.4px;
  margin: 0;
}
h2 {
  font-size: 16px;
  margin: 0 0 6px;
}
h2.section {
  margin-top: 16px;
}
h3 {
  font-size: 14px;
}
.muted,
small {
  color: var(--muted);
}
p {
  overflow-wrap: anywhere;
  margin: 6px 0;
}
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.app-sidebar { position:fixed; inset:0 auto 0 0; width:216px; padding:32px 18px 24px; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:20; }
.brand { display:flex; align-items:center; gap:10px; padding:0 10px; font-size:17px; font-weight:750; letter-spacing:-.4px; }
.brand small { display:block; font-size:11px; font-weight:400; letter-spacing:0; margin-top:2px; }
.logo { display:grid; place-items:center; width:36px; height:36px; background:var(--green); color:#fff; border-radius:12px; }
.logo svg { width:20px; height:20px; }
nav { display:flex; flex-direction:column; gap:6px; margin-top:42px; }
nav a { display:flex; gap:12px; align-items:center; min-height:46px; padding:10px 14px; border-radius:10px; color:#748079; font-weight:550; text-decoration:none; position:relative; }
nav a:hover { background:#f5f8f6; color:var(--green); }
nav [aria-current="page"] { color:var(--green); background:#eaf4ef; font-weight:650; }
nav [aria-current="page"]::before { content:""; position:absolute; left:-18px; top:13px; bottom:13px; width:3px; background:var(--green); border-radius:0 3px 3px 0; }
.nav-count { margin-left:auto; min-width:18px; padding:0 5px; border-radius:9px; background:#c62828; color:white; font-size:11px; line-height:18px; text-align:center; }
.sidebar-note { margin-top:auto; padding:18px 12px 0; border-top:1px solid var(--line); font-size:12px; color:#54665c; }
.sidebar-note small { display:block; padding-left:17px; margin-top:3px; font-size:11px; }
.line-dot { display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; margin-right:8px; }
.status { display:flex; align-items:center; gap:12px; min-height:68px; padding:12px 36px; border-bottom:1px solid var(--line); background:#fff; }
#connection { display:flex; align-items:center; gap:8px; background:none; padding:0; font-size:12px; color:#627168; }
#connection::before { content:""; width:6px; height:6px; background:var(--green); border-radius:50%; }
#connection.offline::before { background:#bd8535; }
.status-details { display:none; margin-right:auto; font-size:12px; }
.settings-page .status-details { display:block; }
.status #logout { margin-left:auto; border:0; min-height:32px; font-size:12px; color:var(--muted); }
.pill { background:#f0f4f1; padding:4px 8px; border-radius:6px; font-size:11px; white-space:nowrap; }
.status .offline { color:#9b671d; }
.role-banner {
  margin: 0;
  padding: 4px 10px;
  background: #fff0d7;
  color: #80511b;
}
main {
  max-width: 1120px;
  margin: auto;
  padding: 24px 36px 40px;
}
body.with-controls main {
  padding-bottom: 96px;
}
.login {
  max-width: 520px;
  margin: 16px auto;
}
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  min-width: 0;
}
main .card + .card {
  margin-top: 8px;
}
.content-grid > .card + .card {
  margin-top: 0;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.heading > button {
  min-height: 32px;
  font-size: 13px;
}
.eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 750;
  color: var(--green);
  margin: 0 0 2px;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0 10px;
  align-items: end;
}
.fields label {
  font-size: 12px;
  min-width: 0;
}
.fields input,
.fields select {
  margin-top: 3px;
}
.hint {
  font-size: 12px;
  margin: 0 0 4px 28px;
}
.actions {
  align-items: center;
  margin-top: 8px;
}
.row.actions > *,
.row.prompt-tabs > * {
  flex: 0 0 auto;
}
.row.actions > span {
  flex: 1 1 200px;
  font-size: 12px;
}
.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.row > * {
  flex: 1;
}
.wide {
  width: 100%;
  margin-top: 8px;
}
.primary {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
.primary:hover {
  background: #0d4839;
}
.danger {
  background: #b13d3a;
  border-color: #b13d3a;
  color: white;
}
.danger:hover {
  background: #92302e;
}
.call-hero {
  text-align: center;
  padding: 2px 0;
}
.avatar {
  margin: 0 auto 4px;
  background: #e6eee7;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.modes {
  display: flex;
  gap: 5px;
  margin: 10px 0;
}
.modes button {
  flex: 1;
  font-size: 12px;
  padding: 8px;
}
.selected {
  background: #e5eee7 !important;
  border-color: var(--green);
}
.route {
  background: #f0f5ef;
  border-left: 3px solid var(--green);
  padding: 7px 10px;
  margin: 8px 0;
}
.route.failure {
  background: #fff1d9;
  border-color: #b77b22;
}
.meter {
  margin-top: 8px;
}
.meter label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.meter span {
  font-weight: 400;
}
.bar {
  height: 8px;
  background: #e6ece7;
  border-radius: 5px;
  overflow: hidden;
}
.bar i {
  display: block;
  width: 0;
  height: 100%;
  background: #579782;
}
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.stats strong {
  display: block;
  font-size: 16px;
}
.stats small {
  font-size: 11px;
}
fieldset {
  border: 0;
  padding: 0;
  margin: 10px 0;
}
.keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.keys button {
  font-size: 18px;
  padding: 2px;
}
.empty {
  padding: 14px 0;
  text-align: center;
}
.history-item {
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  padding: 8px 10px;
}
.history-item small {
  display: block;
  margin-top: 2px;
}
audio {
  max-width: 100%;
  width: 100%;
  margin: 6px 0;
}
#remote {
  display: none;
}
.warning {
  padding: 8px 10px;
  background: #fff1d9;
  border-radius: 8px;
}
.track {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 10px;
}
footer { position:fixed; bottom:0; left:216px; right:0; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; z-index:15; background:white; border-top:1px solid var(--line); box-shadow:0 -4px 24px #1c3d2910; }
footer small {
  display: block;
}
footer .buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#notice {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  background: #203d32;
  color: white;
  border-radius: 9px;
  padding: 12px 20px;
  max-width: 90%;
  z-index: 30;
  pointer-events: none;
}
#notice:empty {
  display: none;
}
summary {
  cursor: pointer;
  min-height: 30px;
  padding-top: 6px;
}
#diagnostics {
  white-space: pre-line;
}
.audio-actions button {
  font-size: 12px;
}
button,
a,
select {
  touch-action: manipulation;
}
a {
  color: var(--green);
}
.waveform {
  width: 100%;
  height: 64px;
  background: #edf3ef;
  border-radius: 6px;
}
.track select {
  width: auto;
  min-width: 90px;
}
@media (max-width: 360px) {
  .modes {
    flex-wrap: wrap;
  }
  .modes button {
    flex: 1 1 90px;
  }
}

.ai-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px; }
.ai-options label { min-width:0; font-size:12px; margin:0; }
.ai-options select { margin-top:3px; }
.ai-caption { padding:6px 0; border-bottom:1px solid var(--line); }
.ai-caption strong { display:block; margin-bottom:2px; font-size:12px; }
.ai-caption p { margin:0; white-space:pre-wrap; }
#ai-providers-status p { margin:3px 0; }
@media(max-width:560px) { .ai-options { grid-template-columns:1fr 1fr; } .ai-options label:first-child { grid-column:1 / -1; } }
.sms-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(180px,2fr); gap:0 10px; padding:6px 8px; }
.sms-filters label { min-width:0; font-size:12px; margin:0; }
.sms-list { display:grid; gap:6px; margin-bottom:10px; }
.sms-card { overflow-wrap:anywhere; }
.sms-meta { display:block; font-size:12px; margin:2px 0; }
.sms-preview { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.sms-card[open] .sms-preview { display:none; }
.sms-body { white-space:pre-wrap; }
.sms-translation { border-left:3px solid #14604d; padding:8px 12px; background:#f1f7f4; border-radius:8px; }
.sms-new { box-shadow:inset 3px 0 0 #14604d; background:#f1f7f4; }
@media(max-width:700px) { .sms-filters { display:none; } }

/* Account-level AI billing; always below navigation after authentication. */
.ai-balances{margin:4px auto 0;max-width:1500px;padding:0 10px;font-size:13px}.ai-balances summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.ai-balance{border:1px solid var(--line);border-radius:20px;padding:5px 10px;font-size:.85rem;background:#f4f7f5}.ai-balance.warning{background:#fff0c2;color:#735200}.ai-balance.critical{background:#ffe4e4;color:#951c1c}.ai-balance.unknown{color:#666;background:#eee}.ai-balance-alert{color:#951c1c;padding:10px;border-radius:8px;margin-top:8px}.ai-balance-details{padding:12px 0}.billing-history{overflow:auto;max-height:420px}.billing-history table{width:100%;font-size:.85rem;border-collapse:collapse}.billing-history td,.billing-history th{padding:8px;text-align:left;border-bottom:1px solid #ddd;white-space:nowrap}.billing-history-note{font-size:.85rem;color:#555}
@media (max-width: 700px) { .ai-balances { padding:0 8px; margin-top:2px; } .ai-balance-details { padding:6px 0; } }

.relay-facts {display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px 10px;margin:8px 0;}
.relay-facts small {display:block;}
.relay-turns {max-height:460px;overflow:auto;margin-top:8px;}
.relay-turn {border-left:3px solid #999;padding:2px 8px;margin:4px 0;}
.relay-turn p {margin:2px 0;}
.relay-caller {border-color:#2b7cd3;}
.relay-secretary {border-color:#2f9e6b;}
.relay-owner {border-color:#c47d12;}
.relay-owner_assistant {border-color:#a9a9a9;}
.relay-directive {border-color:#8a63d2;opacity:.85;}
label.check {display:flex;gap:8px;align-items:center;margin:6px 0 2px;}
.prompt-tabs button[aria-pressed="true"] { background:#1f4d3a; color:white; border-color:#1f4d3a; }
.prompt-tabs { margin:8px 0 4px; }
.prompt-tabs button { min-height:32px; padding:4px 10px; }
.prompt-text { min-height:320px; font-size:16px; line-height:1.4; resize:vertical; }
.prompt-version { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:4px 0; border-top:1px solid var(--line); }
@media(max-width:560px) { .prompt-text { min-height:55vh; } .prompt-version { flex-wrap:wrap; } }
.prompt-view { white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:8px; padding:8px 10px; max-height:60vh; overflow:auto; cursor:text; line-height:1.4; }
.prompt-view:hover { background:#f6faf7; }

.sms-list .card { margin:0; padding:8px 12px; }
@media (max-width: 700px) { .sms-list { gap:4px; } .sms-list .card { padding:8px; } }
.sms-card summary { min-height:0; padding-top:0; }
.hint-small { font-size:12px; }
@media (max-width: 700px) { #history-detail.placeholder { display:none; } }

.login-link { margin-top: 8px; }
.login-link a { display:block; overflow-wrap:anywhere; font-weight:600; }
.who { font-size:12px; font-weight:600; color:#8a5a14; white-space:nowrap; }
.who.ours { color:var(--green); }
.relay-translation { margin-top:8px; }
.relay-translation:empty { display:none; }


/* The SMS toolbar shares the balance row; expanded billing stays full width. */
.sms-page .ai-balances { position:relative; padding-right:104px; margin-bottom:6px; }
.sms-page #sms-refresh { position:absolute; right:8px; top:0; min-height:32px; padding:4px 8px; border:0; background:transparent; font-size:12px; }
.sms-page #ai-balance-summary { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:8px; min-height:32px; }
.sms-page .ai-balance { border:0; padding:0; background:transparent; white-space:nowrap; font-size:12px; }
.sms-page .ai-balance.warning, .sms-page .ai-balance.critical { font-weight:700; }
#sms-status:empty { display:none; }
.sms-card-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 10px; }
.sms-sender { min-width:0; }
.sms-time { font-size:12px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.sms-number { font-weight:600; font-size:12px; }
.sms-device { font-size:11px; text-align:right; }
.sms-preview { margin-top:4px; }
.sms-meta { font-size:11px; }
.sms-meta > summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:32px; padding:6px 0; font-size:11px; color:inherit; list-style:none; }
.sms-meta > summary::-webkit-details-marker { display:none; }
.sms-meta > summary::after { content:"⌄"; font-size:16px; }
.sms-meta[open] > summary::after { content:"⌃"; }
@media(max-width:700px) { .sms-device { display:none; } .sms-card summary { list-style:none; } .sms-card summary::-webkit-details-marker { display:none; } }


.button-link { padding:8px 12px; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:inherit; }
.status-details { position:relative; margin-right:auto; }
.status-details[open] { display:flex; flex-wrap:wrap; gap:6px; }
.status-details summary { font-size:12px; cursor:pointer; }
.status-details[open] summary { width:100%; }
.manual-assistant { margin-top:12px; }
.archive-diagnostics { margin:12px 0; }
#relay-prompts-card { margin-top:12px; }
#prompt-view { max-height:280px; overflow:auto; }
#billing-settings .billing-history-note { margin-top:12px; }


/* The phone keeps the same controls in its card and in the floating call bar. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.phone-heading h1 { font-size:28px; letter-spacing:-.8px; }
.phone-heading p { margin-top:4px; font-size:13px; }
.phone-line-label { display:flex; align-items:center; color:var(--muted); font-size:12px; }
.phone-grid { display:grid; grid-template-columns:minmax(310px,410px) minmax(260px,1fr); gap:24px; align-items:start; }
.phone-grid .card + .card { margin-top:0; }
.phone-console { padding:24px 30px; border-radius:22px; box-shadow:0 8px 32px #1e483508; }
.dial-intro { text-align:center; margin-bottom:12px; }
.dial-intro h2 { font-size:17px; margin:0; font-weight:600; }
.dial-intro p { font-size:12px; margin:4px 0; }
#region { display:block; width:auto; max-width:100%; border:0; background:#f4f7f5; color:#5f7067; border-radius:8px; margin:0 auto 10px; font-size:12px; min-height:32px; }
.number-entry { display:flex; align-items:center; gap:0; border-bottom:1px solid var(--line); padding:6px 0; }
#number { width:100%; min-width:0; border:0; background:transparent; font-size:27px; font-weight:500; letter-spacing:-.6px; padding:8px 0; text-align:center; }
#number::placeholder { color:#a4afa8; font-weight:400; font-size:24px; }
#number:focus-visible { outline:0; }
.number-entry:focus-within { border-color:var(--green); box-shadow:0 1px var(--green); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; padding:8px; background:transparent; color:#7d8c83; flex-shrink:0; }
.number-hint { min-height:18px; margin:6px 0 8px; text-align:center; color:var(--muted); font-size:11px; }
#keypad { margin:12px auto 18px; max-width:310px; }
.keys { display:grid; grid-template-columns:repeat(3,1fr); gap:8px 12px; }
.keys button { border:0; border-radius:14px; background:#f5f8f6; min-height:54px; padding:7px; font-weight:450; font-size:27px; line-height:1.1; }
.keys button:hover { background:#e8f2ed; }
.keys button small { display:block; font-size:9px; letter-spacing:1.6px; min-height:12px; margin-top:3px; color:#8c9891; }
.call-button { display:flex; gap:10px; align-items:center; justify-content:center; min-height:50px; border-radius:12px; margin:0; font-size:15px; box-shadow:0 3px 8px #17765b15; }
.call-button:disabled { opacity:1; color:#a2aca6; background:#edf1ee; border-color:#edf1ee; box-shadow:none; }
#dial-availability { text-align:center; font-size:12px; margin:10px 0 0; }
#dial-availability:empty { display:none; }
.phone-side { display:flex; flex-direction:column; gap:20px; min-width:0; }
.phone-readiness { padding:24px; }
.readiness-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
.readiness-heading h2 { margin:4px 0 0; font-size:17px; font-weight:600; }
.ready-badge { font-size:11px; color:#93a098; }
.ready .ready-badge { color:var(--green); }
.phone-switch { position:relative; width:48px; height:44px; min-height:44px; border:0; padding:0; background:transparent; flex:0 0 auto; }
.phone-switch::before { content:""; position:absolute; left:2px; top:9px; width:44px; height:26px; border-radius:20px; background:#dfe6e1; transition:background .15s; }
.phone-switch span { position:absolute; left:5px; top:12px; display:block; width:20px; height:20px; background:white; border-radius:50%; box-shadow:0 1px 3px #263d3020; transition:transform .15s; }
.phone-switch[aria-checked="true"]::before { background:var(--green); }
.phone-switch[aria-checked="true"] span { transform:translateX(18px); }
.phone-switch:hover { background:transparent; }
.phone-switch:hover::before { background:#c9d6ce; }
.phone-switch[aria-checked="true"]:hover::before { background:#116248; }
.phone-switch[aria-busy="true"] { opacity:.5; }
#phone-ready-status { color:var(--muted); font-size:13px; line-height:1.65; margin:0 0 16px; }
.text-button { display:inline-flex; align-items:center; gap:7px; color:var(--green); border:0; padding:0; background:transparent; font-size:12px; min-height:32px; font-weight:550; }
.text-button:hover { background:transparent; color:#094d36; text-decoration:underline; }
.text-button svg { width:16px; height:16px; }
.recent-card { padding:20px 24px 8px; }
.recent-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.recent-heading h2 { font-size:16px; margin:0; font-weight:600; }
.recent-heading button { font-size:11px; white-space:nowrap; }
.recent-call { display:flex; align-items:center; gap:12px; text-align:left; width:100%; padding:14px 0; border:0; border-top:1px solid #eff2f0; border-radius:0; background:transparent; font-weight:400; }
.recent-call:hover { background:#f8faf9; }
.recent-call > svg { width:32px; height:32px; padding:8px; border-radius:10px; color:var(--green); background:#edf5f0; }
.recent-call.missed > svg { background:#fcf0ef; color:#c0645a; }
.recent-call .recent-person { min-width:0; flex:1; }
.recent-call strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; }
.recent-call small { display:block; font-size:11px; margin-top:2px; }
.recent-call time { color:var(--muted); font-size:11px; white-space:nowrap; }
.recent-empty { padding:22px 0 30px; text-align:center; color:#a0ada5; }
.recent-empty svg { width:28px; height:28px; margin-bottom:8px; }
.recent-empty p { font-size:12px; margin:0; }
.call-hero { text-align:center; padding:18px 0 24px; }
.avatar { width:68px; height:68px; margin:0 auto 20px; background:#eaf4ee; color:var(--green); }
.avatar svg { width:28px; height:28px; }
.call-hero h2 { color:var(--muted); font-weight:450; font-size:13px; margin-bottom:8px; }
#caller { font-size:25px; letter-spacing:-.7px; font-weight:550; line-height:1.3; }
#caller-name { font-size:13px; }
#caller-name:empty { display:none; }
#duration { display:block; font-size:13px; margin-top:12px; font-variant-numeric:tabular-nums; }
.pickup-window { padding:14px 16px; border-radius:12px; background:#f0f7f3; text-align:center; font-size:12px; color:var(--green); margin-bottom:22px; }
progress { width:100%; height:6px; border:0; border-radius:6px; overflow:hidden; accent-color:var(--green); background:#dbe8df; }
progress::-webkit-progress-bar { background:#dbe8df; border-radius:6px; }
progress::-webkit-progress-value { background:var(--green); border-radius:6px; }
progress::-moz-progress-bar { background:var(--green); border-radius:6px; }
#phone-controls #controls { position:static; padding:0; border:0; box-shadow:none; display:block; background:none; }
#phone-controls #controls > div:first-child { display:none; }
#phone-controls .buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#phone-controls .buttons button { min-height:46px; border-radius:12px; font-size:12px; }
#phone-controls #answer-listen { grid-column:1/-1; border:0; font-size:11px; color:var(--muted); min-height:32px; }
#phone-controls #hangup { grid-column:1/-1; margin-top:6px; }
#phone-controls:has(#answer:not([hidden])) #hangup { grid-column:auto; grid-row:1; margin:0; background:#faecea; border:0; color:#b25d54; }
#phone-controls #mute[aria-pressed="true"], #show-keypad[aria-pressed="true"] { color:var(--green); background:#eaf4ee; border-color:#cfdfd5; }
#call-extras { margin-top:24px; border-top:1px solid var(--line); padding-top:16px; }
.modes { border-radius:10px; background:#f2f5f3; padding:4px; gap:0; margin:0 0 12px; }
.modes button { font-size:11px; font-weight:500; border:0; background:transparent; min-height:32px; padding:5px; }
.modes button.selected { background:white!important; color:var(--green); box-shadow:0 1px 4px #223e2e10; }
#ai-options > summary, .audio-diagnostics > summary { font-size:11px; color:var(--muted); }
#ai-state, #audio-state { font-size:12px; border:0; border-radius:8px; }
#ai-provider-hint { font-size:11px; }
.audio-actions { gap:8px; }
.audio-actions button { font-size:11px; }
.incoming-banner { display:grid; grid-template-columns:1fr auto; gap:10px 20px; position:sticky; top:12px; z-index:12; box-shadow:0 4px 24px #1639240a; align-items:center; padding:18px 24px; background:#edf7f1; border-color:#cadfcf; margin-bottom:20px; }
.incoming-banner strong { font-size:17px; }
.incoming-banner p { margin:4px 0; font-size:12px; }
.incoming-banner progress { grid-column:1/-1; grid-row:2; }
.incoming-banner .row { grid-column:2; grid-row:1; }
.incoming-banner button { font-size:12px; }
dialog { width:min(440px,calc(100% - 32px)); max-height:calc(100dvh - 48px); overflow:auto; border:1px solid var(--line); border-radius:20px; box-shadow:0 20px 100px #15322720; padding:24px; color:inherit; }
dialog::backdrop { background:#1b342943; backdrop-filter:blur(3px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dialog-heading h2 { margin:0; font-size:18px; }
.dialog-heading button { font-size:24px; }
dialog label { font-size:12px; margin:20px 0 6px; }
dialog .muted { font-size:12px; line-height:1.6; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.dialog-actions button { flex:1; font-size:11px; min-height:40px; }
.permission-status { color:var(--green); font-size:12px; margin-top:16px; }
#dial-policy { font-size:11px; }
.ai-balances { max-width:1120px; padding:0 36px; }
@media(max-width:1050px) {
  body { padding-left:184px; }
  .app-sidebar { width:184px; padding:28px 12px 20px; }
  .brand { font-size:15px; padding:0 4px; gap:8px; }
  .brand small { font-size:10px; }
  nav a { padding:10px; }
  nav [aria-current="page"]::before { left:-12px; }
  main { padding:28px 24px; }
  .phone-grid { gap:18px; grid-template-columns:minmax(280px,1fr) minmax(240px,.9fr); }
  .phone-console { padding:24px; }
  .phone-readiness, .recent-card { padding:20px; }
  footer { left:184px; }
}
@media(max-width:800px) {
  body { padding-left:0; padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  .app-sidebar { position:static; width:auto; border-right:0; border-bottom:1px solid var(--line); padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left)); }
  .brand { font-size:16px; padding:0; }
  .brand small, .sidebar-note { display:none; }
  .logo { width:30px; height:30px; border-radius:10px; }
  nav { position:fixed; inset:auto 0 0; display:flex; flex-direction:row; justify-content:space-around; gap:0; margin:0; padding:8px 4px max(8px,env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); z-index:20; }
  nav a { flex:1; min-width:0; min-height:48px; flex-direction:column; gap:3px; padding:5px 2px; border-radius:10px; font-size:10px; }
  nav a svg { width:20px; height:20px; }
  nav [aria-current="page"]::before { display:none; }
  .nav-count { position:absolute; top:0; right:calc(50% - 24px); margin:0; }
  .status { position:absolute; top:9px; right:max(12px,env(safe-area-inset-right)); min-height:36px; padding:0; border:0; gap:6px; }
  .status #logout { padding:4px 8px; font-size:11px; }
  #connection { font-size:10px; }
  .settings-page .status-details { display:none; }
  /* One text inset per section; no page gutter around mobile cards. */
  main { padding:14px 0 20px; max-width:none; }
  .heading { padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left)); margin-bottom:12px; gap:12px; }
  .card { padding:14px max(12px,env(safe-area-inset-right)) 14px max(12px,env(safe-area-inset-left)); border-left:0; border-right:0; border-radius:0; box-shadow:none; }
  .card .heading { padding:0; }
  .phone-heading { margin-bottom:12px; }
  .phone-heading h1 { font-size:24px; }
  .phone-line-label { font-size:11px; }
  .phone-grid { grid-template-columns:minmax(0,1fr); gap:8px; }
  .phone-side { gap:8px; }
  .phone-console { grid-row:1; }
  .phone-side { display:contents; }
  .phone-readiness { grid-row:2; }
  .recent-card { grid-row:3; }
  .transcript { grid-row:4; }
  #phone-ready-status { margin-bottom:8px; font-size:12px; }
  .readiness-heading { margin-bottom:6px; }
  .readiness-heading h2 { font-size:15px; }
  .ready-badge { font-size:10px; }
  .dial-intro { margin-bottom:12px; }
  #keypad { margin:8px auto 12px; max-width:400px; }
  .keys button { min-height:54px; }
  .call-hero { padding:8px 0 16px; }
  .avatar { width:56px; height:56px; margin-bottom:12px; }
  .pickup-window { padding:12px; margin-bottom:14px; }
  .recent-call { padding:10px 0; }
  .recent-empty { padding:12px 0; }
  .content-grid { grid-template-columns:minmax(0,1fr); gap:8px; margin-bottom:8px; }
  main .card + .card { margin-top:8px; }
  .phone-grid .card + .card { margin-top:0; }
  footer { left:0; bottom:calc(64px + max(8px,env(safe-area-inset-bottom))); padding:12px 16px; flex-direction:column; gap:8px; align-items:stretch; }
  footer > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  footer small { font-size:10px; }
  footer .buttons { justify-content:center; }
  footer button { font-size:11px; }
  body.with-controls main { padding-bottom:180px; }
  #notice { bottom:90px; padding:12px 16px; font-size:12px; }
  body.with-controls #notice { bottom:240px; }
  .incoming-banner { top:0; display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-bottom:8px; }
  .ai-balances { max-width:none; padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left)); }
  .sms-page main { padding-top:0; }
  .sms-list { gap:0; }
  .sms-list .card { margin:0; padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left)); border-top:0; }
  .sms-list .card + .card { margin-top:0; }
  #sms-status { padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left)); }
  dialog { width:calc(100% - 16px); padding:16px max(12px,env(safe-area-inset-right)) 16px max(12px,env(safe-area-inset-left)); border-radius:14px; }
  .login { margin:0 auto; }
}
@media(max-width:380px) {
  .brand { font-size:14px; }
  #number { font-size:23px; }
  #number::placeholder { font-size:21px; }
  .keys { gap:8px; }
  nav a { font-size:9px; }
  .modes button { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none!important; scroll-behavior:auto!important; } }

.number-picker { margin:12px 0; min-width:0; }
.quick-numbers { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.number-choice { display:block;text-align:left;min-width:0;min-height:48px;padding:8px 10px; }
.number-choice strong { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px; }
.number-choice small { display:block;font-size:11px;font-weight:400;margin-top:3px; }
#number-select { width:100%;min-width:0;min-height:44px;margin-top:8px;font-size:16px;text-overflow:ellipsis; }
.recent-row { display:flex;align-items:center;min-width:0;gap:4px; }
.recent-row .recent-call { flex:1;min-width:0;gap:8px; }
.recent-call small { overflow-wrap:anywhere; }
.recent-call time { font-size:inherit; }
.recent-dial { display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;padding:10px;color:var(--green);background:#edf5f0;border:0; }
.recent-dial svg { width:20px;height:20px; }
.recent-history { flex-shrink:0;min-width:44px;min-height:44px;padding:10px; }
.phone-heading #device { overflow-wrap:anywhere; }
@media(max-width:380px) { #number {font-size:24px;} .recent-row .recent-call > svg {display:none;} }
.browser-recordings pre, .browser-journal { white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;max-height:300px;overflow:auto; }