/* phase7-panels.css — owner UX round (new chat / top bar / starters / panels). */

/* Desktop panel host: transparent flex column wrapper */
.desktop-panel-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: auto;
}

/* Sessions bottom-docked frosted pill & panels */
html.phase5 #page-sessions {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html.phase5 #page-sessions #sidebar-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  height: auto;
}

html.phase5 #page-sessions #pane-sessions {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: auto;
}
html.phase5 #page-sessions :is(#pane-sessions, #pane-files, #pane-notes, #pane-subagents)[hidden] {
  display: none !important;
}
html.phase5 #page-sessions #sess-pill-zone {
  position: relative;
  z-index: 6;
}
html.phase5 #pager[data-sessions-view="files"] #page-sessions #pane-files,
html.phase5 #pager[data-sessions-view="notes"] #page-sessions #pane-notes,
html.phase5 #pager[data-sessions-view="agents"] #page-sessions #pane-subagents {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}
html.phase5 #pager[data-sessions-view="files"] #page-sessions #pane-sessions,
html.phase5 #pager[data-sessions-view="notes"] #page-sessions #pane-sessions,
html.phase5 #pager[data-sessions-view="agents"] #page-sessions #pane-sessions,
html.phase5 #pager[data-sessions-view="files"] #page-sessions #pane-notes,
html.phase5 #pager[data-sessions-view="files"] #page-sessions #pane-subagents,
html.phase5 #pager[data-sessions-view="notes"] #page-sessions #pane-files,
html.phase5 #pager[data-sessions-view="notes"] #page-sessions #pane-subagents,
html.phase5 #pager[data-sessions-view="agents"] #page-sessions #pane-files,
html.phase5 #pager[data-sessions-view="agents"] #page-sessions #pane-notes {
  display: none !important;
}

html.phase5 #page-sessions #pane-sessions #sess-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

html.phase5 #page-sessions .sess-foot-actions {
  flex: none;
  margin-bottom: 0 !important;
  border-top: 1px solid var(--line);
}

html.phase5 #page-sessions :is(#pane-files, #file-list, #pane-notes, #pane-subagents) {
  padding-bottom: 0 !important;
}

html.phase5 #page-sessions .ospi-seg.ospi-pill {
  height: auto;
  min-height: 0;
  padding: 6px;
  border: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
  background: var(--surface);
  box-sizing: border-box;
}

html.phase5 .ospi-pill-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Agent chip on side pages clears both the bottom pill and the action row above it */
:is(html.phase3, html.phase5) #agent-run.over-capsule {
  bottom: calc(var(--safe-bottom, 0px) + var(--ospi-dock-clearance, 28px) + 108px) !important;
}

/* =========================================================================
   COMPACT DESKTOP LAYOUT (Owner approved design)
   - Left slim icon rail ~48px (Sessions, Files, Notes, Agents)
   - Collapsible adjacent panel ~280px (Clicking active icon collapses it)
   - Chat fills remaining width
   - NO permanent right panel or permanent system page
   - Top bar compact system controls (Usage, Notifications, Settings)
   - Desktop breakpoint: >=860px with hover:hover and pointer:fine
   ========================================================================= */

@media not all and (min-width: 860px) and (hover: hover) and (pointer: fine) {
  .desktop-rail {
    display: none !important;
  }
  .desktop-hdr-actions {
    display: none !important;
  }
  .desktop-panel-close-btn {
    display: none !important;
  }
}

