/* ============================================================
   Material Icons – size normalization
   ============================================================ */

.material-icons {
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Rail buttons */
.rail-btn .material-icons {
    font-size: 22px;
}

/* Header back button */
.back-btn .material-icons {
    font-size: 18px;
}

/* Sidebar header */
.sidebar-title .material-icons {
    font-size: 16px;
}
.sidebar-collapse-btn .material-icons {
    font-size: 20px;
}
.sidebar-collapse-btn.rotated .material-icons {
    transform: rotate(180deg);
}

/* Search box */
.search-icon.material-icons {
    font-size: 16px;
}

/* Select-box dropdown arrow */
.select-box .material-icons {
    font-size: 16px;
    color: var(--text-tertiary);
}

/* Compose button */
.compose-btn .material-icons {
    font-size: 16px;
}

/* Detail action buttons */
.detail-action-btn .material-icons {
    font-size: 16px;
}

/* Sender group chevron */
.sender-group-chevron.material-icons {
    font-size: 18px;
}
.sender-group.collapsed .sender-group-chevron.material-icons {
    transform: rotate(-90deg);
}

/* Badge icons */
.badge-icon.material-icons {
    font-size: 11px;
}

/* ============================================================
   Color Primitives
   ============================================================ */
:root {
    /* Neutral */
    --neutral-0: #ffffff;
    --neutral-100: #f5f7f9;
    --neutral-200: #eceff3;
    --neutral-300: #d9dee5;
    --neutral-400: #c2cad3;
    --neutral-500: #9aa6b2;
    --neutral-600: #6f7d8c;
    --neutral-700: #354052;
    --neutral-750: #25313e;
    --neutral-800: #1f2933;

    /* Green */
    --green-100: #d4f7ef;
    --green-200: #a9efe0;
    --green-300: #75e1cb;
    --green-400: #45d0b4;
    --green-500: #00b894;
    --green-600: #009f7f;
    --green-700: #00785f;
    --green-800: #005443;

    /* Blue */
    --blue-100: #e5f1fd;
    --blue-200: #c7e2fa;
    --blue-300: #98cbf5;
    --blue-400: #6fb3ef;
    --blue-500: #0984e3;
    --blue-600: #076ab4;
    --blue-700: #054f85;
    --blue-800: #00365a;

    /* Purple */
    --purple-100: #f3efff;
    --purple-200: #e3d8fd;
    --purple-300: #c7bcfa;
    --purple-400: #a79bf4;
    --purple-500: #6c5ce7;
    --purple-600: #5246b5;
    --purple-700: #3a3385;
    --purple-800: #262255;

    /* Yellow */
    --yellow-100: #fff7e3;
    --yellow-200: #ffeab8;
    --yellow-300: #fddc8d;
    --yellow-400: #fdcb6e;
    --yellow-500: #fdb833;
    --yellow-600: #f0a500;
    --yellow-700: #e09100;
    --yellow-800: #c97c00;

    /* Orange */
    --orange-100: #fff3e8;
    --orange-200: #fedcc0;
    --orange-300: #f8bc8d;
    --orange-400: #f39a58;
    --orange-500: #e66a11;
    --orange-600: #c85a0e;
    --orange-700: #9f460c;
    --orange-800: #74300a;

    /* Red */
    --red-100: #fcebed;
    --red-200: #f9d3d7;
    --red-300: #f1a9b1;
    --red-400: #e77882;
    --red-500: #cd2e3a;
    --red-600: #b0242e;
    --red-700: #861a23;
    --red-800: #621319;
}

/* ============================================================
   Semantic Color Tokens
   ============================================================ */
:root {
    /* Text */
    --text-primary: var(--neutral-700);
    --text-secondary: var(--neutral-600);
    --text-tertiary: var(--neutral-500);
    --text-disabled: var(--neutral-400);
    --text-placeholder: var(--text-tertiary);
    --text-inverse: var(--neutral-0);
    --text-inverse-muted: var(--neutral-500);
    --text-inverse-subtle: var(--neutral-600);

    /* Background */
    --bg-canvas: var(--neutral-0);
    --bg-canvas-hover: var(--neutral-100);
    --bg-surface: var(--neutral-200);
    --bg-surface-raised: var(--neutral-300);
    --bg-inverse: var(--neutral-800);
    --bg-inverse-hover: var(--neutral-700);
    --bg-inverse-active: var(--neutral-600);
    --bg-rail: var(--neutral-750);

    /* Border */
    --border-subtle: var(--neutral-300);
    --border-default: var(--neutral-400);
    --border-strong: var(--neutral-500);
    --border-inverse: var(--neutral-0);
    --border-inverse-subtle: var(--neutral-600);

    /* Action / Primary (Green) */
    --action-primary-default: var(--green-500);
    --action-primary-hover: var(--green-600);
    --action-primary-active: var(--green-700);
    --action-primary-disabled: var(--neutral-300);
    --action-primary-surface: var(--green-100);
    --action-on-primary: var(--neutral-0);

    /* Action / Secondary (Blue) */
    --action-secondary-default: var(--blue-500);
    --action-secondary-hover: var(--blue-600);
    --action-secondary-active: var(--blue-700);
    --action-secondary-disabled: var(--neutral-300);
    --action-secondary-surface: var(--blue-100);
    --action-on-secondary: var(--neutral-0);

    /* Focus */
    --focus-ring: var(--blue-400);

    /* Selection */
    --selection-surface: var(--green-100);
    --selection-text: var(--green-700);
    --selection-border: var(--green-500);

    /* Feedback / Success */
    --feedback-success-surface: var(--green-100);
    --feedback-success-text: var(--green-700);
    --feedback-success-border: var(--green-400);

    /* Feedback / Warning */
    --feedback-warning-surface: var(--yellow-100);
    --feedback-warning-text: var(--yellow-700);
    --feedback-warning-border: var(--yellow-400);

    /* Feedback / Danger */
    --feedback-danger-surface: var(--red-100);
    --feedback-danger-text: var(--red-700);
    --feedback-danger-border: var(--red-500);

    /* Feedback / Info */
    --feedback-info-surface: var(--neutral-100);
    --feedback-info-text: var(--neutral-700);
    --feedback-info-border: var(--neutral-400);

    /* Status / Success */
    --status-success-surface: var(--green-100);
    --status-success-surface-hover: var(--green-200);
    --status-success-border: var(--green-400);
    --status-success-text: var(--green-700);
    --status-success-icon: var(--green-500);

    /* Status / Warning */
    --status-warning-surface: var(--yellow-100);
    --status-warning-surface-hover: var(--yellow-200);
    --status-warning-border: var(--yellow-400);
    --status-warning-text: var(--yellow-700);
    --status-warning-icon: var(--yellow-500);

    /* Status / Danger */
    --status-danger-surface: var(--red-100);
    --status-danger-surface-hover: var(--red-200);
    --status-danger-border: var(--red-500);
    --status-danger-text: var(--red-700);
    --status-danger-icon: var(--red-500);

    /* Status / Highlight (Blue) */
    --status-highlight-surface: var(--blue-100);
    --status-highlight-surface-hover: var(--blue-200);
    --status-highlight-border: var(--blue-400);
    --status-highlight-text: var(--blue-700);
    --status-highlight-icon: var(--blue-500);

    /* Status / AI (Purple) */
    --status-ai-surface: var(--purple-100);
    --status-ai-surface-hover: var(--purple-200);
    --status-ai-border: var(--purple-400);
    --status-ai-text: var(--purple-700);
    --status-ai-icon: var(--purple-500);

    /* Status / Neutral */
    --status-neutral-surface: var(--neutral-100);
    --status-neutral-surface-hover: var(--neutral-200);
    --status-neutral-border: var(--neutral-400);
    --status-neutral-text: var(--neutral-700);
    --status-neutral-icon: var(--neutral-500);

    /* Layout */
    --rail-width: 60px;
    --sidebar-width: 275px;
    --header-height: 104px;
    --feed-min-width: 340px;

    --font-family:
        "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 999px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   Typography Foundation Tokens
   ============================================================ */
:root {
    --font-family-base: var(--font-family);

    --font-size-xxs: 10px;
    --font-size-xs: 12px;
    --font-size-s: 14px;
    --font-size-m: 16px;
    --font-size-l: 20px;
    --font-size-xl: 24px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    --line-height-s: 20px;
    --line-height-m: 24px;
    --line-height-l: 28px;
    --line-height-xl: 32px;

    --letter-spacing-none: 0px;
    --letter-spacing-tight: 0.1px;
    --letter-spacing-normal: 0.15px;
    --letter-spacing-wide: 0.5px;
}

/* ============================================================
   Typography Styles
   ============================================================ */
.heading-1 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-xl);
    letter-spacing: var(--letter-spacing-none);
}

