/* GHOST Control — Military-Grade Command Terminal HUD Theme */

/* ===== CSS Custom Properties ===== */
:root {
    /* --- Cyan scale --- */
    --gc-cyan: #00E5FF;
    --gc-cyan-dim: #00cce6;
    --gc-cyan-deep: #00a3b8;
    --gc-cyan-glow: rgba(0, 229, 255, 0.5);
    --gc-cyan-subtle: rgba(0, 229, 255, 0.08);
    --gc-cyan-border: rgba(0, 229, 255, 0.25);
    /* --- Amber scale --- */
    --gc-amber: #f0a000;
    --gc-amber-dim: #c88500;
    --gc-amber-subtle: rgba(240, 160, 0, 0.1);
    --gc-amber-border: rgba(240, 160, 0, 0.25);
    /* --- Magenta scale --- */
    --gc-magenta: #e040fb;
    --gc-magenta-subtle: rgba(224, 64, 251, 0.1);
    --gc-magenta-border: rgba(224, 64, 251, 0.25);
    /* --- Status colors --- */
    --gc-red: #ef4444;
    --gc-red-subtle: rgba(239, 68, 68, 0.12);
    --gc-green: #22c55e;
    --gc-green-subtle: rgba(34, 197, 94, 0.12);
    --gc-blue: #60a5fa;
    --gc-blue-subtle: rgba(59, 130, 246, 0.12);
    --gc-purple: #a78bfa;
    --gc-purple-subtle: rgba(167, 139, 250, 0.12);
    --gc-yellow: #fbbf24;
    --gc-yellow-subtle: rgba(251, 191, 36, 0.12);
    /* --- Background scale (deep ink navy — matched to logo) --- */
    --gc-bg: #080C14;
    --gc-bg-1: #0B1018;
    --gc-bg-2: #101820;
    --gc-bg-3: #151D2A;
    --gc-bg-4: #1C2636;
    --gc-bg-surface: rgba(11, 16, 24, 0.75);
    --gc-bg-surface-hover: rgba(21, 29, 42, 0.8);
    /* --- Text scale --- */
    --gc-text-primary: #e8ecf0;
    --gc-text-secondary: #8899aa;
    --gc-text-tertiary: #4d5e6f;
    --gc-text-muted: #364050;
    /* --- Border scale --- */
    --gc-border: rgba(0, 229, 255, 0.12);
    --gc-border-subtle: rgba(77, 94, 111, 0.25);
    --gc-border-strong: rgba(0, 229, 255, 0.35);
    /* --- Font family --- */
    --gc-font-display: 'Rajdhani', sans-serif;
    --gc-font-body: 'Exo 2', sans-serif;
    --gc-font-mono: 'JetBrains Mono', monospace;
    /* --- Spacing scale (base 4px) --- */
    --gc-sp-1: 4px;
    --gc-sp-2: 8px;
    --gc-sp-3: 12px;
    --gc-sp-4: 16px;
    --gc-sp-5: 20px;
    --gc-sp-6: 24px;
    --gc-sp-8: 32px;
    --gc-sp-10: 40px;
    /* --- Radius --- */
    --gc-radius-sm: 4px;
    --gc-radius: 8px;
    --gc-radius-lg: 12px;
    --gc-radius-panel: 16px;
    /* --- Shadows --- */
    --gc-shadow-glow: 0 0 12px rgba(0, 229, 255, 0.15);
    --gc-shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.3);
    --gc-shadow-hover: 0 8px 32px rgba(0, 229, 255, 0.1);
    /* --- Transitions --- */
    --gc-transition: all 0.15s ease;
    --gc-transition-slow: all 0.3s ease;
    /* --- Legacy compat --- */
    --gc-text-sm: 0.875rem;
}

/* ===== Global resets ===== */
body {
    font-family: var(--gc-font-body);
    background: var(--gc-bg);
    color: var(--gc-text-primary);
}

/* Subtle grid pattern — HUD coordinate system */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.02) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Scanline overlay — extremely subtle */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 229, 255, 0.004) 2px,
        rgba(0, 229, 255, 0.004) 4px
    );
}

/* ===== Global scrollbar — HUD-themed (thin, cyan, glow on hover) ===== */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--gc-cyan-deep) transparent;
}

*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--gc-cyan-deep);
    border-radius: 2px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--gc-cyan-dim);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Ensure content is above overlays */
body > * {
    position: relative;
    z-index: 1;
}

/* ===== Glass card base (HUD panel with corner accents) ===== */
.glass {
    position: relative;
    background: var(--gc-bg-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius-lg);
}

/* Corner accent brackets — top-left */
.glass::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 12px;
    height: 12px;
    border-top: 2px solid rgba(0, 229, 255, 0.25);
    border-left: 2px solid rgba(0, 229, 255, 0.25);
    border-radius: var(--gc-radius-lg) 0 0 0;
    pointer-events: none;
    transition: border-color 0.2s;
}

/* Corner accent brackets — bottom-right */
.glass::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-bottom: 2px solid rgba(0, 229, 255, 0.25);
    border-right: 2px solid rgba(0, 229, 255, 0.25);
    border-radius: 0 0 var(--gc-radius-lg) 0;
    pointer-events: none;
    transition: border-color 0.2s;
}

.glass:hover {
    border-color: var(--gc-cyan-border);
}

.glass:hover::before,
.glass:hover::after {
    border-color: rgba(0, 229, 255, 0.5);
}

/* Active variant — glowing cyan border */
.glass--active {
    border-color: var(--gc-cyan-border);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.08);
}

.glass--active::before,
.glass--active::after {
    border-color: rgba(0, 229, 255, 0.5);
}

/* ===== Sidebar brand ===== */
.sidebar {
    background: var(--gc-bg-1);
    border-right: 1px solid var(--gc-border-subtle);
    box-shadow: 4px 0 24px rgba(0, 229, 255, 0.03);
}

.sidebar-brand {
    padding: 0;
    border-bottom: 1px solid var(--gc-border-subtle);
}

.sidebar-brand-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* GHOST text — pure CSS neon glow */
.sidebar-ghost-text {
    font-family: var(--gc-font-display);
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    color: var(--gc-cyan);
    margin: 0;
    padding-top: 14px;
    text-shadow:
        0 0 7px rgba(0, 229, 255, 0.8),
        0 0 15px rgba(0, 229, 255, 0.5),
        0 0 30px rgba(0, 229, 255, 0.3),
        0 0 50px rgba(0, 229, 255, 0.15);
    opacity: 0;
    animation: ghost-text-arrive 0.6s ease 0.1s forwards;
}

@keyframes ghost-text-arrive {
    from { opacity: 0; filter: blur(4px) brightness(1.3); }
    to   { opacity: 1; filter: blur(0) brightness(1); }
}

/* ---- CTRL typing line ---- */
.sidebar-ctrl-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: 12px;
}

.sidebar-ctrl-sep {
    display: block;
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.3), transparent);
}

.sidebar-ctrl-text {
    font-family: var(--gc-font-mono);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.4em;
    color: var(--gc-text-tertiary);
    text-transform: uppercase;
    display: inline-block;
    min-height: 1.1em;
}

/* Blinking terminal cursor */
.sidebar-ctrl-text::after {
    content: '\2588';
    font-size: 0.55rem;
    color: var(--gc-cyan);
    margin-left: 1px;
    animation: blink-cursor 0.6s step-end infinite;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gc-border-subtle);
}

.sidebar-version {
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    color: var(--gc-text-muted);
}

/* ===== Navigation links ===== */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    border-left: 2px solid transparent;
    color: var(--gc-text-secondary);
    font-family: var(--gc-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: var(--gc-transition);
    text-decoration: none;
}

.nav-link:hover {
    background: var(--gc-cyan-subtle);
    color: #b3fcfa;
    border-left-color: transparent;
}

.nav-link.active {
    background: transparent;
    color: var(--gc-cyan);
    border-left-color: var(--gc-cyan);
}

/* Nav section headers */
.nav-section {
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gc-text-muted);
    padding: 1rem 0.875rem 0.375rem;
    margin-top: 0.25rem;
}

/* ===== Status badges ===== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.badge-pending { background: rgba(234, 179, 8, 0.15); color: #fbbf24; }
.badge-running { background: rgba(59, 130, 246, 0.15); color: #60a5fa; animation: status-flicker 3s ease-in-out infinite; }
.badge-completed { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.badge-failed { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.badge-cancelled { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }

/* Running pulse animation */
.badge-running::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #60a5fa;
    margin-right: 6px;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* ===== Task cards ===== */
.task-card {
    transition: all 0.2s ease;
    cursor: pointer;
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 229, 255, 0.08);
}

/* ===== Template cards (legacy — kept for non-launcher uses) ===== */
.template-card {
    transition: all 0.2s ease;
    cursor: pointer;
}

.template-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 255, 0.4);
}

.template-card.selected {
    border-color: #00E5FF;
    background: rgba(0, 229, 255, 0.08);
}

/* ===== Skeleton loading ===== */
.skeleton {
    background: linear-gradient(90deg,
        rgba(55, 65, 81, 0.3) 25%,
        rgba(75, 85, 99, 0.3) 50%,
        rgba(55, 65, 81, 0.3) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
}

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

/* ===== Markdown output styles ===== */
.md-output {
    line-height: 1.7;
}

.md-output h1, .md-output h2, .md-output h3 {
    font-family: var(--gc-font-display);
    color: var(--gc-text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.md-output h1 { font-size: 1.5rem; }
.md-output h2 { font-size: 1.25rem; }
.md-output h3 { font-size: 1.1rem; }

.md-output p { margin-bottom: 0.75rem; }

.md-output ul, .md-output ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.md-output li { margin-bottom: 0.25rem; }

.md-output code:not(pre code) {
    background: var(--gc-cyan-subtle);
    padding: 0.125rem 0.375rem;
    border-radius: var(--gc-radius-sm);
    font-family: var(--gc-font-mono);
    font-size: 0.875em;
    color: #b3fcfa;
}

.md-output pre {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

.md-output pre code {
    background: none;
    padding: 0;
    font-family: var(--gc-font-mono);
    color: var(--gc-text-primary);
    font-size: 0.85rem;
}

.md-output a {
    color: var(--gc-cyan);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.md-output a:hover { color: #80f5f0; }

.md-output blockquote {
    border-left: 3px solid var(--gc-cyan-deep);
    padding-left: 1rem;
    color: var(--gc-text-secondary);
    margin-bottom: 0.75rem;
}

.md-output table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}

.md-output th, .md-output td {
    border: 1px solid rgba(75, 85, 99, 0.3);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.md-output th {
    background: rgba(55, 65, 81, 0.3);
    font-weight: 600;
}

/* Stream output (live typing) */
.stream-cursor::after {
    content: '|';
    animation: blink 0.8s ease-in-out infinite;
    color: var(--gc-cyan);
    margin-left: 2px;
}

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

/* ===== Toast notifications ===== */
.toast {
    position: relative;
    padding: 0.75rem 1rem;
    border-radius: var(--gc-radius);
    font-family: var(--gc-font-mono);
    font-size: 0.8125rem;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(75, 85, 99, 0.3);
    animation: slide-in 0.3s ease;
    max-width: 360px;
}

.toast-success { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.3); }
.toast-error { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); }
.toast-info { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.3); }

@keyframes slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ===== Sidebar responsive ===== */
@media (max-width: 1023px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
}

/* Icon mapping helper */
.icon-terminal::before { content: '\2318'; }
.icon-search::before { content: '\1F50D'; }
.icon-code::before { content: '</>'; }
.icon-edit::before { content: '\270E'; }

/* ===== Toggle switch ===== */
.toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: #374151;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle.active { background: #00a3b8; }

.toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle.active::after {
    transform: translateX(20px);
}

/* ===== Empty state ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--gc-text-tertiary);
}

.empty-state svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

/* ===== Tag chips ===== */
.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    background: rgba(55, 65, 81, 0.4);
    color: var(--gc-text-secondary);
    border: 1px solid var(--gc-border-subtle);
    cursor: pointer;
    transition: var(--gc-transition);
}

.tag-chip:hover {
    background: rgba(0, 229, 255, 0.1);
    color: #b3fcfa;
    border-color: rgba(0, 229, 255, 0.25);
}

.tag-chip.active {
    background: rgba(0, 229, 255, 0.15);
    color: #00E5FF;
    border-color: rgba(0, 229, 255, 0.4);
}

.tag-chip-sm {
    display: inline-flex;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 500;
    background: rgba(0, 229, 255, 0.1);
    color: #80f5f0;
}

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

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

/* ===== Research cards ===== */
.research-card {
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.research-card:hover {
    border-color: rgba(0, 229, 255, 0.3);
}

.research-detail {
    border-left: 3px solid var(--gc-cyan-dim);
    animation: fade-in 0.2s ease;
}

/* Contact card hover */
.contact-card {
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.contact-card:hover {
    border-color: rgba(0, 229, 255, 0.25);
}

/* ===== Contact Dossier (inline expand) ===== */
.contact-card.dossier-active {
    border-color: var(--gc-cyan-border);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.08), inset 0 0 20px rgba(0, 229, 255, 0.02);
    position: relative;
    z-index: 2;
}

.contact-dossier-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-dossier-wrap.open {
    grid-template-rows: 1fr;
}
.contact-dossier-wrap > .contact-dossier-inner {
    overflow: hidden;
    min-height: 0;
}

.contact-dossier {
    position: relative;
    margin: -1px 0 0 0;
    background: rgba(8, 12, 20, 0.88);
    border: 1px solid var(--gc-border);
    border-top: none;
    border-radius: 0 0 var(--gc-radius) var(--gc-radius);
    backdrop-filter: blur(20px);
    overflow: hidden;
}

/* Scanline sweep on open */
.contact-dossier::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gc-cyan) 30%, var(--gc-cyan) 70%, transparent 100%);
    box-shadow: 0 0 12px var(--gc-cyan-glow), 0 0 4px var(--gc-cyan);
    opacity: 0;
    z-index: 10;
    pointer-events: none;
}
.contact-dossier-wrap.open .contact-dossier::before {
    animation: dossier-scanline 0.6s 0.1s cubic-bezier(0.2, 0, 0.3, 1) forwards;
}
@keyframes dossier-scanline {
    0%   { top: 0; opacity: 1; }
    90%  { opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
}

/* Corner bracket accents */
.contact-dossier::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid transparent;
    border-image: linear-gradient(
        135deg,
        rgba(0, 229, 255, 0.12) 0%,
        transparent 20%,
        transparent 80%,
        rgba(0, 229, 255, 0.12) 100%
    ) 1;
    pointer-events: none;
}

/* Dossier header bar */
.dossier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid rgba(0, 229, 255, 0.05);
    background: rgba(0, 229, 255, 0.02);
}
.dossier-header-label {
    font-family: var(--gc-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(0, 229, 255, 0.45);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Animated pulse dot */
.dossier-header-label::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gc-cyan);
    box-shadow: 0 0 6px var(--gc-cyan-glow);
    animation: dossier-pulse 2s ease-in-out infinite;
}
@keyframes dossier-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.dossier-close-btn {
    background: none;
    border: none;
    color: var(--gc-text-tertiary);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.dossier-close-btn:hover {
    color: var(--gc-cyan);
    background: rgba(0, 229, 255, 0.06);
}

/* Identity block (avatar + name row) */
.dossier-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}
.dossier-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gc-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gc-cyan);
    background: rgba(0, 229, 255, 0.05);
    border: 1px solid rgba(0, 229, 255, 0.1);
    flex-shrink: 0;
    position: relative;
}
/* Outer ring on avatar */
.dossier-avatar::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(0, 229, 255, 0.06);
}
.dossier-name {
    font-family: var(--gc-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gc-text-primary);
    letter-spacing: 0.02em;
}
.dossier-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

/* Data field rows */
.dossier-fields {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
}
.dossier-field {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.025);
    opacity: 0;
    transform: translateY(6px);
}
.contact-dossier-wrap.open .dossier-field {
    animation: dossier-field-in 0.35s forwards;
}
.dossier-field:nth-child(1) { animation-delay: 0.15s; }
.dossier-field:nth-child(2) { animation-delay: 0.22s; }
.dossier-field:nth-child(3) { animation-delay: 0.29s; }
.dossier-field:nth-child(4) { animation-delay: 0.36s; }
.dossier-field:nth-child(5) { animation-delay: 0.43s; }
@keyframes dossier-field-in {
    to { opacity: 1; transform: translateY(0); }
}

.dossier-field-icon {
    width: 14px;
    height: 14px;
    color: var(--gc-cyan-deep);
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.6;
}
.dossier-field-content {
    flex: 1;
    min-width: 0;
}
.dossier-field-label {
    font-family: var(--gc-font-mono);
    font-size: 0.575rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gc-text-tertiary);
    margin-bottom: 1px;
}
.dossier-field-value {
    font-size: 0.85rem;
    color: var(--gc-text-primary);
    word-break: break-word;
    line-height: 1.45;
}
.dossier-field-value.notes {
    white-space: pre-wrap;
    color: var(--gc-text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gc-cyan-deep) transparent;
}

