/* Soft Neutral Lighter Gray Theme */
:root,
:root[data-theme="dark"],
html,
html[data-theme="dark"] {
    --bg-primary: #272727;
    --bg-secondary: #303030;
    --bg-tertiary: #3b3b3b;
    --accent-primary: #6366f1;
    --accent-secondary: #818cf8;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-bg: #303030;
    --glass-bg-hover: rgba(255, 255, 255, 0.06);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.15);
    --border-color: rgba(255, 255, 255, 0.08);
    --transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Light Theme */
:root[data-theme="light"],
html[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --accent-primary: #4f46e5;
    --accent-secondary: #6366f1;
    --accent-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-bg: #ffffff;
    --glass-bg-hover: rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
    --border-color: #e2e8f0;
    --transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-image:
        radial-gradient(circle at 5% 5%, rgba(79, 70, 229, 0.04) 0%, transparent 35%),
        radial-gradient(circle at 95% 95%, rgba(124, 58, 237, 0.04) 0%, transparent 35%);
    background-attachment: fixed;
}

/* Touch & Interaction Latency Optimizations */
button,
a,
input,
select,
textarea,
.btn,
.nav-link,
.folder-tab,
.tab-btn,
.clinical-pill-btn,
.btn-dots,
.btn-pin-client,
.chat-send-btn,
.custom-dashed-import-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Render Containment & Overscroll for High Performance (only for items without overflowing dropdowns) */
.live-utterance,
.supervisor-chat-card,
.media-card,
.admin-log-item {
    content-visibility: auto;
    contain-intrinsic-size: 0 72px;
}

.chat-panel,
.chat-messages-container,
.tab-content,
#tab-transcript,
.live-transcript,
.modal-content,
#supervisor-chats-container {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

.sessions-timeline,
#client-detail-sessions-container,
.session-history-item {
    overscroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
}

/* Sidebar Navigation (Hardware Accelerated) */
.sidebar {
    width: 260px;
    background: #ffffff;
    border-right: 1px solid var(--glass-border);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.01);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2);
    border-radius: 4px;
}


.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.logo-icon {
    background: var(--accent-gradient);
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.35rem;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.logo-text h1 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-text p {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--glass-bg-hover);
}

.nav-link.active {
    color: white;
    background: var(--accent-gradient);
    box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.25);
}

.nav-link i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid var(--glass-border);
    padding-top: 1.5rem;
}

.app-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--success);
    transform: translateZ(0);
    display: inline-block;
}

.status-dot::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background-color: var(--success);
    opacity: 0.75;
    animation: statusGpuPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes statusGpuPulse {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }
    70% {
        transform: scale(2.2);
        opacity: 0;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.95) translateZ(0);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: scale(0.95) translateZ(0);
        opacity: 0.8;
    }
}

/* Main Workspace Content */
.main-content {
    margin-left: 260px;
    flex: 1;
    padding: 2.5rem 3.5rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Page Headers */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.page-header h2 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.page-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.card {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

.card:hover {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05);
}

.card-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-title i {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Sections Grid */
.section-view {
    display: none !important;
    flex-direction: column;
    gap: 2rem;
}

.section-view:not(.active) {
    display: none !important;
}

.section-view.active {
    display: flex !important;
}

/* Form elements */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.8rem 1.1rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition);
}

.form-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

.btn {
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.85rem 1.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.25);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -2px rgba(99, 102, 241, 0.35);
    filter: brightness(1.1);
}

.btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.3);
    filter: brightness(0.97);
}

.btn-secondary {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    box-shadow: none;
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
    transform: none;
    box-shadow: none;
}

.btn-secondary:active {
    transform: scale(0.97);
    background: var(--bg-tertiary);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 8px;
}

/* Clients Grid and Cards */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.client-card {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    cursor: grab;
    user-select: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.03);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transform: translateZ(0);
    overflow: visible;
}

.client-card:hover {
    transform: translateY(-3px) translateZ(0);
    border-color: var(--accent-primary);
    box-shadow: 0 16px 30px -5px rgba(79, 70, 229, 0.12), 0 4px 12px rgba(0, 0, 0, 0.03);
}

.client-card:active {
    cursor: grabbing;
}

/* Pin Button Styles for Client Cards */
.btn-pin-client {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-pin-client:hover {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.btn-pin-client.pinned {
    color: #d97706;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

/* Archive Button Styles for Client Cards */
.btn-archive-client {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-archive-client:hover {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.12);
    transform: translateY(-1px);
}

.btn-archive-client.archived {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.3);
}

.btn-archive-client.archived:hover {
    color: #10b981;
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.3);
}

.client-card.is-archived {
    border-style: dashed;
    background: rgba(248, 250, 252, 0.85);
}

.badge-archived {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    background: rgba(107, 114, 128, 0.12);
    border: 1px solid rgba(107, 114, 128, 0.2);
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    width: fit-content;
}

.client-card.dragging {
    opacity: 0.35;
    transform: scale(0.95) rotate(-1.5deg);
    border: 2px dashed var(--accent-primary);
    box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.25);
    background: rgba(243, 244, 256, 0.8);
    backdrop-filter: blur(8px);
}

.client-card.drag-over {
    transform: scale(1.03) translateY(-4px);
    border-color: var(--accent-primary);
    border-width: 2px;
    box-shadow: 0 12px 30px -4px rgba(79, 70, 229, 0.22);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-delete-card {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    transition: var(--transition);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.btn-delete-card:hover {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
}

.client-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-right: 7.2rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.client-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.client-card-title-wrap {
    min-width: 0;
    flex: 1 1 0%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.client-name {
    font-weight: 700;
    font-size: 1.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    line-height: 1.35;
}

.client-card-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.client-card-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    padding: 0.75rem 0;
}

.client-notes-preview {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.4rem;
    line-height: 1.4;
}

/* Client Detail Profile Section */
.client-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.client-profile-info {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.client-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--accent-primary);
}

.client-profile-pseudonym {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.client-profile-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.notes-textarea {
    width: 100%;
    height: 110px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    resize: none;
    outline: none;
    transition: var(--transition);
}

.notes-textarea:focus {
    border-color: var(--accent-secondary);
}

/* Sessions grid and card listing */
.sessions-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 6px 4px;
}

.session-strip {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.25rem 1.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    transition: var(--transition);
    position: relative;
    overflow: visible;
    box-shadow: var(--shadow-lg);
    transform: translateZ(0);
}

.session-strip:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    transform: translateX(4px) translateZ(0);
}

.session-strip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent-gradient);
}

.session-strip-info {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
}

.session-strip-date {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.session-strip-date .date {
    font-weight: 700;
    font-size: 1.05rem;
}

.session-strip-date .time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.session-strip-details {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.badge,
.status-badge {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-family: inherit !important;
}

.status-uploading {
    background: rgba(99, 102, 241, 0.15) !important;
    color: var(--accent-primary) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    font-weight: 600 !important;
}

.status-processing {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--warning) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    font-weight: 600 !important;
}

.status-completed {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    font-weight: 600 !important;
}

.status-failed {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    font-weight: 600 !important;
}

/* Drag & Drop Audio Zone */
.upload-zone {
    border: 2px dashed var(--glass-border);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.01);
    position: relative;
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.04);
}

.upload-icon {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    transition: var(--transition);
}

.upload-zone:hover .upload-icon {
    color: var(--accent-secondary);
    transform: translateY(-4px);
}

.upload-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.upload-text strong {
    color: var(--accent-primary);
}

.file-info {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--success);
    margin-top: 1.25rem;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.65rem 1rem;
    border-radius: 10px;
}

/* Results / Supervisory Workspace */
.results-workspace {
    display: none;
    flex-direction: column;
    gap: 2rem;
    animation: fadeIn 0.3s ease;
}

#results-view.active,
.results-workspace.active {
    display: flex !important;
}

.results-grid {
    display: none;
    gap: 0;
    align-items: stretch;
    position: relative;
}

.results-workspace.active .results-grid {
    display: flex;
}

#analysis-main-container {
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    overflow: hidden;
}

#chat-sidebar-container {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), flex-grow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#session-resizer {
    transition: opacity 0.2s ease, width 0.2s ease, margin 0.2s ease;
}

.results-grid.dragging #analysis-main-container,
.results-grid.dragging #chat-sidebar-container,
.results-grid.dragging #session-resizer {
    transition: none !important;
}

.results-grid.collapsed #analysis-main-container {
    max-width: 0 !important;
    min-width: 0 !important;
    flex-basis: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: none !important;
}

.results-grid.collapsed #session-resizer {
    width: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.results-grid.collapsed #chat-sidebar-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

.resize-handle {
    width: 14px;
    cursor: col-resize;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    user-select: none;
    z-index: 10;
}

.resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 64px;
    background: var(--accent-primary);
    opacity: 0.5;
    border-radius: 4px;
    transition: width 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.resize-handle:hover::after,
.resize-handle.active::after {
    opacity: 1;
    width: 6px;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.session-chat-sidebar-card {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    max-height: calc(100vh - 200px);
    overflow: hidden;
    flex-shrink: 0;
    width: 45%;
    min-width: 320px;
}

@media (max-width: 1100px) {
    .results-grid {
        flex-direction: column !important;
        display: flex !important;
    }

    .resize-handle {
        display: none !important;
    }

    #analysis-main-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #analysis-main-container .tab-content {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 180px !important;
        box-sizing: border-box !important;
    }

    #analysis-main-container .tab-content.active {
        display: block !important;
    }

    #analysis-main-container #tab-overview {
        max-height: none !important;
        overflow-y: visible !important;
    }

    #analysis-main-container #tab-transcript {
        max-height: 65vh !important;
        max-height: 65dvh !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #analysis-main-container #tab-clinical {
        max-height: 72vh !important;
        max-height: 72dvh !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .session-chat-sidebar-card,
    #chat-sidebar-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin-top: 1.25rem !important;
        margin-bottom: 1.5rem;
    }

    .session-chat-sidebar-card .chat-panel,
    #chat-sidebar-container .chat-panel {
        height: 72vh !important;
        max-height: 72vh !important;
        min-height: 440px !important;
    }
}

.results-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--glass-border);
    padding: 1.25rem 2rem;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

.results-banner-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.btn-back {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-back:hover {
    color: var(--text-primary);
    transform: translateX(-4px);
}

/* Transcript bubble chat view */
.transcript-container {
    height: auto;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 4px;
    box-sizing: border-box;
}

#tab-transcript {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
    box-sizing: border-box;
}

#tab-transcript::-webkit-scrollbar {
    width: 6px;
}

#tab-transcript::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 10px;
}

.bubble {
    max-width: 82%;
    padding: 0.95rem 1.25rem;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.55;
    position: relative;
}

.bubble-therapist {
    align-self: flex-start;
    background: #ffffff;
    border: 1px solid var(--glass-border);
    border-bottom-left-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.bubble-client {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.06), rgba(124, 58, 237, 0.06));
    border: 1px solid rgba(79, 70, 229, 0.15);
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.02);
    color: var(--text-primary);
}

.bubble-speaker {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-secondary);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bubble-therapist .bubble-speaker {
    color: var(--accent-primary);
}

/* Tabs and Supervisor view */
.tabs-header {
    display: flex;
    gap: 0.35rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
}

.tabs-header::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: var(--transition);
}

.tab-btn i {
    font-size: 0.95rem;
    margin-right: 0.1rem;
}

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

.tab-btn.active {
    background: rgba(99, 102, 241, 0.08);
    color: var(--accent-primary);
}

/* Clinical Dashboard Grid and Pills */
.clinical-pills-bar {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding-top: 0.6rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-theme="light"] .clinical-pills-bar {
    background: var(--bg-secondary) !important;
}

.clinical-pill-btn {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    padding: 0.45rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: var(--transition);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.clinical-pill-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(99, 102, 241, 0.4);
}

.clinical-pill-btn.active {
    background: var(--accent-primary);
    color: #ffffff !important;
    border-color: var(--accent-primary);
    box-shadow: 0 3px 12px rgba(99, 102, 241, 0.4);
}

.clinical-pill-btn.active i {
    color: #ffffff !important;
}

.clinical-dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 1.85rem;
    width: 100%;
}

.clinical-card {
    padding: 1.45rem;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: var(--transition);
    scroll-margin-top: 60px;
}

/* Явные акцентные цветные границы для каждого раздела клинического разбора */
#clinical-card-cbt {
    border-left: 4px solid #06b6d4 !important;
}

#clinical-card-emotions {
    border-left: 4px solid #ef4444 !important;
}

#clinical-card-triggers {
    border-left: 4px solid #f59e0b !important;
}

#clinical-card-progress {
    border-left: 4px solid #10b981 !important;
}

#clinical-card-recs {
    border-left: 4px solid #6366f1 !important;
}

#clinical-card-transference {
    border-left: 4px solid #8b5cf6 !important;
}

html[data-theme="light"] .clinical-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.clinical-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
    transform: translateY(-1px);
}

.clinical-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.15rem 0;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

html[data-theme="light"] .clinical-card-title {
    background: #f8fafc;
    border-color: rgba(0, 0, 0, 0.06);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.tab-content {
    display: none;
    animation: fadeIn 0.35s ease;
    min-height: 0;
}

.tab-content.active {
    display: block;
    min-height: 0;
}

#analysis-main-container .tab-content {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* Recommendations styling */
.recs-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rec-item {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}

.rec-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.rec-text {
    font-size: 0.95rem;
    line-height: 1.45;
}

/* Chat view */
.chat-panel {
    display: flex;
    flex-direction: column;
    height: 480px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.chat-scroller {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scroll-behavior: smooth;
}

.chat-messages-container {
    scroll-behavior: smooth;
}

.chat-scroller::-webkit-scrollbar {
    width: 6px;
}

.chat-scroller::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 10px;
}

.chat-bubble {
    max-width: 85%;
    padding: 0.6rem 1.05rem 0.65rem 1.05rem;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.5;
    animation: bubbleFadeIn 0.25s ease;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chat-bubble-user {
    align-self: flex-end;
    background: var(--accent-gradient);
    color: white;
    border-bottom-right-radius: 2px;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
    white-space: pre-wrap;
}

.chat-bubble-assistant {
    align-self: flex-start;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-bottom-left-radius: 2px;
    white-space: normal;
}

/* =======================================================================
   КНОПКА КОПИРОВАНИЯ СООБЩЕНИЙ ПРИ НАВЕДЕНИИ (MESSAGE COPY BUTTON)
   ======================================================================= */
.chat-bubble,
.chat-message-bubble,
.bubble,
.client-global-chat-bubble {
    position: relative;
}

.msg-copy-btn {
    position: absolute;
    top: 6px;
    right: 7px;
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted, #9ca3af);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    z-index: 10;
    font-size: 0.78rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    user-select: none;
}

/* Light theme button styles */
html[data-theme="light"] .msg-copy-btn {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-secondary, #64748b);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* User Bubble variations (with gradient) */
.chat-bubble-user .msg-copy-btn,
.chat-message-bubble.user .msg-copy-btn {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.9);
}

/* Show only on hover over the message bubble */
.chat-bubble:hover > .msg-copy-btn,
.chat-message-bubble:hover > .msg-copy-btn,
.bubble:hover > .msg-copy-btn,
.client-global-chat-bubble:hover > .msg-copy-btn {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.msg-copy-btn:hover {
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
}

html[data-theme="light"] .msg-copy-btn:hover {
    background: #ffffff;
    color: var(--accent-primary, #4f46e5);
    border-color: rgba(79, 70, 229, 0.3);
    transform: scale(1.08);
}

.msg-copy-btn:active {
    transform: scale(0.95);
}

.msg-copy-btn.copied {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    background: rgba(16, 185, 129, 0.18) !important;
    color: #10b981 !important;
}

.bubble .bubble-speaker {
    padding-right: 28px;
}



.chat-input-bar {
    display: flex;
    position: relative;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: var(--bg-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-input-bar:focus-within,
.supervisor-chat-input-bar:focus-within {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.22) !important;
}

.chat-input,
#client-global-chat-input,
#supervisor-chat-input,
#chat-user-input {
    flex: 1;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.55rem 0.65rem;
    color: var(--text-primary) !important;
    font-family: inherit;
    outline: none !important;
    font-size: 0.9rem;
    line-height: 1.4;
    resize: none;
    min-height: 38px;
    box-sizing: border-box;
}

html:not([data-theme="light"]) .chat-input,
html:not([data-theme="light"]) #client-global-chat-input,
html:not([data-theme="light"]) #supervisor-chat-input,
html:not([data-theme="light"]) #chat-user-input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.chat-send-btn {
    background: var(--accent-gradient);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
}

.chat-send-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.chat-send-btn:active {
    transform: scale(0.93);
}

.chat-attach-btn,
.chat-voice-btn,
#btn-paperclip-trigger,
#btn-client-global-paperclip-trigger,
#btn-voice-supervisor-chat,
#btn-voice-session-chat,
#btn-voice-global-chat {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-secondary);
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 8px;
    transition: color 0.2s, background-color 0.2s, transform 0.1s;
}

.chat-attach-btn:hover,
.chat-voice-btn:hover,
#btn-paperclip-trigger:hover,
#btn-client-global-paperclip-trigger:hover,
#btn-voice-supervisor-chat:hover,
#btn-voice-session-chat:hover,
#btn-voice-global-chat:hover {
    color: var(--accent-primary) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.chat-attach-btn:active,
.chat-voice-btn:active,
#btn-paperclip-trigger:active,
#btn-client-global-paperclip-trigger:active,
#btn-voice-supervisor-chat:active,
#btn-voice-session-chat:active,
#btn-voice-global-chat:active {
    transform: scale(0.93);
}

/* Typing indicators */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1.25rem;
    background: transparent;
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typingBounce {

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

    40% {
        transform: scale(1.0);
    }
}

/* API Key listing and stats */
.api-keys-pool {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 5px;
}

.key-row {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}

.key-row:hover {
    background: var(--glass-bg-hover);
    border-color: var(--accent-primary);
}

/* Tags rendering */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tag {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: #3730a3;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.45;
}

.tag i {
    color: #4f46e5;
    flex-shrink: 0;
}

.tag-trigger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: #991b1b;
}

.tag-trigger i {
    color: #dc2626;
    flex-shrink: 0;
}

/* Folder Filter Tabs */
.folders-filter-bar {
    margin-bottom: 1.25rem;
}

.folder-tab {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 0.5rem 1.1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

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

.folder-tab.active {
    background: var(--accent-gradient);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.25);
}

.folder-tab.archive-tab {
    border-color: rgba(139, 92, 246, 0.25);
    color: #7c3aed;
    background: rgba(139, 92, 246, 0.05);
}

.folder-tab.archive-tab:hover {
    background: rgba(139, 92, 246, 0.12);
    color: #6d28d9;
}

.folder-tab.archive-tab.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px -2px rgba(139, 92, 246, 0.35);
}

.folder-tab.drag-over-target {
    border-color: var(--accent-primary) !important;
    background: rgba(99, 102, 241, 0.16) !important;
    color: var(--accent-primary) !important;
    transform: scale(1.06) !important;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.35) !important;
}

.folder-tab.archive-tab.drag-over-target {
    border-color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.22) !important;
    color: #6d28d9 !important;
    transform: scale(1.08) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.45) !important;
}

/* Drag-to-Archive Drop Zone (Floating Action Dock) */
.client-archive-dropzone {
    position: fixed;
    bottom: 2.2rem;
    left: calc(50% + 130px);
    transform: translateX(-50%) translateY(160%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 0.85rem 1.8rem;
    border: 2px dashed #8b5cf6;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #6d28d9;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 16px 36px -4px rgba(109, 40, 217, 0.25), 0 0 0 1px rgba(139, 92, 246, 0.2);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    z-index: 99999;
    cursor: copy;
    user-select: none;
}

.client-archive-dropzone * {
    pointer-events: none;
}

.client-archive-dropzone.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.client-archive-dropzone.drag-over {
    transform: translateX(-50%) translateY(-4px) scale(1.05);
    border-color: #ffffff;
    border-style: solid;
    background: #7c3aed;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(124, 58, 237, 0.45), 0 0 0 4px rgba(139, 92, 246, 0.35);
}

.dropzone-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: inherit;
    transition: transform 0.25s ease, background-color 0.2s ease;
    flex-shrink: 0;
}

.client-archive-dropzone.drag-over .dropzone-icon-circle {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.15) rotate(-5deg);
}

.client-archive-dropzone.restore-mode {
    border-color: #10b981;
    color: #047857;
    box-shadow: 0 16px 36px -4px rgba(16, 185, 129, 0.25), 0 0 0 1px rgba(16, 185, 129, 0.2);
}

.client-archive-dropzone.restore-mode .dropzone-icon-circle {
    background: rgba(16, 185, 129, 0.14);
}

.client-archive-dropzone.restore-mode.drag-over {
    border-color: #ffffff;
    border-style: solid;
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(16, 185, 129, 0.45), 0 0 0 4px rgba(16, 185, 129, 0.35);
}

.client-archive-dropzone.restore-mode.drag-over .dropzone-icon-circle {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.15) rotate(5deg);
}

@media (max-width: 900px) {
    .client-archive-dropzone {
        left: 50%;
    }
}

@media (max-width: 640px) {
    .client-archive-dropzone {
        bottom: 1.25rem;
        left: 50%;
        padding: 0.75rem 1.25rem;
        font-size: 0.88rem;
        width: 90%;
        max-width: 360px;
        text-align: center;
    }
}

.key-details {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.key-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.key-masked {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.key-stats {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.key-row-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.key-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.key-status.blocked {
    background-color: var(--danger);
    box-shadow: 0 0 8px var(--danger);
}

.key-delete-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    transition: var(--transition);
}

.key-delete-btn:hover {
    color: var(--danger);
}

/* Generic styles & Ultra-smooth GPU Spinner Animation */
.fa-spin,
.spinner,
.fa-spinner,
.fa-circle-notch,
.fa-circle-notch.fa-spin {
    display: inline-block !important;
    vertical-align: middle;
    transform-origin: 50% 50% !important;
    animation: smoothSpin 0.8s linear infinite !important;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

@keyframes smoothSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.empty-state>i,
.empty-state-icon {
    font-size: 3.5rem;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

button i,
.btn i,
.empty-state .btn i,
.btn-icon i,
.nav-link i,
.sidebar-nav-item i,
.instructions-accordion-icon i,
i.fa-solid,
i.fa-regular,
i.fa-brands,
.fa-solid,
.fa-regular,
.fa-brands {
    display: inline-block;
    min-width: 1em;
    text-align: center;
}

.btn i,
.empty-state .btn i {
    font-size: inherit;
    color: inherit;
    background: none !important;
    -webkit-text-fill-color: currentcolor !important;
    -webkit-background-clip: border-box !important;
}

/* Modal styling */
.modal {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.modal.active {
    display: flex;
    animation: modalBackdropFadeIn 0.2s ease;
}

@keyframes modalBackdropFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    width: 100%;
    max-width: 500px;
    padding: 2.25rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    animation: modalSlide 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlide {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75rem;
}

.modal-header h3 {
    font-size: 1.35rem;
    font-weight: 800;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition);
}

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

/* Visibility utility - lets JS toggle blocks without caring about their own display type (grid/flex/block) */
.hidden {
    display: none !important;
}

/* Three-dots and Card Action Buttons Menu */
.card-menu-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    z-index: 10;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.card-menu-container .btn-pin-client,
.card-menu-container .btn-archive-client,
.card-menu-container .btn-dots {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    font-size: 0.85rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-menu-container.active-menu,
.card-menu-container:has(.dropdown-menu.active) {
    z-index: 99999 !important;
}

.btn-dots {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

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

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.98));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px);
    display: none;
    flex-direction: column;
    width: 170px;
    overflow: hidden;
    z-index: 99999 !important;
}

.dropdown-menu.active {
    display: flex !important;
}

.dropdown-item {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    transition: var(--transition);
}

.dropdown-item:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}

.admin-log-item.error {
    color: #ef4444;
}

/* ============================================================
   SUPERVISOR & CLINICAL ANALYTICS 2.0 STYLES
   ============================================================ */

.quote-clickable-chip {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.quote-clickable-chip:hover {
    transform: scale(1.03);
    filter: brightness(1.15);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

@keyframes quoteHighlightPulse {
    0% {
        background-color: rgba(99, 102, 241, 0.4);
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
    }
    50% {
        background-color: rgba(99, 102, 241, 0.6);
        box-shadow: 0 0 0 12px rgba(99, 102, 241, 0);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

.quote-highlight-pulse {
    animation: quoteHighlightPulse 2.5s ease-out;
    border-radius: 6px;
    padding: 2px 4px;
}

.coaching-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.07), rgba(168, 85, 247, 0.07));
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 16px;
    padding: 1.25rem;
    margin-top: 1rem;
}

.coaching-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.85rem;
}

.coaching-question-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--bg-tertiary);
    border-left: 3px solid #8b5cf6;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    line-height: 1.45;
}

.coaching-question-icon {
    color: #8b5cf6;
    font-size: 1rem;
    margin-top: 0.1rem;
}

.modality-badge {
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.modality-badge.cbt {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.modality-badge.act {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.modality-badge.schema {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.modality-badge.somatic {
    background: rgba(236, 72, 153, 0.2);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.dropdown-item.danger {
    color: #ef4444;
}

/* ============================================================
   INFOGRAPHICS & OVERVIEW 2.0 STYLES
   ============================================================ */

.aha-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(236, 72, 153, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.1);
}

.aha-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.aha-card-title {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.aha-card-text {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-primary);
    font-style: italic;
}

/* --- Infographics 3.0 Essence Architecture --- */
.infographics-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
}

.infographic-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.35rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.infographics-header-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.07) 0%, rgba(139, 92, 246, 0.09) 100%);
    border: 1px solid rgba(99, 102, 241, 0.22);
}

.infographic-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.infographic-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.clinical-status-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

/* --- Storyboard Stepper & Infographics 4.0 Dashboard --- */
.storyboard-stepper-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

@media (max-width: 900px) {
    .storyboard-stepper-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 550px) {
    .storyboard-stepper-grid {
        grid-template-columns: 1fr;
    }
}

.storyboard-step-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.step-badge {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    border-radius: 10px;
    width: fit-content;
    text-transform: uppercase;
}

.step-badge.step-1 { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.step-badge.step-2 { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.step-badge.step-3 { background: rgba(244, 63, 94, 0.15); color: #f43f5e; }
.step-badge.step-4 { background: rgba(16, 185, 129, 0.15); color: #10b981; }

.step-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.step-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Interventions & Defenses List */
.interventions-list, .defenses-list, .targets-progress-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.intervention-item-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.intervention-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
}

.defense-card-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
}

.defense-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.defense-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
}

.defense-level-pill {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
}

.defense-level-pill.high { background: rgba(244, 63, 94, 0.15); color: #f43f5e; }
.defense-level-pill.medium { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.defense-level-pill.low { background: rgba(16, 185, 129, 0.15); color: #10b981; }

.defense-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.target-progress-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.target-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
}

.infographics-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .infographics-grid-2col {
        grid-template-columns: 1fr;
    }
}

.emotion-shift-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 1.35rem;
}

.transference-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.transference-pair-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.85rem;
    align-items: center;
    margin: 1rem 0;
}

.transference-node {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    text-align: center;
}

.transference-node-role {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.transference-node-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* --- Instructional Coaching Conversation Guide Card --- */
.coaching-guide-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(6, 182, 212, 0.06) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 16px;
    padding: 1.35rem;
    margin-bottom: 1.25rem;
}

.coaching-questions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.coaching-question-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-left: 3.5px solid #10b981;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    color: var(--text-primary);
    line-height: 1.45;
}

.coaching-question-num {
    font-size: 0.75rem;
    font-weight: 800;
    color: #10b981;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
    letter-spacing: 0.05em;
}

.coaching-question-text {
    font-weight: 600;
    color: var(--text-primary);
}

.coaching-question-purpose {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
    font-style: italic;
}

.coaching-action-box {
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed rgba(16, 185, 129, 0.35);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    font-size: 0.88rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.experiencing-gauge-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

.dropdown-item.danger:hover {
    background: rgba(239, 68, 68, 0.05);
    color: #dc2626;
}

/* Checkbox styling for bulk select */
.client-card-checkbox {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    background: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
}

.client-card.select-mode .client-card-checkbox {
    display: flex;
}

.client-card.selected {
    border-color: var(--accent-primary);
    background: rgba(79, 70, 229, 0.02);
}

.client-card.selected .client-card-checkbox {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: white;
}

/* ===================================================================
           Analytics UI kit: score boxes, insight cards, risk indicators,
           trend arrows, data table. Shared between the per-session "Обзор"
           tab and the client-level global analytics view.
        =================================================================== */

/* Score box: circular gradient score + label, used across session/global analytics */
.score-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.score-circle {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    background: var(--accent-gradient);
}

.score-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.score-info p {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Insight card: icon + label + value [+ trend], reused in overview tab & global analytics */
.insight-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.insight-card:hover {
    border-color: var(--accent-primary) !important;
    transform: translateY(-1px);
}

.insight-card-icon,
html:not([data-theme="light"]) .insight-card-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #ffffff !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.insight-card:hover .insight-card-icon {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.65) !important;
}

.insight-icon-talk {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45) !important;
}

.insight-icon-emotion {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.45) !important;
}

.insight-icon-alliance {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}

.insight-icon-progress {
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%) !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.45) !important;
}

.insight-card-body {
    min-width: 0;
    flex: 1;
}

.insight-card-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary) !important;
    margin-bottom: 0.2rem;
    opacity: 0.9;
}

.insight-card-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    line-height: 1.4;
}

/* Trend arrows: direction is neutral, color meaning (good/bad) is a separate modifier
           because "up" is good for alliance but bad for anxiety/tension */
.trend-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.trend-arrow.trend-good {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}

.trend-arrow.trend-bad {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
}

.trend-arrow.trend-flat {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-secondary);
}

/* Risk banner: persistent, collapsible alert shown above the session tabs */
.risk-banner {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1.15rem;
    border-radius: 14px;
    margin-bottom: 1.15rem;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
    cursor: default;
    box-sizing: border-box;
    position: relative;
}

.risk-banner.is-collapsed {
    padding: 0.55rem 1.15rem;
    margin-bottom: 0.85rem;
}

.risk-banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    gap: 0.75rem;
    user-select: none;
    outline: none;
    border-radius: 8px;
    transition: opacity 0.15s ease;
}

.risk-banner-header:hover {
    opacity: 0.92;
}

.risk-banner-header:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.risk-banner-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.risk-banner-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.risk-banner-title {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.35;
    margin: 0;
    word-break: break-word;
}

.risk-banner-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.65rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    opacity: 0.88;
    transition: all 0.2s ease;
    flex-shrink: 0;
    user-select: none;
    line-height: 1.2;
    outline: none;
}

.risk-banner-toggle:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.risk-banner-toggle-icon {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.risk-banner-body {
    margin-top: 0.65rem;
    padding-left: 2rem;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin-top 0.25s ease;
    max-height: 1000px;
    opacity: 1;
    user-select: text;
}

.risk-banner.is-collapsed .risk-banner-body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
    padding-top: 0;
    padding-bottom: 0;
}

.risk-banner-text {
    font-size: 0.85rem;
    line-height: 1.55;
    opacity: 0.94;
}

.risk-banner-overview-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    opacity: 0.88;
    transition: opacity 0.2s;
    font-family: inherit;
}

.risk-banner-overview-link:hover {
    opacity: 1;
}

.risk-banner.risk-moderate,
.risk-banner.risk-low {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
}

.risk-banner.risk-moderate .risk-banner-icon,
.risk-banner.risk-moderate .risk-banner-title,
.risk-banner.risk-low .risk-banner-icon,
.risk-banner.risk-low .risk-banner-title {
    color: #b45309;
}

.risk-banner.risk-moderate .risk-banner-text,
.risk-banner.risk-low .risk-banner-text {
    color: #78350f;
}

.risk-banner.risk-moderate .risk-banner-toggle,
.risk-banner.risk-low .risk-banner-toggle {
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.08);
}

.risk-banner.risk-moderate .risk-banner-toggle:hover,
.risk-banner.risk-low .risk-banner-toggle:hover {
    background: rgba(245, 158, 11, 0.18);
}

.risk-banner.risk-moderate .tag-trigger,
.risk-banner.risk-low .tag-trigger {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(217, 119, 6, 0.35);
    color: #92400e;
}

.risk-banner.risk-moderate .tag-trigger i,
.risk-banner.risk-low .tag-trigger i {
    color: #b45309;
}

.risk-banner.risk-high,
.risk-banner.risk-critical {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
}

.risk-banner.risk-high .risk-banner-icon,
.risk-banner.risk-high .risk-banner-title,
.risk-banner.risk-critical .risk-banner-icon,
.risk-banner.risk-critical .risk-banner-title {
    color: #dc2626;
}

.risk-banner.risk-high .risk-banner-text,
.risk-banner.risk-critical .risk-banner-text {
    color: #7f1d1d;
}

.risk-banner.risk-high .risk-banner-toggle,
.risk-banner.risk-critical .risk-banner-toggle {
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.08);
}

.risk-banner.risk-high .risk-banner-toggle:hover,
.risk-banner.risk-critical .risk-banner-toggle:hover {
    background: rgba(239, 68, 68, 0.18);
}

.risk-banner.risk-high .tag-trigger,
.risk-banner.risk-critical .tag-trigger {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.35);
    color: #7f1d1d;
}

.risk-banner.risk-high .tag-trigger i,
.risk-banner.risk-critical .tag-trigger i {
    color: #dc2626;
}

/* Compact risk badge for lists/tables and risk dot for the timeline strip */
.risk-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.risk-badge.risk-none,
.risk-badge.risk-low {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}

.risk-badge.risk-moderate {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.risk-badge.risk-high,
.risk-badge.risk-critical {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.risk-timeline {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}

.risk-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px var(--glass-border);
}

.risk-dot:hover {
    transform: scale(1.35);
}

.risk-dot.risk-none {
    background: #cbd5e1;
}

.risk-dot.risk-low {
    background: var(--success);
}

.risk-dot.risk-moderate {
    background: var(--warning);
}

.risk-dot.risk-high,
.risk-dot.risk-critical {
    background: var(--danger);
}

/* Data table: session history, styled to sit inside a .card without extra chrome */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.data-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--glass-border);
}

.data-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-secondary);
    vertical-align: middle;
}

.data-table tbody tr {
    cursor: pointer;
    transition: var(--transition);
}

.data-table tbody tr:hover {
    background: var(--glass-bg-hover);
}

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

.data-table td.data-table-title {
    color: var(--text-primary);
    font-weight: 600;
}

/* Overview tab: hero summary + focus callout */
.overview-summary {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.focus-callout {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: rgba(79, 70, 229, 0.06);
    border: 1px solid rgba(79, 70, 229, 0.15);
    margin-bottom: 1.5rem;
}

.focus-callout-icon {
    flex-shrink: 0;
    color: var(--accent-primary);
    font-size: 1.15rem;
    margin-top: 0.1rem;
}

.focus-callout-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-primary);
    margin-bottom: 0.25rem;
}

