/* Dark Mode Color Palette */
:root {
    --primary-color: #4a90e2;  /* Soft blue */
    --secondary-color: #3a7ca5; /* Darker blue */
    
    /* Background Colors */
    --bg-color: #121212;  /* Deep dark background */
    --sidebar-bg: #1e1e1e;  /* Slightly lighter than main background */
    --chat-bg: #0e0e0e;  /* Almost black background for chat area */
    
    /* Text and Border Colors */
    --text-color: #e0e0e0;  /* Light gray text */
    --text-muted: #888888;  /* Muted gray for less important text */
    --border-color: #333333;  /* Dark border */
    
    /* Message Colors */
    --message-user-bg: #2c3e50;  /* Dark blue for user messages */
    --message-assistant-bg: #1c2833;  /* Dark slate for assistant messages */
    --message-system-bg: #2c3e50;  /* Dark blue for system messages */
    
    /* Interaction Colors */
    --chat-item-hover: #2c3e50;  /* Dark blue hover */
    --chat-item-active: #34495e;  /* Slightly lighter active state */
    
    /* Action Colors */
    --btn-danger: #e74c3c;  /* Bright red */
    --btn-success: #2ecc71;  /* Bright green */
    --btn-warning: #f39c12;  /* Bright orange */

    /* Sidebar Dimensions */
    --sidebar-width: 380px;
    --sidebar-min-width: 300px;
    --sidebar-max-width: 600px;
    --sidebar-collapsed-width: 50px;
    --sidebar-transition: 0.3s;
}

/* Global Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--sidebar-bg);
}

/* Webkit Scrollbar Styling */
*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--sidebar-bg);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 4px;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-color);
}

/* Sidebar Styles */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-min-width);
    max-width: var(--sidebar-max-width);
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: width var(--sidebar-transition) ease;
    position: relative;
    overflow: hidden;
    resize: horizontal;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
    resize: none;
}

/* Resize handle styling */
.sidebar:not(.collapsed)::-webkit-resizer {
    background-color: var(--border-color);
    border-left: 2px solid var(--primary-color);
}

.sidebar:not(.collapsed):hover::-webkit-resizer {
    background-color: var(--primary-color);
}

.sidebar-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    transition: opacity var(--sidebar-transition) ease;
    word-wrap: break-word;
    box-sizing: border-box;
}

.sidebar.collapsed .sidebar-content {
    opacity: 0;
    pointer-events: none;
}

/* Sidebar Toggle Button */
.sidebar-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--bg-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    border: 1px solid var(--border-color);
    transition: transform var(--sidebar-transition) ease;
}

.sidebar.collapsed .sidebar-toggle {
    transform: rotate(180deg);
    left: 10px;
    right: auto;
}

.sidebar-toggle:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Mini button to re-open sidebar */
.sidebar-toggle-mini {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--bg-color);
    color: var(--primary-color);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    border: 1px solid var(--border-color);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sidebar-toggle-mini:hover {
    background-color: var(--primary-color);
    color: white;
}

.sidebar.collapsed ~ .chat-container .sidebar-toggle-mini {
    display: flex;
    opacity: 1;
}

/* Dims the chat behind the drawer on touch layouts; tapping it closes.
   Only ever visible inside the touch media query below. */
.sidebar-backdrop {
    display: none;
}

.sidebar-header h1 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--primary-color);
    padding-right: 30px; /* Make room for the toggle button */
}

.model-section, .settings-section, .chats-section {
    margin-bottom: 12px;
    word-wrap: break-word;
}

.model-section h2, .settings-section h2, .chats-section h2 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Collapsible sidebar sections */
.sidebar-section {
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.sidebar-section-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
    border-bottom: 1px solid transparent;
}

.sidebar-section-summary::-webkit-details-marker {
    display: none;
}

