/* 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 {
    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 { margin-top: 0; }
.message-content h1 { font-size: 1.25rem; }
.message-content h2 { font-size: 1.125rem; }
.message-content h3 { font-size: 1rem; }

/* 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;
}

/* 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);
}