/* Studio-specific color token overrides — warm terracotta palette */
:root {
    --md-primary: #E8623D;
    --md-on-primary: #FFFFFF;
    --md-primary-container: #FFF0EB;
    --md-on-primary-container: #8A3A1F;
    --md-inverse-primary: #FF7A4D;
}
.dark {
    --md-primary: #FF7A4D;
    --md-on-primary: #4A1A0A;
    --md-primary-container: #5C2A18;
    --md-on-primary-container: #FFD4C4;
    --md-inverse-primary: #E8623D;
}

/* Focus ring override — terracotta instead of blue */
.focus\:ring-blue-500:focus,
.focus\:ring-blue-500:focus-visible {
    --tw-ring-color: #E8623D !important;
    box-shadow: 0 0 0 2px #E8623D !important;
}

.no-underline {
    text-decoration: none !important;
}

@media (display-mode: standalone) {
    body {
        overscroll-behavior-y: contain;
    }
}

.dark select {
    background-color: transparent;
}

textarea:focus,
input:focus {
    outline: none;
}

/* Chat input: text is rendered directly by the textarea (text-gray-800 /
   dark:text-gray-100 utility classes). Terracotta caret matches the accent. */
#chat-input {
    caret-color: #E8623D;
}
.dark #chat-input {
    caret-color: #FF7A4D;
}

button {
    cursor: pointer;
}

/* Dark mode input colors for studio toolbar */
.dark input[type="number"],
.dark input[type="text"],
.dark input[type="date"],
.dark textarea,
.dark select {
    background-color: #252525 !important;
}

.dark input[type="number"]:focus,
.dark input[type="text"]:focus,
.dark input[type="date"]:focus,
.dark textarea:focus,
.dark select:focus {
    background-color: #2B2826 !important;
}

#chat-input {
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    max-height: 155px;
}

.chat-container {
    min-height: 0;
}

/* Model mode dropdown — height cap (svh with vh fallback for older browsers) */
#model-mode-dropdown {
    max-height: 90vh;
    max-height: 90svh;
    overflow-x: hidden;
}

/* Desktop: JS sets top/bottom/right via inline styles (fixed positioning escapes overflow:hidden root).
   These rules only control transform-origin for the open/close animation.
   The JS also sets max-height to the chosen direction's available space
   so the dropdown never exceeds the viewport regardless of button position. */
@media (min-width: 768px) {
    #model-mode-dropdown {
        max-height: 85vh;
    }
    #model-mode-dropdown.dropdown-open-down {
        transform-origin: top right !important;
    }
    #model-mode-dropdown.dropdown-open-up {
        transform-origin: bottom right !important;
    }
}

/* Ensure Tools text is never shown on mobile */
@media (max-width: 999px) {
    #tools-menu-text {
        display: none !important;
    }
}

.sidebar-container {
    height: 100dvh;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Collapsible Sections */
.collapsible-header .chevron {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible-section.collapsed .chevron {
    transform: rotate(-90deg);
}

.collapsible-content {
    max-height: 2000px;
    /* High enough to show all content */
    opacity: 1;
    overflow: visible;
    transition: max-height 0.3s var(--md-easing-standard), opacity 0.2s var(--md-easing-standard), padding 0.3s var(--md-easing-standard);
}

.collapsible-section.collapsed .collapsible-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.collapsible-header:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dark .collapsible-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}


.chat-bubble:hover+.message-controls,
.message-controls:hover {
    opacity: 1 !important;
}

.flex-col:hover .message-controls {
    opacity: 1 !important;
}

body.generating .copy-btn,
body.generating .more-msg-btn,
body.generating .speak-msg-btn,
body.generating .rewrite-msg-btn,
body.generating .fork-msg-btn,
body.generating .regenerate-msg-btn,
body.generating .copy-msg-btn,
body.generating .edit-msg-btn {
    display: none !important;
}

/* Large Model Selector Dropdown (Reference Image Style) */
.large-model-selector .custom-select-wrapper {
    margin-top: 8px;
}

.large-model-selector .custom-select-trigger {
    height: 48px;
    border-radius: 24px;
    padding: 0 16px;
    background-color: #F2EDE6;
    border: 1px solid transparent;
    box-shadow: none;
}

.dark .large-model-selector .custom-select-trigger {
    background-color: #232020;
}

.large-model-selector .custom-select-trigger:hover {
    background-color: #F2EDE6;
}

.dark .large-model-selector .custom-select-trigger:hover {
    background-color: #2B2826;
}

.large-model-selector .current-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
}

.large-model-selector .current-value::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("img/spark.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.large-model-selector .tune-icon {
    display: flex;
    align-items: center;
    color: #5f6368;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid #dadce0;
}

.dark .large-model-selector .tune-icon {
    color: #9aa0a6;
    border-left-color: #3A3530;
}

/* Sidebar Sections */
#model-options-area {
    scrollbar-width: thin;
}

#user-preferences-area {
    background-color: transparent;
}

