/* ============================================================
   pulse360.css  —  Pulse360 Portal UI Framework
   ------------------------------------------------------------
   Table of Contents
   1.  CSS Custom Properties (Design Tokens)
   2.  Dark Theme Overrides
   3.  Reset & Base
   4.  Scrollbar
   5.  Animations / Keyframes
   6.  Layout Shell
   7.  Sidebar — Logo
   8.  Sidebar — Nav
   9.  Sidebar — Footer
   10. Top Bar
   11. Cards
   12. Badges
   13. Buttons
   14. Tables
   15. Stat / KPI Cards
   16. Team Cards
   17. Grid Utilities
   18. Headings
   19. Filter Bar
   20. Case / Record Rows
   21. Activity Feed
   22. Quick Action Cards
   23. AI Assistant Promo Card
   24. AI Chat Widget
   25. Modals
   26. Forms & Inputs
   27. Upload Zone
   28. Notification Panel
   29. Search Overlay
   30. Profile Page
   31. Chart Utilities
   32. Responsive
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. CSS Custom Properties
───────────────────────────────────────────────────────────── */
:root {
    /* Brand colours, gradients, sidebar palette, fonts, chart series and the
       brand-coloured Kyra accents all live in pulse360-theme.css, which is
       client-owned. Do not redeclare them here — this file is common code and
       is taken wholesale from main on every client merge. */
    /* Semantic */
    --p-success: #10b981;
    --p-success-muted: rgba(16, 185, 129, 0.08);
    --p-warning: #DB8A14;
    --p-warning-muted: rgba(219, 138, 20, 0.10);
    --p-danger: #f43f5e;
    --p-danger-muted: rgba(244, 63, 94, 0.08);
    --p-info: #6366f1;
    --p-info-muted: rgba(99, 102, 241, 0.08);
    /* Greyscale */
    --p-g50: #fafaf8;
    --p-g100: #f5f4f0;
    --p-g200: #ebe9e3;
    --p-g300: #D8D4D7;
    --p-g400: #a09a9e;
    --p-g500: #7a7478;
    --p-g600: #5a5458;
    --p-g700: #3a3438;
    --p-g800: #1e1a1e;
    /* Surfaces */
    --p-surface: #ffffff;
    --p-surface-alt: #fafaf8;
    --p-border: #e8e4e0;
    --p-page-bg: #EFF0F7;
    /* Text */
    --p-text: #3a3438;
    --p-text-strong: #0d0d0d;
    /*File Types*/
    --p-Application: #318CE7;
    --p-Illustration: #F44C26;
    --p-Medical: #94C6F8;
    --p-Financial: #1CC836;
    --p-Identification: #6366f1;
    --p-Supporting: #1435E8;
    --p-Contracting: #9457EB;
    --p-Other: #9457EB;
    /* Sidebar (palette in pulse360-theme.css) */
    --p-sidebar-border: rgba(255, 255, 255, 0.06);
    /* Top bar */
    --p-topbar-bg: #ffffff;
    --p-topbar-border: #e8e4e0;
    /* Elevation — soft layered iOS shadows */
    --p-shadow-sm: 0 1px 2px rgba(11, 22, 40, 0.04);
    --p-shadow-md: 0 4px 12px rgba(11, 22, 40, 0.06), 0 1px 3px rgba(11, 22, 40, 0.04);
    --p-shadow-lg: 0 12px 32px rgba(11, 22, 40, 0.10), 0 2px 6px rgba(11, 22, 40, 0.05);
    --p-shadow-xl: 0 24px 60px rgba(11, 22, 40, 0.16), 0 4px 12px rgba(11, 22, 40, 0.06);
    --p-modal-overlay: rgba(0, 0, 0, 0.45);
    /* Motion */
    --p-ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* Border radius */
    --p-radius-sm: 6px;
    --p-radius-md: 10px;
    --p-radius-lg: 14px;
    --p-radius-xl: 18px;
    --p-radius-2xl: 20px;
    /* Layout */
    --p-sidebar-width: 240px;
    --p-sidebar-collapsed: 64px;
    --p-topbar-height: 57px;
    /* Kyra AI Chat - Light Mode */
    --kyra-header-bg: linear-gradient(135deg, var(--p-gradient1-start), var(--p-gradient1-end));
    --kyra-panel-bg: rgba(255, 255, 255, 0.86);
    --kyra-bar-bg: rgba(250, 250, 248, 0.72);
    --kyra-border: rgba(0, 0, 0, 0.08);
    --kyra-text: #1d1d1f;
    --kyra-text-muted: #6e6e73;
    --kyra-input-bg: rgba(120, 120, 128, 0.08);
    --kyra-msg-user-text: #ffffff;
    --kyra-msg-assistant-bg: rgba(120, 120, 128, 0.14);
    --kyra-msg-assistant-text: #1d1d1f;
    /* Conversation-starter cards + collapsed rail */
    --kyra-card-bg: rgba(255, 255, 255, 0.72);
    --kyra-card-hover-bg: rgba(255, 255, 255, 0.96);
    --kyra-prompt-bg: rgba(120, 120, 128, 0.08);
    --kyra-prompt-hover-bg: rgba(120, 120, 128, 0.16);
    /* Rail mirrors the left sidebar so the shell reads symmetrically */
    --kyra-rail-bg: var(--p-sidebar-bg);
    --kyra-rail-width: var(--p-sidebar-collapsed);
    /* Where the fixed Kyra panel starts. #p-topbar is NOT fixed and its rendered
       height exceeds --p-topbar-height (min-height + padding + wrapping), so the
       widget measures the real topbar and overwrites this at runtime. The token
       is only the pre-measurement fallback. */
    --kyra-top-offset: var(--p-topbar-height);
}


