/* _content/Kazzola.AI/AddConnector/AddConnector.razor.rz.scp.css */
/* AddConnector.razor.css */

/* ── Design tokens (scoped to page) ──────────────────────────────────────── */



/* AddConnector.razor.css
   Scoped stylesheet for the /ai/connectors/new category-picker page.

   Class inventory (owned by this file):
     Page shell      : .page  .page__inner
     Breadcrumb      : .cd-breadcrumb  .cd-breadcrumb__link  .cd-breadcrumb__sep  .cd-breadcrumb__current
     Page header     : .page-header  .page-header__title  .page-header__subtitle  .page-header__decoration
     Category grid   : .category-grid

   NOTE: Card classes (cat-card, cat-card--wide, cat-card__content, accent--*, etc.)
   are scoped to ConnectorCategoryCard.razor.css and are NOT repeated here.        */

/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS  (scoped to .page so they don't leak)
═══════════════════════════════════════════════════════════════════════════ */

.page[b-aa1yd5laey] {
    /* Colour aliases — map to Kazzola design system */
    --color-primary: #0059bb;
    --color-primary-10: rgba(0, 89, 187, 0.10);
    --color-primary-fixed: #d8e2ff;
    --color-surface: #f7f9fb;
    --color-surface-container: #eceef0;
    --color-surface-container-low: #f2f4f6;
    --color-on-surface: #191c1e;
    --color-on-surface-variant: #414754;
    --color-outline-variant: #c1c6d7;
    /* Fluid spacing — all spacing in the page shell uses clamp()
       so nothing collapses on mobile or over-stretches on 4K */
    --sp-xs: clamp(4px, 0.5vw, 6px);
    --sp-sm: clamp(8px, 1vw, 12px);
    --sp-md: clamp(12px, 1.5vw, 16px);
    --sp-lg: clamp(16px, 2vw, 24px);
    --sp-xl: clamp(24px, 3vw, 32px);
    --sp-2xl: clamp(32px, 4vw, 48px);
    --sp-3xl: clamp(40px, 5vw, 64px);

    /* Layout */
    padding: 24px 24px 56px; /* top-nav offset + gutter */
    width: 100%;
    overflow: auto; /* ← add this */
    height: 100vh; /* ← add this */
    background: var(--color-surface);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. PAGE INNER CONTAINER
═══════════════════════════════════════════════════════════════════════════ */

.page__inner[b-aa1yd5laey] {
    max-width: 1200px;
    margin: 0 auto;
    /* Fluid padding: tight on mobile, generous on desktop */
    padding: var(--sp-lg) var(--sp-md);
}

@media (min-width: 640px) {
    .page__inner[b-aa1yd5laey] {
        padding: var(--sp-xl) var(--sp-lg);
    }
}

@media (min-width: 1024px) {
    .page__inner[b-aa1yd5laey] {
        padding: var(--sp-2xl) var(--sp-xl);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BREADCRUMB
═══════════════════════════════════════════════════════════════════════════ */






/* ═══════════════════════════════════════════════════════════════════════════
   4. PAGE HEADER
═══════════════════════════════════════════════════════════════════════════ */

.page-header[b-aa1yd5laey] {
    position: relative;
    margin-bottom: var(--sp-xl);
    overflow: hidden; /* clips the decorative blob */
}

.page-header__title[b-aa1yd5laey] {
    /* Fluid type: 1.4rem on small screens → 2rem at desktop */
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
    margin: 0 0 var(--sp-xs);
    line-height: 1.2;
}

.page-header__subtitle[b-aa1yd5laey] {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    color: var(--color-on-surface-variant);
    margin: 0;
    max-width: 52ch;
    line-height: 1.6;
}

/* Decorative atmospheric blob — purely visual, hidden on narrow screens */
.page-header__decoration[b-aa1yd5laey] {
    position: absolute;
    top: -48px;
    right: -48px;
    width: clamp(120px, 20vw, 256px);
    height: clamp(120px, 20vw, 256px);
    background: var(--color-primary-fixed);
    opacity: 0.12;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

/* Hide decoration below 480 px — it clips awkwardly */
@media (max-width: 480px) {
    .page-header__decoration[b-aa1yd5laey] {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CATEGORY GRID
═══════════════════════════════════════════════════════════════════════════ */

.category-grid[b-aa1yd5laey] {
    display: grid;
    /* 1 column → 2 → 3 as viewport grows */
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
}

@media (min-width: 640px) {
    .category-grid[b-aa1yd5laey] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .category-grid[b-aa1yd5laey] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. REDUCED MOTION
═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .cd-breadcrumb__link[b-aa1yd5laey] {
        transition: none;
    }
}
/* _content/Kazzola.AI/AddConnector/CategoryCard.razor.rz.scp.css */
/* CategoryCard.razor.css — compact variant */

/* ═══════════════════════════════════════════════════════════════════════════
   1. CARD SHELL
═══════════════════════════════════════════════════════════════════════════ */

.cat-card[b-k5nsyogm8t] {
    display: flex;
    align-items: stretch;
    gap: 16px;
    background: var(--color-background-primary, #ffffff);
    border: 0.5px solid var(--color-border-tertiary, #c1c6d7);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    outline: none;
    position: relative;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s ease;
}

    .cat-card:hover[b-k5nsyogm8t] {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        transform: translateY(-3px);
        border-color: var(--color-border-info, #378ADD);
    }

    .cat-card:focus-visible[b-k5nsyogm8t] {
        box-shadow: 0 0 0 3px rgba(0, 89, 187, 0.25);
        border-color: var(--color-border-info, #378ADD);
        outline: none;
    }

.cat-card--pressed[b-k5nsyogm8t] {
    transform: scale(0.98) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition-duration: 0.07s !important;
}

/* Wide card: full-width on mobile, 2-of-3 columns on desktop */
.cat-card--wide[b-k5nsyogm8t] {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .cat-card--wide[b-k5nsyogm8t] {
        grid-column: span 2;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. CONTENT COLUMN
═══════════════════════════════════════════════════════════════════════════ */

.cat-card__content[b-k5nsyogm8t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. ICON WRAP
═══════════════════════════════════════════════════════════════════════════ */

.cat-card__icon-wrap[b-k5nsyogm8t] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}

.cat-card__icon[b-k5nsyogm8t] {
    font-size: 20px;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. ACCENT VARIANTS  (resting + hover)
═══════════════════════════════════════════════════════════════════════════ */

.accent--primary[b-k5nsyogm8t] {
    background: rgba( 0, 89, 187, 0.10);
    color: #0059bb;
}

.accent--secondary[b-k5nsyogm8t] {
    background: rgba(208,225,251, 0.55);
    color: #505f76;
}

.accent--tertiary[b-k5nsyogm8t] {
    background: rgba(255,219,204, 0.45);
    color: #9e3d00;
}

.accent--neutral[b-k5nsyogm8t] {
    background: rgba(193,198,215, 0.22);
    color: #414754;
}

.accent--surface[b-k5nsyogm8t] {
    background: #e0e3e5;
    color: #5f5e5a;
}

.accent--purple[b-k5nsyogm8t] {
    background: #EEEDFE;
    color: #3C3489;
}

.accent--green[b-k5nsyogm8t] {
    background: #EAF3DE;
    color: #27500A;
}

.accent--amber[b-k5nsyogm8t] {
    background: #FAEEDA;
    color: #633806;
}

.accent--coral[b-k5nsyogm8t] {
    background: #FAECE7;
    color: #712B13;
}

.accent--teal[b-k5nsyogm8t] {
    background: #E1F5EE;
    color: #085041;
}

.cat-card:hover .accent--primary[b-k5nsyogm8t] {
    background: #0059bb;
    color: #fff;
}

.cat-card:hover .accent--secondary[b-k5nsyogm8t] {
    background: #505f76;
    color: #fff;
}

.cat-card:hover .accent--tertiary[b-k5nsyogm8t] {
    background: #9e3d00;
    color: #fff;
}

.cat-card:hover .accent--neutral[b-k5nsyogm8t] {
    background: #414754;
    color: #fff;
}

.cat-card:hover .accent--surface[b-k5nsyogm8t] {
    background: #5f5e5a;
    color: #fff;
}

.cat-card:hover .accent--purple[b-k5nsyogm8t] {
    background: #3C3489;
    color: #fff;
}

.cat-card:hover .accent--green[b-k5nsyogm8t] {
    background: #27500A;
    color: #fff;
}

.cat-card:hover .accent--amber[b-k5nsyogm8t] {
    background: #633806;
    color: #fff;
}

.cat-card:hover .accent--coral[b-k5nsyogm8t] {
    background: #712B13;
    color: #fff;
}

.cat-card:hover .accent--teal[b-k5nsyogm8t] {
    background: #085041;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. TYPOGRAPHY
═══════════════════════════════════════════════════════════════════════════ */

.cat-card__title[b-k5nsyogm8t] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary, #191c1e);
    margin: 0 0 4px;
    line-height: 1.3;
}

.cat-card__description[b-k5nsyogm8t] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #414754);
    line-height: 1.5;
    margin: 0 0 10px;
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. CTA ROW
═══════════════════════════════════════════════════════════════════════════ */

.cat-card__cta[b-k5nsyogm8t] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-info, #0059bb);
    user-select: none;
    transition: gap 0.18s ease;
    text-decoration: none;
}

.cat-card:hover .cat-card__cta[b-k5nsyogm8t] {
    gap: 8px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cat-card__cta-arrow[b-k5nsyogm8t] {
    font-size: 15px;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. WIDE DECORATIVE VISUAL
═══════════════════════════════════════════════════════════════════════════ */

.cat-card__wide-visual[b-k5nsyogm8t] {
    display: none;
    width: 120px;
    min-height: 90px;
    background: var(--color-background-secondary, #f2f4f6);
    border-radius: 8px;
    padding: 12px;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    align-self: center;
}

@media (min-width: 768px) {
    .cat-card__wide-visual[b-k5nsyogm8t] {
        display: flex;
    }
}

.skeleton[b-k5nsyogm8t] {
    height: 6px;
    background: var(--color-border-tertiary, #c1c6d7);
    border-radius: 3px;
    opacity: 0.4;
}

.skeleton--75[b-k5nsyogm8t] {
    width: 75%;
}

.skeleton--50[b-k5nsyogm8t] {
    width: 50%;
}

.skeleton--full[b-k5nsyogm8t] {
    width: 100%;
}

.skeleton-dot[b-k5nsyogm8t] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 89, 187, 0.15);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. REDUCED MOTION
═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .cat-card[b-k5nsyogm8t],
    .cat-card:hover[b-k5nsyogm8t],
    .cat-card--pressed[b-k5nsyogm8t],
    .cat-card__icon-wrap[b-k5nsyogm8t],
    .cat-card__cta[b-k5nsyogm8t] {
        transition: none;
        transform: none !important;
        box-shadow: none;
    }
}
/* _content/Kazzola.AI/Chat/AssistantMessage.razor.rz.scp.css */
.asst-msg[b-brm83kuviu] {
    display: flex;
    gap: .75rem;
    padding: .6rem 0;
    animation: fadeUp .32s ease;
}
.asst-avatar[b-brm83kuviu] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    margin-top: 3px;
}
.asst-avatar svg[b-brm83kuviu] { width: 28px; height: 28px; }
.asst-body[b-brm83kuviu] { flex: 1; min-width: 0; }
.asst-content[b-brm83kuviu] {
    font-size: .93rem;
    line-height: 1.75;
    color: var(--text-primary);
}
/* Claude action bar – only visible on hover */
.asst-actions[b-brm83kuviu] {
    display: flex;
    gap: 1px;
    margin-top: .4rem;
    opacity: 0;
    transition: opacity var(--t-fast);
}
.asst-msg:hover .asst-actions[b-brm83kuviu] { opacity: 1; }
.act-btn[b-brm83kuviu] {
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--t-fast);
}
.act-btn svg[b-brm83kuviu] { width: 13px; height: 13px; }
.act-btn:hover[b-brm83kuviu] {
    background: rgba(0,0,0,.06);
    color: var(--text-secondary);
}

@media (max-width: 480px) {
  .asst-msg[b-brm83kuviu] { gap: .5rem; }
  .asst-avatar[b-brm83kuviu] { width: 22px; height: 22px; }
  .asst-avatar svg[b-brm83kuviu] { width: 22px; height: 22px; }
  .asst-content[b-brm83kuviu] { font-size: .875rem; }
}
/* Always show action bar on touch */
@media (hover: none) {
  .asst-actions[b-brm83kuviu] { opacity: 1; }
}

.act-btn--copied svg[b-brm83kuviu] { stroke: #22C55E; }

/* AssistantMessage.razor.cs no longer needed — logic is inline */
/* _content/Kazzola.AI/Chat/AssistantThinking.razor.rz.scp.css */
.thinking-row[b-rwxdgfp881] {
    display: flex;
    gap: .75rem;
    padding: .6rem 0;
    animation: fadeUp .28s ease;
}
.thinking-avatar[b-rwxdgfp881] {
    width: 28px; height: 28px;
    flex-shrink: 0; margin-top: 3px;
}
.thinking-avatar svg[b-rwxdgfp881] { width: 28px; height: 28px; }
.thinking-content[b-rwxdgfp881] { flex: 1; min-width: 0; padding-top: 2px; }

@media (max-width: 480px) {
  .thinking-row[b-rwxdgfp881] { gap: .5rem; }
  .thinking-avatar[b-rwxdgfp881] { width: 22px; height: 22px; }
  .thinking-avatar svg[b-rwxdgfp881] { width: 22px; height: 22px; }
}

/* Rich step body layout */
.thinking-status__body[b-rwxdgfp881] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.thinking-status__agent[b-rwxdgfp881] {
    font-size: .72rem;
    font-weight: 600;
    color: #9E9990;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.thinking-status--current .thinking-status__agent[b-rwxdgfp881] { color: #CC7C54; }

/* Failed state */
.thinking-status--failed[b-rwxdgfp881] { opacity: .55; }
.thinking-status--failed .thinking-status__icon[b-rwxdgfp881] { color: #EF4444; }
.thinking-status--failed .thinking-status__label[b-rwxdgfp881] { color: #EF4444; }

/* ── Planning row (shown before plan event arrives) ── */
.planning-row[b-rwxdgfp881] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 0;
    animation: fadeUp .25s ease;
}
.asst-avatar-sm[b-rwxdgfp881] { width: 26px; height: 26px; flex-shrink: 0; }
.planning-label[b-rwxdgfp881] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: var(--text-secondary);
}
.planning-spinner[b-rwxdgfp881] {
    width: 11px; height: 11px;
    border: 1.5px solid rgba(0,0,0,.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .65s linear infinite;
    flex-shrink: 0;
}

/* Error row */
.error-row[b-rwxdgfp881] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--r-md);
    color: #DC2626;
    font-size: .83rem;
    margin: .35rem 0;
    animation: fadeUp .25s ease;
}
/* _content/Kazzola.AI/Chat/ChatLayout.razor.rz.scp.css */
/* ── Chat layout: column with input pinned at bottom ── */
.chat-layout[b-q9kwzjinpb] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #F0EDE8; /* ← whole layout warm cream, no zone mismatch */
}

/* ── Conversation area: flex:1 so it fills remaining height ── */
.chat-layout__conv[b-q9kwzjinpb] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F0EDE8; /* ← explicit, overrides any inherited white */
}

/* ── Sticky input area ── */
.chat-layout__bottom[b-q9kwzjinpb] {
    flex-shrink: 0;
    padding: .65rem 1rem max(2.6rem, env(safe-area-inset-bottom));
    background: #F0EDE8;
}

.chat-layout__input-wrap[b-q9kwzjinpb] {
    max-width: 720px;
    margin: 0 auto;
}

/* ── Category pills ── */
.category-pills[b-q9kwzjinpb] {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
    justify-content: center;
    margin-top: .85rem;
    padding: 0 .2rem;
}

.cat-pill[b-q9kwzjinpb] {
    display: flex;
    align-items: center;
    gap: .38rem;
    padding: .4rem .85rem;
    background: #FFFFFF;
    border: 1px solid #E3DED6;
    border-radius: 9999px;
    font-size: .8rem;
    color: #6B6560;
    cursor: pointer;
    font-family: var(--font);
    transition: all .13s;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    -webkit-tap-highlight-color: transparent;
}

    .cat-pill:hover[b-q9kwzjinpb] {
        background: #EAE6E0;
        border-color: #C4BEB6;
        color: #1A1814;
    }

.cat-icon[b-q9kwzjinpb] {
    width: 14px;
    height: 14px;
    opacity: .6;
    flex-shrink: 0;
}

/* Disclaimer */
.disclaimer[b-q9kwzjinpb] {
    text-align: center;
    font-size: .7rem;
    color: #C4BEB6;
    margin-top: .45rem;
    letter-spacing: .01em;
    line-height: 1.5;
}

    .disclaimer a[b-q9kwzjinpb] {
        color: #4AAEF2;
        text-decoration: none;
    }

        .disclaimer a:hover[b-q9kwzjinpb] {
            text-decoration: underline;
        }

@media (max-width: 480px) {
    .chat-layout__bottom[b-q9kwzjinpb] {
        padding: .5rem .65rem max(2.5rem, env(safe-area-inset-bottom));
    }

    .category-pills[b-q9kwzjinpb] {
        gap: .35rem;
        margin-top: .7rem;
    }

    .cat-pill[b-q9kwzjinpb] {
        font-size: .76rem;
        padding: .36rem .7rem;
    }
}
/* _content/Kazzola.AI/Chat/ChatPage.razor.rz.scp.css */
/* ══════════════════════════════════════════════
   Lumina AI – Claude-faithful Design System
   Warm cream palette · Terracotta accent
   ══════════════════════════════════════════════ */




:root[b-l8v1s9wb25] {
    /* Warm neutrals – mirrors Claude's bg */
    --bg: #F0EDE8;
    --bg-input: #FFFFFF;
    --bg-subtle: #F5F1EC;
    --bg-hover: #EDE9E3;
    /* Borders */
    --border: #E5E0D8;
    --border-focus: #C8C2BA;
    /* Text */
    --text-primary: #1A1814;
    --text-secondary: #6B6560;
    --text-muted: #9E9990;
    /* Accent – terracotta / rust (Claude brand) */
    --accent: #CC7C54;
    --accent-light: #F5E8DF;
    /* Status */
    --green: #22C55E;
    /* User bubble */
    --user-bg: #E8EDF5;
    /* Shadows */
    --shadow-card: 0 1px 4px rgba(0,0,0,.05), 0 4px 20px rgba(0,0,0,.05);
    --shadow-input: 0 1px 3px rgba(0,0,0,.05), 0 2px 12px rgba(0,0,0,.05);
    /* Radii */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-card: 16px;
    --r-full: 9999px;
    /* Fonts */
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-serif: Georgia, 'Times New Roman', serif;
    /* Motion */
    --ease: cubic-bezier(.22,1,.36,1);
    --t-fast: 140ms;
    --t-base: 220ms;
}

*[b-l8v1s9wb25], *[b-l8v1s9wb25]::before, *[b-l8v1s9wb25]::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html[b-l8v1s9wb25], body[b-l8v1s9wb25] {
    height: 100%;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[b-l8v1s9wb25]::-webkit-scrollbar {
    width: 4px;
}

[b-l8v1s9wb25]::-webkit-scrollbar-track {
    background: transparent;
}

[b-l8v1s9wb25]::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.12);
    border-radius: 4px;
}

:focus-visible[b-l8v1s9wb25] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Keyframes ── */
@keyframes fadeUp-b-l8v1s9wb25 {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

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

@keyframes fadeIn-b-l8v1s9wb25 {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes blink-b-l8v1s9wb25 {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes spin-b-l8v1s9wb25 {
    to {
        transform: rotate(360deg)
    }
}

@keyframes slideIn-b-l8v1s9wb25 {
    from {
        opacity: 0;
        transform: translateX(-6px)
    }

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

@keyframes pulse-b-l8v1s9wb25 {
    0%,100% {
        opacity: .4;
        transform: scale(.9)
    }

    50% {
        opacity: 1;
        transform: scale(1.1)
    }
}

/* ── Markdown ── */
.md p[b-l8v1s9wb25] {
    margin-bottom: .7em;
}

    .md p:last-child[b-l8v1s9wb25] {
        margin-bottom: 0;
    }

.md ul[b-l8v1s9wb25], .md ol[b-l8v1s9wb25] {
    padding-left: 1.4em;
    margin-bottom: .7em;
}

.md li[b-l8v1s9wb25] {
    margin-bottom: .22em;
}

.md h1[b-l8v1s9wb25], .md h2[b-l8v1s9wb25], .md h3[b-l8v1s9wb25], .md h4[b-l8v1s9wb25] {
    font-family: var(--font-serif);
    font-weight: 500;
    margin: 1em 0 .4em;
    line-height: 1.3;
    color: var(--text-primary);
}

.md h1[b-l8v1s9wb25] {
    font-size: 1.3em
}

.md h2[b-l8v1s9wb25] {
    font-size: 1.15em
}

.md h3[b-l8v1s9wb25] {
    font-size: 1.02em
}

.md code[b-l8v1s9wb25] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: #7A4030;
    border-radius: 4px;
    padding: .1em .35em;
    font-family: var(--font-mono);
    font-size: .85em;
}

.md pre[b-l8v1s9wb25] {
    background: #1E1C1A;
    border-radius: var(--r-lg);
    padding: .9rem 1.1rem;
    overflow-x: auto;
    margin: .7em 0;
}

    .md pre code[b-l8v1s9wb25] {
        background: none;
        border: none;
        color: #E0DBD3;
        padding: 0;
        font-size: .84em;
    }

.md blockquote[b-l8v1s9wb25] {
    border-left: 2.5px solid var(--border-focus);
    padding: .4em .8em;
    margin: .7em 0;
    color: var(--text-secondary);
    font-style: italic;
}

.md table[b-l8v1s9wb25] {
    width: 100%;
    border-collapse: collapse;
    margin: .7em 0;
    font-size: .88em;
}

.md th[b-l8v1s9wb25] {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    padding: .45em .7em;
    text-align: left;
    font-weight: 600;
    font-size: .82em;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.md td[b-l8v1s9wb25] {
    border: 1px solid var(--border);
    padding: .4em .7em;
    color: var(--text-secondary);
}

.md strong[b-l8v1s9wb25] {
    font-weight: 600;
    color: var(--text-primary);
}

.md a[b-l8v1s9wb25] {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.md em[b-l8v1s9wb25] {
    font-style: italic;
    color: var(--text-secondary);
}

.md hr[b-l8v1s9wb25] {
    border: none;
    border-top: 1px solid var(--border);
    margin: .9em 0;
}

/* ══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════ */

/* ── Tablet 769-1024px ── */
@media (min-width: 769px) and (max-width: 1024px) {
    :root[b-l8v1s9wb25] {
        --max-w: 680px;
    }
}

/* ── Large 1280px+ ── */
@media (min-width: 1280px) {
    :root[b-l8v1s9wb25] {
        --page-px: 1.5rem;
        --max-w: 740px;
    }
}

/* ── Mobile: ≤768px ── */
@media (max-width: 768px) {
    :root[b-l8v1s9wb25] {
        --page-px: .85rem;
        --input-px: .75rem;
    }

    html[b-l8v1s9wb25] {
        font-size: 14px;
    }
}

/* ── Small mobile: ≤480px ── */
@media (max-width: 480px) {
    :root[b-l8v1s9wb25] {
        --page-px: .65rem;
        --input-px: .65rem;
    }

    .md pre[b-l8v1s9wb25] {
        padding: .7rem .8rem;
        border-radius: var(--r-md);
    }

    .md table[b-l8v1s9wb25] {
        font-size: .8em;
    }

    .md code[b-l8v1s9wb25] {
        font-size: .8em;
    }
}

/* ── iOS safe area ── */
.input-area[b-l8v1s9wb25] {
    padding-bottom: max(.75rem, env(safe-area-inset-bottom));
}

/* ── Touch devices: always show action buttons ── */
@media (hover: none) {
    .asst-actions[b-l8v1s9wb25] {
        opacity: 1 !important;
    }
}

/* ── Very small phones: hide mic ── */
@media (max-width: 360px) {
    .ci-icon--mic[b-l8v1s9wb25] {
        display: none;
    }

    .topbar-btn span.btn-label[b-l8v1s9wb25] {
        display: none;
    }
}



.chat-page[b-l8v1s9wb25] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--bg);
    overflow: hidden;
}


/* _content/Kazzola.AI/Chat/ConversationView.razor.rz.scp.css */
/* ConversationView owns flex stretch — scroll is inside MessageList */
:host[b-d0yzhqfi9m], .conv-view-host[b-d0yzhqfi9m] {
    display: contents;
}

/* Welcome state — centered full-height */
.conv-welcome[b-d0yzhqfi9m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: calc(100dvh - 200px);
    text-align: center;
    padding: 2rem 1rem;
    animation: fadeUp .4s ease;
    gap: 1.25rem;
}

.welcome-icon svg[b-d0yzhqfi9m] {
    width: 44px; height: 44px;
}

.welcome-heading[b-d0yzhqfi9m] {
    font-family: Georgia, serif;
    font-size: clamp(1.4rem, 4.5vw, 2rem);
    font-weight: 400;
    color: #1A1814;
    letter-spacing: -.025em;
    line-height: 1.2;
    max-width: 480px;
}

@media (max-width: 480px) {
    .welcome-icon svg[b-d0yzhqfi9m] { width: 34px; height: 34px; }
}
/* _content/Kazzola.AI/Chat/Input/AttachmentButton.razor.rz.scp.css */
.attachment-btn[b-a24zq0i8sn] {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--gray-400);
    transition: all var(--duration-fast);
}
.attachment-btn svg[b-a24zq0i8sn] { width: 16px; height: 16px; }
.attachment-btn:hover:not(:disabled)[b-a24zq0i8sn] {
    background: var(--blue-50);
    border-color: var(--blue-100);
    color: var(--blue-600);
}
/* _content/Kazzola.AI/Chat/Input/AttachmentPreview.razor.rz.scp.css */
/* ── Preview row ─────────────────────────────────────────────────────*/
.attachment-preview[b-slbac4ewty] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .5rem 1rem .1rem;
    animation: fadeUp .2s ease;
}

/* ── Chip base ───────────────────────────────────────────────────────*/
.att-chip[b-slbac4ewty] {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-subtle);
    padding: .3rem .5rem .3rem .35rem;
    max-width: 200px;
    transition: border-color var(--t-fast);
}

.att-chip:hover[b-slbac4ewty] { border-color: var(--border-focus); }

/* Image chip — slightly wider to show thumbnail */
.att-chip--image[b-slbac4ewty] { padding: .25rem .5rem .25rem .25rem; }

/* ── Thumbnail (image attachments) ──────────────────────────────────*/
.att-chip__thumb[b-slbac4ewty] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

/* ── File icon (non-image) ───────────────────────────────────────────*/
.att-chip__icon[b-slbac4ewty] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
}

.att-chip__icon svg[b-slbac4ewty] { width: 14px; height: 14px; }

/* ── Info ─────────────────────────────────────────────────────────────*/
.att-chip__info[b-slbac4ewty] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.att-chip__name[b-slbac4ewty] {
    font-size: .76rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.att-chip__size[b-slbac4ewty] {
    font-size: .68rem;
    color: var(--text-muted);
}

/* ── Remove button ───────────────────────────────────────────────────*/
.att-chip__remove[b-slbac4ewty] {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    flex-shrink: 0;
    padding: 0;
    transition: all var(--t-fast);
}

.att-chip__remove svg[b-slbac4ewty] { width: 10px; height: 10px; }

.att-chip__remove:hover[b-slbac4ewty] {
    background: #FEE2E2;
    color: #EF4444;
}
/* _content/Kazzola.AI/Chat/Input/ChatInput.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   ChatInput — Claude-accurate input card
   ══════════════════════════════════════════════════════ */

/* ── Card ── */
.chat-input-card[b-nm185vl4a4] {
    background: #FFFFFF;
    border: 1px solid #E5E0D8;
    border-radius: 18px;
    box-shadow:
        0 1px 3px rgba(0,0,0,.05),
        0 2px 14px rgba(0,0,0,.05);
    transition: border-color .13s, box-shadow .13s;
    overflow: visible;      /* menus float above */
    position: relative;
}

.chat-input-card:focus-within[b-nm185vl4a4] {
    border-color: #C4BEB6;
    box-shadow:
        0 0 0 3px rgba(0,0,0,.04),
        0 2px 14px rgba(0,0,0,.06);
}

.chat-input-card--disabled[b-nm185vl4a4] {
    opacity: .6;
    pointer-events: none;
}

/* ── Row 1: textarea + dot ── */
.ci-ta-row[b-nm185vl4a4] {
    display: flex;
    align-items: flex-start;
    padding: .88rem 1rem .3rem 1rem;
    gap: .5rem;
}

.ci-ta[b-nm185vl4a4] {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    font-family: var(--font);
    font-size: .93rem;
    color: #1A1814;
    line-height: 1.6;
    min-height: 22px;
    max-height: 200px;
    overflow-y: auto;
    field-sizing: content;
}

.ci-ta[b-nm185vl4a4]::placeholder { color: #9E9990; }

/* Green live dot */
.ci-live-dot[b-nm185vl4a4] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C55E;
    flex-shrink: 0;
    margin-top: 7px;
    box-shadow: 0 0 5px rgba(34,197,94,.4);
}

/* ── Row 2: toolbar ── */
.ci-toolbar[b-nm185vl4a4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .22rem .65rem .58rem .65rem;
    gap: .35rem;
}

/* Plus button wrapper — position:relative anchors PlusMenu */
.ci-plus-wrap[b-nm185vl4a4] {
    position: relative;
    flex-shrink: 0;
}

/* Plus button */
.ci-plus[b-nm185vl4a4] {
    width: 28px;
    height: 28px;
    border: 1.5px solid #D1C9BF;
    background: transparent;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6B6560;
    transition: all .13s;
    -webkit-tap-highlight-color: transparent;
}

.ci-plus:hover:not(:disabled)[b-nm185vl4a4],
.ci-plus--open[b-nm185vl4a4] {
    background: #F5F1EC;
    border-color: #C4BEB6;
    color: #1A1814;
}

.ci-plus__icon[b-nm185vl4a4] {
    width: 12px;
    height: 12px;
    transition: transform .15s;
}

.ci-plus--open .ci-plus__icon[b-nm185vl4a4] {
    transform: rotate(45deg);
}

/* Web search pill */
.ci-web-pill[b-nm185vl4a4] {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .18rem .42rem .18rem .32rem;
    background: #F0F4FF;
    border: 1px solid #BFDBFE;
    border-radius: 9999px;
    font-size: .72rem;
    font-weight: 500;
    color: #2563EB;
    flex-shrink: 0;
    animation: fadeIn .14s ease;
}

.ci-web-pill svg[b-nm185vl4a4] { width: 11px; height: 11px; }

.ci-web-pill__x[b-nm185vl4a4] {
    border: none;
    background: transparent;
    color: #2563EB;
    opacity: .55;
    cursor: pointer;
    padding: 0;
    font-size: .8rem;
    line-height: 1;
    transition: opacity .12s;
}
.ci-web-pill__x:hover[b-nm185vl4a4] { opacity: 1; }

/* Right-side tool cluster */
.ci-toolbar-right[b-nm185vl4a4] {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Icon buttons: mic, voice */
.ci-icon-btn[b-nm185vl4a4] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9E9990;
    transition: all .13s;
    -webkit-tap-highlight-color: transparent;
}

.ci-icon-btn svg[b-nm185vl4a4] { width: 17px; height: 17px; }

.ci-icon-btn:hover:not(:disabled)[b-nm185vl4a4] {
    background: #F5F1EC;
    color: #6B6560;
}

/* Send button */
.ci-send[b-nm185vl4a4] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
    -webkit-tap-highlight-color: transparent;
}

.ci-send svg[b-nm185vl4a4] { width: 15px; height: 15px; }

.ci-send--active[b-nm185vl4a4] {
    background: linear-gradient(135deg, #CC7C54, #A05A35);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(160,90,53,.28);
}

.ci-send--active:hover[b-nm185vl4a4] {
    transform: scale(1.07);
    box-shadow: 0 4px 14px rgba(160,90,53,.38);
}

.ci-send--active:active[b-nm185vl4a4] { transform: scale(.96); }

.ci-send--idle[b-nm185vl4a4] {
    background: #F5F1EC;
    color: #C4BEB6;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════ */

/* Prevent iOS input zoom */
@media (max-width: 768px) {
    .ci-ta[b-nm185vl4a4] { font-size: max(.875rem, 16px); }
}

@media (max-width: 480px) {
    .ci-ta-row[b-nm185vl4a4] { padding: .75rem .8rem .25rem; }
    .ci-toolbar[b-nm185vl4a4] { padding: .18rem .55rem .5rem; }
    .ci-ta[b-nm185vl4a4]      { max-height: 120px; }
    .ci-live-dot[b-nm185vl4a4] { margin-top: 5px; }
}

/* Very small: hide mic */
@media (max-width: 360px) {
    .ci-icon-btn--mic[b-nm185vl4a4] { display: none; }
}
/* _content/Kazzola.AI/Chat/Input/ModelSelector.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   ModelSelector — pixel-accurate Claude reference match
   ══════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.ms-wrap[b-yjjc15bjko] {
    position: relative;
    flex-shrink: 0;
}

/* ── Trigger: "Sonnet 5  Medium ▾" ── */
.ms-trigger[b-yjjc15bjko] {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .22rem .42rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font);
    white-space: nowrap;
    transition: background var(--t-fast);
    -webkit-tap-highlight-color: transparent;
}

.ms-trigger:hover:not(:disabled)[b-yjjc15bjko],
.ms-wrap--open .ms-trigger[b-yjjc15bjko] {
    background: var(--bg-hover);
}

.ms-trigger__name[b-yjjc15bjko] {
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -.01em;
}

.ms-trigger__effort[b-yjjc15bjko] {
    font-size: .79rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: -.01em;
}

.ms-trigger__chev[b-yjjc15bjko] {
    width: 9px;
    height: 6px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform var(--t-fast);
}

.ms-wrap--open .ms-trigger__chev[b-yjjc15bjko] {
    transform: rotate(180deg);
}

/* ── Backdrop ── */
.ms-backdrop[b-yjjc15bjko] {
    position: fixed;
    inset: 0;
    z-index: 290;
}

/* ── Dropdown panel ──
   Opens ABOVE the trigger, right-aligned.
   Width 290px matches Claude's reference.              */
.ms-dropdown[b-yjjc15bjko] {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 290px;
    background: #FFFFFF;
    border: 1px solid #E5E0D8;
    border-radius: 14px;
    box-shadow:
        0 2px 4px rgba(0,0,0,.04),
        0 8px 32px rgba(0,0,0,.10),
        0 1px 2px rgba(0,0,0,.04);
    padding: .3rem 0;
    z-index: 300;
    animation: msDropIn-b-yjjc15bjko .16s cubic-bezier(.22,1,.36,1);
    transform-origin: bottom right;
    overflow: hidden;
}

@keyframes msDropIn-b-yjjc15bjko {
    from { opacity: 0; transform: scale(.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);   }
}

/* ── Shared row base ── */
.ms-row[b-yjjc15bjko] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .62rem .9rem;
    cursor: pointer;
    transition: background var(--t-fast);
    gap: .5rem;
    border: none;
    background: transparent;
    text-align: left;
    font-family: var(--font);
}

.ms-row:hover[b-yjjc15bjko] {
    background: #F5F1EC;
}

/* ── Model rows ── */
.ms-row--model[b-yjjc15bjko] {
    flex-direction: row;
    align-items: flex-start;
    padding: .6rem .9rem;
    gap: 0;
}

/* Dimmed if upgrade required but not yet upgraded */
.ms-row--upgrade[b-yjjc15bjko] {
    opacity: 1; /* show full, just disabled for picking */
}

/* Selected row — no background, just the blue tick */
.ms-row--selected[b-yjjc15bjko] {
    background: transparent;
}
.ms-row--selected:hover[b-yjjc15bjko] {
    background: #F5F1EC;
}

/* ── Row body (name + desc column) ── */
.ms-row__body[b-yjjc15bjko] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ms-row__top[b-yjjc15bjko] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.ms-row__name[b-yjjc15bjko] {
    font-size: .875rem;
    font-weight: 500;
    color: #1A1814;
    letter-spacing: -.01em;
    line-height: 1.3;
}

/* "Included until July 7" tag with clock icon */
.ms-row__tag[b-yjjc15bjko] {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    font-size: .72rem;
    font-weight: 400;
    color: #6B6560;
    letter-spacing: 0;
}

.ms-row__tag svg[b-yjjc15bjko] {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: #9E9990;
}

.ms-row__desc[b-yjjc15bjko] {
    font-size: .8rem;
    font-weight: 400;
    color: #6B6560;
    line-height: 1.35;
}

/* ── Upgrade button ── */
.ms-upgrade-btn[b-yjjc15bjko] {
    flex-shrink: 0;
    padding: .26rem .6rem;
    border: 1px solid #D1C9BF;
    background: transparent;
    border-radius: 6px;
    font-family: var(--font);
    font-size: .76rem;
    font-weight: 500;
    color: #1A1814;
    cursor: pointer;
    transition: all var(--t-fast);
    margin-left: .5rem;
    margin-top: 1px;
    white-space: nowrap;
}

.ms-upgrade-btn:hover[b-yjjc15bjko] {
    background: #F5F1EC;
    border-color: #C4BEB6;
}

/* ── Selected check ── */
.ms-check[b-yjjc15bjko] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: auto;
    margin-top: 2px;
}

/* ── Divider ── */
.ms-divider[b-yjjc15bjko] {
    height: 1px;
    background: #E5E0D8;
    margin: .25rem 0;
}

/* ── Action rows (Effort, More models) ── */
.ms-row--action[b-yjjc15bjko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .62rem .9rem;
    cursor: pointer;
}

.ms-row--action:hover[b-yjjc15bjko] {
    background: #F5F1EC;
}

.ms-row__action-label[b-yjjc15bjko] {
    font-size: .875rem;
    font-weight: 400;
    color: #1A1814;
}

.ms-row__action-right[b-yjjc15bjko] {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.ms-effort-val[b-yjjc15bjko] {
    font-size: .82rem;
    font-weight: 400;
    color: #9E9990;
}

.ms-row--action svg[b-yjjc15bjko] {
    width: 7px;
    height: 11px;
    color: #9E9990;
    flex-shrink: 0;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .ms-dropdown[b-yjjc15bjko] {
        width: min(290px, calc(100vw - 2rem));
        right: 0;
        left: auto;
    }
}

/* ── Very small phones ── */
@media (max-width: 360px) {
    .ms-trigger__name[b-yjjc15bjko]   { font-size: .76rem; }
    .ms-trigger__effort[b-yjjc15bjko] { display: none; }
}
/* _content/Kazzola.AI/Chat/Input/PlusMenu.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════
   PlusMenu — pixel-accurate Claude reference match
   Image 2: primary menu + Skills sub-menu
   ══════════════════════════════════════════════════════ */

/* ── Backdrop ── */
.pm-backdrop[b-0mu6x0f7cb] {
    position: fixed;
    inset: 0;
    z-index: 290;
    background: transparent;
}

/* ── Primary menu card ──
   Opens ABOVE the + button, left-aligned.
   Width 300px matches Claude's reference.              */
.pm-menu[b-0mu6x0f7cb] {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 300px;
    background: #FFFFFF;
    border: 1px solid #E5E0D8;
    border-radius: 16px;
    box-shadow:
        0 2px 4px  rgba(0,0,0,.04),
        0 10px 40px rgba(0,0,0,.11),
        0 1px 2px  rgba(0,0,0,.04);
    padding: .35rem 0;
    z-index: 300;
    animation: pmIn-b-0mu6x0f7cb .17s cubic-bezier(.22,1,.36,1);
    transform-origin: bottom left;
    overflow: visible; /* sub-menu floats outside */
}

@keyframes pmIn-b-0mu6x0f7cb {
    from { opacity: 0; transform: scale(.95) translateY(6px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);   }
}

/* ── Shared item base ── */
.pm-item[b-0mu6x0f7cb] {
    position: relative;         /* anchors sub-menu */
    display: flex;
    align-items: center;
    width: 100%;
    padding: .52rem .8rem;
    gap: .65rem;
    border: none;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    font-family: var(--font);
    font-size: .875rem;
    color: #1A1814;
    text-align: left;
    text-decoration: none;
    transition: background var(--t-fast);
    -webkit-tap-highlight-color: transparent;
}

.pm-item:hover[b-0mu6x0f7cb],
.pm-item--active[b-0mu6x0f7cb] {
    background: #F5F1EC;
}

/* ── Item icon — monochrome, 16px box ── */
.pm-item__icon[b-0mu6x0f7cb] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A1814;
}

.pm-item__icon svg[b-0mu6x0f7cb] {
    width: 16px;
    height: 16px;
}

/* ── Item label ── */
.pm-item__label[b-0mu6x0f7cb] {
    flex: 1;
    font-size: .875rem;
    font-weight: 400;
    color: #1A1814;
    letter-spacing: -.01em;
    line-height: 1.4;
}

/* ── Keyboard shortcut badge: "Ctrl+U" ── */
.pm-item__kbd[b-0mu6x0f7cb] {
    font-size: .75rem;
    font-weight: 400;
    color: #9E9990;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── State text (e.g. "Capturing…") ── */
.pm-item__state[b-0mu6x0f7cb] {
    font-size: .75rem;
    color: #9E9990;
    flex-shrink: 0;
}

/* ── Right arrow for sub-menus ── */
.pm-item__arrow[b-0mu6x0f7cb] {
    width: 6px;
    height: 10px;
    color: #9E9990;
    flex-shrink: 0;
    margin-left: auto;
}

.pm-item--has-arrow .pm-item__label[b-0mu6x0f7cb] {
    flex: 1;
}

/* ── Blue checkmark for Web search ── */
.pm-item__check[b-0mu6x0f7cb] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Checked state ── */
.pm-item--checked .pm-item__label[b-0mu6x0f7cb] { color: #1A1814; }

/* ── Divider ── */
.pm-divider[b-0mu6x0f7cb] {
    height: 1px;
    background: #E5E0D8;
    margin: .28rem 0;
}

/* ── Hidden file input overlay ── */
.pm-file-input[b-0mu6x0f7cb] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════
   Sub-menu (Skills)
   Appears to the RIGHT of the Skills row.
   ══════════════════════════════════════════════════════ */
.pm-submenu[b-0mu6x0f7cb] {
    position: absolute;
    top: -4px;
    left: calc(100% + 4px);
    width: 168px;
    background: #FFFFFF;
    border: 1px solid #E5E0D8;
    border-radius: 12px;
    box-shadow:
        0 2px 4px  rgba(0,0,0,.04),
        0 8px 28px rgba(0,0,0,.10);
    padding: .3rem 0;
    z-index: 310;
    animation: pmSubIn-b-0mu6x0f7cb .15s cubic-bezier(.22,1,.36,1);
    transform-origin: top left;
}

@keyframes pmSubIn-b-0mu6x0f7cb {
    from { opacity: 0; transform: scale(.96) translateX(-4px); }
    to   { opacity: 1; transform: scale(1)   translateX(0);    }
}

.pm-sub-item[b-0mu6x0f7cb] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .5rem .75rem;
    gap: .6rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font);
    font-size: .83rem;
    font-weight: 400;
    color: #1A1814;
    text-align: left;
    transition: background var(--t-fast);
    -webkit-tap-highlight-color: transparent;
}

.pm-sub-item:hover[b-0mu6x0f7cb] { background: #F5F1EC; }

.pm-sub-icon[b-0mu6x0f7cb] {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #6B6560;
}

.pm-sub-icon svg[b-0mu6x0f7cb] { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════ */

/* Tablet/mobile: keep menu usable */
@media (max-width: 640px) {
    .pm-menu[b-0mu6x0f7cb] { width: min(300px, calc(100vw - 2rem)); }
    .pm-submenu[b-0mu6x0f7cb] {
        /* On narrow screens, sub-menu goes below the item instead of right */
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        width: auto;
    }
}

/* Mobile: slide up from bottom */
@media (max-width: 480px) {
    .pm-menu[b-0mu6x0f7cb] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        padding-bottom: max(.5rem, env(safe-area-inset-bottom));
        animation: pmSlideUp-b-0mu6x0f7cb .22s cubic-bezier(.22,1,.36,1);
        transform-origin: bottom center;
    }

    @keyframes pmSlideUp-b-0mu6x0f7cb {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .pm-submenu[b-0mu6x0f7cb] {
        position: static;
        border: none;
        border-radius: 0;
        box-shadow: none;
        border-top: 1px solid #E5E0D8;
        animation: none;
        background: #FAF7F4;
        width: 100%;
        padding: .2rem 0 .2rem .5rem;
    }
}
/* _content/Kazzola.AI/Chat/Markdown/MarkdownRenderer.razor.rz.scp.css */
.cursor-blink[b-pr0mckdxeq] {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--text-primary);
    margin-left: 1px;
    animation: blink .9s step-start infinite;
    vertical-align: text-bottom;
    border-radius: 1px;
}
/* _content/Kazzola.AI/Chat/MessageList.razor.rz.scp.css */
.ml-outer[b-42he67wj3n] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    background: #F0EDE8;
}

.ml-inner[b-42he67wj3n] {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.ml-anchor[b-42he67wj3n] {
    height: 1px;
    flex-shrink: 0;
}

.ml-asst-row[b-42he67wj3n] {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    animation: mlFadeUp-b-42he67wj3n .28s ease both;
}

.ml-avatar[b-42he67wj3n] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 14px;
}

.ml-avatar--top[b-42he67wj3n] {
    margin-top: 10px;
}

.ml-asst-card[b-42he67wj3n] {
    flex: 1;
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid #E8E3DC;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 18px rgba(0,0,0,.04);
    overflow: hidden;
}

.ml-asst-card--stream[b-42he67wj3n] {
    border-color: #EAE5DF;
}

.ml-card-header[b-42he67wj3n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .58rem .9rem .5rem;
    background: #FDFCFB;
    border-bottom: 1px solid #F0EDE8;
    gap: .5rem;
    flex-wrap: wrap;
}

.ml-header-left[b-42he67wj3n], .ml-header-right[b-42he67wj3n] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.ml-model-badge[b-42he67wj3n] {
    font-size: .69rem;
    font-weight: 700;
    color: #CC7C54;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ml-duration-pill[b-42he67wj3n] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .69rem;
    color: #9E9990;
    background: #F5F1EC;
    border: 1px solid #E5E0D8;
    border-radius: 5px;
    padding: .05rem .3rem;
    font-variant-numeric: tabular-nums;
}

.ml-status-pill[b-42he67wj3n] {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    font-size: .68rem;
    font-weight: 600;
    border-radius: 20px;
    padding: .12rem .48rem;
    letter-spacing: .02em;
}

.ml-status--success[b-42he67wj3n] {
    background: #DCFCE7;
    color: #15803D;
}

.ml-status--partial[b-42he67wj3n] {
    background: #FEF3C7;
    color: #B45309;
}

.ml-status--error[b-42he67wj3n] {
    background: #FEE2E2;
    color: #DC2626;
}

.ml-timestamp[b-42he67wj3n] {
    font-size: .67rem;
    color: #C4BEB6;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Collapsible Timeline ── */
.ml-tl-section[b-42he67wj3n] {
    border-bottom: 1px solid #c8deeb;
    background: #f2faff;
}

.ml-tl-toggle[b-42he67wj3n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .52rem .9rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    gap: .5rem;
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
}

    .ml-tl-toggle:hover[b-42he67wj3n] {
        background: #F5F1EC;
    }

.ml-tl-toggle-left[b-42he67wj3n] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.ml-tl-toggle-right[b-42he67wj3n] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}

.ml-tl-dots[b-42he67wj3n] {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.ml-tl-dot-mini[b-42he67wj3n] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ml-tl-dot-mini--done[b-42he67wj3n] {
    background: #22C55E;
}

.ml-tl-dot-mini--failed[b-42he67wj3n] {
    background: #EF4444;
}

.ml-tl-dot-mini--running[b-42he67wj3n] {
    background: #3B82F6;
    animation: mlPulse-b-42he67wj3n 1.2s ease-in-out infinite;
}

.ml-tl-dot-mini--pending[b-42he67wj3n] {
    background: #D1C9BF;
}

.ml-tl-summary-label[b-42he67wj3n] {
    font-size: .75rem;
    font-weight: 600;
    color: #6B6560;
    white-space: nowrap;
}

.ml-tl-summary-dur[b-42he67wj3n] {
    font-weight: 400;
    color: #9E9990;
}

.ml-tl-hint[b-42he67wj3n] {
    font-size: .69rem;
    color: #9E9990;
    white-space: nowrap;
}

.ml-tl-chevron[b-42he67wj3n] {
    width: 10px;
    height: 6px;
    color: #C4BEB6;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.ml-tl-chevron--open[b-42he67wj3n] {
    transform: rotate(180deg);
}

.ml-tl-list[b-42he67wj3n] {
    padding: .25rem .9rem .7rem;
    display: flex;
    flex-direction: column;
    animation: mlFadeUp-b-42he67wj3n .18s ease both;
}

.ml-tl-row[b-42he67wj3n] {
    display: flex;
    gap: .55rem;
    align-items: stretch;
}

/* ── Shared Spine ── */
.ml-spine[b-42he67wj3n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 22px;
}

.ml-spine-dot-wrap[b-42he67wj3n] {
    width: 22px;
    height: 22px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ml-spine-dot-wrap--spin[b-42he67wj3n]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #2563EB;
    border-right-color: #93C5FD;
    animation: mlSpin-b-42he67wj3n .75s linear infinite;
}

.ml-spine-dot[b-42he67wj3n] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #E5E0D8;
    background: #FDFCFB;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.ml-spine-dot--done[b-42he67wj3n] {
    background: #DCFCE7;
    border-color: #86EFAC;
    color: #15803D;
}

.ml-spine-dot--failed[b-42he67wj3n] {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: #DC2626;
}

.ml-spine-dot--live-done[b-42he67wj3n] {
    width: 14px;
    height: 14px;
    background: #DCFCE7;
    border-color: #86EFAC;
    color: #15803D;
}

.ml-spine-dot--live-failed[b-42he67wj3n] {
    width: 14px;
    height: 14px;
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: #DC2626;
}

.ml-spine-dot--live-running[b-42he67wj3n] {
    width: 14px;
    height: 14px;
    background: #EFF6FF;
    border-color: #93C5FD;
}

.ml-spine-dot--live-pending[b-42he67wj3n] {
    width: 14px;
    height: 14px;
    background: #FDFCFB;
    border-color: #E5E0D8;
}

.ml-pulse[b-42he67wj3n] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2563EB;
    animation: mlPulse-b-42he67wj3n 1.1s ease-in-out infinite;
}

.ml-pending-dot[b-42he67wj3n] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C4BEB6;
}

.ml-spine-inner[b-42he67wj3n] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C4BEB6;
}

.ml-spine-line[b-42he67wj3n] {
    width: 1.5px;
    flex: 1;
    min-height: 8px;
    margin: 2px 0;
    border-radius: 1px;
}

.ml-spine-line--green[b-42he67wj3n] {
    background: #86EFAC;
}

.ml-spine-line--grey[b-42he67wj3n] {
    background: #E5E0D8;
}

/* ── Committed Step Body ── */
.ml-tl-body[b-42he67wj3n] {
    flex: 1;
    min-width: 0;
    padding: .08rem 0 .65rem .35rem;
}

.ml-tl-meta[b-42he67wj3n] {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .2rem;
    flex-wrap: wrap;
}

.ml-agent[b-42he67wj3n] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.3;
}

.ml-agent--agent[b-42he67wj3n] {
    color: #4A90E2;
}

.ml-agent--tool[b-42he67wj3n] {
    color: #2563EB;
}

.ml-type-badge[b-42he67wj3n] {
    font-size: .62rem;
    font-weight: 500;
    border-radius: 4px;
    padding: .03rem .26rem;
    border: 1px solid;
}

.ml-type-badge--agent[b-42he67wj3n] {
    color: #4A90E2;
    background: #e1e5eb;
    border-color: #4A90E2;
}

.ml-type-badge--tool[b-42he67wj3n] {
    color: #2563EB;
    background: #EFF6FF;
    border-color: #BFDBFE;
}

.ml-step-dur[b-42he67wj3n] {
    font-size: .64rem;
    color: #C4BEB6;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.ml-tl-task[b-42he67wj3n] {
    font-size: .8rem;
    line-height: 1.45;
    color: #6B6560;
    word-break: break-word;
}

.ml-tl-task--done[b-42he67wj3n] {
    color: #9E9990;
}

.ml-tl-task--failed[b-42he67wj3n] {
    color: #DC2626;
}

.ml-tl-task--running[b-42he67wj3n] {
    color: #1E40AF;
    font-weight: 500;
}

.ml-tl-task--pending[b-42he67wj3n] {
    color: #C4BEB6;
}

.ml-tl-content[b-42he67wj3n] {
    margin-top: .3rem;
    font-size: .75rem;
    color: #9E9990;
    background: #F5F1EC;
    border-radius: 6px;
    padding: .32rem .5rem;
    border-left: 2.5px solid #E5E0D8;
    word-break: break-word;
    white-space: pre-wrap;
}

/* ── Answer ── */
.ml-answer[b-42he67wj3n] {
    padding: .75rem 2.5rem .6rem;
    font-size: .9rem;
    line-height: 1.75;
    color: #1A1814;
}

/* ── Actions ── */
.ml-actions[b-42he67wj3n] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: .25rem .6rem .38rem;
    border-top: 1px solid #F5F1EC;
    opacity: 0;
    transition: opacity .14s;
}

.ml-asst-row:hover .ml-actions[b-42he67wj3n],
.ml-asst-row:focus-within .ml-actions[b-42he67wj3n] {
    opacity: 1;
}

@media (hover: none) {
    .ml-actions[b-42he67wj3n] {
        opacity: 1;
    }
}

.ml-act-btn[b-42he67wj3n] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #D1C9BF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    -webkit-tap-highlight-color: transparent;
}

    .ml-act-btn svg[b-42he67wj3n] {
        width: 13px;
        height: 13px;
    }

    .ml-act-btn:hover[b-42he67wj3n] {
        background: #F5F1EC;
        color: #6B6560;
    }

/* ── Live: Planning ── */
.ml-live-planning[b-42he67wj3n] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .2rem;
    margin-top: 6px;
}

.ml-live-ring[b-42he67wj3n] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #CC7C54;
    flex-shrink: 0;
    animation: mlPulseRing-b-42he67wj3n 1.4s ease-out infinite;
}

.ml-live-planning-text[b-42he67wj3n] {
    font-size: .82rem;
    color: #6B6560;
    font-weight: 450;
}

/* ── Live: Thinking Card ── */
.ml-live-card[b-42he67wj3n] {
    flex: 1;
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid #E8E3DC;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 18px rgba(0,0,0,.04);
    overflow: hidden;
    animation: mlFadeUp-b-42he67wj3n .25s ease both;
}

.ml-live-header[b-42he67wj3n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .9rem .48rem;
    background: #FDFCFB;
    border-bottom: 1px solid #F0EDE8;
}

.ml-live-header-left[b-42he67wj3n] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.ml-live-spinner[b-42he67wj3n] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #E5E0D8;
    border-top-color: #CC7C54;
    flex-shrink: 0;
    animation: mlSpin-b-42he67wj3n .7s linear infinite;
}

.ml-live-title[b-42he67wj3n] {
    font-size: .78rem;
    font-weight: 600;
    color: #1A1814;
    letter-spacing: -.01em;
}

.ml-live-count[b-42he67wj3n] {
    font-size: .68rem;
    color: #9E9990;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.ml-live-steps[b-42he67wj3n] {
    padding: .6rem .9rem .65rem;
    display: flex;
    flex-direction: column;
}

.ml-ls-row[b-42he67wj3n] {
    display: flex;
    gap: .55rem;
    align-items: stretch;
    transition: opacity .18s;
}

.ml-ls-row--pending[b-42he67wj3n] {
    opacity: .3;
}

.ml-ls-row--running[b-42he67wj3n] {
    opacity: 1;
}

.ml-ls-row--done[b-42he67wj3n] {
    opacity: .55;
}

.ml-ls-row--failed[b-42he67wj3n] {
    opacity: .75;
}

.ml-ls-body[b-42he67wj3n] {
    flex: 1;
    min-width: 0;
    padding: .06rem 0 .6rem .35rem;
}

.ml-ls-meta[b-42he67wj3n] {
    display: flex;
    align-items: center;
    gap: .28rem;
    margin-bottom: .18rem;
    flex-wrap: wrap;
}

.ml-ls-task[b-42he67wj3n] {
    font-size: .79rem;
    line-height: 1.45;
    word-break: break-word;
}

.ml-ls-task--running[b-42he67wj3n] {
    color: #1E40AF;
    font-weight: 500;
}

.ml-ls-task--done[b-42he67wj3n] {
    color: #9E9990;
    text-decoration: line-through;
    text-decoration-color: #C4BEB6;
}

.ml-ls-task--failed[b-42he67wj3n] {
    color: #DC2626;
}

.ml-ls-task--pending[b-42he67wj3n] {
    color: #C4BEB6;
}

/* ── Error ── */
.ml-error-row[b-42he67wj3n] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .85rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
    color: #DC2626;
    font-size: .82rem;
    animation: mlFadeUp-b-42he67wj3n .2s ease both;
}

/* ── Keyframes ── */
@keyframes mlFadeUp-b-42he67wj3n {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

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

@keyframes mlSpin-b-42he67wj3n {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mlPulse-b-42he67wj3n {
    0%, 100% {
        transform: scale(.82);
        opacity: .6;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

@keyframes mlPulseRing-b-42he67wj3n {
    0% {
        transform: scale(.8);
        opacity: 1;
    }

    70%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ── Responsive ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .ml-inner[b-42he67wj3n] {
        max-width: 680px;
    }
}

@media (min-width: 1280px) {
    .ml-inner[b-42he67wj3n] {
        max-width: 740px;
        padding: 1.75rem 1.5rem 1rem;
    }
}

@media (max-width: 768px) {
    .ml-inner[b-42he67wj3n] {
        padding: 1rem 1rem .75rem;
        gap: .65rem;
    }
}

@media (max-width: 480px) {
    .ml-inner[b-42he67wj3n] {
        padding: .85rem .75rem .6rem;
    }

    .ml-asst-row[b-42he67wj3n] {
        gap: .45rem;
    }

    .ml-avatar[b-42he67wj3n] {
        width: 18px;
        height: 18px;
        margin-top: 12px;
    }

    .ml-card-header[b-42he67wj3n] {
        padding: .48rem .75rem .4rem;
    }

    .ml-tl-toggle[b-42he67wj3n] {
        padding: .46rem .75rem;
    }

    .ml-tl-list[b-42he67wj3n] {
        padding: .2rem .75rem .55rem;
    }

    .ml-live-steps[b-42he67wj3n] {
        padding: .5rem .75rem .55rem;
    }

    .ml-answer[b-42he67wj3n] {
        padding: .65rem 2.5rem .5rem;
        font-size: .875rem;
    }

    .ml-actions[b-42he67wj3n] {
        padding: .2rem .5rem .32rem;
    }

    .ml-tl-task[b-42he67wj3n] {
        font-size: .76rem;
    }

    .ml-ls-task[b-42he67wj3n] {
        font-size: .76rem;
    }

    .ml-timestamp[b-42he67wj3n] {
        display: none;
    }

    .ml-step-dur[b-42he67wj3n] {
        display: none;
    }

    .ml-tl-hint[b-42he67wj3n] {
        display: none;
    }
}

@media (max-width: 360px) {
    .ml-inner[b-42he67wj3n] {
        padding: .7rem .6rem .5rem;
    }

    .ml-model-badge[b-42he67wj3n] {
        display: none;
    }

    .ml-duration-pill[b-42he67wj3n] {
        display: none;
    }
}
/* _content/Kazzola.AI/Chat/StreamingResponse.razor.rz.scp.css */
.stream-row[b-qoedt7qmv6] {
  display: flex;
  gap: .75rem;
  padding: .6rem 0;
  animation: fadeUp .22s ease;
}
.stream-avatar[b-qoedt7qmv6] { width: 28px; height: 28px; flex-shrink: 0; margin-top: 3px; }
.stream-avatar svg[b-qoedt7qmv6] { width: 28px; height: 28px; }
.stream-body[b-qoedt7qmv6] { flex: 1; min-width: 0; }
.stream-content[b-qoedt7qmv6] {
  font-size: .93rem;
  line-height: 1.75;
  color: var(--text-primary);
}

@media (max-width: 480px) {
.stream-row[b-qoedt7qmv6] { gap: .5rem; }
.stream-avatar[b-qoedt7qmv6] { width: 22px; height: 22px; }
.stream-avatar svg[b-qoedt7qmv6] { width: 22px; height: 22px; }
.stream-content[b-qoedt7qmv6] { font-size: .875rem; }
}
/* _content/Kazzola.AI/Chat/ThinkingStatus.razor.rz.scp.css */
.thinking-status[b-zuuj5umef6] {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    animation: slideIn .2s ease;
    opacity: .3;
    transition: opacity .18s;
}
.thinking-status--current[b-zuuj5umef6] { opacity: 1; }
.thinking-status--done[b-zuuj5umef6]    { opacity: .5; }
.thinking-status--failed[b-zuuj5umef6]  { opacity: .7; }

.thinking-status__icon[b-zuuj5umef6] {
    width: 15px; height: 15px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
}
.thinking-status__spinner[b-zuuj5umef6] {
    width: 11px; height: 11px;
    border: 1.5px solid rgba(0,0,0,.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .65s linear infinite;
}
.thinking-status__dot[b-zuuj5umef6] {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
}

/* Body: agent badge + task label */
.thinking-status__body[b-zuuj5umef6] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.thinking-status__agent[b-zuuj5umef6] {
    font-size: .72rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.3;
}
.thinking-status__agent--tool[b-zuuj5umef6] {
    color: var(--text-secondary);
}
.thinking-status__label[b-zuuj5umef6] {
    font-size: .8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
}

/* State modifiers */
.thinking-status--current .thinking-status__label[b-zuuj5umef6] { color: var(--text-primary); font-weight: 500; }
.thinking-status--done .thinking-status__label[b-zuuj5umef6]    { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.2); }
.thinking-status--failed .thinking-status__agent[b-zuuj5umef6]  { color: #DC2626; }
.thinking-status--failed .thinking-status__label[b-zuuj5umef6]  { color: #DC2626; }
/* _content/Kazzola.AI/Chat/ThinkingTimeline.razor.rz.scp.css */
.thinking-timeline[b-7vwx30v03h] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
/* _content/Kazzola.AI/Chat/UserMessage.razor.rz.scp.css */
.user-msg[b-5rwqekc8s0] {
  display: flex;
  justify-content: flex-end;
  padding: .2rem 0;
  animation: fadeUp .25s ease;
}

.user-msg__bubble[b-5rwqekc8s0] {
  max-width: min(72%, 520px);
  background: #E8EDF5;
  border-radius: 18px 18px 4px 18px;
  padding: .72rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.user-msg__text[b-5rwqekc8s0] {
  font-size: .92rem;
  line-height: 1.6;
  color: #1A1814;
  word-break: break-word;
  white-space: pre-wrap;
}

.user-msg__ts[b-5rwqekc8s0] {
  font-size: .67rem;
  color: #9E9990;
  align-self: flex-end;
  letter-spacing: .02em;
}

@media (max-width: 480px) {
  .user-msg__bubble[b-5rwqekc8s0] { max-width: 90%; }
  .user-msg__text[b-5rwqekc8s0]   { font-size: .875rem; }
}
/* _content/Kazzola.AI/ConnectorDetails/Agents/AgentPickerModal.razor.rz.scp.css */
/* AgentPickerModal.razor.css */

/* ── Modal wrapper ── */
.cd-modal-wrap[b-pbkhx5dumt] {
    margin-top: 10px;
    border: 0.5px solid #c1c6d7;
    border-radius: 10px;
    background: #ffffff;
    padding: 1.25rem;
}

/* ── Header ── */
.cd-modal-head[b-pbkhx5dumt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cd-modal-title[b-pbkhx5dumt] {
    font-size: 15px;
    font-weight: 600;
    color: #191c1e;
}

/* ── Search input ── */
.cd-input[b-pbkhx5dumt] {
    width: 100%;
    padding: 8px 11px;
    border: 0.5px solid #c1c6d7;
    border-radius: 7px;
    font-size: 13px;
    font-family: inherit;
    background: #f2f4f6;
    color: #191c1e;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    min-width: 0;
    box-sizing: border-box;
}

    .cd-input:focus[b-pbkhx5dumt] {
        border-color: #185FA5;
        box-shadow: 0 0 0 3px rgba(24, 95, 165, .10);
    }

/* ── Agent option items ── */
.cd-agent-opt[b-pbkhx5dumt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 0.5px solid #dde1eb;
    border-radius: 7px;
    cursor: pointer;
    margin-bottom: 6px;
    outline: none;
    transition: border-color .12s, background .12s;
}

    .cd-agent-opt:last-child[b-pbkhx5dumt] {
        margin-bottom: 0;
    }

    .cd-agent-opt:hover[b-pbkhx5dumt] {
        border-color: #185FA5;
        background: rgba(24, 95, 165, .07);
    }

.cd-agent-opt--sel[b-pbkhx5dumt] {
    border-color: #185FA5;
    background: rgba(24, 95, 165, .07);
}

.cd-agent-opt:focus-visible[b-pbkhx5dumt] {
    outline: 2px solid #185FA5;
    outline-offset: 2px;
}

/* ── Avatar inside option ── */
.cd-avatar[b-pbkhx5dumt] {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
}

.cd-av-blue[b-pbkhx5dumt] {
    background: #E6F1FB;
    color: #0C447C;
}

.cd-av-amber[b-pbkhx5dumt] {
    background: #FAEEDA;
    color: #633806;
}

.cd-av-green[b-pbkhx5dumt] {
    background: #EAF3DE;
    color: #27500A;
}

.cd-av-purple[b-pbkhx5dumt] {
    background: #EEEDFE;
    color: #3C3489;
}

.cd-av-coral[b-pbkhx5dumt] {
    background: #FAECE7;
    color: #712B13;
}

.cd-av-gray[b-pbkhx5dumt] {
    background: #F1EFE8;
    color: #444441;
}

.cd-agent-name[b-pbkhx5dumt] {
    font-size: 13px;
    font-weight: 600;
    color: #191c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-agent-id[b-pbkhx5dumt] {
    font-size: 11px;
    color: #414754;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Close icon button ── */
.cd-icon-btn[b-pbkhx5dumt] {
    background: none;
    border: 0.5px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #414754;
    font-size: 16px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    line-height: 1;
}

    .cd-icon-btn:hover[b-pbkhx5dumt] {
        background: #eceef0;
        border-color: #c1c6d7;
        color: #191c1e;
    }

/* ── Footer ── */
.cd-modal-footer[b-pbkhx5dumt] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 0.5px solid #e6e8ea;
}

/* ── Buttons ── */
.cd-btn[b-pbkhx5dumt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 0.5px solid #c1c6d7;
    background: #ffffff;
    color: #191c1e;
    font-family: inherit;
    transition: background .15s;
    line-height: 1;
}

    .cd-btn:hover:not(:disabled)[b-pbkhx5dumt] {
        background: #f2f4f6;
    }

    .cd-btn:disabled[b-pbkhx5dumt] {
        opacity: .5;
        cursor: not-allowed;
    }

.cd-btn--primary[b-pbkhx5dumt] {
    background: #185FA5;
    color: #ffffff;
    border-color: #185FA5;
}

    .cd-btn--primary:hover:not(:disabled)[b-pbkhx5dumt] {
        background: #0C447C;
        border-color: #0C447C;
    }

@media (prefers-reduced-motion: reduce) {
    .cd-agent-opt[b-pbkhx5dumt],
    .cd-icon-btn[b-pbkhx5dumt],
    .cd-btn[b-pbkhx5dumt],
    .cd-input[b-pbkhx5dumt] {
        transition: none;
    }
}

/* _content/Kazzola.AI/ConnectorDetails/Config/ConfigEmail.razor.rz.scp.css */
/* ConfigEmail.razor.css — matches screenshot exactly */

/* ── Root ────────────────────────────────────────────────────────────────── */

.em-root[b-pzzbrdqpe6] {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: inherit;
}

/* ── Page title (Email connector setup) ──────────────────────────────────── */

.em-section-title[b-pzzbrdqpe6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 20px;
}

.em-section-icon[b-pzzbrdqpe6] {
    font-size: 18px;
    color: #374151;
}

/* ── Group label (CONNECTION METHOD) ─────────────────────────────────────── */

.em-group-label[b-pzzbrdqpe6] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6B7280;
    margin-bottom: 10px;
}

/* ── Connection method cards ─────────────────────────────────────────────── */

.em-method-grid[b-pzzbrdqpe6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

@media (max-width: 520px) {
    .em-method-grid[b-pzzbrdqpe6] {
        grid-template-columns: 1fr;
    }
}

.em-method-card[b-pzzbrdqpe6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: border-color .15s, background .15s;
}

    .em-method-card:hover[b-pzzbrdqpe6] {
        border-color: #93C5FD;
    }

    .em-method-card:focus-visible[b-pzzbrdqpe6] {
        box-shadow: 0 0 0 2px #3B82F6;
    }

/* Selected card — blue background, blue border, blue text — matches screenshot */
.em-method-card--sel[b-pzzbrdqpe6] {
    background: #EFF6FF;
    border-color: #3B82F6;
}

.em-method-icon[b-pzzbrdqpe6] {
    font-size: 22px;
    color: #6B7280;
    margin-bottom: 4px;
    display: block;
}

.em-method-card--sel .em-method-icon[b-pzzbrdqpe6] {
    color: #2563EB;
}

.em-method-name[b-pzzbrdqpe6] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    display: block;
}

.em-method-card--sel .em-method-name[b-pzzbrdqpe6] {
    color: #1D4ED8;
}

.em-method-sub[b-pzzbrdqpe6] {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
    display: block;
}

/* ── Provider pills (Gmail, Microsoft, Yahoo…) ───────────────────────────── */

.em-provider-pills[b-pzzbrdqpe6] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.em-provider-pill[b-pzzbrdqpe6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #FFFFFF;
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    transition: border-color .12s;
}

    .em-provider-pill:hover[b-pzzbrdqpe6] {
        border-color: #9CA3AF;
    }

    .em-provider-pill:focus-visible[b-pzzbrdqpe6] {
        box-shadow: 0 0 0 2px #3B82F6;
    }

/* Selected pill — thick dark border, like screenshot's "Zoho" */
.em-provider-pill--sel[b-pzzbrdqpe6] {
    border: 2px solid #111827;
}

.em-pill-icon[b-pzzbrdqpe6] {
    font-size: 16px;
    color: #6B7280;
}

/* ── Prompt box ──────────────────────────────────────────────────────────── */

.em-prompt-box[b-pzzbrdqpe6] {
    padding: 14px 16px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.6;
}

    .em-prompt-box strong[b-pzzbrdqpe6] {
        font-weight: 600;
        color: #111827;
    }

/* ── Dark mode ───────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    .em-section-title[b-pzzbrdqpe6] {
        color: #F9FAFB;
    }

    .em-method-card[b-pzzbrdqpe6] {
        background: #1F2937;
        border-color: #374151;
    }

    .em-method-card--sel[b-pzzbrdqpe6] {
        background: #1E3A5F;
        border-color: #3B82F6;
    }

    .em-method-name[b-pzzbrdqpe6] {
        color: #F9FAFB;
    }

    .em-method-card--sel .em-method-name[b-pzzbrdqpe6] {
        color: #93C5FD;
    }

    .em-method-card--sel .em-method-icon[b-pzzbrdqpe6] {
        color: #60A5FA;
    }

    .em-provider-pill[b-pzzbrdqpe6] {
        background: #1F2937;
        border-color: #374151;
        color: #F9FAFB;
    }

    .em-provider-pill--sel[b-pzzbrdqpe6] {
        border-color: #F9FAFB;
    }

    .em-prompt-box[b-pzzbrdqpe6] {
        background: #1F2937;
        border-color: #374151;
    }

        .em-prompt-box strong[b-pzzbrdqpe6] {
            color: #F9FAFB;
        }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .em-method-card[b-pzzbrdqpe6],
    .em-provider-pill[b-pzzbrdqpe6] {
        transition: none;
    }
}
/* _content/Kazzola.AI/ConnectorDetails/Config/ConfigTool.razor.rz.scp.css */
/* ConfigTool.razor.css */

/* ── Provider picker grid ────────────────────────────────────────────────── */

.cd-provider-grid[b-2xeapdbx37] {
    display: grid;
    /*  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));*/
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.cd-provider-card[b-2xeapdbx37] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 20px 10px;
    border: 0.5px solid var(--color-border-tertiary, #c1c6d7);
    border-radius: var(--border-radius-md, 8px);
    cursor: pointer;
    text-align: center;
    transition: border-color .12s, background .12s;
    outline: none;
}

    .cd-provider-card:hover[b-2xeapdbx37] {
        border-color: var(--color-border-info, #378ADD);
        background: var(--color-background-info, #E6F1FB);
    }

    .cd-provider-card:focus-visible[b-2xeapdbx37] {
        box-shadow: 0 0 0 2px var(--color-border-info, #378ADD);
    }

.cd-provider-card--sel[b-2xeapdbx37] {
    border-color: var(--color-border-info, #378ADD);
    background: var(--color-background-info, #E6F1FB);
}

.cd-provider-icon[b-2xeapdbx37] {
    font-size: 22px;
    color: var(--color-text-secondary);
    line-height: 1;
}

.cd-provider-card:hover .cd-provider-icon[b-2xeapdbx37],
.cd-provider-card--sel .cd-provider-icon[b-2xeapdbx37] {
    color: var(--color-text-info, #0C447C);
}

.cd-provider-name[b-2xeapdbx37] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    line-height: 1.25;
    word-break: break-word;
}

.cd-provider-card:hover .cd-provider-name[b-2xeapdbx37],
.cd-provider-card--sel .cd-provider-name[b-2xeapdbx37] {
    color: var(--color-text-info, #0C447C);
}

/* ── Provider fields common layout helpers ───────────────────────────────── */
/* These are shared by every ToolFields*.razor child so they live here. */

.cd-tool-fields[b-2xeapdbx37] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .cd-tool-fields .cd-grid2[b-2xeapdbx37] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }

    .cd-tool-fields .cd-grid3[b-2xeapdbx37] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }
/* _content/Kazzola.AI/ConnectorDetails/Config/EmailSmtpPanel.razor.rz.scp.css */
/* EmailSmtpPanel.razor.css — matches screenshot exactly */

/* ── Panel + form stack ───────────────────────────────────────────────────── */

.em-smtp-panel[b-5n809nsgn6] {
    padding: 0;
}

.em-form[b-5n809nsgn6] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Info banner ─────────────────────────────────────────────────────────── */

.em-info-banner[b-5n809nsgn6] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #EBF4FF;
    border: 1px solid #BDD7F8;
    border-radius: 8px;
    margin-bottom: 20px;
}

.em-banner-icon[b-5n809nsgn6] {
    font-size: 16px;
    color: #2563EB;
    flex-shrink: 0;
    margin-top: 1px;
}

.em-info-banner p[b-5n809nsgn6] {
    font-size: 13px;
    color: #1E40AF;
    line-height: 1.55;
    margin: 0;
}

/* ── Section divider row labels (SMTP SERVER, SENDER IDENTITY) ───────────── */

.em-section-row-label[b-5n809nsgn6] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6B7280;
    padding-bottom: 10px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 16px;
}

/* ── Grid layouts ────────────────────────────────────────────────────────── */

/* SMTP SERVER (wide) | PORT (narrow ~200px) */
.em-row-smtp-server[b-5n809nsgn6] {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 14px;
    margin-bottom: 16px;
}

/* Encryption | Auth method — equal halves */
.em-row2[b-5n809nsgn6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

    /* Password | Display name — equal halves */
    .em-row2:last-child[b-5n809nsgn6] {
        margin-bottom: 0;
    }

@media (max-width: 560px) {
    .em-row-smtp-server[b-5n809nsgn6],
    .em-row2[b-5n809nsgn6] {
        grid-template-columns: 1fr;
    }
}

/* ── Field wrapper ───────────────────────────────────────────────────────── */

.em-field[b-5n809nsgn6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Labels — small uppercase dark-gray, matching screenshot exactly ──────── */

.em-label[b-5n809nsgn6] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6B7280;
}

/* ── Sender identity sub-section label ──────────────────────────────────── */

.em-sub-section-label[b-5n809nsgn6] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6B7280;
    padding-bottom: 10px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 16px;
    margin-top: 8px;
}

/* ── Input — full border box, rounded, matching screenshot ───────────────── */

.em-input[b-5n809nsgn6] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #111827;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    line-height: 1.4;
}

    .em-input:focus[b-5n809nsgn6] {
        border-color: #3B82F6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
    }

    .em-input[b-5n809nsgn6]::placeholder {
        color: #9CA3AF;
    }

    /* Remove spin arrows on number input */
    .em-input[type="number"][b-5n809nsgn6]::-webkit-inner-spin-button,
    .em-input[type="number"][b-5n809nsgn6]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

    .em-input[type="number"][b-5n809nsgn6] {
        -moz-appearance: textfield;
    }

/* ── Select — full border box with native dropdown arrow ─────────────────── */

.em-select[b-5n809nsgn6] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 36px 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #111827;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}

    .em-select:focus[b-5n809nsgn6] {
        border-color: #3B82F6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
    }

/* ── Password field + eye button ─────────────────────────────────────────── */

.em-pw-wrap[b-5n809nsgn6] {
    position: relative;
    display: flex;
    align-items: stretch;
}

    .em-pw-wrap .em-input[b-5n809nsgn6] {
        padding-right: 44px;
    }

.em-pw-toggle[b-5n809nsgn6] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #6B7280;
    font-size: 20px;
    line-height: 1;
    border-radius: 0 6px 6px 0;
    transition: color .12s;
    /* visually matches the eye icon box in the screenshot */
    border-left: 1px solid #D1D5DB;
}

    .em-pw-toggle:hover[b-5n809nsgn6] {
        color: #111827;
        background: #F9FAFB;
    }

/* ── Dark mode overrides ─────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    .em-input[b-5n809nsgn6],
    .em-select[b-5n809nsgn6] {
        background: #1F2937;
        border-color: #374151;
        color: #F9FAFB;
    }

        .em-input[b-5n809nsgn6]::placeholder {
            color: #6B7280;
        }

    .em-pw-toggle[b-5n809nsgn6] {
        border-left-color: #374151;
        color: #9CA3AF;
    }

        .em-pw-toggle:hover[b-5n809nsgn6] {
            background: #374151;
            color: #F9FAFB;
        }

    .em-info-banner[b-5n809nsgn6] {
        background: #1E3A5F;
        border-color: #1D4ED8;
    }

        .em-info-banner p[b-5n809nsgn6] {
            color: #BFDBFE;
        }

    .em-banner-icon[b-5n809nsgn6] {
        color: #60A5FA;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .em-input[b-5n809nsgn6],
    .em-select[b-5n809nsgn6],
    .em-pw-toggle[b-5n809nsgn6] {
        transition: none;
    }
}
/* _content/Kazzola.AI/ConnectorDetails/ConnectorDetails.razor.rz.scp.css */
/* ConnectorDetails.razor.css */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
.cd-page[b-pomouyclgz] {
    --cd-primary: #185FA5;
    --cd-primary-10: rgba(24, 95, 165, .10);
    --cd-surface: #f7f9fb;
    --cd-surface-c: #eceef0;
    --cd-surface-cl: #f2f4f6;
    --cd-surface-ch: #e6e8ea;
    --cd-on-surface: #191c1e;
    --cd-on-muted: #414754;
    --cd-border: #c1c6d7;
    --cd-border-dim: #dde1eb;
    --cd-error: #ba1a1a;
    --cd-error-bg: #ffdad6;
    --cd-success: #0F6E56;
    --cd-sp-xs: clamp(4px, .4vw, 6px);
    --cd-sp-sm: clamp(8px, .8vw, 12px);
    --cd-sp-md: clamp(12px, 1.2vw, 16px);
    --cd-sp-lg: clamp(16px, 1.8vw, 22px);
    --cd-sp-xl: clamp(22px, 2.5vw, 32px);
    --cd-sp-xxl: clamp(70px, 2.5vw, 52px);
    --cd-radius: 10px;
    --cd-radius-sm: 7px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    color: var(--cd-on-surface);
    background: var(--cd-surface);
    overflow: auto;
    height: 100vh;
    padding-bottom: var(--cd-sp-xxl)
}

/* ── Inner container ──────────────────────────────────────────────────────── */
.cd-inner[b-pomouyclgz] {
    margin: 0 auto;
    padding: var(--cd-sp-lg) var(--cd-sp-xl);
    display: flex;
    flex-direction: column;
    gap: var(--cd-sp-md);
}

@media (min-width: 640px) {
    .cd-inner[b-pomouyclgz] {
        padding: var(--cd-sp-xl) var(--cd-sp-lg);
    }
}

@media (min-width: 1024px) {
    .cd-inner[b-pomouyclgz] {
        padding: var(--cd-sp-xl);
    }
}



/* ── Card ─────────────────────────────────────────────────────────────────── */
.cd-card[b-pomouyclgz] {
    background: #fff;
    border: 0.5px solid var(--cd-border);
    border-radius: var(--cd-radius);
    padding: clamp(14px, 2.5vw, 22px);
}

.cd-card-head[b-pomouyclgz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--cd-sp-sm);
    border-bottom: 0.5px solid var(--cd-surface-ch);
    margin-bottom: var(--cd-sp-md);
    gap: 8px;
    flex-wrap: wrap;
}

.cd-card-head-left[b-pomouyclgz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cd-card-title[b-pomouyclgz] {
    font-size: 15px;
    font-weight: 600;
    color: var(--cd-on-surface);
}

.cd-icon[b-pomouyclgz] {
    font-size: 18px;
    color: var(--cd-primary);
}

/* ── Grid layouts ─────────────────────────────────────────────────────────── */
.cd-grid2[b-pomouyclgz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cd-sp-md);
}

.cd-grid3[b-pomouyclgz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cd-sp-md);
}

@media (max-width: 640px) {
    .cd-grid2[b-pomouyclgz], .cd-grid3[b-pomouyclgz] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 641px) and (max-width: 860px) {
    .cd-grid3[b-pomouyclgz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Form elements ────────────────────────────────────────────────────────── */
.cd-field[b-pomouyclgz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-label[b-pomouyclgz] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cd-on-muted);
    user-select: none;
}

.cd-input[b-pomouyclgz] {
    width: 100%;
    padding: 8px 11px;
    border: 0.5px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: var(--cd-surface-cl);
    color: var(--cd-on-surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    min-width: 0;
}

    .cd-input:focus[b-pomouyclgz] {
        border-color: var(--cd-primary);
        box-shadow: 0 0 0 3px var(--cd-primary-10);
    }

    .cd-input[readonly][b-pomouyclgz] {
        background: var(--cd-surface-c);
        cursor: default;
        color: var(--cd-on-muted);
    }

.cd-input--sm[b-pomouyclgz] {
    width: auto;
    font-size: 12px;
    padding: 5px 9px;
}

.cd-textarea[b-pomouyclgz] {
    width: 100%;
    padding: 8px 11px;
    border: 0.5px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    font-size: 12px;
    font-family: monospace;
    color: var(--cd-on-surface);
    background: var(--cd-surface-cl);
    outline: none;
    resize: vertical;
    min-height: 72px;
    transition: border-color .15s, box-shadow .15s;
    min-width: 0;
}

    .cd-textarea:focus[b-pomouyclgz] {
        border-color: var(--cd-primary);
        box-shadow: 0 0 0 3px var(--cd-primary-10);
    }

/* Input with inline icon action (copy / visibility) */
.cd-input-row[b-pomouyclgz] {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

    .cd-input-row .cd-input[b-pomouyclgz] {
        padding-right: 36px;
    }

    .cd-input-row .cd-icon-btn[b-pomouyclgz] {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
    }

/* ── Hint text ────────────────────────────────────────────────────────────── */
.cd-hint[b-pomouyclgz] {
    font-size: 11px;
    color: var(--cd-on-muted);
    margin-top: 4px;
    font-style: italic;
    line-height: 1.5;
}

    .cd-hint a[b-pomouyclgz] {
        color: var(--cd-primary);
        text-decoration: none;
    }

        .cd-hint a:hover[b-pomouyclgz] {
            text-decoration: underline;
        }

/* ── Section divider (inside a card) ─────────────────────────────────────── */
.cd-section-divider[b-pomouyclgz] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cd-on-muted);
    border-top: 0.5px solid var(--cd-surface-ch);
    padding-top: 8px;
    margin-top: var(--cd-sp-md);
    margin-bottom: var(--cd-sp-sm);
}

/* ── Toggle switch ────────────────────────────────────────────────────────── */
.cd-toggle-row[b-pomouyclgz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 11px;
    border: 0.5px solid var(--cd-border-dim);
    border-radius: var(--cd-radius-sm);
    background: var(--cd-surface-cl);
    margin-bottom: 6px;
}

    .cd-toggle-row:last-child[b-pomouyclgz] {
        margin-bottom: 0;
    }

.cd-toggle-label[b-pomouyclgz] {
    font-size: 13px;
    font-weight: 600;
    color: var(--cd-on-surface);
}

.cd-toggle-sub[b-pomouyclgz] {
    font-size: 11px;
    color: var(--cd-on-muted);
    margin-top: 2px;
}

.cd-toggle[b-pomouyclgz] {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

    .cd-toggle input[b-pomouyclgz] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.cd-toggle__track[b-pomouyclgz] {
    position: absolute;
    inset: 0;
    background: var(--cd-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s;
}

.cd-toggle input:checked ~ .cd-toggle__track[b-pomouyclgz] {
    background: #1D9E75;
}

.cd-toggle__thumb[b-pomouyclgz] {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    pointer-events: none;
}

.cd-toggle input:checked ~ .cd-toggle__track ~ .cd-toggle__thumb[b-pomouyclgz] {
    transform: translateX(16px);
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.cd-badge[b-pomouyclgz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--cd-surface-c);
    color: var(--cd-on-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.cd-badge--live[b-pomouyclgz] {
    background: #EAF3DE;
    color: #27500A;
}

.cd-badge--error[b-pomouyclgz] {
    background: var(--cd-error-bg);
    color: var(--cd-error);
}

.cd-badge--offline[b-pomouyclgz] {
    background: var(--cd-surface-c);
    color: var(--cd-on-muted);
}

.cd-badge--pending[b-pomouyclgz] {
    background: #FAEEDA;
    color: #633806;
}

.cd-badge--info[b-pomouyclgz] {
    background: #E6F1FB;
    color: #0C447C;
}

.cd-badge-pulse[b-pomouyclgz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: cd-pulse-b-pomouyclgz 1.8s ease-in-out infinite;
}

@keyframes cd-pulse-b-pomouyclgz {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }
}

/* ── Icon buttons ─────────────────────────────────────────────────────────── */
.cd-icon-btn[b-pomouyclgz] {
    background: none;
    border: 0.5px solid transparent;
    border-radius: var(--cd-radius-sm);
    cursor: pointer;
    color: var(--cd-on-muted);
    font-size: 16px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    line-height: 1;
}

    .cd-icon-btn:hover[b-pomouyclgz] {
        background: var(--cd-surface-c);
        border-color: var(--cd-border-dim);
        color: var(--cd-on-surface);
    }

.cd-icon-btn--danger:hover[b-pomouyclgz] {
    color: var(--cd-error);
    border-color: #fca5a5;
    background: var(--cd-error-bg);
}

/* ── Delay control (test panel header) ────────────────────────────────────── */
.cd-delay-control[b-pomouyclgz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Lower two-column grid ────────────────────────────────────────────────── */
.cd-lower-grid[b-pomouyclgz] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--cd-sp-md);
}

@media (max-width: 860px) {
    .cd-lower-grid[b-pomouyclgz] {
        grid-template-columns: 1fr;
    }
}

.cd-col[b-pomouyclgz] {
    display: flex;
    flex-direction: column;
    gap: var(--cd-sp-md);
}

/* ── Agent row ────────────────────────────────────────────────────────────── */
.cd-agent-row[b-pomouyclgz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 0.5px solid var(--cd-border-dim);
    border-radius: var(--cd-radius-sm);
    background: var(--cd-surface-cl);
    margin-bottom: 7px;
    transition: background .12s, border-color .12s;
}

    .cd-agent-row:last-of-type[b-pomouyclgz] {
        margin-bottom: 0;
    }

    .cd-agent-row:hover[b-pomouyclgz] {
        background: var(--cd-surface-c);
        border-color: var(--cd-border);
    }

.cd-avatar[b-pomouyclgz] {
    width: 34px;
    height: 34px;
    border-radius: var(--cd-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Avatar colour variants — one per AgentAvatarAccent */
.cd-av-blue[b-pomouyclgz] {
    background: #E6F1FB;
    color: #0C447C;
}

.cd-av-amber[b-pomouyclgz] {
    background: #FAEEDA;
    color: #633806;
}

.cd-av-green[b-pomouyclgz] {
    background: #EAF3DE;
    color: #27500A;
}

.cd-av-purple[b-pomouyclgz] {
    background: #EEEDFE;
    color: #3C3489;
}

.cd-av-coral[b-pomouyclgz] {
    background: #FAECE7;
    color: #712B13;
}

.cd-av-gray[b-pomouyclgz] {
    background: #F1EFE8;
    color: #444441;
}

.cd-agent-info[b-pomouyclgz] {
    flex: 1;
    min-width: 0;
}

.cd-agent-name[b-pomouyclgz] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-agent-id[b-pomouyclgz] {
    font-size: 11px;
    color: var(--cd-on-muted);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-agent-ping[b-pomouyclgz] {
    font-size: 11px;
    color: #888;
}

.cd-agent-actions[b-pomouyclgz] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Attach agent button ──────────────────────────────────────────────────── */
.cd-attach-btn[b-pomouyclgz] {
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    border: 1px dashed var(--cd-border);
    border-radius: var(--cd-radius-sm);
    background: none;
    color: var(--cd-on-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: border-color .15s, color .15s;
    font-family: inherit;
}

    .cd-attach-btn:hover[b-pomouyclgz] {
        border-color: var(--cd-primary);
        color: var(--cd-primary);
    }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.cd-empty-state[b-pomouyclgz] {
    font-size: 13px;
    color: var(--cd-on-muted);
    padding: 8px 0 4px;
    text-align: center;
}

/* ── Agent picker modal (in-flow, no fixed) ───────────────────────────────── */
.cd-modal-wrap[b-pomouyclgz] {
    margin-top: 10px;
    border: 0.5px solid var(--cd-border);
    border-radius: var(--cd-radius);
    background: #fff;
    padding: 1.25rem;
}

.cd-modal-head[b-pomouyclgz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cd-modal-title[b-pomouyclgz] {
    font-size: 15px;
    font-weight: 600;
}

.cd-modal-footer[b-pomouyclgz] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 0.5px solid var(--cd-border-dim);
}

.cd-agent-opt[b-pomouyclgz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 0.5px solid var(--cd-border-dim);
    border-radius: var(--cd-radius-sm);
    cursor: pointer;
    margin-bottom: 6px;
    transition: all .12s;
    outline: none;
}

    .cd-agent-opt:last-child[b-pomouyclgz] {
        margin-bottom: 0;
    }

    .cd-agent-opt:hover[b-pomouyclgz] {
        border-color: var(--cd-primary);
        background: var(--cd-primary-10);
    }

.cd-agent-opt--sel[b-pomouyclgz] {
    border-color: var(--cd-primary);
    background: var(--cd-primary-10);
}

.cd-agent-opt:focus-visible[b-pomouyclgz] {
    outline: 2px solid var(--cd-primary);
    outline-offset: 2px;
}

/* ── Activity timeline ────────────────────────────────────────────────────── */
.cd-timeline[b-pomouyclgz] {
    position: relative;
    padding-left: 22px;
}

    .cd-timeline[b-pomouyclgz]::before {
        content: '';
        position: absolute;
        left: 7px;
        top: 6px;
        bottom: 6px;
        width: 1px;
        background: var(--cd-surface-ch);
    }

.cd-tl-item[b-pomouyclgz] {
    position: relative;
    margin-bottom: 14px;
}

    .cd-tl-item:last-child[b-pomouyclgz] {
        margin-bottom: 0;
    }

.cd-tl-dot[b-pomouyclgz] {
    position: absolute;
    left: -22px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--cd-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-tl-dot-inner[b-pomouyclgz] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cd-border);
}

.cd-tl-dot--primary[b-pomouyclgz] {
    border-color: #378ADD;
}

    .cd-tl-dot--primary .cd-tl-dot-inner[b-pomouyclgz] {
        background: #378ADD;
    }

.cd-tl-dot--success[b-pomouyclgz] {
    border-color: #1D9E75;
}

    .cd-tl-dot--success .cd-tl-dot-inner[b-pomouyclgz] {
        background: #1D9E75;
    }

.cd-tl-title[b-pomouyclgz] {
    font-size: 13px;
    font-weight: 600;
}

.cd-tl-desc[b-pomouyclgz] {
    font-size: 12px;
    color: var(--cd-on-muted);
    margin-top: 1px;
}

.cd-tl-time[b-pomouyclgz] {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

/* ── Test panel ───────────────────────────────────────────────────────────── */
.cd-test-grid[b-pomouyclgz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}

.cd-test-log[b-pomouyclgz] {
    padding: 10px 12px;
    border-radius: var(--cd-radius-sm);
    background: var(--cd-surface-c);
    border: 0.5px solid var(--cd-border-dim);
    max-height: 160px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 12px;
}

    .cd-test-log[b-pomouyclgz]::-webkit-scrollbar {
        width: 4px;
    }

    .cd-test-log[b-pomouyclgz]::-webkit-scrollbar-track {
        background: transparent;
    }

    .cd-test-log[b-pomouyclgz]::-webkit-scrollbar-thumb {
        background: var(--cd-border);
        border-radius: 4px;
    }

.cd-log-line[b-pomouyclgz] {
    color: var(--cd-on-muted);
    padding: 1px 0;
}

.cd-log-line--ok[b-pomouyclgz] {
    color: #0F6E56;
}

.cd-log-line--warn[b-pomouyclgz] {
    color: #854F0B;
}

.cd-log-line--err[b-pomouyclgz] {
    color: var(--cd-error);
}

/* ── Link ─────────────────────────────────────────────────────────────────── */
.cd-link[b-pomouyclgz] {
    font-size: 12px;
    font-weight: 600;
    color: var(--cd-primary);
    text-decoration: none;
}

    .cd-link:hover[b-pomouyclgz] {
        text-decoration: underline;
    }

/* ── Footer toolbar ───────────────────────────────────────────────────────── */
.cd-footer[b-pomouyclgz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 11px var(--cd-sp-md);
    background: rgba(236, 238, 240, .9);
    border: 0.5px solid var(--cd-border);
    border-radius: var(--cd-radius);
    position: sticky;
    bottom: var(--cd-sp-md);
}

.cd-footer-right[b-pomouyclgz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.cd-btn[b-pomouyclgz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: var(--cd-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 0.5px solid var(--cd-border);
    background: #fff;
    color: var(--cd-on-surface);
    font-family: inherit;
    transition: all .15s;
    line-height: 1;
}

    .cd-btn:hover:not(:disabled)[b-pomouyclgz] {
        background: var(--cd-surface-cl);
    }

    .cd-btn:active[b-pomouyclgz] {
        transform: scale(.98);
    }

    .cd-btn:disabled[b-pomouyclgz] {
        opacity: .55;
        cursor: not-allowed;
    }

.cd-btn--primary[b-pomouyclgz] {
    background: var(--cd-primary);
    color: #fff;
    border-color: var(--cd-primary);
}

    .cd-btn--primary:hover:not(:disabled)[b-pomouyclgz] {
        background: #0C447C;
        border-color: #0C447C;
    }

.cd-btn--outline[b-pomouyclgz] {
    background: #fff;
    border-color: var(--cd-border);
}

    .cd-btn--outline:hover:not(:disabled)[b-pomouyclgz] {
        background: var(--cd-surface-cl);
    }

.cd-btn--danger[b-pomouyclgz] {
    background: none;
    border-color: transparent;
    color: var(--cd-error);
}

    .cd-btn--danger:hover[b-pomouyclgz] {
        background: var(--cd-error-bg);
        border-color: #fca5a5;
    }

.cd-btn--warn-outline[b-pomouyclgz] {
    color: #854F0B;
    border-color: #EF9F27;
    background: transparent;
}

    .cd-btn--warn-outline:hover[b-pomouyclgz] {
        background: #FAEEDA;
    }

.cd-btn--success[b-pomouyclgz] {
    background: var(--cd-success);
    color: #fff;
    border-color: var(--cd-success);
}

/* Spin animation (save / test loading) */
@keyframes cd-spin-b-pomouyclgz {
    to {
        transform: rotate(360deg);
    }
}

.cd-spin[b-pomouyclgz] {
    animation: cd-spin-b-pomouyclgz .7s linear infinite;
    display: inline-block;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cd-badge-pulse[b-pomouyclgz], .cd-spin[b-pomouyclgz] {
        animation: none;
    }

    .cd-btn[b-pomouyclgz], .cd-input[b-pomouyclgz], .cd-textarea[b-pomouyclgz],
    .cd-toggle__track[b-pomouyclgz], .cd-toggle__thumb[b-pomouyclgz],
    .cd-agent-row[b-pomouyclgz], .cd-agent-opt[b-pomouyclgz] {
        transition: none;
    }
}

/* ── Locked connector-type display row ──────────────────────────────────── */

.cd-locked-type-row[b-pomouyclgz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    gap: 10px;
    flex-wrap: wrap;
}

.cd-locked-type-left[b-pomouyclgz] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cd-locked-type-icon[b-pomouyclgz] {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-md);
    background: var(--color-background-info);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .cd-locked-type-icon .material-symbols-outlined[b-pomouyclgz] {
        font-size: 17px;
        color: var(--color-text-info);
    }

.cd-locked-type-name[b-pomouyclgz] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.cd-locked-type-sub[b-pomouyclgz] {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 1px;
}

.cd-locked-type-right[b-pomouyclgz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Locked badge ────────────────────────────────────────────────────────── */

.cd-locked-badge[b-pomouyclgz] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 999px;
    background: #F1EFE8;
    color: #5F5E5A;
    white-space: nowrap;
}

/* ── Change link ─────────────────────────────────────────────────────────── */

.cd-change-link[b-pomouyclgz] {
    font-size: 11px;
    color: var(--color-text-info);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
}

    .cd-change-link:hover[b-pomouyclgz] {
        opacity: .8;
    }

.cd-loading[b-pomouyclgz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
}

.cd-spin[b-pomouyclgz] {
    animation: cd-spin-b-pomouyclgz 1s linear infinite;
}

@keyframes cd-spin-b-pomouyclgz {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* _content/Kazzola.AI/Connectors/ConnectorCard.razor.rz.scp.css */
/* ConnectorCard.razor.css */

/* ── Card shell ──────────────────────────────────────────────────────────── */

.connector-card[b-q9l9kz7dzf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-background-primary, #ffffff);
    border: 0.5px solid var(--color-border-tertiary, #c1c6d7);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .connector-card:hover[b-q9l9kz7dzf] {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
        transform: translateY(-2px);
    }

/* Error state — subtle red ring */
.connector-card--error[b-q9l9kz7dzf] {
    border-color: #fca5a5;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.1);
}

/* ── Card body ───────────────────────────────────────────────────────────── */

.connector-card__body[b-q9l9kz7dzf] {
    padding: 14px 14px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.connector-card__header[b-q9l9kz7dzf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

/* ── Logo ────────────────────────────────────────────────────────────────── */

.connector-card__logo[b-q9l9kz7dzf] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--color-background-secondary, #f2f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    flex-shrink: 0;
    overflow: hidden;
}

    .connector-card__logo img[b-q9l9kz7dzf] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

/* Fallback initial — shown when LogoUrl is empty */
.connector-card__logo-fallback[b-q9l9kz7dzf] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
    background: var(--color-primary, #0059bb);
    border-radius: 4px;
    line-height: 1;
    user-select: none;
}

/* ── Title + subtitle ────────────────────────────────────────────────────── */

.connector-card__title[b-q9l9kz7dzf] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary, #191c1e);
    margin: 0 0 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connector-card__subtitle[b-q9l9kz7dzf] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #414754);
    margin: 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tags ────────────────────────────────────────────────────────────────── */

.connector-card__tags[b-q9l9kz7dzf] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.tag[b-q9l9kz7dzf] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--color-background-secondary, #eceef0);
    border-radius: 5px;
    font-size: 0.6875rem;
    color: var(--color-text-secondary, #414754);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .tag .material-symbols-outlined[b-q9l9kz7dzf] {
        font-size: 12px;
        flex-shrink: 0;
    }

/* ── Card footer ─────────────────────────────────────────────────────────── */

.connector-card__footer[b-q9l9kz7dzf] {
    margin-top: auto;
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    background: var(--color-background-secondary, #f2f4f6);
    border-top: 0.5px solid var(--color-border-tertiary, #c1c6d7);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn[b-q9l9kz7dzf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 5px 10px;
    cursor: pointer;
    border: none;
    line-height: 1;
    transition: background 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn--secondary[b-q9l9kz7dzf] {
    flex: 1;
    background: transparent;
    border: 0.5px solid var(--color-border-tertiary, #c1c6d7);
    color: var(--color-text-primary, #191c1e);
    min-width: 0;
}

    .btn--secondary:hover[b-q9l9kz7dzf] {
        background: var(--color-background-primary, #f7f9fb);
    }

.btn--primary[b-q9l9kz7dzf] {
    flex: 2;
    background: var(--color-primary, #0059bb);
    color: #ffffff;
    min-width: 0;
}

    .btn--primary:hover[b-q9l9kz7dzf] {
        background: var(--color-primary-dark, #004493);
    }

.btn--icon[b-q9l9kz7dzf] {
    width: 28px;
    height: 28px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: 0.5px solid var(--color-border-tertiary, #c1c6d7);
    color: var(--color-text-primary, #191c1e);
    border-radius: 6px;
}

    .btn--icon:hover[b-q9l9kz7dzf] {
        background: var(--color-background-secondary, #f7f9fb);
    }

    .btn--icon .material-symbols-outlined[b-q9l9kz7dzf] {
        font-size: 16px;
    }

.connector-card__footer .btn:active[b-q9l9kz7dzf] {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    .connector-card[b-q9l9kz7dzf],
    .connector-card:hover[b-q9l9kz7dzf] {
        transition: none;
        transform: none;
    }

    .btn[b-q9l9kz7dzf] {
        transition: none;
    }
}
/* _content/Kazzola.AI/Connectors/Connectors.razor.rz.scp.css */
/* ConnectorsDashboard.razor.css */

/* ── CSS custom properties (scoped to the dashboard) ───────────────────────── */
/* These mirror the Tailwind theme tokens so all child components can reference
   the same palette without depending on a global stylesheet. */

.dashboard[b-g6yooqgdq4] {
    --color-primary: #0059bb;
    --color-primary-container: #0070ea;
    --color-on-surface: #191c1e;
    --color-on-surface-variant: #414754;
    --color-surface: #f7f9fb;
    --color-surface-container: #eceef0;
    --color-surface-container-low: #f2f4f6;
    --color-surface-container-high: #e6e8ea;
    --color-outline-variant: #c1c6d7;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-secondary-fixed: #d3e4fe;
    --color-on-primary-fixed-variant: #004493;
    padding: 24px 24px 56px; /* top-nav offset + gutter */
    overflow: auto; /* ← add this */
    height: 100vh; /* ← add this */
    background: var(--color-surface);
}

/* ── Page Header ─────────────────────────────────────────────────────────── */

.dashboard__header[b-g6yooqgdq4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
    margin-top: 16px;
}

@media (min-width: 768px) {
    .dashboard__header[b-g6yooqgdq4] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.dashboard__title[b-g6yooqgdq4] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-on-surface);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}

.dashboard__subtitle[b-g6yooqgdq4] {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin: 4px 0 0;
}

.dashboard__header-actions[b-g6yooqgdq4] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

/* ── Header Buttons ──────────────────────────────────────────────────────── */

.header-btn[b-g6yooqgdq4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    border: none;
    line-height: 1;
}

    .header-btn .material-symbols-outlined[b-g6yooqgdq4] {
        font-size: 18px;
    }

.header-btn--secondary[b-g6yooqgdq4] {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    color: var(--color-on-surface);
}

    .header-btn--secondary:hover[b-g6yooqgdq4] {
        background: var(--color-surface-container-low);
    }

.header-btn--primary[b-g6yooqgdq4] {
    background: var(--color-primary);
    color: #ffffff;
}

    .header-btn--primary:hover[b-g6yooqgdq4] {
        box-shadow: 0 4px 12px rgba(0, 89, 187, 0.25);
    }

/* ── KPI Grid ────────────────────────────────────────────────────────────── */

.kpi-grid[b-g6yooqgdq4] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

@media (min-width: 640px) {
    .kpi-grid[b-g6yooqgdq4] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .kpi-grid[b-g6yooqgdq4] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.kpi-card[b-g6yooqgdq4] {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease;
}

    .kpi-card:hover[b-g6yooqgdq4] {
        border-color: var(--color-primary);
    }

.kpi-card__top[b-g6yooqgdq4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.kpi-card__label[b-g6yooqgdq4] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    margin: 0;
}

.kpi-card__icon[b-g6yooqgdq4] {
    font-size: 20px;
    color: var(--color-primary);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.kpi-card:hover .kpi-card__icon[b-g6yooqgdq4] {
    opacity: 1;
}

.kpi-card__bottom[b-g6yooqgdq4] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.kpi-card__value[b-g6yooqgdq4] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-on-surface);
    margin: 0;
}

/* ── KPI Tags ────────────────────────────────────────────────────────────── */

.kpi-tag[b-g6yooqgdq4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

.kpi-tag--tertiary[b-g6yooqgdq4] {
    background: #fde68a;
    color: #92400e;
}

.kpi-tag--uptime[b-g6yooqgdq4] {
    background: var(--color-secondary-fixed);
    color: var(--color-on-primary-fixed-variant);
}

.kpi-tag__pulse[b-g6yooqgdq4] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: pulse-b-g6yooqgdq4 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.kpi-tag--neutral[b-g6yooqgdq4] {
    background: var(--color-surface-container);
    color: var(--color-on-surface-variant);
}

@keyframes pulse-b-g6yooqgdq4 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ── Filter Bar ──────────────────────────────────────────────────────────── */

.filter-bar[b-g6yooqgdq4] {
    display: flex;
    flex-direction: column; /* ← stack on mobile */
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--color-outline-variant);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.filter-bar__controls[b-g6yooqgdq4] {
    display: flex;
    flex-direction: column; /* ← stack search + selects on mobile */
    gap: 8px;
    width: 100%;
}

/* New wrapper: keeps the two selects side-by-side even on mobile */
.filter-bar__selects[b-g6yooqgdq4] {
    display: flex;
    gap: 8px;
}

    .filter-bar__selects .filter-select[b-g6yooqgdq4] {
        flex: 1;
        min-width: 0; /* ← allows selects to shrink */
    }

/* Bottom row: result count (optional) + view toggle */
.filter-bar__bottom[b-g6yooqgdq4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Search Field */
.search-field[b-g6yooqgdq4] {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-field__icon[b-g6yooqgdq4] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--color-on-surface-variant);
    pointer-events: none;
}

.search-field__input[b-g6yooqgdq4] {
    width: 100%;
    padding: 8px 16px 8px 36px;
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

    .search-field__input:focus[b-g6yooqgdq4] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(0, 89, 187, 0.12);
    }

/* Filter Selects */
.filter-select[b-g6yooqgdq4] {
    padding: 8px 16px;
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    min-width: 150px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

    .filter-select:focus[b-g6yooqgdq4] {
        border-color: var(--color-primary);
    }

/* View Toggle */
.view-toggle[b-g6yooqgdq4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.view-toggle__label[b-g6yooqgdq4] {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}

.view-toggle__btn[b-g6yooqgdq4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: background 0.15s ease;
}

    .view-toggle__btn:hover[b-g6yooqgdq4] {
        background: var(--color-surface-container);
    }

.view-toggle__btn--active[b-g6yooqgdq4] {
    background: #dbeafe;
    color: var(--color-primary);
}

.view-toggle__btn .material-symbols-outlined[b-g6yooqgdq4] {
    font-size: 20px;
}

/* ── Connectors Grid ─────────────────────────────────────────────────────── */

.connectors-grid[b-g6yooqgdq4] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 600px) {
    .filter-bar[b-g6yooqgdq4] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .filter-bar__controls[b-g6yooqgdq4] {
        flex-direction: row;
        flex: 1;
        flex-wrap: nowrap;
        align-items: center;
        min-width: 0;
    }

    .search-field[b-g6yooqgdq4] {
        flex: 1;
        min-width: 0;
    }

    .filter-bar__selects[b-g6yooqgdq4] {
        flex-shrink: 0;
    }

        .filter-bar__selects .filter-select[b-g6yooqgdq4] {
            min-width: 130px;
        }

    .filter-bar__bottom[b-g6yooqgdq4] {
        flex-shrink: 0;
    }
}



@media (min-width: 768px) {
    .connectors-grid[b-g6yooqgdq4] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .connectors-grid[b-g6yooqgdq4] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* List view collapses to a single column at full width */
.connectors-grid--list[b-g6yooqgdq4] {
    grid-template-columns: 1fr !important;
}

/* ── Empty State ─────────────────────────────────────────────────────────── */

.empty-state[b-g6yooqgdq4] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 24px;
    color: var(--color-on-surface-variant);
    text-align: center;
}

.empty-state__icon[b-g6yooqgdq4] {
    font-size: 48px;
    opacity: 0.4;
}

.empty-state__message[b-g6yooqgdq4] {
    font-size: 0.9375rem;
    margin: 0;
}