.focus-callout-text {
    font-size: 0.92rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.insight-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.theme-tag-count {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-size: 0.72rem;
    margin-left: 0.15rem;
}

/* Auth Overlay Styles */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, var(--bg-primary), var(--bg-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.auth-overlay.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

.auth-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    animation: modalSlide 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auth-tab {
    flex: 1;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.55rem 1rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.auth-tab.active {
    background: var(--accent-gradient);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.auth-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo i {
    font-size: 3rem;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.auth-logo h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.auth-logo p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
}

.auth-error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--danger);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    text-align: center;
    font-weight: 500;
}

.auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.85rem;
}

.auth-switch a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.auth-switch a:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

/* --- Supervisor Premium Chat Styles --- */
.supervisor-chat-card {
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.supervisor-chat-card:hover {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.03);
    transform: translateY(-1px);
}

.supervisor-chat-card.active {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.08);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
}

.supervisor-chat-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supervisor-chat-card-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.supervisor-chat-card .card-menu-btn {
    opacity: 0;
    transition: opacity 0.2s;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.supervisor-chat-card:hover .card-menu-btn,
.supervisor-chat-card.active .card-menu-btn {
    opacity: 1;
}

.chat-message-bubble {
    max-width: 80%;
    padding: 0.65rem 1.15rem 0.7rem 1.15rem;
    border-radius: 1rem;
    font-size: 0.925rem;
    line-height: 1.5;
    position: relative;
    animation: messageFadeIn 0.3s ease-out;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@keyframes messageFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.chat-message-bubble.user {
    align-self: flex-end;
    background: var(--accent-gradient);
    color: white;
    border-bottom-right-radius: 0.25rem;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
    white-space: pre-wrap;
}

.chat-message-bubble.assistant {
    align-self: flex-start;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-left-radius: 0.25rem;
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    white-space: normal;
}

.markdown-content {
    white-space: normal;
    line-height: 1.5;
}

.chat-message-bubble p,
.chat-bubble p,
.markdown-content p {
    margin: 0 0 0.45rem 0;
}

.chat-message-bubble p:last-child,
.chat-bubble p:last-child,
.markdown-content p:last-child {
    margin-bottom: 0;
}

.chat-message-bubble ul,
.chat-message-bubble ol,
.chat-bubble ul,
.chat-bubble ol,
.markdown-content ul,
.markdown-content ol {
    margin: 0.35rem 0 0.45rem 1.2rem;
    padding: 0;
}

.chat-message-bubble li,
.chat-bubble li,
.markdown-content li {
    margin-bottom: 0.25rem;
}

.chat-message-bubble li:last-child,
.chat-bubble li:last-child,
.markdown-content li:last-child {
    margin-bottom: 0;
}

.chat-message-bubble li>p,
.chat-bubble li>p,
.markdown-content li>p {
    margin: 0 0 0.2rem 0;
}

.chat-message-bubble li>p:last-child,
.chat-bubble li>p:last-child,
.markdown-content li>p:last-child {
    margin-bottom: 0;
}

.chat-message-bubble strong,
.chat-bubble strong,
.markdown-content strong {
    font-weight: 600;
    color: var(--text-primary);
}

.chat-message-bubble.user strong,
.chat-bubble-user strong {
    color: white;
}

.chat-message-bubble h1,
.chat-bubble h1,
.markdown-content h1,
.chat-message-bubble h2,
.chat-bubble h2,
.markdown-content h2,
.chat-message-bubble h3,
.chat-bubble h3,
.markdown-content h3,
.chat-message-bubble h4,
.chat-bubble h4,
.markdown-content h4 {
    margin-top: 0.7rem;
    margin-bottom: 0.3rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.chat-message-bubble h1:first-child,
.chat-bubble h1:first-child,
.markdown-content h1:first-child,
.chat-message-bubble h2:first-child,
.chat-bubble h2:first-child,
.markdown-content h2:first-child,
.chat-message-bubble h3:first-child,
.chat-bubble h3:first-child,
.markdown-content h3:first-child,
.chat-message-bubble h4:first-child,
.chat-bubble h4:first-child,
.markdown-content h4:first-child {
    margin-top: 0;
}

.chat-message-bubble.user h1,
.chat-message-bubble.user h2,
.chat-message-bubble.user h3,
.chat-message-bubble.user h4,
.chat-bubble-user h1,
.chat-bubble-user h2,
.chat-bubble-user h3,
.chat-bubble-user h4 {
    color: white;
}

.chat-message-bubble h3,
.chat-bubble h3,
.markdown-content h3 {
    font-size: 1.02rem;
}

.chat-message-bubble h4,
.chat-bubble h4,
.markdown-content h4 {
    font-size: 0.94rem;
}

.supervisor-doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-body);
    border: 1px solid var(--glass-border);
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.supervisor-doc-item:hover {
    border-color: rgba(239, 68, 68, 0.3);
}

.supervisor-doc-item .doc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 0.5rem;
}

.supervisor-doc-item .btn-delete-doc {
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s;
    padding: 0.2rem;
}

.supervisor-doc-item .btn-delete-doc:hover {
    color: #ef4444;
}

/* Supervisor Free Chat Section */
.supervisor-list-col {
    width: 320px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--glass-border);
    background: var(--bg-secondary);
}

.supervisor-chat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    position: relative;
    min-width: 0;
}

@media (min-width: 861px) {
    #supervisor-chat-section {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 260px;
        right: 0;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        z-index: 10;
        padding: 0;
    }
}

/* Client Detail Profile Layout */
.client-tab-view {
    display: none;
}

.client-tab-view.active-view {
    display: block;
}

.client-overview-layout.active-view {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 2rem;
    align-items: stretch;
    width: 100%;
}

.global-stats-layout.active-view {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}

.client-tabs-nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

.client-tabs-scroll-bar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.upload-zone:hover {
    border-color: var(--accent-primary) !important;
    background: rgba(79, 70, 229, 0.04) !important;
}

.session-history-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    border-color: rgba(79, 70, 229, 0.25) !important;
    background: var(--bg-primary) !important;
}

@media (max-width: 900px) {
    .client-overview-layout,
    .client-detail-layout {
        grid-template-columns: 1fr !important;
    }
}

@keyframes progressPulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

.pulse-animation {
    animation: progressPulse 1.5s infinite ease-in-out;
}

/* Global Statistics Tab Layout */
.global-stats-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
}

.global-stats-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#global-stats-resizer {
    width: 10px;
    align-self: flex-start;
    height: calc(100vh - 180px);
    min-height: 580px;
    max-height: calc(100vh - 180px);
    position: sticky;
    top: 1.5rem;
    cursor: col-resize;
    margin: 0 -2px;
}

.global-stats-chat-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.global-stats-chat-col .global-stats-chat-card {
    height: calc(100vh - 180px);
    min-height: 580px;
    max-height: calc(100vh - 180px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1100px) {
    .global-stats-layout {
        flex-direction: column !important;
    }

    .global-stats-chat-col {
        width: 100% !important;
    }

    .global-stats-chat-col .global-stats-chat-card {
        height: 520px !important;
        min-height: 480px !important;
        max-height: 560px !important;
    }

    #global-stats-resizer {
        display: none !important;
    }
}

/* Quiz Module Styling */
.quiz-diff-card {
    transition: all 0.2s ease-in-out;
}

.quiz-diff-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quiz-diff-card.active {
    border-color: var(--accent-primary) !important;
    background: rgba(79, 70, 229, 0.06) !important;
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.quiz-tag-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.quiz-tag-btn:hover {
    background: var(--accent-gradient);
    color: white;
    border-color: transparent;
    transform: translateY(-1px);
}

/* Session History Item (Client Profile) */
.session-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    margin-bottom: 0.65rem;
    transition: var(--transition);
    position: relative;
    cursor: pointer;
    gap: 1rem;
    z-index: 1;
    overflow: visible !important;
    contain: none !important;
    content-visibility: visible !important;
}

.session-history-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1;
}

.session-num-badge {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: rgba(79, 70, 229, 0.08);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 700;
}

.session-history-content {
    min-width: 0;
    flex: 1;
}

.session-history-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-history-meta {
    font-size: 0.76rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.session-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.session-history-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.session-history-item.active-menu,
.session-history-item:has(.dropdown-menu.active),
.session-strip.active-menu,
.session-strip:has(.dropdown-menu.active),
.client-card.active-menu,
.client-card:has(.dropdown-menu.active) {
    z-index: 99999 !important;
    position: relative !important;
}

.session-history-item:not(.active-menu):hover,
.session-strip:not(.active-menu):hover,
.client-card:not(.active-menu):hover {
    z-index: 2 !important;
}

.session-item-dropdown {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 99999 !important;
}

/* Clean list and paragraph spacing inside transcript section cards */
.transcript-section-card ul,
.transcript-section-card ol {
    margin: 0.4rem 0;
    padding-left: 1.35rem;
}

.transcript-section-card li {
    margin-bottom: 0.25rem;
    line-height: 1.55;
}

.transcript-section-card p {
    margin: 0.25rem 0;
    line-height: 1.55;
}

/* Уважаем системную настройку "уменьшить движение": отключаем анимации/переходы */
@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;
    }
}

/* =======================================================================
   АДАПТАЦИЯ ПОД ТЕЛЕФОНЫ (Android и iPhone) & PERFORMANCE OPTIMIZATION
   =======================================================================

   Порог 860px: боковое меню прячется за кнопку с аппаратным GPU-ускорением,
   раскладки переходят в одноколоночный вид, панели вкладок получают
   плавный touch-свайп без переполнения, а чаты поддерживают master-detail.
   ======================================================================= */

/* Шапка и затемнение существуют только на узких экранах. */
.mobile-topbar {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 860px) {

    /* ---- Шапка с кнопкой меню ---- */
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        /* Отступ сверху под вырез/статус-бар iPhone. */
        padding: env(safe-area-inset-top) 1rem 0 1rem;
        height: calc(56px + env(safe-area-inset-top));
        background: var(--bg-secondary);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        border-bottom: 1px solid var(--glass-border);
        z-index: 120;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .mobile-menu-btn {
        width: 42px;
        height: 42px;
        border: 1px solid var(--glass-border);
        background: var(--bg-secondary);
        border-radius: 10px;
        color: var(--text-primary);
        font-size: 1.05rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        touch-action: manipulation;
    }

    .mobile-menu-btn:active {
        background: var(--bg-tertiary);
        transform: scale(0.96);
    }

    .mobile-topbar-title {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-weight: 800;
        font-size: 1.05rem;
        color: var(--text-primary);
    }

    /* ---- Боковое меню превращается в выезжающую панель с GPU-ускорением ---- */
    .sidebar {
        width: 84vw;
        max-width: 320px;
        padding: 1.5rem 1.25rem;
        padding-top: calc(1.5rem + env(safe-area-inset-top));
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
        transform: translate3d(-100%, 0, 0);
        will-change: transform;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 130;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
    }

    .sidebar.is-open {
        transform: translate3d(0, 0, 0);
    }

    /* Подложка под меню */
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 125;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        will-change: opacity;
    }

    .sidebar-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Пункты меню крупнее для удобного попадания пальцем */
    .nav-link {
        padding: 0.85rem 1rem !important;
        font-size: 0.98rem !important;
        touch-action: manipulation;
    }

    /* ---- Содержимое занимает всю ширину ---- */
    .main-content {
        margin-left: 0;
        padding: 1rem 1rem 2rem 1rem;
        padding-top: calc(56px + env(safe-area-inset-top) + 0.85rem);
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
        gap: 1.25rem;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .section-view,
    #client-detail-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    /* ---- Заголовки разделов ---- */
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.85rem;
    }

    .page-header h2 {
        font-size: 1.35rem;
    }

    .page-header p {
        font-size: 0.88rem;
    }

    /* ---- Карточки и сетки в одну колонку ---- */
    .card {
        padding: 1.1rem !important;
    }

    .clients-grid,
    .results-grid,
    .stats-grid,
    .infographics-grid,
    .criteria-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    /* Исправление сеток профиля клиента и глобальной аналитики */
    .client-overview-layout.active-view,
    .client-detail-layout.active-view,
    .global-stats-layout.active-view {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .client-overview-layout > div,
    #client-tab-content-overview > div,
    .client-detail-layout > div,
    .global-stats-layout > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .client-tabs-nav-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .client-tabs-scroll-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 0.35rem !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .client-tabs-scroll-bar::-webkit-scrollbar {
        display: none !important;
    }

    .client-tabs-scroll-bar .btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    #btn-client-profile-create-session {
        width: 100% !important;
        justify-content: center !important;
    }

    .global-stats-chat-col {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    .global-stats-chat-col .global-stats-chat-card,
    .global-stats-chat-col .card {
        height: auto !important;
        min-height: 480px !important;
        max-height: 70vh !important;
    }

    /* Адаптивные сетки медиафайлов и тестов */
    .client-media-grid,
    .client-tests-grid,
    #client-media-grid,
    #client-tests-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)) !important;
        gap: 1rem !important;
    }

    .transference-pair-grid {
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }

    /* ---- Плавный горизонтальный touch-свайп для вкладок и фильтров ---- */
    .folders-filter-bar,
    .tabs-header,
    .clinical-pills-bar,
    #client-media-filter-btns {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 0.35rem !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .folders-filter-bar::-webkit-scrollbar,
    .tabs-header::-webkit-scrollbar,
    .clinical-pills-bar::-webkit-scrollbar,
    #client-media-filter-btns::-webkit-scrollbar {
        display: none !important;
    }

    .tab-btn,
    .clinical-pill-btn,
    .folder-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* ---- Чат анализа и панель вкладок занимают всю ширину и имеют комфортную высоту ---- */
    #chat-sidebar-container,
    #analysis-main-container,
    .session-chat-sidebar-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    #analysis-main-container .tab-content {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 180px !important;
        box-sizing: border-box !important;
    }

    #analysis-main-container .tab-content.active {
        display: block !important;
    }

    #analysis-main-container #tab-overview {
        max-height: none !important;
        overflow-y: visible !important;
    }

    #analysis-main-container #tab-transcript {
        max-height: 65vh !important;
        max-height: 65dvh !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #analysis-main-container #tab-clinical {
        max-height: 72vh !important;
        max-height: 72dvh !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #chat-sidebar-container,
    .session-chat-sidebar-card {
        margin-top: 1.25rem !important;
    }

    #chat-sidebar-container .chat-panel,
    .session-chat-sidebar-card .chat-panel {
        height: 72vh !important;
        max-height: 72vh !important;
        min-height: 440px !important;
    }

    #chat-sidebar-container .card-title,
    .session-chat-sidebar-card .card-title {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .resize-handle {
        display: none !important;
    }

    /* ---- Раздел «Свободный чат» (Master-Detail на мобильных) ---- */
    #supervisor-chat-section {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - 56px - env(safe-area-inset-top) - 1.5rem) !important;
        max-height: calc(100dvh - 56px - env(safe-area-inset-top) - 1.5rem) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
    }

    #supervisor-chat-section > div {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid var(--glass-border);
    }

    .supervisor-list-col {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 !important;
        display: flex !important;
        border-right: none !important;
    }

    .supervisor-chat-col {
        display: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
        height: 100% !important;
    }

    #supervisor-chat-section.chat-active-mobile .supervisor-list-col {
        display: none !important;
    }

    #supervisor-chat-section.chat-active-mobile .supervisor-chat-col {
        display: flex !important;
    }

    #btn-supervisor-chat-mobile-back {
        display: inline-flex !important;
    }

    /* ---- Таблицы прокручиваются вбок, а не ломают страницу ---- */
    .data-table-wrap,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 520px;
    }

    /* ---- Модальные окна во весь экран с безопасными отступами ---- */
    .modal-content,
    .modal-card,
    .auth-card,
    #custom-confirm-modal .modal-card,
    #custom-prompt-modal .modal-card,
    #client-import-modal .modal-card,
    #paste-text-modal .modal-card,
    #add-test-modal .modal-card,
    #admin-panel-modal .modal-card {
        width: calc(100vw - 1.25rem) !important;
        max-width: calc(100vw - 1.25rem) !important;
        max-height: calc(100vh - 2.5rem);
        max-height: calc(100dvh - 2.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0.65rem auto;
        padding: 1.25rem !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    /* ---- Зоны нажатия (44px min tap target) ---- */
    .btn {
        min-height: 44px;
        padding: 0.65rem 1.1rem;
        touch-action: manipulation;
    }

    .btn-sm {
        min-height: 40px;
    }

    .folder-tab {
        min-height: 40px;
    }

    .btn-pin-client,
    .btn-archive-client,
    .btn-dots {
        position: relative;
        touch-action: manipulation;
    }

    .btn-pin-client::after,
    .btn-archive-client::after,
    .btn-dots::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* Кнопки в ряд переносятся, а не сжимаются в нечитаемые */
    .page-header .btn,
    .card-actions .btn {
        width: auto;
    }

    /* Адаптация панели действий в разделе клиентов */
    #clients-section .card > div {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    #clients-section .card > div > div {
        width: 100% !important;
    }

    #clients-section #btn-toggle-select-mode,
    #clients-section #btn-open-client-modal,
    #clients-section #btn-bulk-delete {
        flex: 1 !important;
        justify-content: center !important;
    }

    /* Адаптация KPI карточек в глобальной статистике (сетка 2х2) */
    .global-stats-main > div:has(#kpi-total-sessions) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .global-stats-main > div:has(#kpi-total-sessions) .card {
        padding: 0.85rem !important;
        gap: 0.5rem !important;
    }

    .global-stats-main > div:has(#kpi-total-sessions) .card > div:first-child {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }

    .global-stats-main > div:has(#kpi-total-sessions) [id^="kpi-"] {
        font-size: 1.15rem !important;
    }

    /* Адаптация панели фильтров медиафайлов */
    #client-tab-content-media > div > div:has(#client-media-filter-btns) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    #client-tab-content-media > div > div:has(#client-media-filter-btns) > div:last-child {
        width: 100% !important;
    }

    /* Live-ассистент на мобильных */
    .live-setup-grid,
    .live-sources {
        grid-template-columns: 1fr !important;
    }

    .live-actions {
        justify-content: stretch !important;
    }

    .live-actions .btn {
        flex: 1 1 calc(50% - 0.5rem) !important;
        justify-content: center !important;
    }

    .live-transcript-card {
        min-height: 360px !important;
        height: 55vh !important;
    }

    /* Панель администратора */
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .admin-feature-card > div {
        flex-direction: column !important;
    }

    .admin-feature-card .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Адаптивная карточка сессии в профиле клиента: кнопка никогда не перекрывает текст */
    .session-history-item {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0.9rem 1rem !important;
        gap: 0.65rem !important;
    }

    .session-history-main {
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .session-history-title {
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 0.95rem !important;
    }

    .session-history-actions {
        border-top: 1px solid var(--glass-border) !important;
        padding-top: 0.55rem !important;
        margin-top: 0.2rem !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    .session-history-actions .btn-open-session {
        flex: 1 !important;
        justify-content: center !important;
        min-height: 38px !important;
        height: 38px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
    }

    .session-history-actions .btn-dots {
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        flex-shrink: 0 !important;
    }

    /* Карточки в списке «Все Сессии» */
    .session-strip {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }

    .session-strip-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .session-strip-details {
        flex-wrap: wrap !important;
        gap: 0.6rem !important;
    }

    .session-strip > div:last-child {
        border-top: 1px solid var(--glass-border) !important;
        padding-top: 0.6rem !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    .session-strip > div:last-child .btn {
        flex: 1 !important;
        justify-content: center !important;
    }
}

/* Совсем узкие экраны (iPhone SE, 320px-400px) */
@media (max-width: 400px) {
    .main-content {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .card {
        padding: 0.85rem !important;
    }

    .page-header h2 {
        font-size: 1.2rem;
    }

    .btn {
        padding: 0.6rem 0.85rem;
        font-size: 0.85rem;
    }

    .global-stats-main > div:has(#kpi-total-sessions) {
        grid-template-columns: 1fr !important;
    }
}

/* -----------------------------------------------------------------
   Особенности мобильных браузеров
   ----------------------------------------------------------------- */

@media (max-width: 860px) {

    /* Safari на iOS принудительно приближает страницу, если шрифт поля
       меньше 16px. Задаём 16px, чтобы вёрстка не «прыгала» при фокусе. */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Инерционная прокрутка внутри прокручиваемых блоков. */
    .chat-panel,
    .modal-content,
    .transcript-container,
    .live-transcript {
        -webkit-overflow-scrolling: touch;
    }

    /* На телефоне не должно быть горизонтальной прокрутки страницы */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Длинные псевдонимы и имена файлов переносятся, а не растягивают строку. */
    .client-name,
    .data-table-title,
    .session-title {
        overflow-wrap: anywhere;
    }
}

/* 100vh на iOS включает высоту адресной строки, из-за чего низ экрана
   обрезается. Динамическая единица 100dvh учитывает реальную видимую область. */
@supports (height: 100dvh) {
    @media (max-width: 860px) {
        .main-content {
            min-height: 100dvh;
        }

        .sidebar {
            height: 100dvh;
        }
    }
}

/* Client Media Section Styles */
.active-media-filter {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.media-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.media-card img:hover {
    transform: scale(1.04);
}

/* ============================================================
   LIVE-АССИСТЕНТ
   Стенограмма приёма в реальном времени. Говорящие разделены
   цветом: источник звука однозначно определяет, кто говорит,
   поэтому различать реплики визуально можно без оговорок.
   ============================================================ */

.nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    animation: live-pulse 1.6s ease-in-out infinite;
}

.live-timer {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #ef4444;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
}

.live-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    animation: live-pulse 1.6s ease-in-out infinite;
}

.live-rec-dot.is-paused {
    background: #f59e0b;
    animation: none;
    opacity: 1;
}

@keyframes live-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

/* Одна тонкая полоса вместо карточки с заголовком: предупреждение важно
   заметить, а не читать как отдельный раздел страницы. */
.live-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1.1rem;
    border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.07);
}

