/* ══════════════════════════════════════════════════════════════════════
   Legal Eye · App refresh — DS bundle v2 (2026-06-04)
   Loaded AFTER le-app.css so it overrides cleanly. Non-destructive:
   removing this <link> reverts to the original look.

   Adapted from design_handoff_legal_eye/ui_kits/legal-eye-app/app-directions.css
   to the production class names (.app-shell, .sidebar, .workspace, .welcome,
   .messages, .topbar, .composer) — DS prototype uses .le-* prefix; we don't.

   v451 scope (universal air pass + declutter):
     - workspace padding 48 / 56px (was crammed)
     - workspace-inner max-width 900px (was unbounded)
     - messages gap 36px (was 16-20px)
     - welcome icon bigger, title clamped, subtitle single-line
     - topbar quieter (smaller buttons, lower opacity until hover)
     - composer roomier
     - ornaments-off toggle: body.le-no-motifs strips decorative flourishes
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   UNIVERSAL AIR PASS — calmer everywhere
   ───────────────────────────────────────────────────────────── */

.workspace { padding: 48px 56px 230px; }
.workspace-inner { max-width: 900px; margin-inline: auto; }
.messages { gap: 36px; }

/* ── Welcome — declutter & let it breathe ───────────────────── */
.welcome { margin-top: 7vh; }
.welcome-icon {
  width: 104px; height: 104px; border-radius: 26px;
  margin-bottom: 28px;
  display: grid; place-items: center;
  font-size: 52px;
}
.welcome-title {
  font-size: clamp(34px, 4vw, 46px) !important;
  letter-spacing: -1.2px !important;
  margin-bottom: 16px !important;
  font-family: var(--font-serif);
  font-weight: 900;
}
.welcome-subtitle {
  font-size: 16px; line-height: 1.7;
  max-width: 460px;
  margin-inline: auto;
  margin-bottom: 40px;
  color: var(--fg-2);
}
.welcome-suggestions {
  max-width: 820px;
  margin-inline: auto;
  gap: 16px;
}

/* ── Topbar — calmer, fewer competing glyphs ────────────────── */
.topbar { padding-inline: 28px; }
.topbar-actions { gap: 4px; }
.topbar-btn,
.topbar-actions button {
  opacity: 0.78;
  transition: opacity 0.16s ease;
}
.topbar-btn:hover,
.topbar-actions button:hover { opacity: 1; }

/* ── Composer — match the airy workspace ────────────────────── */
.composer { padding-block: 18px; }

/* ─────────────────────────────────────────────────────────────
   ORNAMENTS-OFF — body.le-no-motifs strips decorative flourishes
   for an ultra-clean read. Toggled by user; persistent in localStorage.
   ───────────────────────────────────────────────────────────── */
body.le-no-motifs .le-stamp-set,
body.le-no-motifs .le-verbatim-stamp,
body.le-no-motifs .welcome-icon { display: none; }
body.le-no-motifs .workspace::before { display: none; }

/* ─────────────────────────────────────────────────────────────
   MOBILE — keep the air pass sensible on small screens (≤760px)
   v2.99.458 — added sidebar → slide-in drawer pattern per DS spec.
   Brief flagged 'sidebar covers 50%+ of phone screen'; this fixes it.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr !important; }

  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;     /* RTL: drawer slides from RIGHT */
    width: 280px;
    max-width: 84vw;
    z-index: 90;
    transform: translateX(104%); /* RTL: positive = off-canvas to the right */
    transition: transform 0.26s ease;
    box-shadow: 0 0 50px rgba(10,20,36,0.4);
  }
  /* Open state — supports both new (body.le-drawer-open) and legacy
     (.sidebar.is-open) markers since toggleSidebar() ships .is-open */
  body.le-drawer-open .sidebar,
  .sidebar.is-open { transform: translateX(0) !important; }

  .le-drawer-scrim {
    position: fixed; inset: 0; z-index: 89;
    background: rgba(10,20,36,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.26s;
  }
  body.le-drawer-open .le-drawer-scrim,
  .sidebar.is-open ~ .le-drawer-scrim {
    opacity: 1; pointer-events: auto;
  }

  /* Hamburger button — floats at top-end (inset-inline-end in RTL = right edge) */
  .le-hamburger {
    position: fixed; top: 12px; inset-inline-end: 12px; z-index: 88;
    width: 44px; height: 44px;
    border-radius: 11px;
    border: 1px solid var(--rule);
    background: rgba(250,247,240,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: grid; place-items: center;
    cursor: pointer;
    font-size: 18px;
    color: var(--ink);
  }
  .le-hamburger:hover { background: rgba(250,247,240,1); }

  /* Workspace — full width when sidebar is drawered */
  .workspace { padding: 64px 16px 220px; }
  .workspace-inner { max-width: 100%; }

  /* Welcome — proportional shrink for small viewport */
  .welcome-icon { width: 84px; height: 84px; font-size: 42px; margin-bottom: 22px; }
  .welcome-icon svg { width: 64px !important; height: 41px !important; }
  .welcome-title { font-size: clamp(26px, 7vw, 34px) !important; }
  .welcome-subtitle { font-size: 15px; margin-bottom: 28px; }
  .welcome-suggestions { grid-template-columns: 1fr !important; }

  /* Topbar — collapse breadcrumbs (low priority on phone) */
  .topbar { padding-inline: 14px; gap: 8px; }
  .topbar-breadcrumb { display: none; }
}

@media (min-width: 761px) {
  .le-hamburger, .le-drawer-scrim { display: none; }
}