/* =========================================================
   ZAR AI v2 — FULL-SCREEN WORKSPACE LAYOUT (STATE C)

   This is the one state where ZAR legitimately covers the host
   viewport — not by changing the host page's own theme, but by
   ZAR occupying the screen above it. The host canvas underneath
   is untouched and reappears exactly as it was on restore (see
   zar-v2-ui.js's lockHostScroll()/unlockHostScroll() for the
   scroll-position half of that guarantee).

   2026-09 UI HARDENING: this file previously used
   `inset: var(--zar-v2-space-6)` (a 24px-inset "large card"),
   which — combined with `.zar-v2-panel`'s own border/shadow/radius
   it inherits by also carrying that class — read as a big modal
   card floating over the host page, with the host nav still
   visible above it (z-index 990 vs. the real nav's 9999, live-
   confirmed). Rebuilt as a true `inset: 0` takeover with its own
   z-index above the host nav, and with the inherited panel
   decoration explicitly stripped back off (compact keeps it;
   full-screen does not — see the override block below).
========================================================= */

.zar-v2-fullscreen-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--zar-v2-z-fullscreen) - 1);
  background: var(--zar-v2-bg-scrim);
  animation: zar-v2-fade-in var(--zar-v2-duration-base) var(--zar-v2-ease-standard);
}
.zar-v2-fullscreen-scrim[hidden] { display: none; }

.zar-v2-fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh; /* falls back to the fixed inset:0 box in browsers without dvh */
  margin: 0;
  z-index: var(--zar-v2-z-fullscreen);

  /* Application workspace, not a floating card — see components/
     shell.css's .zar-v2-panel for what compact keeps and this
     deliberately sheds. Equal specificity (0,1,0) to .zar-v2-panel's
     own border/box-shadow declarations; wins on source order since
     this file loads after components/shell.css in zar-v2.css. */
  border: 0;
  border-radius: 0;
  box-shadow: none;

  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);

  animation: zar-v2-fullscreen-in var(--zar-v2-duration-slow) var(--zar-v2-ease-emphasized);
}

.zar-v2-fullscreen__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  container: zar-v2-main / inline-size;

  /* 2026-09-06 CRITICAL DEFECT A fix: this is a GRID ITEM of
     .zar-v2-fullscreen (display:grid), and a grid item's block-axis
     min-size defaults to `auto` — i.e. it will not shrink below its
     own content's intrinsic height, exactly like a flex item's
     default min-height. Without this override, a long conversation
     grew this column (and therefore the whole fixed-position
     .zar-v2-fullscreen box, which sets no overflow of its own) taller
     than the 100dvh viewport instead of ever handing overflow down to
     .zar-v2-panel__body's own `overflow-y: auto` (components/
     shell.css) — that rule never activated because its ancestor chain
     never actually constrained its available height. min-height: 0
     lets this column stay pinned to the grid's stretched (100dvh) row
     height, so .zar-v2-panel__body becomes the one true scroll
     container, exactly as shell.css already intends. */
  min-height: 0;
}

/* 2026-09-06 | Contextual City workspace.
   The conversation remains the canonical scrolling narrative. On a
   sufficiently wide fullscreen workspace, the existing trusted City
   component for the active turn is projected into one sticky dock;
   compact and narrow layouts keep the original chronological flow. */
.zar-v2-fullscreen__workspace {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
}

