/* chrismai.ai live status strip (livestatus.js). Slim row under the top bar on every page. */
.ls{position:relative;z-index:48;font:500 11.5px/1 var(--font);letter-spacing:0;color:var(--ink-2)}
.page .ls{position:sticky;top:60px}
.ls-bar{display:flex;align-items:center;gap:14px;height:28px;padding:0 var(--s5,20px);border-bottom:1px solid var(--hair);
  background:var(--nav-bg);background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.ls-bar[hidden]{display:none}
.ls-live{display:inline-flex;align-items:center;gap:7px;flex:none}
.ls-clock{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--ink);min-width:23ch;white-space:nowrap}
.ls-zone{font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);background:rgba(118,118,128,.12);border:0;border-radius:6px;padding:3px 6px;cursor:pointer;min-width:34px;transition:background .2s,color .2s}
.ls-zone:hover{background:rgba(118,118,128,.2);color:var(--ink)}
.ls-items{display:flex;align-items:center;gap:14px;margin:0;padding:0;list-style:none;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent)}
.ls-items::-webkit-scrollbar{display:none}
.ls-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:none;border-radius:6px;outline-offset:2px}
.ls-k{color:var(--ink-2)}
.ls-val{color:var(--ink);font-variant-numeric:tabular-nums}
.ls-meta .ls-val{color:var(--ink-2)}
.ls-item+.ls-meta{padding-left:14px;border-left:1px solid var(--hair)}
.ls-meta+.ls-meta{padding-left:0;border-left:0}
.ls-dot{width:7px;height:7px;border-radius:50%;flex:none;background:#c7c7cc;box-shadow:0 0 0 2.5px rgba(199,199,204,.25)}
.ls-up{background:#30d158;box-shadow:0 0 0 2.5px rgba(48,209,88,.22)}
.ls-down{background:#ff453a;box-shadow:0 0 0 2.5px rgba(255,69,58,.22)}
.ls-unknown{background:#ffb340;box-shadow:0 0 0 2.5px rgba(255,179,64,.22)}
.ls-pending{background:#c7c7cc}
.ls-item:has(.ls-unknown) .ls-val{color:#b25e00}
.ls-item:has(.ls-down) .ls-val{color:#d70015}
.ls-beat{width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none}
.motion .ls-beat{animation:lsBeat 2s ease-in-out infinite}
@keyframes lsBeat{50%{opacity:.35}}
.ls-hide{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-right:-4px;border:0;border-radius:6px;background:none;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.ls-hide:hover{background:rgba(118,118,128,.14);color:var(--ink)}
.ls-pill{position:absolute;top:6px;left:12px;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px 0 9px;font:inherit;font-size:11px;color:var(--ink-2);
  border:1px solid var(--hair);border-radius:980px;background:var(--nav-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 4px 12px -6px rgba(0,0,0,.25);cursor:pointer}
.ls-pill:hover{color:var(--ink)}
.ls-pill[hidden]{display:none}
.ls :focus-visible{outline:2px solid var(--btn,#0071e3);outline-offset:2px}
@media (prefers-color-scheme:dark){.ls-item:has(.ls-unknown) .ls-val{color:#ffb340}.ls-item:has(.ls-down) .ls-val{color:#ff6961}.ls-pending,.ls-dot{background-color:#636366}.ls-up{background:#30d158}.ls-down{background:#ff453a}.ls-unknown{background:#ffb340}}
/* Home app shell: the strip gets its own grid row, so it never sits on top of the nav, panels or status line. */
.app .shell.has-ls{grid-template-rows:auto auto 1fr 32px} /* auto: the top bar is 60px (chrome.css), taller than the old 56px row */
/* One clock: while the strip is open, the status line's older centisecond clock steps aside (it comes back if the strip is hidden). */
html:not(.ls-collapsed) .statusbar .clock #clock-date,html:not(.ls-collapsed) .statusbar .clock #clock-time{display:none}
html:not(.ls-collapsed) .statusbar .clock::before{display:none}
/* Chat panels (built-in + chatwithhuman widget, via cwh-bridge.js) drop below the strip instead of covering it. */
.chat-panel{top:calc(68px + var(--ls-h,0px))}
@media (max-width:820px){
  .page .ls{top:54px}
  .app .shell.has-ls{grid-template-rows:auto auto 1fr 26px calc(58px + env(safe-area-inset-bottom))}
  .ls{font-size:11px}
  .ls-bar{gap:10px;height:26px;padding:0 10px 0 14px}
  .ls-clock{min-width:0}
  .ls-items{gap:10px}
  .ls-item+.ls-meta{padding-left:10px}
  .chat-panel,.app .chat-panel{top:calc(60px + var(--ls-h,0px))}
}
@media (max-width:520px){ .ls-clock .ls-date{display:none} .ls-item{gap:4px} }
@media (prefers-reduced-motion:reduce){.ls *{animation:none!important;transition:none!important}}
@media (forced-colors:active){.ls-dot{forced-color-adjust:none;border:1px solid CanvasText}}
@media print{.ls{display:none}}
/* align-bots fix: the shell's one implicit column was sized to its widest child's min-content, so on phones the whole app
   laid out ~730px wide inside a 390px screen. Pin the column to the screen width; wide rows (strip, tabs, carousel) scroll inside. */
.app .shell{grid-template-columns:minmax(0,1fr)}