/* Sabzi Styles */
/* Cleaned: removed unused selectors 2026-02-27 */

html { height: 100%; zoom: 0.90; }
body {
    height: 100%;
    background: linear-gradient(180deg,
        var(--color-bg-gradient-start) 0%,
        var(--color-bg-gradient-mid) 50%,
        var(--color-bg-gradient-end) 100%
    ) !important;
}

* { box-sizing: border-box; }

/* ── Cursor rules ──
   default  → everything by default (standard arrow)
   pointer  → only clickable elements (buttons, links, interactive controls)
   text     → only editable fields (inputs, textareas, contenteditable)
   Do NOT set cursor:pointer on hover-only items like sidebar contacts,
   timeline entries, or routing queue items — they show popups, not click actions. */
body { cursor: default; }
button, [role="button"], a, summary, label[for],
select, .cursor-pointer { cursor: pointer; }
input, textarea, [contenteditable="true"] { cursor: text; }

/* ── Scroll performance: momentum + hints ── */
/* NOTE: Do NOT use transform: translateZ(0) here — it creates a new
   containing block that breaks position:fixed popups inside scrollable
   containers (timeline, contacts, routing queue hover cards).          */
.overflow-y-auto,
.overflow-y-scroll,
[style*="overflow-y: auto"],
[style*="overflow-y: scroll"] {
    -webkit-overflow-scrolling: touch;        /* momentum scrolling on iOS       */
    scroll-behavior: auto;                    /* keep programmatic scroll instant */
}

/* Forecast card & panel transitions */
.forecast-card {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
}

/* Hover state - subtle lift */
.forecast-card:not(.forecast-card-active):hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Active/pressed state - sunken effect */
.forecast-card-active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.25),
        inset 0 1px 2px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Accent glow for active cards */
.forecast-card-active[data-accent="emerald"] {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.25),
        inset 0 1px 2px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(52, 211, 153, 0.3);
}

.forecast-card-active[data-accent="blue"] {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.25),
        inset 0 1px 2px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(59, 130, 246, 0.3);
}

.forecast-card-active[data-accent="red"] {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.25),
        inset 0 1px 2px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(239, 68, 68, 0.3);
}

.forecast-panel {
    transition: all 0.2s ease;
    margin-top: -8px;
    padding-top: 0;
}

body {
    font-family: 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Selection styling adapts to theme */
::selection {
    background: rgba(var(--accent-color-rgb), 0.3);
    color: var(--color-text);
}

/* Light mode font smoothing for better appearance */
html[data-theme="light"] body {
    -webkit-font-smoothing: auto;
}

.nav-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    cursor: pointer;
}
.nav-item:hover { background: var(--color-overlay-hover); }
.nav-item:hover .nav-icon { color: var(--color-text); }
.nav-item.active {
    background: var(--color-overlay-active);
    border-left: 2px solid rgba(var(--accent-color-rgb), 0.6);
    padding-left: 8px; /* compensate for border */
}

/* === Nav button icon micro-interactions === */

/* All nav icons: smooth transform base */
.nav-item .nav-icon {
    transition: color 0.2s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* New Chat: rotate plus 90° on hover (visually becomes X), spring bounce */
.nav-item[data-action="startNewChat"] .nav-icon {
    transition: color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-item[data-action="startNewChat"]:hover .nav-icon {
    transform: rotate(90deg);
    color: var(--accent-color);
}
.nav-item[data-action="startNewChat"]:active .nav-icon {
    transform: rotate(90deg) scale(0.8);
    color: var(--accent-color);
    transition-duration: 0.08s;
}

/* Relationships: scale up on hover with spring, squish on click */
.nav-item[data-view="relationships"] .nav-icon {
    transition: color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-item[data-view="relationships"]:hover .nav-icon {
    transform: scale(1.22);
    color: var(--accent-color);
}
.nav-item[data-view="relationships"]:active .nav-icon {
    transform: scale(0.88);
    transition-duration: 0.08s;
}

/* My Team: horizontal 180° flip on hover, squish on click */
.nav-item[data-view="myteam"] .nav-icon {
    transition: color 0.2s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-item[data-view="myteam"]:hover .nav-icon {
    transform: perspective(200px) rotateY(180deg);
    color: var(--accent-color);
}
.nav-item[data-view="myteam"]:active .nav-icon {
    transform: perspective(200px) rotateY(180deg) scale(0.88);
    transition-duration: 0.08s;
}

/* General nav item press feedback */
.nav-item:active {
    background: var(--color-overlay-strong);
    transform: scale(0.97);
    transition-duration: 0.08s;
}

/* ── View scroll containers: contain layout to prevent child repaint jank ── */
.view > .overflow-y-auto {
    contain: layout style;               /* isolate reflows from children       */
}
/* Right sidebar scroll container must NOT use contain:layout — it breaks
   position:fixed popups (timeline hover, contact hover) by turning them
   into position:absolute relative to the contain ancestor. */
#right-sidebar .overflow-y-auto {
    contain: style;                      /* keep style containment, drop layout */
}

/* ── Collapsible sidebar ── */
aside[aria-label="Main navigation"] {
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
    overflow-y: auto;
}
aside.sidebar-collapsed {
    width: 56px !important;
}
/* Hide text labels, recents section, user details */
aside.sidebar-collapsed .sidebar-label,
aside.sidebar-collapsed .sidebar-hide-collapsed,
aside.sidebar-collapsed #inbox-badge {
    display: none !important;
}
/* Show spacer only when collapsed */
aside.sidebar-collapsed .sidebar-show-collapsed {
    display: flex !important;
}
/* Center icons when collapsed */
aside.sidebar-collapsed .nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
/* Avatar row — center avatar, hide text */
aside.sidebar-collapsed [data-view="settings"] {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
aside.sidebar-collapsed [data-view="settings"] .flex-col {
    display: none !important;
}
/* Logo area in collapsed */
aside.sidebar-collapsed .sidebar-logo-text {
    display: none !important;
}
aside.sidebar-collapsed .sidebar-logo-area {
    justify-content: center;
}
/* Active state: remove left border in collapsed */
aside.sidebar-collapsed .nav-item.active {
    padding-left: 0;
    border-left: none;
}
/* Tooltip on hover in collapsed mode */
aside.sidebar-collapsed .nav-item[aria-label]:hover::after {
    content: attr(aria-label);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    background: var(--color-bg);
    color: var(--color-text);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    box-shadow: var(--shadow-md);
}
aside.sidebar-collapsed .nav-item {
    position: relative;
}
/* Remove focus outline on sidebar toggle */
aside[aria-label="Main navigation"] button[data-action="toggleSidebar"]:focus {
    outline: none;
}

/* === Sidebar chevron button micro-interactions === */

/* Shared size & shape for all sidebar chevron buttons */
.sidebar-chevron-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Base: the SVG inside the button gets the transform */
.sidebar-chevron-btn svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.2s ease,
                filter 0.2s ease;
}

/* Hover: slide the chevron in the direction it points + accent color */
.sidebar-chevron-btn:hover svg {
    transform: translateX(-3px);
    color: var(--accent-color);
    filter: drop-shadow(0 0 4px rgba(var(--accent-color-rgb), 0.4));
}

/* Right-pointing chevrons slide right instead */
#sidebar-collapse-btn:hover svg {
    transform: translateX(3px);
}

/* Click: quick squish toward the direction of collapse */
.sidebar-chevron-btn:active svg {
    transform: translateX(-5px) scaleX(0.8);
    transition-duration: 0.08s;
}
#sidebar-collapse-btn:active svg {
    transform: translateX(5px) scaleX(0.8);
    transition-duration: 0.08s;
}

/* Whole button: subtle scale on press */
.sidebar-chevron-btn:active {
    transform: scale(0.9);
    transition: transform 0.08s ease;
}

/* Left sidebar toggle: slide right when collapsed (chevron points right) */
.sidebar-collapsed [data-action="toggleSidebar"]:hover svg {
    transform: translateX(3px);
}
.sidebar-collapsed [data-action="toggleSidebar"]:active svg {
    transform: translateX(5px) scaleX(0.8);
    transition-duration: 0.08s;
}

/* Kanban collapse: slide right (it collapses the panel rightward) */
#kanban-collapse-btn:hover svg {
    transform: translateX(3px);
}
#kanban-collapse-btn:active svg {
    transform: translateX(5px) scaleX(0.8);
    transition-duration: 0.08s;
}

/* Kanban expand: slide left (it expands the panel leftward) */
#sidebar-expand-kanban:hover svg {
    transform: translateX(-3px) scale(1.1);
}
#sidebar-expand-kanban:active svg {
    transform: translateX(-5px) scaleX(0.8);
    transition-duration: 0.08s;
}

/* Ribbon expand button: use smaller size to sit comfortably in the thin h-11 header */
#ribbon-expand-sidebar {
    width: 24px;
    height: 24px;
}
#ribbon-expand-sidebar:hover svg {
    transform: translateX(-3px);
}
#ribbon-expand-sidebar:active svg {
    transform: translateX(-5px) scaleX(0.8);
    transition-duration: 0.08s;
}

/* Sidebar scrollbar — hidden until hover, like Claude */
#left-chats::-webkit-scrollbar,
#left-accounts::-webkit-scrollbar {
    width: 4px;
}
#left-chats::-webkit-scrollbar-track,
#left-accounts::-webkit-scrollbar-track {
    background: transparent;
}
#left-chats::-webkit-scrollbar-thumb,
#left-accounts::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}
#left-chats:hover::-webkit-scrollbar-thumb,
#left-accounts:hover::-webkit-scrollbar-thumb {
    background: var(--color-overlay-strong);
}
#left-chats::-webkit-scrollbar-thumb:hover,
#left-accounts::-webkit-scrollbar-thumb:hover {
    background: var(--color-overlay-strongest);
}

/* Settings subpage navigation — matches main sidebar .nav-item styling */
.settings-nav-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    color: var(--color-text);
    cursor: pointer;
}
.settings-nav-item:hover {
    background: var(--color-overlay-hover);
}
.settings-nav-item.active {
    background: var(--color-overlay-active);
    border-left: 2px solid rgba(var(--accent-color-rgb), 0.6);
    padding-left: 8px; /* compensate for border */
}
.settings-nav-item:active {
    background: var(--color-overlay-strong);
    transform: scale(0.97);
    transition-duration: 0.08s;
}
/* Settings nav icon — base transitions and color */
.settings-nav-item .settings-nav-icon {
    transition: color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--color-muted);
}
.settings-nav-item:hover .settings-nav-icon {
    color: var(--accent-color);
}
.settings-nav-item.active .settings-nav-icon {
    color: var(--color-text);
}
.settings-nav-item.active:hover .settings-nav-icon {
    color: var(--accent-color);
}

