/*
 * Global z-index scale (see :root tokens below). Use the token, not the literal.
 * Values 1/2/10/11/15/50 inside the file are LOCAL to a parent stacking context
 * (sticky toolbars, image-tile overlays, drag handles, drop zones) and stay numeric.
 *
 *   --z-sidebar-overlay   99
 *   --z-sidebar          100
 *   --z-sidebar-handle   101
 *   --z-popover          150  (dropdown panels, user menu)
 *   --z-modal            200
 *   --z-sheet            300  (bottom sheet)
 *   --z-view-overlay      80  (full-area replacement views, e.g. model picker)
 *   --z-log-detail      1000
 *   --z-floating-menu   9999  (row menu, drag ghost, hover-info, context menu)
 *   --z-overlay        10000  (image/doc preview, bulk-org popover, drag-chip)
 *   --z-overlay-front  10001  (close buttons on top of overlays) */

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: auto;
    scrollbar-color: var(--text-muted) transparent;
}

:root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-sidebar: #141414;
    --bg-input: #2a2a2a;
    --bg-hover: #333;
    --bg-elevated: #2e2e2e;
    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --text-muted: #909090;
    --accent: #7c9eff;
    --accent-hover: #6a8ff0;
    --accent-subtle: rgba(124, 158, 255, 0.1);
    --accent-glow: rgba(124, 158, 255, 0.15);
    --border: #2e2e2e;
    --border-subtle: rgba(var(--overlay-rgb), 0.06);
    --danger: #f06060;
    --danger-hover: #e05050;
    --danger-subtle: rgba(240, 96, 96, 0.12);
    --success: #4ade80;
    --success-hover: #3cc970;
    --success-subtle: rgba(74, 222, 128, 0.12);
    --warning: #fbbf24;
    --warning-subtle: rgba(251, 191, 36, 0.12);
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --sidebar-width: 268px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --overlay-rgb: 255, 255, 255;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --purple: #a78bfa;
    --purple-light: #c084fc;
    --code-bg: #0d1117;
    --img-backdrop: #000;
    --on-color: #fff;
    --on-accent: #1a1a2e;
    --radius-sm: 4px;
    --radius-pill: 999px;
    --z-sidebar-overlay: 99;
    --z-sidebar: 100;
    --z-sidebar-handle: 101;
    --z-popover: 150;
    --z-modal: 200;
    --z-sheet: 300;
    --z-view-overlay: 80;
    --z-log-detail: 1000;
    --z-floating-menu: 9999;
    --z-overlay: 10000;
    --z-overlay-front: 10001;
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-sidebar: #fafafa;
    --bg-input: #f0f0f0;
    --bg-hover: #e8e8e8;
    /* Must differ from --bg-primary: the user bubble and 13 other "elevated"
       surfaces paint this on the page background. */
    --bg-elevated: #f1f3f6;
    --text-primary: #1a1a1a;
    --text-secondary: #555;
    --text-muted: #6b6b6b;
    --accent: #3b6ce0;
    --accent-hover: #2d5fd0;
    --accent-subtle: rgba(59, 108, 224, 0.1);
    --accent-glow: rgba(59, 108, 224, 0.12);
    --border: #e0e0e0;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --danger: #cc3333;
    --danger-hover: #b52d2d;
    --danger-subtle: rgba(204, 51, 51, 0.1);
    --success: #15803d;
    --success-hover: #117035;
    --success-subtle: rgba(21, 128, 61, 0.1);
    --warning: #a16207;
    --warning-subtle: rgba(161, 98, 7, 0.1);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --overlay-rgb: 0, 0, 0;
    --purple: #7c3aed;
    --purple-light: #9333ea;
    --code-bg: #f6f8fa;
    --on-accent: #fff;
    --img-backdrop: #e5e5e5;
}

html,
body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    color: inherit;
    transition: all var(--transition-fast);
}

button:focus-visible,
[role="button"]:focus-visible,
[role="option"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius);
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    outline: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

/* Scrollbar (cross-browser) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--overlay-rgb), 0.1);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--overlay-rgb), 0.18);
}

/* Login Page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-primary);
    background-image: radial-gradient(ellipse at 50% 0%, var(--accent-subtle) 0%, transparent 60%);
}

.login-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 44px 40px;
    width: 100%;
    max-width: 400px;
    margin: 20px;
    box-shadow: var(--shadow-lg);
}

/* Brand */
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

.brand-anox {
    font-size: 1.6em;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 50%, var(--purple-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-pro {
    font-size: 0.85em;
    font-weight: 300;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    opacity: 0.85;
}

.login-card h1.brand {
    justify-content: center;
}

.login-card h1 {
    text-align: center;
    margin-bottom: 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.login-card .subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 32px;
    font-size: 13px;
}

.login-tabs {
    display: flex;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.login-tabs button {
    flex: 1;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-base), border-color var(--transition-base);
    letter-spacing: 0.2px;
}

.login-tabs button:hover {
    color: var(--text-secondary);
}

.login-tabs button.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-form.hidden {
    display: none;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 14px;
    cursor: pointer;
}

.login-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--accent);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn {
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 13px;
    transition: all var(--transition-fast);
    letter-spacing: 0.2px;
}

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

.btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 2px 8px var(--accent-glow);
}

.btn-primary:active {
    transform: scale(0.97);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

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

.btn-danger:hover {
    background: var(--danger-hover);
    box-shadow: 0 2px 8px var(--danger-subtle);
}

.btn-danger:active {
    transform: scale(0.97);
}

.btn-ghost {
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: var(--radius);
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.btn-ghost:active {
    transform: scale(0.97);
}

.alert {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    display: none;
}

.alert.error {
    display: block;
    background: var(--danger-subtle);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
}

.alert.success {
    display: block;
    background: var(--success-subtle);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 20%, transparent);
}

.text-danger {
    color: var(--danger);
}

/* App Layout */
.app {
    display: flex;
    height: 100vh;
    height: 100dvh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    min-width: 200px;
    max-width: 480px;
    background: var(--bg-sidebar);
    border-right: none;
    display: flex;
    flex-direction: column;
    height: 100vh;
    transition: transform var(--transition-slow);
    z-index: var(--z-sidebar);
    position: relative;
    overflow: hidden;
}

.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    z-index: var(--z-sidebar-handle);
    transition: background var(--transition-base);
    touch-action: none;
}

.sidebar-resize-handle:hover {
    background: rgba(var(--overlay-rgb), 0.08);
}

.sidebar-resize-handle.active {
    background: var(--accent);
}

/* Sidebar Collapse Toggle */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: auto;
}

.sidebar-collapse-btn:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.07);
}

.sidebar-collapse-btn svg {
    transition: transform var(--transition-base);
}

/* Sidebar Collapsed State (Desktop) */
.sidebar.collapsed {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    transition: width var(--transition-slow), min-width var(--transition-slow), max-width var(--transition-slow);
}

.sidebar.collapsed .sidebar-resize-handle {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0 8px;
}

.sidebar.collapsed .sidebar-header .brand {
    display: none;
}

.sidebar.collapsed #impersonation-banner {
    padding: 0 4px 8px;
}

.sidebar.collapsed #impersonation-banner button {
    font-size: 0;
    padding: 5px;
}

.sidebar.collapsed #impersonation-banner button::before {
    content: '\2190';
    font-size: 14px;
}

.sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

.sidebar.collapsed .sidebar-actions {
    padding: 8px 4px 0;
    justify-content: center;
}

.sidebar.collapsed .sidebar-action-btn {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    flex: 0 0 auto;
}

.sidebar.collapsed .sidebar-action-btn span {
    display: none;
}

.sidebar.collapsed .sidebar-search-wrap {
    display: none;
}

/* Hide the entire rich scroll body (pinned / folders / folder-resize / chat list)
   when collapsed. This is what removes the leaked "Angepinnt" label, the folder
   resize bar and the residual scrollbars; the icon rail stands in for it. */
.sidebar.collapsed .sidebar-body {
    display: none;
}

.sidebar.collapsed .sidebar-footer {
    padding: 6px 4px;
    margin-top: auto;
}

.sidebar.collapsed .user-info-btn {
    justify-content: center;
    padding: 8px;
}

.sidebar.collapsed .user-info-btn #user-name {
    left: 56px;
    bottom: 0;
    right: auto;
    min-width: 200px;
}

/* Collapsed icon rail (clean stand-in for the rich sidebar body) */
.sidebar-rail {
    display: none;
}

.sidebar.collapsed:not(.admin-mode) .sidebar-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 4px 0;
}

.sidebar-rail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-rail-btn:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.07);
}

.sidebar-rail-btn:active {
    transform: scale(0.95);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 52px;
    flex-shrink: 0;
}

.sidebar-header h2 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1;
}

.sidebar-header .brand {
    gap: 0;
}

.sidebar-header .brand-anox {
    font-size: 1.4em;
}

.sidebar-header .brand-pro {
    font-size: 0.8em;
}

.sidebar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px 0;
}

.sidebar-action-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.sidebar-action-btn svg {
    flex-shrink: 0;
}

.sidebar-action-btn:hover {
    background: rgba(var(--overlay-rgb), 0.07);
    color: var(--text-primary);
}

.sidebar-action-btn:active {
    transform: scale(0.97);
}

.sidebar-action-btn:first-child {
    flex: 1;
}

/* Sidebar Search */
.sidebar-search-wrap {
    padding: 8px 10px 4px;
}

.sidebar-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    min-height: 32px;
    background: rgba(var(--overlay-rgb), 0.05);
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.sidebar-search-box:focus-within {
    border-color: var(--accent);
    background: rgba(var(--overlay-rgb), 0.07);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.sidebar-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.sidebar-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
}

.sidebar-search-input::-webkit-search-cancel-button,
.sidebar-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
}

#sidebar-search-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.sidebar-search-input::placeholder {
    color: var(--text-muted);
}

.sidebar-search-clear {
    color: var(--text-muted);
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-search-clear:hover {
    color: var(--text-primary);
}

.sidebar-search-results {
    margin-top: 4px;
    max-height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.search-result-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

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

.search-result-item:hover {
    background: rgba(var(--overlay-rgb), 0.04);
}

.search-result-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-snippet {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-snippet mark {
    background: var(--accent-glow);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 0 1px;
}

.search-no-results {
    padding: 32px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.sidebar-scroll {
    /* Basis 0 so shrinking is paid by the panes above, and a floor so a
       maximised folder pane still leaves a usable strip of chat history. */
    flex: 1 1 0;
    min-height: 56px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 12px;
}

.chat-list-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Shared empty-state presentation (chat list, search results, …) */
.empty-icon {
    color: var(--text-muted);
    opacity: 0.55;
    margin-bottom: 2px;
}

.empty-title {
    color: var(--text-secondary);
    font-weight: 600;
}

.empty-hint {
    color: var(--text-muted);
    font-size: 12px;
}

/* Chat-list loading skeleton; shown until the first /api/chats response. */
.chat-list-skeleton {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 10px;
}

.chat-list-skeleton .skeleton-row {
    height: 30px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-hover) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.chat-list-skeleton .skeleton-row:nth-child(2) {
    width: 85%;
}

.chat-list-skeleton .skeleton-row:nth-child(3) {
    width: 70%;
}

.chat-list-skeleton .skeleton-row:nth-child(4) {
    width: 90%;
}

@keyframes skeleton-shimmer {
    from {
        background-position: 200% 0;
    }

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

@media (prefers-reduced-motion: reduce) {
    .chat-list-skeleton .skeleton-row {
        animation: none;
        background: var(--bg-secondary);
    }
}

/* Onboarding tour (Rundgang) */
/* The overlay itself never captures the pointer; only the card does. The
   spotlight dims everything around the target via a huge box-shadow, so the
   highlighted control stays fully usable (steps advance on real actions). */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-front);
    pointer-events: none;
}

.tour-spotlight {
    position: fixed;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    transition: all 0.25s ease;
}

.tour-card {
    position: fixed;
    pointer-events: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    transition: top 0.25s ease, left 0.25s ease;
}

.tour-step-count {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    margin-bottom: 6px;
}

.tour-title {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--text-primary);
}

.tour-text {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tour-dots {
    display: flex;
    gap: 5px;
}

.tour-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
}

.tour-dot.active {
    background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {

    .tour-spotlight,
    .tour-card {
        transition: none;
    }
}

/* Keyboard skip-to-content link; visually hidden until focused. */
.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 9999;
    padding: 10px 16px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--on-accent);
    outline-offset: 2px;
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    transition: all var(--transition-fast);
    border-radius: var(--radius);
    margin: 1px 8px;
}

.chat-item:hover {
    background: rgba(var(--overlay-rgb), 0.05);
    color: var(--text-primary);
}

.chat-item.active {
    background: var(--accent-subtle);
    color: var(--text-primary);
}

.chat-item-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Owner-side marker on chats with live shares; always visible, unlike the
   hover-revealed row actions. */
.chat-item-shared {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.chat-item-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    visibility: hidden;
}

.chat-item:hover .chat-item-actions {
    visibility: visible;
}

.chat-item-actions button {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    min-width: 28px;
    min-height: 28px;
    justify-content: center;
}

.chat-item-actions button:hover {
    color: var(--danger);
    background: var(--danger-subtle);
}

/* Mobile kebab trigger; the menu itself is .row-menu, portaled to <body> */
.chat-item-menu-btn {
    display: none;
}

@media (max-width: 768px) {
    .chat-item {
        position: relative;
        padding-right: 40px;
    }

    .chat-item-actions {
        display: none !important;
    }

    .chat-item-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        font-size: 18px;
        color: var(--text-muted);
        border-radius: var(--radius);
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .chat-item-menu-btn:hover,
    .chat-item-menu-btn[aria-expanded="true"] {
        color: var(--text-primary);
        background: rgba(var(--overlay-rgb), 0.08);
    }
}

/* Portaled row menu; shared between chat-item ⋮ and folder-item ⋮. Lives
   on <body> so it escapes the sidebar's scroll containers and can never
   be clipped. Positioned via JS (_positionRowMenu). */
.row-menu {
    position: fixed;
    z-index: var(--z-floating-menu);
    display: none;
    flex-direction: column;
    min-width: 160px;
    padding: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    -webkit-tap-highlight-color: transparent;
}

.row-menu.open {
    display: flex;
    animation: menuIn 0.12s ease-out;
}

.row-menu button {
    padding: 9px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: left;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.row-menu button:hover,
.row-menu button:active,
.row-menu button:focus-visible {
    background: rgba(var(--overlay-rgb), 0.08);
    color: var(--text-primary);
    outline: none;
}

.row-menu button.danger {
    color: var(--danger);
}

.row-menu button.danger:hover,
.row-menu button.danger:active,
.row-menu button.danger:focus-visible {
    background: var(--danger-subtle);
}

.chat-item.streaming .chat-item-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 6px;
    flex-shrink: 0;
    animation: pulse 1.2s ease-in-out infinite;
}

.sidebar-footer {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}

.user-info-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius);
    transition: background var(--transition-fast);
}

.user-info-btn:hover {
    background: rgba(var(--overlay-rgb), 0.05);
    color: var(--text-primary);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

@keyframes menuIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* Main Area */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.main.chat-drop-active::before {
    content: 'Datei hier ablegen';
    position: absolute;
    inset: 8px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    border: 2px dashed var(--accent);
    border-radius: 12px;
    color: var(--accent);
    font-size: 20px;
    font-weight: 600;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

.main-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 6px 20px;
    min-height: 52px;
    background: var(--bg-primary);
    flex-shrink: 0;
}

.hamburger {
    display: none;
    padding: 8px;
    font-size: 18px;
    color: var(--text-secondary);
}

.hamburger:hover {
    color: var(--text-primary);
}

/* Model Dropdown (custom) */
.provider-warning {
    flex-basis: 100%;
    order: 1;
    font-size: 11px;
    color: var(--warning);
    padding: 0 0 4px;
    line-height: 1.3;
}

/* Model Chip Selector */
.model-selector {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 70%;
}

.model-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.model-recovery:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex-basis: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    font-size: 13px;
}

.model-recovery label,
.model-recovery span {
    flex-basis: 100%;
}

.model-recovery span {
    color: var(--text-secondary);
}

.model-recovery select {
    max-width: 100%;
    min-width: 0;
}

.model-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    height: 30px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.model-chip.clickable {
    cursor: pointer;
}

.model-chip.clickable:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* Active panel indicator; only set by JS on mobile where the swipe pager
   makes "currently viewed model" meaningful. Rendered as a small underline
   below the chip so it doesn't clash with the hover/tap feedback (which uses
   border + background colors). */
.model-chip {
    position: relative;
}

.model-chip.active-panel::after {
    content: '';
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: -6px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
}

.model-chip-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The provider currently doesn't advertise the chip's model; the chip says so. */
.model-chip.unavailable {
    border-style: dashed;
    border-color: var(--warning);
    color: var(--text-muted);
}

.model-chip-remove {
    color: var(--text-muted);
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: background var(--transition-fast), color var(--transition-fast);
    margin-left: 2px;
    opacity: .5;
}

.model-chip-remove svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.model-chip-remove:hover {
    background: var(--danger-subtle);
    color: var(--danger);
    opacity: 1;
}

.model-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    transition: width var(--transition-base), border-radius var(--transition-base), padding var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.model-add-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.model-add-btn.expanding {
    width: 170px;
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.model-add-btn .add-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast);
}

.model-add-btn .add-placeholder {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);  /* --text-muted is 4.26:1 on --bg-elevated (dark) */
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    display: none;
    transition: max-width var(--transition-base), opacity var(--transition-fast) .05s, margin var(--transition-base);
    margin-left: 0;
}

.model-add-btn.expanding .add-icon {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.model-add-btn.expanding .add-placeholder {
    display: inline;
    max-width: 160px;
    opacity: 1;
    margin-left: 0;
}

/* Side-by-Side Messages */
.message-row {
    display: flex;
    gap: 0;
    width: 100%;
}

.message-row .message-column {
    flex: 1;
    min-width: 0;
    border-right: 1px solid var(--border);
    padding: 8px 16px;
}

.message-row .message-column:last-child {
    border-right: none;
}

.message-column-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    padding-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.message-row.scrollable {
    overflow-x: auto;
    flex-wrap: nowrap;
}

.message-row.scrollable .message-column {
    min-width: 400px;
    flex-shrink: 0;
}

.messages-container.multi-model {
    max-width: 100%;
    padding: 16px 12px 24px;
}

/* Swipe-Pager-Dots: nur im Mobile-Block überschrieben, auf Desktop ausgeblendet */
.message-row-dots {
    display: none;
}


.message-column .streaming-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 1.2s ease-in-out infinite;
}

