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

/* ============ App-like Behavior ============ */
html, body {
    /* Prevent text selection (app-like) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Remove tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;

    /* Prevent callout on long-press (iOS) */
    -webkit-touch-callout: none;
}

/* Allow selection in input fields and textareas */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

html {
    overflow-x: hidden;
}

/* Utility class for hiding elements */
.hidden {
    display: none !important;
}

/* Global input styling - dark theme */
input, textarea, select {
    background: var(--bg-solid);
    color: var(--text);
    border: 1px solid var(--border);
}

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

/* ============ SVG Icon System ============ */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
}

.icon-xs {
    width: 10px;
    height: 10px;
}

.icon-sm {
    width: 14px;
    height: 14px;
}

.icon-md {
    width: 18px;
    height: 18px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl {
    width: 32px;
    height: 32px;
}

.icon-2xl {
    width: 48px;
    height: 48px;
}

:root {
    /* ============ Color Palette ============ */

    /* Base colors */
    --white: #ffffff;
    --black: #000000;

    /* Background colors */
    --bg-dark: #0f0c14;
    --bg-panel: rgba(24, 22, 36, 0.9);
    --bg-secondary: #1e1a2e;
    --bg-elevated: rgba(32, 30, 50, 0.95);
    --bg-hover: rgba(48, 44, 72, 0.85);
    --bg-solid: #181628;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-overlay-dark: rgba(0, 0, 0, 0.6);
    --bg-overlay-heavy: rgba(0, 0, 0, 0.8);

    /* Modal 3-level hierarchy */
    --modal-bg: #1a1726;
    --modal-elevated: #242136;
    --modal-field: #2e2a42;

    /* Border colors */
    --border: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.05);
    --border-medium: rgba(255, 255, 255, 0.1);
    --border-glow: rgba(95, 93, 229, 0.3);

    /* Text colors */
    --text: #f0ebd8;
    --text-muted: #a8a8a8;
    --text-secondary: #cbd5e1;

    /* Primary/Accent colors (purple/indigo) */
    --accent: #5f5de5;
    --accent-hover: #7d7bfc;
    --accent-light: #818cf8;
    --accent-lighter: #a5b4fc;
    --accent-glow: rgba(95, 93, 229, 0.4);
    --accent-bg: rgba(99, 102, 241, 0.1);
    --accent-bg-hover: rgba(99, 102, 241, 0.15);
    --accent-bg-strong: rgba(99, 102, 241, 0.2);

    /* Semantic colors - Success (green) */
    --success: #22c55e;
    --success-light: #4ade80;
    --success-lighter: #86efac;
    --success-glow: rgba(74, 222, 128, 0.3);
    --success-bg: rgba(34, 197, 94, 0.1);
    --success-bg-hover: rgba(34, 197, 94, 0.15);
    --success-border: rgba(34, 197, 94, 0.3);
    /* Legacy alias */
    --green: var(--success-light);
    --green-glow: var(--success-glow);

    /* Semantic colors - Warning (orange/yellow) */
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --orange: #f97316;

    /* Semantic colors - Danger/Error (red) */
    --danger: #ef4444;
    --danger-dark: #dc2626;
    --danger-bg: rgba(239, 68, 68, 0.1);
    --danger-bg-hover: rgba(239, 68, 68, 0.15);
    --danger-bg-strong: rgba(239, 68, 68, 0.2);
    --danger-border: rgba(239, 68, 68, 0.3);
    /* Legacy alias */
    --red: var(--danger);

    /* Semantic colors - Info (blue) */
    --info: #3b82f6;
    --info-light: #60a5fa;
    --info-bg: rgba(59, 130, 246, 0.15);

    /* Neutral/Gray colors */
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;

    /* Shadow colors */
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.5);

    /* ============ Effects ============ */

    /* Glass/Blur effects */
    --blur-amount: 20px;
    --blur-light: 12px;

    /* Border radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.3s ease;

    /* ============ Layout ============ */

    /* Panel sizes */
    --sidebar-left: clamp(260px, 23vw, 420px);
    --sidebar-right: clamp(280px, 25vw, 450px);
    --clip-bin-height: 260px;
    --header-global-height: 48px;
    --header-toolbar-height: 44px;
    --header-height: calc(var(--header-global-height) + var(--header-toolbar-height));

    /* Mobile bottom sheet - smaller so content is visible */
    --mobile-bottom-sheet-height: 45vh;
    --mobile-bottom-sheet-max: 400px;
}

/* ============ Light Theme ============ */
[data-theme="light"] {
    /* Background colors */
    --bg-dark: #f5f5f7;
    --bg-panel: rgba(255, 255, 255, 0.92);
    --bg-secondary: #ffffff;
    --bg-elevated: rgba(255, 255, 255, 0.98);
    --bg-hover: rgba(0, 0, 0, 0.05);
    --bg-solid: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.3);
    --bg-overlay-dark: rgba(0, 0, 0, 0.4);
    --bg-overlay-heavy: rgba(0, 0, 0, 0.6);

    /* Modal 3-level hierarchy */
    --modal-bg: #f8f8fa;
    --modal-elevated: #ffffff;
    --modal-field: #f0f0f4;

    /* Border colors */
    --border: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.06);
    --border-medium: rgba(0, 0, 0, 0.12);
    --border-glow: rgba(79, 70, 229, 0.25);

    /* Text colors */
    --text: #1a1a2e;
    --text-muted: #6b7280;
    --text-secondary: #4b5563;

    /* Primary/Accent colors (slightly darker for light bg) */
    --accent: #4f46e5;
    --accent-hover: #6366f1;
    --accent-light: #818cf8;
    --accent-lighter: #a5b4fc;
    --accent-glow: rgba(79, 70, 229, 0.3);
    --accent-bg: rgba(79, 70, 229, 0.08);
    --accent-bg-hover: rgba(79, 70, 229, 0.12);
    --accent-bg-strong: rgba(79, 70, 229, 0.18);

    /* Semantic colors - Success (green) */
    --success: #16a34a;
    --success-light: #22c55e;
    --success-lighter: #4ade80;
    --success-glow: rgba(22, 163, 74, 0.25);
    --success-bg: rgba(22, 163, 74, 0.1);
    --success-bg-hover: rgba(22, 163, 74, 0.15);
    --success-border: rgba(22, 163, 74, 0.3);

    /* Semantic colors - Warning (orange/yellow) */
    --warning: #d97706;
    --warning-light: #f59e0b;
    --warning-bg: rgba(217, 119, 6, 0.12);
    --orange: #ea580c;

    /* Semantic colors - Danger/Error (red) */
    --danger: #dc2626;
    --danger-dark: #b91c1c;
    --danger-bg: rgba(220, 38, 38, 0.08);
    --danger-bg-hover: rgba(220, 38, 38, 0.12);
    --danger-bg-strong: rgba(220, 38, 38, 0.18);
    --danger-border: rgba(220, 38, 38, 0.25);

    /* Semantic colors - Info (blue) */
    --info: #2563eb;
    --info-light: #3b82f6;
    --info-bg: rgba(37, 99, 235, 0.1);

    /* Neutral/Gray colors */
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #e5e7eb;

    /* Shadow colors */
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-heavy: rgba(0, 0, 0, 0.2);
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Main Layout */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-left) 1fr var(--sidebar-right);
    grid-template-rows: var(--header-global-height) var(--header-toolbar-height) 1fr var(--clip-bin-height);
    grid-template-areas:
        "header-global header-global header-global"
        "toolbar toolbar toolbar"
        "sidebar-left main sidebar-right"
        "clip-bin clip-bin clip-bin";
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Projects view - full width main area, no sidebars or clip bin */
.app[data-view="projects"] {
    grid-template-columns: 0 1fr 0;
    grid-template-rows: var(--header-global-height) var(--header-toolbar-height) 1fr 0;
}

.app[data-view="projects"] .sidebar-left,
.app[data-view="projects"] .sidebar-right,
.app[data-view="projects"] .clip-bin {
    display: none;
}

/* Docs view - full width, no sidebars (uses internal docs-sidebar) */
.app[data-view="docs"] {
    grid-template-columns: 0 1fr 0;
    grid-template-rows: var(--header-global-height) 0 1fr 0;
}

.app[data-view="docs"] .sidebar-left,
.app[data-view="docs"] .sidebar-right,
.app[data-view="docs"] .clip-bin,
.app[data-view="docs"] .context-toolbar {
    display: none;
}

/* Lounge view - full width, no sidebars (uses internal lounge-sidebar) */
.app[data-view="lounge"] {
    grid-template-columns: 0 1fr 0;
    grid-template-rows: var(--header-global-height) 0 1fr 0;
}

.app[data-view="lounge"] .sidebar-left,
.app[data-view="lounge"] .sidebar-right,
.app[data-view="lounge"] .clip-bin,
.app[data-view="lounge"] .context-toolbar {
    display: none;
}

/* Global Header (Row 1) */
.header-global {
    grid-area: header-global;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    gap: 16px;
    z-index: 100;
}

/* Context Toolbar (Row 2) */
.context-toolbar {
    grid-area: toolbar;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

.toolbar-review,
.toolbar-projects {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.toolbar-review.hidden,
.toolbar-projects.hidden {
    display: none;
}

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

.toolbar-left { flex: 1; }
.toolbar-center { justify-content: center; }
.toolbar-right { flex: 1; justify-content: flex-end; }

/* Main Tabs */
.main-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 24px;
    position: relative;
}

.tab-indicator {
    position: absolute;
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-sm);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.main-tab {
    padding: 8px 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
    position: relative;
    z-index: 1;
}

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

.main-tab.active {
    color: white;
}

/* User Menu */
.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Notifications */
.notifications-menu {
    position: relative;
}

.notifications-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    position: relative;
}

.notifications-btn .icon {
    width: 20px;
    height: 20px;
}

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

.notifications-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notifications-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    max-height: 400px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    margin-top: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Animation */
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.notifications-panel.notifications-panel-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

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

.notifications-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.notifications-list {
    flex: 1;
    overflow-y: auto;
    max-height: 320px;
}

.notifications-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-subtle);
}

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

.notification-item.unread {
    background: var(--accent-bg);
}

.notification-item.unread:hover {
    background: var(--accent-bg-hover);
}

.notification-icon {
    width: 32px;
    height: 32px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon svg {
    width: 16px;
    height: 16px;
    color: white;
}

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

.notification-title {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 2px;
}

.notification-time {
    font-size: 11px;
    color: var(--text-muted);
}

.user-menu {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.user-menu-btn:hover {
    background: var(--bg-hover);
}

.user-avatar {
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.user-name {
    font-size: 13px;
    font-weight: 500;
}

/* Search Box */
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 200px;
}

.search-box input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text);
    font-size: 13px;
    outline: none;
}

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

.search-box .icon {
    color: var(--text-muted);
}

/* View Toggles */
.view-toggles {
    display: flex;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.view-toggle {
    padding: 6px 10px;
    border-radius: var(--radius-xs);
}

.view-toggle.active {
    background: var(--bg-panel);
}

/* Legacy Header (for backwards compatibility) */
.header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: var(--bg-panel);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-bottom: 1px solid var(--border);
    gap: 16px;
    box-shadow: 0 4px 24px var(--shadow);
    min-width: 0;
    overflow: hidden;
}

.logo {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* Logo stays fixed */
}

.logo-icon {
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    height: 28px;
    width: auto;
}

.header-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0; /* Allow shrinking */
    overflow: hidden;
}

.session-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 4px 10px;
    background: var(--bg-elevated);
    border-radius: 4px;
    color: var(--text-muted);
}

.sync-control {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-elevated);
    border-radius: 6px;
    font-size: 13px;
}

.sync-control {
    opacity: 0.6;
    transition: opacity 0.2s;
}

.sync-control.synced {
    background: rgba(74, 222, 128, 0.15);
    color: var(--green);
    opacity: 1;
}

.sync-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--gray-600);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.sync-toggle.active {
    background: var(--green);
}

.sync-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.sync-toggle.active::after {
    transform: translateX(16px);
}

/* Cursor Control */
.cursor-control {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    opacity: 0.5;
}

.cursor-control.active {
    opacity: 1;
    background: var(--accent-bg-hover);
}

.cursor-toggle {
    font-size: 16px;
    line-height: 1;
}

.users-online {
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
    border: 2px solid transparent;
    margin-left: -8px;
    cursor: pointer;
    transition: transform 0.15s, z-index 0s;
    position: relative;
}

.user-avatar:first-child {
    margin-left: 0;
}

.user-avatar:hover {
    transform: scale(1.1);
    z-index: 10;
}

.user-avatar .status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    background: var(--green);
    border: 2px solid transparent;
    border-radius: 50%;
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Left Sidebar */
.sidebar-left {
    grid-area: sidebar-left;
    background: var(--bg-panel);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 4px 0 24px var(--shadow);
    min-width: 0;
}

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

.sidebar-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.btn-icon {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

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

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

.btn-icon-danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

/* Action buttons - reusable for forms, modals, etc. */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.btn-action .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

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

.btn-action-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-action-ghost {
    background: var(--bg-tertiary);
    color: var(--text);
}

.btn-action-ghost:hover {
    background: var(--bg-hover);
}

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

.btn-action-danger:hover {
    background: var(--danger-bg-hover);
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.btn-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Projects List in Sidebar */
.projects-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

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

/* Expanded Projects Grid View */
.app.projects-expanded {
    grid-template-columns: clamp(400px, 45vw, 600px) 1fr var(--sidebar-right);
}

.app.projects-expanded.comments-hidden {
    grid-template-columns: clamp(400px, 45vw, 600px) 1fr 0px;
}

.app.projects-expanded.clips-hidden {
    grid-template-columns: clamp(400px, 45vw, 600px) 1fr var(--sidebar-right);
    grid-template-rows: var(--header-global-height) var(--header-toolbar-height) 1fr 0px;
}

.app.projects-expanded.comments-hidden.clips-hidden {
    grid-template-columns: clamp(400px, 45vw, 600px) 1fr 0px;
    grid-template-rows: var(--header-global-height) var(--header-toolbar-height) 1fr 0px;
}

.sidebar-left.expanded-view {
    /* Uses grid flow instead of fixed positioning */
}

.sidebar-header-actions {
    display: flex;
    gap: 4px;
}

#expandProjectsBtn.active {
    background: var(--accent);
    color: white;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 8px;
}

.project-grid-item {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.project-grid-item:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
    border-color: var(--border);
}

.project-grid-thumb {
    aspect-ratio: 16/9;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.project-grid-thumb.has-cover {
    background-color: transparent;
}

.project-grid-icon {
    font-size: 32px;
    opacity: 0.7;
    color: var(--text-muted);
}

.project-grid-info {
    padding: 10px;
}

.project-grid-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.project-grid-meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* Grid Project Clips View */
.grid-project-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.grid-project-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.grid-project-title {
    font-size: 14px;
    font-weight: 600;
}

.clips-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}

.clips-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

/* Clip thumbnails inside clips-grid (expanded projects view) */
.clips-grid .clip-thumbnail {
    width: auto;
    flex-shrink: 1;
}

.clips-grid .clip-thumb-image {
    aspect-ratio: 1/1;
    height: auto;
}

.clips-grid .clip-thumb-info {
    padding: 4px 6px 12px;
}

.clips-grid .clip-thumb-name {
    font-size: 10px;
}

.clips-grid .clip-thumb-meta {
    font-size: 9px;
}

.clips-grid .clip-status-trigger {
    font-size: 9px;
    padding: 2px 6px;
}

.project-item {
    margin-bottom: 4px;
}

.project-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.project-header:hover {
    background: var(--bg-hover);
}

.project-header.active {
    background: var(--bg-elevated);
}

.project-expand {
    width: 16px;
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.project-item.expanded .project-expand {
    transform: rotate(90deg);
}

.project-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-clip-count {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 6px;
    background: var(--bg-dark);
    border-radius: 4px;
}

/* Project Cover Image */
.project-header.has-cover {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 60px;
}

.project-header.has-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(24, 24, 27, 0.9), rgba(24, 24, 27, 0.6));
    border-radius: 6px;
}

.project-header.has-cover > * {
    position: relative;
    z-index: 1;
}

.project-cover-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    color: var(--text);
}

.project-header:hover .project-cover-btn {
    opacity: 0.6;
}

.project-cover-btn:hover {
    opacity: 1 !important;
    background: var(--border-medium);
}

.project-clips {
    display: none;
    padding-left: 24px;
    margin-top: 4px;
}

.project-item.expanded .project-clips {
    display: block;
}

.project-clip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    transition: all 0.15s;
}

.project-clip-item:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.project-clip-item.active {
    color: var(--accent);
    background: var(--accent-bg);
}

.project-clip-icon {
    font-size: 12px;
}

.project-clip-versions {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: auto;
}

/* Clips List in Sidebar */
.clips-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.clip-group {
    margin-bottom: 4px;
}

.clip-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.clip-group-header:hover {
    background: var(--bg-hover);
}

.clip-group-header.active {
    background: var(--bg-elevated);
}

.clip-group-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.clip-group.expanded .clip-group-icon {
    transform: rotate(90deg);
}

.clip-group-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clip-group-count {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 6px;
    background: var(--bg-dark);
    border-radius: 4px;
}

.clip-versions {
    display: none;
    padding-left: 28px;
}

.clip-group.expanded .clip-versions {
    display: block;
}

.clip-version-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    transition: all 0.15s;
}

.clip-version-item:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.clip-version-item.current {
    color: var(--accent);
}

.clip-version-item.current::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}