/* ─────────────────────────────────────────────────────────────
   2. Dark Theme Overrides
───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --p-g50: #020A14;
    --p-g100: #091528;
    --p-g200: #252222;
    --p-g300: #302c2c;
    --p-g400: #6a6468;
    --p-g500: #908a8e;
    --p-g600: #c0babe;
    --p-g700: #d8d4d7;
    --p-g800: #f0ecee;
    --p-surface: #091528;
    --p-surface-alt: #020A14;
    --p-border: #1A2535;
    --p-page-bg: #020A14;
    --p-text: #c0babe;
    --p-text-strong: #f0ecee;
    --p-success-muted: rgba(16, 185, 129, 0.15);
    --p-warning-muted: rgba(219, 138, 20, 0.15);
    --p-danger-muted: rgba(244, 63, 94, 0.15);
    --p-info-muted: rgba(99, 102, 241, 0.15);
    --p-topbar-bg: #091528;
    --p-topbar-border: #1A2535;
    --p-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --p-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --p-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --p-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35);
    --p-modal-overlay: rgba(0, 0, 0, 0.65);
    --p-chat-send: #020A14;
    /* Kyra AI Chat - Dark Mode */
    /* Derived from the brand gradient so it follows pulse360-theme.css. This
       used to hardcode the house blue, which silently reverted every client's
       Kyra header to Pulse360 blue in dark mode. */
    --kyra-header-bg: linear-gradient(135deg, var(--p-gradient1-start), var(--p-gradient1-end));
    --kyra-panel-bg: rgba(11, 21, 38, 0.88);
    --kyra-bar-bg: rgba(7, 15, 30, 0.72);
    --kyra-border: rgba(255, 255, 255, 0.10);
    --kyra-text: #f5f5f7;
    --kyra-text-muted: #98989d;
    --kyra-input-bg: rgba(120, 120, 128, 0.18);
    --kyra-msg-user-text: #ffffff;
    --kyra-msg-assistant-bg: rgba(120, 120, 128, 0.26);
    --kyra-msg-assistant-text: #f5f5f7;
    --kyra-card-bg: rgba(255, 255, 255, 0.06);
    --kyra-card-hover-bg: rgba(255, 255, 255, 0.11);
    --kyra-prompt-bg: rgba(255, 255, 255, 0.05);
    --kyra-prompt-hover-bg: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .p-btn-outline {
    color: #f5f4f0;
    border-color: rgba(245, 244, 240, 0.35);
}
[data-theme="dark"] .p-btn-outline:hover {
    background: rgba(245, 244, 240, 0.08);
    border-color: #f5f4f0;
}
[data-theme="dark"] .p-btn-primary {
        background: var(--p-primary);
        color: #0d0d0d;
        font-weight: 700;
 }
    [data-theme="dark"] .p-chat-send {
        color: #020A14;
    }


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

body {
    font-family: var(--p-font);
    background: var(--p-page-bg);
    color: var(--p-text);
    height: 100vh;
    display: flex;
    overflow: hidden;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* iOS-style tight tracking on display text */
h1, h2, h3 { letter-spacing: -0.02em; }
h4, h5, h6 { letter-spacing: -0.01em; }

a {
    text-decoration: none;
    color: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--p-primary) !important;
}


/* ─────────────────────────────────────────────────────────────
   4. Scrollbar
───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--p-g300); border-radius: 3px; }


/* ─────────────────────────────────────────────────────────────
   5. Animations / Keyframes
───────────────────────────────────────────────────────────── */
@keyframes p-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes p-modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes p-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(244, 63, 94, 0.15); }
    50%      { box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.00); }
}

/* Kyra AI */
@keyframes kyra-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-6px);
    }
}

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


/* ─────────────────────────────────────────────────────────────
   6. Layout Shell
───────────────────────────────────────────────────────────── */
#p-sidebar {
    width: var(--p-sidebar-width);
    background: var(--p-sidebar-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
}

#p-sidebar.collapsed {
    width: var(--p-sidebar-collapsed);
}

#p-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

#p-content {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

.p-page {
    animation: p-fadeIn 0.3s ease;
}

#p-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 997;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}


/* ─────────────────────────────────────────────────────────────
   7. Sidebar — Logo
───────────────────────────────────────────────────────────── */
.p-logo {
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    background: var(--p-sidebar-bg);
    flex-shrink: 0;
}

#p-sidebar.collapsed .p-logo {
    padding: 12px 14px;
    justify-content: center;
}

.p-logo-mark {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--p-primary), var(--p-secondary));
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: -0.5px;
    color: #0d0d0d;
    flex-shrink: 0;
}

#p-sidebar.collapsed .p-logo-mark  { display: flex; }
#p-sidebar.collapsed .p-logo-info  { display: none; }

/* Client logo stacked ABOVE the P360 branding (not side-by-side) */
.p-logo-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.p-logo-info img {
    max-height: 44px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

img.p-logo-secondary {
    max-height: 30px;
}


/* ─────────────────────────────────────────────────────────────
   8. Sidebar — Nav
───────────────────────────────────────────────────────────── */
#p-nav {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.p-nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--p-radius-md);
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--p-sidebar-text);
    font-family: var(--p-font);
    font-size: 13px;
    font-weight: 400;
    transition: all 0.15s ease;
}

.p-nav-btn.active {
    background: var(--p-sidebar-active);
    color: var(--p-sidebar-active-txt);
    font-weight: 600;
    border-left-color: var(--p-primary);
}

.p-nav-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
}

#p-sidebar.collapsed .p-nav-btn {
    justify-content: center;
    padding: 11px;
}

#p-sidebar.collapsed .p-nav-label,
#p-sidebar.collapsed .p-nav-badge {
    display: none;
}

.p-nav-label { flex: 1; }

.p-nav-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    font-family: var(--p-mono);
    margin-left: auto;
}

.p-nav-btn.active .p-nav-badge {
    background: var(--p-secondary);
}

/* Generic icon wrapper — JS stamps the SVG inside */
.p-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   9. Sidebar — Footer
───────────────────────────────────────────────────────────── */
.p-sidebar-footer {
    padding: 8px;
    border-top: 1px solid var(--p-sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.p-sidebar-footer button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--p-radius-md);
    border: none;
    cursor: pointer;
    width: 100%;
    background: transparent;
    color: var(--p-sidebar-text);
    font-family: var(--p-font);
    font-size: 13px;
    transition: background 0.15s;
}

.p-sidebar-footer button:hover {
    background: rgba(255, 255, 255, 0.04);
}

#p-sidebar.collapsed .p-sidebar-footer button {
    justify-content: center;
    padding: 11px;
}

#p-sidebar.collapsed .p-sidebar-footer .p-btn-label {
    display: none;
}

/* ── Agent/Agency view switch ── */
.p-viewscope-switch {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: 2px;
    border-radius: var(--p-radius-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--p-sidebar-border);
}

.p-sidebar-footer .p-viewscope-switch button {
    flex: 1;
    width: auto;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--p-sidebar-text);
    opacity: 0.65;
}

.p-sidebar-footer .p-viewscope-switch button:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.04);
}

.p-sidebar-footer .p-viewscope-switch button.active {
    background: var(--p-sidebar-active);
    color: var(--p-sidebar-active-txt);
    opacity: 1;
}

