/*
 * HoganAgent Design System — Base Styles
 * Reset + typography + utility classes
 */

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--ha-font-body);
    font-size: var(--ha-text-base);
    font-weight: var(--ha-weight-normal);
    line-height: var(--ha-leading-normal);
    color: var(--ha-text);
    background: var(--ha-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--ha-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-family: var(--ha-font-display); font-weight: var(--ha-weight-bold); line-height: var(--ha-leading-tight); }
h1 { font-size: var(--ha-text-4xl); }
h2 { font-size: var(--ha-text-3xl); }
h3 { font-size: var(--ha-text-2xl); }
h4 { font-size: var(--ha-text-xl); }
code, pre { font-family: var(--ha-font-code); }
pre { background: var(--ha-bg-tertiary); padding: var(--ha-space-4); border-radius: var(--ha-radius-sm); overflow-x: auto; font-size: var(--ha-text-sm); }
code { background: var(--ha-bg-tertiary); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; }
pre code { background: none; padding: 0; }

/* ===== LAYOUT ===== */
.ha-app {
    display: flex;
    min-height: 100vh;
}

.ha-sidebar {
    width: var(--ha-sidebar-width);
    /* Match the topbar gradient on the very top of the sidebar so the
       brand block reads as one continuous blue band with the topbar.
       Below the brand, fade to the dark navy that carries the nav. */
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    color: var(--ha-sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--ha-z-sidebar);
    transition: width var(--ha-transition-base);
    overflow: hidden;                    /* scroll lives on .ha-sidebar-nav */
    border-right: 1px solid rgba(255,255,255,0.06);
    box-shadow: 4px 0 20px rgba(0,0,0,0.25);
}
.ha-sidebar.collapsed {
    width: var(--ha-sidebar-collapsed);
}
/* Collapsed state: icon-only rail. Text labels + group headings hide,
   items become centered, and a subtle rule separates each group. */
.ha-sidebar.collapsed .ha-sidebar-item-label { display: none; }
.ha-sidebar.collapsed .ha-sidebar-group-header {
    display: none;
}
.ha-sidebar.collapsed .ha-sidebar-group {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ha-sidebar.collapsed .ha-sidebar-group:last-child {
    border-bottom: 0;
}
.ha-sidebar.collapsed .ha-sidebar-group-items {
    max-height: none;
    opacity: 1;
    transform: none;
    padding: 2px 0;
}
.ha-sidebar.collapsed .ha-sidebar-item {
    justify-content: center;
    padding: 12px 0;
    margin: 2px 6px;
    gap: 0;
    transform: none;
}
.ha-sidebar.collapsed .ha-sidebar-item:hover {
    transform: scale(1.05);
}
.ha-sidebar.collapsed .ha-sidebar-item i {
    font-size: 18px;
    width: 22px;
}
.ha-sidebar.collapsed .ha-sidebar-item-accent {
    /* Hide the accent stripe in collapsed mode — the centered-icon pop
       is the active-state signal. */
    display: none;
}
.ha-sidebar.collapsed .ha-sidebar-brand {
    padding: 0;
    justify-content: center;
}
.ha-sidebar.collapsed .ha-sidebar-brand-img {
    width: auto;
    height: 36px;
    max-width: 60%;
    object-position: center;
}
.ha-sidebar.collapsed .ha-sidebar-brand-name,
.ha-sidebar.collapsed .ha-sidebar-brand-icon {
    display: none;
}
.ha-sidebar.collapsed .ha-sidebar-nav {
    padding: 4px 0;
}

.ha-sidebar-brand {
    /* No white box, no border, no padding box — just the logo on top of
       the same brand gradient as the topbar, so visually it's one bar. */
    padding: 0 var(--ha-space-5);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ha-space-3);
    min-height: var(--ha-topbar-height);
    background: var(--ha-brand-gradient-deep, var(--ha-brand-linear));
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.ha-sidebar-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
    pointer-events: none;
    animation: haSidebarShine 8s ease-in-out infinite;
}
@keyframes haSidebarShine {
    0%, 100% { transform: translateX(-100%); }
    50%      { transform: translateX(100%); }
}
.ha-sidebar-brand-icon {
    color: #fff;
    font-size: 1.6em;
    filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.3));
}
.ha-sidebar-brand-name {
    font-family: var(--ha-font-display);
    font-weight: 800;
    font-size: 1.15em;
    color: #fff;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.ha-sidebar-brand-img {
    /* Height-dominated: fill the header vertically, let width auto-scale
       to the logo's natural aspect ratio, capped so it never overflows
       the 300px brand block. Starts at the left edge.
       Rendered AS-IS — no chroma-key filters. Users should upload a
       transparent PNG with their logo already in the color they want
       displayed on the dark blue header (white is recommended). */
    display: block;
    height: 70px;
    width: auto;
    max-width: 92%;
    margin: 3px 0;
    object-fit: contain;
    object-position: left center;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.ha-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;              /* let flex child actually shrink so scroll works */
    padding: var(--ha-space-3) 0 var(--ha-space-5);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}
/* Slim dark scrollbar that vanishes into the sidebar background when
   there's nothing to scroll. */
.ha-sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.ha-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.ha-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}
.ha-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.4);
}
.ha-sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }

.ha-sidebar-group {
    padding: var(--ha-space-2) 0 2px;
}
.ha-sidebar-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ha-space-2) var(--ha-space-5);
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    margin: 0 var(--ha-space-3);
    transition: background 0.18s ease, color 0.18s ease;
}
.ha-sidebar-group-header:hover {
    background: rgba(59, 130, 246, 0.08);
}
.ha-sidebar-group-header:hover .ha-sidebar-group-title { color: rgba(255, 255, 255, 0.7); }
.ha-sidebar-group-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.38);
    white-space: nowrap;
    transition: color 0.18s ease;
}
.ha-sidebar-group-chevron {
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    transform: rotate(-90deg);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.ha-sidebar-group.open .ha-sidebar-group-chevron { transform: rotate(0deg); }
.ha-sidebar-group-items {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        max-height 0.36s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.28s ease;
    padding: 0;
}
.ha-sidebar-group.open .ha-sidebar-group-items {
    max-height: 520px;
    opacity: 1;
    transform: translateY(0);
    padding: 4px 0 8px;
}
.ha-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 18px;
    color: rgba(255, 255, 255, 0.72);
    transition: background 0.25s ease, color 0.18s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    cursor: pointer;
    font-size: var(--ha-text-sm);
    font-weight: 500;
    position: relative;
    margin: 2px var(--ha-space-3);
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
}
/* Glow sweep on hover — a subtle diagonal highlight slides left-to-right */
.ha-sidebar-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(59, 130, 246, 0.14) 45%, rgba(139, 92, 246, 0.08) 55%, transparent 100%);
    transform: translateX(-120%);
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    z-index: -1;
}
.ha-sidebar-item:hover::before { transform: translateX(0); }
.ha-sidebar-item-accent {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 22px;
    background: var(--ha-brand-linear);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 14px var(--ha-brand);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ha-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.055);
    color: #fff;
    text-decoration: none;
    transform: translateX(3px);
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.12);
}
.ha-sidebar-item:hover i {
    transform: scale(1.12);
    color: var(--ha-brand);
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.5));
}
.ha-sidebar-item:hover .ha-sidebar-item-accent { transform: translateY(-50%) scaleY(0.6); opacity: 0.65; }
.ha-sidebar-item.active {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.32) 0%, rgba(59, 130, 246, 0.06) 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 12px rgba(59, 130, 246, 0.18);
}
.ha-sidebar-item.active i {
    color: var(--ha-brand);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.7));
}
.ha-sidebar-item.active .ha-sidebar-item-accent {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
}
.ha-sidebar-item i {
    width: 18px;
    text-align: center;
    font-size: 0.98em;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s, filter 0.2s;
    flex-shrink: 0;
}
.ha-sidebar-item-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Legacy flag — kept as no-op so old markup doesn't break, but no
   longer styles the item differently. Active state alone highlights. */
.ha-sidebar-item-primary { }

.ha-main {
    flex: 1;
    margin-left: var(--ha-sidebar-width);
    transition: margin-left var(--ha-transition-base);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    min-width: 0;
}
.ha-sidebar.collapsed ~ .ha-main { margin-left: var(--ha-sidebar-collapsed); }

.ha-topbar {
    height: var(--ha-topbar-height);
    background: var(--ha-brand-gradient-deep);
    border-bottom: 1px solid var(--ha-brand-accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ha-space-6);
    position: sticky;
    top: 0;
    z-index: var(--ha-z-topbar);
    color: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.15);
}
.ha-topbar h1, .ha-topbar h2, .ha-topbar h3, .ha-topbar h4, .ha-topbar #page-title {
    color: #fff;
}
.ha-topbar-left { display: flex; align-items: center; gap: var(--ha-space-4); color: #fff; }
.ha-topbar-right { display: flex; align-items: center; gap: var(--ha-space-3); }
.ha-topbar-right .ha-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
}
.ha-topbar-right .ha-btn:hover { background: rgba(255,255,255,0.2); }
.ha-topbar-left .ha-btn,
.ha-topbar-right .ha-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 10px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Right-side icons (bell, theme, logout) stay compact. */
.ha-topbar-right .ha-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
}
/* Left-side menu button is the primary navigation control — 50% larger
   so it's easy to hit and visually anchors the header. */
.ha-topbar-left .ha-btn {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    font-size: 22px;
}
.ha-topbar-left .ha-btn:hover,
.ha-topbar-right .ha-btn:hover { background: rgba(255,255,255,0.22); }
.ha-topbar h4#page-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.ha-content {
    flex: 1;
    padding: var(--ha-space-6);
    max-width: var(--ha-max-content);
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ===== BUTTONS ===== */
.ha-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ha-space-2);
    padding: var(--ha-space-2) var(--ha-space-4);
    font-size: var(--ha-text-sm);
    font-weight: var(--ha-weight-medium);
    border-radius: var(--ha-radius-sm);
    border: 1px solid transparent;
    transition: all var(--ha-transition-fast);
    white-space: nowrap;
    cursor: pointer;
}
.ha-btn-primary {
    background: var(--ha-brand-gradient);
    background-size: 100% 180%;
    background-position: 0% 0%;
    color: var(--ha-white);
    border: none;
    box-shadow: 0 4px 10px -2px rgba(37, 99, 235, 0.35), 0 1px 2px rgba(0,0,0,0.08);
    transition: background-position 0.3s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.ha-btn-primary:hover {
    background-position: 0% 100%;
    text-decoration: none;
    box-shadow: 0 6px 14px -2px rgba(37, 99, 235, 0.5), 0 2px 4px rgba(0,0,0,0.1);
}
.ha-btn-primary:active { transform: translateY(1px); }
.ha-btn-secondary { background: transparent; border-color: var(--ha-border); color: var(--ha-text); }
.ha-btn-secondary:hover { background: var(--ha-bg-secondary); text-decoration: none; }
.ha-btn-danger { background: var(--ha-danger); color: var(--ha-white); }
.ha-btn-danger:hover { background: #dc2626; text-decoration: none; }
.ha-btn-sm { padding: var(--ha-space-1) var(--ha-space-3); font-size: var(--ha-text-xs); }
.ha-btn-lg { padding: var(--ha-space-3) var(--ha-space-6); font-size: var(--ha-text-base); }

/* ===== CARDS ===== */
.ha-card {
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-md);
    padding: var(--ha-space-5);
    box-shadow: var(--ha-shadow-sm);
    overflow: hidden;
}
.ha-card-header { margin-bottom: var(--ha-space-4); }
.ha-card-title { font-size: var(--ha-text-lg); font-weight: var(--ha-weight-semibold); }

/* ===== FORMS ===== */
.ha-input {
    width: 100%;
    padding: var(--ha-space-2) var(--ha-space-3);
    font-size: var(--ha-text-sm);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-sm);
    background: var(--ha-bg);
    color: var(--ha-text);
    transition: border-color var(--ha-transition-fast);
}
.ha-input:focus { outline: none; border-color: var(--ha-primary); box-shadow: 0 0 0 3px var(--ha-primary-light); }
.ha-label { display: block; font-size: var(--ha-text-sm); font-weight: var(--ha-weight-medium); margin-bottom: var(--ha-space-1); color: var(--ha-text-secondary); }
.ha-form-group { margin-bottom: var(--ha-space-4); }

/* ===== BADGES ===== */
.ha-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.6em;
    font-size: var(--ha-text-xs);
    font-weight: var(--ha-weight-medium);
    border-radius: var(--ha-radius-full);
}
.ha-badge-success { background: var(--ha-success-light); color: #065f46; }
.ha-badge-warning { background: var(--ha-warning-light); color: #92400e; }
.ha-badge-danger { background: var(--ha-danger-light); color: #991b1b; }
.ha-badge-info { background: var(--ha-info-light); color: #1e40af; }
.ha-badge-neutral { background: var(--ha-gray-100); color: var(--ha-gray-700); }

/* ===== TOASTS ===== */
.ha-toast-container { position: fixed; top: var(--ha-space-4); right: var(--ha-space-4); z-index: var(--ha-z-toast); display: flex; flex-direction: column; gap: var(--ha-space-2); }
.ha-toast {
    padding: var(--ha-space-3) var(--ha-space-4);
    border-radius: var(--ha-radius-sm);
    background: var(--ha-bg-elevated);
    border: 1px solid var(--ha-border);
    box-shadow: var(--ha-shadow-lg);
    font-size: var(--ha-text-sm);
    animation: ha-slideIn 0.25s ease;
    max-width: 400px;
}

/* ===== MODALS ===== */
.ha-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
    z-index: var(--ha-z-modal);
    display: flex; align-items: center; justify-content: center;
    animation: ha-overlayIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ha-modal-overlay.closing {
    animation: ha-overlayOut 0.25s cubic-bezier(0.55, 0, 0.68, 0.19) forwards;
}
.ha-modal-overlay.closing .ha-modal {
    animation: ha-modalOut 0.25s cubic-bezier(0.55, 0, 0.68, 0.19) forwards;
}
.ha-modal {
    background: var(--ha-surface);
    border-radius: var(--ha-radius-lg);
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.05);
    width: 90%; max-width: 560px;
    max-height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: ha-modalIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    /* Smooth size transitions when content (tab panels) changes height */
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ha-modal-header {
    padding: var(--ha-space-4) var(--ha-space-5);
    background: var(--ha-brand-gradient-deep);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ha-brand-accent);
    box-shadow: 0 1px 0 rgba(96, 165, 250, 0.35);
}
.ha-modal-header h4 { color: #fff; font-size: var(--ha-text-lg); font-weight: var(--ha-weight-semibold); display: flex; align-items: center; gap: var(--ha-space-3); }
.ha-modal-header .ha-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    transition: background 0.15s ease;
}
.ha-modal-header .ha-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }
.ha-modal-body {
    padding: var(--ha-space-5);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    background: #eef2f7;
}
.ha-modal-footer {
    padding: var(--ha-space-4) var(--ha-space-5);
    border-top: 1px solid var(--ha-border);
    background: var(--ha-surface);
    display: flex;
    justify-content: flex-end;
    gap: var(--ha-space-2);
    flex-shrink: 0;
}
/* Smooth tab-panel height transitions inside the modal */
.ha-tab-panel {
    transition: opacity 0.25s ease;
}
.ha-tab-panel.switching {
    opacity: 0;
}

/* ===== TABLES ===== */
.ha-table { width: 100%; border-collapse: collapse; font-size: var(--ha-text-sm); }
.ha-table th { text-align: left; padding: var(--ha-space-3) var(--ha-space-4); background: #e4e7ec; border-bottom: 1px solid #d0d5dd; font-weight: var(--ha-weight-semibold); color: #667085; font-size: var(--ha-text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.ha-table td { padding: var(--ha-space-3) var(--ha-space-4); border-bottom: 1px solid var(--ha-border-light); }
.ha-table tr:hover td { background: var(--ha-surface-hover); }

/* ===== LOADING ===== */
.ha-skeleton { background: linear-gradient(90deg, var(--ha-bg-tertiary) 25%, var(--ha-bg-secondary) 50%, var(--ha-bg-tertiary) 75%); background-size: 200% 100%; animation: ha-shimmer 1.5s infinite; border-radius: var(--ha-radius-sm); }

/* ===== ANIMATIONS ===== */
@keyframes ha-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ha-scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes ha-overlayIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(2px); } }
@keyframes ha-overlayOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes ha-modalIn {
    0%   { opacity: 0; transform: scale(0.85) translateY(20px); }
    60%  { opacity: 1; transform: scale(1.02) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ha-modalOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.9) translateY(10px); }
}
@keyframes ha-slideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes ha-slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ha-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes ha-spin { to { transform: rotate(360deg); } }
.ha-spinner { width: 20px; height: 20px; border: 2px solid var(--ha-border); border-top-color: var(--ha-primary); border-radius: 50%; animation: ha-spin 0.6s linear infinite; }

/* ===== STATS BAR ===== */
.ha-stats-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--ha-space-3);
    margin-bottom: var(--ha-space-4);
}
.ha-stat-card {
    /* Unified deep-navy base. Tone variants layer a thin top accent
       strip and a tinted radial glow instead of replacing the whole
       background — so every stat bar across the app reads harmonious
       with the dashboard KPIs and the sidebar/topbar brand palette. */
    background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%);
    border-radius: var(--ha-radius-lg, 12px);
    padding: var(--ha-space-4);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--ha-space-2);
    min-width: 0;
    min-height: 96px;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.ha-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ha-stat-card::after {
    /* Soft radial glow — default is brand blue; tone variants override */
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.22) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
/* Stat cards also drop the top accent strip — keep them uniform. */
.ha-stat-card .ha-stat-value { font-size: var(--ha-text-3xl, 1.875rem); font-weight: var(--ha-weight-bold); color: #fff; line-height: 1; position: relative; }
.ha-stat-card .ha-stat-label { font-size: var(--ha-text-xs); color: rgba(255,255,255,0.78); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--ha-weight-medium); position: relative; }

/* Tone variants intentionally left as no-ops — every stat card is
   uniform navy. Semantic meaning comes from the label text. */