.live-banner i {
    font-size: 0.95rem;
    color: #b45309;
    flex-shrink: 0;
}

.live-banner p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Левая колонка — управление записью, правая — стенограмма. На узких
   экранах колонки складываются друг под другом. */
.live-layout {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    align-items: stretch;
    gap: 1.5rem;
}

.live-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.live-card-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.live-card-title i {
    color: var(--accent-primary);
}

/* Панель управления заметно меняется, когда идёт запись: тёплая красная
   рамка держит взгляд, чтобы состояние читалось даже краем глаза. */
#live-control-card {
    transition: var(--transition), box-shadow 0.3s ease, border-color 0.3s ease;
}

#live-control-card.is-recording {
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.08), var(--shadow-lg);
}

#live-control-card.is-recording.is-paused {
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.08), var(--shadow-lg);
}

#btn-live-toggle.is-recording {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.35);
    animation: live-toggle-glow 2.2s ease-in-out infinite;
}

@keyframes live-toggle-glow {
    0%,
    100% {
        transform: scale(1) translateZ(0);
        opacity: 1;
    }

    50% {
        transform: scale(1.025) translateZ(0);
        opacity: 0.92;
    }
}

.live-setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.live-sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.live-source-card {
    padding: 1rem 1.15rem;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: var(--transition), background 0.3s ease, border-color 0.3s ease;
}

.live-source-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

/* Статус источника красит саму карточку: получилось «подключён» — карточка
   зеленеет, «нет доступа» — краснеет. Так не нужно вчитываться в текст. */
.live-source-card:has(.live-status-ok) {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.045);
}

.live-source-card:has(.live-status-error) {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.04);
}

.live-source-card:has(.live-status-warn) {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.04);
}

.live-source-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.live-source-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 70, 229, 0.1);
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.live-source-card:has(.live-status-ok) .live-source-icon {
    background: rgba(16, 185, 129, 0.12);
}

.live-source-card:has(.live-status-error) .live-source-icon {
    background: rgba(239, 68, 68, 0.12);
}

.live-source-card:has(.live-status-warn) .live-source-icon {
    background: rgba(245, 158, 11, 0.12);
}

.live-source-head i {
    font-size: 1.1rem;
    color: var(--accent-primary);
    width: 1.4rem;
    text-align: center;
}

.live-source-card:has(.live-status-ok) .live-source-head i {
    color: #059669;
}

.live-source-card:has(.live-status-error) .live-source-head i {
    color: #dc2626;
}

.live-source-card:has(.live-status-warn) .live-source-head i {
    color: #b45309;
}

.live-source-head strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.live-source-head span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Полоска уровня: без неё непонятно, идёт ли звук вообще, а обнаружить
   тишину по пустой стенограмме можно только через минуту приёма. */
.live-level {
    height: 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.22);
    overflow: hidden;
}

.live-level-sm {
    width: 60px;
    height: 4px;
}

.live-level-bar {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, #10b981, #6366f1);
    transition: width 0.08s linear;
}

.live-source-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 28px;
}

.btn-mic-test {
    padding: 0.28rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.btn-mic-test:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

.btn-mic-test.testing {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.btn-mic-test.testing:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.55);
}

.live-source-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.live-source-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.live-status-idle {
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.14);
}

.live-status-ok {
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
}

.live-status-warn {
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
}

.live-status-error {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.12);
}

.live-status-ok::before {
    animation: live-pulse 1.6s ease-in-out infinite;
}

/* Измеренная задержка канала клиента. Показывается только во время записи и
           только как сведения: настраивать её вручную не нужно. */
.live-latency {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.live-latency i {
    font-size: 0.68rem;
    opacity: 0.7;
}

#live-latency-value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.live-hint-plain {
    margin: -0.75rem 0 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.live-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

#btn-live-toggle {
    min-width: 200px;
}

.live-resume-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--glass-border);
}

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

.live-resume-row strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.live-resume-row span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.live-resume-actions {
    display: flex;
    gap: 0.5rem;
}

.live-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.live-toolbar-sources {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.live-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.live-chip i {
    color: var(--accent-primary);
}

.live-queue {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.15);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.live-toolbar-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.live-transcript-card {
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: 720px;
    position: relative;
    align-self: start;
}

.live-transcript-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.live-scroll-down-btn {
    position: absolute;
    bottom: 16px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-gradient, linear-gradient(135deg, #6366f1 0%, #4f46e5 100%));
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.live-scroll-down-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.live-scroll-down-btn:hover {
    background: var(--accent-secondary, #818cf8);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.live-scroll-down-btn:active {
    transform: translateY(0) scale(0.95);
}

.live-transcript-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.live-transcript-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

.live-transcript {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 160px;
    max-height: 560px;
    height: auto;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 1rem;
    border-radius: 14px;
    background: var(--bg-tertiary);
    scrollbar-width: thin;
    scrollbar-color: rgba(79, 70, 229, 0.3) transparent;
}

.live-transcript::-webkit-scrollbar {
    width: 8px;
}

.live-transcript::-webkit-scrollbar-track {
    background: transparent;
}

.live-transcript::-webkit-scrollbar-thumb {
    background: rgba(79, 70, 229, 0.25);
    border-radius: 8px;
}

.live-transcript::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 70, 229, 0.4);
}

.live-empty {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 380px;
    line-height: 1.5;
}

.live-empty i {
    font-size: 1.9rem;
    color: var(--accent-primary);
    opacity: 0.35;
}

.live-utterance {
    padding: 0.75rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--bg-secondary);
    border-left-width: 3px;
    max-width: 82%;
    transition: var(--transition);
}

.live-utterance:hover {
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.15);
    transform: translateY(-1px);
}

/* Только у последней (только что добавленной) реплики — иначе перерисовка
   всей ленты на каждое новое сообщение заставляла бы мигать всю историю. */
.live-utterance:last-child {
    animation: live-utterance-in 0.25s ease;
}

@keyframes live-utterance-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.live-utterance-therapist {
    border-left-color: var(--accent-primary);
    border-radius: 14px 14px 14px 4px;
    align-self: flex-start;
}

.live-utterance-client {
    border-left-color: #10b981;
    border-radius: 14px 14px 4px 14px;
    align-self: flex-end;
}

.live-utterance-note {
    border-left-color: #f59e0b;
    align-self: center;
    max-width: 92%;
    background: rgba(245, 158, 11, 0.06);
}

.live-utterance-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.live-utterance-speaker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.live-utterance-speaker i {
    font-size: 0.68rem;
}

.live-utterance-therapist .live-utterance-speaker {
    background: rgba(79, 70, 229, 0.1);
    color: var(--accent-primary);
}

.live-utterance-client .live-utterance-speaker {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.live-utterance-note .live-utterance-speaker {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.live-utterance-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.live-utterance-actions {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.live-utterance:hover .live-utterance-actions {
    opacity: 1;
}

.live-utterance-actions button {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.72rem;
    transition: var(--transition);
}

.live-utterance-actions button:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-primary);
}

.live-utterance-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Строка занята фразой, текст которой ещё распознаётся. Место в хронологии
           уже её, поэтому пришедший текст не сдвигает соседние реплики. */
.live-utterance.is-pending .live-utterance-text {
    color: var(--text-muted);
    font-style: italic;
    animation: live-pending 1.4s ease-in-out infinite;
}

.live-utterance.is-failed .live-utterance-text {
    color: #dc2626;
    font-style: italic;
}

@keyframes live-pending {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.85;
    }
}

.live-note-form {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
}

.live-note-form .form-input {
    flex: 1;
}

@media (max-width: 960px) {
    .live-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .live-utterance {
        max-width: 100%;
    }

    .live-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .live-transcript {
        max-height: none;
    }

    .live-actions {
        flex-direction: column;
        align-items: stretch;
    }

    #btn-live-toggle {
        min-width: 0;
    }
}

/* Условия браузерного захвата звука: строка над разделом, а не карточка —
           это требование к настройке, а не отдельный блок интерфейса. */
.live-browser-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.07);
    border: 1px solid rgba(99, 102, 241, 0.18);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.live-browser-note i {
    color: var(--accent-primary);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.live-browser-note strong {
    color: var(--text-primary);
}

/* Причина, по которой захват недоступен именно сейчас: не совет, а
           препятствие — поэтому отдельной строкой и цветом. */
.live-browser-blocked {
    display: block;
    margin-top: 0.35rem;
    color: #b45309;
    font-weight: 600;
}

/* ==========================================================================
   Live Assistant: Chat & Clinical Hints Drawer
   ========================================================================== */

.live-head-pill-btn {
    transition: var(--transition);
}

.live-head-pill-btn:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}

.live-drawer-backdrop,
.live-drawer-backdrop.is-open {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.live-assistant-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: min(480px, 90vw);
    background: var(--bg-secondary);
    border-left: 1px solid var(--glass-border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.live-assistant-drawer.is-open {
    transform: translateX(0);
}

#live-section {
    transition: margin-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-x: hidden;
}

@media (min-width: 900px) {
    #live-section.drawer-is-open {
        margin-right: calc(480px - 3.5rem + 1.5rem);
    }
}

@media (max-width: 1280px) {
    #live-section.drawer-is-open .live-layout {
        grid-template-columns: 1fr;
    }
}

.live-open-drawer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 10px;
    font-weight: 600;
    animation: live-btn-fade-in 0.25s ease-out;
}

@keyframes live-btn-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#live-section.drawer-is-open .live-open-drawer-btn,
#live-section.drawer-is-open #btn-live-open-chat,
#live-section.drawer-is-open #btn-live-open-hints,
body.live-drawer-open .live-open-drawer-btn,
body.live-drawer-open #btn-live-open-chat,
body.live-drawer-open #btn-live-open-hints {
    display: none !important;
}

.live-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--glass-border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    gap: 0.75rem;
}

.live-drawer-tabs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-tertiary);
    padding: 0.25rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

.live-drawer-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.live-drawer-tab-btn:hover {
    color: var(--text-primary);
}

.live-drawer-tab-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.live-drawer-close-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.live-drawer-close-btn:hover {
    color: var(--text-primary);
    background: rgba(239, 68, 68, 0.15);
}

.live-drawer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.live-drawer-view {
    display: none;
    flex: 1;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.live-drawer-view.active {
    display: flex;
}

/* Chat View */
.live-chat-suggestions {
    display: flex;
    gap: 0.35rem;
    padding: 0.65rem 1rem;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.live-suggestion-chip {
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}

.live-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 0;
}

.live-chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    text-align: center;
    max-width: 300px;
    color: var(--text-muted);
    font-size: 0.85rem;
    gap: 0.5rem;
    padding: 2rem 0;
}

.live-chat-empty-state i {
    font-size: 2.2rem;
    color: var(--accent-primary);
    opacity: 0.4;
}

.live-chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 86%;
    padding: 0.75rem 0.95rem;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    word-break: break-word;
}

.live-chat-msg.user {
    align-self: flex-end;
    background: var(--accent-gradient);
    color: white;
    border-bottom-right-radius: 3px;
}

.live-chat-msg.assistant {
    align-self: flex-start;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-bottom-left-radius: 3px;
}

.live-chat-msg-time {
    font-size: 0.68rem;
    opacity: 0.65;
    margin-top: 0.3rem;
    align-self: flex-end;
}

.live-chat-typing {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.live-chat-form {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--glass-border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.live-chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.35rem 0.6rem;
    box-sizing: border-box;
}

.live-chat-textarea {
    flex: 1;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.35rem 0.25rem !important;
    font-size: 0.88rem;
    font-family: inherit;
    line-height: 1.45;
    resize: none;
    min-height: 24px;
    max-height: 140px;
    overflow-y: auto;
    outline: none;
    color: var(--text-primary);
    box-sizing: border-box;
}

.live-chat-voice-btn,
.live-chat-send-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.live-chat-voice-btn {
    background: transparent;
    color: var(--text-secondary);
}

.live-chat-voice-btn:hover,
.live-chat-voice-btn.recording {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.live-chat-send-btn {
    background: var(--accent-gradient);
    color: white;
}

.live-chat-send-btn:hover {
    transform: scale(1.04);
}

/* Hints View Toolbar & Proportional Action Buttons */
.live-hints-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.55rem 0.85rem !important;
    border-bottom: 1px solid var(--glass-border) !important;
    background: var(--bg-secondary) !important;
    flex-shrink: 0 !important;
    gap: 0.45rem !important;
    overflow: visible !important;
}

.live-hints-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* Все 4 кнопки тулбара подсказок имеют строго одинаковую высоту (30px), шрифт, скругление и центровку */
#btn-live-refresh-hints,
.live-hints-auto-btn,
.live-hints-focus-trigger,
.live-hints-settings-trigger {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    vertical-align: middle !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
}

/* 1. Кнопка «Обновить» */
#btn-live-refresh-hints {
    padding: 0 0.75rem !important;
    gap: 0.35rem !important;
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25) !important;
}

#btn-live-refresh-hints:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
}

#btn-live-refresh-hints i {
    font-size: 0.8rem !important;
}