.main-header-spacer {
    flex: 1;
}

/* Chat Area */
.chat-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    overscroll-behavior-x: none;
    display: flex;
    flex-direction: column;
}

.welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    padding: 40px;
}

.welcome h2 {
    font-size: 28px;
    color: var(--text-primary);
    font-weight: 300;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--text-primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome p {
    font-size: 14px;
    color: var(--text-muted);
}

/* Starter Questions */
.starter-questions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 480px;
}

.starter-item {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1.4;
}

.starter-item:hover {
    color: var(--accent);
    background: var(--accent-subtle);
    border-color: var(--accent);
}

.starter-item:active {
    transform: scale(0.97);
}

/* Welcome capability tiles */
.starter-capabilities {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;      /* every tile the same height, single-line content */
    gap: 10px;
    width: 100%;
    max-width: 480px;
}

.starter-cap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-align: left;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.starter-cap:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
}

.starter-cap:active {
    transform: scale(0.98);
}

.starter-cap-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.starter-cap-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.starter-cap-label,
.starter-cap-hint {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.starter-cap-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.starter-cap-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

.starter-or {
    margin-top: 22px;
    font-size: 12px;
    color: var(--text-muted);
}

.starter-or + .starter-questions {
    margin-top: 8px;
}

/* Phones: tighten the welcome screen so hero + capability tiles + starter
   questions fit above the composer (on 360x780 the last card was clipped
   mid-card behind the input area with no scroll affordance). */
@media (max-width: 640px) {
    .welcome {
        padding: 16px 20px 28px;
    }

    .welcome h2 {
        font-size: 24px;
    }

    .starter-capabilities {
        grid-template-columns: 1fr;
        margin-top: 14px;
        gap: 8px;
    }

    .starter-cap {
        padding: 10px 12px;
    }

    .starter-or {
        margin-top: 14px;
    }

    .starter-questions {
        margin-top: 14px;
    }
}

/* Messages */
.messages-container {
    max-width: 740px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 16px 24px 24px;
    gap: 6px;
}

.message {
    padding: 0;
}

.message.user {
    align-self: flex-end;
    max-width: 85%;
}

.message.user .message-content {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
    padding: 10px 16px;
    /* User input is plain escaped text (no markdown); keep the typed line
       breaks and blank-line paragraphs instead of collapsing them. */
    white-space: pre-wrap;
}

.message.assistant {
    padding: 8px 0;
}

.search-highlight {
    background: var(--accent-glow);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 1px 2px;
    animation: searchFade 3s ease-out;
}

@keyframes searchFade {

    0%,
    60% {
        background: var(--accent-glow);
    }

    100% {
        background: var(--accent-subtle);
    }
}

.message-sender {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}

.message.user .message-sender {
    text-align: right;
}

.message-content {
    line-height: 1.7;
    word-break: break-word;
    min-width: 0;
}

/* During streaming, markdown is rendered without `.code-block-wrapper`, so the
   raw <pre> would otherwise force its column wider than its flex share; visible
   as the left model's answer bleeding into the right pane in dual-model chats.
   Soft-wrap (visual only; pre-wrap doesn't insert characters into the DOM, so
   the copy button's textContent and manual Strg+C selection both return the
   source as-typed). */
.message-content pre {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: hidden;
}

.message-content-empty {
    color: var(--text-secondary);
}

.message-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1px;
    margin-top: 4px;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.message.user .message-actions {
    justify-content: flex-end;
}

.message:hover .message-actions {
    opacity: 1;
}

.message-actions:has(.speed-badge) {
    opacity: 1;
}

.msg-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.msg-icon-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.msg-icon-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.msg-icon-btn.success {
    color: var(--success);
}

/* PDF / DOCX downloads. Two identical download glyphs would be indistinguishable,
   so these carry a text label instead; at 10px in the muted colour they sit
   quieter in the row than another icon would. */
.msg-doc-btn {
    width: auto;
    min-width: 28px;
    padding: 0 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

.msg-doc-btn:disabled {
    color: var(--text-muted);
    background: none;
    cursor: default;
    opacity: 0.6;
}

.speed-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 8px 2px 4px;
    font-size: 11px;
    color: var(--text-muted);
    border-radius: var(--radius);
    cursor: default;
}

.speed-badge svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.6;
}

.speed-badge span {
    font-weight: 500;
}

.speed-badge-wrap {
    display: contents;
}

.speed-detail {
    display: none;
    flex-basis: 100%;
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 0;
    line-height: 1.5;
}

.speed-detail.open {
    display: block;
}

/* Markdown Content */
.message-content p {
    margin: 0 0 8px;
}

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

.message-content ul,
.message-content ol {
    margin: 4px 0 8px 20px;
}

.message-content li {
    margin-bottom: 2px;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    margin: 16px 0 8px;
    color: var(--text-primary);
}

.message-content h1 {
    font-size: 1.4em;
}

.message-content h2 {
    font-size: 1.2em;
}

.message-content h3 {
    font-size: 1.1em;
}

.message-content blockquote {
    border-left: 3px solid var(--accent);
    padding: 4px 14px;
    margin: 8px 0;
    color: var(--text-secondary);
    background: var(--accent-subtle);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.message-content table {
    border-collapse: collapse;
    margin: 8px 0;
    width: 100%;
    font-size: 13px;
}

.message-content th,
.message-content td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
}

.message-content th {
    background: var(--bg-input);
    font-weight: 600;
}

.message-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 12px 0;
}

.message-content a {
    color: var(--accent);
}

.message-content img {
    max-width: 100%;
    border-radius: var(--radius);
}

/* Code: inline */
.message-content code {
    background: rgba(var(--overlay-rgb), 0.08);
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.87em;
}

/* Code: blocks */
.code-block-wrapper {
    position: relative;
    margin: 10px 0;
    border-radius: var(--radius);
    /* `clip` (not `hidden`) so the rounded corners are still clipped, but the
       wrapper is NOT a scroll container; that lets the sticky header below pin
       to the chat scrollport instead of being trapped inside this box. */
    overflow: clip;
    background: var(--code-bg);
    border: 1px solid rgba(var(--overlay-rgb), 0.06);
}

/* The header sticks to the top of the chat scroll area while a long block is in
   view, so the collapse toggle (and language label) stay reachable without
   scrolling back to the block's top. Background must be opaque; it floats over
   the code; so the subtle overlay tint is layered on top of the solid code bg. */
.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--code-bg);
    background-image: linear-gradient(rgba(var(--overlay-rgb), 0.03), rgba(var(--overlay-rgb), 0.03));
    font-size: 11px;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(var(--overlay-rgb), 0.04);
}

.code-copy-btn {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.code-copy-btn:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.08);
}

.code-block-wrapper pre {
    margin: 0;
    padding: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: hidden;
}

.code-block-wrapper pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 13px;
    line-height: 1.5;
    white-space: inherit;
    overflow-wrap: inherit;
}

/* Code: collapse toggle (header) + collapsed placeholder */
.code-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.code-collapse-btn:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.08);
}

.code-collapse-chevron {
    display: inline-flex;
    transition: transform var(--transition-fast);
}

.code-block-wrapper.collapsed .code-collapse-chevron {
    transform: rotate(-90deg);
}

.code-block-wrapper.collapsed pre {
    display: none;
}

.code-block-collapsed-info {
    display: none;
    padding: 10px 14px;
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted);
}

.code-block-wrapper.collapsed .code-block-collapsed-info {
    display: block;
}

/* Think Block */
.think-block {
    margin-bottom: 10px;
    border: none;
    border-left: 2px solid var(--accent);
    border-radius: 0;
    background: none;
    padding-left: 12px;
}

.think-block summary {
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    list-style: none;
}

.think-block summary::-webkit-details-marker {
    display: none;
}

.think-block summary::marker {
    display: none;
    content: '';
}

.think-block summary:hover {
    color: var(--text-secondary);
}

.think-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--transition-base);
    color: var(--text-muted);
}

.think-block[open] .think-chevron {
    transform: rotate(90deg);
}

.think-label {
    font-weight: 600;
}

.think-timer {
    font-weight: 400;
    opacity: 0.7;
}

.think-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    margin-left: 2px;
    vertical-align: middle;
    animation: think-pulse-anim 1.4s ease-in-out infinite;
}

@keyframes think-pulse-anim {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.7);
    }
}

.think-block .think-content {
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.5;
    opacity: 0.85;
}

/* Follow-ups */
.followups {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.followups-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.followup-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 12px;
    margin: 2px 0;
    font-size: 13px;
    color: var(--text-secondary);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--radius);
}

.followup-item:hover {
    color: var(--accent);
    background: var(--accent-subtle);
}

.followup-item:active {
    transform: scale(0.97);
}

/* RAG / web search sources (cited under each assistant message) */
.rag-sources,
.web-sources {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.rag-sources+.web-sources {
    margin-top: 8px;
    padding-top: 8px;
    border-top: none;
}

.rag-sources-label,
.web-sources-label {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Requested web search failed / found nothing; the answer is NOT researched. */
.web-sources-notice {
    font-size: 12.5px;
    color: var(--text-muted);
}

.response-notice {
    margin-top: 12px;
    padding: 10px 12px;
    border-left: 3px solid var(--text-muted);
    background: var(--bg-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.rag-sources-list,
.web-sources-list {
    list-style: decimal inside;
    padding-left: 0;
    margin: 0;
}

.rag-sources-list li,
.web-sources-list li {
    font-size: 13px;
    line-height: 1.55;
    margin: 2px 0;
    color: var(--text-secondary);
}

.web-sources-list a,
.rag-source-link {
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius);
    padding: 1px 4px;
    transition: all var(--transition-fast);
}

.web-sources-list a:hover,
.rag-source-link:hover,
.rag-source-link:focus-visible {
    color: var(--accent);
    background: var(--accent-subtle);
    text-decoration: underline;
}

.rag-source-link {
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

/* Streaming indicator */
.streaming-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 1.2s ease-in-out infinite;
    margin-left: 4px;
    vertical-align: middle;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.85);
    }
}

.describe-hint {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-left: 6px;
    font-style: italic;
}

/* Input Area */
.input-area {
    padding: var(--space-md) var(--space-xl) 18px;
    background: var(--bg-primary);
    flex-shrink: 0;
    position: relative;
}

/* Floating "jump to latest" affordance; shown only when the user has scrolled
   up away from the bottom of an active conversation. */
.scroll-bottom-btn {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 5;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.scroll-bottom-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.scroll-bottom-btn[hidden] {
    display: none;
}

/* Honest expectation-setting line under the welcome heading. The extra class
   selector outranks `.welcome p` so the 14px subtitle size doesn't win. */
.welcome .welcome-disclaimer {
    margin: 0;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
}

/* the retry action button shown on a failed response. */
.stream-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
}

.input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 740px;
    margin: 0 auto;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 5px 5px 5px 16px;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.input-row:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.input-row textarea {
    flex: 1;
    resize: none;
    min-height: 28px;
    max-height: 50vh;
    padding: 6px 0;
    font-size: 16px;
    line-height: 1.5;
    border: none;
    background: transparent;
    outline: none;
}

.input-row textarea:focus {
    box-shadow: none;
}

.send-btn {
    padding: 0;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius);
    font-size: 16px;
    height: 36px;
    width: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.send-btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 2px 6px var(--accent-glow);
}

.send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.send-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.send-btn.stop-mode {
    background: var(--danger);
}

.send-btn.stop-mode:hover {
    background: var(--danger-hover);
    box-shadow: 0 2px 6px var(--danger-subtle);
}

/* Input Toolbar */
/* flex-wrap: with every feature toggle enabled up to 11 fixed-width buttons
   share this row; narrower phones (S25/S25 Ultra: 336-360px of usable width)
   can only fit ~8, so the rest must wrap into a second row instead of being
   pushed off-screen (mic/TTS/share were unreachable on phones). */
.input-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 2px;
    max-width: 740px;
    margin: 8px auto 0;
    padding: 0 4px;
}

.input-toolbar-left,
.input-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

/* keeps the right-hand group right-aligned when it wraps onto its own row */
.input-toolbar-right {
    margin-left: auto;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: all var(--transition-fast);
    padding: 0;
    position: relative;
}

.toolbar-btn:hover:not(:disabled) {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.toolbar-btn.active {
    color: var(--accent);
    background: var(--accent-subtle);
}

.toolbar-btn.active:hover {
    background: var(--accent-glow);
}

/* The share button tints once the open chat has live shares, so the owner
   sees the shared state without opening the dialog. */
.toolbar-btn.is-shared {
    color: var(--accent);
}

.toolbar-btn.loading {
    pointer-events: none;
    opacity: 0.5;
    animation: toolbar-pulse 1s ease-in-out infinite;
}

.toolbar-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-pill);
    padding: 2px 5px;
    min-width: 16px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--bg-primary);
}

@keyframes toolbar-pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Knowledge Popover (attach knowledge from shared models) */
.knowledge-popover {
    position: fixed;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    padding: 12px 14px;
    z-index: var(--z-modal);
    min-width: 280px;
    max-width: 380px;
    max-height: min(60vh, 480px);
    overflow-y: auto;
    display: none;
}

.knowledge-popover.open {
    display: block;
    animation: knowledge-pop-in 140ms ease-out;
}

@keyframes knowledge-pop-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* Mobile bottom-sheet variant; wider, anchored above the input area */
.knowledge-popover.is-bottom-sheet {
    min-width: 0;
    max-width: none;
    width: auto;
}

.knowledge-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.knowledge-popover-header strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.knowledge-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* #URL composer command menu (OpenWebUI-style); anchored above the input area */
.url-command-menu {
    position: fixed;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    padding: 6px;
    z-index: var(--z-modal);
    min-width: 280px;
    max-width: min(420px, calc(100vw - 16px));
    display: none;
}

.url-command-menu.open {
    display: block;
    animation: knowledge-pop-in 140ms ease-out;
}

.url-command-url {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 8px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.url-command-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    text-align: left;
    font: inherit;
    background: none;
    border: none;
    border-radius: 8px;
    padding: 7px 8px;
    cursor: pointer;
    color: var(--text-primary);
}

.url-command-item.selected {
    background: var(--bg-hover);
}

.url-command-item-label {
    font-size: 13px;
    font-weight: 600;
}

.url-command-item-hint {
    font-size: 11.5px;
    color: var(--text-muted);
}

.knowledge-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
    max-width: 100%;
}

.knowledge-chip:hover {
    background: var(--bg-hover);
}

.knowledge-chip.active {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

.knowledge-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.knowledge-chip-owner {
    font-size: 11px;
    opacity: 0.65;
}

.knowledge-popover-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 6px 0;
}

.knowledge-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 10px 0 6px;
}

.knowledge-section-label:first-of-type {
    margin-top: 2px;
}

/* Reference-chats popover (reuses the .knowledge-* shell + chips) */
.reference-search {
    margin: 0 0 4px;
}

.reference-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-base, transparent);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}

.reference-search input:focus {
    border-color: var(--accent);
}

/* Wrapped in .reference-section (needed for search hiding), each label is its
   parent's first div and would catch the 2px :first-of-type rule meant for
   the popover top; restore the normal section spacing. */
.reference-section .knowledge-section-label {
    margin-top: 10px;
}

/* Chats are listed one per row (full-width chips) rather than pill-wrapped; titles are long and read better stacked. */
.reference-popover .knowledge-chips {
    flex-direction: column;
    gap: 4px;
}

.reference-popover .knowledge-chip {
    width: 100%;
    justify-content: flex-start;
}

.reference-popover .knowledge-chip-name {
    max-width: 100%;
}

/* Referenced-chats trace on a sent user message */
.message-references {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.message-references svg {
    flex-shrink: 0;
}

/* STT Recording Overlay */
.stt-overlay {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
    height: 48px;
    padding: 0 6px;
    background: var(--bg-input);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.stt-overlay.active {
    display: flex;
}

.stt-overlay.transcribing {
    display: flex;
}

.stt-overlay.transcribing .stt-waveform {
    display: none;
}

.stt-overlay.transcribing .stt-done-btn {
    display: none;
}

.stt-overlay.transcribing .stt-cancel-btn {
    order: 1;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius);
    background: var(--danger);
    color: var(--on-color);
}

.stt-overlay.transcribing .stt-cancel-btn:hover {
    background: var(--danger-hover);
    box-shadow: 0 2px 6px var(--danger-subtle);
}

.stt-overlay.transcribing .stt-timer {
    flex: 1;
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.stt-overlay.transcribing .stt-timer::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-muted);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* Reuses @keyframes spin defined below */

/* Arming: mic requested but not yet delivering audio (permission prompt,
   audio-HAL/Bluetooth warm-up, muted track). Signals "don't speak yet"; the timer flipping to 0:00 is the "speak now" cue. */
.stt-overlay.arming .stt-waveform {
    opacity: 0.35;
}

.stt-overlay.arming .stt-timer {
    min-width: 0;
    color: var(--text-muted);
    animation: stt-arming-pulse 1.2s ease-in-out infinite;
}

@keyframes stt-arming-pulse {
    50% { opacity: 0.45; }
}

.stt-cancel-btn,
.stt-done-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    transition: background var(--transition-fast);
}

.stt-cancel-btn {
    background: rgba(var(--overlay-rgb), 0.08);
    color: var(--text-muted);
}

.stt-cancel-btn:hover {
    background: var(--danger-subtle);
    color: var(--danger);
}

.stt-done-btn {
    background: var(--accent);
    color: var(--on-accent);
}

.stt-done-btn:hover {
    background: var(--accent-hover);
}

.stt-waveform {
    flex: 1;
    height: 32px;
    overflow: hidden;
}

