/**
 * CCC Insights - Minimal Styling (Relies on CCC Core)
 */

/*
 * Coach layout spacing:
 * - --coach-copilot-gutter: horizontal + vertical gaps between cards/columns (~30% tighter than former 40px).
 * - --coach-copilot-filter-gap: space under the filter bar before the grid (on #client-insights-display, not
 *   filter margin-bottom — avoids :has(+…) adjacency quirks and margin collapse).
 */
.client-ai-insights-container {
    --coach-copilot-gutter: 28px;
    --coach-copilot-filter-gap: 16px;
    /* Kai sticky rail: distance from viewport top when stuck + small bottom breathing room */
    --kai-sticky-top: 20px;
    --kai-vh-bottom-pad: 16px;
}

/* =============================================== */
/* HEADER SECTION - MATCHES NOTES PLUGIN PATTERN */
/* =============================================== */

/* Header with title and buttons - matches notes-header-section pattern */
.notes-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 0;
}

.notes-header-section h2,
.notes-header-section h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    line-height: 1.25;
}

/* AI insights refresh — top-right of page header (out of the filter) */
.client-ai-insights-container .notes-header-section .client-insights-header-refresh {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    text-align: right;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

.client-ai-insights-container .notes-header-section .client-insights-refresh-meta {
    margin: 0;
    color: #718096;
    font-size: 12px;
}

.client-ai-insights-container .notes-header-section .client-insights-refresh-meta::after {
    content: '.';
}

.client-ai-insights-container .notes-header-section .force-refresh-insights {
    margin-left: 5px;
    font-size: 12px;
    white-space: nowrap;
}

.header-buttons {
    display: flex;
    gap: 10px;
}

/* =============================================== */
/* REFRESH SECTION                                */
/* =============================================== */

.insights-refresh-section {
    font-size: 13px;
    color: #718096;
    margin: 0 0 8px 0;
}

/* Refresh link styling */
.insights-refresh-section a.force-refresh-insights {
    color: #4a90e2;
    text-decoration: none;
    margin-left: 5px;
    font-weight: normal;
    font-size: 0.9em;
}

.insights-refresh-section a.force-refresh-insights:hover {
    text-decoration: underline;
}

.insights-refresh-section a.force-refresh-insights.refreshing {
    color: #888;
    cursor: default;
    pointer-events: none;
}

/* =============================================== */
/* DEPRECATED - OLD LAST UPDATED STYLING         */
/* =============================================== */

/* Keep for backwards compatibility but should not be used */
.insights-last-updated {
    display: none; /* Hide if still present */
}

/* =============================================== */
/* CLIENT SELECTION MESSAGE                       */
/* =============================================== */

.select-client-message {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin: 20px 0;
}

.select-client-message p {
    margin: 0;
    color: #666;
    font-size: 16px;
}

/* =============================================== */
/* INSIGHTS GRID LAYOUT                           */
/* =============================================== */

.coach-copilot-workspace {
    display: grid;
    gap: var(--coach-copilot-gutter);
    overflow: visible; /* Tooltips on Kai pills / examples must not clip */
}

/*
 * Left insight | right insight | Kai.
 * Kai track is ~25% wider than an equal third: (1/3)×1.25 = 5/12 of row → fr ratio 7 : 7 : 10.
 */
.coach-copilot-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 7fr) minmax(0, 10fr);
    gap: var(--coach-copilot-gutter);
    /*
     * Content-sized insight cards — do not stretch Profile/Brief/Healing to Kai panel height
     * (that made left cards look “too big” with empty white space on prod).
     */
    align-items: start;
}

/* Vertical stack of cards within each insight column. */
.coach-copilot-cards-col {
    display: flex;
    flex-direction: column;
    /* Match .coach-copilot-layout column gap */
    gap: var(--coach-copilot-gutter);
    min-width: 0;
    min-height: 0;
    height: auto;
}

.coach-copilot-layout > .coach-copilot-insights-load-error {
    grid-column: 1 / span 2;
    min-width: 0;
}

/* Default cell; paired with .client-ai-insights — see override below so grid wins don’t break flex. */
.coach-copilot-card-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.coach-copilot-card-cell .ccc-card {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    align-self: stretch;
}

/*
 * Insight grid cards: match Core .ccc-card-header / .ccc-card-body padding (components.css).
 * Slightly higher specificity than bare .client-ai-insights rules for customizer load order.
 */
#client-insights-display .coach-copilot-cards-col .coach-copilot-card-cell .ccc-card-header {
    padding: 15px 15px 7.5px;
}

#client-insights-display .coach-copilot-cards-col .coach-copilot-card-cell .ccc-card-body {
    padding: 15px 15px 5px;
}

/*
 * START COACH COPILOT — INSIGHT CELL LAYOUT FIX
 * Cells reuse .client-ai-insights for tooltips, but the global .client-ai-insights rule sets
 * display:grid + margins later in this file and wins the cascade — that kills flex stretch and
 * can make vertical rhythm look like “padding only on the outside”. Force one column flex here.
 */
.coach-copilot-cards-col .coach-copilot-card-cell.client-ai-insights {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    min-width: 0;
    min-height: 0;
    grid-template-columns: unset;
}
/* END COACH COPILOT — INSIGHT CELL LAYOUT FIX */

/* Core Layout - Use CCC Grid System (fallback when --column not used) */
.client-ai-insights {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
    overflow: visible; /* Allow tooltips to overflow grid */
}

/*
 * Kai column: sticky on the grid item (aside) so it tracks the viewport while the insight columns scroll.
 * Inner __sticky only sizes the card; nesting sticky on a same-height wrapper often behaves like a static card.
 */
.coach-copilot-kai {
    min-width: 0;
    align-self: start;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: var(--kai-sticky-top, 20px);
    z-index: 4;
    padding: 0;
    margin: 0;
    /* JS syncs to actual viewport top on first paint; falls back to sticky offset. */
    --kai-panel-top-offset: var(--kai-sticky-top, 20px);
    /*
     * Single 1px “ink” for header pills + textarea + attach/mic (textarea used Core --ccc-input-border-color
     * / light gray before — looked softer than the pills).
     */
    --kai-composer-border: #64748b;
    --kai-composer-border-hover: #475569;
}

/* Desktop: reserve at least one viewport of height for the Kai track on first paint. */
@media (min-width: 992px) {
    .coach-copilot-layout > .coach-copilot-kai {
        min-height: calc(100vh - var(--kai-panel-top-offset, var(--kai-sticky-top, 20px)) - var(--kai-vh-bottom-pad, 16px));
    }

    @supports (height: 100dvh) {
        .coach-copilot-layout > .coach-copilot-kai {
            min-height: calc(100dvh - var(--kai-panel-top-offset, var(--kai-sticky-top, 20px)) - var(--kai-vh-bottom-pad, 16px));
        }
    }
}

/* Flex column fills viewport height; not sticky (sticky is on .coach-copilot-kai). */
.coach-copilot-kai__sticky {
    position: relative;
    top: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    height: calc(100vh - var(--kai-panel-top-offset, var(--kai-sticky-top, 20px)) - var(--kai-vh-bottom-pad, 16px));
    max-height: calc(100vh - var(--kai-panel-top-offset, var(--kai-sticky-top, 20px)) - var(--kai-vh-bottom-pad, 16px));
}

@supports (height: 100dvh) {
    .coach-copilot-kai__sticky {
        height: calc(100dvh - var(--kai-panel-top-offset, var(--kai-sticky-top, 20px)) - var(--kai-vh-bottom-pad, 16px));
        max-height: calc(100dvh - var(--kai-panel-top-offset, var(--kai-sticky-top, 20px)) - var(--kai-vh-bottom-pad, 16px));
    }
}

/* Logged-in WP toolbar — keep Kai below the fixed admin bar when stuck */
body.admin-bar .coach-copilot-kai {
    --kai-sticky-top: 32px;
}

/*
 * Kai outer card: same chrome as insight cards; thread area matches card bg (bubbles only add colour).
 */
.coach-copilot-kai .kai-copilot-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    margin-bottom: 0;
    overflow: visible !important; /* Override Core .ccc-card overflow:hidden — tooltips + dropdown */
    background-color: var(--ccc-card-bg, #ffffff);
    border: 1px solid var(--ccc-border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.coach-copilot-kai .kai-copilot-card:hover {
    box-shadow: 0 4px 8px var(--ccc-shadow-color, rgba(0, 0, 0, 0.08));
    transform: none;
}

/* Title + Plan/Review/Message + new chat / expand — one header row. */
.coach-copilot-kai .kai-copilot-card-header {
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
    padding: 12px 10px 7.5px;
    margin: 0;
    background: transparent;
    border-bottom: none;
}

.coach-copilot-kai .kai-copilot-title {
    flex: 0 0 auto;
    font-size: 0.95rem;
    white-space: nowrap;
}

.coach-copilot-kai .kai-copilot-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
}

.coach-copilot-kai .kai-header-icon-btn,
.coach-copilot-kai .kai-expand-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.coach-copilot-kai .kai-header-icon-btn:hover,
.coach-copilot-kai .kai-expand-toggle:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: transparent;
    color: #0f172a;
}

.coach-copilot-kai .kai-header-icon-btn:focus-visible,
.coach-copilot-kai .kai-expand-toggle:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.coach-copilot-kai .kai-header-icon-btn i,
.coach-copilot-kai .kai-expand-toggle i {
    font-size: 14px;
    line-height: 1;
}

.coach-copilot-kai .kai-wa-import-toggle {
    color: #128c7e;
}

.coach-copilot-kai .kai-wa-import-toggle:hover {
    color: #075e54;
    border-color: transparent;
}

/* START KAI CHAT FULLSCREEN EXPAND OVERLAY */
.kai-expand-backdrop[hidden] {
    display: none !important;
}

.kai-expand-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99980;
    background: rgba(15, 23, 42, 0.48);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    animation: kai-expand-backdrop-in 0.22s ease forwards;
}

@keyframes kai-expand-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.kai-copilot-is-expanded {
    overflow: hidden;
}

body.kai-copilot-is-expanded .coach-copilot-kai {
    position: fixed !important;
    inset: 0;
    top: 0 !important;
    z-index: 99990;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    /* Definite height so % children + flex scrollport resolve (auto + inset was unreliable). */
    height: 100% !important;
    max-height: 100% !important;
    padding: max(12px, env(safe-area-inset-top, 0px))
             max(16px, env(safe-area-inset-right, 0px))
             max(12px, env(safe-area-inset-bottom, 0px))
             max(16px, env(safe-area-inset-left, 0px));
    display: flex;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
    background: transparent;
    /* Kill sticky offset math while overlay owns the viewport */
    --kai-panel-top-offset: 0px;
    --kai-sticky-top: 0px;
    --kai-vh-bottom-pad: 0px;
}

@supports (height: 100dvh) {
    body.kai-copilot-is-expanded .coach-copilot-kai {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

body.admin-bar.kai-copilot-is-expanded .coach-copilot-kai {
    top: 32px !important;
    height: calc(100% - 32px) !important;
    max-height: calc(100% - 32px) !important;
    padding-top: 12px;
}

@supports (height: 100dvh) {
    body.admin-bar.kai-copilot-is-expanded .coach-copilot-kai {
        height: calc(100dvh - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
    }
}

@media screen and (max-width: 782px) {
    body.admin-bar.kai-copilot-is-expanded .coach-copilot-kai {
        top: 46px !important;
        height: calc(100% - 46px) !important;
        max-height: calc(100% - 46px) !important;
    }

    @supports (height: 100dvh) {
        body.admin-bar.kai-copilot-is-expanded .coach-copilot-kai {
            height: calc(100dvh - 46px) !important;
            max-height: calc(100dvh - 46px) !important;
        }
    }
}

body.kai-copilot-is-expanded .coach-copilot-kai__sticky {
    width: min(1100px, 100%);
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto;
    animation: kai-expand-panel-in 0.24s ease;
}

@keyframes kai-expand-panel-in {
    from {
        opacity: 0.7;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

body.kai-copilot-is-expanded .coach-copilot-kai .kai-copilot-card {
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
    border-radius: 14px;
    /* Contain layout so .kai-chat-thread (not the page) is the scrollport */
    overflow: hidden !important;
    min-height: 0;
}

body.kai-copilot-is-expanded .coach-copilot-kai .kai-copilot-card-body,
body.kai-copilot-is-expanded .coach-copilot-kai .kai-chat-shell {
    overflow: hidden;
    min-height: 0;
}

body.kai-copilot-is-expanded .coach-copilot-kai .kai-chat-thread {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.kai-copilot-is-expanded .coach-copilot-kai .kai-expand-toggle {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

body.kai-copilot-is-expanded .coach-copilot-kai .kai-expand-toggle:hover {
    background: #1e293b;
    border-color: #1e293b;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .kai-expand-backdrop,
    body.kai-copilot-is-expanded .coach-copilot-kai__sticky {
        animation: none;
    }
}
/* END KAI CHAT FULLSCREEN EXPAND OVERLAY */

.coach-copilot-kai .kai-copilot-card-header .kai-copilot-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ccc-text-color, #1a1a1a);
    flex: 0 1 auto;
}

.coach-copilot-kai .kai-copilot-card-header .kai-quick-prompt-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    flex: 1 1 auto;
    min-width: 0;
}

/*
 * Quick prompt pills live inside .ccc-card-header; Core’s .ccc-card-header span rule
 * (italic, 0.875rem, subtitle color) outranks .kai-quick-prompt-label — restore compact pill type.
 */
.coach-copilot-kai .kai-copilot-card-header .kai-quick-prompt-label {
    font-style: normal;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    color: #0f172a;
    margin: 0;
}

.coach-copilot-kai .kai-copilot-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    padding: 10px 10px 10px;
    background: var(--ccc-card-bg, #ffffff);
}

/*
 * START KAI CHAT SHELL VERTICAL RHYTHM
 * gap:0 made the thread and composer feel like one block; only .kai-copilot-card-body padding
 * read as “outside” space. Space the inner regions explicitly.
 */
.coach-copilot-kai .kai-chat-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: visible;
    background: var(--ccc-card-bg, #ffffff);
}
/* END KAI CHAT SHELL VERTICAL RHYTHM */

.coach-copilot-kai .kai-chat-thread {
    flex: 1 1 auto;
    min-height: 140px;
    max-height: none;
    overflow-y: auto;
    border: none;
    border-radius: 8px;
    background: var(--ccc-card-bg, #ffffff);
    /* Extra top pad so speech-bubble tails (::before) aren’t clipped by the scrollport */
    padding: 14px 4px 12px;
    box-shadow: none;
    /* Tighter than legacy .kai-chat-thread gap:6 — copilot scroll feels roomier in the card */
    gap: 4px;
    /*
     * Soft edge fade — bottom only. A top fade ate the coral/lavender speech tails
     * (they sit above the bubble with top: -6px) and made Kai replies look like flat cards.
     */
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - 18px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - 18px),
        transparent 100%
    );
}

/* Less air under “Today” / date line before the first bubble */
.coach-copilot-kai .kai-chat-date-sep {
    margin: 2px 0 0;
}

.coach-copilot-kai .kai-chat-date-sep + .kai-chat-row .kai-chat-bubble {
    margin-top: 6px;
}

/*
 * Chat bubbles — colours echo site header (lavender left, warm coral right).
 * User: lighter pastel purple; Kai: pastel shell / light coral-red.
 */
.coach-copilot-kai .kai-chat-bubble.is-user {
    background: #f2eafc;
    color: #111b21;
    border: 1px solid #dfd0f0;
    box-shadow: 0 2px 8px rgba(120, 80, 160, 0.07);
}

/* User bubble: no inherited link underline; chips inline so decoration doesn’t bleed past the pill */
.coach-copilot-kai .kai-chat-bubble.is-user .kai-chat-bubble-body--user-rich {
    text-decoration: none;
}

.coach-copilot-kai .kai-chat-bubble.is-user .kai-chat-bubble-body--user-rich .kai-client-chip,
.coach-copilot-kai .kai-chat-bubble.is-user .kai-user-mention-chip {
    display: inline;
    text-decoration: none !important;
    /*
     * Vertical padding makes the line that contains the chip slightly taller (normal for inline pills).
     * Other lines in the bubble keep their usual line-height.
     */
    vertical-align: baseline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background: linear-gradient(135deg, #e9ddfb 0%, #d8c3f5 100%);
    border: 1px solid #bfa0ec;
    color: #4d2f84;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.92em;
    margin: 0 0.08em;
    line-height: 1.25;
    box-shadow: 0 1px 2px rgba(76, 46, 130, 0.12);
}

/*
 * START COACH COPILOT CHAT — full-width rows, top “tail” speech bubbles, no avatar column
 */
.coach-copilot-kai .kai-chat-row {
    align-items: flex-start;
}

/* Assistant + plan chrome: single vertical stack (bubble → sources note → actions), not side-by-side columns */
.coach-copilot-kai .kai-chat-row.is-assistant {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
}

.coach-copilot-kai .kai-chat-row.is-assistant .kai-chat-assistant-stack {
    width: 100%;
    max-width: 100%;
}

.coach-copilot-kai .kai-chat-bubble-wrap {
    max-width: 100%;
    flex: 1 1 auto;
}

.coach-copilot-kai .kai-chat-bubble {
    margin-top: 12px;
    border-radius: 14px;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

/* Assistant: pastel light coral / shell (Kai) + tail at top-left */
.coach-copilot-kai .kai-chat-bubble.is-assistant {
    border: 1px solid #f0cfc6;
    background: #fff3f0;
    box-shadow: 0 2px 8px rgba(190, 95, 75, 0.08);
}

/* Saved Plan/Review artifact — small status chip (not a fake coach ask above the plan). */
.coach-copilot-kai .kai-chat-bubble.is-assistant > .kai-chat-saved-badge {
    display: inline-block;
    margin: 10px 14px 0;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: #2f6b4f;
    background: rgba(47, 107, 79, 0.1);
    border-radius: 999px;
}

/*
 * Compound assistant (coach + draft): same coral shell as other Kai bubbles; nested draft uses grey + dashed border.
 */
.coach-copilot-kai .kai-chat-bubble--compound .kai-chat-compound__coach.kai-chat-bubble-body--markdown {
    padding: 12px 14px 6px;
    padding-right: 14px;
}

.coach-copilot-kai .kai-chat-bubble--compound .kai-chat-message-draft--nested {
    margin: 4px 12px 12px;
    max-width: calc(100% - 24px);
}

.coach-copilot-kai .kai-chat-bubble.is-assistant::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 22px;
    top: -6px;
    background: #fff3f0;
    border-left: 1px solid #f0cfc6;
    border-top: 1px solid #f0cfc6;
    transform: rotate(45deg);
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;
}

/*
 * Coach (user) bubble — top-right speech arrow.
 * Two-layer CSS triangles (border + fill) so the tip joins the bubble without the
 * white gap / detached spike the rotated-square ::before produced.
 */
.coach-copilot-kai .kai-chat-bubble.is-user::before,
.coach-copilot-kai .kai-chat-bubble.is-user::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    border-style: solid;
    box-sizing: border-box;
    pointer-events: none;
}

/* Outer arrow = border colour */
.coach-copilot-kai .kai-chat-bubble.is-user::before {
    top: -8px;
    right: 18px;
    border-width: 0 7px 8px 7px;
    border-color: transparent transparent #dfd0f0 transparent;
    z-index: 2;
    background: none;
    transform: none;
}

/* Inner arrow = fill; overlaps bubble top edge so it reads as one piece */
.coach-copilot-kai .kai-chat-bubble.is-user::after {
    top: -6px;
    right: 19px;
    border-width: 0 6px 7px 6px;
    border-color: transparent transparent #f2eafc transparent;
    z-index: 3;
}

.coach-copilot-kai .kai-chat-bubble-body,
.coach-copilot-kai .kai-chat-bubble-footer {
    position: relative;
    z-index: 1;
}

/* Assistant column: coach bubble + optional MESSAGE DRAFT card (Kai Debug parity) */
.coach-copilot-kai .kai-chat-assistant-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: 100%;
    flex: 1 1 auto;
}

.coach-copilot-kai .kai-chat-message-draft {
    position: relative;
    margin-top: 0;
    border-radius: 14px;
    border: 1px dashed #94a3b8;
    background: #f1f5f9;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
    max-width: 100%;
    overflow: visible;
}

.coach-copilot-kai .kai-chat-message-draft__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 8px;
    background: #e8edf3;
    border-bottom: 1px dashed #cbd5e1;
    box-sizing: border-box;
    border-radius: 14px 14px 0 0;
}

.coach-copilot-kai .kai-chat-message-draft__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #94a3b8;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
}

.coach-copilot-kai .kai-chat-message-draft__badge .kai-message-draft-doc-icon {
    display: block;
    flex-shrink: 0;
    opacity: 0.9;
}

.coach-copilot-kai .kai-chat-message-draft__badge-label {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

/* Copy in draft header: icon-only (same control as coach bubble), not corner-absolute */
.coach-copilot-kai .kai-chat-message-draft__header .kai-chat-message-draft__copy {
    position: relative;
    top: auto;
    right: auto;
    flex-shrink: 0;
}

.coach-copilot-kai .kai-chat-message-draft__body {
    padding: 10px 14px 12px;
    background: #f8fafc;
    color: #1e293b;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0 0 12px 12px;
}

.coach-copilot-kai .kai-chat-message-draft.has-source-footer .kai-chat-message-draft__body {
    border-radius: 0;
}

.coach-copilot-kai .kai-chat-message-draft.has-source-footer .kai-chat-bubble-footer {
    background: #e8edf3;
    border-top: 1px dashed #cbd5e1;
    border-radius: 0 0 14px 14px;
}

/* END COACH COPILOT CHAT */

/* Kai pipeline stepper (dashed panel — shown while a message is processing) */
.coach-copilot-kai .kai-chat-progress.kai-progress-stepper {
    flex-shrink: 0;
    margin: 0;
    padding: 10px 12px 12px;
    border-radius: 10px;
    border: 1px dashed var(--ccc-border-color, #cbd5e1);
    background: #f8fafc;
    box-sizing: border-box;
    max-width: 100%;
}

.coach-copilot-kai .kai-progress-stepper__title {
    margin: 0 0 6px 0;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.coach-copilot-kai .kai-progress-stepper__list {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-inline-start: 0;
    margin-inline-start: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/*
 * Step rows: flush with “PROCESSING” (themes often add ol/li padding — markup uses role=list divs;
 * still zero margins in case a rule targets .kai-progress-step).
 */
.coach-copilot-kai .kai-progress-step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    padding-inline-start: 0;
    margin-inline-start: 0;
    font-size: 12px;
    line-height: 1.35;
    list-style: none;
}

.coach-copilot-kai .kai-progress-step__marker {
    position: relative;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    flex: 0 0 18px;
    align-self: center;
}

.coach-copilot-kai .kai-progress-step.is-pending .kai-progress-step__label {
    color: #94a3b8;
    font-weight: 400;
}

.coach-copilot-kai .kai-progress-step.is-active .kai-progress-step__label {
    color: #334155;
    font-weight: 700;
}

.coach-copilot-kai .kai-progress-step.is-complete .kai-progress-step__label {
    color: #475569;
    font-weight: 500;
}

/* Pending: hollow ring */
.coach-copilot-kai .kai-progress-step.is-pending .kai-progress-step__marker {
    background: #fff;
    border-color: #cbd5e1;
}

/* Active: dark-grey spinner */
.coach-copilot-kai .kai-progress-step.is-active .kai-progress-step__marker {
    border: 2px solid #475569;
    border-top-color: transparent;
    background: transparent;
    animation: kai-progress-spin 0.75s linear infinite;
}

/* Complete: dark-grey fill + white check */
.coach-copilot-kai .kai-progress-step.is-complete .kai-progress-step__marker {
    border: none;
    background: #475569;
    animation: none !important;
}

.coach-copilot-kai .kai-progress-step.is-complete .kai-progress-step__marker::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 8px;
    margin: 0;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    /* Slight upward nudge — check read low in the circle at 45° */
    transform: translate(-50%, calc(-50% - 1px)) rotate(45deg);
    transform-origin: center center;
    box-sizing: border-box;
}

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

/* Composer: full width inside card — no dashed chrome or extra horizontal inset */
.coach-copilot-kai .kai-prompt-builder {
    flex: 0 0 auto;
    margin: 0;
    margin-top: auto;
    padding: 8px 0 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    gap: 10px;
}

.coach-copilot-kai .kai-send-prompt-btn {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
}

.coach-copilot-kai .kai-prompt-builder .kai-working-prompt.ccc-form-control {
    background: #fff;
    border: 1px solid var(--kai-composer-border, #64748b);
    min-height: 4.25rem;
    max-height: 10rem;
    resize: vertical;
    line-height: 1.4;
}

/* Match pills/icon rings on focus — avoid Core primary glow so the whole composer reads as one system */
.coach-copilot-kai .kai-prompt-builder .kai-working-prompt.ccc-form-control:focus {
    border-color: var(--kai-composer-border-hover, #475569);
    outline: 0;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.22);
}

/*
 * START KAI COMPOSER CHROME — NEUTRAL PILLS + ICON BUTTONS
 * White bg, darker grey border, black icons/text (Ask Kai stays primary).
 */
.coach-copilot-kai .kai-attach-btn,
.coach-copilot-kai .kai-voice-btn:not(.recording),
.coach-copilot-kai .kai-composer-actions .kai-wa-import-toggle {
    background: #ffffff;
    border: 1px solid var(--kai-composer-border, #64748b);
    color: #0f172a;
}

.coach-copilot-kai .kai-attach-btn i,
.coach-copilot-kai .kai-voice-btn:not(.recording) i {
    color: #0f172a;
    opacity: 1;
}

.coach-copilot-kai .kai-attach-btn:hover,
.coach-copilot-kai .kai-voice-btn:not(.recording):hover {
    background: #f8fafc;
    border-color: var(--kai-composer-border-hover, #475569);
    color: #0f172a;
}

.coach-copilot-kai .kai-attach-btn:hover i,
.coach-copilot-kai .kai-voice-btn:not(.recording):hover i {
    color: #0f172a;
}

/* WhatsApp import lives in the composer row (next to mic / attach). */
.coach-copilot-kai .kai-composer-actions .kai-wa-import-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #128c7e;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.coach-copilot-kai .kai-composer-actions .kai-wa-import-toggle:hover {
    background: #f0fdf9;
    border-color: var(--kai-composer-border-hover, #475569);
    color: #075e54;
}

.coach-copilot-kai .kai-composer-actions .kai-wa-import-toggle i {
    font-size: 16px;
    line-height: 1;
    color: inherit;
}


.coach-copilot-kai .kai-voice-btn:not(.recording) i,
.coach-copilot-kai .kai-composer-actions .kai-wa-import-toggle i {
    color: #0f172a !important; /* FA brand kits paint .fa-whatsapp green — force neutral */
}
.coach-copilot-kai .kai-composer-actions .kai-wa-import-toggle:hover i,
.coach-copilot-kai .kai-composer-actions .kai-wa-import-toggle:hover .fa-whatsapp {
    color: #0f172a !important;
}
.coach-copilot-kai .kai-composer-actions .kai-wa-import-toggle i,
.coach-copilot-kai .kai-composer-actions .kai-wa-import-toggle .fa-whatsapp,
.coach-copilot-kai .kai-composer-actions .kai-wa-import-toggle .fab {
    font-size: 22px !important;
    line-height: 1 !important;
    color: #0f172a !important;
}

/* END KAI COMPOSER CHROME — NEUTRAL PILLS + ICON BUTTONS */

/* Ensure insights display area has proper spacing */
#client-insights-display {
    margin-top: 24px;
    padding-left: clamp(12px, 2.5vw, 28px);
    padding-right: clamp(12px, 2.5vw, 28px);
    overflow: visible; /* Allow tooltips to overflow display area */
}

/*
 * Coach + Kai: horizontal inset off; filter→grid gap on the display (reliable; do not rely on filter
 * margin-bottom + margin-top:0 here — that pairing often read as “no gap”).
 */
#client-insights-display:has(.coach-copilot-workspace) {
    margin-top: var(--coach-copilot-filter-gap);
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

/* Filter + grid share the same horizontal edge; display gap is the only vertical offset below filter. */
.client-ai-insights-container #client-insights-filters {
    margin-bottom: 0;
}

.client-ai-insights-container #client-insights-filters.ccc-filter-component {
    margin-bottom: 0;
}

/* =============================================== */
/* CCC CORE CARD INTEGRATION                      */
/* =============================================== */

/*
 * Extend Core .ccc-card / .ccc-card-header / .ccc-card-body only where needed.
 * Core defines padding, border, radius, shadow, and typography — do not duplicate.
 */

/* Grid handles vertical rhythm; tooltips need to escape card overflow */
.client-ai-insights .ccc-card {
    margin-bottom: 0;
    overflow: visible;
}

/* Trend dots + tooltips: positioning only; padding from Core components.css */
.client-ai-insights .ccc-card-header {
    position: relative;
    overflow: visible;
}

/* Readable long insight copy without overriding Core body padding */
.client-ai-insights .ccc-card-body {
    flex: 1 1 auto;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.profile-summary-card .ccc-card-body {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.coach-copilot-kai .ccc-card-header {
    position: relative;
    overflow: visible;
    flex: 0 0 auto;
}

.profile-summary-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-summary-card-header .ccc-avatar {
    flex: 0 0 auto;
    margin: 0;
    /* Matches Core --ccc-avatar-size (48px). */
    width: var(--ccc-avatar-size, 48px);
    height: var(--ccc-avatar-size, 48px);
    min-width: var(--ccc-avatar-size, 48px);
    min-height: var(--ccc-avatar-size, 48px);
}

.profile-summary-card-meta {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

.profile-summary-card-meta .ccc-card-title {
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.profile-summary-card-meta-line,
.profile-summary-card-meta p {
    margin: 0;
    color: var(--ccc-text-light, #666666);
    font-size: 0.875rem;
    font-style: italic;
}

.profile-summary-card .profile-summary-stat-text-line {
    margin: 0 0 0.45rem;
    font-size: 0.875rem;
    color: var(--ccc-text-color, #333);
    line-height: 1.35;
}

.profile-summary-card .profile-summary-stat-text-line:last-child {
    margin-bottom: 0;
}

/*
 * Profile stats: black outline FA regular icons + text.
 */
.profile-summary-card .profile-summary-stat-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 0.55rem;
    font-size: 0.875rem;
    color: var(--ccc-text-color, #333);
    line-height: 1.35;
}

.profile-summary-card .profile-summary-stat-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: none;
    background: transparent;
    color: #0f172a;
}

.profile-summary-card .profile-summary-stat-icon .profile-summary-stat-svg,
.profile-summary-card .profile-summary-stat-icon .profile-summary-win-check {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.profile-summary-card .profile-summary-stat-icon .profile-summary-stat-svg--calendar {
    width: 14px;
    height: 16px;
}

/* Legacy FA icons (if any remain) — prefer stroke SVGs above */
.profile-summary-card .profile-summary-stat-icon i {
    font-size: 0.8125rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.15px #0f172a;
    paint-order: stroke fill;
}

.profile-summary-card .profile-summary-stat-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ccc-text-color, #333);
}

.profile-summary-card .profile-summary-attendance-label {
    font-weight: 700;
    color: inherit;
}

.profile-summary-card .profile-summary-attendance--strong .profile-summary-attendance-label {
    color: #0f172a;
}

.profile-summary-card .profile-summary-attendance--average .profile-summary-attendance-label,
.profile-summary-card .profile-summary-attendance--weak .profile-summary-attendance-label,
.profile-summary-card .profile-summary-attendance--early .profile-summary-attendance-label {
    color: #0f172a;
}

/* Profile card — default single width: stats stacked (4 lines). Double width: 2×2 stat grid. */
#client-insights-display .grid-stack-item[gs-id="profile_card"] .profile-summary-card-header {
    padding-bottom: 12px;
    margin-bottom: 4px;
}

#client-insights-display .grid-stack-item[gs-id="profile_card"] .profile-summary-card .ccc-card-body {
    display: block;
    padding-top: 4px;
}

#client-insights-display .grid-stack-item[gs-id="profile_card"][gs-w="12"] .profile-summary-card:not(.profile-summary-card--expanded) .ccc-card-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 6px;
    align-content: start;
}

#client-insights-display .grid-stack-item[gs-id="profile_card"][gs-w="12"] .profile-summary-card:not(.profile-summary-card--expanded) .profile-goals,
#client-insights-display .grid-stack-item[gs-id="profile_card"][gs-w="12"] .profile-summary-card:not(.profile-summary-card--expanded) .profile-issues,
#client-insights-display .grid-stack-item[gs-id="profile_card"][gs-w="12"] .profile-summary-card:not(.profile-summary-card--expanded) .profile-summary-stat-text-line {
    grid-column: 1 / -1;
}

/* Double height — name/avatar left, stats block right */
#client-insights-display .profile-summary-card--expanded {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 24px;
    row-gap: 0;
    align-items: center;
    height: 100%;
    min-height: 0;
}

#client-insights-display .profile-summary-card--expanded .profile-summary-card-header {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

#client-insights-display .profile-summary-card--expanded .ccc-card-body {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    grid-template-columns: 1fr;
    column-gap: 0;
}

#client-insights-display .profile-summary-card--expanded .ccc-card-body .profile-summary-stat-line {
    margin-bottom: 0.45rem;
}

/* =============================================== */
/* COACH COPILOT SIDEBAR                          */
/* =============================================== */

.kai-prompt-builder {
    display: grid;
    gap: 10px;
    position: relative;
}

/* Anchor mention list to textarea bottom so it overlays attach / mic / Ask Kai (not below them). */
.kai-prompt-input-wrap {
    position: relative;
    z-index: 5;
}

/* @mention autocomplete (insights assigned clients + PM knowledge when enabled) */
.kai-mention-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ccc-border-color, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 8500;
    font-size: 13px;
}