/* 2. Кнопка «Авто» */
.live-hints-auto-btn {
    padding: 0 0.55rem !important;
    gap: 0.35rem !important;
    border: 1px solid var(--glass-border) !important;
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

.live-hints-auto-btn:hover {
    color: var(--text-primary) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

.live-hints-auto-btn.active {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
}

.live-hints-auto-btn i {
    font-size: 0.8rem !important;
}

.live-hints-auto-btn.active i {
    animation: live-pulse 1.8s infinite ease-in-out;
    color: #10b981 !important;
}

.live-auto-badge {
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    padding: 0.12rem 0.32rem !important;
    border-radius: 999px !important;
    background: rgba(148, 163, 184, 0.2) !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.03em !important;
    line-height: 1 !important;
}

.live-hints-auto-btn.active .live-auto-badge {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #059669 !important;
}

/* 3. Кнопка выбора фокуса «Оптимально ▾» */
.live-hints-focus-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.live-hints-focus-trigger {
    padding: 0 0.6rem !important;
    gap: 0.35rem !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    white-space: nowrap;
}

.live-hints-focus-trigger:hover,
.live-hints-focus-trigger.active {
    background: rgba(168, 85, 247, 0.12) !important;
    border-color: rgba(168, 85, 247, 0.35) !important;
    color: var(--text-primary) !important;
}

.live-hints-focus-trigger i.fa-crosshairs {
    color: var(--accent-primary, #a855f7) !important;
    font-size: 0.8rem !important;
}

.live-hints-focus-arrow {
    font-size: 0.65rem !important;
    margin-left: 0.1rem !important;
    opacity: 0.7;
    transition: transform 0.2s ease !important;
}

.live-hints-focus-trigger.active .live-hints-focus-arrow {
    transform: rotate(180deg);
}

.live-hints-focus-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    width: 265px;
    max-width: calc(100vw - 2rem);
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    background: var(--bg-tertiary, #1e1e28);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.35rem;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    animation: fadeInFocusMenu 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.live-hints-focus-menu::-webkit-scrollbar {
    width: 4px;
}

.live-hints-focus-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.live-hints-focus-menu.is-open {
    display: flex;
}

@keyframes fadeInFocusMenu {
    from {
        opacity: 0;
        transform: translate(-50%, -4px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.live-hints-focus-header {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.35rem 0.6rem 0.25rem;
}

.live-hints-focus-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.live-hints-focus-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.live-hints-focus-item.active {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.35);
    color: var(--text-primary);
}

.live-hints-focus-item i {
    font-size: 0.88rem;
    color: var(--accent-primary, #a855f7);
    margin-top: 0.15rem;
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
}

.live-hints-focus-item-text {
    flex: 1;
    min-width: 0;
}

.live-hints-focus-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}

.live-hints-focus-desc {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.25;
    margin-top: 0.15rem;
}

.live-hints-focus-item.active .live-hints-focus-title {
    color: #c084fc;
}

/* Live Hints Settings Trigger Button */
.live-hints-settings-trigger {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    flex-shrink: 0 !important;
}

.live-hints-settings-trigger:hover,
.live-hints-settings-trigger.active {
    background: rgba(168, 85, 247, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: var(--text-primary) !important;
}

.live-hints-settings-trigger i {
    font-size: 0.82rem !important;
    transition: transform 0.3s ease, color 0.2s ease !important;
}

.live-hints-settings-trigger:hover i,
.live-hints-settings-trigger.active i {
    transform: rotate(45deg);
    color: var(--accent-primary, #a855f7) !important;
}

/* Кнопка «Скопировать» справа снизу в панели подсказок */
.live-hints-fab-copy {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1100;
    height: 38px;
    padding: 0 1rem;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.live-hints-fab-copy.is-visible {
    display: inline-flex !important;
    animation: fabHintsFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.live-hints-fab-copy:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 22px rgba(99, 102, 241, 0.6), 0 3px 8px rgba(0, 0, 0, 0.4);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}

.live-hints-fab-copy:active {
    transform: translateY(0) scale(0.98);
}

.live-hints-fab-copy.copied {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45) !important;
    color: #ffffff !important;
}

.live-hints-fab-copy i {
    font-size: 0.88rem;
}

/* Карточка подсказок: шапка с метаданными и кнопкой копирования */
.live-hints-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.live-hints-card-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.live-hints-header-copy-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary, #6366f1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    transition: all 0.2s ease;
}

.live-hints-header-copy-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: #ffffff;
}

.live-hints-header-copy-btn.copied {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #ffffff !important;
}

/* Блок контекста реплик диалога в карточке подсказок — скрыт в лайв-режиме, цитаты передаются при копировании по кнопке */
.live-hints-context-box {
    display: none !important;
    margin: 0.75rem 1rem 0 1rem;
    padding: 0.65rem 0.85rem;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    font-size: 0.8rem;
    flex-direction: column;
    gap: 0.35rem;
}

.live-hints-context-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-primary, #6366f1);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.live-hints-context-rows {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.live-hints-context-row {
    line-height: 1.45;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.live-hints-context-speaker {
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.live-hints-context-row.is-client .live-hints-context-speaker {
    color: #38bdf8;
}

.live-hints-context-row.is-therapist .live-hints-context-speaker {
    color: #a78bfa;
}

.live-hints-context-text {
    color: var(--text-primary);
    font-style: italic;
    word-break: break-word;
}

.live-hints-context-ts {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* Live Hints Settings Modal / Overlay Panel */
#live-drawer-view-hints {
    position: relative !important;
}

.live-hints-settings-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background: rgba(10, 12, 18, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    box-sizing: border-box;
    animation: fadeInHintsModal 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInHintsModal {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.live-hints-settings-card {
    background: var(--bg-primary, #12141c);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
    width: 100%;
    max-width: 440px;
    max-height: 94%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.live-hints-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.live-hints-settings-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.live-hints-settings-title i {
    color: var(--accent-primary, #a855f7);
    font-size: 0.95rem;
}

.live-hints-settings-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.live-hints-settings-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.live-hints-settings-nav {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--glass-border);
    padding: 0.35rem 0.65rem;
    gap: 0.25rem;
    flex-shrink: 0;
}

.live-hints-tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.25rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.live-hints-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.live-hints-tab-btn.active {
    background: var(--bg-tertiary);
    color: var(--accent-primary, #c084fc);
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.live-hints-tab-btn i {
    font-size: 0.78rem;
}

.live-hints-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem 1rem;
    min-height: 0;
    scrollbar-width: thin;
}

.live-hints-settings-pane {
    display: none;
    flex-direction: column;
    gap: 0.9rem;
}

.live-hints-settings-pane.active {
    display: flex;
}

.live-settings-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.live-settings-label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

/* Radio Option Cards */
.live-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.live-radio-option {
    display: flex;
    align-items: flex-start;
    padding: 0.55rem 0.7rem;
    border-radius: 9px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.live-radio-option:hover {
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(255, 255, 255, 0.03);
}

.live-radio-option input[type="radio"] {
    margin-top: 0.2rem;
    margin-right: 0.65rem;
    cursor: pointer;
    accent-color: var(--accent-primary, #a855f7);
    flex-shrink: 0;
}

.live-radio-option:has(input[type="radio"]:checked) {
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(168, 85, 247, 0.08);
}

.live-radio-content {
    flex: 1;
    min-width: 0;
}

.live-radio-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    display: flex;
    align-items: center;
}

.live-radio-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 0.15rem;
}

.live-default-tag {
    font-size: 0.62rem;
    font-weight: 700;
    color: #a855f7;
    background: rgba(168, 85, 247, 0.14);
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 0.08rem 0.35rem;
    border-radius: 999px;
    margin-left: 0.4rem;
    white-space: nowrap;
}

/* Checkbox Cards */
.live-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.live-check-option {
    display: flex;
    align-items: flex-start;
    padding: 0.55rem 0.7rem;
    border-radius: 9px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 0.65rem;
}

.live-check-option:hover {
    border-color: rgba(168, 85, 247, 0.4);
}

.live-check-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.live-check-box {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid var(--text-muted);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.12rem;
    transition: all 0.2s ease;
}

.live-check-box i {
    font-size: 0.65rem;
    color: white;
    display: none;
}

.live-check-option input[type="checkbox"]:checked + .live-check-box {
    background: var(--accent-primary, #a855f7);
    border-color: var(--accent-primary, #a855f7);
}

.live-check-option input[type="checkbox"]:checked + .live-check-box i {
    display: block;
}

.live-check-option:has(input[type="checkbox"]:checked) {
    background: rgba(168, 85, 247, 0.06);
    border-color: rgba(168, 85, 247, 0.35);
}

.live-check-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.live-check-title {
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.live-check-desc {
    font-size: 0.71rem;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 0.12rem;
}

/* Switch Toggle List */
.live-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.live-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-radius: 9px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    gap: 0.8rem;
}

.live-toggle-info {
    flex: 1;
    min-width: 0;
}

.live-toggle-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    display: flex;
    align-items: center;
}

.live-toggle-desc {
    font-size: 0.71rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 0.15rem;
}

/* iOS-style Live Switch */
.live-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}

.live-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.live-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--glass-border);
    transition: 0.25s ease;
    border-radius: 22px;
}

.live-switch-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.25s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.live-switch input:checked + .live-switch-slider {
    background-color: var(--accent-primary, #a855f7);
    border-color: var(--accent-primary, #a855f7);
}

.live-switch input:checked + .live-switch-slider:before {
    transform: translateX(16px);
}

/* Modal Footer */
.live-hints-settings-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--glass-border);
    gap: 0.6rem;
    flex-shrink: 0;
}

#psyplus-toast-host {
    position: fixed !important;
    bottom: 1.25rem !important;
    right: 1.25rem !important;
    top: auto !important;
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    pointer-events: none !important;
}

.live-hints-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.15rem 1.15rem 4.5rem 1.15rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.live-hints-empty-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    text-align: center;
    max-width: 320px;
    color: var(--text-muted);
    padding: 2.5rem 0;
    gap: 0.65rem;
}

.live-hints-empty-placeholder i {
    font-size: 2.5rem;
    color: #f59e0b;
    opacity: 0.6;
}

.live-hints-empty-placeholder h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.live-hints-empty-placeholder p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
}

.live-hints-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.live-hints-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-primary);
}

.live-hints-card p,
.live-hints-card ul {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Карточка подсказок с шапкой и кнопкой копирования в документ */
.live-hints-card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.live-hints-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.live-hints-card-info {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.live-hints-card-info i {
    color: #f59e0b;
}

.live-hints-timestamp {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.live-hints-inline-copy-btn {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    padding: 0 0.65rem !important;
    gap: 0.35rem !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(99, 102, 241, 0.12) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    color: var(--accent-primary, #818cf8) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.live-hints-inline-copy-btn:hover {
    background: rgba(99, 102, 241, 0.22) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.live-hints-inline-copy-btn.copied {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #10b981 !important;
}

/* Исключает мигание окна авторизации при обновлении страницы авторизованным пользователем */
html.is-authenticated #auth-overlay {
    display: none !important;
}

/* Скрывает рабочую область и боковое меню до успешной авторизации */
html:not(.is-authenticated) .sidebar,
html:not(.is-authenticated) .mobile-topbar,
html:not(.is-authenticated) .main-content {
    display: none !important;
}

/* Dark Theme Component Refinements */
html:not([data-theme="light"]) body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    background-image:
        radial-gradient(circle at 5% 5%, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
        radial-gradient(circle at 95% 95%, rgba(255, 255, 255, 0.02) 0%, transparent 40%);
}

html:not([data-theme="light"]) input,
html:not([data-theme="light"]) textarea,
html:not([data-theme="light"]) select,
html:not([data-theme="light"]) .form-control {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

html:not([data-theme="light"]) input::placeholder,
html:not([data-theme="light"]) textarea::placeholder {
    color: var(--text-muted) !important;
}

html:not([data-theme="light"]) .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

html:not([data-theme="light"]) .dropdown-item {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .dropdown-item:hover {
    background-color: var(--glass-bg-hover) !important;
}

html:not([data-theme="light"]) .btn-archive-client {
    color: var(--text-muted) !important;
}

html:not([data-theme="light"]) .btn-archive-client:hover {
    color: #a78bfa !important;
    background: rgba(167, 139, 250, 0.18) !important;
}

html:not([data-theme="light"]) .btn-archive-client.archived {
    color: #818cf8 !important;
    background: rgba(129, 140, 248, 0.18) !important;
    border-color: rgba(129, 140, 248, 0.35) !important;
}

html:not([data-theme="light"]) .folder-tab.archive-tab {
    border-color: rgba(167, 139, 250, 0.3) !important;
    color: #c4b5fd !important;
    background: rgba(167, 139, 250, 0.08) !important;
}

html:not([data-theme="light"]) .folder-tab.archive-tab:hover {
    background: rgba(167, 139, 250, 0.16) !important;
    color: #ddd6fe !important;
}

html:not([data-theme="light"]) .folder-tab.archive-tab.active {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
}

html:not([data-theme="light"]) .client-archive-dropzone {
    background: #252525;
    border-color: rgba(167, 139, 250, 0.6);
    color: #c4b5fd;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(167, 139, 250, 0.25);
}

html:not([data-theme="light"]) .client-archive-dropzone.drag-over {
    background: #7c3aed;
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 20px 48px rgba(124, 58, 237, 0.6), 0 0 0 4px rgba(167, 139, 250, 0.4);
}

html:not([data-theme="light"]) .client-archive-dropzone.restore-mode {
    background: #252525;
    border-color: rgba(52, 211, 153, 0.6);
    color: #6ee7b7;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(52, 211, 153, 0.25);
}

html:not([data-theme="light"]) .client-archive-dropzone.restore-mode.drag-over {
    background: #059669;
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 20px 48px rgba(16, 185, 129, 0.6), 0 0 0 4px rgba(52, 211, 153, 0.4);
}

html:not([data-theme="light"]) .client-card.is-archived {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

html:not([data-theme="light"]) .badge-archived {
    color: #94a3b8 !important;
    background: rgba(148, 163, 184, 0.15) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

html:not([data-theme="light"]) .modal-card {
    background-color: var(--bg-secondary) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .chat-message-content {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

html:not([data-theme="light"]) .chat-message.user .chat-message-content {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .status-completed {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--success) !important;
}

html:not([data-theme="light"]) .status-processing {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--warning) !important;
}

html:not([data-theme="light"]) .status-failed {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--danger) !important;
}

html:not([data-theme="light"]) pre,
html:not([data-theme="light"]) code {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: var(--text-primary) !important;
}

/* Custom Translucent Dark Scrollbars */
html:not([data-theme="light"]) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* Replace hardcoded whites with CSS vars across containers */
html:not([data-theme="light"]) .sidebar,
html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .client-card,
html:not([data-theme="light"]) .session-strip,
html:not([data-theme="light"]) .results-banner,
html:not([data-theme="light"]) .bubble-therapist,
html:not([data-theme="light"]) .rec-item,
html:not([data-theme="light"]) .chat-panel,
html:not([data-theme="light"]) .key-row,
html:not([data-theme="light"]) .score-circle,
html:not([data-theme="light"]) .mobile-topbar {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

/* ALL Primary Buttons & Active Items in Dark Mode */
html:not([data-theme="light"]) .btn,
html:not([data-theme="light"]) .btn-primary,
html:not([data-theme="light"]) .nav-link.active,
html:not([data-theme="light"]) .nav-item.active,
html:not([data-theme="light"]) #btn-start-record,
html:not([data-theme="light"]) .btn-analyze,
html:not([data-theme="light"]) .chat-send-btn,
html:not([data-theme="light"]) .clinical-pill-btn.active,
html:not([data-theme="light"]) .folder-tab.active,
html:not([data-theme="light"]) .auth-tab.active,
html:not([data-theme="light"]) .active-media-filter,
html:not([data-theme="light"]) .btn-secondary.active-tab,
html:not([data-theme="light"]) .tab-btn.active {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #f8fafc !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
}

html:not([data-theme="light"]) .btn:hover,
html:not([data-theme="light"]) .btn-primary:hover,
html:not([data-theme="light"]) .nav-link.active:hover,
html:not([data-theme="light"]) #btn-start-record:hover,
html:not([data-theme="light"]) .btn-analyze:hover,
html:not([data-theme="light"]) .chat-send-btn:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* Secondary Buttons, Delete Buttons, Dots, Tags */
html:not([data-theme="light"]) .btn-secondary,
html:not([data-theme="light"]) .folder-tab,
html:not([data-theme="light"]) .quiz-tag-btn,
html:not([data-theme="light"]) .clinical-pill-btn,
html:not([data-theme="light"]) .tab-btn,
html:not([data-theme="light"]) .btn-dots,
html:not([data-theme="light"]) .key-delete-btn,
html:not([data-theme="light"]) .btn-delete-card {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

html:not([data-theme="light"]) .btn-secondary:hover,
html:not([data-theme="light"]) .folder-tab:hover,
html:not([data-theme="light"]) .quiz-tag-btn:hover,
html:not([data-theme="light"]) .clinical-pill-btn:hover,
html:not([data-theme="light"]) .tab-btn:hover,
html:not([data-theme="light"]) .btn-dots:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

/* KPI & Stat Card Label Colors */
html:not([data-theme="light"]) .card div[style*="font-size: 0.7rem"],
html:not([data-theme="light"]) .card div[style*="letter-spacing"] {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

html:not([data-theme="light"]) #client-global-trend-summary {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) #cognitive-distortions-container {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .card h4,
html:not([data-theme="light"]) .card h3 {
    color: var(--text-primary) !important;
}


/* Dark Theme Component Refinements */
html:not([data-theme="light"]) body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    background-image:
        radial-gradient(circle at 5% 5%, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
        radial-gradient(circle at 95% 95%, rgba(255, 255, 255, 0.02) 0%, transparent 40%);
}

html:not([data-theme="light"]) input,
html:not([data-theme="light"]) textarea,
html:not([data-theme="light"]) select,
html:not([data-theme="light"]) .form-control {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

html:not([data-theme="light"]) input::placeholder,
html:not([data-theme="light"]) textarea::placeholder {
    color: var(--text-muted) !important;
}

html:not([data-theme="light"]) .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

html:not([data-theme="light"]) .dropdown-item {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .dropdown-item:hover {
    background-color: var(--glass-bg-hover) !important;
}

html:not([data-theme="light"]) .modal-card {
    background-color: var(--bg-secondary) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .chat-message-content {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

html:not([data-theme="light"]) .chat-message.user .chat-message-content {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .status-completed {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--success) !important;
}

html:not([data-theme="light"]) .status-processing {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--warning) !important;
}

html:not([data-theme="light"]) .status-failed {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--danger) !important;
}

html:not([data-theme="light"]) pre,
html:not([data-theme="light"]) code {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: var(--text-primary) !important;
}

/* Custom Translucent Dark Scrollbars */
html:not([data-theme="light"]) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.18) !important;
    border-radius: 4px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 4px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35) !important;
}

/* Replace hardcoded whites with CSS vars across containers */
html:not([data-theme="light"]) .sidebar,
html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .client-card,
html:not([data-theme="light"]) .session-strip,
html:not([data-theme="light"]) .results-banner,
html:not([data-theme="light"]) .bubble-therapist,
html:not([data-theme="light"]) .rec-item,
html:not([data-theme="light"]) .chat-panel,
html:not([data-theme="light"]) .key-row,
html:not([data-theme="light"]) .score-circle,
html:not([data-theme="light"]) .mobile-topbar {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

/* ALL Primary Buttons & Active Items in Dark Mode - Pure Neutral Charcoal Gradient */
html:not([data-theme="light"]) .btn,
html:not([data-theme="light"]) .btn-primary,
html:not([data-theme="light"]) .nav-link.active,
html:not([data-theme="light"]) .nav-item.active,
html:not([data-theme="light"]) #btn-start-record,
html:not([data-theme="light"]) .btn-analyze,
html:not([data-theme="light"]) .chat-send-btn,
html:not([data-theme="light"]) .clinical-pill-btn.active,
html:not([data-theme="light"]) .folder-tab.active,
html:not([data-theme="light"]) .auth-tab.active,
html:not([data-theme="light"]) .active-media-filter,
html:not([data-theme="light"]) .btn-secondary.active-tab,
html:not([data-theme="light"]) .tab-btn.active {
    background: linear-gradient(135deg, #444444 0%, #303030 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f5f5f5 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

html:not([data-theme="light"]) .btn:hover,
html:not([data-theme="light"]) .btn-primary:hover,
html:not([data-theme="light"]) .nav-link.active:hover,
html:not([data-theme="light"]) #btn-start-record:hover,
html:not([data-theme="light"]) .btn-analyze:hover,
html:not([data-theme="light"]) .chat-send-btn:hover {
    background: linear-gradient(135deg, #525252 0%, #3a3a3a 100%) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Secondary Buttons, Delete Buttons, Dots, Tags */
html:not([data-theme="light"]) .btn-secondary,
html:not([data-theme="light"]) .folder-tab,
html:not([data-theme="light"]) .quiz-tag-btn,
html:not([data-theme="light"]) .clinical-pill-btn,
html:not([data-theme="light"]) .tab-btn,
html:not([data-theme="light"]) .btn-dots,
html:not([data-theme="light"]) .key-delete-btn,
html:not([data-theme="light"]) .btn-delete-card {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

html:not([data-theme="light"]) .btn-secondary:hover,
html:not([data-theme="light"]) .folder-tab:hover,
html:not([data-theme="light"]) .quiz-tag-btn:hover,
html:not([data-theme="light"]) .clinical-pill-btn:hover,
html:not([data-theme="light"]) .tab-btn:hover,
html:not([data-theme="light"]) .btn-dots:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

/* KPI & Stat Card Label Colors */
html:not([data-theme="light"]) .card div[style*="font-size: 0.7rem"],
html:not([data-theme="light"]) .card div[style*="letter-spacing"] {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

html:not([data-theme="light"]) #client-global-trend-summary {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) #cognitive-distortions-container {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .card h4,
html:not([data-theme="light"]) .card h3 {
    color: var(--text-primary) !important;
}


/* Dark Theme Component Refinements - 100% Flat Solid Colors, ZERO Background Gradients */
html:not([data-theme="light"]) body {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) input,
html:not([data-theme="light"]) textarea,
html:not([data-theme="light"]) select,
html:not([data-theme="light"]) .form-control {
    background-color: var(--bg-tertiary) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

html:not([data-theme="light"]) input::placeholder,
html:not([data-theme="light"]) textarea::placeholder {
    color: var(--text-muted) !important;
}

html:not([data-theme="light"]) .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

html:not([data-theme="light"]) .dropdown-item {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .dropdown-item:hover {
    background-color: var(--glass-bg-hover) !important;
}

html:not([data-theme="light"]) .modal-card {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .chat-message-content {
    background-color: var(--bg-tertiary) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

html:not([data-theme="light"]) .chat-message.user .chat-message-content {
    background-color: #3d3d3d !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .status-completed {
    background-color: rgba(16, 185, 129, 0.15) !important;
    background-image: none !important;
    color: var(--success) !important;
}

html:not([data-theme="light"]) .status-processing {
    background-color: rgba(245, 158, 11, 0.15) !important;
    background-image: none !important;
    color: var(--warning) !important;
}

html:not([data-theme="light"]) .status-failed {
    background-color: rgba(239, 68, 68, 0.15) !important;
    background-image: none !important;
    color: var(--danger) !important;
}

html:not([data-theme="light"]) pre,
html:not([data-theme="light"]) code {
    background-color: rgba(0, 0, 0, 0.3) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
}

/* Custom Translucent Dark Scrollbars */
html:not([data-theme="light"]) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.18) !important;
    border-radius: 4px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* Replace hardcoded whites with CSS vars across containers */
html:not([data-theme="light"]) .sidebar,
html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .client-card,
html:not([data-theme="light"]) .session-strip,
html:not([data-theme="light"]) .results-banner,
html:not([data-theme="light"]) .bubble-therapist,
html:not([data-theme="light"]) .rec-item,
html:not([data-theme="light"]) .chat-panel,
html:not([data-theme="light"]) .key-row,
html:not([data-theme="light"]) .score-circle,
html:not([data-theme="light"]) .mobile-topbar {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
}

/* ALL Primary Buttons & Active Items - Flat Solid Grey Background, ZERO Gradients */
html:not([data-theme="light"]) .btn,
html:not([data-theme="light"]) .btn-primary,
html:not([data-theme="light"]) .nav-link.active,
html:not([data-theme="light"]) .nav-item.active,
html:not([data-theme="light"]) #btn-start-record,
html:not([data-theme="light"]) .btn-analyze,
html:not([data-theme="light"]) .chat-send-btn,
html:not([data-theme="light"]) .clinical-pill-btn.active,
html:not([data-theme="light"]) .folder-tab.active,
html:not([data-theme="light"]) .auth-tab.active,
html:not([data-theme="light"]) .active-media-filter,
html:not([data-theme="light"]) .btn-secondary.active-tab,
html:not([data-theme="light"]) .tab-btn.active {
    background: #4a4a4a !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
}

html:not([data-theme="light"]) .btn:hover,
html:not([data-theme="light"]) .btn-primary:hover,
html:not([data-theme="light"]) .nav-link.active:hover,
html:not([data-theme="light"]) #btn-start-record:hover,
html:not([data-theme="light"]) .btn-analyze:hover,
html:not([data-theme="light"]) .chat-send-btn:hover {
    background: #555555 !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Secondary Buttons, Delete Buttons, Dots, Tags */
html:not([data-theme="light"]) .btn-secondary,
html:not([data-theme="light"]) .folder-tab,
html:not([data-theme="light"]) .quiz-tag-btn,
html:not([data-theme="light"]) .clinical-pill-btn,
html:not([data-theme="light"]) .tab-btn,
html:not([data-theme="light"]) .btn-dots,
html:not([data-theme="light"]) .key-delete-btn,
html:not([data-theme="light"]) .btn-delete-card {
    background-color: var(--bg-tertiary) !important;
    background-image: none !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

html:not([data-theme="light"]) .btn-secondary:hover,
html:not([data-theme="light"]) .folder-tab:hover,
html:not([data-theme="light"]) .quiz-tag-btn:hover,
html:not([data-theme="light"]) .clinical-pill-btn:hover,
html:not([data-theme="light"]) .tab-btn:hover,
html:not([data-theme="light"]) .btn-dots:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
}

/* KPI & Stat Card Label Colors */
html:not([data-theme="light"]) .card div[style*="font-size: 0.7rem"],
html:not([data-theme="light"]) .card div[style*="letter-spacing"] {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

html:not([data-theme="light"]) #client-global-trend-summary {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) #cognitive-distortions-container {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .card h4,
html:not([data-theme="light"]) .card h3 {
    color: var(--text-primary) !important;
}


/* Dark Theme Component Refinements - Smooth Pixel-Free Shadows & Flat Colors */
html:not([data-theme="light"]) body {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) input,
html:not([data-theme="light"]) textarea,
html:not([data-theme="light"]) select,
html:not([data-theme="light"]) .form-control {
    background-color: var(--bg-tertiary) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
    box-shadow: none !important;
}

html:not([data-theme="light"]) input::placeholder,
html:not([data-theme="light"]) textarea::placeholder {
    color: var(--text-muted) !important;
}

html:not([data-theme="light"]) .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    border-color: var(--glass-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

html:not([data-theme="light"]) .dropdown-item {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .dropdown-item:hover {
    background-color: var(--glass-bg-hover) !important;
}

html:not([data-theme="light"]) .modal-card {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

html:not([data-theme="light"]) .chat-message-content {
    background-color: var(--bg-tertiary) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
    box-shadow: none !important;
}

html:not([data-theme="light"]) .chat-message.user .chat-message-content {
    background-color: #3d3d3d !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .status-completed {
    background-color: rgba(16, 185, 129, 0.15) !important;
    background-image: none !important;
    color: var(--success) !important;
}

html:not([data-theme="light"]) .status-processing {
    background-color: rgba(245, 158, 11, 0.15) !important;
    background-image: none !important;
    color: var(--warning) !important;
}

html:not([data-theme="light"]) .status-failed {
    background-color: rgba(239, 68, 68, 0.15) !important;
    background-image: none !important;
    color: var(--danger) !important;
}

html:not([data-theme="light"]) pre,
html:not([data-theme="light"]) code {
    background-color: rgba(0, 0, 0, 0.3) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
}

/* Custom Translucent Dark Scrollbars */
html:not([data-theme="light"]) ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.18) !important;
    border-radius: 4px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
}

html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* Replace hardcoded whites with CSS vars across containers */
html:not([data-theme="light"]) .sidebar,
html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .client-card,
html:not([data-theme="light"]) .insight-card,
html:not([data-theme="light"]) .session-strip,
html:not([data-theme="light"]) .results-banner,
html:not([data-theme="light"]) .bubble-therapist,
html:not([data-theme="light"]) .rec-item,
html:not([data-theme="light"]) .chat-panel,
html:not([data-theme="light"]) .key-row,
html:not([data-theme="light"]) .score-circle,
html:not([data-theme="light"]) .mobile-topbar {
    background-color: var(--bg-secondary) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border-color: var(--glass-border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* ALL Primary Buttons & Active Items - High Contrast Violet/Indigo Styling */
html:not([data-theme="light"]) .btn-primary,
html:not([data-theme="light"]) #btn-start-record,
html:not([data-theme="light"]) .btn-analyze,
html:not([data-theme="light"]) .chat-send-btn {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3) !important;
}

html:not([data-theme="light"]) .btn-primary:hover,
html:not([data-theme="light"]) #btn-start-record:hover,
html:not([data-theme="light"]) .btn-analyze:hover,
html:not([data-theme="light"]) .chat-send-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4) !important;
}

/* Secondary Buttons, Folder Tabs, Pill Buttons */
html:not([data-theme="light"]) .btn-secondary,
html:not([data-theme="light"]) .folder-tab,
html:not([data-theme="light"]) .quiz-tag-btn,
html:not([data-theme="light"]) .clinical-pill-btn,
html:not([data-theme="light"]) .tab-btn {
    background-color: var(--bg-tertiary) !important;
    background-image: none !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
}

html:not([data-theme="light"]) .btn-secondary:hover,
html:not([data-theme="light"]) .folder-tab:hover,
html:not([data-theme="light"]) .quiz-tag-btn:hover,
html:not([data-theme="light"]) .clinical-pill-btn:hover,
html:not([data-theme="light"]) .tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
}

/* Badges High Contrast Style */
.badge,
.status-badge {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    line-height: 1.2 !important;
    background: #6366f1 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3) !important;
}

/* Card Menu Buttons (Trash / Delete Icon Buttons) */
.card-menu-btn,
.supervisor-chat-card .card-menu-btn {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
    padding: 0.35rem 0.55rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.9 !important;
}

.supervisor-chat-card:hover .card-menu-btn,
.supervisor-chat-card.active .card-menu-btn,
.card-menu-btn:hover {
    opacity: 1 !important;
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

/* Delete / Danger Buttons */
.key-delete-btn,
.btn-delete-card,
.btn-delete-session,
.btn-delete-doc,
.btn-delete-client-doc {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
    border-radius: 6px !important;
    padding: 0.3rem 0.55rem !important;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.key-delete-btn:hover,
.btn-delete-card:hover,
.btn-delete-session:hover,
.btn-delete-doc:hover,
.btn-delete-client-doc:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* 3-Dots Action Button */
.btn-dots {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    border-radius: 8px !important;
    padding: 0.35rem 0.65rem !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.btn-dots:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

/* KPI & Stat Card Label Colors */
html:not([data-theme="light"]) .card div[style*="font-size: 0.7rem"],
html:not([data-theme="light"]) .card div[style*="letter-spacing"] {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

html:not([data-theme="light"]) #client-global-trend-summary {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) #cognitive-distortions-container {
    color: var(--text-primary) !important;
}

html:not([data-theme="light"]) .card h4,
html:not([data-theme="light"]) .card h3 {
    color: var(--text-primary) !important;
}

/* ==========================================
   Rendering Performance Optimizations
   (vercel-react-best-practices: rendering-content-visibility)
   ========================================== */
.session-card,
.live-utterance,
.chat-message,
.result-card {
    content-visibility: auto;
    contain-intrinsic-size: 1px 120px;
}

/* ============================================================
   SMART CLINICAL ANALYTICS 2.0 (Умная клиническая аналитика)
   ============================================================ */

/* Clinical Process Alert Banner */
.process-alert-banner {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1.15rem;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    animation: fadeIn 0.3s ease;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.process-alert-banner.is-collapsed {
    padding: 0.55rem 1.15rem;
}

.process-alert-banner.alert-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}

.process-alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    gap: 0.75rem;
    user-select: none;
    outline: none;
    border-radius: 8px;
    transition: opacity 0.15s ease;
}

.process-alert-header:hover {
    opacity: 0.92;
}

.process-alert-header:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.process-alert-header-left {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    flex: 1;
}

.process-alert-icon {
    font-size: 1.2rem;
    color: #ef4444;
    flex-shrink: 0;
    line-height: 1;
}

.process-alert-banner.alert-warning .process-alert-icon {
    color: #f59e0b;
}

.process-alert-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
    margin: 0;
    word-break: break-word;
}

.process-alert-banner.alert-warning .process-alert-title {
    color: #f59e0b;
}

.process-alert-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    opacity: 0.85;
    transition: all 0.2s ease;
    flex-shrink: 0;
    user-select: none;
    line-height: 1.2;
    outline: none;
    color: #ef4444;
}

.process-alert-banner.alert-warning .process-alert-toggle {
    color: #f59e0b;
}

.process-alert-toggle:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.process-alert-toggle-icon {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.process-alert-body {
    margin-top: 0.55rem;
    padding-left: 1.9rem;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin-top 0.25s ease;
    max-height: 500px;
    opacity: 1;
    user-select: text;
}

.process-alert-banner.is-collapsed .process-alert-body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
    padding-top: 0;
    padding-bottom: 0;
}

.process-alert-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* Badges: Trajectory, Delta, Volatility */
.trajectory-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trajectory-baseline {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.trajectory-positive {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.trajectory-progress {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.trajectory-crisis {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.trajectory-plateau {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.trajectory-mixed {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.delta-badge {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
}

.delta-positive-good {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.delta-negative-good {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.delta-worse {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.delta-neutral {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

.volatility-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 8px;
}

.volatility-low {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.volatility-moderate {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.volatility-high {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* CBT Chain Component */
.cbt-chain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-top: 0.75rem;
}

.cbt-step-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.cbt-step-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.35);
}

.cbt-step-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.cbt-step-badge {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
}

.cbt-step-a .cbt-step-badge { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.cbt-step-b .cbt-step-badge { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.cbt-step-core .cbt-step-badge { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.cbt-step-c .cbt-step-badge { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.cbt-step-coping .cbt-step-badge { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
.cbt-step-reframe .cbt-step-badge { background: rgba(16, 185, 129, 0.2); color: #34d399; }

.cbt-step-a .cbt-step-header span:last-child { color: #f59e0b; }
.cbt-step-b .cbt-step-header span:last-child { color: #ef4444; }
.cbt-step-core .cbt-step-header span:last-child { color: #c084fc; }
.cbt-step-c .cbt-step-header span:last-child { color: #60a5fa; }
.cbt-step-coping .cbt-step-header span:last-child { color: #f472b6; }
.cbt-step-reframe .cbt-step-header span:last-child { color: #34d399; }

.cbt-step-text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-primary) !important;
    font-weight: 500;
}

/* Target Outcomes Tracker */
#client-targets-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.65rem;
}

.target-item-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 0.65rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    transform: translateZ(0);
}

.target-item-card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.03);
    transform: translateY(-1px) translateZ(0);
}

.target-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.target-item-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.target-item-score-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.target-score-badge {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--accent-primary);
}

.target-progress-track {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.target-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.target-item-notes {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   ADMIN PANEL STYLES (ДЕНАРУ)
   ============================================================ */

.admin-super-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(245, 158, 11, 0.2));
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.admin-version-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(168, 85, 247, 0.35);
    color: #c084fc;
    user-select: all;
    cursor: default;
    transition: all 0.2s ease;
}

.admin-version-badge:hover {
    transform: translateY(-1px);
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.25);
}

.admin-version-badge.is-dev {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.18));
    border-color: rgba(245, 158, 11, 0.45);
    color: #fbbf24;
}

.btn-admin-nav:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.25), rgba(147, 51, 234, 0.25)) !important;
    border-color: rgba(147, 51, 234, 0.6) !important;
    box-shadow: 0 4px 14px rgba(147, 51, 234, 0.25) !important;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-stat-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.admin-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.3);
}

.admin-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.admin-stat-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

.admin-stat-lbl {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 0.2rem;
}

.admin-feature-card {
    padding: 1.35rem;
    border-radius: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    margin-bottom: 1.25rem;
    transition: border-color 0.2s ease;
}

.admin-feature-card:hover {
    border-color: rgba(147, 51, 234, 0.35);
}

.admin-progress-track {
    width: 100%;
    height: 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
}

.admin-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
    transition: width 0.35s ease;
}

.admin-log-console {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.75rem;
    color: #94a3b8;
    max-height: 140px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-log-item {
    line-height: 1.4;
    word-break: break-word;
}

.admin-log-item.success { color: #34d399; }
.admin-log-item.error { color: #f87171; }
.admin-log-item.warning { color: #fbbf24; }
.admin-log-item.info { color: #60a5fa; }

/* High Contrast Risk Banners and Alerts for Dark Theme */
html:not([data-theme="light"]) .risk-banner.risk-moderate,
html:not([data-theme="light"]) .risk-banner.risk-low {
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
}

html:not([data-theme="light"]) .risk-banner.risk-moderate .risk-banner-icon,
html:not([data-theme="light"]) .risk-banner.risk-moderate .risk-banner-title,
html:not([data-theme="light"]) .risk-banner.risk-low .risk-banner-icon,
html:not([data-theme="light"]) .risk-banner.risk-low .risk-banner-title {
    color: #f59e0b !important;
}

html:not([data-theme="light"]) .risk-banner.risk-moderate .risk-banner-text,
html:not([data-theme="light"]) .risk-banner.risk-low .risk-banner-text {
    color: #fef08a !important;
    opacity: 1 !important;
}

html:not([data-theme="light"]) .risk-banner.risk-moderate .risk-banner-toggle,
html:not([data-theme="light"]) .risk-banner.risk-low .risk-banner-toggle {
    color: #f59e0b !important;
    border-color: rgba(251, 191, 36, 0.45) !important;
    background: rgba(245, 158, 11, 0.15) !important;
}

html:not([data-theme="light"]) .risk-banner.risk-moderate .risk-banner-toggle:hover,
html:not([data-theme="light"]) .risk-banner.risk-low .risk-banner-toggle:hover {
    background: rgba(245, 158, 11, 0.28) !important;
}

html:not([data-theme="light"]) .risk-banner.risk-moderate .tag-trigger,
html:not([data-theme="light"]) .risk-banner.risk-low .tag-trigger {
    background: rgba(245, 158, 11, 0.22) !important;
    border-color: rgba(251, 191, 36, 0.45) !important;
    color: #fef08a !important;
}

html:not([data-theme="light"]) .risk-banner.risk-moderate .tag-trigger i,
html:not([data-theme="light"]) .risk-banner.risk-low .tag-trigger i {
    color: #f59e0b !important;
}

html:not([data-theme="light"]) .risk-banner.risk-high .tag-trigger,
html:not([data-theme="light"]) .risk-banner.risk-critical .tag-trigger {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(248, 113, 113, 0.5) !important;
    color: #fecaca !important;
}

html:not([data-theme="light"]) .risk-banner.risk-high .tag-trigger i,
html:not([data-theme="light"]) .risk-banner.risk-critical .tag-trigger i {
    color: #ff6b6b !important;
}

html:not([data-theme="light"]) .risk-banner.risk-high,
html:not([data-theme="light"]) .risk-banner.risk-critical {
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: rgba(248, 113, 113, 0.55) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25) !important;
}

html:not([data-theme="light"]) .risk-banner.risk-high .risk-banner-icon,
html:not([data-theme="light"]) .risk-banner.risk-high .risk-banner-title,
html:not([data-theme="light"]) .risk-banner.risk-critical .risk-banner-icon,
html:not([data-theme="light"]) .risk-banner.risk-critical .risk-banner-title {
    color: #ff6b6b !important;
}

html:not([data-theme="light"]) .risk-banner.risk-high .risk-banner-text,
html:not([data-theme="light"]) .risk-banner.risk-critical .risk-banner-text {
    color: #fecaca !important;
    opacity: 1 !important;
}

html:not([data-theme="light"]) .risk-banner.risk-high .risk-banner-toggle,
html:not([data-theme="light"]) .risk-banner.risk-critical .risk-banner-toggle {
    color: #ff6b6b !important;
    border-color: rgba(248, 113, 113, 0.5) !important;
    background: rgba(239, 68, 68, 0.18) !important;
}

html:not([data-theme="light"]) .risk-banner.risk-high .risk-banner-toggle:hover,
html:not([data-theme="light"]) .risk-banner.risk-critical .risk-banner-toggle:hover {
    background: rgba(239, 68, 68, 0.32) !important;
}

html:not([data-theme="light"]) .process-alert-banner {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
}

html:not([data-theme="light"]) .process-alert-icon,
html:not([data-theme="light"]) .process-alert-title {
    color: #ff6b6b !important;
}

html:not([data-theme="light"]) .process-alert-text {
    color: #fecaca !important;
}

html:not([data-theme="light"]) .process-alert-toggle {
    color: #ff6b6b !important;
    border-color: rgba(248, 113, 113, 0.5) !important;
    background: rgba(239, 68, 68, 0.15) !important;
}

html:not([data-theme="light"]) .process-alert-toggle:hover {
    background: rgba(239, 68, 68, 0.28) !important;
}

html:not([data-theme="light"]) .process-alert-banner.alert-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: rgba(251, 191, 36, 0.45) !important;
}

html:not([data-theme="light"]) .process-alert-banner.alert-warning .process-alert-icon,
html:not([data-theme="light"]) .process-alert-banner.alert-warning .process-alert-title {
    color: #f59e0b !important;
}

html:not([data-theme="light"]) .process-alert-banner.alert-warning .process-alert-text {
    color: #fef08a !important;
}

html:not([data-theme="light"]) .process-alert-banner.alert-warning .process-alert-toggle {
    color: #f59e0b !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
    background: rgba(245, 158, 11, 0.15) !important;
}

html:not([data-theme="light"]) .process-alert-banner.alert-warning .process-alert-toggle:hover {
    background: rgba(245, 158, 11, 0.28) !important;
}

@media (max-width: 640px) {
    .risk-banner-toggle-text,
    .process-alert-toggle-text {
        display: none;
    }
    .risk-banner-toggle,
    .process-alert-toggle {
        padding: 0.35rem 0.5rem;
    }
    .risk-banner-body,
    .process-alert-body {
        padding-left: 0;
    }
}

html:not([data-theme="light"]) .tag {
    background: rgba(99, 102, 241, 0.16) !important;
    border-color: rgba(129, 140, 248, 0.4) !important;
    color: #e0e7ff !important;
}

html:not([data-theme="light"]) .tag i {
    color: #818cf8 !important;
}

html:not([data-theme="light"]) .tag-trigger {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
    color: #fecaca !important;
}

html:not([data-theme="light"]) .tag-trigger i {
    color: #ff6b6b !important;
}

/* --- Live Assistant Unfinished Sessions List Layout --- */
.live-resume-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    margin-bottom: 0.85rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: var(--transition);
}

.live-resume-row:hover {
    border-color: rgba(99, 102, 241, 0.3);
}

.live-resume-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.live-resume-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
}

.live-resume-client-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.live-resume-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.live-resume-header-right {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.live-resume-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    white-space: nowrap;
}

.live-resume-badge.badge-stopped {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.live-resume-badge.badge-live {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.live-resume-trash-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition);
}

.live-resume-trash-btn:hover {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
}

.mic-active {
    color: #ef4444 !important;
    animation: mic-pulse 1.2s infinite alternate;
}

@keyframes mic-pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.15); opacity: 0.7; }
}

.live-resume-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
}

.live-resume-action-btn {
    font-size: 0.78rem !important;
    padding: 0.45rem 0.5rem !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    width: 100% !important;
}

/* ==========================================================================
   Multi-Mode Import Component (Document / Audio / Text)
   ========================================================================== */

.import-mode-switcher {
    display: flex;
    gap: 0.35rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    padding: 0.35rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.import-mode-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    line-height: 1.2;
}

.import-mode-btn i {
    font-size: 0.95rem;
    transition: transform 0.2s ease;
}

.import-mode-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.import-mode-btn:hover i {
    transform: scale(1.1);
}

.import-mode-btn.active {
    background: var(--accent-primary);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35);
}

.import-mode-panel {
    display: none;
    animation: fadeIn 0.2s ease-in-out;
}

.import-mode-panel.active {
    display: block;
}

.custom-smooth-spin {
    animation: smoothSpin 0.9s linear infinite;
    will-change: transform;
    display: inline-block;
}

@keyframes smoothSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.import-info-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.73rem;
    color: var(--text-muted);
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 8px;
    padding: 0.4rem 0.65rem;
    margin-bottom: 0.75rem;
    line-height: 1.35;
}

.import-info-hint i {
    color: var(--accent-primary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.import-textarea {
    width: 100%;
    min-height: 110px;
    max-height: 240px;
    box-sizing: border-box;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 0.75rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: var(--transition);
}

.import-textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* Inside-Session Import Widget & Dashed Button */
.custom-dashed-import-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 1.6rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed var(--glass-border);
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    user-select: none;
    outline: none;
    transform: translateZ(0);
}

.custom-dashed-import-btn:hover,
.custom-dashed-import-btn:focus-visible {
    background: rgba(99, 102, 241, 0.06);
    border-color: var(--accent-primary);
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

.custom-dashed-import-btn:active {
    transform: translateY(0) translateZ(0);
}

.dashed-import-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-primary);
    font-size: 1.65rem;
    margin-bottom: 0.6rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.custom-dashed-import-btn:hover .dashed-import-icon-box {
    background: var(--accent-primary);
    color: #ffffff;
    transform: scale(1.08) translateZ(0);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

.dashed-import-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.dashed-import-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    line-height: 1.3;
}

.session-import-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    overflow-y: auto;
}

.session-import-card-box {
    width: 100%;
    max-width: 540px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    text-align: left;
}

/* Accessibility & Smooth Motion Preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   AI Supervisor Responses & Markdown Clean Typography
   ========================================================================== */

/* 1. Complete Suppression of Harsh Horizontal Rules across all Chat & AI Panels */
.markdown-content hr,
.chat-bubble hr,
.chat-bubble-assistant hr,
.live-hints-body hr,
.live-chat-msg hr,
.live-chat-msg-body hr,
.transcript-section-card hr,
.client-global-chat-bubble hr,
.message-content hr,
.tab-content hr,
.admin-feature-card hr {
    display: none !important;
}

/* 2. Structured Headings in AI Responses */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.chat-bubble-assistant h1,
.chat-bubble-assistant h2,
.chat-bubble-assistant h3,
.chat-bubble-assistant h4,
.live-hints-body h1,
.live-hints-body h2,
.live-hints-body h3,
.live-hints-body h4,
.live-chat-msg-body h1,
.live-chat-msg-body h2,
.live-chat-msg-body h3,
.live-chat-msg-body h4 {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-top: 1.15rem;
    margin-bottom: 0.45rem;
    line-height: 1.35;
}

.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child,
.markdown-content h4:first-child,
.chat-bubble-assistant > :first-child,
.live-hints-body > :first-child,
.live-chat-msg-body > :first-child {
    margin-top: 0 !important;
}

.markdown-content h2,
.chat-bubble-assistant h2,
.live-hints-body h2,
.live-chat-msg-body h2 {
    font-size: 1.12rem;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.markdown-content h3,
.chat-bubble-assistant h3,
.live-hints-body h3,
.live-chat-msg-body h3 {
    font-size: 1.02rem;
    color: var(--accent-secondary, #818cf8);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.markdown-content h4,
.chat-bubble-assistant h4,
.live-hints-body h4,
.live-chat-msg-body h4 {
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* 3. Paragraphs & Typography Flow */
.markdown-content p,
.chat-bubble-assistant p,
.live-hints-body p,
.live-chat-msg-body p {
    margin-bottom: 0.65rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.markdown-content p:last-child,
.chat-bubble-assistant p:last-child,
.live-hints-body p:last-child,
.live-chat-msg-body p:last-child {
    margin-bottom: 0;
}

/* 4. Polished Lists */
.markdown-content ul,
.markdown-content ol,
.chat-bubble-assistant ul,
.chat-bubble-assistant ol,
.live-hints-body ul,
.live-hints-body ol,
.live-chat-msg-body ul,
.live-chat-msg-body ol {
    margin: 0.4rem 0 0.85rem 0;
    padding-left: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.markdown-content li,
.chat-bubble-assistant li,
.live-hints-body li,
.live-chat-msg-body li {
    line-height: 1.55;
    color: var(--text-secondary);
}

.markdown-content li strong,
.chat-bubble-assistant li strong,
.live-hints-body li strong,
.live-chat-msg-body li strong,
.markdown-content p strong,
.chat-bubble-assistant p strong,
.live-hints-body p strong,
.live-chat-msg-body p strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* 5. Therapeutic Dialogue Quotes & Callouts */
.markdown-content blockquote,
.chat-bubble-assistant blockquote,
.live-hints-body blockquote,
.live-chat-msg-body blockquote {
    margin: 0.75rem 0;
    padding: 0.65rem 1rem;
    background: rgba(99, 102, 241, 0.07);
    border-left: 3px solid var(--accent-primary, #6366f1);
    border-radius: 0 10px 10px 0;
    color: var(--text-primary);
    font-style: italic;
    line-height: 1.5;
}

.markdown-content blockquote p,
.chat-bubble-assistant blockquote p,
.live-hints-body blockquote p,
.live-chat-msg-body blockquote p {
    margin-bottom: 0;
    color: var(--text-primary);
}

/* 6. Tags & Pill Badges */
.markdown-content code,
.chat-bubble-assistant code,
.live-hints-body code,
.live-chat-msg-body code {
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent-secondary, #818cf8);
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    font-size: 0.88em;
    font-family: inherit;
    font-weight: 600;
}

:root[data-theme="light"] .markdown-content blockquote,
:root[data-theme="light"] .chat-bubble-assistant blockquote,
:root[data-theme="light"] .live-hints-body blockquote,
:root[data-theme="light"] .live-chat-msg-body blockquote {
    background: rgba(79, 70, 229, 0.05);
    border-left-color: var(--accent-primary, #4f46e5);
}

:root[data-theme="light"] .markdown-content code,
:root[data-theme="light"] .chat-bubble-assistant code,
:root[data-theme="light"] .live-hints-body code,
:root[data-theme="light"] .live-chat-msg-body code {
    background: rgba(0, 0, 0, 0.05);
    color: var(--accent-primary, #4f46e5);
}

/* Voice Dictation Button Active States & Animations */
.chat-voice-btn.mic-active,
.chat-voice-btn.recording-active {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border-radius: 8px;
    animation: voice-mic-pulse 1.5s infinite ease-in-out;
}

.chat-voice-btn.transcribing {
    color: var(--accent-primary, #6366f1) !important;
    background: rgba(99, 102, 241, 0.15) !important;
    border-radius: 8px;
    cursor: wait !important;
}

@keyframes voice-mic-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* ==========================================================================
   MAINTENANCE MODE & STUB OVERLAY (ЗАГЛУШКА ТЕХНИЧЕСКИХ РАБОТ)
   ========================================================================== */

.maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bg-primary);
    overflow-y: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.maintenance-ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    max-width: 90vw;
    max-height: 90vw;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(168, 85, 247, 0.12) 40%, rgba(245, 158, 11, 0.05) 70%, transparent 80%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
    animation: maintenance-glow-pulse 8s ease-in-out infinite alternate;
}

@keyframes maintenance-glow-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

.maintenance-card {
    position: relative;
    z-index: 2;
    max-width: 540px;
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2.75rem 2.25rem;
    text-align: center;
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: maintenance-card-appear 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes maintenance-card-appear {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.maintenance-theme-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.maintenance-theme-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-primary);
    transform: scale(1.05);
}

/* Hero animated gears */
.maintenance-hero-animation {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gear-ring {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gear-ring-outer {
    width: 110px;
    height: 110px;
    color: rgba(99, 102, 241, 0.4);
    font-size: 4.8rem;
    animation: gear-spin-clockwise 18s linear infinite;
}

.gear-ring-inner {
    width: 78px;
    height: 78px;
    color: rgba(245, 158, 11, 0.5);
    font-size: 3.2rem;
    animation: gear-spin-counter 10s linear infinite;
}

.maintenance-core-logo {
    position: relative;
    z-index: 3;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.maintenance-core-logo img {
    filter: drop-shadow(0 4px 10px rgba(99, 102, 241, 0.4));
}

@keyframes gear-spin-clockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes gear-spin-counter {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Status Pill */
.maintenance-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #f59e0b;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: status-dot-pulse 1.8s infinite;
}

@keyframes status-dot-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

.maintenance-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.maintenance-subtitle {
    margin: 0.4rem 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.maintenance-description {
    margin: 0 0 1.5rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Callout Box */
.maintenance-admin-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    text-align: left;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.22);
    margin-bottom: 1.75rem;
}

.maintenance-admin-callout .callout-icon {
    font-size: 1.25rem;
    color: var(--accent-primary);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.maintenance-admin-callout .callout-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.maintenance-admin-callout .callout-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.maintenance-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.btn-maintenance-login {
    height: 48px;
    border-radius: 12px;
    font-size: 0.98rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
    transition: var(--transition);
}

.btn-maintenance-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

.maintenance-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ADMIN TOP BAR BANNER */
.admin-maintenance-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.1);
    animation: banner-slide-down 0.3s ease-out;
}

@keyframes banner-slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-maintenance-banner-content {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.admin-maintenance-badge-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(245, 158, 11, 0.25);
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.admin-maintenance-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-maintenance-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.admin-maintenance-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.btn-banner-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #ef4444;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-banner-toggle:hover {
    background: #ef4444;
    color: #fff;
}

/* ==========================================================================
   FEEDBACK & SUGGESTIONS REDESIGN
   ========================================================================== */
#feedback-section {
    width: 100%;
    min-height: calc(100vh - 5rem);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto 0;
    box-sizing: border-box;
}

#feedback-section.active {
    display: flex;
    flex: 1;
}

.feedback-container {
    max-width: 800px;
    margin: auto;
    width: 100%;
    animation: fadeIn 0.3s ease-out;
}

.feedback-hero {
    text-align: center;
    margin-bottom: 1.5rem;
}

.feedback-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: var(--accent-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.65rem;
}

.feedback-eyebrow i {
    font-size: 0.75rem;
    color: var(--accent-primary);
}

.feedback-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.45rem;
    line-height: 1.25;
}

.feedback-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 600px;
    margin: 0 auto 1rem auto;
}

.feedback-pills-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.feedback-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.feedback-pill i {
    color: var(--accent-primary);
    font-size: 0.82rem;
}

/* Outer Shell / Double Bezel Card */
.feedback-card-shell {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2.15rem 2.35rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

@media (max-width: 640px) {
    .feedback-card-shell {
        padding: 1.35rem;
        border-radius: 16px;
    }
}

/* Category Grid */
.feedback-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

@media (max-width: 580px) {
    .feedback-categories-grid {
        grid-template-columns: 1fr;
    }
}

.feedback-category-tile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.15rem;
    border-radius: 14px;
    background: var(--bg-tertiary);
    border: 1.5px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.feedback-category-tile:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.feedback-category-tile.active {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
}

.feedback-category-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    transition: var(--transition);
}

.feedback-category-tile.active .feedback-category-icon {
    transform: scale(1.1);
}

.feedback-category-text {
    flex: 1;
    min-width: 0;
}

.feedback-category-label {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.feedback-category-desc {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.feedback-check-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.feedback-category-tile.active .feedback-check-badge {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* Form Field Groups */
.feedback-field-group {
    margin-bottom: 1.25rem;
}

.feedback-field-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.feedback-field-label span.req {
    color: var(--danger);
    margin-left: 0.2rem;
}

.feedback-field-label small {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.feedback-textarea-wrapper {
    position: relative;
}

.feedback-textarea {
    width: 100%;
    min-height: 125px;
    padding: 0.85rem 1rem;
    background: var(--bg-tertiary);
    border: 1.5px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.55;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feedback-textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.feedback-textarea-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0 0.25rem;
}

.feedback-char-counter.warning {
    color: var(--warning);
    font-weight: 600;
}

.feedback-char-counter.danger {
    color: var(--danger);
    font-weight: 700;
}

/* Contact Input with Prefix */
.feedback-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.feedback-input-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.feedback-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.6rem;
    background: var(--bg-tertiary);
    border: 1.5px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feedback-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* Submit Actions */
.feedback-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem;
}

.feedback-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.85rem;
    padding: 0.85rem 1.75rem;
    background: var(--accent-gradient);
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.feedback-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
    opacity: 0.96;
}

.feedback-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.feedback-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.feedback-btn-icon-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.feedback-submit-btn:hover:not(:disabled) .feedback-btn-icon-circle {
    transform: translateX(2px) translateY(-1px);
}

.feedback-kbd-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.feedback-kbd-hint kbd {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.72rem;
    font-family: inherit;
    color: var(--text-secondary);
}

/* Success View */
.feedback-success-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    animation: fadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.feedback-success-icon-orb {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    border: 2px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    margin-bottom: 1.25rem;
}

.feedback-success-card h3 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.feedback-success-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto 1.75rem auto;
    line-height: 1.55;
}

.feedback-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.feedback-reset-btn:hover {
    background: var(--glass-bg-hover);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* --- Session Targets Progress in Clinical Dashboard --- */
.session-target-row {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: var(--transition);
}

.session-target-row:hover {
    border-color: rgba(99, 102, 241, 0.35);
}

.session-target-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.session-target-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.session-target-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.session-target-notes {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    padding-left: 1.25rem;
}

/* --- Global Document Viewer Modal --- */
#view-global-doc-modal .modal-card {
    max-width: 820px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.doc-viewer-content {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 1.25rem;
    max-height: 60vh;
    overflow-y: auto;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* -----------------------------------------------------------------
   Клинический психотип (9 типов характера & 3 уровня организации)
   ----------------------------------------------------------------- */
.psychotype-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.psychotype-scale-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
}

.psychotype-scale-row .badge {
    letter-spacing: 0.3px;
}

@media (max-width: 768px) {
    .psychotype-card > div:first-child {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

/* -----------------------------------------------------------------
   Админ-панель: Пакетный переанализ всех сессий (Новая нейросеть)
   ----------------------------------------------------------------- */
.admin-feature-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-top: 1rem;
    transition: all 0.25s ease;
}

.admin-progress-track {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

[data-theme="light"] .admin-progress-track {
    background: rgba(0, 0, 0, 0.08);
}

.admin-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
    transition: width 0.35s ease;
}

.admin-log-console {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.78rem;
    color: #94a3b8;
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

[data-theme="light"] .admin-log-console {
    background: #1e293b;
    border-color: rgba(0, 0, 0, 0.15);
    color: #cbd5e1;
}

.admin-log-item {
    line-height: 1.45;
    word-break: break-word;
}

.admin-log-item.success { color: #34d399; }
.admin-log-item.error { color: #f87171; }
.admin-log-item.warning { color: #fbbf24; }
.admin-log-item.info { color: #60a5fa; }

/* ==========================================================================
   MIRO-STYLE NOTES & WHITEBOARD SECTION
   ========================================================================== */

.main-content.notes-mode-active,
.main-content:has(#notes-section.active) {
    padding: 0 !important;
    gap: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

#notes-section {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--bg-secondary);
}

#notes-section.active {
    display: flex !important;
    flex: 1;
    height: 100vh;
    width: 100%;
}

.notes-workspace-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 0 !important;
    border: none !important;
}

/* --- Topbar --- */
.notes-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.25rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--glass-border);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    z-index: 30;
    gap: 1rem;
    flex-wrap: nowrap;
    position: relative;
    width: 100%;
}

.notes-topbar-left,
.notes-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Board Selector */
.notes-board-selector-wrapper {
    position: relative;
}

.notes-board-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.notes-board-btn:hover {
    background: var(--glass-bg-hover);
    border-color: var(--accent-primary);
}

.notes-chevron-icon {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

/* Autosave Indicator */
.notes-autosave-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.notes-autosave-badge.saving {
    color: var(--warning);
    border-color: rgba(245, 158, 11, 0.2);
}

.notes-autosave-badge.saved {
    color: var(--success);
}

/* Floating Toolbar */
.notes-floating-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    z-index: 35;
}

.notes-tool-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    position: relative;
    transition: all 0.15s ease;
}

.notes-tool-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

[data-theme="light"] .notes-tool-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.notes-tool-btn.active {
    background: var(--accent-primary);
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.45);
}

.notes-toolbar-separator {
    width: 1px;
    height: 20px;
    background: var(--glass-border);
    margin: 0 0.2rem;
}

.notes-tool-flyout-trigger {
    position: relative;
}

.notes-color-pip {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.notes-tool-btn.tool-stylus {
    position: relative;
}

.notes-stylus-pip {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.7);
    transition: all 0.2s ease;
}

.notes-stylus-pip.inactive {
    background: var(--text-muted);
    box-shadow: none;
}

.notes-tool-btn.special-sparkle {
    width: auto;
    padding: 0 0.75rem;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a855f7;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.25);
}

.notes-tool-btn.special-sparkle:hover {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

/* History buttons */
.notes-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition);
}

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

.notes-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Zoom HUD */
.notes-zoom-hud {
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 0.15rem;
}

.notes-zoom-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

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

.notes-zoom-display {
    padding: 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 48px;
    text-align: center;
    cursor: pointer;
}

/* Dropdown Menus */
.notes-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.notes-dropdown-menu.right-aligned {
    left: auto;
    right: 0;
}

.notes-dropdown-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.65rem;
}

.notes-boards-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.notes-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s ease;
}

.notes-dropdown-item:hover {
    background: var(--glass-bg-hover);
}

.notes-dropdown-item.active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
    font-weight: 600;
}

.notes-dropdown-item.text-danger {
    color: #f87171;
}

.notes-dropdown-item.text-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.notes-dropdown-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 0.25rem 0;
}

/* Floating Popovers for Brush & Sticky Color */
.notes-brush-popover,
.notes-sticky-color-popover {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 0.75rem;
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 250px;
    animation: notesFadeInScale 0.15s ease-out;
}

@keyframes notesFadeInScale {
    from {
        opacity: 0;
        transform: translate(-50%, -6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

.notes-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.15rem;
}

.notes-popover-header .notes-popover-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.notes-popover-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}

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

.notes-brush-modes {
    display: flex;
    gap: 0.4rem;
}

.notes-brush-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.notes-brush-mode-btn.active {
    background: var(--accent-primary);
    color: #ffffff;
    border-color: var(--accent-primary);
}

.notes-brush-divider {
    height: 1px;
    background: var(--glass-border);
}

.notes-brush-sizes {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.notes-popover-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.notes-size-circle {
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.notes-size-circle.size-sm { width: 10px; height: 10px; }
.notes-size-circle.size-md { width: 16px; height: 16px; }
.notes-size-circle.size-lg { width: 22px; height: 22px; }

.notes-size-circle.active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
}

.notes-color-swatches {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notes-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.notes-swatch:hover {
    transform: scale(1.15);
}

.notes-swatch.active {
    transform: scale(1.15);
    border-color: #ffffff;
    box-shadow: 0 0 0 2px var(--accent-primary);
}

/* Stylus & Pen Options in Brush Popover */
.notes-stylus-options-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.15rem;
}

.notes-stylus-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
    transition: all 0.2s ease;
}

.notes-stylus-badge.inactive {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted);
    border-color: rgba(148, 163, 184, 0.25);
}

.notes-stylus-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.1rem;
}

.notes-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    gap: 0.5rem;
}

.notes-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.notes-toggle-label i {
    width: 15px;
    text-align: center;
    color: var(--accent-primary);
}

.notes-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

.notes-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.notes-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.16);
    border: 1px solid var(--glass-border);
    transition: 0.2s ease;
    border-radius: 18px;
}

[data-theme="light"] .notes-switch-slider {
    background-color: rgba(0, 0, 0, 0.12);
}

.notes-switch-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.2s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

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

.notes-switch input:checked + .notes-switch-slider:before {
    transform: translateX(16px);
}

/* Main Viewport & Canvas */
.notes-board-viewport {
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    outline: none;
    cursor: default;
    user-select: none;
    touch-action: none;
    background-color: var(--bg-primary);
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
}

[data-theme="light"] .notes-board-viewport {
    background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1.2px, transparent 1.2px);
}

.notes-board-viewport.tool-hand {
    cursor: grab;
}

.notes-board-viewport.tool-hand.is-panning {
    cursor: grabbing;
}

.notes-board-viewport.tool-pen {
    cursor: crosshair;
}

.notes-board-viewport.tool-marker {
    cursor: crosshair;
}

.notes-board-viewport.tool-eraser {
    cursor: cell;
}

.notes-board-viewport.drawing-mode .notes-dom-layer {
    pointer-events: none !important;
}

.notes-board-world {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.notes-drawing-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    touch-action: none;
    z-index: 12;
}

.notes-dom-layer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: auto;
    z-index: 10;
}

/* Mini Canvas Hint */
.notes-canvas-hint {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-size: 0.78rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    pointer-events: auto;
    z-index: 25;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.notes-canvas-hint kbd {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.72rem;
}

.notes-hint-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
}

/* ==========================================================================
   CANVAS OBJECTS: STICKERS, CLUSTERS, LISTS, TEXT
   ========================================================================== */

/* Universal Item Shell */
.notes-board-item {
    position: absolute;
    touch-action: none;
    user-select: none;
    transition: box-shadow 0.15s ease;
}

.notes-board-item.selected {
    box-shadow: 0 0 0 2px var(--accent-primary), 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

/* --- Sticky Note --- */
.notes-item-sticky {
    width: 220px;
    min-height: 190px;
    padding: 0.65rem;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    color: #1e293b;
    z-index: 12;
}

.notes-sticky-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    cursor: grab;
}

.notes-item-sticky.is-dragging .notes-sticky-header {
    cursor: grabbing;
}

.notes-drag-handle {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.notes-item-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.notes-item-sticky:hover .notes-item-actions,
.notes-board-item.selected .notes-item-actions {
    opacity: 1;
}

.notes-mini-btn {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: rgba(0, 0, 0, 0.08);
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.notes-mini-btn:hover {
    background: rgba(0, 0, 0, 0.18);
    color: #0f172a;
}

.notes-mini-btn.btn-delete:hover {
    background: #ef4444;
    color: #ffffff;
}

.notes-sticky-textarea {
    flex: 1;
    width: 100%;
    border: none;
    background: transparent;
    resize: none;
    outline: none;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    color: inherit;
    user-select: text;
}

.notes-item-resize-handle {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    cursor: se-resize;
    opacity: 0.3;
}

.notes-item-resize-handle::after {
    content: "";
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.notes-board-item:hover .notes-item-resize-handle {
    opacity: 0.8;
}

/* --- Information Cluster / Frame --- */
.notes-item-cluster {
    min-width: 280px;
    min-height: 220px;
    border: 2px dashed rgba(99, 102, 241, 0.45);
    border-radius: 18px;
    background: rgba(99, 102, 241, 0.04);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    z-index: 8;
    cursor: default;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.notes-cluster-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: grab;
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(99, 102, 241, 0.25);
    user-select: none;
}

.notes-item-cluster.is-dragging .notes-cluster-header {
    cursor: grabbing;
}

.notes-cluster-header .notes-item-actions {
    opacity: 0.7;
}

.notes-cluster-header:hover .notes-item-actions,
.notes-item-cluster.selected .notes-cluster-header .notes-item-actions,
.notes-item-cluster.is-locked .notes-cluster-header .notes-item-actions {
    opacity: 1;
}

.notes-mini-btn.btn-lock.is-locked,
.notes-mini-btn.btn-lock.active {
    background: rgba(99, 102, 241, 0.25);
    color: var(--accent-primary);
    border: 1px solid rgba(99, 102, 241, 0.4);
    opacity: 1;
}

/* Locked Cluster State */
.notes-item-cluster.is-locked {
    border-style: solid;
    border-color: rgba(99, 102, 241, 0.65);
    background: rgba(99, 102, 241, 0.07);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.12);
}

.notes-item-cluster.is-locked .notes-cluster-header {
    cursor: default !important;
}

.notes-item-cluster.is-locked .notes-drag-handle {
    opacity: 0.25;
    cursor: not-allowed;
}

.notes-item-cluster.is-locked .notes-item-resize-handle {
    display: none !important;
}

.notes-item-cluster.is-locked .notes-cluster-badge {
    background: rgba(99, 102, 241, 0.25);
    color: var(--accent-primary);
}

.notes-cluster-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: grab;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
    user-select: none;
}

.notes-cluster-title:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-primary);
}

.notes-cluster-title-input {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--accent-primary, #6366f1);
    border-radius: 6px;
    padding: 0.15rem 0.4rem;
    outline: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    max-width: 55%;
    cursor: text;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.notes-cluster-drag-spacer {
    flex: 1;
    height: 100%;
    min-height: 24px;
    cursor: grab;
}

.notes-item-cluster.is-dragging .notes-cluster-title,
.notes-item-cluster.is-dragging .notes-cluster-drag-spacer {
    cursor: grabbing;
}

.notes-item-cluster.is-locked .notes-cluster-title,
.notes-item-cluster.is-locked .notes-cluster-drag-spacer {
    cursor: default !important;
}

.notes-cluster-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}

/* --- Checklist Card --- */
.notes-item-list {
    width: 280px;
    min-height: 200px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 0.85rem;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 12;
}

.notes-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: grab;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--glass-border);
}

.notes-list-title-input {
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.notes-checklist-container {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 280px;
    overflow-y: auto;
}

.notes-checklist-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.notes-check-box {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    border: 1.5px solid var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: transparent;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.notes-check-box.checked {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
}

.notes-check-text {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    color: var(--text-primary);
}

.notes-checklist-row.completed .notes-check-text {
    text-decoration: line-through;
    color: var(--text-muted);
}

.notes-check-del-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.notes-checklist-row:hover .notes-check-del-btn {
    opacity: 1;
}

.notes-add-check-input {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    border: 1px dashed var(--glass-border);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    outline: none;
}

.notes-add-check-input:focus {
    border-color: var(--accent-primary);
}

/* --- Floating Text Item --- */
.notes-item-text {
    min-width: 120px;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    border: 1px dashed transparent;
    cursor: text;
    z-index: 12;
}

.notes-item-text:hover,
.notes-item-text.selected {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

.notes-text-content {
    outline: none;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Templates Modal Grid --- */
.notes-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    overflow-y: auto;
    padding: 0.25rem;
}

.notes-template-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--bg-primary);
    gap: 0.85rem;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.notes-template-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

.notes-template-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.notes-template-body h4 {
    margin: 0 0 0.35rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.notes-template-body p {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.notes-template-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
}