.settings-label {
    display: block;
    margin-bottom: 2px;
    color: #3A3530;
    font-size: 12px;
}

/* Custom Audio Player */
.custom-audio-player {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    background: #F2EDE6;
    border-radius: 20px;
    padding: 12px;
    gap: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s var(--md-easing-standard);
    user-select: none;
}

.dark .custom-audio-player {
    background: #232020;
    border-color: rgba(255, 255, 255, 0.1);
}

.audio-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.audio-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #E8623D;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dark .audio-icon-wrapper {
    background: #FF7A4D;
    color: #4A1A0A;
}

.audio-controls-main {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.play-pause-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #004a77;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: none;
    flex-shrink: 0;
}

.play-pause-btn:hover {
    transform: scale(1.05);
    background: #003a5c;
}

.dark .play-pause-btn {
    background: #FF7A4D;
    color: #4A1A0A !important;
}

.dark .play-pause-btn:hover {
    background: #FFD4C4;
}

.progress-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.progress-bar-wrapper {
    position: relative;
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    cursor: pointer;
    overflow: visible;
    /* Claim touch gestures so dragging the audio scrubber seeks instead of
       scrolling the page (setupAudioPlayers attaches a document touchmove). */
    touch-action: none;
}

.dark .progress-bar-wrapper {
    background: rgba(255, 255, 255, 0.1);
}

.progress-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #004a77;
    border-radius: 3px;
    width: 0%;
    pointer-events: none;
}

.dark .progress-bar-fill {
    background: #FF7A4D;
}

.progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: #004a77;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s;
    pointer-events: none;
}

.progress-bar-wrapper:hover .progress-thumb {
    transform: translate(-50%, -50%) scale(1.2);
}

.dark .progress-thumb {
    background: #FF7A4D;
}

.audio-time {
    font-size: 11px;
    color: #5f6368;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    font-family: monospace;
}

.dark .audio-time {
    color: #9aa0a6;
}

.audio-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.audio-action-btn {
    padding: 6px;
    border-radius: 50%;
    color: #5f6368 !important;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-action-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dark .audio-action-btn {
    color: #E8E2DA !important;
}

.dark .audio-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.custom-audio-player .material-symbols-outlined {
    font-size: 24px;
}

/* ━━━ Model List View ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.model-list-view {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.model-filter-chip {
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.model-card {
    user-select: none;
    -webkit-user-select: none;
}

.model-card:active {
    opacity: 0.7;
}

/* Compact custom-select for the model panel sort control — overrides the
   pill-shaped global .custom-select-trigger so it matches the search input. */
#model-slide-panel .model-sort-select-wrap {
    width: auto;
    flex-shrink: 0;
}
#model-slide-panel .model-sort-select-wrap .custom-select {
    width: auto;
}
#model-slide-panel .model-sort-select-wrap .custom-select-trigger {
    height: 34px;
    padding: 0 8px 0 12px;
    border-radius: 8px;
    border: 1px solid rgb(209 213 219);
    background: #fff;
    box-shadow: none;
    font-size: 12px;
    white-space: nowrap;
}
.dark #model-slide-panel .model-sort-select-wrap .custom-select-trigger {
    border-color: #5f6368;
    background: #2B2826;
    box-shadow: none;
}
#model-slide-panel .model-sort-select-wrap .custom-select-trigger:hover {
    background: #f9fafb;
}
.dark #model-slide-panel .model-sort-select-wrap .custom-select-trigger:hover {
    background: #33302E;
}
#model-slide-panel .model-sort-select-wrap .custom-select-trigger .arrow .material-symbols-outlined {
    font-size: 18px;
}
#model-slide-panel .model-sort-select-wrap .custom-options {
    min-width: 160px;
}

/* ━━━ Model Slide Panel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#model-slide-panel {
    will-change: transform;
}

#model-panel-overlay {
    will-change: opacity;
}

#model-picker-trigger:active {
    transform: scale(0.98);
}

/* Long-press press state (Agent 4 toggles this class on 600ms press targets). */
.is-pressing {
    transform: scale(0.98);
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
    transition: transform var(--md-duration-xs) var(--md-easing-standard),
                background var(--md-duration-xs) var(--md-easing-standard);
    touch-action: manipulation;
}

.play-pause-btn .material-symbols-outlined {
    font-size: 32px;
}

.dark .settings-label {
    color: #E8E2DA;
}

/* Storage Progress Bar Styles */
.storage-bar-progress {
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s var(--md-easing-standard), box-shadow 0.4s var(--md-easing-standard);
}

.storage-bar-progress.safe {
    background: linear-gradient(90deg, #E8623D, #D4562F);
    box-shadow: 0 0 8px rgba(232, 98, 61, 0.3);
}

.storage-bar-progress.danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.4);
}

.custom-select-wrapper select {
    display: none !important;
}

.map-citation {
    display: inline-flex;
    transition: transform 0.2s var(--md-easing-standard);
}