.sidebar-section-summary::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    color: var(--text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.sidebar-section[open] > .sidebar-section-summary::before {
    transform: rotate(90deg);
}

.sidebar-section[open] > .sidebar-section-summary {
    border-bottom-color: var(--border-color);
    background: rgba(255, 255, 255, 0.03);
}

.sidebar-section-title {
    flex: 1;
    min-width: 0;
}

.sidebar-section-summary .section-header-actions {
    margin-left: auto;
}

.sidebar-section-action {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.sidebar-section-action:hover {
    color: var(--secondary-color);
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-section-body {
    padding: 10px 12px 12px;
}

.sidebar-subsection {
    margin-top: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.sidebar-subsection-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-color);
}

.sidebar-subsection-summary::-webkit-details-marker {
    display: none;
}

.sidebar-subsection-summary::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    color: var(--text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.sidebar-subsection[open] > .sidebar-subsection-summary::before,
.sidebar-subsection[open] > .compose-settings-summary::before {
    transform: rotate(90deg);
}

.sidebar-subsection .sidebar-section-body,
.sidebar-subsection .compose-settings-body {
    padding: 8px 10px 10px;
    border-top: 1px solid var(--border-color);
}

.section-header-actions {
    font-size: 0.9rem;
}

.section-header-actions button {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
}

.section-header-actions button:hover {
    color: var(--secondary-color);
}

/* Session-expiry banner. Fixed and full width because the failure it reports
   is one the user has no other evidence of -- their message simply vanished --
   so it has to be impossible to miss and impossible to scroll past. */
#session-expired-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    padding: 10px 16px;
    background-color: #b45309;
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

#session-expired-bar button {
    margin-left: 10px;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

/* Names the engine the list below belongs to. Same weight and colour as the
   mmproj label, because it is the same kind of thing: a quiet caption, not a
   heading competing with the section title. */
.model-source {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Model Dropdown and Inputs */
.model-dropdown {
    display: flex;
    margin-bottom: 15px;
    gap: 10px;
    flex-wrap: wrap;
}

#model-select {
    flex-grow: 1;
    min-width: 120px;
    padding: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    outline: none;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

#load-model-btn {
    padding: 8px 12px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

#load-model-btn:hover {
    background-color: var(--secondary-color);
}

#model-status {
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: var(--text-muted);
    word-wrap: break-word;
    line-height: 1.4;
}

/* Model Actions and Import */
.model-actions {
    display: flex;
    margin-bottom: 15px;
    gap: 10px;
}

.import-btn {
    padding: 8px 12px;
    background-color: var(--btn-success);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.85rem;
}

.import-btn:hover {
    background-color: #27ae60;
}

/* Browse HuggingFace Button */
.browse-btn {
    padding: 8px 12px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.85rem;
    margin-right: 8px;
}

.browse-btn:hover {
    background-color: var(--secondary-color);
}

/* Upload Progress */
#upload-progress {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--message-assistant-bg);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

/* Download Progress Section */
.download-progress-section {
    margin: 15px 0;
    padding: 15px;
    background-color: var(--message-assistant-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.progress-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 500;
    color: var(--primary-color);
}

.progress-header i {
    color: var(--secondary-color);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.progress-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-bar-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.download-progress-section .progress-bar {
    flex: 1;
    height: 20px;
    background-color: var(--bg-primary);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 10px;
    transition: width 0.3s ease;
    width: 0%;
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.progress-text {
    min-width: 45px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color);
}

.download-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 5px;
}

.download-stats span {
    background-color: var(--bg-primary);
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.progress-bar {
    width: 100%;
    height: 6px;
    background-color: var(--bg-color);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}

.progress-fill {
    height: 100%;
    background-color: var(--btn-success);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 3px;
}

.progress-text {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* HuggingFace Browser Styles */
.modal.large {
    width: 90%;
    max-width: 1000px;
    max-height: 80vh;
    overflow: hidden;
}

.search-section {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.search-input-container {
    display: flex;
    gap: 10px;
}

#hf-search {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 0.9rem;
}

#hf-search:focus {
    outline: none;
    border-color: var(--primary-color);
}

#hf-search-btn {
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#hf-search-btn:hover {
    background-color: var(--secondary-color);
}

.filter-section {
    display: flex;
    gap: 15px;
    align-items: center;
}

#hf-size-filter {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 10px;
}

/* The download-then-import panel. `grid-column: 1 / -1` because #hf-results is
   a grid of 300px-minimum cards, and without it a single child gets squeezed
   into one column with a command line wrapped across five lines. */
.hf-import {
    grid-column: 1 / -1;
    background-color: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

.hf-import h3 {
    margin: 0 0 4px 0;
    color: var(--primary-color);
    word-wrap: break-word;
}

.hf-import-file {
    margin: 0 0 18px 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    word-break: break-all;
}

.hf-import-step {
    font-weight: 600;
    margin: 18px 0 8px 0;
}

.hf-import-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 10px 0;
}

.hf-import-download {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    word-break: break-all;
}

.hf-import-command {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.hf-import-command code {
    flex: 1;
    display: block;
    padding: 10px;
    border-radius: 6px;
    background-color: var(--code-bg, rgba(0, 0, 0, 0.25));
    font-size: 0.8rem;
    /* The command is long and must stay copyable by eye as well as by button,
       so it wraps rather than scrolling out of sight. */
    white-space: pre-wrap;
    word-break: break-all;
}

.hf-import-copy,
.hf-import-back {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.hf-import-back {
    margin-top: 18px;
}

.model-card {
    background-color: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.model-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.model-card h3 {
    margin: 0 0 10px 0;
    color: var(--primary-color);
    font-size: 1.1rem;
    word-wrap: break-word;
}

.model-card .model-info {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.model-card .model-info p {
    margin: 5px 0;
    word-wrap: break-word;
}

.model-card .model-info strong {
    color: var(--text-color);
}

.model-files {
    margin-top: 10px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-color);
}

.file-item:last-child {
    border-bottom: none;
}

.download-btn {
    background-color: var(--btn-success);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.2s;
}

.download-btn:hover {
    background-color: #27ae60;
}

.loading-spinner {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    padding: 40px;
}

.fa-spinner {
    margin-right: 10px;
}

.no-results, .error {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
    font-size: 1rem;
}

.error {
    color: var(--btn-danger);
}

/* Settings Styles */
.setting {
    margin-bottom: 15px;
}

.setting label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.setting input[type="range"],
.setting input[type="number"] {
    width: 100%;
    padding: 5px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.setting textarea {
    width: 100%;
    height: 80px;
    padding: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    resize: vertical;
}

#save-settings-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#save-settings-btn:hover {
    background-color: var(--secondary-color);
}

/* Chat List Styles */
.chat-list {
    list-style: none;
    margin-bottom: 15px;
    max-height: 300px;
    overflow-y: auto;
}

.chat-item {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--text-color);
    background-color: var(--bg-color);
    border: 1px solid transparent;
    transition: all 0.2s;
    gap: 10px;
    min-height: 40px;
}

.chat-item:hover {
    background-color: var(--chat-item-hover);
    border-color: var(--border-color);
}

.chat-item.active {
    background-color: var(--chat-item-active);
    font-weight: bold;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.chat-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    flex-grow: 1;
    min-width: 0;
}

.chat-actions {
    display: none;
    margin-left: 10px;
}

.chat-item:hover .chat-actions {
    display: flex;
}

.chat-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 5px;
}

.chat-action-btn:hover {
    color: var(--primary-color);
}

/* Chat Container Styles */
.chat-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--chat-bg);
    position: relative;
    transition: margin-left var(--sidebar-transition) ease;
    min-width: 0;
}

.chat-stage {
    flex-grow: 1;
    display: flex;
    min-height: 0;
    position: relative;
}

.chat-messages-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* In-bubble avatars */
.message.user,
.message.assistant {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
}

.message.assistant {
    flex-direction: row;
}

.message.user {
    flex-direction: row-reverse;
}

.message-avatar {
    position: relative;
    flex: 0 0 var(--avatar-ratio, 30%);
    width: var(--avatar-ratio, 30%);
    max-width: 70%;
    min-width: 88px;
    min-height: 140px;
    align-self: stretch;
    background: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.message.assistant .message-avatar {
    border-radius: 10px 0 0 10px;
    border-right: 1px solid var(--border-color);
}

.message.user .message-avatar {
    border-radius: 0 10px 10px 0;
    border-left: 1px solid var(--border-color);
}

.message-avatar.avatar-off {
    display: none;
}

.message-avatar-img {
    /* Fixed share: always rendered at full column width with natural
       aspect ratio, anchored to the top — text length never resizes it.
       The image participates in layout so the bubble grows to fit it.
       Height is capped to the viewport so huge shares never overflow
       the window; object-fit keeps the aspect ratio uncropped. */
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    object-position: top center;
    display: block;
    transition: opacity 0.4s ease;
    z-index: 1;
    /* Never crop — letterbox/pillarbox as needed */
    background: transparent;
}

.message-avatar-img:not([src]),
.message-avatar-img[src=""] {
    display: none;
}

.message-avatar-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.8rem;
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.03);
}

.message-avatar-ph.hidden {
    display: none;
}

.message-avatar-gear {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 3;
}

.message-avatar:hover .message-avatar-gear,
.message-avatar.config-open .message-avatar-gear {
    opacity: 1;
}

.message-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

/* Per-bubble config panel lives inside the avatar field */
.bubble-avatar-config {
    position: absolute;
    z-index: 20;
    top: 8px;
    left: 8px;
    right: 8px;
    max-height: calc(100% - 16px);
    overflow-y: auto;
    background: rgba(18, 18, 22, 0.96);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    font-size: 0.75rem;
    color: var(--text-color);
    cursor: default;
}

.message.user .bubble-avatar-config {
    left: auto;
    right: 8px;
    width: min(240px, 90vw);
}

.message.assistant .bubble-avatar-config {
    width: min(240px, 90vw);
}

.bubble-avatar-config[hidden] {
    display: none !important;
}

.bubble-avatar-config label {
    display: block;
    margin: 6px 0 3px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.bubble-avatar-config input[type="text"],
.bubble-avatar-config select {
    width: 100%;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 0.75rem;
}

.bubble-avatar-config input[type="range"] {
    width: 100%;
    accent-color: var(--primary-color);
}

.bubble-avatar-config .cfg-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.bubble-avatar-config .cfg-row button {
    flex: 1;
    border: none;
    border-radius: 4px;
    padding: 6px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
}

.bubble-avatar-config .cfg-apply {
    background: var(--primary-color);
    color: #fff;
}

.bubble-avatar-config .cfg-default {
    background: var(--border-color);
    color: var(--text-color);
}

.bubble-avatar-config .cfg-close {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color) !important;
}

.bubble-avatar-config .cfg-title {
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 0.8rem;
}

.bubble-avatar-config .cfg-hint {
    color: var(--text-muted);
    font-size: 0.68rem;
    margin-bottom: 4px;
}

.chat-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.42;
    transition: opacity 0.6s ease, background-image 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.chat-bg-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(14, 14, 14, 0.35) 0%,
        rgba(14, 14, 14, 0.55) 50%,
        rgba(14, 14, 14, 0.7) 100%
    );
    pointer-events: none;
}

.appearance-section.sidebar-section {
    padding: 0;
    border-top: none;
}