#p-sidebar.collapsed .p-viewscope-switch {
    flex-direction: column;
}


/* ─────────────────────────────────────────────────────────────
   10. Top Bar
───────────────────────────────────────────────────────────── */
#p-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--p-topbar-bg);
    border-bottom: 1px solid var(--p-topbar-border);
    gap: 12px;
    flex-wrap: wrap;
    min-height: var(--p-topbar-height);
    flex-shrink: 0;
}

#p-topbar h1 {
    font-family: var(--p-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--p-text-strong);
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.p-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Search trigger */
.p-search-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--p-g50);
    border-radius: var(--p-radius-md);
    border: 1px solid var(--p-border);
    cursor: pointer;
    min-width: 160px;
    color: var(--p-g400);
    font-size: 13px;
    font-family: var(--p-font);
    transition: border-color 0.15s;
}

.p-search-trigger:hover { border-color: var(--p-primary); }

.p-search-trigger kbd {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--p-g100);
    font-size: 10px;
    color: var(--p-g500);
    font-family: var(--p-mono);
    border: 1px solid var(--p-border);
    margin-left: auto;
}

/* Icon button */
.p-icon-btn {
    background: var(--p-g50);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-md);
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--p-g500);
    position: relative;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.p-icon-btn:hover {
    border-color: var(--p-primary);
    background: var(--p-primary-muted);
    color: var(--p-primary);
}

/* AI assistant button */
.p-ai-btn {
    background: linear-gradient(135deg, var(--p-primary), var(--p-secondary));
    border: none;
    border-radius: var(--p-radius-md);
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: opacity 0.15s;
}

.p-ai-btn:hover { opacity: 0.88; }

/* User pill */
.p-user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    background: var(--p-g50);
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid var(--p-border);
    transition: border-color 0.15s;
}

.p-user-pill:hover { border-color: var(--p-primary); }

.p-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--p-primary), var(--p-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.p-user-pill span {
    font-size: 13px;
    font-weight: 600;
    color: var(--p-text-strong);
}

.p-notif-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--p-danger);
    box-shadow: 0 0 4px var(--p-danger);
}

.p-mobile-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--p-g500);
    padding: 4px;
}

/* ── Topbar delegate view dropdown ─────────────────────── */
.p-viewas {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 34px 8px 14px;
    border-radius: var(--p-radius-md);
    border: 1.5px solid var(--p-border);
    font-family: var(--p-font);
    font-size: 13px;
    font-weight: 600;
    background: var(--p-g50) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7478' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--p-text);
    cursor: pointer;
    max-width: 230px;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.p-viewas:hover { border-color: var(--p-g400); }
.p-viewas:focus {
    outline: none;
    background-color: var(--p-surface);
    box-shadow: 0 0 0 3px var(--p-primary-glow);
}
.p-viewas option { background: var(--p-surface); color: var(--p-text); font-weight: 500; }

/* Page-level control bar (e.g. the Reporting page global LOB selector) */
.p-page-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.p-page-controls-label {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: var(--p-g500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
select.p-select-compact {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    padding: 8px 34px 8px 14px;
    font-size: 13px;
    font-weight: 600;
    background: var(--p-g50) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7478' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    cursor: pointer;
}

/* Curved, token-themed dropdown drawers. Chromium-based browsers support the
   customizable <select>; anything else keeps the native (unstylable) drawer. */
@supports selector(::picker(select)) {
    select.p-input,
    select.p-select,
    select.p-viewas {
        appearance: base-select;
    }
    select.p-input::picker(select),
    select.p-select::picker(select),
    select.p-viewas::picker(select) {
        appearance: base-select;
        border: 1px solid var(--p-border);
        border-radius: var(--p-radius-md);
        background: var(--p-surface);
        color: var(--p-text);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
        padding: 4px;
        margin-top: 4px;
    }
    select.p-input option,
    select.p-select option,
    select.p-viewas option {
        border-radius: calc(var(--p-radius-md) - 4px);
        padding: 7px 12px;
        cursor: pointer;
    }
    select.p-input option:hover, select.p-input option:focus,
    select.p-select option:hover, select.p-select option:focus,
    select.p-viewas option:hover, select.p-viewas option:focus {
        background: var(--p-g100);
    }
    select.p-viewas::picker-icon,
    select.p-select-compact::picker-icon {
        display: none;
    }
    select.p-input option:checked,
    select.p-select option:checked,
    select.p-viewas option:checked {
        background: var(--p-primary-muted);
        color: var(--p-primary);
        font-weight: 600;
    }
}


/* ─────────────────────────────────────────────────────────────
   11. Cards
───────────────────────────────────────────────────────────── */
.p-card {
    background: var(--p-surface);
    border-radius: var(--p-radius-lg);
    border: 1px solid var(--p-border);
    padding: 20px;
    box-shadow: var(--p-shadow-sm);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.p-card-hover:hover {
    border-color: var(--p-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--p-primary-glow);
    cursor: pointer;
}

.p-card-flush {
    padding: 0;
    overflow: hidden;
}

.p-card-dark {
    background: linear-gradient(135deg, #0d0d0d, #1a1408) !important;
    border: 1px solid rgba(242, 169, 0, 0.20) !important;
}

.p-card-flagged {
    border-left: 3px solid var(--p-danger) !important;
}


/* ─────────────────────────────────────────────────────────────
   12. Badges
───────────────────────────────────────────────────────────── */
.p-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 7px;
    border-radius: var(--p-radius-sm);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--p-font);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.p-badge-primary  { background: var(--p-primary-muted);   color: var(--p-primary);   }
.p-badge-secondary{ background: var(--p-secondary-muted); color: var(--p-secondary); }
.p-badge-success  { background: var(--p-success-muted);   color: var(--p-success);   }
.p-badge-warning  { background: var(--p-warning-muted);   color: var(--p-warning);   }
.p-badge-danger   { background: var(--p-danger-muted);    color: var(--p-danger);    }
.p-badge-info     { background: var(--p-info-muted);      color: var(--p-info);      }

/* Contextual party badges */
.p-badge-agent {
    background: rgba(244, 63, 94, 0.08);
    color: #e11d48;
    border: 1px solid rgba(244, 63, 94, 0.15);
}
.p-badge-client {
    background: rgba(245, 158, 11, 0.08);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.15);
}
.p-badge-mga {
    background: rgba(14, 154, 154, 0.10);
    color: #0E9A9A;
    border: 1px solid rgba(14, 154, 154, 0.18);
}
.p-badge-carrier {
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.15);
}
.p-badge-internal {
    background: rgba(14, 154, 154, 0.10);
    color: #0E9A9A;
    border: 1px solid rgba(14, 154, 154, 0.18);
}
.p-badge-external {
    background: var(--p-info-muted);
    color: var(--p-info);
    border: 1px solid rgba(99, 102, 241, 0.15);
}

/* Animated alert badge */
.p-badge-alert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: var(--p-radius-sm);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    background: rgba(244, 63, 94, 0.10);
    color: #e11d48;
    border: 1px solid rgba(244, 63, 94, 0.20);
    animation: p-pulse 2.4s ease-in-out infinite;
}


/* ─────────────────────────────────────────────────────────────
   13. Buttons
───────────────────────────────────────────────────────────── */
.p-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 8px;
    font-family: var(--p-font);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
    letter-spacing: 0.1px;
    border: none;
    font-size: 13px;
    padding: 9px 18px;
    white-space: nowrap;
}

