/* The side panel and the stage beside it: the body's grid, the views'
   scrollers and their heading rows' reach, the resize handle, the
   panel's rows and group headings, and the Now section. */
@layer views {
  /* The side panel: a column between the rail and every view, holding the
     view's own section (the agents list on Agents). On a desk the floating
     toggle collapses it on every view (panel.js); on a phone it is a drawer
     (see the phone rules below). The stage keeps each view's full-height
     chain, the Focus frame's included. */
  .body {
    --controls-h: 64px;
    --panel-col: var(--panel-w, 288px);
    display: grid;
    grid-template-columns: var(--panel-col) minmax(0, 1fr);
    flex: 1;
    min-height: 0;
  }

  .panel {
    min-height: 0;
    padding: 24px;
    overflow: auto;
    border-right: 1px solid var(--line);
  }

  .stage {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  /* The views' scrollers clear the floating controls with their top
     padding, and what scrolls into view stops under the controls. --page-x
     is their side padding and --column their content column's width, which
     the heading row reads too. */
  .feed-page,
  .focus-page,
  .ideas-page,
  #view-goals,
  #view-health {
    --page-top: calc(var(--controls-h) + 8px);
    --page-x: 34px;
    --column: 680px;
    scroll-padding-top: var(--controls-h);
  }
  #view-goals,
  #view-health { --column: 720px; }

  .feed-page > .view-head,
  .feed-page > .filter-panel,
  .focus-page > .view-head,
  .ideas-page > .view-head,
  .ideas-page > .filter-panel,
  #view-goals > .view-head,
  #view-health > .view-head {
    width: auto;
    max-width: none;
    margin-right: calc(-1 * var(--page-x));
    margin-left: calc(-1 * var(--page-x));
  }

  #view-goals,
  #view-health {
    min-height: 0;
    padding: var(--page-top) var(--page-x) 96px;
    overflow: auto;
  }

  /* The panel's right edge, a handle that sets its width on a desk (panel.js).
     It sits on the body rather than in the panel so it stays put while the
     panel scrolls. While it drags, the stage takes no pointer, so the Focus
     frame cannot swallow the drag. */
  .panel-resize {
    display: none;
  }

  @media (min-width: 720px) {
    .body {
      position: relative;
    }

    .shell.panel-collapsed .body {
      grid-template-columns: minmax(0, 1fr);
    }

    /* While an agent's settings (340px) are open beside its thread, the
       side panel gives way, down to its own 220px minimum, so the thread
       keeps 320px, a phone's width; the stored width comes back when the
       settings close. */
    .body:has(#agent-details.is-open) {
      --panel-col: clamp(220px, calc(100% - 660px), var(--panel-w, 288px));
    }

    .shell.panel-collapsed .panel {
      display: none;
    }

    .panel-resize {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: calc(var(--panel-col) - 3px);
      z-index: 2;
      width: 6px;
      cursor: col-resize;
      touch-action: none;
    }

    .panel-resize::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 2px;
      width: 2px;
      background: transparent;
      transition: background 120ms ease;
    }

    .panel-resize:hover::after,
    .shell.panel-resizing .panel-resize::after {
      background: var(--rule);
    }

    .panel-resize:focus-visible {
      outline: none;
    }

    .panel-resize:focus-visible::after {
      background: var(--green);
    }

    .shell.panel-collapsed .panel-resize {
      display: none;
    }

    .shell.panel-resizing,
    .shell.panel-resizing * {
      cursor: col-resize;
      user-select: none;
      -webkit-user-select: none;
    }

    .shell.panel-resizing .stage {
      pointer-events: none;
    }
  }

  /* A panel's rows and the headings over its groups, shared by every view's
     section. */
  .panel-heading {
    margin: 20px 0 6px;
    padding: 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .panel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .panel-row:hover { background: var(--hover-tint); }
  .panel-row[aria-current="true"] {
    background: var(--paper);
    box-shadow: 0 1px 3px var(--shadow-tint);
  }

  .panel-row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel-row-count {
    flex: none;
    color: var(--muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  /* The Now section (panel.js): a row of two lines, the second muted, and a
     sentence under a group's heading when it is empty. */
  [data-panel-for="now"] > .now-group:first-child > .panel-heading { margin-top: 0; }

  .panel-row.now-row {
    height: auto;
    min-height: 40px;
    padding: 7px 12px;
  }
  div.panel-row.now-row { cursor: default; }
  div.panel-row.now-row:hover { background: none; }

  .now-row-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }

  .now-row-detail {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .now-empty {
    margin: 0;
    padding: 0 12px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
  }

  /* Thin, quiet scrollbar on the side panel. */
  .panel {
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }

  @media (max-width: 719.98px) {
    .body { --controls-h: 56px; }

    .feed-page,
    .focus-page,
    .ideas-page,
    #view-goals,
    #view-health { --page-x: 16px; }

    /* The side panel is a drawer from the left that fills the screen
       above the bottom nav bar. The floating controls' band stays over its
       top, so the toggle that opened it closes it and the menu stays in
       reach; the drawer's top padding clears the band by 20px, and a view's
       section may raise its own top row into the band between them.
       panel.js opens and closes it; nothing stores it. */
    .body {
      position: relative;
      grid-template-columns: minmax(0, 1fr);
    }

    .panel {
      position: absolute;
      inset: 0;
      z-index: 4;
      padding: calc(var(--controls-h) + 20px) 16px 20px;
      border-right: 0;
      background: var(--paper);
      transform: translateX(-100%);
      visibility: hidden;
    }

    .shell.panel-open .panel {
      transform: none;
      visibility: visible;
    }

    /* It slides only once a phone has opened it (panel.js), so a desk that
       narrows to a phone hides it at once instead of sliding it over the
       view. */
    .shell.panel-slides .panel {
      transition: transform 200ms ease, visibility 0s linear 200ms;
    }

    .shell.panel-slides.panel-open .panel {
      transition: transform 200ms ease;
    }

    @media (prefers-reduced-motion: reduce) {
      .shell.panel-slides .panel,
      .shell.panel-slides.panel-open .panel { transition: none; }
    }
  }
}