/* View mode toggle */
.ha-view-toggle { display: inline-flex; border: 1px solid var(--ha-border); border-radius: var(--ha-radius-md); overflow: hidden; }
.ha-view-btn { background: var(--ha-surface); border: none; padding: var(--ha-space-2) var(--ha-space-3); cursor: pointer; color: var(--ha-text-secondary); font-size: var(--ha-text-sm); transition: background 0.15s ease, color 0.15s ease; }
.ha-view-btn:hover { background: var(--ha-bg-secondary); }
.ha-view-btn.active { background: var(--ha-primary); color: #fff; }
.ha-view-btn + .ha-view-btn { border-left: 1px solid var(--ha-border); }

/* ===== CONTACT GRID (mirrors company grid) ===== */
.ha-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ha-space-4);
}
.ha-contact-card {
    background: var(--ha-surface);
    border-radius: var(--ha-radius-lg, 12px);
    padding: var(--ha-space-4);
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
    border: 1px solid var(--ha-border);
    border-top: 4px solid var(--ha-primary);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: var(--ha-space-3);
    min-width: 0;
}
.ha-contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(17, 24, 39, 0.12), 0 4px 8px rgba(17, 24, 39, 0.06);
}
.ha-contact-card-header { display: flex; align-items: center; gap: var(--ha-space-3); min-width: 0; }
.ha-contact-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--ha-brand-gradient-deep);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: var(--ha-weight-bold); font-size: var(--ha-text-base);
    flex-shrink: 0; overflow: hidden;
}
.ha-contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ha-contact-card-title { flex: 1; min-width: 0; }
.ha-contact-card-title h4 { font-size: var(--ha-text-base); font-weight: var(--ha-weight-semibold); color: var(--ha-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-contact-card-sub { font-size: var(--ha-text-xs); color: var(--ha-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-contact-card-body { display: flex; flex-direction: column; gap: var(--ha-space-2); font-size: var(--ha-text-xs); color: var(--ha-text-secondary); }
.ha-contact-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--ha-space-3); border-top: 1px solid var(--ha-border-light); font-size: var(--ha-text-xs); color: var(--ha-text-tertiary); }
.ha-pill-mini { font-size: 10px; padding: 2px 8px; border-radius: var(--ha-radius-full); background: var(--ha-bg-tertiary); color: var(--ha-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--ha-weight-semibold); }
.ha-link { color: var(--ha-primary); text-decoration: none; font-weight: var(--ha-weight-medium); }
.ha-link:hover { text-decoration: underline; }

/* ===== COMPANY GRID ===== */
.ha-company-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ha-space-4);
}
.ha-company-card {
    background: var(--ha-surface);
    border-radius: var(--ha-radius-lg, 12px);
    padding: var(--ha-space-4);
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
    border: 1px solid var(--ha-border);
    border-top: 4px solid var(--ha-primary);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: var(--ha-space-3);
    min-width: 0;
}
.ha-company-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(17, 24, 39, 0.12), 0 4px 8px rgba(17, 24, 39, 0.06);
}
.ha-company-card-header { display: flex; align-items: center; gap: var(--ha-space-3); min-width: 0; }
.ha-company-logo { width: 48px; height: 48px; border-radius: var(--ha-radius-md); background: var(--ha-bg-secondary); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-weight: var(--ha-weight-bold); color: white; font-size: var(--ha-text-lg); }
.ha-company-logo img { width: 100%; height: 100%; object-fit: contain; }
.ha-company-card-title { flex: 1; min-width: 0; }
.ha-company-card-title h4 { font-size: var(--ha-text-base); font-weight: var(--ha-weight-semibold); color: var(--ha-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-company-card-title .ha-company-card-sub { font-size: var(--ha-text-xs); color: var(--ha-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-company-card-meta { display: flex; flex-wrap: wrap; gap: var(--ha-space-2); font-size: var(--ha-text-xs); color: var(--ha-text-secondary); }
.ha-company-card-body { display: flex; flex-direction: column; gap: var(--ha-space-2); font-size: var(--ha-text-xs); color: var(--ha-text-secondary); }
.ha-company-card-row { display: flex; align-items: center; gap: var(--ha-space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-company-card-row i { width: 14px; color: var(--ha-text-tertiary); flex-shrink: 0; }
.ha-company-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--ha-space-3); border-top: 1px solid var(--ha-border-light); font-size: var(--ha-text-xs); color: var(--ha-text-tertiary); }
.ha-health-score-pill {
    flex-shrink: 0;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ha-text-sm);
    font-weight: var(--ha-weight-bold);
    color: #fff;
    background: var(--ha-gray-400, #9ca3af);
}
.ha-health-score-pill.ha-health-healthy  { background: var(--ha-success); }
.ha-health-score-pill.ha-health-attention { background: var(--ha-warning); }
.ha-health-score-pill.ha-health-at_risk   { background: #f97316; }
.ha-health-score-pill.ha-health-critical  { background: var(--ha-danger); }
.ha-health-score-pill.ha-health-unset     { background: var(--ha-gray-400, #9ca3af); }
.ha-health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--ha-space-1); vertical-align: middle; }
.ha-health-healthy { background: var(--ha-success); }
.ha-health-attention { background: var(--ha-warning); }
.ha-health-at_risk { background: #f97316; }
.ha-health-critical { background: var(--ha-danger); }
.ha-health-unset { background: var(--ha-gray-400, #9ca3af); }

/* ===== TABBED LIGHTBOX ===== */
.ha-modal.ha-modal-wide { max-width: 900px; }
.ha-modal-body.ha-tab-body { padding: 0; }
.ha-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--ha-border);
    background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
    flex-shrink: 0;
    padding: 0 var(--ha-space-2);
}
.ha-tab-nav::-webkit-scrollbar { display: none; }
.ha-tab-btn {
    padding: var(--ha-space-3) var(--ha-space-4);
    background: none;
    border: none;
    font-size: var(--ha-text-sm);
    font-weight: var(--ha-weight-medium);
    color: var(--ha-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.ha-tab-btn:hover { color: var(--ha-text-primary); }
.ha-tab-btn.active { color: var(--ha-primary); border-bottom-color: var(--ha-primary); }
.ha-tab-panel { padding: var(--ha-space-5); min-height: 320px; }

/* Detail tab sections — bordered cards with gradient headers for contrast */
.ha-detail-section {
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-lg, 12px);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
    margin-bottom: var(--ha-space-4);
    overflow: hidden;
}
.ha-detail-section h5 {
    display: flex;
    align-items: center;
    gap: var(--ha-space-2);
    font-size: var(--ha-text-xs);
    font-weight: var(--ha-weight-semibold);
    color: #667085;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--ha-space-3) var(--ha-space-4);
    background: #e4e7ec;
    border-bottom: 1px solid #d0d5dd;
    box-shadow: none;
    margin: 0;
}
.ha-detail-section h5 i { font-size: var(--ha-text-sm); opacity: 0.7; color: #667085; }
.ha-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--ha-space-3) var(--ha-space-5);
    padding: var(--ha-space-4);
}
.ha-detail-section > .ha-detail-row,
.ha-detail-section > small,
.ha-detail-section > .ha-health-bar { padding-left: var(--ha-space-4); padding-right: var(--ha-space-4); }
.ha-detail-section > small { display: block; padding-bottom: var(--ha-space-3); }
.ha-detail-section > .ha-detail-row:last-child { padding-bottom: var(--ha-space-4); }
.ha-detail-section > .ha-health-bar { margin-top: 0; margin-bottom: var(--ha-space-4); }
.ha-detail-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ha-detail-row .label { font-size: 10px; color: var(--ha-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--ha-weight-semibold); }
.ha-detail-row .value { font-size: var(--ha-text-sm); color: var(--ha-text-primary); word-break: break-word; font-weight: var(--ha-weight-medium); }
.ha-detail-row .value.muted { color: var(--ha-text-tertiary); font-style: italic; font-weight: var(--ha-weight-normal); }

.ha-health-bar { height: 8px; border-radius: var(--ha-radius-full); background: var(--ha-bg-tertiary); overflow: hidden; margin-top: var(--ha-space-2); }
.ha-health-bar-fill { height: 100%; border-radius: var(--ha-radius-full); transition: width 0.3s ease; }

/* ===== FORM SECTIONS (grouped form fields inside lightboxes) ===== */
.ha-form-section {
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-lg, 12px);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
    margin-bottom: var(--ha-space-4);
    overflow: hidden;
}
.ha-form-section > h5 {
    display: flex;
    align-items: center;
    gap: var(--ha-space-2);
    font-size: var(--ha-text-xs);
    font-weight: var(--ha-weight-semibold);
    color: #667085;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--ha-space-3) var(--ha-space-4);
    background: #e4e7ec;
    border-bottom: 1px solid #d0d5dd;
    box-shadow: none;
    margin: 0;
}
.ha-form-section > h5 i { font-size: var(--ha-text-sm); opacity: 0.7; color: #667085; }
.ha-form-section-body {
    padding: var(--ha-space-4) var(--ha-space-4) var(--ha-space-2);
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40%);
}
.ha-form-section-body .ha-form-group:last-child { margin-bottom: var(--ha-space-2); }
.ha-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ha-space-4); }
@media (max-width: 640px) {
    .ha-form-row-2 { grid-template-columns: 1fr; }
}

/* Contact groupings inside company lightbox Contacts tab — split layout */
.ha-contact-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ha-space-4);
    padding-bottom: var(--ha-space-3);
    border-bottom: 1px solid var(--ha-border-light);
}
.ha-contact-toolbar-label { color: var(--ha-text-secondary); font-size: var(--ha-text-sm); font-weight: var(--ha-weight-medium); }
.ha-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ha-space-4);
    align-items: start;
}
.ha-contact-col { display: flex; flex-direction: column; gap: var(--ha-space-3); min-width: 0; }
.ha-contact-panel {
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-lg, 12px);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ha-contact-panel-header {
    display: flex;
    align-items: center;
    gap: var(--ha-space-2);
    padding: var(--ha-space-3) var(--ha-space-4);
    background: linear-gradient(135deg, var(--panel-accent, #1f2937), color-mix(in srgb, var(--panel-accent, #1f2937) 60%, #0f172a));
    color: #fff;
    font-size: var(--ha-text-sm);
    font-weight: var(--ha-weight-semibold);
    letter-spacing: 0.02em;
}
.ha-contact-panel-header i { font-size: var(--ha-text-sm); opacity: 0.9; }
.ha-contact-panel-label { flex: 1; text-transform: uppercase; font-size: var(--ha-text-xs); letter-spacing: 0.08em; }
.ha-contact-panel-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
    padding: 2px 10px;
    border-radius: var(--ha-radius-full);
    font-size: 11px;
    font-weight: var(--ha-weight-bold);
    min-width: 24px;
    text-align: center;
}
.ha-contact-panel-body {
    max-height: 420px;
    overflow-y: auto;
    padding: var(--ha-space-2);
}
.ha-contact-col-left .ha-contact-panel-body { max-height: 860px; }
.ha-contact-panel-empty {
    padding: var(--ha-space-5);
    text-align: center;
    font-size: var(--ha-text-xs);
    color: var(--ha-text-tertiary);
    font-style: italic;
}
.ha-contact-row {
    display: flex;
    align-items: center;
    gap: var(--ha-space-3);
    padding: var(--ha-space-3);
    border-radius: var(--ha-radius-md);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    min-width: 0;
}
.ha-contact-row + .ha-contact-row { margin-top: 2px; }
.ha-contact-row:hover { background: var(--ha-bg-secondary); transform: translateX(2px); }
.ha-contact-row-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--panel-accent, var(--ha-primary)), color-mix(in srgb, var(--panel-accent, var(--ha-primary)) 60%, #000));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--ha-weight-bold);
    font-size: var(--ha-text-sm);
    flex-shrink: 0;
}
.ha-contact-row-body { flex: 1; min-width: 0; }
.ha-contact-row-name { font-size: var(--ha-text-sm); font-weight: var(--ha-weight-semibold); color: var(--ha-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-contact-row-title { font-size: 11px; color: var(--ha-text-tertiary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-contact-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ha-space-2) var(--ha-space-3);
    font-size: 11px;
    color: var(--ha-text-secondary);
    margin-top: 3px;
}
.ha-contact-row-meta i { margin-right: 3px; color: var(--ha-text-tertiary); }
.ha-contact-row-chevron { color: var(--ha-text-tertiary); font-size: 11px; }
.ha-clickable-row:hover td { background: var(--ha-bg-secondary); }

@media (max-width: 768px) {
    .ha-contact-grid { grid-template-columns: 1fr; }
    .ha-contact-col-left .ha-contact-panel-body { max-height: 420px; }
}

/* Custom dark scrollbar for modal bodies and tab panels */
.ha-modal-body,
.ha-tab-panel {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 transparent;
}
.ha-modal-body::-webkit-scrollbar,
.ha-tab-panel::-webkit-scrollbar { width: 10px; height: 10px; }
.ha-modal-body::-webkit-scrollbar-track,
.ha-tab-panel::-webkit-scrollbar-track { background: transparent; }
.ha-modal-body::-webkit-scrollbar-thumb,
.ha-tab-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4b5563 0%, #1f2937 100%);
    border-radius: var(--ha-radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}
.ha-modal-body::-webkit-scrollbar-thumb:hover,
.ha-tab-panel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6b7280 0%, #374151 100%);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* Timeline feed */
.ha-timeline { display: flex; flex-direction: column; gap: var(--ha-space-3); }
.ha-timeline-item { display: flex; gap: var(--ha-space-3); padding: var(--ha-space-3); background: var(--ha-bg-secondary); border-radius: var(--ha-radius-sm); }
.ha-timeline-icon { width: 32px; height: 32px; border-radius: var(--ha-radius-full); background: var(--ha-primary); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ha-timeline-body { flex: 1; min-width: 0; }
.ha-timeline-body .timeline-title { font-size: var(--ha-text-sm); font-weight: var(--ha-weight-semibold); color: var(--ha-text-primary); }
.ha-timeline-body .timeline-meta { font-size: var(--ha-text-xs); color: var(--ha-text-tertiary); margin-top: 2px; }
.ha-timeline-body .timeline-excerpt { font-size: var(--ha-text-sm); color: var(--ha-text-secondary); margin-top: var(--ha-space-1); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .ha-sidebar {
        transform: translateX(-100%);
        width: var(--ha-sidebar-width);
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 200;
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ha-sidebar.open { transform: translateX(0); }
    .ha-main { margin-left: 0; }
    .ha-content { padding: var(--ha-space-3); }
    .ha-modal { width: 95%; }
    .ha-modal.ha-modal-wide { width: 100%; max-width: 100%; max-height: 100vh; border-radius: 0; }
    .ha-card { padding: var(--ha-space-3); }
    .ha-btn-lg { font-size: var(--ha-text-sm); padding: var(--ha-space-2) var(--ha-space-4); }
    .ha-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .ha-company-grid { grid-template-columns: 1fr; }
    .ha-tab-panel { padding: var(--ha-space-3); }
    .ha-detail-grid { grid-template-columns: 1fr; }
    /* Desktop-only tables become horizontally scrollable */
    .ha-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ha-dash-kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ha-dash-kpi-card .kpi-value { font-size: 24px; }
    .ha-dash-kpi-card .kpi-label { font-size: 10px; }
    /* Forms full-width */
    .ha-form-row-2 { grid-template-columns: 1fr; }
    /* Toolbar wraps */
    .ha-toolbar { gap: var(--ha-space-2); }
    .ha-toolbar .ha-spacer { display: none; }
    /* Make tabs horizontally scrollable instead of clipping */
    .ha-tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .ha-tab-btn { flex-shrink: 0; }
}
@media (max-width: 480px) {
    .ha-dash-kpis { grid-template-columns: 1fr; }
    .ha-stats-bar { grid-template-columns: 1fr; }
}

/* ===================== Tasks ===================== */
.ha-task-due { display: inline-flex; align-items: center; gap: var(--ha-space-1); color: var(--ha-text-secondary); font-size: var(--ha-text-xs); }
.ha-task-due.due-overdue { color: var(--ha-danger); font-weight: var(--ha-weight-semibold); }
.ha-task-due.due-today { color: var(--ha-warning); font-weight: var(--ha-weight-semibold); }

/* Pill-style view toggle */
.ha-pill-toggle { display: inline-flex; gap: var(--ha-space-1); background: #eef2f7; padding: 4px; border-radius: var(--ha-radius-full); }
.ha-pill-toggle button {
    border: 0; background: transparent; padding: 6px 14px; border-radius: var(--ha-radius-full);
    font-size: var(--ha-text-sm); font-weight: var(--ha-weight-medium); color: var(--ha-text-secondary);
    cursor: pointer; transition: all 0.15s ease;
}
.ha-pill-toggle button.active {
    background: linear-gradient(180deg, var(--ha-primary) 0%, var(--ha-primary-dark) 100%);
    color: #fff; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

/* Kanban board */
.ha-kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    gap: var(--ha-space-4);
    align-items: start;
}
.ha-kanban-col {
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 400px;
    max-height: calc(100vh - 240px);
}
.ha-kanban-col-header {
    padding: var(--ha-space-3) var(--ha-space-4);
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--ha-text-xs); font-weight: var(--ha-weight-bold);
    text-transform: uppercase; letter-spacing: 0.08em;
    border-bottom: 2px solid;
}
.ha-kanban-col[data-status="open"] .ha-kanban-col-header { background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 100%); color: #1e3a8a; border-bottom-color: #3b82f6; }
.ha-kanban-col[data-status="in_progress"] .ha-kanban-col-header { background: linear-gradient(180deg, #fed7aa 0%, #fff7ed 100%); color: #9a3412; border-bottom-color: #f97316; }
.ha-kanban-col[data-status="blocked"] .ha-kanban-col-header { background: linear-gradient(180deg, #fde68a 0%, #fffbeb 100%); color: #92400e; border-bottom-color: #eab308; }
.ha-kanban-col[data-status="completed"] .ha-kanban-col-header { background: linear-gradient(180deg, #bbf7d0 0%, #f0fdf4 100%); color: #14532d; border-bottom-color: #22c55e; }

.ha-kanban-col-count {
    background: rgba(255,255,255,0.7);
    border-radius: var(--ha-radius-full);
    padding: 2px 10px;
    font-size: var(--ha-text-xs);
    color: inherit;
}
.ha-kanban-col-add {
    padding: var(--ha-space-3) var(--ha-space-3) 0;
}
.ha-kanban-col-add input {
    width: 100%; padding: 8px 12px;
    border: 1px dashed var(--ha-border);
    border-radius: var(--ha-radius-sm);
    background: transparent;
    font-size: var(--ha-text-sm);
}
.ha-kanban-col-add input:focus {
    outline: none; border-style: solid; border-color: var(--ha-primary); background: var(--ha-surface);
}
.ha-kanban-col-body {
    padding: var(--ha-space-3);
    overflow-y: auto;
    flex: 1;
    display: flex; flex-direction: column; gap: var(--ha-space-3);
}
.ha-kanban-col-body.drag-over {
    background: rgba(37, 99, 235, 0.05);
}

.ha-kanban-card {
    position: relative;
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-left: 4px solid var(--ha-primary);
    border-radius: var(--ha-radius-md);
    padding: var(--ha-space-3);
    cursor: grab;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(17,24,39,0.04);
}
.ha-kanban-card .kc-alert {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #dc2626;
    font-size: 14px;
    animation: ha-kc-alert-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(220,38,38,0.3));
}
@keyframes ha-kc-alert-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.92); }
}
.ha-kanban-card .kc-title { padding-right: 22px; }
.ha-kanban-tooltip .due-warn { color: #f87171; font-weight: 600; }
.ha-kanban-card:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(17,24,39,0.08); }
.ha-kanban-card.dragging { opacity: 0.5; cursor: grabbing; }
.ha-kanban-card[data-priority="urgent"]  { border-left-color: #dc2626; background: linear-gradient(90deg, #fef2f2 0%, #fff5f5 40%, var(--ha-surface) 100%); }
.ha-kanban-card[data-priority="high"]    { border-left-color: #f97316; background: linear-gradient(90deg, #fff7ed 0%, #fffaf5 40%, var(--ha-surface) 100%); }
.ha-kanban-card[data-priority="normal"]  { border-left-color: #3b82f6; }
.ha-kanban-card[data-priority="low"]     { border-left-color: #9ca3af; }
.ha-kanban-card[data-priority="urgent"]:hover { background: linear-gradient(90deg, #fee2e2 0%, #fef2f2 40%, var(--ha-surface) 100%); }
.ha-kanban-card[data-priority="high"]:hover   { background: linear-gradient(90deg, #ffedd5 0%, #fff7ed 40%, var(--ha-surface) 100%); }
.ha-kanban-card .kc-title { font-weight: var(--ha-weight-semibold); font-size: var(--ha-text-sm); color: var(--ha-text-primary); margin-bottom: 4px; }
.ha-kanban-card .kc-desc { font-size: var(--ha-text-xs); color: var(--ha-text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--ha-space-2); }
.ha-kanban-card .kc-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ha-space-2); flex-wrap: wrap; }
.ha-kanban-card .kc-chips { display: flex; gap: 4px; flex-wrap: wrap; }

.ha-chip-category {
    display: inline-block; padding: 2px 8px; border-radius: var(--ha-radius-full);
    background: #eef2f7; color: #475569;
    font-size: 10px; font-weight: var(--ha-weight-medium);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ha-chip-subtasks, .ha-chip-attachments {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; color: var(--ha-text-tertiary); font-weight: var(--ha-weight-medium);
}

/* Task detail modal — specific tweaks */
.ha-task-detail-header {
    display: flex; gap: var(--ha-space-2); align-items: center; flex-wrap: wrap;
    padding: 0 0 var(--ha-space-3);
    border-bottom: 1px solid var(--ha-border); margin-bottom: var(--ha-space-3);
}
.ha-task-detail-header select { width: auto; min-width: 110px; }
.ha-status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ha-status-dot[data-s="open"]        { background: #3b82f6; }
.ha-status-dot[data-s="in_progress"] { background: #f97316; }
.ha-status-dot[data-s="blocked"]     { background: #eab308; }
.ha-status-dot[data-s="completed"]   { background: #22c55e; }
.ha-status-dot[data-s="cancelled"]   { background: #9ca3af; }

/* Subtasks */
.ha-subtask-list { display: flex; flex-direction: column; gap: 6px; }
.ha-subtask-row { display: flex; align-items: center; gap: var(--ha-space-2); padding: 6px 8px; border-radius: var(--ha-radius-sm); background: #f8fafc; }
.ha-subtask-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.ha-subtask-row .st-title { flex: 1; font-size: var(--ha-text-sm); }
.ha-subtask-row.done .st-title { text-decoration: line-through; color: var(--ha-text-tertiary); }
.ha-subtask-row .st-del { background: transparent; border: 0; color: var(--ha-text-tertiary); cursor: pointer; padding: 4px 8px; }
.ha-subtask-row .st-del:hover { color: var(--ha-danger); }

/* Attachments */
.ha-dropzone {
    border: 2px dashed var(--ha-border);
    border-radius: var(--ha-radius-md);
    padding: var(--ha-space-4);
    text-align: center;
    color: var(--ha-text-secondary);
    font-size: var(--ha-text-sm);
    cursor: pointer;
    background: #f8fafc;
    transition: border-color 0.15s;
}
.ha-dropzone:hover, .ha-dropzone.drag-over { border-color: var(--ha-primary); background: #eff6ff; }
.ha-attachment-list { display: flex; flex-direction: column; gap: 6px; margin-top: var(--ha-space-2); }
.ha-attachment-row { display: flex; align-items: center; gap: var(--ha-space-2); padding: 8px 10px; background: var(--ha-surface); border: 1px solid var(--ha-border); border-radius: var(--ha-radius-sm); }
.ha-attachment-row i { color: var(--ha-primary); }
.ha-attachment-row a { flex: 1; color: var(--ha-text-primary); text-decoration: none; font-size: var(--ha-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-attachment-row a:hover { color: var(--ha-primary); }
.ha-attachment-row .size { color: var(--ha-text-tertiary); font-size: var(--ha-text-xs); }

/* Templates */
.ha-template-card {
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-md);
    padding: var(--ha-space-4);
    margin-bottom: var(--ha-space-3);
    display: flex; gap: var(--ha-space-3); align-items: flex-start;
}
.ha-template-card .tpl-body { flex: 1; }
.ha-template-card .tpl-title { font-weight: var(--ha-weight-semibold); margin-bottom: 4px; }
.ha-template-card .tpl-desc { font-size: var(--ha-text-sm); color: var(--ha-text-secondary); margin-bottom: var(--ha-space-2); }
.ha-template-card .tpl-meta { font-size: var(--ha-text-xs); color: var(--ha-text-tertiary); margin-top: var(--ha-space-2); }
.ha-template-card .tpl-actions { display: flex; gap: 4px; }

/* Mobile-first: kanban becomes horizontal swipe */
@media (max-width: 1024px) {
    .ha-kanban {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: var(--ha-space-2);
    }
    .ha-kanban-col {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }
}

/* =================== Notifications dropdown =================== */
.ha-notif-row {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--ha-border);
    cursor: pointer;
    transition: background 0.1s;
}
.ha-notif-row:hover { background: #f8fafc; }
.ha-notif-row.unread { background: #eff6ff; }
.ha-notif-row.unread::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ha-primary);
    margin-top: 10px;
    flex-shrink: 0;
}
.ha-notif-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.ha-notif-body { flex: 1; min-width: 0; }
.ha-notif-title { font-weight: 600; font-size: 13px; color: var(--ha-text-primary); }
.ha-notif-text { font-size: 12px; color: var(--ha-text-secondary); margin-top: 2px; }
.ha-notif-meta { font-size: 10px; color: var(--ha-text-tertiary); margin-top: 4px; }

/* =================== Global Botson quick-access FAB =================== */
.botson-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Match the brand deep navy gradient used everywhere else */
    background: var(--ha-brand-gradient-deep);
    border: 2px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(59, 130, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 0;
}
.botson-fab img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.botson-fab:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(96, 165, 250, 0.55);
}
.botson-fab:active { transform: scale(0.96); }
.botson-fab.hidden { display: none; }
@media (max-width: 640px) {
    .botson-fab { width: 52px; height: 52px; bottom: 18px; right: 18px; font-size: 21px; }
}

/* Topbar jobs badge gently pulses while work is running so the eye
   lands on it. The button itself uses a spinning gear icon. */
#ha-jobs-badge {
    animation: ha-jobs-badge-pulse 2s ease-in-out infinite;
}
@keyframes ha-jobs-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(59, 130, 246, 0); }
}
.botson-fab::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
    z-index: -1;
    animation: botsonFabPulse 2.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes botsonFabPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.28); opacity: 0.28; }
}

/* =================== Email module =================== */
.email-shell {
    display: grid;
    grid-template-columns: 220px 340px 1fr;
    gap: 1px;
    background: var(--ha-border);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-md);
    overflow: hidden;
    height: calc(100vh - 180px);
}
.email-sidebar {
    background: var(--ha-surface);
    display: flex;
    flex-direction: column;
}
.email-sidebar-head { padding: var(--ha-space-3); border-bottom: 1px solid var(--ha-border); }
.email-folders { padding: var(--ha-space-2); }
.email-folder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ha-text-primary);
    font-weight: 500;
}
.email-folder.active { background: var(--ha-primary-light); color: var(--ha-primary-dark); }
.email-folder.muted { color: var(--ha-text-tertiary); font-weight: 400; cursor: default; }
.email-folder.muted:hover { background: transparent; }
.email-list-col {
    background: var(--ha-surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.email-list-head {
    padding: var(--ha-space-3);
    border-bottom: 1px solid var(--ha-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.email-list {
    flex: 1;
    overflow-y: auto;
}
.email-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ha-border);
    cursor: pointer;
    transition: background 0.1s;
}
.email-item:hover { background: #f8fafc; }
.email-item.active { background: var(--ha-primary-light); }
.email-item.unread .email-item-from,
.email-item.unread .email-item-subject { font-weight: 700; color: var(--ha-text-primary); }
.email-item-from { font-size: 13px; color: var(--ha-text-secondary); margin-bottom: 2px; }
.email-item-subject { font-size: 13px; color: var(--ha-text-primary); margin-bottom: 2px; }
.email-item-preview { font-size: 11px; color: var(--ha-text-tertiary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.email-item-date { font-size: 10px; color: var(--ha-text-tertiary); margin-top: 4px; }
.email-read-col {
    background: var(--ha-surface);
    overflow-y: auto;
    padding: var(--ha-space-5);
}
.email-read-head { border-bottom: 1px solid var(--ha-border); padding-bottom: var(--ha-space-3); margin-bottom: var(--ha-space-3); }
.email-read-head h2 { margin: 0 0 var(--ha-space-2); font-size: 18px; }
.email-read-meta { font-size: 12px; color: var(--ha-text-secondary); }
.email-read-body { font-size: 14px; line-height: 1.6; color: var(--ha-text-primary); }
.email-read-body img { max-width: 100%; height: auto; }
@media (max-width: 900px) {
    .email-shell { grid-template-columns: 1fr; height: auto; }
    .email-sidebar, .email-list-col, .email-read-col { min-height: 300px; }
}

/* =========================================================
   BOTSON CODE — The orchestrator chat interface
   ========================================================= */
.ha-content:has(.botson-shell) {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    overflow: hidden;
    display: block;
}

.botson-shell {
    display: grid;
    grid-template-columns: 280px 1fr 0;
    height: calc(100vh - var(--ha-topbar-height));
    width: 100%;
    background: #0f172a;
    color: #e2e8f0;
    overflow: hidden;
    transition: grid-template-columns 0.3s ease;
}
.botson-shell.canvas-open { grid-template-columns: 280px 1fr minmax(400px, 45%); }

/* Sidebar */
.botson-sidebar {
    background: #0b1220;
    border-right: 1px solid #1e293b;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.botson-sidebar-head {
    padding: var(--ha-space-4);
    border-bottom: 1px solid #1e293b;
}
.botson-sidebar-head .botson-new-btn {
    width: 100%;
    background: var(--ha-brand-linear);
    border: 0;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
    font-weight: 600;
    color: #fff;
}
.botson-sidebar-head .botson-new-btn:hover { filter: brightness(1.06); }
.botson-sidebar-tabs {
    display: flex;
    gap: 4px;
    padding: var(--ha-space-3) var(--ha-space-3) 0;
}
.botson-tab {
    flex: 1;
    background: transparent;
    border: 0;
    color: #64748b;
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.botson-tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }
.botson-tab:hover { color: #cbd5e1; }

.botson-search {
    padding: var(--ha-space-3);
}
.botson-search input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    font-size: 13px;
}
.botson-search input::placeholder { color: #64748b; }

.botson-conv-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--ha-space-2);
}
.botson-conv-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background 0.12s;
    border: 1px solid transparent;
}
.botson-conv-item:hover { background: #1e293b; }
.botson-conv-item.active {
    background: rgba(11, 15, 254, 0.15);
    border-color: #3b82f6;
}
.botson-conv-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #1e293b;
    display: flex; align-items: center; justify-content: center;
    color: #60a5fa;
    flex-shrink: 0;
    font-size: 12px;
}
.botson-conv-body { flex: 1; min-width: 0; }
.botson-conv-title {
    font-size: 13px;
    color: #e2e8f0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.botson-conv-meta {
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
}
.botson-conv-del {
    background: transparent;
    border: 0;
    color: #475569;
    padding: 4px 6px;
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.botson-conv-item:hover .botson-conv-del { opacity: 1; }
.botson-conv-del:hover { color: #f87171; }

.botson-empty {
    padding: var(--ha-space-5) var(--ha-space-3);
    text-align: center;
    color: #475569;
    font-size: 13px;
}

/* Main chat column */
.botson-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0f172a;
}
.botson-topbar {
    display: flex;
    align-items: center;
    gap: var(--ha-space-3);
    padding: 12px var(--ha-space-4);
    background: #0b1220;
    border-bottom: 1px solid #1e293b;
    flex-shrink: 0;
}
.botson-hamburger {
    background: transparent;
    border: 1px solid #1e293b;
    color: #cbd5e1;
    width: 34px; height: 34px;
    border-radius: 6px;
    cursor: pointer;
    display: none;
}
.botson-session-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.botson-mode-toggle {
    display: flex;
    gap: 2px;
    background: #1e293b;
    border-radius: 6px;
    padding: 2px;
}
.botson-mode-toggle button {
    background: transparent;
    border: 0;
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.botson-mode-toggle button.active {
    background: #0b0ffe;
    color: #fff;
}
.botson-model-pick select {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    font-size: 12px;
}
.botson-canvas-toggle {
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    width: 34px; height: 34px;
    border-radius: 6px;
    cursor: pointer;
}
.botson-canvas-toggle:hover { background: #334155; color: #fff; }

/* Messages */
.botson-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--ha-space-5) var(--ha-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ha-space-4);
}
.botson-messages::-webkit-scrollbar { width: 8px; }
.botson-messages::-webkit-scrollbar-track { background: #0f172a; }
.botson-messages::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

.botson-welcome {
    margin: auto;
    text-align: center;
    max-width: 480px;
    padding: var(--ha-space-8) var(--ha-space-4);
}
.botson-welcome-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin: 0 auto var(--ha-space-5);
    object-fit: cover;
    background: var(--ha-brand-linear);
    box-shadow: 0 16px 48px rgba(11, 15, 254, 0.35);
    display: block;
}
.botson-welcome-avatar-wrap {
    position: relative;
    width: 120px; height: 120px;
    margin: 0 auto var(--ha-space-5);
}
.botson-welcome-avatar-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(11,15,254,0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: botsonPulse 2.4s ease-in-out infinite;
}
.botson-welcome-avatar-badge {
    position: absolute;
    inset: 20px;
    background: linear-gradient(135deg, #0b0ffe 0%, #6366f1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
    box-shadow: 0 12px 40px rgba(11,15,254,0.45);
}
@keyframes botsonPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.15); opacity: 0.9; }
}
.botson-welcome h1 {
    font-size: 28px;
    margin: 0 0 var(--ha-space-2);
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}
.botson-welcome p {
    color: #94a3b8;
    margin-bottom: var(--ha-space-5);
    font-size: 15px;
}

.botson-empty-chat {
    margin: auto;
    text-align: center;
    color: #64748b;
    padding: var(--ha-space-6);
}
.botson-empty-chat h3 { color: #cbd5e1; margin: var(--ha-space-3) 0 4px; font-size: 18px; }
.botson-empty-chat kbd {
    background: #1e293b;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--ha-font-mono, monospace);
    font-size: 11px;
    border: 1px solid #334155;
}

.botson-msg {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    background: #1e293b;
    border-radius: 12px;
    padding: var(--ha-space-4);
    border: 1px solid #334155;
}
.botson-msg-user {
    background: rgba(11, 15, 254, 0.08);
    border-left: 3px solid #60a5fa;
    border-color: rgba(96, 165, 250, 0.2);
}
.botson-msg-ai {
    background: #0b1220;
    border-color: #1e293b;
}
.botson-msg-tool {
    background: rgba(251, 191, 36, 0.06);
    border: 1px dashed rgba(251, 191, 36, 0.3);
    padding: 10px 14px;
}
.botson-msg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 10px;
}
.botson-msg-user .botson-msg-role { color: #60a5fa; }
.botson-msg-ai .botson-msg-role { color: #10b981; }
.botson-msg-avatar {
    width: 22px; height: 22px;
    background: linear-gradient(135deg, #0b0ffe 0%, #6366f1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    overflow: hidden;
}
.botson-msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.botson-msg-pin {
    background: transparent;
    border: 0;
    color: #475569;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}
.botson-msg-pin:hover { color: #fbbf24; background: rgba(251, 191, 36, 0.1); }
.botson-msg-pin.active { color: #f59e0b; background: rgba(245, 158, 11, 0.15); }
.botson-rate-btn {
    background: transparent;
    border: 1px solid #334155;
    color: #64748b;
    width: 28px; height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.botson-rate-btn:hover { border-color: #475569; color: #cbd5e1; }
.botson-rate-btn.active.up { background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #10b981; }
.botson-rate-btn.active.down { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #ef4444; }
.botson-msg-flash {
    animation: botsonFlash 2s ease;
}
@keyframes botsonFlash {
    0%, 100% { outline: 0 solid transparent; }
    30% { outline: 3px solid #f59e0b; outline-offset: 4px; }
}
.botson-pin-item .botson-conv-icon { background: rgba(245, 158, 11, 0.12) !important; color: #f59e0b !important; }
.botson-msg-model {
    color: #64748b;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
    padding: 2px 6px;
    background: #1e293b;
    border-radius: 4px;
}
.botson-msg-body {
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.65;
}
.botson-msg-body h1, .botson-msg-body h2, .botson-msg-body h3 {
    color: #f1f5f9;
    margin: 16px 0 8px;
}
.botson-msg-body h1 { font-size: 20px; }
.botson-msg-body h2 { font-size: 17px; }
.botson-msg-body h3 { font-size: 15px; }
.botson-msg-body p { margin: 0 0 10px; }
.botson-msg-body ul, .botson-msg-body ol { margin: 0 0 10px; padding-left: 22px; }
.botson-msg-body li { margin-bottom: 4px; }
.botson-msg-body code {
    background: #0f172a;
    color: #a5f3fc;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--ha-font-mono, monospace);
    font-size: 12px;
    border: 1px solid #334155;
}
.botson-msg-body a { color: #60a5fa; text-decoration: underline; }
.botson-msg-body strong { color: #f1f5f9; }

.botson-msg-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #1e293b;
    flex-wrap: wrap;
    align-items: center;
}
.botson-act-btn {
    background: transparent;
    border: 1px solid #334155;
    color: #94a3b8;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.botson-act-btn:hover {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #475569;
}
.botson-msg-tokens {
    margin-left: auto;
    font-size: 10px;
    color: #475569;
    font-family: var(--ha-font-mono, monospace);
}

.botson-code-block {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    margin: 12px 0;
    overflow: hidden;
    transition: border-color 0.15s;
    position: relative;
}
.botson-code-block:hover { border-color: #3b82f6; }
.botson-code-head {
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.08);
    color: #93c5fd;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #1e293b;
}
.botson-code-label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.botson-code-actions { display: flex; gap: 4px; }
.botson-code-btn {
    background: rgba(255,255,255,0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, color 0.15s;
}
.botson-code-btn:hover { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.botson-code-pre {
    margin: 0;
    padding: 12px;
    color: #e2e8f0;
    font-family: var(--ha-font-mono, monospace);
    font-size: 12px;
    line-height: 1.55;
    overflow-x: auto;
    max-height: 600px;
    white-space: pre;
}
.botson-code-block.collapsed .botson-code-pre {
    max-height: 200px;
    overflow: hidden;
    position: relative;
}
.botson-code-block.collapsed .botson-code-pre::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(15,23,42,0), rgba(15,23,42,1));
    pointer-events: none;
}

.botson-tool-result {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 6px;
}
.botson-tool-result summary { cursor: pointer; }
.botson-tool-result pre {
    margin: 6px 0 0;
    padding: 10px;
    background: #0f172a;
    border-radius: 6px;
    font-family: var(--ha-font-mono, monospace);
    font-size: 11px;
    color: #cbd5e1;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
}

/* Thinking dots */
.botson-thinking-dots {
    display: inline-flex;
    gap: 4px;
}
.botson-thinking-dots span {
    width: 8px; height: 8px;
    background: #60a5fa;
    border-radius: 50%;
    animation: botsonDotPulse 1.2s ease-in-out infinite;
}
.botson-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.botson-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes botsonDotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* Quick prompts bar */
.botson-quick-prompts {
    max-width: 820px;
    margin: 0 auto 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 4px;
}
.botson-quick-prompts button {
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.botson-quick-prompts button:hover {
    background: #334155;
    border-color: #475569;
    color: #fff;
}

/* Attachment strip */
.botson-attach-strip {
    max-width: 820px;
    margin: 0 auto 8px;
    display: flex;
    gap: 8px;
    padding: 8px;
    background: #1e293b;
    border-radius: 8px;
    flex-wrap: wrap;
}
.botson-attach-thumb {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #334155;
}
.botson-attach-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.botson-attach-thumb button {
    position: absolute;
    top: 2px; right: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 0;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 10px;
    cursor: pointer;
}

/* Message images */
.botson-msg-images {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.botson-msg-images img {
    max-width: 180px;
    max-height: 180px;
    border-radius: 6px;
    border: 1px solid #334155;
    cursor: zoom-in;
    object-fit: cover;
}

/* Composer */
.botson-composer {
    padding: var(--ha-space-4);
    background: #0b1220;
    border-top: 1px solid #1e293b;
    flex-shrink: 0;
}
.botson-composer-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 8px 10px;
    transition: border-color 0.15s;
}
.botson-composer-inner:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.botson-composer-inner textarea {
    flex: 1;
    background: transparent;
    border: 0;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.5;
    padding: 8px;
    resize: none;
    outline: none;
    font-family: inherit;
    max-height: 200px;
}
.botson-composer-inner textarea::placeholder { color: #64748b; }
.botson-cmd-btn, .botson-send-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.botson-cmd-btn {
    background: transparent;
    color: #64748b;
}
.botson-cmd-btn:hover {
    background: #0f172a;
    color: #fbbf24;
}
.botson-cmd-btn.voice-listening {
    background: #dc2626 !important;
    color: #fff !important;
    animation: botsonVoicePulse 1.2s ease-in-out infinite;
}
@keyframes botsonVoicePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
    50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}
.botson-send-btn {
    background: var(--ha-brand-linear);
    color: var(--ha-brand-ink);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}
.botson-send-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59, 130, 246, 0.55); filter: brightness(1.08); }
.botson-composer-meta {
    max-width: 820px;
    margin: 6px auto 0;
    font-size: 10px;
    color: #475569;
    text-align: right;
    font-family: var(--ha-font-mono, monospace);
}

/* Canvas */
.botson-canvas {
    background: #0b1220;
    border-left: 1px solid #1e293b;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.botson-shell.canvas-open .botson-canvas { display: flex; }
.botson-canvas-head {
    padding: 12px var(--ha-space-4);
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.botson-canvas-title {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
}
.botson-canvas-act {
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
    width: 28px; height: 28px;
    border-radius: 6px;
    cursor: pointer;
}
.botson-canvas-act:hover { background: #334155; color: #fff; }
.botson-canvas-body {
    flex: 1;
    overflow: auto;
    padding: var(--ha-space-4);
    display: flex;
    flex-direction: column;
}
.botson-canvas-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--ha-space-3);
    border-bottom: 1px solid #1e293b;
    flex-shrink: 0;
}
.botson-canvas-tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
}
.botson-canvas-tab:hover { color: #e2e8f0; }
.botson-canvas-tab.active {
    color: #60a5fa;
    border-bottom-color: #3b82f6;
}
.botson-canvas-tab-body { flex: 1; min-height: 0; display: flex; }
.botson-canvas-tab-body > .botson-canvas-code { flex: 1; margin: 0; }
.botson-messages.select-mode .botson-msg { padding-left: 44px; position: relative; }
.botson-msg-select {
    position: absolute;
    left: 10px;
    top: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #60a5fa;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    z-index: 2;
}
.botson-msg-select.checked {
    background: #0b0ffe;
    color: #fff;
    border-color: #0b0ffe;
}
.botson-msg.selected {
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
}
.botson-selection-bar {
    position: absolute;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0f172a;
    color: #fff;
    padding: 10px 14px;
    border-radius: 32px;
    border: 1px solid #1e293b;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    z-index: 200;
}
.botson-selection-count {
    font-size: 12px;
    font-weight: 600;
    color: #93c5fd;
    padding: 0 8px;
}
.botson-canvas-toggle.active {
    background: #0b0ffe !important;
    color: #fff !important;
}

.botson-msg-inline-img {
    max-width: 100%;
    max-height: 360px;
    border-radius: 8px;
    margin: 8px 0;
    cursor: zoom-in;
    border: 1px solid #1e293b;
    display: block;
}
.botson-msg-inline-img:hover { border-color: #3b82f6; }

.ha-img-lightbox {
    position: fixed; inset: 0; z-index: 28000;
    background: rgba(8, 15, 32, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.ha-img-lightbox.active { opacity: 1; }
.ha-img-lightbox.closing { opacity: 0; }
.ha-img-lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 12px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6);
    cursor: default;
    transform: scale(0.96);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ha-img-lightbox.active img { transform: scale(1); }
.ha-img-lightbox-actions {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    gap: 8px;
}
.ha-img-lightbox-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    backdrop-filter: blur(8px);
    transition: background 0.15s;
}
.ha-img-lightbox-btn:hover { background: rgba(255,255,255,0.22); }

.botson-art-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: var(--ha-space-3);
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid #1e293b;
    border-radius: 8px;
    flex-shrink: 0;
}
.botson-art-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: thin;
}
.botson-art-tab {
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.botson-art-tab:hover { background: rgba(59, 130, 246, 0.12); color: #e2e8f0; }
.botson-art-tab.active {
    background: #0b0ffe;
    color: #fff;
    border-color: #3b82f6;
}
.botson-art-tab-lang {
    background: rgba(255,255,255,0.15);
    color: inherit;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9px;
    text-transform: uppercase;
}
.botson-art-actions { display: flex; gap: 4px; flex-shrink: 0; }

.botson-cover-picker { display: flex; flex-direction: column; gap: 8px; }
.botson-cover-option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--ha-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.botson-cover-option:hover { background: var(--ha-bg-soft); border-color: #0b0ffe; }
.botson-cover-option input[type="radio"] { margin: 0; }
.botson-cover-name { font-weight: 600; color: var(--ha-text-primary); }

.botson-canvas-preview {
    flex: 1;
    width: 100%;
    border: 1px solid #1e293b;
    border-radius: 8px;
    background: #fff;
    min-height: 400px;
}
.botson-canvas-empty {
    text-align: center;
    color: #475569;
    padding: var(--ha-space-8) var(--ha-space-4);
}
.botson-canvas-empty p { margin-top: var(--ha-space-3); font-size: 13px; }
.botson-canvas-code {
    background: #0f172a;
    color: #e2e8f0;
    padding: var(--ha-space-4);
    border-radius: 8px;
    font-family: var(--ha-font-mono, monospace);
    font-size: 12px;
    line-height: 1.6;
    overflow: auto;
    white-space: pre;
    border: 1px solid #1e293b;
}

/* Templates modal */
.botson-template-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ha-space-3);
}
.botson-template-card {
    display: flex;
    gap: 12px;
    padding: var(--ha-space-3);
    background: #f8fafc;
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-md);
    cursor: pointer;
    transition: all 0.15s;
}
.botson-template-card:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}
.botson-template-card.active {
    background: #dbeafe;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}
.botson-template-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.botson-template-title { font-weight: 600; color: var(--ha-text-primary); font-size: 14px; margin-bottom: 2px; }
.botson-template-desc { font-size: 12px; color: var(--ha-text-secondary); line-height: 1.4; }
.botson-template-mode {
    display: inline-block;
    margin-top: 6px;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.botson-template-mode.mode-code { background: #dbeafe; color: #1e3a8a; }
.botson-template-mode.mode-chat { background: #dcfce7; color: #166534; }

/* =================== Commands palette (polished) =================== */
.botson-cmd-search-wrap {
    position: relative;
    margin: 0 0 var(--ha-space-4);
}
.botson-cmd-search-wrap > i {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}
.botson-cmd-search-wrap input {
    padding: 12px 60px 12px 40px !important;
    font-size: 15px !important;
    background: #f8fafc !important;
    border: 2px solid var(--ha-border) !important;
    border-radius: 10px !important;
}
.botson-cmd-search-wrap input:focus {
    background: #fff !important;
    border-color: var(--ha-primary) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.botson-cmd-search-wrap kbd {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    background: #e2e8f0;
    color: #475569;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--ha-font-mono, monospace);
    pointer-events: none;
}

.botson-cmd-list-new {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}
.botson-cmd-group {
    margin-bottom: var(--ha-space-4);
}
.botson-cmd-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 6px 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ha-border);
}
.botson-cmd-group-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
}
.botson-cmd-group-count {
    margin-left: auto;
    color: var(--ha-text-tertiary);
    font-weight: 400;
    font-size: 10px;
}
.botson-cmd-group-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (max-width: 640px) {
    .botson-cmd-group-body { grid-template-columns: 1fr; }
}
.botson-cmd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid var(--ha-border);
    transition: all 0.12s ease;
}
.botson-cmd-item:hover {
    background: #fff;
    border-color: var(--ha-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37,99,235,0.1);
}
.botson-cmd-item:hover .botson-cmd-go { color: var(--ha-primary); opacity: 1; }
.botson-cmd-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.botson-cmd-body { flex: 1; min-width: 0; }
.botson-cmd-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ha-text-primary);
    line-height: 1.2;
}
.botson-cmd-desc {
    font-size: 11px;
    color: var(--ha-text-tertiary);
    margin-top: 2px;
    line-height: 1.35;
}
.botson-cmd-go {
    color: var(--ha-text-tertiary);
    opacity: 0;
    transition: all 0.12s;
    font-size: 11px;
    flex-shrink: 0;
}
.botson-cmd-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4px 0;
    border-top: 1px solid var(--ha-border);
    margin-top: var(--ha-space-3);
    font-size: 11px;
    color: var(--ha-text-tertiary);
}
.botson-cmd-footer kbd {
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--ha-font-mono, monospace);
    font-size: 10px;
    margin: 0 2px;
}

/* =================== Tool-call accordions (colored) =================== */
.botson-msg-tool {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 6px auto !important;
    max-width: 820px;
    width: 100%;
}
.botson-tool-pill {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.06) 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.15s;
}
.botson-tool-pill.tool-crm      { border-left-color: #10b981; background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.04) 100%); border-color: rgba(16, 185, 129, 0.3); }
.botson-tool-pill.tool-fs       { border-left-color: #3b82f6; background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(29, 78, 216, 0.04) 100%); border-color: rgba(59, 130, 246, 0.3); }
.botson-tool-pill.tool-bash     { border-left-color: #0f172a; background: linear-gradient(135deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.08) 100%); border-color: rgba(100, 116, 139, 0.4); }
.botson-tool-pill.tool-sql      { border-left-color: #8b5cf6; background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(109, 40, 217, 0.04) 100%); border-color: rgba(139, 92, 246, 0.3); }
.botson-tool-pill.tool-web      { border-left-color: #06b6d4; background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(8, 145, 178, 0.04) 100%); border-color: rgba(6, 182, 212, 0.3); }
.botson-tool-pill.tool-mem0     { border-left-color: #ec4899; background: linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(190, 24, 93, 0.04) 100%); border-color: rgba(236, 72, 153, 0.3); }

.botson-tool-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 500;
    color: #cbd5e1;
}
.botson-tool-head .tool-chip {
    font-family: var(--ha-font-mono, monospace);
    font-weight: 600;
    color: #f1f5f9;
    font-size: 12px;
}
.botson-tool-head .tool-args {
    font-size: 10px;
    color: #94a3b8;
    font-family: var(--ha-font-mono, monospace);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.botson-tool-head .tool-caret {
    margin-left: auto;
    font-size: 10px;
    color: #64748b;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.botson-tool-pill.open .tool-caret { transform: rotate(90deg); }
.botson-tool-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.botson-tool-pill.open .botson-tool-body { max-height: 500px; overflow-y: auto; }
.botson-tool-body-inner {
    padding: 10px 14px 14px;
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
}
.botson-tool-body pre {
    margin: 0;
    font-family: var(--ha-font-mono, monospace);
    font-size: 11px;
    color: #cbd5e1;
    white-space: pre-wrap;
    line-height: 1.55;
    background: rgba(15, 23, 42, 0.5);
    padding: 10px;
    border-radius: 6px;
    max-height: 360px;
    overflow: auto;
}

/* =================== Code-mode workdir bar =================== */
.botson-workdir-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(11, 15, 254, 0.05) 100%);
    border-bottom: 1px solid #1e293b;
    font-size: 12px;
    color: #94a3b8;
    font-family: var(--ha-font-mono, monospace);
}
.botson-workdir-bar .workdir-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #60a5fa;
    font-weight: 600;
    font-family: inherit;
}
.botson-workdir-bar .workdir-path {
    color: #e2e8f0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.botson-workdir-bar .workdir-change {
    background: transparent;
    border: 1px solid #334155;
    color: #cbd5e1;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.botson-workdir-bar .workdir-change:hover {
    background: #1e293b;
    border-color: #475569;
    color: #fff;
}

/* Mobile */
@media (max-width: 900px) {
    .botson-shell { grid-template-columns: 1fr; }
    .botson-shell.canvas-open { grid-template-columns: 1fr; }
    .botson-sidebar {
        position: fixed;
        top: 64px; left: 0; bottom: 0;
        width: 280px;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s;
    }
    .botson-sidebar.open { transform: translateX(0); box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
    .botson-hamburger { display: flex; align-items: center; justify-content: center; }
    .botson-canvas {
        position: fixed;
        top: 64px; right: 0; bottom: 0;
        width: 100%;
        max-width: 480px;
        z-index: 99;
    }
    .botson-template-grid { grid-template-columns: 1fr; }
    .botson-msg { max-width: 100%; }
}

/* =================== Content Calendar =================== */
.cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--ha-border);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-md);
    overflow: hidden;
}
.cal-head {
    background: #f1f5f9;
    padding: 8px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--ha-text-secondary);
}
.cal-cell {
    background: var(--ha-surface);
    min-height: 110px;
    padding: 6px;
    font-size: var(--ha-text-xs);
    cursor: pointer;
    transition: background 0.12s;
}
.cal-cell:hover { background: #f8fafc; }
.cal-cell.cal-today { background: #eff6ff; }
.cal-cell.cal-today .cal-day-num { color: var(--ha-primary); font-weight: 700; }
.cal-cell.cal-empty { background: #f8fafc; cursor: default; }
.cal-day-num { font-weight: 600; color: var(--ha-text-secondary); margin-bottom: 4px; }
.cal-item {
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    margin-bottom: 3px;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.cal-item:hover { filter: brightness(1.1); }
.cal-more { font-size: 10px; color: var(--ha-text-tertiary); padding: 2px 6px; }

/* =================== Rich Dashboard =================== */
.ha-dash-kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--ha-space-3);
    margin-bottom: var(--ha-space-5);
}
.ha-dash-kpi-card {
    position: relative;
    padding: var(--ha-space-4);
    border-radius: var(--ha-radius-lg);
    color: #fff;
    /* Unified base — deep brand navy gradient. Tone variants layer a
       thin accent strip on top and a very subtle hue wash. */
    background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.ha-dash-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ha-dash-kpi-card::after {
    /* Large soft radial glow behind the icon — reads the accent tone */
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
/* No semantic stripe — every KPI tile reads as a single unified
   deep-navy surface. If we ever need semantic signal back, the card
   numbers + labels carry it. */
.ha-dash-kpi-card .kpi-icon {
    position: absolute;
    top: var(--ha-space-3);
    right: var(--ha-space-4);
    font-size: 22px;
    opacity: 0.85;
    z-index: 1;
}
.ha-dash-kpi-card .kpi-value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    z-index: 1;
    position: relative;
}
.ha-dash-kpi-card .kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.9;
    font-weight: 600;
    margin-top: 4px;
    z-index: 1;
    position: relative;
}
.ha-dash-kpi-card .kpi-sub {
    font-size: 11px;
    opacity: 0.75;
    margin-top: 2px;
    z-index: 1;
    position: relative;
}
.ha-dash-kpi-card.ha-dash-kpi-loading {
    background: #f1f5f9;
    color: var(--ha-text-secondary);
}

/* =====================================================================
   Dashboard section cards — Today's Tasks, Open Tickets, Relationship
   Health, Recent Transcripts, etc.

   Hierarchy: dark navy HEADER BAR (carries the brand + title), light
   body (white surface) where the actual data lives. This gives the
   page a natural high-to-low contrast flow from the KPI row above
   down into the data areas, instead of drowning everything in navy.
   ===================================================================== */
.ha-card.ha-dash-section {
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    color: var(--ha-text);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    padding: 0;
}
.ha-card.ha-dash-section .ha-card-header {
    /* Quiet header bar — soft pale-blue surface that complements the
       brand without shouting. Icon carries the brand color; title is
       dark slate for readability. */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #eff6ff;
    border-bottom: 1px solid #dbeafe;
    margin: 0;
    position: relative;
}
.ha-card.ha-dash-section .ha-card-header i {
    color: var(--ha-brand, #3b82f6);
    font-size: 20px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.ha-card.ha-dash-section .ha-card-title {
    color: #1e293b;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ha-card.ha-dash-section .ha-card-header .ha-spacer { flex: 1; }
.ha-card.ha-dash-section .ha-card-header .ha-link {
    color: var(--ha-brand, #3b82f6);
    font-size: var(--ha-text-xs);
    font-weight: 600;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease;
}
.ha-card.ha-dash-section .ha-card-header .ha-link:hover {
    color: #1e40af;
    background: rgba(59, 130, 246, 0.1);
}

/* Row / list items inside a dashboard section — neutral, data-first */
.ha-card.ha-dash-section .ha-dash-row {
    border-bottom: 1px dashed var(--ha-border);
    color: var(--ha-text);
}
.ha-card.ha-dash-section .ha-dash-row:hover {
    background: var(--ha-bg-subtle, #f8fafc);
}
.ha-card.ha-dash-section .ha-dash-row-meta {
    color: var(--ha-text-tertiary);
}
.ha-card.ha-dash-section .ha-dash-row-aside {
    color: var(--ha-text-secondary);
}

/* Empty states — muted gray check / icon, never neon green */
.ha-card.ha-dash-section .ha-empty-state {
    color: var(--ha-text-tertiary);
    padding: var(--ha-space-5) var(--ha-space-4);
}
.ha-card.ha-dash-section .ha-empty-state i {
    color: #cbd5e1;
    font-size: var(--ha-text-2xl);
    margin-bottom: 10px;
}
.ha-card.ha-dash-section .ha-empty-state p {
    margin: 0;
    font-size: var(--ha-text-sm);
}

/* Relationship Health tiles — mini versions of the KPI tiles above.
   Same deep navy family so they read as one cohesive dashboard
   language. A tiny colored dot beside the label carries the tone. */
.ha-dash-health-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0;
}
.ha-dash-health-tile {
    position: relative;
    padding: 16px 14px 14px;
    background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--ha-radius-md);
    text-align: left;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #fff;
}
.ha-dash-health-tile::after {
    content: '';
    position: absolute;
    top: -24px; right: -24px;
    width: 90px; height: 90px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.ha-dash-health-value {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ha-dash-health-label {
    margin-top: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ha-dash-health-label::before {
    /* Tiny tone dot — semantic signal without a loud pastel tile */
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}
.ha-dash-health-tile.tone-success .ha-dash-health-label::before { background: #34d399; color: rgba(52, 211, 153, 0.6); }
.ha-dash-health-tile.tone-warning .ha-dash-health-label::before { background: #fbbf24; color: rgba(251, 191, 36, 0.6); }
.ha-dash-health-tile.tone-danger  .ha-dash-health-label::before { background: #f87171; color: rgba(248, 113, 113, 0.6); }

/* Force section bodies to have padding since we removed it from the
   card itself (so the header bar can be flush with the edges). */
.ha-card.ha-dash-section > [id$="-body"] {
    padding: var(--ha-space-4);
}

.ha-dash-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--ha-space-4);
}

.ha-dash-row {
    display: flex;
    align-items: center;
    gap: var(--ha-space-3);
    padding: 10px 0;
    border-bottom: 1px dashed var(--ha-border);
    cursor: pointer;
    transition: background 0.12s;
}
.ha-dash-row:last-child { border-bottom: 0; }
.ha-dash-row:hover { background: #f8fafc; margin: 0 -8px; padding: 10px 8px; border-radius: 6px; }
.ha-dash-row-main { flex: 1; min-width: 0; }
.ha-dash-row-title { font-weight: var(--ha-weight-medium); font-size: var(--ha-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-dash-row-meta { font-size: var(--ha-text-xs); color: var(--ha-text-tertiary); margin-top: 3px; }
.ha-dash-row-aside { font-size: var(--ha-text-xs); white-space: nowrap; flex-shrink: 0; }

@media (max-width: 1200px) {
    .ha-dash-kpis { grid-template-columns: repeat(3, 1fr); }
    .ha-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ha-dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .ha-dash-kpi-card .kpi-value { font-size: 26px; }
}

/* =================== Plasma loading FX =================== */
.ha-fx-loader-overlay {
    position: fixed; inset: 0; z-index: 30000;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(to bottom, #4b8be8 0%, #2557b3 35%, #1a3a7a 70%, #0f172a 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.ha-fx-loader-overlay.active { opacity: 1; }
.ha-fx-loader-overlay.active .ha-fx-loader-box {
    animation: ha-fx-spring-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.ha-fx-loader-overlay.fade-out .ha-fx-loader-box {
    animation: ha-fx-spring-out 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
.ha-fx-loader-overlay.fade-out { opacity: 0; transition: opacity 0.4s ease 0.15s; }

.ha-fx-loader-box {
    text-align: center;
    padding: 48px;
    transform: scale(0.3);
    opacity: 0;
    position: relative;
}
.ha-fx-loader-box canvas {
    border-radius: 50%;
    display: block;
    margin: 0 auto 20px;
    width: 380px; height: 380px;
}
.ha-fx-loader-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -18px;
    width: 110px; height: 110px;
    background: rgba(255,255,255,0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 10px 40px rgba(37, 99, 235, 0.35);
    animation: ha-fx-icon-float 3s ease-in-out infinite;
    font-size: 42px;
}
.ha-fx-loader-title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.ha-fx-loader-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.65);
    min-height: 22px;
    transition: opacity 0.3s ease;
}

@keyframes ha-fx-spring-in {
    0%   { transform: scale(0.3)  rotate(-5deg);   opacity: 0; }
    50%  { transform: scale(1.12) rotate(2deg);    opacity: 1; }
    70%  { transform: scale(0.95) rotate(-1deg); }
    85%  { transform: scale(1.03) rotate(0.5deg); }
    100% { transform: scale(1)    rotate(0deg);    opacity: 1; }
}
@keyframes ha-fx-spring-out {
    0%   { transform: scale(1);    opacity: 1; }
    30%  { transform: scale(1.08); opacity: 0.9; }
    100% { transform: scale(0.2) rotate(10deg); opacity: 0; }
}
@keyframes ha-fx-icon-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-6px); }
}

@media (max-width: 480px) {
    .ha-fx-loader-box canvas { width: 280px; height: 280px; }
    .ha-fx-loader-icon { width: 88px; height: 88px; font-size: 34px; }
    .ha-fx-loader-title { font-size: 22px; }
}

/* =================== Image resize handles (rich editor) =================== */
.ha-img-frame {
    display: inline-block;
    position: relative;
    line-height: 0;
}
.ha-img-frame.selected {
    outline: 2px solid var(--ha-primary);
    outline-offset: 2px;
}
.ha-img-frame img {
    display: inline-block;
    max-width: 100%;
}
.ha-img-resize-handle {
    display: none;
    position: absolute;
    width: 12px; height: 12px;
    background: var(--ha-primary);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 3;
}
.ha-img-frame.selected .ha-img-resize-handle { display: block; }
.ha-img-resize-handle[data-corner="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
.ha-img-resize-handle[data-corner="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
.ha-img-resize-handle[data-corner="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.ha-img-resize-handle[data-corner="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; }

/* Kanban card hover tooltip */
.ha-kanban-tooltip {
    position: fixed;
    z-index: 25000;
    background: #0f172a;
    color: #f1f5f9;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 12px;
    max-width: 320px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.12s, transform 0.12s;
    line-height: 1.45;
}
.ha-kanban-tooltip.show { opacity: 1; transform: translateY(0); }
.ha-kanban-tooltip .ttl-line { margin-bottom: 5px; }
.ha-kanban-tooltip .ttl-line:last-of-type { margin-bottom: 0; }
.ha-kanban-tooltip .ttl-label {
    color: #94a3b8;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-right: 6px;
}
.ha-kanban-tooltip ul { margin: 4px 0 0; padding-left: 16px; }
.ha-kanban-tooltip li {
    list-style: none;
    margin: 3px 0;
    position: relative;
    padding-left: 2px;
}
.ha-kanban-tooltip li::before {
    content: '○';
    position: absolute;
    left: -14px;
    color: #64748b;
}
.ha-kanban-tooltip li.done::before { content: '✓'; color: #22c55e; }
.ha-kanban-tooltip li.done { color: #94a3b8; text-decoration: line-through; }
.ha-kanban-tooltip .portal-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #334155;
}
.ha-kanban-tooltip .portal-row i.eye-dark { color: #22c55e; font-size: 14px; }
.ha-kanban-tooltip .portal-row i.eye-grey { color: #475569; font-size: 14px; }
.ha-kanban-tooltip .portal-row .portal-label {
    font-weight: 600;
    color: #cbd5e1;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.06em;
}
.ha-kanban-tooltip .portal-row .portal-state { color: #94a3b8; font-size: 11px; }

/* Rich text editor */
.ha-rich-editor-wrap {
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-sm);
    background: var(--ha-surface);
    overflow: hidden;
}
.ha-rich-toolbar {
    display: flex; flex-wrap: wrap; gap: 2px;
    padding: 6px 8px;
    background: #f8fafc;
    border-bottom: 1px solid var(--ha-border);
}
.ha-rich-toolbar button {
    border: 1px solid transparent;
    background: transparent;
    padding: 5px 9px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--ha-text-secondary);
    font-size: var(--ha-text-sm);
    min-width: 30px;
    line-height: 1;
    transition: all 0.12s ease;
}
.ha-rich-toolbar button:hover {
    background: var(--ha-surface);
    border-color: var(--ha-border);
    color: var(--ha-text-primary);
}
.ha-rich-toolbar button.active {
    background: var(--ha-primary-light);
    color: var(--ha-primary-dark);
    border-color: var(--ha-primary-light);
}
.ha-rich-toolbar .sep {
    width: 1px;
    background: var(--ha-border);
    margin: 2px 4px;
}
.ha-rich-editor[contenteditable="true"] {
    min-height: 140px;
    max-height: 400px;
    overflow-y: auto;
    padding: var(--ha-space-3);
    font-size: var(--ha-text-sm);
    line-height: 1.55;
    outline: none;
    resize: vertical;
}
.ha-rich-editor[contenteditable="true"]:focus { background: #fffef8; }
.ha-rich-editor p { margin: 0 0 8px; }
.ha-rich-editor ul, .ha-rich-editor ol { margin: 0 0 8px; padding-left: 24px; }
.ha-rich-editor li { margin-bottom: 2px; }
.ha-rich-editor a { color: var(--ha-primary); text-decoration: underline; }
.ha-rich-editor img { max-width: 100%; height: auto; border-radius: var(--ha-radius-sm); margin: 4px 0; }
.ha-rich-editor code { background: #f1f5f9; padding: 1px 5px; border-radius: 3px; font-family: var(--ha-font-mono, monospace); font-size: 0.9em; }
.ha-rich-editor pre { background: #0f172a; color: #e2e8f0; padding: 10px; border-radius: var(--ha-radius-sm); overflow-x: auto; font-family: var(--ha-font-mono, monospace); font-size: 0.85em; }
.ha-rich-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--ha-text-tertiary);
    pointer-events: none;
}
.ha-rich-source {
    width: 100%;
    min-height: 180px;
    padding: var(--ha-space-3);
    border: 0;
    outline: none;
    font-family: var(--ha-font-mono, monospace);
    font-size: 12px;
    background: #0f172a;
    color: #e2e8f0;
    resize: vertical;
}

/* Autocomplete list — positioned via JS to float over modals */
.ha-autocomplete-list.ha-autocomplete-floating {
    position: fixed;
    z-index: 20000;
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-sm);
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(17,24,39,0.15);
}
.ha-autocomplete-floating .ha-autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--ha-text-sm);
}
.ha-autocomplete-floating .ha-autocomplete-item:hover {
    background: var(--ha-primary-light);
    color: var(--ha-primary-dark);
}

/* ===================================================================
   THEME OVERRIDES — Botson Code shell and modals
   The Botson shell was authored dark-first; the Templates and Commands
   modals were authored light-first. This block makes both honor the
   app theme toggle cleanly.
   =================================================================== */

/* ---------- Botson shell: LIGHT MODE override ----------
   The outside frame (sidebar + botson topbar) is a darker grey so
   the eye pulls to the paler center where the user works. Visual
   hierarchy: darker-grey frame → pale-grey work area → white cards. */
:root:not([data-theme="dark"]) .botson-shell {
    background: #f1f5f9;
    color: #0f172a;
}
:root:not([data-theme="dark"]) .botson-sidebar {
    background: #dde3eb;
    border-right-color: #c7d0dc;
}
:root:not([data-theme="dark"]) .botson-sidebar-head,
:root:not([data-theme="dark"]) .botson-sidebar-tabs {
    border-bottom-color: #e2e8f0;
}
:root:not([data-theme="dark"]) .botson-tab { color: #64748b; }
:root:not([data-theme="dark"]) .botson-tab:hover { color: #0f172a; }
:root:not([data-theme="dark"]) .botson-tab.active { color: #0b0ffe; border-bottom-color: #0b0ffe; }

:root:not([data-theme="dark"]) .botson-search input {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}
:root:not([data-theme="dark"]) .botson-conv-item {
    background: transparent;
    border-color: transparent;
    color: #0f172a;
}
:root:not([data-theme="dark"]) .botson-conv-item:hover { background: #f1f5f9; }
:root:not([data-theme="dark"]) .botson-conv-item.active {
    background: #eff6ff;
    border-color: #60a5fa;
    color: #0f172a;
}
:root:not([data-theme="dark"]) .botson-conv-title { color: #0f172a; }
:root:not([data-theme="dark"]) .botson-conv-meta { color: #64748b; }

:root:not([data-theme="dark"]) .botson-topbar {
    background: #dde3eb;
    border-bottom: 1px solid #c7d0dc;
    color: #0f172a;
}
:root:not([data-theme="dark"]) .botson-session-title { color: #0f172a; }
:root:not([data-theme="dark"]) .botson-model-select,
:root:not([data-theme="dark"]) .botson-topbar select {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #e2e8f0;
}
:root:not([data-theme="dark"]) .botson-canvas-toggle {
    color: #475569;
    background: #f1f5f9;
    border-color: #e2e8f0;
}
:root:not([data-theme="dark"]) .botson-canvas-toggle:hover {
    background: #e2e8f0;
    color: #0f172a;
}

:root:not([data-theme="dark"]) .botson-workdir-bar {
    background: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

:root:not([data-theme="dark"]) .botson-messages { background: #f1f5f9; }
:root:not([data-theme="dark"]) .botson-empty-chat { color: #64748b; }
:root:not([data-theme="dark"]) .botson-welcome { color: #0f172a; }
:root:not([data-theme="dark"]) .botson-welcome h1 { color: #0f172a; }
:root:not([data-theme="dark"]) .botson-welcome p { color: #64748b; }

:root:not([data-theme="dark"]) .botson-msg {
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
:root:not([data-theme="dark"]) .botson-msg-user {
    background: var(--ha-brand-soft);
    border-color: #bfdbfe;
    border-left: 3px solid var(--ha-brand);
}
:root:not([data-theme="dark"]) .botson-msg-ai {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
:root:not([data-theme="dark"]) .botson-msg-user .botson-msg-role { color: var(--ha-brand); }
:root:not([data-theme="dark"]) .botson-msg-ai .botson-msg-role { color: var(--ha-brand); }

/* Model tag next to BOTSON — pill in the light-blue quick-action style */
:root:not([data-theme="dark"]) .botson-msg-model {
    background: var(--ha-brand-soft);
    color: var(--ha-brand);
    border: 1px solid #bfdbfe;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
}

/* Message footer action buttons (thumbs + Explain/Refactor/Follow up)
   — same light-blue pill treatment as the composer quick-action chips. */
:root:not([data-theme="dark"]) .botson-msg-actions {
    border-top-color: #e2e8f0;
}
:root:not([data-theme="dark"]) .botson-act-btn {
    background: var(--ha-brand-soft);
    color: var(--ha-brand);
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 5px 12px;
    font-weight: 600;
}
:root:not([data-theme="dark"]) .botson-act-btn:hover {
    background: var(--ha-brand);
    color: var(--ha-brand-ink);
    border-color: var(--ha-brand);
}
:root:not([data-theme="dark"]) .botson-rate-btn {
    background: var(--ha-brand-soft);
    color: var(--ha-brand);
    border: 1px solid #bfdbfe;
    border-radius: 999px;
}
:root:not([data-theme="dark"]) .botson-rate-btn:hover { background: var(--ha-brand); color: #fff; border-color: var(--ha-brand); }
:root:not([data-theme="dark"]) .botson-rate-btn.active.up {
    background: rgba(16, 185, 129, 0.12);
    border-color: #10b981;
    color: #059669;
}
:root:not([data-theme="dark"]) .botson-rate-btn.active.down {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
    color: #b91c1c;
}
:root:not([data-theme="dark"]) .botson-msg-tokens { color: #94a3b8; }

/* Composer inner bar — darker grey surface with white icons and gold
   "commands" accent. Replaces the too-white default in light mode. */
:root:not([data-theme="dark"]) .botson-composer-inner {
    background: #334155;
    border-color: #1e293b;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}
:root:not([data-theme="dark"]) .botson-composer-inner:focus-within {
    border-color: var(--ha-brand);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}
:root:not([data-theme="dark"]) .botson-composer-inner textarea {
    color: #f1f5f9;
}
:root:not([data-theme="dark"]) .botson-composer-inner textarea::placeholder { color: #94a3b8; }
:root:not([data-theme="dark"]) .botson-cmd-btn { color: #f1f5f9; }
:root:not([data-theme="dark"]) .botson-cmd-btn:hover {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}
/* The lightning-bolt commands button pops gold to signal its special role */
:root:not([data-theme="dark"]) #botson-commands-btn,
:root:not([data-theme="dark"]) .botson-cmd-btn[title*="ommand"] {
    color: #fbbf24;
}
:root:not([data-theme="dark"]) .botson-msg-body { color: #0f172a; }
:root:not([data-theme="dark"]) .botson-msg-body strong { color: #0f172a; }
:root:not([data-theme="dark"]) .botson-msg-body a { color: var(--ha-brand); }
:root:not([data-theme="dark"]) .botson-msg-body h1,
:root:not([data-theme="dark"]) .botson-msg-body h2,
:root:not([data-theme="dark"]) .botson-msg-body h3 { color: #0f172a; }
:root:not([data-theme="dark"]) .botson-msg-head { color: #64748b; }
:root:not([data-theme="dark"]) .botson-msg-avatar {
    background: var(--ha-brand);
    color: #fff;
}
:root:not([data-theme="dark"]) .botson-msg-role { color: #64748b; }
:root:not([data-theme="dark"]) .botson-msg-model { color: #94a3b8; }
:root:not([data-theme="dark"]) .botson-msg-body code {
    background: #f1f5f9;
    color: #0f172a;
}

/* Note: the older light-mode composer/textarea overrides that used
   to live here (white composer bar + pale gray textarea) have been
   deleted. The authoritative light-mode composer styles are the
   brand-gradient ones near the bottom of this file — they set the
   composer to the brand blue and the textarea to transparent with
   white text, which reads correctly against the gradient. Leaving
   the old `#f8fafc` textarea background in place collided with the
   later `color: #fff` rule and produced white-on-white invisibility. */

:root:not([data-theme="dark"]) .botson-canvas {
    background: #fff;
    border-left: 1px solid #e2e8f0;
    color: #0f172a;
}
:root:not([data-theme="dark"]) .botson-canvas-head {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
}
:root:not([data-theme="dark"]) .botson-canvas-title { color: #0f172a; }
:root:not([data-theme="dark"]) .botson-canvas-act { color: #475569; }
:root:not([data-theme="dark"]) .botson-canvas-act:hover { background: #e2e8f0; color: #0f172a; }
:root:not([data-theme="dark"]) .botson-canvas-empty { color: #94a3b8; }
:root:not([data-theme="dark"]) .botson-canvas-code {
    background: #f8fafc;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}
:root:not([data-theme="dark"]) .botson-canvas-tabs { border-bottom-color: #e2e8f0; }
:root:not([data-theme="dark"]) .botson-canvas-tab { color: #64748b; }
:root:not([data-theme="dark"]) .botson-canvas-tab:hover { color: #0f172a; }
:root:not([data-theme="dark"]) .botson-canvas-tab.active {
    color: #0b0ffe;
    border-bottom-color: #0b0ffe;
}

:root:not([data-theme="dark"]) .botson-code-block {
    background: #f8fafc;
    border-color: #e2e8f0;
}
:root:not([data-theme="dark"]) .botson-code-head {
    background: rgba(11, 15, 254, 0.05);
    color: #1e40af;
    border-bottom-color: #e2e8f0;
}
:root:not([data-theme="dark"]) .botson-code-pre {
    color: #0f172a;
}
:root:not([data-theme="dark"]) .botson-code-block.collapsed .botson-code-pre::after {
    background: linear-gradient(to bottom, rgba(248,250,252,0), rgba(248,250,252,1));
}
:root:not([data-theme="dark"]) .botson-code-btn {
    background: #fff;
    color: #475569;
    border-color: #e2e8f0;
}
:root:not([data-theme="dark"]) .botson-code-btn:hover {
    background: #0b0ffe;
    color: #fff;
    border-color: #0b0ffe;
}

:root:not([data-theme="dark"]) .botson-art-strip {
    background: #f8fafc;
    border-color: #e2e8f0;
}
:root:not([data-theme="dark"]) .botson-art-tab { color: #64748b; }
:root:not([data-theme="dark"]) .botson-art-tab:hover {
    background: rgba(11, 15, 254, 0.08);
    color: #0f172a;
}
:root:not([data-theme="dark"]) .botson-art-tab.active {
    background: #0b0ffe;
    color: #fff;
}
:root:not([data-theme="dark"]) .botson-art-tab-lang {
    background: rgba(15, 23, 42, 0.08);
}

:root:not([data-theme="dark"]) .botson-selection-bar {
    background: #fff;
    color: #0f172a;
    border-color: #e2e8f0;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
}
:root:not([data-theme="dark"]) .botson-selection-count { color: #0b0ffe; }

:root:not([data-theme="dark"]) .botson-msg-select {
    background: #fff;
    border-color: #cbd5e1;
}
:root:not([data-theme="dark"]) .botson-msg-select.checked {
    background: #0b0ffe;
    color: #fff;
    border-color: #0b0ffe;
}
:root:not([data-theme="dark"]) .botson-msg.selected {
    background: rgba(11, 15, 254, 0.06);
}

/* Tool accordions in light mode */
:root:not([data-theme="dark"]) .botson-tool-head { color: #475569; }
:root:not([data-theme="dark"]) .botson-tool-head .tool-chip { color: #0f172a; }

/* ---------- Templates modal + Commands palette: DARK MODE override ---------- */
[data-theme="dark"] .botson-template-card {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
[data-theme="dark"] .botson-template-card:hover {
    background: #0f172a;
    border-color: #3b82f6;
    box-shadow: 0 4px 14px rgba(11, 15, 254, 0.3);
}
[data-theme="dark"] .botson-template-card.active {
    background: rgba(11, 15, 254, 0.25);
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}
[data-theme="dark"] .botson-template-title { color: #f1f5f9; }
[data-theme="dark"] .botson-template-desc { color: #94a3b8; }
[data-theme="dark"] .botson-template-mode {
    background: #334155;
    color: #cbd5e1;
}
[data-theme="dark"] .botson-template-mode.mode-code { background: rgba(30, 58, 138, 0.5); color: #93c5fd; }
[data-theme="dark"] .botson-template-mode.mode-chat { background: rgba(22, 101, 52, 0.5); color: #86efac; }

[data-theme="dark"] .botson-cmd-search-wrap > i { color: #64748b; }
[data-theme="dark"] .botson-cmd-search-wrap input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] .botson-cmd-search-wrap input:focus {
    background: #0f172a !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
[data-theme="dark"] .botson-cmd-search-wrap kbd {
    background: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .botson-cmd-group-head {
    border-bottom-color: #334155;
    color: #cbd5e1;
}
[data-theme="dark"] .botson-cmd-item {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
[data-theme="dark"] .botson-cmd-item:hover {
    background: #0f172a;
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
}
[data-theme="dark"] .botson-cmd-title { color: #f1f5f9; }
[data-theme="dark"] .botson-cmd-desc { color: #94a3b8; }
[data-theme="dark"] .botson-cmd-icon {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}
[data-theme="dark"] .botson-cmd-footer {
    border-top-color: #334155;
    color: #94a3b8;
}
[data-theme="dark"] .botson-cmd-footer kbd {
    background: #334155;
    color: #cbd5e1;
}

/* Attach chips in the composer strip (non-image files) */
.botson-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(11, 15, 254, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.35);
    color: #cbd5e1;
    border-radius: 8px;
    font-size: 12px;
    max-width: 260px;
}
.botson-attach-chip.uploading { opacity: 0.7; }
.botson-attach-chip.error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}
.botson-attach-chip .botson-attach-chip-name {
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.botson-attach-chip .botson-attach-chip-meta {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
}
.botson-attach-chip button {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.7;
}
.botson-attach-chip button:hover { opacity: 1; }

:root:not([data-theme="dark"]) .botson-attach-chip {
    background: var(--ha-brand-soft);
    border-color: #bfdbfe;
    color: #0f172a;
}
:root:not([data-theme="dark"]) .botson-attach-chip .botson-attach-chip-meta { color: #64748b; }
:root:not([data-theme="dark"]) .botson-attach-chip.error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* ===================================================================
   Launchpad — single visual hub for all features (Ctrl+K)
   =================================================================== */
.ha-launchpad-overlay {
    position: fixed; inset: 0; z-index: 29000;
    background: rgba(8, 15, 32, 0.78);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 24px 24px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.ha-launchpad-overlay.active { opacity: 1; }
.ha-launchpad-overlay.closing { opacity: 0; }

.ha-lp-box {
    width: 100%;
    max-width: 1100px;
    max-height: calc(100vh - 100px);
    background: var(--ha-bg);
    border: 1px solid var(--ha-border);
    border-radius: 16px;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.45);
    display: flex;
    flex-direction: column;
    transform: scale(0.96);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
.ha-launchpad-overlay.active .ha-lp-box { transform: scale(1); }

.ha-lp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--ha-brand-linear);
    color: #fff;
    border-bottom: 1px solid var(--ha-border);
}
.ha-lp-search-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.ha-lp-search-wrap > i:first-child {
    position: absolute;
    left: 14px;
    color: rgba(255, 255, 255, 0.75);
    pointer-events: none;
}
.ha-lp-search-wrap input {
    flex: 1;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    padding: 12px 60px 12px 42px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    outline: none;
}
.ha-lp-search-wrap input::placeholder { color: rgba(255, 255, 255, 0.7); }
.ha-lp-search-wrap input:focus {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.6);
}
.ha-lp-search-wrap kbd {
    position: absolute;
    right: 12px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-family: var(--ha-font-mono, monospace);
    pointer-events: none;
}
.ha-lp-close {
    width: 38px; height: 38px;
    border: 0;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.12s;
}
.ha-lp-close:hover { background: rgba(255, 255, 255, 0.28); }

.ha-lp-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
}
.ha-lp-group { margin-bottom: 28px; }
.ha-lp-group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--ha-brand);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ha-border);
}
.ha-lp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.ha-lp-tile {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    padding: 14px 16px;
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
    color: var(--ha-text-primary);
}
.ha-lp-tile:hover,
.ha-lp-tile.ha-lp-kb-active {
    transform: translateY(-2px);
    border-color: var(--ha-brand);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
}
.ha-lp-tile.ha-lp-kb-active {
    outline: 2px solid var(--ha-brand);
    outline-offset: 1px;
}
.ha-lp-tile.soon {
    opacity: 0.72;
    cursor: default;
}
.ha-lp-tile.soon:hover {
    transform: none;
    border-color: var(--ha-border);
    box-shadow: none;
}
.ha-lp-tile-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: var(--ha-brand-soft);
    color: var(--ha-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ha-lp-tile:hover .ha-lp-tile-icon {
    background: var(--ha-brand);
    color: #fff;
}
.ha-lp-tile-body { flex: 1; min-width: 0; }
.ha-lp-tile-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ha-text-primary);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ha-lp-tile-desc {
    font-size: 11px;
    color: var(--ha-text-secondary);
    line-height: 1.45;
}
/* Launchpad mobile polish — Ctrl+K is a hub Jason uses on his phone too,
   so keep the tile grid dense, drop the Esc kbd chip, and let the box
   fill the viewport instead of sitting inset 60px from the top. */
@media (max-width: 640px) {
    .ha-launchpad-overlay {
        padding: 12px 10px;
        align-items: stretch;
    }
    .ha-lp-box {
        max-height: calc(100vh - 24px);
        border-radius: 12px;
    }
    .ha-lp-head {
        padding: 10px 12px;
        gap: 8px;
    }
    .ha-lp-search-wrap input {
        padding: 11px 14px 11px 38px;
        font-size: 14px;
    }
    .ha-lp-search-wrap > i:first-child {
        left: 12px;
        font-size: 13px;
    }
    .ha-lp-search-wrap kbd { display: none; }
    .ha-lp-close {
        width: 34px; height: 34px;
        flex-shrink: 0;
    }
    .ha-lp-body {
        padding: 14px 14px 20px;
    }
    .ha-lp-group { margin-bottom: 20px; }
    .ha-lp-group-title { margin-bottom: 8px; padding-bottom: 6px; }
    .ha-lp-tiles {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ha-lp-tile {
        padding: 12px 14px;
        gap: 12px;
    }
    .ha-lp-tile-icon {
        width: 38px; height: 38px;
        font-size: 16px;
    }
    .ha-lp-tile-title { font-size: 14px; }
    .ha-lp-tile-desc { font-size: 11px; }
}

.ha-lp-tile-desc em {
    color: var(--ha-text-tertiary);
    font-style: normal;
}
.ha-lp-soon-chip {
    background: var(--ha-warning-light, #fef3c7);
    color: #854d0e;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ha-lp-foot {
    padding: 12px 20px;
    font-size: 11px;
    color: var(--ha-text-tertiary);
    border-top: 1px solid var(--ha-border);
    background: var(--ha-bg-secondary);
    text-align: center;
}
.ha-lp-foot kbd {
    background: var(--ha-bg-tertiary);
    border: 1px solid var(--ha-border);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--ha-font-mono, monospace);
    font-size: 10px;
}

/* ===================================================================
   HA.contextMenu — reusable right-click menu
   =================================================================== */
.ha-ctx-menu {
    position: fixed;
    z-index: 29800;
    min-width: 220px;
    background: var(--ha-bg);
    border: 1px solid var(--ha-border);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.04);
    padding: 6px;
    opacity: 0;
    transform: scale(0.94);
    transform-origin: top left;
    transition: opacity 0.14s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
.ha-ctx-menu.active { opacity: 1; transform: scale(1); }
.ha-ctx-menu.closing { opacity: 0; transform: scale(0.94); }

.ha-ctx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--ha-text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, color 0.1s;
}
.ha-ctx-item i {
    width: 16px;
    text-align: center;
    color: var(--ha-text-secondary);
    flex-shrink: 0;
}
.ha-ctx-item .ha-ctx-label { flex: 1; }
.ha-ctx-item kbd {
    background: var(--ha-bg-tertiary);
    border: 1px solid var(--ha-border);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-family: var(--ha-font-mono, monospace);
    color: var(--ha-text-tertiary);
}
.ha-ctx-item:hover {
    background: var(--ha-brand-soft);
    color: var(--ha-brand);
}
.ha-ctx-item:hover i { color: var(--ha-brand); }
.ha-ctx-item.ha-ctx-danger { color: #dc2626; }
.ha-ctx-item.ha-ctx-danger i { color: #dc2626; }
.ha-ctx-item.ha-ctx-danger:hover {
    background: #fef2f2;
    color: #991b1b;
}
.ha-ctx-item.ha-ctx-danger:hover i { color: #991b1b; }
.ha-ctx-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.ha-ctx-sep {
    height: 1px;
    background: var(--ha-border);
    margin: 6px 8px;
}

[data-theme="dark"] .ha-ctx-menu {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .ha-ctx-item.ha-ctx-danger:hover {
    background: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
}
[data-theme="dark"] .ha-ctx-item.ha-ctx-danger:hover i { color: #fca5a5; }

/* ===================================================================
   HA.confirm — polished lightbox replacement for native confirm()
   =================================================================== */
.ha-confirm-overlay {
    position: fixed; inset: 0; z-index: 29500;
    background: rgba(8, 15, 32, 0.72);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.ha-confirm-overlay.active { opacity: 1; }
.ha-confirm-overlay.closing { opacity: 0; }

.ha-confirm-box {
    width: 100%;
    max-width: 460px;
    background: var(--ha-bg, #fff);
    border: 1px solid var(--ha-border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.45);
    padding: 32px 32px 24px;
    text-align: center;
    transform: scale(0.4) rotate(-3deg);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
}
.ha-confirm-overlay.active .ha-confirm-box {
    transform: scale(1) rotate(0);
    opacity: 1;
}
.ha-confirm-overlay.closing .ha-confirm-box {
    transform: scale(0.4) rotate(2deg);
    opacity: 0;
    transition: transform 0.18s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.18s ease;
}

.ha-confirm-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: var(--ha-brand-soft, #eff6ff);
    color: var(--ha-brand, #2563eb);
    animation: haConfirmIconPulse 2s ease-in-out infinite;
}
.ha-confirm-overlay.variant-danger .ha-confirm-icon {
    background: #fef2f2;
    color: #dc2626;
}
.ha-confirm-overlay.variant-info .ha-confirm-icon {
    background: #ecfeff;
    color: #0891b2;
}
@keyframes haConfirmIconPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.ha-confirm-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--ha-text-primary, #0f172a);
    margin: 0 0 8px;
}
.ha-confirm-body {
    font-size: 14px;
    color: var(--ha-text-secondary, #475569);
    line-height: 1.55;
    margin: 0 0 24px;
}
.ha-confirm-body strong { color: var(--ha-text-primary, #0f172a); }

.ha-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.ha-confirm-actions .ha-btn {
    min-width: 120px;
    padding: 10px 18px;
    font-weight: 600;
}

/* ===================================================================
   Compare models lightbox
   =================================================================== */
.ha-compare-overlay {
    position: fixed; inset: 0; z-index: 29000;
    background: rgba(8, 15, 32, 0.78);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.ha-compare-overlay.active { opacity: 1; }
.ha-compare-overlay.closing { opacity: 0; }

.ha-compare-box {
    width: 100%;
    max-width: 1400px;
    height: calc(100vh - 48px);
    background: var(--ha-bg);
    border: 1px solid var(--ha-border);
    border-radius: 16px;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96);
    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ha-compare-overlay.active .ha-compare-box { transform: scale(1); }

.ha-compare-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: var(--ha-brand-linear);
    color: #fff;
    flex-wrap: wrap;
}
.ha-compare-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}
.ha-compare-title i { font-size: 22px; }
.ha-compare-title h2 { margin: 0; font-size: 18px; font-weight: 700; }
.ha-compare-count {
    font-size: 11px;
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.18);
    padding: 3px 10px;
    border-radius: 999px;
}
.ha-compare-actions-top { display: flex; gap: 6px; }

.ha-compare-models {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid var(--ha-border);
    background: var(--ha-bg-secondary);
}
.ha-compare-model-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-right: 1px solid var(--ha-border);
}
.ha-compare-model-pick:last-child { border-right: 0; }
.ha-compare-model-pick label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ha-brand);
    min-width: 40px;
}
.ha-compare-model-pick select {
    flex: 1;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--ha-border);
    background: var(--ha-bg);
    color: var(--ha-text-primary);
    font-size: 13px;
    font-weight: 600;
}

.ha-compare-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    overflow: hidden;
}
.ha-compare-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--ha-border);
    min-height: 0;
    overflow: hidden;
}
.ha-compare-col:last-child { border-right: 0; }
.ha-compare-col-head {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ha-brand);
    background: var(--ha-brand-soft);
    border-bottom: 1px solid var(--ha-border);
    flex-shrink: 0;
}
.ha-compare-col-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--ha-bg);
}

.ha-compare-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--ha-text-tertiary);
    font-size: 13px;
}

.ha-compare-msg {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--ha-border);
    background: var(--ha-surface);
}
.ha-compare-msg.ha-compare-user {
    background: var(--ha-brand-soft);
    border-color: #bfdbfe;
}
.ha-compare-msg-role {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ha-brand);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ha-compare-msg-role.ha-compare-err { color: #dc2626; }
.ha-compare-msg-body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ha-text-primary);
    white-space: pre-wrap;
}
.ha-compare-tokens {
    background: rgba(100, 116, 139, 0.15);
    color: var(--ha-text-tertiary);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-family: var(--ha-font-mono, monospace);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.ha-compare-composer {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--ha-border);
    background: var(--ha-bg-secondary);
}
.ha-compare-composer textarea {
    flex: 1;
    border: 1px solid var(--ha-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    background: var(--ha-bg);
    color: var(--ha-text-primary);
    resize: none;
    outline: none;
    transition: border-color 0.15s;
}
.ha-compare-composer textarea:focus {
    border-color: var(--ha-brand);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ===================================================================
   Memory Manager lightbox
   =================================================================== */
.ha-memory-overlay {
    position: fixed; inset: 0; z-index: 29000;
    background: rgba(8, 15, 32, 0.78);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 24px 24px;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.ha-memory-overlay.active { opacity: 1; }
.ha-memory-overlay.closing { opacity: 0; }

.ha-memory-box {
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 100px);
    background: var(--ha-bg, #fff);
    border: 1px solid var(--ha-border);
    border-radius: 16px;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.45);
    display: flex;
    flex-direction: column;
    transform: scale(0.94);
    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
.ha-memory-overlay.active .ha-memory-box { transform: scale(1); }

.ha-memory-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: var(--ha-brand-linear);
    color: #fff;
    border-bottom: 1px solid var(--ha-border);
    flex-wrap: wrap;
}
.ha-memory-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}
.ha-memory-title i {
    font-size: 22px;
    opacity: 0.95;
}
.ha-memory-title h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}
.ha-memory-count {
    font-size: 11px;
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.18);
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 4px;
}
.ha-memory-actions-top {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ha-memory-actions-top .ha-input {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    min-width: 220px;
}
.ha-memory-actions-top .ha-input::placeholder { color: rgba(255, 255, 255, 0.7); }

.ha-memory-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
}

.ha-memory-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ha-border);
    transition: background 0.15s;
}
.ha-memory-row:hover { background: var(--ha-bg-secondary); }
.ha-memory-row:last-child { border-bottom: 0; }

.ha-memory-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ha-text-primary);
    outline: none;
    padding: 4px 6px;
    border-radius: 4px;
}
.ha-memory-text[contenteditable="true"] {
    background: var(--ha-brand-soft);
    box-shadow: 0 0 0 2px var(--ha-brand);
}
.ha-memory-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    color: var(--ha-text-tertiary);
    min-width: 120px;
    align-items: flex-end;
    text-align: right;
}
.ha-memory-cat {
    background: var(--ha-brand-soft);
    color: var(--ha-brand);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ha-memory-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ha-memory-foot {
    padding: 12px 20px;
    font-size: 11px;
    color: var(--ha-text-tertiary);
    border-top: 1px solid var(--ha-border);
    background: var(--ha-bg-secondary);
    text-align: center;
}

/* Sources used footer under each assistant reply */
.botson-msg-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    padding: 8px 0 0;
    border-top: 1px dashed #1e293b;
    font-size: 11px;
}
.botson-sources-label {
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
}
.botson-source-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(100, 116, 139, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(100, 116, 139, 0.3);
    font-family: var(--ha-font-mono, monospace);
    cursor: pointer;
    transition: all 0.12s;
}
.botson-source-pill:hover { transform: translateY(-1px); }
.botson-source-pill em { font-style: normal; opacity: 0.7; }
.botson-source-pill.tool-crm  { background: rgba(16, 185, 129, 0.14); color: #34d399; border-color: rgba(16, 185, 129, 0.4); }
.botson-source-pill.tool-fs   { background: rgba(59, 130, 246, 0.14); color: #60a5fa; border-color: rgba(59, 130, 246, 0.4); }
.botson-source-pill.tool-bash { background: rgba(15, 23, 42, 0.3);   color: #cbd5e1; border-color: rgba(100, 116, 139, 0.4); }
.botson-source-pill.tool-sql  { background: rgba(139, 92, 246, 0.14); color: #a78bfa; border-color: rgba(139, 92, 246, 0.4); }
.botson-source-pill.tool-web  { background: rgba(6, 182, 212, 0.14);  color: #22d3ee; border-color: rgba(6, 182, 212, 0.4); }
.botson-source-pill.tool-mem0 { background: rgba(236, 72, 153, 0.14); color: #f472b6; border-color: rgba(236, 72, 153, 0.4); }

:root:not([data-theme="dark"]) .botson-msg-sources { border-top-color: #e2e8f0; }
:root:not([data-theme="dark"]) .botson-sources-label { color: #94a3b8; }
:root:not([data-theme="dark"]) .botson-source-pill {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}
:root:not([data-theme="dark"]) .botson-source-pill.tool-crm  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
:root:not([data-theme="dark"]) .botson-source-pill.tool-fs   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
:root:not([data-theme="dark"]) .botson-source-pill.tool-bash { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
:root:not([data-theme="dark"]) .botson-source-pill.tool-sql  { background: #faf5ff; color: #6d28d9; border-color: #ddd6fe; }
:root:not([data-theme="dark"]) .botson-source-pill.tool-web  { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
:root:not([data-theme="dark"]) .botson-source-pill.tool-mem0 { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }

/* Session brand slot (client logo) left of the session title */
.botson-session-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 4px;
}
.botson-session-brand-logo {
    height: 26px;
    max-width: 120px;
    object-fit: contain;
    /* Re-color the logo to match the brand accent on the topbar. This
       means every uploaded client logo (black, white, or colored) reads
       as a monochrome accent. Dark mode flips to white via filter. */
    filter: brightness(0) invert(0) opacity(0.85);
}
[data-theme="dark"] .botson-session-brand-logo {
    filter: brightness(0) invert(1) opacity(0.9);
}
.botson-session-brand-sep {
    color: var(--ha-text-tertiary);
    opacity: 0.5;
    font-weight: 300;
    font-size: 16px;
}
.botson-session-brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.botson-session-title {
    transition: color 0.15s;
}
.botson-session-title:hover { color: var(--ha-brand); }
.botson-session-edit-btn {
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.15s;
    padding: 6px 10px !important;
    width: auto !important;
}
.botson-topbar:hover .botson-session-edit-btn { opacity: 1; transform: translateX(0); }

/* Privacy toggle in the Botson topbar */
.botson-privacy-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 8px;
}
.botson-privacy-toggle .label { line-height: 1; }
.botson-privacy-toggle.is-private {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
}
.botson-privacy-toggle.is-shared {
    background: rgba(16, 185, 129, 0.14) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
.botson-privacy-toggle:hover { filter: brightness(1.1); }

/* Session tag chips on conversation rows */
.botson-conv-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
    vertical-align: middle;
}
.botson-conv-tag.tag-personal  { background: rgba(236, 72, 153, 0.14); color: #db2777; }
.botson-conv-tag.tag-work      { background: rgba(37, 99, 235, 0.14);  color: #1d4ed8; }
.botson-conv-tag.tag-learning  { background: rgba(139, 92, 246, 0.14); color: #6d28d9; }
.botson-conv-tag.tag-company   { background: rgba(16, 185, 129, 0.14); color: #047857; }
.botson-conv-tag.tag-contact   { background: rgba(245, 158, 11, 0.14); color: #b45309; }

/* Private session visual lock */
.botson-conv-item.private .botson-conv-icon {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #dc2626 !important;
}

/* Voice recorder modal */
.botson-rec-box {
    text-align: center;
    padding: var(--ha-space-5) var(--ha-space-4) var(--ha-space-4);
}
.botson-rec-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #cbd5e1;
    margin: 0 auto var(--ha-space-3);
    transition: background 0.2s;
}
.botson-rec-dot.active {
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: botsonRecPulse 1.4s ease-in-out infinite;
}
@keyframes botsonRecPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    50%      { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); }
}
.botson-rec-time {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--ha-text-primary);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}
.botson-rec-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--ha-text-secondary);
    margin-bottom: 4px;
}
.botson-rec-stats {
    font-size: 11px;
    color: var(--ha-text-tertiary);
    font-family: var(--ha-font-mono, monospace);
    margin-bottom: var(--ha-space-5);
}
.botson-rec-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: var(--ha-space-4);
    flex-wrap: wrap;
}
.botson-rec-help {
    font-size: 11px;
    color: var(--ha-text-tertiary);
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
    padding: 10px 14px;
    background: var(--ha-bg-tertiary);
    border-radius: 6px;
}

/* Drop highlight when dragging files over the composer or message area */
.botson-drop-active {
    outline: 2px dashed var(--ha-brand);
    outline-offset: -6px;
    background: rgba(11, 15, 254, 0.04);
}

/* Inline PDF card — renders inside assistant replies for [PDF: …](url) links */
.botson-pdf-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 0;
    padding: 14px 16px;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-left: 4px solid #dc2626;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.botson-pdf-card:hover {
    background: rgba(220, 38, 38, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.18);
}
.botson-pdf-card-icon {
    width: 42px; height: 42px;
    border-radius: 8px;
    background: #dc2626;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.botson-pdf-card-body { flex: 1; min-width: 0; }
.botson-pdf-card-title {
    font-size: 14px;
    font-weight: 700;
    color: inherit;
    margin-bottom: 2px;
}
.botson-pdf-card-meta {
    font-size: 11px;
    color: #94a3b8;
}
.botson-pdf-card-arrow {
    color: #dc2626;
    opacity: 0.6;
    flex-shrink: 0;
}
.botson-pdf-card:hover .botson-pdf-card-arrow { opacity: 1; }

:root:not([data-theme="dark"]) .botson-pdf-card-meta { color: #64748b; }

/* Canvas PDF iframe */
.botson-canvas-pdf-frame {
    min-height: 600px;
    background: #fff;
}

/* ===================================================================
   Botson light-mode polish — specific callouts + brand-cohesion pass
   =================================================================== */

/* Model dropdown: in light mode make it a real white/light control
   instead of the dark-on-dark it inherited from the shell. */
:root:not([data-theme="dark"]) .botson-topbar select,
:root:not([data-theme="dark"]) select#botson-model-select {
    background: #fff !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 32px 8px 12px;
    border-radius: 8px;
    font-weight: 400;
    font-size: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
:root:not([data-theme="dark"]) .botson-topbar select:hover { border-color: var(--ha-brand); color: #0f172a !important; }

/* Topbar icon buttons (PDF, email, select, brain, canvas) — make them
   feel like part of the brand family rather than stray dark chips. */
:root:not([data-theme="dark"]) .botson-canvas-toggle {
    background: var(--ha-brand-soft);
    color: var(--ha-brand);
    border: 1px solid #dbeafe;
    width: 36px; height: 36px;
    border-radius: 8px;
}
:root:not([data-theme="dark"]) .botson-canvas-toggle:hover {
    background: var(--ha-brand);
    color: var(--ha-brand-ink);
    border-color: var(--ha-brand);
}
:root:not([data-theme="dark"]) .botson-canvas-toggle.active {
    background: var(--ha-brand);
    color: var(--ha-brand-ink);
    border-color: var(--ha-brand);
}

/* Composer — lighter, friendlier bar in light mode. Pale blue gradient
   wash matches the topbar family but reads clearly on a light background. */
/* Composer bar: brand-gradient background so it visually ties to the
   topbar and the New Session button, with white icons and a white send
   button that flips the contrast. Same treatment for light + dark. */
:root:not([data-theme="dark"]) .botson-composer {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border-top: 1px solid #bfdbfe;
}
:root:not([data-theme="dark"]) .botson-composer-inner {
    background: var(--ha-brand-linear);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.28), 0 1px 2px rgba(15, 23, 42, 0.08);
}
:root:not([data-theme="dark"]) .botson-composer-inner:focus-within {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.42), 0 0 0 3px rgba(59, 130, 246, 0.22);
}
:root:not([data-theme="dark"]) .botson-composer-inner textarea {
    color: #ffffff;
}
:root:not([data-theme="dark"]) .botson-composer-inner textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
:root:not([data-theme="dark"]) .botson-cmd-btn {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
:root:not([data-theme="dark"]) .botson-cmd-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fbbf24;
}
/* The lightning-bolt commands button is always gold for affordance */
:root:not([data-theme="dark"]) #botson-commands-btn,
:root:not([data-theme="dark"]) .botson-cmd-btn[title*="ommand"] {
    color: #fbbf24;
}
/* Send button: white pill with the brand color for the arrow glyph so
   it pops against the blue bar instead of blending in. */
:root:not([data-theme="dark"]) .botson-send-btn {
    background: #ffffff !important;
    color: var(--ha-brand) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2), inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}
:root:not([data-theme="dark"]) .botson-send-btn:hover {
    background: #f1f5f9 !important;
    filter: none;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28), inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}
:root:not([data-theme="dark"]) .botson-composer-meta { color: #64748b; }

/* Quick-action chips above composer (Explain/Fix Bug/etc.) — light blue
   pills in light mode instead of the dark-pill-on-light default. */
:root:not([data-theme="dark"]) .botson-quick-prompts button {
    background: var(--ha-brand-soft);
    color: var(--ha-brand);
    border: 1px solid #bfdbfe;
    font-weight: 600;
}
:root:not([data-theme="dark"]) .botson-quick-prompts button:hover {
    background: var(--ha-brand);
    color: var(--ha-brand-ink);
    border-color: var(--ha-brand);
}

/* Workdir Change + New folder buttons — adopt the same light-blue pill
   + hover-to-brand styling as the Explain/Fix Bug/Refactor chips so
   they're visible in light mode and give the same roll-over effect. */
:root:not([data-theme="dark"]) .botson-workdir-bar .workdir-change {
    background: var(--ha-brand-soft);
    color: var(--ha-brand);
    border: 1px solid #bfdbfe;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
:root:not([data-theme="dark"]) .botson-workdir-bar .workdir-change:hover {
    background: var(--ha-brand);
    color: var(--ha-brand-ink);
    border-color: var(--ha-brand);
    transform: translateY(-1px);
}
:root:not([data-theme="dark"]) .botson-workdir-bar .workdir-change i { font-size: 10px; }

/* =============================================================================
   Folder picker lightbox
   ============================================================================= */
.ha-folder-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 29000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ha-space-4);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.ha-folder-picker-overlay.open { opacity: 1; }
.ha-folder-picker-overlay.closing { opacity: 0; }
.ha-folder-picker-card {
    width: min(620px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--ha-surface);
    border-radius: var(--ha-radius-lg);
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
    transform: scale(0.94);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ha-folder-picker-overlay.open .ha-folder-picker-card { transform: scale(1); }
.ha-folder-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--ha-brand-gradient-deep);
    color: #fff;
}
.ha-folder-picker-head h3 { color: #fff; font-size: 16px; font-weight: 700; }
.ha-folder-picker-head h3 i { color: #60a5fa; margin-right: 8px; }
.ha-folder-picker-head .ha-btn { color: #fff; }
.ha-folder-picker-head .ha-btn:hover { background: rgba(255, 255, 255, 0.15); }
.ha-folder-picker-breadcrumbs {
    padding: 10px 18px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--ha-border);
    font-size: var(--ha-text-xs);
    color: var(--ha-text-secondary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}
.ha-folder-crumb {
    background: transparent;
    border: 0;
    color: var(--ha-brand);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
}
.ha-folder-crumb:hover { background: #dbeafe; }
.ha-folder-crumb-sep { color: var(--ha-text-tertiary); padding: 0 2px; }
.ha-folder-picker-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.ha-folder-picker-list { display: flex; flex-direction: column; gap: 2px; }
.ha-folder-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: var(--ha-text);
    font-size: var(--ha-text-sm);
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ha-folder-picker-item:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    transform: translateX(2px);
}
.ha-folder-picker-item .fa-folder {
    color: #fbbf24;
    font-size: 18px;
}
.ha-folder-picker-item .name { flex: 1; }
.ha-folder-picker-item .fa-chevron-right {
    color: var(--ha-text-tertiary);
    font-size: 11px;
}
.ha-folder-picker-empty {
    padding: var(--ha-space-7) var(--ha-space-4);
    text-align: center;
    color: var(--ha-text-tertiary);
}
.ha-folder-picker-empty i {
    font-size: 40px;
    color: #cbd5e1;
    margin-bottom: 10px;
}
.ha-folder-picker-newrow {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    background: #fefce8;
    border-top: 1px solid #fde68a;
    border-bottom: 1px solid #fde68a;
}
.ha-folder-picker-newrow .ha-input { flex: 1; }
.ha-folder-picker-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--ha-border);
    background: var(--ha-surface);
}
.ha-folder-picker-selected {
    font-size: var(--ha-text-xs);
    color: var(--ha-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.ha-folder-picker-selected code {
    background: #f1f5f9;
    color: var(--ha-text);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

/* Folder picker mobile — drop fixed width, tighten padding */
@media (max-width: 640px) {
    .ha-folder-picker-overlay { padding: 10px; }
    .ha-folder-picker-card { max-height: calc(100vh - 20px); border-radius: 10px; }
    .ha-folder-picker-head { padding: 12px 14px; }
    .ha-folder-picker-head h3 { font-size: 14px; }
    .ha-folder-picker-breadcrumbs { padding: 8px 12px; }
    .ha-folder-picker-body { padding: 6px; }
    .ha-folder-picker-item { padding: 12px; font-size: 13px; }
    .ha-folder-picker-foot {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 6px;
    }
    .ha-folder-picker-selected { order: -1; width: 100%; max-width: none; }
    .ha-folder-picker-foot .ha-btn { flex: 1; min-width: 0; }
}

/* Skill / Pin picker modals mobile */
@media (max-width: 640px) {
    .ha-skill-picker-list { max-height: calc(100vh - 240px); }
    .ha-skill-picker-item { padding: 10px 12px; gap: 10px; }
    .ha-skill-picker-name { font-size: 13px; }
    .ha-skill-picker-desc { font-size: 11px; }
}

/* Shortcut sheet mobile — single column, tighter spacing */
@media (max-width: 640px) {
    .ha-shortcut-overlay { padding: 10px; }
    .ha-shortcut-card { max-height: calc(100vh - 20px); }
    .ha-shortcut-head { padding: 12px 14px; }
    .ha-shortcut-head h3 { font-size: 14px; }
    .ha-shortcut-module { padding: 12px 14px 14px; }
    .ha-shortcut-module-head { font-size: 14px; }
    .ha-shortcut-module-summary { font-size: 12px; }
    .ha-shortcut-body {
        padding: 14px;
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .ha-shortcut-keys { min-width: 80px; }
    .ha-kbd { font-size: 11px; padding: 1px 6px; }
}

/* Forgot-password lightbox mobile */
@media (max-width: 640px) {
    .ha-forgot-overlay { padding: 12px; }
    .ha-forgot-card { padding: 28px 22px 24px; border-radius: 12px; }
    .ha-forgot-header { padding-bottom: 18px; margin-bottom: 18px; }
    .ha-forgot-logo-img { height: 54px; }
    .ha-forgot-wordmark { font-size: 22px; }
}

/* Login card mobile — smaller pad, smaller logo */
@media (max-width: 640px) {
    .ha-login-card { padding: 30px 24px 24px; }
    .ha-login-header { padding-bottom: 20px; margin-bottom: 20px; }
    .ha-login-logo-img { height: 70px; }
    .ha-login-wordmark { font-size: 24px; }
    .ha-login-developed { font-size: 11px; }
    .ha-login-splash-img { height: 96px; }
    .ha-login-splash-wordmark { font-size: 32px; }
    .ha-login-splash-orbits { width: 280px; height: 280px; top: -20px; }
}

/* Empty-state rocket / "Ready when you are" — darker heading + subtler
   body, with a light brand pill for the `/` key hint. */
:root:not([data-theme="dark"]) .botson-empty-chat { color: #475569; }
:root:not([data-theme="dark"]) .botson-empty-chat h3 {
    color: #0f172a;
    font-weight: 700;
}
:root:not([data-theme="dark"]) .botson-empty-chat p { color: #475569; }
:root:not([data-theme="dark"]) .botson-empty-chat kbd,
:root:not([data-theme="dark"]) .botson-msg-body kbd {
    background: var(--ha-brand-soft);
    color: var(--ha-brand);
    border: 1px solid #bfdbfe;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
}

/* Sidebar session rows — drop the dark chat-bubble disc in light mode,
   use a flat tonal square instead, and add a divider under New Session. */
:root:not([data-theme="dark"]) .botson-sidebar-head {
    border-bottom: 1px solid #e2e8f0;
}
:root:not([data-theme="dark"]) .botson-conv-icon,
:root:not([data-theme="dark"]) .botson-conv-item > i.fas.fa-comment,
:root:not([data-theme="dark"]) .botson-conv-item > .botson-conv-bubble {
    background: var(--ha-brand-soft) !important;
    color: var(--ha-brand) !important;
    border: 1px solid #dbeafe;
    border-radius: 8px;
}
:root:not([data-theme="dark"]) .botson-conv-item {
    border-radius: 10px;
    transition: background 0.12s, border-color 0.12s;
}
:root:not([data-theme="dark"]) .botson-conv-item:hover { background: var(--ha-brand-soft); }
:root:not([data-theme="dark"]) .botson-conv-item.active {
    background: var(--ha-brand-soft);
    border: 1px solid #bfdbfe;
    box-shadow: inset 3px 0 0 var(--ha-brand);
}

/* Botson welcome heading — clearer in light mode */
:root:not([data-theme="dark"]) .botson-welcome h1 {
    background: var(--ha-brand-linear);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}
:root:not([data-theme="dark"]) .botson-welcome p { color: #475569; }

/* Dark-mode composer polish to match the brand cohesion */
[data-theme="dark"] .botson-composer {
    background: linear-gradient(180deg, #0b1220 0%, #050811 100%);
}
[data-theme="dark"] .botson-send-btn,
:root:not([data-theme="dark"]) .botson-send-btn {
    background: var(--ha-brand-linear);
}

/* ===================================================================
   Global micro-interaction polish — subtle hover/focus/glow pass
   Classy, not over the top. Jason's rule.
   =================================================================== */

/* Card hover lift — every plain card rises slightly on hover */
.ha-card {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s ease;
}
.ha-card:not(.ha-card-static):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.06);
}
[data-theme="dark"] .ha-card:not(.ha-card-static):hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Primary button — sweep highlight on hover + subtle press feedback */
.ha-btn-primary {
    position: relative;
    overflow: hidden;
}
.ha-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.ha-btn-primary:hover::before { left: 140%; }
.ha-btn-primary:hover { transform: translateY(-1px); }
.ha-btn-primary:active { transform: translateY(0); transition: transform 0.05s; }

/* Secondary / danger buttons get a subtle lift */
.ha-btn-secondary:hover,
.ha-btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.ha-btn-secondary,
.ha-btn-danger {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon buttons scale their icons on hover (unless already wired elsewhere) */
.ha-btn i {
    transition: transform 0.15s ease;
}
.ha-btn:hover i {
    transform: scale(1.08);
}

/* Form input focus — brand-aware ring that fades in */
.ha-input:focus {
    border-color: var(--ha-brand);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transition: border-color 0.12s ease, box-shadow 0.18s ease;
}

/* Table row hover — subtle fill instead of flat background */
.ha-table tbody tr {
    transition: background 0.12s ease;
}
.ha-table tbody tr:hover {
    background: var(--ha-brand-soft) !important;
}
[data-theme="dark"] .ha-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.08) !important;
}

/* Clickable rows (the pattern used in entity cross-views) get a lift */
.ha-clickable-row {
    transition: transform 0.14s ease, background 0.12s ease;
}
.ha-clickable-row:hover {
    transform: translateX(2px);
}

/* Modal overlay backdrop fade + spring-in for all showModal calls */
.ha-modal-overlay {
    animation: haModalBackdropFade 0.2s ease-out;
}
.ha-modal-overlay .ha-modal {
    animation: haModalSpringIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes haModalBackdropFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes haModalSpringIn {
    0%   { opacity: 0; transform: scale(0.88) translateY(8px); }
    60%  { opacity: 1; transform: scale(1.02) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Subtle glow on interactive active elements */
.ha-tab-btn.active {
    position: relative;
}
.ha-tab-btn.active::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 2px;
    background: var(--ha-brand-linear);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.45);
    animation: haTabActiveIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes haTabActiveIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Badge/pill entrance on render */
.ha-badge {
    transition: transform 0.12s ease;
}
.ha-badge:hover { transform: scale(1.04); }

/* Link polish — smooth color transition */
a:not(.ha-btn):not(.ha-sidebar-item):not(.botson-msg-body a) {
    transition: color 0.12s ease;
}

/* Topbar bell + theme + logout buttons get a subtle background lift */
.ha-topbar-right .ha-btn:hover,
.ha-topbar-left .ha-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-1px);
}

/* Respect prefers-reduced-motion — disable all animations for users who
   have motion reduction enabled at the OS level. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Segmented control (Settings → General theme + sound) */
.ha-seg {
    display: inline-flex;
    background: var(--ha-bg-secondary, #f1f5f9);
    border: 1px solid var(--ha-border);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}
.ha-seg-btn {
    background: transparent;
    border: 0;
    color: var(--ha-text-secondary);
    padding: 8px 18px;
    border-radius: 7px;
    font-size: var(--ha-text-sm);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.ha-seg-btn:hover { color: var(--ha-text); }
.ha-seg-btn.active {
    background: var(--ha-surface);
    color: var(--ha-brand);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* =============================================================================
   Branding tab — logo preview area. Uses the same brand gradient as
   the topbar/sidebar, and renders the uploaded logo with the same
   invert+screen chroma-key so Jason sees a live preview of how it
   will read on the actual header.
   ============================================================================= */
.ha-branding-logo-preview {
    width: 260px;
    height: 130px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--ha-space-2);
    padding: 12px 18px;
    background: var(--ha-brand-gradient-deep);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}
.ha-branding-logo-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(96, 165, 250, 0.22) 0%, transparent 60%);
    pointer-events: none;
}
.ha-branding-logo-preview-img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    height: 80px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* =============================================================================
   Login page — centered card over a deep atmospheric navy field. Clean
   spacing between fields, logo + tagline header, outside-card "developed
   by" footer.
   ============================================================================= */
.ha-login-page {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ha-space-5);
    background:
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(59, 130, 246, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 50%, #1e3a8a 0%, #0f172a 55%, #020617 100%);
    overflow: hidden;
    isolation: isolate;
}
/* Matrix rain canvas sits between the gradient and the card */
.ha-login-matrix {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: screen;
}
/* Subtle vignette at the edges */
.ha-login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
    z-index: 0;
}

.ha-login-center {
    position: relative;
    z-index: 2;
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    animation: ha-login-spring-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ha-login-spring-in {
    0%   { transform: translateY(18px) scale(0.96); opacity: 0; }
    60%  { transform: translateY(-2px) scale(1.01); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.ha-login-card {
    width: 100%;
    padding: 40px 38px 32px;
    background:
        linear-gradient(180deg, rgba(30, 58, 138, 0.72) 0%, rgba(15, 23, 42, 0.78) 100%);
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 14px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ha-login-header {
    text-align: center;
    padding-bottom: 28px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ha-login-logo-img {
    display: block;
    margin: 0 auto 14px;
    height: 92px;
    width: auto;
    max-width: 80%;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
}
.ha-login-wordmark {
    margin: 0 0 10px;
    font-family: var(--ha-font-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 2px 16px rgba(59, 130, 246, 0.35);
    text-align: center;
}
.ha-login-tagline {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-align: center;
}

.ha-login-field {
    margin-bottom: 20px;
}
.ha-login-field:last-of-type {
    margin-bottom: 26px;
}
.ha-login-label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ha-login-input {
    width: 100%;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 14px 16px;
    font-size: 14px;
    border-radius: 8px;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    font-family: inherit;
}
.ha-login-input::placeholder { color: rgba(255, 255, 255, 0.28); }
.ha-login-input:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.6);
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}
.ha-login-password-wrap {
    position: relative;
}
.ha-login-password-wrap .ha-login-input {
    padding-right: 44px;
}
.ha-login-eye {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 14px;
    transition: color 0.18s, background 0.18s;
}
.ha-login-eye:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.ha-login-submit {
    position: relative;
    display: block;
    width: 100%;
    padding: 14px 18px;
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(59, 130, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, filter 0.2s;
    margin-bottom: 18px;
    font-family: inherit;
    overflow: hidden;
    isolation: isolate;
}
.ha-login-submit .ha-login-submit-label {
    position: relative;
    z-index: 2;
}
/* Periodic metallic shine sweep — a diagonal highlight runs edge to edge
   every few seconds to make the button feel alive. */
.ha-login-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 60%,
        transparent 100%
    );
    transform: translateX(-130%) skewX(-18deg);
    animation: ha-login-shine 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes ha-login-shine {
    0%   { transform: translateX(-130%) skewX(-18deg); }
    55%  { transform: translateX(-130%) skewX(-18deg); }
    75%  { transform: translateX(230%)  skewX(-18deg); }
    100% { transform: translateX(230%)  skewX(-18deg); }
}
.ha-login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    filter: brightness(1.05);
}
.ha-login-submit:hover::before {
    animation-duration: 1.8s;
}
.ha-login-submit:active {
    transform: translateY(0) scale(0.99);
}
.ha-login-submit:disabled {
    cursor: not-allowed;
    filter: grayscale(0.4) brightness(0.85);
}

/* =============================================================================
   Login splash — full-screen brand ramp that plays for ~2.8s after a
   successful sign-in. Logo in the center, orbiting rings, caption,
   zoom-in → hold → zoom-out fade.
   ============================================================================= */
.ha-login-splash {
    position: fixed;
    inset: 0;
    z-index: 32000;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(96, 165, 250, 0.35) 0%, transparent 45%),
        linear-gradient(180deg, #3b82f6 0%, #1e3a8a 38%, #0f172a 72%, #020617 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    overflow: hidden;
    isolation: isolate;
}
.ha-login-splash.open { opacity: 1; }
.ha-login-splash.leaving { opacity: 0; transition: opacity 0.6s ease; }

.ha-login-splash-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    transform: scale(0.7);
    opacity: 0;
    transition:
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.55s ease;
}
.ha-login-splash.open .ha-login-splash-center {
    transform: scale(1);
    opacity: 1;
}
.ha-login-splash.leaving .ha-login-splash-center {
    transform: scale(1.18);
    opacity: 0;
    transition:
        transform 0.65s cubic-bezier(0.55, 0, 0.65, 0.25),
        opacity 0.5s ease;
}

.ha-login-splash-orbits {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 360px;
    height: 360px;
    pointer-events: none;
    z-index: 0;
}
.ha-login-splash-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.55) 0%, rgba(59, 130, 246, 0.2) 30%, transparent 65%);
    filter: blur(18px);
    animation: ha-splash-pulse 2.8s ease-in-out infinite;
}
@keyframes ha-splash-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.12); opacity: 1; }
}
.ha-login-splash-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(96, 165, 250, 0.4);
    box-shadow:
        0 0 30px rgba(59, 130, 246, 0.25) inset,
        0 0 20px rgba(96, 165, 250, 0.2);
}
.ha-login-splash-ring.ring-1 {
    inset: 10%;
    border-top-color: #60a5fa;
    border-right-color: rgba(96, 165, 250, 0.55);
    animation: ha-splash-spin 3.2s linear infinite;
}
.ha-login-splash-ring.ring-2 {
    inset: 22%;
    border-bottom-color: #3b82f6;
    border-left-color: rgba(59, 130, 246, 0.55);
    animation: ha-splash-spin 4.6s linear infinite reverse;
}
.ha-login-splash-ring.ring-3 {
    inset: 34%;
    border-top-color: rgba(147, 197, 253, 0.9);
    border-left-color: rgba(147, 197, 253, 0.4);
    animation: ha-splash-spin 6s linear infinite;
}
@keyframes ha-splash-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.ha-login-splash-logo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 0 24px;
}
.ha-login-splash-img {
    display: block;
    height: 140px;
    width: auto;
    max-width: 80vw;
    object-fit: contain;
    filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.55));
}
.ha-login-splash-wordmark {
    font-family: var(--ha-font-display, sans-serif);
    font-weight: 800;
    font-size: 48px;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 28px rgba(59, 130, 246, 0.6);
}

.ha-login-splash-caption {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 8px;
}
.ha-login-splash-dots {
    display: inline-block;
    margin-left: 2px;
}
.ha-login-splash-dots span {
    display: inline-block;
    opacity: 0.3;
    animation: ha-splash-dots 1.4s ease-in-out infinite;
}
.ha-login-splash-dots span:nth-child(2) { animation-delay: 0.18s; }
.ha-login-splash-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ha-splash-dots {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-2px); }
}

/* Respect OS-level reduced-motion: collapse the rings + dots to static */
@media (prefers-reduced-motion: reduce) {
    .ha-login-splash-ring,
    .ha-login-splash-glow,
    .ha-login-splash-dots span { animation: none !important; }
}

/* =============================================================================
   Forgot password lightbox — zoom-in, styled like the login card
   ============================================================================= */
.ha-forgot-overlay {
    position: fixed;
    inset: 0;
    z-index: 31000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ha-space-4);
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.24s ease;
}
.ha-forgot-overlay.open { opacity: 1; }
.ha-forgot-overlay.closing { opacity: 0; }

.ha-forgot-card {
    position: relative;
    width: min(420px, 100%);
    padding: 36px 34px 30px;
    background: linear-gradient(180deg, rgba(30, 58, 138, 0.88) 0%, rgba(15, 23, 42, 0.92) 100%);
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 14px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #fff;
    backdrop-filter: blur(10px);
    transform: scale(0.82) rotate(-1deg);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}
.ha-forgot-overlay.open .ha-forgot-card {
    transform: scale(1) rotate(0);
    opacity: 1;
}
.ha-forgot-overlay.closing .ha-forgot-card {
    transform: scale(0.88) rotate(0);
    opacity: 0;
}
.ha-forgot-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, color 0.18s;
}
.ha-forgot-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.ha-forgot-header {
    text-align: center;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ha-forgot-logo-img {
    display: block;
    margin: 0 auto 10px;
    height: 64px;
    width: auto;
    max-width: 70%;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
}
.ha-forgot-wordmark {
    margin: 0 0 10px;
    font-family: var(--ha-font-display);
    font-weight: 800;
    font-size: 24px;
    color: #fff;
    text-shadow: 0 2px 16px rgba(59, 130, 246, 0.4);
}
.ha-forgot-subtitle {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.ha-forgot-body {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}
.ha-forgot-success {
    text-align: center;
    padding: 22px 12px;
    color: #fff;
}
.ha-forgot-success i {
    font-size: 42px;
    color: #34d399;
    margin-bottom: 12px;
    display: block;
    filter: drop-shadow(0 0 14px rgba(52, 211, 153, 0.5));
}
.ha-forgot-success p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.5;
}

.ha-login-forgot {
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.18s;
}
.ha-login-forgot:hover {
    color: #60a5fa;
    text-decoration: none;
}

.ha-login-error {
    display: none;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 13px;
}
.ha-login-error:not(:empty) { display: block; }

.ha-login-developed {
    color: rgba(255, 255, 255, 0.42);
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.02em;
}

/* =============================================================================
   Skills library — reusable prompt templates
   ============================================================================= */
.ha-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--ha-space-3);
}
.ha-skill-card {
    padding: var(--ha-space-4);
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-md);
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 150px;
}
.ha-skill-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.14);
    border-color: #bfdbfe;
}
.ha-skill-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ha-skill-slug {
    background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%);
    color: #fff;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}
.ha-skill-usage {
    font-size: 10px;
    color: var(--ha-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ha-skill-name {
    margin: 0;
    font-size: var(--ha-text-base);
    font-weight: 700;
    color: var(--ha-text);
}
.ha-skill-desc {
    margin: 0;
    font-size: var(--ha-text-xs);
    color: var(--ha-text-secondary);
}
.ha-skill-preview {
    margin: auto 0 0;
    font-size: 11px;
    color: var(--ha-text-tertiary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Jobs detail lightbox */
.ha-job-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.ha-job-detail-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ha-text);
    flex: 1;
}
.ha-job-detail-subtitle {
    color: var(--ha-text-secondary);
    font-size: var(--ha-text-sm);
    margin-bottom: var(--ha-space-4);
}
.ha-job-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 18px;
    padding: 14px;
    background: var(--ha-bg-subtle, #f8fafc);
    border: 1px solid var(--ha-border);
    border-radius: 8px;
    margin-bottom: var(--ha-space-4);
}
.ha-job-detail-grid label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ha-text-tertiary);
    margin-bottom: 4px;
}
.ha-job-detail-grid > div > div {
    font-size: var(--ha-text-sm);
    color: var(--ha-text);
    font-weight: 500;
}
.ha-job-detail-section { margin-bottom: var(--ha-space-4); }
.ha-job-detail-section label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ha-text-tertiary);
    margin-bottom: 6px;
}
.ha-job-detail-message {
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    color: var(--ha-text);
    font-size: var(--ha-text-sm);
}
.ha-job-detail-pre {
    margin: 0;
    padding: 12px 14px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.ha-job-detail-pre.ha-job-detail-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Skills picker (opened from Botson composer wand button) */
.ha-skill-picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
}
.ha-skill-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-md);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    font-family: inherit;
}
.ha-skill-picker-item:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    transform: translateX(2px);
}
.ha-skill-picker-body { flex: 1; min-width: 0; }
.ha-skill-picker-name {
    font-weight: 600;
    font-size: var(--ha-text-sm);
    color: var(--ha-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ha-skill-picker-desc {
    font-size: var(--ha-text-xs);
    color: var(--ha-text-tertiary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ha-skill-picker-usage {
    font-size: 10px;
    color: var(--ha-text-tertiary);
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}

/* =============================================================================
   Pinned Files library
   ============================================================================= */
.ha-pins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--ha-space-3);
}
.ha-pin-card {
    display: flex;
    align-items: center;
    gap: var(--ha-space-3);
    padding: var(--ha-space-3);
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-radius: var(--ha-radius-md);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.ha-pin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.12);
    border-color: #bfdbfe;
}
.ha-pin-card-link {
    display: flex;
    align-items: center;
    gap: var(--ha-space-3);
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.ha-pin-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%);
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.ha-pin-card-body {
    flex: 1;
    min-width: 0;
}
.ha-pin-card-name {
    font-weight: 600;
    font-size: var(--ha-text-sm);
    color: var(--ha-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 4px;
    transition: background 0.15s ease;
}
.ha-pin-card-name.editing {
    background: #fef9c3;
    color: #1e293b;
    outline: 2px solid #facc15;
    cursor: text;
    overflow: visible;
    white-space: normal;
}
.ha-pin-card-meta {
    font-size: var(--ha-text-xs);
    color: var(--ha-text-tertiary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================================================
   Keyboard shortcut cheat sheet — opened with `?`
   ============================================================================= */
.ha-shortcut-overlay {
    position: fixed; inset: 0; z-index: 28000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s ease;
    padding: var(--ha-space-4);
}
.ha-shortcut-overlay.open { opacity: 1; }
.ha-shortcut-overlay.closing { opacity: 0; }

.ha-shortcut-card {
    background: var(--ha-surface);
    color: var(--ha-text);
    border-radius: var(--ha-radius-lg);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    width: min(720px, 100%);
    max-height: 85vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: scale(0.94);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ha-shortcut-overlay.open .ha-shortcut-card { transform: scale(1); }
.ha-shortcut-overlay.closing .ha-shortcut-card { transform: scale(0.96); }

.ha-shortcut-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--ha-space-4) var(--ha-space-5);
    background: var(--ha-brand-linear, linear-gradient(180deg, #3b82f6, #1e3a8a));
    color: #fff;
}
.ha-shortcut-head h3 { color: #fff; }
.ha-shortcut-head .ha-btn { color: #fff; }
.ha-shortcut-head .ha-btn:hover { background: rgba(255, 255, 255, 0.15); }

/* Per-module help block at the top of the sheet */
.ha-shortcut-module {
    padding: 14px 22px 16px;
    background: #eff6ff;
    border-bottom: 1px solid #dbeafe;
}
.ha-shortcut-module-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ha-brand);
    margin-bottom: 6px;
}
.ha-shortcut-module-head i { font-size: 18px; }
.ha-shortcut-module-summary {
    margin: 0 0 8px;
    color: var(--ha-text);
    font-size: var(--ha-text-sm);
    line-height: 1.5;
}
.ha-shortcut-module-tips {
    margin: 0;
    padding-left: 18px;
    color: var(--ha-text-secondary);
    font-size: var(--ha-text-xs);
    line-height: 1.6;
}
.ha-shortcut-module-tips li { margin-bottom: 2px; }

.ha-shortcut-body {
    padding: var(--ha-space-5);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ha-space-5);
}
.ha-shortcut-group h4 {
    margin: 0 0 var(--ha-space-2);
    font-size: var(--ha-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ha-text-tertiary);
}
.ha-shortcut-rows {
    display: flex; flex-direction: column; gap: var(--ha-space-2);
}
.ha-shortcut-row {
    display: flex; align-items: center; gap: var(--ha-space-3);
    padding: var(--ha-space-2) 0;
}
.ha-shortcut-keys {
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0; min-width: 100px;
}
.ha-shortcut-plus {
    color: var(--ha-text-tertiary);
    font-size: var(--ha-text-xs);
    margin: 0 2px;
}
.ha-shortcut-desc {
    color: var(--ha-text-secondary);
    font-size: var(--ha-text-sm);
}
.ha-shortcut-foot {
    padding: var(--ha-space-3) var(--ha-space-5);
    border-top: 1px solid var(--ha-border);
    background: var(--ha-bg-subtle, rgba(0, 0, 0, 0.02));
}

.ha-kbd {
    display: inline-block;
    min-width: 22px;
    padding: 2px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--ha-text);
    background: var(--ha-surface);
    border: 1px solid var(--ha-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* ──────────────────────────────────────────────────────────────────────
   Topbar tenant-switcher overflow fix.

   The Switch tenant button has both an icon AND a "Switch tenant" text
   span. The default .ha-topbar-right .ha-btn rule force-sizes every
   right-side button to 40×40 (so the icon-only ones look uniform), but
   that crushes the text button — the span overflows and lands on top of
   the bell + theme + logout icons. Override to auto-width when the
   button has text content.
   ────────────────────────────────────────────────────────────────────── */
.ha-topbar-right { gap: var(--ha-space-2); flex-wrap: nowrap; }
.ha-topbar-right .ha-btn { flex-shrink: 0; }
.ha-topbar-right #ha-tenant-switcher-btn {
    width: auto;
    min-width: 40px;
    padding: 0 12px;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}
.ha-topbar-right #ha-tenant-switcher-btn .fas { font-size: 14px; }

/* ──────────────────────────────────────────────────────────────────────
   Botson Code — dark unified treatment in BOTH light + dark mode.

   Operator wants the chat surface to match the SPA's left sidebar:
   a deep navy → near-black gradient, with white-text/white-border
   pill buttons styled like the topbar icons. The light-mode default
   was too pale and the quick-prompt pills looked out of place. This
   block applies in BOTH themes (no :root selector) so the surface
   stays cohesive regardless of the user's light/dark toggle.
   ────────────────────────────────────────────────────────────────────── */

/* Roboto across the whole Botson Code surface — the operator prefers
   it over Inter for chat density. */
:root .botson-shell,
:root .botson-shell input,
:root .botson-shell textarea,
:root .botson-shell select,
:root .botson-shell button {
    font-family: 'Roboto', 'Inter', system-ui, -apple-system, sans-serif;
}

/* Sidebar — dark gradient matching .ha-sidebar */
:root .botson-shell .botson-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
    color: #e2e8f0;
}
:root .botson-shell .botson-sidebar-head { border-bottom-color: rgba(255,255,255,0.08); }
:root .botson-shell .botson-sidebar-tabs { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.08); }
:root .botson-shell .botson-tab {
    color: #94a3b8;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
}
:root .botson-shell .botson-tab:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
:root .botson-shell .botson-tab.active {
    background: rgba(255,255,255,0.10);
    color: #fff;
    border-color: rgba(255,255,255,0.18);
}
:root .botson-shell .botson-search input,
:root .botson-shell #botson-search {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #f1f5f9;
}
:root .botson-shell .botson-search input::placeholder { color: #64748b; }
:root .botson-shell .botson-conv-list { background: transparent; }
:root .botson-shell .botson-conv-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: #e2e8f0;
}
:root .botson-shell .botson-conv-item:hover { background: rgba(255,255,255,0.08); }
:root .botson-shell .botson-conv-item.active {
    background: rgba(11, 15, 254, 0.22);
    border-color: rgba(96, 165, 250, 0.42);
}
:root .botson-shell .botson-conv-title { color: #f1f5f9; }
:root .botson-shell .botson-conv-meta  { color: #94a3b8; }

/* Mute the conv-item icons. Default :root style was bright #60a5fa
   blue on a #1e293b square — too loud against the new dark sidebar.
   Operator wanted these to "blend" (their words) so the title +
   meta carry the visual weight. Now: subtle white-tint background,
   slate-400 icon. The .private variant override at line 4697 still
   wins for locked sessions (lock stays clearly visible). */
:root .botson-shell .botson-conv-icon {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}
:root .botson-shell .botson-conv-item.active .botson-conv-icon {
    background: rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
}

/* Topbar — same dark gradient. Smaller hamburger + smaller title
   per operator preference (about 20-25% reduction). */
:root .botson-shell .botson-topbar {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #f1f5f9;
    padding: 10px var(--ha-space-4);
}
:root .botson-shell .botson-hamburger {
    /* Was 34×34 — bring down to 26×26 (~24% smaller), thinner border,
       lighter weight icon to match the more refined sidebar look. */
    width: 26px; height: 26px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: #cbd5e1;
    font-size: 11px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
:root .botson-shell .botson-hamburger:hover { background: rgba(255,255,255,0.08); color: #fff; }
:root .botson-shell .botson-session-title {
    /* Was 14px — drop to 12px (~14% smaller). Roboto + 600 weight
       reads cleaner than Inter at this size. */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #f1f5f9;
}

/* Topbar action buttons (PDF / email / select / save / canvas) —
   white-text/white-border pills like the SPA topbar icons. */
:root .botson-shell .botson-canvas-toggle {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    color: #f1f5f9;
}
:root .botson-shell .botson-canvas-toggle:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-color: rgba(255,255,255,0.32);
}
:root .botson-shell .botson-topbar select,
:root .botson-shell .botson-model-pick select {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    color: #f1f5f9;
}

/* Composer (bottom toolbar) — dark gradient matching the topbar.
   The textarea sits inside .botson-composer-inner which carries the
   blue-to-black gradient; the outer .botson-composer is the darker
   black band the operator asked for. */
:root .botson-shell .botson-composer {
    background: #020617;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 12px var(--ha-space-4);
}
:root .botson-shell .botson-composer-inner {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
:root .botson-shell .botson-composer-inner:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.28);
}
:root .botson-shell .botson-composer-inner textarea,
:root .botson-shell #botson-input {
    color: #f1f5f9;
    background: transparent;
}
:root .botson-shell .botson-composer-inner textarea::placeholder,
:root .botson-shell #botson-input::placeholder {
    color: #94a3b8;
    font-style: italic;
}
:root .botson-shell .botson-cmd-btn { color: #cbd5e1; }
:root .botson-shell .botson-cmd-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }
:root .botson-shell .botson-composer-meta { color: #64748b; }

/* Quick-action pills (Explain / Fix Bug / Refactor / Add Tests / Document)
   — match the topbar icon-button look: white text on the dark composer,
   transparent fill with a thin white border, fills on hover. The light-
   blue pill style was too soft against the new dark surface. */
:root .botson-shell .botson-quick-prompts button {
    background: transparent;
    color: #f1f5f9;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
:root .botson-shell .botson-quick-prompts button:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

/* Conversation area — operator wants this kept LIGHT (it's where the
   actual chat content goes; dark made the chat hard to read). The
   surrounding chrome (sidebar, topbar, composer) stay dark. */
:root .botson-shell .botson-messages,
:root .botson-shell .botson-welcome {
    background: #f1f5f9;
    color: #0f172a;
}
:root .botson-shell .botson-welcome h1 { color: #0f172a; }
:root .botson-shell .botson-welcome p  { color: #475569; }

/* ──────────────────────────────────────────────────────────────────────
   Round-2 Botson Code redesign — operator feedback after first dark
   pass. Three asks:
   1. Composer outer band stays black (already done) but the inner
      input box should be the same blue→black gradient as the SPA
      header, not the previous flat dark navy. Width +300px so it
      fills more of the long composer band.
   2. Search-sessions input + Claude Sonnet 4.5 model dropdown should
      look like a selected conv-item pill: blue gradient bg, white
      border, white text — proud and active-feeling, not flat dark.
   3. Send arrow button should match the prominent New Session button
      style — bigger feel, brand gradient, drop shadow.
   ────────────────────────────────────────────────────────────────────── */

/* Composer inner — wide blue-to-black gradient, 1120px (was 820px) */
:root .botson-shell .botson-composer-inner {
    max-width: 1120px;
    background: linear-gradient(180deg, #1e3a8a 0%, #020617 100%);
    border: 1px solid rgba(96, 165, 250, 0.42);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
:root .botson-shell .botson-composer-meta { max-width: 1120px; }

/* Search-sessions input — blue gradient pill, white text */
:root .botson-shell .botson-search input,
:root .botson-shell #botson-search {
    background: linear-gradient(180deg, #1e3a8a 0%, #0b1c4d 100%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #f1f5f9;
    font-weight: 500;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 6px rgba(0, 0, 0, 0.35);
}
:root .botson-shell .botson-search input::placeholder,
:root .botson-shell #botson-search::placeholder {
    color: rgba(255, 255, 255, 0.62);
    font-style: italic;
}
:root .botson-shell .botson-search input:focus,
:root .botson-shell #botson-search:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.30);
    outline: none;
}

/* Model dropdown — same blue gradient pill treatment */
:root .botson-shell .botson-model-pick select,
:root .botson-shell #botson-model-select {
    background-image: linear-gradient(180deg, #1e3a8a 0%, #0b1c4d 100%);
    background-color: #1e3a8a;
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #f1f5f9;
    font-weight: 500;
    padding: 6px 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 6px rgba(0, 0, 0, 0.35);
}
:root .botson-shell .botson-model-pick select option,
:root .botson-shell #botson-model-select option {
    background: #0f172a;
    color: #f1f5f9;
}

/* Send arrow — match the prominent .botson-new-btn (brand-linear
   gradient, drop shadow, scale on hover). Still a square because
   it sits inside the composer-inner, but visually proud. */
:root .botson-shell .botson-send-btn {
    width: 40px; height: 40px;
    background: var(--ha-brand-linear);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(11, 15, 254, 0.45), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
    font-size: 16px;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
:root .botson-shell .botson-send-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(11, 15, 254, 0.6), 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
:root .botson-shell .botson-send-btn:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

/* Sidebar hide toggle — clicking the hamburger in the inner topbar
   now collapses the conversation sidebar entirely (desktop). The
   shell flips to a one-column grid so the chat area expands to fill.
   Smooth-transitioned by the existing 0.3s grid-template-columns
   rule on .botson-shell. */
:root .botson-shell.sidebar-hidden { grid-template-columns: 0 1fr 0; }
:root .botson-shell.sidebar-hidden.canvas-open { grid-template-columns: 0 1fr minmax(400px, 45%); }
:root .botson-shell.sidebar-hidden .botson-sidebar { display: none; }

/* Pagination footer for the conv list. Active sessions are paged at
   20 per page; prev/next pills + "Page X / Y" sit at the bottom of
   the sidebar so the list scroll stays manageable. */
:root .botson-shell .botson-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
:root .botson-shell .botson-pagination button {
    background: rgba(255, 255, 255, 0.10);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
:root .botson-shell .botson-pagination button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
}
:root .botson-shell .botson-pagination button:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}
:root .botson-shell .botson-pagination .botson-page-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.04em;
}


/* ════════════════════════════════════════════════════════════════════════
   Top-bar removal + sidebar dropup menu — 2026-04-28
   Replaces the entire former <header class="ha-topbar"> with a single
   tile at the bottom-left of the sidebar that expands a menu UPWARD
   on click. Pattern lifted from KCL Consulting's admin shell.

   What moved into the menu:
     - Notifications drawer trigger (+ unread count)
     - Switch tenant (agency mode only)
     - Running jobs (pulse + badge)
     - Theme toggle
     - Sound toggle
     - Keyboard shortcuts
     - Sign out

   The page content reclaims the full viewport vertical — every panel
   gets ~64px more breathing room.
   ════════════════════════════════════════════════════════════════════════ */

/* Hide the now-removed topbar selectors entirely so any stale
   reference paints nothing. Reset the layout var to 0 so any
   `calc(100vh - var(--ha-topbar-height))` math elsewhere still
   works without subtracting phantom pixels. */
:root { --ha-topbar-height: 0px; }
:root .ha-topbar { display: none !important; }
:root .ha-main { margin-top: 0; }
:root .ha-content { min-height: 100vh; }

/* Sidebar nav items — UPPERCASE per operator preference, with the
   tracked-out spacing that reads as deliberate rather than yelly. */
:root .ha-nav-item,
:root .ha-sidebar-nav a,
:root .ha-sidebar-nav button {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    font-weight: 600;
}

/* ───────── Sidebar foot wrapper (relative anchor for the menu) ───────── */
:root .ha-sidebar-foot {
    position: relative;
    margin-top: auto;            /* pin to bottom of the sidebar flex column */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 12px;
}

/* ───────── User tile (the menu trigger) ───────── */
:root .ha-user-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: #f1f5f9;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    text-align: left;
    position: relative;
}
:root .ha-user-tile:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}
:root .ha-user-tile:active { transform: scale(0.99); }
:root .ha-user-tile[aria-expanded="true"] {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.34);
}
:root .ha-user-tile-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 2px 6px rgba(0, 0, 0, 0.35);
}
:root .ha-user-tile-info { flex: 1; min-width: 0; }
:root .ha-user-tile-name {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:root .ha-user-tile-tenant {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:root .ha-user-tile-chev {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    transition: transform 0.2s;
}
:root .ha-user-tile[aria-expanded="true"] .ha-user-tile-chev {
    transform: rotate(180deg);
}
/* Unread-notification dot on the tile (visible when menu closed) */
:root .ha-user-tile-dot {
    position: absolute;
    top: 6px;
    left: 38px;        /* sits on the avatar's top-right */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dc2626;
    border: 2px solid #0b1220;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}
:root .ha-user-tile-dot[hidden] { display: none; }

/* ───────── Dropup menu ───────── */
:root .ha-dropup {
    position: absolute;
    bottom: calc(100% + 6px);   /* sit ABOVE the tile */
    left: 12px;
    right: 12px;
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    transform-origin: bottom center;
    pointer-events: none;
    transition:
        opacity   0.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.22s;
    z-index: 60;
}
:root .ha-dropup.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
        opacity   0.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}
:root .ha-dropup .menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: rgba(229, 231, 235, 0.95);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}
:root .ha-dropup .menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
:root .ha-dropup .menu-item i {
    width: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}
:root .ha-dropup .menu-item:hover i {
    color: #ffffff;
}
:root .ha-dropup .menu-item .label { flex: 1; }
:root .ha-dropup .menu-count {
    background: rgba(220, 38, 38, 0.85);
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
:root .ha-dropup .menu-item.danger { color: #fca5a5; }
:root .ha-dropup .menu-item.danger:hover { background: rgba(244, 63, 94, 0.18); color: #fecaca; }
:root .ha-dropup .menu-item.danger i { color: #fca5a5; }
:root .ha-dropup .menu-item.danger:hover i { color: #fecaca; }
:root .ha-dropup .menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 4px;
}

/* Impersonation banner — repositioned from topbar to sidebar */
:root #ha-impersonation-banner { display: flex !important; }
:root #ha-impersonation-banner[style*="display:none"] { display: none !important; }