@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #FFC42D;
    /* The same colour as channels, so every rgba() glow and tint can follow the accent
       instead of staying amber under a blue button. */
    --primary-rgb: 255, 196, 45;
    /* Primary Yellow */
    --primary-light: #FFE082;
    --accent: #FFC42D;
    --secondary: #7D7D7D;
    --success: #5CC57A;
    --risk: #E87272;
    --warning: #FFAD60;
    --bg: #F7F7F7;
    /* Soft Light Grey */
    --sidebar-bg: #000000;
    /* Deep Black */
    --sidebar-active: #FFC42D;
    --card-bg: #ffffff;
    --white: #FFFFFF;
    --border: rgba(0, 0, 0, 0.05);
    --text-main: #1A1A1A;
    --text-muted: #7D7D7D;
    --text-sub: #A0A0A0;
    --sidebar-width: 240px;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #FFC42D, #FFD66B);
}

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

body {
    font-family: 'Plus Jakarta Sans', 'Noto Sans Thai', sans-serif;
    background: var(--bg);
    color: var(--text-main);
    min-height: 100vh;
}

/* ── SIDEBAR ── */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    flex-shrink: 0;
    position: fixed;
    height: 100vh;
    z-index: 1000;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sb-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sb-logo-icon {
    width: 36px;
    height: 36px;
    background: var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-logo-text {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.sb-logo-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.sb-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px 12px;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.nav-item.active {
    background: var(--sidebar-active);
    color: #000;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
}

.nav-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.nav-bottom {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

.nav-item.logout-btn:hover {
    background: var(--risk);
    color: #fff;
}

/* Sub-tabs for Review Email */
.sub-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    background: #fff;
    padding: 8px;
    border-radius: 12px;
    width: fit-content;
    border: 1px solid var(--border);
}

.sub-tab-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.sub-tab-btn.active {
    background: var(--primary);
    color: #fff;
}

.sub-tab-content {
    display: none;
}

.sub-tab-content.active {
    display: block;
}

/* ── MAIN CONTENT ── */
.main {
    margin-left: var(--sidebar-width);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--bg);
    padding: 16px 0;
    border-bottom: 1px solid transparent;
    transition: all 0.3s;
}

.topbar.scrolled {
    background: rgba(247, 247, 247, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
}

.page-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-main);
}

.page-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── TIME FILTER PILL ── */
.time-filter-container {
    position: relative;
}

.time-filter-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--primary);
    color: #000;
    padding: 10px 22px;
    border-radius: 99px;
    border: none;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.time-filter-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.45);
}

.time-filter-pill i:first-child {
    font-size: 16px;
}

.time-filter-pill i:last-child {
    font-size: 12px;
    opacity: 0.7;
}

.filter-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 8px;
    display: none;
    z-index: 1000;
    border: 1px solid rgba(0, 0, 0, 0.05);
    animation: filterSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.filter-option {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-option:hover {
    background: #f7f7f7;
    color: var(--primary);
}

.filter-option.active {
    background: var(--primary);
    color: #000;
}

.filter-option.active::after {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
}

@keyframes filterSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

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

.view-toggle {
    background: #fff;
    border: 1px solid var(--border);
    padding: 4px;
    border-radius: 10px;
    display: flex;
    gap: 4px;
}

.toggle-btn {
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-muted);
    transition: 0.2s;
}

.toggle-btn.active {
    background: var(--primary);
    color: #fff;
}

.peak-chart-box {
    background: linear-gradient(145deg, #111111 0%, #1a1a1a 100%);
    border-radius: 18px;
    padding: 24px;
    height: 200px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.kpi {
    background: var(--card-bg);
    border-radius: 18px;
    padding: 24px;
    border: 1px solid var(--border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Gradient variation for first KPI */
.kpi:first-child {
    background: var(--gradient-primary);
    border: none;
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.2);
}

.kpi:first-child .kpi-label,
.kpi:first-child .kpi-val,
.kpi:first-child .kpi-sub {
    color: #000;
}

.kpi:first-child .kpi-sub.up {
    color: rgba(255, 255, 255, 0.9);
}

.kpi:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(55, 48, 163, 0.08);
}

.kpi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.kpi-val {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
}

.kpi-sub {
    font-size: 11px;
    font-weight: 600;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.up {
    color: var(--success);
}

.dn {
    color: var(--risk);
}

.grid-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

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

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--border);
}

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

.card-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.badge-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--primary);
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

/* ── CONTENT SECTIONS ── */
.content-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ── PAGE LOADING OVERLAY ── */
#page-loader {
    position: fixed;
    inset: 0;
    background: rgba(247, 247, 247, 0.95);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(var(--primary-rgb), 0.25);
    border-top-color: var(--primary);
    animation: loaderSpin 0.7s linear infinite;
}

.page-loader-logo {
    width: 36px;
    height: 36px;
    background: var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
    animation: loaderPulse 1.2s ease-in-out infinite;
}

.page-loader-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.page-loader-sub {
    font-size: 11px;
    color: var(--text-sub);
    font-weight: 500;
}

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

@keyframes loaderPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35); }
    50% { transform: scale(1.07); box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.5); }
}

/* ── AI CARD SKELETON SHIMMER ── */
.ai-skeleton {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 2px 0;
}

.ai-skeleton-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 4px;
}