/* ── Profile: stick figure raises arms on hover ── */
.settings-nav-item[data-settings-nav="profile"]:hover .settings-nav-icon {
    transform: none;
}
.settings-nav-item[data-settings-nav="profile"] .profile-arm-left,
.settings-nav-item[data-settings-nav="profile"] .profile-arm-right {
    opacity: 0;
    transition: opacity 0.15s ease, d 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-nav-item[data-settings-nav="profile"]:hover .profile-arm-left {
    opacity: 1;
    d: path("M8 14l-6 -6");
}
.settings-nav-item[data-settings-nav="profile"]:hover .profile-arm-right {
    opacity: 1;
    d: path("M16 14l6 -6");
}

/* ── Usage: ripple across 3 bars, left → mid → right ── */
.settings-nav-item[data-settings-nav="usage"]:hover .settings-nav-icon {
    transform: none; /* override generic scale */
}
.settings-nav-item[data-settings-nav="usage"] .usage-bar-1,
.settings-nav-item[data-settings-nav="usage"] .usage-bar-2,
.settings-nav-item[data-settings-nav="usage"] .usage-bar-3 {
    transform-origin: center bottom;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-nav-item[data-settings-nav="usage"]:hover .usage-bar-1 {
    animation: bar-ripple 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0s both;
}
.settings-nav-item[data-settings-nav="usage"]:hover .usage-bar-2 {
    animation: bar-ripple 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both;
}
.settings-nav-item[data-settings-nav="usage"]:hover .usage-bar-3 {
    animation: bar-ripple 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.16s both;
}
@keyframes bar-ripple {
    0%   { transform: scaleY(1); }
    40%  { transform: scaleY(1.35); }
    100% { transform: scaleY(1.12); }
}

/* ── Integrations: chain links pull apart then snap together ── */
.settings-nav-item[data-settings-nav="integrations"]:hover .settings-nav-icon {
    transform: none;
}
.settings-nav-item[data-settings-nav="integrations"] .chain-link-1,
.settings-nav-item[data-settings-nav="integrations"] .chain-link-2 {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-nav-item[data-settings-nav="integrations"]:hover .chain-link-1 {
    animation: chain-apart-1 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.settings-nav-item[data-settings-nav="integrations"]:hover .chain-link-2 {
    animation: chain-apart-2 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes chain-apart-1 {
    0%   { transform: translate(0, 0); }
    40%  { transform: translate(-2px, 2px); }
    100% { transform: translate(0, 0); }
}
@keyframes chain-apart-2 {
    0%   { transform: translate(0, 0); }
    40%  { transform: translate(2px, -2px); }
    100% { transform: translate(0, 0); }
}

/* ── Add Content: arrow pokes down into tray ── */
.settings-nav-item[data-settings-nav="dropbox"]:hover .settings-nav-icon {
    transform: none;
}
.settings-nav-item[data-settings-nav="dropbox"] .dropbox-arrow {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-nav-item[data-settings-nav="dropbox"]:hover .dropbox-arrow {
    animation: arrow-poke-down 0.35s ease-out forwards;
}
@keyframes arrow-poke-down {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(3px) scale(1.05); }
    65%  { transform: translateY(1px) scale(1.03); }
    100% { transform: translateY(2px) scale(1.05); }
}

/* ── Follow-Up Rules: paper plane runway takeoff ── */
.settings-nav-item[data-settings-nav="task-rules"] .settings-nav-icon {
    transition: color 0.2s ease;
}
.settings-nav-item[data-settings-nav="task-rules"]:hover .settings-nav-icon {
    animation: plane-takeoff 0.22s linear forwards;
}
.settings-nav-item[data-settings-nav="task-rules"]:active .settings-nav-icon {
    animation: none;
    transform: translate(2px, -2px) rotate(-12deg) scale(0.9);
    transition-duration: 0.08s;
}
@keyframes plane-takeoff {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    15%  { transform: translate(-3px, 0) rotate(0deg) scale(0.97); }
    35%  { transform: translate(-0.5px, 0) rotate(0deg) scale(1.0); }
    55%  { transform: translate(1.5px, 0) rotate(-2deg) scale(1.03); }
    75%  { transform: translate(2.5px, -1px) rotate(-7deg) scale(1.05); }
    100% { transform: translate(3px, -2.5px) rotate(-12deg) scale(1.07); }
}

/* ── Routing Rules: horizontal 360° flip ── */
.settings-nav-item[data-settings-nav="routing-rules"] .settings-nav-icon {
    transition: color 0.2s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-nav-item[data-settings-nav="routing-rules"]:hover .settings-nav-icon {
    transform: perspective(200px) rotateY(360deg);
}

/* ── Expansions: arrows expand outward with spring bounce ── */
.settings-nav-item[data-settings-nav="expansions"]:hover .settings-nav-icon {
    transform: scale(1.25);
}
.settings-nav-item[data-settings-nav="expansions"]:active .settings-nav-icon {
    transform: scale(0.9);
    transition-duration: 0.08s;
}

/* ── Usage: staggered bar ripple on hover ── */
.settings-nav-item[data-settings-nav="usage"]:hover .settings-nav-icon {
    transform: none;
}
.settings-nav-item[data-settings-nav="usage"] .usage-bar {
    transform-origin: center bottom;
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-nav-item[data-settings-nav="usage"] .usage-bar-1 { transition-delay: 0s; }
.settings-nav-item[data-settings-nav="usage"] .usage-bar-2 { transition-delay: 0s; }
.settings-nav-item[data-settings-nav="usage"] .usage-bar-3 { transition-delay: 0s; }

/* Default state: bars visible */
.settings-nav-item[data-settings-nav="usage"] .usage-bar {
    transform: scaleY(1);
}

/* On hover: bars collapse then spring back with staggered delay */
.settings-nav-item[data-settings-nav="usage"]:hover .usage-bar {
    animation: usage-bar-ripple 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.settings-nav-item[data-settings-nav="usage"]:hover .usage-bar-1 { animation-delay: 0s; }
.settings-nav-item[data-settings-nav="usage"]:hover .usage-bar-2 { animation-delay: 0.08s; }
.settings-nav-item[data-settings-nav="usage"]:hover .usage-bar-3 { animation-delay: 0.16s; }

@keyframes usage-bar-ripple {
    0%   { transform: scaleY(1); }
    30%  { transform: scaleY(0.15); }
    100% { transform: scaleY(1); }
}

/* Usage refresh button spin animation */
@keyframes usage-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.usage-refresh-btn:active {
    transform: scale(0.85);
    transition: transform 0.08s ease;
}
.usage-refresh-spinning {
    animation: usage-spin 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Pointer cursor for all interactive elements */
.sidebar-chevron-btn,
.briefing-header-btn,
.ribbon-usage-btn,
.usage-refresh-btn,
.action-btn,
.filter-pill-toggle,
[data-action],
[role="button"] {
    cursor: pointer;
}

.action-btn {
    transition: all 0.15s ease;
    border-radius: 10px;
}
.action-btn:hover {
    background: var(--color-border);
    border-color: var(--color-scrollbar);
}
.task-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

/* Sidebar action buttons — slide in from right over the date area */
.sidebar-slide-btns {
    opacity: 0;
    pointer-events: none;
    background: none;
    transform: translateX(50%);
    transition: opacity 200ms ease, transform 200ms ease;
}
.group:hover .sidebar-slide-btns {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
/* Expand/Collapse button for grouped action cards */
.group-expand-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 16px;
    padding: 0 6px;
    border-radius: 5px;
    border: none;
    background: rgba(128, 128, 128, 0.15);
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
}
.group-expand-btn:hover {
    background: rgba(128, 128, 128, 0.25);
}
/* Today: green */
.task-item[data-urgency="today"] .group-expand-btn {
    background: rgba(var(--accent-color-rgb), 0.15);
}
.task-item[data-urgency="today"] .group-expand-btn:hover {
    background: rgba(var(--accent-color-rgb), 0.25);
}
/* Overdue: red */
.task-item[data-urgency="overdue"] .group-expand-btn {
    background: rgba(239, 68, 68, 0.15);
}
.task-item[data-urgency="overdue"] .group-expand-btn:hover {
    background: rgba(239, 68, 68, 0.25);
}
html[data-theme="light"] .group-expand-btn {
    color: rgba(0, 0, 0, 0.7);
}
.group-expand-chevron {
    width: 10px;
    height: 10px;
    transition: transform 0.2s ease;
}

/* Expand-only state: lighter highlight when group is expanded but no chat is open */
.task-item.expanded {
    background: var(--color-overlay-hover);
    border-radius: 6px;
}
/* Badges row visibility is toggled via JS in toggleGroupExpand / startGroupBriefing */

/* Base: reserve space for left border but keep it invisible by default */
.task-item {
    border-left: 2px solid transparent;
    border-radius: 6px;
    padding-left: 2px;
}

/* --- Left border: only shown on expanded or active items --- */

/* Active/clicked single items: left border */
.task-item.active[data-urgency="overdue"] { border-left-color: #ef4444; }
.task-item.active[data-urgency="today"]   { border-left-color: var(--accent-color); }
.task-item.active[data-urgency="future"]  { border-left-color: var(--color-border); }
.task-item.active:not([data-urgency])     { border-left-color: var(--accent-color); }

/* Expanded group parent: left border */
.task-item.expanded[data-urgency="overdue"] { border-left-color: #ef4444; }
.task-item.expanded[data-urgency="today"]   { border-left-color: var(--accent-color); }
.task-item.expanded[data-urgency="future"]  { border-left-color: var(--color-border); }

/* Expanded group children: inherit urgency border from parent via wrapper context */
.task-item.active ~ .group-expanded-items .task-item[data-urgency="overdue"] { border-left-color: #ef4444; }
.task-item.active ~ .group-expanded-items .task-item[data-urgency="today"]   { border-left-color: var(--accent-color); }
.task-item.active ~ .group-expanded-items .task-item[data-urgency="future"]  { border-left-color: var(--color-border); }
.task-item.expanded ~ .group-expanded-items .task-item[data-urgency="overdue"] { border-left-color: #ef4444; }
.task-item.expanded ~ .group-expanded-items .task-item[data-urgency="today"]   { border-left-color: var(--accent-color); }
.task-item.expanded ~ .group-expanded-items .task-item[data-urgency="future"]  { border-left-color: var(--color-border); }

/* --- Active state: tinted background gradient --- */

.task-item.active {
    background: linear-gradient(
        135deg,
        var(--tint-accent-hi) 0%,
        var(--tint-accent-lo) 50%,
        var(--tint-accent-mid) 100%
    );
}
.task-item.active .action-icon svg {
    color: var(--accent-color);
}
/* Overdue active: red gradient instead of green */
.task-item[data-urgency="overdue"].active {
    background: linear-gradient(
        135deg,
        var(--tint-red-hi) 0%,
        var(--tint-red-lo) 50%,
        var(--tint-red-mid) 100%
    );
}
.task-item[data-urgency="overdue"].active .action-icon svg {
    color: #ef4444;
}
/* Shared hover */
.task-item:hover { background: var(--color-overlay-hover); }
.task-item[data-urgency="overdue"]:hover { background: var(--tint-red-hover); }
.task-item[data-urgency="today"]:hover { background: var(--tint-accent-hover); }
.task-item.active:hover { background: var(--tint-accent-hover-active); }
.task-item[data-urgency="overdue"].active:hover { background: var(--tint-red-hover-active); }
/* Shared hover: brighten ALL icons on hover */
.task-item:hover .action-icon svg { color: var(--color-text); }
.task-item[data-urgency="overdue"]:hover .action-icon svg { color: #ef4444; }
.task-item[data-urgency="today"]:hover .action-icon svg { color: var(--accent-color); }
/* Shared active: card press = scale + flash (matches nav-item:active) */
.task-item:active {
    background: var(--color-overlay-strong);
    transform: scale(0.97);
    transition-duration: 0.08s;
}

/* ── Action-item icon micro-interactions ── */

/* Base: all action icons get spring transition (matches nav-icon base) */
.task-item .action-icon svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.2s ease,
                filter 0.2s ease;
}
/* Shared hover: accent color + glow on all action icons */
.task-item:hover .action-icon svg {
    color: var(--accent-color);
    filter: drop-shadow(0 0 3px rgba(var(--accent-color-rgb), 0.35));
}

/* Reply: "poke" — jab left, bounce back, settle */
.task-item[data-action-type="reply"]:hover .action-icon svg {
    animation: reply-poke 0.35s ease-out forwards;
    transition: none;
}
@keyframes reply-poke {
    0%   { transform: translateX(0) scale(1); }
    40%  { transform: translateX(-4px) scale(1.1); }        /* jab left */
    65%  { transform: translateX(-1px) scale(1.08); }        /* bounce back */
    100% { transform: translateX(-2.5px) scale(1.1); }       /* settle */
}
.task-item[data-action-type="reply"]:active .action-icon svg {
    animation: none;
    transform: translateX(-5px) scale(0.9);
    transition-duration: 0.08s;
}

/* Follow-up: paper plane runway takeoff */
.task-item[data-action-type="followup"]:hover .action-icon svg {
    animation: plane-takeoff 0.22s linear forwards;
}
.task-item[data-action-type="followup"]:active .action-icon svg {
    animation: none;
    transform: translate(2px, -2px) rotate(-15deg) scale(0.9);
    transition-duration: 0.08s;
}

/* Task: checkmark visible at rest, pops from zero on hover */
.task-item .action-icon .task-circle {
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.2s ease,
                filter 0.2s ease;
}
.task-item .action-icon .task-check {
    transform-origin: center;
    transition: color 0.2s ease, filter 0.2s ease;
}
.task-item[data-action-type="task"]:hover .action-icon .task-circle {
    transform: scale(1.12);
}
.task-item[data-action-type="task"]:hover .action-icon .task-check {
    animation: check-pop 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes check-pop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.4); }
    100% { transform: scale(1.3); }
}
.task-item[data-action-type="task"]:active .action-icon .task-circle {
    transform: scale(0.92);
    transition-duration: 0.08s;
}
.task-item[data-action-type="task"]:active .action-icon .task-check {
    animation: none;
    transform: scale(1.1);
    opacity: 1;
    transition-duration: 0.08s;
}

/* New contact: person bounces up (like arriving) */
.task-item[data-action-type="route"]:hover .action-icon svg {
    transform: translateY(-2px) scale(1.2);
}
.task-item[data-action-type="route"]:active .action-icon svg {
    transform: translateY(1px) scale(0.85);
    transition-duration: 0.08s;
}

/* Meeting prep: calendar tilts (like flipping a page) */
.task-item[data-action-type="meeting_prep"]:hover .action-icon svg {
    transform: rotate(10deg) scale(1.2);
}
.task-item[data-action-type="meeting_prep"]:active .action-icon svg {
    transform: rotate(-5deg) scale(0.85);
    transition-duration: 0.08s;
}

/* Bundle: unfold — icon stretches open vertically like peeking inside */
.task-item[data-action-type="bundle"] .action-icon svg {
    transform-origin: center center;
    transition: transform 0.3s ease;
}
.task-item[data-action-type="bundle"]:hover .action-icon svg {
    animation: bundle-unfold 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes bundle-unfold {
    0%   { transform: scaleY(1) scaleX(1); }
    100% { transform: scaleY(1.4) scaleX(0.93); }
}
.task-item[data-action-type="bundle"]:active .action-icon svg {
    animation: none;
    transform: scaleY(0.85) scaleX(1.05);
    transition-duration: 0.08s;
}

/* Chat item styling */
.chat-item-wrapper {
    border-radius: 8px;
}
.chat-item-wrapper:hover {
    background: var(--color-overlay-subtle);
}
.chat-menu-btn {
    flex-shrink: 0;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.chat-menu-btn:hover {
    background: var(--color-overlay-active);
}
.chat-menu {
    animation: menuFadeIn 0.1s ease-out;
}

/* Right-click context menu — tooltip style with directional arrow */
.chat-context-menu {
    position: fixed;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 9999;
    padding: 4px 0;
    min-width: 150px;
    animation: menuFadeIn 0.12s ease-out;
}

/* Menu below click — arrow at top pointing UP (▲) */
.chat-context-menu--below::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: calc(var(--arrow-x, 50%) - 8px);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--color-border);
    pointer-events: none;
}
.chat-context-menu--below::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: calc(var(--arrow-x, 50%) - 7px);
    margin-bottom: -2px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--color-card);
    pointer-events: none;
}

/* Menu above click — arrow at bottom pointing DOWN (▼) */
.chat-context-menu--above::before {
    content: '';
    position: absolute;
    top: 100%;
    left: calc(var(--arrow-x, 50%) - 8px);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--color-border);
    pointer-events: none;
}
.chat-context-menu--above::after {
    content: '';
    position: absolute;
    top: 100%;
    left: calc(var(--arrow-x, 50%) - 7px);
    margin-top: -2px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--color-card);
    pointer-events: none;
}
.chat-menu-item {
    transition: all 0.15s ease;
}
.chat-menu-item:hover {
    background: var(--color-overlay-hover);
}

/* Keyboard-selected item in contact/relationship autocomplete dropdowns.
   Uses accent tint so it's clearly distinct from the page background in both light and dark mode. */
.autocomplete-selected {
    background: rgba(var(--accent-color-rgb), 0.12) !important;
}
.autocomplete-selected:hover {
    background: rgba(var(--accent-color-rgb), 0.18) !important;
}
@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.account-item {
    transition: all 0.15s ease;
    border-radius: 8px;
}
.account-item:hover { background: var(--color-overlay-hover); }
.chat-item {
    transition: all 0.15s ease;
    border-radius: 8px;
}
.chat-item:hover { background: var(--color-overlay-hover); }
.tab-toggle {
    transition: all 0.15s ease;
    border-radius: 6px;
}
.tab-toggle.active { background: var(--color-overlay-active); }
.search-result {
    transition: all 0.15s ease;
    border-radius: 8px;
}
.search-result:hover { background: var(--color-overlay-hover); }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-hover); }

/* Input styling */
input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.3); }

/* Yellow/amber backgrounds should have black text for contrast */
.bg-amber-400,
.bg-amber-500,
.bg-yellow-400,
.bg-yellow-500 {
    color: #1a1816 !important;
}

/* Accent color has white text (for dark accent colors like Persian Green) */
.bg-accent {
    color: #ffffff !important;
}

/* Subtle glow on cards */
.glow-card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
}

/* Contenteditable chat input */
.chat-input-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--color-muted);
    pointer-events: none;
}

