/* GonzAI WebUI — Custom Styles */

/* =========================================================================
   THEME SYSTEM — CSS Custom Properties
   4 Themes: Slate (default), Forest, Dusk, Sand
   ========================================================================= */

:root, [data-theme="slate"] {
    --bg-base:       #0f172a;
    --bg-sidebar:    #1e293b;
    --bg-panel:      #1e293b;
    --bg-card:       #334155;
    --bg-input:      #334155;
    --bg-header:     rgba(30, 41, 59, 0.5);
    --border:        #334155;
    --border-subtle: rgba(51, 65, 85, 0.4);
    --accent:        #6366f1;
    --accent-hover:  #818cf8;
    --accent-dim:    rgba(99, 102, 241, 0.2);
    --accent-glow:   rgba(99, 102, 241, 0.3);
    --text-primary:  #f1f5f9;
    --text-secondary:#94a3b8;
    --text-muted:    #475569;
    --msg-user-bg:   #6366f1;
    --msg-ai-bg:     #1e293b;
    --scrollbar:     #475569;
    --logo-glow:     rgba(99, 102, 241, 0.4);
}

[data-theme="forest"] {
    --bg-base:       #0d1a12;
    --bg-sidebar:    #162218;
    --bg-panel:      #162218;
    --bg-card:       #1e3324;
    --bg-input:      #1e3324;
    --bg-header:     rgba(22, 34, 24, 0.6);
    --border:        #2d4a35;
    --border-subtle: rgba(45, 74, 53, 0.4);
    --accent:        #4ade80;
    --accent-hover:  #86efac;
    --accent-dim:    rgba(74, 222, 128, 0.15);
    --accent-glow:   rgba(74, 222, 128, 0.25);
    --text-primary:  #ecfdf5;
    --text-secondary:#86efac;
    --text-muted:    #4d7a5a;
    --msg-user-bg:   #16a34a;
    --msg-ai-bg:     #162218;
    --scrollbar:     #2d4a35;
    --logo-glow:     rgba(74, 222, 128, 0.35);
}

[data-theme="dusk"] {
    --bg-base:       #1a0f1e;
    --bg-sidebar:    #241530;
    --bg-panel:      #241530;
    --bg-card:       #2e1a3d;
    --bg-input:      #2e1a3d;
    --bg-header:     rgba(36, 21, 48, 0.6);
    --border:        #4a2d5e;
    --border-subtle: rgba(74, 45, 94, 0.4);
    --accent:        #c084fc;
    --accent-hover:  #e879f9;
    --accent-dim:    rgba(192, 132, 252, 0.15);
    --accent-glow:   rgba(192, 132, 252, 0.25);
    --text-primary:  #fdf4ff;
    --text-secondary:#d8b4fe;
    --text-muted:    #7c3aed;
    --msg-user-bg:   #7c3aed;
    --msg-ai-bg:     #241530;
    --scrollbar:     #4a2d5e;
    --logo-glow:     rgba(192, 132, 252, 0.4);
}

[data-theme="sand"] {
    --bg-base:       #1c1610;
    --bg-sidebar:    #261e14;
    --bg-panel:      #261e14;
    --bg-card:       #332818;
    --bg-input:      #332818;
    --bg-header:     rgba(38, 30, 20, 0.6);
    --border:        #4a3820;
    --border-subtle: rgba(74, 56, 32, 0.4);
    --accent:        #f59e0b;
    --accent-hover:  #fbbf24;
    --accent-dim:    rgba(245, 158, 11, 0.15);
    --accent-glow:   rgba(245, 158, 11, 0.25);
    --text-primary:  #fefce8;
    --text-secondary:#fcd34d;
    --text-muted:    #78580a;
    --msg-user-bg:   #b45309;
    --msg-ai-bg:     #261e14;
    --scrollbar:     #4a3820;
    --logo-glow:     rgba(245, 158, 11, 0.4);
}

/* Antigravity Teal — WebUI Phase 1 (primary accent; success/health dots stay emerald in markup) */
[data-theme="antigravity"] {
    --bg-base:       #0a1211;
    --bg-sidebar:    #0f1816;
    --bg-panel:      #0f1816;
    --surface:       #0f1816;
    --bg-card:       #152320;
    --bg-input:      #152320;
    --bg-header:     rgba(15, 24, 22, 0.72);
    --border:        #1f2e2c;
    --border-subtle: rgba(31, 46, 44, 0.5);
    --accent:        #2dd4bf;
    --primary:       #2dd4bf;
    --accent-hover:  #5eead4;
    --accent-dim:    rgba(45, 212, 191, 0.14);
    --accent-glow:   rgba(45, 212, 191, 0.32);
    --text-primary:  #ecfdf5;
    --text-secondary:#94d9cf;
    --text-muted:    #4c6d66;
    --msg-user-bg:   #0d9488;
    --msg-ai-bg:     #0f1816;
    --scrollbar:     #2a3f3a;
    --logo-glow:     rgba(45, 212, 191, 0.38);
}