.stt-waveform canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.stt-timer {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    min-width: 36px;
    text-align: right;
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

.modal-overlay.open {
    display: flex;
    animation: overlayIn 0.2s ease;
}

.modal-overlay.closing {
    display: flex;
    animation: overlayOut 0.15s ease forwards;
    pointer-events: none;
}

.modal-overlay.closing .modal {
    animation: modalOut 0.15s ease forwards;
}

@keyframes overlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes overlayOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes modalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    margin: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

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

.modal.modal-wide {
    max-width: 860px;
}

.modal.modal-sm {
    max-width: 400px;
}

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

.modal-header h3 {
    font-size: 15px;
    font-weight: 700;
}

.modal-header .btn-ghost {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

.modal-footer-spread {
    justify-content: space-between;
}

.modal-footer-actions {
    display: flex;
    gap: 8px;
}

/* Custom Model Layout */
.cm-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.label-optional {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11px;
}

/* CM file upload header with + button */
.cm-files-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cm-files-header label {
    margin-bottom: 0;
}

.cm-files-header input[type="file"] {
    display: none;
}

.cm-add-file-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    border: 1.5px dashed var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.cm-add-file-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

/* tile or list view switch; sits at the right end of the files header */
.cm-view-toggle {
    display: flex;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.cm-view-toggle button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cm-view-toggle button:hover {
    color: var(--text-secondary);
    background: var(--accent-subtle);
}

.cm-view-toggle button.active {
    background: var(--accent);
    color: var(--on-color);
}

/* CM file grid; reuses .attach-box from chat */
.cm-file-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
}

.cm-file-grid:empty::after {
    content: 'Noch keine Dateien';
    color: var(--text-muted);
    font-size: 12px;
    opacity: 0.5;
    padding: 12px 0;
}

.cm-file-grid.dragover {
    background: var(--accent-subtle);
    border-radius: var(--radius);
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    padding: 8px;
}

/* List view; same .attach-box DOM, reflowed into full-width rows. Scoped to the
   CM file grid so chat attachments are never affected. The upload/queued/error/
   pending overlays are all position:absolute inset:0, so they adapt to the row for
   free; only the progress ring and the done/error glyph need a size tweak. */
.cm-file-grid.list-view {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
}

.cm-file-grid.list-view .attach-box {
    width: 100%;
    height: auto;
    min-height: 40px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius);
}

.cm-file-grid.list-view .attach-box:hover {
    transform: none;
    box-shadow: none;
    background: var(--accent-subtle);
}

.cm-file-grid.list-view .attach-box-ext {
    flex-shrink: 0;
    min-width: 42px;
}

.cm-file-grid.list-view .attach-box-preview {
    display: none;
}

.cm-file-grid.list-view .attach-box-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    text-align: left;
    line-height: 1.3;
}

/* Image: small leading thumbnail instead of the full-bleed cover used in tiles */
.cm-file-grid.list-view .attach-box-image {
    justify-content: flex-start;
}

.cm-file-grid.list-view .attach-box-image img {
    position: static;
    inset: auto;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius);
}

/* The image filename only belongs in the list; hide it in the tile layout */
.cm-file-grid:not(.list-view) .attach-box-image .attach-box-name {
    display: none;
}

/* Upload-date label; visible only in list view (hover-title in tile view). */
.attach-box-date {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1.2;
}

.cm-file-grid:not(.list-view) .attach-box-date {
    display: none;
}

.cm-file-grid.list-view .attach-box-date {
    margin-left: auto;
    padding: 0 28px 0 12px;
    /* right padding clears the always-on remove X */
    flex-shrink: 0;
}

/* X always reachable in a row (rows have room; also better on touch) */
.cm-file-grid.list-view .attach-box .attach-box-remove {
    opacity: 1;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    right: 8px;
}

/* Keep the progress ring + done/error glyph from overflowing a short row.
   Drop the % label and ETA text in list view; the row is only ~40 px tall,
   the column-stacked content would overflow upward and the ring would sit
   too high. Ring alone, vertically centered, fits cleanly. */
.cm-file-grid.list-view .attach-box-progress-ring-wrap {
    width: 26px;
    height: 26px;
}

.cm-file-grid.list-view .attach-box-progress-label,
.cm-file-grid.list-view .attach-box-progress-eta {
    display: none;
}

.cm-file-grid.list-view .attach-box.done::after,
.cm-file-grid.list-view .attach-box.error::after {
    font-size: 20px;
}

/* Audio text box variant */
.attach-box-audio {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 6px 7px;
    gap: 2px;
}

.attach-box-audio .attach-box-ext {
    color: var(--accent);
}

@media (max-width: 640px) {
    .modal.modal-wide {
        max-width: 100%;
    }

    .modal {
        margin: 10px;
        max-width: calc(100vw - 20px);
    }

    .modal.modal-sm {
        max-width: calc(100vw - 20px);
    }

    .cm-top-row {
        grid-template-columns: 1fr;
    }

    .cm-card {
        padding: var(--space-md);
    }

    .cm-share-toggles {
        gap: 4px;
    }

    .cm-share-toggle {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* Admin */

/* Admin Dashboard */
.dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.dash-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0;
    color: var(--text-primary);
}

.dash-org-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 230px;
}

.dash-org-caption {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

#dash-org {
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
}

/* card groups */
/* pending-registrations alert: an action, not a KPI */
.dash-alert {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--space-sm);
    padding: 10px 16px;
    margin-bottom: var(--space-lg);
    border: 1px solid var(--danger);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

/* one line of scope context above the KPI band */
.dash-context {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

/* KPI band: equal tiles separated by hairlines (1px gap over border color).
   flex-shrink: 0 is load-bearing; overflow: hidden zeroes the automatic
   min-height, and the scrolling flex-column .view-panel would otherwise
   squeeze the band to its borders. */
.dash-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 1px;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
}

.dash-tile {
    background: var(--bg-secondary);
    padding: 16px 18px;
    min-width: 0;
}

.dash-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: var(--space-sm);
}

.dash-card-val {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.dash-card-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dash-card-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
    font-weight: 500;
}

/* chart card */
.dash-chart-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 20px 14px;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.dash-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.dash-chart-titles {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.dash-chart-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.dash-chart-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* segmented range toggle */
.dash-range {
    display: inline-flex;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 3px;
    gap: 2px;
}

.dash-range-btn {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.dash-range-btn:hover {
    color: var(--text-primary);
}

.dash-range-btn.active {
    background: var(--accent);
    color: var(--on-accent);
}

/* bar chart */
.dash-chart {
    width: 100%;
}

.dash-plot {
    position: relative;
    height: 168px;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var(--border-subtle);
}

.dash-ymax {
    position: absolute;
    top: -3px;
    right: 0;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    opacity: 0.7;
}

.dash-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    height: 100%;
}

.dash-bar-wrap {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
}

.dash-bar {
    width: 100%;
    max-width: 30px;
    background: linear-gradient(180deg, var(--accent), var(--purple));
    border-radius: 3px 3px 0 0;
    transition: height var(--transition-slow), opacity var(--transition-fast);
}

.dash-bar-wrap:hover .dash-bar {
    opacity: 0.75;
}

.dash-axis {
    display: flex;
    gap: 2px;
    margin-top: 6px;
}

.dash-axis-cell {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* empty state */
.dash-empty {
    height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
}

.dash-empty.sm {
    height: 80px;
    font-size: 12px;
}

/* detail tables: full width, stacked, no inner scroll; the page scrolls */
.dash-tables {
    container: dashboard-tables / inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.dash-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.dash-panel-head {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-subtle);
}

.dash-expander {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.dash-expander:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.02);
}

.dash-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-subtle);
}

.dash-row:last-child {
    border-bottom: none;
}

.dash-row:hover {
    background: rgba(var(--overlay-rgb), 0.02);
}

.dash-row-name {
    flex: 0 0 34%;
    min-width: 0;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-row-num {
    min-width: 44px;
    text-align: right;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.dash-row-meta {
    min-width: 60px;
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    /* Same trio as .dash-row-name: these tracks never grow to fit, and a long
       provider model name ("anthropic.claude-3-5-sonnet-20241022-v2:0") would
       otherwise wrap and leave one row taller than its neighbours. The full
       value stays available in the cell's tooltip. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* head controls: range (scopes everything) + org selector side by side */
.dash-controls {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.dash-controls .dash-range {
    height: 34px;
    align-items: center;
}

/* error state: never leave a stale scope's numbers standing */
.dash-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: 14px 18px;
    margin-bottom: var(--space-xl);
    border: 1px solid var(--danger);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
}

/* labeled column headers + grid rows for the detail panels */
.dash-panel-cols {
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

.dash-panel-cols span:not(:first-child) {
    text-align: right;
}

/* clickable sortable column headers */
.dash-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.dash-th:hover {
    color: var(--text-secondary);
}

.dash-th-active {
    color: var(--text-primary);
}

.dash-th:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* 8 tracks: Nutzer · Organisation · Anfragen · Tokens · Kosten · Kosten/Monat · Top-Modell ·
   Zuletzt aktiv. Hidden columns reduce the track count. On narrow screens,
   Organisation shares the name track on a second line. */
.dash-cols-users {
    grid-template-columns:
        minmax(0, 1.2fr) minmax(100px, 1fr) 80px 84px 96px 104px minmax(130px, 0.8fr) 104px;
}

.dash-panel-cols.dash-cols-users .dash-col-org {
    text-align: left;
}

.dash-row .dash-col-org {
    color: var(--text-muted);
    font-weight: 400;
}

.dash-cols-models {
    grid-template-columns: minmax(0, 1.4fr) 90px 90px 110px 100px 80px 80px 80px;
}

/* Billed breakdown: name · euro · request count. Three tracks at every width; there is nothing here worth hiding on a narrow screen. */
.dash-cols-billed {
    grid-template-columns: minmax(0, 1fr) 110px 100px;
}

.dash-row.dash-cols-users,
.dash-row.dash-cols-models,
.dash-row.dash-cols-billed {
    display: grid;
    gap: 10px;
    position: relative;
}

.dash-row.dash-cols-users > span,
.dash-row.dash-cols-models > span,
.dash-row.dash-cols-billed > span {
    position: relative;
    z-index: 1;
}

/* magnitude as a quiet background fill (share of the top entry) */
.dash-row-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--accent-subtle);
    z-index: 0;
    pointer-events: none;
}

.dash-row-inactive {
    opacity: 0.55;
}

/* In-flight scope change. The 400 ms transition delay is the point: a fast
   dashboard never flashes, a slow "Gesamt" query stops presenting the previous
   scope's numbers as if they were the new selection's. Removing the class has
   no transition, so the restore is instant. */
.dash-busy {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 120ms ease 400ms;
}

.dash-loading {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

/* Logs: the message column carries whole tracebacks; wrap it inside a
   bounded width so the row fits the card instead of dragging the whole view
   (filter tabs included) sideways. */
#logs-content .admin-card {
    overflow-x: auto;
}

#logs-content .admin-table td:last-child {
    max-width: 420px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Foot note under a detail panel: what the table does NOT show. Quiet, but
   never hidden; a capped table that looks complete is the whole problem. */
.dash-panel-note {
    padding: 8px 16px 10px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
}

.dash-row .dash-row-name {
    flex: initial;
}

/* keep the y-max readable when the rightmost bar is near full height */
.dash-ymax {
    background: var(--bg-secondary);
    padding: 0 4px;
    border-radius: 4px;
    z-index: 1;
}

/* users view: active pending-filter chip (dashboard click-through) */
.members-filter-chip {
    border: 1px solid var(--danger);
    background: none;
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

/* Modelle view: EUR per 1M token inputs */
.model-price-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}

.model-price-input {
    width: 58px;
    padding: 5px 6px;
    font-size: 12px;
    text-align: right;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.model-price-input:focus {
    border-color: var(--accent);
    outline: none;
}

.model-price-sep {
    color: var(--text-muted);
    font-size: 12px;
}

/* Tokens yields first on the users table; Kosten already encodes it. */
@media (max-width: 1200px) {
    .dash-col-sec { display: none; }
    .dash-cols-users {
        grid-template-columns: minmax(0, 1.2fr) minmax(100px, 1fr) 80px 96px 104px minmax(120px, 0.8fr) 100px;
    }
}

@media (max-width: 760px) {
    .dash-org-field { min-width: 0; flex: 1; }
    .dash-head { align-items: stretch; }
    .dash-controls { align-items: stretch; flex-direction: column-reverse; }
    .dash-band { grid-template-columns: repeat(2, 1fr); }
    .dash-row { gap: 8px; padding: 9px 12px; }
    .dash-row-name { flex-basis: 30%; }
    .dash-row-meta { min-width: 48px; }
    /* the per model latency columns yield to the essentials on narrow screens */
    .dash-col-perf { display: none; }
    /* ...and on the users table Top-Modell follows Tokens out */
    .dash-col-opt { display: none; }
    .dash-cols-models { grid-template-columns: minmax(0, 1fr) 70px 70px 80px; }
    .dash-panel-cols, .dash-row.dash-cols-users, .dash-row.dash-cols-models { gap: 6px; }
    .dash-plot, .dash-empty { height: 144px; }
}

/* Use the table width so an expanded or resized sidebar cannot hide names. */
@container dashboard-tables (max-width: 900px) {
    .dash-cols-users { grid-template-columns: minmax(0, 1fr) 62px 76px 84px 90px; }
    .dash-cols-users .dash-col-sec,
    .dash-cols-users .dash-col-opt,
    .dash-panel-cols .dash-col-org { display: none; }
    .dash-row.dash-cols-users > .dash-row-name { grid-column: 1; grid-row: 1; }
    .dash-row.dash-cols-users > .dash-col-org { grid-row: 2; font-size: 11px; }
    .dash-row.dash-cols-users > span:not(.dash-row-name) { grid-row: 1 / span 2; }
    .dash-panel-cols.dash-cols-users,
    .dash-row.dash-cols-users { gap: 6px; }
}

/* Admin Tables */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: none;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.admin-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-subtle);
    background: none;
}

.admin-table th:not(.no-sort) {
    cursor: pointer;
    user-select: none;
}

.admin-table th:not(.no-sort):hover {
    color: var(--text-secondary);
}

.admin-table th:not(.no-sort)::after {
    content: '';
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-bottom: 4px solid currentColor;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.admin-table th:not(.no-sort):hover::after {
    opacity: 0.35;
}

.admin-table th.sort-asc::after {
    opacity: 1 !important;
    border-bottom: 4px solid var(--accent);
    border-top: none;
}

.admin-table th.sort-desc::after {
    opacity: 1 !important;
    border-bottom: none;
    border-top: 4px solid var(--accent);
}

.admin-table td {
    padding: 8px 12px;
    vertical-align: middle;
    white-space: nowrap;
}

.admin-table tr {
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-subtle);
}

.admin-table tbody tr:hover td {
    background: rgba(var(--overlay-rgb), 0.02);
}

.admin-table tbody tr:last-child {
    border-bottom: none;
}

.admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.badge {
    display: inline-block;
    min-width: 64px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
}

.badge-admin {
    background: var(--accent-subtle);
    color: var(--accent);
}

.badge-user {
    background: var(--success-subtle);
    color: var(--success);
}

.badge-pending {
    background: var(--warning-subtle);
    color: var(--warning);
}

/* Role badge as click target (users table): user ⇄ admin toggle. */
button.badge-role-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

button.badge-role-btn:hover {
    box-shadow: inset 0 0 0 1px currentColor;
}

/* Role-change confirmations pass multiline consequence text. */
#confirm-message {
    white-space: pre-line;
}

.action-btns {
    vertical-align: middle;
}

.action-btns-wrap {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
    /* Stack the buttons when the table is tight instead of widening it past
       the pane (a 1280 px laptop beside the navigation column). */
    flex-wrap: wrap;
}

.action-btn {
    padding: 5px 12px;
    font-size: 11px;
    white-space: nowrap;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    background: var(--bg-input);
    transition: all var(--transition-fast);
}

.action-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: rgba(var(--overlay-rgb), 0.12);
}

.action-btn:active {
    transform: scale(0.97);
}

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

.action-btn.danger:hover {
    background: var(--danger-subtle);
    border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}

.action-btn.success {
    color: var(--success);
}

.action-btn.success:hover {
    background: var(--success-subtle);
    border-color: color-mix(in srgb, var(--success) 20%, transparent);
}

/* Admin Forms */
.settings-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.settings-section-title {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-subtle);
    background: none;
}

.save-check {
    color: var(--success);
    margin-left: 6px;
    font-size: 0.85em;
    opacity: 1;
    transition: opacity var(--transition-slow);
}

.save-check.fade-out {
    opacity: 0;
}

.conn-form {
    padding: 16px 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.conn-form .form-group {
    flex: 1;
    min-width: 180px;
}

.conn-save-btn {
    white-space: nowrap;
    font-size: 13px;
    padding: 10px 20px;
    border: 1px solid transparent;
    box-sizing: border-box;
    min-width: 160px;
    text-align: center;
}

.input-with-icon {
    position: relative;
}

.input-with-icon input {
    width: 100%;
    padding-right: 40px;
}

/* Mask text input as bullets without using type=password; avoids the
   browser's "save password" prompt on view-switch / panel hide. */
input.masked {
    -webkit-text-security: disc;
    text-security: disc;
    font-family: text-security-disc, inherit;
    letter-spacing: 0.15em;
}

.input-with-icon .input-icon-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.input-with-icon .input-icon-btn:hover {
    color: var(--text-primary);
}

/* Meta row beneath .conn-form; columns mirror the form cells so the left
   cell sits under API-URL and the hint under API-KEY. On wide viewports the
   spacer reserves the button column; on narrow viewports the spacer hides
   and the cells wrap naturally (min-width forces them to their own rows
   rather than cramming the hint into a sliver). */
.conn-meta {
    display: flex;
    padding: 4px 20px 14px;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
    align-items: flex-start;
}

.conn-meta-cell {
    flex: 1 1 240px;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}

.conn-meta-hint {
    flex-wrap: wrap;
    /* let inline <code> badges wrap cleanly */
}

.conn-meta-spacer {
    flex: 0 0 auto;
    min-width: 160px;
    /* matches .conn-save-btn min-width */
}

/* Once the main area can't fit two 240px cells + a 160px spacer side by side,
   the spacer is noise; drop it so status + hint each keep their own row. */
@media (max-width: 900px) {
    .conn-meta-spacer {
        display: none;
    }
}

/* At narrow widths the form would otherwise wrap only the Save button onto
   its own row, leaving an awkward empty column beside it. Stack everything
   vertically instead; URL, Key, button and meta each become full-width. */
@media (max-width: 700px) {
    .conn-form {
        flex-direction: column;
        align-items: stretch;
    }

    .conn-form .form-group {
        min-width: 0;
        flex: none;
    }

    .conn-save-btn {
        width: 100%;
        min-width: 0;
    }
}

.conn-meta-hint code {
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    font-family: monospace;
    font-size: 11px;
    color: var(--text-primary);
}

.sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.sync-dot.online {
    background: var(--success);
}

.sync-dot.offline {
    background: var(--danger);
}

/* Toggle */
.toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
}

.toggle input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: all var(--transition-base);
}

.toggle-slider::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all var(--transition-base);
}

.toggle input:focus-visible+.toggle-slider {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.toggle input:checked+.toggle-slider {
    background: var(--accent);
    border-color: var(--accent);
}

.toggle input:checked+.toggle-slider::before {
    transform: translateX(16px);
    background: var(--on-accent);
}

.sysprompt-textarea {
    width: 100%;
    min-height: 50vh;
    font-size: 13px;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    line-height: 1.6;
    padding: 14px 16px;
    resize: vertical;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.display-name-cell {
    cursor: default;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--transition-fast);
}

.display-name-cell:hover {
    border-bottom-color: var(--text-muted);
}

.display-name-edit,
.display-name-edit:focus {
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    background: transparent;
    color: var(--accent);
    border: none;
    border-bottom: 1px solid var(--accent);
    border-radius: 0;
    outline: none;
    box-shadow: none;
    font-family: inherit;
}

/* Logs */
.logs-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.log-filter-tabs {
    display: flex;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 2px;
    margin-right: auto;
}

.log-filter-tab {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.log-filter-tab:hover {
    color: var(--text-primary);
}

.log-filter-tab.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.log-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px 0;
    text-align: center;
}

.log-hint {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    margin-top: 12px;
    opacity: 0.7;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    justify-content: center;
}

.period-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}

.period-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: rgba(var(--overlay-rgb), 0.12);
}

.period-btn.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.period-btn:active {
    transform: scale(0.97);
}

.period-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pagination-ellipsis {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 600px) {
    .pagination .pagination-outer {
        display: none;
    }

    .period-btn {
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        font-size: 12px;
    }

    .pagination-ellipsis {
        min-width: 20px;
        height: 28px;
        font-size: 12px;
    }
}

.log-timestamp {
    white-space: nowrap;
    color: var(--text-muted);
}

.log-level {
    display: inline-block;
    min-width: 64px;
    text-align: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.log-level-error {
    background: var(--danger-subtle);
    color: var(--danger);
}

.log-level-warning {
    background: var(--warning-subtle);
    color: var(--warning);
}

.log-level-info {
    background: rgba(var(--overlay-rgb), 0.05);
    color: var(--text-muted);
}

.log-source {
    color: var(--text-muted);
}

.log-user-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
}

.log-user-link:hover,
.log-user-link:focus-visible {
    text-decoration-color: currentColor;
}

/* Dashboard "Aktivste Nutzer": the name is the same jump link as in Logs,
   but it sits in an ellipsised flex track, so the button must clip like the
   span it replaces. */
.dash-row-name .log-user-link {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-weight: 500;
}

.log-org-label {
    display: inline-block;
    white-space: nowrap;
    color: var(--text-secondary);
}

.log-org-individual,
.log-org-admin,
.log-empty-value {
    color: var(--text-muted);
}

.log-row-clickable {
    cursor: pointer;
}

.log-row-clickable:hover td {
    background: rgba(var(--overlay-rgb), 0.03);
}

.log-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: var(--z-log-detail);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    overflow: hidden;
}

@media (max-width: 600px) {
    .log-detail-overlay {
        padding: 8px;
    }

    .log-detail-panel,
    .log-detail-panel-lg {
        max-width: 100%;
        max-height: 90vh;
        border-radius: var(--radius);
    }
}

.log-detail-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.log-detail-panel-lg {
    max-width: 960px;
    max-height: 85vh;
}

.log-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.log-detail-source {
    font-weight: 600;
    color: var(--text-secondary);
}

.log-detail-time {
    color: var(--text-muted);
    font-size: 13px;
    margin-left: auto;
    margin-right: 4px;
}

.log-detail-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    margin-left: 8px;
    flex-shrink: 0;
}

.log-detail-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.log-detail-message {
    padding: 16px 20px;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.log-detail-traceback {
    padding: 0 20px 20px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.log-detail-traceback-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.log-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: none;
    letter-spacing: 0;
}

.log-copy-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.log-copy-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: rgba(var(--overlay-rgb), 0.12);
}

.log-copy-btn.copied {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 20%, transparent);
}

.log-detail-traceback pre {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 16px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--danger);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    overflow-x: auto;
}

/* Admin Card (unified card-with-header pattern) */
.admin-card {
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.admin-card+.admin-card {
    margin-top: 16px;
}

.admin-card-header {
    padding: var(--space-md) var(--space-lg);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-subtle);
    background: none;
}

.admin-card .admin-table {
    border: none;
    border-radius: 0;
    background: none;
}

.admin-card-help {
    padding: 8px var(--space-lg);
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
}

.prompt-input-field {
    margin-top: 10px;
    width: 100%;
}

/* Profile Tabs (private / public / hybrid) */
.profile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-md);
}

.profile-tab {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.profile-tab:hover {
    background: var(--bg-hover);
}

.profile-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.profile-tab-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.allowed-models-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
    max-height: 280px;
    overflow: auto;
    padding: 4px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
}

.allowed-models-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
}

.allowed-models-item:hover {
    background: var(--bg-hover);
}

.profile-desc-note {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-muted);
}

/* Admin settings: constrained width, card layout, label-left rows */
.settings-layout {
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-layout .profile-tabs {
    padding: 0;
    border-bottom: none;
    margin: 0;
}

/* Hosts the stacked global cards (Globale settings, Websuche); same
   rhythm as .profile-tab-body so the boxes don't touch. */
#global-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.settings-block-heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 6px 0 -8px;
}

.settings-block-help {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.pcard {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pcard-global {
    border-color: var(--accent-subtle);
}

.pcard-head {
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

.pcard-help {
    margin: 0;
    padding: 10px 16px 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.pcard-body {
    padding: 2px 16px;
}

.pcard-loading {
    padding: 16px;
    color: var(--text-muted);
    font-size: 13px;
}

.view-title { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.integration-sources-line { font-size: 12px; color: var(--text-muted); }

.pcard-empty {
    padding: 14px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.field-row:last-child {
    border-bottom: none;
}

.field-label {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--text-primary);
    cursor: default;
}

.field-control {
    flex: 0 0 auto;
    width: 300px;
    max-width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.field-control-toggle {
    width: auto;
}

.field-control select,
.field-control input[type="text"],
.field-control input[type="number"],
.field-control input[type="email"] {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    padding: 7px 10px;
    font-size: 13px;
    box-sizing: border-box;
}

.field-control input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.field-control input[type="number"]::-webkit-outer-spin-button,
.field-control input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.field-control select:focus,
.field-control input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
    outline: none;
}

/* Mail test row: e-mail input + Senden button side by side (input skin comes
   from the shared .field-control rule above) */
.mail-test-control {
    gap: 8px;
}

.mail-test-control input[type="email"] {
    flex: 1;
    min-width: 0;
}

.pcard .allowed-models-list {
    margin: 12px 16px 16px;
    max-width: none;
}

@media (max-width: 640px) {
    .field-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .field-row-toggle {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .field-control {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
    }

    .field-control-toggle {
        width: auto;
    }
}

/* Inline edit (chat rename, message edit) */
.inline-edit-input {
    width: 100%;
    padding: 0 4px;
    margin: 0 -4px;
    font-size: inherit;
    background: rgba(var(--overlay-rgb), 0.06);
    color: var(--text-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    outline: none;
    caret-color: var(--accent);
}

.inline-edit-input:focus {
    box-shadow: 0 0 0 2px var(--accent-subtle);
    border-color: var(--accent);
}

.message.user.editing {
    max-width: 100%;
    align-self: stretch;
}

.message.user.editing .message-content {
    background: transparent;
    padding: 0;
}

.message.user.editing .message-sender {
    display: none;
}

.edit-textarea {
    width: 100%;
    min-height: 44px;
    max-height: 400px;
    resize: none;
    overflow-y: auto;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.6;
}

.edit-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}

.edit-actions .btn {
    font-size: 12px;
    padding: 5px 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-resize-handle {
        display: none;
    }

    /* Ordner/Chats-Trenner auch auf Mobile ziehbar; höher für Finger-Targets */
    .sidebar-folders-resize {
        height: 14px;
    }

    .sidebar-folders-resize:hover,
    .sidebar-folders-resize.active {
        background: var(--accent);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: var(--z-sidebar-overlay);
    }

    .sidebar-overlay.open {
        display: block;
    }

    .hamburger {
        display: block;
        flex-shrink: 0;
    }

    .main-header {
        gap: 8px;
        padding-inline: 12px;
    }

    .main-header-spacer {
        display: none;
    }

    .model-selector {
        flex: 1;
        min-width: 0;
        flex-wrap: nowrap;
        max-width: none;
        overflow: visible;
    }

    .model-chips {
        min-width: 0;
        flex-wrap: nowrap;
    }

    .model-selector.has-expanded-selection {
        flex-wrap: wrap;
    }

    .model-selector.has-expanded-selection .model-chips {
        flex-basis: 100%;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .model-selector.has-expanded-selection .model-chip {
        flex-shrink: 0;
    }

    .model-chip {
        min-width: 0;
        padding-inline: 8px;
    }

    .model-chip-remove {
        flex-shrink: 0;
    }

    .model-chip-name {
        max-width: 100px;
    }

    .model-add-btn.expanding {
        width: 140px;
    }

    .action-btns-wrap {
        flex-wrap: nowrap;
    }

    .action-btns-wrap .action-btn {
        text-align: center;
    }

    .sidebar-collapse-btn {
        display: none;
    }

    .messages-container {
        padding: 0 16px 16px;
    }

    .input-area {
        padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .toolbar-btn {
        width: 38px;
        height: 38px;
        -webkit-tap-highlight-color: transparent;
    }

    .toolbar-btn svg {
        width: 20px;
        height: 20px;
    }

    .input-toolbar {
        padding: 0;
    }

    /* Multi-Model auf Mobile: horizontaler Swipe-Pager mit Scroll-Snap statt Stapelung */
    .message-row {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .message-row::-webkit-scrollbar {
        display: none;
    }

    .message-row.scrollable {
        overflow-x: auto;
    }

    .message-row .message-column,
    .message-row.scrollable .message-column {
        flex: 0 0 100%;
        min-width: 100%;
        scroll-snap-align: start;
        border-right: none;
        border-bottom: none;
    }

    .message-row-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: 4px 0 10px;
    }

    .message-row-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--border);
        transition: background var(--transition-fast), transform var(--transition-fast);
    }

    .message-row-dot.active {
        background: var(--accent);
        transform: scale(1.3);
    }

    .speed-badge {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .speed-detail.open {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .edit-textarea {
        font-size: 16px;
    }
}

/* Generated images: wide, clean display */
.generated-image-wrap {
    margin: 10px 0;
    width: 100%;
}

.generated-image-wrap img {
    width: 100%;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    display: block;
}

.generated-image-wrap img:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-md);
}

.generated-image-wrap img:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xl);
}

/* Image generation loading indicator */
.img-generating {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    max-width: 512px;
    margin: 10px 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.img-generating-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Image preview overlay (fullscreen) */
.image-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    cursor: zoom-out;
    backdrop-filter: blur(4px);
    touch-action: none;
    overflow: hidden;
}

.image-preview-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: var(--z-overlay-front);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: var(--on-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.image-preview-full {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
}

.image-preview-caption {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80vw;
    max-height: 20vh;
    overflow-y: auto;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    box-shadow: var(--shadow-lg);
}

.image-preview-caption.is-placeholder {
    font-style: italic;
    opacity: 0.7;
}

/* HTML / single-file-app preview */
.code-block-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.code-action-btn {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.code-action-btn:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.08);
}

.code-action-btn--accent {
    color: var(--accent);
    font-weight: 600;
}

.code-action-btn--accent:hover {
    color: var(--accent-hover);
    background: var(--accent-subtle);
}

/* Disabled = the deck card's download button while the .pptx builds in the
   background ("Präsentation wird vorbereitet…"). */
.code-action-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.code-action-btn:disabled:hover {
    color: var(--text-muted);
    background: none;
}

/* HTML blocks: actions sit at the bottom of the block (mirrors the header). */
.code-block-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 14px;
    background: rgba(var(--overlay-rgb), 0.03);
    border-top: 1px solid rgba(var(--overlay-rgb), 0.04);
}

/* Tables stay rahmenlos; no card chrome around them. A table already has its
   own geometry (border-collapse cells); wrapping it in the dark rounded code
   card would feel heavy and double-framed. Just a thin scroll-container so
   wide tables don't push the bubble sideways, plus a floating action row. */
.table-block-wrapper {
    margin: 10px 0;
}

.table-block-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-block-scroll>table {
    /* auto + min-width: a wide table scrolls inside its wrapper instead of
       being squeezed until words break mid-character. */
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: transparent;
}

.table-block-scroll th,
.table-block-scroll td {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

.table-block-scroll th,
.table-block-scroll td {
    padding: 6px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(var(--overlay-rgb), 0.07);
}

.table-block-scroll thead th {
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid rgba(var(--overlay-rgb), 0.18);
}

.table-block-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding-top: 4px;
}

/* CSV analysis result: the server-computed table, above the model's answer.
   Framed just enough to read as "computed, not written"; the numbers come
   from a real query, the prose underneath is interpretation. The table itself
   reuses .table-block-* (Excel + Kopieren row included). */
.csv-analysis {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}

/* A report is several queries, so several tables in one block. */
.csv-analysis-part+.csv-analysis-part {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.csv-analysis-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.csv-analysis-partfail {
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 2px 0;
}

.csv-analysis-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.csv-analysis-table .table-block-wrapper {
    margin: 4px 0 0;
}

/* Wide result tables scroll inside the block instead of stretching the bubble. */
.csv-analysis-table table {
    width: auto;
    min-width: 100%;
}

/* Data-quality caveat under a result table. Muted rather than alarming: the
   figure is still the best available, it just must not read as exact. */
.csv-analysis-note {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* The self-check's own conclusions sit under the whole block, not one table. */
.csv-analysis-note-audit {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.csv-analysis-note-audit+.csv-analysis-note-audit {
    margin-top: 4px;
    padding-top: 0;
    border-top: none;
}

.csv-analysis-sql {
    margin-top: 8px;
}

.csv-analysis-sql>summary {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
}

.csv-analysis-sql>summary:hover {
    color: var(--text-primary);
}

.csv-analysis-sql>pre {
    margin: 6px 0 0;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: rgba(var(--overlay-rgb), 0.05);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-secondary);
}

/* The query could not run; the answer contains no computed values. Same
   posture as .web-sources-notice: never let a failure look like a result. */
.csv-analysis-failed {
    border-left-color: var(--warning);
    font-size: 12.5px;
    color: var(--text-muted);
}

/* A ```slides spec renders as a compact download card (parallels the html
   preview affordance). The raw JSON lives behind the "Code anzeigen" toggle. */
.slides-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}

.slides-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    color: var(--accent);
    background: var(--accent-subtle);
}

.slides-card-text {
    flex: 1 1 auto;
    min-width: 0;
}

.slides-card-title {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slides-card-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
}

.slides-card-sub--error {
    color: var(--danger);
}

.slides-card-dl {
    flex: 0 0 auto;
}

.slides-card--pending .slides-card-title {
    color: var(--text-muted);
    font-weight: 500;
}

.slides-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

/* Never show the raw spec JSON of slides/ask/xlsx blocks; even mid-stream, before
   the card-enhancement pass runs. Users see the card/questions, never code.
   language-pptxgen: legacy decks from before the server pipeline; the JS
   enhancement swaps in a static notice card (renderLegacyDeckNotice). */
pre:has(> code.language-ask),
pre:has(> code.language-slides),
pre:has(> code.language-pptxgen),
pre:has(> code.language-xlsxgen) {
    display: none !important;
}

/* ```xlsxgen workbook card (inherits .slides-card) + its 1:1 preview panel.
   The grid itself deliberately stays white-paper in BOTH themes: a spreadsheet
   preview is a document, and the author-chosen fills/font colors were designed
   against white; inverting them would break the 1:1 promise. Only the panel
   chrome (tabs, border, note) follows the theme. */
.book-preview {
    margin: 8px 0 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    overflow: hidden;
}

.book-preview-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.book-tab {
    flex: 0 0 auto;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}

.book-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.book-tab.active {
    color: var(--accent);
    border-color: var(--border);
    background: var(--accent-subtle);
    font-weight: 600;
}

.book-preview-grid {
    max-height: 420px;
    overflow: auto;
    background: #ffffff;
}

.book-grid {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
    font: 13px/1.35 -apple-system, "Segoe UI", Calibri, sans-serif;
    color: #1f2937;
}

.book-grid td {
    border: 1px solid #e5e7eb;
    padding: 2px 6px;
    vertical-align: bottom;   /* Excel's default */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-preview-note {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 10px;
    border-top: 1px solid var(--border);
}

.book-preview-note:first-child {
    border-top: none;
    border-bottom: 1px solid var(--border);
}

/* SVG chart previews (rendered from the injected chart specs). Stays white-paper
   in both themes, same rationale as the grid: the file's charts live on white. */
.book-preview-charts {
    background: #ffffff;
    padding: 6px 10px 10px;
    border-bottom: 1px solid var(--border);
}

.book-preview-charts .book-preview-note {
    border: none;
    padding: 4px 0 6px;
}

.book-chart {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 4px auto;
    background: #ffffff;
}

/* VBA source view for a macro-enabled (.xlsm) card. */
.book-macro-code {
    margin: 0;
    max-height: 360px;
    overflow: auto;
    padding: 10px 12px;
    font: 12px/1.5 "Cascadia Code", Consolas, "Courier New", monospace;
    color: var(--text-primary);
    background: var(--bg-code, var(--bg-elevated));
    white-space: pre;
    tab-size: 4;
}

/* Interactive clarifying-question card (```ask block). */
.ask-card {
    margin: 10px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}

.ask-card--pending {
    color: var(--text-muted);
    font-size: 13px;
}

.ask-card--done {
    opacity: 0.6;
}

/* Progress header: "Frage X von N" + step dots */
.ask-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ask-progress-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.ask-dots {
    display: flex;
    gap: 6px;
}

.ask-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ask-dot.done {
    background: var(--accent);
    opacity: 0.45;
}

.ask-dot.active {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.3);
}

.ask-dot:disabled {
    cursor: default;
}

/* One question visible at a time (stepper) */
.ask-q {
    display: none;
}

.ask-q.active {
    display: block;
    animation: askStepIn 0.18s ease;
}

@keyframes askStepIn {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: none; }
}

.ask-q-header {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: var(--accent-subtle);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
}

.ask-q-text {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.ask-q-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ask-opt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    max-width: 320px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ask-opt:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.ask-opt.sel {
    border-color: var(--accent);
    background: var(--accent-subtle);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.ask-opt-label {
    font-weight: 600;
    font-size: 13px;
}

.ask-opt-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.ask-opt-other {
    flex-direction: row;
    align-items: center;
    color: var(--text-secondary);
    border-style: dashed;
}

.ask-other {
    display: none;
    margin-top: 8px;
}

.ask-other.open {
    display: block;
}

.ask-other input {
    width: 100%;
    max-width: 360px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
}

.ask-submit {
    padding: 7px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-accent, #fff);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ask-submit:hover:not(:disabled) {
    background: var(--accent-hover);
}

.ask-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Footer navigation for the question stepper */
.ask-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.ask-back {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ask-back:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--accent);
}

.ask-back:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.html-preview-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: var(--z-overlay);
    animation: overlayIn var(--transition-fast);
}

.html-preview-panel {
    display: flex;
    flex-direction: column;
    width: min(1100px, 96vw);
    height: min(900px, 92vh);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.html-preview-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

.html-preview-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: auto;
}

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

.html-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
    padding: 7px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.html-preview-btn:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.08);
}

