/*
 * File viewer — non-blocking floating drawer (tablet/desktop) +
 * non-blocking bottom sheet (phone).
 *
 * Replaces the v1 full-screen blocking overlay (rgba backdrop +
 * body.file-viewer-open { overflow: hidden }). The viewer no longer
 * blocks the page: Brian can read a doc while continuing to type in
 * Floor/Chat composers, scroll the message list, etc.
 *
 * Layout:
 *   - phone (≤480px):   bottom sheet, height 60vh/60dvh, anchored
 *                       ABOVE the Floor/Chat composer (76px safe
 *                       collapsed height + safe-area-inset-bottom)
 *   - tablet (481–768): right drawer, 60vw (min 360px, max 480px)
 *   - desktop (>768px): right drawer, min(480px, 90vw)
 *
 * Close mechanisms (THREE retained):
 *   - ✕ button (44×44, mobile-first invariant)
 *   - ESC key (wired in file-viewer.js)
 *   - Click outside viewer surface — REMOVED (no backdrop exists)
 *
 * Background scroll: NOT locked. body.file-viewer-open no longer
 * sets overflow: hidden — the whole point of the redesign.
 *
 * a11y:
 *   - aria-modal="false" (drawer is non-modal; user must be able to
 *     tab out and interact with Floor/Chat)
 *   - role="dialog" kept
 *   - close button receives focus on open; no focus trap
 *
 * Animation: 200ms transform ease-out on open AND close (slide in/out).
 * Honors prefers-reduced-motion.
 *
 * Color tokens come from tokens.css. Visual language mirrors the prior
 * modal so the surface still reads as part of HQ.
 */

/* ── Container (formerly the full-screen overlay) ──────────────────
   The container is now an inert positioner — it has no background,
   does not block clicks outside the viewer panel, and does not stretch
   to inset:0. Default = desktop/tablet right drawer. */
.file-viewer-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* Width is set on .file-viewer-modal so the container hugs the
     panel — the container is invisible and pointer-events: none so
     clicks outside the panel fall through to the page underneath. */
  width: auto;
  z-index: 300; /* above task drawers (200) and tag modals */
  pointer-events: none;
  /* Padding applies safe-area only — no inset:0 spacing now. */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
}

/* The panel itself receives pointer events (container is pass-through). */
.file-viewer-modal {
  pointer-events: auto;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  border-right: none;
  width: min(480px, 90vw);
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
  /* Slide-in animation: transform-only so we don't repaint a backdrop. */
  transform: translateX(100%);
  transition: transform 200ms ease-out;
  will-change: transform;
}

/* When the container is visible (display:flex via JS), slide panel in. */
.file-viewer-overlay[data-open="true"] .file-viewer-modal {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .file-viewer-modal {
    transition: none;
  }
}

/* ── Header ──────────────────────────────────────── */
.file-viewer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.file-viewer__header-text {
  flex: 1 1 auto;
  min-width: 0; /* allow path to truncate */
}

.file-viewer__project {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: 2px;
}

.file-viewer__path {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: var(--text-sm);
  color: var(--color-text);
  word-break: break-all;
  line-height: 1.3;
}

.file-viewer__close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-md);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.file-viewer__close:hover,
.file-viewer__close:focus-visible {
  outline: none;
  border-color: var(--color-amber-glow);
  background: var(--color-panel2);
}

/* ── Body ────────────────────────────────────────── */
.file-viewer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
}

.file-viewer__body:focus {
  outline: none;
}

.file-viewer__body--loading,
.file-viewer__body--error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.file-viewer__loading {
  color: var(--color-dim);
  font-size: var(--text-sm);
}

.file-viewer__loading code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  color: var(--color-text);
  background: var(--color-panel2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.file-viewer__error {
  text-align: center;
  max-width: 360px;
}

.file-viewer__error-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-amber);
  margin-bottom: var(--space-2);
}

.file-viewer__error-message {
  color: var(--color-dim);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Markdown body — reuse message-bubble-ish typography rules. */
.file-viewer__body--md h1,
.file-viewer__body--md h2,
.file-viewer__body--md h3,
.file-viewer__body--md h4 {
  font-family: var(--font-display);
  color: var(--color-text);
  margin: 1.2em 0 0.4em;
  line-height: 1.25;
}
.file-viewer__body--md h1 { font-size: var(--text-2xl); }
.file-viewer__body--md h2 { font-size: var(--text-xl); }
.file-viewer__body--md h3 { font-size: var(--text-lg); }
.file-viewer__body--md h4 { font-size: var(--text-base); font-weight: 700; }

.file-viewer__body--md p {
  margin: 0 0 var(--space-3);
}

.file-viewer__body--md ul,
.file-viewer__body--md ol {
  margin: 0 0 var(--space-3) var(--space-4);
  padding-left: var(--space-3);
}

.file-viewer__body--md li {
  margin-bottom: var(--space-1);
}

.file-viewer__body--md code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.92em;
  background: var(--color-panel2);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: var(--color-amber);
}

