/* Lion Reach — amber/gold on charcoal, matching the estate's Messaging Infrastructure identity (sms-bridge) and Lion Command's gold-on-charcoal. */ :root { --bg: #14120d; --panel: #1d1a13; --panel2: #262218; --line: #3a331f; --amber: #f5b942; --amber2: #ffd47e; --text: #efe8d8; /* lifted from #9d926f for WCAG AA on panel backgrounds (LR-0661) */ --muted: #b3a98a; --red: #e2574c; --green: #7fc95c; /* semantic aliases (LR-0676): newer sections reference intent, not hex */ --accent: var(--amber); --ok: var(--green); --err: var(--red); --warn: #dcae55; --info: #6f9fd8; --fg: var(--text); } /* Light theme (LR-0708): same token names, warm-paper values. The default stays the dark brand; [data-theme] on switches, chosen by the header toggle (persisted) or the OS preference on first visit. */ :root[data-theme="light"] { --bg: #f3eddd; --panel: #fbf7ec; --panel2: #ece4cd; --line: #d3c69e; --amber: #9c6f10; --amber2: #7c580a; --text: #241f12; --muted: #6b6248; --red: #b23a30; --green: #3e7d22; --warn: #8a6414; --info: #2f5e96; } :root[data-theme="light"] .brand span { background: linear-gradient(120deg, #9c6f10, #b98a1e); -webkit-background-clip: text; background-clip: text; } :root[data-theme="light"] button.primary { color: #fffdf4; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 "Segoe UI", system-ui, sans-serif; } .hidden { display: none !important; } .brand { font-weight: 800; letter-spacing: .14em; color: var(--text); } .brand span { background: linear-gradient(120deg, var(--amber), var(--amber2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand em { font-style: normal; font-size: 10px; background: var(--red); color: #fff; border-radius: 4px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; } .brand.big { font-size: 26px; } .lock { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 50; } .lock-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 34px; width: 360px; box-shadow: 0 18px 60px rgba(0,0,0,.5); text-align: center; } .lock-card p { color: var(--muted); } .lock-card input { width: 100%; margin: 12px 0; } .lock-card button { width: 100%; } .err { color: var(--red); min-height: 20px; margin-top: 8px; font-size: 13px; } header { display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; } /* Left navigation rail (Victor 2026-08-25): the tab bar becomes a sidebar. Desktop: a sticky rail, collapsible via the ☰ toggle (persisted). Mobile (<700px): an overlay drawer over a backdrop. */ .shell { display: flex; align-items: flex-start; min-height: calc(100vh - 57px); } nav#tabs { display: flex; flex-direction: column; gap: 2px; flex: 0 0 208px; width: 208px; box-sizing: border-box; position: sticky; top: 57px; height: calc(100vh - 57px); overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); padding: 12px 10px 24px; } nav#tabs button { background: none; border: none; color: var(--muted); padding: 9px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; text-align: left; width: 100%; } nav#tabs button.on { background: var(--panel2); color: var(--amber); } nav#tabs button:hover { color: var(--amber2); } body.nav-collapsed .shell nav#tabs { display: none; } #navToggle { background: none; border: none; font-size: 1.15rem; cursor: pointer; color: var(--muted); padding: 4px 8px; } #navToggle:hover { color: var(--amber2); } header .grow { flex: 1; } .nav-backdrop { display: none; } main { flex: 1; min-width: 0; max-width: 1180px; margin: 0 auto; padding: 22px 18px 80px; } h2 { font-size: 17px; margin: 26px 0 10px; } h2 small { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 8px; } .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 12px 0; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } .card .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } .card .v { font-size: 24px; font-weight: 700; margin-top: 4px; } .card .v small { font-size: 13px; color: var(--muted); font-weight: 400; } .card.ok { border-color: #3d5a2c; } .card.bad { border-color: #6e2f2a; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 12px 0; } .row { display: flex; gap: 10px; margin: 8px 0; flex-wrap: wrap; align-items: center; } .row label { color: var(--muted); font-size: 12px; min-width: 130px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } @media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } } input, select, textarea { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; font: inherit; } input:focus, select:focus, textarea:focus { outline: 1px solid var(--amber); } textarea { width: 100%; min-height: 110px; resize: vertical; } button { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; cursor: pointer; font: inherit; font-weight: 600; } button:hover { border-color: var(--amber); } button.primary { background: linear-gradient(120deg, var(--amber), #d99a25); color: #201a08; border: none; } button.primary:hover { filter: brightness(1.08); } button.ghost { background: none; } button.danger { color: var(--red); } button:disabled { opacity: .5; cursor: default; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; } tr:hover td { background: rgba(245, 185, 66, .04); } .tableWrap { overflow-x: auto; } .item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 10px 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .item .grow { flex: 1; min-width: 220px; } .item .title { font-weight: 700; } .item .sub { color: var(--muted); font-size: 12px; margin-top: 2px; } .pill { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .04em; } .pill.draft { background: #3a3427; color: var(--muted); } .pill.scheduled { background: #2a3a4d; color: #9cc7f2; } .pill.running { background: #2e4d2a; color: var(--green); } .pill.paused { background: #4d3d21; color: var(--amber2); } .pill.done { background: #23302a; color: #8fd0ae; } .pill.cancelled, .pill.failed { background: #4d2724; color: #eb9a92; } .pill.email { background: #33303f; color: #b9b1e8; } .pill.sms { background: #21333b; color: #8fd0d0; } .pill.whatsapp { background: #23392a; color: #93d5a0; } .pill.export { background: #35302a; color: var(--amber2); } .progress { height: 7px; background: var(--panel2); border-radius: 5px; overflow: hidden; min-width: 130px; } /* width starts at 0 and is set through the CSSOM (el.style.width) — the page's CSP is style-src 'self' with no 'unsafe-inline', so an inline style= attribute in markup is silently dropped, which previously left every bar at 100%. */ .progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--amber2)); } /* ---- utility classes ---- These exist because the CSP forbids inline style attributes; anything that would have been style="..." in markup must be a class (or CSSOM). */ .grow1 { flex: 1; } .lbl-auto { min-width: auto; } .lbl-dow { min-width: auto; margin-right: 10px; } .span-all { grid-column: 1 / -1; } .prewrap { white-space: pre-wrap; } .m0 { margin: 0; } .rule { border: 0; border-top: 1px solid var(--line); margin: 8px 0; } .muted { color: var(--muted); font-size: 12px; } .mono { font-family: Consolas, monospace; font-size: 12px; } #toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--panel2); border: 1px solid var(--amber); border-radius: 10px; padding: 10px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: pop .18s ease-out; max-width: 380px; } .toast.bad { border-color: var(--red); } @keyframes pop { from { transform: translateY(8px); opacity: 0; } } /* ---- journeys v0 (designer) ---- A vertical chain: entry cap, numbered steps joined by a connector line, exit cap. Connectors are ::before pseudo-elements, not markup. */ .jstep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .jstep + .jstep { margin-top: 14px; position: relative; } .jstep + .jstep::before { content: ''; position: absolute; top: -15px; left: 26px; width: 2px; height: 14px; background: var(--line); } .jstep-cap { background: transparent; border-style: dashed; color: var(--muted); } .jstep-n { background: var(--panel); border: 1px solid var(--amber); border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--amber); font-weight: 700; } .jstep-wait { width: 70px; } /* ---- analytics v0 ---- Bar heights are set through the CSSOM (el.style.height) — the CSP's style-src 'self' drops inline style attributes in markup. */ .chart { display: flex; align-items: flex-end; gap: 4px; min-height: 150px; overflow-x: auto; padding: 6px 2px 8px; } .ch-day { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; } .ch-stack { display: flex; flex-direction: column-reverse; width: 18px; } .ch-stack i { display: block; width: 100%; } .ch-stack i:last-child { border-radius: 3px 3px 0 0; } .ch-email { background: #b9b1e8; } .ch-sms { background: #8fd0d0; } .ch-whatsapp { background: #93d5a0; } .ch-lbl { font-size: 10px; color: var(--muted); white-space: nowrap; } /* ---- responsive (additive only — desktop rendering above is unchanged) ---- */ /* Data tables keep a readable width and scroll inside .tableWrap on small screens. */ @media (max-width: 760px) { .tableWrap table { min-width: 560px; } } /* Phones + small tablets: single-row scrollable nav (every tab stays reachable), full-width form fields, ~40px tap targets. */ @media (max-width: 700px) { header { gap: 10px; padding: 10px 12px; } /* Drawer nav: off-canvas until ☰ opens it; a backdrop closes it. */ nav#tabs { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; z-index: 120; transform: translateX(-100%); transition: transform .18s ease-out; box-shadow: 4px 0 24px rgba(0,0,0,.4); padding-top: 16px; } body.nav-open nav#tabs { transform: translateX(0); } body.nav-collapsed .shell nav#tabs { display: flex; } /* collapse is a desktop concept */ body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(8, 10, 14, .55); } nav#tabs button { min-height: 42px; } #logout { margin-left: auto; } main { padding: 16px 12px 80px; } button { min-height: 40px; } input, select, textarea { font-size: 16px; } /* prevents mobile-Safari focus zoom */ .bar { flex-wrap: wrap; } /* Form rows stack: label on its own line, fields full width. The !important outranks the inline style="flex:1" some fields carry — mobile only. */ .panel .row > label { min-width: 0; flex: 1 1 100%; } .panel .row > input:not([type=checkbox]), .panel .row > select { flex: 1 1 100% !important; width: auto; min-width: 0; } .panel .row > button { flex: 1 1 100%; } .item .row button { flex: 1 1 auto; } .lock { padding: 16px; } .lock-card { width: min(360px, 100%); padding: 28px 20px; } #toasts { left: 16px; } .toast { max-width: none; } } /* Segment preview — the funnel, warning notes and the headline count. Every rule lives here because the dashboard's CSP is style-src 'self': an inline style attribute is silently dropped, so only the CSSOM (used for the funnel bar widths) and this stylesheet actually apply. */ .big { font-size: 1.6rem; } .note { margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; border-left: 3px solid var(--line, #2b323d); background: rgba(255, 255, 255, .03); font-size: 13px; } .note-warn { border-left-color: #dcae55; } .note-err { border-left-color: #e0685f; } .funnel { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 5px; } .fn-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(80px, 2fr) auto; gap: 10px; align-items: center; font-size: 12.5px; } .fn-label { overflow-wrap: anywhere; } .fn-track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; } .fn-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8873b, #dcb264); } .fn-count { white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .fn-row { grid-template-columns: 1fr auto; } .fn-track { grid-column: 1 / -1; } } /* ---- journey canvas ------------------------------------------------------- The full-viewport SVG graph editor (journey-canvas.js). Everything here because the CSP drops inline styles; SVG geometry uses attributes. */ .jc-root { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg, #14161a); } .jc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line, #2a2e35); background: var(--panel, #1b1e24); } .jc-name { font-size: 1.05rem; font-weight: 600; background: transparent; border: 1px solid transparent; color: inherit; padding: 6px 8px; border-radius: 6px; min-width: 260px; } .jc-name:hover, .jc-name:focus { border-color: var(--line, #2a2e35); background: var(--bg, #14161a); } .jc-save-state { font-size: .85rem; } .jc-body { display: flex; flex: 1; min-height: 0; } .jc-palette { width: 190px; border-right: 1px solid var(--line, #2a2e35); padding: 12px; overflow-y: auto; background: var(--panel, #1b1e24); } .jc-pal-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; } .jc-palette button[data-add] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin-bottom: 6px; text-align: left; padding: 8px 10px; } .jc-palette button[data-add] span { font-size: .78rem; } .jc-problems { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .jc-stage-wrap { flex: 1; min-width: 0; position: relative; } .jc-stage { width: 100%; height: 100%; display: block; cursor: grab; outline: none; touch-action: none; } .jc-stage:active { cursor: grabbing; } .jc-grid-dot { fill: var(--line, #2a2e35); } .jc-inspector { width: 250px; border-left: 1px solid var(--line, #2a2e35); padding: 14px; overflow-y: auto; background: var(--panel, #1b1e24); } .jc-insp { display: flex; flex-direction: column; gap: 8px; } .jc-insp-title { font-weight: 700; margin-bottom: 4px; } .jc-insp label { font-size: .8rem; color: var(--muted, #9aa3af); } .jc-insp input, .jc-insp select { width: 100%; } .jc-insp .jc-del-node { margin-top: 14px; } .jc-insp-empty { padding: 10px; font-size: .85rem; } .jc-node { cursor: move; } .jc-node-box { fill: var(--panel, #1b1e24); stroke: var(--line, #3a3f47); stroke-width: 1.2; } .jc-node.jc-selected .jc-node-box { stroke: var(--accent, #d09a45); stroke-width: 2; } .jc-entry .jc-node-box { stroke: #4c9e57; } .jc-message .jc-node-box { stroke: #4c7fd0; } .jc-condition .jc-node-box, .jc-split .jc-node-box { stroke: #b08a2e; } .jc-exit .jc-node-box { stroke: #a05252; } .jc-node-title { font-size: 12px; font-weight: 700; fill: currentColor; } .jc-node-sub { font-size: 10.5px; fill: var(--muted, #9aa3af); } .jc-port { fill: var(--accent, #d09a45); stroke: var(--bg, #14161a); stroke-width: 2; cursor: crosshair; } .jc-edge { fill: none; stroke: var(--muted, #7f8894); stroke-width: 1.6; } .jc-edge.jc-selected { stroke: var(--accent, #d09a45); stroke-width: 2.4; } .jc-edge-draft { stroke-dasharray: 5 4; } .jc-edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; } .jc-edge-label { font-size: 10px; fill: var(--accent, #d09a45); font-weight: 700; text-transform: uppercase; } .jc-arrow { fill: var(--muted, #7f8894); } .jc-badge circle { fill: var(--accent, #d09a45); } .jc-badge text { font-size: 9px; font-weight: 700; fill: #14161a; } /* ---- inbox ---------------------------------------------------------------- */ .inbox-wrap { display: flex; gap: 14px; min-height: 420px; } .inbox-threads { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 72vh; } .inbox-thread { border: 1px solid var(--line, #2a2e35); border-radius: 8px; padding: 10px 12px; cursor: pointer; background: var(--panel, #1b1e24); } .inbox-thread:hover, .inbox-thread.on { border-color: var(--accent, #d09a45); } .inbox-thread.unread { border-left: 3px solid var(--accent, #d09a45); } .it-top { display: flex; gap: 8px; align-items: center; } .it-preview { font-size: .85rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .it-ts { font-size: .75rem; margin-top: 2px; } .inbox-view { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ib-timeline { flex: 1; overflow-y: auto; max-height: 55vh; display: flex; flex-direction: column; gap: 10px; padding: 12px 4px; } .ib-msg { max-width: 78%; } .ib-msg.in { align-self: flex-start; } .ib-msg.out { align-self: flex-end; text-align: right; } .ib-bubble { display: inline-block; padding: 8px 12px; border-radius: 12px; background: var(--panel, #1b1e24); border: 1px solid var(--line, #2a2e35); text-align: left; white-space: pre-wrap; } .ib-msg.out .ib-bubble { background: rgba(208, 154, 69, .12); border-color: rgba(208, 154, 69, .4); } .ib-meta { font-size: .72rem; margin-top: 3px; } .ib-compose { align-items: flex-end; margin-top: 8px; } /* ---- inbox additions: drafts, canned replies, assignment, personas ---- */ .ib-draft { margin-top: 8px; } .ib-draft-body { white-space: pre-wrap; margin: 6px 0; } .ib-assignee { width: 110px; } .ib-canned { max-width: 130px; } .grid2 .span2 { grid-column: 1 / -1; } #personaPanel form { margin-top: 12px; } #personaPanel textarea { width: 100%; } .ib-sys { text-align: center; font-size: .74rem; padding: 2px 0; } .ib-profile { font-size: .78rem; padding: 4px 0 8px; border-bottom: 1px solid var(--line, #2a2e35); margin-bottom: 6px; } /* P2 inbound-ai: toolbar, search hits, internal notes, retry buttons */ .ib-toolbar { margin-bottom: 8px; align-items: center; } .ib-toolbar .chip { font-size: .78rem; padding: 3px 10px; border-radius: 12px; } .ib-toolbar .chip.on { background: var(--accent, #d09a45); color: #14161a; border-color: var(--accent, #d09a45); } .ib-hit { padding: 6px 8px; border-bottom: 1px solid var(--line, #2a2e35); cursor: pointer; font-size: .82rem; } .ib-hit:hover { background: var(--panel-2, #22262d); } .ib-note { background: rgba(208, 154, 69, .08); border-left: 3px solid var(--accent, #d09a45); border-radius: 4px; padding: 6px 10px; margin: 6px 24px; font-size: .82rem; white-space: pre-wrap; } button.mini { font-size: .7rem; padding: 1px 7px; } /* ---- canvas v2: zoom controls, marquee, validity, badges, simulation ---- */ .jc-zoomctl { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 4px; background: var(--panel, #1b1e24); border: 1px solid var(--line, #2a2e35); border-radius: 8px; padding: 4px; } .jc-zoomctl button { padding: 2px 8px; font-size: .8rem; } .jc-marquee { fill: rgba(208, 154, 69, .08); stroke: var(--accent, #d09a45); stroke-dasharray: 4 3; stroke-width: 1; } /* P2 canvas: guides, minimap, notes, context menu, accents, metrics */ .jc-guide { stroke: var(--accent, #d09a45); stroke-width: 1; stroke-dasharray: 6 4; opacity: .7; } .jc-minimap { position: absolute; right: 12px; bottom: 12px; border: 1px solid var(--line, #2a2e35); border-radius: 8px; background: var(--panel, #1b1e24); cursor: pointer; } .jc-mm-bg { fill: transparent; } .jc-mm-node { fill: var(--muted, #8b93a1); opacity: .7; } .jc-mm-entry { fill: var(--accent, #d09a45); } .jc-mm-exit { fill: #c56b6b; } .jc-mm-view { fill: rgba(208, 154, 69, .12); stroke: var(--accent, #d09a45); stroke-width: 1; } .jc-note-box { fill: rgba(208, 154, 69, .1); stroke: rgba(208, 154, 69, .5); } .jc-note-text { font-size: .72rem; fill: var(--fg, #d7dce3); } .jc-node-metrics { font-size: .66rem; fill: var(--muted, #8b93a1); } .jc-edge-caption { font-size: .64rem; fill: var(--muted, #8b93a1); } .jc-edge-handle { fill: var(--panel, #1b1e24); stroke: var(--accent, #d09a45); stroke-width: 2; cursor: grab; } .jc-ctxmenu { position: fixed; z-index: 60; background: var(--panel, #1b1e24); border: 1px solid var(--line, #2a2e35); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,.4); } .jc-ctxmenu button { text-align: left; padding: 4px 10px; font-size: .82rem; border: 0; background: transparent; } .jc-ctxmenu button:hover { background: var(--panel-2, #22262d); } .jc-ctxmenu hr { border: 0; border-top: 1px solid var(--line, #2a2e35); margin: 4px 0; } .jc-ctx-title { font-size: .7rem; padding: 2px 10px; } .jc-accents { display: flex; gap: 6px; margin: 4px 0; } .jc-accent { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line, #2a2e35); padding: 0; } .jc-accent.on { border-color: var(--fg, #d7dce3); } .jr-toolbar { margin-bottom: 8px; align-items: center; } /* P2 analytics: failed series, axis, heatmap, clickable rows */ .ch-failed { background: var(--red); opacity: .75; } .ch-axis { display: flex; flex-direction: column; justify-content: space-between; height: 120px; margin-right: 6px; } .ch-axis-lbl { font-size: .62rem; color: var(--muted); } .an-heat th { font-size: .6rem; padding: 2px 4px; } .an-heat-cell { text-align: center; padding: 2px 4px; font-size: .68rem; } .an-camp-row { cursor: pointer; } /* P2 frontend: loading bar, SSE dot, offline banner, skip link */ .load-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--amber), var(--amber2)); transform: scaleX(0); transform-origin: left; transition: transform .3s; z-index: 200; } .load-bar.on { transform: scaleX(.8); animation: loadcrawl 1.2s ease-out infinite alternate; } @keyframes loadcrawl { from { transform: scaleX(.3); } to { transform: scaleX(.85); } } .sse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; vertical-align: middle; } .sse-up { background: var(--green); } .sse-down { background: var(--warn); animation: pulse 1.2s infinite; } @keyframes pulse { 50% { opacity: .4; } } .offline-banner { position: fixed; top: 0; left: 0; right: 0; background: var(--red); color: #fff; text-align: center; padding: 4px; font-size: .8rem; z-index: 201; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--amber); color: #201a08; padding: 8px 14px; z-index: 300; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } .tab-dot::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-left: 4px; vertical-align: super; } .act-full { white-space: pre-wrap; max-width: 480px; font-size: .7rem; } .act-detail summary { cursor: pointer; list-style: none; } .cmd-palette { position: fixed; top: 15%; left: 50%; transform: translateX(-50%); width: 420px; max-width: 92vw; background: var(--panel); border: 1px solid var(--amber); border-radius: 12px; box-shadow: 0 18px 60px rgba(0,0,0,.5); z-index: 250; padding: 8px; } .cmd-palette input { width: 100%; margin-bottom: 6px; } .cmd-row { padding: 6px 10px; border-radius: 6px; cursor: pointer; } .cmd-row.on, .cmd-row:hover { background: var(--panel2); color: var(--amber); } .jc-node.jc-drop-ok .jc-node-box { stroke: #4c9e57; stroke-width: 2.4; } .jc-node.jc-drop-bad .jc-node-box { stroke: #e0685f; stroke-width: 2.4; stroke-dasharray: 4 3; } .jc-edge-ok { stroke: #4c9e57; } .jc-edge-bad { stroke: #e0685f; } .jc-node.jc-has-err .jc-node-box { stroke: #e0685f; } .jc-node.jc-has-warn .jc-node-box { stroke: #dcae55; } .jc-vbadge circle { fill: #e0685f; } .jc-node.jc-has-warn .jc-vbadge circle { fill: #dcae55; } .jc-vbadge text { font-size: 11px; font-weight: 800; fill: #14161a; } .jc-node.jc-sim .jc-node-box { stroke-width: 2.4; filter: none; } .jc-simbadge circle { fill: #4c7fd0; } .jc-simbadge text { font-size: 10px; font-weight: 700; fill: #fff; } .jc-sim-step { padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: .84rem; } .jc-sim-step:hover { background: var(--bg, #14161a); } .jc-keys-title { margin-top: 14px; } .jc-keys { font-size: .72rem; line-height: 1.5; } .jc-versions { max-width: 170px; } .jc-tpl-preview { border: 1px solid var(--line, #2a2e35); border-radius: 6px; padding: 8px; font-size: .78rem; white-space: pre-wrap; max-height: 140px; overflow-y: auto; } .jc-audience { font-size: .8rem; } .jc-advisory { font-size: .76rem; } .jc-stage.jc-panning { cursor: grab; } .jc-prob-link { cursor: pointer; } /* ---- segments v2: toolbar, condition builder ---- */ .seg-toolbar { margin-bottom: 10px; } .cb-group { border: 1px solid var(--line, #2a2e35); border-radius: 8px; padding: 8px 10px; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; } .cb-group .cb-group { margin-left: 14px; } .cb-ghead { flex-wrap: wrap; gap: 6px; } .cb-ghead button { padding: 2px 8px; font-size: .78rem; } .cb-leaf { flex-wrap: wrap; gap: 6px; align-items: center; } .cb-leaf select, .cb-leaf input { max-width: 180px; } .cb-hint { font-size: .72rem; } .cbDel { padding: 2px 8px; } .w70 { width: 70px; } .w90 { width: 90px; } /* ---- template editor v2 ---- */ .tf-split { display: flex; gap: 12px; align-items: stretch; } .tf-editor { position: relative; flex: 1; min-width: 0; } .tf-editor textarea { position: relative; width: 100%; min-height: 220px; background: transparent; color: transparent; caret-color: var(--fg, #e8eaed); resize: vertical; z-index: 2; } .tf-hl { position: absolute; inset: 0; margin: 0; padding: 8px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; pointer-events: none; z-index: 1; color: var(--fg, #e8eaed); font-size: 13px; line-height: 1.45; border: 1px solid transparent; } .tf-editor textarea, .tf-hl { font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.45; padding: 8px; } .tf-tok { color: var(--accent, #d09a45); } .tf-tok-err { text-decoration: underline wavy #e0685f; } .tf-preview-pane { flex: 1; min-width: 0; border: 1px solid var(--line, #2a2e35); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .tf-live { overflow-y: auto; max-height: 320px; } .tf-mail-frame { width: 100%; min-height: 240px; border: 1px solid var(--line, #2a2e35); border-radius: 6px; background: #fff; } .tf-chip { padding: 1px 7px; font-size: .74rem; margin: 1px; } .bb-row { align-items: center; gap: 6px; margin: 4px 0; } .bb-handle { cursor: grab; color: var(--muted, #9aa3af); } .tf-diff-add { background: rgba(76, 158, 87, .15); } .tf-diff-del { background: rgba(224, 104, 95, .15); text-decoration: line-through; } @media (max-width: 900px) { .tf-split { flex-direction: column; } } .ch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .ch-card { display: flex; flex-direction: column; gap: 6px; } /* ---- frontend front: a11y, chips, bell, modal, table, toasts v2 ---- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .chip { padding: 2px 10px; border-radius: 999px; font-size: .78rem; } .chip.on { background: var(--accent); color: var(--bg); border-color: var(--accent); } .bell { position: relative; background: transparent; border: none; font-size: 1.05rem; cursor: pointer; } .bell-dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--err); } .notif-panel { position: absolute; top: 46px; right: 60px; z-index: 80; max-width: 380px; max-height: 60vh; overflow-y: auto; } .notif-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: .8rem; } .notif-row.notif-bad .mono { color: var(--err); } .ui-modal { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 18px; max-width: 460px; width: 90vw; } .ui-modal::backdrop { background: rgba(0, 0, 0, .55); } .ui-modal-form { display: flex; flex-direction: column; gap: 12px; } .ui-modal-body { white-space: pre-wrap; } .ui-modal-actions { justify-content: flex-end; } .ui-modal-input { width: 100%; } .ui-tbl-bar { margin: 6px 0; } .ui-th-sort { cursor: pointer; user-select: none; } .ui-tbl-pages { justify-content: center; margin-top: 6px; } .toast { display: flex; align-items: center; gap: 8px; } .toast-x { background: transparent; border: none; color: inherit; cursor: pointer; font-size: 1rem; padding: 0 2px; } .toast-info { border-left: 3px solid var(--info); } .toast-success { border-left: 3px solid var(--ok); } .toast-error { border-left: 3px solid var(--err); } .nav-group { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 12px 12px 2px; } nav#tabs .nav-group:first-child { margin-top: 0; } .field-err { border-color: var(--err) !important; } .field-err-msg { color: var(--err); font-size: .76rem; margin-left: 6px; } .alert-type { color: var(--err); } .wiz-nav { margin-bottom: 10px; } .cap-meter { font-size: .74rem; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; } .cap-meter.cap-hot { color: var(--err); border-color: var(--err); } /* Reduced motion (LR-0723): every animation and transition collapses. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Canvas '?' cheat-sheet (LR-0069) */ .jc-cheatsheet { position: absolute; inset: 0; z-index: 40; background: rgba(10, 12, 16, .55); display: flex; align-items: center; justify-content: center; } .jc-cheatsheet-card { background: var(--panel, #171a21); border: 1px solid var(--line, #2a2f3a); border-radius: 10px; padding: 18px 22px; max-width: 420px; box-shadow: 0 12px 40px rgba(0,0,0,.45); } .jc-cheatsheet-card h3 { margin: 0 0 10px; font-size: 15px; } .jc-cheatsheet-card table { border-collapse: collapse; width: 100%; } .jc-cheatsheet-card td { padding: 3px 8px 3px 0; font-size: 13px; vertical-align: top; } .jc-cheatsheet-card .jc-key { font-family: ui-monospace, monospace; white-space: nowrap; color: var(--accent, #d09a45); } .jc-cheatsheet-card .muted { margin: 10px 0 0; font-size: 12px; opacity: .65; } /* Canvas node search (LR-0064) */ .jc-search { position: absolute; inset: 0; z-index: 40; background: rgba(10, 12, 16, .35); display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; } .jc-search-card { background: var(--panel, #171a21); border: 1px solid var(--line, #2a2f3a); border-radius: 10px; width: min(440px, 90%); box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden; } .jc-search-card input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line, #2a2f3a); background: transparent; color: inherit; padding: 12px 14px; font-size: 14px; outline: none; } .jc-search-card ul { list-style: none; margin: 0; padding: 4px 0; max-height: 300px; overflow-y: auto; } .jc-search-card li { padding: 7px 14px; font-size: 13px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; } .jc-search-card li span { opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jc-search-card li.on, .jc-search-card li:hover { background: rgba(208, 154, 69, .12); } .jc-search-card li.none { cursor: default; opacity: .5; } .jc-found .jc-node-body, g.jc-found rect:first-of-type { animation: jc-pulse 0.8s ease-in-out 2; } @keyframes jc-pulse { 0%, 100% { stroke-width: 1; } 50% { stroke-width: 5; stroke: var(--accent, #d09a45); } } /* Journey list thumbnails (LR-0071) */ .jr-thumb { width: 84px; height: 48px; flex: 0 0 auto; margin-right: 10px; border: 1px solid var(--line, #2a2f3a); border-radius: 6px; background: rgba(255,255,255,.02); } .jr-thumb line { stroke: var(--line, #3a4150); stroke-width: 1; } .jr-thumb circle.jt-entry { fill: #5aa66b; } .jr-thumb circle.jt-exit { fill: #c56b6b; } .jr-thumb circle.jt-msg { fill: var(--accent, #d09a45); } .jr-thumb circle.jt-mid { fill: #5b8dd6; } /* Full-screen template editor (LR-0359) */ .tf-editor { position: relative; } .tf-expand { position: absolute; top: 6px; right: 6px; z-index: 5; padding: 2px 8px; font-size: 14px; opacity: .6; } .tf-expand:hover { opacity: 1; } #templateForm.tf-fullscreen { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--bg, #0f1116); padding: 18px; margin: 0; border-radius: 0; } #templateForm.tf-fullscreen .tf-split { min-height: 70vh; } #templateForm.tf-fullscreen #tfBody, #templateForm.tf-fullscreen .tf-hl { min-height: 65vh; } /* Automation recipe cards (LR-0285) */ .auto-recipe { text-align: left; padding: 10px 14px; line-height: 1.45; max-width: 260px; } /* Touch editing (LR-0065): the stage owns its gestures */ .jc-stage { touch-action: none; } /* Guided tour (LR-0724) */ .tour-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(8, 10, 14, .55); outline: none; } .tour-ring { position: fixed; border: 2px solid var(--accent, #d09a45); border-radius: 8px; box-shadow: 0 0 0 4000px rgba(8, 10, 14, .55); background: transparent; pointer-events: none; } .tour-overlay { background: transparent; } .tour-card { position: fixed; width: 320px; background: var(--panel, #171a21); border: 1px solid var(--line, #2a2f3a); border-radius: 10px; padding: 14px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.5); } .tour-card h3 { margin: 0 0 6px; font-size: 15px; } .tour-card p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; } /* Empty-state component (LR-0694) */ .empty-state { text-align: center; padding: 42px 20px; } .empty-state .es-icon { font-size: 34px; margin-bottom: 8px; } .empty-state p { color: var(--muted); margin: 6px auto 16px; max-width: 46ch; } /* Help tooltip (LR-0709): hover or keyboard focus reveals the note */ .tipwrap { position: relative; display: inline-block; margin-left: 5px; color: var(--muted); cursor: help; font-size: 12px; border-bottom: none; } .tipwrap:focus { outline: 1px solid var(--amber); border-radius: 3px; } .tipbox { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 240px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.45; color: var(--text); z-index: 60; box-shadow: 0 8px 26px rgba(0,0,0,.35); text-transform: none; letter-spacing: normal; font-weight: 400; } .tipwrap:hover .tipbox, .tipwrap:focus .tipbox { display: block; } #themeToggle { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--muted); } #themeToggle:hover { color: var(--amber2); }