/* Main Content Area */
.main {
    grid-area: main;
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* View containers */
.view-review {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.view-review.hidden {
    display: none;
}

.view-projects {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.view-projects.hidden {
    display: none;
}

/* Docs View */
.view-docs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.view-docs.hidden {
    display: none;
}

/* Lounge View */
.view-lounge {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.view-lounge.hidden {
    display: none;
}

/* Placeholder for upcoming features */
.view-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 40px;
    max-width: 400px;
}

.placeholder-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: 20px;
    margin-bottom: 24px;
    color: var(--text-muted);
}

.placeholder-icon .icon {
    width: 40px;
    height: 40px;
}

.placeholder-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px 0;
}

.placeholder-text {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.placeholder-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--accent-alpha);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 20px;
}

/* ============ Docs Module ============ */

.docs-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.docs-sidebar {
    width: var(--sidebar-left);
    min-width: 260px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.docs-sidebar-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.docs-sidebar-actions {
    display: flex;
    gap: 4px;
}

/* Project selector in sidebar */
.docs-project-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}

.docs-project-selector:hover {
    background: var(--bg-elevated);
}

/* Sidebar sections */
.docs-sidebar-section {
    display: flex;
    flex-direction: column;
}

.docs-projects-section {
    border-bottom: 1px solid var(--border);
    max-height: 180px;
    overflow: hidden;
}

.docs-documents-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.docs-sidebar-section-header {
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.docs-projects-list {
    overflow-y: auto;
    padding: 0 8px 8px;
}

.docs-project-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.docs-project-item:hover {
    background: var(--bg-elevated);
}

.docs-project-item.active {
    background: var(--accent-dim);
}

.docs-project-thumb {
    width: 32px;
    height: 24px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-elevated);
    flex-shrink: 0;
}

.docs-project-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Project selector view */
.docs-project-selector-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px;
    text-align: center;
}

.docs-project-selector-view h2 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 600;
}

.docs-project-selector-view p {
    margin: 0 0 32px;
    color: var(--text-muted);
}

.docs-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 800px;
}

.docs-project-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid var(--border);
}

.docs-project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.docs-project-card-cover {
    height: 100px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-secondary);
}

.docs-project-card-info {
    padding: 12px;
}

.docs-project-card-name {
    font-weight: 500;
    font-size: 0.875rem;
}

.docs-no-projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    color: var(--text-muted);
}

.docs-no-projects h3 {
    margin: 16px 0 8px;
    color: var(--text);
}

.docs-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.docs-empty-tree {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.docs-tree-folder {
    /* Container for folder and children */
}

.docs-tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--text);
    font-size: 0.875rem;
    transition: background 0.1s;
    position: relative;
}

.docs-tree-item:hover {
    background: var(--bg-hover);
}

.docs-tree-item.active {
    background: var(--accent-alpha);
    color: var(--accent);
}

.docs-tree-chevron {
    flex-shrink: 0;
    transition: transform 0.15s;
    color: var(--text-muted);
}

.docs-tree-chevron.expanded {
    transform: rotate(90deg);
}

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

.docs-tree-document .docs-tree-icon {
    color: var(--text-muted);
}

.docs-tree-item.active .docs-tree-icon {
    color: var(--accent);
}

.docs-tree-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docs-tree-item-actions {
    display: none;
    gap: 2px;
}

.docs-tree-item:hover .docs-tree-item-actions {
    display: flex;
}

.docs-tree-children {
    /* Nested children container */
}

.docs-tree-children.hidden {
    display: none;
}

/* Project tree item */
.docs-tree-project {
    /* Container for project and its documents */
}

.docs-tree-project.active > .docs-tree-project-header {
    background: var(--accent-alpha);
}

.docs-tree-project-header {
    font-weight: 500;
}

.docs-project-thumb-mini {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-tertiary);
    flex-shrink: 0;
}

.docs-empty-tree {
    padding: 8px 12px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-style: italic;
}

/* Editor Area */
.docs-editor-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg);
    overflow: hidden;
}

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

.docs-empty-editor h3 {
    margin: 16px 0 8px;
    color: var(--text);
    font-size: 1.125rem;
}

.docs-empty-editor p {
    margin: 0 0 20px;
    font-size: 0.875rem;
}

.docs-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    width: 100%;
    overflow: hidden;
}

.docs-editor-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.docs-title-input {
    flex: 1;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
}

.docs-title-input::placeholder {
    color: var(--text-muted);
}

/* Centered Toolbar Wrapper */
.docs-toolbar-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.docs-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.docs-toolbar-group {
    display: flex;
    gap: 2px;
}

.docs-toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 6px;
}

.docs-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
    font-weight: 600;
}

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

.docs-toolbar-btn:active {
    background: var(--bg-active);
}

.docs-toolbar-btn .icon {
    width: 16px;
    height: 16px;
}

/* Editor Scroll Area */
.docs-editor-scroll {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.docs-editor-content {
    min-height: 100%;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    outline: none;
    padding-bottom: 200px;
}

.docs-editor-content:empty::before {
    content: attr(placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

.docs-editor-content:focus {
    outline: none;
}

.docs-editor-content h1,
.docs-editor-content h2,
.docs-editor-content h3 {
    margin: 1.5em 0 0.5em;
    font-weight: 600;
    line-height: 1.3;
}

.docs-editor-content h1:first-child,
.docs-editor-content h2:first-child,
.docs-editor-content h3:first-child {
    margin-top: 0;
}

.docs-editor-content h1 { font-size: 1.75rem; }
.docs-editor-content h2 { font-size: 1.4rem; }
.docs-editor-content h3 { font-size: 1.15rem; }

.docs-editor-content p {
    margin: 0 0 1em;
}

.docs-editor-content ul,
.docs-editor-content ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}

.docs-editor-content li {
    margin-bottom: 0.25em;
}

.docs-editor-content a {
    color: var(--accent);
    text-decoration: underline;
}

.docs-editor-content code {
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875em;
}

.docs-editor-content blockquote {
    border-left: 3px solid var(--accent);
    margin: 1em 0;
    padding: 0.5em 0 0.5em 1em;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-radius: 0 6px 6px 0;
}

.docs-editor-content hr,
.docs-divider {
    border: none;
    height: 1px;
    background: var(--border);
    margin: 1.5em 0;
}

/* Code Block */
.docs-code-block {
    background: var(--bg-dark);
    border-radius: 8px;
    padding: 16px;
    margin: 1em 0;
    overflow-x: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

.docs-code-block code {
    background: transparent;
    padding: 0;
}

/* Callout */
.docs-callout {
    background: var(--accent-bg-strong);
    border-left: 4px solid var(--accent);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin: 1em 0;
}

.docs-callout p {
    margin: 0;
}

/* Todo Item */
.docs-todo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

.docs-todo input[type="checkbox"] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.docs-todo.completed span {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Slash Command Menu */
.docs-slash-menu {
    position: absolute;
    z-index: 1000;
    width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.docs-slash-menu.hidden {
    display: none;
}

.docs-slash-menu-header {
    padding: 10px 14px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.docs-slash-menu-list {
    padding: 6px;
}

.docs-slash-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.docs-slash-item:hover,
.docs-slash-item.selected {
    background: var(--bg-hover);
}

.docs-slash-item-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-active);
    border-radius: 8px;
    flex-shrink: 0;
}

.docs-slash-item-icon .icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.docs-slash-item-content {
    flex: 1;
    min-width: 0;
}

.docs-slash-item-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
}

.docs-slash-item-desc {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collaboration UI */
.docs-collaborators {
    display: flex;
    gap: 4px;
    align-items: center;
}

.docs-collaborator {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--collab-color, var(--accent));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid var(--bg);
    margin-left: -8px;
    cursor: default;
    transition: transform 0.15s ease;
}

.docs-collaborator:first-child {
    margin-left: 0;
}

.docs-collaborator:hover {
    transform: scale(1.1);
    z-index: 1;
}

.docs-remote-cursors {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.docs-remote-cursor {
    position: absolute;
    width: 2px;
    background: var(--cursor-color, var(--accent));
    pointer-events: none;
    animation: cursor-blink 1s ease infinite;
}

.docs-remote-cursor::after {
    content: attr(data-name);
    position: absolute;
    top: -18px;
    left: 0;
    background: var(--cursor-color, var(--accent));
    color: white;
    font-size: 0.625rem;
    padding: 2px 4px;
    border-radius: 3px;
    white-space: nowrap;
}

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

/* Mobile responsive */
@media (max-width: 800px) {
    .docs-layout {
        flex-direction: column;
    }

    .docs-sidebar {
        width: 100%;
        min-width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .docs-editor {
        padding: 20px;
    }

    .docs-title-input {
        font-size: 1.25rem;
    }
}

/* Task List Table */
.task-list-table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
}

.task-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.task-list-table thead {
    position: sticky;
    top: 0;
    background: var(--bg-elevated);
    z-index: 10;
}

.task-list-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.task-list-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.task-list-table tbody tr {
    transition: background var(--transition-fast);
}

.task-list-table tbody tr:hover {
    background: var(--bg-hover);
}

.task-list-table .col-name {
    width: 40%;
}

.task-list-table .col-status {
    width: 15%;
}

.task-list-table .col-assignee {
    width: 20%;
}

.task-list-table .col-date {
    width: 15%;
}

/* Task table col-actions and col-config - fixed width, no padding */
.task-list-table .col-actions,
.task-list-table .col-config {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    text-align: center;
}

/* Remove percentage width from col-name when table has dynamic columns */
.task-list-table th[style*="width"],
.task-list-table td.col-name {
    width: auto;
}

.projects-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px;
    color: var(--text-muted);
}

.projects-empty-icon {
    opacity: 0.5;
}

.projects-empty-text {
    font-size: 15px;
    margin: 0;
}

/* Projects Layout (sidebar + main) */
.projects-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.projects-sidebar {
    width: var(--sidebar-left);
    min-width: 260px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.projects-sidebar-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.projects-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.projects-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.projects-sidebar-item:hover {
    background: var(--bg-hover);
}

.projects-sidebar-item.active {
    background: var(--accent-muted);
}

.projects-sidebar-item-thumb {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.projects-sidebar-empty {
    padding: 16px 12px;
    color: var(--text-muted);
    font-size: 0.813rem;
    text-align: center;
}

.projects-sidebar-item-name {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projects-main {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    padding: 24px;
}

.projects-empty-grid {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 48px;
    color: var(--text-muted);
}

.projects-empty-grid p {
    font-size: 15px;
    margin: 0;
}

.project-card {
    background: var(--bg-panel);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--shadow);
}

.project-card-cover {
    height: 140px;
    background: var(--bg-elevated);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-card-icon {
    color: var(--text-muted);
    opacity: 0.5;
}

.project-card-info {
    padding: 16px;
}

.project-card-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: var(--text);
}

.project-card-meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* Tasks Table Container */
.tasks-table-container {
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin: 24px;
    /* Container grows with content, parent scrolls */
}

/* Toolbar Title */
.toolbar-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

/* Project Selector */
.project-selector {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    background: var(--bg-solid);
    color: var(--text);
    border: 1px solid var(--border);
    min-width: 180px;
    cursor: pointer;
}

.project-selector:hover {
    background: var(--bg-hover);
}

.project-selector:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Task Row Styling */
.task-row {
    cursor: pointer;
}

.task-row:hover {
    background: var(--bg-hover);
}

/* Task Name Cell */
.task-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-icon {
    font-size: 14px;
    opacity: 0.7;
}

.task-children-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-elevated);
    border-radius: 50%;
    color: var(--text-muted);
}

.task-name {
    font-weight: 500;
    color: var(--text);
}

.stage-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    background: var(--accent-glow);
    color: var(--accent);
    border-radius: var(--radius-sm);
    margin-left: auto;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
}

.no-status, .no-assignee, .no-date {
    color: var(--text-muted);
    opacity: 0.6;
}

/* Assignee Cell */
.assignee-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.assignee-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.assignee-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 10px;
    font-weight: 600;
    background: var(--accent);
    color: white;
    border-radius: 50%;
}

.assignee-name {
    color: var(--text);
}

/* Due Date Styling */
.due-date {
    color: var(--text);
}

.due-date.overdue {
    color: var(--red);
    font-weight: 500;
}

/* Error cell */
.error-cell {
    color: var(--red);
    text-align: center;
    padding: 24px !important;
}

.player-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--black);
    min-height: 0; /* Allow shrinking in flex */
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Base video styling - applies to both main and compare video */
video,
.video-compare {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    background: var(--black);
    transform-origin: center center;
    will-change: transform;
    object-fit: contain;
}

/* Still image element (shown instead of video for images) */
.still-image,
.still-image-compare {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    background: var(--black);
    transform-origin: center center;
    will-change: transform;
    object-fit: contain;
}

/* ============ Compare Mode - Additional styling ============ */
/* Compare video/image overlays the main, clipped to show left side */
.video-compare,
.still-image-compare {
    position: absolute;
    top: 0;
    left: 0;
    clip-path: inset(0 50% 0 0); /* Clip from RIGHT, show LEFT side */
    pointer-events: none;
    z-index: 5; /* Above main video, below wipe overlay (z-index: 10) */
}

/* ============ Wipe Overlay ============ */
.wipe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    transform-origin: center center;
}

.wipe-slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: ew-resize;
    background: var(--accent);
}

.wipe-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: var(--bg-elevated);
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-shadow: 0 2px 8px var(--shadow-medium);
    pointer-events: auto;
    cursor: ew-resize;
}

.wipe-handle-line {
    display: none;
}

.wipe-handle-grip {
    width: 2px;
    height: 14px;
    background: var(--text-muted);
    border-radius: 1px;
}

.wipe-handle-grip:nth-child(1) { margin-right: 3px; }
.wipe-handle-grip:nth-child(3) { margin-left: 3px; }

.wipe-handle::before,
.wipe-handle::after {
    content: '';
    width: 2px;
    height: 14px;
    background: var(--text-muted);
    border-radius: 1px;
}

.wipe-labels {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    pointer-events: none;
}

.wipe-label-left,
.wipe-label-right {
    background: var(--bg-overlay-heavy);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
}

.canvas-overlay.drawing {
    pointer-events: auto;
    cursor: crosshair;
}

/* SVG Drawing Overlay */
.svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
    overflow: visible;
}

.svg-overlay.drawing {
    pointer-events: auto;
    cursor: crosshair;
}

.svg-overlay path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Empty player overlay */
.empty-player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    z-index: 50;
}

.empty-player-overlay.visible {
    display: flex;
}

.empty-player-content {
    text-align: center;
    color: var(--text-muted);
}

.empty-player-content .icon {
    opacity: 0.3;
    margin-bottom: 16px;
}

.empty-player-content p {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}

.empty-player-hint {
    font-size: 13px;
    opacity: 0.7;
}

/* Remote cursors */
.remote-cursor {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    transition: left 0.05s linear, top 0.05s linear;
}

.remote-cursor svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 2px 4px var(--shadow-medium));
}

.remote-cursor .cursor-label {
    position: absolute;
    left: 18px;
    top: 18px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    font-weight: 600;
}

/* Player Controls */
.player-controls {
    padding: 14px 20px;
    background: var(--bg-panel);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px var(--shadow);
}

.timeline-container {
    margin-bottom: 12px;
}

.timeline-markers {
    position: relative;
    height: 16px;
    margin-bottom: 4px;
}

.timeline-marker {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    cursor: pointer;
    transform: translateX(-50%);
    top: 5px;
    transition: transform 0.15s;
}

.timeline-marker:hover {
    transform: translateX(-50%) scale(1.4);
}

.timeline-marker.comment {
    background: var(--orange);
}

.timeline-marker.annotation {
    background: var(--accent);
}

/* Marker highlight animation (bidirectional with comments) */
.timeline-marker.highlighted {
    animation: marker-pulse 0.6s ease-out;
    transform: translateX(-50%) scale(1.8);
    box-shadow: 0 0 8px 2px currentColor;
    z-index: 10;
}

.timeline-marker.comment.highlighted {
    box-shadow: 0 0 8px 2px var(--orange);
}

.timeline-marker.annotation.highlighted {
    box-shadow: 0 0 12px 4px rgba(95, 93, 229, 1), 0 0 20px 6px rgba(95, 93, 229, 0.5);
}

/* Hide markers for resolved comments */
.timeline-marker.resolved {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Show resolved markers when highlighted (clicked from comment) */
.timeline-marker.resolved.highlighted {
    opacity: 1;
    pointer-events: auto;
}

@keyframes marker-pulse {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(2.2); }
    100% { transform: translateX(-50%) scale(1.8); }
}

/* In/Out Markers */
.timeline-in-out {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(234, 179, 8, 0.15);
    pointer-events: none;
}

.timeline-in-marker,
.timeline-out-marker {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: #eab308;
    cursor: ew-resize;
    pointer-events: auto;
}

/* Asymmetric handles - In extends left, Out extends right */
.timeline-in-marker::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -1px;
    width: 8px;
    height: 8px;
    background: #eab308;
    border-radius: 2px 0 0 2px;
}

.timeline-out-marker::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -1px;
    width: 8px;
    height: 8px;
    background: #eab308;
    border-radius: 0 2px 2px 0;
}

.timeline-track {
    position: relative;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    cursor: pointer;
}

.timeline-cache {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--accent-bg-strong);
    border-radius: 3px;
    pointer-events: none;
    transition: width 0.1s ease-out;
}

.timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    pointer-events: none;
}

.timeline-handle {
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 2px;
    height: auto;
    background: white;
    transform: translateX(-50%);
    cursor: grab;
}

/* Invisible larger hit area for easy grabbing */
.timeline-handle::before {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -8px;
    right: -8px;
    cursor: grab;
}

.timeline-handle:active,
.timeline-handle:active::before {
    cursor: grabbing;
}

.controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.controls-row-primary {
    margin-bottom: 8px;
}

.controls-row-secondary {
    gap: 12px;
}

