/* ========================================================================== Line — calling console Concept: a call is two voices over time, and one of them is a machine. Time and two tracks organise everything here. Agent audio reads amber and sits above the axis; the caller reads teal and sits below it. Palette is drawn from telephone exchange equipment: petrol navy panels and the amber of a line-active indicator lamp. ========================================================================== */ :root { /* Ink and paper */ /* Neutral + accent tokens match the landing page exactly, so the console and the front page read as one system. */ --ink: #101812; /* warm near-black text (landing --ink) */ --ink-2: #4C5852; /* secondary text */ --ink-3: #8A958F; /* captions, meta */ --paper: #F6F7F5; /* page — same off-white as the landing */ --card: #FFFFFF; --card-2: #ECEFEA; /* inset wells — distinct from the page */ --edge: #D3D9D0; /* card + control borders, clearly visible on the page */ --edge-soft: #E2E6E0; /* internal dividers */ /* Signal */ --amber: #C97A1E; /* line active, agent track, primary action */ --amber-lift: #E8931F; --amber-wash: #FBF0E1; --teal: #2C86A6; /* caller track, secondary (landing --teal) */ --teal-wash: #E1EEF3; --brick: #A8422C; /* failure */ --brick-wash: #F7E7E3; --moss: #4A6B45; /* healthy */ --moss-wash: #E8EFE6; /* Type */ --display: "Familjen Grotesk", "Helvetica Neue", Helvetica, sans-serif; --body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* The signal panels — line bar, ribbon, toast, sign-in — are dark in BOTH themes, so they need a colour that does NOT flip. --ink cannot be used for their background: it flips to light in dark mode and made them white. */ --panel: #0F1B24; /* Frame */ --line-h: 56px; --rail-w: 196px; --radius: 14px; --radius-lg: 18px; --shadow: 0 1px 2px rgba(15, 27, 36, .06), 0 12px 30px -12px rgba(15, 27, 36, .26); --shadow-lift: 0 3px 6px rgba(15, 27, 36, .07), 0 26px 50px -20px rgba(15, 27, 36, .36); --ease: .18s cubic-bezier(.4, 0, .2, 1); } /* Dark palette — unchanged from before. Applied two ways: explicitly when the user picks dark from the toggle, or automatically when the OS asks for dark AND the user hasn't chosen (`:not([data-theme])`). The header script stamps data-theme on before first paint, so switching never flashes. */ :root[data-theme="dark"] { --ink: #E7EDF1; --ink-2: #A9BAC4; --ink-3: #7E919C; --paper: #0B141B; --card: #121F28; --card-2: #0E1A22; --edge: #23343E; --edge-soft: #1B2A33; --amber-wash: #2A1F10; --teal-wash: #10242E; --brick-wash: #2A1512; --moss-wash: #17231A; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.7); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --ink: #E7EDF1; --ink-2: #A9BAC4; --ink-3: #7E919C; --paper: #0B141B; --card: #121F28; --card-2: #0E1A22; --edge: #23343E; --edge-soft: #1B2A33; --amber-wash: #2A1F10; --teal-wash: #10242E; --brick-wash: #2A1512; --moss-wash: #17231A; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.7); } } *, *::before, *::after { box-sizing: border-box; } /* The browser's own [hidden] rule is a bare attribute selector, so any class that sets `display` outranks it and the element stays visible. That is why the Mute button and the connecting dots showed while the call was idle. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; margin: 0; } a { color: inherit; } :focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; border-radius: 4px; } /* Navigation links show the current page with .on, so they need no focus ring. */ .rail a:focus-visible, .mark:focus-visible { outline: none; } /* -------------------------------------------------------------------------- Line status bar -------------------------------------------------------------------------- */ .line { position: sticky; top: 0; z-index: 40; height: var(--line-h); display: flex; align-items: center; gap: 20px; padding: 0 18px; /* Frosted glass bar, like the landing page header. Theme-aware via --paper; the background is translucent so the blur behind it is visible. */ background: var(--paper); background: color-mix(in srgb, var(--paper) 65%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); color: var(--ink); border-bottom: 1px solid var(--edge); } .mark { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; flex: none; cursor: pointer; } /* Four bars at unequal heights — a waveform frozen mid-syllable. */ .mark-bars { display: flex; align-items: center; gap: 2.5px; height: 18px; } .mark-bars i { width: 3px; border-radius: 2px; background: var(--amber); display: block; } .mark-bars i:nth-child(1) { height: 7px; } .mark-bars i:nth-child(2) { height: 16px; } .mark-bars i:nth-child(3) { height: 11px; background: #4E8CA8; } .mark-bars i:nth-child(4) { height: 5px; background: #4E8CA8; } .mark-word { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; } .line-readout { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; } .readout { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; } .readout strong { color: var(--ink); font-weight: 700; } .line-readout .rule { width: 1px; height: 16px; background: var(--edge); flex: none; } /* The lamp pulses in real UK ring cadence: 400ms on, 200ms off, 400ms on, then a two-second rest. Steady amber whenever a call is connected. */ .lamp { width: 9px; height: 9px; border-radius: 50%; background: #3A4C57; flex: none; } .lamp[data-live="ringing"] { background: var(--amber-lift); animation: ring-cadence 3s steps(1, end) infinite; } .lamp[data-live="live"] { background: var(--amber-lift); box-shadow: 0 0 0 3px rgba(232, 147, 31, .22); } @keyframes ring-cadence { 0%, 13.33% { opacity: 1; } 13.34%, 20% { opacity: .2; } 20.01%, 33.33% { opacity: 1; } 33.34%, 100% { opacity: .2; } } .icon-btn { display: none; background: transparent; border: 1px solid var(--edge); color: var(--ink-2); border-radius: 8px; padding: 6px; cursor: pointer; } /* Theme toggle — lives in the dark line bar, so it's styled light-on-dark and always visible. */ .line-ctl { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; background: var(--card-2); border: 1px solid var(--edge); color: var(--ink-2); border-radius: 9px; cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease); } .line-ctl:hover { background: var(--card); color: var(--ink); border-color: var(--ink-3); } .line-ctl svg { width: 17px; height: 17px; } /* Show the sun in dark mode (click → go light) and the moon in light mode. */ .line-ctl .i-sun { display: none; } .line-ctl .i-moon { display: block; } :root[data-theme="dark"] .line-ctl .i-sun { display: block; } :root[data-theme="dark"] .line-ctl .i-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .line-ctl .i-sun { display: block; } :root:not([data-theme]) .line-ctl .i-moon { display: none; } } /* -------------------------------------------------------------------------- Shell -------------------------------------------------------------------------- */ .shell { display: flex; align-items: flex-start; } .rail { position: sticky; top: var(--line-h); width: var(--rail-w); flex: none; height: calc(100vh - var(--line-h)); padding: 22px 12px; /* Separated from the content by depth, not colour: a crisp divider plus a soft shadow cast toward the main area, so the sidebar reads as its own layer while staying the same background. */ border-right: 1px solid var(--edge); box-shadow: 8px 0 20px -14px rgba(15, 27, 36, .35); display: flex; flex-direction: column; gap: 1px; } .rail a { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-size: 14px; font-weight: 500; transition: background var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease); } .rail a:hover { background: var(--card-2); color: var(--ink); transform: translateX(2px); } .rail a.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--amber-lift), var(--shadow); } .rail a.on:hover { transform: none; } .stage { flex: 1; min-width: 0; padding: 30px 34px 72px; max-width: 1180px; } .stage-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--edge-soft); } .stage-titles h1 { font-size: clamp(27px, 3.2vw, 34px); letter-spacing: -.025em; } .stage-titles p { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; max-width: 62ch; } .stage-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- Type utilities -------------------------------------------------------------------------- */ .eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } /* Phone numbers, timecodes, durations and money are all mono: they need to align down a column and be read digit by digit. */ .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .muted { color: var(--ink-3); } /* Money columns on the Credits ledger. The base `table.data th` rule is more specific than a bare .ta-r, so header + cell alignment are set explicitly. */ .ta-r { text-align: right; } table.data th.ta-r, table.data td.ta-r { text-align: right; } .amt-up { color: var(--moss); } .amt-dn { color: var(--brick); } /* Profile */ .profile-id { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--edge-soft); } .profile-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--amber-wash); color: var(--amber-2); font-family: var(--display); font-weight: 700; font-size: 22px; } .profile-email { font-weight: 600; font-size: 16px; } .proprows { display: grid; gap: 0; } .proprow { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--edge-soft); } .proprow:last-child { border-bottom: 0; } /* Table pagination footer. */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--edge-soft); font-size: 13px; flex-wrap: wrap; } .pager-btns { display: flex; gap: 8px; } /* Toggle switch (auto top-up). */ .switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: 14.5px; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { width: 40px; height: 23px; border-radius: 999px; background: var(--edge); position: relative; transition: background var(--ease); flex: none; } .switch-knob { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--ease); } .switch input:checked + .switch-track { background: var(--amber-lift); } .switch input:checked + .switch-track .switch-knob { transform: translateX(17px); } .switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--amber-wash); } .ar-fields { transition: opacity var(--ease); } /* Credit top-up pack buttons. */ .topup-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .topup-btn { font-family: var(--mono); font-weight: 700; font-size: 16px; padding: 12px 22px; min-width: 96px; } .topup-btn:hover { border-color: var(--amber); color: var(--amber); } .topup-custom { font-weight: 600; padding: 12px 18px; border-style: dashed; color: var(--ink-2); } .topup-custom:hover { border-color: var(--amber); color: var(--amber); border-style: solid; } /* -------------------------------------------------------------------------- Cards and grids -------------------------------------------------------------------------- */ .card { background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease); } /* Cards that stand on their own (a metric, a grid tile) lift a touch on hover, the way the landing's feature cards do. Cards used as static containers can opt out with .is-flat. */ .grid > .card:hover, .figure.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .card.is-flat:hover { transform: none; box-shadow: var(--shadow); } /* -------------------------------------------------------------------------- Entrance motion — when a view mounts into #view its content rises into place, cards and tiles staggered, so navigating feels alive rather than a hard cut. The whole view fades; grid/stack tiles rise with a short cascade. -------------------------------------------------------------------------- */ @keyframes app-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes app-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } #view > * { animation: app-fade .28s ease both; } #view .stack > *, #view .grid > * { animation: app-rise .44s cubic-bezier(.4, 0, .2, 1) both; } #view .stack > *:nth-child(2), #view .grid > *:nth-child(2) { animation-delay: .045s; } #view .stack > *:nth-child(3), #view .grid > *:nth-child(3) { animation-delay: .09s; } #view .stack > *:nth-child(4), #view .grid > *:nth-child(4) { animation-delay: .135s; } #view .stack > *:nth-child(5), #view .grid > *:nth-child(5) { animation-delay: .18s; } #view .stack > *:nth-child(n+6), #view .grid > *:nth-child(n+6) { animation-delay: .22s; } @media (prefers-reduced-motion: reduce) { #view > *, #view .stack > *, #view .grid > * { animation: none; } } .card-head { padding: 14px 18px; border-bottom: 1px solid var(--edge-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-head h2 { font-size: 15px; font-weight: 600; } .card-body { padding: 18px; } .grid { display: grid; gap: 16px; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stack { display: grid; gap: 20px; } /* Readouts on the overview — the figure leads, the label follows. */ .figure { padding: 16px 18px; } .figure-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); } .figure-value.is-amber { color: var(--amber); } .figure-label { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); } /* -------------------------------------------------------------------------- Overview hero — the line itself. A calling console should open with the thing it is: a live line. This is a dark exchange panel that states the line's status in big display type, with the ring-cadence lamp and a signal waveform rising from its floor. It carries the page's whole visual weight so everything below can stay quiet. -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, rgba(201,122,30,.16), transparent 55%), var(--panel); border-radius: 14px; padding: 30px 30px 0; color: #EEF3F6; min-height: 232px; display: flex; flex-direction: column; box-shadow: 0 20px 50px -26px rgba(0,0,0,.7); } .hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .hero-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #6E828E; } .hero-lamp { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8FA1AC; } .hero-lamp b { width: 10px; height: 10px; border-radius: 50%; background: #3A4C57; display: block; } .hero-lamp[data-live="live"] b { background: var(--amber-lift); box-shadow: 0 0 0 4px rgba(232,147,31,.22), 0 0 16px 2px rgba(232,147,31,.5); } .hero-lamp[data-live="live"] { color: var(--amber-lift); } .hero-state { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; font-size: clamp(32px, 5.2vw, 54px); line-height: 1.0; margin-top: 20px; color: #F4F8FA; } .hero-state em { font-style: normal; color: var(--amber-lift); } .hero-state.is-quiet { color: #C9D6DE; } .hero-sub { color: #90A2AD; font-size: 14.5px; margin-top: 12px; max-width: 54ch; } .hero-sub b { color: #D6E0E6; font-weight: 600; } /* The signal: bars rising from the floor of the panel, a wave travelling left to right. It idles gently and quickens when a call is on the line. */ .hero-wave { display: flex; align-items: flex-end; gap: 3px; height: 60px; margin-top: auto; padding-top: 22px; } .hero-wave i { flex: 1 1 0; min-width: 0; height: 34%; border-radius: 3px 3px 0 0; background: linear-gradient(to top, rgba(120,150,165,.08), rgba(150,175,188,.42)); transform-origin: bottom; animation: wave 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.05s); } .hero-wave.is-live i { background: linear-gradient(to top, rgba(232,147,31,.22), var(--amber-lift)); animation-duration: 1.15s; } @keyframes wave { 0%, 100% { transform: scaleY(.4); opacity: .55; } 50% { transform: scaleY(1); opacity: .95; } } /* The quiet stat strip under the hero — mono, understated, one line. */ .linestrip { display: flex; flex-wrap: wrap; gap: 26px; padding: 15px 20px; } .linestrip > div { font-size: 13.5px; color: var(--ink-3); } .linestrip b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--ink); margin-right: 6px; } /* -------------------------------------------------------------------------- The call ribbon — the signature element. Two tracks against a shared time axis. Agent above, caller below, barge-ins marked where the caller cut in. -------------------------------------------------------------------------- */ .ribbon { background: var(--panel); border-radius: var(--radius); padding: 16px 18px 12px; overflow: hidden; } .ribbon-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; } .ribbon-head .eyebrow { color: #7E919C; } .ribbon-legend { display: flex; gap: 14px; font-family: var(--mono); font-size: 10.5px; color: #A9BAC4; } .ribbon-legend span { display: inline-flex; align-items: center; gap: 5px; } .ribbon-legend i { width: 8px; height: 8px; border-radius: 2px; display: block; } .ribbon-legend .k-agent { background: var(--amber-lift); } .ribbon-legend .k-caller { background: #4E8CA8; } .ribbon-legend .k-cut { background: #C7503A; } .ribbon-plot { position: relative; height: 74px; } /* The centre line is the time axis; both tracks grow away from it. */ .ribbon-axis { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.16); } .ribbon-track { position: absolute; left: 0; right: 0; display: flex; align-items: flex-end; gap: 2px; } .ribbon-track.up { bottom: 50%; } .ribbon-track.down { top: 50%; align-items: flex-start; } .ribbon-track i { flex: 1 1 0; min-width: 0; border-radius: 1.5px; display: block; background: var(--amber-lift); } .ribbon-track.down i { background: #4E8CA8; } /* A barge-in: the moment the caller talked over the agent. */ .ribbon-cut { position: absolute; top: 0; bottom: 0; width: 2px; background: #C7503A; opacity: .85; } .ribbon-cut::after { content: ""; position: absolute; top: -1px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: #C7503A; } .ribbon-scale { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--mono); font-size: 10px; color: #6B7C86; } /* Compact single-line version used in call rows. */ .ribbon-mini { display: flex; align-items: center; gap: 1.5px; height: 22px; width: 108px; } .ribbon-mini i { flex: 1 1 0; border-radius: 1px; background: var(--edge); display: block; } .ribbon-mini i.a { background: var(--amber); } .ribbon-mini i.c { background: var(--teal); } /* -------------------------------------------------------------------------- Transcript — timecoded, because the sequence is the information -------------------------------------------------------------------------- */ .turns { display: grid; gap: 2px; } .turn { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 9px 10px; border-radius: 7px; align-items: baseline; } .turn:hover { background: var(--card-2); } .turn-time { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-3); padding-top: 2px; } .turn-who { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; } .turn.is-agent .turn-who { color: var(--amber); } .turn.is-caller .turn-who { color: var(--teal); } .turn-text { color: var(--ink); } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data th { text-align: left; padding: 10px 18px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--edge-soft); white-space: nowrap; } table.data td { padding: 12px 18px; border-bottom: 1px solid var(--edge-soft); vertical-align: middle; } table.data tr:last-child td { border-bottom: 0; } table.data tbody tr { transition: background var(--ease); } table.data tbody tr.is-clickable { cursor: pointer; } table.data tbody tr.is-clickable:hover { background: var(--card-2); box-shadow: inset 2px 0 0 var(--amber); } /* -------------------------------------------------------------------------- Tags -------------------------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 5px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--card-2); color: var(--ink-2); border: 1px solid var(--edge-soft); white-space: nowrap; } .tag.is-live { background: var(--amber-wash); color: var(--amber); border-color: transparent; } .tag.is-ok { background: var(--moss-wash); color: var(--moss); border-color: transparent; } .tag.is-bad { background: var(--brick-wash); color: var(--brick); border-color: transparent; } .tag.is-caller { background: var(--teal-wash); color: var(--teal); border-color: transparent; } .tag.is-warn { background: var(--amber-wash); color: var(--amber-2); border-color: transparent; } /* Clickable relationship badge in the Contacts table */ button.rel-badge { cursor: pointer; transition: transform .12s ease, filter .12s ease; } button.rel-badge svg { opacity: .55; margin-left: 1px; } button.rel-badge:hover { filter: brightness(.97); transform: translateY(-1px); } button.rel-badge:hover svg { opacity: .9; } button.rel-badge:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* Relationship detail modal */ .rel-who { margin-bottom: 14px; } .rel-who-name { font-size: 17px; font-weight: 650; color: var(--ink); } .rel-who-num { font-family: var(--mono); font-size: 13px; margin-top: 2px; } .rel-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; } .rel-summary { margin: 0 0 12px; color: var(--ink); line-height: 1.6; font-size: 14.5px; padding: 12px 14px; background: var(--card-2); border: 1px solid var(--edge-soft); border-radius: 10px; } .rel-note { margin: 0; font-size: 13px; line-height: 1.5; } /* Admin panel: segmented control + user-management modal */ .seg { display: inline-flex; background: var(--card-2); border: 1px solid var(--edge-soft); border-radius: 9px; padding: 3px; gap: 2px; } .seg-btn { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: 6px; cursor: pointer; transition: background .12s ease, color .12s ease; } .seg-btn:hover { color: var(--ink); } .seg-btn.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft, 0 1px 3px rgba(0,0,0,.08)); } .admin-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 14px 0 4px; padding: 12px 14px; background: var(--card-2); border: 1px solid var(--edge-soft); border-radius: 10px; } .admin-kv > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .admin-kv span { color: var(--ink-3); } .admin-kv b { color: var(--ink); font-weight: 600; } .admin-act { margin-top: 18px; } .admin-act-title { font-size: 13px; font-weight: 650; color: var(--ink); margin-bottom: 8px; } .admin-act-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } /* Inside an inline action row the field's own bottom margin would drop the input below the button; zero it so input and button share a baseline. */ .admin-act-row .field { margin-bottom: 0; } /* Inline user-management form (replaces the table, not a popup) */ .manage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .manage-status { display: flex; gap: 6px; flex-wrap: wrap; } .manage-head h2 { font-size: 19px; font-weight: 650; color: var(--ink); margin: 0 0 2px; } .manage-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--edge-soft); } .manage-balance { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--card-2); border: 1px solid var(--edge-soft); border-radius: 10px; } .manage-balance .figure-value { font-size: 30px; } .manage-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .manage-danger .admin-act-title { color: var(--brick); } /* "Get a number" chat wizard */ .buychat { display: flex; flex-direction: column; gap: 12px; } .bchat-bot { align-self: flex-start; max-width: 90%; background: var(--card-2); border: 1px solid var(--edge-soft); border-radius: 4px 14px 14px 14px; padding: 12px 15px; font-size: 14px; line-height: 1.55; } .bchat-bot p { margin: 0 0 8px; } .bchat-bot p:last-child { margin-bottom: 0; } .bchat-you { align-self: flex-end; background: var(--teal-wash); color: var(--teal); border-radius: 14px 4px 14px 14px; padding: 9px 14px; font-size: 14px; font-weight: 600; } .bchat-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; } .bchat-controls .select { min-width: 200px; } .bchat-summary { display: grid; gap: 8px; margin: 4px 0 10px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--edge-soft); border-radius: 10px; } .bchat-summary > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; } .bchat-summary span { color: var(--ink-3); } .bchat-summary b { color: var(--ink); font-weight: 600; text-align: right; } /* Campaign "From contacts" picker */ .camp-contacts { max-height: 240px; overflow-y: auto; border: 1px solid var(--edge-soft); border-radius: 10px; padding: 6px; background: var(--card); } .camp-contact { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; } .camp-contact:hover { background: var(--card-2); } .camp-contact input { width: 16px; height: 16px; flex-shrink: 0; } .camp-contact .num { font-family: var(--mono); font-size: 12.5px; } /* Call recording player on the call detail */ .call-recording { padding: 14px 20px 0; } .call-recording-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .call-recording-row audio { flex: 1; min-width: 240px; } .call-recording-row .btn { flex-shrink: 0; } /* Owned-number row with cancel / release actions */ .callerid-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .callerid-row + .callerid-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--edge-soft); } .callerid-acts { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 17px; border-radius: 9px; border: 1px solid var(--edge); background: var(--card); color: var(--ink); font-family: var(--body); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color var(--ease), background var(--ease), box-shadow var(--ease), transform var(--ease); } .btn:hover { border-color: var(--ink-3); box-shadow: var(--shadow); transform: translateY(-1px); } .btn:active { transform: translateY(.5px); } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; } .btn.is-primary { background: var(--amber-lift); border-color: var(--amber-lift); color: #fff; box-shadow: 0 8px 20px -8px rgba(232,147,31,.6); } .btn.is-primary:hover { filter: brightness(1.05); border-color: var(--amber-lift); box-shadow: 0 12px 26px -8px rgba(232,147,31,.72); } .btn.is-danger { color: var(--brick); border-color: var(--brick-wash); } .btn.is-danger:hover { border-color: var(--brick); box-shadow: none; } .btn.is-quiet { background: transparent; border-color: transparent; color: var(--ink-2); } .btn.is-quiet:hover { background: var(--card-2); color: var(--ink); box-shadow: none; } .btn.is-small { padding: 6px 12px; font-size: 13px; border-radius: 8px; } /* A round call button. The one place the interface raises its voice. */ .btn-call { width: 74px; height: 74px; border-radius: 50%; border: 0; background: var(--amber); color: #fff; font-family: var(--display); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px -8px rgba(201, 122, 30, .8); } .btn-call:hover:not(:disabled) { background: var(--amber-lift); } .btn-call:disabled { background: var(--ink-3); box-shadow: none; cursor: not-allowed; } .btn-call.is-hangup { background: var(--brick); box-shadow: 0 8px 22px -8px rgba(168, 66, 44, .8); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .field { display: block; margin-bottom: 16px; } .field > .label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ink); } .field > .hint { display: block; font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; } .input, .select, .textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--edge); border-radius: 9px; background: var(--card); color: var(--ink); font-family: var(--body); font-size: 14px; transition: border-color var(--ease), box-shadow var(--ease); } /* Native selects render the OS arrow, which never matches the rest of the interface. Draw our own chevron instead and keep the control identical to a text input. The chevron is an inline SVG whose stroke can't be currentColor, so it is restated for dark mode. */ .select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9.5l6 6 6-6' stroke='%236B7C86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; } .select::-ms-expand { display: none; } /* Option lists are drawn by the OS; setting these keeps them legible on the platforms that do honour them rather than flashing white in dark mode. */ .select option { background: var(--card); color: var(--ink); } :root[data-theme="dark"] .select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9.5l6 6 6-6' stroke='%237E919C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9.5l6 6 6-6' stroke='%237E919C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } } /* The chevron nudges in on hover and focus, so the control feels responsive. */ .select:hover, .select:focus { background-position: right 10px center; } /* -------------------------------------------------------------------------- Combobox — a select we can actually style, and search. A native