/* Inline mention pill — borderless tinted highlight */
.inline-mention {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(var(--color-relationship-rgb), 0.12);
    border: none;
    color: var(--color-relationship);
    border-radius: 4px;
    padding: 0 5px;
    margin: 0 1px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    vertical-align: baseline;
    cursor: default;
    user-select: all;
    white-space: nowrap;
}

.inline-mention .mention-hash {
    opacity: 0.6;
    font-weight: 400;
}

.inline-mention .mention-remove {
    opacity: 0.5;
    font-size: 11px;
    cursor: pointer;
    margin-left: 1px;
    transition: opacity 0.15s;
}

.inline-mention:hover .mention-remove {
    opacity: 0.8;
}

.inline-mention:hover .mention-remove:hover {
    opacity: 1;
}

/* Contact mention pill (amber, borderless) */
.inline-mention.inline-mention-contact {
    background: rgba(245, 158, 11, 0.12);
    border: none;
    color: #F59E0B;
}

.inline-mention.inline-mention-contact .mention-at {
    opacity: 0.6;
    font-weight: 400;
}

/* Disabled inline mention pill — dimmed + strikethrough */
.inline-mention.mention-disabled {
    opacity: 0.35;
    text-decoration: line-through;
    text-decoration-color: var(--color-relationship);
    cursor: pointer;
}

.inline-mention.mention-disabled.inline-mention-contact {
    text-decoration-color: #F59E0B;
}

/* Hide the × remove button when pill is disabled (click the pill itself to restore) */
.inline-mention.mention-disabled .mention-remove {
    display: none;
}

/* Context pill hover now handled by shared .filter-pill-toggle:hover styles */

/* Timeline: glow on most recent event dot */
.timeline-dot-latest {
    box-shadow: 0 0 6px rgba(var(--accent-color-rgb), 0.5),
                0 0 12px rgba(var(--accent-color-rgb), 0.25);
}

/* Timeline hover popup — shows rich details when available */
.timeline-item {
    cursor: default;
    position: relative;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.timeline-item:hover {
    background: var(--color-overlay-subtle);
}
.timeline-item:hover .timeline-popup {
    opacity: 1;
    visibility: visible;
}
/* Shared base for sidebar hover popups (contacts, timeline) */
.sidebar-popup {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    right: 288px;
    overflow: visible;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
    cursor: default;
    z-index: 1000;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
/* Double-layer arrow: border outline */
.sidebar-popup::before {
    content: '';
    position: absolute;
    right: -10px;
    top: var(--arrow-top, 8px);
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid var(--color-border);
    pointer-events: none;
}
/* Double-layer arrow: fill (inset by 2px to show border edge) */
.sidebar-popup::after {
    content: '';
    position: absolute;
    right: -8px;
    top: var(--arrow-top, 8px);
    margin-top: 1px;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 11px solid var(--color-card);
    pointer-events: none;
}

/* Timeline popup — extends .sidebar-popup */
.timeline-popup {
    width: 360px;
    max-height: 80vh;
}
.timeline-popup-content {
    padding: 12px;
    max-height: calc(80vh - 24px);
    overflow-y: auto;
}

/* Contact hover popup — extends .sidebar-popup */
.contact-item {
    cursor: default;
    position: relative;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.contact-item:hover {
    background: var(--color-overlay-subtle);
}
.contact-item:hover .contact-popup {
    opacity: 1;
    visibility: visible;
}
.contact-popup {
    width: 280px;
    padding: 12px;
}

/* ==========================================
   Chat Message Styles - Claude-Inspired Design
   ========================================== */

/* Standalone chat view with texture */
.chat-view-textured {
    position: relative;
    background: linear-gradient(
        180deg,
        var(--color-bg-gradient-start) 0%,
        var(--color-bg-gradient-mid) 50%,
        var(--color-bg-gradient-end) 100%
    );
}

.chat-view-textured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: var(--noise-opacity);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    z-index: 0;
}

/* Scroll wrapper - full pane width so scrollbar hugs the right edge */
#chat-scroll-wrapper {
    /* scroll-behavior handled by JS — CSS smooth interferes with programmatic scrollTop */
    position: relative;
    z-index: 1;
    overflow-x: clip;
}

/* Messages container - centered column for readability */
#chat-messages {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 16px;
    padding-bottom: 45vh;
    max-width: 680px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Account detail view - padding handled by Tailwind p-6 class */

/* Chat bar container - wide, elevated floating input */
.chat-bar-container {
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    z-index: 250;  /* Always on top — above header (z-200) and shade (z-210) */
    background: linear-gradient(
        180deg,
        var(--color-bg-gradient-end) 0%,
        var(--color-bg-gradient-end) 100%
    );
}

/* Match the noise texture from the chat pane */
.chat-bar-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: var(--noise-opacity);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    z-index: 0;
}

/* Ensure chat bar content sits above the noise texture */
.chat-bar-container > * {
    position: relative;
    z-index: 1;
}

/* Elevated input container */
.chat-bar-container > div {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(var(--accent-color-rgb), 0.15);
    border-radius: 16px;
    transition: border-radius 0.25s ease;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    background: var(--color-card);
}

/* Inner content rows — horizontal padding so text width = 720px (matches message column).
   Box is 760px, padding 20px each side → 760 - 40 = 720px text area.
   ID selector wins over Tailwind px-3 without needing !important. */
#chat-input-wrapper > div:not([class*="absolute"]) {
    padding-left: 20px;
    padding-right: 20px;
}

/* (shade-open no longer straightens top corners — shade stops above chat bar with a gap) */

/* When only the empty state is shown, strip container padding so it doesn't scroll */
#chat-messages:has(> .chat-empty:only-child) {
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}

#chat-scroll-wrapper:has(.chat-empty) {
    overflow-y: hidden;
}

/* Empty state */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    color: var(--color-muted);
    /* 22vh minus header height (44px) so wordmark lands at same viewport position as full-screen pages */
    padding-top: calc(22vh - 44px);
    box-sizing: border-box;
    overflow: hidden;
}

.chat-empty-wordmark {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--accent-color);
    margin-bottom: 16px;
}

.chat-empty-loader {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-empty-greeting {
    font-size: 17px;
    color: var(--color-muted);
    margin-bottom: 24px;
}

/* Message container with animation */
.chat-message {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
}

/* Animation only on new messages (not during re-renders) */
.chat-message.new {
    animation: message-appear 0.25s ease-out;
}

.chat-message:first-child {
    padding-top: 12px;
}

.chat-message:last-child {
    padding-bottom: 12px;
}

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

/* User messages - right aligned, subtle bubble */
.chat-message-user {
    align-items: flex-end;
}

.chat-bubble-user {
    background: rgba(var(--accent-color-rgb), 0.12);
    color: var(--color-text);
    border: 1px solid var(--accent-color);
    border-radius: 18px 18px 4px 18px;
    padding: 10px 16px;
    max-width: 85%;
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Inline mentions inside user message bubbles — same style as chat bar inline mentions */
.user-msg-mention {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: inherit;
    font-weight: 500;
    white-space: nowrap;
}
.user-msg-mention-symbol {
    opacity: 0.6;
    font-weight: 400;
}
/* Relationship mentions: blue */
.user-msg-mention-rel {
    background: rgba(var(--color-relationship-rgb), 0.12);
    color: var(--color-relationship);
}
/* Contact mentions: amber */
.user-msg-mention-contact {
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
}

/* File attachment chips in user messages */
.file-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 6px;
}

.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(196, 149, 106, 0.12);
    border: 1px solid rgba(196, 149, 106, 0.2);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 13px;
    color: var(--accent-color);
    max-width: 200px;
}

.file-chip-icon {
    flex-shrink: 0;
    opacity: 0.7;
}

.file-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Assistant messages - left aligned, no bubble */
.chat-message-assistant {
    align-items: stretch;
    gap: 12px;
}

.chat-message-assistant.streaming {
    /* Subtle indication of streaming */
}

.chat-message-assistant.streaming .chat-content {
    /* Smooth height changes as text grows during streaming */
    transition: min-height 100ms ease-out;
}

/* Chat content area */
.chat-content {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Fix flex child overflow: min-width:0 prevents intrinsic sizing */
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    letter-spacing: 0;
}


/* Paragraphs */
.chat-p {
    margin: 0 0 12px 0;
}

.chat-p:last-child {
    margin-bottom: 0;
}

/* Streaming cursor - hidden */
.chat-cursor {
    display: none;
}

/* Legacy thinking dots (removed - replaced by .thinking-block in Feb 2026 UI refresh) */

/* ==========================================
   Thinking Block (timed, collapsible)
   ========================================== */

.thinking-block {
    padding: 2px 0;
    margin: 4px 0;
    font-size: 13px;
    font-style: italic;
    color: var(--color-muted);
    cursor: pointer;
}

.thinking-block-header {
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.thinking-block-chevron {
    width: 14px;
    height: 14px;
    transition: transform 200ms ease;
    flex-shrink: 0;
}

.thinking-block.expanded .thinking-block-chevron {
    transform: rotate(90deg);
}

.thinking-block-content {
    display: none;
    margin-top: 6px;
    padding-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-muted);
    max-height: 400px;
    overflow-y: auto;
}

.thinking-block.expanded .thinking-block-content {
    display: block;
}

/* Live thinking preview (streaming state) */
.thinking-block.thinking-live {
}

.thinking-live-spinner {
    width: 12px;
    height: 12px;
    position: relative;
    flex-shrink: 0;
}

.thinking-live-spinner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--color-overlay-strongest);
}

.thinking-live-spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: var(--accent-color, #c4956a);
    animation: activity-spin 0.7s linear infinite;
}

.thinking-preview-text {
    color: var(--color-muted);
    font-style: italic;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thinking-timer-badge {
    font-size: 12px;
    color: var(--color-muted);
    background: var(--color-overlay-hover);
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Insight block inner sections */
.insight-thinking-content {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-muted);
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
}

.insight-divider {
    height: 1px;
    background: var(--color-overlay-hover);
    margin: 8px 0;
}

.insight-steps .step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
    color: var(--color-muted);
}

/* Single-tool inline step (no collapsible wrapper needed) */
.step-item-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    margin: 4px 0;
    font-size: 13px;
    color: var(--color-muted);
}

.step-item-inline::before {
    display: none;
}

.step-item-inline .step-icon {
    opacity: 0.5;
    flex-shrink: 0;
}

.step-item-inline .step-label {
    color: var(--color-muted);
}

.insight-steps .step-icon {
    opacity: 0.5;
    flex-shrink: 0;
}

.insight-steps .step-label {
    color: var(--color-muted);
}

/* ==========================================
   Hover Timestamps
   ========================================== */

.chat-timestamp {
    opacity: 1;
    font-size: 12px;
    color: var(--color-muted);
    padding: 2px 0;
    pointer-events: none;
}

/* Static Sabzi plant icon at bottom of assistant messages */
.sabzi-message-icon {
    margin-top: 2px;
}

/* Catch-up badge in sidebar — today's gets a subtle green glow */



.chat-date-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100vw;
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 24px 8px;
    box-sizing: border-box;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-color);
    user-select: none;
    opacity: 0.75;
}

.chat-date-separator::before,
.chat-date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(var(--accent-color-rgb), 0.35);
}

/* Catch-up session divider (between appended briefing sessions) */
.catchup-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100vw;
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 6px 8px;
    box-sizing: border-box;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-color);
    user-select: none;
    opacity: 0.75;
}
.catchup-divider::before,
.catchup-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(var(--accent-color-rgb), 0.35);
}

/* ==========================================
   Code Block (container + header)
   ========================================== */

/* Code block container — uses ribbon color palette */
pre.chat-code-block {
    background: var(--shade-ribbon-bg);
    border: 1px solid var(--shade-ribbon-border);
    border-radius: 10px;
    overflow: hidden;
    margin: 8px 0;
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--shade-ribbon-border);
    font-size: 13px;
    background: var(--shade-ribbon-bg-hover);
}

.code-block-lang {
    color: var(--color-muted);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    text-transform: lowercase;
}

.code-block-copy {
    opacity: 0;
    background: none;
    border: 1px solid var(--color-overlay-strong);
    color: var(--color-muted);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 200ms ease, background 150ms ease;
}


.code-block-copy:hover {
    background: var(--color-overlay-active);
    color: var(--color-text);
}

.code-block-copy.copied {
    color: #6bba6b;
    border-color: rgba(107, 186, 107, 0.3);
}

/* ==========================================
   Message Blocks (copyable emails, Slack, etc.)
   ========================================== */

.message-block {
    background: var(--color-overlay-subtle);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin: 14px 0;
    /* CRITICAL: prevent horizontal overflow */
    max-width: 100%;
    overflow: hidden;
    overflow-x: hidden;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Accent color top border for all platforms */
.message-block { border-top: 2px solid var(--accent-color, #c4956a); }

/* Header: icon + platform label */
.mb-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px 0;
}

.mb-icon {
    display: flex;
    align-items: center;
    color: var(--color-muted);
    flex-shrink: 0;
}
.mb-icon svg { width: 13px; height: 13px; }

.mb-label {
    font-size: 12px;
    color: var(--color-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Subject row: label + text + copy */
.mb-copy-btn {
    background: none;
    border: 1px solid var(--color-overlay-active);
    color: var(--color-muted);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
    flex-shrink: 0;
}
.mb-copy-btn:hover { background: var(--color-overlay-hover); color: var(--color-text); border-color: var(--color-overlay-strongest); transform: scale(1.04); }
.mb-copy-btn.copied { color: #6bba6b; border-color: rgba(107, 186, 107, 0.3); }

/* Body */
.mb-body {
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text);
    /* Normal text wrapping - no pre-wrap to avoid overflow */
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    overflow: hidden;
}

.mb-body strong, .mb-body b {
    font-weight: 600;
    color: var(--color-text);
}

.mb-body .mb-li {
    display: block;
    padding-left: 16px;
    position: relative;
}
.mb-body .mb-li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--color-muted);
}

/* Footer: main copy button */
.mb-footer {
    padding: 0 14px 10px;
    display: flex;
    justify-content: flex-end;
}

/* mb-copy-main uses shared .mb-copy-btn styles */

/* ==========================================
   Draft Placeholder (streaming indicator)
   ========================================== */

.draft-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border: 1px dashed var(--color-border, #d0d0d0);
    border-radius: 8px;
    color: var(--color-muted, #666);
    font-size: 14px;
    margin: 8px 0;
}

.draft-placeholder-icon {
    font-size: 18px;
}

/* ==========================================
   Multi-Variant Message Blocks (A/B/C tabs)
   ========================================== */

/* Header with inline tabs */
.mv-block .mb-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
}

.mv-tabs {
    display: flex;
    gap: 5px;
    margin-left: 12px;
}

.mv-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--color-overlay-active);
    color: var(--color-muted);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    line-height: 1;
}