.heading-2,
.project-title,
.upload-modal-title {
    font-family: var(--font-family-base);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-l);
    letter-spacing: var(--letter-spacing-normal);
}

.heading-3,
.modal-title,
.compose-overlay-title {
    font-family: var(--font-family-base);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-m);
    letter-spacing: var(--letter-spacing-normal);
}

.heading-4 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-m);
    letter-spacing: var(--letter-spacing-normal);
}

.body-1 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-m);
    letter-spacing: var(--letter-spacing-none);
}

.body-2,
body,
.filter-checkbox,
.toggle-label,
.card-subject,
.card-preview,
.flat-label,
.detail-empty,
.no-results,
.detail-body,
.thread-email-body,
.sender-group-count,
.suggested-action-label,
.nudge-link,
.compose-field-label,
.compose-field-input,
.compose-body,
.compose-quoted-body,
.modal-body-text,
.upload-drop-text,
.upload-drop-hint,
.search-box input {
    font-family: var(--font-family-base);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-none);
}

.body-3,
.select-box input,
.card-company,
.card-time,
.flat-time,
.meta-row,
.sender-group-time,
.waiting-label,
.thread-group-count,
.suggested-action-count {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-none);
}

.label-1,
.tab-btn,
.filter-label,
.sidebar-title,
.feed-title,
.detail-company-name,
.compose-header-title,
.sender-group-name,
.thread-group-subject,
.suggested-actions-title,
.status-badge,
.upload-modal-footer .modal-btn,
.sidebar-rail-label {
    font-family: var(--font-family-base);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-wide);
}

