/* Bridge watch-along (docs/design/features/bridge-watch-along.md §3.4): presence strip, chat drawer, share dialog, viewer mode. */
.bridge-strip{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:8px 12px;margin:0 0 12px;border:1px solid var(--line);border-radius:3px;background:var(--surface);font-size:13px;line-height:1.2}
.bridge-strip #bridge-presence{color:var(--fg);font-weight:500}
.bridge-strip #bridge-presence::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:middle}
.bridge-strip a{color:var(--accent);min-height:36px;display:inline-flex;align-items:center}
.bridge-strip button{box-sizing:border-box;display:inline-flex;align-items:center;height:36px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--fg);font-size:12px;line-height:1;white-space:nowrap}
/* The buttons wrap as one row, never one by one (phone: their own line, right-aligned). */
.bridge-strip .bridge-actions{display:flex;flex:none;gap:8px;margin-left:auto}
/* Removed or ended: the status reads as stopped, not live. */
.bridge-strip[data-closed] #bridge-presence::before{background:var(--muted)}
.bridge-strip button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.bridge-strip .bridge-spacer{flex:1}
.bridge-chat{position:fixed;right:20px;bottom:20px;width:min(380px,calc(100vw - 40px));max-height:min(70vh,560px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:3px;background:var(--surface);box-shadow:0 18px 40px var(--popup-shadow);z-index:30;overflow:hidden}
.bridge-chat-head{flex:none;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--line)}
.bridge-chat-head h2{margin:0;font-size:14px;font-weight:600;line-height:1}
.bridge-chat-count{font-size:12px;color:var(--muted)}
.bridge-chat-head .bridge-spacer{flex:1}
.bridge-chat-icon{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted)}
.bridge-chat-icon:hover,.bridge-chat-icon:focus-visible{color:var(--fg);border-color:var(--line)}
.bridge-chat-icon svg{width:16px;height:16px}
#bridge-chat-mute .off,#bridge-chat-mute[aria-pressed=true] .on{display:none}
#bridge-chat-mute[aria-pressed=true] .off{display:block}
.bridge-chat-log{flex:1;min-height:96px;overflow-y:auto;list-style:none;margin:0;padding:8px 0;font-size:13px;line-height:1.45}
.bridge-chat-log:focus-visible{outline-offset:-2px}
.bridge-chat-log:empty::before{content:'No messages yet.';display:block;padding:8px 16px;color:var(--muted);font-style:italic;font-size:12px}
.bridge-chat-log li{padding:4px 16px 4px 13px;border-left:3px solid transparent}
.bridge-chat-log li.chat-cont{padding-top:0}
.bridge-chat-log li.chat-mine{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.chat-head{display:flex;align-items:baseline;gap:8px;min-width:0}
.chat-name{font-weight:600;color:var(--fg);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-tag{font-weight:500;color:var(--accent)}
.chat-time{flex:none;margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.chat-text{margin:2px 0 0;color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere}
.chat-cont .chat-text{margin-top:0}
.bridge-chat-log li.chat-system{padding:4px 16px;border:0;color:var(--muted);font-size:12px;font-style:italic;text-align:center}
.bridge-chat-status{flex:none;margin:0;padding:8px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--red)}
.bridge-chat form{flex:none;display:flex;align-items:center;gap:8px;padding:8px;border-top:1px solid var(--line)}
.bridge-chat input{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--fg);font:inherit;font-size:13px}
.bridge-chat form .primary{flex:none;height:40px;min-height:40px;padding:0 16px;gap:0}
/* Voice (§7): the mic button and the names, lit while someone speaks. */
.bridge-strip .bridge-voice{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.bridge-voices{display:inline-flex;gap:8px;flex-wrap:wrap;color:var(--muted)}
.voice-name{padding:2px 0;border-bottom:2px solid transparent}
.voice-name[data-speaking]{color:var(--fg);border-bottom-color:var(--green)}
.bridge-voice[data-state=locked] #bridge-mic,.bridge-voice[data-state=listen] #bridge-mic{color:var(--muted)}
.bridge-strip #bridge-mic:disabled{cursor:default}
#bridge-mic-device{min-height:36px;max-width:180px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);font-size:12px}
.bridge-voice-note{font-size:12px;color:var(--muted)}
.bridge-voice[data-state=error] .bridge-voice-note{color:var(--red)}
/* Share dialog: one link row, viewers, call link, audio, one action row. Every control 36px, one font, hairlines. */
#share-dialog{max-width:440px;padding:var(--dialog-inset)}
#share-dialog h2{margin:0 0 var(--dialog-heading-after,16px)}
#share-dialog p{margin:0}
#share-dialog button,#share-dialog input[type=text],#share-dialog input[type=url]{box-sizing:border-box;height:36px;min-height:36px;border:1px solid var(--line);border-radius:3px;font:500 13px/1 var(--mono,'IBM Plex Mono',monospace)}
#share-dialog button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:auto;padding:0 12px;white-space:nowrap}
#share-dialog input[type=text],#share-dialog input[type=url]{flex:1;min-width:0;height:var(--dialog-field-height,36px);min-height:var(--dialog-field-height,36px);padding:0 var(--dialog-field-inset,10px);background:var(--bg);color:var(--fg);font-weight:400;font-size:12px}
#share-dialog .share-row{display:flex;gap:8px;margin:0 0 8px}
#share-dialog .share-note{font:12px/1.5 var(--mono,'IBM Plex Mono',monospace);color:var(--muted);margin:0 0 8px}
#share-dialog .share-label{display:block;margin:16px 0 8px;font:11px/1 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#share-dialog ul{list-style:none;margin:0;padding:0;font-size:14px}
#share-dialog li{display:flex;align-items:center;gap:8px;min-height:40px;border-bottom:1px solid var(--line)}
#share-dialog #share-copy,#share-dialog #share-call-save{min-width:80px}
#share-dialog li>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#share-dialog li button{height:28px;min-height:28px;padding:0 8px;border-color:transparent;background:none;color:var(--muted);font-size:12px}
#share-dialog li button:hover{color:var(--fg);border-color:var(--line)}
#share-dialog .share-audio{display:flex;align-items:center;gap:10px;margin:16px 0 0}
#share-dialog .share-audio label{margin:0;color:var(--fg);font:13px var(--mono,'IBM Plex Mono',monospace)}
#share-dialog .share-audio input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
#share-dialog #share-status{margin:12px 0 0;font:12px/1.5 var(--mono,'IBM Plex Mono',monospace);color:var(--red)}
#share-dialog #share-status:empty{display:none}
#share-dialog #share-status[data-busy]{color:var(--muted)}
#share-dialog .share-actions{display:flex;align-items:center;gap:var(--dialog-gap,8px);margin-top:var(--dialog-lead,20px);padding-top:16px;border-top:1px solid var(--line)}
#share-dialog .share-actions #share-create{margin-left:auto}
@media(max-width:760px){#share-dialog{--dialog-inset:20px;width:calc(100% - 32px)}#share-dialog .share-actions button{padding:0 10px}}
/* Viewer mode: watch, never act. */
body[data-bridge=viewer] #validate,body[data-bridge=viewer] #end,body[data-bridge=viewer] #share,body[data-bridge=viewer] .workspace-help,
body[data-bridge=viewer] .scratchpad-panel,body[data-bridge=viewer] #retry,body[data-bridge=viewer] #review-editor,
body[data-bridge=viewer] #add-to-cart,body[data-bridge=viewer] #customer-checkout,body[data-bridge=viewer] #again,
body[data-bridge=viewer] #retry-same,body[data-bridge=viewer] #save-progress,body[data-bridge=viewer] #account-save-status,body[data-bridge=viewer] #review-ring,body[data-bridge=viewer] #review-rank,body[data-bridge=viewer] #review-scratchpad-panel,body[data-bridge=viewer] #copy-notes,body[data-bridge=viewer] #account-save,body[data-bridge=viewer] .ended-save,body[data-bridge=viewer] #hypothesis-form,body[data-bridge=viewer] #capture-block,body[data-bridge=viewer] #notes-toggle,body[data-bridge=viewer] #notes-drawer{display:none!important}
body[data-bridge=viewer] #terminal-context{color:var(--accent)}
body[data-bridge=viewer] .terminal-pane .pane-heading::after{content:'READ-ONLY';font-size:10px;letter-spacing:.1em;color:var(--muted);margin-left:auto;margin-right:48px}
@media(max-width:760px){.bridge-chat{right:8px;left:8px;bottom:8px;width:auto;max-height:min(60dvh,480px)}.bridge-strip{gap:8px;font-size:12px}}
/* P56 heading controls, in the .terminal-theme look */
#split-right{right:64px}#split-down{right:36px}.split-btn:disabled{cursor:not-allowed}#pane-mode{right:92px;width:auto;padding:0;display:flex;overflow:hidden;border-color:var(--line);font:11px/22px var(--mono)}#pane-mode button{padding:0 8px;border:0;background:none;color:inherit;font:inherit}#pane-mode [aria-pressed=true]{background:var(--tile2);color:var(--fg)}@media(max-width:760px){#pane-mode,.split-btn{display:none}}