.ai-skeleton-label-dot {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

.ai-skeleton-line {
    height: 9px;
    border-radius: 5px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

.ai-skeleton-line.short { width: 52%; }
.ai-skeleton-line.medium { width: 76%; }
.ai-skeleton-line.long { width: 100%; }

/* Dark variant (for yellow/coloured cards) */
.ai-skeleton-dark .ai-skeleton-line,
.ai-skeleton-dark .ai-skeleton-label-dot {
    background: linear-gradient(90deg, rgba(0,0,0,0.1) 25%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.1) 75%);
    background-size: 200% 100%;
    animation: shimmerDark 1.4s ease-in-out infinite;
}

.ai-skeleton-dark .ai-skeleton-label {
    color: rgba(0,0,0,0.45);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes shimmerDark {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

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

/* ── PAGE CONTENT FADE-IN ON READY ── */
.content-ready {
    animation: fadeIn 0.4s ease both;
}

/* ── CUSTOM COMPONENTS ── */
.brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f0ff;
}

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

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

.brand-info {
    flex: 1;
}

.brand-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.brand-meta {
    font-size: 11px;
    color: var(--text-sub);
    font-weight: 500;
    margin-top: 2px;
}

.brand-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    text-align: right;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.faq-rank {
    font-size: 11px;
    color: #c4c2dd;
    font-weight: 700;
    min-width: 20px;
    text-align: right;
}

.faq-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
}

.faq-track {
    flex: 0 0 150px;
    height: 6px;
    background: #ede9fe;
    border-radius: 4px;
    overflow: hidden;
}

.faq-fill {
    height: 100%;
    border-radius: 4px;
}

.faq-n {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 45px;
    text-align: right;
}

.risk-item {
    padding: 14px;
    border-radius: 12px;
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.risk-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.risk-content {
    flex: 1;
}

.risk-t {
    font-size: 13px;
    font-weight: 700;
}

.risk-d {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

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

.sentiment-box {
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
}

.sent-val {
    font-size: 18px;
    font-weight: 800;
    display: block;
    margin-bottom: 4px;
}

.sent-lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-sub);
    text-transform: uppercase;
}

.data-table-wrapper {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.data-table th {
    text-align: left;
    font-size: 11px;
    color: var(--text-sub);
    text-transform: uppercase;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 12px;
    font-size: 13px;
    border-bottom: 1px solid rgba(237, 233, 254, 0.5);
}

/* ── MOBILE MENU TOGGLE ── */
.menu-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1100;
    margin-right: 16px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30, 27, 75, 0.4);
    backdrop-filter: blur(4px);
    z-index: 999;
}

/* ── RESPONSIVE MEDIA QUERIES ── */
@media (max-width: 1400px) {
    .grid-main {
        grid-template-columns: 1fr;
    }

    /* Collapse span-2 cards when grid-main is single-column */
    .grid-main .card[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }
}

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

    .grid-main {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-main .card[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }

    /* Collapse all grid-column spans inside .grid-3 when it's 1 column */
    .grid-3 > [style*="grid-column"] {
        grid-column: span 1 !important;
    }
}

@media (max-width: 1024px) {
    .filter-dropdown {
        width: 280px;
    }

    /* Peak stats — collapse 4 cols to 2 at tablet widths */
    .peak-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Prevent canvases from overflowing narrow columns */
    canvas {
        max-width: 100% !important;
    }
}

@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
        width: 240px;
    }

    .sidebar-overlay.open {
        display: block;
    }

    .main {
        margin-left: 0;
        padding: 20px;
    }

    .menu-toggle {
        display: flex;
    }

    .topbar {
        gap: 16px;
        z-index: 1;
    }
}

/* Profile row — full-width only on small phones where it wraps */
@media (max-width: 600px) {
    .user-profile-container {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    .user-profile-btn {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .kpi-row {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Prevent grid items from escaping their cell (min-width: auto default) */
    .grid-3 > .card {
        min-width: 0;
    }

    /* Re-collapse all grid spans to 1 — overrides the 1024px span-2 rule */
    .grid-3 > [style*="grid-column"] {
        grid-column: span 1 !important;
    }

    /* Segment grid (chat page) — stack vertically on mobile */
    .segment-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .topbar-right {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px;
        width: 100%;
        position: relative;
    }
    /* Date filter — left column, row 1 */
    .time-filter-container {
        grid-column: 1;
        grid-row: 1;
    }
    /* Mail icon — right column, row 1 */
    .notification-container {
        grid-column: 2;
        grid-row: 1;
    }
    /* Profile widget — full width row 2, right-aligned so AD badge sits under mail icon */
    .user-profile-container {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: end;
    }

    /* Reset containing block so dropdown positions relative to topbar-right */
    .notification-container,
    .notification-container > div {
        position: static !important;
    }

    .view-toggle {
        order: 2;
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }

    .page-title {
        font-size: 20px;
    }

    body {
        overflow-x: hidden;
    }

    .card {
        padding: 16px;
    }

    /* Card header — wrap badge to next line instead of overflowing */
    .card-hdr {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Chart canvases — never wider than their container */
    canvas {
        max-width: 100% !important;
    }

    /* Faq rows — shrink bar to fit narrow cards; !important beats the later
       global .faq-track { width: 60px; flex-shrink: 0 } definition */
    .faq-track {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        width: auto !important;
    }

    /* Faq name — allow shrink when numbers are large */
    .faq-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* FAQ deep dive — stack to single column on mobile */
    .faq-deep-grid {
        grid-template-columns: 1fr !important;
    }

    /* FAQ deep dive filter buttons — flex-wrap with gap so rows don't touch */
    .time-filter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .kpi-val {
        font-size: 24px;
    }

    /* Hide user info text on mobile — save space in topbar */
    .topbar-user-info {
        display: none;
    }

    /* Filter dropdown — prevent overflow on small screens */
    .filter-dropdown {
        width: calc(100vw - 32px);
        right: auto;
        left: 0;
    }

    /* Notification dropdown — anchor to topbar-right right edge */
    .notif-dropdown {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        width: calc(100vw - 40px) !important;
    }

    /* Reduce chart heights on mobile */
    canvas {
        max-height: 300px;
    }



    /* User dropdown — anchor to right edge, constrained to screen width */
    .user-dropdown-menu {
        right: 0 !important;
        left: auto !important;
        width: calc(100vw - 32px) !important;
        max-width: 280px !important;
    }

    /* Time filter pill text — shorten on mobile */
    .time-filter-pill {
        padding: 8px 14px;
        font-size: 12px;
    }

    /* Peak activity stats — 2 columns on mobile */
    .peak-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Peak chart — reduce side padding to give chart more room */
    .peak-chart-box {
        padding: 12px;
        overflow: hidden;
    }


    /* Peak card footer — stack on mobile */
    .peak-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ── PEAK ACTIVITY STATS GRID ── */
.peak-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ── NOTIFICATION / MESSAGE DROPDOWN ── */
.notif-dropdown {
    width: 360px;
}

/* ── DASHBOARD COMPONENTS ── */
.brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

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

.brand-info {
    flex: 1;
}

.brand-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.brand-meta {
    font-size: 11px;
    color: var(--text-sub);
}

.brand-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
}

.peak-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-light);
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
}

/* ── PRODUCT TREND ENHANCEMENTS ── */
.trend-container {
    display: flex;
    gap: 20px;
    height: 300px;
}

.ai-summary-box {
    flex: 0 0 240px;
    padding: 15px;
    background: var(--bg);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-sub);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    border: 1px solid var(--border);
}

.ai-summary-box strong {
    color: var(--primary);
    font-size: 14px;
}

.ai-summary-text {
    font-style: italic;
    color: var(--text-main);
}

.trend-graph-wrapper {
    flex: 1;
    position: relative;
    min-width: 0;
    /* Fixes chart resizing issue in flex */
}

.brand-row.interactive {
    cursor: pointer;
    border: 1px solid transparent;
    padding: 8px 12px;
    margin: 0 -12px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.brand-row.interactive:hover {
    background: var(--primary-light);
}

.brand-row.active {
    background: var(--primary-light);
    border-color: var(--primary);
}

/* ── TIME FILTER BUTTON ── */
.time-filter-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--primary);
    color: #000;
    border-radius: 99px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
}