/* Footer with timestamp + actions */
.dossier-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(0, 229, 255, 0.04);
    background: rgba(0, 229, 255, 0.015);
}
.dossier-timestamp {
    font-family: var(--gc-font-mono);
    font-size: 0.575rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gc-text-muted);
}
.dossier-actions {
    display: flex;
    gap: 0.375rem;
}
.dossier-action-btn {
    font-family: var(--gc-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: var(--gc-radius-sm);
    border: 1px solid rgba(0, 229, 255, 0.1);
    background: rgba(0, 229, 255, 0.04);
    color: var(--gc-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.dossier-action-btn:hover {
    border-color: var(--gc-cyan-border);
    color: var(--gc-cyan);
    background: rgba(0, 229, 255, 0.08);
}
.dossier-action-btn svg {
    width: 11px;
    height: 11px;
}
.dossier-action-btn.danger {
    border-color: rgba(239, 68, 68, 0.12);
    background: rgba(239, 68, 68, 0.04);
    color: var(--gc-text-tertiary);
}
.dossier-action-btn.danger:hover {
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--gc-red);
    background: rgba(239, 68, 68, 0.08);
}

/* Active card loses bottom radius when dossier is open */
.contact-card.dossier-active {
    border-radius: var(--gc-radius) var(--gc-radius) 0 0;
}

/* ===== Shopping inline expansion ===== */
.shopping-detail-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}
.shopping-detail-wrap.open {
    grid-template-rows: 1fr;
}
.shopping-detail-wrap > .shopping-detail-inner {
    overflow: hidden;
    min-height: 0;
}
.shopping-item .item-chevron {
    transition: transform 0.2s ease;
}
.shopping-item.expanded .item-chevron {
    transform: rotate(90deg);
}

/* ===== Calendar grid ===== */
.cal-header {
    text-align: center;
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gc-text-tertiary);
    padding: 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cal-cell {
    min-height: 5rem;
    padding: 0.375rem;
    border: 1px solid var(--gc-border-subtle);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cal-cell:hover {
    border-color: var(--gc-cyan-border);
}

.cal-cell.cal-empty {
    cursor: default;
    border-color: transparent;
}

.cal-cell.cal-today {
    border-color: var(--gc-border-strong);
    background: rgba(0, 229, 255, 0.04);
}

.cal-day {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    color: var(--gc-text-secondary);
    margin-bottom: 0.25rem;
}

.cal-pill {
    font-size: 0.625rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    margin-bottom: 0.125rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.cal-pill-done {
    opacity: 0.5;
    text-decoration: line-through;
}

/* Prevent touch delay and double-tap zoom on interactive calendar elements */
@media (hover: none) {
    .cal-pill, .cal-week-event, .cal-week-allday-pill,
    .cal-today-event, .cal-today-allday-chip,
    .cal-cell, .cal-week-slot {
        touch-action: manipulation;
    }
}

/* Calendar event popover */
.cal-popover {
    position: fixed;
    z-index: 50;
    width: 240px;
    padding: 0.75rem;
    pointer-events: none;
    animation: fade-in 0.15s ease;
}

/* Calendar day header row with + button */
.cal-day-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cal-add-btn {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--gc-text-tertiary);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    line-height: 1;
}
.cal-cell:hover .cal-add-btn { opacity: 1; }
.cal-add-btn:hover {
    background: var(--gc-cyan-subtle);
    color: var(--gc-cyan);
}

/* Calendar day panel "+" button */
.cal-day-add-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    background: transparent;
    color: var(--gc-text-tertiary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.cal-day-add-btn:hover {
    color: var(--gc-cyan);
    border-color: var(--gc-cyan-border);
    background: var(--gc-cyan-subtle);
}

/* Calendar "+N more" overflow button */
.cal-more-btn {
    font-size: 0.625rem;
    color: var(--gc-text-tertiary);
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.cal-more-btn:hover {
    color: var(--gc-cyan);
    background: var(--gc-cyan-subtle);
}

/* Calendar event detail modal */
.cal-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    animation: fade-in 0.2s ease;
}
.cal-detail-card {
    width: 90%;
    max-width: 440px;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid var(--gc-cyan-border);
    background: var(--gc-surface-1);
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: cal-detail-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cal-detail-enter {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cal-detail-accent {
    height: 3px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, var(--gc-cyan), var(--gc-cyan-deep));
}
.cal-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.5rem 0;
    gap: 12px;
}
.cal-detail-title {
    font-family: var(--gc-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gc-text-primary);
    letter-spacing: 0.02em;
    line-height: 1.3;
    word-break: break-word;
}
.cal-detail-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: transparent;
    color: var(--gc-text-tertiary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
}
.cal-detail-close:hover {
    color: var(--gc-text-primary);
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
}
.cal-detail-body {
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cal-detail-field {
    display: flex;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    gap: 12px;
}
.cal-detail-field:last-child { border-bottom: none; }
.cal-detail-label {
    flex-shrink: 0;
    width: 90px;
    font-family: var(--gc-font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gc-text-tertiary);
}
.cal-detail-value {
    flex: 1;
    font-size: 0.85rem;
    color: var(--gc-text-secondary);
    line-height: 1.4;
}
.cal-detail-value.accent { color: var(--gc-cyan); }
.cal-detail-desc {
    flex: 1;
    font-size: 0.8rem;
    color: var(--gc-text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.cal-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--gc-font-mono);
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--gc-cyan-subtle);
    color: var(--gc-cyan);
}
.cal-detail-footer {
    padding: 0 1.5rem 1.25rem;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Calendar event form */
.cal-form-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--gc-font-mono);
    font-size: 0.68rem;
    color: var(--gc-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cal-form-label .hud-input {
    font-size: 0.82rem;
    padding: 6px 10px;
}
.cal-form-label textarea.hud-input {
    resize: vertical;
    min-height: 48px;
}
.cal-form-row {
    display: flex;
    gap: 12px;
    align-items: center;
}
.cal-form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    color: var(--gc-text-secondary);
    cursor: pointer;
}
.cal-form-check input[type="checkbox"] {
    accent-color: var(--gc-cyan);
}
.cal-color-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.cal-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}
.cal-color-dot:hover { transform: scale(1.15); }
.cal-color-dot.active {
    border-color: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,0.3);
}

/* Calendar day-events panel (overflow "see all") */
.cal-day-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    animation: fade-in 0.15s ease;
}
.cal-day-panel {
    width: 90%;
    max-width: 360px;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--gc-surface-1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: cal-detail-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cal-day-panel-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cal-day-panel-title {
    font-family: var(--gc-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gc-text-primary);
}
.cal-day-panel-list {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cal-day-event-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.cal-day-event-row:hover {
    background: rgba(255,255,255,0.05);
}
.cal-day-event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cal-day-event-title {
    font-size: 0.8rem;
    color: var(--gc-text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-day-event-time {
    font-family: var(--gc-font-mono);
    font-size: 0.65rem;
    color: var(--gc-text-tertiary);
    flex-shrink: 0;
}

/* ===== Widget cards ===== */
#overview-widgets > div {
    display: flex;
    flex-direction: column;
}

.widget-card {
    transition: border-color 0.15s ease;
    flex: 1;
}

.widget-card:hover {
    border-color: rgba(0, 229, 255, 0.25);
}

/* Schedule event rows */
.sched-event {
    cursor: default;
    border-radius: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    transition: background 0.15s ease;
}

.sched-event:hover {
    background: rgba(0, 229, 255, 0.06);
}

/* ===== Enhanced code blocks ===== */
.code-block-wrapper {
    position: relative;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 0.5rem;
    overflow: hidden;
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.75rem;
    background: rgba(30, 30, 40, 0.6);
    border-bottom: 1px solid rgba(75, 85, 99, 0.2);
}

.code-lang {
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    color: var(--gc-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.copy-btn {
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--gc-radius-sm);
    background: var(--gc-cyan-subtle);
    color: var(--gc-cyan);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.copy-btn:hover {
    background: rgba(0, 229, 255, 0.25);
}

.code-block-wrapper pre {
    margin: 0;
    border: none;
    border-radius: 0;
}

/* Table wrapper — scrollable */
.table-wrapper {
    overflow-x: auto;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 0.5rem;
}

.table-wrapper table {
    margin-bottom: 0;
    border: none;
}

.md-output tr:nth-child(even) {
    background: rgba(55, 65, 81, 0.15);
}

/* Responsive images */
.md-image {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    cursor: zoom-in;
    margin: 0.5rem 0;
}

/* Lightbox overlay */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
    animation: fade-in 0.2s ease;
}

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 0.5rem;
}

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

/* Mermaid blocks */
.mermaid-block {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 0.5rem;
    font-family: var(--gc-font-mono);
    font-size: 0.85rem;
    color: var(--gc-text-secondary);
    white-space: pre;
    margin-bottom: 0.75rem;
}

.mermaid {
    margin-bottom: 0.75rem;
}

/* ===== Chat Drawer Keyframes ===== */
@keyframes orb-breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(0, 229, 255, 0.3), 0 0 30px rgba(0, 229, 255, 0.1); }
    50% { transform: scale(1.04); box-shadow: 0 0 20px rgba(0, 229, 255, 0.5), 0 0 40px rgba(0, 229, 255, 0.2); }
}

@keyframes orb-ring-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orb-burst {
    0% { opacity: 1; transform: scale(0.5); }
    50% { opacity: 0.6; }
    100% { opacity: 0; transform: scale(1); }
}

@keyframes chat-materialize {
    0% { opacity: 0; clip-path: circle(0% at var(--burst-x, 50%) var(--burst-y, 100%)); filter: blur(10px); transform: scale(0.95); }
    60% { filter: blur(0); }
    100% { opacity: 1; clip-path: circle(200% at var(--burst-x, 50%) var(--burst-y, 100%)); transform: scale(1); }
}

@keyframes chat-dematerialize {
    0% { opacity: 1; clip-path: circle(200% at var(--burst-x, 50%) var(--burst-y, 100%)); transform: scale(1); }
    100% { opacity: 0; clip-path: circle(0% at var(--burst-x, 50%) var(--burst-y, 100%)); filter: blur(8px); transform: scale(0.97); }
}

@keyframes chat-scanline-sweep {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

@keyframes glitch-text {
    0%, 93%, 100% { transform: none; opacity: 1; }
    94% { transform: translate(-2px, 1px) skew(-1deg); opacity: 0.8; }
    95% { transform: translate(1px, -1px) skew(0.5deg); opacity: 0.9; }
    96% { transform: none; opacity: 1; }
}

/* ===== Chat Drawer ===== */
.chat-drawer {
    --mx-green: #00E5FF;
    --mx-green-dim: #00cce6;
    --mx-green-bright: #b3fcfa;
    --mx-green-glow: rgba(0, 229, 255, 0.5);
    --mx-green-subtle: rgba(0, 229, 255, 0.08);
    --mx-green-border: rgba(0, 229, 255, 0.25);
    --mx-bg: var(--gc-bg-1);
    --mx-bg-dark: var(--gc-bg);

    position: fixed;
    right: 1.5rem;
    bottom: 5.5rem;
    width: 420px;
    max-width: 100vw;
    height: 520px;
    max-height: 70vh;
    background: var(--mx-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--mx-green-border);
    border-radius: var(--gc-radius-lg);
    display: flex;
    flex-direction: column;
    z-index: 60;
    opacity: 0;
    clip-path: circle(0% at var(--burst-x, 50%) var(--burst-y, 50%));
    pointer-events: none;
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.15), 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.chat-drawer.open {
    opacity: 1;
    clip-path: circle(200% at var(--burst-x, 50%) var(--burst-y, 100%));
    pointer-events: auto;
    animation: chat-materialize 0.5s ease-out forwards;
}

.chat-drawer.closing {
    animation: chat-dematerialize 0.4s ease-in forwards;
    pointer-events: none;
}

/* Drawer decorations */
.chat-drawer::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid var(--mx-green-subtle);
    border-radius: calc(var(--gc-radius-lg) - 4px);
    pointer-events: none;
    z-index: 1;
}

.chat-drawer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 229, 255, 0.015) 2px,
        rgba(0, 229, 255, 0.015) 4px
    );
    pointer-events: none;
    z-index: 1;
}

.chat-drawer-scanline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.4), transparent);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
    animation: chat-scanline-sweep 5s linear infinite;
    z-index: 2;
    pointer-events: none;
}

/* Matrix rain canvas */
.chat-matrix-rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

/* Content above decorations */
.chat-header,
.chat-messages,
.chat-input-bar {
    position: relative;
    z-index: 3;
}

/* Terminal header */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mx-green-border);
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
}

.chat-header:active {
    cursor: grabbing;
}

.chat-header-terminal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.chat-header-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chat-header-title {
    color: var(--mx-green);
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.chat-header-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mx-green);
    box-shadow: 0 0 6px var(--mx-green-glow);
    animation: orb-breathe 2s ease-in-out infinite;
}

.chat-header-btn {
    padding: 0.375rem;
    border-radius: 0.375rem;
    color: var(--gc-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--gc-transition);
}

.chat-header-btn:hover {
    background: var(--mx-green-subtle);
    color: var(--mx-green-bright);
}

/* ── Chat Tab Bar ── */

.chat-tab-bar {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    min-height: 28px;
    border-bottom: 1px solid var(--mx-green-dim);
    background: rgba(0, 0, 0, 0.25);
    padding: 0 4px;
    gap: 2px;
    align-items: flex-end;
}

.chat-tab-bar::-webkit-scrollbar { display: none; }

.chat-tab-bar.single-tab {
    display: none;
}

.chat-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    max-width: 140px;
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    color: var(--gc-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.chat-tab:hover {
    color: var(--mx-green-bright);
    background: rgba(0, 229, 255, 0.04);
}

.chat-tab.active {
    color: #00E5FF;
    border-bottom-color: #00E5FF;
}

.chat-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-tab-close {
    display: none;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: none;
    color: var(--gc-text-secondary);
    cursor: pointer;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    border-radius: 2px;
    flex-shrink: 0;
}

.chat-tab:hover .chat-tab-close {
    display: block;
}

.chat-tab-close:hover {
    color: #ff5f56;
    background: rgba(255, 95, 86, 0.15);
}

.chat-tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chat-tab-dot.unread {
    background: #00E5FF;
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
}

.chat-tab-dot.streaming {
    background: #ffbd2e;
    animation: orb-breathe 1.5s ease-in-out infinite;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--mx-green-dim) transparent;
}

.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--mx-green-dim); border-radius: 2px; }

.chat-msg {
    display: flex;
}

.chat-msg-user {
    justify-content: flex-end;
}

.chat-msg-assistant {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 85%;
    padding: 0.625rem 0.875rem;
    border-radius: 2px;
    font-family: var(--gc-font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-word;
}

.chat-bubble-user {
    background: rgba(0, 229, 255, 0.06);
    border: none;
    border-left: 3px solid var(--mx-green);
    color: #e0fffe;
}

.chat-bubble-user::before {
    content: "> ";
    color: var(--mx-green-dim);
    font-weight: bold;
}

.chat-bubble-assistant {
    background: var(--mx-bg-dark);
    border: none;
    border-left: 3px solid var(--mx-green-dim);
    color: #d1d5db;
}

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

/* ── Flag-claim wrapper & button ── */
.chat-bubble-wrapper {
    position: relative;
    max-width: 85%;
}
.chat-bubble-wrapper .chat-bubble {
    max-width: 100%;
}
.chat-flag-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    background: none;
    border: none;
    padding: 2px;
    line-height: 1;
}
.chat-bubble-wrapper:hover .chat-flag-btn {
    opacity: 1;
}
.chat-flag-btn:hover {
    color: #f87171;
}
.chat-flag-btn.chat-flag-success {
    opacity: 1;
    color: #34d399;
}

/* ── Inline flag form ── */
.chat-flag-form {
    max-width: 85%;
    margin-top: 0.375rem;
    padding: 0.5rem 0.625rem;
    background: rgba(16, 24, 32, 0.95);
    border: 1px solid rgba(0, 229, 255, 0.12);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.75rem;
}
.chat-flag-select {
    background: rgba(8, 12, 20, 0.9);
    color: #d1d5db;
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: 2px;
    padding: 0.25rem 0.375rem;
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
}
.chat-flag-textarea {
    background: rgba(8, 12, 20, 0.9);
    color: #d1d5db;
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: 2px;
    padding: 0.25rem 0.375rem;
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    resize: vertical;
}
.chat-flag-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.chat-flag-submit {
    background: rgba(0, 229, 255, 0.12);
    color: var(--gc-cyan, #00E5FF);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 2px;
    padding: 0.2rem 0.625rem;
    font-family: var(--gc-font-mono);
    font-size: 0.7rem;
    cursor: pointer;
}
.chat-flag-submit:hover {
    background: rgba(0, 229, 255, 0.2);
}
.chat-flag-cancel {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-family: var(--gc-font-mono);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0.2rem 0.375rem;
}
.chat-flag-cancel:hover {
    color: rgba(255,255,255,0.7);
}
.chat-flag-error {
    color: #f87171;
    font-size: 0.7rem;
}

.chat-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--mx-green-border);
    flex-shrink: 0;
}

.chat-input-prompt {
    color: var(--mx-green);
    font-family: var(--gc-font-mono);
    font-weight: bold;
    font-size: 0.875rem;
    line-height: 2.25;
    flex-shrink: 0;
    user-select: none;
}

.chat-input {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    color: var(--mx-green);
    caret-color: var(--mx-green);
    font-family: var(--gc-font-mono);
    font-size: 0.875rem;
    resize: none;
    max-height: 120px;
    outline: none;
    line-height: 1.5;
}

.chat-input:focus {
    border: none;
    box-shadow: none;
}

.chat-input::placeholder {
    color: var(--mx-green-dim);
    opacity: 0.5;
}

.chat-send-btn {
    padding: 0.5rem;
    border-radius: var(--gc-radius);
    background: var(--gc-cyan-subtle);
    border: 1px solid var(--mx-green-border);
    color: var(--mx-green);
    cursor: pointer;
    transition: var(--gc-transition);
    flex-shrink: 0;
}

.chat-send-btn:hover {
    background: rgba(0, 229, 255, 0.2);
    color: var(--mx-green-bright);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

/* Mic button */
.chat-mic-btn {
    padding: 0.5rem;
    border-radius: var(--gc-radius);
    background: var(--gc-cyan-subtle);
    border: 1px solid var(--mx-green-border);
    color: var(--mx-green);
    cursor: pointer;
    transition: var(--gc-transition);
    flex-shrink: 0;
    position: relative;
}

.chat-mic-btn:hover {
    background: rgba(0, 229, 255, 0.2);
    color: var(--mx-green-bright);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

.chat-mic-btn.listening {
    background: rgba(0, 229, 255, 0.25);
    color: var(--mx-green-bright);
    animation: mic-pulse 1.5s ease-in-out infinite;
}

.chat-mic-btn.listening::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--gc-radius);
    border: 2px solid rgba(0, 229, 255, 0.4);
    animation: mic-ring 1.5s ease-out infinite;
    pointer-events: none;
}

@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0, 229, 255, 0.3); }
    50% { box-shadow: 0 0 18px rgba(0, 229, 255, 0.6); }
}

@keyframes mic-ring {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.3); }
}