.zar-v2-fullscreen__workspace > .zar-v2-panel__body {
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.zar-v2-artifact-dock {
  min-width: 0;
  min-height: 0;
  position: sticky;
  top: var(--zar-v2-space-4);
  width: 100%;
  max-height: var(--zar-v2-artifact-max-height, calc(100dvh - 180px));
  border: 1px solid var(--zar-v2-border-subtle);
  border-radius: var(--zar-v2-radius-lg);
  background: color-mix(in srgb, var(--zar-v2-bg-surface) 88%, transparent);
  box-shadow: var(--zar-v2-shadow-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* ==========================================================================
   PATCH: ZAR AI v2 — Unified live turn fade-and-rise transition
   DATE.TIME: 2026-09-07 07:36 EEST
   SHORT REASON:
   Give live assistant answers and their contextual artifacts the same subtle
   upward entrance motion so a new turn reads as one coordinated transition
   rather than separate elements abruptly appearing.
   ========================================================================== */

.zar-v2-live-enter {
  animation:
    zar-v2-live-enter
    220ms
    var(--zar-v2-ease-emphasized)
    both;
}

@keyframes zar-v2-live-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.zar-v2-turn__artifact-slot > .zar-v2-live-enter {
  animation-delay: 45ms;
}
.zar-v2-artifact-dock[hidden] { display: none; }
.zar-v2-artifact-dock.is-closing { animation: zar-v2-artifact-out 140ms var(--zar-v2-ease-standard) forwards; }
@keyframes zar-v2-artifact-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes zar-v2-artifact-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(8px); }
}

.zar-v2-artifact-dock__header {
  flex: 0 0 auto;
  min-height: 58px;
  padding: var(--zar-v2-space-3) var(--zar-v2-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zar-v2-space-3);
  border-bottom: 1px solid var(--zar-v2-border-subtle);
}

.zar-v2-artifact-dock__eyebrow {
  display: block;
  color: var(--zar-v2-text-muted);
  font-size: var(--zar-v2-font-size-xs);
  font-weight: var(--zar-v2-font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zar-v2-artifact-dock__actions { display: flex; gap: var(--zar-v2-space-1); }
/* ==========================================================================
   PATCH: ZAR AI v2 — Multi-City artifact spacing
   DATE.TIME: 2026-09-07 01:19 EEST
   SHORT REASON:
   Contextual Artifact may contain multiple independently-owned City results.
   Render them as a vertical stack with consistent separation while preserving
   the existing internal artifact scrollbar.
   ========================================================================== */

.zar-v2-artifact-dock__body {
  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  flex-direction: column;
  gap: var(--zar-v2-space-4);

  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--zar-v2-space-4);
}

/* PATCH: Concept City license popover clipped in contextual artifact
   DATE.TIME: 2026-09-07 12:00
   REASON: dock is overflow:hidden/auto, so the desktop position:absolute
   "License details" popover was clipped; expand it in-flow here instead. */
@media (min-width: 769px) {
  .zar-v2-artifact-dock__body .guard-license-details[data-expanded="true"] {
    position: static;
    inset: auto;
    width: auto;
    max-width: 100%;
    max-height: 42rem;
    overflow: auto;
    z-index: auto;
    animation: none;
  }

  .zar-v2-artifact-dock__body .guard-license-details[data-expanded="true"]::before {
    display: none;
  }
}
.zar-v2-artifact-dock__body {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.zar-v2-artifact-dock__body:hover { scrollbar-color: var(--zar-v2-border-strong) transparent; }
.zar-v2-artifact-dock__body::-webkit-scrollbar { width: 5px; }
.zar-v2-artifact-dock__body::-webkit-scrollbar-track,
.zar-v2-artifact-dock__body::-webkit-scrollbar-thumb { background: transparent; }
.zar-v2-artifact-dock__body::-webkit-scrollbar-thumb { border-radius: var(--zar-v2-radius-pill); }
.zar-v2-artifact-dock__body:hover::-webkit-scrollbar-thumb { background: var(--zar-v2-border-strong); }
.zar-v2-artifact-dock__body::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
.zar-v2-artifact-dock .zar-source-tooltip { display: none !important; }
.zar-v2-artifact-tooltip-portal {
  position: fixed;
  z-index: calc(var(--zar-v2-z-fullscreen) + 3);
  max-width: min(340px, calc(100vw - 16px));
  padding: 6px 8px;
  border: 1px solid var(--zar-v2-border-strong);
  border-radius: var(--zar-v2-radius-sm);
  background: var(--zar-v2-bg-surface);
  color: var(--zar-v2-text-primary);
  box-shadow: var(--zar-v2-shadow-2);
  font-size: var(--zar-v2-font-size-xs);
  line-height: 1.35;
  pointer-events: none;
}
.zar-v2-artifact-tooltip-portal[hidden] { display: none; }
/* ==========================================================================
   PATCH: ZAR AI v2 — Space multiple City blocks inside contextual artifact
   DATE.TIME: 2026-09-07 01:27 EEST
   SHORT REASON:
   A single request may return multiple City blocks inside one
   .zar-v2-city-result wrapper. The artifact body therefore sees only one
   child, so its own flex gap cannot separate Concept, Research, Wikipedia,
   or other City cards. Make the request-owned wrapper a vertical stack and
   apply spacing between its City blocks without changing request ownership.
   ========================================================================== */

.zar-v2-artifact-dock__body > .zar-v2-city-result {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--zar-v2-space-4);
}

/* Browser layout, not active-card swapping, owns the relationship.
   The grid row becomes as tall as the larger visible contributor;
   its right slot is the sticky containing block and ends with the turn. */
.zar-v2-fullscreen .zar-v2-conversation {
  max-width: 1380px;
  gap: var(--zar-v2-space-6);
}
/* ==========================================================================
   PATCH: ZAR AI v2 — Center each conversation turn by its own layout role
   NAME: GPT-5.6 Sol
   DATE.TIME: 2026-09-07 01:05 EEST
   SHORT REASON:
   Normal turns remain centered at readable chat width, while artifact turns
   receive their own centered 1380px two-column boundary. This avoids using
   the outer conversation container itself as the desktop width constraint.
   ========================================================================== */

.zar-v2-turn {
  width: 100%;
  min-width: 0;
}

/* ==========================================================================
   PATCH: ZAR AI v2 — Widen multi-City contextual artifact column
   DATE.TIME: 2026-09-07 01:19 EEST
   SHORT REASON:
   Contextual Artifact can contain one or several City results. Increase the
   artifact column so existing City cards retain their intended desktop layout
   while keeping the conversational column at a readable width.
   ========================================================================== */

.zar-v2-turn.has-artifact {
  display: grid;
  width: min(100%, 1500px);
  margin-inline: auto;

  grid-template-columns:
    minmax(520px, 820px)
    minmax(440px, 640px);

  justify-content: center;
  align-items: stretch;
  gap: var(--zar-v2-space-6);
}

.zar-v2-turn:not(.has-artifact) {
  width: min(100%, 820px);
  margin-inline: auto;
}
.zar-v2-turn__conversation {
  display: flex;
  flex-direction: column;
  gap: var(--zar-v2-space-5);
  min-width: 0;
}
.zar-v2-turn__artifact-slot { min-width: 0; align-self: stretch; }
.zar-v2-turn:not(.has-artifact) > .zar-v2-turn__artifact-slot { display: none; }
/* ==========================================================================
   PATCH: ZAR AI v2 — Smooth live conversation turn transition
   DATE.TIME: 2026-09-07 01:30 EEST
   SHORT REASON:
   Give newly created live turns a restrained fade-and-rise transition so
   conversation progression feels continuous without affecting layout or
   replaying animations during history hydration.
   ========================================================================== */

.zar-v2-turn.is-entering {
  animation:
    zar-v2-turn-enter
    220ms
    var(--zar-v2-ease-emphasized)
    both;
}

@keyframes zar-v2-turn-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@container zar-v2-main (max-width: 979px) {
  .zar-v2-fullscreen__workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-inline: 0;
  }
  .zar-v2-fullscreen__workspace > .zar-v2-panel__body {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .zar-v2-turn,
  .zar-v2-turn.has-artifact { display: block; max-width: 820px; margin-inline: auto; }
  .zar-v2-turn__artifact-slot { display: none; }
}

.zar-v2-fullscreen .zar-v2-panel__body { padding: 0; }

/* Safe-area padding for notches/home-indicators — additive to the
   existing padding, resolves to 0 on non-notched devices. */
  .zar-v2-fullscreen .zar-v2-panel__header {
    padding-top: calc(var(--zar-v2-space-3) + env(safe-area-inset-top));
  }

  /* ==========================================================================
    PATCH: ZAR AI v2 — Theme-aware fullscreen grid glass footer
    NAME: ChatGPT · GPT-5.6 Sol
    DATE.TIME: 2026-09-05 13:40 EEST
    SHORT EXPLANATION:
    Make the fullscreen composer footer visually continue ZAR's existing
    theme-aware grid instead of appearing as a separate solid bar. The same
    semantic grid/surface tokens automatically follow dark and light themes.
    ========================================================================== */

  .zar-v2-fullscreen .zar-v2-panel__footer {
    padding-bottom: calc(var(--zar-v2-space-3) + env(safe-area-inset-bottom));

    border-top: 1px solid var(--zar-v2-grid-line);

    background:
      linear-gradient(var(--zar-v2-grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--zar-v2-grid-line) 1px, transparent 1px),
      color-mix(in srgb, var(--zar-v2-bg-surface) 72%, transparent);

    background-size:
      22px 22px,
      22px 22px,
      auto;

    /* ==========================================================================
      PATCH: ZAR AI v2 — Lock fullscreen footer grid to workspace grid
      NAME: ChatGPT · GPT-5.6 Sol
      DATE.TIME: 2026-09-05
      SHORT EXPLANATION:
      Anchor the footer grid to the viewport instead of restarting its grid
      phase from the footer's own top-left corner. Because fullscreen ZAR is
      inset:0, this makes the composer-area grid align pixel-for-pixel with
      the conversation workspace at every viewport size.
      ========================================================================== */

    background-attachment:
      fixed,
      fixed,
      scroll;

    background-position:
      0 0,
      0 0,
      0 0;

    -webkit-backdrop-filter: blur(8px) saturate(115%);
    backdrop-filter: blur(8px) saturate(115%);
  }

  /* ==========================================================================
    PATCH: ZAR AI v2 — Center turn-bounded artifact rows independently
    NAME: GPT-5.6 Sol
    DATE.TIME: 2026-09-07 01:05 EEST
    SHORT REASON:
    Keep the conversation surface full-width and apply readable-width limits
    to individual turns instead. This prevents artifact-bearing rows from
    appearing left-shifted while preserving 820px normal chat turns and a
    centered 1380px desktop chat + contextual-artifact workspace.
    ========================================================================== */

  .zar-v2-fullscreen .zar-v2-conversation {
    max-width: none;
    margin: 0;
    width: 100%;
  }

  /* ==========================================================================
    PATCH: ZAR AI v2 — Hover-only themed fullscreen input scrollbar
    NAME: ChatGPT · GPT-5.6 Sol
    DATE.TIME: 2026-09-05 13:40 EEST
    SHORT EXPLANATION:
    Keep the fixed-width fullscreen composer and internal draft scrolling,
    but reduce the textarea scrollbar to a thin theme-aware indicator that
    remains visually hidden until the user hovers the input.
    ========================================================================== */

  @media (min-width: 901px) {
    .zar-v2-fullscreen .zar-v2-composer {
      width: 100%;
      max-width: 820px;
      margin-inline: auto;

      background: transparent;

      -webkit-backdrop-filter: blur(12px) saturate(120%);
      backdrop-filter: blur(12px) saturate(120%);
    }

    .zar-v2-fullscreen .zar-v2-composer__input {
      min-width: 0;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;

      /* Firefox: present but invisible until textarea hover. */
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
    }

    .zar-v2-fullscreen .zar-v2-composer__input:hover {
      scrollbar-color: var(--zar-v2-border-strong) transparent;
    }

    /* Chromium / Edge / Safari */
    .zar-v2-fullscreen .zar-v2-composer__input::-webkit-scrollbar {
      width: 5px;
    }

    .zar-v2-fullscreen .zar-v2-composer__input::-webkit-scrollbar-track {
      background: transparent;
    }

    .zar-v2-fullscreen .zar-v2-composer__input::-webkit-scrollbar-thumb {
      background: transparent;
      border-radius: 999px;
    }

    .zar-v2-fullscreen .zar-v2-composer__input:hover::-webkit-scrollbar-thumb {
      background: var(--zar-v2-border-strong);
    }

    /* Remove the native Windows/Chromium arrow buttons visible in the
      current screenshot. */
    .zar-v2-fullscreen .zar-v2-composer__input::-webkit-scrollbar-button {
      width: 0;
      height: 0;
      display: none;
    }

    .zar-v2-fullscreen .zar-v2-composer__input::-webkit-scrollbar-corner {
      background: transparent;
    }
  }

/* Sidebar: a workspace rail, not a floating card — no radius
   against the true viewport edge it now sits flush with. */
.zar-v2-sidebar { border-radius: 0; }

/* The mobile drawer scrim must be taken out of normal flow at EVERY
   width, not only inside the max-width:900px block below — it is a
   direct child of the grid container (.zar-v2-fullscreen), so at desktop
   widths an unstyled version of it would otherwise become an
   unintended third grid item and displace the sidebar/main columns. */
.zar-v2-sidebar__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--zar-v2-z-fullscreen);
  background: var(--zar-v2-bg-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--zar-v2-duration-base) var(--zar-v2-ease-standard);
}