.time-filter-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(var(--primary-rgb), 0.3);
}

.time-filter-pill i:first-child {
    font-size: 16px;
}

.time-filter-pill i:last-child {
    font-size: 12px;
    opacity: 0.7;
    transition: all 0.2s ease;
}


.filter-option:hover {
    background: var(--bg);
    color: var(--primary);
}

.filter-option.active {
    background: var(--primary-light);
    color: #000;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}

.custom-range-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.date-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-field label {
    font-size: 11px;
    color: var(--text-muted);
}

.date-field input {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-size: 13px;
    color: var(--text-main);
    width: 100%;
    font-family: inherit;
}

.apply-btn {
    margin-top: 16px;
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s ease;
}

.apply-btn:hover {
    opacity: 0.9;
}

/* ── RANKED LIST COMPONENTS ── */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.faq-rank {
    width: 20px;
    height: 20px;
    background: var(--bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-sub);
    flex-shrink: 0;
}

.faq-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.faq-track {
    width: 60px;
    height: 6px;
    background: var(--bg);
    border-radius: 99px;
    overflow: hidden;
    flex-shrink: 0;
}

.faq-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--primary);
}

.faq-n {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sub);
    min-width: 40px;
    text-align: right;
}

/* ── LOGIN PAGE ── */
.login-body {
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    font-family: 'Plus Jakarta Sans', 'Noto Sans Thai', sans-serif;
}

.login-container {
    width: 100%;
    max-width: 440px;
    animation: fadeIn 0.8s ease;
}

.login-card {
    background: #fff;
    border-radius: 32px;
    padding: 48px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    text-align: center;
}

.login-logo {
    width: 64px;
    height: 64px;
    background: var(--primary);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: #fff;
    font-size: 28px;
}

.login-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 8px;
}

.login-sub {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 40px;
    font-weight: 500;
}

.form-group {
    text-align: left;
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 14px 18px;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.2s;
    color: var(--text-main);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(33, 33, 43, 0.05);
}

.password-wrapper {
    position: relative;
    display: block;
}

.password-wrapper .form-input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-sub);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 10;
}

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


.login-btn {
    width: 100%;
    padding: 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    margin-top: 12px;
}

.login-btn:hover {
    background: #2d2d3a;
    transform: translateY(-2px);
}

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

.login-footer {
    margin-top: 32px;
    font-size: 13px;
    color: var(--text-sub);
}

.login-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* ── AUTH UI ── */
.error-msg {
    background: #fef2f2;
    color: #b91c1c;
    padding: 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    display: none;
    border: 1px solid rgba(185, 28, 28, 0.1);
    animation: shake 0.4s ease;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* ── TOOLTIP FOR "OTHER" ── */
.tooltip-container {
    position: relative;
    cursor: help;
}

.tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: var(--primary);
    color: #fff;
    text-align: left;
    border-radius: 8px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 11px;
    line-height: 1.4;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--primary) transparent transparent transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ── MODAL SYSTEM ── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.open {
    display: flex;
    opacity: 1;
}

.modal-card {
    background: #fff;
    width: 100%;
    max-width: 600px;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.open .modal-card {
    transform: scale(1);
}

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

.modal-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main);
}

.modal-body {
    margin-bottom: 24px;
}

.modal-textarea {
    width: 100%;
    height: 200px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-main);
    resize: none;
    transition: all 0.2s;
}