.html-preview-btn svg {
    flex: none;
}

.html-preview-close {
    padding: 7px;
}

.html-preview-frame-wrap {
    flex: 1;
    min-height: 0;
    background: #fff;
}

.html-preview-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}

@media (max-width: 640px) {
    .html-preview-overlay {
        padding: 0;
    }

    .html-preview-panel {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .html-preview-title {
        font-size: 14px;
    }

    .html-preview-btn {
        padding: 9px;
    }

    .html-preview-btn>span {
        display: none;
    }

    /* icon-only on phones to save width */
    .html-preview-close svg {
        width: 18px;
        height: 18px;
    }
}

/* Admin: User Search & Bulk */
.users-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    background: var(--bg-hover);
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.users-search-clear:hover {
    background: var(--border);
    color: var(--text-primary);
}

.btn-success {
    background: var(--success);
    color: var(--on-color);
    border: none;
}

.btn-success:hover {
    background: var(--success-hover);
    box-shadow: 0 2px 8px var(--success-subtle);
}

.btn-success:active {
    transform: scale(0.97);
}

.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.btn-outline:active {
    transform: scale(0.97);
}

/* Bulk org popover */
.bulk-org-popover {
    position: fixed;
    z-index: var(--z-overlay);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Shared popover content (move/assign/add-members) */
.bulk-org-popover .popover-head {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 10px 4px;
}

.bulk-org-popover .popover-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    cursor: pointer;
}

.bulk-org-popover .popover-item:hover {
    background: rgba(var(--overlay-rgb), 0.06);
}

/* users: two-column org / members layout */
.users-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.orgs-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-card, var(--bg-secondary));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 12px;
    position: sticky;
    top: 0;
    /* Grow with the org list, but never past the visible panel height
       (100dvh minus main-header and view-panel padding); the list and the
       detail card below share the remaining space and scroll individually. */
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
}

/* Nothing in the users view is cut with an ellipsis: a label that does not fit
   wraps (the buttons drop to a second line, names break where they must),
   because a truncated label reads as an unknown option. */
.orgs-pane-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.orgs-pane-title {
    /* Keeps its own width; when the two buttons no longer fit beside it they
       drop to a second line and stay right-aligned there (the auto margin). */
    flex: 1 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.orgs-pane-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.orgs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 140px;
    overflow: auto;
}

.orgs-filter input {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    background: var(--bg-input, var(--bg-secondary));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-primary);
}

.orgs-filter input:focus {
    outline: none;
    border-color: var(--accent);
}

.org-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius);
    padding: 9px 12px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
}

.org-item:hover {
    background: var(--bg-hover);
}

.org-item.active {
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
}

.org-item.org-item-all {
    font-weight: 600;
}

.org-item-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.org-lock {
    font-size: 11px;
    opacity: .7;
}

.org-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.org-item-count {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-hover);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    min-width: 20px;
    text-align: center;
}

.org-item.active .org-item-count {
    color: var(--accent);
}

.org-badge-noshare {
    font-size: 10px;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 0 6px;
}

/* Group settings card; lives in the members pane under the header, so the
   navigation list on the left keeps its full height however long the form
   is. Collapsed by default: the head line summarises the state that matters
   at a glance, the body is the full form as a responsive grid. */
.org-detail {
    background: var(--bg-card, var(--bg-secondary));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.org-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-lg);
}

.org-detail-head:hover {
    background: var(--bg-hover);
}

.org-detail-chevron {
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.org-detail.open .org-detail-chevron {
    transform: rotate(90deg);
}

.org-detail-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.org-detail-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.org-detail-body {
    display: none;
    padding: 4px 14px 14px;
    border-top: 1px solid var(--border-subtle);
}

.org-detail.open .org-detail-body {
    display: block;
}

.org-detail-help {
    font-size: 12px;
    color: var(--text-muted);
    margin: 10px 0 0;
    line-height: 1.5;
}

.org-detail-grid {
    display: grid;
    /* Cells are capped at 320 px and packed from the left: a 1fr track let a
       control drift a screen-width away from its label on a wide monitor and
       sit right beside the NEXT label (the 4K screenshot read the Broadcast
       switch as an Anmeldung toggle). min(100%, …) keeps one column on a phone. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 0 40px;
    margin-top: 8px;
}

.org-detail-group {
    grid-column: 1 / -1;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.org-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 2px 0;
    font-size: 13px;
    /* The pair never stretches past 340 px, and a hairline underneath keeps
       label and control visually joined once the grid is several columns wide. */
    max-width: 340px;
    border-bottom: 1px solid var(--border-subtle);
}

/* Anmeldung: one full-width line; value, the edit path, then what it means. */
.org-detail-auth {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-height: 38px;
    padding: 4px 0;
    font-size: 13px;
}

.org-detail-auth-note {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.org-detail-row label {
    cursor: default;
}

.org-detail-row select {
    min-width: 130px;
    max-width: 60%;
}

.org-detail-row input[type="number"] {
    width: 120px;
}

/* A help line inside the grid (the seat-cap headcount) spans every column. */
.org-detail-grid > .org-detail-help {
    grid-column: 1 / -1;
}

.org-detail-locked {
    color: var(--text-muted);
    font-size: 12px;
    text-align: right;
}

/* Button row of the SSO-config cards (users → SSO). */
.org-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.org-detail-actions .btn {
    flex: 1 1 auto;
}

.org-cell-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: underline dotted transparent;
}

.org-cell-btn:hover {
    text-decoration-color: var(--text-muted);
}

/* Memberships render as chips: the primary group is marked (it decides login,
   2FA and the default model), the dashed one states company coverage. */
.org-chip {
    font-size: 11.5px;
    line-height: 1.5;
    padding: 1px 8px 2px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    /* A long group name wraps at its spaces inside the chip rather than
       widening the members table past its pane; never cut to an ellipsis. Breaking
       only at spaces keeps the column at least one word wide, so the table
       cannot squeeze the chip into a one-letter sliver. */
    max-width: 150px;
    white-space: normal;
    line-height: 1.3;
}

.org-chip-stamm {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.org-chip-wide {
    border-style: dashed;
}

/* The membership manager carries four sections, not one list; the shared
   popover's 300px would put „Effektive Rechte" permanently out of sight. */
.bulk-org-popover.org-membership-pop {
    max-height: min(70vh, 520px);
}

/* Inline row actions inside a popover; the popover's own `.popover-item`
   block rule outranks a bare class, so the two-class selector is required. */
.bulk-org-popover .popover-item.popover-item-inline {
    display: inline-block;
    width: auto;
    flex: 0 0 auto;
    padding: 2px 8px;
    font-size: 12px;
}

.bulk-org-popover .popover-item.popover-item-danger {
    color: var(--danger);
}

.org-access-box {
    padding: 4px 10px 8px;
    font-size: 12px;
    color: var(--text-primary);
}

.org-access-row {
    padding: 2px 0;
}

.org-access-row.off {
    color: var(--text-muted);
}

.org-access-via {
    color: var(--text-muted);
}

.org-membership-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    font-size: 13px;
}

.org-membership-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.org-membership-row.is-stamm .org-membership-name {
    font-weight: 600;
}

.org-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 14px 0 4px;
    padding: 5px 8px 5px 10px;
    border-top: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
    border-radius: 6px;
}

.orgs-list .org-section-head:first-of-type {
    border-top: none;
}

.org-section-toggle {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
}

.org-section-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.org-section-toggle svg {
    transition: transform var(--transition-fast);
}

.org-section-head.collapsed .org-section-toggle svg {
    transform: rotate(-90deg);
}

.org-section-label {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.org-section-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.org-section-btn {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 2px 6px;
}

.org-section-btn:hover {
    color: var(--text-primary);
    border-color: var(--border);
}

.org-item-grouped {
    padding-left: 20px;
}

.org-empty-hint {
    padding: 4px 10px 6px 20px;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* Collapsed company: the section head doubles as the selectable entry. */
.org-section-collapsed {
    padding: 0 8px 0 4px;
}

.org-section-select {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 7px 6px 7px 6px;
    cursor: pointer;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
}

.org-section-select:hover {
    background: var(--bg-hover);
}

.org-section-select.active {
    background: var(--accent-subtle);
}

.org-section-select.active .org-section-label,
.org-section-select.active .org-item-count {
    color: var(--accent);
}

/* Grouped org-target pickers: company label/row + indented groups. */
.org-target-label {
    padding: 7px 10px 2px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.org-target-main {
    font-weight: 600;
}

/* Departments sit visibly nested under their company. The two-class
   selector is required: the popover's own `.popover-item { padding: … }`
   shorthand outranks a bare `.org-target-sub` and would reset the indent. */
.bulk-org-popover .popover-item.org-target-sub {
    padding-left: 30px;
}

.org-member-search {
    margin: 4px 10px 6px;
    width: calc(100% - 20px);
}

.org-member-candidates {
    max-height: 260px;
    overflow-y: auto;
}

/* SSO configs are a collapsed list of tenants (<details>); the flex column
   lives on the body so the summary row stays a normal disclosure line. */
.sso-config-card {
    border-top: 1px solid var(--border-subtle);
    margin-top: 12px;
    padding-top: 10px;
}

.sso-config-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
}

.org-sso-head {
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.org-sso-head:hover {
    color: var(--text-primary);
}

.org-sso-head-hint {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.org-sso-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--text-muted);
}

.org-sso-field input,
.org-sso-field select {
    width: 100%;
}

/* Mode switch between the shared vendor Entra app and a customer's own
   registration. A row, not the stacked .org-sso-field layout; the checkbox
   belongs beside its label. The block it toggles carries the plain `hidden`
   attribute and is deliberately left unstyled, so nothing overrides it. */
.org-sso-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}

.org-sso-check input {
    width: auto;
    margin: 0;
    flex: none;
}

.org-sso-redirect {
    font-size: 11px;
    word-break: break-all;
    border: 1px solid var(--border-subtle);
    padding: 4px 6px;
    border-radius: 4px;
}

.login-hint {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
    text-align: center;
}

.btn-sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.members-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.members-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.members-head-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.members-head-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.members-menu-btn {
    min-width: 34px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
    line-height: 1;
}

.members-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Name + e-mail in one cell; the table stays six columns wide, which fits a
   1280 px laptop beside the navigation pane without a horizontal scroll. */
.user-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* The address may break anywhere, so this floor keeps the table from
       shrinking the column to a few characters per line. */
    min-width: 200px;
}

.user-cell-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
}

/* Date and time may break onto two lines; the row is two lines tall anyway. */
/* ``td.``; the generic ``.admin-table td`` is more specific than a bare
   class and would keep these cells on one line. */
td.td-login {
    white-space: normal;
    min-width: 84px;
}

td.td-model {
    white-space: normal;
    overflow-wrap: anywhere;
}

.td-model .model-default {
    color: var(--text-muted);
}

.user-cell-email {
    font-size: 12px;
    color: var(--text-muted);
    /* Full address always: it wraps on a narrow screen instead of being cut
       (a 200 px cap truncated every address even on a 4K monitor). */
    white-space: normal;
    overflow-wrap: anywhere;
}

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

