/* ============================================================================= FILE: app-v579.css SCOPE: Warenwirtschaft -- Haupt-Stylesheet. Enthaelt: Theme-Variablen, Basis-Reset, Utility-Klassen, Glassmorphism, Sidebar, Tabellen, Buttons, Toasts, KI-Komponenten, MDI-Framework, Animationen, Responsive-Rules. Ausgelagert aus index.html (Phase 16.1). REQUIRES: Wird nach lib/fontawesome/css/all.min.css und lib/leaflet/leaflet.css geladen (index.html ). Kein JS-Abhaengigkeit zur Laufzeit. EXPOSES: CSS Custom Properties (--bg, --surface, --accent, ...) fuer alle Module. Klassen: .t-card, .t-surface, .btn, .data-table, .ai-mon-eye, ... VERSION: Phase 16.1 / v5.9.0 POLICY: Zero-Emoji -- keine rohen Unicode-Emoji-Literale in Kommentaren/content. ============================================================================= */ /* ── Theme-Variablen ──────────────────────────────────────────────────────── */ /* LIGHT */ html { --bg: #f1f5f9; --surface: #ffffff; --card: #ffffff; --card-border: #e2e8f0; --sidebar: #1e293b; --sidebar-text: #94a3b8; --sidebar-active-bg: rgba(59,130,246,0.12); --sidebar-active-text: #60a5fa; --sidebar-hover-bg: rgba(255,255,255,0.07); --topbar: #ffffff; --topbar-border: #e2e8f0; --text: #0f172a; --text-muted: #475569; --text-faint: #94a3b8; --accent: #3b82f6; --accent-hover: #2563eb; --th-bg: #f8fafc; --row-hover: #f8fafc; --input-bg: #f8fafc; --input-border: #cbd5e1; --scrollbar-thumb: #cbd5e1; --shadow: rgba(0,0,0,0.06); color-scheme: light; } /* DARK – augenschonend: kein reines Schwarz, blaugetöntes Slate */ html.theme-dark { --bg: #0d1117; --surface: #161b22; --card: #21262d; --card-border: rgba(48,54,61,0.8); --sidebar: #161b22; --sidebar-text: #8b949e; --sidebar-active-bg: rgba(56,139,253,0.15); --sidebar-active-text: #58a6ff; --sidebar-hover-bg: rgba(177,186,196,0.06); --topbar: #161b22; --topbar-border: rgba(48,54,61,0.8); --text: #e6edf3; --text-muted: #8b949e; --text-faint: #484f58; --accent: #388bfd; --accent-hover: #58a6ff; --th-bg: rgba(22,27,34,0.95); --row-hover: rgba(33,38,45,0.8); --input-bg: #0d1117; --input-border: rgba(48,54,61,0.8); --scrollbar-thumb: #30363d; --shadow: rgba(0,0,0,0.4); color-scheme: dark; } /* MODERN – Deep Indigo Glassmorphism */ html.theme-modern { --bg: #0f0a2e; /* Fallback; body bekommt unten den echten Gradient */ --surface: rgba(255,255,255,0.05); --card: rgba(255,255,255,0.06); --card-border: rgba(255,255,255,0.09); --sidebar: rgba(15,10,46,0.25); --sidebar-text: #a5b4fc; --sidebar-active-bg: rgba(99,102,241,0.18); --sidebar-active-text: #c7d2fe; --sidebar-hover-bg: rgba(99,102,241,0.09); --topbar: rgba(4,2,14,0.82); --topbar-border: rgba(99,102,241,0.18); --text: #e0e7ff; --text-muted: #a5b4fc; --text-faint: #4f46e5; --accent: #818cf8; --accent-hover: #a5b4fc; --th-bg: rgba(255,255,255,0.04); --row-hover: rgba(255,255,255,0.10); /* aufhellen statt abdunkeln */ --input-bg: rgba(255,255,255,0.06); --input-border: rgba(255,255,255,0.12); --scrollbar-thumb: #4338ca; --shadow: rgba(0,0,0,0.5); color-scheme: dark; } /* Modern: echter farbiger Hintergrund – muss ÜBER body-background stehen */ html.theme-modern body { background: linear-gradient(135deg, #030712 0%, /* gray-950 */ #1e1b4b 45%, /* indigo-950 */ #3b0764 100%) /* purple-950 */ fixed !important; } /* ── Basis ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; } /* Modern V2: Animierte Lichtquellen über dem Basis-Gradient */ html.theme-modern body::before { content: ''; position: fixed; inset: -30%; /* Überhang verhindert Rand beim scale/rotate-Transform */ z-index: 0; pointer-events: none; /* Hohe Deckkraft → sichtbare Lichtblobs, die durch Glas-Container durchscheinen */ background: radial-gradient(ellipse 55% 50% at 18% 28%, rgba(99,102,241,0.75) 0%, transparent 55%), radial-gradient(ellipse 48% 55% at 82% 70%, rgba(168,85,247,0.65) 0%, transparent 55%), radial-gradient(ellipse 36% 36% at 63% 12%, rgba(34,211,238,0.35) 0%, transparent 46%), radial-gradient(ellipse 40% 34% at 28% 82%, rgba(129,140,248,0.45) 0%, transparent 50%); animation: mesh_drift 14s ease-in-out infinite alternate; } /* App-Container über dem Pseudo-Element */ html.theme-modern #app { position: relative; z-index: 1; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } /* ── Utility-Klassen ──────────────────────────────────────────────────────── */ .t-surface { background: var(--surface); } .t-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; } .t-sidebar { background: var(--sidebar); } .t-topbar { background: var(--topbar); border-bottom: 1px solid var(--topbar-border); } .t-text { color: var(--text); } .t-muted { color: var(--text-muted); } .t-faint { color: var(--text-faint); } /* ?????????????????????????????????????????????????????? Modern V2 — Extreme Glassmorphism + Neon-Akzente ?????????????????????????????????????????????????????? */ /* Milchglas-Karten: 20% Deckkraft + backdrop-blur-3xl (40px) */ html.theme-modern .t-card { background: rgba(15, 10, 46, 0.20) !important; backdrop-filter: blur(40px) saturate(200%) brightness(1.12); -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.12); border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: 20px !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10), /* Highlight-Kante oben */ inset 0 -1px 0 rgba(0, 0, 0, 0.20), /* Tiefenkante unten */ 0 0 0 0.5px rgba(34, 211, 238, 0.25); /* Cyan-Neon-Kontur */ } /* Topbar: schwebend, 22% Deckung */ html.theme-modern .t-topbar { background: rgba(15, 10, 46, 0.22) !important; backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; box-shadow: 0 1px 0 rgba(34,211,238,0.12), 0 4px 24px rgba(0,0,0,0.35); } /* Sidebar: 18% Deckung – Mesh-Gradient schimmert deutlich durch */ html.theme-modern .t-sidebar { background: rgba(15, 10, 46, 0.18) !important; backdrop-filter: blur(32px) saturate(160%); -webkit-backdrop-filter: blur(32px) saturate(160%); border-right: 1px solid rgba(255, 255, 255, 0.07) !important; } /* Neon-Akzent: aktiver Nav-Eintrag glüht */ html.theme-modern .nav-item.active { background: rgba(99, 102, 241, 0.16) !important; box-shadow: inset 3px 0 0 rgba(129,140,248,0.9), 0 0 12px rgba(99,102,241,0.15); } html.theme-modern .nav-item.active svg { filter: drop-shadow(0 0 5px rgba(129,140,248,0.7)); } /* Neon-Akzent: primärer Button glüht Cyan-Indigo */ html.theme-modern .btn-primary { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; box-shadow: 0 0 18px rgba(99,102,241,0.5), 0 2px 8px rgba(0,0,0,0.4); } html.theme-modern .btn-primary:hover { box-shadow: 0 0 28px rgba(99,102,241,0.7), 0 2px 8px rgba(0,0,0,0.4); } /* Tabellen-Header */ html.theme-modern .data-table th { color: rgba(199,210,254,0.7); } html.theme-modern .data-table tbody tr { border-bottom-color: rgba(255,255,255,0.05) !important; } /* Row-Hover: AUFHELLEN (bg-white/10) + Cyan-Kontur */ html.theme-modern .data-table tbody tr:hover { background: rgba(255, 255, 255, 0.10) !important; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.18), /* Cyan-Rand */ 0 0 24px rgba(34, 211, 238, 0.06); /* äußerer Cyan-Glow */ } /* Theme-Switcher-Gruppe als Glas */ html.theme-modern .theme-btn { background: rgba(8,5,28,0.4) !important; } html.theme-modern .theme-btn.active { background: rgba(99,102,241,0.55) !important; box-shadow: 0 0 10px rgba(99,102,241,0.4); } /* ── Sidebar-Navigation ───────────────────────────────────────────────────── */ .nav-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--sidebar-text); font-size: 0.84rem; transition: background 0.14s, color 0.14s; cursor: pointer; position: relative; } .nav-item:hover { background: var(--sidebar-hover-bg); color: var(--text); } .nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); font-weight: 600; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } /* ── Kunden-Detail-Panel (Slide-In von rechts) ───────────────────────────── */ .cust-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 390px; background: var(--card); border-left: 1px solid var(--card-border); z-index: 300; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; box-shadow: -24px 0 64px rgba(0,0,0,0.35); } .cust-panel.open { transform: translateX(0); } .cust-backdrop { position: fixed; inset: 0; z-index: 299; background: rgba(0,0,0,0.28); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } .cust-backdrop.open { opacity: 1; pointer-events: auto; } /* Lock-Badge für gesperrte Finance-Felder */ .lock-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 7px; font-size: 0.71rem; font-weight: 600; background: linear-gradient(135deg,rgba(129,140,248,0.08),rgba(139,92,246,0.08)); border: 1px solid rgba(129,140,248,0.22); color: rgba(129,140,248,0.55); cursor: help; user-select: none; } /* Premium-Glow-Hover auf Datenzeilen */ .data-table tbody tr { cursor: pointer; transition: background 0.1s; } .data-table tbody tr:hover td { background: rgba(99,102,241,0.035); } /* Gradient-Text für Page-Header */ .gradient-heading { background: linear-gradient(135deg,#818cf8,#c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Addison-Sync Button (gesperrt) */ .btn-addison-locked { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9px; font-size: 0.82rem; font-weight: 600; border: 1px solid rgba(129,140,248,0.25); background: rgba(129,140,248,0.05); color: rgba(129,140,248,0.5); cursor: pointer; width: 100%; justify-content: center; transition: background 0.15s; } .btn-addison-locked:hover { background: rgba(129,140,248,0.1); } /* ── Collapsible Nav-Gruppen ──────────────────────────────────────────────── */ .nav-group-header { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--sidebar-text); font-size: 0.84rem; transition: background 0.14s, color 0.14s; cursor: pointer; user-select: none; } .nav-group-header:hover { background: var(--sidebar-hover-bg); color: var(--text); } .nav-group-header .nav-chevron { margin-left: auto; flex-shrink: 0; transition: transform 0.2s ease; } .nav-group.collapsed > .nav-group-header .nav-chevron { transform: rotate(-90deg); } .nav-group-children { overflow: hidden; max-height: 600px; /* Weiche Gleit-Animation: kubische Ease-In-Out für natürliches Gefühl */ transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; opacity: 1; } .nav-group.collapsed > .nav-group-children { max-height: 0; opacity: 0; } /* ── Glow-Indicator: dauerhaft pulsierender violetter Punkt ────────────── */ .glow-indicator { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #818cf8; box-shadow: 0 0 6px 2px rgba(129,140,248,0.65), 0 0 12px 3px rgba(129,140,248,0.30); animation: glow_pulse 2.0s ease-in-out infinite; flex-shrink: 0; } @keyframes glow_pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 6px 2px rgba(129,140,248,0.65), 0 0 12px 3px rgba(129,140,248,0.3); } 50% { transform: scale(1.35); box-shadow: 0 0 10px 4px rgba(129,140,248,0.85), 0 0 20px 6px rgba(192,132,252,0.4); } } .nav-indent-1 { padding-left: 20px !important; } .nav-indent-2 { padding-left: 30px !important; } .nav-indent-3 { padding-left: 40px !important; } .nav-indent-4 { padding-left: 50px !important; } .nav-group-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); padding: 8px 10px 3px; } /* ── Data-Table ───────────────────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .data-table thead tr { background: var(--th-bg); } .data-table th { padding: 10px 16px; text-align: left; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); white-space: nowrap; border-bottom: 1px solid var(--card-border); } .data-table th:first-child { padding-left: 20px; } .data-table td { padding: 13px 16px; color: var(--text); vertical-align: middle; } .data-table td:first-child { padding-left: 20px; } .data-table tbody tr { transition: background 0.1s; border-bottom: 1px solid var(--card-border); } .data-table tbody tr:last-child { border-bottom: none; } .data-table tbody tr:hover { background: var(--row-hover); } .data-table tbody tr:hover .row-acts { opacity: 1; transform: translateX(0); } .row-acts { opacity: 0; transform: translateX(4px); transition: opacity 0.14s, transform 0.14s; display: flex; align-items: center; gap: 4px; justify-content: flex-end; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background 0.14s, opacity 0.14s, transform 0.1s; border: none; outline: none; white-space: nowrap; } .btn:active { transform: scale(0.97); } /* Scanner/Tastatur-Navigation: sichtbarer Fokus-Rahmen für alle interaktiven Elemente. :focus-visible greift nur bei Keyboard/Scanner-Navigation, nicht bei Mausklick. Kein outline:none auf :focus — würde Barcode-Scanner-Flow brechen. */ .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: var(--card); color: var(--text-muted); border: 1px solid var(--card-border); } .btn-ghost:hover { color: var(--text); border-color: var(--text-muted); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; background: transparent; border: 1px solid transparent; cursor: pointer; transition: background 0.13s, color 0.13s, border-color 0.13s; color: var(--text-faint); } .btn-icon.edit:hover { background: rgba(56,139,253,0.12); color: #58a6ff; border-color: rgba(56,139,253,0.25); } .btn-icon.del:hover { background: rgba(248,81,73,0.12); color: #f85149; border-color: rgba(248,81,73,0.25); } /* ── Chips / Badges ───────────────────────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; } .chip-blue { background: rgba(56,139,253,0.12); color: #58a6ff; } .chip-green { background: rgba(63,185,80,0.12); color: #3fb950; } .chip-amber { background: rgba(210,153,34,0.15); color: #d29922; } .chip-slate { background: rgba(139,148,158,0.12); color: var(--text-muted); } .chip-violet{ background: rgba(129,140,248,0.12); color: #818cf8; } /* ── Theme-Switcher ───────────────────────────────────────────────────────── */ .theme-btn { padding: 4px 9px; border-radius: 6px; font-size: 0.73rem; cursor: pointer; border: 1px solid transparent; color: var(--text-muted); background: transparent; transition: all 0.14s; white-space: nowrap; } .theme-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .theme-btn:not(.active):hover { color: var(--text); border-color: var(--card-border); } /* ── Supplier-Avatar ──────────────────────────────────────────────────────── */ .sup-avatar { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; color: #fff; } /* ── Input / Search ───────────────────────────────────────────────────────── */ .search-input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px; padding: 6px 10px 6px 32px; font-size: 0.82rem; color: var(--text); outline: none; transition: border-color 0.15s; width: 220px; } .search-input::placeholder { color: var(--text-faint); } .search-input:focus { border-color: var(--accent); } /* ── Toast-Benachrichtigungen ─────────────────────────────────────────────── */ #toast-container { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .toast { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; min-width: 240px; max-width: 360px; font-size: 0.82rem; font-weight: 500; background: var(--card); border: 1px solid var(--card-border); box-shadow: 0 8px 24px var(--shadow); animation: slide_in_r 0.22s ease-out; } .toast-success { border-left: 3px solid #3fb950; } .toast-error { border-left: 3px solid #f85149; } .toast-info { border-left: 3px solid var(--accent); } .toast-warning { border-left: 3px solid #d29922; } /* ── Skeleton-Loader ──────────────────────────────────────────────────────── */ .skel { background: var(--card-border); border-radius: 5px; animation: skeleton 1.4s ease-in-out infinite; } /* ── Progress-Bar ─────────────────────────────────────────────────────────── */ .bar-fill { transition: width 0.9s cubic-bezier(0.4,0,0.2,1); } /* ── Stat-Card ────────────────────────────────────────────────────────────── */ .stat-number { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--text); } .stat-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 5px; } /* ── Misc ─────────────────────────────────────────────────────────────────── */ .section-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); } .animate-fade-in { animation: fade_in 0.2s ease-out; } .animate-fade-up { animation: fade_up 0.3s ease-out; } /* ── Gesperrte Zeile — pulsierende Gold-Kontur ────────────────────────────── */ @keyframes gold_pulse { 0%,100% { box-shadow: inset 0 0 0 0.5px rgba(210,153,34,0.35); } 50% { box-shadow: inset 0 0 0 0.5px rgba(210,153,34,0.85), 0 0 10px rgba(210,153,34,0.12); } } .row-restricted { animation: gold_pulse 2.6s ease-in-out infinite; background: rgba(210,153,34,0.04) !important; } html.theme-modern .row-restricted { background: rgba(210,153,34,0.06) !important; } /* ── Zeilen-Exit-Animation ────────────────────────────────────────────────── */ @keyframes row_exit { 0% { opacity:1; transform:translateX(0); max-height:58px; padding-top:13px; padding-bottom:13px; } 55% { opacity:0; transform:translateX(-52px); max-height:58px; } 100% { opacity:0; transform:translateX(-52px); max-height:0; padding-top:0; padding-bottom:0; border:none; } } .row-exiting { animation: row_exit 0.42s ease-in forwards; pointer-events:none; overflow:hidden; } /* ── Status-Dialog ────────────────────────────────────────────────────────── */ #sdlg-overlay { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; animation:fade_in 0.16s ease-out; } #sdlg-box { width:min(460px,94vw); background:var(--card); border:1px solid var(--card-border); border-radius:20px; padding:26px 28px; box-shadow:0 28px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07); animation:fade_up 0.2s ease-out; } html.theme-modern #sdlg-box { background:rgba(8,5,28,0.45); backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%); border:1px solid rgba(255,255,255,0.08); box-shadow:0 28px 90px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 0.5px rgba(34,211,238,0.2); } .dlg-option { border:1px solid var(--card-border); border-radius:12px; padding:14px 16px; cursor:pointer; transition:border-color 0.15s, background 0.15s, box-shadow 0.15s; display:flex; align-items:center; gap:12px; } .dlg-option:hover { border-color:var(--accent); background:rgba(99,102,241,0.05); } .dlg-option.warn:hover { border-color:#d29922; box-shadow:0 0 14px rgba(210,153,34,0.18); background:rgba(210,153,34,0.05); } .dlg-option.danger:hover{ border-color:#f85149; box-shadow:0 0 14px rgba(248,81,73,0.22); background:rgba(248,81,73,0.05); } /* ── Veto-Toast (409) ─────────────────────────────────────────────────────── */ .toast-veto { border-left:3px solid #d29922; background:rgba(210,153,34,0.07); } /* ── AI Insights: Persistenter Critical-Toast ────────────────────────────── */ /* Bleibt stehen bis manuell geschlossen — für KRITISCH-Insights beim App-Start */ .toast-insight-critical { border-left: 3px solid #f85149; background: rgba(248,81,73,0.06); flex-direction: column; align-items: flex-start; gap: 6px; max-width: 360px; } .toast-insight-high { border-left: 3px solid #d29922; background: rgba(210,153,34,0.06); flex-direction: column; align-items: flex-start; gap: 6px; max-width: 360px; } .toast-insight-critical .ti-header, .toast-insight-high .ti-header { display:flex; align-items:center; gap:8px; width:100%; } .toast-insight-critical .ti-actions, .toast-insight-high .ti-actions { display:flex; gap:6px; margin-top:2px; } .ti-btn { font-size:0.72rem; font-weight:600; padding:3px 9px; border-radius:5px; border:1px solid var(--card-border); background:var(--card); color:var(--text); cursor:pointer; transition:border-color 0.15s,background 0.15s; } .ti-btn:hover { border-color:var(--accent); background:rgba(99,102,241,0.08); } .ti-btn.danger { border-color:#f8514944; color:#f85149; } .ti-btn.danger:hover { border-color:#f85149; background:rgba(248,81,73,0.08); } .ti-btn.action { border-color:#3fb95044; color:#3fb950; } .ti-btn.action:hover { border-color:#3fb950; background:rgba(63,185,80,0.08); } /* ── AI Insights: Glocken-Button in der Topbar ───────────────────────────── */ #insight-bell { position: relative; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; cursor:pointer; background:var(--card); border:1px solid var(--card-border); transition:border-color 0.15s, background 0.15s; flex-shrink:0; } #insight-bell:hover { border-color:var(--accent); background:rgba(99,102,241,0.08); } #insight-bell-badge { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#f85149; color:#fff; font-size:0.62rem; font-weight:800; line-height:16px; text-align:center; display:none; /* via JS sichtbar wenn count > 0 */ box-shadow:0 0 6px rgba(248,81,73,0.5); } @keyframes bell_pulse { 0%,100% { transform:rotate(0deg); } 15% { transform:rotate(-12deg); } 30% { transform:rotate(10deg); } 45% { transform:rotate(-8deg); } 60% { transform:rotate(6deg); } 75% { transform:rotate(-3deg); } } #insight-bell.has-critical svg { animation: bell_pulse 2.4s ease-in-out infinite; } /* ── AI Insights: Seitliches Drawer-Panel ────────────────────────────────── */ #insight-drawer { position:fixed; top:0; right:0; bottom:0; z-index:1500; width:min(400px,96vw); background:var(--card); border-left:1px solid var(--card-border); box-shadow:-16px 0 48px rgba(0,0,0,0.28); display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.28s cubic-bezier(0.4,0,0.2,1); overflow:hidden; } #insight-drawer.open { transform:translateX(0); } #insight-drawer-backdrop { position:fixed; inset:0; z-index:1499; background:rgba(0,0,0,0.38); backdrop-filter:blur(2px); display:none; opacity:0; transition:opacity 0.22s; } #insight-drawer-backdrop.open { display:block; opacity:1; } .insight-card { border:1px solid var(--card-border); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; transition:border-color 0.15s; } .insight-card.critical { border-left:3px solid #f85149; } .insight-card.high { border-left:3px solid #d29922; } .insight-card.medium { border-left:3px solid var(--accent); } .insight-card.low { border-left:3px solid #3fb950; } .insight-card-title { font-size:0.82rem; font-weight:700; color:var(--text); line-height:1.3; } .insight-card-msg { font-size:0.76rem; color:var(--text-muted); line-height:1.45; } .insight-priority-chip { font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; padding:2px 7px; border-radius:4px; flex-shrink:0; } .chip-critical { background:rgba(248,81,73,0.15); color:#f85149; } .chip-high { background:rgba(210,153,34,0.15); color:#d29922; } .chip-medium { background:rgba(59,130,246,0.15); color:var(--accent); } .chip-low { background:rgba(63,185,80,0.15); color:#3fb950; } /* ── Smart-Suggestion-Leiste ────────────────────────────────────────────── */ #smart-suggest-bar { border: 1px solid var(--card-border); border-radius: 12px; background: var(--card); overflow: hidden; } #smart-suggest-bar.ss-loading { opacity: 0.55; pointer-events: none; } .ss-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--card-border); background: var(--th-bg); cursor: pointer; user-select: none; } .ss-header:hover { background: rgba(99,102,241,0.05); } .ss-chip { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; white-space: nowrap; } .ss-chip-overdue { background: rgba(248,81,73,0.14); color: #f85149; } .ss-chip-associated { background: rgba(63,185,80,0.14); color: #3fb950; } .ss-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--card-border); transition: background 0.12s; } .ss-row:last-child { border-bottom: none; } .ss-row:hover { background: rgba(99,102,241,0.04); } .ss-name { font-size: 0.82rem; font-weight: 600; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-meta { font-size: 0.72rem; color: var(--text-faint); flex-shrink: 0; white-space: nowrap; } .ss-add { width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--card-border); background: var(--card); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; line-height: 1; transition: border-color 0.15s, color 0.15s, background 0.15s; } .ss-add:hover { border-color: #3fb950; color: #3fb950; background: rgba(63,185,80,0.08); } .ss-add.added { border-color: #3fb950; color: #3fb950; background: rgba(63,185,80,0.12); pointer-events: none; } .ss-verified-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; white-space: nowrap; background: rgba(63,185,80,0.12); color: #3fb950; } .ss-add:disabled { opacity: 0.35; cursor: not-allowed; border-color: var(--card-border); color: var(--text-faint); } .ss-add:disabled:hover { border-color: var(--card-border); color: var(--text-faint); background: var(--card); } .ss-dismiss { width: 22px; height: 22px; flex-shrink: 0; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--text-faint); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.72rem; line-height: 1; transition: border-color 0.12s, color 0.12s, background 0.12s; } .ss-dismiss:hover { border-color: var(--card-border); color: var(--text-muted); background: var(--th-bg); } .ss-oos-badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; background: rgba(139,148,158,0.2); color: var(--text-faint); white-space: nowrap; } .ss-row.oos { opacity: 0.6; } /* ── Produktions-Check Sektion ───────────────────────────────────────────── */ .ss-shortfall-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--card-border); background: rgba(248,81,73,0.04); } .ss-shortfall-row:last-child { border-bottom: none; } .ss-shortfall-icon { flex-shrink: 0; margin-top: 1px; } .ss-shortfall-info { flex: 1; min-width: 0; } .ss-shortfall-name { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-shortfall-qty { font-size: 0.72rem; color: #f85149; margin-top: 1px; } .ss-shortfall-ctx { font-size: 0.68rem; color: var(--text-faint); margin-top: 1px; } .ss-pairing-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--card-border); background: rgba(210,153,34,0.04); } .ss-pairing-row:last-child { border-bottom: none; } .ss-chip-shortfall { background: rgba(248,81,73,0.15); color: #f85149; } .ss-chip-pairing { background: rgba(210,153,34,0.15); color: #d29922; } .ss-section-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); padding: 6px 14px 4px; } /* ── Pre-Check Inline-Warnung unter Mengenfeld ───────────────────────────── */ .precheck-warn { font-size:0.71rem; color:#d29922; margin-top:3px; display:flex; align-items:flex-start; gap:4px; line-height:1.35; max-width:260px; animation: fade_in 0.18s ease-out; } .precheck-warn svg { flex-shrink:0; margin-top:1px; } /* ── Connection-Dot Glow ──────────────────────────────────────────────────── */ .conn-online { background:#3fb950 !important; box-shadow:0 0 7px rgba(63,185,80,0.6); } .conn-offline { background:#f85149 !important; box-shadow:0 0 7px rgba(248,81,73,0.5); } .conn-waiting { background:#484f58 !important; box-shadow:none; } /* ── Wiki-Hint-Button: Pulsieren wenn Artikel fuer aktuelle Seite vorhanden ── */ @keyframes wiki-hint-pulse { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.25); } } #wiki-hint-btn.wiki-hint-active #wiki-hint-icon { color: var(--accent); animation: wiki-hint-pulse 2.4s ease-in-out infinite; } #wiki-hint-btn:hover { background:var(--card) !important; } #wiki-hint-btn:hover #wiki-hint-icon { color:var(--accent) !important; animation:none !important; } /* ── Inaktive Zeile ───────────────────────────────────────────────────────── */ .row-inactive { opacity:0.4 !important; filter:grayscale(0.3); } .row-inactive:hover { opacity:0.65 !important; } /* ── Skeleton-Loading-Animation ──────────────────────────────────────────── */ .skeleton { background: var(--card-border); animation: _sk 1.4s ease-in-out infinite; } @keyframes _sk { 0%,100%{ opacity:.35 } 50%{ opacity:.75 } } @keyframes _spin { 0%{ transform:rotate(0deg) } 100%{ transform:rotate(360deg) } } @keyframes _pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,0.5) } 60%{ box-shadow:0 0 0 8px rgba(239,68,68,0) } } /* ── Batch-Alarm-Banner (persistentes rotes Banner — verschwindet nicht von alleine) ── */ #batch-alarm-bar { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 10000; background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%); border-bottom: 2px solid #ef4444; color: #fef2f2; padding: 0; animation: _pulse 2s ease-in-out infinite; } #batch-alarm-bar.visible { display: block; } .batch-alarm-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid rgba(239,68,68,0.3); font-size: 0.82rem; } .batch-alarm-item:last-child { border-bottom: none; } .batch-alarm-ack { margin-left: auto; padding: 4px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); color: #fef2f2; font-size: 0.72rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .batch-alarm-ack:hover { background: rgba(255,255,255,0.2); } /* ── chip-red ─────────────────────────────────────────────────────────────── */ .chip-red { background: rgba(248,81,73,0.10); color: #f85149; } /* ── KI-Trend-Teaser: Blur-Overlay für gesperrte Chart-Sektion ────────────── */ .trend-chart-blur { filter: blur(5px) saturate(0.4); user-select: none; pointer-events: none; opacity: 0.55; } /* ── Modul-Restricted Badge (Upgrade-Sektor) ──────────────────────────────── */ .module-restricted { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.67rem; font-weight: 600; letter-spacing: 0.03em; background: rgba(210,153,34,0.08); color: rgba(210,153,34,0.55); border: 1px solid rgba(210,153,34,0.22); } /* ── Upgrade-Sektor (Dashboard-Widget) ────────────────────────────────────── */ .upgrade-sector { border-radius: 14px; background: linear-gradient(135deg,rgba(129,140,248,0.04),rgba(192,132,252,0.04)); border: 1px solid rgba(129,140,248,0.14); padding: 20px 22px; } .upgrade-bar-track { height: 6px; border-radius: 999px; background: rgba(129,140,248,0.12); overflow: hidden; } .upgrade-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#818cf8,#c084fc); transition: width 0.9s cubic-bezier(0.4,0,0.2,1); } /* ── Toggle Switch ────────────────────────────────────────────────────────── */ .toggle-sw { position:relative; display:inline-block; width:30px; height:16px; flex-shrink:0; } .toggle-sw input { opacity:0; width:0; height:0; position:absolute; } .toggle-track { position:absolute; cursor:pointer; inset:0; border-radius:999px; background:var(--card-border); transition:background 0.2s; } .toggle-track::before { content:''; position:absolute; height:10px; width:10px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:transform 0.2s; } .toggle-sw input:checked + .toggle-track { background:var(--accent); } .toggle-sw input:checked + .toggle-track::before { transform:translateX(14px); } /* ── Stammdaten-Fenster (SupplierMasterCard) ──────────────────────────────── */ #smcard-box { background: var(--card); border: 1px solid var(--card-border); border-radius: 20px; box-shadow: 0 28px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07); } html.theme-modern #smcard-box { background: rgba(8,5,28,0.55) !important; backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 28px 90px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 0.5px rgba(34,211,238,0.2) !important; } .smcard-input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px; padding: 8px 10px; font-size: 0.84rem; color: var(--text); outline: none; transition: border-color 0.15s; width: 100%; } .smcard-input:focus { border-color: var(--accent); } .smcard-input:disabled { opacity:0.5; cursor:not-allowed; color:var(--text-faint); } .smcard-input.invalid { border-color:#f85149 !important; box-shadow:0 0 0 3px rgba(248,81,73,0.13); } .smcard-label { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); } .smcard-validation-msg { font-size: 0.67rem; color: #f85149; min-height: 14px; } /* ── Tab-Leiste (SupplierMasterCard) ──────────────────────────────────────── */ .smcard-tab { padding: 7px 14px; border-radius: 8px 8px 0 0; font-size: 0.75rem; font-weight: 600; cursor: pointer; background: transparent; color: var(--text-muted); border: 1px solid transparent; border-bottom: none; transition: background 0.13s, color 0.13s; } .smcard-tab:hover { background: rgba(255,255,255,0.05); color: var(--text); } .smcard-tab.active { background: var(--card); color: var(--text); border-color: var(--card-border); position: relative; bottom: -1px; /* überdeckt die untere Trennlinie */ } html.theme-modern .smcard-tab.active { background: rgba(99,102,241,0.16); border-color: rgba(99,102,241,0.35); color: #a5b4fc; } /* ── Import-Dropzone ─────────────────────────────────────────────────────── */ .import-drop { border: 2px dashed var(--card-border); border-radius: 12px; padding: 32px 20px; text-align: center; cursor: default; transition: border-color 0.15s, background 0.15s; } .import-drop:hover { border-color: var(--accent); background: rgba(56,139,253,0.03); } .import-drop-active { border-color: var(--accent) !important; background: rgba(56,139,253,0.07) !important; } /* ── Mobile Responsive — MasterCard & Layout ──────────────────────────────── */ @media (max-width: 640px) { /* Sidebar ausblenden — auf Mobilgerät nicht nutzbar */ .t-sidebar { display: none !important; } /* Hauptbereich: volle Breite */ #app { flex-direction: column; } /* MasterCard: Vollbild auf Smartphones */ #smcard-box { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; max-width: 100% !important; height: 100dvh !important; border-radius: 0 !important; display: flex; flex-direction: column; } /* Tab-Leiste: horizontal scrollbar, Tabs breiter für Daumen */ #smcard-box [style*="display:flex"][style*="tab"] , .smcard-tab-bar { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .smcard-tab { padding: 10px 18px !important; font-size: 0.82rem !important; white-space: nowrap; flex-shrink: 0; } /* Formular-Felder: größere Touch-Targets */ .smcard-input { padding: 12px 14px !important; font-size: 0.9rem !important; } /* Footer-Buttons: breitere Touch-Fläche */ #smcard-box button[onclick*="saveMasterCard"], #smcard-box button[onclick*="applyRestore"] { min-height: 52px !important; font-size: 0.95rem !important; } /* Modal-Inhaltsbereich: Thumb-Scroll */ #smcard-box > div:last-of-type { flex: 1; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* Import-Modal: vollbildig */ #import-modal-wrap > div { inset: 0 !important; border-radius: 0 !important; max-width: 100% !important; max-height: 100dvh !important; } /* Toolbar: kompakter auf Mobile */ #supplier-toolbar { flex-wrap: wrap; gap: 6px !important; } #supplier-toolbar button { font-size: 0.72rem !important; padding: 5px 10px !important; } } /* ── MDI-Framework: Schwebende, verschiebbare Arbeitsfenster ──────────── */ #mdi-layer { position:fixed;inset:0;pointer-events:none;z-index:500;overflow:hidden } .mdi-window { position:absolute;pointer-events:all; width:420px; background:var(--card); border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,0.38),0 0 0 1px var(--card-border); display:flex;flex-direction:column;overflow:hidden; transition:box-shadow 0.15s; } .mdi-window.mdi-top { box-shadow:0 28px 80px rgba(0,0,0,0.55),0 0 0 1.5px rgba(129,140,248,0.5); } .mdi-titlebar { display:flex;align-items:center;gap:8px;padding:10px 14px; background:rgba(15,10,46,0.55); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border-bottom:1px solid var(--card-border); cursor:move;user-select:none;flex-shrink:0; } html[class*="theme-light"] .mdi-titlebar { background:rgba(248,250,252,0.8) } .mdi-titlebar-icon { font-size:0.9rem } .mdi-titlebar-title { font-size:0.8rem;font-weight:700;color:var(--text);flex:1 } .mdi-btn-close { width:18px;height:18px;border:none;border-radius:50%;cursor:pointer; background:rgba(239,68,68,0.22);color:#ef4444; display:flex;align-items:center;justify-content:center; font-size:0.62rem;transition:background 0.15s;flex-shrink:0; } .mdi-btn-close:hover { background:rgba(239,68,68,0.42) } .mdi-content { flex:1;overflow-y:auto;padding:16px;max-height:72vh } /* ── Teaser-Blur: Gesperrte Feature-Sektionen ──────────────────────────── */ .teaser-section { position:relative;border-radius:10px;overflow:hidden; border:1px solid rgba(129,140,248,0.22); } .teaser-blur-content { filter:blur(5px) saturate(0.3); opacity:0.45;pointer-events:none;user-select:none; padding:12px 14px; } .teaser-overlay { position:absolute;inset:0; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px;padding:14px;text-align:center; backdrop-filter:blur(1.5px); } .teaser-upgrade-btn { padding:7px 18px;border-radius:8px;cursor:pointer; background:linear-gradient(135deg,rgba(129,140,248,0.18),rgba(192,132,252,0.14)); border:1px solid rgba(129,140,248,0.4); color:var(--accent);font-size:0.78rem;font-weight:700; transition:transform 0.15s,box-shadow 0.15s; } .teaser-upgrade-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(129,140,248,0.3); } /* ── VLE/BEA Zuständigkeit ──────────────────────────────────────────────── */ .resp-field { display:flex;align-items:center;gap:8px; padding:7px 11px;border-radius:8px; background:var(--surface);border:1px solid var(--card-border); } .resp-field input { flex:1;background:none;border:none;outline:none; font-size:0.82rem;color:var(--text);min-width:0; } .resp-field input::placeholder { color:var(--text-faint) } .resp-save-btn { width:100%;padding:6px 0;border-radius:7px;border:none;cursor:pointer; background:rgba(129,140,248,0.12);color:var(--accent); font-size:0.73rem;font-weight:600;transition:background 0.15s; } .resp-save-btn:hover { background:rgba(129,140,248,0.24) } /* ── Alert-Dock (Topbar-Indikator) ──────────────────────────────────────── */ #alert-dock { display:none;align-items:center;gap:5px; padding:4px 10px;border-radius:8px;cursor:pointer; background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.35); animation:_pulse 2s infinite;transition:background 0.15s; } #alert-dock.visible { display:flex } #alert-dock:hover { background:rgba(239,68,68,0.25) } #alert-dock-count { font-size:0.72rem;font-weight:800;color:#ef4444; } /* ── Saison-Gap Radar ───────────────────────────────────────────────────── */ .sgap-item { border-radius:9px;padding:10px 12px; background:var(--surface);border:1px solid var(--card-border); } .sgap-item.active { border-color:rgba(248,113,113,0.4);background:rgba(248,113,113,0.05) } .sgap-item.upcoming { border-color:rgba(251,146,60,0.4);background:rgba(251,146,60,0.05) } .sgap-progress-bar { height:5px;border-radius:3px;background:rgba(129,140,248,0.12); margin:6px 0 8px;overflow:hidden; } .sgap-progress-fill { height:100%;border-radius:3px;transition:width 0.6s ease } .sgap-cart-btn { width:100%;padding:5px 0;border-radius:6px;border:none;cursor:pointer; background:rgba(129,140,248,0.1);color:var(--accent); font-size:0.72rem;font-weight:600;transition:background 0.15s; } .sgap-cart-btn:hover { background:rgba(129,140,248,0.22) } /* ── Critical-Priority: blinkendes Blitz-Icon ───────────────────────────── */ @keyframes _blink { 0%,100%{ opacity:1 } 50%{ opacity:0.15 } } .critical-priority-icon { animation:_blink 0.9s infinite;color:#ef4444;font-size:1rem } /* ── Finance-Radar: Mahnstufen-Farben ───────────────────────────────────── */ .dunning-level-1 { color:#f59e0b;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3) } .dunning-level-2 { color:#f97316;background:rgba(249,115,22,0.1);border:1px solid rgba(249,115,22,0.3) } .dunning-level-3 { color:#ef4444;background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.35); animation:_blink 1.8s infinite } /* ── Panel Pop-Out Button ───────────────────────────────────────────────── */ .cpanel-popout-btn { background:rgba(129,140,248,0.08); border:1px solid rgba(129,140,248,0.18); border-radius:7px;padding:3px 8px;cursor:pointer; color:var(--accent);font-size:0.68rem; display:flex;align-items:center;gap:4px; transition:background 0.15s;flex-shrink:0; } .cpanel-popout-btn:hover { background:rgba(129,140,248,0.2) } /* ══ Phase 16.1 – KI-Antwort-Styling & Micro-Interactions ══════════════════ ai-answer-row : Flex-Zeile (Avatar + Bubble) ai-avatar-dot : Glühender Indigo-Kreis als KI-Identifikation ai-answer-bubble: Glassmorphismus-Blase mit Einmal-Glow beim Erscheinen .ai-cmd : Action-Chips mit Hover-Lift + Box-Shadow-Glow ══════════════════════════════════════════════════════════════════════════ */ /* ── Antwort-Layout ─────────────────────────────────────────────────────── */ .ai-answer-row { display: flex; align-items: flex-start; gap: 9px; } /* ── Avatar: glühender Indigo-Punkt (KI-Identifikation) ─────────────────── */ .ai-avatar-dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #a5b4fc, #4f46e5); box-shadow: 0 0 8px 1px rgba(99,102,241,.65); animation: _ai-avatar-pulse 2.6s ease-in-out infinite; margin-top: 3px; } @keyframes _ai-avatar-pulse { 0%,100% { box-shadow: 0 0 5px 1px rgba(99,102,241,.45); } 50% { box-shadow: 0 0 13px 4px rgba(99,102,241,.80); } } /* ── Glassmorphismus-Blase ───────────────────────────────────────────────── */ .ai-answer-bubble { flex: 1; background: rgba(99,102,241,.06); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(99,102,241,.22); border-radius: 10px; padding: 9px 13px; white-space: pre-wrap; word-break: break-word; /* Einmal-Glow beim Erscheinen — läuft genau einmal, endet bei box-shadow:none */ animation: _ai-bubble-glow 1.8s ease-out forwards; } @keyframes _ai-bubble-glow { 0% { box-shadow: 0 0 0 0 rgba(99,102,241,.65); } 30% { box-shadow: 0 0 14px 4px rgba(99,102,241,.32); } 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.00); } } /* ── Action-Chips (.ai-cmd) ─────────────────────────────────────────────── */ /* Ersetzt die Inline-Styles aus ai-core-v579.js — Hover via :hover-Pseudo */ .ai-cmd { display: inline-block; color: var(--accent2, #6366f1); font-weight: 600; font-size: 0.76rem; text-decoration: none; background: rgba(99,102,241,.09); border: 1px solid rgba(99,102,241,.32); padding: 3px 10px; border-radius: 20px; cursor: pointer; margin: 2px 4px 2px 0; vertical-align: middle; transition: background .15s, border-color .15s, transform .12s, box-shadow .15s; box-shadow: 0 1px 3px rgba(99,102,241,.08); } .ai-cmd:hover { background: rgba(99,102,241,.20); border-color: rgba(99,102,241,.55); transform: translateY(-1px); box-shadow: 0 3px 9px rgba(99,102,241,.25); } .ai-cmd:active { transform: scale(.94); } /* ── Split-View Layout (Phase 19.1) ─────────────────────────────────────────── */ /* Aktiviert wenn #content die Klasse .split-view-active trägt. */ /* Linkes Panel: aktives Modul. Rechtes Panel: Begleit-Modul (iframe). */ #content.split-view-active { display: flex !important; flex-direction: row; overflow: hidden; padding: 0; gap: 0; align-items: stretch; } .split-primary-panel { flex: 0 0 50%; overflow-y: auto; padding: 24px; border-right: 1px solid var(--card-border); min-width: 0; } .split-secondary-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; animation: _ai-split-slide-in 0.32s cubic-bezier(.22,.68,0,1.2) forwards; } @keyframes _ai-split-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .split-secondary-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--sidebar); border-bottom: 1px solid var(--card-border); font-size: 0.8rem; font-weight: 600; color: var(--text-faint); flex-shrink: 0; letter-spacing: 0.02em; } .split-secondary-iframe { flex: 1; border: none; background: var(--bg); display: block; width: 100%; } .split-close-btn { background: none; border: 1px solid transparent; cursor: pointer; color: var(--text-faint); font-size: 1rem; padding: 2px 7px; border-radius: 4px; line-height: 1.4; transition: color .12s, background .12s, border-color .12s; } .split-close-btn:hover { color: var(--text); background: rgba(99,102,241,.10); border-color: rgba(99,102,241,.30); } /* ── AI Suggestion-Bar (Phase 20.1) ────────────────────────────────────────── */ .ai-suggestion-bar { display: none; flex-wrap: wrap; gap: 5px; padding: 7px 10px; margin-top: 6px; background: rgba(99,102,241,.04); border: 1px solid rgba(99,102,241,.15); border-radius: 8px; opacity: 0; transition: opacity 0.25s ease-out; } .ai-suggestion-bar.visible { opacity: 1; } .ai-suggestion-label { font-size: 0.72rem; color: var(--text-faint); width: 100%; margin-bottom: 3px; } /* ── AI Voice Interface (Phase 24.1) ────────────────────────────────────────── */ /* TTS-Toggle- und Mikrofon-Buttons: konsistentes Styling mit .split-close-btn. */ .ai-tts-btn, .ai-mic-btn { background: none; border: 1px solid transparent; cursor: pointer; color: var(--text-faint); padding: 2px 5px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color .12s, background .12s, border-color .12s; } .ai-tts-btn:hover, .ai-mic-btn:hover { color: var(--text); background: rgba(99,102,241,.10); border-color: rgba(99,102,241,.30); } /* TTS aktiv: Indigo-Tönung */ .ai-tts-btn.active { color: #4f46e5; background: rgba(99,102,241,.10); border-color: rgba(99,102,241,.35); } /* Aufnahme aktiv: rotes Glühen + Puls-Animation */ .ai-mic-btn.ai-mic-active { color: #ef4444 !important; border-color: rgba(239,68,68,.45) !important; background: rgba(239,68,68,.08) !important; animation: _ai-mic-pulse 0.9s ease-in-out infinite; } @keyframes _ai-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 50% { box-shadow: 0 0 7px 3px rgba(239,68,68,.28); } } /* ── AI Preload-Indikator (Phase 23.1) ──────────────────────────────────────── */ /* Pulsierender Punkt am unteren Rand des KI-Panels während ein Hintergrund- */ /* Preload läuft. display:none im Ruhezustand — kein Layout-Impact. */ .ai-preload-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(99,102,241,.65); position: absolute; bottom: 8px; right: 10px; pointer-events: none; animation: _ai-preload-pulse 1.4s ease-in-out infinite; } .ai-preload-dot.active { display: block; } @keyframes _ai-preload-pulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } } /* ── AI Fix-Preview Indicator (Phase 22.1) ─────────────────────────────────── */ /* Linker Indikator-Balken: zeigt dem Nutzer welches Feld ein Korrektur-Vorschlag betrifft, bevor er den FIX-Chip klickt. Automatisch entfernt nach Ausführung oder wenn die Suggestion-Bar ausgeblendet wird. */ .ai-fix-preview { border-color: rgba(99,102,241,.55) !important; box-shadow: 0 0 0 2px rgba(99,102,241,.12), inset 3px 0 0 rgba(99,102,241,.65) !important; transition: border-color .2s ease, box-shadow .2s ease; } /* ── AI Batch-Progress (Phase 25.1) ─────────────────────────────────────────── */ /* 3px-Balken am oberen Rand des KI-Panels — erscheint nur während ein Batch */ /* läuft. display:none im Ruhezustand — kein Layout-Impact. */ .ai-batch-progress-track { display: none; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(99,102,241,.12); overflow: hidden; z-index: 3; border-radius: 14px 14px 0 0; } .ai-batch-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%); border-radius: 0 2px 2px 0; transition: width 240ms ease-out; } /* ══ Phase 29.1 – Local Reinforcement Learning – Feedback-Bar ══════════════════ ai-feedback-bar : Thumbs-Up/Down Leiste am Ende jeder KI-Antwort ai-fb-btn : Icon-Button — semi-transparent, Hover wird opak ai-fb-voted-up/down : Aktiver Zustand (grün / rot) nach Abstimmung ai-correction-wrap : Freitext-Eingabe nach Thumbs-Down (zunächst ausgeblendet) ai-correction-save : Bestätigen-Button (Häkchen-Icon) Datenschutz: Alle Daten bleiben ausschließlich im localStorage des Browsers. ══════════════════════════════════════════════════════════════════════════════ */ .ai-feedback-bar { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(99,102,241,.10); } .ai-fb-btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; border: none; background: transparent; border-radius: 6px; cursor: pointer; color: var(--text-faint, #94a3b8); opacity: 0.30; line-height: 0; transition: opacity .15s, background .15s, color .15s; } .ai-fb-btn:hover { opacity: 1; background: rgba(99,102,241,.10); } .ai-fb-btn.ai-fb-voted-up { opacity: 1; color: #22c55e; background: rgba(34,197,94,.10); } .ai-fb-btn.ai-fb-voted-down { opacity: 1; color: #ef4444; background: rgba(239,68,68,.10); } .ai-correction-wrap { display: none; align-items: center; gap: 5px; margin-top: 5px; } .ai-correction-input { flex: 1; font-size: 0.75rem; padding: 4px 8px; border: 1px solid rgba(99,102,241,.28); border-radius: 6px; background: var(--card-bg, #fff); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; } .ai-correction-input:focus { border-color: rgba(99,102,241,.60); box-shadow: 0 0 0 2px rgba(99,102,241,.10); } .ai-correction-save { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; background: rgba(99,102,241,.10); border: 1px solid rgba(99,102,241,.28); border-radius: 6px; cursor: pointer; color: var(--accent2, #6366f1); line-height: 0; transition: background .15s, border-color .15s; } .ai-correction-save:hover { background: rgba(99,102,241,.22); border-color: rgba(99,102,241,.50); } /* ══ Phase 30.1 – Generative Component Rendering ══════════════════════════════ ai-generated-card : Umrandeter Daten-Container unterhalb der Chat-Bubble ai-gc-header : Karten-Titel + simuliert-Badge ai-gc-table : Kompakte Daten-Tabelle (table-Komponente) ai-gc-bars : Balken-Chart-Container (bar-chart-Komponente) Rendering via document.createElement-Loops — keine Template-Engine. ══════════════════════════════════════════════════════════════════════════════ */ .ai-generated-card { background: var(--card-bg, #fff); border: 1px solid rgba(99,102,241,.18); border-radius: 10px; margin-top: 8px; overflow: hidden; animation: _ai-bubble-glow 1.8s ease-out forwards; } .ai-gc-header { display: flex; align-items: center; gap: 7px; padding: 8px 13px 6px; font-size: 0.74rem; font-weight: 700; color: var(--accent2, #6366f1); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid rgba(99,102,241,.10); } .ai-gc-badge { font-size: 0.63rem; font-weight: 600; letter-spacing: 0; text-transform: none; background: rgba(99,102,241,.10); color: var(--accent2, #6366f1); padding: 1px 7px; border-radius: 10px; opacity: .75; } /* ── Tabellen-Komponente ─────────────────────────────────────────────────── */ .ai-gc-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; } .ai-gc-table thead th { text-align: left; padding: 5px 13px; font-size: 0.70rem; font-weight: 700; color: var(--text-faint, #64748b); border-bottom: 1px solid rgba(99,102,241,.08); white-space: nowrap; } .ai-gc-table tbody tr { transition: background .11s; } .ai-gc-table tbody tr[data-sku] { cursor: pointer; } .ai-gc-table tbody tr[data-sku]:hover { background: rgba(99,102,241,.06); } .ai-gc-table tbody td { padding: 6px 13px; border-bottom: 1px solid rgba(0,0,0,.035); color: var(--text); } .ai-gc-table tbody tr:last-child td { border-bottom: none; } .ai-gc-table .ai-gc-sku { font-family: monospace; font-size: 0.73rem; color: var(--accent2, #6366f1); } /* Klick-Indikator auf SKU-Zellen: kleiner Pfeil-Hint */ .ai-gc-table tbody tr[data-sku]:hover .ai-gc-sku::after { content: ' \2192'; opacity: .55; font-family: sans-serif; } /* ── Balken-Chart-Komponente ─────────────────────────────────────────────── */ .ai-gc-bars { padding: 10px 13px 12px; display: flex; flex-direction: column; gap: 7px; } .ai-gc-bar-item { display: flex; align-items: center; gap: 7px; } .ai-gc-bar-label { font-size: 0.72rem; color: var(--text-faint, #64748b); min-width: 30px; text-align: right; flex-shrink: 0; } .ai-gc-bar-track { flex: 1; height: 15px; background: rgba(99,102,241,.08); border-radius: 4px; overflow: hidden; } .ai-gc-bar-fill { height: 100%; width: 0%; /* Startwert für Einlauf-Animation */ border-radius: 4px; background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%); transition: width .55s cubic-bezier(.22,.61,.36,1); } .ai-gc-bar-val { font-size: 0.72rem; font-weight: 600; color: var(--text); min-width: 60px; text-align: right; flex-shrink: 0; white-space: nowrap; } /* ══ Phase 31.1 – Guided Onboarding Tour ══════════════════════════════════════ .ai-highlight : Goldener pulsierender Rahmen auf dem Spotlight-Element #ai-tour-overlay : Dunkles Backdrop-Overlay (pointer-events:none) .ai-tour-bar : Fortschrittsleiste im KI-Panel (Schritt-Label + Dots + Stop) .ai-tour-stop-btn : Sichtbarer Abbruch-Button während der Tour ══════════════════════════════════════════════════════════════════════════════ */ /* ── Spotlight-Hervorhebung ──────────────────────────────────────────────── */ .ai-highlight { position: relative !important; z-index: 9600 !important; border-radius: 6px; animation: _ai-tour-pulse 1.4s ease-in-out infinite; } @keyframes _ai-tour-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(234,179,8,.55), 0 0 18px rgba(234,179,8,.22); } 50% { box-shadow: 0 0 0 5px rgba(234,179,8,.90), 0 0 30px rgba(234,179,8,.40); } } /* ── Abdunkelungs-Overlay ────────────────────────────────────────────────── */ .ai-tour-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 9500; pointer-events: none; /* Interaktion mit hervorgehobenem Element bleibt möglich */ opacity: 0; transition: opacity .24s ease; } .ai-tour-overlay.ai-tour-overlay-active { opacity: 1; } /* ── Tour-Info-Leiste im KI-Panel ────────────────────────────────────────── */ .ai-tour-bar { display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: rgba(234,179,8,.08); border-bottom: 1px solid rgba(234,179,8,.25); flex-shrink: 0; animation: none; /* kein Einlauf — soll sofort sichtbar sein */ } .ai-tb-label { flex: 1; font-size: 0.73rem; font-weight: 600; color: #b45309; /* Amber-700 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-tb-dots { font-size: 0.65rem; letter-spacing: 2px; color: #d97706; /* Amber-600 */ flex-shrink: 0; } .ai-tour-stop-btn { flex-shrink: 0; padding: 3px 9px; font-size: 0.70rem; font-weight: 700; border: 1px solid rgba(239,68,68,.45); border-radius: 6px; background: rgba(239,68,68,.08); color: #dc2626; cursor: pointer; transition: background .13s, border-color .13s; line-height: 1.4; } .ai-tour-stop-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.70); } /* ── Contextual Action Button (Phase 35.1) ─────────────────────────────────── */ /* Ausführbare Aktion — Indigo-Hintergrund, weiße Schrift, voller Klick-Scope. */ /* Erbt .ai-cmd Basisgeometrie (font, border-radius, padding) — überschreibt */ /* nur Farbe + Hintergrund. Im "done"-Zustand (success-Klasse) wechselt es zu */ /* einem Grün-Ton um die Erledigung zu signalisieren (keine Nachricht nötig). */ .ai-action-btn { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: #fff !important; border-color: transparent !important; font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 1px 4px rgba(99,102,241,.35); transition: background .18s, box-shadow .18s, opacity .18s, transform .12s; } .ai-action-btn:hover { background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%); box-shadow: 0 2px 8px rgba(99,102,241,.50); color: #fff !important; } .ai-action-btn:active { transform: scale(0.94); } /* Lade-Zustand: dezentes Pulsieren während POST läuft */ .ai-action-btn.ai-action-loading { opacity: 0.65; pointer-events: none; animation: _ai-action-pending 0.9s ease-in-out infinite alternate; } @keyframes _ai-action-pending { 0% { opacity: 0.65; } 100% { opacity: 0.40; } } /* Erfolgs-Zustand: Grün nach Ausführung */ .ai-action-btn.ai-action-done { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important; box-shadow: 0 1px 4px rgba(34,197,94,.35); pointer-events: none; } /* Fehler-Zustand: Rot nach gescheiterter Ausführung */ .ai-action-btn.ai-action-error { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; box-shadow: 0 1px 4px rgba(239,68,68,.35); } /* ── Agent Visual Cue: Icon-Puls bei erkanntem Intent (Phase 34.1) ─────────── */ /* Leichtes scale(1.05) — 2 Iterationen ~ 0.9 s — signalisiert passendem */ /* Experten-Agenten ohne den Header zu überwältigen. */ @keyframes _ai-agent-cue { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .ai-agent-cue { animation: _ai-agent-cue 0.45s ease-in-out 2; transform-origin: center; } /* ── AI v9.0.0 Celebration-Effekt (Phase 32.1) ─────────────────────────────── */ /* Einmaliges dezentes Indigo-Border-Aufleuchten beim ersten Laden von v9.0.0. */ /* Kein Overlay, kein Sound — rein visuell, 3 × pulsierend, dann automatisch */ /* entfernt (JS entfernt .ai-celebration-active nach 3200 ms). */ @keyframes _ai-celebration-pulse { 0% { box-shadow: none; } 12% { box-shadow: 0 0 0 3px rgba(99,102,241,.85), 0 0 22px rgba(99,102,241,.38); } 28% { box-shadow: 0 0 0 1px rgba(99,102,241,.15); } 50% { box-shadow: 0 0 0 3px rgba(99,102,241,.70), 0 0 18px rgba(99,102,241,.28); } 66% { box-shadow: 0 0 0 1px rgba(99,102,241,.10); } 86% { box-shadow: 0 0 0 2px rgba(99,102,241,.48), 0 0 12px rgba(99,102,241,.18); } 100% { box-shadow: none; } } .ai-celebration-active { animation: _ai-celebration-pulse 3.2s ease-in-out forwards !important; } /* ── AI FETCH-Ladeindikator (Phase 28.1) ────────────────────────────────────── */ /* Pulsierender Ellipsis innerhalb des FETCH-Chip-Texts während Daten geladen */ /* werden. display:inline — kein Layout-Shift gegenüber dem umgebenden Chip. */ .ai-fetch-dots { display: inline-block; animation: _ai-fetch-pulse 1.1s ease-in-out infinite; } @keyframes _ai-fetch-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } /* ── Phase 37.1 – Multimodal Image Support ──────────────────────────────────── */ /* Bild-Vorschau-Streifen (wird dynamisch über der Textarea eingeblendet). */ /* Drag-and-Drop-Indikator am KI-Panel. */ #ai-pending-image-strip { display: none; align-items: center; gap: 8px; padding: 6px 0 8px 0; } #ai-pending-image-strip.visible { display: flex; } .ai-chat-thumb { max-width: 100px; max-height: 72px; border-radius: 6px; object-fit: cover; border: 1px solid var(--card-border); flex-shrink: 0; } .ai-pending-remove-btn { background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 2px 5px; border-radius: 4px; font-size: 0.8rem; line-height: 1; flex-shrink: 0; transition: color .15s; } .ai-pending-remove-btn:hover { color: #ef4444; } /* Drag-over-Indikator: Indigo-gestrichelter Rahmen am gesamten KI-Panel */ .ai-dropzone-active { outline: 2px dashed #6366f1 !important; outline-offset: -3px; } /* ── Phase 39.1 – Autonomous Task Queue ─────────────────────────────────────── */ /* Stop-Button: roter Hover-Zustand signalisiert Abbruch-Aktion. */ /* Fortschrittsbalken selbst ist via Inline-Styles gesteuert (display:flex/none). */ .ai-progress-stop-btn:hover { color: #ef4444 !important; border-color: rgba(239, 68, 68, .45) !important; } /* ── Phase 41.1 – Cross-Tab Event Synchronization ───────────────────────────── */ /* #ai-sync-notice: schwebender Chip zwischen Chat und Eingabefeld. */ /* \u21c4 (⇄) signalisiert: Informationen aus anderem Tab. */ /* display:none → display:flex via .visible, Fade-out via JS opacity-Transition. */ .ai-sync-notice { display: none; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; margin-bottom: 6px; font-size: 0.71rem; color: var(--text-faint); background: rgba(99, 102, 241, .06); border: 1px solid rgba(99, 102, 241, .20); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-sync-notice.visible { display: flex; } /* ── Phase 40.1 – Persistent Neural Memory ──────────────────────────────────── */ /* Gehirn-Badge am Avatar wenn Antwort Memory-Kontext nutzt. */ /* Zero-Emoji-Policy: '\1F9E0' ist CSS-Escape für U+1F9E0 (Gehirn-Emoji). */ .ai-avatar-dot--memory { position: relative; } .ai-avatar-dot--memory::after { content: '\1F9E0'; position: absolute; font-size: 8px; bottom: -4px; right: -4px; line-height: 1; filter: drop-shadow(0 0 3px rgba(99,102,241,.9)); } /* ── Phase 42.1 – Predictive Action Chaining ─────────────────────────────── */ /* .ai-suggest-row: dezente Trennlinie + Flex-Wrap-Chip-Leiste am unteren */ /* Rand der Antwort-Bubble. Erscheint nach Abschluss der Tipp-Animation. */ /* .ai-suggest-chip: kleinere Variante von .ai-cmd — indigo-tinted, oval. */ /* \u21aa (Pfeil-Hook) im Label signalisiert "Nächster Schritt". */ .ai-suggest-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(99, 102, 241, .12); } .ai-suggest-chip { font-size: 0.71rem; padding: 3px 10px; border-radius: 10px; border: 1px solid rgba(99, 102, 241, .28); color: var(--text-faint); background: rgba(99, 102, 241, .04); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, transform .1s; cursor: pointer; user-select: none; } .ai-suggest-chip:hover { background: rgba(99, 102, 241, .12); color: #6366f1; border-color: rgba(99, 102, 241, .50); text-decoration: none; } .ai-suggest-chip:active { background: rgba(99, 102, 241, .22); transform: scale(0.94); } /* ── Phase 44.1 – Intelligent Error Recovery ─────────────────────────────── */ /* .ai-error-bubble: Amber-Randlinie + leichter Rot-Farbton im Bubble. */ /* .ai-avatar-dot--error: Amber-Farbton statt Indigo auf dem Avatar-Punkt. */ /* .ai-error-header: Warndreieck (\u26a0) + Titel in einer Flex-Zeile. */ .ai-error-bubble { border-color: rgba(245, 158, 11, .40) !important; background: rgba(245, 158, 11, .04); } .ai-avatar-dot--error { background: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); } .ai-error-header { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .ai-error-icon { font-size: 0.92rem; color: #f59e0b; flex-shrink: 0; line-height: 1; } .ai-error-title { font-weight: 700; font-size: 0.82rem; color: #f59e0b; } .ai-error-detail { font-size: 0.77rem; color: var(--text-faint); line-height: 1.52; margin: 0 0 2px 0; } /* Recovery-Chips in der Fehler-Bubble: Amber statt Indigo */ .ai-error-chips .ai-suggest-chip { border-color: rgba(245, 158, 11, .35); color: #f59e0b; background: rgba(245, 158, 11, .05); } .ai-error-chips .ai-suggest-chip:hover { background: rgba(245, 158, 11, .13); color: #d97706; border-color: rgba(245, 158, 11, .55); } /* ── Phase 45.1 – Telemetry Copy Button ─────────────────────────────────── */ .ai-report-copy-btn { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(245, 158, 11, .35); background: transparent; color: #f59e0b; font-size: 0.74rem; font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; user-select: none; } .ai-report-copy-btn:hover { background: rgba(245, 158, 11, .10); color: #d97706; border-color: rgba(245, 158, 11, .55); } .ai-report-copy-btn:disabled { opacity: .65; cursor: default; } /* ── Phase 45.1 – Release Note Bubble ───────────────────────────────────── */ /* Indigo-Tint als visueller Indikator — kein Emoji, kein Raw-Symbol. */ .ai-release-bubble { border-color: rgba(99, 102, 241, .30) !important; background: rgba(99, 102, 241, .04); } .ai-release-header { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: #6366f1; } .ai-release-icon { flex-shrink: 0; stroke: #6366f1; } .ai-release-title { font-weight: 700; font-size: 0.82rem; color: #6366f1; } .ai-release-detail { font-size: 0.77rem; color: var(--text-faint); line-height: 1.52; margin: 0; } /* ===== SECTION: KI-WAECHTER ANIMATIONEN ===== Migriert aus index.html