.label-2,
.compose-btn,
.detail-action-btn,
.activity-card .badge,
.compose-send-btn,
.modal-btn {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-wide);
}

.label-3,
.badge,
.activity-avatar,
.avatar,
.thread-count-badge,
.thread-group-time,
.sidebar-rail-badge {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-s);
    letter-spacing: var(--letter-spacing-wide);
}

/* ============================================================
   Reset & Base
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

body {
    background: var(--bg-canvas);
    color: var(--text-primary);
    height: 100vh;
    padding-top: var(--pinpoint-toolbar-height, 49px);
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

input {
    font-family: inherit;
    border: none;
    outline: none;
    background: none;
}

/* ============================================================
   App Rail (Left Nav)
   ============================================================ */
.app-rail {
    width: var(--rail-width);
    background: var(--bg-rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
    flex-shrink: 0;
    z-index: 20;
}

.rail-top,
.rail-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.rail-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse-muted);
    transition:
        background 0.15s,
        color 0.15s;
}

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

.rail-btn--add {
    background: var(--bg-canvas);
    color: var(--text-primary);
    width: 100%;
    border-radius: var(--radius-md);
}

.rail-btn--add:hover {
    background: var(--bg-surface);
}

.rail-btn--active {
    background: var(--bg-canvas);
    color: var(--text-primary);
    width: 100%;
    border-radius: var(--radius-md);
}

.rail-btn--active:hover {
    background: var(--bg-surface);
}

.rail-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* ============================================================
   Main Wrapper
   ============================================================ */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ============================================================
   Project Header
   ============================================================ */