/* iOS press feedback */
.p-btn:active { transform: scale(0.97); }

/* Sizes */
.p-btn-sm   { font-size: 12px; padding: 5px 12px; }
.p-btn-lg   { font-size: 14px; padding: 12px 24px; }
.p-btn-full { width: 100%; justify-content: center; }

/* Variants */
.p-btn-primary {
    background: var(--p-primary);
    color: #ffffff;
    font-weight: 700;
}
.p-btn-primary:hover { background: var(--p-primary-hover); }

.p-btn-gradient {
    background: linear-gradient(135deg, var(--p-primary-hover), var(--p-secondary));
    color: #0d0d0d;
    font-weight: 700;
}
.p-btn-gradient:hover { opacity: 0.9; }

.p-btn-outline {
    background: transparent;
    color: var(--p-primary);
    border: 1.5px solid var(--p-primary-muted);
}
.p-btn-outline:hover {
    background: var(--p-primary-muted);
    border-color: var(--p-primary);
}

.p-btn-ghost {
    background: transparent;
    color: var(--p-g600);
    border: 1.5px solid transparent;
}
.p-btn-ghost:hover { background: var(--p-g100); }

.p-btn-glass {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.p-btn-glass:hover { background: rgba(255, 255, 255, 0.15); }

.p-btn-danger {
    background: var(--p-danger);
    color: #fff;
}
.p-btn-danger:hover { opacity: 0.9; }


/* ─────────────────────────────────────────────────────────────
   14. Tables
───────────────────────────────────────────────────────────── */
.p-table {
    width: 100%;
    border-collapse: collapse;
}

.p-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 10px;
    font-weight: 700;
    color: var(--p-g500);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid var(--p-border);
    font-family: var(--p-font);
    background: var(--p-g50);
    white-space: nowrap;
}

.p-table td {
    padding: 13px 16px;
    font-family: var(--p-font);
    font-size: 13px;
    color: var(--p-text);
    border-bottom: 1px solid var(--p-border);
}

.p-table tr:last-child td { border-bottom: none; }

.p-table tbody tr {
    transition: background 0.1s;
}

.p-table tbody tr:hover { background: var(--p-g50); }

/* Typography helpers */
.p-mono   { font-family: var(--p-mono);  font-size: 12px; }
.p-bold   { font-weight: 700; }
.p-strong { color: var(--p-text-strong); }
.p-muted  { color: var(--p-g400); }


/* ─────────────────────────────────────────────────────────────
   15. Stat / KPI Cards
───────────────────────────────────────────────────────────── */
.p-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.p-stat-card { position: relative; overflow: hidden; }

.p-stat-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.p-stat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--p-g500);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}

/* Card header — keeps the title clear of the filter controls instead of
   letting absolutely-positioned controls overlap it on narrow cards. */
.p-stat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 10px;
}

.p-stat-head .p-stat-label {
    margin-bottom: 0;
    padding-top: 3px;
}

.p-stat-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.p-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--p-text-strong);
    font-family: var(--p-mono);
    letter-spacing: -1px;
}

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

/* Stat Info Popup */
.p-stat-popup {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-lg);
    box-shadow: var(--p-shadow-lg);
    padding: 0;
    width: 320px;
    z-index: 2000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.p-stat-popup.p-stat-popup-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

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

.p-stat-popup-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--p-text-strong);
    font-family: var(--p-font-heading);
}

.p-stat-popup-close {
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--p-g400);
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.p-stat-popup-close:hover { 
    background: var(--p-g100); 
    color: var(--p-text);
}

.p-stat-popup p {
    margin: 0;
    padding: 16px 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--p-text);
}


/* ─────────────────────────────────────────────────────────────
   16. Team Cards
───────────────────────────────────────────────────────────── */
.p-team-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px !important;
}

.p-team-photo { position: relative; flex-shrink: 0; }

.p-team-photo img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    border: 2px solid var(--p-border);
}

.p-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--p-surface);
}

.p-status-online  { background: var(--p-success); box-shadow: 0 0 6px var(--p-success); }
.p-status-offline { background: var(--p-g300); }


/* ─────────────────────────────────────────────────────────────
   17. Grid Utilities
───────────────────────────────────────────────────────────── */
.p-grid-2   { display: grid; grid-template-columns: 1fr 1fr;          gap: 20px; }
.p-grid-3   { display: grid; grid-template-columns: repeat(3, 1fr);   gap: 16px; }
.p-grid-4   { display: grid; grid-template-columns: repeat(4, 1fr);   gap: 16px; }
.p-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr;          gap: 10px; }
.p-flex-col { display: flex; flex-direction: column;                   gap: 10px; }
.p-flex-row { display: flex; align-items: center;                      gap: 10px; }


/* ─────────────────────────────────────────────────────────────
   18. Headings
───────────────────────────────────────────────────────────── */
.p-section-h {
    font-size: 14px;
    font-weight: 700;
    color: var(--p-text-strong);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--p-font-heading);
    letter-spacing: 0.2px;
}

.p-sub-h {
    font-size: 12px;
    font-weight: 700;
    color: var(--p-text-strong);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ─────────────────────────────────────────────────────────────
   19. Filter Bar
───────────────────────────────────────────────────────────── */
.p-filter-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.p-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--p-border);
    background: transparent;
    color: var(--p-g500);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--p-font);
    transition: all 0.15s;
}

.p-filter-btn.active {
    border-color: var(--p-primary);
    background: var(--p-primary-muted);
    color: var(--p-primary);
}

