/* Helios design system: "Lagoon". Soft, friendly and rounded: teal for actions, warm coral for the brand and for hints, pill-shaped controls, big touch targets. Every colour is a token below; components use only tokens, so the dark "night lagoon" theme (for dark-mode screens and wall TVs) is just a second set of values. Status colours carry one meaning everywhere (agent states, campaign states, call outcomes): each has a strong colour (dots, bars), a soft background and a text colour that passes 4.5:1 on that background. */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/nunito-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/nunito-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/dmmono-400-latin.woff2) format("woff2"); } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/dmmono-500-latin.woff2) format("woff2"); } :root { color-scheme: light; /* surfaces */ --bg: #EEF6F5; /* shallows: page ground */ --panel: #FFFFFF; /* cards */ --panel-2: #F4FAF9; /* insets inside cards */ --border: #D3E5E3; --border-strong: #B7D3D0; --shadow: 0 2px 10px rgba(15, 42, 42, 0.06); --shadow-lift: 0 8px 28px rgba(15, 42, 42, 0.12); /* text */ --text: #0F2A2A; --muted: #4F6B6A; /* brand */ --accent: #0E7C76; /* lagoon: primary actions, selection */ --accent-strong: #0A5F5A; --accent-soft: #D5EDEA; --accent-text: #FFFFFF; --coral: #FF8A66; /* brand mark, hints */ --coral-soft: #FFF1EC; --coral-text: #B44A2A; /* status: strong / soft background / text on soft */ --ok: #1E9E60; --ok-soft: #DDF3E7; --ok-text: #126B41; --call: #3B7DD8; --call-soft: #E1ECFB; --call-text: #24589F; --warn: #E08A1E; --warn-soft: #FCEBD5; --warn-text: #8C4E00; --pause: #8AA2A1; --pause-soft: #E6EEED; --pause-text: #46605F; --bad: #D23B2F; --bad-soft: #FDE3E1; --bad-text: #AC2A20; --machine: #8B5CF6; --machine-soft: #EEE6FD; --machine-text: #5B3FA8; --on-strong: #FFFFFF; /* text on a strong status colour (red Hang up, green tile) */ /* shape and type */ --radius: 24px; --radius-md: 16px; --radius-sm: 12px; --pill: 999px; --font: "Nunito", "Noto Sans Devanagari", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --focus: 0 0 0 3px rgba(14, 124, 118, 0.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0B1E1E; --panel: #112A2A; --panel-2: #163333; --border: #23403F; --border-strong: #2F5352; --shadow: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.5); --text: #E3F2F0; --muted: #9DB9B6; --accent: #3CC4BB; --accent-strong: #6FD8D0; --accent-soft: #133F3C; --accent-text: #062322; --coral: #FF9C7E; --coral-soft: #3A2219; --coral-text: #FFB59D; --ok: #4FD08E; --ok-soft: #12332A; --ok-text: #7FE0AE; --call: #7AAEF0; --call-soft: #16294A; --call-text: #A9C9F6; --warn: #F2B04F; --warn-soft: #3A2A10; --warn-text: #F6C77F; --pause: #8FA9A6; --pause-soft: #1C3332; --pause-text: #B5CBC8; --bad: #FF7A6E; --bad-soft: #3E1A18; --bad-text: #FF9D93; --machine: #B49BFF; --machine-soft: #2A2148; --machine-text: #CBB8FF; --on-strong: #062322; --focus: 0 0 0 3px rgba(60, 196, 187, 0.45); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0B1E1E; --panel: #112A2A; --panel-2: #163333; --border: #23403F; --border-strong: #2F5352; --shadow: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.5); --text: #E3F2F0; --muted: #9DB9B6; --accent: #3CC4BB; --accent-strong: #6FD8D0; --accent-soft: #133F3C; --accent-text: #062322; --coral: #FF9C7E; --coral-soft: #3A2219; --coral-text: #FFB59D; --ok: #4FD08E; --ok-soft: #12332A; --ok-text: #7FE0AE; --call: #7AAEF0; --call-soft: #16294A; --call-text: #A9C9F6; --warn: #F2B04F; --warn-soft: #3A2A10; --warn-text: #F6C77F; --pause: #8FA9A6; --pause-soft: #1C3332; --pause-text: #B5CBC8; --bad: #FF7A6E; --bad-soft: #3E1A18; --bad-text: #FF9D93; --machine: #B49BFF; --machine-soft: #2A2148; --machine-text: #CBB8FF; --on-strong: #062322; --focus: 0 0 0 3px rgba(60, 196, 187, 0.45); } /* ---------- base ---------- */ * { box-sizing: border-box; } body { margin: 0; font: 16px/1.5 var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } h1, h2, h3 { text-wrap: balance; } a { color: var(--accent); font-weight: 700; } a:hover { color: var(--accent-strong); } :focus-visible { outline: none; box-shadow: var(--focus); } /* ---------- app header: a floating white pill ---------- */ header, nav.groups, nav.tabs, .alertbar { max-width: 1240px; } header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px auto 0; padding: 8px 10px 8px 16px; background: var(--panel); border-radius: var(--pill); box-shadow: var(--shadow); } header h1 { font-size: 19px; font-weight: 900; margin: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; } header a { text-decoration: none; padding: 8px 12px; border-radius: var(--pill); font-size: 15px; } header a:hover { background: var(--accent-soft); } .brand-mark { width: 32px; height: 32px; flex: 0 0 auto; display: block; } main { max-width: 1240px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 18px; } .grid2 { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } @media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } } /* ---------- cards ---------- */ .card { background: var(--panel); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); min-width: 0; } .card h2 { font-size: 19px; font-weight: 900; color: var(--text); margin: 0 0 14px; } .card h3 { font-size: 16px; font-weight: 800; margin: 16px 0 8px; } /* ---------- forms ---------- */ label { display: block; font-size: 14px; font-weight: 800; color: var(--text); margin: 10px 0 6px; } input, select, textarea { width: 100%; padding: 11px 14px; font: inherit; font-size: 15.5px; color: var(--text); background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius-md); transition: border-color .15s; } input:hover, select:hover, textarea:hover { border-color: var(--border-strong); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); } input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); } input[type="range"] { accent-color: var(--accent); border: 0; padding: 0; } textarea { border-radius: 18px; } /* ---------- buttons: pills ---------- */ button { font: inherit; font-size: 15px; font-weight: 800; padding: 10px 18px; border-radius: var(--pill); border: 2px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; transition: background-color .15s, border-color .15s, transform .05s; min-height: 44px; } button:hover { border-color: var(--border-strong); background: var(--panel-2); } button:active { transform: translateY(1px); } button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } button.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } button.danger { background: var(--bad); color: var(--on-strong); border-color: var(--bad); } button.danger:hover { filter: brightness(0.95); } button.soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); } button.ghost { background: transparent; border-color: transparent; } button.sm, .sm { min-height: 34px; padding: 5px 12px; font-size: 13.5px; } button:disabled { opacity: .5; cursor: default; transform: none; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* Buttons inside tables and toolbars are compact. */ td button, .toolbar button { min-height: 36px; padding: 5px 12px; font-size: 13.5px; border-width: 1px; } @media (pointer: coarse) { td button, .toolbar button { min-height: 44px; } } td .row, td { gap: 6px; } /* ---------- pills: agent / campaign states ---------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--pill); font-size: 13.5px; font-weight: 800; background: var(--pause-soft); color: var(--pause-text); white-space: nowrap; } .st-available { background: var(--ok-soft); color: var(--ok-text); } .st-on_call, .st-reserved { background: var(--call-soft); color: var(--call-text); } .st-wrap_up { background: var(--warn-soft); color: var(--warn-text); } .st-paused, .st-logged_out { background: var(--pause-soft); color: var(--pause-text); } .st-bad { background: var(--bad-soft); color: var(--bad-text); } .pill .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; } /* ---------- text ---------- */ .muted { color: var(--muted); } .sub { font-size: 13.5px; color: var(--muted); } .big { font-size: 24px; font-weight: 900; } .mono, td.num { font-family: var(--mono); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } ::placeholder { color: var(--muted); opacity: 0.8; } dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; } dl.kv dt { color: var(--muted); font-weight: 600; } dl.kv dd { margin: 0; font-weight: 700; } /* ---------- tables ---------- */ table { width: 100%; border-collapse: collapse; font-size: 15px; } th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } th { color: var(--muted); font-weight: 800; font-size: 13px; background: var(--panel-2); } thead th:first-child { border-top-left-radius: var(--radius-sm); } thead th:last-child { border-top-right-radius: var(--radius-sm); } tbody tr:hover td { background: var(--panel-2); } tr:last-child td { border-bottom: 0; } .num { text-align: right; font-variant-numeric: tabular-nums; font-size: 14.5px; } .tablewrap { overflow-x: auto; } /* ---------- misc components ---------- */ .dispos { display: flex; flex-wrap: wrap; gap: 8px; } .dispos button.sel { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .hidden { display: none !important; } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: var(--pill); font-weight: 700; box-shadow: var(--shadow-lift); max-width: calc(100% - 32px); } .chip { display: inline-block; padding: 3px 10px; margin: 2px; border-radius: var(--pill); background: var(--panel-2); border: 1px solid var(--border); font-size: 13px; font-weight: 700; } .hint { background: var(--coral-soft); color: var(--text); border-radius: var(--radius-md); padding: 14px 16px; } .hint .hint-label { font-size: 13px; font-weight: 900; color: var(--coral-text); } /* ---------- admin navigation: groups (pill bar) + pages (chips) ---------- */ nav.groups { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin: 12px auto 0; padding: 6px; background: var(--panel); border-radius: var(--pill); box-shadow: var(--shadow); } nav.groups button { border: 0; min-height: 40px; padding: 8px 18px; background: transparent; color: var(--text); } nav.groups button:hover { background: var(--panel-2); } nav.groups button.active { background: var(--accent); color: var(--accent-text); } nav.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px auto 0; padding: 0 4px; } nav.tabs button { min-height: 36px; padding: 6px 14px; font-size: 14px; font-weight: 700; background: var(--panel); border: 1px solid var(--border); color: var(--muted); } nav.tabs button:hover { color: var(--text); } nav.tabs button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 800; } nav.tabs a { align-self: center; font-size: 14px; padding: 6px 10px; text-decoration: none; } /* ---------- admin forms and stats ---------- */ .form { display: grid; gap: 4px 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .form .wide { grid-column: 1 / -1; } .form label.check { display: flex; gap: 10px; align-items: center; font-weight: 700; margin-top: 30px; } .form label.check input { width: auto; } .tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .tile { background: var(--panel); border-radius: 20px; padding: 14px 18px; box-shadow: var(--shadow); } .card .tile { background: var(--panel-2); box-shadow: none; } .tile .v { font-family: var(--mono); font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.2; } .tile .k { color: var(--muted); font-size: 13.5px; font-weight: 700; } .bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 8px; overflow-x: auto; } .bars .bar { flex: 0 1 44px; min-width: 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; } .bars .pair { width: 100%; display: flex; gap: 2px; align-items: flex-end; height: 100%; } .bars .bar span.fill { width: 100%; background: var(--accent); border-radius: 8px 8px 3px 3px; min-height: 2px; } .bars .bar span.fill.conn { background: var(--coral); } .bars .bar small { color: var(--muted); font-size: 11.5px; font-weight: 700; } .legend { display: flex; gap: 16px; font-size: 13.5px; color: var(--muted); font-weight: 700; flex-wrap: wrap; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; } .disp-table input { padding: 6px 10px; border-radius: var(--radius-sm); } .disp-table td { padding: 4px 6px; } .pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; } #view { min-width: 0; display: grid; gap: 18px; } /* ---------- alerts and health ---------- */ .alertbar { margin: 12px auto 0; background: var(--bad-soft); color: var(--bad-text); padding: 10px 18px; border-radius: var(--radius-md); font-size: 14.5px; font-weight: 700; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .alertbar a { color: var(--bad-text); } .okdot, .baddot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; } .okdot { background: var(--ok); } .baddot { background: var(--bad); } /* ---------- sign-in screens ---------- */ .auth-card { max-width: 440px; width: 100%; margin: 6vh auto 0; } .auth-card .brand { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 900; margin-bottom: 6px; } @media (max-width: 1272px) { header, nav.groups, nav.tabs, .alertbar { margin-left: 16px; margin-right: 16px; } } @media (max-width: 640px) { header { margin: 10px 10px 0; border-radius: 24px; } nav.groups { margin: 10px 10px 0; border-radius: 24px; } nav.tabs { margin: 10px 10px 0; } main { padding: 14px 10px 32px; } .card { padding: 18px 16px; border-radius: 20px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ===== admin core ===== */ /* Page heads, campaign cards, sectioned editors, filters, empty states, health rows and the start / sign-in pages. Tokens only. */ /* ---------- page head: title + subtitle + actions ---------- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding: 6px 4px 0; } .page-title { min-width: 0; flex: 1 1 320px; } .page-head h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 900; letter-spacing: -0.01em; } .page-head .sub { margin: 4px 0 0; font-size: 15px; max-width: 72ch; } .page-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* "Show archived" style toggle: a pill-shaped checkbox label */ label.toggle { display: inline-flex; align-items: center; gap: 10px; margin: 0; min-height: 44px; padding: 8px 16px; background: var(--panel); border: 2px solid var(--border); border-radius: var(--pill); font-size: 14.5px; font-weight: 800; color: var(--text); cursor: pointer; } label.toggle:hover { border-color: var(--border-strong); } label.toggle input { width: 18px; height: 18px; margin: 0; } label.toggle:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); } /* a select or input with its label beside it */ label.inline-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 800; color: var(--muted); } label.inline-field select, label.inline-field input { width: auto; color: var(--text); } /* link styled as a button */ a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: var(--pill); border: 2px solid var(--border); background: var(--panel); color: var(--text); font-size: 15px; font-weight: 800; text-decoration: none; transition: background-color .15s, border-color .15s; } a.btn:hover { border-color: var(--border-strong); background: var(--panel-2); color: var(--text); } a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } a.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-text); } /* ---------- campaign cards ---------- */ .camp-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); } .camp-card { background: var(--panel); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; min-width: 0; } .camp-card.archived { opacity: .8; } .camp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .camp-name { min-width: 0; } .camp-name h2 { margin: 0; font-size: 19px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; } .camp-name .sub { font-size: 12.5px; } .camp-top .pill { flex: 0 0 auto; } .camp-top .pill .dot { width: 8px; height: 8px; background: var(--ok); } .camp-mode { font-size: 14.5px; color: var(--muted); font-weight: 700; } .camp-meta { margin-top: -6px; } .camp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; } .camp-stats .stat { background: var(--panel-2); border-radius: 14px; padding: 10px 12px; min-width: 0; } .camp-stats .v { font-family: var(--mono); font-size: 20px; line-height: 1.25; font-variant-numeric: tabular-nums; } .camp-stats .k { font-size: 12.5px; color: var(--muted); font-weight: 700; line-height: 1.3; } .stat.tone-ok .v { color: var(--ok-text); } .stat.tone-warn .v { color: var(--warn-text); } .stat.tone-bad .v { color: var(--bad-text); } .camp-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); } .camp-actions .row { gap: 6px; } .camp-actions button { min-height: 38px; padding: 6px 14px; font-size: 14px; } button.stop { background: var(--bad-soft); border-color: transparent; color: var(--bad-text); } button.stop:hover { background: var(--bad-soft); border-color: var(--bad); } button.ghost:hover { background: var(--panel-2); border-color: transparent; } .camp-actions button.danger, td button.danger { background: var(--bad); color: #FFFFFF; border-color: var(--bad); } /* ---------- editors (campaign, agent, user) ---------- */ .card.narrow { max-width: 480px; } .editor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px; } .editor-head h2 { margin: 0; } .editor-head .sub { margin: 4px 0 0; } .editor-head button.ghost { flex: 0 0 auto; width: 44px; padding: 0; font-size: 18px; } .narrow > input { margin-top: 12px; } .form-section { padding: 18px 0 6px; border-top: 1px solid var(--border); margin-top: 14px; } .editor-head + .form-section { border-top: 0; margin-top: 4px; padding-top: 6px; } .form-section > h3 { margin: 0 0 2px; font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); } .form-section > .sub { margin: 0 0 4px; } .form label.check.wide { margin-top: 12px; } .form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; position: sticky; bottom: 0; z-index: 2; margin: 18px -24px -22px; padding: 14px 24px; background: var(--panel); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); } .narrow .form-actions { position: static; } /* calling days, agent queues: checkbox chips */ .day-picks { display: flex; flex-wrap: wrap; gap: 8px; } label.day { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; padding: 8px 14px; border: 2px solid var(--border); border-radius: var(--pill); background: var(--panel); font-size: 14.5px; font-weight: 800; cursor: pointer; } label.day input { margin: 0; width: 18px; height: 18px; } label.day:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); } .tablewrap.inset { border: 1px solid var(--border); border-radius: var(--radius-md); } .disp-table th { white-space: nowrap; } .disp-table input:not([type="checkbox"]) { min-width: 90px; } .disp-table td button { min-height: 34px; width: 34px; padding: 0; font-size: 18px; } /* ---------- filters row, tables in cards ---------- */ .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; } .filters > input, .filters > select { width: auto; min-height: 46px; } .filters > .grow { flex: 1 1 220px; min-width: 0; } .filters input[type="file"] { padding: 8px 12px; } .filter-card { padding-top: 18px; padding-bottom: 6px; } .table-card > .sub { margin-top: -6px; } td.actions { white-space: nowrap; } td.actions > * + * { margin-left: 6px; } td.chips { min-width: 140px; } td.chips.data { min-width: 320px; } td.notes { min-width: 160px; max-width: 320px; overflow-wrap: anywhere; } .nowrap { white-space: nowrap; } .chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .chips-row .chip { margin: 0; } .chip b { font-weight: 500; } code { font-family: var(--mono); font-size: .92em; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 0 6px; } .pager { flex-wrap: wrap; } tr.edit-row > td, tbody tr.edit-row:hover > td { background: var(--panel-2); padding: 16px; } .inline-editor { position: sticky; left: 0; max-width: min(1160px, calc(100vw - 76px)); } .inline-editor h3 { margin: 0 0 4px; } .inline-editor button { min-height: 44px; padding: 10px 18px; font-size: 15px; border-width: 2px; } .inline-editor input, .inline-editor select, .inline-editor textarea { background: var(--panel); } .report-body { display: grid; gap: 18px; min-width: 0; } /* ---------- empty states ---------- */ .empty { text-align: center; padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .empty strong { font-size: 17px; font-weight: 900; } .empty p { margin: 0 0 6px; color: var(--muted); max-width: 52ch; } tr.empty-row > td, tbody tr.empty-row:hover > td { background: transparent; } /* ---------- DNC lookup ---------- */ .lookup-result { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; } .lookup-result:empty { display: none; } /* ---------- system health ---------- */ .health-summary { display: flex; align-items: center; font-weight: 900; font-size: 17px; padding: 4px 4px 14px; } .health-summary.ok { color: var(--ok-text); } .health-summary.bad { color: var(--bad-text); } .health-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .health-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; background: var(--panel-2); border-radius: var(--radius-md); padding: 12px 16px; } .health-row.bad { background: var(--bad-soft); } .health-row .okdot, .health-row .baddot { margin: 0; width: 12px; height: 12px; } .health-main { min-width: 0; } .health-main .sub { overflow-wrap: anywhere; } .health-side { text-align: right; } .health-side .sub { font-size: 12.5px; margin-top: 2px; } /* ---------- audit log ---------- */ table.audit td { vertical-align: top; } table.audit td.detail { color: var(--muted); font-size: 14px; min-width: 240px; max-width: 560px; overflow-wrap: anywhere; } table.audit ul.changes { margin: 0; padding: 0; list-style: none; } table.audit ul.changes b { color: var(--text); } table.audit .from { text-decoration: line-through; text-decoration-color: var(--border-strong); } table.audit .to { color: var(--text); font-weight: 700; } table.audit summary { cursor: pointer; color: var(--accent); font-weight: 700; min-height: 24px; } table.audit pre { font-family: var(--mono); font-size: 12.5px; background: var(--panel-2); border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0 0; max-height: 320px; overflow: auto; white-space: pre-wrap; color: var(--text); } /* ---------- sign-in, reset ---------- */ .auth-card { padding: 34px 32px 28px; } .auth-card .brand { font-size: 28px; gap: 12px; margin-bottom: 18px; } .auth-card .brand .brand-mark { width: 44px; height: 44px; } .auth-card h2 { font-size: 24px; margin: 0; } .auth-lead { margin: 4px 0 8px; font-size: 15px; } .auth-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 18px; } .auth-actions button.primary { flex: 1 1 160px; min-height: 48px; font-size: 16px; } .auth-actions a { font-size: 14.5px; min-height: 44px; display: inline-flex; align-items: center; } .auth-sso { margin-top: 6px; } .auth-sso button { width: 100%; min-height: 48px; } .auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 800; margin: 6px 0 14px; } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-msg:empty { display: none; } .auth-msg { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--panel-2); font-weight: 700; } /* ---------- start page ---------- */ main.start { gap: 22px; } .start-hero { padding: 18px 4px 0; } .start-hero h1 { margin: 0; font-size: 36px; font-weight: 900; line-height: 1.15; } .start-hero .sub { font-size: 16px; margin: 6px 0 0; } .start-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .start-card { display: flex; flex-direction: column; gap: 4px; } .start-card h2 { margin: 8px 0 0; } .start-card p { margin: 4px 0 16px; flex: 1; } .start-icon { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: 24px; font-weight: 900; } .start-icon.coral { background: var(--coral-soft); color: var(--coral-text); } @media (max-width: 640px) { .page-head h1 { font-size: 26px; } .page-actions { width: 100%; } .page-actions > button.primary { flex: 1 1 auto; } .camp-card { padding: 18px 16px; border-radius: 20px; } .camp-actions button { min-height: 44px; } .camp-stats .v { font-size: 18px; } .form-actions { margin: 18px -16px -18px; padding: 12px 16px; border-radius: 0 0 20px 20px; } .form-actions button { flex: 1 1 auto; } .filters > input, .filters > select, .filters > button { flex: 1 1 140px; } label.inline-field { flex: 1 1 140px; } label.inline-field select, label.inline-field input { flex: 1; min-width: 0; } .health-row { grid-template-columns: auto 1fr; } .health-side { grid-column: 2; text-align: left; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .auth-card { padding: 26px 20px 22px; margin-top: 3vh; } .start-hero h1 { font-size: 28px; } } /* ===== admin modules ===== */ /* Feature pages (prompts, IVR, QA, live assist, webhooks, tokens, LeadSquared, coaching, rate cards, report emails). Tokens only. */ /* page title + subtitle + primary action, sitting on the page ground */ .mod-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding: 4px 4px 0; } .mod-head > div:first-child { min-width: 0; flex: 1 1 320px; } .mod-head h1 { margin: 0; font-size: 30px; font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; } .mod-head .mod-sub { margin: 4px 0 0; font-size: 15px; color: var(--muted); max-width: 820px; } .mod-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* placeholders for forms and panels take no space until filled */ #view > div:empty { display: none; } /* Let wide tables scroll inside their card instead of widening the page. */ #view > * { min-width: 0; } .mod-stack { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); } /* card heading with actions on the right */ .card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .card-head h2, .card-head h3 { flex: 1 1 auto; margin: 0; min-width: 0; } .card .lead-sub { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); max-width: 860px; } .sec-title { font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; } .card > .sec-title:first-child { margin-top: 0; } /* filter bar above a report */ .filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .filters input, .filters select { width: auto; max-width: 100%; } .filters .to { color: var(--muted); font-weight: 700; } .filters label.inline { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 14px; color: var(--muted); } /* compact action buttons in a table cell */ .act { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* empty states: say what to do */ td.empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 14.5px; } td.empty strong, .empty strong { display: block; color: var(--text); font-size: 15.5px; font-weight: 800; margin-bottom: 2px; } tbody tr:hover td.empty { background: transparent; } .empty { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 14.5px; background: var(--panel-2); border-radius: var(--radius-md); } /* callouts: info / warning / problem */ .callout { border-radius: var(--radius-md); padding: 12px 16px; margin: 10px 0; font-size: 14.5px; background: var(--accent-soft); color: var(--text); } .callout.warn { background: var(--warn-soft); } .callout.warn strong:first-child { color: var(--warn-text); } .callout.bad { background: var(--bad-soft); } .callout.bad strong:first-child { color: var(--bad-text); } .callout ul { margin: 6px 0 0; padding-left: 20px; } /* secrets shown once: a highlighted card */ .secret-card { background: var(--coral-soft); box-shadow: inset 0 0 0 2px var(--coral), var(--shadow); } .once { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--coral-text); margin-bottom: 6px; } .once::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); } .secret-card h2 { margin-bottom: 6px; } .secret-box { background: var(--coral-soft); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 12px; box-shadow: inset 0 0 0 2px var(--coral); } .secret-value { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; } .secret-value input { flex: 1 1 260px; width: auto; min-width: 0; font-family: var(--mono); font-size: 15px; background: var(--panel); border-color: var(--coral); } .masked { font-family: var(--mono); font-size: 13.5px; color: var(--muted); } /* checkbox choices laid out as pills (scopes, events, campaigns) */ .choices { display: flex; flex-wrap: wrap; gap: 8px; } .choices label.check, .form .choices label.check { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; padding: 8px 14px; border: 2px solid var(--border); border-radius: var(--pill); background: var(--panel); font-size: 14px; font-weight: 700; cursor: pointer; } .choices label.check:hover { border-color: var(--border-strong); } .choices label.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .choices label.check .sub { font-weight: 600; } .choices.stack { flex-direction: column; align-items: stretch; } .choices.stack label.check { border-radius: var(--radius-md); } /* editable rows (playbooks, rubric, agent maps) */ table.edit-table { width: 100%; } table.edit-table td { padding: 6px; vertical-align: top; } table.edit-table input, table.edit-table textarea, table.edit-table select { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 14.5px; } table.edit-table tbody tr:hover td { background: transparent; } table.edit-table td:last-child { width: 1%; white-space: nowrap; } /* status and score pills */ .pill.st-accent { background: var(--accent-soft); color: var(--accent-strong); } .pill.sc-good, .score-big.sc-good { background: var(--ok-soft); color: var(--ok-text); } .pill.sc-mid, .score-big.sc-mid { background: var(--warn-soft); color: var(--warn-text); } .pill.sc-low, .score-big.sc-low { background: var(--bad-soft); color: var(--bad-text); } .pill.sc-good, .pill.sc-mid, .pill.sc-low { font-family: var(--mono); font-weight: 500; } .score-big { font-family: var(--mono); font-size: 38px; line-height: 1; padding: 12px 18px; border-radius: var(--radius-md); background: var(--panel-2); } .chip.ok { background: var(--ok-soft); color: var(--ok-text); border-color: transparent; } .chip.warn { background: var(--warn-soft); color: var(--warn-text); border-color: transparent; } .err-text { color: var(--bad-text); } audio.inline { height: 36px; max-width: 260px; vertical-align: middle; } /* ---------- IVR builder ---------- */ .ivr-steps { display: grid; gap: 12px; margin: 10px 0 14px; } .ivr-step { background: var(--panel-2); border: 2px solid var(--border); border-radius: 20px; padding: 14px 16px; min-width: 0; } .ivr-step.first { border-color: var(--accent); } .ivr-step-head { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; } .ivr-num { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-family: var(--mono); font-weight: 500; font-size: 15px; } .ivr-step.first .ivr-num { background: var(--accent); color: var(--accent-text); } .ivr-step-head .ivr-id { flex: 0 1 170px; min-width: 120px; } .ivr-step-head .ivr-type { flex: 0 1 250px; min-width: 170px; } .ivr-step-head .ivr-note { flex: 1 1 160px; min-width: 140px; } .ivr-step-head .ivr-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; } .ivr-step .ivr-id input { font-family: var(--mono); font-size: 14.5px; } .ivr-step select, .ivr-add select { border-radius: var(--pill); padding-left: 16px; } .ivr-step .form { margin-top: 8px; } .pill.first-pill { background: var(--accent); color: var(--accent-text); } .ivr-keys { display: grid; gap: 8px; } .ivr-key { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ivr-key > select { width: auto; flex: 0 0 auto; } .ivr-key > .arrow { color: var(--muted); font-weight: 900; } .ivr-key > .target { flex: 1 1 200px; min-width: 0; } .ivr-sound { display: flex; gap: 8px; align-items: center; } .ivr-sound input { flex: 1 1 auto; min-width: 0; } .ivr-sound button { flex: 0 0 auto; } .ivr-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px; border: 2px dashed var(--border-strong); border-radius: 20px; } .ivr-add select { width: auto; max-width: 100%; } .ivr-hours td, .ivr-hours th { padding: 4px 10px 4px 0; border: 0; background: transparent; } .ivr-hours tbody tr:hover td { background: transparent; } .ivr-hours input[type="time"] { width: auto; padding: 7px 10px; border-radius: var(--radius-sm); } .ivr-hol { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0; } .ivr-hol input[type="date"] { width: auto; } .ivr-hol input:not([type]) { flex: 1 1 160px; width: auto; min-width: 0; } .ivr-outline { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 13.5px; line-height: 1.7; background: var(--panel-2); border-radius: var(--radius-md); padding: 14px 16px; color: var(--text); } fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; } /* ---------- reports extras: heatmap and cost ---------- */ .seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--panel-2); border-radius: var(--pill); } .seg button { border: 0; min-height: 36px; padding: 6px 14px; font-size: 14px; background: transparent; } .seg button.on { background: var(--accent); color: var(--accent-text); } .hm { width: auto; border-collapse: separate; border-spacing: 3px; font-size: 12px; font-variant-numeric: tabular-nums; } .hm th { font-weight: 500; color: var(--muted); padding: 2px 4px; text-align: center; background: transparent; font-family: var(--mono); font-size: 11.5px; border: 0; } .hm th.day { text-align: right; padding-right: 8px; font-family: var(--font); font-weight: 800; font-size: 12.5px; } .hm td { width: 46px; min-width: 40px; height: 40px; text-align: center; border-radius: 10px; padding: 0; border: 0; line-height: 1.15; cursor: default; background: var(--panel-2); color: var(--text); } .hm td b { display: block; font-weight: 800; font-size: 12px; } .hm td small { display: block; font-size: 10px; font-family: var(--mono); } /* Teal scale, light to strong. The two strongest steps flip to the accent text colour so every cell keeps at least 4.5:1 in both themes. */ .hm td.l1, .hm tbody tr:hover td.l1, .ramp i.l1 { background: color-mix(in srgb, var(--accent-strong) 8%, var(--panel)); } .hm td.l2, .hm tbody tr:hover td.l2, .ramp i.l2 { background: color-mix(in srgb, var(--accent-strong) 18%, var(--panel)); } .hm td.l3, .hm tbody tr:hover td.l3, .ramp i.l3 { background: color-mix(in srgb, var(--accent-strong) 28%, var(--panel)); } .hm td.l4, .hm tbody tr:hover td.l4, .ramp i.l4 { background: color-mix(in srgb, var(--accent-strong) 40%, var(--panel)); } .hm td.l5, .hm tbody tr:hover td.l5, .ramp i.l5 { background: color-mix(in srgb, var(--accent-strong) 84%, var(--panel)); color: var(--accent-text); } .hm td.l6, .hm tbody tr:hover td.l6, .ramp i.l6 { background: var(--accent-strong); color: var(--accent-text); } .hm td.low, .hm tbody tr:hover td.low { background: repeating-linear-gradient(135deg, var(--panel-2), var(--panel-2) 4px, var(--border) 4px, var(--border) 6px); color: var(--text); } .hm td.none, .hm tbody tr:hover td.none { background: var(--panel-2); color: var(--muted); } .hm td:hover { box-shadow: inset 0 0 0 2px var(--text); } .hmlegend { display: flex; gap: 10px 18px; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--muted); margin: 12px 0 4px; } .hmlegend .ramp { display: inline-flex; gap: 3px; vertical-align: middle; margin: 0 8px; } .hmlegend .ramp i { width: 22px; height: 14px; border-radius: 5px; display: inline-block; } .hmlegend .lowsw { width: 22px; height: 14px; border-radius: 5px; display: inline-block; vertical-align: middle; margin-right: 6px; background: repeating-linear-gradient(135deg, var(--panel-2), var(--panel-2) 4px, var(--border) 4px, var(--border) 6px); } .besthours { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 8px; } .besthours > div { background: var(--panel-2); border-radius: var(--radius-md); padding: 10px 14px; display: flex; gap: 10px; align-items: center; } .besthours .rank { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-text); font-family: var(--mono); font-size: 13px; } .besthours strong { display: block; font-size: 14.5px; } .costgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); margin: 14px 0; } .costgrid > div, #costCard, #heatmapCard { min-width: 0; } .costgrid > div { background: var(--panel-2); border-radius: 20px; padding: 12px 14px; } .costgrid h3 { font-size: 13px; margin: 2px 4px 8px; color: var(--muted); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .costgrid th { background: var(--panel); } .costgrid tbody tr:hover td { background: var(--panel); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } iframe.preview { width: 100%; height: 900px; border: 0; border-radius: var(--radius-md); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--border); } /* ---------- QA ---------- */ .qa-score { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 14px 0; } .tips { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; } .tips li { background: var(--coral-soft); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 14.5px; } @media (max-width: 640px) { .mod-head h1 { font-size: 26px; } .mod-actions, .mod-actions button { width: 100%; } .filters > input, .filters > select, .filters > button { flex: 1 1 140px; } .ivr-step { padding: 12px; } .ivr-step-head .ivr-tools { margin-left: 0; } .secret-value button { flex: 1 1 auto; } } /* ===== broadcast ===== */ /* Power and agentless dialling: campaign editor (admin-broadcast.js) and live floor (live.js). Only Lagoon tokens; dark mode follows them. */ .bc-sections [hidden], .lv-lane[hidden] { display: none !important; } .bc-report[hidden] { display: none; } /* Agentless campaigns show a fifth lane, "Playing message". */ .lv-camp.bc-agentless .lv-lanes { grid-template-columns: repeat(5, minmax(0, 1fr)); } @container (max-width: 760px) { .lv-camp.bc-agentless .lv-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container (max-width: 480px) { .lv-camp.bc-agentless .lv-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lv-call.agentless { background: var(--call-soft); color: var(--call-text); } .lv-call.dot.agentless { background: var(--call); } [data-o="message"] { --c: var(--call); --c-soft: var(--call-soft); --c-text: var(--call-text); } [data-o="optout"] { --c: var(--warn); --c-soft: var(--warn-soft); --c-text: var(--warn-text); } /* ===== crm connectors ===== */ /* Salesforce / Zoho CRM / HubSpot: a status card per CRM, then the chosen one's settings (admin-crm.js). Tokens only. */ .crm-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .crm-card { display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); } .crm-card.selected { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-lift); } .crm-top { display: flex; align-items: flex-start; gap: 12px; } .crm-top .pill { flex: 0 0 auto; } .crm-name { min-width: 0; flex: 1 1 auto; } .crm-name h2 { margin: 0; font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; } .crm-name .sub { overflow-wrap: anywhere; } .crm-badge { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; font-weight: 900; font-size: 18px; background: var(--accent-soft); color: var(--accent-strong); } .crm-badge.crm-zoho { background: var(--coral-soft); color: var(--coral-text); } .crm-badge.crm-hubspot { background: var(--warn-soft); color: var(--warn-text); } .crm-badge.crm-salesforce { background: var(--call-soft); color: var(--call-text); } .crm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .crm-stats .stat { background: var(--panel-2); border-radius: 14px; padding: 10px 12px; min-width: 0; } .crm-stats .v { font-family: var(--mono); font-size: 20px; line-height: 1.25; font-variant-numeric: tabular-nums; } .crm-stats .k { font-size: 12.5px; color: var(--muted); font-weight: 700; line-height: 1.3; } .crm-err { background: var(--bad-soft); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 14px; overflow-wrap: anywhere; } .crm-err .sub { color: var(--bad-text); font-weight: 700; } .crm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; } #crm_detail .form-section { margin-top: 18px; } #crm_detail .form .sub { margin-top: 4px; } #crm_detail textarea.mono { font-size: 14px; } @media (max-width: 640px) { .crm-actions button { flex: 1 1 auto; } .crm-stats .v { font-size: 18px; } } /* ===== voicebots ===== */ .vb-opening { margin: 0; padding: 12px 16px; background: var(--accent-soft); color: var(--text); border-radius: var(--radius-md); font-size: 15px; } .vb-note { color: var(--warn-text); } .vb-problems:not(:empty) { margin-top: 14px; padding: 12px 16px; background: var(--bad-soft); color: var(--bad-text); border-radius: var(--radius-md); } .vb-problems ul { margin: 6px 0 0; padding-left: 20px; } .vb-phrases { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .vb-phrases summary { cursor: pointer; font-weight: 800; color: var(--accent-strong); } .vb-phrases .form { margin-top: 8px; } .vb-editor .form label.check.wide { margin-top: 6px; align-items: flex-start; } .vb-chat { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding: 12px; background: var(--panel-2); border-radius: var(--radius-md); } .vb-chat > .sub { margin: 0; } .vb-msg { max-width: min(78%, 640px); padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; } .vb-msg .vb-who { display: block; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 2px; } .vb-msg .chips-row { margin: 6px 0 0; } .vb-bot { align-self: flex-start; background: var(--panel); border: 1px solid var(--border); border-bottom-left-radius: 6px; } .vb-you { align-self: flex-end; background: var(--accent-soft); border-bottom-right-radius: 6px; } .vb-sys { align-self: center; max-width: 100%; background: var(--coral-soft); color: var(--coral-text); font-size: 13.5px; } .vb-input { margin-top: 10px; flex-wrap: nowrap; } .vb-input input { flex: 1 1 auto; min-width: 0; } .vb-transcript { margin-top: 14px; } .vb-transcript .vb-chat { max-height: 520px; } .pill.st-bot { background: var(--machine-soft); color: var(--machine-text); } .vb-handoff { border-left: 6px solid var(--machine); } .vb-handoff .vb-summary { margin: 0 0 8px; font-size: 15px; } .vb-handoff details summary { cursor: pointer; font-weight: 800; color: var(--accent-strong); } @media (max-width: 640px) { .vb-msg { max-width: 92%; } } /* ===== AI supervisor (admin-aisup.js, live-aisup.js, aisup-cards.js) ===== */ .ai-list { display: grid; gap: 12px; } .ai-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; display: grid; gap: 6px; min-width: 0; } .ai-card.ai-live { border-left: 6px solid var(--bad); } .ai-card-top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .ai-card-top h3 { margin: 0; font-size: 16px; font-weight: 800; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; } .ai-card p { margin: 0; overflow-wrap: anywhere; } .ai-target { font-weight: 700; color: var(--accent-strong); font-size: 14px; } .ai-why { font-size: 14.5px; } .ai-effect { font-size: 14px; color: var(--muted); } .ai-meta { font-size: 12.5px; color: var(--muted); } .ai-error { color: var(--bad-text); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; } .ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .ai-reject input { width: 100%; } .ai-answer { display: grid; gap: 10px; margin-top: 10px; } .ai-answer-text { white-space: pre-wrap; font-size: 15px; margin: 0; overflow-wrap: anywhere; } .ai-headline { font-size: 18px; font-weight: 800; margin: 0 0 10px; } .ai-kv { margin-top: 6px; } .ai-kv dd { overflow-wrap: anywhere; min-width: 0; } .ai-form { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .ai-hist-note { max-width: 320px; overflow-wrap: anywhere; font-size: 13.5px; } .ai-askrow { display: flex; gap: 8px; } .ai-askrow input { flex: 1 1 auto; min-width: 0; } .ai-note, .ai-empty { margin: 0; font-size: 14px; } .ai-count { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: var(--pill); background: var(--pause-soft); color: var(--pause-text); font-weight: 800; } #aiBtn.ai-has .ai-count { background: var(--coral); color: var(--on-strong); } @media (max-width: 640px) { .ai-askrow { flex-direction: column; } .ai-actions button { flex: 1 1 auto; } } .lv-drawer .ai-card-top h3 { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--text); } /* ===== call actions ===== */ .ca-bar { align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .ca-bar .seg { flex-wrap: wrap; border-radius: var(--radius-md); } .ca-pre { margin: 6px 0 0; padding: 12px 14px; background: var(--panel-2); border-radius: var(--radius-md); font-family: var(--mono, ui-monospace, monospace); font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow-y: auto; } .ca-url { font-size: 12.5px; overflow-wrap: anywhere; } .ca-wrap { overflow-wrap: anywhere; max-width: 360px; } .ca-rows input { min-width: 90px; } .ca-test, .ca-vars { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .ca-test summary, .ca-vars summary { cursor: pointer; font-weight: 800; color: var(--accent-strong); } .ca-test .form { margin-top: 8px; } .ca-vars ul { margin: 8px 0 0; padding-left: 20px; columns: 2; column-gap: 24px; } .ca-card .ca-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; } .ca-card .ca-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .ca-card .ca-field { display: flex; flex-direction: column; gap: 4px; } .ca-runs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ca-runs li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; background: var(--panel-2); border-radius: var(--radius-md); } .ca-runs .ca-run-name { font-weight: 800; } .ca-runs .ca-result { font-weight: 700; color: var(--accent-strong); overflow-wrap: anywhere; } @media (max-width: 640px) { .ca-vars ul { columns: 1; } .ca-wrap { max-width: none; } } /* ===== Answer-rate diagnosis (admin-diagnosis.js) ===== */ .dg-card { border-left: 6px solid var(--border-strong); } .dg-card.dg-warning { border-left-color: var(--warn); } .dg-card.dg-info { border-left-color: var(--call); } .dg-card .card-head { gap: 10px; flex-wrap: wrap; } .dg-card .card-head .chips-row { margin: 0; } .dg-card > .sub { margin: 0 0 6px; } .dg-summary { font-size: 16px; line-height: 1.5; margin: 6px 0 12px; overflow-wrap: anywhere; } .dg-actions { display: grid; gap: 10px; margin: 6px 0 12px; } .dg-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .dg-act .sub { flex: 1 1 220px; min-width: 0; } .dg-act select.dg-hours { width: auto; } .dg-taken { color: var(--ok-text); } .dg-more:empty { display: none; } .dg-fig { margin: 12px 0 4px; } .dg-chart { width: 100%; height: auto; display: block; background: var(--panel-2); border-radius: var(--radius-sm); } .dg-chart .grid { stroke: var(--border); stroke-width: 1; } .dg-chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--mono); } .dg-chart path { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .dg-chart path.seg { stroke: var(--bad); } .dg-chart path.rest { stroke: var(--accent); stroke-dasharray: 6 5; stroke-width: 2; } .dg-chart .dot { fill: var(--bad); } .dg-key { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--bad); vertical-align: middle; margin: 0 6px 0 0; } .dg-key.rest { border-top: 3px dashed var(--accent); margin-left: 10px; } .dg-evidence tr.dg-flag td { background: var(--bad-soft); } .dg-evidence tr.dg-flag td:first-child { box-shadow: inset 4px 0 0 var(--bad); } .dg-clip { max-width: 520px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dg-bars { display: flex; align-items: flex-end; gap: 2px; height: 56px; margin: 14px 0; padding: 6px; background: var(--panel-2); border-radius: var(--radius-sm); } .dg-bar { flex: 1 1 0; min-width: 2px; height: 100%; display: flex; align-items: flex-end; } .dg-bar i { display: block; width: 100%; background: var(--warn); border-radius: 3px 3px 0 0; min-height: 0; } .dg-autos { display: grid; gap: 10px; margin: 8px 0; } .dg-auto { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 400; } .dg-auto input { width: auto; margin-top: 4px; } .dg-save { margin-top: 12px; } .lv-diaglink { color: inherit; font-weight: 800; text-decoration: underline; } @media (max-width: 640px) { .dg-summary { font-size: 15px; } .dg-clip { max-width: 240px; } } /* ===== complaint shield ===== */ .sh-legal { margin: 0 0 16px; padding: 12px 16px; background: var(--coral-soft); color: var(--coral-text); border-radius: var(--radius-md); font-size: 14.5px; } .sh-tiles { margin-bottom: 16px; } .tile.tone-ok .v { color: var(--ok-text); } .tile.tone-warn .v { color: var(--warn-text); } .tile.tone-bad .v { color: var(--bad-text); } .sh-tiles .tile .v { overflow-wrap: anywhere; } .pill.sh-risk { white-space: nowrap; } .sh-riskbox { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .sh-reasons { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); } .sh-numrisk { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; margin: 4px 0 14px; padding: 12px 16px; background: var(--panel-2); border-radius: var(--radius-md); } .sh-ev { min-width: 260px; font-size: 13.5px; overflow-wrap: anywhere; } .sh-actions { margin-top: 12px; } .sh-reason { width: auto; min-width: 0; flex: 1 1 160px; } td.actions:has(.sh-reason) { display: flex; gap: 8px; flex-wrap: wrap; min-width: 220px; } .sh-sub { margin: 18px 0 8px; } .sh-pats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .sh-pat { padding: 12px 14px; background: var(--panel-2); border-radius: var(--radius-md); min-width: 0; } .sh-pat h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .sh-pat ul { list-style: none; margin: 0; padding: 0; } .sh-pat li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; overflow-wrap: anywhere; } .sh-words summary { cursor: pointer; font-weight: 800; color: var(--accent-strong); margin-top: 8px; } .sh-slot:not(:empty) { margin-left: 6px; } .ag-shield { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; } .ag-shield .ag-risk-why { flex: 1 1 200px; min-width: 0; } /* ===== cost optimiser (admin-costpacing.js) ===== */ .cp-panel { display: flex; flex-direction: column; gap: 18px; } .cp-panel > .card, .cp-panel .card { margin: 0; } .cp-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; } .cp-head h2 { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .cp-head .sub { margin: 4px 0 0; max-width: 70ch; } .cp-sub { margin: 18px 0 8px; font-size: 16px; } .cp-decisions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .cp-decisions li { background: var(--panel-2); border-radius: var(--radius-sm); padding: 10px 14px; line-height: 1.45; overflow-wrap: anywhere; } .cp-decisions .chip { margin: 0 6px 0 0; } .cp-live { margin: 12px 0 0; } .cp-note { margin: 10px 16px 14px; } .cp-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; margin: 10px 0; } .cp-hour { border-radius: 10px; padding: 6px 4px; text-align: center; font-size: 12.5px; line-height: 1.25; position: relative; } .cp-hour b { display: block; font-family: var(--mono); font-size: 13px; font-weight: 500; } .cp-hour span { font-variant-numeric: tabular-nums; } .cp-hour i { display: block; font-style: normal; font-size: 11px; font-weight: 800; } .cp-hour.none { background: var(--panel-2); color: var(--muted); } .cp-hour.lo2, .cp-sw.lo2 { background: var(--bad-soft); color: var(--bad-text); } .cp-hour.lo1, .cp-sw.lo1 { background: var(--warn-soft); color: var(--warn-text); } .cp-hour.hi1, .cp-sw.hi1 { background: var(--accent-soft); color: var(--accent-strong); } .cp-hour.hi2, .cp-sw.hi2 { background: var(--accent); color: var(--accent-text); } .cp-legend .cp-sw { border-radius: 3px; } .cp-grid { align-items: start; } .cp-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; margin: 8px 0; } .cp-dl dt { color: var(--muted); font-weight: 700; } .cp-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .cp-levers { display: flex; flex-wrap: wrap; gap: 6px 18px; } @media (max-width: 640px) { .cp-dl { grid-template-columns: 1fr; } .cp-dl dd { text-align: left; } } /* ===== Hinglish: Devanagari text, never-say lines, test a sentence ===== */ /* Devanagari falls back to the system's Hindi font (no web font is loaded: nothing is fetched from third parties). Matras need extra line height. */ :lang(hi) { font-family: "Nunito", "Noto Sans Devanagari", "Nirmala UI", "Mangal", "Kohinoor Devanagari", "Devanagari Sangam MN", "Lohit Devanagari", "Shree Devanagari 714", system-ui, sans-serif; line-height: 1.6; } #assistCheck li.broken { color: var(--bad-text); font-weight: 700; } #assistCheck li.broken::before { content: "!" / "said: avoid"; background: var(--bad); border-color: var(--bad); color: var(--panel); } #assistHints .hint.k-tone { background: var(--bad-soft); } #assistHints .hint.k-tone .hint-label { color: var(--bad-text); } .lv-flag { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn-text); font-size: 13.5px; margin-bottom: 6px; overflow-wrap: anywhere; } .lv-flag[data-kind="frustration"], .lv-flag[data-kind="compliance"] { background: var(--bad-soft); color: var(--bad-text); } .as-lang { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .as-lang select { width: 100%; } td.as-alts { min-width: 240px; } .as-test:empty { display: none; } .as-test { margin-top: 14px; display: grid; gap: 10px; overflow-wrap: anywhere; } .as-test h3 { font-size: 14px; margin: 6px 0; } .as-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .as-results li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .as-results .as-mark { flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; background: var(--panel-2); color: var(--muted); } .as-results li.as-yes .as-mark { background: var(--ok); color: var(--panel); } .as-results li.as-bad .as-mark { background: var(--bad); color: var(--panel); } .as-results li.as-no { color: var(--muted); } .pill.as-pill-bad { background: var(--bad-soft); color: var(--bad-text); } .pill.as-pill-warn { background: var(--warn-soft); color: var(--warn-text); } /* ===== Phone agents: audio picker, phone line card, live floor icon ===== */ .ap-modes { border: 0; padding: 0; margin: 12px 0 4px; display: grid; gap: 6px; min-width: 0; } .ap-modes legend { font-weight: 700; margin-bottom: 6px; padding: 0; } .ap-mode { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--panel-2); cursor: pointer; font-weight: 400; margin: 0; } .ap-mode input { margin: 3px 0 0; flex: none; width: auto; height: auto; padding: 0; border: 0; box-shadow: none; background: none; appearance: auto; accent-color: var(--accent); } .ap-mode > span { display: grid; min-width: 0; } .ap-mode .sub { font-size: 13px; } .ap-mode:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); } .ap-mode:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .ap-note:empty { display: none; } .ap-card .ap-text { margin: 8px 0; overflow-wrap: anywhere; } .ap-keys { margin: 6px 0; padding-left: 18px; } .ap-change .ag-line { margin-top: 8px; } .ap-change .ag-line input { min-width: 0; } .pa-cost p { overflow-wrap: anywhere; } .lv-audio { order: 1; margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); color: var(--muted); } .lv-audio svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .lv-audio.warn { background: var(--warn-soft); color: var(--warn-text); } .lv-audio.bad { background: var(--bad-soft); color: var(--bad-text); } /* ===== Agent app: remembered devices (admin-agentapp.js) ===== */ .aa-slot { display: grid; gap: 18px; } .aa-foot { margin-top: 10px; } .aa-msgrow { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; gap: 8px; } @media (max-width: 640px) { .aa-msgrow { grid-template-columns: minmax(0, 1fr); } } .aa-check { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; } /* ===== Network quality (docs/NETWORK_QUALITY.md) ===== */ /* Grade colours: good = ok, fair = call blue, poor = warn, bad = bad. */ .nq-good { --nq: var(--ok); --nq-soft: var(--ok-soft); --nq-text: var(--ok-text); } .nq-fair { --nq: var(--call); --nq-soft: var(--call-soft); --nq-text: var(--call-text); } .nq-poor { --nq: var(--warn); --nq-soft: var(--warn-soft); --nq-text: var(--warn-text); } .nq-bad { --nq: var(--bad); --nq-soft: var(--bad-soft); --nq-text: var(--bad-text); } .nq-none { --nq: var(--pause); --nq-soft: var(--pause-soft); --nq-text: var(--pause-text); } .nq-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; } .nq-bars i { display: block; width: 4px; border-radius: 2px; background: var(--border-strong); } .nq-bars i:nth-child(1) { height: 25%; } .nq-bars i:nth-child(2) { height: 50%; } .nq-bars i:nth-child(3) { height: 75%; } .nq-bars i:nth-child(4) { height: 100%; } .nq-bars i.on { background: var(--nq, var(--accent)); } /* Agent panel: the indicator in the header and its details. */ .nq-ind { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--pill); background: var(--nq-soft); color: var(--nq-text); border: 1px solid transparent; font-weight: 800; min-height: 36px; } .nq-ind:hover { border-color: var(--nq); } .nq-ind.hidden { display: none; } .nq-pop { position: fixed; top: 64px; right: 16px; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 80px); overflow: auto; z-index: 40; box-shadow: var(--shadow-lift); } .nq-pop.hidden { display: none; } .nq-pophead { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .nq-pophead h2 { margin: 0; } .nq-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0; font-size: 14px; } .nq-kv dt { color: var(--muted); } .nq-kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; } .nq-tip { margin: 8px 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn-text); font-weight: 700; } .nq-tip.sub { background: var(--panel-2); color: var(--muted); font-weight: 400; } .nq-note { margin: 8px 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bad-soft); color: var(--bad-text); font-weight: 700; } .nq-testrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; } .nq-testhead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; } .nq-advice { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; } .pill.nq-pill { background: var(--nq-soft); color: var(--nq-text); } /* Live floor: badge on each agent card, banner, filter chip, drawer chart. */ .nq-badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; max-width: 100%; border-radius: var(--pill); background: var(--panel); color: var(--nq-text); font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nq-badge .nq-bars { height: 12px; flex: 0 0 auto; } .nq-badge .nq-bars i { width: 3px; } .nq-badge.nq-poor, .nq-badge.nq-bad { background: var(--nq-soft); box-shadow: inset 0 0 0 1px var(--nq); } .nq-badge.hidden { display: none; } .nq-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--bad-soft); color: var(--bad-text); font-weight: 700; overflow-wrap: anywhere; } .nq-banner.hidden { display: none; } .nq-chip { --c: var(--warn); --c-soft: var(--warn-soft); --c-text: var(--warn-text); } .nq-chart { width: 100%; height: auto; display: block; } .nq-chart .grid { stroke: var(--border); stroke-width: 1; } .nq-chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--font); } .nq-chart .mos { fill: none; stroke: var(--accent); stroke-width: 2.5; } .nq-chart .loss { fill: var(--bad-soft); stroke: var(--bad); stroke-width: 1; } .nq-chart .cust { fill: none; stroke: var(--call); stroke-width: 2; stroke-dasharray: 5 4; } .nq-chart .band { fill: var(--warn-soft); opacity: 0.5; } .nq-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 6px 0 0; } .nq-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; background: var(--accent); } .nq-legend .l-loss i { background: var(--bad); } .nq-legend .l-cust i { background: var(--call); } /* Wallboard summary pill. */ .wb-nq.hidden { display: none; } /* Admin: network report and call quality. */ .nq-verdict { white-space: nowrap; } .nq-sum { margin: 8px 0 0; } /* ===== Keys & integrations (admin-keys.js, docs/KEYS.md) ===== */ .keys-intro { margin: 0 0 8px; } .keys-group { margin-top: 18px; } .keys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; } .keys-card { min-width: 0; margin: 0; } .keys-card .lead-sub { margin-bottom: 10px; } .keys-fields { display: grid; gap: 12px; } .keys-field { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; } .keys-field.broken { border-color: var(--warn); } .keys-field-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .keys-field-top label { margin: 0; font-weight: 800; } .sm-pill { font-size: 12px; padding: 2px 10px; } .keys-now { margin: 4px 0 6px; font-size: 14px; overflow-wrap: anywhere; } .keys-val { font-size: 13px; } .keys-edit { display: flex; gap: 8px; align-items: center; } .keys-edit input { flex: 1 1 auto; min-width: 0; } .keys-env, .keys-when { margin-top: 4px; overflow-wrap: anywhere; } .keys-uses { margin: 0 0 10px; padding-left: 18px; font-size: 14px; } .keys-uses li { margin: 2px 0; overflow-wrap: anywhere; } .keys-reload { font-size: 13.5px; } .keys-actions { margin-top: 12px; flex-wrap: wrap; align-items: center; } .keys-res { overflow-wrap: anywhere; min-width: 0; } .keys-res.ok { color: var(--ok-text); } .keys-res.bad { color: var(--bad-text); } /* ---------- integration activity (admin-intlog.js) ---------- */ .chip.bad { background: var(--bad-soft); color: var(--bad-text); border-color: transparent; } button.chip { cursor: pointer; font-family: inherit; color: var(--text); min-height: 32px; } button.chip.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .ilog-filters { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ilog-filters select { width: auto; min-width: 150px; flex: 0 0 auto; } .ilog-search { flex: 1 1 240px; min-width: 0; } .ilog-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; } .ilog-list { margin: 0; padding: 0; } .ilog-list tr[data-id] { cursor: pointer; } .ilog-list tr.selected td { background: var(--accent-soft); } .ilog-detail { margin: 0; min-width: 0; } .ilog-side { position: sticky; top: 12px; min-width: 0; max-height: calc(100vh - 24px); overflow-y: auto; } .ilog-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 12px; font-size: 14px; } .ilog-kv dt { color: var(--muted); } .ilog-kv dd { margin: 0; overflow-wrap: anywhere; } .ilog-url { overflow-wrap: anywhere; margin: 4px 0; } .ilog-pre { margin: 4px 0 10px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12.5px; max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; } .ilog-detail h3 { margin: 14px 0 2px; font-size: 16px; } .ilog-detail h4 { margin: 8px 0 0; font-size: 13px; color: var(--muted); } .ilog-actions { margin-top: 12px; gap: 8px; flex-wrap: wrap; } @media (max-width: 900px) { .ilog-layout { grid-template-columns: minmax(0, 1fr); } .ilog-side { position: static; max-height: none; } } /* ===== admin shell redesign (phase 1): side menu, overview, campaigns, agents, calls, integrations hub ===== */ /* Everything below is scoped to body.admin so the live floor, wallboard and agent screens that share this file are untouched. Tokens only. */ body.admin { min-height: 100vh; } body.admin .app { display: flex; gap: 16px; padding: 16px; align-items: flex-start; min-height: 100vh; } body.admin .app-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; } body.admin header, body.admin .alertbar, body.admin main { max-width: none; width: 100%; margin: 0; } body.admin header { padding: 8px 14px 8px 18px; border-radius: var(--radius-md); min-height: 56px; } body.admin main { padding: 0 0 32px; } body.admin.signed-in header h1 { display: none; } body.admin header .hide-sm { white-space: nowrap; } body.admin header #who { font-size: 14px; font-weight: 700; } .health-pill { text-decoration: none; padding: 5px 12px !important; font-size: 13.5px !important; } .health-pill .okdot, .health-pill .baddot { margin-right: 0; } .menu-btn { display: none; min-height: 40px; width: 44px; padding: 0; font-size: 20px; line-height: 1; border-radius: var(--radius-sm); } .scrim { display: none; } /* side menu: a full-height rounded card, like the agent screen's */ .sidenav { flex: 0 0 252px; width: 252px; position: sticky; top: 16px; height: calc(100vh - 32px); background: var(--panel); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; padding: 16px 12px; min-height: 0; } .sidenav.hidden { display: none; } .sidenav-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 12px; font-weight: 900; font-size: 19px; } .sidenav-tag { margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--accent-strong); background: var(--accent-soft); padding: 2px 8px; border-radius: var(--pill); } .sidenav .groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; padding: 0; margin: 0; background: none; box-shadow: none; border-radius: 0; } .nav-group { font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 3px; } .nav-item { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--text); text-decoration: none; } .nav-item:hover { background: var(--panel-2); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 900; } .sidenav-foot { border-top: 1px solid var(--border); padding: 10px 8px 0; margin-top: 8px; display: flex; align-items: center; gap: 10px; } .who-text { min-width: 0; } .who-name { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--coral-soft); color: var(--coral-text); font-weight: 900; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } .avatar.lg { width: 46px; height: 46px; font-size: 17px; } /* sub tabs (integrations hub, agent editor) */ .subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; } .subtabs button { min-height: 36px; padding: 6px 16px; font-size: 14px; background: var(--panel); border: 1px solid var(--border); color: var(--muted); } .subtabs button:hover { color: var(--text); } .subtabs button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); } .hubbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; justify-content: space-between; } .hubbar.hidden { display: none; } .hubbar .subtabs { margin: 0; } .hubbar .crumbs { font-size: 14.5px; color: var(--muted); } .hubbar .crumbs a { text-decoration: none; } /* overview */ .ov-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .ov-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 16px 18px; min-width: 0; } .ov-tile .k { font-size: 13.5px; font-weight: 800; color: var(--muted); } .ov-tile .v { font-size: 34px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; } .ov-tile .v small { font-size: 16px; font-weight: 700; color: var(--muted); } .ov-tile .s { font-size: 13px; font-weight: 700; color: var(--muted); } .ov-tile.tone-ok .s { color: var(--ok-text); } .ov-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } .ov-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .ov-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .ov-head h2 { margin: 0; font-size: 18px; } .ov-note { margin: 0; } .ov-table th { font-size: 12.5px; } .ov-chart { width: 100%; height: auto; display: block; max-height: 220px; } .ov-bar { fill: var(--accent-soft); } .ov-bar.now { fill: var(--accent); } .ov-bar.future { fill: var(--panel-2); } .ov-val { font: 700 11px var(--font); fill: var(--muted); } .ov-axis { font: 700 11px var(--font); fill: var(--muted); } .ov-base { stroke: var(--border); stroke-width: 1; } .ov-bar-track { height: 8px; border-radius: var(--pill); background: var(--panel-2); margin-bottom: 12px; overflow: hidden; } .ov-bar-track > div { height: 100%; background: var(--accent); border-radius: var(--pill); } .ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; } .ov-check, .ov-look { display: flex; gap: 10px; align-items: center; } .ov-check.todo { background: var(--warn-soft); border-radius: 12px; padding: 6px 10px; } .ov-check.todo a { color: var(--warn-text); } .ov-mark { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; } .ov-check.done .ov-mark { background: var(--accent); color: var(--accent-text); } .ov-check.todo .ov-mark { border: 2px solid var(--warn); } .ov-ck-label, .ov-look-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .ov-tag { flex: 0 0 auto; font-size: 12px; font-weight: 900; padding: 2px 8px; border-radius: var(--pill); background: var(--pause-soft); color: var(--pause-text); } .ov-tag.tone-warn { background: var(--warn-soft); color: var(--warn-text); } .ov-tag.tone-bad { background: var(--bad-soft); color: var(--bad-text); } .ov-tag.tone-call { background: var(--call-soft); color: var(--call-text); } .ov-tag.tone-ok { background: var(--ok-soft); color: var(--ok-text); } /* campaigns list */ .camp-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; } .camp-filters .chips-row { margin: 0; } .camp-search { width: min(100%, 320px); border-radius: var(--pill); } .camp-empty { grid-column: 1 / -1; } body.admin .camp-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); } /* two-pane editors (campaign sections, agent tabs) */ .ed-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; } .ed-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px; } .ed-nav-item { justify-content: flex-start; text-align: left; border: 0; background: transparent; border-radius: 12px; min-height: 40px; padding: 8px 14px; font-weight: 700; } .ed-nav-item:hover { background: var(--panel-2); } .ed-nav-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 900; } .ed-body { min-width: 0; } .ed-pane { display: none; } .ed-pane.on { display: block; } .ed-pane > .form-section:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .sticky-save { position: sticky; bottom: 0; z-index: 2; margin: 18px 0 0; padding: 14px 0; background: var(--panel); border-radius: 0; } .ag-editor .sticky-save { margin: 18px 0 0; } /* agents */ .ag-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: 16px; align-items: start; } .ag-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; } .ag-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 84px; gap: 12px; align-items: center; text-align: left; width: 100%; border: 0; background: transparent; border-radius: 14px; padding: 8px 12px; min-height: 56px; font-weight: 400; } .ag-row:hover { background: var(--panel-2); } .ag-row.selected { background: var(--accent-soft); } .ag-main { display: flex; flex-direction: column; min-width: 0; } .ag-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; } .ag-main .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-calls { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; } .ag-calls b { font-size: 18px; font-variant-numeric: tabular-nums; } .ag-editor { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; min-width: 0; } .ag-head { display: flex; align-items: center; gap: 12px; min-width: 0; } .ag-head h2 { margin: 0; } .ag-editor .form { grid-template-columns: minmax(0, 1fr); } /* calls */ .calls-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; align-items: start; } .calls-list { padding: 8px 12px; } .calls-list tr[data-id] { cursor: pointer; } .calls-list tr.selected td { background: var(--accent-soft); } .rec-dot { color: var(--accent); font-size: 12px; } .call-detail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; min-width: 0; } .call-detail h3 { margin: 14px 0 6px; font-size: 15px; } .call-detail .card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .call-detail .card-head h2 { margin: 0; overflow-wrap: anywhere; } .call-audio { width: 100%; height: 40px; } .call-notes { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .call-actions { margin-top: 14px; } /* integrations hub */ .hub-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .hub-card { display: flex; flex-direction: column; gap: 6px; } .hub-card .sub { flex: 1 1 auto; font-size: 14.5px; margin: 0 0 8px; } .hub-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hub-top h2 { margin: 0; } @media (max-width: 1100px) { .ag-layout, .calls-layout { grid-template-columns: minmax(0, 1fr); } .ag-editor, .call-detail { position: static; max-height: none; } } @media (max-width: 960px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } .ed-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; } .ed-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; } .ed-nav-item { flex: 0 0 auto; white-space: nowrap; background: var(--panel-2); } } /* phone: the menu becomes a slide-in drawer opened from the top bar */ @media (max-width: 800px) { body.admin .app { padding: 10px; gap: 10px; } body.admin.signed-in .menu-btn { display: inline-flex; align-items: center; justify-content: center; } body.admin.signed-in header h1 { display: flex; font-size: 17px; } body.admin header { gap: 8px; padding: 8px 10px; border-radius: 20px; } body.admin header #who, body.admin header .hide-sm { display: none; } .sidenav { position: fixed; z-index: 60; top: 10px; left: 10px; bottom: 10px; height: auto; width: min(84vw, 300px); transform: translateX(calc(-100% - 20px)); transition: transform .2s ease; box-shadow: var(--shadow-lift); } body.admin.nav-open .sidenav { transform: none; } body.admin.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(5, 20, 20, .45); } .ag-row { grid-template-columns: 36px minmax(0, 1fr) auto; } .ag-calls { display: none; } .page-head h1 { font-size: 26px; } .ov-tile .v { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { .sidenav { transition: none; } } .ag-editor .ed-pane { margin-top: 16px; } .ag-editor .ed-pane > .form-section:first-child { padding-top: 0; } .calls-list td { white-space: nowrap; } .calls-layout { grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); } @media (max-width: 800px) { .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ov-tile { padding: 12px 14px; } } /* ---------- admin: Dialler popup (admin-popup.js) ---------- */ .pp-origins { display: grid; gap: 8px; margin: 10px 0; } .pp-origin { display: flex; align-items: center; gap: 10px; justify-content: space-between; min-height: 44px; padding: 4px 6px 4px 14px; border: 2px solid var(--border); border-radius: var(--radius-md); font-size: 14px; overflow-wrap: anywhere; } .pp-addrow { display: flex; gap: 8px; align-items: center; margin-top: 6px; } .pp-addrow input { flex: 1 1 auto; min-width: 0; } .pp-origin button { flex: 0 0 auto; white-space: nowrap; } .pp-toggle, label.pp-toggle { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; font-weight: 700; cursor: pointer; } .pp-toggle input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; } .pp-toggle > span { display: grid; gap: 2px; min-width: 0; } .pp-snip { display: grid; gap: 6px; padding: 14px 16px; border: 2px solid var(--border); border-radius: var(--radius-md); min-width: 0; margin: 8px 0 0; } .pp-snip.sel { border-color: var(--accent); background: var(--panel-2); } .pp-code { margin: 0; padding: 10px 12px; border-radius: 10px; background: #0F2A2A; color: #D5EDEA; font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; } .pp-events { width: 100%; border-collapse: collapse; } .pp-events td { padding: 6px 14px 6px 0; vertical-align: top; } .pp-events td:first-child { white-space: nowrap; width: 170px; } /* ===== Voicebot Studio (admin-studio*.js) ===== */ /* Scoped to .studio; Lagoon tokens only, so dark mode follows the theme. */ .studio { display: grid; gap: 14px; min-width: 0; } .studio h1, .studio h2 { margin: 0; } .studio .sd-grow { flex: 1 1 auto; min-width: 0; } .studio .sd-sub { font-size: 13.5px; color: var(--muted); margin: 0; } .studio .sd-hint { font-size: 12.5px; color: var(--muted); font-weight: 700; } .studio .sd-mono { font-family: var(--mono); font-size: 12.5px; } .studio .sd-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .studio .sd-row.sd-nowrap { flex-wrap: nowrap; } .studio .sd-row.sd-nowrap > input { flex: 1 1 auto; min-width: 0; } .studio .sd-between { justify-content: space-between; } .studio .sd-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .studio .sd-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .studio .sd-panel h2 { font-size: 17px; font-weight: 900; } .studio .sd-panel h3 { margin: 6px 0 0; font-size: 15px; font-weight: 900; } .studio .sd-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .studio .sd-h2-gap { margin-top: 8px !important; } .studio .sd-empty { align-items: flex-start; } .studio .sd-note { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--call-soft); color: var(--call-text); font-size: 14px; font-weight: 700; } .studio .sd-problems:empty { display: none; } .studio .sd-problems { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--bad-soft); color: var(--bad-text); font-weight: 700; font-size: 14px; } .studio label { margin: 0 0 4px; font-size: 13px; font-weight: 800; color: var(--muted); } .studio .sd-label { font-size: 13px; font-weight: 800; color: var(--muted); } .studio .sd-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .studio .sd-form { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .studio input, .studio select, .studio textarea { font-size: 15px; padding: 9px 13px; border-radius: 14px; } .studio textarea { line-height: 1.45; resize: vertical; } .studio textarea[readonly] { background: var(--panel-2); } .studio .sd-num { width: 84px; display: inline-block; padding: 6px 10px; text-align: right; } .studio .sd-mini { width: auto; flex: 0 0 auto; padding: 6px 10px; font-size: 14px; } .studio .sd-mini-input { width: 170px; flex: 0 1 auto; } .studio .sd-box { border: 2px solid var(--border); border-radius: 14px; padding: 8px 14px; font-size: 14.5px; line-height: 1.9; } .studio .sd-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 800; color: var(--text); font-size: 13.5px; } .studio .sd-check input { width: 17px; height: 17px; margin: 0; } .studio .sd-dashed { border: 2px dashed var(--border-strong); background: var(--panel); color: var(--accent-strong); font-weight: 900; } .studio .sd-dashed:hover { background: var(--accent-soft); } .studio .sd-outline { border-color: var(--accent); color: var(--accent-strong); } .studio .sd-icon { min-height: 32px; min-width: 32px; padding: 0 8px; border-width: 1px; font-size: 15px; line-height: 1; border-radius: 10px; } @media (pointer: coarse) { .studio .sd-icon { min-height: 44px; min-width: 44px; } } .studio .sd-details summary { cursor: pointer; font-weight: 800; color: var(--accent-strong); } .studio .sd-details[open] summary { margin-bottom: 8px; } /* chips, avatars, banners */ .studio .sd-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--pill); font-size: 12.5px; font-weight: 800; background: var(--panel-2); color: var(--muted); white-space: nowrap; border: 0; } .studio .sd-chip-ok, .studio .sd-tone-ok.sd-chip { background: var(--ok-soft); color: var(--ok-text); } .studio .sd-chip-warn, .studio .sd-tone-warn.sd-chip { background: var(--warn-soft); color: var(--warn-text); } .studio .sd-chip-bad, .studio .sd-tone-bad.sd-chip { background: var(--bad-soft); color: var(--bad-text); } .studio .sd-chip-accent { background: var(--accent-soft); color: var(--accent-strong); font-weight: 900; } .studio .sd-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; } .studio .sd-bot-bar .sd-avatar { width: 34px; height: 34px; border-radius: 11px; font-size: 13px; } .studio .sd-av-1 { background: var(--accent-soft); color: var(--accent-strong); } .studio .sd-av-2 { background: var(--call-soft); color: var(--call-text); } .studio .sd-av-3 { background: var(--coral-soft); color: var(--coral-text); } .studio .sd-av-4 { background: var(--machine-soft); color: var(--machine-text); } .studio .sd-banner { padding: 7px 11px; border-radius: 10px; font-size: 13px; font-weight: 800; } .studio .sd-banner-warn { background: var(--warn-soft); color: var(--warn-text); } .studio .sd-banner-bad { background: var(--bad-soft); color: var(--bad-text); } .studio .sd-banner-an { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; background: var(--accent-soft); color: var(--text); border: 1px solid var(--border); border-radius: 16px; padding: 12px 16px; margin-top: 10px; font-weight: 600; } .studio .sd-banner-an .sd-row { flex-wrap: wrap; } .studio .sd-an-report { margin: 10px 0; display: flex; flex-direction: column; gap: 8px; } .studio .sd-an-table td { padding: 3px 10px 3px 0; vertical-align: top; } .studio .sd-an-list { margin: 4px 0 0 18px; font-size: 13px; } .studio .sd-an-list.bad { color: var(--bad-text); } .studio .sd-an-list.warn { color: var(--warn-text); } .studio .sd-create .sd-wide { grid-column: 1 / -1; } .studio .sd-guide-text { white-space: pre-wrap; font: inherit; font-size: 13px; margin: 6px 0 0; color: var(--text); } /* top bars */ .studio .sd-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 12px 18px; } .studio .sd-home-bar h1 { font-size: 22px; font-weight: 900; } .studio .sd-logo { width: 32px; height: 32px; border-radius: 10px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .studio .sd-logo span { width: 13px; height: 13px; border-radius: 50%; background: var(--coral); } .studio .sd-bot-bar { padding: 8px 14px; gap: 10px; } .studio .sd-crumb { font-size: 14px; font-weight: 800; color: var(--accent-strong); text-decoration: none; } .studio .sd-bot-title { font-size: 17px; font-weight: 900; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studio .sd-tabs { display: flex; gap: 2px; flex: 1 1 auto; margin-left: 6px; overflow-x: auto; scrollbar-width: none; } .studio .sd-tabs button { min-height: 38px; padding: 6px 13px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font-size: 14px; font-weight: 800; white-space: nowrap; } .studio .sd-tabs button:hover { background: var(--panel-2); } .studio .sd-tabs button.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 900; } .studio .sd-bar-actions { margin-left: auto; } /* home */ .studio .sd-kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .studio .sd-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 14px 18px; min-width: 0; } .studio .sd-kpi .k { font-size: 13.5px; font-weight: 800; color: var(--muted); } .studio .sd-kpi .v { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; } .studio .sd-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; } .studio .sd-card { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .studio .sd-card-draft { border: 1px dashed var(--border-strong); } .studio .sd-card-head { display: flex; align-items: center; gap: 10px; } .studio .sd-card h2 { font-size: 18px; font-weight: 900; overflow-wrap: anywhere; } .studio .sd-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; } .studio .sd-templates { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .studio .sd-template { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border-radius: 16px; padding: 12px 14px; min-height: 0; font-weight: 700; font-size: 14px; } .studio .sd-template b { font-weight: 900; font-size: 15px; } .studio .sd-tag { font-size: 12px; font-weight: 800; color: var(--accent-strong); background: var(--accent-soft); border-radius: var(--pill); padding: 1px 8px; } .studio .sd-create { border-color: var(--accent); } /* flow */ .studio .sd-flow { display: grid; grid-template-columns: 260px minmax(0, 1fr) 290px; gap: 14px; align-items: start; } .studio .sd-steplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .studio .sd-step { position: relative; padding: 9px 12px; border: 2px solid var(--border); border-radius: 14px; cursor: pointer; background: var(--panel); } .studio .sd-step:hover { border-color: var(--border-strong); } .studio .sd-step.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); } .studio .sd-step.active .sd-sub, .studio .sd-step.active .sd-step-kind { color: var(--accent-strong); } .studio .sd-step.dragging { opacity: .5; } .studio .sd-step.drop { box-shadow: 0 -3px 0 var(--accent); } .studio .sd-step b { display: block; padding-right: 64px; overflow-wrap: anywhere; } .studio .sd-step-kind { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .02em; } .studio .sd-step-move { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; opacity: 0; } .studio .sd-step:hover .sd-step-move, .studio .sd-step:focus-within .sd-step-move, .studio .sd-step.active .sd-step-move { opacity: 1; } @media (pointer: coarse) { .studio .sd-step-move { opacity: 1; } .studio .sd-step b { padding-right: 100px; } } .studio .sd-step-move .sd-icon { min-height: 28px; min-width: 28px; padding: 0; font-size: 13px; background: var(--panel); } .studio .sd-addstep { display: flex; gap: 6px; } .studio .sd-addstep .sd-dashed { flex: 1 1 auto; border-radius: 14px; } .studio .sd-anytime { background: var(--panel-2); border-radius: 14px; padding: 10px 12px; font-size: 13px; } .studio .sd-editor { gap: 12px; } .studio .sd-editor-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .studio .sd-title-input { flex: 1 1 220px; font-size: 19px; font-weight: 900; border-color: transparent; padding: 6px 10px; } .studio .sd-title-input:hover { border-color: var(--border); } .studio .sd-branches { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .studio .sd-branch { border: 2px solid var(--border); border-left-width: 6px; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .studio .sd-branch input, .studio .sd-branch select { font-size: 13.5px; padding: 6px 10px; } .studio .sd-branch .sd-branch-label { font-weight: 900; } .studio .sd-branch-to { display: flex; align-items: center; gap: 4px; font-weight: 900; } .studio .sd-branch.sd-tone-ok { border-left-color: var(--ok); } .studio .sd-branch.sd-tone-warn { border-left-color: var(--warn); } .studio .sd-branch.sd-tone-bad { border-left-color: var(--bad); } .studio .sd-branch.sd-tone-call { border-left-color: var(--call); } .studio .sd-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 10px 4px 4px; border: 0; background: transparent; font-size: 13px; font-weight: 800; color: var(--accent-strong); } .studio .sd-switch-knob { width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background-color .15s; } .studio .sd-switch-knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); transition: left .15s; } .studio .sd-switch[aria-checked="true"] .sd-switch-knob { background: var(--accent); } .studio .sd-switch[aria-checked="true"] .sd-switch-knob::after { left: 19px; } .studio .sd-mapflow { display: flex; flex-direction: column; align-items: center; gap: 4px; } .studio .sd-mapnode { width: 100%; max-width: 220px; min-height: 36px; padding: 6px 10px; border: 2px solid transparent; border-radius: 12px; background: var(--panel-2); font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .studio .sd-mapnode.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); } .studio .sd-arrow { color: var(--muted); font-size: 13px; } .studio .sd-mapbranches { display: flex; gap: 4px; width: 100%; flex-wrap: wrap; justify-content: center; } .studio .sd-mapb { flex: 1 1 70px; text-align: center; padding: 4px 6px; border-radius: 10px; font-size: 12px; font-weight: 800; background: var(--panel-2); color: var(--muted); overflow-wrap: anywhere; } .studio .sd-mapb.sd-tone-ok { background: var(--ok-soft); color: var(--ok-text); } .studio .sd-mapb.sd-tone-warn { background: var(--warn-soft); color: var(--warn-text); } .studio .sd-mapb.sd-tone-bad { background: var(--bad-soft); color: var(--bad-text); } .studio .sd-mapb.sd-tone-call { background: var(--call-soft); color: var(--call-text); } .studio .sd-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .studio .sd-check-box { border-radius: 14px; padding: 9px 12px; font-size: 13px; } .studio .sd-check-box.warn { background: var(--warn-soft); color: var(--warn-text); } .studio .sd-check-box.bad { background: var(--bad-soft); color: var(--bad-text); } .studio .sd-check-box.ok { background: var(--ok-soft); color: var(--ok-text); } /* two-column tabs */ .studio .sd-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .studio .sd-cols-wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .studio .sd-cols-an { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } /* knowledge */ .studio .sd-facts { display: flex; flex-direction: column; gap: 6px; } .studio .sd-fact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 40px; gap: 8px; align-items: center; } .studio .sd-fact input { padding: 7px 11px; font-size: 14.5px; } .studio .sd-fact-head { font-size: 12.5px; font-weight: 800; color: var(--muted); border-bottom: 1px solid var(--border); padding: 0 4px 6px; } .studio .sd-missing { background: var(--warn-soft); color: var(--warn-text); border-radius: 12px; padding: 8px 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; } .studio .sd-missing span { font-weight: 800; } .studio .sd-faq { display: flex; flex-direction: column; gap: 8px; } .studio .sd-qa { border: 2px solid var(--border); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .studio .sd-qa input, .studio .sd-qa textarea { border-color: transparent; padding: 6px 8px; font-size: 14.5px; } .studio .sd-qa input:hover, .studio .sd-qa textarea:hover { border-color: var(--border); } .studio .sd-strong { font-weight: 900; } .studio .sd-docs { display: flex; flex-direction: column; gap: 8px; } .studio .sd-doc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 2px solid var(--border); border-radius: 14px; padding: 8px 12px; font-size: 14px; } .studio .sd-doc b { overflow-wrap: anywhere; } .studio .sd-ok-text { color: var(--ok-text); font-weight: 800; } .studio .sd-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .studio .sd-upload { min-height: 44px; border: 2px dashed var(--border-strong); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--accent-strong); font-weight: 900; font-size: 14.5px; cursor: pointer; margin: 0; } .studio .sd-upload:hover { background: var(--accent-soft); } .studio .sd-file:focus-visible + .sd-upload, .studio .sd-upload:focus-within { box-shadow: var(--focus); } .studio .sd-upload.disabled { opacity: .5; cursor: default; } .studio .sd-answer { display: flex; flex-direction: column; gap: 6px; } .studio .sd-bubble { background: var(--panel-2); border-radius: 14px; padding: 10px 12px; font-size: 14.5px; } .studio [hidden] { display: none !important; } .studio .sd-bad-text { color: var(--bad-text); font-weight: 800; } .studio .sd-warn-text { color: var(--warn-text); font-weight: 800; } .studio .sd-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 2px; } .studio .sd-doc .sd-doc-name { grid-row: 1; grid-column: 1; } .studio .sd-doc .sd-doc-state { grid-row: 2; grid-column: 1; font-size: 13.5px; } .studio .sd-doc .sd-icon { grid-row: 1 / span 2; grid-column: 2; } .studio .sd-doc .sd-doc-note { grid-column: 1 / -1; } .studio .sd-used { font-size: 12.5px; font-weight: 800; color: var(--ok-text); white-space: nowrap; } .studio .sd-unused { color: var(--muted); } .studio .sd-fact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 104px 40px; } .studio .sd-missing { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 0 auto; } .studio .sd-ai-check { font-weight: 800; } .studio .sd-pwrow input { flex: 1 1 160px; } .studio .sd-chip-sample { background: var(--warn-soft); color: var(--warn-text); } .studio .sd-banner-demo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--accent-soft); color: var(--text); } .studio .sd-mode { display: flex; flex-direction: column; gap: 4px; background: var(--panel-2); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; } .studio .sd-mode .sd-hint { font-size: 12px; } .studio .sd-fallback { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .studio .sd-fallback select { padding: 4px 8px; } .studio .sd-targets { display: flex; flex-direction: column; gap: 10px; } .studio .sd-target { border: 2px solid var(--border); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .studio .sd-target-default { border-style: dashed; } .studio .sd-target-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 900; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } .studio .sd-target .sd-strong { flex: 1 1 auto; padding: 6px 10px; } .studio .sd-conds { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; } .studio .sd-cond select, .studio .sd-cond input { padding: 5px 8px; font-size: 14px; } .studio .sd-cond input { flex: 1 1 100px; min-width: 0; } .studio .sd-voicebar { align-items: center; gap: 12px; } .studio .sd-mic { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--pill); padding: 6px 16px; font-weight: 900; touch-action: none; user-select: none; } .studio .sd-mic-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--coral, #d9534f); } .studio .sd-mic.on { background: var(--coral-soft, var(--bad-soft)); border-color: var(--coral, var(--bad)); } .studio .sd-mic.on .sd-mic-dot { animation: sd-pulse 1s infinite; } @keyframes sd-pulse { 50% { opacity: .3; } } @media (prefers-reduced-motion: reduce) { .studio .sd-mic.on .sd-mic-dot { animation: none; } } .studio .sd-spoken { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 800; color: var(--muted); } .studio .sd-trace-flow b { white-space: nowrap; } .studio .sd-linkbtn { border: 0; background: transparent; padding: 0; min-height: 0; color: var(--accent-strong); font-weight: 800; text-decoration: underline; cursor: pointer; font-size: inherit; } .studio .sd-kpi .sd-linkbtn { font-size: 13px; margin-top: 2px; } .studio .sd-costs { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .studio .sd-costrow { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px; gap: 8px; align-items: baseline; padding: 3px 0; } .studio .sd-costrow > :not(:first-child) { text-align: right; } .studio .sd-costhead { font-size: 12px; font-weight: 800; color: var(--muted); border-bottom: 1px solid var(--border); } .studio .sd-costtotal { border-top: 1px solid var(--border); padding-top: 6px; } /* outcomes */ .studio .sd-outcomes { display: flex; flex-direction: column; gap: 8px; } .studio .sd-outcome { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 14.5px; } .studio .sd-outcome input:not(.sd-code) { padding: 7px 11px; font-size: 14.5px; } .studio .sd-code { text-align: center; font-weight: 900; padding: 4px 8px; border-radius: var(--pill); border: 0; background: var(--panel-2); color: var(--muted); font-size: 13.5px; text-transform: uppercase; } .studio span.sd-code { display: inline-block; } .studio .sd-code.sd-tone-ok { background: var(--ok-soft); color: var(--ok-text); } .studio .sd-code.sd-tone-warn { background: var(--warn-soft); color: var(--warn-text); } .studio .sd-code.sd-tone-bad { background: var(--bad-soft); color: var(--bad-text); } .studio .sd-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .studio .sd-fieldchip { display: inline-flex; align-items: center; gap: 4px; border: 2px solid var(--border); border-radius: var(--pill); padding: 4px 6px 4px 14px; font-weight: 800; font-size: 14px; } .studio .sd-x { min-height: 26px; min-width: 26px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 16px; } .studio .sd-addfield input { flex: 1 1 140px; padding: 6px 10px; font-size: 14px; } .studio .sd-toggles { display: flex; flex-direction: column; gap: 6px; } .studio .sd-toggle { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); cursor: pointer; } .studio .sd-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; } .studio .sd-toggle-ui { flex: 0 0 auto; width: 44px; height: 24px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background-color .15s; } .studio .sd-toggle-ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); transition: left .15s; } .studio .sd-toggle input:checked + .sd-toggle-ui { background: var(--accent); } .studio .sd-toggle input:checked + .sd-toggle-ui::after { left: 23px; } .studio .sd-toggle input:focus-visible + .sd-toggle-ui { box-shadow: var(--focus); } .studio .sd-toggle input:disabled + .sd-toggle-ui { opacity: .5; } .studio .sd-guards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .studio .sd-guard { border: 2px solid var(--border); border-radius: 14px; padding: 8px 12px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; } .studio .sd-guard label { color: var(--text); font-weight: 900; font-size: 14px; } .studio .sd-guard input { padding: 6px 10px; } .studio .sd-guard-wide input { width: 100%; } /* voice */ .studio .sd-opening { margin: 0; padding: 10px 14px; background: var(--accent-soft); border-radius: 14px; font-size: 15px; } .studio .sd-choice { min-height: 38px; padding: 6px 16px; border-radius: var(--pill); font-size: 14px; font-weight: 800; } .studio .sd-choice[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 900; } .studio .sd-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .studio .sd-voice { border: 2px solid var(--border); border-radius: 16px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; min-width: 0; } .studio .sd-voice.active { border-color: var(--accent); background: var(--panel-2); } .studio .sd-play { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; flex: 0 0 auto; } .studio .sd-voice.active .sd-play { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .studio .sd-voice-pick { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; border: 0; background: transparent; padding: 2px 4px; min-height: 40px; text-align: left; } .studio .sd-voice-pick:hover { background: transparent; } .studio .sd-voice-pick .sd-sub { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; } .studio .sd-turns { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; font-size: 14.5px; } /* test */ .studio .sd-test-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; } .studio .sd-chatlog { min-height: 320px; max-height: 520px; } .studio .sd-chatinput input { flex: 1 1 auto; border-radius: var(--pill); } .studio .sd-trace { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; } .studio .sd-trace-item { background: var(--panel-2); border-radius: 12px; padding: 8px 10px; overflow-wrap: anywhere; } .studio .sd-trace-item.warn { background: var(--warn-soft); color: var(--warn-text); } .studio .sd-tests { display: flex; flex-direction: column; gap: 8px; } .studio .sd-test { border: 2px solid var(--border); border-radius: 14px; overflow: hidden; } .studio .sd-test-fail { border-color: var(--coral); background: var(--coral-soft); } .studio .sd-test-row { width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left; border: 0; border-radius: 0; background: transparent; padding: 9px 12px; font-size: 14px; font-weight: 700; min-height: 0; } .studio .sd-test-row:hover { background: transparent; } .studio .sd-test-reason { display: block; font-size: 12.5px; color: var(--bad-text); font-weight: 800; } .studio .sd-test-detail { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; } .studio .sd-test-detail p { margin: 0; } .studio .sd-status { flex: 0 0 auto; font-weight: 900; font-size: 13.5px; min-width: 52px; } .studio .sd-status-ok { color: var(--ok-text); } .studio .sd-status-bad { color: var(--bad-text); } .studio .sd-status-warn { color: var(--warn-text); } .studio .sd-status-none { color: var(--muted); } .studio .sd-test-editor { border: 2px solid var(--accent); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .studio .sd-transcript { max-height: 280px; } /* testing: repeats, rubric grades, hands-free talk, audio tests, versions */ .studio .sd-wrap { flex-wrap: wrap; } .studio .sd-runopts { align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; } .studio .sd-runopts select { width: auto; min-height: 32px; padding: 2px 8px; } .studio .sd-score { background: var(--panel-2); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; } .studio .sd-scorelines { display: flex; flex-direction: column; gap: 3px; } .studio .sd-scoreline { display: flex; gap: 10px; align-items: baseline; font-size: 13px; } .studio .sd-scoreline.low { color: var(--bad-text); font-weight: 800; } .studio .sd-talk { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--pill); padding: 6px 16px; font-weight: 900; } .studio .sd-talk.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); } .studio .sd-talk.on .sd-mic-dot { animation: sd-pulse 1s infinite; } .studio .sd-level { flex: 0 0 90px; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; } .studio .sd-level-fill { height: 100%; width: 0; background: var(--accent); transition: width 80ms linear; } .studio .sd-talk-state { font-weight: 800; } @media (prefers-reduced-motion: reduce) { .studio .sd-talk.on .sd-mic-dot { animation: none; } .studio .sd-level-fill { transition: none; } } .studio .sd-audio-row { margin-top: 14px; } .studio .sd-audio { display: flex; flex-direction: column; gap: 8px; } .studio .sd-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 900; } .studio .sd-filebtn { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--pill); padding: 6px 14px; font-weight: 800; cursor: pointer; } .studio .sd-filebtn:focus-within { outline: 2px solid var(--accent); } .studio .sd-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .studio .sd-speechcheck { display: flex; flex-direction: column; gap: 6px; } .studio .sd-speechcheck h3 { margin: 6px 0 0; } .studio .sd-scroll { overflow-x: auto; } .studio .sd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .studio .sd-table th, .studio .sd-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } .studio .sd-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .studio .sd-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .studio .sd-banner-ok { background: var(--ok-soft); color: var(--ok-text); } /* publish */ .studio .sd-checklist { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; } .studio .sd-checkrow { display: flex; gap: 10px; align-items: flex-start; } .studio .sd-tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; } .studio .sd-tick.ok { background: var(--accent); color: var(--accent-text); } .studio .sd-tick.bad { background: var(--bad); color: var(--on-strong); } .studio .sd-tick.warn { background: var(--warn-soft); color: var(--warn-text); } .studio .sd-override { background: var(--warn-soft); color: var(--warn-text); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .studio .sd-override p { margin: 0; font-size: 14px; } .studio .sd-changes { display: flex; flex-direction: column; gap: 8px; } .studio .sd-change { border: 2px solid var(--border); border-radius: 14px; padding: 8px 12px; font-size: 14px; overflow-wrap: anywhere; } .studio .sd-before { color: var(--bad-text); text-decoration: line-through; } .studio .sd-after { color: var(--ok-text); } .studio .sd-versions { display: flex; flex-direction: column; gap: 8px; } .studio .sd-version { border: 2px solid var(--border); border-radius: 14px; padding: 8px 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; } .studio .sd-version-draft { border-color: var(--warn-soft); background: var(--panel-2); display: block; } .studio .sd-version-live { border-color: var(--accent); background: var(--panel-2); } .studio .sd-version-split { border-color: var(--warn); } .studio .sd-split { background: var(--warn-soft); color: var(--warn-text); border-radius: 14px; padding: 10px 12px; } .studio .sd-split p { margin: 0 0 6px; } /* analytics */ .studio .sd-drops { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; } .studio .sd-meter { height: 12px; border-radius: 999px; background: var(--panel-2); margin-top: 4px; overflow: hidden; } .studio .sd-meter-fill { height: 12px; border-radius: 999px; background: var(--accent); } .studio .sd-meter-fill.warn { background: var(--warn); } .studio .sd-gaps, .studio .sd-calls { display: flex; flex-direction: column; gap: 6px; } .studio .sd-gap { display: flex; align-items: center; gap: 8px; border: 2px solid var(--border); border-radius: 12px; padding: 6px 10px; font-size: 14px; flex-wrap: wrap; } .studio .sd-callrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 40px; padding: 6px 10px; border-width: 1px; border-radius: 12px; font-size: 14px; font-weight: 700; } /* narrower screens: the map goes under the editor, then everything stacks */ @media (max-width: 1280px) { .studio .sd-flow { grid-template-columns: 240px minmax(0, 1fr); } .studio .sd-map { grid-column: 1 / -1; } .studio .sd-test-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .studio .sd-test-grid > :last-child { grid-column: 1 / -1; } } @media (max-width: 900px) { .studio .sd-flow, .studio .sd-cols, .studio .sd-cols-wide, .studio .sd-cols-an, .studio .sd-test-grid { grid-template-columns: minmax(0, 1fr); } .studio .sd-bar-actions { margin-left: 0; } .studio .sd-tabs { order: 10; flex-basis: 100%; margin-left: 0; } } @media (max-width: 640px) { .studio .sd-panel, .studio .sd-bar { padding: 12px; border-radius: 16px; } .studio .sd-guards { grid-template-columns: minmax(0, 1fr); } .studio .sd-fact { grid-template-columns: minmax(0, 1fr) 40px; } .studio .sd-fact > :nth-child(2), .studio .sd-fact > :nth-child(3) { grid-column: 1; } .studio .sd-fact > :nth-child(4) { grid-row: 1 / span 2; grid-column: 2; } .studio .sd-costrow { grid-template-columns: minmax(0, 1fr) 70px 70px; } .studio .sd-cond { flex-wrap: wrap; } .studio .sd-fact-head { display: none; } .studio .sd-missing { grid-template-columns: minmax(0, 1fr); } .studio .sd-outcome { grid-template-columns: 80px minmax(0, 1fr) 40px; } .studio .sd-kpi .v { font-size: 24px; } .studio .sd-bot-title { max-width: 160px; } .studio .sd-mini-input { width: 100%; } } .studio .sd-tabarea { display: grid; gap: 14px; min-width: 0; } .studio .sd-hint:empty { display: none; } .studio .sd-guards { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.6fr); } .studio .sd-summary { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; } .studio .sd-editor .sd-title-input { flex: none; width: 100%; } @media (max-width: 640px) { .studio .sd-guards { grid-template-columns: minmax(0, 1fr); } } .studio .sd-tabs { min-width: 0; max-width: 100%; } .studio .sd-bar > * { min-width: 0; } .studio, .studio .sd-tabarea { grid-template-columns: minmax(0, 1fr); } .studio .sd-tabs button { padding: 6px 10px; font-size: 13.5px; } .studio .sd-bot-bar { gap: 8px; } .studio .sd-calls { max-height: 560px; overflow-y: auto; padding-right: 2px; } /* ===== admin redesign (phase 2): settings pattern, leads, reports, users, audit, health, quality ===== */ /* Scoped to body.admin; Lagoon tokens only, so dark mode follows the theme. */ /* page loading: shown under the menu while a page has drawn nothing yet */ body.admin .view-loading { display: none; } body.admin.signed-in #view:empty + .view-loading { display: flex; align-items: center; gap: 10px; padding: 24px 6px; color: var(--muted); font-weight: 800; opacity: 0; animation: view-loading-in .2s ease .25s forwards; } body.admin .view-loading::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: view-spin 0.8s linear infinite; } @keyframes view-loading-in { to { opacity: 1; } } @keyframes view-spin { to { transform: rotate(360deg); } } /* the top alert bar: one line per problem, full text on hover */ body.admin .alertbar { padding: 8px 16px; gap: 6px 14px; font-size: 14px; } body.admin .alertbar > span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 320px; } /* stat tiles everywhere in the console look like the Overview's */ body.admin .tile { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 14px 18px; box-shadow: none; display: flex; flex-direction: column; min-width: 0; } body.admin .card .tile { background: var(--panel-2); border-color: transparent; } body.admin .tile .k { order: -1; font-size: 13.5px; font-weight: 800; color: var(--muted); } body.admin .tile .v { font-family: var(--font); font-size: 28px; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; } body.admin .tile .s { font-size: 13px; font-weight: 700; color: var(--muted); } body.admin .tile.tone-ok .v { color: var(--ok-text); } body.admin .tile.tone-bad .v { color: var(--bad-text); } body.admin .tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } /* older plugin headers (.mod-head) match the page head */ body.admin .mod-head { padding: 6px 4px 0; } body.admin .mod-head h1 { font-size: 32px; } /* confirm dialog (leave with unsaved changes) */ .confirm-dialog { border: 0; border-radius: var(--radius); padding: 24px 26px 20px; max-width: min(460px, calc(100vw - 32px)); background: var(--panel); color: var(--text); box-shadow: var(--shadow-lift); } .confirm-dialog::backdrop { background: rgba(5, 20, 20, .45); } .confirm-dialog h2 { margin: 0 0 6px; font-size: 20px; } .confirm-dialog p { margin: 0 0 18px; color: var(--muted); } .confirm-actions { justify-content: flex-end; } /* ---------- standard settings page ---------- */ .set-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 16px; align-items: start; } .set-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .set-card h2 { margin: 0 0 4px; } .set-card .set-hint { margin: 0 0 12px; font-size: 14px; max-width: 80ch; } .set-card .form { gap: 6px 18px; } .set-card .field-hint { margin: 4px 0 0; } .set-review { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; } .set-review h2 { margin: 0; font-size: 17px; } .set-review > .sub { margin: 0; } .diff-list { display: flex; flex-direction: column; gap: 8px; } .diff-row { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; overflow-wrap: anywhere; } .diff-vals { color: var(--muted); } .diff-vals .from { text-decoration: line-through; text-decoration-color: var(--border-strong); } .diff-vals .to { color: var(--text); } .diff-empty { margin: 0; } .save-bar { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); padding: 10px 12px 10px 16px; } .save-bar.hidden { display: none; } .save-bar .grow { flex: 1 1 auto; } .save-bar .set-err { margin: 0; color: var(--bad-text); font-weight: 800; font-size: 14px; flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; } .save-bar .set-err:empty { display: none; } .save-bar button { min-height: 40px; } .set-review-btn { display: none; } .sidenav-foot { flex-wrap: wrap; } .sidenav-foot .foot-acts { display: none; gap: 6px; margin-left: auto; } /* toggle switches for on/off settings */ label.switch-row { display: flex; align-items: flex-start; gap: 14px; margin: 6px 0 10px; font-weight: 700; cursor: pointer; } .switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .switch-text b { font-size: 15.5px; font-weight: 800; } input.switch { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 50px; height: 28px; margin: 0; padding: 0; border-radius: var(--pill); border: 0; background: var(--border-strong); position: relative; cursor: pointer; transition: background-color .15s; } input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; } input.switch:checked { background: var(--accent); } input.switch:checked::after { transform: translateX(22px); } input.switch:disabled { opacity: .5; cursor: default; } input.switch:focus-visible { box-shadow: var(--focus); } /* ---------- leads ---------- */ .leads-layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; } .leads-lists { padding: 16px; position: sticky; top: 16px; } .leads-lists h2 { margin: 0 0 2px; font-size: 17px; } .leads-lists > .sub { margin: 0 0 10px; } .leads-lists-body { display: flex; flex-direction: column; gap: 4px; } .list-item { border-radius: 14px; } .list-item.selected { background: var(--accent-soft); } .list-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 14px; padding: 10px 12px; min-height: 0; font-weight: 400; } .list-pick:hover { background: var(--panel-2); } .list-item.selected .list-pick:hover { background: transparent; } .list-pick strong { font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; } .list-pick strong .pill { font-size: 12px; padding: 1px 8px; } .list-item.selected .list-pick strong, .list-item.selected .list-pick .sub { color: var(--accent-strong); } .list-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; } .list-sep { height: 1px; background: var(--border); margin: 6px 4px; } .leads-main { padding: 16px 18px; } .leads-main-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .leads-main-head h2 { margin: 0; font-size: 18px; } .leads-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 10px; } .leads-filters .chips-row { margin: 0; } .leads-search { display: flex; gap: 8px; flex: 0 1 320px; min-width: min(100%, 240px); } .leads-search input { border-radius: var(--pill); min-height: 42px; padding: 8px 16px; } .leads-search button { min-height: 42px; } .leads-grid tr[data-lead] { cursor: pointer; } .lead-status { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .lead-status .sh-slot:empty { display: none; } .leads-grid td { white-space: nowrap; } .leads-grid td.lead-data { max-width: 260px; overflow: hidden; text-overflow: ellipsis; } .lead-status { flex-wrap: nowrap; } /* drawer: slides in from the right over the page */ .drawer-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(5, 20, 20, .35); } .drawer { position: fixed; z-index: 71; top: 12px; right: 12px; bottom: 12px; width: min(560px, calc(100vw - 24px)); background: var(--panel); border-radius: 20px; box-shadow: var(--shadow-lift); overflow-y: auto; padding: 20px 22px 0; animation: drawer-in .18s ease; } @keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } } .drawer .form { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .drawer .form-actions { margin: 18px -22px 0; padding: 14px 22px; border-radius: 0; } /* ---------- list + right panel (users) ---------- */ .split-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 16px; align-items: start; } .side-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; min-width: 0; } .side-panel .form { grid-template-columns: minmax(0, 1fr); } .person-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; } .person-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; text-align: left; width: 100%; border: 0; background: transparent; border-radius: 14px; padding: 8px 12px; min-height: 56px; font-weight: 400; } .person-row:hover { background: var(--panel-2); } .person-row.selected { background: var(--accent-soft); } .person-row .pill { justify-self: end; } /* ---------- reports ---------- */ .rep-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; } .rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .rank-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; } .rank-list .ov-bar-track { margin: 4px 0 6px; } .range-chips { margin: 0 0 12px; } /* ---------- system health ---------- */ .health-tiles .tile .v { font-size: 22px; } /* ---------- audit log: readable entries ---------- */ .audit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .audit-day { font-size: 12.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 14px 4px 6px; } .audit-day:first-child { padding-top: 2px; } .audit-entry { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); } .audit-entry:last-child { border-bottom: 0; } .audit-line { font-size: 15px; overflow-wrap: anywhere; } .audit-main .sub .mono { font-size: 12.5px; } .audit-detail { margin-top: 6px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; } .audit-detail ul.changes { margin: 0; padding: 0; list-style: none; } .audit-detail ul.changes b { color: var(--text); } .audit-detail .from { text-decoration: line-through; text-decoration-color: var(--border-strong); } .audit-detail .to { color: var(--text); font-weight: 700; } .audit-detail summary { cursor: pointer; color: var(--accent); font-weight: 700; min-height: 24px; } .audit-detail pre { font-family: var(--mono); font-size: 12.5px; background: var(--panel-2); border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0 0; max-height: 320px; overflow: auto; white-space: pre-wrap; color: var(--text); } /* ---------- quality: list on the left, the open call on the right ---------- */ .q-split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; } .q-list { padding: 16px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } .q-list > .sub { margin: 0 0 10px; } .q-rows { display: flex; flex-direction: column; gap: 4px; } .q-row { display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; width: 100%; min-height: 0; border: 0; background: transparent; border-radius: 14px; padding: 10px 12px; font-weight: 400; } .q-row:hover { background: var(--panel-2); } .q-row.selected { background: var(--accent-soft); } .q-row-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .q-row-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-row .sub { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .q-row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .q-row-tags .chip { margin: 0; font-size: 12px; } .q-detail { min-width: 0; display: grid; gap: 16px; } @media (max-width: 1100px) { .set-layout, .split-layout, .q-split, .leads-layout, .rep-grid { grid-template-columns: minmax(0, 1fr); } .set-review, .side-panel, .q-list, .leads-lists { position: static; max-height: none; } .set-review-btn { display: inline-flex; } } @media (max-width: 800px) { body.admin header #changePw, body.admin header #signOut { display: none; } /* in the menu's footer instead */ .sidenav-foot .foot-acts { display: flex; } .leads-lists > .sub { display: none; } .save-bar { bottom: 10px; padding: 10px; } .save-bar .set-count { flex: 1 1 100%; justify-content: center; } .save-bar button { flex: 1 1 auto; } .save-bar .grow { display: none; } .leads-search { flex: 1 1 100%; } .person-row { grid-template-columns: 36px minmax(0, 1fr) auto; } .person-row .pill.st-paused { display: none; } .drawer { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; padding: 16px 16px 0; } .drawer .form-actions { margin: 18px -16px 0; padding: 12px 16px; } body.admin .tile .v { font-size: 22px; } body.admin .mod-head h1 { font-size: 26px; } } @media (prefers-reduced-motion: reduce) { .drawer, body.admin #view:empty + .view-loading { animation: none; opacity: 1; } } body.admin .tile .k::first-letter { text-transform: uppercase; } /* Calls & recordings: the carrier's SIP reply (docs/DIAGNOSTICS.md). */ .sip-reply .sip-bad { color: var(--bad-text); } .sip-reply .sip-ok, .sip-ok { color: var(--ok-text); } .sip-bad { color: var(--bad-text); font-weight: 700; } /* System › Diagnostics (admin-diagnostics.js, docs/DIAGNOSTICS.md). */ .diag-form { gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; } .diag-form input[type="text"], .diag-form input[type="search"] { flex: 1 1 220px; min-width: 0; } .diag-form select { width: auto; } .diag-form label.check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; } .diag-form label.check input { width: auto; } .diag-kpis { gap: 12px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; } .diag-kpis .tile strong { font-size: 22px; } .diag-running { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .diag-running button { margin-left: auto; } .diag-captures tr[data-id] { cursor: pointer; } .diag-captures tr.selected td { background: var(--accent-soft); } .diag-dialog { padding: 12px 16px; margin: 8px 0; } .diag-dialog.failed { border-left: 4px solid var(--bad); } .diag-dialog > summary { cursor: pointer; overflow-wrap: anywhere; } .diag-callid { margin-top: 2px; font-size: 12.5px; } .diag-ladder { margin-top: 8px; } .diag-msg { border-top: 1px solid var(--border); } .diag-msg > summary { display: grid; grid-template-columns: max-content 1.5em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 2px; cursor: pointer; } .diag-msg.bad > summary { background: var(--bad-soft); } .diag-dir { font-weight: 900; text-align: center; } .diag-first { overflow-wrap: anywhere; } .diag-ft { white-space: nowrap; } .diag-time { color: var(--muted); font-size: 13px; } .diag-attrs { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; margin-top: 2px; } .diag-log td { vertical-align: top; } .diag-fslines { max-height: 520px; overflow: auto; background: var(--panel-2); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; } .diag-fsline { padding: 1px 0; } .diag-fsline.lvl-err, .diag-fsline.lvl-crit, .diag-fsline.lvl-alert { color: var(--bad-text); } .diag-fsline.lvl-warning { color: var(--warn-text); } .diag-lvl { font-weight: 700; } @media (max-width: 640px) { .diag-msg > summary { grid-template-columns: max-content 1.2em minmax(0, 1fr); } .diag-ft { display: none; } } /* Insights › Carrier failures (admin-carrier.js) */ .cf-summary { font-size: 15px; margin: 4px 0 14px; } .cf-tiles { margin-bottom: 18px; } .cf-finding { font-size: 17px; font-weight: 700; margin: 6px 0; } .cf-limit { border-left: 4px solid var(--bad); } .cf-fig { margin: 12px 0 4px; } .cf-chart { width: 100%; height: auto; display: block; background: var(--panel-2); border-radius: var(--radius-sm); } .cf-chart .grid { stroke: var(--border); stroke-width: 1; } .cf-chart .axis, .cf-chart .lbl { fill: var(--muted); font-size: 11px; font-family: var(--mono); } .cf-chart .bar { fill: var(--accent); } .cf-chart .hit { fill: transparent; } .cf-chart .cf-bar:hover .bar, .cf-chart .cf-bar:focus .bar { fill: var(--accent-strong); } .cf-chart path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .cf-chart path.med { stroke: var(--accent); } .cf-chart path.p90 { stroke: var(--muted); stroke-dasharray: 6 5; } .cf-chart .dot { fill: var(--accent); stroke: var(--panel-2); stroke-width: 2; } .cf-legend { display: flex; gap: 8px; align-items: center; margin-top: 6px; } .cf-legend .sw { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--accent); margin-left: 8px; } .cf-legend .sw.p90 { border-top: 2px dashed var(--muted); } .cf-share { min-width: 140px; white-space: nowrap; } .cf-sbar { display: inline-block; height: 8px; border-radius: 4px; background: var(--accent); margin-right: 8px; vertical-align: middle; max-width: 90px; }