.kai-mention-dropdown .kai-mention-loading,
.kai-mention-dropdown .kai-mention-empty {
    padding: 10px 12px;
    color: #64748b;
}

.kai-mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}

.kai-mention-item:last-child {
    border-bottom: none;
}

.kai-mention-item:hover,
.kai-mention-item.highlighted {
    background: #f8fafc;
}

.kai-mention-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.kai-mention-meta {
    min-width: 0;
    flex: 1;
}

.kai-mention-name {
    font-weight: 600;
    color: #1e293b;
    line-height: 1.25;
}

.kai-mention-sub {
    font-size: 11px;
    color: #64748b;
    line-height: 1.2;
}

.kai-mention-sep {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    background: #f8fafc;
}

.kai-voice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.kai-voice-btn:hover {
    border-color: var(--ccc-primary-color, #e35c5c);
    color: var(--ccc-primary-color, #e35c5c);
}

.kai-voice-btn.recording {
    background: var(--ccc-primary-color, #e35c5c);
    border-color: var(--ccc-primary-color, #e35c5c);
    color: #fff;
    animation: kai-voice-pulse 1.2s ease-in-out infinite;
}

.kai-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.kai-attach-btn:hover {
    border-color: var(--ccc-primary-color, #e35c5c);
    color: var(--ccc-primary-color, #e35c5c);
}

@keyframes kai-voice-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(227, 92, 92, 0.35);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(227, 92, 92, 0);
    }
}

.kai-copilot-input-row {
    min-width: 0;
}

.kai-composer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    position: relative;
    z-index: 0;
}

/* After "I sent this": one padded receipt, not raw bubble children */
.coach-copilot-kai .kai-chat-row.kai-lead-after-sent {
    margin-top: 4px;
}

.coach-copilot-kai .kai-lead-after-sent__bubble {
    max-width: 100%;
}

.coach-copilot-kai .kai-lead-after-sent__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 16px;
}

.coach-copilot-kai .kai-lead-after-sent__text,
.coach-copilot-kai .kai-lead-after-sent__note {
    margin: 0;
    line-height: 1.45;
}

.coach-copilot-kai .kai-lead-after-sent__note {
    color: #5b6470;
    font-size: 0.92em;
}

.coach-copilot-kai .kai-lead-after-sent__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.coach-copilot-kai .kai-lead-after-sent__actions .ccc-button {
    margin: 0;
}

.kai-composer-actions .kai-send-prompt-btn {
    margin-left: auto;
    min-width: 7.5rem;
}

.kai-chat-shell {
    display: grid;
    gap: 12px;
}

.kai-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
    padding: 12px 10px;
    border: 1px solid #d1d7db;
    border-radius: 10px;
    background: #efeae2;
}

.kai-chat-thread[hidden] {
    display: none;
}

.kai-chat-date-sep {
    align-self: center;
    margin: 6px 0 10px;
    padding: 2px 6px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.03em;
    text-align: center;
}

.kai-chat-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
}