.map-citation:hover {
    transform: scale(1.2);
}

/* Citations Styling */
.citations-container {
    vertical-align: super;
    font-size: 0.7em;
    font-weight: 500;
    margin-left: 1px;
    display: inline-flex;
    gap: 1px;
    user-select: none;
}

.citation-link {
    color: #E8623D;
    text-decoration: none;
    padding: 0 1px;
    border-radius: 2px;
    transition: background-color 0.2s;
    line-height: 1;
}

.citation-link:hover {
    background-color: rgba(232, 98, 61, 0.1);
    text-decoration: underline;
}

.dark .citation-link {
    color: #FF7A4D;
}

.dark .citation-link:hover {
    background-color: rgba(255, 122, 77, 0.2);
}

.kb-citation {
    display: inline;
    padding: 0 2px;
    margin: 0 1px;
    font-size: 0.75em;
    font-weight: 600;
    vertical-align: super;
    line-height: 1;
    color: #E8623D;
    background: rgba(232, 98, 61, 0.08);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.kb-citation:hover {
    background: rgba(232, 98, 61, 0.18);
    text-decoration: underline;
}

.dark .kb-citation {
    color: #FF7A4D;
    background: rgba(255, 122, 77, 0.12);
}

.dark .kb-citation:hover {
    background: rgba(255, 122, 77, 0.22);
}

.kb-citation-popup {
    position: fixed;
    z-index: 9999;
    max-width: min(420px, calc(100vw - 16px));
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 0.875rem;
    line-height: 1.45;
}

.dark .kb-citation-popup {
    background: #2B2826;
    border-color: #3A3530;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.kb-citation-popup-source {
    font-weight: 600;
    margin-bottom: 4px;
    color: #1f2937;
}

.dark .kb-citation-popup-source {
    color: #EDE8E3;
}

.kb-citation-popup-page {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 6px;
}

.kb-citation-popup-snippet {
    color: #4b5563;
    white-space: pre-wrap;
}

.dark .kb-citation-popup-snippet {
    color: #9ca3af;
}

.markdown-body sup.citations-container {
    top: -0.4em;
    position: relative;
}

.chat-bubble {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Quiz Details/Summary Styles */
details summary::-webkit-details-marker {
    display: none;
}

details summary {
    list-style: none;
}

.streaming-glow::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(232, 98, 61, 0.4), #E8623D, rgba(232, 98, 61, 0.4), transparent);
    background-size: 200% 100%;
    animation: streaming-loading 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 0 1rem 1rem;
}

.streaming-glow .word-fade-in-inline {
    animation: word-fade-in 0.2s ease-out forwards;
}

@keyframes word-fade-in {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes streaming-loading {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

.markdown-body {
    background-color: transparent !important;
    color: inherit !important;
    font-size: inherit;
    line-height: 1.6 !important;
    transition: opacity 0.2s var(--md-easing-standard);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.markdown-body p {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.markdown-body p:first-child {
    margin-top: 0 !important;
}

.markdown-body p:last-child {
    margin-bottom: 0 !important;
}

/* Fix missing list styles due to Tailwind reset */
.markdown-body ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.markdown-body ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.markdown-body li {
    margin-top: 0.25rem;
}

.markdown-body pre {
    background: #F2EDE6 !important;
    padding: 1rem;
    border-radius: 1rem;
    overflow-x: auto;
}

.markdown-body .code-block-container pre {
    background: transparent !important;
    padding: 1rem !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.markdown-body .code-block-container {
    background: white !important;
}

.dark .markdown-body .code-block-container {
    background: #0d0d0d !important;
}

.dark .markdown-body pre {
    background: #000000 !important;
}

.code-block-container {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark .code-block-container {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.copy-code-btn:active,
.run-html-btn:active {
    transform: scale(0.95);
}

.html-preview-area iframe {
    background: white;
}

.markdown-body code {
    font-family: 'Fira Code', monospace;
    background-color: transparent !important;
}

.dark .markdown-body code {
    background-color: transparent !important;
}

/* Markdown tables — themed explicitly so they never depend on which
   github-markdown CDN variant (light/dark) happens to be loaded. The text
   color is forced to `inherit` on .markdown-body, so without these rules the
   table keeps the CDN's white rows and becomes light-grey-on-white. We drive
   table colors off the app's own `.dark` class (toggled in theme.js). */
.markdown-body table {
    display: block;
    width: max-content;
    /* AI tables with CJK headers collapse to unreadable narrow columns when
       the chat bubble is wide but the wrapper width tracks it (min-width:100%
       on its own keeps the table fully squished). Floor the table at 640px so
       a 5-column CJK-numeric report stays legible; the .table-block-container
       wrapper handles horizontal scroll when narrower than that. */
    min-width: 640px;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0.75rem 0 !important;
    font-size: 0.9em;
}

.markdown-body table th,
.markdown-body table td {
    border: 1px solid #d1d5db !important;
    padding: 0.5rem 0.75rem !important;
    text-align: left;
    background-color: transparent !important;
    color: inherit !important;
}

.markdown-body table th {
    background-color: #F2EDE6 !important;
    font-weight: 600;
}

.markdown-body table tr {
    background-color: transparent !important;
    border-top: 1px solid #d1d5db !important;
}

.markdown-body table tr:nth-child(2n) {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

.dark .markdown-body table th,
.dark .markdown-body table td {
    border-color: #3A3530 !important;
}

.dark .markdown-body table th {
    background-color: #232020 !important;
}

.dark .markdown-body table tr {
    border-top-color: #3A3530 !important;
}

.dark .markdown-body table tr:nth-child(2n) {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Markdown tables: the table_open/table_close renderer (message-renderer.js)
   wraps every table in .table-block-container. Without its own overflow-x,
   a wide AI-generated table forces the whole chat bubble wider instead of
   scrolling internally on narrow viewports. */
.table-block-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dark,
.dark-mode {
    background-color: #1A1816;
    color: #EDE8E3;
}

/* Quiz specific styles */
#options-container button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#options-container button:not(:disabled):active {
    transform: scale(0.98);
}

#options-container button:disabled {
    cursor: default;
}

#quiz-overlay {
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Flashcard + quiz utilities moved to ../css/study-cards.css (shared with Notebook). */

.rotate-90 {
    transform: rotate(90deg) !important;
}

.group[open] .group-open\:rotate-90 {
    transform: rotate(90deg) !important;
}

.text-gray-400,
.text-gray-500,
.text-gray-600,
.model-badge,
.time-badge,
.token-badge,
.message-controls {
    color: #3A3530 !important;
}

.dark .text-gray-300,
.dark .text-gray-400,
.dark .text-gray-500,
.dark .text-gray-600,
.dark-mode .text-gray-300,
.dark-mode .text-gray-400,
.dark-mode .text-gray-500,
.dark-mode .text-gray-600,
.dark .model-badge,
.dark .time-badge,
.dark .token-badge,
.dark .message-controls {
    color: #E8E2DA !important;
}

.dark .hover\:text-gray-700:hover,
.dark-mode .hover\:text-gray-700:hover {
    color: #e2e8f0;
}

.dark .text-blue-600,
.dark-mode .text-blue-600 {
    color: #FF7A4D;
}

.dark .bg-blue-100,
.dark-mode .bg-blue-100 {
    background-color: #5C2A18;
}

/* Multi-agent panels: token-breakdown table always scrolls in its own box
   rather than overflowing the chat bubble. */
.usage-breakdown-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Multi-agent panels: model badge + elapsed timer + dependency chips wrap
   onto their own line instead of overflowing the chat bubble on narrow
   viewports. */
@media (max-width: 480px) {
    .agent-panel summary .flex.items-start.gap-3 {
        gap: 0.5rem;
    }
    .agent-panel .agent-model-badge,
    .agent-panel .agent-elapsed-badge {
        font-size: 8px;
    }
    .agent-deps-row span {
        white-space: normal;
    }
    .usage-breakdown-table {
        min-width: 360px;
    }
}

.dark #chat-input,
.dark-mode #chat-input {
    background-color: transparent !important;
}

.dark .dark\:border-gray-600,
.dark-mode .dark\:border-gray-600 {
    border-color: #4b5563;
}

.dark .hover\:text-blue-600:hover,
.dark-mode .hover\:text-blue-600:hover {
    color: #FF7A4D;
}


.thinking-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Three-dot wave loading indicator */
.spark-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.spark-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E8623D;
    animation: spark-dot-wave 1.2s ease-in-out infinite;
}
.dark .spark-dots span {
    background: #FF7A4D;
}
.spark-dots span:nth-child(2) { animation-delay: 0.15s; }
.spark-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes spark-dot-wave {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .spark-dots span { animation: none; opacity: 0.6; }
}

.animate-spin {
    animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite !important;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

hr {
    height: inherit;
}

#sidebar.is-collapsed {
    width: 68px !important;
}

.sidebar-text,
#history-header,
#history-list {
    transition: opacity 0.2s var(--md-easing-standard);
    white-space: nowrap;
}

#history-list>div {
    -webkit-touch-callout: none;
}

#sidebar.is-collapsed .sidebar-text,
#sidebar.is-collapsed #history-header,
#sidebar.is-collapsed #history-list {
    opacity: 0;
    pointer-events: none;
    width: 0;
    max-width: 0;
    overflow: hidden;
}

.sidebar-btn {
    transition-property: padding, background-color, width, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.sidebar-btn .material-symbols-outlined {
    transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar.is-collapsed .sidebar-btn {
    padding-right: 0 !important;
    padding-left: 0 !important;
    justify-content: center;
}

#sidebar.is-collapsed .sidebar-btn .material-symbols-outlined,
#sidebar.is-collapsed .sidebar-btn > span:first-child {
    margin-right: 0 !important;
}

.container {
    max-width: unset !important;
}

.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@keyframes spin-once {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-spin-once {
    animation: spin-once 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-in-from-top {
    animation: fadeInFromTop 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global App Loader — Spark Pulse */
#app-loader-overlay {
    opacity: 1;
    pointer-events: all;
}

/* Keep the status spinner square when long tool labels (e.g. web search
   queries) compress the flex row — absolute children don't contribute a
   min-content width, so without shrink:0 the ring collapses into an ellipse. */
.loader-placeholder {
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.loader-wrapper-inner,
.direct-loader-wrapper {
    max-width: 100%;
}

.loader-wrapper-inner .loading-text-span,
.loader-wrapper-inner .thinking-title,
.direct-loader-wrapper .thinking-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Spark Loader: breathing ring + mark */
.spark-loader {
    position: relative;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.spark-loader-ring {
    box-sizing: border-box;
    border: 2px solid transparent;
    border-top-color: #E8623D;
    border-right-color: #E8623D;
    border-radius: 50%;
    animation: spark-ring-spin 1.4s var(--md-easing-standard, cubic-bezier(0.2, 0, 0, 1)) infinite;
}

.dark .spark-loader-ring {
    border-top-color: #FF7A4D;
    border-right-color: #FF7A4D;
}

.spark-loader-mark {
    animation: spark-mark-pulse 1.8s ease-in-out infinite;
    transform-origin: center;
}

@keyframes spark-ring-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spark-mark-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .spark-loader-ring { animation: none; opacity: 0.4; }
    .spark-loader-mark { animation: none; opacity: 0.9; }
}

/* Legacy app-loader classes removed — replaced by .spark-loader above */

.katex-display {
    margin: 0.5rem;
}

@media (max-width: 1000px) {
    .user-message .chat-bubble {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ============================================================
   MATERIAL DESIGN 3 — Studio Component Overrides
   Seed: Terracotta #E8623D · Dark scheme default
   ============================================================ */

/* --- Navigation Drawer / Rail --- */
.dark #sidebar,
.dark #sidebar.is-collapsed {
    background: var(--md-surface-container-low) !important;
    border-right-color: var(--md-outline-variant) !important;
}

.dark #right-sidebar {
    background: var(--md-surface-container-low) !important;
    border-left-color: var(--md-outline-variant) !important;
}

/* Sidebar button hover: MD3 state layer */
.dark .sidebar-btn:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
}

/* Active chat history item: MD3 secondary-container indicator */
.dark .history-item.active-chat {
    background: var(--md-secondary-container) !important;
    color: var(--md-on-secondary-container) !important;
    border-radius: var(--md-shape-full) !important;
}

/* --- New Chat FAB style (dark mode) --- */
.dark #new-chat-btn {
    background: #E8623D !important;
    color: #FFFFFF !important;
    border-radius: var(--md-shape-xl) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.15) !important;
    transition: background var(--md-duration-s) var(--md-easing-standard),
                transform var(--md-duration-s) var(--md-easing-standard),
                box-shadow var(--md-duration-s) var(--md-easing-standard) !important;
}
.dark #new-chat-btn:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 6px 12px rgba(0,0,0,0.2) !important;
    transform: scale(1.02);
}

/* Temp chat button: MD3 tonal */
.dark #temp-chat-btn:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
}

/* --- Header (unified with main chat area — no separate surface) --- */
.dark header {
    background: transparent !important;
    border-bottom: none !important;
}

/* Header icon buttons: MD3 state layer */
.dark header button:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
}

/* --- Chat Input: MD3 Filled Text Field --- */
.md3-text-field-container {
    background: var(--md-surface-container-highest) !important;
    border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: box-shadow var(--md-duration-s) var(--md-easing-standard) !important;
}
@media (min-width: 1000px) {
    .md3-text-field-container {
        border-radius: var(--md-shape-xl) !important;
    }
}
.md3-text-field-container:focus-within {
    box-shadow: 0 0 0 2px #E8623D,
                0 6px 32px rgba(232,98,61,0.2) !important;
}

/* --- Send Button: terracotta FAB --- */
#send-btn {
    background: #E8623D !important;
    color: #FFFFFF !important;
    border-radius: var(--md-shape-lg) !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    transition: background var(--md-duration-s) var(--md-easing-standard),
                transform var(--md-duration-s) var(--md-easing-standard),
                box-shadow var(--md-duration-s) var(--md-easing-standard),
                color var(--md-duration-s) var(--md-easing-standard) !important;
}
#send-btn:disabled {
    background: transparent !important;
    color: var(--md-on-surface-variant) !important;
    opacity: 0.38 !important;
    box-shadow: none !important;
}
#send-btn:not(:disabled):hover {
    background: #D4562F !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    transform: scale(1.06);
}
#send-btn:not(:disabled):active {
    transform: scale(0.94) !important;
}

