:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #203536; background: var(--page-base); -webkit-font-smoothing: antialiased; }
.historyCard { background: #fff; border: 1px solid #dce6df; border-radius: 20px; padding: 20px 22px; min-width: 0; }
.historyCard summary { cursor: pointer; font-size: 17px; font-weight: 700; color: #214c39; padding: 4px 0; }
#historyCount { color: #73847e; font-size: 13px; font-weight: 500; }
.historyHint { color: #73847e; font-size: 12px; line-height: 1.5; margin: 10px 0 18px; }
#historyEntries { list-style: none; padding: 0 0 0 9px; margin: 0; }
#historyEntries li { position: relative; border-left: 2px solid #dceae1; padding: 0 0 20px 19px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-line; }
#historyEntries li::before { content: ""; position: absolute; left: -5px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #71a58c; }
#historyEntries li:last-child { padding-bottom: 0; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--page-bg); min-height: 100vh; }
[hidden] { display: none !important; }
h1,h2,p { margin: 0; }
.app { display: grid; gap: 16px; max-width: 560px; margin: auto; padding: 26px 20px max(32px, env(safe-area-inset-bottom)); }
header { color: #fff; padding: 0 4px 7px; }
.workspaceTop { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }.workspaceTop .brand { text-decoration:none; color:#fff; margin-bottom:22px; }.workspaceTop .accountLink { margin-top:8px; white-space:nowrap; }
.accountLink { display: inline-block; color: #c8eddb; font-size: 13px; margin-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 750; letter-spacing: 1.8px; margin-bottom: 28px; }
.brandMark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #69938b; border-radius: 10px; font: italic 700 24px Georgia, serif; color: #c8eddb; }
.brandSub { color: #a4c5be; font-size: 10px; letter-spacing: 1.4px; }
.organizationLabel { display:inline-flex; align-items:center; width:max-content; margin:0; padding:4px 8px; border:1px solid rgba(202, 236, 220, .25); border-radius:999px; color:#c8eddb; background:rgba(3, 28, 25, .22); font-size:10px; font-weight:700; letter-spacing:.45px; line-height:1.1; }
.eyebrow { font-size: 10px; font-weight: 750; letter-spacing: 1.8px; color: #acd0c5; }
h1 { font-size: 32px; font-weight: 650; letter-spacing: -1px; margin: 5px 0 8px; }
#status { font-size: 12px; line-height: 1.5; color: #c2d9d2; min-height: 18px; overflow-wrap: anywhere; }
.leadCard { padding: 25px 23px; background: #fff; border: 1px solid #e1e9e5; border-radius: 22px; box-shadow: 0 8px 28px #173d3710; min-width: 0; }
.leadCard.empty { padding: 40px 25px; text-align: center; color: #687e76; font-size: 15px; line-height: 1.6; }
.requestBadge { display: inline-block; max-width: 100%; padding: 7px 11px; border-radius: 7px; background: #e9f3ed; color: #316249; font-size: 11px; font-weight: 750; letter-spacing: .3px; margin-bottom: 13px; overflow-wrap: anywhere; }
.quietHoursFlag { display:grid; gap:3px; margin:0 0 14px; padding:10px 12px; border:1px solid #d77845; border-left:5px solid #be4f26; border-radius:12px; background:#fff0e9; color:#853719; }.quietHoursFlag strong { font-size:12px; letter-spacing:.6px; }.quietHoursFlag span { font-size:13px; line-height:1.35; }
.leadCard h2 { color: #163c37; font-size: 27px; line-height: 1.2; letter-spacing: -.6px; font-weight: 700; margin-bottom: 22px; overflow-wrap: anywhere; }
.headsUp { display: grid; gap: 8px; margin: -8px 0 18px; }
.latestActivity { display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:2px 9px; margin:-4px 0 18px; padding:10px 12px; border-left:4px solid #7a8e84; border-radius:10px; background:#f2f5f3; color:#43554d; }
.latestActivity > span:first-child { font-size:10px; font-weight:800; letter-spacing:1px; color:#5e7167; }
.latestActivity strong { font-size:14px; line-height:1.25; color:#263b31; overflow-wrap:anywhere; }
.latestActivity > span:last-child { grid-column:2; font-size:12px; color:#61736a; }
.latestActivity.callback { border-left-color:#d49534; background:#fff7e7; }.latestActivity.danger { border-left-color:#b3412c; background:#fdf0ed; }
.headsUpPriority { gap: 6px; margin-top: -5px; padding: 8px; border: 1px solid #9fcdb8; border-radius: 13px; background: #f3faf6; }
.headsUpHeading { margin: 0 1px; color: #17684e; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.headsUpChip { display: grid; gap: 2px; padding: 10px 13px; border-radius: 12px; border: 1px solid #dce6df; border-left-width: 5px; background: #f6f8f7; min-width: 0; }
.headsUpLabel { font-size: 10px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; color: #5f716a; }
.headsUpTitle { font-size: 15px; line-height: 1.3; color: #1f3531; overflow-wrap: anywhere; }
.headsUpDetail { font-size: 13px; line-height: 1.35; color: #4f625b; overflow-wrap: anywhere; }
.headsUpChip.appointment { background: #e6f4ee; border-color: #9fd0b8; border-left-color: #17684e; }
.headsUpChip.appointment .headsUpLabel { color: #17684e; }
.headsUpChip.callback { background: #fff6e3; border-color: #f0d49a; border-left-color: #d49534; }
.headsUpChip.callback .headsUpLabel { color: #9a6515; }
.headsUpChip.danger { background: #fdecea; border-color: #f1c0b8; border-left-color: #b3412c; }
.headsUpChip.danger .headsUpLabel { color: #a13a27; }
.headsUpChip.muted { background: #fff; }
.headsUpChip.soon { box-shadow: 0 0 0 2px currentColor inset; }
.headsUpPriority .headsUpChip.soon { padding: 10px 12px; }.headsUpPriority .headsUpChip.soon .headsUpTitle { font-size: 16px; }
.headsUpChip.appointment.soon { color: #17684e; }
.headsUpChip.callback.soon { color: #d49534; }
.headsUpChip.soon .headsUpTitle { font-size: 16px; }
.detail { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid #edf1ee; line-height: 1.5; }
.detailLabel { color: #73847e; font-size: 12px; padding-top: 1px; }
.detailValue { color: #344b42; font-size: 14px; overflow-wrap: anywhere; }
.leadNotes { display:grid; gap:6px; margin:12px 0 0; padding:11px 13px; border:1px solid #d7e6dc; border-left:4px solid #71a58c; border-radius:11px; background:#f7fbf8; color:#344b42; }
.leadNotesHeading { color:#4a7461; font-size:10px; font-weight:800; letter-spacing:1px; }
.leadNotes p { font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.timingInsight { display:grid; gap:4px; margin:0 0 17px; padding:11px 13px; border:1px solid #b9d6c5; border-left:4px solid #17684e; border-radius:11px; background:#eff8f2; color:#315443; }
.timingInsight.learning { border-color:#dce6df; border-left-color:#91aaa0; background:#f8faf9; color:#61736b; }
.timingInsightLabel { color:#17684e; font-size:10px; font-weight:800; letter-spacing:1px; }
.timingInsight.learning .timingInsightLabel { color:#688077; }
.timingInsight p { font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.phoneList { display: grid; gap: 10px; margin-top: 23px; }
.callLink { display: flex; align-items: center; gap: 14px; padding: 16px 19px; min-height: 76px; border-radius: 14px; background: #17684e; color: white; text-decoration: none; box-shadow: 0 4px 10px #17684e15; touch-action: manipulation; }
.callIcon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: #ffffff18; font-size: 23px; flex-shrink: 0; }
.callText { display: grid; gap: 4px; min-width: 0; }
.callLabel { font-size: 11px; font-weight: 600; color: #d0eade; }
.callText strong { font-size: 20px; font-weight: 650; letter-spacing: .2px; overflow-wrap: anywhere; }
button { font: inherit; font-size: 14px; font-weight: 650; min-height: 54px; padding: 12px; border: 1px solid #d8e3dc; border-radius: 13px; background: white; color: #284f43; cursor: pointer; touch-action: manipulation; }
button:disabled { color: #7e8c85; background: #edf1ee; border-color: #e0e6e2; cursor: default; }
button:focus-visible,a:focus-visible,input:focus-visible { outline: 3px solid #d49534; outline-offset: 3px; }
button:not(:disabled):active,.callLink:active { transform: translateY(1px); filter: brightness(.94); }
.navControls { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; }
#nextLead:not(:disabled) { background: #dceae1; border-color: #c7dccf; color: #214c39; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 22px; background: var(--panel-bg); border: 1px solid #dce6df; border-radius: 20px; }
.appointmentPicker { display: grid; gap: 14px; padding: 22px; background: #fff; border: 1px solid #b9d6c5; border-radius: 20px; box-shadow: 0 8px 28px #173d3710; }
.appointmentPicker .resultHeading { margin: 0; }.appointmentPicker .eyebrow { color: #356d53; }.appointmentPicker h2 { color: #163c37; }.appointmentPicker p { color: #64776d; font-size: 13px; line-height: 1.45; margin-top: 6px; }
.appointmentDays { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }.appointmentDays button { min-height: 45px; white-space: nowrap; padding: 9px 13px; font-size: 12px; }.appointmentDays button.selected { background: #17684e; border-color: #17684e; color: #fff; }
.appointmentTimes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.appointmentTimes button { min-height: 49px; }
.resultHeading { grid-column: 1 / -1; margin-bottom: 5px; }
.resultHeading .eyebrow { color: #678373; }
.resultHeading h2 { font-size: 21px; letter-spacing: -.4px; margin-top: 5px; }
.actionFeedback { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(520px, calc(100% - 32px)); z-index: 10; padding: 14px 18px; border-radius: 14px; background: #163c37; color: #fff; font-size: 14px; line-height: 1.45; box-shadow: 0 10px 30px #0b1f1c40; }
.actionFeedback.loading { display:flex; align-items:center; gap:11px; }.actionFeedback.loading::before { content:""; width:17px; height:17px; flex:0 0 17px; border:2px solid #cce9db66; border-top-color:#fff; border-radius:50%; animation:companionSpin .72s linear infinite; }@keyframes companionSpin { to { transform:rotate(360deg); } }
.actionFeedback.error { background: #7a2e1d; }
.pendingCallNotice { display: grid; gap: 12px; padding: 18px 20px; background: #fff7e8; border: 1px solid #ecd3a4; border-radius: 18px; color: #5b4418; font-size: 14px; line-height: 1.5; }
.pendingCallNotice button { min-height: 44px; justify-self: start; padding: 8px 18px; }
#noAnswer:not(:disabled) { border-color: #a8c3b3; background: #fff; }
.bridgeSetup { display: grid; gap: 9px; padding: 22px; background: #fff; border: 1px solid #dce6df; border-radius: 18px; }
.bridgeSetup label { font-size: 12px; font-weight: 650; color: #52695e; }
.bridgeSetup input { width: 100%; min-height: 46px; border: 1px solid #ccdcd2; border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 16px; }
.bridgeSetup button { background: #17684e; color: #fff; }
.bridgeSetup p { font-size: 12px; line-height: 1.5; color: #6b7d73; }
@media (max-width: 360px) { .app { padding-left: 12px; padding-right: 12px; } .leadCard { padding: 21px 18px; } .callText strong { font-size: 18px; } }
.localTimeNote { color:#5f7a6d; font-size:12px; font-weight:600; white-space:nowrap; }
/* Backgrounds (Settings → Background). The default is the original look; the ids match backgrounds.js.
   --page-bg: page background, --page-base: color behind/after it, --page-ink: text placed directly on the page,
   --panel-bg: see-through panels. Every choice keeps the header dark (white header text) and cards white. */
:root, [data-bg-swatch="default"] { --page-bg: linear-gradient(#123b3a 0 275px, #eff3f1 275px); --page-base: #eff3f1; --page-ink: #547368; --panel-bg: #ffffffa6; }
html[data-bg], [data-bg-swatch] { --page-ink: #d3e6df; --panel-bg: #ffffffeb; }
html[data-bg="evergreen"], [data-bg-swatch="evergreen"] { --page-bg: #123b3a; --page-base: #123b3a; }
html[data-bg="midnight"], [data-bg-swatch="midnight"] { --page-bg: #111a2e; --page-base: #111a2e; }
html[data-bg="slate"], [data-bg-swatch="slate"] { --page-bg: #2a333d; --page-base: #2a333d; }
html[data-bg="forest"], [data-bg-swatch="forest"] { --page-bg: #1c3826; --page-base: #1c3826; }
html[data-bg="navy"], [data-bg-swatch="navy"] { --page-bg: #15294a; --page-base: #15294a; }
html[data-bg="plum"], [data-bg-swatch="plum"] { --page-bg: #3a2140; --page-base: #3a2140; }
html[data-bg="aurora"], [data-bg-swatch="aurora"] { --page-bg: linear-gradient(165deg, #0f3b3a 0%, #1a5a4b 45%, #27466f 100%); --page-base: #27466f; }
html[data-bg="ocean"], [data-bg-swatch="ocean"] { --page-bg: linear-gradient(180deg, #0b2545 0%, #133f5d 55%, #1a6272 100%); --page-base: #1a6272; }
html[data-bg="dusk"], [data-bg-swatch="dusk"] { --page-bg: linear-gradient(165deg, #161a33 0%, #372b58 60%, #553a68 100%); --page-base: #553a68; }
html[data-bg="sunset"], [data-bg-swatch="sunset"] { --page-bg: linear-gradient(165deg, #2c1a3c 0%, #672b45 55%, #8e4433 100%); --page-base: #8e4433; }
html[data-bg="sand"], [data-bg-swatch="sand"] { --page-bg: linear-gradient(165deg, #d6c09a 0%, #b99566 100%); --page-base: #b99566; --page-ink: #53432d; --panel-bg: #fff8eb; }
html[data-bg="linen"], [data-bg-swatch="linen"] { --page-bg: linear-gradient(165deg, #d8d0bb 0%, #a99978 100%); --page-base: #a99978; --page-ink: #4c463a; --panel-bg: #fffaf0; }
html[data-bg="clay"], [data-bg-swatch="clay"] { --page-bg: linear-gradient(165deg, #bd8e72 0%, #8e614c 100%); --page-base: #8e614c; --page-ink: #fff4e9; --panel-bg: #fff8f1; }

/* Home settings gear */
.homeTop { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.settingsButton { display:grid; place-items:center; width:38px; height:38px; min-height:38px; padding:0; flex:0 0 auto; text-decoration:none; border:1px solid #69938b; border-radius:11px; background:#ffffff12; color:#c8eddb; }
.settingsButton:not(:disabled):active { filter:none; background:#ffffff26; }

/* Display settings (settings-boot.js sets these on <html>) */
html[data-hide-heads-up] .headsUp, html[data-hide-dnk] .quietHoursFlag { display:none; }
html[data-text-size="large"] :is(.workspace,.calendarPage,.statsPage,.home) { --text-zoom:1.15; }html[data-text-size="xlarge"] :is(.workspace,.calendarPage,.statsPage,.home) { --text-zoom:1.3; }
.calendarPage { grid-template-columns:minmax(0, 1fr); }.calendarPage :is(.calCard,.calNotice) { zoom:var(--text-zoom, 1); }.statsPage :is(.statsSummary,.statsCard,.statsNote) { zoom:var(--text-zoom, 1); }
.workspace { grid-template-columns:minmax(0, 1fr); }.workspace .controls { grid-template-columns:repeat(2, minmax(0, 1fr)); }.workspace .controls button { overflow-wrap:break-word; hyphens:auto; }html[data-text-size] .workspace .controls { padding:16px 14px; }html[data-text-size] .workspace .controls button { padding:10px 6px; }
.workspace :is(.bridgeSetup,.leadCard,.navControls,.pendingCallNotice,.controls,.appointmentPicker,.historyCard) { zoom:var(--text-zoom, 1); }

/* Background swatches (Settings page) */
.bgGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:12px 10px; }
.bgOption { position:relative; display:grid; gap:6px; justify-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.bgOption input { position:absolute; opacity:0; pointer-events:none; }
.bgSwatch { position:relative; display:grid; align-content:end; gap:4px; width:100%; aspect-ratio:4 / 5; padding:9px 8px; border-radius:14px; background:var(--page-bg); border:1px solid #d5e0d9; box-shadow:0 0 0 0 transparent; transition:box-shadow .15s; overflow:hidden; }
[data-bg-swatch="default"].bgSwatch { background:linear-gradient(#123b3a 0 44%, #eff3f1 44%); }
.bgSwatch i { display:block; height:13px; border-radius:5px; background:#fff; box-shadow:0 1px 3px #0b1f1c26; }.bgSwatch i + i { width:62%; height:9px; background:#17684e; }
.bgName { color:#40584f; font-size:12px; font-weight:650; }
.bgOption input:checked + .bgSwatch { box-shadow:0 0 0 3px #fff, 0 0 0 5px #17684e; }
.bgOption input:checked + .bgSwatch::after { content:"✓"; position:absolute; top:6px; right:6px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#17684e; color:#fff; font-size:12px; font-weight:800; }
.bgOption input:checked ~ .bgName { color:#17684e; font-weight:800; }
.bgOption input:focus-visible + .bgSwatch { outline:3px solid #d49534; outline-offset:4px; }

/* Encouragement lines (encouragement-ui.js). Two lines of height are always
   reserved, so a new line never moves anything below it. */
.encLine { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.45em); margin: 6px 0 8px; color: #d8ece4; font-size: 14px; font-style: italic; line-height: 1.45; letter-spacing: .1px; text-shadow: 0 1px 2px #00000033; }
.encLine.encOnCard { margin: 9px 0 0; color: #3d6b57; text-shadow: none; }
.encFade { animation: encFadeIn .8s ease-out both; }
@keyframes encFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* After-result message: a soft toast at the top that never takes taps. */
.encToast { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); z-index: 60; width: min(calc(100vw - 32px), 420px); padding: 13px 18px; border: 1px solid #cfe5da; border-radius: 16px; background: #f4faf7; color: #1d4a3f; box-shadow: 0 10px 30px #0b1f1c40; font-size: 15px; line-height: 1.45; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, -8px); transition: opacity .5s ease, transform .5s ease; }
.encToast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .encFade { animation: none; } .encToast { transition: none; transform: translate(-50%, 0); } }

/* ---------- Calm layout (matches Home) ----------
   Shared by the Workspace, Calendar and Statistics (body.wsPage, .wsBand,
   .wsHeader, .wsBody, .calmCard). A band that fits the header (teal on Default,
   see-through elsewhere), the first card overlapping its bottom, soft cards. */
html:not([data-bg]) .wsPage { background: var(--page-base); }
.app.workspace, .app.calmApp { display: block; max-width: none; margin: 0; padding: 0; }
.wsBand { padding: 22px 20px 68px; color: #fff; background-color: #123b3a; background-image: radial-gradient(70% 90% at 12% 0%, #1f5d54 0%, #1f5d5400 70%), radial-gradient(60% 80% at 100% 100%, #0c2f2f 0%, #0c2f2f00 72%); background-size: 180% 180%; animation: calmDrift 50s ease-in-out infinite alternate; }
html[data-bg] .wsBand { background-color: transparent; background-image: radial-gradient(70% 90% at 12% 0%, #ffffff10 0%, #ffffff00 70%); }
@keyframes calmDrift { from { background-position: 0% 0%; } to { background-position: 100% 70%; } }
.wsHeader { max-width: 560px; margin: 0 auto; padding: 0 4px; }
.wsBody { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 560px; margin: -48px auto 0; padding: 0 20px max(32px, env(safe-area-inset-bottom)); }

/* Header: the logo goes back to Home (Calendar/Statistics also keep their small back link); quiet status */
.wsHeader .workspaceTop { align-items: center; min-height: 40px; margin-bottom: 22px; }
.wsHeader .workspaceTop .brand { margin: 0; min-width: 0; }
.wsHeader .organizationLabel { margin-left:auto; }
.wsHeader .eyebrow { color: #a9cfc2; font-size: 10.5px; font-weight: 650; letter-spacing: 1.5px; }
.wsHeader h1 { margin: 6px 0 8px; font-size: 28px; font-weight: 600; letter-spacing: -.4px; line-height: 1.15; }
.wsHeader .encLine { color: #d3e7df; font-size: 14.5px; margin: 0 0 8px; }
.wsStatus { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.wsStatus #connectionModeLabel { padding: 3px 9px; border-radius: 999px; background: #ffffff14; color: #b9d8cd; font-size: 9.5px; font-weight: 650; letter-spacing: 1px; }
.workspace #status, .wsHeader .statsStatus { min-height: 18px; color: #a9c8be; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.wsHeader .calmTop { flex-wrap: wrap; gap: 10px 12px; }
.wsHeader .backLink { display: inline-flex; align-items: center; min-height: 36px; margin: 0 0 0 auto; padding: 0 14px; border: 1px solid #ffffff24; border-radius: 999px; background: #ffffff12; color: #d3ebe1; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.wsHeader .backLink:active { background: #ffffff26; }
/* Calendar/Statistics: small buttons inside cards (Refresh, Today) are soft pills */
.calmCard button { border: 0; border-radius: 999px; background: #eef5f1; color: #245545; box-shadow: none; }
.calmCard button:disabled { background: #f2f5f3; color: #8a9791; }
.calmApp .eyebrow { font-weight: 650; letter-spacing: 1.5px; }

/* Cards */
.workspace :is(.leadCard, .bridgeSetup, .appointmentPicker, .historyCard), .calmCard, .statsSummary > div { border: 0; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px #0b1f1c0f, 0 14px 34px #0b1f1c17; }
.workspace .leadCard { padding: 22px 20px; }
.workspace .requestBadge { margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; background: #eef6f1; color: #3a6a54; font-weight: 650; letter-spacing: .2px; }
.workspace .leadCard h2 { margin-bottom: 18px; color: #173e38; font-size: 26px; font-weight: 650; letter-spacing: -.4px; }

/* DO NOT KNOCK: warm and clear, still the strongest thing on the card */
.workspace .quietHoursFlag { grid-template-columns: 34px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 2px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid #f0c6a6; border-radius: 16px; background: linear-gradient(135deg, #fff4eb, #ffe9dc); color: #8a3d17; box-shadow: 0 3px 10px #c2622a17; }
.workspace .quietHoursFlag::before { content: "!"; grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #d9713b; color: #fff; font-size: 18px; font-weight: 800; }
.workspace .quietHoursFlag strong { color: #9a4216; font-size: 12.5px; letter-spacing: 1px; }
.workspace .quietHoursFlag span { color: #7b4526; font-size: 13px; }
.workspace .appointmentAlert { display: grid; gap: 3px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid #ead7a8; border-radius: 16px; background: #fff8ec; color: #6d4a16; }
.workspace .appointmentAlert strong { font-size: 12.5px; letter-spacing: 1px; }
.workspace .appointmentAlert span { font-size: 14px; line-height: 1.35; }
.workspace .appointmentAlert.starting { border-color: #f0b2a8; background: #fff1ee; color: #8a3328; }
.workspace .appointmentReminder { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; background: #fff8ee; border: 1px solid #f0d7b0; color: #6d4a16; box-shadow: 0 8px 22px #8a5a1414; }
.workspace .appointmentReminder[hidden] { display: none; }
.workspace #dismissAppointmentReminder { justify-self: end; padding: 8px 12px; }
.workspace .appointmentAlert button { margin-top: 8px; padding: 8px 12px; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.workspace .appointmentReminder p { margin: 0; font-size: 15px; line-height: 1.4; }
.workspace .appointmentReminder button { border: 0; border-radius: 14px; background: #8a5a14; color: #fff; }
.workspace .appointmentReminder[data-kind="starting"] { background: #fff1ee; border-color: #f0b2a8; color: #8a3328; }
.workspace .appointmentReminder[data-kind="starting"] button { background: #a33b2c; color: #fff; }

/* Heads-up chips: soft tints, one consistent shape */
.workspace .headsUp { gap: 8px; margin: -6px 0 18px; }
.workspace .latestActivity { margin:-4px 0 18px; background:#f3f6f4; }.workspace .latestActivity.callback { background:#fdf4e3; }.workspace .latestActivity.danger { background:#fcefec; }
.workspace .headsUpPriority { margin-top: -6px; padding: 0; border: 0; background: none; }
.workspace .headsUpHeading { color: #4f7d66; font-weight: 750; }
.workspace .headsUpChip { padding: 11px 14px; border: 0; border-radius: 14px; background: #f3f6f4; }
.workspace .headsUpChip.appointment { background: #e9f5ee; }.workspace .headsUpChip.appointment .headsUpLabel { color: #2c7556; }
.workspace .headsUpChip.callback { background: #fdf4e3; }.workspace .headsUpChip.callback .headsUpLabel { color: #976519; }
.workspace .headsUpChip.danger { background: #fcefec; }.workspace .headsUpChip.danger .headsUpLabel { color: #a54532; }
.workspace .headsUpChip.muted { background: #f3f6f4; }
.workspace .headsUpChip.soon { box-shadow: inset 0 0 0 1.5px currentColor; }
.workspace .headsUpChip.appointment.soon { color: #7cc0a0; }.workspace .headsUpChip.callback.soon { color: #eac27e; }
.workspace .detail { border-top-color: #eef2ef; }
.workspace .leadNotes { border: 0; border-radius: 14px; background: #f4f8f5; box-shadow: inset 3px 0 0 #a5cbb7; }

/* Call buttons: still the biggest thing on the card */
.workspace .phoneList { margin-top: 20px; }
.workspace .callLink { gap: 12px; min-height: 78px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #1c7658, #145c45); box-shadow: 0 8px 20px #17684e2e; -webkit-tap-highlight-color: transparent; }
.workspace .callIcon { width: 42px; height: 42px; border-radius: 14px; background: #ffffff1f; font-size: 0; }
.workspace .callIcon::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--phone-icon) center / contain no-repeat; mask: var(--phone-icon) center / contain no-repeat; }
.workspace { --phone-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.workspace .callLabel { color: #cfe9dd; font-size: 12px; font-weight: 550; }
.workspace .callText strong { font-size: 20.5px; }
html[data-text-size] .workspace .callLink { gap: 10px; padding: 14px; }html[data-text-size] .workspace .callIcon { width: 36px; height: 36px; }html[data-text-size] .workspace .callText strong { font-size: 20px; }

/* Previous / Next and results: same places, softer look, 54px+ targets */
.workspace .navControls button, .workspace .controls button, .workspace .pendingCallNotice button { border-radius: 16px; }
.workspace .navControls button { border: 0; background: #fff; color: #2a5446; box-shadow: 0 1px 2px #0b1f1c0f, 0 6px 16px #0b1f1c12; }
.workspace #nextLead:not(:disabled) { background: #e2f0e8; color: #1d5a43; }
.workspace .navControls button:disabled { background: #ffffffcc; color: #8a9a93; box-shadow: none; }
html[data-bg] .workspace .navControls button:disabled { border: 1px solid #ffffff24; background: #ffffff17; color: #ffffffa3; }
.workspace .controls { gap: 10px; padding: 20px; border: 0; border-radius: 24px; box-shadow: 0 1px 2px #0b1f1c0d, 0 10px 28px #0b1f1c12; }
.workspace .controls button { border: 1px solid #dfe8e2; background: #fff; color: #244c40; }
.workspace .controls button:not(:disabled) { box-shadow: 0 2px 6px #0b1f1c0d; }
.workspace .controls button:disabled { border-color: transparent; background: #eef2ef; color: #8a9791; }
.workspace #noAnswer:not(:disabled) { border-color: #b4cfc0; }
.workspace .resultHeading .eyebrow { color: #6b8a7b; }
.workspace .resultHeading h2 { color: #173e38; font-size: 20px; font-weight: 650; }
.workspace .pendingCallNotice { border: 1px solid #f0dcb5; border-radius: 20px; background: #fff8ec; }
.workspace .historyCard summary { color: #244c40; font-weight: 650; }

/* Waiting for a lead: a slow breathing circle */
.workspace .leadCard.empty { display: grid; justify-items: center; gap: 18px; padding: 34px 26px 32px; color: #5f786d; font-size: 15px; line-height: 1.6; }
.workspace .leadCard.empty::before { content: ""; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, #a9d6bf 0%, #cfe8db 55%, #e7f4ed 100%); box-shadow: 0 0 0 10px #eff7f2, 0 0 0 22px #f6fbf8; animation: calmBreath 10s ease-in-out infinite; }
@keyframes calmBreath { 0%, 100% { transform: scale(.84); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }

.workspace .actionFeedback { border-radius: 16px; }

@media (max-width: 360px) { .wsBand { padding-left: 12px; padding-right: 12px; } .wsBody { padding-left: 12px; padding-right: 12px; } .workspace .leadCard:not(.empty) { padding: 20px 14px; } }
@media (prefers-reduced-motion: reduce) { .wsBand, .workspace .leadCard.empty::before { animation: none; } .workspace .leadCard.empty::before { transform: none; opacity: 1; } }

/* Lead change (lead-transition.js): the outgoing lead is a see-through copy laid
   over the card that fades/slides away while the new lead fades in. The copy
   never takes taps or focus; the real, new lead underneath is live at once. */
.workspace .leadCard { position: relative; }
.workspace .leadGhost { position: absolute; inset: 0; padding: inherit; overflow: hidden; pointer-events: none; }
.workspace .leadCard.leadMoving { overflow-x: clip; }

/* Phone appearance settings. Parchment changes only the lead surface; dark
   mode lowers glare across every page without changing the call-action colors. */
html[data-lead-paper="beige"] .workspace .leadCard { background: #f7eedc; border-color: #e0ceb0; box-shadow: 0 1px 2px #5d48251a, 0 14px 34px #5d482522; }
html[data-lead-paper="beige"] .workspace .leadCard h2 { color: #443525; }
html[data-lead-paper="beige"] .workspace .requestBadge { background: #ebdcc2; color: #69502e; }
html[data-lead-paper="beige"] .workspace .leadNotes { background: #f2e6d1; box-shadow: inset 3px 0 0 #b89564; }
html[data-theme="dark"] { color-scheme: dark; --page-bg: #121714; --page-base: #121714; --page-ink: #b6c4bc; --panel-bg: #202823; }
html[data-theme="dark"] body { background: #121714; color: #e4ebe6; }
html[data-theme="dark"] .wsBand, html[data-theme="dark"] .homeBand { background-color: #172a23; background-image: radial-gradient(70% 90% at 12% 0%, #28523f 0%, #28523f00 70%); }
html[data-theme="dark"] :is(.settingsCard,.homeMain,.homeShortcuts,.workspace .leadCard,.workspace .bridgeSetup,.workspace .appointmentPicker,.workspace .historyCard,.workspace .controls,.historyCard) { background: #202823; border-color: #34433a; box-shadow: 0 8px 28px #00000033; color: #e2e9e4; }
html[data-theme="dark"] :is(.settingsCardHead h2,.settingText strong,.settingSelect,.workspace .leadCard h2,.workspace .sideHead h2) { color: #edf4ef; }
html[data-theme="dark"] :is(.settingText small,.hint,.settingsIntro,.workspace .leadCard.empty,.workspace .historyHint) { color: #b0c0b6; }
html[data-theme="dark"] :is(.settingRow,.workspace .headsUpChip,.workspace .leadNotes) { border-color: #34433a; }
html[data-theme="dark"] .settingSelect, html[data-theme="dark"] .segmented { background: #18201b; border-color: #405046; color: #edf4ef; }
html[data-theme="dark"] .segment:has(input:checked) { background: #2d3c33; color: #d8f2e1; }
html[data-theme="dark"] .workspace .headsUpChip, html[data-theme="dark"] .workspace .leadNotes { background: #29342e; color: #d8e3dc; }
html[data-theme="dark"] .workspace .appointmentAlert { background: #3a3120; border-color: #6a5730; color: #f3e2c0; }
html[data-theme="dark"] .workspace .appointmentAlert.starting { background: #3d2622; border-color: #8a463c; color: #f6d2cb; }
html[data-theme="dark"] .workspace .appointmentReminder { background: #3a3120; border-color: #6a5730; color: #f3e2c0; }
html[data-theme="dark"] .workspace .appointmentReminder[data-kind="starting"] { background: #3d2622; border-color: #8a463c; color: #f6d2cb; }
html[data-theme="dark"] .workspace .navControls button { background: #27322c; color: #e2ece5; box-shadow: none; }
html[data-theme="dark"] .workspace #nextLead:not(:disabled) { background: #31543f; color: #e4f4e8; }
html[data-theme="dark"] .workspace .controls button { background: #27322c; border-color: #405046; color: #e2ece5; }
html[data-theme="dark"][data-lead-paper="beige"] .workspace .leadCard { background: #332c22; border-color: #5d4c33; }
html[data-theme="dark"][data-lead-paper="beige"] .workspace .leadCard h2 { color: #f4e4c7; }

.textingMode { display: grid; gap: 12px; }
.textingMode[hidden] { display: none; }
.textingMode h2,.textingMode h3,.textingMode p { margin: 0; }
.textingMode p { font-size: 14px; line-height: 1.5; }
.textingMode label { display: block; margin: 12px 0; }
.textingMode input:not([type="checkbox"]),.textingMode textarea,.textingMode select { display: block; width: 100%; box-sizing: border-box; padding: 12px; margin: 8px 0; border: 1px solid #91a79d; border-radius: 10px; background: var(--surface, #fff); color: #123b3a; font: inherit; }
.textingMode textarea { min-height: 140px; resize: vertical; }
.textingMode input[type="checkbox"] { width: 22px; height: 22px; vertical-align: middle; }
.textingMode button { padding: 12px; margin: 4px 0; border: 1px solid #91a79d; border-radius: 10px; cursor: pointer; }
.textingMode button:disabled { opacity: .55; cursor: default; }
.textingMode summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.textingMode .download { display: block; padding: 14px; background: #17684e; color: white; border-radius: 10px; text-align: center; }
.textingMode .textingStatus { font-weight: 600; }

/* Keep the connected lead while showing only messaging controls. */
[data-texting-mode] .workspace #leadCard,
[data-texting-mode] .workspace #callResults,
[data-texting-mode] .workspace #callHistory,
[data-texting-mode] .workspace #pendingCallNotice,
[data-texting-mode] .workspace #appointmentPicker,
[data-texting-mode] .workspace .scriptOverlay,
[data-texting-mode] .workspace .scriptOpen,
[data-texting-mode] .workspace .swipeHint { display: none !important; }
.textingMode textarea { min-height: 180px; line-height: 1.55; }
.textingMode .download { font-weight: 700; text-decoration: none; }
.textingMode details { border-top: 1px solid #91a79d; padding-top: 8px; }
.textingMode .textingStatus:empty { display: none; }

/* A quiet compose surface with secondary tasks out of the main flow. */
.textingMode { gap: 10px; }
.textingMode .textingHeader { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; }
.textingMode .textingHeader h2 { font-size:14px; font-weight:600; opacity:.7; }
.textingMode .textingHeader a { font-size:13px; color:inherit; }
.textingMode .textingName { font-size:22px; line-height:1.25; }
.textingMode .textingRecipient, .textingMode .textingHint { opacity:.72; font-size:13px; }
.textingMode .textingPreview, .textingMode .textingBubble { border:0; border-radius:16px; padding:16px; background:#edf4ef; color:#183a2d; font-size:16px; line-height:1.6; margin:6px 0; }
.textingMode .textingPreview { min-height:180px; resize:vertical; }
.textingMode .textingBubble { white-space:pre-wrap; overflow-wrap:anywhere; }
.textingMode .textingActions { display:flex; justify-content:center; align-items:center; gap:20px; }
.textingMode .textingActions button, .textingMode .textingSecondary { border:0; background:transparent; color:inherit; padding:12px 0; font:inherit; font-size:14px; text-decoration:underline; }
.textingMode .textingPrimary, .textingMode .download { border:0; border-radius:14px; background:#17684e; color:#fff; padding:16px; font:inherit; font-weight:700; text-align:center; }
.textingMode .textingMore { margin-top:8px; }
.textingMode .textingMore > summary, .textingMode .textingCheckin > summary { font-size:14px; font-weight:500; }
.textingMode .textingMore > details { margin-top:12px; }
[data-texting-mode] .workspace .wsHeader > h1, [data-texting-mode] .workspace .wsHeader > .encLine { display:none; }
html[data-theme="dark"] .textingMode .textingPreview, html[data-theme="dark"] .textingMode .textingBubble { background:#293b31; color:#e2ece5; }

.textingMode > button:not(.textingPrimary) { border:0; background:transparent; color:inherit; padding:8px; font-size:14px; text-decoration:underline; }