#browser-open[hidden], #browser-pane[hidden] { display:none !important; }
body.browser-open { --browser-width:min(48vw, 900px); --sw:240px; }
body.browser-open main { margin-right:var(--browser-width); }
body.browser-open main .topbar { right:var(--browser-width); }
#browser-pane { position:fixed; inset:0 0 0 auto; width:var(--browser-width); z-index:var(--z-modal); background:var(--s1); border-left:1px solid var(--bd); display:flex; flex-direction:column; gap:8px; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); overflow:auto; color:var(--tx); box-shadow:var(--shadow-lg); }
/* Resize handle on the left edge of the pane. Hidden on coarse pointer or
   narrow widths where the pane already fills the viewport. */
#browser-resize-handle { position:absolute; top:0; left:0; bottom:0; width:var(--resize-handle); cursor:ew-resize; z-index:var(--z-overlay); background:transparent;border-right:2px solid transparent; transition:border-color .15s; }
#browser-resize-handle:hover, #browser-resize-handle.active, body.browsing-resizing #browser-resize-handle { border-right-color:var(--ac); }
@media (pointer: coarse), (max-width: 720px) {
  #browser-resize-handle { display:none; }
}
/* Dragging the resizer: silence pointer events on the rest of the pane so the
   hover styles don't paint while the user is resizing. */
body.browsing-resizing #browser-pane > :not(#browser-resize-handle) { pointer-events:none; }
body.browsing-resizing, body.browsing-resizing * { cursor:ew-resize !important; user-select:none; }
/* When the browser pane opens at widths where the sidebar would otherwise
   overlap, the sidebar collapses to give the canvas the full viewport. */
@media (min-width: 721px) and (max-width: 1100px) {
  body.browser-open[data-sidebar-collapsed="1"] .sidebar { transform:translateX(-100%); }
  body.browser-open[data-sidebar-collapsed="1"] main { margin-left:0; flex:1; }
  body.browser-open[data-sidebar-collapsed="1"] main .topbar { left:0; }
}
/* Fullscreen fills the whole viewport; getBoundingClientRect keeps pointer mapping correct. */
#browser-pane:fullscreen { width:100vw; height:100vh; inset:0; border:0; border-radius:0; box-shadow:none; padding:12px; }
.browser-header, .browser-row { display:flex; align-items:center; gap:8px; }
.browser-header { flex-wrap:wrap; }
.browser-header #browser-navigation { flex:1 1 220px; min-width:0; }
.browser-row { flex-wrap:wrap; }
#browser-pane button, #browser-pane input, #browser-pane textarea { border:1px solid var(--bd); border-radius:var(--r-md); background:var(--s2); padding:9px 12px; font:inherit; font-size:14px; min-height:44px; }
#browser-pane button { cursor:pointer; }
#browser-pane button:hover:not(:disabled) { background:var(--s3); border-color:var(--ac); }
#browser-pane button:disabled { opacity:.45; cursor:default; }
#browser-pane :focus-visible { outline:2px solid var(--ach); outline-offset:2px; }
#browser-pane .browser-primary { background:var(--ac); color:#fff; }
#browser-pane p { font-size:var(--fs-sm); line-height:1.5; margin:0; }
#browser-state { color:var(--mt); overflow-wrap:anywhere; }
#browser-error { color:var(--dg); overflow-wrap:anywhere; }
#browser-url { flex:1; min-width:140px; }
.browser-tabs { display:flex; align-items:center; gap:6px; overflow-x:auto; flex:0 0 auto; padding-bottom:2px; }
.browser-tab { display:inline-flex; align-items:stretch; gap:2px; background:var(--s2); border:1px solid var(--bd); border-radius:999px; overflow:hidden; flex:0 0 auto; }
.browser-tab button { border:0; border-radius:0; background:none; min-height:36px; padding:4px 8px; }
.browser-tab button[data-tab] { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browser-tab.active { border-color:var(--ac); }
.browser-tab.active button[data-tab] { color:var(--ach); font-weight:600; }
#browser-newtab { flex:0 0 auto; min-width:40px; border-radius:999px; }
/* Tab strip row: device selector sits at the right end and wraps below on narrow screens. */
.browser-tabsrow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.browser-tabsrow .browser-tabs { flex:1 1 auto; min-width:0; }
.browser-tabsrow .browser-tabs:not([hidden]) { min-width:200px; }
.browser-device-picker { display:inline-flex; align-items:center; margin-left:auto; flex:0 0 auto; background:var(--s2); border:1px solid var(--bd); border-radius:999px; overflow:hidden; }
.browser-device-picker[hidden] { display:none !important; }
.browser-device-picker button { border:0; border-radius:0; background:none; min-height:36px; min-width:0; padding:4px 10px; font-size:13px; }
.browser-device-picker button + button { border-left:1px solid var(--bd); }
.browser-device-picker button.active { color:var(--ach); font-weight:600; background:var(--s3); }
/* Compact Larghezza × Altezza pair, revealed while the Desktop device is active. */
.browser-size { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex:0 0 auto; }
.browser-size[hidden] { display:none !important; }
.browser-size span { color:var(--mt); font-size:13px; }
.browser-size input, .browser-size button { min-height:36px; padding:4px 8px; font-size:13px; }
.browser-size input { width:5.5em; }
.browser-size button { padding:4px 10px; }
.browser-viewport { position:relative; flex:1 0 180px; min-height:180px; background:var(--bg); border:1px solid var(--bd); border-radius:var(--r-md); overflow:hidden; display:grid; place-items:center; }
#browser-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; user-select:none; touch-action:none; outline:none; }
#browser-image[hidden] { display:none; }
#browser-empty { padding:24px; text-align:center; color:var(--mt); }
.browser-overlay { position:absolute; inset:0; z-index:1; display:grid; place-items:center; background:color-mix(in srgb, var(--bg) 72%, transparent); }
.browser-overlay[hidden] { display:none; }
/* Hidden one-time input: focused by the first touch to summon the mobile keyboard. */
.browser-touch { position:absolute; left:0; bottom:0; width:2px; height:2px; opacity:0; border:0; padding:0; min-height:0; pointer-events:none; z-index:2; }
@media (max-width:1100px) {
  body.browser-open main { margin-right:0; }
  body.browser-open main .topbar { right:0; }
  #browser-pane { width:100%; height:100dvh; border:0; z-index:var(--z-modal-fullscreen); padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); }
}

/* Bottom toolbar: a real mobile browser chrome. Hidden on desktop widths. */
.browser-toolbar { display: none; }
@media (pointer: coarse), (max-width: 720px) {
  .browser-toolbar:not([hidden]) {
    display: flex; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line, #2a2a35); background: var(--panel, #17171d);
  }
  .browser-toolbar button { flex: 1; min-height: 44px; border: none; border-radius: 10px;
    background: #22222c; color: inherit; font: inherit; cursor: pointer; }
  .browser-toolbar button:disabled { opacity: .45; }
}
/* Compact sidebar when the browser pane is open on desktop: shrink to an
   icon-rail so the chat reflows wider while the user can still pick a
   project/session. The full sidebar returns on close. */
body.sidebar-compact { --sw: 64px; }
body.sidebar-compact .sidebar { width: var(--sw); }
body.sidebar-compact .sidebar { overflow: hidden; }
body.sidebar-compact .sidebar-header h2,
body.sidebar-compact .sidebar-context,
body.sidebar-compact .sidebar-footer,
body.sidebar-compact .tree-project .tname,
body.sidebar-compact .tree-project .tcaret,
body.sidebar-compact .tree-project .tcount,
body.sidebar-compact .tree-project .tpin,
body.sidebar-compact .tree-session .sname,
body.sidebar-compact .tree-session .spin,
body.sidebar-compact .search-input,
body.sidebar-compact .search-icon { display: none !important; }
body.sidebar-compact .tree-project,
body.sidebar-compact .tree-session { justify-content: center; padding: 8px 0; gap: 0; }
body.sidebar-compact .tree-project .ticon,
body.sidebar-compact .tree-session .sact { font-size: 1.3em; }
body.sidebar-compact .sidebar-tabs { padding: 4px 4px 0; gap: 2px; }
body.sidebar-compact .sidebar-tab { padding: 4px 0; }
body.sidebar-compact .sidebar-tab svg { width: 17px; height: 17px; }
body.sidebar-compact .sidebar-tab span { display: none !important; }
body.sidebar-compact .sidebar-resize-handle { display: none !important; }