@keyframes zar-v2-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes zar-v2-fullscreen-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
/* ==========================================================================
   PATCH: ZAR AI v2 — Respect reduced motion for turn transitions
   DATE.TIME: 2026-09-07 01:30 EEST
   SHORT REASON:
   Extend the existing reduced-motion contract to the new live turn entrance.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .zar-v2-fullscreen,
  .zar-v2-fullscreen-scrim,
  .zar-v2-artifact-dock,
  .zar-v2-artifact-dock.is-closing,
  .zar-v2-turn.is-entering {
    animation: none;
  }
}
/* ==========================================================================
   PATCH: ZAR AI v2 — Reduced-motion live turn entrance
   DATE.TIME: 2026-09-07 07:36 EEST
   SHORT REASON:
   Keep the coordinated turn transition compliant with the existing ZAR AI v2
   reduced-motion policy.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .zar-v2-live-enter {
    animation: none;
  }
}
/* ---- header grid: adds the "menu" column only where the sidebar-
   toggle hamburger is actually visible (<=900px) — see components/
   shell.css's own header comment for why the desktop/compact shape
   (3 columns, no menu button in the DOM at all for compact) is the
   default and this is additive, not a replacement. ---------------- */
.zar-v2-fullscreen__menu-btn { display: none; }

@media (max-width: 900px) {
  .zar-v2-fullscreen {
    grid-template-columns: 1fr;
  }

  .zar-v2-fullscreen .zar-v2-panel__header {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "menu identity model actions";
  }

  .zar-v2-fullscreen__menu-btn {
    grid-area: menu;
    display: inline-flex;
  }

  .zar-v2-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: calc(var(--zar-v2-z-fullscreen) + 1);
    width: min(300px, 82vw);
    transform: translateX(-100%);
    transition: transform var(--zar-v2-duration-base) var(--zar-v2-ease-emphasized);
    /* Mobile-only exception to the desktop "no radius against the
       viewport edge" rule above: this is a slide-out drawer over a
       scrim, not a column flush against two edges — a rounded
       trailing edge is the expected drawer affordance here, not the
       "floating card" look Issue D was about. */
    border-radius: 0 var(--zar-v2-radius-lg) var(--zar-v2-radius-lg) 0;
  }

  .zar-v2-fullscreen[data-sidebar-open="true"] .zar-v2-sidebar {
    transform: translateX(0);
    box-shadow: var(--zar-v2-shadow-4);
  }

  .zar-v2-fullscreen[data-sidebar-open="true"] .zar-v2-sidebar__scrim {
    opacity: 1;
    pointer-events: auto;
  }
}