/* The shared browser's card (docs/DESIGN.md, Shared browser): a bar to drag it by, and the browser itself in the rest. */
.item.kind-browser { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: var(--panel); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.item.kind-browser .browser-bar { display: flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 8px 0 12px; background: var(--panel-2); color: var(--ink-2); font: 400 13px var(--mono); cursor: grab; user-select: none; touch-action: none; }
.browser-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-close { flex: none; padding: 0 2px 2px; font-size: 13px; }
.item.kind-browser .browser-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; background: var(--ground); }
.browser-body iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.browser-say { display: grid; flex: 1 1 auto; place-content: center; padding: 16px; text-align: center; color: var(--ink-3); font: 400 14px/1.45 var(--mono); }
.browser-say p { margin: 0; }
.browser-why { margin-top: 8px !important; font-size: 12px; }
/* Over the browser while the owner has timed this person out (browser.js makes the frame inert then). */
.browser-watch { position: absolute; left: 8px; bottom: 8px; margin: 0; padding: 4px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--warn-ink); font: 400 12px var(--mono); pointer-events: none; }
.browser-watch[hidden] { display: none; }
/* The corner handle sits over the browser, so it can still resize the card. */
.item.kind-browser .resize { z-index: 3; }