#dayroom{--dr-bg:light-dark(#f7f7f2,#181b19);--dr-panel:light-dark(#ffffff,#222723);--dr-ink:light-dark(#243c34,#edf2e9);--dr-muted:light-dark(#67766c,#b4c0b6);--dr-line:light-dark(#dde3d9,#3c473e);--dr-soft:light-dark(#ecf1e7,#303b30);--dr-accent:#cfef90;--dr-map:#253f36;--dr-floor:#cfb897;--dr-wall:#8b9d88;font-family:'Manrope',system-ui,sans-serif;font-size:14px;line-height:1.45;color:var(--dr-ink);background:var(--dr-bg);border:1px solid var(--dr-line);border-radius:16px;overflow:hidden;position:relative;isolation:isolate} #dayroom *{box-sizing:border-box}#dayroom :where(button,input,select){font:inherit}#dayroom :where(button){cursor:pointer;color:inherit}#dayroom button:disabled{cursor:default;opacity:.5}#dayroom :where(button):hover:not(:disabled,[aria-disabled=true]){filter:brightness(.96)}#dayroom :where(button):active:not(:disabled,[aria-disabled=true]){transform:translateY(1px)}#dayroom [hidden]{display:none!important}#dayroom h1,#dayroom h2,#dayroom h3,#dayroom p{margin:0}#dayroom h1{font-size:18px;font-weight:500}#dayroom h2{font-size:16px;font-weight:500}#dayroom h3{font-size:14px;font-weight:500}#dayroom .dr-muted{color:var(--dr-muted);font-size:12px}#dayroom #dr-canvas{image-rendering:pixelated;touch-action:manipulation;cursor:crosshair}#dayroom .dr-walkkeys{display:flex;gap:4px}#dayroom .dr-walkkeys button{background:var(--dr-panel);border:1px solid var(--dr-line);width:32px;height:32px;border-radius:4px;font-size:12px}#dayroom .dr-messages{padding:20px 16px;min-height:235px;flex:1;display:flex;flex-direction:column;gap:20px}#dayroom .dr-msg{display:flex;gap:8px;align-items:flex-start}#dayroom .dr-msg canvas{width:24px;height:36px;flex:0 0 24px;image-rendering:pixelated;background:var(--dr-soft);border-radius:4px}#dayroom .dr-msgtext{min-width:0;overflow-wrap:anywhere;font-size:12px}#dayroom .dr-msgname{display:flex;gap:8px;align-items:baseline;margin-bottom:4px;font-size:12px;font-weight:500}#dayroom .dr-msgname time{font-size:11px;color:var(--dr-muted)}#dayroom .dr-system{font-size:12px;color:var(--dr-muted);text-align:center}#dayroom .dr-modal p{font-size:12px;color:var(--dr-muted);margin-bottom:16px}#dayroom .dr-field{display:grid;gap:4px;font-size:12px;margin-bottom:12px}#dayroom .dr-field input,#dayroom .dr-field select{width:100%}#dayroom .dr-field input[type=color]{height:36px;padding:4px}#dayroom .dr-error{color:light-dark(#a13636,#f4b3ab);font-size:12px;margin-bottom:12px}#dayroom .dr-roomline{display:flex;align-items:center;justify-content:space-between;padding:8px 0;gap:12px;font-size:12px}#dayroom .dr-check{display:flex;gap:8px;align-items:center;font-size:12px;margin:12px 0} @media(max-width:560px){#dayroom .dr-overlay{padding:24px 8px}} @media(prefers-reduced-motion:reduce){#dayroom *{scroll-behavior:auto}} #dayroom .dr-walkkeys button{width:40px;height:40px;touch-action:none;user-select:none} @media(pointer:coarse){#dayroom .dr-walkkeys button{width:44px;height:44px}} #dayroom .dr-messages{flex:1;min-height:80px;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:16px} #dayroom .dr-msgtext{min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}#dayroom .dr-chat-image{display:block;max-width:100%;max-height:180px;object-fit:contain;margin:8px 0}#dayroom .dr-msgtext a{display:block;color:var(--dr-ink)} #dayroom #dr-mention-list{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}#dayroom #dr-reply-draft,#dayroom #dr-attachment-draft{font-size:12px;overflow-wrap:anywhere}#dayroom .dr-quote{display:block;width:100%;text-align:left;padding:8px;background:var(--dr-soft);color:var(--dr-ink);border:1px solid var(--dr-line)}#dayroom .dr-mentioned{display:block;font-size:12px;color:var(--dr-ink);background:var(--dr-soft);padding:4px;margin-top:4px}#dayroom #dr-chat-error{font-size:12px} #dayroom .dr-sidebar .dr-field{padding:8px;font-size:12px}#dayroom .dr-sidebar .dr-field input{min-width:0;width:100%;box-sizing:border-box} html,body{margin:0;background:#181d19;color:#eef2e7;font-family:system-ui,sans-serif}html:has(#dayroom[data-ui-mode]),html:has(#dayroom[data-ui-mode]) body{background:var(--dr-page-bg,light-dark(#F1F0EA,#0B0E0D));color:light-dark(#151E19,#EDF3EF)}*{box-sizing:border-box}body{padding:16px}#dayroom{max-width:1600px;margin:auto}#dayroom .dr-messages{flex:1;overflow:auto;min-height:120px}#dayroom :where(textarea){font:inherit}#dayroom textarea{resize:vertical;min-height:72px}#dayroom .dr-messages article{padding:12px;overflow-wrap:anywhere}#dayroom .dr-auth{padding:48px 24px;max-width:520px;margin:40px auto;background:var(--dr-panel);border:1px solid var(--dr-line);border-radius:16px}#dayroom .dr-auth h1{font-size:28px}#dayroom .dr-auth form{display:grid;gap:16px}#dayroom .dr-error:empty{display:none}#dayroom [hidden]{display:none!important}#dayroom #dr-member-search{width:100%}#dayroom .dr-pending{font-size:12px;overflow-wrap:anywhere}#dayroom .dr-messages button{padding:4px 8px}#dayroom .dr-muted{overflow-wrap:anywhere}#dayroom input[type=file]{max-width:100%} @media(max-width:1100px){body{padding:8px}}@media(max-width:850px){#dayroom .dr-auth{margin:16px auto;padding:24px}} @media(min-width:851px){body{padding:12px}#dayroom .dr-messages{min-height:50px}} #dayroom .dr-field textarea{width:100%}#dayroom .dr-field input{max-width:100%} /* Shared validation, including onboarding and dynamically opened settings. */ #dayroom .dr-field-error{display:block;flex-basis:100%;font-family:inherit;font-size:14px;font-weight:400;line-height:1.5;color:var(--dr-ink);background:var(--dr-soft);border:1px solid var(--dr-line);border-radius:8px;padding:10px 12px;margin-top:8px;letter-spacing:normal;overflow-wrap:anywhere} #dayroom input[aria-invalid="true"],#dayroom textarea[aria-invalid="true"],#dayroom select[aria-invalid="true"]{border-color:var(--dr-accent);outline:2px solid var(--dr-accent);outline-offset:2px}#dayroom article:focus{outline:2px solid var(--dr-accent);outline-offset:-2px}#dayroom #dr-search-form{margin-bottom:16px}#dayroom #dr-notification-results{margin-top:12px} #dayroom #dr-canvas{cursor:crosshair} /* Conversation bubbles preserve the office palette and make ownership clear. */ /* File links stay readable in the narrow conversation pane and in chat-only mode. */ #dayroom .dr-drive-attachment{display:flex;align-items:center;gap:8px;min-width:0;margin-block:10px;border:1px solid var(--dr-line);border-radius:8px;background:var(--dr-panel);overflow:hidden} #dayroom .dr-drive-attachment a{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:12px;color:var(--dr-ink);text-decoration:none;text-underline-offset:3px} #dayroom .dr-drive-attachment a:hover strong{text-decoration:underline} #dayroom .dr-drive-attachment a:hover{background:var(--dr-soft)} #dayroom .dr-drive-attachment a:focus-visible{outline:3px solid var(--dr-accent);outline-offset:-3px} #dayroom .dr-drive-attachment a>svg{width:28px;height:28px;flex-shrink:0} #dayroom .dr-drive-attachment a>span{min-width:0;flex:1} #dayroom .dr-drive-attachment strong{display:block;font-size:14px;line-height:1.4;overflow-wrap:anywhere;font-weight:600} #dayroom .dr-drive-attachment small{display:block;margin-top:4px;color:var(--dr-muted);font-size:12px;line-height:1.4} #dayroom .dr-drive-attachment a>svg.dr-file-open{width:16px;height:16px;color:var(--dr-muted)} #dayroom .dr-drive-attachment.is-draft{flex-wrap:wrap;margin:0} #dayroom .dr-drive-attachment.is-draft a{flex-basis:180px} #dayroom .dr-file-remove{margin:0 8px 8px auto;min-height:32px;padding:6px 10px;flex-shrink:0} #dayroom .dr-upload-draft{display:flex;align-items:center;gap:12px;min-width:0;padding:10px;border:1px solid var(--dr-line);border-radius:8px;background:var(--dr-panel)} #dayroom .dr-upload-draft>span{flex:1;min-width:0;overflow-wrap:anywhere} #dayroom .dr-upload-draft .dr-file-remove{margin:0} #dayroom #dr-pending{display:grid;gap:8px;max-height:min(32vh,300px);overflow-y:auto;scrollbar-color:var(--dr-line) var(--dr-bg)} #dayroom #dr-pending:not(:empty){margin-bottom:12px;padding:2px} #dayroom p.dr-drive-access-note{font-size:12px;line-height:1.5;margin:0 0 2px;color:var(--dr-muted)} #dayroom .dr-chattools{flex-wrap:wrap} #dayroom #dr-drive svg{flex-shrink:0} #dayroom #dr-attachment-status{font-size:12px;color:var(--dr-muted);padding-top:8px} #dayroom #dr-attachment-status:empty{display:none} #dayroom .dr-drive-attachment .dr-drive-remove-icon{width:32px;min-width:32px;height:32px;padding:6px;margin:8px 8px 8px 0;align-self:flex-start} /* A file dragged over the conversation gets one clear destination. The overlay never intercepts the drop itself. */ #dayroom .dr-chatcol.is-file-drag::after{content:'Drop files to attach';position:absolute;inset:10px;z-index:20;display:grid;place-items:center;border:3px dashed var(--dr-accent);border-radius:14px;background:color-mix(in srgb,var(--dr-panel) 94%,transparent);color:var(--dr-ink);font-size:15px;font-weight:800;letter-spacing:.01em;pointer-events:none} /* Calls, rebuilt on the Window design (design addendum "Voice and video calls"; reference §1–§2; world.html Card tag). */ #dayroom #dr-callbox[hidden]{display:none} /* The open stage replaces the office window and the chat column below the header. */ #dayroom .dr-main:has(>#dr-callbox.dr-call-screen)>:is(.dr-window,.dr-chatcol,.dr-pane-divider){display:none} #dayroom #dr-callbox.dr-call-screen{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;margin:12px;padding:12px;border-radius:13px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-call-top{flex:none;display:flex;align-items:center;gap:10px;height:36px;min-width:0;padding-left:6px} #dayroom .dr-call-title{margin:0;min-width:0;font-size:14px;font-weight:800;letter-spacing:-0.01em;color:var(--dr-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dayroom .dr-call-title .dr-hash{color:var(--dr-faint);font-weight:700} #dayroom .dr-call-connection{font-size:12.5px;font-weight:600;color:var(--dr-muted);white-space:nowrap} #dayroom .dr-livedot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--st-available);box-shadow:0 0 0 3px rgba(61,170,109,.2)} #dayroom .dr-call-body{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px} #dayroom .dr-call-tiles{min-width:0;min-height:0;padding:8px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--dr-line-2) transparent} #dayroom .dr-call-grid{display:grid;grid-template-columns:repeat(var(--cols,2),var(--tile-w,320px));grid-auto-rows:var(--tile-h,240px);gap:12px;justify-content:center;align-content:center;min-height:100%} /* dr-ctile, not dr-tile: ui-kit.js's shared app/connector card (imports, workspace settings, Apps & connectors) already defines a bare .dr-tile with its own unrelated radius and layout; reusing that name here silently lost the call tile's 16px radius to the cascade. */ #dayroom .dr-ctile{position:relative;margin:0;overflow:hidden;border-radius:16px;background:var(--tint,var(--dr-panel));box-shadow:inset 0 0 0 1px var(--dr-line);transition:box-shadow .12s ease,opacity .2s ease} #dayroom .dr-ctile.is-speaking{box-shadow:0 0 0 2px rgba(61,170,109,.9),0 0 0 6px rgba(61,170,109,.25)} #dayroom .dr-ctile.is-ringing{animation:dr-call-pulse 1.3s ease-out infinite} #dayroom .dr-tile-media{position:absolute;inset:0} #dayroom .dr-tile-portrait{position:absolute;left:50%;bottom:0;width:var(--portrait,144px);height:var(--portrait,144px);transform:translateX(-50%);image-rendering:pixelated} #dayroom .dr-call-body.is-reconnecting .dr-ctile{opacity:.72} /* Card name tag: world.html style B "Card" (lines 33–36, 42–47), the same literal white Card as the office overlay (Decision 14). */ #dayroom .dr-ctag{position:absolute;left:10px;bottom:10px;z-index:1;display:inline-flex;align-items:flex-start;gap:5px;max-width:calc(100% - 20px);padding:5px 10px 5px 8px;border-radius:10px;background:#fff;color:#17211c;box-shadow:0 3px 10px rgba(20,40,30,.24),0 0 0 1px rgba(0,0,0,.05);font:700 11.5px/1 'Manrope',system-ui,sans-serif;letter-spacing:-0.005em;white-space:nowrap} #dayroom .dr-ctag.is-self{box-shadow:0 3px 10px rgba(20,40,30,.24),0 0 0 2px #1F5A41} #dayroom .dr-ctag-dot{flex:none;width:7px;height:7px;margin-top:3px;border-radius:50%;background:var(--st-available)} #dayroom .dr-ctag-dot.is-working{background:var(--st-working)}#dayroom .dr-ctag-dot.is-dnd{background:var(--st-dnd)}#dayroom .dr-ctag-dot.is-away{background:var(--st-away)}#dayroom .dr-ctag-dot.is-lunch{background:var(--st-lunch)} #dayroom .dr-ctag-lines{display:flex;flex-direction:column;gap:2px;min-width:0} #dayroom .dr-ctag-name{overflow:hidden;text-overflow:ellipsis} #dayroom .dr-ctag small{font-size:10.5px;font-weight:600;color:#6b766f} #dayroom :is(.dr-ctag,.dr-roster-id) .dr-you{margin-left:2px;padding:2px 5px;border-radius:6px;background:#1F5A41;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.02em} #dayroom .dr-call-grid.is-compact .dr-ctag small{display:none} /* Glass control bar: rail button metrics (reference §2.5 .rbtn/.ri). */ #dayroom .dr-call-controls{flex:none;align-self:center;display:flex;align-items:center;gap:2px;padding:6px 8px;border-radius:18px} #dayroom .dr-cbtn{position:relative;width:64px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0 6px;border:0;border-radius:12px;background:none;color:var(--dr-muted);font:700 10.5px/1.2 'Manrope',system-ui,sans-serif;letter-spacing:.01em} #dayroom .dr-cbtn .dr-ri{position:relative;width:42px;height:32px;border-radius:10px;display:grid;place-items:center} #dayroom .dr-cbtn .dr-ri svg.dr-i{width:20px;height:20px} #dayroom .dr-cbtn:hover:not(:disabled,[aria-disabled=true]) .dr-ri{background:var(--dr-hover)} #dayroom .dr-cbtn.is-on{color:var(--dr-ink)}#dayroom .dr-cbtn.is-on .dr-ri{background:var(--dr-sel)} #dayroom .dr-cbtn.is-alert{color:var(--dr-ink)}#dayroom .dr-cbtn.is-alert .dr-ri{background:rgba(224,90,79,.14);color:#E05A4F} #dayroom .dr-cbtn.is-leave{color:var(--dr-ink)}#dayroom .dr-cbtn.is-leave .dr-ri,#dayroom .dr-cbtn.is-leave:hover .dr-ri{background:#E05A4F;color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)} #dayroom .dr-cbtn:is(:disabled,[aria-disabled=true]){opacity:.45;cursor:default} /* A busy call control is aria-disabled so it keeps keyboard focus (a disabled button loses it); it looks like the shared button:disabled. */ #dayroom :where(#dr-callbox,#dr-incoming) button[aria-disabled=true]{cursor:default;opacity:.5} #dayroom .dr-call-controls .dr-div{width:1px;height:32px;margin:0 6px;background:var(--dr-line-2)} #dayroom #dr-callbox>.dr-call-error{flex:none;align-self:center;display:flex;align-items:center;gap:8px;max-width:680px;margin:0;padding:8px 12px;border-radius:11px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px rgba(224,90,79,.45);font-size:12.5px;font-weight:700} /* Ink on the stage's chip only; in the bar and the ended row the shared .dr-error colour applies, which meets AA on both. */ #dayroom #dr-callbox.dr-call-screen>.dr-call-error{color:var(--dr-ink)} #dayroom #dr-callbox>.dr-call-error[hidden]{display:none} /* Reconnecting: reference .chip and .dots on glass, centred over the tiles. */ #dayroom .dr-call-reconnecting{position:absolute;top:12px;left:50%;z-index:2;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:11px;font-size:12.5px;font-weight:800;color:var(--dr-ink);white-space:nowrap} #dayroom .dr-call-reconnecting .dr-dots{display:inline-flex;gap:3px} #dayroom .dr-call-reconnecting .dr-dots i{width:5px;height:5px;border-radius:50%;background:var(--dr-faint);animation:dr-call-dot 1.2s ease-in-out infinite} #dayroom .dr-call-reconnecting .dr-dots i:nth-child(2){animation-delay:.2s}#dayroom .dr-call-reconnecting .dr-dots i:nth-child(3){animation-delay:.4s} #dayroom #dr-callbox:is(.dr-call-bar,.dr-call-ended)>.dr-call-error{flex-basis:100%;align-self:auto;max-width:none;margin:0 0 10px;padding:0;background:none;box-shadow:none;font-size:12px} /* Ended: a quiet row until dismissed. */ #dayroom #dr-callbox.dr-call-ended{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:44px;margin:12px 12px 0;padding:0 6px 0 14px;border-radius:13px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line);font-size:13px;font-weight:700;color:var(--dr-ink-2)} #dayroom .dr-call-ended>svg.dr-i{width:16px;height:16px;color:var(--dr-muted)} #dayroom .dr-call-ended .dr-call-title{font-size:13px} #dayroom .dr-call-ended .dr-muted{min-width:0;font-weight:600;color:var(--dr-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @keyframes dr-call-pulse{0%{box-shadow:0 0 0 0 rgba(61,170,109,.4)}100%{box-shadow:0 0 0 12px rgba(61,170,109,0)}} @keyframes dr-call-dot{0%,80%,100%{opacity:.35}40%{opacity:1}} @media (prefers-reduced-motion:reduce){#dayroom .dr-ctile{transition:none}#dayroom .dr-ctile.is-ringing{animation:none;box-shadow:0 0 0 2px rgba(61,170,109,.5)}#dayroom .dr-call-reconnecting .dr-dots i{animation:none;opacity:.7}} @media (max-width:760px){#dayroom #dr-callbox.dr-call-screen{margin:8px;padding:8px}#dayroom .dr-cbtn{width:52px}} /* The ended row's "Last call's notes" link keeps its ghost look (carried from the old notes block; Window T9's box-shadow:none opt-out). */ #dayroom .dr-call-panel .dr-call-notes-link{font-size:12px;line-height:16px;background:transparent;box-shadow:none;min-height:32px;margin-top:8px;width:auto;padding:4px 0;color:var(--dr-muted);text-underline-offset:4px} @media(hover:hover){#dayroom .dr-call-panel .dr-call-notes-link:hover{color:var(--dr-ink);text-decoration:underline}} #dayroom .dr-call-ended .dr-call-notes-link{margin-top:0} /* Incoming call: a glass card (Doorway glass, reference §3.2 and §1.2) with the caller's portrait. */ #dayroom .dr-incoming.dr-glass{position:fixed;top:16px;right:16px;z-index:90;width:360px;max-width:calc(100vw - 32px);display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:14px;padding:18px;border-radius:20px;color:var(--dr-ink);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);box-shadow:0 24px 60px -12px rgba(24,40,30,.35),inset 0 0 0 1px var(--dr-glass-line)} /* Minor 5 (visual-2): fixed top-right, this sat over an open dialog's search field and Close button, both also top-anchored. The bottom-right corner is clear of every dialog, which starts 64px from the top and never reaches the viewport's bottom 24px (.dr-overlay's own padding), while the card itself stays visible. */ #dayroom:has(#dr-overlay:not([hidden])) .dr-incoming.dr-glass{top:auto;bottom:16px} @media (prefers-color-scheme:dark){#dayroom:not([data-scheme]) .dr-incoming.dr-glass{box-shadow:0 30px 70px -12px rgba(0,0,0,.7),inset 0 0 0 1px var(--dr-glass-line)}} #dayroom[data-scheme="dark"] .dr-incoming.dr-glass{box-shadow:0 30px 70px -12px rgba(0,0,0,.7),inset 0 0 0 1px var(--dr-glass-line)} #dayroom .dr-incoming:focus{outline:none}#dayroom .dr-incoming:focus-visible{outline:2px solid var(--dr-accent);outline-offset:3px} #dayroom .dr-incoming-portrait{width:72px;height:72px;border-radius:20px;animation:dr-call-pulse 1.3s ease-out infinite} #dayroom #dr-incoming-avatar{width:72px;height:72px;border-radius:20px;image-rendering:pixelated} #dayroom .dr-incoming-text{min-width:0;display:grid;justify-items:start;gap:4px} #dayroom .dr-incoming .dr-eyebrow{display:inline-flex;align-items:center;padding:6px 10px;border-radius:8px;background:var(--dr-accent-soft);color:var(--dr-accent-text);font:400 10px 'Silkscreen',monospace;letter-spacing:.06em} #dayroom .dr-incoming h2{margin:4px 0 0;font-size:17px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;overflow-wrap:anywhere} #dayroom .dr-incoming p{margin:0;font-size:12.5px;font-weight:600;color:var(--dr-muted)} #dayroom .dr-incoming-actions{grid-column:1/-1;display:flex;gap:10px} #dayroom .dr-cpill{flex:1;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--dr-panel);color:var(--dr-ink);box-shadow:inset 0 0 0 1px var(--dr-line-2);font:800 13.5px 'Manrope',system-ui,sans-serif} #dayroom .dr-cpill svg.dr-i{width:18px;height:18px} #dayroom .dr-cpill.is-accept{background:var(--dr-accent);color:var(--dr-accent-ink);box-shadow:0 8px 20px -8px rgba(31,90,65,.6),inset 0 -2px 0 rgba(0,0,0,.14)} #dayroom .dr-cpill-ic{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#E05A4F;color:#fff} #dayroom .dr-cpill-ic svg.dr-i{width:14px;height:14px} #dayroom .dr-incoming>.dr-call-error{grid-column:1/-1;margin:0;font-size:12px} #dayroom .dr-incoming>.dr-call-error[hidden]{display:none} @media (prefers-reduced-motion:reduce){#dayroom .dr-incoming-portrait{animation:none;box-shadow:0 0 0 2px rgba(61,170,109,.5)}} /* The rail's live call and the live pill share the call's live dot. */ #dayroom .dr-rbtn.is-live{color:var(--dr-accent-text)} #dayroom .dr-rbtn.is-live .dr-ri{background:var(--dr-accent-soft)} #dayroom .dr-rbtn.is-live .dr-livedot{position:absolute;top:3px;right:5px} /* Video fills the tile; your own camera is mirrored like a mirror, never a teammate's. */ #dayroom .dr-ctile.has-video{background:#0B0E0D} #dayroom .dr-ctile.has-video .dr-tile-portrait{display:none} #dayroom .dr-ctile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0B0E0D} #dayroom .dr-ctile.is-self video.is-camera{transform:scaleX(-1)} /* Presenter: the screen on a dark backdrop, everyone else in a 208px filmstrip. */ #dayroom .dr-call-body[data-layout=presenter]{grid-template-columns:minmax(0,1fr) 208px} #dayroom .dr-call-body[data-layout=presenter] .dr-call-grid{align-content:start} #dayroom .dr-call-presenter{position:relative;min-width:0;min-height:0;margin:0;display:grid;place-items:center;overflow:hidden;border-radius:16px;background:#0B0E0D} #dayroom .dr-call-presenter-media,#dayroom .dr-call-presenter video{position:absolute;inset:0;width:100%;height:100%} #dayroom .dr-call-presenter video{object-fit:contain;background:#0B0E0D} #dayroom .dr-call-presenter .dr-ctag{left:12px;bottom:12px} /* Participants panel: sidebar row metrics (reference .row, .count) in a panel column. */ #dayroom .dr-call-body.has-roster{grid-template-columns:minmax(0,1fr) 280px} #dayroom .dr-call-body[data-layout=presenter].has-roster .dr-call-tiles{display:none} #dayroom .dr-call-roster{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:13px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-call-roster header{flex:none;display:flex;align-items:center;gap:8px;height:48px;padding:0 6px 0 14px;border-bottom:1px solid var(--dr-line)} #dayroom .dr-call-roster h3{margin:0;font-size:14px;font-weight:800;letter-spacing:-0.01em} #dayroom .dr-roster-count{min-width:20px;height:19px;padding:0 6px;border-radius:10px;background:var(--dr-accent);color:var(--dr-accent-ink);font:800 11px/19px 'Manrope',system-ui,sans-serif;text-align:center} #dayroom .dr-roster-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--dr-line-2) transparent} #dayroom .dr-call-roster ul{margin:0;padding:0 6px 6px;list-style:none} /* Two groups: in the call, then who it rang and hasn't joined. */ #dayroom .dr-roster-group{display:flex;align-items:center;gap:8px;margin:0;padding:12px 14px 6px;font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--dr-muted)} #dayroom .dr-roster-count.is-waiting{background:var(--dr-sunken);color:var(--dr-ink-2);box-shadow:inset 0 0 0 1px var(--dr-line-2)} #dayroom .dr-roster-row.is-waiting canvas{opacity:.55;filter:saturate(.6)} #dayroom .dr-roster-row.is-waiting.is-ringing canvas{opacity:.85;filter:none} #dayroom .dr-roster-row.is-waiting small{display:inline-flex;align-items:center;gap:6px} /* Waiting for, grouped by how each invitation stands; a long group folds into "+N more". */ #dayroom .dr-roster-sub{display:flex;align-items:center;gap:6px;margin:0;padding:8px 14px 2px;font-size:11px;font-weight:700;color:var(--dr-muted)} #dayroom .dr-roster-sub .dr-roster-count{min-width:18px;height:17px;font-size:10.5px;line-height:17px} #dayroom .dr-roster-more{display:block;margin:2px 14px 6px 50px;padding:4px 8px;min-height:28px;border:0;border-radius:8px;background:none;color:var(--dr-ink-2);font:700 12px/1.2 'Manrope',system-ui,sans-serif;cursor:pointer} #dayroom .dr-roster-more:hover{background:var(--dr-hover)} #dayroom .dr-roster-more:focus-visible{outline:2px solid var(--dr-accent);outline-offset:1px} #dayroom .dr-ring-again{flex:none;min-height:30px;padding:4px 10px;font-size:12px} /* Ringing: a stepped blink in the accent colour (retro, no glow). */ /* A pending tile: the portrait waits, faded, until they join. */ #dayroom .dr-ctile.is-ringing .dr-tile-portrait{opacity:.6} #dayroom .dr-ring-dot{flex:none;display:inline-block;width:6px;height:6px;background:var(--dr-accent);animation:dr-ring-blink 1s steps(2,jump-none) infinite} #dayroom .dr-call-waiting{display:inline-flex;align-items:center;gap:7px;min-width:0;height:24px;padding:0 10px;border-radius:8px;background:var(--dr-accent-soft);color:var(--dr-accent-text);font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dayroom .dr-cbtn-ring{position:absolute;bottom:-1px;right:2px;width:7px;height:7px;background:var(--dr-accent);box-shadow:0 0 0 2px var(--dr-panel);animation:dr-ring-blink 1s steps(2,jump-none) infinite} @keyframes dr-ring-blink{0%{opacity:1}100%{opacity:.25}} /* In-call chat: the call's own conversation, beside the tiles in the same column as People. */ #dayroom .dr-call-body.has-chat{grid-template-columns:minmax(0,1fr) 320px} #dayroom .dr-call-body[data-layout=presenter].has-chat .dr-call-tiles{display:none} #dayroom .dr-call-chatbox{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:13px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-call-chatbox header{flex:none;display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 6px 4px 14px;border-bottom:1px solid var(--dr-line)} #dayroom .dr-call-chat-heading{min-width:0;display:grid;gap:1px} #dayroom .dr-call-chatbox h3{margin:0;font-size:14px;font-weight:800;letter-spacing:-0.01em} #dayroom .dr-call-chat-where{font-size:11.5px;font-weight:700;color:var(--dr-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dayroom .dr-call-chat-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:10px 12px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--dr-line-2) transparent} #dayroom .dr-call-chat-list:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px} #dayroom .dr-call-chat-empty{margin:auto 0;font-size:12.5px;font-weight:600;line-height:1.45;color:var(--dr-muted);text-align:center} #dayroom .dr-call-chat-msg{min-width:0;display:grid;gap:2px} #dayroom .dr-call-chat-head{display:flex;align-items:baseline;gap:6px;font-size:12px} #dayroom .dr-call-chat-head b{font-weight:800;color:var(--dr-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dayroom .dr-call-chat-head time{flex:none;font-size:11px;font-weight:600;color:var(--dr-faint)} #dayroom .dr-call-chat-msg.is-own .dr-call-chat-head b{color:var(--dr-accent-text)} #dayroom .dr-call-chat-body{font-size:13px;font-weight:500;line-height:1.45;color:var(--dr-ink-2);overflow-wrap:anywhere} #dayroom .dr-call-chat-body p{margin:0} #dayroom .dr-call-chat-body a{color:var(--dr-accent-text);text-decoration:underline;text-underline-offset:2px} #dayroom .dr-call-chat-form{flex:none;display:flex;align-items:flex-end;gap:6px;padding:8px;border-top:1px solid var(--dr-line)} #dayroom #dr-call-chat-input{flex:1;min-width:0;min-height:40px;max-height:120px;resize:none;padding:9px 10px;border:0;border-radius:10px;background:var(--dr-sunken);color:var(--dr-ink);box-shadow:inset 0 0 0 1px var(--dr-line-2);font:500 13px/1.4 'Manrope',system-ui,sans-serif} #dayroom .dr-call-chat-form .dr-call-chat-send{flex:none;width:40px;height:40px;border-radius:10px;background:var(--dr-accent);color:var(--dr-accent-ink)} #dayroom .dr-call-chat-form .dr-call-chat-send:hover{background:var(--dr-accent);filter:brightness(1.08)} #dayroom .dr-call-chat-status{flex:none;min-height:0;margin:0;padding:0 12px 8px;font-size:11.5px;font-weight:700;color:var(--dr-muted)} #dayroom .dr-call-chat-status:empty{display:none} #dayroom .dr-roster-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 8px;border-radius:9px} #dayroom .dr-roster-row canvas{flex:none;width:32px;height:32px;border-radius:9px} #dayroom .dr-roster-row.is-speaking canvas{box-shadow:0 0 0 2px rgba(61,170,109,.9),0 0 0 4px rgba(61,170,109,.25)} #dayroom .dr-roster-id{flex:1;min-width:0;display:grid;gap:1px} #dayroom .dr-roster-id b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dayroom .dr-roster-id small{font-size:12px;font-weight:600;color:var(--dr-muted)} #dayroom .dr-roster-icons{display:flex;align-items:center;gap:4px;color:var(--dr-muted)} #dayroom .dr-roster-icons svg.dr-i{width:16px;height:16px} #dayroom .dr-roster-icons svg.is-alert{color:#E05A4F} #dayroom .dr-roster-chip{height:20px;padding:0 8px;border-radius:10px;background:var(--dr-accent-soft);color:var(--dr-accent-text);font:800 10.5px/20px 'Manrope',system-ui,sans-serif} #dayroom .dr-cbtn-count{position:absolute;top:-4px;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--dr-accent);color:var(--dr-accent-ink);font:800 10px/17px 'Manrope',system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--dr-panel)} /* Meeting notes: a banner at the top of the stage while the workspace takes notes. "Notes on" stays for the whole call; the join notice shows until you choose Got it. */ #dayroom .dr-call-notes{flex:none;display:flex;align-items:flex-start;gap:12px;padding:10px 10px 10px 14px;border-radius:13px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-call-notes>svg.dr-i{margin-top:1px;color:var(--dr-accent-text)} #dayroom .dr-call-notes-text{flex:1;min-width:0;display:grid;gap:3px} #dayroom .dr-call-notes-heading{display:flex;align-items:center;gap:8px;font-size:13px} #dayroom .dr-call-notes-heading strong{font-weight:800} #dayroom .dr-call-notes-status{height:20px;padding:0 8px;border-radius:10px;background:var(--dr-sunken);color:var(--dr-muted);font:800 10.5px/20px 'Manrope',system-ui,sans-serif;white-space:nowrap} #dayroom .dr-call-notes-status[data-capturing=true]{background:var(--dr-accent-soft);color:var(--dr-accent-text)} #dayroom .dr-call-notes-status.is-on{display:inline-flex;align-items:center;gap:6px;border-radius:6px;background:var(--dr-accent-soft);color:var(--dr-accent-text);font:400 10px/20px 'Silkscreen',monospace;letter-spacing:.06em;text-transform:uppercase} #dayroom .dr-call-notes-status.is-on::before{content:"";flex:none;width:6px;height:6px;background:currentColor;box-shadow:0 0 0 1px var(--dr-accent-soft)} #dayroom .dr-call-notes.is-on{box-shadow:inset 0 0 0 1px var(--dr-line),inset 3px 0 0 var(--dr-accent)} #dayroom .dr-call-notes-quiet{margin:0;font-size:12px;font-weight:700;color:var(--dr-ink-2);overflow-wrap:anywhere} #dayroom .dr-roster-chip.is-off{background:var(--dr-sunken);color:var(--dr-ink-2)} #dayroom .dr-incoming-notes{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;background:var(--dr-accent-soft);color:var(--dr-accent-text)!important;font-size:12px!important;font-weight:700!important} #dayroom .dr-incoming-notes svg.dr-i{flex:none;width:14px;height:14px} #dayroom .dr-call-notes-copy{margin:0;font-size:12.5px;font-weight:600;color:var(--dr-ink-2);overflow-wrap:anywhere} #dayroom .dr-call-notes-disclosure{margin:0;font-size:12px;font-weight:500;line-height:1.45;color:var(--dr-muted);overflow-wrap:anywhere} #dayroom .dr-call-notes-error{margin:2px 0 0;font-size:12px} #dayroom .dr-call-notes-actions{flex:none;align-self:center;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px} /* Problem card: a start that failed, what went wrong, and a retry. */ #dayroom #dr-callbox.dr-call-problem{flex:none;display:flex;align-items:center;gap:12px;margin:12px 12px 0;padding:12px 8px 12px 14px;border-radius:13px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px rgba(224,90,79,.45)} #dayroom .dr-call-problem-ic{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:rgba(224,90,79,.14);color:#E05A4F} #dayroom .dr-call-problem-text{min-width:0;display:grid;gap:2px} #dayroom .dr-call-problem-text b{font-size:13.5px;font-weight:800} #dayroom .dr-call-problem-text p{margin:0;font-size:12.5px;font-weight:600;color:var(--dr-ink-2);overflow-wrap:anywhere} #dayroom .dr-call-problem-text .dr-call-error{margin:2px 0 0;font-size:12px} #dayroom .dr-call-problem-text .dr-call-error[hidden]{display:none} #dayroom #dr-callbox>.dr-call-error .dr-iconbtn{width:24px;height:24px;margin:-4px -6px -4px 0} /* Kept last so they override the base rules above (People, Chat and the waiting chip). */ /* Narrow stages: People or Chat covers the tiles inside the stage, so the control bar below stays put and reachable. */ #dayroom #dr-callbox.dr-call-screen{container:dr-call-stage/inline-size} @container dr-call-stage (max-width:700px){#dayroom .dr-call-body:is(.has-roster,.has-chat){grid-template-columns:minmax(0,1fr)}#dayroom .dr-call-body:is(.has-roster,.has-chat)>:is(.dr-call-roster,.dr-call-chatbox){position:absolute;inset:0;z-index:3}} @container dr-call-stage (max-width:640px){#dayroom .dr-call-notes{flex-wrap:wrap}#dayroom .dr-call-notes-text{flex-basis:calc(100% - 40px)}#dayroom .dr-call-notes-actions{flex:1 1 100%;justify-content:flex-start}} @container dr-call-stage (max-width:520px){#dayroom .dr-cbtn{width:46px}#dayroom .dr-call-controls .dr-div{margin:0 2px}#dayroom .dr-call-waiting{display:none}} @media (prefers-reduced-motion:reduce){#dayroom :is(.dr-ring-dot,.dr-cbtn-ring){animation:none}} /* A live miniature stays available while the conversation or another workspace page is open. */ #dayroom #dr-callbox.dr-call-bar{position:fixed;z-index:40;top:96px;right:20px;width:320px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 112px);margin:0;padding:10px;border-radius:14px;display:flex;flex-direction:column;align-items:stretch;gap:8px;overflow:auto;background:var(--dr-panel);box-shadow:var(--dr-shadow),0 0 0 1px var(--dr-line-2)} #dayroom #dr-callbox.dr-call-bar.is-left{right:auto;left:84px} #dayroom .dr-call-bar .dr-call-top{gap:6px;padding:0;height:32px} #dayroom .dr-call-bar .dr-call-title{flex:1} #dayroom .dr-call-bar .dr-call-top .dr-grow{display:none} #dayroom .dr-call-bar>.dr-call-connection{padding:0 2px;font-size:11px} #dayroom .dr-call-bar .dr-call-body{flex:none;height:170px;grid-template-columns:minmax(0,1fr);gap:0} #dayroom .dr-call-bar .dr-call-tiles{padding:4px} #dayroom .dr-call-bar .dr-call-grid{gap:8px} #dayroom .dr-call-bar .dr-ctile{border-radius:10px} #dayroom .dr-call-bar .dr-ctag{left:5px;bottom:5px;max-width:calc(100% - 10px);padding:5px;font-size:10px} #dayroom .dr-call-bar .dr-ctag small,#dayroom .dr-call-bar .dr-you{display:none} #dayroom .dr-call-bar .dr-call-controls{padding:0;gap:4px} #dayroom .dr-call-bar .dr-cbtn{width:60px} #dayroom .dr-call-mini-notes{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px} #dayroom .dr-call-mini-notes .dr-button{font-size:11px;min-height:32px;padding:4px 6px} #dayroom #dr-callbox.dr-call-bar>.dr-call-error{flex-basis:auto;margin:0} #dayroom .dr-share-caption{position:absolute;left:8px;bottom:8px;right:8px;display:flex;align-items:center;gap:8px;width:fit-content;max-width:calc(100% - 16px);padding:6px 10px;border-radius:8px;background:#0B0E0D;color:#EDF3EF;font-size:12px;font-weight:800;box-shadow:0 0 0 1px #536057} #dayroom .dr-sharing-laptop{flex:none;display:block;width:24px;height:24px;color:currentColor} #dayroom .dr-share-caption .dr-sharing-laptop{color:#C4EC7D} #dayroom .dr-call-bar .dr-share-caption{font-size:10px;gap:5px;padding:4px 6px} #dayroom .dr-call-bar .dr-share-caption .dr-sharing-laptop{width:24px;height:24px} #dayroom .dr-laptop-closed{visibility:hidden;animation:dr-laptop-closed .9s step-end} #dayroom .dr-laptop-half{visibility:hidden;animation:dr-laptop-half .9s step-end} #dayroom .dr-laptop-open{animation:dr-laptop-open .9s step-end} @keyframes dr-laptop-closed{0%{visibility:visible}33%,100%{visibility:hidden}} @keyframes dr-laptop-half{0%{visibility:hidden}33%{visibility:visible}66%,100%{visibility:hidden}} @keyframes dr-laptop-open{0%{visibility:hidden}66%,100%{visibility:visible}} @media(prefers-reduced-motion:reduce){#dayroom :is(.dr-laptop-closed,.dr-laptop-half,.dr-laptop-open){animation:none}} @media(max-width:760px){#dayroom #dr-callbox.dr-call-bar{top:70px;right:12px;max-height:calc(100dvh - 150px)}#dayroom #dr-callbox.dr-call-bar.is-left{left:12px}} @media(max-width:360px){#dayroom .dr-call-bar .dr-cbtn{width:54px}} @container dr-call-stage (max-width:520px){#dayroom .dr-call-top{flex-wrap:wrap;height:auto;min-height:36px}#dayroom .dr-call-top .dr-call-connection{display:none}#dayroom .dr-call-body[data-layout=presenter]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(100px,1fr) 108px}#dayroom .dr-call-body[data-layout=presenter] .dr-call-grid{justify-content:start;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:128px;grid-template-rows:96px;min-height:0}#dayroom .dr-call-body[data-layout=presenter] .dr-tile-portrait{width:72px;height:72px}#dayroom .dr-call-body[data-layout=presenter]:is(.has-roster,.has-chat){grid-template-rows:minmax(0,1fr)}#dayroom .dr-call-notes{max-height:35dvh;overflow:auto}} /* Sidebar lists, messages and composer details that later Window tasks restyle. The shell layout (rail, sidebar, main pane) lives in window.css. */ #dayroom #dr-people-search{padding:4px 0 8px} #dayroom #dr-people-search .dr-field{padding:4px;margin:0 0 4px} #dayroom .dr-messages{padding:16px;min-height:0;gap:8px} #dayroom .dr-messages article{padding:8px;line-height:1.55} #dayroom .dr-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} @media(max-width:760px){#dayroom .dr-messages{min-height:120px}} #dayroom .dr-dm-empty{padding:8px 4px} #dayroom .dr-message-content{min-width:0;overflow-wrap:anywhere} /* #dr-companion-activity loads before surfaces.css, so a bare .dr-companion-summary (same specificity as .dr-card-body, now its other class) would lose padding-top to .dr-card-body's own padding shorthand by file order alone; scoping to its host id keeps this win regardless of load order. */ #dayroom #dr-companion-activity .dr-companion-summary{white-space:pre-wrap;max-height:200px;overflow:auto;line-height:1.6;padding-top:12px} /* Quiet daily controls, drawn from the same woodland palette as the office. */ #dayroom select:not([multiple]),#dayroom :is(.dr-modal,.dr-workspace-pages) select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%238f9e92' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px} #dayroom .dr-agent-portrait{color:var(--dr-accent);font-size:26px} #dayroom .dr-command-hint{font-size:12px;color:var(--dr-accent);margin:0 0 10px} #dayroom .dr-message-task{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--dr-line);background:var(--dr-soft);border-radius:10px;padding:12px;margin-top:12px;color:var(--dr-text);text-align:left;cursor:pointer;max-width:100%;font-size:13px} #dayroom .dr-message-task strong{color:var(--dr-accent)}#dayroom .dr-message-task small{display:block;color:var(--dr-muted);margin-top:5px} #dayroom .dr-message-citation{display:inline;padding:0 3px;border:0;background:transparent;color:var(--dr-ink);font:inherit;text-decoration:underline;cursor:pointer} #dayroom .dr-answer-text{white-space:normal;line-height:1.6;overflow-wrap:anywhere;text-wrap:pretty} #dayroom .dr-answer-text p{margin:0 0 12px} #dayroom .dr-answer-text :is(ul,ol){margin:0 0 12px;padding-inline-start:22px} #dayroom .dr-answer-text li{margin:4px 0;padding-inline-start:2px} #dayroom .dr-answer-text strong{font-weight:600} #dayroom .dr-answer-text a{color:inherit;text-decoration:underline;text-underline-offset:3px} #dayroom .dr-answer-text blockquote{margin:0 0 12px;padding-inline-start:12px;border-inline-start:2px solid var(--dr-line);color:var(--dr-muted)} #dayroom .dr-answer-text code{font-family:ui-monospace,monospace;font-size:.9em;white-space:pre-wrap} #dayroom .dr-answer-text pre{margin:0 0 12px;padding:12px;background:var(--dr-panel);border:1px solid var(--dr-line);overflow:auto;white-space:pre;text-wrap:nowrap} #dayroom .dr-answer-text pre code{white-space:pre} #dayroom .dr-answer-text>:last-child{margin-bottom:0} #dayroom .dr-answer-source-label{color:var(--dr-muted);font-size:.85em;white-space:nowrap} /* Character studio and square portraits. Loads after product.css and chat-bubbles.css, whose older portrait rules these extend. */ /* The overlay sets a dialog 64px from the top with 24px below, so it stops at 100dvh - 88px like every dialog. The studio gets what is left after the dialog header (60px) and the body's padding (48px), and its minimum never exceeds that, so Save, Surprise me and Undo stay on screen at any window height. */ #dayroom .dr-modal:has(.dp-studio){width:min(1080px,calc(100vw - 32px));max-height:calc(100dvh - 88px)} #dayroom .dp-studio{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:0;min-height:min(520px,calc(100dvh - 196px));max-height:calc(100dvh - 196px)} #dayroom .dp-left{display:flex;flex-direction:column;gap:14px;padding:4px 18px 16px 2px;border-right:1px solid var(--dr-line);min-height:0;overflow:auto} /* A short window scrolls the left column rather than squeezing the preview stage. */ #dayroom .dp-left>*{flex:none} #dayroom .dp-stage{position:relative;height:264px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(180deg,var(--dr-soft),color-mix(in srgb,var(--dr-soft) 60%,var(--dr-bg)));box-shadow:inset 0 0 0 1px var(--dr-line);overflow:hidden} #dayroom .dp-stage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:52px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 23px,rgba(0,0,0,.1) 23px 24px)} #dayroom .dp-preview{position:relative;z-index:1;image-rendering:pixelated;width:160px;height:224px} #dayroom .dp-turn{position:absolute;z-index:2;top:44%;width:36px;height:36px;border-radius:12px;border:1px solid var(--dr-line);background:var(--dr-panel);color:var(--dr-ink);font-size:16px;cursor:pointer} #dayroom .dp-turn[data-turn="-1"]{left:10px}#dayroom .dp-turn[data-turn="1"]{right:10px} /* The view label sits in the bottom-left corner: no look paints there (the gele reaches the top corners, shoes the bottom middle). */ #dayroom .dp-view{position:absolute;z-index:2;bottom:10px;left:10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dr-muted);background:var(--dr-panel);padding:4px 9px;border-radius:8px} #dayroom .dp-describe{margin:0;font-size:12.5px;line-height:1.45;color:var(--dr-muted)} #dayroom .dp-label{margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--dr-muted)} #dayroom .dp-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center} #dayroom .dp-chip{height:32px;padding:0 11px;border-radius:10px;border:1px solid var(--dr-line);background:var(--dr-panel);color:var(--dr-ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer} #dayroom .dp-chip[aria-pressed="true"]{background:color-mix(in srgb,var(--dr-accent) 22%,var(--dr-panel));border-color:var(--dr-accent)} #dayroom .dp-add{border-style:dashed;color:var(--dr-muted)}#dayroom .dp-suggest{color:var(--dr-muted)} #dayroom .dp-outfit{display:inline-flex;align-items:center}#dayroom .dp-outfit .dp-chip{border-radius:10px 0 0 10px} #dayroom .dp-remove{height:32px;width:26px;border:1px solid var(--dr-line);border-left:0;border-radius:0 10px 10px 0;background:var(--dr-panel);color:var(--dr-muted);cursor:pointer} /* Minor 4: .dp-left (above) scrolls with only 2px of left padding, so the shared outset ring (rule 2) lost its left 2px on a chip standing at that edge. Inset, like the sidebar rows that have the same problem. */ #dayroom .dp-chip:focus-visible,#dayroom .dp-remove:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px} #dayroom .dp-name-form{display:flex;gap:6px}#dayroom .dp-name-form input{height:32px;border-radius:10px;font:inherit;width:140px} #dayroom .dp-right{display:flex;flex-direction:column;min-width:0;min-height:0} /* Whole-branch review I1: .dp-right is a flex column with .dp-tabs above the scrolling .dp-panel. overflow-x:auto here forces overflow-y away from visible too (same rule Minor 4 above already notes for the focus ring), and that strips this row's automatic minimum size down to 0 instead of its tabs' own 40px: a tall panel (Clothes' tile grid, at a short window) then shrinks the row instead of just scrolling further below it. flex:none pins it to its content height, same fix shape as .dp-left>* above. */ #dayroom .dp-tabs{display:flex;flex:none;gap:2px;padding:0 14px;border-bottom:1px solid var(--dr-line);overflow-x:auto} #dayroom .dp-tab{height:40px;padding:0 12px;border:0;border-bottom:2px solid transparent;background:none;color:var(--dr-muted);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap} #dayroom .dp-tab[aria-selected="true"]{color:var(--dr-ink);border-bottom-color:var(--dr-accent)} /* Minor 4: .dp-tabs (above) sets overflow-x:auto with no vertical padding, which also makes overflow-y compute to auto, clipping the shared outset ring's (rule 2) top and bottom. Inset instead. */ #dayroom .dp-tab:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px} #dayroom .dp-panel{padding:14px 14px 18px;overflow:auto;min-height:0} #dayroom .dp-group{margin:0 0 16px} #dayroom .dp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px} #dayroom .dp-tile{position:relative;height:80px;border-radius:14px;border:0;background:#E7DDC8;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);display:grid;place-items:center;overflow:hidden;cursor:pointer;padding:0 0 12px} #dayroom .dp-tile:hover{background:#EFE6D3}#dayroom .dp-tile:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px} #dayroom .dp-tile[aria-pressed="true"]{background:#F3EBD9;box-shadow:0 0 0 2px var(--dr-panel),0 0 0 4px var(--dr-accent)} #dayroom .dp-tile:disabled{cursor:default;opacity:.7} #dayroom .dp-tile canvas{image-rendering:pixelated;max-width:100%;max-height:62px} /* Minor 3: #6E6350 measured 4.37:1 on the tile's own #E7DDC8, just under AA. #625846 clears 4.5:1 there and on the hover/pressed tile tints too (#EFE6D3, #F3EBD9); the tile itself is a fixed studio colour, not a palette token, so this one change covers every interface palette. */ #dayroom .dp-name{position:absolute;left:0;right:0;bottom:4px;font-size:10px;font-weight:800;color:#625846;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px} #dayroom .dp-new{position:absolute;top:5px;left:5px;font-size:8.5px;font-weight:800;padding:2px 5px;border-radius:5px;background:#F2C94C;color:#3a2a06} #dayroom .dp-soon{font-size:9px;font-weight:800;padding:3px 6px;border-radius:6px;background:#1F5A41;color:#D6F291} #dayroom .dp-swatches{display:flex;flex-wrap:wrap;gap:7px} #dayroom .dp-swatch{width:28px;height:28px;border-radius:9px;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);cursor:pointer;position:relative;display:inline-block} #dayroom .dp-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--dr-panel),0 0 0 4px var(--dr-accent)} #dayroom .dp-custom{background:conic-gradient(#e0533f,#f2c94c,#6fae4f,#3c9aae,#7b61c9,#e0533f);overflow:hidden} #dayroom .dp-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%} /* The real colour input is invisible, so its keyboard focus ring goes on the swatch itself. */ #dayroom .dp-custom:has(input:focus-visible){outline:2px solid var(--dr-accent);outline-offset:2px} #dayroom .dp-note{margin:0;font-size:12.5px;color:var(--dr-muted)} #dayroom .dp-foot{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:12px 0 0;border-top:1px solid var(--dr-line);flex-wrap:wrap} /* Scoped to the studio so it outranks the dialog's #dayroom .dr-modal p muted text; the same red as .dr-error in both schemes. */ #dayroom .dp-grow{flex:1}#dayroom .dp-studio .dp-error{margin:0;color:light-dark(#a13636,#f4b3ab);font-size:12.5px;font-weight:700} /* Save stays focusable while it saves (aria-disabled), so it borrows the disabled look. */ #dayroom .dp-foot [aria-disabled="true"]{cursor:default;opacity:.5} /* One column: each stacked row takes its content height, so the preview column is never squeezed and whatever holds the studio (the Character card, a dialog) scrolls instead. */ @media (max-width:820px){#dayroom .dp-studio{grid-template-columns:1fr;grid-template-rows:none;max-height:none}#dayroom .dp-left{border-right:0;border-bottom:1px solid var(--dr-line);padding-right:0;min-height:auto;overflow:visible}#dayroom .dp-right{min-height:auto}} /* Catalogue choices stay with the character selector, above the preview on every tab. */ #dayroom .dp-all-styles{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:12px;color:var(--dr-muted);cursor:pointer} #dayroom .dp-all-styles input{width:15px;height:15px;margin:0;accent-color:var(--dr-accent)} #dayroom .dp-all-styles[hidden],#dayroom .dp-other-styles[hidden]{display:none} #dayroom .dp-other-styles{display:grid;gap:7px;margin-top:10px;justify-items:start} /* Office world overlay (office-overlay.js): the approved "Card" name tags, room chips, speaking rings and bubbles, transcribed from design-plans/prototypes/2026-09-28-office-and-characters/world.html (.wm-layer, .s-soft .tag, .bubble, .typing, .ring and .room-label). The pixel world underneath is the same light artwork in every colour scheme, so these colours stay literal instead of following the light-dark --dr-* tokens; the status colours use window.css's --st-* tokens, which equal the mockup's values. Every rule is scoped to the overlay (product.css's older #dayroom .dr-tag and #dayroom .dr-dot rules, which these names once collided with, are gone; the scoping stays as the cheaper defence against the next one). The host isolates its own stacking context, so the cards' z-indexes (front cards up to 41) never reach #dayroom's, where the modal #dr-overlay (z 10) and the office hint card (z 35) must stay on top. */ #dayroom .dr-office-overlay{position:absolute;inset:0;isolation:isolate;overflow:hidden;pointer-events:none;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased} /* The mockup rendered border-box (its speaking ring measures 50 × 62 outside), as the app does. */ #dayroom .dr-office-overlay,#dayroom .dr-office-overlay *{box-sizing:border-box} #dayroom .dr-office-overlay [hidden]{display:none!important} /* The card. Line 2 (the Spotify logo and the status) is one group, centred under the name, and keeps its 10.5px line with the logo alone. A one-line card is 22px, the pill's height, and a two-line card 34px: office-overlay.js stacks cards with these heights. */ #dayroom .dr-office-overlay .dr-tag{position:absolute;left:0;top:0;display:inline-flex;align-items:flex-start;gap:5px;min-height:22px;padding:5px 10px 5px 8px;border:0;border-radius:10px;background:#fff;color:#17211c;box-shadow:0 3px 10px rgba(20,40,30,.24),0 0 0 1px rgba(0,0,0,.05);font:700 11.5px/1 'Manrope',sans-serif;white-space:nowrap;letter-spacing:-.005em} #dayroom .dr-office-overlay .dr-tag.dr-ring{box-shadow:0 3px 10px rgba(20,40,30,.24),0 0 0 2px #1F5A41} #dayroom .dr-office-overlay .dr-dot{flex:none;width:7px;height:7px;margin:3px 0 0;border-radius:50%;background:var(--st-available)} #dayroom .dr-office-overlay .dr-dot.is-working{background:var(--st-working)} #dayroom .dr-office-overlay .dr-dot.is-dnd{background:var(--st-dnd)} #dayroom .dr-office-overlay .dr-dot.is-away{background:var(--st-away)} #dayroom .dr-office-overlay .dr-dot.is-lunch{background:var(--st-lunch)} #dayroom .dr-office-overlay .dr-you{margin-left:2px;padding:2px 5px;border-radius:6px;background:#1F5A41;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.02em} #dayroom .dr-office-overlay .dr-lines{display:flex;flex-direction:column;gap:2px} #dayroom .dr-office-overlay .dr-lines small{display:flex;align-self:center;align-items:center;gap:4px;min-height:10.5px;font-size:10.5px;font-weight:600;color:#6b766f} #dayroom .dr-office-overlay .dr-spot{flex:none;width:10px;height:10px} /* Bubbles sit 8px above the card, 14px right of the character, as world.html places them over a two-line card. */ #dayroom .dr-office-overlay .dr-bubble{position:absolute;left:calc(50% + 14px);bottom:calc(100% + 8px);transform:translateX(-50%);transform-origin:50% 100%;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:26px;min-width:26px;padding:0 7px;border-radius:13px 13px 13px 5px;background:#fff;box-shadow:0 3px 10px rgba(20,40,30,.22);font:800 12px/1 'Manrope',sans-serif;color:#17211c;white-space:nowrap} #dayroom .dr-office-overlay .dr-em{font-size:14px;line-height:1} #dayroom .dr-office-overlay .dr-typing-dots{display:inline-flex;gap:3px} #dayroom .dr-office-overlay .dr-typing-dots i{width:5px;height:5px;border-radius:50%;background:#7d8a83;animation:dr-overlay-typing 1.2s ease-in-out infinite} #dayroom .dr-office-overlay .dr-typing-dots i:nth-child(2){animation-delay:.15s} #dayroom .dr-office-overlay .dr-typing-dots i:nth-child(3){animation-delay:.3s} #dayroom .dr-office-overlay .dr-bubble.is-pop{animation:dr-overlay-pop .24s cubic-bezier(.3,1.5,.6,1) both} /* A soft green ring around someone speaking in a call. */ #dayroom .dr-office-overlay .dr-ring.is-speaking{position:absolute;left:0;top:0;border-radius:50%;border:2px solid rgba(61,170,109,.9);box-shadow:0 0 0 4px rgba(61,170,109,.25)} /* Room chips (# channel · n) and the dark zone chips. */ #dayroom .dr-office-overlay .dr-chip{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 10px;border-radius:9px;background:rgba(255,255,255,.94);color:#1d2a23;font:800 12.5px/1 'Manrope',sans-serif;box-shadow:0 3px 10px rgba(20,40,30,.18);white-space:nowrap} #dayroom .dr-office-overlay .dr-chip .dr-h{color:#8a968f;font-weight:700} #dayroom .dr-office-overlay .dr-chip .dr-n{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:6px;background:#E3EEDB;color:#1F6446;font-size:11px} #dayroom .dr-office-overlay .dr-chip .dr-n::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--st-available)} #dayroom .dr-office-overlay .dr-chip.is-zone{background:rgba(20,28,24,.72);color:#fff} @keyframes dr-overlay-typing{0%,60%,100%{opacity:.45;transform:none}30%{opacity:1;transform:translateY(-2px)}} @keyframes dr-overlay-pop{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}} @media(prefers-reduced-motion:reduce){#dayroom .dr-office-overlay .dr-typing-dots i,#dayroom .dr-office-overlay .dr-bubble.is-pop{animation:none}} /* Dragging the map (product-world.js): the office canvas takes every touch gesture itself (a finger drags the map instead of scrolling the page) and shows a grab hand, grabbing while a drag is under way. office-hints' targets sit over the canvas, and a drag may start on one, so they never hand a touch drag to the page either. These follow product.css's older #dr-canvas rule (touch-action:manipulation, a crosshair) in the bundle, so they win at the same specificity. */ #dayroom #dr-canvas{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none} #dayroom #dr-canvas[data-panning]{cursor:grabbing} #dayroom .dr-office-hint-target{touch-action:none} /* "Back to me": shown while a drag has parked the view away from you, just above the zoom controls (window.css's .dr-office-zoom, bottom-right), with the window's glass chip look. */ #dayroom .dr-world>.dr-office-recenter{position:absolute;z-index:7;right:12px;bottom:56px;display:inline-flex;align-items:center;height:34px;margin:0;padding:0 12px;border:0;border-radius:11px;color:var(--dr-ink);font-size:12.5px;font-weight:800;white-space:nowrap;cursor:pointer} #dayroom .dr-world>.dr-office-recenter:focus-visible{box-shadow:0 0 0 2px rgba(10,20,14,.65)} @media(forced-colors:active){#dayroom .dr-world>.dr-office-recenter{border:1px solid ButtonText}} /* Window design system: approved mockup "directions.html" B. build.py loads it after the older stylesheets and before surfaces.css, desk-studio.css and doorway.css, which build on it. */ @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/manrope/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/manrope/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/silkscreen/silkscreen-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/silkscreen/silkscreen-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* Mockup tokens (reference §1.1), exact light/dark pairs via light-dark(); color-scheme:light dark lets Match device follow the OS. One deliberate departure for WCAG AA: light --dr-muted is #5C6761, not the mockup's #69746E (4.25:1 on --dr-bg), so muted text reads at 4.5:1 or better on every light surface, a hovered sidebar row included (interface-themes.test.cjs). --dr-error-text names product.css's and desk-studio.css's existing .dr-error/.dp-error red (unchanged, both still set it literally) so a later rule (surfaces.css's .dr-error.dr-error, Desks Task 12 verification) can reuse the same colour as a token instead of a bare hex, which surfaces.css's own tests refuse. Not a palette token: this colour is deliberately the same regardless of the interface palette, like the unread badge red. */ #dayroom{color-scheme:light dark;--dr-bg:light-dark(#F1F0EA,#0B0E0D);--dr-panel:light-dark(#FFFFFF,#141816);--dr-sunken:light-dark(#F3F2EE,#1A1F1C);--dr-hover:light-dark(#F4F4F0,#191E1B);--dr-sel:light-dark(#E4E7DF,#1F2622);--dr-line:light-dark(rgba(26,36,30,.08),rgba(226,238,230,.07));--dr-line-2:light-dark(rgba(26,36,30,.14),rgba(226,238,230,.13));--dr-ink:light-dark(#151E19,#EDF3EF);--dr-ink-2:light-dark(#333E38,#C5CEC8);--dr-muted:light-dark(#5C6761,#8C9892);--dr-faint:light-dark(#99A29C,#5E6A64);--dr-accent:light-dark(#1F5A41,#C4EC7D);--dr-accent-ink:light-dark(#FFFFFF,#132010);--dr-accent-soft:light-dark(#E3EEDB,rgba(196,236,125,.11));--dr-accent-text:light-dark(#1F6446,#C9EF86);--dr-lime:light-dark(#D6F291,#C4EC7D);--dr-lime-ink:light-dark(#20390F,#132010);--dr-logo-bg:light-dark(#1F5A41,#C4EC7D);--dr-logo-fg:light-dark(#D6F291,#173A28);--dr-glass:light-dark(rgba(255,255,255,.80),rgba(17,21,19,.80));--dr-glass-line:light-dark(rgba(255,255,255,.9),rgba(255,255,255,.08));--dr-field:light-dark(#FFFFFF,#111513);--dr-glass-shadow:0 10px 30px -6px rgba(24,40,30,.28);--dr-shadow:0 0 0 1px rgba(26,36,30,.06),0 1px 2px rgba(20,30,25,.04),0 10px 30px -8px rgba(20,30,25,.10);--st-available:#3DAA6D;--st-working:#E3A33B;--st-dnd:#E05A4F;--st-away:#A3ABA6;--st-lunch:#E88A3A;--dr-error-text:light-dark(#a13636,#f4b3ab)} /* --dr-shadow/--dr-glass-shadow have a different number of layers per scheme (reference §1.1), so they can't be one light-dark() color value like the tokens above; swap the whole declaration instead. Match device has no data-scheme of its own (interface-themes.js only sets it for a named palette), so it follows the OS. A named palette sets data-scheme to its own scheme, so its shadow always matches its own panel no matter what the OS prefers. */ @media (prefers-color-scheme:dark){#dayroom:not([data-scheme]){--dr-glass-shadow:0 12px 34px -6px rgba(0,0,0,.55);--dr-shadow:0 0 0 1px rgba(255,255,255,.05),0 14px 34px -10px rgba(0,0,0,.6)}} #dayroom[data-scheme="dark"]{--dr-glass-shadow:0 12px 34px -6px rgba(0,0,0,.55);--dr-shadow:0 0 0 1px rgba(255,255,255,.05),0 14px 34px -10px rgba(0,0,0,.6)} #dayroom[data-scheme="light"]{--dr-glass-shadow:0 10px 30px -6px rgba(24,40,30,.28);--dr-shadow:0 0 0 1px rgba(26,36,30,.06),0 1px 2px rgba(20,30,25,.04),0 10px 30px -8px rgba(20,30,25,.10)} /* --dr-soft predates this token set; keep it a live alias of --dr-sunken so panels using it still look right until later tasks restyle them. */ #dayroom{--dr-soft:var(--dr-sunken)} /* Personal palettes (AGENTS.md) write only bg/panel/ink/muted/accent inline (interface-themes.js); everything else is derived here with contrast similar to the mockup's Match device values. */ #dayroom[data-ui-theme]:not([data-ui-theme="system"]){--dr-sunken:color-mix(in srgb,var(--dr-panel) 94%,var(--dr-ink) 6%);--dr-hover:color-mix(in srgb,var(--dr-panel) 96%,var(--dr-ink) 4%);--dr-sel:color-mix(in srgb,var(--dr-bg) 92%,var(--dr-ink) 8%);--dr-line:color-mix(in srgb,var(--dr-ink) 8%,transparent);--dr-line-2:color-mix(in srgb,var(--dr-ink) 14%,transparent);--dr-ink-2:color-mix(in srgb,var(--dr-ink) 62%,var(--dr-muted) 38%);--dr-faint:color-mix(in srgb,var(--dr-muted) 65%,var(--dr-bg) 35%);--dr-accent-soft:color-mix(in srgb,var(--dr-accent) 12%,transparent);--dr-accent-text:color-mix(in srgb,var(--dr-accent) 85%,var(--dr-ink) 15%)} /* Field edges stay distinct from the softer card dividers in every personal palette. */ #dayroom{--dr-field-line:color-mix(in srgb,var(--dr-muted) 85%,var(--dr-field))} #dayroom .dr-ws-tile svg{display:block;width:32px;height:32px;border-radius:5px} /* --dr-field per scheme (a named palette also sets data-scheme, reference §1.1): Match device light uses the panel colour itself; dark sits a little toward --dr-bg, below the panel, never toward --dr-ink (lighter would read as a raised control, not a field). */ #dayroom[data-ui-theme]:not([data-ui-theme="system"])[data-scheme="light"]{--dr-field:var(--dr-panel)} #dayroom[data-ui-theme]:not([data-ui-theme="system"])[data-scheme="dark"]{--dr-field:color-mix(in srgb,var(--dr-panel) 85%,var(--dr-bg) 15%)} /* Base rules (reference §1.1). */ #dayroom{font-family:'Manrope',system-ui,sans-serif;font-size:14px;line-height:1.45;color:var(--dr-ink);background:var(--dr-bg);-webkit-font-smoothing:antialiased} #dayroom b{font-weight:800} #dayroom svg.dr-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} #dayroom .dr-px{shape-rendering:crispEdges;flex:none} #dayroom canvas{image-rendering:pixelated} /* Utilities every later task uses. */ #dayroom .dr-glass{background:var(--dr-glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:var(--dr-glass-shadow),inset 0 0 0 1px var(--dr-glass-line)} /* forced-color-adjust:none (I9): a contrast theme otherwise flattens every status dot to the same system colour, losing available/working/dnd/away/lunch, which only background ever carries. */ #dayroom .dr-st{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;border:2.5px solid var(--dr-bg);background:var(--st-available);forced-color-adjust:none} #dayroom .dr-st.is-working{background:var(--st-working)} #dayroom .dr-st.is-dnd{background:var(--st-dnd)} #dayroom .dr-st.is-away,#dayroom .dr-st.is-offline{background:var(--st-away)} #dayroom .dr-st.is-lunch{background:var(--st-lunch)} #dayroom .dr-grow{flex:1} /* Short desktop windows: the chat spacing rules moved unchanged from call-panel.css (calls plan Task 2). The Messages and composer field sections below (reference §2.5) now set their own min-height/padding unconditionally and win by coming later in the cascade; only the tools row's tighter margin still has no later rule to override it. */ @media(min-width:851px) and (max-height:760px){ #dayroom .dr-chattools{margin:4px 0} } /* ---------- The Window shell (reference §2.5): the rail and sidebar sit on --dr-bg; only the main pane is a raised card. ---------- */ /* App frame: .app is #dr-product, a full-window row of rail | sidebar + main pane (or a work page). */ body:has(#dayroom:not([data-screen])){padding:0} #dayroom:not([data-screen]){max-width:none;height:100dvh;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden} #dayroom #dr-product{position:relative;flex:1;min-height:0;display:flex} #dayroom #dr-work-page,#dayroom #dr-tools-page{flex:1;min-width:0;min-height:0} /* Minor 16: at top:14px this sat inside the 60px header (.dr-main's own 8px top margin + the header's height = 68px), covering the room title's subtitle. 76px clears the header with the same 8px the header itself keeps from the pane's top edge. */ #dayroom #dr-connection{position:absolute;z-index:8;top:76px;left:50%;transform:translateX(-50%);max-width:min(560px,calc(100% - 32px));padding:8px 14px;border-radius:11px;background:var(--dr-glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:var(--dr-glass-shadow),inset 0 0 0 1px var(--dr-glass-line);color:var(--dr-ink);font-size:12.5px;font-weight:700} /* Rail (76px). */ #dayroom .dr-rail{width:76px;flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 0;min-height:0;background:var(--dr-bg)} #dayroom .dr-rail-main,#dayroom .dr-rail-bottom{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px} /* The destinations take the rail's free space (the mockup's .grow) and scroll in short windows; Help and your portrait stay at the bottom. */ #dayroom .dr-rail-main{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none} #dayroom .dr-rail-bottom{flex:none} #dayroom .dr-rbtn{position:relative;flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0 6px;border:0;border-radius:12px;background:transparent;color:var(--dr-muted);font-size:10.5px;font-weight:700;line-height:1.45;letter-spacing:.01em} #dayroom .dr-rbtn .dr-ri{position:relative;width:42px;height:32px;border-radius:10px;display:grid;place-items:center} #dayroom .dr-rbtn .dr-ri svg.dr-i{width:20px;height:20px} #dayroom .dr-rbtn:hover,#dayroom .dr-rbtn[aria-current=page]{color:var(--dr-ink)} #dayroom .dr-rbtn:hover .dr-ri{background:color-mix(in srgb,var(--dr-ink) 6%,transparent)} #dayroom .dr-rbtn[aria-current=page] .dr-ri{background:var(--dr-sel)} #dayroom .dr-rail-badge{position:absolute;top:0;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#D6373D;color:#fff;font:800 10px/17px 'Manrope',sans-serif;text-align:center;box-shadow:0 0 0 2px var(--dr-bg)} /* .panes + .pane.mainpane: a grid of the 256px sidebar and the main pane card. */ #dayroom .dr-layout{flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:256px minmax(0,1fr);grid-template-rows:minmax(0,1fr)} /* Sidebar (256px). */ #dayroom .dr-sidebar{min-width:0;min-height:0;display:flex;flex-direction:column;padding:10px 8px 10px 2px} #dayroom .dr-ws{position:relative;flex:none;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 8px;border-radius:11px} #dayroom .dr-ws-tile{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#E8D8AA;color:#5B4520;font:400 11px 'Silkscreen',monospace;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),inset 0 -2px 0 rgba(0,0,0,.08)} #dayroom .dr-ws-text{flex:1;min-width:0} #dayroom .dr-workspace-menu-trigger{display:flex;align-items:center;gap:4px;max-width:100%;padding:0;border:0;background:transparent;color:var(--dr-ink);font-size:15px;font-weight:800;line-height:1.45;letter-spacing:-.01em;text-align:left} #dayroom .dr-workspace-menu-trigger svg.dr-i{width:15px;height:15px;color:var(--dr-muted)} #dayroom #dr-workspace-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #dayroom .dr-ws-sub{margin-top:1px;color:var(--dr-muted);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dayroom .dr-iconbtn{flex:none;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:9px;background:transparent;color:var(--dr-muted)} #dayroom .dr-iconbtn.is-boxed{box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink-2)} #dayroom .dr-iconbtn:hover{background:color-mix(in srgb,var(--dr-ink) 6%,transparent);color:var(--dr-ink)} #dayroom .dr-search{flex:none;display:flex;align-items:center;gap:9px;height:36px;margin:10px 4px 8px 6px;padding:0 8px 0 11px;border:0;border-radius:10px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line);color:var(--dr-muted);font-size:13.5px;font-weight:600;text-align:left} #dayroom .dr-search svg.dr-i{width:16px;height:16px} #dayroom .dr-search:hover{box-shadow:inset 0 0 0 1px var(--dr-line-2)} #dayroom .dr-kbd{margin-left:auto;padding:2px 6px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-muted);font:700 11px 'Manrope',sans-serif} #dayroom .dr-row{flex:none;display:flex;align-items:center;gap:10px;height:32px;margin:1px 0 1px 4px;padding:0 8px 0 10px;border:0;border-radius:9px;background:transparent;color:var(--dr-ink-2);font-size:14px;font-weight:600;white-space:nowrap;text-align:left} #dayroom button.dr-row:hover{background:color-mix(in srgb,var(--dr-ink) 6%,transparent)} /* Row states (.dim, .unread, .on). When two apply, unread beats dim and the open conversation beats both. */ #dayroom .dr-row.is-dim{color:var(--dr-muted)} #dayroom .dr-row.is-unread{color:var(--dr-ink);font-weight:800} #dayroom .dr-row.is-on,#dayroom button.dr-row.is-on:hover{background:var(--dr-sel);color:var(--dr-ink);font-weight:800} #dayroom .dr-row .dr-ic{flex:none;width:18px;display:grid;place-items:center;color:var(--dr-accent-text)} #dayroom .dr-row .dr-ic svg.dr-i{width:17px;height:17px} #dayroom .dr-row .dr-hash{flex:none;width:18px;color:var(--dr-faint);font-size:15px;font-weight:700;text-align:center} #dayroom .dr-row .dr-hash.is-private{display:grid;place-items:center} #dayroom .dr-row .dr-hash svg.dr-i{width:14px;height:14px} /* A long name truncates; a status note gives way first. */ #dayroom .dr-row .dr-name{min-width:0;overflow:hidden;text-overflow:ellipsis} #dayroom .dr-row .dr-note{flex:0 1000 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--dr-muted);font-size:12px;font-weight:600} #dayroom .dr-count{flex:none;margin-left:auto;min-width:20px;height:19px;padding:0 6px;border-radius:10px;background:var(--dr-accent);color:var(--dr-accent-ink);font:800 11px/19px 'Manrope',sans-serif;text-align:center} #dayroom .dr-newpill{margin-left:auto;height:20px;padding:0 8px;border-radius:10px;background:var(--dr-lime);color:var(--dr-lime-ink);font:800 10.5px/20px 'Manrope',sans-serif} /* A room's pile: up to three people in it at 20px, ringed in the sidebar colour. */ #dayroom .dr-row .dr-pile canvas{display:block;flex:none;width:20px;height:20px;margin-left:-5px;border-radius:6px;box-shadow:0 0 0 2px var(--dr-bg)} #dayroom .dr-pile+.dr-count{margin-left:0} /* A DM: the 24px portrait with a 10px status dot (or the companion's pixel robot), then the name and the Spotify badge. */ #dayroom .dr-dm canvas{display:block;width:24px;height:24px;border-radius:7px} #dayroom .dr-dm .dr-st{width:10px;height:10px;right:-3px;bottom:-3px;border-width:2px} #dayroom .dr-companion-dp{display:block;width:24px;height:24px;overflow:hidden;border-radius:7px} #dayroom .dr-companion-dp svg{display:block;width:100%;height:100%} /* #px-spot is a 10-cell mark (viewBox 0 0 10 10): size it at a multiple of 10 so every cell lands on a whole pixel at 1x and 2x (AGENTS.md "Dayroom visuals stay retro"). */ #dayroom .dr-row .dr-spot{flex:none;width:10px;height:10px;margin-left:auto} /* The lists stack full-width rows. */ #dayroom #dr-roomnav,#dayroom #dr-dmnav,#dayroom #dr-peoplenav{display:flex;flex-direction:column} /* Your day: a row under Catch up. "Your calendar" then its state as a note ("· state", like a DM's), which truncates; for the next meeting (is-next) the title truncates and the countdown stays whole at the right. */ #dayroom #dr-daybar{flex:none;display:flex;flex-direction:column} #dayroom .dr-daybar-button strong{flex:none;font:inherit} #dayroom .dr-daybar-button .dr-meeting-countdown{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--dr-muted);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums} #dayroom .dr-daybar-button:not(.is-next) .dr-meeting-countdown::before{content:'· '} #dayroom .dr-daybar-button.is-next strong{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} #dayroom .dr-daybar-button.is-next .dr-meeting-countdown{flex:none;margin-left:auto} #dayroom .dr-sidebar-scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dr-line-2) transparent} #dayroom .dr-sec{display:flex;align-items:center;gap:4px;padding:18px 8px 6px 14px;color:var(--dr-muted);font-size:12px;font-weight:800;letter-spacing:.01em} #dayroom .dr-sec svg.dr-i{width:14px;height:14px} /* The + is the mockup's 14px icon in a 24px target; negative margins keep the section at the mockup's height. It and the ⌘K hint use --dr-muted, not the mockup's --dr-faint (2.3:1), so they meet AA (1.4.11 for the icon, 1.4.3 for the hint). */ #dayroom .dr-sec .dr-plus{flex:none;width:24px;height:24px;margin:-3px -5px -3px auto;padding:0;border:0;border-radius:7px;display:grid;place-items:center;background:transparent;color:var(--dr-muted)} #dayroom .dr-sec .dr-plus:hover,#dayroom .dr-sec .dr-plus[aria-expanded=true]{background:color-mix(in srgb,var(--dr-ink) 6%,transparent);color:var(--dr-ink)} /* Sidebar footer user panel (.upanel). */ #dayroom .dr-side-foot{flex:none;margin-top:auto;padding:8px 4px 2px 6px} /* Reference .upanel padding (8px all round); long names truncate so the music badge and account button keep the inset. */ #dayroom .dr-upanel{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:var(--dr-panel);box-shadow:var(--dr-shadow)} #dayroom .dr-dpw{position:relative;flex:none} #dayroom .dr-upanel .dr-dpw{width:34px;height:34px;padding:0;border:0;border-radius:10px;background:transparent} #dayroom .dr-upanel canvas{display:block;width:34px;height:34px;border-radius:10px} #dayroom .dr-hud-id{flex:1;min-width:0} #dayroom .dr-hud-id b{display:block;font-size:13px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dayroom .dr-pstat{display:inline-flex;align-items:center;gap:6px;max-width:100%;color:var(--dr-muted);font-size:12px;font-weight:700;cursor:pointer} #dayroom .dr-pstat .dr-st{position:static;flex:none;width:8px;height:8px;border:0} #dayroom .dr-pstat svg.dr-i{width:13px;height:13px} /* The status select reads as text: "Available ⌄". */ /* Reads as plain text ("Available ⌄"), not a boxed field: opts out of the global field look, which only resets the properties this rule also sets (reference §2.5 fields), by resetting height/box-shadow explicitly. */ /* Minor 14 (WCAG 2.5.8): height:auto let this read at the text's own ~17px line box. min-height plus the flex centring keeps the plain-text look while giving it a 24px target, same as every other control. */ #dayroom #dr-status{height:auto;min-height:24px;display:inline-flex;align-items:center;box-shadow:none;min-width:0;max-width:100%;field-sizing:content;margin:0;padding:0;border:0;border-radius:4px;background:none;color:inherit;font:inherit;font-weight:inherit;appearance:none;-webkit-appearance:none;text-overflow:ellipsis;cursor:pointer} #dayroom #dr-status:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px;box-shadow:none} #dayroom .dr-music{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 9px;border:0;border-radius:11px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line);color:var(--dr-ink-2);font-size:12px;font-weight:700;white-space:nowrap} #dayroom .dr-music .dr-spot{width:20px;height:20px;margin:0} #dayroom .dr-music.is-mini{height:32px;padding:0 9px} #dayroom .dr-music.is-mini .dr-spot{width:20px;height:20px} /* Main pane: the one raised card, inside padding 8px 8px 8px 0. */ #dayroom .dr-main{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;margin:8px 8px 8px 0;overflow:hidden;border-radius:14px;background:var(--dr-panel);box-shadow:var(--dr-shadow)} /* Main pane / chat header (reference §2.5): title and subtitle, the view switch, the member pile, the Huddle pill, then the conversation tools. The controls keep their size; at the 900px desktop minimum the title and subtitle truncate instead of the controls wrapping below them. */ #dayroom .dr-head{height:60px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px 0 20px;border-bottom:1px solid var(--dr-line)} #dayroom .dr-head>div:first-child{min-width:0} #dayroom .dr-title{overflow:hidden;font-size:16px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis} #dayroom .dr-title .dr-hash{margin-right:6px;color:var(--dr-faint);font-weight:700} #dayroom .dr-subt{margin-top:1px;overflow:hidden;color:var(--dr-muted);font-size:12.5px;font-weight:600;white-space:nowrap;text-overflow:ellipsis} /* The view switch is a segmented control; aria-pressed marks the current layout. */ #dayroom .dr-seg{flex:none;display:inline-flex;padding:3px;border-radius:10px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-seg button{width:32px;height:26px;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:transparent;color:var(--dr-muted)} #dayroom .dr-seg button:hover{color:var(--dr-ink)} #dayroom .dr-seg button[aria-pressed=true]{background:var(--dr-panel);color:var(--dr-ink);box-shadow:0 1px 2px rgba(0,0,0,.10),0 0 0 1px var(--dr-line)} #dayroom .dr-seg svg.dr-i{width:16px;height:16px} /* The member pile (reference .pile), at the header's 24px size (.head .pile canvas). */ #dayroom .dr-pile{flex:none;display:flex;margin-left:auto;padding:0 0 0 5px;border:0;background:transparent} #dayroom #dr-member-pile canvas{display:block;flex:none;width:33px;height:33px;margin-left:-6px;border-radius:4px;box-shadow:0 0 0 2px var(--dr-panel)} /* The Huddle pill; .is-live is the reference's .live-huddle. */ #dayroom .dr-pillbtn{flex:none;height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--dr-ink);box-shadow:inset 0 0 0 1px var(--dr-line-2);font-size:13px;font-weight:800;white-space:nowrap} #dayroom .dr-pillbtn:hover{background:color-mix(in srgb,var(--dr-ink) 6%,transparent)} #dayroom .dr-pillbtn svg.dr-i{width:16px;height:16px} #dayroom .dr-pillbtn.is-live{background:var(--dr-accent-soft);color:var(--dr-accent-text);box-shadow:inset 0 0 0 1px rgba(61,170,109,.35)} /* Named palettes ring the live pill in their own accent. */ #dayroom[data-ui-theme]:not([data-ui-theme="system"]) .dr-pillbtn.is-live{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dr-accent) 35%,transparent)} #dayroom .dr-pillbtn .dr-huddle-count{display:none} /* Up to 1040px wide the pill folds to its icon, plus the count while a call is live, so the room's name keeps its space. The full label stays for screen readers and as the tooltip. */ @media(max-width:1040px){ #dayroom .dr-pillbtn{position:relative;padding:0 8px} #dayroom .dr-pillbtn>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} #dayroom .dr-pillbtn .dr-huddle-count{display:inline} } /* Search, notifications, the companion and Channel details: icon buttons spaced like the header's own controls. */ #dayroom .dr-team-tools{flex:none;display:flex;align-items:center;gap:10px} #dayroom #dr-notifications{position:relative} #dayroom #dr-notification-count{position:absolute;top:-2px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#D6373D;color:#fff;font:800 10px/17px 'Manrope',sans-serif;text-align:center;box-shadow:0 0 0 2px var(--dr-panel)} #dayroom #dr-notification-count:empty{display:none} /* The office window (reference §2.5): its chips, and the expanded office (below, near .dr-chatcol). The world engine (product-world.js) sizes the canvas to fill .dr-world with its own ResizeObserver and re-lays itself out on resize, so there is no fixed-aspect canvas "shown whole" here to letterbox. 336px from an 836px-tall window up (the mockup is 900); shorter windows give the height back to the conversation. */ #dayroom .dr-window{position:relative;flex:none;height:clamp(160px,calc(100dvh - 500px),336px);margin:12px 12px 0;overflow:hidden;border-radius:13px;background:#E8F0D3;box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-office-stage{position:absolute;inset:0;display:flex;justify-content:center} #dayroom .dr-world{position:relative;width:100%;height:100%} #dayroom #dr-canvas{display:block;width:100%;height:100%} #dayroom[data-office-view=mini] .dr-window{height:clamp(120px,calc(100dvh - 540px),180px)} #dayroom[data-office-view=chat] .dr-window{display:none} /* The chat column: max 860px, centred under the window. If a call panel, reply and drafts outgrow a short window, the column scrolls rather than clipping the composer. */ #dayroom .dr-chatcol{position:relative;flex:1;min-width:0;min-height:0;width:100%;max-width:860px;margin:8px auto 0;display:flex;flex-direction:column;overflow-y:auto} /* The window's chips (reference §2.5, the "where" and "open" chips): the default window shows only these two, top corners. dr-where-dot is its own class, not the unrelated #dr-live aria-status region's (that one hides itself with :empty{display:none} in product.css, which this always- empty-by-design dot would otherwise inherit too). z-index:7 keeps the chips clickable above the office-hints' invisible hotspot targets (office-hints.js layers a person/desk/table hotspot at z-index 5 or 6, position:fixed), which otherwise cover the whole window and, tied at the same stacking level, win ties by DOM order (they're appended after #dr-product) over an absolutely positioned sibling at the same z-index. The child combinator keeps these rules off the office's own room and zone chips, which are .dr-chip too, deeper in the window's overlay (office-overlay.css styles those). */ #dayroom .dr-window>.dr-chip{position:absolute;z-index:7;top:12px;margin:0;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:0;border-radius:11px;color:var(--dr-ink);font-size:12.5px;font-weight:800;white-space:nowrap} #dayroom .dr-window>.dr-chip svg.dr-i{width:16px;height:16px} #dayroom #dr-where{left:12px} #dayroom .dr-where-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--st-available);box-shadow:0 0 0 3px rgba(61,170,109,.2)} #dayroom #dr-where-other{color:var(--dr-muted);font-weight:700} #dayroom #dr-open-office{right:12px} /* Minor 13: --dr-accent is lime in dark mode (#C4EC7D), too close in value to this window's own pale office art (office-overlay.css: the same light artwork in every colour scheme, so this stays pale behind the chips even in dark mode) for the shared outline alone (window.css's generic :focus-visible ring, below) to read clearly there. A dark inner edge, just inside that ring's own outline-offset:2px, keeps every glass chip's focus ring visible over art this light in every palette, not only dark mode -- a plain dark rgba, not a token, since it only ever needs to be dark, never a themed colour. */ #dayroom .dr-window>.dr-chip:focus-visible{box-shadow:0 0 0 2px rgba(10,20,14,.65)} /* Expanded office (the "open" chip's #dayroom[data-office-expanded], not persisted): the window fills the main pane below the header and the chat column hides, so the HUD (bottom-left, reference .hud/.hbtn) becomes the way back to the desk, character editor, map and (owners only) the Office theme. Same specificity as the mini/chat rules above; this wins by coming later in the cascade. */ #dayroom[data-office-expanded] .dr-window{flex:1;height:auto;margin:12px} #dayroom[data-office-expanded] .dr-chatcol{display:none} /* z-index:7 for the same reason as .dr-chip above: office-hints' hotspot targets can otherwise win the click on a HUD button they happen to overlap. */ #dayroom .dr-hud{display:none;position:absolute;z-index:7;left:12px;bottom:12px;align-items:center;gap:10px;padding:7px 8px 7px 7px;border-radius:17px} #dayroom[data-office-expanded] .dr-hud{display:inline-flex} #dayroom .dr-hbtn{height:36px;min-width:36px;margin:0;padding:0 10px;border:0;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:transparent;color:var(--dr-ink-2);font-weight:800;font-size:12.5px;white-space:nowrap} #dayroom .dr-hbtn svg.dr-i{width:18px;height:18px} #dayroom .dr-hbtn:hover{background:color-mix(in srgb,var(--dr-ink) 6%,transparent)} /* ---------- Messages (reference §2.5 "Chat column"): flat rows under day dividers, hover tools, attachment cards, the thread line and the typing line. ---------- */ /* .msgs: a short conversation sits at the bottom, above the typing line; a long one scrolls as usual. */ #dayroom .dr-messages{gap:0;padding:0 12px} /* The thread list keeps room above its root for the root's tools (top:-15px). */ #dayroom .dr-thread-messages{padding-top:16px} #dayroom #dr-messages>:first-child{margin-top:auto} #dayroom .dr-day{flex:none;display:flex;align-items:center;gap:12px;margin:6px 14px 8px;color:var(--dr-muted);font-size:12px;font-weight:800} #dayroom .dr-day::before,#dayroom .dr-day::after{content:'';flex:1;height:1px;background:var(--dr-line)} /* .msg: one flat row for everyone, yours included. Imported WhatsApp history keeps its transcript (surfaces.css). The row lights up for the pointer or for keyboard focus (:focus-visible), so a mouse click leaves nothing stuck. */ #dayroom article.dr-message-row{position:relative;display:flex;align-items:flex-start;gap:12px;margin:0;padding:8px 12px;border:0;border-radius:12px;line-height:1.45} #dayroom article.dr-message-row:is(:hover,:has(:focus-visible)){background:var(--dr-hover)} #dayroom article.dr-message-row.is-highlighted{background:var(--dr-accent-soft)} #dayroom .dr-message-row .dr-message-avatar{flex:none;display:block;width:38px;height:38px;margin-top:2px;padding:0;border:0;border-radius:11px;overflow:hidden;background:transparent} #dayroom .dr-message-row .dr-message-avatar:disabled{opacity:1;cursor:default} #dayroom .dr-message-row .dr-message-avatar canvas{display:block;width:38px;height:38px;margin:0;border-radius:11px} #dayroom .dr-message-row .dr-agent-portrait{display:grid;place-items:center;background:#203b34} #dayroom .dr-message-row .dr-agent-portrait .dr-companion-dp{width:100%;height:100%;border-radius:0} #dayroom .dr-message-row .dr-wa-historical-avatar{display:grid;place-items:center;border:1px solid var(--dr-line);background:var(--dr-sunken)} #dayroom .dr-message-content{flex:1;min-width:0} #dayroom .dr-msghead{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin:0} #dayroom .dr-msghead b{font-size:14px;color:var(--dr-ink)} /* Times use --dr-muted, not the mockup's --dr-faint: faint is about 2.6:1 on the light panel, below the 4.5:1 that 12px text needs. */ #dayroom .dr-msghead time{color:var(--dr-muted);font-size:12px;font-weight:700} #dayroom .dr-msghead .dr-agent-label{margin:0;padding:0 5px;border-radius:5px;background:var(--dr-sunken);color:var(--dr-muted);font-size:10.5px;font-weight:800;line-height:17px} /* The text (.msg p): user text keeps its line breaks; answers keep their Markdown, spaced like the mockup's paragraphs. */ #dayroom .dr-message-body{margin-top:2px;color:var(--dr-ink-2);font-weight:500;white-space:pre-wrap} #dayroom .dr-message-body .dr-answer-text{line-height:inherit} #dayroom .dr-message-body .dr-answer-text>*{margin:0} #dayroom .dr-message-body .dr-answer-text>*+*{margin-top:5px} #dayroom .dr-message-body strong{color:var(--dr-ink);font-weight:700} #dayroom .dr-message-body .dr-message-citation{padding:0 2px} /* A failed companion answer, on the question itself (only its asker gets command_state). */ #dayroom .dr-command-failed{margin-top:4px;color:var(--dr-muted);font-size:12.5px;font-weight:600} #dayroom .dr-command-failed .dr-command-retry{padding:0;border:0;background:none;color:var(--dr-accent-text);font-weight:800} #dayroom .dr-command-failed .dr-command-retry:hover{text-decoration:underline;text-underline-offset:3px} /* Pending sends (outbox.js): your message reads quieter until the server has it; a failed one says so in the error colour, with Retry and Edit. */ #dayroom article.dr-message-row.dr-outbox-pending .dr-message-body,#dayroom .dr-call-chat-msg.is-pending .dr-call-chat-body{opacity:.72} #dayroom article.dr-message-row.dr-outbox-pending.is-failed .dr-message-body,#dayroom .dr-call-chat-msg.is-failed .dr-call-chat-body{opacity:1} #dayroom .dr-outbox-status{margin:4px 0 0;color:var(--dr-muted);font-size:12.5px;font-weight:600} #dayroom .dr-outbox-status.is-failed{color:var(--dr-error-text);font-weight:700} #dayroom .dr-outbox-status .dr-link{display:inline;min-height:0;font-size:12.5px} #dayroom .dr-outbox-files{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none} #dayroom .dr-outbox-files li{padding:2px 8px;border:1px solid var(--dr-line);border-radius:6px;color:var(--dr-muted);font-size:12.5px;font-weight:600} #dayroom .dr-outbox-thinking-line{display:flex;align-items:center;gap:8px;min-height:38px;margin:0;color:var(--dr-muted);font-size:13px;font-weight:700} #dayroom .dr-mention{padding:0 4px;border-radius:5px;background:var(--dr-accent-soft);color:var(--dr-accent-text);font-weight:800} #dayroom .dr-message-content .dr-replycontext{display:block;max-width:100%;margin:4px 0 2px;padding:1px 0 1px 10px;border:0;border-left:2px solid var(--dr-line-2);border-radius:0;background:none;color:var(--dr-muted);font-size:12.5px;font-weight:600;text-align:left;white-space:normal;overflow-wrap:anywhere} #dayroom .dr-message-content .dr-replycontext:hover{color:var(--dr-ink-2)} /* Attachments as the reference .att card: an icon tile, then the name. An uploaded picture shows itself instead of the tile; the tile's pixel page is the mockup's DOC. */ #dayroom .dr-message-content .dr-attachment{display:flex;align-items:center;gap:11px;width:fit-content;max-width:100%;margin-top:9px;padding:8px 14px 8px 8px;border-radius:12px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink);font-size:13px;font-weight:800;line-height:1.25;text-decoration:none;overflow-wrap:anywhere} #dayroom .dr-message-content .dr-attachment::before{content:'';flex:none;width:38px;height:38px;border-radius:10px;background:light-dark(#F2E3F4,#2A2230) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23A259FF' d='M2 0h4l2 2v8H2z'/%3E%3Cpath fill='%23F4E8FF' d='M3 3h4v1H3zM3 5h4v1H3zM3 7h3v1H3z'/%3E%3Cpath fill='%237B2FD9' d='M6 0h1v1h1v1H6z'/%3E%3C/svg%3E") center/20px 20px no-repeat} #dayroom .dr-message-content .dr-attachment:hover{text-decoration:underline;text-underline-offset:3px} #dayroom .dr-message-content .dr-attachment:has(img){flex-direction:column;align-items:flex-start;gap:6px;padding:8px} #dayroom .dr-message-content .dr-attachment:has(img)::before{content:none} #dayroom .dr-message-content .dr-attachment img{display:block;max-width:100%;max-height:180px;border-radius:8px} #dayroom .dr-message-content .dr-drive-attachment{width:fit-content;max-width:100%;margin:9px 0 0;border:0;border-radius:12px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2)} #dayroom .dr-message-content .dr-drive-attachment a{gap:11px;padding:8px 14px 8px 8px} /* The Drive pixel icon at its own 34px grid, in the 38px tile. */ #dayroom .dr-message-content .dr-drive-attachment a>svg.dr-drive-icon{width:38px;height:38px;padding:2px;border-radius:10px;background:var(--dr-sunken)} #dayroom .dr-message-content .dr-drive-attachment strong{font-size:13px;font-weight:800;line-height:1.25} #dayroom .dr-message-content .dr-drive-attachment small{margin-top:0;font-size:12px;font-weight:600} #dayroom .dr-message-content .dr-chat-media{margin-top:9px;border:0;border-radius:12px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2)} #dayroom .dr-message-content .dr-message-task{width:fit-content;margin-top:9px;padding:9px 14px 9px 12px;border:0;border-radius:12px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink-2)} /* The thread line (reference .thread): the repliers' 20px pile, ringed in the row's colour, then the accent "N replies" and when the last reply came. */ #dayroom .dr-thread-line{display:flex;align-items:center;gap:9px;width:fit-content;margin-top:7px;font-size:12.5px} #dayroom .dr-thread-line .dr-pile{margin:0;padding-left:5px} #dayroom .dr-thread-line .dr-pile canvas{display:block;width:20px;height:20px;margin-left:-5px;border-radius:6px;box-shadow:0 0 0 2px var(--dr-panel)} #dayroom article.dr-message-row:is(:hover,:has(:focus-visible)) .dr-thread-line canvas{box-shadow:0 0 0 2px var(--dr-hover)} #dayroom .dr-thread-line .dr-thread-link{padding:0;border:0;background:none;color:var(--dr-accent-text);font-size:inherit;font-weight:800} #dayroom .dr-thread-line .dr-thread-link:hover{text-decoration:underline;text-underline-offset:3px} #dayroom .dr-thread-last{color:var(--dr-muted);font-weight:600} /* Reactions (reference .reacts/.re/.re.on): chips under the message, yours lit, then the smile-plus that adds one. Scoped to .dr-reacts so product.css's padding for every button in a message list (.dr-messages button) doesn't undo the reference's 0 9px. */ #dayroom .dr-reacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} #dayroom .dr-reacts .dr-re{height:26px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;border:0;border-radius:13px;background:var(--dr-sunken);color:var(--dr-ink-2);font-size:12.5px;font-weight:800;line-height:1;box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-reacts .dr-re.is-on{background:var(--dr-accent-soft);color:var(--dr-accent-text);box-shadow:inset 0 0 0 1px rgba(61,170,109,.4)} #dayroom .dr-reacts .dr-re svg.dr-i{width:15px;height:15px;color:var(--dr-muted)} #dayroom .dr-reacts .dr-re:hover{box-shadow:inset 0 0 0 1px var(--dr-line-2)} #dayroom .dr-reacts .dr-re.is-on:hover{box-shadow:inset 0 0 0 1px rgba(61,170,109,.65)} /* Named palettes ring the reactions you lit in their own accent, like the live pill above. */ #dayroom[data-ui-theme]:not([data-ui-theme="system"]) .dr-reacts .dr-re.is-on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dr-accent) 40%,transparent)} #dayroom[data-ui-theme]:not([data-ui-theme="system"]) .dr-reacts .dr-re.is-on:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dr-accent) 65%,transparent)} #dayroom .dr-reacts .dr-re-add:hover svg.dr-i{color:var(--dr-ink)} /* The emoji picker: a small raised grid of the twenty emoji, five to a row, by the button that opened it. It pops in, except under reduced motion. */ #dayroom .dr-emoji-picker{position:fixed;z-index:9;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:12px;background:var(--dr-panel);box-shadow:0 8px 20px -4px rgba(0,0,0,.18),0 0 0 1px var(--dr-line-2);animation:dr-emoji-pop .14s ease-out} #dayroom .dr-emoji-row{display:flex;gap:2px} #dayroom .dr-emoji-row>[role="gridcell"]{display:grid} #dayroom .dr-emoji{width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;font-size:20px;line-height:1} #dayroom .dr-emoji:is(:hover,:focus-visible){background:color-mix(in srgb,var(--dr-ink) 7%,transparent)} #dayroom .dr-emoji:focus-visible{outline-offset:0} @keyframes dr-emoji-pop{from{opacity:0;transform:translateY(-2px) scale(.97)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){#dayroom .dr-emoji-picker{animation:none}} /* The hover tools (reference .tools), top right of the row. Hidden by opacity rather than display, so Tab still reaches them and keyboard focus (:focus-visible) shows them. */ #dayroom .dr-message-actions{position:absolute;z-index:2;top:-15px;right:14px;display:flex;gap:2px;margin:0;padding:3px;border-radius:11px;background:var(--dr-panel);box-shadow:0 8px 20px -4px rgba(0,0,0,.18),0 0 0 1px var(--dr-line-2);opacity:0;pointer-events:none} #dayroom article.dr-message-row:is(:hover,:has(:focus-visible)) .dr-message-actions,#dayroom .dr-message-actions:has([aria-expanded="true"]){opacity:1;pointer-events:auto} #dayroom .dr-message-actions .dr-tool{width:30px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:var(--dr-muted);font-size:15px} #dayroom .dr-message-actions .dr-tool:hover,#dayroom .dr-message-actions .dr-tool[aria-expanded="true"]{background:color-mix(in srgb,var(--dr-ink) 6%,transparent);color:var(--dr-ink)} #dayroom .dr-message-actions svg.dr-i{width:16px;height:16px} #dayroom .dr-message-actions .dr-tool[aria-pressed="true"]{color:var(--dr-accent-text)} #dayroom .dr-message-actions .dr-tool[aria-pressed="true"] svg.dr-i{fill:currentColor} /* The More menu: a small panel under its button (above it near the bottom of the list), one text item per remaining action. */ #dayroom .dr-more{position:relative;display:grid} #dayroom .dr-menu{position:absolute;z-index:3;top:calc(100% + 6px);right:-3px;display:flex;flex-direction:column;min-width:168px;padding:4px;border-radius:11px;background:var(--dr-panel);box-shadow:0 8px 20px -4px rgba(0,0,0,.18),0 0 0 1px var(--dr-line-2)} #dayroom .dr-menu.is-up{top:auto;bottom:calc(100% + 6px)} #dayroom .dr-menu[hidden]{display:none} #dayroom .dr-menu .dr-menu-item{height:32px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--dr-ink-2);font-size:13px;font-weight:700;text-align:left;white-space:nowrap} #dayroom .dr-menu .dr-menu-item:is(:hover,:focus){background:color-mix(in srgb,var(--dr-ink) 6%,transparent);color:var(--dr-ink)} /* Without hover (touch screens) the tools stay in view under the message. */ @media(hover:none){#dayroom .dr-message-actions{position:static;width:fit-content;margin-top:6px;opacity:1;pointer-events:auto;box-shadow:inset 0 0 0 1px var(--dr-line-2)}} /* The typing line (reference .typing). It keeps its 26px while nobody types, so the conversation doesn't jump when someone starts. */ #dayroom #dr-typing{flex:none;display:flex;align-items:center;gap:8px;height:26px;padding:2px 24px 6px;color:var(--dr-muted);font-size:12px;font-weight:700} #dayroom .dr-dots{display:inline-flex;gap:3px} #dayroom .dr-dots i{width:5px;height:5px;border-radius:50%;background:var(--dr-faint);animation:dr-typing-dot 1.2s ease-in-out infinite} #dayroom .dr-dots i:nth-child(2){animation-delay:.15s} #dayroom .dr-dots i:nth-child(3){animation-delay:.3s} @keyframes dr-typing-dot{0%,60%,100%{opacity:.45;transform:none}30%{opacity:1;transform:translateY(-2px)}} @media(prefers-reduced-motion:reduce){#dayroom .dr-dots i{animation:none}} /* ---------- Composer (reference §2.5): reply/pending chips, then the auto-growing field, then the bar. In the dark scheme it sits on --dr-sunken instead of --dr-panel. ---------- */ #dayroom .dr-composer{margin:0 12px 12px;flex:none;display:flex;flex-direction:column;gap:2px;border-radius:14px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-field-line),0 2px 6px -2px rgba(0,0,0,.06);padding:11px 10px 8px 14px} /* The card itself shows the ring when its field is focused (reference §2.5), the same "the wrapper rings, the bare field inside stays plain" pattern as the search bars below. Minor 7: :focus-within also lit for a toolbar button (Attach, Emoji, Send…) and for a plain mouse click anywhere in the card, since it only cares that focus is somewhere inside. :has(textarea:focus-visible) scopes it to the card's own field specifically being keyboard-focused — textarea, not #dr-message, since the thread's reply box reuses this same .dr-composer class with its own #dr-thread-message field. */ #dayroom .dr-composer:has(textarea:focus-visible){outline:2px solid var(--dr-accent);outline-offset:2px} @media(prefers-color-scheme:dark){#dayroom:not([data-scheme]) .dr-composer{background:var(--dr-sunken)}} #dayroom[data-scheme="dark"] .dr-composer{background:var(--dr-sunken)} /* Reply-to and pending-attachment chips: not in the mockup's short conversation, so drawn in its token language. Empty, they take no room. */ #dayroom .dr-reply-chip{display:flex;align-items:center;gap:10px;min-width:0;padding:7px 10px;border-radius:10px;background:var(--dr-sunken);color:var(--dr-muted);font-size:12.5px;font-weight:600;overflow-wrap:anywhere} #dayroom .dr-reply-chip:empty{display:none} /* visual-1 I3: the plain button this chip built lived at browser-default contrast and wrapped to "Can/cel" at 900px. */ #dayroom .dr-reply-chip button{flex:none;white-space:nowrap} /* The field (reference .field): a single 38px line, faint like a placeholder until typed, that grows with the draft up to the cap below (lower in a short window), then scrolls. */ /* min-height overrides the shared #dayroom textarea{min-height:72px} (still needed by the thread and settings textareas), so the field keeps its 38px single line rather than that floor. */ /* Plain text inside the composer's own card (reference .field): opts out of the global field look/ring, which the card already provides. */ #dayroom #dr-message{display:block;width:100%;height:38px;min-height:38px;max-height:200px;margin:0;padding:8px 2px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--dr-ink);font:inherit;font-weight:600;font-size:14px;line-height:20px;resize:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dr-line-2) transparent} #dayroom #dr-message:focus-visible{outline:none;box-shadow:none} /* Minor 1: --dr-faint reads at 2.3-3.3:1 here, below AA; --dr-muted is the same fix the message times already use. */ #dayroom #dr-message::placeholder{color:var(--dr-muted);font-weight:600} /* The bar (reference .bar/.tb/.div/.send): icon buttons from the shell sprite, a divider before DRIVE, Send at the end after .dr-grow. */ #dayroom .dr-bar{flex:none;display:flex;align-items:center;gap:2px;margin-left:-6px} #dayroom .dr-bar .dr-tb{width:32px;height:30px;min-height:0;margin:0;padding:0;border:0;border-radius:8px;display:grid;place-items:center;background:transparent;color:var(--dr-muted)} #dayroom .dr-bar .dr-tb:hover{background:color-mix(in srgb,var(--dr-ink) 6%,transparent);color:var(--dr-ink)} #dayroom .dr-bar .dr-tb svg.dr-i{width:18px;height:18px} #dayroom .dr-bar .dr-tb svg.dr-px{width:16px;height:16px} #dayroom .dr-bar .dr-div{flex:none;width:1px;height:18px;margin:0 4px;background:var(--dr-line-2)} #dayroom .dr-send{flex:none;width:34px;height:34px;min-height:0;margin:0;padding:0;border:0;border-radius:10px;display:grid;place-items:center;background:var(--dr-accent);color:var(--dr-accent-ink)} #dayroom .dr-send svg.dr-i{width:18px;height:18px;stroke-width:2.2} /* Short windows (Tasks 2/3's fix, carried into the new composer): a lower field cap keeps the bar, and Send, in view with a long draft; the outer cap is the same budget call-panel.css used before Calls Task 2 removed its own composer rules, for reply/pending/hint stacked with a full field. */ @media(min-width:851px) and (max-height:760px){ #dayroom .dr-composer{max-height:calc((100dvh - 120px)*.46);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--dr-line) transparent} #dayroom #dr-message{max-height:96px} } /* Narrow web windows (the desktop app's minimum is 900px) stack the sidebar above the main pane. */ @media(max-width:760px){ #dayroom .dr-rail{width:64px}#dayroom .dr-rbtn{width:56px} #dayroom .dr-layout{display:flex;flex-direction:column;overflow-y:auto} #dayroom .dr-sidebar{flex:none;padding:8px 8px 0 2px}#dayroom .dr-sidebar-scroll{flex:none;max-height:40dvh}#dayroom .dr-side-foot{margin-top:0} #dayroom .dr-main{flex:none;min-height:560px;margin:8px 8px 8px 0} } /* Phone-width web windows, and web windows between the stacked layout and the 900px desktop minimum: the header's controls wrap under the title instead of clipping Channel details off the pane. */ @media(max-width:620px),(min-width:761px) and (max-width:899px){ #dayroom .dr-head{height:auto;min-height:60px;flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:8px} #dayroom .dr-head>div:first-child{flex:1 0 100%} #dayroom .dr-head>.dr-grow{display:none} } /* ---------- Global components (reference §2.5 and §3.4): buttons, fields, the modal, the toast and menus. These are DEFAULTS, at effectively zero added specificity (:where()), so every existing component keeps whatever look it already draws for itself (a search bar's borderless input, a list row's own button, Doorway's entry fields); only elements with no look of their own pick up the new one. Where a panel's own rule doesn't touch every property the default sets (height, box-shadow), that panel file adds an explicit opt-out next to its own rule. */ /* Buttons (reference .pillbtn): a 32px pill with an inset ring; .dr-primary fills the pill with the accent. min-height (not height) so a multi-line list row that reuses .dr-button (search results, the directory, a companion call) can still grow; panels still vary height/padding/font-size/white-space per context, and win normally since they're never less specific than #dayroom alone. */ #dayroom :where(.dr-button){min-height:32px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;margin:0;border:0;border-radius:10px;background:transparent;box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink)} #dayroom :where(.dr-button):hover:not(:disabled):not([aria-disabled=true]){background:color-mix(in srgb,var(--dr-ink) 6%,transparent)} /* N4 (re-review): a dialog button marked aria-disabled while busy (product-app.js's bind/form) used to look fully idle -- only native :disabled dimmed anything here. It now gets the same look disabled buttons get elsewhere. */ #dayroom :where(.dr-button,button)[aria-disabled="true"]{cursor:default;opacity:.5} #dayroom :where(.dr-button) svg.dr-i{width:16px;height:16px} #dayroom :where(.dr-button.dr-primary){background:var(--dr-accent);color:var(--dr-accent-ink);box-shadow:0 1px 2px rgba(0,0,0,.12)} #dayroom :where(.dr-button.dr-primary):hover:not(:disabled):not([aria-disabled=true]){background:var(--dr-accent);filter:brightness(1.05)} /* Typography lives in its own rule, a plain (not :where()) class selector: it still needs to beat the button/input/select font:inherit reset above (product.css), which a zero-specificity rule cannot, while a panel's own size/weight for its own button or field (more specific than a single class or already winning by :where()) keeps overriding it same as before. */ #dayroom .dr-button{font-size:13px;font-weight:800} /* Fields (reference §3.4 .input): input, select and textarea share one field look. Checkboxes, radios and similar native controls keep their own shape. A search bar's own input (border:0 on top of its wrapper's box), Doorway's entry fields, and other fields that already draw a complete look of their own opt out next to that rule with an explicit box-shadow/height reset, since :where() only yields on properties a panel rule also sets. */ #dayroom :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=image]),select,textarea){margin:0;padding:0 12px;border:0;border-radius:12px;background:var(--dr-field);box-shadow:inset 0 0 0 1px var(--dr-field-line);color:var(--dr-ink)} /* A textarea grows with its content (see #dayroom textarea{min-height:72px} above), so only single-line fields take the fixed pill height. */ #dayroom :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=image]),select){height:40px} #dayroom textarea{padding-top:9px;padding-bottom:9px} /* Round 2 kept this at (1,1,1) (via the same one-class-worth-of-specificity reasoning as the button rule above) so it would beat product.css's #dayroom button,input,select{font:inherit} reset - but every component's own input font rule (.dr-wp-search input, .dr-hub-search input, .dr-drive-search input, .dr-wp-todo-editor input,select) is ALSO (1,1,1): a class plus the element, same as this. Same specificity, later file (window.css loads near-last, reference build.py) still won the tie, so 600/14px leaked into Activity/Agents/Drive search and the to-do editor's title despite each already having its own look. Now :where()-wrapped to (1,0,0) instead, same as the font:inherit reset it has to beat (also :where()-wrapped, above and at #dayroom textarea{font:inherit} for the textarea branch): window.css still loads after product.css, so this still wins that tie, but every (1,1,1) component rule now wins outright instead of by order. The Doorway's own fields (.dr-door-input, doorway.css) set their own size/weight next to their own look; the :where(.dr-entry-field input) branch below predates that rebuild and keeps this rule's specificity math pinned by a regression test even now that nothing carries the class any more. */ #dayroom :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],:where(.dr-entry-field input)),select,textarea){font-size:14px;font-weight:600} /* Minor 1: --dr-faint reads at 2.3-3.3:1 here, below AA; --dr-muted is the same fix the message times already use. */ #dayroom :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=image]),select,textarea)::placeholder{color:var(--dr-muted);font-weight:500;opacity:1} /* Minor 8 (visual-2): Chromium/Safari draw their own blue "x" clear control on every type=search field (the app search bars, teammate search, every work-page and hub search), which no palette here ever styled. Hidden outright, since the fields already clear on their own (oninput/clearing the value on Escape elsewhere) and a restyled one would need separate light/dark/forced-colours art for a control the design never drew. */ #dayroom input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none} /* Doorway's .input:focus ring (inset accent line plus a soft outer glow), reused for every field instead of the plain outline below. I9: outline:none here meant a contrast theme, which drops the box-shadow ring along with the inset edge below, left every field with no focus indicator at all. outline:2px solid transparent keeps the look identical outside forced-colors (transparent paints nothing) while giving a contrast theme a non-"none" outline to paint over in Highlight. */ #dayroom :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=image]),select,textarea):focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:inset 0 0 0 1.5px var(--dr-accent),0 0 0 4px var(--dr-accent-soft)} /* Every other interactive element gets a visible 2px accent ring. The shared rings below sit at (1,1,0) through :where(), so any component's own ring written as #dayroom :focus-visible, at least (1,2,0), wins from any stylesheet and in any load order. The rules every focus ring follows (final review, C1): 1. No class-name exclusion lists in window.css. :not(.a,.b,…) takes its strongest argument's weight, which lifts the shared ring above every designed ring instead of stepping aside for a few. 2. A focusable element that touches the edge of a clipping container (overflow hidden, auto or scroll) declares an inset ring (outline-offset:-2px), since an outset one is cut off there. 3. A rest-state outline:none or box-shadow:none on a focusable element is either scoped to :not(:focus-visible) or uses the wrapper :focus-within pattern (the composer card, the search bars), so focus always shows. 4. Tests compute specificity rather than pinning selector text (product-client.test.cjs). */ #dayroom :where(button,a,summary,[tabindex]):focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px} #dayroom :where(input:is([type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px} /* Rule 2: sidebar rows and the section + buttons sit in .dr-sidebar-scroll, and the rail's destinations in .dr-rail-main. Both scroll, so both clip an outset ring at their edges. */ #dayroom :is(.dr-row,.dr-plus,.dr-rbtn):focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px} /* The modal: a panel card, its header a fixed 60px bar (the title at 16px/800, a .dr-iconbtn close) and a body that scrolls on its own below it, so a long list (search results, notifications, the directory, channel details, a WhatsApp dialog, the character studio) stays reachable past 90dvh. A full-page dialog (#dr-modal-body>.dr-page, surfaces.css) resets both to lay out its own header/scroll. */ #dayroom .dr-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:flex-start;justify-content:center;padding:64px 16px 24px;background:light-dark(rgba(15,23,19,.38),rgba(2,6,4,.6));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} #dayroom:is([data-screen=auth],[data-screen=workspaces]) #dr-live{z-index:21} #dayroom .dr-modal{position:relative;display:flex;flex-direction:column;width:400px;max-width:100%;max-height:calc(100dvh - 88px);border-radius:16px;background:var(--dr-panel);color:var(--dr-ink);box-shadow:var(--dr-shadow);overflow:hidden} #dayroom .dr-modalhead{flex:none;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 12px 0 20px;border-bottom:1px solid var(--dr-line)} #dayroom .dr-modalhead h2{font-size:16px;font-weight:800;letter-spacing:-.01em} #dayroom .dr-modalhead .dr-close{flex:none} #dayroom #dr-modal-body{flex:1;min-height:0;overflow-y:auto;padding:24px} #dayroom #dr-modal-body .dr-error:empty{display:none} @media(max-width:560px){#dayroom #dr-modal-body{padding:16px}#dayroom :where(.dr-button){min-height:38px}} /* The workspace menu: a popover card with row buttons (its own .dr-button pill ring is flattened into a flush row). */ #dayroom .dr-workspace-menu{position:absolute;z-index:9;left:0;top:calc(100% + 6px);display:flex;flex-direction:column;width:236px;padding:6px;border-radius:12px;background:var(--dr-panel);box-shadow:0 8px 20px -4px rgba(0,0,0,.18),0 0 0 1px var(--dr-line-2)} #dayroom .dr-workspace-menu .dr-button{height:36px;justify-content:flex-start;padding:0 10px;border-radius:8px;background:transparent;box-shadow:none;color:var(--dr-ink-2);font-size:13px;font-weight:700} #dayroom .dr-workspace-menu .dr-button:hover,#dayroom .dr-workspace-menu .dr-button:focus-visible{background:color-mix(in srgb,var(--dr-ink) 6%,transparent);color:var(--dr-ink)} /* The toast (#dr-live): a floating glass pill shown briefly for each message, then dismissed (product-app.js say()). It's positioned above the composer's tool row by default, clear of its icon buttons, and further above the call stage's glass control bar (Calls Task 2) when that's showing instead of the composer. It's decorative for assistive tech (say() writes every message to the always-rendered #dr-say-live instead), since toggling visibility on the one element screen readers watch is unreliable. */ /* --dr-composer-h (product-app.js, a ResizeObserver on the channel composer and on a thread's reply box, written on the toast itself) is the current height of whichever composer shows, so a reply chip, pending attachments, a longer draft or an open thread all still leave the toast clear of it: +28px covers the composer's own 12px bottom margin plus the pane's own 8px gap above its top edge (not 16px - the pane already contributes half of that). The 95px fallback matches a single-line composer, for the moment before that observer's first read. The composer is 0px on screens that hide it entirely instead of resizing it (the expanded office, the workspaces screen, sign-in) rather than just being briefly absent before layout - max(96px, ...) is a floor for that case, so the toast still clears controls near the bottom of those screens (Design studio, Sign out) instead of sitting 28px up with nothing to clear. */ #dayroom #dr-live{position:fixed;z-index:11;left:50%;bottom:max(96px,calc(var(--dr-composer-h,95px) + 28px));max-width:min(420px,calc(100% - 32px));padding:10px 18px;border-radius:100px;color:var(--dr-ink);font-size:12.5px;font-weight:700;line-height:1.35;text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;pointer-events:none} #dayroom #dr-live:empty{display:none} #dayroom #dr-live.is-shown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .16s ease,transform .16s ease} @media(prefers-reduced-motion:reduce){#dayroom #dr-live,#dayroom #dr-live.is-shown{transition:none}} /* Minor 2: left:50% above centres the pill on the whole window, not .dr-main -- at the 900px desktop minimum that put part of it over the sidebar's DM rows (rail 76px + sidebar 256px, visible only above this file's own 760px layout-switch below, sit on .dr-main's left; its own 8px right margin is the only thing on the right). .dr-main's centre is then a FIXED 162px right of the window's own centre at every width in that range -- ((76+256)+8)/2 -- regardless of width, since both terms are themselves fixed: left:calc(50% + 162px) re-centres the pill on .dr-main instead, wherever that holds. Below 760px the sidebar moves above .dr-main (same breakpoint), but the 64px rail stays on its left and its 8px margin on its right: it spans 64px to W-8px, so its centre is (64 + W - 8)/2 = W/2 + 28, a fixed 28px right of the window's. Both overrides share the base rule's specificity and come later in the file, so they win the tie. */ @media(min-width:761px){#dayroom #dr-live{left:calc(50% + 162px)}} @media(max-width:760px){#dayroom #dr-live{left:calc(50% + 28px)}} /* The call stage (Calls Task 2) fills the pane below the header and hides the composer with it (its height, and so --dr-composer-h, collapses to 0), so the default composer clearance no longer means anything here; a fixed distance above the glass control bar replaces it rather than adding to it. */ #dayroom:has(#dr-callbox.dr-call-screen) #dr-live{bottom:126px} /* Minor 6 (visual-2): the toast's bottom offset tracks the composer, which says nothing about an open dialog centred over it, so a tall dialog's own content or actions could sit right where the toast lands. A dialog always starts 64px from the top (.dr-overlay's own padding), so anchoring the toast near the top instead, for as long as one is open, keeps it clear regardless of how tall the dialog grows. Same specificity as the call-stage lift above and later in the file, so this wins that tie too when a dialog opens mid-call. */ #dayroom:has(#dr-overlay:not([hidden])) #dr-live{top:16px;bottom:auto;transform:translate(-50%,-6px)} #dayroom:has(#dr-overlay:not([hidden])) #dr-live.is-shown{transform:translate(-50%,0)} /* I9: a Windows contrast theme drops every box-shadow, which is all that drew a field's edge above and, below, the rail's current destination, the open room/DM and the chosen chat/split/office layout -- three states shown only by a background colour (reference §2.5's .dr-sel/.dr-panel swaps). System colours replace them. The rail and sidebar list scroll (rule 2), so these ring inside themselves. */ @media (forced-colors:active){ #dayroom :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=image]),select,textarea){border:1px solid CanvasText} #dayroom .dr-rbtn[aria-current=page] .dr-ri{outline:2px solid Highlight;outline-offset:-2px} #dayroom .dr-row.is-on{outline:2px solid Highlight;outline-offset:-2px} #dayroom .dr-seg:not(.is-text) button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:-2px} } /* Camera chips remain available in both compact and expanded office views. */ #dayroom .dr-office-zoom{position:absolute;z-index:7;right:12px;bottom:12px;display:flex;gap:2px;padding:3px;border-radius:11px} #dayroom .dr-office-zoom>.dr-chip{display:grid;place-items:center;min-width:28px;height:28px;margin:0;padding:0 7px;border:0;border-radius:8px;background:transparent;color:var(--dr-ink);font-size:13px;font-weight:800;cursor:pointer} #dayroom .dr-office-zoom>.dr-chip:hover{background:color-mix(in srgb,var(--dr-ink) 8%,transparent)} #dayroom .dr-office-zoom>.dr-chip:focus-visible{box-shadow:0 0 0 2px rgba(10,20,14,.65)} /* Keep Customize desk clear of the corner chips on narrow office windows. */ @media(max-width:1040px){#dayroom .dr-window #dr-desk-customize{bottom:56px}} @media(forced-colors:active){#dayroom .dr-office-zoom{border:1px solid CanvasText;background:Canvas}} /* Teammate suggestions stay in the composer, clear of the message history. */ #dayroom .dr-mention-picker{max-height:190px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--dr-field-line);border-radius:10px;background:var(--dr-panel);padding:4px;margin:5px 0} #dayroom .dr-mention-picker[hidden]{display:none} #dayroom .dr-mention-picker>[role="option"]{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;width:100%;padding:8px 12px;border:0;border-radius:7px;background:transparent;color:var(--dr-ink);text-align:left;font:inherit;cursor:pointer} #dayroom .dr-mention-picker>[role="option"]:is([aria-selected="true"],:hover){background:var(--dr-accent-soft);color:var(--dr-accent-text)} #dayroom .dr-mention-picker strong{overflow-wrap:anywhere;font-size:13px} #dayroom .dr-mention-picker span{font-size:11px;flex-shrink:0} #dayroom .dr-mention-picker p{padding:8px;font-size:12px} /* Slash commands share the composer's palette and keep their explanation beside the usage. */ #dayroom .dr-command-picker{flex:0 1 auto;min-height:56px;max-height:232px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--dr-field-line);border-radius:10px;background:var(--dr-panel);padding:4px;margin:5px 0;scrollbar-width:thin} #dayroom .dr-command-picker[hidden]{display:none} #dayroom .dr-command-picker>[role="option"]{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:52px;width:100%;padding:8px 12px;border:0;border-radius:7px;background:transparent;color:var(--dr-ink);text-align:left;font:inherit;cursor:pointer} #dayroom .dr-command-picker>[role="option"]:is([aria-selected="true"],:hover){background:var(--dr-accent-soft);color:var(--dr-accent-text)} #dayroom .dr-command-usage{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px} #dayroom .dr-command-usage strong{font-size:13px} #dayroom .dr-command-usage small,#dayroom .dr-command-description{font-size:12px;line-height:1.4;color:var(--dr-muted);overflow-wrap:anywhere} #dayroom .dr-command-picker p{margin:0;padding:10px 12px;font-size:12px;color:var(--dr-muted)} @media(max-height:760px){#dayroom .dr-command-picker{max-height:168px}} @media(forced-colors:active){#dayroom .dr-command-picker>[aria-selected="true"]{outline:2px solid Highlight;outline-offset:-2px}} /* Review cards for agent-prepared to-dos and direct messages (companion-actions.js): flat, crisp edges, readable fields. */ #dayroom .dr-action-card{margin-top:9px;max-width:min(460px,100%);padding:12px 14px;border-radius:12px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink-2);font-size:13px} #dayroom .dr-action-fields{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0} #dayroom .dr-action-fields dt{color:var(--dr-muted);font-weight:700} #dayroom .dr-action-fields dd{margin:0;overflow-wrap:anywhere} #dayroom .dr-action-text{white-space:pre-wrap} #dayroom .dr-action-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px} #dayroom .dr-action-foot:empty{display:none} #dayroom .dr-action-status{margin:0;color:var(--dr-muted);font-weight:700} #dayroom .dr-action-status.is-done{color:var(--dr-accent-text)} #dayroom .dr-action-edit{display:grid;gap:8px} #dayroom .dr-action-edit label{display:grid;gap:4px;color:var(--dr-muted);font-weight:700} #dayroom .dr-action-edit input,#dayroom .dr-action-edit select,#dayroom .dr-action-edit textarea{font:inherit;color:var(--dr-text);background:var(--dr-sunken);border:1px solid var(--dr-line-2);border-radius:8px;padding:7px 9px;min-width:0} #dayroom .dr-action-to{margin:0;color:var(--dr-muted);font-weight:700} #dayroom .dr-thread-compose .dr-hint .dr-link{padding:0;border:0;background:none;color:var(--dr-accent-text);font-weight:800;cursor:pointer} /* Room mute, archive and delete (decision 2026-10-02; room-lifecycle.js). */ #dayroom .dr-row-wrap{position:relative;display:flex;flex-direction:column;flex:none} #dayroom .dr-row-more{position:absolute;top:50%;right:4px;width:26px;height:26px;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:var(--dr-panel);color:var(--dr-muted);opacity:0;transform:translateY(-50%);cursor:pointer} #dayroom .dr-row-more svg.dr-i{width:16px;height:16px} #dayroom .dr-row-more:is(:hover,:focus-visible){color:var(--dr-ink);background:color-mix(in srgb,var(--dr-ink) 8%,var(--dr-panel))} #dayroom .dr-row-more:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px} #dayroom .dr-row-wrap:is(:hover,:focus-within) .dr-row-more,#dayroom .dr-row-more[aria-expanded="true"]{opacity:1} #dayroom .dr-row-wrap:is(:hover,:focus-within)>.dr-row,#dayroom .dr-row-wrap:has(.dr-row-more[aria-expanded="true"])>.dr-row{padding-right:36px} @media (hover:none){#dayroom .dr-row-more{opacity:1}#dayroom .dr-row-wrap>.dr-row{padding-right:36px}} #dayroom .dr-row.is-muted{color:var(--dr-muted)} #dayroom .dr-row.is-muted .dr-pile{opacity:.7} #dayroom .dr-row .dr-mute-icon{flex:none;width:10px;height:10px;margin-left:auto;color:var(--dr-muted)} #dayroom .dr-row .dr-mute-icon+.dr-count{margin-left:6px} #dayroom .dr-room-menu{position:fixed;z-index:40;display:flex;flex-direction:column;min-width:208px;padding:4px;border-radius:11px;background:var(--dr-panel);box-shadow:0 8px 20px -4px rgba(0,0,0,.18),0 0 0 1px var(--dr-line-2)} #dayroom .dr-room-menu-item{height:32px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--dr-ink-2);font-size:13px;font-weight:700;text-align:left;white-space:nowrap;cursor:pointer} #dayroom .dr-room-menu-item:is(:hover,:focus){background:color-mix(in srgb,var(--dr-ink) 6%,transparent);color:var(--dr-ink);outline:none} #dayroom .dr-room-menu-item:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px} #dayroom .dr-room-menu-item.is-danger{color:var(--st-dnd)} #dayroom .dr-room-menu-sep{height:1px;margin:4px 6px;background:var(--dr-line-2)} #dayroom .dr-archived-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 12px 0;padding:9px 12px;border-radius:10px;background:var(--dr-sunken);color:var(--dr-ink-2);font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1px var(--dr-line-2)} #dayroom .dr-archived-banner[hidden]{display:none} #dayroom .dr-archived-banner svg.dr-i{width:16px;height:16px;flex:none} #dayroom .dr-linkbtn{padding:0;border:0;background:none;color:var(--dr-accent-text);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer} #dayroom .dr-linkbtn:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px;border-radius:3px} #dayroom .dr-room-gone{padding:24px 16px;text-align:center} #dayroom[data-room-archived] #dr-compose,#dayroom[data-room-archived] .dr-thread-compose,#dayroom[data-room-archived] [data-react],#dayroom[data-room-archived] [data-reply],#dayroom[data-room-archived] [data-thread-reply]{display:none} #dayroom[data-room-archived] .dr-re{pointer-events:none} /* Sidebar sections (room-sections.js): a collapsible heading inside Rooms, e.g. an imported WhatsApp community. */ #dayroom .dr-section{display:flex;flex-direction:column} #dayroom .dr-section-head{display:flex;align-items:center;gap:6px;height:28px;margin:6px 0 1px 4px;padding:0 8px 0 10px;border:0;border-radius:9px;background:transparent;color:var(--dr-muted);font-size:12px;font-weight:800;letter-spacing:.01em;text-align:left;cursor:pointer} #dayroom .dr-section-head:hover{background:var(--dr-hover,rgba(127,127,127,.12));color:var(--dr-ink-2)} #dayroom .dr-section-head:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px} #dayroom .dr-section-chevron{flex:none;width:12px;height:12px;transition:none} #dayroom .dr-section.is-collapsed .dr-section-chevron{transform:rotate(-90deg)} #dayroom .dr-section-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #dayroom .dr-section-head .dr-badge,#dayroom .dr-section-head .dr-count{margin-left:auto} #dayroom .dr-section-rooms{display:flex;flex-direction:column;padding-left:8px} /* Plan 4b: one page anatomy for every panel and page. Tokens only; loaded after window.css. */ #dayroom :is(.dr-page,.dr-card,.dr-li,.dr-tile,.dr-empty,.dr-dock,.dr-progress-wrap,.dr-seg)[hidden]{display:none} #dayroom .dr-page{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--dr-panel);color:var(--dr-ink)} #dayroom .dr-page :is(h1,h2,h3,h4,p,ul,ol,figure):not(.dr-answer-text *){margin:0} #dayroom .dr-page-head{flex:none;display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 12px 10px 20px;border-bottom:1px solid var(--dr-line)} #dayroom .dr-page-titles{flex:1;min-width:0} #dayroom :is(h1,h2).dr-page-title{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.3;color:var(--dr-ink)} #dayroom :is(h1,h2).dr-page-title:focus{outline:none} /* Minor 6: a landing dialog or page focuses its own heading only to announce it (tabindex="-1"; it only rings for a keyboard-triggered open, never a mouse one, same as theme-studio.css's status lines). The old outset ring read as a text field around plain text and, with only the subtitle's 1px margin below, overlapped it. Inset keeps the ring inside the heading's own line box instead of bleeding into the subtitle. */ #dayroom :is(h1,h2).dr-page-title:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px;border-radius:4px} #dayroom p.dr-page-sub{margin-top:1px;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--dr-muted);text-wrap:pretty} #dayroom .dr-page-actions{flex:none;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px} #dayroom .dr-page-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:16px;padding:20px 20px 28px;scrollbar-width:thin;scrollbar-color:var(--dr-line-2) transparent} #dayroom .dr-page-body>*{flex:none} /* Section cards */ #dayroom .dr-card{min-width:0;overflow:hidden;border-radius:14px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2)} #dayroom .dr-card-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px} #dayroom .dr-card-head>div:first-child{flex:1;min-width:0} #dayroom h3.dr-card-title,#dayroom summary.dr-card-title{font-size:14px;font-weight:800;line-height:1.35;color:var(--dr-ink)} /* Minor 7 (visual-2): the same clash as .dr-page-title above, on a card title focused only to announce it (tabindex="-1", e.g. Help's dr-help-page-title). [tabindex] (not summary.dr-card-title, already in the shared ring's own list and never also given tabindex) keeps this off every untabindexed card title. */ #dayroom .dr-card-title[tabindex]:focus{outline:none} #dayroom .dr-card-title[tabindex]:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px;border-radius:4px} #dayroom p.dr-card-sub{margin-top:2px;font-size:12.5px;font-weight:600;line-height:1.45;color:var(--dr-muted)} #dayroom .dr-card-actions{flex:none;display:flex;align-items:center;gap:8px} /* If a head ever puts .dr-card-actions first (or alone), it would also match >div:first-child above; this rule's extra class beats that one on specificity (1,3,0 vs 1,2,1) so actions never stretches. */ #dayroom .dr-card-head>.dr-card-actions:first-child{flex:none} #dayroom .dr-card-body{padding:0 16px 16px;font-size:13.5px;font-weight:500;line-height:1.5;color:var(--dr-ink-2)} #dayroom .dr-card>.dr-card-body:first-child{padding-top:16px} #dayroom .dr-card.is-padded{display:flex;flex-direction:column;gap:12px;padding:16px} #dayroom .dr-stack{display:flex;flex-direction:column;gap:12px} #dayroom .dr-card-body>p{font-size:inherit;color:inherit} #dayroom .dr-card-body>p+p{margin-top:8px} /* App-wide (Desks Task 12 verification): product.css's .dr-modal p and this file's own .dr-card-body>p are both #dayroom + one class + the p type (1,1,1), which beats .dr-error's own (1,1,0) outright regardless of load order, so a