.chat-mic-btn.transcribing {
    background: rgba(240, 160, 0, 0.2);
    color: var(--gc-amber);
    animation: mic-transcribe-pulse 1s ease-in-out infinite;
    pointer-events: none;
}

.chat-mic-btn.transcribing::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--gc-radius);
    border: 2px solid rgba(240, 160, 0, 0.35);
    animation: mic-ring 1s ease-out infinite;
    pointer-events: none;
}

@keyframes mic-transcribe-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(240, 160, 0, 0.3); }
    50% { box-shadow: 0 0 18px rgba(240, 160, 0, 0.6); }
}

/* Chat system message (voice errors, etc.) */
.chat-system-msg {
    text-align: center;
    font-size: 0.75rem;
    color: var(--mx-green-dim, rgba(0, 229, 255, 0.5));
    padding: 0.25rem 0.5rem;
    font-style: italic;
}

/* Chat drawer code block overrides */
.chat-drawer .md-output pre {
    background: var(--mx-bg-dark);
    border: 1px solid var(--mx-green-border);
    box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.03);
}

.chat-drawer .md-output code:not(pre code) {
    color: var(--mx-green);
    background: var(--gc-cyan-subtle);
}

.chat-drawer .stream-cursor::after {
    color: var(--mx-green);
}

/* Chat Orb */
.chat-orb {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 68px;
    height: 68px;
    cursor: pointer;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s, transform 0.3s;
    touch-action: none;
}

.chat-orb-core {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #00E5FF, #00a3b8 50%, #007a8a);
    animation: orb-breathe 3s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3), 0 0 30px rgba(0, 229, 255, 0.1);
    position: relative;
    z-index: 3;
}

.chat-orb-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1.5px solid transparent;
}

.chat-orb-ring-1 {
    width: 56px;
    height: 56px;
    border-top-color: rgba(0, 229, 255, 0.5);
    border-right-color: rgba(0, 229, 255, 0.2);
    animation: orb-ring-rotate 8s linear infinite;
}

.chat-orb-ring-2 {
    width: 66px;
    height: 66px;
    border-bottom-color: rgba(0, 229, 255, 0.35);
    border-left-color: rgba(0, 229, 255, 0.15);
    animation: orb-ring-rotate 12s linear infinite reverse;
}

.chat-orb-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.chat-orb:hover .chat-orb-core {
    animation-duration: 1.5s;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.5), 0 0 50px rgba(0, 229, 255, 0.25);
}

.chat-orb:hover .chat-orb-ring-1 {
    animation-duration: 4s;
}

.chat-orb:hover .chat-orb-ring-2 {
    animation-duration: 6s;
}

.chat-orb-dragging {
    cursor: grabbing !important;
}

.chat-orb-dragging .chat-orb-core,
.chat-orb-dragging .chat-orb-ring {
    animation-play-state: paused !important;
}

.chat-drawer.open ~ .chat-orb {
    transform: scale(0.85);
    opacity: 0.6;
}

/* Light Burst Overlay */
.chat-burst {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 59;
    opacity: 0;
}

.chat-burst.active {
    background: radial-gradient(circle at var(--burst-x, 50%) var(--burst-y, 50%), rgba(0, 229, 255, 0.3), transparent 50%);
    animation: orb-burst 0.6s ease-out forwards;
}

/* Chat welcome screen */
.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    height: 100%;
}

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.chat-suggestion {
    padding: 0.375rem 0.75rem;
    border-radius: 2px;
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    background: var(--gc-cyan-subtle);
    border: 1px solid var(--gc-border-subtle);
    color: var(--gc-text-secondary);
    cursor: pointer;
    transition: var(--gc-transition);
}

.chat-suggestion:hover {
    background: rgba(0, 229, 255, 0.12);
    color: var(--mx-green-bright);
    border-color: var(--gc-cyan-border);
}

/* Ghost suggestion bar — contextual prompts at top of views */
.ghost-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.625rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(75, 85, 99, 0.2);
}

.ghost-suggestions .chat-suggestion {
    font-size: 0.6875rem;
}

/* "Ask GHOST" buttons used in module views */
.ask-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--gc-radius);
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--gc-cyan-subtle);
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: var(--gc-cyan);
    cursor: pointer;
    transition: var(--gc-transition);
}

.ask-ghost-btn:hover {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.35);
    color: #80f5f0;
}

/* ── Mobile Backdrop ── */
.chat-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 59;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.chat-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ── Orb tap pulse (mobile feedback) ── */
.chat-orb-tap .chat-orb-core {
    animation: orb-tap-pulse 0.3s ease-out !important;
}

@keyframes orb-tap-pulse {
    0%   { transform: scale(1); box-shadow: 0 0 15px rgba(0, 229, 255, 0.3); }
    40%  { transform: scale(1.2); box-shadow: 0 0 35px rgba(0, 229, 255, 0.7), 0 0 60px rgba(0, 229, 255, 0.3); }
    100% { transform: scale(1); box-shadow: 0 0 15px rgba(0, 229, 255, 0.3); }
}

/* ── Responsive chat drawer — mobile bottom sheet ── */
@media (max-width: 640px) {
    .chat-drawer {
        /* Override any inline positioning from desktop JS */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100vw !important;
        height: 88vh !important;
        max-height: 88vh !important;
        border-radius: 16px 16px 0 0;
        /* Use slide-up instead of clip-path on mobile */
        clip-path: none !important;
        transform: translateY(100%);
        opacity: 1;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .chat-drawer.open.mobile-sheet {
        transform: translateY(0);
        pointer-events: auto;
        animation: none;
    }

    .chat-drawer.closing.mobile-sheet {
        transform: translateY(100%);
        animation: none;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Pull handle indicator */
    .chat-header::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.25);
    }

    .chat-header {
        padding-top: 1.25rem;
        cursor: grab;
    }

    /* Hide orb when sheet is open */
    .chat-drawer.open ~ .chat-orb {
        opacity: 0 !important;
        transform: scale(0) !important;
        pointer-events: none;
    }

    /* Orb default position on mobile — overridden when dragged */
    .chat-orb {
        bottom: 1rem !important;
        right: 1rem !important;
        left: auto !important;
        top: auto !important;
    }

    /* Hide resize handles on mobile */
    .chat-drawer-resize-handle {
        display: none !important;
    }

    /* Safe area padding for notched phones */
    .chat-input-bar {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* Wider suggestions on mobile */
    .chat-suggestion {
        font-size: 0.75rem;
        padding: 0.5rem 0.875rem;
    }
}

/* ===== GC Buttons (HUD style) ===== */
.gc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--gc-radius);
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(55, 65, 81, 0.4);
    border: 1px solid var(--gc-border-subtle);
    color: var(--gc-text-secondary);
    cursor: pointer;
    transition: var(--gc-transition);
}

.gc-btn:hover {
    background: var(--gc-cyan-subtle);
    border-color: var(--gc-cyan-border);
    color: #b3fcfa;
}

.gc-btn-primary {
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.3);
    color: var(--gc-cyan);
    clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px);
}

.gc-btn-primary:hover {
    background: rgba(0, 229, 255, 0.2);
    border-color: rgba(0, 229, 255, 0.5);
    color: #80f5f0;
}

.gc-btn-danger {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.gc-btn-danger:hover {
    background: var(--gc-red-subtle);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.gc-btn-ghost {
    background: transparent;
    border-color: transparent;
}

.gc-btn-ghost:hover {
    background: var(--gc-cyan-subtle);
    border-color: transparent;
}

.gc-btn-amber {
    color: var(--gc-amber);
    border-color: var(--gc-amber-border);
}

.gc-btn-amber:hover {
    background: var(--gc-amber-subtle);
    border-color: rgba(240, 160, 0, 0.4);
}

/* ===== Ghost Glow — neon cyan text-shadow ===== */
.ghost-glow {
    text-shadow: 0 0 8px var(--gc-cyan-glow), 0 0 20px rgba(0, 229, 255, 0.2);
}

/* ===== Widget label mono — monospace uppercase section headers ===== */
.widget-label-mono {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gc-text-tertiary);
}

/* ===== HUD Section Label (standard section header) ===== */
.hud-section-label {
    font-family: var(--gc-font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--gc-text-secondary);
}

.hud-section-label::before {
    content: '// ';
    color: var(--gc-cyan);
    opacity: 0.5;
}

/* ===== HUD View Header ===== */
.hud-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.hud-view-title {
    font-family: var(--gc-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--gc-text-primary);
}

.hud-view-subtitle {
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gc-text-tertiary);
    margin-top: 0.25rem;
}

/* ===== HUD Input ===== */
.hud-input {
    width: 100%;
    background: var(--gc-bg-3);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius);
    padding: 0.5rem 0.75rem;
    color: var(--gc-text-primary);
    font-family: var(--gc-font-body);
    font-size: 0.875rem;
    outline: none;
    transition: var(--gc-transition);
}

.hud-input:focus {
    border-color: var(--gc-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
}

.hud-input::placeholder {
    color: var(--gc-text-muted);
}

/* ===== HUD Prompt Block ===== */
.hud-prompt-block {
    background: var(--gc-bg-3);
    border: 1px solid var(--gc-border-subtle);
    border-left: 3px solid var(--gc-cyan-border);
    border-radius: var(--gc-radius);
    padding: 0.75rem 1rem;
    font-family: var(--gc-font-mono);
    font-size: 0.8125rem;
    color: var(--gc-text-secondary);
    line-height: 1.6;
}

/* ===== Overview clock ===== */
.ghost-clock {
    font-family: var(--gc-font-mono);
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--gc-cyan);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
    letter-spacing: 0.05em;
}

.clock-separator {
    animation: blink 1s ease-in-out infinite;
    color: var(--gc-cyan);
}

/* ===== Plan usage gauge ===== */
.plan-usage-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-usage-ring {
    flex-shrink: 0;
}

.plan-usage-pct {
    font-family: var(--gc-font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.plan-usage-detail {
    font-family: var(--gc-font-mono);
    font-size: 10px;
    color: var(--gc-text-tertiary);
    letter-spacing: 0.02em;
}

.plan-usage-meta {
    font-family: var(--gc-font-mono);
    font-size: 9px;
    color: var(--gc-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ===== Staggered fade-in animation ===== */
.gc-stagger > * {
    opacity: 0;
    animation: gc-stagger-in 0.4s ease forwards;
}

.gc-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.gc-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.gc-stagger > *:nth-child(3) { animation-delay: 0.12s; }
.gc-stagger > *:nth-child(4) { animation-delay: 0.16s; }
.gc-stagger > *:nth-child(5) { animation-delay: 0.20s; }
.gc-stagger > *:nth-child(6) { animation-delay: 0.24s; }
.gc-stagger > *:nth-child(7) { animation-delay: 0.28s; }
.gc-stagger > *:nth-child(8) { animation-delay: 0.32s; }
.gc-stagger > *:nth-child(n+9) { animation-delay: 0.36s; }

@keyframes gc-stagger-in {
    from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Border flow animation for streaming/active panels */
@keyframes border-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.border-flow {
    border-image: linear-gradient(90deg, var(--gc-cyan), var(--gc-magenta), var(--gc-cyan)) 1;
    background-size: 200% 200%;
    animation: border-flow 3s ease infinite;
}

/* Status flicker for running badges */
@keyframes status-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
    70% { opacity: 0.85; }
}

.status-flicker {
    animation: status-flicker 3s ease-in-out infinite;
}

/* ===== Weather icon containers ===== */
.weather-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.weather-icon svg {
    width: 100%;
    height: 100%;
}

.weather-icon-storm svg {
    filter: drop-shadow(0 0 6px rgba(240, 160, 0, 0.4));
}

/* ===== GC Row — clickable row with hover ===== */
.gc-row {
    transition: background 0.15s ease, border-color 0.15s ease;
}

.gc-row:hover {
    background: rgba(0, 229, 255, 0.03);
}

/* ===== Email detail classes ===== */
.email-detail-expanded {
    animation: fade-in 0.2s ease forwards;
    opacity: 1;
    margin-top: 2px;
    border-left: 2px solid rgba(0, 229, 255, 0.2);
}

.email-detail-subject {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.email-detail-subject-text {
    font-family: var(--gc-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gc-text-primary);
    line-height: 1.4;
}

.email-detail-sender-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.email-detail-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.email-detail-sender-info {
    flex: 1;
    min-width: 0;
}

.email-detail-sender-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gc-text-primary);
}

.email-detail-sender-email {
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    color: var(--gc-text-tertiary);
}

.email-detail-date {
    text-align: right;
    flex-shrink: 0;
}

.email-detail-date-relative {
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    color: var(--gc-text-secondary);
}

.email-detail-date-absolute {
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    color: var(--gc-text-tertiary);
}

.email-detail-actions {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0.5rem;
}

.email-detail-meta {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.email-detail-badge {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.email-detail-summary {
    font-size: 0.8125rem;
    color: var(--gc-text-secondary);
    line-height: 1.5;
    padding: 0.625rem 0.75rem;
    background: rgba(0, 229, 255, 0.03);
    border: 1px dashed rgba(0, 229, 255, 0.1);
    border-radius: var(--gc-radius);
    margin-bottom: 0.75rem;
}

.email-detail-divider {
    border-top: 1px solid rgba(75, 85, 99, 0.2);
    margin-bottom: 0.75rem;
}

.email-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    padding: 0.25rem;
    transition: color 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.email-star-btn:hover {
    transform: scale(1.2);
}

.email-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    background: rgba(55, 65, 81, 0.4);
    border: 1px solid rgba(75, 85, 99, 0.3);
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s;
}

.email-action-pill svg {
    width: 14px;
    height: 14px;
}

.email-action-pill:hover {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.25);
    color: #b3fcfa;
}

.email-action-pill-primary {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.25);
    color: #00E5FF;
}

.email-action-pill-primary:hover {
    background: rgba(0, 229, 255, 0.2);
    border-color: rgba(0, 229, 255, 0.4);
}

.email-body-text {
    font-family: var(--gc-font-body);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--gc-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.email-body-link {
    color: var(--gc-cyan);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.email-body-link:hover {
    color: #80f5f0;
}

.email-html-container {
    border: 1px solid rgba(75, 85, 99, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
}

.email-html-iframe {
    width: 100%;
    min-height: 200px;
    border: none;
    background: #fff;
    border-radius: 0.375rem;
}

/* ===== Research panel classes ===== */
.research-note-layout {
    display: block;
}

/* --- Research Chat Floating FAB --- */
.rc-fab {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00a3b8, #00E5FF);
    border: 1px solid rgba(0, 229, 255, 0.4);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 52;
    box-shadow: 0 4px 16px rgba(0, 229, 255, 0.25);
    transition: all 0.25s ease;
    animation: rc-fab-pulse 2.5s ease-in-out infinite;
}

.rc-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0, 229, 255, 0.4);
}

@keyframes rc-fab-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 229, 255, 0.25); }
    50% { box-shadow: 0 4px 24px rgba(0, 229, 255, 0.45), 0 0 40px rgba(0, 229, 255, 0.15); }
}

.rc-fab-hidden {
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
}

/* --- Research Chat Floating Panel --- */
.rc-panel {
    position: fixed;
    width: 400px;
    height: 520px;
    bottom: 100px;
    right: 24px;
    z-index: 52;
    background: rgba(10, 15, 24, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: var(--gc-radius-panel);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 229, 255, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.85) translateY(20px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.rc-panel::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--gc-radius-panel);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), transparent 40%, transparent 60%, rgba(0, 229, 255, 0.06));
    pointer-events: none;
    z-index: -1;
}

.rc-panel-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.rc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.rc-panel-header:active {
    cursor: grabbing;
}

.rc-panel-dragging {
    transition: none !important;
}

.rc-panel-callsign {
    font-family: var(--gc-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gc-cyan);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

.rc-panel-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rc-header-btn {
    background: transparent;
    border: none;
    color: var(--gc-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--gc-radius-sm);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-header-btn:hover {
    background: rgba(0, 229, 255, 0.1);
    color: var(--gc-cyan);
}

.rc-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0.5rem;
}

.rc-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.625rem;
    border-top: 1px solid rgba(0, 229, 255, 0.1);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.rc-input-prefix {
    font-family: var(--gc-font-mono);
    font-size: 0.8125rem;
    color: var(--gc-cyan);
    line-height: 2;
    flex-shrink: 0;
    user-select: none;
}

/* Resize handles */
.rc-resize-handle {
    position: absolute;
    z-index: 1;
}

.rc-resize-top {
    top: -3px;
    left: 12px;
    right: 12px;
    height: 6px;
    cursor: n-resize;
}

.rc-resize-bottom {
    bottom: -3px;
    left: 12px;
    right: 12px;
    height: 6px;
    cursor: s-resize;
}

.rc-resize-left {
    left: -3px;
    top: 12px;
    bottom: 12px;
    width: 6px;
    cursor: w-resize;
}

.rc-resize-right {
    right: -3px;
    top: 12px;
    bottom: 12px;
    width: 6px;
    cursor: e-resize;
}

/* --- Research Chat Backdrop (mobile only) --- */
.rc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 51;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: none;
}

@media (max-width: 640px) {
    .rc-backdrop { display: block; }
    .rc-backdrop.visible { opacity: 1; pointer-events: auto; }

    /* Bottom sheet treatment */
    .rc-panel {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100vw !important;
        height: 70vh !important;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        transform: translateY(100%) !important;
        opacity: 1 !important;
        pointer-events: none;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }
    .rc-panel.rc-panel-open {
        transform: translateY(0) !important;
        pointer-events: auto;
    }
    /* Hide resize handles — useless on mobile */
    .rc-panel .rc-resize-handle { display: none; }
    /* Pull-handle pill with subtle cyan glow */
    .rc-panel .rc-panel-header::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0, 229, 255, 0.35);
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
    }
    .rc-panel .rc-panel-header {
        padding-top: 1.25rem;
        cursor: default;
    }
    /* Safe area for notched phones */
    .rc-panel .rc-input-bar {
        padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
    }
}