.kai-chat-row.is-user {
    flex-direction: row-reverse;
}

.kai-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
}

.kai-chat-bubble-wrap {
    max-width: 82%;
    min-width: 0;
}

.kai-chat-row.is-user .kai-chat-bubble-wrap {
    display: flex;
    justify-content: flex-end;
}

.kai-chat-bubble {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.kai-chat-bubble.is-user {
    background: #d9fdd3;
    color: #111b21;
}

.kai-chat-bubble.is-assistant {
    background: #fff;
    color: #111b21;
}

.kai-chat-bubble-body {
    margin: 0;
    padding: 8px 12px 8px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.kai-chat-bubble.is-assistant .kai-chat-bubble-body {
    padding-top: 28px;
}

/*
 * Copilot assistant: copy sits top-right — use right padding for wrap, modest top (avoid tall empty band).
 */
.coach-copilot-kai .kai-chat-bubble.is-assistant .kai-chat-bubble-body--markdown {
    padding-top: 10px;
    padding-right: 40px;
}

/* Plan/Review save ack — plain sentence, no copy chip, no markdown */
.coach-copilot-kai .kai-chat-bubble.is-assistant .kai-chat-bubble-body--plain {
    padding-top: 10px;
    white-space: normal;
}

/* Rendered markdown from Kai (bold/italic/lists) — not pre-wrap */
.coach-copilot-kai .kai-chat-bubble-body--markdown {
    white-space: normal;
}

.coach-copilot-kai .kai-chat-bubble-body--markdown p {
    margin: 0 0 0.5rem 0;
}

.coach-copilot-kai .kai-chat-bubble-body--markdown p:last-child {
    margin-bottom: 0;
}

.coach-copilot-kai .kai-chat-bubble-body--markdown .kai-md-ol {
    margin: 0 0 0.5rem 0;
}

.coach-copilot-kai .kai-chat-bubble-body--markdown .kai-md-ol-num {
    font-weight: 700;
    margin-right: 0.25rem;
}

.coach-copilot-kai .kai-chat-bubble-body--markdown ul.kai-md-ul {
    margin: 0.35rem 0 0.65rem 1.15rem;
    padding: 0;
    list-style: disc;
}

.coach-copilot-kai .kai-chat-bubble-body--markdown li {
    margin: 0.2rem 0;
}

.coach-copilot-kai .kai-chat-bubble-body--markdown .kai-md-h {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0.6rem 0 0.35rem 0;
    line-height: 1.3;
}

.coach-copilot-kai .kai-chat-bubble-body--markdown .kai-md-h:first-child {
    margin-top: 0;
}

.coach-copilot-kai .kai-chat-bubble-body--markdown strong {
    font-weight: 700;
}

.coach-copilot-kai .kai-chat-bubble-body--markdown em {
    font-style: italic;
}

/* Client names: [Display Name] / @login — same visual language as Kai debug .mention-pill */
.coach-copilot-kai .kai-chat-bubble-body--markdown .kai-client-chip {
    display: inline-block;
    background: linear-gradient(135deg, #cf5a10 0%, #b94806 100%);
    border: 1px solid #9e3f06;
    color: #fff;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.92em;
    margin: 0 0.08em;
    vertical-align: text-bottom;
    line-height: 1.25;
}

/* Copy: icon sits in top-right; body uses padding-right so text rises (not a full top band). */
.kai-chat-bubble-copy {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 6;
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: #475569;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Keep coach-reply copy pinned to the bubble shell (never the Plan sources block). */
.coach-copilot-kai .kai-chat-bubble.is-assistant > .kai-chat-bubble-copy {
    top: 6px;
    right: 8px;
    bottom: auto;
}

.kai-chat-bubble-copy .kai-copy-icon,
.kai-chat-copy-debug-btn .kai-copy-icon {
    display: block;
    flex-shrink: 0;
}

.kai-chat-bubble-copy:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #c2410c;
}

.kai-chat-bubble-copy:focus-visible {
    outline: 2px solid rgba(194, 65, 12, 0.45);
    outline-offset: 1px;
}

/* Data source chips + debug flow (assistant bubbles — parity with [kai_debug]) */
.kai-chat-bubble.is-assistant.has-source-footer {
    overflow: visible; /* was hidden — clipped last chip row on Insights Kai */
}

/* Copilot: keep top tail + full chip footer visible */
.coach-copilot-kai .kai-chat-bubble.is-assistant.has-source-footer,
.coach-copilot-kai .kai-chat-bubble.is-assistant {
    overflow: visible;
}

.kai-chat-bubble-footer {
    position: relative;
    margin: 0;
    padding: 8px 36px 10px 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #f1f5f9;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
}

/* Kai assistant footer: slightly deeper shell tone so chips/debug sit on-brand */
.coach-copilot-kai .kai-chat-bubble.is-assistant .kai-chat-bubble-footer {
    background: #fce8e4;
    border-top: 1px solid rgba(200, 110, 95, 0.18);
    border-radius: 0 0 14px 14px;
}

.kai-chat-source-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0;
}

.kai-chat-bubble-footer .kai-chat-source-chips:last-child {
    margin-bottom: 0;
}

/*
 * START KAI SOURCE CHIPS — unused = warm gray; used = dark orange (not primary red — avoids “error” read)
 */
.kai-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff8f5;
    border: 1px solid #f0cfc6;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    line-height: 1.25;
    color: #9a3412;
}

/* Filled vs hollow dot — does not depend on Font Awesome (CSP often blocks CDN icons). */
.kai-source-chip__mark {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-sizing: border-box;
    vertical-align: middle;
}

.kai-source-chip__mark--unused {
    border: 2px solid #a8a29e;
    background: transparent;
}

.kai-source-chip__mark--used {
    border: 2px solid #c2410c;
    background: #ea580c;
}

.kai-source-chip.is-used {
    border-color: rgba(194, 65, 12, 0.55);
    background: #fff7ed;
    color: #9a3412;
}

.kai-source-chip.is-unused {
    border-color: #ead5ce;
    background: #fdf8f6;
    color: #78716c;
}
/* END KAI SOURCE CHIPS */

/* Row: “View Debug Flow” grows; debug copy icon sits on the right (saves vertical space). */
.kai-chat-debug-toggle-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    width: 100%;
    box-sizing: border-box;
}

.kai-chat-debug-toggle-row .kai-chat-debug-toggle {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    width: auto; /* base rule is 100% — share row with copy button */
}

.kai-chat-debug-toggle-row .kai-chat-copy-debug-btn {
    flex: 0 0 auto;
    margin-top: 0;
}

/* Ghost control: label + icons only (no bar chrome — avoids theme button fills). */
.kai-chat-debug-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 0;
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
    box-sizing: border-box;
    border: 0;
    outline: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    /* De-emphasized: matches unused chip tone — not a primary action */
    color: #78716c;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.15s ease;
}

.kai-chat-debug-toggle:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #57534e;
}

.kai-chat-debug-toggle:focus-visible {
    outline: 2px solid rgba(100, 116, 139, 0.4);
    outline-offset: 2px;
    border-radius: 4px;
}