/* Stop button: MD3 tonal */
.dark #stop-btn {
    background: var(--md-surface-container-high) !important;
    color: var(--md-on-surface) !important;
    border-radius: var(--md-shape-full) !important;
}
.dark #stop-btn:hover {
    background: var(--md-surface-container-highest) !important;
}

/* --- MD3 Assist Chips (suggestion buttons) --- */
.md3-assist-chip {
    height: 32px;
    padding: 0 16px 0 8px;
    border-radius: var(--md-shape-sm);
    background: var(--md-surface-container-low);
    border: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: background var(--md-duration-s) var(--md-easing-standard),
                box-shadow var(--md-duration-s) var(--md-easing-standard);
}
.md3-assist-chip:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, var(--md-surface-container-low));
    box-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
}
.md3-assist-chip .material-symbols-outlined {
    font-size: 18px;
    color: #E8623D;
    transition: transform var(--md-duration-s) var(--md-easing-standard);
}
.md3-assist-chip:hover .material-symbols-outlined {
    transform: scale(1.1);
}

/* --- MD3 Input Chips (tool chips) --- */
.dark #dynamic-tool-chip,
.dark #grounding-chip,
.dark #maps-chip,
.dark #url-context-chip {
    background: color-mix(in srgb, #FF7A4D 12%, transparent) !important;
    border: 1px solid var(--md-outline-variant) !important;
    border-radius: var(--md-shape-sm) !important;
}
.dark #dynamic-tool-chip *,
.dark #grounding-chip *,
.dark #maps-chip *,
.dark #url-context-chip * {
    color: #FF7A4D !important;
}
.dark #dynamic-tool-icon,
.dark #dynamic-tool-text {
    color: #FF7A4D !important;
}

