/* ══════════════════════════════════════════════════════════════════════ Legal Eye · Workspace — Airy redesign layer Loaded AFTER styles.css so it overrides cleanly. Non-destructive: removing this reverts to the original look. Three switchable directions (set on ): calm · single-column editorial, maximum air (default) focused · main analysis + right rail scholar · refined three-column Talmud page Plus a universal "air pass" + feature-priority declutter applied to all. ══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── MOBILE · sidebar → slide-in drawer, single-column workspace (≤760px) ───────────────────────────────────────────────────────────── */ @media (max-width: 760px) { .le-shell { grid-template-columns: 1fr; } .le-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: 280px; max-width: 84vw; z-index: 90; transform: translateX(-104%); transition: transform 0.26s ease; box-shadow: 0 0 50px rgba(10,20,36,0.4); } [dir="rtl"] .le-sidebar { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(104%); } body.le-drawer-open .le-sidebar { transform: translateX(0); } .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 { opacity: 1; pointer-events: auto; } .le-hamburger { position: fixed; top: 12px; inset-inline-start: 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); display: grid; place-items: center; cursor: pointer; font-size: 18px; color: var(--ink); } [dir="rtl"] .le-hamburger { inset-inline-start: auto; inset-inline-end: 12px; } .le-workspace { padding: 64px 16px 220px; } .le-talmud { grid-template-columns: 1fr !important; grid-template-areas: "center" "pro" "con" !important; } .le-welcome-suggestions { grid-template-columns: 1fr !important; } .le-composer { inset-inline: 0 !important; padding-inline: 12px !important; } .le-oc-split { grid-template-columns: 1fr !important; } } @media (min-width: 761px) { .le-hamburger, .le-drawer-scrim { display: none; } } /* ───────────────────────────────────────────────────────────── MIDNIGHT · keep the sidebar dark chrome .le-sidebar uses background: var(--ink) — which the Midnight theme inverts to ivory. The sidebar is chrome and must stay dark in both themes, so pin it here. ───────────────────────────────────────────────────────────── */ body[data-theme="midnight"] .le-sidebar { background: #0a1424; color: var(--fg-on-dark); border-inline-start: 1px solid rgba(217, 184, 92, 0.16); } body[data-theme="midnight"] .le-sidebar-logo { background: rgba(20, 30, 55, 0.7); border: 1px solid rgba(217, 184, 92, 0.25); } /* ───────────────────────────────────────────────────────────── UNIVERSAL AIR PASS — calmer everywhere, regardless of direction ───────────────────────────────────────────────────────────── */ .le-workspace { padding: 48px 56px 230px; } .le-workspace-inner { max-width: 900px; } .le-messages { gap: 36px; } /* ── Welcome — declutter & let it breathe ───────────────────── */ .le-welcome { margin-top: 7vh; } .le-welcome-icon { width: 104px; height: 104px; border-radius: 26px; margin-bottom: 28px; } .le-welcome-title { font-size: clamp(34px, 4vw, 46px); letter-spacing: -1.2px; margin-bottom: 16px; } .le-welcome-subtitle { font-size: 16px; line-height: 1.7; max-width: 460px; margin-bottom: 40px; color: var(--fg-2); } /* Resume → quiet single inline line, not a heavy card */ .le-welcome-resume { max-width: 560px; margin: 0 auto 40px; background: transparent; border: 0; padding: 0; } .le-welcome-resume-head { margin-bottom: 8px; opacity: 0.8; } .le-welcome-resume-card { padding: 13px 16px; border-radius: 10px; background: var(--bg-surface); display: flex; align-items: center; gap: 14px; } .le-welcome-resume-q { flex: 1; } .le-welcome-resume-meta { margin-top: 0; gap: 12px; } /* Suggestions — roomier grid, more padding per card */ .le-welcome-suggestions { max-width: 820px; gap: 16px; } .le-welcome-card { padding: 24px 22px 22px; border-radius: 14px; } .le-welcome-card-illust { width: 60px; height: 60px; margin-bottom: 16px; } .le-welcome-card-title { font-size: 15px; line-height: 1.4; margin-bottom: 8px; } .le-welcome-card-tag { margin-bottom: 10px; } /* ── Topbar — calmer, fewer competing glyphs ────────────────── */ .le-topbar { padding-inline: 28px; } .le-topbar-actions { gap: 4px; } .le-topbar-btn { width: 34px; height: 34px; opacity: 0.78; } .le-topbar-btn:hover { opacity: 1; } /* ── Streaming "done" banner — quieter, more padding ────────── */ .le-flow-banner { padding: 16px 20px !important; line-height: 1.65; border-radius: 12px; } /* ── Assistant header confidence pill — the single strength cue ─ */ .le-msg-assistant-confidence { border: 1px solid var(--rule); border-radius: 999px; padding: 3px 12px; } /* ───────────────────────────────────────────────────────────── FEATURE PRIORITY · demote decoration The three rotated verbatim stamps are a signature flourish but low day-to-day utility. By default keep ONLY the verbatim stamp, centered and upright. Scholar restores the full set; "ornaments off" hides all. ───────────────────────────────────────────────────────────── */ .le-stamp-set { justify-content: center; gap: 0; margin-top: 28px; } .le-stamp-set .le-stamp { display: none; } .le-stamp-set .le-stamp:last-child { display: flex; --le-stamp-rotation: 0deg !important; } /* Ornaments-off — strip every decorative flourish for an ultra-clean read */ body.le-no-motifs .le-stamp-set { display: none; } body.le-no-motifs .le-welcome-card-illust { display: none; } body.le-no-motifs .le-main::before { display: none; } body.le-no-motifs .le-talmud-tag { opacity: 0.5; } /* Grid-area names so each direction can re-flow the same three children */ .le-talmud-center { grid-area: center; } .le-talmud-side--pro { grid-area: pro; } .le-talmud-side--con { grid-area: con; } /* ══════════════════════════════════════════════════════════════ DIRECTION · רגוע (CALM) — single-column editorial, max air ══════════════════════════════════════════════════════════════ */ body[data-direction="calm"] .le-talmud { grid-template-columns: 1fr; grid-template-areas: "center" "pro" "con"; gap: 0; border: 0; background: transparent; box-shadow: none; margin-top: 8px; } body[data-direction="calm"] .le-talmud-center { padding: 0 0 4px; background: transparent; } body[data-direction="calm"] .le-talmud-q { font-size: 32px; line-height: 1.2; } body[data-direction="calm"] .le-talmud-body { font-size: 17px; line-height: 1.85; } /* pro / con become full-width stacked source groups */ body[data-direction="calm"] .le-talmud-side { padding: 28px 0 0 !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--rule) !important; margin-top: 28px; } body[data-direction="calm"] .le-talmud-side-head { margin-bottom: 14px; } body[data-direction="calm"] .le-talmud-source-excerpt { font-size: 14px; line-height: 1.7; } body[data-direction="calm"] .le-talmud-source-title { font-size: 15px; } /* roomy claim divider */ body[data-direction="calm"] .le-talmud-rule { margin: 16px 0 24px; } /* ══════════════════════════════════════════════════════════════ DIRECTION · ממוקד (FOCUSED) — wide analysis + right rail ══════════════════════════════════════════════════════════════ */ body[data-direction="focused"] .le-talmud { grid-template-columns: 1fr 320px; grid-template-areas: "center pro" "center con"; gap: 0; } body[data-direction="focused"] .le-talmud-center { padding: 36px 40px; } body[data-direction="focused"] .le-talmud-q { font-size: 30px; } body[data-direction="focused"] .le-talmud-body { font-size: 16.5px; line-height: 1.82; } body[data-direction="focused"] .le-talmud-side { padding: 26px 22px; border: 0; border-inline-start: 1px solid var(--rule); } body[data-direction="focused"] .le-talmud-side--pro { border-bottom: 1px solid var(--rule); } body[data-direction="focused"] .le-talmud-source-excerpt { font-size: 13px; } /* ══════════════════════════════════════════════════════════════ DIRECTION · מלומד (SCHOLAR) — refined three-column Talmud ══════════════════════════════════════════════════════════════ */ body[data-direction="scholar"] .le-talmud { grid-template-columns: 264px 1fr 264px; grid-template-areas: "pro center con"; } body[data-direction="scholar"] .le-talmud-side { padding: 34px 26px; } body[data-direction="scholar"] .le-talmud-center { padding: 44px 48px 34px; } body[data-direction="scholar"] .le-talmud-q { font-size: 30px; } body[data-direction="scholar"] .le-talmud-body { font-size: 16.5px; line-height: 1.85; } body[data-direction="scholar"] .le-talmud-source-title { font-size: 14.5px; } body[data-direction="scholar"] .le-talmud-source-excerpt { font-size: 13.5px; line-height: 1.65; } /* Scholar keeps the full set of stamps, fanned as if just pressed */ body[data-direction="scholar"] .le-stamp-set { gap: 24px; } body[data-direction="scholar"]:not(.le-no-motifs) .le-stamp-set .le-stamp { display: flex; } body[data-direction="scholar"] .le-stamp-set .le-stamp:nth-child(1) { --le-stamp-rotation: -8deg !important; } body[data-direction="scholar"] .le-stamp-set .le-stamp:nth-child(2) { --le-stamp-rotation: 6deg !important; } body[data-direction="scholar"] .le-stamp-set .le-stamp:nth-child(3) { --le-stamp-rotation: -3deg !important; } /* ── Responsive: collapse focused/scholar rails on narrow viewports ── */ @media (max-width: 900px) { body[data-direction="focused"] .le-talmud, body[data-direction="scholar"] .le-talmud { grid-template-columns: 1fr; grid-template-areas: "center" "pro" "con"; } body[data-direction="focused"] .le-talmud-side, body[data-direction="scholar"] .le-talmud-side { border: 0 !important; border-top: 1px solid var(--rule) !important; } .le-workspace { padding: 32px 20px 220px; } } /* ───────────────────────────────────────────────────────────── FEEDBACK · answer rating (maps to POST /v1/feedback) Quiet bar after the answer; reveals reason chips on 👎. ───────────────────────────────────────────────────────────── */ .le-fb { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); } .le-fb-row { display: flex; align-items: center; gap: 12px; } .le-fb-q { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3px; color: var(--fg-3); } .le-fb-btn { width: 38px; height: 34px; border-radius: 8px; background: var(--bg-surface); border: 1px solid var(--rule); cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center; transition: border-color 0.15s, transform 0.12s, background 0.15s; } .le-fb-btn:hover { transform: translateY(-1px); border-color: var(--gold); } .le-fb-btn.is-on.up { border-color: var(--success); background: var(--success-soft); } .le-fb-btn.is-on.down { border-color: var(--danger); background: var(--danger-soft); } .le-fb-reasons { margin-top: 16px; } .le-fb-reasons-label { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-bottom: 10px; } .le-fb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .le-fb-chip { font-family: var(--font-sans); font-size: 13px; color: var(--fg-1); background: var(--bg-surface); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: all 0.15s; } .le-fb-chip:hover { border-color: var(--gold); } .le-fb-chip.is-on { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); font-weight: 600; } .le-fb-send { background: var(--gold); color: #fff; border: 0; border-radius: 8px; padding: 8px 20px; font-family: var(--font-sans); font-weight: 700; font-size: 13px; cursor: pointer; } .le-fb-send:hover { background: var(--gold-strong); } .le-fb--sent { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 14px; color: var(--success); } .le-fb-tick { width: 24px; height: 24px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }