/* * THE SHELL — see AppShell.tsx. Plain CSS on purpose: this chrome sits above * Bootstrap pages and Tailwind pages alike and belongs to neither. * * Widths: 14rem open, 3.5rem collapsed (jBKB: w-56 / w-14). Selection is the * console's near-black (#1c2530), the same the queue rail uses, so "where am * I" reads the same in the menu and in the queue. */ .shell { display: flex; height: 100dvh; overflow: hidden; background: #f4f6f8; color: #1e293b; } .shell-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; } /* ⚠ THE PAGE AREA. Scrolls for pages that scroll; pages that own scrolling are flex children and take its height (`.queue-shell`, the report pages). */ .shell-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; background: #fff; } .shell-page > .ws-pane { flex: 1 1 auto; min-height: 0; } /* Sidebar */ .shell-side { flex: 0 0 14rem; width: 14rem; display: flex; flex-direction: column; min-height: 0; background: #e9edf1; border-right: 1px solid #d5dbe2; transition: width .15s ease, flex-basis .15s ease; } .shell-side.is-collapsed { flex-basis: 3.5rem; width: 3.5rem; } .shell-side.is-drawer { position: fixed; inset: 0 auto 0 0; z-index: 60; width: 16rem; flex-basis: 16rem; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.25); } .shell-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(28,37,48,.45); } /* Light, like jBKB's: the one dark surface of the frame is the page-tab strip (Johan, 2026-09-15, screenshot of jBKB). */ .shell-brand { display: flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 .55rem 0 .7rem; border-bottom: 1px solid #d5dbe2; background: #e9edf1; color: #1e293b; } .shell-brandname { font-weight: 700; letter-spacing: .04em; font-size: .9rem; flex: 1 1 auto; } /* jBKB's mark: a small dark rounded square with jB in it (Johan, 2026-09-15: the image looked strange when narrow). */ .shell-mark { text-decoration: none; transition: opacity .12s; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: .4rem; background: #1c2530; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: -.01em; } a.shell-mark:hover { opacity: .8; color: #fff; } .shell-side.is-collapsed .shell-brand { padding: 0; justify-content: center; flex-direction: column; height: auto; gap: .2rem; padding: .4rem 0; } .shell-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: none; border-radius: .35rem; background: transparent; color: inherit; cursor: pointer; opacity: .8; } .shell-iconbtn:hover { opacity: 1; background: rgba(28,37,48,.08); } .shell-top .shell-iconbtn:hover { background: rgba(28,37,48,.08); } .shell-iconbtn svg { width: 1.05rem; height: 1.05rem; } .shell-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .5rem .45rem; display: flex; flex-direction: column; gap: .7rem; } .shell-sectionlabel { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: #7b8794; padding: 0 .45rem .25rem; } .shell-sectionrule { height: 1px; background: #d5dbe2; margin: .1rem .3rem .35rem; } .shell-link { display: flex; align-items: center; gap: .55rem; padding: .38rem .5rem; border-radius: .35rem; color: #1e293b; text-decoration: none; font-size: .84rem; line-height: 1.2; position: relative; } .shell-link:hover { background: #dde3e9; color: #1e293b; text-decoration: none; } .shell-link.is-active { background: #1c2530; color: #fff; font-weight: 600; } .shell-link.is-loading { opacity: .75; } .shell-linkicon { width: 1rem; height: 1rem; flex: 0 0 auto; opacity: .85; } .shell-linklabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-side.is-collapsed .shell-link { justify-content: center; padding: .45rem 0; } .shell-spin { width: .7rem; height: .7rem; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; animation: shell-spin .7s linear infinite; flex: 0 0 auto; } .shell-side.is-collapsed .shell-spin { position: absolute; right: .2rem; top: .2rem; width: .5rem; height: .5rem; } @keyframes shell-spin { to { transform: rotate(360deg); } } .shell-sidefoot { padding: .4rem .5rem; border-top: 1px solid #d5dbe2; font-size: .72rem; min-height: 1.6rem; } .shell-side.is-collapsed .shell-sidefoot { display: none; } /* Top bar */ .shell-top { display: flex; align-items: center; gap: .6rem; height: 2.75rem; flex: 0 0 auto; padding: 0 .8rem; background: #fff; border-bottom: 1px solid #d5dbe2; } .shell-topspacer { flex: 1 1 auto; } /* Notices, about a centimetre right of the solution — Johan, 2026-09-15. The board anchors here. */ .shell-notices { position: relative; margin-left: 1cm; display: flex; align-items: center; } /* The board was an in-flow block on the queue page; under the bar it is a dropdown. */ .shell-notices .noticeboard { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 70; width: min(36rem, calc(100vw - 2rem)); margin: 0; max-height: 75vh; overflow-y: auto; } .shell-solsel { max-width: 16rem; padding: .2rem 1.6rem .2rem .5rem; font-size: .82rem; border-radius: .3rem; border: 1px solid #c8d0d8; background: #fff; color: #1e293b; } .shell-solname { font-size: .84rem; font-weight: 600; color: #1e293b; } .shell-user { position: relative; } .shell-userbtn { display: inline-flex; align-items: center; gap: .45rem; border: none; background: transparent; cursor: pointer; padding: .15rem .3rem; border-radius: .35rem; color: #1e293b; } .shell-userbtn:hover { background: #eef1f4; } .shell-userbtn svg { width: 1.1rem; height: 1.1rem; opacity: .8; } .shell-username { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; } .shell-useremail { font-size: .78rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-userrole { font-size: .64rem; color: #7b8794; } .shell-usermenu { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 50; min-width: 11rem; background: #fff; border: 1px solid #d5dbe2; border-radius: .4rem; box-shadow: 0 8px 24px rgba(28,37,48,.14); padding: .25rem; display: flex; flex-direction: column; } .shell-usermenu button { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: none; background: transparent; padding: .4rem .55rem; border-radius: .3rem; font-size: .82rem; cursor: pointer; color: #1e293b; } .shell-usermenu button:hover { background: #eef1f4; } .shell-usermenu svg { width: .95rem; height: .95rem; opacity: .75; } @media (max-width: 860px) { .shell-top { padding: 0 .5rem; } .shell-useremail { max-width: 9rem; } .shell-solsel { max-width: 10rem; font-size: .76rem; } } @media (prefers-reduced-motion: reduce) { .shell-side { transition: none; } .shell-spin { animation: none; } } /* Workspace tabs — between the bar and the page. The home tab is the queue. ⛔ THE SAME PALETTE AS jBKB'S STRIP, TO THE HEX — Johan, 2026-09-15: "make sure AIM and jBKB look exactly the same". Tailwind slate: strip 800 (#1e293b, edge 900 #0f172a); an unselected tab 500 (#64748b) with 100 text (#f1f5f9) and a 400 edge (#94a3b8), 400 on hover; the open page white with the indigo-500 underline (#6366f1). Text .75rem, padding .5rem .75rem, at least 7.5rem wide - jBKB's text-xs px-3 py-2 min-w-[120px]. Change one, change the other (frontend/src/components/ui/draggable-tab-bar.tsx). */ .ws-tabs { display: flex; align-items: flex-end; gap: .25rem; padding: .25rem .375rem 0; background: #1e293b; border-bottom: 1px solid #0f172a; overflow-x: auto; flex: 0 0 auto; scrollbar-width: thin; } .ws-tab { display: inline-flex; align-items: center; gap: .375rem; min-width: 7.5rem; max-width: 13.75rem; padding: .5rem .75rem; border: 1px solid #94a3b8; border-bottom: none; border-radius: .375rem .375rem 0 0; background: #64748b; color: #f1f5f9; font-size: .75rem; font-weight: 500; line-height: 1rem; cursor: pointer; user-select: none; white-space: nowrap; position: relative; flex: 0 1 auto; overflow: hidden; } .ws-tab:hover { background: #94a3b8; color: #fff; } .ws-tab.is-active { background: #fff; color: #0f172a; border-color: #fff; } .ws-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #6366f1; } /* The queue is the home tab: when it is not the open page it still reads apart from the others — indigo-tinted, its accent bar. */ .ws-tab.is-home { padding-left: .7rem; background: #4f46e5; border-color: #818cf8; color: #eef2ff; font-weight: 600; } .ws-tab.is-home:hover { background: #6366f1; } .ws-tab.is-home::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #c7d2fe; border-radius: .375rem 0 0 0; } .ws-tab.is-home.is-active { background: #fff; color: #0f172a; border-color: #fff; } .ws-tab.is-home.is-active::before { background: #4f46e5; } .ws-tab.is-over { outline: 2px dashed #a5b4fc; outline-offset: -2px; } .ws-tabicon { width: .9rem; height: .9rem; opacity: .85; flex: 0 0 auto; } .ws-tabbadge { flex: 0 0 auto; } /* ⛔ The LABEL gives way, never the X — Johan, 2026-09-16: "make sure that the X is always inside the tab". */ .ws-tablabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ws-tabsuffix { font-weight: 400; opacity: .7; } .ws-tabbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; } .ws-tabclose { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border: none; border-radius: .25rem; background: transparent; color: inherit; opacity: .55; cursor: pointer; padding: 0; margin-right: -.2rem; flex: 0 0 auto; } .ws-tabclose:hover { opacity: 1; background: rgba(0,0,0,.12); } .ws-tab.is-active .ws-tabclose:hover { background: rgba(28,37,48,.1); } .ws-tabclose svg { width: .8rem; height: .8rem; } .ws-tab:focus-visible { outline: 2px solid #9aa5f0; outline-offset: -2px; } /* Close-all, at the strip's right end and vertically centred on the tabs. */ .ws-closeall-wrap { margin-left: auto; align-self: center; display: flex; flex: 0 0 auto; padding-bottom: .25rem; } .ws-closeall { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: none; border-radius: .3rem; background: transparent; color: #94a3b8; cursor: pointer; padding: 0; } .ws-closeall:hover { color: #fff; background: rgba(255,255,255,.12); } .ws-closeall svg { width: 1rem; height: 1rem; } .ws-closeall:focus-visible { outline: 2px solid #9aa5f0; outline-offset: -2px; } .ws-pane { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .ws-pane > * { flex: 1 0 auto; } .ws-pane > .queue-shell, .ws-pane > .tw-root { flex: 1 1 auto; min-height: 0; } /* The menu's hover tips: a fixed width that wraps, on the menu's own grey — easier to read over the page than a white strip (Johan, 2026-09-15). Unlayered, so it wins over the tip's utility classes. */ .shell-tip { width: 15rem; max-width: 15rem; white-space: normal; background: #e9edf1; color: #1e293b; border-color: #c8d0d8; box-shadow: 0 6px 18px rgba(28,37,48,.16); font-size: .74rem; line-height: 1.35; padding: .45rem .6rem; } .shell-tip::first-line { font-weight: 600; } .control-slider { margin: 0; background-color: #e0e0e0; border-width: 0.125em; border-style: solid; border-color: #d0d0d0; border-radius: 0.5em; color: #303030; } .control-slider__wrap {} .control-slider--horizontal__wrap { padding: 2em 1.375em; } .control-slider--vertical__wrap { padding: 1.375em 2em; height: 100%; } .control-slider__track { position: relative; z-index: 1; /* // border: '1px solid black', */ border-width: 0.0625em; border-style: solid; border-color: #a0a0a0; border-radius: 1px; } .control-slider__track-actual { position: relative; width: 100%; } .control-slider__bt { position: absolute; } .control-slider--horizontal__wrap .control-slider__bt { top: 0; } .control-slider--vertical__wrap .control-slider__bt { left: 0; } .control-slider__bt-single {} .control-slider__bt-min {} .control-slider__bt-max {} .control-slider__bt-handle { position: absolute; top: 0; width: 2.25em; height: 2.25em; font-size: 0.625em; line-height: 1.875em; text-align: center; color: #f0f0f0; background: #2080f0; border-width: 0.1875em; border-style: solid; border-color: #2080f0; /* // border: '2px solid red', */ border-radius: 100%; transform: translateY(-50%); cursor: pointer; } .control-slider--horizontal__wrap .control-slider__bt-single .control-slider__bt-handle { left: 0; transform: translate(-50%, -50%); } .control-slider--horizontal__wrap .control-slider__bt-min .control-slider__bt-handle { right: 0; } .control-slider--horizontal__wrap .control-slider__bt-max .control-slider__bt-handle { left: 0; } .control-slider--vertical__wrap .control-slider__bt-single .control-slider__bt-handle { left: 0; top: 0; transform: translate(-50%, -50%); } .control-slider--vertical__wrap .control-slider__bt-min .control-slider__bt-handle { right: auto; top: auto; bottom: 0; } .control-slider--vertical__wrap .control-slider__bt-max .control-slider__bt-handle { left: 0; top: 0; } .control-slider__range { position: absolute; background: #2080f0; } .control-slider--horizontal__wrap .control-slider__range { top: -0.25em; height: 0.5em; } .control-slider--vertical__wrap .control-slider__range { left: -0.25em; width: 0.5em; } .control-slider__ticks { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; } .control-slider--horizontal__ticks { width: 100%; height: 0; flex-direction: row; } .control-slider--vertical__ticks { width: 0; height: 100%; flex-direction: column; } .control-slider__ticks--start {} .control-slider__ticks--end {} .control-slider__ticks-item--big2 {} .control-slider__ticks-item--big1 {} .control-slider__ticks-item { position: relative; } .control-slider--horizontal__ticks > .control-slider__ticks-item { width: 0; } .control-slider--horizontal__ticks.control-slider__ticks--start > .control-slider__ticks-item { bottom: 0.75em; } .control-slider--horizontal__ticks.control-slider__ticks--end > .control-slider__ticks-item { top: 0.75em; } .control-slider__ticks-item__mark { position: absolute; background-color: black; } .control-slider--horizontal__ticks.control-slider__ticks--start > .control-slider__ticks-item > .control-slider__ticks-item__mark { bottom: 0; } .control-slider--horizontal__ticks.control-slider__ticks--end > .control-slider__ticks-item > .control-slider__ticks-item__mark { top: 0; } .control-slider--horizontal__ticks > .control-slider__ticks-item > .control-slider__ticks-item__mark { width: 1px; height: 0.3em; } .control-slider--horizontal__ticks > .control-slider__ticks-item--big1 > .control-slider__ticks-item__mark { width: 1px; height: 0.55em; } .control-slider--horizontal__ticks > .control-slider__ticks-item--big2 > .control-slider__ticks-item__mark { width: 1px; height: 0.8em; } .text-transparent { color: transparent; } .text-primary-0 { color: #020033; } .text-primary-10 { color: #030066; } .text-primary-20 { color: #050099; } .text-primary-30 { color: #0700CC; } .text-primary-40 { color: #3A33FF; } .text-primary-50 { color: #5F59FF; } .text-primary-60 { color: #6B66FF; } .text-primary-70 { color: #9C99FF; } .text-primary-80 { color: #CECCFF; } .text-primary-90 { color: #E6E5FF; } .text-primary-100 { color: #F2F1FF; } .text-error-0 { color: #410E0B; } .text-error-10 { color: #601410; } .text-error-20 { color: #8C1D18; } .text-error-30 { color: #B3261E; } .text-error-40 { color: #DC362E; } .text-error-50 { color: #E46962; } .text-error-60 { color: #EC928E; } .text-error-70 { color: #F2B8B5; } .text-error-80 { color: #F9DEDC; } .text-error-90 { color: #FCEEEE; } .text-alert-0 { color: #5C5300; } .text-alert-10 { color: #857700; } .text-alert-20 { color: #AD9C00; } .text-alert-30 { color: #D6C100; } .text-alert-40 { color: #FFE500; } .text-alert-50 { color: #FFEA2E; } .text-alert-60 { color: #FFEE5C; } .text-alert-70 { color: #FFF38A; } .text-alert-80 { color: #FFF8B7; } .text-alert-90 { color: #FFFCE5; } .text-success-0 { color: #11592C; } .text-success-10 { color: #1F7B42; } .text-success-20 { color: #339D5B; } .text-success-30 { color: #4ABF77; } .text-success-40 { color: #67E195; } .text-success-50 { color: #85FFB4; } .text-success-60 { color: #A0FFC4; } .text-success-70 { color: #BCFFD5; } .text-success-80 { color: #D7FFE6; } .text-success-90 { color: #F3FFF7; } .text-neutral-0 { color: #000000; } .text-neutral-10 { color: #1D1B20; } .text-neutral-20 { color: #3D3D3D; } .text-neutral-30 { color: #666666; } .text-neutral-40 { color: #808080; } .text-neutral-50 { color: #969696; } .text-neutral-60 { color: #B4B4B4; } .text-neutral-70 { color: #CCCCCC; } .text-neutral-80 { color: #E9E9E9; } .text-neutral-90 { color: #F4F4F4; } .text-neutral-100 { color: #FFFFFF; } .bg-transparent { background-color: transparent; } .bg-primary-0 { background-color: #020033; } .bg-primary-10 { background-color: #030066; } .bg-primary-20 { background-color: #050099; } .bg-primary-30 { background-color: #0700CC; } .bg-primary-40 { background-color: #3A33FF; } .bg-primary-50 { background-color: #5F59FF; } .bg-primary-60 { background-color: #6B66FF; } .bg-primary-70 { background-color: #9C99FF; } .bg-primary-80 { background-color: #CECCFF; } .bg-primary-90 { background-color: #E6E5FF; } .bg-primary-100 { background-color: #F2F1FF; } .bg-error-0 { background-color: #410E0B; } .bg-error-10 { background-color: #601410; } .bg-error-20 { background-color: #8C1D18; } .bg-error-30 { background-color: #B3261E; } .bg-error-40 { background-color: #DC362E; } .bg-error-50 { background-color: #E46962; } .bg-error-60 { background-color: #EC928E; } .bg-error-70 { background-color: #F2B8B5; } .bg-error-80 { background-color: #F9DEDC; } .bg-error-90 { background-color: #FCEEEE; } .bg-alert-0 { background-color: #5C5300; } .bg-alert-10 { background-color: #857700; } .bg-alert-20 { background-color: #AD9C00; } .bg-alert-30 { background-color: #D6C100; } .bg-alert-40 { background-color: #FFE500; } .bg-alert-50 { background-color: #FFEA2E; } .bg-alert-60 { background-color: #FFEE5C; } .bg-alert-70 { background-color: #FFF38A; } .bg-alert-80 { background-color: #FFF8B7; } .bg-alert-90 { background-color: #FFFCE5; } .bg-success-0 { background-color: #11592C; } .bg-success-10 { background-color: #1F7B42; } .bg-success-20 { background-color: #339D5B; } .bg-success-30 { background-color: #4ABF77; } .bg-success-40 { background-color: #67E195; } .bg-success-50 { background-color: #85FFB4; } .bg-success-60 { background-color: #A0FFC4; } .bg-success-70 { background-color: #BCFFD5; } .bg-success-80 { background-color: #D7FFE6; } .bg-success-90 { background-color: #F3FFF7; } .bg-neutral-0 { background-color: #000000; } .bg-neutral-10 { background-color: #1D1B20; } .bg-neutral-20 { background-color: #3D3D3D; } .bg-neutral-30 { background-color: #666666; } .bg-neutral-40 { background-color: #808080; } .bg-neutral-50 { background-color: #969696; } .bg-neutral-60 { background-color: #B4B4B4; } .bg-neutral-70 { background-color: #CCCCCC; } .bg-neutral-80 { background-color: #E9E9E9; } .bg-neutral-90 { background-color: #F4F4F4; } .bg-neutral-100 { background-color: #FFFFFF; } .border-transparent { border-color: transparent; } .border-primary-0 { border-color: #020033; } .border-primary-10 { border-color: #030066; } .border-primary-20 { border-color: #050099; } .border-primary-30 { border-color: #0700CC; } .border-primary-40 { border-color: #3A33FF; } .border-primary-50 { border-color: #5F59FF; } .border-primary-60 { border-color: #6B66FF; } .border-primary-70 { border-color: #9C99FF; } .border-primary-80 { border-color: #CECCFF; } .border-primary-90 { border-color: #E6E5FF; } .border-primary-100 { border-color: #F2F1FF; } .border-error-0 { border-color: #410E0B; } .border-error-10 { border-color: #601410; } .border-error-20 { border-color: #8C1D18; } .border-error-30 { border-color: #B3261E; } .border-error-40 { border-color: #DC362E; } .border-error-50 { border-color: #E46962; } .border-error-60 { border-color: #EC928E; } .border-error-70 { border-color: #F2B8B5; } .border-error-80 { border-color: #F9DEDC; } .border-error-90 { border-color: #FCEEEE; } .border-alert-0 { border-color: #5C5300; } .border-alert-10 { border-color: #857700; } .border-alert-20 { border-color: #AD9C00; } .border-alert-30 { border-color: #D6C100; } .border-alert-40 { border-color: #FFE500; } .border-alert-50 { border-color: #FFEA2E; } .border-alert-60 { border-color: #FFEE5C; } .border-alert-70 { border-color: #FFF38A; } .border-alert-80 { border-color: #FFF8B7; } .border-alert-90 { border-color: #FFFCE5; } .border-success-0 { border-color: #11592C; } .border-success-10 { border-color: #1F7B42; } .border-success-20 { border-color: #339D5B; } .border-success-30 { border-color: #4ABF77; } .border-success-40 { border-color: #67E195; } .border-success-50 { border-color: #85FFB4; } .border-success-60 { border-color: #A0FFC4; } .border-success-70 { border-color: #BCFFD5; } .border-success-80 { border-color: #D7FFE6; } .border-success-90 { border-color: #F3FFF7; } .border-neutral-0 { border-color: #000000; } .border-neutral-10 { border-color: #1D1B20; } .border-neutral-20 { border-color: #3D3D3D; } .border-neutral-30 { border-color: #666666; } .border-neutral-40 { border-color: #808080; } .border-neutral-50 { border-color: #969696; } .border-neutral-60 { border-color: #B4B4B4; } .border-neutral-70 { border-color: #CCCCCC; } .border-neutral-80 { border-color: #E9E9E9; } .border-neutral-90 { border-color: #F4F4F4; } .border-neutral-100 { border-color: #FFFFFF; } /** Tabler css fix */ .btn { --tblr-btn-hover-color: var(--tblr-body-color); } /** End Tables css fix */ body { background: linear-gradient(180deg, #0042, #0042), linear-gradient(0deg, var(--bs-body-bg, var(--tblr-body-bg)), var(--bs-body-bg, var(--tblr-body-bg))); } .page-width { margin: 0 auto; width: 90em; max-width: calc(100vw - 4em); } .border-dotted { border-style: dotted; } .border-dashed { border-style: dashed; } .border-dashed.border-dark { border-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='24' stroke-dasharray='24%2c 62' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e") 12 / 3px / 0px repeat; } .border-dashed.border-success { border-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%230a0' stroke-width='24' stroke-dasharray='24%2c 62' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e") 12 / 3px / 0px repeat; } .border-dashed.border-danger { border-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23c11' stroke-width='24' stroke-dasharray='24%2c 62' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e") 12 / 3px / 0px repeat; } .cursor-pointer { cursor: pointer; } .pointer-events-all { pointer-events: all !important; } .overflow-visible { overflow: visible !important; } .w-e1 { width: 1em; } .w-e1-5 { width: 1.5em; } .w-e8 { width: 8em; } .w-e12 { width: 12em; } .w-e16 { width: 16em; } .w-15div100 { width: calc(15% - 1em); } .h-e1 { height: 1em; } .h-e1-5 { height: 1.5em; } .w-maxc { width: max-content; } .w-fitc { width: fit-content; } .max-w-e12 { max-width: 12em; } .max-w-e16 { max-width: 16em; } .max-w-e18 { max-width: 18em; } .max-w-full { max-width: 100%; } .left-0 { left: 0 !important; } .right-0 { right: 0 !important; } .left-1s2 { left: 50%; } .pl-1o2 { padding-left: 0.125em; } .pr-1o2 { padding-right: 0.125em; } .flex-grow-4 { flex-grow: 4 !important; } .flex-grow-50 { flex-grow: 50 !important; } .flex-shrink-4 { flex-shrink: 4 !important; } .flex-shrink-8 { flex-shrink: 8 !important; } .flex-shrink-16 { flex-shrink: 16 !important; } .fs-5o8 { font-size: 0.625em; } .fs-3o4 { font-size: 0.75em; } .fs-7o8 { font-size: 0.875em; } .lead-1 { line-height: 1 !important; } .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .opacity-50 { opacity: 0.5; } .opacity-65 { opacity: 0.65; } .opacity-75 { opacity: 0.75; } .-translate-x-1s2 { transform: translateX(-50%); } .z-index-100 { z-index: 100; } .z-index-1000 { z-index: 1000; } .tsit-opacity-500 { transition: opacity .5s; } .shadow-strong { box-shadow: 0 0.5em 1em #00000060; } .text-link-over-secondary { color: #91bbed; text-decoration: underline; } .form-floating > .form-control-ata-answer-text { height: calc(5.75rem + calc(var(--tblr-border-width) * 2)); } .form-select-plaintext:disabled { /* background-color: transparent; */ padding-left: 0; color: var(--bs-body-color); background: none; border-style: none; } .form-floating .form-select-plaintext:disabled { padding-left: 0.75rem; } .form-check-label.stretched-link::after { display: none; } .jb-toast-container { bottom: 5em; right: 5em; max-width: calc(100vw - 10em); max-height: calc(100vh - 10em); } @media only screen and (max-width: 575px) { .jb-toast-container { bottom: 2em; right: 2em; max-width: calc(100vw - 4em); max-height: calc(100vh - 4em); } } .modal-dialog, .modal-content { pointer-events: all !important; } .modal-dialog__content { width: 70em; max-width: calc(100vw - 2em); } .modal-dialog__content--sm { width: 24em; max-width: calc(100vw - 2em); } /* Fix for Bootswatch theme Sketchy */ .btn-close::before { position: static; } .nav-item { display: flex; align-items: stretch; } .nav-link { cursor: pointer; } .btn-default.nav-link { font-weight: 600; color: var(--tblr-body-color); } .form-switch .form-check-input { /* --tblr-form-switch-bg: url(/img/input-switch-button.svg); */ background-color: #808080; } .form-switch .form-check-input:checked { background-color: #3A33FF; } .chat-list { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; } .chat-list-card { margin: 0 1em 4em; min-width: 20em; } .chat-list__header { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: baseline; margin: 0 0 1em; } .caf-group-kedata .bg-secondary dl dt { display: inline-block; color: lightgray; } .caf-group-kedata .dl-block { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; gap: 0.5em; } .caf-group-kedata .dl-block > dt { flex: 0 0 auto; } .caf-group-kedata .dl-block > dd { flex: 1 1 auto; } .caf-group-quality-relevance.dl-block { margin: 0 auto 0.5em; } /* .caf-group-quality-review dd > input[type="checkbox"] { width: 1.25em; height: 1.25em; } */ /* ── Agent queue (stage 1 of the console redesign) ────────────────── One row per session, scannable. Density is the point: the current console shows three or four conversations at a time because each is a full chat client. These rows are ~52px, so twenty fit on a laptop and the list stays readable on a phone. */ /* Wider overall, because the point is to fit the list AND one or more conversations side by side. */ .queue-page { max-width: 100%; margin: 0; padding: 1rem 1rem 3rem; } .queue-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .75rem; } .queue-head h2 { margin: 0; font-size: 1.25rem; } .queue-total { font-size: .8rem; color: #6b7280; font-variant-numeric: tabular-nums; } /* ⚠ Smaller than the button beside it — Johan, 2026-08-26. It is the ANSWER to Refresh, not a control: read once after pressing, ignored the rest of the time. At the row's default size it competed with the thing it reports on. */ .queue-fetched { color: #9ca3af; font-size: .68rem; } /* (The original .queue-filters / .queue-chip block lived here. Superseded by the filter-bar section further down — one chip style for every row.) */ /* ⚠ A LITTLE more air, not a lot — Johan, 2026-08-26. The ground does most of the separating now; the gap only has to stop the cards touching. */ .queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .28rem; } /* FIXED COLUMNS, like the agent table. A flex row let every cell size itself, so nothing lined up between rows and the eye had to re-find each field on every line. Now: wait · identity and preview · meta, all aligned down the list. */ /* ⚠ THREE STACKED ROWS, each a flex line — Johan, 2026-08-21. The old two-column grid sized its cells from the content, so nothing lined up between one row and the next and the eye had to re-find each field on every line. Every fact now has one place, at the same x, down the whole list. */ .queue-row { width: 100%; display: flex; flex-direction: column; gap: .12rem; text-align: left; background: #fff; border: 1px solid #e5e7eb; border-radius: .3rem; padding: .35rem .6rem; cursor: pointer; font: inherit; min-height: 46px; } /* * ⚠ HOVER HAS TO BE FELT — Johan, 2026-08-21: "on mouse over on session card * need stronger ux feedback, perhaps thicker border". * * It was #c7d2fe on #fbfcff: a border you had to look for and a background one * step off white. On a list of near-identical cards that is no feedback at all. * * ⚠ The thicker edge is an INSET SHADOW, not a wider border. A border going * 1px → 2px changes the content box, so every line in the card shifts a pixel * as the pointer crosses it and the whole list twitches. The shadow paints * inside the border and costs no layout, so nothing moves. * * The 3px left stripe survives it: the ring is drawn inside the border box, so * red-waiting and violet-owed still read while hovered. */ .queue-row:hover { border-color: #94a3b8; background: #f4f7fc; box-shadow: inset 0 0 0 1px #94a3b8; } /* An open card keeps its blue identity while hovered — it just gets the ring too. Without this, hovering the card you are already reading looked like hovering nothing. */ .queue-row.is-open:hover { border-color: #94a3b8; background: #d6def9; box-shadow: inset 0 0 0 1px #94a3b8; } /* ⚠ THE PRESS. A click must never produce zero visual change before the pane appears — see the interaction-responsiveness rule in the frontend docs. */ .queue-row:active { background: #e6edfa; } /* * ⛔ OPEN = A WASH AND A BAR ON THE RIGHT, not a blue frame — Johan, * 2026-09-15: "a thin blue border is probably not enough ... avoid that frame * that is visually a bit confusing". The row keeps its neutral border and * gets the tab strip's indigo as a pale ground plus a 3px bar on its RIGHT * edge, pointing at the panes it is open in. The left edge stays with the * red-waiting and violet-owed stripes, which say something else. * * Solid bar = pinned open. Dashed bar = the PREVIEW, the one the next click * replaces — the difference has to be visible BEFORE clicking, or pinning is * guesswork. A pseudo-element, not a border, so the row's box never shifts. */ .queue-row { position: relative; } /* Two steps deeper than the first cut (#eef2ff) — Johan, 2026-09-15: "I do not really see that". */ .queue-row.is-open { background: #e0e7ff; } .queue-row.is-open::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: #4f46e5; border-radius: 0 .3rem .3rem 0; pointer-events: none; } .queue-row.is-preview::after { background: repeating-linear-gradient(to bottom, #4f46e5 0 6px, transparent 6px 10px); border-radius: 0; } .queue-row:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; } /* ── The three lines of a session row ──────────────────────────────────── */ .qr-line { display: flex; align-items: center; gap: .35rem; min-width: 0; width: 100%; } /* Pushes whatever follows to the far right. */ .qr-push { flex: 1 1 auto; min-width: .35rem; } /* * AGENT PRESENCE — see console/AgentDot.tsx for what each state means. * * ⛔ ONE SCHEME ON EVERY PAGE — Johan, 2026-09-14: "use same color for the * different availabilities on all pages: red - not taking chats; grey - not * available; green - focused; not filled green - multitasking". Before this * the console dot, the Agent Overview column and the Agent Activity strip each * had their own palette (amber here, red there, yellow for multitasking on one * page and a green ring on another). * * The colours are variables so the pages that paint bars and swatches inline * (Agent Activity) read the same values; a page that redefines them is the * drift this exists to stop. `--presence-green-fill` is the pale green a BAR * uses for multitasking, where a hollow ring is not possible. * * ⚠ FILLED vs HOLLOW still carries the focused/multitasking distinction: at * 8px two greens are a guess; a filled circle beside an empty one is not. */ :root { --presence-green: #22c55e; --presence-green-fill: #bbf7d0; --presence-red: #ef4444; --presence-grey: #9ca3af; } .ag-dot { display: inline-block; flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 999px; margin-right: .3rem; vertical-align: baseline; } .ag-dot-available { background: var(--presence-green); } .ag-dot-away { background: transparent; box-shadow: inset 0 0 0 1.5px var(--presence-green); } .ag-dot-busy { background: var(--presence-red); } .ag-dot-offline { background: var(--presence-grey); } /* ⚠ Assigned to a user who no longer exists. Wider than the others because it carries a glyph — this one is meant to be noticed, not scanned past. */ .ag-dot-unknown { width: auto; height: auto; min-width: .8rem; padding: 0 .15rem; background: #fef3c7; color: #b45309; font-size: .6rem; font-weight: 700; line-height: 1.1; text-align: center; border-radius: 999px; } /* Presence, first on the row and ALWAYS occupying its slot — see the markup. Empty when nobody is there, so every id below it still starts at the same x. */ .qr-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 600; color: #111827; flex: 0 0 auto; } /* ⚠ SHRINKS AND CLIPS. A long address must not push the row taller or the column wider — "if email does not fit then cut it off". */ .qr-email { font-size: .78rem; color: #374151; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Fixed, so every pill after it starts at the same x down the list. */ .qr-ago { /* Room for "not replying 59m" — the word is the point (Johan, 2026-09-08). */ flex: 0 0 6.8rem; font-size: .7rem; color: #6b7280; font-variant-numeric: tabular-nums; white-space: nowrap; } /* The same weights as the header's badge — see .cv-waiting. No colour: the row already carries urgency in violet and red. */ .qr-ago-waiting.is-aging { color: #4b5563; } .qr-ago-waiting.is-overdue { color: #b45309; font-weight: 600; } .qr-ago-noreply { color: #9ca3af; } /* * ⚠ NOT UPPERCASE — Johan, 2026-08-23: "for the urgency pills in the session * list, do not use capital letters". * * Shouting a word the reader already knows costs legibility and buys nothing: * "IMPORTANT" is slower to read than "Important" and pulls harder than a * descriptive pill should. The CHANNEL pill keeps its caps — "WEB" and "SMS" * are abbreviations, where caps are how they are written anyway. */ .qr-state { display: inline-flex; align-items: center; line-height: 1; font-size: .66rem; font-weight: 700; border-radius: 999px; padding: .2rem .45rem; letter-spacing: .01em; } /* * ⚠ SOLID, AND THIS REVERSES AN EARLIER RULE ON PURPOSE — Johan, 2026-08-24: * "the pills in the session cards in list and in ACI must also be louder, and * aligned with selection buttons". * * They used to be tint + coloured ink + a 1px edge, deliberately "one weight * quieter than the tabs", on the reasoning that a tab is navigation and should * pull while a row pill merely describes its row. In practice that made the * one thing you scan a list FOR — which bucket is this in — the faintest mark * on the card, and it no longer matched the tab it corresponds to. * * So a pill now looks like its tab does when SELECTED: filled, white, the same * token. One colour per state, one appearance per colour, and the row answers * from across the screen instead of on inspection. * * ⚠ Every fill carries white at 4.8:1 or better (red 5.9, orange 4.8, green * 4.9, bot blue 6.4, action violet 8.6). Check any new state against that * before adding it — a pale fill here would be unreadable, not just quiet. */ .qr-state-urgent { background: var(--st-urgent-fill); color: var(--st-urgent-ink); } .qr-state-important { background: var(--st-important-fill); color: var(--st-important-ink); } .qr-state-replied { background: var(--st-replied-fill); color: var(--st-replied-ink); } /* ⚠ BLUE, NOT VIOLET — Johan, 2026-08-21. Violet now means "an agent must do something", and auto is the state where nobody has to. Wearing the action colour, the quietest bucket in the queue was shouting the loudest. Blue is the bot's colour in the transcript, so this now matches the bubbles it describes. */ .qr-state-bot { background: var(--st-bot-fill); color: var(--st-bot-ink); } /* ⚠ HISTORY STAYS QUIET while the other four went solid — it is the one state that is not work, and the same reason the tabs only badge Urgent and Important. Filling this too would spend attention on the rows that need none, and five shouting pills is the same as none. */ .qr-state-history { background: #e5e7eb; color: #4b5563; box-shadow: inset 0 0 0 1px #d4d8dd; } /* Done and Archived on the same pill as the buckets — Johan, 2026-09-15. Done quiet green (the agent finished), Archived darker grey (written off). */ .qr-state-done { background: #e7f5ec; color: #15803d; box-shadow: inset 0 0 0 1px #cbe9d6; } .qr-state-archived { background: #d1d5db; color: #374151; box-shadow: inset 0 0 0 1px #b9c2cc; } /* ⚠ `.cv-pill.sc-*` too: `.cv-pill` sets white ink and is declared LATER in this file, so a plain `.sc-done` lost the cascade and the pane showed white on pale green — Johan, 2026-09-15: "make sure all pills are readable". */ .sc-done, .cv-pill.sc-done { background: #e7f5ec; color: #15803d; box-shadow: inset 0 0 0 1px #cbe9d6; } .sc-archived, .cv-pill.sc-archived { background: #d1d5db; color: #374151; box-shadow: inset 0 0 0 1px #b9c2cc; } .qr-line3 { margin-top: .05rem; } /* ── A row that has moved out of this view ───────────────────── * * ⚠ FADED, NOT HIDDEN, and it must not look clickable-but-broken. The row is * still openable — it is a real session, it just lives somewhere else now — * so this dims rather than disables. The stripe goes neutral because whatever * the row was owed, it is not owed HERE any more. */ .queue-row.is-moved { opacity: .55; } .queue-row.is-moved::before { background: #cbd5e1 !important; } .qr-moved { display: flex; align-items: baseline; gap: .35rem; font-size: .64rem; font-weight: 700; letter-spacing: .02em; color: #475569; text-transform: uppercase; } /* Says what to DO about it, quietly. Without this the note reads as a state the row is stuck in rather than something the agent can clear. */ .qr-moved-hint { font-weight: 500; text-transform: none; color: #94a3b8; letter-spacing: 0; } /* Fixed, and RESERVED when empty — the message must start at the same x whether or not the language is known. */ .qr-lang-slot { flex: 0 0 2.1rem; display: flex; align-items: center; } /* "An agent has been in here" — history, not work. Grey and quiet on purpose: the two pills on this row that ARE work must win the eye. */ /* * ⚠ BIG AND CLEAR, both places — Johan, 2026-08-23. This is not a descriptive * pill like the channel or the bucket; it is an agent's judgement that the work * is finished, and it answers the question the list is scanned for. Solid * green, the same green the transfer mark uses for "this happened". */ .qr-done { flex: 0 0 auto; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #15803d; color: #fff; border-radius: 999px; padding: .1rem .5rem; } /* Outlined, not solid: Done is a conclusion and shouts; Reopened is a footnote explaining why a session is back. See the row markup. */ /* Written off. Deliberately DULLER than Done's green: nothing was achieved here, and a badge that looked like an accomplishment would be a small lie told on every row. */ .qr-archived { flex: 0 0 auto; font-size: .66rem; font-weight: 600; background: #55606e; color: #fff; border-radius: 999px; padding: .1rem .5rem; } .qr-reopened { flex: 0 0 auto; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #4b5563; background: #fff; border-radius: 999px; padding: .05rem .45rem; box-shadow: inset 0 0 0 1px #cbd5e1; } /* Your own pin on a list row — see the Pinned lookup. Quiet: it marks a chat you already chose, it is not asking to be clicked. */ .qr-pinned { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; flex: 0 0 auto; background: #eef2ff; color: #4f46e5; } .qr-touched { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; flex: 0 0 auto; background: #f3f4f6; color: #6b7280; } /* ⚠ VIOLET, and the only violet on the row — Johan, 2026-08-21. It is the one thing here that is somebody's TASK rather than a description of the conversation, and it must not be mistaken for the old transfer reason it replaces. Truncates: the message beside it is what the row is for. */ .qr-action { flex: 0 1 auto; min-width: 0; max-width: 14rem; font-size: .64rem; font-weight: 600; background: #ede9fe; color: #5b21b6; border-radius: 999px; padding: .05rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .queue-main { min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .queue-who { font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: .35rem; } .queue-live { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; background: #dcfce7; color: #15803d; border-radius: 999px; padding: .05rem .35rem; } .queue-flag { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; background: #fef3c7; color: #b45309; border-radius: 999px; padding: .05rem .35rem; } /* Quiet, monospace, secondary — findable when you are looking for it, ignorable when you are not. */ .queue-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; color: #9ca3af; font-weight: 400; } /* Up to TWO rows, then clipped — Johan, 2026-08-20. One line lost the end of most questions; unbounded would let a long paste own the whole list. */ /* * ⛔ CONTENT, NOT METADATA — Johan, 2026-08-25: "for clarity, makes sense to * have different font or something for the last message and the other content * on the cards?" * * Yes, and it is the one thing on the card that is somebody's WORDS. Everything * else — the id, the pills, the channel, the age — is the console describing * the row. Set the same way, the message read as one more field and the eye * skimmed past the only part that says what the conversation is about. * * A SERIF at the same size does it without a font file (Georgia and its * fallbacks ship everywhere) and without shouting: prose looks like prose, UI * looks like UI, and the distinction survives at 12px where a weight change * would not. Darker too — quoted speech should be the most readable thing in * the row, not the faintest. * * ⚠ NOT italic. It is the obvious reach for "quoted", and it costs legibility * on a two-line clamp of somebody else's punctuation and product names. */ .queue-preview { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-size: .78rem; color: #29313d; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* * The speaker stays UI: it is OUR label on their words, not part of them. * ⚠ `inherit` would have taken the serif from `.queue-preview`, which is the * parent — the whole point is that this one is not prose. */ .queue-from { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: .72rem; color: #9ca3af; } .queue-nopreview { color: #d1d5db; font-style: italic; } /* One line, not three. Stacking these tripled the row height and cost the density that is the whole argument for a list. */ /* The meta column is itself a grid, so "58m ago", the owner and the channel sit under each other down the list instead of drifting with name length. */ .queue-meta { display: grid; grid-template-columns: 4.2rem minmax(6rem, auto); align-items: baseline; gap: .45rem; font-size: .7rem; white-space: nowrap; justify-items: end; } .queue-by { font-weight: 600; } /* * WHO HAS IT — one hue, one meaning, and the same hues the bubbles use, so the * card and the conversation it opens agree. * * blue the bot has it (matches .cv-from-bot) * teal YOU have it (matches .cv-from-me) * slate-teal another agent has it (matches .cv-from-agent) * red nobody has it * * ⚠ Both agents are teal on purpose: "a human has this" is the first thing to * read, and BRIGHTNESS says whether that human is you. Two unrelated hues would * have made your own sessions no easier to find than anyone else's. */ /* * ⚠ WEIGHT IS THE SECOND AXIS — Johan, 2026-08-21. Colour says WHO has it; * weight says whether anybody has to move. * * bold somebody must act: it is yours, or nobody has taken it * normal a statement of fact: a colleague has it, or the bot does * * Two axes on one word, and neither costs a pixel. It also means a page of * auto rows reads as flat grey text with your own sessions standing out of it, * which is what an agent scans the column for. */ .by-bot { color: #2f5da8; font-weight: 500; } /* ⚠ #00857a, not the duller #0f766e it started as — Johan, 2026-08-21: "perhaps a stronger colour for you have it". More saturated so it carries against the violet beside it, and still 4.53:1 on white, so it is stronger without being less readable. */ .by-me { color: #00857a; font-weight: 600; } .by-agent { color: #3d5a66; font-weight: 500; } /* * ⚠ VIOLET, NOT RED — nobody has taken a chat that needs a human, which is the * queue's definition of work outstanding. Red leaves the who-label entirely * here, and is the better for it: it now means only "waiting on us" (the row * stripe) and "something failed" (a dead send). */ .by-unassigned { color: #7c3aed; font-weight: 600; } /* ⚠ Unassigned WITHOUT anything owed — see the row markup. An auto chat an agent once touched is not work, so it drops to grey AND to normal weight: both axes say "nothing to do here". */ .queue-by.by-quiet { color: #8a94a3; font-weight: 500; } .queue-solution { color: #9ca3af; } /* A pill now, sitting with the reason rather than in the meta column — the two are read together when deciding whether a conversation is yours. Quiet: it is context, not a flag. */ .queue-channel { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; background: #f3f4f6; color: #6b7280; border-radius: 999px; padding: .05rem .35rem; font-weight: 500; } /* Centred ON THE FILTER BAR, not on the column — Johan, 2026-08-19. ⚠ The column runs the full width of the page, so centring in it put the message far to the right of everything else on screen and it read as floating loose. Bounding the box to the bar's width and keeping it flush left means "centre" lands between the first and last filter, which is where the eye already is. Italic because it is a statement about the ABSENCE of content, not content. */ .queue-empty { width: 100%; max-width: var(--queue-bar-width); min-height: 14rem; margin-right: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 2rem 1rem; text-align: center; color: #6b7280; font-size: .875rem; font-style: italic; } .queue-empty p { margin: 0; } .queue-error { color: #b91c1c; } .queue-clear { margin-top: .5rem; border: 1px solid #d1d5db; background: #fff; border-radius: .3rem; padding: .35rem .7rem; font-size: .8rem; cursor: pointer; } /* Sits with the count and the load time — the three facts about freshness in one place, so the button is found where the doubt arises. */ /* ⚠ The Alerts button now sits first and .queue-head already supplies the gap, so the historical left margin would double it. Kept on the rule for the cases where Refresh IS first. */ .qs-wrap + .queue-refresh { margin-left: 0; } .queue-refresh { margin-left: .6rem; border: 1px solid #d5dae2; background: #fff; border-radius: .3rem; padding: .12rem .55rem; font-size: .72rem; color: #374151; cursor: pointer; min-height: 24px; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; /* Two lines tall in a baseline-aligned row: pin the TOP to the other buttons' top, or it hangs below them (Johan, 2026-09-07, screenshot). */ align-self: flex-start; } /* The last-updated time rides inside the button (Johan, 2026-09-07). */ .queue-refresh-time { font-size: .58rem; color: #9ca3af; font-variant-numeric: tabular-nums; } /* An old refresh colours the whole button — Johan, 2026-09-22. Amber from 5 minutes, red from 30; with no live updates, amber at once and red at 5. */ .queue-refresh-time.is-aging { color: #b45309; } .queue-refresh-time.is-old { color: #b4342b; font-weight: 600; } .queue-refresh:has(.is-aging) { border-color: #f0c58a; background: #fdf3e3; color: #92620a; } .queue-refresh:has(.is-aging):hover:not(:disabled) { border-color: #e2a94f; background: #fdeed2; } .queue-refresh:has(.is-old) { border-color: #f3bdb8; background: #fdeceb; color: #b4342b; } .queue-refresh:has(.is-old):hover:not(:disabled) { border-color: #e79b93; background: #fce0dd; } .queue-notices-count { display: inline-block; margin-left: .35rem; min-width: 1.1rem; padding: 0 .3rem; border-radius: 999px; background: #4f46e5; color: #fff; font-size: .62rem; font-weight: 700; line-height: 1.1rem; text-align: center; vertical-align: 1px; } /* The one solution picker, in the navbar beside the brand — see Header.tsx. */ .jb-solsel { max-width: 14rem; margin-right: .75rem; padding: .2rem 1.6rem .2rem .5rem; font-size: .8rem; border-radius: .3rem; border: 1px solid rgba(255,255,255,.35); background: #fff; color: #1e293b; } @media (max-width: 575.98px) { .jb-solsel { max-width: 9.5rem; font-size: .74rem; } } .queue-refresh:hover:not(:disabled) { border-color: #97a3b1; background: #f7f9fb; } .queue-refresh:disabled { opacity: .6; cursor: default; } .queue-note { margin-top: 1.5rem; font-size: .72rem; color: #9ca3af; text-align: center; } /* Phone: the meta column moves under the preview rather than squeezing it. */ @media (max-width: 640px) { .queue-page { padding: .75rem .6rem 3rem; } /* Phone: the meta column would squeeze the preview to nothing, so it drops below rather than competing for the same line. */ .queue-row { grid-template-columns: 2.4rem minmax(0, 1fr); gap: .5rem; } .queue-meta { grid-column: 2; grid-template-columns: repeat(3, auto); justify-items: start; gap: .4rem; } } /* ── Conversation pane (new console) ──────────────────────────────── Not the shopper's widget. An agent-grade transcript: denser, events distinguishable from utterances, and a composer this app owns rather than a textarea living inside an embedded widget. */ /* * ⚠ NEVER WRAPS. It used to, as an anti-overflow measure — every pane stayed * reachable, but the ones that did not fit stacked DOWN THE PAGE below the * fold, with nothing on screen saying they were there. Johan, 2026-08-19: that * should never happen; what does not fit belongs in the "n more open" menu. * * How many fit is measured — see `paneFit.ts`. Nothing is put out of reach: * the overflow menu is somewhere the agent already looks, and a second row is * not. */ /* * ⚠ THE SHELL OWNS THE SCREEN, so the LIST scrolls and the page does not — * Johan, 2026-08-23: "when I scroll on the session list, only the session list * shall scroll, not the entire page". * * The phone layout was bounded like this on 2026-08-23 for the same reason and * the desktop was left alone, so scrolling the queue carried the whole document * — taking the views rail, the tabs, the filter bar and the conversation panes * off the top with it. Everything you need while reading the list disappears * the moment you read the list. * * `dvh` rather than `vh` for the same reason as on the phone: a browser with a * collapsing toolbar reports a larger `vh` than it actually shows. * * ⚠ `min-height: 0` all the way down, or the flex children refuse to shrink * below their content and the inner scroll never engages — the outer one just * comes back. */ .queue-shell { display: flex; flex-wrap: nowrap; gap: 1rem; align-items: stretch; /* ⚠ The shell's page area gives the height (flex: 1 1 auto; min-height: 0 from `.shell-page > .queue-shell`); the old `calc(100dvh - 4rem)` was the navbar's height and left with it (2026-09-14). */ min-height: 0; overflow: hidden; } .queue-page { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } .queue-body { min-height: 0; } /* * ⚠ `align-self: stretch` IS WHAT MAKES THE LIST SCROLL — Johan, 2026-08-24: * "the scroll does not work". * * `.queue-body` sets `align-items: flex-start` so the views rail keeps its own * height instead of stretching down the page. That applied to this column too, * so it grew to its CONTENT rather than to the shell — measured on the deployed * page: body 697px, main column 1931px. The list surface then had * `overflow-y: auto` and a height equal to its own content, so there was * nothing for it to scroll; it simply overflowed and the shell clipped it. * * Bounding the shell was necessary and not sufficient: every ancestor between * the shell and the scroller has to pass the height down, and one `flex-start` * three levels up silently stops it. * * ⚠ On THIS column only, not by changing `align-items` on the body — the rail * should still size to its cards. */ .queue-main-col { display: flex; flex-direction: column; min-height: 0; align-self: stretch; } /* ⚠ NO `overflow` on the views rail. It would clip the agent picker, which is absolutely positioned inside it — a dropdown you cannot see is worse than a rail that occasionally runs long, and the rail is five cards. */ /* The panes and their overflow menu, as one column so the menu sits ABOVE the row rather than beside it — a rail beside them competed for the very width that caused the overflow. */ .cv-stack { display: flex; flex-direction: column; gap: .35rem; min-width: 0; margin-top: .9rem; } /* ⚠ THE PANES MUST NEVER REACH THE LIST. Johan, 2026-08-20, with a screenshot of three panes sitting on top of the session list. `min-width: 0` is the load-bearing part: a flex item defaults to `min-width: auto`, so this container refused to shrink below the sum of its panes' own minimums and simply overflowed to the LEFT, painting over the column beside it. With it, the row shrinks and `overflow: hidden` clips inside its own bounds instead of the neighbour's. The real defence is still `panesThatFit` — it decides how many open at all, so clipping should never be reached. This is the backstop. */ .cv-panes { display: flex; flex-wrap: nowrap; gap: 1rem; align-items: stretch; min-height: 0; min-width: 0; overflow: hidden; /* ⛔ TAKES THE ROOM THERE IS — Johan, 2026-09-15: "if the left menu is collapsed, use the available horizontal space to make the ACIs and/or the session list a bit wider ... in most cases they will keep the menu collapsed". The row grows into what the folded menu frees, and the panes inside it share that (see .cv-pane). Twice the list's weight: reading a conversation is what the width is for. */ flex: 2 1 auto; /* Room for the grip, which now straddles each pane's TOP BORDER — Johan, 2026-09-15. Without this the half above the edge is clipped. */ padding-top: .5rem; } /* ── "n more open" ──────────────────────────────────────────────────────── */ /* Full width so the dropdown below it can be too — the BUTTON stays its own size, it is only the positioning context that spans. */ .cv-more { position: relative; align-self: stretch; } .cv-more-btn { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #d5dae2; background: #fff; border-radius: .3rem; padding: .2rem .5rem; font-size: .72rem; font-weight: 600; color: #374151; cursor: pointer; min-height: 26px; } .cv-more-btn:hover, .cv-more-btn.is-on { border-color: #97a3b1; background: #f7f9fb; } .cv-more-caret { font-size: .9rem; line-height: 1; color: #6b7280; } /* ⚠ AS WIDE AS THE PANE ROW — Johan, 2026-08-20: "allow that select field to use all space above the ACIs". At 22rem the last message was clipped to a few words, which is the one field that tells conversations apart; the space above the panes is doing nothing else. */ .cv-more-list { position: absolute; top: calc(100% + .25rem); left: 0; z-index: 40; /* ⚠ A NARROW LIST, NOT THE WHOLE WIDTH — Johan, 2026-09-15: "open the n more ones in a narrower popup and line break the latest message". The message wraps to two lines instead (.cv-more-msg). */ width: 28rem; max-width: calc(100vw - 2rem); max-height: 28rem; overflow-y: auto; display: flex; flex-direction: column; gap: .1rem; padding: .25rem; background: #fff; border: 1px solid #d5dae2; border-radius: .4rem; box-shadow: 0 12px 28px -10px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .08); } .cv-more-item { display: flex; flex-direction: column; gap: .1rem; text-align: left; border: 0; background: none; cursor: pointer; padding: .35rem .45rem; border-radius: .3rem; width: 100%; } .cv-more-item:hover { background: #eff6ff; } .cv-more-top { display: flex; align-items: baseline; gap: .35rem; min-width: 0; } .cv-more-who { font-size: .76rem; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cv-more-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .64rem; color: #8d97a3; } .cv-more-waiting { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #b91c1c; background: #fdeaea; border-radius: .2rem; padding: 0 .25rem; } /* Pushed right and never squeezed — it is the one thing scanned down a column. */ .cv-more-ago { margin-left: auto; flex: 0 0 auto; font-size: .66rem; color: #8d97a3; font-variant-numeric: tabular-nums; } .cv-more-msg { font-size: .7rem; color: #6b7280; line-height: 1.35; /* Two lines, then an ellipsis: enough to tell conversations apart without one long bot reply taking the whole list. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; word-break: break-word; } .cv-more-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-left: .15rem; border: 0; border-radius: .25rem; background: transparent; color: #8d97a3; cursor: pointer; padding: 0; align-self: center; } .cv-more-close:hover { background: #e5e7eb; color: #111827; } .cv-more-close svg { width: .8rem; height: .8rem; } /* ⚠ SIZES TO ITS CONTENT, it does not fill — Johan, 2026-08-21: the first conversation "should display just to the right of the session list, not to the far right as now". While this grew, the list column's own cap left the surplus INSIDE the page, so the panes were pushed to the far edge with a band of empty ground between them and the list they came from. Now the page is as wide as the rail plus the list, and the panes begin immediately after it. */ .queue-shell .queue-page { flex: 0 1 auto; min-width: 0; } /* And the panes take the room the page gave up, rather than only their own basis — otherwise the pair would sit left with a gap on the right instead. ⚠ `.cv-stack`, NOT `.cv-panes` — Johan, 2026-09-07: the pane "renders narrow while fetching transactions. Should directly be normal width." This rule used to target `.cv-panes` back when that was the shell's child. The "n more open" menu wrapped it in `.cv-stack`, and a descendant selector kept matching, so nothing looked wrong — but the element that actually sits in the shell's row was left at `flex: 0 1 auto`: sized to its CONTENT. While the transcript was empty the content was a header and one line of text, so the stack shrank to 22rem and dragged the pane down with it; when the messages arrived it grew to 30rem. Measured on prod: 352px → 480px, a visible jump on every open. Pointing the rule at the stack gives the pane its basis from the first frame. */ .queue-shell .cv-stack { flex: 1 1 auto; } /* ⚠ MUCH NARROWER than it was (34rem basis, unbounded). A conversation is a column of short messages; giving it half the screen wastes it on whitespace and makes long lines hard to track. Bounded at 30rem so two or three can sit side by side, which is where this is heading — an agent working several chats at once. */ /* * ⚠ NOTHING RENDERS OUTSIDE THE PANE. Johan, 2026-08-19, as a general rule — * the header's controls used to spill past the right edge and sit on top of the * next conversation, so a button belonging to one chat appeared to belong to * another. * * Two parts, and the order matters. The header rows WRAP, so a control that no * longer fits moves to a new line and stays reachable. `overflow: hidden` is * only the backstop that guarantees nothing paints past the border — it must * never be the mechanism, because clipping a control does not tidy it away, it * makes it unusable while still looking present. * * Safe because the transcript scrolls in its own container, and the transfer * picker is narrower than the pane's minimum width. */ /* * ⚠ THE DROP LINE — Johan, 2026-08-21: "perhaps showing a vertical line where * it will be placed". Drawn on the EDGE the pane will actually land against; * which edge is decided in Queue.tsx, because only the order knows. * * An outline rather than a border: a border would change the pane's width mid * drag and shove everything sideways under the cursor. */ .cv-pane.is-drop-before::after, .cv-pane.is-drop-after::after { content: ''; position: absolute; top: 0; bottom: 0; width: 4px; background: #1d4ed8; pointer-events: none; z-index: 5; } /* * ⚠ INSIDE the edge, not outside it. This was `left: -.5rem` / `right: -.5rem`, * drawn into the gap between panes — where `.cv-pane`'s own `overflow: hidden` * clipped it. The indicator has been invisible since it was written, which is * why Johan asked twice for one (2026-08-23). */ .cv-pane.is-drop-before::after { left: 0; border-radius: .4rem 0 0 .4rem; } .cv-pane.is-drop-after::after { right: 0; border-radius: 0 .4rem .4rem 0; } /* * ⚠ AND THE PANES PART — Johan: "either separate the ACIs behind if this ACI is * now positioned to drop in between them, or show a vertical line". Both: the * line says exactly where, the gap makes the space for it visible from the * corner of the eye while the cursor is elsewhere. * * Margin rather than transform, so the neighbours actually move over instead of * this one sliding across them. */ .cv-pane.is-drop-before { margin-left: 1.1rem; } .cv-pane.is-drop-after { margin-right: 1.1rem; } @media (prefers-reduced-motion: no-preference) { .cv-pane { transition: margin .12s ease-out; } } /* The one being carried steps back, so the line is the loudest thing on screen and it is obvious which pane is in flight. */ .cv-pane.is-dragging { opacity: .45; } .cv-pane { position: relative; /* 20rem minimum, was 22 — with the menu beside the queue a third pane needs it (Johan, 2026-09-15). paneFit.ts LAYOUT.paneMin MUST match. */ /* Grows into freed space up to 38rem — Johan, 2026-09-15; 30rem stays the basis, so how MANY fit does not change (paneFit.ts). */ flex: 1 1 30rem; max-width: 38rem; min-width: 20rem; display: flex; flex-direction: column; /* ⚠ A DARKER EDGE AND A LIFT — Johan, 2026-09-15: "make the ACIs stand out more". A white card on the white page with a hairline had no edge; the border is now the rail cards' mid grey and a faint shadow lifts it. */ background: #fff; border: 1px solid #b9c2cc; border-radius: .4rem; box-shadow: 0 1px 3px rgba(28,37,48,.10), 0 4px 14px -8px rgba(28,37,48,.22); max-height: calc(100vh - 6rem); /* * ⚠ top: 0, AND align-self — Johan, 2026-08-21: "clicking on All agent based * moved the open ACIs a bit down. should not happen". * * It was `top: 1rem`. `.cv-panes` sets `overflow: hidden`, which makes it a * scroll container, so the pane sticks relative to IT. With a short list the * container is exactly as tall as the pane, there is no slack, and the offset * cannot show; the moment the list grows taller the slack appears and the * pane drops by that 1rem. So the conversation you were reading moved because * a DIFFERENT column got longer. * * The inset bought nothing even when it was invisible: the shell is * viewport-height and scrolls internally, so this sticky never actually * sticks (verified in the browser — the document scroll offset stays 0). It * is kept at 0 rather than deleted because the narrow layout below re-points * it. * * ⚠ NOT `align-self: flex-start`, which also stops the drift but costs the * stretch: the pane would shrink to its content instead of filling the * column, so a two-line conversation would render a stub of a panel. */ position: sticky; top: 0; /* ⚠ VISIBLE, was hidden — Johan, 2026-09-16: "the drag icon is only shown inside the ACI but not outside". The grip straddles the top border and the clip cut its upper half. Nothing inside needs the clip: the transcript scrolls itself, the head has its own top radius, and the composer has no ground of its own. The popups under the header are now free to hang past the edge too, which they always wanted to. */ overflow: visible; } /* * SEVERAL AT ONCE. The pane's basis tightens as more open, so three fit beside * the list rather than pushing it off screen; below three the extra width goes * back to the conversation. * * THE ARITHMETIC, so the next person changing a number knows what it costs. * Three panes need: 3 × basis + 2 gaps, beside sidebar 10.5rem + list + gaps. * * at basis 21rem → 65rem + 11.5 + list 20 + 1 = 97.5rem (1560px) * at min 18rem → 56rem + 11.5 + list 20 + 1 = 88.5rem (1416px) * * So three are comfortable from about a 15" laptop up; below that the panes * ride their floor and the list keeps its own. Narrower still and the shell * wraps rather than overflowing — nothing is pushed out of reach. */ .queue-shell.open-2 .cv-pane { flex-basis: 25rem; max-width: 25rem; } .queue-shell.open-3 .cv-pane { flex-basis: 21rem; max-width: 21rem; min-width: 18rem; } /* TWO ROWS. Row one is what this conversation IS; row two is where it STANDS. See the comment in ConversationPane.tsx. */ .cv-head { display: flex; flex-direction: column; gap: .3rem; padding: .45rem .6rem; border-bottom: 1px solid #d5dbe2; flex: 0 0 auto; /* The head is a band, so the card reads as a card from the top down. */ background: #f7f9fb; border-radius: .4rem .4rem 0 0; } .cv-head-row { display: flex; align-items: center; gap: .25rem; min-width: 0; /* Wrap rather than spill — see the rule on .cv-pane. */ flex-wrap: wrap; row-gap: .25rem; } /* Everything after this is pushed right. One spacer per row, so the pin/close pair and the answering switch line up down the right edge. `1 1 0` and not `1 1 auto`: an auto basis lets the spacer claim a line of its own once the row wraps, which pushes the controls onto a third line. */ .cv-head-push { flex: 1 1 0; min-width: 0; } /* The handle a session is referred to by, everywhere. Monospace because it is read character by character when someone reads one out. */ .cv-sid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; font-weight: 600; color: #111827; letter-spacing: -.01em; } /* Its own row, so it gets the pane's full width before it has to truncate — half an email cannot be read out, searched for, or recognised. */ /* ⚠ HOLDS ITS HEIGHT WHEN EMPTY — see the markup. Panes sit side by side, and a row that appears only sometimes puts one pane's transcript a line below its neighbour's. The height is the email's own line-height, so a pane with an address and one without agree on where every row after this sits. */ /* ⛔ `.cv-head-email` IS GONE — the address moved onto the identity row (2026-09-04), which retired the reserved-blank-row trick that kept side-by-side panes aligned. There is no row left to reserve. */ .cv-email { font-size: .74rem; color: #4b5563; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cv-chip { flex: 0 0 auto; font-size: .6rem; font-weight: 600; line-height: 1.5; /* .28rem, was .35 — less padding so the row keeps its chips (Johan, 2026-09-15). */ padding: .05rem .28rem; border-radius: .2rem; background: #f1f3f7; color: #4b5563; box-shadow: inset 0 0 0 1px #e2e6ee; white-space: nowrap; } /* The CBVA, when shown at all, is a coarser fact than the two beside it. */ .cv-chip-solution { background: #eef2ff; color: #4338ca; box-shadow: inset 0 0 0 1px #dfe3fb; } /* Icon-only controls, right-aligned on row one. */ .cv-icon { flex: 0 0 auto; border: 1px solid transparent; background: none; cursor: pointer; border-radius: .3rem; padding: .15rem .3rem; line-height: 1; font-size: .95rem; color: #6b7280; min-height: 24px; } .cv-icon:hover { background: #f3f4f6; } .cv-icon.cv-close { font-size: 1.15rem; } /* * PINNED is the same grey mark, just filled in — Johan, 2026-08-19: no frame, * and grey rather than red. * * The emoji carries its own colour, so both states are desaturated and the * difference is weight alone. A red pin and a blue frame made a small, * reversible preference look like a warning. */ .cv-pin { filter: grayscale(1); opacity: .45; } .cv-pin.is-on { filter: grayscale(1); opacity: .95; } /* Wrap stays as the BACKSTOP — the containment rule on .cv-pane means a control that genuinely cannot fit must move to a new line rather than spill. With the owner name capped it should not come to that at ordinary pane widths. */ .cv-head-state { flex-wrap: wrap; row-gap: .25rem; } /* Neither of these gives: the link is the only way to reach the picker, and a squeezed switch is the control most likely to be mis-hit. */ .cv-transfer, .cv-toggle { flex: 0 0 auto; } /* Centred like the old console's, and quiet: it is context, never an action. */ /* * ⚠ THREE COLUMNS, so the date stays optically centred whatever length the * owner's name happens to be. A flex row with a push would slide the date left * every time "Agent 1 AllSolutions" appeared. */ /* * ⚠ ROW ONE NEVER WRAPS — Johan, 2026-08-23: "stuff is on the 1st or 2nd line * depending on what fits. We do not want that. Close and pin should always be * top right." * * A long CBVA name pushed the controls onto a second line, so the two things an * agent FINDS rather than reads moved with the data. The identity chips give * way instead: they shrink and ellipse, and the pin and close hold their * corner whatever the name. */ /* * ⛔ ROW ONE IS FRAMED — Johan, 2026-09-04: "makes sense to put a simple frame * / border around the 'what this conversation is' data?". It does: the header * holds two different kinds of thing, and only the reading order said so. * Identity (who and what) is now visibly one block; everything below it — the * switch, the pills, the dates, the owner — is state, which changes while the * block above does not. * * ⚠ A GROUND, NOT A BOX. A full border would draw a second frame inside the * pane's own and read as a nested card; a faint tint with one hairline under it * groups without adding a shape to look at. */ /* * ⛔ THE FRAME WRAPS BOTH IDENTITY LINES — Johan, 2026-09-04. Row one is * what this conversation IS (id, state, place, language, channel, store, * CBVA); row two is WHO it is with (address, history), and it sits directly * above the toggle so nothing separates the person from the controls that act * on their conversation. Framing only the first said the second was something * else. * * ⚠ A GROUND, NOT A BOX. A full border draws a second frame inside the pane's * own and reads as a nested card; a faint tint with one hairline under it * groups without adding a shape to look at. */ /* * ⛔ THE FRAME HOLDS DATA, THE ICONS SIT OUTSIDE IT — Johan, 2026-09-04. Pin * and close act on the PANE rather than describing the conversation, and they * must be in the same place on every pane; a box that grows with its contents * is the wrong thing to put them in. * * ⚠ A REAL BORDER NOW, not a ground with one hairline. Once the icons stepped * outside, the block has an edge on all four sides and needs to show one — * otherwise the icons read as having drifted off the end of a row rather than * as sitting beside a panel. */ .cv-head-identity { display: flex; align-items: flex-start; gap: .35rem; } .cv-head-frame { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: .35rem; /* Tighter — Johan, 2026-09-15: "allow the session group to be a bit wider". */ padding: .12rem .3rem; margin-bottom: .15rem; } /* The controls beside the frame give it room: narrower gap, smaller Mark Done. */ .cv-head-identity { gap: .2rem; } .cv-head-done .cv-link { font-size: .68rem; } .cv-head-icons .cv-icon { padding: .15rem .2rem; } .cv-head-id, .cv-head-who { flex-wrap: nowrap; padding: 0; margin: 0; } /* ⚠ Top-aligned, so they hold their place whether the frame is one line tall or two — the frame's height follows its contents, these must not. */ .cv-head-icons { flex: 0 0 auto; display: flex; gap: .1rem; padding-top: .1rem; } /* * ⛔ BOTH LINES KEEP THEIR HEIGHT WHEN EMPTY. A session with no address, or one * on a solution the view does not span, must not pull the lines below it up — * two panes side by side would then disagree about where their dates and * transcripts sit, which is the whole reason these became fixed lines. * * ⚠ The value is the line-box of the smallest thing in them (.7rem text), not * a guess. Change either font and change this. */ .cv-head-who { min-height: 1.15rem; align-items: baseline; } /* ⚠ BESIDE THE ADDRESS, not at the far end — Johan, 2026-09-04. Pushed right it read as a separate column and left a gap across a wide pane; next to the address it reads as one fact about one person, which is what it is. The address still takes what room it needs first and truncates. */ .cv-head-who { justify-content: flex-start; gap: .45rem; } .cv-head-who .cv-vmenu { flex: 0 1 auto; min-width: 0; } .cv-head-id .cv-sid { flex: 0 0 auto; } /* The chips are the only thing here that may lose room — a truncated store name is still recognisable, a control that moved is not. */ .cv-head-id .cv-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * The address, on the identity row since 2026-09-04. * * ⚠ IT SHRINKS LAST OF THE FLEXIBLE THINGS. A truncated store name is still * recognisable; half an email is not — it cannot be read out, searched for or * recognised, which is why this used to have a row to itself. So the chips give * up their room first (shrink 3 against 1), and the full address stays on the * button's hover title. */ .cv-head-who .cv-vmenu-trigger { flex: 0 1 auto; min-width: 0; } .cv-head-id .cv-chip { flex-shrink: 3; } /* ⛔ THE LANGUAGE CODE ALWAYS FITS — Johan, 2026-09-15. Two letters that say what the conversation is in; the city chip beside it is the one that may lose room, and it goes first. */ .cv-head-id .cv-chip-lang { flex: 0 0 auto; } .cv-head-id .cv-chip-where { flex-shrink: 6; } .cv-head-id .cv-icon, .cv-head-id .cv-back { flex: 0 0 auto; } /* ⚠ Reads as absence, not as identity — it sits where an address goes and must not be mistaken for one. See the slot in ConversationPane. */ .cv-noemail { font-size: .74rem; font-style: italic; color: #9ca3af; flex: 0 0 auto; white-space: nowrap; } /* Place and language: quieter than the store chips beside them, because they are context for reading the conversation rather than what it belongs to. */ .cv-head-id .cv-chip-where, .cv-head-id .cv-chip-lang { background: none; border: 1px solid #e5e7eb; color: #6b7280; } /* A flag needs no frame: the emoji is the chip. Never shrinks; it is one glyph. */ .cv-head-id .cv-chip-flag { border: 0; padding: 0 .1rem; font-size: .9rem; line-height: 1; flex: 0 0 auto; } /* * The wait, on the state row. * * ⚠ NO NEW HUE — see waitLevel. `overdue` gets weight and the existing warning * ink that the Important pill already uses; nothing here introduces a colour an * agent has to learn. */ /* * "4th session · last 2 days ago". * * ⚠ WEIGHT, NOT A HUE — Johan asked whether recency should be a colour; see * returningVisitor.ts. The header already spends colour on urgency, and a * fourth meaning competing there costs more than it says. `is-recent` (back * within a day, usually the same problem) darkens and bolds; everything older * stays quiet. */ .cv-returning { font-size: .7rem; color: #9ca3af; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ⚠ AMBER — the Important colour — for "back again, unresolved": within 48h, or a third conversation in a week. Johan, 2026-09-07: "alert color in the ACI if within 48 hrs". It replaces the bold-grey of 2026-09-04; the reason for no colour then was a crowded header, and this reuses a colour the header already means "needs you" by. */ /* ⚠ `--st-important`, the ink for a PALE ground — not `-ink`, which is what sits on the solid fill and went white on 2026-09-14 (Johan: "I see something after the email", the returning mark had vanished). */ .cv-returning.is-alert { color: var(--st-important); font-weight: 700; } .qr-returning { font-size: .68rem; color: #9ca3af; white-space: nowrap; flex: 0 0 auto; padding: 0 .3rem; border-radius: .2rem; } .qr-returning.is-alert { color: var(--st-important); background: var(--st-important-tint); font-weight: 700; } .cv-waiting { font-size: .72rem; color: #6b7280; white-space: nowrap; } /* Right-justified at the end of the email row (Johan, 2026-09-08) — the one thing on that row pushed to the far end, so it reads as the row's clock. */ .cv-head-who .cv-waiting { margin-left: auto; flex: 0 0 auto; } /* The clock now sits inside its tip wrapper, so the wrapper is what gets pushed right — Johan, 2026-09-15: "right justify the n days". */ .cv-head-who .cv-waiting-wrap { margin-left: auto; flex: 0 0 auto; } /* On the switch row since 2026-09-15: after the push, just left of the state pill. */ .cv-head-state .cv-waiting-wrap { flex: 0 0 auto; margin-right: .1rem; } /* ⛔ ORANGE MEANS "THE VISITOR IS WAITING ON US", at every age — Johan, 2026-09-15: the word "waiting" went, so the colour alone has to say which clock this is. Was grey until 5 minutes and dark grey until 30, which read the same as the not-replying grey below. Weight still carries the age: bold once overdue. */ .cv-waiting.is-fresh, .cv-waiting.is-aging { color: #b45309; } .cv-waiting.is-overdue { color: #b45309; font-weight: 600; } /* Our message unanswered — the quiet direction. Never weighted: nobody is owed anything, it only says whether a nudge is due. */ .cv-waiting.is-noreply { color: #9ca3af; font-weight: 400; } /* The email trigger's tip wrapper must shrink like the trigger did, or the address stops ellipsing on a narrow pane. */ .cv-vmenu-tipwrap, .qr-email-tipwrap { display: flex; min-width: 0; flex: 0 1 auto; } /* * ⚠ TWO COLUMNS, date LEFT — Johan, 2026-08-23. It was `1fr auto 1fr`, an * empty first column reserved purely to keep the date optically centred. That * centring cost the agent's name its room: "Agent 1 AllSolutions" wrapped onto * two lines with a third of the row blank beside it. A centred date is worth * nothing; a readable name is. */ /* * ⚠ THREE COLUMNS NOW: date · pencil · owner. It was `auto 1fr`, and adding the * pencil as a third child would have pushed the owner out of the 1fr track that * right-aligns it under Done / Assign. * * The pencil takes `auto` and sits between them: it belongs to the * conversation, not to the owner, and trailing the row would put it under the * controls that change assignment. */ .cv-head-when { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .5rem; /* ⚠ ONE ROW, ALWAYS — Johan, 2026-08-25: "make sure that that row is not broken into two". A grid with explicit columns still creates implicit ROWS for anything that does not fit; the name ellipses instead (see `.cv-owner .queue-by`), which is the honest way to lose space. */ grid-auto-flow: column; grid-auto-columns: min-content; } /* Right-aligned so it lines up under Done / Assign — the controls that change it. Same classes as the list rows (.by-*), so a session cannot be teal in the list and something else in its own header. */ /* ⚠ `min-width: 0` — without it a long name refuses to shrink and shoves the date out of the row rather than ellipsing itself. */ /* * ⛔ COLUMN 3, AND THAT IS WHY IT WRAPPED — Johan, 2026-08-25: "move agent to * same row, make sure that row is not broken into two". * * It was pinned to `grid-column: 2` from when this row had two tracks. Adding * the pencil made column 2 the PENCIL's, so the owner was forced onto a new * grid row — silently, because a grid does not error, it just reflows. * * ⚠ Any change to `.cv-head-when`'s template must move this with it. Explicit * placement plus a changing template is exactly how a layout drifts without * anything failing. */ .cv-owner { grid-column: 3; justify-self: end; min-width: 0; display: inline-flex; align-items: center; gap: .3rem; /* Smaller and bold — Johan, 2026-08-25. A name is the one thing on this row read as an identity rather than as data, and weight carries that at a size that leaves the date room to breathe. */ font-size: .72rem; font-weight: 600; } .cv-owner .queue-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cv-when { font-size: .66rem; color: #8b96a5; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Sized to the pills beside it, so row two reads as one band. */ .cv-btn-sm { padding: .12rem .45rem; font-size: .68rem; min-height: 22px; } /* * WHO IS ANSWERING — a switch, because it has two states and flips between * them. Same height as the pills so it sits on their row. */ .cv-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; cursor: pointer; padding: 0 0 0 .2rem; min-height: 22px; } .cv-toggle:disabled { opacity: .5; cursor: not-allowed; } .cv-toggle-track { width: 1.85rem; height: 1rem; border-radius: 999px; background: #9ca3af; position: relative; flex: 0 0 auto; transition: background .12s ease; } .cv-toggle-knob { position: absolute; top: 2px; left: 2px; width: .75rem; height: .75rem; border-radius: 50%; background: #fff; transition: transform .12s ease; } /* Matches the agent's own bubbles — the switch and the messages it produces are the same colour, which is the point of the split. */ /* The YOU bubbles' teal, so the switch and the bubbles say "agent" in one colour — Johan, 2026-09-17. Bot stays the bot bubbles' blue. */ .cv-toggle.is-agent .cv-toggle-track { background: #00857a; } .cv-toggle.is-agent .cv-toggle-knob { transform: translateX(.85rem); } .cv-toggle.is-bot .cv-toggle-track { background: #4675bf; } .cv-toggle-label { font-size: .68rem; font-weight: 600; color: #374151; } /* * A HANDOVER IS WAITING. Loud on purpose — Johan, 2026-08-19 — because it is * the one thing on this header that somebody has to act on, and the control * that answers it is this same switch. * * ⚠ It is NOT disabled. It used to be, which disabled the only control that * resolves the situation: `takeOverSession` refuses only an already-taken-over * session, and taking over is what sets the request to Fulfilled. */ /* * ⚠ NO SPECIAL TREATMENT WHILE A TRANSFER IS WAITING — Johan, 2026-08-19. * * It was first a filled amber pill carrying the words, then a ring. Both were * the same mistake in different sizes: the "Transfer requested" pill on the row * above already says it, and a second mark for one fact makes the quieter of * the two read as a different thing. The switch says who is answering, and * only that. * * ⚠ It is not disabled either. `takeOverSession` refuses only an * already-taken-over session, and taking over is what fulfils the request. */ @media (prefers-reduced-motion: reduce) { .cv-toggle-track, .cv-toggle-knob { transition: none; } } .cv-back { border: 0; background: none; color: #1d4ed8; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .2rem; display: none; /* desktop keeps the list visible */ } /* `.cv-ident`, `.cv-who` and `.cv-sub` were the old one-row header. The two-row one above replaced them — deleted rather than left as dead rules nobody can tell are unused. */ /* WHO has it and WHICH BUCKET it is in, on the conversation header. The state half reuses the sidebar's .sc-* colours rather than restating them, so a bucket cannot be one colour in the list and another here. */ /* * ⚠ THE WHOLE ROW STAYS ON ONE LINE. Johan, 2026-08-19 — an agent named * "Agent 1 AllSolutions" pushed the answering switch onto a second line. * * The group shrinks instead of wrapping, and the pressure lands on the OWNER * name first because it is the only part that is arbitrarily long. Everything * else here is a fixed vocabulary — Replied, Action request — and truncating a * known word to "Act…" costs more than it saves. */ .cv-pills { display: flex; align-items: center; gap: .25rem; flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; } /* "Undo" beside the Action done pill — a link at the pill's size, so it reads as belonging to that pill and not to the control band above. */ .cv-pill-undo { font-size: .68rem; margin-left: .1rem; } .cv-pill { flex: 0 0 auto; /* ⚠ CENTRED TEXT — Johan, 2026-09-16: "the status pills must have vertically centered text". Inline-flex with line-height 1 puts the glyphs in the middle of the box whatever the font; the old line-height 1.5 on an inline span sat them a hair high. Same height as before. */ display: inline-flex; align-items: center; font-size: .6rem; font-weight: 600; line-height: 1; padding: .2rem .35rem; border-radius: .2rem; color: #fff; white-space: nowrap; } /* * ⛔ AFTER `.cv-pill`, AND THAT IS THE FIX — Johan, 2026-08-25: "Agent clearly * marked as Done (see comment) but in header not marked as done!!", with an * empty white box where the pill should be. * * The pill was there. `.cv-pill` sets `color: #fff` for the filled states, and * these two modifiers lived ~650 lines EARLIER in this file — same specificity, * so the base won and "Reopened" rendered as white text on its own white * background. Invisible, and it read as an empty box rather than as a word * nobody could see. * * ⚠ The header was not wrong: that session had been reopened, and Reopened + * "Mark done" is exactly right for it. Only the label was unreadable. * * ⚠ Do not move these back above `.cv-pill`. Nothing here raises specificity — * they win on order alone, which is why the position is the rule. */ /* Outlined, matching `.qr-reopened` on the list rows — one idea, one look. */ .cv-pill-reopened { background: #fff; color: #4b5563; font-weight: 600; box-shadow: inset 0 0 0 1px #cbd5e1; } .cv-pill-done { background: #15803d; color: #fff; font-weight: 700; box-shadow: 0 0 0 2px #dcfce7; } /* The one variable-length pill, so the one that gives. Floor is wide enough to still tell "Mine" from "Unassigned" from a person's first name. */ .cv-pill-owner { flex: 0 1 auto; min-width: 3.2rem; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; } /* The owner pill is outlined, the state pill filled — so at a glance the eye separates "whose" from "how urgent" without reading either. */ .cv-pill-owner-bot { background: #eef3fb; color: #2f5da8; box-shadow: inset 0 0 0 1px #cddcf3; } .cv-pill-owner-me { background: #effcf9; color: #00857a; box-shadow: inset 0 0 0 1px #a8e2d8; } .cv-pill-owner-unassigned { background: #fef2f2; color: #b91c1c; box-shadow: inset 0 0 0 1px #fecaca; } .cv-pill-owner-agent { background: #f1f5f6; color: #3d5a66; box-shadow: inset 0 0 0 1px #d7e0e3; } /* ⚠ `.sc-bot`'s solid-purple rule USED TO LIVE HERE and was dead — overridden ~1500 lines below, where the token version now is. Two rules for one pill, 1500 lines apart, is how the pane ended up purple while the list was blue without anyone editing either. Removed; the definition is with the other states. `.sc-history` stays: quieter than every bucket colour ON PURPOSE — this one is not work and should not compete with the four that are. */ .sc-history { background: #e5e7eb; color: #4b5563; } /* Dragging a pane to re-order the row. The header is the handle — see the component. `grab` only while it is actually draggable, so the phone (which passes no handler) does not advertise something it cannot do. */ .cv-head[draggable="true"] { cursor: grab; } .cv-head[draggable="true"]:active { cursor: grabbing; } /* The pane being dragged fades rather than disappears: it is still where it was until the drop lands, and hiding it would suggest the move already happened. */ .cv-pane:has(.cv-head.is-dragging) { opacity: .55; } /* Pin. Pressed means the pane survives the next row click. ⚠ GREY WHEN PINNED, and no frame — Johan, twice (2026-08-19 and again 2026-08-20): "do not use red with square if pinned. just use that icon but not red - use grey". The pinned emoji is red by default and a blue box round it made it louder still; pinning is a quiet housekeeping act, not a state worth an alert. The ICON changing is the signal. */ .cv-pin { padding: .3rem .4rem; line-height: 1; filter: grayscale(1); opacity: .55; } .cv-pin.is-on { filter: grayscale(1); opacity: 1; border-color: transparent; background: none; } .cv-btn { border: 1px solid #d1d5db; background: #fff; border-radius: .3rem; padding: .3rem .6rem; font-size: .78rem; cursor: pointer; min-height: 32px; } .cv-btn:disabled { opacity: .5; cursor: not-allowed; } .cv-btn-primary { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } .cv-btn-send { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } .cv-blocked { margin: 0; padding: .4rem .7rem; font-size: .74rem; background: #fef3c7; color: #92400e; border-bottom: 1px solid #fde68a; } .cv-blocked.cv-error { background: #fee2e2; color: #991b1b; border-bottom-color: #fecaca; } /* * ⛔ THE CHAT KEEPS 4cm — Johan, 2026-09-21: "always display at least the agent * input field area + 4cm or so of the end of the chat". Basis 0 and a 4cm floor, * so when the pane is tight it is the Agent work panel (.wt) that gives way, * never the last messages. The composer below is fixed height already. */ .cv-transcript { flex: 1 1 0; min-height: 4cm; overflow-y: auto; padding: .7rem; display: flex; flex-direction: column; gap: .35rem; } .cv-warn { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; border-radius: .3rem; padding: .4rem .6rem; font-size: .74rem; margin-bottom: .3rem; } .cv-day { align-self: center; font-size: .68rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin: .5rem 0 .2rem; } .cv-row { display: flex; } /* OUR side (agent AND bot) right, the shopper left — matching the shopper's own widget, and the division an agent actually reads the thread by. */ .cv-row-ours { justify-content: flex-end; } .cv-row-theirs { justify-content: flex-start; } /* * ⚠ BLOCK, not a column flex. The timestamp has to be able to sit at the END OF * THE LAST LINE of the message (Johan, 2026-08-19), and a float can only be * pulled onto a line box — in a column flex it is always its own row instead. */ .cv-bubble { max-width: 78%; border-radius: .5rem; padding: .35rem .55rem; font-size: .82rem; line-height: 1.4; display: block; } /* The float is the last thing in the box, so without this the box has no height of its own and the bubble collapses behind its own text. */ .cv-bubble::after { content: ''; display: block; clear: both; } .cv-from-shopper { background: #f3f4f6; color: #111827; } .cv-from-agent { background: #dbeafe; color: #0f172a; } .cv-from-bot { background: #ede9fe; color: #1f1235; } .cv-from-system { background: #f9fafb; color: #4b5563; } .cv-bubble.is-pending { opacity: .65; } .cv-bubble.is-failed { background: #fee2e2; color: #991b1b; } .cv-label { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; font-weight: 600; } /* INLINE so the timestamp after it lands on the same line box. `pre-wrap` still honours the message's own line breaks. */ .cv-text { display: inline; white-space: pre-wrap; word-break: break-word; } /* Trails the last line when there is room and drops below when there is not — which is what a float does, and why this is one. */ .cv-time { float: right; margin: .3rem 0 0 .7rem; font-size: .62rem; white-space: nowrap; /* Passes the bubble's background down to `.cv-peek`. NOT positioned: the peek anchors to the bubble, so it sits above it and not over its text. */ background: inherit; } /* * The fade sits on the CHILDREN, not on the span. Opacity is compositional, so * a faded parent caps everything inside it — and the language peek lives inside * this span and must not come up faded. */ .cv-time > :not(.cv-peek) { opacity: .55; } .cv-clock { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; } .cv-clock-flip { cursor: pointer; } /* * ⛔ THE OTHER LANGUAGE ON HOVER — Johan, 2026-09-17. The browser tooltip was * slow and only described the click; what the agent wants to see IS the other * rendering. It appears over the bubble in the bubble's own colours, so it * reads as "the same message, other language", and it is a peek: the flip * still exists for reading at length or copying. * * ⚠ ON THIS BUBBLE, NOT ABOVE IT — Johan, 2026-09-18. Floating above, it sat * in the gap between two bubbles and read as the translation of the one * ABOVE. So it lies over this bubble, covering it whole: the bubble's full * width and at least its full height, growing upward when the other text is * longer. A cut that stopped short of the code and the time "felt erratic" * (the width changed with the text), so it is always the whole bubble. * * ⚠ `pointer-events: none`, so the hover on the code and the time under it * survives the card appearing over them. * * ⚠ A short delay before it shows, so crossing the time on the way to * somewhere else does not flash a panel; none on the way out. */ .cv-bubble { position: relative; } .cv-peek { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; min-height: 100%; box-sizing: border-box; padding: .35rem .55rem; border-radius: .5rem; /* ⛔ Its own paint. `background` does not inherit by itself, and without this the bubble under it showed through (Johan, 2026-09-18). The value comes down from `.cv-time`, which inherits the bubble's. */ background: inherit; /* ⚠ A SHADE OFF THE BUBBLE — Johan, 2026-09-18: grown upward over the previous bubble from the same person, the same colour "will look strange". The text colour mixed into the bubble's own: a dark bubble turns lighter, a pale one darker, one rule for every palette row. */ background-image: linear-gradient( color-mix(in srgb, currentColor 14%, transparent), color-mix(in srgb, currentColor 14%, transparent) ); font-size: .82rem; line-height: 1.4; letter-spacing: normal; white-space: normal; text-align: left; border: 1px solid rgba(255,255,255,.35); outline: 1px solid rgba(0,0,0,.18); box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, visibility 0s linear .12s; } /* Which language this is — the code, as the marker writes it. */ .cv-peek-lang { display: block; margin-bottom: .1rem; font-size: .58rem; font-weight: 700; letter-spacing: .04em; opacity: .7; } .cv-time-peek:hover .cv-peek { opacity: 1; visibility: visible; transition-delay: .1s, .1s; } /* Say the pair is one control: hovering either underlines both. */ .cv-time-peek:hover .cv-lang, .cv-time-peek:hover .cv-clock-flip { text-decoration: underline; text-underline-offset: 2px; opacity: 1; } .cv-sending { font-style: italic; } .cv-failedmark { font-weight: 600; } /* * "Visitor chose this option" — the shopper tapped a button rather than typing. * * ⛔ ITS OWN LINE, INSIDE THE BUBBLE — Johan, 2026-09-01. Inline it ran straight * on from the message ("Chat with an agent*chose this option*"), which reads as * part of what the visitor said rather than as a note about HOW they said it. * The distinction is the whole reason the label exists: "Returns" typed and * "Returns" tapped mean different things about intent. * * ⚠ A BLOCK, and that is what puts the timestamp beside it rather than below. * `.cv-time` is a right float declared after this element, and a float may not * sit higher than the top of a block box earlier in the source — so it lands on * this line. (Do not make this a flex child of the bubble: the bubble is * deliberately `display: block` so the float can be pulled onto a line box at * all — see the note there.) */ .cv-chosen { display: block; margin-top: .15rem; font-size: .62rem; opacity: .6; font-style: italic; } /* * The language a message was actually written in, beside its time. * * ⛔ Replaced "• translated from SV" — Johan, 2026-08-26: "ugly and confusing". * It was both: a full italic phrase on nearly every bubble, and wrong on half * of them (an agent's own English marked "translated" in the English view). * * ⚠ Sits in the timestamp run and inherits its colour, so it is legible on the * blue and green bubbles as well as the grey ones — a fixed colour here would * have needed a variant per bubble type. */ .cv-lang { margin-right: .3rem; padding: 0 .15rem; border: 0; background: none; color: inherit; font: inherit; /* .58rem → .7rem, Johan 2026-09-17: "a larger EN" — it is a hover target now. */ font-weight: 700; font-size: .7rem; letter-spacing: .04em; cursor: pointer; border-radius: .18rem; } /* Beats the `.cv-time > :not(.cv-peek)` fade; the code is the brighter thing. */ .cv-time > .cv-lang { opacity: .85; } /* * ⛔ SAY IT IS CLICKABLE — Johan, 2026-08-26: "on mouse over show user it is * clickable". * * It has to be discoverable without being loud: it sits on every translated * bubble, so anything permanent would turn the timestamp run into a row of * buttons. Underline plus a faint wash on hover is enough to invite the click * and invisible until the pointer is on it. * * ⚠ currentColor throughout — this sits on the blue, green and grey bubbles * alike, and a fixed colour would be illegible on at least one of them. */ .cv-lang:hover, .cv-lang:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 2px; background: color-mix(in srgb, currentColor 14%, transparent); } .cv-lang:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; } /* Read-only: the shopper's buttons, shown so an agent knows what was offered. */ .cv-options { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .2rem; } .cv-option { font-size: .68rem; border: 1px dashed currentColor; opacity: .65; border-radius: 999px; padding: .05rem .4rem; } .cv-attach { display: flex; align-items: baseline; gap: .4rem; } .cv-attach-name { text-decoration: underline; } .cv-attach-size { font-size: .65rem; opacity: .6; } .cv-suggest-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: #6d28d9; font-weight: 600; } /* Events read as a line across the thread, not as someone speaking. */ .cv-event { align-self: center; display: flex; align-items: baseline; gap: .4rem; font-size: .7rem; color: #6b7280; background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 999px; padding: .1rem .6rem; } .cv-event-time { font-size: .62rem; opacity: .6; } .cv-composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: .4rem; padding: .5rem .6rem; border-top: 1px solid #e5e7eb; } /* * ⚠ TOP-aligned, against the composer's flex-end — Johan, 2026-08-25: "move the * template icon up to vertically top align with the top part of the write a * reply field". * * The reply box GROWS as you type (min 36px, max 8rem). Everything else in the * row is bottom-aligned, which is right for Send — it stays where the cursor * finishes. Templates is the opposite: you reach for it BEFORE writing, so it * belongs where the empty field starts, and it should not drift down the screen * as the message gets longer. */ .cv-tplwrap { align-self: flex-start; } /* * ⛔ THE ICONS LIVE IN THE REPLY BOX — Johan, 2026-09-21: beside the box they * took ~5rem of a 20rem pane. Side by side in the bottom-right corner, templates * then attach, and a little smaller, so the box keeps its one-line 36px height. * * ⚠ The template PICKER anchors to this wrap, not to its button (.cv-tplwrap is * static here): it opens left-aligned over the thread, as wide as before. */ .cv-inputwrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; } .cv-inputwrap .cv-input { flex: 1 1 auto; min-width: 0; padding-right: 3.1rem; } .cv-inputwrap .cv-tplwrap { position: static; } /* Wrapped: full-width text, the icons in a strip under it (ConversationPane, multiline). */ .cv-inputwrap.is-multi .cv-input { padding-right: .5rem; padding-bottom: 1.75rem; } .cv-inputwrap .cv-btn-tpl, .cv-inputwrap .cv-btn-attach { position: absolute; bottom: .2rem; width: 1.4rem; min-width: 0; min-height: 1.4rem; height: 1.4rem; padding: 0; font-size: .7rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .cv-inputwrap .cv-btn-attach { right: .2rem; } .cv-inputwrap .cv-btn-tpl { right: 1.65rem; } .cv-inputwrap .cv-btn-tpl svg { width: 13px; height: 13px; } /* The upload percentage ("100%") has to fit the icon's width while it counts. */ .cv-inputwrap .cv-btn-attach:disabled { font-size: .5rem; } /* * ⚠ SEND'S HEIGHT, EVEN WITH A LONG LABEL — Johan, 2026-09-21: "Translate & Send * SV" wrapped to two lines at full size and stood taller and wider than Send. * Smaller type and tight leading keep both lines inside Send's 32px. */ .cv-btn-send.is-long { max-width: 5.6rem; padding: .15rem .45rem; font-size: .66rem; line-height: 1.1; white-space: normal; } /* * The language row, above the reply box. * * ⚠ Quiet. It states a setting rather than asking for an action, and it sits * directly above the field an agent uses constantly — anything loud here would * compete with the conversation for the rest of the shift. */ .cv-langbar { display: flex; align-items: center; gap: .45rem; /* ⚠ Inside the reply box's border, not above it — Johan, 2026-08-26. The top border comes from .cv-composer below, so this row sits under the line and reads as part of the reply box it configures. */ padding: .4rem .6rem 0; border-top: 1px solid #e5e7eb; font-size: .68rem; color: #6b7280; } /* The composer follows immediately, so its own rule would double the line. */ .cv-langbar + .cv-composer { border-top: 0; padding-top: .35rem; } /* * "reading EN ⇄" — quiet until it disagrees with the write language. * * ⛔ The HIGHLIGHT is the whole mechanism (Johan, 2026-08-26). Reading a * different language than you write in is rare, so the control is secondary — * but the resulting state must never be silent, or the transcript appears in a * language nothing on screen explains. */ .cv-langread { margin-left: auto; border: 0; background: transparent; cursor: pointer; padding: .1rem .3rem; border-radius: .25rem; font: inherit; font-size: .66rem; color: #9ca3af; } .cv-langread:hover { color: #4b5563; background: #f3f4f6; } .cv-langread.is-on { color: #92400e; background: #fef3c7; font-weight: 600; } .cv-langbar-label { letter-spacing: .01em; } .cv-langpick { display: inline-flex; border: 1px solid #d1d5db; border-radius: .3rem; overflow: hidden; } .cv-langopt { border: 0; background: #fff; color: #6b7280; cursor: pointer; padding: .1rem .4rem; font: inherit; font-size: .68rem; font-weight: 600; letter-spacing: .03em; } .cv-langopt + .cv-langopt { border-left: 1px solid #e5e7eb; } /* * ⚠ THE CONSOLE'S "SELECTED", not a new colour — Johan, 2026-08-26: "perhaps * better to use black for selected, or dark grey - softer". * * It was #1d4ed8 blue, which is the SEND button's colour: the one thing on the * screen that means "this does something irreversible". A selected language is * a state, not an action. #1f2530 is what every view chip already uses for * is-on, so selection now looks the same wherever it happens. */ .cv-langopt.is-on { background: #1f2530; color: #fff; } .cv-langpreview { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; } .cv-langpreview input { margin: 0; } /* * The translation, below the reply field and full width — both texts visible at * once, rather than a modal over the conversation being replied to. */ /* * ⚠ flex: 0 0 auto — it was being SQUASHED. The pane is a flex column, so a * block with no flex basis is the first thing compressed when the transcript * wants room; the translation showed one clipped line. Johan, 2026-08-26: * "preview is not displayed properly". */ .cv-preview { flex: 0 0 auto; margin: .35rem .6rem .4rem; border: 1px solid #cfe0ff; border-radius: .4rem; background: #f6f9ff; overflow: hidden; } /* Only rendered when the translation is stale — see the component. */ .cv-preview-head { padding: .2rem .5rem; font-size: .64rem; font-weight: 600; color: #92400e; background: #fef3c7; border-bottom: 1px solid #fde68a; } /* The translation and the button that sends it, on one line. */ .cv-preview-row { display: flex; align-items: flex-end; gap: .4rem; padding: .3rem .4rem; } .cv-preview-row .cv-btn-send { flex: 0 0 auto; } /* ⚠ A real minimum. `rows={2}` is a hint the flex column was free to ignore, and did — the field collapsed to a sliver of its first line. */ .cv-preview-text { display: block; flex: 1 1 auto; min-width: 0; min-height: 2.6rem; border: 1px solid #cfe0ff; border-radius: .3rem; background: #fff; resize: vertical; padding: .35rem .5rem; font: inherit; font-size: .8rem; color: #111827; line-height: 1.35; } .cv-preview-text:focus { outline: 2px solid #bfd4ff; outline-offset: -2px; } /* * ⛔ GREYED BUT KEPT — Johan, 2026-08-25: editing the English must not destroy a * translation the agent may have spent time correcting. It stays legible and * editable; only the send is blocked, by the button turning back into * "Translate again". */ /* ⚠ Dimmed but LEGIBLE and still editable — the agent may have corrected this by hand, and greying it out must not read as "discarded". Only the send is blocked, by the button turning back into "Translate again". */ .cv-preview.is-stale .cv-preview-text { opacity: .6; } .cv-translate-error { flex: 0 0 auto; margin: .35rem .6rem .4rem; padding: .35rem .5rem; border: 1px solid #fecaca; border-radius: .4rem; background: #fef2f2; color: #991b1b; font-size: .72rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .cv-input { flex: 1 1 auto; resize: none; border: 1px solid #d1d5db; border-radius: .4rem; padding: .4rem .5rem; font: inherit; font-size: 16px; /* 16px stops iOS auto-zoom */ line-height: 1.3; max-height: 8rem; min-height: 36px; overflow-y: auto; } /* * ⚠ SMALLER ONLY WHERE THERE IS A MOUSE — Johan, 2026-08-23 asked for a smaller * font here, and the 16px above cannot simply be lowered: below 16px iOS zooms * the whole page when the field takes focus, and he is reading this on an * iPhone. `pointer: fine` is the precise test — a desktop mouse, not a screen * width, so an iPad on a wide layout keeps its 16px and does not zoom either. */ @media (pointer: fine) { .cv-input { font-size: .84rem; } } .cv-cantsend { margin: 0; font-size: .76rem; color: #92400e; } /* What a message on a Done chat with a courtesy follow-up turns into — Johan, 2026-09-16. */ .cv-mailhint { margin: 0 .6rem .25rem; font-size: .74rem; color: #1e40af; } .cv-actionpop-mailhint { font-size: .7rem; color: #6b7280; margin-top: .2rem; } .cv-vmenu-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9ca3af; margin-left: .3rem; } /* The face on the rating line stays upright — Johan, 2026-09-17: "the face should not be italic". */ .cv-event-face { font-style: normal; } /* ⚠ Above the composer, not inside it: it has to be read BEFORE typing, and amber because it is a warning about what will happen — not an error about something that already went wrong. */ .cv-unreachable { margin: 0; padding: .35rem .6rem; font-size: .74rem; background: #fef3c7; color: #92400e; border-top: 1px solid #fde68a; } /* Only ever shown when live updates are NOT working. */ .cv-stale { color: #b45309; font-size: .66rem; font-weight: 600; white-space: nowrap; } /* Transfer picker — under the header, where the Transfer button is. */ /* The anchor. The picker hangs off the Transfer link rather than sitting in the pane's flow, which is what stops it shoving the conversation down. */ .cv-transfer { position: relative; flex: 0 0 auto; } /* A link, not a button — Johan, 2026-08-19. It opens something rather than doing something, which is what a link is for, and it stops competing with the answering switch beside it for "the control on this row". */ .cv-link { border: 0; background: none; cursor: pointer; padding: .12rem .25rem; font-size: .7rem; font-weight: 600; color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; min-height: 22px; } .cv-link:hover { color: #1e40af; } .cv-link.is-on { color: #1e40af; text-decoration: none; background: #eff6ff; border-radius: .25rem; } .tf-panel { /* FLOATS. Reading the last few messages is exactly what an agent does while deciding who to hand to, so the panel must not take that away. */ position: absolute; top: calc(100% + .35rem); right: 0; z-index: 40; width: 17rem; max-height: 18rem; display: flex; flex-direction: column; border: 1px solid #d5dae2; border-radius: .45rem; background: #fff; box-shadow: 0 12px 28px -10px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .08); } /* On a phone the pane is the whole screen, so a 17rem panel pinned to the right edge can hang off it. Anchor to both edges instead. */ @media (max-width: 860px) { .tf-panel { left: 0; right: 0; width: auto; } } .tf-head { display: flex; gap: .3rem; padding: .45rem .55rem .3rem; } /* * ⚠ SMALLER — Johan, 2026-08-26: "use much smaller font for the find an agent". * It was 16px to stop iOS zooming a focused input, which made it the largest * text in a panel of 12px agent names — the search box shouted louder than the * list it searches. * * 16px is kept ONLY on coarse pointers, where the zoom actually happens. A * mouse never triggers it, so the console gets the size that fits. */ .tf-filter { flex: 1 1 auto; border: 1px solid #d1d5db; border-radius: .3rem; padding: .28rem .45rem; font: inherit; font-size: .78rem; } @media (pointer: coarse) { .tf-filter { font-size: 16px; } } /* * ⚠ A BIGGER TARGET — it is now the only VISIBLE way out (the Esc hint is * gone), and it was a 1.1rem glyph in a 0.3rem box. Click-outside still works * and is what most people use; this is for the ones who go looking. */ .tf-close { flex: 0 0 auto; border: none; background: none; cursor: pointer; font-size: 1.45rem; line-height: 1; color: #6b7280; width: 1.9rem; height: 1.9rem; border-radius: .3rem; display: inline-flex; align-items: center; justify-content: center; } .tf-close:hover { background: #f3f4f6; color: #374151; } .tf-list { overflow-y: auto; padding: 0 .4rem; } .tf-item { display: flex; align-items: baseline; gap: .5rem; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: .35rem .4rem; border-radius: .3rem; font-size: .82rem; color: #1f2937; } .tf-item:hover:not(:disabled) { background: #e0e7ff; } .tf-item:disabled { cursor: default; opacity: .7; } .tf-item.is-active { background: #eff6ff; } .tf-item.is-current { background: #f3f4f6; } .tf-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-you { color: #6b7280; font-size: .72rem; } .tf-avail { flex: 0 0 auto; font-size: .66rem; } /* Availability is the point of this list, so it carries the only colour — the presence scheme's, see `.ag-dot`. */ .tf-avail-focused { color: var(--presence-green); font-weight: 600; } .tf-avail-available { color: var(--presence-green); } .tf-avail-busy { color: var(--presence-red); } .tf-avail-offline { color: var(--presence-grey); } .tf-avail-unknown { color: #9ca3af; font-style: italic; } .tf-busy { flex: 0 0 auto; color: #6b7280; } .tf-msg { margin: .45rem .5rem; font-size: .78rem; color: #6b7280; } .tf-msg.tf-error { color: #b91c1c; } /* Attachments. Images preview inline; everything else is a labelled link. */ .cv-attach { display: flex; align-items: baseline; gap: .4rem; text-decoration: none; color: inherit; } a.cv-attach:hover .cv-attach-name { text-decoration: underline; } .cv-attach-name { font-size: .82rem; font-weight: 500; } .cv-attach-size { font-size: .68rem; opacity: .7; } .cv-attach-img { display: block; margin-bottom: .3rem; } .cv-attach-img img { display: block; max-width: 100%; max-height: 14rem; border-radius: .3rem; background: #fff; } .cv-file-input { display: none; } /* * ⚠ NO FRAME on either icon — Johan, 2026-08-21. They are glyphs, not buttons * that happen to hold a glyph, and a box round each one made the composer read * as three controls of equal weight when only Send is the act. The chrome comes * back on hover, which is where it is actually useful: it says "this is * pressable" at the moment you are about to press it. * * Send keeps its frame and its fill. It is the one thing down here that sends. */ .cv-btn-attach, .cv-btn-tpl { border-color: transparent; background: transparent; color: #6b7280; } .cv-btn-attach:hover:not(:disabled), .cv-btn-tpl:hover { background: #f3f4f6; color: #374151; } .cv-btn-attach { flex: 0 0 auto; min-width: 2.6rem; } /* ⚠ Mirrored to match the visitor's own widget — Johan, 2026-08-21. On the GLYPH, not the button: the upload percentage shares that element, and a mirrored "42%" is not a percentage. */ .cv-clip { display: inline-block; transform: scaleX(-1); } /* An icon, not the word "Templates" — the label cost more width than the reply box could spare, and on a three-pane layout that box is what an agent actually needs. The word lives on in the tooltip and the aria-label. */ .cv-btn-tpl { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; padding-left: .4rem; padding-right: .4rem; color: #4b5563; } /* Open: it is holding a panel over the thread, so it stays lit — a bare glyph would leave nothing saying where the popup came from. */ .cv-btn-tpl.is-on { background: #e0e7ff; border-color: #a5b4fc; color: #3730a3; } /* * ⚠ THE PICKER FLOATS, anchored to its button — Johan, 2026-08-21: "a popup * instead of pushing rest down". * * In the flow it shoved the conversation up by its own height, so the message * you were answering left the screen at the moment you went looking for words * to answer it with. Anchored here it covers the thread instead, exactly as the * Assign picker does. */ /* * THE GRIP — top centre, straddling the pane's own top edge so it reads as * belonging to the PANE rather than to the header's first row. * * ⚠ It is the ONLY thing that starts a drag. The header used to be draggable * whole, which turned every attempt to select the session id into a drag. */ .cv-grip { /* ON the top border, like the rail cards' section titles — Johan, 2026-09-15: "can the drag icon be placed on the top border of the ACI, kind of what we now do with the section titles". Half above, half below, on the page ground so the border breaks behind the dots. */ position: absolute; top: -.5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 1rem; z-index: 4; color: #94a3b8; cursor: grab; border-radius: .3rem; background: var(--bs-body-bg, var(--tblr-body-bg, #f2f2f7)); } .cv-grip:hover { color: #475569; background: #e2e8f0; } .cv-grip:active { cursor: grabbing; } .cv-tplwrap { position: relative; flex: 0 0 auto; } .cv-tplwrap .tpl-panel { position: absolute; bottom: calc(100% + .4rem); left: 0; /* Wider than the button it hangs off, and never wider than the pane — Johan, 2026-09-18: "display it wider and taller"; titles and two lines of text per row need the room. */ width: max(34rem, 100%); max-width: calc(100vw - 2rem); border: 1px solid #d1d5db; border-radius: .4rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .16); z-index: 30; } .tpl-panel { flex: 0 0 auto; display: flex; flex-direction: column; max-height: min(34rem, 70vh); border-top: 1px solid #e5e7eb; background: #f9fafb; } .tpl-head { display: flex; gap: .3rem; padding: .4rem .5rem .3rem; } .tpl-filter { flex: 1 1 auto; border: 1px solid #d1d5db; border-radius: .3rem; padding: .25rem .45rem; font: inherit; font-size: 16px; /* no iOS zoom */ } /* Johan, 2026-09-14: "Search for template", in italic. */ .tpl-filter::placeholder { font-style: italic; color: #9ca3af; } .tpl-close { flex: 0 0 auto; border: none; background: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: #6b7280; padding: 0 .3rem; } .tpl-list { overflow-y: auto; padding: 0 .35rem .35rem; } .tpl-group { margin-bottom: .3rem; } .tpl-cat { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; padding: .25rem .2rem .1rem; } .tpl-item { display: flex; align-items: flex-start; gap: .4rem; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: .3rem .35rem; border-radius: .3rem; font-size: .8rem; color: #1f2937; } .tpl-item.is-active { background: #e0e7ff; } .tpl-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .05rem; } .tpl-title { font-weight: 600; } /* Two lines of the text, then an ellipsis — enough to recognise it, not the whole answer. */ .tpl-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.3; } .tpl-title + .tpl-text { color: #4b5563; font-size: .74rem; } .tpl-lang { flex: 0 0 auto; font-size: .6rem; text-transform: uppercase; color: #6b7280; background: #e5e7eb; border-radius: 999px; padding: .05rem .3rem; } .tpl-msg { margin: .4rem .35rem; font-size: .76rem; color: #6b7280; } .tpl-msg.tpl-error { color: #b91c1c; } .tpl-foot { margin: 0; padding: .25rem .55rem .35rem; font-size: .62rem; color: #9ca3af; border-top: 1px solid #e5e7eb; } .cv-foot-note { margin: 0; padding: 0 .7rem .5rem; font-size: .68rem; color: #9ca3af; } .cv-empty { padding: 2rem 1rem; text-align: center; color: #6b7280; font-size: .85rem; } .cv-empty.cv-error { color: #b91c1c; } /* Phone: one pane at a time. The conversation replaces the list, and the back arrow appears — the platform's push/pop rather than a reimplementation. */ /* THE REFINEMENT BAR, under the state row. Compact and content-sized — Johan asked for the old console's capability "smooth and not too large", and eight equal-width boxes is what made the old one heavy. Wraps rather than scrolls: a filter that has scrolled out of sight is a filter the agent cannot see is on. */ /* Measured, not the window — see the comment in QueueFilters.tsx. */ .qf-shell { container-type: inline-size; } /* * How wide the filter bar runs at its comfortable size: the sum of the field * bases plus their gaps. The fields never GROW (`flex: 0 1 basis`), so the bar * stops here however wide the column gets, and shrinks below it when squeezed. * * Named because the empty-list message is centred on the BAR rather than on the * column — see `.queue-empty`. Keep the two in step: change a field's basis and * this moves with it. */ :root { --queue-bar-width: 53rem; } /* * ONE COLOUR PER STATE, for every surface that names it — Johan, 2026-08-24: * "make sure that design carries over to the related pills shown in session * list cards and in the ACIs". * * ⚠ They had DRIFTED. The same state carried three near-identical values * depending on where it was drawn — urgent was #c81e1e on the tab, #b91c1c on * the row and in the pane; important #b45309 against #92400e. Nobody sees two * of those side by side and calls it a bug, and that is exactly why it accretes * until the console stops looking like one thing. * * Three tokens each, because every surface needs the same three answers: * base the type, and the fill when something is SOLID * tint the quiet ground a descriptive pill sits on * edge the border that says "this is one of the four" * * Change a state's colour here and the tab, the row pill and the pane pill move * together — which is the only way they stay together. */ :root { --st-urgent: #c81e1e; --st-urgent-tint: #fdeaea; --st-urgent-edge: #f0b4b4; /* * ⚠ AMBER, AND IT CANNOT CARRY WHITE — Johan, 2026-08-24: "urgent and * important have too similar colours". * * He is right, and the cause is worth writing down because it will catch the * next person too. Every solid pill used ONE token for both the fill and the * type, with white on top — so the fill had to reach 4.5:1 against white. * Orange only gets that dark by going red (#d9480f) or brown (#b45309). * Optimising for the contrast rule walked the colour straight into red, and * then the two loudest buckets differed by nothing a glance can use. * * The way out is to stop insisting on white. Important fills with a real * amber and takes NEAR-BLACK type — 7.4:1, better than any of the white * pairs — while the ink token stays dark enough to read as small type on a * pale ground. Now the two differ by hue AND by which way round they are, * which no amount of squinting can merge. */ --st-important: #b45309; --st-important-tint: #fff7ea; --st-important-edge: #f5d9a6; /* * ⚠ DARK GREEN, not slate. Slate said "inactive"; Replied is the bucket * where things went RIGHT — we answered, nobody is waiting. Green says that * without a word, and it is the one bucket an agent should feel good about * sitting in. */ --st-replied: #15803d; --st-replied-tint: #ebf6ee; --st-replied-edge: #b6dcc2; --st-bot: #2f5da8; --st-bot-tint: #e8effa; --st-bot-edge: #cddcf3; --st-action: #6d28d9; --st-action-tint: #f3e8ff; --st-action-edge: #cfc0f0; /* * ⚠ A FIFTH AND SIXTH TOKEN: what a SOLID surface is filled with, and what * is written on it. Split from the base because the base has a second job — * small type on a pale ground — and one value cannot be both a legible ink * at 12px and a fill you can read white off. Chasing one requirement with a * single token is exactly how Important ended up red. * * Every pair is checked against WCAG AA for small text: * urgent #fff on #c81e1e 5.9:1 * important #42210a on #f59e0b 7.4:1 ← the odd one out, on purpose * replied #fff on #15803d 4.9:1 * bot #fff on #2f5da8 6.4:1 * action #fff on #6d28d9 8.6:1 * Add a state and check it here before using it. */ --st-urgent-fill: #c81e1e; --st-urgent-ink: #fff; /* ⚠ Darker than the amber above, and WHITE on it — Johan, 2026-09-14: "make the orange a bit darker so that we can use white text/number also there". #fff on #d97706 is 3.2:1, under AA for small text; the pills are bold, and a near-black ink on amber read as a different kind of thing from the other solid pills. */ --st-important-fill: #d97706; --st-important-ink: #fff; --st-replied-fill: #15803d; --st-replied-ink: #fff; --st-bot-fill: #2f5da8; --st-bot-ink: #fff; --st-action-fill: #6d28d9; --st-action-ink: #fff; /* * ⚠ A FOURTH TOKEN: the edge an EMPTY bucket keeps — Johan, 2026-08-24: * "still need to highlight, but less… but 0 so all good". * * An empty tab drops its tint and its coloured type, but not its identity: a * faint edge in its own colour still says WHICH slot is clear, so "Urgent * looks good" is read from the shape rather than from the word. */ --st-urgent-soft: #f6dcdc; --st-important-soft: #fae8c8; --st-replied-soft: #d3e9da; --st-bot-soft: #e3ebf7; --st-action-soft: #e4dbf8; } .qf { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .4rem 0 .1rem; } /* * ONE ROW UNTIL A THIRD OF THE ROOM IS GONE, then two. * * The fields are `0 1 basis`: they never grow past their comfortable width and * they shrink under pressure to a floor that still lets each one be read. * * comfortable ~53rem + Clear ~3.2 = ~56.2rem * floor ~33.7rem + gaps 2.4 + Clear = ~39.3rem * * ⚠ Both grew when channel and store moved in from the sidebar. That gives back * some of the 20% cut — the trade for those two never disappearing. * * ⚠ The threshold must clear the FLOOR WITH CLEAR SHOWING, not without it. With * `nowrap` an item that no longer fits overflows the container instead of * wrapping, and Clear appears exactly when filters are on — which is exactly * when the bar matters. 40rem is ~71% of comfortable and just above the floor, * so the row compresses all the way down and only then splits. */ /* * ⚠ ONE ROW, ALWAYS — Johan, 2026-08-23: "Filter should always fit on the main * row; make the visitor email field narrower if needed". * * It used to wrap below 40rem, which put Filter on a line of its own — a whole * row of chrome for one button, on the width where rows are scarcest. The * fields shrink instead, which is the right trade: a narrower email box is * still a usable email box, and Filter is the control that opens everything * else. * * Safe under `nowrap` because every field is `0 1 basis` with an explicit * `min-width`, so they compress rather than overflow; the floor below drops * that min-width further once the column is genuinely tight. */ .qf-shell:not(.is-range) .qf { flex-wrap: nowrap; } @container (max-width: 40rem) { .qf-shell:not(.is-range) .qf-field { min-width: 3rem; } } /* An explicit date range adds two date pickers — far more than the row can absorb. It wraps whatever the width, rather than crushing everything else. */ .qf-shell.is-range .qf { flex-wrap: wrap; } .qf-field { border: 1px solid #e5e7eb; border-radius: .3rem; background: #fff; padding: .25rem .4rem; font-size: .72rem; min-height: 28px; /* An explicit min-width is what lets these shrink at all: a flex item defaults to `min-width: auto`, which for a text input is its intrinsic size, and the row would push past its container rather than compress. */ flex: 0 1 7.2rem; min-width: 3.6rem; } .qf-field::placeholder { color: #9ca3af; } .qf-field:focus { outline: 2px solid #1d4ed8; outline-offset: -1px; } /* A set field must be visible as set at a glance — the whole failure mode of a filter bar is a stale filter nobody notices. */ .qf-field.is-set { border-color: #1d4ed8; background: #eff6ff; font-weight: 600; } /* Floors sized to what each control must still be able to SAY: a select has to show its longest option, an id needs a few characters to be recognisable. */ /* All 20% narrower than they were — Johan, 2026-08-19: the list column was reserving more width than the list needs, at the expense of the panes. The FLOORS came down with the bases: a floor left at its old value would simply stop the field shrinking and hand the saving back. */ .qf-range { flex-basis: 6.4rem; min-width: 5rem; } .qf-date { flex-basis: 6.8rem; min-width: 6rem; } .qf-id { flex-basis: 5.2rem; min-width: 3.4rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* Channel and store: the two shortest answers on the row, so the two narrowest fields. They earn their place by being ALWAYS present rather than by being large. */ .qf-where { flex-basis: 5.5rem; min-width: 4.2rem; } /* ⚠ GREY WHILE NOTHING IS CHOSEN, matching the text inputs beside it — Johan, 2026-08-21. A select whose first option is a label reads as a VALUE in normal ink, so "Actions (2)" looked like an active filter showing two results. In placeholder grey it reads as the prompt it is. */ .qf-action { flex-basis: 8.5rem; min-width: 7rem; } .qf-action.is-placeholder { color: #9ca3af; } /* * ⚠ VIOLET WHEN SET — Johan, 2026-08-24 named Agent Action as the fourth thing * the console is really about, alongside the three buckets. * * It was the quietest control on the bar: a grey select for the one axis that * means somebody has to DO something. Violet is that meaning everywhere else * here — the action pill, the pending-transfer mark, the owed stripe — so * carrying it when the filter is on costs nothing to learn. * * Only when SET. An always-violet select would be a filter shouting while it * narrows nothing, which is the habit these colours exist to avoid. */ .qf-action.is-set { border-color: #7c3aed; background: #f5f3ff; color: #5b21b6; font-weight: 600; } select.qf-field { flex-basis: 6.8rem; min-width: 5.5rem; } /* Never shrinks — it is the way out of a filtered state, and a squeezed "Clear" is the last thing that should become unreadable. Counted into the threshold above for exactly that reason. */ .qf-clear { flex: 0 0 auto; } .qf-dash { color: #9ca3af; font-size: .75rem; } .qf-clear { border: 0; background: none; color: #1d4ed8; font-size: .72rem; cursor: pointer; padding: .25rem .3rem; min-height: 28px; } .qf-clear:hover { text-decoration: underline; } /* ── The filter popup and its pills ──────────────────────────────────────── Only session id and shopper email stay on the bar; everything else lives in the popup, with the active ones shown as pills underneath. Same division jBKB list pages use — the fields you type to FIND something stay out, the ones that NARROW go behind a button. */ .qf-popwrap { position: relative; flex: 0 0 auto; } .qf-btn { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #d1d5db; background: #fff; border-radius: .3rem; font-size: .72rem; padding: .25rem .55rem; min-height: 28px; cursor: pointer; color: #374151; } .qf-btn:hover { border-color: #c7d2fe; } /* The clean-up controls, far right of the bar and supervisor-only. Set apart because they are not filters: one narrows AND arms the selection, the other is a mode. See the rightSlot comment in Queue.tsx. */ .qf-cleanup { display: inline-flex; align-items: center; gap: .3rem; margin-left: .3rem; } /* * The quiet sweep — it states a number and asks once, so it reads as a * sentence in the filter bar rather than as another filter chip. Amber while * open: a doubt to settle, not a failure (same reasoning as .cv-doubt). */ .qf-sweep { display: inline-flex; align-items: center; gap: .35rem; margin-left: .3rem; flex-wrap: wrap; } .qf-sweep.is-open { padding: .15rem .4rem; border: 1px solid #f0dcb8; border-radius: .35rem; background: #fdf1de; } .qf-sweep-count { font-size: .7rem; color: #78350f; font-weight: 600; } .qf-sweep-age { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; color: #78350f; } .qf-sweep-age select { font-size: .68rem; padding: 0 .15rem; } .qf-sweep-done { font-size: .68rem; color: #15803d; } .qf-sweep-error { font-size: .68rem; color: #b91c1c; } .qf-sweep-ask { font-size: .7rem; color: #78350f; } .qf-btn.is-set { border-color: #1d4ed8; background: #eff6ff; color: #1d4ed8; font-weight: 600; } .qf-btn-count { background: #1d4ed8; color: #fff; border-radius: 999px; font-size: .6rem; font-weight: 700; padding: 0 .3rem; min-width: 1rem; text-align: center; } .qf-pop { position: absolute; z-index: 30; top: calc(100% + .3rem); left: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: .4rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .5rem; min-width: 19rem; display: flex; flex-direction: column; gap: .35rem; } .qf-poprow { display: flex; align-items: center; gap: .45rem; } .qf-poprow .qf-field { flex: 1 1 auto; min-width: 0; } .qf-poplabel { flex: 0 0 5.6rem; font-size: .7rem; color: #6b7280; } .qf-poprow-dates .qf-field { flex: 1 1 0; } /* * ⚠ THE CHECKBOX ROW HAD NO STYLE AT ALL — Johan, 2026-08-23: "make 'was * involved' smaller font, a bit of space before the checkbox, and vertically * aligned with the checkbox". * * Every other row in this popup puts a 5.6rem label against a full-width field. * This one put a bare input and a full-size word straight after the label, so * it read as a different kind of control and sat off the baseline the rest of * the column establishes. * * The indent lines the checkbox up with the left edge of the fields above it, * so the popup reads as one column of answers rather than six rows and an * exception. */ .qf-poprow-check .qf-checkwrap { display: inline-flex; align-items: center; gap: .4rem; padding-left: .35rem; } .qf-poprow-check .qf-checkwrap input[type="checkbox"] { margin: 0; flex: 0 0 auto; } /* Same size and colour as the label opposite it — it is the other half of the same sentence ("Agent … was involved"), not a heavier thing beside it. */ .qf-poprow-check .qf-checkwrap > span { font-size: .7rem; color: #4b5563; line-height: 1; } /* The pills ARE the visible state of the popup — see FilterPill. */ .qf-pills { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem 0 0; } .qf-pill { display: inline-flex; align-items: center; gap: .25rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; font-size: .66rem; padding: .1rem .2rem .1rem .45rem; color: #1e40af; max-width: 16rem; } .qf-pill-label { color: #60a5fa; } .qf-pill-value { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qf-pill-x { border: 0; background: none; cursor: pointer; color: #60a5fa; font-size: .85rem; line-height: 1; padding: 0 .2rem; } .qf-pill-x:hover { color: #1e40af; } /* ── Paging, in jBKB's shape ─────────────────────────────────────────────── Same order and wording as the list pages there: Records · Rows per page · Page X of Y · « ‹ › ». Right-aligned under the list, where you arrive after scrolling to the end. */ .qp { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: .45rem .2rem .1rem; font-size: .72rem; color: #6b7280; flex-wrap: wrap; } .qp-num { color: #111827; font-variant-numeric: tabular-nums; } .qp-size { display: flex; align-items: center; gap: .35rem; } .qp-size select { border: 1px solid #d1d5db; border-radius: .3rem; background: #fff; font: inherit; font-size: .72rem; padding: .15rem .3rem; min-height: 26px; } .qp-page { display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; } /* A quiet spinner rather than a moving number — the page label must not jump while a fetch is in flight. */ .qp-busy { width: .6rem; height: .6rem; border-radius: 50%; border: 2px solid #bfdbfe; border-top-color: #1d4ed8; animation: qp-spin .7s linear infinite; } @keyframes qp-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .qp-busy { animation: none; } } .qp-nav { display: inline-flex; gap: .25rem; } .qp-btn { border: 1px solid #d1d5db; background: #fff; border-radius: .3rem; min-width: 26px; min-height: 26px; cursor: pointer; font: inherit; font-size: .78rem; color: #374151; line-height: 1; } .qp-btn:hover:not(:disabled) { border-color: #c7d2fe; background: #f8faff; } .qp-btn:disabled { opacity: .4; cursor: not-allowed; } /* ⛔ THE BUTTON GETS ITS OWN LINE — Johan, 2026-08-25: "move clear filters to next row". Inline it sat mid-sentence, so the way out only appeared after reading the explanation. A column centres both and puts the action under the reason, which is the order they are used in. */ .queue-empty-why { font-size: .78rem; color: #6b7280; margin-top: .3rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; } /* "All" is a real choice with a real number, so it reads like the other tabs rather than like an empty one — Johan, 2026-08-20: "should display the number of sessions and also not be faded". */ .queue-tab-all { color: #374151; } .queue-tab-all .queue-tabcount { color: #374151; } /* The lookups sit apart from the state pills — they are not work. */ .queue-tab-lookup { font-style: normal; padding-left: .45rem; padding-right: .45rem; } .queue-tab-ico { width: .95rem; height: .95rem; display: block; } /* THE PHONE'S TAB STRIP. Rendered only on a phone (React decides, not CSS — see useIsPhone), so it needs no desktop rules beyond not existing there. */ .cv-tabs { display: flex; gap: .25rem; overflow-x: auto; padding: .35rem .5rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 2; /* Snapping keeps a half-scrolled tab from being the thing under the thumb. */ scroll-snap-type: x proximity; } .cv-tab { scroll-snap-align: start; display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; max-width: 9rem; min-height: 34px; /* a thumb target, not a mouse target */ border: 1px solid #e5e7eb; background: #fff; border-radius: .3rem; padding: .25rem .5rem; font-size: .75rem; cursor: pointer; } .cv-tab.is-on { border-color: #1d4ed8; background: #eff6ff; font-weight: 600; } /* Set apart from the conversations — it is a different KIND of destination, and it should not read as one more chat in the row. */ .cv-tab-queue { background: #f3f4f6; color: #374151; margin-right: .3rem; } .cv-tab-queue.is-on { background: #eff6ff; } .cv-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cv-tab-dot { width: .45rem; height: .45rem; border-radius: 50%; flex: 0 0 auto; /* Inherits the bucket colour from .sc-*, whose padding would distort it. */ padding: 0; } @media (max-width: 860px) { /* * ⚠ FLEX, so the tab strip can be ordered FIRST — Johan, 2026-08-21: "after * clicking Back the session list opens, but there is no icon to go back to * the ACI". * * It was there all along, and unreachable: the strip is rendered after the * queue page in the DOM, so with the list showing it sat BELOW the whole * list, off the bottom of the screen. Sticky could not save it — an element * only sticks once you have scrolled to it. */ .queue-shell { display: flex; flex-direction: column; } /* * ⚠ `flex: 0 0 auto` — Johan, 2026-08-23: "this happens sometimes, height of * the open ACI buttons too little", with the tab row sliced in half. * * The shell became a fixed-height flex column when the transcript was made to * scroll inside the pane (6d0e5d8). Flex children shrink by default, so once * the conversation was tall enough to want more room the strip gave up its * own height to it and the tabs were clipped. "Sometimes" was "whenever the * content is tall" — which is most conversations. * * It is navigation: it is the only way back to the other conversations, so it * is the one thing here that must never be squeezed. */ .cv-tabs { order: -1; flex: 0 0 auto; } .queue-shell.has-open .queue-page { display: none; } /* * ⚠ NOT edge-to-edge — Johan: "give it some left buffer, even horizontally * centre it". Bubbles starting hard against the window edge read as a * rendering fault, and on a wide-ish phone the full width makes lines too * long to scan comfortably. */ /* * ⚠ THE PANE OWNS THE SCREEN AND THE TRANSCRIPT SCROLLS INSIDE IT — Johan, * 2026-08-21: "when scrolling in chat should I not still see the header? thus * truly scroll in the chat". * * It was `min-height: calc(100vh - 6rem)` with no maximum, so the pane simply * grew to the length of the conversation and the PAGE scrolled. That takes * the header, the owner, Done/Assign and the reply box off the top and bottom * of the screen — everything you need while reading disappears exactly when * you start reading. * * Bounding the shell instead makes `.cv-transcript`'s own `overflow-y: auto` * do the work it was always written to do, so the header and composer stay * put and only the messages move. * * ⚠ `dvh`, not `vh`. Chrome on iOS puts its address bar at the BOTTOM and * collapses it as you scroll; `vh` is the LARGEST viewport, so the composer * would sit behind that bar until you scrolled. `dvh` tracks the real height. * Johan is using Chrome on an iPhone, which is exactly the case `vh` gets * wrong. */ .queue-shell { min-height: 0; } /* ⚠ NOTHING may push the page wider than the screen. A single over-wide child scrolls the whole document sideways, and then every row, every chip and the first view button are all clipped at once — which is what Johan photographed on 2026-08-21. Belt and braces: let the tab row wrap, and let the list column go as narrow as it has to. */ .queue-shell, .queue-page, .queue-body { max-width: 100%; min-width: 0; } /* ⚠ AND drop the fixed basis with it — a 36rem basis that cannot shrink is exactly the over-wide child this block exists to prevent. */ .queue-main-col { min-width: 0; flex: 1 1 auto; } .queue-tabs { flex-wrap: wrap; row-gap: .3rem; } /* Recent and History travel together — see the comment at their JSX. `nowrap` here, not on `.queue-tabs`, so the row can still break under real pressure without ever orphaning History on a line of its own. */ .queue-lookups { display: inline-flex; flex-wrap: nowrap; /* ⚠ BETWEEN the two, not before the pair — Johan, 2026-08-25: "add a bit of space between Recent and History". They are separate destinations, not two halves of one control, and at .3rem they read as a segmented toggle. */ gap: .3rem; } .queue-tabs-push { flex-basis: 100%; height: 0; } .cv-stack { max-width: 34rem; margin-left: auto; margin-right: auto; padding: 0 .5rem .5rem; width: 100%; flex: 1 1 auto; min-height: 0; } .cv-panes { min-height: 0; } .cv-pane { position: static; height: 100%; max-height: none; min-height: 0; border: 1px solid #e5e7eb; border-radius: .4rem; overflow: hidden; } /* The list scrolls in its own right, for the same reason. */ .queue-shell .queue-page { min-height: 0; overflow-y: auto; } .cv-back { display: block; } /* * ⚠ NO GRIP ON A PHONE, and it was actively broken here. `.cv-pane` goes * `position: static` in this layout, so the absolutely-positioned grip lost * its containing block and climbed the tree — it rendered as six dots at the * top of the blue navbar, which is what Johan photographed. * * It has nothing to do anyway: one conversation is on screen at a time, so * there is no order to drag it into. */ .cv-grip { display: none; } .cv-bubble { max-width: 88%; } } /* * WHERE THE CONVERSATION IS UP TO — one pill, four values, always present. * Replaces `.queue-closed`, which appeared only for a finished session and so * had to be noticed before it could be read. * * ⚠ Sentence case like the bucket pills beside it (Johan, 2026-08-23) and QUIET * in every state. None of these is work: they say how the person can be * reached, which the agent needs when deciding what to write, not whether to * write at all. * * The two end states share a look, so the WORD is what distinguishes them — * "over" is the fact; which kind is the detail. */ /* * ⛔ TEXT, NOT A FILLED PILL — Johan, 2026-08-26: "just use the text 'online' in * green... and perhaps even offline in faded grey". * * It appears on every row, so a filled chip four times over made presence * compete with the bucket pill that says what to DO about the session. As plain * words it is read when looked for and ignored otherwise, which is the right * weight for a fact that changes nothing on its own. * * ⚠ ONLY "online" carries colour. Green means somebody is there — the same * meaning it has on the agent dots in the sidebar, which is exactly why the * green DOT that used to sit here had to go: it made green mean two subjects. * The three ended states are all "nobody is there" and differ only in how, so * the WORD distinguishes them and the tone does not have to. */ .qr-visitor { flex: 0 0 auto; font-size: .66rem; font-weight: 600; padding: .05rem .1rem; letter-spacing: .01em; } .qr-visitor-online { color: #15803d; } .qr-visitor-offline, .qr-visitor-closed, .qr-visitor-expired { color: #9ca3af; font-weight: 500; } /* "Load earlier messages" — offered, not just announced. The endpoint pages at 50, and a note saying the thread was incomplete gave the agent no way to complete it. */ .cv-older { display: flex; justify-content: center; padding: .3rem 0 .5rem; } .cv-older-btn { border: 1px solid #d1d5db; background: #fff; border-radius: 999px; padding: .2rem .7rem; font-size: .72rem; color: #374151; cursor: pointer; } .cv-older-btn:hover:not(:disabled) { background: #f3f4f6; } .cv-older-btn:disabled { opacity: .6; cursor: default; } /* Agent note — internal, never seen by the shopper. Sits under the header so it is read before the conversation, which is when it is useful. */ .cv-note-open { display: block; width: 100%; text-align: left; cursor: pointer; border: none; border-bottom: 1px solid #e5e7eb; background: #fffbeb; padding: .3rem .6rem; font-size: .76rem; color: #78350f; } .cv-note-open:hover { background: #fef3c7; } .cv-note-open:not(.has-note) { background: transparent; color: #9ca3af; } .cv-note-open:not(.has-note):hover { background: #f9fafb; } .cv-note-tag { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; background: #fde68a; color: #78350f; border-radius: 999px; padding: .05rem .35rem; margin-right: .3rem; } .cv-note-add { font-size: .72rem; } .cv-note-edit { border-bottom: 1px solid #e5e7eb; background: #fffbeb; padding: .4rem .6rem; } .cv-note-input { width: 100%; resize: vertical; border: 1px solid #fcd34d; border-radius: .3rem; padding: .3rem .4rem; font: inherit; /* ⚠ 16px IS LOAD-BEARING ON TOUCH: iOS Safari zooms the whole page when a focused field is smaller, and the zoom does not undo itself. Kept as the default so a phone never gets the smaller size by accident. */ font-size: 16px; background: #fff; } /* * ⛔ SMALLER ON A REAL POINTER — Johan, 2026-08-25: "display the note text in * smaller font (when opening)". 16px in a pane whose every other control is * .74rem made the note look like a different application. * * `pointer: fine` is the guard: a mouse cannot trigger the iOS zoom, so the * only devices that keep 16px are the ones that need it. */ @media (pointer: fine) { .cv-note-input { font-size: .78rem; } } .cv-note-actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; margin-top: .3rem; } /* Clear sits alone at the left, away from Save. */ /* Up against the box it empties — Johan, 2026-09-21 — not centred on the taller buttons. */ .cv-note-clear { margin-right: auto; font-size: .72rem; align-self: flex-start; margin-top: -.15rem; } .cv-note-clear:disabled { opacity: .4; cursor: default; } .cv-note-error { flex: 1 1 auto; font-size: .7rem; color: #b91c1c; } .cv-note-cancel, .cv-note-save { border: 1px solid #d1d5db; background: #fff; border-radius: .3rem; padding: .2rem .5rem; font-size: .72rem; cursor: pointer; color: #374151; } .cv-note-save:not(:disabled) { background: #78350f; border-color: #78350f; color: #fff; } .cv-note-cancel:disabled, .cv-note-save:disabled { opacity: .6; cursor: default; } /* The handover reason — WHY the bot passed this over. Distinct from the amber transfer flag: that says a handover happened, this says what for. */ /* The handover reason, exactly as jBKE authored it — "InfoRequest", not "INFOREQUEST". It is one of five fixed values and the camel case is part of how it is recognised. */ .queue-reason { font-size: .64rem; letter-spacing: .01em; background: #ede9fe; color: #5b21b6; border-radius: 999px; padding: .05rem .4rem; } /* --- Queue: views sidebar + tabs ------------------------------------------ Shape from how real agent consoles work (Intercom Inbox, Front, Zendesk, Help Scout, Gmail): views on the left, a filter strip above the list. Colour from jBKB, which reserves BLUE for actions and uses near-black for selection. A blue selected row and a blue "Send" button teach two different meanings for one colour, and the one that loses is the button. */ .queue-body { display: flex; gap: 1rem; align-items: flex-start; } /* Narrower, and everything left-justified. The counts used to be pushed to the right edge, which set the width from the longest label plus a gap — space the list needs more. Left-justified they sit next to the name and the whole rail costs ~20% less. */ /* * ⚠ FIXED, AND IT MUST STAY FIXED — Johan, 2026-08-23: "the who select column * should NOT get wider if the agent name is long". * * It did, despite the `0 0` basis: a flex item defaults to `min-width: auto`, * so "Agent 1 AllSolutions" pushed the whole rail out and the list jumped * sideways every time the selection changed. `min-width: 0` is what actually * pins it; the basis alone never could. * * ⚠ 12rem, up from 10.5 — Johan: "I think we can make the column a bit wider * as it's fixed width". `LAYOUT.sidebar` in paneFit.ts MUST match: it reserves * this width when deciding how many conversation panes fit, and a rail wider * than the arithmetic believes is exactly how a pane ends up on top of the * session list. */ .queue-views { /* 11rem, was 12 — Johan, 2026-09-15: a rem for the state row; the cards are a word and a count. paneFit.ts LAYOUT.sidebar MUST match. */ flex: 0 0 11rem; min-width: 0; display: flex; flex-direction: column; gap: .7rem; } .queue-viewgroup { display: flex; flex-direction: column; gap: .2rem; /* A card, so the sidebar reads as a panel rather than as text floating on the page ground. */ background: #fff; border: 1px solid #dfe3e8; border-radius: .5rem; padding: .35rem; } .queue-viewlabel { font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; color: #98a2ad; font-weight: 600; padding: .25rem .45rem .1rem; } /* * ⚠ FLEX, NOT GRID. The breakdown pills sit on their own line spanning the * whole card, and as a grid item spanning both columns their ~124px minimum was * distributed BACK into the two columns above — so the name column was sized by * the pill row beneath it and "Unassigned" rendered as "U…". * * As flex items nothing shares a track: the name and count size themselves, and * the breakdown is forced onto its own line by a 100% basis instead of by * spanning anything. */ .queue-view { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; width: 100%; text-align: left; /* A visible border on EVERY option, not just the select — otherwise only "Another agent" looked like something you could choose, and the rest read as labels. */ border: 1px solid #dde2e8; /* ⚠ The SAME shade as the agent select's field (#f7f9fb), not white — Johan, 2026-08-19. White made the unselected options read as the page ground with a line drawn round them, while the one control that was obviously choosable was the shaded select. Sharing its fill makes the whole rail read as one set of things you pick from. */ background: #f7f9fb; border-radius: .35rem; padding: .38rem .5rem; cursor: pointer; font: inherit; font-size: .82rem; color: #313a45; } .queue-view:hover { background: #e9eef3; border-color: #97a3b1; } /* SELECTION IS NEAR-BLACK, not blue. Blue belongs to action buttons. */ .queue-view.is-on { background: #1c2530; border-color: #1c2530; color: #fff; font-weight: 600; } /* Shrinks only when the name genuinely does not fit — not because something below it wanted room. ⚠ The max-width keeps the count ON THE SAME LINE. Flex decides line breaks from an item's natural size BEFORE shrinking it, so a long agent name — and they get long, "Agent 1 AllSolutions" — would otherwise claim the whole line and drop the count beneath it. Bounding the name means the pair always fits together and the name truncates instead. */ .queue-viewname { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 2.4rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * RIGHT-JUSTIFIED and heavier — Johan, 2026-08-19. (Supersedes an earlier call * to keep it tucked beside the name.) The number is what the rail is SCANNED * for: the names are fixed and learned within a day, the counts are the only * thing that changes. Aligned down a column they can be compared at a glance; * beside a ragged name they cannot. */ .queue-viewcount { flex: 0 0 auto; margin-left: auto; font-variant-numeric: tabular-nums; font-size: .92rem; font-weight: 700; color: #4b5563; } .queue-view.is-on .queue-viewcount { color: rgba(255,255,255,.82); } /* Its own line, by basis rather than by spanning columns — that is the whole point of the change above. */ .queue-view .queue-breakdown { flex: 0 0 100%; margin-top: .15rem; } /* The view cards carry the action pill on the name row (Johan, 2026-09-16), so their breakdown is the three states only. */ /* ⛔ FIXED POSITIONS — Johan, 2026-09-16: "use fixed horizontal positions for all the sub pills". Equal thirds on every card, whatever each card holds, so On, Owed and Rep sit at the same x down the rail; an absent pill leaves its slot empty. Every pill is .6rem now, so a third of the narrowest rail still holds "Owed 13" — the max-content floor that let columns drift is gone here. */ /* ⛔ FIXED SLOT WIDTHS, sized to the widest pill each slot can hold ("On 1/1", "Ow 14", "R 6", "1 A"), so no pill ever spills into the gap after it — Johan, 2026-09-16, twice: "missing space between sub pills". Equal thirds let the widest pill overflow its column on a narrow rail; these do not. */ .queue-breakdown.is-compact { grid-template-columns: 2.55rem 2.25rem 1.7rem minmax(0, 1fr); gap: .3rem; } .queue-breakdown.is-compact .sc { white-space: nowrap; padding-left: .2rem; padding-right: .2rem; } .queue-breakdown.is-compact .sc-tag { margin-right: .14em; } .queue-breakdown.is-compact .sc-slot-action { justify-content: flex-start; } /* Sub-rows sit INSIDE a chosen group, so they are quieter — a border on every nested row would turn the sidebar into a grid of boxes. */ .queue-view-sub { font-size: .78rem; padding-left: 1rem; color: #4b5563; border-color: transparent; background: transparent; } .queue-view-sub:hover { background: #e9eef3; border-color: #dde2e8; } .queue-agentlist { display: flex; flex-direction: column; gap: .1rem; } /* The agent picker is a SELECT and has to look like one. With every view row now bordered, a bordered row with a small chevron was not enough to say "choose one of these". So it gets the full field treatment jBKB uses for its own filters: a label above, a shaded field, and the caret in its own segment at the end. */ /* ⚠ THE SAME CARD AS "MINE" — Johan, 2026-08-21: "put the same frame and background colour around the Agent + select an agent area as for Mine". It was a bare label and a field floating on the group's ground, so the one row holding the most sessions read as a form control rather than as a peer of the owners above it. Same border, same fill, same radius, same padding. */ /* ⚠ SET APART from Mine and Unassigned — Johan, 2026-08-23: "increase the space before that button to keep it separate". Those two are owners; this is the scope that CONTAINS them, so the gap is doing real work — it says the card below is a different kind of thing, not a third owner. Only in the rail: in strip mode the whole row is one line and a margin here would just knock the chip out of alignment. */ .queue-views:not(.is-strip) .queue-selectwrap { margin-top: .6rem; } /* The CBVA picker. A SCOPE rather than a view, so it sits apart from the cards and looks like a form control rather than a bucket. */ /* ⚠ A CENTIMETRE clear of Active Auto — Johan, 2026-08-23. The rail's own gap is .7rem, so this adds the rest: enough that the picker reads as a different KIND of control rather than a sixth view card. */ .queue-views:not(.is-strip) .queue-solgroup { margin-top: 1.7rem; } .queue-solgroup { gap: .3rem; } .queue-sollabel { font-size: .7rem; color: #6b7280; padding: 0 .1rem; } .queue-solselect { width: 100%; min-width: 0; font: inherit; font-size: .78rem; border: 1px solid #c3ccd6; border-radius: .35rem; background: #f7f9fb; padding: .3rem .4rem; color: #313a45; cursor: pointer; } .queue-solselect:hover { border-color: #97a3b1; background: #fff; } /* ⚠ Sideways with the rest of the rail — it is one more chip there, and the label would cost a line the strip does not have. */ .queue-views.is-strip .queue-solgroup { flex-direction: row; align-items: center; } .queue-views.is-strip .queue-sollabel { display: none; } .queue-views.is-strip .queue-solselect { width: auto; max-width: 10rem; padding: .15rem .4rem; font-size: .72rem; border-radius: 999px; background: #fff; border-color: #e5e7eb; min-height: 26px; } /* * ⛔ NO HORIZONTAL PADDING — Johan, 2026-09-01: "the urgency pills are not * horizontally positioned same for all who selectors". * * It was DOUBLE-PADDED and the arithmetic says so. Mine and Unassigned are * `.queue-view` directly inside the group, so their pills start at * group .35rem + border 1px + view .5rem = 14.6px. All Agents is a * `.queue-selectlabel` inside THIS wrapper, so it was * group .35rem + border 1px + wrap .5rem + label .5rem = 22.6px — eight pixels * out, on the card holding the most sessions. * * ⚠ The horizontal inset moves to the CHILDREN rather than being removed. The * label already carries .5rem of its own (it needs it: its background is the * selected state), and the field gets the same by margin. So nothing moves on * screen except the pills, which was the point — and the label's dark bar now * spans the card properly instead of floating inset within it. * * ⚠ Do not put it back. This is the third pass over this exact alignment: the * pills were pushed right (2026-08-20), then had their left inset zeroed and * restored (2026-08-26), and both times the fix was applied to the label while * the wrapper underneath went on adding its own. */ .queue-selectwrap { display: flex; flex-direction: column; gap: .15rem; border: 1px solid #dde2e8; background: #f7f9fb; border-radius: .35rem; padding: .38rem 0; } /* The inset the wrapper no longer supplies — so the field stays exactly where it was while the label above it moves into column with the other cards. */ .queue-selectwrap .queue-select { margin: 0 .5rem; width: auto; } /* * The label row already had its own padding for the floating version. * * ⛔ BUT NOT HORIZONTALLY — Johan, 2026-08-26: "need a bit more padding left of * the 3 Urg sub pill". This override zeroed the left inset the base rule gives * it, so the breakdown started hard against the card edge — and, worse, in a * different column from the sub-pills on Mine and Unassigned, which is exactly * what the note below says must not happen. */ .queue-selectwrap .queue-selectlabel { padding: .38rem .5rem .25rem; } /* Same type as Unassigned and Mine, because it names the same kind of thing: whose work you are looking at. As a .56rem uppercase caption it read as a form label for the field below, not as a third option. */ /* ⚠ A BUTTON now, not a caption — it selects the all-agent-based scope. See the markup. Full width and left-aligned so it reads as the card's own title rather than as a control floating above the field. */ .queue-selectlabel { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .38rem .5rem .2rem; color: #313a45; width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; border-radius: .3rem; } .queue-selectlabel:hover { background: #eef2f6; } /* Selected: the same near-black the other view cards use, so "which scope am I in" reads the same way everywhere in the rail. */ .queue-selectlabel.is-on { background: #1f2530; color: #fff; } /* * ⛔ THE TOTAL TOO — Johan, 2026-08-26: "all agents total number should be * white". `color: #fff` above sets the card's own text, but the count carries * its own colour, so on the dark selected card it stayed near-black and was * effectively invisible. * * ⚠ The equivalent rule exists for `.queue-view.is-on .queue-viewcount` and was * never written for this one — the All Agents header is a `.queue-selectlabel`, * not a `.queue-view`, so it inherited none of that card's selected treatment. */ .queue-selectlabel.is-on .queue-viewcount { color: rgba(255,255,255,.82); } /* * ⛔ THE PILL KEEPS ITS OWN FILL ON A SELECTED CARD — Johan, 2026-08-24: * "cannot read on All Agents the sub pills". * * This used to force a near-white plate under them, and that was RIGHT while * `.sc-*` meant "coloured type on a pale wash": the white plate gave the * coloured glyphs something to sit on when the card went near-black. * * Then `.sc-*` became a solid fill with white type (2026-08-24, so the pane and * list pills would match the tabs) — and this rule survived, repainting the * ground white while the white text stayed. White on white. Important was the * only readable one, purely because amber's ink is near-black. * * ⚠ `.sc-*` IS SHARED between the pane's state pill and these sidebar * sub-counts. Changing it in one place changes both, and only one of them has a * dark ground. That is what made this invisible instead of merely wrong. * * A hairline separates the fill from the near-black card — green in particular * sits close to it — and nothing else is imposed. */ .queue-selectlabel.is-on .sc { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } /* ⚠ SAME PLACE AS EVERY OTHER CARD — Johan, 2026-08-20: "the sub pills should have the same horizontal position in all the who cards... only Agent must be fixed". They sit on their OWN LINE, left-aligned, exactly as `.queue-view .queue-breakdown` does. Pushing them right instead put the Agent card's numbers in a different column from the three above it, so the one thing the breakdown is for — reading a column DOWN the sidebar — did not work on the row holding the most sessions. */ .queue-selectlabel .queue-breakdown { flex: 0 0 100%; margin-top: .15rem; } /* ⚠ `min-width: 0` on both the field and its value, or the name refuses to shrink and widens the rail instead of ellipsing — see .queue-views. */ .queue-select { min-width: 0; display: flex; align-items: stretch; width: 100%; border: 1px solid #c3ccd6; border-radius: .35rem; background: #f7f9fb; cursor: pointer; font: inherit; font-size: .8rem; color: #313a45; overflow: hidden; min-height: 2rem; } .queue-select:hover { border-color: #97a3b1; background: #fff; } /* An ECHO of the card above, not a second selection — see the markup. Reads as "yes, that one", quietly, instead of competing with the card that already said it. */ .queue-select.is-echo { background: #eef2f6; border-color: #c3ccd6; color: #313a45; font-weight: 600; } /* ⚠ TRIMMED, not wrapped — Johan chose cut-off over two rows, the same call he made for the owner name in the pane header. The full name is on the button's title, so nothing is lost. */ .queue-selectvalue { flex: 1 1 auto; min-width: 0; text-align: left; padding: .35rem .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Its own segment, with a divider — the detail that reads as "select" rather than "button with an arrow". */ /* ⚠ Sized to be SEEN. At .8rem the glyph was a speck, and the caret is the one mark that says "this opens" — the rest of the field looks like a label. */ .queue-selectcaret { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 1.9rem; border-left: 1px solid #c3ccd6; background: #eef2f6; color: #3d4854; font-size: 1.15rem; line-height: 1; } .queue-select.is-on { border-color: #1c2530; background: #1c2530; color: #fff; font-weight: 600; } .queue-select.is-on .queue-selectcaret { border-left-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff; } /* The open list sits under the field as its options. */ /* * ⛔ THE SAME TREATMENT AS THE SESSION LIST — Johan, 2026-08-26: "in select * agent list need clearer separations between the agents". * * Identical cause: `.queue-view-sub` is transparent with a transparent border, * sitting on a white panel 1.6px apart, so two-line entries — a name and its * breakdown pills — ran into each other. Ground the panel, make the rows white. * * ⚠ Deliberately the same answer as the session cards rather than a different * one (dividers, striping): two lists that separate their rows by different * means is a second visual language to learn for no gain. */ .queue-agentlist { display: flex; flex-direction: column; gap: .22rem; border: 1px solid #dde2e8; border-top: none; border-radius: 0 0 .35rem .35rem; padding: .25rem; background: #f4f6f9; } /* White ON the ground, like a session card. Hover still overrides both. */ .queue-agentlist .queue-view-sub { padding-left: .5rem; background: #fff; border-color: #e8ecf1; } /* Tabs above the list. Meaning colours on the label and the underline, as in the sidebar pills — the same vocabulary in both places. */ /* ⚠ A FLOOR, where there was none. With `min-width: 0` the list could be squeezed to nothing by three open panes — present, scrollable, and unusable. 20rem still shows the wait, the shopper and the state on every row. */ /* ⚠ CAPPED, not fluid — Johan, 2026-08-20: "make the width of the session list column narrower... until what is now the end of the Last message filter field". A list row is a scannable summary, not a document: past ~36rem the eye travels further for the same information, and the space is better left to the conversation panes. */ /* ⚠ A FIXED WIDTH, not a range — Johan, 2026-08-21: "the horizontal space for the session list keeps changing depending on the content of the sessions. Should not be the case." With `flex: 1 1 auto` between a min and a max, and the page sizing to its content, a single long shopper email widened the whole column — so the list, the filter bar and the tabs all moved between one view and the next. A list you scan has to hold still; the row contents adapt to the column, never the other way round. */ /* * ⚠ IT MUST BE ABLE TO SHRINK — Johan, 2026-08-21, with a screenshot of a pane * sitting on top of the list at ~1100px: "never invade space as here". * * This was `flex: 0 0 36rem`, fixed. But `panesThatFit` allows the list to fall * back to `LAYOUT.listMin` (20rem) as the last step before showing no pane at * all — so at narrow widths the arithmetic said "one pane fits", the CSS * refused to give up a single pixel, and the pane overflowed across the list. * The model was right and the layout was not. * * 36rem stays the width it WANTS; 20rem is the floor it will go to. Below that * the phone layout takes over and shows one thing at a time. */ /* * ⛔ A FIXED TRACK, NOT A FLEXIBLE ONE — Johan, 2026-08-25: "the session list * column became narrower when I added a filter selection in History. Should not * happen!!" * * It was `flex: 1 1 36rem; min-width: 20rem`, which does not describe a column * — it describes a RANGE. Anything that changed the flex line's totals moved * the list somewhere between 20 and 36rem, so the width an agent had learned * shifted underneath them for reasons that had nothing to do with the list. * Rows are fixed-column grids precisely so the eye can stop re-finding fields; * a column that resizes under a filter throws that away. * * `0 0 36rem` makes it the same width whatever else is on the row and whatever * is in it. The narrow-screen rules still win: the media query above sets * `min-width: 0`, and strip mode stacks the whole body — this only pins the * DESKTOP case, which is the one that was moving. * * ⚠ `max-width` stays for strip mode, where the column is no longer a flex item * in a row and the basis does not apply. */ /* 30rem, was 36 — Johan, 2026-09-15: "make the session list a bit narrower" so a third pane fits beside the menu. paneFit.ts LAYOUT.listWidth MUST match. */ /* Grows a little too, to 34rem, with a third of the panes' weight — Johan, 2026-09-15. paneFit.ts keeps 30 as the width it plans with. */ .queue-main-col { flex: 1 1 30rem; min-width: 22rem; max-width: 34rem; } /* ⚠ The LIST needs its own surface — Johan, 2026-08-21: "the area where sessions would be listed should not have the same background as the general page". On the page ground the rows floated with nothing holding them, so an empty list looked like a rendering failure rather than an empty list. A card gives the emptiness somewhere to be. */ /* * SELECTION, for archiving. The tick sits beside the row rather than inside it — * a checkbox in a