/**
 * Tnuki Application Styles
 *
 * Core CSS styles extracted from index.html for cleaner organization.
 * Includes utilities, animations, table styling, tooltips, and mobile support.
 *
 * Extracted from templates/index.html for cleaner organization.
 */

/* ========== Core Utilities ========== */

/* Lock the viewport: body never scrolls, all scrolling delegated to
   inner containers (chat, table). height: 100% on html resolves to the
   visual viewport (no iOS 100vh bug). overflow: hidden makes html/body
   non-scrollable, so scroll chaining from children is impossible. */
html, body {
    height: 100%;
    overflow: hidden;
}

/* Hide app until Alpine.js initializes (prevents FOUC) */
[x-cloak] { display: none !important; }

.reasoning-text * {
    color: #9ca3af !important; /* gray-400 */
    font-style: italic !important;
}

/* Reasoning expand/collapse (vanilla JS via data-expandable) */
.reasoning-expandable:not(.expanded) {
    max-height: 1.5rem;
}
.reasoning-expandable.expanded {
    max-height: 2000px;
}

/* Tool debug details: hidden by default, shown only when BOTH conditions met:
   1) .show-tool-details on container (Ctrl+Shift+. toggles debug mode)
   2) .expanded on the card (user clicked to expand) */
.tool-debug-section {
    display: none;
}
.show-tool-details .tool-card-expandable.expanded .tool-debug-section {
    display: block;
}
/* Only show pointer cursor on tool card headers when debug mode is enabled */
.show-tool-details .tool-card-expandable [data-expandable] {
    cursor: pointer;
}
/* Technical error details in alerts: hidden by default, shown in debug mode */
.technical-error-details {
    display: none;
}
.show-tool-details .technical-error-details {
    display: block;
}

/* Lighter text for special metadata columns (row number, enrichment status) */
td.special-column-text {
    color: #9ca3af; /* gray-400 - indicates non-user data */
}