.kai-chat-debug-toggle .kai-chat-debug-chevron {
    margin-left: 2px;
    font-size: 10px;
    transition: transform 0.2s ease;
}

.kai-chat-debug-toggle.is-open .kai-chat-debug-chevron {
    transform: rotate(180deg);
}

/*
 * Ghost debug toggle: strip theme button chrome; muted grey on peach/cream footers (low prominence).
 */
.coach-copilot-kai .kai-chat-bubble-footer .kai-chat-debug-toggle,
.coach-copilot-kai .kai-chat-bubble-footer .kai-chat-debug-toggle:hover,
.coach-copilot-kai .kai-chat-bubble-footer .kai-chat-debug-toggle:focus,
.coach-copilot-kai .kai-chat-bubble-footer .kai-chat-debug-toggle:focus-visible,
.coach-copilot-kai .kai-chat-bubble-footer .kai-chat-debug-toggle.is-open,
.coach-copilot-kai .kai-chat-bubble-footer .kai-chat-debug-toggle[aria-expanded='true'],
.coach-copilot-kai .kai-chat-bubble-footer .kai-chat-debug-toggle[aria-expanded='false'] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #78716c !important;
    font-weight: 400 !important;
}

.coach-copilot-kai .kai-chat-bubble-footer .kai-chat-debug-toggle:hover,
.coach-copilot-kai .kai-chat-bubble-footer .kai-chat-debug-toggle.is-open:hover {
    color: #57534e !important;
}

.kai-chat-debug-panel {
    margin-top: 8px;
    max-width: 100%;
}

.kai-chat-debug-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.kai-debug-step {
    padding: 8px 10px;
    border-radius: 8px;
    border-left: 3px solid #a8a29e;
    background: rgba(255, 255, 255, 0.9);
    font-size: 11px;
}

.kai-debug-step.is-outgoing {
    border-left-color: #c2410c;
    background: rgba(194, 65, 12, 0.07);
}

.kai-debug-step.is-incoming {
    border-left-color: var(--ccc-primary-color, #e35c5c);
    background: rgba(227, 92, 92, 0.08);
}

.kai-debug-step.is-processing {
    border-left-color: #ea580c;
    background: rgba(234, 88, 12, 0.07);
}

.kai-debug-step.is-error {
    border-left-color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
}

.kai-debug-step-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #57534e;
    margin-bottom: 6px;
}

.kai-debug-step-pre {
    margin: 0;
    padding: 8px;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* Copy debug — top-right of sources footer (parity with message copy on the bubble). */
.kai-chat-debug-copy-tools {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 6;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.kai-chat-copy-debug-btn {
    margin: 0;
    padding: 4px;
    border: 0;
    outline: none;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: #475569;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kai-chat-copy-debug-btn:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #c2410c;
}

.kai-chat-copy-debug-btn:disabled {
    opacity: 0.65;
    cursor: default;
}

.kai-chat-debug-copy-tools .kai-chat-copy-debug-btn {
    margin: 0;
}

/* Legacy plain progress text (unused when stepper markup present) */
.kai-chat-progress:not(.kai-progress-stepper) {
    padding: 10px 12px;
    border-radius: 10px;
    background: #edf2f7;
    color: #4a5568;
    font-size: 13px;
    font-weight: 600;
}

.kai-working-prompt {
    min-height: 160px;
    resize: vertical;
}

.kai-prompt-builder .kai-working-prompt.ccc-form-control {
    min-height: 160px;
    height: auto;
    border-radius: 10px !important;
    padding: 12px 14px;
    line-height: 1.55;
    box-sizing: border-box;
}

.kai-quick-prompt-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.coach-copilot-kai .kai-copilot-card-header .kai-quick-prompt-list {
    justify-content: flex-start;
}

.kai-quick-prompt-tooltip {
    display: inline-flex;
}

/* Sit above chat shell / card stacking so hover copy isn’t clipped */
.coach-copilot-kai .kai-quick-prompt-tooltip .ccc-tooltip-content,
.client-ai-insights .card-info-tooltip .ccc-tooltip-content {
    z-index: 50000;
}

/* Template pills: white bg, darker grey border, black label (primary reserved for Ask Kai). */
.kai-quick-prompt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 5px 9px;
    border: 1px solid #64748b;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    text-align: left;
    cursor: help;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none;
}

/* Hover: toward coral, no lift. Focus is outline only — click must not leave a stuck hover fill. */
.kai-quick-prompt-btn:hover {
    border-color: color-mix(in srgb, var(--ccc-primary-color, #e35c5c) 55%, #64748b);
    background: color-mix(in srgb, var(--ccc-primary-color, #e35c5c) 12%, #ffffff);
    color: #0f172a !important;
    box-shadow: none;
    transform: none;
}

.kai-quick-prompt-btn:focus-visible {
    outline: 2px solid var(--ccc-primary-color, #e35c5c);
    outline-offset: 2px;
}

.kai-quick-prompt-label {
    font-weight: 500;
    color: inherit;
    font-size: 12px;
    line-height: 1.2;
    transition: color 0.15s ease;
}

.kai-quick-prompt-btn:hover .kai-quick-prompt-label {
    color: color-mix(in srgb, #b91c1c 60%, #0f172a) !important;
    font-weight: 500;
}

.kai-quick-prompt-btn:active {
    box-shadow: inset 0 2px 4px rgba(127, 29, 29, 0.22);
}

/* Pills use the same --kai-composer-border* as textarea + attach/mic (set on .coach-copilot-kai). */
.coach-copilot-kai .kai-quick-prompt-btn {
    border-color: var(--kai-composer-border, #64748b);
    color: #0f172a;
}

.coach-copilot-kai .kai-quick-prompt-btn:hover {
    border-color: color-mix(in srgb, var(--ccc-primary-color, #e35c5c) 55%, var(--kai-composer-border, #64748b));
    color: #0f172a !important;
}

/* Held mode: inset / pushed in. No translate — movement next to a rest chip looks like a hover lift. */
.coach-copilot-kai.is-kai-plan-mode .kai-quick-prompt-btn.is-plan-mode-active,
.coach-copilot-kai.is-kai-plan-mode .kai-quick-prompt-btn.is-plan-mode-active:hover,
.coach-copilot-kai.is-kai-plan-mode .kai-quick-prompt-btn.is-plan-mode-active:focus-visible,
.coach-copilot-kai.is-kai-review-mode .kai-quick-prompt-btn.is-review-mode-active,
.coach-copilot-kai.is-kai-review-mode .kai-quick-prompt-btn.is-review-mode-active:hover,
.coach-copilot-kai.is-kai-review-mode .kai-quick-prompt-btn.is-review-mode-active:focus-visible,
.coach-copilot-kai.is-kai-lead-pathway .kai-quick-prompt-btn.is-lead-pathway-active,
.coach-copilot-kai.is-kai-lead-pathway .kai-quick-prompt-btn.is-lead-pathway-active:hover,
.coach-copilot-kai.is-kai-lead-pathway .kai-quick-prompt-btn.is-lead-pathway-active:focus-visible {
    transform: none;
    border-color: var(--ccc-primary-color, #e35c5c);
    color: #7f1d1d !important;
    background: linear-gradient(180deg, #d98989 0%, #f0b8b8 42%, #fce8e8 100%);
    box-shadow:
        inset 0 3px 8px rgba(127, 29, 29, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.coach-copilot-kai.is-kai-plan-mode .kai-quick-prompt-btn.is-plan-mode-active .kai-quick-prompt-label,
.coach-copilot-kai.is-kai-review-mode .kai-quick-prompt-btn.is-review-mode-active .kai-quick-prompt-label,
.coach-copilot-kai.is-kai-lead-pathway .kai-quick-prompt-btn.is-lead-pathway-active .kai-quick-prompt-label {
    font-weight: 600;
    color: #7f1d1d !important;
}

.kai-mode-intent-ask__text {
    white-space: pre-wrap;
}

.coach-copilot-kai.is-kai-lead-pathway .kai-quick-prompt-btn[data-kai-session-prepare="1"],
.coach-copilot-kai.is-kai-lead-pathway .kai-quick-prompt-btn[data-kai-session-review="1"],
.coach-copilot-kai:not(.is-kai-client-modes) .kai-quick-prompt-tooltip:has([data-kai-session-prepare="1"]),
.coach-copilot-kai:not(.is-kai-client-modes) .kai-quick-prompt-tooltip:has([data-kai-session-review="1"]) {
    display: none;
}

.coach-copilot-kai .kai-chat-message-draft__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.coach-copilot-kai .kai-chat-message-draft__sent {
    font-size: 12px;
    padding: 4px 10px;
    min-height: 0;
    line-height: 1.2;
}

.coach-copilot-kai .kai-chat-message-draft__sent[disabled] {
    opacity: 0.7;
}
.kai-plan-coach-intent-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0.35rem 0 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #0f172a;
    background: #fff;
    resize: vertical;
    min-height: 4.5rem;
}

.kai-plan-coach-intent-input:focus {
    outline: 2px solid #c45c4a;
    outline-offset: 1px;
    border-color: #f0cfc6;
}

/* Save-plan path: hide generic 5-step list; title only + honest “lite” save state. */
.coach-copilot-kai .kai-chat-progress.kai-progress-stepper.kai-progress-stepper--lite .kai-progress-stepper__list {
    display: none;
}

.coach-copilot-kai .kai-chat-progress.kai-progress-stepper.kai-progress-stepper--lite .kai-progress-stepper__title {
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.coach-copilot-kai .kai-chat-row.kai-plan-save-ack-stub .kai-chat-bubble.is-assistant {
    border-style: dashed;
    opacity: 0.95;
}

.coach-copilot-kai .kai-chat-row.kai-review-save-ack-stub .kai-chat-bubble.is-assistant {
    border-style: dashed;
    opacity: 0.95;
}

/* Plan resume — legacy class kept for cleanup; UI now uses WA-style .kai-plan-resume-ask + .kai-choice-card */
.kai-plan-resume-choice-bar {
    display: none;
}

.kai-plan-resume-ask__text {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #3f2a26;
}

/* Plan save — pick upcoming session when several exist (no raw booking IDs in labels). */
.kai-plan-session-pick-bar {
    margin: 12px 0 4px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--ccc-border-color, #cbd5e1);
    background: #f8fafc;
    max-width: 100%;
    box-sizing: border-box;
}

.kai-plan-session-pick-bar__title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 10px;
}

.kai-plan-session-pick-bar__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.kai-plan-session-pick-bar__list .kai-plan-session-pick-btn,
.kai-plan-session-pick-bar__list .kai-plan-edit-pick-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

.kai-plan-session-pick-bar__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Review save — pick completed session when several exist (labels only; no raw IDs). */
.kai-review-session-pick-bar {
    margin: 12px 0 4px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--ccc-border-color, #cbd5e1);
    background: #f8fafc;
    max-width: 100%;
    box-sizing: border-box;
}

.kai-review-session-pick-bar__title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 10px;
}

.kai-review-session-pick-bar__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.kai-review-session-pick-bar__list .kai-review-session-pick-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

.kai-review-session-pick-bar__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* =============================================== */
/* CARD INFO TOOLTIPS (Core .ccc-tooltip — match Kai pills) */
/* =============================================== */

.client-ai-insights .ccc-card-header h4 {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
}

/* Wrapper uses Core .ccc-tooltip (cursor: help = ?); only style the “i” trigger. */
.ccc-card-header .card-info-tooltip,
.ccc-client-brief-card__title .card-info-tooltip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    vertical-align: top;
    margin-left: 2px;
    /* Sit near cap-height of the title, not the baseline */
    margin-top: 0.12em;
    flex-shrink: 0;
    transform: none;
    cursor: help;
}

.ccc-card-header .card-info-icon,
.ccc-client-brief-card__title .card-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    color: #4a5568;
    border: 1px solid #718096;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    cursor: help;
    font-weight: normal;
    font-style: normal;
    opacity: 0.8;
    flex-shrink: 0;
}

.ccc-card-header .card-info-tooltip:hover .card-info-icon,
.ccc-card-header .card-info-icon:hover,
.ccc-client-brief-card__title .card-info-tooltip:hover .card-info-icon,
.ccc-client-brief-card__title .card-info-icon:hover {
    border-color: #4a5568;
    color: #2d3748;
    opacity: 1;
}

/*
 * Insights tooltips (card (i) + Kai pills): Core size/padding — no forced 320px box
 * (that left empty whitespace). Reset Core .ccc-card-header span italic/subtitle bleed.
 */
#client-insights-display .grid-stack-item .card-info-tooltip .ccc-tooltip-content,
#client-insights-display .ccc-insights-grid-item-inner .card-info-tooltip .ccc-tooltip-content {
    box-sizing: border-box;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    min-width: 0;
    margin: 0;
    padding: 6px 10px;
    font-size: var(--ccc-tooltip-font-size, 12px);
    line-height: var(--ccc-tooltip-line-height, 1.4);
    font-weight: 400;
    font-style: normal;
    color: var(--ccc-tooltip-text, #333333);
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
}

.client-ai-insights .ccc-card-header .card-info-tooltip .ccc-tooltip-content,
.client-ai-insights .ccc-client-brief-card__title .card-info-tooltip .ccc-tooltip-content,
.coach-copilot-kai .kai-quick-prompt-tooltip .ccc-tooltip-content {
    box-sizing: border-box;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    min-width: 0;
    margin: 0;
    padding: 6px 10px;
    font-size: var(--ccc-tooltip-font-size, 12px);
    line-height: var(--ccc-tooltip-line-height, 1.4);
    font-weight: 400;
    font-style: normal;
    color: var(--ccc-tooltip-text, #333333);
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
}

/* =============================================== */
/* ERROR MESSAGE STYLING                          */
/* =============================================== */

.ccc-error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 12px 16px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin: 20px 0;
}

.ccc-error-message p {
    margin: 0;
}

/* =============================================== */
/* CLIENT INSIGHTS — CARD TOGGLES (inside Core .ccc-filter-after-filters; one panel) */
/* =============================================== */

/* START CLIENT INSIGHTS FILTER AFTER-BLOCK */

#client-insights-filters .ccc-filter-content.expanded {
    padding-top: 0;
    padding-bottom: 12px;
}

#client-insights-filters .ccc-filter-content.expanded > .ccc-filter-grid {
    margin-top: 8px;
}

#client-insights-filters .ccc-filter-after-filters {
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

#client-insights-filters .client-insights-cards-panel {
    margin-top: 8px;
    padding-top: 0;
    border-top: none;
}

/* Collapsed: hide after-block (card toggles) — avoids Kai layout bugs. */
#client-insights-filters .ccc-filter-content.collapsed .ccc-filter-after-filters {
    display: none !important;
}

/* Card toggles — three columns, column-major order */
.client-insights-cards-panel .insights-cards-list--compact {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(var(--insight-toggle-rows, 10), auto);
    grid-auto-flow: column;
    gap: 4px 10px;
    margin: 0;
    align-items: stretch;
    align-content: start;
}

@media (max-width: 900px) {
    .client-insights-cards-panel .insights-cards-list--compact {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .client-insights-cards-panel .insights-cards-list--compact {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

.client-insights-cards-panel .insights-card-option--compact {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    column-gap: 8px;
    padding: 6px 8px;
    min-height: 36px;
    min-width: 0;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

/* Profile sits in the same grid cell as other cards (not full width); no blue hero row */
.client-insights-cards-panel .insights-card-option--compact.profile-card {
    background: #ffffff;
    border-color: #e8e8e8;
}

.client-insights-cards-panel .insights-card-option--compact:hover {
    background: #fafafa;
    border-color: #dedede;
}

.client-insights-cards-panel .insights-card-drag-handle {
    margin-right: 0;
    width: 1.375rem;
    text-align: center;
    line-height: 1;
    font-size: 14px;
    user-select: none;
}

.client-insights-cards-panel .insights-card-drag-handle--spacer {
    visibility: hidden;
    pointer-events: none;
}

/* Grid dashboard (#306) — visibility toggles only; layout reset lives here */
.client-insights-cards-panel--grid .insights-card-option--compact {
    grid-template-columns: minmax(0, 1fr) 2.75rem;
}

.client-insights-cards-panel__layout-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 8px;
}

.client-insights-cards-panel__layout-actions .ccc-insights-grid-edit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    color: var(--ccc-text-color, #333333);
    line-height: 1.25;
}

.client-insights-cards-panel__layout-actions .ccc-insights-grid-edit-toggle .insights-toggle-wrap {
    flex: 0 0 auto;
}

.client-insights-cards-panel__layout-actions .ccc-insights-grid-reset {
    display: inline;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    color: #e35c5c;
    font-weight: 500;
    font-size: 12px;
    font-style: normal;
    line-height: inherit;
    cursor: pointer;
    background: none;
    border: none;
}

.client-insights-cards-panel__layout-actions .ccc-insights-grid-reset:hover {
    text-decoration: underline;
}

.client-insights-cards-panel .insights-card-compact-name {
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ccc-text-color, #333333);
    line-height: 1.25;
}

/* Toggle: compact track; on = Core primary red; off = wins-style soft red (note-management parity) */
#client-insights-filters .insights-toggle-wrap {
    position: relative;
    width: 36px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    justify-self: end;
    cursor: pointer;
}

#client-insights-filters .insights-toggle-wrap .insights-card-toggle-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

#client-insights-filters .insights-toggle-ui {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #f8a5a5;
    transition: background-color 0.2s ease;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(227, 92, 92, 0.2);
}

#client-insights-filters .insights-toggle-ui::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s ease;
    pointer-events: none;
}

#client-insights-filters .insights-toggle-wrap .insights-card-toggle-input:checked + .insights-toggle-ui {
    background: var(--ccc-primary-color, #e35c5c);
    box-shadow: inset 0 0 0 1px rgba(180, 40, 40, 0.25);
}

#client-insights-filters .insights-toggle-wrap .insights-card-toggle-input:checked + .insights-toggle-ui::after {
    transform: translate(16px, -50%);
}

#client-insights-filters .insights-toggle-wrap .insights-card-toggle-input:disabled {
    cursor: not-allowed;
}

#client-insights-filters .insights-toggle-wrap .insights-card-toggle-input:disabled + .insights-toggle-ui {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Profile card: always on, non-interactive — muted track/thumb (not brand red) */
#client-insights-filters .profile-card .insights-toggle-wrap .insights-card-toggle-input:disabled + .insights-toggle-ui {
    background: #d1d5db;
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    cursor: not-allowed;
}

#client-insights-filters .profile-card .insights-toggle-wrap .insights-card-toggle-input:disabled + .insights-toggle-ui::after {
    background: #f9fafb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

#client-insights-filters .profile-card .insights-toggle-wrap .insights-card-toggle-input:checked:disabled + .insights-toggle-ui {
    background: #c4c9d1;
}

#client-insights-filters .insights-toggle-wrap .insights-card-toggle-input:focus-visible + .insights-toggle-ui {
    outline: 2px solid rgba(227, 92, 92, 0.45);
    outline-offset: 2px;
}

/* END CLIENT INSIGHTS FILTER AFTER-BLOCK */

/* =============================================== */
/* FILTER COMPONENT CUSTOMIZATIONS (legacy Core filter — optional) */
/* =============================================== */

.ccc-filter-compact {
    /* Styles handled by CCC Core when that component is used elsewhere */
}

/* =============================================== */
/* MODAL STYLING                                  */
/* =============================================== */

.insights-customization-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
}