.modal-textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(33, 33, 43, 0.05);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-save {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save:hover {
    background: #2d2d3a;
}

.btn-cancel {
    background: #eee;
    color: var(--text-muted);
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background: #e2e2e2;
}

/* ── FAQ DEEP DIVE ── */
.faq-deep-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.faq-deep-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.faq-deep-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.faq-deep-hdr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.faq-deep-q {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.4;
    flex: 1;
}

.faq-deep-count {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    font-family: var(--font-mono);
}

.faq-deep-meta {
    font-size: 12px;
    color: var(--text-sub);
    font-weight: 600;
}

.faq-deep-track {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}

.faq-deep-fill {
    height: 100%;
    border-radius: 2px;
}

.faq-ex-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-ex-item {
    font-size: 12px;
    color: var(--text-main);
    padding: 8px 12px;
    background: #f8fafc;
    border-left: 3px solid #e2e8f0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

.faq-deep-sugg {
    font-size: 13px;
    font-weight: 500;
    color: #92400e;
    /* Darker amber for readability on yellow */
    padding: 14px 16px;
    background: #fffbeb;
    /* Soft light yellow background */
    border: 1px solid #fef3c7;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.5;
}

.faq-deep-sugg-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #d97706;
    /* Stronger amber for header */
}

.faq-deep-sugg i {
    color: #d97706;
    font-size: 14px;
}

/* --- CHAT ROOM TYPE STYLES --- */
.room-split {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
}

.room-num {
    text-align: center;
}

.room-num .n {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.room-num .l {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    font-weight: 700;
    text-transform: uppercase;
}

.sat-bar {
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    background: var(--border);
}

.sat-seg {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-subtitle {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-subtitle::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.dur-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.2s;
}

.dur-bar-row:hover {
    background: rgba(0, 0, 0, 0.02);
}

.dur-bar-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
    width: 65px;
    flex-shrink: 0;
    text-align: right;
}

.dur-bar-track {
    flex: 1;
    background: var(--border);
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
    position: relative;
}

.dur-bar-fill {
    height: 100%;
    border-radius: 6px;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 1.2s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.dur-bar-val {
    font-size: 12px;
    font-weight: 800;
    width: 75px;
}

.insight-pill {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.insight-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: var(--primary);
}

.insight-pill-val {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 4px;
}

.insight-pill-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 700;
}

.class-guide-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 8px;
    background: #f8fafc;
    border-left: 4px solid;
    transition: transform 0.2s;
}

.class-guide-item:hover {
    transform: translateX(4px);
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.class-guide-icon {
    font-size: 18px;
}

.class-guide-title {
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 2px;
}

.class-guide-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── TOP FILTER BUTTONS ── */
.tf-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #f8fafc;
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.tf-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--text-main);
}

.tf-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(55, 48, 163, 0.15);
}

/* ── DARK THEME CARDS ── */
.card-dark {
    background: #0a0c10 !important;
    border: 1px solid #1e293b !important;
    padding: 32px !important;
}

.card-dark .tf-btn {
    background: #1a1f26;
    border-color: #2d3748;
    color: #94a3b8;
}

.card-dark .tf-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #000;
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4);
}

.card-dark .faq-deep-item {
    background: #fffbeb;
    /* Soft light yellow */
    border: 1px solid #fde68a;
    border-top: 4px solid transparent;
    /* Set dynamically */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.card-dark .faq-deep-q {
    color: #1e293b;
    /* Dark text for light card */
    font-size: 17px;
    font-weight: 800;
}

.card-dark .faq-deep-count {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.card-dark .faq-deep-meta {
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    font-weight: 700;
}

.card-dark .faq-ex-item {
    background: rgba(0, 0, 0, 0.03);
    color: #334155;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 3px solid rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

.card-dark .faq-deep-sugg {
    background: #fefce8;
    border: 1px solid #fef08a;
    color: #854d0e;
}

.card-dark .faq-deep-sugg-hdr {
    color: #f59e0b;
}

/* --- SHARED SEGMENTATION LAYOUT --- */
.segment-grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 40px;
    align-items: start;
}

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

.takeaway-box {
    background: var(--bg);
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid var(--primary);
}

/* ── Keywords & Intents Module ── */
.kw-grid {
    display: grid;
    grid-template-columns: 6.5fr 3.5fr;
    gap: 32px;
    margin-top: 10px;
}

.kw-category {
    margin-bottom: 24px;
}

.kw-category h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.kw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kw-tag {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: all 0.2s;
}

.kw-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.kw-tag.product {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.kw-tag.commercial {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.kw-tag.urgent {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.recommend-box {
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding: 16px;
    border-radius: 8px;
    margin-top: 20px;
}

.recommend-box h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 6px;
}

.recommend-box p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #475569;
}

@media (max-width: 1024px) {
    .kw-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Sidebar Collapsed Mode ── */
.sidebar.collapsed {
    width: 80px;
}

.sidebar.collapsed .sb-logo-text,
.sidebar.collapsed .sb-logo-sub,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-bottom .nav-item span {
    display: none;
}

.sidebar.collapsed .sb-logo {
    padding: 20px 0;
    justify-content: center;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 12px 10px;
    height: 48px;
}

.sidebar.collapsed .nav-item i {
    margin: 0;
    font-size: 18px;
}

.main.collapsed {
    margin-left: 80px;
}

@media (max-width: 992px) {
    .main.collapsed {
        margin-left: 0;
    }
}

/* ── SEND TOAST NOTIFICATION ── */
.send-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-left: 4px solid var(--success);
    min-width: 300px;
    max-width: 420px;
    transform: translateX(130%);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.send-toast.show {
    transform: translateX(0);
}

.send-toast-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f0fdf4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    color: var(--success);
}

.send-toast-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
}

.send-toast-detail {
    font-size: 11px;
    color: var(--text-sub);
    margin-top: 3px;
    line-height: 1.4;
}

.send-toast-close {
    color: var(--text-sub);
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 14px;
    padding: 4px;
    transition: color 0.2s;
}

.send-toast-close:hover {
    color: var(--text-main);
}

/* ── HISTORY FILTERS ── */
.history-filters {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--bg);
    border-radius: 14px;
    border: 1px solid var(--border);
}

.history-filter-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-sub);
}

.history-filter-select {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    min-width: 180px;
}

.history-filter-select:focus {
    border-color: var(--primary);
}

/* ── CONFIDENCE REASON TEXT ── */
.conf-reason {
    font-size: 10px;
    color: var(--text-sub);
    margin-top: 4px;
    line-height: 1.4;
    font-weight: 500;
    max-width: 110px;
    text-align: center;
}

/* ── SIDEBAR ACTIVE USERS WIDGET ── */
.sb-active-users {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(92, 197, 122, 0.12);
    border: 1px solid rgba(92, 197, 122, 0.25);
    margin-bottom: 8px;
    cursor: default;
}

.sb-au-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(92, 197, 122, 0.25);
    animation: pulse-green 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse-green {

    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(92, 197, 122, 0.25);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(92, 197, 122, 0.08);
    }
}

.sb-au-count {
    font-size: 16px;
    font-weight: 800;
    color: var(--success);
    line-height: 1;
}