/* Editable title: show pencil icon on hover */
.title-editable:hover .title-edit-icon { display: block; }
.title-editable:hover .title-text { color: #111827; /* gray-900 */ }

/* Linen texture background for table section */
.linen-bg {
    background-color: #f5f5f4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23d6d3d1' fill-opacity='0.3' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

/* ========== Landing Carousel Styles ========== */

.carousel-container {
    position: relative;
    min-height: 450px;
    overflow: visible; /* Allow screenshot to overflow right edge */
}

.carousel-slide {
    position: absolute;
    inset: 0;
}

.carousel-slide img {
    height: 80%;
    width: auto;
    max-width: none;
    margin-left: 5%;
}

.carousel-caption-card {
    position: absolute;
    bottom: 1.5rem;
    left: 1rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem 2rem;
    border: 1px solid #000;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    max-width: 55%;
    min-width: 300px;
}

.carousel-quote-icon {
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.75rem;
    font-weight: bold;
    line-height: 1;
    color: #1f2937;
}

.carousel-dots {
    position: absolute;
    bottom: -3.5rem;
    left: 0;
    right: 0;
}

/* ========== Panel Resize Styles ========== */

/* Resize handle container - standard width for drag interaction */
.resize-handle-container {
    position: relative;
    width: 16px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    margin: 0 -8px; /* Centers 16px hitbox over the panel boundary */
    z-index: 20; /* Above landing carousel (z-10) */
}

/* Simple drag pill (shown by default) */
.drag-pill-simple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 48px;
    background-color: #fff;
    border: 1.5px solid #9ca3af; /* gray-400 - more visible in non-hover state */
    border-radius: 3px;
    z-index: 15;
    pointer-events: none;
    /* No transition - instant hover feedback */
}

.drag-pill-dots {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 24px;
    background-color: #9ca3af; /* gray-400 - more visible in non-hover state */
    /* No transition - instant hover feedback */
}

/* Visual separator - 1px line */
.resize-handle-visual {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background-color: #9ca3af; /* gray-400 - more visible in non-hover state */
    /* No transition - instant hover feedback */
}

/* Hover/dragging states - turn black */
.resize-handle-container:hover .drag-pill-simple,
.resize-handle-container.dragging .drag-pill-simple {
    border-color: #000;
}

.resize-handle-container:hover .drag-pill-dots,
.resize-handle-container.dragging .drag-pill-dots,
.resize-handle-container:hover .resize-handle-visual,
.resize-handle-container.dragging .resize-handle-visual {
    background-color: #000;
}

/* Disable transitions during drag */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* Panel animations */
.panel-animating {
    transition: width 0.3s ease, min-width 0.3s ease, transform 0.3s ease;
}

/* Expand button pulsate hint (when user hits resize limit) */
@keyframes expandButtonPulse {
    0% { transform: scale(1); background-color: white; }
    25% { transform: scale(1.25); background-color: #fefce8; } /* yellow-50 - first pulse peak */
    50% { transform: scale(1); background-color: white; }      /* back to normal */
    75% { transform: scale(1.25); background-color: #fefce8; } /* yellow-50 - second pulse peak */
    100% { transform: scale(1); background-color: white; }
}
.expand-button-pulsing {
    animation: expandButtonPulse 0.6s ease-out;
}

/* Prevent pointer events on children during resize */
.resize-handle-container.dragging * {
    pointer-events: none;
}

/* ========== Textarea Auto-Resize ========== */

/* Textarea auto-resize using CSS Grid trick (avoids Safari scrollHeight bug)
   Both textarea and ::after occupy same grid cell; tallest one wins.
   See: https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */
.textarea-grow-wrap {
    display: grid;
    min-width: 0;  /* Allow grid to shrink below content width (enables word-wrap) */
}

.textarea-grow-wrap::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
    /* Must match textarea styling exactly */
    padding: 0.75rem 1rem;  /* py-3 px-4 */
    font-size: 1rem;  /* text-base */
    line-height: 1.5;
    font-family: inherit;
    border: 0;
    box-sizing: border-box;
}

.textarea-grow-wrap > textarea,
.textarea-grow-wrap::after {
    /* Overlap in same grid cell */
    grid-area: 1 / 1 / 2 / 2;
    min-width: 0;  /* Allow shrinking below content width */
    min-height: 38px;
    max-height: 400px;
    overflow-wrap: break-word;  /* Break long unbroken words to prevent horizontal overflow */
    word-break: break-word;     /* Fallback for older browsers */
}

.textarea-grow-wrap > textarea {
    overflow-y: auto;
}

/* ========== Chat Input Positioning ========== */

/* Chat input container positioning with pure CSS */
.chat-welcome {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    right: 1.5rem;
    transform: translateY(-50%);
}

.chat-started {
    flex-shrink: 0;
    padding: 0.5rem 0;
    /* iOS Safari: Add safe area padding to avoid address bar overlap */
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background-color: white;
    position: relative;
}

/* iOS Safari safe area utility - adds bottom padding for notch/address bar */
.ios-safe-bottom {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* Fade gradient above input area */
.chat-started::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}

.chat-started > div {
    padding: 0 1.5rem;
}

/* Floating queued messages - positioned above the input container */
.queued-messages-floating {
    position: absolute;
    /* bottom is set dynamically via JS based on input container height */
    left: 0;
    right: 0;
    z-index: 15;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Right-align like user messages */
    padding: 0 1.5rem;
    gap: 0.5rem;
}

/* Individual queued message bubbles - frosted glass style matching user bubbles */
.queued-message-bubble {
    pointer-events: auto;
    max-width: 70%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    /* Frosted glass effect - blueish tint, subtle blur */
    background: rgba(225, 235, 250, 0.5); /* light blue-gray at 50% opacity */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* 3D glass rim effect - light top edge, subtle bottom shadow */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    border-radius: 1rem; /* pill shape */
    padding: 0.5rem 0.75rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),  /* inner top highlight */
        0 1px 2px rgba(0, 0, 0, 0.08);            /* outer lift shadow */
}

/* Two-line truncation for queued message text */
.queued-message-text {
    /* Two-line truncation */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Cancel button inside bubble */
.queued-message-cancel {
    flex-shrink: 0;
    color: #9ca3af; /* gray-400 */
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.15s, background-color 0.15s;
}

.queued-message-cancel:hover {
    color: #6b7280; /* gray-500 */
    background-color: rgba(0, 0, 0, 0.08);
}

/* ========== Cell State Animations ========== */

.cell-loading {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.cell-error {
    background-color: #fee2e2 !important;
    animation: errorPulse 0.5s;
}

.cell-success {
    background-color: #d1fae5 !important;
    animation: successFlash 0.5s;
}

.cell-warning {
    background-color: #fed7aa !important;
}

.cell-updated {
    animation: updatePulse 0.6s ease-out;
}

/* Row animations */
.row-entering {
    animation: slideIn 0.3s ease-out;
}

.row-leaving {
    animation: fadeOut 0.3s ease-out forwards;
}

/* New row highlight (3s purple fade, triggered by scrollToRow) */
.row-highlight-new {
    animation: rowHighlightFade 3s ease-out forwards;
}

@keyframes rowHighlightFade {
    0%   { background-color: #f3e8ff; /* purple-100 */ }
    30%  { background-color: #f3e8ff; }
    100% { background-color: transparent; }
}

/* ========== Keyframe Animations ========== */

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

/* Gentle opacity pulse for preview cards (streaming) */
@keyframes cardPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes errorPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); background-color: #fca5a5; }
}

@keyframes successFlash {
    0% { background-color: #d1fae5; }
    50% { background-color: #86efac; }
    100% { background-color: #d1fae5; }
}

@keyframes updatePulse {
    0% { background-color: #dbeafe; }
    100% { background-color: transparent; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        max-height: 60px;
    }
    to {
        opacity: 0;
        max-height: 0;
        padding: 0;
        margin: 0;
    }
}

/* ========== Table Column Width Classes ========== */

/* Use min/max for hard constraints in table layout */
.table-col-minimal {
    min-width: 100px;
    max-width: 100px;
}

.table-col-short {
    min-width: 200px;
    max-width: 200px;
}

.table-col-medium {
    min-width: 300px;
    max-width: 400px;
}

.table-col-long {
    min-width: 450px;
    max-width: 600px;
}

/* LinkedIn badge: SVG icon, gray default, LinkedIn blue on hover */
.linkedin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 4px;
    color: #9ca3af;             /* gray-400 — drives currentColor in SVG */
}
a:hover .linkedin-badge {
    color: #0077B5;             /* LinkedIn blue */
}

/* Data link styling: light underline for non-prose links in table cells */
.data-link {
    text-decoration: underline;
    text-decoration-color: #d1d5db;  /* gray-300 */
    text-underline-offset: 2px;
}
a:hover .data-link,
.data-link:hover {
    text-decoration-color: currentColor;
}

/* Enum badge styling */
.enum-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.enum-badge.has-annotation { cursor: help; }
.enum-annotation-popover { max-width: 320px; }
.enum-annotation-popover .prose { padding: 8px 12px; }
.enum-annotation-popover .prose p { margin: 0; }

/* ===== Entity Mentions: Crosshair Icon System ===== */
/* Mention text: cursor pointer, hover underline */
.entity-mention,
.entity-mention-chat {
    cursor: pointer;
}
.entity-mention:hover,
.entity-mention-chat:hover {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.25);
    text-underline-offset: 2px;
}
/* Chat mentions get slightly bolder text */
.entity-mention-chat {
    font-weight: 500;
}

/* Inline crosshair icon sits after entity text.
   vertical-align: -0.2em nudges up from middle to optically center with caps. */
.entity-mention .crosshair-icon,
.entity-mention-chat .crosshair-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.2em;
    margin-left: 4px;
    overflow: visible;
}

/* ===== Crosshair Icon: Animations & States ===== */
@keyframes ping-crosshair {
    0%   { transform: scale(0.25); opacity: 0.7; stroke-width: 2.5px; }
    50%  { opacity: 0.4; }
    100% { transform: scale(1.3); opacity: 0; stroke-width: 0.5px; }
}
.crosshair-icon .ping-ring {
    transform-box: fill-box;
    transform-origin: center center;
}
.crosshair-icon {
    transition: transform 0.2s ease, filter 0.2s ease;
}
/* Hover effects triggered by parent mention — hovering text or icon acts as one unit */
.entity-mention:hover .crosshair-icon,
.entity-mention-chat:hover .crosshair-icon {
    transform: scale(1.12);
}
.entity-mention:hover .crosshair-icon.tracked,
.entity-mention-chat:hover .crosshair-icon.tracked {
    filter: drop-shadow(0 1px 2px rgba(139,92,246,0.4));
}
.entity-mention:hover .crosshair-icon.untracked,
.entity-mention-chat:hover .crosshair-icon.untracked {
    filter: drop-shadow(0 1px 2px rgba(139,92,246,0.4));
}
/* Processing: no scale on hover (non-interactive) */
.entity-mention:hover .crosshair-icon.processing-sweep,
.entity-mention-chat:hover .crosshair-icon.processing-sweep {
    transform: none;
}

/* Untracked: plus icon stays, inherits scale + shadow from parent hover rules above */

/* In-table mentions: .tracked-inline-trigger is nested inside .entity-mention.
   Override the standalone trigger hover effects — the parent mention controls hover state. */
.entity-mention .tracked-inline-trigger,
.entity-mention-chat .tracked-inline-trigger {
    gap: 0;
    overflow: visible;  /* prevent shadow clipping on crosshair icon */
}
/* Disable standalone trigger hover effects inside mentions (parent handles them) */
.entity-mention .tracked-inline-trigger:hover svg,
.entity-mention-chat .tracked-inline-trigger:hover svg {
    transform: none;
    filter: none;
}
.entity-mention .tracked-inline-trigger:hover,
.entity-mention-chat .tracked-inline-trigger:hover {
    gap: 0;
}
/* Untracked: rose-purple on hover (icon via currentColor + text via gradient) */
.crosshair-icon.untracked {
    color: #94a3b8;
    transition: color 0.15s ease, transform 0.2s ease, filter 0.2s ease;
}
.entity-mention:hover .crosshair-icon.untracked,
.entity-mention-chat:hover .crosshair-icon.untracked {
    color: #a855f7;
}

/* One-shot ping: triggered by JS (entity.tracked SSE) via adding .ping-once class */
.crosshair-icon.tracked .ping-ring.ping-once {
    animation: ping-crosshair 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
/* Also fires on parent hover for re-engagement */
.entity-mention:hover .crosshair-icon.tracked .ping-ring.hover-ping,
.entity-mention-chat:hover .crosshair-icon.tracked .ping-ring.hover-ping {
    animation: ping-crosshair 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Processing: radar sweep rotation */
@keyframes radar-sweep {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.crosshair-icon.processing-sweep .radar-sweep-group {
    transform-origin: 10px 10px;
    animation: radar-sweep 1.6s linear infinite;
}

/* ===== Tracked/Untracked Inline Trigger (entity panel header) ===== */
/* Crosshair + hover-reveal text label: "Tracked" / "Not tracked" */
.tracked-inline-trigger {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
    margin-left: 4px;
    vertical-align: -0.2em;
    cursor: pointer;
    overflow: visible;
    transition: gap 0.15s ease-out;
}
.tracked-inline-trigger:hover {
    gap: 3px;
}
.tracked-inline-trigger .crosshair-icon {
    /* Override parent-context styles — no extra margin, no vertical-align */
    margin-left: 0;
    vertical-align: baseline;
}
.tracked-inline-trigger svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.tracked-inline-trigger:hover svg {
    transform: scale(1.08);
}
.tracked-inline-trigger:hover .crosshair-icon.tracked svg {
    filter: drop-shadow(0 2px 5px rgba(139,92,246,0.35));
}
.tracked-inline-trigger:hover .crosshair-icon.untracked svg {
    filter: drop-shadow(0 2px 4px rgba(100,116,139,0.3));
}
.tracked-inline-trigger .reveal-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.15s ease-out;
}
.tracked-inline-trigger .reveal-text-tracked {
    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tracked-inline-trigger .reveal-text-untracked {
    color: #94a3b8;
}
.tracked-inline-trigger:hover .reveal-text {
    max-width: 80px;
}

/* ===== Shared Popover Base (Floating UI positioned) ===== */
.popover-card {
    position: fixed;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08);
    z-index: 50;
}

/* ===== Entity Panel (unified popover + detail) ===== */
.entity-panel {
    position: fixed;
    width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 1px solid #e7e5e4;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08);
    z-index: 100;
    overflow: hidden;
}
.entity-panel-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 16px 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px 12px 0 0;
    background: rgba(225, 235, 250, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 0 12px 6px rgba(225, 235, 250, 0.45);
    cursor: move;
    user-select: none;
    flex-shrink: 0;
}
/* Top row: avatar + name + close button */
.entity-panel-header-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 24px; /* space for absolute close button */
}
/* Scrollable zone: frosted public info + white private body.
   overscroll-behavior: none prevents macOS elastic bounce which
   would reveal the transparent gap behind backdrop-filter. */
.entity-panel-scroll {
    overflow-y: auto;
    flex: 1;
    overscroll-behavior: none;
}
/* Public info section — continues frosted glass treatment inside scroll area */
.entity-panel-public {
    padding: 10px 16px 12px;
    background: rgba(225, 235, 250, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 0 12px 6px rgba(225, 235, 250, 0.45);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* Gradient-bordered related entity chiclets (no fill, gradient outline only).
   Uses an absolutely positioned pseudo for the gradient ring since
   border-image doesn't support border-radius. */
.entity-neighbor-chiclet {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 9999px;
    color: #57534e;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
}
.entity-neighbor-chiclet::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    padding: 1px;
    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
.entity-neighbor-chiclet:hover {
    background: rgba(139, 92, 246, 0.05);
}
/* Tooltip for relationship context on chiclets */
.entity-neighbor-chiclet .chiclet-tooltip {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    display: none;
    z-index: 1;
}
.entity-neighbor-chiclet:hover .chiclet-tooltip {
    display: block;
}
.entity-panel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    color: #78716c;
    cursor: pointer;
    background: transparent;
}
.entity-panel-close:hover {
    border-color: rgba(0,0,0,0.3);
    color: #44403c;
}
.entity-panel-body {
    padding: 0 16px 16px;
    background: white;
}
/* ===== B3 Popover: "Your intel" banner with seamless color bleed ===== */
.private-intel-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(139, 92, 246, 0.10) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.10);
}
.private-intel-banner .banner-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.private-intel-banner .banner-private-tag {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9a9a9a;
}
.private-intel-banner .banner-private-tag svg {
    width: 10px;
    height: 10px;
}

/* Seamless color bleed variant — gradient fades into body via mask */
.private-zone-seamless {
    position: relative;
}
.private-zone-seamless::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.10), rgba(139, 92, 246, 0.10));
    -webkit-mask-image: linear-gradient(to bottom, black 0px, transparent 48px);
    mask-image: linear-gradient(to bottom, black 0px, transparent 48px);
    pointer-events: none;
}
.private-intel-banner-seamless {
    background: transparent;
    border-bottom: none;
}

/* Track CTA button with icon (replaces ghost CTA for untracked entities) */
.track-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 16px;
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.track-cta:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}
.track-cta:disabled {
    cursor: default;
    opacity: 1; /* don't grey out — we show our own processing state */
}
.track-cta.tracked-cta {
    background: #faf5ff;
    border-color: #c4b5fd;
    color: #7c3aed;
    cursor: default;
}