.file-viewer__body--md pre {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: var(--text-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  overflow-x: auto;
  margin: var(--space-3) 0;
  -webkit-overflow-scrolling: touch;
}

.file-viewer__body--md pre code {
  background: transparent;
  color: var(--color-text);
  padding: 0;
}

.file-viewer__body--md blockquote {
  border-left: 3px solid var(--color-amber);
  padding-left: var(--space-3);
  margin: var(--space-3) 0;
  color: var(--color-dim);
}

.file-viewer__body--md a {
  color: var(--color-amber);
  text-decoration: underline;
}

.file-viewer__body--md table {
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
  display: block;
  overflow-x: auto;
}

.file-viewer__body--md th,
.file-viewer__body--md td {
  border: 1px solid var(--color-border);
  padding: 6px 10px;
  text-align: left;
}

.file-viewer__body--md th {
  background: var(--color-panel2);
  font-weight: 700;
}

.file-viewer__body--md hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

/* Plaintext / code body — single <pre> child. */
.file-viewer__body--pre {
  padding: 0;
}

.file-viewer__pre {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
  padding: var(--space-5);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text);
}

/* ── Footer ──────────────────────────────────────── */
.file-viewer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-panel2);
  flex-shrink: 0;
  min-height: 44px;
  box-sizing: border-box;
}

.file-viewer__size {
  font-size: var(--text-xs);
  color: var(--color-dim);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}

.file-viewer__raw {
  font-size: var(--text-sm);
  color: var(--color-amber);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.file-viewer__raw:hover,
.file-viewer__raw:focus-visible {
  outline: none;
  background: rgba(212, 165, 116, 0.1);
  text-decoration: underline;
}

/* ── Linkified path token (inside chat / floor bubbles) ── */
.file-path-link {
  color: var(--color-amber);
  background: rgba(212, 165, 116, 0.08);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.92em;
  text-decoration: none;
  cursor: pointer;
  word-break: break-all;
}

.file-path-link:hover,
.file-path-link:focus-visible {
  outline: none;
  background: rgba(212, 165, 116, 0.18);
  text-decoration: underline;
}

/* ── Tablet (481–768px): right drawer, slightly narrower ──────────── */
@media (min-width: 481px) and (max-width: 768px) {
  .file-viewer-modal {
    width: clamp(360px, 60vw, 480px);
  }
}

/* ── Phone (≤480px): bottom sheet ─────────────────────────────────
   The container becomes a bottom-anchored row. The panel becomes a
   bottom sheet sliding up from the bottom edge.

   Composer-collision strategy: anchor sheet's BOTTOM at
     var(--file-viewer-composer-h, 76px) + safe-area-inset-bottom
   so the Floor/Chat composer (collapsed ~68-76px) stays clickable
   below the sheet. When user expands textarea to ~200px (rare,
   user-initiated), the bottom of the sheet overlaps slightly with
   the expanded composer — acceptable tradeoff, surfaced in notes.md.

   The default --file-viewer-composer-h of 76px covers both surfaces;
   either composer can override it locally if needed. */
@media (max-width: 480px) {
  .file-viewer-overlay {
    top: auto; /* unanchor from top */
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0;
  }

  .file-viewer-modal {
    width: 100%;
    height: 60vh;
    height: 60dvh;
    max-height: 60vh;
    max-height: 60dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-right: 1px solid var(--color-border);
    border-bottom: none;
    /* Lift sheet above the composer + safe-area. Falls back to 76px
       if the page hasn't set --file-viewer-composer-h. */
    margin-bottom: calc(
      var(--file-viewer-composer-h, 76px) + env(safe-area-inset-bottom, 0px)
    );
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
    /* Phone slide direction: from below. */
    transform: translateY(100%);
  }

  .file-viewer-overlay[data-open="true"] .file-viewer-modal {
    transform: translateY(0);
  }

  .file-viewer__header {
    padding-left: max(var(--space-5), env(safe-area-inset-left));
    padding-right: max(var(--space-5), env(safe-area-inset-right));
  }

  .file-viewer__footer {
    padding-left: max(var(--space-5), env(safe-area-inset-left));
    padding-right: max(var(--space-5), env(safe-area-inset-right));
  }

  .file-viewer__body {
    padding: var(--space-4);
  }

  .file-viewer__pre {
    padding: var(--space-4);
  }
}