.mv-tab:hover {
    background: var(--color-overlay-hover);
    color: var(--color-text);
    border-color: var(--color-overlay-strongest);
}

.mv-tab-active {
    background: rgba(var(--accent-color-rgb, 76, 175, 80), 0.15);
    border-color: rgba(var(--accent-color-rgb, 76, 175, 80), 0.4);
    color: var(--color-text);
}

.mv-tab-active:hover {
    background: rgba(var(--accent-color-rgb, 76, 175, 80), 0.22);
    border-color: rgba(var(--accent-color-rgb, 76, 175, 80), 0.5);
    color: var(--color-text);
}

.mv-tab-tone {
    font-weight: 400;
    font-size: 10px;
    opacity: 0.65;
}

.mv-tab-active .mv-tab-tone {
    opacity: 0.9;
}

.mv-panel {
    animation: mv-fade-in 120ms ease;
}

@keyframes mv-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================
   Shared Chat Card Base (BEM)
   ========================================== */

/* --- Item-level shared styles (tasks + emails) --- */

.chat-card__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 10px 8px;
    overflow: hidden;
}

.chat-card__item {
    display: flex;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: 6px;
    border-left: 2px solid transparent;
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to));
    transition: background 0.15s ease;
    position: relative;
}

.chat-card__item:hover {
    background: var(--color-overlay-hover);
}

/* Border urgency modifiers */
.chat-card__item--border-none    { border-left-color: var(--color-border); }
.chat-card__item--border-today   { border-left-color: var(--accent-color); }
.chat-card__item--border-overdue { border-left-color: #ef4444; }

/* Selected state — item is actively set as chat context */
.chat-card__item.cc-item-selected {
    background: var(--tint-accent-hi);
    border-left-color: var(--accent-color);
}

/* Shared content area */
.chat-card__item-content {
    flex: 1;
    min-width: 0;
}

/* Shared meta row */
.chat-card__item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

/* Hover-reveal action buttons — slide in from right over bottom of card */
.chat-card__item-actions {
    position: absolute;
    right: 0;
    bottom: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding-right: 6px;
    background: none;
    opacity: 0;
    pointer-events: none;
    transform: translateX(50%);
    transition: opacity 200ms ease, transform 200ms ease;
}

.chat-card__item:hover .chat-card__item-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Hide date/meta on hover when actions appear */
.chat-card__item:hover .chat-card__hide-on-hover {
    opacity: 0;
    transition: opacity 0.15s;
}

/* Email card actions: positioned absolute within the meta row so they don't
   affect flex layout. The date uses margin-left: auto to sit at the right edge.
   On hover the date fades out and actions slide in from the right. */
/* Email actions override: vertically centered in meta row, same slide-in */
.ec-meta-row > .ec-actions {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) translateX(50%);
    padding-right: 0;
}
.chat-card__item:hover .ec-meta-row > .ec-actions {
    transform: translateY(-50%) translateX(0);
}

/* --- Block-level shared styles (compose, email actions, briefing) --- */

/* Block-level type modifiers — no top accent border */
.chat-card--task .mb-header,
.chat-card--email-action .mb-header {
    padding-bottom: 6px;
}
.chat-card--task,
.chat-card--email-action {
    border-top: none;
}

/* ==========================================
   Task Cards in Chat (```tasks code fence)
   ========================================== */

/* Task-specific overrides (base from .chat-card__item) */
.task-card-chat {
    gap: 8px;
    cursor: pointer;
}
.tc-task-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-muted);
}

/* Legacy border aliases — .chat-card__item--border-* is canonical */
.tc-border-today { border-left-color: var(--accent-color); }
.tc-border-overdue { border-left-color: #ef4444; }
.tc-border-none { border-left-color: var(--color-border); }

/* Task text */
.tc-task-text {
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-text);
    word-break: break-word;
}

/* Meta override: wider gap than shared base */
.tc-meta {
    gap: 8px;
}
.tc-account {
    font-size: 11px;
    color: var(--color-muted);
}
.tc-scenario {
    font-size: 10px;
    color: var(--color-muted);
    background: var(--color-overlay-hover);
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tc-due {
    font-size: 11px;
    margin-left: auto;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}
.tc-due-normal { color: var(--color-muted); }
.tc-due-soon { color: var(--color-muted); }
.tc-due-today { color: var(--accent-color); font-weight: 600; }
.tc-due-overdue { color: #ef4444; font-weight: 600; }

/* Relationship badge */
.tc-relationship {
    font-size: 11px;
    color: var(--color-muted);
}

/* ==========================================
   Email Action Cards (show-emails)
   ========================================== */

/* Email-specific overrides (base from .chat-card__item) */
.ec-list {
    padding: 8px 10px;
}

.email-card-chat {
    column-gap: 6px;
    row-gap: 1px;
    padding: 8px 10px;
    cursor: pointer;
    flex-wrap: wrap;
}

/* Legacy border aliases — .chat-card__item--border-* is canonical */
.ec-border-none    { border-left-color: var(--color-border); }
.ec-border-today   { border-left-color: var(--accent-color); }
.ec-border-overdue { border-left-color: #ef4444; }

/* Type icon (reply arrow vs send arrow) */
.ec-type-icon {
    flex-shrink: 0;
    color: var(--color-muted);
}

/* --- Standardized row layout (matches sidebar structure) --- */
.ec-content {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.ec-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ec-row + .ec-row {
    margin-top: 2px;
}

.ec-row--meta {
    margin-top: 4px;
}

.ec-icon-col {
    flex-shrink: 0;
    width: 14px;
    display: inline-flex;
    justify-content: center;
}

.ec-icon-col--badge {
    opacity: 0.6;
    margin-top: 2px;
    align-self: flex-start;
}

.ec-text-col {
    min-width: 0;
    flex: 1;
}

.ec-meta-row {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Email-specific content styles */
.ec-sender {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-subject {
    font-size: 12px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0;
}

.ec-snippet {
    font-size: 12px;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Relationship label — matches .tc-relationship styling */
.ec-relationship {
    font-size: 11px;
    color: var(--color-muted);
}

/* Meta override: no top margin */
.ec-meta {
    margin-top: 0;
}

.ec-account {
    font-size: 11px;
    color: var(--color-muted);
}

.ec-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
}

.ec-badge-reply {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

/* Sequence dots + label (follow-ups only) */
.ec-dots-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ec-followup-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.ec-dots-inline {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ec-seq-label {
    font-size: 10px;
    color: var(--color-muted);
    white-space: nowrap;
}

.ec-dots {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Date labels */
.ec-date            { font-size: 11px; flex-shrink: 0; transition: opacity 0.15s ease; margin-left: auto; }
.ec-date-normal     { color: var(--color-muted); }
.ec-date-today      { color: var(--accent-color); font-weight: 600; }
.ec-date-overdue    { color: #ef4444; font-weight: 600; }

/* Expanded state */
.ec-expanded {
    background: var(--color-overlay-subtle);
}

.ec-expand {
    width: 100%;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms ease, padding 200ms ease;
}

.ec-expanded .ec-expand {
    max-height: var(--ec-expand-max-h, 45vh);
    padding: 8px 10px 10px 10px;
    overflow-y: auto;
}

/* Subtle scrollbar for expanded thread (matches compose widget) */
.ec-expand::-webkit-scrollbar {
    width: 5px;
}
.ec-expand::-webkit-scrollbar-track {
    background: transparent;
}
.ec-expand::-webkit-scrollbar-thumb {
    background: var(--color-overlay-active);
    border-radius: 3px;
}
.ec-expand::-webkit-scrollbar-thumb:hover {
    background: var(--color-overlay-strongest);
}

.ec-loading {
    font-size: 12px;
    color: var(--color-muted);
    padding: 14px 0;
    text-align: center;
}

/* Reuse follow-up-dot and follow-up-connector styles from existing CSS (already defined) */

/* ==========================================
   Landing Page — Primary "Catch me up" Button
   Matches header pill styling but larger for landing page prominence.
   ========================================== */

.catchup-landing-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--accent-color);
    background: var(--accent-color);
    color: #fff;
    box-shadow: 0 0 12px rgba(var(--accent-color-rgb), 0.4),
                0 0 24px rgba(var(--accent-color-rgb), 0.2),
                0 0 4px rgba(var(--accent-color-rgb), 0.5);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 8px;
}
.catchup-landing-btn:hover {
    background: var(--accent-color);
    filter: brightness(1.15);
    transform: scale(1.06);
    box-shadow: 0 0 16px rgba(var(--accent-color-rgb), 0.5),
                0 0 30px rgba(var(--accent-color-rgb), 0.25),
                0 0 5px rgba(var(--accent-color-rgb), 0.6);
}
.catchup-landing-btn:active {
    transform: scale(0.96);
    filter: brightness(0.9);
    transition-duration: 0.08s;
}

.catchup-landing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--accent-color);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}

/* ==========================================
   Activity Indicator (Claude-style bottom animation)
   ========================================== */

.activity-indicator {
    display: none;
    padding: 8px 0;
    margin-top: 4px;
}

.activity-indicator.visible {
    display: block;
}

.activity-indicator-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

/* Old circular spinner — replaced by SabziLoader canvas */
.activity-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-overlay-strongest);
    border-top-color: var(--accent-color, #c4956a);
    animation: activity-spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* SabziLoader container for animated sprout icon */
.activity-loader-container {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sabzi-loader-canvas {
    display: block;
}

.activity-label {
    font-size: 13px;
    color: var(--color-muted);
    transition: opacity 150ms ease-in-out;
}

.activity-label.fading {
    opacity: 0;
}


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


/* ==========================================
   Scroll-to-Bottom Pill
   ========================================== */

.scroll-to-bottom-pill {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-md);
}

.scroll-to-bottom-pill.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.scroll-to-bottom-pill:hover {
    color: var(--color-text);
    border-color: var(--color-border);
    background: var(--color-hover);
}

/* ==========================================
   Briefing Card (Action Item Opening Message)
   ========================================== */

/* --- Briefing Type Tag (subtle label at top of opening message) --- */
.briefing-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-bottom: 8px;
    border-radius: 5px;
    background: rgba(204, 120, 50, 0.08);
    border: 1px solid rgba(204, 120, 50, 0.15);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-color);
}

.briefing-type-tag-icon {
    display: flex;
    align-items: center;
    color: var(--accent-color);
}
.briefing-type-tag-icon svg {
    width: 13px;
    height: 13px;
}

/* --- Briefing Draft Block (uses message-block base styling) --- */
.briefing-draft-block {
    margin-top: 12px;
}

.briefing-draft-section {
    padding: 10px 14px;
}

.briefing-draft-section:not(:last-child) {
    border-bottom: 1px solid var(--color-overlay-hover);
}

.briefing-draft-section h4 {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    margin: 0 0 6px 0;
}

.briefing-draft-section p {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.55;
    margin: 0;
}

.briefing-draft-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
}

.briefing-draft-list li {
    font-size: 13.5px;
    color: var(--color-text);
    line-height: 1.5;
    padding: 3px 0 3px 16px;
    position: relative;
}

.briefing-draft-list li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--color-muted);
}

.briefing-draft-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--color-muted);
    border-top: 1px solid var(--color-overlay-hover);
}

/* Urgency badges */
.briefing-urgency {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.briefing-urgency-low {
    background: rgba(76, 175, 80, 0.12);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.briefing-urgency-medium {
    background: rgba(255, 183, 77, 0.12);
    color: #ffb74d;
    border: 1px solid rgba(255, 183, 77, 0.2);
}

.briefing-urgency-high {
    background: rgba(239, 83, 80, 0.12);
    color: #ef5350;
    border: 1px solid rgba(239, 83, 80, 0.2);
}

/* Recommendation badges */
.briefing-rec-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(100, 181, 246, 0.12);
    color: #90caf9;
    border: 1px solid rgba(100, 181, 246, 0.2);
}

/* --- Briefing Action Buttons --- */
.briefing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 4px;
    margin-top: 8px;
}

.briefing-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--color-overlay-strong);
    background: var(--color-overlay-hover);
    color: var(--color-text);
    transition: all 0.15s ease;
    line-height: 1;
    white-space: nowrap;
}

.briefing-action-btn:hover {
    background: var(--color-overlay-active);
    border-color: var(--color-overlay-strongest);
    color: var(--color-text);
}

.briefing-action-btn:active {
    transform: scale(0.97);
}

.briefing-action-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.briefing-action-primary {
    background: rgba(100, 181, 246, 0.12);
    border-color: rgba(100, 181, 246, 0.25);
    color: #90caf9;
    font-weight: 600;
}

.briefing-action-primary:hover {
    background: rgba(100, 181, 246, 0.2);
    border-color: rgba(100, 181, 246, 0.35);
    color: #bbdefb;
}

.briefing-action-btn.briefing-action-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Briefing Confirmation --- */
.briefing-confirmation {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: #81c784;
    border-top: 1px solid var(--color-overlay-hover);
}

.briefing-confirmation svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================
   Steps Block (Claude-style collapsible)
   ========================================== */

.chat-blocks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* View steps toggle - minimal text link style */
.steps-block {
    cursor: pointer;
    margin: 4px 0;
}

.steps-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-muted);
    font-size: 14px;
    padding: 4px 0;
}

.steps-header:hover {
    color: var(--color-text);
}

.steps-label {
    color: inherit;
}

.steps-count {
    background: var(--color-overlay-active);
    color: var(--color-muted);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 10px;
}

.steps-chevron {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.steps-block:not(.collapsed) .steps-chevron {
    transform: rotate(90deg);
}

/* Steps list - vertical timeline */
.steps-list {
    display: none;
    margin-top: 8px;
    margin-left: 4px;
    padding-left: 16px;
    border-left: 2px solid var(--color-overlay-active);
}

.steps-block:not(.collapsed) .steps-list {
    display: block;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    position: relative;
}

.step-item::before {
    content: '';
    position: absolute;
    left: -21px;
    top: 12px;
    width: 8px;
    height: 8px;
    background: var(--color-border);
    border: 2px solid var(--color-muted);
    border-radius: 50%;
}

.step-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-muted);
}

