/* ═══════════════════════════════════════════════════════════════
   J.A.R.V.I.S. HUD — Iron Man Visual Interface
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
    --cyan: #00d4ff;
    --cyan-dim: #00a3c4;
    --cyan-glow: rgba(0, 212, 255, 0.6);
    --cyan-faint: rgba(0, 212, 255, 0.08);
    --cyan-border: rgba(0, 212, 255, 0.25);
    --blue: #0088cc;
    --dark-bg: #0a0a0f;
    --dark-panel: rgba(10, 15, 25, 0.85);
    --dark-card: rgba(15, 20, 35, 0.7);
    --text-primary: #e0f0ff;
    --text-secondary: rgba(180, 210, 240, 0.7);
    --text-dim: rgba(120, 160, 200, 0.4);
    --danger: #ff3355;
    --warning: #ffaa00;
    --success: #00ff88;
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
    background: var(--dark-bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--cyan);
    color: var(--dark-bg);
}

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

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

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

.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   BOOT SCREEN
   ═══════════════════════════════════════════════════════════════ */
.boot-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--dark-bg);
    z-index: 1000;
    animation: bootFadeOut 0.8s ease-in 4.5s forwards;
    overflow: hidden;
}

.boot-hex-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(30deg, rgba(0, 212, 255, 0.02) 12%, transparent 12.5%, transparent 87%, rgba(0, 212, 255, 0.02) 87.5%),
        linear-gradient(150deg, rgba(0, 212, 255, 0.02) 12%, transparent 12.5%, transparent 87%, rgba(0, 212, 255, 0.02) 87.5%),
        linear-gradient(30deg, rgba(0, 212, 255, 0.02) 12%, transparent 12.5%, transparent 87%, rgba(0, 212, 255, 0.02) 87.5%),
        linear-gradient(150deg, rgba(0, 212, 255, 0.02) 12%, transparent 12.5%, transparent 87%, rgba(0, 212, 255, 0.02) 87.5%),
        linear-gradient(60deg, rgba(0, 212, 255, 0.03) 25%, transparent 25.5%, transparent 75%, rgba(0, 212, 255, 0.03) 75%),
        linear-gradient(60deg, rgba(0, 212, 255, 0.03) 25%, transparent 25.5%, transparent 75%, rgba(0, 212, 255, 0.03) 75%);
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
    opacity: 0;
    animation: bootHexFadeIn 2s ease-out 0.5s forwards;
}

@keyframes bootHexFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes bootFadeOut {
    to {
        opacity: 0;
        pointer-events: none;
    }
}

.boot-rings {
    position: relative;
    width: 400px;
    height: 400px;
}

.boot-arc-reactor {
    position: absolute;
    inset: -50px;
    /* Expand out to 500x500 to give the 3D Gyroscope plenty of room to spin */
    width: 500px;
    height: 500px;
    z-index: 1;
    /* keep behind the text logo if needed */
}

.boot-logo {
    position: absolute;
    bottom: -160px;
    /* Drop completely below the expanded 500px ring container */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Remove radial gradient as it interferes with the clean text look below the 3D object */
}

.logo-text {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--cyan);
    text-shadow: 0 0 20px var(--cyan-glow), 0 0 40px rgba(0, 212, 255, 0.3);
    letter-spacing: 4px;
    animation: logoGlow 2s ease-in-out infinite, holoFlicker 8s ease-in-out infinite;
}

@keyframes holoFlicker {

    0%,
    94%,
    96%,
    100% {
        opacity: 1;
    }

    95% {
        opacity: 0.6;
        transform: translateX(1px);
    }

    95.5% {
        opacity: 0.8;
        transform: translateX(-1px);
    }
}

.logo-subtext {
    display: block;
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--cyan-dim);
    letter-spacing: 3px;
    margin-top: 6px;
    opacity: 0;
    animation: logoSubFadeIn 0.6s ease-out 1.5s forwards;
    text-align: center;
}

@keyframes logoSubFadeIn {
    to {
        opacity: 0.5;
    }
}

.boot-progress {
    width: 260px;
    height: 2px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 1px;
    margin-top: 30px;
    overflow: hidden;
    position: relative;
}

.boot-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cyan-dim), var(--cyan), var(--cyan-dim));
    border-radius: 1px;
    box-shadow: 0 0 10px var(--cyan-glow);
    transition: width 0.6s ease-out;
}

.boot-status {
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--cyan-dim);
    letter-spacing: 3px;
    animation: textBlink 0.8s step-end infinite;
}

.boot-version {
    position: absolute;
    bottom: 30px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 2px;
    opacity: 0;
    animation: logoSubFadeIn 0.6s ease-out 2s forwards;
}

@keyframes ringRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ringRotateReverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes ringPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}

@keyframes logoGlow {

    0%,
    100% {
        text-shadow: 0 0 20px var(--cyan-glow), 0 0 40px rgba(0, 212, 255, 0.3);
    }

    50% {
        text-shadow: 0 0 30px var(--cyan-glow), 0 0 60px rgba(0, 212, 255, 0.5), 0 0 80px rgba(0, 212, 255, 0.2);
    }
}

@keyframes textBlink {
    50% {
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MAIN HUD
   ═══════════════════════════════════════════════════════════════ */
.main-hud {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    animation: hudFadeIn 1s ease-out 4.8s both;
}

@keyframes hudFadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Background ──────────────────────────────────────────────── */
.hud-background {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--cyan-faint) 1px, transparent 1px),
        linear-gradient(90deg, var(--cyan-faint) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.4;
}

.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan-glow), transparent);
    animation: scanMove 8s linear infinite;
    opacity: 0.15;
}

.ambient-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

/* ── Vignette ────────────────────────────────────────────────── */
.hud-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
    z-index: 1;
}

@keyframes scanMove {
    0% {
        top: -2px;
    }

    100% {
        top: 100%;
    }
}

/* ── Header ──────────────────────────────────────────────────── */
.hud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid var(--cyan-border);
    background: var(--dark-panel);
    backdrop-filter: blur(20px);
    z-index: 10;
    position: relative;
}

.hud-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0.4;
    animation: headerGlow 4s ease-in-out infinite;
}

@keyframes headerGlow {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.6;
    }
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.arc-reactor-mini {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cyan) 20%, var(--cyan-dim) 40%, transparent 70%);
    box-shadow: 0 0 15px var(--cyan-glow), 0 0 30px rgba(0, 212, 255, 0.2);
    animation: reactorPulse 2s ease-in-out infinite;
}

@keyframes reactorPulse {

    0%,
    100% {
        box-shadow: 0 0 15px var(--cyan-glow), 0 0 30px rgba(0, 212, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 20px var(--cyan-glow), 0 0 40px rgba(0, 212, 255, 0.4);
    }
}

.hud-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
    animation: holoFlicker 12s ease-in-out infinite;
}

.hud-subtitle {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 2px;
    margin-left: 4px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
}

.status-indicator.active {
    background: var(--success);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
    animation: statusBlink 3s ease-in-out infinite;
}

.status-indicator.processing {
    background: var(--warning);
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.5);
    animation: statusBlink 0.5s ease-in-out infinite;
}

.status-indicator.error {
    background: var(--danger);
    box-shadow: 0 0 8px rgba(255, 51, 85, 0.5);
}

@keyframes statusBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.status-text {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.hud-time {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--cyan);
    letter-spacing: 1px;
    min-width: 70px;
    text-align: right;
}

/* ── Content Layout ──────────────────────────────────────────── */
.hud-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

/* ── Side Panels ─────────────────────────────────────────────── */
.side-panel {
    width: 260px;
    padding: 16px;
    border-right: 1px solid var(--cyan-border);
    background: var(--dark-panel);
    backdrop-filter: blur(10px);
    overflow-y: auto;
    flex-shrink: 0;
    position: relative;
}

.side-panel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.15), transparent);
    pointer-events: none;
}

.left-panel::after {
    right: -1px;
}

.right-panel {
    border-right: none;
    border-left: 1px solid var(--cyan-border);
}

.right-panel::after {
    left: -1px;
}

.panel-section {
    margin-bottom: 24px;
}

.panel-title {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cyan-border);
    position: relative;
}

.panel-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 30px;
    height: 1px;
    background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan-glow);
}

/* ── Cards ─────────────────────────────────────────────────── */
.left-card {
    background: rgba(10, 15, 25, 0.4);
    border: 1px solid var(--cyan-border);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0, 212, 255, 0.05);
    border-bottom: 1px solid var(--cyan-border);
}

.card-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-icon {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-refresh-btn,
.card-icon-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, transform 0.2s;
}

.card-refresh-btn:hover,
.card-icon-btn:hover {
    color: var(--cyan);
    transform: scale(1.1);
}

.card-refresh-btn svg,
.card-icon-btn svg {
    width: 14px;
    height: 14px;
}

.card-body {
    padding: 14px;
}

/* ── Metrics ─────────────────────────────────────────────────── */
.metric {
    margin-bottom: 16px;
}

.metric-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 6px;
}

.metric-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.metric-value,
.metric-value-text {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--cyan);
}

.metric-bar {
    height: 6px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
    border-radius: 3px;
    transition: width 1s ease;
    box-shadow: 0 0 6px var(--cyan-glow);
    position: relative;
}

.metric-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--cyan);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px var(--cyan-glow);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 8px 4px;
    border: 1px solid rgba(0, 212, 255, 0.08);
}

.stat-box-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.stat-box-value {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-primary);
    font-weight: 500;
}

/* ── Weather ─────────────────────────────────────────────────── */
.weather-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.weather-temp {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.weather-loc {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--cyan);
}

.weather-desc {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}

.weather-icon-large {
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    opacity: 0.9;
}

/* ── Camera ──────────────────────────────────────────────────── */
.camera-preview-container {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 6px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.camera-off-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-dim);
    gap: 6px;
}

.camera-off-state .video-icon {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.camera-off-state span {
    font-family: var(--font-mono);
    font-size: 10px;
}

.camera-status-text {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--cyan-dim);
    text-align: center;
}

/* ── Uptime ──────────────────────────────────────────────────── */
.uptime-header-val {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    margin-right: 4px;
}

.uptime-row {
    font-family: var(--font-mono);
    font-size: 10px;
    margin-bottom: 12px;
    color: var(--text-dim);
}

.uptime-val {
    color: var(--text-primary);
    font-weight: 700;
    margin-left: 4px;
    font-size: 11px;
}

.uptime-grid {
    grid-template-columns: repeat(2, 1fr);
}

.metric-fill.warning {
    background: linear-gradient(90deg, var(--warning), #ff6600);
}

.metric-fill.danger {
    background: linear-gradient(90deg, var(--danger), #ff0033);
}

.metric-value {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--cyan);
    text-align: right;
}

/* ── Tool List ───────────────────────────────────────────────── */
.tool-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    border-radius: 2px;
    padding-left: 4px;
    margin-left: -4px;
}

.tool-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan-dim);
    box-shadow: 0 0 4px rgba(0, 212, 255, 0.3);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.tool-item.active .tool-dot {
    background: var(--success);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
    animation: statusBlink 0.5s ease-in-out infinite;
}

.tool-item.active {
    color: var(--success);
    animation: toolFlash 0.6s ease-out;
}

@keyframes toolFlash {
    0% {
        background: rgba(0, 255, 136, 0.12);
    }

    100% {
        background: transparent;
    }
}

/* ── Activity Feed ───────────────────────────────────────────── */
.activity-feed {
    max-height: 200px;
    overflow-y: auto;
}

.activity-item {
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 212, 255, 0.06);
    animation: fadeSlideIn 0.3s ease-out;
    transition: background 0.2s;
    padding-left: 4px;
    margin-left: -4px;
    border-radius: 2px;
}

.activity-item:hover {
    background: rgba(0, 212, 255, 0.03);
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

.activity-time {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    margin-right: 6px;
}

.activity-text {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
}

/* ── Arc Reactor ─────────────────────────────────────────────── */
.arc-reactor-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.arc-reactor {
    position: relative;
    width: 140px;
    height: 140px;
    /* The 3D canvas will automatically conform to these dimensions */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 50%;
    /* Subtle background glow behind the 3D model */
    box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.05);
}