.insights-customization-modal.active {
    display: flex !important;
}

.insights-modal-content {
    position: relative;
    box-sizing: border-box;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    margin: 0 auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    z-index: 1000000;
}

/* Simple X button - not a big red button */
.insights-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    font-size: 24px;
    color: #666;
    background: none;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insights-modal-close:hover {
    color: #333;
    background-color: #f0f0f0;
    border-radius: 50%;
}

.insights-modal-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.insights-modal-header h3 {
    margin: 0;
    color: #333;
    font-size: 1.3em;
}

.insights-modal-body {
    padding: 0;
}

.insights-cards-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.insights-card-option {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
    background-color: #fff;
    cursor: move;
}

.insights-card-option:hover {
    background-color: #f8f9fa;
}

.insights-card-option.profile-card {
    background-color: #f0f8ff;
    border-color: #b3d9ff;
}

.insights-card-drag-handle {
    margin-right: 10px;
    color: #999;
    cursor: move;
    font-size: 16px;
}

.insights-card-option label {
    flex: 1;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.insights-card-option input[type="checkbox"] {
    margin-right: 8px;
}

.card-description {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-left: 10px;
}

.insights-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    margin-top: 20px;
}

/* =============================================== */
/* RESPONSIVE ADJUSTMENTS                         */
/* =============================================== */