.online-dot.is-online {
    background: var(--success, #3ddc84);
    opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #3ddc84) 25%, transparent);
}

.members-count {
    font-size: 13px;
    color: var(--text-muted);
}

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

.members-search-box {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.members-search-box input {
    width: 100%;
    padding: 8px 32px 8px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    box-sizing: border-box;
}

.members-search-box input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.members-bulk {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-basis: 100%;
    padding: 6px 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.members-bulk.visible {
    visibility: visible;
    opacity: 1;
}

.members-bulk span {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    margin-right: 4px;
}

.members-bulk .btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
}

.import-users-result {
    max-height: 180px;
    overflow-y: auto;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Custom file picker; hides the native (grey) input, drives it from a
   styled button plus a live filename label. */
.file-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-picker input[type="file"] {
    display: none;
}

.file-picker .btn-sm {
    flex-shrink: 0;
}

.file-picker-name {
    font-size: 12.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.file-picker-name.has-file {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Input with trailing inline actions (e.g. password field: reveal + generate).
   align-items: stretch so the buttons match the input's height exactly. */
.input-with-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.input-with-actions > input {
    flex: 1;
    min-width: 0;
}

.input-with-actions .btn-sm {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.input-action-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    padding: 0;
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.input-action-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* Inline form error (create-user dialog etc.). */
.form-error {
    font-size: 12.5px;
    color: var(--danger);
    background: var(--danger-subtle);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    padding: 8px 12px;
    line-height: 1.4;
}

.members-empty {
    padding: 28px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.org-cell .org-none {
    color: var(--text-muted);
    font-style: italic;
}

/* Reduce navigation width and cell padding so the member table fits on laptops. */
@media (max-width: 1400px) {
    .users-layout {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .members-pane .admin-table th,
    .members-pane .admin-table td {
        padding-left: 7px;
        padding-right: 7px;
    }
}

@media (max-width: 860px) {
    .users-layout {
        grid-template-columns: 1fr;
    }

    .members-head-text {
        flex-basis: 100%;
    }

    .org-detail-grid {
        grid-template-columns: 1fr;
    }

    .orgs-pane {
        position: static;
        max-height: none;
    }

    .orgs-list {
        /* Stacked layout: cap the list so the members table below stays
           reachable without scrolling past every organisation first. */
        max-height: 40vh;
        max-height: 40dvh;
    }
}

/* Custom Checkbox */
.cb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    width: 18px;
    height: 18px;
}

.cb input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cb-box {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--text-muted);
    background: transparent;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cb-box::after {
    content: '';
    display: none;
    width: 4px;
    height: 8px;
    border: solid var(--on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

.cb input:checked+.cb-box {
    background: var(--accent);
    border-color: var(--accent);
}

.cb input:checked+.cb-box::after {
    display: block;
}

.cb input:focus-visible+.cb-box {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cb:hover .cb-box {
    border-color: var(--accent);
}

.th-cb,
.td-cb {
    width: 40px;
    text-align: center;
}

tr.row-selected {
    background: var(--accent-subtle) !important;
}

tr.row-deleting {
    opacity: 0.4;
    pointer-events: none;
    transition: max-height var(--transition-slow), opacity var(--transition-slow);
    overflow: hidden;
}

.badge-deleting {
    background: var(--text-muted);
    color: var(--bg-primary);
    font-style: italic;
}

/* Global Toast */
#toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    padding: 10px 18px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    max-width: 400px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateX(40px);
    cursor: default;
}

.toast-in {
    animation: toast-slide-in 0.25s ease forwards;
}

.toast-out {
    animation: toast-slide-out 0.2s ease forwards;
}

.toast-success {
    background: var(--success-subtle);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 20%, transparent);
}

.toast-error {
    background: var(--danger-subtle);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
}

.toast-info {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

@keyframes toast-slide-in {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* Admin utility classes */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* Org cell in user table */
td.org-cell {
    white-space: normal;
    vertical-align: middle;
}

.cm-section-label {
    font-weight: 600;
    margin-bottom: var(--space-sm);
    font-size: 13px;
}

/* Share toggles; horizontal pill row */
.cm-share-toggles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.cm-share-toggle {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}

.cm-share-toggle:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.cm-share-toggle.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 500;
}

.cm-share-detail {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
    transition: opacity var(--transition-fast);
}

.cm-share-search {
    width: 100%;
    padding: 7px 12px;
    font-size: 13px;
    margin-bottom: var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
}

.cm-share-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.cm-share-search::placeholder {
    color: var(--text-muted);
}

.cm-share-list {
    max-height: 280px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2px 16px;
    align-content: start;
}

.share-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.share-item:hover {
    background: var(--bg-hover);
}

.share-user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.share-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-user-email {
    font-size: 10px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

.share-placeholder {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    padding: var(--space-sm);
    grid-column: 1 / -1;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Attachments Bar (images + docs combined) */
.attachments-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 740px;
    margin: 0 auto 10px;
    justify-content: center;
}

.attachments-bar:not(:has(.attach-box)) {
    display: none;
}

.attachments-docs {
    display: contents;
}

/* File-count notification bubble; sits on the action button (chat: attach
   toolbar icon, CM: + add-file button). Notification-dot pattern: dezent,
   intuitive, no extra layout space. */
#toolbar-attach,
#cm-add-file-btn {
    position: relative;
}

.attach-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-color);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
    user-select: none;
    animation: attach-count-pop 180ms ease-out;
}

.attach-count[hidden] {
    display: none;
}

/* Halo matches whichever surface the button sits on, so the badge reads as a
   floating bubble rather than glued to the icon. */
#toolbar-attach .attach-count {
    box-shadow: 0 0 0 2px var(--bg-primary);
}

#cm-add-file-btn .attach-count {
    box-shadow: 0 0 0 2px var(--bg-secondary);
}

@keyframes attach-count-pop {
    from {
        transform: scale(0.6);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Unified attachment boxes (images + docs) */
.attachments-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.attach-box {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.attach-box:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* Image box */
.attach-box-image {
    background: var(--bg-secondary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attach-box-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* Document box */
.attach-box-doc {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 6px 7px;
    gap: 2px;
}

.attach-box-ext {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attach-box-preview {
    flex: 1;
    width: 100%;
    overflow: hidden;
    font-size: 6px;
    line-height: 1.4;
    color: var(--text-muted);
    opacity: 0.6;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.attach-box-preview:empty::before {
    content: 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod';
    opacity: 0.3;
}

.attach-box-name {
    font-size: 8px;
    color: var(--text-secondary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
}

/* Single X button used for both "cancel upload" and "remove uploaded file". */
.attach-box .attach-box-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: var(--on-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 15;
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

/* Always-visible affordance while user can act:
   - finished upload (has data-file-id) → must be visible without hover so
     the user can find the delete handle on touch + sees it at a glance
   - hover (any state)                  → fully opaque
   - uploading / error                  → must be obvious for cancel/dismiss */
.attach-box[data-file-id] .attach-box-remove {
    opacity: 0.7;
}

.attach-box:hover .attach-box-remove,
.attach-box.uploading .attach-box-remove,
.attach-box.error .attach-box-remove,
.attach-box[data-file-id]:hover .attach-box-remove {
    opacity: 1;
}

.attach-box .attach-box-remove:hover {
    background: var(--danger);
}

/* Uploading state */
.attach-box.migration-pending {
    opacity: 0.6;
}

.attach-box.migration-pending::after {
    content: '⏳';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 12px;
    z-index: 10;
}

.attach-box.uploading {
    opacity: 1;
}

.attach-box.uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border-radius: inherit;
    z-index: 10;
}

/* Upload progress ring; drives stroke-dashoffset from JS. */
.attach-box-progress {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    z-index: 11;
    pointer-events: none;
}

.attach-box-progress-ring-wrap {
    position: relative;
    width: 38px;
    height: 38px;
}

.attach-box-ring {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg);
}

.attach-box-ring .ring-track,
.attach-box-ring .ring-fill {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.attach-box-ring .ring-track {
    stroke: rgba(255, 255, 255, 0.22);
}

.attach-box-ring .ring-fill {
    stroke: var(--on-color);
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 250ms ease-out;
}

/* Indeterminate state used until the first real % arrives. */
.attach-box-ring.indeterminate .ring-fill {
    stroke-dasharray: 18 82;
    transition: none;
    animation: ringSpin 1.1s linear infinite;
}

@keyframes ringSpin {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.attach-box-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--on-color);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.attach-box-progress-eta {
    font-size: 9px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
    min-height: 9px;
    letter-spacing: 0.02em;
}

.attach-box.done::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    font-size: 26px;
    font-weight: 700;
    animation: checkPop 0.3s ease-out;
    z-index: 10;
}

@keyframes checkPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.attach-box.updated {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.attach-box.error {
    border-color: var(--danger);
    opacity: 0.6;
}

.attach-box.error::after {
    content: '\2717';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border-radius: inherit;
    display: flex;
    z-index: 10;
    align-items: center;
    justify-content: center;
    color: var(--danger);
    font-size: 26px;
    font-weight: 700;
}

/* Document preview overlay */
.doc-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    padding: 24px;
    backdrop-filter: blur(4px);
    animation: doc-preview-fade 160ms ease-out;
}

@keyframes doc-preview-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.doc-preview-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 920px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: doc-preview-pop 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes doc-preview-pop {
    from {
        transform: translateY(8px) scale(0.985);
        opacity: 0;
    }

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

.doc-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.doc-preview-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.doc-preview-close {
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.doc-preview-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.doc-preview-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.doc-preview-image {
    background: var(--img-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 50vh;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.doc-preview-image img {
    max-width: 100%;
    max-height: 50vh;
    object-fit: contain;
    display: block;
}

.doc-preview-text {
    padding: 20px 24px;
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-family: inherit;
}

.doc-preview-markdown {
    white-space: normal;
}

.doc-preview-markdown h1,
.doc-preview-markdown h2,
.doc-preview-markdown h3,
.doc-preview-markdown h4 {
    margin: 1em 0 0.5em;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.doc-preview-markdown h1:first-child,
.doc-preview-markdown h2:first-child,
.doc-preview-markdown h3:first-child {
    margin-top: 0;
}

.doc-preview-markdown p {
    margin: 0.6em 0;
    overflow-wrap: anywhere;
}

.doc-preview-markdown ul,
.doc-preview-markdown ol {
    padding-inline-start: 1.5em;
    margin: 0.6em 0;
}

.doc-preview-markdown li {
    margin: 0.25em 0;
    overflow-wrap: anywhere;
}

.doc-preview-markdown a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.doc-preview-markdown table {
    border-collapse: collapse;
    margin: 0.8em 0;
    font-size: 12px;
    width: 100%;
    table-layout: fixed;
}

.doc-preview-markdown th,
.doc-preview-markdown td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.doc-preview-markdown th {
    background: var(--bg-secondary);
    font-weight: 600;
}

.doc-preview-markdown pre {
    background: var(--bg-secondary);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    overflow-x: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Code-block wrappers inside the doc preview must wrap, not scroll */
.doc-preview-markdown .code-block-wrapper {
    margin: 10px 0;
    max-width: 100%;
}

.doc-preview-markdown .code-block-wrapper pre {
    overflow-x: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.doc-preview-markdown .code-block-wrapper pre code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .doc-preview-overlay {
        padding: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
    }

    .doc-preview-panel {
        max-height: calc(100vh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }

    .doc-preview-header {
        padding: 12px 14px;
    }

    .doc-preview-title {
        font-size: 13px;
    }

    .doc-preview-close {
        width: 36px;
        height: 36px;
        margin-right: -6px;
        font-size: 24px;
    }

    .doc-preview-text {
        padding: 14px 16px;
        font-size: 14px;
        line-height: 1.6;
    }

    .doc-preview-image,
    .doc-preview-image img {
        max-height: 38vh;
    }

    .doc-preview-markdown table {
        font-size: 11px;
    }

    .doc-preview-markdown th,
    .doc-preview-markdown td {
        padding: 4px 6px;
    }

    .doc-preview-markdown pre {
        font-size: 12px;
        padding: 8px 10px;
    }
}

/* View System */
.view-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 24px 32px;
    gap: 16px;
}

.view-panel .admin-card {
    max-width: 100%;
}

/* Admin Sidebar Nav */
.sidebar-admin-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
}

.admin-nav-back {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 4px;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-nav-back:hover {
    background: rgba(var(--overlay-rgb), 0.06);
    color: var(--text-primary);
}

.sidebar.collapsed .admin-nav-back span:not(svg) {
    display: none;
}

.admin-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.admin-nav-item:hover {
    background: rgba(var(--overlay-rgb), 0.07);
    color: var(--text-primary);
}

.admin-nav-item.active {
    background: var(--accent-subtle);
    color: var(--text-primary);
    font-weight: 600;
}

.admin-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.admin-nav-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Collapsed sidebar: hide admin nav text, show only icons */
.sidebar.collapsed .admin-nav-item {
    justify-content: center;
    padding: 8px;
}

.sidebar.collapsed .admin-nav-item span:not(.admin-nav-icon) {
    display: none;
}

.sidebar.collapsed .sidebar-admin-nav {
    padding: 0 4px;
}

.sidebar.collapsed .admin-nav-back {
    justify-content: center;
    padding: 8px;
}

.sidebar.collapsed .admin-nav-back span {
    display: none;
}


/* Model Editor View */
/* The header is sticky, so the scroll container must NOT carry a top padding:
   a sticky `top: 0` element sticks *below* the container's padding-top, leaving
   a transparent band at the very top where scrolling content bleeds through
   above the header. We zero the panel's top padding and move that breathing
   room onto the (opaque) header itself via padding-top; the visible controls
   stay put, but the header background now reaches the top edge and fully covers
   anything scrolling behind it. */
#view-model-editor {
    padding-top: 0;
}

.cm-editor-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 10;
    padding-top: 24px;
    padding-bottom: var(--space-sm);
}

.cm-editor-header h3 {
    margin: 0;
    font-size: 17px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-editor-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cm-editor-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 800px;
}

.cm-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.cm-card>label:first-child {
    margin-bottom: var(--space-sm);
    display: block;
}

.cm-card textarea {
    min-height: 200px;
    max-height: 60vh;
    width: 100%;
    resize: none;
}

/* System-prompt corner buttons: refine (sparkle) + dictation mic pinned
   in the textarea corner; while recording the shared #stt-overlay is borrowed
   in as a floating bar over the bottom. The recording rules key off the
   overlay's presence in the wrap; the DOM position set by app.js is the only
   state. */
.cm-sysprompt-wrap {
    position: relative;
}

.cm-sysprompt-mic,
.cm-sysprompt-fix {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: var(--bg-input);
}

.cm-sysprompt-fix {
    right: 44px;
}

/* Disabled === refine in flight (app.js disables it for exactly that call). */
.cm-sysprompt-fix:disabled svg {
    animation: spin 0.9s linear infinite;
}

/* The floating bar covers the corner buttons; also drop them from the tab order. */
.cm-sysprompt-wrap:has(.stt-overlay) .cm-sysprompt-mic,
.cm-sysprompt-wrap:has(.stt-overlay) .cm-sysprompt-fix {
    display: none;
}

.cm-sysprompt-wrap .stt-overlay {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    width: auto;
    max-width: none;
}

/* Daten weiterer Modelle (linked custom models as additional RAG sources) */
.cm-links-header {
    margin-bottom: var(--space-sm);
}

.cm-links-header label {
    display: block;
    margin-bottom: 4px;
}

.cm-links-help {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.cm-links-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cm-links-placeholder {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    padding: var(--space-sm) 0;
}

.cm-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.cm-link-item:hover {
    border-color: var(--accent);
}

.cm-link-info {
    min-width: 0;
    flex: 1;
}

.cm-link-name {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-link-meta {
    margin-top: 2px;
}

.cm-link-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-weight: 500;
}

.cm-link-badge-own {
    background: var(--accent-subtle);
    color: var(--accent);
}

.cm-link-badge-shared {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

[data-theme="light"] .cm-link-badge-shared {
    background: rgba(0, 0, 0, 0.04);
}

/* iOS-style toggle switch */
.cm-link-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

.cm-link-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cm-link-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast);
}

.cm-link-toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cm-link-toggle input:checked+.cm-link-toggle-slider {
    background: var(--accent);
}

.cm-link-toggle input:checked+.cm-link-toggle-slider::before {
    transform: translateX(16px);
}

.cm-link-toggle input:focus-visible+.cm-link-toggle-slider {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .view-panel {
        padding: 16px;
    }

    /* Keep the sticky-header padding in sync with the panel's tighter mobile
       padding (the #id rule already forces panel padding-top to 0). */
    .cm-editor-header {
        padding-top: 16px;
    }
}

/* Inline Confirm */
.inline-confirming {
    color: var(--danger) !important;
    font-weight: 600;
    white-space: nowrap;
}

.ic-label {
    margin-right: 4px;
}

.ic-yes,
.ic-no {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.ic-yes:hover {
    background: var(--success-subtle);
    color: var(--success);
}

.ic-no:hover {
    background: var(--danger-subtle);
    color: var(--danger);
}

/* Bottom-sheet confirmation */
.bs-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: var(--z-sheet);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.bs-backdrop.open {
    opacity: 1;
}

.bs-backdrop.closing {
    opacity: 0;
    pointer-events: none;
}

.bs-sheet {
    width: 100%;
    max-width: 540px;
    background: var(--bg-secondary);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    border: 1px solid var(--border);
    border-bottom: none;
    box-shadow: var(--shadow-lg);
    padding: 8px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(100%);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.bs-backdrop.open .bs-sheet {
    transform: translateY(0);
}

.bs-backdrop.closing .bs-sheet {
    transform: translateY(100%);
}

.bs-handle {
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border);
    margin: 8px auto 4px;
    flex-shrink: 0;
}

.bs-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin: 4px 0 0;
}

.bs-message {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 0 8px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.bs-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.bs-actions button {
    min-height: 50px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.bs-actions .bs-confirm {
    background: var(--accent);
    color: var(--on-accent);
}

.bs-actions .bs-confirm.danger {
    background: var(--danger);
    color: var(--on-color);
}

.bs-actions .bs-confirm:hover,
.bs-actions .bs-confirm:active {
    filter: brightness(1.05);
}

.bs-actions .bs-cancel {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border);
}

.bs-actions .bs-cancel:hover,
.bs-actions .bs-cancel:active {
    background: rgba(var(--overlay-rgb), 0.06);
}

@media (min-width: 769px) {
    .bs-backdrop {
        align-items: center;
    }

    .bs-sheet {
        border-radius: var(--radius-xl);
        border-bottom: 1px solid var(--border);
        max-width: 420px;
        margin: 20px;
        padding-bottom: 16px;
    }

    .bs-handle {
        display: none;
    }
}

/* Impersonation */

#impersonation-banner {
    padding: 0 16px 8px;
}

#impersonation-banner button {
    width: 100%;
    background: none;
    color: var(--warning);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

#impersonation-banner button:hover {
    background: var(--warning);
    color: #000;
}

/* Deleted-custom model notice (above chat history) */

.model-note-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--warning-subtle);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.model-note-banner::before {
    content: '\24d8';
    /* ⓘ */
    color: var(--warning);
    font-size: 15px;
    line-height: 1.3;
    flex-shrink: 0;
}

.model-note-text {
    flex: 1;
}

.model-note-dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.model-note-dismiss:hover {
    color: var(--text-secondary);
}

/* Delete Spinner Overlay */

#delete-spinner-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-floating-menu);
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-spinner-box {
    background: var(--bg-primary);
    border-radius: var(--radius);
    padding: 32px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-lg);
}

.delete-spinner-box p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Migration */

.migration-config {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.migration-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.migration-card-header {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.migration-card-body {
    padding: 16px;
}

.migration-log {
    max-height: 500px;
    overflow-y: auto;
    font-size: 13px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    margin-bottom: 12px;
}

.migration-log-item {
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.migration-log-item.done {
    color: var(--success);
}

.migration-log-item.active {
    color: var(--text-primary);
}

.migration-log-item.error {
    color: var(--danger);
}

.mig-icon {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.migration-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.migration-progress {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.migration-progress-bar {
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: var(--radius-sm);
    transition: width var(--transition-slow);
}

.migration-progress-text {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 120px;
}

.migration-actions {
    display: flex;
    gap: 8px;
}

/*  Model row meta-line (Context window + capabilities under the model name) */
.model-name-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.model-meta {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: monospace;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.model-meta-unknown {
    color: var(--warning);
    cursor: help;
}

/* A model the provider stopped advertising: flagged, removable only via the
   explicit „Entfernen" (badge + button reuse .badge-pending / .action-btn). */
.model-row-unavailable .model-name-cell,
.model-row-unavailable .display-name-cell {
    color: var(--text-muted);
}

.model-unavailable-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.model-unavailable-badge {
    white-space: nowrap;
    cursor: help;
}

.migration-policy {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-bottom: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.migration-policy-icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1.35;
    color: var(--accent);
}

.migration-policy strong {
    color: var(--text-primary);
    font-weight: 600;
}

.migration-audit {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--warning-subtle, rgba(251, 191, 36, 0.10));
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius);
    font-size: 13px;
}

.migration-audit-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.migration-audit-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
    max-height: 180px;
    overflow-y: auto;
}

.migration-audit-list li {
    font-family: monospace;
    font-size: 12px;
    word-break: break-all;
}

@media (max-width: 640px) {
    .migration-config {
        grid-template-columns: 1fr;
    }
}


/* Sidebar Folders */
.sidebar-folders {
    display: flex;
    flex-direction: column;
    /* Shrinkable on purpose: the drag handle below it must never be pushed out
       of #sidebar-body (see the folder/chat divider block further down). */
    flex: 0 1 auto;
    min-height: 60px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.folder-list {
    display: flex;
    flex-direction: column;
    padding: 2px 0 4px;
}

.folder-list:empty {
    display: none;
}

/* The folder pane's height is the DESIRED size (flex-basis), not a fixed one.
   `--folders-height` is what the user dragged to; flex-shrink then gives back
   whatever does not fit inside #sidebar-body, so the divider below can never
   be pushed behind the footer or off the screen. The floor is min-height, and
   .sidebar-scroll's own floor keeps a strip of chat list visible. Bounding it
   with a vh max-height instead was the bug: the pane lives in the body, not in
   the viewport, and the body is 190-210px shorter. */
.sidebar-folders:has(.folder-list:not(:empty)) {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 4px;
    flex-basis: var(--folders-height, 40vh);
    min-height: 80px;
}

.sidebar-folders-resize {
    height: 4px;
    cursor: row-resize;
    background: transparent;
    flex-shrink: 0;
    transition: background var(--transition-base);
    touch-action: none;
}

.sidebar-folders-resize:hover {
    background: rgba(var(--overlay-rgb), 0.08);
}

.sidebar-folders-resize.active,
.sidebar-folders-resize:focus-visible {
    background: var(--accent);
    outline: none;
}

.sidebar-folders:not(:has(.folder-list:not(:empty)))+.sidebar-folders-resize {
    display: none;
}

.sidebar.collapsed .sidebar-folders-resize {
    display: none;
}

.folder-safezone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 6px 8px;
    padding: 7px 12px;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.65;
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.folder-safezone:hover {
    opacity: 1;
    border-color: var(--border);
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.04);
}

body.dnd-active.dnd-chat .folder-safezone {
    opacity: 1;
    border-width: 1.5px;
    border-color: var(--border);
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text-primary);
}

.folder-safezone.drop-target-active {
    border-style: solid;
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
    opacity: 1;
}

.sidebar.collapsed .folder-safezone {
    display: none;
}

.folder-item {
    display: flex;
    flex-direction: column;
    margin: 1px 8px;
    border-radius: var(--radius);
    transition: background var(--transition-fast);
}

.folder-item.drop-target-active {
    background: var(--accent-subtle);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.folder-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius);
    user-select: none;
    position: relative;
}

/* Feedback flash on a freshly created folder so it isn't missed at the
   bottom of the list. */
.folder-item.folder-created > .folder-header {
    animation: folder-created-flash 1.2s ease-out;
}

@keyframes folder-created-flash {
    0% { background: var(--accent-subtle); }
    100% { background: transparent; }
}

.folder-header:hover {
    background: rgba(var(--overlay-rgb), 0.05);
    color: var(--text-primary);
}

.folder-chevron,
.shared-chevron {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.folder-item.collapsed .folder-chevron,
.sidebar-shared.collapsed .shared-chevron {
    transform: rotate(-90deg);
}

.folder-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-name.inline-edit-input,
input.inline-edit-input {
    flex: 1;
    padding: 2px 6px;
    font-size: 13px;
    font-weight: 600;
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}

/* Mobile kebab trigger; menu itself is .row-menu, portaled to <body> */
.folder-menu-btn {
    display: none;
}

.folder-chats {
    display: flex;
    flex-direction: column;
    padding-left: 14px;
    padding-bottom: 2px;
}

.folder-item.collapsed .folder-chats {
    display: none;
}

/* Subfolders (one nesting level): indented under their parent and hidden when the
   parent collapses. */
.folder-subfolders {
    display: flex;
    flex-direction: column;
}

.folder-item.collapsed .folder-subfolders {
    display: none;
}

.folder-subfolder {
    margin-left: 14px;
}

.folder-chats .chat-item {
    margin: 1px 4px;
    font-size: 12.5px;
    padding: 6px 10px;
}

/* Empty-folder drop hint; teaches that chats can be dragged into folders. */
.folder-chats:empty::before {
    content: 'Chats hierher ziehen';
    display: block;
    margin: 2px 10px 6px 0;
    padding: 6px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

/* Folder reorder uses live FLIP swap (see app.js); no slot elements needed. */
body.dnd-active.dnd-folder .folder-item.drop-target-active {
    outline: none;
    background: transparent;
}

/* DnD Ghost & Chip */
.drag-ghost {
    position: fixed;
    z-index: var(--z-floating-menu);
    pointer-events: none;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    opacity: 0.95;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drag-chip {
    position: fixed;
    z-index: var(--z-overlay);
    pointer-events: none;
    background: var(--accent);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drag-source {
    opacity: 0.4;
}

body.dnd-active {
    user-select: none;
    -webkit-user-select: none;
}

[data-draggable] {
    touch-action: pan-y;
}

body.dnd-active [data-draggable] {
    touch-action: none;
}

body.dnd-active,
body.dnd-active * {
    cursor: grabbing !important;
}

@media (max-width: 768px) {
    .folder-header {
        position: relative;
        padding-right: 40px;
    }

    .folder-chats .chat-item {
        margin: 1px 0 1px 8px;
    }

    .sidebar-scroll {
        scrollbar-width: none;
    }

    .sidebar-scroll::-webkit-scrollbar {
        display: none;
    }

    .folder-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        font-size: 18px;
        color: var(--text-muted);
        border-radius: var(--radius);
        background: transparent;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .folder-menu-btn:hover,
    .folder-menu-btn[aria-expanded="true"] {
        color: var(--text-primary);
        background: rgba(var(--overlay-rgb), 0.08);
    }
}

/* Desktop: the folder menu (Umbenennen / Unterordner erstellen / Löschen) lives
   in the ⋮ kebab; surface it on hover, otherwise subfolder creation is
   unreachable on desktop (the kebab is mobile-only by default). */
@media (min-width: 769px) {
    .folder-header:hover .folder-menu-btn,
    .folder-menu-btn[aria-expanded="true"] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px 6px;
        font-size: 16px;
        line-height: 1;
        color: var(--text-muted);
        border-radius: var(--radius-sm);
    }

    .folder-menu-btn:hover {
        color: var(--text-primary);
        background: rgba(var(--overlay-rgb), 0.08);
    }
}

/* Custom tooltips */
/* `title="..."` is migrated to `data-tooltip="..."` at runtime (see app.js).
   The actual tooltip is rendered through the shared `.hover-info-popover`
   (position:fixed, portaled to <body>) so it can never be clipped by parent
   overflow or pushed off-screen at the viewport edge; that was the failure
   mode of the previous `[data-tooltip]::after` approach. */

/* Vision toggle */

/* Inline-image vision-off marker (overlay on user-message thumbnails) */
.msg-image-vision-off {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.msg-image-vision-off svg {
    width: 14px;
    height: 14px;
}

/* Custom-model editor: vision default row */
.cm-vision-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.cm-vision-text {
    flex: 1 1 240px;
    min-width: 0;
}

.cm-vision-text label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.cm-vision-help {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

.cm-vision-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    width: auto;
    height: auto;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
}

.cm-vision-toggle:not(.active) {
    opacity: 0.55;
}

.cm-vision-toggle:not(.active):hover {
    opacity: 0.85;
}

/* Toolbar vision toggle: dimmed when off, full color when on (the .active style is
   already provided by .toolbar-btn.active above; we only add the off state). */
#toolbar-vision-toggle:not(.active) {
    opacity: 0.45;
}

#toolbar-vision-toggle:not(.active):hover {
    opacity: 0.75;
}

/* Queued upload boxes */
/* Pre-rendered boxes that are waiting their turn behind an active upload. Visible
   so the user sees the whole batch upfront, but visibly inactive. */
.attach-box.queued {
    opacity: 0.45;
    filter: saturate(0.75);
}

.attach-box.queued::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg,
            transparent 0,
            transparent 6px,
            rgba(var(--overlay-rgb, 0, 0, 0), 0.06) 6px,
            rgba(var(--overlay-rgb, 0, 0, 0), 0.06) 12px);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* Admin-Mode sidebar: hide every chat-side surface so only the admin nav
   (+ brand header + user footer) remains. One source of truth; adding a
   new chat section is free; it inherits the hide. */
.sidebar.admin-mode .sidebar-actions,
.sidebar.admin-mode .sidebar-search-wrap,
.sidebar.admin-mode .sidebar-body,
.sidebar.admin-mode .sidebar-folders-resize,
.sidebar.admin-mode .sidebar-search-takeover {
    display: none !important;
}

.sidebar.admin-mode.settings-active .sidebar-admin-nav {
    display: none !important;
}

/* Sidebar body wrapper + Takeover panels`#sidebar-body` holds everything between the search box and the footer
   (pinned section, folders, chat list). When the user opens search or the
   settings panel, a `.sidebar-takeover` slides in via [hidden] toggling and
   the body's display is suppressed by a state class on the sidebar root. */
.sidebar-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.sidebar.search-active .sidebar-body,
.sidebar.settings-active .sidebar-body {
    display: none;
}

.sidebar.search-active .sidebar-folders-resize,
.sidebar.settings-active .sidebar-folders-resize {
    display: none;
}

.sidebar.settings-active .sidebar-search-wrap {
    display: none;
}

.sidebar.settings-active .sidebar-actions {
    display: none;
}

.sidebar-takeover {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--bg-sidebar);
    animation: takeoverFadeIn 140ms ease-out;
}

.sidebar-takeover[hidden] {
    display: none !important;
}

@keyframes takeoverFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

.sidebar-takeover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 6px 14px;
    height: 40px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-subtle);
}

.sidebar-takeover-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.sidebar-takeover-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.sidebar-takeover-close:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.07);
}

/* Search-takeover-specific: results list fills remaining space, soft scrollbar. */
.sidebar-search-takeover .sidebar-search-results {
    margin-top: 0;
    max-height: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 6px 6px 12px;
    overscroll-behavior: contain;
}

.sidebar-search-takeover .sidebar-search-results::-webkit-scrollbar {
    width: 12px;
}

.sidebar-search-takeover .sidebar-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-search-takeover .sidebar-search-results::-webkit-scrollbar-thumb {
    background: rgba(var(--overlay-rgb), 0.15);
    border-radius: var(--radius-sm);
}

.sidebar-search-takeover .sidebar-search-results::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--overlay-rgb), 0.25);
}

.sidebar-search-takeover .search-result-item {
    padding: 10px 14px;
    border-radius: var(--radius);
    border-bottom: none;
    margin-bottom: 2px;
}

.sidebar-search-takeover .search-result-item:hover {
    background: rgba(var(--overlay-rgb), 0.06);
}

.sidebar-search-takeover .search-result-title {
    font-size: 13px;
}

.sidebar-search-takeover .search-result-snippet {
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.4;
    max-height: 2.8em;
}

/* Pinned chats section (top of sidebar body) */
.sidebar-pinned {
    border-bottom: 1px solid var(--border-subtle);
    padding: 6px 0 8px;
    /* Shrinkable for the same reason as .sidebar-folders; pinned + shared +
       folders at their vh caps together overflow a short #sidebar-body and
       shove the folder divider out of reach. */
    flex: 0 1 auto;
    min-height: 44px;
    max-height: 28vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar-pinned::-webkit-scrollbar {
    width: 12px;
}

.sidebar-pinned::-webkit-scrollbar-thumb {
    background: rgba(var(--overlay-rgb), 0.12);
    border-radius: var(--radius-sm);
}

.sidebar-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.sidebar-section-label svg {
    color: var(--purple);
    opacity: 0.8;
}

.sidebar-pinned-list {
    padding: 0 0 2px;
}

/* incoming shares; incoming shares section + read only bar */
.sidebar-shared {
    border-bottom: 1px solid var(--border-subtle);
    padding: 6px 0 8px;
    /* Shrinkable for the same reason as .sidebar-folders; pinned + shared +
       folders at their vh caps together overflow a short #sidebar-body and
       shove the folder divider out of reach. */
    flex: 0 1 auto;
    min-height: 44px;
    max-height: 26vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar-shared::-webkit-scrollbar {
    width: 12px;
}

.sidebar-shared::-webkit-scrollbar-thumb {
    background: rgba(var(--overlay-rgb), 0.12);
    border-radius: var(--radius-sm);
}

/* Calm ambient unread count on the section label. */
.shared-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--purple);
    border-radius: 999px;
    letter-spacing: 0;
    text-transform: none;
}

/* `display:inline-flex` above would otherwise override the `hidden` attribute. */
.shared-badge[hidden] {
    display: none;
}

.sidebar-shared-list {
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shared-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.shared-item:hover {
    background: rgba(var(--overlay-rgb), 0.08);
}

.shared-item.active {
    background: color-mix(in srgb, var(--purple) 14%, transparent);
}

.shared-item-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.shared-item-title {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shared-item.unread .shared-item-title {
    font-weight: 600;
}

.shared-item-meta {
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shared-item-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.shared-tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    color: var(--accent);
    background: var(--accent-subtle);
}

.shared-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--purple);
    flex-shrink: 0;
}

/* The section label doubles as the collapse toggle for the whole block. */
#shared-section-toggle {
    cursor: pointer;
    user-select: none;
}

#shared-section-toggle:hover {
    color: var(--text-secondary);
}

/* Base look + collapsed rotation are shared with .folder-chevron above. */
.shared-chevron {
    margin-left: auto;
}

/* The chevron is a control, not a section icon; keep it out of the purple. */
.sidebar-section-label .shared-chevron svg {
    color: var(--text-muted);
    opacity: 1;
}

.sidebar-shared.collapsed .sidebar-shared-list {
    display: none;
}

/* Row kebab (Duplizieren / Ausblenden): hover-revealed on desktop, always
   visible on touch; same contract as the folder kebab. */
.shared-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    font-size: 16px;
    line-height: 1;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.shared-item:hover .shared-menu-btn,
.shared-menu-btn[aria-expanded="true"] {
    display: flex;
}

@media (max-width: 768px) {
    .shared-menu-btn {
        display: flex;
    }
}

.shared-menu-btn:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.08);
}

/* A share the recipient hid; only rendered while the reveal toggle is open. */
.shared-item.is-hidden {
    opacity: 0.65;
}

.shared-item.is-hidden .shared-item-title {
    color: var(--text-muted);
}

.shared-hidden-toggle {
    padding: 5px 8px;
    font-size: 11px;
    font-family: inherit;
    text-align: left;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.shared-hidden-toggle:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.06);
}

/* Share entry point: a small icon, but accent-coloured so it stands out from
   the muted grey toolbar glyphs (it's a distinct action, not a toggle). */
#toolbar-share {
    color: var(--accent);
}

#toolbar-share:hover {
    color: var(--accent);
    background: var(--accent-subtle);
}

