/* Account and live state share the right edge on desktop and phones. */
#account{gap:10px;flex-wrap:nowrap}#account .data-mode-switch{order:0}#account #workspaceTheme{order:1}#account .live-control{order:2}#account .account-control{order:3}
.account-control,.live-control{position:relative;display:flex;align-items:center;flex:none}
#sidebar .asidebottom[hidden]{display:none!important}
#account .header-online{display:inline-flex;gap:7px;align-items:center;background:transparent;border:0;padding:8px 4px;font-weight:400;font-size:11px;min-height:36px;color:var(--muted)}
#account .header-online span{margin:0;color:inherit}#account .header-online time{font-size:10px;font-variant-numeric:tabular-nums}
.connection-indicator[data-state=syncing] i{background:#2878e8;animation:header-sync-pulse 1s ease-in-out infinite}.connection-indicator[data-state=pending] i{background:#d69a28}.connection-indicator[data-state=paused] i{background:#9ba3af}
@keyframes header-sync-pulse{50%{box-shadow:0 0 0 4px #2878e826;opacity:.55}}
@media(prefers-reduced-motion:reduce){.connection-indicator[data-state=syncing] i{animation:none}}
#account button.account-avatar,#account button.account-avatar:hover{position:relative;width:36px;height:36px;min-width:36px;border-radius:50%;padding:0;overflow:hidden;background:var(--green,#2878e8);color:#fff;border:1px solid var(--line);font-size:12px;display:grid;place-items:center}
#account .account-avatar span{margin:0;color:inherit;font-weight:650}#account .account-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.header-popover{position:absolute;right:0;top:calc(100% + 10px);width:270px;max-width:calc(100vw - 24px);padding:8px;border-radius:12px;border:1px solid var(--line);box-shadow:0 12px 36px #0002;background:var(--surface,#fff);color:var(--ink);z-index:30;text-align:left}
.header-popover[hidden]{display:none!important}#account .header-popover span{margin:0;color:inherit}
.account-profile{padding:12px;border-bottom:1px solid var(--line);margin-bottom:5px}.account-profile strong{font-size:13px;display:block}.account-profile small{display:block;margin-top:6px;color:var(--muted);font-size:11px}
#account .account-popover button{display:block;width:100%;min-height:42px;padding:11px 12px;text-align:left;font-size:12px;border:0;background:transparent;border-radius:7px}#account .account-popover button:hover,#account .account-popover button:focus-visible{background:var(--surface2,#f2f5f8)}
.live-status-panel{width:320px;padding:18px;font-size:12px;line-height:1.6}.live-status-panel p{margin:10px 0}.live-status-panel dl{font-size:11px;margin:12px 0}.live-status-panel dt{color:var(--muted)}.live-status-panel dd{margin:0 0 9px;font-variant-numeric:tabular-nums}.live-status-panel .muted{font-size:10px}
@media(max-width:720px){#account{gap:6px}header{align-items:center}#account .live-status-panel{position:fixed;right:12px;top:85px}#account .account-popover{position:fixed;right:12px;top:85px}}
@media(max-width:480px){#account .header-online time{display:none}#account .header-online{font-size:10px;gap:5px}#account .account-avatar{width:34px;height:34px;min-width:34px}}
@media(max-width:380px){#account .header-online .live-label{display:none}#account .header-online{padding:8px;min-width:24px}}
/* One quiet connection dot; timestamps and detail stay in the tap panel. */
#account .header-online{display:grid;place-items:center;width:36px;min-width:36px;height:40px;min-height:40px;padding:0;border:0;background:transparent}
#account .header-online>i{display:block;width:10px;height:10px;border-radius:50%;background:var(--connection-dot);animation:office-connection-pulse 1.3s ease-in-out infinite}
#account .header-online[data-state=online]{--connection-dot:#35b87b}
#account .header-online[data-state=unstable]{--connection-dot:#d59a32}
#account .header-online[data-state=offline]{--connection-dot:#da5757}
@keyframes office-connection-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--connection-dot) 45%,transparent)}55%{opacity:.5;box-shadow:0 0 0 7px transparent}}
#account .account-control{order:4}
#account #office-bell{order:3;display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:8px;border:0;color:var(--ink);background:transparent}
#office-bell svg{display:block;width:24px;height:24px;overflow:visible}
#office-bell .bell-shell,#office-bell .bell-clapper{transform-box:view-box;transform-origin:12px 5px}
#office-bell .bell-clapper{transform-origin:12px 18px}
#office-bell .bell-wave{opacity:0}
#office-bell[data-unread=true] .bell-shell{animation:office-bell-ring 1.8s ease-in-out infinite}
#office-bell[data-unread=true] .bell-clapper{animation:office-bell-clapper 1.8s ease-in-out infinite}
#office-bell[data-unread=true] .bell-wave{animation:office-bell-wave 1.8s ease-in-out infinite}
@keyframes office-bell-ring{0%,65%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(10deg)}20%,40%,60%{transform:rotate(-10deg)}}
@keyframes office-bell-clapper{0%,65%,100%{transform:translateX(0)}10%,30%,50%{transform:translateX(-2px)}20%,40%,60%{transform:translateX(2px)}}
@keyframes office-bell-wave{0%,65%,100%{opacity:0}10%,50%{opacity:.85}30%{opacity:.25}}
.office-notice-day{margin:18px 0 8px;color:var(--muted);font-size:12px}
.office-notice-row{display:flex;align-items:start;gap:14px;width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;text-align:left;font-weight:400}
.office-notice-row>span{min-width:0;flex:1}.office-notice-row strong{display:block;font-size:14px;line-height:21px}.office-notice-row small,.office-notice-row time{font-size:12px;color:var(--muted)}
.office-notice-row p{font-size:13px;line-height:20px;margin:5px 0 0;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){#office-bell[data-unread=true] .bell-shell,#office-bell[data-unread=true] .bell-clapper,#office-bell[data-unread=true] .bell-wave{animation:none}#office-bell[data-unread=true] .bell-wave{opacity:.8}}

.office-download-status{display:grid;gap:15px}.office-download-stage{display:grid;gap:6px}.office-download-title{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;line-height:18px}.office-download-title>strong{font-weight:600}.office-download-title>span{white-space:nowrap;font-variant-numeric:tabular-nums}.office-download-ready{color:#35b87b}.office-download-stage>progress{display:block;width:100%;height:5px;border:0;accent-color:var(--blue,#2878e8)}.office-download-stage>small{font-size:11px;line-height:16px;font-variant-numeric:tabular-nums}.office-download-status>p{margin:0;font-size:11px;line-height:17px}