/* --- MD3 Menus / Dropdowns --- */
.dark #upload-dropdown,
.dark #tools-dropdown,
.dark #model-mode-dropdown,
.dark #settings-dropdown,
.dark #user-dropdown {
    background: var(--md-surface-container) !important;
    border: 1px solid var(--md-outline-variant) !important;
    border-radius: var(--md-shape-md) !important;
    box-shadow: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3) !important;
}
/* Dropdown open easing (applied by existing JS) */
.dark #upload-dropdown:not([style*="translate-y-full"]),
.dark #tools-dropdown:not([style*="translate-y-full"]),
.dark #model-mode-dropdown:not([style*="translate-y-full"]) {
    transition: transform var(--md-duration-m) var(--md-easing-enter),
                opacity var(--md-duration-s) var(--md-easing-standard) !important;
}
/* Row hover state layer */
.dark #upload-dropdown button:hover,
.dark #tools-dropdown button:hover,
.dark #model-mode-dropdown button:hover,
.dark #settings-dropdown button:hover,
.dark #settings-dropdown a:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, var(--md-surface-container)) !important;
}

/* Settings submenu panels */
.dark #settings-dropdown-theme,
.dark #settings-dropdown-lang,
.dark #settings-dropdown-resplang,
.dark #settings-dropdown-dest {
    background: var(--md-surface-container) !important;
    border: 1px solid var(--md-outline-variant) !important;
    border-radius: var(--md-shape-md) !important;
}