.p-filter-btn:hover:not(.active) {
    border-color: var(--p-g300);
    background: var(--p-g100);
    color: var(--p-g600);
}


/* ─────────────────────────────────────────────────────────────
   20. Case / Record Rows
───────────────────────────────────────────────────────────── */
.p-case-header {
    display: grid;
    grid-template-columns: 110px 1.2fr 1.5fr 100px auto 40px;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.1s;
}

.p-case-header:hover { background: var(--p-g50); }

/* Redesigned header (Pending Business). Other pages (Contracting) still use
   the grid contract above, so the flex layout lives on a modifier class. */
.p-case-header.p-case-header-flex {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px 20px;
}

.p-case-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.p-case-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.p-case-policy {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--p-primary);
}

.p-case-lob {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--p-primary);
}

.p-case-carrier {
    font-size: 13px;
    font-weight: 600;
    color: var(--p-text);
}

.p-req-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--p-warning-muted);
    color: var(--p-warning);
    border: 1px solid rgba(219, 138, 20, 0.30);
}

.p-case-client-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.p-case-client {
    font-size: 16px;
    font-weight: 700;
    color: var(--p-text-strong);
}

.p-case-face {
    font-size: 12.5px;
    color: var(--p-g500);
}

.p-case-face strong { color: var(--p-text-strong); }

.p-case-product {
    font-size: 13px;
    color: var(--p-text);
}

.p-case-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 12px;
    color: var(--p-g500);
}

.p-case-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.p-case-meta-item strong { color: var(--p-text-strong); }

.p-case-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    flex-shrink: 0;
}

.p-case-premium {
    font-size: 17px;
    font-weight: 700;
    color: var(--p-text-strong);
}

.p-age-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid var(--p-g300);
    background: var(--p-g100);
    color: var(--p-g500);
    cursor: help;
}

.p-age-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.p-age-success {
    background: var(--p-success-muted);
    color: var(--p-success);
    border-color: rgba(16, 185, 129, 0.25);
}

.p-age-warning {
    background: var(--p-warning-muted);
    color: var(--p-warning);
    border-color: rgba(219, 138, 20, 0.30);
}

.p-age-danger {
    background: var(--p-danger-muted);
    color: var(--p-danger);
    border-color: rgba(244, 63, 94, 0.25);
}

/* Age-chip tooltip. A single shared, fixed-position node driven by JS so it
   escapes the flush card's overflow:hidden. Background/text use the inverting
   g800/surface tokens so it contrasts in both themes. */
.p-age-tooltip {
    position: fixed;
    z-index: 9500;
    max-width: 250px;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--p-g800);
    color: var(--p-surface);
    box-shadow: var(--p-shadow-lg);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.1px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.13s var(--p-ease), transform 0.13s var(--p-ease);
    pointer-events: none;
}

.p-age-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.p-age-tooltip-title {
    font-weight: 700;
    font-size: 12.5px;
    margin-bottom: 2px;
}

.p-age-tooltip-sub { opacity: 0.75; }

.p-age-tooltip-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(128, 128, 128, 0.28);
}

.p-age-tooltip-legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
    opacity: 0.9;
}

.p-age-tooltip-legend-row.active { opacity: 1; font-weight: 700; }

.p-age-tooltip-legend .p-age-dot { flex-shrink: 0; }

/* Arrow */
.p-age-tooltip::after {
    content: "";
    position: absolute;
    left: var(--p-tip-arrow-x, 50%);
    width: 9px;
    height: 9px;
    background: var(--p-g800);
    transform: translateX(-50%) rotate(45deg);
}

.p-age-tooltip.below::after { top: -4px; }
.p-age-tooltip.above::after { bottom: -4px; }

/* 900px, not the 768px sidebar collapse: with the 240px sidebar still visible
   the header runs out of room well before the viewport itself is narrow. */
@media (max-width: 900px) {
    .p-case-header.p-case-header-flex { flex-wrap: wrap; }

    .p-case-side {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: flex-start;
        order: 3;
    }
}

.p-case-chevron {
    color: var(--p-g400);
    transition: transform 0.2s;
}

.p-case-chevron.open { transform: rotate(180deg); }

.p-case-detail {
    border-top: 1px solid var(--p-border);
    padding: 20px;
    background: var(--p-g50);
}

.p-agent-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: var(--p-radius-sm);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    background: rgba(244, 63, 94, 0.10);
    color: #e11d48;
    border: 1px solid rgba(244, 63, 94, 0.20);
    animation: p-flagPulse 2.4s ease-in-out infinite;
}

@keyframes p-flagPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.15); }
    50%      { box-shadow: 0 0 0 4px rgba(244, 63, 94, 0); }
}

.p-record-header {
    display: grid;
    grid-template-columns: 110px 1.2fr 1.5fr 100px auto 40px;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.1s;
}

.p-record-header:hover { background: var(--p-g50); }

.p-record-chevron {
    color: var(--p-g400);
    transition: transform 0.2s;
}

.p-record-chevron.open { transform: rotate(180deg); }

.p-record-detail {
    border-top: 1px solid var(--p-border);
    padding: 20px;
    background: var(--p-g50);
}

.p-req-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--p-surface);
    border-radius: var(--p-radius-md);
    border: 1px solid var(--p-border);
    flex-wrap: wrap;
    gap: 8px;
}


/* ─────────────────────────────────────────────────────────────
   21. Activity Feed
───────────────────────────────────────────────────────────── */
.p-activity-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--p-border);
}

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

.p-activity-time {
    font-size: 11px;
    color: var(--p-g400);
    font-family: var(--p-mono);
    min-width: 70px;
    font-weight: 500;
    flex-shrink: 0;
}

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

/* Update rows (expandable) */
.p-update-row {
    border-bottom: 1px solid var(--p-border);
}

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

.p-update-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.p-update-header:hover {
    background: var(--p-g50);
}

.p-update-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--p-g400);
}

.p-update-chevron.p-chevron-open {
    transform: rotate(180deg);
}

.p-update-detail {
    overflow: hidden;
    transition: max-height 0.3s ease;
}


/* ─────────────────────────────────────────────────────────────
   22. Quick Action Cards
───────────────────────────────────────────────────────────── */
.p-quick-card {
    text-align: center;
    padding: 22px 16px !important;
}

.p-quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--p-primary-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: var(--p-primary);
}