.sb-au-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.sidebar.collapsed .sb-active-users {
    justify-content: center;
    padding: 10px;
}

.sidebar.collapsed .sb-au-info {
    display: none;
}

/* ── ORIGINAL MAIL VIEW BUTTON ── */
.btn-view-mail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    font-family: inherit;
}

.btn-view-mail:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

/* ── TOPIC TAGS (inline in table) ── */
.topic-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    border: 1.5px solid transparent;
}

.topic-tag.order {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
    border-color: rgba(16, 185, 129, 0.2);
}

.topic-tag.delivery {
    background: rgba(59, 130, 246, 0.1);
    color: #1e40af;
    border-color: rgba(59, 130, 246, 0.2);
}

.topic-tag.pricing {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.2);
}

.topic-tag.product {
    background: rgba(139, 92, 246, 0.1);
    color: #4c1d95;
    border-color: rgba(139, 92, 246, 0.2);
}

.topic-tag.urgent {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
    border-color: rgba(239, 68, 68, 0.2);
}

/* ── ORIGINAL MAIL MODAL ── */
.mail-meta-grid {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 6px 12px;
    font-size: 13px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.mail-meta-label {
    color: var(--text-sub);
    font-weight: 700;
    align-self: center;
}

.mail-body-box {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-line;
    color: var(--text-main);
    min-height: 120px;
}

/* ── Refined Keywords UI ── */
.kw-tag {
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid transparent;
}

.kw-tag.product {
    background: rgba(67, 56, 202, 0.08);
    color: #4338ca;
    border-color: rgba(67, 56, 202, 0.15);
}

.kw-tag.commercial {
    background: rgba(21, 128, 61, 0.08);
    color: #15803d;
    border-color: rgba(21, 128, 61, 0.15);
}

.kw-tag.urgent {
    background: rgba(185, 28, 28, 0.08);
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.15);
}

.kw-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background: white;
}

.recommend-box {
    background: #fdfdff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #3b82f6;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.recommend-box h4 {
    color: #1e3a8a;
    font-size: 14px;
    margin-bottom: 8px;
}

.recommend-box p {
    color: #475569;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 500;
}

/* ── AI PREMIUM INSIGHT BOX (IMAGE STYLE) ── */
.ai-intelligence-box {
    background: #facc15 !important;
    border-radius: 18px !important;
    padding: 16px 20px !important;
    /* Reduced padding */
    position: relative;
    overflow: hidden;
    color: #000 !important;
    box-shadow: 0 10px 30px rgba(250, 204, 21, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Top align */
    gap: 8px;
    /* Tighten internal spacing */
}

.ai-intelligence-box::after {
    content: '\f5dc';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: -10px;
    /* Moved down */
    right: -10px;
    font-size: 80px;
    /* Smaller watermark */
    color: rgba(0, 0, 0, 0.05);
    pointer-events: none;
    transform: rotate(-10deg);
}

.ai-header-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2px;
    opacity: 0.8;
}

.ai-quote-text {
    font-size: 13px;
    /* Slightly smaller */
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
}

.ai-footer-label {
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-top: auto;
    /* Push to bottom if space allows */
}

.ai-footer-label i {
    font-size: 10px;
}

/* ── DASHBOARD PREMIUM REFINEMENT ── */
.grid-main {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
}

.card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.card-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bg);
}

.card-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title i {
    color: var(--primary);
    font-size: 16px;
}

/* ── RISK ITEMS REFINEMENT ── */
.risk-item {
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    gap: 16px;
    border: 1px solid transparent;
    transition: 0.2s;
}

.risk-item:hover {
    filter: brightness(0.98);
    transform: scale(1.01);
}

.risk-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* ── PREMIUM TABLE ── */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.data-table th {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px;
    font-weight: 700;
    text-align: left;
}

.data-table td {
    padding: 12px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.data-table tr td:first-child {
    border-left: 1px solid #f1f5f9;
    border-radius: 10px 0 0 10px;
}

.data-table tr td:last-child {
    border-right: 1px solid #f1f5f9;
    border-radius: 0 10px 10px 0;
}

/* ── LIVE INTELLIGENCE BOX REFINEMENT ── */
.insight-box {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

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

/* ── USER PROFILE DROPDOWN ── */
.user-profile-container {
    position: relative;
    display: inline-block;
}

.user-profile-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: right;
    padding: 6px 12px;
    border-radius: 12px;
    transition: background 0.2s;
    font-family: inherit;
}

.user-profile-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 8px;
    display: none;
    z-index: 1000;
    border: 1px solid var(--border);
    animation: filterSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.user-dropdown-header {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.user-dropdown-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

.user-dropdown-email {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-item {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.2s;
    text-decoration: none;
}

.user-dropdown-item:hover {
    background: #f7f7f7;
    color: var(--primary);
}

.user-dropdown-item.logout {
    color: var(--risk);
}

.user-dropdown-item.logout:hover {
    background: #ffeeee;
}

/* ── SHARED EMPTY STATE ── */
.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-sub);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    box-sizing: border-box;
    animation: fadeIn 0.3s ease;
}

.empty-state-icon {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.35;
    color: var(--text-muted);
}

.empty-state-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}

.empty-state-sub {
    font-size: 11px;
    color: var(--text-sub);
    line-height: 1.4;
    max-width: 240px;
    margin: 0 auto;
}

/* ── SCROLLABLE TABLES & MATRIX STYLING ── */
.scrollable-card-body {
    max-height: 380px;
    overflow-y: auto;
}

.permissions-matrix-table th {
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 10;
}

.role-checkbox-group {
    display: none;
}

.role-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 38px;
    background: #f8fafc;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.role-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef9c3;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.role-tag-remove {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.6;
    margin-left: 2px;
}

.role-tag-remove:hover {
    opacity: 1;
}

.role-tag-add {
    font-size: 12px;
    padding: 2px 10px;
    border: 1.5px dashed #fde68a;
    border-radius: 20px;
    background: transparent;
    color: #92400e;
    cursor: pointer;
    font-weight: 600;
}

.role-tag-add:focus {
    outline: none;
    border-style: solid;
}