.step-icon svg {
    display: block;
}

.step-label {
    font-size: 14px;
    color: var(--color-muted);
}

/* Thinking step - expandable content */
.step-thinking .step-content {
    flex: 1;
}

.step-thinking .step-label {
    color: var(--color-muted);
    font-weight: 500;
    margin-bottom: 4px;
}

.step-thinking-content {
    font-size: 13px;
    color: var(--color-muted);
    line-height: 1.5;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--color-overlay-subtle);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.step-thinking-content p {
    margin: 0 0 8px 0;
}

.step-thinking-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================
   Markdown Styling in Chat
   ========================================== */

.chat-h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 10px 0;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.chat-h2:first-child {
    margin-top: 0;
}

.chat-h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 16px 0 8px 0;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.chat-h3:first-child {
    margin-top: 0;
}

.chat-h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 14px 0 6px 0;
    color: var(--color-text);
}

.chat-h4:first-child {
    margin-top: 0;
}

.chat-h5 {
    font-size: 15px;
    font-weight: 600;
    margin: 12px 0 4px 0;
    color: var(--color-text);
}

.chat-h5:first-child {
    margin-top: 0;
}

.chat-ul {
    margin: 10px 0;
    padding-left: 20px;
    list-style-type: disc;
}

.chat-ol {
    margin: 10px 0;
    padding-left: 20px;
    list-style-type: decimal;
}

.chat-li {
    margin: 4px 0;
    line-height: 1.6;
}



.chat-inline-code {
    background: var(--color-overlay-active);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 14px;
}

/* Code inside a code block — no extra background, just inherit from the pre */
pre.chat-code-block .chat-inline-code {
    background: transparent;
    padding: 12px;
    border-radius: 0;
    display: block;
    overflow-x: auto;
    color: var(--shade-ribbon-text);
}

/* Strong and emphasis */
.chat-content strong {
    font-weight: 600;
    color: var(--color-text);
}

.chat-content em {
    font-style: italic;
    color: var(--color-muted);
}

/* Strikethrough */
.chat-del {
    text-decoration: line-through;
    color: var(--color-muted);
}

/* Links */
.chat-link {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.chat-link:hover {
    border-bottom-color: var(--accent-color);
}

/* Blockquotes */


/* Horizontal rules */
.chat-hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 16px 0;
}

/* Tables */
.chat-table-wrapper {
    overflow-x: auto;
    margin: 12px 0;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.chat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.chat-thead {
    background: var(--color-overlay-subtle, rgba(0,0,0,0.15));
}

.chat-th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.chat-td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
}

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

.chat-tr:hover .chat-td {
    background: var(--color-overlay-subtle);
}

/* Task lists (checkboxes) */
.chat-task-item {
    list-style: none;
    margin-left: -20px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}




.chat-task-text {
    flex: 1;
}

/* Priority indicators in tables (emoji circles) */
.chat-td:first-child {
    white-space: nowrap;
}

/* ==========================================
   Custom border colors for status indicators
   ========================================== */
.border-l-red-500 {
    border-left-color: #ef4444;
}
.border-l-amber-400 {
    border-left-color: var(--accent-color);
}
.border-l-emerald-500 {
    border-left-color: #10b981;
}
.border-l-claude-muted {
    border-left-color: var(--color-muted);
}

/* Stage badge hover tooltip */
#header-stage-badge {
    position: relative;
}
#header-stage-badge .badge-tooltip {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    white-space: nowrap;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--color-muted);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 1000;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}
#header-stage-badge .badge-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 12px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--color-border);
}
#header-stage-badge .badge-tooltip::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 13px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--color-card);
}
#header-stage-badge:hover .badge-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Header briefing button + hover peek popup */
/* Accent pill — the only accent-colored element in the header bar */
/* Default state: solid green with glow (draws attention when NOT on catch-up page) */
.briefing-header-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--accent-color);
    background: var(--accent-color);
    box-shadow: 0 0 12px rgba(var(--accent-color-rgb), 0.4),
                0 0 24px rgba(var(--accent-color-rgb), 0.2),
                0 0 4px rgba(var(--accent-color-rgb), 0.5);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.briefing-header-btn:hover {
    background: var(--accent-color);
    filter: brightness(1.15);
    transform: scale(1.06);
    box-shadow: 0 0 16px rgba(var(--accent-color-rgb), 0.5),
                0 0 30px rgba(var(--accent-color-rgb), 0.25),
                0 0 5px rgba(var(--accent-color-rgb), 0.6);
}
.briefing-header-btn:active {
    transform: scale(0.96);
    filter: brightness(0.9);
    transition-duration: 0.08s;
}

/* Faded state when already on the catch-up page (user is already here) */
.briefing-header-btn.briefing-active {
    background: rgba(var(--accent-color-rgb), 0.08);
    border-color: transparent;
    color: var(--color-text);
    box-shadow: none;
    filter: none;
}
.briefing-header-btn.briefing-active:hover {
    background: rgba(var(--accent-color-rgb), 0.16);
    border-color: var(--accent-color);
    filter: none;
    box-shadow: 0 0 12px rgba(var(--accent-color-rgb), 0.25),
                0 0 4px rgba(var(--accent-color-rgb), 0.15);
}
.briefing-header-btn.briefing-active:active {
    background: rgba(var(--accent-color-rgb), 0.22);
    filter: none;
    box-shadow: none;
}

.briefing-header-label {
    font-weight: 500;
}
/* Sidebar version: same button shape, but text matches Contacts/Timeline headers */
#sidebar-briefing-btn {
    font-size: 14px;
    color: #fff;
}
#sidebar-briefing-btn.briefing-active {
    color: var(--color-text);
}
#sidebar-briefing-btn .briefing-header-label {
    font-size: 14px;
    font-weight: 500;
}
.briefing-header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--accent-color);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}
/* When the parent is in faded/active state, use a subtler badge */
.briefing-header-btn.briefing-active .briefing-header-badge {
    background: var(--accent-color);
    color: #fff;
}
.briefing-header-badge.hidden {
    display: none;
}
.briefing-header-btn:hover .briefing-peek-popup {
    opacity: 1;
    visibility: visible;
}
.briefing-peek-popup {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 260px;
    overflow: visible;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    z-index: 1000;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}
.briefing-peek-popup::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 16px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--color-border);
}
.briefing-peek-popup::after {
    content: '';
    position: absolute;
    top: -6px;
    right: 17px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--color-card);
}

/* ==========================================
   Settings Pill Button — shared spring animation for all settings pills
   ========================================== */

.settings-pill-btn {
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    box-shadow: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}
.settings-pill-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.04);
}
.settings-pill-btn:active {
    transform: scale(0.96);
    filter: brightness(0.9);
    transition-duration: 0.08s;
}
.settings-pill-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* Green filled variant (Connect, Sync, Save) */
.settings-pill-btn-accent {
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: #fff;
}

/* Outlined variant (Onboarding, Disconnect) */
.settings-pill-btn-outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.settings-pill-btn-outline:hover {
    border-color: var(--color-muted);
}

/* Disconnect variant — turns red on hover */
.settings-pill-btn-danger {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
}
.settings-pill-btn-danger:hover {
    color: #ef4444;
    border-color: #ef4444;
    filter: none;
}

/* Legacy alias */
.settings-save-btn {
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--accent-color);
    box-shadow: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-save-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.04);
}
.settings-save-btn:active {
    transform: scale(0.96);
    filter: brightness(0.9);
    transition-duration: 0.08s;
}

/* ==========================================
   Theme Selector Buttons (Profile > Appearance)
   Uses actual chat-page background colors:
   Light = #f0ebe4 (gradient-mid)  Dark = #26211f (gradient-mid)
   ========================================== */

/* Shared base — matches catch-up button: pill shape, 12px/500, spring easing */
.theme-btn {
    position: relative;
    padding: 5px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    overflow: hidden;
}

/* Light button — chat page light bg, subtle dark border for visibility */
.theme-btn-light {
    background: #efeadf;
    color: #2a2520;
    border-color: #bfb9a8;
}
.theme-btn-light:hover {
    color: var(--accent-color);
    transform: scale(1.06);
    box-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.3),
                0 0 20px rgba(var(--accent-color-rgb), 0.15);
}
.theme-btn-light:active {
    transform: scale(0.96);
    transition-duration: 0.08s;
}
.theme-btn-light.theme-active {
    color: var(--accent-color);
    border-color: transparent;
    box-shadow: 0 0 12px rgba(var(--accent-color-rgb), 0.4),
                0 0 24px rgba(var(--accent-color-rgb), 0.2),
                0 0 4px rgba(var(--accent-color-rgb), 0.5);
}

/* Dark button — chat page dark bg */
.theme-btn-dark {
    background: #26211f;
    color: #e8e4e0;
    border-color: #3d3836;
}
.theme-btn-dark:hover {
    color: var(--accent-color);
    transform: scale(1.06);
    box-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.3),
                0 0 20px rgba(var(--accent-color-rgb), 0.15);
}
.theme-btn-dark:active {
    transform: scale(0.96);
    transition-duration: 0.08s;
}
.theme-btn-dark.theme-active {
    color: var(--accent-color);
    border-color: transparent;
    box-shadow: 0 0 12px rgba(var(--accent-color-rgb), 0.4),
                0 0 24px rgba(var(--accent-color-rgb), 0.2),
                0 0 4px rgba(var(--accent-color-rgb), 0.5);
}

/* System button — slight ellipse, split bg, centered split dot */
.theme-btn-system {
    position: relative;
    background: linear-gradient(to right, #f0ebe4 50%, #26211f 50%);
    border: none;
    outline: 1px solid #8a8280;
    padding: 0;
    width: 32px;
    height: 30px;
    border-radius: 9999px;
}
.system-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: linear-gradient(to right, #26211f 50%, #f0ebe4 50%);
    transition: background 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
.theme-btn-system:hover {
    transform: scale(1.06);
    box-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.3),
                0 0 20px rgba(var(--accent-color-rgb), 0.15);
}
.theme-btn-system:hover .system-dot {
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(var(--accent-color-rgb), 0.5),
                0 0 12px rgba(var(--accent-color-rgb), 0.3);
}
.theme-btn-system:active {
    transform: scale(0.96);
    transition-duration: 0.08s;
}
.theme-btn-system.theme-active {
    border-color: transparent;
    box-shadow: 0 0 12px rgba(var(--accent-color-rgb), 0.4),
                0 0 24px rgba(var(--accent-color-rgb), 0.2),
                0 0 4px rgba(var(--accent-color-rgb), 0.5);
}
.theme-btn-system.theme-active .system-dot {
    background: var(--accent-color);
    box-shadow: 0 0 6px rgba(var(--accent-color-rgb), 0.5),
                0 0 12px rgba(var(--accent-color-rgb), 0.3);
}

/* ==========================================
   Ribbon Usage Button + Dropdown
   Muted pill next to the Catch-up button
   ========================================== */

.ribbon-usage-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ribbon-usage-btn:hover {
    color: var(--color-text);
    background: var(--color-overlay-hover);
}
.ribbon-usage-btn:active {
    background: var(--color-overlay-strong);
    transform: scale(0.97);
    transition-duration: 0.08s;
}
.ribbon-usage-btn.ribbon-usage-open {
    color: var(--color-text);
    background: var(--color-overlay-hover);
}
.ribbon-usage-chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.ribbon-usage-btn.ribbon-usage-open .ribbon-usage-chevron {
    transform: rotate(180deg);
}

.ribbon-usage-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
    padding: 12px;
    padding-bottom: 0;
    z-index: 300;
    animation: ribbon-usage-fadein 0.15s ease;
    overflow: hidden;
}
/* Footer stretches edge-to-edge inside the usage popup */
.ribbon-usage-popup .ribbon-popover-footer {
    margin: 0 -12px;
    border-radius: 0 0 12px 12px;
}
.ribbon-usage-popup.hidden {
    display: none;
}
.ribbon-usage-popup::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 18px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--color-border);
}
.ribbon-usage-popup::after {
    content: '';
    position: absolute;
    top: -6px;
    right: 19px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--color-card);
}

.ribbon-usage-card {
    padding: 8px 0;
}
.ribbon-usage-card + .ribbon-usage-card {
    border-top: 1px solid var(--color-border);
}

@keyframes ribbon-usage-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------
   Ribbon: New Contacts / Routing Queue
   ------------------------------------------ */
.ribbon-routing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent-color);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}
.ribbon-routing-badge.hidden { display: none; }

.ribbon-routing-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-height: 70vh;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
    z-index: 300;
    animation: ribbon-usage-fadein 0.15s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ribbon-routing-popup.hidden { display: none; }

/* Arrow */
.ribbon-routing-popup::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 18px;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--color-border);
}
.ribbon-routing-popup::after {
    content: '';
    position: absolute;
    top: -6px;
    right: 19px;
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--color-card);
}

/* Shared footer for ribbon popovers (Usage + New Contacts) */
.ribbon-popover-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-top: 1px solid var(--color-border);
    margin-top: 1px;
    font-size: 10px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s ease;
}
.ribbon-popover-footer:hover {
    background: var(--color-overlay-hover);
}
.ribbon-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ribbon-routing-list {
    overflow-y: auto;
    max-height: calc(70vh - 40px);
    padding: 6px;
}

/* (ribbon-routing-sync merged into shared .ribbon-popover-footer) */

/* Open state for routing button (mirrors usage pattern) */
.ribbon-usage-btn.ribbon-routing-open {
    color: var(--color-text);
    background: var(--color-overlay-hover);
}
.ribbon-usage-btn.ribbon-routing-open .ribbon-routing-chevron {
    transform: rotate(180deg);
}

/* Routing domain items inside the popover — reuse existing classes but
   override the popup positioning since we're in a dropdown now */
.ribbon-routing-popup .routing-popup {
    /* Hide the sidebar-style hover popups inside the ribbon popover;
       the popover itself gives enough context */
    display: none !important;
}

/* ==========================================
   Chat Overlay Panel (Window Shade Effect)
   Rises from the chat bar at the bottom
   ========================================== */

.chat-overlay {
    position: absolute;
    bottom: 0;
    top: 0;  /* Extend to the very top of the screen, above the header bar */
    left: 0;
    right: 0;
    /* Match the main chat view background exactly (.chat-view-textured) */
    background: linear-gradient(
        180deg,
        var(--color-bg-gradient-start) 0%,
        var(--color-bg-gradient-mid) 50%,
        var(--color-bg-gradient-end) 100%
    );
    border: none;
    border-radius: 0;
    overflow: hidden;
    z-index: 210;  /* Above header bar (z-200) to cover it; chat bar (z-250) stays on top */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease;
    display: flex;
    flex-direction: column;
}

