/* Custom scrollbar - Ladylight theme */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(204, 153, 51, 0.2);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(204, 153, 51, 0.4);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(204, 153, 51, 0.2);
    border-radius: 10px;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(204, 153, 51, 0.2) transparent;
}

/* Artifact panel shadow */
.artifact-panel {
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
}

/* Typing indicator animation */
.typing-dot {
    animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Streaming cursor blink */
.streaming-cursor::after {
    content: '\25CF';
    animation: cursor-blink 1s infinite;
    margin-left: 3px;
    color: var(--gold);
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Artifact panel generating pulse */
.artifact-pulse {
    animation: artifact-generating 2s ease-in-out infinite;
}

@keyframes artifact-generating {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .typing-dot, .streaming-cursor::after, .artifact-pulse, .animate-pulse {
        animation: none;
    }
    .typing-dot { opacity: 1; transform: none; }
    .artifact-pulse, .animate-pulse { opacity: 1; }
}

/* Picker cards: a faint Ladylight logo watermark that slides up from the bottom-right corner to
   settle on the right edge, fading in on hover. Purely decorative (pointer-events off). Relies on
   the card carrying Tailwind's `group` marker + `relative overflow-hidden`. */
.picker-card-wm {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    width: 6.5rem;
    height: 6.5rem;
    object-fit: contain;
    opacity: 0;
    transform: translate(2rem, calc(-50% + 2.25rem));
    transition: opacity .6s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}
.group:hover .picker-card-wm {
    opacity: 0.2;
    transform: translate(0, -50%);
}
/* Group cards carry a stronger watermark. */
.group:hover .picker-card-wm--group {
    opacity: 0.35;
}
@media (prefers-reduced-motion: reduce) {
    .picker-card-wm { transition: opacity .6s ease; transform: translate(0, -50%); }
}

/* Guided tour: a root-level "halo" spotlights the current target. Its transparent centre shows the
   element through, while the huge outer shadow dims the rest of the page (works even when the target
   is inside an overflow-hidden container, because the halo lives at the tour root). */
.tour-halo {
    position: fixed;
    z-index: 1001;
    border: 3px solid var(--gold);
    border-radius: 0.9rem;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .tour-halo { transition: none; }
}

/* Pre-conversation header (picker + draft states): strip the bar chrome and the redundant GPT
   identity so the welcome hero owns the screen. The nav controls (sidebar hamburger / back arrow)
   float over the white background seated in champagne-gold "pills" so they stay clearly tappable
   and on-brand. Once a conversation starts (`chat-started` on the root) none of this applies and
   the header falls back to its solid bar. */
.pre-chat .chat-header {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
.pre-chat .chat-header .gpt-identity { display: none; }
.pre-chat .chat-header .nav-ctl {
    background: rgba(204, 153, 51, 0.18);
    color: var(--gold-dark);
    border-radius: 9999px;
}
.pre-chat .chat-header .nav-ctl:hover { background: rgba(204, 153, 51, 0.28); }

/* Markdown content in messages */
.message-content p { margin-bottom: 0.75rem; line-height: 1.7; }
.message-content p:last-child { margin-bottom: 0; }
.message-content ul, .message-content ol { margin-left: 1.5rem; margin-bottom: 0.75rem; }
.message-content ul { list-style-type: disc; }
.message-content ol { list-style-type: decimal; }
.message-content li { margin-bottom: 0.35rem; }
.message-content h1, .message-content h2, .message-content h3,
.message-content h4, .message-content h5, .message-content h6 {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    margin-bottom: 0.75rem;
    margin-top: 1.25rem;
    color: var(--carbon);
}
.message-content h1:first-child,
.message-content h2:first-child,
.message-content h3:first-child,
.message-content h4:first-child,
.message-content h5:first-child,
.message-content h6:first-child { margin-top: 0; }
.message-content h1 { font-size: 1.25rem; }
.message-content h2 { font-size: 1.125rem; }
.message-content h3 { font-size: 1rem; }
.message-content h4 { font-size: 0.95rem; }
.message-content h5 { font-size: 0.9rem; }
.message-content h6 { font-size: 0.9rem; color: var(--on-surface-variant, #4f4536); }

/* Code blocks */
.message-content code {
    background: rgba(204, 153, 51, 0.10);
    padding: 0.15rem 0.4rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: var(--gold-dark);
}

.message-content pre {
    background: var(--carbon);
    padding: 1rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(204, 153, 51, 0.2);
}

.message-content pre code {
    background: transparent;
    padding: 0;
    color: #e5e2e1;
}
.message-content strong { font-weight: 700; }
.message-content em { font-style: italic; }
.message-content blockquote {
    border-left: 4px solid var(--gold);
    padding-left: 1rem;
    color: rgba(30, 30, 30, 0.8);
    background: rgba(245, 239, 227, 0.3);
    padding: 0.75rem 1rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin-bottom: 0.75rem;
    font-style: italic;
}

/* Tables */
.message-content table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    display: block;
    overflow-x: auto;
}
.message-content th,
.message-content td {
    border: 1px solid rgba(204, 153, 51, 0.28);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}
.message-content th {
    background: rgba(204, 153, 51, 0.12);
    font-weight: 700;
    color: var(--gold-dark);
}
.message-content tbody tr:nth-child(even) td {
    background: rgba(245, 239, 227, 0.35);
}

/* Textarea auto-resize */
textarea.chat-input {
    resize: none;
    max-height: 200px;
    overflow-y: auto;
}

textarea.chat-input:focus {
    outline: none;
}

/* Visible keyboard focus for interactive controls (WCAG 2.4.7). :focus-visible only fires for
   keyboard/AT users, so mouse users don't see it. Gold outline stays visible on the transparent
   pre-chat header pills and on white cards alike. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--gold-dark);
    outline-offset: 2px;
}

/* Session item delete button — revealed on hover AND on keyboard focus so it's reachable without
   a mouse (previously invisible to keyboard users). Also forced visible while a delete is in
   flight so the busy spinner shows. */
.session-item .delete-btn { opacity: 0; transition: opacity 0.15s; }
.session-item:hover .delete-btn,
.session-item:focus-within .delete-btn,
.session-item .delete-btn:focus-visible,
.session-item .delete-btn.busy { opacity: 1; }

/* Delete animation: the row collapses and fades out before it's removed from the list, so the
   deletion reads as a deliberate motion rather than an instant disappearance. */
.session-removing {
    overflow: hidden;
    animation: session-out 0.3s ease forwards;
    pointer-events: none;
}
@keyframes session-out {
    from { opacity: 1; max-height: 3rem; transform: translateX(0); }
    to   { opacity: 0; max-height: 0; transform: translateX(-1rem); margin-top: 0; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .session-removing { animation-duration: 0.01ms; }
}

/* Sidebar transition - mobile: slide via transform, desktop: collapse via width */
.sidebar-transition {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) {
    .sidebar-transition {
        transition: width 0.2s ease;
        transform: none !important;
    }
}

/* Artifact panel - mobile: slide up 85% sheet, desktop: slide in from right */
.artifact-panel-responsive {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(100%);
}
.artifact-panel-responsive.artifact-open {
    transform: translateY(0);
}
@media (min-width: 768px) {
    .artifact-panel-responsive {
        transition: transform 0.2s ease-out;
        transform: translateX(100%);
    }
    .artifact-panel-responsive.artifact-open {
        transform: translateX(0);
    }
}

/* Artifact backdrop */
.artifact-backdrop {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.download-dots::after {
    content: "";
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: download-dots 1.2s steps(4, end) infinite;
}

@keyframes download-dots {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75%,
    100% { content: "..."; }
}

.pdf-download-progress {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.pdf-download-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--gold);
    box-shadow: 0 0 14px rgba(204, 153, 51, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .download-dots::after {
        animation: none;
        content: "...";
    }
}

/* Mobile session delete button always visible on touch */
@media (max-width: 767px) {
    .session-item .delete-btn { opacity: 0.6; }
}

/* Select dropdown styling (light sidebar) */
select option {
    background: #ffffff;
    color: var(--carbon);
}

/* ============================================================
   Premium multi-use-case chat landing (composer in the middle,
   starter cards below, soft champagne backdrop, rise-&-pin scroll).
   Muted/gold, not colorful — calm design direction preserved.
   ============================================================ */
.ll-landing {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 11.5rem);
    padding-inline: 0.25rem;
}

/* Soft champagne aurora backdrop */
.ll-landing__aurora {
    position: absolute;
    inset: -10% -10% 0 -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(42% 38% at 22% 18%, rgba(204, 153, 51, 0.10), transparent 70%),
        radial-gradient(38% 34% at 82% 12%, rgba(255, 236, 179, 0.16), transparent 72%),
        radial-gradient(46% 42% at 60% 82%, rgba(204, 153, 51, 0.06), transparent 75%);
    filter: blur(6px);
    animation: llAuroraDrift 22s ease-in-out infinite alternate;
}
@keyframes llAuroraDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, -1.5%, 0) scale(1.05); }
}

/* Hero: icon + name + description */
.ll-landing__hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 7vh;
    padding-bottom: 1.5rem;
}
.ll-landing__badge {
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #ffffff, #fbf5e9);
    border: 1px solid rgba(204, 153, 51, 0.25);
    box-shadow: 0 1px 2px rgba(30, 30, 30, 0.04), 0 8px 24px rgba(204, 153, 51, 0.10);
    margin-bottom: 1.1rem;
    animation: llRise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.ll-landing__title {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 600;
    color: #1E1E1E;
    letter-spacing: -0.01em;
    text-wrap: balance;
    animation: llRise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both;
}
.ll-landing__desc {
    margin-top: 0.5rem;
    max-width: 40rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6b6257;
    text-wrap: balance;
    animation: llRise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both;
}

/* Sticky frosted composer — rises then pins near the top on scroll */
.ll-landing__composer-wrap {
    position: sticky;
    top: 13vh;
    z-index: 20;
    padding: 0.35rem 0 1rem;
    animation: llRise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s both;
}
.ll-composer-glass {
    max-width: 46rem;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(204, 153, 51, 0.22);
    box-shadow: 0 1px 2px rgba(30, 30, 30, 0.05), 0 12px 40px rgba(30, 30, 30, 0.10);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ll-composer-glass:focus-within {
    border-color: rgba(204, 153, 51, 0.5);
    box-shadow: 0 1px 2px rgba(30, 30, 30, 0.05), 0 16px 48px rgba(204, 153, 51, 0.16);
}
.ll-composer-glass.is-disabled { opacity: 0.6; }
.ll-composer-glass__input {
    flex: 1;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: #1E1E1E;
    font-size: 1rem;
    line-height: 1.6;
    padding: 0.55rem 0.25rem;
    min-height: 2.75rem;
    max-height: 200px;
    overflow-y: auto;
    transition: min-height 0.25s ease;
}
.ll-composer-glass:focus-within .ll-composer-glass__input,
.ll-composer-glass__input:not(:placeholder-shown) { min-height: 5.5rem; }
.ll-composer-glass__send {
    flex-shrink: 0;
    height: 2.75rem;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.9rem;
    transition: background-color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.ll-composer-glass__send.is-ready {
    background: #8F6A12;
    color: #fff;
    box-shadow: 0 6px 18px rgba(143, 106, 18, 0.28);
}
.ll-composer-glass__send.is-ready:hover { background: #CC9933; }
.ll-composer-glass__send.is-idle { background: #f1efe9; cursor: not-allowed; }
.ll-composer-glass__mic {
    flex-shrink: 0;
    height: 2.75rem;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.9rem;
    background: #f1efe9;
    color: rgba(30, 30, 30, 0.72);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

:root {
    --ll-blue: #002152;
    --ll-blue-hover: #00305f;
}
.ll-composer-glass__mic:hover { background: rgba(204, 153, 51, 0.14); color: #1E1E1E; }
.ll-composer-glass__mic:disabled { opacity: 0.45; cursor: not-allowed; }
.ll-composer-glass__mic.is-recording {
    background: #dc2626;
    color: white;
    animation: voice-pulse 1.2s ease-in-out infinite;
}

.ll-voice-composer {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
}
.ll-voice-composer__bars {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.45rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.22) 8%, black 22%, black 100%);
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.22) 8%, black 22%, black 100%);
}
.ll-voice-composer__bar {
    flex: 0 0 2px;
    width: 2px;
    min-height: 3px;
    border-radius: 999px;
    background: #7B5A0A;
    opacity: 0.9;
    transition: height 0.12s ease-out;
}
.ll-voice-composer__time {
    flex: 0 0 auto;
    min-width: 2.5rem;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 800;
    color: #7B5A0A;
    font-variant-numeric: tabular-nums;
}

.voice-note {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
}
.voice-note__row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.voice-note__play {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--ll-blue);
    transition: transform 0.12s ease, background-color 0.16s ease, opacity 0.16s ease;
}
.voice-note__play:hover:not(:disabled) {
    transform: scale(1.04);
    background: var(--ll-blue-hover);
}
.voice-note__play:disabled {
    cursor: wait;
    opacity: 0.82;
}
.voice-note__play.is-loading {
    background: #8F6A12;
}
.voice-note__play.is-failed {
    background: #dc2626;
}
.retry-btn__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(185, 28, 28, 0.28);
    border-top-color: #b91c1c;
    border-radius: 999px;
    animation: voice-spin 0.8s linear infinite;
}
.voice-note__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: white;
    border-radius: 999px;
    animation: voice-spin 0.8s linear infinite;
}
.voice-note__wave {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    overflow: hidden;
}
.voice-note__bar {
    flex: 0 0 3px;
    width: 3px;
    min-height: 5px;
    border-radius: 999px;
    background: rgba(30, 30, 30, 0.35);
    transition: background-color 0.1s linear, opacity 0.1s linear;
}
.voice-note__bar.is-active {
    background: var(--ll-blue);
}
.voice-note__meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.25rem;
    min-height: 1rem;
    font-size: 0.72rem;
    line-height: 1;
    color: rgba(30, 30, 30, 0.56);
}
.voice-note__duration,
.voice-note__status {
    white-space: nowrap;
}
.voice-note__status {
    color: rgba(30, 30, 30, 0.62);
}
.voice-note__retry {
    color: #dc2626;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.voice-note__retry:disabled {
    cursor: wait;
    opacity: 0.65;
}
.voice-note__transcript {
    position: relative;
    margin-top: 0.55rem;
    padding-left: 0.7rem;
    border-left: 3px solid rgba(30, 30, 30, 0.14);
    color: rgba(30, 30, 30, 0.72);
    font-size: 0.9rem;
    line-height: 1.45;
}
.voice-note__transcript-line {
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.voice-note__transcript-button {
    display: inline;
    color: var(--ll-blue);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}
.voice-note__transcript-button:hover {
    color: var(--ll-blue-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.voice-pulse { animation: voice-pulse 1.2s ease-in-out infinite; }
@keyframes voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.34); }
    50% { box-shadow: 0 0 0 0.45rem rgba(220, 38, 38, 0); }
}
@keyframes voice-spin {
    to { transform: rotate(360deg); }
}