@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  /* Pager container: horizontal flex, no scroll snapping */
  html.phase3 #pager,
  html.phase5 #pager {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scroll-snap-type: none !important;
    overscroll-behavior-x: none !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* No permanent system page on desktop */
  html.phase3 #page-system,
  html.phase5 #page-system {
    display: none !important;
  }

  /* No live capsule or peek sheet on desktop */
  html.phase3 #live-capsule,
  html.phase3 #capsule-peek-sheet {
    display: none !important;
  }

  /* Sessions page on desktop: placed on the left edge */
  html.phase3 #page-sessions,
  html.phase5 #page-sessions {
    order: -1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex: none !important;
    width: auto !important;
    height: 100% !important;
    min-width: 48px !important;
    overflow: hidden !important;
    background: var(--surface) !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    border-right: none !important;
  }

  /* 1. Slim Left Icon Rail (~48px) */
  .desktop-rail {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 100% !important;
    flex: none !important;
    background: var(--surface2) !important;
    border-right: 1px solid var(--line) !important;
    box-sizing: border-box !important;
    padding: 8px 0 !important;
    z-index: 10 !important;
    user-select: none !important;
  }

  .desktop-rail-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  .desktop-rail-btn {
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
  }

  .desktop-rail-btn:hover {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line2);
  }

  .desktop-rail-btn.on {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  .desktop-rail-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .desktop-rail-btn svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
  }

  .desktop-rail-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--accent, #e57e38);
    color: #fff;
    font: 700 9px/14px var(--mono, monospace);
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px var(--surface2);
  }

  /* 2. Collapsible Adjacent Panel Host (~280px) */
  #page-sessions .desktop-panel-host {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: 100% !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-right: 1px solid var(--line) !important;
    background: var(--surface) !important;
    box-sizing: border-box !important;
    transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), min-width 0.2s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #page-sessions.desktop-panel-collapsed .desktop-panel-host {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    border-right: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Panel Header inside Collapsible Panel */
  .desktop-panel-host .pager-head {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line) !important;
    box-sizing: border-box !important;
    gap: 6px !important;
  }

  .desktop-panel-host .pager-head button[data-page-go="chat"] {
    display: none !important;
  }

  .desktop-panel-host .pager-head strong {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    flex: 1 1 auto !important;
  }

  /* Override the mobile header's 8px 12px button padding: it squeezed
     the collapse caret to 4px wide inside the compact desktop button. */
  .desktop-panel-host .pager-head button.desktop-panel-close-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex: 0 0 32px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--surface2);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .desktop-panel-host .pager-head button.desktop-panel-close-btn:hover {
    background: var(--surface);
    color: var(--text);
  }
  .desktop-panel-close-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .desktop-panel-close-btn svg {
    width: 16px;
    height: 16px;
    flex: none;
  }

  /* Panel Body: #sidebar-panel fills vertical space */
  .desktop-panel-host #sidebar-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
  }

  /* Hide mobile pill and mobile foot actions on desktop */
  #page-sessions #sess-pill-zone,
  #page-sessions .sess-foot-actions {
    display: none !important;
  }

  /* 3. Main Chat Page fills remaining width */
  html.phase3 #page-chat,
  html.phase5 #page-chat {
    order: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  html.phase3 #page-chat #main,
  html.phase5 #page-chat #main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Chat Top Bar on Desktop */
  html.phase3 #page-chat #hdr,
  html.phase5 #page-chat #hdr {
    height: 44px !important;
    padding: 0 !important;
  }

  html.phase3 #page-chat #hdr .hin,
  html.phase5 #page-chat #hdr .hin {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    height: 44px !important;
    gap: 8px !important;
    max-width: none !important;
  }

  /* Hide mobile doors in chat header */
  #page-chat #hdr .pager-header-btn[data-page-go="system"],
  #page-chat #hdr .pager-header-btn[data-page-go="sessions"] {
    display: none !important;
  }

  /* Align title left on desktop */
  #page-chat #hdr .htitle {
    text-align: left !important;
    align-items: flex-start !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
  }

  #page-chat #hdr .htitle-top-row {
    justify-content: flex-start !important;
  }

  #page-chat #hdr .sess-sub-cwd {
    text-align: left !important;
    padding-left: 0 !important;
  }

  /* Compact top bar buttons group */
  .desktop-hdr-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: none !important;
  }

  .desktop-hdr-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .desktop-hdr-btn:hover {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--line2);
  }

  .desktop-hdr-btn:active {
    background: color-mix(in srgb, var(--accent) 15%, var(--surface2));
    color: var(--accent);
  }

  .desktop-hdr-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .desktop-hdr-btn svg {
    width: 18px;
    height: 18px;
  }

  .hdr-notif-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent, #e57e38);
    box-shadow: 0 0 0 1.5px var(--surface);
  }
}