/* Noise texture overlay for chat — matches .chat-view-textured::before */
.chat-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: var(--noise-opacity);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    z-index: 0;
}

/* Hidden state - uses shade-hidden to avoid Tailwind's .hidden (display:none !important) */
.chat-overlay.shade-hidden {
    visibility: hidden;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

/* Collapsed state - peek the header just above the chat bar */
.chat-overlay.collapsed {
    transform: translateY(calc(100% - 44px));  /* Peek the 44px ribbon above the overlay bottom edge */
    opacity: 1;
    pointer-events: auto;
    z-index: 140;  /* Below chat bar (z-250) so header peeks from behind it */
    cursor: pointer;
}

/* Flip collapse chevron upward when collapsed/peeking */
.chat-overlay.collapsed .chat-overlay-collapse-btn svg {
    transform: rotate(180deg);
}

/* Expanded state */
.chat-overlay:not(.collapsed):not(.shade-hidden) {
    transform: translateY(0);
    opacity: 1;
}

/* Collapse button in header — muted, part of the shade handle */
.chat-overlay-collapse-btn {
    padding: 5px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-muted);
    transition: all 0.15s ease;
}

.chat-overlay-collapse-btn svg {
    transition: transform 0.25s ease;
}

.chat-overlay-collapse-btn:hover {
    background: var(--color-overlay-hover);
    color: var(--color-text);
}

/* Dismiss (X) button in header */
.chat-overlay-dismiss-btn {
    padding: 5px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-muted);
    transition: all 0.15s ease;
}

.chat-overlay-dismiss-btn:hover {
    background: var(--color-overlay-hover);
    color: var(--color-text);
}

/* Chat messages area — matches #chat-messages layout */
.chat-overlay-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 40px 120px 40px;
    max-width: 760px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* scroll-behavior handled by JS — CSS smooth interferes with programmatic scrollTop */
    position: relative;
    z-index: 1;
    overflow-x: clip;  /* Match #chat-scroll-wrapper */
}

/* Ensure proper scrollbar styling inside overlay */
.chat-overlay-content::-webkit-scrollbar {
    width: 6px;
}

.chat-overlay-content::-webkit-scrollbar-track {
    background: transparent;
}

.chat-overlay-content::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar);
    border-radius: 3px;
}

.chat-overlay-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-hover);
}

/* Chat overlay header — clickable ribbon that collapses/expands the shade */
.chat-overlay-header {
    flex-shrink: 0;
    height: 44px;
    background: var(--shade-ribbon-bg);
    border-bottom: 1px solid var(--shade-ribbon-border);
    position: relative;
    z-index: 2;
    border-radius: 16px 16px 0 0;  /* Rounded top, matching chat bar's rounded-2xl */
    transition: background 0.15s ease;
}

.chat-overlay-header:hover {
    background: var(--shade-ribbon-bg-hover);
}

/* Title text in the ribbon — uses its own color for good contrast */
.shade-header-title {
    color: var(--shade-ribbon-text);
}

.chat-account-badge-header {
    display: flex;
    align-items: center;
}

.chat-account-badge-header.hidden {
    display: none;
}

/* Account badge in sidebar chat list */

/* ==========================================
   Type Filter Segmented Toolbar
   ========================================== */

.type-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--color-overlay-hover);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

html[data-theme="light"] .type-filter-toolbar {
    background: var(--color-overlay-hover);
    border-color: var(--color-border);
}

/* Each button inside the toolbar — inherits filter-pill-toggle animations
   but overrides shape to be rounded-rect instead of fully rounded */
.type-filter-btn {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 10px;
    border-radius: 5px;
    border: none !important;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    min-width: 0;
}

/* ON state: muted tinted background */
.type-filter-btn.filter-pill-on {
    background: rgba(128, 128, 128, 0.15);
}
.type-filter-btn.filter-pill-on .type-pill-label,
.type-filter-btn.filter-pill-on .filter-toggle-icon {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Light mode: slightly darker white text for readability */
html[data-theme="light"] .type-filter-btn.filter-pill-on .type-pill-label,
html[data-theme="light"] .type-filter-btn.filter-pill-on .filter-toggle-icon {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* OFF state: visible but clearly inactive — override generic .filter-pill-toggle.filter-pill-off opacity */
.type-filter-btn.filter-pill-off {
    background: transparent;
    opacity: 0.7;
}
.type-filter-btn.filter-pill-off .type-pill-label,
.type-filter-btn.filter-pill-off .filter-toggle-icon {
    color: var(--color-text) !important;
    opacity: 1;
}

/* Override the default filter-pill-toggle hover scale for toolbar buttons —
   use a subtler bg-based hover instead since they're packed tighter */
.type-filter-btn.filter-pill-toggle:hover {
    transform: none;
    background: rgba(128, 128, 128, 0.10);
}
.type-filter-btn.filter-pill-on.filter-pill-toggle:hover {
    background: rgba(128, 128, 128, 0.20);
}

/* Click: keep the squish */
.type-filter-btn.filter-pill-toggle:active {
    transform: scale(0.95);
}

/* ==========================================
   Relationship Scope Indicator
   (Sidebar filters + "Talking about:" context)
   ========================================== */

/* Row container: label + chip side by side */
.scope-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
}

.scope-row .scope-prefix {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.025em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* The tinted chip (just the # + name + ×) */
.relationship-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    background: none;
    border: none;
    font-size: 13px;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.relationship-scope-chip .scope-symbol {
    color: var(--color-text);
    font-weight: 700;
    font-size: 13px;
}

.relationship-scope-chip .scope-name {
    color: var(--color-text);
    font-weight: 600;
    font-size: 13px;
    position: relative;
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.relationship-scope-chip .filter-toggle-icon {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
}
.relationship-scope-chip .filter-toggle-icon:hover {
    opacity: 1;
    color: var(--color-text);
}

/* Click: squish */
.relationship-scope-chip.filter-pill-toggle:active {
    transform: scale(0.95);
}

/* OFF state: dimmed (matches context pill off state) */
.relationship-scope-chip.filter-pill-off {
    opacity: 0.5;
}

/* (Strikethrough animation moved to shared .pill-strike-label system below) */

/* Task filter row */
#task-filter-row {
    padding-bottom: 4px;
}

/* ==========================================
   Filter Toggle Animation (X to + rotation)
   ========================================== */

/* The toggle icon wrapper - ensures proper rotation */
.filter-toggle-icon {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 11px;
    line-height: 1;
}

/* When filter is OFF (pill is dimmed), rotate X 45° to become + */
.filter-pill-off .filter-toggle-icon {
    transform: rotate(45deg);
}

/* Feature row toggle icon (integration enable/disable) */
.feature-toggle-icon {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15px;
    line-height: 1;
}

/* When feature is OFF, rotate X 45° to become + */
.feature-toggle-off .feature-toggle-icon {
    transform: rotate(45deg);
}

.feature-toggle-on .feature-toggle-icon {
    transform: rotate(0deg);
}

/* Rule row: disabled state dims only the text spans, not the buttons */
.rule-row.rule-disabled > span {
    opacity: 0.4;
    transition: opacity 0.25s ease;
}

.rule-remove-btn {
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.rule-row.rule-disabled .rule-remove-btn {
    opacity: 1;
}

/* Filter pill states */
.filter-pill-toggle {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover: slight lift */
.filter-pill-toggle:hover {
    transform: scale(1.05);
}

/* Click: squish press-in */
.filter-pill-toggle:active {
    transform: scale(0.92);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.08s ease;
}

/* OFF state - dimmed with plus icon */
.filter-pill-toggle.filter-pill-off {
    opacity: 0.5;
}

.filter-pill-toggle.filter-pill-off:hover {
    opacity: 0.75;
}

/* ON state - full opacity with X icon */
.filter-pill-toggle.filter-pill-on {
    opacity: 1;
}

/* Forecast filter - cyan accent */
.filter-pill-toggle.forecast-filter {
    border-color: rgba(34, 211, 238, 0.3);
}

.filter-pill-toggle.forecast-filter.filter-pill-on {
    border-color: rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.1);
}

.filter-pill-toggle.forecast-filter:hover {
    border-color: rgba(34, 211, 238, 0.6);
}

.filter-pill-toggle.forecast-filter .filter-toggle-icon {
    color: #22d3ee;
}

/* Forecast filter label text */
.filter-pill-toggle.forecast-filter #chats-filter-label {
    color: #22d3ee;
}

/* Context pills in the chat bar share the same filter-pill-toggle base styles.
   No overrides needed — hover scale, active press, strikethrough, and ×/+ rotation
   are all inherited from .filter-pill-toggle and .filter-pill-on/.filter-pill-off. */

/* ==========================================
   Shared Strikethrough Animation System
   Used by: sidebar scope chips, chat bar context pills, type filter pills
   All toggleable pills use .filter-pill-toggle as parent + .pill-strike-label on the text
   ========================================== */

/* The label that gets the strikethrough — apply to any pill's text element */
.pill-strike-label {
    position: relative;
    display: inline-block;
}

/* The strikethrough line — starts hidden (scaleX 0) */
.filter-pill-toggle .pill-strike-label::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* OFF: show strikethrough */
.filter-pill-toggle.filter-pill-off .pill-strike-label::after {
    transform: scaleX(1);
}

/* ON + hover: preview strikethrough (left to right) */
.filter-pill-toggle.filter-pill-on:hover .pill-strike-label::after {
    transform: scaleX(1);
}

/* OFF + hover: un-strike to preview re-enable (right to left) */
.filter-pill-toggle.filter-pill-off:hover .pill-strike-label::after {
    transform: scaleX(0);
    transform-origin: right center;
}

/* Just-toggled-on guard: suppress hover strikethrough preview while cursor
   is still over the pill from the click that toggled it on */
.filter-pill-toggle.just-toggled-on:hover .pill-strike-label::after {
    transform: scaleX(0) !important;
}

/* Just-toggled-off guard: keep strikethrough visible while cursor
   is still over the pill from the click that toggled it off */
.filter-pill-toggle.just-toggled-off:hover .pill-strike-label::after {
    transform: scaleX(1) !important;
}

/* No strikethrough for static/non-toggleable pills */
.filter-pill-toggle.no-strikethrough .pill-strike-label::after {
    display: none;
}

/* Context pills in chat bar — subtler hover since they're wider than sidebar pills */
.filter-pill-toggle.context-pill:hover {
    transform: scale(1.02);
}
.filter-pill-toggle.context-pill:active {
    transform: scale(0.97);
}

/* Static pills — no scale hover */
.filter-pill-toggle.no-strikethrough:hover {
    transform: none;
}

/* Context pill icons — override the hardcoded text-claude-muted from getChannelIcon */
.context-pill-icon svg {
    color: inherit !important;
}
.context-pill-icon svg.text-claude-muted {
    color: inherit !important;
}

/* ==========================================
   Checkmark Draw Animation (task icon hover)
   The stroke draws from start to finish like a hand-drawn tick.
   Used on .action-icon SVGs and context pill task icons.
   ========================================== */

/* Task checkmark path — set up for stroke animation */
.action-icon svg path[d="M5 13l4 4L19 7"],
.context-pill-icon svg path[d="M5 13l4 4L19 7"] {
    stroke-dasharray: 28;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* On hover: draw the checkmark from nothing to full */
.task-item:hover .action-icon svg path[d="M5 13l4 4L19 7"],
.filter-pill-toggle.filter-pill-on:hover .context-pill-icon svg path[d="M5 13l4 4L19 7"] {
    animation: drawCheck 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Slight scale-up on the icon container during hover (matches other pill animations) */
.task-item:hover .action-icon,
.filter-pill-toggle.filter-pill-on:hover .context-pill-icon {
    transform: scale(1.15);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-icon,
.context-pill-icon {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes drawCheck {
    0% {
        stroke-dashoffset: 28;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* ==========================================
   Add Content View Styles
   ========================================== */

/* Drop zone styles - now a chat-like container */
.dropbox-input-container {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Dot grid texture for drop zone feel */
.dropbox-input-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 16px 16px;
    pointer-events: none;
    z-index: 0;
}

/* Ensure content sits above the texture */
.dropbox-input-container > * {
    position: relative;
    z-index: 1;
}

.dropbox-input-container:focus-within {
    border-color: var(--accent-color);
}

/* Slightly brighter dots on hover */
.dropbox-input-container:hover::before {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

/* ==========================================
   Send/Process Button Styles (Accent Color)
   ========================================== */

/* Base state: faded accent */
.send-btn {
    color: rgba(var(--accent-color-rgb), 0.4);
    transition: all 0.2s ease;
}

/* Disabled state: even more faded */
.send-btn:disabled {
    color: rgba(var(--accent-color-rgb), 0.25);
    cursor: not-allowed;
}

/* Enabled state: full accent */
.send-btn:not(:disabled) {
    color: var(--accent-color);
}

/* Hover when enabled: glow effect */
.send-btn:not(:disabled):hover {
    color: var(--accent-color);
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(var(--accent-color-rgb), 0.5));
}

/* Active/click state */
.send-btn:not(:disabled):active {
    transform: scale(0.95);
}

/* Queued message state — subtle indicator at bottom center of input wrapper */
.has-queued-message {
    border-color: rgba(var(--accent-color-rgb), 0.4) !important;
}
.has-queued-message::after {
    content: 'Message queued — will send when response completes';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--accent-color);
    white-space: nowrap;
    pointer-events: none;
    animation: queuedPulse 2s ease-in-out infinite;
}
@keyframes queuedPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

/* Drag overlay animation */
#dropbox-drag-overlay {
    animation: dragOverlayFadeIn 0.15s ease-out;
}

@keyframes dragOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Attachment pills */
.dropbox-attachment-pill {
    flex-shrink: 0;
}

/* Processing animation for status badge */
@keyframes processing-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: processing-pulse 1.5s ease-in-out infinite;
}

/* Jobs table hover row */
#dropbox-jobs-table tr:hover td {
    background: var(--color-overlay-subtle);
}

/* ==========================================
   Content Type Radio Buttons
   ========================================== */

.content-type-radio {
    cursor: pointer;
}

.content-type-label {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    transition: all 0.15s ease;
}

.content-type-label:hover {
    border-color: var(--color-scrollbar-hover);
    color: var(--color-text);
}

.content-type-radio input:checked + .content-type-label {
    background: rgba(var(--accent-color-rgb), 0.15);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ==========================================
   Smart Account Search Dropdown
   ========================================== */

#dropbox-account-dropdown {
    animation: dropdownFadeIn 0.15s ease-out;
}

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













/* Fuzzy match highlighting */

/* No results state */

/* Create account link in dropdown */



/* ==========================================
   Forecast Page Styles
   ========================================== */

/* Progress bar animation */
#view-forecast .h-1\.5 > div {
    transition: width 0.7s ease-out;
}

/* Details/summary toggle - clean up native markers */
#view-forecast details summary {
    list-style: none;
}

#view-forecast details summary::-webkit-details-marker {
    display: none;
}

#view-forecast details summary::after {
    content: '›';
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.2s ease;
}

#view-forecast details[open] summary::after {
    transform: rotate(90deg);
}