.appearance-section h2 {
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.path-picker {
    margin-bottom: 8px;
}

.path-label {
    font-size: 0.78rem;
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 7px 8px;
    margin-bottom: 6px;
    word-break: break-all;
    min-height: 2.2em;
}

.path-label.empty {
    color: var(--text-muted);
    font-style: italic;
}

.path-picker-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.path-picker-btns button {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 4px;
    padding: 7px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
}

.path-browse-folder {
    background: var(--primary-color);
}

.path-browse-image {
    background: #5b4b8a;
}

.path-clear {
    background: var(--border-color);
    color: var(--text-color) !important;
    flex: 0 0 auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.path-picker-btns button:hover {
    filter: brightness(1.08);
}

.path-picker-btns button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.appearance-grid {
    margin-top: 4px;
    margin-bottom: 6px;
}

.save-appearance-btn {
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.save-appearance-btn:hover {
    background: var(--secondary-color);
}

.appearance-status {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .message-avatar {
        min-width: 56px;
    }
}

.chat-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.sidebar.collapsed ~ .chat-container .chat-header {
    padding-left: 50px; /* Make room for the mini toggle button */
}

.chat-header h2 {
    font-size: 1.2rem;
    color: var(--text-color);
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#character-card-btn,
#prompts-btn {
    padding: 8px 12px;
    background-color: #5b4b8a;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    white-space: nowrap;
}

#prompts-btn {
    background-color: #2c6e8a;
}

#character-card-btn:hover {
    background-color: #6d5aa3;
}

#prompts-btn:hover {
    background-color: #3585a6;
}

/* Prompts & Instructions modal */
.modal.json-paste-modal {
    width: min(640px, 94vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.json-paste-modal .modal-body {
    overflow-y: auto;
}

.json-paste-modal #json-paste-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 220px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    resize: vertical;
}

.json-paste-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
}

.json-paste-modal .modal-footer .btn-secondary,
.json-paste-modal .modal-footer .btn-primary {
    border: none;
    border-radius: 6px;
    padding: 9px 16px;
    cursor: pointer;
}

.json-paste-modal .modal-footer .btn-secondary {
    background: var(--border-color);
    color: var(--text-color);
}

