/* The chat taskbar (core/taskbar.js; concept docs/decks/top-bar/, "C · Chat
   taskbar", owner's pick 2026-10-01).

   One bar, two homes. In the installed app with Window Controls Overlay on, the
   page extends under the title bar and env(titlebar-area-*) names the strip the
   window controls leave free, so the bar IS the title bar and costs no height.
   Anywhere else (a browser tab, the overlay switched off) those variables are
   undefined, the fallbacks apply, and the same element is a 36px top row of the
   shell grid. Nothing branches on which one it is.

   Desktop only: the base rule hides it, and only min-width: 561px opts in, so
   the phone's layout never sees a rule from this file (CLAUDE.md, "Mobile is
   untouchable"). Nothing here animates or transitions. */

.taskbar { display: none; }

@media (min-width: 561px) {
  .app-shell:not(.is-family) {
    --taskbar-h: env(titlebar-area-height, 36px);
    grid-template-rows: var(--taskbar-h) minmax(0, 1fr);
  }

  .app-shell:not(.is-family) > .taskbar {
    position: relative;
    z-index: 40;
    display: flex;
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    align-items: center;
    gap: 4px;
    /* The window controls' corner, kept clear. Both insets are 0 outside the
       overlay, where the env() fallbacks make the arithmetic collapse. */
    padding: 0 calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 8px) 0 calc(env(titlebar-area-x, 0px) + 8px);
    border-bottom: 1px solid var(--q-line);
    background: var(--q-inset);
    color: var(--q-text-2);
    font: var(--q-weight-regular) var(--q-fs-meta)/1.3 var(--font-ui);
    /* Empty bar is the window's handle; everything you can press opts out. */
    -webkit-app-region: drag;
    app-region: drag;
  }

  .taskbar :is(button, .taskbar-menu) { -webkit-app-region: no-drag; app-region: no-drag; }

  .taskbar-tasks { display: flex; min-width: 0; flex: 0 1 auto; align-items: center; gap: 4px; overflow: hidden; }

  .taskbar-task {
    position: relative;
    display: flex;
    min-width: 132px;
    max-width: 240px;
    height: 28px;
    flex: 0 1 240px;
    align-items: center;
    border-radius: 7px;
    color: var(--q-text-2);
  }
  .taskbar-task:hover { background: var(--q-hover); color: var(--q-text); }
  .taskbar-task[aria-current="true"] { background: var(--q-hover); color: var(--q-text); }
  .taskbar-task.is-drop { background: color-mix(in srgb, var(--q-accent) 22%, var(--q-hover)); box-shadow: inset 0 0 0 1px var(--q-accent); color: var(--q-text); }

  /* Working: the blue underline, still. Waiting: a hollow ring. Needs you: the
     amber dot. The same three signals the list's lanes give. */
  .taskbar-task[data-lane="work"]::after {
    position: absolute; right: 10px; bottom: 0; left: 10px; height: 2px; border-radius: 2px;
    background: var(--q-working); content: "";
  }

  .taskbar-open {
    display: flex;
    min-width: 0;
    height: 100%;
    flex: 1;
    align-items: center;
    gap: 8px;
    padding: 0 2px 0 10px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: var(--q-weight-medium);
    text-align: left;
    cursor: pointer;
  }
  .taskbar-task:is([data-lane="need"], [data-lane="tick"]) .taskbar-open { color: var(--q-text); }
  .taskbar-open .q-row-provider { width: 14px; height: 14px; }
  .taskbar-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .taskbar-state { display: none; width: 8px; height: 8px; flex: none; border-radius: 50%; }
  .taskbar-task[data-lane="need"] .taskbar-state { display: block; background: var(--q-attention); }
  .taskbar-task[data-lane="wait"] .taskbar-state { display: block; box-shadow: inset 0 0 0 1.5px var(--q-waiting); }
  /* A finished reply nobody has read: the list's neutral tick, never amber. */
  .taskbar-task[data-lane="tick"] .taskbar-state { display: block; background: var(--q-text); }

  .taskbar-close {
    display: grid;
    width: 24px;
    height: 24px;
    flex: none;
    place-items: center;
    margin-right: 2px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--q-text-3);
    font: 400 17px/1 var(--font-ui);
    cursor: pointer;
  }
  .taskbar-close:hover { background: var(--q-raised); color: var(--q-text); }

  .taskbar-more {
    position: relative;
    height: 28px;
    flex: none;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--q-text-2);
    font: var(--q-weight-medium) var(--q-fs-meta)/1 var(--font-ui);
    cursor: pointer;
  }
  .taskbar-more:hover, .taskbar-more[aria-expanded="true"] { background: var(--q-hover); color: var(--q-text); }
  .taskbar-more[data-lane="need"]::before { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--q-attention); content: ""; }

  .taskbar-menu {
    position: absolute;
    top: calc(var(--taskbar-h) - 2px);
    /* Under the bar's right end, where +N sits, clear of the window controls. */
    right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 8px);
    z-index: 41;
    display: flex;
    width: 300px;
    max-height: min(480px, 70vh);
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    overflow: auto;
    border-radius: var(--q-radius-control);
    background: var(--q-raised);
    box-shadow: inset 0 0 0 1px var(--q-line-2), 0 14px 40px rgb(0 0 0 / 45%);
  }
  .taskbar-menu[hidden] { display: none; }
  .taskbar-menu .taskbar-task { width: 100%; min-width: 0; max-width: none; height: 34px; flex: none; }
  .taskbar-menu .taskbar-task[data-lane="work"]::after { right: auto; top: 9px; bottom: 9px; left: 0; width: 2px; height: auto; }

}

/* Drawers pinned to the top edge start under the bar, not over it — only at the
   widths where they are fixed drawers rather than grid columns. */
@media (min-width: 561px) and (max-width: 959px) {
  .app-shell:not(.is-family) .context-panel { top: var(--taskbar-h); }
}
@media (min-width: 561px) and (max-width: 1439px) {
  .app-shell:not(.is-family) .inspector-panel { top: var(--taskbar-h); }
}

/* The chat list can be closed once the taskbar can switch chats. Rail's Chats
   while on Chats toggles it (app.js, toggleChatList). The panel stays a grid
   item with a zero-width track: display:none would let the canvas auto-place
   into the list's column. Below 960px the list is already a drawer. */
@media (min-width: 960px) {
  .app-shell.is-list-closed { --context-width: 0px; }
  .app-shell.is-list-closed .context-panel { visibility: hidden; overflow: hidden; border-right: 0; }
}