/* --- Missing gp-* class definitions --- */
.gp-callsign {
    font-family: var(--gc-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gp-callsign-user {
    color: var(--gc-cyan);
}

.gp-callsign-ghost {
    color: var(--gc-magenta);
}

.gp-timestamp {
    font-family: var(--gc-font-mono);
    font-size: 0.5625rem;
    color: var(--gc-text-tertiary);
}

.gp-header-btn {
    background: transparent;
    border: none;
    color: var(--gc-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--gc-radius-sm);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gp-header-btn:hover {
    background: rgba(0, 229, 255, 0.1);
    color: var(--gc-cyan);
}

.gp-input-prefix {
    font-family: var(--gc-font-mono);
    font-size: 0.8125rem;
    color: var(--gc-cyan);
    line-height: 2;
    flex-shrink: 0;
    user-select: none;
}

.gp-op {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    color: var(--gc-text-secondary);
    padding: 0.125rem 0;
}

.gp-op-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gc-cyan);
    flex-shrink: 0;
    animation: gp-op-pulse 1s ease-in-out infinite;
}

.gp-op-dot.done {
    background: var(--gc-green);
    animation: none;
}

@keyframes gp-op-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.gp-op-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.625rem;
    border-top: 1px solid rgba(75, 85, 99, 0.3);
    flex-shrink: 0;
}

.gp-input-bar textarea {
    flex: 1;
    background: var(--gc-bg-3);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius);
    padding: 0.5rem 0.75rem;
    color: var(--gc-text-primary);
    font-family: var(--gc-font-body);
    resize: none;
    max-height: 80px;
    outline: none;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.gp-input-bar textarea:focus {
    border-color: var(--gc-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}

.gp-send-btn {
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: #00E5FF;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.gp-send-btn:hover {
    background: rgba(0, 229, 255, 0.2);
    color: #80f5f0;
}

.research-quote-ctx {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: rgba(0, 229, 255, 0.05);
    border: 1px solid rgba(0, 229, 255, 0.1);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    color: #8899aa;
    margin-bottom: 0.375rem;
}

.research-quote-ctx.hidden {
    display: none;
}

.bookmark-hub-card {
    transition: border-color 0.15s ease;
    cursor: pointer;
}

.bookmark-hub-card:hover {
    border-color: rgba(0, 229, 255, 0.25);
}

/* ================================================================
   WORKFLOW EDITOR (workflow-editor.js)
   ================================================================ */

/* --- Toolbar --- */
.wfe-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--gc-bg-1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gc-border-subtle);
    position: sticky;
    top: 0;
    z-index: 10;
}

.wfe-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.wfe-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(55, 65, 81, 0.4);
    border: 1px solid rgba(75, 85, 99, 0.3);
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.wfe-btn:hover {
    background: rgba(0, 229, 255, 0.08);
    border-color: rgba(0, 229, 255, 0.25);
    color: #b3fcfa;
}

.wfe-btn--active {
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.4);
    color: var(--gc-cyan);
}

.wfe-btn--danger {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.wfe-btn--danger:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.wfe-btn-amber {
    color: var(--gc-amber);
    border-color: rgba(240, 160, 0, 0.25);
}

.wfe-btn-amber:hover {
    background: rgba(240, 160, 0, 0.08);
    border-color: rgba(240, 160, 0, 0.4);
}

.wfe-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    min-width: 28px;
    justify-content: center;
}

.wfe-zoom-label {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    color: #6b7280;
    min-width: 36px;
    text-align: center;
}

/* --- Dropdowns --- */
.wfe-dropdown {
    position: relative;
}

.wfe-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: none;
    background: var(--gc-bg-1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius);
    padding: 0.25rem;
    z-index: 50;
    box-shadow: var(--gc-shadow-panel);
}
.wfe-dropdown-menu::-webkit-scrollbar {
    display: none;
}

.wfe-dropdown-menu.wfe-dropdown-open {
    display: block;
}

.wfe-menu-item {
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.12s ease;
}

.wfe-menu-item:hover {
    background: rgba(0, 229, 255, 0.08);
}

.wfe-menu-item.wfe-disabled {
    color: #4b5563;
    cursor: default;
    pointer-events: none;
}

.wfe-divider {
    width: 1px;
    height: 20px;
    background: rgba(75, 85, 99, 0.3);
    margin: 0 0.25rem;
}

/* --- Canvas --- */
.wfe-canvas-container {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: var(--gc-bg);
    cursor: grab;
}

.wfe-canvas-container.wfe-panning {
    cursor: grabbing;
}

.wfe-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    background-image:
        radial-gradient(circle, rgba(0, 229, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

.wfe-edge-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.wfe-canvas--readonly {
    opacity: 0.85;
}

.wfe-readonly-canvas {
    position: relative;
    min-width: 800px;
    min-height: 400px;
    overflow: auto;
    background-image:
        radial-gradient(circle, rgba(75, 85, 99, 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
    border-radius: 0.5rem;
    border: 1px solid rgba(75, 85, 99, 0.2);
    padding: 1rem;
}

.wfe-zoom-badge {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    color: #4b5563;
    background: rgba(17, 24, 39, 0.7);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    pointer-events: none;
}

.wfe-temp-edge {
    stroke: var(--gc-cyan);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0.6;
}

/* --- DAG Nodes --- */
.dag-node {
    position: absolute;
    min-width: 180px;
    max-width: 260px;
    background: var(--gc-bg-1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 0.5rem;
    box-shadow: var(--gc-shadow-panel);
    z-index: 1;
    user-select: none;
    overflow: visible;
    transition: border-color 0.3s, box-shadow 0.3s, opacity 0.3s, transform 0.3s;
}

.dag-node--agent {
    border-top: 3px solid var(--gc-cyan);
}

.dag-node--tool {
    border-top: 3px solid var(--gc-amber);
}

/* Real-time validation visuals (Phase 4A) */
.dag-node.invalid {
    border-color: #f87171; /* red-400 */
    box-shadow: 0 0 0 1px #f87171, 0 0 12px rgba(248, 113, 113, 0.45);
}
.dag-node.invalid::after {
    content: "!";
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f87171;
    color: #1e1e1e;
    font-weight: bold;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    z-index: 5;
    pointer-events: none;
}
.dag-node.warning {
    border-color: #fbbf24; /* amber-400 */
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.6);
}

/* 6E: workflow template thumbnail in gallery card */
.tl-card-thumb {
    margin: 0.5rem 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0.3rem;
}
.tl-card-thumb svg { display: block; }

/* Sg4: multi-select highlight */
.dag-node.selected {
    outline: 2px solid var(--gc-cyan);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18), var(--gc-shadow-panel);
}

/* Phase 6D: search-jump highlight */
.dag-node.flash-highlight {
    animation: dag-node-flash 1.5s ease-out;
}
@keyframes dag-node-flash {
    0%, 100% { box-shadow: var(--gc-shadow-panel); }
    20%, 60% { box-shadow: 0 0 0 3px var(--gc-cyan), 0 0 24px var(--gc-cyan); }
}

.dag-node--condition {
    border-top: 3px solid #a78bfa;
}

.dag-node--selected {
    border-color: var(--gc-cyan);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.2), 0 4px 16px rgba(0, 0, 0, 0.25);
}

.dag-node--readonly {
    cursor: default;
}

.dag-node--pending { opacity: 0.5; }

.dag-node--running {
    border-color: #60a5fa;
    animation: node-running-glow 2s ease-in-out infinite;
}

.dag-node--completed {
    border-color: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.25);
}

.dag-node--just-completed {
    animation: node-complete-flash 0.5s ease-out forwards;
}

.dag-node--failed {
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

.dag-node--warned {
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}

.dag-warning-icon {
    color: #f59e0b;
    font-size: 0.75rem;
    margin-left: auto;
    cursor: help;
}

.chain-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 0.375rem;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: #fbbf24;
    line-height: 1.4;
}

/* Phase 4B: structured error/pause cards in inspector */
.chain-error-card {
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}
.chain-error-card--failed {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.4);
}
.chain-error-card--awaiting {
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.4);
}
.chain-error-card-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gc-text-primary);
    margin-bottom: 0.4rem;
}
.chain-error-card-detail { line-height: 1.4; }

/* Phase 5: GHOST sidebar in workflow editor */
.workflow-sidebar {
    position: fixed;
    right: 0;
    top: 64px;
    bottom: 0;
    background: var(--gc-bg-1);
    border-left: 1px solid var(--gc-border-subtle);
    display: flex;
    flex-direction: row;
    z-index: 50;
    transition: width 0.2s ease;
}
.workflow-sidebar.collapsed { width: 38px; overflow: hidden; }
.workflow-sidebar.open { width: 360px; }
.workflow-sidebar-toggle {
    width: 38px;
    background: var(--gc-bg-2);
    border: none;
    border-right: 1px solid var(--gc-border-subtle);
    color: var(--gc-cyan);
    cursor: pointer;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 0.5rem 0;
    font-size: 0.8rem;
    font-weight: 600;
}
.workflow-sidebar-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.workflow-sidebar.collapsed .workflow-sidebar-body { display: none; }
.workflow-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gc-border-subtle);
}
.workflow-sidebar-title { font-size: 0.85rem; font-weight: 600; color: var(--gc-text-primary); }
.workflow-sidebar-clear {
    background: transparent; border: none; color: var(--gc-text-tertiary);
    cursor: pointer; font-size: 0.95rem;
}
.workflow-sidebar-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.workflow-sidebar-empty {
    color: var(--gc-text-tertiary);
    font-size: 0.78rem;
    line-height: 1.4;
    padding: 0.6rem;
    border: 1px dashed var(--gc-border-subtle);
    border-radius: 0.4rem;
    text-align: center;
}
.workflow-sidebar-msg {
    padding: 0.5rem 0.65rem;
    border-radius: 0.4rem;
    font-size: 0.82rem;
    line-height: 1.4;
}
.workflow-sidebar-msg--user {
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.3);
    align-self: flex-end;
    max-width: 90%;
}
.workflow-sidebar-msg--assistant {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--gc-border-subtle);
    max-width: 95%;
}
.workflow-sidebar-msg-body { color: var(--gc-text-primary); }
.workflow-sidebar-apply-tray {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.workflow-sidebar-input-row {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem;
    border-top: 1px solid var(--gc-border-subtle);
}
.workflow-sidebar-input-row textarea {
    flex: 1;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 0.375rem;
    color: var(--gc-text-primary);
    padding: 0.4rem 0.5rem;
    font-size: 0.82rem;
    resize: none;
    font-family: inherit;
}

.dag-node-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid rgba(75, 85, 99, 0.2);
    cursor: grab;
}

.dag-node-header:active {
    cursor: grabbing;
}

.dag-node-header--agent {
    background: rgba(0, 229, 255, 0.04);
}

.dag-node-header--tool {
    background: rgba(240, 160, 0, 0.04);
}

.dag-node-type-badge {
    font-family: var(--gc-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    background: rgba(0, 229, 255, 0.1);
    color: var(--gc-cyan);
    flex-shrink: 0;
}

.dag-node-type-badge--tool {
    background: rgba(240, 160, 0, 0.1);
    color: var(--gc-amber);
}

.dag-node-title {
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gc-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.dag-node-delete {
    background: none;
    border: none;
    color: #4b5563;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.125rem;
    transition: color 0.15s;
    flex-shrink: 0;
}

.dag-node-delete:hover {
    color: #f87171;
}

.dag-node-body {
    padding: 0.5rem 0.625rem;
}

.dag-node-subtitle {
    font-size: 0.6875rem;
    color: #6b7280;
}

.dag-node-footer {
    padding: 0.375rem 0.625rem;
    border-top: 1px solid rgba(75, 85, 99, 0.15);
    font-size: 0.625rem;
    color: #4b5563;
}

.dag-status-icon {
    font-size: 0.625rem;
    flex-shrink: 0;
}

.dag-status-running {
    animation: pulse-dot 1.5s ease-in-out infinite;
    color: #60a5fa;
}

/* --- Ports --- */
.dag-port {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #374151;
    border: 2px solid #6b7280;
    cursor: crosshair;
    z-index: 2;
    transition: all 0.15s;
}

.dag-port--in {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
}

.dag-port--out {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    left: auto;
}

.dag-port:hover {
    width: 16px;
    height: 16px;
    background: var(--gc-cyan);
    border-color: var(--gc-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

.dag-port--in:hover {
    left: -8px;
}

.dag-port--out:hover {
    right: -8px;
}

.dag-port--drop-target {
    width: 16px;
    height: 16px;
    background: var(--gc-cyan);
    border-color: var(--gc-cyan);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
    left: -8px;
}

/* --- Edges --- */
.dag-edge {
    stroke: #4b5563;
    stroke-width: 2;
    fill: none;
    pointer-events: stroke;
    cursor: pointer;
    transition: stroke 0.3s, stroke-width 0.3s, filter 0.3s;
}

.dag-edge:hover {
    stroke: #f87171;
    stroke-width: 3;
}

.dag-edge--active {
    stroke: var(--gc-cyan);
    stroke-dasharray: 8 4;
    animation: edge-flow 0.8s linear infinite;
    filter: drop-shadow(0 0 2px rgba(0, 229, 255, 0.3));
}

.dag-edge--selected {
    stroke: var(--gc-cyan);
    stroke-width: 3;
}

@keyframes edge-flow {
    to { stroke-dashoffset: -12; }
}

/* --- Inspector sidebar --- */
.wfe-inspector {
    width: 340px;
    flex-shrink: 0;
    background: var(--gc-bg-1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid var(--gc-border-subtle);
    overflow-y: auto;
    animation: inspector-slide 0.2s ease;
    font-family: var(--gc-font-body);
}

.wfe-inspector.hidden {
    display: none;
}

@keyframes inspector-slide {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

.wfe-inspector-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid rgba(75, 85, 99, 0.2);
}

.wfe-inspector-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wfe-label {
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-top: 0.5rem;
}

.wfe-label-sm {
    font-family: var(--gc-font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.125rem;
}

.wfe-input {
    width: 100%;
    background: var(--gc-bg-3);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
    color: var(--gc-text-primary);
    font-size: 0.8125rem;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}

.wfe-input:focus {
    border-color: var(--gc-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}

.wfe-input-sm {
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
}

.wfe-select {
    width: 100%;
    background: var(--gc-bg-3);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
    color: var(--gc-text-primary);
    font-size: 0.8125rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}

.wfe-select:focus {
    border-color: var(--gc-cyan);
}

.wfe-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.wfe-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.wfe-config-field {
    margin-bottom: 0.5rem;
}

.wfe-config-desc {
    font-size: 0.625rem;
    color: #4b5563;
    display: block;
    margin-top: 0.125rem;
}

.wfe-context-hint {
    margin-top: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: rgba(0, 229, 255, 0.03);
    border: 1px dashed rgba(0, 229, 255, 0.1);
    border-radius: 0.375rem;
}

/* --- Inspector sections --- */
.wfe-inspector-section {
    border: 1px solid rgba(75, 85, 99, 0.2);
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.wfe-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.625rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.wfe-section-header:hover {
    background: rgba(75, 85, 99, 0.1);
}

.wfe-section-title {
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}

.wfe-section-chevron {
    font-size: 0.625rem;
    color: #6b7280;
    transition: transform 0.15s;
}

.wfe-section--collapsed .wfe-section-chevron {
    transform: rotate(-90deg);
}

.wfe-section-body {
    padding: 0.5rem 0.625rem;
    border-top: 1px solid rgba(75, 85, 99, 0.15);
}

.wfe-section--collapsed .wfe-section-body {
    display: none;
}

.wfe-label--required::after {
    content: ' *';
    color: var(--gc-cyan);
}

.wfe-input--error {
    border-color: #ef4444 !important;
}

.wfe-validation-msg {
    font-size: 0.625rem;
    color: #ef4444;
    margin-top: 0.125rem;
}

.wfe-template-preview {
    margin-top: 0.375rem;
    padding: 0.375rem 0.5rem;
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.1);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    color: #9ca3af;
    line-height: 1.4;
}

.wfe-textarea-enhanced {
    font-family: var(--gc-font-mono);
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.wfe-prompt-hint {
    font-size: 0.625rem;
    font-style: italic;
    color: #4b5563;
    margin-top: 0.25rem;
}

/* --- Body row (canvas + inspector side-by-side) --- */
.wfe-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* --- Edit button on node header --- */
.dag-node-edit {
    background: none;
    border: none;
    color: #4b5563;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
    padding: 0 0.125rem;
    transition: color 0.15s;
    flex-shrink: 0;
}

.dag-node-edit:hover {
    color: var(--gc-cyan);
}

/* --- Template badge in collapsed section header --- */
.wfe-template-badge {
    font-family: var(--gc-font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    background: rgba(0, 229, 255, 0.1);
    color: var(--gc-cyan);
    white-space: nowrap;
    margin-left: auto;
    margin-right: 0.375rem;
}

.wfe-inspector-close {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
    padding: 0 0.25rem;
    margin-left: auto;
    transition: color 0.15s;
}

.wfe-inspector-close:hover {
    color: #e5e7eb;
}

/* --- Tool guide in inspector --- */
.wfe-guide-when {
    font-size: 0.75rem;
    color: #d1d5db;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.wfe-guide-io {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.wfe-guide-io-row {
    font-size: 0.6875rem;
    color: #9ca3af;
    line-height: 1.4;
    display: flex;
    gap: 0.375rem;
    align-items: baseline;
}

.wfe-guide-io-label {
    font-family: var(--gc-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.0625rem 0.25rem;
    border-radius: 0.25rem;
    background: rgba(0, 229, 255, 0.08);
    color: var(--gc-cyan);
    flex-shrink: 0;
}

.wfe-guide-examples {
    margin-bottom: 0.5rem;
}

.wfe-guide-example {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.375rem;
    margin-bottom: 0.25rem;
    background: rgba(75, 85, 99, 0.1);
    border-radius: 0.375rem;
}

.wfe-guide-example-title {
    font-size: 0.6875rem;
    color: #d1d5db;
}

.wfe-guide-apply {
    font-family: var(--gc-font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 229, 255, 0.2);
    background: rgba(0, 229, 255, 0.06);
    color: var(--gc-cyan);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.wfe-guide-apply:hover {
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.4);
}

.wfe-guide-tips {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wfe-guide-tip {
    font-size: 0.625rem;
    color: #6b7280;
    line-height: 1.4;
    padding-left: 0.625rem;
    position: relative;
}

.wfe-guide-tip::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: #4b5563;
}

/* --- Enhanced tool dropdown menu items --- */
.wfe-menu-item--rich {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.375rem 0.625rem;
}

.wfe-menu-item-name {
    font-size: 0.75rem;
    color: #d1d5db;
    font-weight: 500;
}

.wfe-menu-item--rich:hover .wfe-menu-item-name {
    color: #fff;
}

.wfe-menu-item-desc {
    font-size: 0.5625rem;
    color: #6b7280;
    line-height: 1.3;
}

/* --- Layout --- */
.wfe-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wfe-layout > .wfe-toolbar ~ * {
    display: flex;
    flex: 1;
    min-height: 0;
}

.wfe-status-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.375rem 0.75rem;
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    color: #4b5563;
    border-top: 1px solid rgba(75, 85, 99, 0.2);
    background: rgba(17, 24, 39, 0.5);
}

/* --- Active Flows (dashboard) --- */
.flow-card {
    cursor: pointer;
    transition: border-color 0.15s;
}

.flow-progress-track {
    height: 4px;
    background: rgba(75, 85, 99, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.flow-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gc-cyan-deep), var(--gc-cyan));
    border-radius: 2px;
    transition: width 0.4s ease;
}

.flow-dots {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.flow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(75, 85, 99, 0.4);
    flex-shrink: 0;
}

.flow-dot--completed {
    background: #22c55e;
}

.flow-dot--running {
    background: #60a5fa;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.flow-dot--failed {
    background: var(--gc-red);
}

/* ================================================================
   WORKFLOW MONITOR (dashboard.js — HUD-style panel)
   ================================================================ */

.wfm-panel {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 229, 255, 0.12);
}

/* Scanline overlay — subtle horizontal bands */
.wfm-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 229, 255, 0.025) 2px,
        rgba(0, 229, 255, 0.025) 4px
    );
    z-index: 1;
}

/* Animated sweep line */
.wfm-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 229, 255, 0.06) 48%,
        rgba(0, 229, 255, 0.12) 50%,
        rgba(0, 229, 255, 0.06) 52%,
        transparent 100%
    );
    background-size: 100% 40px;
    animation: wfm-scanline 4s linear infinite;
    z-index: 1;
}

@keyframes wfm-scanline {
    0% { background-position: 0 -40px; }
    100% { background-position: 0 calc(100% + 40px); }
}

.wfm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.wfm-header-label {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gc-cyan);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wfm-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
    animation: wfm-glow-pulse 2s ease-in-out infinite;
}

.wfm-filters {
    display: flex;
    gap: 0.375rem;
}

.wfm-filter-pill {
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--gc-font-mono);
    color: #6b7280;
    background: rgba(55, 65, 81, 0.3);
    border: 1px solid rgba(75, 85, 99, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.wfm-filter-pill:hover {
    background: rgba(55, 65, 81, 0.5);
    color: #9ca3af;
}

.wfm-filter-pill.active {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.3);
    color: var(--gc-cyan);
}

/* Workflow rows */
.wfm-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    position: relative;
    z-index: 2;
}

.wfm-row {
    border-left: 3px solid #374151;
    border-radius: 0.5rem;
    background: rgba(17, 24, 39, 0.4);
    transition: all 0.2s ease;
    overflow: hidden;
}

.wfm-row:hover {
    background: rgba(17, 24, 39, 0.6);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.05);
}

.wfm-row--running { border-left-color: #60a5fa; animation: wfm-glow-pulse 2.5s ease-in-out infinite; }
.wfm-row--completed { border-left-color: #22c55e; }
.wfm-row--failed { border-left-color: var(--gc-red); }
.wfm-row--pending { border-left-color: #6b7280; }
.wfm-row--cancelled { border-left-color: #6b7280; }

.wfm-row--expanded {
    border-left-color: var(--gc-cyan) !important;
    background: rgba(0, 229, 255, 0.04);
    animation: none;
}

@keyframes wfm-glow-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(0, 229, 255, 0.05); }
    50% { box-shadow: 0 0 14px rgba(0, 229, 255, 0.12); }
}

.wfm-row-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    user-select: none;
}

.wfm-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wfm-status-dot--running { background: #60a5fa; animation: pulse-dot 1.5s ease-in-out infinite; }
.wfm-status-dot--completed { background: #22c55e; }
.wfm-status-dot--failed { background: var(--gc-red); }
.wfm-status-dot--pending { background: #6b7280; }
.wfm-status-dot--cancelled { background: #6b7280; }

.wfm-row-center {
    flex: 1;
    min-width: 0;
}

.wfm-row-title {
    font-family: var(--gc-font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--gc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wfm-row-meta {
    font-size: 0.6875rem;
    color: #6b7280;
    font-family: var(--gc-font-mono);
    margin-top: 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Inline mini progress bar */
.wfm-progress-track {
    height: 3px;
    width: 80px;
    background: rgba(75, 85, 99, 0.3);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.wfm-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.wfm-progress-bar--running {
    background: linear-gradient(90deg, var(--gc-cyan-deep), var(--gc-cyan));
    background-size: 200% 100%;
    animation: wfm-shimmer 1.5s ease-in-out infinite;
}

.wfm-progress-bar--completed { background: #22c55e; }
.wfm-progress-bar--failed { background: var(--gc-red); }
.wfm-progress-bar--pending { background: #6b7280; }

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

.wfm-row-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.wfm-duration {
    font-size: 0.6875rem;
    font-family: var(--gc-font-mono);
    color: #4b5563;
}

.wfm-chevron {
    color: #4b5563;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.wfm-row--expanded .wfm-chevron {
    transform: rotate(90deg);
    color: var(--gc-cyan);
}

/* Detail panel — expand/collapse */
.wfm-detail {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.wfm-row--expanded .wfm-detail {
    max-height: 700px;
    opacity: 1;
    overflow-y: auto;
}

.wfm-detail-inner {
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid rgba(75, 85, 99, 0.15);
}

/* Step timeline */
.wfm-step-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.75rem;
}

.wfm-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
    padding-bottom: 0.75rem;
}

.wfm-step:last-child { padding-bottom: 0; }

/* Timeline line between dots */
.wfm-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 16px;
}

.wfm-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    z-index: 1;
}
.wfm-step-dot--completed { background: #22c55e; }
.wfm-step-dot--running { background: #60a5fa; animation: pulse-dot 1.5s ease-in-out infinite; }
.wfm-step-dot--failed { background: var(--gc-red); }
.wfm-step-dot--pending { background: #374151; border: 1px solid #4b5563; }
.wfm-step-dot--skipped { background: #374151; border: 1px solid #4b5563; }
.wfm-step-dot--blocked { background: #374151; border: 1px solid #4b5563; }

.wfm-step-line {
    width: 2px;
    flex: 1;
    background: rgba(75, 85, 99, 0.3);
    min-height: 12px;
}

.wfm-step-content {
    flex: 1;
    min-width: 0;
}

.wfm-step-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: #d1d5db;
}

.wfm-step-info {
    font-size: 0.6875rem;
    color: #6b7280;
    font-family: var(--gc-font-mono);
    margin-top: 0.125rem;
}

.wfm-step-output {
    font-size: 0.6875rem;
    color: #4b5563;
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

/* Mini-DAG container */
.wfm-mini-dag {
    max-height: 280px;
    overflow: auto;
    margin-top: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(75, 85, 99, 0.15);
    position: relative;
}

.wfm-mini-dag .wfe-readonly-canvas {
    min-width: unset !important;
    min-height: unset !important;
    overflow: visible !important;
    transform-origin: 0 0;
}

/* Pending edges — dimmed, no animation (waiting for upstream to complete) */
.wfm-mini-dag .dag-edge:not(.dag-edge--completed):not(.dag-edge--flowing):not(.dag-edge--active):not(.dag-edge--failed) {
    stroke: #4b5563;
    stroke-dasharray: none;
    opacity: 0.4;
    animation: none;
    filter: none;
}

@keyframes wfm-data-flow {
    0% { stroke-dashoffset: 9; }
    100% { stroke-dashoffset: 0; }
}

/* Actions bar */
.wfm-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(75, 85, 99, 0.15);
}

.wfm-action-btn {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.3125rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid rgba(75, 85, 99, 0.3);
    background: rgba(55, 65, 81, 0.3);
    color: #9ca3af;
}

.wfm-action-btn:hover {
    background: rgba(55, 65, 81, 0.5);
    color: #e5e7eb;
}

.wfm-action-btn--danger {
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.wfm-action-btn--danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.wfm-action-btn--primary {
    border-color: rgba(0, 229, 255, 0.3);
    color: var(--gc-cyan);
}

.wfm-action-btn--primary:hover {
    background: rgba(0, 229, 255, 0.1);
}

.wfm-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #4b5563;
    font-size: 0.8125rem;
    font-family: var(--gc-font-mono);
}

/* ================================================================
   GATEWAY (gateway.js)
   ================================================================ */

.gw-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 26px;
    background: #374151;
    border-radius: 13px;
    border: 1px solid rgba(75, 85, 99, 0.3);
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #6b7280;
}

.gw-toggle.active {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.4);
    color: var(--gc-cyan);
}

.gw-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #374151;
    flex-shrink: 0;
}

.gw-dot-on {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
    animation: gw-pulse 2s ease-in-out infinite;
}

.gw-dot-off {
    background: #4b5563;
}

.gw-dot-warn {
    background: var(--gc-amber);
    box-shadow: 0 0 6px rgba(240, 160, 0, 0.4);
    animation: gw-pulse 2s ease-in-out infinite;
}

@keyframes gw-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.gw-setup {
    overflow: hidden;
}

.gw-setup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.gw-setup-header:hover {
    background: rgba(0, 229, 255, 0.03);
}

.gw-setup-body {
    max-height: 800px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 1;
}

.gw-setup-body.collapsed {
    max-height: 0;
    opacity: 0;
}

.gw-chevron {
    font-size: 0.75rem;
    color: #4b5563;
    transition: transform 0.25s ease;
    display: inline-block;
}

.gw-chevron.open {
    transform: rotate(180deg);
}

.gw-config-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gw-config-label {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.04em;
    min-width: 80px;
    flex-shrink: 0;
}

.gw-secret-field {
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    color: #4d5e6f;
    padding: 0.25rem 0.5rem;
    background: rgba(55, 65, 81, 0.2);
    border-radius: 0.25rem;
}

.gw-input {
    background: var(--gc-bg-3);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 0.375rem;
    padding: 0.3125rem 0.5rem;
    color: var(--gc-text-primary);
    font-size: 0.75rem;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}

.gw-input:focus {
    border-color: var(--gc-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}

.gw-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: var(--gc-cyan);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.gw-action-btn:hover {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.4);
}

.gw-copy-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    background: rgba(55, 65, 81, 0.4);
    border: 1px solid rgba(75, 85, 99, 0.3);
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s;
}

.gw-copy-btn:hover {
    background: rgba(0, 229, 255, 0.1);
    color: #b3fcfa;
    border-color: rgba(0, 229, 255, 0.25);
}

.gw-guide {
    padding: 0.75rem;
    background: rgba(55, 65, 81, 0.15);
    border: 1px solid rgba(75, 85, 99, 0.2);
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    color: #6b7280;
    line-height: 1.7;
}

.gw-guide ol {
    padding-left: 1.25rem;
    margin: 0;
}

.gw-guide li {
    margin-bottom: 0.25rem;
}

.gw-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.gw-log-row {
    border-top: 1px solid rgba(0, 240, 255, 0.06);
}

.gw-log-badge {
    display: inline-flex;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.gw-section {
    margin-bottom: 1.5rem;
}

.gw-url-display {
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    color: #9ca3af;
    padding: 0.375rem 0.625rem;
    background: rgba(55, 65, 81, 0.2);
    border: 1px solid rgba(75, 85, 99, 0.2);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gw-test-result {
    font-size: 0.6875rem;
    transition: opacity 0.15s;
}

/* --- Gateway Stats Row --- */
.gw-stats-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.gw-stat-card {
    flex: 1;
    min-width: 100px;
    background: var(--gc-bg-2);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    text-align: center;
}

.gw-stat-value {
    font-family: var(--gc-font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gc-text-primary);
    line-height: 1.2;
}

.gw-stat-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--gc-text-tertiary);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* --- Gateway Card Details --- */
.gw-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.gw-card-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0, 240, 255, 0.04);
}

.gw-card-detail-row:last-child {
    border-bottom: none;
}

.gw-card-detail-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.03em;
}

.gw-card-detail-value {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    color: var(--gc-text-secondary);
}

/* --- Config Badge (key/token status pills) --- */
.gw-config-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.gw-config-badge--set {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.gw-config-badge--missing {
    background: rgba(240, 160, 0, 0.08);
    color: var(--gc-amber);
    border: 1px solid rgba(240, 160, 0, 0.2);
}

/* --- Auth Banner --- */
.gw-auth-banner {
    background: var(--gc-bg-2);
    border: 1px solid rgba(240, 160, 0, 0.2);
    border-left: 3px solid var(--gc-amber);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

/* ================================================================
   TASK VIEWER FOLLOW-UP (task-viewer.js)
   ================================================================ */

.follow-up-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
}

.follow-up-prefix {
    font-family: var(--gc-font-mono);
    font-size: 1rem;
    color: var(--gc-cyan);
    padding-bottom: 0.375rem;
    flex-shrink: 0;
    opacity: 0.6;
}

.follow-up-textarea {
    flex: 1;
    background: var(--gc-bg-3);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius);
    padding: 0.5rem 0.75rem;
    color: var(--gc-text-primary);
    font-family: var(--gc-font-body);
    font-size: 0.875rem;
    resize: none;
    max-height: 120px;
    outline: none;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.follow-up-textarea:focus {
    border-color: var(--gc-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}

.follow-up-textarea::placeholder {
    color: var(--gc-text-muted);
}

.follow-up-send-btn {
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.15);
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: var(--gc-cyan);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.follow-up-send-btn:hover {
    background: rgba(0, 229, 255, 0.25);
    color: #80f5f0;
}

.follow-up-divider {
    border-top: 1px dashed rgba(75, 85, 99, 0.3);
    margin: 1rem 0;
}

.follow-up-user-msg {
    padding: 0.625rem 0.875rem;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.12);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #e0fffe;
    margin-bottom: 0.75rem;
}

.follow-up-label {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--gc-cyan);
    margin-right: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ================================================================
   RESEARCH MODULE — detail classes (research.js)
   ================================================================ */

.research-bookmark {
    display: inline;
    background: rgba(251, 191, 36, 0.15);
    border-bottom: 2px solid rgba(251, 191, 36, 0.5);
    color: inherit;
    padding: 1px 3px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s;
}

.research-bookmark:hover {
    background: rgba(251, 191, 36, 0.25);
}

.research-bookmark-icon {
    font-size: 0.75rem;
    margin-right: 2px;
    vertical-align: middle;
    color: rgba(251, 191, 36, 0.8);
}

.research-bookmark-flash {
    animation: bookmark-flash 0.6s ease;
}

@keyframes bookmark-flash {
    0% { background: rgba(251, 191, 36, 0.4); }
    100% { background: rgba(251, 191, 36, 0.15); }
}

.bookmark-card {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: rgba(251, 191, 36, 0.04);
    border: 1px solid rgba(251, 191, 36, 0.12);
    border-left: 3px solid rgba(251, 191, 36, 0.4);
    border-radius: 0.5rem;
    transition: all 0.15s ease;
}

.bookmark-card:hover {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.25);
}

.bookmark-delete-btn {
    flex-shrink: 0;
    padding: 0.25rem;
    border-radius: 0.25rem;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    opacity: 0;
    transition: all 0.12s;
}

.bookmark-card:hover .bookmark-delete-btn {
    opacity: 1;
}

.bookmark-delete-btn:hover {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

.gp-entry {
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    animation: fade-in 0.2s ease;
}

.gp-entry-user {
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.1);
}

.gp-entry-assistant {
    background: rgba(55, 65, 81, 0.25);
    border: 1px solid rgba(75, 85, 99, 0.2);
}

.gp-entry-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
}

.gp-entry-body {
    font-size: 0.8125rem;
    color: #d1d5db;
    line-height: 1.6;
}

.gp-entry-body p:last-child {
    margin-bottom: 0;
}

.gp-ops {
    margin-top: 0.375rem;
    padding: 0.375rem 0.5rem;
    background: rgba(55, 65, 81, 0.2);
    border: 1px solid rgba(75, 85, 99, 0.15);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
}

.gp-ops-summary {
    color: #6b7280;
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
}

.selection-float-toolbar {
    position: fixed;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    animation: fade-in 0.15s ease;
}

.selection-float-toolbar button {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}

.selection-float-toolbar button:hover {
    background: rgba(0, 229, 255, 0.1);
    color: #b3fcfa;
}

/* ================================================================
   SHOPPING LIST + UTILITY CLASSES
   ================================================================ */

.shopping-list-card {
    transition: all 0.2s ease;
}

.shopping-list-card:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* gc-glow: alias for ghost-glow (used by gateway.js) */
.gc-glow {
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 229, 255, 0.2);
}

/* View entrance animation */
.gc-view-enter {
    animation: gc-view-enter 0.3s ease;
}

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

/* ================================================================
   CHAT — Resize handles
   ================================================================ */
.chat-drawer-resize-handle {
    position: absolute;
    z-index: 5;
}

.chat-drawer-resize-top {
    top: 0;
    left: 12px;
    right: 12px;
    height: 6px;
    cursor: n-resize;
}

.chat-drawer-resize-left {
    top: 12px;
    left: 0;
    bottom: 12px;
    width: 6px;
    cursor: w-resize;
}

.chat-drawer-resize-bottom {
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 6px;
    cursor: s-resize;
}

.chat-drawer-resize-right {
    top: 12px;
    right: 0;
    bottom: 12px;
    width: 6px;
    cursor: e-resize;
}

.chat-drawer-resize-handle:hover {
    background: rgba(0, 229, 255, 0.15);
}

/* ================================================================
   CHAT — Tool operation timer pills
   ================================================================ */
.chat-tool-ops {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
    max-width: 85%;
}

.chat-tool-op {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-left: 3px solid var(--gc-cyan);
    border-radius: 6px;
    font-size: 0.6875rem;
    color: #9ca3af;
    transition: opacity 0.2s;
}

.chat-tool-op.active {
    border-left-color: var(--gc-cyan);
}

.chat-tool-op:not(.active) {
    opacity: 0.6;
    border-left-color: #4b5563;
}

.chat-tool-op-name {
    font-family: var(--gc-font-mono);
    color: var(--gc-cyan);
    font-weight: 600;
}

.chat-tool-op-timer {
    font-family: var(--gc-font-mono);
    color: #6b7280;
    min-width: 2.5em;
}

.chat-tool-op.active .chat-tool-op-dots::after {
    content: '...';
    animation: tool-dots 1.2s steps(4) infinite;
    color: #6b7280;
}

@keyframes tool-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* ================================================================
   CALENDAR — Week view grid
   ================================================================ */
.cal-view-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.cal-view-toggle {
    display: inline-flex;
    gap: 2px;
    background: rgba(55, 65, 81, 0.3);
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 0.5rem;
    padding: 2px;
}

.cal-view-btn {
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.cal-view-btn:hover {
    color: #b3fcfa;
}

.cal-view-btn.active {
    background: rgba(0, 229, 255, 0.15);
    color: var(--gc-cyan);
}

.cal-week-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    gap: 0;
    border: 1px solid rgba(75, 85, 99, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
}

.cal-week-header {
    padding: 0.5rem 0.375rem;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    background: rgba(17, 24, 39, 0.5);
    border-bottom: 1px solid rgba(75, 85, 99, 0.2);
}

.cal-week-header.today {
    color: var(--gc-cyan);
}

.cal-week-time {
    padding: 0.25rem 0.375rem;
    font-size: 0.625rem;
    font-family: var(--gc-font-mono);
    color: #4b5563;
    text-align: right;
    border-right: 1px solid rgba(75, 85, 99, 0.15);
    border-bottom: 1px solid rgba(75, 85, 99, 0.1);
    height: 48px;
}

.cal-week-slot {
    position: relative;
    border-bottom: 1px solid rgba(75, 85, 99, 0.1);
    border-right: 1px solid rgba(75, 85, 99, 0.08);
    height: 48px;
    cursor: pointer;
    transition: background 0.15s;
}

.cal-week-slot:hover {
    background: rgba(0, 229, 255, 0.03);
}

.cal-week-event {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 0.625rem;
    line-height: 1.3;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

/* Week view: all-day row */
.cal-week-allday-label {
    padding: 0.25rem 0.375rem;
    font-size: 0.6rem;
    font-family: var(--gc-font-mono);
    color: var(--gc-cyan-dim);
    text-align: right;
    border-right: 1px solid rgba(75, 85, 99, 0.15);
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    background: rgba(0, 229, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.cal-week-allday-slot {
    min-height: 28px;
    max-height: 72px;
    overflow-y: auto;
    padding: 2px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    border-right: 1px solid rgba(75, 85, 99, 0.08);
    background: rgba(0, 229, 255, 0.02);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cal-week-allday-pill {
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.58rem;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    flex-shrink: 0;
}

/* Day (Today) view */
.cal-today-view {
    max-width: 620px;
    margin: 0 auto;
}
.cal-today-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.cal-today-date-label {
    font-family: var(--gc-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gc-text-primary);
}
.cal-today-allday {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.03);
    border: 1px solid rgba(0, 229, 255, 0.1);
    margin-bottom: 1rem;
}
.cal-today-allday-label {
    font-family: var(--gc-font-mono);
    font-size: 0.65rem;
    color: var(--gc-cyan-dim);
    text-transform: uppercase;
    flex-shrink: 0;
    padding-top: 3px;
}
.cal-today-allday-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}
.cal-today-allday-chip {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: opacity 0.15s;
}
.cal-today-allday-chip:hover { opacity: 0.8; }
.cal-today-timeline {
    --cal-hour-height: 56px;
    position: relative;
    overflow: hidden;
}
.cal-today-hour {
    display: flex;
    gap: 12px;
    height: var(--cal-hour-height);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.04);
    box-sizing: border-box;
}
.cal-today-hour-label {
    flex-shrink: 0;
    width: 48px;
    font-family: var(--gc-font-mono);
    font-size: 0.65rem;
    color: var(--gc-text-tertiary);
    text-align: right;
    padding-top: 2px;
}
.cal-today-events-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cal-today-event {
    position: absolute;
    left: 60px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.15s;
    z-index: 1;
    pointer-events: auto;
    overflow: hidden;
    box-sizing: border-box;
}
.cal-today-event:hover {
    background: rgba(255,255,255,0.08);
}
.cal-today-event-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cal-today-event-title {
    font-size: 0.82rem;
    color: var(--gc-text-primary);
    font-weight: 500;
}
.cal-today-event-time {
    display: block;
    font-family: var(--gc-font-mono);
    font-size: 0.68rem;
    color: var(--gc-cyan-dim);
    margin-top: 2px;
}
.cal-today-event-loc {
    display: block;
    font-size: 0.68rem;
    color: var(--gc-text-tertiary);
    margin-top: 1px;
}
/* Current time indicator */
.cal-today-now {
    position: absolute;
    left: 60px;
    right: 8px;
    height: 2px;
    background: var(--gc-cyan);
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0 6px var(--gc-cyan-glow);
}
.cal-today-now::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gc-cyan);
}
.cal-today-now-label {
    position: absolute;
    left: -52px;
    top: -6px;
    font-family: var(--gc-font-mono);
    font-size: 0.6rem;
    color: var(--gc-cyan);
    font-weight: 600;
}

.cal-recurrence-icon {
    font-size: 0.5625rem;
    margin-left: 2px;
    opacity: 0.7;
}

/* Calendar nav bar */
.cal-nav-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    gap: 0.75rem;
}
.cal-nav-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gc-text-primary);
    white-space: nowrap;
    min-width: 0;
    text-align: center;
}
.cal-nav-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: transparent;
    color: var(--gc-text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.cal-nav-arrow:hover {
    color: var(--gc-cyan);
    border-color: var(--gc-cyan-border);
    background: var(--gc-cyan-subtle);
}

/* ================================================================
   TASK LAUNCHER — Redesigned layout
   ================================================================ */

/* -- Hero section -- */
.tl-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .tl-hero-grid { grid-template-columns: 1fr; }
}

.tl-hero-card {
    position: relative;
    background: var(--gc-bg-surface);
    backdrop-filter: blur(12px);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.tl-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--hero-color, #6b7280);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.tl-hero-card:hover {
    border-color: var(--hero-color, rgba(0, 229, 255, 0.4));
    transform: translateY(-2px);
}

.tl-hero-card:hover::before {
    opacity: 1;
}

.tl-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    background: var(--hero-color-bg, rgba(107, 114, 128, 0.15));
    color: var(--hero-color, #6b7280);
}

.tl-hero-card h3 {
    font-family: var(--gc-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--gc-text-primary);
    margin-bottom: 0.25rem;
}

.tl-hero-card p {
    font-size: 0.75rem;
    color: var(--gc-text-tertiary);
}

/* -- Search bar -- */
.tl-search {
    position: relative;
    max-width: 280px;
}

.tl-search input {
    width: 100%;
    background: var(--gc-bg-3);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius);
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    font-family: var(--gc-font-body);
    font-size: 0.8125rem;
    color: var(--gc-text-primary);
    transition: border-color 0.15s;
}