.transport-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-transport {
    width: 38px;
    height: 38px;
    border: none;
    background: var(--bg-elevated);
    color: var(--text);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all var(--transition-fast);
}

.btn-transport:hover {
    background: var(--bg-hover);
    transform: scale(1.05);
}

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

.btn-transport.play-btn {
    width: 46px;
    height: 46px;
    font-size: 18px;
    background: var(--bg-elevated);
    color: var(--text);
}

.btn-transport.play-btn:hover {
    background: var(--bg-hover);
}

/* Play button only gets accent when actually playing */
.btn-transport.play-btn.playing {
    background: var(--accent);
    color: white;
}

.btn-transport.loop-btn {
    font-size: 16px;
}

/* Loop button - lighter background when active, no solid accent */
.btn-transport.loop-btn.active {
    background: var(--accent-bg-strong);
    color: var(--accent);
}

.timecode {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--text-muted);
    min-width: 140px;
    text-align: center;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

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

.timecode span {
    color: var(--text);
}

/* Version Control in Player Bar */
.version-control {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.version-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    padding: 4px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.version-select:focus {
    outline: none;
    border-color: var(--accent);
}

.version-select:hover {
    background: var(--bg-hover);
}

/* Compare Control in Player Bar (first in secondary row) */
.compare-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compare-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    padding: 5px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

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

.compare-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.compare-btn .icon {
    width: 16px;
    height: 16px;
}

/* Compare version dropdown trigger - hidden by default, slides in when compare active */
.compare-version-trigger {
    /* Slide animation - collapsed by default */
    max-width: 0;
    opacity: 0;
    padding: 4px 0;
    overflow: hidden;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.compare-version-trigger.visible {
    max-width: 100px;
    opacity: 1;
    padding: 4px 10px;
}

/* Hide compare control when only one version available */
.compare-control.single-version {
    display: none;
}

/* Status Control in Player Bar */
.status-control {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.status-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    padding: 5px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.status-select:focus {
    outline: none;
}

.status-select:hover {
    filter: brightness(1.1);
}

.status-select.has-status {
    border-color: transparent;
}

/* In/Out Display */
.in-out-display {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

.in-out-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

/* In/Out buttons - yellow */
.in-out-btn.in-btn:hover,
.in-out-btn.out-btn:hover {
    background: var(--bg-hover);
    border-color: #eab308;
    color: #eab308;
}

.in-out-btn.in-btn.active,
.in-out-btn.out-btn.active {
    background: rgba(234, 179, 8, 0.15);
    border-color: #eab308;
    color: #eab308;
}

.in-out-duration {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    color: var(--text-muted);
}

.in-out-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
}

.in-out-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    min-width: 40px;
    text-align: right;
}

/* In/Out label colors - yellow only when active */
.in-btn.active .in-out-label,
.out-btn.active .in-out-label {
    color: #eab308;
}

/* Quality Control */
.quality-control {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quality-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    padding: 4px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    cursor: pointer;
}

.quality-select:focus {
    outline: none;
    border-color: var(--accent);
}

.quality-select option:disabled {
    color: var(--text-muted);
}

/* Playback Speed */
.speed-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.speed-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    padding: 4px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    cursor: pointer;
}

.speed-select:focus {
    outline: none;
    border-color: var(--accent);
}

/* Video Zoom */
.zoom-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zoom-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    padding: 4px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    cursor: pointer;
    min-width: 60px;
}

.zoom-select:focus {
    outline: none;
    border-color: var(--accent);
}

.zoom-select option:disabled {
    color: var(--text-muted);
}

/* Volume Control */
.volume-control {
    display: flex;
    align-items: center;
    position: relative;
}

.volume-btn {
    width: 32px;
    height: 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

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

.volume-btn.muted {
    color: var(--red);
}

/* Volume icon states */
.volume-btn .icon-volume-high,
.volume-btn .icon-volume-low,
.volume-btn .icon-volume-muted {
    display: none;
    width: 16px;
    height: 16px;
}

.volume-control[data-level="high"] .icon-volume-high { display: block; }
.volume-control[data-level="low"] .icon-volume-low { display: block; }
.volume-control[data-level="muted"] .icon-volume-muted { display: block; }

/* Volume slider wrapper - animated expand */
.volume-slider-wrapper {
    width: 0;
    overflow: hidden;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                margin 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    margin-left: 0;
}

.volume-control:hover .volume-slider-wrapper,
.volume-control.expanded .volume-slider-wrapper {
    width: 80px;
    opacity: 1;
    margin-left: 8px;
}

/* Volume slider styling */
.volume-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-hover);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--text);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--text);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.volume-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}

/* Focus Mode Button */
.fullscreen-btn {
    margin-left: 4px;
}

.fullscreen-btn .icon-fullscreen-enter,
.fullscreen-btn .icon-fullscreen-exit {
    width: 16px;
    height: 16px;
}

.fullscreen-btn .icon-fullscreen-exit {
    display: none;
}

.fullscreen-btn.active {
    background: var(--accent-bg-strong);
    color: var(--accent);
}

.fullscreen-btn.active .icon-fullscreen-enter {
    display: none;
}

.fullscreen-btn.active .icon-fullscreen-exit {
    display: block;
}

/* Right Sidebar - Comments */
.sidebar-right {
    grid-area: sidebar-right;
    background: var(--bg-panel);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -4px 0 24px var(--shadow);
    min-width: 0;
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-right-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* Sidebar Tabs */
.sidebar-right-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.sidebar-tab {
    flex: 1;
    padding: 12px 16px;
    background: transparent;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.sidebar-tab:hover {
    color: var(--text);
    background: var(--bg-elevated);
}

.sidebar-tab.active {
    color: var(--text);
}

.sidebar-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
}

/* Sidebar Tab Panels */
.sidebar-tab-panel {
    display: none;
    flex: 1;
    overflow-y: auto;
    flex-direction: column;
}

.sidebar-tab-panel.active {
    display: flex;
}

/* Clip Tasks Section */
.clip-tasks-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.clip-tasks-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

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

.clip-tasks-add {
    margin: 12px;
    justify-content: center;
    gap: 0.5rem;
}

.clip-task-item {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.clip-task-item:hover {
    border-color: var(--border);
    background: var(--bg-hover);
}

.clip-task-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
}

.clip-task-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.clip-task-status {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

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

.comment-item {
    background: var(--bg-elevated);
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 1px solid transparent;
}

.comment-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

/* Comment highlight animation (bidirectional with timeline markers) */
.comment-item.highlighted {
    animation: comment-highlight 0.5s ease-out;
    border-color: var(--accent);
    background: var(--bg-hover);
}

@keyframes comment-highlight {
    0% {
        border-color: transparent;
        transform: scale(1);
    }
    30% {
        transform: scale(1.02);
    }
    100% {
        border-color: var(--accent);
        transform: scale(1);
    }
}

/* Drawing indicator is shown via icon instead of border */

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.comment-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.comment-author-name {
    font-size: 13px;
    font-weight: 500;
}

.comment-frame-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 3px 8px;
    background: var(--bg-dark);
    border-radius: 4px;
    color: var(--text-muted);
}

.comment-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-drawing-indicator {
    font-size: 14px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.comment-drawing-indicator:hover {
    opacity: 1;
}

.comment-action-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.comment-item:hover .comment-action-btn {
    opacity: 0.6;
}

.comment-action-btn:hover {
    opacity: 1 !important;
    color: var(--red);
    background: var(--danger-bg);
}

/* Reply button hover - neutral color */
.comment-action-btn[title="Reply"]:hover {
    color: var(--primary);
    background: var(--primary-bg);
}

/* Resolved button styles */
.comment-action-btn.resolved {
    opacity: 1 !important;
    color: var(--green);
}

.comment-action-btn[title*="resolved"]:hover,
.comment-action-btn[title*="unresolved"]:hover {
    color: var(--green);
    background: rgba(34, 197, 94, 0.1);
}

/* Reply comments - indented */
.comment-item.comment-reply {
    margin-left: 32px;
    border-left: 2px solid var(--border);
    padding-left: 12px;
}

/* Resolved comment styling */
.comment-item.is-resolved {
    opacity: 0.35;
}

.comment-item.is-resolved:hover {
    opacity: 0.5;
}

.comment-item.is-resolved .comment-text {
    text-decoration: line-through;
}

/* Reply indicator */
.reply-indicator {
    display: none;
    padding: 6px 10px;
    background: var(--primary-bg);
    border-radius: 6px 6px 0 0;
    font-size: 12px;
    color: var(--primary);
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.reply-indicator.visible {
    display: flex;
}

/* Inline reply form */
.inline-reply-form {
    margin-left: 32px;
    margin-bottom: 8px;
    padding: 10px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--accent);
}

.inline-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.inline-reply-input-row {
    display: flex;
    gap: 8px;
}

.inline-reply-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
}

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

.comment-drawing-preview {
    width: 100%;
    height: 80px;
    background: var(--bg-dark);
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
}

.comment-drawing-preview canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.comment-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}

.comment-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Comment Input Area */
.comment-input-area {
    padding: 12px;
    border-top: 1px solid var(--border);
    flex-shrink: 0; /* Don't shrink the input area */
}

.comment-drawing-active {
    background: var(--bg-dark);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    display: none;
}

.comment-drawing-active.visible {
    display: block;
}

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

.comment-input {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-solid);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    resize: none;
    min-height: 80px;
    transition: all var(--transition-normal);
}

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

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

.comment-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap; /* Allow wrapping on narrow widths */
}

.comment-tools {
    display: flex;
    gap: 4px;
}

.btn-comment-tool {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-elevated);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s;
}

.btn-comment-tool:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.btn-comment-tool.active {
    background: var(--accent);
    color: white;
}

/* Inline draw palette area */
.draw-palette-area {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 10px;
    margin-bottom: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out, opacity 0.15s ease-out, padding 0.2s ease-out, margin 0.2s ease-out;
}

.draw-palette-area.visible {
    max-height: 90px;
    opacity: 1;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.draw-palette-grid {
    display: flex;
    gap: 6px;
    justify-content: space-between;
}

.color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.12s;
    flex-shrink: 0;
}

.color-swatch:hover {
    transform: scale(1.25);
}

.color-swatch.active {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--accent);
}

/* Brush options row */
.draw-options-row {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.draw-option-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.draw-option-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Brush size presets */
.brush-size-presets {
    display: flex;
    gap: 4px;
}

.brush-size-btn {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-panel);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}

.brush-size-btn:hover {
    border-color: var(--text-muted);
    background: var(--bg-elevated);
}

.brush-size-btn.active {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.brush-size-dot {
    border-radius: 50%;
    background: var(--text);
}

/* Brush type presets */
.brush-type-presets {
    display: flex;
    gap: 4px;
}

.brush-type-btn {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s;
}

.brush-type-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

.brush-type-btn.active {
    border-color: var(--accent);
    background: var(--accent-subtle);
    color: var(--accent);
}

/* Panel toggle buttons */
.panel-toggles {
    display: flex;
    gap: 4px;
    margin-left: 16px;
    flex: 1;
}

.panel-toggle {
    opacity: 0.5;
}

.panel-toggle.active {
    opacity: 1;
}

/* Panel hidden states - with slide animations */
.app.projects-hidden {
    grid-template-columns: 0px 1fr var(--sidebar-right);
}

.app.projects-hidden .sidebar-left {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.app.comments-hidden {
    grid-template-columns: var(--sidebar-left) 1fr 0px;
}

.app.comments-hidden .sidebar-right {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.app.clips-hidden {
    grid-template-rows: var(--header-global-height) var(--header-toolbar-height) 1fr 0px;
}

.app.clips-hidden .clip-bin {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

/* Combine hidden states - all combinations */
.app.projects-hidden.comments-hidden {
    grid-template-columns: 0px 1fr 0px;
}

.app.projects-hidden.clips-hidden {
    grid-template-columns: 0px 1fr var(--sidebar-right);
    grid-template-rows: var(--header-global-height) var(--header-toolbar-height) 1fr 0px;
}

.app.comments-hidden.clips-hidden {
    grid-template-columns: var(--sidebar-left) 1fr 0px;
    grid-template-rows: var(--header-global-height) var(--header-toolbar-height) 1fr 0px;
}

.app.projects-hidden.comments-hidden.clips-hidden {
    grid-template-columns: 0px 1fr 0px;
    grid-template-rows: var(--header-global-height) var(--header-toolbar-height) 1fr 0px;
}

.btn {
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

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

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

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

/* Bottom - Clip Bin */
.clip-bin {
    grid-area: clip-bin;
    background: var(--bg-panel);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 24px var(--shadow);
    height: var(--clip-bin-height);
    min-width: 0;
    overflow: hidden;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.clip-bin-header {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.clip-bin-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.clip-bin-content {
    flex: 1;
    min-height: 0;
    padding: 8px 12px 16px 12px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-start;
}

.clip-thumbnail {
    flex-shrink: 0;
    width: 160px;
    max-height: calc(var(--clip-bin-height) - 60px);
    background: var(--bg-elevated);
    backdrop-filter: blur(var(--blur-light));
    -webkit-backdrop-filter: blur(var(--blur-light));
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 2px solid transparent;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.clip-version-pill {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    padding: 3px 10px;
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    z-index: 1;
    border: 1px solid var(--border);
}

/* Media type pill (video/still) - positioned left side */
.clip-type-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px;
    border-radius: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.clip-type-pill.video {
    background: var(--accent);
    color: var(--white);
}

.clip-type-pill.image {
    background: var(--green);
    color: var(--white);
}

.clip-type-pill.html {
    background: #f59e0b;
    color: var(--white);
}

.clip-type-pill .icon {
    width: 12px;
    height: 12px;
    fill: var(--white);
}

/* Clip Delete Button */
.clip-delete-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: var(--bg-overlay-dark);
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    color: var(--white);
    opacity: 0;
    transition: all 0.15s ease;
    z-index: 10;
}

.clip-thumbnail:hover .clip-delete-btn {
    opacity: 0.9;
}

.clip-delete-btn:hover {
    opacity: 1;
    background: rgba(220, 53, 69, 0.8);
}

/* Sidebar Icon Swap on Hover (icon -> trash for admins) */
.clip-group-icon .icon-normal {
    display: inline-flex;
}

.clip-group-icon .icon-delete {
    display: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.clip-group-header.admin-hover:hover .icon-normal {
    display: none;
}

.clip-group-header.admin-hover:hover .icon-delete {
    display: inline-flex;
}

.clip-group-icon .icon-delete:hover {
    color: var(--red);
}

/* Project Clip Icon Swap on Hover (icon -> trash for admins) */
.project-clip-icon .icon-normal {
    display: inline-flex;
}

.project-clip-icon .icon-delete {
    display: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.project-clip-item.admin-hover:hover .icon-normal {
    display: none;
}

.project-clip-item.admin-hover:hover .icon-delete {
    display: inline-flex;
}

.project-clip-icon .icon-delete:hover {
    color: var(--red);
}

.clip-thumbnail:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px var(--shadow-medium);
}

.clip-thumbnail.active {
    border-color: var(--accent);
}

.clip-thumb-image {
    position: relative;
    width: 100%;
    height: calc(var(--clip-bin-height) - 100px);
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 24px;
    overflow: hidden;
    border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0 0;
}

.clip-thumb-info {
    padding: 6px 10px 8px;
    flex-shrink: 0;
}

.clip-thumb-name {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.clip-thumb-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.clip-version-dropdown {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    padding: 2px 4px;
    font-size: 10px;
    cursor: pointer;
}

.clip-add {
    flex-shrink: 0;
    width: 160px;
    height: 100%;
    background: var(--bg-elevated);
    border: 2px dashed var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-muted);
}

.clip-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.clip-add-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.clip-add-text {
    font-size: 12px;
}

/* Upload Overlay */
.upload-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 21, 34, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.login-overlay {
    background: url('/static/splashbg.jpg') center center / cover no-repeat;
}

.login-logo {
    height: 64px;
    width: auto;
    margin-bottom: 16px;
}

.upload-box {
    text-align: center;
    padding: 60px 80px;
    border: 2px dashed transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 500px;
    background: var(--bg-panel);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    transform: scale(1) translateY(0);
}

.upload-overlay.hidden .upload-box {
    transform: scale(0.95) translateY(20px);
}

.upload-box:hover {
    border-color: var(--accent);
    background: var(--bg-elevated);
}

.welcome-box {
    cursor: default;
    min-width: 480px;
    padding: 40px 50px;
}

.welcome-box:hover {
    border-color: var(--border);
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.upload-box h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

.upload-box p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.upload-box input[type="file"] {
    display: none;
}

/* Session Status */
.session-status {
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
    font-size: 13px;
}

.session-status.has-session {
    background: var(--success-bg-hover);
    color: var(--green);
}

.session-status .status-checking {
    color: var(--text-muted);
}

.session-status .session-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.session-status .session-name {
    font-weight: 600;
    color: var(--text);
}

.session-status .session-users {
    font-size: 12px;
    color: var(--green);
}

/* Button variants */
.btn-large {
    padding: 14px 24px;
    font-size: 15px;
    width: 100%;
}

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
}

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

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 21, 34, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.hidden {
    display: flex !important; /* Override global .hidden to allow transitions */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.modal {
    background: var(--bg-panel);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 400px;
    box-shadow: 0 24px 64px var(--bg-overlay), 0 0 0 1px var(--border-light);
    transform: scale(1) translateY(0);
    opacity: 1;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.hidden .modal {
    transform: scale(0.98) translateY(30px);
    opacity: 0;
}

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

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
}

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

.modal-body {
    padding: 20px;
}

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

.modal-sm {
    width: 320px;
    max-width: 90vw;
}

.modal-md {
    width: 480px;
    max-width: 90vw;
}

/* Clip Selection Modal */
.clip-select-modal .modal-body {
    padding: 0;
    max-height: 400px;
    display: flex;
    flex-direction: column;
}

.clip-select-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.clip-select-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text);
    font-size: 13px;
}

.clip-select-search input:focus {
    outline: none;
    border-color: var(--primary);
}

.clip-select-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.clip-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.clip-select-item:hover {
    background: var(--bg-hover);
}

.clip-select-item.selected {
    background: var(--primary-bg);
    border: 1px solid var(--primary);
}

.clip-select-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.clip-select-item.selected .clip-select-checkbox {
    background: var(--primary);
    border-color: var(--primary);
}

.clip-select-checkbox .icon {
    width: 12px;
    height: 12px;
    color: white;
    opacity: 0;
}

.clip-select-item.selected .clip-select-checkbox .icon {
    opacity: 1;
}

.clip-select-thumb {
    width: 48px;
    height: 36px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clip-select-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clip-select-thumb .icon {
    color: var(--text-muted);
}

.clip-select-info {
    flex: 1;
    min-width: 0;
}

.clip-select-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clip-select-meta {
    font-size: 11px;
    color: var(--text-muted);
}

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

/* Configure Columns Modal */
.columns-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.column-config-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: var(--bg-solid);
    cursor: pointer;
    transition: background 0.15s;
}

.column-config-item:hover {
    background: var(--bg-hover);
}

.column-config-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.column-config-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
}

.column-config-label {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text);
}

.column-config-type {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Add Column Section */
.add-column-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.add-column-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.add-column-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.add-column-input {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-solid);
    color: var(--text);
}

.add-column-select {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-solid);
    color: var(--text);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.btn-delete-col {
    margin-left: auto;
    padding: 0.125rem;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.btn-delete-col:hover {
    opacity: 1;
    color: var(--red);
}

.input-large {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text);
    font-size: 14px;
}

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

.divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    color: var(--text-muted);
    font-size: 13px;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.join-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.join-form input {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}

.join-form input[type="text"]:first-of-type {
    font-family: 'JetBrains Mono', monospace;
}

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

.join-form input::placeholder {
    color: var(--text-muted);
}

.join-form-row {
    display: flex;
    gap: 8px;
}

/* Login Form */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
}

.login-form input {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    width: 100%;
}

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

.login-form input::placeholder {
    color: var(--text-muted);
}

.login-error {
    color: var(--red);
    font-size: 13px;
    text-align: center;
    margin: 0;
}

.login-box {
    min-width: 300px;
    max-width: 360px;
}

/* Setup Wizard */
.setup-box {
    min-width: 340px;
    max-width: 420px;
    position: relative;
    border: 2px solid var(--primary);
}

.setup-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.setup-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.setup-icon .icon {
    color: white;
}

.setup-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 8px;
}

.setup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0;
}

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

.setup-form .form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    text-align: left;
}

.setup-form input {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    width: 100%;
}

.setup-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.setup-form input::placeholder {
    color: var(--text-muted);
}

.setup-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.setup-error {
    color: var(--red);
    font-size: 13px;
    text-align: center;
    margin: 0;
    padding: 10px;
    background: var(--danger-bg);
    border-radius: 6px;
}

.setup-hint {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
}

/* Welcome Screen Sections */
.welcome-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.welcome-section-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.welcome-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
}