body[data-theme="antigravity"] {
    background:
        radial-gradient(ellipse 90% 70% at 18% -8%, rgba(45, 212, 191, 0.1), transparent 55%),
        radial-gradient(ellipse 65% 50% at 95% 8%, rgba(20, 184, 166, 0.07), transparent 50%),
        var(--bg-base);
    color: var(--text-primary);
}

[data-theme="antigravity"] .assist-item.active {
    background: rgba(45, 212, 191, 0.12);
    border-left-color: #2dd4bf;
}

/* Apply theme variables to elements */
body { background: var(--bg-base); color: var(--text-primary); }

aside { background: var(--bg-sidebar) !important; border-color: var(--border) !important; }
header { background: var(--bg-header) !important; border-color: var(--border) !important; }
main > div { background: var(--bg-base) !important; }
nav { border-color: var(--border) !important; }

.theme-card   { background: var(--bg-card); border-color: var(--border); }
.theme-input  { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); }
.theme-accent { background: var(--accent); }
.theme-accent-dim { background: var(--accent-dim); }
.theme-text   { color: var(--text-primary); }
.theme-muted  { color: var(--text-muted); }
.theme-border { border-color: var(--border); }

/* Enhanced animations */
@keyframes slide-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes glow-subtle {
    0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.1); }
    50% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.2); }
}

/* Utility classes */
.animate-slide-in { animation: slide-in 0.3s ease-out; }
.animate-pulse-slow { animation: pulse-slow 3s infinite; }
.animate-glow-subtle { animation: glow-subtle 2s infinite; }

/* Enhanced hover states */
.hover-lift { transition: all 0.2s; }
.hover-lift:hover { transform: translateY(-1px); }

/* Better contrast */
.text-bright { color: rgb(203, 213, 225); } /* slate-300 */
.bg-code-darker { background: rgb(2, 6, 23); } /* slate-950 */

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Thinking animation */
@keyframes thinking-pulse {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}
.thinking-dot { animation: thinking-pulse 1.4s infinite ease-in-out both; }
.thinking-dot:nth-child(1) { animation-delay: -0.32s; }
.thinking-dot:nth-child(2) { animation-delay: -0.16s; }
.thinking-dot:nth-child(3) { animation-delay: 0s; }

/* Status indicator pulse */
@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.status-active { animation: status-pulse 3s infinite; }

/* Tool call block */
.tool-block {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.75rem;
    background: #020617;
    border: 1px solid #312e81;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Message content formatting */
.msg-content pre { background: #020617; padding: 0.75rem; border-radius: 6px; overflow-x: auto; font-size: 0.8rem; }
.msg-content code { background: #020617; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.85em; }
.msg-content p { margin-bottom: 0.5rem; }
.msg-content p:last-child { margin-bottom: 0; }

/* Token warning glow */
.token-warn { box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
.token-critical { box-shadow: 0 0 20px rgba(244, 63, 94, 0.4); }

/* Sidebar active item */
.assist-item.active { background: #312e81; border-left: 2px solid #6366f1; }
.assist-item { border-left: 2px solid transparent; transition: all 0.2s; }
.assist-item:hover { background: #1e293b; transform: translateY(-1px); }

/* Budget progress bar */
.budget-bar { transition: width 0.5s ease; }

/* Enhanced progress bars with glow */
.progress-glow { animation: glow-subtle 2s infinite; }

/* GonzAI Logo styling */
.gonzai-logo {
    filter: drop-shadow(0 0 8px var(--logo-glow, rgba(99, 102, 241, 0.3))) brightness(1.1) contrast(1.05);
    transition: all 0.3s ease;
    mix-blend-mode: screen;
}

.gonzai-logo:hover {
    filter: drop-shadow(0 0 14px var(--logo-glow, rgba(99, 102, 241, 0.5))) brightness(1.2) contrast(1.1);
    transform: scale(1.05);
}

/* Logo header banner — full-width with transparency */
.logo-banner {
    position: relative;
    overflow: hidden;
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.logo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-dim), transparent 70%);
    pointer-events: none;
}

.logo-banner img {
    filter: drop-shadow(0 2px 12px var(--logo-glow, rgba(99, 102, 241, 0.4))) brightness(1.1) contrast(1.05);
    transition: filter 0.3s ease, transform 0.3s ease;
    mix-blend-mode: screen;
}

.logo-banner img:hover {
    filter: drop-shadow(0 4px 20px var(--logo-glow, rgba(99, 102, 241, 0.6))) brightness(1.2) contrast(1.1);
    transform: scale(1.03);
}

/* Small logo for thinking indicator */
.logo-thinking {
    width: 20px !important;
    height: 20px !important;
    filter: drop-shadow(0 0 6px var(--logo-glow, rgba(99, 102, 241, 0.5))) brightness(1.2) contrast(1.1) !important;
    opacity: 0.9;
    transition: filter 0.3s ease, opacity 0.3s ease;
    mix-blend-mode: screen;
}

.logo-thinking:hover {
    filter: drop-shadow(0 0 10px var(--logo-glow, rgba(99, 102, 241, 0.7))) brightness(1.3) contrast(1.2) !important;
    opacity: 1;
}

/* =========================================================================
   DASHBOARD — Phase 5b: Enterprise Live Activity Dashboard
   ========================================================================= */

/* OODA phase pulse animation */
@keyframes ooda-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--ooda-glow, rgba(34,197,94,0.2)); }
    50% { box-shadow: 0 0 20px 4px var(--ooda-glow, rgba(34,197,94,0.2)); }
}
.ooda-pulse { animation: ooda-pulse 2s infinite; }

/* Token-Tacho gauge glow */
@keyframes tacho-glow {
    0%, 100% { filter: drop-shadow(0 0 4px var(--tacho-glow, rgba(34,197,94,0.3))); }
    50% { filter: drop-shadow(0 0 12px var(--tacho-glow, rgba(34,197,94,0.3))); }
}
.tacho-animate { animation: tacho-glow 3s infinite; }

/* Terminal scanline overlay */
.scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
    pointer-events: none;
}

