/* ========================================================================== SEDNA — Design-System Named nach dem fernen, eisigen Zwergplaneten -> kühle, kristalline Farbwelt statt der üblichen "SaaS-Karten"-Optik. Drei Themes (dark / gray / light) über [data-theme] auf . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap'); :root, html[data-theme="dark"]{ --bg: #0a0e15; --bg-elevated: #121826; --bg-sidebar: #0d1220; --bg-input: #171f30; --border: #232c3f; --border-soft: #1a2233; --text: #e9edf6; --text-dim: #8892a6; --text-faint: #5b6478; --accent: #62d6e8; --accent-2: #9fb3f2; --accent-text: #04161a; --danger: #ef7b7b; --ok: #6fd6a0; --shadow: 0 10px 40px rgba(0,0,0,0.45); --bubble-user: linear-gradient(135deg, #62d6e8, #7fa8f0); --bubble-user-text: #04161a; --bubble-ai: var(--bg-elevated); } html[data-theme="gray"]{ --bg: #1b1d22; --bg-elevated: #24272e; --bg-sidebar: #17191e; --bg-input: #2a2d35; --border: #34373f; --border-soft: #2a2d34; --text: #eceef2; --text-dim: #9497a1; --text-faint: #666a75; --accent: #62d6e8; --accent-2: #a6b6e0; --accent-text: #04161a; --danger: #ef7b7b; --ok: #6fd6a0; --shadow: 0 10px 40px rgba(0,0,0,0.35); --bubble-user: linear-gradient(135deg, #62d6e8, #7fa8f0); --bubble-user-text: #04161a; --bubble-ai: var(--bg-elevated); } html[data-theme="light"]{ --bg: #f3f5f8; --bg-elevated: #ffffff; --bg-sidebar: #eceef3; --bg-input: #ffffff; --border: #dde1e8; --border-soft: #e6e9ee; --text: #171b24; --text-dim: #5c6274; --text-faint: #8890a0; --accent: #0b93a8; --accent-2: #4a63c9; --accent-text: #ffffff; --danger: #c8433f; --ok: #16875a; --shadow: 0 10px 30px rgba(30,40,60,0.10); --bubble-user: linear-gradient(135deg, #0b93a8, #4a63c9); --bubble-user-text: #ffffff; --bubble-ai: var(--bg-elevated); } *{ box-sizing:border-box; } html,body{ height:100%; overscroll-behavior:none; } body{ margin:0; background:var(--bg); color:var(--text); font-family:'Inter', system-ui, sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,.brand,.btn-primary,.msg-title{ font-family:'Space Grotesk','Inter',sans-serif; } a{ color:var(--accent); text-decoration:none; } button{ font-family:inherit; } ::selection{ background:var(--accent); color:var(--accent-text); } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* ---------------------------------- Buttons ---------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:10px; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text); font-size:14.5px; font-weight:500; cursor:pointer; transition:border-color .15s ease, transform .1s ease; } .btn:hover{ border-color:var(--text-faint); } .btn:active{ transform:scale(0.98); } .btn-primary{ background:var(--bubble-user); color:var(--bubble-user-text); border:none; font-weight:600; } .btn-primary:hover{ filter:brightness(1.06); } .btn-primary:disabled{ opacity:.5; cursor:not-allowed; filter:none; } .btn-ghost{ background:transparent; border-color:transparent; color:var(--text-dim); } .btn-ghost:hover{ color:var(--text); background:var(--bg-elevated); } .btn-block{ width:100%; } .btn-danger{ color:var(--danger); } /* ---------------------------------- Forms ---------------------------------- */ .field{ margin-bottom:14px; } .field label{ display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:5px; } .field input, .field select, .field textarea{ width:100%; padding:10px 13px; border-radius:9px; border:1px solid var(--border); background:var(--bg-input); color:var(--text); font-size:14px; transition:border-color .15s ease; } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); outline:none; } .field input:disabled{ opacity:.55; cursor:not-allowed; } .field .hint{ font-size:12.5px; color:var(--text-faint); margin-top:6px; } .field .error{ font-size:12.5px; color:var(--danger); margin-top:6px; } .code-input{ letter-spacing:10px; font-size:22px; text-align:center; font-weight:600; } .pw-strength{ margin-top:7px; } .pw-strength-bar{ height:4px; border-radius:3px; background:var(--border-soft); overflow:hidden; } .pw-strength-bar span{ display:block; height:100%; width:0%; border-radius:3px; transition:width .2s ease, background-color .2s ease; } .pw-strength-label{ font-size:11.5px; color:var(--text-faint); margin-top:5px; } .pw-checklist{ list-style:none; padding:0; margin:9px 0 0; font-size:12px; color:var(--text-faint); display:grid; grid-template-columns:1fr 1fr; gap:5px 12px; } .pw-checklist li::before{ content:'○ '; } .pw-checklist li.ok, .pw-checklist li.pass{ color:var(--ok); } .pw-checklist li.ok::before, .pw-checklist li.pass::before{ content:'● '; } /* ---------------------------------- Auth-Seiten ---------------------------------- */ .auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background: radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent), radial-gradient(50% 45% at 90% 90%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent), var(--bg); } .auth-card{ width:100%; max-width:400px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; padding:36px 32px; box-shadow:var(--shadow); } .auth-logo{ width:46px; height:46px; margin-bottom:18px; } .auth-card h1{ font-size:22px; margin:0 0 4px; } .auth-card .sub{ color:var(--text-dim); font-size:14px; margin:0 0 26px; } .auth-divider{ display:flex; align-items:center; gap:12px; color:var(--text-faint); font-size:12.5px; margin:20px 0; } .auth-divider::before,.auth-divider::after{ content:''; flex:1; height:1px; background:var(--border); } .auth-foot{ text-align:center; margin-top:22px; font-size:13.5px; color:var(--text-dim); } .google-btn svg{ width:18px; height:18px; } .flash-msg{ padding:11px 14px; border-radius:10px; font-size:13.5px; margin-bottom:18px; } .flash-msg.error{ background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); border:1px solid transparent; } .flash-msg.ok{ background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok); border:1px solid transparent; } /* ---- Seiten-Übergang Login <-> Registrieren ---- Login/Signup/start sind getrennte PHP-Seiten - die native View-Transitions-API (aktiviert per im jeder Seite) sorgt trotzdem für einen weichen Wechsel zwischen ihnen statt eines harten Sprungs. .auth-card bekommt denselben view-transition-name auf Login und Registrieren, wodurch die Karte selbst sanft "morpht" statt nur die ganze Seite zu croßfaden. Browser ohne Unterstützung (Firefox, ältere Safari) ignorieren das einfach und navigieren stinknormal - reines Progressive Enhancement, nichts kann kaputtgehen. */ .auth-card{ view-transition-name: auth-card; } ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.22s; animation-timing-function:ease; } ::view-transition-old(auth-card), ::view-transition-new(auth-card){ animation-duration:.28s; animation-timing-function:cubic-bezier(.4,0,.2,1); } @media (prefers-reduced-motion: reduce){ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; } } /* ---------------------------------- App-Layout ---------------------------------- */ .app{ display:flex; height:100vh; height:100dvh; overflow:hidden; overscroll-behavior:none; } .sidebar{ width:272px; min-width:272px; background:var(--bg-sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; transition:margin-left .2s ease, width .2s ease, min-width .2s ease; } .sidebar.collapsed{ width:0; min-width:0; margin-left:-1px; border-right:none; overflow:hidden; } /* Dimmt/schliesst die Seitenleiste auf dem Handy, wo sie als Overlay ueber dem Chat liegt statt eine feste Spalte zu sein (siehe Mobile-Sektion unten und app.js). Am Desktop bleibt sie unsichtbar+unklickbar, kostet aber keinen Platz, da position:fixed sie aus dem Layoutfluss nimmt. */ .sidebar-backdrop{ position:fixed; inset:0; background:rgba(4,7,12,0.35); z-index:29; opacity:0; pointer-events:none; transition:opacity .2s ease; touch-action:none; } .sidebar-backdrop.open{ opacity:1; pointer-events:auto; } .sidebar-top{ padding:16px; display:flex; align-items:center; gap:10px; } .brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:16.5px; letter-spacing:.2px; } .brand img{ width:22px; height:22px; } /* Das Logo ist als weißes Kristall-Motiv gezeichnet - im hellen Theme würde es auf dem hellen Hintergrund verschwinden. invert() dreht die Helligkeit um (weiß -> dunkel), ohne die eigentliche Bilddatei duplizieren zu müssen. */ html[data-theme="light"] .brand img, html[data-theme="light"] .auth-logo{ filter: invert(1); } .new-chat-btn{ margin:4px 16px 12px; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text); font-size:14px; font-weight:500; display:flex; align-items:center; gap:8px; cursor:pointer; } .new-chat-btn:hover{ border-color:var(--accent); } /* min-height:0 ist hier der Trick: ohne das nimmt ein Flex-Kind (.conv-list) standardmaessig min-height:auto an und wird bei vielen Chats vom Inhalt aufgeblaeht statt bei fester Sidebar-Hoehe zu scrollen - dadurch wirkt die Liste "gequetscht" statt einen Scrollbalken zu zeigen. */ .conv-list{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:4px 10px; display:flex; flex-direction:column; gap:2px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--border) transparent; } .conv-list::-webkit-scrollbar{ width:6px; } .conv-list::-webkit-scrollbar-track{ background:transparent; } .conv-list::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; } .conv-list::-webkit-scrollbar-thumb:hover{ background:var(--text-faint); } .conv-item{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:9px 10px; border-radius:9px; color:var(--text-dim); font-size:13.8px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; /* Ohne das zeigt iOS Safari bei laengerem Drücken sein natives "Kopieren/Auswaehlen"-Callout - das killt unseren eigenen Long-Press (siehe app.js), bevor der Timer durchlaeuft. */ -webkit-touch-callout:none; touch-action:manipulation; /* flex:none ist der eigentliche Fix: ohne das ist flex-shrink:1 der Default, wodurch jede einzelne Zeile bei vielen Chats vom Container zusammengequetscht wird statt fixe Hoehe zu behalten und den Container scrollen zu lassen. */ flex:none; } .conv-item:hover{ background:var(--bg-elevated); color:var(--text); } .conv-item.active{ background:var(--bg-elevated); color:var(--text); border:1px solid var(--border); } .conv-item .conv-del{ opacity:0; flex:none; border:none; background:none; color:var(--text-faint); cursor:pointer; padding:6px; border-radius:7px; display:flex; align-items:center; justify-content:center; transition:opacity .12s ease, background .12s ease, color .12s ease; } .conv-item:hover .conv-del{ opacity:1; } .conv-item .conv-del:hover{ color:var(--danger); background:color-mix(in srgb, var(--danger) 14%, transparent); } .conv-title{ overflow:hidden; text-overflow:ellipsis; } /* Fortschritts-Leiste am unteren Rand eines conv-item waehrend des Long-Press zum Loeschen auf dem Handy (siehe .pressing-Klasse, gesetzt in app.js). */ .conv-item::after{ content:''; position:absolute; left:8px; right:8px; bottom:2px; height:2px; border-radius:2px; background:var(--danger); transform:scaleX(0); transform-origin:left; opacity:0; pointer-events:none; } .conv-item.pressing::after{ opacity:1; transform:scaleX(1); transition:transform 1.5s linear; } .sidebar-user{ border-top:1px solid var(--border); padding:10px; position:relative; } .sidebar-user-btn{ width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; background:none; border:none; color:var(--text); cursor:pointer; text-align:left; } .sidebar-user-btn:hover{ background:var(--bg-elevated); } .avatar{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bubble-user); color:var(--bubble-user-text); font-weight:700; font-size:13px; flex:none; } .sidebar-user-name{ font-size:13.8px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sidebar-user-email{ font-size:12px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .user-menu{ position:absolute; bottom:64px; left:10px; right:10px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; z-index:20; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px) scale(.97); transform-origin:bottom center; transition:opacity .18s cubic-bezier(.16,.8,.24,1), transform .18s cubic-bezier(.16,.8,.24,1), visibility 0s linear .18s; } .user-menu.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); transition:opacity .18s cubic-bezier(.16,.8,.24,1), transform .18s cubic-bezier(.16,.8,.24,1); } .user-menu a, .user-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; font-size:13.8px; color:var(--text); background:none; border:none; text-align:left; cursor:pointer; } .user-menu a:hover, .user-menu button:hover{ background:var(--bg); } .user-menu .danger{ color:var(--danger); } .user-menu hr{ border:none; border-top:1px solid var(--border); margin:4px 0; } /* ---- Lösch-Bestätigung fürs Löschen eines Chats (statt confirm()) ---- */ .del-confirm-pop{ position:fixed; z-index:300; width:216px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:12px 12px 10px; opacity:0; transform:scale(.96); transform-origin:top left; transition:opacity .12s ease, transform .12s ease; pointer-events:none; } .del-confirm-pop.is-open{ opacity:1; transform:scale(1); pointer-events:auto; } .del-confirm-text{ font-size:13.2px; color:var(--text); line-height:1.4; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .del-confirm-actions{ display:flex; justify-content:flex-end; gap:8px; } .del-confirm-actions button{ font-family:inherit; font-size:12.6px; font-weight:500; padding:6px 12px; border-radius:8px; cursor:pointer; border:1px solid transparent; } .del-confirm-cancel{ background:none; border-color:var(--border); color:var(--text-dim); } .del-confirm-cancel:hover{ background:var(--bg); color:var(--text); } .del-confirm-confirm{ background:#e5484d; color:#fff; font-weight:600; } .del-confirm-confirm:hover{ filter:brightness(1.08); } /* ---------------------------------- Chat-Bereich ---------------------------------- */ .main{ flex:1; display:flex; flex-direction:column; min-width:0; padding-right:0; transition:padding-right .25s ease; } /* Ist das Code-Panel offen, wird .main um dessen (per ResizeObserver in app.js live nachgefuehrte) Breite eingerueckt. Da .messages-inner/.composer-inner weiterhin per max-width + margin:0 auto zentriert sind, zentriert sich der Chat dadurch automatisch im tatsaechlich sichtbaren Platz zwischen Sidebar und Code-Panel, statt weiter in der vollen (teils verdeckten) Breite. */ .main.panel-open{ padding-right:var(--code-panel-width, 0px); } .main-header{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--border-soft); } .icon-btn{ border:none; background:none; color:var(--text-dim); cursor:pointer; padding:6px; border-radius:8px; display:flex; align-items:center; justify-content:center; } .icon-btn:hover{ background:var(--bg-elevated); color:var(--text); } .provider-badge{ --badge-color:var(--accent); display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 10px; border-radius:20px; border:1px solid var(--border); background:var(--bg-elevated); font-size:12.8px; font-weight:600; color:var(--text); } .provider-badge-icon{ width:20px; height:20px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--badge-color) 18%, transparent); color:var(--badge-color); } .provider-badge.soon{ color:var(--text-dim); } .provider-badge .soon-tag{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); background:var(--bg-input); border:1px solid var(--border); border-radius:6px; padding:2px 6px; margin-left:2px; } /* ---- Modell-Auswahl unten im Composer statt oben rechts ---- Einmal pro Chat gewählt, dann für diesen Chat fest - siehe app.js. */ .provider-picker-wrap{ position:relative; flex:none; } .provider-picker{ --badge-color:var(--accent); display:flex; align-items:center; gap:6px; height:34px; padding:0 10px 0 8px; border-radius:10px; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text); font-size:12.8px; font-weight:600; cursor:pointer; white-space:nowrap; } .provider-picker:hover{ border-color:var(--text-faint); } .provider-picker.locked{ cursor:default; opacity:.7; } .provider-picker.locked:hover{ border-color:var(--border); } .provider-picker-icon{ width:18px; height:18px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--badge-color) 18%, transparent); color:var(--badge-color); } .provider-picker-caret{ color:var(--text-faint); transition:transform .15s ease; } .provider-picker-wrap.open .provider-picker-caret{ transform:rotate(180deg); } .provider-picker-lock{ color:var(--text-faint); display:flex; } .provider-menu{ position:absolute; bottom:calc(100% + 8px); left:0; min-width:210px; padding:6px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px; z-index:10; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px) scale(.97); transform-origin:bottom left; transition:opacity .16s cubic-bezier(.16,.8,.24,1), transform .16s cubic-bezier(.16,.8,.24,1), visibility 0s linear .16s; } /* Zieht der Picker auf dem Handy in den main-header oben um (siehe app.js), klappt das Menü nach unten statt nach oben auf, sonst würde es über den Bildschirmrand hinaus nach oben verschwinden - Ursprung der Animation wandert entsprechend von unten-links nach oben-links. */ .provider-picker-wrap.in-header .provider-menu{ bottom:auto; top:calc(100% + 8px); transform-origin:top left; } .provider-picker-wrap.open .provider-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); transition:opacity .16s cubic-bezier(.16,.8,.24,1), transform .16s cubic-bezier(.16,.8,.24,1); } .provider-menu-item{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; border:none; background:none; color:var(--text); font-size:13.3px; font-weight:500; text-align:left; cursor:pointer; width:100%; } .provider-menu-item:hover:not(:disabled){ background:var(--bg-input); } .provider-menu-item.active{ background:color-mix(in srgb, var(--accent) 14%, transparent); } .provider-menu-item:disabled{ color:var(--text-faint); cursor:not-allowed; } .provider-menu-icon{ width:20px; height:20px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--bg-input); color:var(--text-dim); } /* ---- Echte Modell-Logos (PNG) statt farbiger SVG-Icons ----- .has-logo nimmt den farbigen Kreis-Hintergrund weg, das Bild deckt den ganzen Kreis ab. .logo-swap zeigt je nach [data-theme] auf die helle oder dunkle Logo-Variante (Dateien liegen als *_dark_mode.png / *_light_mode.png in assets/img/, sind aber deutlich zu groß angeliefert worden -> hier auf Icon-Größe gestutzt). */ .provider-badge-icon.has-logo, .provider-picker-icon.has-logo, .provider-menu-icon.has-logo{ background:none; } .logo-swap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; } .logo-swap img{ width:100%; height:100%; object-fit:contain; display:block; } .logo-swap .icon-light{ display:none; } html[data-theme="light"] .logo-swap .icon-dark{ display:none; } html[data-theme="light"] .logo-swap .icon-light{ display:block; } /* Groq-Logo ist nur das "G" ohne Umrandung -> oranger Kreis drumrum per CSS */ .logo-circle-groq{ width:100%; height:100%; border-radius:50%; background:#f55036; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:15%; } .messages{ flex:1; overflow-y:auto; padding:28px 20px 10px; position:relative; overscroll-behavior:contain; } /* "Nach unten springen"-Button, erscheint nur wenn man hochgescrollt hat, während die KI noch schreibt oder ein langer Chat offen ist */ .scroll-bottom-btn{ position:absolute; left:50%; bottom:98px; transform:translateX(-50%) translateY(8px); width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:5; } .scroll-bottom-btn.visible{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); } .scroll-bottom-btn:hover{ color:var(--text); border-color:var(--text-faint); } .messages-inner{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:22px; } .empty-state{ max-width:520px; margin:10vh auto; text-align:center; color:var(--text-dim); } .empty-state h2{ color:var(--text); font-size:20px; margin:0 0 8px; } /* ---- Animierter Sedna-Kristall über den Themenvorschlägen ---- Portiert aus dem Splash-Screen-Design: leichtes "Atmen" die ganze Zeit, alle paar Sekunden bricht der Kristall kurz in seine Facetten auf und fügt sich wieder zusammen, dazu ein Lichtglanz, der über die Fläche wandert. Farbe folgt var(--text), damit es in jedem Theme funktioniert. */ .logo-crystal{ position:relative; width:64px; height:64px; margin:0 auto 20px; } .logo-crystal-svg{ width:100%; height:100%; overflow:visible; animation: crystal-breathe 5s ease-in-out infinite; } .logo-crystal .facet{ stroke: var(--bg); stroke-width:1.2; stroke-linejoin:round; transform-box: fill-box; transform-origin:center; animation: crystal-shatter 16s ease-in-out infinite; } .logo-crystal .f1{ fill: var(--text); opacity:.98; } .logo-crystal .f2{ fill: var(--text); opacity:.72; } .logo-crystal .f3{ fill: var(--text); opacity:.46; } .logo-crystal .f4{ fill: var(--text); opacity:.28; } .logo-crystal .edge{ fill:none; stroke:var(--text); stroke-width:0.8; opacity:.85; animation: crystal-edge-fade 16s ease-in-out infinite; } @keyframes crystal-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.85; } } @keyframes crystal-shatter{ 0%, 80%{ transform: translate(0,0) rotate(0deg) scale(1); } 88%{ transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.92); } 94%{ transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .3)) rotate(calc(var(--rot) * .3)) scale(.97); } 100%{ transform: translate(0,0) rotate(0deg) scale(1); } } @keyframes crystal-edge-fade{ 0%, 80%{ opacity:.85; } 88%{ opacity:0; } 94%{ opacity:.4; } 100%{ opacity:.85; } } .logo-crystal-glint{ position:absolute; inset:0; clip-path: polygon(50% 4%, 74% 26%, 92% 52%, 50% 96%, 8% 52%, 26% 26%); pointer-events:none; overflow:hidden; } .logo-crystal-glint::before{ content:''; position:absolute; top:-40%; bottom:-40%; left:-60%; width:35%; background:linear-gradient(75deg, transparent, color-mix(in srgb, var(--text) 55%, transparent), transparent); animation: crystal-glint-sweep 6.5s ease-in-out infinite; } @keyframes crystal-glint-sweep{ 0%, 62%{ left:-60%; } 80%{ left:130%; } 100%{ left:130%; } } .suggestion-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; } .suggestion-card{ border:1px solid var(--border); border-radius:12px; padding:13px 14px; text-align:left; background:var(--bg-elevated); cursor:pointer; font-size:13.3px; color:var(--text-dim); } .suggestion-card:hover{ border-color:var(--accent); color:var(--text); } .msg{ display:flex; gap:12px; align-items:flex-start; } .msg.user{ flex-direction:row-reverse; } .msg.ai{ padding-left:0; width:100%; } /* KI-Antwort nimmt die volle Breite der mittig zentrierten Spalte ein */ .msg-avatar{ width:28px; height:28px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:2px; } .msg.user .msg-avatar{ background:var(--bubble-user); color:var(--bubble-user-text); } .msg-bubble{ max-width:78%; padding:12px 15px; border-radius:14px; font-size:14.7px; white-space:pre-wrap; word-wrap:break-word; } .msg.user .msg-bubble{ background:var(--bubble-user); color:var(--bubble-user-text); border-bottom-right-radius:4px; } /* Nachricht besteht nur aus Bild(ern), kein Text - dann die blaue Sprechblase drumrum weglassen, sieht sonst unnötig "verpackt" aus. Einfach nur das Bild. */ .msg.user .msg-bubble.media-only{ background:none; padding:0; border-bottom-right-radius:0; } .msg.ai .msg-bubble{ background:var(--bubble-ai); border:1px solid var(--border-soft); border-radius:14px; white-space:normal; max-width:100%; width:100%; } .msg-bubble.pending{ color:var(--text-faint); } .typing-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--text-faint); margin-right:3px; animation:blink 1.1s infinite ease-in-out; } .typing-dot:nth-child(2){ animation-delay:.15s; } .typing-dot:nth-child(3){ animation-delay:.3s; } @keyframes blink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } } .thinking-hint{ margin-top:8px; font-size:11.5px; color:var(--text-faint); font-style:italic; opacity:0; animation:fadeInHint .4s ease forwards; } .thinking-hint:empty{ display:none; } @keyframes fadeInHint{ to{ opacity:1; } } /* ---- Markdown-Inhalte in KI-Antworten ---- */ .md-block p{ margin:0 0 10px; line-height:1.55; } .md-block p:last-child{ margin-bottom:0; } .md-block p.md-heading{ font-weight:700; font-size:15.5px; margin-top:14px; } .md-block ul, .md-block ol{ margin:0 0 10px 20px; padding:0; } .md-block ol{ list-style:decimal; } .md-block li{ margin-bottom:4px; line-height:1.5; } .md-block li::marker{ color:var(--text-dim); } .inline-code{ background:var(--bg-input); border:1px solid var(--border-soft); border-radius:5px; padding:1.5px 6px; font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace; font-size:13px; } /* ---- Code-Block Box ---- */ .code-block{ margin:8px 0 12px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg-input); } .code-block-header{ display:flex; align-items:center; justify-content:space-between; padding:7px 12px; background:var(--bg-elevated); border-bottom:1px solid var(--border-soft); } .code-lang{ font-size:12px; color:var(--text-dim); text-transform:lowercase; letter-spacing:.02em; } .code-block-actions{ display:flex; align-items:center; gap:6px; } .code-block-actions .copy-btn{ display:flex; align-items:center; gap:5px; } .copy-btn{ background:transparent; border:1px solid var(--border); color:var(--text-dim); font-size:12px; padding:3px 10px; border-radius:6px; cursor:pointer; transition:.15s; } .copy-btn:hover{ color:var(--text); border-color:var(--text-faint); } .code-block pre{ margin:0; padding:12px 14px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .code-block code{ font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace; font-size:13px; line-height:1.55; white-space:pre; color:var(--text); } /* ---- Syntax-Highlighting (highlight.js Tokens, eigene Theme-Farben statt fertigem CSS-Theme, damit es zu dark/gray/light passt statt fix dunkel zu sein) ---- */ .code-block .hljs-comment, .code-block .hljs-quote{ color:#7a8394; font-style:italic; } .code-block .hljs-keyword, .code-block .hljs-doctag, .code-block .hljs-formula{ color:#c678dd; } .code-block .hljs-section, .code-block .hljs-name, .code-block .hljs-selector-tag, .code-block .hljs-deletion, .code-block .hljs-subst{ color:#e06c75; } .code-block .hljs-literal{ color:#56b6c2; } .code-block .hljs-string, .code-block .hljs-regexp, .code-block .hljs-addition, .code-block .hljs-attribute, .code-block .hljs-meta .hljs-string{ color:#98c379; } .code-block .hljs-attr, .code-block .hljs-variable, .code-block .hljs-template-variable, .code-block .hljs-type, .code-block .hljs-selector-class, .code-block .hljs-selector-attr, .code-block .hljs-selector-pseudo, .code-block .hljs-number{ color:#d19a66; } .code-block .hljs-symbol, .code-block .hljs-bullet, .code-block .hljs-link, .code-block .hljs-meta, .code-block .hljs-selector-id, .code-block .hljs-title{ color:#61aeee; } .code-block .hljs-built_in, .code-block .hljs-title.class_, .code-block .hljs-class .hljs-title{ color:#e6c07b; } .code-block .hljs-emphasis{ font-style:italic; } .code-block .hljs-strong{ font-weight:700; } /* Light-Theme: hellerer Hintergrund -> kräftigere, dunklere Token-Farben (Atom One Light) */ html[data-theme="light"] .code-block .hljs-comment, html[data-theme="light"] .code-block .hljs-quote{ color:#a0a1a7; } html[data-theme="light"] .code-block .hljs-keyword, html[data-theme="light"] .code-block .hljs-doctag, html[data-theme="light"] .code-block .hljs-formula{ color:#a626a4; } html[data-theme="light"] .code-block .hljs-section, html[data-theme="light"] .code-block .hljs-name, html[data-theme="light"] .code-block .hljs-selector-tag, html[data-theme="light"] .code-block .hljs-deletion, html[data-theme="light"] .code-block .hljs-subst{ color:#e45649; } html[data-theme="light"] .code-block .hljs-literal{ color:#0184bc; } html[data-theme="light"] .code-block .hljs-string, html[data-theme="light"] .code-block .hljs-regexp, html[data-theme="light"] .code-block .hljs-addition, html[data-theme="light"] .code-block .hljs-attribute, html[data-theme="light"] .code-block .hljs-meta .hljs-string{ color:#50a14f; } html[data-theme="light"] .code-block .hljs-attr, html[data-theme="light"] .code-block .hljs-variable, html[data-theme="light"] .code-block .hljs-template-variable, html[data-theme="light"] .code-block .hljs-type, html[data-theme="light"] .code-block .hljs-selector-class, html[data-theme="light"] .code-block .hljs-selector-attr, html[data-theme="light"] .code-block .hljs-selector-pseudo, html[data-theme="light"] .code-block .hljs-number{ color:#986801; } html[data-theme="light"] .code-block .hljs-symbol, html[data-theme="light"] .code-block .hljs-bullet, html[data-theme="light"] .code-block .hljs-link, html[data-theme="light"] .code-block .hljs-meta, html[data-theme="light"] .code-block .hljs-selector-id, html[data-theme="light"] .code-block .hljs-title{ color:#4078f2; } html[data-theme="light"] .code-block .hljs-built_in, html[data-theme="light"] .code-block .hljs-title.class_, html[data-theme="light"] .code-block .hljs-class .hljs-title{ color:#c18401; } /* ---- Tipp-Cursor während die Antwort "geschrieben" wird ---- */ .type-cursor{ display:inline-block; width:2px; height:15px; background:var(--accent); vertical-align:text-bottom; margin-left:1px; animation:cursorBlink .85s step-end infinite; } @keyframes cursorBlink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } } .composer{ padding:14px 20px 20px; position:relative; } .composer.drag-over::before{ content:'Datei hier ablegen'; position:absolute; inset:6px; border:2px dashed var(--accent); border-radius:18px; background:color-mix(in srgb, var(--accent) 8%, transparent); display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:600; color:var(--accent); z-index:3; pointer-events:none; } .composer-inner{ max-width:720px; margin:0 auto; display:flex; align-items:flex-end; gap:8px; background:var(--bg-input); border:1px solid var(--border); border-radius:16px; padding:8px; } .composer-attach{ width:34px; height:34px; border-radius:10px; border:none; background:none; color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; } .composer-attach:hover{ background:var(--bg-elevated); color:var(--text); } /* Bild-Erstellen-Modus aktiv: deutlich hervorgehoben, damit klar ist, dass die nächste Nachricht als Bild-Prompt statt als normale Chat-Frage behandelt wird. */ .composer-attach.active{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); } /* Kamera-Button: nur auf dem Handy sichtbar (siehe Mobile-Sektion unten) - am Desktop hat man ohnehin meist keine Kamera direkt am Gerät zur Hand, dafür ist dort mehr Platz für den Modell-Picker im Composer. */ .composer-camera{ display:none; } .composer textarea{ flex:1; border:none; background:none; resize:none; color:var(--text); font-size:14.7px; font-family:inherit; max-height:200px; padding:8px 0; line-height:1.5; } .composer textarea:focus{ outline:none; } .composer-send{ width:38px; height:38px; border-radius:10px; border:none; background:var(--bubble-user); color:var(--bubble-user-text); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; } .composer-send:disabled{ opacity:.4; cursor:not-allowed; } .composer-hint{ text-align:center; font-size:11.5px; color:var(--text-faint); margin-top:8px; } /* ---- Bild-Anhänge: Vorschau-Leiste über dem Eingabefeld ---- */ .attachment-strip{ max-width:720px; margin:0 auto; display:none; flex-wrap:wrap; gap:8px; padding-bottom:10px; } .attachment-strip.visible{ display:flex; } .attachment-chip{ position:relative; width:56px; height:56px; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:var(--bg-input); flex:none; } .attachment-chip img{ width:100%; height:100%; object-fit:cover; display:block; } .attachment-chip.uploading img{ opacity:.5; } .attachment-chip.error{ display:flex; align-items:center; justify-content:center; } .attachment-chip-error{ font-size:18px; } .attachment-chip-spinner{ position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:spin .7s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .attachment-chip-remove{ position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; border:none; background:rgba(0,0,0,.55); color:#fff; font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; } /* ---- Text-/Code- und ZIP-Anhänge: eigene Chip-Form statt Bild-Vorschau ---- */ .attachment-chip-file{ width:auto; height:56px; min-width:150px; max-width:220px; border-radius:10px; display:flex; align-items:center; gap:9px; padding:0 30px 0 10px; background:var(--bg-input); } .attachment-chip-file-icon{ flex:none; color:var(--text-dim); display:flex; } .attachment-chip-file-info{ min-width:0; display:flex; flex-direction:column; gap:1px; } .attachment-chip-file-name{ font-size:12.3px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; } .attachment-chip-file-meta{ font-size:11px; color:var(--text-faint); } /* ---- Bilder innerhalb einer Chat-Nachricht ---- */ .msg-attachments{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; } .msg-bubble.media-only .msg-attachments{ margin-bottom:0; } .attachment-img-wrap{ display:block; border-radius:12px; overflow:hidden; border:1px solid var(--border-soft); cursor:zoom-in; padding:0; background:none; line-height:0; transition:opacity .15s; } .attachment-img-wrap:hover{ opacity:.85; } .msg-attachments img{ max-width:220px; max-height:220px; display:block; object-fit:cover; } .msg-file-chip{ display:inline-flex; align-items:center; gap:9px; padding:9px 14px 9px 11px; border-radius:12px; border:1px solid var(--border-soft); background:var(--bg-input); text-decoration:none; max-width:260px; transition:border-color .15s ease, background .15s ease; } .msg-file-chip:hover{ border-color:var(--accent); background:var(--bg-elevated); } .msg-file-chip-icon{ flex:none; color:var(--text-dim); display:flex; } .msg-file-chip-info{ min-width:0; display:flex; flex-direction:column; gap:1px; } .msg-file-chip-name{ font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .msg-file-chip-meta{ font-size:11.3px; color:var(--text-faint); } .zip-download-btn{ display:flex; align-items:center; gap:8px; margin-top:4px; padding:9px 14px; border-radius:10px; border:1px dashed var(--border); background:none; color:var(--text-dim); font-size:12.8px; font-weight:600; cursor:pointer; transition:border-color .15s ease, color .15s ease; } .zip-download-btn:hover{ border-color:var(--accent); color:var(--accent); border-style:solid; } .zip-download-btn:disabled{ opacity:.6; cursor:default; } /* ---- Bild-Lightbox (vergroesserte Ansicht + Kopieren/Herunterladen) ---- */ .image-lightbox-backdrop{ position:fixed; inset:0; background:rgba(10,10,14,.82); opacity:0; pointer-events:none; transition:opacity .18s; z-index:60; } .image-lightbox-backdrop.open{ opacity:1; pointer-events:auto; } .image-lightbox{ position:fixed; inset:0; z-index:61; display:flex; align-items:center; justify-content:center; padding:48px 24px; opacity:0; pointer-events:none; transition:opacity .18s; } .image-lightbox.open{ opacity:1; pointer-events:auto; } .image-lightbox img{ max-width:min(90vw, 1100px); max-height:86vh; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5); object-fit:contain; } .image-lightbox-actions{ position:absolute; top:20px; right:20px; display:flex; gap:8px; z-index:2; } .image-lightbox-btn{ width:38px; height:38px; border-radius:10px; border:none; cursor:pointer; background:rgba(30,30,38,.75); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:background .15s; } .image-lightbox-btn:hover{ background:rgba(50,50,60,.9); } .image-lightbox-btn.success{ color:#4ade80; } /* ========================================================================== Settings Zwei Layout-Varianten leben hier nebeneinander, je nachdem was die jeweilige settings.php rendert: 1) .settings-section -> einfache, gestapelte Karten-Liste (älteres Layout) 2) .settings-wrapper/.settings-sidebar/.settings-nav/.tab-content -> neues Sidebar+Tabs-Layout (Design / Persönliche Daten / Billing / Datenschutz) ========================================================================== */ .settings-shell{ max-width:1200px; margin:0 auto; padding:40px 24px 80px; } .settings-shell h1{ font-size:24px; margin-bottom:6px; } .settings-shell > .sub{ color:var(--text-dim); margin-bottom:32px; } /* -- Variante 1: einfache Karten-Liste -- */ .settings-section{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; padding:20px 22px; margin-bottom:16px; } .settings-section h2{ font-size:14.5px; margin:0 0 4px; } .settings-section .desc{ color:var(--text-dim); font-size:13px; margin:0 0 16px; } /* -- Variante 2: Sidebar + Tabs -- */ .settings-wrapper{ display:flex; gap:32px; align-items:flex-start; } .settings-sidebar{ flex:0 0 200px; position:sticky; top:32px; } .settings-sidebar h1{ font-size:22px; margin:0 0 16px; } .settings-nav{ display:flex; flex-direction:column; gap:4px; } .settings-nav-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; background:none; border:none; color:var(--text-dim); font-size:14px; text-align:left; cursor:pointer; text-decoration:none; transition:background .15s ease, color .15s ease; } .settings-nav-item svg{ flex:none; opacity:.75; transition:opacity .15s ease; } .settings-nav-item.active{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); font-weight:600; } .settings-content{ flex:1; min-width:0; } .tab-content{ display:none; } .tab-content.active{ display:block; } .section-group{ margin-bottom:32px; } .section-group h2{ font-size:16px; margin:0 0 4px; } .section-group .desc{ color:var(--text-dim); font-size:13px; margin:0 0 18px; } .account-info-box{ background:var(--bg-elevated); border:1px solid var(--border); padding:18px 20px; border-radius:14px; margin-bottom:20px; } .account-info-box .field{ margin-bottom:12px; } .account-info-box .field:last-child{ margin-bottom:0; } .verification-method-group{ background:var(--bg-elevated); border:1px solid var(--border); padding:14px 16px; border-radius:12px; margin-bottom:16px; } .verification-method-group > div{ margin-bottom:10px; } .verification-method-group > div:last-child{ margin-bottom:0; } .verification-method-group label{ display:flex; align-items:center; cursor:pointer; font-size:14px; color:var(--text); margin:0; } .verification-method-group input[type="radio"]{ margin-right:8px; accent-color:var(--accent); } .verification-method-group .method-content{ margin:10px 0 0 24px; display:none; } .verification-method-group input[type="radio"]:checked + label + .method-content{ display:block; } .help-text{ font-size:12.5px; color:var(--text-dim); margin-top:8px; } .help-link{ font-size:12.5px; color:var(--accent); text-decoration:none; } .help-link:hover{ text-decoration:underline; } /* ---- Verifizierungs-Modals (E-Mail/Passwort ändern) ---- */ .settings-action-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; padding:2px 0; } .settings-action-row:hover h2{ color:var(--accent); } .row-chevron{ flex:none; color:var(--text-faint); } .modal-overlay{ position:fixed; inset:0; background:rgba(6,9,15,0.6); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; } .modal-overlay.open{ display:flex; } .modal-card{ position:relative; width:100%; max-width:420px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; padding:30px 28px; box-shadow:var(--shadow); max-height:90vh; overflow-y:auto; } .modal-close{ position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:8px; border:none; background:none; color:var(--text-faint); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; } .modal-close:hover{ background:var(--bg-input); color:var(--text); } .modal-card h3{ font-size:17px; margin:0 0 6px; } .modal-step{ display:none; } .modal-step.active{ display:block; } .verify-options .field{ margin-bottom:10px; } .verify-options .btn{ margin-top:4px; } .google-btn{ display:flex; align-items:center; justify-content:center; gap:10px; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); } .google-btn:hover{ border-color:var(--text-faint); } .modal-error{ font-size:12.5px; color:var(--danger); margin-top:8px; display:none; } .modal-error.show{ display:block; } /* ---- Verifizierungs-Modals (E-Mail/Passwort ändern) ---- */ .settings-action-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; padding:2px 0; } .settings-action-row:hover h2{ color:var(--accent); } .row-chevron{ flex:none; color:var(--text-faint); } .modal-overlay{ position:fixed; inset:0; background:rgba(6,9,15,0.6); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; } .modal-overlay.open{ display:flex; } .modal-card{ position:relative; width:100%; max-width:420px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; padding:30px 28px; box-shadow:var(--shadow); max-height:90vh; overflow-y:auto; } .modal-close{ position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:8px; border:none; background:none; color:var(--text-faint); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; } .modal-close:hover{ background:var(--bg-input); color:var(--text); } .modal-card h3{ font-size:17px; margin:0 0 6px; } .modal-step{ display:none; } .modal-step.active{ display:block; } .verify-options .field{ margin-bottom:10px; } .verify-options .btn{ margin-top:4px; } .google-btn{ display:flex; align-items:center; justify-content:center; gap:10px; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); } .google-btn:hover{ border-color:var(--text-faint); } .modal-error{ font-size:12.5px; color:var(--danger); margin-top:8px; display:none; } .modal-error.show{ display:block; } /* ---- Sidebar-Nav: gleitende Markierung + Microinteractions ---- */ .settings-nav{ position:relative; } .nav-indicator{ position:absolute; left:0; top:0; width:100%; z-index:0; background:color-mix(in srgb, var(--accent) 14%, transparent); border-radius:9px; pointer-events:none; } .settings-nav-item{ position:relative; z-index:1; transition:color .18s ease, transform .18s ease; } .settings-nav-item:hover{ transform:translateX(2px); } .settings-nav-item.active{ background:none; } /* Pill übernimmt den Hintergrund jetzt */ .settings-nav-item svg{ transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .18s ease; } .settings-nav-item:hover svg{ transform:scale(1.15) rotate(-4deg); } .settings-nav-item.active svg{ color:var(--accent); } /* Tab-Content: sanftes Fade+Slide beim Wechsel */ .tab-content{ opacity:0; transform:translateY(6px); transition:opacity .22s ease, transform .22s ease; display:none; } .tab-content.active{ display:block; opacity:1; transform:translateY(0); } .tab-content.entering{ animation:tabIn .26s ease; } @keyframes tabIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } } /* Theme-Dots: schönerer Klick-Feedback */ .theme-dot{ transition:transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s ease, box-shadow .18s ease; } .theme-dot:active{ transform:scale(0.92); } .theme-dot.selected{ box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } /* Flash-Messages: rein-slide statt hartes Erscheinen */ .flash-msg{ animation:flashIn .3s cubic-bezier(.34,1.56,.64,1); } @keyframes flashIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } } /* -- Gemeinsam genutzt von beiden Varianten -- */ .row-between{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .theme-options{ display:flex; gap:10px; } .theme-dot{ width:38px; height:38px; border-radius:50%; cursor:pointer; border:2px solid transparent; display:flex; align-items:center; justify-content:center; transition:transform .15s ease, border-color .15s ease; } .theme-dot:hover{ transform:scale(1.08); } .theme-dot.selected{ border-color:var(--accent); } .theme-dot[data-theme-swatch="dark"]{ background:#0a0e15; } .theme-dot[data-theme-swatch="gray"]{ background:#24272e; } .theme-dot[data-theme-swatch="light"]{ background:#f3f5f8; border:2px solid var(--border); } .theme-dot[data-theme-swatch="light"].selected{ border-color:var(--accent); } .switch{ position:relative; width:44px; height:25px; flex:none; display:inline-block; } .switch input{ opacity:0; width:0; height:0; } .switch .slider{ position:absolute; inset:0; background:var(--border); border-radius:20px; cursor:pointer; transition:.15s; } .switch .slider::before{ content:''; position:absolute; width:19px; height:19px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; } .switch input:checked + .slider{ background:var(--accent); } .switch input:checked + .slider::before{ transform:translateX(19px); } .back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); font-size:13.5px; margin-bottom:20px; } .back-link:hover{ color:var(--text); } @media (max-width:820px){ .settings-shell{ padding:24px 16px 60px; } .settings-wrapper{ flex-direction:column; gap:20px; } .settings-sidebar{ position:static; flex:1; width:100%; } .settings-nav{ flex-direction:row; gap:2px; padding:4px; margin:0 -2px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; scrollbar-width:none; } .settings-nav::-webkit-scrollbar{ display:none; } .settings-nav-item{ flex-shrink:0; white-space:nowrap; padding:9px 14px; font-size:13.3px; } .settings-nav-item:hover{ transform:none; } .nav-indicator{ border-radius:8px; } } /* ---------------------------------- Consent-Checkbox (Signup) ---------------------------------- */ .consent-field{ display:flex; align-items:flex-start; gap:9px; margin-bottom:18px; } .consent-field input[type="checkbox"]{ margin-top:3px; width:16px; height:16px; accent-color:var(--accent); flex:none; cursor:pointer; } .consent-field label{ font-size:12.8px; color:var(--text-dim); line-height:1.5; cursor:pointer; } .consent-field a{ color:var(--accent); } /* ---------------------------------- Footer mit Impressum/Datenschutz-Links ---------------------------------- */ .legal-footer{ text-align:center; font-size:12px; color:var(--text-faint); margin-top:18px; } .legal-footer a{ color:var(--text-faint); text-decoration:underline; } .legal-footer a:hover{ color:var(--text-dim); } .legal-footer .dot{ margin:0 7px; } /* ---------------------------------- Rechtstexte (Impressum / Datenschutz) ---------------------------------- */ .legal-shell{ max-width:720px; margin:0 auto; padding:48px 24px 90px; line-height:1.7; } .legal-shell h1{ font-size:26px; margin-bottom:6px; } .legal-shell .sub{ color:var(--text-dim); margin-bottom:32px; font-size:14px; } .legal-shell h2{ font-size:17px; margin:32px 0 10px; } .legal-shell p{ margin:0 0 12px; color:var(--text); } .legal-shell ul{ margin:0 0 14px 20px; padding:0; } .legal-shell li{ margin-bottom:6px; } .legal-shell .placeholder{ background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); padding:1px 6px; border-radius:5px; font-size:.94em; } .legal-shell .note-box{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; padding:14px 16px; font-size:13.3px; color:var(--text-dim); margin-bottom:28px; } /* ---------------------------------- Consent-Modal (blockiert Chat bis akzeptiert) ---------------------------------- */ .consent-overlay{ position:fixed; inset:0; background:rgba(6,9,15,0.6); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; } .consent-modal{ width:100%; max-width:460px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; padding:28px 26px; box-shadow:var(--shadow); } .consent-modal h2{ font-size:19px; margin:0 0 10px; } .consent-modal p{ font-size:13.8px; color:var(--text-dim); margin:0 0 14px; line-height:1.6; } .consent-modal .consent-field{ margin-bottom:20px; } .consent-modal .error{ font-size:12.5px; color:var(--danger); margin-bottom:12px; } /* ---------------------------------- Code-Karten ---------------------------------- Ersetzt fuer laengere Code-Bloecke (siehe CODE_CARD_LINE_THRESHOLD in app.js) den vollen Inline-Codeblock durch eine kompakte, klickbare Karte. Der Code selbst wird im Code-Panel (.code-panel) angezeigt. */ .code-card{ display:flex; align-items:center; gap:12px; margin:8px 0 12px; padding:11px 13px; border:1px solid var(--border); border-radius:12px; background:var(--bg-input); cursor:pointer; transition:border-color .15s, background .15s; max-width:420px; } .code-card:hover{ border-color:var(--accent); background:var(--bg-elevated); } .code-card-info{ flex:1; min-width:0; } .code-card-name{ font-size:13.6px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace; } .code-card-meta{ font-size:12px; color:var(--text-faint); margin-top:2px; } .code-card-sep{ opacity:.6; } .code-card.streaming .code-card-status{ color:var(--accent); animation:code-card-pulse 1.3s ease-in-out infinite; } @keyframes code-card-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } } .code-card-actions{ flex:none; display:flex; gap:2px; } .code-card-btn{ background:transparent; border:none; color:var(--text-faint); cursor:pointer; padding:6px; border-radius:7px; display:flex; align-items:center; justify-content:center; } .code-card-btn:hover{ color:var(--text); background:var(--bg-elevated); } .code-card-chevron{ flex:none; color:var(--text-faint); display:flex; } .code-card:hover .code-card-chevron{ color:var(--accent); } /* ---------------------------------- Code-Panel ---------------------------------- Seitliches Fenster (von rechts), zeigt den vollen Inhalt einer Code-Karte, inkl. Live-Update waehrend die Tipp-Animation noch laeuft. Liegt bewusst NICHT hinter einem blockierenden Hintergrund - der Chat/Composer bleibt daneben die ganze Zeit nutzbar. Nur auf schmalen (mobilen) Bildschirmen, wo das Panel den ganzen Screen einnimmt, dimmt/blockiert der Hintergrund und schliesst per Tap. */ .code-panel-backdrop{ position:fixed; inset:0; background:rgba(4,7,12,0.35); z-index:60; opacity:0; pointer-events:none; transition:opacity .2s ease; touch-action:none; } .code-panel{ position:fixed; top:0; right:0; bottom:0; z-index:61; width:min(640px, 92vw); min-width:320px; max-width:1100px; background:var(--bg-elevated); border-left:1px solid var(--border); box-shadow:var(--shadow); display:flex; flex-direction:column; transform:translateX(100%); visibility:hidden; /* visibility erst NACH der Slide-Transition umschalten (Delay = Transitionsdauer), sonst verschwindet das Panel beim Schliessen sofort und die Animation wird nie sichtbar. Beim Oeffnen (siehe .open unten) ohne Delay, damit es sofort sichtbar wird und die Slide-in-Animation von Anfang an zu sehen ist. */ transition:transform .25s ease, visibility 0s linear .25s; } .code-panel.open{ transform:translateX(0); visibility:visible; transition:transform .25s ease, visibility 0s linear 0s; } body.code-panel-resizing{ user-select:none; cursor:col-resize; } body.code-panel-resizing .code-panel{ transition:none; } .code-panel-resizer{ position:absolute; top:0; left:-4px; width:8px; height:100%; cursor:col-resize; z-index:2; } .code-panel-resizer:hover, body.code-panel-resizing .code-panel-resizer{ background:color-mix(in srgb, var(--accent) 35%, transparent); } .code-panel-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border-soft); flex:none; } .code-panel-title{ display:flex; align-items:center; gap:10px; min-width:0; } .code-panel-icon{ flex:none; width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); } .code-panel-title-text{ min-width:0; } .code-panel-name{ font-size:14px; font-weight:600; color:var(--text); font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .code-panel-lang{ font-size:12px; color:var(--text-faint); } .code-panel-actions{ display:flex; gap:2px; flex:none; } .code-panel-body{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .code-panel-body pre{ margin:0; padding:16px 18px; min-height:100%; } .code-panel-body code{ font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace; font-size:13px; line-height:1.6; white-space:pre; color:var(--text); } /* Highlight.js-Farben aus den Code-Bloecken auch im Panel verwenden */ .code-panel-body .hljs-comment, .code-panel-body .hljs-quote{ color:#7a8394; font-style:italic; } .code-panel-body .hljs-keyword, .code-panel-body .hljs-doctag, .code-panel-body .hljs-formula{ color:#c678dd; } .code-panel-body .hljs-section, .code-panel-body .hljs-name, .code-panel-body .hljs-selector-tag, .code-panel-body .hljs-deletion, .code-panel-body .hljs-subst{ color:#e06c75; } .code-panel-body .hljs-literal{ color:#56b6c2; } .code-panel-body .hljs-string, .code-panel-body .hljs-regexp, .code-panel-body .hljs-addition, .code-panel-body .hljs-attribute, .code-panel-body .hljs-meta .hljs-string{ color:#98c379; } .code-panel-body .hljs-attr, .code-panel-body .hljs-variable, .code-panel-body .hljs-template-variable, .code-panel-body .hljs-type, .code-panel-body .hljs-selector-class, .code-panel-body .hljs-selector-attr, .code-panel-body .hljs-selector-pseudo, .code-panel-body .hljs-number{ color:#d19a66; } .code-panel-body .hljs-symbol, .code-panel-body .hljs-bullet, .code-panel-body .hljs-link, .code-panel-body .hljs-meta, .code-panel-body .hljs-selector-id, .code-panel-body .hljs-title{ color:#61aeee; } .code-panel-body .hljs-built_in, .code-panel-body .hljs-title.class_, .code-panel-body .hljs-class .hljs-title{ color:#e6c07b; } html[data-theme="light"] .code-panel-body .hljs-comment, html[data-theme="light"] .code-panel-body .hljs-quote{ color:#a0a1a7; } html[data-theme="light"] .code-panel-body .hljs-keyword, html[data-theme="light"] .code-panel-body .hljs-doctag{ color:#a626a4; } html[data-theme="light"] .code-panel-body .hljs-section, html[data-theme="light"] .code-panel-body .hljs-name, html[data-theme="light"] .code-panel-body .hljs-selector-tag{ color:#e45649; } html[data-theme="light"] .code-panel-body .hljs-string, html[data-theme="light"] .code-panel-body .hljs-attribute{ color:#50a14f; } html[data-theme="light"] .code-panel-body .hljs-attr, html[data-theme="light"] .code-panel-body .hljs-number, html[data-theme="light"] .code-panel-body .hljs-variable{ color:#986801; } html[data-theme="light"] .code-panel-body .hljs-title, html[data-theme="light"] .code-panel-body .hljs-meta{ color:#4078f2; } html[data-theme="light"] .code-panel-body .hljs-built_in{ color:#c18401; } /* ---------------------------------- Mobile ---------------------------------- */ @media (max-width:820px){ .sidebar{ position:fixed; z-index:30; height:100%; box-shadow:var(--shadow); } .sidebar.collapsed{ margin-left:-272px; } /* Von der kleinen Inline-Weiche in chat.php gesetzt, damit die Seitenleiste schon vorm ersten Frame eingeklappt ist statt erst per app.js zuzuklappen. */ html.sd-mobile-nav-collapsed .sidebar{ margin-left:-272px; } .suggestion-grid{ grid-template-columns:1fr; } .msg-bubble{ max-width:88%; } .code-panel{ width:100vw; max-width:100vw; } .code-panel-resizer{ display:none; } /* Auf dem Handy nimmt das Panel eh den ganzen Screen ein (Overlay mit Backdrop), daher .main hier nicht zusaetzlich einruecken. */ .main.panel-open{ padding-right:0; } .code-card{ max-width:100%; } /* Auf schmalen Screens nimmt das Panel die ganze Breite ein - hier macht ein dimmender, klick-schliessender Hintergrund wieder Sinn (anders als am Desktop, wo der Chat daneben sichtbar/nutzbar bleibt). */ .code-panel-backdrop.open{ opacity:1; pointer-events:auto; } /* Modell-Picker zieht nach oben links um (siehe app.js) - die reine Anzeige-Badge daneben wäre dann doppelt gemoppelt, also weg damit, und der Kamera-Button bekommt unten im Composer den frei gewordenen Platz. */ #providerBadge{ display:none; } .composer-camera{ display:flex; } /* Auf dem Handy gibt's kein Hover, also weg mit dem Papierkorb-Icon - Loeschen laeuft hier stattdessen ueber Long-Press (siehe app.js + .pressing). */ .conv-item .conv-del{ opacity:0 !important; pointer-events:none; } } /* ---- Diesen Block irgendwo in assets/css/style.css einfügen, z.B. direkt unter dem bestehenden ".md-block li::marker{...}" Block - rendert die neu unterstützten Markdown-Tabellen (siehe app.js) passend zum Theme. ---- */ .md-block{ overflow-x:auto; } /* falls eine Tabelle mal breiter ist als die Bubble */ .md-table{ width:100%; border-collapse:collapse; margin:4px 0 12px; font-size:13.6px; } .md-table th, .md-table td{ border:1px solid var(--border-soft); padding:7px 10px; text-align:left; vertical-align:top; } .md-table thead th{ background:var(--bg-input); font-weight:600; color:var(--text); } .md-table tbody tr:nth-child(even){ background:color-mix(in srgb, var(--text) 3%, transparent); } /* ========================================================================== PREMIUM / BILLING — Pricing, Checkout, Abo-Verwaltung, Zahlungen ========================================================================== */ .pricing-shell{ max-width: 760px; } .pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:28px 0 22px; } @media (max-width:640px){ .pricing-grid{ grid-template-columns:1fr; } } .pricing-card{ position:relative; background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px; padding:24px; display:flex; flex-direction:column; } .pricing-card.featured{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; } .pricing-card h2{ margin:0 0 6px; font-size:18px; } .pricing-badge{ position:absolute; top:-11px; left:20px; background:var(--accent); color:var(--accent-text); font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:3px 10px; border-radius:999px; } .price-tag{ font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:700; margin:6px 0 18px; } .price-tag span{ font-size:13px; font-weight:500; color:var(--text-dim); } .pricing-features{ list-style:none; margin:0 0 22px; padding:0; flex:1; } .pricing-features li{ font-size:13.5px; color:var(--text-dim); padding:7px 0 7px 22px; position:relative; border-top:1px solid var(--border-soft); } .pricing-features li:first-child{ border-top:none; } .pricing-features li::before{ content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700; } .pricing-disclaimer{ font-size:12.5px; color:var(--text-faint); line-height:1.6; margin-top:10px; } .pricing-disclaimer a{ color:var(--accent); } .checkout-shell{ max-width:560px; } .checkout-summary{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; padding:6px 18px; margin:22px 0 18px; } .checkout-summary-row{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--border-soft); font-size:13.5px; color:var(--text-dim); } .checkout-summary-row:first-child{ border-top:none; } .checkout-summary-row span:last-child{ text-align:right; } .checkout-summary-head{ color:var(--text); font-size:15px; } .checkout-summary-head strong{ font-weight:700; } .paypal-button-wrap{ margin:20px 0 8px; min-height:45px; position:relative; transition:opacity .2s; } .paypal-button-wrap.locked{ opacity:.4; pointer-events:none; } .checkout-fineprint{ font-size:12px; color:var(--text-faint); line-height:1.6; margin-top:18px; } .checkout-fineprint a{ color:var(--accent); } .checkout-result{ max-width:480px; text-align:center; } .checkout-result h1{ margin-bottom:8px; } .checkout-result .btn{ margin:6px 6px 0; } .sub-status-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; padding:6px 18px; } .sub-status-row{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--border-soft); font-size:13.5px; } .sub-status-row:first-child{ border-top:none; } .sub-status-row span{ color:var(--text-dim); } .sub-status-badge{ padding:2px 10px; border-radius:999px; font-size:12.5px; font-weight:600; } .sub-status-badge.ok{ background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); } .sub-status-badge.warn{ background:color-mix(in srgb, var(--danger) 18%, transparent); color:var(--danger); } .billing-table{ width:100%; border-collapse:collapse; margin-top:18px; font-size:13.5px; } .billing-table th{ text-align:left; color:var(--text-dim); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; padding:0 12px 10px; border-bottom:1px solid var(--border); } .billing-table td{ padding:12px; border-bottom:1px solid var(--border-soft); } .billing-table tr:last-child td{ border-bottom:none; } .billing-ref{ color:var(--text-faint); font-size:12px; font-family:monospace; } /* Freemium-Kontingent-Badge im Modell-Menü (z.B. "12/25" bei Sedna P1.0) */ .provider-quota-badge{ margin-left:auto; font-size:11px; font-weight:700; color:var(--text-dim); background:var(--bg-input); padding:2px 7px; border-radius:999px; flex:none; } /* ========================================================================== UPGRADE-MODAL — erscheint, wenn das Freemium-Kontingent aufgebraucht ist (wie bei ChatGPT/Claude "Limit erreicht"-Dialoge) ========================================================================== */ .upgrade-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; opacity:0; pointer-events:none; transition:opacity .18s; } .upgrade-overlay.open{ opacity:1; pointer-events:auto; } .upgrade-modal{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; padding:28px; max-width:400px; width:100%; text-align:center; transform:translateY(8px) scale(.98); transition:transform .18s; } .upgrade-overlay.open .upgrade-modal{ transform:translateY(0) scale(1); } .upgrade-modal-icon{ width:52px; height:52px; border-radius:50%; margin:0 auto 16px; background:color-mix(in srgb, var(--accent) 16%, transparent); display:flex; align-items:center; justify-content:center; color:var(--accent); } .upgrade-modal h2{ font-size:19px; margin:0 0 8px; } .upgrade-modal p{ font-size:13.8px; color:var(--text-dim); line-height:1.6; margin:0 0 6px; } .upgrade-modal .upgrade-reset-note{ font-size:12.5px; color:var(--text-faint); margin-bottom:20px; } .upgrade-modal .btn{ width:100%; margin-top:8px; } /* Plan-Karten im Settings-Billing-Tab: aktueller Plan bekommt einen ruhigeren Rahmen statt der Akzentfarbe */ .settings-pricing-grid{ margin-top:18px; } .pricing-card.current{ border-color:var(--border); box-shadow:none; } .pricing-card.current.featured{ border-color:var(--accent); } .pricing-badge.current-badge{ background:var(--text-dim); color:var(--bg); } .settings-quota-hint{ font-size:12px; color:var(--text-dim); background:var(--bg-input); border-radius:8px; padding:7px 10px; margin:-8px 0 0; } /* ========================================================================== DEVELOPER API — Portal-Seite + API-Key-Anzeige in den Einstellungen ========================================================================== */ .dev-shell{ max-width:720px; } .dev-shell h2{ margin-top:30px; font-size:17px; } .dev-shell h3{ margin:18px 0 6px; font-size:14px; color:var(--text-dim); } .dev-cta-box{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:14px; padding:20px; margin:20px 0 28px; text-align:center; } .dev-cta-box p{ margin:0 0 14px; color:var(--text-dim); font-size:13.8px; } .dev-key-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .dev-key-value{ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; } @media (max-width:640px){ .dev-key-value{ max-width:140px; } } /* ========================================================================== STAFF-PANEL ========================================================================== */ .staff-form{ max-width:420px; margin:14px 0 30px; } .btn-small{ padding:6px 12px; font-size:12.5px; } .staff-update-row{ display:flex; justify-content:space-between; gap:14px; align-items:flex-start; background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; flex-wrap:wrap; } .staff-update-meta{ font-size:11.5px; color:var(--text-faint); } .staff-shell{ max-width:880px; } .staff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0 34px; } .staff-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px; padding:22px; } .staff-card .staff-form{ max-width:none; margin:14px 0 0; } .staff-update-body{ flex:1 1 240px; min-width:0; } .staff-update-delete{ flex:none; } @media (max-width:760px){ .staff-grid{ grid-template-columns:1fr; } .staff-shell{ padding-left:16px; padding-right:16px; } } @media (max-width:480px){ .staff-card{ padding:16px; } .staff-update-row{ flex-direction:column; align-items:stretch; } .staff-update-delete{ align-self:flex-end; } } .staff-search-results{ position:absolute; left:0; right:0; top:100%; z-index:20; background:var(--bg-elevated); border:1px solid var(--border); border-radius:10px; margin-top:4px; max-height:220px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.25); } .staff-search-item{ padding:8px 12px; cursor:pointer; display:flex; flex-direction:column; gap:1px; } .staff-search-item:hover{ background:var(--bg-hover, rgba(255,255,255,.06)); } .staff-search-item strong{ font-size:13.5px; } .staff-search-item span{ font-size:12px; color:var(--text-dim); } /* Plan-Badge im Chat-Header (Free/Premium/Mitarbeiter) - sichtbar auf Handy & Desktop, da main-header nie eingeklappt wird */ .plan-badge{ margin-left:auto; font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:5px 11px; border-radius:999px; text-decoration:none; white-space:nowrap; transition:transform .12s ease, filter .12s ease; flex:none; } a.plan-badge:hover{ transform:translateY(-1px); filter:brightness(1.1); } .plan-badge-free{ background:var(--bg-input); color:var(--text-dim); border:1px solid var(--border); } .plan-badge-premium{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .plan-badge-staff{ background:color-mix(in srgb, #f5b642 20%, transparent); color:#f5b642; border:1px solid color-mix(in srgb, #f5b642 40%, transparent); } @media (max-width:480px){ .plan-badge{ font-size:10.5px; padding:4px 9px; } } /* Einmalige Klartext-Anzeige des API-Keys (Erstellung/Reset) */ .apikey-reveal-box{ background:var(--bg-input); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-top:14px; word-break:break-all; font-size:13px; font-family:'SF Mono',Consolas,monospace; text-align:left; }