.welcome-sessions-loading,
.welcome-sessions-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.welcome-session-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.welcome-session-item:hover {
    border-color: var(--accent);
}

.welcome-session-item.selected {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.welcome-session-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.welcome-session-item.selected .welcome-session-radio {
    border-color: var(--accent);
}

.welcome-session-item.selected .welcome-session-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
}

.welcome-session-info {
    flex: 1;
    min-width: 0;
}

.welcome-session-name {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.welcome-session-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.welcome-session-users {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--success);
    font-size: 12px;
}

.welcome-session-users::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
}

/* Keyboard Shortcuts Overlay */
.shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(9, 9, 11, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.shortcuts-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.shortcuts-modal {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    transform: translateY(30px) scale(0.98);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.shortcuts-overlay.visible .shortcuts-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.shortcuts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.shortcuts-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.shortcuts-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 20px;
    padding: 4px;
}

.shortcuts-close:hover {
    color: var(--text);
}

.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shortcut-key {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    min-width: 40px;
    text-align: center;
}

.shortcut-desc {
    font-size: 13px;
    color: var(--text-muted);
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border);
}

/* Cache indicator */
.cache-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 8px;
    background: var(--bg-elevated);
    border-radius: 4px;
}

.cache-indicator.cached {
    color: var(--green);
}

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

.cache-indicator.cached .cache-dot {
    background: var(--green);
}

/* Session Badge Button */
.session-badge-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.session-badge-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.session-badge-btn.active {
    background: var(--success-bg-hover);
    border-color: var(--green);
}

.session-badge-icon {
    color: var(--text-muted);
    font-size: 8px;
}

.session-badge-btn.active .session-badge-icon {
    color: var(--green);
}

.session-badge-text {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-badge-arrow {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform 0.2s;
}

.session-badge-btn:hover .session-badge-arrow {
    transform: translateY(1px);
}

/* Sessions Modal */
.sessions-modal {
    max-width: 450px;
}

.sessions-list {
    max-height: 300px;
    overflow-y: auto;
}

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

.session-item {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.15s;
    overflow: hidden;
}

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

.session-item-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    gap: 12px;
    cursor: pointer;
}

.session-expand-icon {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.session-item-info {
    flex: 1;
}

.session-item-name {
    font-weight: 500;
    margin-bottom: 4px;
}

.session-item-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-item-users {
    display: flex;
    align-items: center;
    gap: 4px;
}

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

.session-item-actions {
    display: flex;
    gap: 8px;
}

.session-share-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

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

.session-share-btn.copied {
    background: var(--green);
    color: white;
    border-color: var(--green);
}

.session-item-btn {
    padding: 6px 14px;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.session-item-btn:hover {
    background: var(--accent-hover);
}

.session-item-btn.leave {
    background: var(--red);
}

.session-item-btn.leave:hover {
    background: var(--danger-dark);
}

/* Session users dropdown */
.session-users-dropdown {
    display: none;
    padding: 0 16px 12px 44px;
    flex-direction: column;
    gap: 8px;
}

.session-users-dropdown.expanded {
    display: flex;
}

.session-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: white;
}

.session-user-name {
    font-size: 13px;
    color: var(--text-secondary);
}

.session-users-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.session-item.current {
    background: var(--success-bg);
    border-color: var(--green);
}

.session-current-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--green);
    color: white;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 500;
}

/* Upload Progress Modal */
.upload-progress-modal {
    max-width: 500px;
}

.upload-jobs-list {
    max-height: 350px;
    overflow-y: auto;
}

.upload-job-item {
    padding: 14px;
    background: var(--bg-elevated);
    border-radius: 8px;
    margin-bottom: 10px;
}

.upload-job-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.upload-job-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.upload-job-percent {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
}

.upload-job-progress {
    height: 6px;
    background: var(--bg-dark);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.upload-job-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.3s ease-out;
}

.upload-job-progress-bar.done {
    background: var(--green);
}

.upload-job-progress-bar.error {
    background: var(--red);
}

.upload-job-status {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.upload-job-status.done {
    color: var(--green);
}

.upload-job-status.error {
    color: var(--red);
}

.upload-summary {
    padding: 12px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    text-align: center;
}

.upload-count {
    font-size: 13px;
    color: var(--text-muted);
}

#uploadDoneBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Clip Thumbnail with Image */
.clip-thumb-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clip-thumb-placeholder {
    width: 100%;
    aspect-ratio: var(--thumb-aspect-ratio);
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 24px;
}

/* ============ Sync Flash Glow System ============ */

/* Keyframe animation for sync flash */
@keyframes syncFlash {
    0% {
        box-shadow: 0 0 0 0 transparent;
        outline: 0 solid transparent;
    }
    15% {
        box-shadow: 0 0 40px var(--accent-glow), 0 0 60px var(--accent-glow);
        outline: 3px solid var(--accent);
        outline-offset: 2px;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
        outline: 0 solid transparent;
    }
}

@keyframes syncPulse {
    0%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1);
    }
    70% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Sync flash class - add to any element */
.sync-flash {
    animation: syncFlash 0.8s ease-out;
}

/* Sync notification toast */
.sync-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: var(--bg-panel);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    padding: 12px 20px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px var(--shadow-medium), 0 0 0 1px var(--border);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.sync-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.sync-toast-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.sync-toast-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sync-toast-user {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.sync-toast-action {
    font-size: 11px;
    color: var(--text-muted);
}

/* Flash container for dropdowns */
.flash-container {
    position: relative;
    border-radius: var(--radius-sm);
}

.flash-container.sync-flash {
    animation: syncFlash 0.8s ease-out !important;
}

/* Clip thumbnail flash */
.clip-thumbnail.sync-flash {
    animation: syncFlash 0.8s ease-out !important;
    border-color: var(--accent) !important;
}

/* Timeline glow on seek sync */
.timeline-track.sync-flash,
#timelineTrack.sync-flash {
    animation: syncFlash 0.8s ease-out !important;
    background: var(--accent) !important;
}

/* Loop button flash */
#loopBtn.sync-flash {
    animation: syncFlash 0.8s ease-out !important;
}

/* In/Out buttons flash */
.in-out-btn.sync-flash {
    animation: syncFlash 0.8s ease-out !important;
}

/* Overlay flash for major changes */
.sync-overlay-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, var(--accent-glow), transparent 70%);
    pointer-events: none;
    z-index: 2500;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sync-overlay-flash.visible {
    opacity: 0.3;
}

/* ============ Responsive Breakpoints ============ */

/* ============ MOBILE STYLES (max-width: 800px) ============ */
@media (max-width: 800px) {
    /* Mobile CSS Variables */
    :root {
        --sidebar-left: 0px;
        --sidebar-right: 0px;
        --clip-bin-height: 280px;
        --header-height: 48px;
        --mobile-bottom-sheet-height: 40vh;
        --mobile-toolbar-height: 44px;
    }

    /* --- Lock viewport: no scroll, allow zoom --- */
    html {
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body {
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
    }

    /* --- Base Layout: Fill screen, no scroll --- */
    .app {
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh; /* Dynamic viewport height for mobile browsers */
        grid-template-columns: 1fr;
        grid-template-rows: var(--header-height) var(--mobile-toolbar-height) 1fr auto;
        grid-template-areas:
            "header-global"
            "toolbar"
            "main"
            "clip-bin";
        overflow: hidden; /* No scroll */
    }

    /* Projects view on mobile - override desktop specificity */
    .app[data-view="projects"] {
        grid-template-columns: 1fr;
        grid-template-rows: var(--header-height) var(--mobile-toolbar-height) 1fr 0;
    }

    /* --- Header adjustments --- */
    .header-global {
        padding: 0 12px;
        gap: 8px;
    }

    .logo {
        font-size: 14px;
    }

    .logo-text {
        display: none;
    }

    .main-tabs {
        gap: 4px;
    }

    .main-tab {
        padding: 6px 12px;
        font-size: 12px;
    }

    .user-name {
        display: none;
    }

    /* --- Context Toolbar (mobile) --- */
    .context-toolbar {
        padding: 0 8px;
    }

    .toolbar-review {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .panel-toggles {
        gap: 4px;
    }

    .panel-toggle {
        width: 32px;
        height: 32px;
    }

    /* On mobile, panel-toggle buttons are NOT active by default (sidebars hidden) */
    .panel-toggle.active {
        background: var(--bg-hover);
        color: var(--text);
    }

    /* Hide clips toggle on mobile - clip bin is always visible */
    #toggleClipsBtn {
        display: none;
    }

    .toolbar-center {
        flex: 1;
        justify-content: center;
        gap: 8px;
    }

    .session-badge-btn {
        padding: 4px 8px;
        font-size: 11px;
    }

    .session-badge-text {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sync-control {
        padding: 4px 8px;
        font-size: 11px;
    }

    /* Cursor control now visible on mobile */

    .toolbar-right {
        gap: 4px;
    }

    .users-online {
        max-width: 80px;
        overflow: hidden;
    }

    /* --- Sidebars become Bottom Sheets --- */
    .sidebar-left,
    .sidebar-right {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: var(--mobile-bottom-sheet-height);
        max-height: var(--mobile-bottom-sheet-max);
        z-index: 100;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 -4px 20px var(--shadow);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .sidebar-left.mobile-open,
    .sidebar-right.mobile-open {
        transform: translateY(0);
    }

    /* Bottom sheet drag handle */
    .sidebar-left::before,
    .sidebar-right::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
        z-index: 1;
    }

    .sidebar-header,
    .sidebar-right-header {
        padding-top: 20px;
        border-bottom: 1px solid var(--border);
    }

    /* Projects sidebar (left) */
    .sidebar-left {
        z-index: 101;
    }

    .projects-list {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
    }

    /* Comments sidebar (right) */
    .sidebar-right {
        z-index: 102;
    }

    .comments-list {
        flex: 1;
        overflow-y: auto;
    }

    .comment-input-area {
        border-top: 1px solid var(--border);
        padding: 12px;
    }

    /* --- Main Content Area - fills space between toolbar and clips bin --- */
    .main {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .player-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .view-review {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .video-wrapper {
        flex: 1;
        min-height: 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #video, .still-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform-origin: center center;
    }

    /* Controls stay at bottom of player area */
    .player-controls {
        flex-shrink: 0; /* Don't shrink controls */
    }

    /* --- Player Controls (mobile) --- */
    .player-controls {
        padding: 8px;
        gap: 6px;
    }

    .timeline-container {
        height: 32px;
    }

    .controls-row {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Primary controls: transport centered on top, timecode+in/out below */
    .controls-row-primary {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    .transport-controls {
        gap: 2px;
        justify-content: center;
        width: 100%;
        flex: 0 0 100%;
        order: 0;
    }

    .btn-transport {
        width: 36px;
        height: 36px;
    }

    .btn-transport.play-btn {
        width: 44px;
        height: 44px;
    }

    /* Timecode and in/out share second row */
    .timecode {
        font-size: 10px;
        padding: 4px 8px;
        order: 1;
    }

    /* In/out controls - next to timecode */
    .in-out-display {
        gap: 4px;
        order: 2;
        display: flex;
        align-items: center;
    }

    .in-out-btn {
        padding: 4px 6px;
        font-size: 9px;
    }

    .in-out-label {
        font-size: 8px;
    }

    .in-out-value {
        font-size: 9px;
    }

    .controls-row-secondary {
        gap: 6px;
        flex-wrap: wrap;
    }

    .version-select,
    .status-select,
    .quality-select,
    .speed-select,
    .zoom-select {
        padding: 4px 8px;
        font-size: 10px;
    }

    .compare-btn {
        padding: 4px 6px;
    }

    .speed-control {
        display: none;
    }

    /* --- Clip Bin (mobile) - sits at bottom of screen --- */
    .clip-bin {
        height: auto !important;
        min-height: var(--clip-bin-height) !important;
    }

    .clip-bin-header {
        padding: 6px 12px;
    }

    .clip-bin-content {
        padding: 8px;
        gap: 8px;
    }

    .clip-thumbnail {
        width: 160px !important;
        flex-shrink: 0;
    }

    .clip-thumb-image {
        height: 110px !important;
    }

    .clip-thumb-info {
        padding: 6px 8px;
    }

    .clip-thumb-name {
        font-size: 11px;
    }

    .clip-thumb-meta {
        font-size: 10px;
    }

    .clip-status-wrapper {
        display: none;
    }

    .clip-add {
        width: 100px;
        flex-shrink: 0;
    }

    /* --- Overlay for bottom sheets --- */
    .mobile-sheet-overlay {
        position: fixed;
        inset: 0;
        background: var(--bg-overlay);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .mobile-sheet-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* --- Modal as bottom sheet on mobile --- */
    .modal-overlay {
        align-items: flex-end;
    }

    .modal {
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        border-radius: 20px 20px 0 0;
        margin: 0;
        transform: translateY(0);
    }

    .modal-overlay.hidden .modal {
        transform: translateY(100%);
    }

    .modal-body {
        max-height: calc(85vh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-header {
        border-radius: 20px 20px 0 0;
        position: relative;
    }

    /* Drag handle indicator */
    .modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
    }

    /* --- Wipe overlay adjustments --- */
    .wipe-handle {
        width: 32px;
        height: 32px;
    }

    .wipe-labels {
        padding: 0 8px;
    }

    .wipe-label-left,
    .wipe-label-right {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* --- Comments adjustments --- */
    .comment-item {
        padding: 10px 12px;
    }

    .comment-input {
        font-size: 14px;
    }

    /* --- Projects view adjustments --- */
    .view-projects {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
        padding: 12px;
    }

    /* --- Task List Table (mobile) --- */
    .tasks-table-container {
        margin: 12px;
        display: flex;
        flex-direction: column;
    }

    .tasks-table-container:not(.hidden) {
        display: flex !important;
    }

    .task-list-table {
        width: 100%;
        table-layout: auto;
    }

    .task-list-table th,
    .task-list-table td {
        padding: 8px 10px;
    }

    /* Hide columns that aren't essential on mobile */
    .task-list-table .col-assignee,
    .task-list-table .col-date,
    .task-list-table .col-dueDate,
    .task-list-table .col-priority,
    .task-list-table .col-stage,
    .task-list-table .col-config {
        display: none !important;
    }

    /* Make name column take remaining space */
    .task-list-table .col-name {
        width: auto !important;
        min-width: 0 !important;
    }

    /* Compact status column */
    .task-list-table .col-status {
        width: 90px !important;
        min-width: 90px !important;
    }

    /* Select column on mobile - only when select mode active */
    .task-list-table.select-mode-active .col-select {
        width: 28px !important;
        min-width: 28px !important;
        padding: 4px !important;
    }

    /* Compact actions column */
    .task-list-table .col-actions {
        width: 28px !important;
        min-width: 28px !important;
    }

    /* Status badge - more compact */
    .task-list-table .status-badge {
        padding: 3px 8px;
        font-size: 11px;
    }

    /* Task name input - full width */
    .task-list-table .task-name-input {
        font-size: 13px;
    }

    /* Subtask caret button - slightly smaller */
    .btn-expand {
        width: 22px;
        height: 22px;
    }

}

/* ============ SMALL MOBILE (max-width: 480px) ============ */
@media (max-width: 480px) {
    :root {
        --clip-bin-height: 220px;
    }

    .main-tabs {
        margin-left: 8px;
        gap: 2px;
    }

    .main-tab {
        padding: 4px 8px;
        font-size: 11px;
    }

    .session-badge-text {
        display: none;
    }

    .sync-control span {
        display: none;
    }

    .timecode {
        font-size: 10px;
    }

    .transport-controls {
        gap: 0;
    }

    .btn-transport {
        width: 32px;
        height: 32px;
    }

    .btn-transport.play-btn {
        width: 40px;
        height: 40px;
    }

    .controls-row-secondary {
        gap: 4px;
    }

    .clip-thumbnail {
        width: 80px;
    }

    .clip-thumb-image {
        height: 45px;
    }

    .clip-add {
        width: 60px;
    }
}

/* ============ Share Link System ============ */

/* Password Modal */
.password-modal {
    max-width: 380px;
    text-align: center;
}

.password-modal .modal-header {
    justify-content: center;
    border-bottom: none;
    padding-bottom: 0;
}

.password-project-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}

.password-hint {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 20px;
}

.password-error {
    color: var(--red);
    font-size: 13px;
    margin-top: 12px;
}

.password-modal .modal-footer {
    justify-content: center;
    border-top: none;
}

/* Share Modal */
.share-modal {
    max-width: 480px;
}

.share-section {
    margin-bottom: 20px;
}

.share-section:last-child {
    margin-bottom: 0;
}

.share-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.share-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.share-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.share-option label {
    cursor: pointer;
}

.share-option select {
    margin-left: auto;
}

.share-password-input {
    margin-left: 28px;
    margin-bottom: 0;
}

.input-medium {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text);
    font-size: 14px;
}

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

.share-link-display {
    display: flex;
    gap: 8px;
}

.share-link-input {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.share-copied {
    color: var(--green);
    font-size: 12px;
    margin-top: 8px;
}

.share-result {
    padding: 16px;
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* Share Links List */
.share-links-list {
    max-height: 180px;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
}

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

.share-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border-radius: 6px;
    margin-bottom: 6px;
}

.share-link-item:last-child {
    margin-bottom: 0;
}

.share-link-item.inactive {
    opacity: 0.5;
}

.share-link-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.share-link-url {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text);
}

.share-link-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    background: var(--bg-elevated);
}

.share-link-badge.protected {
    background: var(--accent-bg-strong);
    color: var(--accent-light);
}

.share-link-expiry {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-elevated);
    font-size: 10px;
}

.share-link-expiry.expired {
    background: var(--danger-bg-strong);
    color: var(--danger);
}

.share-link-actions {
    display: flex;
    gap: 4px;
}

/* Grouped share links in settings */
.share-links-grouped {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 300px;
    overflow-y: auto;
}

.share-links-project {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.share-links-project-header {
    padding: 10px 12px;
    background: var(--bg-elevated);
    font-weight: 500;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

.share-links-project-links {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.share-links-project-links .share-link-item {
    margin-bottom: 0;
}

/* Copy toast notification */
.copy-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    z-index: 10000;
    animation: toastIn 0.2s ease, toastOut 0.2s ease 1.3s forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
}

.btn-small {
    padding: 4px 8px;
    font-size: 11px;
}

/* Settings Modal */
.settings-modal {
    max-width: 640px;
}

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

.settings-tabs {
    display: flex;
    gap: 0;
}

.settings-tab {
    padding: 16px 20px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}

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

.settings-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: block;
}

.settings-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.settings-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.settings-section-footer {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: auto;
}

.settings-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Profile Account Info */
.profile-account-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-elevated);
    border-radius: 8px;
}

.profile-account-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-username {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.profile-role {
    font-size: 13px;
    color: var(--text-muted);
}

/* Profile Picture Upload */
.profile-picture-upload {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: 8px;
}

.profile-picture-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-picture-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-initials {
    font-size: 24px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.profile-picture-actions {
    display: flex;
    gap: 8px;
}

.profile-upload-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-upload-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

/* Theme Options */
.theme-options {
    display: flex;
    gap: 8px;
}

.theme-option {
    flex: 1;
    cursor: pointer;
}

.theme-option input[type="radio"] {
    display: none;
}

.theme-option-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.theme-option:hover .theme-option-label {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}

.theme-option input[type="radio"]:checked + .theme-option-label {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--text);
}

.theme-custom-options {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.theme-custom-options.hidden {
    display: none;
}

.color-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.color-picker-row label {
    font-size: 13px;
    color: var(--text-muted);
}

.color-picker-row input[type="color"] {
    width: 40px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
}

.color-picker-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.color-picker-row input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* Invite Links */
.invite-links-list {
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 12px;
    max-height: 320px;
    overflow-y: auto;
}

.invite-links-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,0.1);
}

.invite-link-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg-solid);
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.15s ease;
}

.invite-link-item:hover {
    background: var(--bg-hover);
    border-color: rgba(255,255,255,0.1);
}

.invite-link-item:last-child {
    margin-bottom: 0;
}

.invite-link-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.invite-link-url {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--bg-elevated);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
}

.invite-link-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Role badges - pill style */
.invite-link-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.invite-link-role-badge.admin {
    background: rgba(129, 140, 248, 0.2);
    color: var(--accent-lighter);
    border: 1px solid rgba(129, 140, 248, 0.3);
}

.invite-link-role-badge.editor {
    background: var(--success-bg-hover);
    color: var(--success-lighter);
    border: 1px solid var(--success-border);
}

.invite-link-role-badge.viewer {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Legacy classes for backwards compat */
.invite-link-admin {
    color: var(--accent-lighter);
    font-weight: 600;
}

.invite-link-editor {
    color: var(--success-lighter);
    font-weight: 600;
}

.invite-link-viewer {
    color: var(--text-secondary);
    font-weight: 600;
}

/* Project badge */
.invite-link-project {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-size: 11px;
    background: rgba(95, 93, 229, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(95, 93, 229, 0.25);
    font-weight: 500;
}

.invite-link-project::before {
    content: "📁";
    font-size: 10px;
}

/* Access permissions pills */
.invite-link-access {
    display: flex;
    gap: 6px;
    align-items: center;
}

.invite-link-access-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.05);
}

.invite-link-access-pill.active {
    background: rgba(74, 222, 128, 0.12);
    color: var(--success-lighter);
    border-color: rgba(74, 222, 128, 0.2);
}

.invite-link-access-pill .icon {
    width: 10px;
    height: 10px;
}

/* Uses counter */
.invite-link-uses {
    font-size: 11px;
    color: var(--text-muted);
    padding: 3px 8px;
    background: var(--bg-elevated);
    border-radius: 4px;
}

.invite-link-actions {
    display: flex;
    gap: 6px;
    margin-left: 12px;
    flex-shrink: 0;
}

.invite-link-actions .btn {
    padding: 6px 10px;
}

/* Create form section */
.invite-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    margin: 20px 0;
}