/*
 * The inner rings and core CSS animations have been removed
 * in favor of the Three.js 3D implementation rendered in arc_reactor_3d.js
 */

/* ═══════════════════════════════════════════════════════════════
   CHAT AREA
   ═══════════════════════════════════════════════════════════════ */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar {
    width: 5px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--cyan-border);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--cyan-dim);
}

/* ── Scroll to Bottom Button ─────────────────────────────────── */
.scroll-to-bottom {
    position: absolute;
    bottom: 90px;
    right: 24px;
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cyan-border);
    background: rgba(10, 15, 25, 0.92);
    color: var(--cyan);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
    backdrop-filter: blur(6px);
    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
    opacity: 1;
}

.scroll-to-bottom:hover {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.35);
    transform: translateY(-2px);
    border-color: var(--cyan);
}

.scroll-to-bottom svg {
    width: 18px;
    height: 18px;
}

.scroll-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--cyan);
    color: var(--dark-bg);
    font-size: 9px;
    font-family: var(--font-display);
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    line-height: 1;
}

/* ── Empty State ─────────────────────────────────────────────── */
.chat-messages:empty::after {
    content: '◈ AWAITING COMMANDS, BOSS...';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 3px;
    animation: emptyPulse 3s ease-in-out infinite;
}

@keyframes emptyPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

/* ── Messages ────────────────────────────────────────────────── */
.message {
    max-width: 85%;
    animation: messageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes messageIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

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

.message.user {
    align-self: flex-end;
}

.message.jarvis {
    align-self: flex-start;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.message-sender {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.message-icon {
    font-size: 10px;
    opacity: 0.6;
}

.message.user .message-icon {
    color: var(--success);
}

.message.jarvis .message-icon {
    color: var(--cyan);
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
        text-shadow: 0 0 6px var(--cyan-glow);
    }
}

.message.user .message-sender {
    color: var(--success);
}

.message.jarvis .message-sender {
    color: var(--cyan);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

.message-time {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
}

.message-body {
    padding: 14px 18px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.3px;
    position: relative;
}

.message.user .message-body {
    background: rgba(0, 255, 136, 0.06);
    border: 1px solid rgba(0, 255, 136, 0.15);
    border-left: 3px solid var(--success);
    color: var(--text-primary);
}

.message.jarvis .message-body {
    background: var(--cyan-faint);
    border: 1px solid var(--cyan-border);
    border-left: 3px solid var(--cyan);
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.03);
    position: relative;
    overflow: hidden;
}

.message.jarvis .message-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0%;
    background: linear-gradient(180deg, var(--cyan), transparent);
    animation: borderSweep 0.8s ease-out 0.2s forwards;
    z-index: 1;
}

@keyframes borderSweep {
    to {
        height: 100%;
    }
}

/* Jarvis message entry glow — fades out after appearing */
.message.jarvis.new-message .message-body {
    animation: jarvisGlow 2s ease-out forwards;
}

@keyframes jarvisGlow {
    0% {
        box-shadow: 0 0 25px rgba(0, 212, 255, 0.15), 0 0 50px rgba(0, 212, 255, 0.05);
        border-color: rgba(0, 212, 255, 0.5);
    }

    100% {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.03);
        border-color: var(--cyan-border);
    }
}

/* ── Typing cursor for streaming effect ──────────────────────── */
.message.jarvis.typing .message-body::after {
    content: '▊';
    color: var(--cyan);
    animation: cursorBlink 0.6s step-end infinite;
    margin-left: 2px;
    font-size: 13px;
}

@keyframes cursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.message-body h1,
.message-body h2,
.message-body h3 {
    font-family: var(--font-display);
    color: var(--cyan);
    margin: 12px 0 6px;
    font-size: 13px;
    letter-spacing: 1px;
}

.message-body h1:first-child,
.message-body h2:first-child,
.message-body h3:first-child {
    margin-top: 0;
}

.message-body p {
    margin-bottom: 8px;
}

.message-body ul,
.message-body ol {
    margin: 8px 0;
    padding-left: 20px;
}

.message-body li {
    margin-bottom: 4px;
}

.message-body code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: rgba(0, 212, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--cyan);
}

.message-body pre {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    padding: 12px 16px;
    overflow-x: auto;
    margin: 8px 0;
    position: relative;
}

.message-body pre::before {
    content: 'CODE';
    position: absolute;
    top: 4px;
    right: 8px;
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-dim);
    letter-spacing: 2px;
    opacity: 0.5;
}

.message-body pre code {
    background: none;
    padding: 0;
    color: var(--text-primary);
}

.copy-code-btn {
    position: absolute;
    top: 4px;
    right: 40px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--cyan-dim);
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid var(--cyan-border);
    border-radius: 2px;
    padding: 2px 8px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
    opacity: 0;
}

.message-body pre:hover .copy-code-btn {
    opacity: 1;
}

.copy-code-btn:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--cyan);
    color: var(--cyan);
}

.copy-code-btn.copied {
    color: var(--success);
    border-color: rgba(0, 255, 136, 0.3);
}

.message-body strong {
    color: var(--cyan);
    font-weight: 600;
}

.message-body em {
    color: var(--text-secondary);
    font-style: italic;
}

.message-tools {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.tool-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 2px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid var(--cyan-border);
    color: var(--cyan-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.message-meta {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 6px;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   MARKDOWN TABLES — PREMIUM PORTFOLIO DISPLAY
   ═══════════════════════════════════════════════════════════════ */

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 12px 0;
    border-radius: 6px;
    border: 1px solid rgba(0, 212, 255, 0.15);
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.06), inset 0 0 40px rgba(0, 0, 0, 0.3);
}

.table-wrapper::-webkit-scrollbar {
    height: 4px;
}
.table-wrapper::-webkit-scrollbar-track { background: transparent; }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--cyan-border); border-radius: 2px; }

/* ── Generic Markdown Table ──────────────────────────────────── */
.md-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
}

.md-table thead th {
    background: rgba(0, 212, 255, 0.1);
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    white-space: nowrap;
}

.md-table tbody tr {
    border-bottom: 1px solid rgba(0, 212, 255, 0.06);
    transition: background 0.2s;
}

.md-table tbody tr:last-child { border-bottom: none; }

.md-table tbody tr:hover {
    background: rgba(0, 212, 255, 0.04);
}

.md-table td {
    padding: 9px 14px;
    vertical-align: middle;
}

/* ── Portfolio Table — Premium Variant ───────────────────────── */
.portfolio-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
}

.portfolio-table thead {
    background: linear-gradient(90deg,
        rgba(0, 212, 255, 0.18) 0%,
        rgba(0, 212, 255, 0.08) 60%,
        rgba(0, 0, 0, 0) 100%);
}

.portfolio-table thead th {
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 11px 16px;
    text-align: left;
    border-bottom: 2px solid rgba(0, 212, 255, 0.35);
    white-space: nowrap;
    position: relative;
}

.portfolio-table thead th:first-child {
    border-left: 3px solid var(--cyan);
}

.portfolio-table tbody tr {
    border-bottom: 1px solid rgba(0, 212, 255, 0.07);
    transition: background 0.18s, box-shadow 0.18s;
}

.portfolio-table tbody tr:last-child {
    border-bottom: none;
}

.portfolio-table tbody tr:hover {
    background: rgba(0, 212, 255, 0.055);
    box-shadow: inset 3px 0 0 rgba(0, 212, 255, 0.4);
}

.portfolio-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.15);
}

.portfolio-table tbody tr:nth-child(even):hover {
    background: rgba(0, 212, 255, 0.055);
}

.portfolio-table td {
    padding: 10px 16px;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 12px;
}

.portfolio-table td:first-child {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

/* ── Gain/Loss Cells ─────────────────────────────────────────── */
.portfolio-table td.cell-gain,
.md-table td.cell-gain {
    color: #00ff88;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.portfolio-table td.cell-loss,
.md-table td.cell-loss {
    color: #ff4d6d;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(255, 77, 109, 0.45);
}

/* ── Markdown Horizontal Rule ────────────────────────────────── */
.message-body .md-hr {
    border: none;
    border-top: 1px solid rgba(0, 212, 255, 0.2);
    margin: 16px 0;
    position: relative;
}

.message-body .md-hr::before {
    content: '◈';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--dark-bg);
    padding: 0 8px;
    font-size: 8px;
    color: var(--cyan-dim);
}

/* ── Markdown Blockquote (performance summaries) ─────────────── */
.message-body .md-blockquote {
    border-left: 3px solid var(--cyan);
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.07), transparent);
    padding: 10px 16px;
    margin: 10px 0;
    border-radius: 0 4px 4px 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.message-body .md-blockquote strong {
    color: var(--cyan);
    font-weight: 700;
}

/* ── Thinking Indicator ──────────────────────────────────────── */
.thinking-indicator {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 32px;
    animation: thinkingFadeIn 0.4s ease-out;
}

@keyframes thinkingFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.thinking-rings {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.think-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid var(--cyan-border);
}

.think-ring-1 {
    inset: 0;
    border-color: var(--cyan);
    animation: ringRotate 1s linear infinite;
    opacity: 0.6;
}

.think-ring-2 {
    inset: 6px;
    border-color: var(--cyan-dim);
    border-top-color: transparent;
    animation: ringRotateReverse 0.8s linear infinite;
    opacity: 0.8;
}

.think-ring-3 {
    inset: 12px;
    border-color: var(--cyan);
    animation: ringRotate 0.6s linear infinite;
    opacity: 1;
}

.think-core {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cyan) 0%, transparent 70%);
    opacity: 0.5;
    animation: thinkCorePulse 1s ease-in-out infinite;
}

@keyframes thinkCorePulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

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

.thinking-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thinking-text {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--cyan);
    letter-spacing: 3px;
    animation: textBlink 1s step-end infinite;
}

.thinking-subtext {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
    animation: thinkingSubtextCycle 4s ease-in-out infinite;
}

@keyframes thinkingSubtextCycle {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

.thinking-progress {
    flex: 1;
    max-width: 200px;
    height: 2px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 1px;
    overflow: hidden;
}

.thinking-progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    border-radius: 1px;
    animation: thinkingProgressSlide 1.5s ease-in-out infinite;
}

@keyframes thinkingProgressSlide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(450%);
    }
}

.thinking-tools-indicator {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.thinking-tool-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 2px;
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.25);
    color: var(--success);
    letter-spacing: 1px;
    animation: thinkingToolPop 0.3s ease-out;
}

@keyframes thinkingToolPop {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Input Area ──────────────────────────────────────────────── */
.input-area {
    padding: 16px 32px 20px;
    border-top: 1px solid var(--cyan-border);
    background: var(--dark-panel);
    backdrop-filter: blur(20px);
}

/* ── Quick-Action Toolbar ────────────────────────────────────── */
.quick-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.qa-btn {
    background: rgba(0, 212, 255, 0.04);
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.qa-btn:hover {
    color: var(--cyan);
    background: rgba(0, 212, 255, 0.1);
    border-color: var(--cyan);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.12);
}
.qa-btn:active { transform: scale(0.97); }

.input-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-glow {
    position: absolute;
    inset: -1px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--cyan-border), transparent, var(--cyan-border));
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 0;
    pointer-events: none;
}

.input-container:focus-within .input-glow {
    opacity: 1;
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

#user-input {
    flex: 1;
    background: rgba(0, 15, 30, 0.6);
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    padding: 14px 18px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    letter-spacing: 0.5px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    position: relative;
    z-index: 1;
}

#user-input::placeholder {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 1px;
}

#user-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.1);
}

#user-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--cyan-border);
    background: rgba(0, 15, 30, 0.3);
}

.send-btn {
    width: 46px;
    height: 46px;
    border-radius: 4px;
    border: 1px solid var(--cyan-border);
    background: rgba(0, 212, 255, 0.06);
    color: var(--cyan);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.send-btn:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--cyan);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

.send-btn:active {
    transform: scale(0.95);
}

.send-btn svg {
    width: 18px;
    height: 18px;
}

/* ── Push-to-Talk Button ─────────────────────────────────────── */
.ptt-btn {
    width: 46px;
    height: 46px;
    border-radius: 4px;
    border: 1px solid var(--cyan-border);
    background: rgba(0, 212, 255, 0.06);
    color: var(--cyan);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.ptt-btn:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--cyan);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

