:root {
    --primary-color: #34d399;
    --primary-hover: #2cc48d;
    --primary-soft: #ecfdf5;
    --success-color: #4ade80;
    --warning-color: #fbbf24;
    --danger-color: #f87171;
    --gray-50: #f8fdfb;
    --gray-100: #f0f9f5;
    --gray-200: #dff0e8;
    --gray-300: #c6ddd2;
    --gray-500: #7a9e8e;
    --gray-600: #4d7363;
    --gray-700: #2d4f42;
    --gray-800: #1e3a30;
    --gray-900: #143026;
    --shadow-sm: 0 1px 3px rgba(52, 211, 153, 0.06);
    --shadow-md: 0 4px 8px rgba(52, 211, 153, 0.08);
    --shadow-lg: 0 10px 20px rgba(52, 211, 153, 0.1);
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 50%;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--gray-50);
    color: var(--gray-900);
    line-height: 1.6;
    overflow-x: hidden;
}

.app-container {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Sidebar */
.sidebar {
    width: 280px;
    background-color: white;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

.logo {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-leaf {
    flex-shrink: 0;
}

.logo h1 {
    font-size: 1.15rem;
    color: #111827;
    letter-spacing: -0.3px;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}

.pro-badge {
    display: none;
}

.logo p {
    font-size: 0.65rem;
    color: var(--gray-500);
    margin: 0;
    letter-spacing: 0.2px;
}

/* Workspace Tabs */
.workspace-tabs {
    display: none;
}

.workspace-dropdown-mobile {
    display: block;
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
}

.workspace-dropdown-mobile select {
    width: 100%;
    padding: 0.6rem 2.2rem 0.6rem 0.75rem;
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 0.9rem;
    font-family: var(--font-sans);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%234d7363'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: border-color 0.2s;
}

.workspace-dropdown-mobile select:focus {
    outline: none;
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}
    gap: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.workspace-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    color: var(--gray-600);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

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

.workspace-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.workspace-tab.drag-over {
    background: #dbeafe;
    border-color: var(--primary-color);
    transform: scale(1.05);
}

/* Navigation */
.nav-menu {
    padding: 0.5rem;
    flex: 1;
}

.nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border: none;
    background: none;
    color: var(--gray-600);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.15s;
    text-align: left;
}

.nav-item:hover {
    background-color: var(--gray-100);
    color: var(--gray-900);
}

.nav-item.active {
    background: linear-gradient(135deg, #34d399, #60a5fa);
    color: white;
    box-shadow: 0 2px 10px rgba(52, 211, 153, 0.3);
}

.nav-item.highlight {
    background: linear-gradient(135deg, #ecfdf5, #dbeafe);
    border: 1.5px solid #6ee7b7;
}

.nav-item.highlight.active {
    background: linear-gradient(135deg, #34d399, #60a5fa);
    border-color: #34d399;
    color: white;
}

.nav-item .icon {
    font-size: 1.1rem;
}

.nav-item .badge {
    margin-left: auto;
    background: var(--gray-200);
    color: var(--gray-700);
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.nav-item.active .badge {
    background: rgba(255,255,255,0.2);
    color: white;
}

.nav-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 0.5rem 1rem;
}

.nav-item.drag-over {
    background-color: #dbeafe !important;
    transform: scale(1.02);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--gray-200);
}

.btn-process {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #34d399, #60a5fa);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-process:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header {
    padding: 1.5rem 2rem;
    background: white;
    border-bottom: 1px solid var(--gray-200);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content h2 {
    font-size: 1.5rem;
    color: var(--gray-900);
}

/* === Folder Modal === */
.modal-content-compact {
    max-width: 420px;
}

.folder-emoji-selected {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

#folder-emoji-display {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--gray-50, #f9fafb);
    border: 1.5px solid var(--gray-200);
    flex-shrink: 0;
    line-height: 1;
}

#folder-emoji-input {
    flex: 1;
    font-size: 1rem;
}

.folder-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.35rem;
    padding: 0.5rem;
    background: var(--gray-50, #f9fafb);
    border-radius: 10px;
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.folder-emoji-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 1.4rem;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.15s, background 0.15s;
    line-height: 1;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.folder-emoji-cell:active {
    transform: scale(0.92);
}

.folder-emoji-cell.selected {
    border-color: #34d399;
    background: linear-gradient(135deg, rgba(52,211,153,0.12), rgba(96,165,250,0.12));
    box-shadow: 0 0 0 2px rgba(52,211,153,0.25);
}

@media (max-width: 768px) {
    .folder-emoji-grid {
        grid-template-columns: repeat(7, 1fr);
        max-height: 180px;
    }
    .folder-emoji-cell {
        font-size: 1.3rem;
    }
}
.view-tabs {
    display: none;
    position: relative;
    flex: 1;
    min-width: 0;
    align-items: stretch;
    gap: 0;
    margin-left: 0.25rem;
}

.view-tab {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    padding: 0.4rem 0.15rem 0.7rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-500);
    cursor: pointer;
    position: relative;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s, font-weight 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    letter-spacing: -0.01em;
}

.view-tab:active {
    opacity: 0.6;
}

.view-tab.active {
    color: var(--gray-900);
    font-weight: 700;
}

.view-tabs-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, #34d399, #14b8a6, #3b82f6);
    transition: left 0.28s cubic-bezier(0.22, 0.7, 0.3, 1),
                width 0.28s cubic-bezier(0.22, 0.7, 0.3, 1);
    pointer-events: none;
    will-change: left, width;
}

@media (max-width: 768px) {
    /* Show tabs only on mobile when on a swipe view (toggled via JS) */
    .view-tabs.is-visible {
        display: flex;
    }
    /* Hide title when tabs are visible */
    .view-tabs.is-visible ~ #view-title,
    body.swipe-view-active #view-title {
        display: none;
    }
}

.header-actions {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

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

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

.btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-200);
}

.btn-icon {
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    border-radius: 0.25rem;
}

.btn-icon:hover {
    background: var(--gray-100);
}

/* Content Area */
.content-area {
    flex: 1;
    /* v1.47 (Mobile-Audit): min-height:0 fehlte. Ohne diese Zeile kann ein
       Flex-Kind nicht unter seine Inhaltsgröße schrumpfen — genau deshalb
       brauchte der Chat bisher eine gerechnete Höhe statt height:100%. */
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem 2rem;
}

/* Bulk Action Bar */
.bulk-action-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    gap: 1rem;
}

.bulk-action-bar.active {
    display: flex;
}

.bulk-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
}

.bulk-info .btn-link {
    color: rgba(255,255,255,0.9);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.85rem;
}

.bulk-info .btn-link:hover {
    color: white;
}

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

.bulk-actions .btn {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    color: white;
}

.bulk-actions .btn:hover {
    background: rgba(255,255,255,0.3);
}

.bulk-actions .btn-danger {
    background: rgba(220, 38, 38, 0.8);
    border-color: rgba(220, 38, 38, 0.9);
}

.bulk-actions .btn-danger:hover {
    background: rgba(220, 38, 38, 1);
}

#bulk-cancel {
    background: transparent;
    border-color: rgba(255,255,255,0.5);
    color: white;
}

/* Bulk Select Mode Item Cards */
.bulk-select-mode .item-card {
    cursor: pointer;
}

.bulk-select-mode .item-card:hover {
    background: var(--gray-50);
}

.item-card.selected {
    background: #eff6ff;
    border-color: var(--primary-color);
}

.bulk-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.view {
    display: none;
}

.view.active {
    display: block;
}

.view-header {
    margin-bottom: 1.5rem;
}