.invite-create-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-elevated);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

.invite-form-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.invite-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.invite-form-row .input-label {
    width: 90px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-shrink: 0;
    font-weight: 500;
}

.invite-form-row .input-small {
    flex: 1;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.invite-form-row select.input-small {
    cursor: pointer;
}

.checkbox-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--bg-solid);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.15s ease;
}

.checkbox-label:hover {
    background: var(--bg-hover);
    border-color: rgba(255,255,255,0.1);
}

.checkbox-label:has(input:checked) {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.25);
    color: var(--success-lighter);
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--green);
}

/* Form button styling */
.invite-create-form .btn {
    align-self: flex-start;
    padding: 10px 20px;
    font-weight: 500;
}

/* Registration Modal */
.register-modal {
    max-width: 400px;
}

.register-description {
    color: var(--text-muted);
    margin-bottom: 20px;
    text-align: center;
}

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

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

.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.register-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
}

/* Clip Statuses */
.status-list {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.status-list-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
}

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

.status-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

.status-name {
    flex: 1;
    font-size: 13px;
    color: var(--text);
}

.status-delete {
    padding: 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.status-item:hover .status-delete {
    opacity: 1;
}

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

.status-add-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.status-add-form .input-small {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
}

.input-color {
    width: 36px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    cursor: pointer;
}

.input-color::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.input-color::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* Settings Scope Toggle */
.settings-scope-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.scope-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.scope-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}

.scope-btn.active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

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

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

/* Preset Selector */
.preset-selector {
    margin-bottom: 12px;
}

.preset-selector select {
    width: 100%;
}

/* Preset Preview */
.preset-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    min-height: 44px;
}

.preset-preview-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.preset-preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.preset-preview-empty {
    color: var(--text-muted);
    font-size: 13px;
}

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

/* Preset Options Editor (for creating custom presets) */
.preset-options-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.preset-option-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.preset-option-row .input-small {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
}

.preset-option-row .input-color {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.preset-option-row .btn-ghost {
    flex-shrink: 0;
    padding: 6px;
}

/* Status pill on clip thumbnails */
.clip-status-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 10px;
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px var(--shadow);
}

/* Status selector wrapper */
.clip-status-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 12px;
}

.clip-status-pill-mini {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Status bar at bottom of clip thumbnail */
.clip-status-bar {
    position: absolute;
    bottom: 6px;
    left: 5%;
    width: 90%;
    height: 4px;
    border-radius: 2px;
}

.clip-status-select {
    padding: 3px 8px;
    font-size: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
}

.clip-status-select:hover {
    background: var(--bg-hover);
}

.clip-status-select:focus {
    outline: none;
}

/* Online Users List */
.online-users-list {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.online-users-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.online-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
}

.online-user-item:hover {
    background: var(--bg-hover);
}

.online-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.online-user-name {
    font-size: 13px;
    color: var(--text);
}

/* Users List */
.users-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.users-list-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 12px 0;
}

.user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bg-solid);
}

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

.user-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.user-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.user-item-name {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}

.user-item-role {
    font-size: 11px;
    color: var(--text-muted);
}

.user-item-role.admin {
    color: var(--accent-light);
}

.user-item-role.editor {
    color: var(--success);
}

.user-item-role.viewer {
    color: var(--text-muted);
}

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

.user-item-you {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.user-item-delete,
.user-item-actions .btn {
    opacity: 0;
    transition: opacity 0.15s;
}

.user-item:hover .user-item-delete,
.user-item:hover .user-item-actions .btn {
    opacity: 1;
}

/* Name Prompt Modal */
.name-prompt-modal {
    max-width: 420px;
    text-align: center;
}

.name-prompt-modal .modal-body {
    padding: 24px 20px;
    text-align: left;
}

.name-prompt-project {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
    text-align: center;
}

.share-section-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.share-name-section {
    margin-bottom: 20px;
}

.share-name-section .input-large {
    width: 100%;
}

.share-sessions-section {
    margin-bottom: 16px;
}

.share-sessions-list {
    max-height: 150px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.share-sessions-empty,
.share-sessions-loading {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-elevated);
    border-radius: 6px;
}

.share-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.share-session-item:hover {
    border-color: var(--accent);
}

.share-session-item.selected {
    border-color: var(--accent);
    background: rgba(95, 93, 229, 0.1);
}

.share-session-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.share-session-users {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.share-session-started {
    font-size: 12px;
    color: var(--text-muted);
}

.share-divider {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin: 16px 0;
    position: relative;
}

.share-divider::before,
.share-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--border);
}

.share-divider::before {
    left: 0;
}

.share-divider::after {
    right: 0;
}

.share-new-session-section {
    text-align: center;
}

.share-new-session-section .btn {
    width: 100%;
}

/* Project Share Button */
.project-share-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 12px;
    margin-right: 2px;
    color: var(--text);
}

.project-header:hover .project-share-btn {
    opacity: 0.6;
}

.project-share-btn:hover {
    opacity: 1 !important;
}

/* Project Delete Button */
.project-delete-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 12px;
    margin-left: 2px;
    color: var(--text);
}

.project-header:hover .project-delete-btn {
    opacity: 0.6;
}

.project-delete-btn:hover {
    opacity: 1 !important;
    filter: brightness(1.2);
}

/* Delete Toast */
.delete-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-secondary);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--shadow-medium);
    z-index: 10000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.delete-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Project Add Placeholder (List View) */
.project-add {
    margin: 8px;
    padding: 16px;
    background: var(--bg-elevated);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-muted);
    min-height: 60px;
}

.project-add:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-hover);
}

.project-add-icon {
    margin-bottom: 4px;
}

.project-add-text {
    font-size: 12px;
    font-weight: 500;
}

/* Project Grid Add Placeholder */
.project-grid-add {
    border: 2px dashed var(--border);
    background: transparent;
}

.project-grid-add:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.project-grid-add .project-grid-thumb {
    background: transparent;
}

.project-grid-add .project-grid-icon {
    color: var(--text-muted);
    transition: color 0.15s;
}

.project-grid-add:hover .project-grid-icon {
    color: var(--accent);
}

.project-grid-add .project-grid-name,
.project-grid-add .project-grid-meta {
    color: var(--text-muted);
    transition: color 0.15s;
}

.project-grid-add:hover .project-grid-name {
    color: var(--accent);
}

/* Project Grid Action Buttons */
.project-grid-item {
    position: relative;
}

.project-grid-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.project-grid-item:hover .project-grid-actions {
    opacity: 1;
}

.project-grid-action-btn {
    background: var(--bg-overlay-dark);
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    color: var(--white);
    opacity: 0.9;
    transition: all 0.15s ease;
}

.project-grid-action-btn:hover {
    opacity: 1;
    background: rgba(0,0,0,0.8);
}

.project-grid-delete-btn:hover {
    background: rgba(220, 53, 69, 0.8) !important;
}

.project-grid-share-btn:hover {
    background: var(--accent) !important;
}

.project-grid-cover-btn:hover {
    background: rgba(99, 102, 241, 0.8) !important;
}

/* ============ Image Mode (Still Images) ============ */
/* Hide video-specific controls when viewing still images */
.app.image-mode .timeline-container {
    display: none;
}

/* Hide entire primary controls row (transport, timecode, in/out) */
.app.image-mode .controls-row-primary {
    display: none;
}

/* Hide quality and speed in secondary row */
.app.image-mode .quality-control,
.app.image-mode #qualityControl {
    display: none;
}

.app.image-mode .speed-control,
.app.image-mode #speedControl {
    display: none;
}

/* Hide volume control for images */
.app.image-mode .volume-control,
.app.image-mode #volumeControl {
    display: none;
}

/* Hide frame badge on comments for images (single frame) */
.app.image-mode .comment-frame-badge {
    display: none;
}

/* Show a simplified controls bar for images */
.app.image-mode .player-controls {
    padding: 8px 16px;
    min-height: auto;
}

/* ============ HTML Mode (HTML pages under review) ============ */
.html-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    line-height: normal;
}

/* No timeline, transport, quality, compare or drawing for HTML pages */
.app.html-mode .timeline-container,
.app.html-mode .controls-row-primary,
.app.html-mode .quality-control,
.app.html-mode #qualityControl,
.app.html-mode .speed-control,
.app.html-mode #speedControl,
.app.html-mode .volume-control,
.app.html-mode #volumeControl,
.app.html-mode .compare-control,
.app.html-mode .comment-frame-badge,
.app.html-mode #drawToggleBtn,
.app.html-mode #clearDrawingBtn,
.app.html-mode .canvas-overlay,
.app.html-mode .svg-overlay {
    display: none !important;
}

.app.html-mode .player-controls {
    padding: 8px 16px;
    min-height: auto;
}

.html-only {
    display: none;
}

.app.html-mode .html-only {
    display: inline-flex;
}

.comment-anchor-active {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--bg-dark);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.comment-anchor-active.visible {
    display: flex;
}

.comment-anchor-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-anchor-clear {
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.comment-anchor-clear:hover {
    color: var(--text);
}

.comment-pin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px 10px 10px 2px;
    background: var(--accent);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
}

.comment-pin-badge.other-version {
    background: var(--bg-dark);
    color: var(--text-muted);
    font-weight: 500;
}

/* ============ Focus Mode (QuickTime-style) ============ */
/* Animate grid to collapse all panels */
.app.fullscreen {
    grid-template-columns: 0px 1fr 0px;
    grid-template-rows: 0px 0px 1fr 0px;
}

