/* Taken from prototype v5 (design/prototype-v5.html), system fonts (no third party, strict CSP). */ :root{ --bg:#f6f4f0;--panel:#fbfaf7;--card:#fff;--ink:#1d1b18;--text:var(--ink);--muted:#7a746b;--faint:#b9b2a7;--line:#e7e2d9; --you:#d2592a;--you-s:#fbe9e0;--run:#2a6fb0;--run-s:#e3eef8;--wait:#9a7a1f;--wait-s:#f6efd9; --calm:#7a746b;--calm-s:#efebe4;--idea:#7a5ca6;--idea-s:#efe8f7;--done:#2f7d4f;--done-s:#e3f1e8;--r:10px; --side:#efebe4;--side-h:#e6e1d8;--hover:#f3f0ea;--row-h:rgba(120,110,90,.05);--chip:#f0ece5;--code:rgba(120,110,90,.12);--pre:#f1eee8; --ask-bg:#fffaf7;--err:#8a2c22;--err-s:#fbecea;--shadow:rgba(40,30,20,.05);--shadow-l:rgba(40,30,20,.12);--pri:#d2592a;--pri-h:#b84a20; --unread:#1f7ae0; color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;color:var(--ink); } *{box-sizing:border-box;margin:0;padding:0} html,body,#app{height:100%} body{background:var(--bg)} button{font:inherit;cursor:pointer} /* Splash (index.html, first load only): over the app until every space answered (client/src/boot.ts), then fades out. */ .splash{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:6vh; animation:splash-in .5s ease-out both;transition:opacity .4s ease} .splash.out{opacity:0;pointer-events:none} .splash .cup{color:var(--muted);overflow:visible;animation:splash-up .7s .1s ease-out both} .splash .word{font-size:30px;font-weight:300;letter-spacing:-.01em;color:var(--ink);margin-top:14px;animation:splash-up .7s .25s ease-out both} .splash .word span{color:var(--you)} .splash .dots{display:flex;gap:6px;margin-top:18px;height:6px} .splash .dots i{width:5px;height:5px;border-radius:50%;background:var(--faint);animation:splash-dot 1.4s ease-in-out infinite both} .splash .dots i:nth-child(2){animation-delay:.2s}.splash .dots i:nth-child(3){animation-delay:.4s} .splash .msg{min-height:20px;margin-top:16px;font-size:13.5px;color:var(--muted);text-align:center;padding:0 24px} .splash.slow .msg{color:var(--err)} @keyframes splash-in{from{opacity:0}} @keyframes splash-up{from{opacity:0;transform:translateY(6px)}} @keyframes splash-dot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.splash,.splash .cup,.splash .word,.splash .dots i{animation:none;transition:none}} /* After the first load: connection banner (WebSocket lost / browser offline), centred at the top, no layout shift. */ .netbar{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:7px;font-size:12.5px; background:var(--card);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;box-shadow:0 2px 8px var(--shadow-l)} .netbar svg{flex:none}.netbar.off{color:var(--err)} /* Space whose `synced` never came (boot.ts TIMEOUT): icon after the name, gone when it arrives. */ .nav .unloaded{flex:none;color:var(--err);display:flex;margin-right:auto}.nav:has(.unloaded) .nav-t{flex:0 1 auto}.nav .busy:has(+.unloaded){margin-right:0} .label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600} .shell{height:100%;display:grid;grid-template-columns:210px 340px 1fr} .side{background:var(--side);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:2px} .brand{font-weight:700;font-size:15px;padding:0 10px 16px}.brand span{color:var(--you)} .nav{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:14px;cursor:pointer;user-select:none} .nav:hover{background:var(--side-h)}.nav.on{background:var(--card);box-shadow:0 1px 0 var(--line)} .nav>svg{flex:none;color:var(--muted)}.nav.on>svg{color:var(--ink)} .nav .nav-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav b{flex:none;font-size:11.5px;background:var(--you);color:#fff;border-radius:10px;padding:1px 7px} /* Now: the home entry stands out (orange icon, bolder, "Your turn" counter always there, neutral at zero) */ .nav.now{font-weight:700;font-size:14.5px;padding:8px 10px} .nav.now>svg{color:var(--you)} .nav b.zero{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--faint)} .side .now+.label{margin-top:14px} /* --calm-s = --side in light mode: invisible badge, hence solid --muted */ .nav b.calm{background:var(--muted);color:var(--card)} /* Space with a running agent turn: pulsing dot right after the name (colour of the "working" chip; .pulse stops under reduced motion). */ .nav .busy{width:7px;height:7px;color:var(--run);margin-right:auto}.nav:has(.busy) .nav-t{flex:0 1 auto} .side .label{padding:16px 10px 6px} .foot{margin-top:auto;font-size:12px;color:var(--muted);padding:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px} .conn{display:flex;align-items:center;gap:6px} .dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}.dot.ok{background:var(--done)}.dot.ko{background:var(--you)} .linkbtn{background:none;border:0;color:var(--muted);text-align:left;text-decoration:underline;font-size:12px} .me-row{display:flex;align-items:center;gap:8px;min-width:0} .me-who{flex:1;min-width:0;display:flex;flex-direction:column} .me-name{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .me-role{color:var(--muted);font-size:12px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .me-row .me-edit{flex:none;width:26px;height:26px;opacity:0;transition:opacity .12s} .me-row:hover .me-edit,.me-row .me-edit:focus-visible{opacity:1} @media (hover:none){.me-row .me-edit{opacity:1}} /* Profile dialog (name + function), over the same scrim as the search palette */ .dlg{position:relative;width:min(420px,100%);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 48px var(--shadow-l);padding:18px 20px 16px} .dlg h2{margin:0;font-size:16px;color:var(--ink)} .dlg .sp-field:first-of-type{margin-top:12px} .dlg-prev{margin-top:16px;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:9px;background:var(--hover);border:1px solid var(--line)} .dlg-who{font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dlg-who .me-role{font-size:14px} .dlg-err{margin:10px 0 0} .dlg-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:16px} .list{border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel);min-height:0} .list header{padding:18px 18px 8px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px} .list h2{font-size:20px}.list header p{font-size:13px;color:var(--muted);margin-top:2px} .scroll{overflow:auto;flex:1;padding-bottom:16px} .group{padding:12px 20px 4px} .list .group{display:flex;align-items:center;gap:6px}.list .group>svg{flex:none} .list .group .count{font-weight:500;letter-spacing:0;color:var(--faint)} /* In progress section loader: the whole square svg turns around its centre (= the arc's centre), so it spins round. */ .spin{transform-origin:50% 50%;transform-box:border-box;animation:spin 3.5s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.spin{animation:none}} .list .group.fold{width:100%;background:none;border:0;font-family:inherit;cursor:pointer;text-align:left}.list .group.fold:hover{color:var(--ink)} .empty{font-size:13px;color:var(--faint);padding:6px 20px} .list .more{font-size:12px;color:var(--faint);padding:14px 20px;text-align:center} /* New-content pills: zero-height sticky strip (no layout shift), button floating over the list / thread. */ .pill-wrap{position:sticky;height:0;z-index:5;display:flex;justify-content:center;flex:none} .pill-wrap.up{top:0}.pill-wrap.down{bottom:0} .pill-wrap .pill{position:absolute;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;box-shadow:0 2px 10px var(--shadow-l);white-space:nowrap} .pill-wrap.up .pill{top:8px}.pill-wrap.down .pill{bottom:10px} .thread{margin:4px 10px;padding:11px 12px;border-radius:var(--r);cursor:pointer;border:1px solid transparent} .thread:hover{background:var(--hover)}.thread.sel{background:var(--card);border-color:var(--line);box-shadow:0 2px 8px var(--shadow)} .thread .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .thread .t{font-weight:600;font-size:14px}.thread .when{font-size:12px;color:var(--faint);white-space:nowrap} /* Lounge and thread list: framed block around the pinned ones (header included), no background: backgrounds stay for hover and selection. */ .list .pinbox,.list .secbox{margin:8px 10px 4px;padding:0 0 4px;border:1px solid var(--line);border-radius:12px} .list .pinbox .group,.list .secbox .group{padding:10px 12px 4px}.list .pinbox .thread,.list .secbox .thread{margin:4px 4px} /* Frame and title in the section's state colour (Brice): Your turn orange, In progress blue, Waiting yellow, Quiet neutral; Pinned violet (the Later colour, a view of its own that never shows in this list). */ .list .pinbox{--sec:var(--idea)}.list .secbox[data-k="b:you"]{--sec:var(--you)}.list .secbox[data-k="b:run"]{--sec:var(--run)}.list .secbox[data-k="b:wait"]{--sec:var(--wait)} .list .pinbox,.list .secbox:not([data-k="b:calm"]){border-color:color-mix(in srgb,var(--sec) 55%,transparent)} .list .pinbox>.group,.list .secbox:not([data-k="b:calm"])>.group{color:var(--sec)} .list .pinbox>.group .count,.list .secbox:not([data-k="b:calm"])>.group .count{color:inherit;opacity:.7} .list .secbox .group.fold{padding:10px 12px} /* Lounge: date separator "—— Yesterday ——" between unpinned topics (last activity). */ .list .datesep{display:flex;align-items:center;gap:10px;margin:14px 20px 4px;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap} .list .datesep::before,.list .datesep::after{content:'';flex:1;border-top:1px solid var(--line)} .thread .where{font-size:12px;color:var(--muted);margin-top:1px} /* Lounge card: « → Threads » + one state chip per bucket (spawned.ts) */ .thread .spawned-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:6px}.spawned-row .chip{margin-top:0;font-size:11px;padding:1px 7px} .chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;margin-top:7px} .c-you{background:var(--you-s);color:var(--you)}.c-run{background:var(--run-s);color:var(--run)} .c-wait{background:var(--wait-s);color:var(--wait)}.c-calm{background:var(--calm-s);color:var(--calm)} /* turn outcome announced by the agent: done (green) or action expected from you (orange, stays Your turn until "Done") */ .c-ok{background:var(--done-s);color:var(--done);margin-left:6px} /* holder thread not mid-turn: keeps one of the agent's places (neutral outline, it is not an action for you) */ .c-place,.c-qpos{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--faint);margin-left:6px;font-weight:500;gap:4px} .state .crumb .chip{margin-top:0;margin-left:0} /* One line in the lists, the full text is in the thread. */ .await-line{font-size:12.5px;color:var(--you);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .await{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 16px 0;padding:10px 14px;border:1.5px solid var(--you);border-radius:10px;background:var(--you-s);font-size:14px} .await .aw-t{overflow-wrap:anywhere}.await b{color:var(--you)} /* Archived: neutral (it is not an expected action), same layout as the waiting banner. */ .queued{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 16px 0;padding:10px 14px;border:1.5px solid var(--wait);border-radius:10px;background:var(--wait-s);font-size:14px} .queued .aw-t{overflow-wrap:anywhere}.queued b{color:var(--wait)}.queued .btn{flex:none}.queued a{color:inherit} /* Agent hand / shared resource: one thin line under the thread header, Release is in the header icons. */ .lockline{margin:6px 16px 0;padding:0 2px 6px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lockline b{color:var(--wait);font-weight:600}.lockline a{color:inherit} .lockline code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--code);border-radius:4px;padding:0 4px} .queued code{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--code);border-radius:4px;padding:1px 4px} .queued .aw-t>div+div{margin-top:4px} .archived{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 16px 0;padding:10px 14px;border:1.5px dashed var(--muted);border-radius:10px;font-size:14px;color:var(--muted)} .archived .aw-t{overflow-wrap:anywhere}.archived b{color:var(--ink)}.archived .btn{flex:none} .c-idea{background:var(--idea-s);color:var(--idea)}.c-done{background:var(--done-s);color:var(--done)} .pulse{flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;animation:p 1.4s infinite} @keyframes p{50%{opacity:.25}} @media (prefers-reduced-motion:reduce){.pulse{animation:none}} .conv{display:flex;flex-direction:column;min-width:0;min-height:0} .state{padding:16px 26px 14px;border-bottom:1px solid var(--line);background:var(--card)} .state .crumb{font-size:12px;color:var(--muted);display:flex;gap:10px;align-items:center} .state .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:3px} .state h1{font-size:22px} .acts{display:flex;align-items:center;gap:6px} .btn{border:1px solid var(--line);background:var(--card);padding:6px 11px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink)} .btn:hover{background:var(--hover)}.btn:disabled{opacity:.5;cursor:default} .btn.pri{background:var(--pri);color:#fff;border-color:var(--pri)}.btn.pri:hover{background:var(--pri-h);border-color:var(--pri-h)} .btn.ghost{border-color:transparent;color:var(--muted);background:transparent} .btn:focus-visible,.thread:focus-visible,.nav:focus-visible{outline:2px solid var(--you);outline-offset:2px} /* Icon buttons (headers, hover menus): label in the tooltip and aria-label. */ .btn.ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-color:transparent;background:transparent;color:var(--muted)} .btn.ic:hover:not(:disabled){background:var(--hover);color:var(--ink)} .btn.ic.emo{font-size:16px;line-height:1} /* Hover menu of a card (pin, archive): top right, like Slack. */ .thread{position:relative} .thread .hov{position:absolute;top:6px;right:8px;display:none;gap:2px;padding:2px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 8px var(--shadow)} .thread:hover .hov,.thread:focus-within .hov{display:flex} .thread .hov .btn.ic{width:26px;height:26px} /* Bar on message hover: quick reactions + full picker. */ .m{position:relative} .m-tools{position:absolute;top:-14px;right:26px;display:none;gap:2px;padding:2px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 8px var(--shadow);z-index:2} .m:hover .m-tools,.m:focus-within .m-tools,.m-tools.open{display:flex} .picker{position:absolute;top:36px;right:0;display:grid;grid-template-columns:repeat(9,32px);gap:2px;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 16px var(--shadow)} .picker.up{top:auto;bottom:36px} .reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;align-items:center} .react{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:12px;border:1px solid var(--line);background:var(--chip);color:var(--ink);font-size:13px} .react b{font-size:12px;font-weight:600;color:var(--muted)} .react:hover{border-color:var(--muted)} .react.mine{border-color:var(--run);background:var(--run-s)}.react.mine b{color:var(--run)} .reacts .react-add{width:24px;height:24px;display:none} .m:hover .reacts .react-add{display:inline-flex} .ask{border:1.5px solid var(--you);border-radius:12px;padding:12px 14px;max-width:620px;background:var(--ask-bg)} .ask.done{border-color:var(--line);background:var(--card)} .ask .q{font-size:14px;font-weight:600;margin-bottom:10px;overflow-wrap:anywhere} /* Code in a question (exec approval command): verbatim, regular weight, scrolls inside a bounded box. */ .ask .q pre{font-weight:400;max-height:260px} .ask .opts{display:flex;gap:8px;flex-wrap:wrap}.ask .ans{font-size:13px;color:var(--muted)} .composer{margin:0 26px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:10px 14px} .composer input{width:100%;border:0;border-bottom:1px solid var(--line);font:inherit;font-size:15px;font-weight:600;padding:2px 0 8px;margin-bottom:8px;outline:none} .composer textarea{width:100%;border:0;resize:none;font:inherit;font-size:14px;outline:none;height:58px;background:transparent} .composer .bar{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);gap:8px} .route{background:var(--chip);border-radius:6px;padding:3px 8px;color:var(--ink)} .blank{flex:1;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:14px} /* Empty conversation (new topic): greeting + composer centred vertically, composer narrower than the full pane. */ .conv.empty{justify-content:center;padding-bottom:8vh} .conv.empty .cup{display:block;margin:0 auto 16px;color:var(--muted);stroke-width:1.1;overflow:visible} .cup .steam{animation:steam 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center} .cup .s2{animation-delay:.6s}.cup .s3{animation-delay:1.2s} @keyframes steam{0%{opacity:0;transform:translateY(1.6px) scaleY(.6)}30%{opacity:1;transform:none}65%{opacity:.85}100%{opacity:0;transform:translateY(-2.4px) scaleY(1.2)}} @media (prefers-reduced-motion: reduce){.cup .steam{animation:none}} .conv.empty .hello{text-align:center;font-size:30px;font-weight:200;letter-spacing:-.01em;color:var(--muted);margin:0 26px 22px} .conv.empty .composer,.conv.empty .err{width:min(720px,calc(100% - 52px));margin-left:auto;margin-right:auto} .err{margin:0 26px 8px;font-size:13px;color:var(--err);background:var(--err-s);border-radius:8px;padding:6px 10px} .m a{color:inherit;text-decoration:underline;text-underline-offset:2px} .m.agent a,.m.human a{color:var(--run)} .composer{position:relative} .suggest{position:absolute;left:10px;bottom:calc(100% + 6px);min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px var(--shadow-l);padding:4px;z-index:5} .suggest[hidden]{display:none} .sug{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:7px;font-size:14px;cursor:pointer} .sug.on,.sug:hover{background:var(--hover)} .sug-role{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* « Name · Function » on hover of an avatar or a name in the conversation: beside it, so it never grows the scroll area */ .tip{position:relative} .tip::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ink);color:var(--card);font-size:12px;font-weight:600;line-height:1.4;padding:3px 8px;border-radius:6px;box-shadow:0 4px 12px var(--shadow-l);pointer-events:none;opacity:0;transition:opacity .12s;z-index:6} .tip:hover::after{opacity:1;transition-delay:.25s} /* Waiting chip (queue place): below it and wrapped, a list card is too narrow for a tooltip beside it */ .tip-below::after{left:0;top:calc(100% + 6px);transform:none;white-space:normal;width:max-content;max-width:260px;font-weight:500} .sk{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:4px;padding:1px 5px;background:var(--run-s);color:var(--run)} .sk.agent{background:var(--idea-s);color:var(--idea)} .summary{margin:8px 16px 0;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:10px;font-size:13.5px} .summary>summary{cursor:pointer;font-weight:600} .summary .sum-at{font-weight:400;color:var(--muted)} .summary p{margin:6px 0} .summary ul{margin:2px 0 6px;padding-left:18px} .summary .sum-wait{color:var(--you);font-weight:600} /* Sub-entries of a space: smaller, attached by a line under the space icon, discreet active state (not the white card of a selected thread) with a marker on the line. */ /* Space row: Settings gear (admin) shown on hover of the row, over the badges (out of the flow: the ~190 px row keeps its width for the name). */ .side .space>.nav{position:relative} .nav .sp-gear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;opacity:0;pointer-events:none;transition:opacity .12s;background:inherit} .nav .sp-gear svg{width:14px;height:14px}.nav .sp-gear.on{color:var(--ink)} .nav:hover .sp-gear,.nav .sp-gear:focus-visible{opacity:1;pointer-events:auto} .nav:hover .sp-gear~b{visibility:hidden} @media (hover:none){.nav .sp-gear{position:static;transform:none;opacity:1;pointer-events:auto;background:none}.nav:hover .sp-gear~b{visibility:visible}} .side .sub{margin:1px 0 8px 18px;padding-left:7px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:1px} .side .sub .nav{position:relative;padding:5px 8px;gap:8px;font-size:13px;color:var(--muted)} .side .sub .nav>svg{width:14px;height:14px} .side .sub .nav:hover{color:var(--ink)} .side .sub .nav.on{background:var(--side-h);box-shadow:none;color:var(--ink);font-weight:600} .side .sub .nav.on::before{content:"";position:absolute;left:-8px;top:5px;bottom:5px;width:2px;border-radius:2px;background:var(--ink)} /* Icon + text (titles, breadcrumb, Lounge) */ .with-ic{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}.with-ic>svg{flex:none} h2>.with-ic{gap:8px} .crumb .from{color:var(--run);font-size:12.5px} /* LLM spend of the thread, right end of the header's top line; detail in the tooltip. */ .crumb .cost{margin-left:auto;font-variant-numeric:tabular-nums;cursor:help;white-space:nowrap} .spawned{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:13px} .spawned a{color:var(--run)} .propose{margin:8px 0;padding:12px 14px;border:1.5px solid var(--you);border-radius:12px;background:var(--you-s);max-width:560px} .propose .pt{font-weight:700;margin-bottom:6px} .propose input{width:100%;box-sizing:border-box;font:inherit;font-weight:600;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--card)} .propose .pw{font-size:13.5px;margin:0 0 8px} .propose .pb{font-size:13.5px;margin:0 0 10px;padding:8px 10px;border-radius:8px;background:var(--card)} .propose .pc{font-size:12.5px;color:var(--muted);margin:6px 0 8px} .propose.off{border:none;background:none;padding:2px 0;color:var(--muted);font-size:13px} .propose.off a{color:var(--run)} .propose .ni-title{display:flex;align-items:flex-start;gap:6px;font-weight:700;margin:0 0 8px} .propose .ni-title svg{flex:none;margin-top:2px;color:var(--muted)} .propose.ni .pb{max-height:320px;overflow:auto} .propose .opts .pc{margin:0;align-self:center} .ni-err{font-size:13px;color:var(--you);margin:6px 0} .ni-done{max-width:560px;margin:0 26px 0 70px} .ni-done .opened{margin-left:0;margin-right:0} .ni-done .ni-err{margin:2px 0 8px 2px} .opened .ni-ref{color:var(--muted);font-weight:600} /* Thread opened from a card: small link card to it, the whole surface is clickable. */ .opened{display:flex;align-items:center;gap:8px;max-width:560px;margin:6px 26px 6px 70px;padding:7px 10px 7px 11px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);text-decoration:none;font-size:13.5px;box-sizing:border-box} .opened:hover{background:var(--hover);border-color:var(--faint)} .opened:focus-visible{outline:2px solid var(--run);outline-offset:1px} .opened>svg{flex:none;color:var(--muted)} .opened .ot{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .opened .chip{margin-top:0;flex:none} .overview{grid-column:2 / 4;display:flex;flex-direction:column;min-height:0;background:var(--panel)} .overview header{padding:18px 22px 10px;border-bottom:1px solid var(--line)} .overview h2{font-size:20px}.overview header p{font-size:13px;color:var(--muted);margin-top:2px} .overview header a,.issue-ok a{color:var(--run)} .overview .scroll{overflow:auto;padding:6px 22px 30px} .ov-block{margin-top:14px} .ov-tag{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .ov-wait{font-size:12px;color:var(--you)} /* Board (read-only): List = one block per status, one line per item, a coloured bar when the thread is not quiet; Columns = one column per status, cards. Label colours come from GitHub through classes in a constructed sheet. */ .overview.board header{display:flex;align-items:flex-end;gap:16px}.overview.board header>div:not(.seg){flex:1;min-width:0} .seg{display:flex;flex:none;background:var(--chip);border-radius:8px;padding:2px} .seg button{display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);font-size:12.5px;padding:5px 10px;border-radius:6px} .seg button:hover{color:var(--ink)}.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px var(--shadow-l)} .board .bg{margin-top:18px} .board .gh-h{display:flex;align-items:center;gap:8px;margin-bottom:8px} .board .gname{font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--text)} .board .gcount{font-size:11.5px;color:var(--muted);background:var(--chip);border-radius:10px;padding:0 7px} .board a{color:inherit;text-decoration:none}.board a:hover{text-decoration:underline} .bref{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .bk{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-right:7px} .lb{font-size:11px;line-height:17px;padding:0 7px;border-radius:9px;white-space:nowrap;background:var(--chip);color:var(--muted)} .stp{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);white-space:nowrap} .stp i{width:7px;height:7px;border-radius:50%;background:var(--faint)} .stp.s-you{color:var(--you)}.stp.s-you i{background:var(--you)}.stp.s-run{color:var(--run)}.stp.s-run i{background:var(--run)} .stp.s-wait{color:var(--wait)}.stp.s-wait i{background:var(--wait)}.stp.s-idea{color:var(--idea)}.stp.s-idea i{background:var(--idea)} .stp.s-done{color:var(--done)}.stp.s-done i{background:var(--done)}.stp.ov-wait{color:var(--you)} .rows{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .br{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 0;border-top:1px solid var(--line);font-size:13.5px} .br:first-child{border-top:0}.br:hover{background:var(--row-h)} .br .bar{width:3px;align-self:stretch;margin:-8px 4px -8px 0;background:transparent;flex:none} .br.s-you .bar{background:var(--you)}.br.s-run .bar{background:var(--run)}.br.s-wait .bar{background:var(--wait)} .br .bref{width:118px;flex:none;overflow:hidden;text-overflow:ellipsis} .br-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:500} .br-l{display:flex;align-items:center;gap:4px;flex:none}.br .stp{min-width:84px;justify-content:flex-end;flex:none} .cols{display:flex;gap:12px;padding-top:16px;align-items:flex-start;width:max-content} .col{flex:0 0 268px;width:268px;background:var(--side);border-radius:12px;padding:10px 8px 8px} .col .gh-h{padding:0 4px}.cl{display:flex;flex-direction:column;gap:7px} .bc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:9px 11px 8px;box-shadow:0 1px 2px var(--shadow);display:flex;flex-direction:column;gap:7px} .bc:hover{border-color:var(--faint)} .bc-t{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .bc-m{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.bc-m .bref{margin-right:3px}.bc-m .sp{flex:1} /* Metrics: cards of figures, then ranked lists with a bar (progress: no inline style under the CSP) */ .metrics .mx-head{display:flex;align-items:flex-start;gap:12px} .metrics .mx-head>div:not(.mx-period){flex:1;min-width:0} .metrics .mx-period{margin-top:4px;flex:none} .mx-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px} .mx-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px} .mx-k{font-size:12px;color:var(--muted)} .mx-v{font-size:26px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px} .mx-s{font-size:12px;color:var(--muted);margin-top:2px} .mx-card[title]:not([title=""]){cursor:help} .mx-note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.45}.mx-note .tip{cursor:help}.mx-note .tip-below::after{max-width:420px} .mx-dash{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;margin-top:10px} .mx-panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0} .mx-pt{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.mx-pt:not(:first-child){margin-top:16px} .mx-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:12px;color:var(--muted)} .mx-key{display:inline-flex;align-items:center;gap:5px}.mx-key i{width:8px;height:8px;border-radius:2px;background:var(--faint)}.mx-key b{color:var(--ink);font-variant-numeric:tabular-nums} .mx-key.mx-h i,.mx-days .mx-h{background:var(--you);fill:var(--you)}.mx-key.mx-a i,.mx-days .mx-a{background:var(--idea);fill:var(--idea)} .mx-days{display:flex;align-items:stretch;justify-content:space-around;gap:6px;height:190px;margin-top:10px}.mx-days.dense{gap:1px} .mx-day{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;max-width:72px} .mx-col{flex:1;min-height:0;border-radius:3px;overflow:hidden;display:flex}.mx-col svg{width:100%;height:100%;display:block} .mx-day:hover .mx-col{background:var(--row-h)} .mx-dl{font-size:11px;color:var(--faint);text-align:center;white-space:nowrap;height:14px;font-variant-numeric:tabular-nums;overflow:visible} .mx-day.tip::after{left:50%;top:auto;bottom:calc(100% - 10px);transform:translateX(-50%)} .mx-stackbox{margin-top:10px;height:12px;border-radius:6px;overflow:hidden;display:flex}.mx-stack{width:100%;height:100%;display:block} .mx-stack rect{fill:var(--faint);stroke:var(--card);stroke-width:2px;vector-effect:non-scaling-stroke} .mx-stack .s-you,.mx-key.s-you i{fill:var(--you);background:var(--you)}.mx-stack .s-run,.mx-key.s-run i{fill:var(--run);background:var(--run)} .mx-stack .s-wait,.mx-key.s-wait i{fill:var(--wait);background:var(--wait)}.mx-stack .s-calm,.mx-key.s-calm i{fill:var(--calm);background:var(--calm)} .mx-stack .s-idea,.mx-key.s-idea i{fill:var(--idea);background:var(--idea)}.mx-stack .s-done,.mx-key.s-done i{fill:var(--done);background:var(--done)} .mx-top{margin-top:4px} .mx-tr{display:flex;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--text);text-decoration:none} .mx-tr:last-child{border-bottom:0}.mx-tr:hover .mx-tt{color:var(--run);text-decoration:underline} .mx-tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px} .mx-block{margin-top:12px;min-width:0} .mx-block .group{padding:8px 0 4px} .mx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,38%) auto;align-items:center;gap:10px;padding:5px 2px;font-size:13.5px;border-bottom:1px solid var(--line)} .mx-row:last-child{border-bottom:0} .mx-row[title]{cursor:help} .mx-row.muted .mx-name{color:var(--muted);font-style:italic} .mx-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)} .mx-tag{font-size:10.5px;color:var(--muted);margin-left:6px;text-transform:uppercase;letter-spacing:.04em} .mx-n{font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;min-width:3ch} .mx-bar{-webkit-appearance:none;appearance:none;width:100%;height:6px;border:0;border-radius:3px;background:var(--line);overflow:hidden} .mx-bar::-webkit-progress-bar{background:var(--line);border-radius:3px} .mx-bar::-webkit-progress-value{background:var(--muted);border-radius:3px} .mx-bar::-moz-progress-bar{background:var(--muted);border-radius:3px} .mx-empty{font-size:13px;color:var(--faint);padding:5px 2px} @media (max-width:900px){.mx-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.mx-dash{grid-template-columns:minmax(0,1fr)}} @media (max-width:700px){.mx-grid{grid-template-columns:minmax(0,1fr)}.metrics .mx-head{flex-wrap:wrap}} .issue-ok{font-size:13px;margin-right:6px} .issue-make{display:inline-flex;gap:4px;align-items:center} .issue-make select{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:6px;background:var(--card)} /* Merge banner (issue in « To merge »): one state per step; --danger is a real red in both themes (--err is too dark on dark). */ .mergebar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 16px 0;padding:10px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:14px} .mergebar .aw-t{overflow-wrap:anywhere;min-width:0}.mergebar .mb-pr{margin-top:3px;font-size:12.5px;color:var(--muted)}.mergebar .mb-pr a{color:var(--run)} .mergebar code{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--code);border-radius:4px;padding:1px 4px} .mergebar .mb-acts{display:flex;gap:6px;flex:none}.mergebar .btn{white-space:nowrap} .mergebar .pulse{display:inline-block;margin-right:7px;vertical-align:middle}.mb-busy .pulse{color:var(--run)} .mb-checking{color:var(--muted);border-style:dashed} .mb-ready,.mb-busy{border-color:var(--run);background:var(--run-s)}.mb-ready b,.mb-busy b{color:var(--run)} .mb-merged{border-color:var(--done);background:var(--done-s)}.mb-merged b{color:var(--done)} .mb-confirm{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--card))}.mb-confirm b{color:var(--danger)} .mb-blocked{border-color:var(--wait);background:var(--wait-s)}.mb-blocked b{color:var(--wait)} .mb-error{border-color:var(--err);background:var(--err-s)} .btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}.btn.danger:hover{filter:brightness(1.08)} :root{--danger:#c0392b} :root[data-theme="dark"]{--danger:#e5534b} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--danger:#e5534b}} .md>*:first-child{margin-top:0}.md>*:last-child{margin-bottom:0} .md p,.md ul,.md ol,.md pre,.md blockquote,.md table{margin:0 0 8px} .md ul,.md ol{padding-left:22px}.md li{margin:2px 0}.md li>p{margin:0} .md h3,.md h4,.md h5,.md h6{font-size:14.5px;margin:10px 0 4px} .md code{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--code);border-radius:4px;padding:1px 4px} .md pre{background:var(--pre);border:1px solid var(--line);border-radius:8px;padding:8px 10px;overflow:auto;white-space:pre} .md pre code{background:none;padding:0} /* Syntax highlighting (client/src/highlight.ts): only fences that declare their language. */ :root{--hl-c:#8a8378;--hl-k:#8e3fa6;--hl-s:#3d7a35;--hl-n:#a8590f;--hl-f:#2a5fa0;--hl-t:#8a6a0c;--hl-p:#1d6c75;--hl-o:#6b655c;--hl-i:#2f7d4f;--hl-d:#b3392c} :root[data-theme="dark"]{--hl-c:#8a867f;--hl-k:#c792ea;--hl-s:#a3d18c;--hl-n:#f0a35e;--hl-f:#82aaff;--hl-t:#e5c07b;--hl-p:#6cc4c9;--hl-o:#a8a49d;--hl-i:#6fcf8f;--hl-d:#f08a7e} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hl-c:#8a867f;--hl-k:#c792ea;--hl-s:#a3d18c;--hl-n:#f0a35e;--hl-f:#82aaff;--hl-t:#e5c07b;--hl-p:#6cc4c9;--hl-o:#a8a49d;--hl-i:#6fcf8f;--hl-d:#f08a7e}} .hl-c{color:var(--hl-c);font-style:italic}.hl-k{color:var(--hl-k)}.hl-s{color:var(--hl-s)}.hl-n{color:var(--hl-n)}.hl-f{color:var(--hl-f)} .hl-t{color:var(--hl-t)}.hl-p{color:var(--hl-p)}.hl-o{color:var(--hl-o)}.hl-i{color:var(--hl-i)}.hl-d{color:var(--hl-d)} .md blockquote{border-left:3px solid var(--line);padding-left:10px;color:var(--muted)} .md table{border-collapse:collapse;font-size:13px}.md th,.md td{border:1px solid var(--line);padding:3px 8px;text-align:left} .md hr{border:0;border-top:1px solid var(--line);margin:10px 0} /* Slack-style messages: list, avatar, name, time; no bubbles */ .msgs{flex:1;overflow:auto;padding:14px 0 18px;display:flex;flex-direction:column} .m{display:flex;gap:10px;padding:6px 26px 2px;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere} .m:hover{background:var(--row-h)} .m.cont{padding-top:0} .avatar{flex:none;width:34px;height:34px;border-radius:8px;color:#fff;background:#9a948a;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;margin-top:2px} .m-gut{flex:none;width:34px;font-size:10.5px;color:transparent;text-align:right;padding-top:3px;font-variant-numeric:tabular-nums} .m.cont:hover .m-gut{color:var(--faint)} .m-body{min-width:0;flex:1} .m-head{display:flex;align-items:baseline;gap:7px;margin-bottom:1px} .m-name{font-weight:700;font-size:14.5px} .m-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--idea-s);color:var(--idea);border-radius:4px;padding:0 5px} .m-time{font-size:12px;color:var(--faint)} .m .md{max-width:760px;color:var(--text)} .m.system .md{color:var(--muted);font-size:13.5px} .ask,.propose{margin-left:70px;margin-right:26px} .ask+.ask{margin-top:8px} /* GitHub cards (board-driven space): read-only copy of the issue, its comments and linked PRs */ .m.github .avatar{background:var(--calm-s);color:var(--calm)} .m-badge.gh{background:var(--calm-s);color:var(--calm)} .ghc{max-width:760px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:6px 12px;margin-top:3px} .ghc .md{font-size:14px} .ghc-what{font-size:12.5px;color:var(--muted)} .ghc-link{font-size:12px;color:var(--run);margin-left:auto} .ghc-held summary{cursor:pointer;color:var(--wait);font-size:13px;list-style-position:inside} .ghc-held[open] summary{margin-bottom:6px} .ghc-cut{font-size:12px;color:var(--muted);margin-top:4px;font-style:italic} .ghc-pr{font-size:14px}.ghc-pr a{color:var(--run)} .pr-merged{color:var(--idea)}.pr-open{color:var(--done)} .c-col{background:var(--calm-s);color:var(--ink);margin-left:6px;font-weight:500} .state .crumb .c-col{margin-left:0} .gh-labels{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px} /* Header chips = the Board's filled .lb pills (colour class from labelClass), a size up; no colour known = neutral pill. */ .lb.gh-label{font-size:12px;line-height:20px;padding:0 9px;border-radius:11px;font-weight:500;display:inline-flex;align-items:center;gap:4px} .lb.gh-label.busy{opacity:.5} .gh-x{border:0;background:transparent;color:inherit;opacity:.65;font-size:14px;line-height:1;padding:0 0 0 1px;cursor:pointer} .gh-x:hover{opacity:1}.gh-x:disabled{cursor:default;opacity:.4} .gh-add-wrap{position:relative;display:inline-flex} .gh-add{font-size:12px;line-height:18px;padding:0 9px;border-radius:11px;border:1px dashed var(--muted);background:transparent;color:var(--ink);cursor:pointer} .gh-add:hover,.gh-add[aria-expanded=true]{border-style:solid;background:var(--chip)} .gh-pick{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;max-width:360px;max-height:300px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px var(--shadow-l);padding:4px;z-index:5} .gh-pick-row{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);padding:6px 9px;border-radius:7px;cursor:pointer} .gh-pick-row:hover,.gh-pick-row:focus-visible{background:var(--hover)} .gh-pick-name{font-size:12.5px;font-weight:600}.gh-pick-desc{font-size:11.5px;color:var(--muted)} .gh-pick-note{font-size:12px;color:var(--muted);padding:6px 9px}.gh-pick-note.err{color:var(--err)} .m-head a.ghc-link{color:var(--muted);text-decoration:none}.m-head a.ghc-link:hover{color:var(--run);text-decoration:underline} /* "Michel is working…" under the last message (aligned with the message text) */ .working{display:flex;align-items:center;gap:7px;margin:8px 26px 0 70px;font-size:13px;color:var(--run);min-width:0} .working .w-who{font-weight:600;flex:none} .working .w-what{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .working .w-stop{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;color:var(--muted)} .working .w-stop:hover{color:var(--ink)} .working .w-stopping{flex:none;color:var(--muted);font-style:italic} /* Message the hub could not hand to the agent (no connection): under that message, aligned like .working. */ .undelivered{display:flex;align-items:center;gap:7px;margin:6px 26px 0 70px;font-size:13px;color:var(--err)} .undelivered svg{flex:none} .av-0{background:#c0663a}.av-1{background:#3a7bc0}.av-2{background:#3a9c6d}.av-3{background:#b0861f}.av-4{background:#8a5bb5}.av-5{background:#c04a6e}.av-6{background:#4a8f9c}.av-agent{background:#6b4fa3}.av-system{background:#9a948a} /* Dark theme: automatic (system setting) or forced by the switch (data-theme on ). */ :root[data-theme="dark"]{--bg:#17181a;--panel:#1c1d20;--card:#232427;--ink:#e8e6e3;--text:#cfccc7;--muted:#a19d96;--faint:#6f6b65;--line:#2f3034; --you:#ef7a4a;--you-s:#3a2419;--run:#6aa8e6;--run-s:#1a2a3a;--wait:#d6b04f;--wait-s:#33290f; --calm:#a19d96;--calm-s:#2a2a2d;--idea:#b39ae0;--idea-s:#2c2540;--done:#5fbf86;--done-s:#18301f; --side:#121315;--side-h:#202125;--hover:#26272b;--row-h:rgba(255,255,255,.035);--chip:#2a2b2f;--code:rgba(255,255,255,.09);--pre:#141517; --ask-bg:#24201d;--err:#f2a097;--err-s:#3a1d1a;--shadow:rgba(0,0,0,.3);--shadow-l:rgba(0,0,0,.5);--pri:#d2592a;--pri-h:#e06a3a; --unread:#4c9bf0; color-scheme:dark;} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#17181a;--panel:#1c1d20;--card:#232427;--ink:#e8e6e3;--text:#cfccc7;--muted:#a19d96;--faint:#6f6b65;--line:#2f3034; --you:#ef7a4a;--you-s:#3a2419;--run:#6aa8e6;--run-s:#1a2a3a;--wait:#d6b04f;--wait-s:#33290f; --calm:#a19d96;--calm-s:#2a2a2d;--idea:#b39ae0;--idea-s:#2c2540;--done:#5fbf86;--done-s:#18301f; --side:#121315;--side-h:#202125;--hover:#26272b;--row-h:rgba(255,255,255,.035);--chip:#2a2b2f;--code:rgba(255,255,255,.09);--pre:#141517; --ask-bg:#24201d;--err:#f2a097;--err-s:#3a1d1a;--shadow:rgba(0,0,0,.3);--shadow-l:rgba(0,0,0,.5);--pri:#d2592a;--pri-h:#e06a3a; --unread:#4c9bf0; color-scheme:dark;}} .btn.pri.big{padding:8px 14px;font-size:13.5px;white-space:nowrap} .side .space>.nav{font-weight:700} .thread .t{font-weight:400} .thread.unread .t{font-weight:700} .thread.unread .when{color:var(--you);font-weight:600} .theme{display:flex;gap:2px;background:var(--side-h);border-radius:7px;padding:2px;width:max-content} .theme button{border:0;background:none;color:var(--muted);font-size:11.5px;padding:2px 8px;border-radius:5px} .theme button.on{background:var(--card);color:var(--ink)} .foot-row{display:flex;align-items:center;justify-content:space-between;gap:6px} .foot-row .btn.ic{width:24px;height:24px} /* Footer buttons on the "Hub connected" row: bell (alerts) and EN/FR language toggle, same icon-button style. */ .foot-btns{display:flex;align-items:center;gap:2px} .btn.ic.lang{font-size:10.5px;font-weight:700;letter-spacing:.04em} .btn.ic.lang[aria-pressed="true"]{color:var(--ink)} .bell{color:var(--muted)} .bell.on{color:var(--ink)} /* Mentions: colour of the person's avatar (coloured text + tinted background); a mention of oneself stands out more. */ .mention{font-weight:600;border-radius:4px;padding:0 3px;color:var(--mc,var(--idea));background:color-mix(in srgb,var(--mc,var(--idea)) 16%,transparent)} .mention.mine{background:color-mix(in srgb,var(--mc) 32%,transparent);box-shadow:inset 0 -2px 0 var(--mc)} .mention.av-0{--mc:#c0663a}.mention.av-1{--mc:#3a7bc0}.mention.av-2{--mc:#3a9c6d}.mention.av-3{--mc:#b0861f}.mention.av-4{--mc:#8a5bb5}.mention.av-5{--mc:#c04a6e}.mention.av-6{--mc:#4a8f9c}.mention.av-agent{--mc:#7a5cc0} :root[data-theme="dark"] .mention{color:color-mix(in srgb,var(--mc,var(--idea)) 70%,white)} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mention{color:color-mix(in srgb,var(--mc,var(--idea)) 70%,white)}} .list header{gap:10px}.list header>.btn{flex:none} .thread .t .mention{padding:0 2px} /* Lounge: conversation-style card (20 px avatar, small name and time, whole message on 6 lines at most). */ .thread.topic .who{display:flex;align-items:center;gap:7px;margin-bottom:4px;min-width:0} .avatar.sm{width:20px;height:20px;border-radius:5px;font-size:11px;margin-top:0} .thread.topic .by{font-size:12.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .thread.unread.topic .by{color:var(--ink);font-weight:700} /* Unread Lounge topic: a dot left of the avatar, in the card's padding (no layout shift, the list order stays). The time stays grey: orange is Your turn, the Lounge is neutral. */ .thread.topic{padding-left:17px} /* room for the dot (every topic card, so reading one doesn't shift it) */ .thread.topic.unread::before{content:'';position:absolute;left:3px;top:18px;width:7px;height:7px;border-radius:50%;background:var(--unread)} .thread.topic.unread .when{color:var(--faint);font-weight:400} .thread.topic .body{font-size:14px;color:var(--text);line-height:1.4;white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden} .thread.topic .body .mention{padding:0 2px} .thread.topic .where{margin-top:4px} .mention.gone{text-decoration:line-through;opacity:.6;background:transparent} /* Attachments */ .composer.dropping{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 20%,transparent)} .composer .bar .grow{flex:1} .att-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px} .att{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:3px 4px 3px 3px;max-width:260px;background:var(--panel);font-size:12.5px} .att img{width:34px;height:34px;object-fit:cover;border-radius:5px} .att.up{opacity:.65}.att.err{border-color:var(--err);color:var(--err)} .att-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;flex:none;color:var(--muted)} .att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px} .att-meta{color:var(--muted);font-size:11.5px;white-space:nowrap} .att.err .att-meta{color:var(--err)} .att-x{border:0;background:none;color:var(--muted);font-size:15px;padding:0 4px} .files{display:flex;flex-direction:column;gap:6px;margin-top:4px} .imgs{display:flex;flex-wrap:wrap;gap:6px} .imgs img{max-height:220px;max-width:360px;border-radius:8px;border:1px solid var(--line);display:block} .media{position:relative;align-self:flex-start;max-width:100%} .media.vid video{max-height:320px;max-width:480px;border-radius:8px;border:1px solid var(--line);display:block;background:#000} .m-dl{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;opacity:0;transition:opacity .15s} .media:hover .m-dl,.media:focus-within .m-dl{opacity:.85}.m-dl:hover{opacity:1;background:rgba(0,0,0,.75)} @media (hover: none){.m-dl{opacity:.7}} .img-ph{width:160px;height:110px;border-radius:8px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:12px;padding:6px;text-align:center} .doc{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;width:max-content;max-width:100%;color:var(--ink);text-decoration:none;background:var(--card)} .doc:hover{border-color:var(--faint)} /* Audio: player in a message (one shared