/* ─────────────────────────────────────────────────────────────
   23. AI Assistant Promo Card
───────────────────────────────────────────────────────────── */
.p-ai-promo {
    background: linear-gradient(135deg, var(--p-gradient1-start), var(--p-gradient1-end)) !important;
    border: 1px solid var(--p-primary-muted) !important;
    margin-top: 12px;
}

.p-ai-promo-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.p-ai-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--p-primary);
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   24. AI Chat Widget (Kyra)
───────────────────────────────────────────────────────────── */

/* Legacy chat styles - kept for backward compatibility */
#p-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    height: 520px;
    border-radius: var(--p-radius-2xl);
    overflow: hidden;
    box-shadow: var(--p-shadow-lg);
    z-index: 999;
    display: none;
    flex-direction: column;
    border: 1px solid var(--p-border);
    animation: p-modalIn 0.25s ease;
}

#p-chat.open { display: flex; }

.p-chat-header {
    background: linear-gradient(135deg, var(--p-gradient1-start), var(--p-gradient1-end));
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.p-chat-close {
    background: rgba(255, 255, 255, 0.10);
    border: none;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
    transition: background 0.15s;
}

.p-chat-close:hover { background: rgba(255, 255, 255, 0.20); }

.p-chat-messages {
    flex: 1;
    overflow: auto;
    padding: 16px;
    background: var(--p-surface-alt);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.p-chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    font-size: 13px;
    font-family: var(--p-font);
    line-height: 1.5;
    white-space: pre-line;
}

.p-chat-msg.ai {
    align-self: flex-start;
    border-radius: 14px 14px 14px 4px;
    background: var(--p-surface);
    color: var(--p-text);
    border: 1px solid var(--p-border);
    box-shadow: var(--p-shadow-sm);
}

.p-chat-msg.user {
    align-self: flex-end;
    border-radius: 14px 14px 4px 14px;
    background: var(--p-primary);
    color: #fff;
}

.p-chat-input-row {
    padding: 12px;
    background: var(--p-surface);
    border-top: 1px solid var(--p-border);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.p-chat-input-row input {
    flex: 1;
    padding: 10px 14px;
    border-radius: var(--p-radius-md);
    border: 1.5px solid var(--p-border);
    font-family: var(--p-font);
    font-size: 13px;
    background: var(--p-g50);
    color: var(--p-text);
}

.p-chat-send {
    background: var(--p-primary);
    border: none;
    border-radius: var(--p-radius-md);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.p-chat-send:hover { opacity: 0.88; }

/* Kyra AI Widget — iOS slide-over panel (theme-aware, frosted glass) */

/* Offset the panel past its own inset so no sliver shows at frame 0. */
@keyframes kyra-slideIn {
    from { transform: translateX(calc(100% + var(--kyra-panel-gap))); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes kyra-railIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes kyra-pulseRing {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}

.kyra-msg-appear {
    animation: kyra-fadeIn 0.3s ease-out;
}

.kyra-bounce-dot {
    width: 6px;
    height: 6px;
    background: var(--kyra-accent);
    border-radius: 50%;
    animation: kyra-bounce 1s infinite;
}

/* Slide-over panel — a floating rounded card that overlays page content, so the
   frosted blur reads through. Inset from the viewport edges so the corner radius
   is actually visible, and started below the topbar so the star button stays
   clickable as a toggle. `overflow: hidden` clips the header/footer to the radius. */
.kyra-panel {
    --kyra-panel-gap: 14px;
    position: fixed;
    top: calc(var(--kyra-top-offset) + var(--kyra-panel-gap));
    right: var(--kyra-panel-gap);
    bottom: var(--kyra-panel-gap);
    max-width: calc(100vw - (var(--kyra-panel-gap) * 2));
    /* Above page content, the FAB (900) and the rail (950), but deliberately
       BELOW the app's modals and search overlay (1000/1001) and the mobile nav
       (997/998) so those still dim and cover the panel when they open. */
    z-index: 960;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--p-radius-xl);
    background: var(--kyra-panel-bg);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid var(--kyra-border);
    box-shadow: var(--p-shadow-xl);
    animation: kyra-slideIn 0.28s var(--p-ease);
    font-family: var(--p-font);
    color: var(--kyra-text);
}

.kyra-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 10;
}

/* Header — branded gradient, white text (works in both themes) */
.kyra-header {
    background: var(--kyra-header-bg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Kyra wordmark (transparent bg) — inverted to white so it reads on the
   gradient header and green FAB in both light and dark mode */
.kyra-header-logo {
    height: 34px;
    width: auto;
    max-width: 140px;
    padding: 2px 0;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.kyra-header-title {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.kyra-header-sub {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    margin-top: 2px;
}

.kyra-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

.kyra-icon-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* Conversation starters — expandable category cards, shown in the scrolling
   body until the first prompt is sent. */
.kyra-cards-intro {
    color: var(--kyra-text);
    font-size: 13px;
    margin-bottom: 2px;
}

.kyra-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.kyra-card {
    background: var(--kyra-card-bg);
    border: 1px solid var(--kyra-border);
    border-radius: var(--p-radius-lg);
    padding: 12px;
    font-family: var(--p-font);
    box-shadow: var(--p-shadow-sm);
    transition: background 0.15s var(--p-ease), border-color 0.15s var(--p-ease);
}

.kyra-card:hover {
    background: var(--kyra-card-hover-bg);
    border-color: var(--kyra-accent);
}

/* An expanded card takes the full grid width so its prompts have room to read */
.kyra-card-expanded { grid-column: 1 / -1; }

/* The header is the toggle; prompt buttons sit beside it, not inside it */
.kyra-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--p-radius-sm);
    transition: transform 0.12s var(--p-ease);
}

.kyra-card-header:active { transform: scale(0.985); }

.kyra-card-header:focus-visible {
    outline: 2px solid var(--kyra-accent);
    outline-offset: 3px;
}

.kyra-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kyra-accent);
    flex-shrink: 0;
}

.kyra-card-title-wrap {
    flex: 1;
    min-width: 0;
}

.kyra-card-title {
    display: block;
    color: var(--kyra-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.kyra-card-subtitle {
    display: block;
    color: var(--kyra-text-muted);
    font-size: 11px;
    margin-top: 2px;
}

.kyra-card-prompts {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kyra-prompt-row {
    background: var(--kyra-prompt-bg);
    border: 1px solid var(--kyra-border);
    border-radius: var(--p-radius-md);
    padding: 8px 10px;
    color: var(--kyra-text);
    font-family: var(--p-font);
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background 0.15s var(--p-ease), transform 0.12s var(--p-ease);
}

.kyra-prompt-row:hover { background: var(--kyra-prompt-hover-bg); }
.kyra-prompt-row:active { transform: scale(0.985); }

.kyra-prompt-row:focus-visible {
    outline: 2px solid var(--kyra-accent);
    outline-offset: 2px;
}

/* "Start a new conversation" affordance, shown once the cards are dismissed */
.kyra-back-link-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 2px;
}

.kyra-back-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--kyra-text-muted);
    font-family: var(--p-font);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.12s var(--p-ease);
}

.kyra-back-link:hover { color: var(--kyra-accent); }

/* Messages */
.kyra-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kyra-msg-row {
    display: flex;
}

.kyra-msg-row-user      { justify-content: flex-end; }
.kyra-msg-row-assistant { justify-content: flex-start; }

/* iMessage-style bubbles */
.kyra-msg-bubble {
    max-width: 85%;
    padding: 10px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.kyra-msg-user {
    background: var(--kyra-msg-user-bg);
    color: var(--kyra-msg-user-text);
    border-radius: 16px 16px 4px 16px;
}

.kyra-msg-assistant {
    background: var(--kyra-msg-assistant-bg);
    color: var(--kyra-msg-assistant-text);
    border-radius: 16px 16px 16px 4px;
}

.kyra-empty {
    text-align: center;
    color: var(--kyra-text-muted);
    margin-top: 60px;
}

.kyra-empty-title {
    font-weight: 600;
    color: var(--kyra-text);
    margin-top: 12px;
}

.kyra-empty-sub {
    font-size: 13px;
    margin-top: 4px;
}

.kyra-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--kyra-accent);
    font-size: 13px;
    font-weight: 500;
}

/* Composer — iOS pill input + circular send */
.kyra-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--kyra-border);
    background: var(--kyra-bar-bg);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.kyra-input {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid var(--kyra-border);
    background: var(--kyra-input-bg);
    color: var(--kyra-text);
    font-family: var(--p-font);
    font-size: 13.5px;
    transition: border-color 0.12s, box-shadow 0.12s;
}

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

.kyra-input:focus {
    outline: none;
    border-color: var(--kyra-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kyra-accent) 18%, transparent);
}