/* Add focus mode transitions to header and clip-bin (sidebars already have transitions) */
.header-global {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clip-bin {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide content of collapsed areas with animation */
.app.fullscreen .header-global,
.app.fullscreen .sidebar-left,
.app.fullscreen .sidebar-right,
.app.fullscreen .clip-bin {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

/* Context toolbar - add transition for smooth fade out */
.context-toolbar {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* First: fade out the toolbar in its grid position */
.app.fullscreen .context-toolbar {
    opacity: 0;
    pointer-events: none;
}

/* Floating toolbar - starts above viewport, slides down */
.app.fullscreen.controls-visible .context-toolbar {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    width: auto;
    max-width: 700px;
    min-width: 400px;
    padding: 8px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-panel);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    box-shadow: 0 8px 32px var(--shadow-medium),
                0 2px 8px var(--shadow);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideDownToolbar 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideDownToolbar {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Floating player controls - starts below viewport, slides up */
.app.fullscreen .player-controls {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: auto;
    max-width: 800px;
    min-width: 500px;
    padding: 12px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-panel);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    box-shadow: 0 8px 32px var(--shadow-medium),
                0 2px 8px var(--shadow);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app.fullscreen.controls-visible .player-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    animation: slideUpControls 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideUpControls {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Hide timeline scrubbing tooltip overflow */
.app.fullscreen .player-controls .timeline-container {
    overflow: visible;
}

/* Hide panel toggle buttons in fullscreen (they have no effect) */
.app.fullscreen #toggleProjectsBtn,
.app.fullscreen #toggleCommentsBtn,
.app.fullscreen #toggleClipsBtn {
    display: none;
}

/* Cursor auto-hide in focus mode when controls hidden */
.app.fullscreen:not(.controls-visible) {
    cursor: none;
}

.app.fullscreen:not(.controls-visible) .main-content {
    cursor: none;
}

/* ============ Mobile Fullscreen Override ============ */
@media (max-width: 800px) {
    /* Override desktop fullscreen grid to use single-column mobile layout */
    .app.fullscreen {
        grid-template-columns: 1fr;
        grid-template-rows: 0px 0px 1fr 0px;
        grid-template-areas:
            "header-global"
            "toolbar"
            "main"
            "clip-bin";
    }

    /* Mobile fullscreen player controls - full width at bottom */
    .app.fullscreen .player-controls {
        left: 0;
        right: 0;
        bottom: 0;
        transform: none !important;
        width: 100%;
        max-width: none;
        min-width: unset;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding: 10px 12px;
        animation: none !important;
    }

    .app.fullscreen.controls-visible .player-controls {
        transform: none !important;
        animation: none !important;
    }

    /* Mobile fullscreen toolbar - always visible, full width at top */
    .app.fullscreen .context-toolbar,
    .app.fullscreen.controls-visible .context-toolbar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        padding: 8px 12px;
        animation: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1000;
    }

    /* Ensure video fills the main area */
    .app.fullscreen .main-content {
        grid-area: main;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .app.fullscreen .video-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .app.fullscreen #videoPlayer {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

/* ============ Task Detail Modal ============ */

.task-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 15, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Override global .hidden to allow transitions */
.task-modal-overlay.hidden,
.task-modal.hidden {
    display: flex !important;
}

.task-modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.task-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 30px)) scale(0.98);
    width: 980px;
    max-width: 95vw;
    max-height: 90vh;
    background: var(--modal-bg);
    border: none;
    border-radius: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
}

.task-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.task-modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 20px 24px;
    background: var(--modal-elevated);
    border-radius: 20px 20px 0 0;
}

.task-modal-name {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 600;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 10px 14px;
    border-radius: 10px;
    margin: -10px -14px;
    transition: background 0.15s;
}

.task-modal-name:hover {
    background: var(--modal-field);
}

.task-modal-name:focus {
    background: var(--modal-field);
    outline: none;
}

.task-modal-close {
    background: var(--modal-field);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.task-modal-close:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.task-modal-close .icon {
    width: 18px;
    height: 18px;
}

.task-modal-body {
    flex: 1;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 360px;
    min-height: 0;
    background: var(--bg-secondary);
    border-radius: 0 0 20px 20px;
}

/* Left column - main content */
.task-modal-main {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-secondary);
    border-radius: 0 0 0 20px;
}

/* Right column - comments */
.task-modal-sidebar {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    overflow: hidden;
    border-radius: 0 0 20px 0;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px;
    gap: 12px;
}

.task-modal-sidebar-header {
    padding: 0;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-modal-sidebar-header .task-modal-count {
    font-weight: 400;
    opacity: 0.7;
}

.task-modal-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: var(--modal-elevated);
    border-radius: 14px;
}

/* Responsive - stack on smaller screens */
@media (max-width: 800px) {
    .task-modal-overlay {
        align-items: flex-end;
        justify-content: center;
    }

    .task-modal {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(0) !important;
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
    }

    .task-modal.hidden {
        transform: translateY(100%) !important;
    }

    .task-modal:not(.hidden) {
        transform: translateY(0) !important;
    }

    .task-modal-header {
        border-radius: 20px 20px 0 0;
        position: relative;
        padding-top: 24px;
    }

    /* Drag handle indicator */
    .task-modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
    }

    .task-modal-body {
        grid-template-columns: 1fr;
        max-height: calc(90vh - 80px);
        overflow-y: auto;
    }

    .task-modal-main {
        border-right: none;
    }

    .task-modal-sidebar {
        max-height: 250px;
        border-radius: 0;
    }
}

.task-modal-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--modal-elevated);
    border-radius: 14px;
}

.task-modal-field label,
.task-modal-section label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-left: 2px;
}

.task-modal-textarea {
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 0.875rem;
    background: var(--modal-field);
    border: none;
    color: var(--text);
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

.task-modal-textarea:focus {
    outline: none;
    background: var(--modal-field);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.task-modal-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.task-modal-clip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: none;
    border-radius: 10px;
}

.task-modal-clip-icon {
    font-size: 1.125rem;
}

.task-modal-clip-name {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text);
}

.task-modal-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--modal-elevated);
    border-radius: 14px;
}

.task-modal-subtasks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-modal-subtask-empty {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem 0;
}

/* Footer removed - delete button moved to header */

/* Task Modal Properties Grid */
.task-modal-properties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 16px;
    background: var(--modal-elevated);
    border-radius: 14px;
    border: none;
}

.task-modal-prop {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-modal-prop label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-left: 2px;
}

.task-modal-prop-value {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 40px;
    font-size: 0.875rem;
    background: var(--modal-field);
    border: none;
}

.task-modal-prop-value:hover {
    background: var(--modal-field);
    filter: brightness(1.1);
}

.task-modal-prop-value .priority-pill {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.task-modal-assignees {
    display: flex;
    align-items: center;
    gap: -4px;
}

.task-modal-assignees .assignee-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-elevated);
    margin-left: -6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.task-modal-assignees .assignee-avatar:first-child,
.task-modal-assignees .assignee-initials:first-child {
    margin-left: 0;
}

.task-modal-assignees .assignee-initials {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--white);
    font-size: 0.625rem;
    font-weight: 600;
    border: 2px solid var(--bg-elevated);
    margin-left: -6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.task-modal-assignees .assignee-overflow {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 4px;
}

.task-modal-assignees .assignee-placeholder {
    opacity: 0.5;
}

/* Task Modal Section Header */
.task-modal-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-modal-count {
    font-weight: 400;
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Task Modal Subtasks */
.task-modal-subtask {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.task-modal-subtask:hover {
    background: var(--bg-hover);
    transform: translateX(2px);
}

.task-modal-subtask .subtask-name {
    flex: 1;
    font-size: 0.875rem;
}

.task-modal-subtask .status-badge.small {
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
}

.task-modal-subtask .subtask-children {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.task-modal-subtask-add {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.task-modal-subtask-add input {
    flex: 1;
    padding: 10px 14px;
    background: var(--modal-field);
    border: none;
    border-radius: 10px;
    color: var(--text);
    font-size: 0.875rem;
}

.task-modal-subtask-add input:focus {
    outline: none;
    background: var(--modal-field);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* Task Modal Checklist */
.task-modal-checklist {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-modal-checklist-empty {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem 0;
}

.task-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.task-checklist-item:hover {
    background: var(--bg-hover);
}

.task-checklist-item.checked {
    opacity: 0.7;
}

.task-checklist-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.task-checklist-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.task-checklist-checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--text-muted);
    border-radius: 4px;
    transition: all 0.15s ease;
}

.task-checklist-checkbox input:checked + .task-checklist-checkmark {
    background: var(--accent);
    border-color: var(--accent);
}

.task-checklist-checkbox input:checked + .task-checklist-checkmark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.task-checklist-text {
    flex: 1;
    font-size: 0.875rem;
}

.task-checklist-text.strikethrough {
    text-decoration: line-through;
    color: var(--text-muted);
}

.task-checklist-delete {
    opacity: 0;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    transition: all 0.15s ease;
}

.task-checklist-item:hover .task-checklist-delete {
    opacity: 0.5;
}

.task-checklist-delete:hover {
    opacity: 1 !important;
    color: var(--danger);
    background: var(--danger-bg);
}

.task-modal-checklist-add {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.task-modal-checklist-add input {
    flex: 1;
    padding: 10px 14px;
    background: var(--modal-field);
    border: none;
    border-radius: 10px;
    color: var(--text);
    font-size: 0.875rem;
}

.task-modal-checklist-add input:focus {
    outline: none;
    background: var(--modal-field);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* Task Modal Linked Clips */
.task-modal-clips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.task-modal-clips-empty {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem 0;
}

.task-modal-clip-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: none;
    border-radius: 12px;
    min-width: 160px;
    transition: background 0.15s, transform 0.1s;
}

.task-modal-clip-item:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.task-modal-clip-thumb {
    width: 52px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.task-modal-clip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.task-modal-clip-thumb:hover {
    opacity: 0.8;
}

.task-modal-clip-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.task-modal-clip-info .task-modal-clip-name {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-modal-clip-info .task-modal-clip-version {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.task-modal-clip-item .btn-unlink {
    opacity: 0;
    transition: opacity 0.15s;
}

.task-modal-clip-item:hover .btn-unlink {
    opacity: 1;
}

/* Task Comments Styles */
.task-comments {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.task-comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 8px;
    flex: 1;
    overflow-y: auto;
}

.task-comments-empty,
.task-comments-loading {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 16px;
    text-align: center;
}

.task-comment-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: var(--modal-field);
    border-radius: 12px;
    transition: background 0.15s, box-shadow 0.15s;
}

.task-comment-item:hover {
    background: var(--modal-field);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.task-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.task-comment-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.task-comment-content {
    flex: 1;
    min-width: 0;
}

.task-comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.task-comment-author {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.task-comment-time {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.task-comment-delete {
    opacity: 0;
    background: none;
    border: none;
    padding: 0.125rem;
    cursor: pointer;
    color: var(--text-muted);
    margin-left: auto;
    transition: opacity 0.15s, color 0.15s;
}

.task-comment-item:hover .task-comment-delete {
    opacity: 1;
}

.task-comment-delete:hover {
    color: var(--danger);
}

.task-comment-text {
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.4;
    word-wrap: break-word;
}

.task-comments-input {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px 16px;
    background: transparent;
}

.task-comment-input-box {
    flex: 1;
    background: var(--modal-field);
    border-radius: 12px;
    padding: 4px;
}

.task-comment-input {
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.875rem;
    resize: none;
    min-height: 44px;
    max-height: 150px;
    overflow-y: auto;
    font-family: inherit;
    line-height: 1.4;
}

.task-comment-input:focus {
    outline: none;
}

.task-comment-input::placeholder {
    color: var(--text-muted);
}

/* Round submit button for comments */
.task-comment-submit-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.task-comment-submit-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
}

.task-comment-submit-btn:active {
    transform: scale(0.95);
}

.task-comment-submit-btn .icon {
    width: 16px;
    height: 16px;
}

/* Legacy task-detail classes (kept for JS compatibility) */
.task-detail-subtask-empty {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem 0;
    border-color: var(--accent);
}

.task-detail-field-full {
    flex: 1;
}

.task-detail-textarea {
    flex: 1;
    min-height: 100px;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    resize: vertical;
    background: var(--bg-solid);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
}

.task-detail-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.task-detail-clip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated);
    border-radius: 6px;
}

.task-detail-clip-icon {
    font-size: 1rem;
}

.task-detail-clip-name {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text);
}

.task-detail-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-detail-subtasks {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.task-detail-subtask {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated);
    border-radius: 6px;
    font-size: 0.875rem;
}

.task-detail-subtask input[type="checkbox"] {
    margin: 0;
}

/* ============ Create Task Modal ============ */

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.form-field label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ============ Task Table Enhancements ============ */

.task-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.task-row:hover {
    background: var(--bg-hover);
}

.task-name-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.task-name-cell .btn-expand-detail {
    margin-left: auto;
    opacity: 0;
    flex-shrink: 0;
}

.task-name-cell .task-inline-input {
    flex: 1;
    min-width: 0;
}

.task-icon {
    font-size: 0.875rem;
}

.task-children-count {
    font-size: 0.625rem;
    background: var(--bg-elevated);
    color: var(--text-muted);
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
}

.stage-tag {
    font-size: 0.625rem;
    background: var(--accent-soft);
    color: var(--accent);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    margin-left: auto;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.stage-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.stage-trigger {
    cursor: pointer;
}

.stage-trigger:hover .stage-badge {
    filter: brightness(1.1);
}

.stage-placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.assignee-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.assignee-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.assignee-initials {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
}

.assignee-name {
    font-size: 0.875rem;
}

.no-status,
.no-assignee,
.no-date {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.due-date {
    font-size: 0.875rem;
}

.due-date.overdue {
    color: var(--error);
    font-weight: 500;
}

/* Inline select in task table */
.task-inline-select {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    min-width: 80px;
}

.task-inline-select:hover {
    background: var(--bg-hover);
}

.task-inline-select:focus {
    outline: none;
    background: var(--bg-elevated);
}

/* Inline text input in task table */
.task-inline-input {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    width: 100%;
    border-radius: 4px;
}

.task-inline-input:hover {
    background: var(--bg-hover);
}

.task-inline-input:focus {
    outline: none;
    background: var(--bg-elevated);
    box-shadow: 0 0 0 2px var(--accent-color);
}

/* Inline date picker */
.task-inline-date {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
}

.task-inline-date:hover {
    background: var(--bg-hover);
}

.task-inline-date:focus {
    outline: none;
    background: var(--bg-elevated);
}

.task-inline-date.overdue {
    color: var(--red);
}

/* Assignee cell inline */
.assignee-cell-inline {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.assignee-avatar-small {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.assignee-initials-small {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    flex-shrink: 0;
}

.task-assignee-select {
    flex: 1;
    min-width: 60px;
}

/* Status select with color */
.task-status-select {
    border-radius: 4px;
    font-weight: 500;
}

/* Quick add row */
.task-add-row {
    cursor: pointer;
}

.task-add-row:hover {
    background: var(--bg-hover);
}

.quick-add-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    color: var(--text-muted);
}

.quick-add-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--bg-elevated);
    font-size: 1rem;
    font-weight: 300;
}

.quick-add-input {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 0.8125rem;
    padding: 0.25rem;
    flex: 1;
}

.quick-add-input:focus {
    outline: none;
}

.quick-add-input::placeholder {
    color: var(--text-muted);
}

/* Column resize handle */
.th-content {
    display: flex;
    align-items: center;
    position: relative;
}

.th-label {
    flex: 1;
}

.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
}

.resize-handle:hover {
    background: var(--accent-color);
}

/* Actions column (left side) */
.col-actions {
    width: 32px;
    text-align: center;
    padding: 0 !important;
}

.col-config {
    width: 32px;
    text-align: center;
    padding: 0 !important;
}

.btn-expand-detail {
    width: 32px;
    height: 32px;
    opacity: 0.6;
    transition: opacity 0.15s, transform 0.15s;
    padding: 0;
}

.btn-expand-detail svg {
    width: 18px;
    height: 18px;
}

.task-row:hover .btn-expand-detail {
    opacity: 0.7;
}

.task-row .btn-expand-detail:hover {
    opacity: 1 !important;
}

.btn-subtask-toggle:hover,
.btn-expand-detail:hover {
    opacity: 1 !important;
    background: var(--bg-elevated);
}

/* Rotate caret when expanded */
.btn-subtask-toggle.expanded svg {
    transform: rotate(90deg);
}

/* Config columns button in header */
.btn-config-columns {
    opacity: 0.4;
    transition: opacity 0.15s;
    padding: 0.25rem;
}

.btn-config-columns:hover {
    opacity: 1;
    background: var(--bg-elevated);
}

/* Subtask row - simple styling, no tree lines */
.subtask-row {
    background: var(--bg-solid);
}

/* Expand/collapse caret for parent tasks - alltid fast bredde */
.task-expand-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    color: var(--accent);
    background: var(--accent-bg);
    transition: background 0.15s ease;
}

.task-expand-caret svg {
    width: 16px;
    height: 16px;
}

.task-expand-caret:hover {
    background: var(--accent-bg-hover);
}


.task-expand-caret .icon {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.task-expand-caret .icon.rotated {
    transform: rotate(90deg);
}

/* Subtask count badge next to caret */
.task-expand-caret .subtask-count {
    display: none; /* Hide count, caret alone is cleaner */
}

/* Subtask count badge */
.subtask-count {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 2px;
    font-weight: 500;
}

/* Quick add icon in actions column - matches caret size */
.task-add-row .col-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-add-row .quick-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    color: var(--accent);
    background: var(--accent-bg);
    cursor: pointer;
    transition: background 0.15s ease;
}

.task-add-row .quick-add-icon:hover {
    background: var(--accent-bg-hover);
}

.task-add-row .quick-add-icon svg {
    width: 14px;
    height: 14px;
}

/* Legacy expand button (kept for compatibility) */
.col-expand {
    width: 40px;
    text-align: center;
}

.btn-expand {
    opacity: 0;
    transition: opacity 0.15s;
}

.task-row:hover .btn-expand {
    opacity: 1;
}

.btn-expand:hover {
    background: var(--bg-elevated);
}

/* ============ Assignee Dropdown ============ */

.assignee-cell {
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.assignee-cell:hover {
    background: var(--bg-elevated);
}

.assignee-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.assignee-avatar.assignee-initials {
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

.assignee-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.assignee-placeholder:hover {
    background: var(--bg-hover);
}

.assignee-dropdown {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 32px var(--shadow);
    z-index: 1000;
    min-width: 220px;
    max-width: 280px;
    overflow: hidden;
}

.assignee-dropdown-search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.assignee-dropdown-search input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-solid);
    color: var(--text);
    font-size: 0.875rem;
}

.assignee-dropdown-search input:focus {
    outline: none;
    border-color: var(--accent);
}

.assignee-dropdown-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 0.25rem;
}

.assignee-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}

.assignee-dropdown-item:hover {
    background: var(--bg-hover);
}

.assignee-dropdown-item.selected {
    background: var(--accent-soft);
}

.assignee-dropdown-item.unassign {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
    border-radius: 6px 6px 0 0;
}

.assignee-dropdown-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.assignee-dropdown-avatar.assignee-initials {
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 600;
}

.assignee-dropdown-name {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text);
}

.assignee-check {
    color: var(--accent);
}

.assignee-dropdown-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Multi-select checkbox */
.assignee-checkbox {
    width: 20px;
    font-size: 1rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.assignee-dropdown-item.selected .assignee-checkbox {
    color: var(--accent);
}

/* Multiple avatar stacking */
.assignee-cell {
    display: inline-flex;
    align-items: center;
}

.assignee-cell .assignee-avatar {
    margin-left: -8px;
    border: 2px solid var(--bg-solid);
}

.assignee-cell .assignee-avatar:first-child {
    margin-left: 0;
}

.assignee-overflow {
    margin-left: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    padding: 2px 6px;
    border-radius: 10px;
}

/* ============ Global Dropdown Component ============ */

/* Base dropdown container - works with both .dropdown (new) and .custom-dropdown (legacy) */
.dropdown,
.custom-dropdown {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--shadow);
    z-index: 1000;
    overflow: hidden;
}

/* Search box */
.dropdown-search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.dropdown-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-solid);
    color: var(--text);
    font-size: 0.875rem;
}

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