/* Gradient-fill Track button (rose-purple) */
.track-cta-gradient {
    background: linear-gradient(135deg, #e879a0, #a855f7);
    border: none;
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 12px;
    margin-top: 12px;
}
.track-cta-gradient:hover {
    background: linear-gradient(135deg, #e06090, #9333ea);
}
.track-cta-gradient:disabled {
    opacity: 0.85;
}

/* Value prop card (untracked entity panel) */
.track-value-prop {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
}
.track-value-prop-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
}
.track-value-prop-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.track-value-prop-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #4b5563;
    line-height: 1.4;
}
.track-value-prop-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #9ca3b0;
}
/* Timeline layout for observations */
.entity-timeline-entry {
    display: grid;
    grid-template-columns: 56px 16px 1fr;
    gap: 0;
    position: relative;
}
.entity-timeline-date {
    font-size: 13px;
    color: #a8a29e;
    text-align: right;
    padding-right: 4px;
    line-height: 1.5;
}
.entity-timeline-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.entity-timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d6d3d1;
    border: 2px solid white;
    flex-shrink: 0;
    margin: 6px 0 4px;
    z-index: 1;
}
.entity-timeline-line {
    width: 2px;
    flex: 1;
    background: #e7e5e4;
}
.entity-timeline-text {
    font-size: 13px;
    color: #44403c;
    line-height: 1.5;
    padding-bottom: 12px;
}
/* Last entry: keep line to cover full text height, remove bottom padding */
.entity-timeline-entry:last-child .entity-timeline-text {
    padding-bottom: 0;
}

@media (max-width: 640px) {
    .entity-panel {
        width: calc(100vw - 32px);
        max-width: 480px;
    }
}

/* Entity avatar: image or type icon fallback, fixed size.
   Used in entity panel header. */
.entity-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f3f4f6;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* When showing type icon instead of image — plain grey */
.entity-avatar-icon {
    background: #f3f4f6;
}
.entity-avatar-icon svg {
    width: 60%;
    height: 60%;
    stroke: #9ca3af;
}

/* Larger variant for entity panel */
.entity-avatar-lg {
    width: 48px;
    height: 48px;
}

/* Public/Private scope tags in entity panel section headers */
.entity-detail-scope-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
    text-transform: uppercase;
    margin-left: 4px;
}
.entity-detail-scope-public {
    color: #6b7280;
    background: #f3f4f6;
}
.entity-detail-scope-private {
    color: #7c3aed;
    background: #f5f3ff;
}

/* Gutter after the table so the right edge shows background when fully scrolled */
.table-gutter {
    padding-right: 0.5rem; /* match left padding (p-2 is 0.5rem) */
}

/* Tighten prose inside table cells - fixes alignment and line-height */
td .prose p:first-child { margin-top: 0; }
td .prose p:last-child { margin-bottom: 0; }
td .prose ul:first-child { margin-top: 0; }
td .prose ul:last-child { margin-bottom: 0; }
td .prose li:first-child { margin-top: 0; }
td .prose li:last-child { margin-bottom: 0; }
td .prose * { line-height: 1.47; }
td * { line-height: 1.47; }
td {
    overflow-wrap: break-word;
    word-break: break-word;  /* Fallback for older browsers */
}

/* ========== Composite Field Emphasis Tiers ========== */

.composite-headline {
    font-size: 1rem;      /* 16px */
    font-weight: 600;
    color: #111827;       /* gray-900 */
}
.composite-headline a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #d1d5db;  /* gray-300 */
    text-underline-offset: 2px;
}
.composite-headline a:hover {
    color: #1d4ed8;       /* blue-700 */
    text-decoration-color: currentColor;
}

.composite-primary {
    font-size: 0.875rem;  /* 14px */
    font-weight: 500;
    color: #1f2937;       /* gray-800 */
}
.composite-primary a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #d1d5db;  /* gray-300 */
    text-underline-offset: 2px;
}
.composite-primary a:hover {
    color: #1d4ed8;
    text-decoration-color: currentColor;
}

.composite-secondary {
    font-size: 0.875rem;  /* 14px */
    font-weight: 400;
    color: #6b7280;       /* gray-500 */
}
.composite-secondary a {
    color: #6b7280;       /* gray-500 - match parent */
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: #d1d5db;  /* gray-300 */
    text-underline-offset: 2px;
}
.composite-secondary a:hover {
    color: #374151;       /* gray-700 */
    text-decoration-color: currentColor;
}

/* Composite field labels - muted prefix before values
   Colors are emphasis-tier-aware: lighter than value but visible */

/* Default label styling (used by secondary emphasis) */
.composite-label {
    font-weight: 400;
    color: #9ca3af;          /* gray-400 - lighter than secondary's gray-500 */
}

/* Extra spacing below markdown fields in composites (descriptions, notes, etc.)
   so subsequent fields (text labels, badges) have breathing room */
.composite-secondary:has(> .prose),
.composite-primary:has(> .prose) {
    margin-bottom: 0.125rem; /* 2px extra below markdown content */
}

/* Primary emphasis labels - darker than secondary labels, lighter than primary values */
.composite-primary .composite-label {
    color: #6b7280;          /* gray-500 - lighter than primary's gray-800 */
}

/* SVG icon rows - flex layout for hanging indent (text wraps under itself, not under icon) */
.composite-icon-row {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
}
.composite-icon-row .composite-label-icon {
    flex-shrink: 0;
    margin-top: 5px;         /* Align icon with text baseline */
}
.composite-icon-row .composite-icon-value {
    min-width: 0;            /* Allow text to wrap within its column */
}

/* SVG icon styling - override inline stroke colors */
.composite-label-icon svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: none !important;
}
.composite-label-icon svg path,
.composite-label-icon svg line,
.composite-label-icon svg circle,
.composite-label-icon svg rect,
.composite-label-icon svg polyline,
.composite-label-icon svg polygon {
    stroke: #9ca3af !important;  /* gray-400 for secondary emphasis */
}

/* Primary emphasis SVG icons - darker stroke */
.composite-primary .composite-label-icon svg path,
.composite-primary .composite-label-icon svg line,
.composite-primary .composite-label-icon svg circle,
.composite-primary .composite-label-icon svg rect,
.composite-primary .composite-label-icon svg polyline,
.composite-primary .composite-label-icon svg polygon {
    stroke: #6b7280 !important;  /* gray-500 for primary emphasis */
}

/* Inline field group - horizontal layout for compact fields (e.g., LinkedIn + Email + Phone) */
.composite-inline-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;  /* row-gap column-gap */
    align-items: baseline;
}
.composite-inline-group > div {
    white-space: nowrap;
}

/* ========== Special Column Widths ========== */

.table-col-row-number {
    max-width: 80px;
    width: auto;
    white-space: nowrap;  /* Prevent digit wrapping - column auto-sizes to fit */
    padding-left: 0.5rem !important;   /* tighter than default px-4 */
    padding-right: 0.5rem !important;
    text-align: center !important;     /* override th's text-left */
}

.table-col-status {
    /* Auto-size to content, capped at medium column width */
    max-width: 400px;
    width: auto;
    padding-left: 0.25rem !important;  /* snug against row number column */
}

/* ========== Sticky Column Support ========== */

/* Sticky column positioning — visual treatment (blue bg, pulse) comes from enrichment-active-col */
.sticky-col {
    position: sticky;
    left: 0;
    overflow: visible;
    animation: sticky-slide-in 0.3s ease-out, enrichment-text-pulse 2s ease-in-out 0.3s infinite;
}
td.sticky-col { z-index: 5; }
th.sticky-col { z-index: 15; }