/* Starter cards */
.ll-landing__starters {
    position: relative;
    z-index: 1;
    margin-top: 1.25rem;
    padding-bottom: 16vh;
}
.ll-landing__starters-label {
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #a89a80;
    margin-bottom: 1rem;
}
.ll-landing__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 46rem;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .ll-landing__grid { grid-template-columns: 1fr 1fr; }
}
.ll-starter-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    padding: 1rem 1.15rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(30, 30, 30, 0.08);
    box-shadow: 0 1px 2px rgba(30, 30, 30, 0.04);
    color: #4a4336;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
    animation: llRise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(0.22s + var(--ll-i, 0) * 0.04s);
    will-change: transform;
}
.ll-starter-card:hover {
    transform: translateY(-3px);
    border-color: rgba(204, 153, 51, 0.5);
    box-shadow: 0 2px 4px rgba(30, 30, 30, 0.05), 0 14px 34px rgba(204, 153, 51, 0.14);
    background: #fff;
    color: #1E1E1E;
}
.ll-starter-card.is-disabled { opacity: 0.5; cursor: not-allowed; }
.ll-starter-card__text { font-size: 0.9rem; font-weight: 500; line-height: 1.55; }
.ll-starter-card__arrow {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    color: #CC9933;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ll-starter-card:hover .ll-starter-card__arrow { opacity: 1; transform: translateX(0); }

/* Bottom fade mask — pinned to the viewport bottom; cards scroll behind it */
.ll-landing__fade {
    position: sticky;
    bottom: 0;
    height: 16vh;
    margin-top: -16vh;
    z-index: 15;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 45%, #ffffff 100%);
}

/* Cursor label following the pointer over the starter grid */
.ll-cursor-label {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: #1E1E1E;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -140%) scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.ll-cursor-label.is-visible { opacity: 1; transform: translate(-50%, -140%) scale(1); }

@keyframes llRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Requirement-suggestion wizard card (one requirement at a time) ---- */
.ll-wizard {
    border: 1px solid rgba(204, 153, 51, 0.28);
    border-radius: 1.1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 249, 248, 0.96));
    box-shadow: 0 1px 2px rgba(30, 30, 30, 0.05), 0 12px 34px rgba(204, 153, 51, 0.12);
    padding: 1rem 1rem 1.1rem;
    animation: llRise 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.ll-wizard__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    padding-inline: 0.15rem;
}
.ll-wizard__spark {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background: rgba(204, 153, 51, 0.12);
    color: #8F6A12;
}
.ll-wizard__hint {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a4336;
}
.ll-wizard__options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ll-wizard__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(30, 30, 30, 0.10);
    background: #fff;
    color: #3f3a30;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.ll-wizard__option:hover {
    transform: translateY(-1px);
    border-color: rgba(204, 153, 51, 0.55);
    box-shadow: 0 6px 18px rgba(204, 153, 51, 0.12);
    color: #1E1E1E;
}
.ll-wizard__option.is-selected {
    border-color: #8F6A12;
    background: rgba(204, 153, 51, 0.08);
    color: #1E1E1E;
}
.ll-wizard__option.is-disabled { opacity: 0.5; cursor: not-allowed; }
.ll-wizard__marker {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(30, 30, 30, 0.25);
    color: #fff;
    background: transparent;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}