.kyra-input:disabled { opacity: 0.6; }

.kyra-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--kyra-accent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

.kyra-send-btn:hover:not(:disabled) { filter: brightness(1.08); }
.kyra-send-btn:active:not(:disabled) { transform: scale(0.94); }

.kyra-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Floating launcher (FAB) */
.kyra-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: var(--kyra-fab-gradient);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--kyra-accent) 40%, transparent);
    cursor: pointer;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kyra-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--kyra-accent) 50%, transparent);
}

.kyra-fab:active { transform: scale(0.95); }

.kyra-fab img {
    width: 46px;
    height: 46px;
    padding: 2px;
    object-fit: contain;
    pointer-events: none;
    filter: brightness(0) invert(1);
}

/* ── Collapsed rail ───────────────────────────────────────────
   Docks Kyra to a slim vertical strip on the right. Mirrors the left
   sidebar's width and colour so the shell reads symmetrically, and pushes
   page content instead of covering it (see html.kyra-rail-open below). */
.kyra-rail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--kyra-rail-width);
    background: var(--kyra-rail-bg);
    box-shadow: -2px 0 12px rgba(10, 22, 40, 0.18);
    z-index: 950;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
    gap: 14px;
    font-family: var(--p-font);
    animation: kyra-railIn 0.22s var(--p-ease);
}

/* Page shell shrinks by the rail width. `body` is the flex container that owns
   #p-sidebar and #p-main, so padding here narrows the content box and #p-main
   (flex: 1) reflows -- the rail never overlaps page content.
   The transition lives on `body`, not on the .kyra-rail-open rule: declaring it
   there would remove the transition along with the class, so closing the rail
   would snap instead of animating. */
body { transition: padding-right 0.22s var(--p-ease); }

/* Flagged on <html> rather than <body> so _Layout's inline head script can set it
   before first paint -- the widget itself only mounts after the CDN React/Babel
   round-trip, which would otherwise squeeze the page well after it is visible. */
html.kyra-rail-open body {
    padding-right: var(--kyra-rail-width);
}

/* Green Kyra chip — also the click target to expand back to the panel */
.kyra-rail-chip {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: var(--p-radius-md);
    border: none;
    padding: 0;
    background: var(--kyra-fab-gradient);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--kyra-accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.12s var(--p-ease);
}

.kyra-rail-chip:hover  { transform: scale(1.06); }
.kyra-rail-chip:active { transform: scale(0.95); }

.kyra-rail-chip img {
    width: 32px;
    height: 32px;
    padding: 2px;
    object-fit: contain;
    pointer-events: none;
    filter: brightness(0) invert(1);
}

/* Attention ring — same idle pulse the launcher uses */
.kyra-rail-chip::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 13px;
    border: 1.5px solid color-mix(in srgb, var(--kyra-accent) 40%, transparent);
    animation: kyra-pulseRing 2.5s ease-out infinite;
    pointer-events: none;
}

.kyra-rail-divider {
    width: 24px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.kyra-rail-btn {
    width: 36px;
    height: 34px;
    border-radius: var(--p-radius-md);
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.12s var(--p-ease), background 0.12s var(--p-ease);
}

.kyra-rail-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}

/* Expand sits at the bottom of the rail, close directly beneath it */
.kyra-rail-btn-expand { margin-top: auto; }

@media (max-width: 768px) {
    /* Narrow the rail rather than cancelling the push -- if the page kept its
       full width the fixed rail would cover the topbar controls and the right
       edge of the content. Overriding the token moves the rail and the push
       together so they stay in lockstep. */
    :root { --kyra-rail-width: 52px; }
}

@media (max-width: 640px) {
    .kyra-panel {
        width: 100vw !important;
        max-width: 100vw;
        top: 0;
        right: 0;
        bottom: 0;
        border: none;
        border-radius: 0;
    }
}


/* ─────────────────────────────────────────────────────────────
   25. Modals (for message, upload, sign modals - NOT stat popup)
───────────────────────────────────────────────────────────── */
.p-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.p-modal-overlay.open { 
    display: flex;
}