/* Gradient fade starting at cell's right edge, extending 20px outward */
.sticky-col.enrichment-active-col::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -20px;
    width: 20px;
    pointer-events: none;
    background: linear-gradient(to right, var(--enrich-bg), transparent);
}

/* Slide-in animation when column becomes sticky */
@keyframes sticky-slide-in {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Subtle text color pulse - darker gray to lighter gray */
@keyframes enrichment-text-pulse {
    0%, 100% { color: #4b5563; } /* gray-600 */
    50% { color: #9ca3af; } /* gray-400 */
}

/* In-progress cell sentinel — italicized text with pulsing fade */
.cell-in-progress {
    font-style: italic;
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* gray-500 */
    animation: enrichment-text-pulse 2s ease-in-out infinite;
}

/* Enrichment row visual treatment — blue bg + text pulse for # and Enrichment Status cells */
td.enrichment-active-col {
    --enrich-bg: #eff6ff; /* blue-50 */
    background-color: var(--enrich-bg);
    animation: enrichment-text-pulse 2s ease-in-out 0.3s infinite;
}
th.enrichment-active-col {
    --enrich-bg: #dbeafe; /* blue-100 */
    background-color: var(--enrich-bg);
    animation: enrichment-text-pulse 2s ease-in-out 0.3s infinite;
}

/* Enrichment Status hide button overlay - positions button at bottom of header cell */
.enrichment-hide-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 10;
    pointer-events: none; /* Let clicks pass through to header, except button */
}

.enrichment-hide-overlay button {
    pointer-events: auto; /* Button is still clickable */
    transform: translateY(50%); /* Straddle the bottom border */
}

/* ========== Floating Scroll Button ========== */

.scroll-to-bottom-btn {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.scroll-to-bottom-btn:active {
    opacity: 0.8;
}

/* ========== Typing Cursor ========== */

/* Pulsing circle indicator - reuses circlePulse animation from tool cards */
.typing-cursor {
    font-size: 0.75rem;
    color: #6b7280; /* gray-500 */
    animation: circlePulse 1.5s ease-in-out infinite;
    line-height: 1;
    padding: 0.125rem 0;
}

.thinking-word {
    font-size: 0.8125rem; /* 13px */
    color: #9ca3af; /* gray-400 */
    animation: textPulse 1.5s ease-in-out infinite;
    padding: 0.125rem 0;
    letter-spacing: 0.01em;
}

@keyframes textPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ========== Voice Recording ========== */

/* Voice recording button pulse animation - prominent expanding ring effect */
.voice-recording-pulse {
    animation: voice-pulse 1s ease-in-out infinite;
}

@keyframes voice-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
}

/* ========== Unified Tooltip System ========== */

/* Base tooltip styles (shared) */
.tooltip-base {
    position: absolute;
    padding: 6px 12px;
    background: #1f2937;
    color: white;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    /* No transition - instant show/hide feels snappier */
    z-index: 50;
}

/* Show on hover (generic trigger) */
.has-tooltip:hover .tooltip-base,
.voice-btn-wrapper:hover .tooltip-base {
    opacity: 1;
}

/* Position: above */
.tooltip-above {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}
.tooltip-above::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
}

/* Position: below */
.tooltip-below {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
}
.tooltip-below::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #1f2937;
}

/* Position: left (for voice tooltip) */
.tooltip-left {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 10px;
}
.tooltip-left::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #1f2937;
}

/* Auto-show expand tooltip (one-time educational hint on first table scroll, dismissed on hover) */
.expand-tooltip-autoshow {
    opacity: 1 !important;
}

/* Position: right */
.tooltip-right {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 10px;
}
.tooltip-right::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1f2937;
}

/* Voice intro tooltip - always visible with purple styling */
.voice-intro-tooltip {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 10px;
    padding: 8px 14px;
    background: #7c3aed;
    color: white;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
    animation: voice-intro-pulse 2s ease-in-out infinite;
}
.voice-intro-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #7c3aed;
}

@keyframes voice-intro-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(124, 58, 237, 0.6); }
}

/* ========== Message Action Buttons ========== */

.message-actions {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.message-actions:hover,
.message-actions:has(button:focus) {
    opacity: 1;
}

/* Action button tooltip - appears below on hover */
.msg-action-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    padding: 4px 8px;
    background: #1f2937;
    color: white;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    /* No transition - instant show/hide feels snappier */
    z-index: 50;
}

/* Arrow pointing up */
.msg-action-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: #1f2937;
}

/* Show tooltip on hover */
.has-tooltip:hover .msg-action-tooltip {
    opacity: 1;
}

/* Rating feedback popover - tooltip-style with white bg for input */
.rating-feedback-popover {
    width: 260px;
    padding: 12px;
    border-radius: 8px;
}

/* Arrow pointing up (positioned by Floating UI) */
.rating-feedback-arrow {
    position: absolute;
    bottom: 100%;
    border: 6px solid transparent;
    border-bottom-color: white;
}

/* ========== Email Interactive Elements ========== */

/* Email interactive elements (click-to-copy, hover menu) */
.email-interactive {
    color: #111827;
    text-decoration: underline;
    text-decoration-color: #d1d5db;  /* gray-300 */
    text-underline-offset: 2px;
    cursor: pointer;
}
.email-interactive:hover {
    color: #4b5563;
    text-decoration-color: currentColor;
}

/* Email draft preview card in table cells */
.email-draft-card {
    padding: 0;
    border: 1px solid #6b7280;
    border-radius: 8px;
    min-width: 300px;
    max-width: 320px;
    background: #fff;
    overflow: hidden;
}
.email-draft-card:hover {
    border-color: #374151;
}
.email-draft-card:hover .email-draft-card-btn {
    background-color: #1557b0;
}
.email-draft-card-subject {
    background-color: #f3f4f6;
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.email-draft-card-to {
    padding: 4px 8px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.email-draft-card-body {
    padding: 4px 8px 0 8px;
    font-size: 13px;
    color: #374151;
}
.email-draft-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    background-color: #1a73e8;
    color: white;
    border: none;
    cursor: pointer;
}
.email-draft-card-btn:hover {
    background-color: #1557b0;
}

/* Email draft card footer (button row) */
.email-draft-card-footer {
    padding: 0 8px;
    margin-top: 12px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Line clamp utility for email draft body preview */
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Email draft skeleton loading state */
.email-draft-skeleton {
    pointer-events: none;
}
.skeleton-bar {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e5e7eb 25%, #d1d5db 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.skeleton-bar-pill {
    height: 24px;
    border-radius: 9999px;
}

/* Email draft ghost card — empty/unenriched state */
.email-draft-ghost {
    border-style: dashed;
    border-color: #d1d5db;
    background: #fafafa;
    cursor: pointer;
}
.email-draft-ghost:hover {
    border-color: #9ca3af;
    background: #f3f4f6;
}
.email-draft-ghost:hover .email-draft-ghost-btn {
    color: #374151;
    border-color: #9ca3af;
}
.email-draft-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    color: #9ca3af;
    border: 1px solid #d1d5db;
    cursor: pointer;
}
.email-draft-ghost-btn:hover {
    color: #374151;
    border-color: #9ca3af;
    background: #f9fafb;
}

/* ========== Cell Truncation (Read More) ========== */

/* Container for truncatable cell content - applies 12-line clamp */
.cell-clampable {
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Read more" link below clamped content - hidden by default, shown by JS when overflow detected */
.cell-readmore {
    display: none;
    margin-top: 4px;
    font-size: 0.875rem;  /* text-sm — matches table cell text */
    color: #111827;
    text-decoration: underline;
    text-decoration-color: #d1d5db;  /* gray-300 */
    text-underline-offset: 2px;
    cursor: pointer;
}
.cell-readmore:hover {
    color: #4b5563;
    text-decoration-color: currentColor;
}
.cell-readmore-visible {
    display: block;
}

/* Cell expand popover (shown when clicking "Read more") */
.cell-expand-popover {
    display: flex;
    flex-direction: column;
    width: 500px;
    max-width: calc(100vw - 32px);
    max-height: 50vh;
    border: 1px solid #e7e5e4;
    font-size: 0.875rem;
}

/* Popover header with column name and close button */
.cell-expand-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 6px 16px;
    border-bottom: 1px solid #e5e7eb;
}

/* Popover scrollable content area */
.cell-expand-popover-content {
    padding: 12px 16px 16px;
    overflow-y: auto;
    flex: 1;
}

/* Prose styling inside popover */
.cell-expand-popover-content .prose {
    max-width: none;
}

/* Email tooltip (hover menu and "Copied!" state, positioned via Floating UI) */
.email-tooltip {
    position: fixed;
    padding: 0;  /* No padding - buttons fill the entire tooltip */
    background: #1f2937;
    color: white;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 50;
    pointer-events: auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Note: NO overflow:hidden - it would clip the ::before hover bridge */
    min-width: 230px;  /* Prevent shrinking when showing "Copied!" */
}

/* Hover bridge - extends clickable area down to email element */
.email-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 15px;  /* Covers arrow (5px) + gap (8px) + buffer */
    pointer-events: auto;  /* Explicitly catch mouse events */
    background: transparent;  /* Needed for event capture in some browsers */
}