.json-paste-modal .modal-footer .btn-primary {
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

/* Must beat base .modal { width: 400px } — same pattern as character-card-modal */
.modal.prompts-modal {
    width: min(980px, calc(100vw - 32px));
    max-width: min(980px, calc(100vw - 32px));
    height: min(860px, calc(100vh - 32px));
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.prompts-modal .modal-header {
    padding: 14px 18px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.prompts-layout {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
}

.prompts-profiles-panel {
    width: min(240px, 30%);
    min-width: 200px;
    flex: 0 0 auto;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.18);
    padding: 12px;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.prompts-profiles-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.prompts-profile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 80px;
}

.prompts-profile-list li {
    padding: 9px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-color);
    border: 1px solid transparent;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prompts-profile-list li:hover {
    background: rgba(255, 255, 255, 0.05);
}

.prompts-profile-list li.active {
    background: rgba(74, 144, 226, 0.22);
    border-color: rgba(74, 144, 226, 0.5);
    font-weight: 600;
}

.prompts-profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    flex-shrink: 0;
}

.prompts-profile-actions .btn-secondary {
    width: 100%;
    font-size: 0.72rem;
    padding: 7px 4px;
    background: var(--border-color);
    color: var(--text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.prompts-profile-actions .btn-secondary:hover {
    filter: brightness(1.12);
}

.prompts-preset-block {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.prompts-preset-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pf-preset-btn {
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: 9px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    text-align: left;
}

.pf-preset-btn.btn-primary {
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

.pf-preset-btn.btn-secondary {
    background: var(--border-color);
    color: var(--text-color);
}

.prompts-active-badge {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 8px 2px 2px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prompts-body {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 20px 18px;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
}

.prompts-intro {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin: 0 0 14px;
    line-height: 1.5;
}

.prompts-flags {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.prompts-flags .img-check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--text-color);
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.prompts-flags .img-check-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
}

.prompts-fields .pf-section-title {
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.prompts-fields .pf-section-title:first-child {
    margin-top: 4px;
}

.prompts-fields .pf-field {
    margin-bottom: 16px;
}

.prompts-fields .pf-field label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}

.prompts-fields .pf-help {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.35;
}

.prompts-fields textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-family: ui-monospace, Consolas, monospace;
    line-height: 1.45;
    resize: vertical;
    min-height: 72px;
}

.prompts-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.12);
}

.prompts-footer .btn-primary {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 14px;
    cursor: pointer;
    font-weight: 600;
}

.prompts-footer .btn-secondary {
    background: var(--border-color);
    color: var(--text-color);
    border: none;
    border-radius: 6px;
    padding: 9px 14px;
    cursor: pointer;
}

.prompts-status {
    padding: 0 18px 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.prompts-fields {
    max-width: 100%;
}

.prompts-fields textarea {
    max-width: 100%;
}

@media (max-width: 720px) {
    .modal.prompts-modal {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px);
    }

    .prompts-layout {
        flex-direction: column;
    }

    .prompts-profiles-panel {
        width: 100%;
        min-width: 0;
        max-height: 38%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}

/* Character Card modal (UI only) */
/* Must beat base .modal { width: 400px } */
.modal.character-card-modal {
    width: min(960px, calc(100vw - 32px));
    max-width: min(960px, calc(100vw - 32px));
    height: min(860px, calc(100vh - 32px));
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.character-card-modal .modal-header {
    padding: 14px 18px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.cc-layout {
    display: flex;
    flex-direction: row;
    min-height: 0;
    flex: 1 1 auto;
    border-top: 1px solid var(--border-color);
    overflow: hidden;
}

.cc-profiles-panel {
    width: min(260px, 34%);
    min-width: 180px;
    flex: 0 0 auto;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.15);
    min-height: 0;
}

.cc-profiles-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.cc-icon-btn {
    background: var(--border-color);
    color: var(--text-color);
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cc-icon-btn:hover {
    filter: brightness(1.1);
}

.cc-profile-list {
    list-style: none;
    margin: 0;
    padding: 4px 8px 12px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.cc-profile-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-color);
    border: 1px solid transparent;
    margin-bottom: 4px;
}

.cc-profile-list li:hover {
    background: rgba(255, 255, 255, 0.06);
}

.cc-profile-list li.active {
    background: rgba(88, 132, 255, 0.18);
    border-color: rgba(88, 132, 255, 0.45);
}

.cc-profile-list li .cc-profile-thumb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    overflow: hidden;
}

.cc-profile-list li .cc-profile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-profile-list li .cc-profile-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.cc-profile-list li .cc-profile-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3dd68c;
    flex-shrink: 0;
    display: none;
}

.cc-profile-list li.is-active-chat .cc-profile-dot {
    display: block;
}

.cc-active-badge {
    padding: 8px 12px 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cc-active-badge.on {
    color: #3dd68c;
}

.character-card-footer .cc-danger {
    margin-right: auto;
    color: #ff8e8e;
}

.character-card-body {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px 20px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}

.cc-identity-row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.cc-avatar-block {
    flex: 0 0 auto;
    width: 120px;
}

.cc-avatar-block > label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.cc-avatar-preview-wrap {
    width: 104px;
    height: 104px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-avatar-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-avatar-placeholder {
    color: var(--text-muted);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.cc-avatar-placeholder.hidden {
    display: none;
}

.cc-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.cc-avatar-btn {
    width: 100%;
    font-size: 0.8rem !important;
    padding: 7px 8px !important;
}

.cc-name-field {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0 !important;
}

.character-card-body .cc-field {
    margin-bottom: 14px;
}

.character-card-body .cc-field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.character-card-body .cc-field input,
.character-card-body .cc-field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
}

.character-card-body .cc-field textarea {
    min-height: 88px;
    line-height: 1.45;
}

.character-card-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.character-card-footer .btn-secondary {
    background: var(--border-color);
    color: var(--text-color);
    border: none;
    border-radius: 6px;
    padding: 9px 16px;
    cursor: pointer;
}

.character-card-footer .btn-primary {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 16px;
    cursor: pointer;
    font-weight: 600;
}

.character-card-footer .btn-primary:hover {
    filter: brightness(1.08);
}

.cc-status {
    padding: 0 20px 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

@media (max-width: 820px) {
    .modal.character-card-modal {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px);
    }

    .cc-layout {
        flex-direction: column;
    }

    .cc-profiles-panel {
        width: 100%;
        min-width: 0;
        max-height: 28vh;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .cc-identity-row {
        flex-direction: column;
        align-items: stretch;
    }

    .cc-avatar-block {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }

    .cc-avatar-block > label {
        width: 100%;
        margin-bottom: 0;
    }

    .cc-avatar-actions {
        flex-direction: row;
        margin-top: 0;
    }

    .cc-avatar-btn {
        width: auto;
        min-width: 88px;
    }
}

.mmproj-row {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mmproj-row label {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.mmproj-row select {
    width: 100%;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 7px 8px;
    font-size: 0.82rem;
}

.vision-status {
    margin-top: 6px;
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.vision-status.vision-on {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.vision-status.vision-off {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}

/* Which processor is actually running inference. Deliberately as prominent as
   the vision badge: a CPU fallback is silent everywhere else, which is exactly
   how it went unnoticed. Hover for the reason. */
.accel-status {
    margin-top: 6px;
    margin-left: 6px;
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    cursor: help;
}

.accel-status.accel-gpu {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

/* Amber, not red: CPU inference is slow, not broken. */
.accel-status.accel-cpu {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.accel-status.accel-idle {
    background: rgba(52, 152, 219, 0.12);
    color: #5dade2;
}

.accel-status.accel-unavailable {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.accel-status.accel-unknown {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}

.external-endpoints-section {
    margin-top: 12px;
}

.external-endpoints-section.sidebar-subsection {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

.external-endpoints-title {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

.external-endpoints-section .img-setting {
    margin-bottom: 10px;
}

.external-endpoints-section label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.external-endpoints-section select,
.external-endpoints-section input[type="text"],
.external-endpoints-section input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-family: inherit;
}

.external-endpoints-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.external-endpoints-actions .btn-secondary,
.external-endpoints-actions .btn-primary {
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.82rem;
}

.external-endpoints-actions .btn-secondary {
    background: var(--border-color);
    color: var(--text-color);
}

.external-endpoints-actions .btn-primary {
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

.external-endpoint-status {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.external-endpoint-status.active {
    color: #3dd68c;
}

.external-endpoint-status.error {
    color: #ff8e8e;
}

.external-last-prompt {
    margin-top: 8px;
    max-height: 220px;
    overflow: auto;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-attach-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px 0;
    border-top: 1px solid var(--border-color);
    background: var(--chat-bg);
}

.chat-attach-preview[hidden] {
    display: none !important;
}

.chat-attach-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.chat-attach-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-attach-thumb button {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
}

#attach-image-btn {
    flex-shrink: 0;
    min-width: 52px;
    padding: 0 12px;
    height: 100%;
    min-height: 48px;
    background: #3d4a5c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

#attach-image-btn .attach-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.9;
}

#attach-image-btn:hover {
    background: #4a5a70;
}

#attach-image-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#chat-input-dropzone.drag-over {
    outline: 2px dashed var(--primary-color);
    outline-offset: -2px;
    background: rgba(74, 144, 226, 0.08);
}

.message-user-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.message-user-images img {
    max-width: 180px;
    max-height: 180px;
    border-radius: 6px;
    object-fit: contain;
    cursor: zoom-in;
    border: 1px solid var(--border-color);
}

#new-chat-btn {
    padding: 8px 15px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

#new-chat-btn:hover {
    background-color: var(--secondary-color);
}

.chat-messages {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
    background: transparent;
}

.message {
    max-width: 100%;
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    line-height: 1.5;
    position: relative;
    color: var(--text-color);
    backdrop-filter: blur(2px);
    box-sizing: border-box;
}

.message.user {
    align-self: stretch;
    background-color: var(--message-user-bg);
    border: 1px solid var(--primary-color);
}

.message.assistant {
    align-self: stretch;
    background-color: var(--message-assistant-bg);
    border: 1px solid var(--border-color);
}

.message.system {
    padding: 15px;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    background-color: var(--message-system-bg);
    border: 1px solid var(--border-color);
}

.message-content p {
    margin-bottom: 10px;
}

.message-content p:last-child {
    margin-bottom: 0;
}

.message-content pre {
    background-color: var(--sidebar-bg);
    color: var(--text-color);
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 10px 0;
}

.message-content code {
    font-family: 'Courier New', Courier, monospace;
    color: var(--primary-color);
}

/* Markdown images from Serper / model replies */
.message-content img {
    max-width: min(100%, 420px);
    max-height: 360px;
    height: auto;
    border-radius: 8px;
    margin: 6px 4px 6px 0;
    vertical-align: middle;
    border: 1px solid var(--border-color);
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
}

.message-content img:hover {
    border-color: var(--primary-color);
}

#web-search-btn.active,
#image-search-btn.active {
    background: var(--primary-color);
    color: #fff;
}

/* Chat / Gallery view tabs */
.view-tab-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.85rem;
}

.view-tab-btn:hover {
    border-color: var(--primary-color);
}

.view-tab-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* In-app gallery panel */
.gallery-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--chat-bg);
    overflow: hidden;
}

.gallery-panel[hidden] {
    display: none !important;
}

.gallery-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.25);
}

.gallery-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gallery-source-btn {
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.8rem;
}

.gallery-source-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.gallery-source-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.gallery-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.gallery-path-label,
.gallery-count-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.gallery-folders {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px 0;
}

.gallery-folder-chip {
    background: rgba(74, 144, 226, 0.15);
    border: 1px solid rgba(74, 144, 226, 0.35);
    color: var(--text-color);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.82rem;
}

.gallery-folder-chip:hover {
    background: rgba(74, 144, 226, 0.28);
}

.gallery-grid {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    align-content: start;
}

.gallery-card {
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.gallery-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.gallery-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: #000;
}

.gallery-card-meta {
    padding: 6px 8px 2px;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-card-actions {
    padding: 4px 6px 8px;
}

/* WD14 Tagger modal */
.tagger-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 10px 0;
    background: rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.tagger-dropzone.dragover {
    border-color: var(--primary-color);
    background: rgba(74, 144, 226, 0.12);
}

.tagger-drop-hint {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

.tagger-drop-hint i {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 8px;
    opacity: 0.7;
}

.tagger-preview-wrap {
    width: 100%;
    max-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.tagger-preview-wrap img {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 8px;
}

.tagger-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    max-height: 140px;
    overflow-y: auto;
}

.tagger-chip {
    background: rgba(74, 144, 226, 0.15);
    border: 1px solid rgba(74, 144, 226, 0.35);
    color: var(--text-color);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.75rem;
    cursor: pointer;
}

.tagger-chip:hover {
    background: rgba(231, 76, 60, 0.25);
    border-color: rgba(231, 76, 60, 0.5);
}

.tagger-chip .tagger-conf {
    opacity: 0.55;
    margin-left: 4px;
    font-size: 0.68rem;
}

.tagger-ratings {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.gallery-send-txt2img.gallery-tag-btn {
    background: #8e44ad;
    margin-top: 4px;
}

.prompt-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 6px;
}

.prompt-preset-btn {
    border: 1px solid rgba(74, 144, 226, 0.45);
    background: rgba(74, 144, 226, 0.12);
    color: var(--text-color);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.prompt-preset-btn:hover {
    background: rgba(74, 144, 226, 0.28);
    border-color: var(--primary-color);
}

.prompt-preset-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.prompt-preset-btn.extras-preset-custom {
    border-color: rgba(155, 89, 182, 0.5);
    background: rgba(155, 89, 182, 0.15);
}

.prompt-preset-btn.extras-preset-custom.active {
    background: #8e44ad;
    border-color: #8e44ad;
    color: #fff;
}

.extras-preset-bar {
    margin: 4px 0 6px;
}

.extras-preset-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.extras-preset-actions .extras-preset-name {
    flex: 1 1 120px;
    min-width: 100px;
    background: var(--bg-color, #1a1a1a);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.78rem;
}

.extras-preset-empty {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.gallery-send-txt2img {
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary-color);
    color: #fff;
}

.gallery-send-txt2img:hover {
    filter: brightness(1.1);
}

.image-result-settings .irs-send-txt2img-btn {
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    background: #16a085;
    color: #fff;
}

.image-result-settings .irs-send-txt2img-btn:hover {
    filter: brightness(1.08);
}

/* RunPod pod control */
.pods-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pods-burn {
    margin-left: auto;
    font-size: 0.75rem;
    font-family: ui-monospace, Consolas, monospace;
    color: var(--text-muted);
}

.pods-burn.active {
    color: var(--btn-warning);
    font-weight: 600;
}

.pods-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pod-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
}

.pod-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pod-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}

.pod-card.running .pod-dot {
    background: var(--btn-success);
}

.pod-name {
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-inuse {
    margin-left: auto;
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(74, 144, 226, 0.25);
    color: var(--primary-color);
    flex-shrink: 0;
}

.pod-meta {
    margin-top: 3px;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: ui-monospace, Consolas, monospace;
}

.pod-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.pod-actions button {
    flex: 1;
    font-size: 0.72rem;
    padding: 6px 8px;
}

/* Secondary row: console deep-link (for migration) and terminate. */
.pod-actions-secondary {
    margin-top: 6px;
    align-items: center;
}

.pod-console,
.pod-delete {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.68rem;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: none;
    cursor: pointer;
    text-decoration: none;
}

.pod-console {
    color: var(--primary-color);
}

.pod-console:hover {
    background: rgba(74, 144, 226, 0.12);
    border-color: var(--primary-color);
}

.pod-delete {
    color: var(--text-muted);
}

.pod-delete:hover {
    color: var(--btn-danger);
    border-color: var(--btn-danger);
    background: rgba(231, 76, 60, 0.1);
}

.pod-delete:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Checkpoint management on the pod */
.models-section input[type="text"] {
    width: 100%;
    padding: 7px 8px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.72rem;
}

/* Live endpoint activity shown inside a generating reply */
.endpoint-activity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ea-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    animation: ea-pulse 1.2s ease-in-out infinite;
}

.endpoint-activity[data-phase="processing"] .ea-dot { background: var(--btn-success); }
.endpoint-activity[data-phase="starting"] .ea-dot   { background: var(--btn-warning); }
.endpoint-activity[data-phase="throttled"] .ea-dot,
.endpoint-activity[data-phase="queued"] .ea-dot     { background: var(--btn-warning); }
.endpoint-activity[data-phase="error"] .ea-dot      { background: var(--btn-danger); }
.endpoint-activity[data-phase="error"]              { color: var(--btn-danger); }

@keyframes ea-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .ea-dot { animation: none; }
}

/* Serverless endpoint cards */
.sless-card.alert {
    border-color: rgba(231, 76, 60, 0.55);
}

.sless-card.always-on {
    border-color: rgba(243, 156, 18, 0.5);
}

.sless-card .pod-dot {
    background: var(--btn-success);
}

.sless-card.alert .pod-dot {
    background: var(--btn-danger);
}

.sless-bad {
    color: var(--btn-danger);
}

.sless-warn {
    margin-top: 5px;
    font-size: 0.68rem;
    color: var(--btn-warning);
}

.sless-workers {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
}

.sless-workers label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin: 0;
}

.sless-workers input[type="number"] {
    width: 46px;
    padding: 3px 5px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.72rem;
}

.sless-workers .sless-apply {
    margin-left: auto;
    font-size: 0.68rem;
    padding: 4px 10px;
}

.sless-delete {
    flex: 0 0 auto !important;
    padding: 5px 9px !important;
}

.pod-card.downloading {
    border-color: rgba(74, 144, 226, 0.5);
}

.fmodel-dl-badge {
    background: rgba(243, 156, 18, 0.22);
    color: var(--btn-warning);
}

.fmodel-stop:hover {
    color: var(--btn-warning);
    border-color: var(--btn-warning);
    background: rgba(243, 156, 18, 0.1);
}

.fmodels-jobs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.fmodel-job {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.25);
}

.fmodel-job.done {
    border-color: rgba(46, 204, 113, 0.5);
}

.fmodel-job.failed {
    border-color: rgba(231, 76, 60, 0.5);
}

.fmodel-job-name {
    font-size: 0.7rem;
    font-family: ui-monospace, Consolas, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fmodel-job-state {
    color: var(--text-muted);
}

.fmodel-bar {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    margin-top: 5px;
    overflow: hidden;
}

.fmodel-bar-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.4s ease;
}

.fmodel-job.done .fmodel-bar-fill {
    background: var(--btn-success);
}

.fmodel-job.failed .fmodel-bar-fill {
    background: var(--btn-danger);
}

.fmodel-job-pct {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: 2px;
}

/* Forge URL control — edited after a pod migration changes the pod ID. */
.forge-url-row {
    margin-top: 10px;
}

.forge-url-row input[type="text"] {
    width: 100%;
    padding: 8px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.75rem;
}

.forge-url-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.forge-url-actions button {
    flex: 1;
}

.forge-url-status {
    margin-top: 6px;
    font-size: 0.72rem;
    line-height: 1.35;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    word-break: break-word;
}

.forge-url-status.ok {
    color: var(--btn-success);
    border-color: rgba(46, 204, 113, 0.45);
}

.forge-url-status.warn {
    color: var(--btn-warning);
    border-color: rgba(243, 156, 18, 0.45);
}

.forge-url-status.err {
    color: var(--btn-danger);
    border-color: rgba(231, 76, 60, 0.45);
}

.gallery-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.gallery-footer {
    padding: 10px 14px 14px;
    display: flex;
    justify-content: center;
}

.chat-container.gallery-mode .chat-stage,
.chat-container.gallery-mode #chat-attach-preview,
.chat-container.gallery-mode .chat-input-container {
    display: none !important;
}

.chat-container.gallery-mode .gallery-panel {
    display: flex;
}

/* Message Action Buttons */
.message {
    position: relative;
}

.message-actions {
    position: absolute;
    top: 8px;
    display: flex;
    gap: 6px;
    z-index: 5;
    opacity: 0.35;
    transition: opacity 0.15s ease;
}

.message:hover .message-actions,
.message:focus-within .message-actions,
.message-actions:hover {
    opacity: 1;
}

.message.user .message-actions {
    right: 8px;
}

.message.assistant .message-actions {
    left: 8px;
}

/* legacy single buttons still used for stop/continue during generation */
.message-action-btn {
    background: rgba(20, 24, 32, 0.92);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
    font-size: 0.8rem;
}

.message-action-btn:hover {
    background: rgba(40, 48, 64, 1);
    border-color: var(--primary-color);
    color: #fff;
}

.message-action-btn.edit-message-btn:hover {
    color: #8eb6ff;
}

.message-action-btn.speak-message-btn:hover {
    background: rgba(155, 89, 182, 0.35);
    color: #e0b0ff;
}

.message-action-btn.speak-message-btn.speaking {
    background: rgba(155, 89, 182, 0.55);
    color: #fff;
}

/* Armed = new replies get read aloud while they generate. Always visible, so
   the state is obvious without hovering (and reachable on touch). */
.message-action-btn.speak-message-btn.armed {
    border-color: #b57cd6;
    color: #e0b0ff;
    box-shadow: 0 0 0 1px rgba(181, 124, 214, 0.45);
}

.message.assistant:has(.speak-message-btn.armed) .message-actions,
.message-actions:has(.speak-message-btn.armed) {
    opacity: 1;
}

/* Gentle pulse only while audio is actually playing. */
.message-action-btn.speak-message-btn.armed.speaking {
    animation: speak-pulse 1.4s ease-in-out infinite;
}

@keyframes speak-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(181, 124, 214, 0.45); }
    50%      { box-shadow: 0 0 0 4px rgba(181, 124, 214, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
    .message-action-btn.speak-message-btn.armed.speaking {
        animation: none;
    }
}

.tts-section .tts-status {
    font-size: 0.8rem;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.tts-section .tts-status.ok {
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.35);
}

.tts-section .tts-status.warn {
    color: #f1c40f;
    border-color: rgba(241, 196, 15, 0.35);
}

.tts-section .tts-status.err {
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.35);
}

.tts-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.tts-actions .btn-primary,
.tts-actions .btn-secondary {
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.82rem;
}

.tts-actions .btn-primary {
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

.tts-actions .btn-secondary {
    background: var(--border-color);
    color: var(--text-color);
}

.message-action-btn.rerun-message-btn:hover {
    color: #7dffa3;
}

.message.assistant .stop-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    color: white;
    background-color: var(--btn-danger);
    border-color: transparent;
    opacity: 1;
    z-index: 6;
}

.message.assistant .continue-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    color: white;
    background-color: var(--btn-success);
    border-color: transparent;
    opacity: 1;
    z-index: 6;
}

/* Edit Message Interface */
.edit-message-container {
    width: 100%;
    box-sizing: border-box;
}

.edit-message-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    resize: vertical;
    margin-bottom: 10px;
    font-family: inherit;
    font-size: inherit;
    min-height: 72px;
    line-height: 1.45;
}

.edit-message-buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.edit-btn {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.cancel-edit-btn {
    background-color: var(--border-color);
    color: var(--text-color);
}

.save-edit-btn {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
}

/* Blinking Cursor */
.blinking-cursor {
    display: inline-block;
    animation: blink 1s step-end infinite;
    margin-left: 2px;
    font-weight: bold;
    color: var(--primary-color);
}

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

/* Chat Input Container */
.chat-input-container {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
}

#chat-input {
    flex-grow: 1;
    padding: 12px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    resize: none;
    height: 60px;
    font-size: 1rem;
}

#send-btn {
    width: 60px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1.2rem;
}