/* ── PRIMARY CARD EMPTY STATE OVERRIDES ── */
.card[style*="var(--primary)"] .empty-state-icon,
.card[style*="background: var(--primary)"] .empty-state-icon,
#chat-live-intelligence-card .empty-state-icon,
#email-ai-intelligence-card .empty-state-icon {
    color: rgba(0, 0, 0, 0.45) !important;
}

.card[style*="var(--primary)"] .empty-state-title,
.card[style*="background: var(--primary)"] .empty-state-title,
#chat-live-intelligence-card .empty-state-title,
#email-ai-intelligence-card .empty-state-title {
    color: #000000 !important;
}

.card[style*="var(--primary)"] .empty-state-sub,
.card[style*="background: var(--primary)"] .empty-state-sub,
#chat-live-intelligence-card .empty-state-sub,
#email-ai-intelligence-card .empty-state-sub {
    color: rgba(0, 0, 0, 0.65) !important;
}

/* ── AI INSIGHT SCROLLABLE CONTAINER ── */
.ai-insight-scrollable-container {
    padding-right: 0px;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}
.ai-insight-scrollable-container::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
}

/* ── LANGUAGE TOGGLE PILL ── */
.lang-toggle {
    display: flex;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    align-items: center;
    /* One height for every control in this row, so the organization picker, the language
       switch and the profile button read as boxes of the same size (2026-09-29). */
    height: var(--topbar-control-h, 42px);
    box-sizing: border-box;
}

.lang-btn {
    padding: 6px 12px;
    border-radius: 99px;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    color: var(--text-muted);
    transition: 0.2s;
}

.lang-btn.active {
    background: var(--primary);
    color: #000;
}

/* ── THEMED CUSTOM TOOLTIP ── */
.theme-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 99999;
    background: #1A1A1A;
    color: #FFFFFF;
    border: 1px solid rgba(var(--primary-rgb), 0.45);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 280px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 0 12px rgba(var(--primary-rgb), 0.15);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1), transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Plus Jakarta Sans', 'Noto Sans Thai', sans-serif;
    font-weight: 500;
}

.theme-tooltip.visible {
    opacity: 1;
    transform: scale(1);
}

/* ── TASK-027: Semantic Email Presentation ── */
.mail-main-text { 
    color: var(--text-main); 
    font-size: 14px; 
    line-height: 1.6; 
}
.mail-forward-meta { 
    color: var(--text-sub); 
    font-size: 12px; 
    background: #f8fafc; 
    border-left: 3px solid #cbd5e1; 
    padding: 8px 12px; 
    margin: 12px 0; 
    border-radius: 4px; 
}
.mail-quoted-text { 
    color: #64748b; 
    border-left: 3px solid #e2e8f0; 
    padding-left: 12px; 
    margin: 12px 0; 
}
.mail-signature { 
    color: var(--text-sub); 
    font-size: 13px; 
    margin-top: 20px; 
    border-top: 1px dashed #e2e8f0; 
    padding-top: 10px; 
}


/* ── Documents page ───────────────────────────────────────────────────────── */
.doc-org-chip{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border);
  border-radius:999px;background:#fff;font-size:12px;color:var(--text-sub);font-weight:700}