/* Tooltip arrow pointing down (positioned horizontally by Floating UI) */
.email-tooltip-arrow {
    position: absolute;
    top: 100%;
    border: 5px solid transparent;
    border-top-color: #1f2937;
}

/* Menu buttons inside tooltip - fill full height */
.email-tooltip button {
    padding: 8px 12px;  /* Generous padding for full-height buttons */
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 0;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.1s ease;
}
.email-tooltip button:first-child {
    border-radius: 6px 0 0 6px;  /* Match tooltip border-radius on left edge */
}
.email-tooltip button:last-child {
    border-radius: 0 6px 6px 0;  /* Match tooltip border-radius on right edge */
}
.email-tooltip button:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Dividers between menu buttons */
.email-tooltip button + button {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* "Copied!" state styling */
.email-tooltip-copied {
    padding: 8px 14px;  /* Match button padding for consistent height */
    display: flex;
    align-items: center;
    justify-content: center;  /* Center horizontally within min-width */
    gap: 4px;
}

/* ========== Tool Card Styles ========== */

/* Tool status indicator - fixed width to prevent layout shift */
.tool-status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem; /* fixed width for checkmark or pulsing circle */
    flex-shrink: 0;
}

/* Pulsing circle for in-progress tools */
.tool-status-indicator .pulsing-circle {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #6b7280; /* gray-500 */
    animation: circlePulse 1.5s ease-in-out infinite;
}

@keyframes circlePulse {
    0%, 100% { opacity: 1; transform: scale(1.1); }
    50% { opacity: 0.4; transform: scale(0.9); }
}

/* Checkmark for complete tools */
.tool-status-indicator .checkmark {
    color: #6b7280; /* gray-500 - slightly lighter than text for subtlety */
    font-size: 0.875rem;
}

/* Tool text styling - matches assistant prose (gray-700 is Tailwind prose default) */
.tool-text {
    color: #374151; /* gray-700 - matches prose body text */
}

.tool-text-interrupted {
    color: #9ca3af; /* gray-400 */
}

/* Tool card base styles - shared by all tool cards */
.tool-card-base {
    display: inline-flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid;
}

/* Gray tool cards - in-progress (dashed border + opacity pulse) */
.tool-card-in-progress {
    background: #f9fafb; /* gray-50 */
    border-color: #d1d5db; /* gray-300 */
    border-style: dashed;
    color: #6b7280; /* gray-500 */
    animation: cardPulse 1.5s ease-in-out infinite;
}

/* Gray tool cards - complete (solid border) */
.tool-card-complete {
    background: #f9fafb; /* gray-50 */
    border-color: #d1d5db; /* gray-300 */
    color: #6b7280; /* gray-500 */
}

/* Gray tool cards - interrupted (solid border, slightly faded) */
.tool-card-interrupted {
    background: #f9fafb; /* gray-50 */
    border-color: #d1d5db; /* gray-300 */
    color: #9ca3af; /* gray-400 - slightly more faded */
}