.tl-search input::placeholder { color: var(--gc-text-muted); }

.tl-search input:focus {
    outline: none;
    border-color: var(--gc-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}

.tl-search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: #4b5563;
    pointer-events: none;
}

/* -- Filter tabs -- */
.tl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.tl-filter-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: 1px solid rgba(75, 85, 99, 0.25);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tl-filter-tab:hover {
    color: #9ca3af;
    border-color: rgba(75, 85, 99, 0.5);
}

.tl-filter-tab.active {
    color: #e5e7eb;
    background: rgba(75, 85, 99, 0.25);
    border-color: rgba(75, 85, 99, 0.5);
}

/* -- Category headers (redesigned) -- */
.tl-category-header {
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4b5563;
    padding: 0.75rem 0 0.375rem;
    border-bottom: 1px solid rgba(75, 85, 99, 0.15);
    margin-bottom: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tl-category-header:hover {
    color: #6b7280;
}

.tl-cat-icon {
    display: inline-flex;
    color: var(--cat-color, #4b5563);
    opacity: 0.7;
}

.tl-cat-count {
    font-family: var(--gc-font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    color: #4b5563;
    background: rgba(75, 85, 99, 0.2);
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
}

.tl-cat-spacer {
    flex: 1;
}

.tl-category-chevron {
    font-size: 0.625rem;
    transition: transform 0.2s;
}

.tl-category-chevron.collapsed {
    transform: rotate(-90deg);
}

/* -- Redesigned template card -- */
.tl-card {
    --card-color: #6b7280;
    position: relative;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(75, 85, 99, 0.25);
    border-left: 3px solid transparent;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tl-card:hover {
    border-left-color: var(--card-color);
    border-color: rgba(75, 85, 99, 0.4);
    transform: translateY(-1px);
}

.tl-card.selected {
    border-left-color: var(--card-color);
    border-color: var(--card-color);
    background: color-mix(in srgb, var(--card-color) 8%, rgba(17, 24, 39, 0.5));
}

.tl-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.375rem;
}

.tl-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--card-color) 15%, transparent);
    color: var(--card-color);
}

.tl-card-title-row {
    flex: 1;
    min-width: 0;
}

.tl-card-title {
    font-family: var(--gc-font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--gc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-card-type-badge {
    font-family: var(--gc-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.tl-card-desc {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
    padding-left: 2.875rem; /* align with title (36px icon + 10px gap) */
}

.tl-card-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding-left: 2.875rem;
}

.tl-card-tool {
    font-size: 0.625rem;
    font-family: var(--gc-font-mono);
    color: #4b5563;
    background: rgba(55, 65, 81, 0.3);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.tl-card-tool--overflow {
    color: #4b5563;
    font-weight: 600;
}

/* -- Card grid -- */
.tl-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 1024px) {
    .tl-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .tl-card-grid { grid-template-columns: 1fr; }
}

.tl-cron-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.tl-cron-preset {
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    background: rgba(55, 65, 81, 0.4);
    border: 1px solid rgba(75, 85, 99, 0.3);
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s;
}

.tl-cron-preset:hover,
.tl-cron-preset.active {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.25);
    color: var(--gc-cyan);
}

.tl-cron-preview {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    color: #6b7280;
    padding: 0.25rem 0.5rem;
    background: rgba(55, 65, 81, 0.2);
    border-radius: 0.375rem;
}

/* Embedded workflow editor container */
.tl-editor-embed {
    height: 500px;
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
}

.tl-editor-embed .wfe-canvas-container {
    min-height: 0;
}

.tl-editor-embed .wfe-inspector {
    max-height: 100%;
    overflow-y: auto;
}

/* Recurring toggle switch */
.tl-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.tl-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.tl-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(55, 65, 81, 0.6);
    border: 1px solid rgba(75, 85, 99, 0.3);
    border-radius: 9999px;
    transition: all 0.2s;
}

.tl-toggle-slider::before {
    content: '';
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background: #9ca3af;
    border-radius: 50%;
    transition: all 0.2s;
}

.tl-toggle input:checked + .tl-toggle-slider {
    background: rgba(0, 229, 255, 0.2);
    border-color: rgba(0, 229, 255, 0.4);
}

.tl-toggle input:checked + .tl-toggle-slider::before {
    transform: translateX(16px);
    background: var(--gc-cyan);
}

/* ================================================================
   TRIPS — Itinerary day columns
   ================================================================ */
.trip-itin-days {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.trip-itin-day {
    min-width: 220px;
    flex-shrink: 0;
    background: var(--gc-bg-surface);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius);
    padding: 0.625rem;
}

.trip-itin-day-header {
    font-family: var(--gc-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--gc-text-primary);
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--gc-border-subtle);
    margin-bottom: 0.5rem;
}

.trip-itin-day-date {
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    color: var(--gc-text-muted);
    font-weight: 400;
}

.trip-itin-slot {
    font-family: var(--gc-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4b5563;
    padding: 0.375rem 0 0.125rem;
}

.trip-itin-item {
    padding: 0.375rem 0.5rem;
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.08);
    border-radius: 0.375rem;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: #d1d5db;
}

.trip-itin-item-notes {
    font-size: 0.625rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

/* ===== System Telemetry — HUD status panel ===== */

.sys-telem {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 229, 255, 0.12);
}

/* Scanline overlay */
.sys-telem::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 229, 255, 0.025) 2px,
        rgba(0, 229, 255, 0.025) 4px
    );
    z-index: 1;
}

/* Animated sweep line */
.sys-telem::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 229, 255, 0.06) 48%,
        rgba(0, 229, 255, 0.12) 50%,
        rgba(0, 229, 255, 0.06) 52%,
        transparent 100%
    );
    background-size: 100% 40px;
    animation: wfm-scanline 4s linear infinite;
    z-index: 1;
}

.sys-telem-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 2;
}

.sys-telem-label {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gc-cyan);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sys-telem-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 2;
}

.sys-telem-row {
    border-radius: 0.375rem;
    transition: background 0.15s ease;
}

.sys-telem-row:hover {
    background: rgba(0, 229, 255, 0.04);
}

.sys-telem-row--disabled {
    opacity: 0.4;
}

.sys-telem-row--disabled .sys-telem-name {
    text-decoration: line-through;
}

.sys-telem-row--editing {
    background: rgba(0, 229, 255, 0.04);
}

.sys-telem-row-main {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    cursor: pointer;
}

.sys-telem-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #4b5563;
}

.sys-telem-dot--ok { background: #4ade80; }
.sys-telem-dot--running { background: #60a5fa; animation: pulse-dot 1.5s ease-in-out infinite; }
.sys-telem-dot--failed { background: #f87171; }
.sys-telem-dot--stale { background: #fbbf24; opacity: 0.6; }

.sys-telem-icon {
    flex-shrink: 0;
    color: var(--gc-text-secondary);
}

.sys-telem-name {
    font-family: var(--gc-font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gc-text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sys-telem-time,
.sys-telem-next {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    color: var(--gc-text-tertiary);
    white-space: nowrap;
    text-align: right;
}

.sys-telem-time { min-width: 5rem; }
.sys-telem-next { min-width: 5rem; }

.sys-telem-gear {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--gc-text-tertiary);
    cursor: pointer;
    border-radius: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.sys-telem-row:hover .sys-telem-gear,
.sys-telem-row--editing .sys-telem-gear {
    opacity: 1;
}

.sys-telem-gear:hover {
    color: var(--gc-cyan);
}

.sys-telem-run {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--gc-text-tertiary);
    cursor: pointer;
    border-radius: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.sys-telem-row:hover .sys-telem-run,
.sys-telem-row--editing .sys-telem-run {
    opacity: 1;
}

.sys-telem-run:hover {
    color: var(--gc-amber);
}

.sys-telem-run:disabled {
    opacity: 0.4;
    cursor: wait;
}

.sys-telem-trash {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--gc-text-tertiary);
    cursor: pointer;
    border-radius: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.sys-telem-row:hover .sys-telem-trash,
.sys-telem-row--editing .sys-telem-trash {
    opacity: 1;
}

.sys-telem-trash:hover {
    color: var(--gc-red);
}

.sys-telem-group-header {
    font-family: var(--gc-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--gc-text-tertiary);
    text-transform: uppercase;
    padding: 0.5rem 0.625rem 0.125rem;
    opacity: 0.6;
}

/* Slide-down detail panel */
.sys-telem-detail {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.sys-telem-row--editing .sys-telem-detail {
    max-height: 400px;
    opacity: 1;
}

.sys-telem-detail-inner {
    margin: 0 0.625rem 0.5rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 0.375rem;
}

.sys-telem-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gc-border-subtle);
}

/* ── Amber variant (User Schedules panel) ── */

.sys-telem--amber {
    border-color: var(--gc-amber-border);
}

.sys-telem--amber::before {
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(240, 160, 0, 0.025) 2px,
        rgba(240, 160, 0, 0.025) 4px
    );
}

.sys-telem--amber::after {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(240, 160, 0, 0.06) 48%,
        rgba(240, 160, 0, 0.12) 50%,
        rgba(240, 160, 0, 0.06) 52%,
        transparent 100%
    );
    background-size: 100% 40px;
    animation: wfm-scanline 4s linear infinite;
}

.sys-telem-label--amber {
    color: var(--gc-amber);
}

.sys-telem-dot--amber {
    background: var(--gc-amber);
}

.wfm-live-dot--amber {
    background: var(--gc-amber);
    box-shadow: 0 0 6px rgba(240, 160, 0, 0.5);
}

.sys-telem--amber .sys-telem-row:hover {
    background: rgba(240, 160, 0, 0.04);
}

.sys-telem--amber .sys-telem-row--editing {
    background: rgba(240, 160, 0, 0.04);
}

.sys-telem--amber .sys-telem-gear:hover {
    color: var(--gc-amber);
}

.sys-telem-add-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gc-border-subtle);
    background: transparent;
    color: var(--gc-text-tertiary);
    cursor: pointer;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1;
    transition: var(--gc-transition);
    margin-left: auto;
}

.sys-telem-add-btn:hover {
    color: var(--gc-amber);
    border-color: var(--gc-amber-border);
    background: var(--gc-amber-subtle);
}

.upcoming-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--gc-bg-surface);
    backdrop-filter: blur(12px);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius);
    cursor: pointer;
    transition: var(--gc-transition);
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gc-text-primary);
}

.upcoming-pill:hover {
    border-color: rgba(0, 229, 255, 0.4);
    background: rgba(0, 229, 255, 0.06);
}

.pill-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--gc-text-tertiary);
}

.pill-time {
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    color: var(--gc-cyan);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #4b5563;
}

.status-dot--ok {
    background: #4ade80;
}

.status-dot--running {
    background: #60a5fa;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.status-dot--failed {
    background: #f87171;
}

.status-dot--stale {
    background: #fbbf24;
    opacity: 0.6;
}

/* Task card — system variant */
.task-card--system {
    border-left: 3px solid #4b5563;
}

/* Task card — chain/workflow variant */
.task-card--chain {
    border-left: 3px solid var(--gc-blue, #00e5ff);
}

/* Task card icon container */
.task-card-icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
    flex-shrink: 0;
}

