/* Agent Rooms timeline: styles for timeline.js. Every colour is a custom property on .tl, so a host restyles the component by setting --tl-* on .tl (after this file). Every class is tl-prefixed, states too (tl-on, tl-off), so a host's own classes never reach in. Dark by default, light under prefers-color-scheme: light or data-theme="light" (on or on the mounted element). Apache License 2.0. */ .tl{color-scheme:dark; --tl-bg:#101214;--tl-panel:#171a1e;--tl-raised:#1f2328;--tl-line:#2d3339;--tl-soft:#20252a;--tl-muted:#939aa3;--tl-text:#edf1f2; --tl-accent:#a8e0cd;--tl-accent-ink:#18362c;--tl-work:#7fd6b0;--tl-think:#8fb8ea;--tl-reply:#b7a6f0;--tl-search:#7cc4e0; --tl-edit:#9be3c1;--tl-need:#f0c36d;--tl-fail:#ef8f7f;--tl-quiet:#5d656e;--tl-grid:#23282e;--tl-shadow:0 14px 40px #0008; --tl-field:#13171a;--tl-hover:#1c2126;--tl-on:#2a3136;--tl-pick-on:#243029;--tl-tip:#0d1012f2;--tl-tip-line:#3a4148; --tl-btn-line:#3a4148;--tl-num:#c4ccd2;--tl-head:linear-gradient(115deg,#1b2522,#171b1f); color:var(--tl-text)} @media (prefers-color-scheme:light){:where(:root:not([data-theme="dark"])) .tl{color-scheme:light; --tl-bg:#f4f5f6;--tl-panel:#fff;--tl-raised:#f1f3f4;--tl-line:#dfe3e7;--tl-soft:#eef0f2;--tl-muted:#66707a;--tl-text:#15191c; --tl-accent:#1f7a5c;--tl-accent-ink:#fff;--tl-work:#1f9d6c;--tl-think:#2f6fbf;--tl-reply:#6d57c9;--tl-search:#2f8fb5; --tl-edit:#38a67f;--tl-need:#b7811a;--tl-fail:#c4513f;--tl-quiet:#b3bac1;--tl-grid:#eceff2;--tl-shadow:0 14px 40px #0002; --tl-field:#fff;--tl-hover:#f6f8f9;--tl-on:#e8ecef;--tl-pick-on:#e6f2ec;--tl-tip:#fffffff5;--tl-tip-line:#d3d8dc; --tl-btn-line:#d3d8dc;--tl-num:#39434b;--tl-head:linear-gradient(115deg,#eef6f2,#f8fafa)}} :where(:root[data-theme="light"]) .tl,.tl:where([data-theme="light"]){color-scheme:light; --tl-bg:#f4f5f6;--tl-panel:#fff;--tl-raised:#f1f3f4;--tl-line:#dfe3e7;--tl-soft:#eef0f2;--tl-muted:#66707a;--tl-text:#15191c; --tl-accent:#1f7a5c;--tl-accent-ink:#fff;--tl-work:#1f9d6c;--tl-think:#2f6fbf;--tl-reply:#6d57c9;--tl-search:#2f8fb5; --tl-edit:#38a67f;--tl-need:#b7811a;--tl-fail:#c4513f;--tl-quiet:#b3bac1;--tl-grid:#eceff2;--tl-shadow:0 14px 40px #0002; --tl-field:#fff;--tl-hover:#f6f8f9;--tl-on:#e8ecef;--tl-pick-on:#e6f2ec;--tl-tip:#fffffff5;--tl-tip-line:#d3d8dc; --tl-btn-line:#d3d8dc;--tl-num:#39434b;--tl-head:linear-gradient(115deg,#eef6f2,#f8fafa)} .tl,.tl *,.tl *::before,.tl *::after{box-sizing:border-box} .tl-root{container-type:inline-size} .tl [hidden]{display:none!important} .tl button:focus-visible,.tl select:focus-visible,.tl input:focus-visible{outline:2px solid var(--tl-accent);outline-offset:2px} /* the card and its head: title, toolbar, range chips, back to now, the selection chip */ .tl-card{background:var(--tl-panel);border:1px solid var(--tl-line);border-radius:14px;overflow:hidden} .tl-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px;border-bottom:1px solid var(--tl-line);background:var(--tl-head)} .tl-head-bare{padding:0;border:0;background:none} .tl-titles{flex:1;min-width:160px} .tl-title{margin:0;font-size:15px;font-weight:650;letter-spacing:-.2px} .tl-subtitle{margin:0;font-size:12px;color:var(--tl-muted)} .tl-tools{display:flex;flex-wrap:wrap;gap:6px} .tl-select,.tl-search{font:inherit;color:inherit;background:var(--tl-field);border:1px solid var(--tl-line);border-radius:8px;padding:6px 10px;max-width:100%} .tl-chips{display:flex;flex-wrap:wrap;gap:3px;background:var(--tl-field);border:1px solid var(--tl-line);border-radius:9px;padding:3px} .tl-chip{font:inherit;background:none;border:0;border-radius:7px;padding:5px 10px;color:var(--tl-muted);cursor:pointer;white-space:nowrap} .tl-chip.tl-on{background:var(--tl-on);color:var(--tl-text)}.tl-chip:hover{color:var(--tl-text)} .tl-btn{font:inherit;display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--tl-btn-line);border-radius:8px;padding:6px 11px;font-size:12px;color:var(--tl-text);cursor:pointer;white-space:nowrap} .tl-btn:hover{border-color:#67727c} .tl-chipsel{font:inherit;background:var(--tl-pick-on);border:1px solid var(--tl-accent);color:var(--tl-accent);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer} /* stat cards */ .tl-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--tl-line);border-bottom:1px solid var(--tl-line)} .tl-stat{background:var(--tl-panel);padding:10px 14px;min-width:0} .tl-stat-label{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--tl-muted);font-weight:700} .tl-stat-value{display:block;font-size:20px;font-weight:650;letter-spacing:-.4px;margin-top:2px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tl-stat-sub{display:block;font-size:11px;color:var(--tl-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* the chart: one canvas, then layers moved with transforms so the pointer never repaints the lanes */ .tl-wrap{position:relative;height:340px;cursor:crosshair;touch-action:pan-y;outline:none;-webkit-user-select:none;user-select:none} .tl-wrap:focus-visible{box-shadow:inset 0 0 0 2px var(--tl-accent)} .tl-wrap.tl-grab{cursor:grabbing} .tl-canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .tl-gutter{position:absolute;left:0;top:0;touch-action:none} .tl-rowhl,.tl-selbox,.tl-cross,.tl-time{position:absolute;left:0;top:0;pointer-events:none;will-change:transform} .tl-rowhl{background:var(--tl-text);opacity:.05} .tl-selbox{background:var(--tl-accent);opacity:.12} .tl-cross{width:1px;background:var(--tl-muted)} .tl-time{background:var(--tl-text);color:var(--tl-bg);font-size:11px;padding:1px 6px;border-radius:3px;margin-left:-26px;white-space:nowrap;font-variant-numeric:tabular-nums} .tl-tip{position:absolute;left:0;top:0;will-change:transform;pointer-events:none;z-index:3;min-width:180px;max-width:280px;background:var(--tl-tip);border:1px solid var(--tl-tip-line);border-radius:9px;padding:8px 10px;font-size:12px;box-shadow:var(--tl-shadow)} .tl-tip strong{display:block;font-size:12px;margin-bottom:2px}.tl-tip span{display:block;color:var(--tl-muted)} .tl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* the navigator and the legend */ .tl-navwrap{height:44px;border-top:1px solid var(--tl-line);position:relative} .tl-nav{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:ew-resize;touch-action:none} .tl-legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:9px 16px;border-top:1px solid var(--tl-line);font-size:11px;color:var(--tl-muted)} .tl-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px} .tl-legend-item{font:inherit;font-size:11px;background:none;border:1px solid transparent;border-radius:6px;padding:2px 6px;color:var(--tl-muted);cursor:pointer} .tl-legend-item:hover{border-color:var(--tl-line)}.tl-legend-item.tl-off{opacity:.4;text-decoration:line-through} .tl-legend-note{flex-basis:100%} /* the leaderboard */ .tl-lbwrap{overflow-x:auto;border:1px solid var(--tl-soft);border-radius:10px;max-height:420px;overflow-y:auto} .tl-lb{width:100%;border-collapse:collapse;font-size:12px} .tl-lb th{position:sticky;top:0;background:var(--tl-panel);text-align:left;border-bottom:1px solid var(--tl-line);padding:0} .tl-lbsort{font:inherit;background:none;border:0;color:var(--tl-muted);font-size:11px;font-weight:700;padding:8px 10px;cursor:pointer;white-space:nowrap} .tl-lbsort.tl-on{color:var(--tl-text)} .tl-lb td{padding:6px 10px;border-top:1px solid var(--tl-soft);white-space:nowrap} .tl-lb tbody tr{cursor:pointer} .tl-lb tbody tr:hover,.tl-lb tbody tr:focus-visible{background:var(--tl-hover);outline:none} .tl-lb td.tl-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--tl-num)} .tl-who{display:flex;align-items:center;gap:8px;min-width:200px} .tl-who strong{display:block;font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis}.tl-who small{display:block;color:var(--tl-muted)} .tl-pip{width:9px;height:9px;border-radius:50%;background:var(--tl-quiet);flex:none} .tl-share .tl-bar{display:inline-block;width:46px;height:5px;background:var(--tl-grid);border-radius:3px;margin-right:6px;vertical-align:middle;overflow:hidden} .tl-share .tl-bar i{display:block;height:100%;background:var(--tl-work)} /* the roster */ .tl-roster{display:flex;flex-direction:column;gap:6px;min-width:0} .tl-search{width:100%} .tl-pick{font:inherit;display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:6px 8px;cursor:pointer;color:var(--tl-text)} .tl-pick:hover{background:var(--tl-hover)}.tl-pick.tl-on{background:var(--tl-pick-on);box-shadow:inset 3px 0 0 var(--tl-accent)} .tl-pick>span:last-child{min-width:0} .tl-pick .tl-ttl{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tl-pick .tl-sub{display:block;font-size:10px;color:var(--tl-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tl-roster-sep{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;color:var(--tl-muted);padding:8px 8px 2px} /* narrow containers (phones): three, then two stat columns; the toolbar takes the full width */ @container (max-width:1054px){.tl-stats{grid-template-columns:repeat(3,minmax(0,1fr))}} @container (max-width:714px){.tl-wrap{height:300px}} /* until the first paint sizes it to its lanes */ @container (max-width:534px){.tl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-stat-value{font-size:17px} .tl-tools{width:100%}.tl-tools .tl-select{flex:1}} @media (prefers-reduced-motion:reduce){.tl *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}