/* Read only bar swaps in for the composer on a shared chat I don't own.
   Deliberately slim; a single muted line, not a card. */
.input-area.readonly #input-row,
.input-area.readonly #input-toolbar,
.input-area.readonly #attachments-bar {
    display: none;
}

.chat-readonly-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 740px;
    margin: 0 auto;
    padding: 6px 6px 6px 12px;
}

/* `display:flex` above would otherwise override the `hidden` attribute; the
   read only bar must stay invisible on owned chats. */
.chat-readonly-bar[hidden] {
    display: none;
}

.chat-readonly-info {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-muted);
    min-width: 0;
}

.chat-readonly-info svg {
    opacity: 0.75;
    flex-shrink: 0;
}

.chat-readonly-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chat-readonly-duplicate {
    flex-shrink: 0;
}

/* Pin/unpin actions in normal chat-item action row */
.chat-item-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.chat-item-pin svg {
    width: 12px;
    height: 12px;
}

.chat-item-pin:hover {
    color: var(--purple);
    background: rgba(var(--overlay-rgb), 0.08);
}

.chat-item-pin.pinned {
    color: var(--purple);
}

.chat-item-pin.pinned:hover {
    color: var(--purple);
    background: color-mix(in srgb, var(--purple) 12%, transparent);
}

.chat-item-export:hover {
    color: var(--purple) !important;
    background: rgba(var(--overlay-rgb), 0.08) !important;
}

/* Settings (user) takeover panel */
.sidebar-settings-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Outer breathing room so the card stack never touches the sidebar edges. */
    padding: 14px 12px 24px;
}

.sidebar-settings-body::-webkit-scrollbar {
    width: 12px;
}

.sidebar-settings-body::-webkit-scrollbar-thumb {
    background: rgba(var(--overlay-rgb), 0.15);
    border-radius: var(--radius-sm);
}

/* Section card; subtle background + internal padding so labels never sit
   flush against the sidebar edge. Removes the "everything-glued-to-the-rail"
   feel of the previous flat layout. */
.settings-section {
    background: color-mix(in srgb, var(--bg-elevated) 50%, transparent);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 14px 14px 12px;
    margin-bottom: 10px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.settings-section-help {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: -4px 0 10px;
}

.settings-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.settings-shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.settings-shortcut-keys {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.settings-shortcut-keys kbd {
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 11px;
    line-height: 1.6;
}

.settings-textarea {
    width: 100%;
    min-height: 90px;
    max-height: 240px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    resize: vertical;
    font-family: inherit;
    line-height: 1.45;
}

.settings-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
    outline: none;
}

.settings-pi-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0 12px;
}

.settings-inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

/* The switch keeps its 36 px track even in a 200 px sidebar; without this it
   shrinks into a circle as soon as the label wraps onto two lines. */
.settings-inline-toggle .toggle {
    flex-shrink: 0;
}

.settings-inline-toggle-text {
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.3;
}

/* Standalone toggle row in the display settings (below the theme button). */
.settings-sources-toggle {
    display: flex;
    margin: 10px 2px 8px;
}

.settings-pi-counter {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.settings-section-cta {
    width: 100%;
    margin-top: 8px;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    text-align: left;
}

.settings-row+.settings-row {
    margin-top: 2px;
}

.settings-row:hover {
    background: rgba(var(--overlay-rgb), 0.07);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.settings-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.settings-row-label {
    flex: 1;
}

.settings-row-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.6;
}

.settings-row:hover .settings-row-chevron {
    opacity: 1;
    transform: translateX(2px);
    transition: transform var(--transition-fast);
}

.settings-row-danger {
    color: var(--danger);
}

.settings-row-danger:hover {
    background: var(--danger-subtle);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.settings-row-danger .settings-row-icon {
    color: var(--danger);
    opacity: 0.9;
}

/* Collapsible password section inside the profile block */
.settings-details {
    margin: 6px 0 4px;
    border-top: 1px dashed var(--border-subtle);
    padding-top: 8px;
}

.settings-details>summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

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

.settings-details>summary::before {
    content: '▸';
    font-size: 9px;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
    display: inline-block;
}

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

.settings-details>summary:hover {
    color: var(--text-primary);
}

.settings-details>summary:hover::before {
    color: var(--text-primary);
}

/* Tighter form-group inside settings panel */
.sidebar-settings-body .form-group-sm {
    margin-bottom: 8px;
}

.sidebar-settings-body .form-group-sm label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 3px;
    font-weight: 500;
}

.sidebar-settings-body .form-group-sm input {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.sidebar-settings-body .form-group-sm input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.sidebar-settings-body .form-group-sm input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
    outline: none;
}

/* Updated user-info-btn: cog hint + cleaner spacing */
.user-info-btn {
    /* override base; single flex row with cog at the end */
    gap: 10px;
}

.user-info-btn .user-info-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-weight: 500;
}

.user-info-cog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--text-muted);
    opacity: 0.6;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.user-info-btn:hover .user-info-cog {
    opacity: 1;
    color: var(--text-primary);
}

