.atomware-client-filter-search {
    width: 100%;
}

/* Search button in quick-actions - matches other quick-btn styling */
.atomware-quick-actions .atomware-client-search-btn {
    align-self: stretch;
}

.atomware-client-search-inline {
    width: 100%;
    flex-shrink: 0;
    padding: 8px var(--atomware-spacing, 12px) 10px;
    border-bottom: 1px solid var(--atomware-border, #e5e7eb);
}

.atomware-client-search-inline .atomware-file-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.atomware-client-search-close {
    margin-left: auto;
}

/* Atomware legal pages */
.atomware-legal-shell {
    max-width: 980px;
    margin: 48px auto 72px;
    padding: 0 24px;
}

.atomware-legal-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 24px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.28), transparent 38%),
        linear-gradient(135deg, #09111f 0%, #0f172a 48%, #111827 100%);
    box-shadow: 0 20px 50px rgba(2, 6, 23, 0.32);
}

.atomware-legal-eyebrow {
    margin: 0 0 12px;
    color: #93c5fd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.atomware-legal-title {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.atomware-legal-intro {
    max-width: 680px;
    margin: 14px 0 0;
    color: #cbd5e1;
    font-size: 1.02rem;
    line-height: 1.7;
}

.atomware-legal-actions,
.atomware-legal-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.atomware-legal-footer-actions {
    justify-content: center;
}

.atomware-legal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.atomware-legal-btn:hover {
    transform: translateY(-1px);
}

.atomware-legal-btn-primary {
    background: linear-gradient(135deg, #1552cc 0%, #0b2d72 100%);
    color: #eff6ff;
    box-shadow: 0 12px 28px rgba(21, 82, 204, 0.28);
}

.atomware-legal-btn-primary:hover {
    box-shadow: 0 16px 34px rgba(21, 82, 204, 0.34);
}

.atomware-legal-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.28);
    color: #dbeafe;
}

.atomware-legal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(21, 82, 204, 0.35);
}

.atomware-legal-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 24px;
    padding: 32px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.atomware-legal-card > :first-child {
    margin-top: 0;
}

.atomware-legal-card > h1:first-child {
    display: none;
}

.atomware-legal-card h2 {
    margin: 32px 0 12px;
    color: #0f172a;
    font-size: 1.4rem;
    line-height: 1.25;
}

.atomware-legal-card h3 {
    margin: 24px 0 10px;
    color: #1e293b;
    font-size: 1rem;
    text-transform: none;
}

.atomware-legal-card p,
.atomware-legal-card li {
    color: #334155;
    font-size: 1rem;
    line-height: 1.75;
}

.atomware-legal-card ul {
    margin: 0 0 18px 20px;
    padding: 0;
}

.atomware-legal-card li + li {
    margin-top: 6px;
}

.atomware-legal-card strong {
    color: #0f172a;
}

.atomware-legal-card a {
    color: #2f6fd4;
}

@media (max-width: 767px) {
    .atomware-legal-shell {
        margin: 28px auto 48px;
        padding: 0 14px;
    }

    .atomware-legal-hero,
    .atomware-legal-card {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .atomware-legal-actions,
    .atomware-legal-footer-actions {
        flex-direction: column;
    }

    .atomware-legal-btn {
        width: 100%;
    }
}

/* Hide toast notifications - all notifications go to sidebar (bell icon) only */
body > .atomware-notification {
    display: none !important;
}

/* ============================================
   Avatar & Profile Picture Base - consistent round, centred, cropped
   Reference: atomware-business-filter-item / atomware-client-avatar
   Container: square (w=h=min-w=min-h), border-radius 50%, overflow hidden, flex center
   Image: width/height 100%, object-fit cover, object-position center, display block
   NO border-radius on img (container clipping avoids distortion/rugby-ball)
   ============================================ */
.atomware-avatar-img,
.atomware-staff-header-avatar img,
.atomware-client-topbar-logo-img,
.atomware-client-avatar img,
.atomware-client-avatar .avatar-img,
.atomware-client-filter-sidebar .atomware-client-avatar img,
.atomware-client-filter-sidebar .atomware-client-avatar .avatar-img,
.atomware-team-dm-avatar img,
.atomware-mention-chip-avatar-img,
.atomware-mention-inline-avatar-img,
.atomware-mention-avatar-img,
.atomware-message-avatar img,
.atomware-message-avatar-img,
.atomware-notification-avatar-wrap img,
.atomware-notification-avatar[src],
.atomware-notification-business-logo-wrap img,
.atomware-notification-business-logo,
.atomware-note-widget-avatar img,
.atomware-note-widget-avatar-img,
.atomware-select-avatar-wrap .atomware-select-option-avatar,
.atomware-select-option-avatar-wrap .atomware-select-option-avatar,
.atomware-task-assignee-avatar,
.atomware-task-business-logo,
.atomware-note-business-logo,
.atomware-calendar-task-logo,
.atomware-calendar-task-assignee,
.atomware-analytics-avatar img,
.atomware-graph-legend-item .atomware-analytics-avatar img,
.atomware-timeline-entry .atomware-analytics-avatar img,
.atomware-details-avatar img,
.atomware-settings-avatar img,
.atomware-details-team-avatar img,
#client-info-modal .atomware-client-info-avatar img,
#client-info-modal .atomware-client-info-avatar-img,
.atomware-chat-snapshot-messages .atomware-message-avatar img,
.atomware-chat-snapshot-messages .atomware-mention-inline-avatar img,
#team-chat-messages .atomware-mention-inline-avatar img,
#chat-messages .atomware-mention-inline-avatar img,
#atomware-client-portal .atomware-mention-inline-avatar img,
#timer-business-logo,
.atomware-group-chat-logo,
.atomware-timer-logo,
.atomware-staff-timer-logo,
.atomware-contact-avatar img,
.atomware-contact-avatar .avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Task action buttons (My Tasks section) */
.atomware-task-btn {
    padding: 6px 16px;
    background: var(--atomware-primary);
    color: #fff;
    border-radius: var(--atomware-radius-sm);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.atomware-task-btn .material-icons {
    font-size: 18px !important;
    height: 1em !important;
    width: 1em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0.28em !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

/* Task toggle buttons (My/Team Tasks, List/Calendar) */
.atomware-task-btn-toggle {
    padding: 6px 14px;
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-primary);
    border-radius: var(--atomware-radius-sm);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.atomware-task-btn-toggle.active {
    background: var(--atomware-primary);
    color: #fff;
}
.atomware-task-btn-toggle .material-icons {
    font-size: 18px !important;
    height: 1em !important;
    width: 1em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0.28em !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}
/* Sidebar action buttons (Add Task, Add Client, Add Business) */
.atomware-sidebar-btn {
    padding: 8px 16px;
    background: var(--atomware-primary);
    color: #fff;
    border-radius: var(--atomware-radius-sm);
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
    border: none;
}
.atomware-sidebar-btn .material-icons {
    font-size: 20px !important;
    height: 1em !important;
    width: 1em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0.28em !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

/* Sidebar tabs: Clients | Chat - ensure active state paints correctly */
.atomware-sidebar-tabs {
    transform: translateZ(0);
}
.atomware-sidebar-tab {
    transform: translateZ(0);
    text-decoration: none;
    color: inherit;
}

.atomware-sidebar:not(.atomware-sidebar-collapsed) .atomware-sidebar-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0;
}

.atomware-sidebar:not(.atomware-sidebar-collapsed) .atomware-sidebar-tab {
    flex: 1 1 0;
    width: 100%;
    border-radius: 0;
    justify-content: center;
    padding: 10px 4px !important;
}

/* Always hide sidebar tab text — icon-only tabs */
.atomware-sidebar-tab-text {
    display: none !important;
}
.atomware-sidebar-tab.active,
.atomware-sidebar-tab.active:hover,
.atomware-sidebar-tab.active:focus {
    background: var(--atomware-primary) !important;
    color: white !important;
}

/* Force tab buttons and stop button to have minimal, centered padding and height */

.atomware-tab-btn {
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: var(--atomware-radius-sm) !important;
    gap: 6px !important;
    line-height: 1.2 !important;
}

.atomware-tab-btn .atomware-tab-icon,
.atomware-sidebar-tab .atomware-tab-icon,
.atomware-status-tab .atomware-status-icon {
    font-size: 18px !important;
    height: 1em !important;
    width: 1em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0.1em !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

.atomware-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#stop-timer-btn.atomware-btn-icon {
    padding: 4px !important;
    min-width: 18px;
    min-height: 18px;
}
#stop-timer-btn .material-icons {
    font-size: 10px !important;
    position: static !important;
    top: auto !important;
    line-height: 1 !important;
}

#atomware-staff-dashboard #sidebar-pane-clients > #running-timer-widget {
    background: var(--atomware-success);
    color: white;
    border-radius: var(--atomware-radius, 6px);
    margin: var(--atomware-spacing-sm, 8px);
}

#running-timer-widget.atomware-timer-widget {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#running-timer-widget .timer-info.timer-info-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 3px;
}

#running-timer-widget .timer-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    flex-shrink: 0;
    position: relative;
    background: var(--atomware-bg-tertiary, #e5e7eb);
}

#running-timer-widget .timer-logo-wrap .atomware-timer-logo,
#running-timer-widget #timer-business-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#running-timer-widget .timer-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--atomware-text-primary);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

#atomware-staff-dashboard #running-timer-widget .timer-task {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}
#running-timer-widget .timer-task {
    font-size: 11px;
    color: #555;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Active timer numbers - match staff header widget size (11px), consistent with client dash */
#atomware-staff-dashboard #running-timer-widget .timer-display,
#running-timer-widget .timer-display {
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

#running-timer-widget .atomware-btn-icon {
    margin-top: 3px;
}

.atomware-timer-widget.atomware-timer-floating {
    position: fixed;
    z-index: 10000;
    margin: 0;
    cursor: move;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.atomware-timer-widget.atomware-timer-dragging {
    cursor: grabbing;
    user-select: none;
}

.atomware-tab-btn .material-icons {
    font-size: 1em !important;
    height: 1em !important;
    width: 1em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0.28em !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}
/* Minimal global button reset */
button {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    box-sizing: border-box;
    outline: none;
    vertical-align: middle;
}

/* Atomware Button Styles */
.atomware-btn-primary {
    padding: 4px 16px;
    background: var(--atomware-primary);
    color: #fff;
    border-radius: var(--atomware-radius-sm);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
}
.atomware-btn-secondary {
    padding: 4px 16px;
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-primary);
    border-radius: var(--atomware-radius-sm);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
}
.atomware-btn-danger {
    padding: 4px 16px;
    background: var(--atomware-danger);
    color: #fff;
    border-radius: var(--atomware-radius-sm);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
}
.atomware-btn-link {
    padding: 4px 10px;
    background: transparent;
    color: var(--atomware-primary);
    border-radius: var(--atomware-radius-sm);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
}
.atomware-btn-success {
    padding: 4px 16px;
    background: var(--atomware-success);
    color: #fff;
    border-radius: var(--atomware-radius-sm);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
}
.atomware-tab-btn {
    padding: 4px 16px;
    background: transparent;
    color: var(--atomware-text-secondary);
    border-radius: var(--atomware-radius-sm);
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.2s;
}
.atomware-tab-btn.active {
    background: var(--atomware-primary);
    color: #fff;
}
.atomware-btn-icon {
    padding: 4px;
    background: transparent;
    color: var(--atomware-text-secondary);
    border-radius: var(--atomware-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

/* Icon alignment for all buttons */
.atomware-btn-primary .material-icons,
.atomware-btn-secondary .material-icons,
.atomware-btn-danger .material-icons,
.atomware-btn-success .material-icons,
.atomware-btn-link .material-icons,
.atomware-tab-btn .material-icons,
.atomware-btn-icon .material-icons {
    font-size: 1em !important;
    height: 1em !important;
    width: 1em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}
/* Responsive: Atomware Drive Header (File Controls) */
@media (max-width: 768px) {
    .atomware-drive-header {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: var(--atomware-spacing-sm) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: var(--atomware-spacing-sm) !important;
    }
    .atomware-drive-header > div {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--atomware-spacing-sm) !important;
        width: 100% !important;
    }
    .atomware-drive-header label,
    .atomware-drive-header select {
        width: 100% !important;
        margin: 0 0 4px 0 !important;
        font-size: 1rem !important;
    }
    .atomware-drive-header .atomware-view-toggle {
        width: 100% !important;
        justify-content: flex-start !important;
        margin-bottom: 8px !important;
    }
    .atomware-drive-header .atomware-btn-primary,
    .atomware-drive-header .atomware-btn-secondary {
        width: 100% !important;
        margin-bottom: 6px !important;
        justify-content: center !important;
    }
    .atomware-drive-header .atomware-btn-primary:last-child,
    .atomware-drive-header .atomware-btn-secondary:last-child {
        margin-bottom: 0 !important;
    }
    .atomware-drive-header .atomware-select-sm {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 1rem !important;
    }
}
/* File Manager Scoped Styles */
.atomware-file-manager * {
    box-sizing: border-box;
}
.atomware-file-manager .atomware-drive-actions,
.atomware-file-manager .atomware-filters {
    width: 100%;
    display: flex;
    gap: 2px;
}
.atomware-file-manager .atomware-filters > * {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}
.atomware-file-manager .atomware-btn-primary,
.atomware-file-manager .atomware-btn-secondary,
.atomware-file-manager .atomware-btn-danger,
.atomware-file-manager .atomware-btn-success,
.atomware-file-manager .atomware-btn-link {
    padding: 4px 12px;
    font-size: 14px;
    min-height: 28px;
    line-height: 1.2;
}
.atomware-file-manager button {
    padding: 4px 12px;
    font-size: 14px;
    min-height: 28px;
    line-height: 1.2;
}
.atomware-file-manager .atomware-drive-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.atomware-file-manager .atomware-drive-actions > * {
    width: auto;
    margin-right: 0;
}
/* Mobile layout fixes for dashboard and file browser */
@media (max-width: 768px) {
    .atomware-dashboard,
    .atomware-portal {
        padding: 0 !important;
        min-width: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    .atomware-drive {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }
    .atomware-drive-body {
        flex-direction: column !important;
        width: 100vw !important;
        min-width: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }
    .atomware-drive-sidebar {
        width: 100vw !important;
        min-width: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid var(--atomware-border);
        flex-shrink: 0 !important;
        max-width: 100vw !important;
    }
    .atomware-drive-main,
    .atomware-drive-main.atomware-drive-full {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        padding: var(--atomware-spacing-sm) !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    #staff-file-browser {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        display: flex;
        flex-direction: column;
    position: relative;
    }
    .atomware-drive-grid {
        grid-template-columns: 1fr !important;
        gap: var(--atomware-spacing-sm) !important;
    }
    .atomware-drive-list-header {
        grid-template-columns: minmax(120px, 2fr) 60px 60px minmax(80px, 1fr) 80px 60px !important;
        font-size: 11px !important;
        padding: 8px 6px !important;
    }
    .atomware-drive-item {
        padding: var(--atomware-spacing-sm) !important;
        gap: var(--atomware-spacing-sm) !important;
        font-size: 13px !important;
    }
}
/* Atomware Unified Platform - Main Styles */

:root {
    /* Brand (atomware.co.za) */
    --atomware-primary: #1552cc;
    --atomware-primary-hover: #0f3fa8;
    --atomware-brand-rgb: 21 82 204;
    --atomware-bg-deep: #01033f;
    --atomware-shadow-ui: #c8c8c8;
    --atomware-secondary: #6b7280;
    --atomware-success: #10b981;
    --atomware-danger: #ef4444;
    --atomware-warning: #f59e0b;
    --atomware-info: #1552cc;
    
    --atomware-bg-primary: #0a0a0a;
    --atomware-bg-secondary: #000000;
    --atomware-bg-tertiary: #1a1a1a;
    
    --atomware-text-primary: #f9fafb;
    --atomware-text-secondary: #d1d5db;
    --atomware-text-muted: #9ca3af;
    
    --atomware-border: #1a1a1a;
    --atomware-border-light: #4b5563;
    
    --atomware-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    --atomware-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    
    --atomware-radius: 8px;
    --atomware-radius-sm: 4px;
    --atomware-radius-lg: 12px;
    
    --atomware-spacing: 16px;
    --atomware-spacing-sm: 8px;
    --atomware-spacing-md: 16px;
    --atomware-spacing-lg: 24px;
    --atomware-spacing-xl: 32px;
    /* Layered shell (client: brand glow top-left) */
    --atomware-surface-chrome-client:
        radial-gradient(circle at 0% 0%, rgba(21, 82, 204, 0.14) 0%, transparent 42%),
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.045) 0%, transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 18%),
        linear-gradient(165deg, var(--atomware-bg-deep) 0%, var(--atomware-bg-primary) 38%, var(--atomware-bg-primary) 100%);
    /* Staff: navy bottom-left, glow top-right */
    --atomware-surface-chrome-staff:
        radial-gradient(circle at 100% 0%, rgba(21, 82, 204, 0.11) 0%, transparent 36%),
        radial-gradient(circle at 0% 100%, rgba(1, 3, 63, 0.42) 0%, transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, transparent 16%),
        #0a0a0a;
    --atomware-surface-modal:
        radial-gradient(circle at 0% 0%, rgba(21, 82, 204, 0.13) 0%, transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 18%),
        #0d0d0d;
    --atomware-border-brand-soft: rgba(21, 82, 204, 0.12);
    --atomware-glow-modal: 0 32px 80px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(21, 82, 204, 0.08);
    /* Dashboard-only: subtle brand depth ( #atomware-staff-dashboard / #atomware-client-portal only) */
    --atomware-dashboard-wash-staff-rail:
        radial-gradient(ellipse 130% 90% at 0% 15%, rgba(21, 82, 204, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 100% 70% at 0% 100%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
        var(--atomware-bg-secondary);
    --atomware-dashboard-wash-staff-chrome:
        linear-gradient(180deg, rgba(21, 82, 204, 0.07) 0%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(90deg, rgba(245, 158, 11, 0.045) 0%, rgba(0, 0, 0, 0) 18%),
        var(--atomware-bg-tertiary);
    --atomware-dashboard-wash-staff-panel:
        radial-gradient(ellipse 120% 70% at 100% 0%, rgba(21, 82, 204, 0.05) 0%, transparent 48%),
        radial-gradient(ellipse 90% 60% at 0% 100%, rgba(16, 185, 129, 0.04) 0%, transparent 45%),
        var(--atomware-bg-primary);
    --atomware-dashboard-wash-staff-chat:
        radial-gradient(ellipse 100% 45% at 50% 0%, rgba(21, 82, 204, 0.06) 0%, transparent 42%),
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(245, 158, 11, 0.035) 0%, transparent 45%),
        var(--atomware-bg-secondary);
    --atomware-dashboard-wash-toolbar:
        linear-gradient(100deg, rgba(21, 82, 204, 0.055) 0%, rgba(0, 0, 0, 0) 45%),
        linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, rgba(0, 0, 0, 0) 60%),
        var(--atomware-bg-secondary);
    --atomware-dashboard-wash-client-chrome:
        linear-gradient(195deg, rgba(21, 82, 204, 0.08) 0%, rgba(0, 0, 0, 0) 45%),
        linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, rgba(0, 0, 0, 0) 35%),
        var(--atomware-bg-secondary);
    --atomware-dashboard-wash-client-panel:
        radial-gradient(ellipse 110% 60% at 0% 10%, rgba(21, 82, 204, 0.055) 0%, transparent 50%),
        radial-gradient(ellipse 85% 50% at 100% 85%, rgba(245, 158, 11, 0.04) 0%, transparent 48%),
        var(--atomware-bg-primary);
}

/* Reset & Base - Unified font: 14px desktop, 12px tablet, 10px phone */
.atomware-portal,
.atomware-dashboard {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--atomware-text-primary);
}

@media (max-width: 1024px) {
    .atomware-portal,
    .atomware-dashboard {
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .atomware-portal,
    .atomware-dashboard {
        font-size: 10px;
    }
}

.atomware-portal *,
.atomware-dashboard * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Global icon sizing - smaller icons throughout */
.atomware-portal .material-icons,
.atomware-dashboard .material-icons {
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
}

/* Force all headings - same font, scale with base (14/12/10) */
.atomware-portal h1,
.atomware-portal h2,
.atomware-portal h3,
.atomware-portal h4,
.atomware-portal h5,
.atomware-portal h6,
.atomware-dashboard h1,
.atomware-dashboard h2,
.atomware-dashboard h3,
.atomware-dashboard h4,
.atomware-dashboard h5,
.atomware-dashboard h6 {
    font-size: 1em !important;
    font-weight: 600;
    line-height: 1.4;
    font-family: inherit;
}

/* Unified typography - all text elements same font & responsive size */
.atomware-portal button,
.atomware-portal input,
.atomware-portal select,
.atomware-portal textarea,
.atomware-portal label,
.atomware-portal .atomware-btn-primary,
.atomware-portal .atomware-btn-secondary,
.atomware-portal .atomware-btn-danger,
.atomware-portal .atomware-btn-link,
.atomware-portal .atomware-tab-btn,
.atomware-portal .atomware-status-tab,
.atomware-portal .atomware-form-label,
.atomware-portal td,
.atomware-portal th,
.atomware-portal .atomware-modal-header,
.atomware-portal .atomware-modal-body,
.atomware-portal .atomware-modal-footer,
.atomware-dashboard button,
.atomware-dashboard input,
.atomware-dashboard select,
.atomware-dashboard textarea,
.atomware-dashboard label,
.atomware-dashboard .atomware-btn-primary,
.atomware-dashboard .atomware-btn-secondary,
.atomware-dashboard .atomware-btn-danger,
.atomware-dashboard .atomware-btn-link,
.atomware-dashboard .atomware-tab-btn,
.atomware-dashboard .atomware-status-tab,
.atomware-dashboard .atomware-btn-toggle,
.atomware-dashboard .atomware-view-switch-btn,
.atomware-dashboard .atomware-form-label,
.atomware-dashboard td,
.atomware-dashboard th,
.atomware-dashboard .atomware-modal-header,
.atomware-dashboard .atomware-modal-body,
.atomware-dashboard .atomware-modal-footer,
.atomware-dashboard .atomware-drive-list-header,
.atomware-dashboard .atomware-list-col-name,
.atomware-dashboard .atomware-list-col-meta,
.atomware-dashboard .atomware-panel-header,
.atomware-dashboard .atomware-panel-content,
.atomware-dashboard .atomware-select,
.atomware-dashboard .atomware-input,
.atomware-dashboard .atomware-sidebar-btn,
.atomware-dashboard .atomware-sidebar-section h4,
.atomware-dashboard .atomware-client-name,
.atomware-dashboard .atomware-client-email,
.atomware-portal .atomware-select,
.atomware-portal .atomware-input,
.atomware-dashboard .atomware-breadcrumb-item,
.atomware-dashboard .atomware-folder-name,
.atomware-dashboard .atomware-task-title,
.atomware-dashboard .atomware-chart-label,
.atomware-dashboard .atomware-tasks-header h3,
.atomware-dashboard .atomware-analytics-header h3 {
    font-size: 1em !important;
    font-family: inherit !important;
}

/* Containers */
.atomware-portal,
.atomware-dashboard {
    background: var(--atomware-bg-primary);
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
    padding-bottom: 0;
    color-scheme: dark;
}

/* Staff dashboard layout: sidebar + content column + footer row */
.atomware-dashboard {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100vh;
    overflow: hidden;
    transition: grid-template-columns 0.2s ease;
}
.atomware-dashboard:has(.atomware-sidebar.atomware-sidebar-collapsed) {
    grid-template-columns: 56px 1fr;
}

/* Main dashboard shell header row (uniform platform header). */
#atomware-staff-dashboard.atomware-dashboard-shell-enabled {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

#atomware-staff-dashboard.atomware-dashboard-shell-enabled > .atomware-platform-shell-nav {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 12;
}

#atomware-staff-dashboard.atomware-dashboard-shell-enabled > .atomware-sidebar {
    grid-row: 2 / -1 !important;
}

#atomware-staff-dashboard.atomware-dashboard-shell-enabled > .atomware-main {
    grid-row: 2 !important;
}

/* Header now owns primary navigation on desktop/tablet; hide duplicate sidebar icon rail there. */
@media (min-width: 769px) {
    #atomware-staff-dashboard.atomware-dashboard-shell-enabled .atomware-sidebar-tabs {
        display: none !important;
    }
    /*
     * Team Channels/DMs overlay: hide the client / View All sidebar rail on desktop + tablet only.
     * Mobile keeps the off-canvas drawer (≤768px) so hamburger / shell Clients still reach the list.
     */
    #atomware-staff-dashboard.atomware-team-chat-overlay-open > .atomware-sidebar {
        display: none !important;
    }
    #atomware-staff-dashboard.atomware-team-chat-overlay-open.atomware-dashboard {
        grid-template-columns: 1fr !important;
    }
    #atomware-staff-dashboard.atomware-team-chat-overlay-open.atomware-dashboard > .atomware-main {
        grid-column: 1 / -1 !important;
    }
    /* Team overlay only (not client Group Chat without overlay): hide main workspace tabs on desktop + tablet. */
    #atomware-staff-dashboard.atomware-team-chat-overlay-open .atomware-main > .atomware-tabs {
        display: none !important;
    }
}

.atomware-sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 280px;
    min-width: 280px;
    transition: width 0.2s ease, min-width 0.2s ease;
}

/* Collapsed sidebar - icon only (desktop) */
.atomware-sidebar.atomware-sidebar-collapsed {
    width: 56px;
    min-width: 56px;
    overflow-x: hidden;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-header {
    display: none;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-toggle-btn {
    display: flex !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-tabs {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 2px;
    padding: 2px !important;
    border-bottom: none !important;
    background: transparent !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-tab {
    width: 40px;
    min-width: 40px;
    height: 40px;
    align-self: center;
    padding: 8px !important;
    justify-content: center;
    border-radius: var(--atomware-radius-sm, 6px);
    background: var(--atomware-bg-tertiary) !important;
    border: none !important;
    color: var(--atomware-text-primary, inherit);
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-tab:hover {
    background: var(--atomware-border-light, var(--atomware-bg-tertiary)) !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-tab.active {
    background: var(--atomware-primary) !important;
    color: white !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-tab.active .atomware-tab-icon {
    color: inherit !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-tab-text {
    display: none !important;
}
/* Team Chat badge: centred over icon when sidebar collapsed (not top-corner) */
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-tab[data-sidebar-tab="chat"] {
    position: relative;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-tab[data-sidebar-tab="chat"] .atomware-sidebar-chat-unread-badge {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-quick-actions {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 2px !important;
    background: var(--atomware-bg-secondary) !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-quick-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 8px !important;
    justify-content: center;
    align-items: center;
    background: var(--atomware-bg-secondary) !important;
    border: none !important;
    color: var(--atomware-text-primary) !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-search-btn {
    align-self: center;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-quick-btn:hover {
    background: var(--atomware-bg-tertiary) !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-quick-btn .material-icons {
    color: inherit !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-toggle-btn {
    background: var(--atomware-primary) !important;
    color: white !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-toggle-btn:hover {
    background: var(--atomware-primary-hover, var(--atomware-primary)) !important;
    color: white !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-sidebar-toggle-btn .material-icons {
    color: inherit !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-quick-text {
    display: none !important;
}
.atomware-sidebar.atomware-sidebar-collapsed #client-search-inline {
    display: none !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-filter-sidebar {
    overflow-x: hidden;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-filter-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden !important;
    min-width: 0;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-filter-list #client-list-items {
    min-width: 0;
    width: 100%;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-business-filter-item {
    justify-content: center;
    padding: 4px !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-info {
    display: none !important;
}
/* Client icons when collapsed (23px) – preserve perfect circle, no distortion */
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-avatar {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1;
    border-radius: 50% !important;
    overflow: hidden !important;
    font-size: 0.55rem !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-avatar img,
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-avatar .avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Inactive client styling: darker text + grayscale logo */
.atomware-business-filter-item:not(.active) .atomware-client-name,
.atomware-business-filter-item:not(.active) .atomware-client-email {
    color: rgba(148, 163, 184, 0.85) !important;
}

.atomware-business-filter-item:not(.active) .atomware-client-avatar img,
.atomware-business-filter-item:not(.active) .atomware-client-avatar .avatar-img {
    filter: grayscale(1);
    opacity: 0.7;
}

/* View All active: show all clients as active */
#atomware-staff-dashboard.atomware-business-filter-all .atomware-business-filter-item .atomware-client-name,
#atomware-staff-dashboard.atomware-business-filter-all .atomware-business-filter-item .atomware-client-email {
    color: inherit !important;
}

#atomware-staff-dashboard.atomware-business-filter-all .atomware-business-filter-item .atomware-client-avatar img,
#atomware-staff-dashboard.atomware-business-filter-all .atomware-business-filter-item .atomware-client-avatar .avatar-img {
    filter: none;
    opacity: 1;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-avatar-wrapper {
    flex-shrink: 0 !important;
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-avatar .avatar-initial,
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-avatar .material-icons {
    font-size: 12px !important;
}
.atomware-sidebar.atomware-sidebar-collapsed .atomware-client-avatar.all .material-icons {
    font-size: 12px !important;
}
/* Hide active timer completely when collapsed */
.atomware-sidebar.atomware-sidebar-collapsed #running-timer-widget {
    display: none !important;
}

/* Staff dash: ensure all active team timers are visible (wrap, no clipping) */
#atomware-staff-dashboard .atomware-topbar {
    flex-wrap: wrap;
    overflow: visible;
    flex-shrink: 0;
    padding: 2px 12px;
    min-height: 40px;
}

#atomware-staff-dashboard #staff-timers-widgets.atomware-staff-timers {
    overflow: visible;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 auto;
    align-content: flex-start;
}

/* Desktop/tablet: hide the staff topbar row when it has no timer widgets.
   This removes the empty strip between shell header and tabs without touching mobile. */
@media (min-width: 769px) {
    #atomware-staff-dashboard .atomware-topbar {
        display: none !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
}
/* Header staff timer widgets - client color: white dot and text for contrast */
.atomware-staff-timer-widget--client-color .atomware-staff-timer-dot {
    background: rgba(255, 255, 255, 0.95);
}
.atomware-staff-timer-widget--client-color .atomware-staff-timer-name {
    color: #fff;
}
.atomware-staff-timer-widget--client-color:hover {
    filter: brightness(1.08);
}

/* Expanded sidebar - add buttons match sidebar, stretch to full width */
.atomware-sidebar:not(.atomware-sidebar-collapsed) #sidebar-pane-clients > .atomware-quick-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    gap: 4px;
    padding: var(--atomware-spacing-sm, 8px) var(--atomware-spacing, 12px) !important;
    box-sizing: border-box;
    background: var(--atomware-bg-secondary);
}
.atomware-sidebar:not(.atomware-sidebar-collapsed) #sidebar-pane-clients > .atomware-quick-actions .atomware-quick-btn {
    flex: 1;
    min-width: 0;
    background: var(--atomware-bg-secondary) !important;
    color: var(--atomware-text-primary);
}
.atomware-sidebar:not(.atomware-sidebar-collapsed) #sidebar-pane-clients > .atomware-quick-actions .atomware-quick-btn:hover {
    background: var(--atomware-bg-tertiary) !important;
}
/* All quick-action buttons use secondary style - none look "active" by default */

.atomware-main {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    justify-content: flex-start;
    align-items: stretch;
}

/* Perf: isolate layout for client portal scroll regions (reduces style recalc scope).
   Do NOT apply `contain` to staff `.atomware-chat-feed-wrap`: containment on the wrap (not just
   #chat-messages) breaks nested flex height distribution — dead band above Group Chat. */
#atomware-client-portal.atomware-portal {
    contain: layout style;
}
#atomware-client-portal.atomware-portal .atomware-chat-feed-wrap {
    contain: layout style;
}
#atomware-client-portal.atomware-portal #chat-messages {
    contain: layout style;
}

.atomware-portal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* Client portal: fill viewport, prevent page scroll so chat search/input stay fixed */
/* Lock html + body scroll when client portal is active.
   On iOS Safari, locking only body is insufficient — the elastic over-scroll on <html>
   can inflate the initial viewport width, causing position:fixed elements to extend beyond
   the device screen. Locking html prevents the page from growing wider than 100dvw. */
html:has(#atomware-client-portal.atomware-portal),
html:has(body.atomware-client-portal-active),
html.atomware-client-portal-active {
    overflow: hidden;
    max-width: 100vw;
}
body:has(#atomware-client-portal.atomware-portal),
body.atomware-client-portal-active {
    overflow: hidden;
    height: 100vh; /* legacy */
    height: 100dvh;
    max-height: 100dvh;
    max-width: 100vw;
    box-sizing: border-box;
}
#atomware-client-portal.atomware-portal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh; /* legacy */
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 0;
    background: var(--atomware-surface-chrome-client);
    /* Keep "Powered by" / footer above home indicator */
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}
/* When company dropdown is open, avoid clipping the panel (overflow/contain) and scroll strips */
#atomware-client-portal.atomware-portal.atomware-client-biz-dd-open {
    overflow: visible;
    contain: none;
}
#atomware-client-portal.atomware-portal.atomware-client-biz-dd-open .atomware-client-topbar,
#atomware-client-portal.atomware-portal.atomware-client-biz-dd-open .atomware-client-topbar-left,
#atomware-client-portal.atomware-portal.atomware-client-biz-dd-open #client-timers-wrap,
#atomware-client-portal.atomware-portal.atomware-client-biz-dd-open .atomware-client-business-combobox,
#atomware-client-portal.atomware-portal.atomware-client-biz-dd-open .atomware-business-selector-inline {
  overflow: visible;
}
#atomware-client-portal.atomware-portal.atomware-client-biz-dd-open .atomware-client-topbar {
    z-index: 200;
}

/* Staff dashboard: mirror client portal viewport discipline so chat panes get a
   bounded height (flex children + min-height:0), outer page doesn't scroll, and
   the composer stays anchored on phones/tablets when the keyboard opens. */
body:has(#atomware-staff-dashboard.atomware-dashboard) {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
}

#atomware-staff-dashboard.atomware-dashboard {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 0;
    background: var(--atomware-surface-chrome-staff);
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}

body.admin-bar #atomware-staff-dashboard.atomware-dashboard {
    top: 32px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    max-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar #atomware-staff-dashboard.atomware-dashboard {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
        max-height: calc(100dvh - 46px);
    }
}

/* Dashboard-only chrome: brand washes ( staff + client portal; not CRM / SMM / KB ) */
#atomware-staff-dashboard .atomware-sidebar {
    background: var(--atomware-dashboard-wash-staff-rail);
    /* Rail does not own vertical scroll — avoids gutter scrollbar painting over main/chat (dark-theme overflow-y:auto). */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

#atomware-staff-dashboard #sidebar-pane-clients {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#atomware-staff-dashboard .atomware-client-filter-sidebar {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#atomware-staff-dashboard .atomware-client-filter-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Sidebar header: WordPress Custom Logo (Customizer → Site Identity), not favicon/site icon */
#atomware-staff-dashboard .atomware-sidebar-site-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}
#atomware-staff-dashboard .atomware-sidebar-site-logo {
    height: 10px;
    width: auto;
    max-width: min(220px, 100%);
    object-fit: contain;
    object-position: left center;
}
/* Match tab bar: same wash stack (black base) — staff-chrome used #1a tertiary and read lighter */
#atomware-staff-dashboard .atomware-topbar {
    background: var(--atomware-dashboard-wash-toolbar);
    border-bottom: 1px solid var(--atomware-border-brand-soft, rgba(21, 82, 204, 0.12));
}
#atomware-staff-dashboard .atomware-tabs {
    background: var(--atomware-dashboard-wash-toolbar);
    border-bottom: 1px solid var(--atomware-border-brand-soft, rgba(21, 82, 204, 0.12));
}
#atomware-staff-dashboard .atomware-tab-content {
    background: var(--atomware-dashboard-wash-staff-panel);
}
#atomware-staff-dashboard #team-chat-messages,
#atomware-staff-dashboard #chat-messages,
#atomware-staff-dashboard .atomware-group-chat-content,
#atomware-staff-dashboard .atomware-team-chat-main,
#atomware-staff-dashboard .atomware-chat-main {
    background: var(--atomware-dashboard-wash-staff-chat);
}

/*
 * Module Host: CRM / SMM / KB embedded iframe overlay — same z-layer as team chat overlay.
 */
#atomware-module-host[hidden] {
    display: none !important;
}
#atomware-module-host:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99940;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
    max-height: 100dvh;
    box-sizing: border-box;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--atomware-bg-primary, #0a0a0a);
    animation: atomware-module-host-in 0.2s ease-out;
}
@keyframes atomware-module-host-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.atomware-module-host-frame {
    flex: 1 1 0%;
    border: none;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    background: var(--atomware-bg-primary, #0a0a0a);
}
/*
 * Staff team chat (Channels / DMs): fullscreen overlay — flex chain so #team-chat-messages scrolls.
 */
#atomware-team-chat-overlay[hidden] {
    display: none !important;
}
#atomware-team-chat-overlay:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99950;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--atomware-bg-primary, #0a0a0a);
}

/* Team overlay lives inside #tab-chats: cover only the Chats pane, not Email/Tasks/etc. */
#atomware-staff-dashboard #tab-chats.atomware-tab-pane.active #atomware-chats-tab-stack,
#atomware-staff-dashboard.staff-tab-is-chats #tab-chats #atomware-chats-tab-stack {
    position: relative;
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#atomware-staff-dashboard #tab-chats.atomware-tab-pane.active #atomware-team-chat-overlay:not([hidden]) {
    position: absolute !important;
    inset: 0 !important;
    z-index: 40;
    max-height: none;
    overflow: hidden !important;
}

#atomware-team-chat-overlay #sidebar-pane-chat {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#atomware-team-chat-overlay .atomware-sidebar-chat-body,
#atomware-team-chat-overlay .atomware-team-chat-main {
    min-height: 0;
}

#atomware-team-chat-overlay .atomware-sidebar-chat-body {
    flex: 1 1 0% !important;
}

#atomware-team-chat-overlay .atomware-team-chat-main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

#atomware-team-chat-overlay .atomware-team-chat-main .atomware-chat-feed-wrap {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    contain: none;
}

#atomware-team-chat-overlay #team-chat-messages.atomware-chat-messages,
#atomware-team-chat-overlay #team-chat-messages.atomware-team-messages {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

#atomware-team-chat-overlay .atomware-chat-input.atomware-team-chat-input {
    flex-shrink: 0;
}

#atomware-team-chat-overlay:not([hidden]) #team-chat-back-btn {
    display: inline-flex;
}

/* Team chat is in-tab: clip scroll on the active Chats pane only (not whole document). */
#atomware-staff-dashboard.atomware-team-chat-overlay-open #tab-chats.atomware-tab-pane.active {
    overflow: hidden;
}

/* Main column: flex chain for tab panes (esp. Group Chat) — grid cell must shrink for nested scroll. */
#atomware-staff-dashboard .atomware-main {
    min-height: 0;
}

/* Explicit height: fills the grid row (1fr next to sidebar). Without this, some theme/wrapper combos
   leave .atomware-main only as tall as intrinsic content → huge empty band inside the fixed shell above Group Chat. */
#atomware-staff-dashboard.atomware-dashboard > .atomware-main {
    height: 100%;
    align-self: stretch;
}

/* Percent heights + containment on .atomware-main can prevent #tab-chats from getting a definite
   height on tablet — group chat floats mid-column with dead space above. Use flex-basis 0 chain. */
#atomware-staff-dashboard:has(#tab-chats.atomware-tab-pane.active) .atomware-main,
#atomware-staff-dashboard.staff-tab-is-chats .atomware-main {
    contain: none;
    position: relative;
    z-index: 2;
}

/* Staff Group Chat: .atomware-tab-content gets height from flex:1 on .atomware-main; #tab-chats is
 * OUT of the flex distribution (absolute fill) so nested flex quirks cannot leave a dead band
 * below .atomware-tabs. */
#atomware-staff-dashboard .atomware-tab-content:has(#tab-chats.atomware-tab-pane.active),
#atomware-staff-dashboard.staff-tab-is-chats .atomware-tab-content {
    position: relative !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#atomware-staff-dashboard #tab-chats.atomware-tab-pane.active,
#atomware-staff-dashboard.staff-tab-is-chats #tab-chats {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    flex: none !important;
    align-self: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* tab-content is position:relative so #tab-chats absolute-fills it (not .atomware-main).
   No z-index needed — tab-content comes after .atomware-tabs in the DOM so it paints on top. */
#atomware-staff-dashboard.staff-tab-is-chats .atomware-main > .atomware-tab-content {
    position: relative !important;
    z-index: auto;
}

#atomware-staff-dashboard #tab-chats.atomware-tab-pane.active .atomware-chats-container,
#atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-chats-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    width: 100%;
    align-self: stretch !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
}

#atomware-staff-dashboard #tab-chats.atomware-tab-pane.active .atomware-chat-main,
#atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-chat-main {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: flex-start !important;
}

/* JS uses .css({display:'flex'}) to show / .hide() to hide — no !important on display so inline style wins */
#atomware-staff-dashboard #tab-chats.atomware-tab-pane.active #group-chat-content.atomware-group-chat-content,
#atomware-staff-dashboard #tab-chats.atomware-tab-pane.active .atomware-group-chat-content,
#atomware-staff-dashboard.staff-tab-is-chats #tab-chats #group-chat-content.atomware-group-chat-content,
#atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-group-chat-content {
    display: flex;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
}

#atomware-staff-dashboard #tab-chats.atomware-tab-pane.active .atomware-chat-feed-wrap,
#atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-chat-feed-wrap {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    contain: none !important;
}

/* layout style containment on #chat-messages can confuse nested flex sizing in some engines */
#atomware-staff-dashboard #tab-chats.atomware-tab-pane.active #chat-messages {
    contain: none !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
}

/*
 * Staff Group Chat header: timezone/currency strip on its own row below the client name.
 * The header itself wraps (base rule above); title-wrap fills the middle, timezone is full-width row 2.
 */
#atomware-staff-dashboard #tab-chats .atomware-group-chat-header .atomware-group-chat-title-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    /* title-wrap occupies row 1 alongside back-btn and actions */
    order: 1;
}
#atomware-staff-dashboard #tab-chats .atomware-group-chat-header .atomware-chat-back-btn {
    flex: 0 0 auto;
    order: 0;
}
#atomware-staff-dashboard #tab-chats .atomware-group-chat-header .atomware-group-chat-actions {
    flex: 0 0 auto;
    order: 2;
}
#atomware-staff-dashboard #tab-chats .atomware-group-chat-header .atomware-group-chat-logo-wrap {
    flex: 0 0 auto;
}
#atomware-staff-dashboard #tab-chats .atomware-group-chat-header .atomware-group-chat-title-wrap #group-chat-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#atomware-staff-dashboard #tab-chats .atomware-group-chat-header #group-chat-timezone {
    /* full-width second row */
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    padding: 2px 0;
    font-size: 11px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
#atomware-staff-dashboard #tab-chats .atomware-group-chat-header #group-chat-timezone::-webkit-scrollbar {
    display: none;
}

/* Subtle wash from active client color (set via JS on #atomware-staff-dashboard) */
#atomware-staff-dashboard.atomware-group-chat-client-tint #tab-chats #chat-messages {
    background-image: linear-gradient(
        180deg,
        rgba(var(--atomware-group-chat-client-rgb, 30, 64, 175), 0.075) 0%,
        transparent 55%
    );
    background-repeat: no-repeat;
    background-size: 100% min(220px, 38vh);
}

#atomware-staff-dashboard .atomware-tasks-header,
#atomware-staff-dashboard .atomware-analytics-header {
    background: var(--atomware-dashboard-wash-toolbar);
    border-radius: var(--atomware-radius-sm, 4px);
    padding: 8px 10px 10px;
    margin-left: 0;
    margin-right: 0;
    border-bottom: 1px solid var(--atomware-border-brand-soft, rgba(21, 82, 204, 0.1));
}

#atomware-client-portal .atomware-client-topbar {
    background: var(--atomware-dashboard-wash-client-chrome);
    border-bottom: 1px solid var(--atomware-border-brand-soft, rgba(21, 82, 204, 0.14));
}
/* Client portal: toolbar + pane — stacks on phone/tablet; desktop gets vertical rail (see @media min-width 1024px) */
#atomware-client-portal .atomware-client-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    align-self: stretch;
}
#atomware-client-portal .atomware-client-nav-rail {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
}
#atomware-client-portal .atomware-client-nav-toggle {
    display: none;
}

/* Client portal nav collapse toggle is desktop-only; never show it on mobile/tablet. */
@media (max-width: 1023px) {
    #atomware-client-portal .atomware-client-nav-toggle {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}
#atomware-client-portal .atomware-tabs {
    background: var(--atomware-dashboard-wash-toolbar);
    border-bottom: 1px solid var(--atomware-border-brand-soft, rgba(21, 82, 204, 0.12));
}
#atomware-client-portal .atomware-tab-content {
    background: var(--atomware-dashboard-wash-client-panel);
}

/* Desktop (1024px+): vertical expandable/collapsible nav rail — tablets/phones unchanged above */
@media (min-width: 1024px) {
    #atomware-client-portal .atomware-client-body {
        flex-direction: row;
        align-items: stretch;
    }
    #atomware-client-portal .atomware-client-nav-rail {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-columns: minmax(0, 1fr);
        width: 220px;
        max-width: 25vw;
        border-right: 1px solid var(--atomware-border-brand-soft, rgba(21, 82, 204, 0.12));
        border-bottom: none;
        background: var(--atomware-dashboard-wash-toolbar);
    }
    #atomware-client-portal .atomware-client-nav-rail.atomware-client-nav-rail-collapsed {
        width: 48px;
        max-width: 48px;
    }
    #atomware-client-portal .atomware-client-nav-toggle {
        grid-row: 1;
        grid-column: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: end;
        align-self: start;
        width: auto;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 8px 10px;
        border: none;
        border-bottom: 1px solid var(--atomware-border-brand-soft, rgba(21, 82, 204, 0.12));
        background: transparent;
        color: inherit;
        cursor: pointer;
        border-radius: 0;
        flex-shrink: 0;
    }
    /* Collapsed strip: collapse control spans full width, icon centered */
    #atomware-client-portal .atomware-client-nav-rail.atomware-client-nav-rail-collapsed .atomware-client-nav-toggle {
        justify-self: stretch;
        width: 100%;
    }
    #atomware-client-portal .atomware-client-nav-toggle:hover {
        background: rgba(255, 255, 255, 0.06);
    }
    /* Desktop client rail: collapse chevron — 20px (sidebar icons +2px vs 18px text tier) */
    #atomware-client-portal .atomware-client-nav-toggle .material-icons {
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
    }
    #atomware-client-portal .atomware-client-nav-rail .atomware-tabs {
        grid-row: 2;
        grid-column: 1;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-x: hidden;
        overflow-y: auto;
        flex: 1 1 0;
        min-height: 0;
        gap: 6px;
        padding: 6px 12px 14px;
        border-bottom: none;
        align-items: stretch;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    #atomware-client-portal .atomware-client-body > .atomware-tab-content {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    /* Expanded rail: labels 16px; tab Material icons 20px — desktop vertical nav only */
    #atomware-client-portal .atomware-client-nav-rail:not(.atomware-client-nav-rail-collapsed) .atomware-tab-btn {
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        flex-shrink: 0;
        gap: 8px !important;
        padding: 6px 10px !important;
        min-height: 36px;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 16px !important;
    }
    #atomware-client-portal .atomware-client-nav-rail:not(.atomware-client-nav-rail-collapsed) .atomware-tab-btn > .material-icons {
        flex: 0 0 auto;
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        top: 0 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #atomware-client-portal .atomware-client-nav-rail:not(.atomware-client-nav-rail-collapsed) .atomware-tab-btn > span:not(.material-icons):not(.atomware-badge) {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        font-size: 16px !important;
        line-height: 16px !important;
    }
    #atomware-client-portal .atomware-client-nav-rail:not(.atomware-client-nav-rail-collapsed) .atomware-tab-btn .atomware-badge:not(:empty) {
        margin-left: auto;
        flex-shrink: 0;
        font-size: 10px !important;
        min-width: 16px;
        height: 16px;
        padding: 0 5px;
        line-height: 1;
    }
    /* Collapsed rail: icons only @ 20px (matches expanded icon size) */
    #atomware-client-portal .atomware-client-nav-rail.atomware-client-nav-rail-collapsed .atomware-tab-btn {
        width: 100%;
        justify-content: center;
        padding-inline: 6px !important;
        gap: 0 !important;
        position: relative;
        font-size: 20px !important;
        line-height: 1 !important;
        min-height: 36px;
        padding-block: 5px !important;
    }
    #atomware-client-portal .atomware-client-nav-rail.atomware-client-nav-rail-collapsed .atomware-tab-btn > .material-icons {
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
    #atomware-client-portal .atomware-client-nav-rail.atomware-client-nav-rail-collapsed .atomware-tab-btn > span:not(.material-icons):not(.atomware-badge) {
        display: none !important;
    }
    #atomware-client-portal .atomware-client-nav-rail.atomware-client-nav-rail-collapsed .atomware-tab-btn .atomware-badge:not(:empty) {
        display: inline-flex !important;
        margin: 0;
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 16px;
        height: 16px;
        font-size: 9px;
    }
}
#atomware-client-portal #chat-messages,
#atomware-client-portal .atomware-group-chat-content,
#atomware-client-portal .atomware-chat-main {
    background: var(--atomware-dashboard-wash-staff-chat);
}
#atomware-client-portal .atomware-tasks-header,
#atomware-client-portal .atomware-analytics-header {
    background: var(--atomware-dashboard-wash-toolbar);
    border-radius: var(--atomware-radius-sm, 4px);
    padding: 8px 10px 10px;
    margin-left: 0;
    margin-right: 0;
    border-bottom: 1px solid var(--atomware-border-brand-soft, rgba(21, 82, 204, 0.1));
}

/* Force full width - override theme constraints */
.atomware-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

/* Override Elementor and theme containers — staff dashboard */
.elementor-widget-container:has(.atomware-dashboard),
.e-con:has(.atomware-dashboard),
.elementor-element:has(.atomware-dashboard) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Override Elementor and theme containers — client portal.
   Without this, Elementor's default max-width / padding on the container element can inflate
   the page document width. On iOS Safari a wider document causes the initial viewport to expand
   beyond the device width, then position:fixed left:0/right:0 on the portal extends to that
   wider viewport — making the topbar and nav-rail appear to overflow on phones. */
.elementor-widget-container:has(#atomware-client-portal),
.e-con:has(#atomware-client-portal),
.elementor-element:has(#atomware-client-portal) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
.e-con:has(#atomware-client-portal),
.elementor-element:has(#atomware-client-portal) {
    align-items: stretch !important;
    min-height: 100dvh !important;
}

/* Prevent Elementor flex containers from centering the dashboard (fixes Notes tab jump).
   Stretch + min-height lets the dashboard receive full embed height — flex-start sidebar was
   leaving dead vertical space above/below chats on tablet. */
.e-con:has(#atomware-staff-dashboard),
.elementor-element:has(#atomware-staff-dashboard) {
    align-items: stretch !important;
    justify-content: flex-start !important;
    align-content: stretch !important;
    --align-items: stretch !important;
    --justify-content: flex-start !important;
    min-height: 100dvh !important;
}

#atomware-staff-dashboard.atomware-dashboard {
    align-self: stretch !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Hide theme header/footer when dashboard is active */
body:has(.atomware-dashboard) .site-header,
body:has(.atomware-dashboard) .site-footer,
body:has(.atomware-dashboard) header.elementor-location-header,
body:has(.atomware-dashboard) footer.elementor-location-footer {
    display: none !important;
}

.atomware-platform-footer {
    position: static;
    z-index: 1;
    font-size: 12px;
    color: #8a8a8a;
    padding-block: 8px;
    padding-inline: 12px;
    line-height: 1.35;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--atomware-bg-primary);
    border-top: 1px solid var(--atomware-border);
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-top: auto;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

#atomware-smm > .atomware-platform-footer {
    margin-top: auto;
}

.atomware-platform-footer-inner {
    display: grid;
    grid-template-columns: minmax(28px, auto) 1fr minmax(28px, auto);
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
}

.atomware-platform-footer-start {
    justify-self: start;
}

.atomware-platform-footer-end {
    justify-self: end;
}

.atomware-platform-footer-text {
    text-align: center;
    min-width: 0;
    color: inherit;
}

.atomware-footer-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--atomware-text-muted, #8a8a8a);
    text-decoration: none;
    border-radius: 6px;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s ease, background 0.15s ease;
}

.atomware-footer-icon-link:hover {
    color: var(--atomware-text-secondary, #d1d5db);
    background: rgba(255, 255, 255, 0.06);
}

.atomware-footer-icon-link:focus-visible {
    outline: 2px solid var(--atomware-primary, #1552cc);
    outline-offset: 2px;
}

.atomware-footer-icon-link .material-icons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Adjust for admin bar if present */
body.admin-bar .atomware-dashboard {
    min-height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .atomware-dashboard {
        min-height: calc(100vh - 46px);
    }
}

/* =========================================================================
 * TABLET & SMALL LAPTOP (769px – 1200px)
 * Touch-friendly targets, no horizontal bleed, sidebars that leave room for
 * main content. Works with base @media (max-width: 1024px) body font (12px).
 * ========================================================================= */
@media (min-width: 769px) and (max-width: 1200px) {
    /* clamp(200px, 26vw, 240px) keeps the sidebar column and the sidebar element in sync at every
       viewport width so the sidebar never overflows its grid cell (previously min(240px,28vw) beat
       minmax(200px,26vw) by up to 15 px at 769–923 px, blowing the sidebar into the main area). */
    #atomware-staff-dashboard.atomware-dashboard {
        grid-template-columns: clamp(200px, 26vw, 240px) minmax(0, 1fr) !important;
    }
    #atomware-staff-dashboard.atomware-dashboard:has(.atomware-sidebar.atomware-sidebar-collapsed) {
        grid-template-columns: 56px minmax(0, 1fr) !important;
    }
    #atomware-staff-dashboard .atomware-sidebar {
        width: clamp(200px, 26vw, 240px) !important;
        min-width: clamp(200px, 26vw, 240px) !important;
        max-width: 240px !important;
    }
    /* Collapsed: expanded tablet widths use !important above and were beating .atomware-sidebar-collapsed (56px),
       so the rail stayed ~200px while the grid column stayed 56px — overflow, stray purple rows, cramped icons. */
    #atomware-staff-dashboard .atomware-sidebar.atomware-sidebar-collapsed {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        overflow-x: hidden !important;
    }
    #atomware-staff-dashboard .atomware-main,
    #atomware-client-portal .atomware-tab-content {
        min-width: 0 !important;
    }

    #atomware-staff-dashboard .atomware-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        gap: 4px;
        padding: 8px 10px;
    }
    #atomware-staff-dashboard .atomware-tabs::-webkit-scrollbar {
        height: 4px;
    }
    /* Client portal: horizontal strip only below desktop vertical-rail breakpoint */
    @media (max-width: 1023px) {
        #atomware-client-portal .atomware-tabs {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            gap: 4px;
            padding: 8px 10px;
        }
        #atomware-client-portal .atomware-tabs::-webkit-scrollbar {
            height: 4px;
        }
        /* Nav-rail is a full-width horizontal tabs container below the desktop breakpoint.
           max-width:100% + overflow:hidden ensure it never pushes the portal wider than the viewport. */
        #atomware-client-portal .atomware-client-nav-rail {
            max-width: 100%;
            overflow: hidden;
        }
        /* Client portal body: column layout (nav-rail on top, content below); clamp to viewport. */
        #atomware-client-portal .atomware-client-body {
            max-width: 100%;
            overflow-x: hidden;
        }
    }
    #atomware-staff-dashboard .atomware-tab-btn,
    #atomware-client-portal .atomware-tab-btn {
        min-height: 40px;
        padding: 8px 12px;
        flex-shrink: 0;
    }

    #atomware-staff-dashboard .atomware-topbar,
    #atomware-client-portal .atomware-client-topbar {
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    #atomware-staff-dashboard #staff-timers-widgets.atomware-staff-timers {
        flex: 1 1 0;
        min-width: 0;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 8px;
        touch-action: pan-x;
    }
    #atomware-staff-dashboard #staff-timers-widgets.atomware-staff-timers::-webkit-scrollbar {
        display: none;
        height: 0;
    }
    #atomware-client-portal .atomware-client-topbar-left {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #atomware-client-portal .atomware-client-topbar-left::-webkit-scrollbar {
        display: none;
        height: 0;
    }
    /* Multi-business: cap company control width; timers are a separate flex child from .topbar-left */
    #atomware-client-portal .atomware-client-topbar .atomware-client-business-combobox {
        max-width: min(300px, 48vw);
        flex: 0 1 auto;
    }
    #atomware-client-portal .atomware-client-topbar .atomware-client-combobox-name {
        max-width: 12rem;
    }
    #atomware-client-portal .atomware-business-selector-inline,
    #atomware-client-portal .atomware-client-topbar .atomware-business-selector-inline .atomware-select,
    #atomware-client-portal .atomware-client-topbar .atomware-client-business-combobox {
        min-width: 0;
    }
    #atomware-client-portal .atomware-client-timers-wrap#client-timers-wrap,
    #atomware-client-portal #client-timers-wrap {
        flex: 0 1 auto;
        margin-left: 0;
    }
    #atomware-client-portal .atomware-client-timers.atomware-staff-timers {
        flex-wrap: nowrap;
    }
    #atomware-staff-dashboard .atomware-topbar-actions {
        min-width: 0;
        flex-wrap: wrap;
        flex-shrink: 0;
    }
    #atomware-client-portal .atomware-client-topbar-right {
        min-width: 0;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    .atomware-portal .atomware-modal,
    .atomware-dashboard .atomware-modal {
        padding: 12px;
        box-sizing: border-box;
    }
    .atomware-portal .atomware-modal-content,
    .atomware-dashboard .atomware-modal-content,
    .atomware-portal .atomware-modal .atomware-modal-content,
    .atomware-dashboard .atomware-modal .atomware-modal-content {
        width: min(100% - 24px, 640px) !important;
        max-width: min(96vw, 640px) !important;
        max-height: 88dvh !important;
    }
    .atomware-modal-header-actions .atomware-btn-icon {
        min-width: 40px;
        min-height: 40px;
    }
    .atomware-modal-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    .atomware-modal-footer .atomware-btn-primary,
    .atomware-modal-footer .atomware-btn-secondary,
    .atomware-modal-footer .atomware-btn-danger {
        min-height: 40px;
    }

    .atomware-portal .atomware-form-row,
    .atomware-dashboard .atomware-form-row {
        flex-wrap: wrap;
        min-width: 0;
        gap: 8px;
    }
    .atomware-portal .atomware-input,
    .atomware-dashboard .atomware-input,
    .atomware-portal .atomware-select:not([multiple]),
    .atomware-dashboard .atomware-select:not([multiple]) {
        min-width: 0;
        max-width: 100%;
    }

    .atomware-portal .atomware-btn-icon,
    .atomware-dashboard .atomware-btn-icon {
        min-width: 40px;
        min-height: 40px;
    }
    #atomware-staff-dashboard .atomware-sidebar .atomware-sidebar-tab {
        min-height: 40px;
    }

    #atomware-staff-dashboard #tab-assigned.active #assigned-kanban,
    #atomware-client-portal .atomware-kanban-board {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }

    #tab-analytics .atomware-analytics-header,
    #tab-analytics .atomware-analytics-filters {
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }
    #atomware-client-portal .atomware-analytics-header,
    #atomware-client-portal .atomware-analytics-filters {
        flex-wrap: wrap;
        min-width: 0;
    }

    .atomware-chats-container,
    .atomware-email-app {
        min-width: 0 !important;
    }

    #notes-tab-root .notes-tab-header,
    #notes-tab-root .notes-tab-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }

    .atomware-contacts-toolbar {
        flex-wrap: wrap;
        min-width: 0;
    }

    #atomware-staff-dashboard .atomware-files-toolbar-scope .atomware-file-toolbar,
    #atomware-client-portal .atomware-files-toolbar-scope .atomware-file-toolbar {
        flex-wrap: wrap;
    }

    /* Group Chat: global staff rules set flex chain + z-index below; duplicate contain:none for this breakpoint */
    #atomware-staff-dashboard:has(#tab-chats.atomware-tab-pane.active) .atomware-main,
    #atomware-staff-dashboard.staff-tab-is-chats .atomware-main {
        contain: none;
        position: relative;
        z-index: 2;
    }
}

@media (max-width: 768px) {
    /* Both shells: 14px body; 13px labels; form inputs use 16px block below (iOS zoom fix) */
    #atomware-staff-dashboard,
    #atomware-client-portal {
        font-size: 14px;
    }
    #atomware-staff-dashboard .atomware-control-label,
    #atomware-client-portal .atomware-control-label {
        font-size: 13px;
    }

    .atomware-dashboard {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .atomware-sidebar {
        grid-column: 1;
        grid-row: 1;
    }

    .atomware-main {
        grid-column: 1;
        grid-row: 2;
    }

    #atomware-staff-dashboard .atomware-tab-text,
    #atomware-staff-dashboard .atomware-sidebar-tab-text,
    #atomware-staff-dashboard .atomware-status-text,
    #atomware-staff-dashboard .atomware-quick-text {
        display: none !important;
    }

    /* Client tasks tab: status filters — icons + counts, labels hidden */
    #atomware-client-portal .atomware-status-tabs .atomware-status-text {
        display: none !important;
    }
    #atomware-client-portal .atomware-status-tabs .atomware-status-tab {
        padding: 6px 8px !important;
        gap: 4px !important;
        justify-content: center;
        flex: 1 1 0;
        min-width: 0;
    }

    #atomware-staff-dashboard .atomware-tab-btn,
    #atomware-staff-dashboard .atomware-sidebar-tab,
    #atomware-staff-dashboard .atomware-status-tab,
    #atomware-staff-dashboard .atomware-quick-btn {
        padding: 6px 10px !important;
        gap: 0 !important;
    }

    #atomware-staff-dashboard .atomware-quick-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding: 0 0 8px;
    }

    #atomware-staff-dashboard .atomware-quick-btn {
        width: auto;
        min-width: 40px;
        justify-content: center;
    }

    /* Top bar + tabs: same Material icon size (24px) on mobile */
    #atomware-staff-dashboard #notifications-btn,
    #atomware-client-portal #notifications-btn {
        min-width: 44px;
        min-height: 44px;
    }
    #atomware-staff-dashboard .atomware-topbar .atomware-btn-icon .material-icons,
    #atomware-staff-dashboard .atomware-topbar a.atomware-btn-icon .material-icons,
    #atomware-client-portal .atomware-client-topbar-right > .atomware-btn-icon .material-icons {
        font-size: 24px;
    }
    #atomware-staff-dashboard .atomware-tab-btn .atomware-tab-icon,
    #atomware-client-portal .atomware-tab-btn .atomware-tab-icon,
    #atomware-client-portal .atomware-tab-btn > .material-icons {
        font-size: 24px;
    }

    /*
     * Thread focus on phone: hide client rail chrome. Do NOT hide .atomware-main — #atomware-team-chat-overlay
     * lives under .atomware-main; display:none on an ancestor would blank the entire team UI.
     */
    #atomware-staff-dashboard.atomware-mobile-chat-open .atomware-sidebar-header,
    #atomware-staff-dashboard.atomware-mobile-chat-open .atomware-sidebar-tabs,
    #atomware-staff-dashboard.atomware-mobile-chat-open #sidebar-pane-clients {
        display: none !important;
    }

    /* Hide main tab strip while team thread is focused (keep topbar — hamburger opens client drawer). */
    #atomware-staff-dashboard.atomware-mobile-chat-open.atomware-team-chat-overlay-open .atomware-main > .atomware-tabs {
        display: none !important;
    }

    /*
     * Drawer open while in thread: restore sidebar panes so client filter is not an empty shell.
     * Beats the generic mobile rule that hides .atomware-sidebar-tabs (see ~3273) and the thread-focus hides above.
     */
    #atomware-staff-dashboard.atomware-mobile-chat-open.atomware-mobile-sidebar-open .atomware-sidebar-header {
        display: flex !important;
    }
    #atomware-staff-dashboard.atomware-mobile-chat-open.atomware-mobile-sidebar-open .atomware-sidebar > .atomware-sidebar-tabs {
        display: flex !important;
        flex-direction: column !important;
    }
    #atomware-staff-dashboard.atomware-mobile-chat-open.atomware-mobile-sidebar-open #sidebar-pane-clients {
        display: flex !important;
        flex-direction: column !important;
    }

    /* MUST stay display:flex — thread view must not lose flex on #sidebar-pane-chat (overlay). */
    #atomware-staff-dashboard.atomware-mobile-chat-open #sidebar-pane-chat {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    #atomware-staff-dashboard.atomware-mobile-chat-open .atomware-team-chat-sidebar {
        display: none !important;
    }

    #atomware-staff-dashboard.atomware-mobile-chat-open #atomware-team-chat-overlay .atomware-sidebar-chat-body {
        flex: 1 1 0% !important;
        min-height: 0 !important;
    }

    #atomware-staff-dashboard.atomware-mobile-chat-open .atomware-team-chat-main {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
    }

    /* Staff Group Chat (mobile): tabs → chat content → footer. Topbar hidden (shell nav
       handles navigation). Footer must have explicit order or it defaults to 0 and renders
       above the tabs bar, creating a stray dark strip at the top of .atomware-main. */
    #atomware-staff-dashboard.staff-tab-is-chats .atomware-main {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        align-self: stretch;
    }
    #atomware-staff-dashboard.staff-tab-is-chats .atomware-main > .atomware-tabs {
        order: 1;
    }
    #atomware-staff-dashboard.staff-tab-is-chats .atomware-main > .atomware-topbar {
        display: none !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats .atomware-main > .atomware-tab-content {
        order: 2;
        flex: 1 1 0%;
        min-height: 0;
        position: relative !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats .atomware-main > .atomware-platform-footer {
        order: 3;
        flex: 0 0 auto;
    }

    /* Staff Group Chat (mobile): simplify header controls (keep select + timezone/currency strip). */
    #atomware-staff-dashboard #tab-chats .atomware-group-chat-header #group-chat-back-btn,
    #atomware-staff-dashboard #tab-chats .atomware-group-chat-header .atomware-group-chat-logo-wrap,
    #atomware-staff-dashboard #tab-chats .atomware-group-chat-header #group-chat-search-toggle {
        display: none !important;
    }
    #atomware-staff-dashboard #tab-chats .atomware-group-chat-header {
        align-items: center;
    }
    #atomware-staff-dashboard #tab-chats .atomware-group-chat-header .atomware-group-chat-actions {
        margin-left: auto;
    }

    /* Staff Group Chat (mobile): hard guard against cascade regressions that can hide
       header/composer/message core blocks while reactions still paint. Staff-only scope. */
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-group-chat-header {
        display: flex !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-chat-input.atomware-team-chat-input {
        display: block !important;
        flex-shrink: 0 !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message-content {
        display: block !important;
        min-width: 0 !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message-header {
        display: flex !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message-body {
        display: block !important;
    }

    /* Staff Group Chat (mobile): enforce readable message visuals if theme cascade fails. */
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #group-chat-content {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message {
        display: flex !important;
        align-items: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 44px) !important;
        width: auto !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message.own .atomware-message-content,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message.client-msg .atomware-message-content,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message.team-msg .atomware-message-content {
        max-width: calc(100% - 44px) !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message-header,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message-author,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message-time {
        color: var(--atomware-text-secondary, #d1d5db) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message-body {
        color: var(--atomware-text-primary, #f9fafb) !important;
        background: var(--atomware-bg-tertiary, #1a1a1a) !important;
        padding: 10px 12px !important;
        border-radius: var(--atomware-radius, 8px) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message.own .atomware-message-body {
        background: var(--atomware-primary, #1552cc) !important;
        color: #fff !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats {
        overflow: hidden !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages {
        overflow-x: hidden !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-group-chat-header {
        flex-wrap: wrap !important;
        row-gap: 4px;
        min-width: 0;
        padding: 8px 10px !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-group-chat-header .atomware-group-chat-title-wrap {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-group-chat-header #group-chat-title {
        min-width: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message-content {
        max-width: calc(100vw - 84px) !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message-body,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-message-text,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages .atomware-chat-code-block,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages pre {
        max-width: 100% !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages img,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats #chat-messages video {
        max-width: 100%;
        height: auto;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-chat-input.atomware-team-chat-input {
        padding: 6px 8px !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-team-chat-input-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-team-chat-input-icons {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: auto !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-team-chat-input-composer {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 6px !important;
        align-items: stretch !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-team-chat-input-composer textarea,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-team-chat-input-composer .atomware-message-input-rich {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        min-height: 40px !important;
        max-height: 120px !important;
    }
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-team-chat-input-composer .atomware-btn-primary {
        flex: 0 0 auto !important;
        min-width: 40px !important;
    }

    /* Chat header back button - mobile only */
    #atomware-staff-dashboard.atomware-mobile-chat-open #team-chat-back-btn {
        display: inline-flex;
    }
    .atomware-group-chat-header .atomware-chat-back-btn,
    #atomware-client-portal .atomware-group-chat-header .atomware-chat-back-btn {
        display: inline-flex;
    }

    /* Single-pane team overlay (phones): list vs thread */
    #atomware-staff-dashboard.atomware-team-chat-overlay-open:not(.atomware-mobile-chat-open) #atomware-team-chat-overlay .atomware-team-chat-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto;
        border-right: none;
    }
    #atomware-staff-dashboard.atomware-team-chat-overlay-open:not(.atomware-mobile-chat-open) #atomware-team-chat-overlay .atomware-team-chat-main {
        display: none !important;
    }

    /* Touch-friendly tap targets in the channels/DMs list */
    #atomware-team-chat-overlay #sidebar-pane-chat .atomware-team-channel,
    #atomware-team-chat-overlay #sidebar-pane-chat .atomware-team-dm,
    #atomware-team-chat-overlay #sidebar-pane-chat .atomware-team-staff-item,
    #atomware-team-chat-overlay #sidebar-pane-chat .atomware-chat-item {
        padding: 12px 14px;
        min-height: 44px;
    }
    #atomware-team-chat-overlay #sidebar-pane-chat .atomware-team-list {
        max-height: none;
    }

    /* Header: keep back / title / actions on a single readable row */
    #atomware-staff-dashboard .atomware-team-chat-header {
        flex-wrap: wrap;
        row-gap: 4px;
        padding: 8px 10px;
    }
    #atomware-staff-dashboard .atomware-team-chat-header .atomware-btn-icon,
    #atomware-staff-dashboard .atomware-team-chat-header .atomware-btn-secondary {
        min-width: 40px;
        min-height: 40px;
    }
    /* Hide the popout button (irrelevant on a phone) */
    #atomware-team-chat-overlay #team-chat-popout-btn {
        display: none;
    }

    /* Composer: tighter padding, larger tap targets, multi-row friendly */
    #atomware-staff-dashboard .atomware-chat-input.atomware-team-chat-input {
        padding: 8px;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-row .atomware-btn-icon {
        min-width: 40px;
        min-height: 40px;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-row textarea,
    #atomware-staff-dashboard .atomware-team-chat-input-row .atomware-message-input-rich {
        min-height: 44px;
    }
    /* iOS auto-zooms <textarea> when font-size <16px; pin it to prevent that */
    #atomware-staff-dashboard .atomware-team-chat-input-row textarea {
        font-size: 16px;
    }

    /* Stop horizontal overflow inside chat bubbles on small screens */
    #atomware-staff-dashboard #team-chat-messages .atomware-message-content,
    #atomware-staff-dashboard #team-chat-messages .atomware-message-text,
    #atomware-staff-dashboard #team-chat-messages .atomware-chat-code-block,
    #atomware-staff-dashboard #team-chat-messages pre {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    #atomware-staff-dashboard #team-chat-messages img,
    #atomware-staff-dashboard #team-chat-messages video {
        max-width: 100%;
        height: auto;
    }

    /* Message thread fills available height; composer stays compact (staff + client) */
    #atomware-staff-dashboard .atomware-team-chat-main,
    #atomware-client-portal .atomware-group-chat-content {
        min-height: 0;
        flex: 1 1 0%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    /* flex-basis 0 + min-height 0 lets the scroll box shrink once messages render */
    #atomware-staff-dashboard #team-chat-messages.atomware-team-messages,
    #atomware-staff-dashboard .atomware-team-messages#team-chat-messages {
        flex: 1 1 0%;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #atomware-client-portal .atomware-chat-main {
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
    #atomware-client-portal .atomware-chats-container.atomware-client-chat {
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
    #atomware-client-portal #tab-chat .atomware-tab-content {
        min-height: 0;
    }
    #atomware-client-portal #chat-messages.atomware-team-messages,
    #atomware-client-portal #chat-messages {
        flex: 1 1 auto;
        min-height: max(140px, 28dvh, 28vh);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #atomware-staff-dashboard .atomware-team-chat-input,
    #atomware-client-portal .atomware-group-chat-content .atomware-team-chat-input {
        flex-shrink: 0;
        padding: 6px 8px;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-row,
    #atomware-client-portal .atomware-team-chat-input-row {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow: visible;
        gap: 8px;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-icons,
    #atomware-client-portal .atomware-team-chat-input-icons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-row .atomware-btn-icon,
    #atomware-client-portal .atomware-team-chat-input-row .atomware-btn-icon,
    #atomware-staff-dashboard .atomware-team-chat-input-icons .atomware-btn-icon,
    #atomware-client-portal .atomware-team-chat-input-icons .atomware-btn-icon {
        min-width: 44px;
        min-height: 44px;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-row .atomware-btn-icon .material-icons,
    #atomware-client-portal .atomware-team-chat-input-row .atomware-btn-icon .material-icons,
    #atomware-staff-dashboard .atomware-team-chat-input-icons .material-icons,
    #atomware-client-portal .atomware-team-chat-input-icons .material-icons {
        font-size: 24px;
    }
    /* Message + send on one row (replaces full-width tall textarea) */
    #atomware-staff-dashboard .atomware-team-chat-input-composer,
    #atomware-client-portal .atomware-team-chat-input-composer {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-composer textarea,
    #atomware-client-portal .atomware-team-chat-input-composer textarea {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        min-height: 44px;
        max-height: 120px;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-composer .atomware-btn-primary,
    #atomware-client-portal .atomware-team-chat-input-composer .atomware-btn-primary {
        flex: 0 0 auto;
        align-self: stretch;
        min-width: 44px;
    }

    /*
     * Voice composer (mobile/narrow ≤768px only): full-width recording strip + preview row.
     * Do NOT apply on desktop — global flex-basis 100% in the composer row steals space from #team-message-input
     * (.atomware-team-chat-input-row uses display:contents icons + textarea in one horizontal flex row on wide layouts).
     */
    #atomware-staff-dashboard .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording,
    #atomware-client-portal .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording,
    #atomware-team-chat-overlay .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-recording-panel,
    #atomware-client-portal .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-recording-panel,
    #atomware-team-chat-overlay .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-recording-panel {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        justify-content: flex-start;
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-waves,
    #atomware-client-portal .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-waves,
    #atomware-team-chat-overlay .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-waves {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        justify-content: space-between;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-timestamp,
    #atomware-client-portal .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-timestamp,
    #atomware-team-chat-overlay .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-timestamp {
        flex-shrink: 0;
        font-size: 11px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--atomware-text-muted, #94a3b8);
        min-width: 34px;
        text-align: center;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-stop-btn,
    #atomware-client-portal .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-stop-btn,
    #atomware-team-chat-overlay .atomware-team-chat-input-icons .atomware-voice-btn-wrap.atomware-is-recording .atomware-voice-stop-btn {
        flex-shrink: 0;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-icons.atomware-voice-preview-active .atomware-voice-preview-panel,
    #atomware-client-portal .atomware-team-chat-input-icons.atomware-voice-preview-active .atomware-voice-preview-panel,
    #atomware-team-chat-overlay .atomware-team-chat-input-icons.atomware-voice-preview-active .atomware-voice-preview-panel {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        justify-content: space-between;
    }
    #atomware-staff-dashboard .atomware-team-chat-input-icons.atomware-voice-preview-active .atomware-voice-preview-panel audio,
    #atomware-client-portal .atomware-team-chat-input-icons.atomware-voice-preview-active .atomware-voice-preview-panel audio,
    #atomware-team-chat-overlay .atomware-team-chat-input-icons.atomware-voice-preview-active .atomware-voice-preview-panel audio {
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    /* File selection / bulk toolbar: match larger tab-icon tap targets (PDF brief) */
    .atomware-selection-toolbar .material-icons,
    #selection-toolbar .material-icons {
        font-size: 24px;
    }
    .atomware-selection-toolbar .atomware-btn-icon,
    #selection-toolbar .atomware-btn-icon {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Staff phones + tablets: sidebar team chat keeps a real scroll region above composer */
@media (max-width: 1024px) {
    #atomware-staff-dashboard .atomware-main {
        min-height: 0;
    }
    #atomware-staff-dashboard .atomware-tab-content {
        min-height: 0;
    }
    /* Group Chat: outer .atomware-tab-content must NOT scroll (only #chat-messages does). */
    #atomware-staff-dashboard .atomware-tab-content:has(#tab-chats.atomware-tab-pane.active),
    #atomware-staff-dashboard.staff-tab-is-chats .atomware-tab-content {
        position: relative !important;
        overflow: hidden !important;
        flex: 1 1 0% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    #atomware-staff-dashboard .atomware-team-chat-main {
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #atomware-staff-dashboard #team-chat-messages.atomware-team-messages,
    #atomware-staff-dashboard .atomware-team-messages#team-chat-messages {
        flex: 1 1 0%;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #atomware-staff-dashboard #tab-chats.atomware-tab-pane.active .atomware-chats-container,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-chats-container {
        display: flex;
        flex-direction: column;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        align-content: flex-start !important;
    }
    #atomware-staff-dashboard #tab-chats.atomware-tab-pane.active .atomware-chat-main,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-chat-main {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        justify-content: flex-start !important;
    }
    #atomware-staff-dashboard #tab-chats.atomware-tab-pane.active .atomware-group-chat-content,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-group-chat-content {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
    }
    #atomware-staff-dashboard #tab-chats.atomware-tab-pane.active .atomware-chat-feed-wrap,
    #atomware-staff-dashboard.staff-tab-is-chats #tab-chats .atomware-chat-feed-wrap {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        contain: none !important;
    }
    #atomware-staff-dashboard #tab-chats.atomware-tab-pane.active #chat-messages {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * MOBILE RESPONSIVE OVERHAUL (≤768px)
 *
 * Goal: full-app responsiveness without disturbing the desktop layout.
 *  - Staff dashboard sidebar becomes an off-canvas drawer (was always-on top
 *    strip that consumed the viewport and hid main content).
 *  - SMM page sidebar gets the same drawer pattern (it already had a hidden
 *    hamburger button on the page).
 *  - Tabs, modals, tables, forms get touch-friendly tap targets and stop
 *    overflowing horizontally.
 *  - Desktop CSS is untouched; everything below is wrapped in @media or
 *    nested under .atomware-mobile-menu-btn / drawer classes that don't
 *    apply on desktop.
 * ───────────────────────────────────────────────────────────────────────── */

/* Hamburger and mobile-only backdrops are hidden by default (desktop). */
.atomware-mobile-menu-btn,
.atomware-mobile-sidebar-backdrop,
.atomware-smm-hamburger,
.atomware-smm-sidebar-backdrop {
    display: none;
}

/* Staff hamburger: also has .atomware-btn-icon (display: inline-flex). Force hidden on
   desktop so theme/late CSS cannot resurrect it; (max-width: 768px) block shows it. */
#atomware-staff-dashboard .atomware-topbar .atomware-mobile-menu-btn,
#atomware-mobile-menu-btn {
    display: none !important;
}

@media (max-width: 768px) {

    /* ── Staff dashboard: sidebar becomes an off-canvas drawer ────────── */
    /* By default the dashboard now collapses to a single column owned by
       .atomware-main. The sidebar is yanked out of the grid into a fixed
       drawer that slides in from the left. */
    /* !important: base .atomware-dashboard sets padding:0 !important; need inset for footer */
    .atomware-dashboard,
    #atomware-staff-dashboard.atomware-dashboard {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) !important;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        box-sizing: border-box;
        /* Keep "Powered by" / platform footer above iOS/Android home indicator */
        padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Shell-enabled staff layout still needs a dedicated shell row + main row on mobile.
       Collapsing to a single row can push sidebar content to the bottom and leave a large empty band. */
    #atomware-staff-dashboard.atomware-dashboard-shell-enabled {
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }
    #atomware-staff-dashboard.atomware-dashboard-shell-enabled > .atomware-platform-shell-nav {
        grid-row: 1 !important;
    }
    #atomware-staff-dashboard.atomware-dashboard-shell-enabled > .atomware-main {
        grid-row: 2 !important;
        min-height: 0 !important;
    }
    #atomware-staff-dashboard.atomware-dashboard-shell-enabled > .atomware-sidebar {
        grid-row: 2 / -1 !important;
    }

    /* Default mobile state (NOT in chat-expanded mode): sidebar is a drawer */
    .atomware-dashboard:not(.sidebar-chat-expanded) > .atomware-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(85vw, 320px);
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        z-index: 9990;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.45);
        border-right: 1px solid var(--atomware-border);
        grid-column: auto;
        grid-row: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Recovery guard: if legacy classes leave sidebar-chat-expanded on Clients, still enforce drawer mode. */
    #atomware-staff-dashboard:not(.atomware-team-chat-overlay-open) > .atomware-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(85vw, 320px);
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        z-index: 9990;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.45);
        border-right: 1px solid var(--atomware-border);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .atomware-dashboard:not(.sidebar-chat-expanded).atomware-mobile-sidebar-open > .atomware-sidebar {
        transform: translateX(0);
    }
    #atomware-staff-dashboard:not(.atomware-team-chat-overlay-open).atomware-mobile-sidebar-open > .atomware-sidebar {
        transform: translateX(0) !important;
    }

    /*
     * Client list drawer (shell-enabled staff): full viewport height.
     * The platform shell uses z-index: 100000 (platform-shell-nav.css). The drawer was inset with a large top
     * offset so it would sit visually below that strip — users read that as a broken “gap” above the modal.
     * Pin the drawer from top:0 and only use safe-area padding; when open, stack above the shell + dim backdrop.
     */
    #atomware-staff-dashboard.atomware-dashboard-shell-enabled:not(.sidebar-chat-expanded):not(.atomware-team-chat-overlay-open) > .atomware-sidebar {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        height: auto;
        min-height: 0;
        max-height: none;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
    }
    #atomware-staff-dashboard.atomware-dashboard-shell-enabled:not(.sidebar-chat-expanded):not(.atomware-team-chat-overlay-open).atomware-mobile-sidebar-open > .atomware-sidebar {
        z-index: 100050;
    }
    #atomware-staff-dashboard.atomware-dashboard-shell-enabled:not(.sidebar-chat-expanded):not(.atomware-team-chat-overlay-open).atomware-mobile-sidebar-open .atomware-mobile-sidebar-backdrop {
        z-index: 100049;
    }

    /*
     * Active time-tracker card: large in the collapsed sidebar — hide on phones; running timers
     * stay visible in the platform shell strip (timers chip / expandable row).
     */
    #atomware-staff-dashboard .atomware-sidebar #running-timer-widget {
        display: none !important;
    }

    /* Sidebar collapse chevron is noisy on phones; drawer mode already handles space. */
    #atomware-staff-dashboard #sidebar-toggle-btn {
        display: none !important;
    }

    /* Backdrop visible only when drawer is open */
    .atomware-mobile-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9989;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .atomware-dashboard.atomware-mobile-sidebar-open .atomware-mobile-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    /* Don't show backdrop when the chat tab takes over the whole viewport */
    /* Team chat overlay covers viewport; don't dim behind the sidebar drawer separately */
    .atomware-dashboard.atomware-team-chat-overlay-open .atomware-mobile-sidebar-backdrop {
        display: none !important;
    }

    /* Main fills the entire viewport */
    .atomware-dashboard > .atomware-main {
        grid-column: 1 / -1 !important;
        grid-row: 1 / -1 !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    /* Hamburger button visible on mobile, sits at the very start of topbar (match ID
       specificity of desktop hide rule above) */
    #atomware-staff-dashboard .atomware-topbar .atomware-mobile-menu-btn,
    #atomware-mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        padding: 0 !important;
        line-height: 1;
        align-self: center;
        flex: 0 0 auto;
        margin-right: 4px;
    }

    /* Mobile: with a specific client selected, show logo + name in place of the hamburger (desktop hides this control entirely). */
    #atomware-staff-dashboard .atomware-topbar .atomware-mobile-menu-btn {
        max-width: 100%;
    }
    #atomware-staff-dashboard .atomware-topbar .atomware-mobile-menu-btn .atomware-mobile-menu-btn-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #atomware-staff-dashboard .atomware-topbar .atomware-mobile-menu-btn .atomware-mobile-menu-btn-brand {
        display: none;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }
    #atomware-staff-dashboard .atomware-topbar .atomware-mobile-menu-btn--has-client {
        min-width: 44px;
        min-height: 44px;
        max-width: 52px;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-inline: 4px;
        justify-content: center;
    }
    #atomware-staff-dashboard .atomware-topbar .atomware-mobile-menu-btn--has-client .atomware-mobile-menu-btn-hamburger {
        display: none !important;
    }
    #atomware-staff-dashboard .atomware-topbar .atomware-mobile-menu-btn--has-client .atomware-mobile-menu-btn-brand {
        display: inline-flex !important;
        align-items: center;
    }
    #atomware-staff-dashboard .atomware-mobile-menu-brand-logo {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        margin: 0 !important;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--atomware-bg-tertiary);
    }
    #atomware-staff-dashboard .atomware-mobile-menu-brand-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #atomware-staff-dashboard .atomware-mobile-menu-brand-initial {
        width: 100%;
        height: 100%;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        align-items: center;
        justify-content: center;
    }
    #atomware-staff-dashboard .atomware-mobile-menu-brand-name {
        display: none !important;
        /* Name remains in sidebar and in #atomware-mobile-menu-btn title/aria-label (clients.js). */
    }

    /* Shell site logo: hidden on small phones only (see platform-shell-nav.css ≤576px with tune). */
    #atomware-staff-dashboard .atomware-topbar {
        gap: 4px;
        padding: 4px 8px;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
    }
    #atomware-staff-dashboard #staff-timers-widgets.atomware-staff-timers {
        flex: 1 1 0;
        min-width: 0;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 8px;
        touch-action: pan-x;
    }
    #atomware-staff-dashboard #staff-timers-widgets.atomware-staff-timers::-webkit-scrollbar {
        display: none;
        height: 0;
    }
    #atomware-staff-dashboard .atomware-topbar .atomware-topbar-actions {
        gap: 2px;
        flex-wrap: nowrap;
        margin-left: auto;
        overflow-x: auto;
        max-width: 100%;
    }

    /* Shell row now owns the mobile menu icon (next to bell/profile), so hide
       the old secondary topbar/menu strip to avoid duplicate bars. */
    #atomware-staff-dashboard .atomware-topbar {
        display: none !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    #atomware-staff-dashboard .atomware-topbar .atomware-mobile-menu-btn,
    #atomware-mobile-menu-btn {
        display: none !important;
    }

    /* Tabs row: horizontal scroll, sticky, touch-friendly */
    #atomware-staff-dashboard .atomware-tabs {
        position: sticky;
        top: 0;
        z-index: 5;
        gap: 2px;
        padding: 6px 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #atomware-staff-dashboard .atomware-tabs::-webkit-scrollbar {
        display: none;
    }
    #atomware-staff-dashboard .atomware-tabs .atomware-tab-btn {
        padding: 8px 12px !important;
        min-height: 40px;
        flex-shrink: 0;
    }

    /* Tab content scrolls inside its own pane, not the whole viewport */
    #atomware-staff-dashboard .atomware-tab-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Override ↑ for Group Chat: NEVER scroll outer tab-content — #tab-chats fills via absolute inset. */
    #atomware-staff-dashboard .atomware-tab-content:has(#tab-chats.atomware-tab-pane.active),
    #atomware-staff-dashboard.staff-tab-is-chats .atomware-tab-content {
        position: relative !important;
        overflow: hidden !important;
        flex: 1 1 0% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    #atomware-staff-dashboard .atomware-tab-pane {
        padding: 8px;
    }
    /* Group Chat: same mobile block must not add 8px inset — shows as a band above the chat header on all phones. */
    #atomware-staff-dashboard #tab-chats.atomware-tab-pane,
    #atomware-staff-dashboard #tab-chats.atomware-tab-pane.active {
        padding: 0 !important;
        margin: 0 !important;
    }
    #atomware-staff-dashboard .atomware-tab-pane#tab-files {
        padding: 0 !important;
    }

    /* Sidebar header: padding tweak so close button can fit */
    #atomware-staff-dashboard .atomware-sidebar .atomware-sidebar-header {
        padding-right: 44px;
        position: relative;
    }

    /*
     * Client filter drawer (phones): `.atomware-sidebar-tabs` repeats the same destinations as the
     * platform shell strip (Chat / Clients / CRM / SMM / KB / Quick Links). Hide the rail so the
     * drawer leads with quick-actions (search, new task/note, …) + the client list — less noise and
     * no dead duplicate controls when the shell already handles module switching.
     */
    #atomware-staff-dashboard .atomware-sidebar > .atomware-sidebar-tabs {
        display: none !important;
    }

    /* ── Tasks / Notes / generic list views: cards stack ───────────────── */
    .atomware-task-list,
    .atomware-notes-list,
    .atomware-files-list {
        gap: 6px;
    }
    .atomware-task-item,
    .atomware-note-item,
    .atomware-file-item {
        flex-wrap: wrap;
        padding: 10px;
    }

    /* Kanban columns scroll horizontally */
    .atomware-kanban,
    .atomware-kanban-board {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 8px;
        padding-bottom: 8px;
    }
    .atomware-kanban-column,
    .atomware-kanban .atomware-kanban-col {
        flex: 0 0 85vw;
        min-width: 280px;
        max-width: 90vw;
        scroll-snap-align: start;
    }

    /* Staff + client: single-column kanban (overrides 1024px flex + rules above).
     * Base .atomware-kanban-board uses grid-template-rows: 1fr + flex:1 column content, which
     * collapses stacked rows (cards hidden; only the last column looks correct).
     * Staff assigned tab: scoped to Kanban-only so mobile display:grid !important does not override
     * jQuery .hide() when List/Calendar is selected (fixes Kanban leaking under List on phones). */
    #atomware-staff-dashboard #tab-assigned.active .atomware-tasks-container.atomware-view-kanban #assigned-kanban,
    #atomware-client-portal .atomware-kanban-board {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        grid-auto-rows: minmax(min-content, auto) !important;
        align-content: start !important;
        align-items: start !important;
        flex-wrap: unset !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        min-height: min(45dvh, 360px);
        gap: 10px;
    }
    /* Assigned tab: Kanban must stay hidden whenever List or Calendar view is selected (calendar class uses the same logic) */
    /* Only when Assigned tab is visible — avoids grid !important beating #tab-assigned:not(.active) hide other tabs see */
    #atomware-staff-dashboard #tab-assigned.active .atomware-tasks-container:not(.atomware-view-kanban) #assigned-kanban {
        display: none !important;
    }
    /* Weekends toggle: labels are verbose on narrow screens; icon + title/aria suffice */
    #atomware-staff-dashboard .atomware-calendar-weekends-btn .atomware-calendar-weekends-label {
        display: none;
    }
    #atomware-staff-dashboard .atomware-kanban-column,
    #atomware-client-portal .atomware-kanban-column {
        flex: 0 0 auto !important;
        min-height: min-content;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    #atomware-staff-dashboard .atomware-tasks-container,
    #atomware-client-portal .atomware-tasks-container {
        min-height: 0;
    }
    #atomware-staff-dashboard .atomware-tasks-header,
    #atomware-client-portal .atomware-tasks-header {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
    }
    #atomware-staff-dashboard .atomware-tasks-controls,
    #atomware-client-portal .atomware-tasks-controls {
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 8px;
    }
    #atomware-staff-dashboard .atomware-unassigned-controls,
    #atomware-client-portal .atomware-unassigned-controls {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }

    /* Tasks tab: hide "View:" / "Date:" labels next to switches (icons retain title tooltips) */
    #tab-assigned .atomware-tasks-header .atomware-control-group:has(.atomware-view-switch) > .atomware-control-label,
    #tab-tasks .atomware-tasks-header .atomware-control-group:has(.atomware-view-switch) > .atomware-control-label,
    #tab-tasks .atomware-tasks-header .atomware-control-group:has(.atomware-filter-date) > .atomware-control-label {
        display: none !important;
    }

    /* Kanban (assigned / client tasks): keep cards inside columns; more room for list scroll (PDF brief) */
    #tab-assigned.active .atomware-kanban-board,
    #tab-tasks .atomware-kanban-board {
        min-height: min(50dvh, 420px);
    }
    #tab-assigned .atomware-kanban-column .atomware-column-content,
    #tab-tasks .atomware-kanban-column .atomware-column-content {
        flex: 0 0 auto !important;
        min-height: auto !important;
        max-height: none;
        overflow-y: visible !important;
        overflow-x: hidden;
    }
    #tab-assigned .atomware-kanban-column .atomware-task-card,
    #tab-tasks .atomware-kanban-column .atomware-task-card {
        max-width: 100%;
        box-sizing: border-box;
    }
    #tab-assigned .atomware-tasks-header,
    #tab-tasks .atomware-tasks-header {
        flex-shrink: 0;
    }

    /* Client portal — My Tasks: list only, full width, no horizontal spill */
    #atomware-client-portal .atomware-client-tasks .atomware-task-list,
    #atomware-client-portal #client-task-list {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        margin-top: var(--atomware-spacing-sm, 8px);
        padding-left: 0;
        padding-right: 0;
    }
    #atomware-client-portal .atomware-client-tasks .atomware-task-list .atomware-task-card,
    #atomware-client-portal #client-task-list .atomware-task-card {
        min-width: 0;
        max-width: 100%;
    }

    /* Calendar: more compact cells, allow horizontal scroll if needed */
    .atomware-calendar-grid,
    .atomware-tasks-calendar-grid {
        font-size: 0.75rem;
    }
    .atomware-calendar-day,
    .atomware-tasks-calendar-day {
        min-height: 60px;
        padding: 2px;
    }
    .atomware-calendar-event {
        font-size: 0.7rem;
        padding: 2px 4px;
    }

    /* Assigned / unassigned: week view — scroll if grid wider than screen */
    #assigned-calendar .atomware-calendar-week.atomware-calendar-grid,
    #unassigned-calendar .atomware-calendar-week.atomware-calendar-grid {
        min-width: min(100%, 720px);
        max-width: none;
    }
    #assigned-calendar .atomware-calendar-header .atomware-calendar-nav,
    #unassigned-calendar .atomware-calendar-header .atomware-calendar-nav,
    #assigned-calendar .atomware-calendar-header .atomware-calendar-nav button,
    #unassigned-calendar .atomware-calendar-header .atomware-calendar-nav button {
        flex-shrink: 0;
    }
    #assigned-calendar .atomware-calendar-header .atomware-calendar-nav button,
    #unassigned-calendar .atomware-calendar-header .atomware-calendar-nav button,
    #assigned-calendar .atomware-calendar-view-mode-btn,
    #unassigned-calendar .atomware-calendar-view-mode-btn,
    #assigned-calendar .atomware-calendar-weekends-btn,
    #unassigned-calendar .atomware-calendar-weekends-btn {
        min-width: 44px;
        min-height: 44px;
    }
    #assigned-calendar.atomware-calendar-container,
    #unassigned-calendar.atomware-calendar-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-header .atomware-calendar-nav {
        gap: 2px;
    }
    /* Staff Tasks → assigned calendar: single compact row (week no longer forces title to own line). */
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-header {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 3px 4px;
        padding: 3px 4px !important;
        margin-bottom: 6px !important;
        min-width: 0;
    }
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-header > .atomware-calendar-nav:first-of-type {
        flex: 0 0 auto;
    }
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-header > h4 {
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        width: auto;
        margin: 0;
        text-align: center;
        font-size: 0.58rem !important;
        line-height: 1.1;
        font-weight: 600;
        padding: 0 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Right cluster: prev/toggles/today — scroll if still tight; keeps one visual row */
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-header > .atomware-calendar-nav:last-of-type {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 2px;
        justify-content: flex-end;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-header > .atomware-calendar-nav:last-of-type::-webkit-scrollbar {
        display: none;
        height: 0;
    }
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-header .atomware-calendar-nav button:not(.atomware-calendar-view-mode-btn):not(.atomware-calendar-weekends-btn),
    #atomware-staff-dashboard #tab-assigned #assigned-calendar #cal-today {
        min-width: 24px;
        min-height: 26px;
        padding: 1px 3px !important;
        box-sizing: border-box;
    }
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-view-mode-btn,
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-weekends-btn {
        min-width: 20px;
        min-height: 20px;
        padding: 0 2px;
        box-sizing: border-box;
    }
    #atomware-staff-dashboard #tab-assigned #assigned-calendar #cal-today {
        font-size: 0.58rem !important;
        font-weight: 600;
        min-height: 24px !important;
        padding: 2px 4px !important;
        line-height: 1.1;
    }
    /* Calendar task chips: match "Today" button text size on phones */
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-task,
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-task .atomware-calendar-task-title {
        font-size: 0.58rem !important;
        font-weight: 600;
        line-height: 1.1;
    }
    /* Prev/next: compact but legible vs global 24px !important elsewhere in this breakpoint. */
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-nav button:not(.atomware-calendar-view-mode-btn):not(.atomware-calendar-weekends-btn) .material-icons {
        font-size: 12px !important;
        width: 12px !important;
        height: 12px !important;
        line-height: 12px !important;
    }
    /* Month/week + weekends: dense single-row toolbar */
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-weekends-btn .material-icons,
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-view-mode-btn .material-icons {
        font-size: 10px !important;
        width: 10px !important;
        height: 10px !important;
        line-height: 10px !important;
    }
    /* Tasks header: List / Calendar / Kanban icons (compact in calendar view on phones). */
    #atomware-staff-dashboard #tab-assigned .atomware-tasks-container.atomware-view-calendar .atomware-view-switch-btn .material-icons {
        font-size: 14px;
    }
    #atomware-staff-dashboard #tab-assigned .atomware-tasks-container.atomware-view-calendar .atomware-view-switch-btn {
        padding: 6px 8px;
    }
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-view-switch {
        padding: 1px;
        gap: 1px;
    }
    #atomware-staff-dashboard #tab-assigned #assigned-calendar .atomware-calendar-week .atomware-calendar-day-header {
        font-size: 0.62rem;
        padding: 5px 2px;
        letter-spacing: -0.03em;
        line-height: 1.1;
        text-transform: uppercase;
    }

    /* Files explorer (tree + content) stack vertically */
    #tab-files .atomware-files-layout,
    #tab-files .atomware-files-explorer {
        flex-direction: column;
    }
    #tab-files .atomware-files-tree,
    #tab-files .atomware-files-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 30vh;
        overflow-y: auto;
        border-right: none;
        border-bottom: 1px solid var(--atomware-border);
    }

    /* Files tab: full-width toolbars, compact; primary row = view + refresh/search/fullscreen (PDF brief) */
    #atomware-staff-dashboard .atomware-files-toolbar-scope,
    #atomware-client-portal .atomware-files-toolbar-scope {
        padding: 10px 12px;
    }
    #atomware-staff-dashboard #tab-files .atomware-files-toolbar-scope,
    #atomware-client-portal #tab-files .atomware-files-toolbar-scope {
        padding: 3px 6px 1px;
    }
    /* Files tab only: grid layout so WebKit does not drop hoisted flex rows
       (display:contents on left + flex order broke Upload / filters on iOS). */
    #atomware-staff-dashboard #tab-files .atomware-files-toolbar-scope .atomware-file-toolbar,
    #atomware-client-portal #tab-files .atomware-files-toolbar-scope .atomware-file-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "atw-files-primary"
            "atw-files-actions"
            "atw-files-filters";
        gap: 8px;
        align-items: stretch;
        justify-items: stretch;
    }
    /* Document order: view / search / filters first; actions (upload, trash) follow.
       Reordering the right column first previously surfaced New Folder/Upload, but when
       those are hidden at root the UI looked like "only a trash row" and hid the real toolbar. */
    #atomware-staff-dashboard .atomware-files-toolbar-scope .atomware-file-toolbar-left,
    #atomware-client-portal .atomware-files-toolbar-scope .atomware-file-toolbar-left {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    #atomware-staff-dashboard .atomware-files-toolbar-scope .atomware-file-toolbar-right,
    #atomware-client-portal .atomware-files-toolbar-scope .atomware-file-toolbar-right {
        flex: 0 0 auto;
        flex-basis: auto; /* unsets 900px "full row" basis so column + DOM order stay predictable */
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-top: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    #tab-files .atomware-file-toolbar-primary-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0;
        margin-bottom: 0;
        scrollbar-width: thin;
    }
    #tab-files .atomware-file-toolbar-primary-row .atomware-view-toggle,
    #tab-files .atomware-file-toolbar-primary-row .atomware-file-toolbar-icons {
        flex: 0 0 auto;
    }
    #tab-files .atomware-file-toolbar-left {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    #tab-files .atomware-file-filter-row {
        position: relative;
        max-width: 100%;
    }
    #atomware-staff-dashboard .atomware-file-filter-row,
    #atomware-client-portal .atomware-file-filter-row {
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
    }
    /* Type + sort selects on one row; styled control (not default OS chrome only) */
    #tab-files .atomware-file-filters-inline {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 0 0 0;
    }
    #tab-files .atomware-file-filters-inline .atomware-file-filter-row {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    /* Promote New Folder / Upload above the type & sort row: flatten left so grid
       places primary, then actions, then filters (grid areas — WebKit-safe vs flex order). */
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-left,
    #atomware-client-portal #tab-files .atomware-file-toolbar-left {
        display: contents !important;
    }
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-primary-row,
    #atomware-client-portal #tab-files .atomware-file-toolbar-primary-row {
        grid-area: atw-files-primary;
    }
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right {
        grid-area: atw-files-actions;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0;
        margin-left: 0 !important;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    #atomware-staff-dashboard #tab-files .atomware-file-filters-inline,
    #atomware-client-portal #tab-files .atomware-file-filters-inline {
        grid-area: atw-files-filters;
    }

    /* Files tab (mobile): New folder + upload split + recycle on one row; icon-only primary actions */
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right .atomware-files-toolbar-text,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right .atomware-files-toolbar-text {
        display: none !important;
    }
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right #create-folder-btn,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right #create-folder-btn {
        padding: 8px 10px;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        flex: 0 0 auto;
    }
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right #create-folder-btn .material-icons,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right #create-folder-btn .material-icons {
        margin: 0;
    }
    /* Block stray theme rules from making New folder / Upload grow to 100% width and hiding siblings */
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right .atomware-btn-primary,
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right .atomware-btn-secondary,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right .atomware-btn-primary,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right .atomware-btn-secondary {
        width: auto !important;
        max-width: none;
        flex: 0 0 auto !important;
        min-width: 0;
    }
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right .atomware-upload-split,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right .atomware-upload-split {
        flex: 0 0 auto;
    }
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right .atomware-upload-label,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right .atomware-upload-label {
        min-width: 44px;
        min-height: 44px;
        padding: 8px 10px;
        justify-content: center;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right .atomware-upload-label .material-icons,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right .atomware-upload-label .material-icons {
        margin: 0;
    }
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right .atomware-upload-arrow,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right .atomware-upload-arrow {
        min-width: 40px;
        min-height: 44px;
        flex: 0 0 auto;
    }
    #atomware-staff-dashboard #tab-files .atomware-file-toolbar-right #files-trash-btn,
    #atomware-client-portal #tab-files .atomware-file-toolbar-right #files-trash-btn {
        flex: 0 0 auto;
    }

    #tab-files select.atomware-select-native-file {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        padding: 8px 28px 8px 10px;
        border-radius: 8px;
        border: 1px solid var(--atomware-border);
        background-color: var(--atomware-bg-secondary, #1e1e1e);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        color: var(--atomware-text, #e5e7eb);
        font-size: 16px;
        line-height: 1.2;
        color-scheme: dark;
    }
    #tab-files select.atomware-select-native-file option {
        background-color: var(--atomware-bg-secondary, #1a1a1a);
        color: var(--atomware-text-primary, #e5e7eb);
    }
    #tab-files select.atomware-select-native-file:focus {
        outline: 2px solid var(--atomware-primary, #1552cc);
        outline-offset: 1px;
    }

    /* Files tab (staff + client): full width, no horizontal scroll, toolbars match */
    #atomware-staff-dashboard .atomware-tab-pane#tab-files,
    #atomware-client-portal .atomware-tab-pane#tab-files {
        padding: 0 !important;
    }
    #tab-files .atomware-file-manager,
    #tab-files .atomware-files-container,
    #tab-files .atomware-drive,
    #tab-files .atomware-drive-header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: hidden !important;
    }
    #tab-files .atomware-drive-body,
    #tab-files .atomware-file-browser {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: hidden !important;
    }
    #tab-files .atomware-drive-main,
    #tab-files #staff-file-browser {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #tab-files .atomware-drive {
        min-width: 0;
    }
    #tab-files .atomware-drive-main {
        padding: 8px 10px;
    }
    /* Tighten vertical gap under the All Files / sort toolbar — space above breadcrumb (mobile) */
    #tab-files .atomware-drive-breadcrumb {
        overflow-x: hidden;
        max-width: 100%;
        flex-wrap: wrap;
        row-gap: 4px;
        min-width: 0;
        margin-top: 0;
        padding-top: 2px;
        padding-bottom: 4px;
        padding-left: var(--atomware-spacing, 12px);
        padding-right: var(--atomware-spacing, 12px);
    }
    #tab-files .atomware-breadcrumb-item {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }
    #tab-files .atomware-breadcrumb-sep {
        flex-shrink: 0;
    }
    /* Block (grid) view — mobile: 2-up tiles (reference: dense grid + header row + large preview) */
    #tab-files .atomware-drive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100%;
        min-width: 0;
        gap: 8px 10px;
        padding: 0 2px;
        box-sizing: border-box;
    }
    #tab-files .atomware-drive-main,
    #tab-files #staff-file-browser {
        overflow-x: hidden !important;
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item:not(.list-item) {
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        position: relative;
        padding: 0 !important;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: #2a2a2b;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        gap: 0;
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item:not(.list-item):hover {
        transform: none;
    }
    @media (hover: hover) and (pointer: fine) {
        #tab-files .atomware-drive-grid > .atomware-drive-item:not(.list-item):hover {
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
        }
    }
    #tab-files .atomware-drive-grid > .has-select-checkbox > .atomware-select-checkbox {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 3;
    }
    #tab-files .atomware-drive-grid > .has-select-checkbox {
        padding-top: 36px;
    }
    /* Card header: type/meta + filename (reference: icon row + truncated title) */
    #tab-files .atomware-drive-grid > .atomware-drive-item.file:not(.list-item) .atomware-drive-item-info {
        order: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        width: 100%;
        min-width: 0;
        padding: 10px 38px 4px 10px;
        box-sizing: border-box;
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item.file:not(.list-item) .atomware-drive-item-meta {
        order: 0;
        flex: 0 0 auto;
        min-width: 0;
        max-width: 42%;
        margin: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item.file:not(.list-item) .atomware-drive-item-name {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item.file:not(.list-item) .atomware-drive-item-meta .file-type-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        min-height: 28px;
        padding: 2px 6px;
        border-radius: 6px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1;
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item.file:not(.list-item) .atomware-drive-item-meta .file-size,
    #tab-files .atomware-drive-grid > .atomware-drive-item.file:not(.list-item) .atomware-drive-item-meta .file-owner {
        display: none; /* second line removed on 2-up tiles; keep type badge + name */
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item.folder:not(.list-item) .atomware-drive-item-info {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 100%;
        min-width: 0;
        padding: 10px 10px 4px 10px;
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item.folder:not(.list-item) .atomware-drive-item-name {
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.2;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item.folder:not(.list-item) .atomware-drive-item-meta {
        font-size: 0.65rem;
        line-height: 1.3;
        max-height: 2.6em;
        overflow: hidden;
    }
    /* Large preview block under header */
    #tab-files .atomware-drive-grid .atomware-drive-item-preview,
    #tab-files .atomware-drive-grid .atomware-drive-item-icon {
        order: 2;
        align-self: stretch;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        height: auto !important;
        aspect-ratio: 1;
        min-height: 0;
        margin: 0 8px 6px;
        box-sizing: border-box;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.28);
        box-shadow: none;
    }
    #tab-files .atomware-drive-grid .atomware-drive-item-icon .material-icons,
    #tab-files .atomware-drive-grid .atomware-drive-item-preview .material-icons {
        font-size: clamp(36px, 12vw, 48px);
    }
    #tab-files .atomware-drive-grid .atomware-drive-item-preview img {
        border-radius: 8px;
    }
    /* Float actions to top-right (like ⋮ + quick actions) */
    #tab-files .atomware-drive-grid > .atomware-drive-item:not(.list-item) .atomware-item-menu {
        order: 3;
        position: absolute;
        top: 4px;
        right: 2px;
        left: auto;
        transform: none !important;
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 2px 4px;
        width: auto;
        max-width: calc(100% - 4px);
        border: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(42, 42, 43, 0.95) 20%);
        border-radius: 0;
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item:not(.list-item) .atomware-item-menu .atomware-item-action {
        flex: 0 0 32px;
        min-width: 32px;
        max-width: 32px;
        min-height: 32px;
        width: 32px;
        border-radius: 8px;
        border: 0;
        background: rgba(0, 0, 0, 0.2);
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item:not(.list-item) .atomware-item-menu .atomware-item-action .material-icons {
        font-size: 18px;
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item:not(.list-item) .atomware-item-menu .atomware-item-action:active {
        transform: scale(0.92);
    }
    @media (hover: hover) and (pointer: fine) {
        #tab-files .atomware-drive-grid > .atomware-drive-item:not(.list-item) .atomware-item-menu .atomware-item-action:hover {
            background: rgba(59, 130, 246, 0.25);
        }
    }
    #tab-files .atomware-drive-grid > .atomware-drive-item:not(.list-item) .atomware-item-menu .atomware-item-action:focus-visible {
        outline: 2px solid var(--atomware-primary, #1552cc);
        outline-offset: 2px;
    }
    #tab-files .atomware-drive-list,
    #tab-files .atomware-trash-list {
        max-width: 100%;
    }
    /* List view: remove fixed min track widths; hide Type on main file list to fit (not recycle bin) */
    #tab-files .atomware-drive-list:not(.atomware-trash-list) .atomware-list-col-type {
        display: none !important;
    }
    #tab-files .atomware-drive-list-header,
    #tab-files .atomware-drive-item.list-item {
        grid-template-columns: minmax(0, 2fr) minmax(0, 64px) minmax(0, 1fr) minmax(0, 80px) 40px;
        gap: 6px 8px;
        padding: 8px 10px;
    }
    /* Recycle bin: hide Type on small screens, 6 tracks (was 7 cols with wide mins) */
    #tab-files .atomware-trash-list .atomware-list-col-type {
        display: none !important;
    }
    #tab-files .atomware-trash-list .atomware-drive-list-header,
    #tab-files .atomware-trash-list .atomware-trash-item.list-item {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 48px) minmax(0, 56px) minmax(0, 0.85fr) minmax(0, 1fr) 36px;
        gap: 4px 6px;
        padding: 8px 10px;
    }

    /* Email view: 3-pane → 1-pane drilldown */
    .atomware-email-app,
    .atomware-email-layout {
        flex-direction: column;
    }
    .atomware-email-folders,
    .atomware-email-list,
    .atomware-email-thread {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Analytics: no horizontal scroll—fit to content width; vertical scroll only */
    #tab-analytics .atomware-card,
    #tab-analytics canvas,
    #tab-analytics .atomware-chart {
        max-width: 100% !important;
        height: auto !important;
    }
    #tab-analytics .atomware-analytics-container,
    #atomware-analytics-section-scope .atomware-analytics-container {
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    #tab-analytics .atomware-analytics-client,
    #atomware-analytics-section-scope {
        max-width: 100%;
        min-width: 0;
    }
    #tab-analytics .atomware-analytics-header {
        flex-direction: column;
        align-items: stretch;
        max-width: 100%;
        min-width: 0;
    }
    #tab-analytics h3 {
        min-width: 0;
    }
    #tab-analytics .atomware-date-filters {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    #tab-analytics .atomware-analytics-filters {
        flex-wrap: wrap;
        max-width: 100%;
        min-width: 0;
        margin-right: 0;
    }
    #tab-analytics .atomware-analytics-filters .atomware-select,
    #tab-analytics .atomware-analytics-filters .atomware-select-enhanced {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 140px;
    }
    #tab-analytics .atomware-date-filters .atomware-input,
    #tab-analytics .atomware-date-filters input[type="date"] {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 140px;
    }
    #tab-analytics .atomware-date-filters .atomware-tab-icon-controls {
        margin-left: 0;
        flex: 0 0 auto;
    }

    /* Client dashboard — Reports: keep both date inputs on one row; PDF + fullscreen on the next row */
    #atomware-client-portal #tab-analytics .atomware-analytics-client .atomware-date-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        gap: 10px 8px;
        flex-wrap: unset;
    }
    #atomware-client-portal #tab-analytics .atomware-analytics-client .atomware-date-filters #analytics-start-date {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-width: 100%;
    }
    #atomware-client-portal #tab-analytics .atomware-analytics-client .atomware-date-filters > span {
        grid-column: 2;
        grid-row: 1;
        white-space: nowrap;
    }
    #atomware-client-portal #tab-analytics .atomware-analytics-client .atomware-date-filters #analytics-end-date {
        grid-column: 3;
        grid-row: 1;
        width: 100%;
        max-width: 100%;
    }
    #atomware-client-portal #tab-analytics .atomware-analytics-client .atomware-date-filters .atomware-tab-icon-controls {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-left: 0;
        justify-content: center;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
    }

    #tab-analytics .atomware-analytics-cards {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #tab-analytics .atomware-analytics-charts,
    #tab-analytics .atomware-analytics-graphs {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #tab-analytics .atomware-chart-container {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    #tab-analytics .atomware-chart-container > *:not(h4) {
        max-width: 100%;
        min-width: 0;
    }
    #tab-analytics .atomware-chart-bar {
        flex-wrap: wrap;
        max-width: 100%;
        min-width: 0;
    }
    #tab-analytics .atomware-chart-label {
        min-width: 0 !important;
        width: auto !important;
        max-width: 100%;
        flex: 1 1 8rem;
    }
    #tab-analytics .atomware-chart-bar-container {
        min-width: 0;
        flex: 1 1 5rem;
    }
    #tab-analytics .atomware-timeline-entry {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px;
        max-width: 100%;
        min-width: 0;
    }
    #tab-analytics .atomware-analytics-timeline,
    #tab-analytics .atomware-analytics-timeline-section {
        max-width: 100%;
        min-width: 0;
    }
    #tab-analytics .atomware-analytics-table-wrap {
        max-width: 100%;
        overflow-x: hidden;
    }
    #tab-analytics .atomware-graph-legend {
        max-width: 100%;
        min-width: 0;
    }
    #tab-analytics .atomware-analytics-cards,
    #tab-analytics .atomware-analytics-charts,
    #tab-analytics .atomware-analytics-graphs,
    #tab-analytics .atomware-analytics-timeline-section,
    #tab-analytics .atomware-analytics-timeline,
    #tab-analytics .atomware-analytics-table-wrap {
        font-size: calc(1em - 2px);
    }
    #tab-analytics .atomware-chart-container .atomware-chart-label {
        font-size: 0.78rem;
        min-width: 0;
        width: auto;
        max-width: 100%;
    }
    /* Filters + date inputs: same size as Time by Business row text (chart labels) */
    #atomware-staff-dashboard #tab-analytics .atomware-analytics-filters .atomware-select-enhanced .atomware-select-trigger,
    #atomware-client-portal #tab-analytics .atomware-analytics-filters .atomware-select-enhanced .atomware-select-trigger,
    #atomware-staff-dashboard #tab-analytics .atomware-analytics-filters .atomware-select-label,
    #atomware-client-portal #tab-analytics .atomware-analytics-filters .atomware-select-label {
        font-size: 0.78rem;
        line-height: 1.35;
    }
    #atomware-staff-dashboard #tab-analytics .atomware-analytics-filters select.atomware-select,
    #atomware-client-portal #tab-analytics .atomware-analytics-filters select.atomware-select {
        font-size: 0.78rem !important;
    }
    #atomware-staff-dashboard #tab-analytics .atomware-date-filters input[type="date"],
    #atomware-client-portal #tab-analytics .atomware-date-filters input[type="date"] {
        font-size: 0.78rem !important;
        line-height: 1.35;
    }
    #atomware-staff-dashboard #tab-analytics .atomware-chart-bar .atomware-chart-value,
    #atomware-client-portal #tab-analytics .atomware-chart-bar .atomware-chart-value {
        font-size: 0.78rem;
    }
    #tab-analytics .atomware-timeline-task {
        line-height: 1.3;
        padding-top: 2px;
    }

    /* PDF brief: platform footer — compact on small screens (text only; keep icon tap targets) */
    .atomware-platform-footer-text {
        font-size: 10px;
    }

    /* Forms / inputs: prevent iOS zoom + give breathing room */
    #atomware-staff-dashboard input[type="text"],
    #atomware-staff-dashboard input[type="email"],
    #atomware-staff-dashboard input[type="password"],
    #atomware-staff-dashboard input[type="number"],
    #atomware-staff-dashboard input[type="search"],
    #atomware-staff-dashboard input[type="tel"],
    #atomware-staff-dashboard input[type="url"],
    #atomware-staff-dashboard input[type="date"],
    #atomware-staff-dashboard input[type="time"],
    #atomware-staff-dashboard input[type="datetime-local"],
    #atomware-staff-dashboard select,
    #atomware-staff-dashboard textarea,
    #atomware-client-portal input[type="text"],
    #atomware-client-portal input[type="email"],
    #atomware-client-portal input[type="password"],
    #atomware-client-portal input[type="search"],
    #atomware-client-portal select,
    #atomware-client-portal textarea {
        font-size: 16px;
        max-width: 100%;
    }
    #tab-files select.atomware-select-native-file {
        font-size: 16px;
    }

    /* Tasks: view toggle, pool icons, calendar nav, kanban sort — 24px Material (match tab bar) */
    #atomware-staff-dashboard .atomware-view-toggle .atomware-btn-icon .material-icons,
    #atomware-client-portal .atomware-view-toggle .atomware-btn-icon .material-icons,
    #atomware-staff-dashboard .atomware-tab-icon-controls .atomware-tab-icon-btn .material-icons,
    #atomware-client-portal .atomware-tab-icon-controls .atomware-tab-icon-btn .material-icons,
    #atomware-staff-dashboard .atomware-unassigned-controls .atomware-calendar-view-mode-btn .material-icons,
    #atomware-staff-dashboard .atomware-unassigned-controls .atomware-unassigned-icon-btn .material-icons,
    #atomware-staff-dashboard .atomware-tasks-header .atomware-btn-icon .material-icons,
    #atomware-client-portal .atomware-tasks-header .atomware-btn-icon .material-icons,
    #atomware-staff-dashboard .atomware-kanban-sort-btn .material-icons,
    #atomware-client-portal .atomware-kanban-sort-btn .material-icons,
    #assigned-calendar .atomware-calendar-header .atomware-calendar-nav button .material-icons,
    #unassigned-calendar .atomware-calendar-header .atomware-calendar-nav button .material-icons,
    #assigned-calendar .atomware-calendar-view-mode-btn .material-icons,
    #unassigned-calendar .atomware-calendar-view-mode-btn .material-icons {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* Modals: full-screen on mobile, scrollable, easy close */
    .atomware-modal,
    .atomware-modal-overlay {
        padding: 0 !important;
    }
    .atomware-modal-content,
    .atomware-modal-dialog,
    .atomware-modal .atomware-modal-content,
    .atomware-task-modal-content,
    .atomware-note-modal-content,
    .atomware-file-modal-content,
    .atomware-modal-body-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: flex;
        flex-direction: column;
    }
    .atomware-modal-body,
    .atomware-modal-content > .atomware-modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }
    .atomware-modal-header,
    .atomware-modal-footer {
        flex: 0 0 auto;
    }
    .atomware-modal-footer {
        flex-wrap: wrap;
        gap: 6px;
    }
    .atomware-modal-footer .atomware-btn-primary,
    .atomware-modal-footer .atomware-btn-secondary,
    .atomware-modal-footer button {
        min-height: 44px;
        flex: 1 1 auto;
    }

    /* Tables: horizontally scroll instead of overflowing the viewport */
    #atomware-staff-dashboard table,
    #atomware-client-portal table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Topbar stuff: compress quick-link buttons too */
    #atomware-staff-dashboard .atomware-staff-header-user {
        padding: 4px;
    }
    #atomware-staff-dashboard .atomware-staff-header-avatar {
        margin: 0;
    }

    /* ── SMM page: sidebar becomes a drawer ───────────────────────────── */
    .atomware-smm-layout {
        position: relative;
    }
    .atomware-smm-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(85vw, 320px);
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        z-index: 9990;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.45);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #atomware-smm.atomware-smm-sidebar-open .atomware-smm-sidebar {
        transform: translateX(0);
    }
    .atomware-smm-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9989;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    #atomware-smm.atomware-smm-sidebar-open .atomware-smm-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .atomware-smm-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .atomware-smm-hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }
    .atomware-smm-header {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 8px;
    }
    .atomware-smm-title {
        font-size: 1rem;
    }
    /* Calendar grid on phone: cells smaller, scroll if necessary */
    .atomware-smm-calendar-grid {
        font-size: 0.7rem;
    }
    .atomware-smm-cal-cell,
    .atomware-smm-calendar-day {
        min-height: 70px;
    }
}

/* Even smaller phones: extra tightening, never break desktop */
@media (max-width: 480px) {
    #atomware-staff-dashboard .atomware-tab-btn .atomware-tab-text {
        display: none !important;
    }
    .atomware-modal-footer .atomware-btn-primary,
    .atomware-modal-footer .atomware-btn-secondary {
        flex: 1 1 100%;
    }
}

/* Chat back button - hidden on desktop */
.atomware-chat-back-btn {
    display: none;
}

/* Business Selector — [running timers?] + logo/company + actions (desktop: one row) */
.atomware-client-topbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: var(--atomware-spacing);
    background: var(--atomware-bg-secondary);
    border-bottom: 1px solid var(--atomware-border);
    /* Sit above .atomware-tab-content so the company list can overlap the tab area */
    position: relative;
    z-index: 100;
}
#atomware-client-portal .atomware-client-timers-wrap#client-timers-wrap,
#atomware-client-portal #client-timers-wrap {
    margin-left: 0;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
#atomware-client-portal #client-timers-wrap::-webkit-scrollbar {
    display: none;
    height: 0;
}
#atomware-client-portal .atomware-client-topbar .atomware-client-topbar-left {
    flex: 1 1 0;
    min-width: 0;
}
#atomware-client-portal .atomware-client-topbar .atomware-client-topbar-right {
    flex: 0 0 auto;
    margin-left: auto;
    flex-shrink: 0;
}
/* No visible display name in top bar; aria-label on the control carries the name for AT */
#atomware-staff-dashboard .atomware-topbar .atomware-staff-header-user .atomware-user-name,
#atomware-client-portal .atomware-profile-settings-trigger .atomware-user-name {
    display: none !important;
}

#atomware-client-portal .atomware-client-birthday-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.12) 100%);
    border-bottom: 1px solid var(--atomware-border);
}
#atomware-client-portal .atomware-client-birthday-icon {
    font-size: 1.75rem;
    line-height: 1;
}
#atomware-client-portal .atomware-client-birthday-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#atomware-client-portal .atomware-client-birthday-text strong {
    font-size: 1rem;
}
#atomware-client-portal .atomware-client-birthday-sub {
    font-size: 0.875rem;
    opacity: 0.9;
}

.atomware-client-topbar-left,
.atomware-client-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.atomware-client-profile-trigger.atomware-profile-settings-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: none;
    border: none;
    padding: 4px 8px;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    border-radius: var(--atomware-radius-sm, 6px);
    transition: background 0.15s;
}
.atomware-client-profile-trigger.atomware-profile-settings-trigger:hover {
    background: var(--atomware-bg-tertiary, rgba(255,255,255,0.08));
}
.atomware-client-topbar-avatar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--atomware-bg-tertiary, #1a1a1a);
}
.atomware-client-topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.atomware-client-topbar-avatar-initial {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/* Client Portal: no duplicate logo/title in chat header - branding is in topbar */
#atomware-client-portal .atomware-group-chat-header .atomware-group-chat-title-wrap {
    flex: 0 0 auto;
    min-width: 0;
}

#atomware-client-portal .atomware-client-group-chat-timezone {
    font-size: 0.78rem;
    line-height: 1.35;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--atomware-text-muted, #6b7280);
}

/* Client topbar logo – matches atomware-business-filter-item pattern */
.atomware-client-topbar-logo {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--atomware-bg-tertiary, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.atomware-client-topbar-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.atomware-client-topbar-logo-initial {
    font-size: 1rem;
    font-weight: 600;
    color: var(--atomware-text-secondary, #6b7280);
    text-transform: uppercase;
}

.atomware-client-topbar-left .atomware-client-business-name {
    font-weight: 500;
    color: var(--atomware-text);
}
.atomware-client-topbar-left .atomware-business-selector-inline {
    padding: 0;
    background: none;
    border: none;
}
.atomware-client-topbar-left .atomware-business-select {
    min-width: 140px;
}

/* Multi-business: company combobox (logo + name + custom list) — native select is visually hidden */
.atomware-sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}
.atomware-client-business-combobox {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: min(100%, 420px);
    flex: 1 1 auto;
}
.atomware-client-business-combobox-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
    padding: 4px 10px 4px 6px;
    margin: 0;
    background: var(--atomware-bg-tertiary, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--atomware-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--atomware-radius-sm, 8px);
    color: var(--atomware-text-primary);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
.atomware-client-business-combobox-btn:hover,
.atomware-client-business-combobox-btn.is-open {
    background: var(--atomware-bg-secondary, rgba(255, 255, 255, 0.1));
    border-color: var(--atomware-border, rgba(255, 255, 255, 0.2));
}
.atomware-client-business-combobox-btn:focus {
    outline: 2px solid var(--atomware-primary, #1552cc);
    outline-offset: 2px;
}
.atomware-client-combobox-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atomware-client-combobox-chevron {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--atomware-text-muted, #9ca3af);
    transition: transform 0.15s;
}
.atomware-client-business-combobox-btn.is-open .atomware-client-combobox-chevron {
    transform: rotate(180deg);
}
#atomware-client-portal .atomware-client-business-select-sr,
.atomware-client-business-select-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
}
.atomware-client-business-dropdown {
    list-style: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 500;
    min-width: min(100%, 18rem);
    margin: 0;
    padding: 6px;
    max-height: min(60dvh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: var(--atomware-bg-elevated, #1a1a24);
    border: 1px solid var(--atomware-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--atomware-radius-sm, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    touch-action: pan-y;
}
.atomware-client-business-dropdown[hidden] {
    display: none;
}
.atomware-client-business-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    margin: 0;
    border: none;
    border-radius: var(--atomware-radius-sm, 6px);
    background: transparent;
    color: var(--atomware-text-primary);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    list-style: none;
}
.atomware-client-business-dropdown-item:hover,
.atomware-client-business-dropdown-item:focus {
    background: var(--atomware-bg-tertiary, rgba(255, 255, 255, 0.06));
    outline: none;
}
.atomware-client-business-dropdown-item[aria-selected="true"] {
    background: var(--atomware-bg-tertiary, rgba(21, 82, 204, 0.2));
    box-shadow: inset 0 0 0 1px var(--atomware-primary, #1552cc);
}
.atomware-client-business-dropdown-logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}
.atomware-client-business-dropdown-img {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--atomware-bg-tertiary, #2d2d3a);
}
.atomware-client-business-dropdown-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    background: var(--atomware-bg-tertiary, #2d2d3a);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--atomware-text-secondary, #9ca3af);
    text-transform: uppercase;
    flex-shrink: 0;
}
.atomware-client-business-dropdown-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Client multi-business: wide enough list + full names (≤1200 = tablet/phones; JS uses fixed+clamp + body reparent) */
@media (max-width: 1200px) {
    #atomware-client-portal .atomware-client-topbar .atomware-client-business-dropdown,
    .atomware-client-business-dropdown.is-viewport-positioned {
        z-index: 800;
    }
    #client-business-dropdown .atomware-client-business-dropdown-name,
    #atomware-client-portal .atomware-client-business-dropdown-name {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        word-break: break-word;
    }
    #client-business-dropdown .atomware-client-business-dropdown-item,
    #atomware-client-portal .atomware-client-business-dropdown-item {
        align-items: flex-start;
    }
}
.atomware-client-settings .atomware-client-settings-scope-hint {
    margin: 0 0 20px 0;
    text-align: center;
    max-width: 28rem;
    align-self: center;
    width: 100%;
    color: var(--atomware-text-muted, #9ca3af);
    font-size: 0.9rem;
    line-height: 1.45;
}
.atomware-client-settings .atomware-client-default-biz-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 28rem;
    align-self: center;
}
.atomware-client-default-biz-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--atomware-radius-sm, 8px);
    border: 1px solid var(--atomware-border, rgba(255, 255, 255, 0.12));
    background: var(--atomware-bg-tertiary, rgba(255, 255, 255, 0.04));
    transition: background 0.15s;
}
.atomware-client-default-biz-label:hover {
    background: var(--atomware-bg-secondary, rgba(255, 255, 255, 0.08));
}
.atomware-client-default-biz-logo {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--atomware-bg-tertiary, #2d2d3a);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.atomware-client-default-biz-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.atomware-client-default-biz-initial {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--atomware-text-secondary, #9ca3af);
    text-transform: uppercase;
}
.atomware-client-default-biz-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    text-align: left;
}
.atomware-client-settings .atomware-client-default-business-section {
    align-items: stretch;
    text-align: left;
    width: 100%;
    max-width: 420px;
}

/* Client timer strip — in topbar row on desktop; own row on small screens (see media queries) */
.atomware-client-timers-wrap {
    display: flex;
    align-items: center;
    margin-left: 0;
}
.atomware-client-timers.atomware-staff-timers {
    margin: 0;
    flex: 0 1 auto;
}

.atomware-client-topbar .atomware-business-selector {
    padding: 0;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.atomware-client-topbar .atomware-business-selector label { margin: 0; }
.atomware-client-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Staff dashboard header - avatar opens settings (name is not shown in the bar) */
.atomware-staff-header-user.atomware-profile-settings-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: none;
    border: none;
    padding: 4px 8px;
    margin: 0 -4px 0 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    border-radius: var(--atomware-radius-sm, 6px);
    transition: background 0.15s;
}
.atomware-staff-header-user.atomware-profile-settings-trigger:hover {
    background: var(--atomware-bg-tertiary, rgba(255,255,255,0.08));
}
/* Staff header avatar – matches atomware-business-filter-item / atomware-client-avatar pattern */
.atomware-staff-header-avatar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--atomware-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.atomware-staff-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.atomware-staff-header-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--atomware-text-primary);
}

.atomware-client-topbar-right .atomware-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.atomware-client-topbar .atomware-btn-icon { position: relative; }
/* Client topbar – profile trigger and notifications */
.atomware-client-topbar-right .atomware-profile-settings-trigger {
    color: var(--atomware-text-secondary);
}
.atomware-client-topbar-right .atomware-profile-settings-trigger:hover {
    color: var(--atomware-text-primary);
}
.atomware-client-topbar-right #notifications-btn,
.atomware-client-topbar-right #notifications-btn .material-icons {
    color: var(--atomware-text-secondary) !important;
}
.atomware-client-topbar-right #notifications-btn:hover .material-icons {
    color: var(--atomware-text-primary) !important;
}

.atomware-business-selector {
    padding: var(--atomware-spacing);
    background: var(--atomware-bg-secondary);
    border-bottom: 1px solid var(--atomware-border);
}

.atomware-business-selector label {
    display: block;
    margin-bottom: var(--atomware-spacing-sm);
    font-weight: 500;
}

.atomware-business-select,
.atomware-select,
.atomware-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius-sm);
    color: var(--atomware-text-primary);
    font-size: 14px;
}

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

/* Tabs */
.atomware-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    padding: var(--atomware-spacing);
    background: var(--atomware-bg-secondary);
    border-bottom: 1px solid var(--atomware-border);
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    min-height: 0;
}

.atomware-tab-btn {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: var(--atomware-radius-sm);
    color: var(--atomware-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

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

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

.atomware-tab-content {
    position: relative;
    flex: 1;
    overflow-y: auto;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    padding: 0;
}

.atomware-tab-pane {
    display: none;
    padding: var(--atomware-spacing);
    width: 100%;
    flex: 0 0 auto;
    align-self: flex-start;
}

.atomware-tab-pane.active {
    display: block;
}

/* Chats, Analytics, Details, Notes, Client Chat, Files - flex layout, full height */
#tab-chats.atomware-tab-pane,
#tab-chat.atomware-tab-pane,
#tab-tasks.atomware-tab-pane,
#tab-files.atomware-tab-pane,
#tab-analytics.atomware-tab-pane,
#tab-details.atomware-tab-pane,
#tab-notes.atomware-tab-pane,
#tab-unassigned.atomware-tab-pane,
#tab-assigned.atomware-tab-pane,
#tab-email.atomware-tab-pane {
    display: none !important;
}
#tab-chats.atomware-tab-pane.active,
#tab-chat.atomware-tab-pane.active,
#tab-tasks.atomware-tab-pane.active,
#tab-files.atomware-tab-pane.active,
#tab-analytics.atomware-tab-pane.active,
#tab-details.atomware-tab-pane.active,
#tab-notes.atomware-tab-pane.active,
#tab-unassigned.atomware-tab-pane.active,
#tab-assigned.atomware-tab-pane.active,
#tab-email.atomware-tab-pane.active,
#tab-calendar.atomware-tab-pane.active,
#tab-contacts.atomware-tab-pane.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 var(--atomware-spacing) var(--atomware-spacing) !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
}
/* Files tab: edge-to-edge below tabs (no side inset that clips drive) */
#tab-files.atomware-tab-pane.active {
    padding: 0 !important;
}
/* Group chat tabs - no padding, use full space */
#tab-chats.atomware-tab-pane.active,
#tab-chat.atomware-tab-pane.active {
    padding: 0 !important;
}

/* Tasks tab hidden: ensure My/Team task views never paint through (mobile WebKit; user saw kanban below Contacts) */
#atomware-staff-dashboard #tab-assigned:not(.active) #assigned-kanban,
#atomware-staff-dashboard #tab-assigned:not(.active) #assigned-tasks,
#atomware-staff-dashboard #tab-assigned:not(.active) #assigned-calendar-home,
#atomware-staff-dashboard #tab-assigned:not(.active) .atomware-tasks-header,
#atomware-staff-dashboard #tab-assigned:not(.active) .atomware-status-tabs {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Client portal — immersive chat fullscreen (next to Select messages): hide top chrome, fill viewport */
#atomware-client-portal.atomware-client-chat-fullscreen-active #atomware-client-birthday-banner,
#atomware-client-portal.atomware-client-chat-fullscreen-active .atomware-client-topbar,
#atomware-client-portal.atomware-client-chat-fullscreen-active .atomware-client-nav-rail,
#atomware-client-portal.atomware-client-chat-fullscreen-active .atomware-tabs,
#atomware-client-portal.atomware-client-chat-fullscreen-active .atomware-platform-footer {
    display: none !important;
}
#atomware-client-portal.atomware-client-chat-fullscreen-active .atomware-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden !important;
}
#atomware-client-portal.atomware-client-chat-fullscreen-active #tab-chat.atomware-tab-pane.active {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    padding-top: max(0px, env(safe-area-inset-top, 0px)) !important;
}

/* Group + client portal chat: flex-basis 0 + full width so nested feed + composer fill viewport (staff + client portal). */
#tab-chats.atomware-tab-pane.active,
#tab-chat.atomware-tab-pane.active {
    flex: 1 1 0 !important;
    align-self: stretch !important;
    width: 100% !important;
}

/* Chats tab (staff + client) - prevent tab-content scroll so messages + sticky input work */
.atomware-tab-content:has(#tab-chats.atomware-tab-pane.active),
.atomware-tab-content:has(#tab-chat.atomware-tab-pane.active),
#atomware-staff-dashboard.staff-tab-is-chats .atomware-tab-content {
    overflow: hidden;
}

/* Notes tab - tab-content scrolls so content flows naturally (no nested scroll) */
.atomware-tab-content:has(#tab-notes.atomware-tab-pane.active) {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
}
#tab-notes.atomware-tab-pane.active {
    display: block !important;
    flex: 0 0 auto !important;
}

/* Files tab - prevent tab-content scroll; drive-main scrolls */
.atomware-tab-content:has(#tab-files.atomware-tab-pane.active) {
    overflow: hidden;
    overflow-x: hidden;
    max-width: 100%;
}

/* Contacts tab - prevent tab-content scroll; contacts list scrolls internally */
.atomware-tab-content:has(#tab-contacts.atomware-tab-pane.active) {
    overflow: hidden;
}

/* Tasks / Assigned tab - prevent tab-content scroll; kanban board scrolls */
.atomware-tab-content:has(#tab-tasks.atomware-tab-pane.active),
.atomware-tab-content:has(#tab-assigned.atomware-tab-pane.active) {
    overflow: hidden;
}

/* Notes tab - anchor to top, natural content flow, no secondary scroll */
#atomware-staff-dashboard:has(#tab-notes.atomware-tab-pane.active) .atomware-tab-content {
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}
#tab-notes.atomware-tab-pane.active {
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-height: min-content !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
}
#tab-notes.atomware-tab-pane.active #notes-tab-root {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    width: 100% !important;
}

/* Staff only: Notes + Group Chat share tab-content column flex — pull notes root to fill
   so lists don’t drift toward vertical center next to unused space (#notes-tab-root was flex-grow 0). */
#atomware-staff-dashboard #tab-notes.atomware-tab-pane.active {
    flex: 1 1 0% !important;
    min-height: 0 !important;
}
#atomware-staff-dashboard #tab-notes.atomware-tab-pane.active #notes-tab-root {
    flex: 1 1 0% !important;
    min-height: 0 !important;
}

/* Notes tab: bounded column + inner scroll (pane fills main column vertically; list scrolls inside) */
#atomware-staff-dashboard:has(#tab-notes.atomware-tab-pane.active) .atomware-main {
    contain: none;
}
#atomware-staff-dashboard .atomware-tab-content:has(#tab-notes.atomware-tab-pane.active) {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
#atomware-staff-dashboard #tab-notes.atomware-tab-pane.active #notes-tab-root .notes-tab-layout {
    flex: 1 1 0% !important;
    min-height: 0 !important;
}
#atomware-staff-dashboard #tab-notes.atomware-tab-pane.active #notes-tab-root .notes-tab-body {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Buttons - Force minimal vertical padding everywhere */
button, .atomware-btn-primary, .atomware-btn-secondary, .atomware-btn-danger, .atomware-btn-success, .atomware-btn-link {
    padding: 4px 14px !important;
    font-size: 14px;
    border: none;
    border-radius: var(--atomware-radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.2;
    vertical-align: middle;
    min-height: 0 !important;
    box-sizing: border-box;
}

/* Globally center button icons: make icon buttons flex so icons are vertically centered (not bottom-aligned) */
button:has(.material-icons),
button:has(span.material-icons) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Vertically center icons in all buttons, match text size */
button .material-icons,
button span.material-icons,
.atomware-btn-primary .material-icons,
.atomware-btn-secondary .material-icons,
.atomware-btn-danger .material-icons,
.atomware-btn-success .material-icons,
.atomware-btn-link .material-icons,
.atomware-tab-btn .material-icons {
    vertical-align: middle !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1em !important;
    line-height: 1 !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tab Buttons - Remove extra vertical padding, center text */
.atomware-tab-btn {
    padding: 6px 16px !important;
    min-height: 28px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--atomware-radius-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    gap: var(--atomware-spacing-sm);
    line-height: 1.2;
}

/* Special: Timer Stop Button - icon only, centred */
#stop-timer-btn.atomware-btn-icon {
    padding: 4px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: var(--atomware-radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2;
}
#stop-timer-btn.atomware-btn-icon .material-icons {
    font-size: 10px !important;
    position: static !important;
    top: auto !important;
    line-height: 1 !important;
}
.atomware-btn-primary,
.atomware-btn-secondary,
.atomware-btn-danger,
.atomware-btn-success,
.atomware-btn-link {
    padding: 8px 16px;
    border: none;
    border-radius: var(--atomware-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
}

.atomware-btn-primary .material-icons,
.atomware-btn-secondary .material-icons,
.atomware-btn-danger .material-icons,
.atomware-btn-success .material-icons,
.atomware-btn-link .material-icons {
    font-size: 16px;
    line-height: 1;
}

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

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

.atomware-btn-secondary {
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-primary);
}

.atomware-btn-secondary:hover {
    background: var(--atomware-border-light);
}

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

.atomware-btn-danger:hover {
    opacity: 0.9;
}

.atomware-btn-link {
    background: transparent;
    color: var(--atomware-primary);
    padding: 4px 8px;
}

.atomware-btn-link:hover {
    text-decoration: underline;
}

.atomware-btn-icon {
    padding: 8px;
    background: transparent;
    border: none;
    color: var(--atomware-text-secondary);
    cursor: pointer;
    border-radius: var(--atomware-radius-sm);
    transition: all 0.2s;
}

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

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

.atomware-btn-success:hover {
    opacity: 0.9;
}

.atomware-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.atomware-btn-sm .material-icons {
    font-size: 14px;
}

.atomware-btn-block {
    width: 100%;
    justify-content: center;
}

/* Quick Action Buttons - icon only, horizontal (expanded sidebar) */
.atomware-quick-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
}

.atomware-quick-btn {
    flex: 0 0 auto;
    justify-content: center;
    padding: 8px !important;
    min-width: 36px;
    border-radius: var(--atomware-radius-sm, 6px);
    box-sizing: border-box;
}

.atomware-quick-text {
    display: none !important;
}

/* Badge */
.atomware-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--atomware-danger);
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.atomware-badge:empty {
    display: none;
}

/* Chat unread indicators - small and subtle */
.atomware-chat-unread-dot {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid #fff;
    z-index: 2;
}
.atomware-client-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
    overflow: visible;
}
.atomware-client-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--atomware-bg, #1a1a2e);
    display: block;
    z-index: 2;
}
.atomware-business-unread-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    z-index: 2;
}
/* Client filter avatar – reference pattern for all avatars/logos */
.atomware-client-filter-sidebar .atomware-client-avatar {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.atomware-client-filter-sidebar .atomware-client-avatar img,
.atomware-client-filter-sidebar .atomware-client-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.atomware-chat-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    background: var(--atomware-danger);
    color: white;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 600;
}

.atomware-group-chat-title-wrap .atomware-chat-unread-badge,
#group-chat-title-wrap .atomware-chat-unread-badge {
    margin-left: 4px;
}

.atomware-tab-btn[data-tab="chats"] .atomware-chat-unread-badge {
    margin-left: 4px;
}

#atomware-client-portal .atomware-tab-btn[data-tab="chat"] .atomware-chat-unread-badge,
#atomware-client-portal #chat-unread-count.atomware-chat-unread-badge {
    margin-left: 6px;
}

.atomware-tab-btn[data-tab="email"] .atomware-email-unread-badge {
    margin-left: 4px;
}

/* Chat tab: position relative for badge overlay */
.atomware-sidebar-tab[data-sidebar-tab="chat"] {
    position: relative;
}
.atomware-sidebar-tab[data-sidebar-tab="chat"] .atomware-sidebar-chat-unread-badge {
    position: absolute;
    top: 50%;
    left: 21px; /* icon center when expanded (padding 12px + icon half 9px) */
    transform: translate(-50%, -50%);
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    background: var(--atomware-danger);
    color: white;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 600;
}

/* Loading */
.atomware-loading {
    text-align: center;
    padding: var(--atomware-spacing-lg);
    color: var(--atomware-text-muted);
}

.atomware-loading::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--atomware-border);
    border-top-color: var(--atomware-primary);
    border-radius: 50%;
    animation: atomware-spin 0.8s linear infinite;
}

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

/* Empty State */
.atomware-empty-state {
    text-align: center;
    padding: var(--atomware-spacing-lg) * 2;
    color: var(--atomware-text-muted);
}

/* Modal */
.atomware-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.atomware-modal.active {
    display: flex;
}

/* Ensure Share Note modal appears above other modals (e.g. Note Detail) */
#share-note-modal {
    z-index: 10001;
}

/* Recurrence modal - appear inside parent sidebar, above task-detail/task-modal content */
#recurring-task-modal.atomware-modal.active {
    z-index: 10002;
}

/* External Folder Notice - above Share to Files modal when both open */
#external-folder-modal.atomware-modal.active {
    z-index: 10003;
}

/* Amend Timer modal - above task detail modal when both open */
#amend-timer-modal.atomware-modal.active {
    z-index: 10004;
}

.atomware-external-modal-business {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
/* When inside task-detail/task-modal sidebar, align to right so it overlays the sidebar panel */
#task-detail-modal #recurring-task-modal.atomware-modal.active,
#task-modal #recurring-task-modal.atomware-modal.active,
#create-task-from-chat-modal #recurring-task-modal.atomware-modal.active {
    justify-content: flex-end;
    align-items: stretch;
}

.atomware-modal-content {
    position: relative;
    background: var(--atomware-surface-modal);
    border: 1px solid var(--atomware-border-brand-soft);
    border-radius: var(--atomware-radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
    box-shadow: var(--atomware-glow-modal);
    display: flex;
    flex-direction: column;
}

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

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

.atomware-modal-header-actions {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
}

.atomware-modal-header-actions .atomware-btn-sm {
    display: flex;
    align-items: center;
    gap: 4px;
}
.atomware-modal-header-actions .atomware-btn-icon {
    padding: 6px 8px;
    min-width: 32px;
    justify-content: center;
}
.atomware-modal-body {
    padding: var(--atomware-spacing-lg);
    flex: 1;
    overflow-y: auto;
}

.atomware-modal-footer {
    padding: var(--atomware-spacing-lg);
    border-top: 1px solid var(--atomware-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--atomware-spacing-md);
}

#edit-contact-modal .atomware-modal-footer {
    justify-content: space-between;
}

#edit-contact-modal .atomware-modal-footer-left {
    margin-right: auto;
}

#edit-contact-modal .atomware-modal-footer-right {
    display: flex;
    gap: var(--atomware-spacing-md);
    margin-left: auto;
}

#file-conflict-modal .atomware-modal-footer {
    gap: var(--atomware-spacing-lg);
}

#file-delete-confirm-modal .atomware-modal-footer {
    gap: var(--atomware-spacing-lg);
}

#folder-delete-confirm-modal .atomware-modal-footer {
    gap: var(--atomware-spacing-lg);
}

/* Task Pool — Assign Task modal: enough height + overflow visible so enhanced select list isn’t clipped */
#assign-task-modal .atomware-modal-content {
    width: min(100% - 24px, min(92vw, 520px));
    max-width: 100%;
    box-sizing: border-box;
    min-height: min(320px, 70vh);
    max-height: min(90vh, 720px);
    overflow: visible; /* default .atomware-modal-content is overflow-y:auto — clips absolute dropdown */
    display: flex;
    flex-direction: column;
}
#assign-task-modal .atomware-modal-header {
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
#assign-task-modal .atomware-modal-header h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: auto;
}
#assign-task-modal .atomware-modal-header .atomware-fullscreen-btn,
#assign-task-modal .atomware-modal-header .atomware-modal-close {
    flex-shrink: 0;
}
#assign-task-modal .atomware-modal-header .atomware-modal-close {
    font-size: 1.25rem;
    line-height: 1;
    padding: 4px 8px;
    min-width: 32px;
    min-height: 32px;
}
#assign-task-modal .atomware-modal-body {
    flex: 1 1 auto;
    min-height: 12rem;
    overflow: visible;
    position: relative;
    z-index: 2;
}
#assign-task-modal .atomware-form-group {
    margin-bottom: 0;
    min-width: 0;
}
#assign-task-modal .atomware-select-enhanced {
    position: relative;
    z-index: 5;
}
#assign-task-modal .atomware-select-dropdown {
    max-height: min(55vh, 420px);
}
#assign-task-modal .atomware-assign-task-modal-footer {
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 14px;
}
#assign-task-modal .atomware-assign-task-modal-footer .atomware-btn-sm {
    font-size: 12px;
    padding: 6px 12px;
    min-height: 34px;
}
#assign-task-modal.atomware-modal-fullscreen {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
#assign-task-modal.atomware-modal-fullscreen .atomware-modal-content {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
#assign-task-modal.atomware-modal-fullscreen .atomware-modal-body {
    min-height: 40vh;
}
@media (max-width: 480px) {
    #assign-task-modal .atomware-modal-content {
        width: min(100% - 16px, 100%);
        min-height: min(280px, 60vh);
    }
    #assign-task-modal .atomware-modal-body {
        padding: 12px 14px;
    }
    #assign-task-modal .atomware-modal-header {
        padding: 10px 12px;
    }
    #assign-task-modal .atomware-assign-task-modal-footer {
        justify-content: stretch;
    }
    #assign-task-modal .atomware-assign-task-modal-footer .atomware-btn-sm {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }
}

#bulk-delete-confirm-modal .atomware-modal-footer {
    gap: var(--atomware-spacing-lg);
}

#atomware-confirm-modal .atomware-modal-footer {
    gap: var(--atomware-spacing-lg);
}

.atomware-modal-close {
    font-size: 24px;
    color: var(--atomware-text-muted);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

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

.atomware-modal-lg .atomware-modal-content {
    max-width: 900px;
}

/* Team chat - Slack-style layout */
.atomware-team-chat-modal .atomware-modal-content {
    max-width: 960px;
    height: 70vh;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}
.atomware-team-chat-body {
    display: flex !important;
    flex: 1;
    min-height: 0;
    padding: 0 !important;
}
.atomware-team-chat-sidebar {
    width: 240px;
    min-width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--atomware-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--atomware-bg-secondary);
}
.atomware-team-chat-section {
    padding: var(--atomware-spacing-sm);
    border-bottom: 1px solid var(--atomware-border);
}
.atomware-team-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--atomware-spacing-sm) 0;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--atomware-text-muted);
}
.atomware-team-list {
    max-height: 200px;
    overflow-y: auto;
}
.atomware-team-staff-list-header {
    padding: var(--atomware-spacing-sm);
    font-weight: 600;
    font-size: 0.9em;
    color: var(--atomware-text-muted);
}
.atomware-team-channel-wrap {
    display: flex;
    align-items: center;
    position: relative;
}
.atomware-team-channel-wrap .atomware-team-channel {
    flex: 1;
    min-width: 0;
}
.atomware-team-channel-wrap .atomware-team-channel-actions {
    display: none;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
}
.atomware-team-channel-wrap.atomware-channel-actions-visible .atomware-team-channel-actions {
    display: inline-flex;
}
.atomware-team-channel-wrap .atomware-team-channel-rename,
.atomware-team-channel-wrap .atomware-team-channel-delete {
    flex-shrink: 0;
    padding: 4px;
    color: var(--atomware-text-muted);
}
.atomware-team-channel-wrap .atomware-team-channel-rename:hover {
    color: var(--atomware-primary);
}
.atomware-team-channel-wrap .atomware-team-channel-delete:hover {
    color: var(--atomware-danger, #dc3545);
}
.atomware-team-channel,
.atomware-team-dm,
.atomware-team-staff-item {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    padding: 8px 12px;
    border-radius: var(--atomware-radius-sm);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.95em;
}
.atomware-team-channel,
.atomware-team-dm {
    position: relative;
}
.atomware-team-channel:hover,
.atomware-team-dm:hover,
.atomware-team-staff-item:hover {
    background: var(--atomware-bg-tertiary);
}
.atomware-team-channel.active,
.atomware-team-dm.active,
.atomware-chat-item.active {
    background: var(--atomware-primary);
    color: white;
}
.atomware-chat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: var(--atomware-radius-sm);
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 4px;
    position: relative;
}

/* Phase 5: group/team list rows — draft (amber) + anchored voice (rose) */
.atomware-chat-item.atomware-sidebar-ind--draft::after,
.atomware-team-channel.atomware-sidebar-ind--draft::after,
.atomware-team-dm.atomware-sidebar-ind--draft::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid var(--atomware-bg, #1a1a2e);
    z-index: 4;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.atomware-chat-item.atomware-sidebar-ind--voice::before,
.atomware-team-channel.atomware-sidebar-ind--voice::before,
.atomware-team-dm.atomware-sidebar-ind--voice::before {
    content: '';
    position: absolute;
    top: 5px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fb7185;
    border: 2px solid var(--atomware-bg, #1a1a2e);
    z-index: 4;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.atomware-chat-item.active.atomware-sidebar-ind--draft::after,
.atomware-team-channel.active.atomware-sidebar-ind--draft::after,
.atomware-team-dm.active.atomware-sidebar-ind--draft::after,
.atomware-chat-item.active.atomware-sidebar-ind--voice::before,
.atomware-team-channel.active.atomware-sidebar-ind--voice::before,
.atomware-team-dm.active.atomware-sidebar-ind--voice::before {
    border-color: rgba(255, 255, 255, 0.92);
}

/* Staff client avatar row — same semantics; offset from unread badge (top-right) */
.atomware-business-filter-item[data-business-id]:not([data-business-id='']).atomware-sidebar-ind--draft
    .atomware-client-avatar-wrapper::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid var(--atomware-bg, #1a1a2e);
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.atomware-business-filter-item[data-business-id]:not([data-business-id='']).atomware-sidebar-ind--voice
    .atomware-client-avatar-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fb7185;
    border: 2px solid var(--atomware-bg, #1a1a2e);
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .atomware-chat-item.atomware-sidebar-ind--draft::after,
    .atomware-team-channel.atomware-sidebar-ind--draft::after,
    .atomware-team-dm.atomware-sidebar-ind--draft::after,
    .atomware-chat-item.atomware-sidebar-ind--voice::before,
    .atomware-team-channel.atomware-sidebar-ind--voice::before,
    .atomware-team-dm.atomware-sidebar-ind--voice::before {
        width: 6px;
        height: 6px;
        border-width: 1.5px;
    }
    .atomware-business-filter-item[data-business-id]:not([data-business-id='']).atomware-sidebar-ind--draft
        .atomware-client-avatar-wrapper::after,
    .atomware-business-filter-item[data-business-id]:not([data-business-id='']).atomware-sidebar-ind--voice
        .atomware-client-avatar-wrapper::before {
        width: 7px;
        height: 7px;
    }
}

.atomware-chat-item:hover {
    background: var(--atomware-bg-tertiary);
}
.atomware-chat-item.active .atomware-badge {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}
.atomware-team-channel .material-icons,
.atomware-team-dm .material-icons {
    font-size: 18px;
}
/* Team DM avatar – matches atomware-business-filter-item pattern */
.atomware-team-dm-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.atomware-team-dm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.atomware-team-dm-avatar-initial {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.atomware-team-dm-unread,
.atomware-team-channel-unread {
    margin-left: auto;
    background: var(--atomware-primary);
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
}
.atomware-dm-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.atomware-online-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
}
.atomware-team-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.atomware-team-chat-header {
    padding: var(--atomware-spacing);
    border-bottom: 1px solid var(--atomware-border);
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    font-weight: 600;
    flex-shrink: 0;
}
.atomware-team-chat-header-icon .material-icons {
    font-size: 20px;
    color: var(--atomware-text-muted);
}
.atomware-team-chat-header-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--atomware-bg-tertiary);
}
.atomware-team-chat-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.atomware-team-chat-header-avatar.atomware-header-avatar-initial {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.atomware-draft-restored-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--atomware-border);
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .atomware-draft-restored-indicator {
        font-size: 10px;
        padding: 2px 6px;
        max-width: min(160px, 42vw);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.atomware-team-chat-search {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    padding: var(--atomware-spacing-sm) var(--atomware-spacing);
    background: var(--atomware-bg-tertiary);
    border-bottom: 1px solid var(--atomware-border);
    flex-shrink: 0;
    display: none;
}
.atomware-team-chat-search .material-icons {
    font-size: 18px;
    color: var(--atomware-text-muted);
}
.atomware-team-chat-search .atomware-input {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.9rem;
}

.atomware-team-chat-search.is-visible {
    display: flex;
}

@media (max-width: 1024px) {
    #team-chat-popout-btn {
        display: none !important;
    }
}
.atomware-team-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--atomware-spacing);
}
.atomware-team-chat-input {
    flex-shrink: 0;
    padding: var(--atomware-spacing-lg);
    border-top: 1px solid var(--atomware-border);
    position: relative;
}
.atomware-team-chat-input-row,
.atomware-client-chat-input-row {
    display: flex;
    align-items: flex-start;
    gap: var(--atomware-spacing-sm);
}
/* Wrapper keeps desktop: icons + textarea in one row (children participate in same flex) */
.atomware-team-chat-input-icons {
    display: contents;
}
/* Textarea + send share one flex slot on desktop; mobile CSS switches to a real row */
.atomware-team-chat-input-composer {
    display: contents;
}
.atomware-team-chat-input-row .atomware-btn-icon,
.atomware-client-chat-input-row .atomware-btn-icon {
    flex-shrink: 0;
    padding: 8px;
}
.atomware-team-chat-input-row textarea,
.atomware-team-chat-input-row .atomware-message-input-rich {
    flex: 1;
    resize: none;
    min-height: 40px;
    padding: 12px 14px;
}
.atomware-message-input-rich {
    outline: none;
    overflow-y: auto;
}
.atomware-message-input-rich.atomware-rich-input-empty::before {
    content: attr(data-placeholder);
    color: var(--atomware-text-muted, #6b7280);
}
.atomware-message-input-rich.atomware-rich-input-empty br {
    display: none;
}
/* Chat input: code preview before sending */
.atomware-message-input-rich pre {
    margin: 6px 0;
    padding: 8px 10px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 6px;
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre;
}
.atomware-message-input-rich code {
    font-family: inherit;
    color: inherit;
}
/* Mention chips in message input (before send) */
.atomware-mention-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    margin: 0 1px;
    background: var(--atomware-bg-tertiary);
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    color: var(--atomware-primary);
    vertical-align: baseline;
}
/* Mention chip avatar – matches atomware-business-filter-item pattern */
.atomware-mention-chip-avatar-wrap,
.atomware-mention-chip-avatar {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.atomware-mention-chip-avatar {
    font-size: 9px;
    font-weight: 600;
    background: var(--atomware-primary);
    color: #fff;
}
.atomware-mention-chip-avatar-wrap .atomware-mention-chip-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* @ Mention suggestion dropdown — must sit above .atomware-panel (100000) and #notifications-panel bumps */
#atomware-mention-suggest.atomware-mention-suggest {
    position: fixed;
    z-index: 100003;
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}
#atomware-mention-suggest.atomware-mention-drop-up {
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}
.atomware-mention-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--atomware-text-primary);
    transition: background 0.15s;
}
.atomware-mention-suggest-item:hover {
    background: var(--atomware-bg-tertiary);
}
.atomware-mention-suggest-item.selected {
    background: rgba(59, 130, 246, 0.18);
    outline: 1px solid var(--atomware-primary);
    outline-offset: -1px;
}
.atomware-mention-avatar-wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--atomware-bg-tertiary, #e5e7eb);
}
.atomware-mention-avatar-wrap .atomware-mention-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.atomware-mention-avatar-initials {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--atomware-primary);
    color: #fff;
}
.atomware-mention-suggest-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contact autocomplete (email compose, meeting invites) - fixed position for fullscreen modals */
#atomware-contact-autocomplete.atomware-contact-autocomplete {
    position: fixed;
    z-index: 100002;
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}
#atomware-contact-autocomplete.atomware-contact-autocomplete-up {
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}
.atomware-contact-autocomplete-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--atomware-text-primary);
    transition: background 0.15s;
}
.atomware-contact-autocomplete-item:hover,
.atomware-contact-autocomplete-item.selected {
    background: var(--atomware-bg-tertiary);
}
.atomware-contact-autocomplete-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.atomware-contact-autocomplete-badge {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.2);
    color: #16a34a;
    flex-shrink: 0;
}
.atomware-contact-autocomplete-email {
    flex: 0 0 100%;
    font-size: 11px;
    color: var(--atomware-text-muted);
}

/* Inline @ mentions in messages - avatar + name stay together, no line breaks */
.atomware-mention-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    margin: 0 2px 0 0;
    background: var(--atomware-bg-tertiary);
    border-radius: 6px;
    font-weight: 500;
    color: var(--atomware-primary);
    flex-wrap: nowrap;
    white-space: nowrap;
}
.atomware-mention-inline.atomware-mention-clickable {
    cursor: pointer;
}
.atomware-mention-inline-avatar {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    background: var(--atomware-primary);
    color: #fff;
    position: relative;
}
.atomware-mention-inline-avatar .atomware-mention-inline-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Inline mention avatars – ensure circle styling in all chat feeds (team, group, client) */
#team-chat-messages .atomware-mention-inline-avatar,
#chat-messages .atomware-mention-inline-avatar,
#atomware-client-portal .atomware-mention-inline-avatar {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    background: var(--atomware-primary);
    color: #fff;
    position: relative;
}
#team-chat-messages .atomware-mention-inline-avatar .atomware-mention-inline-avatar-img,
#chat-messages .atomware-mention-inline-avatar .atomware-mention-inline-avatar-img,
#atomware-client-portal .atomware-mention-inline-avatar .atomware-mention-inline-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Message author avatar - single initial, consistent 32px across team chat & chat context */
.atomware-message-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--atomware-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    position: relative;
}
.atomware-message-avatar img,
.atomware-message-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Consecutive messages from same author - hide repeated avatar, keep alignment */
.atomware-message-avatar-continuation {
    background: transparent !important;
    visibility: hidden;
}

/* Pending attachments bar (before send) - visible chips */
.atomware-team-chat-pending-attachments {
    margin-top: 8px;
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    border-top: 1px solid var(--atomware-border);
}
.atomware-pending-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--atomware-text-primary);
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.atomware-pending-attachment-icon {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.9;
}
.atomware-pending-attachment-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.atomware-remove-pending-attachment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 -2px 0 2px;
    padding: 0;
    background: rgba(0, 0, 0, 0.12);
    border: none;
    border-radius: 50%;
    color: var(--atomware-text-primary);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}
.atomware-remove-pending-attachment:hover {
    background: rgba(0, 0, 0, 0.2);
}
/* Responsive: pending attachments and chat input */
@media (max-width: 768px) {
    .atomware-team-chat-pending-attachments {
        margin-top: 6px;
        padding: 6px 0;
        gap: 6px;
        min-height: 40px;
    }
    .atomware-pending-attachment {
        padding: 5px 8px;
        font-size: 0.8rem;
        gap: 4px;
    }
    .atomware-pending-attachment-label {
        max-width: 80px;
    }
    .atomware-remove-pending-attachment {
        width: 18px;
        height: 18px;
        font-size: 1rem;
    }
}
@media (max-width: 480px) {
    .atomware-pending-attachment-label {
        max-width: 60px;
    }
}
@media (max-width: 768px) {
    .atomware-team-chat-input,
    .atomware-chat-input.atomware-team-chat-input {
        padding: 10px 12px;
    }
    .atomware-team-chat-input-row textarea,
    .atomware-client-chat-input-row textarea {
        min-height: 36px;
        padding: 10px 12px;
    }
}
@media (max-width: 480px) {
    .atomware-team-chat-input,
    .atomware-chat-input.atomware-team-chat-input {
        padding: 8px 10px;
    }
}
.atomware-team-chat-header {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
}
/* Create Task/Note from chat: hidden by default; only show after Select + checkbox selection */
#create-task-from-chat-btn,
#create-note-from-chat-btn,
#create-task-from-chat-btn,
#create-note-from-chat-btn,
#share-to-files-btn,
#forward-messages-btn,
#group-create-task-from-chat-btn,
#group-create-note-from-chat-btn,
#group-share-to-files-btn,
#group-forward-messages-btn {
    display: none !important;
}
#create-task-from-chat-btn.atomware-create-from-chat-visible,
#create-note-from-chat-btn.atomware-create-from-chat-visible,
#share-to-files-btn.atomware-share-to-files-visible,
#forward-messages-btn.atomware-forward-visible,
#group-create-task-from-chat-btn.atomware-create-from-chat-visible,
#group-create-note-from-chat-btn.atomware-create-from-chat-visible,
#group-share-to-files-btn.atomware-share-to-files-visible,
#group-forward-messages-btn.atomware-forward-visible {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.atomware-chat-action-btn.atomware-create-from-chat-visible,
.atomware-chat-action-btn.atomware-share-to-files-visible {
    padding: 6px 8px;
}
/* Action icons (Task, Note, Files) – grouped on far right, inline, evenly spaced */
.atomware-chat-action-icons {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    flex-shrink: 0;
    flex-wrap: nowrap;
    margin-left: auto;
}
/* Share to Files modal */
.atomware-share-to-files-intro {
    margin-bottom: var(--atomware-spacing-md);
    color: var(--atomware-text-muted);
    font-size: 0.9rem;
}
.atomware-share-to-files-folder-type {
    display: flex;
    gap: var(--atomware-spacing-sm);
    margin-bottom: var(--atomware-spacing-sm);
}
.atomware-share-to-files-folder-type .atomware-share-folder-type-btn.active {
    background: var(--atomware-primary);
    color: #fff;
    border-color: var(--atomware-primary);
}
.atomware-share-to-files-tree {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    padding: var(--atomware-spacing-xs);
    margin-bottom: var(--atomware-spacing-sm);
    background: var(--atomware-bg-secondary);
}
.atomware-share-tree {
    padding: 4px 0;
}
.atomware-share-tree-node {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--atomware-radius-sm);
    cursor: pointer;
}
.atomware-share-tree-node:hover {
    background: var(--atomware-bg-tertiary);
}
.atomware-share-tree-node.active {
    background: var(--atomware-primary-light, rgba(59, 130, 246, 0.15));
}
.atomware-share-tree-node .material-icons {
    font-size: 20px;
    color: var(--atomware-text-muted);
}
.atomware-share-tree-expand {
    width: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.atomware-share-tree-expand .material-icons {
    font-size: 18px;
    transition: transform 0.15s ease;
}
.atomware-share-tree-node.expanded > .atomware-share-tree-expand .material-icons {
    transform: rotate(90deg);
}
.atomware-share-tree-no-expand {
    visibility: hidden;
    cursor: default;
}
.atomware-share-tree-icon {
    flex-shrink: 0;
}
.atomware-share-tree-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atomware-share-tree-children {
    margin-left: 20px;
    border-left: 1px solid var(--atomware-border);
}
.atomware-share-tree-loading {
    padding: 4px 10px;
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
}
.atomware-share-to-files-selected {
    font-size: 0.85rem;
    color: var(--atomware-text-muted);
    margin-bottom: var(--atomware-spacing-sm);
}
.atomware-share-to-files-new-folder {
    display: flex;
    gap: var(--atomware-spacing-sm);
}
.atomware-share-to-files-new-folder input {
    flex: 1;
}
.atomware-message-select-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
    cursor: pointer;
}
.atomware-message-select-wrap input {
    cursor: pointer;
}
.atomware-message.own .atomware-message-select-wrap,
.atomware-message .atomware-message-select-wrap {
    margin-right: 8px;
}
.atomware-message-select-wrap,
.atomware-message-select-label {
    display: none;
}
#team-chat-messages.atomware-chat-select-mode .atomware-message-select-wrap,
#team-chat-messages.atomware-chat-select-mode .atomware-message-select-label,
#chat-messages.atomware-chat-select-mode .atomware-message-select-wrap,
#chat-messages.atomware-chat-select-mode .atomware-message-select-label {
    display: inline-flex;
}
.atomware-message-select-from-group {
    display: none;
}
#team-chat-messages.atomware-chat-select-mode .atomware-message-select-from-group,
#chat-messages.atomware-chat-select-mode .atomware-message-select-from-group {
    display: inline-flex;
}
.atomware-message .atomware-message-select-from-group {
    margin-right: 8px;
    flex-shrink: 0;
}
.atomware-message-attachment {
    margin-top: 8px;
    padding: 8px;
    background: var(--atomware-bg-tertiary);
    border-radius: var(--atomware-radius-sm);
}
/* Attachment checkbox for Share to Files / Task / Note - hidden until select mode */
.atomware-attachment-select-wrap {
    display: none;
}
#team-chat-messages.atomware-chat-select-mode .atomware-attachment-select-wrap,
#chat-messages.atomware-chat-select-mode .atomware-attachment-select-wrap {
    display: inline-flex;
    margin-right: 8px;
    flex-shrink: 0;
}
.atomware-attachment-with-select {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.atomware-message-attachment-image img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}
.atomware-chat-attachment-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
}
.atomware-chat-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--atomware-primary);
}
.atomware-message-select-label {
    font-size: 0.75rem;
    margin-bottom: 4px;
    cursor: pointer;
}
/* Group select checkbox(es) and "From: [person]" when creating task from chat */
.atomware-message-select-from-group {
    align-items: center;
    gap: var(--atomware-spacing-sm);
    flex-wrap: wrap;
    padding: 4px 8px;
    margin: -4px 0 4px 0;
    background: var(--atomware-bg-tertiary);
    border-radius: var(--atomware-radius-sm);
    border: 1px solid var(--atomware-border);
}
.atomware-message-select-from-group .atomware-message-select-wrap,
.atomware-message-select-from-group .atomware-message-select-label {
    display: inline-flex !important;
    margin-bottom: 0;
}
.atomware-message-from-label {
    display: none;
    font-size: 0.8rem;
    color: var(--atomware-text-secondary);
    font-weight: 500;
}
.atomware-message-attachment-audio .atomware-message-select-from-group,
.atomware-message-attachment .atomware-message-select-from-group:first-child {
    margin-bottom: 8px;
}
.atomware-chat-task-preview {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    background: var(--atomware-bg-tertiary);
    border-radius: var(--atomware-radius-sm);
    font-size: 0.9rem;
}
.atomware-chat-task-preview-item {
    margin-bottom: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--atomware-border);
}
.atomware-chat-task-preview-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.atomware-chat-preview-author {
    font-weight: 600;
    color: var(--atomware-text-primary);
    margin-right: 4px;
}
.atomware-chat-preview-text {
    color: var(--atomware-text-secondary);
}
.atomware-chat-preview-attachment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--atomware-text-muted);
}
.atomware-chat-preview-attachment .material-icons {
    font-size: 16px;
}

.atomware-reply-preview {
    padding: 8px 12px;
    background: var(--atomware-bg-tertiary);
    border-left: 3px solid var(--atomware-primary);
    margin-bottom: 8px;
    border-radius: 4px;
}
.atomware-reply-preview-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.atomware-reply-label {
    font-size: 0.75rem;
    color: var(--atomware-text-muted);
}
.atomware-reply-snippet {
    flex: 1;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atomware-reply-cancel {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--atomware-text-muted);
    padding: 0 4px;
}
.atomware-reply-cancel:hover {
    color: var(--atomware-primary);
}

.atomware-message-reply-to {
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(0,0,0,0.05);
    border-left: 3px solid var(--atomware-primary);
    border-radius: 4px;
    font-size: 0.85rem;
}
.atomware-message.own .atomware-message-reply-to {
    background: rgba(255,255,255,0.15);
}
.atomware-reply-to-author {
    display: block;
    font-weight: 600;
    color: var(--atomware-primary);
    margin-bottom: 2px;
}
.atomware-reply-to-snippet {
    color: var(--atomware-text-muted);
}
.atomware-reply-clickable {
    cursor: pointer;
}
.atomware-reply-clickable:hover {
    background: rgba(0,0,0,0.08);
}
.atomware-message.own .atomware-reply-clickable:hover {
    background: rgba(255,255,255,0.2);
}
.atomware-message-highlight {
    animation: atomware-message-highlight 1.5s ease-out;
}
@keyframes atomware-message-highlight {
    0% { background: rgba(59, 130, 246, 0.2); }
    100% { background: transparent; }
}

/* Message reactions (picker + summary + optional face stack) */
.atomware-message-reactions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 2px 0 4px;
    max-width: 100%;
}
.atomware-reaction-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    row-gap: 4px;
    width: 100%;
}
.atomware-reaction-faces {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.atomware-reaction-face {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: -7px;
    border: 2px solid var(--atomware-surface, #fff);
    box-sizing: border-box;
    flex-shrink: 0;
    background: var(--atomware-border, #e5e7eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.atomware-reaction-face:first-child {
    margin-left: 0;
}
.atomware-reaction-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.atomware-reaction-face-initial {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--atomware-text-muted, #6b7280);
}
.atomware-reaction-face-more {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: -7px;
    border: 2px solid var(--atomware-surface, #fff);
    box-sizing: border-box;
    font-size: 0.55rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--atomware-border, #e5e7eb);
    color: var(--atomware-text-muted, #6b7280);
}
.atomware-reaction-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}
.atomware-reaction-chip {
    border: 1px solid var(--atomware-border, #e5e7eb);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 1.35;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 28px;
    box-sizing: border-box;
}
.atomware-message.own .atomware-reaction-chip {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: inherit;
}
.atomware-reaction-chip-count {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.85;
}
.atomware-reaction-toggle {
    margin-left: auto;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--atomware-text-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.atomware-reaction-toggle .material-icons {
    font-size: 1.15rem;
}
.atomware-reaction-toggle:hover,
.atomware-reaction-toggle:focus {
    background: rgba(0, 0, 0, 0.06);
    outline: none;
}
.atomware-message.own .atomware-reaction-toggle {
    color: rgba(255, 255, 255, 0.85);
}
.atomware-message.own .atomware-reaction-toggle:hover,
.atomware-message.own .atomware-reaction-toggle:focus {
    background: rgba(255, 255, 255, 0.12);
}
.atomware-reaction-picker {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 2px;
}
.atomware-message-reactions.is-open .atomware-reaction-picker {
    display: flex;
}
.atomware-reaction-picker-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 0 6px;
    font-size: 1.15rem;
    line-height: 1;
    border: 1px solid var(--atomware-border, #e5e7eb);
    border-radius: 10px;
    background: var(--atomware-surface, #fff);
    cursor: pointer;
    box-sizing: border-box;
}
.atomware-reaction-picker-btn.is-active {
    border-color: var(--atomware-primary, #2563eb);
    box-shadow: 0 0 0 1px var(--atomware-primary, #2563eb);
}
.atomware-reaction-picker-btn:hover,
.atomware-reaction-picker-btn:focus {
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}
.atomware-message.own .atomware-reaction-picker-btn {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.atomware-message.own .atomware-reaction-picker-btn:hover,
.atomware-message.own .atomware-reaction-picker-btn:focus {
    background: rgba(255, 255, 255, 0.2);
}

/* Chat bubbles: compact reactions + ticks (narrow screens — less chrome, emoji still full size in chips) */
@media (max-width: 900px) {
    .atomware-message-reactions {
        gap: 2px;
        margin: 0 0 3px;
    }
    .atomware-reaction-summary-row {
        gap: 4px;
        row-gap: 2px;
    }
    .atomware-reaction-chip {
        min-height: 24px;
        padding: 1px 6px;
        font-size: 0.72rem;
        gap: 2px;
    }
    .atomware-reaction-chip-count {
        font-size: 0.6rem;
    }
    .atomware-reaction-toggle {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }
    .atomware-reaction-toggle .material-icons {
        font-size: 1rem;
    }
    .atomware-reaction-picker {
        gap: 4px;
        padding: 2px 0 1px;
    }
    .atomware-reaction-picker-btn {
        min-width: 34px;
        min-height: 34px;
        padding: 0 4px;
        font-size: 1.05rem;
    }
    .atomware-reaction-face,
    .atomware-reaction-face-more {
        width: 18px;
        height: 18px;
        margin-left: -6px;
    }
    .atomware-reaction-face:first-child {
        margin-left: 0;
    }
    .atomware-message-header .atomware-message-time {
        font-size: 0.68rem;
    }
    .atomware-message-seen {
        font-size: 0.62rem;
        margin-left: 2px;
    }
}

/* Read receipt - DMs only, own messages (team chat) */
.atomware-message-seen {
    font-size: 0.7rem;
    opacity: 0.75;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    letter-spacing: -0.05em;
}
.atomware-message.own .atomware-message-seen {
    color: rgba(255, 255, 255, 0.75);
}
.atomware-message.own .atomware-message-sent {
    opacity: 0.6;
}
.atomware-message.own .atomware-message-read {
    opacity: 1;
    color: rgba(255, 255, 255, 0.9);
}

.atomware-message-attachment-audio {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.atomware-message-attachment-video {
    display: block;
}
.atomware-chat-attachment-video {
    width: 100%;
    max-height: 260px;
    border-radius: 6px;
    background: #000;
}
/* PDF and text previews in chat */
.atomware-message-attachment-pdf .atomware-chat-preview-pdf-wrap,
.atomware-message-attachment-text .atomware-chat-preview-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.atomware-chat-preview-pdf,
.atomware-chat-preview-text {
    width: 100%;
    min-height: 200px;
    max-height: 360px;
    border: 1px solid var(--atomware-border);
    border-radius: 6px;
    background: var(--atomware-bg-secondary);
}
.atomware-chat-preview-pdf,
.atomware-pdf-page1-preview {
    height: 320px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--atomware-bg-secondary);
}
.atomware-pdf-page1-preview .atomware-pdf-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--atomware-text-muted);
    font-size: 0.9rem;
}
.atomware-pdf-page1-preview .atomware-pdf-loading .material-icons {
    font-size: 20px;
}
.atomware-pdf-page1-preview .atomware-pdf-canvas {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}
.atomware-chat-preview-text {
    height: 240px;
    font-size: 0.8rem;
}
.atomware-chat-preview-open {
    align-self: flex-start;
    font-size: 0.85rem;
}
/* Sticky video bar: when user scrolls while a video is playing, video jumps here until Stop */
.atomware-chat-sticky-video-bar {
    position: relative;
    z-index: 25;
    background: var(--atomware-bg-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    padding: 8px;
    border-bottom: 1px solid var(--atomware-border);
}
.atomware-chat-sticky-video-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}
.atomware-chat-sticky-video-slot {
    flex: 1;
    min-width: 0;
}
.atomware-chat-sticky-video-slot video {
    width: 100%;
    max-height: 180px;
    border-radius: 6px;
    background: #000;
    display: block;
}
.atomware-chat-sticky-video-stop {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 0.85rem;
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-primary);
    border: 1px solid var(--atomware-border);
    border-radius: 6px;
    cursor: pointer;
}
.atomware-chat-sticky-video-stop:hover {
    background: var(--atomware-bg-secondary);
}
.atomware-chat-video-placeholder {
    display: block;
    border-radius: 6px;
}
.atomware-voice-note-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    pointer-events: auto;
    background: var(--atomware-bg-tertiary);
    padding: 8px 12px;
    border-radius: 8px;
}
.atomware-voice-note-wrap audio {
    display: none;
}
/* Custom play/pause button */
.atomware-vn-play-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    border: none;
    background: var(--atomware-primary, #1552cc);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}
.atomware-vn-play-btn.atomware-vn-play-btn--unplayed {
    background: #15803d;
}
.atomware-vn-play-btn.atomware-vn-play-btn--unplayed:hover {
    background: #166534;
}
.atomware-vn-play-btn.atomware-vn-play-btn--played {
    background: var(--atomware-primary, #1552cc);
}
.atomware-vn-play-btn.atomware-vn-play-btn--played:hover {
    background: var(--atomware-primary-hover, #0f3fa8);
}
.atomware-vn-play-btn:hover {
    background: var(--atomware-primary-hover, #0f3fa8);
    transform: scale(1.05);
}
.atomware-vn-play-btn .material-icons {
    font-size: 20px;
}
/* Progress bar */
.atomware-vn-progress-wrap {
    flex: 1;
    min-width: 60px;
    display: flex;
    align-items: center;
}
.atomware-vn-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: height 0.1s;
}
.atomware-vn-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--atomware-primary, #1552cc);
    border-radius: 2px;
    transition: width 0.1s linear;
}
.atomware-vn-progress-bar:hover {
    height: 6px;
}
.atomware-voice-speed-cycle {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--atomware-text-primary);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    min-width: auto;
}
.atomware-dashboard .atomware-voice-speed-cycle,
.atomware-portal .atomware-voice-speed-cycle {
    font-size: 10px;
}
@media (max-width: 1024px) {
    .atomware-dashboard .atomware-voice-speed-cycle,
    .atomware-portal .atomware-voice-speed-cycle {
        font-size: 8px;
    }
}
@media (max-width: 640px) {
    .atomware-dashboard .atomware-voice-speed-cycle,
    .atomware-portal .atomware-voice-speed-cycle {
        font-size: 6px;
    }
}
.atomware-voice-speed-cycle:hover {
    color: var(--atomware-text-primary);
    opacity: 0.85;
}
.atomware-voice-note-duration {
    font-size: 0.7rem;
    color: var(--atomware-text-muted);
    min-width: 2.2em;
    flex-shrink: 0;
}
.atomware-voice-note-label {
    font-size: 0.75rem;
    color: var(--atomware-text-muted);
}

.atomware-team-voice-target-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin: 0;
    background: var(--atomware-bg-secondary, #f1f5f9);
    border-bottom: 1px solid var(--atomware-border, #e5e7eb);
    font-size: 0.8125rem;
    color: var(--atomware-text-primary);
}
.atomware-team-voice-target-banner-icon {
    font-size: 18px;
    color: #15803d;
}
.atomware-team-voice-target-banner-text {
    flex: 1;
    min-width: 120px;
}

.atomware-voice-btn-wrap {
    position: relative;
    display: inline-flex;
}
.atomware-voice-recording-panel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: rgba(21, 82, 204, 0.16);
    border-radius: 8px;
    border: 1px solid var(--atomware-primary, #1552cc);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.atomware-voice-preview-panel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--atomware-bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--atomware-primary, #1552cc);
    flex-wrap: wrap;
    box-shadow: 0 0 0 1px rgba(21, 82, 204, 0.2);
}
.atomware-voice-preview-panel audio {
    max-width: 180px;
    height: 32px;
}
.atomware-voice-preview-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.atomware-voice-waves {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
}
.atomware-voice-waves span {
    width: 4px;
    min-height: 6px;
    background: var(--atomware-primary, #1976d2);
    border-radius: 2px;
    animation: atomware-wave 0.6s ease-in-out infinite alternate;
}
.atomware-voice-waves span:nth-child(1) { animation-delay: 0s; height: 8px; }
.atomware-voice-waves span:nth-child(2) { animation-delay: 0.1s; height: 14px; }
.atomware-voice-waves span:nth-child(3) { animation-delay: 0.2s; height: 10px; }
.atomware-voice-waves span:nth-child(4) { animation-delay: 0.3s; height: 18px; }
.atomware-voice-waves span:nth-child(5) { animation-delay: 0.4s; height: 12px; }
.atomware-voice-waves span:nth-child(6) { animation-delay: 0.5s; height: 16px; }
.atomware-voice-waves span:nth-child(7) { animation-delay: 0.6s; height: 10px; }
@keyframes atomware-wave {
    0% { transform: scaleY(0.4); }
    100% { transform: scaleY(1); }
}

.atomware-chat-modal-body {
    display: flex;
    flex-direction: column;
    height: 500px;
}

/* Subtle divider between message blocks from different users */
/* Sticky date label - top centre of chat feed, updates on scroll */
.atomware-chat-date-float {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8px;
    color: var(--atomware-text-muted);
    padding: 4px 0;
    z-index: 2;
    pointer-events: none;
    background: transparent;
}
@media (max-width: 1024px) {
    .atomware-chat-date-float {
        font-size: 6px;
    }
}

/* Date divider - line | date | line, centred where day changes */
.atomware-chat-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
}
.atomware-chat-date-divider-line {
    flex: 1;
    height: 1px;
    min-width: 20px;
    background: transparent;
}
.atomware-chat-date-divider-text {
    font-size: 8px;
    color: var(--atomware-text-muted);
    flex-shrink: 0;
}
@media (max-width: 1024px) {
    .atomware-chat-date-divider-text {
        font-size: 6px;
    }
}
.atomware-chat-divider {
    height: 1px;
    margin: 12px 0;
    background: rgba(0, 0, 0, 0.08);
}
.dark-mode .atomware-chat-divider {
    background: rgba(255, 255, 255, 0.08);
}

/* Unread feed divider — centered pill between read / unread (WhatsApp-style) */
.atomware-chat-unread-feed-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 12px 0 16px;
}
.atomware-chat-unread-feed-line {
    flex: 1;
    height: 1px;
    min-width: 16px;
    background: color-mix(in srgb, #22c55e 42%, transparent);
}
.atomware-chat-unread-feed-pill {
    flex-shrink: 0;
    max-width: min(260px, 85vw);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    color: #fff;
    background: #22c55e;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.35), 0 0 0 1px rgba(21, 128, 61, 0.25);
}
.dark-mode .atomware-chat-unread-feed-pill {
    color: #fff;
    background: #16a34a;
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.25), 0 0 0 1px rgba(34, 197, 94, 0.35);
}
.dark-mode .atomware-chat-unread-feed-line {
    background: color-mix(in srgb, #22c55e 45%, transparent);
}

.atomware-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--atomware-spacing-md);
    min-height: 0;
}
/* Team chat feed - 5% transparent background */
#team-chat-messages {
    background: color-mix(in srgb, var(--atomware-bg-primary) 95%, transparent);
}
/* Chat feed responsive */
@media (max-width: 768px) {
    .atomware-chat-messages,
    #team-chat-messages,
    #chat-messages {
        padding: 10px 8px;
    }
    .atomware-message-content {
        max-width: 100%;
        min-width: 0;
    }
    .atomware-message-attachment {
        margin-top: 6px;
        padding: 6px;
    }
    .atomware-message-attachment-image img,
    .atomware-chat-attachment-img {
        max-width: 100%;
        height: auto;
    }
    .atomware-chat-attachment-video {
        max-height: 200px;
    }
    .atomware-chat-preview-pdf,
    .atomware-chat-preview-text {
        min-height: 160px;
        max-height: 240px;
    }
}
@media (max-width: 480px) {
    .atomware-chat-messages,
    #team-chat-messages,
    #chat-messages {
        padding: 8px 6px;
    }
    .atomware-message-attachment {
        padding: 4px;
    }
    .atomware-chat-attachment-video {
        max-height: 180px;
    }
}
#team-chat-messages.atomware-chat-feed-dragover,
#chat-messages.atomware-chat-feed-dragover {
    background: rgba(66, 133, 244, 0.08);
    border: 2px dashed var(--atomware-primary);
    border-radius: var(--atomware-radius);
}

/* P13: wrap scroll feeds so the jump-to-latest control can sit in the message column */
.atomware-chat-feed-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.atomware-chat-feed-wrap > .atomware-chat-messages,
.atomware-chat-feed-wrap > .atomware-team-messages,
.atomware-chat-feed-wrap > #chat-messages,
.atomware-chat-feed-wrap > #team-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.atomware-chat-jump-fab {
    position: absolute;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    z-index: 4;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--atomware-border);
    background: var(--atomware-bg-elevated, var(--atomware-bg-primary));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    color: var(--atomware-text-secondary);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.atomware-chat-jump-fab .material-icons {
    font-size: 20px;
    line-height: 1;
}
.atomware-chat-jump-fab:hover {
    color: var(--atomware-primary);
    border-color: var(--atomware-primary);
    transform: scale(1.04);
}
.atomware-chat-load-older-row {
    position: sticky;
    top: 0;
    z-index: 3;
    text-align: center;
    padding: 6px 8px 8px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: var(--atomware-text-muted);
    line-height: 1.3;
    flex-shrink: 0;
    background: var(--atomware-bg-primary);
    box-shadow: 0 1px 0 var(--atomware-border);
}
.atomware-chat-load-older-row--loading {
    color: var(--atomware-text-secondary);
}
.atomware-chat-load-older-row .atomware-loading {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: middle;
}
.atomware-chat-load-older-hint {
    white-space: nowrap;
}
@media (max-width: 480px) {
    .atomware-chat-load-older-hint {
        display: none;
    }
}

.atomware-chat-input {
    padding: var(--atomware-spacing-lg);
    border-top: 1px solid var(--atomware-border);
    position: relative;
}
.atomware-chat-modal-body .atomware-chat-input {
    display: flex;
    gap: var(--atomware-spacing-sm);
    margin-top: var(--atomware-spacing-md);
}

.atomware-chat-modal-body .atomware-chat-input textarea {
    flex: 1;
    resize: none;
}

/* Form Groups */
.atomware-form-group {
    margin-bottom: var(--atomware-spacing-lg);
}

.atomware-form-group:last-child {
    margin-bottom: 0;
}

.atomware-form-group label {
    display: block;
    margin-bottom: var(--atomware-spacing-sm);
    font-weight: 500;
    color: var(--atomware-text-primary);
}

.atomware-form-group label .required {
    color: #ef4444;
    margin-left: 2px;
}

.atomware-form-row {
    display: flex;
    gap: var(--atomware-spacing-md);
}

.atomware-form-row .atomware-form-group {
    flex: 1;
}
.atomware-form-row.atomware-form-row-single {
    grid-template-columns: 1fr !important;
}

.atomware-form-group input[type="text"],
.atomware-form-group input[type="email"],
.atomware-form-group input[type="url"],
.atomware-form-group input[type="password"],
.atomware-form-group input[type="date"],
.atomware-form-group input[type="tel"],
.atomware-form-group textarea,
.atomware-form-group select {
    width: 100%;
    padding: var(--atomware-spacing-md);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    background: var(--atomware-bg-secondary);
    color: var(--atomware-text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
}

.atomware-form-group input:focus,
.atomware-form-group textarea:focus,
.atomware-form-group select:focus {
    outline: none;
    border-color: var(--atomware-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.atomware-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Validation error state - highlight missing/invalid fields */
.atomware-validation-error input,
.atomware-validation-error select,
.atomware-validation-error.atomware-input,
.atomware-validation-error .atomware-select-trigger {
    border-color: var(--atomware-danger, #ef4444) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.atomware-subtask-row.atomware-validation-error .atomware-subtask-title,
.atomware-subtask-row.atomware-validation-error .atomware-subtask-due,
.atomware-subtask-row.atomware-validation-error .atomware-select-trigger {
    border-color: var(--atomware-danger, #ef4444) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.atomware-form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.2rem;
    padding-right: 2.5rem;
}

/* Panel (Notifications, Settings) - highest layer so sidebar always on top */
.atomware-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    background: var(--atomware-bg-primary);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    transition: right 0.3s;
    z-index: 100000;
}

.atomware-panel.active {
    right: 0;
}

/*
 * Notifications drawer: fixed to visible viewport using top+bottom (avoid 100dvh + safe-area padding
 * double-counting — that clipped content / hid the Close control after rotate).
 * Slide via transform so width can respond to orientation without jumping off-screen.
 */
#notifications-panel.atomware-panel {
    top: env(safe-area-inset-top, 0px) !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    right: 0 !important;
    left: auto !important;
    height: auto !important;
    width: min(320px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-height: none !important;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s ease !important;
    will-change: transform;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
}
#notifications-panel.atomware-panel.active {
    transform: translate3d(0, 0, 0);
}
#notifications-panel .atomware-panel-header {
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    row-gap: 6px;
}
#notifications-panel .atomware-panel-header h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 1.35;
}
#notifications-panel .atomware-panel-actions {
    flex-shrink: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    max-width: 100%;
}
#notifications-panel .atomware-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (orientation: landscape) and (max-height: 560px) {
    #notifications-panel.atomware-panel {
        width: min(300px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 8px));
    }
    /* One row: title truncates; actions + Close stay on-screen (no wrap into the void). */
    #notifications-panel .atomware-panel-header {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px;
        padding-top: max(6px, env(safe-area-inset-top, 0px));
        min-height: 44px;
    }
    #notifications-panel .atomware-panel-header h3 {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #notifications-panel .atomware-panel-actions {
        flex-wrap: nowrap !important;
        gap: 4px;
        max-width: min(68vw, 240px);
    }
    #notifications-panel #mark-all-read,
    #notifications-panel #delete-all-notifications {
        font-size: 9px;
        padding-left: 2px;
        padding-right: 2px;
        white-space: nowrap;
    }
    #notifications-panel .atomware-notifications-panel-close {
        min-width: 44px;
        min-height: 44px;
    }
}

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

.atomware-panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.atomware-bday-emoji {
    margin-left: 6px;
    font-size: 14px;
    line-height: 1;
}

.atomware-start-date-emoji {
    margin-left: 6px;
    font-size: 14px;
    line-height: 1;
}

.atomware-details-timezone,
.atomware-group-chat-timezone {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    color: #6b7280;
    vertical-align: middle;
}

.atomware-weather-label {
    color: #eab308;
    font-weight: 500;
}

.atomware-fx-label {
    color: #22c55e;
    font-weight: 500;
}

.atomware-details-help {
    margin-top: 4px;
    font-size: 11px;
    color: #6b7280;
}

@media (max-width: 1024px) {
    .atomware-details-timezone,
    .atomware-group-chat-timezone {
        font-size: 9px;
    }
}

@media (max-width: 768px) {
    .atomware-details-timezone,
    .atomware-group-chat-timezone {
        font-size: 8px;
    }
}

.atomware-panel-content {
    padding: var(--atomware-spacing);
    overflow-y: auto;
    max-height: calc(100vh - 60px);
}

.atomware-notification-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 36px 14px 12px;
    border-bottom: 1px solid var(--atomware-border);
    cursor: default;
    transition: background-color 0.15s ease;
}
.atomware-notification-item.clickable {
    cursor: pointer;
    background-color: transparent;
}
.atomware-notification-item.clickable:hover {
    background-color: var(--atomware-bg-hover, rgba(0, 0, 0, 0.04));
}
.atomware-notification-item.clickable:active {
    background-color: var(--atomware-bg-active, rgba(0, 0, 0, 0.06));
}

/* Notification avatar – matches profile pic size (28px) */
.atomware-notification-avatar-wrap {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--atomware-bg-tertiary, #eee);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.atomware-notification-avatar-wrap img,
.atomware-notification-avatar-wrap .atomware-notification-avatar[src] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
.atomware-notification-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--atomware-text-muted);
    line-height: 1;
}

.atomware-notification-icon.material-icons {
    font-size: 14px;
    color: var(--atomware-text-muted);
    line-height: 1;
}

/* Status-based icon container colors (when icon is shown, not avatar) */
.atomware-notification-avatar-wrap--success {
    background: rgba(34, 197, 94, 0.18) !important;
}
.atomware-notification-avatar-wrap--success .atomware-notification-icon.material-icons {
    color: #16a34a !important;
}
.atomware-notification-avatar-wrap--error {
    background: rgba(239, 68, 68, 0.18) !important;
}
.atomware-notification-avatar-wrap--error .atomware-notification-icon.material-icons {
    color: #dc2626 !important;
}
.atomware-notification-avatar-wrap--warning {
    background: rgba(245, 158, 11, 0.18) !important;
}
.atomware-notification-avatar-wrap--warning .atomware-notification-icon.material-icons {
    color: #d97706 !important;
}
.atomware-notification-avatar-wrap--info {
    background: rgba(59, 130, 246, 0.18) !important;
}
.atomware-notification-avatar-wrap--info .atomware-notification-icon.material-icons {
    color: #2f6fd4 !important;
}

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

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

.atomware-notification-text {
    display: flex;
    align-items: baseline;
}

.atomware-notification-text .atomware-notification-title {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}

.atomware-notification-message {
    margin-top: 2px;
    font-size: 13px;
    color: var(--atomware-text-muted);
    line-height: 1.4;
}

.atomware-notification-by {
    margin-top: 4px;
    font-size: 12px;
    color: var(--atomware-text-muted);
}

.atomware-notification-business {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--atomware-text-muted);
}
/* Notification business logo – same size as profile pic, forced circle */
.atomware-notification-business-logo-wrap {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--atomware-bg-tertiary, #eee);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    align-self: center;
}
.atomware-notification-business-logo-wrap img,
.atomware-notification-business-logo {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 50%;
}
.atomware-notification-business-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--atomware-text-muted);
    line-height: 1;
    text-align: center;
}
.atomware-notification-business-name {
    font-size: 12px !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#notifications-panel .atomware-notification-business-name {
    font-size: 12px !important;
}

.atomware-notification-footer {
    margin-top: 8px;
}

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

.atomware-notification-link-wrap {
    margin-top: 4px;
}
.atomware-notification-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--atomware-primary, #6366f1);
    transition: color 0.2s, opacity 0.2s;
}
.atomware-notification-item.clickable:hover .atomware-notification-link {
    color: var(--atomware-primary-hover, #4f46e5);
}
.atomware-notification-link-icon {
    margin-left: 6px;
    font-size: 14px !important;
    color: var(--atomware-text-muted);
    vertical-align: middle;
    opacity: 0.8;
    transition: color 0.2s, opacity 0.2s;
}
.atomware-notification-item.clickable .atomware-notification-link-icon {
    color: var(--atomware-primary, #6366f1);
    opacity: 0.9;
}
.atomware-notification-item.clickable:hover .atomware-notification-link-icon {
    color: var(--atomware-primary);
    opacity: 1;
}

.atomware-notification-close {
    position: absolute;
    top: 10px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--atomware-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--atomware-radius-sm, 4px);
    transition: color 0.15s, background-color 0.15s;
}

.atomware-notification-close:hover {
    color: var(--atomware-text);
    background-color: var(--atomware-bg-hover, rgba(0, 0, 0, 0.06));
}

/* Global notification tooltip — above CRM/SMM module host (99940) and upload toasts (9999);
 * below composer draft HUD (99968) and voice session HUD (99970) so floated stack paints correctly. */
#atomware-notif-tooltip-container {
    position: fixed !important;
    bottom: 16px;
    right: 16px;
    top: auto !important;
    left: auto !important;
    z-index: 99955;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}
#atomware-notif-tooltip-container .atomware-notif-tooltip {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.25;
    background: var(--atomware-bg-primary);
    border: 1px solid var(--atomware-border);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    max-width: 240px;
    cursor: default;
}
#atomware-notif-tooltip-container .atomware-notif-tooltip-clickable {
    cursor: pointer;
}
#atomware-notif-tooltip-container .atomware-notif-tooltip-clickable:hover {
    background: var(--atomware-bg-hover, rgba(0, 0, 0, 0.04));
}
.atomware-notif-tooltip-avatar-wrap {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--atomware-bg-tertiary);
}
.atomware-notif-tooltip-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.atomware-notif-tooltip-initial {
    font-size: 11px;
    font-weight: 600;
    color: var(--atomware-text-muted);
}
.atomware-notif-tooltip-icon.material-icons {
    font-size: 14px !important;
    color: var(--atomware-text-muted);
}
.atomware-notif-tooltip-avatar-wrap--success {
    background: rgba(34, 197, 94, 0.18) !important;
}
.atomware-notif-tooltip-avatar-wrap--success .atomware-notif-tooltip-icon.material-icons {
    color: #16a34a !important;
}
.atomware-notif-tooltip-avatar-wrap--error {
    background: rgba(239, 68, 68, 0.18) !important;
}
.atomware-notif-tooltip-avatar-wrap--error .atomware-notif-tooltip-icon.material-icons {
    color: #dc2626 !important;
}
.atomware-notif-tooltip-avatar-wrap--warning {
    background: rgba(245, 158, 11, 0.18) !important;
}
.atomware-notif-tooltip-avatar-wrap--warning .atomware-notif-tooltip-icon.material-icons {
    color: #d97706 !important;
}
.atomware-notif-tooltip-avatar-wrap--info {
    background: rgba(59, 130, 246, 0.18) !important;
}
.atomware-notif-tooltip-avatar-wrap--info .atomware-notif-tooltip-icon.material-icons {
    color: #2f6fd4 !important;
}
.atomware-notif-tooltip-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atomware-notif-tooltip-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--atomware-text-primary);
}
.atomware-notif-tooltip-business {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: inherit;
    color: var(--atomware-text-muted);
}
.atomware-notif-tooltip-business-logo-wrap {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--atomware-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.atomware-notif-tooltip-business-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}
.atomware-notif-tooltip-business-initial {
    font-size: 8px;
    font-weight: 600;
    color: var(--atomware-text-muted);
    line-height: 1;
    text-align: center;
}
.atomware-notif-tooltip-business-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atomware-notif-tooltip-title {
    font-weight: 500;
    color: var(--atomware-text-primary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atomware-notif-tooltip-msg {
    color: var(--atomware-text-secondary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atomware-notif-tooltip-link.material-icons {
    font-size: 12px !important;
    vertical-align: middle;
    color: var(--atomware-primary);
}

@media (max-width: 1024px) {
    #atomware-notif-tooltip-container .atomware-notif-tooltip {
        font-size: 10px;
        padding: 5px 7px;
    }
    .atomware-notif-tooltip-title,
    .atomware-notif-tooltip-msg,
    .atomware-notif-tooltip-text {
        font-size: 10px;
    }
    .atomware-notif-tooltip-initial {
        font-size: 9px;
    }
    .atomware-notif-tooltip-icon.material-icons {
        font-size: 12px !important;
    }
    .atomware-notif-tooltip-business-logo-wrap {
        width: 12px;
        height: 12px;
        min-width: 12px;
        min-height: 12px;
    }
    .atomware-notif-tooltip-business-initial {
        font-size: 7px;
    }
}

@media (max-width: 768px) {
    #atomware-notif-tooltip-container {
        bottom: 8px;
        right: 8px;
    }
    #atomware-notif-tooltip-container .atomware-notif-tooltip {
        font-size: 8px;
        padding: 4px 6px;
        max-width: 180px;
    }
    .atomware-notif-tooltip-title,
    .atomware-notif-tooltip-msg,
    .atomware-notif-tooltip-text {
        font-size: 8px;
    }
    .atomware-notif-tooltip-initial {
        font-size: 7px;
    }
    .atomware-notif-tooltip-icon.material-icons {
        font-size: 10px !important;
    }
    .atomware-notif-tooltip-avatar-wrap {
        width: 10px;
        height: 10px;
    }
    .atomware-notif-tooltip-business-logo-wrap {
        width: 10px;
        height: 10px;
        min-width: 10px;
        min-height: 10px;
    }
    .atomware-notif-tooltip-business-initial {
        font-size: 5px;
    }
}

/* Notifications + Settings panel text sizing */
#notifications-panel,
#notifications-panel .atomware-panel-header,
#notifications-panel .atomware-panel-content,
#notifications-panel .atomware-notification-title,
#notifications-panel .atomware-notification-message,
#notifications-panel .atomware-notification-avatar-wrap,
#notifications-panel .atomware-empty-state,
#settings-panel,
#settings-panel .atomware-panel-header,
#settings-panel .atomware-panel-content,
#settings-panel .atomware-empty-state {
    font-size: 14px;
}

#notifications-panel .atomware-panel-header,
#notifications-panel .atomware-panel-content,
#settings-panel .atomware-panel-header,
#settings-panel .atomware-panel-content {
    padding: calc(var(--atomware-spacing) + 6px);
}

#notifications-panel .atomware-panel-header h3,
#settings-panel .atomware-panel-header h3 {
    font-size: 14px;
}

#mark-all-read,
#delete-all-notifications {
    font-size: 10px;
}

#notifications-panel .atomware-notifications-panel-close {
    margin-left: 4px;
    padding: 6px 8px;
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--atomware-text-muted, #666);
    background: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
#notifications-panel .atomware-notifications-panel-close:hover {
    color: var(--atomware-text, #333);
    background: var(--atomware-bg-hover, rgba(0,0,0,0.06));
}

.atomware-panel-footer {
    padding: var(--atomware-spacing);
    border-top: 1px solid var(--atomware-border);
    flex-shrink: 0;
}

.atomware-panel-footer-purge {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

.atomware-panel-footer-purge .atomware-btn-danger {
    font-size: 11px;
    color: var(--atomware-danger, #dc3545);
}

.atomware-panel-footer-purge .atomware-btn-danger:hover {
    text-decoration: underline;
}

.atomware-settings-section-purge {
    padding-top: var(--atomware-spacing);
    border-top: 1px solid var(--atomware-border);
}

.atomware-settings-section-purge .atomware-btn-danger {
    font-size: 13px;
}

#purge-platform-modal label {
    display: block;
    margin-top: 12px;
    margin-bottom: 6px;
    font-weight: 500;
}

#purge-platform-modal #purge-confirm-input {
    width: 100%;
    max-width: 200px;
}

.atomware-text-error {
    color: var(--atomware-danger, #dc3545);
    font-size: 13px;
}

@media (max-width: 1024px) {
    #notifications-panel,
    #notifications-panel .atomware-panel-header,
    #notifications-panel .atomware-panel-content,
    #notifications-panel .atomware-notification-title,
    #notifications-panel .atomware-notification-message,
    #notifications-panel .atomware-notification-time,
    #notifications-panel .atomware-notification-avatar-wrap,
    #notifications-panel .atomware-empty-state,
    #settings-panel,
    #settings-panel .atomware-panel-header,
    #settings-panel .atomware-panel-content,
    #settings-panel .atomware-empty-state {
        font-size: 12px;
    }

    #notifications-panel .atomware-panel-header h3,
    #settings-panel .atomware-panel-header h3 {
        font-size: 12px;
    }

    #mark-all-read,
    #delete-all-notifications {
        font-size: 8px;
    }
}

@media (max-width: 768px) {
    #notifications-panel,
    #notifications-panel .atomware-panel-header,
    #notifications-panel .atomware-panel-content,
    #notifications-panel .atomware-notification-title,
    #notifications-panel .atomware-notification-message,
    #notifications-panel .atomware-notification-time,
    #notifications-panel .atomware-notification-avatar-wrap,
    #notifications-panel .atomware-empty-state,
    #settings-panel,
    #settings-panel .atomware-panel-header,
    #settings-panel .atomware-panel-content,
    #settings-panel .atomware-empty-state {
        font-size: 10px;
    }

    #notifications-panel .atomware-panel-header h3,
    #settings-panel .atomware-panel-header h3 {
        font-size: 10px;
    }

    #mark-all-read,
    #delete-all-notifications {
        font-size: 6px;
    }
}

/* Cards */
.atomware-card {
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    padding: var(--atomware-spacing);
    margin-bottom: var(--atomware-spacing);
}

.atomware-card h3,
.atomware-card h4 {
    margin-bottom: var(--atomware-spacing-sm);
    color: var(--atomware-text-primary);
}

/* Email tab */
.atomware-email-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--atomware-spacing);
    margin-bottom: var(--atomware-spacing);
    padding: 6px 0 10px;
    border-bottom: 1px solid var(--atomware-border);
}

.atomware-email-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.atomware-email-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--atomware-border);
    border-radius: 10px;
    background: var(--atomware-bg-secondary);
}

.atomware-email-search-wrap .material-icons {
    font-size: 18px;
    color: var(--atomware-text-secondary);
}

.atomware-email-search {
    min-width: 220px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.atomware-email-subtitle {
    margin: 4px 0 0;
    color: var(--atomware-text-secondary);
}

.atomware-email-actions {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
}

.atomware-email-actions .atomware-btn-primary,
.atomware-email-actions .atomware-btn-secondary {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.atomware-email-actions .atomware-btn-primary:hover,
.atomware-email-actions .atomware-btn-secondary:hover {
    transform: translateY(-1px);
}

.atomware-email-actions .atomware-btn-primary {
    background: rgba(59, 130, 246, 0.95);
    border-color: rgba(59, 130, 246, 0.95);
    color: #ffffff;
}

.atomware-email-actions .atomware-btn-secondary {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(15, 23, 42, 0.6);
    color: #e2e8f0;
}

.atomware-email-actions .atomware-btn-secondary:hover {
    background: rgba(59, 130, 246, 0.9);
    border-color: rgba(59, 130, 246, 0.9);
    color: #ffffff;
}

.atomware-email-actions .material-icons {
    font-size: 18px;
}

@media (max-width: 768px) {
    #atomware-staff-dashboard #tab-email .atomware-email-actions .atomware-email-action-btn-label {
        display: none;
    }
    #atomware-staff-dashboard #tab-email .atomware-email-actions .atomware-btn-primary,
    #atomware-staff-dashboard #tab-email .atomware-email-actions .atomware-btn-secondary {
        gap: 0;
        padding: 10px;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }
}

#atomware-email-rsvp-yes.rsvp-active,
#atomware-email-rsvp-no.rsvp-active,
#atomware-email-rsvp-maybe.rsvp-active {
    background: rgba(59, 130, 246, 0.95);
    border-color: rgba(59, 130, 246, 0.95);
    color: #ffffff;
}

.atomware-email-search {
    min-width: 220px;
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    box-shadow: inset 0 0 0 1px transparent;
}

.atomware-email-search:focus {
    outline: none;
}

.atomware-email-search-wrap:focus-within {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.atomware-email-folder {
    min-width: 140px;
}

.atomware-email-sync-status {
    font-size: 12px;
    color: var(--atomware-text-secondary);
}

.atomware-email-layout {
    display: grid;
    grid-template-columns: 320px 6px 1fr;
    gap: var(--atomware-spacing);
    flex: 1 1 auto;
    min-height: 0;
}

.atomware-email-layout.is-collapsed {
    grid-template-columns: 0 0 1fr;
}

.atomware-email-layout.is-collapsed .atomware-email-list,
.atomware-email-layout.is-collapsed .atomware-email-resize-handle {
    display: none;
}

.atomware-email-list,
.atomware-email-detail {
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    min-height: 360px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.atomware-email-list {
    max-height: none;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.atomware-email-detail {
    max-height: none;
    height: 100%;
    overflow-y: auto;
}

.atomware-email-detail .atomware-empty-state {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 12px;
}

.atomware-email-detail .atomware-empty-state .atomware-empty-icon {
    font-size: clamp(40px, 6vw, 72px);
    color: rgba(148, 163, 184, 0.8);
}

.atomware-email-list-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--atomware-spacing-sm);
    padding: 8px 12px;
    background: var(--atomware-bg-secondary);
    border-bottom: 1px solid var(--atomware-border);
    backdrop-filter: blur(8px);
    flex-wrap: wrap;
}

.atomware-email-toolbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.atomware-email-toolbar-btn {
    border: 1px solid var(--atomware-border);
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.atomware-email-toolbar-btn .material-icons {
    font-size: 18px;
}

.atomware-email-toolbar-btn:hover {
    color: var(--atomware-text-primary);
    background: var(--atomware-bg-primary);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.atomware-email-toolbar-count {
    font-size: 12px;
    color: var(--atomware-text-secondary);
    margin-left: 6px;
}

.atomware-email-toolbar-back {
    display: none !important;
}

.atomware-email-toolbar-left.bulk-active .atomware-email-toolbar-back {
    display: inline-flex !important;
}

.atomware-email-toolbar-left:not(.bulk-active) .atomware-email-toolbar-back {
    display: none !important;
}

.atomware-email-toolbar-left.bulk-active #atomware-email-toolbar-archive,
.atomware-email-toolbar-left.bulk-active #atomware-email-toolbar-delete,
.atomware-email-toolbar-left.bulk-active #atomware-email-toolbar-move {
    display: none !important;
}

.atomware-email-toolbar-left.bulk-active.bulk-action-archive #atomware-email-toolbar-archive,
.atomware-email-toolbar-left.bulk-active.bulk-action-delete #atomware-email-toolbar-delete,
.atomware-email-toolbar-left.bulk-active.bulk-action-move #atomware-email-toolbar-move {
    display: inline-flex !important;
}

.atomware-email-toolbar-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.atomware-email-toolbar-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.atomware-email-filter {
    border: 1px solid var(--atomware-border);
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-secondary);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.atomware-email-filter .material-icons {
    font-size: 14px;
}

.atomware-email-filter.active {
    background: rgba(59, 130, 246, 0.12);
    color: var(--atomware-text-primary);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.18);
}

.atomware-email-chip {
    border: 1px solid var(--atomware-border);
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-secondary);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.atomware-email-chip.active {
    background: rgba(59, 130, 246, 0.12);
    color: var(--atomware-text-primary);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.18);
}

.atomware-email-business-chip {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    padding: 4px 10px;
    border-radius: 0;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.atomware-email-business-chip.active {
    background: rgba(59, 130, 246, 0.9);
    color: #ffffff;
    border: 1px solid rgba(59, 130, 246, 0.9);
    border-radius: 10px;
}

.atomware-email-business-chip-logo {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.atomware-email-business-chip-initial {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.atomware-email-list-body {
    display: flex;
    flex-direction: column;
}

.atomware-email-sidebar-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--atomware-border);
    background: var(--atomware-bg-secondary);
}

.atomware-email-sidebar-tab {
    border: none;
    background: #0f172a;
    color: #ffffff !important;
    padding: 8px 0;
    width: 100%;
    border-radius: 0;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.atomware-email-sidebar-tab.active {
    background: rgba(59, 130, 246, 0.9) !important;
    color: #ffffff !important;
    box-shadow: none;
}

.atomware-email-sidebar-tab:hover {
    background: rgba(59, 130, 246, 0.8) !important;
    color: #ffffff !important;
}

.atomware-email-sidebar-panels {
    display: flex;
    flex-direction: column;
}

.atomware-email-sidebar-panel {
    display: none;
}

.atomware-email-sidebar-panel.is-active {
    display: block;
}

.atomware-email-folder-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    align-items: stretch;
}

.atomware-email-folder-custom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.atomware-email-folder-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.atomware-email-folder-actions {
    display: none;
    gap: 3px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 0;
}

.atomware-email-folder-item:hover .atomware-email-folder-actions {
    display: flex;
}

.atomware-email-folder-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atomware-email-folder-link {
    padding-right: 72px;
}

.atomware-email-folder-action {
    background: #0f172a;
    border: 1px solid #0f172a;
    color: #ffffff;
    border-radius: 8px;
    padding: 4px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.atomware-email-folder-action:hover {
    background: rgba(59, 130, 246, 0.9);
    border-color: rgba(59, 130, 246, 0.9);
}

.atomware-email-folder-panel {
    border: 1px solid var(--atomware-border);
    background: var(--atomware-bg-secondary);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.atomware-email-folder-panel-title {
    font-size: 12px;
    color: var(--atomware-text-secondary);
}

.atomware-email-folder-panel-actions {
    display: flex;
    gap: 6px;
}

.atomware-email-folder-create {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.atomware-email-folder-create .atomware-email-folder-create-icon {
    margin-left: auto;
    font-size: 20px;
    opacity: 0.9;
}
.atomware-email-folder-create-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-self: stretch;
}

.atomware-email-folder-create-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
}

.atomware-email-folder-input {
    width: 100%;
}

.atomware-email-client-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
    width: 100%;
    align-items: stretch;
}

.atomware-email-folder-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--atomware-text-secondary);
    margin-top: 10px;
    margin-bottom: 4px;
    padding-left: 4px;
}

.atomware-email-client-list .atomware-email-business-chip {
    flex: 1;
    min-width: 0;
    text-align: left;
    justify-content: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
}

.atomware-email-sidebar-panel[data-panel="folders"] {
    text-align: left;
}

.atomware-email-sidebar-panel[data-panel="folders"] .atomware-email-folder-link {
    width: 100%;
    text-align: left;
    justify-content: flex-start !important;
    align-self: stretch;
    color: #ffffff;
}

.atomware-email-sidebar-panel[data-panel="folders"] .atomware-email-business-chip {
    width: 100%;
    text-align: left;
    justify-content: flex-start !important;
    align-self: stretch;
    color: rgba(255, 255, 255, 0.9);
}

.atomware-email-folder-list .atomware-email-folder-link {
    width: 100%;
    text-align: left !important;
    justify-content: flex-start !important;
}

.atomware-email-sidebar-panel[data-panel="folders"] .atomware-email-business-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.atomware-email-sidebar-panel[data-panel="folders"] .atomware-email-folder-create-actions .atomware-btn-primary,
.atomware-email-sidebar-panel[data-panel="folders"] .atomware-email-folder-create-actions .atomware-btn-secondary {
    justify-content: flex-start;
}

.atomware-email-folder-link {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 0;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    align-self: stretch;
}

.atomware-email-folder-count {
    margin-left: auto;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
}

.atomware-email-muted-panel {
    border: 1px solid var(--atomware-border);
    border-radius: 10px;
    padding: 8px;
    background: var(--atomware-bg-secondary);
    color: var(--atomware-text-primary);
}

.atomware-email-muted-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 6px;
}

.atomware-email-muted-header button {
    background: #0f172a;
    border: 1px solid #0f172a;
    color: #ffffff;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.atomware-email-muted-search {
    margin-bottom: 6px;
}

.atomware-email-muted-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.atomware-email-muted-item:last-child {
    border-bottom: 0;
}

.atomware-email-muted-unmute {
    background: rgba(59, 130, 246, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.9);
    color: #ffffff;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.atomware-email-folder-list .atomware-email-folder-link:not(:last-child),
.atomware-email-folder-custom .atomware-email-folder-link:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.atomware-email-client-chip-wrap {
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.atomware-email-client-chip-wrap:last-child {
    border-bottom: none;
}
.atomware-email-chip-add-folder {
    opacity: 0;
    margin-left: auto;
    padding: 4px 6px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.atomware-email-chip-add-folder .material-icons {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}
.atomware-email-chip-add-folder:hover {
    background: rgba(255, 255, 255, 0.1);
}
.atomware-email-chip-add-folder:hover .material-icons {
    color: #ffffff;
}
.atomware-email-client-chip-wrap:hover .atomware-email-chip-add-folder {
    opacity: 1;
}

.atomware-email-client-list .atomware-email-business-chip:not(:last-child) {
    border-bottom: none;
}

.atomware-email-folder-link.active {
    background: rgba(59, 130, 246, 0.9);
    color: #ffffff;
    border: 1px solid rgba(59, 130, 246, 0.9);
    border-radius: 10px;
    box-shadow: none;
}

.atomware-email-folder-draggable {
    cursor: grab;
}
.atomware-email-folder-draggable:active {
    cursor: grabbing;
}
.atomware-email-folder-children {
    display: flex;
    flex-direction: column;
}
.atomware-email-folder-item.atomware-email-folder-depth-1 { padding-left: 24px; border-left: 2px solid var(--atomware-border, rgba(255, 255, 255, 0.15)); margin-left: 4px; }
.atomware-email-folder-item.atomware-email-folder-depth-2 { padding-left: 48px; border-left: 2px solid var(--atomware-border, rgba(255, 255, 255, 0.15)); margin-left: 4px; }
.atomware-email-folder-item.atomware-email-folder-depth-3 { padding-left: 72px; border-left: 2px solid var(--atomware-border, rgba(255, 255, 255, 0.15)); margin-left: 4px; }
.atomware-email-folder-item.atomware-email-folder-depth-4 { padding-left: 96px; border-left: 2px solid var(--atomware-border, rgba(255, 255, 255, 0.15)); margin-left: 4px; }
.atomware-email-folder-item.atomware-email-folder-depth-5 { padding-left: 120px; border-left: 2px solid var(--atomware-border, rgba(255, 255, 255, 0.15)); margin-left: 4px; }
.atomware-email-folder-item.atomware-email-folder-dragging {
    opacity: 0.5;
}
.atomware-email-folder-item.atomware-email-folder-drop-over,
.atomware-email-folder-link.atomware-email-folder-drop-over,
.atomware-email-folder-drop-target.atomware-email-folder-drop-over {
    background: rgba(59, 130, 246, 0.25);
    border-radius: 8px;
}

.atomware-email-resize-handle {
    width: 6px;
    cursor: col-resize;
    background: transparent;
    border-left: 1px solid var(--atomware-border);
    border-right: 1px solid var(--atomware-border);
    border-radius: 999px;
    justify-self: stretch;
}

.atomware-email-resize-handle:hover {
    background: var(--atomware-bg-tertiary);
}

body.atomware-resizing {
    cursor: col-resize;
    user-select: none;
}

.atomware-email-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.atomware-email-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--atomware-border);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    display: grid;
    grid-template-columns: 40px 40px 1fr auto;
    gap: 10px;
    align-items: center;
    position: relative;
}

#atomware-email-list-body:not(.show-selectors) .atomware-email-item {
    grid-template-columns: 40px 1fr auto;
}

#atomware-email-list-body:not(.show-selectors) .atomware-email-item-controls {
    display: none;
}

.atomware-email-item-avatar-wrap {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.atomware-email-item-avatar,
.atomware-email-item-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-secondary);
    font-size: 16px;
    font-weight: 600;
}

.atomware-email-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.atomware-email-item-content {
    transition: opacity 0.15s ease;
    position: relative;
    padding-right: 0;
    width: 100%;
}

.atomware-email-item-star-badge {
    position: absolute;
    top: 2px;
    right: 8px;
    font-size: 14px;
    color: #f59e0b;
    background: rgba(15, 23, 42, 0.8);
    padding: 2px 4px;
    border-radius: 6px;
    pointer-events: none;
}

.atomware-email-item.is-starred .atomware-email-item-subject {
    color: #f59e0b;
}

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

.atomware-email-item:hover {
    background: var(--atomware-bg-tertiary);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.atomware-email-item.active {
    background: rgba(59, 130, 246, 0.12);
    border-left: 3px solid rgba(59, 130, 246, 0.9);
    padding-left: 11px;
}

.atomware-email-item.unread .atomware-email-item-subject {
    font-weight: 600;
}

.atomware-email-item.unread .atomware-email-item-sender {
    font-weight: 600;
}

.atomware-email-item-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--atomware-text-secondary);
    pointer-events: auto;
}

.atomware-email-item-controls .atomware-email-select {
    pointer-events: auto;
}

#atomware-email-list-body:not(.show-selectors) .atomware-email-select {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.atomware-email-item-controls .material-icons {
    font-size: 18px;
}

.atomware-email-item-star {
    background: transparent;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    color: var(--atomware-text-secondary);
    cursor: pointer;
}

.atomware-email-item-star.is-starred {
    color: #f59e0b;
}

.atomware-email-item-star:hover {
    color: var(--atomware-text-primary);
}

.atomware-email-item-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.atomware-email-item-business {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--atomware-text-secondary);
    line-height: 1.2;
}

.atomware-email-item-business-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atomware-email-item-top,
.atomware-email-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.atomware-email-item-sender {
    color: var(--atomware-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atomware-email-item-date {
    font-size: 12px;
    color: var(--atomware-text-secondary);
    white-space: nowrap;
}

.atomware-email-item-subject {
    color: var(--atomware-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
}

.atomware-email-item-preview {
    font-size: 12px;
    color: var(--atomware-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atomware-email-item-labels {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}

.atomware-email-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    color: var(--atomware-text-secondary);
}

.atomware-email-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.atomware-email-item:hover .atomware-email-item-actions {
    opacity: 1;
    pointer-events: auto;
}

.atomware-email-item:hover .atomware-email-item-content {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

#atomware-email-list-body.show-selectors .atomware-email-item-actions {
    opacity: 0 !important;
    pointer-events: none !important;
}

#atomware-email-list-body.show-selectors .atomware-email-item:hover .atomware-email-item-content {
    opacity: 1;
}

#atomware-email-list-body.show-selectors .atomware-email-item.is-selected {
    opacity: 0.75;
}

.atomware-email-action {
    border: 1px solid #0b1324 !important;
    background: #0b1324 !important;
    color: #ffffff !important;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.atomware-email-action .material-icons {
    font-size: 16px;
    color: #ffffff !important;
}

.atomware-email-action:hover {
    color: #ffffff !important;
    background: #1552cc !important;
    border-color: #1552cc !important;
}

.atomware-email-detail-inner {
    padding: var(--atomware-spacing);
    background: var(--atomware-bg-secondary);
}

.atomware-email-detail-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--atomware-spacing);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--atomware-border);
}

.atomware-email-detail-breadcrumb {
    margin-bottom: 6px;
}

.atomware-email-back {
    background: none;
    border: 0;
    padding: 0;
    color: var(--atomware-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.atomware-email-back:hover {
    color: var(--atomware-text-primary);
}

.atomware-email-detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.atomware-email-detail-from-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.atomware-email-detail-avatar-wrap {
    flex-shrink: 0;
}

.atomware-email-detail-avatar,
.atomware-email-detail-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-secondary);
    font-size: 20px;
    font-weight: 600;
}

.atomware-email-detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.atomware-email-direction {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    color: var(--atomware-text-secondary);
}

.atomware-email-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.atomware-email-detail-actions .atomware-btn-secondary {
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
}

.atomware-email-detail-actions .atomware-email-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(15, 23, 42, 0.6);
    color: #e2e8f0;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.atomware-email-detail-actions .atomware-email-icon-btn .material-icons {
    font-size: 18px;
}

.atomware-email-detail-actions .atomware-email-icon-btn:hover {
    background: rgba(59, 130, 246, 0.95);
    border-color: rgba(59, 130, 246, 0.95);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.3);
}

.atomware-email-detail-actions .atomware-btn-secondary.is-starred {
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.35);
}

.atomware-email-detail-body {
    line-height: 1.5;
    color: var(--atomware-text-primary);
    overflow-wrap: anywhere;
    max-width: 100%;
}

.atomware-email-detail-body table {
    width: 100% !important;
    max-width: 100% !important;
}

.atomware-email-detail-body table[align],
.atomware-email-detail-body td[align] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.atomware-email-detail-body * {
    max-width: 100% !important;
}

.atomware-email-detail-body td,
.atomware-email-detail-body th {
    word-break: break-word;
}

.atomware-email-quoted {
    margin-top: var(--atomware-spacing-sm);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    background: var(--atomware-bg-secondary);
    padding: 6px 10px;
}

.atomware-email-quoted summary {
    cursor: pointer;
    color: var(--atomware-text-secondary);
    font-size: 12px;
}

.atomware-email-quoted-body {
    margin-top: 8px;
    color: var(--atomware-text-secondary);
    font-size: 13px;
}

.atomware-email-thread {
    margin-top: var(--atomware-spacing);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    background: var(--atomware-bg-secondary);
    padding: 10px;
}

.atomware-email-thread-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--atomware-text-secondary);
    margin-bottom: 8px;
}

.atomware-email-thread-item {
    padding: 8px 10px;
    border: 1px solid var(--atomware-border);
    border-radius: 10px;
    background: var(--atomware-bg-tertiary);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.atomware-email-thread-item:hover {
    background: var(--atomware-bg-secondary);
    border-color: rgba(59, 130, 246, 0.3);
}

.atomware-email-thread-item:last-child {
    margin-bottom: 0;
}

.atomware-email-thread-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--atomware-text-secondary);
}

.atomware-email-thread-direction {
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.atomware-email-thread-subject {
    font-weight: 600;
    color: var(--atomware-text-primary);
    margin-top: 4px;
}

.atomware-email-thread-from,
.atomware-email-thread-preview {
    font-size: 12px;
    color: var(--atomware-text-secondary);
    margin-top: 2px;
}

.atomware-email-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.atomware-email-inline-reply {
    margin-top: var(--atomware-spacing);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    background: var(--atomware-bg-tertiary);
}

.atomware-email-inline-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.atomware-email-inline-row .atomware-input {
    flex: 1 1 220px;
}

.atomware-email-inline-toggle {
    font-size: 12px;
    color: var(--atomware-text-secondary);
}

.atomware-email-inline-actions {
    display: flex;
    justify-content: flex-end;
}

.atomware-email-inline-reply-error {
    color: var(--atomware-danger, #ef4444);
    font-size: 12px;
}

.atomware-email-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--atomware-spacing-sm);
}

.atomware-email-attachment {
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}

.atomware-email-attachment-thumb {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
    flex: 0 0 auto;
}

.atomware-email-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--atomware-spacing);
}

#atomware-email-compose-modal textarea {
    resize: vertical;
}

.atomware-email-compose-context-text {
    font-size: 12px;
    color: var(--atomware-text-secondary);
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    border-radius: 6px;
}

/* Email recipient chips - saved vs not saved */
.atomware-email-recipient-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    min-height: 0;
}
.atomware-email-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    border-radius: 6px;
    font-size: 12px;
}
.atomware-email-recipient-chip-email {
    color: var(--atomware-text-primary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atomware-email-recipient-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.atomware-email-recipient-chip-icon .material-icons {
    font-size: 16px;
}
.atomware-email-recipient-saved {
    color: #16a34a;
}
.atomware-email-recipient-save-btn {
    padding: 2px;
    border: none;
    background: transparent;
    color: var(--atomware-text-muted, #64748b);
    cursor: pointer;
    border-radius: 4px;
}
.atomware-email-recipient-save-btn:hover {
    color: var(--atomware-primary, #6366f1);
    background: rgba(99, 102, 241, 0.1);
}

.atomware-email-attachments-preview {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.atomware-email-attachments-preview .atomware-email-attachment-pill {
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
}

#atomware-email-forward-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#atomware-email-forward-attachments label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

@media (max-width: 960px) {
    .atomware-email-layout {
        grid-template-columns: 1fr;
    }
    .atomware-email-list {
        max-height: none;
    }
}

/* Calendar drafts */
.atomware-calendar-drafts {
    margin-top: var(--atomware-spacing);
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    padding: var(--atomware-spacing);
}

.atomware-calendar-drafts {
    display: none !important;
}

.atomware-calendar-drafts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--atomware-spacing);
    margin-bottom: var(--atomware-spacing-sm);
}

.atomware-calendar-drafts-subtitle {
    color: var(--atomware-text-secondary);
    font-size: 12px;
}

.atomware-calendar-draft-item {
    padding: 10px 12px;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    background: var(--atomware-bg-tertiary);
    margin-bottom: 10px;
}

.atomware-calendar-draft-item:last-child {
    margin-bottom: 0;
}

.atomware-calendar-draft-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.atomware-calendar-draft-meta {
    font-size: 12px;
    color: var(--atomware-text-secondary);
}

.atomware-calendar-draft-actions {
    margin-top: 8px;
}

.atomware-calendar-event {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 1px 0;
    padding: 3px 6px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--atomware-text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    max-width: 100%;
    flex-wrap: wrap;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

#assigned-calendar.atomware-calendar-container .atomware-calendar-event {
    display: block;
    align-items: initial;
    gap: 0;
}

#meeting-calendar.atomware-calendar-container .atomware-calendar-event {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.atomware-calendar-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.atomware-calendar-event.is-draft {
    opacity: 0.55;
    border: 1px dashed rgba(148, 163, 184, 0.6);
    background: rgba(148, 163, 184, 0.15);
    pointer-events: none;
}

.atomware-calendar-event-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.2);
}

.atomware-calendar-event-time {
    flex-shrink: 0;
    margin-right: 4px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.95;
}

.atomware-calendar-add-event {
    margin-top: 6px;
    width: 100%;
    border: 1px dashed var(--atomware-border);
    background: transparent;
    color: var(--atomware-text-secondary);
    border-radius: 6px;
    font-size: 12px;
    padding: 4px 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.atomware-calendar-day:hover .atomware-calendar-add-event {
    opacity: 1;
}

.atomware-calendar-day.has-all-day .atomware-calendar-tasks {
    min-height: 96px;
}

.atomware-calendar-event.type-meeting {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
    border: 1px solid rgba(59, 130, 246, 0.6);
    color: #fff;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

.atomware-calendar-event.type-meeting:hover {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.atomware-calendar-event.type-leave {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.95) 0%, rgba(202, 138, 4, 0.95) 100%);
    border: 1px solid rgba(234, 179, 8, 0.6);
    color: #fff;
    box-shadow: 0 1px 3px rgba(234, 179, 8, 0.3);
}

.atomware-calendar-event.type-leave:hover {
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.4);
}

.atomware-calendar-event.type-appointment {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
    border: 1px solid rgba(16, 185, 129, 0.6);
    color: #fff;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

.atomware-calendar-event.type-appointment:hover {
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

#tab-calendar .atomware-calendar-event.is-conflict {
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5);
}

#tab-calendar .atomware-calendar-event.is-dimmed {
    opacity: 0.35;
    filter: grayscale(0.3);
}

#tab-calendar .atomware-calendar-conflict {
    display: inline-block;
    margin-right: 6px;
    background: #ef4444;
    color: #ffffff;
    border-radius: 999px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 16px;
}

/* Event modal */
#atomware-event-modal .atomware-modal-content {
    border-radius: var(--atomware-radius);
    overflow: hidden;
}

#atomware-event-modal .atomware-modal-header {
    background: var(--atomware-bg-tertiary);
    border-bottom: 1px solid var(--atomware-border);
    padding: 12px 16px;
}

#atomware-event-modal .atomware-modal-body {
    padding: 16px;
}

#atomware-event-modal .atomware-form-group label {
    font-weight: 600;
    font-size: 12px;
    color: var(--atomware-text-secondary);
    margin-bottom: 4px;
}

#atomware-event-modal .atomware-form-group {
    flex: 1 1 0;
    min-width: 0;
}

#atomware-event-modal .atomware-input,
#atomware-event-modal .atomware-select,
#atomware-event-modal textarea {
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius-sm);
}

#atomware-event-notes {
    min-height: 120px;
}

#atomware-event-modal .atomware-form-group:has(#atomware-event-notes) {
    flex-basis: 100%;
}

#atomware-event-modal .atomware-form-row {
    gap: 12px;
}

#atomware-event-modal .atomware-modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--atomware-border);
    background: var(--atomware-bg-secondary);
}

#atomware-event-modal .atomware-modal-footer .atomware-btn-danger {
    margin-right: auto;
}

#atomware-event-modal .atomware-modal-footer .atomware-btn-primary {
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.25);
}

#atomware-event-modal .atomware-modal-body .atomware-form-row {
    gap: var(--atomware-spacing);
}

#atomware-event-modal .atomware-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--atomware-spacing-sm);
}

#atomware-event-email-link-row {
    margin-top: 8px;
}

.atomware-event-email-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    padding: 6px 10px;
    border-radius: var(--atomware-radius-sm);
    color: var(--atomware-text-primary);
}

/* Meeting URL: Join Now button above input */
.atomware-event-meeting-url-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.atomware-event-meeting-url-wrap .atomware-input {
    width: 100%;
}

.atomware-event-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-weight: 600;
    flex-shrink: 0;
}

.atomware-event-join-btn .material-icons {
    font-size: 20px;
}

.atomware-event-email-link:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
}

#atomware-event-email-link {
    color: var(--atomware-text-primary);
    text-decoration: underline;
}

/* Calendar drafts polish */
.atomware-calendar-draft-item {
    transition: border-color 0.15s ease, background 0.15s ease;
}

.atomware-calendar-draft-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Count Badge */
.atomware-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-secondary);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* File List */
.atomware-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-sm);
}

.atomware-file-item {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-md);
    padding: var(--atomware-spacing-md);
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
    cursor: pointer;
    transition: background 0.2s;
}

.atomware-file-item:hover {
    background: var(--atomware-bg-tertiary);
}

.atomware-file-icon {
    font-size: 24px;
}

.atomware-file-name {
    flex: 1;
    font-weight: 500;
}

.atomware-file-size {
    color: var(--atomware-text-muted);
    font-size: 0.85rem;
}

/* Upload Zone */
.atomware-upload-zone {
    border: 2px dashed var(--atomware-border);
    border-radius: var(--atomware-radius-lg);
    padding: var(--atomware-spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.atomware-upload-zone:hover {
    border-color: var(--atomware-primary);
    background: rgba(59, 130, 246, 0.05);
}

.atomware-upload-zone .material-icons {
    font-size: 48px;
    color: var(--atomware-text-muted);
    margin-bottom: var(--atomware-spacing-md);
}

.atomware-upload-zone p {
    color: var(--atomware-text-muted);
    margin: 0;
}

#upload-progress {
    margin-top: var(--atomware-spacing-md);
}

/* Responsive */
@media (max-width: 768px) {
    .atomware-tabs {
        overflow-x: auto;
    }
    
    .atomware-panel {
        width: 100%;
        right: -100%;
    }
    
    .atomware-modal-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .atomware-form-row {
        flex-direction: column;
    }
}

/* Tasks Header & Controls */
.atomware-tasks-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.atomware-tasks-header,
.atomware-tasks-container .atomware-file-search-row,
.atomware-tasks-container #client-tasks-search-row,
.atomware-status-tabs,
.atomware-list-month-nav {
    flex-shrink: 0;
}
.atomware-task-list,
#assigned-calendar.atomware-calendar-container,
.atomware-kanban-board {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
#assigned-tasks,
#unassigned-tasks,
#client-task-list {
    contain: layout style;
}
/* Same-filter refetch: keep list visible, dim + block interaction while loading */
#assigned-tasks.atomware-tasks-list-refreshing,
#unassigned-tasks.atomware-tasks-list-refreshing,
#client-task-list.atomware-tasks-list-refreshing {
    position: relative;
    opacity: 0.9;
    pointer-events: none;
    transition: opacity 0.1s ease;
}
#tab-assigned .atomware-tasks-container.atomware-view-calendar #assigned-calendar-home {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#tab-assigned .atomware-tasks-container.atomware-view-calendar #assigned-calendar-home #assigned-calendar {
    flex: 1 1 auto;
    min-height: 0;
}
#tab-assigned .atomware-tasks-container.atomware-view-calendar #assigned-calendar-home .atomware-calendar-drafts {
    flex-shrink: 0;
}
#assigned-calendar.atomware-calendar-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#assigned-calendar.atomware-calendar-container .atomware-calendar-header {
    flex-shrink: 0;
}
/* Client portal Tasks tab - vertical scroll when content is long */
#atomware-client-portal #tab-tasks.atomware-tab-pane.active .atomware-tasks-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
#atomware-client-portal .atomware-tasks-header {
    flex-shrink: 0;
}
#atomware-client-portal .atomware-tasks-controls {
    flex: 1;
    min-width: 0;
}
#atomware-client-portal .atomware-client-tasks .atomware-tab-icon-controls {
    flex-wrap: nowrap;
    align-items: center;
}
#atomware-client-portal .atomware-client-tasks .atomware-tab-icon-controls #create-task-btn {
    flex: 0 1 auto;
    min-height: 36px;
    padding: 0 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Client My Tasks: count badges on status filter tabs (icon + number) */
#atomware-client-portal .atomware-client-tasks .atomware-status-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    min-height: 1.25rem;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    background: rgba(0, 0, 0, 0.1);
    color: inherit;
    flex-shrink: 0;
}
#atomware-client-portal .atomware-client-tasks .atomware-status-tab.active .atomware-status-count {
    background: rgba(255, 255, 255, 0.32);
    color: inherit;
}
#atomware-client-portal .atomware-client-tasks .atomware-status-tab[data-status="pending"].active .atomware-status-count {
    background: rgba(0, 0, 0, 0.15);
    color: #000;
}
/* Staff My/Team tasks: count badges on status filter tabs (same pattern as client) */
#atomware-staff-dashboard .atomware-status-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    min-height: 1.25rem;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    background: rgba(0, 0, 0, 0.1);
    color: inherit;
    flex-shrink: 0;
}
#atomware-staff-dashboard .atomware-status-tab.active .atomware-status-count {
    background: rgba(255, 255, 255, 0.32);
    color: inherit;
}
#atomware-staff-dashboard .atomware-status-tab[data-status="pending"].active .atomware-status-count {
    background: rgba(0, 0, 0, 0.15);
    color: #000;
}
#atomware-staff-dashboard #tab-assigned.active #assigned-kanban,
#atomware-client-portal .atomware-kanban-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-template-rows: 1fr;
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: var(--atomware-spacing);
    padding: var(--atomware-spacing);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#atomware-staff-dashboard .atomware-kanban-column,
#atomware-client-portal .atomware-kanban-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#atomware-staff-dashboard .atomware-kanban-column .atomware-column-header,
#atomware-client-portal .atomware-kanban-column .atomware-column-header {
    flex-shrink: 0;
}

#atomware-staff-dashboard .atomware-kanban-column .atomware-column-content,
#atomware-client-portal .atomware-kanban-column .atomware-column-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.atomware-kanban-column.drag-over {
    outline: 2px dashed var(--atomware-primary);
    background: rgba(96, 165, 250, 0.08);
}

.atomware-column-header-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.atomware-kanban-sort-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.85;
    border-radius: 4px;
}

.atomware-kanban-sort-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

.atomware-kanban-column[data-status="pending"] .atomware-kanban-sort-btn:hover,
.atomware-kanban-column[data-status="started"] .atomware-kanban-sort-btn:hover,
.atomware-kanban-column[data-status="on_hold"] .atomware-kanban-sort-btn:hover,
.atomware-kanban-column[data-status="complete"] .atomware-kanban-sort-btn:hover {
    background: rgba(0, 0, 0, 0.12);
}

.atomware-kanban-sort-btn .material-icons {
    font-size: 18px;
}

.atomware-kanban-board .atomware-task-card.dragging-touch {
    touch-action: none;
}

/* Kanban cards: use gap for spacing, remove margin-bottom to avoid double space */
#atomware-staff-dashboard .atomware-kanban-column .atomware-column-content .atomware-task-card,
#atomware-client-portal .atomware-kanban-column .atomware-column-content .atomware-task-card {
    margin-bottom: 0;
}

/* Note card styles (shared - used in notes tab and elsewhere) */
.atomware-note-card.atomware-task-card .atomware-note-widget-header-row {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    flex: 1;
    min-width: 0;
}
.atomware-note-card.atomware-task-card .atomware-note-widget-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atomware-note-card.atomware-task-card .atomware-task-card-header {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}
.atomware-note-card.atomware-task-card .atomware-note-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atomware-spacing-sm);
}
.atomware-note-excerpt {
    font-size: 0.9rem;
    color: var(--atomware-text-muted);
    margin-top: var(--atomware-spacing-sm);
    line-height: 1.4;
}
.atomware-note-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atomware-spacing-md);
    margin-bottom: var(--atomware-spacing-lg);
    padding-bottom: var(--atomware-spacing-md);
    border-bottom: 1px solid var(--atomware-border);
}
.atomware-note-detail-content {
    margin-bottom: var(--atomware-spacing-lg);
}
.atomware-note-chat-snapshot {
    margin-top: var(--atomware-spacing-lg);
    padding-top: var(--atomware-spacing-md);
    border-top: 1px solid var(--atomware-border);
}

.atomware-tasks-filters {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
}
.atomware-tasks-filters .atomware-filter-date {
    min-width: 130px;
}
.atomware-tasks-filters .atomware-filter-date-sep {
    color: var(--atomware-text-muted);
    font-size: 0.9em;
}
.atomware-tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--atomware-spacing-sm);
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--atomware-border);
}

.atomware-tasks-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.atomware-tasks-controls {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-md);
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Control Groups with Labels */
.atomware-control-group {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
}

.atomware-control-label {
    font-size: 0.85rem;
    color: var(--atomware-text-muted);
    font-weight: 500;
}

.atomware-control-separator {
    width: 1px;
    height: 32px;
    background: var(--atomware-border);
    margin: 0 var(--atomware-spacing-sm);
}

.atomware-team-filter {
    min-width: 150px;
}

/* Team member dropdown: only visible when Team Tasks is selected */
.atomware-task-scope-control[data-scope="my"] .atomware-team-filter-wrap {
    display: none !important;
}

/* My Tasks / Team Tasks Toggle */
.atomware-task-scope-toggle {
    display: flex;
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
    padding: 4px;
    gap: 4px;
}

.atomware-btn-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: var(--atomware-radius-sm);
    background: transparent;
    color: var(--atomware-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

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

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

.atomware-btn-toggle .material-icons {
    font-size: 20px;
}

/* View Toggle */
.atomware-view-toggle {
    display: flex;
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
    padding: 4px;
}

.atomware-view-toggle .atomware-btn-icon {
    padding: 8px 12px;
    border-radius: var(--atomware-radius-sm);
}

.atomware-view-toggle .atomware-btn-icon.active {
    background: var(--atomware-primary);
    color: white;
}

/* View Switch Tabs (List/Calendar) */
.atomware-view-switch {
    display: flex;
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
    padding: 4px;
    gap: 4px;
}

.atomware-view-switch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: var(--atomware-radius-sm);
    background: transparent;
    color: var(--atomware-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.atomware-view-switch-btn:hover {
    color: var(--atomware-text-primary);
    background: var(--atomware-bg-tertiary);
}

.atomware-view-switch-btn.active {
    background: var(--atomware-primary);
    color: white;
}

.atomware-view-switch-btn .material-icons {
    font-size: 20px;
}

/* Status Filter Tabs */
.atomware-status-tabs {
    display: flex;
    gap: var(--atomware-spacing-sm);
    padding: 4px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--atomware-border);
    overflow-x: auto;
    overflow-y: hidden;
}

.atomware-status-tab {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

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

.atomware-status-tab.active {
    background: var(--atomware-primary);
    color: white;
}

.atomware-status-tab[data-status="pending"].active {
    background: var(--atomware-warning);
    color: #000;
}

.atomware-status-tab[data-status="started"].active {
    background: var(--atomware-primary);
    color: white;
}

.atomware-status-tab[data-status="on_hold"].active {
    background: var(--atomware-secondary);
    color: white;
}

.atomware-status-tab[data-status="complete"].active {
    background: var(--atomware-success);
    color: white;
}

/* Task File Upload Zone */
.atomware-file-upload-zone {
    position: relative;
    border: 2px dashed var(--atomware-border);
    border-radius: var(--atomware-radius);
    padding: var(--atomware-spacing-lg);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--atomware-bg-secondary);
}

.atomware-file-upload-zone:hover,
.atomware-file-upload-zone.dragover {
    border-color: var(--atomware-primary);
    background: rgba(59, 130, 246, 0.05);
}

.atomware-file-upload-zone .atomware-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.atomware-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    color: var(--atomware-text-muted);
}

.atomware-upload-placeholder .material-icons {
    font-size: 36px;
    color: var(--atomware-primary);
}

.atomware-upload-placeholder small {
    font-size: 0.8rem;
    opacity: 0.7;
}

.atomware-upload-zone-sm {
    padding: var(--atomware-spacing);
    min-height: 80px;
}
.atomware-upload-zone-sm .atomware-upload-placeholder {
    font-size: 0.85rem;
}
.atomware-upload-zone-sm .atomware-upload-placeholder small {
    display: block;
    margin-top: 4px;
}

.atomware-logo-upload-sm {
    padding: var(--atomware-spacing);
    display: inline-flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
}
.atomware-logo-upload-sm .material-icons {
    font-size: 24px;
}

/* Attached Files List */
.atomware-attached-files {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-sm);
    margin-top: var(--atomware-spacing-md);
}

.atomware-attached-files:empty {
    display: none;
}

.atomware-attached-file {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    padding: var(--atomware-spacing-sm) var(--atomware-spacing-md);
    background: var(--atomware-bg-tertiary);
    border-radius: var(--atomware-radius-sm);
}

.atomware-attached-file .material-icons {
    font-size: 18px;
    color: var(--atomware-text-muted);
}

.atomware-attached-file .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

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

.atomware-attached-file .remove-file {
    background: none;
    border: none;
    color: var(--atomware-danger);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--atomware-radius-sm);
}

.atomware-attached-file .remove-file:hover {
    background: rgba(239, 68, 68, 0.1);
}

.atomware-attached-file-from-drive .atomware-file-source-label {
    font-size: 0.75rem;
    color: var(--atomware-text-muted);
    background: var(--atomware-bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Task Filters */
.atomware-filters {
    display: flex;
    gap: 2px !important;
    width: 100%;
    box-sizing: border-box;
}

.atomware-filters > * {
    flex: 1 1 0;
    min-width: 0 !important;
    width: 100% !important;
}

.atomware-filters .atomware-select {
    min-width: 0 !important;
    width: 100% !important;
}

/* Task List - Full Width */
.atomware-task-list {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-sm);
    width: 100%;
    padding: var(--atomware-spacing-sm) 0;
    margin-top: var(--atomware-spacing-md);
}

/* Calendar View for Tasks - flat, flush, no border-radius or padding for maximum space */
.atomware-calendar-container {
    width: 100%;
    background: var(--atomware-bg-secondary);
    border-radius: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#tab-calendar .atomware-calendar-container {
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    padding: var(--atomware-spacing-sm);
    background: var(--atomware-bg-secondary);
}

#tab-calendar .atomware-calendar-header {
    padding: 8px 12px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: var(--atomware-radius);
    margin-bottom: var(--atomware-spacing-sm);
    background: rgba(59, 130, 246, 0.12);
}

#tab-calendar .atomware-calendar-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 12px;
    color: var(--atomware-text-primary);
}

#tab-calendar .atomware-calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#tab-calendar .atomware-calendar-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

#tab-calendar .atomware-calendar-header h4 {
    color: var(--atomware-text-primary);
    font-weight: 600;
}

#tab-calendar .atomware-calendar-nav button,
#tab-calendar .atomware-calendar-view-mode-btn,
#tab-calendar .atomware-calendar-weekends-btn {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

#tab-calendar .atomware-calendar-nav button:hover,
#tab-calendar .atomware-calendar-view-mode-btn.active,
#tab-calendar .atomware-calendar-weekends-btn.active {
    background: rgba(59, 130, 246, 0.9);
    border-color: rgba(59, 130, 246, 0.9);
    color: #ffffff;
}

#tab-calendar .atomware-calendar-grid {
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    overflow: hidden;
}

.atomware-meetings-layout {
    display: flex;
    gap: var(--atomware-spacing);
    align-items: stretch;
}

#meeting-calendar-host {
    flex: 1 1 auto;
    min-height: 0;
}

#meeting-calendar-summary {
    display: none !important;
}

#tab-calendar #meeting-calendar-host {
    height: 100%;
}

#tab-calendar {
    height: 100%;
}

#tab-calendar .atomware-meetings-layout {
    height: calc(100vh - 180px);
    min-height: 0;
}

#tab-calendar .atomware-meetings-layout {
    min-height: calc(100vh - 200px);
}

#tab-calendar #meeting-calendar-host {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

#tab-calendar #meeting-calendar-host .atomware-calendar-container {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#meeting-calendar.atomware-calendar-container .atomware-calendar-grid {
    flex: 1;
    min-height: 0;
    grid-template-rows: auto;
    grid-auto-rows: minmax(0, 1fr);
}
#meeting-calendar.atomware-calendar-container .atomware-calendar-month .atomware-calendar-day-header {
    padding: 4px 6px;
    font-size: 10px;
    flex-shrink: 0;
}

/* Meeting calendar month view: allow scroll inside day blocks when many events */
#meeting-calendar.atomware-calendar-container .atomware-calendar-month .atomware-calendar-day {
    min-height: 0;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#meeting-calendar .atomware-calendar-day .atomware-calendar-tasks {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

#tab-calendar #meeting-calendar-host .atomware-calendar-drafts {
    flex-shrink: 0;
}

.atomware-meetings-summary {
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    background: var(--atomware-bg-secondary);
    padding: 10px;
    min-height: 120px;
}

.atomware-meetings-summary h4 {
    margin: 0 0 8px;
    font-size: 13px;
}

.atomware-meetings-summary .atomware-empty-state {
    padding: 8px 0;
}

.atomware-meetings-conflict-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--atomware-border);
    font-size: 12px;
}

.atomware-meetings-conflict-item:last-child {
    border-bottom: 0;
}

.atomware-meetings-summary .atomware-btn-secondary {
    margin-top: 8px;
}

.atomware-event-rsvp {
    padding: 6px 10px;
    border: 1px solid var(--atomware-border);
    border-radius: 10px;
    background: var(--atomware-bg-tertiary);
    font-size: 12px;
}

.atomware-event-email-preview {
    border: 1px solid var(--atomware-border);
    border-radius: 10px;
    background: var(--atomware-bg-tertiary);
    padding: 8px 10px;
    cursor: pointer;
}

.atomware-event-email-preview:hover {
    border-color: rgba(59, 130, 246, 0.6);
}

#atomware-event-modal .atomware-select,
#atomware-event-modal .atomware-select-xs {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--atomware-bg-tertiary);
    color: var(--atomware-text-primary);
    border: 1px solid var(--atomware-border);
    border-radius: 10px;
    padding-right: 28px;
    background-image: linear-gradient(45deg, transparent 50%, rgba(148, 163, 184, 0.9) 50%),
        linear-gradient(135deg, rgba(148, 163, 184, 0.9) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

#tab-calendar .atomware-select,
#tab-calendar .atomware-select-xs,
#assigned-calendar .atomware-select,
#assigned-calendar .atomware-select-xs {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--atomware-bg-tertiary);
    color: var(--atomware-text-primary);
    border: 1px solid var(--atomware-border);
    border-radius: 10px;
    padding-right: 28px;
    background-image: linear-gradient(45deg, transparent 50%, rgba(148, 163, 184, 0.9) 50%),
        linear-gradient(135deg, rgba(148, 163, 184, 0.9) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

#tab-calendar .atomware-select:focus,
#tab-calendar .atomware-select-xs:focus,
#assigned-calendar .atomware-select:focus,
#assigned-calendar .atomware-select-xs:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#atomware-event-modal .atomware-select:focus,
#atomware-event-modal .atomware-select-xs:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.atomware-event-email-subject {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.atomware-event-email-snippet {
    font-size: 12px;
    color: var(--atomware-text-secondary);
}

.atomware-event-repeat-options {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--atomware-border);
    border-radius: 10px;
    background: var(--atomware-bg-tertiary);
}

.atomware-event-repeat-interval {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 8px;
}

.atomware-event-repeat-unit {
    color: var(--atomware-text-secondary);
    font-size: 12px;
}

.atomware-event-repeat-hint {
    color: var(--atomware-text-secondary);
    font-size: 12px;
}

.atomware-event-reminder-custom {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.atomware-calendar-all-day {
    min-height: 22px;
    padding: 4px 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    margin-bottom: 4px;
}

.atomware-calendar-all-day .atomware-calendar-event {
    opacity: 0.95;
}

.atomware-event-rsvp-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin: 2px 4px 2px 0;
    border: 1px solid transparent;
    line-height: 1;
}

.atomware-event-rsvp-badge.accepted {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.6);
    color: #10b981;
}

.atomware-event-rsvp-badge.declined {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.6);
    color: #ef4444;
}

.atomware-event-rsvp-badge.maybe {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.6);
    color: #f59e0b;
}

.atomware-event-repeat-weekly,
.atomware-event-repeat-monthly {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.atomware-event-repeat-label {
    font-size: 12px;
    color: var(--atomware-text-secondary);
    margin-right: 6px;
}

.atomware-event-repeat-day {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.atomware-event-repeat-monthly-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.atomware-task-timer-inline {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid var(--atomware-border);
    border-radius: 999px;
    background: var(--atomware-bg-tertiary);
    font-size: 12px;
    color: var(--atomware-text-primary);
    margin-left: 6px;
}

.atomware-task-timer-with-adjust {
    gap: 8px;
}

.atomware-task-timer-with-adjust .atomware-btn-link {
    padding: 0 4px;
    font-size: 12px;
    min-height: auto;
}

.atomware-task-timer-captured {
    gap: 4px;
}

.atomware-task-timer-captured .material-icons {
    font-size: 14px;
}

.atomware-task-running-other {
    gap: 4px;
    color: var(--atomware-text-muted);
}

.atomware-task-running-other .material-icons {
    font-size: 14px;
    color: var(--atomware-danger, #dc3545);
}

.atomware-input-xs {
    width: 70px;
    padding: 6px 8px;
    font-size: 12px;
}

.atomware-select-xs {
    padding: 6px 8px;
    font-size: 12px;
}

.atomware-meetings-conflict-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.atomware-meetings-conflict-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.6);
    background: rgba(59, 130, 246, 0.12);
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
}

.atomware-meetings-conflict-jump.active {
    background: rgba(59, 130, 246, 0.9);
    border-color: rgba(59, 130, 246, 0.9);
}

#tab-calendar .atomware-calendar-day-header {
    background: rgba(59, 130, 246, 0.12);
    color: var(--atomware-text-primary);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

#tab-calendar .atomware-calendar-day {
    border-color: rgba(59, 130, 246, 0.08);
}

#tab-calendar .atomware-calendar-day.today {
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* List View Month Navigation */
.atomware-list-month-nav {
    margin-bottom: var(--atomware-spacing-md);
    margin-top: var(--atomware-spacing-sm);
    border-radius: var(--atomware-radius);
    overflow: hidden;
    width: 100%;
}

.atomware-list-month-nav .atomware-calendar-header {
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    width: 100%;
}

.atomware-list-month-nav .atomware-calendar-header h4 {
    font-size: 1.25rem;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.atomware-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin-bottom: 0;
    background: var(--atomware-bg-tertiary);
}

.atomware-calendar-header h4 {
    margin: 0;
    font-size: 1rem;
}

.atomware-calendar-nav {
    display: flex;
    gap: var(--atomware-spacing-sm);
}

.atomware-calendar-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    color: var(--atomware-text-primary);
    padding: 4px 10px;
    border-radius: var(--atomware-radius-sm);
    cursor: pointer;
}

.atomware-calendar-nav button:hover {
    background: var(--atomware-primary);
    border-color: var(--atomware-primary);
}

.atomware-calendar-view-switch {
    display: flex;
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius-sm);
    padding: 2px;
    gap: 2px;
}

.atomware-calendar-view-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--atomware-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.atomware-calendar-view-mode-btn:hover {
    color: var(--atomware-text-primary);
    background: var(--atomware-bg-tertiary);
}

.atomware-calendar-view-mode-btn.active {
    background: var(--atomware-primary);
    color: white;
}

.atomware-calendar-view-mode-btn .material-icons {
    font-size: 18px;
}

/* Task Pool (unassigned) controls - sort, search, fullscreen */
.atomware-unassigned-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.atomware-unassigned-controls .atomware-calendar-view-mode-btn,
.atomware-unassigned-controls .atomware-unassigned-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--atomware-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.atomware-unassigned-controls .atomware-calendar-view-mode-btn:hover,
.atomware-unassigned-controls .atomware-unassigned-icon-btn:hover {
    color: var(--atomware-text-primary);
    background: var(--atomware-bg-tertiary);
}

.atomware-unassigned-controls .atomware-sort-order-btn.active {
    background: var(--atomware-primary);
    color: white;
}

.atomware-unassigned-controls .atomware-sort-order-btn .material-icons,
.atomware-unassigned-controls .atomware-unassigned-icon-btn .material-icons {
    font-size: 20px;
}

/* Shared search/fullscreen icon styling - same as Task Pool (all tabs) */
.atomware-tab-icon-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.atomware-tab-icon-controls .atomware-tab-icon-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: none;
    border-radius: 6px;
    background: transparent !important;
    color: var(--atomware-text-muted) !important;
    cursor: pointer;
    transition: all 0.2s;
}

.atomware-tab-icon-controls .atomware-tab-icon-btn:hover {
    color: var(--atomware-text-primary) !important;
    background: var(--atomware-bg-tertiary) !important;
}

.atomware-tab-icon-controls .atomware-tab-icon-btn .material-icons {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    color: inherit !important;
}

/* Calendar month/week slide - fluid, continuous timeline feel */
.atomware-calendar-slide-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--atomware-bg-primary);
    touch-action: pan-x pan-y;
}
.atomware-calendar-slide-track {
    display: flex;
    width: 200%;
    height: 100%;
    will-change: transform;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.atomware-calendar-slide-track-vertical {
    flex-direction: column;
    width: 100%;
    height: 200%;
}
.atomware-calendar-slide-track-vertical .atomware-calendar-slide-pane {
    flex: 0 0 50%;
    width: 100%;
    height: 50%;
    min-height: 0;
}
.atomware-calendar-slide-pane {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--atomware-bg-primary);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.atomware-calendar-slide-pane .atomware-calendar-grid {
    flex: 1;
    min-height: 0;
}
.atomware-calendar-slide-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.atomware-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--atomware-border);
}
.atomware-calendar-grid.weekdays-only {
    grid-template-columns: repeat(5, 1fr);
}
.atomware-calendar-weekends-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    color: var(--atomware-text-primary);
    border-radius: var(--atomware-radius-sm);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}
.atomware-calendar-weekends-btn:hover {
    background: var(--atomware-primary);
    border-color: var(--atomware-primary);
    color: #fff;
}
.atomware-calendar-weekends-btn.active {
    background: var(--atomware-primary);
    border-color: var(--atomware-primary);
    color: #fff;
}
.atomware-calendar-weekends-btn .material-icons {
    font-size: 16px;
}

/* Month view - stretch to fill viewport, no grey block at bottom */
#assigned-calendar.atomware-calendar-container .atomware-calendar-month.atomware-calendar-grid {
    flex: 1;
    min-height: 0;
    grid-template-rows: auto;
    grid-auto-rows: minmax(0, 1fr);
}
#assigned-calendar.atomware-calendar-container .atomware-calendar-month .atomware-calendar-day {
    min-height: 0;
    max-height: none;
}

.atomware-calendar-week.atomware-calendar-grid {
    grid-template-rows: auto 1fr;
    flex: 1;
    min-height: 0;
}

/* Staff Dashboard → Task → Full Calendar: day-of-week labels (Mon, Tue, etc.) - same light blue as active tabs */
.atomware-calendar-day-header,
#assigned-calendar .atomware-calendar-day-header,
#unassigned-calendar .atomware-calendar-day-header {
    padding: 5px 8px !important;
    text-align: center;
    font-weight: 600;
    font-size: 10px !important;
    line-height: 1.2;
    color: #fff;
    background: var(--atomware-primary);
}

.atomware-calendar-day {
    min-height: 100px;
    max-height: 150px;
    padding: 4px var(--atomware-spacing-sm);
    background: var(--atomware-bg-primary);
    vertical-align: top;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    flex-direction: column;
}

/* Month/week view: reduce day card padding by ~65% so task chips stretch more */
#assigned-calendar .atomware-calendar-month .atomware-calendar-day,
#assigned-calendar .atomware-calendar-week .atomware-calendar-day {
    padding: 1px 3px;
}
#assigned-calendar .atomware-calendar-day .atomware-calendar-date {
    margin-bottom: 3px;
}
#assigned-calendar .atomware-calendar-day .atomware-calendar-tasks {
    gap: 5px;
}
#assigned-calendar .atomware-calendar-day .atomware-calendar-task {
    padding: 3px;
}

.atomware-calendar-day:not(.other-month):hover {
    background: var(--atomware-bg-tertiary);
}

.atomware-calendar-day.other-month {
    background: var(--atomware-bg-secondary);
    opacity: 0.5;
    cursor: default;
}

/* Subtle month differentiation: prev/current/next each get a distinct tint */
.atomware-calendar-day.month-prev.other-month {
    background: var(--atomware-bg-secondary);
    box-shadow: inset 0 0 0 999px rgba(59, 130, 246, 0.05);
}
.atomware-calendar-day.month-current {
    box-shadow: inset 0 0 0 999px rgba(59, 130, 246, 0.025);
}
.atomware-calendar-day.month-next.other-month {
    background: var(--atomware-bg-secondary);
    box-shadow: inset 0 0 0 999px rgba(251, 191, 36, 0.05);
}

.atomware-calendar-week .atomware-calendar-day {
    min-height: 0;
    max-height: none;
    flex: 1;
}

.atomware-calendar-day.today {
    background: rgba(59, 130, 246, 0.1);
}

.atomware-calendar-date {
    font-weight: 600;
    margin-bottom: var(--atomware-spacing-sm);
    font-size: 10px;
    line-height: 1.2;
    flex: 0 0 auto;
}

/* Full Calendar View - responsive day header (Staff Dashboard → Task) */
@media (max-width: 768px) {
    .atomware-calendar-day-header,
    #assigned-calendar .atomware-calendar-day-header,
    #unassigned-calendar .atomware-calendar-day-header {
        font-size: 18px !important;
        padding: 5px 6px !important;
    }
    .atomware-calendar-date {
        font-size: 8px;
    }
}
@media (max-width: 480px) {
    .atomware-calendar-day-header,
    #assigned-calendar .atomware-calendar-day-header,
    #unassigned-calendar .atomware-calendar-day-header {
        font-size: 6px !important;
        padding: 5px 4px !important;
    }
    .atomware-calendar-date {
        font-size: 6px;
    }
}

/* Calendar grid responsive - prevent overflow and keep alignment */
#assigned-calendar.atomware-calendar-container .atomware-calendar-grid,
#unassigned-calendar.atomware-calendar-container .atomware-calendar-grid {
    min-width: 0;
}
#assigned-calendar .atomware-calendar-day-header,
#assigned-calendar .atomware-calendar-day,
#unassigned-calendar .atomware-calendar-day-header,
#unassigned-calendar .atomware-calendar-day {
    min-width: 0;
}

.atomware-calendar-tasks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain; /* prevent scroll chaining to calendar month nav when at top/bottom */
    touch-action: pan-y; /* ensure vertical scroll is captured, not passed to parent */
    -webkit-overflow-scrolling: touch;
}

.atomware-calendar-tasks::-webkit-scrollbar {
    width: 4px;
}

.atomware-calendar-tasks::-webkit-scrollbar-track {
    background: transparent;
}

.atomware-calendar-tasks::-webkit-scrollbar-thumb {
    background: var(--atomware-border);
    border-radius: 2px;
}

.atomware-calendar-task {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--atomware-primary);
    color: white;
    border-radius: 3px;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    flex: 0 0 auto;
}

.atomware-calendar-task-logo-wrap {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.atomware-calendar-task-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.atomware-calendar-task-color-dot {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

/* Calendar task logo - hover = green (complete action), click completes task */
.atomware-calendar-task-business {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 50%;
}
.atomware-calendar-task:not(.status-complete) .atomware-calendar-task-business:hover .atomware-calendar-task-logo-wrap,
.atomware-calendar-task:not(.status-complete) .atomware-calendar-task-business:hover .atomware-calendar-task-logo,
.atomware-calendar-task:not(.status-complete) .atomware-calendar-task-business:hover .atomware-calendar-task-color-dot {
    box-shadow: 0 0 0 2px var(--atomware-success, #34d399);
    transition: box-shadow 0.2s ease;
}
.atomware-calendar-task-business .atomware-calendar-task-logo-wrap,
.atomware-calendar-task-business .atomware-calendar-task-logo,
.atomware-calendar-task-business .atomware-calendar-task-color-dot {
    transition: box-shadow 0.2s ease;
}
.atomware-calendar-task.status-complete .atomware-calendar-task-business {
    cursor: default;
}
.atomware-calendar-task.status-complete .atomware-calendar-task-business:hover .atomware-calendar-task-logo-wrap,
.atomware-calendar-task.status-complete .atomware-calendar-task-business:hover .atomware-calendar-task-logo,
.atomware-calendar-task.status-complete .atomware-calendar-task-business:hover .atomware-calendar-task-color-dot {
    box-shadow: none;
}

.atomware-calendar-task-title {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.atomware-calendar-task-assignee-wrap {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}
.atomware-calendar-task-assignee {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.atomware-calendar-task-assignee-initial {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 600;
    background: rgba(255,255,255,0.4);
    color: inherit;
    flex-shrink: 0;
    overflow: hidden;
}

.atomware-calendar-task:active {
    cursor: grabbing;
}

.atomware-calendar-task.dragging {
    opacity: 0.3;
}

.atomware-calendar-task.drag-clone {
    background: var(--atomware-primary);
    color: white;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.atomware-calendar-day.drag-over {
    background: rgba(66, 133, 244, 0.2) !important;
    outline: 2px dashed var(--atomware-primary);
    outline-offset: -2px;
}

.atomware-calendar-task.priority-high,
.atomware-calendar-task.high {
    background: var(--atomware-danger);
}

.atomware-calendar-task.priority-normal,
.atomware-calendar-task.normal {
    background: var(--atomware-warning);
    color: #000;
}

.atomware-calendar-task.priority-low,
.atomware-calendar-task.low {
    background: var(--atomware-secondary);
}

/* Drop insertion indicator */
.atomware-calendar-task.drop-above::before,
.atomware-calendar-task.drop-below::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--atomware-primary);
    border-radius: 2px;
}

.atomware-calendar-task.drop-above::before {
    top: -3px;
}

.atomware-calendar-task.drop-below::after {
    bottom: -3px;
}

.atomware-calendar-task {
    position: relative;
}

/* Single column on smaller screens */
@media (max-width: 800px) {
    .atomware-task-list {
        grid-template-columns: 1fr;
    }
}

/* Make task cards stretch in grid */
.atomware-task-card {
    width: 100%;
}

/* Files Container - Full Width */
.atomware-files-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.atomware-file-manager {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Chats tab - main only (no second sidebar; Filter by Client is in left sidebar) */
.atomware-chats-container.atomware-chats-no-sidebar .atomware-chat-main {
    width: 100%;
}
.atomware-chats-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 0;
    /* flex + stretch, not height:100% — %-height often collapses when the parent’s height is
       implicit, so the chats block stays short and sits with empty space above in #tab-chats. */
    flex: 1 1 0%;
    align-self: stretch;
    gap: 0;
}
.atomware-chats-sidebar {
    width: 260px;
    min-width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-sm);
    padding: var(--atomware-spacing-sm) 0;
    border-right: 1px solid var(--atomware-border);
}
.atomware-chats-sidebar h4 {
    margin: 0 0 var(--atomware-spacing-sm) 0;
    padding: 0 var(--atomware-spacing-sm);
    font-size: 0.9rem;
}
#chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.atomware-chat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.atomware-group-chat-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.atomware-group-chat-content .atomware-chat-header,
.atomware-group-chat-content .atomware-group-chat-header {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--atomware-spacing-sm) var(--atomware-spacing);
    padding: var(--atomware-spacing-sm) var(--atomware-spacing);
}
.atomware-group-chat-content .atomware-group-chat-header h3,
.atomware-group-chat-content .atomware-group-chat-header #group-chat-title {
    margin: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atomware-group-chat-content .atomware-group-chat-actions {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    flex-shrink: 0;
}
.atomware-group-chat-content .atomware-chat-search {
    flex-shrink: 0;
    display: none;
    align-items: center;
    padding: var(--atomware-spacing-sm) var(--atomware-spacing);
    background: var(--atomware-bg-tertiary);
    border-bottom: 1px solid var(--atomware-border);
    position: relative;
}
.atomware-group-chat-content .atomware-chat-search.is-visible {
    display: flex;
}
.atomware-tab-icon-controls .atomware-tab-icon-btn.atomware-chat-search-toggle.active {
    color: var(--atomware-primary) !important;
}
.atomware-chat-search-toggle.active .material-icons {
    color: var(--atomware-primary) !important;
}
.atomware-group-chat-content .atomware-chat-search .atomware-chat-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--atomware-text-muted);
    pointer-events: none;
}
.atomware-group-chat-content .atomware-chat-search .atomware-input,
.atomware-group-chat-content .atomware-chat-search #group-chat-search {
    flex: 1;
    padding: 10px 32px 10px 44px;
    font-size: 0.9rem;
    min-width: 0;
}
.atomware-group-chat-content .atomware-chat-search .atomware-chat-search-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: var(--atomware-text-muted);
    background: none;
    border: none;
    cursor: pointer;
}
.atomware-group-chat-content #chat-messages,
.atomware-group-chat-content .atomware-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.atomware-group-chat-content .atomware-chat-input,
.atomware-group-chat-content .atomware-team-chat-input {
    flex-shrink: 0;
}

/* Client portal chat: search stays at top, message bar at bottom (portal is fixed, no scroll) */
.atomware-client-chat .atomware-chat-search {
    flex-shrink: 0;
}
.atomware-client-chat .atomware-chat-input,
.atomware-client-chat .atomware-team-chat-input {
    flex-shrink: 0;
}
.atomware-client-chat .atomware-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.atomware-chats-sidebar-client {
    padding: var(--atomware-spacing-sm);
}
.atomware-chats-sidebar-hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--atomware-text-muted);
    line-height: 1.4;
}
.atomware-chats-sidebar-active {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    padding: var(--atomware-spacing-sm);
    background: var(--atomware-bg-tertiary);
    border-radius: var(--atomware-radius);
    font-weight: 500;
}
.atomware-chats-sidebar-active .material-icons {
    font-size: 20px;
    color: var(--atomware-primary);
}

.atomware-drive-header {
    gap: var(--atomware-spacing-sm);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .atomware-drive-header {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: var(--atomware-spacing-sm) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .atomware-drive-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--atomware-spacing-sm) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
    }
}

.atomware-file-browser {
    width: 100%;
}

/* File Folder Grid View */
.atomware-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--atomware-spacing-md);
    padding: var(--atomware-spacing-md);
}

.atomware-folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--atomware-spacing-md);
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.atomware-folder-item:hover {
    background: var(--atomware-bg-tertiary);
    transform: translateY(-2px);
}

.atomware-folder-item .folder-icon {
    font-size: 48px;
    color: var(--atomware-warning);
    margin-bottom: var(--atomware-spacing-sm);
}

.atomware-folder-item .file-icon {
    font-size: 48px;
    color: var(--atomware-text-muted);
    margin-bottom: var(--atomware-spacing-sm);
}

.atomware-folder-item.file .file-icon.pdf {
    color: #ef4444;
}

.atomware-folder-item.file .file-icon.doc {
    color: #1552cc;
}

.atomware-folder-item.file .file-icon.image {
    color: #10b981;
}

.atomware-folder-item .folder-name {
    font-size: 0.85rem;
    color: var(--atomware-text-primary);
    word-break: break-word;
    max-width: 100%;
}

.atomware-folder-item .folder-meta {
    font-size: 0.75rem;
    color: var(--atomware-text-muted);
    margin-top: 4px;
}

/* Date Picker Styles */
input[type="date"] {
    position: relative;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
    cursor: pointer;
}

input[type="date"]::before {
    content: attr(data-placeholder);
    color: var(--atomware-text-muted);
}

input[type="date"]:focus::before,
input[type="date"]:valid::before {
    content: '';
}

/* Task Detail Modal — typography matches #task-modal (Create Task): 14px body/labels/inputs; no mobile shrink */
#task-detail-modal,
#task-detail-modal .atomware-modal-header,
#task-detail-modal .atomware-modal-body {
    font-size: 14px;
}
#task-detail-modal h3,
#task-detail-modal h4,
#task-detail-modal h5,
#task-detail-modal .atomware-modal-header h3 {
    font-size: 14px !important;
}
#task-detail-modal label,
#task-detail-modal .atomware-form-group label,
#task-detail-modal .atomware-detail-item label {
    font-size: 14px !important;
}
#task-detail-modal input,
#task-detail-modal select,
#task-detail-modal textarea,
#task-detail-modal .atomware-input,
#task-detail-modal .atomware-select,
#task-detail-modal .atomware-textarea {
    font-size: 14px !important;
}
#task-detail-modal .atomware-detail-item span,
#task-detail-modal .atomware-task-description-content,
#task-detail-modal .atomware-status-badge,
#task-detail-modal .atomware-task-edit-form,
#task-detail-modal .atomware-task-edit-form * {
    font-size: inherit;
}
#task-detail-modal .atomware-input-sm {
    font-size: 14px !important;
}
#task-detail-modal .atomware-wysiwyg-editor,
#task-detail-modal .atomware-wysiwyg-editor .ql-editor,
#task-detail-modal .atomware-task-description-content,
#task-detail-modal .atomware-task-description p {
    font-size: 14px !important;
}
/* Task detail WYSIWYG - resizable by dragging bottom handle */
#task-detail-modal .atomware-wysiwyg-editor-wrap {
    position: relative;
    min-height: 180px;
}
#task-detail-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor {
    display: flex;
    flex-direction: column;
    min-height: 180px;
    height: 100%;
}
#task-detail-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor .ql-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#task-detail-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor .ql-editor {
    flex: 1;
    min-height: 100px;
}
#task-detail-modal .atomware-wysiwyg-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    cursor: ns-resize;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
#task-detail-modal .atomware-wysiwyg-resize-handle::after {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--atomware-text-muted, rgba(0, 0, 0, 0.3));
}
#task-detail-modal .atomware-wysiwyg-resize-handle:hover::after {
    background: var(--atomware-primary, #6366f1);
}

#task-modal .atomware-wysiwyg-editor-wrap,
#create-task-from-chat-modal .atomware-wysiwyg-editor-wrap {
    position: relative;
    min-height: 180px;
}
#task-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor,
#create-task-from-chat-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor {
    display: flex;
    flex-direction: column;
    min-height: 180px;
    height: 100%;
}
#task-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor .ql-container,
#create-task-from-chat-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor .ql-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#task-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor .ql-editor,
#create-task-from-chat-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor .ql-editor,
.atomware-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor .ql-editor {
    flex: 1;
    min-height: 100px;
}
#task-modal .atomware-wysiwyg-resize-handle,
#create-task-from-chat-modal .atomware-wysiwyg-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    cursor: ns-resize;
    z-index: 2;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
#task-modal .atomware-wysiwyg-resize-handle::after,
#create-task-from-chat-modal .atomware-wysiwyg-resize-handle::after {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--atomware-text-muted, rgba(0, 0, 0, 0.3));
}
#task-modal .atomware-wysiwyg-resize-handle:hover::after,
#create-task-from-chat-modal .atomware-wysiwyg-resize-handle:hover::after {
    background: var(--atomware-primary, #6366f1);
}

/* All modals with WYSIWYG: resizable (toolbar/dropdown styling is global in dark-theme.css) */
.atomware-modal .atomware-wysiwyg-editor-wrap {
    position: relative;
    min-height: 180px;
}
.atomware-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor {
    display: flex;
    flex-direction: column;
    min-height: 180px;
    height: 100%;
}
.atomware-modal .atomware-wysiwyg-editor-wrap .atomware-wysiwyg-editor .ql-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.atomware-modal .atomware-wysiwyg-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    cursor: ns-resize;
    z-index: 2;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.atomware-modal .atomware-wysiwyg-resize-handle::after {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--atomware-text-muted, rgba(0, 0, 0, 0.3));
}
.atomware-modal .atomware-wysiwyg-resize-handle:hover::after {
    background: var(--atomware-primary, #6366f1);
}

/* Note / modal Quill toolbar: scroll horizontally on narrow widths instead of cramped wrap */
.atomware-wysiwyg-editor-wrap .ql-toolbar.ql-snow {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px;
    gap: 4px;
}
.atomware-wysiwyg-editor-wrap .ql-toolbar.ql-snow .ql-formats {
    margin-right: 8px;
    flex-shrink: 0;
}

/* Voice notes (staff notes): list above description */
.atomware-note-voice-notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.atomware-note-voice-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--atomware-border, rgba(0, 0, 0, 0.12));
    background: var(--atomware-surface-elevated, rgba(255, 255, 255, 0.04));
}
.atomware-note-voice-added-at {
    font-size: 0.8rem;
    color: var(--atomware-text-muted, rgba(255, 255, 255, 0.65));
    font-variant-numeric: tabular-nums;
}
.atomware-note-voice-player-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.atomware-note-voice-player-row .atomware-voice-note-wrap {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 100%;
}
.atomware-note-voice-player-row > audio {
    flex: 1 1 200px;
    min-width: min(100%, 200px);
    max-width: 100%;
    vertical-align: middle;
}
.atomware-note-voice-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    flex: 1 1 140px;
}
.atomware-note-voice-time {
    font-size: 0.8rem;
    color: var(--atomware-text-muted, rgba(255, 255, 255, 0.65));
}
.atomware-note-voice-name {
    font-size: 0.9rem;
    word-break: break-word;
}
.atomware-task-voice-uploader-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.atomware-task-voice-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.atomware-task-voice-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--atomware-surface-muted, rgba(0, 0, 0, 0.06));
    color: var(--atomware-text-muted, rgba(0, 0, 0, 0.45));
    flex-shrink: 0;
}
.atomware-task-voice-avatar-placeholder .material-icons {
    font-size: 20px;
}
.atomware-note-voice-upload {
    margin-top: 6px;
}
.atomware-note-voice-upload-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
#create-note-modal .atomware-note-voice-recorder.atomware-is-recording,
#note-detail-modal .atomware-note-voice-recorder.atomware-is-recording,
#task-detail-modal .atomware-note-voice-recorder.atomware-is-recording {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#create-note-modal .atomware-note-voice-recorder.atomware-is-recording .atomware-voice-recording-panel,
#note-detail-modal .atomware-note-voice-recorder.atomware-is-recording .atomware-voice-recording-panel,
#task-modal .atomware-note-voice-recorder.atomware-is-recording .atomware-voice-recording-panel,
#task-detail-modal .atomware-note-voice-recorder.atomware-is-recording .atomware-voice-recording-panel {
    display: inline-flex;
}
.atomware-note-voice-recorder .atomware-note-voice-cancel-btn {
    color: var(--atomware-text-muted, rgba(255, 255, 255, 0.65));
}
.atomware-note-voice-recorder .atomware-note-voice-cancel-btn:hover {
    color: var(--atomware-text, #fff);
}

/* Note record buttons: keep note flows visually distinct and consistent (create/detail/chat-note). */
#note-create-voice-mic-btn,
#note-detail-voice-mic-btn,
#chat-note-voice-mic-btn,
#task-create-voice-mic-btn,
#task-detail-voice-mic-btn {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}
#note-create-voice-mic-btn:hover,
#note-detail-voice-mic-btn:hover,
#chat-note-voice-mic-btn:hover,
#task-create-voice-mic-btn:hover,
#task-detail-voice-mic-btn:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}
#note-create-voice-recorder.atomware-is-recording #note-create-voice-mic-btn,
#note-detail-voice-recorder.atomware-is-recording #note-detail-voice-mic-btn,
#chat-note-voice-recorder.atomware-is-recording #chat-note-voice-mic-btn,
#task-create-voice-recorder.atomware-is-recording #task-create-voice-mic-btn,
#task-detail-voice-recorder.atomware-is-recording #task-detail-voice-mic-btn {
    background: #991b1b !important;
    border-color: #991b1b !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

/* Note detail: description read-only until Edit; autosave status */
.atomware-note-desc-toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.atomware-note-desc-toolbar-leading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}
.atomware-note-desc-toolbar-leading > label {
    margin: 0;
    flex: 0 0 auto;
}
.atomware-note-desc-checklist-overall {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #a5b4fc;
    line-height: 1.3;
    white-space: nowrap;
}
.atomware-note-desc-checklist-overall--inactive {
    display: none !important;
}
.atomware-note-autosave-status {
    font-size: 0.8rem;
    white-space: nowrap;
}
.atomware-quill-readonly .ql-toolbar {
    display: none !important;
}
.atomware-quill-readonly .ql-container.ql-snow {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.atomware-quill-readonly .ql-editor {
    cursor: default;
}

/*
 * Note detail read-only checklists: Quill Snow sets pointer-events:none on ul[data-checked]
 * and none on li::before when .ql-disabled — re-enable so rows/checkbox hit targets work.
 */
#note-detail-modal .atomware-quill-readonly .ql-container.ql-disabled .ql-editor ul[data-checked],
#task-detail-modal .atomware-quill-readonly .ql-container.ql-disabled .ql-editor ul[data-checked] {
    pointer-events: auto !important;
}
#note-detail-modal .atomware-quill-readonly .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before,
#task-detail-modal .atomware-quill-readonly .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
    pointer-events: auto !important;
}

/* Done/total pill rendered above each checklist block (data set in notes.js) */
#note-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked][data-aw-checksum]::before,
#task-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked][data-aw-checksum]::before {
    content: attr(data-aw-checksum);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    width: 100%;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 6px 10px 4px;
    margin: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.04) 0%, transparent 100%);
    pointer-events: none;
}

/* Note detail read-only: task-style checklist panel (less “flat white”) */
#note-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked],
#task-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked] {
    margin: 0.55rem 0;
    padding: 0;
    list-style: none;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #e2e8f0 0%, #eef2f7 8%, #f1f5f9 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

/* Quill splits one checklist into adjacent uls — merge into one “table” visually */
#note-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-start:not(.atomware-checklist-run-solo),
#task-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-start:not(.atomware-checklist-run-solo) {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: rgba(203, 213, 225, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
#note-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-mid,
#note-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-end,
#task-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-mid,
#task-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-end {
    margin-top: -1px;
    margin-bottom: 0;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
}
#note-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-mid,
#task-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-mid {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: rgba(203, 213, 225, 0.55);
}
#note-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-end,
#task-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-end {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 0.55rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(15, 23, 42, 0.06);
}
#note-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-mid > li:first-child,
#note-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-end > li:first-child,
#task-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-mid > li:first-child,
#task-detail-modal .atomware-quill-readonly .ql-editor ul.atomware-checklist-run-end > li:first-child {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
#note-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked] > li,
#task-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked] > li {
    position: relative;
    padding: 0.55rem 0.85rem 0.55rem 2.5rem;
    min-height: 2.35rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    transition: background 0.12s ease, color 0.12s ease;
    background: rgba(255, 255, 255, 0.35);
}
#note-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked] > li:last-child,
#task-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked] > li:last-child {
    border-bottom: none;
}
#note-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked] > li:hover,
#task-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked] > li:hover {
    background: rgba(255, 255, 255, 0.72);
}
/* Task-like custom checkbox (replaces default hollow/filled unicode) */
#note-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked]:not([data-checked="true"]) > li::before,
#task-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked]:not([data-checked="true"]) > li::before {
    content: '' !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    margin-left: -1.65em !important;
    margin-top: 0.15em;
    border-radius: 5px;
    border: 2px solid #64748b;
    background: linear-gradient(180deg, #f8fafc, #e2e8f0);
    box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(15, 23, 42, 0.12);
    color: transparent !important;
}
#note-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked="true"] > li::before,
#task-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked="true"] > li::before {
    content: '\2713' !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    margin-left: -1.65em !important;
    margin-top: 0.12em;
    border-radius: 5px;
    border: 2px solid #0d9488;
    background: linear-gradient(145deg, #14b8a6, #0d9488);
    color: #fff !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    line-height: 1.15rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(13, 148, 136, 0.35);
}
#note-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked="true"] > li,
#task-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked="true"] > li {
    color: #64748b;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: #94a3b8;
}
#note-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked="true"] > li:hover,
#task-detail-modal .atomware-quill-readonly .ql-editor ul[data-checked="true"] > li:hover {
    background: rgba(241, 245, 249, 0.95);
}

/* WYSIWYG in task/note modals — white content area (match Knowledge Base #kb-article-editor) */
#task-modal .atomware-wysiwyg-editor,
#create-task-from-chat-modal .atomware-wysiwyg-editor,
#create-note-modal .atomware-wysiwyg-editor,
#note-detail-modal .atomware-wysiwyg-editor,
#task-detail-modal .atomware-wysiwyg-editor,
.atomware-modal .atomware-wysiwyg-editor {
    background: #ffffff;
    border: 1px solid var(--atomware-border, #e5e7eb);
    border-radius: 0 0 8px 8px;
    color: #1a1a1a;
    min-height: 180px;
}
#task-modal .atomware-wysiwyg-editor .ql-container,
#create-task-from-chat-modal .atomware-wysiwyg-editor .ql-container,
#create-note-modal .atomware-wysiwyg-editor .ql-container,
#note-detail-modal .atomware-wysiwyg-editor .ql-container,
#task-detail-modal .atomware-wysiwyg-editor .ql-container,
.atomware-modal .atomware-wysiwyg-editor .ql-container {
    border: none;
    font-size: 14px;
    color: #1a1a1a;
    background: #ffffff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
#task-modal .atomware-wysiwyg-editor .ql-editor,
#create-task-from-chat-modal .atomware-wysiwyg-editor .ql-editor,
#create-note-modal .atomware-wysiwyg-editor .ql-editor,
#note-detail-modal .atomware-wysiwyg-editor .ql-editor,
#task-detail-modal .atomware-wysiwyg-editor .ql-editor,
.atomware-modal .atomware-wysiwyg-editor .ql-editor {
    min-height: 140px;
    line-height: 1.6;
    color: #1a1a1a;
    background: #ffffff;
    font-size: 14px;
}
#task-modal .atomware-wysiwyg-editor .ql-editor.ql-blank::before,
#create-task-from-chat-modal .atomware-wysiwyg-editor .ql-editor.ql-blank::before,
#create-note-modal .atomware-wysiwyg-editor .ql-editor.ql-blank::before,
#note-detail-modal .atomware-wysiwyg-editor .ql-editor.ql-blank::before,
#task-detail-modal .atomware-wysiwyg-editor .ql-editor.ql-blank::before,
.atomware-modal .atomware-wysiwyg-editor .ql-editor.ql-blank::before {
    color: #999;
    font-style: normal;
}
#task-modal .atomware-wysiwyg-editor .ql-editor a,
#create-task-from-chat-modal .atomware-wysiwyg-editor .ql-editor a,
#create-note-modal .atomware-wysiwyg-editor .ql-editor a,
#note-detail-modal .atomware-wysiwyg-editor .ql-editor a,
#task-detail-modal .atomware-wysiwyg-editor .ql-editor a,
.atomware-modal .atomware-wysiwyg-editor .ql-editor a {
    color: #2f6fd4;
}
#task-modal .atomware-wysiwyg-editor .ql-editor img,
#create-task-from-chat-modal .atomware-wysiwyg-editor .ql-editor img,
#create-note-modal .atomware-wysiwyg-editor .ql-editor img,
#note-detail-modal .atomware-wysiwyg-editor .ql-editor img,
#task-detail-modal .atomware-wysiwyg-editor .ql-editor img,
.atomware-modal .atomware-wysiwyg-editor .ql-editor img {
    max-width: 100%;
    height: auto;
}
#task-modal .atomware-wysiwyg-editor .ql-toolbar.ql-snow,
#create-task-from-chat-modal .atomware-wysiwyg-editor .ql-toolbar.ql-snow,
#create-note-modal .atomware-wysiwyg-editor .ql-toolbar.ql-snow,
#note-detail-modal .atomware-wysiwyg-editor .ql-toolbar.ql-snow,
#task-detail-modal .atomware-wysiwyg-editor .ql-toolbar.ql-snow,
.atomware-modal .atomware-wysiwyg-editor .ql-toolbar.ql-snow {
    background: #f9fafb;
    border: 1px solid var(--atomware-border, #e5e7eb);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

/*
 * Quill Snow: picker dropdowns and link tooltip must stack above `.ql-editor` (typing surface).
 */
.atomware-modal .atomware-wysiwyg-editor-wrap .ql-toolbar.ql-snow,
.atomware-dashboard .atomware-wysiwyg-editor-wrap .ql-toolbar.ql-snow,
.atomware-portal .atomware-wysiwyg-editor-wrap .ql-toolbar.ql-snow {
    position: relative;
    z-index: 8;
}
.atomware-modal .atomware-wysiwyg-editor .ql-tooltip,
.atomware-dashboard .atomware-wysiwyg-editor .ql-tooltip,
.atomware-portal .atomware-wysiwyg-editor .ql-tooltip {
    z-index: 12;
}
.atomware-modal .atomware-wysiwyg-editor-wrap .ql-snow .ql-picker-options,
.atomware-dashboard .atomware-wysiwyg-editor-wrap .ql-snow .ql-picker-options,
.atomware-portal .atomware-wysiwyg-editor-wrap .ql-snow .ql-picker-options {
    z-index: 10;
}

#task-detail-modal .atomware-add-comment textarea {
    font-size: 14px !important;
}
/* Client task detail: read-only fields match staff form styling */
#task-detail-modal .atomware-input-readonly {
    display: block;
    padding: 8px 12px;
    min-height: 38px;
    background: var(--atomware-bg-secondary, #f3f4f6);
    border: 1px solid var(--atomware-border, #e5e7eb);
    border-radius: var(--atomware-radius, 6px);
    color: var(--atomware-text);
}
#task-detail-modal .atomware-task-detail-client .atomware-form-group,
#task-detail-modal .atomware-task-detail-client .atomware-form-row {
    margin-bottom: 1em;
}
#task-detail-modal .atomware-edit-files-list-readonly .atomware-edit-file-item {
    cursor: pointer;
}
#task-detail-modal .atomware-edit-files-list-readonly .atomware-edit-file-item:hover {
    background: var(--atomware-bg-hover, rgba(0,0,0,0.04));
}
/* Task Detail Modal - Full screen button (desktop only, icon only) - same icon size as share btn */
.atomware-fullscreen-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 4px !important;
    min-width: auto;
}
.atomware-fullscreen-btn .material-icons {
    font-size: 8px;
    min-width: 8px;
}
@media (max-width: 1024px) {
    .atomware-fullscreen-btn:not(#files-fullscreen-btn):not(#unassigned-fullscreen-btn):not(#assigned-fullscreen-btn):not(#notes-fullscreen-btn):not(#analytics-fullscreen-btn) {
        display: none !important;
    }
}

.atomware-analytics-container.atomware-analytics-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: var(--atomware-bg-primary);
    padding: 12px;
}

.atomware-tasks-container.atomware-tasks-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: var(--atomware-bg-primary);
    padding: 12px;
}

.atomware-tasks-container.atomware-tasks-fullscreen .atomware-task-list,
.atomware-tasks-container.atomware-tasks-fullscreen #unassigned-tasks {
    height: 100%;
}

/* Task, Note, Add Business, Add Client Modals - form field spacing */
#task-modal .atomware-modal-body,
#task-detail-modal .atomware-modal-body,
#create-task-from-chat-modal .atomware-modal-body,
#create-note-modal .atomware-modal-body,
#note-detail-modal .atomware-modal-body,
#add-business-modal .atomware-modal-body,
#add-client-modal .atomware-modal-body,
#manual-time-entry-modal .atomware-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-lg);
}
#task-modal .atomware-form-group,
#task-detail-modal .atomware-form-group,
#create-task-from-chat-modal .atomware-form-group,
#create-note-modal .atomware-form-group,
#note-detail-modal .atomware-form-group,
#add-business-modal .atomware-form-group,
#add-client-modal .atomware-form-group,
#manual-time-entry-modal .atomware-form-group {
    margin-bottom: 0;
}
#task-detail-modal .atomware-task-title-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--atomware-spacing);
    margin-bottom: 6px;
}
#task-detail-modal .atomware-task-title-label-row label {
    margin-bottom: 0;
}
#task-detail-modal .atomware-task-created-date {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--atomware-text-muted, #9ca3af);
    white-space: nowrap;
}
#task-modal .atomware-form-row,
#task-detail-modal .atomware-form-row,
#create-task-from-chat-modal .atomware-form-row,
#create-note-modal .atomware-form-row,
#note-detail-modal .atomware-form-row,
#add-business-modal .atomware-form-row,
#add-client-modal .atomware-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--atomware-spacing-lg);
    align-items: start;
}
#manual-time-entry-modal .atomware-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--atomware-spacing-lg);
    align-items: start;
}
#task-modal .atomware-form-row .atomware-form-group,
#task-detail-modal .atomware-form-row .atomware-form-group,
#create-task-from-chat-modal .atomware-form-row .atomware-form-group,
#create-note-modal .atomware-form-row .atomware-form-group,
#note-detail-modal .atomware-form-row .atomware-form-group,
#add-business-modal .atomware-form-row .atomware-form-group,
#add-client-modal .atomware-form-row .atomware-form-group,
#manual-time-entry-modal .atomware-form-row .atomware-form-group {
    min-width: 0;
}
#task-modal .atomware-form-group input[type="text"],
#task-modal .atomware-form-group input[type="date"],
#task-modal .atomware-form-group input[type="email"],
#task-modal .atomware-form-group input[type="tel"],
#task-modal .atomware-form-group input[type="password"],
#task-modal .atomware-form-group select,
#task-modal .atomware-form-group textarea,
#task-detail-modal .atomware-form-group input[type="text"],
#task-detail-modal .atomware-form-group input[type="date"],
#task-detail-modal .atomware-form-group input[type="email"],
#task-detail-modal .atomware-form-group input[type="tel"],
#task-detail-modal .atomware-form-group input[type="password"],
#task-detail-modal .atomware-form-group select,
#task-detail-modal .atomware-form-group textarea,
#create-note-modal .atomware-form-group input,
#create-note-modal .atomware-form-group select,
#create-note-modal .atomware-form-group textarea,
#note-detail-modal .atomware-form-group input,
#note-detail-modal .atomware-form-group select,
#note-detail-modal .atomware-form-group textarea,
#add-business-modal .atomware-form-group input,
#add-business-modal .atomware-form-group select,
#add-business-modal .atomware-form-group textarea,
#add-client-modal .atomware-form-group input,
#add-client-modal .atomware-form-group select,
#add-client-modal .atomware-form-group textarea,
#manual-time-entry-modal .atomware-form-group input,
#manual-time-entry-modal .atomware-form-group select {
    padding: 10px 14px;
}
#task-modal .atomware-form-group label,
#task-detail-modal .atomware-form-group label,
#create-task-from-chat-modal .atomware-form-group label,
#create-note-modal .atomware-form-group label,
#note-detail-modal .atomware-form-group label,
#add-business-modal .atomware-form-group label,
#add-client-modal .atomware-form-group label,
#manual-time-entry-modal .atomware-form-group label {
    margin-bottom: var(--atomware-spacing-sm);
}
#manual-time-entry-modal .atomware-select-enhanced .atomware-select-trigger {
    padding: 10px 14px;
    min-height: 42px;
}
#task-modal .atomware-select-enhanced .atomware-select-trigger,
#task-detail-modal .atomware-select-enhanced .atomware-select-trigger,
#create-task-from-chat-modal .atomware-select-enhanced .atomware-select-trigger,
#create-note-modal .atomware-select-enhanced .atomware-select-trigger,
#note-detail-modal .atomware-select-enhanced .atomware-select-trigger,
#add-business-modal .atomware-select-enhanced .atomware-select-trigger,
#add-client-modal .atomware-select-enhanced .atomware-select-trigger,
#assign-task-modal .atomware-select-enhanced .atomware-select-trigger,
#share-to-files-modal .atomware-select-enhanced .atomware-select-trigger {
    padding: 10px 14px;
    min-height: 42px;
}
@media (max-width: 600px) {
    #task-modal .atomware-form-row,
    #task-detail-modal .atomware-form-row,
    #create-task-from-chat-modal .atomware-form-row,
    #create-note-modal .atomware-form-row,
    #note-detail-modal .atomware-form-row,
    #add-business-modal .atomware-form-row,
    #add-client-modal .atomware-form-row,
    #manual-time-entry-modal .atomware-form-row {
        grid-template-columns: 1fr;
    }
}

/* Task, Note, Add Business, Add Client, Create Task from Chat, Client Info Modals - Slide-out panel (desktop: 50% width, full height; mobile: full) */
#task-modal.atomware-modal:not(.atomware-modal-fullscreen),
#task-detail-modal.atomware-modal:not(.atomware-modal-fullscreen),
#client-info-modal.atomware-modal:not(.atomware-modal-fullscreen),
#create-task-from-chat-modal.atomware-modal:not(.atomware-modal-fullscreen):not(.atomware-client-chat-task-modal),
#create-note-modal.atomware-modal,
#note-detail-modal.atomware-modal,
#add-business-modal.atomware-modal,
#add-client-modal.atomware-modal,
#manual-time-entry-modal.atomware-modal {
    display: flex !important;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#task-modal.atomware-modal.active:not(.atomware-modal-fullscreen),
#task-detail-modal.atomware-modal.active:not(.atomware-modal-fullscreen),
#client-info-modal.atomware-modal.active:not(.atomware-modal-fullscreen),
#create-task-from-chat-modal.atomware-modal.active:not(.atomware-modal-fullscreen):not(.atomware-client-chat-task-modal),
#create-note-modal.atomware-modal.active,
#note-detail-modal.atomware-modal.active,
#add-business-modal.atomware-modal.active,
#add-client-modal.atomware-modal.active,
#manual-time-entry-modal.atomware-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
#task-modal.atomware-modal:not(.atomware-modal-fullscreen) .atomware-modal-content,
#task-detail-modal.atomware-modal:not(.atomware-modal-fullscreen) .atomware-modal-content,
#client-info-modal.atomware-modal:not(.atomware-modal-fullscreen) .atomware-modal-content,
#create-task-from-chat-modal.atomware-modal:not(.atomware-modal-fullscreen):not(.atomware-client-chat-task-modal) .atomware-modal-content {
    width: 50%;
    max-width: 50vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
#create-note-modal.atomware-modal .atomware-modal-content,
#note-detail-modal.atomware-modal .atomware-modal-content,
#add-business-modal.atomware-modal .atomware-modal-content,
#add-client-modal.atomware-modal .atomware-modal-content,
#manual-time-entry-modal.atomware-modal .atomware-modal-content {
    width: 50%;
    max-width: 50vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
#task-modal.atomware-modal.active:not(.atomware-modal-fullscreen) .atomware-modal-content,
#task-detail-modal.atomware-modal.active:not(.atomware-modal-fullscreen) .atomware-modal-content,
#client-info-modal.atomware-modal.active:not(.atomware-modal-fullscreen) .atomware-modal-content,
#create-task-from-chat-modal.atomware-modal.active:not(.atomware-modal-fullscreen):not(.atomware-client-chat-task-modal) .atomware-modal-content,
#create-note-modal.atomware-modal.active .atomware-modal-content,
#note-detail-modal.atomware-modal.active .atomware-modal-content,
#add-business-modal.atomware-modal.active .atomware-modal-content,
#add-client-modal.atomware-modal.active .atomware-modal-content,
#manual-time-entry-modal.atomware-modal.active .atomware-modal-content {
    transform: translateX(0);
}

@media (max-width: 768px) {
    #task-modal.atomware-modal:not(.atomware-modal-fullscreen) .atomware-modal-content,
    #task-detail-modal.atomware-modal:not(.atomware-modal-fullscreen) .atomware-modal-content,
    #client-info-modal.atomware-modal:not(.atomware-modal-fullscreen) .atomware-modal-content,
    #create-task-from-chat-modal.atomware-modal:not(.atomware-modal-fullscreen):not(.atomware-client-chat-task-modal) .atomware-modal-content,
    #create-note-modal.atomware-modal .atomware-modal-content,
    #note-detail-modal.atomware-modal .atomware-modal-content,
    #add-business-modal.atomware-modal .atomware-modal-content,
    #add-client-modal.atomware-modal .atomware-modal-content,
    #manual-time-entry-modal.atomware-modal .atomware-modal-content {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }
}

/* Task / Note / Share Note / Create-from-Chat / Email Compose / Event Modals - Full screen mode */
#task-detail-modal.atomware-modal-fullscreen,
#task-modal.atomware-modal-fullscreen,
#create-note-modal.atomware-modal-fullscreen,
#note-detail-modal.atomware-modal-fullscreen,
#share-note-modal.atomware-modal-fullscreen,
#create-task-from-chat-modal.atomware-modal-fullscreen,
#atomware-email-compose-modal.atomware-modal-fullscreen,
#atomware-event-modal.atomware-modal-fullscreen {
    padding: 0;
    align-items: stretch;
}
#task-detail-modal.atomware-modal-fullscreen .atomware-modal-content,
#task-modal.atomware-modal-fullscreen .atomware-modal-content,
#create-note-modal.atomware-modal-fullscreen .atomware-modal-content,
#note-detail-modal.atomware-modal-fullscreen .atomware-modal-content,
#share-note-modal.atomware-modal-fullscreen .atomware-modal-content,
#create-task-from-chat-modal.atomware-modal-fullscreen .atomware-modal-content,
#atomware-email-compose-modal.atomware-modal-fullscreen .atomware-modal-content,
#atomware-event-modal.atomware-modal-fullscreen .atomware-modal-content {
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    transform: none;
}

.atomware-duplicate-include {
    padding: var(--atomware-spacing-md);
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
}
.atomware-duplicate-include-row {
    margin-bottom: var(--atomware-spacing-sm);
}
.atomware-duplicate-include-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    font-weight: 400;
}
.atomware-duplicate-include-files {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Duplicate Task Options Modal */
.atomware-duplicate-intro {
    margin: 0 0 var(--atomware-spacing-md) 0;
    color: var(--atomware-text-muted);
    font-size: 0.95rem;
}
.atomware-duplicate-options {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-md);
}
.atomware-duplicate-preset {
    margin-bottom: 4px;
}
.atomware-duplicate-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 400;
    padding: 6px 0;
}
.atomware-duplicate-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--atomware-primary);
    cursor: pointer;
}
.atomware-duplicate-option.atomware-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.atomware-duplicate-option.atomware-disabled input {
    cursor: not-allowed;
}
.atomware-duplicate-dates {
    margin-top: var(--atomware-spacing-sm);
    padding-top: var(--atomware-spacing-md);
    border-top: 1px solid var(--atomware-border);
}
.atomware-duplicate-dates label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 0.9rem;
}
.atomware-dup-date-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.atomware-dup-date-btn.active {
    background: var(--atomware-primary, #1552cc) !important;
    color: #fff !important;
    border: 1px solid var(--atomware-primary, #1552cc) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28);
    transform: translateY(-1px);
}
.atomware-dup-date-btn.active:hover {
    filter: brightness(1.1);
}
.atomware-dup-date-preview {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--atomware-text-muted, #94a3b8);
    line-height: 1.45;
}
#dup-options-continue .material-icons {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Recurring Task Modal */
.atomware-recurrence-row {
    margin-top: var(--atomware-spacing-sm);
    padding-top: var(--atomware-spacing-sm);
    border-top: 1px solid var(--atomware-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--atomware-spacing-sm);
}
.atomware-recurrence-summary {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--atomware-text-muted);
}
.atomware-recurrence-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.atomware-set-repeat-btn {
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--atomware-text-muted);
    border-radius: 4px;
}
.atomware-set-repeat-btn:hover {
    color: var(--atomware-primary);
    background: var(--atomware-bg-tertiary);
}
.atomware-repeat-icon {
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 600;
}
.atomware-remove-repeat-btn {
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--atomware-text-muted);
    border-radius: 4px;
}
.atomware-remove-repeat-btn:hover {
    color: var(--atomware-danger, #dc3545);
    background: var(--atomware-bg-tertiary);
}
.atomware-remove-repeat-btn .material-icons {
    font-size: 18px;
}

/* Recurrence dropdown (inline, no modal) – subtask-style spacing */
.atomware-recurrence-dropdown-wrap {
    position: relative;
}
/* Label row for due date + repeat icon */
.atomware-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--atomware-spacing-sm);
}
.atomware-label-row .atomware-repeat-toggle-btn {
    padding: 6px;
    border-radius: 4px;
}
/* Recurrence accordion (full width, subtask-style spacing) */
.atomware-recurrence-accordion {
    width: 100%;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius-sm);
    background: var(--atomware-bg-secondary);
    padding: 10px 12px;
    margin-top: var(--atomware-spacing-md);
}
.atomware-recurrence-accordion-header {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    padding-bottom: 8px;
}
.atomware-recurrence-accordion-title {
    font-weight: 600;
}
.atomware-recurrence-accordion-body {
    border-top: 1px solid var(--atomware-border);
    padding-top: 12px;
}
/* Make recurrence options spacious and readable */
.atomware-recurrence-accordion .atomware-form-group {
    margin-bottom: 12px;
}
.atomware-recurrence-accordion .atomware-form-group:last-child {
    margin-bottom: 0;
}
.atomware-recurrence-frequency,
.atomware-recurrence-trigger {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.atomware-recurrence-frequency .atomware-radio-label,
.atomware-recurrence-trigger .atomware-radio-label {
    padding: 6px 8px;
    border-radius: 6px;
    line-height: 1.4;
}
/* Hide Remove option and divider until a repeat has been set */
.atomware-recurrence-dropdown-wrap:not(.atomware-has-recurrence) .atomware-recurrence-dropdown-divider,
.atomware-recurrence-dropdown-wrap:not(.atomware-has-recurrence) .atomware-recurrence-dropdown-remove {
    display: none !important;
}
.atomware-recurrence-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    min-width: 220px;
    padding: 12px 0;
    background: var(--atomware-bg-primary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
}
.atomware-recurrence-dropdown.active {
    display: block;
}
.atomware-recurrence-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 18px;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--atomware-text-primary);
    cursor: pointer;
    transition: background 0.15s;
    box-sizing: border-box;
}
.atomware-recurrence-dropdown-item:hover {
    background: var(--atomware-bg-tertiary);
}
.atomware-recurrence-dropdown-item.atomware-recurrence-dropdown-remove {
    color: var(--atomware-danger, #dc3545);
}
.atomware-recurrence-dropdown-divider {
    height: 1px;
    margin: 12px 16px;
    background: var(--atomware-border);
}
.atomware-recurrence-custom-inline {
    padding: 14px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    min-height: 48px;
    box-sizing: border-box;
}
.atomware-recurrence-custom-inline label {
    margin: 0;
}
.atomware-recurrence-custom-inline .atomware-recurrence-interval-input,
.atomware-recurrence-custom-inline .atomware-recurrence-unit-select {
    padding: 8px 12px;
    font-size: 0.9rem;
}

.atomware-recurrence-frequency,
.atomware-recurrence-trigger {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.atomware-recurrence-interval-suffix {
    align-self: center;
    color: var(--atomware-text-muted);
    font-size: 0.9rem;
}
.atomware-recurrence-frequency-separator {
    width: 100%;
    height: 1px;
    background: var(--atomware-border);
    opacity: 0.6;
}
.atomware-recurrence-frequency .atomware-radio-label,
.atomware-recurrence-trigger .atomware-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.atomware-recurrence-weekdays {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}
.atomware-recurrence-weekdays .atomware-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.atomware-recurrence-monthly-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.atomware-recurrence-monthly-options .atomware-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    cursor: pointer;
}
.atomware-recurrence-interval-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.atomware-recurrence-interval-row .atomware-input-sm,
.atomware-recurrence-interval-row .atomware-select-sm {
    max-width: 140px;
}

/* Client Info Modal - read-only, same style as Task Detail */
#client-info-modal .atomware-modal-body,
#client-info-modal h3, #client-info-modal h4, #client-info-modal h5,
#client-info-modal .atomware-detail-item label,
#client-info-modal .atomware-detail-item span {
    font-size: 14px !important;
}
#client-info-modal .atomware-client-info-readonly {
    padding: 0;
}
#client-info-modal .atomware-client-info-header {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-md);
    margin-bottom: var(--atomware-spacing-lg);
    padding-bottom: var(--atomware-spacing-md);
    border-bottom: 1px solid var(--atomware-border);
}
#client-info-modal .atomware-client-info-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--atomware-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
#client-info-modal .atomware-client-info-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#client-info-modal .atomware-client-info-avatar-icon {
    font-size: 32px;
    color: var(--atomware-text-muted);
}
#client-info-modal .atomware-client-info-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--atomware-text-primary);
}
#client-info-modal .atomware-client-info-grid {
    margin-bottom: var(--atomware-spacing-lg);
}
#client-info-modal .atomware-client-info-section {
    margin-bottom: var(--atomware-spacing-lg);
}
#client-info-modal .atomware-client-info-section h5 {
    margin: 0 0 var(--atomware-spacing-md) 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--atomware-text-secondary);
}
#client-info-modal .atomware-client-info-section .atomware-detail-item {
    margin-bottom: var(--atomware-spacing-sm);
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--atomware-radius-sm);
    background: rgba(255, 255, 255, 0.02);
}
#client-info-modal .atomware-client-info-section .atomware-detail-item:last-child {
    margin-bottom: 0;
}
#client-info-modal .atomware-client-info-section .atomware-detail-item label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#client-info-modal .atomware-detail-item span {
    display: block;
    margin-top: 4px;
}
#client-info-modal .atomware-detail-item a {
    color: var(--atomware-primary);
    text-decoration: none;
    word-break: break-word;
}
#client-info-modal .atomware-detail-item a:hover {
    text-decoration: underline;
}
#client-info-modal .atomware-client-info-icon {
    font-size: 16px;
    color: var(--atomware-text-muted);
}
#client-info-modal .atomware-client-info-social-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
#client-info-modal .atomware-input-with-action {
    width: 100%;
}
#client-info-modal .atomware-client-info-section {
    padding: var(--atomware-spacing-md);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    background: rgba(255, 255, 255, 0.03);
}
#client-info-modal .atomware-client-info-social-row {
    margin-bottom: 4px;
}
#client-info-modal .atomware-client-info-social-type {
    text-transform: capitalize;
    color: var(--atomware-text-muted);
}
#client-info-modal .atomware-client-info-team-list {
    margin-bottom: 0;
}
/* Settings panel (profile click) - match client info styling */
#settings-panel .atomware-panel-content {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-lg);
}
#settings-panel .atomware-settings-section {
    padding: var(--atomware-spacing-lg);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    background: rgba(255, 255, 255, 0.02);
}
#settings-panel .atomware-settings-section label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--atomware-text-secondary);
    font-weight: 600;
    margin-top: 6px;
}
#settings-panel .atomware-settings-avatar {
    margin-bottom: var(--atomware-spacing-sm);
}
#settings-panel .atomware-settings-section .atomware-btn-sm,
#settings-panel .atomware-settings-section .atomware-btn-primary {
    margin-top: var(--atomware-spacing-sm);
}
#settings-panel .atomware-settings-section .atomware-input {
    margin-top: 6px;
}
#client-info-modal .atomware-client-info-team-item {
    cursor: default;
}
#client-info-modal .atomware-client-info-team-item .details-remove-member {
    display: none;
}

/* QR Code - Details tab */
.atomware-qr-upload-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.atomware-qr-preview-wrap {
    position: relative;
    display: inline-block;
    max-width: 200px;
    background: #fff;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    padding: 8px;
}
.atomware-qr-preview-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    border-radius: 4px;
}
.atomware-qr-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.6) !important;
    color: #fff !important;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.atomware-qr-delete-btn .material-icons {
    font-size: 16px;
}
.atomware-qr-preview-wrap:hover .atomware-qr-delete-btn {
    opacity: 1;
}

/* QR Code - Client Info Modal */
.atomware-client-info-qr-section {
    text-align: center;
}
.atomware-client-info-qr-wrap {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    padding: 12px;
    margin-top: 8px;
}
.atomware-client-info-qr-img {
    max-width: 220px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Share credential button in modal */
.atomware-client-info-password-input-wrap {
    width: 100%;
}
.atomware-client-info-password-input-wrap .atomware-input {
    padding-right: 72px;
}
.atomware-client-info-password-actions {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.atomware-client-info-action-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
}
.atomware-client-info-action-icon .material-icons {
    font-size: 18px;
}
.atomware-client-info-share-cred,
.atomware-client-info-share-login {
    background: transparent;
    border: none;
    color: #fff;
}
.atomware-client-info-share-cred .material-icons,
.atomware-client-info-share-login .material-icons {
    font-size: 18px;
}
.atomware-client-info-password-row {
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: 100%;
}

/* Task Detail Modal - rest of styles */
.atomware-task-detail h4 {
    margin: 0 0 var(--atomware-spacing-lg) 0;
    font-size: 1em;
    color: var(--atomware-text-primary);
}

.atomware-task-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--atomware-spacing-md);
    margin-bottom: var(--atomware-spacing-lg);
    padding: var(--atomware-spacing-md);
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
}

.atomware-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.atomware-detail-item label {
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.atomware-detail-item span {
    color: var(--atomware-text-primary);
    font-weight: 500;
}

#task-detail-modal .atomware-status-badge {
    font-size: inherit;
}
.atomware-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--atomware-radius-sm);
    font-size: 0.85rem;
    text-transform: capitalize;
}

.atomware-status-badge.pending {
    background: var(--atomware-warning);
    color: #000;
}

.atomware-status-badge.started {
    background: var(--atomware-primary);
    color: #fff;
}

.atomware-status-badge.on_hold {
    background: #9e9e9e;
    color: #fff;
}

.atomware-status-badge.complete {
    background: var(--atomware-success);
    color: #fff;
}

.atomware-task-description {
    margin-bottom: var(--atomware-spacing-lg);
}

.atomware-task-description h5,
.atomware-task-files h5,
.atomware-task-comments h5 {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    margin: 0 0 var(--atomware-spacing-md) 0;
    font-size: 1rem;
    color: var(--atomware-text-primary);
}

.atomware-task-description h5 .material-icons,
.atomware-task-files h5 .material-icons,
.atomware-task-comments h5 .material-icons {
    font-size: 18px;
    color: var(--atomware-text-muted);
}

.atomware-task-description p {
    color: var(--atomware-text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Task Chat Snapshot (from-chat context) - extra spacing above to separate from description */
.atomware-task-chat-snapshot-wrap {
    margin-bottom: var(--atomware-spacing-lg);
    margin-top: var(--atomware-spacing-xl);
    padding-top: var(--atomware-spacing-md);
}
.atomware-task-chat-snapshot {
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
    padding: var(--atomware-spacing-lg);
    border: 1px solid var(--atomware-border);
}
.atomware-task-chat-snapshot h5 {
    margin: 0 0 var(--atomware-spacing-md) 0;
    font-size: 0.95rem;
    color: var(--atomware-text-muted);
}
.atomware-chat-snapshot-messages {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-md);
    padding: var(--atomware-spacing-sm) 0;
}
.atomware-chat-snapshot-messages .atomware-snapshot-message {
    display: flex;
    gap: var(--atomware-spacing-sm);
    align-items: flex-start;
}
.atomware-chat-snapshot-messages .atomware-message-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    background: var(--atomware-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.atomware-chat-snapshot-messages .atomware-message-avatar img,
.atomware-chat-snapshot-messages .atomware-message-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.atomware-chat-snapshot-messages .atomware-message-avatar-initial {
    font-size: 0.75rem;
    font-weight: 600;
}
.atomware-chat-snapshot-messages .atomware-message-avatar-continuation {
    background: transparent !important;
    visibility: hidden;
}
.atomware-chat-snapshot-messages .atomware-message-content {
    flex: 1;
    min-width: 0;
}
.atomware-chat-snapshot-messages .atomware-message-header {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    margin-bottom: 2px;
}
.atomware-chat-snapshot-messages .atomware-message-author {
    font-weight: 600;
    font-size: 0.85rem;
}
.atomware-chat-snapshot-messages .atomware-message-time {
    font-size: 0.75rem;
    color: var(--atomware-text-muted);
}
.atomware-chat-snapshot-messages .atomware-message-body {
    font-size: 0.9rem;
    color: var(--atomware-text-primary);
    word-break: break-word;
}

/* Chat hashtags (visual only) */
#team-chat-messages .atomware-chat-hashtag,
#chat-messages .atomware-chat-hashtag,
.atomware-chat-snapshot-messages .atomware-chat-hashtag {
    color: #ff4fb8 !important;
    font-weight: 600;
    cursor: default;
    text-decoration: none;
}

/* Chat code blocks */
#team-chat-messages .atomware-chat-code-block,
#chat-messages .atomware-chat-code-block,
.atomware-chat-snapshot-messages .atomware-chat-code-block {
    position: relative;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    padding: 12px 12px 10px;
    margin: 8px 0;
}
#team-chat-messages .atomware-chat-code-block pre,
#chat-messages .atomware-chat-code-block pre,
.atomware-chat-snapshot-messages .atomware-chat-code-block pre {
    margin: 0;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.5;
    color: #e2e8f0;
    white-space: pre;
}
#team-chat-messages .atomware-chat-code-block code,
#chat-messages .atomware-chat-code-block code,
.atomware-chat-snapshot-messages .atomware-chat-code-block code {
    font-family: inherit;
}
#team-chat-messages .atomware-chat-code-copy,
#chat-messages .atomware-chat-code-copy,
.atomware-chat-snapshot-messages .atomware-chat-code-copy {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: rgba(226, 232, 240, 0.7);
    cursor: pointer;
}
#team-chat-messages .atomware-chat-code-copy:hover,
#chat-messages .atomware-chat-code-copy:hover,
.atomware-chat-snapshot-messages .atomware-chat-code-copy:hover {
    background: rgba(226, 232, 240, 0.08);
    color: #e2e8f0;
}
/* Chat snapshot: own left, others right - same as main chat feed */
.atomware-chat-snapshot-messages .atomware-message.own {
    margin-left: 0;
}
.atomware-chat-snapshot-messages .atomware-message:not(.own) {
    margin-left: auto;
    flex-direction: row-reverse;
}
.atomware-chat-snapshot-messages .atomware-message:not(.own) .atomware-message-header {
    flex-direction: row-reverse;
}
.atomware-chat-snapshot-messages .atomware-voice-note-wrap {
    margin-top: 4px;
}
.atomware-chat-snapshot-messages .atomware-chat-attachment-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
}

/* Tagged users (@mentions) in chat context - small inline avatars to match chat feed */
.atomware-chat-snapshot-messages .atomware-mention-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.atomware-chat-snapshot-messages .atomware-mention-inline-avatar {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    background: var(--atomware-primary);
    color: #fff;
    position: relative;
}
.atomware-chat-snapshot-messages .atomware-mention-inline-avatar .atomware-mention-inline-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.atomware-chat-snapshot-messages .atomware-mention-inline-name {
    font-size: inherit;
}

/* Task Files Section */
.atomware-task-files {
    margin-bottom: var(--atomware-spacing-lg);
}

.atomware-chat-lightbox-content {
    position: relative;
}
.atomware-chat-lightbox-prev,
.atomware-chat-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px;
    z-index: 2;
}
.atomware-chat-lightbox-prev {
    left: 16px;
}
.atomware-chat-lightbox-next {
    right: 16px;
}

.atomware-task-files-list {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-sm);
}

.atomware-task-file-item {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    padding: var(--atomware-spacing-sm) var(--atomware-spacing-md);
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius-sm);
}

.atomware-task-file-item .material-icons {
    color: var(--atomware-primary);
    font-size: 20px;
}

.atomware-task-file-item a {
    flex: 1;
    color: var(--atomware-text-primary);
    text-decoration: none;
}

.atomware-task-file-item a:hover {
    color: var(--atomware-primary);
    text-decoration: underline;
}

.atomware-task-file-item .file-size {
    color: var(--atomware-text-muted);
    font-size: 0.85rem;
}

/* Task Comments */
.atomware-task-comments {
    border-top: 1px solid var(--atomware-border);
    padding-top: var(--atomware-spacing-lg);
}

#task-comments-list {
    margin-bottom: var(--atomware-spacing-md);
}

.atomware-comment {
    padding: var(--atomware-spacing-md);
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius-sm);
    margin-bottom: var(--atomware-spacing-sm);
}

.atomware-comment strong {
    color: var(--atomware-text-primary);
}

.atomware-comment .atomware-comment-time {
    color: var(--atomware-text-muted);
    font-size: 0.8rem;
    margin-left: var(--atomware-spacing-sm);
}

.atomware-comment p {
    margin: var(--atomware-spacing-sm) 0 0 0;
    color: var(--atomware-text-secondary);
}

.atomware-add-comment {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-sm);
}

.atomware-add-comment .atomware-btn-primary {
    align-self: flex-end;
}

/* ========================================
   Google Drive Style File Browser
   ======================================== */

.atomware-drive {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 500px;
    background: var(--atomware-bg-primary);
    border-radius: var(--atomware-radius-lg);
    overflow: hidden;
}

.atomware-drive-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--atomware-spacing);
    background: var(--atomware-bg-secondary);
    border-bottom: 1px solid var(--atomware-border);
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.atomware-drive-nav {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    flex: 1;
    min-width: 0;
}

.atomware-nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--atomware-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

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

.atomware-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.atomware-nav-btn .material-icons {
    font-size: 22px;
}

.atomware-drive-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    flex: 1 1 0% !important;
}

.atomware-drive-actions > * {
    flex: 0 1 auto;
    margin-bottom: 0;
    margin-right: 0;
    width: auto;
}

/* Ensure last action button has no extra right margin */
.atomware-drive-actions > *:last-child {
    margin-right: 0;
}

.atomware-drive-actions .atomware-btn-secondary,
.atomware-drive-actions .atomware-btn-primary,
.atomware-drive-actions #create-folder-btn,
.atomware-drive-actions #staff-upload-btn {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex !important;
    margin-left: 0;
}

/* Files toolbar: hide Create/Upload when not in a valid folder (overrides other display rules) */
.atomware-files-actions-hidden,
#create-folder-btn.atomware-files-actions-hidden,
#staff-upload-btn.atomware-files-actions-hidden,
#upload-file-btn.atomware-files-actions-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Upload split button: main button + dropdown arrow */
.atomware-upload-split {
    display: inline-flex;
    position: relative;
}
.atomware-upload-split .atomware-upload-label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    justify-content: flex-start;
    text-align: left;
    padding-left: 12px;
}
.atomware-upload-split .atomware-upload-arrow {
    padding: 0 6px;
    border: 1px solid currentColor;
    border-left: none;
    border-radius: 0 var(--atomware-radius-sm, 6px) var(--atomware-radius-sm, 6px) 0;
    background: rgba(255,255,255,0.08);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.atomware-upload-split .atomware-upload-arrow:hover {
    background: rgba(255,255,255,0.12);
}
.atomware-upload-split .atomware-upload-arrow .material-icons {
    font-size: 20px;
}
.atomware-upload-split .atomware-upload-input-hidden {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.atomware-upload-split .atomware-upload-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 160px;
}
.atomware-upload-menu-portal {
    position: fixed !important;
    margin-top: 0 !important;
    width: auto;
    min-width: 140px;
    max-width: 180px;
    background: var(--atomware-bg-secondary, #2a2a2a);
    border: 1px solid var(--atomware-border, #444);
    border-radius: var(--atomware-radius-sm, 6px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 99999;
    padding: 4px 0;
}
.atomware-upload-split .atomware-upload-menu.active,
.atomware-upload-menu-portal.active {
    display: block;
}
.atomware-upload-split .atomware-upload-menu-item,
.atomware-upload-menu-portal .atomware-upload-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--atomware-text-primary, #fff);
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    white-space: nowrap;
}
.atomware-upload-split .atomware-upload-menu-item:hover,
.atomware-upload-menu-portal .atomware-upload-menu-item:hover {
    background: var(--atomware-bg-tertiary, rgba(255,255,255,0.08));
}
.atomware-upload-split .atomware-upload-menu-item .material-icons,
.atomware-upload-menu-portal .atomware-upload-menu-item .material-icons {
    font-size: 18px;
    opacity: 0.9;
    flex-shrink: 0;
}

/* Upload label - contains overlay file input */
.atomware-upload-label {
    position: relative;
    cursor: pointer;
    margin: 0;
}

/* File input overlays the label - click anywhere = click input, opens file dialog */
.atomware-upload-label .atomware-file-upload-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    z-index: 1 !important;
    font-size: 0 !important;
}

/* Small select dropdowns for sort/filter */
.atomware-select-sm {
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius-sm);
    color: var(--atomware-text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%239ca3af'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 100px;
}

.atomware-select-sm:hover {
    border-color: var(--atomware-border-light);
}

.atomware-select-sm:focus {
    outline: none;
    border-color: var(--atomware-primary);
}

.atomware-select-sm option {
    background: var(--atomware-bg-secondary);
    color: var(--atomware-text-primary);
}

/* Enhanced select with avatars (task modals - client & staff dropdowns) */
.atomware-select-enhanced {
    position: relative;
    width: 100%;
}
.atomware-select-enhanced select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}
.atomware-select-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    cursor: pointer;
    min-height: 40px;
}
.atomware-select-trigger:hover {
    border-color: var(--atomware-border-light);
}
.atomware-select-enhanced.atomware-select-open .atomware-select-trigger {
    border-color: var(--atomware-primary);
}
.atomware-select-avatar-wrap {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.atomware-select-avatar-wrap .atomware-select-option-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.atomware-select-avatar-wrap .atomware-select-option-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.atomware-select-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atomware-select-chevron {
    font-size: 20px;
    color: var(--atomware-text-muted);
}
.atomware-select-enhanced.atomware-select-open .atomware-select-chevron {
    transform: rotate(180deg);
}
.atomware-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--atomware-bg-primary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    margin-top: 4px;
}
.atomware-select-enhanced.atomware-select-open .atomware-select-dropdown {
    display: block;
}
.atomware-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.atomware-select-option:hover {
    background: var(--atomware-bg-tertiary);
}
.atomware-select-multi .atomware-select-option.selected {
    background: var(--atomware-primary-light, rgba(var(--atomware-primary-rgb, 33, 150, 243), 0.12));
}
.atomware-select-multi .atomware-select-option.selected::after {
    content: '✓';
    margin-left: auto;
    color: var(--atomware-primary);
    font-weight: bold;
}

/* Files tab (staff + client): custom filter/sort — hidden native <select>, no OS picker */
#tab-files .atomware-select-files-toolbar .atomware-select-dropdown .atomware-select-option {
    padding: 10px 14px;
    font-size: 15px;
    border-bottom: 1px solid var(--atomware-border);
    gap: 0;
}
#tab-files .atomware-select-files-toolbar .atomware-select-dropdown .atomware-select-option:last-child {
    border-bottom: none;
}
#tab-files .atomware-select-files-toolbar .atomware-select-option.atomware-select-option--current {
    color: var(--atomware-primary);
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
}
.atomware-file-select-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10045;
    background: rgba(0, 0, 0, 0.5);
    -webkit-tap-highlight-color: transparent;
}
.atomware-file-select-overlay.active {
    display: block;
}
@media (max-width: 768px) {
    #tab-files .atomware-select-files-toolbar .atomware-select-dropdown {
        position: fixed;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        min-width: 0 !important;
        max-height: min(60vh, 420px) !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0;
        z-index: 10050;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
        padding-top: 8px;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #tab-files .atomware-select-files-toolbar .atomware-select-dropdown::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 4px;
        background: var(--atomware-text-muted);
        opacity: 0.35;
        margin: 0 auto 8px;
    }
    #tab-files .atomware-select-files-toolbar .atomware-select-trigger {
        min-height: 44px;
        font-size: 16px;
    }
    #tab-files .atomware-select-files-toolbar {
        position: relative;
        z-index: 1;
    }
}
.atomware-select-option-avatar-wrap {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.atomware-select-option-avatar-wrap .atomware-select-option-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.atomware-select-option-avatar-wrap .atomware-select-option-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/* Status/Priority enhanced dropdown - colored badges in trigger and options */
.atomware-select-status-priority .atomware-select-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
}
.atomware-select-status-priority .atomware-select-trigger .atomware-select-status-priority-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--atomware-radius-sm);
    font-size: 0.85rem;
    text-transform: capitalize;
    flex: 1;
    min-width: 0;
}
.atomware-select-option-status-priority {
    display: flex;
    align-items: center;
}
.atomware-select-option-status-priority .atomware-status-badge,
.atomware-select-option-status-priority .atomware-task-priority {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--atomware-radius-sm);
    font-size: 0.9rem;
    text-transform: capitalize;
}

/* View Toggle Buttons */
.atomware-view-toggle {
    display: flex;
    background: var(--atomware-bg-tertiary);
    border-radius: var(--atomware-radius-sm);
    padding: 2px;
    margin-right: var(--atomware-spacing-sm);
}

.atomware-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--atomware-radius-sm);
    color: var(--atomware-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

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

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

.atomware-view-btn .material-icons {
    font-size: 18px;
}

.atomware-file-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    flex-wrap: nowrap;
}

.atomware-file-toolbar-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#atomware-client-portal .atomware-file-toolbar-left {
    flex-wrap: nowrap;
    min-width: 0;
}

/* Desktop: primary row is transparent so view + filter + icons keep current flex flow */
.atomware-file-toolbar-primary-row {
    display: contents;
}

#atomware-client-portal .atomware-file-toolbar {
    flex-wrap: nowrap;
    overflow: visible;
}

/* Client portal Files tab: folder tree sidebar + file browser (same layout as Staff) */
#atomware-client-portal .atomware-tab-pane.files-tab.active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
#atomware-client-portal .atomware-tab-pane.files-tab {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
#atomware-client-portal .atomware-tab-pane.files-tab .atomware-file-manager,
#atomware-client-portal .atomware-tab-pane.files-tab .atomware-files-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#atomware-client-portal .atomware-tab-pane.files-tab .atomware-drive-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
#atomware-client-portal .atomware-tab-pane.files-tab .atomware-drive-main {
    width: 100%;
    min-width: 0;
}

.atomware-file-toolbar-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    align-self: center;
}

.atomware-file-toolbar-icons .material-icons {
    display: block;
    line-height: 1;
}

.atomware-file-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

/* Files: make visible download button green */
#selection-toolbar #selection-download-btn {
    background: var(--atomware-success);
    border-color: var(--atomware-success);
    color: #fff;
}
#selection-toolbar #selection-download-btn:hover,
#selection-toolbar #selection-download-btn:focus {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

#atomware-staff-dashboard .atomware-file-toolbar-right .atomware-btn-icon,
#atomware-client-portal .atomware-file-toolbar-right .atomware-btn-icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#atomware-staff-dashboard #file-search-btn,
#atomware-staff-dashboard #files-fullscreen-btn,
#atomware-client-portal #file-search-btn,
#atomware-client-portal #files-fullscreen-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Staff & Client Dashboard Files: scoped toolbar - respects container width, independent of sidebar */
#atomware-staff-dashboard .atomware-files-toolbar-scope,
#atomware-client-portal .atomware-files-toolbar-scope {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    padding: var(--atomware-spacing);
    background: var(--atomware-dashboard-wash-toolbar);
    border-bottom: 1px solid var(--atomware-border-brand-soft, var(--atomware-border));
    overflow-x: hidden;
    overflow-y: visible;
}
/* Do not clip the filter row or New Folder / Upload row (overflow:hidden was hiding them on mobile) */
#tab-files .atomware-files-toolbar-scope {
    overflow-x: hidden;
    overflow-y: visible;
}
#atomware-staff-dashboard .atomware-files-toolbar-scope .atomware-file-toolbar,
#atomware-client-portal .atomware-files-toolbar-scope .atomware-file-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow: visible;
}
#atomware-staff-dashboard .atomware-files-toolbar-scope .atomware-file-toolbar-left,
#atomware-client-portal .atomware-files-toolbar-scope .atomware-file-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
}
#atomware-staff-dashboard .atomware-files-toolbar-scope .atomware-file-toolbar-right,
#atomware-client-portal .atomware-files-toolbar-scope .atomware-file-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    flex-shrink: 0;
}

/* Staff & Client Files tab: ensure file manager and container respect parent width */
#atomware-staff-dashboard #tab-files.atomware-tab-pane.active .atomware-file-manager,
#atomware-staff-dashboard #tab-files.atomware-tab-pane.active .atomware-files-container,
#atomware-client-portal .atomware-tab-pane.files-tab .atomware-file-manager,
#atomware-client-portal .atomware-tab-pane.files-tab .atomware-files-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* When space is tight (sidebar expanded), wrap toolbar so right buttons stay visible */
@media (max-width: 900px) {
    #atomware-staff-dashboard .atomware-files-toolbar-scope .atomware-file-toolbar,
    #atomware-client-portal .atomware-files-toolbar-scope .atomware-file-toolbar {
        flex-wrap: wrap;
    }
    #atomware-staff-dashboard .atomware-files-toolbar-scope .atomware-file-toolbar-right,
    #atomware-client-portal .atomware-files-toolbar-scope .atomware-file-toolbar-right {
        flex-basis: 100%;
        justify-content: flex-end;
        margin-top: 4px;
    }
}

.atomware-file-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Files tab: type + sort — single horizontal group on desktop (was display:block; rows stacked) */
#tab-files .atomware-file-filters-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    min-width: 0;
}

/* Compact height for legacy small selects; native file dropdowns get 16px from responsive rules */
.atomware-file-filter-row .atomware-select-sm:not(.atomware-select-native-file) {
    height: 28px;
    line-height: 1.2;
}

/* Native-styled file filters: never fixed 28px (conflicts with 16px + padding — text was clipped) */
#tab-files .atomware-file-filter-row .atomware-select-sm.atomware-select-native-file,
#tab-files select.atomware-select-native-file {
    height: auto !important;
    min-height: 40px;
    line-height: 1.35;
    box-sizing: border-box;
    color-scheme: dark;
}
#tab-files select.atomware-select-native-file option {
    background-color: var(--atomware-bg-secondary, #1a1a1a);
    color: var(--atomware-text-primary, #e5e7eb);
}

.atomware-view-toggle .atomware-btn-icon {
    height: 28px;
    width: 28px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.atomware-email-move-panel {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: 10px;
    padding: 8px;
}

.atomware-email-move-actions {
    display: flex;
    gap: 6px;
}

.atomware-email-action-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--atomware-border);
    border-radius: 10px;
    background: var(--atomware-bg-secondary);
    color: var(--atomware-text-primary);
    margin: 8px 12px;
}

.atomware-email-action-toast .atomware-email-action-undo {
    margin-left: auto;
    background: rgba(59, 130, 246, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.9);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.atomware-email-action-toast .atomware-email-action-close {
    background: transparent;
    border: 0;
    color: var(--atomware-text-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.atomware-email-detail-move {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border: 1px solid var(--atomware-border);
    border-radius: 10px;
    background: var(--atomware-bg-tertiary);
}

.atomware-email-detail-move-select {
    min-width: 140px;
}

.atomware-email-bulk-move {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

.atomware-email-muted-search {
    margin: 6px 0;
}

.atomware-file-filter-row .atomware-select-sm:not(.atomware-select-native-file) {
    display: inline-flex;
    align-items: center;
}

/* Recycle bin list badges */
.atomware-trash-client-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fde68a;
    color: #7c2d12;
    font-size: 11px;
    font-weight: 700;
    margin-right: 6px;
}
.atomware-trash-location-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.atomware-trash-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.atomware-trash-list .atomware-drive-list-header,
.atomware-trash-list .atomware-trash-item.list-item {
    grid-template-columns: minmax(200px, 3fr) 80px 90px 110px minmax(110px, 1.5fr) 110px 80px;
}
.atomware-trash-list .atomware-list-col-location {
    display: flex;
    align-items: center;
}
.atomware-trash-list .atomware-list-col-owner {
    display: flex;
    align-items: center;
    gap: 8px;
}
.atomware-trash-list .atomware-list-col-owner .atomware-notification-business-logo-wrap {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.atomware-trash-list .atomware-list-col-owner .atomware-trash-client-avatar {
    margin-right: 0;
}
.atomware-trash-location-badge.location-internal {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}
.atomware-trash-location-badge.location-external {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
}
.atomware-trash-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.atomware-trash-sort-label .material-icons {
    font-size: 14px;
    opacity: 0.7;
}
.atomware-trash-sort-label.active .material-icons {
    opacity: 1;
}
.atomware-trash-sort-label.active.asc .material-icons {
    transform: rotate(180deg);
}

/* Recycle bin actions on hover/selected */
.atomware-trash-item .atomware-list-col-actions {
    opacity: 0;
    transition: opacity 120ms ease;
}
.atomware-trash-item:hover .atomware-list-col-actions,
.atomware-trash-item.selected .atomware-list-col-actions {
    opacity: 1;
}

/* Recycle bin header */
.atomware-trash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}
.atomware-trash-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.atomware-trash-header .atomware-btn-danger,
.atomware-trash-header #empty-recycle-bin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.atomware-view-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
}

.atomware-file-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.atomware-file-search-row {
    margin-top: 4px;
}

.atomware-file-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius-sm);
    background: var(--atomware-bg-secondary);
}

.atomware-file-search-inner .material-icons {
    color: var(--atomware-text-muted);
    font-size: 18px;
}

.atomware-file-search-inner .atomware-input {
    border: none;
    background: transparent;
    padding: 4px 0;
}

.atomware-file-search-inner .atomware-input:focus {
    outline: none;
    box-shadow: none;
}

.atomware-file-manager.atomware-files-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: var(--atomware-bg-primary);
    padding: 12px;
}

.atomware-file-manager.atomware-files-fullscreen .atomware-files-container,
.atomware-file-manager.atomware-files-fullscreen .atomware-drive-body {
    height: 100%;
}

.atomware-file-manager.atomware-files-fullscreen .atomware-drive-main,
.atomware-file-manager.atomware-files-fullscreen .atomware-drive-sidebar {
    height: 100%;
}

.atomware-file-manager.atomware-files-fullscreen .atomware-file-browser,
.atomware-file-manager.atomware-files-fullscreen #staff-file-browser {
    height: 100%;
}

.atomware-drive-breadcrumb {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    padding: var(--atomware-spacing-sm) var(--atomware-spacing);
    flex-shrink: 0;
}

.atomware-breadcrumb-left {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}


.atomware-drive-breadcrumb > .atomware-breadcrumb-back {
    margin-right: 0;
    padding-right: 0;
}

/* External folder notice banner (staff, when inside External) */
.atomware-external-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 10px 0;
    background: rgba(66, 133, 244, 0.15);
    border: 1px solid rgba(66, 133, 244, 0.3);
    border-radius: var(--atomware-radius-sm);
    color: var(--atomware-text-primary);
    font-size: 14px;
}
.atomware-external-notice .material-icons {
    color: #4285f4;
    flex-shrink: 0;
}

.atomware-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    color: var(--atomware-text-secondary);
    cursor: pointer;
    border-radius: var(--atomware-radius-sm);
    transition: all 0.2s;
    font-size: 14px;
}

.atomware-drive-breadcrumb .atomware-breadcrumb-item:first-of-type {
    padding-left: 0;
}

.atomware-breadcrumb-item:hover:not(.active) {
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-primary);
}

.atomware-breadcrumb-item.active {
    color: var(--atomware-text-primary);
    font-weight: 500;
    cursor: default;
}

.atomware-breadcrumb-item .material-icons {
    font-size: 18px;
}

.atomware-breadcrumb-sep {
    color: var(--atomware-text-muted);
    font-size: 18px !important;
}

.atomware-drive-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

.atomware-drive-sidebar {
    width: 240px;
    background: var(--atomware-bg-secondary);
    border-right: 1px solid var(--atomware-border);
    overflow: hidden;
    flex-shrink: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Folder tree (Google Drive / Windows Explorer style) */
.atomware-folder-tree {
    min-width: 200px;
    max-width: 280px;
    resize: horizontal;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.atomware-folder-tree-inner {
    padding: 8px 0;
    min-height: 100px;
    height: 100%;
    overflow-y: auto;
}
.atomware-folder-tree-loading {
    padding: 16px;
    color: var(--atomware-text-muted);
    font-size: 0.85rem;
}
.atomware-folder-tree-node {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    cursor: pointer;
    border-radius: 4px;
    margin: 1px 4px;
    min-height: 28px;
    user-select: none;
}
.atomware-folder-tree-node:hover {
    background: var(--atomware-bg-tertiary);
}
.atomware-folder-tree-node.active {
    background: rgba(66, 133, 244, 0.15);
    color: var(--atomware-primary);
}
.atomware-folder-tree-node.drag-over {
    background: rgba(66, 133, 244, 0.2);
    outline: 2px dashed var(--atomware-primary);
}
.atomware-folder-tree-node.drag-blocked {
    background: rgba(239, 68, 68, 0.15);
    outline: 2px dashed var(--atomware-danger);
    cursor: not-allowed;
}
.atomware-folder-tree-expand {
    width: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--atomware-text-muted);
    transition: transform 0.15s;
}
.atomware-folder-tree-node.expanded > .atomware-folder-tree-expand {
    transform: rotate(90deg);
}
.atomware-folder-tree-node.empty > .atomware-folder-tree-expand {
    visibility: hidden;
}
.atomware-folder-tree-icon {
    width: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--atomware-text-muted);
}
.atomware-folder-tree-node.active .atomware-folder-tree-icon {
    color: var(--atomware-primary);
}
.atomware-folder-tree-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}
.atomware-folder-tree-children {
    margin-left: 12px;
    border-left: 1px solid var(--atomware-border);
    margin-left: 20px;
    padding-left: 4px;
}
.atomware-folder-tree-node.root-client {
    font-weight: 600;
    padding: 6px 12px;
}
#atomware-client-portal #folder-tree-sidebar .atomware-folder-tree-node[data-folder-type="external"][data-folder-path=""]:not(.root-client) > .atomware-folder-tree-label {
    display: none;
}
.atomware-folder-tree-client-logo {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.atomware-folder-tree-client-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.atomware-folder-tree-client-logo.atomware-folder-tree-client-initial {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}
.atomware-folder-tree-add-folder {
    opacity: 0;
    margin-left: auto;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}
.atomware-folder-tree-add-folder .material-icons {
    font-size: 16px;
    color: var(--atomware-text-muted);
}
.atomware-folder-tree-add-folder:hover {
    background: var(--atomware-bg-tertiary);
}
.atomware-folder-tree-add-folder:hover .material-icons {
    color: var(--atomware-primary);
}
.atomware-folder-tree-node:hover .atomware-folder-tree-add-folder {
    opacity: 1;
}

/* Hide create folder button on client name folders - only show on My Drive, Internal, External */
.atomware-folder-tree-node[data-type="client"] .atomware-folder-tree-add-folder {
    display: none !important;
}

.atomware-drive-section {
    padding: var(--atomware-spacing);
}

.atomware-drive-section h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--atomware-text-muted);
    margin-bottom: var(--atomware-spacing-sm);
    letter-spacing: 0.5px;
}

.atomware-client-folder {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    padding: 10px 12px;
    color: var(--atomware-text-secondary);
    cursor: pointer;
    border-radius: var(--atomware-radius-sm);
    transition: all 0.2s;
    margin-bottom: 2px;
}

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

.atomware-client-folder.active {
    background: rgba(66, 133, 244, 0.15);
    color: #4285f4;
}

.atomware-client-folder .material-icons {
    font-size: 20px;
    color: #5f6368;
}

.atomware-client-folder.active .material-icons {
    color: #4285f4;
}

.atomware-drive-main {
    flex: 1;
    padding: var(--atomware-spacing);
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Full width when no sidebar */
.atomware-drive-main.atomware-drive-full {
    width: 100%;
    max-width: 100%;
    flex: 1;
    min-height: 0;
}

/* Ensure grid/list container takes full width */
#staff-file-browser {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
}

#staff-file-browser > * {
    width: 100%;
}

.atomware-breadcrumb-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 0;
    padding: 0;
    padding-right: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--atomware-text-muted);
    cursor: pointer;
    align-self: center;
}

.atomware-breadcrumb-back .material-icons {
    font-size: 18px;
    line-height: 1;
}

.atomware-breadcrumb-back:hover {
    color: var(--atomware-text);
    background: rgba(255, 255, 255, 0.06);
}

.atomware-breadcrumb-back:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
}

.atomware-drive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--atomware-spacing);
    width: 100%;
}

.atomware-drive-item {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing);
    padding: var(--atomware-spacing);
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.atomware-drive-item:hover {
    background: var(--atomware-bg-tertiary);
    border-color: var(--atomware-border-light);
    transform: translateY(-1px);
}

.atomware-drive-item-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--atomware-radius);
    flex-shrink: 0;
}

.atomware-drive-item-preview {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--atomware-radius);
    flex-shrink: 0;
    overflow: hidden;
    background: rgba(95, 99, 104, 0.08);
}

.atomware-drive-item-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.atomware-drive-item-icon .material-icons {
    font-size: 28px;
}

.atomware-drive-item.folder .atomware-drive-item-icon {
    background: rgba(95, 99, 104, 0.1);
}

.atomware-drive-item.folder .atomware-drive-item-icon .material-icons {
    color: #5f6368;
}

/* My Drive - personal drive styling (green) */
.atomware-drive-item.mydrive .atomware-drive-item-icon {
    background: rgba(34, 197, 94, 0.15) !important;
}
.atomware-drive-item.mydrive .atomware-drive-item-icon .material-icons {
    color: #22c55e !important;
}
.atomware-drive-item.mydrive:hover {
    background: rgba(34, 197, 94, 0.06);
}
.atomware-folder-tree-node.mydrive .atomware-folder-tree-icon .material-icons {
    color: #22c55e !important;
}

.atomware-drive-item-info {
    flex: 1;
    min-width: 0;
}

.atomware-drive-item-name {
    font-weight: 500;
    color: var(--atomware-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.atomware-drive-item-meta {
    font-size: 12px;
    color: var(--atomware-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
}

.atomware-drive-item-meta .file-type-badge {
    display: inline-block;
    padding: 1px 6px;
    background: var(--atomware-bg-tertiary);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--atomware-text-secondary);
}

.atomware-drive-item-meta .file-size {
    color: var(--atomware-text-muted);
}

.atomware-drive-item-meta .file-owner {
    color: var(--atomware-text-muted);
}

.atomware-item-menu {
    display: none;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    gap: 4px;
}

.atomware-drive-item:hover .atomware-item-menu {
    display: flex;
}

.atomware-item-action {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--atomware-bg-primary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius-sm);
    color: var(--atomware-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.atomware-item-action:hover {
    background: var(--atomware-primary);
    color: white;
    border-color: var(--atomware-primary);
}

.atomware-item-action[data-action="delete"]:hover,
.atomware-item-action[data-action="delete-folder"]:hover,
.atomware-item-action.atomware-item-action-danger:hover {
    background: var(--atomware-danger);
    border-color: var(--atomware-danger);
}

.atomware-item-action .material-icons {
    font-size: 18px;
}

/* List View Styles */
.atomware-drive-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

.atomware-drive-list-header {
    display: grid;
    grid-template-columns: minmax(200px, 3fr) 80px 90px minmax(100px, 1.5fr) 110px 80px;
    align-items: center;
    padding: 12px 16px;
    background: var(--atomware-bg-tertiary);
    border-bottom: 1px solid var(--atomware-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--atomware-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.atomware-drive-item.list-item {
    display: grid;
    grid-template-columns: minmax(200px, 3fr) 80px 90px minmax(100px, 1.5fr) 110px 80px;
    align-items: center;
    padding: 12px 16px;
    background: var(--atomware-bg-primary);
    border: none;
    border-bottom: 1px solid var(--atomware-border);
    border-radius: 0;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* Recycle bin items should use inline list layout */
.atomware-trash-item.list-item {
    display: grid;
    grid-template-columns: minmax(200px, 3fr) 80px 90px minmax(100px, 1.5fr) 110px 80px;
    align-items: center;
    padding: 12px 16px;
    background: var(--atomware-bg-primary);
    border: none;
    border-bottom: 1px solid var(--atomware-border);
    border-radius: 0;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.atomware-trash-item.list-item:hover {
    background: var(--atomware-bg-secondary);
    transform: none;
}

.atomware-drive-item.list-item:hover {
    background: var(--atomware-bg-secondary);
    transform: none;
}

.atomware-drive-item.list-item:last-child {
    border-bottom: none;
}

.atomware-list-col-name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.atomware-list-col-name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--atomware-text-primary);
}

.atomware-list-col-name .material-icons {
    font-size: 24px;
    flex-shrink: 0;
}

.atomware-list-col-size {
    font-size: 13px;
    color: var(--atomware-text-secondary);
    white-space: nowrap;
}

.atomware-list-col-owner {
    font-size: 13px;
    color: var(--atomware-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atomware-list-col-date {
    font-size: 13px;
    color: var(--atomware-text-secondary);
    white-space: nowrap;
}

.atomware-list-col-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--atomware-text-muted);
    text-transform: uppercase;
}

/* Sortable column headers */
.atomware-list-col-sortable {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}

.atomware-list-col-sortable:hover {
    color: var(--atomware-text-primary);
}

.atomware-list-col-sortable .sort-icon {
    font-size: 14px;
    color: var(--atomware-primary);
}

.atomware-list-col-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.atomware-drive-item.list-item:hover .atomware-list-col-actions {
    opacity: 1;
}

.atomware-drive-item.list-item .atomware-item-action {
    width: 28px;
    height: 28px;
}

.atomware-drive-item.list-item .atomware-item-action .material-icons {
    font-size: 16px;
}

/* =========================================
   Drag and Drop File Management
   ========================================= */

/* Draggable files cursor */
.atomware-drive-item.file[draggable="true"] {
    cursor: grab;
}

.atomware-drive-item.file[draggable="true"]:active {
    cursor: grabbing;
}

/* File being dragged */
.atomware-drive-item.file.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

/* Selected file */
.atomware-drive-item.selected {
    background: rgba(96, 165, 250, 0.15) !important;
    border-color: var(--atomware-primary) !important;
}

.atomware-drive-item.list-item.selected {
    background: rgba(96, 165, 250, 0.1) !important;
}

/* List view file being dragged */
.atomware-drive-item.list-item.file.dragging {
    opacity: 0.5;
    background: var(--atomware-bg-tertiary);
}

/* Folder as drop target */
.atomware-drive-item.folder.drag-over {
    background: rgba(96, 165, 250, 0.15) !important;
    border: 2px dashed var(--atomware-primary) !important;
    transform: scale(1.02);
}

.atomware-drive-item.folder.drag-over .atomware-drive-item-icon .material-icons {
    color: var(--atomware-primary) !important;
}

/* Breadcrumb as drop target */
.atomware-breadcrumb-item.drag-over {
    background: rgba(96, 165, 250, 0.2) !important;
    border-radius: 4px;
}

/* Delete drop zone */
#delete-drop-zone {
    position: fixed;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 70px;
    background: var(--atomware-danger);
    border-radius: 12px 12px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: white;
    font-weight: 500;
    font-size: 13px;
    z-index: 10000;
    transition: bottom 0.3s ease, background 0.2s ease;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

#delete-drop-zone .material-icons {
    font-size: 28px;
}

#delete-drop-zone.visible {
    bottom: 0;
}

#delete-drop-zone.drag-over {
    background: #dc2626;
    height: 90px;
}

#delete-drop-zone.drag-over .material-icons {
    animation: shake 0.3s ease-in-out infinite;
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

/* =========================================
   Multi-Select & Selection Toolbar
   ========================================= */

.atomware-select-checkbox {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    cursor: pointer;
    accent-color: var(--atomware-primary);
    flex-shrink: 0;
    position: absolute;
    top: 8px;
    left: 8px;
    opacity: 1;
    z-index: 20;
    pointer-events: auto;
}

/* Grid: show on hover or when selection active */
.atomware-drive-grid .atomware-drive-item .atomware-select-checkbox {
    opacity: 0;
    transition: opacity 0.15s;
}
.atomware-drive-grid .atomware-drive-item:hover .atomware-select-checkbox,
#staff-file-browser.atomware-selection-active .atomware-drive-grid .atomware-select-checkbox {
    opacity: 1;
}

/* Reserve space for checkbox so preview doesn't overlap - grid items with checkboxes only */
.atomware-drive-grid .atomware-drive-item.has-select-checkbox,
.atomware-drive-grid .atomware-drive-item:has(.atomware-select-checkbox) {
    padding-left: 28px;
}

.atomware-drive-item.list-item .atomware-select-checkbox {
    position: relative;
    top: auto;
    left: auto;
    opacity: 1;
    margin-right: 8px;
}

.atomware-drive-item.selected {
    background: rgba(66, 133, 244, 0.15) !important;
    border-color: var(--atomware-primary) !important;
}

.atomware-selection-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--atomware-spacing);
    background: rgba(66, 133, 244, 0.1);
    border-bottom: 1px solid var(--atomware-primary);
    gap: var(--atomware-spacing);
}

.atomware-selection-toolbar .selection-info {
    font-weight: 500;
    color: var(--atomware-primary);
}

.atomware-selection-toolbar .selection-actions {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
}

.atomware-selection-toolbar .atomware-btn-secondary,
.atomware-selection-toolbar .atomware-btn-danger {
    padding: 6px 12px;
    font-size: 13px;
}

.atomware-selection-toolbar .atomware-btn-link {
    padding: 4px;
    color: var(--atomware-text-muted);
}

.atomware-selection-toolbar .atomware-btn-link:hover {
    color: var(--atomware-text-primary);
}

/* Files tab: selection bar on mobile — icon-only actions (labels stay in title tooltips) */
@media (max-width: 768px) {
    #tab-files #selection-toolbar.atomware-selection-toolbar {
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        gap: 6px 8px;
        padding: 8px 8px;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    #tab-files #selection-toolbar .selection-info {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 42%;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #tab-files #selection-toolbar .selection-actions {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
    }
    /* Hide "Download", "Share", "Create Task", "Create Note", "Delete" captions */
    #tab-files #selection-toolbar .selection-actions > .atomware-btn-secondary > span,
    #tab-files #selection-toolbar .selection-actions > .atomware-btn-danger > span {
        display: none !important;
    }
    #tab-files #selection-toolbar .selection-actions .atomware-btn-secondary,
    #tab-files #selection-toolbar .selection-actions .atomware-btn-danger {
        padding: 0;
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        font-size: 0;
        line-height: 0;
    }
    #tab-files #selection-toolbar .selection-actions .atomware-btn-secondary .material-icons,
    #tab-files #selection-toolbar .selection-actions .atomware-btn-danger .material-icons {
        font-size: 22px;
        line-height: 1;
    }
    #tab-files #selection-toolbar .selection-actions .atomware-btn-link {
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }
    #tab-files #selection-toolbar .selection-actions .atomware-btn-link .material-icons {
        font-size: 22px;
    }
}

/* =========================================
   Context Menu Styles
   ========================================= */

.atomware-context-menu {
    position: fixed;
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    min-width: 180px;
    padding: 6px 0;
    z-index: 10001;
    animation: contextMenuFadeIn 0.15s ease;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.atomware-context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    color: var(--atomware-text-primary);
    font-size: 13px;
    transition: background 0.15s;
}

.atomware-context-menu-item:hover {
    background: var(--atomware-bg-tertiary);
}

.atomware-context-menu-item .material-icons {
    font-size: 18px;
    color: var(--atomware-text-secondary);
}

.atomware-context-menu-item:hover .material-icons {
    color: var(--atomware-text-primary);
}

.atomware-context-menu-item.danger {
    color: var(--atomware-danger);
}

.atomware-context-menu-item.danger .material-icons {
    color: var(--atomware-danger);
}

.atomware-context-menu-item.danger:hover {
    background: rgba(248, 113, 113, 0.1);
}

.atomware-context-menu-item.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.atomware-context-menu-divider {
    height: 1px;
    background: var(--atomware-border);
    margin: 6px 0;
}
/* Context menu responsive */
@media (max-width: 768px) {
    .atomware-context-menu {
        min-width: 160px;
    }
    .atomware-context-menu-item {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* =========================================
   File Details Modal Styles
   ========================================= */

.file-details-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--atomware-border);
}


.file-details-preview img {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--atomware-radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.file-details-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-details-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--atomware-bg-tertiary);
    border-radius: var(--atomware-radius-sm);
}

.file-details-row .label {
    font-size: 13px;
    color: var(--atomware-text-muted);
    font-weight: 500;
}

.file-details-row .value {
    font-size: 13px;
    color: var(--atomware-text-primary);
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* Empty states */
.atomware-drive-welcome,
.atomware-drive-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    text-align: center;
    color: var(--atomware-text-secondary);
}

.atomware-drive-welcome .material-icons,
.atomware-drive-empty .material-icons {
    font-size: 64px;
    color: var(--atomware-text-muted);
    margin-bottom: var(--atomware-spacing);
    opacity: 0.5;
}

.atomware-drive-welcome h3,
.atomware-drive-empty h4 {
    margin-bottom: var(--atomware-spacing-sm);
    color: var(--atomware-text-primary);
}

.atomware-drive-welcome p,
.atomware-drive-empty p {
    color: var(--atomware-text-muted);
}

.atomware-file-action-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--atomware-danger);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: var(--atomware-radius-sm);
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.atomware-file-action-info {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid var(--atomware-success);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: var(--atomware-radius-sm);
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.atomware-selection-box {
    position: absolute;
    border: 2px dashed var(--atomware-primary);
    background: rgba(59, 130, 246, 0.2);
    pointer-events: none;
    z-index: 100;
    min-width: 4px;
    min-height: 4px;
}

/* Drag and drop */
.atomware-drive-main.dragover,
#staff-file-browser.dragover {
    background: rgba(66, 133, 244, 0.1);
    border: 2px dashed #4285f4;
}

.atomware-upload-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    padding: 10px 12px;
    width: 220px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    font-size: 12px;
    color: #ffffff;
}

.atomware-email-folder-link,
.atomware-email-folder-link .material-icons,
.atomware-email-client-list .atomware-email-business-chip,
.atomware-email-client-list .atomware-email-business-chip .material-icons {
    color: #ffffff;
}

.atomware-email-sidebar-panel[data-panel="folders"] .atomware-email-business-chip {
    color: #ffffff;
}
.atomware-upload-toast-title {
    font-weight: 600;
    margin-bottom: 6px;
    color: #ffffff;
}
.atomware-upload-toast-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
}
.atomware-upload-toast-bar-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.atomware-upload-toast-cancel {
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.atomware-upload-toast-cancel:disabled {
    opacity: 0.5;
    cursor: default;
}
.atomware-input-with-action {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.atomware-input-with-action .atomware-input {
    flex: 1;
    padding-right: 38px;
}
.atomware-password-icon-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
}
.atomware-password-icon-btn .material-icons {
    font-size: 18px;
}
.atomware-upload-toast-bar span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--atomware-primary);
    transition: width 0.2s ease;
}
.atomware-upload-toast-meta {
    margin-top: 6px;
    color: #ffffff;
    opacity: 0.85;
}
.atomware-upload-toast.done .atomware-upload-toast-bar span {
    background: var(--atomware-success);
}

.atomware-upload-toast.error {
    border-color: var(--atomware-danger, #f44336);
}
.atomware-upload-toast.error .atomware-upload-toast-bar span {
    background: var(--atomware-danger, #f44336);
}

/* Small loading/empty states */
.atomware-loading-sm,
.atomware-empty-sm,
.atomware-error-sm {
    padding: var(--atomware-spacing);
    text-align: center;
    color: var(--atomware-text-muted);
    font-size: 13px;
}

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

/* Responsive */
@media (max-width: 768px) {
    .atomware-drive-sidebar {
        display: none;
    }
    
    .atomware-drive-grid {
        grid-template-columns: 1fr;
    }
    
    .atomware-drive-header {
        flex-direction: column;
        gap: var(--atomware-spacing-sm);
        align-items: stretch;
    }
    
    .atomware-drive-nav {
        width: 100%;
    }
    
    .atomware-drive-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100%;
        justify-content: flex-end;
        overflow-x: auto;
    }
}

/* Task Card Enhancements */
.atomware-task-card {
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
    padding: var(--atomware-spacing-md);
    margin-bottom: var(--atomware-spacing-md);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.atomware-task-card:hover {
    background: var(--atomware-bg-tertiary);
    border-color: var(--atomware-primary);
}

/* Running Task Pulse – Current User (primary) */
.atomware-task-card.running.running-own {
    border-left: 4px solid var(--atomware-success);
    animation: task-pulse-own 2s infinite;
}

@keyframes task-pulse-own {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.15);
    }
}

/* Running Task Pulse – Other Team Members (secondary) */
.atomware-task-card.running.running-other {
    border-left: 4px solid var(--atomware-primary);
    animation: task-pulse-other 2s infinite;
}

@keyframes task-pulse-other {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.15);
    }
}

.atomware-task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--atomware-spacing-sm);
}

.atomware-task-title {
    font-weight: 500;
    color: var(--atomware-text-primary);
    flex: 1;
    margin-right: var(--atomware-spacing-sm);
}

.atomware-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atomware-spacing-sm);
    font-size: 0.85rem;
    color: var(--atomware-text-muted);
    margin-bottom: var(--atomware-spacing-sm);
}

.atomware-task-description-preview {
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
    line-height: 1.35;
    margin-bottom: var(--atomware-spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atomware-task-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.atomware-task-meta .material-icons {
    font-size: 16px;
}

.atomware-task-business-logo-wrap {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}
.atomware-task-business-logo-wrap .atomware-task-business-logo,
.atomware-task-business-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.atomware-note-business-logo-wrap {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}
.atomware-note-business-logo-wrap .atomware-note-business-logo,
.atomware-note-business-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.atomware-task-business-placeholder {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: #fff;
    vertical-align: middle;
    flex-shrink: 0;
}
.atomware-task-business .atomware-note-business-logo-wrap,
.atomware-task-business .atomware-task-business-logo-wrap {
    margin-right: 4px;
}

/* Client logo on task card - hover = green (complete action), click completes task */
.atomware-task-card .atomware-task-business {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.atomware-task-card .atomware-task-business:hover .atomware-task-business-logo-wrap,
.atomware-task-card .atomware-task-business:hover .atomware-task-business-logo,
.atomware-task-card .atomware-task-business:hover .atomware-task-business-placeholder {
    box-shadow: 0 0 0 2px var(--atomware-success, #34d399);
    transition: box-shadow 0.2s ease;
}
.atomware-task-card .atomware-task-business .atomware-task-business-logo-wrap,
.atomware-task-card .atomware-task-business .atomware-task-business-logo,
.atomware-task-card .atomware-task-business .atomware-task-business-placeholder {
    transition: box-shadow 0.2s ease;
}
/* No hover/click for already-completed tasks */
.atomware-task-card.completed .atomware-task-business {
    cursor: default;
}
.atomware-task-card.completed .atomware-task-business:hover .atomware-task-business-logo-wrap,
.atomware-task-card.completed .atomware-task-business:hover .atomware-task-business-logo,
.atomware-task-card.completed .atomware-task-business:hover .atomware-task-business-placeholder {
    box-shadow: none;
}

.atomware-task-assignee-avatar-wrap {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.atomware-task-assignee-avatar-wrap .atomware-task-assignee-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Task Due Date Styles */
.atomware-task-due {
    display: flex;
    align-items: center;
    gap: 4px;
}

.atomware-task-due.overdue,
.overdue {
    color: var(--atomware-danger) !important;
    font-weight: 600;
}

/* Task Actions */
.atomware-task-actions {
    display: flex;
    gap: var(--atomware-spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

/* Task card bottom bar - client color (border-top + background). Extend to card edges, white content. */
.atomware-task-card .atomware-task-actions-bar {
    margin-left: calc(-1 * var(--atomware-spacing-md, 12px));
    margin-right: calc(-1 * var(--atomware-spacing-md, 12px));
    margin-bottom: calc(-1 * var(--atomware-spacing-md, 12px));
    padding: 8px var(--atomware-spacing-md, 12px);
    margin-top: var(--atomware-spacing-md, 12px);
    border-radius: 0 0 var(--atomware-radius, 6px) var(--atomware-radius, 6px);
    color: #fff;
}
.atomware-task-card .atomware-task-actions-bar .atomware-share-task-btn,
.atomware-task-card .atomware-task-actions-bar .edit-task-btn {
    color: rgba(255, 255, 255, 0.9);
}
.atomware-task-card .atomware-task-actions-bar .atomware-share-task-btn:hover,
.atomware-task-card .atomware-task-actions-bar .edit-task-btn:hover {
    color: #fff;
}
.atomware-task-card .atomware-task-actions-bar .atomware-share-task-btn .material-icons,
.atomware-task-card .atomware-task-actions-bar .edit-task-btn .material-icons {
    color: inherit;
}
.atomware-task-card .atomware-task-actions-bar .assign-task-btn,
.atomware-task-card .atomware-task-actions-bar .stop-timer-btn {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}
.atomware-task-card .atomware-task-actions-bar .assign-task-btn:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
}
.atomware-task-card .atomware-task-actions-bar .start-timer-btn {
    background: var(--atomware-success, #10b981) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.atomware-task-card .atomware-task-actions-bar .start-timer-btn:hover {
    background: var(--atomware-success, #10b981) !important;
    filter: brightness(1.1);
    color: #fff !important;
}
.atomware-task-card .atomware-task-actions-bar .stop-timer-btn {
    background: rgba(255, 255, 255, 0.2) !important;
}
.atomware-task-card .atomware-task-actions-bar .atomware-task-running {
    color: rgba(255, 255, 255, 0.95);
}
.atomware-task-card .atomware-task-actions-bar .atomware-task-running .material-icons {
    color: inherit;
}

/* Share Task Button - tiny icon: 8px desktop, 6px tablet/phone */
.atomware-share-task-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--atomware-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.2s;
}
.atomware-share-task-btn:hover {
    color: var(--atomware-primary);
}
/* Share icon: 8px desktop, 6px tablet/phone (minimal share button) */
.atomware-share-task-btn .material-icons {
    font-size: 8px;
    min-width: 8px;
}
@media (max-width: 1024px) {
    .atomware-share-task-btn .material-icons {
        font-size: 6px;
        min-width: 6px;
    }
}
@media (max-width: 600px) {
    .atomware-share-task-btn .material-icons {
        font-size: 6px;
        min-width: 6px;
    }
}

/* Share Task Modal */
.atomware-share-task-intro {
    margin: 0 0 var(--atomware-spacing-md);
    color: var(--atomware-text-muted);
    font-size: 0.9rem;
}
.atomware-share-note-intro {
    margin: 0 0 var(--atomware-spacing-md);
    color: var(--atomware-text-muted);
    font-size: 0.9rem;
}
.atomware-share-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--atomware-spacing-lg);
}
.atomware-modal#share-file-modal .atomware-share-sections {
    grid-template-columns: 1fr;
}
.atomware-share-sections.atomware-share-sections-vertical {
    grid-template-columns: 1fr !important;
}
@media (max-width: 600px) {
    .atomware-share-sections {
        grid-template-columns: 1fr;
    }
}
.atomware-share-section h4 {
    margin: 0 0 var(--atomware-spacing-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--atomware-text-primary);
}
.atomware-share-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius-sm);
    padding: var(--atomware-spacing-sm);
    background: var(--atomware-bg-tertiary);
}
.atomware-share-item {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9rem;
}
.atomware-share-item:hover {
    background: var(--atomware-bg-secondary);
}
.atomware-share-item input {
    margin: 0;
}
.atomware-share-item .material-icons {
    font-size: 18px;
    color: var(--atomware-text-muted);
}

/* Inline task/note/file links in chat */
.atomware-inline-task-link,
.atomware-inline-note-link,
.atomware-inline-file-link {
    color: #1d4ed8 !important; /* Dark blue for contrast on light bubbles */
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* Own message bubbles use primary background - links need light color */
.atomware-message.own .atomware-inline-task-link,
.atomware-message.own .atomware-inline-note-link,
.atomware-message.own .atomware-inline-file-link {
    color: rgba(255,255,255,0.95) !important;
    text-decoration: underline;
}
.atomware-inline-task-link:hover,
.atomware-inline-note-link:hover,
.atomware-inline-file-link:hover {
    text-decoration: underline;
}
.atomware-message.own .atomware-inline-task-link:hover,
.atomware-message.own .atomware-inline-note-link:hover,
.atomware-message.own .atomware-inline-file-link:hover {
    color: #fff !important;
}
.atomware-inline-view-icon {
    font-size: 14px !important;
    opacity: 0.8;
}

/* Link preview card (WhatsApp/Facebook style) */
.atomware-link-preview {
    margin-top: 8px;
    max-width: 320px;
}
.atomware-link-preview-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--atomware-bg-secondary);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.atomware-link-preview-card:hover {
    border-color: var(--atomware-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.atomware-message.own .atomware-link-preview-card {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
}
.atomware-message.own .atomware-link-preview-card:hover {
    border-color: rgba(255,255,255,0.5);
}
.atomware-link-preview-img {
    max-height: 160px;
    overflow: hidden;
    background: var(--atomware-bg-tertiary);
}
.atomware-link-preview-img img {
    width: 100%;
    height: auto;
    display: block;
}
.atomware-link-preview-body {
    padding: 10px 12px;
}
.atomware-link-preview-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: var(--atomware-text-primary);
}
.atomware-message.own .atomware-link-preview-title {
    color: #fff;
}
.atomware-link-preview-desc {
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
    line-height: 1.4;
    margin-bottom: 4px;
}
.atomware-message.own .atomware-link-preview-desc {
    color: rgba(255,255,255,0.8);
}
.atomware-link-preview-url {
    font-size: 0.75rem;
    color: var(--atomware-primary);
}
.atomware-message.own .atomware-link-preview-url {
    color: rgba(255,255,255,0.9);
}
.atomware-external-link {
    color: var(--atomware-primary) !important;
    text-decoration: underline;
}
.atomware-message.own .atomware-external-link {
    color: rgba(255,255,255,0.95) !important;
}

/* KB Article Widget Card - Matches .atomware-kb-card styling */
/* Client branding bar for widgets */
.atomware-widget-client-bar {
    height: 4px;
    margin-bottom: 12px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    opacity: 0.85;
}

/* Client logo for widgets */
.atomware-widget-client-logo {
    height: 24px;
    width: auto;
    max-width: 40px;
    border-radius: 3px;
    object-fit: contain;
    margin-left: auto;
    flex-shrink: 0;
}

/* Corner badge logo positioning */
.atomware-widget-logo-corner {
    position: absolute;
    top: 12px;
    right: 12px;
    height: 32px;
    width: auto;
    max-width: 48px;
    border-radius: 4px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.atomware-kb-widget-card {
    margin-top: 8px;
    max-width: 340px;
    width: 100%;
    position: relative;
}
.atomware-kb-widget-link {
    display: block;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid var(--atomware-border);
    border-radius: 12px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
    position: relative;
}
.atomware-kb-widget-link:first-child {
    margin-top: 0;
}
.atomware-kb-widget-link .atomware-widget-client-bar {
    margin: -16px -16px 12px -16px;
    width: calc(100% + 32px);
    border-radius: 12px 12px 0 0;
}
.atomware-kb-widget-link:hover {
    border-color: var(--atomware-primary);
    box-shadow: 0 4px 16px rgba(96, 165, 250, 0.1);
    transform: translateY(-2px);
}
.atomware-message.own .atomware-kb-widget-link {
    background: rgba(10, 10, 10, 0.6);
    border-color: rgba(255,255,255,0.15);
}
.atomware-message.own .atomware-kb-widget-link:hover {
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 4px 16px rgba(255,255,255,0.1);
}
.atomware-kb-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.atomware-kb-widget-icon {
    font-size: 18px;
    flex-shrink: 0;
    color: var(--atomware-text-muted);
}
.atomware-kb-widget-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--atomware-text-muted);
    margin-bottom: 8px;
    white-space: nowrap;
    display: inline-block;
}
.atomware-kb-widget-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--atomware-text-primary);
    margin: 0;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
    flex: 1;
}
.atomware-message.own .atomware-kb-widget-title {
    color: #fff;
}
.atomware-kb-widget-excerpt {
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
    margin: 0 0 10px 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.atomware-message.own .atomware-kb-widget-excerpt {
    color: rgba(255,255,255,0.7);
}
.atomware-kb-widget-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 0.75rem;
    color: var(--atomware-text-muted);
}
.atomware-kb-widget-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.atomware-kb-widget-meta .material-icons {
    font-size: 14px;
}
.atomware-kb-widget-cat,
.atomware-kb-widget-tag {
    display: inline-block;
    background: rgba(96, 165, 250, 0.15);
    color: var(--atomware-primary);
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
}
.atomware-kb-widget-cat:hover,
.atomware-kb-widget-tag:hover {
    background: rgba(96, 165, 250, 0.25);
}
.atomware-message.own .atomware-kb-widget-cat,
.atomware-message.own .atomware-kb-widget-tag {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
}

/* Note Widget Card - Staff Only, Staff Chats/Channels */
.atomware-note-widget-card {
    margin-top: 8px;
    max-width: 340px;
    width: 100%;
    position: relative;
}
.atomware-note-widget-link {
    display: block;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid var(--atomware-border);
    border-radius: 8px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
}
.atomware-note-widget-link .atomware-widget-client-bar {
    margin: -12px -12px 12px -12px;
    width: calc(100% + 24px);
    border-radius: 8px 8px 0 0;
}
.atomware-note-widget-link:hover {
    border-color: var(--atomware-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
}
.atomware-message.own .atomware-note-widget-link {
    background: rgba(10, 10, 10, 0.6);
    border-color: rgba(255,255,255,0.15);
}
.atomware-message.own .atomware-note-widget-link:hover {
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}
.atomware-note-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.atomware-note-widget-icon {
    font-size: 18px;
    flex-shrink: 0;
    color: #ffffff;
}
.atomware-note-widget-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #ffffff;
    margin-left: 6px;
    white-space: nowrap;
}
.atomware-note-widget-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #ffffff;
}
.atomware-task-widget-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--atomware-text-muted);
    margin-bottom: 8px;
    white-space: nowrap;
    display: inline-block;
}
.atomware-task-widget-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.atomware-note-widget-title {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--atomware-text-primary);
    line-height: 1.3;
    flex: 1;
    margin: 0;
}
.atomware-message.own .atomware-note-widget-title {
    color: #fff;
}
.atomware-note-widget-description {
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.atomware-message.own .atomware-note-widget-description {
    color: rgba(255,255,255,0.7);
}
.atomware-note-widget-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
}
.atomware-note-widget-assignee,
.atomware-note-widget-business,
.atomware-note-widget-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
}
.atomware-note-widget-assignee .material-icons,
.atomware-note-widget-business .material-icons,
.atomware-note-widget-date .material-icons {
    font-size: 16px;
    height: 16px;
    width: 16px;
}
.atomware-message.own .atomware-note-widget-assignee,
.atomware-message.own .atomware-note-widget-business,
.atomware-message.own .atomware-note-widget-date {
    color: rgba(255,255,255,0.75);
}

/* Task Widget Card - Matches .atomware-task-card styling */
.atomware-task-widget-card {
    margin-top: 8px;
    max-width: 340px;
    width: 100%;
    position: relative;
}
.atomware-task-widget-link {
    display: block;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid var(--atomware-border);
    border-radius: 6px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
}
.atomware-task-widget-link .atomware-widget-client-bar {
    margin: -12px -12px 12px -12px;
    width: calc(100% + 24px);
    border-radius: 6px 6px 0 0;
}
.atomware-task-widget-link:hover {
    border-color: var(--atomware-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
}
.atomware-message.own .atomware-task-widget-link {
    background: rgba(10, 10, 10, 0.6);
    border-color: rgba(255,255,255,0.15);
}
.atomware-message.own .atomware-task-widget-link:hover {
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}
.atomware-task-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.atomware-task-widget-icon {
    font-size: 18px;
    flex-shrink: 0;
    color: var(--atomware-text-muted);
    margin-right: 6px;
}
.atomware-task-widget-title {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--atomware-text-primary);
    line-height: 1.3;
    flex: 1;
    margin: 0;
}
.atomware-message.own .atomware-task-widget-title {
    color: #fff;
}
.atomware-task-widget-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.65rem;
    text-transform: capitalize;
    margin-left: 8px;
    white-space: nowrap;
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
}
.atomware-task-widget-description {
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.atomware-message.own .atomware-task-widget-description {
    color: rgba(255,255,255,0.7);
}
.atomware-task-widget-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
}
.atomware-task-widget-assignee,
.atomware-task-widget-due,
.atomware-task-widget-priority {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
}
.atomware-task-widget-assignee .material-icons,
.atomware-task-widget-due .material-icons,
.atomware-task-widget-priority .material-icons {
    font-size: 16px;
    height: 16px;
    width: 16px;
}
.atomware-task-widget-priority {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: white;
}
.atomware-message.own .atomware-task-widget-assignee,
.atomware-message.own .atomware-task-widget-due,
.atomware-message.own .atomware-task-widget-priority {
    color: rgba(255,255,255,0.75);
}

/* Client-colored bubbles: links use custom contrast */
.atomware-message-body-client-color .atomware-external-link,
.atomware-message-body-client-color .atomware-inline-task-link,
.atomware-message-body-client-color .atomware-inline-note-link,
.atomware-message-body-client-color .atomware-inline-file-link {
    color: var(--atomware-bubble-link, var(--atomware-primary)) !important;
}

/* Credential shared in chat - visible for 1 min */
.atomware-credential-card {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--atomware-bg-secondary, #f3f4f6);
    font-size: 0.9rem;
}
.atomware-credential-card .atomware-credential-row {
    margin: 4px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.atomware-credential-card .atomware-credential-label {
    font-weight: 500;
    color: var(--atomware-text-secondary, #6b7280);
    min-width: 90px;
}
.atomware-credential-card .atomware-credential-password-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.atomware-credential-card .atomware-credential-password-toggle {
    padding: 2px;
    min-width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.atomware-credential-card .atomware-credential-password-toggle .material-icons {
    font-size: 18px;
}
.atomware-credential-expired {
    color: var(--atomware-text-secondary, #6b7280);
    font-style: italic;
}

.atomware-secure-credential-summary {
    font-weight: 600;
}

.atomware-secure-credential-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--atomware-text-secondary, #9ca3af);
}

.atomware-secure-credential-preview {
    margin-top: 8px;
}

.atomware-secure-credential-card .atomware-secure-credential-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.atomware-secure-credential-card .atomware-secure-credential-details {
    margin-top: 8px;
    border-top: 1px solid var(--atomware-border, rgba(148, 163, 184, 0.2));
    padding-top: 8px;
}

.atomware-secure-credential-card .atomware-secure-credential-password {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    letter-spacing: 0.02em;
}

/* Running Indicator */
.atomware-task-running {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--atomware-success);
    font-size: 0.85rem;
    font-weight: 500;
}

.atomware-task-running .material-icons {
    font-size: 14px;
}

.atomware-task-running .material-icons.blink {
    animation: blink 1s infinite;
}

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

/* Task Priority Badges */
.atomware-task-priority {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: capitalize;
}

.atomware-task-priority.low {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.atomware-task-priority.normal {
    background: rgba(59, 130, 246, 0.2);
    color: #4a7eed;
}

.atomware-task-priority.high {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Task Detail Edit Actions */
.atomware-task-edit-actions {
    background: var(--atomware-bg-tertiary);
    border-radius: var(--atomware-radius);
    padding: var(--atomware-spacing-md);
    margin-top: var(--atomware-spacing-md);
}

.atomware-task-edit-actions h5 {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    margin-bottom: var(--atomware-spacing-md);
    color: var(--atomware-text-primary);
}

.atomware-task-edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--atomware-spacing-md);
    margin-bottom: var(--atomware-spacing-md);
}

.atomware-time-entry {
    display: flex;
    gap: var(--atomware-spacing-sm);
}

.atomware-time-entry input {
    flex: 1;
}

.atomware-task-edit-buttons {
    display: flex;
    gap: var(--atomware-spacing-md);
    flex-wrap: wrap;
    margin-top: var(--atomware-spacing-md);
    padding-top: var(--atomware-spacing-lg);
    border-top: 1px solid var(--atomware-border);
}

#task-detail-modal .atomware-task-edit-buttons .atomware-btn-primary,
#task-detail-modal .atomware-task-edit-buttons .atomware-btn-secondary {
    padding: 10px 20px;
    font-weight: 500;
    border-radius: var(--atomware-radius);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#task-detail-modal .atomware-file-upload-area {
    padding: var(--atomware-spacing-md) 0;
}

#task-detail-modal #add-files-btn {
    padding: 10px 18px;
    font-weight: 500;
    border-radius: var(--atomware-radius);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    color: var(--atomware-text-primary);
    transition: all 0.2s ease;
}

#task-detail-modal #add-files-btn:hover {
    background: var(--atomware-bg-secondary);
    border-color: var(--atomware-primary);
    color: var(--atomware-primary);
}

/* Button Variations */
.atomware-btn-danger {
    background: var(--atomware-danger);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--atomware-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.atomware-btn-danger:hover {
    opacity: 0.9;
}

/* Responsive Task Edit */
@media (max-width: 768px) {
    .atomware-task-edit-row {
        grid-template-columns: 1fr;
    }
    
    .atomware-time-entry {
        flex-direction: column;
    }
    
    .atomware-task-edit-buttons {
        flex-direction: column;
    }
    
    .atomware-task-edit-buttons button {
        width: 100%;
        justify-content: center;
    }
}

/* Task Card Header */
.atomware-task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--atomware-spacing-sm);
    margin-bottom: var(--atomware-spacing-sm);
}

.atomware-task-header-right {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    flex-shrink: 0;
}
.atomware-task-repeat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    color: var(--atomware-text-muted);
}

/* Task Status Select Dropdown */
.atomware-status-select {
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius-sm);
    color: var(--atomware-text-primary);
    padding: 4px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    min-width: 100px;
}

.atomware-status-select:focus {
    outline: none;
    border-color: var(--atomware-primary);
}

/* Completed Task Card */
.atomware-task-card.completed {
    opacity: 0.7;
}

.atomware-task-card.completed .atomware-task-title {
    text-decoration: line-through;
    color: var(--atomware-text-muted);
}

/* Context Menu for Calendar Tasks */
.atomware-context-menu {
    position: fixed;
    background: var(--atomware-bg-secondary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    z-index: 10000;
    overflow: hidden;
}

.atomware-context-menu-header {
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--atomware-text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--atomware-border);
}

.atomware-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--atomware-text-primary);
}

.atomware-context-menu-item:hover {
    background: var(--atomware-bg-tertiary);
}

.atomware-context-menu-item.active {
    background: var(--atomware-primary);
    color: white;
}

.atomware-context-menu-item .material-icons {
    font-size: 18px;
}

.atomware-context-menu-divider {
    border-top: 1px solid var(--atomware-border);
    margin: 4px 0;
}

/* Calendar Task Status Styling */
.atomware-calendar-task {
    cursor: pointer;
    position: relative;
}

.atomware-calendar-task.status-pending {
    border-left: 3px solid var(--atomware-warning);
}

.atomware-calendar-task.status-started {
    border-left: 3px solid var(--atomware-primary);
    background: rgba(59, 130, 246, 0.1);
}

.atomware-calendar-task.status-complete {
    border-left: 3px solid var(--atomware-success);
    opacity: 0.35;
    text-decoration: line-through;
}

.atomware-calendar-task.my-task {
    font-weight: 500;
}

.atomware-calendar-task.my-task::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--atomware-primary);
}

/* Calendar Task Running Pulse – Current User */
.atomware-calendar-task.running.running-own {
    border-left-width: 4px !important;
    border-left-color: var(--atomware-success) !important;
    animation: task-pulse-own 2s infinite;
}

/* Calendar Task Running Pulse – Other Team Members */
.atomware-calendar-task.running.running-other {
    border-left-width: 4px !important;
    border-left-color: var(--atomware-primary) !important;
    animation: task-pulse-other 2s infinite;
}

/* Status Badge */
.atomware-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    text-transform: capitalize;
}

/* Task card (list, pool, kanban): status same font size as priority */
.atomware-task-card .atomware-task-header-right .atomware-status-badge {
    font-size: 0.75rem;
}

.atomware-status-badge.pending {
    background: rgba(234, 179, 8, 0.2);
    color: #eab308;
}

.atomware-status-badge.started {
    background: rgba(59, 130, 246, 0.2);
    color: #1552cc;
}

.atomware-status-badge.on_hold {
    background: rgba(158, 158, 158, 0.2);
    color: #9e9e9e;
}

.atomware-status-badge.complete {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

/* Task Edit Form */
.atomware-task-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-lg);
}

.atomware-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--atomware-spacing-md);
}

@media (max-width: 600px) {
    .atomware-form-row {
        grid-template-columns: 1fr;
    }
}

.atomware-time-display {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-md);
}

.atomware-time-display > span {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--atomware-text-primary);
}

.atomware-time-entry-inline {
    display: flex;
    gap: 4px;
    align-items: center;
}

.atomware-input-sm {
    width: 80px;
    padding: 6px 8px;
    font-size: 0.85rem;
    background: var(--atomware-bg-tertiary);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius-sm);
    color: var(--atomware-text-primary);
}

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

/* Edit Files List */
.atomware-edit-files-list {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-sm);
    margin-bottom: var(--atomware-spacing-sm);
}

.atomware-edit-file-item {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    padding: 8px 12px;
    background: var(--atomware-bg-tertiary);
    border-radius: var(--atomware-radius-sm);
}

.atomware-edit-file-item .material-icons {
    font-size: 20px;
    color: var(--atomware-text-muted);
}

.atomware-edit-file-item .file-name {
    flex: 1;
    color: var(--atomware-text-primary);
}

.atomware-edit-file-item .file-size {
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
}

.atomware-edit-file-item .file-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--atomware-success);
    color: white;
    border-radius: 10px;
}

.atomware-edit-file-item.removed {
    opacity: 0.4;
    text-decoration: line-through;
}

.atomware-edit-file-item .remove-file-btn,
.atomware-edit-file-item .remove-new-file-btn {
    margin-left: auto;
    padding: 4px;
    color: var(--atomware-danger);
}

.atomware-file-upload-area {
    padding: var(--atomware-spacing-sm) 0;
}

/* Sub-tasks list - table/list view */
.atomware-subtasks-section {
    margin-top: var(--atomware-spacing-lg);
    overflow: visible;
}

.atomware-subtasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--atomware-spacing-sm);
    margin-bottom: 8px;
}

.atomware-subtasks-header .atomware-repeat-toggle-btn {
    padding: 6px;
}

.atomware-subtasks-list {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-md);
    overflow: visible;
}

/* Sub-task cards: each card has its own labels */
.atomware-subtasks-list-header {
    display: none;
}

.atomware-subtask-row {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius-sm);
    overflow: visible;
    background: var(--atomware-bg-secondary);
}

.atomware-subtask-row.atomware-subtask-existing {
    cursor: pointer;
}
/* No background change on hover for subtasks in any task modal */
.atomware-subtask-row.atomware-subtask-existing:hover {
    background: inherit;
}

.atomware-subtask-row.atomware-subtask-highlighted {
    background: var(--atomware-primary-light, rgba(var(--atomware-primary-rgb, 33, 150, 243), 0.12));
    box-shadow: 0 0 0 2px var(--atomware-primary, #2196f3);
}

.atomware-subtask-row.atomware-subtask-existing .atomware-subtask-description-wrap {
    cursor: text;
}

.atomware-subtask-title-wrap {
    padding: 10px 12px 8px 12px;
    border-bottom: 1px solid var(--atomware-border);
}

.atomware-subtask-title-wrap .atomware-subtask-title {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--atomware-border);
    border-radius: 4px;
    font-size: 0.95rem;
}

/* Three fields inline: Assigned, Status, Priority */
.atomware-subtask-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--atomware-spacing-md);
    align-items: flex-end;
    padding: 10px 12px;
    width: 100%;
    min-width: 0;
}

.atomware-subtask-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--atomware-text-muted);
    margin-bottom: 4px;
}

/* Date + Repeat row - last row, inline */
.atomware-subtask-due-row {
    display: flex;
    align-items: flex-end;
    gap: var(--atomware-spacing-md);
    padding: 10px 12px;
    border-top: 1px solid var(--atomware-border);
}

.atomware-subtask-due-row .atomware-subtask-field-label {
    flex-shrink: 0;
    white-space: nowrap;
}

.atomware-subtask-due-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.atomware-subtask-due-wrap .atomware-subtask-due {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
}

.atomware-subtask-due-wrap .atomware-subtask-repeat-toggle-btn {
    flex-shrink: 0;
}

.atomware-subtask-repeat-toggle-btn .material-icons {
    font-size: 18px;
}

.atomware-subtask-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--atomware-border);
}

.atomware-subtask-timer-area {
    flex: 1;
}

.atomware-subtask-timer-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ONE OR THE OTHER: Start OR Stop - never both (enforced by data-timer-state) */
.atomware-subtask-timer-wrap[data-timer-state="stopped"] .atomware-subtask-timer-stopped {
    display: inline-flex !important;
}
.atomware-subtask-timer-wrap[data-timer-state="stopped"] .atomware-subtask-timer-running {
    display: none !important;
}
.atomware-subtask-timer-wrap[data-timer-state="running"] .atomware-subtask-timer-stopped {
    display: none !important;
}
.atomware-subtask-timer-wrap[data-timer-state="running"] .atomware-subtask-timer-running {
    display: inline-flex !important;
}

/* Main task timer - same pattern: ONE OR THE OTHER */
.atomware-main-timer-wrap[data-timer-state="stopped"] .atomware-main-timer-stopped {
    display: inline-flex !important;
}
.atomware-main-timer-wrap[data-timer-state="stopped"] .atomware-main-timer-running {
    display: none !important;
}
.atomware-main-timer-wrap[data-timer-state="running"] .atomware-main-timer-stopped {
    display: none !important;
}
.atomware-main-timer-wrap[data-timer-state="running"] .atomware-main-timer-running {
    display: inline-flex !important;
}

.atomware-subtask-timer-wrap .atomware-subtask-timer-running,
.atomware-subtask-timer-wrap .atomware-subtask-timer-captured {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.atomware-subtask-start-timer-btn,
.atomware-subtask-stop-timer-btn {
    flex-shrink: 0;
    padding: 6px 8px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.atomware-subtask-start-timer-btn .material-icons,
.atomware-subtask-stop-timer-btn .material-icons {
    font-size: 18px;
    vertical-align: middle;
}

.atomware-subtask-timer-captured .material-icons {
    font-size: 16px;
}

.atomware-subtask-footer-actions {
    flex-shrink: 0;
}

/* Delete button at bottom right of each subtask card */
.atomware-subtask-delete-wrap {
    margin-left: auto;
}

.atomware-subtask-recurrence-accordion {
    margin: 8px 12px 0;
    width: calc(100% - 24px);
}

.atomware-subtask-delete-btn {
    padding: 4px;
    color: var(--atomware-text-muted);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.atomware-subtask-delete-btn:hover {
    color: var(--atomware-danger, #dc3545);
    background: rgba(220, 53, 69, 0.1);
}

.atomware-subtask-meta .atomware-subtask-assignee,
.atomware-subtask-meta .atomware-subtask-status,
.atomware-subtask-meta .atomware-subtask-priority {
    padding: 6px 8px;
    min-width: 0;
    width: 100%;
}

.atomware-subtask-desc-wrap {
    padding: 10px 12px;
    border-top: 1px solid var(--atomware-border);
}

.atomware-subtask-desc-wrap .atomware-subtask-field-label {
    margin-bottom: 6px;
}

.atomware-subtask-desc-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.atomware-subtask-desc-toolbar-row .atomware-subtask-field-label {
    margin-bottom: 0;
}

/* Sub-task row Quill: sizing + toolbar/editor rhythm matches main task description modals */
#task-modal .atomware-subtasks-list .atomware-subtask-description-wrap.atomware-wysiwyg-editor-wrap,
#task-detail-modal #edit-task-subtasks-list .atomware-subtask-description-wrap.atomware-wysiwyg-editor-wrap,
.atomware-subtasks-list .atomware-subtask-description-wrap.atomware-wysiwyg-editor-wrap {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#task-modal .atomware-subtasks-list .atomware-subtask-description-wrap .atomware-wysiwyg-editor,
#task-detail-modal #edit-task-subtasks-list .atomware-subtask-description-wrap .atomware-wysiwyg-editor {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
#task-modal .atomware-subtasks-list .atomware-subtask-description-wrap .atomware-subtask-quill-slot,
#task-detail-modal #edit-task-subtasks-list .atomware-subtask-description-wrap .atomware-subtask-quill-slot,
.atomware-subtasks-list .atomware-subtask-description-wrap .atomware-subtask-quill-slot {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
#task-modal .atomware-subtasks-list .atomware-subtask-description-wrap .ql-toolbar.ql-snow,
#task-detail-modal #edit-task-subtasks-list .atomware-subtask-description-wrap .ql-toolbar.ql-snow,
.atomware-subtasks-list .atomware-subtask-description-wrap .ql-toolbar.ql-snow {
    flex: 0 0 auto;
}
#task-modal .atomware-subtasks-list .atomware-subtask-description-wrap .ql-container,
#task-detail-modal #edit-task-subtasks-list .atomware-subtask-description-wrap .ql-container,
.atomware-subtasks-list .atomware-subtask-description-wrap .ql-container {
    flex: 1;
    min-height: 0;
}
#task-modal .atomware-subtasks-list .atomware-subtask-description-wrap .ql-editor,
#task-detail-modal #edit-task-subtasks-list .atomware-subtask-description-wrap .ql-editor,
.atomware-subtasks-list .atomware-subtask-description-wrap .ql-editor {
    min-height: 120px;
    overflow-y: auto;
    word-break: break-word;
}
.atomware-client-parent-task-meta {
    margin-bottom: 4px;
}
.atomware-client-parent-task-meta .atomware-client-parent-task-label {
    margin-right: 6px;
    color: var(--atomware-text-muted);
    font-size: 0.9rem;
}
.atomware-client-subtasks-preview-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.atomware-client-subtasks-preview-list li + li {
    margin-top: 4px;
}
.atomware-client-subtask-status {
    color: var(--atomware-text-muted);
    font-size: 0.9em;
}

.atomware-subtask-desc {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    border: 1px solid var(--atomware-border);
    border-radius: 4px;
    resize: vertical;
    min-height: 48px;
    box-sizing: border-box;
}

#add-subtask-btn-create,
#add-subtask-btn-edit {
    margin-top: 10px;
}

@media (max-width: 640px) {
    .atomware-subtask-meta {
        grid-template-columns: 1fr;
    }
}

/* Analytics tab (padding from tab-pane like My Tasks) - top aligned */
.atomware-analytics-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
}

.atomware-analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--atomware-spacing-md);
    flex-wrap: wrap;
    gap: var(--atomware-spacing-md);
}

.atomware-analytics-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.atomware-analytics-view-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--atomware-radius-sm);
    background: var(--atomware-bg-tertiary);
}

/* Ensure chart/graph icons are vertically centered inside analytics view buttons */
.atomware-analytics-view-btn .material-icons {
    top: 0 !important;
}

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

.atomware-analytics-header h3 {
    margin: 0;
}

.atomware-analytics-filters {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    flex-shrink: 0;
    margin-right: var(--atomware-spacing-md);
}
.atomware-analytics-filters .atomware-select,
.atomware-analytics-filters .atomware-select-enhanced {
    min-width: 130px;
    max-width: 170px;
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 0.9em;
}
.atomware-date-filters {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--atomware-spacing-sm);
}

.atomware-date-filters .atomware-tab-icon-controls {
    margin-left: auto;
}

.atomware-date-filters input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    background: var(--atomware-bg-secondary);
    color: var(--atomware-text-primary);
}

.atomware-analytics-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--atomware-spacing-md);
    margin-bottom: var(--atomware-spacing-lg);
}

.atomware-analytics-cards .atomware-card {
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
    padding: var(--atomware-spacing-lg);
    text-align: center;
}

.atomware-analytics-cards .atomware-card h4 {
    margin: 0 0 var(--atomware-spacing-sm) 0;
    font-size: 0.9rem;
    color: var(--atomware-text-secondary);
}

.atomware-metric {
    font-size: 2rem;
    font-weight: 700;
    color: var(--atomware-primary);
}

.atomware-analytics-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--atomware-spacing-lg);
}

.atomware-analytics-graphs {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--atomware-spacing-lg);
}

.atomware-analytics-container.analytics-view-chart .atomware-analytics-cards {
    display: none;
}

.atomware-analytics-container.analytics-view-chart .atomware-analytics-charts {
    display: grid;
}

.atomware-analytics-container.analytics-view-chart .atomware-analytics-graphs {
    display: none;
}

.atomware-analytics-container.analytics-view-graph .atomware-analytics-cards,
.atomware-analytics-container.analytics-view-graph .atomware-analytics-charts {
    display: none;
}

.atomware-analytics-container.analytics-view-graph .atomware-analytics-graphs {
    display: grid;
}

/* Analytics timeline (Toggl/Harvest style - active hours only) */
.atomware-analytics-timeline-section {
    margin-top: var(--atomware-spacing-xl);
    padding-top: var(--atomware-spacing-lg);
    border-top: 1px solid var(--atomware-border);
}
.atomware-analytics-timeline-section h4 {
    margin: 0 0 var(--atomware-spacing-md) 0;
    font-size: 1rem;
    color: var(--atomware-text-secondary);
}
.atomware-analytics-timeline {
    font-size: 0.9rem;
}
.atomware-timeline-day {
    margin-bottom: var(--atomware-spacing-lg);
}
.atomware-timeline-day:last-child {
    margin-bottom: 0;
}
.atomware-timeline-day-header {
    font-weight: 600;
    color: var(--atomware-text-primary);
    margin-bottom: var(--atomware-spacing-sm);
    padding-bottom: 4px;
}
.atomware-timeline-day-entries {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.atomware-timeline-entry {
    display: grid;
    grid-template-columns: 110px minmax(70px, 190px) 1fr 120px 100px;
    gap: var(--atomware-spacing-md);
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--atomware-radius-sm);
    background: var(--atomware-bg-secondary);
    font-size: 0.9em;
}
.atomware-timeline-entry:hover {
    background: var(--atomware-bg-tertiary);
}
.atomware-timeline-time {
    color: var(--atomware-text-secondary);
    font-variant-numeric: tabular-nums;
}
.atomware-timeline-duration {
    font-weight: 600;
    color: var(--atomware-primary);
}
/* Duration wrap: hover shows "Edit time" (staff only via .atomware-staff-dashboard) */
.atomware-timeline-duration-wrap {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}
.atomware-timeline-duration-wrap .atomware-timeline-edit-hint {
    display: none;
    font-size: 0.8em;
    color: var(--atomware-text-muted);
    font-weight: 400;
}
.atomware-staff-dashboard .atomware-timeline-duration-wrap:hover .atomware-timeline-edit-hint {
    display: inline;
}
.atomware-timeline-duration-edit {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}
.atomware-timeline-duration-edit .atomware-duration-hours,
.atomware-timeline-duration-edit .atomware-duration-mins {
    width: 36px;
    padding: 2px 4px;
    font-size: 0.85em;
    border: 1px solid var(--atomware-border);
    border-radius: 4px;
    background: var(--atomware-bg-secondary);
    flex-shrink: 0;
    -moz-appearance: textfield;
}
.atomware-timeline-duration-edit .atomware-duration-hours::-webkit-outer-spin-button,
.atomware-timeline-duration-edit .atomware-duration-hours::-webkit-inner-spin-button,
.atomware-timeline-duration-edit .atomware-duration-mins::-webkit-outer-spin-button,
.atomware-timeline-duration-edit .atomware-duration-mins::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.atomware-timeline-duration-edit .atomware-duration-sep {
    font-size: 0.8em;
    color: var(--atomware-text-muted);
    flex-shrink: 0;
}
.atomware-timeline-duration-edit .atomware-duration-save,
.atomware-timeline-duration-edit .atomware-duration-cancel {
    padding: 1px 2px;
    min-width: 12px;
    height: 14px;
    font-size: 0.5em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Client dashboard analytics: current client bar + full-width charts */
#atomware-client-portal .atomware-analytics-client .atomware-analytics-header {
    padding-top: var(--atomware-spacing);
}

.atomware-analytics-client .atomware-analytics-current-client {
    width: 100%;
    padding: var(--atomware-spacing) var(--atomware-spacing-md);
    margin-bottom: var(--atomware-spacing-md);
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
    border: 1px solid var(--atomware-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.atomware-analytics-client .atomware-analytics-current-client-label {
    font-weight: 600;
    color: var(--atomware-text-secondary);
}
.atomware-analytics-client .atomware-analytics-current-client-name {
    font-weight: 500;
    color: var(--atomware-text);
}
.atomware-analytics-client .atomware-analytics-charts,
.atomware-analytics-client .atomware-analytics-graphs {
    grid-template-columns: 1fr;
}
.atomware-analytics-client .atomware-chart-fullwidth {
    width: 100%;
}

/* Time log: task name clickable to open task */
.atomware-timeline-task[data-task-id] {
    cursor: pointer;
    color: var(--atomware-primary);
    text-decoration: underline;
}
.atomware-timeline-task[data-task-id]:hover {
    text-decoration: none;
}

.atomware-timeline-task {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atomware-timeline-client,
.atomware-timeline-user {
    color: var(--atomware-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Time log: fixed rem on wide screens. A global 0.75rem here was loading AFTER the
   (max-width:768px) block and overrode mobile — keep desktop-only + compact ≤900px. */
#tab-analytics .atomware-timeline-user,
#tab-analytics .atomware-timeline-client {
    font-weight: 400;
    line-height: 1.25;
}
@media (min-width: 901px) {
    #tab-analytics .atomware-timeline-user,
    #tab-analytics .atomware-timeline-client {
        font-size: 0.75rem;
    }
}
/* ≤900px: stack time log; names smaller than the old 12px from cascade bug (staff + client) */
@media (max-width: 900px) {
    #tab-analytics .atomware-timeline-entry {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    #tab-analytics .atomware-timeline-user,
    #tab-analytics .atomware-timeline-client {
        white-space: normal;
        max-width: 100%;
        font-size: 0.68rem;
        line-height: 1.35;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}
@media (max-width: 480px) {
    #tab-analytics .atomware-timeline-user,
    #tab-analytics .atomware-timeline-client {
        font-size: 0.62rem;
    }
}

.atomware-graph-svg {
    width: 100%;
    height: 140px;
    display: block;
}

.atomware-graph-line {
    stroke: var(--atomware-primary);
    stroke-width: 2;
    fill: none;
}

.atomware-graph-point {
    fill: var(--atomware-primary);
}

.atomware-graph-legend {
    margin-top: var(--atomware-spacing-sm);
    display: grid;
    gap: 6px;
}

.atomware-graph-legend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--atomware-text-secondary);
}
.atomware-chart-container {
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
    padding: var(--atomware-spacing-lg);
}

.atomware-chart-container h4 {
    margin: 0 0 var(--atomware-spacing-md) 0;
    font-size: 1rem;
}

.atomware-chart-bar {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
    margin-bottom: var(--atomware-spacing-sm);
}

.atomware-chart-label {
    min-width: 120px;
    width: 140px;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
}

.atomware-analytics-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.atomware-analytics-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.atomware-analytics-avatar-initial {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.atomware-graph-legend-item .atomware-analytics-avatar {
    width: 20px;
    height: 20px;
}

.atomware-graph-legend-item .atomware-analytics-avatar-initial {
    font-size: 10px;
}

.atomware-timeline-entry .atomware-analytics-avatar {
    width: 20px;
    height: 20px;
}

.atomware-timeline-entry .atomware-analytics-avatar-initial {
    font-size: 10px;
}

.atomware-chart-bar-container {
    flex: 1;
    height: 24px;
    background: var(--atomware-bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.atomware-chart-bar-fill {
    height: 100%;
    background: var(--atomware-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.atomware-chart-bar-fill.user {
    background: var(--atomware-success);
}

.atomware-chart-value {
    width: 70px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ============================================
   FILE PREVIEW LIGHTBOX
   ============================================ */

.atomware-file-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10010;
    display: none;
    flex-direction: column;
}

.atomware-file-lightbox.active,
.atomware-file-lightbox:not([style*="display: none"]) {
    display: flex;
}

.atomware-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--atomware-bg-primary);
    border-bottom: 1px solid var(--atomware-border);
    flex-shrink: 0;
}

.atomware-lightbox-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--atomware-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}

.atomware-lightbox-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.atomware-lightbox-actions .atomware-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    text-decoration: none;
}

.atomware-lightbox-actions .atomware-btn .material-icons {
    font-size: 18px;
}

.atomware-lightbox-close {
    background: transparent;
    border: none;
    color: var(--atomware-text-secondary);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--atomware-radius-sm);
    transition: all 0.2s ease;
}

.atomware-lightbox-close:hover {
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-primary);
}

.atomware-lightbox-close .material-icons {
    font-size: 24px;
}

.atomware-lightbox-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}

/* Image Preview */
.atomware-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--atomware-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* PDF/Iframe Preview */
.atomware-preview-iframe {
    width: 100%;
    max-width: 900px;
    height: 100%;
    min-height: 600px;
    border: none;
    border-radius: var(--atomware-radius);
    background: white;
}

/* PDF page-1-only preview (lightbox) */
.atomware-pdf-lightbox-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    max-width: 900px;
}
.atomware-pdf-lightbox-wrap .atomware-pdf-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--atomware-text-muted);
}
.atomware-pdf-lightbox-wrap .atomware-pdf-canvas {
    max-width: 100%;
    height: auto;
    border-radius: var(--atomware-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* Video Preview */
.atomware-preview-video {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--atomware-radius);
    background: black;
}

/* Audio Preview */
.atomware-preview-audio-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px;
    background: var(--atomware-bg-primary);
    border-radius: var(--atomware-radius-lg);
    text-align: center;
}

.atomware-preview-audio-icon {
    font-size: 64px !important;
    color: var(--atomware-primary);
}

.atomware-preview-audio-container p {
    font-size: 16px;
    color: var(--atomware-text-secondary);
    margin: 0;
}

.atomware-preview-audio-container audio {
    width: 300px;
}

/* Non-previewable File */
.atomware-preview-no-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px;
    background: var(--atomware-bg-primary);
    border-radius: var(--atomware-radius-lg);
    text-align: center;
}

.atomware-preview-no-preview .material-icons {
    font-size: 72px !important;
    color: var(--atomware-text-muted);
}

.atomware-preview-no-preview h3 {
    font-size: 18px !important;
    color: var(--atomware-text-primary);
    word-break: break-word;
    max-width: 400px;
}

.atomware-preview-no-preview p {
    font-size: 14px;
    color: var(--atomware-text-secondary);
    margin: 0;
}

/* File item clickable cursor */
.atomware-edit-file-item:not(.removed) {
    cursor: pointer;
}

.atomware-edit-file-item:not(.removed):hover {
    background: var(--atomware-bg-tertiary);
}

/* Details tab - hide when View All is selected */
.atomware-dashboard.details-tab-hidden .atomware-tab-details-only {
    display: none !important;
}

/* Group Chat tab - hide when View All is selected */
.atomware-dashboard.chats-tab-hidden .atomware-tab-chats-only {
    display: none !important;
}

/* ============================================================
   Tasks calendar reset: match Meetings calendar styling
   (scoped to Tasks only; same look, separate IDs/classes)
   ============================================================ */
#tab-assigned #assigned-calendar.atomware-calendar-container {
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}
#tab-assigned #assigned-calendar .atomware-calendar-header {
    padding: 8px 12px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: var(--atomware-radius);
    margin-bottom: var(--atomware-spacing-sm);
    background: rgba(59, 130, 246, 0.12);
}
#tab-assigned #assigned-calendar .atomware-calendar-header h4 {
    color: var(--atomware-text-primary);
    font-weight: 600;
}
#tab-assigned #assigned-calendar .atomware-calendar-nav button,
#tab-assigned #assigned-calendar .atomware-calendar-view-mode-btn,
#tab-assigned #assigned-calendar .atomware-calendar-weekends-btn {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}
#tab-assigned #assigned-calendar .atomware-calendar-nav button:hover,
#tab-assigned #assigned-calendar .atomware-calendar-view-mode-btn.active,
#tab-assigned #assigned-calendar .atomware-calendar-weekends-btn.active {
    background: rgba(59, 130, 246, 0.9);
    border-color: rgba(59, 130, 246, 0.9);
    color: #ffffff;
}
#tab-assigned #assigned-calendar .atomware-calendar-grid {
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    overflow: hidden;
}


/* ============================================================
   Details section - CANONICAL SCOPE (overrides global layout)
   Wrapper: #atomware-details-section-scope
   Self-contained layout; does not inherit global flex/centering.
   ============================================================ */
#atomware-details-section-scope {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

#atomware-details-section-scope .atomware-details-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

#atomware-details-section-scope #details-content.atomware-details-visible {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

#atomware-details-section-scope .atomware-details-layout {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    gap: 0 !important;
}

#atomware-details-section-scope .atomware-details-main {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#atomware-details-section-scope .atomware-details-main .atomware-details-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}

#atomware-details-section-scope .atomware-details-main .atomware-details-form,
#atomware-details-section-scope .atomware-details-main .atomware-details-team {
    display: block;
}

/* Tab pane + tab-content - override global to ensure top alignment */
#tab-details.atomware-tab-pane.active {
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
}
#tab-details.atomware-tab-pane.active #atomware-details-section-scope {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
}

/* ============================================================
   Notes tab - ISOLATED LAYOUT (no inheritance from global styles)
   All layout, spacing, alignment defined here. Uses notes-tab-* classes only.
   ============================================================ */
#notes-tab-root {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    isolation: isolate;
    align-self: stretch !important;
    flex: 1 1 auto;
    margin-top: 0 !important;
}

#notes-tab-root .notes-tab-layout {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    padding: 12px;
}

#notes-tab-root .notes-tab-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 12px 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--atomware-border);
    flex-shrink: 0;
}

#notes-tab-root .notes-tab-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

#notes-tab-root .notes-tab-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

#notes-tab-root .notes-tab-toolbar-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

#notes-tab-root .notes-tab-label {
    font-size: 14px;
    color: var(--atomware-text-secondary);
}

#notes-tab-root .notes-tab-view-switch {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--atomware-bg-secondary);
    border-radius: 6px;
}

#notes-tab-root .notes-tab-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--atomware-text-secondary);
    cursor: pointer;
}

#notes-tab-root .notes-tab-view-btn:hover {
    color: var(--atomware-text-primary);
    background: var(--atomware-bg-tertiary);
}

#notes-tab-root .notes-tab-view-btn.active {
    background: var(--atomware-primary);
    color: white;
}

#notes-tab-root .notes-tab-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--atomware-text-secondary);
    cursor: pointer;
}

#notes-tab-root .notes-tab-icon-btn:hover {
    color: var(--atomware-text-primary);
    background: var(--atomware-bg-tertiary);
}

#notes-tab-root .notes-tab-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--atomware-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
}

#notes-tab-root .notes-tab-search-row {
    margin: 0 0 12px 0;
    flex-shrink: 0;
}

#notes-tab-root .notes-tab-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--atomware-border);
    border-radius: 6px;
    background: var(--atomware-bg-secondary);
}

#notes-tab-root .notes-tab-search-inner .material-icons {
    color: var(--atomware-text-muted);
    font-size: 18px;
}

#notes-tab-root .notes-tab-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 4px 0;
    color: var(--atomware-text-primary);
    font-size: 14px;
}

#notes-tab-root .notes-tab-search-input:focus {
    outline: none;
}

#notes-tab-root .notes-tab-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

#notes-tab-root .notes-tab-list {
    display: block;
    padding-top: 4px;
}

#notes-tab-root .notes-tab-list.notes-tab-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    align-content: start;
}

#notes-tab-root .notes-tab-list.notes-tab-list-list {
    display: block;
}

#notes-tab-root .notes-tab-list .atomware-note-card {
    margin-bottom: 12px;
}

#notes-tab-root .notes-tab-list.notes-tab-list-grid .atomware-note-card {
    margin-bottom: 0;
}

#notes-tab-root .notes-tab-loading,
#notes-tab-root .notes-tab-empty {
    text-align: center;
    padding: 24px;
    color: var(--atomware-text-muted);
    width: 100%;
}

#notes-tab-root .notes-tab-loading::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    border: 2px solid var(--atomware-border);
    border-top-color: var(--atomware-primary);
    border-radius: 50%;
    animation: atomware-spin 0.8s linear infinite;
}

#notes-tab-root .notes-tab-list.notes-tab-list-grid .notes-tab-empty {
    grid-column: 1 / -1;
}

/* Fullscreen mode - fixed viewport, body scrolls within overlay */
#notes-tab-root .notes-tab-layout.notes-tab-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: var(--atomware-bg-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#notes-tab-root .notes-tab-layout.notes-tab-fullscreen .notes-tab-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ============================================================
   Analytics section - CANONICAL SCOPE (own layout, top-aligned)
   Wrapper: #atomware-analytics-section-scope
   ============================================================ */
#atomware-analytics-section-scope {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#atomware-analytics-section-scope .atomware-analytics-container {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
}

#tab-analytics.atomware-tab-pane.active {
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
}
#tab-analytics.atomware-tab-pane.active #atomware-analytics-section-scope {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
}

/* Details - base styles (inherited by scope; scope rules override) */
.atomware-details-container {
    width: 100%;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#details-content.atomware-details-visible {
    flex: 1;
    min-height: 0;
    min-width: 0;
}
.atomware-details-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Client header: avatar above name, aligned with header section */
.atomware-details-header {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--atomware-spacing) var(--atomware-spacing) var(--atomware-spacing-md);
    background: var(--atomware-bg-secondary);
    border-bottom: 1px solid var(--atomware-border);
}
.atomware-details-header .atomware-details-avatar {
    margin-bottom: var(--atomware-spacing-sm);
}
.atomware-details-header .atomware-details-title {
    text-align: center;
    width: 100%;
}
.atomware-details-header .atomware-details-title h3 {
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
    line-height: 1.3;
    margin: 0;
    color: var(--atomware-text-primary);
}
.atomware-details-header .atomware-details-timezone {
    font-size: 0.8rem;
    display: block;
    margin-top: 4px;
    margin-left: 0;
    color: var(--atomware-text-muted);
}
.atomware-details-main {
    flex: 1;
    min-width: 0;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

.atomware-details-main .atomware-details-tabs {
    position: sticky;
    top: 0;
    z-index: 1;
}

.atomware-details-main .atomware-details-form,
.atomware-details-main .atomware-details-team {
    width: 100%;
    display: block;
}

/* Details sub-tabs: full-width stretch, match main tabs (typography, active/hover) + icons */
.atomware-details-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0 0 var(--atomware-spacing);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    width: 100%;
}

.atomware-details-tabs .atomware-details-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--atomware-spacing-sm);
    padding: 10px 16px;
    border: 0;
    border-right: 1px solid var(--atomware-border);
    border-radius: 0;
    background: #000000;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    transition: all 0.2s;
}
.atomware-details-tab-btn:last-child {
    border-right: 0;
}

.atomware-details-tab-btn .atomware-tab-icon {
    font-size: 1.2em;
}

.atomware-details-tabs .atomware-details-tab-btn:not(.active):hover {
    background: var(--atomware-primary, #1552cc);
    color: #ffffff;
}

.atomware-details-tabs .atomware-details-tab-btn.active {
    background: var(--atomware-primary, #1552cc);
    color: #ffffff;
}
.atomware-details-tabs .atomware-details-tab-btn,
.atomware-details-tabs .atomware-details-tab-btn .atomware-tab-text,
.atomware-details-tabs .atomware-details-tab-btn .atomware-tab-icon {
    color: #ffffff !important;
}
.atomware-details-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--atomware-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}

.atomware-details-avatar input[type="file"] {
    display: none;
}

.atomware-details-avatar-edit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 50%;
}

.atomware-details-avatar:hover img {
    filter: grayscale(1);
}

.atomware-details-avatar:hover .atomware-details-avatar-edit {
    opacity: 1;
}
.atomware-details-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.atomware-details-avatar .material-icons {
    font-size: 40px;
    color: var(--atomware-text-muted);
}

/* ── Ephemeral / Disappearing Messages ── */
.atomware-ephemeral-toggle {
    transition: color 0.15s, background 0.15s;
}
.atomware-ephemeral-toggle.active {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 6px;
}
.atomware-ephemeral-message .atomware-message-body.atomware-ephemeral-body {
    border: 1px dashed rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.05);
    border-radius: 8px;
    position: relative;
}
.atomware-ephemeral-icon {
    font-size: 14px;
    color: #ef4444;
    vertical-align: middle;
    margin-right: 4px;
}
.atomware-ephemeral-revealed-text {
    color: #ffffff;
}
.atomware-ephemeral-countdown {
    font-size: 11px;
    color: #ef4444;
    margin-left: 6px;
    font-weight: 600;
}
.atomware-ephemeral-hidden-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.atomware-ephemeral-dots {
    letter-spacing: 2px;
    font-size: 14px;
    color: #ffffff;
    user-select: none;
}
.atomware-ephemeral-reveal-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
}
.atomware-ephemeral-reveal-btn:hover {
    color: #ffffff;
}
.atomware-ephemeral-reveal-btn .material-icons {
    font-size: 16px;
}
.atomware-details-title h3 {
    margin: 0;
}
.atomware-details-form {
    margin-bottom: var(--atomware-spacing-lg);
    width: 100%;
    min-width: 0;
}
.atomware-details-form h4,
.atomware-details-team h4 {
    margin: 0 0 var(--atomware-spacing-md) 0;
}
.atomware-details-team {
    width: 100%;
    min-width: 0;
}
.atomware-details-description {
    color: var(--atomware-text-muted);
    font-size: 0.9em;
    margin: 0 0 var(--atomware-spacing-md) 0;
}
.atomware-details-team-list {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-sm);
    margin-bottom: var(--atomware-spacing-lg);
}
.atomware-details-team-item {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing);
    padding: var(--atomware-spacing-sm) var(--atomware-spacing-md);
    background: var(--atomware-bg-secondary);
    border-radius: var(--atomware-radius);
}
.atomware-details-team-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--atomware-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}
.atomware-details-team-info {
    flex: 1;
    min-width: 0;
}
.atomware-details-team-name {
    display: block;
    font-weight: 500;
}
.atomware-details-team-email {
    font-size: 0.85em;
    color: var(--atomware-text-muted);
}
.atomware-details-add-row {
    display: flex;
    gap: var(--atomware-spacing-sm);
    align-items: center;
}
.atomware-details-add-member label {
    display: block;
    margin-bottom: var(--atomware-spacing-xs);
    font-weight: 500;
}
.atomware-details-add-row .atomware-select {
    flex: 1;
}

/* Details tab - URLs & Links section */
.atomware-details-section-divider {
    margin: var(--atomware-spacing-lg) 0 var(--atomware-spacing-md);
    border-top: 1px solid var(--atomware-border);
}
.atomware-details-section-title {
    margin: 0 0 var(--atomware-spacing-md);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--atomware-text-secondary);
}
.atomware-form-group-with-icon .atomware-field-icon {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 6px;
    color: var(--atomware-text-muted);
}
.atomware-color-picker-wrap {
    display: flex;
    align-items: center;
    gap: var(--atomware-spacing-sm);
}
.atomware-color-input {
    width: 44px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    background: var(--atomware-bg);
    cursor: pointer;
}
.atomware-color-hex {
    flex: 1;
    min-width: 100px;
    max-width: 120px;
}
.atomware-form-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
}

/* ── SMM toggle row (inline label + toggle + hint) ─────────── */
.atomware-smm-toggle-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.atomware-smm-toggle-group > label:first-child {
    margin-bottom: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--atomware-text-primary);
}
.atomware-smm-toggle-group .atomware-toggle-switch {
    flex-shrink: 0;
}
.atomware-smm-toggle-hint {
    font-size: 0.8rem;
    color: var(--atomware-text-muted);
    flex: 1;
    min-width: 0;
}

/* ── Toggle switch component ───────────────────────────────── */
.atomware-toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}
.atomware-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.atomware-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--atomware-border);
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.2s;
}
.atomware-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.atomware-toggle-switch input:checked + .atomware-toggle-slider {
    background: var(--atomware-primary, #1552cc);
}
.atomware-toggle-switch input:checked + .atomware-toggle-slider::before {
    transform: translateX(18px);
}

.atomware-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--atomware-text-primary);
    margin-top: 6px;
}
.atomware-social-media-list {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-sm);
    margin-bottom: var(--atomware-spacing-sm);
}
.atomware-social-media-row {
    display: flex;
    gap: var(--atomware-spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}
.atomware-social-media-row .atomware-social-row-icon {
    font-size: 20px;
    color: var(--atomware-text-muted);
    flex-shrink: 0;
}
.atomware-social-media-row .atomware-social-platform {
    flex: 0 0 140px;
    min-width: 120px;
}
.atomware-social-media-row .atomware-social-url {
    flex: 1;
    min-width: 160px;
}
.atomware-social-media-row .atomware-social-remove {
    flex-shrink: 0;
}
.atomware-social-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.atomware-social-add .material-icons {
    font-size: 18px;
}
.atomware-credentials-list {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-sm);
    margin-bottom: var(--atomware-spacing-sm);
}
.atomware-credentials-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) minmax(160px, 1.4fr) minmax(160px, 1fr) minmax(220px, 1.2fr) auto auto;
    gap: var(--atomware-spacing-sm);
    align-items: center;
}
.atomware-credential-password-wrap {
    width: 100%;
}
.atomware-credential-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#client-info-modal .atomware-client-info-credential-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 6px;
}
#client-info-modal .atomware-client-info-credential-field strong {
    color: var(--atomware-text-muted);
    font-weight: 600;
}
@media (max-width: 900px) {
    .atomware-credentials-row {
        grid-template-columns: 1fr 1fr;
    }
    .atomware-credential-password-wrap {
        grid-column: 1 / -1;
    }
}

/* Details tab - responsive sidebar layout */
@media (max-width: 768px) {
    .atomware-details-layout {
        flex-direction: column;
        align-items: stretch;
    }
    .atomware-details-header {
        padding: var(--atomware-spacing-sm) var(--atomware-spacing);
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--atomware-spacing-md);
    }
    .atomware-details-header .atomware-details-avatar {
        margin-bottom: 0;
    }
    .atomware-details-header .atomware-details-title {
        text-align: left;
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .atomware-details-header {
        flex-direction: column;
        align-items: center;
    }
    .atomware-details-header .atomware-details-title {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .atomware-social-media-row {
        flex-direction: column;
        align-items: stretch;
    }
    .atomware-social-media-row .atomware-social-platform {
        flex: 1 1 auto;
        min-width: 0;
    }
    .atomware-social-media-row .atomware-social-url {
        min-width: 0;
    }
    .atomware-social-media-row .atomware-social-remove {
        align-self: flex-end;
    }
}

/* Details & Team Member tabs - responsive for both panes */
@media (max-width: 768px) {
    .atomware-details-tabs {
        margin-bottom: var(--atomware-spacing-md);
    }
    .atomware-details-tab-btn {
        padding: 12px 14px;
        font-size: 0.9rem;
        min-height: 44px;
    }
    .atomware-details-main {
        padding-right: 2px;
    }
    .atomware-details-form .atomware-form-row,
    .atomware-details-form .atomware-form-group {
        min-width: 0;
    }
    .atomware-details-team-item {
        flex-wrap: wrap;
        gap: var(--atomware-spacing-sm);
    }
    .atomware-details-team-info {
        min-width: 0;
    }
    .atomware-details-team-email {
        word-break: break-word;
    }
}

@media (max-width: 600px) {
    .atomware-details-tab-btn {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    .atomware-details-form .atomware-form-row {
        grid-template-columns: 1fr;
    }
    .atomware-details-add-row {
        flex-direction: column;
        align-items: stretch;
    }
    .atomware-details-add-row .atomware-select {
        width: 100%;
    }
    .atomware-details-add-row .atomware-btn-primary,
    .atomware-details-add-row .atomware-btn-secondary {
        width: 100%;
        min-height: 44px;
    }
    .atomware-details-form #save-details-btn {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .atomware-details-tabs {
        grid-template-columns: 1fr 1fr;
        border-radius: var(--atomware-radius-sm);
    }
    .atomware-details-tab-btn {
        padding: 12px 8px;
        font-size: 0.8rem;
    }
    .atomware-details-team-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   CLIENT PORTAL - Mobile responsive (phones)
   Clients use phones often - optimize for touch
   ============================================ */

/* Tablet & large phones (768px and below) */
@media (max-width: 768px) {
    /* Stacked: full-width running-task strip (row 1) + logo/company + actions (row 2) */
    #atomware-client-portal .atomware-client-topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 8px;
        row-gap: 6px;
        padding: 8px 12px;
        min-width: 0;
    }
    #atomware-client-portal .atomware-client-topbar-left {
        display: flex;
        flex: initial;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #atomware-client-portal .atomware-client-topbar-left::-webkit-scrollbar {
        display: none;
        height: 0;
    }
    #atomware-client-portal .atomware-client-topbar-right {
        gap: 8px;
        flex-shrink: 0;
        margin-left: 0;
    }
    #atomware-client-portal .atomware-client-timers-wrap#client-timers-wrap,
    #atomware-client-portal #client-timers-wrap {
        max-width: 100%;
    }
    #atomware-client-portal .atomware-client-topbar.client-topbar--has-timers #client-timers-wrap {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    #atomware-client-portal .atomware-client-topbar.client-topbar--has-timers .atomware-client-topbar-left {
        grid-column: 1;
        grid-row: 2;
    }
    #atomware-client-portal .atomware-client-topbar.client-topbar--has-timers .atomware-client-topbar-right {
        grid-column: 2;
        grid-row: 2;
    }
    #atomware-client-portal .atomware-client-topbar:not(.client-topbar--has-timers) .atomware-client-topbar-left {
        grid-column: 1;
        grid-row: 1;
    }
    #atomware-client-portal .atomware-client-topbar:not(.client-topbar--has-timers) .atomware-client-topbar-right {
        grid-column: 2;
        grid-row: 1;
    }
    #atomware-client-portal .atomware-business-selector-inline {
        flex: 0 0 auto;
        min-width: 0;
    }
    #atomware-client-portal .atomware-business-selector-inline .atomware-select,
    #atomware-client-portal .atomware-client-business-combobox {
        min-width: 0;
    }
    #atomware-client-portal .atomware-client-topbar .atomware-client-business-combobox {
        max-width: min(200px, 46vw);
        flex: 0 1 auto;
    }
    #atomware-client-portal .atomware-client-topbar .atomware-client-combobox-name {
        max-width: 9.5rem;
    }
    #atomware-client-portal .atomware-client-timers.atomware-staff-timers {
        flex-wrap: nowrap;
    }
    #atomware-client-portal .atomware-tabs {
        padding: 8px;
        -webkit-overflow-scrolling: touch;
    }
    /* Files tab: match staff (shared #tab-files rules in ≤768px); no horizontal scroll */
    #atomware-client-portal .atomware-file-manager,
    #atomware-client-portal .atomware-files-container.atomware-drive {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 300px;
        height: auto;
        overflow-x: hidden;
    }
    #atomware-client-portal #tab-files .atomware-files-toolbar-scope,
    #atomware-client-portal .atomware-files-toolbar-scope {
        padding: 3px 8px 1px;
    }
    #atomware-client-portal .atomware-file-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    #atomware-client-portal .atomware-file-toolbar-left {
        flex-wrap: wrap;
        min-width: 0;
        flex: 0 0 auto;
    }
    #atomware-client-portal .atomware-file-toolbar-right {
        flex-wrap: wrap;
        flex: 0 0 auto;
        justify-content: flex-start;
    }
    /* Do not set flex:1 or min-width on Files toolbar buttons — only .atomware-file-toolbar-right
       in the portal is under #tab-files; that would hide Upload/Trash inline on phones. */
    #atomware-client-portal .atomware-file-filter-row {
        flex-wrap: wrap;
    }
    #atomware-client-portal .atomware-file-filter-row .atomware-select-sm {
        min-width: 0;
    }
    #atomware-client-portal .atomware-file-browser,
    #atomware-client-portal #staff-file-browser {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }
    #atomware-client-portal #tab-files #folder-tree-sidebar,
    #atomware-client-portal #tab-files .atomware-files-tree,
    #atomware-client-portal #tab-files .atomware-files-sidebar,
    #atomware-client-portal #tab-files .atomware-drive-sidebar,
    #atomware-client-portal #tab-files .atomware-folder-tree {
        display: none !important;
        width: 0 !important;
        max-width: 0 !important;
        border: 0 !important;
    }
    #atomware-client-portal #tab-files .atomware-files-layout,
    #atomware-client-portal #tab-files .atomware-files-explorer,
    #atomware-client-portal #tab-files .atomware-drive-body,
    #atomware-client-portal #tab-files .atomware-drive-main,
    #atomware-client-portal #tab-files .atomware-file-browser,
    #atomware-client-portal #tab-files #staff-file-browser {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #atomware-client-portal .atomware-drive-breadcrumb {
        overflow-x: hidden;
        flex-wrap: wrap;
        padding-bottom: 4px;
    }
    #atomware-client-portal .atomware-tab-btn {
        padding: 10px 12px !important;
        min-height: 44px !important; /* Touch target */
    }
    #atomware-client-portal .atomware-tab-btn span:not(.material-icons):not(.atomware-badge) {
        display: inline;
    }
    /* Kanban - single column on tablet, ensure vertical scroll */
    #atomware-client-portal .atomware-kanban-board {
        grid-template-columns: 1fr !important;
        padding: 8px;
        gap: 12px;
        overflow-y: auto;
    }
    #atomware-client-portal .atomware-tasks-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 0;
    }
    #atomware-client-portal .atomware-tasks-controls {
        flex-wrap: wrap;
    }
    /* Tasks tab: from/to date pickers stay on one row, stretch to full content width on small screens */
    #atomware-client-portal .atomware-client-tasks .atomware-control-group:has(#client-tasks-filter-date-from) {
        flex: 1 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }
    #atomware-client-portal .atomware-client-tasks .atomware-control-group:has(#client-tasks-filter-date-from) .atomware-filter-date {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
    }
    #atomware-client-portal .atomware-client-tasks .atomware-filter-date-sep {
        flex: 0 0 auto;
    }
    /* New Task + search + fullscreen on one row */
    #atomware-client-portal .atomware-client-tasks .atomware-tab-icon-controls {
        width: 100%;
        min-height: 44px;
        align-items: center;
    }
    #atomware-client-portal .atomware-client-tasks .atomware-tab-icon-controls #create-task-btn {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        min-height: 44px;
        padding: 0 10px 0 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    #atomware-client-portal .atomware-client-tasks .atomware-tab-icon-controls .atomware-tab-icon-btn {
        flex: 0 0 auto;
    }
    /* Chat header actions - wrap */
    #atomware-client-portal .atomware-group-chat-header .atomware-group-chat-actions {
        flex-wrap: wrap;
    }
    #atomware-client-portal #group-create-task-from-chat-btn {
        min-height: 44px;
    }
    /* Notifications panel width: see portrait/landscape rules immediately after this @media. */
    /* Modals - near full width (exclude task-detail-modal to match staff dash) */
    #atomware-client-portal .atomware-modal:not(#task-detail-modal) .atomware-modal-content {
        width: 96% !important;
        max-height: 88vh;
    }
    #atomware-client-portal .atomware-modal:not(#task-detail-modal) .atomware-modal-body {
        padding: 12px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #atomware-client-portal .atomware-modal:not(#task-detail-modal) .atomware-modal-header,
    #atomware-client-portal .atomware-modal:not(#task-detail-modal) .atomware-modal-footer {
        padding: 12px !important;
    }
}

/* Client portal: full-width notification drawer only in portrait (landscape keeps same rail as staff — no jump on rotate). */
@media (max-width: 768px) and (orientation: portrait) {
    #atomware-client-portal #notifications-panel.atomware-panel {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
    }
}
@media (max-width: 768px) and (orientation: landscape) {
    #atomware-client-portal #notifications-panel.atomware-panel {
        width: min(320px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 8px)) !important;
        max-width: none !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }
}

/* Phones (600px and below) */
@media (max-width: 600px) {
    #atomware-client-portal .atomware-client-topbar-right {
        justify-content: flex-end;
    }
    #atomware-client-portal .atomware-tabs {
        padding: 6px;
    }
    #atomware-client-portal .atomware-tab-btn {
        padding: 10px !important;
        flex: 1;
        min-width: 0;
    }
    #atomware-client-portal .atomware-tab-btn .material-icons {
        font-size: 24px !important;
    }
    #atomware-client-portal .atomware-tab-btn span:not(.material-icons):not(.atomware-badge) {
        font-size: 13px;
    }
    /* Chat - compact input row, larger touch targets */
    #atomware-client-portal .atomware-team-chat-input-row,
    #atomware-client-portal .atomware-client-chat-input-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    #atomware-client-portal .atomware-team-chat-input-row textarea,
    #atomware-client-portal .atomware-client-chat-input-row textarea {
        min-height: 44px;
        width: 100%;
    }
    #atomware-client-portal .atomware-team-chat-input-composer textarea {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    #atomware-client-portal .atomware-team-chat-input-row .atomware-btn-icon,
    #atomware-client-portal .atomware-client-chat-input-row .atomware-btn-icon {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    #atomware-client-portal #send-message-btn,
    #atomware-client-portal #convert-to-task-btn {
        min-height: 44px !important;
    }
    #atomware-client-portal .atomware-group-chat-header {
        padding: 8px 12px !important;
    }
    #atomware-client-portal .atomware-group-chat-header h3,
    #atomware-client-portal #group-chat-title {
        font-size: 0.95em;
    }
    /* Kanban: shared ≤768px rules in first mobile block; card padding on phones */
    #atomware-client-portal .atomware-task-card {
        padding: 10px;
    }
    /* Files tab - no sidebar; full-width responsive */
    #atomware-client-portal .atomware-files-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    #atomware-client-portal .atomware-file-actions {
        flex-wrap: wrap;
    }
    #atomware-client-portal .atomware-file-actions button {
        flex: 1;
        min-width: 120px;
        min-height: 44px;
    }
    #atomware-client-portal .atomware-file-manager,
    #atomware-client-portal .atomware-files-container.atomware-drive {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    #atomware-client-portal .atomware-file-browser,
    #atomware-client-portal #staff-file-browser.atomware-drive-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }
    #atomware-client-portal .atomware-drive-breadcrumb {
        overflow-x: hidden;
        flex-wrap: wrap;
        padding-bottom: 4px;
    }
    /* Modal full bleed on small phones (exclude task-detail-modal to match staff dash) */
    #atomware-client-portal .atomware-modal:not(#task-detail-modal) .atomware-modal-content {
        width: 100% !important;
        max-width: 100%;
        border-radius: 0;
    }
    #atomware-client-portal .atomware-modal:not(#task-detail-modal) {
        align-items: flex-end;
    }
    #atomware-client-portal .atomware-modal:not(#task-detail-modal).active .atomware-modal-content {
        max-height: 92vh;
        border-radius: 12px 12px 0 0;
    }
    /* Safe area for notched phones */
    #atomware-client-portal .atomware-modal:not(#task-detail-modal) .atomware-modal-footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
    #atomware-client-portal .atomware-tab-content {
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* Files tab toolbar: never force full-width primary/secondary here — breaks New folder + Upload + Trash row */
    /* Match staff #tab-files: 2-up grid + tile cards (shared #tab-files rules above apply) */
    #atomware-client-portal #tab-files .atomware-drive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 10px;
    }
    #atomware-client-portal .atomware-drive-list-header {
        display: none;
    }
    #atomware-client-portal #tab-files .atomware-drive-list-header {
        display: grid;
    }
    #atomware-client-portal .atomware-drive-item {
        min-height: 44px;
    }
}

/* Small phones (400px and below) */
@media (max-width: 400px) {
    #atomware-client-portal .atomware-tab-btn span:not(.material-icons):not(.atomware-badge) {
        display: none; /* Icon-only tabs to save space */
    }
    #atomware-client-portal .atomware-tab-btn {
        padding: 12px !important;
    }
}

/* Staff Kanban: horizontal columns only tablet widths — at ≤768px the stacked
   grid rules apply; this block was max-width:1024 and overwrote mobile layout. */
@media (min-width: 769px) and (max-width: 1024px) {
    #atomware-staff-dashboard #tab-assigned.active #assigned-kanban {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 12px;
        overflow-x: auto;
        overflow-y: auto;
        padding: 12px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    #atomware-staff-dashboard .atomware-kanban-column {
        flex: 0 0 300px;
        scroll-snap-align: start;
        align-self: stretch;
        min-height: 100%;
    }
}

@media (max-width: 1024px) {
    #atomware-staff-dashboard {
        font-size: 14px;
    }
    #atomware-staff-dashboard label,
    #atomware-staff-dashboard .atomware-tab-btn,
    #atomware-staff-dashboard .atomware-status-tab,
    #atomware-staff-dashboard .atomware-sidebar-tab,
    #atomware-staff-dashboard .atomware-control-label,
    #atomware-staff-dashboard .atomware-breadcrumb-item {
        font-size: 13px !important;
    }
    #atomware-staff-dashboard input,
    #atomware-staff-dashboard select,
    #atomware-staff-dashboard textarea,
    #atomware-staff-dashboard .atomware-select,
    #atomware-staff-dashboard .atomware-select-sm {
        font-size: 16px !important;
    }
    #atomware-staff-dashboard button {
        font-size: 14px !important;
    }
}

/* Group chat title bar - logo next to company name */
.atomware-group-chat-title-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
/* Keep local time / weather / FX line visible (do not let flex:1 on h3 squeeze it to zero width). */
.atomware-group-chat-content .atomware-group-chat-title-wrap #group-chat-timezone.atomware-group-chat-timezone,
.atomware-group-chat-content .atomware-group-chat-title-wrap .atomware-group-chat-timezone {
    flex-shrink: 0;
    max-width: 100%;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    margin-left: 0;
}
.atomware-group-chat-logo-wrap {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--atomware-bg-tertiary, #e5e7eb);
}

.atomware-group-chat-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Staff timer logo – matches atomware-business-filter-item pattern */
.atomware-staff-timer-logo-wrap {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--atomware-bg-tertiary, #e5e7eb);
}
.atomware-timer-logo,
.atomware-staff-timer-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

body.atomware-chat-popout #atomware-staff-dashboard {
    height: 100vh;
}
body.atomware-chat-popout .atomware-sidebar {
    width: 100%;
    min-width: 100%;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}
body.atomware-chat-popout .atomware-sidebar-header,
body.atomware-chat-popout .atomware-sidebar-tabs,
body.atomware-chat-popout #sidebar-pane-clients,
body.atomware-chat-popout .atomware-main,
body.atomware-chat-popout .atomware-platform-footer,
body.atomware-chat-popout #notifications-panel {
    display: none !important;
}

.atomware-settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

#settings-panel .atomware-panel-content > .atomware-settings-section:first-of-type {
    align-items: center;
}

/* Client portal settings – same section cards as #settings-panel (staff) */
.atomware-client-settings.atomware-settings-container {
    display: flex;
    flex-direction: column;
    gap: var(--atomware-spacing-lg);
    width: 100%;
    box-sizing: border-box;
}
.atomware-client-settings .atomware-settings-section {
    margin-bottom: 0;
    align-items: center;
    padding: var(--atomware-spacing-lg);
    border: 1px solid var(--atomware-border);
    border-radius: var(--atomware-radius);
    background: rgba(255, 255, 255, 0.02);
    box-sizing: border-box;
}
.atomware-client-settings .atomware-client-settings-logout {
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.atomware-client-settings .atomware-client-settings-logout .atomware-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.atomware-client-settings .atomware-client-settings-logout .material-icons {
    font-size: 20px;
}
.atomware-client-settings .atomware-settings-section-title {
    margin: 0 0 12px 0;
    font-size: 1rem;
}
.atomware-client-settings .atomware-settings-hint {
    margin: 4px 0 12px 0;
    color: var(--atomware-text-muted, #9ca3af);
    font-size: 0.9rem;
}

.atomware-client-settings .atomware-notification-pref-section {
    align-items: stretch;
    text-align: left;
    width: 100%;
    max-width: 420px;
}
.atomware-notification-pref-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.atomware-notification-pref-row span {
    line-height: 1.35;
}
#settings-panel .atomware-notification-pref-section {
    align-items: flex-start;
}

/* Client settings (Details tab) on desktop: full-width cards, left-aligned controls
   (default company, notification volume, notification types, web push) */
@media (min-width: 1024px) {
    #tab-settings .atomware-client-settings .atomware-client-default-business-section,
    #tab-settings .atomware-client-settings .atomware-notification-pref-section,
    #tab-settings .atomware-client-settings .atomware-settings-section:has(#client-notification-volume),
    #tab-settings .atomware-client-settings #atomware-web-push-settings {
        max-width: 100%;
        width: 100%;
        align-self: stretch;
        align-items: flex-start;
        text-align: left;
    }
    #tab-settings .atomware-client-settings .atomware-client-default-biz-list {
        max-width: 100%;
        width: 100%;
        align-self: stretch;
    }
    #tab-settings .atomware-client-settings .atomware-volume-row {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
    }
    #tab-settings .atomware-client-settings #atomware-web-push-settings .atomware-btn {
        margin-right: 8px;
    }
}
#settings-panel .atomware-settings-subtitle {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 600;
    align-self: flex-start;
}

.atomware-settings-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--atomware-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.atomware-settings-avatar .atomware-file-input {
    display: none;
}

.atomware-settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.atomware-settings-avatar-edit {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    display: none;
}

.atomware-settings-avatar:hover .atomware-settings-avatar-edit {
    display: inline-flex;
}

.atomware-volume-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.atomware-volume-row input[type="range"] {
    flex: 1;
}

.atomware-settings-message {
    margin-top: 8px;
    font-size: 12px;
    color: var(--atomware-text-secondary);
}
body.atomware-chat-popout .atomware-sidebar-pane {
    display: none !important;
}

/* ============================================
   Contacts (Address Book) tab – spreadsheet style
   ============================================ */
.atomware-contacts-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    padding: var(--atomware-spacing, 12px);
    box-sizing: border-box;
}

.atomware-contacts-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.atomware-contacts-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    flex: 1;
    background: var(--atomware-bg-secondary, #fff);
    border: 1px solid var(--atomware-border-light, #e2e8f0);
    border-radius: var(--atomware-radius, 8px);
}

.atomware-contacts-search-icon {
    font-size: 20px;
    color: var(--atomware-text-muted, #64748b);
}

.atomware-contacts-search {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    outline: none;
}

.atomware-contacts-search::placeholder {
    color: var(--atomware-text-muted, #94a3b8);
}

.atomware-contacts-list {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    background: var(--atomware-bg-secondary, #fff);
    border: 1px solid var(--atomware-border-light, #e2e8f0);
    border-radius: var(--atomware-radius, 8px);
}

/* Spreadsheet grid: avatar | name | email | phone */
.atomware-contact-header,
.atomware-contact-row {
    display: grid;
    grid-template-columns: 48px minmax(120px, 1fr) minmax(160px, 1.5fr) minmax(120px, 1fr);
    width: 100%;
    align-items: center;
}

/* Sticky top bar - spicy indigo; min-height 48px so section headers stack correctly below */
.atomware-contact-header {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 48px;
    background: #6366f1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}

.atomware-contact-header .atomware-contact-cell,
.atomware-contact-header .atomware-contact-cell-email,
.atomware-contact-header .atomware-contact-cell-phone,
.atomware-contact-header .atomware-contact-cell-name,
.atomware-contact-header .atomware-contact-sort-btn,
.atomware-contact-header .material-icons {
    color: #fff !important;
}

.atomware-contact-sort-cell {
    cursor: pointer;
    user-select: none;
}

.atomware-contact-sort-btn {
    font-size: 14px !important;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.atomware-contact-sort-cell:hover .atomware-contact-sort-btn,
.atomware-contact-sort-btn:hover {
    opacity: 1;
}

.atomware-contact-sort-btn.atomware-contact-sort-active {
    opacity: 1;
    color: #fff;
}

.atomware-contact-cell {
    padding: 10px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atomware-contact-cell-avatar {
    display: flex;
    justify-content: center;
    padding: 8px;
}

.atomware-contact-cell-email,
.atomware-contact-cell-phone {
    color: var(--atomware-text-muted, #64748b);
    font-size: 0.9rem;
}

/* Company separator row (View All): logo | name | location in a row */
.atomware-contact-company-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--atomware-border-light, #e2e8f0);
    background: var(--atomware-bg-tertiary, #f8fafc);
    margin-top: 4px;
}

.atomware-contact-company-separator:first-of-type {
    margin-top: 0;
}

/* Client-colored bar: white text for contrast */
.atomware-contact-company-separator-colored,
.atomware-contact-company-separator-colored .atomware-contact-separator-name,
.atomware-contact-company-separator-colored .atomware-contact-separator-location,
.atomware-contact-company-separator-colored .atomware-contact-separator-location::before,
.atomware-contact-company-separator-colored .atomware-contact-separator-time,
.atomware-contact-company-separator-colored .atomware-contact-separator-timezone,
.atomware-contact-company-separator-colored .atomware-contact-separator-tz-wrap::before {
    color: #fff !important;
}

.atomware-contact-separator-logo {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--atomware-bg-tertiary, #e5e7eb);
    color: var(--atomware-text-muted, #64748b);
    font-size: 0.85rem;
    font-weight: 600;
}

.atomware-contact-separator-logo img,
.atomware-contact-separator-logo .atomware-contact-separator-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.atomware-contact-separator-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--atomware-text-primary, #0f172a);
}

.atomware-contact-separator-location {
    font-size: 0.85rem;
    color: var(--atomware-text-muted, #64748b);
}

.atomware-contact-separator-location::before {
    content: '·';
    margin: 0 6px;
    color: var(--atomware-text-muted, #94a3b8);
}

.atomware-contact-separator-tz-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.atomware-contact-separator-tz-wrap::before {
    content: '·';
    margin: 0 6px;
    color: var(--atomware-text-muted, #94a3b8);
}

.atomware-contact-separator-time {
    font-size: 0.85rem;
    color: var(--atomware-text-primary, #0f172a);
    font-weight: 500;
}

.atomware-contact-separator-timezone {
    font-size: 0.8rem;
    color: var(--atomware-text-muted, #64748b);
}

/* Section headers: Staff, Internal, External - sticky below main sort bar so each section stays under its tab */
.atomware-contact-section-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin-top: 12px;
    border-left: 4px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    position: sticky;
    top: 48px;
    z-index: 1;
}

.atomware-contact-section-staff {
    background: #1552cc;
}

.atomware-contact-section-internal {
    background: #f59e0b;
}

/* External - matches atomware-contact-badge-external (#16a34a) */
.atomware-contact-section-external {
    background: #16a34a;
}

.atomware-contact-section-header:first-of-type {
    margin-top: 0;
}

.atomware-contact-section-header-label {
    color: inherit;
}

.atomware-contact-row {
    border-bottom: 1px solid var(--atomware-border-light, #e2e8f0);
    transition: background 0.15s ease;
}

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

.atomware-contact-row:hover {
    background: var(--atomware-bg-tertiary, #f8fafc);
}

.atomware-contact-cell-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.atomware-contact-badge {
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 500;
    margin-left: 6px;
    vertical-align: middle;
}

/* Matches External section header (#16a34a) */
.atomware-contact-badge-external {
    background: #16a34a;
    color: #fff;
}

.atomware-contact-edit-btn {
    margin-left: 8px;
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: var(--atomware-text-muted, #64748b);
    cursor: pointer;
    border-radius: 4px;
    vertical-align: middle;
}

.atomware-contact-edit-btn:hover {
    color: var(--atomware-primary, #6366f1);
    background: var(--atomware-bg-tertiary, #f1f5f9);
}

.atomware-contact-edit-btn .material-icons {
    font-size: 16px;
}

.atomware-contact-cell-email {
    display: flex;
    align-items: center;
    gap: 6px;
}

.atomware-contact-email-btn {
    margin-left: 2px;
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: var(--atomware-text-muted, #64748b);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
}

.atomware-contact-email-btn:hover {
    color: var(--atomware-primary, #6366f1);
    background: var(--atomware-bg-tertiary, #f1f5f9);
}

.atomware-contact-email-btn .material-icons {
    font-size: 18px;
}

.atomware-contact-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--atomware-bg-tertiary, #e5e7eb);
    color: var(--atomware-text-muted, #64748b);
    font-size: 0.8rem;
    font-weight: 500;
}

.atomware-contact-avatar .avatar-initial {
    position: relative;
    z-index: 1;
}

.atomware-contact-avatar .avatar-fallback {
    position: absolute;
    font-size: 18px;
    opacity: 0.6;
}

/* Add/Edit contact duplicate warning - shows who the email/phone belongs to */
.atomware-add-contact-duplicate {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--atomware-radius, 6px);
}
.atomware-duplicate-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--atomware-danger, #dc2626);
    margin-bottom: 10px;
}
.atomware-duplicate-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.atomware-duplicate-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.atomware-duplicate-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--atomware-bg-tertiary, #e5e7eb);
    color: var(--atomware-text-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 600;
}
.atomware-duplicate-avatar img,
.atomware-duplicate-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.atomware-duplicate-avatar .avatar-initial {
    position: relative;
    z-index: 1;
}
.atomware-duplicate-avatar .avatar-fallback {
    position: absolute;
    font-size: 16px;
    opacity: 0.6;
}
.atomware-duplicate-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--atomware-text-primary, #0f172a);
}

.atomware-edit-contact-profile-wrap {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.atomware-edit-contact-avatar {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--atomware-bg-tertiary);
    color: var(--atomware-text-secondary);
    font-size: 24px;
    font-weight: 600;
}
.atomware-edit-contact-avatar.has-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.atomware-edit-contact-profile-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.atomware-edit-contact-profile-controls .atomware-input {
    width: 100%;
}

.atomware-contacts-loading,
.atomware-contacts-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--atomware-text-muted, #64748b);
    font-size: 0.9rem;
}

/* Contacts tab — responsive (narrow / touch): stack columns, wrap toolbar */
@media (max-width: 768px) {
    #tab-contacts .atomware-contacts-container {
        padding-left: max(8px, env(safe-area-inset-left, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
        min-width: 0;
    }
    #tab-contacts .atomware-contacts-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 10px;
    }
    #tab-contacts .atomware-contacts-search-wrap {
        min-width: 0;
    }
    /* iOS: 16px+ prevents unwanted zoom on input focus */
    #tab-contacts .atomware-contacts-search {
        font-size: 16px;
    }
    #tab-contacts #atomware-add-contact-btn {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
    /* Spreadsheet rows → avatar + stacked details */
    #tab-contacts .atomware-contact-header,
    #tab-contacts .atomware-contact-row {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 0 10px;
    }
    #tab-contacts .atomware-contact-cell-avatar {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        padding: 10px 4px;
    }
    #tab-contacts .atomware-contact-cell-name {
        grid-column: 2;
        grid-row: 1;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        min-width: 0;
        word-break: break-word;
    }
    #tab-contacts .atomware-contact-cell-email {
        grid-column: 2;
        grid-row: 2;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        min-width: 0;
        flex-wrap: wrap;
        align-items: flex-start;
        word-break: break-word;
    }
    #tab-contacts .atomware-contact-cell-phone {
        grid-column: 2;
        grid-row: 3;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        min-width: 0;
        word-break: break-word;
    }
    /* Let the sort row grow to fit 3 stacked labels (min-height: 0 was collapsing into section headers) */
    #tab-contacts .atomware-contact-header {
        align-items: start;
        min-height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
        position: sticky;
        top: 0;
        z-index: 4;
    }
    /* Subsection bars: avoid sticky stacking glitches vs multi-line sort header */
    #tab-contacts .atomware-contact-section-header {
        position: static;
        top: auto;
    }
    #tab-contacts .atomware-contact-company-separator {
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
        min-width: 0;
    }
    #tab-contacts .atomware-contact-separator-name {
        flex: 1 1 auto;
        min-width: 0;
        word-break: break-word;
    }
    #tab-contacts .atomware-contact-separator-location::before {
        margin-left: 0;
        margin-right: 4px;
    }
    #tab-contacts .atomware-contact-separator-tz-wrap {
        margin-left: 0;
        flex-basis: 100%;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Typography + density: staff Contacts tab reads large on small screens */
    #atomware-staff-dashboard #tab-contacts .atomware-contacts-container {
        padding: 6px 0;
        font-size: 13px;
        line-height: 1.35;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contacts-toolbar {
        margin-bottom: 8px;
        gap: 8px;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contacts-search-wrap {
        padding: 6px 10px;
        gap: 6px;
        border-radius: 8px;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contacts-search-icon {
        font-size: 18px;
    }
    #atomware-staff-dashboard #tab-contacts #atomware-add-contact-btn {
        font-size: 0.8125rem;
        padding: 8px 12px;
        gap: 6px;
        min-height: 40px;
    }
    #atomware-staff-dashboard #tab-contacts #atomware-add-contact-btn .material-icons {
        font-size: 18px;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-header {
        font-size: 0.6875rem;
        min-height: 4.5rem;
        letter-spacing: 0.035em;
        box-sizing: border-box;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-sort-btn {
        font-size: 12px !important;
        margin-left: 2px;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-cell {
        padding: 7px 8px;
        font-size: 0.8125rem;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-cell-name {
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1.35;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-cell-email,
    #atomware-staff-dashboard #tab-contacts .atomware-contact-cell-phone {
        font-size: 0.75rem;
        line-height: 1.35;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-avatar {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 0.68rem;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-avatar .avatar-fallback {
        font-size: 16px;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-cell-avatar {
        padding: 6px 4px;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-badge {
        font-size: 0.5625rem;
        padding: 0 3px;
        margin-left: 4px;
        vertical-align: baseline;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-section-header {
        font-size: 0.6875rem;
        padding: 8px 12px;
        margin-top: 8px;
        letter-spacing: 0.05em;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-company-separator {
        padding: 8px 10px;
        margin-top: 2px;
        gap: 6px;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-separator-name {
        font-size: 0.8125rem;
        line-height: 1.3;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-separator-location {
        font-size: 0.72rem;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-separator-time {
        font-size: 0.72rem;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-separator-timezone {
        font-size: 0.65rem;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-separator-logo {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 0.75rem;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-edit-btn .material-icons {
        font-size: 15px;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-email-btn .material-icons {
        font-size: 16px;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contacts-loading,
    #atomware-staff-dashboard #tab-contacts .atomware-contacts-empty {
        font-size: 0.8125rem;
        padding: 16px 10px;
        line-height: 1.45;
    }

    /* Company group bars: less tall “board” look; hide redundant tz line on narrow screens */
    #atomware-staff-dashboard #tab-contacts .atomware-contact-company-separator-colored {
        padding-top: 8px;
        padding-bottom: 8px;
        border-radius: 8px;
    }
    #atomware-staff-dashboard #tab-contacts .atomware-contact-separator-tz-wrap .atomware-contact-separator-timezone {
        display: none;
    }

    /* Use horizontal inset from tab-pane only; inner container aligns (less double padding cramping) */
    #atomware-staff-dashboard #tab-contacts.atomware-tab-pane.active {
        padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
    }
}

body.atomware-chat-popout #sidebar-pane-chat.atomware-sidebar-pane {
    display: flex !important;
}

/* ── Forward Messages Modal ── */
.atomware-forward-hint {
    color: var(--atomware-text-muted, #9ca3af);
    font-size: 13px;
    margin-bottom: 12px;
    border-left: 3px solid var(--e-global-color-primary, #1552cc);
    padding-left: 10px;
}
.atomware-forward-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--atomware-bg-secondary, #1a1a1a);
    border: 1px solid var(--atomware-border, #1a1a1a);
    border-radius: 8px;
    padding: 4px 10px;
    margin-bottom: 10px;
}
.atomware-forward-search-wrap .material-icons {
    font-size: 18px;
    color: var(--atomware-text-muted, #9ca3af);
}
.atomware-forward-search-wrap .atomware-input {
    border: none;
    background: transparent;
    padding: 4px 0;
    flex: 1;
}
.atomware-forward-targets {
    max-height: 320px;
    overflow-y: auto;
}
.atomware-forward-section-label {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--atomware-text-muted, #9ca3af);
    margin: 12px 0 6px;
}
.atomware-forward-section-label:first-child {
    margin-top: 0;
}
.atomware-forward-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--atomware-border, #1a1a1a);
    border-radius: 8px;
    padding: 6px;
    background: var(--atomware-bg-secondary, #1a1a1a);
}
.atomware-forward-target {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.12s;
}
.atomware-forward-target:hover {
    background: rgba(255, 255, 255, 0.05);
}
.atomware-forward-target.disabled {
    opacity: 0.4;
    pointer-events: none;
}
.atomware-forward-target input[type="checkbox"] {
    accent-color: var(--e-global-color-primary, #1552cc);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.atomware-forward-target .material-icons {
    font-size: 18px;
    color: var(--atomware-text-muted, #9ca3af);
}
/* Forward modal: DM avatars (reuses sidebar avatar classes) */
.atomware-forward-target .atomware-team-dm-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.atomware-forward-target .atomware-team-dm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.atomware-forward-target .atomware-team-dm-avatar-initial {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
/* Forward modal: Client avatars */
.atomware-forward-client-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.atomware-forward-client-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.atomware-forward-client-avatar-initial {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.atomware-forward-target-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atomware-forward-visible {
    display: inline-flex !important;
}

/* ================================================================
   Quick Links Panel
   ================================================================ */
#quick-links-panel {
    width: 340px;
    right: -340px;
}
#quick-links-panel.active {
    right: 0;
}
#quick-links-panel .atomware-panel-header h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}
#quick-links-panel .atomware-panel-content {
    max-height: calc(100vh - 130px);
}
/* Category sections */
.atomware-ql-cat-section {
    margin-bottom: 4px;
}
.atomware-ql-cat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
}
.atomware-ql-cat-header:hover {
    background: rgba(255,255,255,0.04);
}
.atomware-ql-cat-toggle {
    font-size: 18px !important;
    color: var(--atomware-text-secondary, #94a3b8);
    transition: transform 0.15s;
}
.atomware-ql-cat-section.collapsed .atomware-ql-cat-toggle {
    transform: rotate(-90deg);
}
.atomware-ql-cat-name {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--atomware-text-secondary, #94a3b8);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atomware-ql-cat-count {
    font-size: 11px;
    color: var(--atomware-text-muted, #64748b);
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
}
.atomware-ql-cat-section.collapsed .atomware-ql-cat-grid {
    display: none;
}
/* Tile grid (inside category) */
.atomware-ql-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 8px;
    align-items: start;
    align-content: start;
    padding: 4px 0 8px;
    min-height: 20px;
}
.atomware-ql-cat-grid.drag-over-grid {
    background: rgba(59,130,246,0.06);
    border-radius: 8px;
}
.atomware-ql-cat-section.drag-over-cat {
    background: rgba(59,130,246,0.08);
    border-radius: 8px;
    outline: 2px dashed var(--atomware-primary, #1552cc);
    outline-offset: -2px;
}
.atomware-quick-link-tile {
    position: relative;
    border-radius: 10px;
    background: var(--atomware-bg-secondary, #1a1a1a);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    cursor: grab;
    user-select: none;
}
.atomware-quick-link-tile:hover {
    background: var(--atomware-bg-tertiary, #334155);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.atomware-quick-link-tile.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}
.atomware-quick-link-tile.drag-over {
    outline: 2px dashed var(--atomware-primary, #1552cc);
    outline-offset: -2px;
}
.atomware-quick-link-anchor {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--atomware-text-primary, #e2e8f0);
    padding: 10px 6px 8px;
    gap: 6px;
}
.atomware-quick-link-anchor:hover {
    color: var(--atomware-text-primary, #e2e8f0);
    text-decoration: none;
}
.atomware-quick-link-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    flex-shrink: 0;
}
.atomware-quick-link-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.atomware-quick-link-icon-fallback {
    font-size: 22px;
    color: var(--atomware-text-secondary, #94a3b8);
}
.atomware-quick-link-name {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
/* Right-click context menu */
.atomware-ql-context-menu {
    position: fixed;
    z-index: 100000;
    background: var(--atomware-bg, #fff);
    border: 1px solid var(--atomware-border, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 4px 0;
    min-width: 130px;
    max-height: 320px;
    overflow-y: auto;
    animation: ql-ctx-in 0.12s ease-out;
}
@keyframes ql-ctx-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.atomware-ql-context-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--atomware-text, #333);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.atomware-ql-context-menu button .material-icons {
    font-size: 16px;
}
.atomware-ql-context-menu button:hover {
    background: var(--atomware-bg-hover, #f0f0f0);
}
.atomware-ql-context-menu .atomware-ql-ctx-delete,
.atomware-ql-context-menu .atomware-ql-catctx-delete {
    color: #ef4444;
}
.atomware-ql-context-menu .atomware-ql-ctx-delete:hover,
.atomware-ql-context-menu .atomware-ql-catctx-delete:hover {
    background: rgba(239,68,68,0.08);
}
.atomware-ql-ctx-submenu-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--atomware-text-muted, #64748b);
    padding: 6px 14px 2px;
    border-top: 1px solid var(--atomware-border, #e0e0e0);
    margin-top: 2px;
}
/* Add / Edit form */
.atomware-quick-links-form {
    padding: 12px var(--atomware-spacing);
    border-top: 1px solid var(--atomware-border);
}
.atomware-quick-links-form-field {
    margin-bottom: 10px;
}
.atomware-quick-links-form-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--atomware-text-secondary, #94a3b8);
}
.atomware-quick-links-form-field input,
.atomware-quick-links-form-field select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--atomware-border);
    border-radius: 6px;
    background: var(--atomware-bg-secondary);
    color: var(--atomware-text-primary);
    font-size: 13px;
    box-sizing: border-box;
}
.atomware-quick-links-form-field input:focus,
.atomware-quick-links-form-field select:focus {
    outline: none;
    border-color: var(--atomware-primary, #1552cc);
}
.atomware-ql-category-select-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}
.atomware-ql-category-select-wrap select {
    flex: 1;
    min-width: 0;
}
.atomware-ql-category-select-wrap .atomware-btn-icon {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--atomware-border);
    border-radius: 6px;
    color: var(--atomware-text-secondary);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.atomware-ql-category-select-wrap .atomware-btn-icon:hover {
    color: var(--atomware-text-primary);
    border-color: var(--atomware-primary, #1552cc);
}
.atomware-ql-new-cat-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}
.atomware-ql-new-cat-row input {
    flex: 1;
    min-width: 0;
}
.atomware-ql-new-cat-row .atomware-btn-icon {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--atomware-border);
    border-radius: 6px;
    color: var(--atomware-text-secondary);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.atomware-ql-new-cat-row .atomware-btn-icon:hover {
    color: var(--atomware-text-primary);
    border-color: var(--atomware-primary, #1552cc);
}
.atomware-quick-link-url-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--atomware-border);
    border-radius: 6px;
    background: var(--atomware-bg-secondary);
    overflow: hidden;
}
.atomware-quick-link-url-input-wrap:focus-within {
    border-color: var(--atomware-primary, #1552cc);
}
.atomware-quick-link-url-input-wrap input {
    border: none !important;
    border-radius: 0;
    background: transparent;
    flex: 1;
    min-width: 0;
}
.atomware-quick-link-url-input-wrap input:focus {
    outline: none;
    border: none !important;
}
.atomware-quick-link-favicon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.atomware-quick-links-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* Close button */
.atomware-quick-links-panel-close {
    background: none;
    border: none;
    color: var(--atomware-text-secondary, #94a3b8);
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.atomware-quick-links-panel-close:hover {
    color: var(--atomware-text-primary);
}
/* Fullscreen button in header */
#quick-links-fullscreen-btn {
    background: none;
    border: none;
    color: var(--atomware-text-secondary, #94a3b8);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#quick-links-fullscreen-btn .material-icons {
    font-size: 20px;
}
#quick-links-fullscreen-btn:hover {
    color: var(--atomware-text-primary);
}
/* Fullscreen mode */
#quick-links-panel.atomware-ql-fullscreen {
    width: 100vw;
    right: 0;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100001;
    transition: width 0.25s ease, right 0.25s ease;
}
#quick-links-panel.atomware-ql-fullscreen .atomware-panel-content {
    max-height: calc(100vh - 60px);
}
#quick-links-panel.atomware-ql-fullscreen .atomware-ql-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}
/* Mobile responsive */
@media (max-width: 768px) {
    #quick-links-panel {
        width: 100vw;
        right: -100vw;
    }
    .atomware-ql-cat-grid {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
        gap: 8px !important;
    }
    #quick-links-fullscreen-btn {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * WEBVIEW / NATIVE APP COMPATIBILITY LAYER
 *
 * Makes the dashboard behave well when wrapped as an Android (APK / AAB)
 * or iOS WebView — i.e. when published to Play Store / App Store via
 * MySite-app-style wrappers. All rules are guarded so they ONLY affect:
 *   - Mobile / touch viewports (≤768px) for layout safe-areas, OR
 *   - Pages flagged as native via .atomware-webview / standalone display,
 *   - Pointer-coarse / no-hover devices for the touch tweaks.
 *
 * Desktop (mouse + system browser) is untouched.
 * ───────────────────────────────────────────────────────────────────────── */

/* Allow body/html to fill the device viewport correctly in WebViews where
   100vh is computed against the *largest* possible viewport (taking the
   address bar into account). 100dvh = current dynamic viewport. */
html, body {
    /* Don't break system text selection in editors */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Stop iOS pull-to-refresh / over-scroll bounce from interfering with
   in-app scrolling (chat, lists, modals). Body is locked to the viewport. */
body:has(.atomware-dashboard),
body:has(.atomware-portal),
body:has(#atomware-crm),
body:has(#atomware-smm) {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* Containers that scroll: contain overscroll so a flick at the top of a
   list doesn't bubble up to refresh the WebView. */
.atomware-tab-content,
.atomware-modal-body,
.atomware-sidebar,
.atomware-files-tree,
#atomware-staff-dashboard #team-chat-messages,
#atomware-client-portal #group-chat-messages,
.atomware-crm-main,
.atomware-smm-main,
#atomware-staff-dashboard .atomware-team-list {
    overscroll-behavior: contain;
}

/* Touch-friendly defaults on coarse pointers (phones/tablets, including
   WebViews). Removes the 300ms tap delay, kills the blue tap highlight,
   and stops the system from showing the "save image / copy link" callout
   on long-press of UI buttons. Text inputs / editors override these so
   users can still long-press to paste. */
@media (hover: none) and (pointer: coarse) {
    .atomware-dashboard,
    .atomware-portal,
    #atomware-crm,
    #atomware-smm,
    .atomware-modal,
    .atomware-modal-overlay {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    .atomware-dashboard button,
    .atomware-portal button,
    #atomware-crm button,
    #atomware-smm button,
    .atomware-modal button,
    .atomware-dashboard a,
    .atomware-portal a,
    #atomware-crm a,
    #atomware-smm a,
    .atomware-modal a,
    .atomware-tab-btn,
    .atomware-sidebar-tab,
    .atomware-btn-icon,
    .atomware-btn-primary,
    .atomware-btn-secondary {
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
    }
    /* Keep text-selection working where it matters */
    .atomware-dashboard input,
    .atomware-dashboard textarea,
    .atomware-dashboard [contenteditable="true"],
    .atomware-portal input,
    .atomware-portal textarea,
    .atomware-portal [contenteditable="true"],
    .atomware-modal input,
    .atomware-modal textarea,
    .atomware-modal [contenteditable="true"],
    .atomware-message-text,
    .atomware-message-content,
    #team-chat-messages,
    #group-chat-messages,
    .atomware-note-content,
    .atomware-task-description,
    .atomware-email-thread {
        -webkit-user-select: text;
        user-select: text;
        -webkit-touch-callout: default;
    }
    /* Generic 44px tap target floor for any interactive icon button */
    .atomware-dashboard .atomware-btn-icon,
    .atomware-portal .atomware-btn-icon,
    #atomware-crm .atomware-btn-icon,
    #atomware-smm .atomware-btn-icon {
        min-width: 40px;
        min-height: 40px;
    }
}

/* Safe-area insets — when the page is opened in a fullscreen WebView on a
   notched iPhone or Android with gesture nav, browsers expose env() values.
   We pad the topbar and bottom-most footers/composers so content isn't
   covered by the system status bar / home indicator. */
@supports (padding: env(safe-area-inset-top)) {
    /* Top: dashboard topbars sit under the system status bar in fullscreen */
    #atomware-staff-dashboard .atomware-topbar,
    #atomware-client-portal .atomware-client-topbar,
    .atomware-crm-topbar,
    .atomware-smm-header {
        padding-top: calc(env(safe-area-inset-top, 0px) + 4px);
    }

    /* Sides: full-bleed elements respect notch */
    #atomware-staff-dashboard,
    #atomware-client-portal,
    #atomware-crm,
    #atomware-smm {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    /* Bottom: chat composer / footer-style action bars need extra room
       for the iPhone home indicator and Android gesture bar. */
    #atomware-staff-dashboard .atomware-chat-input.atomware-team-chat-input,
    #atomware-client-portal .atomware-chat-input,
    .atomware-platform-footer,
    .atomware-modal-footer {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    }

    /* Mobile drawer should also clear the notch */
    @media (max-width: 768px) {
        .atomware-dashboard:not(.sidebar-chat-expanded) > .atomware-sidebar,
        .atomware-smm-sidebar {
            padding-top: env(safe-area-inset-top, 0px);
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        /* Full-screen mobile modals */
        .atomware-modal-content {
            padding-top: env(safe-area-inset-top, 0px);
        }
    }
}

/* iOS standalone (Add-to-Home-Screen) and Trusted Web Activity (Android
   wrappers) report display-mode: standalone. Tighten layout there.
   Scope strictly to bodies that actually render our dashboard / portal so
   unrelated pages (login, homepage, KB articles, theme pages) keep their
   normal scroll behaviour even if main.css somehow loads on them. */
@media all and (display-mode: standalone), all and (display-mode: fullscreen) {
    body:has(.atomware-dashboard),
    body:has(.atomware-portal) {
        position: fixed;
        inset: 0;
        overflow: hidden;
    }
    body:has(.atomware-dashboard) > .atomware-dashboard,
    body:has(.atomware-portal) > .atomware-portal {
        height: 100vh;
        height: 100dvh;
    }
}

/* Ensure 100vh-based root layouts also size correctly against the dynamic
   viewport on mobile WebViews where the URL/nav bar can collapse. */
@supports (height: 100dvh) {
    .atomware-dashboard,
    .atomware-portal {
        height: 100dvh;
    }
}

/* PWA install button. Hidden by default; main.js shows it when the
   `beforeinstallprompt` event fires (Chrome/Edge/Samsung Internet on
   Android) or when running in stand-alone-capable iOS Safari. */
.atomware-install-btn { display: none; }
.atomware-install-btn .material-icons { font-size: 20px; }
.atomware-install-btn.atomware-install-btn--pending {
    opacity: 0.88;
}
.atomware-install-btn.atomware-install-btn--ready {
    box-shadow: 0 0 0 1px rgba(21, 82, 204, 0.45);
}
.atomware-settings-install-app .atomware-install-btn.atomware-btn-secondary .material-icons {
    font-size: 20px;
}
.atomware-install-manual-hint:not([hidden]) {
    white-space: pre-line;
    margin-top: 0.5rem;
    line-height: 1.45;
}

/* Install intro: touch vs laptop/desktop browsers (narrow window = touch copy). */
.atomware-settings-install-app .atomware-install-intro-desktop {
    display: none;
}
.atomware-settings-install-app .atomware-install-intro-touch {
    display: block;
}
@media (min-width: 769px) {
    .atomware-settings-install-app .atomware-install-intro-desktop {
        display: block;
    }
    .atomware-settings-install-app .atomware-install-intro-touch {
        display: none;
    }
}

/* Folder upload (webkitdirectory) is desktop-only — iOS WKWebView refuses
   it outright and many Android WebViews silently fail. Hide the option on
   touch devices and inside any WebView wrapper so users don't see a button
   that does nothing. The "Upload files" sibling stays available. */
@media (hover: none) and (pointer: coarse) {
    .atomware-upload-menu-item[data-type="folder"] { display: none; }
}
html.atomware-webview .atomware-upload-menu-item[data-type="folder"] {
    display: none;
}

/* Disable iOS' automatic phone-number / address detection inside chat /
   notes, which inserts <a> tags that break the layout. */
#team-chat-messages,
#group-chat-messages,
.atomware-note-body,
.atomware-task-description {
    -webkit-text-size-adjust: 100%;
}

/*
 * Phone landscape (& very short windows): viewport width usually exceeds @media (max-width:768px),
 * so those mobile-only flex rules do not apply while body/dashboard stay overflow:hidden.
 * Tasks / Reports tabs then lose a bounded scroll region — restore inner scroll chains here.
 */
@media ((orientation: landscape) and (max-height: 700px)),
       (max-height: 460px) {
    /* Staff: outer tab pane scroll host (same intent as ≤768 block). Group Chat keeps inner feed scroll. */
    #atomware-staff-dashboard .atomware-tab-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #atomware-staff-dashboard .atomware-tab-content:has(#tab-chats.atomware-tab-pane.active),
    #atomware-staff-dashboard.staff-tab-is-chats .atomware-tab-content {
        position: relative !important;
        overflow: hidden !important;
        flex: 1 1 0% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    #atomware-staff-dashboard .atomware-main {
        min-height: 0 !important;
    }

    /* Client portal: tab column participates in bounded flex-height (portal is fixed + flex column). */
    #atomware-client-portal .atomware-tab-content {
        flex: 1 1 0% !important;
        min-height: 0 !important;
    }

    /* Tasks / Assigned inner panes fill remaining height; list/kanban own vertical scroll */
    #atomware-client-portal #tab-tasks.atomware-tab-pane.active .atomware-tasks-container,
    #atomware-staff-dashboard #tab-assigned.atomware-tab-pane.active .atomware-tasks-container {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .atomware-task-list,
    #assigned-calendar.atomware-calendar-container,
    .atomware-kanban-board {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Wide + short viewports (e.g. laptop with limited chrome height): horizontal Kanban +
     * overflow-x so columns stay side-by-side; bounded height + column inner scroll below. */
    #atomware-staff-dashboard #tab-assigned.active .atomware-tasks-container.atomware-view-kanban #assigned-kanban,
    #atomware-client-portal #tab-tasks.atomware-tab-pane.active .atomware-kanban-board {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 12px;
        overflow-x: auto !important;
        overflow-y: auto !important;
        padding: 12px;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch;
        min-height: 0 !important;
    }

    #atomware-staff-dashboard #tab-assigned.active .atomware-tasks-container.atomware-view-kanban #assigned-kanban .atomware-kanban-column,
    #atomware-client-portal #tab-tasks.atomware-tab-pane.active .atomware-kanban-board .atomware-kanban-column {
        flex: 0 0 300px !important;
        scroll-snap-align: start;
        align-self: stretch;
        min-height: 100%;
        min-width: 0;
        max-width: none !important;
        width: auto !important;
    }

    #atomware-staff-dashboard .atomware-kanban-column .atomware-column-content,
    #atomware-client-portal .atomware-kanban-column .atomware-column-content {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Reports (analytics): scope + scroll body */
    #tab-analytics.atomware-tab-pane.active #atomware-analytics-section-scope {
        flex: 1 1 0% !important;
        min-height: 0 !important;
    }

    #atomware-analytics-section-scope .atomware-analytics-container {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Compact voice-session HUD — tooltip-sized chip; primary blue so it reads as active. Bottom offset set in JS with upload toasts.
 * Stacks above CRM/SMM/KB module host (99940) and team-chat overlay (99950); below platform shell (100000+) so header nav stays on top.
 */
#atomware-voice-session-hud.atomware-voice-session-hud {
    position: fixed;
    z-index: 99970;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px 3px 3px;
    border-radius: var(--atomware-radius, 6px);
    background: var(--atomware-primary, #1552cc);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow:
        0 6px 22px rgba(21, 82, 204, 0.45),
        0 2px 0 rgba(255, 255, 255, 0.12) inset;
    font-size: 0;
    line-height: 0;
}

.atomware-voice-session-hud-avatar-wrap {
    position: relative;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    margin-right: 2px;
}

.atomware-voice-session-hud-avatar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.atomware-voice-session-hud-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.atomware-voice-session-hud-avatar-initial {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}

.atomware-voice-session-hud-rec-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgb(248 113 113);
    border: 2px solid var(--atomware-primary, #1552cc);
    box-shadow: 0 0 0 0 rgb(248 113 113 / 0.55);
    animation: atomwareVoiceHudRecPulse 1.05s ease-in-out infinite;
    z-index: 1;
}

@keyframes atomwareVoiceHudRecPulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgb(248 113 113 / 0.55);
    }
    50% {
        opacity: 0.82;
        box-shadow: 0 0 0 10px rgb(248 113 113 / 0);
    }
}

.atomware-voice-session-hud-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--atomware-radius, 6px);
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

.atomware-voice-session-hud-icon-btn:hover {
    background: rgba(255, 255, 255, 0.34);
}

.atomware-voice-session-hud-icon-btn .material-icons {
    font-size: 16px !important;
    line-height: 1;
}

html[data-theme='light'] #atomware-voice-session-hud.atomware-voice-session-hud {
    /* Same brand blue for contrast on light pages */
    background: var(--atomware-primary, #1552cc);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 8px 26px rgba(21, 82, 204, 0.4),
        0 2px 0 rgba(255, 255, 255, 0.18) inset;
}

html[data-theme='light'] .atomware-voice-session-hud-rec-dot {
    border-color: var(--atomware-primary, #1552cc);
}

html[data-theme='light'] .atomware-voice-session-hud-icon-btn {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

html[data-theme='light'] .atomware-voice-session-hud-icon-btn:hover {
    background: rgba(255, 255, 255, 0.38);
}

/* Composer draft reminder — match compact voice HUD language; stacked under voice HUD via JS */
#atomware-composer-draft-hud.atomware-composer-draft-hud {
    position: fixed;
    z-index: 99968;
    max-width: min(320px, calc(100vw - max(28px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 8px)));
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: nowrap;
    padding: 3px 4px 3px 3px;
    border-radius: var(--atomware-radius, 6px);
    background: var(--atomware-primary, #1552cc);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow:
        0 6px 22px rgba(21, 82, 204, 0.45),
        0 2px 0 rgba(255, 255, 255, 0.12) inset;
    font-size: 12px;
    line-height: 1.2;
    color: #ffffff;
}

html[data-theme='light'] #atomware-composer-draft-hud.atomware-composer-draft-hud {
    background: var(--atomware-primary, #1552cc);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 8px 26px rgba(21, 82, 204, 0.4),
        0 2px 0 rgba(255, 255, 255, 0.18) inset;
}

/* 9×9 flex slot; ~2× red marker painted on ::before so row width stays unchanged */
.atomware-composer-draft-hud-dot {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    flex-shrink: 0;
    border-radius: 50%;
}

.atomware-composer-draft-hud-dot::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgb(248 113 113);
    border: 2px solid var(--atomware-primary, #1552cc);
    box-shadow: 0 0 0 0 rgb(248 113 113 / 0.55);
    animation: atomwareComposerDraftHudPulse 1.05s ease-in-out infinite;
    pointer-events: none;
}

@keyframes atomwareComposerDraftHudPulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgb(248 113 113 / 0.55);
    }
    50% {
        opacity: 0.82;
        box-shadow: 0 0 0 10px rgb(248 113 113 / 0);
    }
}

.atomware-composer-draft-hud-text {
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atomware-composer-draft-hud-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.atomware-composer-draft-hud-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
}

.atomware-composer-draft-hud-spacer {
    flex: 1 1 auto;
    min-width: 4px;
}

.atomware-composer-draft-hud-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.atomware-composer-draft-hud .atomware-composer-draft-hud-split-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    height: 26px;
    min-height: 26px;
    min-width: 30px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.02em;
    border: none;
    border-radius: var(--atomware-radius, 6px);
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

.atomware-composer-draft-hud .atomware-composer-draft-hud-split-go .material-icons {
    font-size: 17px !important;
    line-height: 1;
}

.atomware-composer-draft-hud .atomware-composer-draft-hud-split-go:hover {
    background: rgba(255, 255, 255, 0.34);
}

.atomware-composer-draft-hud-preview {
    display: block;
    padding-left: 13px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.18;
    color: rgba(255, 255, 255, 0.88);
    max-width: min(268px, calc(100vw - max(72px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 48px)));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme='light'] .atomware-composer-draft-hud-preview {
    color: rgba(255, 255, 255, 0.92);
}

.atomware-composer-draft-hud .atomware-composer-draft-hud-go {
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    border: none;
    border-radius: var(--atomware-radius, 6px);
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

.atomware-composer-draft-hud .atomware-composer-draft-hud-go:hover {
    background: rgba(255, 255, 255, 0.34);
}

.atomware-composer-draft-hud .atomware-composer-draft-hud-go .material-icons {
    font-size: 16px !important;
    line-height: 1;
}

html[data-theme='light'] .atomware-composer-draft-hud-dot::before {
    border-color: var(--atomware-primary, #1552cc);
}

html[data-theme='light'] .atomware-composer-draft-hud .atomware-composer-draft-hud-go {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

html[data-theme='light'] .atomware-composer-draft-hud .atomware-composer-draft-hud-go:hover {
    background: rgba(255, 255, 255, 0.38);
}

html[data-theme='light'] .atomware-composer-draft-hud .atomware-composer-draft-hud-split-go {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

html[data-theme='light'] .atomware-composer-draft-hud .atomware-composer-draft-hud-split-go:hover {
    background: rgba(255, 255, 255, 0.38);
}

/* Multi-draft HUD: scrollable per-thread list when many stashed composers */
.atomware-composer-draft-hud.atomware-composer-draft-hud--multi.atomware-composer-draft-hud--collapsed
    .atomware-composer-draft-hud-list-wrap {
    display: none;
}

.atomware-composer-draft-hud--multi .atomware-composer-draft-hud-multi-head {
    width: 100%;
}

#atomware-composer-draft-hud.atomware-composer-draft-hud--multi {
    flex-direction: column;
    align-items: stretch;
    /* Wider than legacy chip: list rows need horizontal room on phones */
    max-width: min(380px, calc(100vw - max(20px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))));
    box-sizing: border-box;
}

.atomware-composer-draft-hud-list-wrap {
    margin-top: 2px;
    max-width: 100%;
    min-width: 0;
}

.atomware-composer-draft-hud-list-scroll {
    max-height: min(40vh, 280px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 2px;
}

.atomware-composer-draft-hud-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: var(--atomware-radius, 6px);
    background: rgba(255, 255, 255, 0.12);
}

.atomware-composer-draft-hud-surface-badge {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.24);
    line-height: 1.15;
}

/* Phase 3: logo / avatar / icon thumb (multi-list + legacy row) */
.atomware-composer-draft-hud-list-thumb {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.atomware-composer-draft-hud-row-thumb {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.atomware-composer-draft-hud-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.atomware-composer-draft-hud-list-thumb .material-icons {
    font-size: 17px !important;
    line-height: 1;
    color: #fff;
}

.atomware-composer-draft-hud-row-thumb .material-icons {
    font-size: 15px !important;
}

.atomware-composer-draft-hud-thumb-initial {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.02em;
}

.atomware-composer-draft-hud-list-snippet--muted {
    opacity: 0.82;
    font-style: italic;
}

.atomware-composer-draft-hud-list-body {
    flex: 1 1 0;
    min-width: 0;
}

.atomware-composer-draft-hud-list-title {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
}

.atomware-composer-draft-hud-list-snippet {
    font-size: 11px;
    line-height: 1.28;
    color: rgba(255, 255, 255, 0.87);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    word-break: break-word;
}

.atomware-composer-draft-hud--multi .atomware-composer-draft-hud-toggle .material-icons {
    font-size: 15px !important;
    line-height: 1;
    color: #fff;
}

.atomware-composer-draft-hud-multi-head,
.atomware-composer-draft-hud--legacy .atomware-composer-draft-hud-row {
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.atomware-composer-draft-hud--dragging.atomware-composer-draft-hud {
    cursor: grabbing;
}

.atomware-composer-draft-hud-list-logo {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
    align-self: center;
}

.atomware-composer-draft-hud-list-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Larger tap targets on narrow viewports — voice + composer draft HUDs share bottom corner with toasts/notifs */
@media (max-width: 768px) {
    #atomware-voice-session-hud.atomware-voice-session-hud {
        padding: 4px 5px;
        gap: 4px;
        max-width: calc(100vw - max(24px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)));
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .atomware-voice-session-hud-icon-btn {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        border-radius: 6px;
    }
    .atomware-voice-session-hud-icon-btn .material-icons {
        font-size: 12px !important;
    }

    #atomware-composer-draft-hud.atomware-composer-draft-hud {
        padding: 5px 6px;
        gap: 6px;
    }

    .atomware-composer-draft-hud .atomware-composer-draft-hud-go {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        border-radius: 6px;
    }
    .atomware-composer-draft-hud .atomware-composer-draft-hud-go .material-icons {
        font-size: 12px !important;
    }
    .atomware-composer-draft-hud .atomware-composer-draft-hud-split-go {
        height: auto;
        min-height: 22px;
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 6px;
    }

    .atomware-composer-draft-hud-toggle {
        min-width: 22px;
        min-height: 22px;
    }
    .atomware-composer-draft-hud-list-go {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        border-radius: 6px;
    }
    .atomware-composer-draft-hud-list-go .material-icons {
        font-size: 12px !important;
    }

    .atomware-composer-draft-hud--multi .atomware-composer-draft-hud-toggle .material-icons {
        font-size: 12px !important;
    }

    .atomware-composer-draft-hud-list-row {
        min-height: 40px;
        align-items: center;
    }
}

@media (max-width: 480px) {
    #atomware-composer-draft-hud.atomware-composer-draft-hud:not(.atomware-composer-draft-hud--user-positioned) {
        max-width: min(320px, calc(100vw - max(24px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 8px)));
    }

    #atomware-composer-draft-hud.atomware-composer-draft-hud--multi:not(.atomware-composer-draft-hud--user-positioned) {
        max-width: calc(100vw - max(16px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)));
    }

    .atomware-composer-draft-hud--legacy .atomware-composer-draft-hud-row {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .atomware-composer-draft-hud--legacy .atomware-composer-draft-hud-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .atomware-composer-draft-hud-preview {
        max-width: 100%;
        padding-left: 13px;
        box-sizing: border-box;
    }
}

/* Print: dashboard is not designed to print; show a friendly message. */
@media print {
    body:has(.atomware-dashboard) > *:not(.atomware-print-message) {
        display: none !important;
    }
}