/* BROWSER (2026-09-29/30) — frontend/app/outputbrowser.js. One docked window (StationUI 'browser', WIDE shell) that
   shows a page an agent made, the browser an agent is using, or an address you typed. The term system owns the
   glass chrome, the dock rise and the resize grip; this file lays out the body — address bar, source strip, the
   stage, a status line — and the COMMS door. Matte, glass recipes (--gd-*), theme tokens only. */
/* height: the glass dock controller seats this sheet tall (glass-demo.js `page`); drag/EXPAND still win */
.term.browser-win .term-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ob { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }

/* the address bar: [back] [forward] [reload] ( lamp · WHO · address ) — the address gets the whole row */
.ob-bar { display: flex; align-items: center; gap: 6px; flex: none; margin: 0; }
.ob-bar .bb { flex: none; }
.ob-bar .ob-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; padding-left: 0; padding-right: 0; }
.ob-bar .ob-ic svg { width: 13px; height: 13px; stroke-linecap: square; }
.ob-bar .bb:disabled { opacity: .38; cursor: default; }
.ob-addr {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 0 8px; min-height: 28px;
  background: rgba(0,0,0,.28); border: 1px solid var(--gd-edge, rgba(var(--ph-rgb),.24)); border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.ob-addr:focus-within { border-color: rgba(var(--ph-rgb), .55); }
.ob-lamp { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ph-dim); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.ob[data-state="live"] .ob-lamp { background: var(--ok, #62ff9e); }
.ob[data-state="loading"] .ob-lamp { background: var(--ph); }
.ob[data-state="ask"] .ob-lamp { background: var(--gold, #ffc24a); }
.ob[data-state="missing"] .ob-lamp, .ob[data-state="ended"] .ob-lamp { background: var(--bad, #ff4a3d); }
.ob-who { flex: none; font-size: 15px; letter-spacing: 1.2px; color: var(--ph-bright); padding-right: 7px; border-right: 1px solid var(--gd-edge, rgba(var(--ph-rgb),.24)); }
.ob-who[hidden] { display: none; }
/* (0,2,0) on purpose: the station's base field rule input[type=text] is (0,1,1) and would paint a console field */
.ob .ob-url {
  flex: 1 1 auto; min-width: 0; width: auto; margin: 0; padding: 4px 0; font: 15px/1.2 'VT323', monospace; color: var(--text);
  text-shadow: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none;
}
.ob .ob-url::placeholder { color: var(--ph-dim); }
.ob-strip .ob-follow.on { color: var(--ph-bright); border-color: var(--ph); background: var(--gd-hover, rgba(var(--ph-rgb),.12)); }

/* the strip: (agents browsing right now · your browser · pages made this session) ......... [FOLLOW] [OPEN OUTSIDE] */
.ob-strip { display: flex; align-items: center; gap: 6px; flex: none; }
.ob-strip .bb { flex: none; }
.ob-strip .bb:disabled { opacity: .38; cursor: default; }
.ob-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.ob-rlab { font-size: 12px; letter-spacing: 1.3px; color: var(--ph-dim); margin: 0 2px 0 6px; }
.ob-rlab:first-child { margin-left: 0; }
.ob-recent .ob-chip {
  display: inline-flex; align-items: center; gap: 6px; font: 13px/1.2 'VT323', monospace; color: var(--ph); padding: 2px 8px; cursor: pointer;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(0,0,0,.22); border: 1px solid var(--gd-edge, rgba(var(--ph-rgb),.24)); border-radius: 3px;
}
.ob-recent .ob-chip:hover, .ob-recent .ob-chip.on { color: var(--ph-bright); border-color: var(--ph); background: var(--gd-hover, rgba(var(--ph-rgb),.12)); }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ok, #62ff9e); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.ob-dot.ask { background: var(--gold, #ffc24a); }

/* the stage. A browser tab paints white under a page that sets no background, so the frame does too — otherwise
   an unstyled page would render dark text on the station's dark glass. */
.ob-stage {
  position: relative; flex: 1 1 auto; min-height: 220px; overflow: hidden;
  border: 1px solid var(--gd-edge, rgba(var(--ph-rgb),.24)); border-radius: 4px; background: rgba(0,0,0,.25);
}
.ob-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.ob-frame[hidden] { display: none; }
/* the live picture of a real browser: letterboxed by its own aspect (the pointer maths in browserstream.js relies on contain) */
.ob-vp { position: absolute; inset: 0; display: flex; background: #000; outline: none; }
.ob-vp[hidden] { display: none; }
.ob-vp:focus-visible { box-shadow: inset 0 0 0 1px var(--ph-bright); }
.ob-live { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.ob[data-mode="web"] .ob-live { cursor: default; }
.ob-empty { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 16px; text-align: center; }
.ob-empty[hidden] { display: none; }
.ob-empty p { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.3; color: var(--text); }
.ob-empty .ob-dim, .ob-dim { color: var(--ph-dim); font-size: 14px; }
.ob-empty b { font-weight: normal; color: var(--ph); }
.ob-empty .bb { margin-top: 6px; }

.ob-note { flex: none; margin: 0; font-size: 13px; color: var(--ph-dim); min-height: 1em; }

/* THE COMMS DOOR — the twin of the + (add agents) button (glass-comms.css #gc-add-agents): two icon doors in the
   header's top right, + then the globe, whichever script mounts first. The lamp is drawn geometry on the corner,
   lit only on station truth. */
#chat-panel #gc-add-agents { order: 1; }
#chat-panel .comms-browser { order: 2; }
#chat-panel .comms-browser {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; min-height: 28px; padding: 4px; margin: 0; cursor: pointer; font: 14px/1 'VT323', monospace;
  color: var(--ph-bright); background: rgba(var(--ph-rgb),.05); border: 1px solid var(--gd-edge, rgba(var(--ph-rgb),.24));
  border-radius: 3px; box-shadow: inset 0 1px 0 var(--gd-light, rgba(255,255,255,.06));
  transition: background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
#chat-panel .comms-browser svg { width: 14px; height: 14px; flex: none; }
#chat-panel .comms-browser:hover { border-color: rgba(var(--ph-rgb),.5); background: var(--gd-hover, rgba(var(--ph-rgb),.12)); }
#chat-panel .comms-browser .cb-lamp { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
#chat-panel .comms-browser.live .cb-lamp { background: var(--ok, #62ff9e); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
#chat-panel .comms-browser.ask .cb-lamp { background: var(--gold, #ffc24a); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { #chat-panel .comms-browser { transition: none; } }