.sidebar.collapsed .user-info-cog {
    display: none;
}

.sidebar.collapsed .user-info-text {
    display: none;
}

/* Mobile: cog visibility */
@media (max-width: 768px) {
    .user-info-cog {
        opacity: 0.85;
    }
}

/* Model Picker overlay (full chat-area panel with 4 columns) */
.model-picker-overlay {
    position: absolute;
    top: var(--main-header-height, 52px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-view-overlay);
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    animation: modelPickerIn 140ms ease-out;
}

.model-picker-overlay[hidden] {
    display: none !important;
}

@keyframes modelPickerIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

.model-picker-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    background: var(--bg-primary);
}

.model-picker-search-wrap {
    position: relative;
    flex: 1;
    max-width: 480px;
}

.model-picker-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.model-picker-search {
    width: 100%;
    padding: 9px 12px 9px 32px;
    font-size: 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
}

.model-picker-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
    outline: none;
}

.model-picker-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: all var(--transition-fast);
    margin-left: auto;
}

.model-picker-close:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.07);
}

.model-picker-columns {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border-subtle);
    overflow: hidden;
    min-height: 0;
}

.model-picker-column {
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.model-picker-column-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 16px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.model-picker-column[data-column="favorites"] .model-picker-column-header svg {
    color: var(--purple);
    opacity: 0.85;
}

.model-picker-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 6px 14px;
}

.model-picker-list::-webkit-scrollbar {
    width: 12px;
}

.model-picker-list::-webkit-scrollbar-thumb {
    background: rgba(var(--overlay-rgb), 0.15);
    border-radius: var(--radius-sm);
}

.model-picker-list::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--overlay-rgb), 0.25);
}

.model-picker-empty {
    padding: 18px 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.model-picker-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    font-size: 13px;
    color: var(--text-primary);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.model-picker-item:hover {
    background: rgba(var(--overlay-rgb), 0.06);
}

.model-picker-item.in-use {
    background: var(--accent-subtle);
    color: var(--text-primary);
}

.model-picker-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-picker-item-sub {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 1px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pills on a picker item: the org profile's pre-selected standard, and a
   model the provider currently doesn't advertise (item stays selectable). */
.model-picker-item-orgdefault,
.model-picker-item-unavailable {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 600;
    vertical-align: 1px;
}

.model-picker-item-orgdefault {
    background: var(--accent-subtle);
    color: var(--accent);
}

.model-picker-item-unavailable {
    background: var(--warning-subtle);
    color: var(--warning);
    cursor: help;
}

.model-picker-item.unavailable > .model-picker-item-name {
    color: var(--text-muted);
}

.model-picker-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.model-picker-item-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.model-picker-item-actions button svg {
    width: 13px;
    height: 13px;
}

.model-picker-item-actions button:hover {
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.08);
}

.model-picker-item-actions .model-picker-info:hover {
    color: var(--accent);
}

.model-picker-item-actions .model-picker-fav.is-fav {
    color: var(--purple);
    opacity: 1;
}

.model-picker-item-actions .model-picker-fav {
    opacity: 0.4;
}

.model-picker-item:hover .model-picker-item-actions .model-picker-fav {
    opacity: 0.75;
}

.model-picker-item-actions .model-picker-delete:hover {
    color: var(--danger);
    background: var(--danger-subtle);
}

.model-picker-item-actions .model-picker-default {
    opacity: 0.4;
    color: var(--text-muted);
}

.model-picker-item:hover .model-picker-item-actions .model-picker-default {
    opacity: 0.75;
}

.model-picker-item-actions .model-picker-default.is-default {
    color: var(--accent);
    opacity: 1;
}

.model-picker-item-actions .model-picker-default:hover {
    color: var(--accent);
    background: var(--accent-subtle);
}

/* Default model is visualised by the filled house icon alone; no text pill,
   otherwise the row reads "name STANDARD <icons>" which feels noisy. */

/* Mobile model picker: stack columns, allow vertical scroll */
@media (max-width: 768px) {
    .model-picker-header {
        padding: 10px 12px;
        flex-wrap: wrap;
    }

    .model-picker-columns {
        grid-template-columns: 1fr;
        grid-auto-rows: min-content;
        overflow-y: auto;
        gap: 0;
    }

    .model-picker-column {
        border-bottom: 1px solid var(--border-subtle);
    }

    .model-picker-column:last-child {
        border-bottom: none;
    }

    .model-picker-list {
        max-height: none;
        padding: 4px 8px 8px;
    }
}

/* Global hover-info popover (used by model picker info icon)
   ----------------------------------------------------------------------
   Single instance lives at root of <main>; JS positions it via inline
   left/top so it can never be clipped by overflow:hidden parents. */
.hover-info-popover {
    position: fixed;
    z-index: var(--z-floating-menu);
    max-width: 320px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 12.5px;
    line-height: 1.45;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    white-space: pre-wrap;
    word-break: break-word;
}

.hover-info-popover[hidden] {
    display: none !important;
}

/* Admin: Info button in models table */
.admin-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.admin-info-btn:hover {
    color: var(--accent);
    background: var(--accent-subtle);
}

.admin-info-btn.has-info {
    color: var(--accent);
}

.admin-info-btn svg {
    width: 14px;
    height: 14px;
}

#modelinfo-textarea {
    min-height: 140px;
    max-height: 360px;
}

#modelinfo-counter {
    margin-top: 6px;
    text-align: right;
}

/* Mobile: search/settings takeover should fill the whole sidebar */
@media (max-width: 768px) {
    .sidebar-takeover-header {
        height: 44px;
        padding: 6px 8px 6px 14px;
    }

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

    .settings-section {
        padding: 12px 12px 10px;
        margin-bottom: 8px;
    }

    .sidebar-pinned {
        max-height: 24vh;
    }
}

/* Image-generation mode: tint the send button so the active (sticky) mode is
   impossible to miss alongside the "Bild beschreiben…" placeholder. */
.send-btn.img-mode {
    background: var(--purple);
}

.send-btn.img-mode:hover {
    background: var(--purple-light);
}

/* Website-Wissen (crawl) card in the custom model editor */
.cm-crawl-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.cm-crawl-row .form-input {
    flex: 1;
    min-width: 0;
}
.cm-crawl-status {
    margin-top: 8px;
    font-size: 0.85em;
    color: var(--text-muted);
    min-height: 1.2em;
    word-break: break-all;
}

/* Honour the OS "reduce motion" setting; neutralise animations and
   transitions for users who are sensitive to movement. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}
/* Mobile ergonomics (WCAG 2.5.8: ≥24 px targets; house minimum 40 px) */
@media (max-width: 768px) {
    .chat-item-menu-btn,
    #model-add-btn,
    #send-btn,
    .model-picker-fav,
    .model-picker-edit,
    .model-picker-copy,
    .model-picker-delete,
    .model-picker-default {
        min-width: 40px;
        min-height: 40px;
    }

    .chat-item {
        min-height: 44px;
    }

    #new-chat-btn,
    .admin-nav-item,
    #login-submit,
    .sidebar-search-input {
        min-height: 40px;
    }

    /* One scrollable row instead of an L-shaped two-row wrap. */
    .input-toolbar,
    .input-toolbar-left,
    .input-toolbar-right {
        flex-wrap: nowrap;
    }

    .input-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .input-toolbar::-webkit-scrollbar {
        display: none;
    }

    /* The sticky user bar at the bottom must not cover the last settings row. */
    .sidebar-settings-body {
        padding-bottom: 72px;
    }
}


/* Backup & Restore + maintenance overlay */
#maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.maintenance-box {
    max-width: 420px;
    padding: 32px;
    text-align: center;
}

.maintenance-box .spinner {
    margin: 0 auto 20px;
}

.maintenance-box h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

.maintenance-box p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.bk-latest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.bk-muted {
    font-size: 13px;
    color: var(--text-secondary);
}

.bk-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 16px;
    margin-bottom: 16px;
    font-size: 13px;
}

.bk-summary div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bk-summary span {
    color: var(--text-secondary);
    font-size: 12px;
}

.bk-warning {
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    background: var(--danger-subtle, rgba(239, 68, 68, 0.08));
    font-size: 13px;
    line-height: 1.5;
}

.bk-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: 600;
}

.bk-check input {
    width: auto;
    margin: 0;
}

/* Data source overview and connection setup. */
#integrations-content { width: 100%; max-width: 1080px; margin: 0 auto; padding-bottom: 32px; }
#integrations-content [hidden] { display: none !important; }
#integrations-content .btn-outline { border-color: var(--border); color: var(--text-primary); }
.integration-page-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 26px; }
.integration-eyebrow { font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: .7px; text-transform: uppercase; margin-bottom: 6px; }
.integration-page-header h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.6px; font-weight: 650; }
.integration-page-header p { color: var(--text-secondary); font-size: 14px; margin-top: 9px; max-width: 480px; }
.integration-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.integration-header-actions .btn { white-space: nowrap; }
.integration-chat-hint { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--accent-subtle); border-radius: var(--radius-lg); background: var(--accent-subtle); margin-bottom: 34px; }
.integration-chat-hint > svg { color: var(--accent); flex-shrink: 0; }
.integration-chat-hint > div { flex: 1; min-width: 0; }
.integration-chat-hint strong { font-size: 13px; font-weight: 600; }
.integration-chat-hint p { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.integration-chat-hint .btn { white-space: nowrap; color: var(--accent); }
.integration-section + .integration-section { margin-top: 30px; }
.integration-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.integration-section-heading h3 { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }
.integration-section-heading h3 > span, .integration-tools summary > span { font-size: 11px; color: var(--text-secondary); padding: 1px 7px; border-radius: 6px; background: var(--bg-hover); font-weight: 500; }
.integration-section-heading p { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.integration-card { min-width: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.integration-card-heading { display: flex; align-items: center; gap: 12px; }
.integration-card-heading > div { min-width: 0; }
.integration-card-heading h4 { font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.integration-card-heading p { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; margin-top: 3px; }
.integration-service-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 44px; width: 44px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-primary); color: var(--accent); }
.integration-card-state { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.integration-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--bg-hover); }
.integration-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.integration-status[data-state="active"] { color: var(--success); background: var(--success-subtle); }
.integration-status[data-state="pending"] { color: var(--warning); background: var(--warning-subtle); }
.integration-status[data-state="error"] { color: var(--danger); background: var(--danger-subtle); }
.integration-tool-count { font-size: 11px; color: var(--text-muted); }
.integration-address { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; margin-top: 10px; }
.integration-card-actions:not(:empty) { margin-top: 16px; }
.integration-card .btn-sm { min-height: 36px; }
.integration-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 28px; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--bg-secondary); }
.integration-empty > svg { width: 32px; height: 32px; color: var(--text-muted); flex-shrink: 0; }
.integration-empty > div { flex: 1; }
.integration-empty h4 { font-size: 14px; font-weight: 600; }
.integration-empty p { font-size: 13px; color: var(--text-secondary); max-width: 490px; margin-top: 4px; }
.integration-empty .btn { flex-shrink: 0; }
.integration-section-empty { grid-column: 1 / -1; color: var(--text-muted); font-size: 13px; padding: 20px; border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.integration-unavailable { flex-direction: column; text-align: center; max-width: 650px; margin: 64px auto; padding: 40px; }
.integration-unavailable h2 { font-size: 22px; }
.integration-unavailable .btn { margin-top: 8px; }
.integration-manage, .integration-tools { margin-top: 16px; border-top: 1px solid var(--border); }
.integration-manage summary, .integration-tools summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); padding-top: 12px; }
.integration-manage summary:hover, .integration-tools summary:hover { color: var(--text-primary); }
.integration-manage-body, .integration-tools-body { display: grid; gap: 14px; margin-top: 14px; }
.integration-action-row { display: flex; gap: 8px; flex-wrap: wrap; }
.integration-danger { color: var(--danger); }
.integration-danger:hover { background: var(--danger-subtle); }
.integration-tools-body > .btn, .integration-manage-body > .btn { justify-self: start; }
.integration-tools summary > span { margin-left: 5px; }
.integration-tool { padding: 12px 0; overflow-wrap: anywhere; border-bottom: 1px solid var(--border-subtle); }
.integration-tool:last-child { border: 0; padding-bottom: 0; }
.integration-tool strong { font-size: 12px; }
.integration-tool p { margin-top: 5px; font-size: 12px; white-space: pre-wrap; color: var(--text-secondary); line-height: 1.6; }
.integration-tools [data-tools-list] { max-height: 300px; overflow-y: auto; font-size: 12px; color: var(--text-secondary); }
.integration-dialog { margin: auto; width: min(680px, calc(100vw - 32px)); max-height: min(90dvh, 900px); padding: 0; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.integration-dialog[open] { display: flex; flex-direction: column; }
.integration-dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.integration-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.integration-dialog-header > div { min-width: 0; }
.integration-dialog-header h2 { font-size: 20px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.integration-dialog-header p { font-size: 13px; color: var(--text-secondary); margin-top: 4px; overflow-wrap: anywhere; }
.integration-close { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius); color: var(--text-secondary); font-size: 26px; line-height: 1; }
.integration-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.integration-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 24px; overflow-y: auto; }
.integration-provider-card { display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left; padding: 16px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-primary); }
.integration-provider-card:hover { border-color: var(--accent); background: var(--accent-subtle); }
.integration-provider-card .integration-service-icon { width: 36px; height: 36px; border: 0; background: var(--accent-subtle); }
.integration-provider-card > span:nth-child(2) { flex: 1; min-width: 0; }
.integration-provider-card > span:last-child { color: var(--text-muted); }
.integration-provider-card strong { display: block; font-size: 13px; font-weight: 600; }
.integration-provider-card small { display: block; font-size: 11px; line-height: 1.5; color: var(--text-secondary); margin-top: 4px; }
.integration-form { overflow-y: auto; min-height: 0; }
.integration-form-content { display: grid; gap: 22px; padding: 24px; }
.integration-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 500; min-width: 0; }
.integration-form label small { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.integration-form .form-input { width: 100%; min-width: 0; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); padding: 10px 12px; }
.integration-form .form-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.integration-form .form-input[readonly] { color: var(--text-secondary); }
.integration-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.integration-full { grid-column: 1 / -1; }
.integration-optional { font-weight: 400; font-size: 11px; color: var(--text-muted); margin-left: 5px; }
.integration-form fieldset { display: grid; gap: 18px; min-width: 0; padding: 0; border: 0; }
.integration-form fieldset > legend { font-size: 13px; font-weight: 600; margin-bottom: 14px; padding-top: 18px; border-top: 1px solid var(--border); width: 100%; }
.integration-group-options { min-width: 0; border: 0; padding: 0; }
.integration-group-options legend { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.integration-group-options label { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); margin: 6px 0; overflow-wrap: anywhere; }
.integration-group-options label:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); }
.integration-group-options input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.integration-form .integration-group-options { display: block; }
.integration-note { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.integration-error { color: var(--danger); background: var(--danger-subtle); border-radius: var(--radius); padding: 12px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; margin-top: 8px; }
.integration-copy-field { display: flex; gap: 8px; min-width: 0; }
.integration-copy-field input { flex: 1; }
.integration-copy-field .btn { padding: 8px 12px; flex-shrink: 0; }
.integration-advanced { background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.integration-advanced summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); }
.integration-advanced > :not(summary) { margin-top: 16px; }
.integration-back { text-align: left; justify-self: start; font-size: 12px; color: var(--text-secondary); }
.integration-back:hover { color: var(--accent); }
.integration-form-footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; background: var(--bg-secondary); border-top: 1px solid var(--border); z-index: 1; }
.integration-token-dialog { max-width: 480px; }
@media (max-width: 1000px) {
    .integration-page-header { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 640px) {
    .integration-page-header h2 { font-size: 24px; }
    .integration-header-actions { width: 100%; }
    .integration-header-actions .btn { padding: 10px 12px; font-size: 12px; }
    .integration-header-actions .btn-primary { flex: 1; }
    .integration-chat-hint { padding: 14px; flex-wrap: wrap; gap: 10px; }
    .integration-chat-hint > div { flex-basis: calc(100% - 40px); }
    .integration-chat-hint .btn { margin-left: 24px; padding: 4px 10px; }
    .integration-grid, .integration-picker, .integration-field-grid { grid-template-columns: minmax(0, 1fr); }
    .integration-card { padding: 18px; }
    .integration-empty { flex-direction: column; align-items: flex-start; padding: 22px; }
    .integration-unavailable { align-items: center; margin: 24px auto; }
    .integration-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: var(--radius-lg); }
    .integration-dialog-header { padding: 18px; }
    .integration-dialog-header h2 { font-size: 18px; }
    .integration-picker, .integration-form-content { padding: 18px; }
    .integration-picker { gap: 10px; }
    .integration-provider-card { min-height: 72px; }
    .integration-form-footer { padding: 14px 18px; }
    .integration-form .form-input { font-size: 16px; }
    .integration-close { height: 36px; width: 36px; }
}
.user-input-details > summary {
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    cursor: pointer;
    color: var(--text-secondary);
}

.message.editing .user-input-details > summary {
    display: none;
}

.model-folder {
    margin: 4px 0 4px 8px;
    border-left: 1px solid var(--border);
    padding-left: 4px;
}

.model-folder > summary {
    padding: 8px 4px;
    overflow-wrap: anywhere;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
}

.model-show-hidden {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.model-picker-item.model-hidden .model-picker-item-name {
    color: var(--text-muted);
}

.model-picker-item[data-type="custom"] {
    flex-wrap: wrap;
}

.model-picker-item[data-type="custom"] .model-picker-item-name {
    flex-basis: 100%;
}

@media (max-width: 768px) {
    .model-picker-header {
        flex-wrap: wrap;
    }
    .model-show-hidden {
        order: 1;
        width: 100%;
    }
}

#bug-report-dialog {
    width: min(640px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 24px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
}

#bug-report-dialog::backdrop { background: rgb(0 0 0 / 50%); }
.bug-report-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.bug-report-heading { justify-content: space-between; }
#bug-report-form .form-group { margin: 16px 0; }
#bug-report-form textarea { width: 100%; resize: vertical; }
#bug-report-status { margin: 12px 0; color: var(--text-secondary); }