.ll-wizard__marker.is-check { border-radius: 0.4rem; }
.ll-wizard__marker.is-radio { border-radius: 999px; }
.ll-wizard__option.is-selected .ll-wizard__marker {
    background: #8F6A12;
    border-color: #8F6A12;
}
.ll-wizard__label { flex: 1; font-size: 0.95rem; font-weight: 500; line-height: 1.5; }
.ll-wizard__go {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    color: #c9b78a;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.ll-wizard__option:hover .ll-wizard__go { opacity: 1; transform: translateX(0); color: #8F6A12; }
.ll-wizard__head { align-items: flex-start; }
.ll-wizard__hint { flex: 1; }
.ll-wizard__step {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8F6A12;
    background: rgba(204, 153, 51, 0.12);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.ll-wizard__subhint {
    margin: -0.5rem 0.15rem 0.75rem 2.3rem;
    font-size: 0.78rem;
    color: #a89a80;
}
.ll-wizard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.ll-wizard__foot-left { display: flex; align-items: center; gap: 0.75rem; }
.ll-wizard__ghost {
    font-size: 0.85rem;
    font-weight: 500;
    color: #8F6A12;
    padding: 0.35rem 0.25rem;
    transition: color 0.15s ease;
}
.ll-wizard__ghost:hover { color: #1E1E1E; }
.ll-wizard__ghost.is-active { color: #8F6A12; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* "Type my own" inline textarea — a soft champagne pill inside the wizard card. */
.ll-wizard__own { margin-top: 0.6rem; }
.ll-wizard__own-box {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.5rem 0.45rem 0.65rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(204, 153, 51, 0.38);
    background: #fff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.ll-wizard__own-box:focus-within {
    border-color: #8F6A12;
    box-shadow: 0 0 0 3px rgba(204, 153, 51, 0.15);
}
.ll-wizard__own-input {
    flex: 1 1 auto;
    min-width: 0;
    resize: none;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    color: #3f3a30;
    font-size: 0.9rem;
    line-height: 1.45;
    outline: none;
}
.ll-wizard__own-input::placeholder { color: rgba(30, 30, 30, 0.4); }
.ll-wizard__own-input:disabled { opacity: 0.55; cursor: not-allowed; }
.ll-voice-composer--wizard {
    min-height: 2.35rem;
    padding: 0;
}
.ll-voice-composer--wizard .ll-voice-composer__bars {
    height: 2rem;
}
.ll-wizard__voice-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.ll-wizard__voice-btn {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7B5A0A;
    background: rgba(204, 153, 51, 0.12);
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.12s ease, opacity 0.16s ease;
}
.ll-wizard__voice-btn:hover:not(:disabled) {
    transform: scale(1.04);
    background: rgba(204, 153, 51, 0.2);
    color: #1E1E1E;
}
.ll-wizard__voice-btn.is-primary {
    color: #fff;
    background: #8F6A12;
}
.ll-wizard__voice-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ll-wizard__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}
.ll-wizard__submit {
    padding: 0.6rem 1.35rem;
    border-radius: 0.75rem;
    background: #8F6A12;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(143, 106, 18, 0.24);
    transition: background-color 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
}
.ll-wizard__submit:hover { background: #CC9933; }
.ll-wizard__submit:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* "You chose" chips in the user bubble (wizard answers) */
.ll-picks { display: flex; flex-direction: column; gap: 0.5rem; }
.ll-pick { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; }
.ll-pick__q { font-size: 0.75rem; font-weight: 600; color: #6b6257; }
.ll-pick__vals { display: flex; flex-wrap: wrap; gap: 0.35rem; width: 100%; }
.ll-pick__text-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.ll-pick__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(204, 153, 51, 0.14);
    border: 1px solid rgba(204, 153, 51, 0.3);
    color: #1E1E1E;
    font-size: 0.85rem;
    font-weight: 500;
}
.ll-pick__chip--voice {
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    padding: 0.45rem 0.65rem 0.55rem;
    border-radius: 1.15rem;
    flex-direction: column;
    gap: 0.35rem;
}
.voice-note--pick,
.voice-note--wizard {
    width: 100%;
    min-width: 0;
}
.voice-note--pick .voice-note__row,
.voice-note--wizard .voice-note__row {
    gap: 0.5rem;
}
.voice-note--pick .voice-note__play,
.voice-note--wizard .voice-note__play {
    width: 2rem;
    height: 2rem;
}
.voice-note--pick .voice-note__wave,
.voice-note--wizard .voice-note__wave {
    height: 2rem;
}
.voice-note--pick .voice-note__duration {
    font-size: 0.76rem;
    color: rgba(30, 30, 30, 0.58);
}
.voice-note--pick .voice-note__transcript {
    margin-top: 0.3rem;
    padding-left: 0;
    border-left: 0;
    color: rgba(30, 30, 30, 0.72);
    font-size: 0.86rem;
    line-height: 1.45;
}
/* Suggested next-message chips (tap to fill the composer). */
.ll-suggest-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(204, 153, 51, 0.32);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #4f4536;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.ll-suggest-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(204, 153, 51, 0.6);
    background: rgba(204, 153, 51, 0.1);
    box-shadow: 0 6px 16px rgba(204, 153, 51, 0.12);
    color: #1E1E1E;
}
.ll-suggest-chip:focus-visible {
    outline: 2px solid #8F6A12;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ll-wizard { animation: none; }
    .ll-wizard__option:hover { transform: none; }
    .ll-suggest-chip:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ll-landing__aurora,
    .ll-landing__badge,
    .ll-landing__title,
    .ll-landing__desc,
    .ll-landing__composer-wrap,
    .ll-starter-card { animation: none; }
    .ll-starter-card:hover { transform: none; }
    .ll-cursor-label { display: none; }
}

/* ============================================================
   Conversation bubbles — calm champagne, layered depth
   Assistant = clean warm-white card; User = soft champagne card.
   Replaces the old flat pale-yellow (bg-gold-light) bubbles.
   ============================================================ */
.ll-bubble {
    position: relative;
    /* Level-1 elevation: tiny, tight — premium, not a big blur. */
    box-shadow: 0 1px 1px rgba(30, 30, 30, 0.03), 0 1px 3px rgba(30, 30, 30, 0.05);
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.ll-bubble--ai {
    background: #faf8f4;                       /* warm white — separates from the white page, no yellow */
    border: 1px solid rgba(30, 30, 30, 0.06);  /* hairline */
}
.ll-bubble--user {
    /* soft champagne, signals "you" without shouting */
    background: linear-gradient(180deg, rgba(204, 153, 51, 0.10), rgba(204, 153, 51, 0.055));
    border: 1px solid rgba(204, 153, 51, 0.20);
}
/* Hover lifts the shadow a touch (microinteraction), never the position of text. */
.ll-bubble--ai:hover {
    box-shadow: 0 1px 2px rgba(30, 30, 30, 0.05), 0 6px 18px rgba(30, 30, 30, 0.06);
    border-color: rgba(30, 30, 30, 0.09);
}
.ll-bubble--user:hover {
    box-shadow: 0 1px 2px rgba(30, 30, 30, 0.05), 0 6px 18px rgba(204, 153, 51, 0.12);
    border-color: rgba(204, 153, 51, 0.32);
}

/* Message row entry — soft fade + rise, GPU-friendly. Runs when a row mounts
   (new reply, or a whole session loads → a gentle progressive reveal). */
.ll-msg-row {
    position: relative;
    z-index: 1;
    animation: llMsgIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity;
}
.ll-msg-row:has(.voice-note:hover),
.ll-msg-row:has(.voice-note:focus),
.ll-msg-row:has(.voice-note:focus-within) {
    z-index: 50;
}
@keyframes llMsgIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Avatar polish — subtle ring + level-1 shadow so it reads as a floating token. */
.ll-avatar {
    box-shadow: 0 1px 3px rgba(30, 30, 30, 0.14);
}

/* Brand text selection everywhere in chat (a "tiny detail users feel"). */
.message-content ::selection,
.ll-bubble ::selection { background: rgba(204, 153, 51, 0.24); color: #1E1E1E; }

/* Rotating "hold on" phrase beside the typing dots — soft fade in on each change. */
.ll-wait-phrase {
    animation: llWaitFade 0.35s ease both;
    font-style: italic;
    letter-spacing: 0.01em;
}
@keyframes llWaitFade {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ll-msg-row { animation: none; will-change: auto; }
    .ll-bubble--ai:hover, .ll-bubble--user:hover { transform: none; }
    .ll-wait-phrase { animation: none; }
}

/* ============================================================
   Mode selector — frosted champagne pill + upward dropdown (multi GPTs).
   ============================================================ */
.ll-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(204, 153, 51, 0.28);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 2px rgba(30, 30, 30, 0.04);
    font-size: 0.8rem;
    color: #4f4536;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}
.ll-mode-pill:hover {
    border-color: rgba(204, 153, 51, 0.55);
    box-shadow: 0 4px 14px rgba(204, 153, 51, 0.1);
    transform: translateY(-1px);
}
.ll-mode-pill.is-open { border-color: #8F6A12; }
.ll-mode-pill__icon { width: 1rem; height: 1rem; color: #8F6A12; flex-shrink: 0; }
.ll-mode-pill__k { color: #9a8f7a; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.66rem; }
.ll-mode-pill__name { font-weight: 700; color: #1E1E1E; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-mode-pill__badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.4rem; border-radius: 999px; }
.ll-mode-pill__badge.is-auto { color: #8F6A12; background: rgba(204, 153, 51, 0.14); }
.ll-mode-pill__badge.is-fixed { color: #1E1E1E; background: rgba(30, 30, 30, 0.08); }
.ll-mode-pill__chev { width: 0.8rem; height: 0.8rem; color: #9a8f7a; transition: transform 0.2s ease; }
.ll-mode-pill__chev.is-up { transform: rotate(180deg); }

.ll-mode-menu {
    position: absolute;
    left: 0;                        /* left-aligned to the top-left pill */
    bottom: calc(100% + 0.5rem);    /* opens UPWARD, above the composer */
    z-index: 50;
    width: 19rem;
    max-width: 84vw;
    background: #fff;
    border: 1px solid rgba(30, 30, 30, 0.08);
    border-radius: 0.9rem;
    box-shadow: 0 10px 30px rgba(30, 30, 30, 0.12);
    padding: 0.4rem;
}
.ll-mode-menu__hint { font-size: 0.68rem; color: #9a8f7a; padding: 0.3rem 0.5rem 0.4rem; line-height: 1.3; }
.ll-mode-menu__sep { height: 1px; background: rgba(30, 30, 30, 0.06); margin: 0.25rem; }

/* The Auto row (single clickable button). */
.ll-mode-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    text-align: left;
    padding: 0.5rem 0.55rem;
    border-radius: 0.6rem;
    color: #4f4536;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}
.ll-mode-option:hover { background: rgba(204, 153, 51, 0.08); color: #1E1E1E; }
.ll-mode-option.is-active { background: rgba(204, 153, 51, 0.1); }
.ll-mode-option__body { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.ll-mode-option__title { font-size: 0.85rem; font-weight: 700; color: #1E1E1E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-mode-option__sub { font-size: 0.72rem; font-weight: 400; color: #9a8f7a; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-mode-option__desc { font-size: 0.72rem; color: #9a8f7a; line-height: 1.25; }
.ll-mode-option__check { width: 1.05rem; height: 1.05rem; color: #8F6A12; flex-shrink: 0; }

/* Use-case rows: {label} / {name} pick button + an info button revealing the Purpose. */
.ll-mode-item { border-radius: 0.6rem; }
.ll-mode-item.is-active { background: rgba(204, 153, 51, 0.1); }
.ll-mode-item__row { display: flex; align-items: stretch; }
.ll-mode-item__pick {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    text-align: left;
    padding: 0.5rem 0.55rem;
    border-radius: 0.6rem;
    color: #4f4536;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}
.ll-mode-item__pick:hover { background: rgba(204, 153, 51, 0.08); color: #1E1E1E; }
.ll-mode-item__info {
    flex-shrink: 0;
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b7ad99;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: color 0.14s ease, background-color 0.14s ease;
}
.ll-mode-item__info:hover, .ll-mode-item__info.is-open { color: #8F6A12; background: rgba(204, 153, 51, 0.1); }
.ll-mode-item__info svg { width: 1rem; height: 1rem; }
.ll-mode-item__desc { font-size: 0.72rem; color: #6b6257; padding: 0 0.6rem 0.5rem; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
    .ll-mode-pill:hover { transform: none; }
    .ll-mode-pill__chev { transition: none; }
}

/* ============================================================
   Long-bubble clamp — collapse very long messages (e.g. pasted
   transcripts) to ~12 lines with a soft fade; "Show more" appears
   only when the content actually overflows.
   ============================================================ */
.ll-clamp {
    position: relative;
    max-height: 16rem;      /* ~12 lines at the chat body size */
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.ll-clamp.is-expanded { max-height: none; }
.ll-clamp__fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3.25rem;
    pointer-events: none;
}
/* Fade to each bubble's own background so the cut-off reads as a soft fade, not a hard edge. */
.ll-bubble--ai .ll-clamp__fade {
    background: linear-gradient(to bottom, rgba(250, 248, 244, 0), #faf8f4 92%);
}
.ll-bubble--user .ll-clamp__fade {
    background: linear-gradient(to bottom, rgba(251, 247, 241, 0), #fbf7f1 92%);
}
.ll-clamp__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #8F6A12;
    cursor: pointer;
    transition: color 0.15s ease;
}
.ll-clamp__toggle:hover { color: #6f520e; text-decoration: underline; }
.ll-clamp__chev { transition: transform 0.2s ease; }
.ll-clamp__chev.is-up { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .ll-clamp { transition: none; }
    .ll-clamp__chev { transition: none; }
}