.project-header {
    background: var(--bg-inverse-hover);
    color: var(--text-inverse);
    padding: 24px 24px 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.back-btn {
    color: var(--text-inverse-muted);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition:
        background 0.15s,
        color 0.15s;
}

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

.project-title {
    color: var(--text-inverse);
}

.status-badge {
    text-transform: uppercase;
    padding: 4px 16px;
    border-radius: var(--radius-sm);
}

.status-badge--on-track {
    background: var(--status-highlight-surface);
    color: var(--status-highlight-text);
}

/* Project Tabs */
.project-tabs {
    display: flex;
    gap: 0;
    border-bottom: none;
}

.tab-btn {
    color: var(--text-inverse-muted);
    padding: 10px 24px;
    border-bottom: 3px solid transparent;
    transition:
        color 0.15s,
        border-color 0.15s;
    white-space: nowrap;
}

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

.tab-btn--active {
    color: var(--text-inverse);
    border-bottom-color: var(--text-inverse);
    font-weight: var(--font-weight-semibold);
}

/* ============================================================
   Content Area (3-column layout)
   ============================================================ */
.content-area {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    background: var(--bg-surface);
}

/* ============================================================
   Filter Sidebar
   ============================================================ */
.filter-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--bg-canvas);
    border-right: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
}

.sidebar-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
}

.filter-sidebar.collapsed {
    width: 40px;
    overflow: hidden;
}

.filter-sidebar.collapsed .sidebar-header,
.filter-sidebar.collapsed .sidebar-body {
    display: none;
}

.sidebar-collapsed-rail {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 40px;
    height: 100%;
    padding-bottom: 16px;
    cursor: pointer;
}

.filter-sidebar.collapsed .sidebar-collapsed-rail {
    display: flex;
}

.sidebar-rail-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: color 0.15s;
}

.sidebar-collapsed-rail:hover .sidebar-rail-header {
    color: var(--text-secondary);
}

.sidebar-rail-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    width: 100%;
}

.sidebar-rail-label {
    color: var(--text-secondary);
    transform: rotate(-90deg);
    white-space: nowrap;
    user-select: none;
}

.sidebar-rail-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--text-secondary);
    color: var(--text-inverse);
    flex-shrink: 0;
}

/* Exception: no semantic token maps to the active-filter badge green.
   Uses --action-primary-active (--green-700) directly, same pattern as .activity-avatar--planhub. */
.sidebar-rail-badge--active {
    background: var(--action-primary-active);
}

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

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-primary);
}

.sidebar-collapse-btn {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    transition:
        background 0.15s,
        color 0.15s;
}

.sidebar-collapse-btn:hover {
    background: var(--border-subtle);
    color: var(--text-primary);
}

.sidebar-collapse-btn.rotated .material-icons {
    transform: rotate(180deg);
}

/* Search box */
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

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

.search-box input {
    flex: 1;
    color: var(--text-primary);
    min-width: 0;
}

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

.search-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    transition: color 0.1s;
}

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

.search-clear-btn .material-icons {
    font-size: 16px;
}

/* Filter groups */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label {
    color: var(--text-primary);
    text-transform: none;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-primary);
}

.filter-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--border-strong);
    border-radius: 3px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-canvas);
    flex-shrink: 0;
    transition:
        background 0.1s,
        border-color 0.1s;
    position: relative;
}

.filter-checkbox input[type="checkbox"]:checked {
    background: var(--action-primary-default);
    border-color: var(--action-primary-default);
}

.filter-checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 3px;
    width: 5px;
    height: 8px;
    border: 1.5px solid var(--action-on-secondary);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.filter-checkbox:hover span {
    color: var(--text-primary);
}

.filter-group--actions {
    padding: 10px;
    background: var(--status-ai-surface);
    border-radius: var(--radius-md);
}

.suggested-actions-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 8px 6px;
}

.suggested-actions-icon {
    font-size: 16px;
    color: var(--status-ai-icon);
    flex-shrink: 0;
}

.suggested-actions-title {
    color: var(--text-primary);
}

.suggested-actions-list {
    display: flex;
    flex-direction: column;
}

.suggested-action-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 28px;
    padding: 2px 0 2px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
}

.suggested-action-row:hover {
    background: var(--status-ai-surface-hover);
}

.suggested-action-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    align-self: center;
    border: 1.5px solid var(--border-strong);
    border-radius: 3px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-canvas);
    flex-shrink: 0;
    transition:
        background 0.1s,
        border-color 0.1s;
    position: relative;
}