/* Filter tabs — pill-shaped category filters */
.filter-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--gc-text-tertiary);
    background: transparent;
    border: 1px solid var(--gc-border-subtle);
    cursor: pointer;
    transition: var(--gc-transition);
}

.filter-tab:hover {
    color: #b3fcfa;
    border-color: var(--gc-cyan-border);
}

.filter-tab.active {
    color: var(--gc-cyan);
    background: var(--gc-cyan-subtle);
    border-color: rgba(0, 229, 255, 0.4);
}

/* Task Launcher — system section separator */
.tl-system-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(75, 85, 99, 0.3);
    opacity: 0.75;
}

.tl-system-section:hover {
    opacity: 1;
}

/* ===== Research Modal ===== */
.research-modal-card {
    animation: research-modal-enter 0.25s ease;
}

@keyframes research-modal-enter {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.research-modal-exit {
    animation: research-modal-exit 0.3s ease forwards;
}

@keyframes research-modal-exit {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(1.02) translateY(-12px); }
}

/* ===== Contact Import Modal ===== */
.import-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.import-modal-card {
    width: 90%;
    max-width: 460px;
    padding: 1.5rem;
    animation: research-modal-enter 0.25s ease;
}

.import-dropzone {
    border: 2px dashed rgba(0, 240, 255, 0.15);
    border-radius: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.import-dropzone:hover,
.import-dropzone.dragover {
    border-color: rgba(0, 240, 255, 0.4);
    background: rgba(0, 240, 255, 0.04);
}

.import-results {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   Chain / Workflow Detail View
   ═══════════════════════════════════════════════════════════════ */

.chain-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.75rem;
}

.chain-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 0.75rem 1rem;
}

.chain-detail-body {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
}

.chain-detail-canvas {
    flex: 2;
    min-height: 200px;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid var(--gc-border-subtle);
    background-image:
        radial-gradient(circle, rgba(75, 85, 99, 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
}

.chain-detail-canvas .wfe-readonly-canvas {
    min-width: unset;
    min-height: unset;
    border: none;
    border-radius: 0;
}

.chain-detail-inspector {
    flex: 1;
    min-width: 320px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.chain-inspector-header {
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gc-text-primary);
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--gc-border-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.chain-inspector-tabs {
    display: flex;
    border-bottom: 1px solid var(--gc-border-subtle);
    flex-shrink: 0;
}

.chain-inspector-tab {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gc-text-tertiary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    text-align: center;
}

.chain-inspector-tab:hover {
    color: var(--gc-text-secondary);
}

.chain-inspector-tab.active {
    color: var(--gc-cyan);
    border-bottom-color: var(--gc-cyan);
}

.chain-inspector-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--gc-text-secondary);
}

.chain-inspector-body pre {
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
}

.chain-inspector-section {
    margin-bottom: 0.75rem;
}

.chain-inspector-section-title {
    font-family: var(--gc-font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gc-text-tertiary);
    margin-bottom: 0.375rem;
}

.chain-output-md {
    font-size: 0.8125rem;
    line-height: 1.7;
}

.chain-output-md p { margin-bottom: 0.5rem; }
.chain-output-md code {
    background: rgba(75, 85, 99, 0.2);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

/* --- Node viewer-selected state --- */
.dag-node--viewer-selected {
    border-color: var(--gc-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.25), 0 0 20px rgba(0, 229, 255, 0.15);
}

/* --- Edge animation states --- */
.dag-edge--flowing {
    stroke: var(--gc-cyan);
    stroke-width: 3;
    stroke-dasharray: 8 12;
    animation: edge-flow-particles 1s linear infinite;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
}

.dag-edge--completed {
    stroke: #22c55e;
    stroke-dasharray: none;
    opacity: 1;
    animation: none;
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4));
}

.dag-edge--failed {
    stroke: var(--gc-red);
    stroke-dasharray: 6 3;
    opacity: 0.85;
    animation: none;
}

@keyframes node-running-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(59, 130, 246, 0.2); }
    50% { box-shadow: 0 0 24px rgba(59, 130, 246, 0.5), 0 0 48px rgba(59, 130, 246, 0.15); }
}

@keyframes node-complete-flash {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
    40% { transform: scale(1.04); box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(34, 197, 94, 0.25); }
}

@keyframes edge-flow-particles {
    to { stroke-dashoffset: -40; }
}

/* ===== Schedule Manager ===== */

.sched-section-label {
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gc-text-tertiary);
    margin-bottom: 0.5rem;
    padding-left: 0.125rem;
}

/* .sched-card is a JS query scope only — no visual styles needed */

.sched-cron-badge {
    display: inline-block;
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 4px;
    color: var(--gc-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.sched-preset-btn {
    font-family: var(--gc-font-mono);
    font-size: 0.625rem;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    border: 1px solid var(--gc-border-subtle);
    background: transparent;
    color: var(--gc-text-secondary);
    cursor: pointer;
    transition: var(--gc-transition);
}

.sched-preset-btn:hover {
    border-color: var(--gc-cyan-border);
    color: var(--gc-cyan);
    background: var(--gc-cyan-subtle);
}

/* --- Chat Context Badge --- */
.chat-context-badge {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 1rem;
    background: var(--gc-cyan-subtle);
    border-bottom: 1px solid var(--gc-border-subtle);
    font-size: 0.75rem;
    color: var(--gc-cyan-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.chat-context-badge-label {
    color: var(--gc-text-tertiary);
    flex-shrink: 0;
}

/* --- Contact Enrichment --- */
.enrichment-status-bar {
    font-size: 0.8125rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--gc-border-subtle);
}

.enrichment-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.enrichment-badge.pending {
    background: var(--gc-amber);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.enrichment-badge.enriched {
    background: var(--gc-green);
}

.enrichment-badge.stale {
    background: var(--gc-amber-dim);
}

.enrichment-badge.failed {
    background: var(--gc-red);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Relationship temperature dot */
.temp-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--td-color, var(--gc-text-tertiary));
}
.temp-dot-pulse {
    animation: pulse-dot 1.5s ease-in-out infinite;
}

/* Relationship health panel boxes */
.health-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.5rem;
    border-radius: var(--gc-radius);
    border: 1px solid var(--gc-border-subtle);
    background: transparent;
    cursor: pointer;
    transition: var(--gc-transition);
    color: var(--gc-text-secondary);
}
.health-box:hover {
    border-color: var(--hb-color, var(--gc-cyan));
    background: rgba(255,255,255,0.02);
}
.health-box.active {
    border-color: var(--hb-color, var(--gc-cyan));
    background: color-mix(in srgb, var(--hb-color) 10%, transparent);
}
.health-box-count {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--gc-font-display);
    color: var(--hb-color, var(--gc-text-primary));
}
.health-box-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.enrichment-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gc-border-subtle);
}

.enrichment-social-icons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.enrichment-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--gc-radius-sm);
    border: 1px solid var(--gc-border-subtle);
    color: var(--gc-text-secondary);
    font-size: 0.625rem;
    font-weight: 700;
    font-family: var(--gc-font-mono);
    text-decoration: none;
    transition: var(--gc-transition);
}

.enrichment-social-link:hover {
    border-color: var(--gc-cyan-border);
    color: var(--gc-cyan);
    background: var(--gc-cyan-subtle);
}

.enrichment-collapsible {
    margin-top: 0.5rem;
}

.enrichment-collapsible summary {
    padding: 0.25rem 0;
    user-select: none;
}

.enrichment-timeline {
    padding-left: 0.75rem;
    border-left: 2px solid var(--gc-border-subtle);
    margin-top: 0.375rem;
}

.enrichment-timeline-item {
    padding: 0.375rem 0 0.375rem 0.75rem;
    position: relative;
}

.enrichment-timeline-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 0.625rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gc-bg-3);
    border: 2px solid var(--gc-cyan-border);
}

.enrichment-confidence {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--gc-font-mono);
    color: var(--conf-color, var(--gc-text-secondary));
    border: 1px solid currentColor;
    opacity: 0.8;
}

/* ===== Ghost Whisper ===== */
.ghost-whisper {
    font-family: var(--gc-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--gc-text-tertiary);
    text-transform: uppercase;
    min-height: 1.2em;
    margin-top: 0.35rem;
}

.whisper-mood-glow {
    color: var(--gc-cyan);
    text-shadow: 0 0 6px var(--gc-cyan-glow), 0 0 14px rgba(0, 229, 255, 0.15);
    animation: whisper-pulse 3s ease-in-out infinite;
}

@keyframes whisper-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 6px var(--gc-cyan-glow); }
    50% { opacity: 0.85; text-shadow: 0 0 10px var(--gc-cyan-glow), 0 0 24px rgba(0, 229, 255, 0.25); }
}

/* ===== Weather Page ===== */
.weather-hero-temp {
    font-family: var(--gc-font-display);
    font-size: 5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--gc-cyan);
    text-shadow: 0 0 20px var(--gc-cyan-glow), 0 0 40px rgba(0, 229, 255, 0.15);
}

.weather-tab-bar {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    background: var(--gc-bg-2);
    border: 1px solid var(--gc-border);
    overflow-x: auto;
}

.weather-tab {
    padding: 0.4rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-family: var(--gc-font-mono);
    color: var(--gc-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.weather-tab:hover {
    color: var(--gc-text-primary);
    background: var(--gc-bg-3);
}

.weather-tab.active {
    color: var(--gc-cyan);
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid var(--gc-cyan-border);
}

.weather-hourly {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0.75rem 0;
}

.weather-hourly::-webkit-scrollbar {
    display: none;
}

.weather-hour-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 3.5rem;
    padding: 0.5rem 0.25rem;
    scroll-snap-align: start;
    font-size: 0.75rem;
    color: var(--gc-text-secondary);
}

.weather-hour-col .hour-time {
    font-family: var(--gc-font-mono);
    font-size: 0.65rem;
    color: var(--gc-text-tertiary);
    text-transform: uppercase;
}

.weather-hour-col .hour-temp {
    font-family: var(--gc-font-display);
    font-size: 0.9rem;
    color: var(--gc-text-primary);
}

.weather-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .weather-detail-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.weather-detail-tile {
    background: var(--gc-bg-surface);
    border: 1px solid var(--gc-border);
    border-radius: 0.75rem;
    padding: 1rem;
    backdrop-filter: blur(8px);
}

.weather-detail-label {
    font-family: var(--gc-font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gc-text-tertiary);
    margin-bottom: 0.5rem;
}

.weather-detail-value {
    font-family: var(--gc-font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--gc-text-primary);
    line-height: 1.2;
}

.weather-detail-sub {
    font-size: 0.7rem;
    color: var(--gc-text-tertiary);
    margin-top: 0.25rem;
}

.weather-sun-track {
    position: relative;
    height: 4px;
    background: var(--gc-bg-3);
    border-radius: 2px;
    margin: 1rem 0 0.5rem;
}

.weather-sun-track .sun-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gc-amber-dim), var(--gc-amber), var(--gc-amber-dim));
}

.weather-sun-track .sun-dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gc-amber);
    box-shadow: 0 0 8px var(--gc-amber), 0 0 16px rgba(240, 160, 0, 0.3);
    transform: translate(-50%, -50%);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .chain-detail-body { flex-direction: column; }
    .chain-detail-canvas { max-height: 300px; }
    .chain-detail-inspector { max-width: none; min-width: 0; }
    .weather-hero-temp { font-size: 4rem; }
}

/* ================================================================
   MOBILE RESPONSIVENESS — Native App Feel
   ================================================================ */

/* ── View Header Row (title + action button) ── */
.view-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Overview Hero Layout ── */
.overview-hero {
    position: relative;
}

.overview-hero-clock {
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    z-index: 2;
}

.overview-hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 3.75rem 0 2.75rem;
}

.overview-hero-title {
    font-family: 'Share Tech Mono', var(--gc-font-mono);
    font-size: 1.65rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.5);
}

/* "Geist" name — the focal punch */
.overview-hero-title .hero-name {
    color: var(--gc-cyan);
    text-shadow: 0 0 10px var(--gc-cyan-glow), 0 0 28px rgba(0, 229, 255, 0.18);
    letter-spacing: 0.18em;
}

.overview-hero-prompt {
    font-family: 'Share Tech Mono', var(--gc-font-mono);
    color: var(--gc-cyan-deep);
    font-weight: 400;
    font-size: 0.65em;
    opacity: 0.4;
    margin-right: 0.1em;
}

.overview-hero-date {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--gc-text-tertiary);
    font-family: var(--gc-font-mono);
    position: relative;
    z-index: 2;
    margin-top: 0.6rem;
}

/* Whisper in hero context — render over entity */
.overview-hero-center .ghost-whisper {
    position: relative;
    z-index: 2;
}

/* ── Voice Transcript HUD ── */
#voice-transcript-hud {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    max-width: 360px;
    margin: 0.5rem 0;
    pointer-events: none;
    position: relative;
    z-index: 2;
    min-height: 0;
}

.vt-msg {
    font-family: var(--gc-font-mono);
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    max-width: 100%;
    word-break: break-word;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.vt-msg-visible {
    opacity: 1;
    transform: translateY(0);
}
.vt-msg-fading {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.vt-msg-user {
    align-self: center;
    color: #00E5FF;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.15);
    text-align: center;
}
.vt-msg-assistant {
    align-self: center;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.overview-hero-cost {
    position: absolute;
    bottom: 0.5rem;
    left: 1rem;
    z-index: 2;
}

/* Compact cost indicator */
.hero-cost-compact {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-family: var(--gc-font-mono);
    opacity: 0.45;
    cursor: default;
    transition: opacity 0.2s;
}
.hero-cost-compact:hover {
    opacity: 0.8;
}
.hero-cost-value {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--gc-text-tertiary);
    letter-spacing: 0.02em;
}
.hero-cost-delta {
    font-size: 0.55rem;
    font-weight: 600;
}

/* ── GHOST Entity — integrated presence indicator ── */
.ghost-entity-overview {
    /* Layout footprint stays compact — the canvas overflows */
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    pointer-events: auto;
    margin: 0.35rem 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
    overflow: visible;
}

.ghost-entity-overview canvas {
    display: block;
    /* Center the oversized canvas over its container */
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Radial fade — particles dissolve before hitting the canvas edge */
    -webkit-mask-image: radial-gradient(ellipse 72% 72% at center, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 72% at center, #000 35%, transparent 100%);
}

/* Fallback when WebGL unavailable */
.entity-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}
.entity-fallback::after {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.25) 0%, transparent 70%);
    animation: entity-fallback-pulse 3s ease-in-out infinite;
}
@keyframes entity-fallback-pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50%      { transform: scale(1.2); opacity: 0.6; }
}

/* ── Sidebar Backdrop (tablet + phone) ── */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Hide backdrop on desktop */
@media (min-width: 1024px) {
    .sidebar-backdrop { display: none; }
}

/* ── Tablet (max-width: 1023px) ── */
@media (max-width: 1023px) {
    /* Ensure sidebar is above backdrop */
    .sidebar { z-index: 45; }

    /* Give content room for the hamburger */
    #content { padding-top: 3.5rem; }

    /* Reduce padding */
    #content { padding-left: 1rem; padding-right: 1rem; }
}