/* ==========================================
   Blocker Matrix Table Styling
   ========================================== */

/* Matrix table - Notion-style */


/* Sticky header for scrollable tables - darker bg to match sidebar */

/* Footer row - match header darker bg */

/* Frozen columns: Deal (col 1) and ARR (col 2) stay visible while scrolling */


/* Frozen header cells - match header bg */

/* Frozen body cells - match page bg */

/* Even row frozen columns match zebra stripe */

/* Hover state for frozen columns */

/* Footer frozen columns - match header darker bg */

/* Zebra striping for better readability */

/* Checkmark cell hover effect */

/* Footer row styling */

/* Deal name column - prevent wrapping */

/* ARR column alignment */

/* Responsive: scroll horizontally if too many blockers */

/* Legacy card styles (keeping for potential future use) */




.deal-row:hover svg:last-child {
    opacity: 1 !important;
}


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

/* ==========================================
   Deal Card Styles (Forecast Pipeline)
   ========================================== */

.deal-card {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

/* Hover state - subtle lift (matches forecast cards) */
.deal-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
    border-color: var(--color-overlay-strong) !important;
}

/* Active/pressed state - sunken effect (matches forecast cards) */
.deal-card:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.25),
        inset 0 1px 2px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
    background: rgba(0, 0, 0, 0.08) !important;
}

/* MEDDPICC dots animation on hover */
.deal-card:hover [title*="MEDDPICC"] > div {
    transform: scale(1.2);
    transition: transform 0.15s ease;
}

/* Engagement emoji subtle animation */
.deal-card [title*="Last engagement"] span:first-child,
.deal-card [title*="contacts"] span:first-child,
.deal-card [title*="tasks"] span:first-child {
    transition: transform 0.15s ease;
}

.deal-card:hover [title*="Last engagement"] span:first-child {
    transform: scale(1.15);
}

/* Risk badge pulse for critical */
.deal-card .bg-red-500\/20 {
    animation: risk-pulse 2s ease-in-out infinite;
}

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

/* Urgency badge styles */
.deal-card [class*="d to close"] {
    font-weight: 500;
}

/* Next step highlight on hover */
.deal-card:hover .bg-claude-sidebar\/50 {
    background: var(--color-overlay-hover);
}

/* Footer icons */
.deal-card svg {
    flex-shrink: 0;
}

/* ==========================================
   Routing Queue Domain Items
   ========================================== */

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Onboarding highlight for New Contacts section — full green border + gentle pulse */
@keyframes onboarding-pulse {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(var(--accent-color-rgb), 0.25);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(var(--accent-color-rgb), 0.45),
                    0 0 8px rgba(var(--accent-color-rgb), 0.12);
    }
}

@keyframes onboarding-icon-pulse {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(var(--accent-color-rgb), 0.2)); }
    50%      { filter: drop-shadow(0 0 5px rgba(var(--accent-color-rgb), 0.4)); }
}

#ribbon-routing-btn.onboarding-highlight {
    animation: onboarding-pulse 2.5s ease-in-out infinite;
    border-radius: 8px;
}

/* Onboarding highlight for Action Items panel — full green border + gentle pulse (Phase 4) */
#tasks-list.onboarding-action-highlight {
    border: 1.5px solid var(--accent-color);
    border-radius: 8px;
    background: rgba(var(--accent-color-rgb), 0.04);
    animation: onboarding-pulse 2.5s ease-in-out infinite;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Onboarding highlight for "Catch me up" button in ribbon — just adds pulse to existing pill */
#ribbon-briefing-btn.onboarding-highlight {
    animation: onboarding-pulse 2.5s ease-in-out infinite;
}

/* During onboarding, hide the resolve/snooze slide-in buttons so the user
   can only click the card itself (not accidentally dismiss/snooze). */
#tasks-list.onboarding-action-highlight .sidebar-slide-btns {
    display: none !important;
}

/* ------------------------------------------
   Sidebar: Upcoming divider (collapsible)
   ------------------------------------------ */
.sidebar-upcoming-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px 4px;
    gap: 8px;
}
.sidebar-upcoming-divider::before,
.sidebar-upcoming-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.sidebar-upcoming-chevron {
    width: 10px;
    height: 10px;
    transition: transform 0.2s ease;
}
/* Static (non-clickable) label for empty upcoming */
.sidebar-upcoming-static {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
/* Expanded state: divider line with centered text + upward chevron */
.sidebar-upcoming-line-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.sidebar-upcoming-clickable {
    cursor: pointer;
}
.sidebar-upcoming-line-label {
    padding: 3px 8px;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-upcoming-clickable:hover .sidebar-upcoming-line-label {
    color: var(--color-text);
    background: var(--color-overlay-hover);
}

/* Routing domain item - matches timeline/contact pattern */
.routing-domain-item {
    position: relative;
    cursor: default;
}

.routing-domain-main {
    position: relative;
}

.routing-domain-main:hover {
    background: var(--color-overlay-subtle);
}

/* Routing popup - appears to RIGHT of left sidebar */
.routing-popup {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    right: 288px;
    width: 280px;
    max-height: 60vh;
    overflow: visible;
    background: var(--color-card);
    border-radius: 8px 0 0 8px;
    filter: drop-shadow(-4px 4px 12px rgba(0, 0, 0, 0.15));
    cursor: default;
    z-index: 1000;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.routing-popup-content {
    padding: 12px;
    max-height: calc(60vh - 24px);
    overflow-y: auto;
}

/* Arrow pointing right toward the right sidebar */
.routing-popup::after {
    content: '';
    position: absolute;
    top: var(--arrow-top, 12px);
    right: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--color-card);
}

/* Show popup on hover - popup is sibling of routing-domain-main, both inside routing-domain-item */
.routing-domain-item:hover > .routing-popup {
    opacity: 1;
    visibility: visible;
}

/* Individual email in popup */
.routing-popup-email:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Routing action buttons - overflow visible for tooltips */
.routing-actions {
    overflow: visible;
}

.routing-domain-main {
    overflow: hidden;
}

/* Lift hovered item above others so tooltip isn't clipped */
.routing-domain-item:hover {
    z-index: 10;
    position: relative;
}

/* Fast tooltips for routing action buttons - JS-based, appended to body */
.routing-tooltip {
    position: fixed;
    transform: translate(-50%, -100%);
    padding: 4px 8px;
    background: var(--color-card);
    color: var(--color-text);
    font-size: 11px;
    white-space: nowrap;
    border-radius: 4px;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.1s ease;
}

.routing-tooltip.visible {
    opacity: 1;
}

/* Arrow pointing down (default — tooltip above button).
   --arrow-left is set by JS when the tooltip is clamped to a viewport edge,
   so the arrow still points at the trigger button. */
.routing-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--color-card);
}

/* Below variant — tooltip sits below the button, arrow points up */
.routing-tooltip--below {
    transform: translate(-50%, 8px);
}
.routing-tooltip--below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--color-card);
}

/* ==========================================
   Unassigned Email Hover Preview - Z-Index Fix
   ========================================== */

/*
 * The routing popup uses position: fixed with z-index: 1000, but the main
 * content area has position: relative which creates a stacking context.
 * Since the left sidebar comes before main in DOM order, elements in main
 * can appear above the popup despite lower z-index values.
 *
 * Solution: Give the left sidebar a z-index to create a stacking context
 * that's explicitly higher than the chat bar area.
 */

/* Left sidebar needs position and z-index to establish proper stacking context */
#app-container > aside:first-of-type {
    position: relative;
    z-index: 160;  /* Higher than chat-bar-container's z-index: 150 */
}

/* Right sidebar needs stacking context above chat overlay (z-210) AND chat bar (z-250)
   so hover popups (which are children of sidebar) aren't clipped by stacking contexts */
#right-sidebar {
    position: relative;
    z-index: 260;  /* Above chat bar (z-250) — sidebar occupies separate screen region so no visual overlap */
}

/* The routing popup itself - ensure it's above everything when visible */
.routing-popup {
    z-index: 1000 !important;
}

/* =========================================== */
/* Phase 5: Task Board UI                      */
/* =========================================== */

/* Task board swim lanes */
.task-lane {
    min-width: 0;
    flex: 1;
}

.task-lane-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-bg); /* claude-bg */
    will-change: transform;          /* GPU-promote sticky headers to avoid scroll repaint */
    backface-visibility: hidden;
}

/* Task card with slide-in action buttons */
.task-card {
    transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.task-card:hover {
    box-shadow: var(--shadow-md);
}

/* Follow-up sequence dots */
.follow-up-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.15s ease;
}
/* Sent: solid filled circle with subtle green glow */
.follow-up-dot.sent {
    background: var(--accent-color);
    box-shadow: 0 0 5px rgba(74, 222, 128, 0.35);
}
/* Due but not yet sent: outlined ring with subtle green glow */
.follow-up-dot.due {
    background: transparent;
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 5px rgba(74, 222, 128, 0.35);
}
/* Overdue: red ring with subtle red glow */
.follow-up-dot.overdue {
    background: transparent;
    border: 2px solid #ef4444;
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.4);
}
/* Future: gray outline, no glow */
.follow-up-dot.future {
    background: transparent;
    border: 1.5px solid var(--color-border);
}

/* Follow-up connector line */
.follow-up-connector {
    height: 2px;
    width: 24px;
}
/* Line after a sent node, or leading into the current node */
.follow-up-connector.active {
    background: var(--accent-color);
}
/* Line leading to a future node */
.follow-up-connector.inactive {
    background: var(--color-border);
}
/* Overdue: entire visualization turns red */
.follow-up-connector.overdue-line {
    background: #ef4444;
}

/* Section collapse toggle */
/* Reply-needed inbox row actions (hover to reveal) */
.reply-needed-row .task-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.reply-needed-row:hover .task-actions {
    opacity: 1;
}

/* Task action pill — uses standard filter-pill styling via Tailwind classes */

/* Snooze dropdown */
.snooze-dropdown {
    animation: menuFadeIn 0.1s ease-out;
}

/* Date input color-scheme — ensures native date picker controls are visible in both themes */
html[data-theme="dark"] .color-scheme-aware { color-scheme: dark; }
html[data-theme="light"] .color-scheme-aware { color-scheme: light; }

/* Chat bar drop target highlight for drag-to-chat */
.chat-drop-active > div {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 1px var(--accent-color), 0 0 12px rgba(var(--accent-color-rgb), 0.15);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Left sidebar default width (desktop) */
.sidebar-left {
    width: 18rem; /* same as Tailwind w-72, matches right sidebar */
}

/* Mobile hamburger — hidden by default, shown at mobile breakpoint */
.mobile-sidebar-toggle {
    display: none;
}

/* ===================== RESPONSIVE DESIGN ===================== */

/* ---- Tablet & below: both sidebars become fixed overlays ---- */
@media (max-width: 1024px) {
    /* Left sidebar → hidden fixed overlay (same pattern as right)
       Double selector to override aside.sidebar-collapsed { width: 56px !important } */
    aside[aria-label="Main navigation"],
    aside[aria-label="Main navigation"].sidebar-collapsed {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 300;
        width: 0 !important;
        min-width: 0 !important;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        border-right: none;
        transition: width 200ms ease, opacity 200ms ease;
    }
    aside[aria-label="Main navigation"].visible {
        width: 280px !important;
        opacity: 1;
        pointer-events: auto;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }
    /* Restore full sidebar content when open */
    aside[aria-label="Main navigation"].visible .nav-item span:not(.ml-auto),
    aside[aria-label="Main navigation"].visible button span:not(.ml-auto) {
        display: inline !important;
    }
    aside[aria-label="Main navigation"].visible .nav-item,
    aside[aria-label="Main navigation"].visible button {
        justify-content: flex-start;
    }
    aside[aria-label="Main navigation"].visible .sidebar-hide-collapsed {
        display: flex;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
    aside[aria-label="Main navigation"].visible .sidebar-logo-text {
        display: inline !important;
    }
    aside[aria-label="Main navigation"].visible .px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    aside[aria-label="Main navigation"].visible .px-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    aside[aria-label="Main navigation"].visible .p-2\.5 span {
        display: inline !important;
    }
    aside[aria-label="Main navigation"].visible .p-2\.5 .flex-col {
        display: flex !important;
    }

    /* Right sidebar → hidden fixed overlay */
    #right-sidebar {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 300;
        width: 0 !important;
        min-width: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: width 200ms ease, opacity 200ms ease;
    }
    #right-sidebar.responsive-force-open {
        width: 280px !important;
        opacity: 1;
        pointer-events: auto;
        overflow: visible;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    }

    /* Show toggle buttons for both sidebars */
    .mobile-sidebar-toggle {
        display: flex;
    }
    #ribbon-expand-sidebar {
        display: flex !important;
    }

    /* Hide the header search bar — not enough room */
    .absolute.left-1\/2 {
        display: none;
    }

    /* Chat message area — reduce horizontal padding */
    #chat-messages {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Grid layouts → single column */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .forecast-panel {
        max-width: 90%;
    }
}

/* ---- Mobile: additional refinements (sidebars already handled at 1024px) ---- */
@media (max-width: 768px) {
    /* Header */
    header {
        height: 44px;
    }
    header h2 {
        font-size: 13px;
    }
    #header-view-controls {
        flex: 1;
    }
    .briefing-header-label {
        display: none;
    }
    .ribbon-usage-label {
        display: none;
    }
    .ribbon-usage-popup {
        right: -40px;
        width: 240px;
    }

    /* Chat area — tighter padding for mobile */
    #chat-messages {
        padding-left: 16px;
        padding-right: 16px;
    }
    .chat-bar-container {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Forecast cards */
    .forecast-card {
        width: 100%;
        margin-bottom: 0.75rem;
    }
    .forecast-panel {
        max-width: 100%;
    }

    /* Grids → single column */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: 1fr;
    }

    /* Modals & popups — fit viewport */
    .modal,
    [role="dialog"] {
        width: 90vw;
        max-width: 90vw;
    }
    .briefing-peek-popup,
    .snooze-dropdown,
    [role="menu"] {
        position: absolute;
        right: 0;
        left: auto;
        max-width: 90vw;
    }
}