.p-modal-bg {
    position: absolute;
    inset: 0;
    background: var(--p-modal-overlay);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.p-modal {
    position: relative;
    background: var(--p-surface);
    border-radius: var(--p-radius-xl);
    max-width: 92vw;
    max-height: 85vh;
    overflow: auto;
    box-shadow: var(--p-shadow-xl);
    animation: p-modalIn 0.22s var(--p-ease);
    z-index: 1001;
}

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

.p-modal-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--p-text-strong);
    font-family: var(--p-font-heading);
}

.p-modal-body { 
    padding: 24px; 
}

.p-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--p-border);
}


/* ─────────────────────────────────────────────────────────────
   26. Forms & Inputs
───────────────────────────────────────────────────────────── */
.p-form-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--p-g500);
    margin-bottom: 6px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-family: var(--p-font);
}

.p-input,
.p-textarea,
.p-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--p-radius-md);
    border: 1.5px solid var(--p-border);
    font-family: var(--p-font);
    font-size: 14px;
    background: var(--p-g50);
    color: var(--p-text);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

/* iOS-style focus ring */
.p-input:focus,
.p-textarea:focus,
.p-select:focus {
    background: var(--p-surface);
    box-shadow: 0 0 0 3px var(--p-primary-glow);
}

.p-textarea { resize: vertical; }

.p-form-group { margin-bottom: 16px; }

.p-info-display {
    padding: 10px 14px;
    border-radius: var(--p-radius-md);
    background: var(--p-g50);
    font-family: var(--p-font);
    font-size: 14px;
    color: var(--p-text);
    border: 1.5px solid transparent;
}

.p-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--p-g500);
    margin-bottom: 6px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-family: var(--p-font);
}

.p-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--p-text);
    cursor: pointer;
    margin-bottom: 8px;
}

.p-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--p-border);
    cursor: pointer;
}

.p-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--p-text);
    cursor: pointer;
    margin-bottom: 8px;
}

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

.p-sig-area {
    height: 80px;
    border: 2px dashed var(--p-g300);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--p-g400);
    font-size: 13px;
    font-style: italic;
    background: var(--p-g50);
    margin-bottom: 16px;
    cursor: crosshair;
    transition: border-color 0.15s;
}

.p-sig-area:hover { border-color: var(--p-primary); }

/* Radio toggle pair */
.p-radio-group {
    display: flex;
    gap: 10px;
}

.p-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--p-radius-md);
    border: 1.5px solid var(--p-border);
    cursor: pointer;
    font-size: 13px;
    color: var(--p-text);
    transition: border-color 0.15s, background 0.15s;
}

.p-radio-label:has(input:checked) {
    border-color: var(--p-primary);
    background: var(--p-primary-muted);
    color: var(--p-primary);
}


/* ─────────────────────────────────────────────────────────────
   27. Upload Zone
───────────────────────────────────────────────────────────── */
.p-upload-zone {
    border: 2px dashed var(--p-g300);
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--p-g50);
    transition: all 0.15s ease;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.p-upload-zone:hover {
    border-color: var(--p-primary);
    background: var(--p-primary-muted);
}

.p-upload-zone p {
    font-size: 13px;
    font-weight: 600;
    color: var(--p-text-strong);
}


/* ─────────────────────────────────────────────────────────────
   28. Notification Panel
───────────────────────────────────────────────────────────── */
#p-notif-panel {
    position: absolute;
    top: 48px;
    right: 0;
    width: 380px;
    max-height: 480px;
    overflow: auto;
    background: var(--p-surface);
    border-radius: 16px;
    border: 1px solid var(--p-border);
    box-shadow: var(--p-shadow-lg);
    z-index: 999;
    display: none;
    animation: p-modalIn 0.2s ease;
}

#p-notif-panel.open { display: block; }

.p-notif-item {
    padding: 14px 20px;
    border-bottom: 1px solid var(--p-border);
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background 0.15s;
}

.p-notif-item:hover      { background: var(--p-g50); }
.p-notif-item.unread     { background: var(--p-primary-muted); }
.p-notif-item:last-child { border-bottom: none; }

.p-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   29. Search Overlay
───────────────────────────────────────────────────────────── */
#p-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
}

#p-search-overlay.open { display: flex; }

#p-search-box {
    position: relative;
    width: 560px;
    background: var(--p-surface);
    border-radius: var(--p-radius-xl);
    overflow: hidden;
    box-shadow: var(--p-shadow-xl);
    animation: p-modalIn 0.2s ease;
}

.p-search-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--p-border);
}

.p-search-input-row input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: var(--p-font);
    background: transparent;
    color: var(--p-text-strong);
}

.p-search-input-row kbd {
    padding: 2px 8px;
    border-radius: var(--p-radius-sm);
    background: var(--p-g100);
    font-size: 11px;
    color: var(--p-g500);
    font-family: var(--p-mono);
    border: 1px solid var(--p-border);
}

#p-search-results {
    max-height: 400px;
    overflow: auto;
    padding: 8px 0;
}

.p-search-result {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    transition: background 0.1s;
}

.p-search-result:hover { background: var(--p-primary-muted); }


/* ─────────────────────────────────────────────────────────────
   30. Profile Page
───────────────────────────────────────────────────────────── */
.p-profile-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.p-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--p-primary), var(--p-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
}

.p-info-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.p-info-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--p-g400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.p-info-value {
    color: var(--p-text-strong);
    font-weight: 500;
    font-size: 13px;
}


/* ─────────────────────────────────────────────────────────────
   31. Chart Utilities
───────────────────────────────────────────────────────────── */
.p-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--p-g500);
    align-items: center;
    margin-top: 10px;
}

.p-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.p-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   32. Responsive
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .p-stat-grid    { grid-template-columns: repeat(2, 1fr) !important; }
    .p-grid-2,
    .p-profile-grid { grid-template-columns: 1fr !important; }
    .p-grid-3       { grid-template-columns: repeat(2, 1fr) !important; }
    .p-grid-4       { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    .p-mobile-menu  { display: flex !important; }

    #p-sidebar {
        position: fixed;
        height: 100vh;
        left: calc(-1 * var(--p-sidebar-width));
        z-index: 998;
        transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #p-sidebar.mobile-open { left: 0; }

    .p-record-header { grid-template-columns: 1fr !important; gap: 8px; }

    #p-chat {
        width: calc(100vw - 32px);
        right: 16px;
        height: 480px;
    }
}

@media (max-width: 640px) {
    .p-stat-grid { grid-template-columns: 1fr !important; }
    .p-grid-3    { grid-template-columns: 1fr !important; }
    #p-search-box { width: calc(100vw - 32px); }
}