/* The Browser view (Docs/Systems/PanelBrowser.md), on the panel's tokens (app.css): the open tabs above the picture,
   who is acting under them, then the page's picture in a window as large as the room allows, its own proportions
   kept. In a session it takes the place of the chat and of the session's details. Control has its own colour, the
   logo's navy: the bar that says who is in control and the ring around the window. */
:root { --ctl: #0b1d4f; --ctl-ink: #fff; --ctl-soft: rgba(255, 255, 255, .78); --ctl-line: rgba(255, 255, 255, .34); --ctl-fill: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] { --ctl: #2748a6; }
.main:has(.bv)::before { display: none; }  /* the mark stays behind a conversation, never behind a page's picture */
.sessions.browsing { grid-template-columns: minmax(0, 1fr); }
.sessions.browsing > .insp, .sessions.browsing #composer { display: none; }  /* the composer hides as in Terminal, from the first moment */
.bv { grid-row: 2; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-width: 0; min-height: 0; position: relative; }  /* the pane's tall row, as the chat */
.bmain { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Activity's button stands by Follow, in a session and on the view's own page; a session's details give their
   place to Activity there, and the top bar's Details goes with them */
.app:has(.bv) .top [data-drawer="insp"] { display: none; }
.bactbtn { flex: none; } .bactbtn[aria-pressed="true"] { background: var(--sel); border-color: transparent; color: var(--head); }

/* the tab strip, and Follow */
.btop { display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; min-width: 0; min-height: 58px; }
.btabs { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.btab { flex: 0 1 250px; min-width: 150px; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; gap: 0 9px; height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text2); text-align: left; transition: background var(--t-fast), border-color var(--t-fast); }
.btab:hover { background: var(--hover); }
.btab[aria-pressed="true"] { background: var(--raise); border-color: var(--line2); color: var(--head); box-shadow: var(--lift); }
.btab svg.i { grid-row: 1 / 3; align-self: center; color: var(--text3); }
.btab b { font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btab small { grid-column: 2; font-size: 11.5px; line-height: 1.3; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btab .tag { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.tag { font-size: 11px; font-weight: 600; line-height: 18px; padding: 0 7px; border-radius: 999px; background: var(--chip); color: var(--text2); white-space: nowrap; }
.tag.you { background: var(--sel); color: var(--head); }  /* a tab an admin opened */
.follow { flex: none; }
.follow[aria-pressed="true"] { background: var(--sel); border-color: transparent; color: var(--head); font-weight: 600; }

/* who is acting: one row of the same height watching and in control, so the picture under it never moves */
.bbar { display: flex; align-items: center; gap: 12px; margin: 8px 16px 0; height: 38px; min-width: 0; border-radius: 12px; transition: background var(--t-fast); }
.bbar p { margin: 0; display: grid; min-width: 0; line-height: 1.3; }
.bbar p b { font-weight: 600; font-size: 13.5px; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbar p small { font-size: 12.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.take { flex: none; background: var(--head); color: var(--bg); border-color: transparent; font-weight: 600; }
.take:hover:not(:disabled) { background: color-mix(in srgb, var(--head) 84%, var(--blue)); }
.bbar.ctl { padding: 0 4px 0 14px; background: var(--ctl); color: var(--ctl-ink); }
.bbar.ctl > svg.i { color: var(--ctl-ink); }
.bbar.ctl p b { color: var(--ctl-ink); } .bbar.ctl p small { color: var(--ctl-soft); }
.bbar.ctl .btn { flex: none; background: transparent; color: var(--ctl-ink); border-color: var(--ctl-line); }
.bbar.ctl .btn:hover { background: var(--ctl-fill); }
.bbar.ctl :focus-visible { outline-color: var(--ctl-ink); }
.keys { display: none; }
@media (pointer: coarse) { .keys { display: inline-flex; } }  /* a touch screen opens its keyboard by this button */
.bbar.rec { padding: 0 4px 0 14px; background: var(--note-bg); box-shadow: inset 0 0 0 1px var(--note-line); }  /* a recorded step, not the live page */
.bbar.rec > svg.i { color: var(--warn); } .bbar.rec .btn { flex: none; }

/* the picture: a window with the tab's address on top */
.bstage { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); padding: 12px 16px 16px; }
.fit { container-type: size; display: grid; place-items: start center; min-width: 0; min-height: 0; }
.bwin { --w: 1440; --h: 900; margin: 0; width: min(100cqw, (100cqh - 38px) * var(--w) / var(--h), var(--w) * 1.5px); border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--t-fast); }
.bwin.in { outline-color: var(--ctl); }
.bwin.in:has(.bkeys:focus) { outline-color: var(--blue); }  /* the page has the keyboard: the panel's focus colour */
.bwin-bar { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--text3); font-size: 12.5px; min-width: 0; }
.bwin-bar > span { color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bpage { position: relative; }
.bwin canvas { display: block; width: 100%; aspect-ratio: var(--w) / var(--h); background: var(--chip); transition: opacity var(--t-fast), filter var(--t-fast); }
.bwin.in canvas { touch-action: none; }  /* a finger's drag scrolls the page in the picture, not the panel */
.bwin.wait canvas { opacity: .45; }  /* another tab's picture until this one's first frame */
.bwin.stale canvas { opacity: .5; filter: grayscale(1); }  /* a picture from before the link dropped is never passed as live */
.bkeys { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; outline: 0; opacity: 0; resize: none; pointer-events: none; font-size: 16px; }  /* takes the keys for the page; 16 px keeps a phone from zooming in */
.bpage > img { display: block; width: 100%; }  /* a recorded step's screenshot, in the live picture's place */
/* where a click landed: for a moment on the live picture (the agent's), for good on a recorded step */
.bmark { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--blue); background: color-mix(in srgb, var(--blue) 20%, transparent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); pointer-events: none; }
.bnone { align-self: center; justify-self: center; display: grid; justify-items: center; gap: 4px; max-width: 440px; }
.bnone .primary { margin-top: 14px; }

/* in control the window's top is the controls: back, reload, the address, the sign-ins, close */
.bwin.in .bwin-bar { padding: 0 4px; gap: 2px; }
.bwin-bar .icon:disabled:hover { background: none; color: var(--text3); }
.bgo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0 4px; position: relative; }
.addr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 999px; background: var(--raise); color: var(--text3); transition: border-color var(--t-fast); }
.addr:focus-within { border-color: var(--blue); }
.addr input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; font-size: 12.5px; color: var(--text); }
.addr input::placeholder { color: var(--text3); }
.quick { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.quick small { font-size: 12px; color: var(--text3); }
.quick button { height: 24px; padding: 0 10px; white-space: nowrap; border-radius: 999px; border: 1px solid var(--line2); background: var(--raise); font-size: 12.5px; font-weight: 500; color: var(--text); transition: background var(--t-fast); }
.quick button:hover { background: var(--hover); }
/* in control with no tab open: the window is a start page */
.bhome { aspect-ratio: var(--w) / var(--h); display: grid; place-content: center; justify-items: center; gap: 4px; padding: 20px; text-align: center; background: var(--chip); color: var(--text2); }
.bhome b { color: var(--text); } .bhome p { margin: 0; text-wrap: balance; }
.bhome div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.bhome .btn { height: 36px; padding: 0 14px; } .bhome .btn small { color: var(--text3); font-weight: 400; }

/* Activity: the timeline in a column beside the picture. It starts closed (the drawer "act", frame.js's setDrawer) */
.bact { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: var(--panel); }
.act-closed .bact { display: none; }
.bhead { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px 16px; min-height: 54px; }
.bhead h2 { margin: 0; flex: 1; font-size: 15px; font-weight: 700; color: var(--head); letter-spacing: -0.01em; }
.rows { overflow: auto; flex: 1; padding: 0 8px 12px; }
.rows .label { padding: 10px 8px 4px; }
.act { width: 100%; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 1px 10px; align-items: center; padding: 7px 8px; border-radius: 10px; text-align: left; color: var(--text); transition: background var(--t-fast); }
.act:hover { background: var(--hover); } .act[aria-current] { background: var(--sel); }
.act > svg.i { grid-row: 1 / 3; color: var(--text3); }
.act b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act small { grid-column: 2; font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act img { grid-column: 3; grid-row: 1 / 3; width: 58px; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; border: 1px solid var(--line2); border-radius: 5px; background: var(--chip); }
.act.plain b { font-weight: 500; color: var(--text2); } .act.plain:hover { background: none; }
.bmore { display: flex; margin: 8px auto 0; }
@media (min-width: 1181px) { .app:not(.act-closed) .bv { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (min-width: 761px) and (max-width: 1180px) {  /* no room beside the picture: the open column lies over its right side, as a session's details do */
  .bact { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; z-index: 6; box-shadow: var(--shadow); }
}

@media (max-width: 760px) {
  .btop { padding-left: 10px; padding-right: 10px; } .bbar { margin-left: 10px; margin-right: 10px; }
  .follow span, .bactbtn span { display: none; } .follow, .bactbtn { padding: 0 9px; }
  .bv { display: block; } .bact { border-left: 0; border-top: 1px solid var(--line); } .rows { overflow: visible; }  /* the page scrolls: the picture, then the timeline */
  .btab { min-width: 138px; }
  .bstage { flex: none; padding: 10px 10px 12px; } .fit { container-type: inline-size; } .bwin { width: 100%; }
  .sessions.browsing { overflow: auto; }
  /* in control: the title, Keyboard and Release fit one row; the last half minute's countdown takes the title's place */
  .bbar { gap: 8px; } .bbar.ctl > svg.i, .bbar.ctl p small { display: none; }
  .bbar.ctl p.soon b { display: none; } .bbar.ctl p.soon small { display: block; font-size: 13.5px; font-weight: 600; color: var(--ctl-ink); }
  /* no room for the sign-ins beside the address: they drop under it while the address box has the focus */
  .addr input:focus { font-size: 16px; }  /* under 16 px a phone zooms in on a focused box */
  .quick { display: none; flex-wrap: wrap; position: absolute; z-index: 2; top: calc(100% + 7px); left: 0; right: 0; padding: 8px; border: 1px solid var(--line2); border-radius: 12px; background: var(--raise); box-shadow: var(--shadow); }
  .bgo:focus-within .quick { display: flex; }
  .quick button { height: 32px; flex: 1; }
  .bhome .btn small { display: none; }
}