/* Gate nudge card (inline sign-up prompt — purple for "attention needed") */
.gate-nudge-card {
    background: #faf5ff;
    border: 1px solid #d8b4fe;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
}
.gate-nudge-icon {
    color: #a855f7;
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.gate-nudge-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.125rem;
}
.gate-nudge-subtitle {
    color: #6b7280;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}
.gate-nudge-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #e879a0, #a855f7);
    color: #fff;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
.gate-nudge-btn:hover {
    background: linear-gradient(135deg, #e06090, #9333ea);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
}

/* ── Sign-in modal ── */

.sign-in-backdrop {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.sign-in-modal {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sign-in-modal-header {
    position: relative;
    padding: 20px 24px 16px;
    background: rgba(225, 235, 250, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 0 12px 6px rgba(225, 235, 250, 0.45);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px 12px 0 0;
}

.sign-in-dismiss {
    font-size: 0.8125rem;
    color: #a8a29e;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.sign-in-dismiss:hover {
    color: #78716c;
}

.sign-in-benefits {
    padding: 12px 14px;
    background: rgba(250, 245, 255, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.1);
    border-radius: 12px;
    margin-bottom: 16px;
}
.sign-in-benefits-title {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.sign-in-benefits-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sign-in-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #4b5563;
    line-height: 1.4;
}
.sign-in-benefit-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #a855f7;
}

.sign-in-cta {
    width: 100%;
    background: linear-gradient(135deg, #e879a0, #a855f7);
    color: #fff;
    border-radius: 9999px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
.sign-in-cta:hover {
    background: linear-gradient(135deg, #e06090, #9333ea);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
}
.sign-in-cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Enrichment card - in progress (sky blue with notification options) */
.enrichment-hint-card-in-progress {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); /* sky-50 to sky-100 */
    border: 1px solid #7dd3fc; /* sky-300 */
    border-radius: 0.5rem;
    color: #0c4a6e; /* sky-900 */
    padding: 0.75rem 1rem 0.75rem 0.5rem; /* left padding matches tool-card-base for indicator alignment */
    font-size: 0.875rem; /* match prose-sm */
}

/* Enrichment card - complete (green, same size as regular tool cards) */
.enrichment-hint-card-complete {
    background: #f0fdf4; /* green-50 */
    border-color: #bbf7d0; /* green-200 - subtler than green-300 */
    color: #166534; /* green-800 */
}

/* ========== Enrichment Notification UI ========== */

.enrichment-enhanced-content {
    margin-top: 8px;
}

.enrichment-time-estimate {
    margin-top: 4px;
    margin-bottom: 12px;
}

.enrichment-notify-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Browser notification button - pill shape */
.enrichment-notify-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569; /* slate-600 */
    background: white;
    border: 1px solid #cbd5e1; /* slate-300 */
    border-radius: 9999px; /* pill shape */
    cursor: pointer;
    transition: all 0.15s ease;
}

.enrichment-notify-btn:hover:not(:disabled) {
    background: #f8fafc; /* slate-50 */
    border-color: #94a3b8; /* slate-400 */
}

.enrichment-notify-btn:active:not(:disabled) {
    background: #f1f5f9; /* slate-100 */
}

.enrichment-notify-btn-enabled {
    background: #f1f5f9; /* slate-100 */
    cursor: default;
}

.enrichment-notify-btn-disabled {
    color: #94a3b8; /* slate-400 */
    background: #f1f5f9; /* slate-100 */
    border-color: #e2e8f0; /* slate-200 */
    cursor: not-allowed;
}

/* Email input group - pill shape */
.enrichment-email-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid #cbd5e1; /* slate-300 */
    border-radius: 9999px; /* pill shape */
    overflow: hidden;
    transition: border-color 0.15s ease;
    background: white;
}

.enrichment-email-input-group:focus-within {
    border-color: #94a3b8; /* slate-400 */
}

.enrichment-email-input-group.submitted {
    background: #f1f5f9; /* slate-100 */
}

.enrichment-email-input {
    width: 150px;
    padding: 7px 14px;
    font-size: 0.8125rem;
    border: none;
    outline: none;
    background: transparent;
}

.enrichment-email-input::placeholder {
    color: #94a3b8; /* slate-400 */
}

.enrichment-email-input:disabled {
    color: #64748b; /* slate-500 */
}

.enrichment-email-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: #f8fafc; /* slate-50 */
    border: none;
    border-left: 1px solid #e2e8f0; /* slate-200 */
    color: #475569; /* slate-600 - match browser button */
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.enrichment-email-submit:hover:not(:disabled) {
    background: #f1f5f9; /* slate-100 */
    color: #334155; /* slate-700 */
}

.enrichment-email-submit:disabled {
    cursor: default;
    background: transparent;
    border-left-color: transparent;
}

/* Shake animation for validation errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.shake {
    animation: shake 0.4s ease-in-out;
}

/* ========== Follow-up Suggestion Chips ========== */

/* Staggered entrance: slide up + fade in + rainbow border cycle → purple linger → neutral */
.suggestion-chip {
    position: relative;
    animation: chipRainbow 0.35s ease-out backwards;
}
.suggestion-chip:nth-child(1)  { animation-delay: 0ms; }
.suggestion-chip:nth-child(2)  { animation-delay: 350ms; }
.suggestion-chip:nth-child(3)  { animation-delay: 700ms; }
.suggestion-chip:nth-child(4)  { animation-delay: 1050ms; }
.suggestion-chip:nth-child(5)  { animation-delay: 1400ms; }
.suggestion-chip:nth-child(6)  { animation-delay: 1750ms; }
.suggestion-chip:nth-child(7)  { animation-delay: 2100ms; }
.suggestion-chip:nth-child(8)  { animation-delay: 2450ms; }
.suggestion-chip:nth-child(9)  { animation-delay: 2800ms; }
.suggestion-chip:nth-child(10) { animation-delay: 3150ms; }

@keyframes chipRainbow {
    0% {
        opacity: 0;
        transform: translateY(6px);
        border-color: #fb923c; /* orange-400 */
    }
    15% {
        opacity: 1;
        transform: translateY(0);
        border-color: #facc15; /* yellow-400 */
    }
    35% {
        border-color: #4ade80; /* green-400 */
    }
    55% {
        border-color: #60a5fa; /* blue-400 */
    }
    72% {
        border-color: #a855f7; /* purple-500 — linger */
        box-shadow: 0 0 6px 0 rgba(168, 85, 247, 0.15);
    }
    86% {
        border-color: #c084fc; /* purple-400 — still purple */
        box-shadow: 0 0 4px 0 rgba(192, 132, 252, 0.1);
    }
    100% {
        border-color: #e5e7eb; /* gray-200 — settle to neutral */
        box-shadow: none;
    }
}

/* Featured chip: star sticker on upper-left corner */
.suggestion-chip-star {
    position: absolute;
    top: -3px;
    left: 0px;
    font-size: 9px;
    line-height: 1;
    color: #a855f7; /* purple-500 */
    pointer-events: none;
}

/* ========== Subagent Progress UI ========== */

.subagent-progress-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.subagent-progress-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #374151; /* gray-700, matches standard tool card text */
}

.subagent-progress-item.pending {
    color: #64748b; /* slate-500 */
}

.subagent-status-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    font-size: 0.6875rem;
    line-height: 1;
}

/* Pending: hollow gray circle */
.subagent-status-dot.pending {
    width: 8px;
    height: 8px;
    margin: 0 3px; /* center within 14px */
    border-radius: 50%;
    border: 1.5px solid #94a3b8; /* slate-400 */
}

/* Running: pulsing gray circle (matches other tool status indicators) */
.subagent-status-dot.running {
    width: 8px;
    height: 8px;
    margin: 0 3px;
    border-radius: 50%;
    background-color: #6b7280; /* gray-500, same as pulsing-circle */
    animation: circlePulse 1.5s ease-in-out infinite;
}

/* Completed: gray check */
.subagent-status-dot.completed {
    color: #6b7280; /* gray-500 */
    font-weight: 600;
}

/* Failed: red cross */
.subagent-status-dot.failed {
    color: #dc2626; /* red-600 */
    font-weight: 600;
}

.subagent-label {
    flex-shrink: 0;
}

.subagent-detail {
    color: #64748b; /* slate-500 */
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ========== Dynamic Scroll Spacer ========== */

.dynamic-scroll-spacer {
    transition: height 0.3s ease-out;
}

/* ========== Sticky Table Header ========== */

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    /* Background already set via bg-gray-50 class */
    /* Use filter for Safari compatibility (box-shadow gets clipped on sticky table elements) */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

/* ========== Mobile-Specific Styles ========== */

/* Mobile floating tab - shared base styles */
.mobile-floating-tab {
    position: fixed;
    top: 35%;
    width: 78px;      /* wider to allow partial off-screen positioning */
    min-height: 80px;
    z-index: 25;       /* below mobile table panel (z-30), above header (z-20) */
    background-color: white;
    border: 1px solid #9ca3af; /* gray-400 - darker border */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mobile-floating-tab:active {
    background-color: #f9fafb; /* gray-50 - subtle press feedback */
}

/* Right-side tab (Table) - partially hidden off-screen */
.mobile-floating-tab-right {
    right: -38px;   /* 38px hidden off-screen (30px bounce + 8px buffer for overshoot) */
    padding-right: 38px;  /* push content left into visible area */
    border-radius: 0.5rem 0 0 0.5rem; /* rounded-l-lg */
    border-right: none; /* no border on edge touching screen */
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.12);
}

/* Left-side tab (Chat) - partially hidden off-screen */
.mobile-floating-tab-left {
    left: -38px;    /* 38px hidden off-screen (30px bounce + 8px buffer for overshoot) */
    padding-left: 38px;   /* push content right into visible area */
    z-index: 35; /* above mobile table panel (z-30) */
    border-radius: 0 0.5rem 0.5rem 0; /* rounded-r-lg */
    border-left: none; /* no border on edge touching screen */
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
}

/* Mobile tab content container */
.mobile-tab-content {
    text-align: center;
    padding: 0 0.25rem;
}

/* Mobile tab icon - darker gray for visibility */
.mobile-tab-icon {
    width: 1.25rem;  /* w-5 */
    height: 1.25rem; /* h-5 */
    margin: 0 auto 0.25rem auto;
    color: #6b7280; /* gray-500 - darker than gray-400 */
}

/* Mobile tab label - match mobile-tab-count styling for visual consistency */
.mobile-tab-label {
    font-size: 0.75rem; /* text-xs - same as mobile-tab-count */
    font-weight: 600;
    color: #374151; /* gray-700 - same as mobile-tab-count */
}

/* Mobile tab count - prominent number */
.mobile-tab-count {
    font-size: 0.75rem; /* text-xs */
    font-weight: 600;
    color: #374151; /* gray-700 */
}

/* Physical bounce animations for floating tabs (30px travel, 2 bounces) */
@keyframes tabBounceRight {
    0% { transform: translateX(0); }
    30% { transform: translateX(-30px); }   /* extend toward center */
    60% { transform: translateX(-6px); }    /* bounce back */
    100% { transform: translateX(0); }      /* return to baseline */
}

@keyframes tabBounceLeft {
    0% { transform: translateX(0); }
    30% { transform: translateX(30px); }
    60% { transform: translateX(6px); }
    100% { transform: translateX(0); }
}

/* Bounce classes run BOTH bounce and pulse animations together */
.tab-bounce-right {
    animation: tabBounceRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               tabPulse 0.6s ease-out forwards;
    background-color: #fef9c4;
    border-color: #eab308;
}

.tab-bounce-left {
    animation: tabBounceLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               tabPulse 0.6s ease-out forwards;
    background-color: #fef9c4;
    border-color: #eab308;
}

/* Tab pulse animation - one-shot yellow pulse, stays yellow until dismissed */
@keyframes tabPulse {
    0% {
        background-color: white;
        border-color: #9ca3af;  /* gray-400 - default */
    }
    50% {
        background-color: #fef08a;  /* yellow-200 - bright pulse */
        border-color: #ca8a04;      /* yellow-600 - darker border */
    }
    100% {
        background-color: #fef9c4;  /* yellow-100 - resting yellow */
        border-color: #eab308;      /* yellow-500 - resting border */
    }
}

/* Resting yellow state - no animation, just colors (bounce handles animation) */
.tab-pulse {
    background-color: #fef9c4;
    border-color: #eab308;
}

/* ========== Question Mode Input Styling ========== */

/* Purple glow effect for question mode input container */
.question-mode-glow {
    box-shadow: 0 0 8px rgba(147, 51, 234, 0.5);
}

/* ========== Debug Panel ========== */

.debug-panel {
    max-height: 70vh;
    overflow-y: auto;
}

/* ========== Artifact Banner (Generic) ========== */

/* Banner container - uses CSS Grid for height animation to actual content */
.artifact-banner {
    display: grid;
    grid-template-rows: 0fr;
    /* No transition by default = instant dismiss */
}

.artifact-banner.visible {
    grid-template-rows: 1fr;
    /* Transition only on appear, not dismiss */
    transition: grid-template-rows 0.3s linear;
}

/* Inner wrapper required for grid height animation */
.artifact-banner-inner {
    overflow: hidden;
}

.artifact-banner-content {
    padding: 0.625rem 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.artifact-banner-text {
    font-size: 0.875rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.artifact-banner-dismiss {
    flex-shrink: 0;
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

/* Clickable links in banner */
.artifact-banner-link {
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ========== Artifact Banner: Warning Variant (yellow) ========== */

.artifact-banner.warning {
    background-color: #fefce8; /* yellow-50 */
    border-bottom: 1px solid #fde047; /* yellow-300 */
}

.artifact-banner.warning .artifact-banner-text {
    color: #713f12; /* yellow-900 */
}

.artifact-banner.warning .artifact-banner-link {
    color: #a16207; /* yellow-700 */
}

.artifact-banner.warning .artifact-banner-link:hover {
    color: #854d0e; /* yellow-800 */
}

.artifact-banner.warning .artifact-banner-dismiss {
    color: #a16207; /* yellow-700 */
}

.artifact-banner.warning .artifact-banner-dismiss:hover {
    background-color: rgba(161, 98, 7, 0.1);
    color: #854d0e; /* yellow-800 */
}

/* Warning pulse animation */
.artifact-banner.warning.visible {
    animation: banner-pulse-warning 1s ease-in-out 1;
}

@keyframes banner-pulse-warning {
    0%, 100% {
        background-color: #fefce8; /* yellow-50 */
        border-color: #fde047; /* yellow-300 */
    }
    50% {
        background-color: #fef08a; /* yellow-200 */
        border-color: #facc15; /* yellow-400 */
    }
}

/* ========== Artifact Banner: Info Variant (sky blue) ========== */

.artifact-banner.info {
    background-color: #f0f9ff; /* sky-50 */
    border-bottom: 1px solid #7dd3fc; /* sky-300 */
}

.artifact-banner.info .artifact-banner-text {
    color: #0c4a6e; /* sky-900 */
}

.artifact-banner.info .artifact-banner-link {
    color: #0369a1; /* sky-700 */
}

.artifact-banner.info .artifact-banner-link:hover {
    color: #0c4a6e; /* sky-900 */
}

.artifact-banner.info .artifact-banner-dismiss {
    color: #0369a1; /* sky-700 */
}

.artifact-banner.info .artifact-banner-dismiss:hover {
    background-color: rgba(3, 105, 161, 0.1);
    color: #0c4a6e; /* sky-900 */
}

/* Info pulse animation */
.artifact-banner.info.visible {
    animation: banner-pulse-info 1s ease-in-out 1;
}

@keyframes banner-pulse-info {
    0%, 100% {
        background-color: #f0f9ff; /* sky-50 */
        border-color: #7dd3fc; /* sky-300 */
    }
    50% {
        background-color: #e0f2fe; /* sky-100 */
        border-color: #38bdf8; /* sky-400 */
    }
}

/* ========== Artifact Banner: Purple Variant ========== */

.artifact-banner.purple {
    background-color: #faf5ff; /* purple-50 */
    border-bottom: 1px solid #d8b4fe; /* purple-300 */
}

.artifact-banner.purple .artifact-banner-text {
    color: #581c87; /* purple-900 */
}

.artifact-banner.purple .artifact-banner-link {
    color: #7e22ce; /* purple-700 */
}

.artifact-banner.purple .artifact-banner-link:hover {
    color: #581c87; /* purple-900 */
}

.artifact-banner.purple .artifact-banner-dismiss {
    color: #7e22ce; /* purple-700 */
}

.artifact-banner.purple .artifact-banner-dismiss:hover {
    background-color: rgba(126, 34, 206, 0.1);
    color: #581c87; /* purple-900 */
}

/* Purple pulse animation */
.artifact-banner.purple.visible {
    animation: banner-pulse-purple 1s ease-in-out 1;
}

@keyframes banner-pulse-purple {
    0%, 100% {
        background-color: #faf5ff; /* purple-50 */
        border-color: #d8b4fe; /* purple-300 */
    }
    50% {
        background-color: #f3e8ff; /* purple-100 */
        border-color: #c084fc; /* purple-400 */
    }
}

/* ========== New Column Header Highlight ========== */

/* Subtle purple highlight that fades over 10 seconds */
@keyframes column-highlight-fade {
    0% {
        background-color: #f3e8ff; /* purple-100 */
    }
    100% {
        background-color: transparent;
    }
}

th.new-column-highlight {
    animation: column-highlight-fade 10s ease-out forwards;
}

/* ========== Notification Cards (macOS-style slide-in) ========== */

/* Wrapper: positioned below expand button, right-aligned with it */
.notif-card-wrapper {
    position: absolute;
    top: 64px; /* 12px (button top) + 40px (button) + 12px (matching gap) */
    right: 12px; /* aligned with expand button's right edge */
    z-index: 20;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notif-card-wrapper > * {
    pointer-events: auto;
}

/* Card body — frosted glass */
.notif-card {
    /* Frosted glass — blue-gray tint, more opaque for legibility */
    background: rgba(225, 235, 250, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* Glass rim — light top/side edges, subtle bottom shadow */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    border-left: 3px solid #c084fc; /* default purple accent */
    border-radius: 14px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.14),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 0 12px 6px rgba(225, 235, 250, 0.35);
    padding: 12px 14px;
    position: relative;
    max-width: 280px;
    min-width: 220px;
}

.notif-card:hover {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 0 12px 6px rgba(225, 235, 250, 0.35);
}

/* Color variants */
.notif-card--purple { border-left-color: #c084fc; }
.notif-card--blue   { border-left-color: #60a5fa; }
.notif-card--green  { border-left-color: #4ade80; }

/* Card inner layout */
.notif-card-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.notif-card-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.notif-card-icon--purple { background: linear-gradient(135deg, #e9d5ff, #f3e8ff); }
.notif-card-icon--blue   { background: linear-gradient(135deg, #bfdbfe, #dbeafe); }
.notif-card-icon--green  { background: linear-gradient(135deg, #bbf7d0, #dcfce7); }

.notif-card-content {
    flex: 1;
    min-width: 0;
}

.notif-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.notif-card-body {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    margin-top: 1px;
}

/* Clickable links inside card body — matches app's standard link style */
.notif-card-link {
    color: #111827; /* gray-900 */
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #d1d5db; /* gray-300 */
    text-underline-offset: 2px;
}

.notif-card-link:hover {
    color: #4b5563; /* gray-600 */
    text-decoration-color: #6b7280; /* gray-500 */
}

/* Close/dismiss button — large touch target, small visual icon */
.notif-card-dismiss {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: -6px -6px -6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #9ca3af;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.notif-card-dismiss:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #4b5563;
}

/* Progress bar (auto-dismiss countdown) */
.notif-card-progress {
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    border-radius: 1px;
    overflow: hidden;
}

.notif-card-progress-bar {
    height: 100%;
    border-radius: 1px;
    background: rgba(124, 58, 237, 0.3);
}

.notif-card-progress-bar--blue  { background: rgba(37, 99, 235, 0.3); }
.notif-card-progress-bar--green { background: rgba(22, 163, 74, 0.3); }

.notif-card-progress-bar.animate {
    animation: notifProgressShrink linear forwards;
}

@keyframes notifProgressShrink {
    0%   { width: 100%; }
    100% { width: 0%; }
}

/* Slide-in/out animations */
.notif-card-enter {
    animation: notifSlideIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

.notif-card-exit {
    animation: notifSlideOut 0.25s ease-in forwards;
}

@keyframes notifSlideIn {
    0% {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes notifSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(80%) scale(0.95);
    }
}

/* ========== Parked Column Suggestion Card ========== */

/* Persistent card sitting to the right of the table */
.notif-card-parked {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px 14px;
    max-width: 280px;
    min-width: 220px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.04);
    margin-left: 24px;
    margin-right: 64px;
    /* Fixed vertically centered in viewport, scrolls horizontally with table */
    position: sticky;
    top: 20%;
    align-self: flex-start;
}

/* Pill container inside notification cards */
.notif-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* Parked card: pills always stack vertically, one per row */
.notif-card-parked .notif-card-pills {
    flex-direction: column;
}

/* Hide notification cards and parked card on mobile */
@media (max-width: 768px) {
    .notif-card-wrapper,
    .notif-card-parked {
        display: none !important;
    }
}

/* ========== Header Dropdown Menus ========== */

.header-dropdown {
    margin-top: 4px;
}

/* Thread menu item */
.thread-menu-item {
    position: relative;
}

/* Small label for "Current chat" indicator */
.current-chat-label {
    background: #f9fafb;
    color: #6b7280;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Open in new tab button wrapper - gradient overlay (instant show/hide) */
.thread-menu-newtab-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-right: 1.25rem;
    padding-left: 2rem;
    background: linear-gradient(to right, transparent, #f3f4f6 50%); /* gray-100 to match hover */
    opacity: 0;
}
.thread-menu-item:hover .thread-menu-newtab-wrapper {
    opacity: 1;
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    /* Ensure prose doesn't overflow on mobile */
    .prose {
        max-width: 100% !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Prevent body scroll when mobile table is open */
    body.mobile-table-open {
        overflow: hidden;
    }

    /* Remove right-side table gutter (no outer padding on mobile) */
    .table-gutter {
        padding-right: 0;
    }

    /* Cell expand popover → full-screen modal on mobile.
       !important overrides inline styles set by Floating UI positioning. */
    .cell-expand-popover {
        left: 8px !important;
        right: 8px !important;
        top: 48px !important;
        bottom: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        transform: none !important;
        border-radius: 16px;
    }

    /* Mobile enter/leave transitions for cell expand modal */
    .cell-expand-enter-active {
        transition: translate 0.1s ease-out;
    }
    .cell-expand-leave-active {
        transition: translate 0.1s ease-in;
    }
    .cell-expand-enter-from,
    .cell-expand-leave-to {
        translate: 0 100%;
    }
}

/* ========== Account Split Button ========== */
/* Structure: [ ▾ | email  avatar ] on desktop, [ ▾ | avatar ] on mobile */

.account-btn {
    display: flex;
    align-items: center;
    border-radius: 9999px;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    background: white;
    overflow: hidden;
}
.account-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Left section: chevron */
.account-btn-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    align-self: stretch;
}
.account-btn-chevron svg {
    width: 14px;
    height: 14px;
    color: #9ca3af;
}

/* Vertical separator — inset from top/bottom */
.account-btn-sep {
    width: 1px;
    align-self: stretch;
    margin: 6px 0;
    background: #d1d5db;
}

/* Right section: optional text + avatar */
.account-btn-identity {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 4px;
}
.account-btn-identity-with-text {
    padding-left: 10px;
}

.account-btn-text {
    font-size: 13px;
    color: #374151;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-btn-cta {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    background: linear-gradient(135deg, #e879a0, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Avatar circle inside the button */
.account-btn .avatar-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
}
.account-btn .avatar-circle-auth {
    background: #374151;
    color: white;
}
.account-btn .avatar-circle-anon {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #9ca3af;
}

/* Account menu: gradient CTA for anonymous sign-up.
   background-clip:text on the button itself blocks hover bg, so the gradient
   is applied to an inner span instead. The button keeps normal hover. */
.account-menu-cta {
    font-weight: 500;
}
.account-menu-cta span {
    background: linear-gradient(135deg, #e879a0, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.account-menu-cta svg {
    color: #c06;
}

/* ── Brief Builder Modal ─────────────────────────────── */

.brief-modal-container {
    animation: brief-modal-enter 0.2s ease-out;
}

@keyframes brief-modal-enter {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Frosted glass header — standard modals (same blue tint as brief builder) */
.modal-header-frosted {
    background: rgba(225, 235, 250, 0.6);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 0 12px 6px rgba(225, 235, 250, 0.45);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px 12px 0 0;
}

/* Frosted glass header — real backdrop blur, modal body provides the bg */
.brief-modal-header {
    padding: 20px 24px 0;
    background: rgba(225, 235, 250, 0.6);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 0 12px 6px rgba(225, 235, 250, 0.45);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px 12px 0 0;
}
.brief-modal-header-compact {
    /* No value prop grid — just close off after the title row's margin-bottom */
}

/* Value prop cards — horizontal row in frosted header */
.value-prop-grid {
    display: flex; gap: 6px; padding-bottom: 16px; padding-top: 4px;
}
.value-prop-card {
    position: relative;
    background: rgba(255,255,255,0.65);
    border: none;
    border-radius: 8px;
    padding: 7px 10px;
    display: flex; align-items: center; gap: 8px;
}
.value-prop-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.4;
}
.value-prop-card svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    stroke: url(#brief-vp-gradient);
}
.value-prop-card-text {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Chip styles — blue selected, gray unselected */
.brief-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 9999px;
    font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.1s; user-select: none;
}
.brief-chip-selected {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    color: #374151;
}
.brief-chip-selected:hover {
    background: #dbeafe;
    border-color: #60a5fa;
}
.brief-chip-unselected {
    background: white;
    border: 1px solid #9ca3af;
    color: #374151;
}
.brief-chip-unselected:hover {
    background: #f9fafb;
    border-color: #6b7280;
}
.chip-check {
    width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.chip-check-on svg { color: #1e40af; width: 14px; height: 14px; }
.chip-check-off {
    width: 12px; height: 12px;
    background: white;
    border: 1.5px solid #d1d5db;
    border-radius: 3px;
}
/* Inline pill input for chips */
.brief-chip-input {
    border: 1px solid #9ca3af;
    background: transparent;
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 13px;
    color: #374151;
    outline: none;
    min-width: 120px;
}
.brief-chip-input:focus { border-color: #6b7280; }
.brief-chip-input::placeholder { color: #9ca3af; }

/* Pill-shaped selects */
.brief-select {
    appearance: none;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    padding: 6px 32px 6px 14px;
    font-size: 13px;
    color: #374151;
    outline: none;
    cursor: pointer;
}
.brief-select:focus { border-color: #6b7280; }

/* Premium badge */
.brief-premium-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 9999px;
    font-size: 11px; font-weight: 600;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    letter-spacing: 0.02em;
    border: 1px dotted #d97706;
}

/* Autocomplete dropdown — name on one line, description below */
.brief-autocomplete-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: white; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; z-index: 10;
    max-height: 280px; overflow-y: auto;
}
.brief-autocomplete-item {
    padding: 10px 14px; cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.brief-autocomplete-item:last-child { border-bottom: none; }
.brief-autocomplete-item:hover, .brief-autocomplete-item.highlighted {
    background: #f3f4f6;
}
.brief-ac-name-row {
    display: flex; align-items: center; gap: 8px;
}
.brief-ac-name {
    flex: 1 1 auto; min-width: 0;
    font-size: 14px; font-weight: 600; color: #1f2937;
    line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brief-ac-desc {
    font-size: 12px; color: #9ca3af;
    line-height: 1.4; margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Catalog provenance badge — gray crosshair with inline-reveal label on hover/highlight */
.brief-ac-catalog-badge {
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    color: #9ca3af;
}
.brief-ac-catalog-label {
    max-width: 0; opacity: 0;
    overflow: hidden; white-space: nowrap;
    font-size: 11px; color: #9ca3af;
    transition: max-width 160ms ease, opacity 160ms ease;
}
.brief-autocomplete-item:hover .brief-ac-catalog-label,
.brief-autocomplete-item.highlighted .brief-ac-catalog-label {
    max-width: 180px; opacity: 1;
}
.brief-ac-catalog-icon {
    width: 14px; height: 14px;
    flex-shrink: 0;
    overflow: visible;
}

/* Autocomplete spinner */
.brief-ac-spinner {
    width: 16px; height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: brief-spin 0.6s linear infinite;
    display: inline-block;
}
@keyframes brief-spin {
    to { transform: rotate(360deg); }
}

/* Freeform "use as entered" row */
.brief-ac-freeform {
    border-top: 1px dashed #d1d5db;
}
.brief-ac-freeform-form {
    padding: 12px 14px;
    border-top: 1px dashed #d1d5db;
    background: #f0f4ff;
    cursor: default;
    animation: freeform-pop 0.35s ease-out;
}
@keyframes freeform-pop {
    0%   { background: #dbeafe; transform: scale(1.03); }
    50%  { background: #dbeafe; transform: scale(1); }
    100% { background: #f0f4ff; transform: scale(1); }
}
.brief-ac-freeform-header {
    margin-bottom: 2px;
}
.brief-ac-freeform-input {
    flex: 1; min-width: 0;
    font-size: 13px; padding: 7px 10px;
    border: 1px solid #cbd5e1; border-radius: 8px;
    outline: none; color: #374151;
    background: white;
}
.brief-ac-freeform-input:focus {
    border-color: #93a3b8;
    box-shadow: 0 0 0 2px rgba(147, 163, 184, 0.15);
}
.brief-ac-freeform-input::placeholder {
    color: #9ca3af;
}
.brief-ac-freeform-add-btn {
    font-size: 12px; padding: 7px 16px;
    border-radius: 999px;
    background: #374151; color: white;
    border: none;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    font-weight: 500;
}
.brief-ac-freeform-add-btn:hover {
    background: #1f2937;
}

/* Brief builder submit CTA — rose-purple gradient */
.brief-submit-btn {
    border-radius: 999px;
    padding: 6px 20px;
    font-size: 14px; font-weight: 600;
    color: white; border: none;
    background: linear-gradient(135deg, #e879a0, #a855f7);
    cursor: pointer;
}
.brief-submit-btn:hover {
    background: linear-gradient(135deg, #e06090, #9333ea);
}
.brief-submit-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
}

/* Step 2 section headings */
.brief-section-heading {
    font-size: 13px; font-weight: 700; color: #374151;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f3f4f6;
}

/* ========== Outbound Brief Admin Controls ========== */

/* Inline chevron for pill-shaped <select> elements that suppress native appearance */
.select-chevron {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

/* ========== Outbound Sequence Editor ========== */

/* Suppress native browser number-input spinners — we use custom nudge buttons */
input[type="number"].no-spinner::-webkit-inner-spin-button,
input[type="number"].no-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"].no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}

.nudge-pair {
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
}
.nudge-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 28px;
    border: 1px solid #d1d5db;
    background: white;
    color: #6b7280;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    user-select: none;
}
.nudge-btn:hover { background: #f3f4f6; color: #374151; }
.nudge-btn:active { background: #e5e7eb; }
.nudge-pair .nudge-btn:first-child {
    border-radius: 6px 0 0 6px;
    border-right: none;
}
.nudge-pair .nudge-btn:last-child {
    border-radius: 0 6px 6px 0;
}

.ob-immediate-label {
    position: absolute;
    left: 3.5rem;
    right: 0;
    top: 0;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #6b7280;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}

.week-strip {
    display: inline-grid;
    grid-template-columns: repeat(7, 1fr);
    width: 200px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: visible;
    margin-bottom: 16px;
}
.day-cell {
    position: relative;
    overflow: visible;
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    padding: 3px 0;
    background: white;
    font-family: ui-monospace, monospace;
    border-right: 1px solid #d1d5db;
}
.day-cell:last-child { border-right: none; }
.day-cell { cursor: pointer; }
.day-cell:hover { background: #e5e7eb; }
.day-cell.weekend { color: #6b7280; background: #f3f4f6; }
.day-cell.weekend:hover { background: #d1d5db; }
.day-cell.selected { background: #374151; color: white; }
.day-cell.selected:hover { background: #4b5563; }
.day-cell.selected.weekend { background: #b45309; color: white; }
.day-cell.selected.weekend:hover { background: #d97706; }
.day-cell[data-tag]:not([data-tag=""])::after {
    content: "▴\a" attr(data-tag);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    line-height: 1.1;
    color: #9ca3af;
    white-space: pre;
    text-align: center;
    pointer-events: none;
}