/* D1 production workspace. Relay presentation over the existing authenticated controllers: route keys, audiences, message state and media ownership stay intact. */ html { scrollbar-color: var(--line-2) var(--bg-app); } ::selection { background: var(--selection); color: var(--text-1); } input, textarea { caret-color: var(--accent); } a { text-underline-offset: .2em; } #appShell .topbar { background: var(--bg-app); box-shadow: none; border-bottom: 1px solid var(--line-1); } #appShell .topbar__heading { font: 600 16px/1.3 var(--font-sans); letter-spacing: -.02em; } #appShell .topbar__subtitle { font: 400 12px/1.4 var(--font-sans); letter-spacing: 0; } #appShell .pd1-primary-nav { gap: 5px; } #appShell .pd1-primary-nav__item { min-height: 44px; border-radius: 24px; } #appShell .pd1-primary-nav__item[aria-current="page"] { background: color-mix(in srgb, var(--text-1) 8%, transparent); color: var(--text-1); } #appShell .pd1-primary-nav__item:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } #appShell .tool-rail__account-text-org { font-family: var(--font-sans); font-size: 12px; } #appShell .tool-rail__account-text-name { font-size: 14px; } #appShell .tool-rail__account-button { min-height: 48px; } #appShell .topbar__organization .topbar__mark::before { content: ''; width: 30px; height: 30px; margin-right: 9px; flex: none; border-radius: 9px; background: url('/public/app-icon.png') center / contain no-repeat; } @media (min-width: 641px) { #appShell.is-authed { --rail-width: 76px; --shell-topbar-height: 72px; } #appShell.is-authed .tool-rail { padding-top: 18px; background: var(--surface-1); } #appShell.is-authed .tool-rail > .topbar__organization { justify-content: center; padding: 0; margin-bottom: 24px; width: 100%; height: 36px; } #appShell.is-authed .tool-rail > .topbar__organization .topbar__wordmark { display: none; } #appShell .topbar__organization .topbar__mark::before { margin-right: 0; } #appShell.is-authed[data-tool="chat"] .workspace, #appShell.is-authed[data-tool="files"] .workspace { padding: 24px; box-sizing: border-box; } #appShell.is-authed #chatTool { border: 1px solid var(--line-1); border-radius: 16px; overflow: hidden; background: var(--surface-1); } } @media (min-width: 1180px) { #appShell.is-authed { --rail-width: 220px; } #appShell.is-authed .tool-rail { padding-inline: 16px; } #appShell.is-authed .tool-rail > .topbar__organization { justify-content: flex-start; padding-left: 8px; margin-bottom: 32px; } #appShell.is-authed .tool-rail > .topbar__organization .topbar__wordmark { display: inline-block; width: 92px; height: 28px; } #appShell .topbar__organization .topbar__mark::before { margin-right: 9px; } #appShell.is-authed .pd1-primary-nav__item { height: 46px; gap: 12px; padding-inline: 16px; } #appShell.is-authed .pd1-primary-nav__item > span { font: 500 14px/1.4 var(--font-sans); } #appShell.is-authed .tool-rail__utilities { border-top: 1px solid var(--line-1); padding-top: 14px; } } /* Conversation reading uses the study's flat attributed timeline. Rich media retains its larger measure; delivery and audience affordances stay visible. */ #chatTool { --desktop-chat-measure: 720px; --desktop-chat-media-measure: 880px; --desktop-chat-gutter: 24px; --chat-thread-rail-width: 260px; } #chatTool .chat-threads { background: var(--bg-app); } .workspace-conversations-title { margin: 0; padding: 4px 14px 18px; font: 600 18px/1.3 var(--font-sans); letter-spacing: -.025em; } #chatTool .chat-threads__section-head { padding-top: 14px; } #chatTool .chat-threads__label { font: 500 11px/1.4 var(--font-sans); letter-spacing: .025em; } #chatTool .chat-threads__new { min-width: 36px; min-height: 36px; background: transparent; border-color: transparent; } #chatTool .chat-thread-item { border-radius: 12px; box-shadow: none; border-color: transparent; } #chatTool .chat-thread-item.is-active { background: var(--selection); } #chatTool .chat-thread-item__title { font-size: 14px; line-height: 1.4; } #chatTool .chat-thread-item__preview { font-size: 12px; line-height: 1.4; } #chatTool .chat-conversation, html[data-theme="dark"] #chatTool .chat-conversation { background: var(--surface-1); } #chatTool .chat-convo-head { min-height: 66px; padding: 10px 22px; background: var(--surface-1); box-shadow: none; border-bottom: 1px solid var(--line-1); } #chatTool .chat-convo-head__title { font-size: 17px; letter-spacing: -.02em; } #chatTool .scout-chat-thread { gap: 18px; } #chatTool .scout-chat-msg { margin-block: 0; } #chatTool .scout-chat-msg__author { font: 600 14px/1.4 var(--font-sans); letter-spacing: 0; } #chatTool .scout-chat-msg__author-time, #chatTool .scout-chat-msg__idtime { color: var(--text-3); font: 400 11px/1.4 var(--font-sans); opacity: 1; } #chatTool .scout-chat-text { font-size: 15px; line-height: 1.6; } #chatTool .scout-chat-msg--peer .scout-chat-text, #chatTool .scout-chat-msg--scout .scout-chat-text, html[data-theme="dark"] #chatTool .scout-chat-msg--peer .scout-chat-text, html[data-theme="dark"] #chatTool .scout-chat-msg--scout .scout-chat-text { padding: 3px 0 5px; border: 0; background: transparent; color: var(--text-1); box-shadow: none; border-radius: 0; } #chatTool .scout-chat-destination { font: 400 12px/1.4 var(--font-sans); letter-spacing: 0; } #chatTool .scout-chat-form { border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface-1); box-shadow: none; } #chatTool .scout-chat-form:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: none; } #chatTool .scout-chat-input:focus-visible { outline: none; box-shadow: none; } #chatTool .scout-chat-input { font: 400 15px/1.5 var(--font-sans); } #chatTool .scout-chat-input { padding-block: 0; min-height: 24px; } #chatTool .scout-chat-input::placeholder { color: var(--text-3); opacity: 1; } #chatTool .scout-chat-send { background: var(--accent); color: var(--on-accent); border-radius: 12px; } #chatTool .scout-chat-send:disabled { opacity: .45; } #chatTool .chat-context-rail { border-left: 1px solid var(--line-1); background: var(--surface-1); } @media (min-width: 861px) { #chatTool .chat-threads { padding-top: 20px; } #chatTool .scout-chat-thread { padding-top: 20px; } #chatTool .chat-workspace-resizer { flex-basis: 6px; width: 6px; min-width: 6px; } #chatTool .chat-workspace-resizer::after { left: 2px; } #chatTool .scout-chat-msg__stack { max-width: min(100%, 72ch); } #chatTool .scout-chat-msg--media .scout-chat-msg__stack { max-width: 100%; } #chatTool .scout-chat-form { margin: 10px 22px 18px; width: auto; } } /* Files keeps the real folder, audience, versions and preview controls. */ #filesTool .drive-shell { background: var(--bg-app); } #filesTool .drive-sidebar { background: transparent; padding: 0 18px 20px 0; } #filesTool .drive-main { padding: 0 8px 32px 20px; } #filesTool .drive-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .workspace-files-search { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; background: var(--surface-1); border: 1px solid var(--line-1); border-radius: 12px; flex: 1 1 200px; max-width: 360px; color: var(--text-3); } .workspace-files-search svg { width: 18px; height: 18px; flex: none; } .workspace-files-search input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--text-1); font: 400 14px/1.4 var(--font-sans); outline: none; } .workspace-files-search:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; } .workspace-files-search input::placeholder { color: var(--text-3); } #filesTool .drive-new { min-height: 46px; gap: 9px; background: var(--accent); color: var(--on-accent); border-radius: 24px; font: 500 14px/1.3 var(--font-sans); } #filesTool .drive-nav__item { min-height: 44px; border-radius: 22px; font: 500 14px/1.4 var(--font-sans); } #filesTool .file-tile { border-radius: 14px; background: var(--surface-1); box-shadow: none; border: 1px solid var(--line-1); } #filesTool .files-row { min-height: 72px; background: transparent; border-radius: 0; border-bottom: 1px solid var(--line-1); box-shadow: none; } #filesTool .files-row__name { font: 500 15px/1.4 var(--font-sans); } #filesTool .files-row__meta { font: 400 12px/1.5 var(--font-sans); } #filesTool .drive-section-label { font: 600 14px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; } #filesTool .files-upload { background: var(--surface-1); border-radius: 16px; min-height: 180px; } #filesTool .files-empty { font: 400 15px/1.6 var(--font-sans); } /* Existing Work, account and entry remain real service surfaces in the same world. */ .settings-panel, .login-card { background: var(--surface-1); } @media (min-width: 641px) { .settings-panel, .login-card { border-radius: 20px; } } @media (max-width: 640px) { .login-card { border-radius: 20px; } .settings-panel { border-radius: 28px 28px 0 0; } } .settings-nav__item { font-family: var(--font-sans); border-radius: 22px; } .settings-nav__item[aria-current="true"] { color: var(--text-1); background: color-mix(in srgb, var(--text-1) 7%, transparent); box-shadow: none; } .stride-operating-home .office-launch__line { font-size: clamp(28px, 3vw, 36px); letter-spacing: -.03em; } .stride-operating-home .operating-eyebrow { display: none; } @media (max-width: 860px) { #filesTool .drive-main { padding: 0 0 24px; } #filesTool .drive-heading__actions { flex-wrap: wrap; flex: 1 1 100%; width: 100%; min-width: 0; } .workspace-files-search { max-width: none; flex-basis: 100%; } .workspace-files-search input { font-size: 16px; } } @media (max-width: 640px) { #appShell .pd1-primary-nav__item { border-radius: 18px; } #appShell .pd1-primary-nav__item > span { display: none; } #appShell .pd1-primary-nav__item { width: 48px; min-width: 44px; grid-template-rows: 1fr; } #appShell .topbar__heading { font-size: 18px; } #chatTool .workspace-conversations-title { padding: 18px 14px 12px; font-size: 24px; } #chatTool .chat-convo-head { padding-inline: 14px; min-height: 58px; } #chatTool .scout-chat-input { font-size: 16px; } #chatTool .scout-chat-form { border-radius: 14px; } #chatTool .chat-threads__new { min-width: 44px; min-height: 44px; } #filesTool .drive-main { padding-inline: 14px; } #filesTool .drive-heading { margin-bottom: 14px; } #filesTool .drive-heading__actions { gap: 6px; } } .workspace-upload-action { display: none; } .workspace-load-status { display: flex; align-items: center; gap: 16px; padding: 24px 0; color: var(--text-2); font: 400 14px/1.5 var(--font-sans); } .workspace-load-status[hidden] { display: none; } .workspace-load-status button { min-height: 44px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 16px; background: var(--surface-1); color: var(--text-1); } @media (max-width: 860px) { .workspace-upload-action { display: inline-flex; } } @media (max-width: 640px) { #filesTool .drive-main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } } #filesTool [hidden] { display: none !important; } .workspace-theme-swatch { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); } .workspace-theme-swatch--sand { background: linear-gradient(135deg, var(--theme-swatch-sand-ground) 50%, var(--theme-swatch-sand-accent) 50%); } .workspace-theme-swatch--ink { background: linear-gradient(135deg, var(--theme-swatch-ink-ground) 50%, var(--theme-swatch-ink-accent) 50%); } .workspace-theme-swatch--system { background: linear-gradient(135deg, var(--theme-swatch-sand-ground) 50%, var(--theme-swatch-ink-ground) 50%); } .theme-mode-group .noise-mode-option { grid-template-columns: 18px 20px minmax(0, 1fr); align-items: center; } .theme-mode-group .noise-mode-control { grid-column: 1; } .settings-save-status { min-height: 20px; margin: 8px 0 0; color: var(--text-3); font: 400 13px/1.5 var(--font-sans); } /* D1 follow-up: deferred chat media fades in over its reserved aspect box; no layout shift, no blank flash, motion-safe. */ .scout-chat-file__thumb { transition: opacity 200ms ease; } @media (prefers-reduced-motion: reduce) { .scout-chat-file__thumb { transition: none; } } .scout-chat-file__thumb:not([src]) { opacity: 0; } .desktop-chat-link-preview__media { transition: opacity 200ms ease; } @media (prefers-reduced-motion: reduce) { .desktop-chat-link-preview__media { transition: none; } } /* D1 global search polish: one focus row, calm keycaps, 44px touch, sans hints. Scope is the top-right #globalSearchRail rail only. Preserves Sand-default, compact Work44px back target, accepted header centering, pill/bell axis, float-tier panel, scope labels/behavior, loading/empty/results/error states, keyboard escape/arrows/enter and focus restoration. No JS/markup/copy/nav changes. */ #globalSearch.global-search-pill:focus-visible { box-shadow: none; } #globalSearch .global-search-pill__kbd { background: transparent; color: var(--text-2); } #globalSearchRail.global-search { gap: 8px; padding: 12px; } #globalSearchRail .global-search__field { min-width: 0; } #globalSearchRail .global-search__field:focus-within { border-color: var(--line-2); outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: none; } #globalSearchRail .global-search__input { overflow: hidden; text-overflow: ellipsis; } #globalSearchRail .global-search__input:focus, #globalSearchRail .global-search__input:focus-visible { outline: none; box-shadow: none; } #globalSearchRail .global-search__close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 8px; } #globalSearchRail .global-search__close:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: none; } #globalSearchRail .global-search__scopes { min-width: 0; max-width: 100%; padding: 2px; } #globalSearchRail .global-search__scope { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; padding: 0 14px; } #globalSearchRail .global-search__scope:focus-visible { box-shadow: none; } #globalSearchRail .global-search__row:focus-visible { box-shadow: none; } #globalSearchRail .global-search__status, #globalSearchRail .global-search__empty { font: var(--type-caption); letter-spacing: var(--track-text); color: var(--text-2); } #globalSearchRail .global-search__foot { font: var(--type-caption); letter-spacing: var(--track-text); color: var(--text-2); } #globalSearchRail kbd { background: transparent; color: var(--text-2); } @media (max-width: 640px) { #globalSearchRail.global-search { gap: 8px; padding: 12px; } #globalSearchRail .global-search__scopes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } #globalSearchRail .global-search__scopes::-webkit-scrollbar { display: none; } } /* D3 Meet presentation — video-first room composition over existing owners. Scope is room/Meet surfaces only. Preserves D1 Sand/search and D2 shell/Work geometry; no global token retheme. Media nodes, transport, auth, admission and lifecycle are untouched; this only presents existing feeds, roster, chat, device/share and record paths. */ #appShell[data-tool="room"] #pinActiveSpeaker:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Show/Hide chat stays a first-class dock verb with unread truth. */ #appShell[data-tool="room"] #roomChatToggle { min-width: 44px; min-height: 44px; } #appShell[data-tool="room"] #roomChatToggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--text-1); } #appShell[data-tool="room"] #roomChatToggle .room-chat-toggle__label { white-space: nowrap; } /* The dock owns connection and recording state; keep every in-call verb reachable without covering the stage scroll panes. */ #appShell[data-tool="room"] .meeting-bar .controls { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; } #appShell[data-tool="room"] .meeting-bar .controls::-webkit-scrollbar { display: none; } #appShell[data-tool="room"] .meeting-bar .controls > button { flex: none; min-width: 44px; min-height: 44px; } #appShell[data-tool="room"] .meeting-bar .controls > button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Wide: stage and chat sit side by side; people and shared content dominate while the 300–350px chat pane keeps draft, history and record paths. */ @media (min-width: 1000px) { #appShell.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .workspace { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 350px); } } /* Narrow/stack: stage keeps priority, chat takes a bounded pane, controls stay outside both scroll panes and remain reachable. */ @media (max-width: 999px) { #appShell[data-tool="room"] #hearthStage .hearth-seats { gap: 8px; } } @media (max-width: 743px) { #appShell[data-tool="room"] .meeting-bar .controls { gap: 6px; padding-bottom: env(safe-area-inset-bottom); } #appShell[data-tool="room"] #roomChatPanel .scout-chat-form textarea { min-height: 44px; } } @media (max-height: 600px) { #appShell[data-tool="room"] #hearthStage .hearth-seats { gap: 6px; } } @media (prefers-reduced-motion: reduce) { #appShell[data-tool="room"] .meeting-bar .controls > button { transition: none; } } #appShell[data-tool="room"] #screenStage video{object-fit:contain;object-position:center;background:var(--video-letterbox)} #appShell[data-tool="room"] #roomChatPanel .room-meeting-tab{min-height:44px} #appShell[data-tool="room"] #roomChatPanel .room-chat__close{min-width:44px;min-height:44px} #appShell[data-tool="room"] #roomChatPanel .room-meeting-view{min-height:0;overflow-y:auto;overscroll-behavior:contain} #appShell[data-tool="room"] #roomChatPanel .room-chat__form{flex:none} #appShell[data-tool="room"] #roomChatPanel .scout-chat-input{font-size:16px} /* Functional layout regression: explicit size/grid-row contract for in-call stacked/side compositions. Replaces prior max-width:860 / max-height:600 rules that collapsed phone stage to 0, overlapped tablet rows, and pushed the short-landscape dock off-viewport. Desktop (>=1000px, h>600) untouched. Phone 390: stacked rows 1/2, stage 320px real video, chat below, dock centered in viewport. Tablet 834: stacked rows 1/2 non-overlapping, stage 560px, chat bounded 220-360. Landscape 844x390: side cols 1/2 single row, stage fills row (>=160px), chat fills col, dock spans full reserved bottom (left/right 12px, no translate) so MIC stays reachable. */ @media (max-width: 640px){ #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;gap:8px;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px calc(env(safe-area-inset-bottom) + 96px)} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .hearth-presentation{grid-column:1;grid-row:1;order:0;display:grid;grid-template-rows:auto;height:auto;min-height:384px;max-height:none;padding:52px 12px 12px;overflow:visible} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .scout-rail{grid-column:1;grid-row:2;order:2;display:grid;min-height:0;max-height:none;overflow:visible} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) #hearthStage{height:320px;min-height:300px;max-height:44dvh;overflow:hidden} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) #roomChatPanel{height:auto;min-height:280px;max-height:none} #appShell.is-in-room[data-tool="room"] .room-chat{position:static;left:auto;right:auto;bottom:auto;top:auto;inset:auto;z-index:auto;height:auto;min-height:280px;max-height:none;width:auto;max-width:none;transform:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--line-1);border-radius:16px;overflow:hidden} #appShell.is-in-room[data-tool="room"] .room-chat[hidden]{display:none;transform:none} #appShell.is-in-room[data-tool="room"] .room-chat:not([hidden]){transform:none} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .meeting-bar{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);margin:0 auto} } @media (min-width: 641px) and (max-width: 999px){ #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;gap:8px;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px calc(env(safe-area-inset-bottom) + 96px)} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .hearth-presentation{grid-column:1;grid-row:1;order:0;height:auto;min-height:0;max-height:none;padding:40px 20px 12px;overflow:hidden} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .scout-rail{grid-column:1;grid-row:2;order:2;display:grid;min-height:0;max-height:none;overflow:visible} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) #hearthStage{min-height:420px;height:560px;max-height:62dvh;overflow:hidden} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) #roomChatPanel{height:auto;min-height:220px;max-height:360px} #appShell.is-in-room[data-tool="room"] .room-chat{position:static;left:auto;right:auto;bottom:auto;top:auto;inset:auto;z-index:auto;height:auto;min-height:220px;max-height:360px;width:auto;max-width:none;transform:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--line-1);border-radius:16px;overflow:hidden} #appShell.is-in-room[data-tool="room"] .room-chat[hidden]{display:none;transform:none} #appShell.is-in-room[data-tool="room"] .room-chat:not([hidden]){transform:none} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .meeting-bar{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);margin:0 auto} } @media (max-height: 600px) and (min-width: 700px){ #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .workspace{grid-template-columns:minmax(0,1fr) minmax(280px,340px);grid-template-rows:minmax(0,1fr);align-content:stretch;gap:8px;overflow:hidden;padding:8px 12px calc(env(safe-area-inset-bottom) + 72px)} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .hearth-presentation{grid-column:1;grid-row:1;order:0;height:100%;min-height:0;max-height:100%;padding:8px 12px;overflow:hidden} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .scout-rail{grid-column:2;grid-row:1;order:0;display:grid;min-height:0;max-height:100%;overflow:hidden} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) #hearthStage{height:100%;min-height:160px;max-height:100%;overflow:hidden} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) #hearthStage .hearth-seats{min-height:0;max-height:100%;overflow:auto} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) #roomChatPanel{height:100%;min-height:0;max-height:100%} #appShell.is-in-room[data-tool="room"] .room-chat{position:static;left:auto;right:auto;bottom:auto;top:auto;inset:auto;z-index:auto;height:100%;min-height:0;max-height:100%;width:auto;max-width:none;transform:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--line-1);border-radius:16px;overflow:hidden} #appShell.is-in-room[data-tool="room"] .room-chat[hidden]{display:none;transform:none} #appShell.is-in-room[data-tool="room"] .room-chat:not([hidden]){transform:none} #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .meeting-bar{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));transform:none;width:auto;max-width:none;margin:0;justify-content:center} } /* Tablet split (641–1023, audit C6): a narrower list gives the conversation the room; the audience reads as a chip in the header, not a mono line. */ @media (min-width: 641px) and (max-width: 1023px) { #chatTool { --chat-thread-rail-width: 232px; --desktop-chat-gutter: 18px; } } /* C6: the composer never squeezes the message field. When the conversation pane is narrow (tablet split, phone, an open thread rail) the field takes its own line and the tools sit beneath it, send on the right. */ #chatTool .chat-conversation { container: chat-pane / inline-size; } @container chat-pane (max-width: 480px) { #chatTool .scout-chat-form { flex-wrap: wrap; row-gap: 4px; align-items: center; } #chatTool .scout-chat-form > .scout-chat-input { order: -1; flex: 1 0 100%; min-width: 0; } #chatTool .scout-chat-form > .stride-dictation-mic { margin-left: auto; } } /* Link-preview anatomy lives in stride-content.css (web content pass). */ /* the message that IS a link shows the card alone, at every width */ #chatTool .scout-chat-msg__stack.desktop-chat-stack--link-only .scout-chat-text { display: none; } /* Streaming Scout chat: Send turns into Stop while Scout answers; Deep is a quiet per-device toggle in private Scout threads; a stopped or failed send leaves one inline note instead of a ghost bubble. */ #chatTool .scout-chat-send[data-mode="stop"] svg { display: none; } #chatTool .scout-chat-send[data-mode="stop"]::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: currentColor; } .scout-chat-send-note { align-self: flex-end; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 4px 0; color: var(--text-2); font: 400 13px/1.4 var(--font-sans); text-wrap: pretty; } .scout-chat-send-note__retry { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface-3); color: var(--text-1); font: 500 13px/1 var(--font-sans); cursor: pointer; } .scout-chat-send-note__retry:hover { background: var(--selection); } .scout-chat-send-note__retry:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Settings (S1–S3): sentence-case sans labels (mono is for machine facts), an inline Save beside the one field it saves, quiet confirmations. */ .settings-nav__item[hidden], .settings-nav__group[hidden] { display: none !important; } .settings-section-title { margin: 0 0 16px; color: var(--text-1); font: 600 18px/1.3 var(--font-sans); letter-spacing: -.01em; } .settings-subtitle { margin: 24px 0 8px; color: var(--text-1); font: 600 14px/1.4 var(--font-sans); } .settings-body .voice-profile__label { color: var(--text-2); font: 600 13px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; } .settings-body .field > span:first-child { color: var(--text-2); font: 500 13px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; } .settings-inline-field { display: flex; gap: 8px; align-items: stretch; } .settings-inline-field > input { flex: 1; min-width: 0; } .settings-inline-save { flex: none; min-height: 44px; padding-inline: 16px; } .account-settings__org { margin: 4px 0 0; color: var(--text-2); font: 400 14px/1.5 var(--font-sans); } .settings-body .account-menu__upload { justify-content: flex-start; } .settings-inline-save { box-shadow: inset 0 0 0 1px var(--line-2); border-radius: var(--r-md); } .settings-body .account-menu__email { font: 400 13px/1.4 var(--font-sans); letter-spacing: 0; } /* In-call stage (R2): seats read as warm dark glass, never unfinished — no dashed placeholders; a camera-off seat carries a generous monogram. */ .hearth-seat { background: var(--tile-fill); } .hearth-seat.is-placeholder { border: 1px solid var(--tile-edge); } .hearth-seat.is-placeholder .owner-avatar, .hearth-seat:not(.has-video) > .owner-avatar { width: clamp(56px, 16%, 96px); height: auto; aspect-ratio: 1; } .hearth-seat.is-placeholder .owner-avatar .monogram, .hearth-seat:not(.has-video) > .owner-avatar .monogram { font: 600 clamp(18px, 2.2vw, 30px)/1 var(--font-sans); } .hearth-seat .video-label { font: 500 13px/1.3 var(--font-sans); letter-spacing: 0; } /* Presenter layout (AJ 2026-09-23): while you share, the room stays the stage — participants fill a grid and your screen is a small live preview card beside it. Viewers keep the share large with a people strip. */ @media (min-width: 641px) { #appShell.is-in-room .presentation-tile.is-screen-sharing:has(.screen-stage.is-local-share) { grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 340px); } #appShell.is-in-room .presentation-tile.is-screen-sharing:has(.screen-stage.is-local-share) .hearth-stage { grid-column: 1; grid-row: 1; } #appShell.is-in-room .presentation-tile.is-screen-sharing:has(.screen-stage.is-local-share) .screen-stage { grid-column: 2; grid-row: 1; align-self: start; height: auto; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; } #appShell.is-in-room .presentation-tile.is-screen-sharing:has(.screen-stage.is-local-share) .hearth-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: auto; align-content: center; gap: 12px; height: 100%; overflow-y: auto; padding: 0; } /* media QA P5: seats keep a camera shape instead of stretching into tall columns that crop faces */ #appShell.is-in-room .presentation-tile.is-screen-sharing:has(.screen-stage.is-local-share) .hearth-seat { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 10; max-height: 100%; } #appShell.is-in-room .presentation-tile.is-screen-sharing:has(.screen-stage.is-local-share) .hearth-seat .owner-avatar { width: clamp(48px, 14%, 80px); height: auto; aspect-ratio: 1; } #appShell.is-in-room .presentation-tile.is-screen-sharing:has(.screen-stage.is-local-share) .hearth-seat .video-label { font-size: 13px; } .screen-stage.is-local-share .screen-stage__label { display: block; } } .screen-stage__label { font: 500 13px/1.3 var(--font-sans); letter-spacing: 0; } /* Phone: while the call window floats, the topbar live pill is a dot (the window already names the meeting), so the brand never truncates. */ @media (max-width: 640px) { body.is-call-pip-open #topbarLiveText { display: none; } body.is-call-pip-open .topbar-live { padding: 0 11px; } } /* Pinned (desktop): the pinned person leads and everyone else stays in a strip beside them — pinning never hides the room. */ @media (min-width: 641px) { #appShell.is-in-room .hearth-stage[data-room-layout="pinned"] .hearth-seats:has(.hearth-seat:not(.is-on-stage):not([hidden])) { grid-template-columns: minmax(0, 1fr) clamp(160px, 16vw, 232px); grid-template-rows: repeat(4, minmax(0, 1fr)); grid-auto-rows: 0; gap: 10px; overflow: hidden; } #appShell.is-in-room .hearth-stage[data-room-layout="pinned"] .hearth-seat:not(.is-on-stage):not([hidden]) { display: grid; grid-column: 2; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; } #appShell.is-in-room .hearth-stage[data-room-layout="pinned"] .hearth-seat.is-on-stage { grid-column: 1; grid-row: 1 / -1; } /* the strip holds four; past that the fourth seat is a "+N" door back to the grid (syncPinnedStripOverflow), so nobody is silently hidden */ #appShell.is-in-room .hearth-stage[data-room-layout="pinned"] .hearth-seat.is-strip-overflow { display: none; } #appShell.is-in-room .hearth-stage[data-room-layout="pinned"] .hearth-seat.is-strip-more { cursor: pointer; } #appShell.is-in-room .hearth-stage[data-room-layout="pinned"] .hearth-seat.is-strip-more::after { content: attr(data-strip-more); position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; border-radius: inherit; background: var(--stage-overlay-fill); color: var(--stage-overlay-text); font: 600 clamp(18px, 1.8vw, 24px)/1 var(--font-sans); letter-spacing: 0; } #appShell.is-in-room .hearth-stage[data-room-layout="pinned"] .hearth-seat.is-strip-more > :not(video) { visibility: hidden; } #appShell.is-in-room .hearth-stage[data-room-layout="pinned"] .hearth-seat:not(.is-on-stage) .owner-avatar { width: clamp(36px, 30%, 56px); } } /* Ink: a camera-off monogram stays legible on the dark seat */ html[data-theme="dark"] .hearth-seat .owner-avatar, html[data-theme="dark"] .hearth-seat .owner-avatar .monogram { background: var(--tile-monogram-fill); color: var(--tile-monogram-text); } /* G3: the audience chip sits beside the conversation title, tools stay right */ #chatTool .chat-convo-head > .chat-convo-head__back { order: -3; } #chatTool .chat-convo-head > .chat-convo-head__title { order: -2; flex: 0 1 auto; min-width: 0; } #chatTool .chat-convo-head > .desktop-chat-context { order: -1; margin-left: 10px; } /* Narrow conversation pane: the header stays one line (the Scout button becomes its icon) and the list trades times for title room. */ @container chat-pane (max-width: 520px) { #chatTool .chat-convo-head { flex-wrap: nowrap; } #chatTool .chat-convo-head__riff > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #chatTool .chat-convo-head__riff { padding-inline: 10px; } } #chatTool .chat-threads { container: chat-list / inline-size; } @container chat-list (max-width: 280px) { #chatTool .chat-thread-item__time { display: none; } } /* Media QA P6/P7 (desktop): the viewer strip beside a share is bounded by the stage so a long room scrolls instead of running off-screen, and the Unpin pill sits top-left over the pinned person instead of on the tile tools. */ @media (min-width: 641px) { #appShell.is-in-room .presentation-tile.is-screen-sharing:not(:has(.screen-stage.is-local-share)) .hearth-stage { height: 100%; min-height: 0; overflow: hidden; } #appShell.is-in-room .presentation-tile.is-screen-sharing:not(:has(.screen-stage.is-local-share)) .hearth-center { height: 100%; min-height: 0; } #appShell.is-in-room .presentation-tile.is-screen-sharing:not(:has(.screen-stage.is-local-share)) .hearth-seats { height: 100%; max-height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } #appShell.is-in-room[data-tool="room"] .presentation-tile.is-pinned-view .stage-toolbar { top: 72px; left: calc(var(--sp-3) + 12px); right: auto; justify-content: flex-start; } } /* Media QA P11: a quality fact belongs on a seat big enough to read it, never over a thumbnail (phone strip, share strip, pinned strip) */ @media (max-width: 640px) { #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) .tile-quality { display: none; } } #appShell.is-in-room .presentation-tile.is-screen-sharing .hearth-seat .tile-quality, #appShell.is-in-room .hearth-stage[data-room-layout="pinned"] .hearth-seat:not(.is-on-stage) .tile-quality { display: none; } /* streaming: the live tail wrapper is layout-transparent */ .scout-chat-stream-tail { display: contents; } /* Round 2 dock (AJ 2026-09-23, "first-class, simplicity first"): six seats — Mic, Camera, Share, Chat, More, Leave. Everything else lives in More. The hidden controls stay mounted: the More rows proxy them. */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls > :is(#audioSettingsButton, #roomCaptionsToggle, .room-react, #roomHandToggle, #roomLockToggle, #consentToggle, #recordMeeting, #inviteToggle, #roomScoutQuickAction, #archiveMeeting, .room-clock) { display: none; } @media (max-width: 640px) { /* phones: five seats; Share lives in More */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls > #screenShare { display: none; } } /* seats read as live controls: ink glyph on a raised surface */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#muteMic, #toggleCamera, #screenShare, #roomChatToggle, #roomMoreToggle) { width: 48px; min-width: 48px; height: 48px; min-height: 48px; background: var(--surface-1); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-hairline); opacity: 1; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#muteMic, #toggleCamera, #screenShare, #roomChatToggle, #roomMoreToggle):hover:not(:disabled) { background: var(--surface-3); } #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#muteMic, #toggleCamera, #screenShare, #roomChatToggle, #roomMoreToggle) svg { opacity: 1; } /* off (mic muted, camera off): the strike glyph on a quiet danger wash */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#muteMic, #toggleCamera)[aria-pressed="true"] { background: color-mix(in srgb, var(--danger-text) 13%, var(--surface-1)); color: var(--danger-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-text) 30%, transparent); } /* engaged (sharing, chat open, menu open): the accent wash */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#screenShare, #roomChatToggle)[aria-pressed="true"], #appShell.is-in-room[data-tool="room"] .meeting-bar .controls #roomMoreToggle[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 16%, var(--surface-1)); color: var(--ember-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } /* truly unavailable reads unavailable — and only then */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#muteMic, #toggleCamera, #screenShare, #roomChatToggle, #roomMoreToggle):disabled { opacity: 0.45; } /* Leave: confident solid destructive red, white glyph (5.5:1) */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls #leave { width: 60px; min-width: 60px; height: 48px; min-height: 48px; background: var(--call-leave-solid); color: var(--on-call-leave); opacity: 1; box-shadow: var(--call-leave-highlight); } #appShell.is-in-room[data-tool="room"] .meeting-bar .controls #leave:hover:not(:disabled) { background: var(--call-leave-fill-hover); } #appShell.is-in-room[data-tool="room"] .meeting-bar .controls #leave:active:not(:disabled) { background: var(--call-leave-fill-press); } #appShell.is-in-room[data-tool="room"] .meeting-bar .controls #leave svg { stroke: currentColor; } #appShell.is-in-room[data-tool="room"] .meeting-bar .controls #leave:disabled { opacity: 0.55; } #appShell.is-in-room[data-tool="room"] .meeting-bar .controls { gap: 10px; } /* More menu: icon + label rows on the call's dark glass, a reactions strip on top */ #appShell.is-in-room[data-tool="room"] .room-more__menu { width: min(256px, calc(100vw - 16px)); } .room-more__reactions { display: flex; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--line-1); margin-bottom: 4px; } .room-more__reaction { flex: 1 1 0; min-width: 36px; height: 40px; border: 0; border-radius: 10px; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; } .room-more__reaction:hover:not(:disabled), .room-more__reaction:focus-visible { background: var(--well); outline: none; } .room-more__reaction:disabled { opacity: 0.4; cursor: default; } #appShell.is-in-room[data-tool="room"] .room-more__action { gap: 12px; } .room-more__action > svg { flex: none; color: var(--text-2); } .room-more__action[aria-checked="true"] > svg { color: var(--ember-text); } .room-more__action[aria-checked="true"]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); } .room-more__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #appShell.is-in-room[data-tool="room"] .room-more__group + .room-more__group { border-top: 1px solid var(--line-1); margin-top: 4px; padding-top: 4px; } /* Round 2: transcription state is one quiet chip in the call header row ("Meeting · 23 Sept · Live transcription"), never a topbar pill */ .stage-chrome__meeting { pointer-events: none; } .stage-chrome__meeting #roomTranscriptPill { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; height: 22px; min-height: 0; margin: -2px 0 0 10px; padding: 0 8px 0 6px; border: 0; border-radius: 999px; box-shadow: none; font: 500 13px/1 var(--font-sans); letter-spacing: 0; cursor: pointer; } .stage-chrome__meeting #roomTranscriptPill .room-transcription-pill__label { font: inherit; } .stage-chrome__meeting #roomTranscriptPill[hidden] { display: none; } .stage-chrome__meeting #roomTranscriptPill:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; } .stage-chrome__meeting #roomTranscriptPill .room-transcription-pill__dot { width: 6px; height: 6px; } /* Round 2: a pictureless seat (yours included) wears the same generous monogram as everyone else's camera-off seat */ .hearth-seat .tile-avatar .owner-avatar { width: clamp(56px, 16%, 96px); height: auto; aspect-ratio: 1; } .hearth-seat .tile-avatar .monogram { border: 0; background: var(--tile-monogram-fill); color: var(--tile-monogram-text); font: 600 clamp(18px, 2.2vw, 30px)/1 var(--font-sans); } html[data-theme="dark"] .hearth-seat .tile-avatar .monogram { background: var(--tile-monogram-fill); color: var(--tile-monogram-text); } @media (max-width: 640px) { /* the strip's avatar sizing is for the disc, never its full-seat backdrop */ #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) .tile-avatar { inset: 0; width: auto; height: auto; } #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) .tile-avatar .owner-avatar { width: 40px; height: 40px; } #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) .tile-avatar .monogram { font-size: 16px; } } @media (max-width: 640px) { /* the More menu anchors to the dock's right edge, so it never runs off a narrow screen */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls { position: relative; } #appShell.is-in-room[data-tool="room"] .meeting-bar .room-more { position: static; } #appShell.is-in-room[data-tool="room"] .room-more__menu { right: 0; } } /* Round 2 phone call: the meeting label and transcription chip sit in one quiet row above the stage (never over the hero); strip monograms share one size; the strip fades where it scrolls on */ @media (max-width: 640px) { #appShell.is-in-room[data-tool="room"]:not(.is-guest) .stage-chrome__meeting { top: 14px; left: 16px; max-width: calc(100% - 32px); font: 500 12px/1.3 var(--font-sans); letter-spacing: 0; color: var(--text-2); } .stage-chrome__meeting #roomTranscriptPill { height: 22px; margin-left: 8px; font-size: 12px; } #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) > .owner-avatar, #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) .tile-avatar .owner-avatar { width: 40px; height: 40px; } #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) > .owner-avatar .monogram, #appShell.is-in-room .hearth-seat:not(.is-mobile-hero) .tile-avatar .monogram { font-size: 16px; } #appShell.is-in-room #videoStack[data-strip-more="true"] { -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000, #000), linear-gradient(to right, #000 calc(100% - 36px), transparent); -webkit-mask-size: 100% calc(100% - 112px), 100% 112px; mask-size: 100% calc(100% - 112px), 100% 112px; -webkit-mask-position: top, bottom; mask-position: top, bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } } /* ===== Critic round 1 (2026-09-23) ===== */ /* W11: one speaking ring (ember, not green), one tile fill for every seat */ .video-tile.is-active-speaker { box-shadow: 0 0 0 2px var(--speaker-accent), 0 0 24px color-mix(in srgb, var(--speaker-accent) 26%, transparent); } .video-tile.is-active-speaker .video-label::before { background: var(--speaker-accent); } .pip-tile.is-speaker { box-shadow: 0 0 0 2px var(--speaker-accent), 0 0 20px color-mix(in srgb, var(--speaker-accent) 24%, transparent); } .hearth-seat, .hearth-seat.is-local, .tile-avatar, .video-tile video { background: var(--tile-fill); } /* drag handle only on hover / keyboard focus */ @media (hover: hover) { #appShell.is-in-room .hearth-seat .video-reorder-handle { opacity: 0; transition: opacity var(--dur-fast) var(--ease); } #appShell.is-in-room .hearth-seat:hover .video-reorder-handle, #appShell.is-in-room .hearth-seat:focus-within .video-reorder-handle { opacity: 1; } } /* W1: the call's More menu is a Sand/Ink popover, not stage glass */ #appShell.is-in-room[data-tool="room"] .room-more__menu { background: var(--surface-1); border: 1px solid var(--line-1); box-shadow: var(--popover-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-theme="dark"] #appShell.is-in-room[data-tool="room"] .room-more__menu { background: var(--popover-fill); border-color: var(--popover-edge); box-shadow: var(--popover-shadow); } #appShell.is-in-room[data-tool="room"] .room-more__action { color: var(--text-1); } #appShell.is-in-room[data-tool="room"] .room-more__action:hover, #appShell.is-in-room[data-tool="room"] .room-more__action:focus-visible { background: var(--well); } #appShell.is-in-room[data-tool="room"] .room-more__action:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } #appShell.is-in-room[data-tool="room"] .room-more__action > svg { color: var(--text-2); } #appShell.is-in-room[data-tool="room"] .room-more__action[aria-checked="true"] > svg { color: var(--ember-text); } #appShell.is-in-room[data-tool="room"] .room-more__action[aria-checked="true"]::after { background: var(--accent); } #appShell.is-in-room[data-tool="room"] .room-more__group + .room-more__group, .room-more__reactions { border-color: var(--line-1); } .room-more__reaction:hover:not(:disabled), .room-more__reaction:focus-visible { background: var(--well); } /* W12: camera/mic off is a neutral state — the slashed glyph on the raised surface, never a pink wash */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#muteMic, #toggleCamera)[aria-pressed="true"] { background: var(--surface-3); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--line-2); } /* W18/W19 Settings: no accent rule beside the title; sans org/email; one sentence-case voice; phone sheet ends with a quiet Sign out */ .settings-header__divider { display: none; } .settings-header__org, .settings-body .account-menu__email, .settings-sheet-email, .account-settings__org { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; } .settings-sheet-label { font: 500 14px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-1); } .settings-sheet-theme button { font: 500 13px/1 var(--font-sans); letter-spacing: 0; text-transform: none; } .settings-actions { display: flex; align-items: center; gap: 12px; } .settings-actions #settingsDone { margin-left: auto; } .settings-actions .settings-sheet-signout { width: auto; height: 44px; margin: 0; padding: 0 4px; background: transparent; color: var(--danger-text); font: 500 14px/1 var(--font-sans); border-radius: 8px; } .settings-actions .settings-sheet-signout:hover { text-decoration: underline; text-underline-offset: 3px; } @media (min-width: 641px) { .settings-actions .settings-sheet-signout { display: none; } } @media (max-width: 640px) { /* the section pills scroll with a fade instead of clipping */ .settings-nav { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 28px; } .settings-nav::-webkit-scrollbar { display: none; } } /* the avatar actions sit beside the avatar */ .account-menu__profile:has(.account-menu__upload) { flex-wrap: wrap; } .profile-settings .account-menu__identity { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .profile-settings .account-menu__identity .account-menu__upload { margin-left: auto; display: flex; gap: 8px; } @media (max-width: 640px) { .profile-settings .account-menu__identity .account-menu__upload { margin-left: 0; width: 100%; } } /* W8: creating a group or channel is a form, not an earned moment — the standard neutral focus ring and a neutral Create button */ #chatTool .chat-channel-create__input:focus, #chatTool .chat-channel-create__input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--line-2); box-shadow: none; } #chatTool .chat-channel-create__go { width: auto; min-width: 72px; padding: 0 14px; border-radius: 10px; background: var(--surface-1); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 13px/1 var(--font-sans); } #chatTool .chat-channel-create__go:disabled { opacity: 0.5; } #chatTool .chat-channel-create__go:not(:disabled):hover { background: var(--well); } /* W6: one heading per screen — the topbar names Chat on desktop; the audience line under the title is the chip's job */ @media (min-width: 641px) { #chatTool .workspace-conversations-title { display: none; } } #chatTool #chatConvoMeta { display: none; } /* W5: at 1440 the list earns room for full titles; the open row drops its time */ @media (min-width: 1280px) { #chatTool { --chat-thread-rail-width: 340px; } } #chatTool .chat-thread-item[aria-pressed="true"] .chat-thread-item__time { display: none; } /* W5: tablet widths show one pane at a time — the list, or the conversation with a back button — instead of truncating both */ @media (min-width: 641px) and (max-width: 900px) { #chatTool[data-chat-view="threads"] .chat-conversation, #chatTool[data-chat-view="threads"] .chat-context-rail { display: none; } #chatTool[data-chat-view="threads"] .chat-threads { flex: 1 1 auto; width: auto; max-width: none; border-right: 0; } #chatTool[data-chat-view="convo"] .chat-threads, #chatTool[data-chat-view="convo"] .chat-threads-resize { display: none; } #chatTool[data-chat-view="convo"] .chat-convo-head__back { display: inline-flex; } } /* P5: one link fallback everywhere — title (or domain) and a sans "Opens in a new tab", on the same card as a rich preview */ /* W21: the OS call window's +N tile rides the theme surface */ /* W11: one unpin affordance — the ember pin on the pinned tile */ #appShell.is-in-room[data-tool="room"] #pinActiveSpeaker { display: none; } /* W13 viewer: the share fits the stage at its own shape (no black bands) and names its presenter in a floating chip */ @media (min-width: 641px) { #appShell.is-in-room .presentation-tile.is-screen-sharing:not(:has(.screen-stage.is-local-share)) .screen-stage { display: grid; place-items: center; background: transparent; box-shadow: none; border: 0; } #appShell.is-in-room .presentation-tile.is-screen-sharing:not(:has(.screen-stage.is-local-share)) .screen-stage { container-type: size; } #appShell.is-in-room .presentation-tile.is-screen-sharing:not(:has(.screen-stage.is-local-share)) .screen-stage video#screenStageVideo { width: min(100cqw, calc(100cqh * var(--share-aspect, 1.7778))); height: auto; min-height: 0; max-width: 100%; max-height: 100%; aspect-ratio: var(--share-aspect, 16 / 9); border-radius: 16px; background: var(--bg-stage); object-fit: contain; } #appShell.is-in-room .presentation-tile.is-screen-sharing .screen-stage__label { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 3; padding: 6px 12px; border-radius: 999px; background: var(--stage-overlay-fill); color: var(--stage-overlay-text); font: 500 13px/1.2 var(--font-sans); letter-spacing: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* W13 presenter: the preview is a real column beside a centred grid */ #appShell.is-in-room .presentation-tile.is-screen-sharing:has(.screen-stage.is-local-share) { grid-template-columns: clamp(300px, 34%, 520px) minmax(0, 1fr); align-items: center; } #appShell.is-in-room .presentation-tile.is-screen-sharing:has(.screen-stage.is-local-share) .screen-stage { grid-column: 1; grid-row: 1; align-self: center; width: 100%; } #appShell.is-in-room .presentation-tile.is-screen-sharing:has(.screen-stage.is-local-share) .hearth-stage { grid-column: 2; grid-row: 1; } #appShell.is-in-room .presentation-tile.is-screen-sharing:has(.screen-stage.is-local-share) .hearth-seats { justify-content: center; } } /* W15: in a call the desktop rail folds to its icons so the stage gets the width */ @media (min-width: 1180px) { #appShell.is-authed.is-in-room[data-tool="room"] { --rail-width: 76px; } #appShell.is-authed.is-in-room[data-tool="room"] .tool-rail { padding-inline: 0; align-items: center; } #appShell.is-authed.is-in-room[data-tool="room"] .tool-rail > .topbar__organization { justify-content: center; padding-left: 0; margin-bottom: 24px; width: 100%; } #appShell.is-authed.is-in-room[data-tool="room"] .tool-rail > .topbar__organization .topbar__wordmark, #appShell.is-authed.is-in-room[data-tool="room"] .tool-rail > .topbar__organization .topbar__organization-name { display: none; } #appShell.is-authed.is-in-room[data-tool="room"] .topbar__organization .topbar__mark::before { margin-right: 0; } #appShell.is-authed.is-in-room[data-tool="room"] .pd1-primary-nav__item { width: 44px; height: 44px; padding-inline: 0; justify-content: center; } #appShell.is-authed.is-in-room[data-tool="room"] .pd1-primary-nav__item > span { display: none; } #appShell.is-authed.is-in-room[data-tool="room"] .tool-rail__account-text { display: none; } #appShell.is-authed.is-in-room[data-tool="room"] .tool-rail__utilities { border-top: 0; } } /* W16 lobby: one flat rooms list (no card-in-card), neutral device states */ .lobby__rail { background: transparent; border: 0; box-shadow: none; padding: 4px 0; } .room-empty .greenroom__ctl[aria-pressed="true"] { background: var(--surface-1); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--line-2); } .room-empty .greenroom__ctl[aria-pressed="false"] { background: var(--surface-3); color: var(--text-1); } .room-empty .greenroom__ctl[aria-pressed="false"] svg { opacity: 1; } #lobbyJoinError, .lobby__joinerror { color: var(--text-2); text-wrap: balance; font: 400 14px/1.45 var(--font-sans); } /* W17 */ .home-door__detail { text-wrap: balance; } /* P6 phone filmstrip: three seats, the third a "+N" door to People */ @media (max-width: 640px) { #appShell.is-in-room .hearth-seat.is-strip-overflow { display: none; } #appShell.is-in-room .hearth-seat.is-strip-more { cursor: pointer; } #appShell.is-in-room .hearth-seat.is-strip-more::after { content: attr(data-strip-more); position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; border-radius: inherit; background: var(--stage-overlay-fill); color: var(--stage-overlay-text); font: 600 18px/1 var(--font-sans); } #appShell.is-in-room .hearth-seat.is-strip-more > :not(video) { visibility: hidden; } /* W14: two people — the other person fills the stage and you ride a corner inset, not a lopsided card */ #appShell.is-in-room .hearth-stage[data-grid-size="pair"] .hearth-seats { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); position: relative; } #appShell.is-in-room .hearth-stage[data-grid-size="pair"] .hearth-seat.is-mobile-hero { grid-column: 1; grid-row: 1; height: 100%; max-height: 100%; } #appShell.is-in-room .hearth-stage[data-grid-size="pair"] .hearth-seat:not(.is-mobile-hero) { position: absolute; right: 12px; bottom: 12px; z-index: 5; width: 96px; min-width: 96px; height: 132px; min-height: 0; border-radius: 14px; box-shadow: var(--stage-inset-shadow); } } /* W9 phone: away from the room, the mini call is a compact bar docked above the tab bar — title, state and controls, no tiles over the page */ @media (max-width: 640px) { .pip-meeting .pip-meeting__tiles { display: none; } .pip-meeting { width: calc(100vw - 24px); } } /* the mini call already names the room and holds Leave: no topbar repeat */ body.is-call-pip-open #topbarLivePill, body.is-call-pip-open #topbarLiveLeave { display: none; } /* calm Scout start: three prompts as quiet rows, context doors beneath */ .scout-chat-empty__prompts { display: grid; gap: 8px; width: min(440px, 100%); margin: 20px auto 4px; } .scout-chat-empty__prompt { display: block; width: 100%; min-height: 44px; padding: 10px 14px; text-align: left; border: 1px solid var(--line-1); border-radius: 12px; background: var(--surface-1); color: var(--text-1); font: 500 14px/1.35 var(--font-sans); letter-spacing: 0; cursor: pointer; } .scout-chat-empty__prompt:hover { background: var(--well); } .scout-chat-empty__prompt:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } #chatTool .scout-chat-empty__title { font: 600 26px/1.2 var(--font-sans); letter-spacing: -0.01em; } #chatTool .scout-chat-empty__body { text-wrap: balance; color: var(--text-2); } .dock-tooltip { position: fixed; z-index: 10050; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--text-1); color: var(--surface-1); font: 500 12px/1.2 var(--font-sans); letter-spacing: 0; white-space: nowrap; box-shadow: var(--shadow-tooltip); } .dock-tooltip[hidden] { display: none; } /* forms focus with a neutral ring; ember stays earned */ :root { --ring-neutral: color-mix(in srgb, var(--text-1) 42%, transparent); } #chatTool .scout-chat-form:focus-within, #roomChatPanel .scout-chat-form:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; border-color: var(--line-2); box-shadow: none; } /* the lobby's device "on" state is the raised surface, not a green dot */ .room-empty .greenroom__ctl::after, .greenroom__ctl::after { display: none; } .relationship-memory__import[hidden] { display: none; } #greenRoomMicChip::after, #greenRoomCamChip::after { display: none; } /* AJ 2026-09-23: non-interactive status never renders as a pill. The call header is plain text; "Transcribing" is a small unboxed dot + word. */ .stage-chrome__meeting #roomTranscriptPill, .stage-chrome__meeting #roomTranscriptPill[data-state] { background: transparent; box-shadow: none; border: 0; padding: 0; height: auto; margin-left: 12px; color: var(--text-2); } .stage-chrome__meeting #roomTranscriptPill:hover { background: transparent; color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; } .stage-chrome__meeting #roomTranscriptPill[data-state="live"] .room-transcription-pill__dot { background: var(--live); } .stage-chrome__meeting #roomTranscriptPill[data-state="stalled"] .room-transcription-pill__dot { background: var(--status-warn-dot); } /* the grid already shows everyone: no "N in the room" line beside it */ #appShell.is-in-room .presentation-tile:has(.hearth-stage[data-room-layout="grid"]) .stage-chrome__occupancy { display: none; } /* ===== AJ 2026-09-23: "liquid glass and blend" — one translucent capsule floating over the stage; borderless glyph buttons; tinted glass states. Every color is a token (legacy-tokens.css) for the palette swap. ===== */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls { border: 0; background: var(--call-glass-solid); box-shadow: var(--call-glass-shadow); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #appShell.is-in-room[data-tool="room"] .meeting-bar .controls { background: var(--call-glass-fill); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 1px 0 var(--call-glass-highlight), inset 0 0 0 1px var(--call-glass-edge), var(--call-glass-shadow); } } @media (prefers-reduced-transparency: reduce) { #appShell.is-in-room[data-tool="room"] .meeting-bar .controls { background: var(--call-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* borderless glyph buttons */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#muteMic, #toggleCamera, #screenShare, #roomChatToggle, #roomMoreToggle, #roomRecordToggle) { background: transparent; box-shadow: none; color: var(--text-1); } #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#muteMic, #toggleCamera, #screenShare, #roomChatToggle, #roomMoreToggle, #roomRecordToggle):hover:not(:disabled) { background: var(--call-glass-hover); } #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#muteMic, #toggleCamera, #screenShare, #roomChatToggle, #roomMoreToggle, #roomRecordToggle):active:not(:disabled) { background: var(--call-glass-press); } /* muted / camera off: the slashed glyph on a subtle tinted glass fill */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#muteMic, #toggleCamera)[aria-pressed="true"] { background: var(--call-glass-off); box-shadow: none; color: var(--text-1); } /* engaged (sharing, chat open, More open): a lit neutral glass — orange is earned (live, unread, mention, focus), never a toggle state */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls :is(#screenShare, #roomChatToggle)[aria-pressed="true"], #appShell.is-in-room[data-tool="room"] .meeting-bar .controls #roomMoreToggle[aria-expanded="true"] { background: color-mix(in srgb, var(--text-1) 16%, transparent); box-shadow: none; color: var(--text-1); } /* Leave: red-tinted glass, white glyph */ #appShell.is-in-room[data-tool="room"] .meeting-bar .controls #leave { background: var(--call-leave-fill); color: var(--on-call-leave); box-shadow: var(--call-leave-highlight); } #appShell.is-in-room[data-tool="room"] .meeting-bar .controls #leave:hover:not(:disabled) { background: var(--call-leave-fill-hover); } #appShell.is-in-room[data-tool="room"] .meeting-bar .controls .controls__divider { background: var(--call-glass-edge); opacity: 1; } /* the stage runs beneath the floating dock instead of stopping at a band */ @media (min-width: 641px) { #appShell.is-in-room[data-tool="room"] .presentation-tile { padding-bottom: 60px; } } /* the More menu and the in-app mini call share the glass */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #appShell.is-in-room[data-tool="room"] .room-more__menu { background: var(--popover-glass-fill); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border: 0; box-shadow: inset 0 1px 0 var(--call-glass-highlight), inset 0 0 0 1px var(--popover-glass-edge), var(--popover-shadow); } .pip-meeting { background: var(--pip-glass-fill); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 1px 0 var(--call-glass-highlight), inset 0 0 0 1px var(--call-glass-edge), var(--popover-shadow); border: 0; } } @media (prefers-reduced-transparency: reduce) { #appShell.is-in-room[data-tool="room"] .room-more__menu, .pip-meeting { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* AJ 2026-09-23: one "+" holds Upload / Files / GIF; the three separate circled buttons collapse under it (still mounted, so their own pickers anchor beside the composer) and the text takes the full width */ #chatTool .scout-chat-form { position: relative; } #chatTool .scout-chat-form > :is(#scoutChatAttach, #scoutChatDeliverables, #scoutChatGif) { position: absolute; left: 8px; bottom: 8px; width: 40px; height: 40px; opacity: 0; pointer-events: none; z-index: -1; } .scout-chat-add { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; } .scout-chat-add:hover { background: var(--well); color: var(--text-1); } .scout-chat-add:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; } .scout-chat-add[aria-expanded="true"] { background: var(--well); color: var(--text-1); } #chatTool .scout-chat-form > .scout-chat-input { flex: 1 1 auto; min-width: 0; } .scout-chat-add__menu .bf-menu__item { display: flex; align-items: center; gap: 10px; } /* AJ 2026-09-23: in a call the stage speaks for itself — no "room · date" header text; only the tiny "Transcribing" indicator while it happens */ #appShell.is-in-room #stageMeetingText { display: none; } #appShell.is-in-room .stage-chrome__meeting #roomTranscriptPill { margin-left: 0; } /* W-02: while Scout answers, Send is a neutral Stop (filled rounded square) */ .scout-chat-send[data-mode="stop"] { background: var(--text-1); color: var(--surface-1); } .scout-chat-send[data-mode="stop"] svg { display: none; } .scout-chat-send[data-mode="stop"]::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: currentColor; } /* W-03: a stopped or failed send is one quiet meta line, never a box */ .scout-chat-send-note, .scout-chat-stopped-note { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 0; font: var(--type-meta, 400 12px/1.4 var(--font-sans)); color: var(--text-3); letter-spacing: 0; } .scout-chat-send-note { justify-content: flex-end; } .scout-chat-send-note__retry { min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--text-1); font: 500 12px/1 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* W-12: touch has no hover — the open row keeps a reachable 44px Archive */ @media (hover: none) { #chatTool .chat-thread-item[aria-pressed="true"] .chat-thread-item__archive { opacity: 1; width: 44px; height: 44px; } } /* W-41: single org — no create flow in the org menu */ #topbarOrganizationCreate { display: none; } /* W-17: mono is for machine facts only; names, labels and chips are sans */ :is(.noise-mode-tag, .chat-convo-popover__count, .chat-convo-member__owner, .scout-followup-chip__eyebrow, .lobby__upcoming-when, .lobby__zone, .lobby__chip, .settings-sheet-theme button, .tool-rail__account-text, .room-captions__who, .room-reaction-burst__who, .greenroom__device-label, .files-folder-chip__count, .files-row__tag) { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; } .video-tile.is-hand-raised .video-label::after { font-family: var(--font-sans); letter-spacing: 0; } .settings-scout-summary { margin: 4px 0 12px; color: var(--text-2); font: 400 14px/1.45 var(--font-sans); } .settings-scout-details > summary { cursor: pointer; color: var(--text-2); font: 500 13px/1.3 var(--font-sans); min-height: 44px; display: flex; align-items: center; } /* W-58: balanced wrapping for headings and short lines */ h1, h2, h3, .home-door__title, .lobby__joinerror, .scout-chat-empty__title { text-wrap: balance; } p { text-wrap: pretty; } .global-search__status:empty { display: none; } /* W-22: a call carries no room identity chrome */ #appShell.is-in-room[data-tool="room"] :is(.stage-chrome__occupancy, #topbarRoomPill) { display: none; } /* W-25: the reorder handle is a hover affordance only */ @media (hover: none) { #appShell.is-in-room .hearth-seat .video-reorder-handle { display: none; } } @media (hover: hover) { #appShell.is-in-room .hearth-seat:hover .video-reorder-handle { transition-delay: 300ms; } } /* W-27: PiP off states are neutral, like the dock */ .pip-control.is-off { background: var(--call-glass-off); color: var(--text-1); border-color: transparent; } /* W-35/W-C11: no status dot or "Preview" word under the lobby preview */ .greenroom__livedot { display: none; } .greenroom__status:has(.greenroom__statustext:empty) { display: none; } .lobby__rail-label[hidden], .greenroom__finetune[hidden] { display: none; } /* W-C17: the Upcoming section hides when there is nothing scheduled */ .lobby__upcoming-empty { display: none; } .settings-advanced[hidden] { display: none; } .scout-chat-form.is-drop-target, .chat-context-reply.is-drop-target { outline: 2px dashed var(--ring); outline-offset: 2px; } /* Freshness pass (AJ 2026-09-23): no card-in-card. Chat is full-bleed on desktop — the list sits on the canvas, the conversation on the surface, one hairline between them (the resizer's), no outer bordered card. */ @media (min-width: 641px) { #appShell.is-authed[data-tool="chat"] .workspace { padding: 0; } #appShell.is-authed #chatTool { border: 0; border-radius: 0; } #chatTool .chat-threads { border-right: 0; } #chatTool .chat-workspace-resizer::after { background: var(--line-1); } } /* The audience line is a disclosure caption ("nothing is private in the OS"): access control stays server-side, the caption goes. */ #chatTool .desktop-chat-context { display: none; } /* Dark: primary buttons are white, so the current destination takes the quiet selection fill instead of a second white slab. */ html[data-theme="dark"] #appShell .pd1-primary-nav__item[aria-current="page"] { background: color-mix(in srgb, var(--text-1) 8%, transparent); color: var(--text-1); } /* Current row is a quiet fill, never a bordered box. */ #chatTool .chat-thread-item[aria-pressed="true"] { box-shadow: none; background: var(--selection); } /* Settings freshness (2026-09-23): no card-in-card, one title scale, grouped lists with switches instead of a bordered box per row, theme as picture tiles. Every colour is a token (or a color-mix of one). */ .settings-body > section { max-width: 640px; } .settings-body :is(.profile-settings, .account-settings, .relationship-memory) { border: 0; background: none; padding: 0; box-shadow: none; border-radius: 0; } .settings-body > section > h3, .settings-body .settings-section-title, .settings-body .relationship-memory__head h3, .settings-body > section > .voice-profile__label:first-child, .settings-body .theme-mode-group > legend { font: 600 22px/1.25 var(--font-sans); letter-spacing: -.02em; color: var(--text-1); margin: 0 0 20px; padding: 0; text-transform: none; } .settings-body .settings-subtitle, .settings-body > section > .voice-profile__label:not(:first-child), .settings-body .noise-mode-group:not(.theme-mode-group) > legend { font: 600 13px/1.4 var(--font-sans); letter-spacing: 0; color: var(--text-2); margin: 28px 0 10px; padding: 0; text-transform: none; } .settings-body .relationship-memory__head { align-items: baseline; } .settings-body .relationship-memory__state { background: none; border: 0; padding: 0; color: var(--text-3); font: 400 13px/1.4 var(--font-sans); } .settings-body .relationship-memory__notice { background: none; border: 0; padding: 0; color: var(--text-2); } /* grouped list: one quiet fill, hairlines between rows, no per-row borders */ .settings-body .push-kinds { display: flex; flex-direction: column; gap: 0; border-radius: 14px; background: var(--surface-3); overflow: hidden; } .settings-body .noise-mode-group:not(.theme-mode-group) { display: block; border: 0; padding: 0; margin: 0; background: none; } .settings-body .noise-mode-group:not(.theme-mode-group) :is(.noise-mode-option, .settings-advanced) { background: var(--surface-3); } .settings-body .noise-mode-group:not(.theme-mode-group) > .noise-mode-option:first-of-type { border-radius: 14px 14px 0 0; } .settings-body .noise-mode-group:not(.theme-mode-group) > .settings-advanced { border-radius: 0 0 14px 14px; overflow: hidden; } .settings-body .push-setting, .settings-body .wake-word-setting, .settings-body .noise-mode-group:not(.theme-mode-group) .noise-mode-option { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 0; background: none; box-shadow: none; transition: background-color var(--dur-fast) var(--ease); } .settings-body .push-setting[hidden] { display: none; } .settings-body .push-setting + .push-setting, .settings-body .noise-mode-group:not(.theme-mode-group) .noise-mode-option + .noise-mode-option, .settings-body .noise-mode-group:not(.theme-mode-group) .noise-mode-option + .settings-advanced, .settings-body .noise-mode-group:not(.theme-mode-group) .settings-advanced[open] .noise-mode-option { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-1) 9%, transparent); } .settings-body .push-setting:hover { background: color-mix(in srgb, var(--text-1) 4%, transparent); } .settings-body .noise-mode-group:not(.theme-mode-group) .noise-mode-option:hover { background: color-mix(in srgb, var(--text-1) 4%, var(--surface-3)); } .settings-body .push-setting > span, .settings-body .wake-word-setting__text { flex: 1; min-width: 0; order: 0; color: var(--text-1); font: 400 15px/1.4 var(--font-sans); } .settings-body .wake-word-setting { border-radius: 14px; background: var(--surface-3); } .settings-body .wake-word-setting__text strong { font: 500 15px/1.4 var(--font-sans); color: var(--text-1); } .settings-body .wake-word-setting__text span { color: var(--text-2); font-size: 13px; } .settings-body #pushPermissionWarn { margin: 10px 4px 24px; } /* switches (native checkbox, restyled; still a checkbox to AT) */ .settings-body :is(.push-setting, .wake-word-setting) input[type="checkbox"] { order: 1; appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: var(--r-full); background: color-mix(in srgb, var(--text-1) 20%, transparent); cursor: pointer; transition: background-color 120ms var(--ease); } .settings-body :is(.push-setting, .wake-word-setting) input[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-1); box-shadow: var(--shadow-1); transition: transform 220ms var(--ease); } .settings-body :is(.push-setting, .wake-word-setting) input[type="checkbox"]:checked { background: var(--accent); } .settings-body :is(.push-setting, .wake-word-setting) input[type="checkbox"]:checked::before { transform: translateX(18px); background: var(--on-accent); } .settings-body :is(.push-setting, .wake-word-setting) input[type="checkbox"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* single-choice rows: a checkmark on the chosen row instead of radio circles */ .settings-body .noise-mode-group:not(.theme-mode-group) .noise-mode-control { display: none; } .settings-body .noise-mode-group:not(.theme-mode-group) .noise-mode-text { flex: 1; } .settings-body .noise-mode-group:not(.theme-mode-group) .noise-mode-option::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--text-1); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transform: scale(.6); transition: opacity 120ms var(--ease), transform 220ms var(--ease); } .settings-body .noise-mode-group:not(.theme-mode-group) .noise-mode-option:has(input:checked)::after { opacity: 1; transform: none; } .settings-body .noise-mode-group:not(.theme-mode-group) .noise-mode-option:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; } .settings-body .settings-advanced { padding: 0; } .settings-body .settings-advanced__summary { padding: 14px 16px; color: var(--text-2); } /* theme: three picture tiles */ .settings-body .theme-mode-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border: 0; padding: 0; margin: 0; } .settings-body .theme-mode-group .noise-mode-option { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; } .settings-body .theme-mode-group .noise-mode-option:hover, .settings-body .theme-mode-group .noise-mode-option:has(input:checked) { background: none; border: 0; } .settings-body .theme-mode-group .noise-mode-control { display: none; } .settings-body .theme-mode-group .workspace-theme-swatch { width: 100%; height: auto; aspect-ratio: 16 / 11; border: 0; border-radius: 14px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-1) 12%, transparent); transition: box-shadow 120ms var(--ease), transform 220ms var(--ease); } .settings-body .theme-mode-group .noise-mode-option:hover .workspace-theme-swatch { transform: translateY(-2px); } .settings-body .theme-mode-group .noise-mode-option:has(input:checked) .workspace-theme-swatch { box-shadow: 0 0 0 2px var(--text-1); } .settings-body .theme-mode-group .noise-mode-option:has(input:focus-visible) .workspace-theme-swatch { box-shadow: 0 0 0 2px var(--text-1), 0 0 0 5px var(--ring); } .settings-body .theme-mode-group .noise-mode-text { justify-items: center; } .settings-body .theme-mode-group .noise-mode-text strong { font: 500 14px/1.3 var(--font-sans); } /* miniature window: rail strip + content block + one bubble */ .settings-body .workspace-theme-swatch--sand { background: linear-gradient(var(--theme-swatch-sand-accent), var(--theme-swatch-sand-accent)) 10% 22% / 18% 9% no-repeat, linear-gradient(color-mix(in srgb, var(--theme-swatch-sand-ink) 14%, transparent), color-mix(in srgb, var(--theme-swatch-sand-ink) 14%, transparent)) 88% 70% / 40% 14% no-repeat, linear-gradient(color-mix(in srgb, var(--theme-swatch-sand-ink) 8%, transparent), color-mix(in srgb, var(--theme-swatch-sand-ink) 8%, transparent)) 0 0 / 30% 100% no-repeat, var(--theme-swatch-sand-ground); } .settings-body .workspace-theme-swatch--ink { background: linear-gradient(var(--theme-swatch-ink-accent), var(--theme-swatch-ink-accent)) 10% 22% / 18% 9% no-repeat, linear-gradient(color-mix(in srgb, var(--theme-swatch-ink-accent) 18%, transparent), color-mix(in srgb, var(--theme-swatch-ink-accent) 18%, transparent)) 88% 70% / 40% 14% no-repeat, linear-gradient(color-mix(in srgb, var(--theme-swatch-ink-accent) 7%, transparent), color-mix(in srgb, var(--theme-swatch-ink-accent) 7%, transparent)) 0 0 / 30% 100% no-repeat, var(--theme-swatch-ink-ground); } .settings-body .workspace-theme-swatch--system { background: linear-gradient(90deg, var(--theme-swatch-sand-ground) 50%, var(--theme-swatch-ink-ground) 50%); } @media (max-width: 480px) { .settings-body .theme-mode-group { gap: 10px; } } @media (prefers-reduced-motion: reduce) { .settings-body :is(.push-setting, .wake-word-setting) input[type="checkbox"]::before, .settings-body .theme-mode-group .workspace-theme-swatch, .settings-body .noise-mode-option::after { transition: none; } } .settings-body .theme-mode-group > legend { padding-bottom: 18px; } .settings-body .noise-mode-group:not(.theme-mode-group) > .noise-mode-option, .settings-body .noise-mode-group:not(.theme-mode-group) > .settings-advanced .noise-mode-option { background: var(--surface-3); } .settings-body .noise-mode-group:not(.theme-mode-group) > .noise-mode-option:hover { background: color-mix(in srgb, var(--text-1) 4%, var(--surface-3)); } /* Lobby freshness (2026-09-23): no card around the lobby, the preview is the hero, device controls float over it as glass (like the in-call dock), and rail actions are quiet text buttons rather than bordered boxes. Scoped to the lobby (.room-empty); the guest gate keeps its own stack. */ .room-empty .lobby__panel { border: 0; background: none; box-shadow: none; } .room-empty .greenroom__previewrow { position: relative; } .room-empty .greenroom__tile { border: 0; border-radius: 20px; } .room-empty .greenroom__stack { position: absolute; left: 50%; bottom: 16px; z-index: 3; flex-direction: row; gap: 12px; transform: translateX(-50%); } .room-empty .greenroom__ctl, .room-empty .greenroom__ctl[aria-pressed="true"] { width: 48px; height: 48px; border: 0; background: var(--glass-media); color: var(--stage-overlay-text); box-shadow: var(--glass-media-highlight); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); transition: background-color 120ms var(--ease), transform 220ms var(--ease); } .room-empty .greenroom__ctl:hover { background: var(--glass-media-hover); border: 0; } .room-empty .greenroom__ctl:active { transform: scale(.94); } .room-empty .greenroom__ctl[aria-pressed="false"] { background: var(--stage-overlay-text); color: var(--bg-stage); } .room-empty .greenroom__ctl[aria-pressed="false"] svg { opacity: 1; } .room-empty :is(#greenRoomMicChip, #greenRoomCamChip)::after { display: none; } .room-empty .greenroom__filtersbtn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--stage-overlay-text); } .room-empty .greenroom__filters { top: auto; right: auto; bottom: calc(100% + 12px); left: 50%; translate: -50% 0; transform-origin: bottom center; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .room-empty .greenroom__ctl { background: var(--glass-media-hover); } } @media (prefers-reduced-transparency: reduce) { .room-empty .greenroom__ctl { background: var(--glass-media-hover); -webkit-backdrop-filter: none; backdrop-filter: none; } } .room-empty .lobby__new { justify-content: flex-start; gap: 10px; min-height: 44px; padding-inline: 12px; border: 0; background: none; color: var(--text-2); border-radius: 12px; transition: background-color 120ms var(--ease), color 120ms var(--ease); } .room-empty .lobby__new:hover { background: color-mix(in srgb, var(--text-1) 5%, transparent); color: var(--text-1); } .room-empty .lobby__upcoming { border: 0; padding-top: 0; margin-top: 0; } /* a header over nothing is noise: "Upcoming" appears only with meetings */ .room-empty .lobby__upcoming:not(:has(.lobby__upcoming-row)) .lobby__upcoming-label { display: none; } .room-empty .room-empty__join { border-radius: 14px; min-height: 52px; font-weight: 600; transition: transform 220ms var(--ease), background-color 120ms var(--ease); } .room-empty .room-empty__join:active { transform: scale(.98); } @media (max-width: 640px) { .room-empty .lobby__panel { padding-inline: 0; } .room-empty .greenroom__tile { aspect-ratio: 4 / 5; max-height: 52vh; } } /* Sign-in film (creative/signin/INTEGRATION.md v2, graphite dark card). Layers: film (dims itself behind the card) → hearth-well scrim → glass card → optional rim light. All values are tokens in legacy-tokens.css. */ .login-film { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--login-film-ground); pointer-events: none; contain: strict; } .login-film__poster, .login-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; } .login-film__video { opacity: 0; transition: opacity 1200ms cubic-bezier(.2, .7, .2, 1); } .login-film.is-playing .login-film__video { opacity: 1; } #appShell.is-authed .login-film { display: none; } #appShell:not(.is-authed) .workspace { background: none; } #appShell:not(.is-authed) .access-panel { position: relative; z-index: 1; } .login-film__scrim { position: absolute; inset: 0; background: radial-gradient(ellipse clamp(340px, 56vw, 760px) clamp(420px, 54vh, 640px) at 50% 47%, rgb(var(--login-film-ink) / .52) 0%, rgb(var(--login-film-ink) / .34) 42%, rgb(var(--login-film-ink) / .10) 78%, rgb(var(--login-film-ink) / 0) 100%), linear-gradient(180deg, rgb(var(--login-film-ink) / .26) 0%, rgb(var(--login-film-ink) / 0) 26%); } /* the lockup sits on the film: graphite in both themes, never orange; no tagline */ #appShell:not(.is-authed) .login-head { --wordmark: var(--login-film-wordmark); } #appShell:not(.is-authed) .login-wordmark { background: var(--login-film-wordmark); } #appShell:not(.is-authed):not(.is-guest) .login-subline { display: none; } #appShell:not(.is-authed) .login-theme { color: var(--login-film-wordmark); } /* glass card, theme-following */ #appShell:not(.is-authed) :is(.login-card, .guest-exit) { --text-1: var(--login-card-text-1); --text-2: var(--login-card-text-2); --text-3: var(--login-card-text-3); --accent: var(--login-card-accent); --on-accent: var(--login-card-on-accent); background: var(--login-card-fill); -webkit-backdrop-filter: var(--login-card-filter); backdrop-filter: var(--login-card-filter); border: 1px solid var(--login-card-stroke); box-shadow: var(--login-card-shadow); } #appShell:not(.is-authed) .login-card :is(input, select) { background: var(--login-field-fill); border-color: var(--login-field-stroke); } #appShell:not(.is-authed) .login-divider__label { color: var(--text-2); } #appShell:not(.is-authed) .login-card { position: relative; isolation: isolate; } #appShell:not(.is-authed) .login-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(0deg, var(--login-rim), transparent 38%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #appShell:not(.is-authed) :is(.login-card, .guest-exit) { background: var(--login-card-fill-solid); } } @media (prefers-reduced-transparency: reduce) { #appShell:not(.is-authed) :is(.login-card, .guest-exit) { background: var(--login-card-fill-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .login-film__video { display: none; } } /* Notifications: rows sit directly in the panel — no inner card. */ .notification-panel__list { background: none; box-shadow: none; border: 0; } /* ===== Speaking ring, for good (2026-09-23) ===== The ring is an INSET overlay on the tile's own ::after — never an outer box-shadow, outline or border (a clipping ancestor cuts those off) and never a scale emphasis (it pushes the edge past the clip). inset:0 + border-radius:inherit means the ring box IS the tile box, so every side and corner survives any overflow:hidden parent, grid gap or rounded stage. Pinned by TestCallSpeakingRingIsAnInsetOverlayInsideEveryClip. */ #appShell .video-tile.is-active-speaker, #appShell .hearth-seat.is-active-speaker, #appShell .hearth-stage[data-room-layout] .hearth-seat.is-active-speaker, #appShell .presentation-tile.is-screen-sharing .hearth-seat.is-active-speaker, body .pip-tile.is-speaker { box-shadow: none; outline: 0; } #appShell .video-tile.is-active-speaker:not(.is-dragging) { transform: none; } body .pip-tile::after { content: ""; } #appShell .video-tile::after, body .pip-tile::after { position: absolute; inset: 0; z-index: 7; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--tile-edge); transition: box-shadow 120ms var(--ease); } #appShell .video-tile.is-active-speaker::after, body .pip-tile.is-speaker::after, #appShell .hearth-stage[data-room-layout] .hearth-seat.is-active-speaker::after { box-shadow: inset 0 0 0 2px var(--speaker-accent), inset 0 0 0 3px color-mix(in srgb, var(--bg-stage) 30%, transparent); } /* the "+N" door keeps its label; the ring still draws on its edge */ #appShell.is-in-room .hearth-seat.is-strip-more.is-active-speaker::after { box-shadow: inset 0 0 0 2px var(--speaker-accent); } @media (prefers-reduced-motion: reduce) { #appShell .video-tile::after, body .pip-tile::after { transition: none; } } /* ===== Prejoin, immersive (AJ 2026-09-23, ref palette/v2/prejoin-graphite) ===== A large self-preview with glass controls on it, and one side column: the room, who is here, one Join. The rooms switcher sits quietly below it. */ .room-empty .lobby__who { display: grid; gap: 14px; width: 100%; text-align: left; } .room-empty .lobby__who[hidden] { display: none; } .room-empty .lobby__title { margin: 0; color: var(--text-1); font: 600 28px/1.15 var(--font-sans); letter-spacing: -.025em; text-wrap: balance; } .room-empty .lobby__who-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; color: var(--text-2); font: 400 15px/1.4 var(--font-sans); } .room-empty .lobby__faces { display: flex; } .room-empty .lobby__faces:empty { display: none; } .room-empty .lobby__faces .home-door__face { width: 34px; height: 34px; margin-left: -8px; border: 2px solid var(--bg-app); border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-1); font: 600 13px/1 var(--font-sans); } .room-empty .lobby__faces .home-door__face:first-child { margin-left: 0; } .room-empty .lobby__who[data-live="true"] .lobby__who-text::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--live); vertical-align: 1px; } .room-empty .lobby__who-row:has(.lobby__faces:not(:empty)) { row-gap: 10px; } .room-empty .lobby__who-row .lobby__faces:not(:empty) { flex-basis: 100%; } .room-empty .room-empty__join { width: 100%; border-radius: var(--r-full); min-height: 54px; font-size: 16px; } /* tablet portrait: stack, but the preview is big */ @media (min-width: 641px) and (max-width: 1023px) { #appShell .room-empty { padding: 28px 32px; justify-content: center; } #appShell .room-empty .lobby__panel { flex-direction: column; align-items: stretch; width: 100%; max-width: 640px; padding: 0; gap: 22px; } #appShell .room-empty .lobby__center { max-width: none; align-items: stretch; gap: 22px; } #appShell .room-empty .greenroom__tile { aspect-ratio: 4 / 3; max-height: 56vh; } #appShell .room-empty .lobby__rail { width: 100%; order: 3; } } /* desktop / iPad landscape: preview fills the left, one side column */ @media (min-width: 1024px) { #appShell .room-empty { padding: 32px 40px; justify-content: center; } #appShell .room-empty .lobby__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-rows: 1fr repeat(6, auto) 1fr; column-gap: clamp(32px, 4vw, 56px); row-gap: 18px; width: 100%; max-width: 1360px; flex: 1 1 auto; min-height: 0; max-height: 860px; margin: 0 auto; padding: 0; align-items: start; transform: none; } #appShell .room-empty .lobby__center { display: contents; } #appShell .room-empty .greenroom { grid-column: 1; grid-row: 1 / -1; align-self: stretch; width: 100%; height: 100%; min-height: 0; } #appShell .room-empty .greenroom__previewrow { height: 100%; } #appShell .room-empty .greenroom__tile { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 28px; } #appShell .room-empty .greenroom__devices { display: none; } #appShell .room-empty .lobby__who { grid-column: 2; grid-row: 2; margin-bottom: 8px; } #appShell .room-empty .lobby__badges { grid-column: 2; grid-row: 3; justify-content: flex-start; } #appShell .room-empty .lobby__passgate { grid-column: 2; grid-row: 4; } #appShell .room-empty #roomEmptyJoin { grid-column: 2; grid-row: 5; } #appShell .room-empty .lobby__joinerror { grid-column: 2; grid-row: 6; text-align: left; } #appShell .room-empty .lobby__rail { grid-column: 2; grid-row: 7; width: 100%; order: 0; margin-top: 18px; text-align: left; } #appShell .room-empty .lobby__rail .lobby__list { max-height: 30vh; } #appShell .room-empty .greenroom__stack { bottom: 22px; gap: 14px; } #appShell .room-empty .greenroom__ctl { width: 52px; height: 52px; } } @media (min-width: 1024px) { #appShell .room-empty .greenroom { align-self: center; height: auto; } #appShell .room-empty .greenroom__previewrow { height: auto; } /* landscape window, landscape preview: 16:10 across the left column */ #appShell .room-empty .greenroom__tile { width: 100%; height: auto; aspect-ratio: 16 / 10; max-height: calc(100vh - 150px); } } /* ===== In-call stage fills the viewport (AJ 2026-09-23) ===== Tablet and desktop: no top bar band in a call (no room name, no pills, nothing to read there), the stage runs edge to edge beside the rail. */ @media (min-width: 641px) { #appShell.is-authed.is-in-room[data-tool="room"] { --shell-topbar-height: 0px; } #appShell.is-authed.is-in-room[data-tool="room"] > .topbar, #appShell.is-authed.is-in-room[data-tool="room"] .topbar { display: none; } } @media (min-width: 641px) { #appShell.is-authed.is-in-room[data-tool="room"]:not(.is-room-chat-open) .workspace { grid-template-rows: minmax(0, 1fr); align-content: stretch; } #appShell.is-authed.is-in-room[data-tool="room"]:not(.is-room-chat-open) .presentation-tile { height: 100%; min-height: 0; padding-top: 20px; } } /* Dock auto-hide: slides down and fades after idle (syncCallDockAutoHide); `translate` composes with the dock's own centering transform. */ #appShell.is-in-room[data-tool="room"] .meeting-bar { transition: translate 220ms cubic-bezier(.2, .8, .2, 1), opacity 120ms var(--ease); } #appShell.is-in-room.is-dock-idle[data-tool="room"] .meeting-bar { translate: 0 calc(100% + 28px); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { #appShell.is-in-room[data-tool="room"] .meeting-bar { transition: opacity 120ms linear; } #appShell.is-in-room.is-dock-idle[data-tool="room"] .meeting-bar { translate: none; } } /* the stage fills the viewport; the glass dock floats over its bottom edge (no reserved band that would sit dead while the dock is hidden) */ @media (min-width: 641px) { #appShell.is-authed.is-in-room[data-tool="room"] .presentation-tile { padding-bottom: 20px; } } /* In-call side panel (chat / transcript / recap): a full-height column that resizes the stage (≥1000); below that it is a sheet under the stage. */ @media (min-width: 1000px) and (min-height: 601px) { #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .workspace { grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 400px); grid-template-rows: minmax(0, 1fr); align-content: stretch; } #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .scout-rail { align-self: stretch; height: 100%; max-height: none; } #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) :is(#roomChatPanel, .room-chat) { height: 100%; max-height: none; } } @media (min-width: 641px) and (max-width: 999px) { #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .workspace { grid-template-rows: auto auto; } #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) .hearth-presentation { padding: 20px 20px 12px; height: auto; } #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) #hearthStage { height: 50dvh; min-height: 280px; max-height: 560px; } #appShell.is-authed.is-room-chat-open.is-in-room[data-tool="room"]:not(.is-board-expanded) :is(#roomChatPanel, .room-chat) { height: calc(50dvh - 150px); min-height: 240px; max-height: 440px; } } /* Back and close: one borderless glass circle everywhere (AJ 2026-09-23) — no bordered squares. 36px visual, 44px hit via the ::before halo. */ :is(#topbarBack, #chatConvoBack, #globalSearchClose, #roomChatClose, #roomWorkActivityClose, #chatContextClose, #consentClose, #osAssistantClose, #notificationClose, #settingsClose, #memoryImportClose, .home-project-chooser__close, .bsheet__close) { position: relative; place-items: center; justify-content: center; align-items: center; flex: none; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; outline: 0; background: color-mix(in srgb, var(--text-1) 8%, transparent); color: var(--text-1); box-shadow: none; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); transition: background-color 120ms var(--ease), transform 220ms var(--ease); } :is(#topbarBack, #chatConvoBack, #globalSearchClose, #roomChatClose, #roomWorkActivityClose, #chatContextClose, #consentClose, #osAssistantClose, #notificationClose, #settingsClose, #memoryImportClose, .home-project-chooser__close, .bsheet__close)::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; } :is(#topbarBack, #chatConvoBack, #globalSearchClose, #roomChatClose, #roomWorkActivityClose, #chatContextClose, #consentClose, #osAssistantClose, #notificationClose, #settingsClose, #memoryImportClose, .home-project-chooser__close, .bsheet__close):hover { background: color-mix(in srgb, var(--text-1) 14%, transparent); border: 0; } :is(#topbarBack, #chatConvoBack, #globalSearchClose, #roomChatClose, #roomWorkActivityClose, #chatContextClose, #consentClose, #osAssistantClose, #notificationClose, #settingsClose, #memoryImportClose, .home-project-chooser__close, .bsheet__close):active { transform: scale(.92); } :is(#topbarBack, #chatConvoBack, #globalSearchClose, #roomChatClose, #roomWorkActivityClose, #chatContextClose, #consentClose, #osAssistantClose, #notificationClose, #settingsClose, #memoryImportClose, .home-project-chooser__close, .bsheet__close):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } :is(#topbarBack, #chatConvoBack, #globalSearchClose, #roomChatClose, #roomWorkActivityClose, #chatContextClose, #consentClose, #osAssistantClose, #notificationClose, #settingsClose, #memoryImportClose, .home-project-chooser__close, .bsheet__close)[hidden] { display: none; } @media (prefers-reduced-transparency: reduce) { :is(#topbarBack, #chatConvoBack, #globalSearchClose, #roomChatClose, #roomWorkActivityClose, #chatContextClose, #consentClose, #osAssistantClose, #notificationClose, #settingsClose, #memoryImportClose, .home-project-chooser__close, .bsheet__close) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-3); } } /* Files freshness (2026-09-23): no dashed box, no second "+ New folder" chip, quiet borderless header actions, sans storage line. */ #filesTool .files-upload { border: 0; border-radius: 20px; background: color-mix(in srgb, var(--text-1) 4%, transparent); min-height: 150px; transition: background-color 120ms var(--ease), box-shadow 120ms var(--ease); } #filesTool .files-upload:hover { background: color-mix(in srgb, var(--text-1) 7%, transparent); } #filesTool .files-upload:is(.is-dragover, .is-drag-over, [data-drag="over"]) { box-shadow: inset 0 0 0 2px var(--ring); } #filesTool .files-folder-chip--new { display: none; } #filesTool :is(.drive-heading__action, .files-seg, .workspace-files-search) { border-color: transparent; } #filesTool .drive-heading__action { background: color-mix(in srgb, var(--text-1) 5%, transparent); border-radius: var(--r-full); transition: background-color 120ms var(--ease); } #filesTool .drive-heading__action:hover { background: color-mix(in srgb, var(--text-1) 10%, transparent); } #filesTool .workspace-files-search { background: color-mix(in srgb, var(--text-1) 5%, transparent); border-radius: var(--r-full); } #filesTool .files-seg { background: color-mix(in srgb, var(--text-1) 5%, transparent); } #filesTool .files-folder-chip { border-color: transparent; } #filesTool .drive-usage { border-top-color: transparent; } #filesTool .drive-usage__label { font: 400 12px/1.4 var(--font-sans); letter-spacing: 0; color: var(--text-3); } #filesTool .drive-sidebar { border-right-color: transparent; } /* Search: selection and focus are quiet — neutral fill for the active row and scope, no orange frame around an input that already has the caret. */ #globalSearchRail .global-search__field, #globalSearchRail .global-search__field:focus-within { outline: 0; box-shadow: none; border-color: transparent; } #globalSearchRail .global-search__input:focus, #globalSearchRail .global-search__input:focus-visible { outline: 0; box-shadow: none; } #globalSearchRail .global-search__row.is-active { background: var(--selection); box-shadow: none; border-color: transparent; } #globalSearchRail .global-search__scope { border-color: transparent; } #globalSearchRail .global-search__scope[aria-pressed="true"] { background: var(--selection); color: var(--text-1); box-shadow: none; } /* Scout empty state: example prompts are soft tiles, not bordered boxes */ #chatTool .scout-chat-empty__prompt { border-color: transparent; border-radius: 14px; background: color-mix(in srgb, var(--text-1) 5%, transparent); transition: background-color 120ms var(--ease), transform 220ms var(--ease); } #chatTool .scout-chat-empty__prompt:hover { border-color: transparent; background: color-mix(in srgb, var(--text-1) 9%, transparent); } #chatTool .scout-chat-empty__prompt:active { transform: scale(.98); } /* ===== Hearth glow (PROTOTYPE 2026-09-23, awaiting AJ) ===== The sign-in world, faintly: one fixed, static pseudo-element behind Home and the Meetings lobby only — warmth rising from the bottom edge, a faint cool haze at the top in dark. No motion, no video, no layout. Off with --hearth-glow: 0. Glass surfaces pick it up through backdrop-filter. */ #appShell.is-authed::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease); background: radial-gradient(120% 60% at 50% 100%, var(--hearth-glow-warm) 0%, transparent 75%), radial-gradient(90% 40% at 50% 0%, var(--hearth-glow-cool) 0%, transparent 80%); } #appShell.is-authed:is([data-tool="office"], [data-tool="room"]:not(.is-in-room))::before { opacity: var(--hearth-glow, 0); } #appShell.is-authed:is([data-tool="office"], [data-tool="room"]:not(.is-in-room)) :is(.workspace, #officeTool, .office-launch, .room-empty, #presentationTile, #hearthStage) { background: transparent; } /* In-app mini call: a row of up to three others, paged (AJ 2026-09-24) */ @media (min-width: 641px) { .pip-meeting { width: 340px; } } @media (max-width: 640px) { .pip-meeting :is(.pip-page, .pip-page-count) { display: none !important; } } @media (min-width: 641px) { .pip-meeting .pip-meeting__tiles { display: grid; }} .pip-meeting .pip-meeting__tiles { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 6px; outline: none; } .pip-meeting .pip-meeting__tiles .pip-tile { aspect-ratio: 4 / 3; cursor: pointer; } .pip-meeting .pip-meeting__tiles[data-count="1"] .pip-tile { aspect-ratio: 16 / 10; } .pip-meeting .pip-meeting__tiles:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 12px; } .pip-meeting .pip-page { position: absolute; z-index: 4; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-full); background: var(--glass-media); color: var(--stage-overlay-text); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); cursor: pointer; transition: opacity 120ms var(--ease), transform 220ms var(--ease); } .pip-meeting .pip-page[hidden] { display: none; } .pip-meeting .pip-page:active:not(:disabled) { transform: scale(.9); } .pip-meeting .pip-page:disabled { opacity: .35; cursor: default; } .pip-meeting .pip-page--prev { left: 6px; top: calc(50% - 22px); } .pip-meeting .pip-page--next { right: 6px; top: calc(50% - 22px); } .pip-meeting .pip-page-count { position: absolute; top: 44px; right: 12px; z-index: 4; padding: 2px 8px; border-radius: var(--r-full); background: var(--glass-media); color: var(--stage-overlay-text); font: 500 11px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; } .pip-meeting .pip-page-count[hidden] { display: none; } /* self seat last in the grid / rail (AJ 2026-09-24); a dragged order wins */ #videoStack:not(.has-custom-order) > .video-tile.is-local { order: 99; } /* Presenter mode: your self seat and your own share leave the stage; the others take it (grid), and a compact glass indicator says you're sharing */ #appShell.is-in-room .presentation-tile.is-presenting .screen-stage { display: none; } @media (min-width: 641px) { #appShell.is-in-room .presentation-tile.is-screen-sharing.is-presenting { grid-template-columns: minmax(0, 1fr); } #appShell.is-in-room .presentation-tile.is-screen-sharing.is-presenting .hearth-stage { grid-column: 1; grid-row: 1; height: 100%; } } .presenting-indicator { position: absolute; top: 16px; left: 50%; z-index: 12; display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: var(--r-full); background: var(--glass-media); color: var(--stage-overlay-text); box-shadow: var(--glass-media-highlight), var(--shadow-2); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); font: 500 14px/1 var(--font-sans); translate: -50% 0; } .presenting-indicator[hidden] { display: none; } .presenting-indicator__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); } .presenting-indicator__stop { min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-full); background: var(--call-leave-fill); color: var(--on-call-leave); font: 600 13px/1 var(--font-sans); cursor: pointer; transition: background-color 120ms var(--ease), transform 220ms var(--ease); } .presenting-indicator__stop:hover { background: var(--call-leave-fill-hover); } .presenting-indicator__stop:active { transform: scale(.95); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .presenting-indicator { background: var(--glass-media-hover); } } /* ===== Self-view (AJ 2026-09-24) ===== */ .settings-body .self-view-setting { margin-top: 12px; border-radius: 14px; background: var(--surface-3); } #videoStack:not(.has-custom-order) > .video-tile.is-local { order: 0; } #videoStack.is-self-in-grid:not(.has-custom-order) > .video-tile.is-local { order: 99; } .hearth-stage { position: relative; } #appShell.is-in-room #videoStack > .video-tile.is-self-floating { position: absolute; z-index: 9; width: clamp(160px, 16vw, 240px); height: auto; aspect-ratio: 16 / 10; min-height: 0; max-height: none; flex: none; margin: 0; border-radius: 16px; box-shadow: var(--shadow-3); transition: top 220ms cubic-bezier(.2, .8, .2, 1), left 220ms cubic-bezier(.2, .8, .2, 1), right 220ms cubic-bezier(.2, .8, .2, 1), bottom 220ms cubic-bezier(.2, .8, .2, 1), width 200ms var(--ease), height 200ms var(--ease); touch-action: none; cursor: grab; } #appShell.is-in-room #videoStack > .video-tile.is-self-floating.is-self-dragging { transition: none; cursor: grabbing; } #appShell.is-in-room #videoStack > .video-tile.is-self-floating[data-corner="br"] { right: 16px; bottom: 100px; } #appShell.is-in-room #videoStack > .video-tile.is-self-floating[data-corner="bl"] { left: 16px; bottom: 100px; } #appShell.is-in-room #videoStack > .video-tile.is-self-floating[data-corner="tr"] { right: 16px; top: 16px; } #appShell.is-in-room #videoStack > .video-tile.is-self-floating[data-corner="tl"] { left: 16px; top: 16px; } #appShell.is-in-room #videoStack > .video-tile.is-self-floating .video-reorder-handle, #appShell.is-in-room #videoStack > .video-tile.is-self-floating .tile-pin { display: none; } /* the floating self-view sits on the stage box, not in the packed grid */ #appShell.is-in-room .hearth-center:has(> #videoStack > .is-self-floating) { position: static; } #appShell.is-in-room #videoStack:has(> .is-self-floating) { position: static; } .self-view__menu { position: absolute; top: 8px; right: 8px; z-index: 8; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-full); background: var(--glass-media); color: var(--stage-overlay-text); opacity: 0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; transition: opacity 120ms var(--ease); } .video-tile:hover .self-view__menu, .self-view__menu:focus-visible, .self-view__menu[aria-expanded="true"] { opacity: 1; } @media (hover: none) { .self-view__menu { opacity: 1; } } .self-view__pill { display: none; } /* minimized: a pill with your initials and mic state */ #appShell.is-in-room #videoStack > .video-tile.is-self-min { width: auto; aspect-ratio: auto; height: 40px; border-radius: var(--r-full); background: var(--glass-media); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); } #appShell.is-in-room #videoStack > .video-tile.is-self-min > :not(.self-view__pill) { display: none !important; } #appShell.is-in-room #videoStack > .video-tile.is-self-min::after { display: none; } #appShell.is-in-room #videoStack > .video-tile.is-self-min .self-view__pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border: 0; background: none; color: var(--stage-overlay-text); font: 600 13px/1 var(--font-sans); cursor: pointer; } .self-view__initials { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tile-monogram-fill); color: var(--tile-monogram-text); font-size: 12px; } .self-view__pill.is-muted .self-view__mic { color: var(--live); } /* hidden: a tiny glass edge tab brings it back (and the dock's ⋯ menu) */ .self-view-edge-tab { position: absolute; right: 0; bottom: 120px; z-index: 11; width: 14px; height: 56px; padding: 0; border: 0; border-radius: 10px 0 0 10px; background: var(--glass-media); opacity: 0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; transition: opacity 120ms var(--ease), width 120ms var(--ease); } .self-view-edge-tab[hidden] { display: none; } .presentation-tile:hover .self-view-edge-tab, .self-view-edge-tab:focus-visible { opacity: 1; } .self-view-edge-tab:hover { width: 20px; } .self-view-edge-tab span { display: block; width: 3px; height: 22px; margin: auto; border-radius: 2px; background: var(--stage-overlay-text); opacity: .7; } @media (prefers-reduced-motion: reduce) { #appShell.is-in-room #videoStack > .video-tile.is-self-floating { transition: none; } } #appShell #videoStack > .video-tile.is-self-hidden { display: none !important; } /* ===== Overlays, one system (overlays audit 2026-09-24) ===== Float glass (menus, pickers, popovers): popover glass + blur, no border, radius 12, items radius 8 (44px on touch). Dialogs: radius 20, shadow-3, the scrim token. One confirm (strideConfirm). */ .bf-menu { border: 0; border-radius: 12px; background: var(--popover-glass-fill); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: var(--popover-shadow); } .bf-menu__item { border-radius: 8px; } @media (pointer: coarse) { .bf-menu__item { min-height: 44px; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bf-menu, .glass-float { background: var(--surface-1); } } dialog::backdrop, .memory-import-dialog::backdrop, .home-project-chooser::backdrop, .project-correction-dialog::backdrop, .packaging-brief::backdrop, .drive-save-dialog::backdrop, .scout-chat-image-viewer::backdrop, .drive-previewer::backdrop, .stride-confirm::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } :is(.memory-import-dialog, .home-project-chooser, .project-correction-dialog, .packaging-brief, .drive-save-dialog, .stride-confirm, .settings-panel) { border: 0; box-shadow: var(--shadow-3); } :is(.memory-import-dialog, .home-project-chooser, .project-correction-dialog, .packaging-brief, .drive-save-dialog, .stride-confirm) { border-radius: 20px; } .glass-sheet { border: 0; } /* the one confirm */ .stride-confirm { width: min(420px, calc(100vw - 32px)); padding: 0; background: var(--surface-1); color: var(--text-1); } .stride-confirm[open] { animation: stride-confirm-in 220ms var(--ease); } @keyframes stride-confirm-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } } .stride-confirm__form { display: grid; gap: 12px; margin: 0; padding: 24px; } .stride-confirm__title { margin: 0; font: 600 19px/1.3 var(--font-sans); letter-spacing: -.01em; text-wrap: balance; } .stride-confirm__copy { margin: 0; color: var(--text-2); font: 400 15px/1.5 var(--font-sans); text-wrap: pretty; } .stride-confirm__input { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--surface-3); color: var(--text-1); font: 400 16px/1.4 var(--font-sans); } .stride-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } .stride-confirm__button, .drive-save-dialog__button { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-1); font: 500 15px/1 var(--font-sans); cursor: pointer; transition: background-color 120ms var(--ease), transform 120ms var(--ease); } .stride-confirm__button:active, .drive-save-dialog__button:active { transform: scale(.98); } .stride-confirm__button[data-primary="true"], .drive-save-dialog__button[data-primary="true"] { background: var(--accent); color: var(--on-accent); } .stride-confirm__button[data-danger="true"], .drive-save-dialog__button[data-danger="true"] { background: var(--danger-text); color: var(--stride-color-canvas); } .drive-save-dialog__eyebrow { display: none; } @media (prefers-reduced-motion: reduce) { .stride-confirm[open] { animation: none; } } /* one quiet offline banner */ .offline-banner { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 50%; z-index: 1500; padding: 8px 16px; border-radius: var(--r-full); background: var(--popover-glass-fill); color: var(--text-1); box-shadow: var(--popover-shadow); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); font: 500 14px/1.2 var(--font-sans); translate: -50% 0; } .offline-banner[hidden] { display: none; } /* one select / field well: borderless, the global focus ring */ :is(.field select, .field input, .device-select, .lobby__select, .lobby__input, .deck-editor__prop-input, .drive-save-dialog__input) { border: 0; border-radius: 12px; background: var(--surface-3); color: var(--text-1); box-shadow: none; } :is(.field select, .field input, .device-select, .lobby__select, .lobby__input, .deck-editor__prop-input, .drive-save-dialog__input):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: none; } #appShell:not(.is-authed) .login-card :is(input, select) { border: 1px solid var(--login-field-stroke); } /* topbar search pill and composers: no hairline borders */ :is(.global-search-pill, .workspace-files-search) { border: 0; background: color-mix(in srgb, var(--text-1) 6%, transparent); } #chatTool .scout-chat-form { border: 0; border-radius: 20px; background: var(--surface-3); } #chatTool .scout-chat-send, #roomChatPanel .scout-chat-send { width: 44px; height: 44px; min-width: 44px; border-radius: var(--r-full); } /* selected = neutral selection, never the primary accent */ :is(.lobby__chip[aria-pressed="true"], .video-look-chip.is-selected, .scout-choices__pill.is-selected, .room-island-toggle[aria-pressed="true"]) { background: var(--selection); color: var(--text-1); border-color: transparent; } .tool-rail__account-avatar, .topbar__avatar { background: var(--surface-3); color: var(--text-1); } .global-search-pill:hover { border: 0; background: color-mix(in srgb, var(--text-1) 10%, transparent); } .global-search-pill__kbd { border: 0; background: color-mix(in srgb, var(--text-1) 8%, transparent); } /* Content audit quick fixes */ /* reactions: neutral fill; yours is a stronger neutral, never peach + ember */ #chatTool :is(.desktop-chat-reactions button, .chat-context-card__reaction) { border: 0; background: color-mix(in srgb, var(--text-1) 7%, transparent); color: var(--text-1); box-shadow: none; } #chatTool :is(.desktop-chat-reactions button[aria-pressed="true"], .chat-context-card__reaction[aria-pressed="true"]) { background: color-mix(in srgb, var(--text-1) 16%, transparent); box-shadow: none; } /* search fields never trigger iOS zoom */ @media (max-width: 640px) { #globalSearchInput, .global-search__input, #chatThreadSearch, #filesSearch, input[type="search"] { font-size: 16px; } } /* a subtle caret while Scout is still writing */ .scout-chat-msg[data-streaming="true"] .scout-chat-text > :last-child::after, .scout-chat-msg.is-streaming .scout-chat-text > :last-child::after { content: ""; display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; border-radius: 2px; background: var(--text-3); vertical-align: -0.15em; animation: stride-caret 1s steps(2, start) infinite; } @keyframes stride-caret { to { visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .scout-chat-msg.is-streaming .scout-chat-text > :last-child::after, .scout-chat-msg[data-streaming="true"] .scout-chat-text > :last-child::after { animation: none; } } /* calls audit: the dock rests fully opaque; toasts and the share caption clear it */ #appShell.is-in-room[data-tool="room"] .meeting-bar { opacity: 1; } #appShell.is-in-room[data-tool="room"] .toast-region { bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); } #appShell.is-in-room :is(.video-tile, .hearth-seat, .pip-tile) { border-radius: 12px; } #appShell.is-in-room .video-tile .video-label { font: 500 12px/1.3 var(--font-sans); letter-spacing: 0; }