.ptt-btn:active,
.ptt-btn.recording {
    background: rgba(255, 60, 60, 0.2);
    border-color: #ff4444;
    color: #ff4444;
    box-shadow: 0 0 20px rgba(255, 60, 60, 0.3);
    animation: ptt-pulse 1s ease-in-out infinite;
}

.ptt-btn svg {
    width: 18px;
    height: 18px;
}

@keyframes ptt-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 60, 60, 0.2);
    }

    50% {
        box-shadow: 0 0 25px rgba(255, 60, 60, 0.5);
    }
}

/* ── Voice Toggle ────────────────────────────────────────────── */
.voice-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cyan-border);
    background: rgba(0, 212, 255, 0.06);
    color: var(--cyan);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    position: relative;
}

.voice-toggle svg {
    width: 16px;
    height: 16px;
}

.voice-toggle .voice-icon-off {
    display: none;
}

.voice-toggle:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

.voice-toggle.speaking {
    border-color: var(--cyan);
    box-shadow: 0 0 15px var(--cyan-glow), 0 0 30px rgba(0, 212, 255, 0.2);
    animation: voicePulse 1s ease-in-out infinite;
}

@keyframes voicePulse {

    0%,
    100% {
        box-shadow: 0 0 10px var(--cyan-glow);
    }

    50% {
        box-shadow: 0 0 20px var(--cyan-glow), 0 0 35px rgba(0, 212, 255, 0.3);
    }
}

.voice-toggle.muted {
    color: var(--danger);
    border-color: rgba(255, 51, 85, 0.3);
    background: rgba(255, 51, 85, 0.06);
}

.voice-toggle.muted .voice-icon-on {
    display: none;
}

.voice-toggle.muted .voice-icon-off {
    display: block;
}

.voice-toggle.disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ── Footer ──────────────────────────────────────────────────── */
.hud-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px;
    border-top: 1px solid var(--cyan-border);
    background: var(--dark-panel);
    backdrop-filter: blur(20px);
    z-index: 10;
    position: relative;
}

.hud-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0.3;
}

.footer-left,
.footer-center,
.footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 2px;
}

.footer-value {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cyan-dim);
    letter-spacing: 1px;
}

/* ── Mic Toggle ──────────────────────────────────────────────── */
.mic-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cyan-border);
    background: rgba(0, 212, 255, 0.06);
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.mic-toggle svg {
    width: 16px;
    height: 16px;
}

.mic-toggle:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: var(--cyan-dim);
    color: var(--cyan);
}

.mic-toggle.active {
    color: var(--success);
    border-color: rgba(0, 255, 136, 0.4);
    background: rgba(0, 255, 136, 0.08);
    animation: micPulse 2s ease-in-out infinite;
}

@keyframes micPulse {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(0, 255, 136, 0.2);
    }

    50% {
        box-shadow: 0 0 15px rgba(0, 255, 136, 0.4), 0 0 30px rgba(0, 255, 136, 0.1);
    }
}

.mic-toggle.disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ── Live Voice Toggle ───────────────────────────────────────── */
.live-voice-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cyan-border);
    background: rgba(0, 212, 255, 0.06);
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    position: relative;
}

.live-voice-toggle svg {
    width: 16px;
    height: 16px;
}

.live-voice-toggle .live-dot {
    fill: #ff4444;
    opacity: 0;
    transition: opacity 0.3s;
}

.live-voice-toggle:hover {
    background: rgba(255, 68, 68, 0.08);
    border-color: rgba(255, 68, 68, 0.4);
    color: #ff6666;
}

.live-voice-toggle:hover .live-dot {
    opacity: 0.6;
}

.live-voice-toggle.active {
    color: #ff4444;
    border-color: rgba(255, 68, 68, 0.6);
    background: rgba(255, 68, 68, 0.12);
    animation: liveVoicePulse 1.5s ease-in-out infinite;
}

.live-voice-toggle.active .live-dot {
    opacity: 1;
    animation: liveDotBlink 1s ease-in-out infinite;
}

@keyframes liveVoicePulse {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(255, 68, 68, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 68, 68, 0.5), 0 0 40px rgba(255, 68, 68, 0.15);
    }
}

@keyframes liveDotBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ── Mic Status Bar ──────────────────────────────────────────── */
.mic-status {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-align: center;
    padding: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.3s;
}

.mic-status.listening {
    color: var(--cyan-dim);
    padding: 6px 0;
    height: auto;
}

.mic-status.command-active {
    color: var(--success);
    padding: 6px 0;
    height: auto;
    animation: textBlink 0.6s step-end infinite;
}

/* ── Image Preview (above input) ────────────────────────────── */
.image-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: rgba(0, 212, 255, 0.04);
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    position: relative;
}

.image-preview.hidden {
    display: none;
}

.image-preview img {
    max-height: 80px;
    max-width: 120px;
    border-radius: 3px;
    border: 1px solid var(--cyan-border);
    object-fit: cover;
}

.image-preview-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: rgba(255, 51, 85, 0.15);
    border: 1px solid rgba(255, 51, 85, 0.3);
    color: var(--danger);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}

.image-preview-close:hover {
    background: rgba(255, 51, 85, 0.3);
    border-color: var(--danger);
}

/* ── Inline Chat Images ─────────────────────────────────────── */
.message-image {
    margin: 6px 0 8px;
}

.message-image img {
    max-width: 300px;
    max-height: 200px;
    border-radius: 4px;
    border: 1px solid var(--cyan-border);
    object-fit: contain;
}

/* ── AI-Generated Images in Chat ───────────────────────────── */
.message-generated-image {
    margin: 10px 0 4px;
}

.message-generated-image img {
    max-width: 100%;
    width: 480px;
    border-radius: 6px;
    border: 1px solid var(--cyan-border);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.25);
    display: block;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.message-generated-image img:hover {
    box-shadow: 0 0 28px rgba(0, 212, 255, 0.5);
    transform: scale(1.01);
}

/* ── Drag & Drop Highlight ──────────────────────────────────── */
.chat-area.drag-over {
    outline: 2px dashed var(--cyan);
    outline-offset: -4px;
    background: rgba(0, 212, 255, 0.03);
}

/* ═══════════════════════════════════════════════════════════════
   SPEAKING OVERLAY — Immersive Full-screen Audio Visualizer
   ═══════════════════════════════════════════════════════════════ */
.speaking-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 5, 12, 0.95);
    backdrop-filter: blur(12px);
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    cursor: pointer;
    overflow: hidden;
}

.speaking-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.speaking-overlay.hidden {
    display: none;
}

/* ── Hexagonal Grid Background ───────────────────────────────── */
.speak-hex-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(30deg, rgba(0, 212, 255, 0.015) 12%, transparent 12.5%, transparent 87%, rgba(0, 212, 255, 0.015) 87.5%),
        linear-gradient(150deg, rgba(0, 212, 255, 0.015) 12%, transparent 12.5%, transparent 87%, rgba(0, 212, 255, 0.015) 87.5%),
        linear-gradient(30deg, rgba(0, 212, 255, 0.015) 12%, transparent 12.5%, transparent 87%, rgba(0, 212, 255, 0.015) 87.5%),
        linear-gradient(150deg, rgba(0, 212, 255, 0.015) 12%, transparent 12.5%, transparent 87%, rgba(0, 212, 255, 0.015) 87.5%),
        linear-gradient(60deg, rgba(0, 212, 255, 0.02) 25%, transparent 25.5%, transparent 75%, rgba(0, 212, 255, 0.02) 75%),
        linear-gradient(60deg, rgba(0, 212, 255, 0.02) 25%, transparent 25.5%, transparent 75%, rgba(0, 212, 255, 0.02) 75%);
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.speaking-overlay.visible .speak-hex-grid {
    opacity: 1;
}

/* ── Scan Line Effect ────────────────────────────────────────── */
.speak-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.25), transparent);
    z-index: 1;
    pointer-events: none;
    animation: speakScanMove 6s linear infinite;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}

@keyframes speakScanMove {
    0% {
        top: -1px;
    }

    100% {
        top: 100%;
    }
}

/* ── Data Readouts ───────────────────────────────────────────── */
.speak-data-readout {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.8s ease 0.3s;
}

.speaking-overlay.visible .speak-data-readout {
    opacity: 1;
}

.speak-data-left {
    left: 40px;
}

.speak-data-right {
    right: 40px;
    align-items: flex-end;
}

.speak-data-row {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
}

.speak-data-right .speak-data-row {
    flex-direction: row-reverse;
}

.speak-data-key {
    color: var(--text-dim);
    min-width: 50px;
}

.speak-data-right .speak-data-key {
    text-align: right;
}

.speak-data-val {
    color: var(--cyan-dim);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
}

.speaking-overlay.audio-active .speak-data-val {
    color: var(--cyan);
}

/* ── Arc Reactor (in core) ───────────────────────────────────── */
.speak-arc-reactor {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.speak-arc-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.speak-arc-ring-1 {
    inset: 0;
    animation: speakRotate 10s linear infinite;
    border-style: dashed;
    opacity: 0.4;
}

.speak-arc-ring-2 {
    inset: 8px;
    border-top-color: rgba(0, 212, 255, 0.3);
    border-right-color: transparent;
    border-bottom-color: rgba(0, 212, 255, 0.3);
    border-left-color: transparent;
    animation: speakRotateR 7s linear infinite;
    opacity: 0.5;
}

.speak-arc-ring-3 {
    inset: 16px;
    border-color: rgba(0, 212, 255, 0.2);
    animation: speakRotate 4s linear infinite;
    border-right-color: transparent;
    opacity: 0.6;
}

.speak-arc-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow), 0 0 25px rgba(0, 212, 255, 0.4);
    animation: arcDotPulse 1.5s ease-in-out infinite;
}

.speaking-overlay.audio-active .speak-arc-dot {
    box-shadow: 0 0 15px var(--cyan-glow), 0 0 35px rgba(0, 212, 255, 0.6), 0 0 60px rgba(0, 212, 255, 0.2);
}

@keyframes arcDotPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
}

/* ── Bottom HUD Bar ──────────────────────────────────────────── */
.speak-hud-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 10px 40px;
    z-index: 5;
    pointer-events: none;
}

.speak-hud-bottom-segment {
    display: flex;
    align-items: center;
    gap: 16px;
}

.speak-hud-bar-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan-border), transparent);
}

.speak-hud-bar-text {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 4px;
}

/* ── Floating Particles Canvas ───────────────────────────────── */
.speaking-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ── Visualizer Container ────────────────────────────────────── */
.speaking-vis-container {
    position: relative;
    width: 420px;
    height: 420px;
    z-index: 2;
}

.speaking-visualizer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.speaking-rings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.speak-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.5s, opacity 0.5s, box-shadow 0.5s;
}

/* Ring 1 — Outermost */
.speak-ring-1 {
    inset: 10px;
    border-color: var(--cyan);
    opacity: 0.4;
    animation: speakRotate 6s linear infinite;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.1), inset 0 0 15px rgba(0, 212, 255, 0.05);
}

/* Ring 2 — Dashed */
.speak-ring-2 {
    inset: 35px;
    border-color: var(--cyan-dim);
    border-style: dashed;
    opacity: 0.3;
    animation: speakRotateR 8s linear infinite;
}

/* Ring 3 — Partial arc */
.speak-ring-3 {
    inset: 60px;
    border-color: var(--cyan);
    border-top-color: transparent;
    border-left-color: transparent;
    opacity: 0.6;
    animation: speakRotate 3s linear infinite;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}

/* Ring 4 — Dotted inner */
.speak-ring-4 {
    inset: 85px;
    border-color: var(--cyan-dim);
    border-style: dotted;
    opacity: 0.25;
    animation: speakRotateR 4s linear infinite;
}

/* Ring 5 — Innermost */
.speak-ring-5 {
    inset: 105px;
    border-color: var(--cyan);
    border-right-color: transparent;
    border-bottom-color: transparent;
    opacity: 0.5;
    animation: speakRotate 5s linear infinite;
}

/* ── Audio-reactive ring expansion ───────────────────────────── */
.speaking-overlay.audio-active .speak-ring-1 {
    opacity: 0.6;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3), inset 0 0 25px rgba(0, 212, 255, 0.1);
}