/* Log area scrollbar */
.log-scroll::-webkit-scrollbar { width: 4px; }
.log-scroll::-webkit-scrollbar-track { background: #0f172a; }
.log-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

/* Budget exceeded full-screen ring */
.budget-exceeded-ring { box-shadow: inset 0 0 0 4px #ef4444, 0 0 30px rgba(239,68,68,0.3); }

/* Critical pulse for budget alerts */
@keyframes critical-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.critical-pulse { animation: critical-pulse 1s infinite; }

/* Tool-Guard modal backdrop */
.modal-backdrop { backdrop-filter: blur(4px); background: rgba(0,0,0,0.6); }

/* Dashboard grid background pattern */
.grid-bg {
    background-image:
        linear-gradient(rgba(51,65,85,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(51,65,85,0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Decision badges */
.badge-allow { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.badge-deny  { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

/* Tab active/inactive states */
.tab-active   { border-bottom: 2px solid var(--accent, #6366f1); color: var(--text-primary, #e2e8f0); }
.tab-inactive { border-bottom: 2px solid transparent; color: #64748b; }
.tab-inactive:hover { color: #94a3b8; border-color: #334155; }

/* WebUI Block B Phase 2 — Focus mode (hide global 56px strip only) */
.focus-mode > aside:first-of-type {
    display: none !important;
}

/* ── Phase 7: Message Hover-Actions ──────────────────── */
.msg-wrapper {
    position: relative; /* Guard — auch wenn HTML bereits relative hat */
}

.msg-hover-actions {
    position: absolute;
    top: -14px;
    right: 8px;
    display: flex;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    background: rgba(24,24,27,0.97);
    border: 1px solid rgba(63,63,70,0.55);
    border-radius: 7px;
    padding: 3px 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
    z-index: 20;
    pointer-events: none;
    white-space: nowrap;
}

.msg-wrapper:hover .msg-hover-actions,
.msg-hover-actions:focus-within {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.msg-wrapper.is-editing .msg-hover-actions {
    display: none;
}

.msg-action-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: #71717a;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: background 0.1s, color 0.1s;
    flex-shrink: 0;
}
.msg-action-btn:hover { background: rgba(63,63,70,0.6); color: #e4e4e7; }
.msg-action-btn:active { background: rgba(45,212,191,0.12); color: #2dd4bf; }
.msg-action-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.msg-action-sep {
    width: 1px;
    height: 16px;
    background: rgba(63,63,70,0.5);
    align-self: center;
    margin: 0 2px;
    flex-shrink: 0;
}

.msg-edit-area {
    width: 100%;
    min-height: 60px;
    max-height: 320px;
    background: rgba(9,9,11,0.8);
    border: 1px solid rgba(45,212,191,0.35);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #f4f4f5;
    resize: vertical;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.msg-edit-area:focus {
    border-color: rgba(45,212,191,0.6);
    box-shadow: 0 0 0 2px rgba(45,212,191,0.08);
}

@keyframes copyFlash {
    0%   { background: rgba(45,212,191,0.25); color: #2dd4bf; }
    100% { background: transparent; color: #71717a; }
}
.msg-action-btn.copy-success {
    animation: copyFlash 0.6s ease forwards;
}
/* ── Ende Phase 7 CSS ────────────────────────────────── */