/* Focus without the world (round 7 follow-up, js/focus.js).
   The world stops drawing; a still, blurred copy of its last frame sits under a frosted pane, and
   the people rail and the side panel become the two columns: Conversations and Tasks. Loaded after
   round7.css, so these rules win over the earlier Focus ones they replace. */

/* ------------------------------------------------------------------ the backdrop */

.focus-bg { position: fixed; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; background: linear-gradient(to bottom, var(--fb-top, #e6e8eb), var(--fb-bottom, #dfe3e8)); animation: fbg-in 320ms var(--ease); }
.focus-bg[hidden] { display: none; }
@keyframes fbg-in { from { opacity: 0; } }
.fbg-snap { position: absolute; inset: -60px; background-size: cover; background-position: center; filter: blur(34px) saturate(1.25); transform: scale(1.06); }
.no-snap .fbg-snap { display: none; }
/* The frosted pane: the glass tint follows the theme and the hour, with the same grain and sheen. */
.fbg-frost { position: absolute; inset: 0; background-color: rgb(var(--glass-tint, 240 242 245) / 0.34); background-image: var(--glass-spec), var(--glass-grain); background-size: 100% 100%, 180px 180px; }
.no-snap .fbg-frost { background-color: rgb(var(--glass-tint, 240 242 245) / 0.3); }
/* At night (the theme, or paused in the dark sky) the pane is darker, so a daylight frame under it
   does not turn it grey. */
:root[data-theme='night'] .fbg-frost, body.dark .fbg-frost { background-color: rgb(var(--glass-tint) / 0.8); }
:root[data-glass='subtle'] .fbg-snap { filter: blur(48px) saturate(1.1); }
:root[data-glass='subtle'] .fbg-frost { background-color: rgb(var(--glass-tint, 240 242 245) / 0.62); }
/* Glass Off, or a viewer who asked for less transparency: a plain surface in the theme. */
:root[data-glass='off'] .fbg-snap { display: none; }
:root[data-glass='off'] .focus-bg { background: var(--bg); }
:root[data-glass='off'] .fbg-frost { background: none; }
@media (prefers-reduced-transparency: reduce) {
  .fbg-snap { display: none; }
  .focus-bg { background: var(--bg); }
}

/* The world and everything that tracks it are out of the way (and not drawn: main.js pauses it). */
body.focus-mode #stage, body.focus-mode #map, body.focus-mode #haze, body.focus-mode #stars { visibility: hidden; filter: none; opacity: 1; }
body.focus-mode :is(.presence-layer, .chat-glow, .route-handles, .piles, .p-hits, .ring-glyph, .ai-sweep, .views-switch, #sky-seg, .sky-seg) { display: none !important; }
/* The side panel's own panels (an agent, a connection) live inside it, so they stay. */
body.focus-mode .side .panel.side-panel:not([hidden]) { display: flex !important; }

/* ------------------------------------------------------------------ two columns (wide) */

body.focus-mode {
  --fw: min(1240px, calc(100vw - 32px));
  --fl: calc((100vw - var(--fw)) / 2);
  --fconv: clamp(320px, calc(var(--fw) * 0.36), 420px);
  --ftop: 62px;
  --fbot: 78px;
}
body.focus-mode .rail { display: flex !important; left: var(--fl); top: var(--ftop); bottom: var(--fbot); width: var(--fconv) !important; z-index: 21; box-shadow: var(--glass-shadow, var(--shadow)); }
body.focus-mode .side { display: flex !important; left: calc(var(--fl) + var(--fconv) + 16px); right: var(--fl); top: var(--ftop); bottom: var(--fbot); width: auto !important; }
:root:not([data-glass='off']) body.focus-mode :is(.rail, .side).glass { background-color: rgb(var(--glass-tint) / calc(var(--glass-alpha) + 0.26)); }
/* Nothing to collapse: both columns are always open in Focus. */
body.focus-mode :is(.r-head [data-rail='collapse'], .r-toggle, .sd-collapse) { display: none !important; }
body.focus-mode .r-head { padding-top: 6px; }
body.focus-mode .r-head strong::after { content: ' · conversations'; font-weight: 400; color: var(--ink-3); }
body.focus-mode .side .sh-row h2 { font-size: 16px; }
/* The tasks column is wide: rows can breathe. */
body.focus-wide .side .side-body { padding-left: 18px; padding-right: 18px; }
/* Call cards sit inside Conversations, under its live row (fold them there). */
body.focus-mode .callstack { left: calc(var(--fl) + 6px); top: calc(var(--ftop) + 58px); width: calc(var(--fconv) - 12px); max-height: calc(100vh - var(--ftop) - var(--fbot) - 70px); z-index: 30; }
body.focus-mode.chatting .callstack { top: calc(var(--ftop) + 58px); }
/* The dock spans the two columns' centre, its sheet opening upwards over them. */
body.focus-mode .dock { left: 50%; width: min(680px, calc(100vw - 24px)); z-index: 32; }
body.focus-mode .dock-find, body.focus-mode .dock-sheet { max-height: min(62vh, 560px); }
body.focus-mode .dock-bar { box-shadow: 0 10px 34px rgba(30, 42, 61, 0.2); }

/* The sheet over the Tasks column: every lens, the calendar and documents. */
body.focus-mode .focus { left: calc(var(--fl) + var(--fconv) + 16px); right: var(--fl); width: auto; top: var(--ftop); bottom: var(--fbot); transform: none; z-index: 23; border-radius: 18px; animation: fsheet-in 220ms var(--ease); }
@media (min-width: 1000px) { body.focus-mode.has-calls .focus { left: calc(var(--fl) + var(--fconv) + 16px); width: auto; } }
@keyframes fsheet-in { from { opacity: 0; transform: translateY(8px); } }
:root:not([data-glass='off']) body.focus-mode .focus.glass { background-color: rgb(var(--glass-tint) / 0.9); }
.f-head .f-back { margin-right: 2px; }
.f-head > .muted { margin-left: auto; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.focus-mode .focus .todo-row { grid-template-columns: 24px minmax(0, 1fr) 100px auto; }
body.focus-mode .focus :is(.t-who, .t-status) { display: none; }
body.focus-mode .focus .f-split.with-detail { grid-template-columns: 1fr 300px; }
body.focus-mode .focus :is(.f-docs, .f-docs.with-detail) { grid-template-columns: 180px 1fr; }
body.focus-mode .focus .f-docs .doc-preview { display: none; }

/* The Conversations | Tasks toggle (one column only). */
.focus-bar { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 26; padding: 4px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-sm); display: none; }
.focus-bar .segmented { display: flex; flex-wrap: nowrap; white-space: nowrap; }
.focus-bar [data-pane] { min-width: 124px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; font-size: 13px; font-weight: 500; }
.focus-bar .count { font-size: 10px; font-weight: 600; background: var(--accent); color: #fff; border-radius: 8px; padding: 0 5px; margin-left: 5px; min-width: 16px; display: inline-block; text-align: center; }
.focus-bar [aria-selected='true'] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ------------------------------------------------------------------ one column (600 to 820 px) */

body.focus-narrow { --fl: 10px; --ftop: 114px; --fconv: calc(100vw - 20px); }
body.focus-narrow .focus-bar:not([hidden]) { display: block; }
body.focus-narrow .rail, body.focus-narrow .side, body.focus-narrow .focus { left: 10px; right: 10px; width: auto !important; }
body.focus-narrow.fpane-tasks .rail, body.focus-narrow.fpane-conv .side, body.focus-narrow.fpane-conv .focus { display: none !important; }
body.focus-narrow.fpane-tasks .callstack { display: none; }
body.focus-narrow .callstack { left: 16px; width: min(360px, calc(100vw - 32px)); }
body.focus-narrow .side .todo-row, body.focus-phone .side .todo-row { grid-template-columns: 24px minmax(0, 1fr) auto; }

/* ------------------------------------------------------------------ phones (under 600 px)
   The tasks fill the screen; the people are one sideways strip of faces just above the
   assistant's field, live calls first, then whoever needs you, then team, customers and agents.
   --kb is the on-screen keyboard's height (visualViewport), so the strip and the field ride it. */

body.focus-phone { --fdock: calc(10px + var(--kb, 0px)); --fstrip-h: 58px; --fstrip-b: calc(var(--fdock) + 52px); --ftop: 56px; }
body.focus-phone .focus-bar { display: none !important; }
body.focus-phone .dock { bottom: var(--fdock); width: calc(100vw - 16px); transition: bottom 160ms var(--ease); }
body.focus-phone .side, body.focus-phone .focus { left: 8px; right: 8px; top: var(--ftop); bottom: calc(var(--fstrip-b) + var(--fstrip-h) + 8px); width: auto !important; border-radius: 16px; }
body.focus-phone .side .side-body { padding-bottom: 20px; }

/* The strip. */
body.focus-phone .rail:not(.open) { left: 8px; right: 8px; top: auto; bottom: var(--fstrip-b); height: var(--fstrip-h); width: auto !important; padding: 0; border-radius: 16px; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; overflow-anchor: none; transition: bottom 160ms var(--ease); }
body.focus-phone .rail:not(.open)::-webkit-scrollbar { display: none; }
body.focus-phone .rail:not(.open) .r-live { flex: none; flex-direction: row; align-items: center; margin: 0; padding: 0 8px 0 10px; border-bottom: 0; border-right: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); height: 40px; }
body.focus-phone .rail:not(.open) .lv-label { margin: 0 2px 0 0; font-size: 8px; writing-mode: vertical-rl; transform: rotate(180deg); }
body.focus-phone .rail:not(.open) .lv-avs { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
body.focus-phone .rail:not(.open) .lv-all { display: none; }
body.focus-phone .rail:not(.open) .lv-av:not(.folded)::after { left: 50%; right: auto; bottom: -5px; width: 12px; height: 2px; transform: translateX(-50%); }
body.focus-phone .rail:not(.open) .r-list { flex: none; flex-direction: row; height: 100%; }
body.focus-phone .rail:not(.open) .r-scroll { flex-direction: row; align-items: center; overflow: visible; gap: 0; padding: 0 4px; }
body.focus-phone .rail:not(.open) section { flex-direction: row; width: auto; gap: 2px; padding: 0 6px; scroll-snap-align: start; }
body.focus-phone .rail:not(.open) section + section { border-top: 0; padding-top: 0; border-left: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
body.focus-phone .rail:not(.open) h4 { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 2px 0 0; font-size: 7.5px; }
body.focus-phone .rail:not(.open) section[aria-label='Needs you'] h4 { color: var(--accent-ink); }
body.focus-phone .rail:not(.open) .r-face { width: 44px; height: 44px; touch-action: pan-x; }
body.focus-phone .rail:not(.open) .lv-av { touch-action: pan-x; }
body.focus-phone .rail .r-empty { white-space: nowrap; }

/* A chat on a phone: the rail becomes a sheet sliding up over the tasks, above the field. */
body.focus-phone.chatting .rail { left: 8px; right: 8px; top: var(--ftop); bottom: var(--fstrip-b); height: auto; width: auto !important; flex-direction: column; overflow: hidden; padding: 6px 0 0; border-radius: 18px; z-index: 31; box-shadow: 0 -10px 40px -12px rgba(20, 28, 40, 0.4), inset 1px 1px 0 var(--glass-hi); animation: fchat-up 240ms var(--ease); }
body.focus-phone.chatting .rail .r-live { flex-direction: row; padding: 2px 8px 6px 12px; margin: 0 0 4px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); height: auto; }
body.focus-phone.chatting .rail .lv-label { writing-mode: horizontal-tb; transform: none; }
body.focus-phone.chatting .side { bottom: calc(var(--fstrip-b) + var(--fstrip-h) + 8px); }
@keyframes fchat-up { from { transform: translateY(40px); opacity: 0; } }

/* Calls and the quick message sit above the strip. */
body.focus-phone .callstack { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(var(--fstrip-b) + var(--fstrip-h) + 8px); max-height: 55vh; padding: 0; margin: 0; box-sizing: border-box; }
body.focus-phone .qm { width: calc(100vw - 16px); }
.qm.above .qm-tail { left: calc(var(--tx, 30px) - 6px); top: auto; bottom: -6px; border-left: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0 0 3px 0; }
:root:not([data-glass='off']) .qm.above .qm-tail { border-color: var(--glass-rim); }

/* The top bar on a phone in Focus: the organisation and the way back to the world. */
body.focus-phone .topbar .views, body.focus-phone .topbar .exp-tag { display: none; }

@media (prefers-reduced-motion: reduce) {
  .focus-bg, body.focus-mode .focus, body.focus-phone.chatting .rail { animation: none !important; }
  body.focus-phone .dock, body.focus-phone .rail { transition: none; }
}
/* Building and the world's clock and light belong to the world; Focus leaves them out. */
body.focus-mode #btn-build { display: none; }
body.focus-phone .topbar :is(.menu-wrap:has(#btn-clock), .menu-wrap:has(#btn-light), #btn-undo, #btn-redo, #btn-help) { display: none; }
/* Under 1000 px the world's rails are overlays (z 31, a deep shadow); in Focus they are columns. */
body.focus-mode.narrow .side:not(.collapsed), body.focus-mode.narrow .rail.open { z-index: 22; box-shadow: var(--glass-shadow, var(--shadow)); }
body.focus-phone.chatting.narrow .rail.open { z-index: 33; }