/* New-build prompt — pinned to the top edge of the viewport. Hidden by default. JS adds .visible to reveal, plus .kc-update-pending on so .app shrinks by the banner height (no overlap). Don't use the HTML `hidden` attribute here — `.kc-update-banner` below would override `[hidden] { display: none }` via equal- specificity-but-later-load and the banner would always be visible. */ .kc-update-banner { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 9000; align-items: center; justify-content: center; gap: var(--space-md); height: 36px; padding: 0 var(--space-lg); background: var(--accent); color: var(--ink-on-accent, #fff); font-size: var(--font-sm); font-weight: 500; box-shadow: var(--shadow-xs); } .kc-update-banner.visible { display: flex; animation: kcUpdateBannerIn 220ms ease-out; } @keyframes kcUpdateBannerIn { from { transform: translateY(-100%); } to { transform: translateY(0); } } .kc-update-banner-text { flex: 0 1 auto; } .kc-update-banner-action { appearance: none; border: 1px solid var(--color-white-64); background: transparent; color: inherit; font: inherit; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-m); cursor: pointer; transition: background var(--transition); } .kc-update-banner-action:hover { background: var(--color-white-16); } .kc-update-banner-dismiss { appearance: none; border: 0; background: transparent; color: inherit; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius-full); transition: background var(--transition); } .kc-update-banner-dismiss:hover { background: var(--color-white-16); } /* When the banner is visible, push the app down by its height. Using a body class instead of a sibling selector so this works regardless of where .app is mounted in DOM order. */ body.kc-update-pending .app { height: calc(100vh - 36px); } /* TZ-mismatch prompt (PR B3 — Notion-Calendar gap analysis epic 1). Same visibility model as `.kc-update-banner`: hidden by default, JS adds `.visible` when browser TZ != user.default_tz. Sits below the update banner; reuses `.kc-update-banner` typography but with a neutral surface (vs accent) so it doesn't compete for attention. Three buttons → wider min-height. */ .kc-tz-banner { display: none; position: fixed; left: 0; right: 0; z-index: 8900; top: 0; min-height: 36px; padding: 6px var(--space-lg); align-items: center; justify-content: center; gap: var(--space-md); background: var(--surface-elevated, var(--raised)); color: var(--ink); border-bottom: 1px solid var(--border); font-size: var(--font-sm); font-weight: 500; box-shadow: var(--shadow-xs); flex-wrap: wrap; } .kc-tz-banner.visible { display: flex; } .kc-tz-banner-text { flex: 1 1 auto; } .kc-tz-banner-action { appearance: none; border: 1px solid var(--accent); background: var(--accent); color: var(--ink-on-accent, #fff); font: inherit; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-m); cursor: pointer; transition: background var(--transition); } .kc-tz-banner-action:hover { background: var(--accent-hover, var(--accent)); } .kc-tz-banner-action--secondary { background: transparent; border-color: var(--border); color: var(--ink); } .kc-tz-banner-action--secondary:hover { background: var(--surface); } body.kc-tz-prompt-active .app { height: calc(100vh - 36px); } /* When other banners are visible, stack: TZ sits below the others. Total banner-occupied height is summed via `.app` height-calc rules below — keep all three rule blocks in sync. Order top→bottom: update → system → tz. */ body.kc-update-pending .kc-tz-banner.visible { top: 36px; } body.kc-system-banner-active .kc-tz-banner.visible { top: 36px; } body.kc-update-pending.kc-system-banner-active .kc-tz-banner.visible { top: 72px; } body.kc-update-pending.kc-tz-prompt-active .app { height: calc(100vh - 72px); } body.kc-system-banner-active.kc-tz-prompt-active .app { height: calc(100vh - var(--kc-titlebar-h, 0px) - 72px); } body.kc-update-pending.kc-system-banner-active.kc-tz-prompt-active .app { height: calc(100vh - var(--kc-titlebar-h, 0px) - 108px); } /* Broadcast banner (P4.7 System module). Same visibility model as .kc-update-banner above: hidden by default, JS adds .visible. The two banners stack — system banner sits below the update one when both are visible (body.kc-update-pending + .kc-system-active). */ .kc-system-banner { display: none; position: fixed; top: var(--kc-titlebar-h, 0px); left: 0; right: 0; z-index: 9990; align-items: center; justify-content: center; gap: var(--space-md); min-height: 36px; padding: 6px var(--space-lg); background: var(--accent); color: var(--ink-on-accent, #fff); font-size: var(--font-sm); font-weight: 500; box-shadow: var(--shadow-xs); } .kc-system-banner.visible { display: flex; animation: kcUpdateBannerIn 220ms ease-out; } .kc-system-banner[data-kind="warning"] { background: var(--warning); color: var(--ink); } .kc-system-banner[data-kind="danger"] { background: var(--danger); color: var(--ink-on-accent, var(--ink)); } .kc-system-banner-text { flex: 0 1 auto; white-space: pre-wrap; text-align: center; } .kc-system-banner-dismiss { appearance: none; border: 0; background: transparent; color: inherit; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--radius-full); transition: background var(--transition); } .kc-system-banner-dismiss:hover { background: var(--color-white-16); } /* Push the app down by banner height when active. */ body.kc-system-banner-active .app { height: calc(100vh - var(--kc-titlebar-h, 0px) - 36px); } body.kc-system-banner-active.kc-update-pending .app { height: calc(100vh - var(--kc-titlebar-h, 0px) - 72px); } body.kc-system-banner-active.kc-update-pending .kc-system-banner { top: 36px; } /* Desktop-shell auto-updater indicator. Two copies: - .kc-desktop-update-btn — lives inside .chat-header-actions (visible when a channel is open). - .kc-desktop-update-rail-btn — lives at the bottom of .server-rail (visible from any view). Both light green with a pulsing dot when update_ready fires; click on either calls Updater.InstallUpdate. */ .kc-desktop-update-btn, .kc-desktop-update-rail-btn { color: var(--success); position: relative; } .kc-desktop-update-btn::after, .kc-desktop-update-rail-btn::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--surface); animation: kcDesktopUpdatePulse 2s ease-in-out infinite; } @keyframes kcDesktopUpdatePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }