/* ========================================================== LEDdy — Sunrise components Companion to leddy-tokens.css (load tokens FIRST). Recreates the handoff prototypes as reusable classes for the server-rendered PHP templates. Plain CSS, no runtime. Sections 1 Reset & page shells 2 Header (chat + admin pages) 3 Buttons 4 Forms 5 Banners 6 Cards / panels 7 Modals 8 Chat: conversation, bubbles, status, feedback 9 Chat: empty state 10 Chat: composer 11 History drawer 12 History page 13 Login 14 Mobile 15 Request access (split panel) 16 Image preview (reply grids + lightbox) ========================================================== */ /* ---------- 1 · Reset & page shells ---------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* min-height, not height: a fixed `height: 100%` makes exactly one viewport tall, and a position:sticky child can only stick inside its containing block — so the admin header unstuck itself as soon as the page scrolled past the first screen. The full-height shells set their own heights (.ldv-shell uses 100svh, .ldv-page/.ldv-login use min-height). */ html, body { min-height: 100%; } /* Warm Sunrise band: 340px gradient at the top, white below. Anchored to the viewport, not the document. Scrolled with the page, the band left only a warm 64px stripe under the pinned header while everything below went white — the gradient stopped reading as a gradient. Fixed, the full 340px fade is always present at the top of the screen, and any pinned bar painting its own slice of it stays seamless at every scroll position. (iOS Safari may treat `fixed` as `scroll`; the fallback is simply the old behaviour, so nothing breaks.) */ .ldv-band { background: var(--ldv-band) 0 0/100% var(--ldv-band-height) no-repeat fixed, #ffffff; } /* Sampled values of --ldv-band at the heights where pinned bars sit, so a sticky element can paint its own slice of the band and line up with the page exactly. (Band = #fff5ef 0 → #fffbf8 45% → #ffffff 100% over 340px.) These bars must be fully OPAQUE: a translucent fade lets vivid content — an orange user bubble — bleed through, which reads as a rendering fault. */ :root { --ldv-band-at-0: #fff5ef; --ldv-band-at-64: #fff8f3; --ldv-band-at-110: #fff9f6; /* Photographic backdrops (login + request access). Blurred well past recognition so the image reads as abstract colour, and scaled enough that the blur's soft edge never enters the frame. */ --ldv-backdrop-blur: 24px; --ldv-backdrop-scale: 1.15; } /* Full-height app shell (chat) */ .ldv-shell { height: 100svh; display: flex; flex-direction: column; overflow: hidden; } /* Scrolling document shell (admin pages) */ .ldv-page { min-height: 100svh; display: flex; flex-direction: column; } .ldv-page-main { flex: 1; padding: 32px 24px 48px; } .ldv-container { max-width: 880px; margin: 0 auto; } .ldv-container--narrow { max-width: 720px; margin: 0 auto; } .ldv-h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; color: var(--ldv-black); } .ldv-h1--sm { font-size: 22px; } .ldv-sub { margin: 0 0 20px; font-size: 14px; color: var(--ldv-body); } .ldv-sub--tight { margin: 0 0 24px; font-size: 13px; } .ldv-fine { font-size: 12px; color: var(--ldv-muted); } .ldv-req { color: var(--ldv-orange); font-weight: 700; } /* Section label — "GET THE BEST ANSWERS" */ .ldv-label { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--ldv-muted); } .ldv-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 2 · Header ---------------------------------- */ /* Chromeless: no border, no background — the band shows through. */ .ldv-header { display: flex; align-items: center; gap: 14px; height: var(--ldv-header-h); flex: none; padding-left: 16px; position: relative; z-index: 6; /* Opaque slice of the band: conversation lines scrolling up disappear behind it cleanly. Matches the fixed band exactly, so there is no visible seam. */ background: linear-gradient(180deg, var(--ldv-band-at-0), var(--ldv-band-at-64)); } /* Admin pages scroll the document, so their header sticks to the top — on a long list or transcript the "Back" control must stay reachable. */ .ldv-header--page { padding-left: 20px; position: sticky; top: 0; z-index: 10; /* Its own opaque slice of the band. Because the band is viewport-fixed, this matches the page behind it at every scroll position — no warm block, no seam, and nothing bleeds through. */ background: linear-gradient(180deg, var(--ldv-band-at-0), var(--ldv-band-at-64)); } /* ☰ History — icon + label */ .ldv-hamburger { height: var(--ldv-touch); display: flex; align-items: center; gap: 10px; padding: 0 0 0 14px; background: none; border: none; font: inherit; cursor: pointer; } .ldv-hamburger:hover:not(:disabled) { background: var(--ldv-orange-tint); } .ldv-hamburger-icon { display: flex; flex-direction: column; gap: 4px; } .ldv-hamburger-icon span { display: block; width: 18px; height: 2px; background: var(--ldv-ink); } .ldv-hamburger-label { font-size: 14px; font-weight: 700; color: var(--ldv-ink); } /* 1×16px hairline, 30px visual gap each side (14px header gap + 16px margin) */ .ldv-header-divider { width: 1px; height: 16px; background: var(--ldv-orange-tint-strong); margin: 0 16px; align-self: center; flex: none; } .ldv-wordmark-link { display: block; text-decoration: none; } /* +3px optical nudge: the wordmark's cap height sits high in its box. */ .ldv-wordmark { height: 24px; width: auto; display: block; margin-top: 3px; } /* Body grey, not muted: the breadcrumb is the only meta text that sits inside the warm band's top rows, where --ldv-muted lands at 4.26:1. */ .ldv-crumb { font-size: 14px; color: var(--ldv-body); } .ldv-spacer { flex: 1; } .ldv-nav { display: flex; align-items: center; gap: 4px; } .ldv-nav-btn { height: var(--ldv-touch); display: inline-flex; align-items: center; padding: 0 14px; background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ldv-ink); text-decoration: none; cursor: pointer; } .ldv-nav-btn:hover:not(:disabled) { background: var(--ldv-orange-tint); color: var(--ldv-ink); } /* `display:inline-flex` above would otherwise defeat the hidden attribute. */ .ldv-nav-btn[hidden] { display: none; } /* Back-control labels: full text by default, abbreviated on narrow phones. aria-label carries the full name either way, so the accessible name never changes with the viewport. */ .ldv-lbl-short { display: none; } @media (max-width: 420px) { .ldv-lbl-long { display: none; } .ldv-lbl-short { display: inline; } } /* Corporate logo — top-right, flush to the top edge, once per screen. */ .ldv-corp-logo { height: var(--ldv-logo-size); width: var(--ldv-logo-size); display: block; margin-left: 16px; margin-right: 30px; align-self: flex-start; flex: none; } .ldv-header--page .ldv-corp-logo { margin-left: 18px; margin-right: 16px; } /* ---------- 3 · Buttons -------------------------------- */ .ldv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--ldv-touch); padding: 0 20px; border: none; border-radius: var(--ldv-radius); font-family: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; } /* Primary — signature gradient, white text (approved deviation) */ .ldv-btn--primary { background: var(--ldv-gradient); color: #ffffff; } .ldv-btn--primary:hover:not(:disabled) { background: var(--ldv-orange); color: #ffffff; } /* Secondary — orange ghost outline */ .ldv-btn--secondary { background: none; border: 1px solid var(--ldv-orange); color: var(--ldv-orange-link); } .ldv-btn--secondary:hover:not(:disabled) { background: var(--ldv-orange-tint); color: var(--ldv-ink); } /* Quiet — neutral outline, used for Cancel */ .ldv-btn--quiet { background: none; border: 1px solid var(--ldv-hairline); color: var(--ldv-body); } .ldv-btn--quiet:hover:not(:disabled) { border-color: var(--ldv-ink); color: var(--ldv-ink); } .ldv-btn--block { width: 100%; } .ldv-btn--lg { height: 48px; padding: 0 28px; font-size: 15px; } .ldv-btn--wide { min-width: 140px; padding: 0 26px; } /* Inline spinner inside a button */ .ldv-btn-spinner { width: 12px; height: 12px; flex: none; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ldv-spin 1s linear infinite; } /* ---------- 4 · Forms ---------------------------------- */ .ldv-form { display: flex; flex-direction: column; gap: 16px; } .ldv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ldv-grid-2--lg { gap: 18px; } .ldv-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ldv-ink); } .ldv-field--dark { color: var(--ldv-black); } .ldv-field-note { font-weight: 400; color: var(--ldv-muted); } /* Scope note alongside a page title, e.g. "Add a new user (admin only)". */ .ldv-h1-note { font-size: 15px; font-weight: 400; color: var(--ldv-muted); } .ldv-input, .ldv-select, .ldv-textarea { width: 100%; box-sizing: border-box; padding: 0 14px; height: var(--ldv-touch); background: #ffffff; border: 1px solid var(--ldv-hairline); border-radius: var(--ldv-radius); font-family: inherit; font-size: 15px; font-weight: 400; color: var(--ldv-ink); -webkit-appearance: none; appearance: none; } .ldv-select { padding: 0 10px; } .ldv-textarea { height: auto; padding: 10px 12px; resize: vertical; font-size: 14px; line-height: 1.5; } .ldv-input:focus, .ldv-select:focus, .ldv-textarea:focus { border-color: var(--ldv-orange); } .ldv-form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 6px; } /* Honeypot — off-screen, never focusable */ .ldv-honeypot { position: absolute; left: -9999px; width: 0; height: 0; border: 0; padding: 0; } /* ---------- 5 · Banners -------------------------------- */ .ldv-banner { padding: 10px 14px; border: 1px solid; border-radius: var(--ldv-radius); font-size: 13px; line-height: 1.5; } .ldv-banner strong { font-weight: 700; } .ldv-banner a { font-weight: 700; text-decoration: underline; color: inherit; } .ldv-banner--error { background: var(--ldv-error-bg); border-color: var(--ldv-error-border); color: var(--ldv-error-text); } .ldv-banner--success { background: var(--ldv-success-bg); border-color: var(--ldv-success-border); color: var(--ldv-success-text); } .ldv-banner--info { background: var(--ldv-info-bg); border-color: var(--ldv-info-border); color: var(--ldv-info-text); } /* Banner carrying a button (e.g. Resend): lay text and action out as a row so the control can never sit on top of the message. Wraps to two lines when the text is long or the viewport is narrow. */ .ldv-banner--action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ldv-banner--action > :first-child { flex: 1 1 auto; min-width: 0; } .ldv-banner--action > :last-child { flex: 0 0 auto; } /* Long-wait notice — spinner + elapsed time */ .ldv-banner--info.ldv-banner--spinner { display: flex; align-items: center; gap: 10px; } .ldv-spinner { flex: none; width: 14px; height: 14px; border: 2px solid var(--ldv-info-border); border-top-color: transparent; border-radius: 50%; animation: ldv-spin 1s linear infinite; } /* Retry control inside an error banner */ .ldv-banner-btn { height: 32px; padding: 0 10px; background: none; border: 1px solid var(--ldv-error-text); border-radius: var(--ldv-radius); font-family: inherit; font-size: 12px; font-weight: 700; color: var(--ldv-error-text); cursor: pointer; } .ldv-banner-btn:hover { background: #f9ccd2; } /* ---------- 6 · Cards / panels ------------------------- */ .ldv-panel { background: #ffffff; box-shadow: var(--ldv-shadow-card); border-radius: var(--ldv-radius); padding: 32px; } .ldv-tile { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--ldv-orange-wash); } .ldv-tile-key { font-size: 13px; font-weight: 700; color: var(--ldv-orange-link); } .ldv-tile-desc { font-size: 14px; line-height: 1.5; color: var(--ldv-body); } /* ---------- 7 · Modals -------------------------------- */ .ldv-scrim { position: fixed; inset: 0; background: var(--ldv-scrim); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; } .ldv-scrim[aria-hidden="true"] { display: none; } .ldv-modal { width: 440px; max-width: 90vw; max-height: 90svh; overflow-y: auto; background: #ffffff; border-radius: var(--ldv-radius); padding: 24px; box-shadow: var(--ldv-shadow-modal); text-align: left; } .ldv-modal--guidelines { width: 520px; padding: 36px 40px; } .ldv-modal--sm { width: 400px; } .ldv-modal h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ldv-black); } .ldv-modal p { margin: 0 0 18px; font-size: 14px; color: var(--ldv-body); } .ldv-modal-logo { height: 40px; width: auto; display: block; margin: 0 auto 18px; } .ldv-modal-lead { margin: 0 0 16px; font-size: 14px; color: var(--ldv-body); } .ldv-modal-subhead { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ldv-black); } .ldv-modal ul { margin: 0 0 22px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ldv-body); } .ldv-modal li { margin-bottom: 6px; } .ldv-modal li:last-child { margin-bottom: 0; } .ldv-modal-cta { display: flex; justify-content: center; } /* ---------- 8 · Chat ----------------------------------- */ .ldv-body-row { flex: 1; display: flex; min-height: 0; position: relative; } .ldv-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .ldv-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 24px 8px; scroll-padding-bottom: 24px; } .ldv-column { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; } /* Loading veil while a stored conversation is fetched */ .ldv-chat-loading { max-width: 820px; margin: 0 auto 16px; padding: 10px 14px; background: var(--ldv-orange-wash); font-size: 13px; font-weight: 700; color: var(--ldv-orange-link); } .ldv-chat-loading[hidden] { display: none !important; } /* Turns. `.msg`/`.bubble` class names are kept — the chat JS creates them. */ #messages { display: flex; flex-direction: column; gap: 26px; } #messages:empty { display: none; } .msg { display: flex; } .msg.user { justify-content: flex-end; } .msg.bot { align-items: flex-start; } /* User bubble — gradient fill, white text, right-aligned */ .msg.user .bubble { max-width: 620px; padding: 13px 17px; background: var(--ldv-gradient); border-radius: var(--ldv-radius); color: #ffffff; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } /* AI reply — no container; sits directly on the canvas. Typography comes from leddy-reply-markdown.css via .leddy-reply. */ .msg.bot .bubble { flex: 1; min-width: 0; background: none; padding: 0; border: none; } /* Markdown table wrapper emitted by markdown-it: scroll, never break the page. The base sheet sets `table { width: 100% }`, which squeezes a 14-column spec comparison into unreadable stacked fragments. Inside the scroller the table takes its natural width and cells stay on one line, so it scrolls instead. */ .leddy-reply .tbl-wrap { overflow-x: auto; margin: 0 0 14px; } .leddy-reply .tbl-wrap table { margin: 0; width: auto; min-width: 100%; } .leddy-reply .tbl-wrap th, .leddy-reply .tbl-wrap td { white-space: nowrap; } /* Streaming status — pulsing gradient dot + live stage text. The 12px dot is the one intentional circle in the design. Constrained to the conversation column so it lines up with the transcript. */ #typing { display: flex; align-items: center; gap: 10px; max-width: 820px; margin: 0 auto 8px; padding: 0 2px; min-height: 20px; } #typing[hidden] { display: none !important; } .ldv-status-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ldv-gradient); animation: ldv-pulse 1.1s infinite; } .lv-status-text { font-size: 13px; font-weight: 700; color: var(--ldv-orange-link); } /* Per-reply feedback. Class names kept — attachFeedbackUI() creates them. */ .feedback-trigger { display: inline-flex; align-items: center; height: 36px; margin-top: 14px; padding: 0 12px; background: none; border: none; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ldv-orange-link); cursor: pointer; } .feedback-trigger:hover { background: var(--ldv-orange-tint); color: var(--ldv-ink); } .feedback-box { display: none; margin-top: 12px; padding: 14px; background: #ffffff; border-radius: var(--ldv-radius); box-shadow: var(--ldv-shadow-popover); } .feedback-box.open { display: block; } .feedback-box textarea.fb-text { width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical; padding: 10px 12px; background: #ffffff; border: 1px solid var(--ldv-hairline); border-radius: var(--ldv-radius); font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--ldv-ink); } .feedback-box textarea.fb-text:focus { border-color: var(--ldv-orange); } .feedback-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; } .feedback-actions .btn-mini { height: 40px; padding: 0 16px; border: none; border-radius: var(--ldv-radius); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .feedback-actions .btn-cancel { background: none; border: 1px solid var(--ldv-hairline); color: var(--ldv-body); } .feedback-actions .btn-cancel:hover:not(:disabled) { border-color: var(--ldv-ink); color: var(--ldv-ink); } .feedback-actions .btn-submit { padding: 0 18px; background: var(--ldv-gradient); color: #ffffff; } .feedback-actions .btn-submit:hover:not(:disabled) { background: var(--ldv-orange); } .feedback-confirm { display: none; margin-top: 12px; padding: 10px 14px; background: var(--ldv-success-bg); border: 1px solid var(--ldv-success-border); font-size: 13px; color: var(--ldv-success-text); } .feedback-confirm.show { display: block; } .feedback-confirm .fb-echo { display: block; margin-top: 6px; font-style: italic; color: var(--ldv-body); } /* ---------- 9 · Empty state ---------------------------- */ .ldv-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 0 32px; text-align: center; } .ldv-empty[hidden] { display: none !important; } .ldv-empty-bulb { height: 96px; width: auto; animation: ldv-pulse 2.6s infinite; } .ldv-empty h1 { margin: 10px 0 0; font-size: 30px; font-weight: 700; color: var(--ldv-black); } .ldv-empty-lead { margin: 0; font-size: 15px; color: var(--ldv-body); max-width: 440px; } .ldv-empty-block { max-width: 660px; width: 100%; margin-top: 24px; text-align: left; } .ldv-tips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ldv-label--spaced { margin: 24px 0 10px; } .ldv-chips { display: flex; gap: 10px; flex-wrap: wrap; } .ldv-chip { min-height: var(--ldv-touch); padding: 10px 16px; background: #ffffff; border: 1px solid var(--ldv-orange-tint-strong); border-radius: var(--ldv-radius); font-family: inherit; font-size: 14px; font-weight: 400; color: var(--ldv-ink); text-align: left; cursor: pointer; } .ldv-chip:hover { border-color: var(--ldv-orange); background: var(--ldv-orange-wash); } /* ---------- 10 · Composer ------------------------------ */ .ldv-composer-wrap { flex: none; padding: 0 24px; } .ldv-composer-banners { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } .ldv-composer-banners:empty { display: none; } #composer { flex: none; padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px)); background: transparent; } #composer form { max-width: 820px; margin: 0 auto; display: flex; /* Bottom-pinned, not stretched: on a long message `stretch` turned Send into a full-height orange slab down the side of the bar. */ align-items: flex-end; background: #ffffff; border-radius: var(--ldv-radius); box-shadow: var(--ldv-shadow-composer); } /* --- 3 · one focus indicator, on the bar --------------------------------- Focusing the textarea used to draw the global ink ring *inside* the bar, which read as two nested boxes once the message was more than a line. The bar now carries the indicator for its own text field. The ring is on the container, so this still satisfies WCAG 2.4.7 -- and Send/Stop keep their own rings, because when you tab between them you have to be able to see which one you are on. */ /* Scoped through #composer so it outranks `#composer form`'s resting shadow -- a bare .ldv-composer rule loses on specificity and the glow never deepens. */ #composer form.ldv-composer:focus-within { outline: 2px solid var(--ldv-orange); outline-offset: -2px; box-shadow: 0 6px 28px rgba(246, 99, 0, .32); } #composer form.ldv-composer textarea:focus { outline: none; } #composer textarea#input { flex: 1; /* Matches the button height, so a single line fills the bar exactly instead of leaving a gap above it once the buttons stopped stretching. */ min-height: 52px; /* Grows with its content, then scrolls. `field-sizing` does this natively; autoGrowInput() in index.php covers browsers that lack it, and this max-height caps both paths. */ field-sizing: content; max-height: 170px; box-sizing: border-box; resize: none; padding: 13px 16px; background: none; border: none; border-radius: var(--ldv-radius); font-family: inherit; font-size: 15px; line-height: 1.4; color: var(--ldv-ink); overflow-y: auto; } #composer #send { flex: none; height: 52px; padding: 0 26px; background: var(--ldv-gradient); border: none; border-radius: var(--ldv-radius); font-family: inherit; font-size: 14px; font-weight: 700; color: #ffffff; cursor: pointer; } #composer #send:hover:not(:disabled) { background: var(--ldv-orange); } #composer #send:focus-visible { outline-offset: -2px; } /* Stop — white block left of Send, shown only while streaming */ #composer #stopBtn { flex: none; height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: #ffffff; border: none; border-radius: var(--ldv-radius); font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ldv-ink); cursor: pointer; } #composer #stopBtn:hover:not(:disabled) { background: var(--ldv-orange-tint); } #composer #stopBtn:focus-visible { outline-offset: -2px; } #composer #stopBtn[hidden] { display: none !important; } .ldv-stop-square { width: 10px; height: 10px; background: var(--ldv-ink); } .viewer-badge { max-width: 820px; margin: 8px auto 0; padding: 0 2px; font-size: 12px; line-height: 1.4; color: var(--ldv-muted); } .viewer-badge strong { font-weight: 700; color: var(--ldv-body); } .viewer-badge a { color: var(--ldv-orange-link); } /* ---------- 11 · History drawer ------------------------ */ .history-drawer { position: absolute; left: 0; top: 0; bottom: 0; width: 320px; max-width: 85%; background: #ffffff; box-shadow: var(--ldv-shadow-drawer); z-index: 20; display: flex; flex-direction: column; } .history-drawer[hidden] { display: none !important; } .history-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 12px 20px; flex: none; } .history-title { font-size: 15px; font-weight: 700; color: var(--ldv-ink); } /* Scoped to the drawer, not `header` — #historyClose lives in