.view-description {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Filter Row */
.filter-row {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.filter-select {
    min-width: 150px;
}

/* Quick Capture */
.quick-capture {
    margin-top: 1rem;
}

.quick-capture input {
    width: 100%;
    max-width: 500px;
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.5rem;
    font-size: 1rem;
}

.quick-capture input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Items List */
.items-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.item-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1rem;
    cursor: grab;
    transition: all 0.15s;
}

.item-card:hover {
    box-shadow: var(--shadow-md);
}

.item-card.dragging {
    opacity: 0.5;
    transform: scale(1.02);
}

.item-card.overdue {
    border-left: 4px solid var(--danger-color);
}

.item-card.completed {
    opacity: 0.6;
    background: var(--gray-50);
}

.item-card.focus {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(to right, #fffbeb, white);
}

.item-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.item-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    cursor: pointer;
}

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

.item-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.item-title.strikethrough {
    text-decoration: line-through;
    color: var(--gray-600);
}

.item-description {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.item-description.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Description popup (mobile double-tap) */
.desc-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.desc-popup {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 500px;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--gray-800);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.desc-popup h4 {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 500;
}

.desc-popup-close {
    display: block;
    margin: 1rem auto 0;
    padding: 0.5rem 2rem;
    background: var(--gray-100);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    background: var(--gray-100);
    color: var(--gray-700);
}

.tag-priority-low { background: #e0f2fe; color: #0369a1; }
.tag-priority-medium { background: #fef9c3; color: #a16207; }
.tag-priority-high { background: #fed7aa; color: #c2410c; }
.tag-priority-prio_week { background: #fecaca; color: #dc2626; font-weight: 700; border: 1px solid #f87171; animation: prio-pulse 2s infinite; }
.tag-priority-very_high { background: #dc2626; color: white; font-weight: 700; animation: prio-pulse 1.5s infinite; }
.tag-priority-urgent { background: #7f1d1d; color: white; font-weight: 700; animation: prio-pulse 1s infinite; }

@keyframes prio-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Priority flag on item card */
.item-card:has(.tag-priority-prio_week),
.item-card:has(.tag-priority-very_high) {
    border-left: 4px solid #dc2626;
    background: linear-gradient(to right, #fef2f2, white);
}

.item-card:has(.tag-priority-urgent) {
    border-left: 4px solid #7f1d1d;
    background: linear-gradient(to right, #fef2f2, #fff);
    box-shadow: 0 0 0 1px #fca5a5;
}

.tag-energy-low { background: #e0e7ff; color: #4338ca; }
.tag-energy-medium { background: #fef3c7; color: #d97706; }
.tag-energy-high { background: #dcfce7; color: #16a34a; }

.tag-context { background: #f3e8ff; color: #7c3aed; }
.tag-project { background: #cffafe; color: #0891b2; }

/* Quick Project Select Dropdown */
.quick-project-select {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
    border-radius: 1rem;
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    cursor: pointer;
    max-width: 140px;
    transition: all 0.15s;
}

.quick-project-select:hover {
    border-color: var(--primary-color);
    background: var(--gray-50);
}

.quick-project-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.tag-duration { background: #fce7f3; color: #be185d; }
.tag-waiting { background: #fef3c7; color: #92400e; }

.item-actions {
    display: flex;
    gap: 0.25rem;
}

/* Dropdown Menu for Move Actions */
.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 100;
    overflow: hidden;
}

.dropdown-menu.active {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--gray-700);
    transition: all 0.15s;
}

.dropdown-item:hover {
    background: var(--gray-100);
    color: var(--primary-color);
}

.dropdown-item:first-child {
    border-radius: 0.5rem 0.5rem 0 0;
}

.dropdown-item:last-child {
    border-radius: 0 0 0.5rem 0.5rem;
}

/* Focus View */
.focus-list .item-card {
    border-left: 4px solid #f59e0b;
}

.focus-empty {
    text-align: center;
    padding: 3rem;
    color: var(--gray-600);
}

/* Weekly Goals */
.weekly-goals-section {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid #fbbf24;
}

.weekly-goals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.weekly-goals-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #92400e;
}

.weekly-date {
    font-weight: 400;
    font-size: 0.8rem;
    color: #b45309;
}

.weekly-goals-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.weekly-goal-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.weekly-goal-item.completed {
    opacity: 0.6;
}

.weekly-goal-item.completed .weekly-goal-title {
    text-decoration: line-through;
}

.weekly-goal-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #92400e;
    flex-shrink: 0;
}

.weekly-goal-title {
    flex: 1;
    color: #78350f;
}

.weekly-goal-delete {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: #b45309;
    opacity: 0.5;
    padding: 0 0.25rem;
}

.weekly-goal-delete:hover {
    opacity: 1;
}

.weekly-goals-empty {
    text-align: center;
    padding: 0.75rem;
    color: #92400e;
    font-size: 0.85rem;
    font-style: italic;
}

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

.project-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1rem;
    transition: all 0.2s;
    cursor: grab;
}

.project-card:hover {
    box-shadow: var(--shadow-md);
}

/* Project Drag & Drop */
.project-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
    box-shadow: var(--shadow-lg);
    transform: scale(0.98);
}

.project-card.drag-over {
    border: 2px dashed var(--primary-color);
    background: #eff6ff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.project-card.drag-over-invalid {
    border: 2px dashed #ef4444;
    background: #fef2f2;
}

.project-drag-handle {
    cursor: grab;
    color: var(--gray-400);
    font-size: 0.9rem;
    padding: 0.25rem;
    margin-right: 0.25rem;
    user-select: none;
}

.project-drag-handle:hover {
    color: var(--primary-color);
}

.project-card.dragging .project-drag-handle {
    cursor: grabbing;
}

/* Mother project with children */
.project-card.has-children {
    border-left: 4px solid var(--primary-color);
}

/* Sub-project styling */
.project-card.sub-project {
    background: var(--gray-50);
    border-left: 3px solid var(--gray-300);
    margin-left: 0.5rem;
}

.sub-project-badge {
    font-size: 0.65rem;
    background: var(--gray-200);
    color: var(--gray-600);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.mother-project-badge {
    font-size: 0.65rem;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Sub-projects container */
.sub-projects {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--gray-300);
}

.sub-projects-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 0.75rem;
}

.sub-projects .project-card {
    margin-bottom: 0.75rem;
}

.sub-projects .project-card:last-child {
    margin-bottom: 0;
}

.project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.5rem;
    margin: -0.25rem;
    margin-bottom: 0.5rem;
}

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

.project-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.project-header h4 {
    margin: 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-header h4:hover {
    white-space: normal;
    overflow: visible;
}

.expand-icon {
    font-size: 0.75rem;
    color: var(--gray-400);
    transition: transform 0.2s;
    width: 1rem;
    text-align: center;
}

.expand-icon.expanded {
    color: var(--primary-color);
}

.project-actions {
    display: flex;
    gap: 0;
    flex-shrink: 0;
}

.project-actions .btn-icon {
    padding: 0.3rem;
    font-size: 0.95rem;
}

.project-card:hover .project-actions {
    background: var(--gray-50);
    border-radius: 0.375rem;
}

.project-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--gray-500);
    padding-left: 1.75rem;
}

.project-count {
    color: var(--gray-600);
}

.project-completed {
    color: var(--success-color);
}

.project-next {
    color: var(--primary-color);
    font-weight: 500;
}

.project-warning {
    color: var(--warning-color);
}

/* Expandable Items Container */
.project-items-container {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.project-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--gray-50);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}

.project-item:hover {
    background: var(--gray-100);
    transform: translateX(4px);
}

.project-item.next-action {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
}

.project-item-status {
    font-size: 0.9rem;
}

.project-item-title {
    flex: 1;
    font-size: 0.9rem;
}

.project-item-priority {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
}

.no-items {
    color: var(--gray-400);
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem;
}

.btn-add-item-to-project {
    width: 100%;
    font-size: 0.85rem;
}

.project-hint {
    font-size: 0.7rem;
    color: var(--gray-400);
    text-align: center;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.project-card:hover .project-hint {
    opacity: 1;
}

/* ============================================================
   PROJECT FOCUS MODE
   ============================================================ */

.project-focus-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-200);
}

.project-focus-title {
    flex: 1;
}

.project-focus-title h2 {
    margin: 0;
    font-size: 1.75rem;
    color: var(--gray-900);
}

.project-focus-badge {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.project-focus-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Progress */
.project-focus-progress {
    margin-bottom: 2rem;
}

.progress-container {
    height: 12px;
    background: var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #10b981);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.progress-stats {
    font-size: 0.9rem;
    color: var(--gray-600);
    text-align: center;
}

/* Sections */
.project-focus-section {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.project-focus-section h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-focus-section.collapsible h3 {
    cursor: pointer;
    user-select: none;
}

.project-focus-section.collapsible h3:hover {
    color: var(--primary-color);
}

.collapse-icon {
    font-size: 0.75rem;
    color: var(--gray-400);
    transition: transform 0.2s;
}

.section-count {
    background: var(--gray-200);
    color: var(--gray-600);
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    margin-left: auto;
}

/* Sub-projects grid */
.focus-subprojects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.focus-subproject-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.focus-subproject-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.focus-subproject-card h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
}

.subproject-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-bottom: 0.75rem;
}

/* Focus item cards */
.focus-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.focus-item-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}

.focus-item-card:hover {
    border-color: var(--primary-color);
    background: white;
    box-shadow: var(--shadow-sm);
}

.focus-item-card.completed {
    opacity: 0.6;
    background: white;
}

.focus-item-card.completed .focus-item-title {
    text-decoration: line-through;
    color: var(--gray-500);
}

.focus-item-status {
    font-size: 1.1rem;
}

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

.focus-item-title {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--gray-900);
}

.focus-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.focus-item-meta .tag {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
}

.btn-complete-item {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.btn-complete-item:hover {
    border-color: #10b981;
    background: #ecfdf5;
}

.btn-small {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
}

/* Create as Project Section */
.create-project-section {
    border-top: 1px dashed var(--gray-300);
    margin-top: 1rem;
    padding-top: 1rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-700);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#project-creation-fields {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 0.5rem;
}

.next-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.next-action-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-number {
    font-weight: 600;
    color: var(--primary-color);
    min-width: 1.5rem;
}

.next-action-input .form-control {
    flex: 1;
}

.btn-remove-action {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--gray-400);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remove-action:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Weekly Review */
.review-container {
    max-width: 900px;
}

/* Bulk Select Mode */
.bulk-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    gap: 1rem;
    flex-wrap: wrap;
}

.bulk-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
}

.btn-link {
    background: none;
    border: none;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.85rem;
}

.btn-link:hover {
    color: white;
}

.bulk-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bulk-actions .btn {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    color: white;
}

.bulk-actions .btn:hover {
    background: rgba(255,255,255,0.3);
}

.bulk-actions .btn-danger {
    background: rgba(220, 38, 38, 0.8);
    border-color: rgba(220, 38, 38, 0.9);
}

.bulk-actions .btn-danger:hover {
    background: rgba(220, 38, 38, 1);
}

.bulk-select-mode .item-card {
    cursor: pointer;
    transition: all 0.15s;
}

.bulk-select-mode .item-card:hover {
    background: #eff6ff;
}

.item-card.selected {
    background: #dbeafe !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.bulk-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #3b82f6;
}

#bulk-select-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.health-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--gray-200);
}

.health-card h3 {
    margin-bottom: 1rem;
}

.health-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.health-status.green {
    background: #dcfce7;
}

.health-status.yellow {
    background: #fef3c7;
}

.health-status.red {
    background: #fecaca;
}

.health-indicator {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.health-status.green .health-indicator { background: #16a34a; }
.health-status.yellow .health-indicator { background: #d97706; }
.health-status.red .health-indicator { background: #dc2626; }

.health-text {
    font-weight: 600;
}

.health-indicators {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.indicator-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
}

.indicator-item.green { background: #f0fdf4; }
.indicator-item.yellow { background: #fffbeb; }
.indicator-item.red { background: #fef2f2; }

.indicator-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.indicator-item.green .indicator-dot { background: #16a34a; }
.indicator-item.yellow .indicator-dot { background: #d97706; }
.indicator-item.red .indicator-dot { background: #dc2626; }

.review-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
}

.stat-card.warning {
    border-color: var(--danger-color);
    background: #fef2f2;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-card.warning .stat-value {
    color: var(--danger-color);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.review-section {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.review-section h3 {
    margin-bottom: 0.5rem;
}

.section-desc {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overscroll-behavior: none;
}

.modal.active {
    display: flex;
}

html.modal-open,
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
    top: var(--scroll-top, 0px);
}

.modal-content {
    background: white;
    border-radius: 1rem;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.modal-header h3 {
    font-size: 1.25rem;
}

.btn-close, .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--gray-600);
}

/* v2.20: Das × im Auftragsdialog war ein Punkt von wenigen Pixeln — die
   Trefferfläche gehört überall auf 44×44, nicht nur bei .btn-close im
   Mobil-Block. */
.modal-close, .btn-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-body {
    padding: 1.5rem;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
    color: var(--gray-700);
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.form-control {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.95rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-section {
    border-top: 1px solid var(--gray-200);
    padding-top: 1rem;
    margin-top: 1rem;
}

.form-section h4 {
    font-size: 0.9rem;
    color: var(--gray-700);
    margin-bottom: 1rem;
}

/* Processing Modal */
.processing-modal .processing-content {
    background: white;
    border-radius: 1rem;
    width: 90%;
    max-width: 700px;
    padding: 2rem;
}

.processing-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.processing-header h2 {
    flex: 1;
}

.processing-count {
    color: var(--gray-600);
    font-size: 0.9rem;
}

.processing-item {
    background: var(--gray-50);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    min-height: 100px;
}

.processing-title-input {
    width: 100%;
    font-size: 1.4rem;
    font-weight: 600;
    border: none;
    background: transparent;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    color: var(--gray-900);
    resize: none;
    overflow: hidden;
    font-family: inherit;
    line-height: 1.4;
    min-height: 2.5rem;
}

.processing-title-input:hover,
.processing-title-input:focus {
    background: white;
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-color);
}

.processing-description-input {
    width: 100%;
    min-height: 60px;
    font-size: 0.95rem;
    border: none;
    background: transparent;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: var(--gray-600);
    resize: vertical;
    font-family: inherit;
}

.processing-description-input:hover,
.processing-description-input:focus {
    background: white;
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-color);
}

.processing-question {
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.processing-question p {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
}

.btn-gtd-guide {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
    border: none;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    cursor: pointer;
    white-space: nowrap;
}

/* GTD Guided Flow */
.gtd-guide {
    padding: 1rem 0;
}

.gtd-step {
    text-align: center;
}

.gtd-question {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.gtd-hint {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 1.5rem;
}

.gtd-breadcrumb {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.gtd-crumb {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    background: var(--gray-100);
    color: var(--gray-500);
}

.gtd-crumb.active {
    background: #fbbf24;
    color: #78350f;
}

.gtd-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 320px;
    margin: 0 auto;
}

.gtd-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.75rem;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.gtd-btn:hover {
    border-color: #fbbf24;
    background: #fffbeb;
    transform: translateY(-1px);
}

.gtd-btn .gtd-btn-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.gtd-btn .gtd-btn-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--gray-800);
}

.gtd-btn .gtd-btn-desc {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 0.15rem;
}

.gtd-btn.primary {
    border-color: #34d399;
    background: #ecfdf5;
}

.gtd-btn.danger {
    border-color: #fca5a5;
    background: #fef2f2;
}

.gtd-back {
    border: none;
    background: none;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 0.85rem;
    margin-top: 1rem;
    padding: 0.5rem;
}

.gtd-input-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.gtd-input-row input, .gtd-input-row select {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.processing-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.process-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 0.75rem;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
}

.process-btn:hover {
    border-color: var(--primary-color);
    background: var(--gray-50);
}

.process-btn.action:hover { border-color: #f59e0b; background: #fffbeb; }
.process-btn.project:hover { border-color: #3b82f6; background: #eff6ff; }
.process-btn.waiting:hover { border-color: #8b5cf6; background: #f5f3ff; }
.process-btn.someday:hover { border-color: #06b6d4; background: #ecfeff; }
.process-btn.reference:hover { border-color: #6b7280; background: #f9fafb; }
.process-btn.done:hover { border-color: #10b981; background: #ecfdf5; }
.process-btn.delete:hover { border-color: #ef4444; background: #fef2f2; }

.process-btn .icon {
    font-size: 1.5rem;
}

.process-btn span:last-child {
    font-size: 0.85rem;
    font-weight: 500;
}

.processing-options {
    background: var(--gray-50);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Project creation form in processing */
.project-creation-form {
    margin-bottom: 1rem;
}

.project-creation-form .form-group {
    margin-bottom: 0.75rem;
}

.project-creation-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--gray-700);
}

.option-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.option-row .form-control {
    flex: 1;
}

.processing-footer {
    text-align: center;
}

/* Day Plan Modal */
.day-plan-content {
    max-width: 700px;
}

.plan-date-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.plan-date-row input[type="date"] {
    flex: 1;
}

.plan-blocks-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plan-block {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.plan-block-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.plan-time-input {
    width: 100px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.4rem;
    font-size: 0.9rem;
}

.plan-remove-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0.5;
}

.plan-remove-btn:hover { opacity: 1; }

.plan-block-title {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.plan-linked-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.plan-linked-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 1rem;
    font-size: 0.8rem;
}

.plan-unlink {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    color: #1e40af;
    padding: 0 0.15rem;
    opacity: 0.6;
}

.plan-unlink:hover { opacity: 1; }

.plan-link-row {
    display: flex;
    gap: 0.35rem;
}

.plan-item-select {
    flex: 1;
    font-size: 0.85rem;
}
    color: var(--gray-600);
}

/* Settings */
.settings-container {
    max-width: 700px;
}

.settings-section {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.settings-section h3 {
    margin-bottom: 1rem;
}

.status-box {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.status-box.success {
    background: #dcfce7;
    color: #166534;
}

.status-box.warning {
    background: #fef3c7;
    color: #92400e;
}

.status-box.error {
    background: #fecaca;
    color: #dc2626;
}

/* Drop Zone */
.drop-zone {
    min-height: 100px;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.drop-zone.drag-over {
    background: #dbeafe;
    border: 2px dashed var(--primary-color);
}

/* Toast */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10010;   /* v3.14.0 (Audit 03.10.): über dem Gina-Startbildschirm (10000) und allen Overlays — Fehler sind sichtbar */
}

.toast {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    color: white;
    animation: slideIn 0.3s ease;
}

.toast.success { background: var(--success-color); }
.toast.error { background: var(--danger-color); }
.toast.warning { background: var(--warning-color); }
.toast.info { background: var(--primary-color); }

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    /* Sidebar - Hidden by default on mobile */
    .sidebar {
        position: fixed;
        z-index: 9500;
        transform: translateX(-100%);
        width: 85%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        box-shadow: var(--shadow-lg);
        transition: transform 0.3s ease;
        /* FIX 1: Enable scrolling inside sidebar */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        /* Allow both scroll and swipe-to-close */
        touch-action: auto;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    /* v3.16.104: Kinder schrumpfen nicht — der Inhalt läuft über und die Leiste scrollt, statt dass die Liste gequetscht wird */
    .sidebar > * { flex-shrink: 0; }
    
    /* Overlay when sidebar is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9400;
        pointer-events: none;
        touch-action: none;
    }
    
    .sidebar-overlay.active {
        display: block;
        pointer-events: auto;
    }
    
    /* Main content */
    .main-content {
        width: 100%;
        margin-left: 0;
    }
    
    /* Header */
    .header {
        padding: 1rem;
        position: sticky;
        top: 0;
        background: white;
        z-index: 500;
    }
    
    .header-content {
        flex-direction: row;
        align-items: center;
    }
    
    .header-content h2 {
        font-size: 1.25rem;
    }
    
    .header-actions {
        gap: 0.5rem;
    }
    
    .header-actions .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Add hamburger menu button */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        border: none;
        background: var(--gray-100);
        border-radius: 0.5rem;
        position: relative;
        z-index: 10001;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        font-size: 1.25rem;
        cursor: pointer;
        margin-right: 0.75rem;
    }
    
    /* Content area */
    .content-area {
        padding: 1rem;
        padding-bottom: 5rem; /* Extra space so last items are scrollable into view */
    }
    
    /* Item cards */
    .item-card {
        padding: 0.875rem;
    }
    
    .item-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .item-content {
        width: calc(100% - 50px);
    }
    
    .item-title {
        font-size: 0.95rem;
    }
    
    .item-meta {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    
    .item-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--gray-100);
    }
    
    /* Larger touch targets */
    .btn-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .item-checkbox,
    .bulk-checkbox {
        width: 24px;
        height: 24px;
    }
    
    /* Tags */
    .tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }
    
    /* Processing modal */
    .processing-content {
        width: 95%;
        max-height: 90vh;
        max-height: 90dvh;
        margin: 5vh auto;
        margin: 5dvh auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    .processing-modal {
        padding: 0.5rem;
        align-items: flex-start;
    }
    
    .processing-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .process-btn {
        padding: 1rem;
        font-size: 0.85rem;
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        /* v1.66: Höhe und Radius stehen NUR NOCH in der Shell-Regel weiter
           unten. Vorher setzten drei Blöcke aus drei Versionen dieselbe
           Eigenschaft — die jüngste gewann und hob die v1.44.7-Absicht
           ("an den Container koppeln, nicht an Viewport-Einheiten") wieder
           auf. Der Kommentar dort sagte das sogar ausdrücklich. */
    }
    
    .modal-body {
        padding: 1rem;
        padding-bottom: 6rem; /* Extra space so content is never hidden behind footer */
    }
    
    /* Projects grid */
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    /* Bulk action bar */
    .bulk-action-bar {
        flex-direction: column;
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }
    
    .bulk-info {
        font-size: 0.9rem;
    }
    
    .bulk-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Focus view */
    .focus-list .item-card {
        margin-bottom: 0.75rem;
    }
    
    /* Quick capture */
    .quick-capture input {
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    /* All inputs - prevent iOS zoom */
    input[type="text"],
    input[type="email"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px;
    }
    
    /* Project focus view */
    .project-focus-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .project-focus-title h2 {
        font-size: 1.25rem;
    }
    
    /* Navigation items */
    .nav-item {
        padding: 0.875rem 1.25rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .header-content {
        flex-wrap: wrap;
    }
    
    .header-actions {
        width: 100%;
        margin-top: 0.5rem;
    }
    
    #bulk-select-btn {
        display: none;
    }
    
    .processing-actions {
        grid-template-columns: 1fr;
    }
    
    .bulk-actions .btn {
        font-size: 0.75rem;
        padding: 0.35rem 0.5rem;
    }
}

/* Safari-specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix for Safari touch */
    .btn, button {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Fix for sticky header in Safari */
    .header {
        -webkit-sticky;
        position: sticky;
    }
    
    /* v3.16.40 (Ben 16.10., CRM-Detail auf dem iPhone): Hier stand `.content-area { -webkit-overflow-scrolling: touch }`.
       In WebKit macht das den Inhaltsbereich zu einem eigenen Stapelkontext (Ebene 0) — jedes Fenster darin lag unter
       der klebenden Kopfzeile (z-index 500), Titel und × waren nie erreichbar. Schwungvolles Scrollen braucht iOS seit
       Version 13 nicht mehr. Die Fenster hängen zusätzlich direkt an <body> (modalsToBody in app.js). */
}

/* AI Cleanup Modal */
.ai-modal .ai-modal-content {
    background: white;
    border-radius: 1rem;
    max-width: 700px;
    width: 95%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ai-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
}

.ai-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.ai-modal-header .btn-close {
    color: white;
    opacity: 0.8;
}

.ai-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.ai-intro {
    text-align: center;
}

.ai-intro p {
    color: var(--gray-700);
    margin-bottom: 1rem;
}

.ai-intro ul {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.ai-intro li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.ai-scope-select {
    margin: 1.5rem 0;
    text-align: left;
}

.ai-scope-select label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ai-api-key {
    margin: 1.5rem 0;
    text-align: left;
}

.ai-api-key label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-ai {
    background: linear-gradient(135deg, #60a5fa, #818cf8);
    color: white;
    border: none;
    width: 100%;
    margin-top: 0.5rem;
}

.btn-ai:hover {
    background: linear-gradient(135deg, #4f96eb, #7078e8);
}

/* AI Loading */
.ai-loading {
    text-align: center;
    padding: 3rem;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--gray-200);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

/* AI Suggestions */
.ai-suggestions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
}

.ai-suggestions-header h3 {
    margin: 0;
}

.ai-suggestions-actions {
    display: flex;
    gap: 0.5rem;
}

.ai-suggestions-list {
    max-height: 400px;
    overflow-y: auto;
}

.ai-suggestion-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

.ai-suggestion-card:hover {
    border-color: #8b5cf6;
    box-shadow: var(--shadow-sm);
}

.ai-suggestion-card.accepted {
    background: #f0fdf4;
    border-color: #10b981;
}

.ai-suggestion-card.rejected {
    background: var(--gray-50);
    opacity: 0.6;
}

.ai-suggestion-type {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ai-suggestion-type.create-project { background: #dbeafe; color: #1d4ed8; }
.ai-suggestion-type.move-item { background: #fef3c7; color: #92400e; }
.ai-suggestion-type.group-items { background: #f3e8ff; color: #7c3aed; }
.ai-suggestion-type.rename { background: #ecfdf5; color: #047857; }

.ai-suggestion-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ai-suggestion-details {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 0.75rem;
}

.ai-suggestion-items {
    background: var(--gray-50);
    border-radius: 0.25rem;
    padding: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    list-style: none;
}

.ai-suggestion-items li {
    padding: 0.25rem 0;
}

.ai-suggestion-item {
    padding: 0.35rem 0.5rem;
    border-radius: 0.25rem;
    transition: background 0.15s;
}

.ai-suggestion-item:hover {
    background: var(--gray-100);
}

.ai-suggestion-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.ai-suggestion-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.ai-suggestion-item span {
    flex: 1;
}

.ai-model-select {
    margin: 1rem 0;
    text-align: left;
}

.ai-model-select label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ai-mode-select {
    margin: 1rem 0;
    text-align: left;
}

.ai-mode-select label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Context suggestion cards */
.context-card {
    padding: 0.75rem 1rem !important;
}

.context-suggestion-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.context-item-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.context-item-title {
    font-weight: 500;
}

.confident-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: #dcfce7;
    color: #166534;
    border-radius: 0.25rem;
}

.uncertain-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 0.25rem;
}

.context-select-wrapper {
    min-width: 140px;
}

.context-select {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.context-actions {
    display: flex;
    gap: 0.25rem;
}

.context-actions .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-outline {
    background: white;
    border: 1px solid var(--gray-300);
    color: var(--gray-600);
}

.btn-outline:hover {
    background: var(--gray-50);
}

.context-reason {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 0.5rem;
    font-style: italic;
}

.ai-suggestion-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.ai-suggestions-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

/* Empty State */
.empty-message {
    text-align: center;
    padding: 3rem;
    color: var(--gray-600);
}

/* ============================================================
   COMPOSE MESSAGE MODAL
   ============================================================ */

.compose-modal .compose-modal-content {
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.compose-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 1rem 1rem 0 0;
}

.compose-modal-header h2 {
    font-size: 1.2rem;
    margin: 0;
}

.compose-modal-body {
    padding: 1.5rem;
}

.compose-task-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.compose-task-label {
    font-weight: 600;
    color: var(--primary-color);
}

#compose-task-title {
    font-weight: 500;
}

#compose-task-meta {
    color: var(--gray-600);
    font-size: 0.85rem;
}

.compose-field {
    margin-bottom: 1rem;
}

.compose-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--gray-700);
}

.compose-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

/* AI Draft Section */
.compose-ai-section {
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.compose-ai-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    user-select: none;
}

.compose-ai-header:hover {
    background: linear-gradient(135deg, #f3e8ff, #ede9fe);
}

.compose-ai-toggle {
    font-size: 1.1rem;
    color: var(--gray-600);
}

.compose-ai-body {
    padding: 1rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.compose-ai-options {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.compose-ai-options select {
    flex: 1;
}

.btn-draft {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-draft:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    transform: translateY(-1px);
}

.btn-draft:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.compose-ai-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    color: var(--gray-600);
    font-size: 0.9rem;
}

.spinner-small {
    width: 24px;
    height: 24px;
    border: 3px solid var(--gray-200);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.compose-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

.btn-send {
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
}

/* ============================================================
   EMAIL BAR
   ============================================================ */

.btn-email-bar {
    background: linear-gradient(135deg, #60a5fa, #93c5fd);
    color: white;
    border: none;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-email-bar:hover {
    background: linear-gradient(135deg, #4f96eb, #82b8f0);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-email-bar.drag-over {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
}

/* ============================================================
   AI COACH MODAL
   ============================================================ */

.btn-coach {
    background: linear-gradient(135deg, #4ade80, #34d399);
    color: white;
    border: none;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-coach:hover {
    background: linear-gradient(135deg, #3ecf74, #2cc48d);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.coach-modal .coach-modal-content {
    max-width: 650px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.coach-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: 1rem 1rem 0 0;
}

.coach-modal-header h2 {
    font-size: 1.2rem;
    margin: 0;
}

.coach-modal-body {
    padding: 1.5rem;
}

.coach-intro p {
    color: var(--gray-600);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.coach-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.coach-loading {
    text-align: center;
    padding: 3rem;
}

.coach-loading p {
    color: var(--gray-600);
    margin-top: 1rem;
}

.coach-result {
    /* Styles for the feedback output */
}

.coach-feedback {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gray-800);
}

.coach-feedback h2 {
    font-size: 1.15rem;
    margin: 1.5rem 0 0.5rem;
    color: var(--gray-900);
}

.coach-feedback h3 {
    font-size: 1.05rem;
    margin: 1.25rem 0 0.5rem;
    color: var(--gray-900);
}

.coach-feedback h4 {
    font-size: 1rem;
    margin: 1rem 0 0.4rem;
    color: var(--gray-800);
}

.coach-feedback ul {
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.coach-feedback li {
    margin-bottom: 0.4rem;
}

.coach-feedback strong {
    color: var(--gray-900);
}

.coach-feedback code {
    background: var(--gray-100);
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
}

.coach-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

/* ============================================================
   MOBILE RESPONSIVE FOR NEW FEATURES
   ============================================================ */

@media (max-width: 768px) {
    .compose-modal-content,
    .coach-modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .compose-ai-options {
        flex-direction: column;
    }
    
    .compose-ai-options select,
    .btn-draft {
        width: 100%;
    }
    
    .item-actions .btn-email {
        font-size: 1rem;
    }
}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */

.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.login-box {
    background: white;
    border-radius: 1rem;
    padding: 2.5rem;
    width: 360px;
    max-width: 90%;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    text-align: center;
}

.login-header {
    margin-bottom: 2rem;
}

.login-header h1 {
    font-size: 2rem;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

.login-header p {
    color: var(--gray-600);
    font-size: 0.9rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.login-input {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.3rem;
    padding: 0.75rem;
}

.login-btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
}

.login-error {
    color: var(--danger-color);
    font-size: 0.85rem;
    margin: 0;
}

/* Logout button */
.btn-logout {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s;
    padding: 0.25rem;
    flex-shrink: 0;
}

.btn-logout:hover {
    opacity: 1;
}

/* ============================================================
   NEXT ACTIONS OVERVIEW (Context Columns)
   ============================================================ */

.btn-overview {
    white-space: nowrap;
    font-size: 0.85rem;
}

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

.context-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
}

.overview-column {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
}

.overview-column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    font-size: 0.95rem;
}

.overview-emoji {
    font-size: 1.2rem;
}

.overview-label {
    flex: 1;
}

.overview-count {
    background: var(--gray-200);
    color: var(--gray-700);
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.overview-items {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 400px;
    overflow-y: auto;
}

.overview-item {
    padding: 0.6rem 0.75rem;
    background: var(--gray-50);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.overview-item:hover {
    background: #eff6ff;
    border-color: var(--primary-color);
}

.overview-item.overdue {
    border-left: 3px solid var(--danger-color);
}

.overview-item-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-800);
    line-height: 1.4;
}

.overview-item-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--gray-600);
    flex-wrap: wrap;
}

.overview-project {
    color: var(--gray-500);
}

.overview-due {
    color: var(--gray-500);
}

.overview-due.overdue {
    color: var(--danger-color);
    font-weight: 500;
}

@media (max-width: 768px) {
    .context-overview {
        grid-template-columns: 1fr;
    }
    
    .overview-items {
        max-height: 300px;
    }
}

/* ============================================================
   PROJECTS OVERVIEW MAP
   ============================================================ */

.view-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pov-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.pov-node {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.pov-node:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.pov-node.has-children {
    border-left: 4px solid var(--primary-color);
}

.pov-node-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.pov-node-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pov-node-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gray-800);
}

.pov-node-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.pov-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
}

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

.pov-stat {
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
}

.pov-next {
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 500;
    margin-top: 0.25rem;
}

.pov-next.pov-warning {
    color: var(--warning-color);
}

.pov-children {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pov-children .pov-node {
    padding: 0.75rem;
    background: var(--gray-50);
    border-left: 3px solid var(--gray-300);
}

.pov-children .pov-node:hover {
    border-left-color: var(--primary-color);
}

/* Mobile: project overview */
@media (max-width: 768px) {
    .pov-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PROCESS NEXT ACTION MODAL
   ============================================================ */

.action-modal .action-modal-content {
    max-width: 550px;
    width: 90%;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    overflow: hidden;
}

.action-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-bottom: 1px solid var(--gray-200);
}

.action-modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    flex: 1;
}

.action-context-select select {
    font-size: 0.85rem;
    padding: 0.4rem;
}

.action-modal-body {
    padding: 1.5rem;
}

.action-progress {
    text-align: center;
    font-size: 0.9rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
}

.action-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.action-task-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.action-task-desc {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.action-task-meta {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    flex-wrap: wrap;
}

.action-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.action-buttons .btn {
    flex: 1;
    max-width: 150px;
}

.btn-success {
    background: var(--success-color);
    color: white;
    border: none;
}

.btn-success:hover {
    background: #2cc48d;
}

.btn-action-process {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-action-process:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
}

.action-empty {
    text-align: center;
    padding: 2rem;
}

.action-empty p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

/* ============================================================
   AI ASK ME ANYTHING
   ============================================================ */

.btn-ask {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: white;
    border: none;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-ask:hover {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ask-modal .ask-modal-content {
    max-width: 650px;
    width: 90%;
    max-height: 85vh;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.ask-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-radius: 1rem 1rem 0 0;
}

.ask-modal-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.ask-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ask-chat {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    min-height: 300px;
    max-height: 55vh;
}

.ask-welcome {
    text-align: center;
    color: var(--gray-600);
    padding: 1rem 0;
}

.ask-welcome p {
    margin-bottom: 1rem;
}

.ask-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.ask-suggestion-chip {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 2rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}

.ask-suggestion-chip:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.ask-msg {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 90%;
}

.ask-user {
    background: var(--primary-color);
    color: white;
    margin-left: auto;
    border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
}

.ask-ai {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
}

.ask-ai ul { padding-left: 1.25rem; margin: 0.4rem 0; }
.ask-ai li { margin-bottom: 0.3rem; }
.ask-ai strong { color: var(--gray-900); }
.ask-ai code { background: var(--gray-200); padding: 0.1rem 0.3rem; border-radius: 0.2rem; font-size: 0.85rem; }

.ask-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-500);
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

.ask-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--danger-color);
}

.ask-input-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0 0 1rem 1rem;
    align-items: center;
}

.ask-model-select select {
    font-size: 0.8rem;
    padding: 0.4rem;
    width: auto;
}

.ask-text-input {
    flex: 1;
}

.ask-input-row .btn {
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
}

/* ============================================================
   PROJECT NOTES & REFERENCES
   ============================================================ */

.project-notes-container {
    padding-top: 0.5rem;
}

.project-notes-textarea {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.85rem;
    resize: vertical;
    min-height: 250px;
    border: 1px solid var(--gray-200);
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 0.75rem;
    line-height: 1.7;
}

.project-notes-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.project-notes-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
}

.notes-saved-msg {
    color: var(--success-color);
    font-size: 0.85rem;
    font-weight: 500;
}

.project-references {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

.project-references h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

.project-ref-list {
    margin-bottom: 0.75rem;
}

.project-ref-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    background: var(--gray-50);
    border-radius: 0.375rem;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
}

.project-ref-item .btn-icon {
    font-size: 0.8rem;
    padding: 0.2rem;
    opacity: 0.5;
}

.project-ref-item .btn-icon:hover {
    opacity: 1;
}

.project-ref-add {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.project-ref-add select {
    flex: 1;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .action-modal-content,
    .ask-modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .action-buttons .btn {
        max-width: 100%;
    }
    
    .ask-input-row {
        flex-wrap: wrap;
    }
    
    .ask-model-select {
        width: 100%;
    }
}

/* ============================================================
   FILE UPLOAD IN PROJECTS
   ============================================================ */

.project-files-section {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

.project-files-section h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

.file-drop-zone {
    border: 2px dashed var(--gray-300);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.85rem;
    transition: all 0.2s;
    cursor: default;
    margin-bottom: 0.75rem;
}

.file-drop-zone p {
    margin: 0.25rem 0;
}

.file-drop-zone.drag-active {
    border-color: var(--primary-color);
    background: #eff6ff;
    color: var(--primary-color);
}

.file-browse-link {
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 500;
    text-decoration: underline;
}

.file-hint {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.file-upload-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: var(--gray-600);
    font-size: 0.85rem;
}

.project-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.project-file-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
}

.project-file-card:hover {
    border-color: var(--primary-color);
}

.file-thumbnail {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.file-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    background: var(--gray-100);
    text-decoration: none;
}

.file-type-icon {
    font-size: 2rem;
}

.file-info {
    padding: 0.4rem 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-name {
    font-size: 0.78rem;
    color: var(--gray-700);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.file-name:hover {
    color: var(--primary-color);
}

.file-size {
    font-size: 0.7rem;
    color: var(--gray-400);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.file-delete-btn {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s;
}

.project-file-card:hover .file-delete-btn {
    opacity: 1;
}

/* ============================================================
   SETTINGS: PIN CHANGE & API KEY
   ============================================================ */

.pin-change-form {
    max-width: 350px;
}

.pin-change-form .form-group {
    margin-bottom: 0.75rem;
}

.pin-change-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--gray-700);
}

.pin-change-msg {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.settings-desc {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.api-key-display {
    display: flex;
    gap: 0.5rem;
    max-width: 500px;
    align-items: center;
}

.api-key-display input {
    flex: 1;
}

.api-key-status {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ============================================================
   PANORAMA BOARD (Mind-map tree style)
   ============================================================ */

.panorama-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8fafc;
    z-index: 5000;
    display: flex;
    flex-direction: column;
}

.panorama-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem;
    background: white;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    z-index: 10;
}

.panorama-toolbar h2 { font-size: 1.1rem; margin: 0; }
.panorama-toolbar-actions { display: flex; gap: 0.4rem; align-items: center; }
.panorama-zoom-level { font-size: 0.8rem; color: var(--gray-500); min-width: 40px; text-align: center; }
.panorama-close-btn { background: var(--danger-color) !important; color: white !important; }

.panorama-viewport {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.panorama-canvas {
    transform-origin: 0 0;
}

/* Layout: left sidebar, center tree, right sidebar */
.pan-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: max-content;
}

.pan-top-row {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.pan-bottom-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.pan-section-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--gray-300);
}

/* ---- CSS TREE (connector lines) ---- */
.tree-container {
    min-width: 400px;
    overflow: visible;
}

.tree, .tree ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.tree {
    display: flex;
    justify-content: center;
}

.tree ul {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    position: relative;
}

/* Vertical line from parent down to horizontal bar */
.tree ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 2rem;
    background: #94a3b8;
}

/* Each child li */
.tree ul > li {
    position: relative;
    padding: 0 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Horizontal connector bar across siblings */
.tree ul > li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #94a3b8;
}

/* First child: horizontal line only on right half */
.tree ul > li:first-child::before {
    left: 50%;
}

/* Last child: horizontal line only on left half */
.tree ul > li:last-child::before {
    right: 50%;
}

/* Only child: no horizontal line */
.tree ul > li:only-child::before {
    display: none;
}

/* Vertical drop line from horizontal bar to card */
.tree ul > li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 2rem;
    background: #94a3b8;
    transform: translateX(-1px);
}

/* Only child: still needs vertical line from parent */
.tree ul > li:only-child::after {
    display: block;
}

/* The card itself needs top margin to make room for the connector */
.tree ul > li > .tree-card {
    margin-top: 2rem;
}

/* Tree Cards */
.tree-card {
    display: inline-block;
    position: relative;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.6rem;
    padding: 0.6rem 0.9rem;
    min-width: 160px;
    max-width: 220px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    text-align: left;
    transition: all 0.15s;
    font-size: 0.82rem;
}

.tree-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.tree-hub {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    min-width: 140px;
}

.tree-hub small {
    font-weight: 400;
    opacity: 0.7;
}

.tree-root {
    border-top-width: 3px;
}

.tree-card-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-900);
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

.tree-card-bar {
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.tree-bar-fill {
    height: 100%;
    background: var(--success-color);
    border-radius: 2px;
}

.tree-card-stats {
    font-size: 0.7rem;
    color: var(--gray-500);
    margin-bottom: 0.2rem;
}

.tree-card-next {
    font-size: 0.72rem;
    color: var(--primary-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tree-card-warn {
    font-size: 0.72rem;
    color: var(--warning-color);
}

/* ---- Side blocks ---- */
.pan-center {
    flex: 1;
    min-width: 0;
}

/* Bottom row cards (NA columns + mini blocks) */
.pan-miniblock, .pan-na-column {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    width: 220px;
    flex-shrink: 0;
}

.pan-miniblock-title, .pan-na-header {
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pan-badge {
    background: var(--gray-200);
    color: var(--gray-700);
    padding: 0.05rem 0.4rem;
    border-radius: 1rem;
    font-size: 0.68rem;
    font-weight: 500;
    margin-left: auto;
}

.pan-mini-item, .pan-na-item {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    line-height: 1.4;
}

.pan-mini-item:last-child, .pan-na-item:last-child { border-bottom: none; }

.pan-mini-sub { color: var(--gray-400); font-size: 0.68rem; }

.pan-mini-more {
    padding: 0.25rem 0.75rem;
    font-size: 0.68rem;
    color: var(--gray-400);
    font-style: italic;
}

.pan-na-proj {
    display: block;
    font-size: 0.65rem;
    color: var(--gray-400);
}

/* Mobile */
@media (max-width: 768px) {
    .panorama-toolbar { flex-wrap: wrap; gap: 0.5rem; }
    .pan-layout { flex-direction: column; }
    .tree { overflow-x: auto; }
}

/* ============================================================
   ACTIVITY VIEW
   ============================================================ */

.activity-container {
    max-width: 800px;
}

.activity-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.activity-stat-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.activity-day {
    margin-bottom: 0.5rem;
}

.activity-day-header {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-700);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-day-count {
    font-weight: 400;
    color: var(--gray-400);
    font-size: 0.75rem;
}

.activity-entry {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.85rem;
}

.activity-entry:last-child {
    border-bottom: none;
}

.activity-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
}

.activity-desc {
    flex: 1;
    color: var(--gray-700);
}

.activity-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--gray-400);
}

@media (max-width: 768px) {
    .activity-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   AI ASSIST MODE
   ============================================================ */

.btn-assist {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-assist:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.assist-modal .assist-modal-content {
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.assist-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-radius: 1rem 1rem 0 0;
}

.assist-modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
}

.assist-modal-body {
    padding: 1.5rem;
}

.assist-intro p {
    color: var(--gray-600);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.assist-workspace-note {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.assist-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.assist-loading {
    text-align: center;
    padding: 3rem;
}

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

.assist-results-header h3 {
    margin: 0;
}

.assist-model-exec {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.assist-model-exec select {
    font-size: 0.8rem;
    padding: 0.3rem;
}

.assist-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.assist-card {
    border: 1px solid var(--gray-200);
    border-radius: 0.6rem;
    padding: 1rem;
    transition: all 0.2s;
}

.assist-card:hover {
    border-color: var(--primary-color);
}

.assist-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.assist-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.assist-type-badge {
    background: var(--gray-100);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.assist-task-name {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9rem;
}

.assist-card-desc {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 0.3rem;
    line-height: 1.5;
}

.assist-card-value {
    font-size: 0.78rem;
    color: var(--gray-400);
    font-style: italic;
    margin-bottom: 0.5rem;
}

.assist-card-actions {
    display: flex;
    gap: 0.5rem;
}

.assist-card-result {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

.assist-output {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--gray-800);
}

.assist-output h2, .assist-output h3, .assist-output h4 {
    margin: 0.75rem 0 0.35rem;
    font-size: 0.95rem;
}

.assist-output ul { padding-left: 1.25rem; margin: 0.4rem 0; }
.assist-output li { margin-bottom: 0.3rem; }
.assist-output strong { color: var(--gray-900); }

.assist-output-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--gray-200);
}

.assist-loading-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-500);
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

/* Assist context input */
.assist-context-input {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--gray-200);
}

.assist-context-input textarea {
    font-family: inherit;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    resize: vertical;
    min-height: 70px;
}

.assist-context-actions {
    display: flex;
    gap: 0.5rem;
}

/* ============================================================
   CALENDAR PICKER MODAL
   ============================================================ */

.cal-modal .cal-modal-content {
    max-width: 400px;
    width: 90%;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.cal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 1rem 1rem 0 0;
}

.cal-modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.cal-modal-body {
    padding: 1.25rem;
}

.cal-task-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--gray-800);
    padding: 0.6rem 0.75rem;
    background: var(--gray-50);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--gray-200);
}

.cal-modal-body .form-group {
    margin-bottom: 0.75rem;
}

.cal-modal-body label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--gray-700);
}

.cal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ============================================================
   MARKDOWN TABLES
   ============================================================ */

.md-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.8rem;
    margin: 0.75rem 0;
    overflow-x: auto;
    display: block;
}

.md-table th, .md-table td {
    border: 1px solid var(--gray-200);
    padding: 0.4rem 0.6rem;
    text-align: left;
}

.md-table th {
    background: var(--gray-50);
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
}

.md-table tr:nth-child(even) {
    background: var(--gray-50);
}

.md-table tr:hover {
    background: #eff6ff;
}

.assist-output hr {
    border: none;
    border-top: 1px solid var(--gray-200);
    margin: 1rem 0;
}

.assist-output ol {
    padding-left: 1.5rem;
    margin: 0.4rem 0;
}

.assist-output ol li {
    margin-bottom: 0.3rem;
}

.export-buttons {
    display: flex;
    gap: 0.5rem;
}

/* ============================================================
   GLOBAL SEARCH
   ============================================================ */

.search-container {
    position: relative;
    flex: 1;
    max-width: 400px;
    margin: 0 1rem;
}

.search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    background: var(--gray-50);
    transition: all 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.search-input::placeholder {
    color: var(--gray-400);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.35rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.6rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    max-height: 420px;
    overflow-y: auto;
    z-index: 100;
}

.search-group-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
    padding: 0.5rem 0.75rem 0.25rem;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
}

.search-result-item:hover {
    background: var(--gray-50);
}

.search-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.search-result-text {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background: #fef08a;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.search-result-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--gray-400);
}

.search-empty {
    padding: 1rem;
    text-align: center;
    color: var(--gray-400);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .search-container {
        max-width: none;
        margin: 0.5rem 0 0;
        order: 10;
        width: 100%;
    }
    
    .header-content {
        flex-wrap: wrap;
    }
}

/* ============================================================
   AI PROJECT PLANNER
   ============================================================ */

.btn-planner {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: white;
    border: none;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-planner:hover {
    background: linear-gradient(135deg, #6d28d9, #7c3aed);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.planner-modal .planner-modal-content {
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.planner-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-radius: 1rem 1rem 0 0;
}

.planner-modal-header h2 { margin: 0; font-size: 1.2rem; }

.planner-modal-body { padding: 1.5rem; }

.planner-modal-body p {
    color: var(--gray-600);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.planner-options {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
}

.planner-options select { max-width: 200px; }

.planner-loading { text-align: center; padding: 3rem; }
.planner-loading p { color: var(--gray-500); }

/* Preview */
.planner-preview-header { margin-bottom: 1rem; }
.planner-preview-header h3 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.planner-desc { color: var(--gray-600); font-size: 0.9rem; margin: 0; }

.planner-tasks { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }

.planner-task {
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    transition: all 0.15s;
}

.planner-task:hover { border-color: var(--primary-color); }

.planner-task.ai-task {
    border-left: 3px solid #7c3aed;
    background: #faf5ff;
}

.planner-task-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.planner-task-check { flex-shrink: 0; }

.planner-task-title {
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--gray-800);
}

.planner-ai-badge {
    font-size: 0.68rem;
    background: #ede9fe;
    color: #7c3aed;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    font-weight: 600;
}

.planner-human-badge {
    font-size: 0.68rem;
    background: var(--gray-100);
    color: var(--gray-500);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.planner-task-desc {
    font-size: 0.8rem;
    color: var(--gray-600);
    margin: 0.25rem 0 0 1.5rem;
}

.planner-ai-desc {
    font-size: 0.75rem;
    color: #7c3aed;
    margin: 0.2rem 0 0 1.5rem;
    font-style: italic;
}

.planner-task-meta {
    display: flex;
    gap: 0.75rem;
    margin: 0.25rem 0 0 1.5rem;
    font-size: 0.72rem;
    color: var(--gray-400);
}

.planner-subproject {
    margin: 0.75rem 0;
    border: 1px solid var(--gray-200);
    border-radius: 0.6rem;
    padding: 0.5rem;
    background: var(--gray-50);
}

.planner-subproject-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.35rem 0.25rem;
    margin-bottom: 0.35rem;
}

.planner-task-count {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-left: auto;
}

.planner-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

.planner-done-msg {
    text-align: center;
    padding: 2rem;
}

.planner-done-msg p {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ============================================================
   PROJECT TABS UI (Chrome-style)
   ============================================================ */

.project-tabs-container {
    margin-bottom: 0;
}

.project-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding: 0 0.25rem;
    padding-top: 0.5rem;
    background: var(--gray-100);
    scrollbar-width: thin;
}

.ptab {
    padding: 0.55rem 1rem 0.6rem;
    border: 1px solid var(--gray-200);
    border-bottom: none;
    background: var(--gray-100);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray-500);
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
}

.ptab:hover {
    color: var(--gray-700);
    background: var(--gray-50);
}

.ptab.active {
    color: var(--gray-900);
    background: white;
    border-color: var(--gray-200);
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.04);
}

/* Active tab connects to content below */
.ptab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: white;
}

.ptab-count {
    background: var(--gray-200);
    color: var(--gray-600);
    padding: 0.05rem 0.4rem;
    border-radius: 1rem;
    font-size: 0.68rem;
    font-weight: 500;
}

.ptab.active .ptab-count {
    background: #dbeafe;
    color: var(--primary-color);
}

/* Sub-tabs container */
.project-subtabs {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    border-top: 1px solid var(--gray-200);
}

.ptab-sub-row {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding-left: 0.5rem;
}

.ptab-sub-row-deep {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
    padding-left: 1.5rem;
}

.ptab-sub {
    padding: 0.45rem 0.85rem;
    border: none;
    background: none;
    font-size: 0.8rem;
    color: var(--gray-500);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    position: relative;
}

.ptab-sub:hover {
    color: var(--gray-700);
    background: var(--gray-50);
}

.ptab-sub.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.ptab-sub-row-deep .ptab-sub.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}

/* Tab content area */
.project-tab-content {
    padding: 1rem 0.5rem;
    background: white;
    min-height: 200px;
}

.ptab-content-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

.ptab-content-title h3 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

.ptab-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gray-500);
}

.ptab-content-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.ptab-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.ptab-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
    max-width: 300px;
}

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

.ptab-section {
    margin-bottom: 1.25rem;
}

.ptab-section h4 {
    font-size: 0.9rem;
    color: var(--gray-700);
    margin: 0 0 0.5rem;
}

.ptab-warning {
    color: var(--warning-color);
    font-size: 0.85rem;
    margin: 0;
}

.ptab-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    margin-bottom: 0.35rem;
    cursor: pointer;
    transition: all 0.15s;
}

.ptab-item:hover {
    border-color: var(--primary-color);
    background: #f8faff;
}

.ptab-item.overdue {
    border-left: 3px solid var(--danger-color);
}

.ptab-item.completed {
    opacity: 0.5;
}

.ptab-item.completed .ptab-item-title {
    text-decoration: line-through;
}

.ptab-item-status {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.ptab-item-title {
    flex: 1;
    font-size: 0.9rem;
    color: var(--gray-800);
    font-weight: 500;
}

.ptab-item-tags {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.ptab-completed {
    border-top: 1px solid var(--gray-200);
    padding-top: 0.75rem;
}

.ptab-completed h4 {
    cursor: pointer;
    user-select: none;
}

.ptab-completed .ptab-completed-list {
    display: none;
}

.ptab-completed.open .ptab-completed-list {
    display: block;
}

@media (max-width: 768px) {
    .ptab-content-header {
        flex-direction: column;
    }
    
    .ptab-content-actions {
        flex-wrap: wrap;
    }
}

/* Tab drag-over indicator */
.ptab.drag-over, .ptab-sub.drag-over {
    background: #dbeafe !important;
    border-color: var(--primary-color) !important;
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

.nav-item.drag-over {
    background: #dbeafe !important;
    border-radius: 0.5rem;
}

/* Tab drag-over state */
.ptab.drag-over, .ptab-sub.drag-over {
    background: #dbeafe !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px var(--primary-color);
}

/* Nav item drag-over for projects */
.nav-item.drag-over {
    background: #dbeafe !important;
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

/* ============================================================
   PARKED PROJECTS (in Waiting/Someday/Reference views)
   ============================================================ */

.parked-projects {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--gray-200);
}

.parked-projects h4 {
    font-size: 0.95rem;
    color: var(--gray-700);
    margin: 0 0 0.75rem;
}

.parked-project-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--primary-color);
    border-radius: 0.5rem;
    margin-bottom: 0.4rem;
    cursor: grab;
    transition: all 0.15s;
}

.parked-project-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.parked-project-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.parked-project-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-800);
}

.parked-project-meta {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.parked-project-actions {
    display: flex;
    gap: 0.35rem;
}

/* Overview drag-over */
.pov-node.drag-over {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    background: #eff6ff !important;
}

/* Inline waiting-for edit */
.waiting-for-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.waiting-for-input {
    border: 1px solid var(--gray-200);
    border-radius: 0.3rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.8rem;
    width: 180px;
    background: var(--gray-50);
    transition: all 0.15s;
}

.waiting-for-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.waiting-for-input::placeholder {
    color: var(--gray-400);
    font-style: italic;
}

/* ============================================================
   COMPLETION CELEBRATION
   ============================================================ */

.celebrate-particle {
    position: fixed;
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 9999;
    animation: particle-burst 0.8s ease-out forwards;
}

@keyframes particle-burst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(360deg);
    }
}

.celebrate-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9998;
    animation: flash-fade 0.5s ease-out forwards;
}

@keyframes flash-fade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Item age tags */
.tag-age-fresh { background: #d1fae5; color: #065f46; }
.tag-age-medium { background: #fef9c3; color: #92400e; }
.tag-age-old { background: #fecaca; color: #991b1b; font-weight: 600; }

/* User Management */
.user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.4rem;
    margin-bottom: 0.35rem;
}

.user-info { display: flex; flex-direction: column; gap: 0.1rem; }
.user-name { font-weight: 600; font-size: 0.9rem; }
.user-meta { font-size: 0.75rem; color: var(--gray-400); }

/* Format toolbar */
.format-toolbar {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 0.3rem;
}

.fmt-btn {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 0.25rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.fmt-btn:hover {
    background: var(--gray-200);
}

/* Task files */
.task-files-list { margin-bottom: 0.5rem; }

.task-file-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.3rem;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
}

.task-file-link {
    flex: 1;
    color: var(--primary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-file-size { color: var(--gray-400); font-size: 0.7rem; }

.btn-remove-file {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
}

.btn-remove-file:hover { color: var(--danger-color); }

.empty-hint { color: var(--gray-400); font-size: 0.8rem; margin: 0.3rem 0; }

.task-file-upload { margin-bottom: 0.5rem; }

/* Delegated indicator */
.tag-delegated { background: #dbeafe; color: #1e40af; font-weight: 600; }

/* ============================================================
   CALENDAR VIEW
   ============================================================ */

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.cal-view-toggle {
    display: flex;
    gap: 0;
    margin-left: auto;
}

.cal-view-toggle .btn {
    border-radius: 0;
}

.cal-view-toggle .btn:first-child {
    border-radius: 0.4rem 0 0 0.4rem;
}

.cal-view-toggle .btn:last-child {
    border-radius: 0 0.4rem 0.4rem 0;
}

.cal-mode.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Month View */
.cal-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--gray-200);
    border-radius: 0.5rem 0.5rem 0 0;
    overflow: hidden;
}

.cal-header-cell {
    background: var(--gray-100);
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.cal-body {
    border: 1px solid var(--gray-200);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    overflow: hidden;
}

.cal-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--gray-200);
}

.cal-cell {
    background: white;
    min-height: 90px;
    padding: 0.3rem;
    cursor: default;
}

.cal-cell-other {
    background: var(--gray-50);
}

.cal-cell-other .cal-day-num {
    color: var(--gray-300);
}

.cal-cell-today {
    background: #eff6ff;
}

.cal-cell-today .cal-day-num {
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-cell-weekend {
    background: #fafafa;
}

.cal-cell-today.cal-cell-weekend {
    background: #eff6ff;
}

.cal-day-num {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 0.2rem;
}

.cal-day-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cal-item {
    font-size: 0.7rem;
    padding: 0.15rem 0.3rem;
    border-radius: 0.2rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.cal-item:hover {
    opacity: 0.8;
}

.cal-item-next { background: #dbeafe; color: #1e40af; }
.cal-item-waiting { background: #fef3c7; color: #92400e; }
.cal-item-done { background: #d1fae5; color: #065f46; text-decoration: line-through; }
.cal-item-google { background: #e8f0fe; color: #1a73e8; }
.cal-item-inbox { background: #e0e7ff; color: #3730a3; }
.cal-item-default { background: var(--gray-100); color: var(--gray-600); }

.cal-item-more {
    font-size: 0.65rem;
    color: var(--gray-400);
    padding: 0.1rem 0.3rem;
}

/* Week View */
.cal-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.cal-week-day {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    min-height: 200px;
    overflow: hidden;
}

.cal-week-today {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.cal-week-header {
    padding: 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    text-align: center;
}

.cal-week-today .cal-week-header {
    background: var(--primary-color);
    color: white;
}

.cal-week-items {
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cal-week-item {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.3rem;
    padding: 0.4rem;
    cursor: pointer;
    transition: all 0.15s;
}

.cal-week-item:hover {
    background: var(--gray-100);
    border-color: var(--primary-color);
}

.cal-week-item.cal-item-next { border-left: 3px solid #3b82f6; }
.cal-week-item.cal-item-waiting { border-left: 3px solid #f59e0b; }
.cal-week-item.cal-item-done { border-left: 3px solid #10b981; opacity: 0.6; }
.cal-week-item.cal-item-inbox { border-left: 3px solid #6366f1; }
.cal-week-item.cal-item-google { border-left: 3px solid #1a73e8; background: #e8f0fe; }

.cal-week-item-title {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.cal-week-item-meta {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.cal-week-project, .cal-week-ctx {
    font-size: 0.65rem;
    color: var(--gray-400);
}

.cal-week-empty {
    text-align: center;
    color: var(--gray-300);
    padding: 1rem;
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .cal-week-grid {
        grid-template-columns: 1fr;
    }
    .cal-week-day { min-height: auto; }
}

/* ============================================================
   DOCUMENTS / ERGEBNISSE
   ============================================================ */

.docs-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 0;
    height: calc(100vh - 120px);
    height: calc(100dvh - 120px);   /* v1.44.3 (F5): iOS-Adressleiste */
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
}

.docs-sidebar {
    background: var(--gray-50);
    border-right: 1px solid var(--gray-200);
    overflow-y: auto;
}

.docs-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
    background: white;
    position: sticky;
    top: 0;
    z-index: 1;
}

.docs-sidebar-header h4 { margin: 0; font-size: 0.9rem; }

.docs-folder-tree { padding: 0.25rem 0; }

.docs-folder-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    font-size: 0.85rem;
}

.docs-folder-item:hover {
    background: var(--gray-100);
}

.docs-folder-item.active {
    background: #dbeafe;
    border-left-color: var(--primary-color);
    font-weight: 600;
}

.docs-folder-icon { font-size: 1rem; }
.docs-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.docs-folder-actions {
    display: none;
    gap: 0.1rem;
}

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

@media (max-width: 768px) {
    /* On mobile there's no hover — always show actions */
    .docs-folder-actions {
        display: flex;
    }
    .docs-folder-actions button {
        font-size: 0.95rem;
        padding: 0.35rem 0.5rem;
        min-width: 32px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.docs-folder-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--gray-400);
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
}

.docs-folder-actions button:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.docs-empty-hint {
    color: var(--gray-400);
    font-size: 0.8rem;
    padding: 1rem;
    text-align: center;
}

/* Content area */
.docs-content {
    padding: 1rem;
    overflow-y: auto;
    background: white;
}

.docs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.docs-crumb {
    color: var(--primary-color);
    cursor: pointer;
}

.docs-crumb:hover { text-decoration: underline; }

.docs-crumb-current {
    color: var(--gray-700);
    font-weight: 600;
    cursor: default;
}

.docs-crumb-current:hover { text-decoration: none; }
.docs-crumb-sep { color: var(--gray-300); }

/* Subfolder cards */
.docs-subfolder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.docs-subfolder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.docs-subfolder-card:hover {
    background: #eff6ff;
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.docs-subfolder-icon { font-size: 2rem; }
.docs-subfolder-name { font-size: 0.8rem; font-weight: 500; word-break: break-word; }

/* Files header */
.docs-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.docs-files-header h4 { margin: 0; font-size: 0.9rem; }

/* File cards */
.docs-file-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.docs-file-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 0.4rem;
    transition: all 0.15s;
}

.docs-file-card:hover {
    background: white;
    border-color: var(--primary-color);
}

.docs-file-icon { font-size: 1.5rem; flex-shrink: 0; }

.docs-file-info { flex: 1; overflow: hidden; }

.docs-file-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docs-file-name:hover { text-decoration: underline; }

.docs-file-meta {
    font-size: 0.7rem;
    color: var(--gray-400);
}

.docs-file-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0.2rem;
}

.docs-file-card:hover .docs-file-delete { opacity: 1; }

.docs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--gray-400);
    text-align: center;
}

.docs-empty p { margin: 0.5rem 0 0; }

@media (max-width: 768px) {
    .docs-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .docs-sidebar {
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
    }
}

/* ============================================================
   QUICK NOTES PANEL
   ============================================================ */

.btn-notes-header {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border: none;
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-notes-header:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.notes-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 620px;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: white;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 9000;
    display: flex;
    flex-direction: column;
}

.notes-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.notes-panel-header h3 { margin: 0; font-size: 1rem; }

.notes-panel-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    flex: 1;
    overflow: hidden;
}

.notes-list-section {
    border-right: 1px solid var(--gray-200);
    padding: 0.5rem;
    overflow-y: auto;
    background: var(--gray-50);
}

.notes-editor-section {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.note-list-item {
    padding: 0.5rem;
    border-radius: 0.3rem;
    cursor: pointer;
    margin-bottom: 0.2rem;
    transition: all 0.15s;
}

.note-list-item:hover { background: var(--gray-100); }

.note-list-item.active {
    background: #dbeafe;
    border-left: 3px solid var(--primary-color);
}

.note-list-title {
    font-size: 0.8rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-list-date {
    font-size: 0.65rem;
    color: var(--gray-400);
}

.notes-link-row {
    margin-bottom: 0.5rem;
}

.notes-textarea {
    flex: 1;
    resize: none;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    min-height: 200px;
}

.notes-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-200);
}

.note-save-status {
    font-size: 0.75rem;
    color: var(--gray-400);
}

@media (max-width: 768px) {
    .notes-panel { width: 100vw; }
    .notes-panel-body { grid-template-columns: 1fr; }
    .notes-list-section { max-height: 150px; }
}

/* Voice Recording Button */
.quick-capture {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-voice {
    background: linear-gradient(135deg, #34d399, #60a5fa);
    color: white;
    border: none;
    border-radius: 0.6rem;
    width: 42px;
    height: 38px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-voice:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(52, 211, 153, 0.3);
}

.btn-voice.recording {
    background: linear-gradient(135deg, #f87171, #fb923c);
    animation: voice-pulse 1s infinite;
}

@keyframes voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); }
}

.voice-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    color: #065f46;
    margin-top: 0.5rem;
}

.voice-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.voice-status-dot.listening {
    background: #ef4444;
    animation: voice-dot-pulse 1s infinite;
}

.voice-status-dot.heard {
    background: #10b981;
    animation: voice-dot-pulse 0.6s infinite;
}

.voice-status-dot.saving {
    background: #f59e0b;
    animation: voice-dot-spin 0.8s linear infinite;
}

@keyframes voice-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

@keyframes voice-dot-spin {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.voice-result {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    animation: voice-result-fade 0.3s ease;
}

@keyframes voice-result-fade {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Document Download Button */
.docs-file-download {
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0.2rem;
}

.docs-file-card:hover .docs-file-download { opacity: 1; }

/* ============================================================
   LANDING PAGE — Releaf
   ============================================================ */

.landing-page {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, #ecfdf5 0%, #f0fdf4 30%, #e0f2fe 60%, #ecfdf5 100%);
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Floating leaves */
.landing-leaves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.leaf {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.15;
    animation: leaf-float linear infinite;
}

.leaf-1 { left: 10%; top: -5%; font-size: 2rem; animation-duration: 18s; animation-delay: 0s; }
.leaf-2 { left: 30%; top: -5%; font-size: 1.2rem; animation-duration: 22s; animation-delay: 3s; }
.leaf-3 { left: 60%; top: -5%; font-size: 1.8rem; animation-duration: 20s; animation-delay: 6s; }
.leaf-4 { left: 80%; top: -5%; font-size: 1rem; animation-duration: 25s; animation-delay: 2s; }
.leaf-5 { left: 45%; top: -5%; font-size: 1.5rem; animation-duration: 19s; animation-delay: 8s; }

@keyframes leaf-float {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
    10% { opacity: 0.15; }
    90% { opacity: 0.15; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

/* Nav */
.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2.5rem;
    position: relative;
    z-index: 10;
}

.landing-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.landing-logo-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: #064e3b;
    letter-spacing: -0.5px;
}

.landing-login-btn {
    padding: 0.5rem 1.5rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.landing-login-btn:hover {
    background: #2cc48d;
    color: white;
    border-color: #34d399;
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3);
}

/* Hero */
.landing-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
    margin-top: -3rem;
}

.landing-title {
    font-size: 4rem;
    font-weight: 800;
    color: #064e3b;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 1.25rem;
}

.landing-accent {
    background: linear-gradient(135deg, #34d399, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
}

.landing-subtitle {
    font-size: 1.15rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 420px;
    margin-bottom: 2.5rem;
}

.landing-features {
    display: flex;
    gap: 2rem;
}

.landing-feature {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    border: 1px solid rgba(52, 211, 153, 0.15);
}

.landing-feature-icon { font-size: 1.1rem; }

/* Login Modal */
.login-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: modal-fade-in 0.2s ease;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.login-modal {
    background: white;
    border-radius: 1.25rem;
    padding: 2.5rem;
    width: 380px;
    max-width: 90%;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    text-align: center;
    position: relative;
    animation: modal-slide-up 0.3s ease;
}

@keyframes modal-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.login-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
}

.login-modal-close:hover { color: #374151; }

.login-modal-brand {
    margin-bottom: 1.5rem;
}

.login-modal-brand h2 {
    font-size: 1.3rem;
    color: #111827;
    margin: 0.75rem 0 0.25rem;
    font-weight: 700;
}

.login-modal-brand p {
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0;
}

.login-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.login-input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.6rem;
    font-size: 0.95rem;
    text-align: center;
    transition: border-color 0.2s;
    outline: none;
}

.login-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.login-submit-btn {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #34d399, #60a5fa);
    color: white;
    border: none;
    border-radius: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.login-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(52, 211, 153, 0.35);
}

.login-error {
    color: #ef4444;
    font-size: 0.85rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .landing-title { font-size: 2.5rem; letter-spacing: -1px; }
    .landing-subtitle { font-size: 1rem; }
    .landing-features { flex-direction: column; gap: 0.75rem; }
    .landing-nav { padding: 1rem 1.25rem; }
}

/* ============================================================
   CHARLIE — AI PRODUCTIVITY COACH
   ============================================================ */

.charlie-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 1rem 0;
}

.charlie-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.charlie-header h2 { font-size: 1.3rem; margin: 0; }
.charlie-subtitle { color: var(--gray-500); font-size: 0.85rem; margin: 0.25rem 0 0; }

.charlie-stats {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.charlie-stat {
    padding: 0.3rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.charlie-stat-high { background: #fef2f2; color: #dc2626; }
.charlie-stat-medium { background: #fffbeb; color: #d97706; }
.charlie-stat-low { background: #f0f9ff; color: #0284c7; }
.charlie-stat-progress { margin-left: auto; color: var(--gray-500); font-size: 0.85rem; }

/* Empty / Done states */
.charlie-empty, .charlie-done {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-500);
}

.charlie-empty-icon, .charlie-done-icon { font-size: 3rem; margin-bottom: 1rem; }
.charlie-empty h3, .charlie-done h3 { color: var(--gray-700); margin-bottom: 0.5rem; }

/* Suggestion Card */
.charlie-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    position: relative;
    animation: charlie-slide-in 0.25s ease;
}

@keyframes charlie-slide-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.charlie-card-priority {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.charlie-card-priority.high { background: #fef2f2; color: #dc2626; }
.charlie-card-priority.medium { background: #fffbeb; color: #d97706; }
.charlie-card-priority.low { background: #f0f9ff; color: #0284c7; }

.charlie-card-category {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.charlie-card-title {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.charlie-card-desc {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

.charlie-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.charlie-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.charlie-btn-accept {
    background: linear-gradient(135deg, #34d399, #60a5fa);
    color: white;
    border: none;
}
.charlie-btn-accept:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(52, 211, 153, 0.3); }

.charlie-btn-edit {
    background: white;
    color: var(--gray-700);
    border-color: var(--gray-300);
}
.charlie-btn-edit:hover { background: var(--gray-100); }

.charlie-btn-skip {
    background: white;
    color: var(--gray-500);
    border-color: var(--gray-200);
}
.charlie-btn-skip:hover { background: var(--gray-100); }

.charlie-btn-dismiss {
    background: white;
    color: var(--danger-color);
    border-color: #fecaca;
}
.charlie-btn-dismiss:hover { background: #fef2f2; }

/* Edit panel */
.charlie-edit-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.charlie-edit-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.charlie-edit-row label {
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 70px;
    color: var(--gray-600);
}

.charlie-edit-row select, .charlie-edit-row input {
    flex: 1;
    max-width: 250px;
}

.charlie-edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Delegated View */
.delegated-done {
    opacity: 0.6;
    border-left: 3px solid var(--success-color);
}

.delegated-pending {
    border-left: 3px solid #818cf8;
}

.delegated-filters {
    display: flex;
    gap: 0.5rem;
}

.delegated-filter {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    padding: 0.3rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.delegated-filter.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Delegation section styling */
#delegation-section {
    background: linear-gradient(135deg, rgba(52,211,153,0.05), rgba(96,165,250,0.05));
    border: 1px solid rgba(52,211,153,0.15);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

#delegation-section h4 {
    color: var(--primary-color);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Note preview */
.note-preview {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.6;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.note-preview strong { font-weight: 700; }
.note-preview em { font-style: italic; }
.note-preview h2, .note-preview h3, .note-preview h4 { margin: 0.5rem 0 0.25rem; }
.note-preview ul, .note-preview ol { padding-left: 1.25rem; margin: 0.25rem 0; }
.note-preview code { background: var(--gray-100); padding: 0.15rem 0.3rem; border-radius: 0.2rem; font-size: 0.8rem; }
.note-preview hr { border: none; border-top: 1px solid var(--gray-200); margin: 0.5rem 0; }

/* Sidebar footer — scroll on overflow */
.sidebar-footer {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Landing page mobile fix */
@media (max-width: 768px) {
    #login-overlay h1 {
        font-size: 2.25rem !important;
        letter-spacing: -1px !important;
    }
    #login-overlay p {
        font-size: 1rem !important;
    }
    #pricing-section > div > div {
        grid-template-columns: 1fr !important;
    }
}

/* Linked note card hover */
.linked-note-card:hover {
    background: var(--gray-100) !important;
}

/* Note icon on item card */
.btn-note {
    color: var(--primary-color);
    opacity: 0.8;
}
.btn-note:hover {
    opacity: 1;
}

/* Blocked tag */
.tag-blocked {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

/* Processing modal — always respect display:flex override */
.processing-modal[style*="display: flex"],
.processing-modal[style*="display:flex"] {
    pointer-events: auto;
}

/* Workspace add button */
.workspace-add-btn {
    min-width: unset !important;
    width: 32px !important;
    padding: 0.25rem !important;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.workspace-add-btn:hover {
    opacity: 1;
}


/* AI Planner button */
.btn-ai-planner {
    background: rgba(167,139,250,0.1) !important;
    border-color: #a78bfa !important;
    color: #a78bfa !important;
}
.btn-ai-planner:hover {
    background: rgba(167,139,250,0.2) !important;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#planner-record-btn.recording {
    border-color: #f87171 !important;
    background: rgba(248,113,113,0.15) !important;
    animation: pulse-dot 1s ease infinite;
}

/* Planner preview cards */
.planner-project {
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.planner-project-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.planner-task {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0;
    padding-left: 0.5rem;
    border-left: 2px solid var(--gray-200, #e5e7eb);
    margin-left: 0.5rem;
    font-size: 0.85rem;
}
.planner-task .ptag {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    font-weight: 600;
}
.ptag-kuma { background: rgba(96,165,250,0.15); color: #60a5fa; }
.ptag-waiting { background: rgba(251,191,36,0.15); color: #d97706; }
.ptag-na { background: rgba(52,211,153,0.15); color: #059669; }

/* ============================================================
   UX/UI FIXES (April 2026)
   ============================================================ */

/* === GLOBAL: Prevent horizontal scroll === */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.app-container, .main-content, .content-area {
    overflow-x: hidden;
}

/* === OVERFLOW: Markdown content in item descriptions === */
.item-description {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.item-description code {
    word-break: break-all;
    white-space: pre-wrap;
    font-size: 0.8rem;
    background: var(--gray-100);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

.item-description pre {
    overflow-x: auto;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
}

.md-table {
    overflow-x: auto;
    display: block;
    max-width: 100%;
    font-size: 0.8rem;
}

/* === TOUCH: Larger tap targets === */
.item-checkbox {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.btn-icon {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === MOBILE: Tap feedback (replace hover) === */
@media (hover: none) {
    .item-card:active {
        background: var(--gray-50);
        transform: scale(0.99);
    }
    
    .nav-item:active {
        background: var(--primary-soft);
    }
    
    .btn:active, button:active {
        opacity: 0.7;
        transform: scale(0.97);
    }
    
    .workspace-tab:active {
        transform: scale(0.95);
    }
}

/* === MODAL: Scrollable on mobile === */
@media (max-width: 768px) {
    /* v1.44.2 (Audit P1): Der KASTEN scrollt nicht — nur der Körper.
       Vorher hatten beide overflow-y:auto, also zwei verschachtelte
       Scrollbereiche auf jedem Standardfenster. Genau die Konstruktion,
       die im Meeting-Fenster dazu führte, dass man nicht mehr nach oben
       kam. Betrifft Aufgabe, Board, Sprint, CRM-Detail, Verknüpfungs-
       Auswahl, Import, Kontakt festhalten, Projekt und Tagesplan. */
    .modal-content {
        /* v1.66: KEINE Höhe hier — nur der Scroll-Vertrag aus v1.44.2:
           Der Kasten scrollt nicht, der Körper schon. */
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* === NAV ITEMS: 44px touch targets === */
    .nav-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0.6rem 1rem !important;
    }
    
    /* === SIDEBAR: Bottom safe area === */
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom, 20px);
    }
    
    .sidebar-footer {
        padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 60px);
    }
    
    /* === DOC PREVIEW: Larger close button === */
    #doc-preview-overlay button {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.5rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #doc-preview-overlay a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* === ITEM CARDS: No overflow === */
    .item-card {
        max-width: 100%;
        overflow: hidden;
    }
    
    .item-content {
        max-width: calc(100vw - 80px);
        overflow: hidden;
    }
    
    /* === CLOSE BUTTONS: 44px minimum === */
    .btn-close, .modal-close {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* === READABILITY: Minimum font sizes === */
    .tag, .item-meta span {
        font-size: max(0.7rem, 11px);
    }
    
    /* === PRE/CODE: Don't break layout === */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* === ACCESSIBILITY: Focus styles for keyboard navigation === */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

button:focus-visible, .btn:focus-visible, .nav-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}

.item-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

/* === A11Y: Respect reduced motion preference === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === Calendar nav: wrap on mobile === */
@media (max-width: 768px) {
    .calendar-nav {
        display: grid !important;
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto auto;
        gap: 0.4rem;
        align-items: center;
    }
    
    .calendar-nav h3 {
        min-width: 0 !important;
        font-size: 1rem !important;
        text-align: center;
    }
    
    #cal-today {
        grid-column: 4;
    }
    
    .cal-view-toggle {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-left: 0;
        width: 100%;
        display: flex;
    }
    
    .cal-view-toggle .btn {
        flex: 1;
        padding: 0.5rem;
        min-height: 44px;
    }
}

/* === Panorama Flythrough Animation === */
.pan-fly-hidden {
    opacity: 0 !important;
    transform: scale(0.8) translateY(10px) !important;
    pointer-events: none;
}

.pan-fly-reveal {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
}

.panorama-canvas.flying {
    transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.pan-fly-label {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    color: #34d399;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 600;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.pan-fly-label.visible {
    opacity: 1;
}

/* === Panorama Dashboard (replaces tree view) === */
.pano-dash {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
    font-size: 0.9rem;
}

.pano-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
    .pano-stats { grid-template-columns: repeat(3, 1fr); }
}
.pano-stat {
    text-align: center;
    padding: 1rem 0.5rem;
    background: rgba(255,255,255,0.6);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}
.pano-stat-n { font-size: 2rem; font-weight: 700; color: var(--gray-800); line-height: 1; }
.pano-stat-l { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.25rem; }

.pano-alerts { margin-bottom: 1.5rem; }
.pano-alert {
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}
.pano-alert-warn { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; }
.pano-alert-red { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

.pano-section-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--gray-700);
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--primary-color);
}

.pano-proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
}
.pano-proj-card {
    position: relative;
    padding: 0.85rem;
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.pano-proj-bar {
    position: absolute;
    top: 0; left: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    transition: width 0.3s;
}
.pano-proj-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
.pano-proj-meta { font-size: 0.75rem; color: var(--gray-500); }
.pano-proj-children { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px dashed var(--gray-200); }
.pano-proj-child { font-size: 0.75rem; color: var(--gray-600); padding: 0.1rem 0; }

.pano-na-list, .pano-wait-list { display: flex; flex-direction: column; gap: 0.35rem; }
.pano-na-row, .pano-wait-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.6);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-100);
    font-size: 0.85rem;
}
.pano-stale { border-left: 3px solid #f59e0b; }
.pano-na-ctx { flex-shrink: 0; }
.pano-na-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-na-proj { font-size: 0.7rem; color: var(--gray-400); white-space: nowrap; }
.pano-na-age { font-size: 0.7rem; color: #f59e0b; font-weight: 600; white-space: nowrap; }

.pano-wait-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-wait-person { font-size: 0.75rem; color: var(--primary-dark); white-space: nowrap; }
.pano-wait-days { font-size: 0.75rem; color: var(--gray-500); white-space: nowrap; }
.pano-no-followup { color: #dc2626; font-weight: 600; }

.pano-someday { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pano-someday-chip {
    padding: 0.3rem 0.6rem;
    background: var(--gray-100);
    border-radius: 1rem;
    font-size: 0.75rem;
    color: var(--gray-600);
}
.pano-more { background: var(--gray-200); }

/* === Expandable Project Cards === */
.pano-proj-expandable { cursor: pointer; }
.pano-proj-expandable:hover { border-color: var(--primary-color); }

.pano-proj-arrow {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 0.75rem;
    color: var(--gray-400);
}
.pano-proj-open .pano-proj-arrow { transform: rotate(90deg); }

.pano-proj-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
    margin-top: 0;
}
.pano-proj-open .pano-proj-detail {
    max-height: 500px;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--gray-200);
}

.pano-proj-subheader {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    margin: 0.4rem 0 0.2rem;
    padding-left: 0.25rem;
}
.pano-proj-subheader:first-child { margin-top: 0; }

.pano-proj-item {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    color: var(--gray-700);
    border-radius: var(--radius-sm);
}
.pano-proj-item:hover { background: var(--gray-50); }
.pano-proj-item-sub { padding-left: 1rem; }

/* === Onboarding === */
.onboard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    cursor: pointer;
    transition: all 0.2s;
}
.onboard-dot.active {
    background: #34d399;
    width: 24px;
    border-radius: 4px;
}
.onboard-highlight {
    position: relative;
    z-index: 10003 !important;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.5), 0 0 20px rgba(52, 211, 153, 0.3) !important;
    border-radius: 8px;
    transition: box-shadow 0.3s;
}
.verify-code-input:focus {
    border-color: #34d399 !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}

/* === FAQ === */
.faq-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    overflow: hidden;
    background: rgba(255,255,255,0.7);
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gray-800);
}
.faq-question:hover { background: var(--gray-50); }
.faq-arrow {
    transition: transform 0.2s;
    color: var(--gray-400);
    font-size: 0.8rem;
}
.faq-open .faq-arrow { transform: rotate(90deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.faq-open .faq-answer {
    max-height: 500px;
    padding: 0 1rem 1rem;
}
.faq-short {
    font-size: 0.9rem;
    color: var(--gray-700);
    margin: 0 0 0.5rem;
    line-height: 1.5;
}
.faq-long {
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.6;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--gray-200);
}

/* === Mobile Floating Add Button === */
.mobile-fab {
    display: none;
}

@media (max-width: 768px) {
    .mobile-fab {
        display: flex;
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #34d399, #60a5fa);
        color: white;
        font-size: 2rem;
        font-weight: 300;
        border: none;
        box-shadow: 0 4px 12px rgba(52, 211, 153, 0.4);
        cursor: pointer;
        z-index: 100;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-fab:active {
        transform: scale(0.9);
    }
}

/* === Mobile: safe-area padding === */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .content-area {
            padding-bottom: calc(5rem + env(safe-area-inset-bottom));
        }
        .modal-body {
            padding-bottom: calc(6rem + env(safe-area-inset-bottom));
        }
        .mobile-fab {
            bottom: calc(1.5rem + env(safe-area-inset-bottom));
        }
    }
}

/* === Settings Tabs === */
.settings-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 2rem;
    background: white;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--gray-600);
    transition: all 0.2s;
}
.settings-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-dark);
}
.settings-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* === Workspace add button === */
#add-workspace-dropdown-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--radius-md);
    border: 2px solid var(--primary-color);
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
}
#add-workspace-dropdown-btn:hover {
    background: var(--primary-color);
    color: white;
}

/* === Mobile 360° UX Fixes === */
@media (max-width: 768px) {
    /* Filter row: wrap into grid */
    .filter-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
    
    .filter-select {
        min-width: 0;
        width: 100%;
        font-size: 0.8rem;
        padding: 0.4rem 0.5rem;
    }
    
    /* Overview + Do Next buttons: full width row */
    .btn-overview,
    .btn-action-process {
        font-size: 0.8rem;
        padding: 0.5rem;
        white-space: nowrap;
    }
    
    /* Quick capture: input + brain side by side */
    .quick-capture {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-top: 0.5rem;
    }
    
    .quick-capture input {
        flex: 1;
        min-width: 0;
        font-size: 0.9rem;
        padding: 0.6rem 0.75rem;
    }
    
    /* Process inbox button */
    #start-processing-btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.5rem;
    }
    
    /* View header compact */
    .view-header {
        padding-bottom: 0.5rem;
    }
    
    .view-description {
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
    }
    
    /* Header title + search compact */
    .header {
        padding: 0.75rem 1rem;
    }
    
    .header-content h2 {
        font-size: 1.1rem;
    }
    
    /* Item cards compact */
    .item-title {
        font-size: 0.9rem;
    }
    
    .item-meta {
        font-size: 0.75rem;
    }
    
    /* Project tabs compact */
    .project-tabs-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Settings container */
    .settings-container {
        padding: 0;
    }
    
    .settings-section {
        padding: 1rem;
    }
    
    /* Charlie container compact */
    .charlie-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .charlie-header h2 {
        font-size: 1.1rem;
    }
}

/* === Mobile overflow fixes (360° check) === */
@media (max-width: 768px) {
    /* Tree container overflow */
    .tree-container {
        min-width: 0;
        overflow-x: auto;
    }
    
    /* Projects header: stack buttons */
    #projects-view .view-header {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Settings tabs wrap */
    .settings-tabs {
        flex-wrap: wrap !important;
    }
    
    /* Search bar compact */
    .search-bar {
        max-width: calc(100vw - 120px);
    }
    
    .search-bar input {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }
}

/* === Hamburger menu button (mobile only) — Logo-inspired tri-color === */
.btn-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-right: 4px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    border-radius: 8px;
    transition: background 0.15s;
}

.btn-hamburger:active {
    background: var(--gray-100);
}

.btn-hamburger span {
    display: block;
    width: 18px;
    height: 2.5px;
    margin: 2.5px 0;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s, background 0.2s;
}

/* Logo-Farbverlauf von oben nach unten: Grün → Teal → Blau */
.btn-hamburger span:nth-child(1) {
    background: linear-gradient(90deg, #34d399, #6ee7b7);
}
.btn-hamburger span:nth-child(2) {
    background: linear-gradient(90deg, #14b8a6, #4abcc9);
}
.btn-hamburger span:nth-child(3) {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

/* Open-State: X-Form, Stripes behalten ihre originalen Farben */
.btn-hamburger.is-open span:nth-child(1) {
    transform: rotate(45deg) translate(3.5px, 3.5px);
}
.btn-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}
.btn-hamburger.is-open span:nth-child(3) {
    transform: rotate(-45deg) translate(3.5px, -3.5px);
}

@media (max-width: 768px) {
    .btn-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 36px;
        min-height: 36px;
    }
}

/* === Sidebar edge indicator (mobile only) === */
.sidebar-edge-indicator {
    display: none;
}

@media (max-width: 768px) {
    .sidebar-edge-indicator {
        display: flex;
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 56px;
        background: rgba(52, 211, 153, 0.3);
        border-radius: 0 10px 10px 0;
        align-items: center;
        justify-content: center;
        color: rgba(52, 211, 153, 0.7);
        font-size: 0.75rem;
        z-index: 90;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: opacity 0.3s, background 0.2s;
    }
    .sidebar-edge-indicator:active {
        background: rgba(52, 211, 153, 0.5);
    }
}

/* === Prevent zoom on mobile === */
html {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

body.scroll-locked {
    overflow: hidden;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

/* Prevent double-tap zoom on all interactive elements */
button, a, input, select, textarea, .nav-item, .item-card, .sidebar-edge-indicator {
    touch-action: manipulation;
}

/* ============================================================
   Next Actions priority sub-navigation (v1.23)
   ============================================================ */
.nav-subitems {
    overflow: hidden;
}
.nav-subitem {
    padding-left: 2.6rem !important;
    font-size: 0.85rem;
    opacity: 0.92;
    min-height: 34px;
}
.nav-subitem .icon {
    font-size: 0.7rem;
}
.nav-subitem .badge-sub {
    font-size: 0.65rem;
    min-width: 1.2rem;
    padding: 1px 5px;
}
.nav-subitem.drag-over {
    background: rgba(59, 130, 246, 0.18);
    border-left: 3px solid #3b82f6;
}

/* ============================================================
   OBSIDIAN-STYLE NOTES (v1.25) — nx- prefix
   ============================================================ */
.nx-layout { display:grid; grid-template-columns: 205px 250px 1fr; gap:0; height: calc(100vh - 120px); height: calc(100dvh - 120px); min-height:400px; border:1px solid #e5e7eb; border-radius:0.6rem; overflow:hidden; background:#fff; }
.nx-rail { border-right:1px solid #e5e7eb; padding:0.6rem; overflow-y:auto; background:#fafafa; }
.nx-rail-actions { display:flex; gap:0.3rem; margin-bottom:0.5rem; flex-wrap:wrap; }
#nx-search { width:100%; padding:0.4rem 0.5rem; border:1px solid #d1d5db; border-radius:0.4rem; font-size:0.82rem; margin-bottom:0.6rem; }
.nx-rail-section { margin-bottom:0.8rem; }
.nx-rail-head { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280; margin-bottom:0.3rem; display:flex; justify-content:space-between; align-items:center; }
.nx-rail-item { display:flex; justify-content:space-between; align-items:center; padding:0.22rem 0.4rem; border-radius:0.35rem; font-size:0.82rem; cursor:pointer; color:#374151; }
.nx-rail-item:hover { background:#eef2ff; }
.nx-rail-item.active { background:#e0e7ff; font-weight:600; }
.nx-rail-item .cnt { font-size:0.68rem; color:#9ca3af; }
.nx-mini-btn { background:none; border:none; cursor:pointer; font-size:0.85rem; padding:2px 5px; border-radius:0.3rem; color:#4b5563; }
.nx-mini-btn:hover { background:#e5e7eb; }
.nx-list-pane { border-right:1px solid #e5e7eb; overflow-y:auto; background:#fff; }
.nx-active-filter { padding:0.4rem 0.6rem; background:#eef2ff; font-size:0.75rem; color:#4338ca; display:flex; justify-content:space-between; align-items:center; }
.nx-note-item { padding:0.55rem 0.7rem; border-bottom:1px solid #f3f4f6; cursor:pointer; }
.nx-note-item:hover { background:#f9fafb; }
.nx-note-item.active { background:#eef2ff; }
.nx-note-item .t { font-weight:600; font-size:0.88rem; color:#111827; display:flex; align-items:center; gap:0.3rem; }
.nx-note-item .m { font-size:0.7rem; color:#9ca3af; margin-top:1px; }
.nx-note-item .p { font-size:0.75rem; color:#6b7280; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nx-editor-pane { overflow-y:auto; position:relative; display:flex; flex-direction:column; }
.nx-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#6b7280; text-align:center; font-size:0.95rem; gap:0.4rem; }
#nx-editor { display:flex; flex-direction:column; height:100%; }
.nx-editor-head { display:flex; gap:0.4rem; align-items:center; padding:0.55rem 0.7rem 0.3rem; }
#nx-title { flex:1; border:none; font-size:1.15rem; font-weight:700; outline:none; background:transparent; min-width:0; }
.nx-back-btn { display:none; background:none; border:none; font-size:1.1rem; cursor:pointer; }
.nx-meta-row { display:flex; gap:0.4rem; padding:0 0.7rem 0.4rem; }
.nx-meta-row input { flex:1; border:1px solid #e5e7eb; border-radius:0.35rem; padding:0.25rem 0.45rem; font-size:0.75rem; color:#4b5563; min-width:0; }
.nx-props { padding:0 0.7rem 0.3rem; display:flex; flex-wrap:wrap; gap:0.3rem; }
.nx-prop-chip { display:inline-flex; align-items:center; gap:0.25rem; background:#f3f4f6; border-radius:0.4rem; padding:0.15rem 0.45rem; font-size:0.72rem; }
.nx-prop-chip b { color:#4338ca; font-weight:600; }
.nx-prop-chip input { border:none; background:transparent; width:90px; font-size:0.72rem; outline:none; }
.nx-prop-chip .x { cursor:pointer; color:#9ca3af; }
.nx-prop-add { font-size:0.72rem; color:#6366f1; cursor:pointer; padding:0.15rem 0.3rem; }
.nx-body { flex:1; position:relative; display:flex; min-height:220px; }
#nx-content { flex:1; border:none; resize:none; padding:0.7rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:0.86rem; line-height:1.55; outline:none; }
.nx-preview { flex:1; padding:0.7rem 0.9rem; overflow-y:auto; border-left:1px solid #f3f4f6; font-size:0.9rem; line-height:1.6; }
/* v3.16.9: Ticket-Beschreibung als Vorschau (Roh-Editor zugeklappt) */
.desc-preview { border:1px solid #e5e7eb; border-radius:8px; padding:0.6rem 0.8rem; background:#fafafa; font-size:0.9rem; line-height:1.55; max-height:320px; overflow-y:auto; cursor:text; }
.desc-preview ul, .desc-preview ol { margin:0.3rem 0 0.3rem 1.2rem; }
.desc-preview h2, .desc-preview h3, .desc-preview h4 { margin:0.5rem 0 0.25rem; font-size:1rem; }
.desc-preview table { border-collapse:collapse; margin:0.4rem 0; font-size:0.85rem; }
.desc-preview th, .desc-preview td { border:1px solid #e5e7eb; padding:0.25rem 0.5rem; vertical-align:top; }
.comment-body ul, .comment-body ol { margin:0.2rem 0 0.2rem 1.1rem; }
/* v3.16.9 (Ben 12.10.): Lesemodus — der Roh-Editor ist zugeklappt, die Vorschau füllt die Notizfläche
   und liest sich wie eine Seite. ✏️ oder Doppelklick öffnet den Editor. */
.nx-body.nx-read #nx-content,
.nx-body.nx-read .nx-autocomplete { display:none !important; }
.nx-body.nx-read .nx-preview { display:block; flex:1 1 auto; min-height:0; border-left:none; padding:1rem 1.4rem 1.6rem; font-size:0.95rem; line-height:1.7; max-width:860px; }
.nx-body.nx-read .nx-preview table { border-collapse:collapse; margin:0.6rem 0; font-size:0.88rem; }
.nx-body.nx-read .nx-preview th, .nx-body.nx-read .nx-preview td { border:1px solid #e5e7eb; padding:0.3rem 0.55rem; vertical-align:top; }
.nx-body.nx-read .nx-preview th { background:#f9fafb; text-align:left; }
.nx-preview h1,.nx-preview h2,.nx-preview h3 { margin:0.7em 0 0.35em; }
.nx-preview ul { padding-left:1.2rem; }
.nx-preview code { background:#f3f4f6; padding:1px 4px; border-radius:3px; font-size:0.82em; }
.nx-preview blockquote { border-left:3px solid #c7d2fe; margin:0.4em 0; padding:0.1em 0.7em; color:#4b5563; }
a.nx-wl { color:#4f46e5; text-decoration:none; border-bottom:1px dashed #a5b4fc; cursor:pointer; }
a.nx-wl.nx-missing { color:#dc2626; border-bottom-color:#fca5a5; }
a.nx-wl.nx-item::before { content:"⚡"; font-size:0.8em; margin-right:1px; }
a.nx-wl.nx-project::before { content:"📁"; font-size:0.8em; margin-right:1px; }
.nx-tag-chip { display:inline-block; background:#eef2ff; color:#4338ca; border-radius:0.8rem; padding:0 0.45rem; font-size:0.82em; cursor:pointer; }
.nx-embed { border:1px solid #e5e7eb; border-left:3px solid #a5b4fc; border-radius:0.4rem; padding:0.5rem 0.7rem; margin:0.4rem 0; background:#fafaff; }
.nx-embed-src { font-size:0.68rem; color:#9ca3af; margin-bottom:0.2rem; }
.nx-autocomplete { position:absolute; z-index:60; background:#fff; border:1px solid #d1d5db; border-radius:0.45rem; box-shadow:0 8px 20px rgba(0,0,0,0.12); max-height:240px; overflow-y:auto; min-width:260px; }
.nx-ac-item { padding:0.4rem 0.6rem; font-size:0.83rem; cursor:pointer; display:flex; justify-content:space-between; gap:0.6rem; }
.nx-ac-item.sel, .nx-ac-item:hover { background:#eef2ff; }
.nx-ac-item .sub { color:#9ca3af; font-size:0.7rem; }
.nx-save-state { padding:0.15rem 0.7rem; font-size:0.68rem; color:#9ca3af; min-height:1rem; }
.nx-backlinks { border-top:1px solid #e5e7eb; padding:0.55rem 0.7rem 0.8rem; background:#fafafa; max-height:32%; overflow-y:auto; }
.nx-bl-head { font-size:0.72rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:0.03em; }
.nx-bl-item { padding:0.3rem 0.4rem; border-radius:0.35rem; font-size:0.78rem; cursor:pointer; }
.nx-bl-item:hover { background:#eef2ff; }
.nx-bl-item .src { font-weight:600; color:#4338ca; }
.nx-bl-item .ctx { color:#6b7280; }
.nx-bl-item .lnkbtn { float:right; font-size:0.68rem; color:#059669; }
/* Views table/cards */
#nx-viewresult { padding:0.7rem; overflow:auto; }
.nx-vr-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; }
.nx-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.nx-table th { text-align:left; padding:0.35rem 0.5rem; background:#f3f4f6; border-bottom:2px solid #e5e7eb; position:sticky; top:0; }
.nx-table td { padding:0.3rem 0.5rem; border-bottom:1px solid #f3f4f6; vertical-align:top; }
.nx-table td.editable { cursor:text; }
.nx-table td.editable:hover { background:#fef9c3; }
.nx-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:0.6rem; }
.nx-card { border:1px solid #e5e7eb; border-radius:0.5rem; padding:0.6rem; cursor:pointer; background:#fff; }
.nx-card:hover { border-color:#a5b4fc; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
.nx-card .t { font-weight:600; font-size:0.86rem; }
.nx-card .props { font-size:0.7rem; color:#6b7280; margin-top:0.3rem; }
/* Quick switcher */
.nx-switcher { position:fixed; inset:0; background:rgba(17,24,39,0.45); z-index:1200; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; }
.nx-switcher-box { width:min(560px,92vw); background:#fff; border-radius:0.7rem; box-shadow:0 20px 50px rgba(0,0,0,0.3); overflow:hidden; }
#nx-switcher-input { width:100%; padding:0.8rem 1rem; border:none; outline:none; font-size:1rem; border-bottom:1px solid #e5e7eb; }
#nx-switcher-results { max-height:340px; overflow-y:auto; }
/* Graph */
.nx-graph-overlay { position:fixed; inset:0; background:#0f172a; z-index:1100; display:flex; flex-direction:column; }
.nx-graph-head { display:flex; justify-content:space-between; align-items:center; padding:0.6rem 1rem; color:#e5e7eb; }
.nx-graph-head .nx-mini-btn { color:#e5e7eb; font-size:1.1rem; }
#nx-graph-canvas { flex:1; width:100%; }
/* Mobile */
@media (max-width: 768px) {
    .nx-layout { grid-template-columns:1fr; height:calc(100vh - 170px); height:calc(100dvh - 170px); }
    .nx-rail { display:none; }
    .nx-layout.nx-m-rail .nx-rail { display:block; }
    .nx-list-pane { display:block; }
    .nx-editor-pane { display:none; }
    .nx-layout.nx-m-editor .nx-list-pane { display:none; }
    .nx-layout.nx-m-editor .nx-editor-pane { display:flex; }
    .nx-back-btn { display:inline-block; }
    .nx-body { flex-direction:column; }
    /* v1.69.10 (UX): Auf Mobile teilte sich die Vorschau die Höhe mit dem
       Editor und blieb ein schmaler Streifen — zum Lesen einer
       Meeting-Notiz unbrauchbar. Sie übernimmt jetzt die ganze
       Notizfläche, scrollt für sich und hat einen Zurück-Weg. Die Höhe
       kommt EINMAL von oben (Modal-Shell-Regel aus v1.66). */
    .nx-preview { border-left:none; border-top:1px solid #f3f4f6; }
    .nx-body.nx-preview-full { position:relative; }
    .nx-body.nx-preview-full #nx-content,
    .nx-body.nx-preview-full .nx-autocomplete { display:none !important; }
    .nx-body.nx-preview-full .nx-preview {
        display:block;
        flex:1 1 auto;
        min-height:0;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        border-top:none;
        padding:0.9rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
        font-size:1rem;
        line-height:1.7;
    }
}

/* v1.26 audit fixes */
.nx-flash { outline: 3px solid #6366f1; outline-offset: 2px; border-radius: 0.5rem; transition: outline 0.3s; }
.nx-prop-chip input[type="checkbox"] { width: auto; }
.nx-prop-chip input[type="date"], .nx-prop-chip input[type="number"] { width: 110px; }
#nx-save-state a { color: #d97706; font-weight: 600; }

/* ============================================================
   v1.27 TEAM EDITION — Board, Assignee, Comments
   ============================================================ */
/* v1.72 (Board): Flex statt Grid. Im Grid bekam eine eingeklappte Spalte
   trotzdem ihre volle Spur — das `flex:0 0 auto` der Klapp-Regel lief ins
   Leere, und der gewonnene Platz kam bei To Do / Doing / Done nie an.
   Mit Flex teilen sich die offenen Spalten den freien Raum wirklich auf. */
.board-columns { display:flex; gap:0.8rem; align-items:flex-start; }
.board-columns > .board-col { flex:1 1 0; min-width:0; }
.board-col { background:#f3f4f6; border-radius:0.6rem; padding:0.5rem; min-height:220px; }
.board-col-head { font-weight:700; font-size:0.85rem; color:#374151; padding:0.25rem 0.4rem 0.5rem; display:flex; justify-content:space-between; }
.board-count { background:#e5e7eb; border-radius:0.8rem; padding:0 0.5rem; font-size:0.72rem; color:#6b7280; }
.board-col-body { min-height:160px; display:flex; flex-direction:column; gap:0.4rem; }
.board-card[data-waiting="1"] { opacity:.72; border-style:dashed; }                  /* v2.91: Wartend */
.board-waiting-toggle { margin-left:.4rem; border:1px solid #d1d5db; background:#fff; border-radius:999px; padding:0 .45rem; font-size:.8rem; cursor:pointer; }
.board-waiting-toggle.active { background:#fef3c7; border-color:#f59e0b; }
.board-card { background:#fff; border:1px solid #e5e7eb; border-radius:0.5rem; padding:0.5rem 0.6rem; cursor:grab;
    /* v1.44.4 (Board-Touch): Karten sind Bedienflächen, kein Text.
       Ohne das startet ein Long-Press auf iOS die Auswahl-Lupe/Callout
       mitten in der Scroll-Geste; manipulation nimmt zudem den
       Doppeltipp-Zoom-Delay vom onclick. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation; }
/* v1.44.4: Auf Touch-Geräten gibt es keinen Karten-Drag (Pfeile sind der
   Weg) — Gürtel zu Hosenträger zum draggable=false aus boardBindCards():
   selbst falls ein alter gecachter Render das Attribut noch trägt, startet
   WebKit damit keinen nativen Drag mehr. Bedingung identisch zu den
   Verschiebe-Pfeilen. */
@media (hover: none) and (pointer: coarse) {
    .board-card { -webkit-user-drag: none; cursor: default; }
}
.board-card:hover { border-color:#a5b4fc; box-shadow:0 2px 5px rgba(0,0,0,0.06); }
.board-card .t { font-size:0.84rem; font-weight:600; color:#111827; }
.board-card .m { font-size:0.7rem; color:#6b7280; margin-top:2px; display:flex; gap:0.4rem; flex-wrap:wrap; align-items:center; }
.board-col.drag-over { outline:2px dashed #6366f1; outline-offset:-4px; background:#eef2ff; }
.tag-doing { background:#dbeafe; color:#1d4ed8; }
.assignee-badge { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#6366f1; color:#fff; font-size:0.62rem; font-weight:700; letter-spacing:0.3px; }
.tag-comments { background:#f3f4f6; color:#6b7280; }
.tag-agent { background:#ede9fe; color:#5b21b6; font-weight:600; }   /* v2.96: Urheber (KI) */
.agent-mail-warn { color:#b45309; font-weight:600; }                 /* v2.99: Empfänger prüfen */
.gina-float-hangup { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:9999; background:#dc2626; color:#fff; border:0; border-radius:999px; padding:12px 18px; font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,.25); }   /* v3.00: Auflegen in jeder Ansicht */
.gina-float-hangup[hidden] { display:none; }
.agent-mail-to-label { display:flex; align-items:center; gap:.4rem; margin:.25rem 0; }
.agent-mail-to-label input { flex:1; min-width:0; }
.comment-item { background:var(--gray-50,#f9fafb); border:1px solid var(--gray-200,#e5e7eb); border-radius:0.5rem; padding:0.45rem 0.6rem; margin-bottom:0.35rem; }
.comment-head { display:flex; justify-content:space-between; font-size:0.72rem; color:#6b7280; margin-bottom:0.2rem; }
.comment-head .a { font-weight:700; color:#4338ca; }
.comment-body { font-size:0.83rem; line-height:1.45; }
.comment-del { cursor:pointer; color:#9ca3af; font-size:0.7rem; }
.comment-del:hover { color:#dc2626; }
/* v3.16.89: »Mehr anzeigen« unter den neuesten Kommentaren */
.comments-more-row { display:flex; gap:0.4rem; flex-wrap:wrap; justify-content:center; margin:0.3rem 0 0.2rem; }
body.team-mode #delegate-btn { display:none !important; }
body.team-mode .delegation-section { display:none !important; }
@media (max-width:768px){ .board-columns { grid-template-columns:1fr; } }
/* v1.27.1 (Audit #4): das Edit-Modal nutzt die ID, nicht die Klasse */
body.team-mode #delegation-section { display:none !important; }

/* ============================================================
   SIDEBAR REORDER (v1.28) — Drag&Drop-Umsortierung
   ============================================================ */
.nav-item[draggable="true"] { cursor: grab; }
.nav-item.nav-dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.nav-item.nav-drop-above {
    box-shadow: inset 0 2px 0 0 var(--primary-color, #10b981);
}
.nav-item.nav-drop-below {
    box-shadow: inset 0 -2px 0 0 var(--primary-color, #10b981);
}
/* Auf Touch-Geräten kein natives Drag (sonst hakt Scrollen) */
@media (hover: none) and (pointer: coarse) {
    .nav-item[draggable="true"] { cursor: pointer; }
}

/* ============================================================
   BOARD PAPIERKORB (v1.28)
   ============================================================ */
.board-trash-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}
/* v1.28.8: alte Board-Drop-Zone entfernt — ersetzt durch schwebenden Papierkorb */
.board-trash-toggle { white-space: nowrap; }
.board-trash-panel {
    margin-top: 1rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.6rem;
    padding: 0.75rem;
    background: var(--gray-50, #f9fafb);
}
.board-trash-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}
.board-trash-list { display: flex; flex-direction: column; gap: 0.4rem; }
.board-trash-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.45rem;
    font-size: 0.85rem;
}
.board-trash-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-trash-item-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.btn-danger { background: #ef4444 !important; color: #fff !important; }

/* ============================================================
   NOTIFICATIONS (v1.28.6) — @-Mention-Glocke
   ============================================================ */
.notif-badge {
    position: absolute; top: -4px; right: -4px;
    background: #ef4444; color: #fff; font-size: 0.65rem; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.notif-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    width: 340px; max-height: 420px; overflow-y: auto;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.6rem; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 1000;
}
.notif-dropdown-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--gray-100, #f3f4f6);
    font-weight: 600; font-size: 0.9rem; position: sticky; top: 0; background: #fff;
}
.notif-list { display: flex; flex-direction: column; }
.notif-item {
    display: flex; justify-content: space-between; gap: 0.5rem;
    padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--gray-100, #f3f4f6);
    cursor: pointer; font-size: 0.85rem;
}
.notif-item:hover { background: var(--gray-50, #f9fafb); }
.notif-item.unread { background: #eff6ff; }
.notif-item.unread:hover { background: #dbeafe; }
.notif-actor { font-weight: 600; }
.notif-preview { color: var(--gray-500, #6b7280); margin-top: 0.2rem; font-size: 0.8rem; }
.notif-when { color: var(--gray-400, #9ca3af); font-size: 0.7rem; white-space: nowrap; }
.notif-empty { padding: 1.5rem; text-align: center; color: var(--gray-400, #9ca3af); font-size: 0.85rem; }

/* ============================================================
   TICKET-DETAIL & BOARD UX (v1.28.7) — Asana-inspiriert
   Lehren aus der Asana-Recherche:
   · Beschreibung braucht sichtbaren Rahmen + volle Breite (häufigste
     Nutzerkritik an Asana selbst: sie sieht aus wie ein Feld unter vielen)
   · Wichtigste Infos (Zuständig, Fällig) gehören nach oben
   · Kommentare größer/lesbarer, sie sind das Kommunikationsherz
   ============================================================ */

/* ---------- Beschreibung: das zentrale Feld, nicht ein Feld unter vielen ---------- */
#item-description {
    min-height: 160px;
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 0.85rem 1rem;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 0 0 0.5rem 0.5rem;
    background: #fff;
    resize: vertical;
}
#item-description:focus {
    border-color: var(--primary-color, #10b981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.10);
}
/* Toolbar sitzt bündig auf dem Feld → wirkt als ein Block */
#desc-toolbar {
    border: 1px solid var(--gray-300, #d1d5db);
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    background: var(--gray-50, #f9fafb);
    padding: 0.35rem 0.5rem;
    margin-bottom: 0;
}

/* ---------- Kommentare: größer, luftiger, lesbarer ---------- */
#comments-section { padding: 1rem 0 0.5rem; margin-top: 1rem; }
.comment-item {
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.5rem;
    border-radius: 0.6rem;
}
.comment-head { font-size: 0.78rem; margin-bottom: 0.35rem; }
.comment-body { font-size: 0.92rem; line-height: 1.6; }
#new-comment, .comment-input, #comment-input {
    min-height: 72px;
    font-size: 0.92rem;
    line-height: 1.55;
    padding: 0.7rem 0.85rem;
}

/* ---------- Zuständig-Feld hervorheben (Asana: immer oben sichtbar) ---------- */
#assignee-group label::before { content: "👤 "; }
#item-assignee { font-weight: 600; }

/* ============================================================
   BOARD AUF MOBILE (v1.28.7)
   Statt drei Spalten untereinander (endloses Scrollen) horizontal
   wischbare Spalten mit Snap — das übliche Mobile-Kanban-Muster.
   ============================================================ */
@media (max-width: 768px) {
    .board-columns {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        /* v1.28.27.1 (Audit UX#6): proximity statt mandatory — mandatory
           springt auf iOS nach kurzem Zug gern zur alten Spalte zurueck. */
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: 0.6rem;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
    }
    .board-columns::-webkit-scrollbar { display: none; }
    /* v2.92 (Live-Fund 21.09., Screenshot): diese Regel verlor seit v1.32 gegen
       `.board-columns > .board-col { flex:1 1 0 }` (höhere Spezifität) — auf dem Handy standen
       alle fünf Spalten nebeneinander, 80 Punkte schmal, ein Wort je Zeile. Jetzt gewinnt Mobile. */
    .board-columns > .board-col,
    #board-view .board-columns > .board-col {
        flex: 0 0 86%;          /* nächste Spalte lugt hervor → Wisch-Hinweis */
        min-width: 86%;
        scroll-snap-align: start;
        min-height: 60vh;
    }
    #board-view .board-columns > .board-col-collapsible.collapsed {
        flex: 0 0 auto; min-width: 0;
    }
    /* Reiter zum Springen zwischen den Spalten */
    .board-tabs { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.2rem 0 0.5rem; scrollbar-width: none; }
    .board-tabs::-webkit-scrollbar { display: none; }
    .board-tab {
        flex: 0 0 auto; border: 1px solid var(--gray-200, #e5e7eb); background: #fff; color: var(--gray-600, #4b5563);
        border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.82rem; font-weight: 600; white-space: nowrap;
        touch-action: manipulation;
    }
    .board-tab.active { background: var(--primary, #2F5D50); border-color: var(--primary, #2F5D50); color: #fff; }
    .board-tab .n { opacity: 0.75; font-weight: 500; margin-left: 0.25rem; }
    /* Lange Wörter (Domain-Namen, Bindestrich-Ketten) brechen sauber */
    .board-card .t { overflow-wrap: anywhere; hyphens: auto; }
    /* Verschiebe-Knöpfe mit Ziel-Beschriftung */
    .board-move-btn .board-move-lbl { display: inline; font-size: 0.78rem; margin: 0 0.25rem; }
    .board-col-head {
        position: sticky; top: 0; z-index: 2;
        background: #f3f4f6;
        font-size: 0.95rem;
        padding: 0.5rem 0.4rem;
        border-radius: 0.4rem;
    }
    /* Karten auf Mobile größer & besser tippbar */
    .board-card { padding: 0.75rem 0.8rem; }
    .board-card .t { font-size: 0.95rem; line-height: 1.35; }
    .board-card .m { font-size: 0.78rem; margin-top: 5px; }
    .assignee-badge { width: 24px; height: 24px; font-size: 0.7rem; }
    /* Papierkorb-Zeile nicht am unteren Rand verstecken */
    .board-trash-row { margin-top: 0.75rem; }
}

/* Modal auf Mobile: mehr Platz, weniger Rand */
@media (max-width: 768px) {
    #item-description { min-height: 130px; font-size: 1rem; }
    .comment-body { font-size: 0.95rem; }
    .form-row { flex-direction: column; gap: 0.5rem; }
}

/* ============================================================
   SCHWEBENDER PAPIERKORB (v1.28.8)
   Sichtbar nur während des Ziehens, immer im Blickfeld.
   ============================================================ */
.floating-trash {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 130px;
    height: 100px;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.97);
    border: 2px dashed var(--gray-300, #d1d5db);
    border-radius: 0.9rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    color: var(--gray-500, #6b7280);
    font-size: 0.72rem;
    text-align: center;
    line-height: 1.25;
    /* Standard: unsichtbar und nicht anklickbar */
    opacity: 0;
    transform: translateY(12px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease,
                border-color 0.15s ease, background 0.15s ease;
}
.floating-trash.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;   /* erst jetzt Drop-Ziel */
}
.floating-trash.over {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
    transform: translateY(0) scale(1.06);
}
.floating-trash-icon { font-size: 1.9rem; line-height: 1; }
.floating-trash.over .floating-trash-icon { transform: scale(1.1); }
.floating-trash-label { font-weight: 500; }

/* Auf Mobile kompakter und weiter oben (Daumen-Reichweite, über der Tab-Leiste) */
@media (max-width: 768px) {
    .floating-trash {
        right: 1rem;
        bottom: 5rem;
        width: 88px;
        height: 78px;
        font-size: 0.65rem;
    }
    .floating-trash-icon { font-size: 1.5rem; }
}

/* ============================================================
   MARKDOWN IN MEETINGS (v1.28.15)
   Kernaussagen und Zusammenfassung kommen als Markdown von der KI.
   Vorher wurde der Rohtext angezeigt ("###", "**Key points:**").
   ============================================================ */
.md-body {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--gray-700, #374151);
}
.md-body h2,
.md-body h3,
.md-body h4 {
    margin: 1rem 0 0.4rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--gray-900, #111827);
}
.md-body h2 { font-size: 1.05rem; }
.md-body h3 { font-size: 0.98rem; }
/* ### wird zu h4 — die häufigste Ebene in den KI-Ausgaben */
.md-body h4 {
    font-size: 0.92rem;
    text-transform: none;
    letter-spacing: 0.01em;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
/* Erste Überschrift ohne Abstand nach oben */
.md-body > h2:first-child,
.md-body > h3:first-child,
.md-body > h4:first-child { margin-top: 0; }

.md-body strong { font-weight: 700; color: var(--gray-900, #111827); }
.md-body em { font-style: italic; }

.md-body ul,
.md-body ol {
    margin: 0.35rem 0 0.75rem;
    padding-left: 1.15rem;
}
.md-body li {
    margin: 0.22rem 0;
    line-height: 1.55;
}
.md-body ul { list-style: disc; }
.md-body ol { list-style: decimal; }

.md-body code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.86em;
}
.md-body hr {
    border: none;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    margin: 0.9rem 0;
}
.md-body .md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.86rem;
}
.md-body .md-table th,
.md-body .md-table td {
    border: 1px solid var(--gray-200, #e5e7eb);
    padding: 0.35rem 0.5rem;
    text-align: left;
}
.md-body .md-table th {
    background: var(--gray-50, #f9fafb);
    font-weight: 600;
}

/* Die farbigen Boxen: Innenabstand etwas großzügiger, damit die
   gerenderten Überschriften nicht am Rand kleben */
#meeting-detail-keypoints.md-body,
#meeting-detail-summary.md-body {
    padding: 0.9rem 1.1rem;
}

/* ============================================================
   DRAG & DROP FÜR DOKUMENTE (v1.28.22)
   ============================================================ */
.docs-content {
    position: relative;
    transition: background 0.15s ease;
}
.docs-content.docs-dragover {
    background: rgba(5, 150, 105, 0.04);
    outline: 2px dashed var(--primary, #059669);
    outline-offset: -6px;
    border-radius: 0.5rem;
}
.docs-content.docs-dragover::after {
    content: "📥  Loslassen zum Hochladen";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary, #059669);
    background: rgba(255, 255, 255, 0.82);
    border-radius: 0.5rem;
    pointer-events: none;
    z-index: 5;
}
.docs-drop-hint {
    font-size: 0.78rem;
    color: var(--gray-400, #9ca3af);
    padding: 0.3rem 0 0.5rem;
    user-select: none;
}

/* v1.28.25: Mehrere Zuständige — Badge-Reihe auf den Karten.
   Die Farbe kommt als Inline-Stil pro Nutzer aus assigneeBadgeHtml(); der
   weiße Rand trennt die überlappenden Kreise optisch voneinander. */
.assignee-badge {
    box-shadow: 0 0 0 1.5px #fff;
    flex: 0 0 auto;
}
.assignee-badge + .assignee-badge { margin-left: -0.35rem; }
.assignee-badge-more {
    background: var(--gray-200, #e5e7eb) !important;
    color: var(--gray-600, #4b5563) !important;
    font-size: 0.62rem;
}
#item-assignee[multiple] {
    min-height: 5.2rem;
    padding: 0.3rem;
}
#item-assignee[multiple] option {
    padding: 0.28rem 0.4rem;
    border-radius: 0.25rem;
}

/* ============================================================
   MOBILE / TOUCH TIEFENPRÜFUNG (v1.28.27)
   ============================================================ */

/* -- Board: Verschiebe-Pfeile — NUR auf Touch-Geräten sichtbar.
      Auf dem Desktop gibt es Drag&Drop; dort wären sie Rauschen. */
.board-move-btns { display: none; }
.board-move-lbl { display: none; }
@media (hover: none) and (pointer: coarse) {
    .board-move-btns {
        display: flex;
        justify-content: space-between;
        margin-top: 0.45rem;
        gap: 0.4rem;
    }
    .board-move-btn {
        flex: 1;
        min-height: 34px;                 /* echtes Tippziel */
        border: 1px solid var(--gray-200, #e5e7eb);
        background: var(--gray-50, #f9fafb);
        border-radius: 0.4rem;
        font-size: 1.1rem;
        line-height: 1;
        color: var(--gray-600, #4b5563);
        touch-action: manipulation;
    }
    .board-move-btn:active { background: var(--gray-200, #e5e7eb); }
    .board-move-spacer { flex: 1; }
}

/* -- Nur-Hover-Aktionen: auf Touch gibt es kein Hover — Lösch-/Download-
      Knöpfe waren dort schlicht UNSICHTBAR. Immer anzeigen. */
@media (hover: none) {
    .project-card .project-actions,
    .docs-folder-item .docs-folder-actions { display: flex !important; }
    .docs-file-card .docs-file-delete,
    .docs-file-card .docs-file-download,
    .project-file-card .file-delete-btn { opacity: 1 !important; }
    .comment-del { color: var(--gray-500, #6b7280); }
}

/* -- iOS zoomt bei Fokus auf Felder unter 16px in die Seite hinein.
      Auf Mobile alle Eingaben auf 16px anheben. */
@media (max-width: 768px) {
    .form-control, input[type="text"], input[type="password"],
    input[type="email"], input[type="number"], input[type="date"],
    textarea, select {
        font-size: 16px !important;
    }

    /* -- Tippziele: Buttons/Zeilen auf mind. 40px Höhe */
    .btn-small { min-height: 38px; }
    button, .btn { touch-action: manipulation; }

    /* -- Glocken-Dropdown: 340px fest ragte aus kleinen Displays heraus */
    .notif-dropdown {
        position: fixed;
        left: 0.5rem; right: 0.5rem; top: 3.4rem;
        width: auto;
        max-height: 70vh;
    }

    /* ════════════════════════════════════════════════════════════════
       v1.66 — DIE EINZIGE Stelle, die die Höhe eines Modals bestimmt.

       Vorher taten das drei Blöcke aus drei Versionen. Die jüngste gewann
       mit `max-height: 92dvh` — und das ist bei offener Tastatur die
       falsche Größe: iOS meldet `dvh` NICHT kleiner, wenn die Tastatur
       erscheint. Der Kasten blieb 92 % der VOLLEN Höhe hoch, die Fußzeile
       mit "Speichern" lag dahinter.

       `--kb` trägt die Tastaturhöhe, gesetzt von der v1.62-Beobachtung des
       visualViewport (dieselbe, die den FAB ausblendet). Ohne Tastatur ist
       sie 0px, die Rechnung also unverändert.

       Genau EINE Ebene rechnet: der Container. Der Kasten füllt ihn per
       max-height, die Innenaufteilung übernimmt flex.
       ════════════════════════════════════════════════════════════════ */
    .modal {
        align-items: flex-end;
        /* Der Container schrumpft mit der Tastatur — nicht der Kasten. */
        bottom: var(--kb, 0px);
    }
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        border-radius: 0.8rem 0.8rem 0 0;
        margin: auto 0 0 0;               /* Bottom-Sheet-Gefühl */
    }
    /* Die Fußzeile bleibt sichtbar und rutscht nie unter den Rand. */
    .modal-footer {
        flex-shrink: 0;
        padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    }
    .modal-header { flex-shrink: 0; }

    /* -- Mehrfachauswahl Zuständige: auf Touch großzügiger */
    #item-assignee[multiple] { min-height: 7rem; }
    #item-assignee[multiple] option { padding: 0.5rem 0.5rem; }

    /* -- Tabellen/breite Inhalte: scrollen statt Layout sprengen */
    .view table { display: block; overflow-x: auto; }
}

/* Bewusst KEIN touch-action auf .board-card: pan-y wuerde horizontales
   Wischen blockieren, sobald der Finger auf einer Karte startet — und die
   Karten fuellen die Spalten fast vollstaendig. Der Browser darf hier beide
   Richtungen nativ behandeln. */


/* v1.28.27.1 (Audit P2#11): Der Ablage-Papierkorb erscheint nur bei
   dragstart — das Ereignis existiert auf Touch nicht. Er suggerierte dort
   eine Funktion, die nie ausloesbar war. Loeschen geht mobil ueber das
   Ticket selbst. */
@media (hover: none) and (pointer: coarse) {
    .floating-trash { display: none !important; }
}

/* ============================================================
   DEAL INTELLIGENCE (v1.29)
   ============================================================ */
.crm-tabs {
    display: flex; gap: 0.4rem; margin: 0.8rem 0;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    overflow-x: auto; scrollbar-width: none;
}
.crm-tabs::-webkit-scrollbar { display: none; }
.crm-tab {
    background: none; border: none; padding: 0.6rem 0.9rem;
    font-size: 0.9rem; font-weight: 600; color: var(--gray-500, #6b7280);
    border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; gap: 0.35rem; touch-action: manipulation;
}
.crm-tab.active { color: var(--primary, #059669); border-bottom-color: var(--primary, #059669); }
.crm-tab-count {
    background: var(--gray-100, #f3f4f6); color: var(--gray-600, #4b5563);
    border-radius: 999px; padding: 0.05rem 0.42rem; font-size: 0.72rem;
}
.crm-tab.active .crm-tab-count { background: #d1fae5; color: #047857; }

.crm-toolbar { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.crm-list { display: flex; flex-direction: column; gap: 0.5rem; }

.crm-card {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.55rem; padding: 0.75rem 0.9rem; cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.crm-card:hover { border-color: var(--primary, #059669); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.crm-card-main { min-width: 0; flex: 1; }
.crm-card-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
.crm-card-sub {
    display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center;
    font-size: 0.78rem; color: var(--gray-500, #6b7280);
}
.crm-card-summary {
    font-size: 0.8rem; color: var(--gray-600, #4b5563); margin-top: 0.35rem;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.crm-card-meta {
    display: flex; gap: 0.6rem; font-size: 0.8rem;
    color: var(--gray-500, #6b7280); white-space: nowrap;
}
.crm-chip {
    background: var(--gray-100, #f3f4f6); border-radius: 0.3rem;
    padding: 0.1rem 0.4rem; font-size: 0.72rem; color: var(--gray-600, #4b5563);
}
.crm-chip-stage { background: #d1fae5; color: #047857; font-weight: 600; }
.crm-empty { padding: 2rem 1rem; text-align: center; color: var(--gray-400, #9ca3af); font-size: 0.88rem; }
.crm-empty-small { color: var(--gray-400, #9ca3af); font-size: 0.8rem; padding: 0.3rem 0; }

.crm-summary {
    background: #f8faf9; border-left: 3px solid var(--primary, #059669);
    padding: 0.6rem 0.8rem; border-radius: 0.35rem; font-size: 0.87rem;
    margin-bottom: 0.8rem; line-height: 1.5;
}
.crm-detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.35rem 1rem; margin-bottom: 0.8rem;
}
.crm-detail-row {
    display: flex; justify-content: space-between; gap: 0.6rem;
    font-size: 0.84rem; padding: 0.28rem 0;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.crm-detail-row span { color: var(--gray-500, #6b7280); }
.crm-detail-section { margin-top: 1rem; }
.crm-detail-section h4 {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--gray-400, #9ca3af); margin-bottom: 0.4rem;
}
.crm-linked {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem;
    background: var(--gray-50, #f9fafb); border-radius: 0.4rem;
    margin-bottom: 0.3rem; font-size: 0.86rem; cursor: pointer;
}
.crm-linked:hover { background: var(--gray-100, #f3f4f6); }
/* v3.16.39 (UX-Audit F04): was sich nicht öffnen lässt, sieht nicht klickbar aus */
.crm-linked.crm-linked-static { cursor: default; }
.crm-linked.crm-linked-static:hover { background: var(--gray-50, #f9fafb); }
/* v3.16.39 (F01): »← Herkunft« über dem Titel des Datensatzes */
.crm-detail-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 0; flex: 1; }
.crm-detail-head h3 { max-width: 100%; overflow-wrap: anywhere; }
.crm-detail-back {
    background: none; border: none; padding: 0.15rem 0; min-height: 32px; cursor: pointer;
    color: var(--gray-600, #4b5563); font-size: 0.82rem; font-weight: 500; text-align: left;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-detail-back:hover { text-decoration: underline; }
.crm-unlink {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--gray-400, #9ca3af); font-size: 0.9rem; padding: 0.2rem 0.4rem;
}
.crm-unlink:hover { color: #dc2626; }
.crm-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.crm-detail-actions {
    display: flex; gap: 0.5rem; margin-top: 1.2rem;
    padding-top: 0.8rem; border-top: 1px solid var(--gray-100, #f3f4f6);
}
.crm-dropzone {
    border: 2px dashed var(--gray-300, #d1d5db); border-radius: 0.55rem;
    padding: 1.6rem 1rem; text-align: center; cursor: pointer;
    color: var(--gray-500, #6b7280); font-size: 0.88rem;
}
.crm-dropzone:hover { border-color: var(--primary, #059669); }

@media (max-width: 768px) {
    .crm-card { flex-direction: column; gap: 0.4rem; }
    .crm-card-meta { align-self: flex-start; }
    .crm-detail-grid { grid-template-columns: 1fr; }
}

/* Verknüpfungs-Picker + Inline-Verknüpfungen (v1.29.1) */
.crm-link-context {
    font-size: 0.83rem; color: var(--gray-600, #4b5563);
    background: var(--gray-50, #f9fafb); padding: 0.5rem 0.7rem;
    border-radius: 0.4rem; margin-bottom: 0.6rem;
}
.crm-link-filters { display: flex; gap: 0.35rem; margin: 0.6rem 0; flex-wrap: wrap; }
.crm-link-filter {
    background: var(--gray-100, #f3f4f6); border: none; border-radius: 999px;
    padding: 0.28rem 0.7rem; font-size: 0.78rem; cursor: pointer;
    color: var(--gray-600, #4b5563); touch-action: manipulation;
}
.crm-link-filter.active { background: #d1fae5; color: #047857; font-weight: 600; }
.crm-link-results { max-height: 340px; overflow-y: auto; }
.crm-link-result {
    display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.7rem;
    border-radius: 0.45rem; cursor: pointer; font-size: 0.9rem;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.crm-link-result:hover { background: var(--gray-50, #f9fafb); }
.crm-link-ico { font-size: 1rem; }
.crm-link-label { font-weight: 500; }
.crm-link-sub { color: var(--gray-400, #9ca3af); font-size: 0.78rem; margin-left: auto; }

.crm-inline {
    margin: 0.6rem 0; padding: 0.6rem 0.7rem;
    background: #f8faf9; border: 1px solid #d1fae5; border-radius: 0.5rem;
}
.crm-inline-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.45rem;
    font-size: 0.78rem; font-weight: 600; color: #047857;
}
.crm-inline-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 999px; padding: 0.22rem 0.5rem 0.22rem 0.6rem;
    font-size: 0.8rem; margin: 0 0.3rem 0.3rem 0;
}
.crm-inline-chip button {
    background: none; border: none; cursor: pointer; padding: 0 0.1rem;
    color: var(--gray-400, #9ca3af); font-size: 0.8rem; line-height: 1;
}
.crm-inline-chip button:hover { color: #dc2626; }

/* Relationship 360 Timeline (v1.29.3) */
.crm-timeline { position: relative; padding-left: 0.2rem; }
.crm-tl-item { display: flex; gap: 0.7rem; position: relative; padding-bottom: 0.9rem; }
.crm-tl-item:not(:last-child)::before {
    content: ''; position: absolute; left: 0.85rem; top: 1.7rem; bottom: 0;
    width: 1px; background: var(--gray-200, #e5e7eb);
}
.crm-tl-dot {
    flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--gray-50, #f9fafb); border: 1px solid var(--gray-200, #e5e7eb);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; z-index: 1;
}
.crm-tl-meeting .crm-tl-dot { background: #ede9fe; border-color: #ddd6fe; }
.crm-tl-item .crm-tl-dot { }
.crm-tl-note .crm-tl-dot { background: #fef3c7; border-color: #fde68a; }
.crm-tl-done .crm-tl-dot { background: #d1fae5; border-color: #a7f3d0; }
.crm-tl-body { min-width: 0; padding-top: 0.12rem; }
.crm-tl-title { font-size: 0.88rem; font-weight: 500; line-height: 1.35; }
.crm-tl-done .crm-tl-title { color: var(--gray-500, #6b7280); }
.crm-tl-meta {
    display: flex; gap: 0.3rem; flex-wrap: wrap;
    font-size: 0.74rem; color: var(--gray-400, #9ca3af); margin-top: 0.12rem;
}
.crm-tl-via { font-style: italic; }
/* v3.16.65: Kontakteintrag anspringen (verknüpfte Aktivität) und aufklappen */
.crm-tl-item[onclick] { cursor: pointer; }
.crm-tl-interaction .crm-tl-dot { background: #e0f2fe; border-color: #bae6fd; }
.crm-tl-voll {
    font-size: 0.8rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
    color: var(--gray-600, #4b5563); margin-top: 0.35rem;
}
.crm-tl-item > .crm-tl-body { border-radius: 6px; transition: background-color 0.5s, box-shadow 0.5s; }
.crm-tl-hl > .crm-tl-body { background-color: rgba(250, 204, 21, 0.22); box-shadow: 0 0 0 5px rgba(250, 204, 21, 0.22); }

/* v1.29.4: bereits verknüpfte Treffer im Picker */
.crm-link-result.crm-link-done { opacity: 0.55; cursor: default; }
.crm-link-result.crm-link-done:hover { background: transparent; }
.crm-link-done .crm-link-sub { color: #059669; font-weight: 600; }

/* Meeting Auto-Matching (v1.30) */
.crm-suggest {
    margin: 0.6rem 0; padding: 0.65rem 0.75rem;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.5rem;
}
.crm-suggest-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.5rem;
    font-size: 0.8rem; font-weight: 600; color: #92400e;
}
.crm-suggest-all { width: 100%; margin-bottom: 0.5rem; }
.crm-sugg {
    display: flex; align-items: center; gap: 0.5rem;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.4rem; padding: 0.45rem 0.6rem; margin-bottom: 0.35rem;
}
.crm-sugg-strong { border-color: #fbbf24; background: #fffdf5; }
.crm-sugg-main { flex: 1; min-width: 0; }
.crm-sugg-name { font-size: 0.87rem; font-weight: 500; }
.crm-sugg-why { font-size: 0.72rem; color: var(--gray-500, #6b7280); margin-top: 0.1rem; }
.crm-sugg-score {
    font-size: 0.75rem; font-weight: 700; color: var(--gray-500, #6b7280);
    white-space: nowrap;
}
.crm-sugg-strong .crm-sugg-score { color: #b45309; }
.crm-sugg-btn {
    border: 1px solid var(--gray-200, #e5e7eb); background: #fff;
    border-radius: 0.35rem; width: 30px; height: 30px; cursor: pointer;
    font-size: 0.85rem; flex: 0 0 auto; touch-action: manipulation;
}
.crm-sugg-yes { color: #059669; }
.crm-sugg-yes:active { background: #d1fae5; }
.crm-sugg-no { color: var(--gray-400, #9ca3af); }
.crm-sugg-no:active { background: var(--gray-100, #f3f4f6); }

/* Meeting ↔ Kalender (v1.31) */
.crm-cal {
    margin: 0.6rem 0; padding: 0.65rem 0.75rem;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 0.5rem;
}
.crm-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.5rem;
    font-size: 0.8rem; font-weight: 600; color: #1d4ed8;
}
.crm-cal-title { font-size: 0.88rem; font-weight: 600; }
.crm-cal-sub { font-size: 0.75rem; color: var(--gray-500, #6b7280); }
.crm-cal-linked { margin-bottom: 0.5rem; }
.crm-cal-part {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; padding: 0.25rem 0.4rem;
    background: #fff; border-radius: 0.3rem; margin-bottom: 0.2rem;
}
.crm-cal-intern { opacity: 0.55; }
.crm-cal-mail { color: var(--gray-400, #9ca3af); font-size: 0.72rem; margin-left: auto; }
.crm-cal-status { font-size: 0.75rem; width: 1rem; text-align: center; }
.crm-cal-cand {
    display: flex; align-items: center; gap: 0.5rem;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.4rem; padding: 0.45rem 0.6rem; margin-bottom: 0.35rem;
}
.crm-cal-cand-main { flex: 1; min-width: 0; }

/* ============================================================
   BOARDS & SPRINTS (v1.32)
   ============================================================ */
.board-bar {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.6rem; flex-wrap: wrap;
}
.board-select { max-width: 260px; font-weight: 600; }
.board-bar-spacer { flex: 1; }

.board-sprint-bar {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 0.5rem;
    padding: 0.5rem 0.75rem; margin-bottom: 0.8rem; font-size: 0.85rem;
}
.board-sprint-info { flex: 1; min-width: 0; color: #1e3a8a; }
.board-sprint-goal { color: var(--gray-500, #6b7280); font-style: italic; }
.board-sprint-none { flex: 1; color: var(--gray-500, #6b7280); font-size: 0.83rem; }

/* Ein-/ausklappbare Spalten (Backlog, Archiv) */
.board-col-collapsible .board-col-head { cursor: pointer; user-select: none; }
.board-col-toggle {
    display: inline-block; transition: transform 0.15s ease;
    color: var(--gray-400, #9ca3af); font-size: 0.7rem;
}
.board-col-collapsible:not(.collapsed) .board-col-toggle { transform: rotate(90deg); }
.board-col-collapsible.collapsed .board-col-body { display: none; }
.board-col-collapsible.collapsed {
    /* Eingeklappt: nur so breit wie die Kopfzeile — der Rest gehört den
       offenen Spalten. */
    flex: 0 0 auto !important; min-width: 0; min-height: 0;
    background: var(--gray-50, #f9fafb);
    align-self: stretch;
}
.board-col-collapsible.collapsed .board-col-head {
    /* Senkrecht, damit die Spalte wirklich schmal wird statt nur leer. */
    writing-mode: vertical-rl; text-orientation: mixed;
    padding: 0.5rem 0.25rem; gap: 0.4rem; justify-content: flex-start;
}
.board-col-collapsible.collapsed .board-col-head { white-space: nowrap; }

.board-col-over {
    background: rgba(5, 150, 105, 0.06);
    outline: 2px dashed var(--primary, #059669); outline-offset: -4px;
}
.board-card.dragging { opacity: 0.45; }
.board-card-archived { opacity: 0.7; background: var(--gray-50, #f9fafb); }
.board-archive-all {
    margin-left: auto; background: none; border: none; cursor: pointer;
    font-size: 0.85rem; opacity: 0.6; padding: 0 0.2rem;
}
.board-archive-all:hover { opacity: 1; }

/* Auf dem Handy klappen Backlog und Archiv standardmäßig zu und
   nehmen als geschlossene Spalte kaum Platz weg. */
@media (max-width: 768px) {
    .board-bar { gap: 0.35rem; }
    .board-select { max-width: 55%; }
    .board-col-collapsible.collapsed { flex: 0 0 auto !important; }
    .board-sprint-bar { font-size: 0.8rem; padding: 0.45rem 0.6rem; }
}

/* v1.32.1: Hinweis auf fällige Archivierung */
.board-archive-due {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    width: 100%; margin-top: 0.4rem; padding-top: 0.4rem;
    border-top: 1px solid #bfdbfe;
    font-size: 0.8rem; color: var(--gray-600, #4b5563);
}

/* Deal Intelligence — Überblick (v1.33) */
.crm-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem; margin-bottom: 1.2rem;
}
.crm-kpi {
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.55rem; padding: 0.75rem 0.9rem;
}
.crm-kpi-val { font-size: 1.35rem; font-weight: 700; color: #064e3b; line-height: 1.15; }
.crm-kpi-lbl {
    font-size: 0.74rem; color: var(--gray-500, #6b7280);
    text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.2rem;
}
.crm-pipe-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.35rem 0.4rem; border-radius: 0.35rem; cursor: pointer;
    font-size: 0.84rem;
}
.crm-pipe-row:hover { background: var(--gray-50, #f9fafb); }
.crm-pipe-lbl { flex: 0 0 10rem; color: var(--gray-600, #4b5563); }
.crm-pipe-bar-wrap {
    flex: 1; height: 0.55rem; background: var(--gray-100, #f3f4f6);
    border-radius: 999px; overflow: hidden; min-width: 40px;
}
.crm-pipe-bar {
    height: 100%; background: linear-gradient(90deg, #059669, #34d399);
    border-radius: 999px; transition: width 0.3s ease;
}
.crm-pipe-cnt {
    flex: 0 0 auto; font-size: 0.78rem; color: var(--gray-600, #4b5563);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
    .crm-kpi-val { font-size: 1.1rem; }
    .crm-pipe-lbl { flex: 0 0 7rem; font-size: 0.78rem; }
    .crm-pipe-cnt { font-size: 0.72rem; }
}

/* Dubletten (v1.34) */
.crm-dup-group {
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.5rem; padding: 0.7rem 0.85rem; margin-bottom: 0.7rem;
}
.crm-dup-head {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.6rem; flex-wrap: wrap;
}
.crm-dup-strong { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.crm-dup-row { display: flex; align-items: center; gap: 0.6rem; }
.crm-dup-main { flex: 1; min-width: 0; cursor: pointer; font-size: 0.87rem; }
.crm-dup-main:hover { text-decoration: underline; }
.crm-dup-sep {
    text-align: center; font-size: 0.72rem; color: var(--gray-400, #9ca3af);
    margin: 0.35rem 0; text-transform: uppercase; letter-spacing: 0.05em;
}

/* Kontakt-Log (v1.35) */
.ia-kinds { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.ia-kind {
    border: 1px solid var(--gray-200, #e5e7eb); background: #fff;
    border-radius: 999px; padding: 0.45rem 0.8rem; cursor: pointer;
    font-size: 0.85rem; touch-action: manipulation;
}
.ia-kind.active {
    background: var(--primary, #059669); color: #fff;
    border-color: var(--primary, #059669);
}
.ia-card {
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-left: 3px solid #059669;
    border-radius: 0.5rem; padding: 0.7rem 0.85rem; margin-bottom: 0.6rem;
}
.ia-top { display: flex; align-items: center; gap: 0.5rem; }
.ia-icon { font-size: 1rem; }
.ia-title { font-weight: 600; font-size: 0.9rem; flex: 1; min-width: 0; }
.ia-points {
    font-size: 0.85rem; color: var(--gray-600, #4b5563);
    margin-top: 0.4rem; white-space: pre-wrap; line-height: 1.45;
}
.ia-links { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.5rem; }
.ia-links .crm-chip { cursor: pointer; }
.ia-detail-bar { margin-bottom: 0.8rem; }
@media (max-width: 768px) {
    .ia-kind { padding: 0.5rem 0.7rem; font-size: 0.8rem; }
    .ia-kinds { gap: 0.3rem; }
}

/* ============================================================
   BOARD-ÜBERARBEITUNG (v1.36)

   Rückmeldung aus der Praxis: Das Board war nach dem Umbau
   unübersichtlich. Ursachen und Antworten:

   · Fünf Spalten auf einmal → Backlog und Archiv erscheinen nur,
     wenn sie gebraucht werden (siehe has_sprint / archived_total).
   · Karten zu gedrängt → mehr Luft, klarere Hierarchie.
   · Am Desktop fehlten die Aktionen ganz (Pfeile waren nur auf
     Touch sichtbar) → beim Überfahren erscheinen sie jetzt.
   ============================================================ */

/* Spalten atmen wieder */
#board-view .board-columns { gap: 0.75rem; align-items: flex-start; }
#board-view .board-col {
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.6rem;
    padding: 0.5rem;
    min-width: 0;
}
#board-view .board-col-head {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--gray-500, #6b7280);
    padding: 0.15rem 0.25rem 0.5rem;
    display: flex; align-items: center; gap: 0.4rem;
}
#board-view .board-count {
    background: var(--gray-200, #e5e7eb); color: var(--gray-600, #4b5563);
    border-radius: 999px; padding: 0.05rem 0.4rem;
    font-size: 0.7rem; font-weight: 700;
}
#board-view .board-col-body { min-height: 60px; }

/* Karten: mehr Luft, ruhigere Typografie */
#board-view .board-card {
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.45rem;
    border-radius: 0.55rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}
#board-view .board-card:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.09);
    border-color: var(--gray-300, #d1d5db);
}
#board-view .board-card .t {
    font-size: 0.86rem; font-weight: 600; line-height: 1.35;
    color: #111827;
}
#board-view .board-card .m {
    margin-top: 0.35rem; gap: 0.3rem; font-size: 0.7rem;
}

/* Doing hervorheben — dort liegt die laufende Arbeit */
#board-view .board-col[data-board-status="doing"] {
    background: #eff6ff; border-color: #bfdbfe;
}
#board-view .board-col[data-board-status="doing"] .board-card {
    border-left: 3px solid #3b82f6;
}
#board-view .board-col[data-board-status="completed"] .board-card .t {
    color: var(--gray-500, #6b7280);
}

/* Aktionen am Desktop beim Überfahren — vorher gar nicht erreichbar */
@media (hover: hover) and (pointer: fine) {
    #board-view .board-move-btns {
        display: flex; justify-content: flex-end; gap: 0.25rem;
        margin-top: 0.4rem; opacity: 0;
        transition: opacity 0.12s ease;
    }
    #board-view .board-card:hover .board-move-btns { opacity: 1; }
    #board-view .board-move-btn {
        border: 1px solid var(--gray-200, #e5e7eb);
        background: #fff; border-radius: 0.35rem;
        min-width: 26px; height: 24px; cursor: pointer;
        font-size: 0.8rem; line-height: 1; color: var(--gray-500, #6b7280);
    }
    #board-view .board-move-btn:hover {
        background: var(--gray-100, #f3f4f6); color: #111827;
    }
    #board-view .board-move-spacer { display: none; }
}

/* Ablageziel deutlich markieren */
#board-view .board-col-over {
    background: #ecfdf5 !important;
    outline: 2px dashed var(--primary, #059669); outline-offset: -3px;
}

/* Zugeklappte Spalten: schmaler Streifen statt halber Spalte */
#board-view .board-col-collapsible.collapsed {
    flex: 0 0 auto !important; width: auto; padding: 0.5rem 0.4rem;
    background: transparent; border-style: dashed;
}
#board-view .board-col-collapsible.collapsed .board-col-head {
    padding-bottom: 0; font-size: 0.72rem;
}

.board-sprint-bar-quiet {
    background: transparent; border: none; padding: 0 0 0.4rem;
}
.board-sprint-bar-quiet .board-sprint-none {
    font-size: 0.76rem; color: var(--gray-400, #9ca3af);
}

@media (max-width: 768px) {
    #board-view .board-columns { gap: 0.5rem; }
    #board-view .board-card { padding: 0.7rem 0.75rem; }
    #board-view .board-card .t { font-size: 0.88rem; }
}

/* Board-Verbesserungen nach Asana-Abgleich (v1.37) */
.board-select-small {
    max-width: 170px; font-size: 0.8rem; padding: 0.3rem 0.5rem;
}

/* Fälligkeit: das wichtigste Signal auf einem Kanban */
.board-due {
    font-weight: 600; border-radius: 0.25rem; padding: 0.05rem 0.3rem;
    font-size: 0.68rem;
}
.board-due-over { background: #fee2e2; color: #b91c1c; }
.board-due-today { background: #fef3c7; color: #92400e; }
.board-due-soon { background: #e0e7ff; color: #3730a3; }

/* Schnellanlage in der Spalte */
.board-add {
    width: 100%; border: 1px dashed var(--gray-300, #d1d5db);
    background: transparent; color: var(--gray-500, #6b7280);
    border-radius: 0.45rem; padding: 0.4rem; cursor: pointer;
    font-size: 0.78rem; margin-top: 0.2rem;
    touch-action: manipulation;
}
.board-add:hover {
    background: #fff; border-color: var(--primary, #059669);
    color: var(--primary, #059669);
}
.board-add-input {
    width: 100%; margin-bottom: 0.45rem; font-size: 0.85rem;
    padding: 0.55rem 0.6rem; border-radius: 0.5rem;
    border: 1px solid var(--primary, #059669);
}
@media (max-width: 768px) {
    .board-select-small { max-width: 45%; font-size: 0.75rem; }
    .board-add { padding: 0.6rem; font-size: 0.82rem; }
}

/* Marktverzeichnis (v1.41) */
.mkt-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.7rem;
    font-size: 0.85rem; font-weight: 600; color: var(--gray-600, #4b5563);
}
.mkt-filters {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem;
}
.mkt-filters .form-control { flex: 1; min-width: 150px; font-size: 0.84rem; }
.mkt-card {
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.5rem; padding: 0.7rem 0.85rem; margin-bottom: 0.55rem;
}
.mkt-in-crm { border-left: 3px solid var(--primary, #059669); }
.mkt-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mkt-name { font-weight: 600; font-size: 0.9rem; }
.mkt-sub { font-size: 0.78rem; color: var(--gray-500, #6b7280); margin-top: 0.15rem; }
.mkt-roles { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.4rem; }
.mkt-role {
    font-size: 0.68rem; background: var(--gray-100, #f3f4f6);
    color: var(--gray-600, #4b5563); border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
}
.mkt-contact { font-size: 0.75rem; color: var(--gray-500, #6b7280); margin-top: 0.35rem; }
.mkt-note {
    font-size: 0.78rem; color: #92400e; background: #fffbeb;
    border-radius: 0.3rem; padding: 0.25rem 0.45rem; margin-top: 0.4rem;
}
.mkt-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.55rem; }
@media (max-width: 768px) {
    .mkt-filters .form-control { min-width: 100%; }
    .mkt-name { font-size: 0.87rem; }
}

/* Hinweis aus dem Marktverzeichnis beim Anlegen (v1.41.1) */
.mkt-hint {
    margin-top: 0.4rem; padding: 0.55rem 0.7rem;
    background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 0.45rem; font-size: 0.82rem;
}

/* Marktverzeichnis — Herkunft und Snapshot-Zustand (v1.41.2) */
.mkt-gone {
    font-size: 0.75rem; color: #92400e; background: #fffbeb;
    border-radius: 0.3rem; padding: 0.2rem 0.4rem; margin-top: 0.35rem;
    display: inline-block;
}
.mkt-src-tag { color: var(--gray-400, #9ca3af); font-size: 0.7rem; }

/* Marktverzeichnis — Segmentierung (v1.43) */
.mkt-segments {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.5rem; margin-bottom: 1rem;
}
.mkt-seg {
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.5rem; padding: 0.6rem 0.7rem; cursor: pointer;
    text-align: left; font: inherit;
}
.mkt-seg:hover { border-color: var(--primary, #059669); background: #f0fdf4; }
.mkt-seg-count { font-size: 1.3rem; font-weight: 700; color: #064e3b; line-height: 1.1; }
.mkt-seg-label { font-size: 0.76rem; color: var(--gray-600, #4b5563); margin-top: 0.15rem; }
.mkt-seg-new { font-size: 0.68rem; color: var(--gray-400, #9ca3af); margin-top: 0.2rem; }
.mkt-timeline {
    font-size: 0.72rem; color: var(--gray-500, #6b7280); margin-top: 0.3rem;
}
.mkt-timeline.mkt-fresh { color: #047857; font-weight: 600; }
@media (max-width: 768px) {
    .mkt-segments { grid-template-columns: repeat(2, 1fr); }
    .mkt-seg-count { font-size: 1.1rem; }
}

/* ============================================================
   MEETING-FENSTER — Scroll-Falle behoben (v1.44)

   Rückmeldung aus der Praxis: Auf dem Handy kam man im
   Meeting-Detail nicht mehr nach oben — Titel und X-Knopf
   waren unerreichbar.

   Ursache: ZWEI verschachtelte Scrollbereiche.
     außen  padding:2rem + overflow:auto
     innen  max-height:90vh + overflow:auto

   90vh rechnet gegen die VOLLE Fensterhöhe. Blendet der mobile
   Browser seine Adressleiste ein, schrumpft der sichtbare
   Bereich — der innere Kasten ist dann höher als das Fenster.
   Der Finger scrollt den inneren Bereich, der äußere bleibt
   stehen, und der Kopf liegt oberhalb des Sichtbaren fest.

   Lösung wie bei den übrigen Fenstern der App:
     · dvh statt vh (berücksichtigt die Adressleiste)
     · nur EIN Scrollbereich (der Körper)
     · Kopf und Fußzeile bleiben stehen
   ============================================================ */
.mtg-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;              /* NICHT auto — sonst zwei Scroller */
    overscroll-behavior: none;
}
.mtg-modal.active { display: flex !important; }

.mtg-modal-box {
    background: #fff;
    border-radius: 0.75rem;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    max-height: 90dvh;             /* dynamisch: respektiert die Adressleiste */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Kopf bleibt stehen — Titel und Schließen immer erreichbar */
.mtg-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    flex-shrink: 0;
}

/* Nur hier wird gescrollt */
.mtg-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;  /* kein Durchscrollen auf die Seite */
    padding: 0 1.5rem 1.25rem;
    min-height: 0;
}

@media (max-width: 768px) {
    /* v1.44.7: Geometrie-Falle behoben.

       Drei Zeilen, die einzeln richtig aussahen:
         · .mtg-modal ist position:fixed (= aktueller Viewport) mit
           align-items:center und overflow:hidden
         · .mtg-modal-box hatte height:100dvh — eine Viewport-EINHEIT
         · Zentrierung schneidet jede Differenz SYMMETRISCH ab

       Auf iOS ist dvh in genau dieser Lage veraltet: Die Seite ist per
       body.modal-open eingefroren, kann also nicht scrollen — und ohne
       Seiten-Scroll aktualisiert WebKit den dynamischen Wert nicht
       zuverlässig, wenn die Adressleiste zurückkommt. Öffnet man das
       Meeting nach dem Scrollen der Liste, ist die Box höher als ihr
       Container. Die Zentrierung schnitt davon die Hälfte OBEN ab —
       genau dort, wo seit v1.44.2 Kernaussagen und Zusammenfassung
       beginnen. scrollTop war bereits 0, weiter nach oben gab es nichts:
       Das Ziehen erzeugte nur den Gummiband-Overscroll, der beim
       Loslassen exakt um den Überstand zurückfederte.

       Lösung: Die Box hängt an ihrem CONTAINER (100%), nicht an einer
       Viewport-Einheit. 100% eines fixed-Elements ist per Definition das
       gerade Sichtbare — veraltete Werte sind strukturell unmöglich.
       Zusätzlich keine Zentrierung mehr; entstünde je wieder eine
       Differenz, gehört sie nach unten, wo die safe-area-Reserve sitzt.
       (Der generische .modal hat mobil längst align-items:flex-end —
       diese Zeile fehlte nur dem Meeting-Fenster.) */
    /* v1.65 (Chat): flex-start statt stretch.
       Bei `stretch` bekommt die Box die volle Containerhöhe zugewiesen —
       das ist meist dasselbe, aber sobald ein Kind eine Mindesthöhe
       erzwingt, wächst sie darüber hinaus und wird beidseitig
       abgeschnitten. `flex-start` verankert sie oben: Was unten nicht
       passt, ist über den Body-Scroller erreichbar statt unsichtbar. */
    .mtg-modal {
        padding: 0;
        align-items: flex-start;
    }
    .mtg-modal-box {
        /* Die Höhe kommt vom fixed-Container mit inset:0 — der misst
           IMMER den aktuellen Viewport. Eine eigene dvh-Rechnung in der
           Box wäre die zweite Wahrheit, die bei zurückkehrender
           Safari-Leiste veraltet (v1.44). */
        height: 100%;
        max-height: 100%;
        border-radius: 0;          /* Vollbild — kein verschwendeter Rand */
    }
    /* Safe-Area am BODY, nicht am Container: Sonst verkleinert sie die
       Höhe, aus der die Innenaufteilung rechnet. */
    .mtg-modal-body {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
    .mtg-modal-head { padding: 1rem 1rem 0.6rem; }
    .mtg-modal-body { padding: 0 1rem 1.5rem; }
    /* Platz für die Browserleiste am unteren Rand */
    .mtg-modal-body > *:last-child { margin-bottom: env(safe-area-inset-bottom, 0); }
}


/* v1.44.2 (Audit): Transkript auf dem Handy mitwachsen lassen.

   Das Textfeld ist ein eigener Scrollbereich IM Scrollbereich — dieselbe
   Konstellation, die den ursprünglichen Fehler verursacht hat. Auf Touch ist
   das Übergeben am Ende des inneren Bereichs unzuverlässig. Auf kleinen
   Displays wächst das Feld deshalb mit dem Inhalt, und es bleibt genau ein
   vertikaler Scrollbereich: .mtg-modal-body. */
@media (max-width: 768px) {
    /* v1.47: Die Regel für das Transkript steht jetzt AN GENAU EINER
       Stelle weiter unten. Vorher gab es zwei widersprüchliche Blöcke im
       selben Stylesheet — der spätere gewann und schaltete den inneren
       Scroller wieder ein, vor dem der Kommentar hier warnte. */
}

/* Gemeinsamer Vertrag: was scrollt, sagt es selbst */
[data-modal-scroll] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* Meeting-Fenster: aufklappbares Transkript, feste Fußzeile, stabile
   Leseposition (v1.44.6) */
.mtg-toggle {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600; color: #111827;
    display: inline-flex; align-items: center; gap: 0.4rem;
    touch-action: manipulation;
}
.mtg-toggle:hover { color: var(--primary, #059669); }
.mtg-toggle-caret { font-size: 0.75rem; color: var(--gray-400, #9ca3af); }
.mtg-toggle-hint {
    font-size: 0.72rem; font-weight: 400; color: var(--gray-400, #9ca3af);
}
.mtg-transcript-preview {
    font-size: 0.82rem; color: var(--gray-500, #6b7280);
    line-height: 1.5; padding: 0.6rem 0.75rem;
    background: var(--gray-50, #f9fafb);
    border-radius: 0.45rem; border-left: 3px solid var(--gray-200, #e5e7eb);
    white-space: pre-wrap;
}

/* Fußzeile bleibt stehen — Speichern ohne Scrollen erreichbar */
.mtg-modal-foot {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    background: #fff; flex-shrink: 0; flex-wrap: wrap;
}

/* Nachladende Blöcke dürfen die Leseposition nicht verschieben.
   Kalender-Abgleich und CRM-Vorschläge treffen zeitversetzt ein; standen sie
   über der Zusammenfassung, schob Scroll-Anchoring sie beim Loslassen weg. */
.mtg-modal-body { overflow-anchor: none; }
#meeting-crm-links, #meeting-calendar, #meeting-crm-suggest {
    overflow-anchor: none;
}

@media (max-width: 768px) {
    .mtg-modal-foot {
        padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
        gap: 0.4rem;
    }
    .mtg-modal-foot .btn { flex: 1; min-height: 44px; }
    /* Das Textfeld scrollt wieder selbst — es ist aber zugeklappt und
       damit kein Hindernis mehr. */
    /* v1.47 (Mobile-Audit P1): EINE Entscheidung, nicht zwei.

       Auf dem Handy wird das Transkript GELESEN, nicht bearbeitet. Ein
       Textfeld mit eigenem Scrollbereich innerhalb des ohnehin scrollenden
       Meeting-Fensters ist genau die Konstruktion, die den ursprünglichen
       Fehler verursacht hat: Der Finger bewegt den inneren Bereich, am Ende
       übernimmt der äußere nicht sauber, und die Textauswahl konkurriert mit
       der Wischgeste.

       Deshalb: Anzeige als normaler Text (kein Scroller), Bearbeiten über
       einen ausdrücklichen Knopf in einem eigenen Fenster. */
    #meeting-detail-transcript { display: none; }
    .mtg-transcript-read {
        font-size: 0.85rem; line-height: 1.55; white-space: pre-wrap;
        word-break: break-word; color: var(--gray-700, #374151);
        padding: 0.6rem 0.75rem; background: var(--gray-50, #f9fafb);
        border-radius: 0.45rem;
        /* KEIN overflow — der Text wächst, der Meeting-Körper scrollt. */
    }
    .mtg-transcript-edit-hint {
        font-size: 0.76rem; color: var(--gray-500, #6b7280);
        margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center;
        flex-wrap: wrap;
    }
}

/* ============================================================
   INTERNER CHAT (v1.45)
   ============================================================ */
/* v1.47 (Mobile-Audit): Die Höhe kommt jetzt vom Elternelement, nicht aus
   einer Subtraktion.

   `calc(100dvh - 11rem)` war keine echte geometrische Beziehung: Kopfzeile,
   Reiterleiste, Innenabstand, Safe Area und die Browser-Leiste ergeben nicht
   verlässlich 11rem. Zu groß hieß, der Chat ragt unter den sichtbaren Rand;
   zu klein hieß Leerraum. Mit eingeblendeter Tastatur wurde die Rechnung noch
   empfindlicher.

   Dasselbe Prinzip, mit dem die Fenster stabil wurden: Der Elterncontainer
   bestimmt die verfügbare Höhe, das Kind nimmt sie mit flex:1 und
   min-height:0. */
#chat-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
#chat-view.view:not(.active) { display: none; }

.chat-layout {
    display: flex; gap: 0;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.6rem; overflow: hidden; background: #fff;
}
.chat-sidebar {
    width: 260px; flex-shrink: 0; border-right: 1px solid var(--gray-200, #e5e7eb);
    display: flex; flex-direction: column; min-height: 0;
    background: var(--gray-50, #f9fafb);
}
.chat-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 0.85rem; font-weight: 700; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--gray-500, #6b7280);
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
#chat-channel-list { flex: 1; overflow-y: auto; min-height: 0; }
.chat-ch {
    display: block; width: 100%; text-align: left; border: none;
    background: none; padding: 0.65rem 0.85rem; cursor: pointer;
    border-bottom: 1px solid var(--gray-100, #f3f4f6); font: inherit;
}
.chat-ch:hover { background: #fff; }
.chat-ch.active { background: #ecfdf5; border-left: 3px solid var(--primary, #059669); }
.chat-ch-top { display: flex; align-items: center; gap: 0.4rem; }
.chat-ch-name { font-weight: 600; font-size: 0.87rem; flex: 1; }
.chat-ch-badge {
    background: var(--primary, #059669); color: #fff; border-radius: 999px;
    font-size: 0.66rem; font-weight: 700; padding: 0.05rem 0.38rem;
}
.chat-ch-sub {
    font-size: 0.74rem; color: var(--gray-500, #6b7280); margin-top: 0.15rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-room { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--gray-200, #e5e7eb);
    flex-shrink: 0;
}
.chat-head-text { flex: 1; min-width: 0; }
.chat-head-name { font-weight: 700; font-size: 0.95rem; }
.chat-head-sub { font-size: 0.72rem; color: var(--gray-500, #6b7280); }
.chat-back { display: none; background: none; border: none; font-size: 1.5rem;
             color: var(--gray-500, #6b7280); cursor: pointer; padding: 0 0.2rem; }

.chat-messages {
    flex: 1; overflow-y: auto; min-height: 0; padding: 0.9rem;
    display: flex; flex-direction: column; gap: 0.15rem;
    overscroll-behavior: contain; overflow-anchor: none;
}
.chat-day {
    align-self: center; font-size: 0.7rem; color: var(--gray-400, #9ca3af);
    background: var(--gray-50, #f9fafb); border-radius: 999px;
    padding: 0.15rem 0.6rem; margin: 0.6rem 0 0.35rem;
}
.chat-sysline {
    align-self: center; font-size: 0.73rem; color: var(--gray-500, #6b7280);
    background: #fffbeb; border-radius: 0.35rem; padding: 0.25rem 0.6rem;
    margin: 0.3rem 0; text-align: center;
}
.chat-msg { display: flex; flex-direction: column; max-width: 78%; margin-bottom: 0.35rem; }
.chat-msg.own { align-self: flex-end; align-items: flex-end; }
.chat-msg-who {
    font-size: 0.7rem; font-weight: 600; color: var(--gray-500, #6b7280);
    margin-bottom: 0.1rem;
}
.chat-bubble {
    background: var(--gray-100, #f3f4f6); border-radius: 0.7rem;
    padding: 0.5rem 0.75rem; font-size: 0.88rem; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word;
}
.chat-msg.own .chat-bubble { background: #d1fae5; }
.chat-bubble.deleted {
    background: transparent; border: 1px dashed var(--gray-200, #e5e7eb);
    color: var(--gray-400, #9ca3af); font-style: italic;
}
.chat-msg-meta {
    font-size: 0.66rem; color: var(--gray-400, #9ca3af); margin-top: 0.12rem;
    display: flex; gap: 0.5rem; align-items: center;
}
.chat-del { background: none; border: none; color: var(--gray-400, #9ca3af);
            font-size: 0.66rem; cursor: pointer; padding: 0; text-decoration: underline; }
.chat-del:hover { color: #b91c1c; }

.chat-compose {
    position: relative; /* v1.63.1: Anker für das Anhang-Menü */
    display: flex; gap: 0.5rem; padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--gray-200, #e5e7eb); flex-shrink: 0;
    align-items: flex-end;
}
#chat-input {
    flex: 1; resize: none; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.55rem; padding: 0.55rem 0.7rem; font: inherit;
    font-size: 0.88rem; max-height: 140px; overflow-y: auto;
}
.chat-empty, .chat-empty-small {
    padding: 2rem 1rem; text-align: center; color: var(--gray-400, #9ca3af);
    font-size: 0.87rem;
}
.chat-empty-small { padding: 1rem 0.85rem; font-size: 0.78rem; }
.chat-nav-badge {
    background: #dc2626; color: #fff; border-radius: 999px;
    font-size: 0.62rem; font-weight: 700; padding: 0.05rem 0.35rem;
    margin-left: auto;
}

@media (max-width: 768px) {
    .chat-layout {
        /* Keine gerechnete Höhe mehr — siehe oben. */
        flex-direction: column; border-radius: 0.5rem;
    }
    .chat-sidebar { width: 100%; border-right: none; }
    /* Im Raum die Gruppenliste ausblenden — sonst bleibt kaum Platz */
    .chat-layout.chat-in-room .chat-sidebar { display: none; }
    .chat-layout:not(.chat-in-room) .chat-main { display: none; }
    .chat-back { display: block; }
    .chat-msg { max-width: 88%; }
    #chat-input { font-size: 16px; }   /* verhindert das Zoomen auf iOS */
    .chat-compose { padding: 0.6rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   CHAT — Ungelesenes sichtbar machen (v1.52)

   Der Zähler allein ist zu leise: Man sieht ihn erst, wenn man
   hinschaut. Deshalb zusätzlich Gewicht, Farbe und ein Trenner
   an der Stelle, ab der die Nachrichten neu sind.
   ============================================================ */
.chat-ch.unread .chat-ch-name {
    font-weight: 700;
    color: #064e3b;
}
.chat-ch.unread .chat-ch-sub {
    color: var(--gray-700, #374151);
    font-weight: 500;
}
/* Ein schmaler Streifen links — auf einen Blick erfassbar, auch
   wenn man die Zahl nicht liest */
.chat-ch.unread {
    border-left: 3px solid var(--primary, #059669);
    background: #f0fdf4;
}
.chat-ch.unread.active {
    background: #ecfdf5;
}
.chat-ch-when {
    font-size: 0.68rem;
    color: var(--gray-400, #9ca3af);
    margin-top: 0.15rem;
}
.chat-ch.unread .chat-ch-when {
    color: var(--primary, #059669);
    font-weight: 600;
}

/* Trennlinie: ab hier ist alles neu */
.chat-newline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.8rem 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #b91c1c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chat-newline::before,
.chat-newline::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #fecaca;
}

/* Das Abzeichen in der Navigation etwas kräftiger */
.chat-nav-badge {
    min-width: 1.1rem;
    text-align: center;
}

/* Hinweis auf Mitteilungen — dort, wo er zählt (v1.52.1) */
.chat-push-hint {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.6rem 0.85rem; margin-bottom: 0.6rem;
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 0.5rem; font-size: 0.83rem; color: #92400e;
}
.chat-push-hint-icon { font-size: 1.05rem; }
.chat-push-hint #chat-push-hint-text { flex: 1; min-width: 12rem; line-height: 1.45; }
.chat-push-hint-x {
    background: none; border: none; font-size: 1.3rem; line-height: 1;
    color: #b45309; cursor: pointer; padding: 0 0.2rem;
}
@media (max-width: 768px) {
    .chat-push-hint { font-size: 0.8rem; padding: 0.55rem 0.7rem; }
    .chat-push-hint .btn { flex: 1; }
}

/* ============================================================
   CHAT — Reaktionen und Sprachnachrichten (v1.53)
   ============================================================ */
.chat-reactions {
    display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.2rem;
    align-items: center;
}
.chat-msg.own .chat-reactions { justify-content: flex-end; }
.chat-reaction {
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 999px; padding: 0.1rem 0.45rem; font-size: 0.75rem;
    cursor: pointer; line-height: 1.4; touch-action: manipulation;
}
.chat-reaction.mine {
    background: #d1fae5; border-color: var(--primary, #059669);
    font-weight: 600;
}
.chat-reaction:hover { border-color: var(--primary, #059669); }
/* v1.54.1: Das Plus erscheint nur, wenn es schon Reaktionen gibt —
   sonst öffnet man die Auswahl durch langes Drücken auf die Nachricht. */
.chat-reaction-add {
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 999px; color: var(--gray-400, #9ca3af);
    font-size: 0.75rem; cursor: pointer; padding: 0.1rem 0.4rem;
    line-height: 1.4; touch-action: manipulation;
}
.chat-reaction-add:hover {
    border-color: var(--primary, #059669); color: var(--primary, #059669);
}
/* Beim langen Drücken keine iOS-Textauswahl und kein Kontextmenü */
.chat-bubble {
    -webkit-touch-callout: none;
}
@media (hover: none) and (pointer: coarse) {
    .chat-bubble { -webkit-user-select: none; user-select: none; }
    /* Sprachnachricht und Transkript bleiben markierbar */
    .chat-bubble.voice, .chat-voice-transcript {
        -webkit-user-select: auto; user-select: auto;
    }
}

.chat-emoji-picker {
    position: fixed; z-index: 2000; display: flex; gap: 0.15rem;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 999px; padding: 0.3rem 0.45rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}
.chat-emoji-picker button {
    background: none; border: none; font-size: 1.25rem; cursor: pointer;
    padding: 0.1rem 0.2rem; border-radius: 0.35rem; line-height: 1;
    touch-action: manipulation;
}
.chat-emoji-picker button:hover { background: var(--gray-100, #f3f4f6); }

/* Sprachnachricht */
.chat-bubble.voice { padding: 0.45rem 0.55rem; min-width: 15rem; }
.chat-bubble.voice audio { width: 100%; height: 34px; display: block; }
.chat-voice-meta {
    font-size: 0.68rem; color: var(--gray-500, #6b7280); margin-top: 0.15rem;
}
.chat-voice-transcript {
    font-size: 0.8rem; line-height: 1.45; margin-top: 0.4rem;
    padding-top: 0.4rem; border-top: 1px solid rgba(0, 0, 0, 0.08);
    white-space: pre-wrap;
}
.chat-voice-tx {
    background: none; border: none; padding: 0.15rem 0; margin-top: 0.2rem;
    font-size: 0.72rem; color: var(--primary, #059669); cursor: pointer;
    text-decoration: underline; touch-action: manipulation;
}
.chat-voice-tx:disabled { color: var(--gray-400, #9ca3af); cursor: default; }

.chat-voice-btn {
    background: none; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.55rem; font-size: 1.15rem; cursor: pointer;
    padding: 0.35rem 0.6rem; line-height: 1; touch-action: manipulation;
}
.chat-voice-btn:hover { border-color: var(--primary, #059669); }

.chat-recording {
    display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
    padding: 0.6rem 0.9rem; border-top: 1px solid var(--gray-200, #e5e7eb);
    background: #fef2f2; font-size: 0.83rem; color: #991b1b; flex-shrink: 0;
}
.chat-rec-dot {
    width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #dc2626;
    animation: chatRecPulse 1.1s ease-in-out infinite;
}
@keyframes chatRecPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.chat-rec-time { font-variant-numeric: tabular-nums; font-weight: 700; }

@media (max-width: 768px) {
    .chat-recording {
        padding: 0.6rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    }
    .chat-bubble.voice { min-width: 12rem; }
    .chat-emoji-picker button { font-size: 1.45rem; padding: 0.2rem 0.3rem; }
}

/* ============================================================
   CHAT — Gruppenliste bleibt stehen (v1.55)

   Gemeldet: Beim Scrollen im Verlauf wandert die Gruppenliste mit
   weg, und man kann nicht mehr wechseln.

   Ursache: .content-area hat selbst overflow-y:auto. Damit scrollt
   der GESAMTE Chat, nicht nur die Nachrichten. Im Chat wird das
   abgeschaltet — dort scrollen ausschließlich die beiden inneren
   Bereiche (Gruppenliste und Nachrichten), jeder für sich.
   ============================================================ */
.content-area:has(#chat-view.active) { overflow: hidden; }
/* Rückfall für Browser ohne :has() — die Klasse setzt switchView */
.content-area.chat-active { overflow: hidden; }

.chat-load-more {
    align-self: center; margin: 0.5rem 0 0.8rem;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 999px; padding: 0.3rem 0.9rem;
    font-size: 0.76rem; color: var(--gray-600, #4b5563); cursor: pointer;
    touch-action: manipulation;
}
.chat-load-more:hover { border-color: var(--primary, #059669); }
.chat-load-more:disabled { color: var(--gray-400, #9ca3af); cursor: default; }

.chat-ch.archived { opacity: 0.6; }
.chat-ch-archived-tag {
    font-size: 0.62rem; background: var(--gray-200, #e5e7eb);
    color: var(--gray-600, #4b5563); border-radius: 0.3rem;
    padding: 0 0.3rem; margin-left: 0.3rem;
}

/* Vorschau-Schalter für Mitteilungen (v1.56) */
.push-preview-row {
    display: flex; align-items: flex-start; gap: 0.55rem;
    margin-top: 0.8rem; padding: 0.6rem 0.7rem;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 0.45rem;
    font-size: 0.83rem; cursor: pointer; line-height: 1.45;
}
.push-preview-row input { margin-top: 0.15rem; flex-shrink: 0; }
.push-preview-hint { font-size: 0.75rem; color: var(--gray-500, #6b7280); }

/* Gelesen-Stand bei eigenen Nachrichten (v1.57) */
.chat-read {
    font-size: 0.66rem; color: var(--gray-400, #9ca3af);
    letter-spacing: -0.04em;
}
.chat-read.all { color: var(--primary, #059669); font-weight: 700; }
.chat-read.some { color: var(--gray-500, #6b7280); letter-spacing: normal; }

/* Endmarker für die Lesebestätigung (v1.58.2)
   Unsichtbar, aber messbar: Wer ihn im Sichtfeld hat, ist bis zum Ende
   der Nachricht gescrollt — auch bei Nachrichten, die höher sind als der
   Bildschirm. */
.chat-read-sentinel {
    display: block;
    width: 100%;
    height: 1px;
    pointer-events: none;
}

/* ============================================================
   NOTIZEN — Verknüpfen per Auswahl (v1.59)

   Wikilinks gab es schon, aber nur für den, der die Schreibweise
   samt Aufgaben-ID kannte. Der Knopf macht sie auffindbar.
   ============================================================ */
.nx-link-tabs {
    display: flex; gap: 0.35rem; margin: 0.7rem 0 0.5rem; flex-wrap: wrap;
}
.nx-link-tab {
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.78rem;
    cursor: pointer; color: var(--gray-600, #4b5563);
    touch-action: manipulation;
}
.nx-link-tab.active {
    background: var(--primary, #059669); border-color: var(--primary, #059669);
    color: #fff; font-weight: 600;
}
.nx-link-results {
    max-height: 22rem; overflow-y: auto; display: flex;
    flex-direction: column; gap: 0.15rem;
}
.nx-link-row {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    background: none; border: none; border-radius: 0.4rem;
    padding: 0.45rem 0.55rem; cursor: pointer; text-align: left;
    touch-action: manipulation;
}
.nx-link-row:hover { background: var(--gray-100, #f3f4f6); }
.nx-link-icon { font-size: 0.95rem; flex-shrink: 0; }
.nx-link-text { display: flex; flex-direction: column; min-width: 0; }
.nx-link-title {
    font-size: 0.87rem; color: var(--gray-800, #1f2937);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nx-link-sub { font-size: 0.7rem; color: var(--gray-500, #6b7280); }
.nx-link-empty {
    padding: 1.2rem; text-align: center; font-size: 0.83rem;
    color: var(--gray-500, #6b7280);
}
@media (max-width: 768px) {
    .nx-link-results { max-height: 55vh; }
    .nx-link-row { padding: 0.6rem 0.55rem; }
}

/* ============================================================
   EXPORT — Auswahl vor dem Herunterladen (v1.60)
   ============================================================ */
.export-parts {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.3rem; margin: 0.8rem 0;
}
.export-part {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.6rem; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.45rem; font-size: 0.84rem; cursor: pointer;
    background: #fff;
}
.export-part:hover { border-color: var(--primary, #059669); }
.export-part.empty { opacity: 0.5; cursor: default; }
.export-part.empty:hover { border-color: var(--gray-200, #e5e7eb); }
.export-part span:nth-of-type(1) { flex: 1; }
.export-count {
    font-size: 0.72rem; color: var(--gray-500, #6b7280);
    font-variant-numeric: tabular-nums;
}
.export-loading {
    font-size: 0.82rem; color: var(--gray-500, #6b7280); padding: 0.6rem;
}
.export-opt {
    display: flex; align-items: flex-start; gap: 0.5rem;
    font-size: 0.82rem; cursor: pointer; line-height: 1.45;
}
.export-opt input { margin-top: 0.15rem; }
.export-hint { color: var(--gray-500, #6b7280); font-size: 0.76rem; }
@media (max-width: 768px) {
    .export-parts { grid-template-columns: 1fr; }
}

/* ============================================================
   EXCEL-RÜCKWEG (v1.61)
   ============================================================ */
.import-drop {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    margin: 0.7rem 0;
}
.import-name { font-size: 0.8rem; color: var(--gray-600, #4b5563); }
.import-preview {
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 0.5rem;
    padding: 0.8rem; margin-top: 0.6rem; background: var(--gray-50, #f9fafb);
    max-height: 26rem; overflow-y: auto;
}
.import-summary {
    display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.7rem;
    font-size: 0.82rem;
}
.import-chip {
    background: #d1fae5; color: #065f46; border-radius: 999px;
    padding: 0.15rem 0.6rem; font-size: 0.76rem; font-weight: 600;
}
.import-chip.bad { background: #fee2e2; color: #991b1b; }
.import-row {
    padding: 0.4rem 0.55rem; border-radius: 0.4rem; background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb); margin-bottom: 0.3rem;
    font-size: 0.8rem;
}
.import-row.new { border-color: #a7f3d0; background: #f0fdf4; }
.import-row-title { font-weight: 600; margin-bottom: 0.15rem; }
.import-change {
    font-size: 0.75rem; color: var(--gray-600, #4b5563);
    padding-left: 0.6rem;
}
.import-warn {
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    border-radius: 0.4rem; padding: 0.5rem 0.65rem; font-size: 0.79rem;
    margin: 0.5rem 0; line-height: 1.45;
}
.import-error {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    border-radius: 0.4rem; padding: 0.4rem 0.6rem; font-size: 0.78rem;
    margin-bottom: 0.25rem;
}
.import-loading { font-size: 0.82rem; color: var(--gray-500, #6b7280); }
.import-batches { margin-top: 0.9rem; }
.import-batch-head {
    font-size: 0.75rem; font-weight: 700; color: var(--gray-500, #6b7280);
    text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.35rem;
}
.import-batch {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem; flex-wrap: wrap; font-size: 0.8rem;
    padding: 0.4rem 0.55rem; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.4rem; margin-bottom: 0.3rem; background: #fff;
}

/* ============================================================
   CHAT-ANHÄNGE (v1.62)
   ============================================================ */
.chat-attach-menu {
    position: absolute; bottom: 4rem; left: 0.7rem; z-index: 60;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.6rem; box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    display: flex; flex-direction: column; overflow: hidden; min-width: 12rem;
}
.chat-attach-menu button {
    background: none; border: none; text-align: left; cursor: pointer;
    padding: 0.6rem 0.9rem; font-size: 0.85rem; white-space: nowrap;
    touch-action: manipulation;
}
.chat-attach-menu button:hover { background: var(--gray-100, #f3f4f6); }

.chat-pending {
    display: flex; gap: 0.3rem; flex-wrap: wrap; padding: 0.4rem 0.7rem;
    border-top: 1px solid var(--gray-200, #e5e7eb); flex-shrink: 0;
}
.chat-pending-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--gray-100, #f3f4f6); border-radius: 999px;
    padding: 0.15rem 0.5rem; font-size: 0.72rem;
    max-width: 14rem; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-pending-chip button {
    background: none; border: none; cursor: pointer; font-size: 0.95rem;
    line-height: 1; color: var(--gray-500, #6b7280); padding: 0;
}
.chat-upload-bar {
    width: 100%; font-size: 0.74rem; color: var(--primary, #059669);
    padding: 0.2rem 0;
}

/* Bildkacheln */
.chat-att-grid {
    display: grid; gap: 2px; margin-top: 0.3rem; border-radius: 0.5rem;
    overflow: hidden; max-width: 20rem;
}
.chat-att-grid.n1 { grid-template-columns: 1fr; }
.chat-att-grid.n2 { grid-template-columns: 1fr 1fr; }
.chat-att-grid.n3, .chat-att-grid.n4 { grid-template-columns: 1fr 1fr; }
.chat-att-img {
    position: relative; padding: 0; border: none; background: #eee;
    cursor: pointer; aspect-ratio: 1; overflow: hidden;
    touch-action: manipulation;
}
.chat-att-grid.n1 .chat-att-img { aspect-ratio: auto; max-height: 18rem; }
.chat-att-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-att-grid.n1 .chat-att-img img { object-fit: contain; }
.chat-att-more {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; background: rgba(0,0,0,0.5); color: #fff;
    font-size: 1.3rem; font-weight: 700;
}
.chat-att-video {
    display: block; max-width: 20rem; width: 100%; margin-top: 0.3rem;
    border-radius: 0.5rem; background: #000;
}
.chat-att-file {
    display: block; margin-top: 0.3rem; padding: 0.4rem 0.6rem;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.45rem; font-size: 0.78rem; text-decoration: none;
    color: var(--gray-700, #374151); word-break: break-all;
}
.chat-att-file:hover { border-color: var(--primary, #059669); }

/* Lightbox */
.chat-lightbox {
    position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.94);
    display: flex; align-items: center; justify-content: center;
}
.chat-lightbox img {
    max-width: 96vw; max-height: 88vh; object-fit: contain;
    /* dvh vermeiden: Safari meldet ihn bei eingefrorener Seite veraltet */
}
.chat-lb-close, .chat-lb-nav {
    position: absolute; background: rgba(255,255,255,0.14); color: #fff;
    border: none; cursor: pointer; touch-action: manipulation;
    border-radius: 50%; width: 2.6rem; height: 2.6rem; font-size: 1.5rem;
    line-height: 1; display: flex; align-items: center; justify-content: center;
}
.chat-lb-close { top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem; }
.chat-lb-nav.prev { left: 0.8rem; }
.chat-lb-nav.next { right: 0.8rem; }
.chat-lb-count {
    position: absolute; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
    color: rgba(255,255,255,0.75); font-size: 0.8rem;
}

/* v1.62: Der FAB verschwindet im Chat, bei offenem Modal und bei
   ausgefahrener Tastatur — sonst klebt er über dem Composer. */
body.fab-hidden .mobile-fab,
body.modal-open .mobile-fab,
body.kb-open .mobile-fab { display: none !important; }

@media (max-width: 768px) {
    .chat-att-grid { max-width: 100%; }
    .chat-att-video { max-width: 100%; }
    .chat-attach-menu button { padding: 0.75rem 0.9rem; font-size: 0.9rem; }
}

/* ============================================================
   CRM — Ansichten, Sortierung, Filter (v1.63)
   ============================================================ */
.crm-view-bar {
    display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.7rem;
}
.crm-view-chip {
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 999px; padding: 0.28rem 0.75rem; font-size: 0.79rem;
    cursor: pointer; color: var(--gray-600, #4b5563);
    touch-action: manipulation; white-space: nowrap;
}
.crm-view-chip.active {
    background: var(--primary, #059669); border-color: var(--primary, #059669);
    color: #fff; font-weight: 600;
}
.crm-view-chip.add { border-style: dashed; }
.crm-view-owner { font-size: 0.68rem; opacity: 0.7; }

.crm-list-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem;
    font-size: 0.78rem; color: var(--gray-500, #6b7280);
}
.crm-sort { display: flex; align-items: center; gap: 0.3rem; }
.crm-sort select {
    font-size: 0.78rem; padding: 0.2rem 0.4rem; border-radius: 0.35rem;
    border: 1px solid var(--gray-200, #e5e7eb); background: #fff;
}
.crm-sort-dir {
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.35rem; cursor: pointer; padding: 0.15rem 0.45rem;
    font-size: 0.85rem; touch-action: manipulation;
}
.crm-more {
    display: block; width: 100%; margin: 0.8rem 0 0.4rem;
    background: #fff; border: 1px dashed var(--gray-300, #d1d5db);
    border-radius: 0.5rem; padding: 0.6rem; cursor: pointer;
    font-size: 0.82rem; color: var(--gray-600, #4b5563);
    touch-action: manipulation;
}
.crm-more:hover { border-color: var(--primary, #059669); }

/* Filter — am Rechner mittig, auf dem Handy von unten */
.crm-filter-sheet {
    position: fixed; inset: 0; z-index: 2200; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
}
.crm-filter-panel {
    background: #fff; border-radius: 0.7rem; width: min(42rem, 94vw);
    max-height: 86%; display: flex; flex-direction: column; min-height: 0;
    overflow: hidden;
}
.crm-filter-head, .crm-filter-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.8rem 1rem; flex-shrink: 0;
}
.crm-filter-head { border-bottom: 1px solid var(--gray-200, #e5e7eb); }
.crm-filter-head h3 { margin: 0; font-size: 1rem; }
.crm-filter-foot {
    border-top: 1px solid var(--gray-200, #e5e7eb); gap: 0.5rem;
    justify-content: flex-end;
}
.crm-filter-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.8rem 1rem; }
.crm-filter-row {
    display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.45rem;
    flex-wrap: wrap;
}
.crm-filter-row select, .crm-filter-row input {
    flex: 1; min-width: 7rem; padding: 0.35rem 0.5rem; font-size: 0.83rem;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 0.4rem;
}
.crm-filter-del {
    background: none; border: none; color: var(--gray-400, #9ca3af);
    font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0 0.3rem;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    /* Bottom-Sheet: von unten, volle Breite — kein Modal-in-Modal */
    .crm-filter-sheet { align-items: flex-end; }
    .crm-filter-panel {
        width: 100%; max-height: 88%;
        border-radius: 0.9rem 0.9rem 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .crm-filter-row select, .crm-filter-row input { min-width: 5.5rem; }
    .crm-view-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.2rem; }
    .crm-view-chip { flex-shrink: 0; }
}

/* Verweildauer in der Stufe (v1.63) */
.crm-stage-age {
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 0.45rem;
    padding: 0.4rem 0.7rem; margin-bottom: 0.7rem; font-size: 0.82rem;
}
.crm-stage-now { color: var(--gray-700, #374151); }
.crm-stage-total { font-size: 0.74rem; color: var(--gray-500, #6b7280); }

/* ============================================================
   MOBILE-CHAT (v1.64)

   Der Composer war auf dem Handy erreichbar, solange die Rechnung
   aufging. Ging sie nicht auf — Safari-Leiste, PWA, Tastatur —,
   lag er unter dem Rand, und NICHTS konnte dorthin scrollen, weil
   die Nachrichtenliste der einzige Scroller ist.

   Deshalb: Die Höhe kommt EINMAL von oben. Kopf und Composer
   schrumpfen nicht, dazwischen scrollt genau eine Ebene.
   ============================================================ */
@media (max-width: 768px) {
    /* Das 5rem-Padding des Inhaltsbereichs darf im Chat nicht in die
       Geometrie eingehen — es hat den Composer nach unten gedrückt. */
    .content-area.chat-active { padding: 0; overflow: hidden; }

    .content-area.chat-active #chat-view,
    .content-area.chat-active .chat-layout,
    .content-area.chat-active .chat-main,
    .content-area.chat-active .chat-room {
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }
    .content-area.chat-active .chat-layout {
        border-radius: 0; border: none;
    }

    .chat-room > .chat-head { flex-shrink: 0; }
    .chat-messages {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .chat-compose {
        flex-shrink: 0;
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    }
    .chat-pending {
        padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Verweise in Nachrichten */
.chat-inline-link {
    display: inline-flex; align-items: center; gap: 0.2rem;
    background: rgba(5, 150, 105, 0.1); border: none;
    border-radius: 0.35rem; padding: 0.05rem 0.35rem; margin: 0 0.1rem;
    font: inherit; font-size: 0.92em; color: var(--primary, #047857);
    cursor: pointer; touch-action: manipulation; vertical-align: baseline;
}
.chat-inline-link:hover { background: rgba(5, 150, 105, 0.18); }
.chat-msg.own .chat-inline-link {
    background: rgba(255, 255, 255, 0.22); color: #fff;
}

/* Sprung ans Ende — INNERHALB der Nachrichtenzone, nicht fixed:
   sonst schwebt der Knopf über anderen Ansichten weiter. */
.chat-room { position: relative; }
.chat-jump {
    position: absolute; right: 0.9rem; bottom: 5.2rem; z-index: 20;
    display: none; align-items: center; gap: 0.3rem;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 999px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
    padding: 0.35rem 0.7rem; font-size: 0.8rem; cursor: pointer;
    color: var(--gray-700, #374151); touch-action: manipulation;
}
.chat-jump.show { display: inline-flex; }
.chat-jump-count {
    background: var(--primary, #059669); color: #fff; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700; padding: 0 0.35rem; min-width: 1.1rem;
    text-align: center;
}

/* ── Composer (v1.64) ────────────────────────────────────────────────
   Vorher: [Text][📎][🔗][🎤][Senden] — auf 390 px blieben dem Textfeld
   rund 140 px. Jetzt: ein Plus links, ein Aktionsknopf rechts. */
.chat-plus-btn, .chat-act-btn {
    flex-shrink: 0; background: none;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 50%;
    width: 2.4rem; height: 2.4rem; font-size: 1.15rem; line-height: 1;
    cursor: pointer; touch-action: manipulation;
    display: flex; align-items: center; justify-content: center;
    align-self: flex-end;
}
.chat-plus-btn:hover, .chat-act-btn:hover { border-color: var(--primary, #059669); }
.chat-act-btn[data-mode="send"] {
    background: var(--primary, #059669); border-color: var(--primary, #059669);
    color: #fff;
}
.chat-msg-back { animation: chatBackFlash 1.4s ease-out; }
@keyframes chatBackFlash {
    0%, 40% { background: rgba(5, 150, 105, 0.13); border-radius: 0.5rem; }
    100% { background: transparent; }
}

@media (max-width: 768px) {
    /* Das Textfeld bekommt den Platz, nicht die Knöpfe. */
    .chat-compose { gap: 0.4rem; padding-left: 0.6rem; padding-right: 0.6rem; }
    .chat-compose #chat-input {
        flex: 1 1 auto; min-width: 0;
        min-height: 44px; max-height: 120px; border-radius: 22px;
        padding: 0.6rem 0.9rem;
    }
    /* Der 🔗-Knopf ist ins Sheet gewandert, „Senden" ersetzt der
       Aktionsknopf — beide verschwinden aus der Leiste. */
    .chat-compose #chat-link-btn,
    .chat-compose #chat-send { display: none; }
    .chat-plus-btn, .chat-act-btn { width: 2.6rem; height: 2.6rem; }

    /* Anhang-Menü als Sheet von unten */
    .chat-attach-menu {
        position: fixed; inset: 0; bottom: 0; left: 0; right: 0; top: 0;
        z-index: 2400; background: rgba(0, 0, 0, 0.4);
        display: flex; align-items: flex-end; min-width: 0;
        border: none; border-radius: 0; box-shadow: none; overflow: visible;
    }
    .chat-sheet-panel {
        width: 100%; background: #fff;
        border-radius: 1rem 1rem 0 0; padding: 0.5rem 0
            calc(0.5rem + env(safe-area-inset-bottom, 0px));
        display: flex; flex-direction: column;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
    }
    .chat-sheet-grip {
        width: 2.4rem; height: 0.25rem; border-radius: 999px;
        background: var(--gray-300, #d1d5db); margin: 0.3rem auto 0.6rem;
    }
    .chat-attach-menu button {
        display: flex; align-items: center; gap: 0.8rem;
        padding: 0.95rem 1.2rem; font-size: 1rem; background: none;
        border: none; text-align: left; cursor: pointer;
        touch-action: manipulation;
    }
    .chat-attach-menu button:active { background: var(--gray-100, #f3f4f6); }
    .chat-sheet-sub { font-size: 0.9rem !important; opacity: 0.75; }
    .chat-jump { bottom: 4.6rem; }
}

/* Am Rechner bleibt das kleine Menü über dem Composer. */
@media (min-width: 769px) {
    .chat-sheet-grip { display: none; }
    .chat-sheet-panel {
        background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
        border-radius: 0.6rem; box-shadow: 0 8px 24px rgba(0,0,0,0.14);
        display: flex; flex-direction: column; overflow: hidden;
        min-width: 13rem;
    }
    .chat-attach-menu {
        position: absolute; bottom: 4rem; left: 0.7rem; z-index: 60;
        background: none; border: none; box-shadow: none;
    }
}

/* ============================================================
   CHAT v1.65 — Antworten, Suche, Medien

   HINWEIS (Auftrag §4): `.modal` trägt dieselbe Kombination aus
   `align-items: center`, fester Höhe und `overflow: hidden` wie
   `.mtg-modal` vor diesem Auftrag. Hier bewusst NICHT angefasst —
   ein Modal pro Auftrag. Wer das angeht, sollte dieselbe Logik
   anwenden: flex-start, Höhe vom fixed-Container, ein Scroller.
   ============================================================ */

/* Zitatleiste über dem Textfeld */
.chat-reply-bar {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.9rem; flex-shrink: 0;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    border-left: 3px solid var(--primary, #059669);
    background: var(--gray-50, #f9fafb); font-size: 0.8rem;
}
.chat-reply-who { font-weight: 700; color: var(--primary, #047857); flex-shrink: 0; }
.chat-reply-text {
    flex: 1; min-width: 0; color: var(--gray-600, #4b5563);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-reply-x {
    background: none; border: none; font-size: 1.2rem; line-height: 1;
    color: var(--gray-500, #6b7280); cursor: pointer; padding: 0 0.2rem;
    touch-action: manipulation;
}

/* Zitat in der Blase */
.chat-quote {
    display: flex; flex-direction: column; gap: 0.1rem; width: 100%;
    text-align: left; background: rgba(0, 0, 0, 0.04);
    border: none; border-left: 3px solid var(--primary, #059669);
    border-radius: 0.35rem; padding: 0.3rem 0.5rem; margin-bottom: 0.25rem;
    cursor: pointer; font: inherit; touch-action: manipulation;
}
.chat-quote.deleted { border-left-color: var(--gray-300, #d1d5db); cursor: default; }
.chat-quote-who {
    font-size: 0.72rem; font-weight: 700; color: var(--primary, #047857);
}
.chat-quote.deleted .chat-quote-who { color: var(--gray-500, #6b7280); }
.chat-quote-text {
    font-size: 0.76rem; color: var(--gray-600, #4b5563);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-msg.own .chat-quote { background: rgba(255, 255, 255, 0.18); }
.chat-msg.own .chat-quote-who,
.chat-msg.own .chat-quote-text { color: rgba(255, 255, 255, 0.9); }

/* Aktionen im Long-Press-Menü */
.chat-emoji-row { display: flex; gap: 0.15rem; }
.chat-msg-actions {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--gray-200, #e5e7eb); margin-top: 0.3rem;
    padding-top: 0.25rem;
}
.chat-msg-action {
    background: none; border: none; text-align: left; cursor: pointer;
    padding: 0.5rem 0.6rem; font-size: 0.84rem; white-space: nowrap;
    border-radius: 0.35rem; touch-action: manipulation;
}
.chat-msg-action:hover { background: var(--gray-100, #f3f4f6); }
.chat-emoji-picker { flex-direction: column; align-items: stretch; }

/* Suche */
.chat-search-bar {
    display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    background: var(--gray-50, #f9fafb);
}
.chat-search-bar input {
    flex: 1; min-width: 0; padding: 0.45rem 0.7rem; font-size: 0.88rem;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 999px;
}
.chat-search-bar button {
    background: none; border: none; font-size: 1.3rem; line-height: 1;
    color: var(--gray-500, #6b7280); cursor: pointer;
    touch-action: manipulation;
}
.chat-hit {
    display: flex; flex-direction: column; gap: 0.15rem; width: 100%;
    text-align: left; background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 0.5rem;
    padding: 0.5rem 0.7rem; margin-bottom: 0.3rem; cursor: pointer;
    font: inherit; touch-action: manipulation;
}
.chat-hit:hover { border-color: var(--primary, #059669); }
.chat-hit-meta { font-size: 0.7rem; color: var(--gray-500, #6b7280); }
.chat-hit-text { font-size: 0.83rem; color: var(--gray-700, #374151); }
.chat-hit-text mark {
    background: #fef08a; color: inherit; border-radius: 0.15rem;
    padding: 0 0.1rem;
}

/* Medien-Sheet */
.chat-media-sheet {
    position: fixed; inset: 0; z-index: 2300; background: rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; justify-content: center;
}
.chat-media-panel {
    background: #fff; border-radius: 0.7rem; width: min(38rem, 94vw);
    max-height: 86%; display: flex; flex-direction: column; min-height: 0;
    overflow: hidden;
}
.chat-media-tabs {
    display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.chat-media-tab {
    background: none; border: 1px solid transparent; border-radius: 999px;
    padding: 0.25rem 0.7rem; font-size: 0.82rem; cursor: pointer;
    color: var(--gray-600, #4b5563); touch-action: manipulation;
}
.chat-media-tab.active {
    background: var(--primary, #059669); color: #fff; font-weight: 600;
}
.chat-media-close {
    margin-left: auto; background: none; border: none; font-size: 1.4rem;
    line-height: 1; color: var(--gray-500, #6b7280); cursor: pointer;
    touch-action: manipulation;
}
.chat-media-body {
    flex: 1; min-height: 0; overflow-y: auto; padding: 0.8rem;
}
.chat-media-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 3px;
}
.chat-media-cell {
    aspect-ratio: 1; padding: 0; border: none; background: var(--gray-100, #f3f4f6);
    cursor: pointer; overflow: hidden; border-radius: 0.35rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; touch-action: manipulation;
}
.chat-media-cell img { width: 100%; height: 100%; object-fit: cover; }
.chat-media-row {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    text-align: left; background: none; border: none; cursor: pointer;
    padding: 0.55rem 0.5rem; border-radius: 0.4rem; font: inherit;
    touch-action: manipulation;
}
.chat-media-row:hover { background: var(--gray-100, #f3f4f6); }
.chat-media-name {
    flex: 1; min-width: 0; font-size: 0.85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-media-sub { font-size: 0.72rem; color: var(--gray-500, #6b7280); }

@media (max-width: 768px) {
    /* Sheets kommen von unten — kein Modal-in-Modal. */
    .chat-media-sheet { align-items: flex-end; }
    .chat-media-panel {
        width: 100%; max-height: 88%;
        border-radius: 0.9rem 0.9rem 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .chat-msg-action { padding: 0.7rem 0.8rem; font-size: 0.92rem; }
    .chat-reply-bar {
        padding-left: 0.7rem; padding-right: 0.7rem;
    }
}

/* ── Aus Releaf anhängen (v1.67) ─────────────────────────────────────── */
.fromapp-list {
    max-height: 24rem; overflow-y: auto; margin-top: 0.7rem;
    display: flex; flex-direction: column; gap: 0.1rem;
}
.fromapp-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.55rem; border-radius: 0.4rem; cursor: pointer;
    touch-action: manipulation;
}
.fromapp-row:hover { background: var(--gray-100, #f3f4f6); }
.fromapp-icon { font-size: 1rem; flex-shrink: 0; }
.fromapp-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fromapp-name {
    font-size: 0.87rem; color: var(--gray-800, #1f2937);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fromapp-ctx { font-size: 0.72rem; color: var(--gray-500, #6b7280); }
.fromapp-empty {
    padding: 1.4rem; text-align: center; font-size: 0.84rem;
    color: var(--gray-500, #6b7280);
}
.chat-pending-chip.from-app {
    background: #ecfdf5; color: #065f46;
}
@media (max-width: 768px) {
    .fromapp-list { max-height: 50vh; }
    .fromapp-row { padding: 0.7rem 0.55rem; }
}

/* ── Meeting-To-dos zu Aufgaben (v1.68) ──────────────────────────────── */
.mtodo-card {
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 0.5rem;
    padding: 0.7rem; margin-bottom: 0.6rem; background: #fff;
}
.mtodo-title {
    width: 100%; font-size: 0.92rem; font-weight: 600;
    border: 1px solid transparent; border-radius: 0.35rem;
    padding: 0.35rem 0.4rem; background: var(--gray-50, #f9fafb);
}
.mtodo-title:focus {
    border-color: var(--primary, #059669); background: #fff; outline: none;
}
.mtodo-row {
    display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap;
    align-items: flex-start;
}
.mtodo-row select, .mtodo-row input {
    font-size: 0.82rem; padding: 0.3rem 0.4rem; border-radius: 0.35rem;
    border: 1px solid var(--gray-200, #e5e7eb); background: #fff;
}
.mtodo-row select[multiple] { flex: 1 1 10rem; min-width: 8rem; }
.mtodo-due { flex: 0 0 auto; }
.mtodo-proj { flex: 1 1 9rem; min-width: 7rem; }
.mtodo-split {
    display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem;
    font-size: 0.78rem; color: var(--gray-600, #4b5563); cursor: pointer;
}
.mtodo-warn {
    margin-top: 0.4rem; font-size: 0.75rem;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    border-radius: 0.35rem; padding: 0.3rem 0.5rem;
}
.mtodo-warn.suggest {
    background: #eff6ff; border-color: #bfdbfe; color: #1e40af;
}
.mtodo-hint {
    font-size: 0.79rem; color: var(--gray-600, #4b5563);
    background: var(--gray-50, #f9fafb);
    border-radius: 0.4rem; padding: 0.45rem 0.6rem; margin-bottom: 0.6rem;
}
@media (max-width: 768px) {
    .mtodo-row { flex-direction: column; }
    .mtodo-row select, .mtodo-row input, .mtodo-row select[multiple] {
        width: 100%; flex: none;
    }
}


/* ── v1.70 (Agent) ─────────────────────────────────────────────────── */
.agent-start { padding: 1rem; }
.agent-hint { color: #6b7280; font-size: 0.9rem; margin: 0 0 0.8rem; }
.agent-actions { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.agent-call-state { color: #6b7280; font-size: 0.85rem; }
#agent-text { width: 100%; border: 1px solid #e5e7eb; border-radius: 0.6rem;
    padding: 0.6rem 0.7rem; font: inherit; margin-bottom: 0.6rem; resize: vertical; }
.agent-live { padding: 0.8rem 1rem; border-top: 1px solid #f3f4f6; }
.agent-live-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.agent-dot { width: 10px; height: 10px; border-radius: 50%; background: #34d399;
    animation: agentPulse 1.4s ease-in-out infinite; }
@keyframes agentPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.agent-transcript { max-height: 40vh; overflow-y: auto; font-size: 0.92rem;
    line-height: 1.5; }
.agent-transcript div { margin-bottom: 0.35rem; }
.agent-transcript .me { color: #111827; }
.agent-transcript .bot { color: #2563eb; }
.agent-plan { margin: 0.8rem 1rem; border: 1px solid #e5e7eb; border-radius: 0.7rem;
    padding: 0.9rem; background: #fff; }
.agent-plan h4 { margin: 0 0 0.4rem; }
.agent-step { padding: 0.35rem 0; border-bottom: 1px solid #f9fafb; font-size: 0.92rem; }
.agent-step:last-child { border-bottom: none; }
.agent-step .tool { color: #6b7280; font-size: 0.8rem; }
.agent-plan-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.agent-q { background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.5rem;
    padding: 0.6rem; margin: 0.4rem 0; }
.agent-q input { width: 100%; margin-top: 0.35rem; padding: 0.4rem;
    border: 1px solid #e5e7eb; border-radius: 0.4rem; font: inherit; }
.agent-jobs { padding: 0 1rem 2rem; }
.agent-job { padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; font-size: 0.9rem;
    display: flex; justify-content: space-between; gap: 0.6rem;
    align-items: flex-start; }          /* v1.91.1: nicht strecken — sonst wird die Marke zur Blase */
.agent-job > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.agent-badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; line-height: 1.3;
    background: #f3f4f6; color: #374151; white-space: nowrap;
    align-self: flex-start; flex-shrink: 0; }
.agent-badge.ok { background: #d1fae5; color: #065f46; }
.agent-badge.err { background: #fee2e2; color: #991b1b; }
@media (max-width: 768px) {
    .agent-transcript { max-height: 32vh; }
}

.agent-viol { background:#fef2f2; border:1px solid #fecaca; color:#991b1b;
    border-radius:0.4rem; padding:0.4rem 0.55rem; margin:0.3rem 0;
    font-size:0.88rem; }

/* ── v1.72 (Board): Klappen wirkt auch auf Mobile ─────────────────── */
@media (max-width: 768px) {
    /* Eingeklappt belegt keine 86 % mehr, sondern nur einen Streifen —
       damit rutschen To Do, Doing und Done zusammen und man wischt
       weniger. Die Kopfzeile bleibt tippbar zum Wiederaufklappen. */
    .board-col-collapsible.collapsed {
        flex: 0 0 2.4rem !important;
        min-height: 60vh;
        padding: 0.4rem 0.2rem;
    }
    .board-col-collapsible.collapsed .board-col-head {
        writing-mode: vertical-rl; text-orientation: mixed;
        height: 100%; padding: 0.4rem 0;
    }
    .board-col-collapsible.collapsed .board-count { padding: 0.3rem 0; }
}

/* ── v1.77 (Agent): Mail-Warteschlange ─────────────────────────────── */
.agent-mail { border:1px solid #e5e7eb; border-radius:0.6rem; padding:0.7rem; margin:0.5rem 0; background:#fff; }
.agent-mail-head { font-size:0.88rem; color:#374151; margin-bottom:0.4rem; }
.agent-mail-subject, .agent-mail-body { width:100%; border:1px solid #e5e7eb; border-radius:0.4rem;
    padding:0.45rem 0.55rem; font:inherit; margin-bottom:0.4rem; }
.agent-mail-body { resize:vertical; line-height:1.45; }

/* v1.78 (Agent): vollständige Argumente in der Vorschau */
.agent-arg { display:flex; gap:0.5rem; font-size:0.85rem; margin:0.15rem 0 0 0.6rem; }
.agent-arg-k { color:#6b7280; min-width:6.5rem; flex:0 0 auto; }
.agent-arg-v { color:#111827; white-space:pre-wrap; word-break:break-word; }
pre.agent-arg-v { margin:0; background:#f9fafb; border:1px solid #f3f4f6; border-radius:0.4rem;
    padding:0.4rem 0.55rem; font:inherit; max-height:14rem; overflow:auto; flex:1; }

/* v1.79 (Agent): Rückfragen als Gespräch */
.agent-q-bubble { background:#eef2ff; border-radius:0.8rem 0.8rem 0.8rem 0.2rem; padding:0.5rem 0.7rem;
    display:inline-block; max-width:100%; margin-bottom:0.4rem; white-space:pre-wrap; }
.agent-q-opts { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.3rem 0; }
.agent-q-opt.active { background:#d1fae5; border-color:#34d399; }

/* v1.81 (Agent): beantwortete Fragen bleiben als Verlauf sichtbar */
.agent-q.done { background:#f9fafb; border-color:#f3f4f6; }
.agent-q.done .agent-q-bubble { opacity:0.75; }
.agent-a-bubble { background:#d1fae5; border-radius:0.8rem 0.8rem 0.2rem 0.8rem; padding:0.4rem 0.7rem;
    display:inline-block; margin:0.2rem 0 0 1.5rem; }

/* v1.86 (Audit UX): unsichtbares Label für Screenreader */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* v1.88: Unterbereiche im Agenten-Tab */
/* v2.19: Die Bereichswahl ist Navigation und bleibt EINE Zeile — auf dem
   Telefon seitlich scrollbar statt in drei Reihen umgebrochen. Werkzeuge
   (Diagnose, Historie) sahen vorher aus wie Bereiche; sie stehen jetzt
   darunter und leiser. */
.agent-subnav { display:flex; gap:0.4rem; margin:0.8rem 0 0.2rem; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-bottom:0.2rem; }
.agent-subnav::-webkit-scrollbar { display:none; }
.agent-subtab { border:1px solid var(--border-color, #e5e7eb); background:transparent; border-radius:999px; padding:0.35rem 0.9rem; cursor:pointer; font-size:0.9rem; color:inherit; white-space:nowrap; flex:0 0 auto; scroll-snap-align:start; }
.agent-subtab.active { background:#059669; color:#fff; border-color:#059669; }
/* v2.20: Im Agenten-Tab gibt es EINEN Einstieg. Die globalen Aufgaben-Knöpfe,
   die Suche und der Plusknopf gehören zu den Listen, nicht hierher — auf dem
   Telefon fraßen sie ein Drittel der Höhe. */
body.view-agent #add-item-btn,
body.view-agent #quick-notes-btn,
body.view-agent #bulk-select-btn,
body.view-agent .search-container,
body.view-agent .mobile-fab { display:none !important; }
/* ── v2.22: Die Konsole ───────────────────────────────────────────────
   Der Agent ist kein Formular. Ein dunkler Block, ein Name, ein Lebenszeichen
   und zwei Knöpfe — die einzige laute Stelle im sonst hellen Releaf. */
.gina { background:linear-gradient(158deg,#0d1b17 0%,#11241d 55%,#0a1512 100%); color:#e8f5ef;
        border-radius:20px; padding:0.9rem 1rem 1rem; margin:0 0 0.9rem; box-shadow:0 10px 30px rgba(6,24,18,.25); }
.gina-top { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.6rem; min-height:1.4rem; }
.gina-name { font-weight:650; letter-spacing:0.02em; }
.gina-state { color:#7fd3ae; font-size:0.8rem; margin-left:auto; text-align:right; }
.gina-orb { width:9px; height:9px; border-radius:50%; background:#37d39b; box-shadow:0 0 0 0 rgba(55,211,155,.55); flex:0 0 auto; }
.gina.is-live .gina-orb { animation:gina-pulse 1.6s ease-out infinite; }
.gina.is-busy .gina-orb { background:#facc15; animation:gina-pulse 1s ease-out infinite; }
.gina.is-off .gina-orb { background:#64748b; }
@keyframes gina-pulse { 70% { box-shadow:0 0 0 9px rgba(55,211,155,0); } 100% { box-shadow:0 0 0 0 rgba(55,211,155,0); } }
@media (prefers-reduced-motion:reduce) { .gina .gina-orb { animation:none !important; } }
.gina textarea { width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#e8f5ef;
                 border-radius:12px; padding:0.65rem 0.75rem; font:inherit; font-size:1rem; resize:vertical; }
.gina textarea::placeholder { color:rgba(232,245,239,.45); }
.gina textarea:focus { outline:2px solid #37d39b; outline-offset:1px; }
.gina-row { display:flex; gap:0.5rem; align-items:center; margin-top:0.6rem; }
.gina-btn { width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07);
            color:#e8f5ef; font-size:1.15rem; cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
/* v2.27: »display:flex« schlug das Browser-Verhalten für [hidden] — der rote
   Auflegen-Knopf war IMMER zu sehen, auch ohne Gespräch. Es sah aus, als liefe
   noch eines. Gilt für jeden versteckten Konsolen-Knopf. */
.gina-btn[hidden], .gina [hidden] { display:none !important; }
.gina-btn:hover { background:rgba(255,255,255,.14); }
.gina-mic.is-on { background:#37d39b; color:#06201a; border-color:#37d39b; }
/* v2.25: Aufnahme läuft = roter Puls; Live-Gespräch = roter Auflegen-Knopf statt Mikrofon */
.gina-mic.is-rec { background:#dc2626; color:#fff; border-color:#dc2626; animation:gina-pulse-red 1.2s ease-out infinite; }
.gina-mic.is-wait { opacity:.6; cursor:progress; }
@keyframes gina-pulse-red { 70% { box-shadow:0 0 0 10px rgba(220,38,38,0); } 100% { box-shadow:0 0 0 0 rgba(220,38,38,0); } }
.gina-hangup { background:#dc2626; color:#fff; border-color:#dc2626; }
.gina.is-call .gina-mic, .gina.is-call .gina-live-button { display:none; }
.gina-live-button { border-color:rgba(255,255,255,.28); }
.gina-rec-hint { font-size:0.8rem; color:#f0b4b4; margin-top:0.4rem; }
.gina-phone { border-color:rgba(55,211,155,.5); }
.gina-go { flex:1; min-height:48px; border-radius:14px; border:0; background:#37d39b; color:#06201a; font:inherit;
           font-weight:650; font-size:0.95rem; cursor:pointer; }
.gina-go:disabled { background:rgba(255,255,255,.10); color:rgba(232,245,239,.45); cursor:default; }
.gina-activity-list { list-style:none; margin:0.8rem 0 0; padding:0; font-size:0.85rem; color:#9fe3c4; display:grid; gap:0.25rem; }
.gina-activity-list li::before { content:"› "; color:#37d39b; }
.gina-activity-list li.is-now { color:#e8f5ef; }
.agent-call-state { font-size:0.8rem; color:#7fd3ae; }

/* ── v2.23: Wissen — aufklappbare Bereiche, geordnete Kontakte ───────── */
.agent-fold { border-top:1px solid var(--border-color,#e5e7eb); padding:0.2rem 0 0.4rem; }
.agent-fold > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:0.5rem; padding:0.6rem 0; font-weight:600; }
.agent-fold > summary::-webkit-details-marker { display:none; }
.agent-fold > summary::before { content:"›"; display:inline-block; width:1rem; color:var(--gray-400,#9ca3af); transition:transform .15s; }
.agent-fold[open] > summary::before { transform:rotate(90deg); }
@media (prefers-reduced-motion:reduce) { .agent-fold > summary::before { transition:none; } }
.agent-fold-count { margin-left:auto; font-weight:400; font-size:0.8rem; color:var(--gray-500,#6b7280); }
.agent-fold-sub { margin-top:0.6rem; font-size:0.9rem; }
.agent-fold-sub > summary { cursor:pointer; color:var(--gray-600,#6b7280); text-decoration:underline; text-underline-offset:3px; list-style:none; }
.agent-fold-sub > summary::-webkit-details-marker { display:none; }
.agent-filter { margin:0 0 0.4rem; }
.agent-letter { font-size:0.75rem; font-weight:700; color:var(--gray-500,#6b7280); margin:0.7rem 0 0.1rem; letter-spacing:0.04em; }
.agent-contact { padding:0.35rem 0; gap:0.4rem; }
.agent-contact .agent-c-main { min-width:0; flex:1; }
.agent-contact .agent-c-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agent-contact .agent-c-name small { font-weight:400; color:var(--gray-500,#6b7280); }
.agent-contact .agent-c-meta { font-size:0.8rem; color:var(--gray-600,#6b7280); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agent-c-btns { display:flex; gap:0; flex:0 0 auto; }
.agent-c-btns button { background:none; border:0; min-width:40px; min-height:40px; cursor:pointer; color:var(--gray-500,#6b7280); font-size:1rem; }
.agent-c-btns button:hover { color:var(--gray-800,#374151); }
.agent-know-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin:0.4rem 0 0.2rem; }
.agent-mem { display:flex; gap:0.4rem; align-items:flex-start; padding:0.45rem 0; border-bottom:1px solid var(--border-color,#eee); }
.agent-mem .agent-mem-main { flex:1; min-width:0; }
.agent-mem .agent-mem-meta { font-size:0.78rem; color:var(--gray-500,#6b7280); margin-top:0.1rem; }
.agent-mem .agent-c-btns { flex-direction:row; }
/* Reiter mit Zähler */
.agent-subtab .agent-tab-count { display:inline-block; min-width:1.2rem; padding:0 0.35rem; margin-left:0.3rem; border-radius:999px; background:#dc2626; color:#fff; font-size:0.72rem; line-height:1.3rem; text-align:center; }
.agent-subtab.active .agent-tab-count { background:#fff; color:#059669; }
.agent-done-fold > summary { cursor:pointer; color:var(--gray-600,#6b7280); font-size:0.9rem; padding:0.5rem 0; list-style:none; }
.agent-done-fold > summary::-webkit-details-marker { display:none; }

/* v2.21: Eine Karte ist eine Zeile Titel und eine Zeile Zusatz — keine
   Textwand. Der Titel bricht nicht mehr um, die Zeile darunter hat höchstens
   zwei Zeilen. */
.agent-job > span:first-child { min-width:0; }
.agent-job strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.95rem; }
/* v2.22: In der Liste steht kein Auftragstext mehr — nur Titel, Vorhaben und
   die Aktion. Alles Weitere sieht man beim Öffnen. */
.agent-job .tool { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agent-job-del { background:none; border:0; color:var(--gray-400,#9ca3af); font-size:1.1rem; line-height:1;
                 padding:0.4rem; cursor:pointer; min-width:44px; min-height:44px; }
.agent-job-del:hover { color:#dc2626; }
.agent-job-right { display:flex; align-items:center; gap:0.2rem; flex:0 0 auto; }
.agent-job .agent-badge { flex:0 0 auto; align-self:flex-start; }
.agent-job-plan { margin:-0.2rem 0 0.7rem; }
.agent-group { margin:1rem 0 0.3rem; font-size:0.95rem; color:var(--gray-700,#374151); }
.agent-group:first-child { margin-top:0.2rem; }
.agent-job-head { margin:0 0 0.25rem; font-size:1.05rem; line-height:1.3; }
/* v2.36: Das Ergebnis ist die Hauptsache — es steht oben und trägt Farbe. */
.agent-job-meta { font-size:0.8rem; color:var(--gray-500,#6b7280); margin:0 0 0.8rem; }
.agent-outcome { display:flex; gap:0.6rem; align-items:flex-start; padding:0.7rem 0.8rem; margin:0 0 0.9rem;
                 border-radius:12px; background:var(--gray-100,#f3f4f6); font-size:0.95rem; line-height:1.4; }
.agent-outcome.ok { background:#ecfdf5; }
.agent-outcome.err { background:#fef2f2; }
.agent-outcome-icon { font-weight:700; color:var(--gray-500,#6b7280); }
.agent-outcome.ok .agent-outcome-icon { color:#059669; }
.agent-outcome.err .agent-outcome-icon { color:#dc2626; }
.agent-outcome-head { font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
                      color:var(--gray-500,#6b7280); margin-bottom:0.15rem; }
.agent-call-row { display:flex; gap:0.6rem; align-items:flex-start; padding:0.35rem 0; font-size:0.9rem;
                  border-bottom:1px solid var(--border-color,#f0f0f0); }
.agent-call-row > span:first-child { width:1.1rem; color:var(--gray-500,#6b7280); flex:0 0 auto; }
.agent-job-state { border-left:3px solid var(--border-color,#e5e7eb); padding:0.3rem 0 0.3rem 0.7rem; margin:0 0 0.7rem; font-size:0.9rem; }
.agent-job-state.err { border-left-color:#dc2626; }
.agent-job-state.ok { border-left-color:#059669; }
.agent-job-state div { color:var(--gray-600,#6b7280); margin-top:0.2rem; }
.agent-job-actions { display:flex; gap:0.5rem; flex-wrap:wrap; margin:0 0 0.9rem; }
.agent-job-sub { margin:0.9rem 0 0.3rem; font-size:0.8rem; font-weight:600; color:var(--gray-600,#6b7280); }
.agent-job-instr { margin:0; font-size:0.95rem; max-width:62ch; }
.agent-job-raw { margin-top:1rem; font-size:0.85rem; color:var(--gray-600,#6b7280); }
.agent-job-raw summary { cursor:pointer; }
.agent-step-icon { display:inline-block; width:1.2rem; color:var(--gray-500,#9ca3af); }
/* v2.22: Das Menü lag IN der seitlich scrollenden Leiste — overflow:auto hat es
   unsichtbar abgeschnitten. Es hängt jetzt außerhalb, am rechten Rand. */
.agent-subnav-wrap { display:flex; align-items:center; gap:0.4rem; margin:0.8rem 0 0.2rem; }
.agent-subnav-wrap .agent-subnav { margin:0; flex:1; min-width:0; }
.agent-more { position:relative; flex:0 0 auto; }
.agent-more summary { list-style:none; cursor:pointer; border:1px solid var(--border-color,#e5e7eb); border-radius:999px; padding:0.35rem 0.8rem; font-size:0.9rem; }
.agent-more summary::-webkit-details-marker { display:none; }
.agent-more-menu { position:absolute; right:0; top:2.2rem; z-index:20; background:var(--bg-card,#fff); border:1px solid var(--border-color,#e5e7eb); border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.12); padding:0.3rem; display:flex; flex-direction:column; min-width:12rem; }
.agent-more-menu button { background:none; border:0; text-align:left; padding:0.55rem 0.7rem; font:inherit; font-size:0.9rem; border-radius:8px; cursor:pointer; color:inherit; }
.agent-more-menu button:hover { background:var(--gray-100,#f3f4f6); }
.agent-tools { display:flex; gap:1rem; margin:0 0 0.8rem; flex-wrap:wrap; }
.agent-tools button { background:none; border:0; padding:0; font:inherit; font-size:0.85rem; color:var(--gray-600, #6b7280); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.agent-tools button:hover { color:var(--gray-800, #374151); }
.agent-about { margin:0.6rem 0 0; font-size:0.9rem; color:var(--gray-600, #6b7280); }
.agent-about summary { cursor:pointer; list-style:none; text-decoration:underline; text-underline-offset:3px; }
.agent-about summary::-webkit-details-marker { display:none; }
.agent-about p { margin:0.5rem 0 0; max-width:62ch; }
/* v2.19: Erklärtexte gehören unter das Label, nicht in dieselbe Zeile — und
   der Haken steht oben, damit er zur ersten Zeile gehört, nicht zur Mitte. */
.checkbox-label { align-items:flex-start; }
.checkbox-label input[type="checkbox"] { margin-top:0.15rem; flex:0 0 auto; }
.checkbox-label small { display:block; margin-top:0.15rem; font-weight:400; color:var(--gray-600, #6b7280); max-width:62ch; }
.agent-contact-search { display:flex; gap:0.4rem; margin:0.5rem 0; }
.agent-contact-search input { flex:1; }
.agent-contact-form { display:grid; gap:0.4rem; margin:0.6rem 0 0.8rem; }
@media (min-width:700px) { .agent-contact-form { grid-template-columns:1fr 1fr; } .agent-contact-form input:nth-child(5), .agent-contact-form button { grid-column:1 / -1; } }
.agent-contact { display:flex; justify-content:space-between; gap:0.6rem; padding:0.5rem 0; border-bottom:1px solid var(--border-color, #eee); align-items:flex-start; }
.agent-contact-cand { padding:0.45rem 0.6rem; border:1px solid var(--border-color,#e5e7eb); border-radius:8px; margin:0.3rem 0; display:flex; justify-content:space-between; gap:0.5rem; align-items:center; }
.agent-call { padding:0.55rem 0; border-bottom:1px solid var(--border-color,#eee); }
.agent-call summary { cursor:pointer; }
.agent-call-tx { font-size:0.85rem; margin-top:0.4rem; white-space:pre-wrap; }
.agent-rec { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; margin:0.4rem 0; } .agent-rec audio { max-width:100%; height:32px; }
.agent-contact-search { flex-wrap: wrap; } .agent-contact-search input { flex: 1 1 100%; } @media (min-width:700px) { .agent-contact-search input { flex: 1 1 auto; } }

/* v2.51: Ergebnis-Posten eines Auftrags — was entstanden ist */
.agent-result-list { list-style: none; margin: .25rem 0 0; padding: 0; }
.agent-result-item { margin: .3rem 0; line-height: 1.4; }
.agent-result-item .agent-result-open { margin-left: .4rem; padding: .1rem .55rem; }
.agent-result-lines { margin: .2rem 0 0 1rem; padding: 0; font-size: .9em; opacity: .85; }
.agent-result-lines li { margin: .1rem 0; }

/* v2.52: laufende Version, klein neben dem Namen */
.app-version { font-size: .72em; opacity: .55; margin-left: .3em; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* v2.54: »Gerade besprochen« — ein Auftrag nach dem anderen; Mailtext in der Plan-Karte */
.agent-now { margin: .25rem 0 1rem; }
.agent-now-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.agent-now-nav { display: inline-flex; align-items: center; gap: .35rem; }
.agent-now-pos { font-size: .85em; opacity: .7; font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: center; }
.agent-now-card { border-width: 2px; }
.agent-now-clear { margin-top: .4rem; }
.agent-more-fold > summary { cursor: pointer; margin: .5rem 0; opacity: .8; }
.agent-edit { width: 100%; box-sizing: border-box; font: inherit; margin-top: .2rem; }
.agent-edit-save { margin-top: .35rem; }
.agent-result-link { margin-left: .4rem; }

/* v2.55: Arbeitsfläche — mehrere Auftragskarten, jede mit eigenem Zustand */
.agent-ws { margin: .5rem 0 1rem; }
.agent-ws-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.agent-ws-tools { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.agent-ws-cards { display: grid; gap: .6rem; }
.agent-card { border: 1px solid rgba(127,127,127,.28); border-radius: 12px; padding: .7rem .8rem; transition: box-shadow .3s ease, border-color .3s ease; }
.agent-card.tone-attention { border-color: rgba(217,119,6,.6); }
.agent-card.tone-muted { opacity: .7; }
.agent-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.agent-card-title { line-height: 1.3; }
.agent-card-state { font-size: .78em; padding: .12rem .55rem; border-radius: 999px; white-space: nowrap; background: rgba(127,127,127,.15); }
.agent-card-state.tone-busy { background: rgba(59,130,246,.16); }
.agent-card-state.tone-attention, .agent-card-state.tone-warn { background: rgba(217,119,6,.2); }
.agent-card-state.tone-ok { background: rgba(22,163,74,.18); }
.agent-card-state.tone-err { background: rgba(220,38,38,.18); }
.agent-card-body > * { margin-top: .45rem; }
.agent-card-activity, .agent-card-time { font-size: .85em; opacity: .72; }
.agent-card-failure { font-size: .9em; color: #b91c1c; }
.agent-card-q { font-weight: 600; }
.agent-card-opts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.agent-card-answer { display: flex; gap: .35rem; margin-top: .35rem; }
.agent-card-answer input { flex: 1; min-width: 0; }
.agent-card-mail input, .agent-card-mail textarea { width: 100%; box-sizing: border-box; font: inherit; margin-top: .25rem; }
.agent-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .45rem; }
.agent-card-new { animation: agentCardIn .35s ease-out; }
.agent-card-changed { box-shadow: 0 0 0 2px rgba(59,130,246,.3); }
@keyframes agentCardIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .agent-card-new { animation: none; } .agent-card { transition: none; } }
@media (hover: none) and (pointer: coarse) { .agent-card input, .agent-card textarea { font-size: 16px; } }

/* v2.56: Karten passen in jede Breite (iPhone-Screenshot 15.09.: alles rechts abgeschnitten —
   die Grid-Spalte wuchs mit nicht umbrechbarem Inhalt über den Bildschirm hinaus) */
.agent-ws, .agent-ws-cards, .agent-card { min-width: 0; max-width: 100%; box-sizing: border-box; }
.agent-ws-cards { grid-template-columns: minmax(0, 1fr); }
.agent-card { overflow-wrap: anywhere; }
.agent-card-head { flex-wrap: wrap; align-items: flex-start; }
.agent-card-title { flex: 1 1 12rem; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.agent-card-state { white-space: normal; max-width: 100%; }
.agent-card-answer { flex-wrap: wrap; }
.agent-card-answer input { flex: 1 1 10rem; }
.agent-card input, .agent-card textarea { max-width: 100%; }
.agent-card .agent-arg-v { white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-card-foot { flex-wrap: wrap; gap: .35rem; }
.agent-ws-tools .btn { white-space: normal; }
/* v2.56: ältere offene Aufträge kompakt */
.agent-ws-older { margin-top: .8rem; }
.agent-ws-older > summary { cursor: pointer; opacity: .8; margin-bottom: .35rem; }
.agent-ws-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .45rem 0; border-top: 1px solid rgba(127,127,127,.18); min-width: 0; }
.agent-ws-row-title { flex: 1 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-ws-row-actions { display: inline-flex; gap: .3rem; }

/* v2.57: Link im Mehr-Menü sieht aus wie die Knöpfe daneben */
a.agent-more-link { display: block; text-decoration: none; color: inherit; }

/* v3.12.0: Die v2.61-Versteckregel für den Coach ist überflüssig — Charlie und der AI-Coach sind entfernt. */

/* v2.68: Fenster in der App (statt Seiten ohne Zurück-Knopf) */
.rl-inapp { position: fixed; inset: 0; z-index: 9800; display: flex; flex-direction: column; background: #fff; }
.rl-inapp[hidden] { display: none; }
.rl-inapp-bar { display: flex; align-items: center; gap: .5rem; padding: calc(env(safe-area-inset-top, 0px) + .5rem) .75rem .5rem;
                border-bottom: 1px solid rgba(127,127,127,.25); background: #fff; }
.rl-inapp-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-inapp-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.rl-file-offer { position: fixed; left: .75rem; right: .75rem; bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem); z-index: 9900;
                 display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem .8rem; border-radius: 12px;
                 background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.rl-file-offer[hidden] { display: none; }
.rl-file-offer span { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
/* v2.68: Screenshot-Modus — innere Scrollbereiche aufklappen, damit die ganze Seite aufs Bild kommt */
html.rl-screen .app-container { height: auto !important; min-height: 100vh; overflow: visible !important; }
html.rl-screen .main-content, html.rl-screen .content-area { height: auto !important; max-height: none !important; overflow: visible !important; }

/* v2.70 (UX-Bericht): beschriftete Sprachknöpfe, leere Arbeitsfläche, Herkunfts-Tag */
.gina-btn { flex-direction: column; gap: 0; width: 52px; height: 52px; }
.gina-btn small { font-size: .5rem; line-height: 1; letter-spacing: .01em; opacity: .85; }
.agent-ws-empty { padding: .9rem .8rem; border: 1px dashed rgba(127,127,127,.35); border-radius: 12px; opacity: .8; }
.agent-ws-tag { font-size: .7em; padding: .05rem .4rem; border-radius: 999px; background: rgba(127,127,127,.18); vertical-align: middle; font-weight: 500; }

/* ═════ v2.71: Agent nach dem UX-Entwurf (16.09.) — auf #agent-view.ag2 begrenzt ═════ */
.ag2 { --r-bg:#f7f9f8; --r-panel:#ffffff; --r-text:#192d25; --r-sub:#617269; --r-line:#e2e9e4; --r-green:#167454;
       --r-tint:#eaf4ee; --r-amber:#856015; --r-warn:#faf4e5; --r-red:#b42318; --r-redtint:#fdeceb;
       color:var(--r-text); background:var(--r-bg); margin:-1.5rem -2rem; min-height:calc(100dvh - 60px); }
.ag2 .ag2-frame { min-width:0; }
.ag2 button, .ag2 input, .ag2 textarea { font:inherit; }
.ag2 .ag2-small { font-size:12px; color:var(--r-sub); }
.ag2 .ag2-btn { border:0; background:transparent; color:var(--r-text); border-radius:9px; padding:9px 12px; min-height:40px;
                cursor:pointer; font-size:14px; line-height:1.2; display:inline-flex; align-items:center; justify-content:center; gap:6px;
                width:auto; height:auto; flex-direction:row; }
.ag2 .ag2-btn:hover { background:var(--r-tint); }
.ag2 .ag2-btn:disabled { opacity:.45; cursor:default; background:transparent; }
.ag2 .ag2-btn:focus-visible, .ag2 textarea:focus-visible, .ag2 .agent-subtab:focus-visible { outline:2px solid var(--r-green); outline-offset:3px; }
.ag2 .ag2-btn-line { box-shadow:inset 0 0 0 1px var(--r-line); background:var(--r-panel); }
.ag2 .ag2-btn-primary { background:var(--r-green); color:#fff; font-weight:600; }
.ag2 .ag2-btn-primary:hover { background:#11603f; }
.ag2 .ag2-btn-primary:disabled { background:var(--r-green); color:#fff; opacity:.4; }
.ag2 .ag2-btn-ghost { color:var(--r-sub); }
.ag2 .ag2-btn-danger { background:var(--r-red); color:#fff; font-weight:600; }
.ag2 .ag2-btn[hidden], .ag2 .gina-btn[hidden] { display:none !important; }
/* Kopfzeile */
.ag2 .ag2-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 28px;
                 border-bottom:1px solid var(--r-line); background:var(--r-panel); }
.ag2 .ag2-id { display:flex; align-items:center; gap:10px; min-width:0; }
.ag2 .ag2-avatar { width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; background:var(--r-tint);
                   color:var(--r-green); border-radius:12px; font-weight:650; font-size:19px; }
.ag2 .ag2-idtext { min-width:0; }
.ag2 .ag2-name { font-weight:650; font-size:17px; display:flex; align-items:center; gap:7px; }
.ag2 .ag2-dot { width:7px; height:7px; border-radius:50%; background:transparent; }
.ag2 .ag2-head.is-live .ag2-dot { background:var(--r-green); }
.ag2 .ag2-head.is-off .ag2-dot { background:#98a39c; }
.ag2 .ag2-head.is-busy .ag2-dot, .ag2 .ag2-head.is-call .ag2-dot { background:#d99a0b; animation:ag2-pulse 1.4s ease-out infinite; }
.ag2 .ag2-sub { font-size:12px; color:var(--r-sub); display:flex; flex-wrap:wrap; gap:0 6px; }
.ag2 .ag2-sub .gina-state:not(:empty)::before, .ag2 .ag2-sub .agent-call-state:not(:empty)::before { content:"· "; }
.ag2 .ag2-head-actions { display:flex; gap:6px; flex:0 0 auto; }
.ag2 .ag2-head.is-call #ag2-voice-toggle { display:none; }
@keyframes ag2-pulse { 0% { box-shadow:0 0 0 0 rgba(217,154,11,.45); } 100% { box-shadow:0 0 0 7px rgba(217,154,11,0); } }
/* Sprachauswahl und Live-Schritte */
.ag2 .ag2-modes { padding:12px 28px; background:var(--r-panel); border-bottom:1px solid var(--r-line); }
.ag2 .ag2-modes-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; align-items:center; }
.ag2 .ag2-x { margin-left:auto; font-size:20px; color:var(--r-sub); }
.ag2 .ag2-hint { margin:8px 0 0; }
.ag2 .ag2-steps { list-style:none; margin:0; padding:10px 28px; color:var(--r-sub); background:var(--r-panel);
                  border-bottom:1px solid var(--r-line); font-size:13px; display:grid; gap:2px; }
.ag2 .ag2-steps li::before { content:"› "; color:var(--r-green); }
.ag2 .ag2-steps li.is-now { color:var(--r-text); }
.ag2 .ag2-banner:empty { display:none; }
.ag2 .ag2-banner { padding:10px 28px 0; }
.ag2 .agent-live, .ag2 .agent-plan { margin:12px 28px 0; }
/* Bereiche */
.ag2 .agent-subnav-wrap { margin:0; padding:10px 28px 0; gap:8px; background:transparent; }
.ag2 .agent-subnav { gap:18px; margin:0; }
.ag2 .agent-subtab { border:0; border-radius:0; background:transparent; color:var(--r-sub); padding:10px 2px;
                     border-bottom:2px solid transparent; font-size:14px; }
.ag2 .agent-subtab.active { background:transparent; color:var(--r-text); border-bottom-color:var(--r-green); font-weight:600; }
.ag2 .agent-subtab .agent-tab-count { background:var(--r-amber); }
.ag2 .agent-subtab.active .agent-tab-count { background:var(--r-amber); color:#fff; }
.ag2 .agent-more summary { padding:10px; color:var(--r-sub); list-style:none; cursor:pointer; }
.ag2 .agent-more summary::-webkit-details-marker { display:none; }
/* Inhalt */
.ag2 .ag2-content { max-width:910px; margin:0 auto; padding:22px 28px 28px; }
.ag2 .ag2-section-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.ag2 .ag2-section-head h2, .ag2 .ag2-h2 { font-size:21px; font-weight:600; letter-spacing:-.4px; margin:0; }
.ag2 .agent-panel.agent-jobs { background:transparent; border:0; padding:0; box-shadow:none; }
.ag2 .agent-panel h4 { font-size:14px; font-weight:600; }
/* Karten */
.ag2 .agent-ws { margin:0; }
.ag2 .agent-ws-head { display:flex; justify-content:flex-end; margin:-6px 0 8px; }
.ag2 .agent-ws-head .agent-group { display:none; }
.ag2 .agent-ws-tools .btn { background:transparent; border:0; color:var(--r-sub); font-size:12px; padding:4px 6px; min-height:0; box-shadow:none; }
.ag2 .agent-ws-cards { display:grid; gap:12px; }
.ag2 .agent-card { background:var(--r-panel); border:1px solid var(--r-line); border-radius:14px; padding:17px 19px;
                   box-shadow:none; min-width:0; }
.ag2 .agent-card.tone-attention { border-color:#e7d3a6; }
.ag2 .agent-card.tone-err { border-color:#f1c4bf; }
.ag2 .agent-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ag2 .agent-card-title { font-size:15px; font-weight:600; line-height:1.35; }
.ag2 .agent-card-state { background:transparent !important; border:0 !important; padding:0 !important; font-size:12px; color:var(--r-sub);
                         display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-weight:500; }
.ag2 .agent-card-state::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.ag2 .agent-card-state.tone-attention, .ag2 .agent-card-state.tone-warn { color:var(--r-amber); }
.ag2 .agent-card-state.tone-ok { color:var(--r-green); }
.ag2 .agent-card-state.tone-err { color:var(--r-red); }
.ag2 .agent-card-state.tone-busy { color:var(--r-green); }
.ag2 .agent-card-state.tone-busy::before { animation:ag2-pulse 1.4s ease-out infinite; }
.ag2 .agent-card-body { margin-top:6px; }
.ag2 .agent-card-body > * + * { margin-top:12px; }
.ag2 .agent-card-q, .ag2 .agent-card-approval, .ag2 .agent-card-mail { border-top:1px solid var(--r-line); padding-top:12px; }
.ag2 .agent-card .btn { border-radius:9px; min-height:40px; padding:8px 12px; font-size:14px; box-shadow:none; }
.ag2 .agent-card .btn-primary { background:var(--r-green); border-color:var(--r-green); color:#fff; font-weight:600; }
.ag2 .agent-card .btn-secondary { background:var(--r-panel); border:1px solid var(--r-line); color:var(--r-text); }
.ag2 .agent-card input[type="text"], .ag2 .agent-card textarea { width:100%; border:1px solid var(--r-line); border-radius:8px;
    background:var(--r-bg); padding:10px; font-size:16px; margin-top:6px; }
.ag2 .agent-card-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }
.ag2 .agent-card-foot .agent-card-opts { display:flex; gap:4px; flex-wrap:wrap; }
.ag2 .agent-card-foot .btn { background:transparent; border:0; color:var(--r-sub); font-size:12px; min-height:36px; padding:6px 8px; }
.ag2 .agent-card-foot .btn:hover { background:var(--r-tint); }
.ag2 .agent-card-time { font-size:12px; color:var(--r-sub); }
.ag2 .agent-card-failure { background:var(--r-redtint); color:var(--r-red); border-radius:9px; padding:9px 12px; }
.ag2 .agent-result-list { margin:0; padding-left:0; list-style:none; }
.ag2 .agent-result-item { color:var(--r-green); }
.ag2 .agent-ws-empty { background:var(--r-panel); border:1px dashed var(--r-line); border-radius:14px; padding:18px; color:var(--r-sub); opacity:1; }
/* Zuletzt erledigt, ältere offene */
.ag2 .ag2-done { margin-top:22px; }
.ag2 .ag2-caption { color:var(--r-sub); font-size:12px; margin-bottom:2px; }
.ag2 .ag2-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--r-line); }
.ag2 .ag2-row > div { min-width:0; overflow-wrap:anywhere; }
.ag2 .ag2-row-title { color:var(--r-green); font-weight:600; font-size:14px; }
.ag2 .ag2-row .btn, .ag2 .ag2-row .ag2-btn { background:transparent; border:0; color:var(--r-sub); font-size:13px; min-height:40px; box-shadow:none; }
.ag2 .ag2-more-link { margin-top:6px; color:var(--r-sub); font-size:12px; }
.ag2 .agent-ws-older { margin-top:18px; }
.ag2 .agent-ws-older summary { color:var(--r-sub); font-size:12px; cursor:pointer; }
.ag2 .agent-ws-row { border-bottom:1px solid var(--r-line); padding:10px 0; }
/* Postausgang */
.ag2 #agent-mailbox { margin-top:14px; background:var(--r-panel); border:1px solid var(--r-line); border-radius:14px; padding:14px 16px; }
/* Composer */
.ag2 .ag2-composer { margin-top:24px; padding:13px 15px; background:var(--r-panel); border:1px solid var(--r-line); border-radius:15px;
                     box-shadow:0 6px 20px rgba(27,56,37,.035); }
.ag2 .ag2-composer textarea { display:block; width:100%; min-height:60px; resize:vertical; border:0; background:transparent;
                              padding:4px; font-size:16px; color:var(--r-text); box-shadow:none; outline-offset:2px; }
.ag2 .ag2-composer textarea::placeholder { color:var(--r-sub); }
.ag2 .ag2-composer-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:4px; }
.ag2 .ag2-composer-foot > .ag2-small { padding-left:4px; }
.ag2 .ag2-composer-controls { display:flex; gap:5px; }
.ag2 .gina-mic.is-rec { color:var(--r-red); box-shadow:inset 0 0 0 1px var(--r-red); }
.ag2 .gina-mic.is-rec::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--r-red); animation:ag2-pulse 1.2s ease-out infinite; }
.ag2 .gina-mic.is-wait { opacity:.6; }
@media (max-width:768px) {
  .ag2 { margin:-1rem; }
  .ag2 .ag2-head { padding:14px 16px; }
  .ag2 .ag2-modes, .ag2 .ag2-steps { padding-left:16px; padding-right:16px; }
  .ag2 .agent-subnav-wrap { padding:6px 16px 0; }
  .ag2 .agent-subnav { gap:14px; }
  .ag2 .ag2-content { padding:18px 16px 24px; }
  .ag2 .agent-live, .ag2 .agent-plan { margin:12px 16px 0; }
  .ag2 .ag2-banner { padding:10px 16px 0; }
  .ag2 .agent-card { padding:15px; }
  .ag2 .agent-card-head { flex-wrap:wrap; gap:6px; }
  .ag2 .agent-card-state { white-space:normal; }
  .ag2 .ag2-btn, .ag2 .agent-card .btn { min-height:44px; }
}
@media (max-width:420px) {
  .ag2 .ag2-head { flex-wrap:wrap; }
  .ag2 .ag2-composer-foot { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ag2 *, .ag2 *::before { animation:none !important; transition:none !important; }
}

/* v2.71 — Korrekturen nach dem ersten gerenderten Bild */
.ag2 .ag2-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.ag2 .ag2-status { grid-column:1 / -1; font-size:12px; color:var(--r-sub); display:flex; gap:6px; flex-wrap:wrap; }
.ag2 .ag2-status:not(:has(span:not(:empty))) { display:none; }
.ag2 .ag2-status .gina-state, .ag2 .ag2-status .agent-call-state { color:var(--r-sub) !important; text-align:left; font-size:12px; margin:0; }
.ag2 .ag2-steps[hidden], .ag2 .ag2-modes[hidden] { display:none !important; }
.ag2 [data-ws-action="toggle-done"] { display:none !important; }
.ag2 .agent-more summary { border:0 !important; background:transparent !important; border-radius:9px; min-width:40px; min-height:40px;
                           width:auto; height:auto; display:flex; align-items:center; justify-content:center; box-shadow:none !important; }
.ag2 .agent-more summary:hover { background:var(--r-tint) !important; }
.ag2 .agent-subtab .agent-tab-count { background:var(--r-warn); color:var(--r-amber); font-weight:600; }
.ag2 .agent-subtab.active .agent-tab-count { background:var(--r-warn); color:var(--r-amber); }
.ag2 .agent-card-q, .ag2 .agent-card .agent-card-q { font-weight:400; font-size:15px; line-height:1.45; }
#agent-view.ag2 .ag2-composer textarea { border:0 !important; box-shadow:none !important; background:transparent !important; border-radius:0; }
/* Kopfzeile, Reiter und Inhalt auf einer Linie — auch auf breiten Bildschirmen */
.ag2 .ag2-head, .ag2 .ag2-modes, .ag2 .ag2-steps, .ag2 .agent-subnav-wrap, .ag2 .ag2-banner {
    padding-left:max(28px, calc((100% - 910px) / 2 + 28px)); padding-right:max(28px, calc((100% - 910px) / 2 + 28px)); }
.ag2 .agent-live, .ag2 .agent-plan { margin-left:max(28px, calc((100% - 910px) / 2 + 28px)); margin-right:max(28px, calc((100% - 910px) / 2 + 28px)); }
/* Mail auf der Karte: Zusammenfassung, Editor erst auf »Entwurf ansehen« */
.ag2 .ag2-mail > summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:pointer; flex-wrap:wrap; }
.ag2 .ag2-mail > summary::-webkit-details-marker { display:none; }
.ag2 .ag2-mail-meta { min-width:0; overflow-wrap:anywhere; }
.ag2 .ag2-mail-open { box-shadow:inset 0 0 0 1px var(--r-line); border-radius:9px; padding:8px 12px; min-height:40px; display:inline-flex; align-items:center; }
.ag2 .ag2-mail[open] .ag2-mail-open { background:var(--r-tint); }
.ag2 .ag2-mail[open] .ag2-mail-open::after { content:" ▴"; }
@media (max-width:768px) {
  .ag2 .ag2-head, .ag2 .ag2-modes, .ag2 .ag2-steps, .ag2 .agent-subnav-wrap, .ag2 .ag2-banner { padding-left:16px; padding-right:16px; }
  .ag2 .agent-live, .ag2 .agent-plan { margin-left:16px; margin-right:16px; }
}
@media (max-width:420px) { .ag2 .ag2-head { flex-wrap:nowrap; } }

/* ═════ v2.72: UX-Feedback Runde 2 ═════ */
/* Kopfzeile: Status in der Namenszeile statt eigener Zeile */
.ag2 .ag2-sub { flex-wrap:nowrap; min-width:0; overflow:hidden; }
.ag2 .ag2-sub > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ag2 .ag2-sub:has(.gina-state:not(:empty)) #ag2-scope { display:none; }
.ag2 .ag2-sub .gina-state:not(:empty)::before, .ag2 .ag2-sub .agent-call-state:not(:empty)::before { content:none; }
.ag2 .ag2-sub .gina-state, .ag2 .ag2-sub .agent-call-state { color:var(--r-sub) !important; font-size:12px; margin:0; text-align:left; }
.ag2 .ag2-sub .agent-call-state:not(:empty) { margin-left:6px; }
.ag2 .ag2-head { padding-top:12px; padding-bottom:12px; }
.ag2 .agent-ws-head { display:none; }
.ag2 .ag2-content { padding-top:16px; }
.ag2 .ag2-section-head { margin-bottom:10px; }
/* Karten: Titel dunkel, Eckdaten klein */
.ag2 .ag2-card-meta { font-size:12px; color:var(--r-sub); margin-top:2px; }
/* v3.16.27 (Ben 14.10.): Herkunft, Korrekturen und Anruf mit Mitschrift auf der Karte */
.ag2-card-origin { font-size:12px; color:var(--r-sub, #6b7280); margin-top:2px; }
.agent-card-chain, .agent-card-call { margin-top:8px; font-size:13px; }
.agent-card-chain > summary, .agent-card-tx > summary { cursor:pointer; font-size:12px; color:var(--r-sub, #6b7280); }
.agent-card-chain ol, .agent-job-chain { margin:6px 0 0 18px; padding:0; display:grid; gap:4px; overflow-wrap:anywhere; }
.agent-card-call { border:1px solid var(--r-line, rgba(0,0,0,.08)); border-radius:10px; padding:8px 10px; }
.agent-card-call.live { border-color:rgba(16,185,129,.55); box-shadow:0 0 0 3px rgba(16,185,129,.12); }
.agent-card-call-head { font-weight:600; overflow-wrap:anywhere; }
.agent-card-call-sum { margin-top:4px; overflow-wrap:anywhere; }
.agent-card-tx { margin-top:6px; }
.agent-card-tx .agent-tx-line { margin-top:4px; line-height:1.4; overflow-wrap:anywhere; }
.agent-card-tx .agent-tx-me { color:var(--r-sub, #4b5563); }
.ag2 .agent-ws-empty { padding:12px 14px; font-size:13px; border-radius:12px; }
/* Ältere offene: Karte mit Hauptknopf und Menü */
.ag2 .agent-ws-older { margin-top:16px; }
.ag2 .agent-ws-older > summary { list-style:none; font-size:12px; color:var(--r-sub); margin-bottom:8px; }
.ag2 .agent-ws-older > summary::-webkit-details-marker { display:none; }
.ag2 .agent-ws-older-list { display:grid; gap:10px; }
.ag2 .agent-ws-row.ag2-mini { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--r-panel);
    border:1px solid var(--r-line); border-radius:14px; padding:14px 16px; }
.ag2 .ag2-mini-main { min-width:0; flex:1; }
.ag2 .ag2-mini-title { font-weight:600; font-size:15px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag2 .ag2-mini-state { margin-top:3px; }
.ag2 .ag2-mini-why { font-size:12px; color:var(--r-sub); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag2 .ag2-mini-actions { display:flex; align-items:center; gap:4px; flex:0 0 auto; position:relative; }
.ag2 .ag2-mini-actions .btn { min-height:40px; border-radius:9px; background:var(--r-panel); color:var(--r-text); font-size:14px; padding:8px 12px; }
.ag2 .ag2-menu { position:relative; }
.ag2 .ag2-menu > summary { list-style:none; cursor:pointer; min-width:40px; min-height:40px; display:flex; align-items:center;
    justify-content:center; border-radius:9px; color:var(--r-sub); font-size:18px; }
.ag2 .ag2-menu > summary::-webkit-details-marker { display:none; }
.ag2 .ag2-menu > summary:hover { background:var(--r-tint); }
.ag2 .ag2-menu-list { position:absolute; right:0; top:calc(100% + 4px); z-index:30; background:var(--r-panel); border:1px solid var(--r-line);
    border-radius:12px; box-shadow:0 8px 24px rgba(27,56,37,.12); padding:4px; min-width:150px; display:grid; }
.ag2 .ag2-menu-list button { border:0; background:transparent; text-align:left; padding:10px 12px; border-radius:8px; font-size:14px; color:var(--r-text); cursor:pointer; min-height:40px; }
.ag2 .ag2-menu-list button:hover { background:var(--r-tint); }
.ag2 .ag2-menu-list button[data-action="delete"] { color:var(--r-red); }
/* Zuletzt erledigt: kompakt, in einer Karte, Titel dunkel, Haken grün */
.ag2 .ag2-done-list { background:var(--r-panel); border:1px solid var(--r-line); border-radius:14px; padding:0 16px; }
.ag2 .ag2-done-list .ag2-row:last-child { border-bottom:0; }
.ag2 .ag2-row-title { color:var(--r-text); font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag2 .ag2-row-title::before { content:"✓"; color:var(--r-green); margin-right:6px; font-weight:700; }
.ag2 .ag2-row > div { flex:1; }
.ag2 .ag2-row .ag2-small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Sprachwahl: Optionen mit Unterzeile; auf dem Handy als Blatt von unten */
.ag2 .ag2-sheet-head { display:flex; align-items:center; justify-content:space-between; }
.ag2 .ag2-opt { flex-direction:column; align-items:flex-start; gap:1px; box-shadow:inset 0 0 0 1px var(--r-line); background:var(--r-panel); text-align:left; }
.ag2 .ag2-opt-t { font-weight:600; font-size:14px; }
.ag2 .ag2-opt-s { font-size:12px; color:var(--r-sub); }
.ag2 .ag2-x { margin-left:0; }
/* Wissen: keine doppelte Überschrift */
.ag2 .agent-know-head > .tool { display:none; }
.ag2 .agent-know-head { justify-content:flex-end; }
@media (max-width:768px) {
  .ag2 .ag2-modes { position:fixed; inset:0; z-index:9600; background:rgba(15,30,22,.28); padding:0; border:0; display:flex; align-items:flex-end; }
  .ag2 .ag2-modes[hidden] { display:none !important; }
  .ag2 .ag2-sheet { width:100%; background:var(--r-panel); border-radius:16px 16px 0 0; padding:14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
      box-shadow:0 -8px 24px rgba(0,0,0,.12); }
  .ag2 .ag2-modes-row { flex-direction:column; align-items:stretch; gap:8px; margin-top:8px; }
  .ag2 .ag2-opt { width:100%; min-height:56px; padding:10px 14px; }
  .ag2 .agent-ws-row.ag2-mini { padding:12px 14px; }
  .ag2 .ag2-head { padding-top:10px; padding-bottom:10px; }
}
.ag2 .ag2-mini-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* ══ v3.02: Licht (Hue) ══ */
.light-root { max-width: 1100px; }
.light-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.light-head h2 { margin:0; }
.light-head-actions { display:flex; gap:8px; }
.light-section { margin: 18px 0 26px; }
.light-section h3 { margin: 0 0 10px; }
.light-muted { color: var(--r-sub, #6b7280); font-size: .9rem; }
.light-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.light-card { border:1px solid var(--r-line, #e5e7eb); border-radius:12px; padding:12px; background: var(--r-panel, #fff); }
.light-card.is-on { border-color: #f5b301; box-shadow: 0 0 0 2px rgba(245,179,1,.18); }
.light-card-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.light-card-head b { flex:1; }
.light-tag { font-size:.75rem; color: var(--r-sub, #6b7280); border:1px solid var(--r-line, #e5e7eb); border-radius:999px; padding:1px 8px; }
.light-range { width:100%; accent-color:#f5b301; }
.light-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.light-chip { border:1px solid var(--r-line, #e5e7eb); background: var(--r-bg, #f9fafb); color: inherit; border-radius:999px; padding:4px 10px; font-size:.85rem; cursor:pointer; }
.light-chip:hover { border-color:#f5b301; }
.light-toggle { position:relative; width:42px; height:24px; flex:none; }
.light-toggle input { opacity:0; width:0; height:0; }
.light-toggle span { position:absolute; inset:0; background: var(--r-line, #d1d5db); border-radius:999px; transition:.2s; cursor:pointer; }
.light-toggle span::after { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.light-toggle input:checked + span { background:#f5b301; }
.light-toggle input:checked + span::after { transform: translateX(18px); }
.light-toggle input:focus-visible + span { outline:2px solid #f5b301; outline-offset:2px; }
.light-lamps-room h4 { margin: 12px 0 6px; font-size:.95rem; }
.light-row { display:grid; grid-template-columns: minmax(120px, 1fr) minmax(100px, 2fr) auto; gap:12px; align-items:center; padding:6px 0; border-bottom:1px solid var(--r-line, #eee); }
.light-row.is-on .light-row-name { font-weight:600; }
.light-switch { border:1px solid var(--r-line, #e5e7eb); border-radius:12px; padding:12px; margin-bottom:12px; background: var(--r-panel, #fff); }
.light-switch-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:8px; }
.light-taste { display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--r-line, #eee); transition: background .3s; }
.light-taste.is-learned { background: rgba(245,179,1,.18); border-radius:8px; }
.light-taste-nr { width:30px; height:30px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #f5b301; font-weight:700; }
.light-taste-body { flex:1; min-width:0; }
.light-editor { border:1px dashed #f5b301; border-radius:10px; padding:12px; margin:6px 0 10px 42px; display:grid; gap:10px; }
.light-field { display:grid; gap:4px; }
.light-ed-room { margin:4px 0; }
.light-check { display:inline-flex; align-items:center; gap:6px; margin-right:12px; }
.light-ed-actions { display:flex; gap:8px; }

/* v3.16.93: Smart Home — Fußbodenheizung (Schlüter) und Licht (Hue) in einem Tab */
/* Der Tab nennt die Seite schon — die Überschriften darunter nicht doppelt */
.sh-root .light-head h2 { display:none; }
.sh-root .light-head { justify-content:flex-end; min-height:0; }
.sh-root { max-width: 1100px; }
.sh-tabs { display:inline-flex; gap:4px; padding:4px; margin:0 0 14px; border:1px solid var(--r-line, #e5e7eb); border-radius:12px; background: var(--r-bg, #f9fafb); }
.sh-tab { border:0; background:transparent; color:inherit; font:inherit; font-weight:600; padding:8px 14px; border-radius:9px; cursor:pointer; min-height:40px; }
.sh-tab .sh-kurz { display:none; }
.sh-tab.active { background: var(--r-panel, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sh-tab:focus-visible { outline:2px solid #e8590c; outline-offset:2px; }
.heizung-root { max-width: 620px; }
.hz-card { border:1px solid var(--r-line, #e5e7eb); border-radius:14px; padding:14px; background: var(--r-panel, #fff); margin-bottom:14px; }
.hz-card.is-heating { border-color:#e8590c; box-shadow: 0 0 0 2px rgba(232,89,12,.16); }
.hz-card.is-offline { opacity:.75; }
.hz-card.is-off .hz-mid { color: var(--r-sub, #6b7280); }
.hz-card h3 { margin:0 0 8px; }
.hz-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.hz-name { font-weight:700; font-size:1.05rem; }
.hz-badge { font-size:.8rem; font-weight:600; border-radius:999px; padding:3px 10px; border:1px solid var(--r-line, #e5e7eb); white-space:nowrap; }
.hz-badge.hz-heizt { background:#e8590c; border-color:#e8590c; color:#fff; }
.hz-badge.hz-offline { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.hz-temps { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 6px; flex-wrap:wrap; }
.hz-ist { display:flex; flex-direction:column; }
.hz-big { font-size:2.4rem; font-weight:700; line-height:1.1; font-variant-numeric: tabular-nums; }
.hz-soll { display:flex; align-items:center; gap:10px; }
.hz-soll-wert { display:flex; flex-direction:column; align-items:center; min-width:84px; }
.hz-mid { font-size:1.35rem; font-weight:700; font-variant-numeric: tabular-nums; }
.hz-step { width:44px; height:44px; border-radius:50%; border:1px solid var(--r-line, #d1d5db); background: var(--r-bg, #f9fafb); color:inherit; font-size:1.4rem; line-height:1; cursor:pointer; }
.hz-step:hover, .hz-step:focus-visible { border-color:#e8590c; outline:none; }
.hz-line { margin:4px 0 10px; font-weight:600; }
.hz-modes { display:grid; grid-template-columns: repeat(5, 1fr); gap:6px; }
.hz-mode { border:1px solid var(--r-line, #e5e7eb); background: var(--r-bg, #f9fafb); color:inherit; font:inherit; font-size:.85rem; padding:9px 4px; border-radius:10px; cursor:pointer; min-height:42px; }
.hz-mode.active { background:#e8590c; border-color:#e8590c; color:#fff; font-weight:600; }
.hz-mode:disabled, .hz-step:disabled, .hz-card .light-chip:disabled { opacity:.5; cursor:progress; }
.hz-quick { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; }
.hz-quick .light-chip { min-height:36px; }
.hz-quick .light-chip:hover { border-color:#e8590c; }
.hz-hint { margin:8px 0 0; font-size:.8rem; }
.hz-zp { margin-top:12px; border-top:1px solid var(--r-line, #eee); padding-top:10px; }
.hz-zp summary { cursor:pointer; font-weight:600; padding:4px 0; }
.hz-week { display:grid; gap:4px; margin:8px 0 12px; font-size:.88rem; }
.hz-day { display:grid; grid-template-columns: minmax(48px, auto) 1fr; gap:8px; }
.hz-day b { white-space:nowrap; }
.hz-form { display:grid; gap:10px; }
.hz-days { display:flex; flex-wrap:wrap; gap:6px; }
.hz-daychk { position:relative; }
.hz-daychk input { position:absolute; opacity:0; }
.hz-daychk span { display:inline-block; min-width:40px; text-align:center; padding:7px 6px; border:1px solid var(--r-line, #e5e7eb); border-radius:9px; cursor:pointer; }
.hz-daychk input:checked + span { background:#e8590c; border-color:#e8590c; color:#fff; font-weight:600; }
.hz-daychk input:focus-visible + span { outline:2px solid #e8590c; outline-offset:2px; }
.hz-fenster { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.hz-fenster[hidden] { display:none; }
.hz-fenster > span:first-child { flex-basis:100%; font-weight:600; }
.hz-fenster input[type="time"] { width:auto; min-width:96px; padding:6px; }
.hz-fenster input[type="number"] { width:72px; padding:6px; }
.hz-error { color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:8px 10px; margin:0 0 10px; }
.hz-foot { margin-top:6px; }
.hz-link { border:0; background:none; color:#e8590c; padding:0; font:inherit; cursor:pointer; text-decoration:underline; }
/* ══ v3.16.136: Klima (MELCloud Home) und Saugroboter im Smart-Home-Tab — dieselben Karten wie die Heizung ══ */
.klima-root, .sauger-root { max-width: 620px; }
.kl-card.is-on { border-color:#0b7285; box-shadow: 0 0 0 2px rgba(11,114,133,.16); }
.kl-card .hz-mode.active, .kl-card .light-chip.active { background:#0b7285; border-color:#0b7285; color:#fff; font-weight:600; }
.kl-card .hz-step:hover, .kl-card .hz-step:focus-visible { border-color:#0b7285; }
.hz-badge.kl-an { background:#0b7285; border-color:#0b7285; color:#fff; }
.hz-badge.kl-fehler, .hz-badge.sg-fehler { background:#fef3c7; border-color:#fde68a; color:#92400e; }
.kl-power { display:flex; gap:8px; margin:6px 0 12px; }
.kl-power .btn { min-height:42px; flex:1; }
.kl-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; }
.kl-row > span:first-child { min-width:64px; }
.kl-row .light-chip { min-height:36px; min-width:40px; }
.sg-card.is-cleaning { border-color:#2f9e44; box-shadow: 0 0 0 2px rgba(47,158,68,.16); }
.hz-badge.sg-aktiv { background:#2f9e44; border-color:#2f9e44; color:#fff; }
.sg-akku { height:10px; border-radius:999px; background: var(--r-bg, #f1f3f5); border:1px solid var(--r-line, #e5e7eb); overflow:hidden; margin:6px 0 4px; max-width:220px; }
.sg-akku > i { display:block; height:100%; background:#2f9e44; }
.sg-akku.is-low > i { background:#e8590c; }
.sg-actions { display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; margin-top:12px; }
.sg-actions .btn { min-height:42px; }
.sg-actions .btn-primary { grid-column: 1 / -1; }
.sg-raeume { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; align-items:center; }
.sg-raeume .light-chip { min-height:36px; }
/* ══ v3.16.137: Bereich im Aufgaben-Fenster (»→ Work«) ══ */
.ws-move-section { padding-top:4px; }
.ws-move-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ws-move-label { font-weight:600; color:var(--text-secondary, #6b7280); font-size:.85rem; }
.ws-move-current { font-weight:600; }
.ws-move-buttons { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.ws-move-btn { min-height:34px; }
.ws-move-hint { margin:6px 0 0; font-size:.8rem; }
@media (max-width: 480px) {
  .ws-move-buttons { margin-left:0; width:100%; }
  .ws-move-btn { flex:1; }
}
@media (max-width: 480px) {
  .sh-tabs { display:flex; width:100%; }
  .sh-tab { flex:1; padding:8px 6px; white-space:nowrap; }
  .sh-tab { font-size:.9rem; padding:8px 4px; }                       /* v3.16.136: vier Reiter */
  .sh-tab .sh-lang { display:none; }
  .sh-tab .sh-kurz { display:inline; }
  .hz-quick > span { flex-basis:100%; }
  .hz-modes { grid-template-columns: repeat(3, 1fr); }
  .hz-big { font-size:2.1rem; }
}
@media (max-width: 640px) { .light-editor { margin-left:0; } .light-row { grid-template-columns: 1fr auto; } .light-row .light-range { grid-column: 1 / -1; } }
/* ══ v3.04: /gina — Startbildschirm fürs Home-Icon ══ */
.gina-home { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 90% at 50% 20%, #134e4a 0%, #0f172a 70%); color:#f8fafc;
  padding: env(safe-area-inset-top, 0px) 24px env(safe-area-inset-bottom, 0px); }
.gina-home[hidden] { display:none; }
.gina-home-inner { text-align:center; max-width:360px; width:100%; }
.gina-home-avatar { width:96px; height:96px; border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.gina-home h1 { font-size:2rem; margin:14px 0 26px; letter-spacing:.02em; }
.gina-home-talk { width:190px; height:190px; border-radius:50%; border:0; cursor:pointer; font-size:1.35rem; font-weight:700;
  color:#052e2b; background: radial-gradient(circle at 35% 30%, #6ee7b7, #10b981 70%);
  box-shadow:0 0 0 12px rgba(16,185,129,.18), 0 18px 40px rgba(0,0,0,.4); }
.gina-home-talk:active { transform: scale(.97); }
.gina-home-talk:focus-visible { outline:3px solid #fde68a; outline-offset:6px; }
@media (prefers-reduced-motion: no-preference) {
  .gina-home-talk { animation: gina-pulse 2.4s ease-in-out infinite; }
  @keyframes gina-pulse { 0%,100% { box-shadow:0 0 0 12px rgba(16,185,129,.18), 0 18px 40px rgba(0,0,0,.4); }
                          50% { box-shadow:0 0 0 22px rgba(16,185,129,.08), 0 18px 40px rgba(0,0,0,.4); } }
}
.gina-home-hint { color:#cbd5e1; margin:24px 0 10px; font-size:.95rem; }
/* v3.14.0 (Audit 03.10.): der letzte Fehler steht sichtbar auf dem Startbildschirm (Kiosk) */
.gina-home-error { color:#fecaca; background:rgba(127,29,29,.55); border:1px solid rgba(248,113,113,.55); border-radius:10px;
  padding:8px 12px; margin:6px auto 8px; max-width:340px; font-size:.9rem; line-height:1.35; overflow-wrap:anywhere; }
.gina-home-error[hidden] { display:none; }
.gina-home-link { background:none; border:0; color:#6ee7b7; text-decoration:underline; font-size:.95rem; cursor:pointer; padding:8px; }
/* ══ v3.05: iPhone-Kurzbefehl ══ */
.quick-card { border:1px solid var(--r-line, #e5e7eb); border-radius:12px; padding:14px; margin-bottom:18px; }
.quick-card h3 { margin:0 0 6px; }
.quick-muted { color: var(--r-sub, #6b7280); font-size:.9rem; margin:4px 0 8px; }
.quick-actions { display:flex; gap:8px; margin:8px 0; }
.quick-copy { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 10px; }
.quick-copy code { background: var(--r-bg, #f3f4f6); padding:6px 8px; border-radius:6px; word-break:break-all; font-size:.85rem; }
.quick-steps { margin:6px 0 0 18px; padding:0; font-size:.92rem; line-height:1.5; }
.quick-steps code { font-size:.85rem; }
/* ══ v3.16.54: Bens Systemkarte (eingebettete Seite) — v3.16.86: dieselben Regeln für das Lagebild (Ben 25.10.: der Rahmen war
   300 × 150 px klein, weil die Regeln nur für #systemkarte-view galten) ══ */
#systemkarte-view .sk-bar, #lagebild-view .sk-bar { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
#systemkarte-view .sk-hint, #lagebild-view .sk-hint { color:var(--gray-600); font-size:.88rem; }
#systemkarte-view .sk-actions, #lagebild-view .sk-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
#systemkarte-view .sk-actions .btn, #lagebild-view .sk-actions .btn { text-decoration:none; }
#systemkarte-view .sk-actions .btn[aria-pressed="true"], #lagebild-view .sk-actions .btn[aria-pressed="true"] { background:var(--primary-color); border-color:var(--primary-color); color:#fff; }
#systemkarte-view .sk-frame, #lagebild-view .sk-frame { display:block; width:100%; height:calc(100dvh - 190px); min-height:460px; border:1px solid var(--gray-200);
  border-radius:12px; background:#EEF1EF; }
@media (max-width: 768px) {
  #systemkarte-view .sk-hint, #lagebild-view .sk-hint { display:none; }
  #systemkarte-view .sk-frame, #lagebild-view .sk-frame { height:calc(100dvh - 160px); min-height:420px; }
}
/* ══ v3.16.113: dieselben Regeln für die Schiffsdaten (3.16.112 live: der Rahmen war wieder 300 × 150 px klein — derselbe
   Fehler wie beim Lagebild am 25.10.; tests/test_v316113.py prüft jetzt jede eingebettete Ansicht mit .sk-frame) ══ */
#schiffsdaten-view .sk-bar { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
#schiffsdaten-view .sk-hint { color:var(--gray-600); font-size:.88rem; }
#schiffsdaten-view .sk-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
#schiffsdaten-view .sk-actions .btn { text-decoration:none; }
#schiffsdaten-view .sk-frame { display:block; width:100%; height:calc(100dvh - 190px); min-height:460px; border:1px solid var(--gray-200);
  border-radius:12px; background:#EEF1EF; }
@media (max-width: 768px) {
  #schiffsdaten-view .sk-hint { display:none; }
  #schiffsdaten-view .sk-frame { height:calc(100dvh - 160px); min-height:420px; }
}
/* ══ v3.16.135 (#2660): dieselben Regeln für Kumas Cockpit (eingebettete Ansicht mit .sk-frame — tests/test_v316113.py) ══ */
#kuma-view .sk-bar { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
#kuma-view .sk-hint { color:var(--gray-600); font-size:.88rem; }
#kuma-view .sk-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
#kuma-view .sk-actions .btn { text-decoration:none; }
#kuma-view .sk-frame { display:block; width:100%; height:calc(100dvh - 190px); min-height:460px; border:1px solid var(--gray-200);
  border-radius:12px; background:#EEF1EF; }
@media (max-width: 768px) {
  #kuma-view .sk-hint { display:none; }
  #kuma-view .sk-frame { height:calc(100dvh - 160px); min-height:420px; }
}
/* ══ v3.16.100 (#2511): Hören — Hörfolgen, Player mit gemerktem Fortschritt, Skript zum Mitlesen. Mobil zuerst. ══ */
#hoeren-view .hq-bar { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
#hoeren-view .hq-hint { color:var(--gray-600); font-size:.88rem; }
.hq-player { position:sticky; top:0; z-index:5; background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:.75rem .9rem; margin-bottom:.9rem; box-shadow:var(--shadow-md); }
.hq-player[hidden] { display:none; }
.hq-now { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; margin-bottom:.4rem; }
.hq-now-text { min-width:0; }
.hq-now-serie { font-size:.76rem; color:var(--gray-500); text-transform:uppercase; letter-spacing:.03em; }
.hq-now-titel { font-weight:700; font-size:1.02rem; line-height:1.3; overflow-wrap:anywhere; }
.hq-close { flex:0 0 auto; background:none; border:0; color:var(--gray-500); font-size:1rem; cursor:pointer; padding:.2rem .4rem; }
#hq-audio { width:100%; display:block; margin:.3rem 0 .5rem; }
.hq-ctl { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.hq-ctl .btn { min-width:3.2rem; padding:.45rem .6rem; font-size:.9rem; }
.hq-ctl #hq-play { min-width:3.6rem; font-size:1.05rem; }
.hq-time { margin-left:auto; font-size:.85rem; color:var(--gray-600); font-variant-numeric:tabular-nums; }
.hq-skript { margin-top:.6rem; border-top:1px solid var(--gray-200); padding-top:.4rem; }
.hq-skript summary { cursor:pointer; font-size:.88rem; color:var(--gray-600); }
.hq-skript-body { max-height:50vh; overflow:auto; margin-top:.4rem; font-size:.95rem; line-height:1.5; }
.hq-zeile { margin:0 0 .45rem; }
.hq-zeile b { color:var(--gray-700); margin-right:.35rem; }
.hq-pause { color:var(--gray-500); font-size:.78rem; text-align:center; margin:.3rem 0; }
.hq-serie { background:#fff; border:1px solid var(--gray-200); border-radius:12px; margin-bottom:.8rem; overflow:hidden; }
.hq-serie-kopf { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; padding:.6rem .9rem; background:var(--gray-100); border-bottom:1px solid var(--gray-200); flex-wrap:wrap; }
.hq-serie-name { font-weight:700; }
.hq-serie-info { font-size:.82rem; color:var(--gray-600); }
.hq-folge { display:flex; align-items:center; gap:.6rem; padding:.6rem .9rem; border-bottom:1px solid var(--gray-100); cursor:pointer; }
.hq-folge:last-child { border-bottom:0; }
.hq-folge.hq-aktiv { background:var(--primary-soft); }
.hq-folge.hq-stumm { cursor:default; }
.hq-playbtn { flex:0 0 2.4rem; width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid var(--gray-300); background:#fff; font-size:.95rem; cursor:pointer; }
.hq-playbtn:disabled { opacity:.35; cursor:default; }
.hq-aktiv .hq-playbtn { background:var(--primary-color); border-color:var(--primary-color); color:#fff; }
.hq-folge-text { flex:1 1 auto; min-width:0; }
.hq-folge-titel { font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.hq-nr { display:inline-block; min-width:1.3rem; margin-right:.3rem; color:var(--gray-500); font-weight:600; }
.hq-folge-meta { display:flex; flex-wrap:wrap; gap:.25rem .5rem; align-items:center; font-size:.8rem; color:var(--gray-600); margin-top:.15rem; }
.hq-pille { display:inline-block; padding:.05rem .5rem; border-radius:999px; font-size:.74rem; font-weight:600; background:var(--gray-200); color:var(--gray-700); }
.hq-pille.hq-laeuft { background:#fef3c7; color:#92400e; }
.hq-pille.hq-fehler { background:#fee2e2; color:#991b1b; }
.hq-pille.hq-gehoert { background:#d1fae5; color:#065f46; }
.hq-pille.hq-dabei { background:var(--primary-soft); color:var(--gray-700); }
.hq-link { background:none; border:0; padding:0; color:var(--primary-hover); text-decoration:underline; cursor:pointer; font-size:inherit; }
.hq-kosten { color:var(--gray-500); }
.hq-balken { height:4px; background:var(--gray-200); border-radius:2px; margin-top:.35rem; overflow:hidden; }
.hq-balken i { display:block; height:100%; background:var(--warning-color); }
.hq-fehlertext { font-size:.78rem; color:#991b1b; margin-top:.2rem; overflow-wrap:anywhere; }
.hq-del { flex:0 0 auto; background:none; border:0; color:var(--gray-300); cursor:pointer; font-size:.95rem; padding:.3rem; }
.hq-del:hover { color:var(--danger-color); }
.hq-leer { color:var(--gray-600); font-size:.9rem; padding:.8rem .2rem; }
.hq-fuss { font-size:.78rem; color:var(--gray-500); margin:.2rem .2rem .8rem; }
@media (max-width: 768px) {
  #hoeren-view .hq-hint { display:none; }
  .hq-folge { padding:.55rem .6rem; }
  .hq-ctl .btn { padding:.5rem .55rem; }
  .hq-time { width:100%; margin-left:0; text-align:right; }
}