/* Brevo Creator Engine - design tokens sourced from Brevo's own design-token file (designsystem.brevo.com) and live brevo.com CSS. Semantic layer re-derived to pass WCAG 2.2 AA in both themes. */ :root { /* brand primitives (verbatim Brevo) */ --forest-100:#effaf7; --forest-200:#d8efe8; --forest-300:#b3dfd2; --forest-400:#71c4ab; --forest-500:#48ac8e; --forest-600:#0b996f; --forest-700:#02835c; --forest-800:#006a43; --forest-900:#004227; --forest-950:#002e1e; --mint-100:#f9fff6; --mint-200:#e8fedf; --mint-300:#d7fec8; --mint-400:#c6efb6; --grey-25:#fafafa; --grey-50:#f5f5f5; --grey-100:#f0f0f0; --grey-200:#e3e3e3; --grey-300:#cfcfcf; --grey-400:#b5b5b5; --grey-500:#858585; --grey-600:#696969; --grey-700:#474747; --grey-800:#2c2c2c; --grey-900:#1b1b1b; --iris-100:#efeefc; --iris-200:#dbd9f7; --iris-300:#b3aeef; --iris-400:#8b83e7; --iris-500:#6358de; --iris-700:#4f46b2; --iris-900:#3c3585; --tulip-100:#ffecee; --tulip-200:#ffd6db; --tulip-400:#ff8d9a; --tulip-700:#e72448; --tulip-800:#cf1a3b; --tulip-900:#b81735; --coral-100:#fff4f0; --coral-200:#ffdfd1; --coral-400:#ff976b; --coral-700:#d9592e; --coral-900:#a24428; --sun-100:#fffbeb; --sun-300:#fee89a; --sun-400:#fedd67; --sun-900:#8e6f01; --chart-1:#6459de; --chart-2:#159e9e; --chart-3:#eb4280; --chart-4:#5aa3e7; --chart-5:#deaf02; --chart-6:#96834a; --chart-7:#ef6639; --chart-8:#0b996e; --chart-9:#89af79; --chart-10:#ff384f; --chart-11:#948d7a; --font-heading:'Bricolage Grotesque', Verdana, ui-sans-serif, system-ui, sans-serif; --font-body:'Inter', Arial, ui-sans-serif, system-ui, -apple-system, sans-serif; --r-sm:.25rem; --r-md:.5rem; --r-lg:1rem; --r-xl:1.5rem; --r-pill:10rem; --bw:2px; --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --shadow-xs:0 1px 2px rgba(28,28,28,.08); --shadow-sm:0 4px 8px -2px rgba(28,28,28,.14), 0 2px 4px -2px rgba(28,28,28,.1); --shadow-md:0 10px 16px -4px rgba(28,28,28,.1), 0 4px 6px -2px rgba(28,28,28,.04); --shadow-lg:0 20px 24px -4px rgba(28,28,28,.08), 0 8px 8px rgba(28,28,28,.03); --gloss:inset -1px -3px 7.8px 0 rgba(27,27,27,.25), inset 1px 3px 8px 0 rgba(255,255,255,.2), 0 4px 8px -2px rgba(27,27,27,.14), 0 2px 4px -2px rgba(27,27,27,.1); /* semantic - light */ --bg:#ffffff; --bg-subtle:var(--grey-25); --bg-muted:var(--grey-50); --rail:var(--mint-100); --rail-border:var(--forest-200); --surface:#ffffff; --overlay:rgba(92,109,85,.4); --border:var(--grey-200); --border-strong:var(--grey-300); --text:var(--grey-900); --text-secondary:var(--grey-700); --text-muted:var(--grey-600); --action:var(--grey-900); --action-hover:var(--grey-800); --on-action:#ffffff; --accent:var(--forest-800); --accent-hover:var(--forest-900); --on-accent:#ffffff; --accent-graphic:#0b996e; --link:var(--forest-800); --focus:var(--iris-700); --focus-offset:#ffffff; --ok:var(--forest-800); --ok-bg:var(--forest-100); --ok-border:var(--forest-200); --warn:var(--coral-900); --warn-bg:var(--coral-100); --warn-border:var(--coral-200); --err:var(--tulip-800); --err-bg:var(--tulip-100); --err-border:var(--tulip-200); --info:var(--iris-700); --info-bg:var(--iris-100); --info-border:var(--iris-200); --hold:var(--sun-900); --hold-bg:var(--sun-100); --hold-border:var(--sun-300); --pill-bg:var(--mint-200); --pill-text:var(--forest-900); } :root[data-theme="dark"], :root:not([data-theme="light"]) { --bg:var(--grey-900); --bg-subtle:#232323; --bg-muted:var(--grey-800); --rail:#12251d; --rail-border:var(--forest-900); --surface:var(--grey-800); --overlay:rgba(0,0,0,.6); --border:var(--grey-700); --border-strong:var(--grey-600); --text:#fafafa; --text-secondary:var(--grey-300); --text-muted:var(--grey-400); --action:var(--mint-300); --action-hover:var(--mint-200); --on-action:var(--forest-900); --accent:var(--mint-300); --accent-hover:var(--mint-200); --on-accent:var(--forest-900); --accent-graphic:var(--forest-600); --link:var(--forest-400); --focus:var(--iris-400); --focus-offset:var(--grey-900); --ok:var(--forest-400); --ok-bg:#0d2a22; --ok-border:var(--forest-900); --warn:var(--coral-400); --warn-bg:#33180f; --warn-border:var(--coral-900); --err:var(--tulip-400); --err-bg:#33161b; --err-border:var(--tulip-900); --info:var(--iris-300); --info-bg:#22203d; --info-border:var(--iris-900); --hold:var(--sun-400); --hold-bg:#2e2607; --hold-border:var(--sun-900); --pill-bg:var(--forest-900); --pill-text:var(--mint-300); --shadow-xs:0 1px 2px rgba(0,0,0,.16); --shadow-sm:0 4px 8px -2px rgba(0,0,0,.24), 0 2px 4px -2px rgba(0,0,0,.16); --shadow-md:0 10px 16px -4px rgba(0,0,0,.2), 0 4px 6px -2px rgba(0,0,0,.16); --shadow-lg:0 20px 24px -4px rgba(0,0,0,.2), 0 8px 8px rgba(0,0,0,.16); --gloss:inset -1px -3px 7.8px 0 rgba(0,0,0,.35), inset 1px 3px 8px 0 rgba(255,255,255,.18), 0 4px 8px -2px rgba(0,0,0,.24); } :root[data-theme="light"] { --bg:#ffffff; --bg-subtle:var(--grey-25); --bg-muted:var(--grey-50); --rail:var(--mint-100); --rail-border:var(--forest-200); --surface:#ffffff; --overlay:rgba(92,109,85,.4); --border:var(--grey-200); --border-strong:var(--grey-300); --text:var(--grey-900); --text-secondary:var(--grey-700); --text-muted:var(--grey-600); --action:var(--grey-900); --action-hover:var(--grey-800); --on-action:#ffffff; --accent:var(--forest-800); --accent-hover:var(--forest-900); --on-accent:#ffffff; --accent-graphic:#0b996e; --link:var(--forest-800); --focus:var(--iris-700); --focus-offset:#ffffff; --ok:var(--forest-800); --ok-bg:var(--forest-100); --ok-border:var(--forest-200); --warn:var(--coral-900); --warn-bg:var(--coral-100); --warn-border:var(--coral-200); --err:var(--tulip-800); --err-bg:var(--tulip-100); --err-border:var(--tulip-200); --info:var(--iris-700); --info-bg:var(--iris-100); --info-border:var(--iris-200); --hold:var(--sun-900); --hold-bg:var(--sun-100); --hold-border:var(--sun-300); --pill-bg:var(--mint-200); --pill-text:var(--forest-900); } *{margin:0;padding:0;box-sizing:border-box} html{color-scheme:light dark} body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;color:var(--text);line-height:1.25} a{color:var(--link)} :focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus-offset),0 0 0 4px var(--focus)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill);border:3px solid var(--bg)} /* ---------- shell ---------- */ .shell{display:flex;min-height:100vh} .rail{width:232px;flex:0 0 232px;background:var(--rail);border-right:var(--bw) solid var(--rail-border); border-bottom:var(--bw) solid var(--rail-border);border-bottom-right-radius:30px; padding:var(--sp-2) .75rem;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px} .brand{display:flex;align-items:center;gap:.5rem;padding:.5rem .5rem 1.25rem} .mark{height:26px;width:26px;flex:0 0 26px;display:block} .brand .brand-name{font-family:var(--font-heading);font-weight:700;font-size:15px;line-height:1.1;color:var(--text)} .brand .sub{font-size:11px;color:var(--text-muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .login-brand{display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem} .login-brand .mark{height:30px;width:30px;flex:0 0 30px} .login-brand .wordmark{font-family:var(--font-heading);font-weight:700;font-size:22px;letter-spacing:-.02em; color:var(--accent-graphic)} #login h1{font-size:20px;margin-bottom:.25rem} .navitem{display:flex;align-items:center;gap:.625rem;padding:.5625rem .75rem;border-radius:var(--r-md); border:var(--bw) solid transparent;color:var(--text-secondary);font-weight:500;cursor:pointer; background:none;font:inherit;font-weight:500;width:100%;text-align:left;transition:background .2s} .navitem:hover{background:var(--mint-200)} :root[data-theme="dark"] .navitem:hover,:root:not([data-theme="light"]) .navitem:hover{background:rgba(255,255,255,.06)} .navitem[aria-current="page"]{background:var(--surface);border-color:var(--rail-border);color:var(--text);font-weight:600;box-shadow:var(--shadow-xs)} .navitem .ic{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:2} .navitem .count{margin-left:auto;font-size:11px;font-weight:700;background:var(--pill-bg);color:var(--pill-text);padding:1px 7px;border-radius:var(--r-pill)} .rail-foot{margin-top:auto;padding-top:var(--sp-2);border-top:var(--bw) solid var(--rail-border);display:flex;flex-direction:column;gap:.5rem} .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{height:56px;display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-4); border-bottom:var(--bw) solid var(--border);background:var(--bg);position:sticky;top:0;z-index:20} .topbar h1{font-size:18px;font-weight:600} .topbar .right{margin-left:auto;display:flex;align-items:center;gap:.75rem} .page{padding:var(--sp-4);max-width:1400px;width:100%} @media(max-width:1000px){.page{padding:var(--sp-2)}} /* ---------- primitives ---------- */ .card{background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-lg);padding:var(--sp-3)} .card.tight{padding:var(--sp-2)} .card h2{font-size:15px;margin-bottom:.75rem} .card .hint{color:var(--text-muted);font-size:12.5px;margin-bottom:.75rem} .grid{display:grid;gap:var(--sp-2)} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:.625rem} .tile{background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-lg);padding:.75rem .875rem;transition:border-color .2s} .tile[role=button]:hover{border-color:var(--border-strong)} .tile .n{font-family:var(--font-heading);font-size:23px;font-weight:700;line-height:1.15;letter-spacing:-.02em} .tile .l{font-size:10.5px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:2px;line-height:1.25} .tile .d{font-size:11.5px;color:var(--text-secondary);margin-top:.3rem;line-height:1.3} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:38px;padding:.4rem .9rem; border:var(--bw) solid transparent;border-radius:.75rem;font:inherit;font-weight:600;cursor:pointer; white-space:nowrap;transition:.2s;background:var(--surface);color:var(--text-secondary);border-color:var(--border)} .btn:hover{border-color:var(--border-strong);color:var(--text)} .btn.primary{background:var(--action);border-color:var(--action);color:var(--on-action);box-shadow:var(--gloss)} .btn.primary:hover{background:var(--action-hover);border-color:var(--action-hover)} .btn.accent{background:transparent;border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-xs)} .btn.accent:hover{background:var(--mint-100);box-shadow:var(--shadow-sm)} :root[data-theme="dark"] .btn.accent:hover,:root:not([data-theme="light"]) .btn.accent:hover{background:rgba(255,255,255,.06)} .btn.ghost{background:transparent;border-color:transparent;color:var(--accent)} .btn.ghost:hover{background:var(--mint-100)} :root[data-theme="dark"] .btn.ghost:hover,:root:not([data-theme="light"]) .btn.ghost:hover{background:rgba(255,255,255,.06)} .btn.danger{color:var(--err);border-color:var(--err-border)} .btn.danger:hover{background:var(--err-bg);border-color:var(--err)} .btn.sm{min-height:30px;padding:.2rem .6rem;font-size:12.5px;border-radius:var(--r-md)} .btn[disabled]{opacity:.5;cursor:not-allowed} .pill{display:inline-flex;align-items:center;gap:.25rem;padding:2px 9px;border-radius:var(--r-pill); font-size:11px;font-weight:700;background:var(--pill-bg);color:var(--pill-text);white-space:nowrap} .pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.err{background:var(--err-bg);color:var(--err)} .pill.info{background:var(--info-bg);color:var(--info)} .pill.hold{background:var(--hold-bg);color:var(--hold)} .pill.muted{background:var(--bg-muted);color:var(--text-secondary)} .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block} input[type=text],input[type=number],input[type=search],input[type=url],input[type=email],select,textarea{ width:100%;background:var(--surface);border:var(--bw) solid var(--border-strong);border-radius:var(--r-md); padding:.45rem .7rem;font:inherit;color:var(--text)} input:focus,select:focus,textarea:focus{border-color:var(--text);outline:none} textarea{min-height:120px;resize:vertical;line-height:1.6} label.field{display:block;margin-bottom:var(--sp-2)} label.field>.lab{display:block;font-weight:600;font-size:12.5px;margin-bottom:.25rem} label.field>.desc{display:block;color:var(--text-muted);font-size:12px;margin-bottom:.375rem} label.field>.eg{display:block;color:var(--text-muted);font-size:11.5px;margin-top:.25rem;font-style:italic} .row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .spread{display:flex;gap:.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap} table{width:100%;border-collapse:collapse;font-size:13px} th{text-align:left;padding:.6rem .75rem;font-weight:600;font-size:11.5px;text-transform:uppercase; letter-spacing:.05em;color:var(--text-secondary);background:var(--bg-muted);border-bottom:var(--bw) solid var(--border);white-space:nowrap} td{padding:.7rem .75rem;border-bottom:1px solid var(--border);vertical-align:top} tbody tr:hover td{background:var(--bg-subtle)} tbody tr.clickable{cursor:pointer} .tablewrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--r-lg);background:var(--surface)} /* A narrow table does not want .tablewrap's 820px floor, but it still has to scroll inside its own box rather than pushing the page sideways on a phone. */ .tablescroll{overflow-x:auto;max-width:100%} .tablewrap table{min-width:820px} .tablewrap th:first-child,.tablewrap td:first-child{position:sticky;left:0;background:var(--surface)} .tablewrap th:first-child{background:var(--bg-muted)} tbody tr:hover td:first-child{background:var(--bg-subtle)} .tabs{display:flex;gap:.25rem;border-bottom:var(--bw) solid var(--border);margin-bottom:var(--sp-2);overflow-x:auto} .tab{padding:.5rem .875rem;border:0;border-bottom:3px solid transparent;background:none;font:inherit; font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;margin-bottom:-2px} .tab:hover{color:var(--text)} .tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent-graphic)} /* ---------- filter chips ---------- These carry real weight: they are how a person answers "who has never replied to me". So they are sized and coloured as a primary control, not as incidental metadata. Each chip states its own count, and the count keeps its contrast in both the resting and the selected state. */ .filterbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .filterbar>.flab{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);flex:0 0 auto;padding-right:.125rem} .chips{display:flex;gap:.375rem;flex-wrap:wrap;align-items:center} .chip{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .5rem .32rem .7rem; border:var(--bw) solid var(--border);border-radius:var(--r-pill);background:var(--surface); font:inherit;font-size:12.5px;font-weight:600;color:var(--text-secondary);cursor:pointer; transition:background .16s,border-color .16s,color .16s,transform .16s,box-shadow .16s} .chip .n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:17px; padding:0 5px;border-radius:var(--r-pill);background:var(--bg-muted);color:var(--text-secondary); font-size:11px;font-weight:700;line-height:1;transition:background .16s,color .16s} .chip:hover{border-color:var(--border-strong);color:var(--text);transform:translateY(-1px);box-shadow:var(--shadow-xs)} .chip:active{transform:translateY(0)} .chip[aria-pressed="true"]{background:var(--action);border-color:var(--action);color:var(--on-action); box-shadow:var(--shadow-sm)} /* The badge on a selected chip is a solid cutout in the page surface, not a translucent overlay. A selected chip is dark in the light theme and light in the dark theme, so the surface pair inverts with it and stays legible for every tone below without needing a separate token per tone. Solid also means the contrast is measurable rather than an artifact of alpha compositing. */ .chip[aria-pressed="true"] .n{background:var(--surface);color:var(--text)} /* A tone tints the resting chip so the important states read at a glance, and fills on select. Identity is never colour alone: every chip is also labelled. */ .chip.t-ok{border-color:var(--ok-border);color:var(--ok)} .chip.t-ok .n{background:var(--ok-bg);color:var(--ok)} .chip.t-ok[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:var(--on-accent)} .chip.t-hold{border-color:var(--hold-border);color:var(--hold)} .chip.t-hold .n{background:var(--hold-bg);color:var(--hold)} .chip.t-hold[aria-pressed="true"]{background:var(--hold);border-color:var(--hold);color:var(--focus-offset)} .chip.t-info{border-color:var(--info-border);color:var(--info)} .chip.t-info .n{background:var(--info-bg);color:var(--info)} .chip.t-info[aria-pressed="true"]{background:var(--info);border-color:var(--info);color:var(--focus-offset)} .chip.t-err{border-color:var(--err-border);color:var(--err)} .chip.t-err .n{background:var(--err-bg);color:var(--err)} .chip.t-err[aria-pressed="true"]{background:var(--err);border-color:var(--err);color:var(--focus-offset)} /* Clear rides along with the chips rather than wrapping to a row of its own, which in the narrow conversation column costs list height for one word. */ .chip-clear{min-height:27px;padding:.2rem .55rem;font-size:12px} /* A filter that currently matches nothing stays visible so the taxonomy never shifts under the cursor, but it recedes and stops inviting a click. */ .chip.is-zero{opacity:.45} .chip.is-zero:hover{opacity:.75;transform:none;box-shadow:none} .empty{padding:var(--sp-4);text-align:center;color:var(--text-muted)} .empty .big{font-family:var(--font-heading);font-size:16px;color:var(--text);margin-bottom:.25rem} .skel{background:linear-gradient(90deg,var(--bg-muted) 25%,var(--bg-subtle) 50%,var(--bg-muted) 75%); background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r-md);height:14px} @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}} .banner{border:var(--bw) solid var(--border);border-radius:var(--r-lg);padding:.75rem 1rem;display:flex; gap:.625rem;align-items:flex-start;font-size:13px} .banner.warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn)} .banner.err{background:var(--err-bg);border-color:var(--err-border);color:var(--err)} .banner.info{background:var(--info-bg);border-color:var(--info-border);color:var(--info)} .banner.ok{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok)} .banner.hold{background:var(--hold-bg);border-color:var(--hold-border);color:var(--hold)} /* The HTML `hidden` attribute only carries `display:none` at user-agent weight, so any component rule that sets its own display (.shell, .drawer) silently beat it and the element stayed painted and tab-reachable while marked hidden. This restores it once for every element rather than per component. */ [hidden]{display:none !important} /* ---------- drawer (right side panel) ---------- */ .scrim{position:fixed;inset:0;background:var(--overlay);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s} .scrim.open{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(680px,92vw);background:var(--surface); border-left:var(--bw) solid var(--border);z-index:61;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1); display:flex;flex-direction:column;box-shadow:var(--shadow-lg)} .drawer.open{transform:translateX(0)} .drawer-head{padding:var(--sp-2) var(--sp-3);border-bottom:var(--bw) solid var(--border);display:flex; align-items:flex-start;gap:.75rem;position:sticky;top:0;background:var(--surface);z-index:2} .drawer-body{padding:var(--sp-3);overflow-y:auto;flex:1} .drawer h2{font-size:19px} @media(max-width:680px){.drawer{width:100vw;border-left:0}} .kv{display:grid;grid-template-columns:150px 1fr;gap:.4rem 1rem;font-size:13px} .kv .k{color:var(--text-muted)} .kv .v{word-break:break-word} @media(max-width:680px){.kv{grid-template-columns:110px 1fr}} .scorebar{display:grid;grid-template-columns:120px 1fr 44px;gap:.5rem;align-items:center;margin-bottom:.4rem;font-size:12.5px} .scorebar .track{height:8px;background:var(--bg-muted);border-radius:var(--r-pill);overflow:hidden} .scorebar .fill{height:100%;border-radius:var(--r-pill)} .post{border:var(--bw) solid var(--border);border-radius:var(--r-lg);padding:.75rem;margin-bottom:.625rem} .post .meta{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-bottom:.4rem;font-size:11.5px;color:var(--text-muted)} .post .cap{white-space:pre-wrap;font-size:13px} .post details{margin-top:.4rem} .post summary{cursor:pointer;font-size:12px;color:var(--link);font-weight:600} .post .tx{margin-top:.4rem;font-size:12.5px;color:var(--text-secondary);white-space:pre-wrap; background:var(--bg-subtle);padding:.5rem;border-radius:var(--r-md);max-height:220px;overflow:auto} /* ---------- inbox 3-pane ---------- */ .inbox{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;gap:0;height:calc(100vh - 56px); border-top:0} .inbox>*{overflow-y:auto;min-width:0} .inbox .list{border-right:var(--bw) solid var(--border)} .inbox .ctx{border-left:var(--bw) solid var(--border);padding:var(--sp-2)} .inbox .thread{display:flex;flex-direction:column;height:100%} .conv{padding:.7rem .875rem;border-bottom:1px solid var(--border);cursor:pointer;display:flex;gap:.625rem} .conv:hover{background:var(--bg-subtle)} .conv[aria-selected="true"]{background:var(--mint-100);border-left:3px solid var(--accent-graphic);padding-left:calc(.875rem - 3px)} :root[data-theme="dark"] .conv[aria-selected="true"],:root:not([data-theme="light"]) .conv[aria-selected="true"]{background:rgba(255,255,255,.05)} .conv .av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--pill-bg);color:var(--pill-text); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .conv .body{min-width:0;flex:1} .conv .nm{font-weight:600;font-size:13px;display:flex;gap:.35rem;align-items:center} .conv .pv{color:var(--text-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px} .conv .tm{font-size:11px;color:var(--text-muted);margin-left:auto;white-space:nowrap} .conv.unread .nm::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent-graphic);display:inline-block} .msgs{flex:1;overflow-y:auto;padding:var(--sp-2)} .bub{max-width:76%;padding:.6rem .8rem;border-radius:var(--r-lg);margin-bottom:.625rem;font-size:13px;white-space:pre-wrap;position:relative} .bub.in{background:var(--bg-muted);border:var(--bw) solid var(--border);border-bottom-left-radius:var(--r-sm)} .bub.out{background:var(--pill-bg);color:var(--pill-text);margin-left:auto;border-bottom-right-radius:var(--r-sm)} .bub .m{font-size:10.5px;opacity:.75;margin-bottom:.25rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em} .bub .subj{font-weight:700;margin-bottom:.25rem} .composer{border-top:var(--bw) solid var(--border);padding:var(--sp-2);background:var(--surface)} @media(max-width:1100px){.inbox{grid-template-columns:280px minmax(0,1fr)}.inbox .ctx{display:none}} @media(max-width:760px){ /* Master-detail on small screens. Trapping the conversation list inside a short scroller hides almost all of it behind a nested scrollbar, so instead the list gets the whole screen and opening a thread replaces it. */ .inbox{grid-template-columns:1fr;height:auto} .inbox .list{border-right:0;max-height:none;overflow:visible} .inbox .thread,.inbox .ctx{display:none} .inbox[data-view="thread"] .list{display:none} .inbox[data-view="thread"] .thread{display:flex;min-height:calc(100vh - 120px)} .backlist{display:inline-flex!important} } .backlist{display:none} /* charts */ .bars{display:flex;align-items:flex-end;gap:3px;height:110px} .bars .b{flex:1;background:var(--chart-8);border-radius:3px 3px 0 0;min-height:2px;position:relative} .bars .b:hover{opacity:.8} .funnel .step{display:grid;grid-template-columns:130px 1fr 60px;gap:.625rem;align-items:center;margin-bottom:.4rem;font-size:12.5px} .funnel .track{height:20px;background:var(--bg-muted);border-radius:0 var(--r-sm) var(--r-sm) 0;overflow:hidden} .funnel .fill{height:100%;border-radius:0 var(--r-sm) var(--r-sm) 0} .tip{position:relative;cursor:help;border-bottom:1px dotted var(--text-muted)} .tip:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:0;z-index:50; background:var(--grey-900);color:#fff;padding:.5rem .625rem;border-radius:var(--r-md);font-size:11.5px; font-weight:400;line-height:1.45;width:280px;box-shadow:var(--shadow-md);white-space:normal;text-transform:none;letter-spacing:normal} :root[data-theme="dark"] .tip:hover::after,:root:not([data-theme="light"]) .tip:hover::after{background:#000} /* ---------- info affordance ---------- A circled "i" that explains a term the interface cannot define in the space it has: what "unresponsive" actually means, how a payout becomes committed, why a lead is held. It is a real