#send-btn:hover {
    background-color: var(--secondary-color);
}

#send-btn:disabled {
    background-color: var(--text-muted);
    cursor: not-allowed;
}

/* Hotkey Indicator */
.hotkey-indicator {
    display: inline-block;
    background-color: var(--border-color);
    border: 1px solid var(--bg-color);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 5px;
}

/* Modal Styles */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.modal {
    background-color: var(--sidebar-bg);
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
    color: var(--text-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-color);
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    color: var(--text-muted);
}

.close-modal:hover {
    color: var(--primary-color);
}

.modal-body {
    margin-bottom: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn {
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
}

.btn-secondary {
    background-color: var(--border-color);
    color: var(--text-color);
}

.btn-secondary:hover {
    background-color: var(--chat-item-hover);
}

.btn-danger {
    background-color: var(--btn-danger);
    color: white;
}

.btn-danger:hover {
    background-color: #c0392b;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.form-group input {
    width: 100%;
    padding: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Touch layout (tablets and phones)

   The sidebar becomes an overlay drawer rather than taking a share of the
   layout: at 380px it would eat half of a 768px tablet, and stacking it above
   the chat cost 40% of the height. At these widths "collapsed" means "closed
   drawer", so the existing toggle button and saved state keep working.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .app-container {
        flex-direction: row;
        height: 100dvh;  /* 100vh sits under the Android address bar */
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: min(88vw, 380px);
        min-width: 0;
        max-width: min(88vw, 380px);
        max-height: none;
        z-index: 60;
        resize: none;  /* the drag-to-resize handle is mouse-only */
        transition: transform var(--sidebar-transition) ease;
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.55);
    }

    .sidebar.collapsed {
        width: min(88vw, 380px);
        min-width: 0;
        max-height: none;
        transform: translateX(-100%);
        box-shadow: none;
    }

    /* Off-screen already, so don't also fade it (it would flash on open). */
    .sidebar.collapsed .sidebar-content {
        opacity: 1;
        pointer-events: none;
    }

    /* The in-drawer button only ever closes here: don't flip or move it. */
    .sidebar.collapsed .sidebar-toggle {
        transform: none;
        left: auto;
        right: 15px;
    }

    .chat-container {
        width: 100%;
        min-width: 0;
    }

    /* Keep the chat title clear of the floating drawer handle. */
    .sidebar.collapsed ~ .chat-container .chat-header {
        padding-left: 56px;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(0, 0, 0, 0.55);
        transition: opacity var(--sidebar-transition) ease;
    }

    .sidebar.collapsed ~ .sidebar-backdrop {
        opacity: 0;
        pointer-events: none;
    }

    .message {
        max-width: 100%;
        width: 100%;
    }

    /* The drawer is full height now, so the list needn't be this cramped. */
    .chat-list {
        max-height: 45vh;
    }
}