/* Desktop: flyout submenus */
/* Hide right arrow on mobile (shown only on desktop via media query below) */
.settings-arrow-right { display: none; }

@media (min-width: 1000px) {
    .settings-submenu-group .settings-arrow-down { display: none !important; }
    .settings-submenu-group .settings-arrow-right { display: inline-flex !important; }

    .settings-submenu-group .settings-submenu-panel {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        width: 220px;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 120ms var(--md-easing-standard), visibility 120ms var(--md-easing-standard);
        background: #F8F5F1;
        border-radius: 1rem;
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        border: 1px solid rgba(0,0,0,0.08);
        z-index: 9999;
        padding: 8px 0;
    }
    .dark .settings-submenu-group .settings-submenu-panel {
        background: var(--md-surface-container, #2d2e30);
        border-color: var(--md-outline-variant, rgba(255,255,255,0.12));
        box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    }
    /* Visibility is driven exclusively by JS (.is-open), not :hover, so that
       hover and click share one open/close mechanism and only one flyout
       can ever be visible at a time. */
    .settings-submenu-group.is-open .settings-submenu-panel {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* Hover bridge: the panel is anchored 4px outside the dropdown, so the
       pointer would otherwise cross a dead gap on its way to the options and
       fire mouseleave on the group. This invisible strip is a child of the
       panel (hence of the group), so the gap stays "inside" the hover area for
       the panel's full height — including diagonal travel to a lower option. */
    .settings-submenu-group .settings-submenu-panel::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 10px;
    }
    .settings-submenu-group .settings-submenu-panel[data-flyout-side="right"]::before {
        left: -10px;
    }
    .settings-submenu-group .settings-submenu-panel[data-flyout-side="left"]::before {
        right: -10px;
    }

    #settings-dropdown-connectors {
        width: 300px;
    }
}