in a thread's reply box, a call's notes, Help or a to-do form read as muted body text instead of an error. Doubling the class (1,2,0) beats (1,1,1) outright wherever .dr-error ends up, not only inside today's two known wrappers (surfaces-css.test.cjs computes this). Colour and weight only; .dr-error's own margin-bottom keeps the paragraph spacing. --dr-error-text (window.css) names the same red product.css's .dr-error and desk-studio.css's .dp-error already set literally, since this file's own rules may use only tokens, never a bare hex. */ #dayroom .dr-error.dr-error{color:var(--dr-error-text);font-weight:700}/* Lists and rows */ #dayroom .dr-list{display:flex;flex-direction:column;list-style:none;padding:0} #dayroom .dr-card-head+.dr-list{border-top:1px solid var(--dr-line)} #dayroom .dr-li{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 16px;border:0;background:transparent;color:var(--dr-ink);font:inherit;text-align:left;text-decoration:none} #dayroom .dr-li+.dr-li{box-shadow:inset 0 1px 0 var(--dr-line)} #dayroom :is(button,a).dr-li,#dayroom .dr-li.is-link{cursor:pointer} @media (hover:hover){#dayroom :is(button,a).dr-li:hover,#dayroom .dr-li.is-link:hover{background:var(--dr-hover)}} #dayroom .dr-li:is([aria-current="true"],[aria-current="page"],[aria-pressed="true"],.is-on){background:var(--dr-sel)} #dayroom .dr-li-lead{flex:none;width:32px;height:32px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line);color:var(--dr-muted)} #dayroom .dr-li-lead:has(canvas){width:44px;height:44px;border-radius:4px} #dayroom .dr-li-lead canvas{display:block;width:44px;height:44px;border-radius:4px} #dayroom .dr-li-lead svg.dr-i{width:17px;height:17px} #dayroom .dr-li-body{flex:1;min-width:0;display:flex;flex-direction:column} #dayroom .dr-li-title{font-size:13.5px;font-weight:700;line-height:1.35;color:var(--dr-ink);overflow-wrap:anywhere} #dayroom .dr-li-sub{font-size:12px;font-weight:600;line-height:1.4;color:var(--dr-muted);overflow-wrap:anywhere} #dayroom .dr-li-trail{flex:none;margin-left:auto;display:flex;align-items:center;gap:8px} #dayroom :is(button,a,summary,label).dr-li:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px} /* Toggle: a checkbox switch or a pressed button */ #dayroom .dr-toggle{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:34px;height:20px;margin:0;padding:0;border:0;border-radius:10px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line-2);cursor:pointer;transition:background-color .15s} #dayroom .dr-toggle::before{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--dr-muted);transition:transform .15s,background-color .15s} #dayroom .dr-toggle:is(:checked,[aria-pressed="true"],[aria-checked="true"]){background:var(--dr-accent);box-shadow:none} #dayroom .dr-toggle:is(:checked,[aria-pressed="true"],[aria-checked="true"])::before{transform:translateX(14px);background:var(--dr-accent-ink)} #dayroom .dr-toggle:disabled{opacity:.5;cursor:not-allowed} #dayroom .dr-toggle:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px} #dayroom .dr-toggle>*{display:none} /* Status chips */ #dayroom .dr-state{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 7px;border-radius:11px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-muted);font-size:11.5px;font-weight:800;line-height:22px;white-space:nowrap} #dayroom .dr-state::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--st-away)} #dayroom .dr-state.is-off{background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-muted)} #dayroom .dr-state.is-ok{background:color-mix(in srgb,var(--st-available) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-available) 35%,transparent);color:color-mix(in srgb,var(--st-available) 55%,var(--dr-ink))} #dayroom .dr-state.is-ok::before{background:var(--st-available)} #dayroom .dr-state.is-warn{background:color-mix(in srgb,var(--st-working) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-working) 40%,transparent);color:color-mix(in srgb,var(--st-working) 45%,var(--dr-ink))} #dayroom .dr-state.is-warn::before{background:var(--st-working)} #dayroom .dr-state.is-bad{background:color-mix(in srgb,var(--st-dnd) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-dnd) 35%,transparent);color:color-mix(in srgb,var(--st-dnd) 60%,var(--dr-ink))} #dayroom .dr-state.is-bad::before{background:var(--st-dnd)} #dayroom .dr-state.is-busy{background:var(--dr-accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dr-accent) 30%,transparent);color:var(--dr-accent-text)} #dayroom .dr-state.is-busy::before{background:var(--dr-accent);animation:dr-state-blink 1.2s steps(2,end) infinite} @keyframes dr-state-blink{50%{opacity:.35}} /* Category tags: what a thing is, never its state */ #dayroom .dr-kind{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line);color:var(--dr-muted);font-size:11px;font-weight:800;line-height:20px;white-space:nowrap} /* Connector tiles */ #dayroom .dr-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:12px} #dayroom .dr-tile{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"logo name" "logo state" "desc desc" "foot foot";align-content:start;column-gap:12px;row-gap:2px;min-height:148px;padding:14px;border-radius:14px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink);text-align:left} #dayroom .dr-tile-logo{grid-area:logo;width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-tile-name{grid-area:name;align-self:end;margin:0;font-size:14px;font-weight:800;line-height:1.3;color:var(--dr-ink);overflow-wrap:anywhere} #dayroom .dr-tile-state{grid-area:state;align-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px} #dayroom p.dr-tile-desc{grid-area:desc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:10px;font-size:12.5px;font-weight:600;line-height:1.45;color:var(--dr-muted)} #dayroom .dr-tile-foot{grid-area:foot;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px} @media (hover:hover){#dayroom .dr-tile:hover{box-shadow:inset 0 0 0 1px var(--dr-line-2),0 8px 20px -8px rgba(0,0,0,.18)}} /* I9: box-shadow alone vanishes in a contrast theme; outline:2px solid transparent gives it a non-"none" outline for the theme to paint, while staying invisible the rest of the time. */ #dayroom .dr-tile:focus-within{outline:2px solid transparent;outline-offset:2px;box-shadow:inset 0 0 0 1px var(--dr-line-2),0 0 0 2px var(--dr-accent)} /* Empty states */ #dayroom .dr-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:36px 20px;text-align:center} #dayroom .dr-empty-art{width:56px;height:56px;margin-bottom:10px;display:grid;place-items:center;border-radius:16px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line);color:var(--dr-muted)} #dayroom .dr-empty-art svg.dr-i{width:24px;height:24px} #dayroom p.dr-empty-title{font-size:14px;font-weight:800;line-height:1.35;color:var(--dr-ink)} #dayroom p.dr-empty-text{max-width:44ch;font-size:13px;font-weight:600;line-height:1.5;color:var(--dr-muted)} #dayroom .dr-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px} /* Progress */ #dayroom .dr-progress-wrap{min-width:0} #dayroom .dr-progress-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:12px;font-weight:700;line-height:1.4;color:var(--dr-muted);font-variant-numeric:tabular-nums} #dayroom .dr-progress{position:relative;height:8px;overflow:hidden;border-radius:4px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-progress>i{display:block;height:100%;border-radius:4px;background:var(--dr-accent);transition:width .15s steps(3,end)} #dayroom .dr-progress.is-busy>i{width:32%;animation:dr-progress-busy 1.4s steps(10,end) infinite} #dayroom .dr-progress.is-bad>i{background:var(--st-dnd)} @keyframes dr-progress-busy{from{transform:translateX(-100%)}to{transform:translateX(320%)}} /* Segmented control with text (the shell's .dr-seg holds the icon version) */ #dayroom .dr-seg.is-text{display:inline-flex;flex-wrap:wrap;padding:3px;border-radius:10px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-seg.is-text>button{display:inline-flex;align-items:center;gap:6px;width:auto;min-width:0;height:26px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--dr-muted);font:800 12.5px/26px 'Manrope',system-ui,sans-serif;white-space:nowrap;cursor:pointer} #dayroom .dr-seg.is-text>button:is([aria-pressed="true"],[aria-current="page"]){background:var(--dr-panel);color:var(--dr-ink);box-shadow:0 1px 2px rgba(0,0,0,.10),0 0 0 1px var(--dr-line)} /* Tooltip, popover and dock */ #dayroom .dr-has-tip{position:relative} #dayroom .dr-tip{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:60;width:max-content;max-width:240px;padding:6px 9px;border-radius:9px;background:var(--dr-glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:var(--dr-glass-shadow),inset 0 0 0 1px var(--dr-glass-line);color:var(--dr-ink);font-size:12px;font-weight:700;line-height:1.35;text-align:left;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;transform:translateX(-50%);transition:opacity .12s,visibility .12s} #dayroom .dr-tip.is-below{bottom:auto;top:calc(100% + 8px)} #dayroom .dr-has-tip:is(:hover,:focus-within)>.dr-tip{opacity:1;visibility:visible} #dayroom .dr-pop{position:absolute;z-index:50;min-width:220px;max-width:320px;padding:6px;border-radius:12px;background:var(--dr-panel);box-shadow:0 8px 20px -4px rgba(0,0,0,.18),0 0 0 1px var(--dr-line-2);color:var(--dr-ink)} #dayroom .dr-dock{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;padding:10px 12px;border-radius:14px;background:var(--dr-panel);box-shadow:var(--dr-shadow)} /* Buttons, links, eyebrow and forms inside pages */ #dayroom .dr-button.dr-danger{color:var(--st-dnd);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-dnd) 45%,transparent)} @media (hover:hover){#dayroom .dr-button.dr-danger:hover{background:color-mix(in srgb,var(--st-dnd) 10%,transparent)}} #dayroom .dr-link{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0;border:0;background:none;color:var(--dr-accent-text);font-size:13px;font-weight:800;text-decoration:none;cursor:pointer} #dayroom .dr-link:hover{text-decoration:underline;text-underline-offset:3px} #dayroom .dr-eyebrow{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:6px 10px;border-radius:8px;background:var(--dr-accent-soft);color:var(--dr-accent-text);font:400 10px/1.2 'Silkscreen',monospace;letter-spacing:.06em} #dayroom .dr-page label.dr-field{display:grid;gap:7px;font-size:13px;font-weight:800;color:var(--dr-ink-2)} #dayroom .dr-hint,#dayroom .dr-card-body p.dr-hint{font-size:12px;font-weight:600;line-height:1.45;color:var(--dr-muted)} #dayroom .dr-form{display:flex;flex-direction:column;gap:14px} #dayroom .dr-form-row{display:flex;align-items:flex-end;gap:8px} #dayroom .dr-form-row>:is(input,select,textarea){flex:1;min-width:0} #dayroom .dr-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px} #dayroom .dr-code{margin:0;padding:10px 12px;overflow:auto;border-radius:10px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line);color:var(--dr-ink-2);font:600 12px/1.5 monospace;white-space:pre-wrap;overflow-wrap:anywhere} /* A page inside the shared modal: the page header is the modal header */ #dayroom .dr-modal:has(>#dr-modal-body>.dr-page){position:relative;display:flex;flex-direction:column;width:min(760px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 88px);padding:0;overflow:hidden} #dayroom .dr-modal:has(>#dr-modal-body>.dr-page[data-size="wide"]){width:min(960px,calc(100vw - 48px))} #dayroom .dr-modal:has(>#dr-modal-body>.dr-page)>.dr-modalhead{position:absolute;top:14px;right:12px;z-index:3;height:auto;min-height:0;margin:0;padding:0;border:0;background:none} #dayroom .dr-modal:has(>#dr-modal-body>.dr-page) #dr-modal-title{display:none} #dayroom .dr-modal:has(>#dr-modal-body>.dr-page)>#dr-modal-body{flex:1;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"head" "error" "body";padding:0;overflow:hidden} #dayroom #dr-modal-body>.dr-page{display:contents} #dayroom #dr-modal-body>.dr-page>.dr-page-head{grid-area:head;padding-right:56px} #dayroom #dr-modal-body>.dr-page>.dr-page-body{grid-area:body} #dayroom #dr-modal-body:has(>.dr-page)>#dr-modal-error{grid-area:error;margin:0} #dayroom #dr-modal-body:has(>.dr-page)>#dr-modal-error:not(:empty){margin:12px 20px 0} /* A page in the main pane (Activity, To-dos, Files, Later, Agents) */ #dayroom :is(#dr-work-page,#dr-tools-page):not([hidden]){position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;margin:8px 8px 8px 0;overflow:auto;border-radius:14px;background:var(--dr-panel);box-shadow:var(--dr-shadow)} @media (max-width:760px){#dayroom :is(#dr-work-page,#dr-tools-page):not([hidden]){flex:none;min-height:560px}} #dayroom :is(#dr-work-page,#dr-tools-page)>.dr-page{flex:1;min-height:0} #dayroom :is(#dr-work-page,#dr-tools-page) .dr-page-body{padding-inline:max(20px,calc((100% - 860px)/2))} @media (prefers-reduced-motion:reduce){ #dayroom .dr-toggle,#dayroom .dr-toggle::before,#dayroom .dr-progress>i,#dayroom .dr-tip{transition:none} #dayroom .dr-state.is-busy::before{animation:none} #dayroom .dr-progress.is-busy>i{width:100%;opacity:.35;transform:none;animation:none} } #dayroom [data-logo]{display:contents} /* My account and Colours */ #dayroom .dr-account-profile{display:grid;grid-template-columns:124px minmax(0,1fr);align-items:start;gap:20px} #dayroom .dr-account-figure{display:grid;justify-items:center;gap:8px} #dayroom #dr-account-avatar{width:108px;height:108px;border-radius:14px;outline:1px solid var(--dr-line);outline-offset:-1px;image-rendering:pixelated} #dayroom .dr-account-figure figcaption{display:grid;justify-items:center;gap:2px;text-align:center} #dayroom #dr-account-display-name{font-size:14px;font-weight:800;overflow-wrap:anywhere} #dayroom .dr-account-player{display:flex;align-items:center;gap:12px;margin-bottom:12px} #dayroom .dr-account-player-logo{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom #dr-account-music p{font-size:12px;font-weight:700;color:var(--dr-muted)} #dayroom .dr-account-track-title{display:block;font-size:14px;font-weight:800;color:var(--dr-ink)} #dayroom .dr-account-service{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--dr-ink-2)} #dayroom .dr-account-spotify{gap:8px} #dayroom .dr-account-apps-feedback:has(#dr-account-apps-status:empty):has(#dr-account-apps-retry[hidden]){display:none} #dayroom .dr-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #dayroom .dr-theme-choice{display:grid;gap:6px;padding:8px;border:0;border-radius:14px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink);text-align:left;cursor:pointer} #dayroom .dr-theme-choice[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--dr-accent)} #dayroom .dr-theme-preview{display:grid;grid-template-columns:10px 26% 1fr;gap:4px;height:72px;padding:5px;border-radius:9px;background:var(--sample-bg)} #dayroom .dr-theme-rail{border-radius:4px;background:color-mix(in srgb,var(--sample-ink) 12%,var(--sample-bg))} #dayroom .dr-theme-side{display:flex;flex-direction:column;gap:4px;padding:4px 2px} #dayroom .dr-theme-side i,#dayroom .dr-theme-pane i{display:block;height:4px;border-radius:2px;background:color-mix(in srgb,var(--sample-ink) 35%,var(--sample-bg))} #dayroom .dr-theme-side i:first-child{background:var(--sample-accent)} #dayroom .dr-theme-pane{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:6px;background:var(--sample-panel)} #dayroom .dr-theme-pane i{width:80%} #dayroom .dr-theme-pane i+i{width:55%} #dayroom .dr-theme-pane b{align-self:end;width:30%;height:10px;margin-top:auto;border-radius:4px;background:var(--sample-accent)} #dayroom .dr-theme-name{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13.5px;font-weight:800} #dayroom .dr-theme-caption{font-size:12px;font-weight:600;color:var(--dr-muted)} #dayroom .dr-theme-check{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--dr-accent);color:var(--dr-accent-ink);visibility:hidden} #dayroom .dr-theme-check svg.dr-i{width:14px;height:14px;stroke-width:2.4} #dayroom [data-colour][aria-pressed="true"] .dr-theme-check{visibility:visible} #dayroom input.dr-recovery-code{width:100%;font-size:16px;font-weight:800;letter-spacing:.06em;text-align:center;user-select:all} @media (max-width:640px){#dayroom .dr-account-profile{grid-template-columns:1fr;justify-items:start}#dayroom .dr-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Workspace settings */ #dayroom .dr-workspace-form{display:flex;flex-direction:column;gap:16px} #dayroom p.dr-workspace-read-name{font-size:14px;font-weight:800;color:var(--dr-ink);overflow-wrap:anywhere} #dayroom .dr-workspace-you{font-weight:600;color:var(--dr-muted)} #dayroom .dr-workspace-form-error:empty{display:none} /* A busy action stays focusable (aria-disabled, so Escape still closes the dialog) and looks like a disabled one. */ #dayroom .dr-settings-workspace .dr-button[aria-disabled="true"]{cursor:default;opacity:.5} /* The shared .dr-field carries a 12px margin-bottom (product.css) meant for stacked plain forms; this module's fields already sit in a .dr-form gap, so the extra margin only doubled the space before each hint/status line. */ #dayroom .dr-settings-workspace label.dr-field{margin:0} /* The browser's own file-picker button ignores the page's font and buttons; give it the same tokens as .dr-button. */ #dayroom .dr-settings-workspace input[type=file]::file-selector-button{margin-right:10px;padding:8px 12px;border:1px solid var(--dr-line);border-radius:8px;background:var(--dr-panel);color:var(--dr-ink);font:inherit;cursor:pointer} #dayroom .dr-brand-row{display:flex;align-items:flex-start;gap:16px} /* 32 cells at 64px is an even 2px per cell; 48px (1.5x) gave alternating 1px/2px cells at 1x screen density. */ #dayroom .dr-brand-preview{flex:none;width:80px;height:80px;padding:8px;border-radius:13px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line);color:var(--dr-muted)} #dayroom .dr-brand-preview svg{display:block;width:64px;height:64px} #dayroom #dr-workspace-theme p.dr-card-sub{overflow-wrap:anywhere} #dayroom .dr-office-theme-tile{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview" "name" "desc";row-gap:0;min-height:0;border:0;font:inherit;text-align:left;cursor:pointer} #dayroom .dr-office-theme-tile .dr-tile-desc{grid-area:desc} /* A 1:1 crop of the base map: object-fit:none draws the canvas at its own size, centred, so each map pixel is one CSS pixel */ #dayroom .dr-office-theme-tile canvas[data-office-theme-preview]{grid-area:preview;display:block;width:100%;height:132px;object-fit:none;object-position:50% 50%;border-radius:10px;outline:1px solid var(--dr-line);outline-offset:-1px;image-rendering:pixelated} /* The village map's landmark (the pond) sits away from centre; campus and loft read fine at the universal crop. */ #dayroom .dr-office-theme-tile canvas[data-office-theme-preview=village]{object-position:6% 57%} #dayroom .dr-office-theme-tile .dr-tile-name{grid-area:name;margin-top:10px} /* The shared .dr-tile:focus-within ring would double up with this tile's own :focus-visible outline. */ #dayroom .dr-office-theme-tile:focus-within{box-shadow:none} #dayroom .dr-office-theme-tile[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--dr-accent)} #dayroom .dr-office-theme-tile:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px} /* Apps & connectors */ #dayroom .dr-app-search{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:10px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-field-line);color:var(--dr-muted)} #dayroom .dr-app-search svg.dr-i{width:16px;height:16px} #dayroom .dr-app-search input{width:180px;height:30px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--dr-ink);font-size:13px;font-weight:600} #dayroom .dr-app-search input:focus{outline:none} #dayroom .dr-app-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--dr-accent),0 0 0 4px var(--dr-accent-soft)} #dayroom details.dr-app-advanced>summary{list-style:none;cursor:pointer} #dayroom details.dr-app-advanced>summary::-webkit-details-marker{display:none} #dayroom details.dr-app-advanced[open]>summary svg.dr-i{transform:rotate(180deg)} /* I8: the summary fills its .dr-card, which clips overflow, so the shared outset ring (rule 2) was cut off on all four sides. Inset, like the card rows below. */ #dayroom details.dr-app-advanced>summary:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px;border-radius:14px} #dayroom .dr-connect-waiting{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:700;color:var(--dr-ink)} #dayroom .dr-pre{white-space:pre-wrap;overflow-wrap:anywhere} #dayroom .dr-table-wrap{overflow:auto} #dayroom :is(.dr-diff,.dr-connected-content table){width:100%;border-collapse:collapse;font-size:13px} #dayroom :is(.dr-diff,.dr-connected-content table) :is(th,td){padding:8px 10px;border-top:1px solid var(--dr-line);text-align:left;vertical-align:top} #dayroom .dr-diff thead th{border-top:0;color:var(--dr-muted);font-size:12px;font-weight:800} #dayroom .dr-diff tbody th{color:var(--dr-ink);font-weight:800} #dayroom .dr-diff td:last-child{color:var(--dr-accent-text);font-weight:700} /* Calendar, Drive, media and music */ #dayroom .dr-calendar-date,#dayroom .dr-daybar-date{flex:none;display:grid;place-items:center;align-content:center;width:40px;height:44px;border-radius:11px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom :is(.dr-calendar-date,.dr-daybar-date) :is(span,small){color:var(--dr-accent-text);font-size:10px;font-weight:800;text-transform:uppercase} #dayroom :is(.dr-calendar-date,.dr-daybar-date) strong{color:var(--dr-ink);font-size:16px;font-weight:800;line-height:1.1} #dayroom .dr-calendar-when{font-variant-numeric:tabular-nums} #dayroom :is(.dr-calendar-meeting-url,.dr-calendar-no-link){color:var(--dr-muted);font-size:12px;font-weight:600;overflow-wrap:anywhere} #dayroom .dr-calendar-event .dr-state{margin-top:4px;width:fit-content} /* Listening activity's header: the Spotify logo, its name and the connection chip, spaced as one group. */ #dayroom .dr-music-service{display:inline-flex;align-items:center;gap:8px} /* Window T9's drive search opt-out (drive-files.css), carried forward and adapted: the row now draws its own pill (like .dr-app-search), so the plain input and submit button opt out of the generic field look inside it. */ #dayroom .dr-drive-search .dr-form-row{align-items:center;height:40px;padding-inline-start:12px;border-radius:12px;background:var(--dr-field);box-shadow:inset 0 0 0 1px var(--dr-field-line)} #dayroom .dr-drive-search .dr-form-row:focus-within{outline:2px solid var(--dr-accent);outline-offset:3px} #dayroom .dr-drive-search .dr-form-row>svg.dr-i{flex:none;color:var(--dr-muted)} #dayroom .dr-drive-search input{height:auto;padding:0;border:0;background:transparent;box-shadow:none;font:inherit} #dayroom .dr-drive-search input:focus-visible{box-shadow:none} #dayroom .dr-drive-search .dr-button{box-shadow:none;border-inline-start:1px solid var(--dr-line-2);border-radius:0 12px 12px 0;background:transparent;font-size:12px} #dayroom .dr-drive-footer{position:sticky;bottom:-28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin:0 -20px -28px;padding:12px 20px;border-top:1px solid var(--dr-line);background:var(--dr-panel)} #dayroom .dr-drive-footer .dr-hint{margin-right:auto} #dayroom .dr-drive-row input[data-drive-select]{flex:none;width:18px;height:18px;accent-color:var(--dr-accent)} #dayroom .dr-drive-row input[data-drive-select]:disabled{cursor:default;opacity:.5} #dayroom .dr-drive-row.is-selected{background:var(--dr-sel)} #dayroom .dr-drive-row .dr-li-lead{width:34px;height:34px;background:none;box-shadow:none;border-radius:0} #dayroom .dr-drive-row .dr-li-lead svg{width:34px;height:34px} #dayroom a.dr-drive-title{text-decoration:none} #dayroom .dr-drive-selection{display:flex;flex-wrap:wrap;gap:6px} #dayroom .dr-drive-chip{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 4px 0 10px;border-radius:13px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line);font-size:12.5px;font-weight:700} #dayroom .dr-drive-remove{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--dr-muted);cursor:pointer} #dayroom .dr-drive-remove svg.dr-i{width:13px;height:13px} #dayroom .dr-chat-media{display:grid;gap:8px;width:min(420px,100%);margin-top:9px;padding:10px 12px;border-radius:12px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2)} #dayroom .dr-chat-media.is-video video{width:100%;max-height:280px;border-radius:10px;background:var(--dr-sunken)} #dayroom .dr-note-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px;font-weight:800} #dayroom .dr-note-heading a{color:var(--dr-muted);font-size:12px;font-weight:700} #dayroom .dr-note-controls{display:flex;align-items:center;gap:10px} #dayroom .dr-note-play{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:var(--dr-accent);color:var(--dr-accent-ink);cursor:pointer} #dayroom .dr-note-track{flex:1;min-width:0;display:grid;gap:2px} #dayroom .dr-note-track input[type=range]{width:100%;accent-color:var(--dr-accent)} #dayroom .dr-note-time{color:var(--dr-muted);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums} #dayroom .dr-note-speed{height:22px;padding:0 8px;border:0;border-radius:11px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink-2);font-size:12px;font-weight:800;cursor:pointer} #dayroom p.dr-note-error,#dayroom p.dr-media-error,#dayroom p#calendar-error{color:color-mix(in srgb,var(--st-dnd) 60%,var(--dr-ink));font-size:12.5px;font-weight:700} #dayroom #calendar-recovery{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:4px} #dayroom .dr-media-stage{display:grid;place-items:center;min-height:180px;padding:16px} #dayroom .dr-media-placeholder{display:grid;justify-items:center;gap:8px;color:var(--dr-muted);font-size:13px;font-weight:700} #dayroom .dr-media-video{width:100%;aspect-ratio:16/9;border-radius:12px;background:var(--dr-sunken)} #dayroom .dr-media-meter{width:100%;height:48px} #dayroom .dr-media-readout{display:flex;align-items:center;gap:10px} #dayroom .dr-media-indicator{width:9px;height:9px;border-radius:50%;background:var(--dr-muted)} #dayroom .dr-media-note[data-phase="recording"] .dr-media-indicator{background:var(--st-dnd);animation:dr-state-blink 1.2s steps(2,end) infinite} #dayroom .dr-media-timer{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums} #dayroom .dr-media-limit{color:var(--dr-muted);font-size:12.5px;font-weight:700} #dayroom p.dr-media-state{margin-left:auto;color:var(--dr-muted);font-size:12.5px;font-weight:700} #dayroom .dr-media-actions [data-media="cancel"]{margin-left:auto} #dayroom .dr-media-stop span{width:10px;height:10px;border-radius:2px;background:currentColor} /* Window T9's media focus ring (media-notes.css), carried forward: audio/video review controls aren't covered by the shared button/link ring, since they're native media elements, not buttons. */ #dayroom .dr-media-note :is(audio,video):focus-visible{outline:2px solid var(--dr-accent);outline-offset:4px} #dayroom .dr-spotify-controls{display:flex;align-items:center;gap:6px} #dayroom .dr-spotify-controls button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink-2);cursor:pointer} #dayroom .dr-spotify-controls [data-player="toggle"]{width:44px;background:var(--dr-accent);box-shadow:none;color:var(--dr-accent-ink)} #dayroom .dr-spotify-controls button:disabled{opacity:.45;cursor:not-allowed} #dayroom :is(.dr-spotify-device,.dr-spotify-feedback){margin:6px 0 0;color:var(--dr-muted);font-size:12px;font-weight:600} #dayroom .dr-music-status{display:flex;align-items:center;gap:6px;color:var(--dr-muted);font-size:12px;font-weight:700} #dayroom .dr-music-title{display:block;font-size:16px;font-weight:800} #dayroom p.dr-music-artist{color:var(--dr-muted);font-size:13px;font-weight:600} #dayroom .dr-music-meter{display:inline-flex;align-items:flex-end;gap:2px;height:12px} #dayroom .dr-music-meter i{width:3px;height:4px;border-radius:1px;background:var(--st-available)} #dayroom .dr-music-now.is-playing .dr-music-meter i{animation:dr-music-beat .8s steps(4,end) infinite alternate} #dayroom .dr-music-now.is-playing .dr-music-meter i:nth-child(2n){animation-delay:.2s} @keyframes dr-music-beat{to{height:12px}} #dayroom .dr-profile-listening .dr-card-body{display:grid;gap:4px;padding-top:12px} #dayroom .dr-listening-service{display:inline-flex;align-items:center;gap:6px;color:var(--dr-muted);font-size:12px;font-weight:800} #dayroom .dr-profile-listening a{color:var(--dr-ink);font-size:15px;font-weight:800} @media (prefers-reduced-motion:reduce){#dayroom .dr-media-note[data-phase="recording"] .dr-media-indicator,#dayroom .dr-music-now.is-playing .dr-music-meter i{animation:none}} /* Agents */ /* A rendered answer in a dialog reads as body text, like its own lists: product.css's small muted #dayroom .dr-modal p (kept for the studio and desks) would otherwise win on load order. Spacing stays chat-bubbles.css's, as in chat. */ #dayroom .dr-modal .dr-answer-text p{font-size:inherit;color:inherit} #dayroom .dr-hub-sidebar{display:flex} #dayroom .dr-hub-main{display:flex;flex-direction:column;gap:16px;min-width:0} #dayroom .dr-hub-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} #dayroom .dr-hub-heading h2{font-size:14px;font-weight:800;color:var(--dr-ink)} #dayroom .dr-hub-heading p{font-size:12.5px;font-weight:600;color:var(--dr-muted)} #dayroom .dr-hub-catalog-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px} /* The companion fills its logo box or row lead, so the box takes the portrait's own background (no inset rectangle). Scoped: chat-bubbles.css and the shell's sidebar size every other companion portrait. */ #dayroom :is(.dr-tile-logo,.dr-li-lead)>.dr-companion-dp{width:100%;height:100%;border-radius:inherit} #dayroom .dr-assistant-identity{display:flex;align-items:center;gap:12px} #dayroom .dr-hub-step{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:8px} #dayroom .dr-hub-step-number{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--dr-sunken);color:var(--dr-muted);font-size:12px;font-weight:800} #dayroom .dr-hub-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #dayroom .dr-companion-sources{display:flex;flex-wrap:wrap;gap:6px} #dayroom .dr-skill-recording-bar{position:fixed;left:50%;bottom:20px;z-index:70;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 14px;border-radius:14px;background:var(--dr-glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:var(--dr-glass-shadow),inset 0 0 0 1px var(--dr-glass-line);transform:translateX(-50%)} #dayroom .dr-skill-recording-bar strong{display:block;font-size:13px;font-weight:800} #dayroom .dr-skill-recording-bar span{font-size:12px;font-weight:600;color:var(--dr-muted)} #dayroom .dr-skill-recording-dot{width:10px;height:10px;border-radius:50%;background:var(--st-dnd);animation:dr-state-blink 1.2s steps(2,end) infinite} @media (prefers-reduced-motion:reduce){#dayroom .dr-skill-recording-dot{animation:none}} @media (max-width:760px){#dayroom .dr-hub-step{grid-template-columns:24px minmax(0,1fr)}} /* Imports and migration */ #dayroom .dr-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none} /* Minor 1: --dr-faint reads at 2.3-3.3:1 here, below AA; --dr-muted is the same fix the message times already use. */ #dayroom .dr-steps li{display:flex;align-items:center;gap:7px;color:var(--dr-muted);font-size:12px;font-weight:700} #dayroom .dr-steps li+li::before{content:"";width:18px;height:1px;background:var(--dr-line-2)} #dayroom .dr-steps b{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-muted);font-size:11px;font-weight:800} #dayroom .dr-steps li[aria-current="step"]{color:var(--dr-ink)} #dayroom .dr-steps li[aria-current="step"] b{background:var(--dr-accent);box-shadow:none;color:var(--dr-accent-ink)} #dayroom .dr-steps li.is-complete b{background:var(--dr-accent-soft);box-shadow:none;color:var(--dr-accent-text)} #dayroom .dr-import-sources{margin:0;padding:0;border:0} #dayroom .dr-import-sources legend{margin-bottom:8px;color:var(--dr-ink-2);font-size:13px;font-weight:800} #dayroom .dr-import-source{min-height:0;cursor:pointer} #dayroom .dr-import-source input{position:absolute;opacity:0;pointer-events:none} #dayroom .dr-import-source:has(input:checked){box-shadow:inset 0 0 0 2px var(--dr-accent)} #dayroom .dr-import-source:has(input:focus-visible){outline:2px solid var(--dr-accent);outline-offset:2px} #dayroom :is(.dr-import-filebox,.dr-wa-drop){position:relative;display:grid;justify-items:center;gap:6px;min-height:140px;padding:20px;border-radius:14px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1.5px var(--dr-line-2);text-align:center} #dayroom :is(.dr-import-filebox.has-file,.dr-wa-drop.is-dragging,.dr-wa-drop.dragging){box-shadow:inset 0 0 0 2px var(--dr-accent)} #dayroom :is(.dr-import-filebox,.dr-wa-drop) input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer} #dayroom :is(.dr-import-filebox,.dr-wa-drop):has(input:focus-visible){outline:2px solid var(--dr-accent);outline-offset:2px} #dayroom .dr-import-filebox .dr-field-error{position:relative;pointer-events:none} #dayroom .dr-wa-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #dayroom .dr-wa-summary>div{padding:12px 14px} #dayroom .dr-wa-summary strong{display:block;font-size:20px;font-weight:800;color:var(--dr-ink)} #dayroom .dr-wa-qr{display:block;width:220px;height:220px;margin:8px auto;padding:10px;border-radius:14px;background:white;image-rendering:pixelated} #dayroom :is(.dr-wa-candidates,#dr-wa-candidates,#dr-wa-sender-choices,.dr-wa-audit,.dr-wa-sample,.dr-wa-senders){max-height:320px;overflow:auto} #dayroom .dr-wa-phase{font-size:14px;font-weight:800;color:var(--dr-ink)} /* The logo and filename are one item (.dr-dock-name) that never shrinks below its natural size, so they can never land on separate lines; the state chip (fixed-size, never growing or shrinking) is the only thing that wraps to its own line when the two don't both fit. A name alone on its line that's still too wide falls back to the title's own ellipsis, never the container overflowing. */ #dayroom .dr-dock-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0} #dayroom .dr-dock-name{display:flex;align-items:center;gap:8px;flex:1 0 auto;max-width:100%;min-width:0} #dayroom .dr-dock-title{flex:1;min-width:0;overflow:hidden;margin:0;font-size:13px;font-weight:800;text-overflow:ellipsis;white-space:nowrap} #dayroom .dr-dock-head .dr-state{flex:0 0 auto} #dayroom .dr-wa-message-badge{height:18px;padding:0 6px;font-size:10.5px;line-height:18px} #dayroom .dr-wa-source-label{display:block;color:var(--dr-muted);font-size:11.5px;font-weight:600} #dayroom .dr-system-row{margin:6px auto;max-width:560px;padding:8px 12px;border-radius:12px;background:var(--dr-sunken);color:var(--dr-muted);font-size:12.5px;font-weight:600;text-align:center;white-space:pre-wrap} #dayroom .dr-system-row time{display:block;margin-bottom:2px} #dayroom .dr-wa-review-fields{display:flex;flex-direction:column;gap:12px;border:0;padding:0;margin:0;min-width:0} /* .dr-field's own margin-bottom is meant for a stacked label; inside a row's trail it would push the row taller and the control off-centre, so it's zeroed there. */ #dayroom .dr-li-trail.dr-field{margin-bottom:0} #dayroom .dr-import-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #dayroom .dr-attach-missing{display:flex;align-items:center;gap:10px;width:fit-content;margin-top:8px;padding:8px 14px 8px 10px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-muted);font-size:12.5px;font-weight:700} #dayroom .dr-wa-historical-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line)} /* Imported history keeps its chat transcript (AGENTS.md, 2026-09-28): what you sent, linked to you or chosen as your historical name, sits on the right in a tinted bubble; everyone else's sits on the left. Only imported rows (data-imported) do this. Messages sent in Dayroom, including those continuing after an import, are the flat rows above. */ #dayroom .dr-message-row.is-own[data-imported]{flex-direction:row-reverse} #dayroom .dr-message-row[data-imported] .dr-message-content{flex:0 1 auto;max-width:min(85%,70ch);padding:12px 16px;background:var(--dr-soft);border:1px solid var(--dr-line);border-radius:16px 16px 16px 4px} #dayroom .dr-message-row.is-own[data-imported] .dr-message-content{background:color-mix(in srgb,var(--dr-accent) 13%,var(--dr-panel));border-radius:16px 16px 4px 16px} #dayroom .dr-message-row.is-own[data-imported] .dr-message-actions{right:auto;left:14px} #dayroom .dr-message-row.is-own[data-imported] .dr-menu{right:auto;left:-3px} @media(max-width:560px){#dayroom .dr-message-row[data-imported] .dr-message-content{max-width:calc(100% - 44px);padding:10px 12px}} /* Help, the office tour and hints */ #dayroom .dr-help-content{display:flex;flex-direction:column;gap:16px} #dayroom .dr-help-nav .dr-count{height:17px;min-width:17px;padding:0 5px;border-radius:9px;font-size:10.5px;line-height:17px} #dayroom details:is(.dr-help-topic,.dr-help-guide)>summary{list-style:none;cursor:pointer} #dayroom details:is(.dr-help-topic,.dr-help-guide)>summary::-webkit-details-marker{display:none} #dayroom details:is(.dr-help-topic,.dr-help-guide)[open]>summary .dr-li-trail svg.dr-i{transform:rotate(180deg)} #dayroom details:is(.dr-help-topic,.dr-help-guide)+details{box-shadow:inset 0 1px 0 var(--dr-line)} #dayroom .dr-office-tour{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--dr-bg) 55%,transparent)} #dayroom .dr-office-tour:has(.dr-tour-welcome){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none} #dayroom .dr-tour-card{position:absolute;display:flex;flex-direction:column;gap:12px;width:min(440px,calc(100vw - 32px));padding:20px 22px 18px;border-radius:20px;background:var(--dr-glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:var(--dr-glass-shadow),inset 0 0 0 1px var(--dr-glass-line);color:var(--dr-ink);outline:none;animation:dr-tour-in .15s steps(3,end)} #dayroom .dr-tour-card:focus-visible{outline:none;box-shadow:var(--dr-glass-shadow),inset 0 0 0 1px var(--dr-glass-line),0 0 0 2px var(--dr-accent)} #dayroom .dr-tour-welcome{width:min(520px,calc(100vw - 32px));padding:28px 30px 24px} #dayroom p.dr-tour-welcome-line{margin:0;color:var(--dr-muted);font-size:14px;font-weight:700;overflow-wrap:anywhere} #dayroom .dr-tour-workspace{display:grid;margin:0;color:var(--dr-ink);font-size:min(var(--dr-tour-name-size,40px),9vw);font-weight:800;letter-spacing:-.03em;line-height:1.02;overflow-wrap:anywhere} #dayroom .dr-tour-card[data-reveal="waiting"] .dr-tour-workspace span{opacity:0} #dayroom .dr-tour-card[data-reveal="complete"] .dr-tour-workspace span{opacity:1;transition:opacity .15s} #dayroom .dr-tour-guide-top{display:flex;align-items:center;justify-content:space-between;gap:12px} #dayroom .dr-tour-progress{color:var(--dr-muted);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums} #dayroom .dr-tour-lesson{display:flex;align-items:flex-start;gap:14px} #dayroom .dr-tour-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--dr-accent-soft);color:var(--dr-accent-text)} #dayroom .dr-tour-lesson h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em} #dayroom p.dr-tour-copy{margin:4px 0 0;color:var(--dr-ink-2);font-size:13.5px;font-weight:500;line-height:1.5} #dayroom p.dr-tour-hint{margin:0;color:var(--dr-muted);font-size:12.5px;font-weight:600} #dayroom .dr-tour-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px} #dayroom .dr-tour-actions .dr-tour-skip{margin-right:auto} #dayroom .dr-tour-highlight{position:fixed;z-index:79;border-radius:14px;box-shadow:0 0 0 2px var(--dr-accent),0 0 0 6px var(--dr-accent-soft);pointer-events:none} @keyframes dr-tour-in{from{opacity:0;transform:translateY(4px)}} #dayroom .dr-office-hint-targets{position:absolute;inset:0;pointer-events:none} #dayroom .dr-office-hint-target{position:absolute;border:0;border-radius:10px;background:transparent;opacity:0} #dayroom .dr-office-hint-target:focus-visible{opacity:1;outline:2px dashed var(--dr-accent);outline-offset:2px} #dayroom .dr-office-hint{display:grid;gap:6px;width:280px;padding:12px 14px 14px} #dayroom .dr-office-hint[hidden]{display:none} #dayroom .dr-office-hint-top{display:flex;align-items:center;justify-content:space-between;gap:8px} #dayroom .dr-office-hint h3{margin:0;color:var(--dr-ink);font-size:14px;font-weight:800;overflow-wrap:anywhere} #dayroom .dr-office-hint p{margin:0;color:var(--dr-muted);font-size:13px;font-weight:600;line-height:1.45;overflow-wrap:anywhere} #dayroom .dr-office-hint p.dr-office-hint-error{color:color-mix(in srgb,var(--st-dnd) 60%,var(--dr-ink))} #dayroom .dr-office-hint-action{width:100%;margin-top:6px} #dayroom #dr-helper-prompt{min-height:150px;line-height:1.65} @media (hover:hover){#dayroom summary.dr-li:hover{background:var(--dr-hover)}} /* Everyday dialogs */ #dayroom .dr-form-row>label.dr-field{flex:1;min-width:0} #dayroom .dr-li input.dr-check{flex:none;width:18px;height:18px;margin:0;accent-color:var(--dr-accent);cursor:pointer} #dayroom .dr-li-title label{cursor:pointer} #dayroom .dr-li-trail select{min-width:200px} #dayroom .dr-message-result .dr-result-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--dr-ink-2)} #dayroom .dr-message-result time{display:block;margin-top:2px;font-variant-numeric:tabular-nums} #dayroom #dr-search-more{align-self:center} #dayroom p.dr-card-note{padding:0 16px 12px} #dayroom p.dr-card-note:empty{display:none} #dayroom .dr-profile-card{display:grid;place-items:center;padding:20px} #dayroom #dr-profile-picture{display:block;width:144px;height:144px;border-radius:14px;outline:1px solid var(--dr-line);outline-offset:-1px;image-rendering:pixelated} #dayroom .dr-invite-code{margin-top:8px;font-family:inherit;font-size:20px;font-weight:800;letter-spacing:.08em;text-align:center;font-variant-numeric:tabular-nums;user-select:all} @media (prefers-reduced-motion:reduce){#dayroom .dr-tour-card{animation:none}#dayroom .dr-tour-card[data-reveal] .dr-tour-workspace span{transition:none}} /* Work pages, catch-up and threads */ #dayroom .dr-wp-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px} #dayroom .dr-wp-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px} #dayroom .dr-wp-select{display:inline-flex;align-items:center;gap:8px;color:var(--dr-muted);font-size:12.5px;font-weight:800} #dayroom .dr-wp-content{display:flex;flex-direction:column;gap:16px} #dayroom .dr-wp-activity-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:16px} #dayroom :is(.dr-wp-feed,.dr-wp-activity-side){display:flex;flex-direction:column;gap:16px;min-width:0} #dayroom .dr-wp-task.is-done .dr-li-title,#dayroom .dr-wp-board-card.is-done .dr-wp-card-title{color:var(--dr-muted);text-decoration:line-through} #dayroom .dr-wp-meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:4px;color:var(--dr-muted);font-size:12px;font-weight:700} #dayroom .dr-wp-mention{color:var(--dr-accent-text);font-weight:800} #dayroom .dr-wp-catchup{padding:12px 16px} #dayroom .dr-wp-catchup+.dr-wp-catchup{box-shadow:inset 0 1px 0 var(--dr-line)} #dayroom .dr-wp-catchup-head{display:flex;align-items:center;gap:8px;font-size:13px} #dayroom .dr-wp-catchup-head .dr-companion-dp{width:24px;height:24px;border-radius:7px} /* Minor 1: --dr-faint reads at 2.3-3.3:1 here, below AA; --dr-muted is the same fix the message times already use. */ #dayroom .dr-wp-catchup-head time{margin-left:auto;color:var(--dr-muted);font-size:12px;font-weight:700} #dayroom .dr-wp-summary{max-width:75ch;margin:8px 0;color:var(--dr-ink-2);font-size:13.5px;line-height:1.55} #dayroom .dr-wp-message-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} #dayroom .dr-wp-todo-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px;padding:0 16px 16px} #dayroom .dr-wp-todo-board.is-filtered{grid-template-columns:minmax(0,720px)} #dayroom .dr-wp-column-dot{width:8px;height:8px;border-radius:50%;background:var(--st-working)} #dayroom .dr-wp-board-column.is-done-column .dr-wp-column-dot{background:var(--st-available)} #dayroom .dr-wp-board-cards{display:flex;flex-direction:column;gap:10px;padding:0 12px 12px} #dayroom .dr-wp-board-card{padding:12px} #dayroom .dr-wp-card-heading{display:flex;align-items:flex-start;gap:10px} #dayroom .dr-wp-todo-check{flex:none;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:7px;background:var(--dr-panel);box-shadow:inset 0 0 0 1.5px var(--dr-line-2);color:transparent;cursor:pointer} #dayroom :is(.dr-wp-todo-check[aria-pressed="true"],.is-completing .dr-wp-todo-check){background:var(--dr-accent);box-shadow:none;color:var(--dr-accent-ink)} #dayroom .dr-wp-todo-check svg.dr-i{width:14px;height:14px;stroke-width:2.4} #dayroom .dr-wp-board-add{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:0;border-radius:12px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--dr-line-2);color:var(--dr-muted);font-weight:800;cursor:pointer} #dayroom .dr-wp-board-empty{padding:16px;color:var(--dr-muted);font-size:13px;font-weight:600;text-align:center} #dayroom :is(.dr-wp-file-columns,.dr-wp-file-row){display:grid;grid-template-columns:minmax(0,1fr) 160px 148px 40px;align-items:center;gap:12px;padding:10px 16px} #dayroom .dr-wp-file-columns{color:var(--dr-muted);font-size:12px;font-weight:800} #dayroom .dr-wp-file-row{box-shadow:inset 0 1px 0 var(--dr-line)} #dayroom .dr-wp-file-name{display:flex;align-items:center;gap:12px;min-width:0;color:var(--dr-ink);text-decoration:none} #dayroom .dr-wp-file-name small{display:block;color:var(--dr-muted);font-size:12px;font-weight:600} #dayroom .dr-wp-saved-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #dayroom p.dr-wp-status:empty{display:none} /* Minor 9 (visual-2): the transcript disclosure (agents-ui.js's meetingNotes) has no icon of its own in its summary to rotate, unlike the chevron-based disclosures above and below, so CSS alone hides the native marker and draws a small chevron that still flips open/closed. */ #dayroom .dr-companion-transcript>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px} #dayroom .dr-companion-transcript>summary::-webkit-details-marker{display:none} #dayroom .dr-companion-transcript>summary::after{content:'';flex:none;width:7px;height:7px;border-right:2px solid var(--dr-muted);border-bottom:2px solid var(--dr-muted);transform:rotate(45deg);transition:transform .12s ease} #dayroom .dr-companion-transcript[open]>summary::after{transform:rotate(-135deg)} @media(prefers-reduced-motion:reduce){#dayroom .dr-companion-transcript>summary::after{transition:none}} #dayroom .dr-catchup-card{margin:8px 12px 0} #dayroom .dr-catchup-card>summary{list-style:none;cursor:pointer} #dayroom .dr-catchup-card>summary::-webkit-details-marker{display:none} #dayroom .dr-catchup-card[open]>summary svg.dr-i{transform:rotate(180deg)} #dayroom .dr-catchup-card .dr-companion-dp{width:24px;height:24px;border-radius:7px} /* The portrait comes first in this head, so .dr-card-head>div:first-child misses the title block: grow it here, which puts the chevron at the right edge. */ #dayroom .dr-catchup-card>summary>div{flex:1;min-width:0} #dayroom .dr-chat[data-thread-open]>:not(.dr-thread-panel){display:none!important} #dayroom .dr-thread-panel{flex:1;min-height:0} #dayroom .dr-thread-older{align-self:center;margin-top:10px} #dayroom .dr-thread-messages{flex:1;min-height:0;overflow:auto;padding-inline:12px} #dayroom .dr-thread-compose{margin:0 12px 12px} #dayroom .dr-thread-compose textarea{width:100%;min-height:44px;max-height:160px;border:0;background:transparent;box-shadow:none;color:var(--dr-ink);font-size:14px;font-weight:500;resize:none} /* Minor 1: --dr-faint reads at 2.3-3.3:1 here, below AA; --dr-muted is the same fix the message times already use. */ #dayroom .dr-thread-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--dr-muted);font-size:12px;font-weight:700} #dayroom .dr-thread-foot{flex-wrap:wrap} #dayroom #dr-thread-send{margin-left:auto} #dayroom .dr-thread-agent-tools{display:flex;align-items:center;gap:8px;min-width:0} #dayroom .dr-thread-agent-tools select{width:auto;max-width:160px;min-height:36px} #dayroom #dr-thread-command-hint:empty{display:none} #dayroom .dr-picture-editor{display:grid;justify-items:center;gap:14px;max-width:560px;margin:auto} #dayroom #dr-picture-preview{width:min(100%,256px);height:auto;aspect-ratio:1;border-radius:18px;background:var(--dr-panel);border:1px solid var(--dr-line)} #dayroom .dr-picture-editor>.dr-hint{margin:0;text-align:center;max-width:420px} #dayroom .dr-picture-file{position:relative;cursor:pointer;overflow:hidden} #dayroom .dr-picture-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} #dayroom .dr-picture-file:focus-within{outline:2px solid var(--dr-accent);outline-offset:3px} #dayroom .dr-picture-crop{display:grid;gap:10px;width:100%;max-width:360px} #dayroom .dr-picture-crop label{display:grid;gap:4px;font-size:13px;font-weight:600} #dayroom .dr-picture-crop input{width:100%;padding:0;min-height:24px;accent-color:var(--dr-accent)} #dayroom .dr-picture-editor .dr-form-actions{width:100%;justify-content:flex-end} @media(max-width:1100px){#dayroom .dr-thread-shortcuts{display:none}} @media (max-width:1100px){#dayroom .dr-wp-activity-layout{grid-template-columns:1fr}} @media (max-width:800px){#dayroom :is(.dr-wp-todo-board,.dr-wp-saved-list){grid-template-columns:1fr}#dayroom .dr-wp-file-columns{display:none}#dayroom .dr-wp-file-row{grid-template-columns:minmax(0,1fr) 40px}#dayroom .dr-wp-file-row>:is(.dr-wp-file-author,time){display:none}} /* Carried from the two deleted stylesheets (workspace-pages.css, channel-threads.css): rules for classes that persist under the new anatomy but sit outside the block above. Window Task 9's opt-outs for .dr-wp-search input and #dr-thread-message are judged moot (see the task report): both now reuse a component (.dr-app-search, .dr-composer) that already opts out of the shared field look on its own. */ #dayroom .dr-wp-board-column>.dr-card-head{align-items:flex-start} #dayroom .dr-wp-column-titles{flex:1;min-width:0} #dayroom .dr-wp-board-column>.dr-card-head .dr-count{margin-top:1px} #dayroom .dr-wp-task-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #dayroom .dr-wp-select select,#dayroom .dr-wp-task-controls select{font:inherit;font-size:14px;font-weight:600;line-height:20px} #dayroom .dr-wp-todo-editor fieldset{min-width:0;padding:0;margin:0;border:0;display:grid;gap:20px} #dayroom .dr-wp-todo-editor fieldset:disabled{opacity:.7} #dayroom .dr-wp-todo-editor label{display:grid;gap:8px;min-width:0;color:var(--dr-ink);font-size:14px;line-height:20px} #dayroom .dr-wp-todo-editor input,#dayroom .dr-wp-todo-editor select{font:inherit;line-height:20px} #dayroom .dr-wp-todo-editor select:disabled{color:var(--dr-muted);opacity:1} #dayroom .dr-wp-todo-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:16px} #dayroom .dr-wp-todo-optional{color:var(--dr-muted);font-weight:400} #dayroom .dr-wp-todo-error{font-size:14px;line-height:20px;overflow-wrap:anywhere} #dayroom .dr-wp-todo-confirm{display:grid;gap:12px;border-top:1px solid var(--dr-line);padding-top:16px;font-size:14px;line-height:20px;overflow-wrap:anywhere} #dayroom .dr-wp-todo-total{white-space:nowrap;font-variant-numeric:tabular-nums} #dayroom .dr-wp-todo-check.is-readonly{color:var(--dr-muted);cursor:default} #dayroom .dr-wp-inline-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #dayroom .dr-wp-board-card .dr-wp-inline-actions:empty{display:none} #dayroom .dr-wp-board-card>.dr-wp-inline-actions{padding-top:12px;border-top:1px solid var(--dr-line)} #dayroom .dr-wp-board-card>.dr-wp-inline-actions .dr-button{background:transparent;box-shadow:none;min-height:32px;padding:4px 8px} #dayroom .dr-wp-card-source{color:var(--dr-muted);font-size:12px;line-height:18px} #dayroom .dr-wp-board-add>span{font-size:22px;line-height:20px;color:var(--dr-accent)} @media(hover:hover){#dayroom .dr-wp-board-add:hover,#dayroom .dr-wp-todo-check:hover{background:var(--dr-soft);color:var(--dr-ink)}#dayroom .dr-wp-board-card>.dr-wp-inline-actions .dr-button:hover{box-shadow:inset 0 0 0 1px var(--dr-line)}} #dayroom .dr-wp-message-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-width:0;font-size:12px;line-height:16px;color:var(--dr-muted)} #dayroom .dr-wp-message-head strong{font-size:14px;line-height:20px;color:var(--dr-ink);font-weight:600;overflow-wrap:anywhere} #dayroom .dr-wp-message-head time{margin-left:auto} #dayroom .dr-wp-file-author,#dayroom .dr-wp-file-row>time{font-size:12px;font-weight:600;color:var(--dr-muted);overflow-wrap:anywhere} #dayroom .dr-wp-saved-files{display:grid;gap:8px;min-width:0} #dayroom .dr-wp-saved-files a{display:flex;align-items:center;gap:8px;color:var(--dr-ink);font-size:14px;line-height:20px;overflow-wrap:anywhere;text-underline-offset:4px} #dayroom .dr-wp-saved-files svg.dr-i{width:16px;height:16px;flex:none;color:var(--dr-accent)} #dayroom .dr-wp-footer{display:flex;justify-content:center} #dayroom .dr-wp-footer:empty{display:none} #dayroom .dr-thread-messages{overscroll-behavior:contain} /* Forced colours (Windows contrast themes) drop backgrounds and box-shadows, which alone draw the toggle, mark the chosen segment, palette, office theme and import source, and ring the search pill and tour card on focus. System colours draw them instead. A chosen control that also has keyboard focus gets one double outline: its inner line is the chosen ring, its outer line the focus ring, so neither hides the other. The app-wide forced-colours pass is deferred. */ @media (forced-colors:active){ #dayroom .dr-toggle{forced-color-adjust:none;background:Canvas;border:1px solid CanvasText;box-shadow:none} #dayroom .dr-toggle::before{top:2px;left:2px;background:CanvasText} #dayroom .dr-toggle:is(:checked,[aria-pressed="true"],[aria-checked="true"]){background:Highlight;border-color:Highlight} #dayroom .dr-toggle:is(:checked,[aria-pressed="true"],[aria-checked="true"])::before{background:HighlightText} #dayroom .dr-toggle:focus-visible{outline-color:Highlight} #dayroom .dr-seg.is-text>button:is([aria-pressed="true"],[aria-current="page"]),#dayroom :is(.dr-theme-choice,.dr-office-theme-tile)[aria-pressed="true"],#dayroom .dr-import-source:has(input:checked){outline:2px solid Highlight;outline-offset:-2px} #dayroom .dr-app-search:focus-within,#dayroom .dr-tour-card:focus-visible{outline:2px solid Highlight;outline-offset:2px} #dayroom .dr-seg.is-text>button:is([aria-pressed="true"],[aria-current="page"]):focus-visible,#dayroom :is(.dr-theme-choice,.dr-office-theme-tile)[aria-pressed="true"]:focus-visible,#dayroom .dr-import-source:has(input:checked):has(input:focus-visible){outline:6px double Highlight;outline-offset:-2px} } /* Gmail previews: one quiet, readable mail row instead of numbered action chips. */ #dayroom .dr-mail-content{padding:0;overflow:hidden} #dayroom .dr-mail-list{list-style:none;margin:0;padding:0} #dayroom .dr-mail-list>li+li{border-top:1px solid var(--dr-line)} #dayroom .dr-mail-row{display:flex;align-items:flex-start;gap:14px;width:100%;padding:18px 20px;border:0;border-radius:0;background:transparent;color:var(--dr-ink);font:inherit;text-align:left;cursor:pointer} #dayroom .dr-mail-row:hover{background:var(--dr-hover)} #dayroom .dr-mail-row:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-3px} #dayroom .dr-mail-initial{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-top:2px;border-radius:10px;background:var(--dr-sunken);color:var(--dr-muted);font-size:15px;font-weight:800;box-shadow:inset 0 0 0 1px var(--dr-line-2)} #dayroom .dr-mail-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1} #dayroom .dr-mail-top{display:flex;align-items:center;gap:16px;min-width:0} #dayroom .dr-mail-sender{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:var(--dr-muted)} #dayroom .dr-mail-date{flex:none;margin-left:auto;font-size:11px;font-weight:600;color:var(--dr-muted);white-space:nowrap} #dayroom .dr-mail-subject{font-size:14px;font-weight:650;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #dayroom .dr-mail-snippet{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:12.5px;font-weight:500;line-height:1.55;color:var(--dr-muted)} #dayroom .dr-mail-row.is-unread .dr-mail-subject{font-weight:800} #dayroom .dr-mail-row.is-unread .dr-mail-sender{color:var(--dr-ink);font-weight:800} #dayroom .dr-mail-unread{flex:none;width:6px;height:6px;background:var(--dr-accent);border-radius:2px} #dayroom .dr-mail-detail{padding:20px} #dayroom .dr-mail-detail h3{margin:24px 0 12px;font-size:20px;font-weight:800;line-height:1.35;overflow-wrap:anywhere} #dayroom .dr-mail-from{margin:0 0 4px;font-size:13px;font-weight:800;overflow-wrap:anywhere} #dayroom .dr-mail-from span{color:var(--dr-muted);font-weight:500} #dayroom .dr-mail-detail-snippet{margin:20px 0 0;font-size:14px;line-height:1.7;overflow-wrap:anywhere} @media(max-width:560px){#dayroom .dr-mail-row{padding:15px 14px;gap:10px}#dayroom .dr-mail-initial{width:30px;height:30px;border-radius:8px}#dayroom .dr-mail-top{gap:8px}} @media(forced-colors:active){#dayroom .dr-mail-row:focus-visible{outline-color:Highlight}#dayroom .dr-mail-unread{background:CanvasText}} /* Imported media reads as a conversation; original provenance remains available. */ #dayroom .dr-wa-provenance{position:relative;font-size:11px;color:var(--dr-muted);font-weight:500} #dayroom .dr-wa-provenance summary{cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:3px} #dayroom .dr-wa-provenance summary::-webkit-details-marker{display:none} #dayroom .dr-wa-provenance[open]{flex-basis:100%} #dayroom .dr-wa-provenance span{display:block;padding:6px 0;line-height:1.5} #dayroom .dr-wa-change{font-size:11px;color:var(--dr-muted);font-weight:500;font-style:italic} #dayroom .dr-message-body:empty{display:none} #dayroom .dr-message-content .dr-import-image{display:block;width:fit-content;max-width:100%;padding:0;border:0;background:transparent;margin-top:6px} #dayroom .dr-message-content .dr-import-image img{display:block;width:auto;max-width:100%;max-height:280px;object-fit:contain;margin:0;border-radius:10px} /* Photo bursts stay compact until opened; every original message keeps its actions. */ #dayroom .dr-photo-collection{max-width:min(620px,100%);margin:12px 0;padding:14px;border:1px solid var(--dr-line);border-radius:18px;background:var(--dr-soft)} #dayroom .dr-photo-collection.is-own{margin-left:auto;background:color-mix(in srgb,var(--dr-accent) 10%,var(--dr-panel))} #dayroom .dr-photo-collection>summary{display:block;cursor:pointer;list-style:none;width:fit-content;max-width:100%;border-radius:10px} #dayroom .dr-photo-collection>summary::-webkit-details-marker{display:none} #dayroom .dr-photo-collection>summary:focus-visible{outline:2px solid var(--dr-accent);outline-offset:5px} #dayroom .dr-photo-heading{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap} #dayroom .dr-photo-heading time{font-size:11px;color:var(--dr-muted)} #dayroom .dr-photo-heading .dr-message-avatar{width:30px;height:30px;flex:0 0 30px} #dayroom .dr-photo-stack{display:block;position:relative;width:min(240px,65vw);height:200px;margin:18px 12px 12px} #dayroom .dr-photo-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:3px solid var(--dr-panel);border-radius:14px;box-shadow:var(--dr-shadow)} #dayroom .dr-photo-stack img:first-child{transform:rotate(-6deg)} #dayroom .dr-photo-stack img:nth-child(2){transform:rotate(5deg)} #dayroom .dr-photo-stack img:last-child{transform:rotate(-1deg)} #dayroom .dr-photo-count{display:block;padding:4px 0;font-size:12px;font-weight:700} #dayroom .dr-photo-close-label{display:none} #dayroom .dr-photo-collection[open]>summary .dr-photo-stack,#dayroom .dr-photo-collection[open]>summary .dr-photo-open-label{display:none} #dayroom .dr-photo-collection[open]>summary .dr-photo-close-label{display:inline} #dayroom .dr-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;min-width:0} #dayroom .dr-photo-grid>.dr-message-row{display:block;padding:0;min-width:0} #dayroom .dr-photo-grid>.dr-message-row>.dr-message-avatar{display:none} #dayroom .dr-photo-grid>.dr-message-row>.dr-message-content{max-width:100%;width:100%;padding:8px;box-sizing:border-box} #dayroom .dr-photo-grid .dr-message-actions{position:relative;inset:auto;opacity:1;pointer-events:auto;margin-top:8px;flex-wrap:wrap} #dayroom .dr-photo-grid .dr-import-image{width:100%;box-sizing:border-box} #dayroom .dr-photo-grid .dr-import-image img{width:100%;height:180px;object-fit:contain} #dayroom .dr-photo-grid .dr-photo-collection{padding:6px} @media(max-width:560px){#dayroom .dr-photo-grid{grid-template-columns:1fr}#dayroom .dr-photo-collection{padding:10px}} /* Viewing a photo is separate from choosing to download it. */ #dayroom .dr-image-open{cursor:zoom-in;text-align:left;color:var(--dr-ink);font:inherit} #dayroom .dr-image-open:focus-visible{outline:2px solid var(--dr-accent);outline-offset:3px} #dayroom .dr-modal:has(.dr-image-viewer){width:min(1080px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 88px);box-sizing:border-box} #dayroom .dr-image-viewer{display:flex;flex-direction:column;min-height:0} #dayroom .dr-image-stage{display:grid;place-items:center;min-height:180px;height:min(65dvh,720px);background:var(--dr-sunken);border-radius:12px;overflow:hidden} #dayroom .dr-image-full{display:block;width:100%;height:100%;min-height:0;object-fit:contain} #dayroom .dr-image-full[hidden],#dayroom .dr-image-error[hidden]{display:none} #dayroom .dr-image-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:12px 0 0} #dayroom [data-image-position]{min-width:60px;text-align:center;font-variant-numeric:tabular-nums} #dayroom .dr-image-filename{overflow-wrap:anywhere;text-align:center;font-size:12px;color:var(--dr-muted);margin:8px 0 0} #dayroom .dr-image-error{padding:24px;text-align:center} @media(max-height:500px){#dayroom .dr-image-stage{height:45dvh;min-height:100px}#dayroom .dr-image-filename{display:none}} #dayroom .dr-image-controls [aria-disabled="true"]{opacity:.4;cursor:default} #dayroom .dr-file-open{cursor:pointer;text-align:left;color:var(--dr-ink);font:inherit} #dayroom .dr-file-open:focus-visible{outline:2px solid var(--dr-accent);outline-offset:3px} #dayroom .dr-modal:has(.dr-file-viewer){width:min(1080px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 88px);box-sizing:border-box} #dayroom .dr-file-viewer{display:flex;flex-direction:column;min-height:0} #dayroom .dr-file-stage{display:grid;place-items:center;min-height:120px;height:clamp(120px,calc(100dvh - 360px),720px);border-radius:12px;background:var(--dr-sunken);overflow:auto} #dayroom .dr-file-stage canvas{display:block;margin:16px;max-width:none;background:#fff;grid-area:1/1;align-self:start;justify-self:center} #dayroom .dr-file-stage:has(canvas){display:block} #dayroom .dr-file-stage canvas{margin-inline:auto} #dayroom .dr-pdf-tools{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:12px} #dayroom .dr-pdf-tools[hidden],#dayroom .dr-pdf-text[hidden]{display:none} #dayroom .dr-pdf-tools label{display:flex;align-items:center;gap:8px} #dayroom .dr-pdf-tools select{font:inherit;color:var(--dr-ink);background:var(--dr-surface);border:1px solid var(--dr-border);border-radius:8px;padding:7px} #dayroom .dr-pdf-text{margin-top:12px;text-align:left} #dayroom .dr-pdf-text pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto;font:14px/1.6 ui-monospace,monospace} #dayroom .dr-file-detail{font-size:13px;color:var(--dr-muted);text-align:center} #dayroom .dr-file-stage pre{align-self:stretch;justify-self:stretch;min-height:100%;margin:0;padding:20px;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--dr-ink);font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:left} #dayroom .dr-file-loading,#dayroom .dr-file-error{padding:24px;text-align:center} #dayroom .dr-file-controls{display:flex;justify-content:center;padding-top:12px} #dayroom .dr-file-note{margin:8px 0 0;color:var(--dr-muted);font-size:12px;text-align:center} @media(max-height:500px){#dayroom .dr-file-stage{height:45dvh;min-height:120px}#dayroom .dr-file-note{display:none}} /* The long notification mode label needs its own row on narrow screens. */ @media(max-width:600px){ #dayroom #dr-notification-settings .dr-li:has(#dr-notification-mode){display:grid;grid-template-columns:32px minmax(0,1fr)} #dayroom #dr-notification-settings .dr-li:has(#dr-notification-mode)>.dr-li-trail{grid-column:1/-1;width:100%;margin-left:0} #dayroom #dr-notification-mode{width:100%;min-width:0} } /* Standard provider artwork stays smooth and legible in every interface palette. */ #dayroom .dr-logo-brand{display:inline-block;object-fit:contain;image-rendering:auto;flex-shrink:0} #dayroom .dr-tile-logo:has(.dr-logo-brand){background:#fff} #dayroom .dr-tile-logo:has(img[src$="/kimi.svg"]){background:#111} #dayroom .dr-connect-waiting>.dr-logo-brand{box-sizing:content-box;padding:8px;background:#fff;border-radius:12px} #dayroom .dr-agent-room-stage{--lab-ink:#111a17;--lab-metal:#263a34;--lab-panel:#1a2924;--lab-line:#49635a;position:relative;min-height:310px;overflow:hidden;background:var(--lab-panel);border:2px solid var(--lab-line);border-radius:10px;box-shadow:inset 0 0 0 4px var(--lab-ink)} #dayroom .dr-agent-lab-backdrop{position:absolute;inset:0;overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0 63px,color-mix(in srgb,var(--lab-line) 34%,transparent) 63px 65px),var(--lab-panel)} #dayroom .dr-agent-lab-backdrop:before,#dayroom .dr-agent-lab-backdrop:after{content:"";position:absolute;top:36px;width:54px;height:112px;background:var(--lab-metal);border:3px solid var(--lab-ink);box-shadow:inset 0 0 0 2px var(--lab-line)} #dayroom .dr-agent-lab-backdrop:before{left:18px}#dayroom .dr-agent-lab-backdrop:after{right:18px} #dayroom .dr-agent-lab-label{position:absolute;z-index:1;top:12px;left:50%;translate:-50% 0;padding:4px 9px;background:var(--lab-ink);border:2px solid var(--lab-line);color:var(--dr-accent);font-family:'Silkscreen',monospace;font-size:9px;letter-spacing:.12em} #dayroom .dr-agent-lab-gantry{position:absolute;top:29px;left:8%;right:8%;height:10px;background:var(--lab-metal);border:3px solid var(--lab-ink);box-shadow:inset 0 -2px var(--lab-line)} #dayroom .dr-agent-lab-gantry i{position:absolute;top:7px;width:8px;height:24px;background:var(--lab-line);border-inline:2px solid var(--lab-ink)} #dayroom .dr-agent-lab-gantry i:nth-child(1){left:18%}#dayroom .dr-agent-lab-gantry i:nth-child(2){left:50%}#dayroom .dr-agent-lab-gantry i:nth-child(3){right:18%} #dayroom .dr-agent-lab-screen{position:absolute;top:56px;width:78px;height:50px;padding:8px;background:#183b37;border:4px solid var(--lab-ink);box-shadow:0 4px 0 var(--lab-line)} #dayroom .dr-agent-lab-screen.is-left{left:86px}#dayroom .dr-agent-lab-screen.is-right{right:86px} #dayroom .dr-agent-lab-screen i{display:block;height:4px;margin-bottom:5px;background:var(--dr-accent)} #dayroom .dr-agent-lab-screen i:nth-child(2){width:64%;background:#7caa94}#dayroom .dr-agent-lab-screen i:nth-child(3){width:82%;background:#d58a47} #dayroom .dr-agent-lab-arm{position:absolute;top:38px;right:28%;width:12px;height:55px;background:var(--lab-line);border-inline:3px solid var(--lab-ink)} #dayroom .dr-agent-lab-arm i:first-child{position:absolute;top:45px;left:-18px;width:40px;height:12px;background:var(--lab-metal);border:3px solid var(--lab-ink)} #dayroom .dr-agent-lab-arm i:last-child{position:absolute;top:57px;left:-12px;width:8px;height:14px;background:var(--dr-accent);box-shadow:16px 0 var(--dr-accent)} #dayroom .dr-agent-lab-console{position:absolute;z-index:1;left:22px;bottom:45px;width:110px;height:42px;padding:8px;background:var(--lab-metal);border:3px solid var(--lab-ink);transform:skew(-5deg)} #dayroom .dr-agent-lab-console i{display:inline-block;width:11px;height:11px;margin-right:7px;background:var(--dr-accent);border:2px solid var(--lab-ink)}#dayroom .dr-agent-lab-console i:nth-child(2){background:#d58a47}#dayroom .dr-agent-lab-console i:nth-child(3){background:#7caa94} #dayroom .dr-agent-lab-floor{position:absolute;left:0;right:0;bottom:0;height:76px;background:repeating-linear-gradient(90deg,transparent 0 47px,var(--lab-line) 47px 49px),repeating-linear-gradient(0deg,transparent 0 22px,var(--lab-line) 22px 24px),var(--lab-ink);border-top:4px solid var(--lab-line)} #dayroom .dr-agent-room-roster{position:relative;z-index:2;display:flex;align-items:flex-end;gap:20px;width:100%;min-height:310px;overflow-x:auto;padding:118px 20px 30px 104px;scrollbar-width:thin} #dayroom .dr-agent-room-person{position:relative;display:grid;grid-template-rows:88px auto auto;justify-items:center;gap:3px;min-width:124px;padding:12px;background:color-mix(in srgb,var(--lab-panel) 92%,transparent);border:2px solid var(--lab-line);border-radius:5px;box-shadow:4px 4px 0 var(--lab-ink)} #dayroom .dr-agent-room-person:before{content:"";position:absolute;top:-9px;left:12px;right:12px;height:7px;background:var(--dr-accent);border:2px solid var(--lab-ink)} #dayroom .dr-agent-room-person:after{content:"";position:absolute;left:14px;right:14px;bottom:-11px;height:9px;background:var(--lab-metal);border:2px solid var(--lab-ink)} #dayroom .dr-agent-room-person.is-agent{border-top-color:var(--dr-accent)} #dayroom .dr-agent-room-person-art{display:grid;place-items:center;width:88px;height:88px;overflow:hidden;border:3px solid var(--lab-ink);border-radius:4px;background:var(--dr-soft)} #dayroom .dr-agent-room-person canvas,#dayroom .dr-agent-room-event-avatar canvas{width:100%;height:100%;image-rendering:pixelated} #dayroom .dr-agent-room-person strong{max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px} #dayroom .dr-agent-room-person span{font-size:11px;color:var(--dr-muted);text-align:center} #dayroom .dr-agent-room-companion{display:grid;place-items:center;width:100%;height:100%;padding:10px;background:var(--dr-soft)} #dayroom .dr-agent-room-companion svg{width:100%;height:100%;image-rendering:pixelated} #dayroom .dr-agent-room-privacy{padding:10px 12px;background:var(--dr-soft);border-left:4px solid var(--dr-accent);border-radius:8px;font-size:12px;color:var(--dr-muted)} #dayroom .dr-agent-room-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:16px;align-items:start} #dayroom .dr-agent-room-timeline{display:flex;flex-direction:column;gap:10px;min-width:0} #dayroom .dr-agent-room-event{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:12px;background:var(--dr-panel);border:1px solid var(--dr-line);border-radius:12px} #dayroom .dr-agent-room-event.is-reasoning{border-left:4px solid var(--dr-accent)} #dayroom .dr-agent-room-event.is-goal{background:var(--dr-soft)} #dayroom .dr-agent-room-event.is-status{padding-block:8px;opacity:.84} #dayroom .dr-agent-room-event.is-error{border-left:4px solid var(--dr-error-text,#a13636)} #dayroom .dr-agent-room-event-avatar{width:44px;height:44px;overflow:hidden;border-radius:9px;background:var(--dr-soft)} #dayroom .dr-agent-room-event-avatar .dr-agent-room-companion{padding:5px} #dayroom .dr-agent-room-event-copy{min-width:0} #dayroom .dr-agent-room-event-copy header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-bottom:5px} #dayroom .dr-agent-room-event-copy header strong{font-size:13px} #dayroom .dr-agent-room-agent-tag{padding:2px 5px;background:var(--dr-accent);color:var(--dr-accent-ink,#243c34);border-radius:4px;font-family:'Silkscreen',monospace;font-size:8px;line-height:1.2;text-transform:uppercase} #dayroom .dr-agent-room-event-copy header span,#dayroom .dr-agent-room-event-copy time{font-size:11px;color:var(--dr-muted)} #dayroom .dr-agent-room-event-copy time{margin-left:auto} #dayroom .dr-agent-room-event-text{font-size:13px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap} #dayroom .dr-agent-room-event-text :where(p,ul,ol){margin:0 0 8px} #dayroom .dr-agent-room-controls{position:sticky;top:12px} #dayroom .dr-agent-room-composer{display:grid;gap:10px;margin-top:12px} #dayroom .dr-agent-room-list-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:var(--dr-muted);font-size:12px} #dayroom .dr-agent-room-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px;padding:0;border:0} #dayroom .dr-agent-room-choices legend{margin-bottom:8px;font-size:12px;font-weight:700} #dayroom .dr-agent-room-choice{display:grid;grid-template-columns:20px 48px minmax(0,1fr);align-items:center;gap:8px;padding:8px;background:var(--dr-soft);border:1px solid var(--dr-line);border-radius:10px} #dayroom .dr-agent-room-choice-art{display:grid;place-items:center;width:48px;height:48px;overflow:hidden;border-radius:8px;background:var(--dr-panel)} #dayroom .dr-agent-room-choice-art canvas{width:48px;height:48px;image-rendering:pixelated} #dayroom .dr-agent-room-choice-art .dr-agent-room-companion{padding:5px} #dayroom .dr-agent-room-choice>span:last-child{display:grid;min-width:0} #dayroom .dr-agent-room-choice strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px} #dayroom .dr-agent-room-choice small{color:var(--dr-muted);font-size:11px} #dayroom .dr-agent-room-review{border:2px solid var(--dr-accent)} #dayroom .dr-agent-room-review-flag{display:inline-block;margin-bottom:8px;padding:4px 7px;background:var(--dr-accent);color:var(--dr-accent-ink,#243c34);border-radius:6px;font-family:'Silkscreen',monospace;font-size:9px;text-transform:uppercase} #dayroom .dr-agent-room-review h3{font-size:15px;font-weight:800;margin-bottom:4px} #dayroom .dr-agent-room-review p{color:var(--dr-muted);font-size:12px} #dayroom .dr-agent-room-review dl{display:grid;gap:10px;margin:14px 0} #dayroom .dr-agent-room-review dl>div{display:grid;gap:4px} #dayroom .dr-agent-room-review dt{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--dr-muted)} #dayroom .dr-agent-room-review dd{margin:0} #dayroom .dr-agent-room-review pre{max-height:190px;margin:0;padding:10px;overflow:auto;background:var(--dr-sunken);border:1px solid var(--dr-line);border-radius:8px;color:var(--dr-ink);font:11px/1.45 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;overflow-wrap:anywhere} @media(max-width:900px){#dayroom .dr-agent-room-layout{grid-template-columns:1fr}#dayroom .dr-agent-room-controls{position:static}} @media(max-width:600px){ #dayroom .dr-hub-sidebar{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin} #dayroom .dr-hub-sidebar>.dr-seg{flex:0 0 max-content;width:max-content} #dayroom .dr-agent-room-choices{grid-template-columns:1fr} #dayroom .dr-agent-room-stage{min-height:292px} #dayroom .dr-agent-room-roster{min-height:292px;padding:112px 24px 30px;gap:18px} #dayroom .dr-agent-lab-screen.is-left{left:22px}#dayroom .dr-agent-lab-screen.is-right{right:22px} #dayroom .dr-agent-lab-console{display:none} #dayroom .dr-agent-room-person{min-width:104px} } .dr-workforce-evidence { white-space:pre-wrap; overflow-wrap:anywhere; max-height:28rem; overflow:auto; border:1px solid var(--dr-line); border-radius:8px; padding:12px; background:var(--dr-bg); font-size:12px; line-height:1.6; } .dr-workforce-check { display:flex; gap:10px; align-items:center; min-height:40px; } .dr-workforce-check input { width:18px; height:18px; flex:none; } /* Plan 5: the "My desk" builder, the desk chooser and the office's "Customize desk" chip (office-studio.html section 2: .db-* and .dk-*). Chrome uses tokens. The scene is pixel art, so its name pills keep the office overlay's literal colours (office-overlay.css). Picture tiles, tabs and swatches are the character studio's .dp-* rules (people.css). This sheet loads after surfaces.css (build.py), so the desk page's width beats the anatomy's wide-page rule, which has the same specificity, and the scene fits 4× at 1440 × 900 (Decision 1). The builder brings the mockup's own paddings, so the page body has none. */ #dayroom .dr-modal:has(>#dr-modal-body>.dr-page[data-page="desk"]){width:min(1136px,calc(100vw - 48px))} #dayroom #dr-modal-body>.dr-page[data-page="desk"]>.dr-page-body{padding:0} /* Short windows, as the character studio does it (people.css): the dialog stops at 100dvh − 88px, and the page body would scroll the whole builder, its bottom bar (Reset, Save) included, out of view. The builder takes the page body's height instead and keeps the bottom bar on screen; its body keeps the mockup's 480 px while the window has room for that, the 60 px page head and the 61 px bottom bar (88 + 60 + 61 = 209), and otherwise shrinks to the room left, where the scene column and the picture panel scroll. */ #dayroom #dr-desk-builder{flex:1 1 auto;min-height:0;display:flex;flex-direction:column} #dayroom .dd-builder{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0} #dayroom .dd-body{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:minmax(0,1fr);flex:1 1 auto;min-height:min(480px,calc(100dvh - 209px))} #dayroom .dd-scene{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;overflow:auto;padding:20px;border-right:1px solid var(--dr-line)} #dayroom .dd-scene>*{flex:none} #dayroom .dd-stage{position:relative;align-self:center;overflow:hidden;border-radius:14px;box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dd-canvas{display:block;image-rendering:pixelated} #dayroom .dd-pills{position:absolute;inset:0;pointer-events:none} #dayroom .dd-pill{position:absolute;transform:translate(-50%,-50%);height:22px;padding:0 9px;border-radius:11px;background:rgba(20,28,24,.84);color:#fff;font:800 12px/22px 'Manrope',system-ui,sans-serif;white-space:nowrap} #dayroom .dd-pill.is-you{background:#1F5A41} /* The builder's own paragraphs are scoped to .dd-builder: product.css's #dayroom .dr-modal p (1,1,1) would otherwise make the note 12px, the toast muted grey on lime and a failed save plain grey text. The error is the character studio's own .dp-error (people.css .dp-studio .dp-error: the app's .dr-error red in both schemes). */ #dayroom .dd-builder .dd-note,#dayroom .dd-builder .dd-count{margin:0;font-size:12.5px;font-weight:600;line-height:1.5;color:var(--dr-muted)} #dayroom .dd-builder .dp-error{margin:0;color:light-dark(#a13636,#f4b3ab);font-size:12.5px;font-weight:700} #dayroom .dd-right{display:flex;flex-direction:column;min-width:0;min-height:0} /* The mockup's tab row, group spacing and label gap (.dk-tabs, .dk-tab, .dk-group, .dk-label). The label is an h4 in a page, so surfaces.css's page reset (1,2,1) would otherwise take its 8px. */ #dayroom .dd-right .dp-tabs{gap:4px;padding:14px 18px 0} #dayroom .dd-right .dp-tab{padding:0 13px} #dayroom .dd-right .dp-group{margin:0 0 18px} #dayroom .dd-builder .dp-group>.dp-label{margin:0 0 8px} #dayroom .dd-right .dp-panel{padding:16px 18px 20px;max-height:440px} #dayroom .dd-none{margin-bottom:12px;font-size:22px;color:#A89C84} #dayroom .dd-bottom{display:flex;flex:none;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--dr-line)} #dayroom .dd-builder .dd-toast{position:absolute;right:22px;bottom:70px;z-index:5;margin:0;padding:10px 14px;border-radius:12px;background:var(--dr-lime);color:var(--dr-lime-ink);box-shadow:var(--dr-glass-shadow);font-size:13px;font-weight:800;opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s;pointer-events:none} #dayroom .dd-builder .dd-toast.is-shown{opacity:1;transform:none} @media (max-width:900px){#dayroom .dd-body{grid-template-columns:1fr;grid-template-rows:none;overflow:auto}#dayroom .dd-scene{min-height:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--dr-line)}#dayroom .dd-right{min-height:auto}} @media (prefers-reduced-motion:reduce){#dayroom .dd-builder .dd-toast{transition:none}} /* The Desks chooser and the office's "Customize desk" chip. */ #dayroom .dd-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} #dayroom .dd-choice{display:grid;justify-items:center;gap:4px;min-width:0;padding:10px 6px;border:0;border-radius:12px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink);font:inherit;cursor:pointer} #dayroom .dd-choice[aria-pressed="true"]{background:var(--dr-sel);box-shadow:inset 0 0 0 2px var(--dr-accent)} #dayroom .dd-choice:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px} #dayroom .dd-choice canvas{width:72px;height:76px;image-rendering:pixelated} #dayroom .dd-choice strong{font-size:13px;font-weight:800} #dayroom .dd-choice span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:700;color:var(--dr-muted)} /* A claim that fails says so in the builder's error red: surfaces.css's #dayroom .dr-card-body>p (1,1,1) would otherwise give it the card's body text. */ #dayroom .dr-page[data-page="desks"] .dr-card-body>p.dr-error{color:light-dark(#a13636,#f4b3ab);font-size:12.5px;font-weight:700} /* While a claim works, the chooser's controls stay focusable (aria-disabled) and look like disabled ones. */ #dayroom .dr-page[data-page="desks"] :is(.dd-choice,.dr-button)[aria-disabled="true"]{cursor:default;opacity:.5} #dayroom .dr-window .dr-desk-chip{top:auto;bottom:12px;left:50%;transform:translateX(-50%);cursor:pointer} @media (max-width:640px){#dayroom .dd-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} /* Plan 5: the owner's Office theme card in Workspace settings (office-studio.html section 3: .th-card, .th-box, .th-map, .th-prompt). Tokens only; surfaces.css styles the tiles themselves (.dr-office-theme-tile). The first rule repeats surfaces Task 3's three-row tile template: this sheet loads after surfaces.css, so the blurb row never depends on load order (pre-flight S7). */ #dayroom .dr-office-theme-tile{grid-template-areas:"preview" "name" "desc"} #dayroom .dr-office-theme-tile .dr-tile-desc{grid-area:desc;display:block;margin-top:3px;font-size:12.5px;font-weight:600;line-height:1.45;color:var(--dr-muted)} /* The mockup's spacing (.th-grid, .th-box h4, .th-box p). Scoped to the card, since the anatomy's rules tie or beat a plain class rule: .dr-tiles sets a 12px gap, surfaces.css's page reset (1,2,1) takes the headings' 4px and its .dr-card-body p.dr-hint (1,2,1) sets 12px hints. */ #dayroom #dr-workspace-theme .dr-office-theme-tiles{gap:14px} /* Each box keeps its own height: stretched to the taller designer, the rooms box grew an empty block. */ #dayroom .dr-office-rows{display:grid;grid-template-columns:1.2fr 1fr;align-items:start;gap:18px;margin-top:18px} #dayroom .dr-office-box{min-width:0;padding:16px;border-radius:16px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom #dr-workspace-theme .dr-office-box h4{margin:0 0 4px;font-size:14px;font-weight:800;color:var(--dr-ink)} #dayroom #dr-workspace-theme .dr-office-box>p.dr-hint{margin:0 0 12px;font-size:12.5px} #dayroom .dr-office-map{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;font-size:13px;font-weight:700} #dayroom .dr-office-channel{color:var(--dr-ink)} #dayroom .dr-office-channel i{font-style:normal;color:var(--dr-faint)} #dayroom .dr-office-map select{height:34px;min-width:0;padding:0 12px;border-radius:10px;background:var(--dr-field);box-shadow:inset 0 0 0 1px var(--dr-field-line);color:var(--dr-ink-2);font:700 13px/34px 'Manrope',system-ui,sans-serif} /* Its own resting box-shadow is (1,1,1): specific enough to beat window.css's shared, :where()-wrapped focus ring (1,1,0) even while focused, so it never showed one. A matching :focus-visible override (1,2,1) wins the resting rule outright (fix round 1, Important 2). */ #dayroom .dr-office-map select:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:inset 0 0 0 1.5px var(--dr-accent),0 0 0 4px var(--dr-accent-soft)} #dayroom #dr-workspace-theme-status:empty{display:none} #dayroom #dr-workspace-theme-status{margin-top:12px} /* tabindex="-1" (fix round 2, Important 1) makes this a focus() target for Apply's announce(); the page title's own pattern (surfaces.css:8-9) keeps it silent for the programmatic/mouse focus that is announce()'s whole point, and only rings for a keyboard tab into it. */ #dayroom #dr-workspace-theme-status:focus{outline:none} #dayroom #dr-workspace-theme-status:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px;border-radius:4px} @media (max-width:900px){#dayroom .dr-office-rows{grid-template-columns:1fr}} #dayroom #dr-office-brief{display:block;width:100%;min-height:88px;padding:12px;border:0;border-radius:12px;background:var(--dr-field);box-shadow:inset 0 0 0 1px var(--dr-field-line);color:var(--dr-ink-2);font:600 13px/1.5 'Manrope',system-ui,sans-serif;resize:vertical} /* Same specificity hazard as the room selects above: (2,0,0) beats the shared (1,1,0) focus rule outright, so the textarea showed no ring at all when focused (fix round 1, Important 2, plan-mandated). A matching :focus-visible override, plus the app's own disabled look (button:disabled's opacity, matched here since a plain field has no such rule of its own) while it waits on the designer's availability or another action is busy (Minor 7). */ #dayroom #dr-office-brief:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:inset 0 0 0 1.5px var(--dr-accent),0 0 0 4px var(--dr-accent-soft)} #dayroom #dr-office-brief:disabled{opacity:.5} #dayroom #dr-office-designer .dr-form-actions{margin-top:12px} #dayroom #dr-office-status:empty{display:none} #dayroom #dr-office-status{margin-top:10px} /* Fix round 2, Minor: outline:none alone (2,0,0) beat the shared [tabindex]:focus-visible ring outright, so a keyboard Redesign or Undo focused the note but showed nothing. The page title's pattern (surfaces.css:8-9): silent on programmatic/mouse focus (announce() uses this every time), a ring only for :focus-visible. */ #dayroom #dr-office-status:focus{outline:none} #dayroom #dr-office-status:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px;border-radius:4px} /* Whole-branch I9: a Windows contrast theme drops box-shadows, so the fields above would lose their focus ring (the transparent outline above is what it repaints) and the brief its only edge: its own border:0 outranks window.css's forced field edge, which the select already takes. */ @media (forced-colors:active){ #dayroom #dr-office-brief{border:1px solid CanvasText} } /* Appearance (settings-panels.js): Light / Dark / Match device as a radio group on the shared text segmented control, the "When your device is…" headings for Match device, and the user panel's pixel sun/moon. Tokens only. */ #dayroom .dr-seg.is-text>button[role="radio"][aria-checked="true"]{background:var(--dr-panel);color:var(--dr-ink);box-shadow:0 1px 2px rgba(0,0,0,.10),0 0 0 1px var(--dr-line)} #dayroom .dr-seg.is-text>button[role="radio"]:hover{color:var(--dr-ink)} #dayroom .dr-appearance-modes>button{height:32px;padding:0 14px;line-height:32px} #dayroom .dr-appearance-modes svg.dr-i{width:16px;height:16px} #dayroom .dr-settings-colours p.dr-appearance-hint{margin:8px 0 0} #dayroom .dr-settings-colours h4.dr-theme-group-title{margin:0 0 8px;font-size:12.5px;font-weight:800;color:var(--dr-muted)} #dayroom .dr-settings-colours .dr-theme-grid+h4.dr-theme-group-title{margin-top:16px} #dayroom .dr-upanel #dr-upanel-scheme{margin-right:-6px} @media (forced-colors:active){#dayroom .dr-seg.is-text>button[role="radio"][aria-checked="true"]{outline:2px solid Highlight;outline-offset:-2px}} /* Companion-led onboarding: the tour's speaker, the companion's welcome message, Get started and feature tips. Palette tokens only, so every surface follows the person's own Appearance. No new fonts, no motion. */ #dayroom .dr-tour-companion-line{display:flex;align-items:center;gap:10px;margin:0;color:var(--dr-ink-2);font-size:13.5px;font-weight:600;line-height:1.45} #dayroom .dr-tour-companion-line .dr-companion-dp,#dayroom .dr-tour-speaker .dr-companion-dp{flex:none;width:32px;height:32px;border-radius:9px} #dayroom .dr-tour-speaker{display:inline-flex;align-items:center;gap:8px} #dayroom .dr-tour-speaker .dr-companion-dp{width:24px;height:24px;border-radius:7px} #dayroom .dr-companion-welcome .dr-cw-body p{margin:0 0 8px} #dayroom .dr-cw-abilities{margin:0 0 10px;padding-left:18px;color:var(--dr-ink-2)} #dayroom .dr-cw-abilities li{margin:2px 0} #dayroom .dr-cw-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px} #dayroom .dr-cw-chip{min-height:32px;padding:6px 12px;border:1px solid var(--dr-line-2);border-radius:999px;background:var(--dr-panel);color:var(--dr-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer} #dayroom .dr-cw-chip:hover{background:var(--dr-hover);border-color:var(--dr-accent)} #dayroom .dr-cw-chip:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px} #dayroom p.dr-cw-closing{margin:0;color:var(--dr-muted);font-weight:600} #dayroom .dr-get-started{margin-top:10px;padding:12px 14px;border:1px solid var(--dr-line);border-radius:12px;background:var(--dr-sunken);color:var(--dr-ink)} #dayroom .dr-gs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px} #dayroom .dr-gs-title{margin:0;font-size:14px;font-weight:800} #dayroom .dr-gs-count{color:var(--dr-muted);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums} /* A stepped pixel meter: one square per step, crisp and flat. */ #dayroom .dr-gs-meter{display:flex;gap:3px;margin:8px 0 6px} #dayroom .dr-gs-pip{width:14px;height:6px;background:var(--dr-line-2)} #dayroom .dr-gs-pip.is-on{background:var(--dr-accent)} #dayroom p.dr-gs-finished{margin:4px 0;color:var(--dr-ink-2);font-weight:700} #dayroom .dr-gs-list{display:grid;gap:2px;margin:4px 0 0;padding:0;list-style:none} #dayroom .dr-gs-item{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 0} #dayroom .dr-gs-check{flex:none;display:grid;place-items:center;width:18px;height:18px;border:2px solid var(--dr-line-2);border-radius:4px;color:var(--dr-accent-ink);background:var(--dr-panel)} #dayroom .dr-gs-item.is-done .dr-gs-check{border-color:var(--dr-accent);background:var(--dr-accent)} #dayroom .dr-gs-check .dr-i{width:12px;height:12px} #dayroom .dr-gs-text{display:grid;flex:1;min-width:0} #dayroom .dr-gs-name{font-size:13.5px;font-weight:700} #dayroom .dr-gs-item.is-done .dr-gs-name{color:var(--dr-muted);text-decoration:line-through} #dayroom .dr-gs-hint{color:var(--dr-muted);font-size:12.5px} #dayroom .dr-gs-action{flex:none} #dayroom .dr-gs-foot{display:flex;justify-content:flex-end;margin-top:6px} #dayroom .dr-feature-tip-slot[hidden]{display:none} #dayroom .dr-feature-tip{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--dr-accent);border-radius:12px;background:var(--dr-accent-soft);color:var(--dr-ink)} #dayroom .dr-feature-tip .dr-companion-dp{flex:none;width:32px;height:32px;border-radius:9px} #dayroom .dr-feature-tip-body{display:grid;gap:4px;min-width:0} #dayroom p.dr-feature-tip-title{margin:0;font-size:14px;font-weight:800} #dayroom p.dr-feature-tip-text{margin:0;color:var(--dr-ink-2);font-size:13px;line-height:1.45} #dayroom .dr-feature-tip-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} @media (max-width:560px){#dayroom .dr-gs-item{flex-wrap:wrap}#dayroom .dr-gs-action{margin-left:28px}} @media (forced-colors:active){#dayroom .dr-gs-pip.is-on,#dayroom .dr-gs-item.is-done .dr-gs-check{background:Highlight}#dayroom .dr-feature-tip,#dayroom .dr-cw-chip{border-color:CanvasText}} /* WhatsApp import: three short steps, big targets, pictures instead of paragraphs (whatsapp-flow.js). */ #dayroom .dr-wa-flow{gap:16px} #dayroom .dr-wa-steps3{gap:6px 8px} #dayroom .dr-wa-head{display:grid;gap:4px} #dayroom .dr-wa-title{font-size:20px;font-weight:800;line-height:1.2;color:var(--dr-ink);letter-spacing:-.01em} #dayroom .dr-wa-title:focus{outline:none} #dayroom .dr-modal .dr-wa-line,#dayroom .dr-wa-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;color:var(--dr-muted);font-size:14px;line-height:1.4} #dayroom .dr-modal .dr-wa-note,#dayroom .dr-wa-note{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;color:var(--dr-muted);font-size:13px} #dayroom .dr-wa-note.is-warn{color:var(--dr-ink)} /* "?" opens a one-line explanation in place: works with touch, keyboard and screen readers. */ #dayroom .dr-wa-help{display:inline-block;position:relative} #dayroom .dr-wa-help>summary{list-style:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink);font:400 10px/1 'Silkscreen',monospace;cursor:pointer} #dayroom .dr-wa-help>summary::-webkit-details-marker{display:none} #dayroom .dr-wa-help>summary:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px} #dayroom .dr-wa-help[open]{display:block;flex-basis:100%} #dayroom .dr-wa-help[open]>summary{background:var(--dr-accent);color:var(--dr-accent-ink);box-shadow:none} #dayroom .dr-modal .dr-wa-help>p,#dayroom .dr-wa-help>p{margin:6px 0 0;padding:8px 10px;border-radius:10px;background:var(--dr-sunken);color:var(--dr-ink);font-size:13px;line-height:1.45;max-width:46ch} /* Step 1: the phone steps as pixel pictures. */ #dayroom .dr-wa-guide{display:grid;gap:10px;justify-items:start} #dayroom .dr-wa-howto{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin:0;padding:0;list-style:none} #dayroom .dr-wa-howto li{display:grid;justify-items:center;gap:6px;padding:10px 6px;border-radius:12px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line);text-align:center;font-size:12.5px;font-weight:700;line-height:1.25;color:var(--dr-ink)} #dayroom .dr-wa-howto b{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:2px;border-radius:5px;background:var(--dr-accent);color:var(--dr-accent-ink);font:400 9px/1 'Silkscreen',monospace;vertical-align:1px} #dayroom .dr-wa-art{display:block;width:64px;height:104px;image-rendering:pixelated} #dayroom .dr-wa-art .px-k{fill:light-dark(#243c34,#a9b8ad)} #dayroom .dr-wa-art .px-s{fill:light-dark(#ffffff,#e9eee8)} #dayroom .dr-wa-art .px-d{fill:light-dark(#8d9a92,#6b766f)} #dayroom .dr-wa-art .px-g{fill:#1a8f4c} #dayroom .dr-wa-art .px-w{fill:#ffffff} #dayroom .dr-wa-art .px-l{fill:#b9c4bc} #dayroom .dr-wa-art .px-b{fill:#dfe6e0} #dayroom .dr-wa-art .px-m{fill:#bfe8c9} #dayroom .dr-wa-art .px-p{fill:#ffffff} #dayroom .dr-wa-art .px-a{fill:#7fa595} #dayroom .dr-wa-art .px-h{fill:#f6d76b} #dayroom .dr-wa-art .px-f{fill:#243c34} #dayroom .dr-wa-flow .dr-wa-drop{min-height:0;gap:8px;padding:16px;border-radius:14px} #dayroom .dr-wa-drop.dragging{box-shadow:inset 0 0 0 2px var(--dr-accent)} #dayroom .dr-modal .dr-wa-droptext,#dayroom .dr-wa-droptext{margin:0;color:var(--dr-muted);font-size:12.5px} #dayroom .dr-wa-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} #dayroom .dr-wa-cta:empty{display:none} #dayroom .dr-wa-flow .dr-wa-cta .dr-button{min-height:44px;padding:0 18px;font-size:14px;border-radius:12px} #dayroom .dr-wa-kicker{display:inline-flex;width:fit-content;margin:0 0 6px;padding:5px 8px;border-radius:7px;background:var(--dr-accent-soft);color:var(--dr-accent-text);font:400 10px/1.2 'Silkscreen',monospace;letter-spacing:.06em;text-transform:uppercase} #dayroom .dr-wa-job{width:100%;text-align:left} /* "More options": everything the old review asked, folded away. */ #dayroom .dr-wa-more{border-radius:12px;box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-wa-more>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;cursor:pointer;color:var(--dr-ink);font-size:13.5px;font-weight:800;list-style:none} #dayroom .dr-wa-more>summary::-webkit-details-marker{display:none} #dayroom .dr-wa-more>summary::before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line-2);font:400 10px/1 'Silkscreen',monospace} #dayroom .dr-wa-more[open]>summary::before{content:"-"} #dayroom .dr-wa-more>summary:focus-visible{outline:2px solid var(--dr-accent);outline-offset:-2px;border-radius:12px} #dayroom .dr-wa-more-body{display:grid;gap:12px;padding:0 14px 14px} #dayroom .dr-wa-details{box-shadow:none} #dayroom .dr-wa-details>summary{min-height:32px;padding:0;font-size:12.5px;color:var(--dr-muted)} #dayroom .dr-wa-detail{margin:0;padding:0 0 0 18px;color:var(--dr-muted);font-size:12.5px;display:grid;gap:2px} #dayroom .dr-wa-fieldset{display:grid;gap:8px;margin:0;padding:12px;border:0;border-radius:10px;background:var(--dr-sunken)} #dayroom .dr-wa-fieldset>legend{float:left;width:100%;padding:0;margin-bottom:4px;font-size:12.5px;font-weight:800;color:var(--dr-ink)} #dayroom .dr-wa-fieldset>summary{cursor:pointer;font-size:12.5px;font-weight:800;color:var(--dr-ink)} #dayroom .dr-wa-fieldset .dr-field{margin-bottom:0} #dayroom .dr-wa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} /* Step 2 */ #dayroom .dr-wa-flow .dr-wa-phase{font-size:16px;font-weight:800;color:var(--dr-ink);margin:0 0 8px} #dayroom .dr-wa-problem{display:grid;gap:10px;justify-items:start;padding:14px;border-radius:12px;background:light-dark(#fff4dc,#2d2716);box-shadow:inset 0 0 0 1px light-dark(#ecd49a,#5a4a22)} #dayroom .dr-modal .dr-wa-problem p,#dayroom .dr-wa-problem p{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;color:var(--dr-ink);font-size:14px} #dayroom .dr-wa-error:empty{display:none} /* The one question */ #dayroom .dr-wa-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} #dayroom .dr-wa-choice{min-height:72px;padding:12px;border:0;border-radius:14px;background:var(--dr-panel);box-shadow:inset 0 0 0 1.5px var(--dr-line-2),0 2px 0 var(--dr-line-2);color:var(--dr-ink);font-size:18px;font-weight:800} #dayroom .dr-wa-choice:hover{box-shadow:inset 0 0 0 2px var(--dr-accent),0 2px 0 var(--dr-line-2)} #dayroom .dr-wa-choice:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px} /* Step 3: Which one is you? */ #dayroom .dr-wa-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;max-height:min(46vh,420px);overflow:auto;padding:2px} #dayroom .dr-wa-person{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;min-height:56px;padding:8px 10px;border:0;border-radius:12px;background:var(--dr-panel);box-shadow:inset 0 0 0 1px var(--dr-line-2);color:var(--dr-ink);text-align:left} #dayroom .dr-wa-person:hover:not([aria-disabled=true]){box-shadow:inset 0 0 0 2px var(--dr-accent)} #dayroom .dr-wa-person:focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px} #dayroom .dr-wa-person[aria-pressed=true]{background:var(--dr-accent-soft);box-shadow:inset 0 0 0 2px var(--dr-accent)} #dayroom .dr-wa-avatar{grid-row:1 / span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--wa-tone,#2f6f5e);color:#fff;font:400 13px/1 'Silkscreen',monospace;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)} #dayroom .dr-wa-person-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:800} #dayroom .dr-wa-person-count{color:var(--dr-muted);font-size:12px;font-weight:600} #dayroom .dr-wa-pager{justify-content:center} #dayroom .dr-wa-pager:not(:has(.dr-button:not([hidden]))){display:none} /* Done */ #dayroom .dr-wa-done{display:flex;align-items:center;gap:16px} #dayroom .dr-wa-done .dr-wa-art{flex:none;width:48px;height:78px} #dayroom .dr-wa-invite{display:grid;gap:10px;padding:14px;border-radius:12px;background:var(--dr-sunken)} #dayroom .dr-wa-invite .dr-field{margin:0} #dayroom .dr-wa-qrbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 24px} #dayroom .dr-wa-qrsteps{display:grid;gap:8px;margin:0;padding-left:22px;font-size:15px;font-weight:700;color:var(--dr-ink)} @media(max-width:560px){ #dayroom .dr-wa-howto{grid-template-columns:repeat(2,minmax(0,1fr))} #dayroom .dr-wa-title{font-size:18px} #dayroom .dr-wa-people{grid-template-columns:1fr;max-height:none} #dayroom .dr-wa-flow .dr-wa-cta .dr-button{flex:1 1 100%} #dayroom .dr-wa-grid{grid-template-columns:1fr} } @media(forced-colors:active){ #dayroom .dr-wa-person[aria-pressed=true]{outline:2px solid Highlight} #dayroom .dr-wa-art{forced-color-adjust:none} } #dayroom .dr-wa-flow a.dr-button{text-decoration:none} /* The status line above the bar names the work; the bar's own label stays for screen readers only. */ #dayroom .dr-wa-flow .dr-progress-label>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #dayroom .dr-wa-flow .dr-progress-label{justify-content:flex-end} /* Manage group: the same person cards, with a real checkbox so a form saves several names. */ #dayroom .dr-wa-person-check{grid-template-columns:40px minmax(0,1fr) auto;cursor:pointer} #dayroom .dr-wa-person-check>input{grid-column:3;grid-row:1 / span 2;width:20px;height:20px;accent-color:var(--dr-accent)} #dayroom .dr-wa-person-check:has(input:checked){background:var(--dr-accent-soft);box-shadow:inset 0 0 0 2px var(--dr-accent)} #dayroom .dr-wa-person-check:has(input:focus-visible){outline:2px solid var(--dr-accent);outline-offset:2px} #dayroom .dr-wa-person-check[aria-disabled=true]{cursor:default;opacity:.6} #dayroom .dr-wa-perspective .dr-wa-people{margin:10px 0} #dayroom .dr-wa-fieldset .dr-wa-check{display:flex;align-items:center;gap:8px;margin:0;font-size:13px} #dayroom .dr-wa-person-check:not(:has(.dr-wa-person-count)) .dr-wa-person-name{grid-row:1 / span 2} /* Manage group on a phone: the title keeps its line; Refresh and Back move underneath it. */ @media(max-width:560px){ #dayroom .dr-wa-page .dr-page-head{flex-wrap:wrap;padding-right:44px} #dayroom .dr-wa-page .dr-page-titles{flex-basis:100%} #dayroom .dr-wa-page .dr-page-actions{justify-content:flex-start} } /* Import a community (whatsapp-community-ui.js) and the Drive entry point. */ #dayroom .dr-wa-alt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;color:var(--dr-muted);font-size:13px} #dayroom .dr-wa-groups{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none} #dayroom .dr-wa-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap} #dayroom .dr-wa-group .dr-li-body{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:4px} #dayroom .dr-wa-group-actions{display:flex;align-items:center;gap:8px;margin-left:auto} #dayroom .dr-section-option{display:flex;align-items:center;gap:8px} @media (max-width:480px){#dayroom .dr-wa-group-actions{margin-left:0}} /* Doorway: the approved sign-in and sign-up screen (auth.html, direction B), over the showroom of the three office themes. Values are the mockup's (window-doorway-reference.md §1.2, §3). Loaded after window.css. Hidden elements rely on product.css's #dayroom [hidden]{display:none!important}. */ /* Doorway glass: a touch denser than Window's, with a deeper shadow and a 22px blur. */ #dayroom{--dr-door-glass:light-dark(rgba(255,255,255,.82),rgba(16,20,18,.84));--dr-door-glass-shadow:0 24px 60px -12px rgba(24,40,30,.35)} @media (prefers-color-scheme:dark){#dayroom:not([data-scheme]){--dr-door-glass-shadow:0 30px 70px -12px rgba(0,0,0,.7)}} #dayroom[data-scheme="dark"]{--dr-door-glass-shadow:0 30px 70px -12px rgba(0,0,0,.7)} #dayroom[data-scheme="light"]{--dr-door-glass-shadow:0 24px 60px -12px rgba(24,40,30,.35)} #dayroom :is(#dr-door,#dr-auth,#dr-workspaces) .dr-glass{background:var(--dr-door-glass);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--dr-door-glass-shadow),inset 0 0 0 1px var(--dr-glass-line)} /* The stage (.auth-b): the showroom canvas, a wash behind the card, the evening vignette and the bottom shade. */ body:has(#dayroom[data-screen]){margin:0;padding:0;overflow:hidden} #dayroom[data-screen]{max-width:none;margin:0;min-height:100dvh} #dayroom .dr-door{position:fixed;inset:0;z-index:0;isolation:isolate;overflow:hidden;background-color:light-dark(#E8F0D3,#1B231E);--dr-door-wash:linear-gradient(90deg,transparent 45%,light-dark(rgba(244,249,236,.3),rgba(8,12,10,.4)) 80%)} /* The hand-over to the office (product-app.js doorway()): the stage lifts above the shell (which comes later in the DOM at the same level) and fades out while the showroom keeps moving, then is hidden. Modals (z 10+) stay on top. Reduced motion skips the fade in script, and here too. */ #dayroom .dr-door{transition:opacity .32s ease-out} #dayroom .dr-door.is-leaving{z-index:4;opacity:0;pointer-events:none} @media (prefers-reduced-motion:reduce){#dayroom .dr-door{transition:none}} #dayroom .dr-door-world{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;image-rendering:pixelated} #dayroom .dr-door::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--dr-door-wash),radial-gradient(ellipse 60% 70% at 72% 50%,light-dark(rgba(12,16,14,.10),rgba(6,9,8,.45)),light-dark(rgba(12,16,14,.35),rgba(6,9,8,.72)))} #dayroom .dr-door::after{content:'';position:absolute;left:0;right:0;bottom:0;height:55%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(8,14,11,.55))} #dayroom .dr-door-top{position:absolute;left:28px;top:24px;right:28px;z-index:2;display:flex;align-items:center;justify-content:space-between} /* AGENTS.md "One workspace logo": Dayroom's own mark is a signed-out (or before-any-workspace) logo. Once someone already has a workspace, product-app.js's updateHasWorkspaces() sets this flag from state.user && state.workspaces.length, so every Doorway card steps the wordmark aside -- the loading and error cards and a password reset included, not just the chooser's own list (a :has() on #dr-space-existing would only ever match the chooser itself, since that element's markup doesn't exist on the others). Sign-up's Your team card starts with no workspaces yet, so it keeps the wordmark until the first one exists. */ #dayroom[data-has-workspaces] .dr-door-top{display:none} #dayroom .dr-door-wordmark{flex:none;width:112px;height:112px} #dayroom .dr-door-logo{display:block;width:100%;height:100%;object-fit:contain} @media(max-width:600px){#dayroom .dr-door-wordmark{width:80px;height:80px}} /* The showroom's overlay (doorway-world.js): Card bubbles from office-overlay.css on 0 × 0 anchors, and a glass label per office in the top bar. Both sit above the vignette and never take clicks. */ #dayroom .dr-door-bubbles{z-index:2} #dayroom .dr-door-anchor{position:absolute;left:0;top:0;width:0;height:0} #dayroom .dr-door-labels{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none} #dayroom .dr-door-label{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px 0 12px;border-radius:999px;font-size:12.5px;font-weight:800;color:var(--dr-ink);white-space:nowrap} #dayroom .dr-door-label::before{content:'';flex:none;width:6px;height:6px;background:var(--dr-accent);box-shadow:0 0 0 2px var(--dr-accent-soft)} #dayroom .dr-door-quote{position:absolute;left:56px;bottom:52px;z-index:2;color:#fff} #dayroom .dr-door-quote p{margin:0;font-size:44px;font-weight:800;letter-spacing:-0.035em;line-height:1.05;text-shadow:0 4px 24px rgba(0,0,0,.35)} #dayroom .dr-door-quote small{display:block;margin-top:12px;font-size:15px;font-weight:700;opacity:.9;text-shadow:0 2px 10px rgba(0,0,0,.3)} /* The card (.card.glass): one per screen, in a host that lets clicks through everywhere else. Its position and width are mirrored by DayroomDoorwayWorld.cardLeft(); change both together. */ #dayroom :is(#dr-auth,#dr-workspaces){position:fixed;inset:0;z-index:3;pointer-events:none} #dayroom .dr-door-card{pointer-events:auto;position:absolute;right:96px;top:50%;transform:translateY(-50%);box-sizing:border-box;width:480px;max-height:calc(100dvh - 32px);overflow-y:auto;padding:36px 40px 30px;border-radius:24px;color:var(--dr-ink);font-size:14px;line-height:1.45} #dayroom .dr-door-loading{padding:28px 40px} #dayroom .dr-door-loading .dr-door-eyebrow{margin-bottom:12px} #dayroom :is(#dr-auth,#dr-workspaces) :is(button,a):focus-visible{outline:2px solid var(--dr-accent);outline-offset:2px} /* Form pieces (§3.4). */ #dayroom .dr-door-eyebrow{display:inline-flex;align-items:center;gap:8px;font:400 10px 'Silkscreen',monospace;letter-spacing:.06em;color:var(--dr-accent-text);background:var(--dr-accent-soft);padding:6px 10px;border-radius:8px;margin-bottom:18px} #dayroom .dr-door-h1{margin:0;font-size:34px;font-weight:800;letter-spacing:-0.03em;line-height:1.1;color:var(--dr-ink);outline:none} /* The heading takes focus only so a screen reader announces the new card. Scoped through the hosts so the shared [tabindex]:focus-visible ring (workspace-shell.css) can't outrank the outline:none above. */ #dayroom :is(#dr-auth,#dr-workspaces) .dr-door-h1:focus-visible{outline:none} /* Minor 1: margin:0 left no gap under the headline (.dr-door-h1); the mockup keeps 10px, cramping every card. */ #dayroom .dr-door-lede{margin:10px 0 0;color:var(--dr-muted);font-size:15px;font-weight:500;line-height:1.5} #dayroom .dr-door-steps{display:flex;gap:6px;margin:22px 0 0} /* Minor 1: --dr-faint reads at 2.3-3.3:1 here, below AA; --dr-muted is the same fix the message times already use. */ #dayroom .dr-door-steps>span{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--dr-muted)} #dayroom .dr-door-steps>span b{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;background:var(--dr-sunken);color:var(--dr-muted);box-shadow:inset 0 0 0 1px var(--dr-line-2)} #dayroom .dr-door-steps>span.is-on{color:var(--dr-ink)} #dayroom .dr-door-steps>span.is-on b{background:var(--dr-accent);color:var(--dr-accent-ink);box-shadow:none} #dayroom .dr-door-steps>i{width:18px;height:1px;background:var(--dr-line-2);align-self:center} #dayroom .dr-door-google-wrap{margin-top:26px} #dayroom .dr-door-google{width:100%;height:46px;border:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:800;font-size:14px;background:var(--dr-field);box-shadow:inset 0 0 0 1px var(--dr-line-2),0 1px 2px rgba(0,0,0,.04);color:var(--dr-ink);cursor:pointer} #dayroom .dr-door-gl{display:block;flex:none} /* An opaque, palette-matched backing keeps this text readable over the moving office. */ #dayroom .dr-door-or{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:12px;font-weight:700;color:var(--dr-muted)} #dayroom .dr-door-or>span{padding:3px 8px;border-radius:6px;background:var(--dr-panel)} #dayroom .dr-door-or::before,#dayroom .dr-door-or::after{content:'';flex:1;height:1px;background:var(--dr-line)} #dayroom .dr-door-field{margin-top:14px} /* A card with no steps or Google block (recovery) keeps the lede's usual 26px gap before its first field. */ #dayroom .dr-door-lede+form>.dr-door-field:first-child{margin-top:26px} #dayroom .dr-door-flabel{display:flex;justify-content:space-between;margin:0 0 7px;font-size:13px;font-weight:800;color:var(--dr-ink-2)} #dayroom .dr-door-link{padding:0;border:0;background:none;font:inherit;font-weight:800;color:var(--dr-accent-text);text-decoration:none;cursor:pointer} #dayroom .dr-door-input{height:46px;border-radius:12px;background:var(--dr-field);box-shadow:inset 0 0 0 1px var(--dr-field-line);display:flex;align-items:center;padding:0 14px;font-size:14.5px;font-weight:600;color:var(--dr-ink)} #dayroom .dr-door-input:focus-within{box-shadow:inset 0 0 0 1.5px var(--dr-accent),0 0 0 4px var(--dr-accent-soft)} /* The inner input's reset is scoped through the hosts so it outranks any global field rule (plan 1 Task 9). */ #dayroom :is(#dr-auth,#dr-workspaces) .dr-door-input input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font:inherit;color:inherit;outline:none} /* I9: the wrapper's own ring above is pure box-shadow, invisible to a contrast theme, and the actual focused element is this inner input, not the wrapper -- a transparent outline only gets a theme's own paint when it sits on a :focus-visible rule for the element that is itself focused. outline:none above still wins at rest (same specificity, earlier in the file), so this only ever shows while focused. */ #dayroom :is(#dr-auth,#dr-workspaces) .dr-door-input input:focus-visible{outline:2px solid transparent;outline-offset:2px} /* Minor 1: --dr-faint reads at 2.3-3.3:1 here, below AA; --dr-muted is the same fix the message times already use. */ #dayroom :is(#dr-auth,#dr-workspaces) .dr-door-input input::placeholder{color:var(--dr-muted);font-weight:500;opacity:1} #dayroom :is(#dr-auth,#dr-workspaces) .dr-door-input input:autofill{-webkit-text-fill-color:var(--dr-ink);caret-color:var(--dr-ink);box-shadow:0 0 0 1000px var(--dr-field) inset} #dayroom .dr-door-show{margin-left:auto;padding:0 0 0 10px;border:0;background:none;font:inherit;font-size:12.5px;font-weight:800;color:var(--dr-muted);cursor:pointer} #dayroom .dr-door-meter{display:flex;gap:5px;margin-top:9px;align-items:center} #dayroom .dr-door-meter i{height:4px;flex:1;border-radius:2px;background:var(--dr-line-2)} #dayroom .dr-door-meter[data-level="1"] i:nth-child(1){background:var(--st-dnd)} #dayroom .dr-door-meter[data-level="2"] i:nth-child(-n+2){background:var(--st-working)} #dayroom .dr-door-meter[data-level="3"] i:nth-child(-n+3),#dayroom .dr-door-meter[data-level="4"] i{background:#3DAA6D} #dayroom .dr-door-meter span{margin-left:8px;font-size:12px;font-weight:700;color:var(--dr-muted);white-space:nowrap} #dayroom .dr-door-cta{margin-top:22px;width:100%;height:48px;border:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--dr-accent);color:var(--dr-accent-ink);font:inherit;font-weight:800;font-size:15px;box-shadow:0 8px 20px -8px rgba(31,90,65,.6),inset 0 -2px 0 rgba(0,0,0,.14);cursor:pointer} #dayroom .dr-door-cta svg.dr-i{width:18px;height:18px;stroke-width:2.2} #dayroom :is(.dr-door-cta,.dr-door-google,.dr-door-secondary):disabled{opacity:.65;cursor:wait} /* The chooser's own remaining controls (rows, tabs, the two footer links and Back) get the same busy look while setBusy() disables #dr-workspaces button,#dr-workspaces input during an "Opening …"/"Joining …" run. */ #dayroom #dr-workspaces :is(.dr-door-ws,.dr-door-seg button,.dr-door-link,.dr-door-back):disabled{opacity:.65;cursor:wait} #dayroom .dr-door-switch{margin:20px 0 0;text-align:center;font-size:13.5px;font-weight:600;color:var(--dr-muted)} #dayroom .dr-door-error{margin-top:14px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--st-dnd) 12%,transparent);color:light-dark(#A13636,#F4B3AB);font-size:13px;font-weight:700;line-height:1.45} #dayroom .dr-door-error:empty{display:none} #dayroom .dr-door-note{margin-top:18px;padding:12px 14px;border-radius:12px;background:var(--dr-accent-soft);color:var(--dr-accent-text);font-size:12.5px;font-weight:700;line-height:1.45} #dayroom .dr-door-note p{margin:0} #dayroom .dr-door-note>.dr-door-link{display:inline-block;margin-top:8px} /* When a browser blocks the sign-in tab, google-signin.js links it as a.dr-entry-link in this note. The old screen's lime link colour all but vanishes on the light note (1.07:1), so the link takes the note's own ink, underlined. */ #dayroom .dr-door-note .dr-entry-link{min-height:0;font:inherit;font-weight:800;color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:2px} /* Validation inside Doorway fields: the shared .dr-field-error box and input ring would clash with the glass. */ #dayroom .dr-door-field .dr-field-error{margin:7px 0 0;padding:0;border:0;background:none;font-size:12.5px;font-weight:700;line-height:1.4;color:light-dark(#A13636,#F4B3AB)} #dayroom :is(#dr-auth,#dr-workspaces) .dr-door-input input[aria-invalid="true"]{outline:none} #dayroom .dr-door-input:has(input[aria-invalid="true"]){box-shadow:inset 0 0 0 1.5px var(--st-dnd),0 0 0 4px color-mix(in srgb,var(--st-dnd) 16%,transparent)} /* Layers above the stage. */ #dayroom[data-screen] .dr-overlay{position:fixed;z-index:20} /* The #dr-live toast (say()): restores the placement and look the deleted entry-screen rule gave it, now on tokens so it reads in both schemes. Window T9 has landed and gives #dr-live a call-stage lift, #dayroom:has(#dr-callbox .dr-call-screen) #dr-live{bottom:126px}, specificity (3,1,0) -- #dr-callbox keeps that class whether or not the call screen is actually visible, so it still matches while a Doorway card covers #dr-product. Left alone, that lift beats the placement below (was (2,2,0)) whenever the chooser shows mid-call, and 126px from the bottom covers "Create workspace" or the name field. #dayroom named twice -- a deliberate repeat of the same simple selector, not a typo, worth exactly one more ID -- raises this rule to (3,2,0): it outranks the lift on ID count alone, unconditionally, rather than by hoping doorway.css keeps loading after window.css. Every position side is still set explicitly so nothing of T9's leaks through -- transform included: Window's own #dr-live sets translate(-50%, 6px) to centre under left:50%, and .is-shown animates it to translate(-50%, 0); left alone without transform:none here left that centring translate applied to left:24px instead, pushing the toast about half off the left edge (measured -158 to -181px at 800-1920px wide) and truncating every message, including the one-time recovery code's own Copy feedback. bottom sits at 8px rather than 16px so the toast clears the tagline's in the corner instead of overlapping it by 8px once the translate stopped pushing the toast down and to the right of where it visually landed before. */ #dayroom:is(#dayroom):is([data-screen=auth],[data-screen=workspaces]) #dr-live:not(:empty){position:fixed;top:auto;right:auto;bottom:8px;left:24px;transform:none;z-index:25;width:fit-content;max-width:calc(100% - 48px);padding:12px 16px;background:var(--dr-panel);border:1px solid var(--dr-line);border-radius:10px;color:var(--dr-ink);box-shadow:var(--dr-shadow);font-size:13px;font-weight:600} /* Smaller windows (the desktop app allows 900×650). Keep in step with DayroomDoorwayWorld.cardLeft(). */ @media (max-width:1279px){#dayroom .dr-door-card{right:48px}#dayroom .dr-door-quote p{font-size:36px}} @media (max-width:1023px){#dayroom .dr-door-quote{display:none}} /* Minor 11: below here the card centres instead of sitting right-aligned, sharing the wordmark's horizontal space (left:28px;right:28px, .dr-door-top above) for the first time. The base rule's top:50% only ever guaranteed 16px of clearance above the card once its max-height (100dvh - 32px) maxes out, well short of the wordmark's own ~50px (top:24px plus its pill), so the sign-up card -- three fields, Google and the step indicator, the tallest Doorway card -- crept up into it on a short, narrow window. top:88px anchors the card below the wordmark instead of centring through it, with max-height trimmed by the same 104px (88 clearance + 16 floor) so it still never runs off the bottom. */ @media (max-width:860px){#dayroom .dr-door-card{left:50%;right:auto;top:88px;transform:translateX(-50%);max-height:calc(100dvh - 104px);width:min(480px,calc(100vw - 32px));padding:28px 24px 24px}#dayroom .dr-door{--dr-door-wash:radial-gradient(ellipse 70% 60% at 50% 50%,light-dark(rgba(244,249,236,.3),rgba(8,12,10,.4)),transparent)}} /* The character studio needs room: a wide card, centred, the studio filling it. top:50% is repeated here (already the inherited value, same as the base rule above) only so this stays centred on its own once the narrow-card rule above starts setting top:88px: #dayroom + two classes outranks #dayroom + one regardless of load order, so this keeps the wide card's own, taller centring immune to that change. */ #dayroom .dr-door-card.is-wide{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:min(1080px,calc(100vw - 64px));height:min(780px,calc(100dvh - 48px));max-height:none;display:flex;flex-direction:column;overflow:hidden} #dayroom .dr-door-card.is-wide #dr-people-studio{flex:1;min-height:0;margin-top:18px} #dayroom .dr-door-card.is-wide .dp-studio{height:100%;min-height:0;max-height:none} #dayroom:has(.dr-door-card.is-wide) :is(.dr-door-quote,.dr-door-bubbles,.dr-door-labels){display:none} /* At people.css's one-column breakpoint the preview and the tabs/panel stack, needing more height than the wide card's own min-height:0 chain leaves them; without a floor the preview is squeezed to nothing. Let the card scroll instead, so Skip/Continue stay reachable even at 640×700. */ @media (max-width:820px){#dayroom .dr-door-card.is-wide{overflow-y:auto}#dayroom .dr-door-card.is-wide #dr-people-studio{min-height:560px}} /* ...and the studio takes its natural height there instead of filling the card, so none of its stacked rows (people.css) is squeezed and the card scrolls over all of it, its bottom padding still below Continue. */ @media (max-width:820px){#dayroom .dr-door-card.is-wide #dr-people-studio{flex:none}#dayroom .dr-door-card.is-wide .dp-studio{height:auto}} /* The recovery code: shown once, monospaced so every character reads clearly. */ #dayroom :is(#dr-auth,#dr-workspaces) .dr-door-input #dr-recovery-code{font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em} /* Your team. Tiles are the Window .ws-tile; the tabs are the Window .seg with text. */ #dayroom .dr-door-back{display:inline-flex;margin:0 0 16px;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:800;color:var(--dr-muted);cursor:pointer} #dayroom .dr-door-listhead{margin:22px 0 0} #dayroom .dr-door-wslist{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;padding:2px} #dayroom .dr-door-ws{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:var(--dr-field);box-shadow:inset 0 0 0 1px var(--dr-line-2);font:inherit;color:var(--dr-ink);text-align:left;cursor:pointer} /* The general button/a ring (line 44) sits at a 2px offset, outside the row's own border box. The list around it scrolls with only 2px of padding, so that ring fell almost entirely outside the scroller's clip and showed as four corner specks (WCAG 2.4.7). An inset ring stays inside the row's own box, so it's never clipped, whatever the list's padding. Needs the same #dr-auth,#dr-workspaces host wrapper as the general rule to outrank it: that rule is (2,1,1) on id count alone, so a bare .dr-door-ws:focus-visible (1,2,0) could never win the outline-offset property, no matter the load order. */ #dayroom :is(#dr-auth,#dr-workspaces) .dr-door-ws:focus-visible{outline-offset:-2px} #dayroom .dr-door-ws-tile{width:40px;height:40px;flex:none;border-radius:12px;background:#E8D8AA;color:#5B4520;display:grid;place-items:center;font:400 13px 'Silkscreen',monospace;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),inset 0 -3px 0 rgba(0,0,0,.08)} #dayroom .dr-door-ws b{display:block;font-size:15px;font-weight:800;letter-spacing:-0.01em} #dayroom .dr-door-ws small{display:block;font-size:12.5px;font-weight:600;color:var(--dr-muted)} #dayroom .dr-door-ws svg.dr-i{margin-left:auto;color:var(--dr-muted)} #dayroom .dr-door-seg{display:flex;margin-top:22px;padding:3px;border-radius:10px;background:var(--dr-sunken);box-shadow:inset 0 0 0 1px var(--dr-line)} #dayroom .dr-door-seg button{flex:1;height:34px;border:0;border-radius:7px;background:none;font:inherit;font-size:13px;font-weight:800;color:var(--dr-muted);cursor:pointer} #dayroom .dr-door-seg button[aria-selected="true"]{background:var(--dr-panel);color:var(--dr-ink);box-shadow:0 1px 2px rgba(0,0,0,.10),0 0 0 1px var(--dr-line)} #dayroom .dr-door-hint{margin:7px 0 0;font-size:12px;font-weight:600;line-height:1.45;color:var(--dr-muted)} #dayroom .dr-door-progress{margin:12px 0 0;font-size:12.5px;font-weight:700;color:var(--dr-accent-text)} #dayroom .dr-door-secondary{margin-top:10px;width:100%;height:46px;border:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;background:none;box-shadow:inset 0 0 0 1px var(--dr-line-2);font:inherit;font-weight:800;font-size:14px;color:var(--dr-ink);cursor:pointer} #dayroom .dr-door-account{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--dr-line)} #dayroom .dr-door-account canvas{width:30px;height:30px;flex:none;border-radius:9px} #dayroom .dr-door-account b{display:block;font-size:13px;font-weight:800;color:var(--dr-ink)} #dayroom .dr-door-account span{display:block;font-size:12px;font-weight:600;color:var(--dr-muted);overflow-wrap:anywhere} #dayroom .dr-door-account .dr-door-link{margin-left:auto;font-size:12.5px} /* I9: the entry field's edge above is box-shadow only, which a Windows contrast theme drops, leaving Email and Password with no visible boundary. */ @media (forced-colors:active){ #dayroom .dr-door-input{border:1px solid CanvasText} } #dr-billing-banner{margin:8px 12px;padding:10px 12px;border:1px solid var(--dr-line);border-radius:10px;background:var(--dr-panel);font-size:12px;line-height:1.5} #dr-billing-banner[hidden]{display:none} #dr-billing-banner .dr-button{margin-top:6px;width:100%} .dr-billing-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px} .dr-billing-fields .dr-field:last-child{grid-column:1/-1} .dr-billing-total{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--dr-line);border-radius:12px;background:var(--dr-bg)} .dr-billing-total strong{font-size:28px;line-height:1.25;font-variant-numeric:tabular-nums} .dr-billing-pending{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--dr-line);overflow-wrap:anywhere} .dr-billing-page .dr-card-body>p:first-child{margin-top:0} .dr-billing-page [hidden]{display:none!important} @media(max-width:480px){.dr-billing-fields{grid-template-columns:1fr}} .dr-feedback-entry{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:36px;margin:8px 0 0;padding:7px 12px;border:1px solid var(--dr-line-2);border-radius:8px;background:var(--dr-panel);color:var(--dr-ink);font:inherit;font-size:12px;cursor:pointer} .dr-feedback-entry:hover{background:var(--dr-hover)} .dr-feedback-entry svg{width:16px;height:16px;flex:none} .dr-feedback-entry:focus-visible{outline:2px solid var(--dr-ink);outline-offset:2px} #dr-feedback-form textarea{resize:vertical;min-height:130px;max-height:40vh} #dr-feedback-form .dr-form-actions{justify-content:space-between;gap:12px;flex-wrap:wrap} .dr-feedback-success{padding:24px 0;line-height:1.6} /* A phone shows the conversation, office or navigation at full width. */ #dayroom .dr-mobile-bar{display:none} @media(max-width:899px){ #dayroom:not([data-screen]){height:var(--dr-mobile-height,100dvh);padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)} #dayroom #dr-product{flex-direction:column;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)} #dayroom .dr-mobile-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:4px 12px;border-bottom:1px solid var(--dr-line)} #dayroom .dr-mobile-bar button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--dr-ink);font:inherit;font-weight:800} #dayroom .dr-mobile-bar button[aria-pressed=true]{background:var(--dr-sel)} #dayroom .dr-rail,#dayroom .dr-sidebar{display:none} #dayroom .dr-layout{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden} #dayroom .dr-main,#dayroom :is(#dr-work-page,#dr-tools-page):not([hidden]){flex:1;min-height:0;margin:0;border-radius:0;box-shadow:none} #dayroom .dr-head{height:auto;min-height:60px;gap:8px;padding:10px 16px;flex-wrap:wrap} #dayroom .dr-head>div:first-child{flex:1 0 100%} #dayroom .dr-head>.dr-grow,#dayroom .dr-head>[aria-label="Office view"]{display:none} #dayroom .dr-head>.dr-seg{display:none} #dayroom .dr-team-tools{gap:0} #dayroom #dr-member-pile{margin-left:0;margin-right:auto;min-height:44px} #dayroom .dr-head :is(.dr-iconbtn,.dr-pillbtn){min-width:44px;height:44px} #dayroom .dr-title{font-size:17px} #dayroom:not([data-office-expanded]) .dr-window{display:none} #dayroom[data-office-expanded] .dr-window{display:block;flex:1;min-height:0;margin:8px} #dayroom[data-office-expanded] .dr-head{display:none} #dayroom .dr-chatcol{margin:0;min-height:0;overflow:hidden} #dayroom .dr-messages{min-height:0;padding:12px 8px;overscroll-behavior:contain} #dayroom article.dr-message-row{gap:10px;padding:10px 8px} #dayroom .dr-message-body{font-size:15px;line-height:1.6;overflow-wrap:anywhere} #dayroom .dr-composer{margin:4px 10px 10px;padding:8px 10px;max-height:45%;overflow:auto} #dayroom #dr-message{font-size:16px;line-height:24px;max-height:120px} #dayroom .dr-bar{margin-left:0;gap:2px;flex-wrap:wrap} #dayroom .dr-bar .dr-tb,#dayroom .dr-send{flex:none;width:44px;height:44px} #dayroom .dr-bar .dr-div{display:none} #dayroom .dr-bar .dr-grow{display:none} #dayroom .dr-send{margin-left:auto} #dayroom #dr-typing{padding-inline:16px} #dayroom :is(input:not([type=checkbox],[type=radio],[type=range],[type=color]),select,textarea){font-size:16px} #dayroom :is(.dr-page-head,.dr-page-body){padding:16px} #dayroom .dr-page-head{flex-wrap:wrap} #dayroom .dr-page-actions{max-width:100%;flex-wrap:wrap} #dayroom :is(#dr-work-page,#dr-tools-page) .dr-page-body{padding:16px} #dayroom .dr-overlay{padding:8px;align-items:center} #dayroom .dr-modal,#dayroom .dr-modal:has(>#dr-modal-body>.dr-page),#dayroom .dr-modal:has(>#dr-modal-body>.dr-page[data-size="wide"]){width:100%;max-width:100%;max-height:calc(var(--dr-mobile-height,100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))} #dayroom .dr-modal .dr-close{width:44px;height:44px} #dayroom .dr-modal:has(>#dr-modal-body>.dr-page)>.dr-modalhead{top:6px;right:8px} #dayroom :is(.dr-button,.dr-room-menu-item){min-height:44px} #dayroom #dr-live{left:50%;max-width:calc(100% - 24px)} #dayroom #dr-connection{top:56px} /* The rail and room list share a dedicated navigation view, leaving chat full width. */ #dayroom[data-mobile-nav] .dr-rail{position:absolute;display:flex;left:0;top:52px;bottom:env(safe-area-inset-bottom);width:64px;z-index:8;padding:8px 0} #dayroom[data-mobile-nav] .dr-rbtn{width:60px;min-height:52px} #dayroom[data-mobile-nav] .dr-sidebar{position:absolute;display:flex;left:64px;right:0;top:52px;bottom:env(safe-area-inset-bottom);z-index:8;padding:8px;background:var(--dr-bg)} #dayroom[data-mobile-nav] .dr-sidebar-scroll{flex:1;min-height:0;max-height:none;overflow-y:auto} #dayroom[data-mobile-nav] .dr-side-foot{margin-top:auto;padding:8px 0 0} #dayroom[data-mobile-nav] .dr-layout> :is(.dr-main,#dr-work-page,#dr-tools-page){visibility:hidden} #dayroom[data-mobile-nav] #dr-mobile-office,#dayroom[data-work-page] #dr-mobile-office,#dayroom[data-tools-page] #dr-mobile-office{display:none} #dayroom .dr-sidebar .dr-row{height:auto;min-height:44px;margin-left:0;padding-block:8px} #dayroom .dr-sidebar .dr-search{height:44px;margin-inline:0} #dayroom .dr-sidebar .dr-kbd{display:none} #dayroom .dr-sidebar .dr-sec{padding:14px 4px 6px} #dayroom .dr-sidebar .dr-plus{width:44px;height:44px;margin:-8px -4px -8px auto} #dayroom .dr-sidebar .dr-iconbtn{width:44px;height:44px} #dayroom .dr-row-more{width:40px;height:40px} #dayroom .dr-row-wrap>.dr-row{padding-right:48px} #dayroom .dr-row-more{opacity:1} #dayroom .dr-upanel{flex-wrap:wrap;gap:8px} #dayroom .dr-upanel .dr-hud-id{min-width:64px} #dayroom .dr-office-zoom>.dr-chip{min-width:44px;height:44px} #dayroom .dr-hud{left:8px;right:8px;bottom:72px;gap:4px;flex-wrap:wrap;width:fit-content;max-width:calc(100% - 16px)} #dayroom .dr-hbtn{min-height:44px;min-width:44px} #dayroom .dr-window #dr-desk-customize{bottom:132px;max-width:calc(100% - 24px)} #dayroom #dr-where{max-width:calc(100% - 150px);overflow:hidden} #dayroom #dr-location{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #dayroom #dr-where-other{display:none} } @media(max-width:380px){ /* Six tools plus Send cannot fit at touch size: Send gets its own row. */ #dayroom .dr-bar{column-gap:0} #dayroom .dr-bar .dr-tb{flex:0 0 calc(100% / 6)} } @media(max-width:600px){ /* Text actions move below descriptive rows instead of squeezing their copy. */ #dayroom .dr-li:has(>.dr-li-trail .dr-button){flex-wrap:wrap;align-items:flex-start} #dayroom .dr-li:has(>.dr-li-trail .dr-button)>.dr-li-body{flex-basis:calc(100% - 44px)} #dayroom .dr-li:has(>.dr-li-trail .dr-button)>.dr-li-trail{margin-left:44px;max-width:calc(100% - 44px);flex-wrap:wrap} #dayroom .dr-li:not(:has(>.dr-li-lead)):has(>.dr-li-trail .dr-button)>.dr-li-trail{margin-left:0;max-width:100%} } @media(max-width:600px){ #dayroom .dr-card-head:has(>.dr-card-actions){flex-wrap:wrap} #dayroom .dr-card-head:has(>.dr-card-actions)>div:first-child:not(.dr-card-actions){flex:1 1 180px} #dayroom .dr-card-actions{max-width:100%;flex-wrap:wrap} } @media(max-width:899px) and (max-height:500px){ /* The thread already names its room; leave room for replies above the keyboard. */ #dayroom .dr-main:has(.dr-chat[data-thread-open])>.dr-head{display:none} }