/* ── Phone (max-width: 640px) ── */
@media (max-width: 640px) {
    /* ── Global ── */
    #content {
        padding: 3.5rem 0.75rem 1.5rem !important;
        max-width: 100%;
    }

    /* Smaller view titles */
    .hud-view-title { font-size: 1.2rem; }
    .hud-view-subtitle { font-size: 0.65rem; }

    /* Section labels */
    .hud-section-label { font-size: 0.75rem; }

    /* Buttons: minimum 44px touch targets (Apple HIG / WCAG) */
    .gc-btn,
    .ask-ghost-btn,
    .filter-tab,
    .tag-chip,
    .cal-view-btn,
    .wfm-filter-pill,
    .tl-filter-tab,
    .email-action-pill,
    .dossier-action-btn,
    .gw-action-btn,
    .chat-suggestion,
    .sys-telem-add-btn,
    .toggle {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Text links used as actions: ensure tappable */
    .hud-view-header a,
    .view-header-row a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Nav links: taller touch targets */
    .nav-link {
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
    }

    /* ── Overview ── */
    .overview-hero {
        padding: 0.875rem;
        padding-top: 2.25rem;
        padding-bottom: 1.75rem;
    }

    .overview-hero-clock {
        top: 0.5rem;
        left: 0.75rem;
        font-size: 1rem;
    }
    .overview-hero-clock .text-lg { font-size: 0.75rem !important; }

    .overview-hero-center {
        padding: 2.75rem 0 2.25rem;
    }

    .overview-hero-title {
        font-size: 1.15rem;
        letter-spacing: 0.1em;
    }

    .ghost-entity-overview {
        width: 140px;
        height: 140px;
        margin: 0.2rem 0;
    }

    .overview-hero-cost {
        bottom: 0.375rem;
        left: 0.75rem;
    }

    .ghost-clock {
        font-size: 1.25rem;
    }

    /* Whisper text */
    .ghost-whisper { font-size: 0.6rem; }

    /* Voice transcript HUD */
    #voice-transcript-hud { max-width: 280px; }
    .vt-msg { font-size: 0.65rem; padding: 0.25rem 0.5rem; }

    /* ── Dashboard ── */
    /* WFM row: hide duration text, let title truncate */
    .wfm-duration { display: none; }
    .wfm-progress-track { width: 50px; }
    .wfm-row-summary { padding: 0.625rem 0.75rem; gap: 0.5rem; }
    .wfm-step-output { max-width: 200px; }

    /* System telemetry: hide next-run column, allow names to wrap */
    .sys-telem-next { display: none; }
    .sys-telem-time { font-size: 0.6rem; min-width: 3.5rem; }
    .sys-telem-name { font-size: 0.75rem; }
    .sys-telem-row-main { gap: 0.375rem; padding: 0.5rem 0.375rem; }

    /* ── Calendar ── */
    /* Nav: compact */
    .cal-nav-bar { gap: 0.5rem; }
    .cal-nav-label { font-size: 0.85rem; }
    .cal-nav-arrow { width: 28px; height: 28px; }
    /* Smaller cells */
    .cal-cell {
        min-height: 3.25rem;
        padding: 0.25rem;
    }

    .cal-day { font-size: 0.6rem; }
    .cal-pill { font-size: 0.5rem; padding: 1px 2px; min-height: 16px; }
    .cal-header { font-size: 0.5625rem; padding: 0.375rem 0; }
    .cal-add-btn { opacity: 1; width: 14px; height: 14px; font-size: 0.65rem; }

    /* Week view: full width, no horizontal scroll — compress columns */
    .cal-week-grid {
        grid-template-columns: 36px repeat(7, 1fr);
    }
    .cal-week-header { font-size: 0.5rem; padding: 0.3rem 0.125rem; }
    .cal-week-time { font-size: 0.5rem; height: 40px; padding: 0.2rem 0.125rem; }
    .cal-week-slot { height: 40px; }
    .cal-week-event { font-size: 0.5rem; padding: 1px 2px; }
    .cal-week-allday-label { font-size: 0.45rem; padding: 0.15rem 0.125rem; }
    .cal-week-allday-pill { font-size: 0.45rem; padding: 1px 3px; }
    .cal-week-allday-slot { max-height: 52px; }

    /* Today/Day view: full width */
    .cal-today-view { max-width: none; }
    .cal-today-date-label { font-size: 0.9rem; }
    .cal-today-hour-label { width: 38px; font-size: 0.6rem; }
    .cal-today-event { padding: 5px 8px; }
    .cal-today-event-title { font-size: 0.78rem; }
    .cal-today-now-label { left: -42px; font-size: 0.55rem; }
    .cal-today-now { left: 46px; }

    /* Calendar popover: full width */
    .cal-popover { width: calc(100vw - 2rem); left: 1rem !important; right: 1rem !important; }

    /* ── Contacts ── */
    /* Contact cards: stack horizontally */
    .contact-card.glass { flex-direction: column; }

    /* Dossier: compact padding */
    .dossier-identity { padding: 0.75rem; gap: 0.75rem; }
    .dossier-fields { padding: 0 0.75rem; }
    .dossier-footer { padding: 0.5rem 0.75rem; flex-wrap: wrap; gap: 0.375rem; }

    /* ── Email ── */
    .email-detail-subject { flex-direction: column; gap: 0.375rem; }
    .email-detail-sender-row { flex-direction: column; align-items: flex-start; }
    .email-detail-date { text-align: left; margin-top: 0.25rem; }
    .email-detail-actions { width: 100%; }
    .email-action-pill { flex: 1; justify-content: center; }

    /* ── Research ── */
    .research-note-layout { display: block; }

    /* Research chat FAB position */
    .rc-fab { bottom: 80px; right: 16px; }

    /* ── Workflow Editor ── */
    .wfe-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.375rem;
        padding: 0.375rem 0.5rem;
    }

    .wfe-inspector {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        max-height: 50vh;
        z-index: 20;
        border-left: none;
        border-top: 1px solid var(--gc-border-subtle);
        border-radius: 12px 12px 0 0;
        animation: mobile-sheet-up 0.3s ease;
    }

    .wfe-readonly-canvas { min-width: 400px; }

    /* ── Task Launcher ── */
    .tl-search { max-width: 100%; }
    .tl-filter-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; }
    .tl-filter-tab { flex-shrink: 0; }

    /* ── Trips ── */
    .trip-itin-day { min-width: 200px; }

    /* ── Gateway ── */
    .gw-stats-row { flex-direction: column; }
    .gw-stat-card { min-width: 0; }
    .gw-config-row { flex-direction: column; align-items: flex-start; }
    .gw-config-label { min-width: 0; }

    /* ── Task Viewer ── */
    /* Follow-up input bar: stick to bottom on mobile */
    .follow-up-input-bar {
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        border-radius: 0;
        padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
    }

    .follow-up-textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* ── Shopping ── */
    /* Shopping items: ensure touch-friendly rows */
    .shopping-item {
        min-height: 44px;
    }

    /* ── Skills ── */
    .skills-stats { grid-template-columns: repeat(2, 1fr); }

    /* ── Toast: center on mobile ── */
    #toast-container {
        right: 50% !important;
        transform: translateX(50%);
        width: calc(100vw - 2rem);
        max-width: 360px;
    }

    /* ── Modal overlays: safe area ── */
    .import-modal-card { width: 95%; }

    /* ── Menu toggle button: ensure above content ── */
    #menu-toggle { z-index: 50; }

    /* ── Chat drawer adjustments ── */
    .chat-input-bar {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* ── Misc safe area ── */
    body {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* Inspector slide-up animation for mobile */
@keyframes mobile-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ── Extra small phones (max-width: 380px) ── */
@media (max-width: 380px) {
    .hud-view-title { font-size: 1rem; }
    .ghost-clock { font-size: 1rem; }
    .cal-cell { min-height: 2.75rem; }
    .cal-pill { font-size: 0.45rem; }
    .cal-week-grid { grid-template-columns: 30px repeat(7, 1fr); }
    .cal-week-header { font-size: 0.42rem; }
    .cal-week-time { font-size: 0.42rem; width: 30px; }
    .cal-today-timeline { --cal-hour-height: 32px; }
    .gc-btn { font-size: 0.625rem; padding: 0.3rem 0.5rem; }
    .wfm-row-title { font-size: 0.75rem; }
    .wfm-row-meta { font-size: 0.6rem; }
    .sys-telem-time { display: none; }

    /* Calendar headers: smaller on tiny screens */
    .cal-header { font-size: 0.45rem; padding: 0.25rem 0; }

    /* Overview news grid: force single column */
    .widget-card .grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Skills View ── */
.skill-stats-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.skill-stat-card {
    flex: 1;
    min-width: 100px;
    background: var(--gc-bg-2);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    text-align: center;
}

.skill-stat-value {
    font-family: var(--gc-font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gc-text-primary);
    line-height: 1.2;
}

.skill-stat-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--gc-text-tertiary);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

.skill-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.skill-modal-content {
    width: 90%;
    max-width: 640px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem;
    animation: research-modal-enter 0.25s ease;
}

.skill-form-label {
    display: block;
    font-family: var(--gc-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gc-text-secondary);
    margin-bottom: 0.375rem;
}

.skill-form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--gc-bg-2);
    border: 1px solid var(--gc-border-subtle);
    border-radius: var(--gc-radius);
    color: var(--gc-text-primary);
    font-family: var(--gc-font-body);
    font-size: 0.875rem;
    transition: var(--gc-transition);
}

.skill-form-input:focus {
    outline: none;
    border-color: var(--gc-cyan-border);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.1);
}

.skill-form-input::placeholder {
    color: var(--gc-text-tertiary);
}

textarea.skill-form-input {
    resize: vertical;
    font-family: var(--gc-font-mono);
    font-size: 0.8125rem;
}

select.skill-form-input {
    cursor: pointer;
}

.skill-progress-bar {
    height: 0.375rem;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--gc-bg-3, rgba(255,255,255,0.06));
    margin-top: 0.5rem;
}

.skill-progress-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* ── Health Dashboard ── */

.health-score-bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--gc-bg-3, rgba(255,255,255,0.06));
    overflow: hidden;
}
.health-score-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.health-metric-card {
    min-height: 90px;
}

.health-sleep-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    gap: 1px;
}
.health-sleep-segment {
    height: 100%;
    min-width: 2px;
    transition: width 0.3s ease;
}

.health-alert {
    border-radius: 8px;
}

.health-hr-chart {
    display: block;
}
@keyframes hr-dot-pulse {
    0%, 100% { opacity: 0.9; r: 4; }
    50% { opacity: 0.5; r: 6; }
}

.health-range-tab {
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--gc-border-subtle);
    background: transparent;
    color: var(--gc-text-secondary);
    transition: all 0.2s ease;
}
.health-range-tab:hover {
    border-color: var(--gc-cyan);
    color: var(--gc-text-primary);
}
.health-range-tab.active {
    background: var(--gc-cyan);
    color: var(--gc-bg);
    border-color: var(--gc-cyan);
    font-weight: 600;
}

/* ── Health Tab Bar ── */
.health-tab-bar {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid var(--gc-border-subtle);
    margin-bottom: 1rem;
}
.health-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'Rajdhani', sans-serif;
    color: var(--gc-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.health-tab:hover { color: var(--gc-text-primary); background: rgba(255,255,255,0.04); }
.health-tab.active {
    color: var(--gc-bg);
    background: var(--gc-cyan);
    font-weight: 600;
}
.health-tab svg { width: 16px; height: 16px; }

/* ── Circular Score Ring ── */
.health-score-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.health-score-ring svg { transform: rotate(-90deg); }
.health-score-ring-label {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
}

/* ── Expandable Cards ── */
.health-expandable { cursor: pointer; transition: all 0.2s ease; }
.health-expandable:hover { border-color: rgba(0, 229, 255, 0.3); }
.health-expand-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.health-expandable.expanded .health-expand-content {
    max-height: 800px;
}
.health-expand-icon {
    transition: transform 0.25s ease;
    color: var(--gc-text-tertiary);
    font-size: 0.75rem;
}
.health-expandable.expanded .health-expand-icon { transform: rotate(180deg); }

/* ── Radar Chart ── */
.health-radar { display: block; max-width: 280px; margin: 0 auto; }
.health-radar-axis { stroke: var(--gc-border-subtle); stroke-width: 0.5; }
.health-radar-ring { stroke: var(--gc-border-subtle); stroke-width: 0.3; fill: none; }
.health-radar-poly {
    fill: rgba(0, 229, 255, 0.12);
    stroke: var(--gc-cyan);
    stroke-width: 1.5;
}
.health-radar-label { fill: var(--gc-text-secondary); font-size: 9px; font-family: 'Exo 2', sans-serif; }
.health-radar-dot { fill: var(--gc-cyan); r: 3; }



/* ── Derived Metric Cards ── */
.health-derived-card {
    position: relative;
    min-height: 100px;
}
.health-derived-info {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--gc-text-tertiary);
    border: 1px solid var(--gc-border-subtle);
    cursor: help;
    background: none;
}
.health-derived-info:hover { color: var(--gc-cyan); border-color: var(--gc-cyan); }
.health-derived-detail {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--gc-border-subtle);
    line-height: 1.4;
}

/* ── Sparkline ── */
.health-sparkline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}

/* ── Tooltip ── */
.health-tooltip {
    position: fixed;
    z-index: 9999;
    padding: 8px 12px;
    background: rgba(10, 14, 20, 0.95);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--gc-text-primary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    max-width: 280px;
    backdrop-filter: blur(8px);
}
.health-tooltip.visible { opacity: 1; }

/* ── Trend Chart ── */
.health-chart-crosshair {
    stroke: var(--gc-cyan);
    stroke-width: 0.5;
    stroke-dasharray: 4,4;
    opacity: 0.5;
}
.health-chart-container { position: relative; }
.health-chart-container svg { display: block; width: 100%; }

/* ── Profile Settings ── */
.health-profile-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--gc-border-subtle);
}
.health-profile-field:last-child { border-bottom: none; }
.health-profile-input {
    width: 80px;
    text-align: right;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--gc-border-subtle);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--gc-text-primary);
    font-family: 'Exo 2', sans-serif;
    font-size: 0.875rem;
}
.health-profile-input:focus {
    outline: none;
    border-color: var(--gc-cyan);
}

/* ── Resilience Badge ── */
.health-resilience-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}
/* ── Prevent iOS zoom on input focus (16px minimum) ── */
@media (max-width: 640px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        font-size: max(16px, 1em);
    }
}

/* ===== Entity Links Widget ===== */
.el-link-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.el-link-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.el-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.78rem;
}
.el-link-type {
    color: var(--gc-cyan);
    font-size: 0.7rem;
    text-transform: uppercase;
}
.el-link-kind {
    color: var(--gc-text-tertiary);
    font-size: 0.68rem;
}
.el-link-remove {
    background: none;
    border: none;
    color: var(--gc-text-tertiary);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.85rem;
    line-height: 1;
}
.el-link-remove:hover { color: var(--gc-red, #f87171); }
.el-link-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--gc-surface-2, #1e1e2e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 100;
}
.el-link-suggest-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.8rem;
}
.el-link-suggest-item:hover { background: rgba(255,255,255,0.08); }
.el-link-empty {
    color: var(--gc-text-tertiary);
    font-size: 0.8rem;
}
.el-link-add-btn {
    font-size: 0.75rem;
    padding: 4px 10px;
    cursor: pointer;
}
/* Compact chips for card-level display */
.el-link-compact .el-link-chip {
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 4px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.el-link-compact .el-link-type {
    font-size: 0.6rem;
}
.el-link-overflow {
    font-size: 0.6rem;
    color: var(--gc-text-tertiary);
    padding: 1px 4px;
}

/* ── Chat attachments (ephemeral lane) ───────────────────────────────── */
.chat-attachments-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px 0;
    align-items: center;
}

.chat-attach-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: var(--mx-green);
    font-family: var(--gc-font-mono);
    font-size: 0.72rem;
    max-width: 240px;
}
.chat-attach-pill.is-pinned {
    border-color: var(--mx-green-bright);
    background: rgba(0, 229, 255, 0.16);
}
.chat-attach-pill .chat-attach-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}
.chat-attach-pill .chat-attach-size {
    color: var(--gc-text-tertiary);
    font-size: 0.68rem;
}
.chat-attach-pill .chat-attach-pin,
.chat-attach-pill .chat-attach-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.85rem;
    line-height: 1;
}
.chat-attach-pill .chat-attach-pin:hover,
.chat-attach-pill .chat-attach-remove:hover {
    color: var(--mx-green-bright);
}

/* Attach button — same styling as the mic button */
.chat-attach-btn {
    padding: 0.5rem;
    border-radius: var(--gc-radius);
    background: transparent;
    border: 1px solid var(--mx-green-dim);
    color: var(--mx-green);
    cursor: pointer;
    transition: all 0.15s ease;
}
.chat-attach-btn:hover {
    background: rgba(0, 229, 255, 0.2);
    color: var(--mx-green-bright);
}

/* Drag-and-drop highlight on input bar */
.chat-input-bar.drop-active {
    outline: 2px dashed rgba(0, 229, 255, 0.5);
    outline-offset: -4px;
    background: rgba(0, 229, 255, 0.04);
}

/* Brief glow when STT drops text into the input */
.chat-input.stt-cue {
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.5);
    transition: box-shadow 0.5s ease-out;
}

/* In-bubble attachment chips on user messages */
.chat-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.chat-msg-attachment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 229, 255, 0.2);
    font-family: var(--gc-font-mono);
    font-size: 0.68rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-msg-attachment.is-pinned {
    border-color: var(--mx-green-bright);
}

/* ─────────────────────────────────────────────────────────────────────────
   ProposalChatPanel — slide-over drawer for chatting about a proposal
   ───────────────────────────────────────────────────────────────────────── */
.proposal-chat-drawer {
    position: fixed;
    right: 1.5rem;
    bottom: 5.5rem;
    width: 500px;
    max-width: calc(100vw - 3rem);
    height: 600px;
    max-height: 75vh;
    background: var(--gc-bg-1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: var(--gc-radius-lg);
    display: flex;
    flex-direction: column;
    z-index: 65;  /* above chat-drawer (60) so they don't conflict visually */
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.15), 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.proposal-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.15);
    background: rgba(0, 229, 255, 0.05);
}

.proposal-chat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--gc-font-display, monospace);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gc-text-primary);
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proposal-chat-prompt {
    color: var(--gc-text-tertiary);
}

.proposal-chat-close {
    background: none;
    border: none;
    color: var(--gc-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.proposal-chat-close:hover {
    color: var(--gc-cyan, #00f0ff);
}

.proposal-chat-subtitle {
    padding: 6px 16px;
    font-size: 11px;
    color: var(--gc-text-tertiary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.proposal-chat-stream-section {
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    max-height: 35%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.proposal-chat-section-label {
    font-size: 10px;
    color: var(--gc-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.proposal-chat-stream {
    flex: 1;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--gc-text-secondary);
    line-height: 1.5;
}

.proposal-chat-messages-section {
    flex: 1;
    padding: 8px 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.proposal-chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 4px;
}

.proposal-chat-msg {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
}
.proposal-chat-msg-user {
    background: rgba(0, 229, 255, 0.06);
    border-left: 2px solid rgba(0, 229, 255, 0.3);
    color: var(--gc-text-primary);
}
.proposal-chat-msg-assistant {
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(167, 139, 250, 0.3);
    color: var(--gc-text-primary);
}
.proposal-chat-msg-role {
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--gc-text-muted);
    margin-bottom: 4px;
    font-family: var(--gc-font-display, monospace);
}
.proposal-chat-msg-content {
    word-break: break-word;
}
.proposal-chat-msg-content pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 6px;
    border-radius: 4px;
    font-size: 11px;
    overflow-x: auto;
}

.proposal-chat-input-row {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.proposal-chat-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--gc-text-primary);
    font-size: 13px;
    outline: none;
}
.proposal-chat-input:focus {
    border-color: rgba(0, 229, 255, 0.4);
}
.proposal-chat-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.proposal-chat-send {
    background: rgba(0, 229, 255, 0.15);
    color: var(--gc-cyan, #00e5ff);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 6px;
    padding: 0 14px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
}
.proposal-chat-send:hover:not(:disabled) {
    background: rgba(0, 229, 255, 0.25);
}
.proposal-chat-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.proposal-chat-footer {
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.proposal-chat-btn-mark-resolved {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    cursor: pointer;
    align-self: flex-end;
}
.proposal-chat-btn-mark-resolved:hover {
    background: rgba(59, 130, 246, 0.2);
}

.proposal-chat-resolve-summary {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--gc-text-primary);
    font-size: 12px;
    font-family: inherit;
    min-height: 60px;
    resize: vertical;
    outline: none;
}

.proposal-chat-footer-buttons {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.proposal-chat-btn-resolve {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
}
.proposal-chat-btn-resolve:hover {
    background: rgba(59, 130, 246, 0.3);
}

.proposal-chat-btn-cancel {
    background: rgba(255, 255, 255, 0.03);
    color: var(--gc-text-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
}
.proposal-chat-btn-cancel:hover {
    color: var(--gc-text-secondary);
}