/* Narrow headers: three labelled buttons plus a title do not fit. */
@media (max-width: 820px) {
    .chat-header {
        padding: 12px 14px;
    }

    .chat-header h2 {
        font-size: 1rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-header-actions button {
        padding: 10px 12px;
        min-height: 40px;
    }

    .chat-input-container {
        padding: 12px;
    }
}

/* Below this the three labels squeeze the chat title down to an ellipsis, so
   drop to icons only. IDs are needed to outrank the per-button rules above;
   each button keeps its title attribute as a tooltip. */
@media (max-width: 600px) {
    #prompts-btn,
    #character-card-btn,
    #new-chat-btn {
        font-size: 0;
        gap: 0;
        padding: 10px 12px;
    }

    #prompts-btn i,
    #character-card-btn i,
    #new-chat-btn i {
        font-size: 0.95rem;
    }
}

/* Touch input, regardless of width: no hover, and fingers need bigger targets. */
@media (hover: none) {
    /* These are hover-revealed on desktop, i.e. unreachable by touch. */
    .message-actions {
        opacity: 1;
    }

    .chat-actions {
        display: flex;
    }

    .sidebar button,
    .sidebar select,
    .chat-header-actions button,
    .path-picker-btns button {
        min-height: 40px;
    }

    /* Android zooms the whole page when focusing a control under 16px. */
    .sidebar input[type="text"],
    .sidebar input[type="number"],
    .sidebar input[type="password"],
    .sidebar select,
    .sidebar textarea,
    .bubble-avatar-config select {
        font-size: 16px;
    }

    .bubble-avatar-config .cfg-row button,
    .bubble-avatar-config .path-picker-btns button {
        min-height: 36px;
        font-size: 0.8rem;
    }
}

/* Keyboard Shortcuts */
.keyboard-shortcuts {
    background-color: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px;
}

.keyboard-shortcuts h2 {
    color: var(--text-color);
    margin-bottom: 10px;
    font-size: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.keyboard-shortcuts ul {
    list-style-type: none;
    padding: 0;
}

.keyboard-shortcuts li {
    margin-bottom: 5px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Enhanced Interactions */
* {
    transition: background-color 0.2s ease, 
                color 0.2s ease, 
                border-color 0.2s ease;
}

/* Subtle Focus Styles */
input:focus, 
textarea:focus, 
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* Tooltip-like Hover Effects */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--sidebar-bg);
    color: var(--text-color);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    border: 1px solid var(--border-color);
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}
/* Forge status (sidebar) */
.forge-section.sidebar-section {
    padding: 0;
    border-top: none;
}