@media (max-width: 991px) {
    .coach-copilot-layout {
        grid-template-columns: 1fr;
    }

    .coach-copilot-layout > .coach-copilot-insights-load-error {
        grid-column: 1;
    }

    .coach-copilot-cards-col {
        height: auto;
    }

    .coach-copilot-kai {
        position: static;
        top: auto;
        z-index: auto;
        height: auto;
        min-height: 0;
        align-self: stretch;
    }

    .coach-copilot-kai__sticky {
        position: static;
        top: auto;
        z-index: auto;
        height: auto;
        max-height: none;
    }

    .coach-copilot-kai .kai-copilot-card {
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .coach-copilot-kai .kai-chat-thread {
        flex: 0 1 auto;
        max-height: 420px;
    }

    /* Expanded overlay: ignore rail mobile caps — thread must fill and scroll */
    body.kai-copilot-is-expanded .coach-copilot-kai__sticky {
        height: 100% !important;
        max-height: 100% !important;
    }

    body.kai-copilot-is-expanded .coach-copilot-kai .kai-copilot-card {
        height: 100% !important;
        max-height: 100% !important;
    }

    body.kai-copilot-is-expanded .coach-copilot-kai .kai-chat-thread {
        flex: 1 1 auto !important;
        max-height: none !important;
        min-height: 0;
        overflow-y: auto;
    }

    .coach-copilot-kai .kai-copilot-card-header {
        flex-wrap: wrap;
    }

    .coach-copilot-kai .kai-copilot-header-actions {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .notes-header-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .client-ai-insights-container .notes-header-section .client-insights-header-refresh {
        align-self: flex-end;
        white-space: normal;
        text-align: right;
    }
    
    .header-buttons {
        width: 100%;
        justify-content: flex-end;
    }
    
    .client-ai-insights {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .coach-copilot-layout {
        grid-template-columns: 1fr;
    }

    .coach-copilot-kai {
        position: static;
        top: auto;
        z-index: auto;
        height: auto;
        min-height: 0;
        align-self: stretch;
    }

    .coach-copilot-kai__sticky {
        position: static;
        top: auto;
        z-index: auto;
        height: auto;
        max-height: none;
    }
    
    .insights-modal-content {
        width: 95%;
        padding: 20px;
        max-height: 90vh;
    }
    
    .insights-modal-footer {
        flex-direction: column;
    }
    
    .insights-modal-footer .ccc-button {
        width: 100%;
    }
}

/* Ask AI functionality moved to messaging system */

/* Profile card stats styling */
.profile-stats {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-number {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    line-height: 1;
}

.stat-label {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Drag and drop states (ghost matches handle grey — not blue) */
.insights-card-option.dragging {
    opacity: 0.95;
    background-color: #ffffff;
    border: 2px dashed #666666;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}



/* Kai — discarded unsaved Plan drafts (collapsed scrollback) */
.coach-copilot-kai .kai-plan-discarded-bar .kai-chat-bubble--muted {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
}
.coach-copilot-kai .kai-plan-discarded-bar__body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.coach-copilot-kai .kai-plan-discarded-bar__text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #64748b;
}
.coach-copilot-kai .kai-plan-discarded-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.coach-copilot-kai .kai-plan-clear-discarded-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.65rem;
}

/* Kai — session Prepare: collapsible data sources (pill chips) + plan actions (no rule between blocks) */
.kai-plan-data-sources-details {
    margin-top: 0.35rem;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(200, 110, 95, 0.2);
    box-sizing: border-box;
}

.coach-copilot-kai .kai-plan-data-sources-details {
    margin-top: 0.25rem;
}

.kai-plan-data-sources-details__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #475569;
    background: rgba(255, 255, 255, 0.92);
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.kai-plan-data-sources-details__summary:focus {
    outline: none;
}

.kai-plan-data-sources-details__summary:focus-visible {
    outline: 2px solid rgba(214, 51, 132, 0.35);
    outline-offset: 2px;
}

.kai-plan-data-sources-details__summary::-webkit-details-marker {
    display: none;
}

.kai-plan-data-sources-details__chevron {
    flex-shrink: 0;
    font-size: 0.65rem;
    color: #94a3b8;
    transition: transform 0.18s ease;
}

.kai-plan-data-sources-details[open] .kai-plan-data-sources-details__chevron {
    transform: rotate(180deg);
    color: #64748b;
}

.kai-plan-data-sources-details__inner {
    padding: 8px 10px 10px;
    background: #fce8e4;
    border-top: 1px solid rgba(200, 110, 95, 0.18);
    box-sizing: border-box;
}

.kai-plan-data-sources-details__group-label {
    font-weight: 700;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #78716c;
    margin: 0 0 6px;
}

.kai-plan-data-sources-details__group-label:not(:first-child) {
    margin-top: 10px;
}

.coach-copilot-kai .kai-plan-data-sources-details__inner .kai-chat-source-chips {
    margin-bottom: 0;
}

.coach-copilot-kai .kai-plan-data-sources-details__inner .kai-chat-source-chips + .kai-chat-source-chips {
    margin-top: 8px;
}

.coach-copilot-kai .kai-plan-data-sources-details__inner .kai-source-chip span {
    white-space: normal;
    text-align: left;
}

.kai-chat-row.is-assistant .kai-plan-untimed-nudge {
    margin: 0.35rem 0 0.15rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #7c2d12;
    background: rgba(254, 243, 199, 0.85);
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-radius: 6px;
}

.kai-chat-row.is-assistant .kai-plan-mode-actions,
.kai-chat-row.is-assistant .kai-review-mode-actions,
.kai-chat-row.is-assistant .kai-plan-commit-bar {
    margin-top: 0.35rem;
    padding-top: 0;
    border-top: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    align-items: center;
}

.coach-copilot-kai .kai-chat-row.is-assistant .kai-plan-mode-actions,
.coach-copilot-kai .kai-chat-row.is-assistant .kai-review-mode-actions {
    margin-top: 0.35rem;
    padding-top: 0;
    border-top: none;
    justify-content: flex-start;
}

.coach-copilot-kai .kai-chat-row.is-assistant .kai-plan-mode-actions .ccc-button,
.coach-copilot-kai .kai-chat-row.is-assistant .kai-review-mode-actions .ccc-button {
    font-weight: 500;
    color: #64748b;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: none;
}

.kai-chat-row.is-assistant .kai-plan-mode-actions .ccc-button,
.kai-chat-row.is-assistant .kai-review-mode-actions .ccc-button,
.kai-chat-row.is-assistant .kai-plan-commit-bar .ccc-button {
    font-size: 0.6875rem !important;
    padding: 0.2rem 0.45rem !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
}

.kai-plan-commit-bar {
    border-top-style: solid;
    border-top-color: rgba(214, 51, 132, 0.22);
}

/* End of minimal CCC Insights styles - Relies on CCC Core for all card styling */

/* =============================================== */
/* HISTORICAL ARTIFACT IMPORT MODAL (#375)         */
/* =============================================== */

.kai-history-import-modal[hidden] {
    display: none !important;
}

.kai-history-import-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kai-history-import-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.kai-history-import-modal__panel {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(640px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.5rem 1.5rem 1.25rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.28);
}

.kai-history-import-modal__close {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
}

.kai-history-import-modal__close:hover {
    color: #0f172a;
    background: #f1f5f9;
    border-radius: 50%;
}

.kai-history-import-modal__header h3 {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    color: #0f172a;
}

.kai-history-import-modal__lede {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.45;
}

.kai-history-import-field {
    margin-bottom: 0.85rem;
}

.kai-history-import-field label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.kai-history-import-field .ccc-form-control,
.kai-import-body {
    width: 100%;
}

.kai-import-body {
    min-height: 10rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.4;
}

.kai-history-import-hint {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: #b45309;
}

.kai-history-import-preview,
.kai-history-import-confirm {
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.kai-history-import-preview h4 {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
}

.kai-import-preview-text,
.kai-import-existing-preview {
    margin: 0;
    max-height: 12rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #334155;
}

.kai-history-import-confirm__msg {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: #9a3412;
    font-weight: 600;
}

.kai-history-import-confirm__check {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.55rem;
    font-size: 0.85rem;
    color: #334155;
    cursor: pointer;
}

.kai-history-import-status {
    min-height: 1.25rem;
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #15803d;
}

.kai-history-import-status.is-error {
    color: #b91c1c;
}

.kai-history-import-modal__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #e2e8f0;
}

body.kai-history-import-open {
    overflow: hidden;
}

/* START #401 COACH WA IMPORT IN-CHAT + PLAN PREFLIGHT */

.coach-copilot-kai .kai-wa-import-prompt__text {
    margin: 0 0 0.75rem;
    line-height: 1.45;
}

.kai-wa-export-dropzone {
    border: 2px dashed #94a3b8;
    border-radius: 10px;
    padding: 1.35rem 1rem;
    text-align: center;
    cursor: pointer;
    background: #f8fafc;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.kai-wa-export-dropzone--inchat {
    padding: 1rem 0.85rem;
    background: rgba(255, 255, 255, 0.72);
}

.kai-wa-export-dropzone:hover,
.kai-wa-export-dropzone.is-dragover,
.kai-wa-export-dropzone.has-files {
    border-color: #475569;
    background: #f1f5f9;
}

.kai-wa-export-dropzone__title {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: #0f172a;
}

.kai-wa-export-dropzone__hint {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}

.kai-wa-import-results {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.kai-wa-import-results li {
    margin: 0 0 0.35rem;
}

.kai-wa-import-status {
    min-height: 1.25rem;
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #334155;
}

.kai-wa-import-status.is-error {
    color: #b91c1c;
}

.kai-wa-import-mismatch {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0.75rem 0.85rem;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 10px;
}

.kai-wa-import-mismatch__ask {
    margin: 0 0 0.65rem;
    font-weight: 600;
    color: #1e3a8a;
}

.kai-wa-import-mismatch .kai-choice-card {
    text-decoration: none;
}

.kai-wa-client-mismatch__text {
    margin: 0 0 0.65rem;
}

.kai-wa-client-mismatch .kai-choice-card {
    text-decoration: none;
}

.kai-wa-sender-confirm__text {
    margin: 0 0 0.65rem;
}

.kai-wa-sender-confirm__choices-label {
    margin: 0.5rem 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}

.kai-wa-sender-confirm__item {
    margin: 0.65rem 0 0;
}

.kai-wa-sender-confirm__name {
    margin: 0 0 0.35rem;
    font-weight: 600;
}

.kai-wa-plan-preflight .kai-chat-bubble {
    max-width: 100%;
}

/* Preflight = normal Kai coral bubble; white choice cards sit inside for contrast */
.coach-copilot-kai .kai-wa-plan-preflight__bubble .kai-wa-plan-preflight__body {
    padding: 12px 14px 14px;
    white-space: normal;
}

.kai-wa-plan-preflight__text {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #111b21;
    white-space: pre-wrap;
}

.kai-wa-plan-preflight__choices-label {
    margin: 0 0 0.45rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4a3728;
}

.kai-wa-plan-preflight__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Gemini-style yes/no choice cards (#401 polish) */
.kai-choice-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 420px) {
    .kai-choice-cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* Lead first-touch source chips (#497) — Kai is created_via, not CRM source */
.kai-lead-origin-sources {
    grid-template-columns: 1fr 1fr;
    margin: 0.5rem 0 0.25rem;
}

@media (min-width: 520px) {
    .kai-lead-origin-sources {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.kai-lead-origin-pick.is-selected {
    border-color: #c45c3e;
    background: #fff1ec;
    box-shadow: 0 0 0 1px rgba(196, 92, 62, 0.25);
}

.kai-lead-origin-needed {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.9rem;
    color: #9a3412;
}

.kai-lead-origin-label {
    margin-top: 0.65rem;
}

.kai-choice-card {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.85rem 0.9rem;
    text-align: left;
    border: 1px solid #e8d5cf;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.coach-copilot-kai .kai-choice-card,
.coach-copilot-kai .kai-choice-card .kai-choice-card__label {
    color: #0f172a;
}

.kai-choice-card:hover {
    background: #fff8f6;
    border-color: #f0cfc6;
    box-shadow: 0 1px 3px rgba(190, 95, 75, 0.12);
}

.kai-choice-card:focus-visible {
    outline: 2px solid #c45c4a;
    outline-offset: 2px;
}

.kai-choice-card__label {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
}

.kai-choice-card__hint {
    display: none;
}

/* END #401 COACH WA IMPORT + PLAN PREFLIGHT */

/* =============================================== */
/* CLIENT BRIEF CARD (#372) — Core .ccc-card chrome */
/* =============================================== */

/*
 * Always-open in GridStack: fill the cell, scroll the body (do not clip).
 * Inner sections stay <details>; only those keep the triangle.
 */
#client-insights-display .ccc-insights-grid-item-inner .ccc-client-brief-card.ccc-card {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#client-insights-display .ccc-insights-grid-item-inner .ccc-client-brief-card .ccc-client-brief-card__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.ccc-client-brief-card .ccc-card-header .ccc-badge {
    font-style: normal;
    margin: 0;
    flex-shrink: 0;
}

.ccc-client-brief-section__summary::-webkit-details-marker {
    display: none;
}

.ccc-client-brief-section__summary::marker {
    content: '';
}

.ccc-client-brief-expand-toggle {
    flex-shrink: 0;
    display: block;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--ccc-text-color, #333333);
    border-bottom: 0;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
    box-sizing: content-box;
    pointer-events: none;
}

.ccc-client-brief-section[open] > .ccc-client-brief-section__summary .ccc-client-brief-expand-toggle {
    transform: rotate(180deg);
}

.ccc-client-brief-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
    color: #718096;
}

.ccc-client-brief-updated {
    color: #718096;
}

/*
 * Text actions (not .ccc-button). Reset native button chrome so they read as links.
 * Scoped under the Brief card.
 */
.ccc-client-brief-card .ccc-client-brief-textlink,
.ccc-client-brief-card .ccc-client-brief-linkbtn {
    display: inline;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: inherit;
    color: #718096;
    text-decoration: underline;
    cursor: pointer;
}

.ccc-client-brief-card .ccc-client-brief-textlink:hover,
.ccc-client-brief-card .ccc-client-brief-textlink:focus,
.ccc-client-brief-card .ccc-client-brief-linkbtn:hover,
.ccc-client-brief-card .ccc-client-brief-linkbtn:focus {
    color: var(--ccc-primary-color, #c53030);
    background: none;
    outline: none;
    text-decoration: underline;
}

.ccc-client-brief-health {
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.75rem;
    background: #ffffff;
    border: 1px solid var(--ccc-border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #2d3748;
}

.ccc-client-brief-health__label {
    display: inline-block;
    margin-right: 0.35rem;
    font-weight: 600;
}

.ccc-client-brief-health[data-health-level="strong"] .ccc-client-brief-health__label {
    color: #276749;
}

.ccc-client-brief-health[data-health-level="fair"] .ccc-client-brief-health__label {
    color: #975a16;
}

.ccc-client-brief-health[data-health-level="thin"] .ccc-client-brief-health__label {
    color: #c53030;
}

.ccc-client-brief-error {
    margin: 0 0 0.6rem;
    padding: 0.4rem 0.55rem;
    background: #fff5f5;
    border: 1px solid #feb2b2;
    color: #9b2c2c;
    font-size: 0.8rem;
    border-radius: 3px;
}

.ccc-client-brief-empty {
    margin: 0;
    color: #a0aec0;
    font-size: 0.85rem;
}

.ccc-client-brief-section {
    margin: 0 0 0.5rem;
    background: #ffffff;
    border: 1px solid var(--ccc-border-color, #e2e8f0);
    border-radius: 6px;
    padding: 0 0.75rem;
}

.ccc-client-brief-section:last-child {
    margin-bottom: 0;
}

.ccc-client-brief-section__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    padding: 0.55rem 0;
    font-size: 0.85rem;
    color: var(--ccc-text-color, #4a5568);
}

.ccc-client-brief-section__label {
    font-weight: 600;
}

.ccc-client-brief-section__panel {
    padding: 0 0 0.65rem;
}

.ccc-client-brief-section__read {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #2d3748;
    white-space: pre-wrap;
}

.ccc-client-brief-section__body {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
    line-height: 1.45;
    padding: 0.4rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    resize: vertical;
    min-height: 3.5rem;
    background: #fff;
}

.ccc-client-brief-section__actions,
.ccc-client-brief-section__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.ccc-client-brief-conflict {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    color: #9c4221;
}

.ccc-client-brief-section__sources {
    font-size: 0.75rem;
    color: #718096;
}

.ccc-client-brief-sources {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
}

.ccc-client-brief-src-type {
    font-weight: 600;
}

.ccc-client-brief-sources-empty {
    margin: 0.2rem 0 0;
    color: #a0aec0;
}

/* START #482 KAI HOME */
body.ccc-kai-home .ccc-kai-home-page .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.ccc-kai-home #primary,
body.ccc-kai-home .ccc-kai-home-page,
body.ccc-kai-home .ccc-kai-home-workspace {
    width: 100%;
    max-width: none;
    float: none;
    margin-left: 0;
    margin-right: 0;
}

body.ccc-kai-home .site-content {
    padding-top: 24px;
}

body.ccc-kai-home .site-content > .ast-container {
    max-width: 100%;
    width: 100%;
}

/* Insights sticky-rail math does not apply: this is a page, not a side column. */
body.ccc-kai-home .coach-copilot-kai--home {
    position: relative;
    top: auto;
    width: 100%;
    max-width: none;
    align-self: stretch;
    z-index: 1;
}

body.ccc-kai-home .coach-copilot-kai--home .coach-copilot-kai__sticky {
    height: auto;
    max-height: none;
    min-height: min(70vh, 40rem);
}

body.ccc-kai-home .coach-copilot-kai--home .kai-copilot-card {
    min-height: min(70vh, 40rem);
    height: auto;
    max-height: none;
}

.kai-home-scope {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 1 auto;
    min-width: 0;
}

/* Model-picker control: dark avatar + name + caret. */
body.ccc-kai-home .coach-copilot-kai .ccc-kai-person-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 14rem;
    height: auto;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--kai-composer-border, #64748b);
    border-radius: 999px;
    background: #fff;
    color: #0f172a !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
}

body.ccc-kai-home .coach-copilot-kai .ccc-kai-person-picker:hover,
body.ccc-kai-home .coach-copilot-kai .ccc-kai-person-picker[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--ccc-primary-color, #e35c5c) 55%, var(--kai-composer-border, #64748b));
    background: color-mix(in srgb, var(--ccc-primary-color, #e35c5c) 10%, #ffffff);
    color: #0f172a !important;
    box-shadow: none;
    transform: none;
}

body.ccc-kai-home .ccc-kai-person-picker__avatar {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0f172a;
    flex-shrink: 0;
    overflow: hidden;
}

body.ccc-kai-home .ccc-kai-person-picker__photo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

body.ccc-kai-home .ccc-kai-person-picker__lead-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    color: #fde68a;
    line-height: 1;
}

body.ccc-kai-home .ccc-kai-person-picker__lead-icon[hidden],
body.ccc-kai-home .ccc-kai-person-picker__photo[hidden] {
    display: none !important;
}

body.ccc-kai-home .ccc-kai-person-picker__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}

body.ccc-kai-home .ccc-kai-person-picker__caret {
    font-size: 9px;
    color: #64748b;
    flex-shrink: 0;
}

body.ccc-kai-home .kai-home-scope__group {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0 0.15rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    padding-left: 0.5rem;
}

body.ccc-kai-home .kai-home-scope__pick-kind {
    font-size: 10px;
    color: #94a3b8;
    margin-left: 0.25rem;
}

/* Same hover as .kai-quick-prompt-btn — theme button:hover otherwise turns the label white. */
body.ccc-kai-home .coach-copilot-kai .kai-home-scope__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 5px 9px;
    border: 1px solid var(--kai-composer-border, #64748b);
    border-radius: 999px;
    background: #fff;
    color: #0f172a !important;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

body.ccc-kai-home .coach-copilot-kai .kai-home-scope__toggle:hover {
    border-color: color-mix(in srgb, var(--ccc-primary-color, #e35c5c) 55%, var(--kai-composer-border, #64748b));
    background: color-mix(in srgb, var(--ccc-primary-color, #e35c5c) 12%, #ffffff);
    color: #0f172a !important;
    box-shadow: none;
    transform: none;
}

body.ccc-kai-home .coach-copilot-kai .kai-home-scope__toggle:focus-visible {
    outline: 2px solid var(--ccc-primary-color, #e35c5c);
    outline-offset: 2px;
}

body.ccc-kai-home .coach-copilot-kai .kai-home-scope__toggle[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--ccc-primary-color, #e35c5c) 55%, var(--kai-composer-border, #64748b));
    background: color-mix(in srgb, var(--ccc-primary-color, #e35c5c) 12%, #ffffff);
    color: #0f172a !important;
}

.kai-home-scope__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    width: min(22rem, 80vw);
    padding: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.kai-home-scope__search {
    width: 100%;
}

.kai-home-scope__results {
    position: relative;
    top: auto;
    max-height: 16rem;
    overflow-y: auto;
}
    left: auto;
    right: auto;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    max-height: 16rem;
}

.kai-home-scope__results .kai-mention-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    font: inherit;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.kai-home-scope__results .ccc-kai-person-picker__avatar {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0f172a;
    flex-shrink: 0;
    overflow: hidden;
}

body.ccc-kai-home .ccc-kai-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 28px;
    padding: 0 6px 0 3px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--kai-composer-border, #64748b);
    font-size: 12px;
}

body.ccc-kai-home .ccc-kai-context-chip[data-kai-person-kind="lead"] {
    border-color: color-mix(in srgb, var(--ccc-primary-color, #e35c5c) 42%, #e8d5cf);
    background: color-mix(in srgb, var(--ccc-primary-color, #e35c5c) 10%, #ffffff);
}

body.ccc-kai-home .ccc-kai-context-chip__clear[hidden] {
    display: none !important;
}

body.ccc-kai-home .ccc-kai-context-chip__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

body.ccc-kai-home .ccc-kai-context-chip__name {
    font-weight: 500;
    font-style: normal;
    color: #0f172a;
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ccc-kai-home .ccc-kai-context-chip__kind {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
    flex-shrink: 0;
}

body.ccc-kai-home .ccc-kai-context-chip[data-kai-person-kind="lead"] .ccc-kai-context-chip__kind {
    color: #7f1d1d;
}

body.ccc-kai-home .ccc-kai-context-chip__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 0.15rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: #718096;
}

body.ccc-kai-home .ccc-kai-context-chip__clear:hover,
body.ccc-kai-home .ccc-kai-context-chip__clear:focus {
    color: #0f172a;
}

body.ccc-kai-home .ccc-kai-context-chip[data-kai-person-kind="lead"] .ccc-kai-context-chip__clear:hover,
body.ccc-kai-home .ccc-kai-context-chip[data-kai-person-kind="lead"] .ccc-kai-context-chip__clear:focus {
    color: #7f1d1d;
}

body.ccc-kai-home .kai-chat-thread .kai-home-welcome .kai-chat-bubble {
    margin-top: 0;
}
/* END #482 KAI HOME */