.suggested-action-row input[type="checkbox"]:checked {
    background: var(--status-ai-icon);
    border-color: var(--status-ai-icon);
}

.suggested-action-row input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 3px;
    width: 5px;
    height: 8px;
    border: 1.5px solid var(--action-on-secondary);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.suggested-action-label {
    flex: 1;
    min-width: 0;
    margin-left: 2px;
}

.suggested-action-count {
    margin-left: auto;
    margin-right: 8px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.badge--variant .action-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 999px;
    margin-left: 2px;
    color: var(--action-on-secondary);
    line-height: 1;
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    background: var(--action-secondary-default);
    flex-shrink: 0;
}

.activity-card .badge--variant .action-count-badge {
    background: var(--badge-pill-bg);
}

/* Nudge highlight */
mark.nudge-highlight {
    background: var(--status-ai-surface);
    color: var(--status-ai-text);
    border-radius: 2px;
    padding: 1px 0;
}

/* Search highlight */
mark.search-highlight {
    background: var(--yellow-300);
    color: inherit;
    border-radius: 2px;
    padding: 1px 0;
}

/* Nudge link */
.nudge-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--status-ai-text);
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.nudge-link:hover .nudge-link-text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nudge-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.nudge-icon.material-icons {
    font-size: 13px;
    color: var(--status-ai-icon);
    flex-shrink: 0;
}

/* Select boxes */
.select-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.select-box input {
    flex: 1;
    color: var(--text-secondary);
    min-width: 0;
}

.select-box input::placeholder {
    color: var(--text-tertiary);
}

.select-box svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* ============================================================
   Feed + Detail floating container
   ============================================================ */
.feed-detail-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-width: 0;
    background: var(--bg-canvas);
    border-radius: 12px;
    border: 1px solid var(--border-default);
    box-shadow: 0 1px 4px var(--shadow-sm);
    margin: 16px 16px 16px 16px;
}

/* ============================================================
   Activity Feed
   ============================================================ */
.activity-feed {
    flex: 1;
    min-width: var(--feed-min-width);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border-default);
    background: transparent;
}

.feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.feed-title {
    color: var(--text-primary);
}

.compose-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--action-primary-default);
}

/* Activity list */
.activity-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.activity-list:has(> .sender-group) {
    padding-top: 0;
}

/* ── Shared row wrapper ── */
.activity-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 14px;
    cursor: pointer;
}

.activity-row.hidden {
    display: none;
}

/* Avatar */
.activity-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    overflow: hidden;
    margin-top: 2px;
}

.avatar-with-logo {
    background: transparent;
    border: 0;
    padding: 0;
}

.avatar-with-logo--planhub {
    background: var(--bg-canvas);
    border: 1px solid var(--border-default);
    box-sizing: border-box;
    padding: 4px;
}

.avatar-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-with-logo--planhub .avatar-logo-img {
    object-fit: contain;
}

.activity-avatar--planhub {
    background: linear-gradient(135deg, var(--green-400), var(--green-600));
    border-radius: var(--radius-md);
}

/* ── CARD items (emails / messages with subject+preview) ── */
.activity-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    padding: 12px;
    flex: 1;
    min-width: 0;
    background: var(--bg-canvas-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    transition:
        background 0.12s,
        border-color 0.12s;
}

.activity-row:hover .activity-card {
    background: var(--bg-surface);
    border-color: var(--border-default);
}

.activity-row.active .activity-card {
    background: var(--selection-surface);
    border: 1px solid var(--border-subtle);
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    width: 100%;
    margin-bottom: 0;
}