.speaking-overlay.audio-active .speak-ring-3 {
    opacity: 0.9;
    box-shadow: 0 0 35px rgba(0, 212, 255, 0.4);
}

.speaking-overlay.audio-active .speak-ring-5 {
    opacity: 0.7;
}

/* ── Core ────────────────────────────────────────────────────── */
.speak-core {
    position: absolute;
    inset: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 3;
}

.speak-core-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.12) 0%, rgba(0, 212, 255, 0.03) 50%, transparent 70%);
    animation: coreGlowPulse 2s ease-in-out infinite;
    z-index: 0;
}

.speaking-overlay.audio-active .speak-core-glow {
    background: radial-gradient(circle, rgba(0, 212, 255, 0.25) 0%, rgba(0, 212, 255, 0.08) 50%, transparent 70%);
}

@keyframes coreGlowPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

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

.speak-label {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 5px;
    text-shadow: 0 0 20px var(--cyan-glow), 0 0 40px rgba(0, 212, 255, 0.3);
    animation: speakLabelGlow 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.speak-sublabel {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--cyan-dim);
    letter-spacing: 3px;
    margin-top: 6px;
    opacity: 0.6;
    position: relative;
    z-index: 1;
    animation: textBlink 2s step-end infinite;
}

/* ── HUD Decorative Corners ──────────────────────────────────── */
.speak-hud-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    z-index: 3;
    pointer-events: none;
}

.speak-hud-corner::before,
.speak-hud-corner::after {
    content: '';
    position: absolute;
    background: var(--cyan);
    opacity: 0.4;
    box-shadow: 0 0 8px var(--cyan-glow);
}

.speak-hud-tl {
    top: 20px;
    left: 20px;
}

.speak-hud-tl::before {
    top: 0;
    left: 0;
    width: 30px;
    height: 1.5px;
}

.speak-hud-tl::after {
    top: 0;
    left: 0;
    width: 1.5px;
    height: 30px;
}

.speak-hud-tr {
    top: 20px;
    right: 20px;
}

.speak-hud-tr::before {
    top: 0;
    right: 0;
    width: 30px;
    height: 1.5px;
}

.speak-hud-tr::after {
    top: 0;
    right: 0;
    width: 1.5px;
    height: 30px;
}

.speak-hud-bl {
    bottom: 20px;
    left: 20px;
}

.speak-hud-bl::before {
    bottom: 0;
    left: 0;
    width: 30px;
    height: 1.5px;
}

.speak-hud-bl::after {
    bottom: 0;
    left: 0;
    width: 1.5px;
    height: 30px;
}

.speak-hud-br {
    bottom: 20px;
    right: 20px;
}

.speak-hud-br::before {
    bottom: 0;
    right: 0;
    width: 30px;
    height: 1.5px;
}

.speak-hud-br::after {
    bottom: 0;
    right: 0;
    width: 1.5px;
    height: 30px;
}

.speak-hud-corner {
    animation: cornerFade 4s ease-in-out infinite;
}

.speak-hud-tr {
    animation-delay: 1s;
}

.speak-hud-bl {
    animation-delay: 2s;
}

.speak-hud-br {
    animation-delay: 3s;
}

@keyframes cornerFade {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* ── Top HUD Info Bar ────────────────────────────────────────── */
.speak-hud-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 40px;
    z-index: 5;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--cyan-dim);
    pointer-events: none;
}

.speak-hud-status {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: 4px;
    text-shadow: 0 0 10px var(--cyan-glow);
    animation: statusBlink 2s step-end infinite;
}

.speak-hud-tag {
    opacity: 0.5;
}

/* ── Ring animations ─────────────────────────────────────────── */
@keyframes speakRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes speakRotateR {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes speakLabelGlow {

    0%,
    100% {
        text-shadow: 0 0 20px var(--cyan-glow), 0 0 40px rgba(0, 212, 255, 0.3);
    }

    50% {
        text-shadow: 0 0 30px var(--cyan-glow), 0 0 60px rgba(0, 212, 255, 0.5), 0 0 100px rgba(0, 212, 255, 0.15);
    }
}

/* ── Waveform — wider, more bars ─────────────────────────────── */
.speaking-waveform {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 50px;
    z-index: 2;
}

.wave-bar {
    width: 3px;
    height: 6px;
    background: var(--cyan);
    border-radius: 2px;
    opacity: 0.5;
    animation: waveAnim 0.8s ease-in-out infinite;
    box-shadow: 0 0 4px rgba(0, 212, 255, 0.3);
    transition: height 0.05s ease;
}

.wave-bar:nth-child(1) {
    animation-delay: 0.00s;
}

.wave-bar:nth-child(2) {
    animation-delay: 0.04s;
}

.wave-bar:nth-child(3) {
    animation-delay: 0.08s;
}

.wave-bar:nth-child(4) {
    animation-delay: 0.12s;
}

.wave-bar:nth-child(5) {
    animation-delay: 0.16s;
}

.wave-bar:nth-child(6) {
    animation-delay: 0.20s;
}

.wave-bar:nth-child(7) {
    animation-delay: 0.24s;
}

.wave-bar:nth-child(8) {
    animation-delay: 0.28s;
}

.wave-bar:nth-child(9) {
    animation-delay: 0.32s;
}

.wave-bar:nth-child(10) {
    animation-delay: 0.36s;
}

.wave-bar:nth-child(11) {
    animation-delay: 0.40s;
}

.wave-bar:nth-child(12) {
    animation-delay: 0.36s;
}

.wave-bar:nth-child(13) {
    animation-delay: 0.32s;
}

.wave-bar:nth-child(14) {
    animation-delay: 0.28s;
}

.wave-bar:nth-child(15) {
    animation-delay: 0.24s;
}

.wave-bar:nth-child(16) {
    animation-delay: 0.20s;
}

.wave-bar:nth-child(17) {
    animation-delay: 0.16s;
}

.wave-bar:nth-child(18) {
    animation-delay: 0.12s;
}

.wave-bar:nth-child(19) {
    animation-delay: 0.16s;
}

.wave-bar:nth-child(20) {
    animation-delay: 0.20s;
}

.wave-bar:nth-child(21) {
    animation-delay: 0.24s;
}

.wave-bar:nth-child(22) {
    animation-delay: 0.28s;
}

.wave-bar:nth-child(23) {
    animation-delay: 0.32s;
}

.wave-bar:nth-child(24) {
    animation-delay: 0.36s;
}

.wave-bar:nth-child(25) {
    animation-delay: 0.40s;
}

.wave-bar:nth-child(26) {
    animation-delay: 0.36s;
}

.wave-bar:nth-child(27) {
    animation-delay: 0.32s;
}

.wave-bar:nth-child(28) {
    animation-delay: 0.28s;
}

.wave-bar:nth-child(29) {
    animation-delay: 0.24s;
}

.wave-bar:nth-child(30) {
    animation-delay: 0.20s;
}

.wave-bar:nth-child(31) {
    animation-delay: 0.16s;
}

.wave-bar:nth-child(32) {
    animation-delay: 0.12s;
}

.wave-bar:nth-child(33) {
    animation-delay: 0.08s;
}

.wave-bar:nth-child(34) {
    animation-delay: 0.04s;
}

.wave-bar:nth-child(35) {
    animation-delay: 0.00s;
}

/* When audio-reactive, CSS animation is paused — JS drives heights */
.speaking-overlay.audio-active .wave-bar {
    animation: none;
}

@keyframes waveAnim {

    0%,
    100% {
        height: 6px;
        opacity: 0.3;
    }

    50% {
        height: 36px;
        opacity: 0.9;
    }
}

/* ── Subtitle Ticker ─────────────────────────────────────────── */
.speak-subtitle-container {
    position: absolute;
    bottom: 70px;
    left: 10%;
    right: 10%;
    text-align: center;
    z-index: 5;
    pointer-events: none;
}

.speak-subtitle {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    line-height: 1.6;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
    min-height: 30px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.3s, transform 0.3s;
    padding: 10px 24px;
    background: linear-gradient(90deg, transparent, rgba(0, 10, 20, 0.6), transparent);
    border-top: 1px solid rgba(0, 212, 255, 0.08);
    border-bottom: 1px solid rgba(0, 212, 255, 0.08);
}

.speak-subtitle.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Skip Hint ───────────────────────────────────────────────── */
.speak-skip-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 3px;
    z-index: 5;
    pointer-events: none;
    animation: skipHintFadeIn 2s ease-out 3s both;
}

@keyframes skipHintFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .side-panel { width: 180px; }
    .hud-subtitle { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE (768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── Header ── */
    .hud-header { padding: 10px 12px; }
    .header-left { gap: 8px; }
    .hud-title { font-size: 14px; letter-spacing: 2px; }
    .hud-subtitle { display: none; }
    .header-right { gap: 5px; }
    .status-text { display: none; }
    .hud-time { display: none; }
    #model-selector-label { display: none; }
    .model-selector-btn svg:last-child { display: none; }
    .mobile-hamburger { display: flex; }
    /* Mobile header touch targets (>= 38px for better fit) */
    .voice-toggle, .live-voice-toggle, .camera-toggle { width: 38px; height: 38px; }
    .voice-toggle svg, .live-voice-toggle svg, .camera-toggle svg { width: 18px; height: 18px; }
    .pm-open-btn, .new-chat-btn { padding: 8px 10px; }
    .pm-open-btn svg, .new-chat-btn svg { width: 16px; height: 16px; }
    .model-selector-btn { padding: 8px 10px; font-size: 11px; }
    .notif-bell-btn { padding: 10px; }
    .notif-bell-btn svg { width: 20px; height: 20px; }

    /* ── Widget Dashboard List View ── */
    .widget-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: auto !important;
    }
    .widget {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        margin-bottom: 8px;
    }

    /* ── Side Panels as Drawers ── */
    .left-panel {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: 280px;
        z-index: 800;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        border-right: 1px solid var(--cyan-border);
    }
    .left-panel.mobile-open {
        transform: translateX(0);
    }
    .right-panel { display: none; }

    /* ── Chat Area ── */
    .chat-messages { padding: 12px; }
    .message { max-width: 95%; }

    /* Make quick actions horizontally scrollable */
    .quick-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    .quick-actions::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    .qa-btn {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 11px;
    }

    .input-area { padding: 10px 12px 14px; }
    .input-container { gap: 6px; }
    #user-input {
        padding: 12px 14px;
        font-size: 16px; /* prevents iOS zoom */
    }
    #user-input::placeholder {
        font-size: 11px;
    }
    .scroll-to-bottom { right: 12px; bottom: 80px; }

    /* ── Footer ── */
    .hud-footer { padding: 6px 12px; }
    .footer-left { display: none; }
    .footer-right { display: none; }
    .footer-center { flex: 1; justify-content: center; }

    /* ── Modals & Dropdowns ── */
    .delete-modal-panel { min-width: unset; width: 90vw; max-width: 360px; }
    .model-dropdown {
        position: fixed;
        left: 10px; right: 10px;
        top: auto; bottom: 60px;
        min-width: unset; width: auto;
    }
    .notif-center {
        position: fixed;
        left: 8px; right: 8px;
        top: 56px;
        width: auto;
    }
    .shortcuts-panel { width: 90vw; max-width: 360px; }

    /* ── Toasts ── */
    .toast-container { right: 8px; left: 8px; }
    .toast-item { min-width: unset; max-width: calc(100vw - 32px); }

    /* ── Speaking Overlay ── */
    .speaking-vis-container { width: 280px; height: 280px; }
    .speaking-visualizer { width: 280px; height: 280px; }
    .speak-label { font-size: 14px; letter-spacing: 3px; }
    .speak-sublabel { font-size: 7px; }
    .speak-subtitle { font-size: 14px; }
    .speak-hud-top { padding: 8px 16px; font-size: 8px; }
    .speak-hud-corner { width: 40px; height: 40px; }
    .speaking-waveform { gap: 1px; }
    .wave-bar { width: 2px; }
    .speak-data-readout { display: none; }
    .speak-hud-bottom-bar { display: none; }
    .speak-arc-reactor { display: none; }

    /* ── Project Manager ── */
    .pm-shell { flex-direction: column; }
    .pm-sidebar {
        width: 100%; height: auto; max-height: 35vh;
        border-right: none;
        border-bottom: 1px solid var(--cyan-border);
    }
    .pm-column { width: 240px; min-width: 240px; }
    .pm-board-area { padding: 12px; }
    .pm-modal { width: 90vw; }
    .pm-modal-row { flex-direction: column; }
    .pm-card-panel { width: 100%; left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   CAMERA VISION OVERLAY — Iron Man Targeting HUD
   ═══════════════════════════════════════════════════════════════ */
.vision-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 600;
    overflow: hidden;
    animation: visionBootIn 0.6s ease-out;
}

.vision-overlay.hidden {
    display: none;
}

@keyframes visionBootIn {
    0% {
        opacity: 0;
        transform: scale(1.05);
        filter: brightness(3) saturate(0);
    }

    50% {
        filter: brightness(1.5) saturate(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) saturate(1);
    }
}

/* ── Camera Feed ─────────────────────────────────────────────── */
.vision-feed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    filter: contrast(1.1) brightness(0.95);
}

/* ── Scan Line ───────────────────────────────────────────────── */
.vision-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 212, 255, 0.015) 2px,
            rgba(0, 212, 255, 0.015) 4px);
    pointer-events: none;
    z-index: 2;
}

.vision-scanline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 212, 255, 0.3) 20%,
            rgba(0, 212, 255, 0.6) 50%,
            rgba(0, 212, 255, 0.3) 80%,
            transparent 100%);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4), 0 0 60px rgba(0, 212, 255, 0.2);
    animation: visionScanMove 4s linear infinite;
    z-index: 3;
}

@keyframes visionScanMove {
    0% {
        top: -3px;
    }

    100% {
        top: 100%;
    }
}

/* ── Grid overlay ────────────────────────────────────────────── */
.vision-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 2;
}

/* ── Vignette ────────────────────────────────────────────────── */
.vision-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    z-index: 3;
}

/* ── Corner Brackets (Iron Man targeting) ────────────────────── */
.vision-bracket {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 10;
    pointer-events: none;
}

.vision-bracket::before,
.vision-bracket::after {
    content: '';
    position: absolute;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow), 0 0 20px rgba(0, 212, 255, 0.3);
}

.vision-bracket-tl {
    top: 30px;
    left: 30px;
}

.vision-bracket-tl::before {
    top: 0;
    left: 0;
    width: 40px;
    height: 2px;
}

.vision-bracket-tl::after {
    top: 0;
    left: 0;
    width: 2px;
    height: 40px;
}

.vision-bracket-tr {
    top: 30px;
    right: 30px;
}

.vision-bracket-tr::before {
    top: 0;
    right: 0;
    width: 40px;
    height: 2px;
}

.vision-bracket-tr::after {
    top: 0;
    right: 0;
    width: 2px;
    height: 40px;
}

.vision-bracket-bl {
    bottom: 30px;
    left: 30px;
}

.vision-bracket-bl::before {
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
}

.vision-bracket-bl::after {
    bottom: 0;
    left: 0;
    width: 2px;
    height: 40px;
}

.vision-bracket-br {
    bottom: 30px;
    right: 30px;
}

.vision-bracket-br::before {
    bottom: 0;
    right: 0;
    width: 40px;
    height: 2px;
}

.vision-bracket-br::after {
    bottom: 0;
    right: 0;
    width: 2px;
    height: 40px;
}

/* Subtle breathing animation */
.vision-bracket {
    animation: bracketPulse 3s ease-in-out infinite;
}

.vision-bracket-tr {
    animation-delay: 0.5s;
}

.vision-bracket-bl {
    animation-delay: 1.0s;
}

.vision-bracket-br {
    animation-delay: 1.5s;
}

@keyframes bracketPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* ── Center Reticle ──────────────────────────────────────────── */
.vision-reticle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    z-index: 10;
    pointer-events: none;
}

.reticle-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid var(--cyan);
}

.reticle-ring-1 {
    inset: 0;
    opacity: 0.4;
    animation: reticleRotate 8s linear infinite;
    border-style: dashed;
}

.reticle-ring-2 {
    inset: 15px;
    opacity: 0.6;
    animation: reticleRotateR 5s linear infinite;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

@keyframes reticleRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes reticleRotateR {
    to {
        transform: rotate(-360deg);
    }
}

.reticle-crosshair-h,
.reticle-crosshair-v {
    position: absolute;
    background: var(--cyan);
    opacity: 0.4;
}

.reticle-crosshair-h {
    top: 50%;
    left: 10px;
    right: 10px;
    height: 1px;
    transform: translateY(-0.5px);
}

.reticle-crosshair-v {
    left: 50%;
    top: 10px;
    bottom: 10px;
    width: 1px;
    transform: translateX(-0.5px);
}

/* ── Top HUD Bar ─────────────────────────────────────────────── */
.vision-hud-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 40px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    z-index: 20;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--cyan);
}

.vision-icon {
    font-size: 14px;
    margin-right: 4px;
    animation: visionIconPulse 2s ease-in-out infinite;
}

@keyframes visionIconPulse {

    0%,
    100% {
        opacity: 0.7;
        text-shadow: none;
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 10px var(--cyan-glow);
    }
}

.vision-hud-status {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-shadow: 0 0 10px var(--cyan-glow);
}

.vision-hud-status.scanning {
    color: var(--warning);
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
    animation: statusBlink 0.8s step-end infinite;
}

@keyframes statusBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ── Data Panels (left & right) ──────────────────────────────── */
.vision-data-panel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    z-index: 20;
    pointer-events: none;
}

.vision-data-left {
    left: 30px;
}

.vision-data-right {
    right: 30px;
}

.vision-data-title {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: 3px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cyan-border);
    text-shadow: 0 0 8px var(--cyan-glow);
}

.vision-data-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vision-data-item {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-primary);
    padding: 4px 8px;
    background: rgba(0, 212, 255, 0.05);
    border-left: 2px solid var(--cyan-border);
    animation: dataItemSlideIn 0.4s ease-out both;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vision-data-item .confidence {
    color: var(--cyan);
    font-size: 10px;
    opacity: 0.8;
}

.vision-data-item.vision-data-empty {
    color: var(--text-dim);
    border-left-color: var(--text-dim);
    font-style: italic;
}

@keyframes dataItemSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

.vision-data-right .vision-data-item {
    border-left: none;
    border-right: 2px solid var(--cyan-border);
    text-align: right;
    animation-name: dataItemSlideInRight;
}

@keyframes dataItemSlideInRight {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

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

/* ── Bottom HUD Bar ──────────────────────────────────────────── */
.vision-hud-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 40px 16px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    z-index: 20;
    text-align: center;
}

.vision-caption {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    margin-bottom: 6px;
}

.vision-ocr {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--cyan-dim);
    max-height: 40px;
    overflow: hidden;
    letter-spacing: 1px;
}

/* ── Object Bounding Boxes ───────────────────────────────────── */
.vision-boxes {
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
}

.vision-box {
    position: absolute;
    border: 1.5px solid var(--cyan);
    box-shadow: 0 0 6px var(--cyan-glow), inset 0 0 6px rgba(0, 212, 255, 0.05);
    animation: boxAppear 0.5s ease-out both;
}

.vision-box::before {
    content: attr(data-label);
    position: absolute;
    top: -20px;
    left: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--dark-bg);
    background: var(--cyan);
    padding: 1px 6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Corner ticks on boxes */
.vision-box::after {
    content: '';
    position: absolute;
    top: -1.5px;
    right: -1.5px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--cyan);
    border-right: 2px solid var (--cyan);
    box-shadow: 0 0 4px var(--cyan-glow);
}

@keyframes boxAppear {
    0% {
        opacity: 0;
        transform: scale(1.3);
        border-color: rgba(0, 212, 255, 0);
    }

    60% {
        border-color: rgba(255, 255, 255, 0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        border-color: var(--cyan);
    }
}

/* ── Controls ────────────────────────────────────────────────── */
.vision-controls {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    z-index: 25;
}

.vision-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: 1.5px solid var(--cyan-border);
    border-radius: 4px;
    background: rgba(0, 15, 30, 0.7);
    backdrop-filter: blur(10px);
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.vision-btn svg {
    width: 18px;
    height: 18px;
}

.vision-btn:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: var(--cyan);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2), inset 0 0 20px rgba(0, 212, 255, 0.05);
    text-shadow: 0 0 8px var(--cyan-glow);
}

.vision-btn:active {
    transform: scale(0.97);
}

.vision-btn-scan:hover {
    border-color: var(--success);
    color: var(--success);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

.vision-btn-close:hover {
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 0 20px rgba(255, 51, 85, 0.2);
}

.vision-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Scanning Animation ──────────────────────────────────────── */
.vision-scanning {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vision-scanning.hidden {
    display: none;
}

.scanning-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--cyan) 20%,
            rgba(255, 255, 255, 0.9) 50%,
            var(--cyan) 80%,
            transparent 100%);
    box-shadow:
        0 0 30px var(--cyan-glow),
        0 0 80px rgba(0, 212, 255, 0.4),
        0 -20px 40px rgba(0, 212, 255, 0.1),
        0 20px 40px rgba(0, 212, 255, 0.1);
    animation: scanBarMove 1.5s ease-in-out infinite;
}

@keyframes scanBarMove {
    0% {
        top: 0;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 0;
    }
}

.scanning-label {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 8px;
    text-shadow: 0 0 20px var(--cyan-glow), 0 0 40px rgba(0, 212, 255, 0.4);
    animation: scanLabelPulse 1s ease-in-out infinite;
}

@keyframes scanLabelPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* ── Camera Toggle Button ────────────────────────────────────── */
.camera-toggle {
    background: none;
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-toggle svg {
    width: 18px;
    height: 18px;
    stroke: var(--cyan-dim);
    transition: stroke 0.3s ease;
}

.camera-toggle .cam-icon-off {
    display: none;
}

.camera-toggle .cam-icon-on {
    display: inline;
}

.camera-toggle:hover {
    border-color: var(--cyan);
    background: rgba(0, 212, 255, 0.08);
}

.camera-toggle:hover svg {
    stroke: var(--cyan);
}

.camera-toggle.active {
    border-color: var(--success);
    background: rgba(0, 255, 136, 0.08);
}

.camera-toggle.active svg {
    stroke: var(--success);
}

/* ── New Chat Button ─────────────────────────────────────────── */
.new-chat-btn {
    background: none;
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-chat-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--cyan-dim);
    transition: stroke 0.3s ease;
}

.new-chat-btn:hover {
    border-color: var(--cyan);
    background: rgba(0, 212, 255, 0.08);
}

.new-chat-btn:hover svg {
    stroke: var(--cyan);
}

/* ── Model Selector ──────────────────────────────────────────── */
.model-selector-wrap {
    position: relative;
}

.model-selector-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    padding: 5px 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.model-selector-btn:hover {
    background: rgba(0, 212, 255, 0.12);
    border-color: var(--cyan);
}

.model-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 260px;
    background: rgba(5, 15, 25, 0.97);
    border: 1px solid var(--cyan-border);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 212, 255, 0.08);
    z-index: 1000;
    padding: 6px 0;
    backdrop-filter: blur(12px);
}

.model-dropdown-header {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--cyan);
    padding: 6px 12px 4px;
    border-bottom: 1px solid var(--cyan-border);
    margin-bottom: 4px;
}

.model-group-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    color: rgba(0, 212, 255, 0.45);
    padding: 8px 12px 3px;
    text-transform: uppercase;
}

.model-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
}

.model-option:hover {
    background: rgba(0, 212, 255, 0.08);
    color: var(--cyan);
}

.model-option.selected {
    background: rgba(0, 212, 255, 0.1);
    color: var(--cyan);
}

.model-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.model-dot.auto {
    background: #a78bfa;
    box-shadow: 0 0 6px #a78bfa;
}

.model-dot.gemini {
    background: #f87171;
    box-shadow: 0 0 6px #f87171;
}

.model-dot.nvidia {
    background: #60a5fa;
    box-shadow: 0 0 6px #60a5fa;
}

.model-name {
    flex: 1;
}

.model-badge {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid var(--cyan-border);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--cyan);
}

.model-badge.nvidia-badge {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.3);
    color: #60a5fa;
}

#footer-model-display {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Session / Chat History List ─────────────────────────────── */
.session-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cyan-border) transparent;
}

.session-item {
    position: relative;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.session-item:hover {
    border-color: var(--cyan-border);
    background: rgba(0, 212, 255, 0.05);
    color: var(--text-primary);
}

.session-item.active {
    border-color: var(--cyan);
    background: rgba(0, 212, 255, 0.1);
    color: var(--cyan);
}

.session-item-preview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}

.session-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 18px;
}

.session-item-id {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cyan-dim);
}

.session-item-count {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
}

.session-item-empty {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-dim);
    padding: 8px;
    text-align: center;
}

/* ── Session item delete button ──────────────────────────────── */

.session-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    padding: 0;
    font-family: var(--font-mono);
}

.session-item:hover .session-delete-btn {
    opacity: 0.6;
}

.session-delete-btn:hover {
    opacity: 1 !important;
    color: #ff4d4d;
    border-color: rgba(255, 77, 77, 0.4);
    background: rgba(255, 77, 77, 0.1);
}

/* ── Delete Confirmation Modal ───────────────────────────────── */
.delete-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.delete-modal.hidden {
    display: none;
}

.delete-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.delete-modal-panel {
    position: relative;
    background: linear-gradient(135deg, rgba(10, 15, 28, 0.98), rgba(5, 10, 20, 0.98));
    border: 1px solid rgba(255, 77, 77, 0.3);
    border-radius: 8px;
    padding: 0;
    min-width: 340px;
    max-width: 400px;
    box-shadow: 0 0 30px rgba(255, 77, 77, 0.1), 0 0 60px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.25s ease;
}

@keyframes modalSlideIn {
    from {
        transform: scale(0.95) translateY(-10px);
        opacity: 0;
    }

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

.delete-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 77, 77, 0.15);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 2px;
    color: #ff4d4d;
}

.delete-modal-icon {
    font-size: 14px;
    color: #ff4d4d;
}

.delete-modal-body {
    padding: 18px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.delete-modal-body strong {
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 12px;
}

.delete-modal-warning {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(255, 77, 77, 0.7);
    font-family: var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.delete-modal-actions {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    justify-content: flex-end;
}

.delete-modal-btn {
    padding: 8px 20px;
    border-radius: 4px;
    border: 1px solid;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-modal-btn-cancel {
    background: transparent;
    border-color: var(--cyan-border);
    color: var(--text-secondary);
}

.delete-modal-btn-cancel:hover {
    border-color: var(--cyan);
    color: var(--text-primary);
    background: rgba(0, 212, 255, 0.05);
}

.delete-modal-btn-confirm {
    background: rgba(255, 77, 77, 0.15);
    border-color: rgba(255, 77, 77, 0.4);
    color: #ff4d4d;
}

.delete-modal-btn-confirm:hover {
    background: rgba(255, 77, 77, 0.25);
    border-color: #ff4d4d;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.2);
}

/* Vision overlay responsive is now in the main 768px block above */

/* ═══════════════════════════════════════════════════════════════
   CHAIN OF THOUGHT — Premium Timeline Component
   ═══════════════════════════════════════════════════════════════ */

.cot-container {
    margin: 6px 0 10px 0;
    border: 1px solid var(--cyan-border);
    border-radius: 10px;
    background: rgba(0, 10, 20, 0.55);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: border-color 0.3s ease;
    animation: cotSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cot-container.cot-complete {
    border-color: rgba(0, 212, 255, 0.18);
}

@keyframes cotSlideIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Header ─────────────────────────────────────────────────────── */
.cot-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    background: rgba(0, 212, 255, 0.04);
    border-bottom: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.cot-header:hover {
    background: rgba(0, 212, 255, 0.08);
}

.cot-header.cot-open {
    border-bottom-color: var(--cyan-border);
}

.cot-header-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.cot-header-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--cyan);
    flex: 1;
}

.cot-header-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid var(--cyan-border);
    padding: 1px 7px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.cot-header-count.cot-count-done {
    color: var(--success);
    border-color: rgba(0, 255, 136, 0.3);
    background: rgba(0, 255, 136, 0.06);
}

.cot-chevron {
    font-size: 9px;
    color: var(--text-dim);
    transition: transform 0.25s ease, color 0.2s ease;
    flex-shrink: 0;
}

.cot-header.cot-open .cot-chevron {
    transform: rotate(180deg);
    color: var(--cyan-dim);
}

/* ── Body ───────────────────────────────────────────────────────── */
.cot-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cot-body.cot-open {
    max-height: 600px;
}

.cot-steps {
    padding: 12px 14px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* ── Vertical timeline line ─────────────────────────────────────── */
.cot-steps::before {
    content: '';
    position: absolute;
    left: 26px;
    top: 24px;
    bottom: 14px;
    width: 1px;
    background: linear-gradient(180deg, var(--cyan-border), transparent);
    pointer-events: none;
}

/* ── Individual Step ────────────────────────────────────────────── */
.cot-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    animation: cotStepIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* ── Step Icon Circle ───────────────────────────────────────────── */
.cot-step-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 1px solid var(--cyan-border);
    background: rgba(0, 10, 20, 0.7);
    position: relative;
    z-index: 1;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.cot-step.cot-step-active .cot-step-icon {
    border-color: var(--cyan);
    background: rgba(0, 212, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.25);
    animation: cotIconPulse 1.5s ease-in-out infinite;
}

.cot-step.cot-step-complete .cot-step-icon {
    border-color: var(--success);
    background: rgba(0, 255, 136, 0.08);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
}

@keyframes cotIconPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0, 212, 255, 0.2); }
    50%       { box-shadow: 0 0 16px rgba(0, 212, 255, 0.5); }
}

/* ── Step Content ───────────────────────────────────────────────── */
.cot-step-content {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
}

.cot-step-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cot-step-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-primary);
}

/* ── Status Badge ───────────────────────────────────────────────── */
.cot-step-status {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.cot-step.cot-step-pending  .cot-step-status {
    color: var(--text-dim);
    background: rgba(120, 160, 200, 0.08);
    border: 1px solid rgba(120, 160, 200, 0.15);
}

.cot-step.cot-step-active .cot-step-status {
    color: var(--cyan);
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.25);
    animation: cotStatusBlink 1.2s step-end infinite;
}

@keyframes cotStatusBlink {
    0%, 60%, 100% { opacity: 1; }
    30%           { opacity: 0.5; }
}

.cot-step.cot-step-complete .cot-step-status {
    color: var(--success);
    background: rgba(0, 255, 136, 0.06);
    border: 1px solid rgba(0, 255, 136, 0.2);
}

/* ── Step Description ───────────────────────────────────────────── */
.cot-step-desc {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 3px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
    transition: color 0.3s;
}

.cot-step.cot-step-complete .cot-step-desc {
    color: rgba(120, 160, 200, 0.5);
}

/* ── Thinking dots for active step ─────────────────────────────── */
.cot-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

.cot-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cyan);
    animation: cotDotBounce 1.2s ease-in-out infinite;
}

.cot-dot:nth-child(2) { animation-delay: 0.2s; }
.cot-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes cotDotBounce {
    0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
    30%           { transform: translateY(-4px); opacity: 1;   }
}

/* ── Completion footer ──────────────────────────────────────────── */
.cot-footer {
    padding: 7px 14px 10px 52px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--success);
    letter-spacing: 0.5px;
    opacity: 0;
    animation: cotFooterIn 0.4s ease 0.1s forwards;
}

@keyframes cotFooterIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 0.7; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   ATTACHMENT SYSTEM — elements.ai-sdk.dev inspired
   ════════════════════════════════════════════════════════════════ */

/* ── Attach button in input bar ─────────────────────────────────── */
.attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid rgba(0, 212, 255, 0.15);
    cursor: pointer;
    color: rgba(0, 212, 255, 0.5);
    flex-shrink: 0;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.attach-btn:hover {
    color: var(--cyan);
    border-color: rgba(0, 212, 255, 0.4);
    background: rgba(0, 212, 255, 0.06);
}
.attach-btn svg { width: 14px; height: 14px; }

/* ── Attachment preview strip above input ───────────────────────── */
.attachment-strip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px 6px;
    border-top: 1px solid rgba(0, 212, 255, 0.1);
    background: rgba(0, 10, 20, 0.6);
    flex-wrap: wrap;
}
.attachment-strip.hidden { display: none; }

.attachment-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
}

/* ── Individual attachment card ─────────────────────────────────── */
.attachment-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 6px;
    padding: 6px 8px 6px 6px;
    min-width: 160px;
    max-width: 260px;
    position: relative;
    animation: attachCardIn 0.25s ease;
    transition: border-color 0.2s;
}
.attachment-card:hover { border-color: rgba(0, 212, 255, 0.45); }

@keyframes attachCardIn {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Thumbnail preview */
.attachment-preview {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0, 212, 255, 0.08);
}
.image-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}
.attachment-icon-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 212, 255, 0.5);
}
.attachment-icon-thumb svg { width: 20px; height: 20px; }

/* File info */
.attachment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.attachment-name {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.attachment-meta {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(0, 212, 255, 0.4);
    letter-spacing: 0.5px;
}

/* Remove button */
.attachment-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(0, 212, 255, 0.35);
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}
.attachment-remove:hover {
    color: var(--danger);
    background: rgba(255, 51, 85, 0.12);
}
.attachment-remove svg { width: 12px; height: 12px; }

/* ── Drop zone overlay ───────────────────────────────────────────── */
.drop-zone {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 10, 0.85);
    border: 2px dashed rgba(0, 212, 255, 0.5);
    border-radius: 8px;
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 1px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    animation: dropZonePulse 1.5s ease infinite;
}
.drop-zone.hidden { display: none; }
.drop-icon { width: 36px; height: 36px; opacity: 0.7; }
@keyframes dropZonePulse {
    0%, 100% { border-color: rgba(0, 212, 255, 0.4); }
    50%       { border-color: rgba(0, 212, 255, 0.8); }
}

/* The input area needs relative positioning for drop zone */
.input-area { position: relative; }

/* ════════════════════════════════════════════════════════════════
   STREAMING TEXT REVEAL — smooth fade-in of JARVIS responses
   ════════════════════════════════════════════════════════════════ */
.message-body.stream-reveal {
    animation: streamReveal 0.5s ease forwards;
}
@keyframes streamReveal {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   HIGHLIGHT.JS CODE BLOCKS — JARVIS themed overrides
   ════════════════════════════════════════════════════════════════ */
.hljs-pre {
    position: relative;
    margin: 10px 0;
    border-radius: 6px;
    border: 1px solid rgba(0, 212, 255, 0.15);
    overflow: hidden;
}
.hljs-pre code.hljs {
    display: block;
    padding: 14px 14px 14px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    background: rgba(0, 5, 15, 0.9) !important;
    color: #abb2bf;
}
/* Override hljs background to match our dark theme */
.hljs { background: rgba(0, 5, 15, 0.9) !important; }

.copy-code-btn {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.5px;
    color: rgba(0, 212, 255, 0.6);
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
}
.copy-code-btn:hover {
    color: var(--cyan);
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.4);
}

/* ── Marked.js rendered markdown styles ─────────────────────────── */
.message-body h1,
.message-body h2,
.message-body h3 {
    color: var(--cyan);
    font-family: var(--font-display);
    margin: 12px 0 6px;
    letter-spacing: 0.5px;
}
.message-body h1 { font-size: 16px; }
.message-body h2 { font-size: 14px; }
.message-body h3 { font-size: 13px; opacity: 0.9; }

.message-body p { margin: 6px 0; line-height: 1.6; }
.message-body ul,
.message-body ol {
    margin: 6px 0 6px 16px;
    padding: 0;
    line-height: 1.7;
}
.message-body li { margin: 2px 0; }
.message-body strong { color: var(--cyan); font-weight: 600; }
.message-body em { color: rgba(0, 212, 255, 0.7); font-style: italic; }
.message-body code:not(.hljs) {
    background: rgba(0, 212, 255, 0.1);
    color: var(--cyan);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.88em;
    border: 1px solid rgba(0, 212, 255, 0.15);
}
.message-body blockquote {
    border-left: 2px solid rgba(0, 212, 255, 0.4);
    margin: 8px 0;
    padding: 4px 12px;
    color: rgba(224, 240, 255, 0.65);
    background: rgba(0, 212, 255, 0.04);
    border-radius: 0 4px 4px 0;
}
.message-body hr {
    border: none;
    border-top: 1px solid rgba(0, 212, 255, 0.2);
    margin: 12px 0;
}
.message-body a {
    color: var(--cyan);
    text-decoration: underline;
    text-decoration-color: rgba(0, 212, 255, 0.3);
    transition: text-decoration-color 0.2s;
}

/* ═══════════════════════════════════════════════════════════════
   WIDGET DASHBOARD SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── Widget Toolbar ─────────────────────────────────────────── */
.widget-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 2px;
}

.widget-toolbar-title {
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--cyan);
    letter-spacing: 2px;
}

.widget-gear-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s, background 0.2s;
}
.widget-gear-btn:hover { color: var(--cyan); background: rgba(0,212,255,0.07); }
.widget-gear-btn svg { width: 14px; height: 14px; }

/* ── Widget Grid ─────────────────────────────────────────────── */
.widget-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Widget Shell ────────────────────────────────────────────── */
.widget {
    background: rgba(10, 15, 25, 0.4);
    border: 1px solid var(--cyan-border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.widget:hover {
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.07);
}

/* Sortable drag ghost */
.widget-ghost {
    opacity: 0.35;
    border: 1px dashed var(--cyan) !important;
    background: rgba(0, 212, 255, 0.04) !important;
}
.widget-drag-active {
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.25) !important;
}

/* ── Widget Header ───────────────────────────────────────────── */
.widget-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    background: rgba(0, 212, 255, 0.05);
    border-bottom: 1px solid var(--cyan-border);
    user-select: none;
}

.widget-drag-handle {
    cursor: grab;
    color: var(--text-dim);
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.2s;
}
.widget-drag-handle:active { cursor: grabbing; }
.widget:hover .widget-drag-handle { color: rgba(0, 212, 255, 0.5); }

.widget-title {
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.widget-icon { width: 11px; height: 11px; flex-shrink: 0; }

.widget-controls {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.widget-size-btn,
.widget-collapse-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}
.widget-size-btn:hover,
.widget-collapse-btn:hover { color: var(--cyan); background: rgba(0,212,255,0.08); }

/* ── Widget Body ─────────────────────────────────────────────── */
.widget-body {
    padding: 10px 12px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.widget-body.collapsed {
    max-height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
}

/* Size variants via max-height */
.widget[data-size="small"]  .widget-body { max-height: 90px;  overflow-y: auto; }
.widget[data-size="medium"] .widget-body { max-height: 200px; overflow-y: auto; }
.widget[data-size="large"]  .widget-body { max-height: none; }

/* ── Widget States ───────────────────────────────────────────── */
.widget-loading,
.widget-empty,
.widget-error {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    text-align: center;
    padding: 14px 0;
}
.widget-error { color: var(--danger); }

/* ── Settings Panel ──────────────────────────────────────────── */
.widget-settings-panel {
    position: absolute;
    inset: 0;
    background: var(--dark-panel);
    backdrop-filter: blur(16px);
    z-index: 50;
    padding: 14px;
    overflow-y: auto;
    border-right: 1px solid var(--cyan-border);
}
.widget-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--cyan);
    letter-spacing: 1.5px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cyan-border);
}
.widget-settings-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 3px;
}
.widget-settings-close:hover { color: var(--cyan); }

.widget-settings-list { display: flex; flex-direction: column; gap: 6px; }

.widget-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: rgba(0,212,255,0.03);
    border: 1px solid var(--cyan-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.widget-settings-row:hover { background: rgba(0,212,255,0.07); }

.widget-settings-row input[type="checkbox"] {
    accent-color: var(--cyan);
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.widget-settings-row span {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    flex: 1;
}

.widget-settings-footer {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--cyan-border);
}
.widget-settings-reset {
    background: transparent;
    border: 1px solid var(--cyan-border);
    color: var(--text-dim);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 10px;
    font-family: var(--font-display);
    letter-spacing: 0.5px;
    cursor: pointer;
    width: 100%;
    transition: color 0.2s, border-color 0.2s;
}
.widget-settings-reset:hover { color: var(--cyan); border-color: var(--cyan); }

/* ── Stocks Widget ───────────────────────────────────────────── */
.stock-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 212, 255, 0.05);
}
.stock-row:last-child { border-bottom: none; }

.stock-symbol {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--cyan);
    min-width: 60px;
}
.stock-price {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-primary);
    flex: 1;
    text-align: center;
}
.stock-change {
    font-family: var(--font-mono);
    font-size: 10px;
    min-width: 50px;
    text-align: right;
}
.stock-change.up   { color: var(--success); }
.stock-change.down { color: var(--danger); }

.stocks-updated {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    text-align: right;
    margin-top: 6px;
}

/* ── Calendar Widget ─────────────────────────────────────────── */
.cal-date-header {
    font-family: var(--font-display);
    font-size: 9px;
    color: var(--cyan);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.cal-event {
    display: flex;
    gap: 7px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 212, 255, 0.05);
    align-items: flex-start;
}
.cal-event:last-child { border-bottom: none; }

.cal-event-time {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 1px;
    min-width: 35px;
}
.cal-event-title {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* ── Habits Widget ───────────────────────────────────────────── */
.habit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 212, 255, 0.05);
}
.habit-row:last-child { border-bottom: none; }

.habit-check {
    width: 16px;
    height: 16px;
    border: 1px solid var(--cyan-border);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.habit-check.done { background: var(--cyan); border-color: var(--cyan); }
.habit-check.done::after { content: '✓'; color: var(--dark-bg); font-size: 10px; font-weight: bold; }

.habit-icon { font-size: 13px; flex-shrink: 0; }
.habit-name { flex: 1; font-family: var(--font-body); font-size: 11px; color: var(--text-primary); }
.habit-streak {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--warning);
    flex-shrink: 0;
}

.habit-add-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cyan-border);
}
.habit-add-input {
    flex: 1;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    padding: 4px 7px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    outline: none;
}
.habit-add-input:focus { border-color: var(--cyan); }
.habit-add-btn {
    background: rgba(0,212,255,0.1);
    border: 1px solid var(--cyan-border);
    color: var(--cyan);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    line-height: 1;
}
.habit-add-btn:hover { background: rgba(0,212,255,0.2); }

/* ── Notes Widget ────────────────────────────────────────────── */
.note-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.08);
    border-radius: 5px;
    padding: 7px 9px;
    margin-bottom: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    cursor: text;
    word-break: break-word;
    position: relative;
    transition: border-color 0.2s;
}
.note-card:hover { border-color: rgba(0, 212, 255, 0.2); }

.note-card textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 11px;
    resize: none;
    outline: none;
    min-height: 40px;
    line-height: 1.5;
}

.note-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.note-card:hover .note-delete-btn { opacity: 1; }
.note-delete-btn:hover { color: var(--danger); }

.note-add-btn {
    width: 100%;
    background: rgba(0, 212, 255, 0.04);
    border: 1px dashed var(--cyan-border);
    color: var(--text-dim);
    border-radius: 5px;
    padding: 6px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11px;
    text-align: center;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.note-add-btn:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(0,212,255,0.08); }

/* ── Daily Briefing Widget ───────────────────────────────────── */
.briefing-date {
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--cyan);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.briefing-section {
    margin-bottom: 12px;
}
.briefing-section:last-child { margin-bottom: 0; }

.briefing-section-title {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-dim);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--cyan-border);
    padding-bottom: 3px;
}

.briefing-weather {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.briefing-temp {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--cyan);
    line-height: 1;
}
.briefing-desc {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-primary);
}
.briefing-meta {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
    margin-left: auto;
}

.briefing-news-item {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    padding: 3px 0;
    line-height: 1.4;
    border-bottom: 1px solid rgba(0,212,255,0.04);
}
.briefing-news-item:last-child { border-bottom: none; }

.briefing-event {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 3px 0;
}
.briefing-event-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cyan-dim);
    flex-shrink: 0;
    min-width: 36px;
}
.briefing-event-title {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── Bell Button ─────────────────────────────────────────────── */
.notif-bell-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.notif-bell-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    position: relative;
}
.notif-bell-btn:hover { color: var(--cyan); background: rgba(0,212,255,0.07); }
.notif-bell-btn svg { width: 16px; height: 16px; }

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger);
    color: white;
    border-radius: 8px;
    min-width: 15px;
    height: 15px;
    font-size: 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgePop 0.3s ease;
}
@keyframes badgePop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ── Notification Center ─────────────────────────────────────── */
.notif-center {
    position: absolute;
    top: 40px;
    right: 0;
    width: 320px;
    background: var(--dark-panel);
    border: 1px solid var(--cyan-border);
    border-radius: 8px;
    backdrop-filter: blur(20px);
    z-index: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(0,212,255,0.06);
    overflow: hidden;
    animation: notifSlideDown 0.2s ease;
}
@keyframes notifSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.notif-center-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0,212,255,0.05);
    border-bottom: 1px solid var(--cyan-border);
}
.notif-tabs {
    display: flex;
    gap: 4px;
}
.notif-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 9px;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.notif-tab:hover { color: var(--cyan); }
.notif-tab.active { color: var(--cyan); border-color: var(--cyan-border); }
.notif-item.notif-read { opacity: 0.45; }
.notif-mark-all {
    background: transparent;
    border: 1px solid var(--cyan-border);
    color: var(--text-dim);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 9px;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.notif-mark-all:hover { color: var(--cyan); border-color: var(--cyan); }

.notif-center-list {
    max-height: 360px;
    overflow-y: auto;
}

.notif-empty {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    text-align: center;
    padding: 20px;
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0,212,255,0.05);
    transition: background 0.15s;
}
.notif-item:hover { background: rgba(0,212,255,0.03); }
.notif-item:last-child { border-bottom: none; }

.notif-item-icon {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}
.notif-item-content { flex: 1; min-width: 0; }
.notif-item-title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.notif-item-body {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-item-time {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--text-dim);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Toast Notifications ─────────────────────────────────────── */
.toast-container {
    position: fixed;
    top: 64px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-item {
    min-width: 280px;
    max-width: 360px;
    background: var(--dark-panel);
    border: 1px solid var(--cyan-border);
    border-left: 3px solid var(--cyan);
    border-radius: 8px;
    padding: 11px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: toastSlideIn 0.3s ease;
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    pointer-events: all;
}
.toast-item.toast-warning { border-left-color: var(--warning); }
.toast-item.toast-danger  { border-left-color: var(--danger); }

@keyframes toastSlideIn {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(110%); opacity: 0; }
}
.toast-item.removing { animation: toastSlideOut 0.25s ease forwards; }

.toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

.toast-content { flex: 1; min-width: 0; }
.toast-title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.toast-body {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-dim);
}

.toast-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.2s;
}
.toast-close:hover { color: var(--text-primary); }
.message-body a:hover { text-decoration-color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════
   PROJECT MANAGER — Kanban HUD
   ═══════════════════════════════════════════════════════════════ */

/* ── Open button in header ──────────────────────────────────────── */
.pm-open-btn {
    background: transparent;
    border: 1px solid var(--cyan-border);
    color: var(--cyan-dim);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.pm-open-btn svg { width: 16px; height: 16px; }
.pm-open-btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.pm-open-btn.active { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-faint); }

/* ── Full-screen overlay ─────────────────────────────────────────── */
.pm-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--dark-bg);
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    animation: pm-fade-in 0.2s ease;
}
.pm-overlay.hidden { display: none; }
@keyframes pm-fade-in { from { opacity: 0; } to { opacity: 1; } }

.pm-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.pm-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: rgba(5, 10, 20, 0.9);
    border-right: 1px solid var(--cyan-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pm-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px 12px;
    border-bottom: 1px solid var(--cyan-border);
}
.pm-sidebar-title {
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--cyan);
    letter-spacing: 1px;
}
.pm-new-board-btn {
    background: transparent;
    border: 1px solid var(--cyan-border);
    color: var(--cyan);
    width: 22px; height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.pm-new-board-btn:hover { background: var(--cyan-faint); box-shadow: 0 0 8px var(--cyan-glow); }

.pm-board-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.pm-board-item {
    padding: 10px 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pm-board-item:hover { background: var(--cyan-faint); border-left-color: var(--cyan-dim); }
.pm-board-item.active { background: rgba(0,212,255,0.1); border-left-color: var(--cyan); }
.pm-board-item-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-board-item-meta {
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--font-mono);
}
.pm-board-item-del {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    transition: color 0.2s;
    align-self: center;
}
.pm-board-item-del:hover { color: var(--danger); }

/* ── Main board area ─────────────────────────────────────────────── */
.pm-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.pm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cyan-border);
    background: rgba(5,10,20,0.6);
    flex-shrink: 0;
}
.pm-board-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.pm-board-title {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--cyan);
    letter-spacing: 1px;
}
.pm-board-meta { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.pm-topbar-actions { display: flex; align-items: center; gap: 10px; }

.pm-add-col-btn {
    background: transparent;
    border: 1px solid var(--cyan-border);
    color: var(--cyan-dim);
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.pm-add-col-btn:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-faint); }
.pm-add-col-btn.hidden { display: none; }

.pm-close-btn {
    background: transparent;
    border: 1px solid rgba(255,51,85,0.3);
    color: rgba(255,51,85,0.7);
    width: 28px; height: 28px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.pm-close-btn:hover { border-color: var(--danger); color: var(--danger); background: rgba(255,51,85,0.1); }

/* ── Kanban board ────────────────────────────────────────────────── */
.pm-board-area {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.pm-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-dim);
}
.pm-empty-icon { font-size: 40px; opacity: 0.3; }
.pm-empty-text { font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; }

/* ── Kanban column ───────────────────────────────────────────────── */
.pm-column {
    width: 270px;
    flex-shrink: 0;
    background: rgba(10, 15, 30, 0.7);
    border: 1px solid var(--cyan-border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
}
.pm-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--cyan-border);
    flex-shrink: 0;
}
.pm-column-name {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--cyan);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pm-column-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    background: rgba(0,212,255,0.08);
    border: 1px solid var(--cyan-border);
    border-radius: 10px;
    padding: 1px 7px;
}
.pm-column-del {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    transition: color 0.2s;
}
.pm-column-del:hover { color: var(--danger); }

.pm-cards-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60px;
}

/* Sortable ghost */
.pm-card.sortable-ghost {
    opacity: 0.3;
    border-color: var(--cyan) !important;
    background: var(--cyan-faint) !important;
}
.pm-card.sortable-drag { opacity: 0.9; transform: rotate(1deg); }

/* ── Kanban card ──────────────────────────────────────────────────── */
.pm-card {
    background: rgba(15, 22, 40, 0.9);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 5px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pm-card:hover {
    border-color: var(--cyan-dim);
    background: rgba(0, 212, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 212, 255, 0.1);
}
.pm-card-title {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.35;
}
.pm-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pm-priority {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pm-priority.high { background: rgba(255,51,85,0.15); color: #ff6680; border: 1px solid rgba(255,51,85,0.3); }
.pm-priority.normal { background: rgba(0,212,255,0.08); color: var(--cyan-dim); border: 1px solid var(--cyan-border); }
.pm-priority.low { background: rgba(120,160,200,0.08); color: var(--text-dim); border: 1px solid rgba(120,160,200,0.2); }

.pm-label-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 2px;
    background: rgba(0, 255, 136, 0.08);
    color: #00cc66;
    border: 1px solid rgba(0,255,136,0.2);
}
.pm-card-assignee {
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    margin-left: auto;
}
.pm-card-due {
    font-size: 10px;
    color: var(--warning);
    font-family: var(--font-mono);
}
.pm-card-due.overdue { color: var(--danger); }

/* ── Add card button ─────────────────────────────────────────────── */
.pm-add-card-btn {
    margin: 0 8px 8px;
    padding: 7px;
    background: transparent;
    border: 1px dashed rgba(0,212,255,0.2);
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    text-align: center;
    flex-shrink: 0;
}
.pm-add-card-btn:hover { border-color: var(--cyan-dim); color: var(--cyan-dim); background: var(--cyan-faint); }

/* ── Card detail panel ───────────────────────────────────────────── */
.pm-card-panel {
    width: 360px;
    flex-shrink: 0;
    background: rgba(5, 10, 20, 0.97);
    border-left: 1px solid var(--cyan-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pm-slide-in 0.2s ease;
}
.pm-card-panel.hidden { display: none; }
@keyframes pm-slide-in { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.pm-card-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--cyan-border);
    flex-shrink: 0;
}
.pm-card-panel-title {
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--cyan);
    letter-spacing: 1px;
}
.pm-card-panel-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    transition: color 0.2s;
    padding: 0;
}
.pm-card-panel-close:hover { color: var(--text-primary); }

.pm-card-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Card detail field groups */
.pm-field-group { display: flex; flex-direction: column; gap: 4px; }
.pm-field-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pm-field-value {
    font-size: 13px;
    color: var(--text-primary);
    background: rgba(0,212,255,0.04);
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    resize: none;
    transition: border-color 0.2s;
}
.pm-field-value:focus { outline: none; border-color: var(--cyan-dim); background: rgba(0,212,255,0.06); }
select.pm-field-value { cursor: pointer; }
select.pm-field-value option { background: #0a0f1e; }

.pm-detail-title {
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 700;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px 8px;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    transition: border-color 0.2s;
}
.pm-detail-title:focus { outline: none; border-color: var(--cyan-border); background: rgba(0,212,255,0.04); }

.pm-detail-row { display: flex; gap: 10px; }
.pm-detail-row .pm-field-group { flex: 1; }

.pm-save-btn {
    background: rgba(0,212,255,0.12);
    border: 1px solid var(--cyan-dim);
    color: var(--cyan);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    transition: all 0.2s;
    align-self: flex-start;
}
.pm-save-btn:hover { background: rgba(0,212,255,0.2); box-shadow: 0 0 10px var(--cyan-glow); }

.pm-delete-card-btn {
    background: transparent;
    border: 1px solid rgba(255,51,85,0.3);
    color: rgba(255,51,85,0.7);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    transition: all 0.2s;
    align-self: flex-start;
}
.pm-delete-card-btn:hover { border-color: var(--danger); color: var(--danger); background: rgba(255,51,85,0.08); }

.pm-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Comments */
.pm-comments-section { display: flex; flex-direction: column; gap: 8px; }
.pm-comments-title {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cyan-border);
    padding-bottom: 6px;
}
.pm-comment {
    background: rgba(0,212,255,0.04);
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pm-comment-author {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cyan-dim);
}
.pm-comment-content { font-size: 12px; color: var(--text-primary); line-height: 1.4; }
.pm-comment-time { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); }

.pm-comment-input-wrap { display: flex; gap: 6px; }
.pm-comment-input {
    flex: 1;
    background: rgba(0,212,255,0.04);
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    padding: 7px 10px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    resize: none;
}
.pm-comment-input:focus { outline: none; border-color: var(--cyan-dim); }
.pm-comment-send {
    background: rgba(0,212,255,0.1);
    border: 1px solid var(--cyan-border);
    color: var(--cyan);
    padding: 0 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.pm-comment-send:hover { background: rgba(0,212,255,0.2); border-color: var(--cyan); }

.pm-no-comments {
    font-size: 12px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    text-align: center;
    padding: 8px 0;
}

/* ── Modals ───────────────────────────────────────────────────────── */
.pm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pm-fade-in 0.15s ease;
}
.pm-modal-backdrop.hidden { display: none; }

.pm-modal {
    background: rgba(8, 14, 28, 0.98);
    border: 1px solid var(--cyan-border);
    border-radius: 8px;
    width: 480px;
    max-width: calc(100vw - 40px);
    box-shadow: 0 0 40px rgba(0,212,255,0.15);
    display: flex;
    flex-direction: column;
}
.pm-modal-sm { width: 320px; }

.pm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--cyan-border);
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--cyan);
    letter-spacing: 1px;
}
.pm-modal-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 16px;
    transition: color 0.2s;
    padding: 0;
}
.pm-modal-close:hover { color: var(--text-primary); }

.pm-modal-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pm-modal-row { display: flex; gap: 12px; }
.pm-modal-row > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.pm-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pm-input {
    background: rgba(0,212,255,0.04);
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.pm-input:focus { outline: none; border-color: var(--cyan-dim); background: rgba(0,212,255,0.06); }
.pm-textarea { resize: vertical; min-height: 64px; }
.pm-select { cursor: pointer; }
.pm-select option { background: #0a0f1e; }

.pm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--cyan-border);
}
.pm-btn-ghost {
    background: transparent;
    border: 1px solid var(--cyan-border);
    color: var(--text-dim);
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.pm-btn-ghost:hover { border-color: var(--text-primary); color: var(--text-primary); }
.pm-btn-primary {
    background: rgba(0,212,255,0.15);
    border: 1px solid var(--cyan-dim);
    color: var(--cyan);
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
.pm-btn-primary:hover { background: rgba(0,212,255,0.25); box-shadow: 0 0 10px rgba(0,212,255,0.3); }

/* divider */
.pm-divider {
    height: 1px;
    background: var(--cyan-border);
    margin: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — Base Styles (hamburger, backdrop, touch)
   ═══════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.mobile-hamburger {
    display: none;
    background: transparent;
    border: 1px solid var(--cyan-border);
    color: var(--cyan-dim);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.mobile-hamburger svg { width: 18px; height: 18px; }
.mobile-hamburger:hover,
.mobile-hamburger.active {
    border-color: var(--cyan);
    color: var(--cyan);
    background: var(--cyan-faint);
}

/* Mobile drawer backdrop */
.mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 799;
    animation: backdropFadeIn 0.2s ease;
}
@keyframes backdropFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Touch optimizations */
button, a, input, select, textarea, .pm-card, .session-item, .notif-item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (480px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Boot screen */
    .boot-rings { width: 250px; height: 250px; }
    .boot-arc-reactor { width: 320px; height: 320px; inset: -35px; }
    .logo-text { font-size: 22px; letter-spacing: 3px; }
    .logo-subtext { font-size: 7px; }
    .boot-progress { width: 200px; }
    .boot-logo { bottom: -120px; }

    /* Speaking overlay */
    .speaking-vis-container { width: 200px; height: 200px; }
    .speaking-visualizer { width: 200px; height: 200px; }
    .speak-label { font-size: 12px; }
    .speak-subtitle { font-size: 12px; padding: 0 20px; }
    .speak-skip-hint { font-size: 10px; }

    /* Vision overlay */
    .vision-data-panel { display: none; }
    .vision-bracket { width: 40px; height: 40px; }
    .vision-bracket::before { width: 20px !important; }
    .vision-bracket::after { height: 20px !important; }
    .vision-hud-top { padding: 8px 12px; font-size: 9px; }
    .vision-reticle { width: 60px; height: 60px; }
    .vision-controls { gap: 10px; }
    .vision-btn { padding: 8px 16px; font-size: 10px; }

    /* Chat */
    .chat-messages { padding: 8px; gap: 10px; }
    .message { max-width: 98%; }

    /* Header */
    .hud-title { font-size: 12px; letter-spacing: 1px; }
    .arc-reactor-mini { width: 22px; height: 22px; }
    .header-right { gap: 3px; }
    .model-selector-wrap { display: none; }
    .new-chat-btn { display: none; }
    .voice-toggle, .live-voice-toggle, .camera-toggle { width: 28px; height: 28px; }

    /* PM */
    .pm-column { width: 220px; min-width: 220px; }
    .pm-topbar { padding: 10px 12px; }
    .pm-board-title { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — ULTRA SMALL (380px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .arc-reactor-mini { display: none; }
    .hud-header { padding: 8px 8px; }
    .header-left { gap: 6px; }
    .input-area { padding: 8px 8px 12px; }
    #user-input { padding: 10px 12px; }
    .left-panel.mobile-open { width: 260px; }
    .hud-footer { padding: 4px 8px; }
    .footer-label { font-size: 8px; }
    .footer-value { font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OVERRIDES (must come after base styles above)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mobile-hamburger { display: flex; }
    .left-panel {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: 280px;
        z-index: 800;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .left-panel.mobile-open {
        transform: translateX(0);
    }
}
@media (max-width: 380px) {
    .left-panel.mobile-open { width: 260px; }
}