/* Items list */
.dropdown-list,
.custom-dropdown-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 0.25rem;
}

/* Single item - with hover animation */
.dropdown-item,
.custom-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text);
    transition: background 0.1s ease, transform 0.1s ease;
}

.dropdown-item:hover,
.custom-dropdown-item:hover {
    background: var(--bg-hover);
}

.dropdown-item:active {
    transform: scale(0.98);
}

.dropdown-item.selected,
.custom-dropdown-item.selected {
    background: var(--accent-soft);
}

/* Disabled items */
.dropdown-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Clear option */
.dropdown-item-clear,
.custom-dropdown-item.clear-option {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
    border-radius: 6px 6px 0 0;
}

/* Empty state */
.dropdown-empty,
.custom-dropdown-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Item components */
.dropdown-item-color,
.status-dropdown-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.dropdown-item-label,
.status-dropdown-name {
    flex: 1;
}

.dropdown-item-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.dropdown-item-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dropdown-item-initials {
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-checkbox {
    width: 20px;
    font-size: 1rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.dropdown-item.selected .dropdown-checkbox {
    color: var(--accent);
}

/* Clickable cell trigger (for status/stage) */
.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    min-height: 28px;
    transition: background 0.1s ease, transform 0.1s ease;
}

.dropdown-trigger:hover {
    background: var(--bg-hover);
}

.dropdown-trigger:active {
    transform: scale(0.97);
}

/* Status pill style trigger */
.status-trigger {
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.75rem;
    min-width: 60px;
    justify-content: center;
}

.status-trigger .status-color {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.status-trigger.has-status {
    color: inherit;
}

/* Stage text style trigger */
.stage-trigger {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.stage-trigger.has-value {
    color: var(--text);
}

/* ============ Date Picker Component ============ */

.datepicker {
    width: 280px;
    padding: 0;
}

/* Presets section */
.datepicker-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.datepicker-preset {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    background: var(--bg-hover);
    color: var(--text);
    transition: background 0.1s ease, transform 0.1s ease;
}

.datepicker-preset:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.datepicker-preset:active {
    transform: scale(0.96);
}

.datepicker-clear {
    color: var(--text-muted);
}

.datepicker-clear:hover {
    background: var(--danger-bg-hover);
    color: var(--danger);
}

/* Calendar section */
.datepicker-calendar {
    padding: 0.5rem;
}

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

.datepicker-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text);
}

.datepicker-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.1s ease, color 0.1s ease;
}

.datepicker-nav:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* Weekday headers */
.datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 0.25rem;
}

.datepicker-weekdays > div {
    text-align: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.25rem;
    text-transform: uppercase;
}

/* Day cells */
.datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.datepicker-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    font-size: 0.8125rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
    transition: background 0.1s ease, transform 0.1s ease;
}

.datepicker-day:hover {
    background: var(--bg-hover);
}

.datepicker-day:active {
    transform: scale(0.9);
}

.datepicker-day.other-month {
    color: var(--text-muted);
    opacity: 0.5;
}

.datepicker-day.today {
    background: var(--bg-hover);
    font-weight: 600;
    position: relative;
}

.datepicker-day.today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
}

.datepicker-day.selected {
    background: var(--accent);
    color: white;
    font-weight: 600;
}

.datepicker-day.selected:hover {
    background: var(--accent);
    filter: brightness(1.1);
}

/* Date trigger (in task table) */
.date-trigger {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.date-trigger.has-value {
    color: var(--text);
}

.date-trigger.overdue {
    color: var(--danger);
}

/* ============================================================================
   Toast Notifications
   ============================================================================ */

.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 280px;
    max-width: 400px;
    padding: 0.875rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--shadow);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%) scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.toast-hiding {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
}

.toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.toast-icon .icon {
    width: 20px;
    height: 20px;
}

.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--info); }

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

.toast-message {
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.4;
}

.toast-action {
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--accent);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.toast-action:hover {
    background: var(--bg-hover);
}

.toast-dismiss {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.toast-dismiss:hover {
    color: var(--text);
    background: var(--bg-hover);
}

/* ============================================================================
   Confirm Dialog
   ============================================================================ */

.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-overlay);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.confirm-visible {
    opacity: 1;
}

.confirm-hiding {
    opacity: 0;
}

.confirm-dialog {
    width: 100%;
    max-width: 400px;
    margin: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 40px var(--shadow);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.98) translateY(30px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.confirm-visible .confirm-dialog {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.confirm-hiding .confirm-dialog {
    opacity: 0;
    transform: scale(0.98) translateY(30px);
}

.confirm-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.25rem 0.75rem;
}

.confirm-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.confirm-icon .icon {
    width: 22px;
    height: 22px;
}

.confirm-icon-default {
    background: var(--info-bg);
    color: var(--info);
}

.confirm-icon-danger {
    background: var(--danger-bg-hover);
    color: var(--danger);
}

.confirm-icon-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.confirm-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.confirm-body {
    padding: 0 1.25rem 1.25rem;
}

.confirm-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
}

.confirm-footer .btn {
    min-width: 80px;
}

/* ============================================================================
   Modal Component (ui-modal-*)
   ============================================================================ */

body.ui-modal-open {
    overflow: hidden;
}

.ui-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--bg-overlay);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s ease;
    overflow-y: auto;
}

.ui-modal-overlay.ui-modal-visible {
    opacity: 1;
}

.ui-modal-overlay.ui-modal-hiding {
    opacity: 0;
}

.ui-modal {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 40px var(--shadow);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.98) translateY(30px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-modal-visible .ui-modal {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.ui-modal-hiding .ui-modal {
    opacity: 0;
    transform: scale(0.98) translateY(30px);
}

/* Modal sizes */
.ui-modal-small { max-width: 360px; }
.ui-modal-medium { max-width: 520px; }
.ui-modal-large { max-width: 720px; }
.ui-modal-full { max-width: 95vw; max-height: 95vh; }

.ui-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
}

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

.ui-modal .modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.ui-modal .modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.ui-modal .modal-close:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.ui-modal .modal-close .icon {
    width: 18px;
    height: 18px;
}

.ui-modal .modal-body {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
}

.ui-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
}

/* Mobile bottom sheet for ui-modal and confirm-dialog */
@media (max-width: 800px) {
    .ui-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .ui-modal {
        width: 100%;
        max-width: 100% !important;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(0);
    }

    .ui-modal-visible .ui-modal {
        transform: translateY(0);
    }

    .ui-modal-hiding .ui-modal,
    .ui-modal {
        transform: translateY(100%);
    }

    .ui-modal-visible .ui-modal {
        transform: translateY(0);
    }

    .ui-modal .modal-header {
        border-radius: 20px 20px 0 0;
        position: relative;
        padding-top: 1.5rem;
    }

    .ui-modal .modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
    }

    .ui-modal .modal-body {
        max-height: calc(90vh - 140px);
    }

    .confirm-overlay {
        align-items: flex-end;
    }

    .confirm-dialog {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 20px 20px 0 0;
        transform: translateY(0);
    }

    .confirm-visible .confirm-dialog {
        transform: translateY(0);
    }

    .confirm-hiding .confirm-dialog {
        transform: translateY(100%);
    }

    .confirm-dialog:not(.confirm-visible .confirm-dialog):not(.confirm-hiding .confirm-dialog) {
        transform: translateY(100%);
    }

    .confirm-header {
        border-radius: 20px 20px 0 0;
        position: relative;
        padding-top: 1.5rem;
    }

    .confirm-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
    }
}

/* ============================================================================
   Project Selection Modal
   ============================================================================ */

.project-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
}

.project-selection-item {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.project-selection-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--shadow);
}

.project-selection-thumb {
    aspect-ratio: 16/9;
    background: var(--bg-dark);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-selection-thumb.has-cover {
    background-color: transparent;
}

.project-selection-icon {
    color: var(--text-muted);
    opacity: 0.5;
}

.project-selection-icon .icon {
    width: 48px;
    height: 48px;
}

.project-selection-info {
    padding: 0.75rem;
}

.project-selection-name {
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-selection-meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Add project button styling */
.project-selection-add {
    border: 2px dashed var(--border);
    background: transparent;
}

.project-selection-add:hover {
    border-color: var(--accent);
    background: rgba(95, 93, 229, 0.1);
}

.project-selection-add .project-selection-thumb {
    background: transparent;
}

.project-selection-add .project-selection-icon {
    color: var(--accent);
    opacity: 0.7;
}

.project-selection-add:hover .project-selection-icon {
    opacity: 1;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .project-selection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* ============================================================================
   ColorPicker
   ============================================================================ */

.colorpicker {
    padding: 0.75rem;
    min-width: auto !important;
    width: auto;
}

.colorpicker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.colorpicker-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.colorpicker-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px var(--shadow);
}

.colorpicker-swatch:active {
    transform: scale(0.95);
}

.colorpicker-swatch.selected {
    box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--accent);
}

.colorpicker-swatch .icon {
    color: white;
    filter: drop-shadow(0 1px 2px var(--shadow));
}

.colorpicker-clear {
    background: var(--bg-tertiary);
    border: 1px dashed var(--border);
    color: var(--text-muted);
}

.colorpicker-clear:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* ============================================================================
   Context Menu
   ============================================================================ */

.context-menu {
    position: fixed;
    z-index: 10002;
    min-width: 160px;
    max-width: 280px;
    padding: 0.375rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--shadow);
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top left;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.context-menu-visible {
    opacity: 1;
    transform: scale(1);
}

.context-menu-hiding {
    opacity: 0;
    transform: scale(0.95);
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.context-menu-item:hover {
    background: var(--bg-hover);
}

.context-menu-item:active {
    background: var(--bg-tertiary);
}

.context-menu-disabled {
    opacity: 0.5;
    pointer-events: none;
}

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

.context-menu-danger:hover {
    background: var(--danger-bg);
}

.context-menu-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.context-menu-danger .context-menu-icon {
    color: var(--danger);
}

.context-menu-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.context-menu-shortcut {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.context-menu-separator {
    height: 1px;
    margin: 0.375rem 0.5rem;
    background: var(--border);
}

.context-menu-header {
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================================
   Player Bar Dropdowns
   ============================================================================ */

.player-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    min-width: 0;
}

.player-dropdown-trigger:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.player-dropdown-trigger .icon {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.player-dropdown-trigger.dropdown-open .icon {
    transform: rotate(180deg);
}

.player-dropdown-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status trigger with color */
.player-dropdown-trigger.status-trigger.has-status {
    border-color: transparent;
    font-weight: 500;
}

.player-dropdown-trigger.status-trigger.has-status .icon {
    color: inherit;
    opacity: 0.7;
}

/* Player dropdown specific sizing */
.version-control .player-dropdown-trigger { min-width: 52px; }
.status-control .player-dropdown-trigger { min-width: 80px; }
.quality-control .player-dropdown-trigger { min-width: 56px; }
.speed-control .player-dropdown-trigger { min-width: 42px; }
.zoom-control .player-dropdown-trigger { min-width: 52px; }

/* ============================================================================
   Clip Bin Status Trigger
   ============================================================================ */

.clip-status-trigger {
    display: block;
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.clip-status-trigger:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.clip-status-trigger.has-status {
    border-color: transparent;
    font-weight: 500;
}

/* Status dropdown color swatch */
.status-dropdown-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ============================================================================
   Avatar Component
   ============================================================================ */

.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    font-weight: 600;
    user-select: none;
}

.avatar-clickable {
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.avatar-clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px var(--shadow);
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.4em;
    letter-spacing: 0.02em;
}

/* Avatar sizes - font scales with container */
.avatar-xs { font-size: 20px; }
.avatar-sm { font-size: 24px; }
.avatar-md { font-size: 32px; }
.avatar-lg { font-size: 40px; }
.avatar-xl { font-size: 48px; }
.avatar-xxl { font-size: 64px; }

/* Status dot */
.avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    min-width: 6px;
    min-height: 6px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
    box-sizing: content-box;
}

.avatar-status-online { background: var(--success); }
.avatar-status-offline { background: var(--gray-500); }
.avatar-status-away { background: var(--warning); }
.avatar-status-busy { background: var(--danger); }

/* Avatar stack */
.avatar-stack {
    display: inline-flex;
    flex-direction: row-reverse;
}

.avatar-stacked {
    margin-left: -8px;
    border: 2px solid var(--bg-secondary);
    box-sizing: content-box;
}

.avatar-stacked:last-child {
    margin-left: 0;
}

.avatar-overflow {
    border: 2px solid var(--bg-secondary);
    box-sizing: content-box;
}

/* ============================================================================
   Badge Component
   ============================================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.4;
}

.badge-rounded {
    border-radius: 9999px;
}

/* Badge sizes */
.badge-sm {
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
}

.badge-md {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
}

.badge-lg {
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
}

.badge-icon {
    width: 0.875em;
    height: 0.875em;
    flex-shrink: 0;
}

.badge-icon-only {
    padding: 0.25rem;
}

.badge-icon-only .badge-icon {
    width: 1em;
    height: 1em;
}

/* Count badge */
.badge-count {
    min-width: 1.25rem;
    text-align: center;
    padding: 0.0625rem 0.25rem;
}

/* Dot badge */
.badge-dot {
    display: inline-block;
    border-radius: 50%;
}

.badge-dot-sm { width: 6px; height: 6px; }
.badge-dot-md { width: 8px; height: 8px; }
.badge-dot-lg { width: 10px; height: 10px; }

.badge-dot-pulse {
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

/* ============ Untagged Assets Section ============ */

/* Separate container for untagged assets */
.untagged-assets-container {
    margin: 24px;
    background: var(--bg-panel);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border);
    padding: 16px;
}

.untagged-assets-container.hidden {
    display: none;
}

/* Legacy class - keep for backwards compatibility */
.untagged-assets-section {
    margin-top: 24px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.untagged-assets-section.hidden {
    display: none;
}

.untagged-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.untagged-header:hover {
    background: var(--bg-hover);
}

.untagged-chevron {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.untagged-chevron.expanded {
    transform: rotate(90deg);
}

.untagged-count {
    background: var(--bg-elevated);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}

.untagged-assets-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 160px));
    gap: 8px;
    padding: 12px;
    align-content: start;
    /* No max-height or scroll - grows with content, page scrolls */
}

.untagged-assets-list.hidden {
    display: none;
}

/* Use clips-grid styling for untagged clip thumbnails */
.untagged-assets-list .clip-thumbnail {
    width: auto;
    flex-shrink: 1;
}

.untagged-assets-list .clip-thumb-image {
    aspect-ratio: 1/1;
    height: auto;
}

.untagged-assets-list .clip-thumb-info {
    padding: 4px 6px 12px;
}

.untagged-assets-list .clip-thumb-name {
    font-size: 10px;
}

.untagged-assets-list .clip-thumb-meta {
    font-size: 9px;
}

/* Convert button on untagged clips */
.clip-thumbnail.untagged .untagged-convert-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: var(--accent);
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    color: var(--white);
    opacity: 0;
    transition: all 0.15s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clip-thumbnail.untagged .untagged-convert-btn .icon {
    width: 14px;
    height: 14px;
}

.clip-thumbnail.untagged:hover .untagged-convert-btn {
    opacity: 1;
}

.clip-thumbnail.untagged .untagged-convert-btn:hover {
    background: var(--accent-hover);
    transform: scale(1.1);
}

.clip-thumbnail.untagged .untagged-convert-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.clip-thumbnail.untagged .untagged-convert-btn .spinner {
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============ Priority Styles ============ */

.priority-trigger {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.priority-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid;
    white-space: nowrap;
}

.priority-dropdown {
    min-width: 100px;
}

.priority-dropdown .dropdown-item {
    padding: 6px 10px;
}

.priority-dropdown .dropdown-item:hover {
    background: var(--surface-hover);
}

.priority-dropdown .dropdown-item.selected {
    background: var(--accent-faint);
}

.priority-trigger.priority-none {
    color: var(--text-muted);
}

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

.priority-dropdown .clear-option {
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

/* ============ Task Sections Styles ============ */

.task-section {
    margin-bottom: 16px;
    background: var(--surface);
    border-radius: 8px;
    overflow: hidden;
}

.task-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--surface-hover);
    border-left: 3px solid var(--accent);
    transition: background 0.15s ease;
}

.task-section-header:hover {
    background: var(--bg-alt);
}

.task-section-header.unsectioned-header {
    border-left-color: var(--text-muted);
}

.section-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

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

.section-name {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
}

.section-count {
    color: var(--text-muted);
    font-size: 12px;
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 10px;
}

.section-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.task-section-header:hover .section-actions {
    opacity: 1;
}

.section-actions .btn-icon {
    padding: 4px;
}

.section-actions .btn-icon:hover {
    background: var(--surface);
}

.task-section-content {
    border-top: 1px solid var(--border-color);
}

.task-section-content.hidden {
    display: none;
}

.section-task-table {
    width: 100%;
    margin: 0;
}

.section-task-table thead tr {
    background: var(--surface);
}

/* New Section Button */
.btn-new-section {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin: 8px 0;
    width: 100%;
    justify-content: flex-start;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.btn-new-section:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
    border-color: var(--accent);
}

/* Color input styling */
.form-color {
    height: 40px;
    padding: 4px;
    cursor: pointer;
}

.form-color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.form-color::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* ============ Task View Toolbar ============ */

.task-view-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    gap: 1rem;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.toolbar-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toolbar-control label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.toolbar-control select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
}

.toolbar-control select:hover {
    border-color: var(--border-hover);
}

.task-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.btn-sort-dir {
    padding: 0.25rem;
    border-radius: 4px;
    transition: transform 0.15s;
}

.btn-sort-dir .rotate-180 {
    transform: rotate(180deg);
}

/* ============ Task Grouping ============ */

.task-group {
    margin-bottom: 1rem;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    /* No overflow hidden - content determines height */
}

/* Untagged/None group - visually distinct */
.task-group-untagged {
    background: var(--bg);
    border-style: dashed;
    border-color: var(--border-light);
    margin-top: 1.5rem;
    opacity: 0.9;
}

.task-group-untagged .task-group-header {
    background: transparent;
}

.task-group-untagged .group-label {
    color: var(--text-muted);
    font-style: italic;
}

.task-group-untagged .group-count {
    background: var(--bg-hover);
}

.task-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    cursor: pointer;
    user-select: none;
    border-radius: 0;
}