.card-company {
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-time {
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.card-subject-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 0;
}

.card-subject-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.card-subject {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Unread dot on subject line */
.activity-row.unread .card-subject::before {
    display: none;
}

.attachment-icon.material-icons {
    font-size: 14px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.card-preview {
    width: 100%;
    color: var(--text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.activity-card .badge {
    min-height: 24px;
    padding: 2px 8px 2px 4px;
    border: 0;
    border-radius: 4px;
    background: var(--action-secondary-surface);
    color: var(--action-secondary-default);
    text-transform: none;
}

.activity-card .badge-icon.material-icons {
    font-size: 11px;
    color: var(--action-secondary-default);
}

.activity-row.active .badge {
    background: var(--action-secondary-default);
    color: var(--action-on-secondary);
}

.activity-row.active .badge-icon.material-icons {
    color: var(--action-on-secondary);
}

/* ── FLAT items (calls, open-tracking, system updates) ── */
.activity-flat {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    min-height: 40px;
    padding: 12px;
    border-radius: 8px;
    border-bottom: none;
}

.flat-label {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flat-label a {
    color: var(--action-secondary-default);
    text-decoration: none;
}

.flat-label a:hover {
    text-decoration: underline;
}

.flat-time {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================
   Badges
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge svg {
    flex-shrink: 0;
}

.badge.filter-action-chip,
.sender-group-latest-action .badge {
    min-height: 24px;
    padding: 2px 8px 2px 4px;
    border: 0;
    border-radius: 4px;
    background: var(--action-secondary-surface);
    color: var(--action-secondary-default);
    text-transform: none;
}

.badge.filter-action-chip .badge-icon.material-icons,
.sender-group-latest-action .badge-icon.material-icons {
    font-size: 11px;
    color: var(--action-secondary-default);
}

.badge--variant {
    background: var(--badge-bg);
    color: var(--badge-color);
    border: 1px solid var(--badge-border);
}

/* ============================================================
   Detail Pane
   ============================================================ */
.detail-pane {
    width: 420px;
    flex-shrink: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.detail-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.detail-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.detail-company {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    flex-shrink: 0;
}

.detail-company-name {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Compose-mode header toggling */
.detail-header-compose {
    display: none;
}

.detail-header--compose .detail-header-view {
    display: none;
}

.detail-header--compose .detail-header-compose {
    display: flex;
}

.compose-header-title {
    flex: 1;
    color: var(--text-primary);
}

.compose-close-btn {
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: background 0.1s, color 0.1s;
}

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

.compose-close-btn .material-icons {
    font-size: 18px;
}

.detail-actions {
    display: flex;
    gap: 16px;
}

.detail-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--action-primary-default);
}

/* Detail meta */
.detail-meta {
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.meta-row {
    display: flex;
    gap: 12px;
}

.meta-key {
    width: 52px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.meta-val {
    color: var(--text-primary);
}

/* Detail body */
.detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    color: var(--text-primary);
    white-space: pre-wrap;
}

/* ============================================================
   Compose Pane
   ============================================================ */
.compose-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.compose-fields {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 18px;
}

.compose-field-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
}

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

.compose-field-label {
    width: 52px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.compose-field-input {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    padding: 0;
}

.compose-field-input::placeholder {
    color: var(--text-placeholder);
}

.compose-field-input[readonly] {
    color: var(--text-secondary);
}

.compose-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    overflow: hidden;
    max-height: 40px;
    transition: max-height 0.2s ease, padding 0.2s ease, border-color 0.2s ease;
}

.compose-toolbar.compose-toolbar--hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
}

.compose-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: background 0.1s, color 0.1s;
    cursor: pointer;
}

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

.compose-tool-btn .material-icons {
    font-size: 16px;
}

.compose-toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--border-subtle);
    margin: 0 4px;
    flex-shrink: 0;
}

.compose-body-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.compose-body {
    resize: none;
    border: none;
    outline: none;
    padding: 14px 18px;
    font-family: inherit;
    font-size: inherit;
    color: var(--text-primary);
    background: transparent;
    min-height: 120px;
    flex-shrink: 0;
    overflow: hidden;
}

.compose-body::placeholder {
    color: var(--text-placeholder);
}

.compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.compose-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compose-send-btn {
    padding: 6px 16px;
    background: var(--action-primary-default);
    color: var(--action-on-primary);
    border-radius: 999px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

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

/* Quoted original email */
.compose-quoted {
    flex-shrink: 0;
}

.compose-quoted-sep {
    height: 1px;
    background: var(--border-subtle);
    margin: 0 18px;
}

.compose-quoted-body {
    padding: 12px 18px;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

/* ============================================================
   Compose Email Overlay (standalone floating panel)
   ============================================================ */
.compose-overlay {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 560px;
    height: 622px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-canvas);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    box-shadow: 0 0 1px rgba(12, 26, 75, 0.32), 0 8px 24px rgba(50, 50, 71, 0.16);
    z-index: 200;
    transition: transform 0.3s ease;
}

.compose-overlay--minimized {
    transform: translateY(calc(100% - 48px));
}

.compose-overlay--minimized .compose-overlay-header {
    cursor: pointer;
}

.compose-overlay-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    background: var(--action-primary-active);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    flex-shrink: 0;
}

.compose-overlay-title {
    flex: 1;
    color: var(--action-on-primary);
}

.compose-overlay-header-actions {
    display: flex;
    align-items: center;
    gap: 0;
}

.compose-overlay-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--action-on-primary);
    cursor: pointer;
    transition: background 0.1s, opacity 0.1s;
    opacity: 0.8;
}

.compose-overlay-header-btn:hover {
    background: rgba(0, 0, 0, 0.15);
    opacity: 1;
}

.compose-overlay-header-btn .material-icons {
    font-size: 18px;
}

.compose-overlay-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* ============================================================
   Discard Draft Modal
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    /* Semi-transparent dark scrim — no semantic token for this */
    background: rgba(31, 41, 51, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card {
    background: var(--bg-canvas);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 300px;
    box-shadow: 0 8px 32px var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-title {
    color: var(--text-primary);
    margin: 0;
}

.modal-body-text {
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.modal-btn {
    padding: 7px 18px;
    border-radius: 999px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.modal-btn--cancel {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

.modal-btn--cancel:hover {
    background: var(--bg-canvas-hover);
}

.modal-btn--confirm {
    background: var(--action-primary-default);
    color: var(--action-on-primary);
    border: 1px solid transparent;
}

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

.modal-btn--outline {
    background: transparent;
    color: var(--action-primary-default);
    border: 1px solid var(--action-primary-default);
}

.modal-btn--outline:hover {
    background: var(--action-primary-surface);
}

/* ============================================================
   Upload Files Modal
   ============================================================ */
.upload-modal {
    background: var(--bg-canvas);
    border-radius: var(--radius-xl);
    width: 620px;
    height: 582px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 1px rgba(12, 26, 75, 0.24), 0 3px 8px rgba(50, 50, 71, 0.05);
}

.upload-modal--compact {
    height: auto;
}

.upload-modal--compact .upload-modal-body {
    flex: none;
}

.upload-modal-header {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 24px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.upload-modal-title {
    flex: 1;
    color: var(--text-primary);
    margin: 0;
}

.upload-modal-body {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.upload-drop-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border: 0.5px dashed var(--text-secondary);
    border-radius: var(--radius-md);
}

.upload-drop-icon {
    font-size: 14px;
    color: var(--text-secondary);
}

.upload-drop-text {
    text-align: center;
    color: var(--text-secondary);
    margin: 0;
}

.upload-drop-link {
    color: var(--action-primary-default);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.upload-drop-hint {
    text-align: center;
    color: var(--text-secondary);
    margin: 0;
}

.upload-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.upload-modal-footer .modal-btn {
    min-width: 88px;
    padding: 8px 24px;
    height: 40px;
}

/* ============================================================
   Scrollbars (WebKit)
   ============================================================ */
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* ============================================================
   No results message
   ============================================================ */
.no-results {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-tertiary);
}

/* ============================================================
   Feed Header Actions (toggle + compose)
   ============================================================ */
.feed-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   Group by Sender Toggle
   ============================================================ */
.toggle-control {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    padding: 0 6px;
}

.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-primary);
    white-space: nowrap;
    transition: color 0.15s;
}

.toggle-control .toggle-pill {
    margin-left: auto;
}

.toggle-pill {
    position: relative;
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: var(--border-default);
    transition: background 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    cursor: pointer;
}

.toggle-pill[aria-checked="true"] {
    background: var(--action-primary-default);
}

.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-canvas);
    box-shadow: 0 1px 3px var(--shadow-md);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.toggle-pill[aria-checked="true"] .toggle-thumb {
    transform: translateX(14px);
}

.toggle-pill:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ============================================================
   Grouped View
   ============================================================ */
.sender-group {
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
}

.sender-group:last-child {
    border-bottom: none;
}

.sender-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    background: transparent;
    width: 100%;
    text-align: left;
    border: none;
    transition: background 0.12s;
    font-family: inherit;
}

.sender-group-header:hover {
    background: var(--status-neutral-surface);
}

.sender-group:not(.collapsed) .sender-group-header {
    background: var(--status-neutral-surface);
}

.sender-group:not(.collapsed) .sender-group-header:hover {
    background: var(--status-neutral-surface-hover);
}

.sender-group-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.sender-group-row {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.sender-group-name {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sender-group-count {
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.sender-group-latest-action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
}

.sender-group-row--secondary .sender-group-latest-action {
    flex: 0 0 auto;
    min-width: auto;
    margin-left: auto;
    justify-content: flex-end;
}

.sender-group-meta--no-action {
    justify-content: center;
    gap: 0;
}

.sender-group-row--no-action {
    align-items: center;
}

.sender-group-no-action-right {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.sender-group-time {
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.waiting-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.waiting-icon {
    font-size: 12px;
    color: var(--text-tertiary);
}

.sender-group-chevron {
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.sender-group.collapsed .sender-group-chevron {
    transform: rotate(-90deg);
}

.sender-group-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

.sender-group.collapsed .sender-group-items {
    display: none;
}

/* Indent grouped items and hide their individual avatars */
.sender-group-items .activity-row {
    padding: 0 0 0 30px;
}

.sender-group-items .activity-row .activity-avatar {
    display: none;
}

.sender-group-items .activity-row .grouped-child-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--status-neutral-surface);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.sender-group-items .activity-row .grouped-child-icon.material-icons {
    font-size: 18px;
}

.sender-group-items .activity-row:has(.activity-flat) .grouped-child-icon {
    align-self: center;
}

/* ============================================================
   Sidebar Toggle Row
   ============================================================ */

.sidebar-toggle-row {
    display: flex;
    align-items: center;
}

.sidebar-toggle-row .toggle-control {
    padding: 0;
    justify-content: space-between;
    width: 100%;
}

.sidebar-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 0 -16px;
}

/* ============================================================
   Thread (Conversation) Grouped View
   ============================================================ */

.thread-group {
    border-bottom: 1px solid var(--border-subtle);
}

.thread-group:last-child {
    border-bottom: none;
}

.thread-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    background: transparent;
    width: 100%;
    text-align: left;
    border: none;
    transition: background 0.12s;
    font-family: inherit;
}

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

.thread-group-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.thread-group-subject {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-group-count {
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

.thread-group-time {
    margin-left: auto;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

.thread-group-chevron {
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-left: 6px;
    transition: transform 0.18s ease;
}

.thread-group.collapsed .thread-group-chevron {
    transform: rotate(-90deg);
}

.thread-group-items {
    padding: 0 0 4px 0;
}

.thread-group.collapsed .thread-group-items {
    display: none;
}

/* Avatars remain visible inside threads (show sender identity) */
.thread-group-items .activity-row {
    padding-left: 24px;
}

/* ============================================================
   Thread count badge (inside card subject row)
   ============================================================ */

.thread-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--bg-inverse-active);
    color: var(--text-inverse);
    flex-shrink: 0;
    line-height: 1;
}

/* ============================================================
   Thread detail view
   ============================================================ */

.detail-content--thread .detail-meta {
    display: none;
}

.detail-content--thread .detail-actions {
    display: none;
}

.detail-content--thread #detailBody {
    padding: 0;
    white-space: normal;
}

.thread-email-block {
    padding: 16px 18px;
}

.thread-email-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.thread-meta-left {
    flex: 1;
}

.thread-email-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 2px;
}

.thread-email-body {
    color: var(--text-primary);
    white-space: pre-wrap;
    margin-top: 14px;
}

.thread-email-sep {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 0;
}

/* ============================================================
   Responsive tweak – narrow screens
   ============================================================ */
@media (max-width: 900px) {
    .detail-pane {
        width: 340px;
    }
}