/* --- Model Mode Dropdown icons: terracotta --- */
.dark #model-mode-dropdown .text-blue-500,
.dark #right-sidebar .text-blue-500,
.dark [id^="check-"] {
    color: #FF7A4D !important;
}

/* Selected-option check icons in settings submenus (language, theme,
   response-language, storage destination) use the class hook rather than an
   id, so they're not covered by the [id^="check-"] rule above. Give the
   active check the same accent so the chosen option is clearly marked. */
.check-icon {
    color: #FF7A4D;
}

/* --- Welcome screen: MD3 Expressive + Space Grotesk --- */
#greeting-sparkle {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    letter-spacing: -0.025em !important;
    background: linear-gradient(92deg, #FF7A4D 0%, #E8623D 45%, #C44A2E 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
#greeting-text {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    letter-spacing: -0.02em !important;
}
.dark #greeting-text {
    color: var(--md-on-surface) !important;
}

/* Expressive background orbs — visible on welcome screen */
.dark main:has(#welcome-message:not(.hidden))::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(50% 40% at 20% 30%, rgba(232,98,61,0.06), transparent 70%),
        radial-gradient(40% 50% at 80% 70%, rgba(255,122,77,0.04), transparent 70%);
}

/* Main background: MD3 surface-dim */
.dark main {
    background-color: var(--md-surface-dim) !important;
}
.dark main:has(#welcome-message:not(.hidden)) {
    background-color: var(--md-surface-dim) !important;
}

/* --- Audio Player: terracotta tonal --- */
.play-pause-btn {
    background: #E8623D !important;
    color: #FFFFFF !important;
    border-radius: var(--md-shape-full) !important;
    transition: transform var(--md-duration-s) var(--md-easing-standard),
                box-shadow var(--md-duration-s) var(--md-easing-standard) !important;
}
.play-pause-btn:hover {
    background: #D4562F !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}

.progress-bar-fill {
    background: #E8623D !important;
}
.progress-thumb {
    background: #E8623D !important;
}

/* --- Streaming glow: terracotta instead of blue --- */
.streaming-glow::after {
    background: linear-gradient(90deg, transparent, rgba(232,98,61,0.4), #E8623D, rgba(232,98,61,0.4), transparent) !important;
}

/* --- App loader: terracotta progress bar --- */
#app-loader-progress-fill {
    background: #E8623D !important;
}

/* --- Credit chip: warm tonal --- */
.dark #credit-chip {
    background: color-mix(in srgb, #FF7A4D 15%, transparent) !important;
    color: #FF7A4D !important;
    border-radius: var(--md-shape-full) !important;
}
.dark #credit-chip:hover {
    background: color-mix(in srgb, #FF7A4D 25%, transparent) !important;
}

/* --- TTS buttons: terracotta filled --- */
.dark #tts-generate-btn {
    background: #E8623D !important;
    color: #FFFFFF !important;
    border-radius: var(--md-shape-lg) !important;
    transition: box-shadow var(--md-duration-s) var(--md-easing-standard),
                transform var(--md-duration-s) var(--md-easing-standard) !important;
}
.dark #tts-generate-btn:hover {
    background: #D4562F !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    transform: translateY(-1px);
}

/* --- Right sidebar sections: MD3 collapsible header --- */
.dark .collapsible-header:hover {
    background-color: color-mix(in srgb, var(--md-on-surface) 8%, transparent) !important;
}

/* --- Raw mode toggle: MD3 indigo --- */
#raw-mode-toggle:checked ~ div,
#refine-prompt-toggle:checked ~ div,
#research-mode-toggle:checked ~ div {
    background-color: var(--md-primary) !important;
}

/* --- Offline indicator: MD3 error container --- */
.dark #offline-indicator {
    background: #93000A !important;
}

/* --- Focus-visible ring: MD3 primary --- */
:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: 0;
}

/* The composer already shows focus via .md3-text-field-container:focus-within,
   so suppress the redundant per-element outline to avoid a doubled focus ring. */
.md3-text-field-container :focus-visible {
    outline: none !important;
}

/* --- Mention picker: MD3 menu style --- */
.dark #mention-picker {
    background: var(--md-surface-container) !important;
    border: 1px solid var(--md-outline-variant) !important;
    border-radius: var(--md-shape-md) !important;
}

/* --- Settings label (right sidebar): MD3 label style --- */
.dark .settings-label {
    color: var(--md-on-surface-variant) !important;
}

/* --- Storage bar progress: terracotta --- */
.storage-bar-progress.safe {
    background: linear-gradient(90deg, #E8623D, #D4562F) !important;
    box-shadow: 0 0 8px rgba(232, 98, 61, 0.3) !important;
}

/* --- Project working-set tray (header) --- */
.working-set-tray-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid #E8E2DA;
    background: #FAF8F5;
}
.dark .working-set-tray-inner {
    border-color: #3A3530;
    background: #1F1C1A;
}
.working-set-tray-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #8A8278;
}
.working-set-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.working-set-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 180px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid #E8E2DA;
    background: #fff;
    color: #2A2725;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}