.forge-section h2 {
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: var(--text-color);
}

.forge-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
}

/* Where generated images land. Lives beside the Forge controls because that is
   where someone looks when wondering where their pictures went. */
.image-folder-row {
    margin-top: 10px;
}

.image-folder-status {
    font-size: 0.78rem;
    padding: 5px 8px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    word-break: break-word;
}

.image-folder-status.folder-set {
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
}

/* Amber, not red: downloads still work, they are just not a gallery. */
.image-folder-status.folder-none {
    background: rgba(243, 156, 18, 0.12);
    color: #f39c12;
}

.image-folder-status.folder-unsupported {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}

/* Forge's output, in the app rather than in a console window nobody watches.
   Collapsed by default: it is diagnostic, and an always-open log would push the
   controls people actually use off the screen. */
.console-panel {
    margin: 8px 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.console-panel > summary {
    cursor: pointer;
    padding: 7px 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.console-panel > summary:hover { color: var(--text-color); }

.console-hint {
    margin-left: auto;
    font-size: 0.72rem;
    opacity: 0.75;
}

.console-tabs {
    display: flex;
    gap: 4px;
    padding: 0 8px 6px;
}

.console-tab {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 4px;
    padding: 2px 9px;
    font-size: 0.74rem;
    cursor: pointer;
}

.console-tab:hover { color: var(--text-color); }

.console-tab.is-active {
    background: rgba(52, 152, 219, 0.18);
    border-color: rgba(52, 152, 219, 0.5);
    color: #5dade2;
}

.console-clear { margin-left: auto; }

/* The Import tab's controls. Sits between the tabs and the output, so the
   thing you press and the thing it prints to are one block. */
.console-import-bar {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 8px 6px;
}

.console-import-bar[hidden] { display: none; }

.console-import-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.console-import-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.console-import-folders { flex-wrap: wrap; }

.console-import-folder-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /* min-width:0 so a long path wraps inside the panel rather than widening
       it. Model folders are routinely deep. */
    min-width: 0;
}

.console-import-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1px 4px 1px 8px;
    font-size: 0.68rem;
    color: var(--text-muted);
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* A default cannot be removed, so it must not look like it can. */
.console-import-chip.is-fixed { padding-right: 8px; opacity: 0.75; }

.console-import-chip.is-missing {
    border-color: rgba(231, 76, 60, 0.5);
    color: #e59a92;
}

.console-import-chip-x {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0 3px;
    opacity: 0.7;
}

.console-import-chip-x:hover { opacity: 1; color: #e74c3c; }

.console-import-status {
    font-size: 0.7rem;
    color: #e59a92;
    overflow-wrap: anywhere;
}

.console-import-status[hidden] { display: none; }

.console-import-file {
    flex: 1 1 auto;
    /* The select carries a file name and a size, and Downloads names run long.
       Without a min-width of 0 a flex item refuses to shrink below its content
       and the buttons get pushed out of the panel. */
    min-width: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 0.74rem;
}

.console-import-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.74rem;
    cursor: pointer;
    white-space: nowrap;
}

.console-import-btn:hover:not(:disabled) { color: var(--text-color); }

.console-import-btn.is-primary {
    background: rgba(46, 204, 113, 0.18);
    border-color: rgba(46, 204, 113, 0.5);
    color: #58d68d;
}

/* Disabled is the running state, and it lasts minutes on a large model, so it
   has to read as "busy" rather than "broken". */
.console-import-btn:disabled,
.console-import-file:disabled {
    opacity: 0.5;
    cursor: default;
}

.console-output {
    margin: 0;
    padding: 8px 10px;
    /* A min-height so an empty or just-started console still reads as a
       console rather than a stray line of text. Forge says nothing for its
       first few seconds, and a collapsed box looks broken. */
    min-height: 120px;
    max-height: 260px;
    overflow: auto;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #c8d0d8;
    /* Forge emits long unbroken paths and tracebacks; wrapping beats a
       horizontal scrollbar in a narrow sidebar. */
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0, 0, 0, 0.35);
}

/* Sits inside the status row and only appears while a generation is running,
   so stopping is where the user is already looking to see progress. Pushed
   right so it never shifts the status text as the label changes. */
.forge-stop-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #ff8a80;
    background: rgba(231, 76, 60, 0.14);
    border: 1px solid rgba(231, 76, 60, 0.45);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.forge-stop-btn:hover:not(:disabled) {
    background: rgba(231, 76, 60, 0.26);
    color: #fff;
}

.forge-stop-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.forge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}

.forge-ok .forge-dot { background: var(--btn-success); box-shadow: 0 0 6px var(--btn-success); }
.forge-busy .forge-dot { background: var(--btn-warning); box-shadow: 0 0 6px var(--btn-warning); animation: blink 1s infinite; }
.forge-starting .forge-dot { background: var(--primary-color); box-shadow: 0 0 6px var(--primary-color); animation: blink 1s infinite; }
.forge-down .forge-dot,
.forge-no-api .forge-dot { background: var(--btn-danger); }
.forge-unknown .forge-dot { background: var(--text-muted); }

.forge-actions {
    margin: 10px 0 4px;
}

.forge-start-btn {
    flex: 1;
    background: var(--btn-success);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

.forge-start-btn:hover {
    filter: brightness(1.08);
}

.forge-start-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    filter: none;
}

.img-check-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    user-select: none;
}

.img-check-label input {
    accent-color: var(--primary-color);
}

.image-caption-title {
    font-size: 0.95rem;
    margin-bottom: 8px;
    opacity: 0.9;
}