.doc-org-chip strong{color:var(--text-main)}
.doc-drop{margin-top:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-height:190px;border:2px dashed #cbd5e1;border-radius:18px;padding:36px 24px;text-align:center;
  cursor:pointer;transition:border-color .2s, background .2s, transform .1s;background:#fbfcfe}
.doc-drop:hover,.doc-drop:focus-visible,.doc-drop-over{border-color:var(--primary);background:#fffdf3;outline:none}
.doc-drop-over{transform:scale(1.004)}
.doc-drop-icon{font-size:40px;line-height:1;color:var(--text-sub);display:block;transition:color .2s}
.doc-drop:hover .doc-drop-icon,.doc-drop-over .doc-drop-icon{color:var(--primary)}
.doc-drop-title{font-size:17px;font-weight:800;color:var(--text-main);letter-spacing:-.01em}
.doc-drop-sub{font-size:13px;color:var(--text-sub);font-weight:600}
.doc-queue{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.doc-queue-row{display:grid;grid-template-columns:1fr auto 120px 32px;align-items:center;gap:12px;
  padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:#fff}
.doc-queue-row-bad{border-color:#fecaca;background:#fef2f2}
.doc-queue-name{font-size:13px;font-weight:700;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-queue-meta{font-size:11px;color:var(--text-sub);font-weight:700;white-space:nowrap}
.doc-queue-bar{height:6px;border-radius:999px;background:#eef2f7;overflow:hidden}
.doc-queue-bar span{display:block;height:100%;background:var(--primary);transition:width .2s}
.doc-actions{margin-top:16px;display:flex;justify-content:flex-end;gap:10px}
.doc-banner{margin-top:16px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;
  font-size:13px;font-weight:700}
.doc-banner-ok{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.doc-banner-warn{background:#fffbeb;color:#b45309;border:1px solid #fde68a}
.doc-banner-err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.doc-icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:#fff;
  color:var(--text-sub);cursor:pointer;transition:.2s;margin-left:6px}
.doc-icon-btn:hover{color:var(--text-main);border-color:var(--primary)}
.doc-icon-danger:hover{color:#b91c1c;border-color:#fecaca;background:#fef2f2}
.doc-file-icon{color:var(--text-sub);margin-right:8px}
.doc-status{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px}
.doc-status-ok{background:#ecfdf5;color:#047857}
.doc-status-wait{background:#f1f5f9;color:#475569}
.doc-danger{background:#dc2626 !important;color:#fff !important}
@media (max-width:640px){.doc-queue-row{grid-template-columns:1fr auto 32px}.doc-queue-bar{display:none}}

/* ── Accent themes ─────────────────────────────────────────────────────────
   Each theme only redefines the accent tokens; every component keeps reading
   var(--primary) as before. Lightness is kept close to the original amber so
   the black text already painted on primary-coloured buttons stays readable. */
:root[data-accent="blue"]{--primary:#5EAEFF;--primary-light:#BBDDFF;--accent:#5EAEFF;
  --sidebar-active:#5EAEFF;--gradient-primary:linear-gradient(135deg,#5EAEFF,#8CC8FF);--primary-rgb:94,174,255}
:root[data-accent="green"]{--primary:#5FD08A;--primary-light:#BFEBD0;--accent:#5FD08A;
  --sidebar-active:#5FD08A;--gradient-primary:linear-gradient(135deg,#5FD08A,#8FE0AC);--primary-rgb:95,208,138}
:root[data-accent="violet"]{--primary:#B49CFF;--primary-light:#DCD2FF;--accent:#B49CFF;
  --sidebar-active:#B49CFF;--gradient-primary:linear-gradient(135deg,#B49CFF,#CDBEFF);--primary-rgb:180,156,255}
:root[data-accent="rose"]{--primary:#FF8FA3;--primary-light:#FFC9D3;--accent:#FF8FA3;
  --sidebar-active:#FF8FA3;--gradient-primary:linear-gradient(135deg,#FF8FA3,#FFB0BE);--primary-rgb:255,143,163}
:root[data-accent="teal"]{--primary:#4ECDC4;--primary-light:#B5EDE9;--accent:#4ECDC4;
  --sidebar-active:#4ECDC4;--gradient-primary:linear-gradient(135deg,#4ECDC4,#7FDDD6);--primary-rgb:78,205,196}

/* the picker itself */
/* The theme picker lives inside the profile dropdown (2026-09-29). It was a button of its own
   beside the language switch, per person; the colour is the ORGANIZATION's now, so it sits
   with the account and the top bar is one control shorter. */
/* The theme picker is a menu ROW like Account Settings, not a panel that is always open.
   Clicking it reveals the colours; clicking a colour applies it and closes the menu, so the
   result is visible immediately instead of behind an open dropdown. */
.user-dropdown-accent{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .22s ease, opacity .18s ease, padding .22s ease;padding:0 16px}
.user-dropdown-accent.open{max-height:120px;opacity:1;padding:4px 16px 14px}
.user-dropdown-accent-note{margin:0 0 10px;font-size:11px;color:var(--text-sub);line-height:1.45}
.user-dropdown-item .accent-row-dot{width:14px;height:14px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 0 1px var(--border);margin-left:auto}
.user-dropdown-item .accent-row-chevron{font-size:10px;opacity:.5;transition:transform .2s}
.user-dropdown-item.open .accent-row-chevron{transform:rotate(180deg)}
.accent-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.accent-swatch{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;
  transition:transform .15s, border-color .15s;position:relative;padding:0}
.accent-swatch:hover{transform:scale(1.12)}
.accent-swatch.active{border-color:var(--text-main)}
.accent-swatch.active::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:10px;color:#000;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

/* the two injected controls (TH/EN + accent) travel together as one cell */
.topbar-controls{display:flex;align-items:center;gap:10px}
/* Staff organization picker — the white pill + dropdown next to the amber date filter.
   Deliberately NOT the .filter-option class it copies the look of: every dashboard page's
   applyFilter() sweeps document.querySelectorAll('.filter-option') and toggles .active by
   comparing English label text, so sharing the class would strip the highlight off the chosen
   organization the moment someone picked a date range. */
.org-picker{position:relative;display:flex;align-items:center}
.org-picker-pill{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;background:#fff;
  border:1px solid var(--border);border-radius:99px;box-shadow:0 2px 8px rgba(0,0,0,.02);
  font:inherit;font-size:13px;font-weight:700;color:var(--text-main,#1f2937);cursor:pointer;
  white-space:nowrap;transition:all .3s cubic-bezier(.4,0,.2,1)}
.org-picker-pill:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.org-picker-pill .fa-eye{font-size:15px;color:var(--primary)}
.org-picker-pill .fa-chevron-down{font-size:11px;opacity:.55;transition:transform .2s}
.org-picker.open .org-picker-pill{border-color:var(--primary)}
.org-picker.open .org-picker-pill .fa-chevron-down{transform:rotate(180deg)}
.org-picker-current{max-width:150px;overflow:hidden;text-overflow:ellipsis}

.org-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:220px;background:#fff;border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.05);padding:8px;display:none;z-index:1000;
  animation:filterSlideDown .3s cubic-bezier(.4,0,.2,1)}
.org-picker.open .org-menu{display:block}
.org-menu-head{padding:12px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:800;
  color:var(--text-sub);text-transform:uppercase;letter-spacing:.05em}
.org-menu-note{padding:10px 16px 4px;font-size:11px;color:var(--text-sub);line-height:1.5}
.org-option{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  border-radius:10px;font-size:13px;font-weight:600;color:var(--text-main);cursor:pointer;transition:.2s}
.org-option:hover{background:#f7f7f7;color:var(--primary)}
.org-option.active{background:var(--primary);color:#000}
.org-option.active::after{content:'';width:6px;height:6px;background:#000;border-radius:50%;opacity:.35}
.org-option-restricted{color:var(--text-sub)}
.org-option-restricted:hover{background:#f7f7f7;color:var(--text-sub)}
/* The Portal's verdict on an organization, shown rather than hidden: a locked organization
   can still be VIEWED by staff, and hiding the row would read as "does not exist". */
.org-option-tag{margin-left:auto;padding:2px 8px;border-radius:99px;background:#f1f3f5;
  border:1px solid var(--border);font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-sub);white-space:nowrap}
@media (max-width:480px){.org-menu{right:auto;left:0}.org-picker-current{max-width:96px}}

@media (max-width: 768px){
  /* row 1: date filter | bell+mail   row 2: language+colour | profile */
  .topbar-controls{grid-column:1;grid-row:2;justify-self:start}
  .user-profile-container{grid-column:2;grid-row:2;justify-self:end}
  .lang-toggle{width:max-content;flex:0 0 auto}
  .lang-btn{padding:6px 10px}
  .org-picker-pill{height:38px;padding:0 12px}
}
@media (max-width: 480px){
  .topbar-controls{gap:8px}
  .doc-drop{min-height:150px;padding:24px 16px}
  .doc-drop-icon{font-size:32px}
  .doc-drop-title{font-size:15px}
  .doc-org-chip{padding:6px 10px;font-size:11px}
}

/* `hidden` must actually hide. `.empty-state` sets display:flex, which beats the browser's
   default [hidden] { display:none } — so an empty-state marked hidden stayed on screen under a
   table full of rows. Same trap for any element the Documents page toggles. */
#doc-empty[hidden],
#doc-table-wrapper[hidden],
#doc-upload-card[hidden],
#doc-readonly-note[hidden],
#doc-queue[hidden],
#doc-actions[hidden],
#doc-banner[hidden] { display: none !important; }

/* The shared height for the top-bar row. Every control opts in through this token, so the row
   stays aligned when one of them changes. */
:root{--topbar-control-h:42px;--topbar-inner:32px}
@media (max-width:768px){:root{--topbar-control-h:38px;--topbar-inner:28px}}
.org-picker-pill,
.user-profile-btn{height:var(--topbar-control-h);box-sizing:border-box}
/* Every pill is --topbar-control-h tall with a 1px border, so its inner height is that
   minus 2. The thing inside — the avatar, the active language — is --topbar-inner, and
   the gap left over splits evenly top, bottom and end. Writing it as a subtraction is
   what keeps it symmetric: hand-picked padding drifted, and the avatar sat closer to
   the right edge than to the top. */
.user-profile-btn{background:#fff;border:1px solid var(--border);border-radius:99px;
  box-shadow:0 2px 8px rgba(0,0,0,.02);gap:12px;
  padding:0 calc((var(--topbar-control-h) - 2px - var(--topbar-inner)) / 2) 0 16px}
.user-profile-btn:hover{border-color:var(--primary)}
/* The avatar sits INSIDE the pill now, so it cannot be the pill's own height — at 40px in a
   42px pill it touched both edges and read as a blob wedged into a tube. Inset by 5px top
   and bottom, which is what makes it look like a pill with a face in it. */
.user-profile-btn > div:last-child{width:var(--topbar-inner) !important;
  height:var(--topbar-inner) !important;font-size:12px !important;
  flex:0 0 var(--topbar-inner)}
/* The label beside it: a single strong line reads better at this size than two competing
   ones, so the subtitle steps back rather than shouting alongside the name. */
.user-profile-btn > div:first-child > div:first-child{font-size:13px;line-height:1.25;
  white-space:nowrap}
.user-profile-btn > div:first-child > div:last-child{font-size:10px;line-height:1.2;
  opacity:.75;white-space:nowrap}
/* Lighter than the cards behind them: these are controls, not surfaces. */
.org-picker-pill,
.lang-toggle,
.user-profile-btn{box-shadow:0 1px 3px rgba(0,0,0,.04)}
.org-picker-pill{padding:0 14px;gap:9px}
/* The active language is the same inner size as the avatar, inset the same way. */
.lang-toggle{padding:calc((var(--topbar-control-h) - 2px - var(--topbar-inner)) / 2)}
.lang-btn{height:var(--topbar-inner);padding:0 14px;font-size:12px;
  display:flex;align-items:center}
/* The focus ring sat ON the pill edge and read as a stray blue outline. */
.lang-btn:focus-visible,
.org-picker-pill:focus-visible,
.user-profile-btn:focus-visible,
.accent-swatch:focus-visible{
  outline:2px solid var(--primary);outline-offset:3px}
.lang-btn:focus,
.org-picker-pill:focus,
.user-profile-btn:focus{outline:none}
.topbar-right{align-items:center}

/* ── Connect-mailbox dialog ──────────────────────────────────────────────────
   Receiving and sending are two different servers with two different credentials, so they
   are two columns rather than eight stacked fields. Stacked, the dialog was taller than the
   viewport and the Connect button sat below the fold — the one control the dialog exists for. */
.mailbox-modal-card{max-width:780px;width:calc(100vw - 48px);
  max-height:calc(100vh - 64px);display:flex;flex-direction:column}
/* The body scrolls, not the page: the header and the footer stay put so Connect is always
   reachable however short the window is. */
.mailbox-modal-card .modal-body{overflow-y:auto;flex:1;min-height:0}
.mailbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:4px}
.mailbox-col{min-width:0}
.mailbox-col-title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-sub);
  padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.mailbox-col-title i{color:var(--primary);font-size:13px}
.mailbox-port-row{display:flex;align-items:flex-end;gap:14px}
.mailbox-port-row .form-group{flex:1;min-width:0}
.mailbox-ssl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  white-space:nowrap;padding-bottom:18px;cursor:pointer}
/* Holds the SMTP column's port in line with IMAP's, which carries an SSL box beside it. */
.mailbox-ssl-spacer{flex:0 0 46px}
.mailbox-note{font-size:12px;color:var(--text-sub);margin:4px 0 18px;line-height:1.5}
/* One column again when there is no room for two — a phone, or a short wide window. */
@media (max-width:720px){
  .mailbox-grid{grid-template-columns:1fr;gap:0}
  .mailbox-col + .mailbox-col{margin-top:18px}
  .mailbox-modal-card{width:calc(100vw - 24px);padding:24px}
}

/* The mailbox picker that fills the Account to See/Edit Mail chips. Shaped like the
   "+ Add role" control two fields above it, so the dialog keeps one vocabulary. */
.mailbox-picker{margin-top:8px;padding:6px 10px;border-radius:8px;border:1px dashed var(--border);
  background:#fff;font:inherit;font-size:12px;font-weight:700;color:var(--text-main);cursor:pointer;
  max-width:100%}
.mailbox-picker:hover{border-color:var(--primary)}
.mailbox-picker-empty{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:11px;
  color:var(--text-sub);background:#f8f9fa;border-radius:8px;padding:8px 10px}
.mailbox-picker-empty i{color:var(--primary)}
.mailbox-picker-empty a{color:var(--primary);font-weight:700;text-decoration:underline}