.dark .working-set-chip {
    border-color: #3A3530;
    background: #2B2826;
    color: #EDE8E3;
}
.working-set-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.working-set-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 2px;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
}
.working-set-chip-remove:hover { opacity: 1; }
.working-set-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px dashed #C4B8AE;
    background: transparent;
    color: #8A8278;
    cursor: pointer;
}
.working-set-add-btn:hover {
    border-color: #E8623D;
    color: #E8623D;
}

/* create_slides live phase strip (Slides → Images) */
.slides-result-block .slides-phase-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.slides-result-block .slides-phase-step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #9ca3af;
}
.dark .slides-result-block .slides-phase-step { color: #6b7280; }
.slides-result-block .slides-phase-icon {
    font-size: 14px !important;
    line-height: 1;
}
.slides-result-block .slides-phase-active {
    color: #E8623D;
}
.dark .slides-result-block .slides-phase-active { color: #f0977c; }
.slides-result-block .slides-phase-active .slides-phase-icon {
    animation: slides-phase-spin 0.9s linear infinite;
}
.slides-result-block .slides-phase-done {
    color: #16a34a;
}
.dark .slides-result-block .slides-phase-done { color: #4ade80; }
.slides-result-block .slides-phase-sep {
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: #d1d5db;
    flex-shrink: 0;
}
.dark .slides-result-block .slides-phase-sep { background: #4b5563; }
.slides-result-block.slides-gen-ready {
    border-color: rgba(22, 163, 74, 0.35);
}
@keyframes slides-phase-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .slides-result-block .slides-phase-active .slides-phase-icon { animation: none; }
}

/* ── Tool-result badges (mindmap / slides / connector auth + success) ──────────
   All four cards share one shape: a `flex items-center gap-3` row with a
   `flex-1 min-w-0` body wedged between a leading icon and a `flex-shrink-0`
   action group. The body's `flex-basis: 0` means it loses every fight for
   width, so in a narrow column the nowrap pill buttons claim the whole row and
   the body collapses to roughly one glyph — CJK labels then wrap one character
   per line. Giving the body a real basis makes the action group wrap onto its
   own row instead; desktop is unchanged (one grow item still absorbs all slack).
   Selectors key off the persisted root class + Tailwind structure on purpose:
   this markup is baked into saved message history, so cards rendered before
   this fix have to restack too. Specificity is kept above (0,1,0) because
   Tailwind's browser build injects its utilities after style.css. */
div.mindmap-result-block,
div.connector-auth-block,
div.connector-success-block,
div.email-draft-block > .flex {
    flex-wrap: wrap;
}
.mindmap-result-block > .flex-1,
.connector-auth-block > .flex-1,
.connector-success-block > .flex-1,
.email-draft-block > .flex > .flex-1 {
    flex-basis: 12rem;
}
@media (max-width: 640px) {
    /* Wrapped state: the icon lines up with the title instead of floating
       against a now-tall body, and the actions become a full-width touch row. */
    div.mindmap-result-block,
    div.connector-auth-block,
    div.connector-success-block {
        align-items: flex-start;
    }
    .mindmap-result-block > .flex-shrink-0,
    .connector-auth-block > .flex-shrink-0,
    .connector-success-block > .flex-shrink-0 {
        flex: 1 0 100%;
        flex-wrap: wrap;
    }
    /* 9rem basis: two pills share the row when they fit, else each takes its own. */
    .mindmap-result-block > .flex-shrink-0 > a,
    .mindmap-result-block > .flex-shrink-0 > button,
    .connector-auth-block > .flex-shrink-0 > a,
    .connector-auth-block > .flex-shrink-0 > button,
    .connector-success-block > .flex-shrink-0 > a,
    .connector-success-block > .flex-shrink-0 > button,
    .email-draft-block > .flex > a {
        flex: 1 1 9rem;
        justify-content: center;
    }
}


/* ── App launcher (shared cross-app switcher) — Studio warm-palette overrides ── */
.dark #app-launcher {
    background: #2B2826;
    border-color: #3A3530;
    color: #EDE8E3;
}
.dark .app-launcher-item:hover,
.dark .app-launcher-item.kb-active { background: #3A3530; }
.dark .app-launcher-item.is-current { background: #1F1C1A; }
.dark .app-launcher-current { background: #3A3530; color: #8A8278; }
.dark .app-launcher-continue-row { background: #1F1C1A; }
.dark .app-launcher-continue-row:hover { background: #33302E; }
.dark .app-launcher-icon,
.dark .app-launcher-desc,
.dark .app-launcher-last,
.dark .app-launcher-title,
.dark .app-launcher-chevron { color: #8A8278; }
.dark .app-launcher-close { color: #8A8278; }
.dark .app-launcher-close:hover { background: #3A3530; }
.dark .app-launcher-overlay { background: rgba(0, 0, 0, 0.5); }