/* First-run setup checklist (setup-panel.js) */
.setup-badge {
    margin-left: auto;
    font-size: 0.68rem;
    padding: 2px 7px;
    border-radius: 10px;
    color: var(--text-muted);
}
.setup-badge.ready { background: rgba(22, 163, 74, 0.18); color: #4ade80; }
.setup-badge.todo  { background: rgba(217, 119, 6, 0.18); color: #fbbf24; }

.setup-list { display: flex; flex-direction: column; gap: 10px; }

.setup-step {
    border: 1px solid var(--border-color);
    border-left-width: 3px;
    border-radius: 6px;
    padding: 9px 11px;
}
/* Done steps fade back — the point of the panel is what is still outstanding. */
.setup-step.ok   { border-left-color: #16a34a; opacity: 0.72; }
.setup-step.todo { border-left-color: #d97706; }

.setup-step-head { display: flex; align-items: center; gap: 7px; }
.setup-mark { font-size: 0.85rem; }
.setup-step.ok .setup-mark   { color: #4ade80; }
.setup-step.todo .setup-mark { color: #fbbf24; }
.setup-step-title { font-size: 0.8rem; font-weight: 600; }

.setup-step-detail {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.45;
    word-break: break-word;
}

.setup-command {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}
.setup-command code {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    padding: 5px 7px;
    border-radius: 4px;
    font-size: 0.7rem;
    overflow-x: auto;
    white-space: nowrap;
}
.setup-copy {
    flex: 0 0 auto;
    font-size: 0.68rem;
    padding: 4px 9px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.setup-copy:hover { background: rgba(255, 255, 255, 0.08); }

.setup-note {
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-style: italic;
}

.setup-action-link {
    display: inline-block;
    margin-top: 7px;
    font-size: 0.73rem;
    color: var(--primary-color);
    text-decoration: none;
}
.setup-action-link:hover { text-decoration: underline; }

.forge-hint {
    margin-top: 8px;
    margin-bottom: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.forge-hint code {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.72rem;
}

/* Muted note appended to a field label, e.g. the voice picker legend. */
.forge-hint-inline {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
}

.img-setting {
    margin-bottom: 10px;
}

.img-setting label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.img-setting label span {
    color: var(--text-color);
    font-weight: 600;
}

.img-setting textarea,
.img-setting select,
.img-setting input[type="number"] {
    width: 100%;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 7px 8px;
    font-size: 0.82rem;
    font-family: inherit;
    resize: vertical;
}

.img-setting textarea {
    min-height: 52px;
    line-height: 1.35;
}

.img-setting input[type="range"] {
    width: 100%;
    accent-color: var(--primary-color);
}

.img-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.img-row select {
    flex: 1;
    min-width: 0;
}

.img-icon-btn {
    width: 36px;
    flex-shrink: 0;
    background: var(--border-color);
    color: var(--text-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.img-icon-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.img-setting-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin-bottom: 4px;
}

.img-setting-grid .img-setting {
    margin-bottom: 0;
}

/* Chat input image button */
#imagine-btn {
    width: 52px;
    background-color: #5b4b8a;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1.15rem;
}

#web-search-btn {
    width: 52px;
    background-color: #2f4f5f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1.15rem;
}

#web-search-btn:hover {
    background-color: #3c657f;
}

#web-search-btn.active {
    background-color: #1e90b8;
    box-shadow: 0 0 0 2px rgba(30, 144, 184, 0.45);
}

#imagine-btn:hover {
    background-color: #6d5aa3;
}

#imagine-btn:disabled {
    background-color: var(--text-muted);
    cursor: not-allowed;
}

/* Image compose modal */
.image-compose-modal {
    max-width: 560px;
    width: 94vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.image-compose-body {
    overflow-y: auto;
    padding: 16px 18px;
    flex: 1;
}

.image-compose-body .img-setting {
    margin-bottom: 12px;
}

.image-compose-body textarea,
.image-compose-body select,
.image-compose-body input[type="text"] {
    width: 100%;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px;
    font-size: 0.88rem;
    font-family: inherit;
    resize: vertical;
}

.image-compose-body input[type="range"] {
    width: 100%;
    accent-color: var(--primary-color);
}

.compose-mode-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compose-mode-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
}

.compose-mode-option:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(74, 144, 226, 0.12);
}

.compose-mode-option input {
    margin-top: 3px;
    accent-color: var(--primary-color);
}

.compose-mode-option strong {
    display: block;
    font-size: 0.88rem;
}

.compose-mode-option small {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 2px;
    line-height: 1.35;
}

.compose-settings-collapse {
    margin-top: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.compose-settings-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
}

.compose-settings-summary::-webkit-details-marker {
    display: none;
}

.compose-settings-summary::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.compose-settings-collapse[open] > .compose-settings-summary::before {
    transform: rotate(90deg);
}

.compose-settings-hint {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.compose-settings-body {
    padding: 4px 12px 12px;
    border-top: 1px solid var(--border-color);
}

.compose-settings-body .img-setting {
    margin-top: 10px;
}

.image-compose-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
}

.image-compose-footer .btn-primary {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
}

.image-compose-footer .btn-secondary {
    background: var(--border-color);
    color: var(--text-color);
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    cursor: pointer;
}

.image-compose-footer .btn-primary:hover {
    filter: brightness(1.08);
}

/* Forge image bridge: inline generated images in chat */
.image-version-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
}

.image-version-nav .img-ver-prev,
.image-version-nav .img-ver-next {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 36px;
    height: 32px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.image-version-nav .img-ver-prev:hover:not(:disabled),
.image-version-nav .img-ver-next:hover:not(:disabled) {
    filter: brightness(1.1);
}

.image-version-nav .img-ver-prev:disabled,
.image-version-nav .img-ver-next:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: none;
}

.image-version-nav .img-ver-label {
    font-size: 0.85rem;
    color: var(--text-color);
    min-width: 10em;
    text-align: center;
}

.generated-image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.generated-image {
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 4px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    cursor: zoom-in;
    transition: transform 0.15s ease;
}

/* A generated image is the point of the message, so let it use the whole
   bubble width instead of the 420x360 cap meant for inline markdown images.
   That cap is `.message-content img` (0,1,1), which outranks `.generated-image`
   (0,1,0), so the class alone cannot override it — hence the compound selector.
   Height is capped against the viewport so a tall portrait render still leaves
   room for the reply around it; click to open it full size in the lightbox. */
.message-content img.generated-image,
.generated-image {
    max-width: 100%;
    max-height: 80vh;
    cursor: zoom-in;  /* the markdown-image rule was overriding this to pointer */
}

.generated-image:hover {
    transform: scale(1.01);
}

.image-caption {
    margin-top: 6px;
    font-size: 0.75rem;
    opacity: 0.65;
    word-break: break-word;
    font-family: ui-monospace, Consolas, monospace;
}

.message.assistant.image-response-bubble {
    border-color: rgba(123, 104, 238, 0.55);
}

.image-response-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b8a8ff;
    margin-bottom: 8px;
    opacity: 0.9;
}

.image-request-line {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-style: italic;
}

/* Editable generation result panel */
.image-result-settings {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
}

/* The header doubles as the <details> toggle. Chevron matches the sidebar
   sections so collapsible things look the same everywhere. */
.image-result-settings .irs-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: baseline;
    list-style: none;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
    margin: -4px;      /* keep the text where it was despite the tap padding */
    padding: 4px;
}

/* Only take up vertical space when there is a body below it. */
.image-result-settings[open] > .irs-header {
    margin-bottom: 6px;
}

.image-result-settings .irs-header::-webkit-details-marker {
    display: none;
}

.image-result-settings .irs-header::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    color: var(--text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.image-result-settings[open] > .irs-header::before {
    transform: rotate(90deg);
}

.image-result-settings .irs-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.image-result-settings .irs-header:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

.image-result-settings .irs-header strong {
    font-size: 0.9rem;
}

/* Collapsed: shrink to a single compact row. */
.image-result-settings:not([open]) {
    padding: 8px 12px;
}

@media (hover: none) {
    .image-result-settings .irs-header {
        padding: 8px 4px;  /* comfortable tap target on the tablet */
    }
}

.image-result-settings .irs-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: ui-monospace, Consolas, monospace;
}

.image-result-settings label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 8px 0 4px;
}

.image-result-settings textarea,
.image-result-settings select {
    width: 100%;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px;
    font-size: 0.82rem;
    font-family: ui-monospace, Consolas, monospace;
    resize: vertical;
    box-sizing: border-box;
}

.image-result-settings input[type="range"] {
    width: 100%;
    accent-color: var(--primary-color);
}

.image-result-settings .irs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

.image-result-settings .irs-instruction-label .irs-optional {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.image-result-settings textarea.irs-instruction {
    margin-bottom: 4px;
    border-color: rgba(99, 140, 255, 0.45);
}

.image-result-settings .irs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.image-result-settings .irs-regen-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 14px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.88rem;
}

.image-result-settings .irs-regen-btn:hover {
    filter: brightness(1.08);
}

.image-result-settings .irs-regen-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.image-result-settings .irs-apply-sidebar-btn {
    background: var(--border-color);
    color: var(--text-color);
    border: none;
    border-radius: 6px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 0.82rem;
}

.image-result-settings .irs-status {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .image-result-settings .irs-grid {
        grid-template-columns: 1fr;
    }
}

.image-gen-status {
    min-width: 220px;
}

.image-gen-label {
    font-size: 0.9rem;
    margin-bottom: 8px;
    opacity: 0.9;
}

.image-gen-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.image-gen-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), #9b7bff);
    border-radius: 4px;
    transition: width 0.35s ease;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 24px;
}

.image-lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.message-content code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}