.task-group-header:hover {
    background: var(--surface-hover);
}

.group-expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
    color: var(--text-muted);
}

.group-expand-icon.expanded {
    transform: rotate(90deg);
}

.group-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.group-label {
    font-weight: 500;
    color: var(--text);
    flex: 1;
}

.group-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
}

.task-group-content {
    padding: 0;
}

/* Base task table styles (shared between all views) */
.task-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.task-table th,
.task-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.task-table .col-actions,
.task-table .col-config {
    width: 32px;
    padding: 0 !important;
    text-align: center;
}

/* Remove inner table borders when inside group */
.task-group .task-table {
    border: none;
    border-radius: 0;
}

.task-list-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

/* ============================================
   Reusable Dark Checkbox - .cb-dark
   Use: <input type="checkbox" class="cb-dark">
   Variants: .cb-sm (14px), .cb-lg (20px)
   ============================================ */
.cb-dark {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-elevated, rgba(32, 30, 50, 0.95));
    border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.15));
    border-radius: 4px;
    position: relative;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.cb-dark:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-muted, rgba(255, 255, 255, 0.4));
}

.cb-dark:checked {
    background: var(--primary, #6366f1);
    border-color: var(--primary, #6366f1);
}

.cb-dark:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cb-dark:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-glow, rgba(95, 93, 229, 0.3));
}

/* Size variants */
.cb-dark.cb-sm {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
}
.cb-dark.cb-sm:checked::after {
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
}

.cb-dark.cb-lg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}
.cb-dark.cb-lg:checked::after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
}

/* ============================================
   Multi-Select & Bulk Actions
   ============================================ */

/* Select column - hidden by default */
.col-select,
.task-list-table .col-select,
table .col-select {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}

.col-select > *,
.task-list-table .col-select > *,
table .col-select > * {
    visibility: hidden;
    width: 0;
}

/* Show select column when multi-select mode is active */
.select-mode-active .col-select,
.task-list-table.select-mode-active .col-select,
table.select-mode-active .col-select {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    text-align: center !important;
    padding: 0 4px !important;
    opacity: 1;
}

.select-mode-active .col-select > *,
.task-list-table.select-mode-active .col-select > *,
table.select-mode-active .col-select > * {
    visibility: visible;
    width: auto;
}

/* Toggle select mode button */
.btn-toggle-select {
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.btn-toggle-select:hover {
    opacity: 0.8;
}

.btn-toggle-select.active {
    opacity: 1;
    color: var(--primary);
}

/* Task checkboxes - use .cb-dark base class (no duplicate styling needed) */

/* Selected row styling */
tr.task-row.selected {
    background-color: var(--primary-subtle, rgba(99, 102, 241, 0.08)) !important;
}

tr.task-row.selected:hover {
    background-color: var(--primary-subtle-hover, rgba(99, 102, 241, 0.12)) !important;
}

/* Bulk action bar */
.bulk-action-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
    gap: 1rem;
}

.bulk-action-bar.visible {
    display: flex;
}

.bulk-action-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.bulk-count {
    font-weight: 600;
    color: var(--primary);
}

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

/* Danger button for delete */
.btn-danger {
    background: var(--danger, #ef4444);
    color: white;
    border: none;
}

.btn-danger:hover {
    background: var(--danger-hover, #dc2626);
}

.btn-danger .icon {
    color: white;
}

/* ============================================
   Comment Multi-Select & Bulk Actions
   ============================================ */

/* Selected comment styling */
.comment-item.selected {
    background-color: var(--primary-subtle, rgba(99, 102, 241, 0.08)) !important;
    border-color: var(--primary) !important;
}

/* Comment bulk action bar */
.comment-bulk-action-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.comment-bulk-action-bar.visible {
    display: flex;
}

.comment-bulk-action-bar .bulk-action-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-bulk-action-bar .bulk-count {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.comment-bulk-action-bar .bulk-actions {
    display: flex;
    gap: 0.25rem;
}

/* Extra small button variant */
.btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    height: auto;
    min-height: unset;
}

.btn-xs .icon-xs {
    width: 12px;
    height: 12px;
}

/* ============ Lounge / Chat Module ============ */

.lounge-layout {
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--bg);
}

.lounge-sidebar {
    width: var(--sidebar-left);
    min-width: 260px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.lounge-sidebar-right {
    width: 260px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.lounge-sidebar-right .lounge-online-section {
    border-top: none;
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
}

.lounge-sidebar-right .lounge-online-list {
    max-height: none;
}

.lounge-sidebar-section {
    border-bottom: 1px solid var(--border);
}

.lounge-sidebar-section:last-child {
    border-bottom: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lounge-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 8px;
}

.lounge-sidebar-header span {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.lounge-sidebar-header h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.lounge-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}

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

.lounge-add-btn .icon {
    width: 14px;
    height: 14px;
}

.lounge-channel-list {
    padding: 4px 8px 12px;
}

.lounge-channel-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.lounge-channel-item:hover {
    background: var(--bg-hover);
}

.lounge-channel-item.active {
    background: var(--accent-alpha);
}

.lounge-channel-item.active .lounge-channel-hash,
.lounge-channel-item.active .lounge-channel-name {
    color: var(--accent);
}

.lounge-channel-hash {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}

.lounge-channel-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lounge-empty-channels {
    padding: 8px 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.lounge-room-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 8px;
}

.lounge-room-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.lounge-room-item:hover {
    background: var(--bg-hover);
}

.lounge-room-item.active {
    background: var(--accent-alpha);
}

.lounge-room-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-tertiary);
    flex-shrink: 0;
}

.lounge-room-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lounge-online-section {
    border-top: 1px solid var(--border);
    padding: 12px;
}

.lounge-online-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lounge-online-count {
    background: var(--accent);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
}

.lounge-online-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.lounge-online-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.lounge-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    position: relative;
    overflow: hidden;
}

.lounge-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lounge-user-avatar.is-me {
    box-shadow: 0 0 0 2px var(--accent);
}

.lounge-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
}

.lounge-status-dot.online {
    background: #22c55e;
}

.lounge-user-name {
    font-size: 0.8125rem;
    color: var(--text);
}

/* Main chat area */
.lounge-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lounge-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

.lounge-chat-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1.1rem;
    font-weight: 600;
}

.lounge-chat-hash {
    color: var(--text-muted);
}

.lounge-member-count {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Messages container */
.lounge-messages-container {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.lounge-messages-list {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lounge-no-messages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

.lounge-welcome-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.lounge-no-messages h3 {
    margin: 0 0 8px 0;
    color: var(--text);
}

.lounge-no-messages p {
    margin: 0;
}

/* Date separator */
.lounge-date-separator {
    display: flex;
    align-items: center;
    margin: 16px 0;
}

.lounge-date-separator::before,
.lounge-date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.lounge-date-separator span {
    padding: 0 16px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Messages */
.lounge-message {
    display: flex;
    gap: 12px;
    padding: 8px 8px;
    border-radius: 6px;
    position: relative;
}

.lounge-message:hover {
    background: var(--bg-hover);
}

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

.lounge-message.grouped {
    padding-left: 52px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.lounge-message.grouped .lounge-message-time-hover {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0;
}

.lounge-message.grouped:hover .lounge-message-time-hover {
    opacity: 1;
}

.lounge-message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
}

.lounge-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lounge-message-content {
    flex: 1;
    min-width: 0;
}

.lounge-message-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.lounge-message-author {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.lounge-message-time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.lounge-message-body {
    position: relative;
}

.lounge-message-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    word-wrap: break-word;
}

.lounge-message-text.deleted {
    color: var(--text-muted);
    font-style: italic;
}

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

.lounge-message-text code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
}

.lounge-edited {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Reply preview in message */
.lounge-message-reply {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-bottom: 4px;
    border-left: 2px solid var(--accent);
    background: var(--bg-secondary);
    border-radius: 0 4px 4px 0;
    font-size: 0.8rem;
}

.lounge-reply-author {
    font-weight: 600;
    color: var(--accent);
}

.lounge-reply-excerpt {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Message actions */
.lounge-message-actions {
    position: absolute;
    top: 4px;
    right: 8px;
    display: flex;
    gap: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    box-shadow: var(--shadow-md);
}

.lounge-action-btn {
    padding: 4px 6px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}

.lounge-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* Reactions */
.lounge-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.lounge-reaction {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s;
}

.lounge-reaction:hover {
    border-color: var(--accent);
}

.lounge-reaction.has-own {
    background: var(--accent-alpha);
    border-color: var(--accent);
}

.lounge-reaction-emoji {
    font-size: 0.9rem;
}

.lounge-reaction-count {
    color: var(--text-muted);
    font-weight: 500;
}

.lounge-reaction-add {
    padding: 2px 6px;
    color: var(--text-muted);
}

/* Quick reaction picker */
.lounge-quick-picker {
    position: absolute;
    bottom: 100%;
    right: 0;
    display: flex;
    gap: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
}

.lounge-quick-picker button {
    padding: 4px 6px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.15s;
}

.lounge-quick-picker button:hover {
    background: var(--bg-hover);
    transform: scale(1.2);
}

/* Attachments */
.lounge-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.lounge-attachment.image {
    max-width: 300px;
    max-height: 200px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.lounge-attachment.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lounge-attachment.file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.15s;
}

.lounge-attachment.file:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.lounge-attachment-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.lounge-attachment-size {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Scroll to bottom button */
.lounge-scroll-bottom {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: all 0.2s;
}

.lounge-scroll-bottom:hover {
    transform: translateX(-50%) scale(1.05);
}

.lounge-scroll-bottom.hidden {
    display: none;
}

/* Typing indicator */
.lounge-typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 24px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.lounge-typing-dots {
    display: flex;
    gap: 3px;
}

.lounge-typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: lounge-typing 1.4s infinite;
}

.lounge-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.lounge-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes lounge-typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

/* Input area */
.lounge-input-area {
    padding: 12px 20px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.lounge-reply-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--bg-secondary);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
}

.lounge-reply-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    overflow: hidden;
}

.lounge-reply-label {
    color: var(--text-muted);
}

.lounge-reply-user {
    font-weight: 600;
    color: var(--accent);
}

.lounge-reply-text {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lounge-reply-close {
    padding: 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
}

.lounge-reply-close:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.lounge-attachments-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.lounge-pending-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
}

.lounge-pending-attachment img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
}

.lounge-pending-attachment button {
    padding: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
}

.lounge-pending-attachment button:hover {
    color: var(--danger);
}

/* Input toolbar */
.lounge-input-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin-bottom: 8px;
}

.lounge-toolbar-group {
    display: flex;
    gap: 2px;
}

.lounge-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s ease;
    font-size: 12px;
    font-weight: 600;
}

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

.lounge-toolbar-btn:active {
    background: var(--bg-active);
}

.lounge-toolbar-btn .icon {
    width: 16px;
    height: 16px;
}

.lounge-toolbar-btn strong {
    font-size: 13px;
    font-weight: 700;
}

.lounge-toolbar-btn em {
    font-size: 13px;
    font-style: italic;
}

.lounge-toolbar-separator {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 6px;
}

.lounge-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
}

.lounge-input-wrapper {
    flex: 1;
}

.lounge-input {
    width: 100%;
    background: transparent;
    border: none;
    resize: none;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.4;
    max-height: 150px;
}

.lounge-input:focus {
    outline: none;
}

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

.lounge-input-btn {
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}

.lounge-input-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.lounge-send-btn {
    padding: 8px 12px;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: white;
    transition: all 0.15s;
}

.lounge-send-btn:hover {
    background: var(--accent-hover);
}

/* Emoji picker */
.lounge-emoji-picker {
    position: fixed;
    bottom: 100px;
    right: 40px;
    width: 320px;
    max-height: 400px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    z-index: 1000;
}

.lounge-emoji-picker.hidden {
    display: none;
}

.lounge-emoji-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.lounge-emoji-close {
    padding: 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
}

.lounge-emoji-close:hover {
    background: var(--bg-hover);
}

.lounge-emoji-quick {
    display: flex;
    gap: 4px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.lounge-emoji-categories {
    padding: 12px;
    max-height: 280px;
    overflow-y: auto;
}

.lounge-emoji-category {
    margin-bottom: 16px;
}

.lounge-emoji-category-name {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.lounge-emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.lounge-emoji-btn {
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.15s;
}

.lounge-emoji-btn:hover {
    background: var(--bg-hover);
    transform: scale(1.2);
}

/* Image preview modal */
.lounge-image-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lounge-image-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.lounge-image-modal img {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: var(--shadow-xl);
}

.lounge-image-close {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    transition: all 0.15s;
}

.lounge-image-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Empty states */
.lounge-empty,
.lounge-select-room {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

.lounge-empty h3,
.lounge-select-room h3 {
    margin: 16px 0 8px;
    color: var(--text);
}

.lounge-empty p,
.lounge-select-room p {
    margin: 0;
}

/* ============ Task toolbar: search / filter / sort / group ============ */
.task-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.task-toolbar.hidden {
    display: none;
}

.task-toolbar-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 200px;
    max-width: 280px;
    padding: 0 10px;
    height: 30px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

.task-toolbar-search:focus-within {
    border-color: var(--accent);
}

.task-toolbar-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

.task-toolbar-btn,
.task-toolbar-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.task-toolbar-btn:hover,
.task-toolbar-select:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.task-toolbar-btn.active {
    color: var(--text);
    border-color: var(--accent);
    background: var(--accent-bg);
}

.task-toolbar-btn.hidden {
    display: none;
}

.task-toolbar-select select {
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding-right: 2px;
}

.task-toolbar-select select option {
    background: var(--bg-solid);
    color: var(--text);
}

.task-toolbar-dir {
    width: 30px;
    padding: 0;
    justify-content: center;
    font-size: 14px;
}

.task-toolbar-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--white);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

.task-toolbar-badge.hidden {
    display: none;
}

.task-toolbar-clear {
    border-color: transparent;
}

.task-toolbar-count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
}

.task-filter-menu {
    position: fixed;
    z-index: 1000;
    max-width: calc(100vw - 16px);
    max-height: 60vh;
    overflow: auto;
    padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px var(--shadow-medium);
    backdrop-filter: blur(12px);
}

.task-filter-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.task-filter-group {
    min-width: 140px;
}

.task-filter-title {
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.task-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.task-filter-option:hover {
    background: var(--bg-hover);
}

.task-filter-dot,
.task-group-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-group-row td {
    padding: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.task-group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.task-group-caret {
    transform: rotate(90deg);
    transition: transform 0.15s ease;
    color: var(--text-muted);
}

.task-group-row.collapsed .task-group-caret {
    transform: rotate(0deg);
}

.task-group-count {
    color: var(--text-muted);
    font-weight: 400;
}

.task-filter-empty td {
    padding: 32px 12px;
    text-align: center;
    color: var(--text-muted);
}

.th-sortable {
    cursor: pointer;
    user-select: none;
}

.th-sortable:hover,
.th-sortable.sorted {
    color: var(--text);
}

.th-sort-arrow {
    margin-left: 4px;
}

@media (max-width: 640px) {
    .task-toolbar-search {
        max-width: none;
        flex-basis: 100%;
    }

    .task-toolbar-count {
        margin-left: 0;
    }
}