/* ---- Extra small (phones, high zoom) ---- */
@media (max-width: 480px) {
    body {
        font-size: 13px;
    }

    #chat-messages {
        padding-left: 12px;
        padding-right: 12px;
        max-width: 100%;
    }
    .chat-bar-container {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Hide non-essential chrome */
    #header-stage-badge {
        display: none !important;
    }

    /* Inputs fill available width */
    input[type="text"],
    input[type="email"],
    input[type="search"] {
        width: 100%;
    }

    /* Tighter card padding */
    .p-6 { padding: 0.75rem; }
    .p-4, .p-5 { padding: 0.75rem; }
}



/* Inbox filter pills */
.inbox-filter-pill {
    background: transparent;
    color: var(--color-muted); /* claude-muted */
    border: 1px solid transparent;
}
.inbox-filter-pill:hover {
    background: var(--color-overlay-hover);
    color: var(--color-text); /* claude-text */
}
.inbox-filter-pill.active {
    background: rgba(var(--accent-color-rgb), 0.15);
    color: rgb(var(--accent-color-rgb));
    border-color: rgba(var(--accent-color-rgb), 0.3);
}

/* ==========================================
   Type Filter Dropdown — Right Sidebar
   Reuses timeline-popup / contact-popup pattern
   ========================================== */

/* ==========================================
   Kanban Sidebar Transition
   ========================================== */

#sidebar-tasks-content-area {
    transition: opacity 0.15s ease;
}

#sidebar-tasks-content-area.fading {
    opacity: 0;
}

/* ==========================================
   Right Sidebar Collapse (Three-State)
   ========================================== */

/* Collapsed state — sidebar hidden */
#right-sidebar.right-sidebar-collapsed {
    width: 0 !important;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-left: none;
    opacity: 0;
    transition: width 150ms ease, opacity 150ms ease, border 150ms ease;
}

/* Default sidebar transition for smooth expand */
#right-sidebar {
    transition: width 150ms ease, opacity 150ms ease;
}
/* Kill horizontal scroll on every scrollable container inside the right sidebar */
#right-sidebar .overflow-y-auto,
#right-sidebar .overflow-y-scroll {
    overflow-x: hidden;
}

/* Edge tab — thin vertical nub on right edge */
/* Edge tab removed — expand button now lives in header ribbon */

/* (Sidebar briefing card removed — briefing now in header bar) */

/* ==========================================
   Compose Widget
   ========================================== */

/* Compose widget header zone */
/* Compose footer – toolbar left, actions right */
.mb-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
}
/* Copy action button (right side of footer) */
.compose-footer-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-muted);
    transition: color 0.12s, background 0.12s, box-shadow 0.1s, transform 0.1s;
    padding: 0;
    flex-shrink: 0;
}
.compose-footer-action-btn:hover {
    color: var(--color-text);
    background: var(--color-overlay-hover);
}
/* Pressed-in effect matching deal cards / forecast cards */
.compose-footer-action-btn:active {
    transform: scale(0.93);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.06);
}
.compose-footer-action-btn svg {
    width: 14px;
    height: 14px;
}
.compose-footer-action-btn.compose-copy-ok {
    color: var(--accent-color);
}
.compose-copy-btn {
    opacity: 0.7;
}
.compose-copy-btn:hover {
    opacity: 1;
}

/* ── TipTap compose editor ── */
.compose-tiptap-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;          /* scrolls when content exceeds max-height cap */
}

/* Toolbar (lives inside footer row) */
.compose-toolbar {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-right: auto;
}
.compose-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-muted);
    transition: background 0.12s, color 0.12s, transform 0.1s, box-shadow 0.1s;
    padding: 0;
}
.compose-toolbar button:active {
    transform: scale(0.88);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.06);
}
.compose-toolbar button svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.compose-toolbar button:hover {
    background: var(--color-overlay-hover);
    color: var(--color-text);
}
.compose-toolbar button.is-active {
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.1);
}
.toolbar-divider {
    width: 1px;
    height: 14px;
    background: var(--color-border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Editor area */
.compose-editor {
    padding: 10px 14px;
    outline: none;
    flex: 1 1 auto;
    min-height: 60px;          /* enough room for placeholder */
}
.compose-editor .ProseMirror {
    outline: none;
    min-height: 60px;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
}
.compose-editor .ProseMirror p {
    margin: 0 0 0.5em 0;
}
.compose-editor .ProseMirror p:last-child {
    margin-bottom: 0;
}
.compose-editor .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: var(--color-muted);
    pointer-events: none;
    float: left;
    height: 0;
}
.compose-editor .ProseMirror a {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.compose-editor .ProseMirror ul,
.compose-editor .ProseMirror ol {
    padding-left: 1.4em;
    margin: 0.3em 0;
}
.compose-editor .ProseMirror li {
    margin: 0.15em 0;
}
.compose-editor .ProseMirror strong {
    font-weight: 600;
}
.compose-editor .ProseMirror s {
    text-decoration: line-through;
    opacity: 0.65;
}

/* ── Compose-in-frame layout ──
   Keeps subject & footer always visible; body scrolls internally.
   JS applies .compose-frame and sets --compose-max-h on the block. */
.compose-frame {
    display: flex;
    flex-direction: column;
    max-height: var(--compose-max-h, 55vh);
    overflow: hidden;          /* block itself never scrolls */
}
/* Header + header-zone stay fixed at top */
.compose-frame > .mb-header,
/* Footer stays fixed at bottom */
.compose-frame > .mb-footer {
    flex-shrink: 0;
}
/* Single-draft body: scrollable region — auto basis lets short content shrink */
.compose-frame > .mb-body {
    flex: 1 1 auto;
    min-height: 36px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
/* Variant panels wrapper — need an intermediate element or target panels */
.compose-frame .mv-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;               /* allow flex children to shrink */
}
.compose-frame .mv-panel[style*="display:none"],
.compose-frame .mv-panel[style*="display: none"] {
    flex: 0;                     /* hidden panels take no space */
}
/* For variant blocks, the panel bodies scroll — auto basis for content sizing */
.compose-frame .mv-panel .mb-body {
    flex: 1 1 auto;
    min-height: 36px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
/* The variant subject inside panels stays fixed */
.compose-frame .mv-panel .compose-variant-subject {
    flex-shrink: 0;
}
/* In variant blocks, the visible panel should grow to fill remaining space */
.compose-frame.mv-block {
    /* Children that aren't header/footer/header-zone need to fill space */
}
.compose-frame.mv-block > .mv-panel:not([style*="display:none"]):not([style*="display: none"]) {
    flex: 1 1 auto;
    min-height: 0;
}

/* Subtle scrollbar for the compose body area and tiptap container */
.compose-frame .mb-body::-webkit-scrollbar,
.compose-frame .compose-tiptap-container::-webkit-scrollbar {
    width: 5px;
}
.compose-frame .mb-body::-webkit-scrollbar-track,
.compose-frame .compose-tiptap-container::-webkit-scrollbar-track {
    background: transparent;
}
.compose-frame .mb-body::-webkit-scrollbar-thumb,
.compose-frame .compose-tiptap-container::-webkit-scrollbar-thumb {
    background: var(--color-overlay-active);
    border-radius: 3px;
}
.compose-frame .mb-body::-webkit-scrollbar-thumb:hover,
.compose-frame .compose-tiptap-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-overlay-strongest);
}

.compose-body-fallback {
    width: 100%;
    min-height: 40px;
    border: none;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    background: transparent;
    color: var(--color-text);
}

/* Plant spinner for processing/loading screens */
@keyframes plant-spin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(10800deg); }
}

/* Catch-up pulse for first-time users */
@keyframes catchup-pulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(var(--accent-color-rgb), 0.4),
                    0 0 24px rgba(var(--accent-color-rgb), 0.2),
                    0 0 4px rgba(var(--accent-color-rgb), 0.5);
    }
    50% {
        box-shadow: 0 0 16px rgba(var(--accent-color-rgb), 0.5),
                    0 0 30px rgba(var(--accent-color-rgb), 0.25),
                    0 0 5px rgba(var(--accent-color-rgb), 0.6);
    }
}

.catchup-landing-btn.pulse {
    animation: catchup-pulse 2s ease-in-out infinite;
}

/* ===========================================
 * Login overlay — matches callback page wordmark
 * positioning (22vh) and chat empty state font
 * =========================================== */

/* Login and landing overlays use a flat background instead of the chat gradient */
#login-overlay.chat-view-textured,
#landing-overlay.chat-view-textured {
    background: var(--color-bg-gradient-mid) !important;
}
#login-overlay.chat-view-textured::before,
#landing-overlay.chat-view-textured::before {
    display: none;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding-top: 22vh;
}

.login-wordmark {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--accent-color);
    margin-bottom: 16px;
}

/* ===========================================
 * Onboarding: Embedded Interactive Components
 * =========================================== */

/* Onboarding cards — built on .chat-card__item base */
.chat-card--onboarding {
    border-top: none;
}
.chat-card--onboarding .mb-header {
    padding-bottom: 6px;
}

/* Onboarding card — match task card gap/alignment */
.chat-card--onboarding .onboarding-card {
    border-left: 2px solid var(--accent-color);
    gap: 8px;
}

/* Toggle states — opacity + strikethrough */
.onboarding-card--on {
    opacity: 1;
    transition: opacity 0.2s ease;
}
.onboarding-card--off {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}
/* Card content typography */
.onboarding-card-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text);
    position: relative;
}
/* Animated strikethrough — matches filter pill scaleX pattern */
.onboarding-card-name::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboarding-card--off .onboarding-card-name::after {
    transform: scaleX(1);
}
/* Name row: text + pencil icon, click to edit */
.onboarding-card-name-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.onboarding-card-edit-icon {
    color: var(--color-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}
/* Show pencil on hover of the whole card */
.onboarding-card:hover .onboarding-card-edit-icon {
    opacity: 1;
}
/* Inline edit input — appears when user clicks name */
.onboarding-card-name--editing {
    background: var(--color-input);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px 6px;
    margin: 0;
    width: auto;
    min-width: 80px;
    max-width: 60%;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.onboarding-card-name--editing:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.3);
}
.onboarding-card-detail {
    font-size: 11px;
    color: var(--color-muted);
}
.onboarding-card-desc {
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-style: italic;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Always-visible × toggle button */
.onboarding-card-toggle {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-left: auto;
    align-self: center;
    line-height: 1;
}
.onboarding-card-toggle:hover {
    background: var(--color-overlay-hover);
    color: #ef4444;
    border-color: #ef4444;
    transform: scale(1.15);
}
.onboarding-card-toggle:active {
    transform: scale(0.88);
    transition-duration: 0.08s;
}
/* × rotates 45° to become + when toggled off */
.onboarding-card--off .onboarding-card-toggle {
    transform: rotate(45deg);
}
.onboarding-card--off .onboarding-card-toggle:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.1);
    transform: rotate(45deg) scale(1.15);
}
.onboarding-card--off .onboarding-card-toggle:active {
    transform: rotate(45deg) scale(0.88);
    transition-duration: 0.08s;
}

/* Locked states — keep the previous hover color until mouse leaves.
   was-on = user just toggled OFF (removed), keep red.
   was-off = user just toggled ON (added back), keep green. */
.onboarding-toggle-locked.onboarding-toggle-locked--was-on {
    color: #ef4444 !important;
    border-color: #ef4444 !important;
    background: var(--color-overlay-hover) !important;
}
.onboarding-toggle-locked.onboarding-toggle-locked--was-off {
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    background: rgba(var(--accent-color-rgb), 0.1) !important;
}

/* Confirm row — extra top margin separates from last card,
   bottom padding matches list's bottom for symmetry */
.onboarding-confirm-row {
    padding: 0 10px;
    margin-top: 10px;
    margin-bottom: 2px;
    display: flex;
    justify-content: flex-end;
}
.onboarding-confirm-btn {
    padding: 5px 14px;
    border-radius: 9999px;
    border: 1px solid var(--accent-color);
    background: var(--accent-color);
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.onboarding-confirm-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.04);
}
.onboarding-confirm-btn:active {
    transform: scale(0.96);
    filter: brightness(0.9);
    transition-duration: 0.08s;
}
.onboarding-confirm-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

/* Onboarding chat wrapper — subtle green accent in sidebar */
.onboarding-chat-wrapper .chat-item {
    border-left: 2px solid var(--accent-color);
    border-radius: 4px;
}

/* Onboarding header button variant */
.onboarding-header-btn {
    background: rgba(35, 159, 64, 0.12) !important;
    border-color: rgba(35, 159, 64, 0.4) !important;
}

.onboarding-header-btn .briefing-header-label {
    color: var(--accent-color) !important;
}

/* Onboarding progress — header ribbon */
.onboarding-ribbon-progress {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    /* Prevent overflow into left title / right buttons */
    max-width: min(520px, calc(100vw - 480px));
    overflow: visible;
}

/* Each node: dot centered, connector extends right, label below.
   min-width set inline per node to match label length. */
.onboarding-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.onboarding-node-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-sizing: border-box;
    transition: all 0.15s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* Scaled-up follow-up dot states — proportional to wider connector spacing */
.onboarding-node-dot.sent {
    background: var(--accent-color);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.35);
}

/* Due/future dots need opaque center so connector line doesn't show through the ring */
.onboarding-node-dot.due {
    background: var(--color-bg, #f5f0e8);
    border: 2.5px solid var(--accent-color);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.35);
}

.onboarding-node-dot.future {
    background: var(--color-bg, #f5f0e8);
    border: 2px solid var(--color-border);
}

.onboarding-node-label {
    font-size: 9px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    margin-top: 4px;
}

.onboarding-node-label.sent {
    color: var(--accent-color);
}

.onboarding-node-label.due {
    color: var(--accent-color);
    font-weight: 600;
}

.onboarding-node-label.future {
    color: var(--color-muted);
}

/* Connector: absolutely positioned from dot center to next dot center.
   Width set inline = half(thisNode) + half(nextNode). */
.onboarding-node-connector {
    position: absolute;
    height: 2px;
    left: 50%;
    top: 5px; /* half of 10px dot (border-box) */
    transform: translateY(-50%);
    z-index: 0;
}

.onboarding-node-connector.active {
    background: var(--accent-color);
}

.onboarding-node-connector.inactive {
    background: var(--color-border);
}