/* ── FAB ── */
@keyframes chatFabPulse {
0% { box-shadow: 0 4px 20px rgba(42,52,61,0.30), 0 0 0 0 rgba(42,52,61,0.36); }
65% { box-shadow: 0 4px 20px rgba(42,52,61,0.30), 0 0 0 15px rgba(42,52,61,0); }
100% { box-shadow: 0 4px 20px rgba(42,52,61,0.30), 0 0 0 0 rgba(42,52,61,0); }
}
@keyframes chatFabEnter {
0% { opacity: 0; transform: scale(0.3) translateY(10px); }
55% { opacity: 1; transform: scale(1.16) translateY(-4px); }
78% { transform: scale(0.94) translateY(1px); }
100% { transform: scale(1) translateY(0); }
}
@keyframes chatFabWiggle {
0%,100% { transform: rotate(0) scale(1); }
15% { transform: rotate(-13deg) scale(1.07); }
30% { transform: rotate(10deg) scale(1.07); }
48% { transform: rotate(-7deg) scale(1.03); }
63% { transform: rotate(5deg); }
78% { transform: rotate(-3deg); }
}
@keyframes msgIn {
from { opacity: 0; transform: translateY(12px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes sendPop {
0% { transform: scale(1); }
28% { transform: scale(0.80); }
62% { transform: scale(1.12); }
100% { transform: scale(1); }
}
#chat-fab {
position: fixed;
bottom: 5.5rem;
right: 1.5rem;
width: 46px; height: 46px;
background: #2A343D;
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 9960;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(42,52,61,0.30), 0 1px 4px rgba(0,0,0,0.10);
transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), box-shadow 0.28s ease, background 0.25s ease;
outline: none;
animation: chatFabEnter 0.60s cubic-bezier(0.34,1.56,0.64,1) 0.7s both, chatFabPulse 2s ease-out 3.2s 1 both;
}
#chat-fab:hover {
transform: scale(1.09) translateY(-2px);
box-shadow: 0 10px 36px rgba(42,52,61,0.30);
}
#chat-fab.chat-is-open { background: #ede8f7; }
#ch-icon-open, #ch-icon-close {
position: absolute;
transition: opacity 0.20s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
#ch-icon-open { opacity: 1; transform: scale(1) rotate(0deg); }
#ch-icon-close { opacity: 0; transform: scale(0.45) rotate(-90deg); }
#chat-fab.chat-is-open #ch-icon-open { opacity: 0; transform: scale(0.45) rotate(90deg); }
#chat-fab.chat-is-open #ch-icon-close { opacity: 1; transform: scale(1) rotate(0deg); }
#chat-fab.fab-wiggle { animation: chatFabWiggle 0.55s ease !important; }
.ch-msg-header { display: block; margin-bottom: 3px; padding: 0 3px; }
.ch-msg-header-row { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ch-msg-label {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
color: #94a3b8; font-family: 'Inter', sans-serif;
margin: 0; padding: 0;
}
.ch-msg-header.ch-think-block { padding: 0 3px; }
.ch-msg-header.ch-think-block .ch-think-summary { font-size: 9.5px; padding: 0; opacity: 0.85; }
.ch-msg-header.ch-think-block[data-open="true"] .ch-think-summary { color: #675c8e; opacity: 1; }
.ch-msg-label img {
height: 11px; width: auto;
opacity: 0.45; flex-shrink: 0;
filter: saturate(0);
}
/* ── Window ── */
:root { --chat-sidebar-width: 420px; }
#chat-win {
position: fixed;
bottom: 10rem; right: 1.5rem;
width: min(390px, calc(100vw - 2rem));
height: 530px;
background: #fff;
border-radius: 1.75rem;
box-shadow:
0 36px 90px rgba(42,52,61,0.18),
0 8px 28px rgba(42,52,61,0.08),
0 0 0 1px rgba(42,52,61,0.055);
z-index: 9955;
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(20px) scale(0.96);
transform-origin: bottom right;
transition: opacity 0.40s cubic-bezier(0.16,1,0.3,1), transform 0.40s cubic-bezier(0.34,1.18,0.64,1);
}
#chat-win.chat-open { opacity: 1; pointer-events: auto; transform: none; }
/* Resize-Handle ist im Popup-Modus versteckt */
#ch-resize-handle { display: none; }
/* ═══════════════════════════════════════════════════════════════
DESKTOP SIDEBAR-MODUS — Chat als Spalte rechts, Website links
═══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
/* Transition liegt auf html IMMER — damit auch der Close-Weg
(Klasse wird entfernt) sauber animiert wird, nicht nur das Öffnen */
html {
transition: padding-right 0.45s cubic-bezier(0.22,1,0.36,1);
}
html.chat-sidebar-active {
padding-right: var(--chat-sidebar-width);
}
/* Fixed Header / Nav muss synchron mit-schrumpfen, sonst
überlappt sie den Chat oder bleibt unter der Resize-Linie hängen */
#main-nav {
right: 0; left: 0;
width: auto;
transition: right 0.45s cubic-bezier(0.22,1,0.36,1);
}
html.chat-sidebar-active #main-nav {
right: var(--chat-sidebar-width);
width: auto;
}
/* Andere fixed elemente auf der rechten Seite */
html.chat-sidebar-active #scroll-top-fab,
html.chat-sidebar-active #ck-fab {
transition: right 0.45s cubic-bezier(0.22,1,0.36,1);
right: calc(var(--chat-sidebar-width) + 1.5rem);
}
#scroll-top-fab, #ck-fab {
transition: right 0.45s cubic-bezier(0.22,1,0.36,1);
}
/* Sidebar-Styling hängt an chat-win selbst (nicht von html abgeleitet),
damit es die Schließ-Animation überlebt — sonst snappt die Geometrie
im Moment der Klassen-Entfernung und es ruckt. */
#chat-win.is-sidebar {
top: 0; right: 0; bottom: 0;
width: var(--chat-sidebar-width);
max-width: none;
height: 100vh;
border-radius: 0;
transform: translateX(20px);
transform-origin: center right;
/* Kein Schatten nach links — saubere Kante. Nur eine 1px Border-Linie. */
box-shadow: -1px 0 0 0 rgba(42,52,61,0.07);
}
#chat-win.is-sidebar.chat-open { transform: translateX(0); }
/* Innerer scroll-container: voll ausnutzen */
#chat-win.is-sidebar #chat-msgs { padding: 1.3rem 1.1rem; }
/* Resize-Handle sitzt INNERHALB an der linken Kante (chat-win hat overflow:hidden) */
#chat-win.is-sidebar #ch-resize-handle {
display: flex;
position: absolute;
left: 0; top: 0; bottom: 0;
width: 10px;
cursor: ew-resize;
z-index: 9960;
align-items: center; justify-content: center;
background: transparent;
transition: background 0.2s ease;
user-select: none;
}
#chat-win.is-sidebar #ch-resize-handle::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 1px;
background: rgba(42,52,61,0.07);
transition: background 0.2s ease, width 0.18s ease;
}
#chat-win.is-sidebar #ch-resize-handle:hover::before,
#chat-win.is-sidebar #ch-resize-handle.is-dragging::before {
background: #675c8e;
width: 2px;
}
#chat-win.is-sidebar .ch-resize-grip {
position: relative;
width: 18px; height: 28px;
background: #fff;
border: 1px solid rgba(42,52,61,0.09);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
color: #b0b8bf;
opacity: 0;
transform: translateX(2px);
transition: opacity 0.22s ease, color 0.18s ease, transform 0.22s ease, border-color 0.18s ease;
pointer-events: none;
}
#chat-win.is-sidebar #ch-resize-handle:hover .ch-resize-grip,
#chat-win.is-sidebar #ch-resize-handle.is-dragging .ch-resize-grip {
opacity: 1; transform: translateX(0); color: #675c8e;
border-color: rgba(103,92,142,0.4);
}
/* Während Drag: kein Text-Select, globaler Cursor, Transition aus */
html.chat-resizing,
html.chat-resizing body { user-select: none !important; cursor: ew-resize !important; }
html.chat-resizing { transition: none !important; }
html.chat-resizing #chat-win { transition: none !important; }
/* FAB versteckt sich im Sidebar-Modus (Schließen via Header-X) */
html.chat-sidebar-active #chat-fab { display: none; }
/* ── Chat-Header matched den Website-Header (#main-nav) — gleiche Höhe,
gleicher Look, gleiche Compact-Logik. Die Höhe wird live per JS aus
#main-nav gelesen und in --nav-h gespeichert (siehe unten). */
#chat-win.is-sidebar #chat-hdr {
background: rgba(244,245,247,0.82);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 1px 0 rgba(42,52,61,0.05);
/* Höhe == Website-Header. JS füllt --nav-h dynamisch (Default-Fallback 73px). */
height: var(--nav-h, 73px);
min-height: var(--nav-h, 73px);
padding: 0 1.2rem;
transition: height 0.45s ease, min-height 0.45s ease;
}
/* Sidebar-Mode: derselbe helle Look wie Popup, nur Badge-Ring matched die Glas-Tönung */
#chat-win.is-sidebar .ch-hdr-icon-badge {
box-shadow: 0 0 0 2px #f4f5f7;
}
/* Menü-Buttons im Header (Mute etc.) ebenfalls anpassen */
#chat-win.is-sidebar .ch-menu-btn {
color: rgba(42,52,61,0.55);
}
#chat-win.is-sidebar .ch-menu-btn:hover {
color: #2A343D;
background: rgba(42,52,61,0.06);
}
/* Dropdown-Menu (Mute, etc.) ebenfalls auf hell umstellen für volle Harmonie */
#chat-win.is-sidebar #ch-menu {
background: rgba(255,255,255,0.96);
border: 1px solid rgba(42,52,61,0.08);
box-shadow: 0 8px 24px rgba(42,52,61,0.10), 0 1px 3px rgba(42,52,61,0.04);
}
#chat-win.is-sidebar #ch-menu .ch-menu-btn {
color: rgba(42,52,61,0.7);
}
#chat-win.is-sidebar #ch-menu .ch-menu-btn:hover {
background: rgba(42,52,61,0.05);
color: #2A343D;
}
}
@media (max-width: 500px) {
/* Body-Scroll-Lock wenn Mobile-Sheet offen — verhindert Hintergrund-Scroll */
body.chat-active { overflow: hidden; overscroll-behavior: contain; touch-action: none; }
/* Mobile Sheet — Full-Bleed bis ganz nach oben, mit Safe-Area-Padding für Notch */
#chat-win {
top: 0; bottom: 0; right: 0; left: 0;
width: 100vw;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
transform-origin: bottom center;
/* Sanftes Slide-Up beim Öffnen (statt scale) — modern wie iOS/Android Sheets */
transform: translateY(24px);
box-shadow: 0 -8px 32px rgba(0,0,0,0.08);
}
#chat-win.chat-open { transform: translateY(0); }
/* Header bekommt Safe-Area-Padding für Notch / Status-Bar */
#chat-hdr {
padding-top: calc(env(safe-area-inset-top, 0px) + 0.85rem) !important;
}
/* Bottom-Bereich respektiert Home-Indicator (iOS) */
#ch-input-row {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.6rem) !important;
}
#ch-powered {
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
/* Drag-Handle oben am Sheet — modernes mobiles Pattern (Apple/Material) */
#chat-win::before {
content: '';
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 6px);
left: 50%;
transform: translateX(-50%);
width: 36px; height: 4px;
background: rgba(255,255,255,0.28);
border-radius: 2px;
z-index: 2;
pointer-events: none;
}
#chat-fab { bottom: 5rem; right: 1.5rem; }
#scroll-top-fab { bottom: 8.5rem; right: 1.5rem; }
}
/* ── Scroll-to-top FAB ── */
#scroll-top-fab {
position: fixed;
bottom: 9.5rem;
right: 1.5rem;
width: 46px; height: 46px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 9955;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 14px rgba(42,52,61,0.13), 0 1px 3px rgba(0,0,0,0.07);
opacity: 0;
transform: translateY(14px) scale(0.80);
pointer-events: none;
transition: opacity 0.36s cubic-bezier(0.16,1,0.3,1),
transform 0.36s cubic-bezier(0.16,1,0.3,1),
box-shadow 0.22s ease;
outline: none;
}
#scroll-top-fab.sct-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
#scroll-top-fab:hover {
transform: scale(1.09) translateY(-2px) !important;
box-shadow: 0 6px 22px rgba(42,52,61,0.20);
}
#scroll-top-fab:active { transform: scale(0.94) !important; }
/* Progress ring */
#sct-ring {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
pointer-events: none;
}
#sct-ring .sct-track {
fill: none;
stroke: rgba(103,92,142,0.18);
stroke-width: 2.5;
}
#sct-ring .sct-fill {
fill: none;
stroke: #675c8e;
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 136.659;
stroke-dashoffset: 136.659;
transition: stroke-dashoffset 0.18s ease;
}
/* ══════ Chat-Header — hell auf Desktop UND Mobile, Lucide-Icon-Toolbar ══════ */
#chat-hdr {
background: #ffffff;
padding: 0.55rem 0.75rem;
display: flex; align-items: center; justify-content: space-between;
gap: 0.5rem;
flex-shrink: 0;
border-bottom: 1px solid rgba(42,52,61,0.08);
min-height: 56px;
}
#chat-hdr-left {
display: flex; align-items: center;
min-width: 0;
flex: 0 0 auto;
/* Bewusst leer — schafft Platz für die Toolbar-Rhythmik rechts */
}
#chat-hdr-toolbar {
display: inline-flex; align-items: center;
gap: 2px;
flex-shrink: 0;
margin-left: auto;
}
/* Icon-Buttons */
.ch-hdr-icon {
position: relative;
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: none;
border-radius: 10px;
color: #5a6b7a;
cursor: pointer;
transition: background 0.18s ease,
color 0.18s ease,
transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
-webkit-tap-highlight-color: transparent;
}
.ch-hdr-icon:hover {
background: rgba(42,52,61,0.07);
color: #1a1f24;
}
.ch-hdr-icon:active {
transform: scale(0.92);
background: rgba(42,52,61,0.11);
}
.ch-hdr-icon:focus-visible {
outline: 2px solid rgba(71,106,111,0.55);
outline-offset: 1px;
}
.ch-hdr-icon svg, .ch-hdr-icon i {
display: block;
pointer-events: none;
stroke-width: 2;
}
/* Lucide-i Elemente bekommen vor dem Replace die richtige Größe */
.ch-hdr-icon-svg { display: block; flex-shrink: 0; }
/* Mute-Active-State: stumm geschaltet → leicht abgesoftet */
.ch-hdr-icon[aria-pressed="true"] {
background: rgba(42,52,61,0.05);
color: rgba(42,52,61,0.40);
}
/* Badge oben rechts — Audit-History-Counter */
.ch-hdr-icon-badge {
position: absolute;
top: 1px; right: 1px;
min-width: 16px; height: 16px;
padding: 0 4px;
background: #ff893f;
color: #fff;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 9.5px;
font-weight: 800;
line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 2px #ffffff;
pointer-events: none;
letter-spacing: 0;
}
/* Trenner zwischen Toolbar-Gruppe und Close-Button */
.ch-hdr-divider {
width: 1px; height: 20px;
background: rgba(42,52,61,0.12);
margin: 0 6px;
flex-shrink: 0;
}
/* Screen-Reader-only Label (für Mute-Text) */
.ch-hdr-sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
body.chat-active #chat-fab,
body.chat-active #ck-fab { z-index: 9940 !important; }
/* Close-Button: rotes Hover-Akzent */
.ch-hdr-icon--close:hover {
background: rgba(239,68,68,0.10);
color: #dc2626;
}
/* Legacy: alte Klassen aus dem HTML entfernt — falls noch referenziert, neutralisieren */
#chat-av, #chat-hdr-name, #chat-hdr-status, #ch-online-badge,
.ch-hdr-status-pill, .ch-status-dot, .ch-status-label { display: none !important; }
/* Alte Dark-Mode-Styles für #chat-hdr-close entfernt — der neue Button trägt
.ch-hdr-icon + .ch-hdr-icon--close Klassen und erbt das saubere Helle-Theme. */
/* ── Messages ── */
#chat-msgs {
flex: 1; overflow-y: auto;
padding: 1.1rem 1rem;
/* Fallback (PNG) zuerst, dann WebP via image-set für moderne Browser */
background: linear-gradient(rgba(244,245,247,0.65), rgba(244,245,247,0.65)), url('/img/chatbackground.png') center center / cover;
background: linear-gradient(rgba(244,245,247,0.65), rgba(244,245,247,0.65)), image-set(url('/img/chatbackground.webp') type('image/webp'), url('/img/chatbackground.png') type('image/png')) center center / cover;
display: flex; flex-direction: column; gap: 0.55rem;
scrollbar-width: thin; scrollbar-color: #d1d5db transparent;
}
#chat-msgs::-webkit-scrollbar { width: 3px; }
#chat-msgs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.ch-msg {
display: flex; flex-direction: column;
max-width: 83%;
}
.ch-msg.user { align-self: flex-end; align-items: flex-end; }
.ch-msg.ai { align-self: flex-start; align-items: flex-start; }
/* ── Message-Entry-Animationen: Direction-aware Premium Reveal.
User-Bubbles kommen leicht von rechts (Send-Richtung), AI-Bubbles
steigen sanft auf. Beide auf Spring-Easing für lebendigen, premium
Charakter — GPU-only (nur opacity + transform). */
.ch-msg.user {
animation: chUserMsgIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
transform-origin: 100% 50%;
}
@keyframes chUserMsgIn {
from { opacity: 0; transform: translate3d(14px, 6px, 0) scale(0.94); }
55% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.012); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* Die User-Bubble selbst bekommt einen Mikro-Press-Effekt (kommt von der Send-Aktion) */
.ch-msg.user .ch-bubble {
animation: chUserBubblePress 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
transform-origin: 100% 100%;
}
@keyframes chUserBubblePress {
from { transform: scale(0.92); }
50% { transform: scale(1.018); }
to { transform: scale(1); }
}
.ch-msg.ai {
animation: chAiMsgIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
transform-origin: 0% 50%;
}
@keyframes chAiMsgIn {
from { opacity: 0; transform: translate3d(-4px, 6px, 0) scale(0.97); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.ch-msg--restored,
.ch-msg--restored .ch-bubble { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
.ch-msg.user, .ch-msg.ai,
.ch-msg.user .ch-bubble {
animation: chMsgReducedFade 180ms ease-out both;
transform: none;
}
@keyframes chMsgReducedFade { from { opacity: 0; } to { opacity: 1; } }
}
#ch-send:active { animation: sendPop 0.26s cubic-bezier(0.34,1.56,0.64,1); }
.ch-bubble {
padding: 0.6rem 0.9rem;
font-family: 'Inter', sans-serif;
font-size: 0.84rem; line-height: 1.58;
word-break: break-word;
}
/* Während Streaming: Bubble lebt auf eigener GPU-Layer → Text-Updates
triggern keinen Repaint des Chat-Hintergrunds, der Avatare etc.
Massiver Smoothness-Gewinn bei großem Chatverlauf. */
.ch-bubble.is-streaming {
transform: translateZ(0);
contain: layout style;
}
.ch-bubble strong { font-weight: 600; }
.ch-bubble em { font-style: italic; }
.ch-bubble code { background: rgba(42,52,61,0.08); padding: 1px 5px; border-radius: 3px; font-size: .82em; font-family: monospace; }
/* Markdown headings */
.ch-h1 { display:block; font-size:1rem; font-weight:800; color:#2A343D; margin:8px 0 2px; letter-spacing:-0.01em; }
.ch-h2 { display:block; font-size:0.93rem; font-weight:700; color:#2A343D; margin:6px 0 2px; }
.ch-h3 { display:block; font-size:0.87rem; font-weight:700; color:#476A6F; margin:5px 0 1px; text-transform:uppercase; letter-spacing:0.04em; }
/* Markdown lists */
.ch-li { display:block; padding-left:.9em; text-indent:-.7em; }
.ch-oli { display:block; padding-left:1.4em; text-indent:-1.1em; }
/* Code block */
.ch-code-block { background:#f4f5f7; border-radius:10px; padding:11px 14px; margin:6px 0; overflow-x:auto; font-family:monospace; font-size:0.78rem; line-height:1.55; color:#2A343D; border-left:3px solid #476A6F; white-space:pre; display:block; }
.ch-code-block code { background:none; padding:0; font-size:inherit; }
/* ── Gedankengang ── */
.ch-think-block { margin: 0; }
.ch-thinking-txt {
font-family: 'Inter', sans-serif; font-size: 0.77rem; font-weight: 500; letter-spacing: 0.02em;
background: linear-gradient(90deg, #8faab8 0%, #c5dae6 38%, #8faab8 70%, #c5dae6 100%);
background-size: 250% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
animation: chShimmer 2.2s ease-in-out infinite;
}
/* ══════ Live-Thinking-Stream (Enterprise-Style wie Claude / o1) ══════ */
.ch-thinking-live {
display: flex; flex-direction: column; gap: 6px;
padding: 2px 0;
animation: chThinkFadeIn 0.28s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes chThinkFadeIn {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
.ch-thinking-header {
display: inline-flex; align-items: center; gap: 7px;
font-family: 'Inter', sans-serif;
font-size: 11.5px; font-weight: 600;
color: #6b7a87; letter-spacing: 0.02em;
}
.ch-thinking-header .ch-thinking-pulse {
width: 6px; height: 6px; border-radius: 50%;
background: #94a3b8;
animation: chThinkPulse 1.3s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes chThinkPulse {
0%, 100% { opacity: 0.4; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
.ch-thinking-title {
background: linear-gradient(90deg, #6b7a87 0%, #aebdc9 50%, #6b7a87 100%);
background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: chShimmer 2.4s ease-in-out infinite;
}
.ch-thinking-elapsed {
font-size: 10.5px; font-weight: 500;
color: #b0bec5; font-variant-numeric: tabular-nums;
}
.ch-thinking-stream-wrap {
position: relative;
max-height: 84px;
overflow-y: auto; overflow-x: hidden;
border-left: 2px solid rgba(148,163,184,0.25);
padding: 2px 0 2px 10px;
margin-top: 2px;
scrollbar-width: none; -ms-overflow-style: none;
}
.ch-thinking-stream-wrap::-webkit-scrollbar { display: none; }
/* Soft Fade-Mask oben — so wirkt es als würde Text "von unten" hineinfließen */
.ch-thinking-stream-wrap::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0; height: 26px;
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
pointer-events: none; z-index: 2;
}
.ch-thinking-stream {
font-family: 'Inter', sans-serif;
font-size: 11.5px; line-height: 1.55;
color: #94a3b8;
white-space: pre-wrap; word-wrap: break-word;
font-variant-ligatures: none;
}
/* Wenn Bubble in einer hellen Bubble-Bg liegt, Mask anpassen */
.ch-msg.ai .ch-bubble .ch-thinking-stream-wrap::before {
background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%);
}
/* ── Wort-für-Wort Premium-Reveal — GPU-only (opacity + transform).
Nutzt nur Compositor-Properties: keine Repaints, keine Layout-Reflows.
Subtile Scale (0.94 → 1.0) gibt jedem Wort einen "atmenden" Anflug,
kombiniert mit Lift (3px → 0). Auf 360ms cubic-bezier(0.16, 1, 0.3, 1)
— Apple-Style "spring-out" Easing für premium-organisches Gefühl. */
.ch-tw-word, .ch-tw-tail {
display: inline-block;
opacity: 0;
transform: translate3d(0, 3px, 0) scale(0.94);
transform-origin: 50% 100%;
animation: chWordSoftIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
will-change: opacity, transform;
}
.ch-tw-tail { animation-duration: 280ms; }
@keyframes chWordSoftIn {
from { opacity: 0; transform: translate3d(0, 3px, 0) scale(0.94); }
60% { opacity: 0.85; transform: translate3d(0, 0, 0) scale(1.005); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.ch-live-stream {
white-space: pre-wrap;
word-wrap: break-word;
font-variant-ligatures: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Layout-Isolation: Bubble reflowt unabhängig vom Rest der Seite */
contain: content;
}
/* Finaler Markdown-Swap: simple opacity Cross-Fade, kein Blur */
.ch-msg.ai .ch-bubble .ch-md-final {
animation: chMdFinalSwap 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes chMdFinalSwap {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ch-tw-word, .ch-tw-tail, .ch-msg.ai .ch-bubble .ch-md-final {
animation: chReducedFade 160ms ease-out both;
transform: none;
}
@keyframes chReducedFade { from { opacity: 0; } to { opacity: 1; } }
}
/* Kein Caret — die Wort-für-Wort-Einblendung ist das Signal */
.ch-think-summary { display:inline-flex; align-items:center; gap:5px; color:#b0bec5; font-size:0.67rem; font-weight:600; font-family:'Inter',sans-serif; letter-spacing:0.06em; text-transform:uppercase; transition:color 0.18s ease; cursor:pointer; background:none; border:none; padding:2px 0; outline:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.ch-think-summary:hover { color:#7c8fa0; }
.ch-think-chevron { width:9px; height:9px; flex-shrink:0; transition:transform 0.32s cubic-bezier(0.34,1.56,0.64,1); }
.ch-think-block[data-open="true"] .ch-think-chevron { transform:rotate(90deg); }
.ch-think-wrap { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows 0.36s cubic-bezier(0.4,0,0.2,1), opacity 0.24s ease-out, margin-top 0.32s cubic-bezier(0.4,0,0.2,1); margin-top:0; }
.ch-think-block[data-open="true"] .ch-think-wrap { grid-template-rows:1fr; opacity:1; margin-top:7px; }
.ch-think-wrap > .ch-think-body { overflow:hidden; min-height:0; }
.ch-think-body { padding:4px 0 4px 12px; border-left:1.5px solid #e8ecf0; font-size:0.74rem; color:#8a99a8; line-height:1.65; font-family:'Inter',sans-serif; word-break:break-word; }
.ch-think-body p { margin: 0 0 6px; } .ch-think-body p:last-child { margin-bottom: 0; }
.ch-think-body strong { color:#5a6b7a; font-weight:600; }
.ch-think-body em { color:#7a8a99; }
.ch-think-body code { background:#f0f3f6; color:#5a6b7a; padding:1px 5px; border-radius:4px; font-size:0.93em; }
/* Table */
.ch-md-table { width:100%; border-collapse:collapse; margin:7px 0; font-size:0.8rem; border-radius:10px; overflow:hidden; }
.ch-md-table th { background:#2A343D; color:#fff; padding:7px 11px; text-align:left; font-weight:700; font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; }
.ch-md-table td { padding:7px 11px; border-bottom:1px solid #f1f5f9; color:#1a1f24; }
.ch-md-table tr:last-child td { border-bottom:none; }
.ch-md-table tr:nth-child(even) td { background:#f8f9fa; }
/* ── Suggestion chips — Modern Cards mit Greeting (Brand Lila #675c8e) ── */
#ch-suggestions {
display: flex; flex-direction: column; gap: 10px;
padding: 4px 2px 10px; align-self: stretch; width: 100%;
}
/* ── Intro: Brand-Badge + Greeting ── */
.ch-sugg-intro {
padding: 2px 4px 4px;
opacity: 0; transform: translateY(-4px);
animation: chSuggIntroIn 0.5s cubic-bezier(0.22,1,0.36,1) 60ms forwards;
}
@keyframes chSuggIntroIn { to { opacity: 1; transform: translateY(0); } }
.ch-sugg-brand {
display: inline-flex; align-items: center; gap: 4px;
font-family: 'Inter', sans-serif;
font-size: 0.78rem; font-weight: 600;
color: #2A343D;
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.ch-sugg-brand-logo {
width: 18px; height: 18px;
object-fit: contain;
border-radius: 4px;
flex-shrink: 0;
margin-right: 3px;
}
.ch-sugg-brand-badge {
font-size: 0.56rem; font-weight: 800;
background: #675c8e;
color: #fff;
padding: 3px 8px;
border-radius: 5px;
letter-spacing: 0.10em; text-transform: uppercase;
display: inline-block;
line-height: 1.4;
margin-left: 2px;
}
.ch-sugg-greeting {
font-family: 'Inter', sans-serif;
font-size: 1.28rem; font-weight: 700;
color: #675c8e;
line-height: 1.2;
letter-spacing: -0.022em;
margin: 0 0 5px;
}
.ch-sugg-greeting-sub {
font-family: 'Inter', sans-serif;
font-size: 0.78rem; color: #8a94a3;
line-height: 1.45;
margin: 0 0 6px;
}
/* ── Cards ── */
.ch-sugg-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ch-sugg {
display: flex; align-items: center; gap: 10px;
padding: 14px 13px 14px 15px;
background: #fff;
border: none;
border-radius: 14px;
cursor: pointer;
font-family: 'Inter', sans-serif;
text-align: left;
transition: background 0.28s cubic-bezier(0.22,1,0.36,1),
transform 0.28s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.28s;
box-shadow: 0 1px 2px rgba(103,92,142,0.05),
0 2px 8px rgba(103,92,142,0.07);
opacity: 0; transform: translateY(6px);
animation: chSuggIn 0.46s cubic-bezier(0.22,1,0.36,1) forwards;
animation-delay: calc(var(--i, 0) * 55ms + 160ms);
position: relative; min-width: 0;
}
@keyframes chSuggIn {
to { opacity: 1; transform: translateY(0); }
}
.ch-sugg:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(103,92,142,0.06),
0 10px 24px rgba(103,92,142,0.16);
}
.ch-sugg:active { transform: translateY(0); transition-duration: 0.08s; }
.ch-sugg-text {
flex: 1; min-width: 0;
font-size: 0.82rem; font-weight: 500;
color: #675c8e; line-height: 1.32;
letter-spacing: -0.005em;
}
.ch-sugg-text strong { font-weight: 700; color: #675c8e; }
.ch-sugg-arrow {
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
color: rgba(103,92,142,0.5);
transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), color 0.24s;
}
.ch-sugg:hover .ch-sugg-arrow {
color: #675c8e;
transform: translateX(4px);
}
/* ── Featured Card: full-width, zarter Lila-Gradient + Sparkle ── */
.ch-sugg--featured {
padding: 15px 15px;
gap: 11px;
background: linear-gradient(135deg, #ffffff 0%, #f6f3fb 100%);
box-shadow: 0 1px 2px rgba(103,92,142,0.08),
0 4px 14px rgba(103,92,142,0.10);
}
.ch-sugg--featured:hover {
background: linear-gradient(135deg, #fefcff 0%, #efe9f8 100%);
box-shadow: 0 2px 4px rgba(103,92,142,0.10),
0 12px 30px rgba(103,92,142,0.22);
}
.ch-sugg--featured .ch-sugg-ico {
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
width: 26px; height: 26px;
color: #675c8e;
transition: transform 0.34s cubic-bezier(0.22,1,0.36,1);
}
.ch-sugg--featured:hover .ch-sugg-ico {
transform: scale(1.12) rotate(-8deg);
}
.ch-sugg--featured .ch-sugg-text { font-size: 0.84rem; }
.ch-msg.user .ch-bubble {
background: #675c8e; color: #fff;
border-radius: 1.1rem 1.1rem 0.28rem 1.1rem;
}
.ch-msg.ai .ch-bubble {
background: transparent; color: #1a1f24;
border-radius: 0;
box-shadow: none;
padding: 0.2rem 0.3rem;
font-size: 0.93rem;
line-height: 1.65;
}
.ch-time {
font-size: 10px; color: #94a3b8;
padding: 0 3px;
font-family: 'Inter', sans-serif;
}
/* ── Typing ── */
#ch-typing { align-self: flex-start; display: none; animation: msgIn 0.30s cubic-bezier(0.16,1,0.3,1) both; padding: 4px 2px; }
#ch-typing.show { display: flex; align-items: center; gap: 5px; }
.ch-thinking-text {
font-family: 'Inter', sans-serif;
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.01em;
background: linear-gradient(90deg, #7fa4b8 0%, #cddde8 35%, #7fa4b8 65%, #cddde8 100%);
background-size: 250% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: chShimmer 2.0s ease-in-out infinite;
}
@keyframes chShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.ch-thinking-dots { display: inline-flex; align-items: center; gap: 4px; line-height: 1; vertical-align: middle; }
.ch-dot { width: 5px; height: 5px; background: #a8c0ce; border-radius: 50%; flex-shrink: 0; animation: chPulse 1.3s cubic-bezier(0.4,0,0.2,1) infinite; }
.ch-skel-line {
height: 7px; border-radius: 6px; margin-bottom: 9px;
background: linear-gradient(90deg, #eef1f5 0%, #f6f8fa 40%, #e4eaef 60%, #eef1f5 100%);
background-size: 300% 100%;
animation: chShimmer 1.7s ease-in-out infinite;
}
.ch-skel-line:last-child { margin-bottom: 0; }
.ch-bubble--loading {
min-height: 56px;
transition: opacity 0.18s ease;
}
.ch-dot:nth-child(1){animation-delay:0s}
.ch-dot:nth-child(2){animation-delay:0.18s}
.ch-dot:nth-child(3){animation-delay:0.36s}
@keyframes chPulse {
0%,100% { transform:scale(0.7); opacity:0.35; background:#a8c0ce; box-shadow:none; }
45% { transform:scale(1.15); opacity:1; background:#476A6F; box-shadow:0 0 8px rgba(71,106,111,0.38); }
}
/* ── Input ── */
#ch-input-row {
padding: 0.8rem 0.875rem;
background: #fff;
border-top: 1px solid rgba(42,52,61,0.07);
display: flex; align-items: flex-end; gap: 0.5rem;
flex-shrink: 0;
}
/* #ch-input styles moved to Feature: Auto-expanding textarea section */
#ch-send {
width: 42px; height: 42px;
background: #ede8f7;
border: none; border-radius: 0.75rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background 0.2s, transform 0.2s;
}
#ch-send:hover { background: #dcd2ed; transform: scale(1.07); }
#ch-send:disabled { background: #e2e8f0; cursor: not-allowed; transform: none; }
/* Stop-Modus: aktiver Stream → Button wird zum Stopp-Quadrat */
#ch-send.is-streaming {
background: #ede8f7;
cursor: pointer;
}
#ch-send.is-streaming:hover { background: #dcd2ed; transform: scale(1.07); }
#ch-send.is-streaming:disabled { background: #ede8f7; cursor: pointer; opacity: 1; transform: none; }
#ch-send .ch-send-stop {
width: 11px; height: 11px;
background: #675c8e;
border-radius: 2.5px;
display: block;
}
/* Live-Elapsed-Counter im Typing-Indikator — nur bei Waits >3s sichtbar */
.ch-typing-elapsed {
font-size: 10.5px; color: #9ca3af;
font-variant-numeric: tabular-nums;
margin-left: 4px; opacity: 0;
transition: opacity 0.4s ease;
}
.ch-typing-elapsed.show { opacity: 1; }
/* Neue-Inhalte-Indikator — erscheint wenn User während Streaming hochgescrollt hat */
#ch-resume-scroll {
align-self: center;
max-height: 0; overflow: hidden;
opacity: 0; pointer-events: none;
background: #1a1f24; color: #fff;
border: none; border-radius: 2rem;
padding: 0 13px;
font-size: 11.5px; font-family: 'Inter', sans-serif; font-weight: 500;
cursor: pointer; display: flex; align-items: center; gap: 5px;
transition: max-height 0.30s cubic-bezier(0.16,1,0.3,1), opacity 0.22s ease, padding 0.28s ease, margin 0.28s ease;
box-shadow: 0 3px 12px rgba(0,0,0,0.22);
white-space: nowrap; margin: 0 auto;
}
#ch-resume-scroll.show {
max-height: 34px; opacity: 1; pointer-events: auto;
padding: 5px 13px 5px 10px; margin: 4px auto 2px;
}
#ch-resume-scroll:hover { background: #2a323a; }
#ch-resume-scroll svg { animation: chBounceArrow 1.4s ease-in-out infinite; }
@keyframes chBounceArrow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(2px); }
}
/* Stop-Button Tooltip */
#ch-send.is-streaming::after {
content: 'Stoppen (Esc)';
position: absolute;
bottom: calc(100% + 6px); right: 0;
background: #1a1f24; color: #fff;
padding: 4px 8px; border-radius: 5px;
font-size: 10.5px; font-weight: 500;
white-space: nowrap; pointer-events: none;
opacity: 0; transform: translateY(2px);
transition: opacity 0.18s, transform 0.18s;
}
#ch-send.is-streaming:hover::after { opacity: 1; transform: translateY(0); }
#ch-send { position: relative; }
/* Resume-Prompt — erscheint nur wenn alte Session vorhanden & "kalt" (>10 Min) */
#ch-resume-prompt {
display: none; flex-direction: column; gap: 8px;
margin: 6px 12px 0;
padding: 10px 12px;
background: linear-gradient(180deg, #f4f0fa 0%, #fff 100%);
border: 1px solid rgba(103,92,142,0.22);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(26,31,36,0.05);
animation: chResumeIn 0.32s cubic-bezier(0.16,1,0.3,1) both;
}
#ch-resume-prompt.show { display: flex; }
@keyframes chResumeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.ch-resume-prompt-head {
display: flex; align-items: center; gap: 9px;
color: #675c8e;
}
.ch-resume-prompt-body { flex: 1; min-width: 0; }
.ch-resume-prompt-title {
font-size: 13px; font-weight: 600; color: #1a1f24;
font-family: 'Inter', sans-serif; line-height: 1.3;
}
.ch-resume-prompt-sub {
font-size: 11px; color: #6b7280;
font-variant-numeric: tabular-nums;
margin-top: 1px;
}
.ch-resume-prompt-actions {
display: flex; gap: 6px; justify-content: flex-end;
}
.ch-resume-btn {
font-family: 'Inter', sans-serif;
font-size: 12px; font-weight: 500;
padding: 6px 12px; border-radius: 7px;
cursor: pointer; border: none;
transition: background 0.18s, transform 0.18s;
}
.ch-resume-btn--ghost {
background: transparent; color: #6b7280;
}
.ch-resume-btn--ghost:hover { background: rgba(0,0,0,0.04); color: #1a1f24; }
.ch-resume-btn--primary {
background: #1a1f24; color: #fff;
}
.ch-resume-btn--primary:hover { background: #2a323a; transform: translateY(-1px); }
/* Gestrichelter Session-Separator — visuelle Trennung "hier geht's weiter" */
.ch-session-divider {
display: flex; align-items: center; gap: 10px;
margin: 14px 4px 6px;
color: #9ca3af; font-size: 10.5px; font-weight: 500;
font-family: 'Inter', sans-serif;
text-transform: uppercase; letter-spacing: 0.08em;
animation: chDividerIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
.ch-session-divider::before,
.ch-session-divider::after {
content: ''; flex: 1; height: 0;
border-top: 1px dashed rgba(156,163,175,0.55);
}
@keyframes chDividerIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* "Gestoppt"-Badge — minimal, rahmenlos, inline unter der Bubble */
.ch-stopped-badge {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 500;
color: #6b7280; letter-spacing: 0.01em;
margin-top: 4px; padding: 0;
background: none; border: none;
opacity: 0; animation: chBadgeFade 0.32s ease forwards;
}
.ch-stopped-badge svg { color: #9ca3af; flex-shrink: 0; }
@keyframes chBadgeFade { to { opacity: 1; } }
/* ── Attach button (embedded inside input wrap) ── */
#ch-attach-btn {
flex-shrink: 0; width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
background: none; border: none; cursor: pointer; color: #b8c5cd;
transition: color 0.18s, background 0.18s; padding: 0;
border-radius: 50%;
}
#ch-attach-btn:hover { color: #476A6F; background: rgba(71,106,111,0.06); }
#ch-attach-btn.has-file { color: #476A6F; }
/* ══════ Mic-Button + Voice-Recording (Enterprise App-Feel) ══════ */
#ch-mic-btn {
position: relative;
flex-shrink: 0;
width: 36px; height: 36px;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #476A6F;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1), border-radius 0.2s ease;
}
#ch-mic-btn:hover {
background: rgba(71,106,111,0.08);
color: #2A343D;
transform: translateY(-1px);
}
#ch-mic-btn:active { transform: translateY(0) scale(0.96); }
#ch-mic-btn .ch-mic-icon-idle { display: block; }
#ch-mic-btn .ch-mic-icon-stop { display: none; }
/* Recording-Modus: Mic-Button = Bestätigungs-Button (ähnlich Send-Button) */
#ch-input-row.is-recording #ch-mic-btn {
background: #ede8f7;
color: #675c8e;
border-radius: 0.75rem;
}
#ch-input-row.is-recording #ch-mic-btn:hover {
background: #dcd2ed;
transform: scale(1.07);
}
#ch-input-row.is-recording #ch-mic-btn .ch-mic-icon-idle { display: none; }
#ch-input-row.is-recording #ch-mic-btn .ch-mic-icon-stop {
display: block;
animation: chMicStopIn 0.32s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes chMicStopIn {
from { opacity: 0; transform: scale(0.6) rotate(-45deg); }
to { opacity: 1; transform: scale(1) rotate(0); }
}
/* Während Recording: Input und Attach verstecken, Overlay einblenden */
#ch-input-row.is-recording #ch-input { display: none; }
#ch-input-row.is-recording #ch-attach-btn { display: none; }
#ch-input-row.is-recording #ch-send { display: none; }
#ch-input-row.is-recording #ch-rec-overlay { display: flex; }
#ch-input-row.is-recording #ch-input-wrap {
background: #fff; box-shadow: inset 0 0 0 1.5px rgba(239,68,68,0.2);
border-color: transparent;
}
/* ── Recording-Overlay ── */
#ch-rec-overlay {
display: none;
flex: 1; min-width: 0;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: transparent;
border: none;
box-shadow: none;
overflow: hidden;
position: relative;
animation: chRecOverlayIn 0.36s cubic-bezier(0.16,0.84,0.32,1) both;
}
@keyframes chRecOverlayIn {
from { opacity: 0; transform: translateY(2px) scale(0.985); filter: blur(2px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
#ch-rec-cancel {
flex-shrink: 0;
width: 30px; height: 30px;
border: none;
background: rgba(148,163,184,0.12);
border-radius: 50%;
color: #6b7a87;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
#ch-rec-cancel:hover {
background: rgba(239,68,68,0.12);
color: #ef4444;
transform: scale(1.08);
}
#ch-rec-cancel:active { transform: scale(0.92); }
.ch-rec-status {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 7px;
padding: 0 4px;
}
.ch-rec-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #ef4444;
flex-shrink: 0;
}
.ch-rec-time {
font-family: 'Inter', sans-serif;
font-size: 12.5px;
font-weight: 600;
color: #2A343D;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
min-width: 32px;
}
.ch-rec-wave {
flex: 1; min-width: 0;
height: 28px;
display: flex; align-items: center;
gap: 3px;
overflow: hidden;
position: relative;
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ch-rec-wave-inner {
display: flex; align-items: center; gap: 3px;
height: 100%;
transition: transform 0.05s linear;
}
.ch-rec-bar {
width: 4.5px;
height: 100%;
background: linear-gradient(180deg, #675c8e 0%, #4f4670 100%);
border-radius: 3px;
transform: scaleY(0.08);
transform-origin: center;
transition: transform 0.14s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease;
will-change: transform;
flex-shrink: 0;
}
/* Transcribing State (nach Stop bis Text da ist) */
.ch-rec-transcribing {
display: none;
position: absolute;
inset: 0;
align-items: center; justify-content: center;
gap: 9px;
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
font-family: 'Inter', sans-serif;
font-size: 12.5px; font-weight: 500;
color: #6b7a87;
letter-spacing: 0.01em;
animation: chRecTransIn 0.28s cubic-bezier(0.22,0.61,0.36,1) both;
}
#ch-input-row.is-transcribing .ch-rec-transcribing { display: flex; }
#ch-input-row.is-transcribing .ch-rec-wave,
#ch-input-row.is-transcribing .ch-rec-status,
#ch-input-row.is-transcribing #ch-rec-cancel { visibility: hidden; }
#ch-input-row.is-transcribing #ch-mic-btn {
background: #e2e8f0; color: #94a3b8; cursor: wait;
box-shadow: none;
}
@keyframes chRecTransIn {
from { opacity: 0; }
to { opacity: 1; }
}
.ch-rec-spinner {
width: 13px; height: 13px;
border: 2px solid rgba(71,106,111,0.18);
border-top-color: #476A6F;
border-radius: 50%;
animation: chRecSpin 0.9s linear infinite;
}
@keyframes chRecSpin { to { transform: rotate(360deg); } }
/* Permission-Denied / Error Banner über Composer */
.ch-rec-error-toast {
position: absolute;
bottom: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(4px);
background: #1a1f24; color: #fff;
padding: 8px 14px;
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 12px; font-weight: 500;
white-space: nowrap;
opacity: 0;
box-shadow: 0 6px 22px rgba(26,31,36,0.28);
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1);
z-index: 40;
}
.ch-rec-error-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.ch-rec-dot { animation: none; }
#ch-rec-overlay::before { animation: none; }
.ch-rec-bar { transition: none; }
#ch-rec-overlay { animation: none; }
}
/* ── Attachment preview strip ── */
#ch-attach-strip {
display: none; align-items: center; gap: 10px;
padding: 8px 14px 0; background: #fff;
}
#ch-attach-strip-icon { flex-shrink: 0; }
.ch-attach-thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; display: block; border: 1.5px solid #e2e8f0; }
.ch-attach-file-icon { width: 40px; height: 40px; border-radius: 9px; background: rgba(71,106,111,0.09); border: 1.5px solid #e2e8f0; display: flex; align-items: center; justify-content: center; color: #476A6F; }
.ch-attach-info { flex: 1; min-width: 0; }
.ch-attach-fname { font-size: 0.77rem; font-weight: 600; color: #1a1f24; font-family: 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-attach-fmeta { font-size: 0.64rem; color: #94a3b8; font-family: 'Inter', sans-serif; margin-top: 1px; }
#ch-attach-remove { flex-shrink: 0; width: 20px; height: 20px; border: none; background: none; cursor: pointer; color: #94a3b8; padding: 0; display: flex; align-items: center; justify-content: center; transition: color 0.15s; }
#ch-attach-remove:hover { color: #ef4444; }
/* ── URL Rich Preview Card (Enterprise Tech Card) ── */
.ch-url-preview {
margin: 10px 0.875rem 6px;
background: #ffffff;
border: 1px solid rgba(42,52,61,0.09);
border-radius: 14px;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow:
0 2px 10px rgba(42,52,61,0.06),
0 0 0 1px rgba(255,255,255,0.6) inset;
transition: transform 0.30s cubic-bezier(0.16,0.84,0.32,1),
box-shadow 0.30s cubic-bezier(0.16,0.84,0.32,1),
border-color 0.22s ease;
max-width: 360px;
flex-shrink: 0;
text-decoration: none;
cursor: pointer;
animation: chUrlIn 0.5s cubic-bezier(0.16,0.84,0.32,1) both;
position: relative;
/* Button-Defaults zurücksetzen — Card-Layout bleibt sauber */
padding: 0;
font: inherit;
color: inherit;
text-align: left;
-webkit-appearance: none;
appearance: none;
width: auto;
}
.ch-url-preview:focus-visible {
outline: 2px solid rgba(71,106,111,0.55);
outline-offset: 2px;
}
@keyframes chUrlIn {
from { opacity: 0; transform: translateY(8px) scale(0.985); filter: blur(3px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.ch-url-preview:hover {
transform: translateY(-2px);
border-color: rgba(42,52,61,0.16);
box-shadow:
0 10px 28px rgba(42,52,61,0.10),
0 2px 6px rgba(42,52,61,0.06);
}
.ch-url-preview-meta {
padding: 16px;
display: flex; flex-direction: column; gap: 10px;
}
.ch-url-preview-header {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
}
.ch-url-preview-domain {
display: flex; align-items: center; gap: 8px;
font-family: 'Inter', sans-serif;
font-size: 0.75rem; font-weight: 700;
color: #0f172a;
min-width: 0;
}
.ch-url-preview-favicon {
width: 18px; height: 18px;
border-radius: 4px;
flex-shrink: 0;
background: #f1f5f9;
}
.ch-url-preview-domain span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-url-preview-badge {
display: inline-flex; align-items: center; justify-content: center;
padding: 3px 8px;
background: #f1f5f9;
color: #475569;
border: none;
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-size: 0.55rem; font-weight: 700;
letter-spacing: 0.05em; text-transform: uppercase;
white-space: nowrap; flex-shrink: 0;
}
.ch-url-preview-url {
font-family: 'Inter', sans-serif;
font-size: 0.85rem; font-weight: 500;
color: #64748b;
line-height: 1.4;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
word-break: break-all;
}
.ch-url-preview-hint {
display: flex; align-items: center; gap: 10px;
background: #f8fafc;
border-radius: 8px;
padding: 10px 12px;
margin-top: 4px;
border: 1px solid #f1f5f9;
position: relative; overflow: hidden;
width: 100%; box-sizing: border-box;
}
.ch-url-preview-hint::before {
content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(234,88,12,0.06), transparent);
animation: chScannerSweep 2s ease-in-out infinite;
}
@keyframes chScannerSweep { 0% { left: -100%; } 100% { left: 200%; } }
.ch-url-preview-hint-icon {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 6px;
background: #fff3ed; color: #ea580c;
flex-shrink: 0; position: relative;
border: none;
}
.ch-url-preview-hint-icon svg { width: 14px; height: 14px; animation: spin 1.8s linear infinite; flex-shrink: 0; }
.ch-url-preview-hint-body {
flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.ch-url-preview-hint-text {
font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 700;
color: #334155; letter-spacing: 0.03em; display: flex; justify-content: space-between;
text-transform: uppercase;
}
.shimmer-text {
background: linear-gradient(90deg, #334155 0%, #94a3b8 50%, #334155 100%);
background-size: 200% auto;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
animation: shimmerTextAnim 2s linear infinite;
}
@keyframes shimmerTextAnim {
to { background-position: 200% center; }
}
.ch-url-preview-hint-text span.status-pct { color: #ea580c; font-weight: 800; animation: pulsePct 1.5s infinite; }
@keyframes pulsePct { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
.ch-url-preview-hint-bar {
width: 100%; height: 4px; border-radius: 4px; background: #e2e8f0; overflow: hidden; position: relative;
}
.ch-url-preview-hint-fill {
position: absolute; top: 0; left: 0; height: 100%;
background: linear-gradient(90deg, #ea580c, #f97316);
border-radius: 4px; width: 0%;
animation: chUrlProgress 8.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes chUrlProgress {
0% { width: 0%; } 15% { width: 35%; } 45% { width: 60%; }
80% { width: 85%; } 95% { width: 95%; } 100% { width: 100%; }
}
.ch-url-preview-hint.done { background: #f0fdf4; border-color: #dcfce7; }
.ch-url-preview-hint.done::before { display: none; }
.ch-url-preview-hint.done .ch-url-preview-hint-icon { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.ch-url-preview-hint.done .ch-url-preview-hint-icon svg { animation: none; stroke: #166534; }
@media (max-width: 480px) {
.ch-url-preview { max-width: calc(100% - 0.875rem); margin: 8px 0.5rem 4px; }
}
/* ── Attachment in message bubbles ── */
.ch-msg-img { max-width: 190px; max-height: 190px; border-radius: 10px; margin-bottom: 5px; display: block; object-fit: cover; }
.ch-msg-file-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(71,106,111,0.09); border-radius: 9px; padding: 7px 11px; margin-bottom: 6px; max-width: 220px; }
.ch-msg-file-badge-name { font-size: 0.76rem; font-weight: 600; color: #2A343D; font-family: 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.ch-msg-file-badge-sub { font-size: 0.63rem; color: #94a3b8; font-family: 'Inter', sans-serif; }
.ch-msg-file-type-chip { flex-shrink: 0; min-width: 34px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 0.54rem; font-weight: 800; letter-spacing: 0.07em; }
.ch-attach-file-type-chip { font-size: 0.48rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.ch-doc-card { width: 188px; border-radius: 11px; overflow: hidden; border: 1.5px solid rgba(0,0,0,0.07); margin-bottom: 6px; display: block; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.ch-doc-card-hd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 16px 10px 12px; }
.ch-doc-card-label { font-size: 0.56rem; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.ch-doc-card-bd { padding: 8px 10px 9px; background: #fafbfc; border-top: 1px solid rgba(0,0,0,0.05); }
.ch-doc-card-name { font-size: 0.73rem; font-weight: 600; color: #1a1f24; font-family: 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-doc-card-meta { font-size: 0.61rem; color: #94a3b8; font-family: 'Inter', sans-serif; margin-top: 2px; }
@keyframes ch-spin { to { transform: rotate(360deg); } }
.ch-attach-fmeta.loading { color: #b0bec5; }
.ch-attach-fmeta.loading::before { content: ''; display: inline-block; width: 8px; height: 8px; border: 1.5px solid #d0d8e0; border-top-color: #476A6F; border-radius: 50%; animation: ch-spin 0.7s linear infinite; margin-right: 5px; vertical-align: middle; }
/* ── Locked composer ── */
#ch-new-btn {
display: none; flex: 1; height: 42px;
background: #2A343D; color: #fff;
border: none; border-radius: 0.85rem;
font-family: 'Inter', sans-serif; font-size: 0.875rem;
font-weight: 600; letter-spacing: 0.01em; cursor: pointer;
align-items: center; justify-content: center; gap: 0.5rem;
transition: background 0.22s, transform 0.18s, opacity 0.26s;
}
#ch-new-btn:hover:not(:disabled) { background: #3d4f5c; transform: scale(1.015); }
#ch-new-btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
#ch-input-row.ch-locked #ch-input-wrap,
#ch-input-row.ch-locked #ch-send { display: none !important; }
#ch-input-row.ch-locked { align-items: center; }
#ch-input-row.ch-locked #ch-new-btn { display: flex; }
#ch-powered {
padding: 0.4rem 1rem 0.5rem;
background: #fff; text-align: center;
font-family: 'Inter', sans-serif;
flex-shrink: 0;
display: flex; flex-direction: column; align-items: center; gap: 2px;
}
#ch-powered-disclaimer { font-size: 9.5px; color: #94a3b8; letter-spacing: 0.02em; font-style: italic; }
#ch-powered-brand { font-size: 9.5px; color: #cbd5e1; letter-spacing: 0.02em; }
#ch-powered-links { font-size: 8.5px; color: #cbd5e1; letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 5px; }
#ch-powered-links a { color: #94a3b8; text-decoration: none; transition: color 0.15s; }
#ch-powered-links a:hover { color: #675c8e; }
#ch-powered-links .sep { color: #d4dae3; }
/* ── 1. Notification badge on FAB ── */
#ch-badge {
position: absolute; top: -3px; right: -3px;
width: 17px; height: 17px;
background: #675c8e; border-radius: 50%;
font-size: 9.5px; font-weight: 700; color: #fff;
font-family: 'Inter', sans-serif;
display: flex; align-items: center; justify-content: center;
border: 2px solid #F4F5F7;
opacity: 0; transform: scale(0.3);
transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
pointer-events: none;
}
#ch-badge.show { opacity: 1; transform: scale(1); }
/* ── 1. Proactive speech bubble ── */
#ch-promo {
position: fixed;
bottom: 8.6rem; right: 4.8rem;
background: #fff;
border-radius: 1.1rem 1.1rem 0.2rem 1.1rem;
box-shadow: 0 8px 32px rgba(42,52,61,0.14), 0 0 0 1px rgba(42,52,61,0.06);
padding: 0.85rem 2rem 0.8rem 1rem;
max-width: 215px; width: max-content;
z-index: 9958; cursor: pointer;
opacity: 0; pointer-events: none;
transform: translateY(10px) scale(0.94);
transform-origin: bottom right;
transition: opacity 0.38s cubic-bezier(0.16,1,0.3,1), transform 0.38s cubic-bezier(0.16,1,0.3,1);
}
#ch-promo.show { opacity: 1; pointer-events: auto; transform: none; }
#ch-promo p { margin: 0; font-size: 0.815rem; line-height: 1.46; color: #2A343D; font-family: 'Inter', sans-serif; }
#ch-promo-close {
position: absolute; top: 7px; right: 8px;
width: 18px; height: 18px; border-radius: 50%;
background: transparent; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #cbd5e1; transition: color 0.15s;
}
#ch-promo-close:hover { color: #94a3b8; }
/* ── Intro speech bubble (left of FAB) ── */
#ch-intro {
position: fixed;
right: calc(1.5rem + 46px + 14px);
bottom: 5.5rem;
background: #fff;
border-radius: 1.1rem 1.1rem 0.25rem 1.1rem;
box-shadow: 0 8px 32px rgba(42,52,61,0.15), 0 0 0 1px rgba(42,52,61,0.06);
padding: 0.8rem 2.1rem 0.8rem 1rem;
max-width: 210px; width: max-content;
z-index: 9958; cursor: pointer;
opacity: 0; pointer-events: none;
transform: translateX(12px) scale(0.94);
transform-origin: right center;
transition: opacity 0.38s cubic-bezier(0.16,1,0.3,1), transform 0.38s cubic-bezier(0.16,1,0.3,1);
}
#ch-intro.show { opacity: 1; pointer-events: auto; transform: none; }
#ch-intro::after {
content: '';
position: absolute;
right: -7px;
bottom: 13px;
width: 0; height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #fff;
}
#ch-intro-head {
display: flex; align-items: center; gap: 6px;
margin-bottom: 0.35rem;
}
#ch-intro-head img { height: 13px; width: auto; opacity: 0.7; }
#ch-intro-head span { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.05em; color: #94a3b8; text-transform: uppercase; font-family: 'Inter', sans-serif; }
#ch-intro p { margin: 0; font-size: 0.82rem; line-height: 1.48; color: #2A343D; font-family: 'Inter', sans-serif; font-weight: 500; }
#ch-intro strong { color: #476A6F; }
#ch-intro-close {
position: absolute; top: 7px; right: 8px;
width: 18px; height: 18px; border-radius: 50%;
background: transparent; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #cbd5e1; transition: color 0.15s;
}
#ch-intro-close:hover { color: #94a3b8; }
@media (max-width: 500px) { #ch-intro { display: none; } }
/* ── 2. New conversation button ── */
/* ── Header buttons / dots menu ── */
#chat-hdr-btns {
display: flex; align-items: center; gap: 3px;
position: relative;
}
#ch-dots-btn {
width: 30px; height: 30px;
background: rgba(255,255,255,0.08);
border: none; border-radius: 8px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.6); flex-shrink: 0;
transition: background 0.2s, color 0.2s;
}
#ch-dots-btn:hover, #ch-dots-btn.open { background: rgba(255,255,255,0.16); color: #fff; }
/* Dropdown popover — opens below dots btn, no overlap possible */
#ch-menu {
position: absolute;
top: calc(100% + 10px);
right: 36px;
background: rgba(30,38,46,0.97);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 14px;
padding: 5px;
box-shadow: 0 12px 36px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.18);
display: flex; flex-direction: column; gap: 2px;
min-width: 178px;
z-index: 50;
opacity: 0; pointer-events: none;
transform: translateY(-8px) scale(0.95);
transform-origin: top right;
transition: opacity 0.22s cubic-bezier(0.16,1,0.3,1), transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
#ch-menu::before {
content: '';
position: absolute;
top: -6px; right: 10px;
width: 11px; height: 11px;
background: rgba(30,38,46,0.97);
border-left: 1px solid rgba(255,255,255,0.09);
border-top: 1px solid rgba(255,255,255,0.09);
transform: rotate(45deg);
}
#ch-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
#ch-menu .ch-menu-btn {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 9px 12px;
border: none; border-radius: 9px;
background: transparent;
color: rgba(255,255,255,0.7);
cursor: pointer; text-align: left;
font-size: 12.5px; font-family: 'Inter', sans-serif; font-weight: 500;
letter-spacing: 0.01em;
transition: background 0.15s, color 0.15s;
opacity: 0; transform: translateY(5px);
transition: background 0.15s, color 0.15s, opacity 0.2s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
#ch-menu .ch-menu-btn svg { flex-shrink: 0; opacity: 0.75; }
#ch-menu .ch-menu-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }
#ch-menu .ch-menu-btn:hover svg { opacity: 1; }
#ch-menu.open .ch-menu-btn { opacity: 1; transform: translateY(0); }
#ch-menu.open .ch-menu-btn:nth-child(1) { transition-delay: 40ms; }
#ch-menu.open .ch-menu-btn:nth-child(2) { transition-delay: 80ms; }
#ch-menu.open .ch-menu-btn:nth-child(3) { transition-delay: 120ms; }
.ch-menu-divider {
height: 1px; background: rgba(255,255,255,0.07);
margin: 3px 5px;
}
#ch-new-chat { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; color: inherit; width: 100%; padding: 0; }
/* ── 3. Message action buttons ── */
.ch-msg-footer {
display: flex; align-items: center; gap: 6px;
padding: 0 2px; margin-top: 7px;
}
.ch-actions {
display: flex; gap: 3px; align-items: center;
opacity: 1;
}
.ch-act {
width: 18px; height: 18px;
background: none; border: none; border-radius: 0;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #94a3b8;
transition: color 0.15s, transform 0.15s;
padding: 0;
}
.ch-act:hover { color: #2A343D; transform: scale(1.18); }
.ch-act.up-active { color: #22c55e; }
.ch-act.down-active { color: #675c8e; }
/* ── Email contact badge ── */
.ch-email-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(42,52,61,0.07); color: #2A343D !important;
padding: 5px 11px 5px 9px; border-radius: 2rem;
margin-top: 8px; font-size: 0.75rem; font-weight: 500;
font-family: 'Inter', sans-serif;
text-decoration: none !important; cursor: pointer;
transition: background 0.18s, color 0.18s;
letter-spacing: 0.01em;
}
.ch-email-badge:hover { background: rgba(42,52,61,0.13); }
.ch-email-badge svg { flex-shrink: 0; opacity: 0.65; }
/* ── Copy toast ── */
#ch-toast {
position: fixed; bottom: 3rem; left: 50%;
transform: translateX(-50%) translateY(8px);
background: #2A343D; color: #fff;
font-size: 11px; font-family: 'Inter', sans-serif; font-weight: 500;
padding: 6px 16px; border-radius: 2rem;
z-index: 9999; opacity: 0; pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
white-space: nowrap;
}
#ch-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ── Feature: Scroll-to-bottom button ── */
#ch-scroll-btn {
align-self: center;
max-height: 0; overflow: hidden;
opacity: 0; pointer-events: none;
background: #2A343D; color: #fff;
border: none; border-radius: 2rem;
padding: 0 13px;
font-size: 11px; font-family: 'Inter', sans-serif; font-weight: 500;
cursor: pointer; display: flex; align-items: center; gap: 5px;
transition: max-height 0.30s cubic-bezier(0.16,1,0.3,1), opacity 0.22s ease, padding 0.28s ease, margin 0.28s ease;
box-shadow: 0 2px 10px rgba(42,52,61,0.22);
white-space: nowrap; margin: 0 auto;
}
#ch-scroll-btn.show { max-height: 34px; opacity: 1; pointer-events: auto; padding: 5px 13px 5px 10px; margin: 4px auto 2px; }
#ch-qr-bar {
display: flex; flex-wrap: wrap; gap: 5px;
padding: 0 0.875rem;
max-height: 0; overflow: hidden;
transition: max-height 0.32s cubic-bezier(0.16,1,0.3,1), padding 0.28s ease;
}
#ch-qr-bar.has-chips { max-height: 80px; padding: 6px 0.875rem 2px; }
#ch-scroll-count {
background: #675c8e; color: #fff;
font-size: 9px; font-weight: 700;
padding: 1px 5px; border-radius: 1rem;
font-family: 'Inter', sans-serif;
}
/* ── Feature: Auto-expanding textarea & Composer Layout ── */
#ch-input-wrap {
flex: 1; display: flex; flex-direction: column; min-width: 0;
background: #F4F5F7; border: 1.5px solid transparent; border-radius: 1.15rem;
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; overflow: hidden;
position: relative;
}
#ch-input-wrap:focus-within { background: #fff; border-color: rgba(71,106,111,0.22); box-shadow: 0 4px 12px rgba(42,52,61,0.04); }
#ch-input {
flex: 1; background: transparent; border: none; border-radius: 0;
padding: 0.75rem 0.75rem 0.2rem 0.75rem;
font-family: 'Inter', sans-serif; font-size: 0.85rem; color: #1a1f24;
outline: none; min-width: 0; resize: none;
overflow-y: hidden; min-height: 42px; max-height: 110px;
line-height: 1.5;
}
#ch-input::placeholder { color: #94a3b8; }
#ch-input-actions {
display: flex; align-items: center; gap: 4px;
padding: 2px 6px 6px 6px;
}
/* ── Feature: Download button (inside menu) ── */
#ch-download { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: inherit; }
/* ── Feature: Mute button (inside menu) ── */
#ch-mute.muted { color: rgba(255,255,255,0.25); }
/* ── Feature 1: Slash command palette ── */
#ch-input-row { position: relative; }
#ch-commands {
position: absolute; bottom: calc(100% + 6px); left: 0.875rem; right: 0.875rem;
background: #fff;
border-radius: 1rem;
box-shadow: 0 8px 32px rgba(42,52,61,0.14), 0 0 0 1px rgba(42,52,61,0.07);
overflow: hidden; z-index: 30;
opacity: 0; pointer-events: none;
transform: translateY(6px);
transition: opacity 0.2s cubic-bezier(0.16,1,0.3,1), transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
#ch-commands.show { opacity: 1; pointer-events: auto; transform: none; }
#ch-commands-title {
padding: 7px 13px 5px;
font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
color: #94a3b8; font-family: 'Inter', sans-serif; text-transform: uppercase;
border-bottom: 1px solid rgba(42,52,61,0.05);
}
.ch-cmd {
display: flex; align-items: center; gap: 10px;
padding: 8px 13px; cursor: pointer;
transition: background 0.1s;
}
.ch-cmd:hover, .ch-cmd.active { background: #F4F5F7; }
.ch-cmd-key {
font-family: 'Roboto Mono', monospace; font-size: 11.5px;
font-weight: 600; color: #476A6F; min-width: 90px;
}
.ch-cmd-hint { font-size: 11px; color: #94a3b8; font-family: 'Inter', sans-serif; }
/* ── Feature 2: Sound mute button (inside menu) ── */
#ch-mute { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: inherit; width: 100%; height: 100%; }
/* ── Feature 4: Character counter ── */
#ch-char-bar {
padding: 0 0.875rem 0.45rem;
background: #fff; display: flex; justify-content: flex-end;
}
#ch-char-count {
font-size: 10px; color: #cbd5e1; font-family: 'Inter', sans-serif;
transition: color 0.2s; opacity: 0; pointer-events: none;
transition: opacity 0.18s, color 0.18s;
}
#ch-char-count.show { opacity: 1; }
#ch-char-count.warn { color: #f59e0b; }
#ch-char-count.danger{ color: #ef4444; font-weight: 600; }
/* ── Consent Gate ── */
#ch-consent {
position: absolute; inset: 0; z-index: 14;
background: rgba(255,255,255,0.985);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
display: flex; flex-direction: column;
padding: 1.7rem 1.4rem 1.2rem;
opacity: 0; pointer-events: none;
transition: opacity 0.32s cubic-bezier(0.16,1,0.3,1);
overflow-y: auto;
}
#ch-consent.show { opacity: 1; pointer-events: auto; }
.ch-consent-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 0.85rem;
}
.ch-consent-icon {
width: 42px; height: 42px;
background: linear-gradient(135deg, #ede8f7, #dccfee);
border-radius: 13px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ch-consent-title {
font-family: 'Inter', sans-serif;
font-size: 1rem; font-weight: 700;
color: #1a1f24; line-height: 1.25;
}
.ch-consent-title small {
display: block; font-size: 0.62rem; font-weight: 600;
color: #675c8e; text-transform: uppercase;
letter-spacing: 0.18em; margin-bottom: 2px;
}
.ch-consent-sub {
font-family: 'Inter', sans-serif;
font-size: 0.76rem; color: #64748b;
line-height: 1.6; margin-bottom: 1rem;
}
.ch-consent-row {
display: flex; gap: 11px; align-items: flex-start;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 13px;
padding: 12px 13px; margin-bottom: 9px;
cursor: pointer;
transition: border-color 0.18s, background 0.18s;
user-select: none;
}
.ch-consent-row:hover { border-color: #cbd5e1; }
.ch-consent-row.checked {
background: #f6f3fb;
border-color: #675c8e;
}
.ch-consent-check {
width: 19px; height: 19px;
border-radius: 6px;
border: 1.5px solid #cbd5e1;
background: #fff;
flex-shrink: 0; margin-top: 1px;
display: flex; align-items: center; justify-content: center;
transition: background 0.18s, border-color 0.18s;
}
.ch-consent-row.checked .ch-consent-check {
background: #675c8e; border-color: #675c8e;
}
.ch-consent-check svg {
opacity: 0; transform: scale(0.5);
transition: opacity 0.2s, transform 0.2s;
}
.ch-consent-row.checked .ch-consent-check svg {
opacity: 1; transform: scale(1);
}
.ch-consent-row p {
font-family: 'Inter', sans-serif;
font-size: 0.76rem; color: #475569;
line-height: 1.55; flex: 1; margin: 0;
}
.ch-consent-row a {
color: #675c8e; font-weight: 600; text-decoration: underline;
}
.ch-consent-btn {
margin-top: 12px;
background: #2A343D; color: #fff;
border: none; border-radius: 14px;
padding: 13px 18px;
font-family: 'Inter', sans-serif;
font-size: 0.85rem; font-weight: 600;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 9px;
transition: background 0.18s, transform 0.18s, opacity 0.18s, box-shadow 0.18s;
box-shadow: 0 1px 6px rgba(42,52,61,0.12);
}
.ch-consent-btn:hover:not(:disabled) {
background: #3d4f5c; transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(42,52,61,0.20);
}
.ch-consent-btn:active:not(:disabled) { transform: translateY(0); }
.ch-consent-btn:disabled {
opacity: 0.42; cursor: not-allowed;
background: #94a3b8;
}
.ch-consent-hint {
text-align: center;
font-size: 0.66rem; color: #94a3b8;
margin-top: 8px; font-style: italic;
}
/* ── Session Management ── */
#chat-hdr { position: relative; z-index: 16; }
#ch-session-overlay {
position: absolute; inset: 0; z-index: 15;
background: rgba(244,245,247,0.93);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 0; padding: 1.5rem;
opacity: 0; pointer-events: none;
transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1);
}
#ch-session-overlay.show { opacity: 1; pointer-events: auto; }
#ch-session-box {
text-align: center; max-width: 240px;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#ch-session-icon {
width: 48px; height: 48px; border-radius: 14px;
background: #2A343D;
display: flex; align-items: center; justify-content: center;
margin-bottom: 4px;
}
#ch-session-title {
font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 700;
color: #1a1f24; margin: 0;
}
#ch-session-msg {
font-family: 'Inter', sans-serif; font-size: 12.5px; color: #64748b;
line-height: 1.55; margin: 0;
}
#ch-session-countdown {
font-family: 'Inter', sans-serif; font-size: 12px; color: #94a3b8;
background: rgba(42,52,61,0.06); border-radius: 2rem;
padding: 5px 14px; margin-top: 2px;
}
#ch-session-countdown strong { color: #476A6F; font-weight: 700; }
#ch-session-new {
margin-top: 4px; padding: 10px 22px;
background: #2A343D; color: #fff;
border: none; border-radius: 2rem;
font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
cursor: pointer; transition: background 0.18s, transform 0.15s, opacity 0.18s;
}
#ch-session-new:hover:not(:disabled) { background: #476A6F; transform: translateY(-1px); }
#ch-session-new:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
/* idle warning bar */
#ch-idle-warning {
position: absolute; bottom: 0; left: 0; right: 0; z-index: 12;
background: rgba(42,52,61,0.88); backdrop-filter: blur(8px);
color: #fff; padding: 8px 14px;
display: none; align-items: center; justify-content: space-between; gap: 10px;
font-family: 'Inter', sans-serif; font-size: 11.5px;
}
#ch-idle-warning.show { display: flex; }
#ch-idle-stay {
padding: 4px 12px; border: 1.5px solid rgba(255,255,255,0.3);
border-radius: 2rem; background: transparent; color: #fff;
font-size: 11px; font-family: 'Inter', sans-serif; font-weight: 600;
cursor: pointer; white-space: nowrap; flex-shrink: 0;
transition: background 0.15s;
}
#ch-idle-stay:hover { background: rgba(255,255,255,0.12); }
/* message counter */
#ch-msg-counter {
font-size: 10px; color: #cbd5e1; font-family: 'Inter', sans-serif;
padding: 0 0.875rem 0.3rem; background: #fff;
text-align: right; display: none;
}
#ch-msg-counter.show { display: block; }
#ch-msg-counter.warn { color: #f59e0b; }
#ch-msg-counter.danger{ color: #ef4444; font-weight: 700; }
/* ── Offline Banner ── */
#ch-offline-bar {
display: none; align-items: center; justify-content: center; gap: 6px;
background: #ef4444; color: #fff;
font-size: 11px; font-family: 'Inter', sans-serif; font-weight: 600;
padding: 6px 12px; flex-shrink: 0; letter-spacing: 0.01em;
}
#ch-offline-bar.show { display: flex; }
#ch-offline-bar svg { flex-shrink: 0; }
/* ── Name Prompt ── */
.ch-name-prompt {
display: flex; flex-direction: column; gap: 8px;
padding: 4px 0;
}
.ch-name-input {
width: 100%; padding: 8px 12px;
border: 1.5px solid rgba(42,52,61,0.14);
border-radius: 0.75rem;
font-family: 'Inter', sans-serif; font-size: 0.82rem; color: #1a1f24;
background: #F4F5F7; outline: none;
transition: border-color 0.18s, background 0.18s;
box-sizing: border-box;
}
.ch-name-input:focus { border-color: #476A6F; background: #fff; }
.ch-name-btn {
align-self: flex-start;
padding: 7px 18px; border: none; border-radius: 2rem;
background: #2A343D; color: #fff;
font-size: 0.78rem; font-weight: 600; font-family: 'Inter', sans-serif;
cursor: pointer; transition: background 0.18s, transform 0.18s;
}
.ch-name-btn:hover { background: #3d505c; transform: translateY(-1px); }
/* ── Quick Reply Chips ── */
.ch-quick-replies {
display: flex; flex-wrap: wrap; gap: 5px;
margin-top: 6px; align-self: flex-start;
animation: chMsgIn 0.3s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}
.ch-qr-chip {
padding: 5px 12px 5px 9px;
background: #fff; border: 1.5px solid rgba(71,106,111,0.22);
border-radius: 1.5rem; cursor: pointer;
font-size: 0.73rem; color: #476A6F; font-weight: 600;
font-family: 'Inter', sans-serif; white-space: nowrap;
transition: background 0.22s cubic-bezier(0.22,1,0.36,1),
border-color 0.22s,
transform 0.22s cubic-bezier(0.22,1,0.36,1),
color 0.22s,
box-shadow 0.22s;
box-shadow: 0 1px 3px rgba(71,106,111,0.08);
display: inline-flex; align-items: center; gap: 5px;
opacity: 0; transform: translateY(4px);
animation: chQrChipIn 0.34s cubic-bezier(0.22,1,0.36,1) forwards;
animation-delay: calc(var(--i, 0) * 45ms + 60ms);
position: relative;
}
.ch-qr-chip::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: currentColor; opacity: 0.55;
transition: opacity 0.22s, transform 0.22s;
}
@keyframes chQrChipIn {
to { opacity: 1; transform: translateY(0); }
}
.ch-qr-chip:hover {
background: #476A6F; color: #fff; border-color: #476A6F;
transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(71,106,111,0.22);
}
.ch-qr-chip:hover::before { opacity: 1; transform: scale(1.15); }
.ch-qr-chip:active { transform: translateY(0); transition-duration: 0.08s; }
/* ── In-chat Booking Card — als Teil der AI-Nachricht eingebettet ── */
.ch-book-card {
margin: 8px 0 4px;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(42,52,61,0.08);
animation: chBookCardIn 0.38s cubic-bezier(0.16,1,0.3,1) both;
flex-shrink: 0;
background: #fff;
}
@keyframes chBookCardIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Wenn die Card in einer AI-Message eingebettet ist → noch dezenter */
.ch-msg.ai .ch-book-card {
margin: 10px 0 0;
border-radius: 12px;
width: 100%;
}
/* AI-Message mit Booking-Card → mehr Breite, damit Kalender/Tabs atmen können */
.ch-msg.ai:has(.ch-book-card) { max-width: 96%; width: 100%; }
.ch-book-head {
background: linear-gradient(130deg, #2A343D 0%, #3d515e 100%);
padding: 16px 18px;
display: flex; align-items: center; gap: 12px;
}
.ch-book-head-icon {
width: 38px; height: 38px; border-radius: 11px;
background: rgba(255,255,255,0.1);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ch-book-title {
font-family: 'Inter', sans-serif; font-size: 0.9rem;
font-weight: 700; color: #fff; line-height: 1.2;
}
.ch-book-sub {
font-family: 'Inter', sans-serif; font-size: 0.67rem;
color: rgba(255,255,255,0.48); margin-top: 2px; letter-spacing: 0.01em;
}
.ch-book-body {
background: #fff;
padding: 16px 16px 14px;
display: flex; flex-direction: column; gap: 10px;
}
/* ── Mode Tabs — horizontal oben (Originallayout) ── */
.ch-book-tabs {
display: flex; gap: 4px;
background: #f1f5f9;
border-radius: 12px;
padding: 4px;
margin-bottom: 0;
position: relative;
}
.ch-book-tab {
flex: 1;
background: transparent; border: none;
padding: 9px 8px;
border-radius: 9px;
font-family: 'Inter', sans-serif;
font-size: 0.72rem; font-weight: 600;
color: #64748b;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 6px;
transition: background 0.32s cubic-bezier(0.22,1,0.36,1), color 0.24s, box-shadow 0.32s, transform 0.18s ease;
position: relative; z-index: 1;
}
.ch-book-tab:hover { color: #2A343D; }
.ch-book-tab:active { transform: scale(0.97); }
.ch-book-tab.active {
background: #fff;
color: #2A343D;
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.ch-book-tab svg { flex-shrink: 0; }
/* ── Buchungs-Dropdown (Telefon-Rückruf / E-Mail) — App-Style Popup ── */
.ch-book-dd { position: relative; }
.ch-book-dd-trigger {
width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 11px 13px;
font-family: 'Inter', sans-serif;
font-size: 0.8rem; font-weight: 600;
color: #2A343D;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.ch-book-dd-trigger:hover { border-color: #cbd5e1; }
.ch-book-dd.dd-open .ch-book-dd-trigger {
border-color: #476A6F;
box-shadow: 0 0 0 3px rgba(71,106,111,0.12);
}
.ch-book-dd-cur { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ch-book-dd-cur svg { flex-shrink: 0; color: #476A6F; }
.ch-book-dd-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Platzhalter-Zustand: noch nichts gewählt → gedämpft */
.ch-book-dd:not([data-mode="phone"]):not([data-mode="email"]) .ch-book-dd-label { color: #94a3b8; font-weight: 500; }
.ch-book-dd-chevron { flex-shrink: 0; color: #94a3b8; transition: transform 0.28s cubic-bezier(0.22,1,0.36,1); }
.ch-book-dd.dd-open .ch-book-dd-chevron { transform: rotate(180deg); }
/* Trigger-Icon je nach gewähltem Modus */
.ch-book-dd .ch-book-dd-ic { display: none; align-items: center; }
.ch-book-dd[data-mode="phone"] .ic-phone { display: inline-flex; }
.ch-book-dd[data-mode="email"] .ic-mail { display: inline-flex; }
.ch-book-dd-menu {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: #fff;
border: 1px solid #e9edf2;
border-radius: 13px;
box-shadow: 0 12px 34px rgba(26,31,36,0.14), 0 2px 8px rgba(26,31,36,0.06);
padding: 5px;
z-index: 40;
opacity: 0; transform: translateY(-6px) scale(0.985);
transform-origin: top center;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22,1,0.36,1);
}
.ch-book-dd.dd-open .ch-book-dd-menu {
opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
/* Popup darf aus der Card herausragen, solange es offen ist */
.ch-book-card:has(.ch-book-dd.dd-open) { overflow: visible; position: relative; z-index: 5; }
.ch-book-dd-opt {
width: 100%;
display: flex; align-items: center; gap: 10px;
background: transparent; border: none;
padding: 10px 11px;
border-radius: 9px;
font-family: 'Inter', sans-serif;
font-size: 0.8rem; font-weight: 600;
color: #475569;
cursor: pointer;
text-align: left;
transition: background 0.16s, color 0.16s;
}
.ch-book-dd-opt:hover { background: #f1f5f9; color: #2A343D; }
.ch-book-dd-opt-ic { display: inline-flex; flex-shrink: 0; color: #94a3b8; }
.ch-book-dd-opt.active { color: #2A343D; }
.ch-book-dd-opt.active .ch-book-dd-opt-ic { color: #476A6F; }
.ch-book-dd-opt-lbl { flex: 1; }
.ch-book-dd-opt-check {
flex-shrink: 0; color: #476A6F;
opacity: 0; transform: scale(0.6);
transition: opacity 0.18s, transform 0.18s;
}
.ch-book-dd-opt.active .ch-book-dd-opt-check { opacity: 1; transform: scale(1); }
/* ── Panes-Wrapper: zugeklappt → faltet sanft auf bei Klick ── */
.ch-book-panes-wrap {
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-6px);
transform-origin: top center;
margin-top: -4px;
transition: max-height 0.62s cubic-bezier(0.22,1,0.36,1),
opacity 0.42s cubic-bezier(0.22,1,0.36,1),
transform 0.5s cubic-bezier(0.22,1,0.36,1),
margin-top 0.5s cubic-bezier(0.22,1,0.36,1);
will-change: max-height, opacity, transform;
}
.ch-book-card.is-expanded .ch-book-panes-wrap {
max-height: 1400px;
opacity: 1;
transform: translateY(0);
margin-top: 2px;
}
/* ── Form-Sektionen ── */
.ch-book-pane { display: none; flex-direction: column; gap: 10px; min-width: 0; }
.ch-book-pane.active { display: flex; }
.ch-book-card.is-expanded .ch-book-pane.active { animation: cbPaneIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
@keyframes cbPaneIn {
from { opacity: 0; transform: translateY(8px); filter: blur(1px); }
60% { filter: blur(0); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* ── Email-Form Textarea ── */
.ch-book-textarea {
width: 100%; box-sizing: border-box;
min-height: 78px; max-height: 160px; resize: vertical;
padding: 11px 13px;
font-family: 'Inter', sans-serif; font-size: 0.82rem;
color: #1a1f24;
background: #fff;
border: 1.5px solid #e2e8f0; border-radius: 10px;
outline: none;
transition: border-color 0.18s, box-shadow 0.18s;
line-height: 1.5;
}
.ch-book-textarea:focus {
border-color: #675c8e;
box-shadow: 0 0 0 3px rgba(103,92,142,0.14);
}
.ch-book-textarea::placeholder { color: #94a3b8; }
.ch-book-pane-hint {
font-size: 0.68rem; color: #94a3b8;
font-family: 'Inter', sans-serif;
line-height: 1.5;
text-align: center; margin: -2px 0 2px;
}
.ch-book-phone-row {
display: flex; align-items: center; gap: 8px;
background: #f0fdf4; border: 1.5px solid #86efac;
border-radius: 10px; padding: 9px 13px;
font-family: 'Inter', sans-serif; font-size: 0.82rem;
font-weight: 600; color: #166534;
}
.ch-book-input-row {
position: relative;
}
.ch-book-input-icon {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
pointer-events: none; display: flex; align-items: center;
}
.ch-book-input {
width: 100%; box-sizing: border-box;
padding: 0.75rem 0.875rem 0.75rem 2.5rem;
border-radius: 10px; border: 1.5px solid #e2e8f0;
background: #f8f9fa; color: #1a1f24;
font-size: 0.82rem; font-weight: 500;
font-family: 'Inter', sans-serif;
transition: border-color 0.18s, background 0.18s;
cursor: pointer;
}
.ch-book-input:focus { outline: none; border-color: #476A6F; background: #fff; }
.ch-book-slots-label {
font-size: 0.6rem; font-weight: 700; color: #476A6F;
text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 6px; padding-left: 2px;
}
.ch-book-slot-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.ch-book-slot-btn {
padding: 8px 0; border-radius: 9px; border: 1.5px solid #e2e8f0;
background: #fff; color: #475569;
font-size: 0.8rem; font-weight: 600; cursor: pointer;
font-family: 'Inter', sans-serif;
transition: all 0.15s; text-align: center;
}
.ch-book-slot-btn:disabled { background: #f8f9fa; color: #cbd5e1; text-decoration: line-through; cursor: not-allowed; }
.ch-book-slot-btn.sel { background: #ede8f7; border-color: #675c8e; color: #675c8e; font-weight: 700; }
.ch-book-slot-btn:hover:not(:disabled):not(.sel) { border-color: #476A6F; color: #476A6F; }
.ch-book-loading {
text-align: center; padding: 8px; font-size: 0.72rem; color: #94a3b8;
font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.ch-book-btn {
width: 100%; padding: 0.8rem; border-radius: 11px; border: none;
background: linear-gradient(135deg, #2A343D, #3d515e);
color: #fff; font-size: 0.85rem; font-weight: 700;
font-family: 'Inter', sans-serif; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 7px;
transition: opacity 0.2s, transform 0.18s;
}
.ch-book-btn:hover:not(:disabled) { opacity: 0.9; transform: scale(1.01); }
.ch-book-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.ch-book-hint { font-size: 0.65rem; color: #675c8e; padding-left: 2px; display: none; }
/* Chat mini calendar */
.ch-book-cal-wrap { border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff; margin-bottom: 8px; overflow: hidden; transition: border-color 0.18s; }
.ch-book-cal-wrap.error { border-color: #675c8e; }
.ch-book-cal-nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 7px; border-bottom: 1px solid #f1f5f9; }
.ch-book-cal-hdr { font-family: 'Inter', sans-serif; font-size: 0.77rem; font-weight: 700; color: #1a1f24; }
.ch-book-cal-arr { width: 24px; height: 24px; border-radius: 7px; border: none; background: #f8f9fa; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; }
.ch-book-cal-arr:hover { background: #f1f5f9; }
.ch-book-cal-wdays { display: grid; grid-template-columns: repeat(7, 1fr); padding: 5px 6px 2px; }
.ch-book-cal-wdays span { text-align: center; font-size: 0.55rem; font-weight: 700; color: #94a3b8; font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; }
.ch-book-cal-wdays span.we { color: #e2e8f0; }
.ch-book-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 2px 6px 6px; gap: 2px; }
.ch-book-cal-day { aspect-ratio: 1; border-radius: 7px; border: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500; color: #1a1f24; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ch-book-cal-day:hover:not(:disabled):not(.ch-book-cal-sel) { background: #f1f5f9; }
.ch-book-cal-sel { background: #476A6F !important; color: #fff !important; font-weight: 700; }
.ch-book-cal-today:not(.ch-book-cal-sel) { color: #476A6F; font-weight: 700; }
.ch-book-cal-day:disabled { color: #e8ecf0; cursor: not-allowed; }
.ch-book-cal-we:not(.ch-book-cal-sel) { color: #d4dae0; cursor: not-allowed; }
/* Chat enterprise slot rows */
.ch-book-slot-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; border: 1.5px solid #e2e8f0; background: #fff; cursor: pointer; margin-bottom: 5px; transition: border-color 0.15s, background 0.15s; box-sizing: border-box; font-family: 'Inter', sans-serif; }
.ch-book-slot-row.sel { border-color: #476A6F; background: #f0f7f7; }
.ch-book-slot-row.taken { cursor: not-allowed; background: #fafafa; border-color: #f1f5f9; }
.ch-book-slot-radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #d4dae0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background 0.15s; }
.ch-book-slot-row.sel .ch-book-slot-radio { border-color: #476A6F; background: #476A6F; }
.ch-book-slot-row.sel .ch-book-slot-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; display: block; }
.ch-book-slot-time-txt { flex: 1; font-size: 0.78rem; font-weight: 600; color: #1a1f24; }
.ch-book-slot-row.taken .ch-book-slot-time-txt { color: #b0bac4; text-decoration: line-through; }
.ch-book-slot-badge { font-size: 0.58rem; font-weight: 700; padding: 3px 7px; border-radius: 20px; letter-spacing: 0.02em; }
.ch-book-badge-free { background: #f0fdf4; color: #16a34a; }
.ch-book-badge-sel { background: #f0f7f7; color: #476A6F; }
.ch-book-badge-book { background: #fef2f2; color: #dc2626; }
.ch-book-success-body {
background: #fff; padding: 32px 18px 26px;
display: flex; flex-direction: column; align-items: center;
gap: 10px; text-align: center;
}
.ch-book-success-icon {
position: relative;
width: 58px; height: 58px; border-radius: 50%;
background: rgba(71,106,111,0.1);
display: flex; align-items: center; justify-content: center;
}
.ch-book-success-icon--pop {
animation: chBookCircPop 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
}
.ch-book-success-icon--pop svg {
animation: chBookCheckPop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.15s both;
}
@keyframes chBookCircPop {
0% { transform: scale(0.5); opacity: 0; }
60% { transform: scale(1.08); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes chBookCheckPop {
0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
55% { transform: scale(1.18) rotate(0); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
.ch-book-success-ring {
position: absolute; inset: -6px;
border-radius: 50%;
border: 2px solid rgba(71,106,111,0.55);
opacity: 0;
animation: chBookSuccRing 1.4s cubic-bezier(0.22,0.61,0.36,1) 0.25s both;
pointer-events: none;
}
@keyframes chBookSuccRing {
0% { transform: scale(0.6); opacity: 0; }
30% { opacity: 0.7; }
100% { transform: scale(1.55); opacity: 0; }
}
.ch-book-success-title {
font-family: 'Inter', sans-serif; font-size: 0.98rem;
font-weight: 700; color: #1a1f24;
animation: chBookSuccFadeUp 0.5s cubic-bezier(0.16,0.84,0.32,1) 0.20s both;
}
.ch-book-success-date {
font-family: 'Inter', sans-serif; font-size: 0.86rem;
font-weight: 600; color: #476A6F; line-height: 1.5;
animation: chBookSuccFadeUp 0.5s cubic-bezier(0.16,0.84,0.32,1) 0.28s both;
}
.ch-book-success-note {
font-family: 'Inter', sans-serif; font-size: 0.72rem;
color: #94a3b8; margin-top: 2px;
animation: chBookSuccFadeUp 0.5s cubic-bezier(0.16,0.84,0.32,1) 0.36s both;
}
@keyframes chBookSuccFadeUp {
from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Card-Success-Out: weiches Ausblenden der Form bevor Success-Body kommt */
.ch-book-card--success-out {
transition: filter 0.26s ease, opacity 0.26s ease, transform 0.26s ease;
opacity: 0.35; transform: scale(0.985); filter: blur(2px);
pointer-events: none;
}
.ch-book-card--success {
background: linear-gradient(180deg, #fff 0%, #f7fbfb 100%);
transition: background 0.6s ease;
}
/* ══════ Stepper: Pills + animierter Connector ══════ */
.ch-book-stepper {
display: flex; align-items: center; gap: 8px;
padding: 2px 2px 6px;
margin-top: -2px;
}
.ch-book-step-pill {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 11px 5px 5px;
background: #f1f5f9;
border-radius: 999px;
transition: background 0.34s cubic-bezier(0.22,0.61,0.36,1),
color 0.34s ease,
box-shadow 0.34s ease;
}
.ch-book-step-num {
width: 22px; height: 22px; border-radius: 50%;
background: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700;
color: #94a3b8;
transition: background 0.34s ease, color 0.34s ease, transform 0.34s cubic-bezier(0.34,1.56,0.64,1);
position: relative;
}
.ch-book-step-lbl {
font-family: 'Inter', sans-serif;
font-size: 0.72rem; font-weight: 600;
color: #94a3b8;
letter-spacing: 0.01em;
transition: color 0.34s ease;
}
.ch-book-step-connector {
flex: 1; min-width: 24px;
height: 2px;
background: #e2e8f0;
border-radius: 2px;
position: relative;
overflow: hidden;
}
.ch-book-step-connector span {
position: absolute; inset: 0;
background: linear-gradient(90deg, #476A6F, #5d8a90);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.46s cubic-bezier(0.22,0.61,0.36,1);
border-radius: 2px;
}
/* Aktiver Step: Pill in Akzentfarbe, Number gefüllt */
.ch-book-stepper[data-active-step="date"] .ch-book-step-pill[data-step-pill="date"],
.ch-book-stepper[data-active-step="time"] .ch-book-step-pill[data-step-pill="time"] {
background: linear-gradient(135deg, #2A343D, #3d515e);
box-shadow: 0 3px 12px rgba(42,52,61,0.18);
}
.ch-book-stepper[data-active-step="date"] .ch-book-step-pill[data-step-pill="date"] .ch-book-step-num,
.ch-book-stepper[data-active-step="time"] .ch-book-step-pill[data-step-pill="time"] .ch-book-step-num {
background: #fff; color: #2A343D;
transform: scale(1.05);
}
.ch-book-stepper[data-active-step="date"] .ch-book-step-pill[data-step-pill="date"] .ch-book-step-lbl,
.ch-book-stepper[data-active-step="time"] .ch-book-step-pill[data-step-pill="time"] .ch-book-step-lbl {
color: #fff;
}
/* Erledigter Date-Step: Number wird zu Checkmark */
.ch-book-stepper[data-active-step="time"] .ch-book-step-pill[data-step-pill="date"] {
background: rgba(71,106,111,0.10);
}
.ch-book-stepper[data-active-step="time"] .ch-book-step-pill[data-step-pill="date"] .ch-book-step-num {
background: #476A6F; color: #fff;
font-size: 0;
}
.ch-book-stepper[data-active-step="time"] .ch-book-step-pill[data-step-pill="date"] .ch-book-step-num::after {
content: '';
position: absolute;
width: 9px; height: 5px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(0, -1px);
}
.ch-book-stepper[data-active-step="time"] .ch-book-step-pill[data-step-pill="date"] .ch-book-step-lbl {
color: #476A6F;
}
.ch-book-stepper[data-active-step="time"] .ch-book-step-connector span {
transform: scaleX(1);
}
/* ══════ Step-Swap Container ══════ */
.ch-book-steps {
display: grid;
grid-template-rows: 1fr;
position: relative;
}
.ch-book-step {
grid-row: 1; grid-column: 1;
min-width: 0;
display: flex; flex-direction: column; gap: 10px;
opacity: 0;
transform: translateY(14px);
filter: blur(4px);
visibility: hidden;
pointer-events: none;
transition: opacity 0.36s cubic-bezier(0.16,0.84,0.32,1),
transform 0.42s cubic-bezier(0.16,0.84,0.32,1),
filter 0.36s ease,
visibility 0s linear 0.42s;
}
.ch-book-step.is-active {
opacity: 1;
transform: translateY(0);
filter: blur(0);
visibility: visible;
pointer-events: auto;
transition: opacity 0.42s cubic-bezier(0.16,0.84,0.32,1) 0.08s,
transform 0.46s cubic-bezier(0.16,0.84,0.32,1) 0.08s,
filter 0.42s ease 0.08s,
visibility 0s linear 0s;
}
.ch-book-step.is-leaving {
opacity: 0;
transform: translateY(-12px);
filter: blur(3px);
visibility: visible;
pointer-events: none;
}
.ch-book-step.is-entering {
opacity: 0;
transform: translateY(14px);
filter: blur(4px);
}
/* ══════ Date-Chip (im Time-Step, oben — Click → zurück zum Datum) ══════ */
.ch-book-date-chip {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px 7px 8px;
background: linear-gradient(135deg, #f0f7f7 0%, #e8f0f0 100%);
border: 1.5px solid rgba(71,106,111,0.22);
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.76rem; font-weight: 600;
color: #2A343D;
cursor: pointer;
transition: background 0.22s cubic-bezier(0.22,0.61,0.36,1),
border-color 0.22s ease,
transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.22s ease;
position: relative;
}
.ch-book-date-chip:hover {
background: linear-gradient(135deg, #e8f0f0 0%, #ddeaea 100%);
border-color: rgba(71,106,111,0.4);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(71,106,111,0.18);
}
.ch-book-date-chip:active { transform: translateY(0) scale(0.98); }
.ch-book-date-chip .chip-arr {
color: #476A6F;
transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.ch-book-date-chip:hover .chip-arr { transform: translateX(-2px); }
.ch-book-date-chip .chip-cal { color: #476A6F; }
.ch-book-date-chip .chip-edit {
font-size: 0.62rem; font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.06em;
padding-left: 4px;
border-left: 1px solid rgba(148,163,184,0.4);
margin-left: 2px;
}
/* Gewähltes Datum kurz "feiern" */
.ch-book-cal-sel.is-just-picked {
animation: chBookDayPick 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes chBookDayPick {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(71,106,111,0.5); }
50% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(71,106,111,0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(71,106,111,0); }
}
/* ══════ Slot-Rows: gestaffeltes Reveal beim Step-Wechsel ══════
Animation NUR beim Step-Eintritt — nicht bei jedem Slot-Klick (Re-Render). */
.ch-book-step--time.slots-revealing .ch-book-slot-row {
animation: chBookSlotIn 0.42s cubic-bezier(0.16,0.84,0.32,1) both;
}
.ch-book-step--time.slots-revealing .ch-book-slot-row:nth-child(1) { animation-delay: 0.04s; }
.ch-book-step--time.slots-revealing .ch-book-slot-row:nth-child(2) { animation-delay: 0.10s; }
.ch-book-step--time.slots-revealing .ch-book-slot-row:nth-child(3) { animation-delay: 0.16s; }
.ch-book-step--time.slots-revealing .ch-book-slot-row:nth-child(4) { animation-delay: 0.22s; }
.ch-book-step--time.slots-revealing .ch-book-slot-row:nth-child(5) { animation-delay: 0.28s; }
.ch-book-step--time.slots-revealing .ch-book-slot-row:nth-child(n+6) { animation-delay: 0.34s; }
@keyframes chBookSlotIn {
from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
.ch-book-step, .ch-book-step-connector span,
.ch-book-success-icon--pop, .ch-book-success-icon--pop svg, .ch-book-success-ring,
.ch-book-success-title, .ch-book-success-date, .ch-book-success-note,
.ch-book-step--time.is-active .ch-book-slot-row {
animation: none !important;
transition: opacity 0.18s ease, visibility 0s !important;
filter: none !important;
transform: none !important;
}
}
/* ══════ AI Markdown Doc-Card (Deck-Style Vorschau im Chat) ══════
Erinnert an die Template-Decks: gehobenes Papier, weiche Schatten,
kleiner Tilt beim Hover, Klick öffnet die Fullscreen-Vorschau. */
.ch-md-card {
margin: 10px 0 4px;
background: #ffffff;
border-radius: 16px;
border: 1px solid rgba(42,52,61,0.08);
box-shadow: none;
overflow: hidden;
cursor: pointer;
transition: transform 0.34s cubic-bezier(0.16,0.84,0.32,1),
box-shadow 0.34s cubic-bezier(0.16,0.84,0.32,1),
border-color 0.22s ease;
animation: chMdCardIn 0.5s cubic-bezier(0.16,0.84,0.32,1) both;
}
@keyframes chMdCardIn {
0% { opacity: 0; transform: translateY(8px) scale(0.985); filter: blur(3px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.ch-md-card:hover {
transform: translateY(-2px);
box-shadow: none;
border-color: rgba(42,52,61,0.15);
}
.ch-md-card:hover .ch-md-card-paper { transform: translateY(-1px) rotate(-0.4deg); }
.ch-md-card-paper {
position: relative;
margin: 14px 14px 10px;
background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%);
border-radius: 11px;
min-height: 132px;
overflow: hidden;
border: 1px solid rgba(42,52,61,0.06);
box-shadow: none;
transition: transform 0.34s cubic-bezier(0.16,0.84,0.32,1);
}
.ch-md-card-paper::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 22px;
background: linear-gradient(180deg, rgba(71,106,111,0.06) 0%, transparent 100%);
pointer-events: none;
}
.ch-md-card-paper-inner {
position: relative;
padding: 18px 18px 14px;
z-index: 1;
}
.ch-md-card-paper-title {
font-family: 'Inter', sans-serif;
font-size: 1.02rem;
font-weight: 700;
color: #1a1f24;
line-height: 1.28;
letter-spacing: -0.01em;
margin-bottom: 7px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ch-md-card-paper-preview {
font-family: 'Inter', sans-serif;
font-size: 0.74rem;
color: #6b7a87;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ch-md-card-paper-fade {
position: absolute; left: 0; right: 0; bottom: 0; height: 38px;
background: linear-gradient(180deg, rgba(244,246,248,0) 0%, #f4f6f8 100%);
pointer-events: none;
}
.ch-md-card-meta {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px 12px;
border-top: 1px solid rgba(42,52,61,0.05);
}
.ch-md-card-file {
display: flex; align-items: center; gap: 9px;
flex: 1; min-width: 0;
}
.ch-md-card-file-ico {
width: 30px; height: 30px;
border-radius: 9px;
background: linear-gradient(135deg, #2A343D 0%, #3d515e 100%);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: none;
}
.ch-md-card-file-info { min-width: 0; }
.ch-md-card-file-name {
font-family: 'Inter', sans-serif;
font-size: 0.79rem; font-weight: 600;
color: #1a1f24;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 220px;
}
.ch-md-card-file-sub {
font-family: 'Inter', sans-serif;
font-size: 0.66rem;
color: #94a3b8;
margin-top: 1px;
}
.ch-md-card-open {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px;
border: none;
background: linear-gradient(135deg, #2A343D, #3d515e);
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 0.74rem; font-weight: 600;
border-radius: 999px;
cursor: pointer;
transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.22s ease, opacity 0.22s ease;
box-shadow: none;
flex-shrink: 0;
}
.ch-md-card-open:hover {
transform: translateY(-1px) scale(1.03);
box-shadow: none;
}
.ch-md-card-open:active { transform: translateY(0) scale(0.98); }
.ch-md-card-open svg { transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
.ch-md-card:hover .ch-md-card-open svg { transform: translateX(2px); }
/* ══════ Inline MD-Viewer (ersetzt Chat-Inhalt) ══════ */
.ch-md-viewer {
position: absolute; inset: 0;
z-index: 9950;
display: flex;
opacity: 0;
pointer-events: none;
background: #ffffff;
transition: opacity 0.30s cubic-bezier(0.16,0.84,0.32,1);
border-radius: inherit;
overflow: hidden;
}
.ch-md-viewer.is-open { opacity: 1; pointer-events: auto; }
.ch-md-viewer-backdrop { display: none; }
.ch-md-viewer-frame {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%);
display: flex; flex-direction: column;
overflow: hidden;
transform: translateX(10%);
transition: transform 0.36s cubic-bezier(0.16,0.84,0.32,1);
}
.ch-md-viewer.is-open .ch-md-viewer-frame {
transform: translateX(0);
}
.ch-md-viewer-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: linear-gradient(180deg, #f8fafb 0%, #f1f5f8 100%);
border-bottom: 1px solid rgba(42,52,61,0.08);
flex-shrink: 0;
}
.ch-md-viewer-file {
display: inline-flex; align-items: center; gap: 9px;
min-width: 0;
}
.ch-md-viewer-ico {
width: 26px; height: 26px;
border-radius: 8px;
background: linear-gradient(135deg, #2A343D 0%, #3d515e 100%);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: none;
}
.ch-md-viewer-fname {
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 0.82rem; font-weight: 600;
color: #1a1f24;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 140px;
}
.ch-md-viewer-actions {
display: inline-flex; align-items: center; gap: 6px;
flex-shrink: 0;
}
.ch-md-viewer-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 11px;
background: #fff;
border: 1px solid rgba(42,52,61,0.12);
border-radius: 9px;
font-family: 'Inter', sans-serif;
font-size: 0.74rem; font-weight: 600;
color: #2A343D;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease,
transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
color 0.18s ease;
box-shadow: none;
}
.ch-md-viewer-btn:hover {
background: #f4f6f8;
border-color: rgba(42,52,61,0.22);
transform: translateY(-1px);
box-shadow: none;
}
.ch-md-viewer-btn:active { transform: translateY(0) scale(0.97); }
.ch-md-viewer-btn--primary {
background: linear-gradient(135deg, #2A343D, #3d515e);
color: #fff;
border-color: transparent;
}
.ch-md-viewer-btn--primary:hover {
background: linear-gradient(135deg, #1a1f24, #2a3640);
border-color: transparent;
color: #fff;
}
.ch-md-viewer-btn.is-copied {
background: #f0f7f7;
border-color: rgba(71,106,111,0.4);
color: #476A6F;
}
.ch-md-viewer-close {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: none;
border-radius: 9px;
color: #64748b;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.ch-md-viewer-close:hover {
background: rgba(42,52,61,0.07);
color: #1a1f24;
transform: rotate(90deg);
}
.ch-md-viewer-scroll {
flex: 1; min-height: 0;
overflow-y: auto;
padding: 38px clamp(20px, 5vw, 64px) 56px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.ch-md-viewer-scroll::-webkit-scrollbar { width: 10px; }
.ch-md-viewer-scroll::-webkit-scrollbar-track { background: transparent; }
.ch-md-viewer-scroll::-webkit-scrollbar-thumb {
background: rgba(42,52,61,0.18);
border-radius: 999px;
border: 2px solid #fcfdfe;
}
.ch-md-viewer-scroll::-webkit-scrollbar-thumb:hover { background: rgba(42,52,61,0.3); }
.ch-md-viewer-doc {
max-width: 720px;
margin: 0 auto;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #2A343D;
line-height: 1.7;
font-size: 15px;
animation: chMdViewerDocIn 0.5s cubic-bezier(0.16,0.84,0.32,1) 0.10s both;
}
@keyframes chMdViewerDocIn {
from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.ch-md-viewer-doc .mdv-h1 {
font-size: 2.2rem;
font-weight: 800;
line-height: 1.15;
color: #1a1f24;
letter-spacing: -0.022em;
margin: 0 0 26px;
}
.ch-md-viewer-doc .mdv-h2 {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
color: #1a1f24;
letter-spacing: -0.012em;
margin: 38px 0 14px;
padding-top: 6px;
}
.ch-md-viewer-doc .mdv-h3 {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.3;
color: #2A343D;
margin: 28px 0 10px;
}
.ch-md-viewer-doc .mdv-h4 {
font-size: 0.96rem;
font-weight: 700;
color: #476A6F;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 22px 0 8px;
}
.ch-md-viewer-doc .mdv-h5, .ch-md-viewer-doc .mdv-h6 {
font-size: 0.86rem; font-weight: 700;
color: #2A343D;
margin: 18px 0 6px;
}
.ch-md-viewer-doc .mdv-p {
margin: 0 0 16px;
color: #2a343d;
}
.ch-md-viewer-doc .mdv-ul, .ch-md-viewer-doc .mdv-ol {
margin: 0 0 18px;
padding-left: 26px;
}
.ch-md-viewer-doc .mdv-ul li, .ch-md-viewer-doc .mdv-ol li {
margin-bottom: 7px;
padding-left: 2px;
}
.ch-md-viewer-doc .mdv-ul li::marker { color: #94a3b8; }
.ch-md-viewer-doc .mdv-ol li::marker { color: #476A6F; font-weight: 700; }
.ch-md-viewer-doc .mdv-quote {
margin: 18px 0;
padding: 14px 18px;
background: linear-gradient(180deg, #f8fafb 0%, #f4f7f9 100%);
border-left: 3px solid #476A6F;
border-radius: 8px;
color: #475569;
font-style: italic;
}
.ch-md-viewer-doc .mdv-code-inline {
background: rgba(71,106,111,0.10);
color: #476A6F;
padding: 2px 6px;
border-radius: 5px;
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 0.88em;
font-weight: 500;
}
.ch-md-viewer-doc .mdv-pre {
margin: 18px 0;
background: #1a1f24;
color: #e2e8f0;
border-radius: 11px;
padding: 16px 18px;
overflow-x: auto;
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 0.84rem;
line-height: 1.65;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.ch-md-viewer-doc .mdv-pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.ch-md-viewer-doc .mdv-link {
color: #476A6F;
text-decoration: underline;
text-decoration-color: rgba(71,106,111,0.4);
text-underline-offset: 3px;
transition: color 0.18s, text-decoration-color 0.18s;
}
.ch-md-viewer-doc .mdv-link:hover {
color: #2A343D;
text-decoration-color: #2A343D;
}
.ch-md-viewer-doc .mdv-hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(42,52,61,0.18), transparent);
margin: 28px 0;
}
.ch-md-viewer-doc .mdv-table {
width: 100%;
border-collapse: collapse;
margin: 18px 0;
font-size: 0.86rem;
border-radius: 11px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(42,52,61,0.06), inset 0 0 0 1px rgba(42,52,61,0.06);
}
.ch-md-viewer-doc .mdv-table th {
background: #2A343D;
color: #fff;
padding: 10px 14px;
text-align: left;
font-weight: 700;
font-size: 0.74rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ch-md-viewer-doc .mdv-table td {
padding: 10px 14px;
border-bottom: 1px solid #eef2f5;
color: #2a343d;
}
.ch-md-viewer-doc .mdv-table tr:last-child td { border-bottom: none; }
.ch-md-viewer-doc .mdv-table tr:nth-child(even) td { background: #fafbfc; }
.ch-md-viewer-doc strong { font-weight: 700; color: #1a1f24; }
.ch-md-viewer-doc em { font-style: italic; color: #2a343d; }
.ch-md-viewer-statusbar {
display: flex; align-items: center; gap: 8px;
padding: 9px 16px;
background: linear-gradient(180deg, #f4f6f8 0%, #eef2f5 100%);
border-top: 1px solid rgba(42,52,61,0.08);
flex-shrink: 0;
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
color: #64748b;
}
.ch-md-viewer-stat { display: inline-flex; align-items: center; gap: 6px; }
.ch-md-viewer-stat--ok { color: #166534; font-weight: 600; }
.ch-md-viewer-stat-pulse {
width: 7px; height: 7px;
background: #22c55e;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(34,197,94,0.55);
animation: chMdViewerPulse 1.6s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes chMdViewerPulse {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.ch-md-viewer-stat-dot { color: rgba(100,116,139,0.5); }
@media (max-width: 600px) {
.ch-md-viewer { padding: 0; }
.ch-md-viewer-frame { max-height: 100vh; border-radius: 0; }
.ch-md-viewer-fname { max-width: 140px; font-size: 0.74rem; }
.ch-md-viewer-btn span { display: none; }
.ch-md-viewer-btn { padding: 7px 9px; }
.ch-md-viewer-scroll { padding: 24px 18px 40px; }
.ch-md-viewer-doc .mdv-h1 { font-size: 1.75rem; }
.ch-md-viewer-doc .mdv-h2 { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
.ch-md-card, .ch-md-viewer-doc, .ch-md-viewer-frame,
.ch-md-viewer, .ch-md-viewer-stat-pulse {
animation: none !important;
transition: opacity 0.18s ease !important;
transform: none !important;
filter: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════
Live Audit Panel — keine Modal-Optik, sondern "Page-Swap":
Quove-Nav bleibt oben (= Brand-Anker), die Quove-Sections weichen
sanft zurück (scale + opacity + blur), und das Panel slidet von
unten herauf wie eine zweite Seitenansicht.
══════════════════════════════════════════════════════════════════ */
:root { --audit-top: 72px; }
#ch-audit-panel {
position: fixed;
top: var(--audit-top);
left: 0; right: 0; bottom: 0;
z-index: 9950;
display: flex;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s cubic-bezier(0.16,0.84,0.32,1);
}
#ch-audit-panel.is-open {
opacity: 1;
pointer-events: auto;
}
@media (min-width: 1024px) {
#ch-audit-panel { right: var(--chat-sidebar-width); }
}
/* Quove-Seite weicht beim Öffnen elegant zurück — Nav bleibt fixiert */
html.audit-active body > section,
html.audit-active body > footer {
transform: scale(0.97) translateY(8px);
opacity: 0.5;
filter: blur(2.5px) saturate(0.8);
pointer-events: none;
transform-origin: top center;
transition: transform 0.6s cubic-bezier(0.16,0.84,0.32,1),
opacity 0.5s ease,
filter 0.5s ease;
}
/* Smooth Reverse beim Schließen */
body > section, body > footer {
transition: transform 0.55s cubic-bezier(0.22,1,0.36,1),
opacity 0.45s ease,
filter 0.45s ease;
transform-origin: top center;
}
.ch-audit-backdrop {
position: absolute; inset: 0;
background:
radial-gradient(120% 70% at 50% 110%, rgba(71,106,111,0.10) 0%, transparent 60%),
linear-gradient(180deg, rgba(244,247,250,0.55) 0%, rgba(244,247,250,0.92) 100%);
backdrop-filter: blur(20px) saturate(1.3);
-webkit-backdrop-filter: blur(20px) saturate(1.3);
cursor: pointer;
}
.ch-audit-frame {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 1100px;
height: 100%;
background: linear-gradient(180deg, #fcfdfe 0%, #f4f7fa 100%);
display: flex; flex-direction: column;
overflow: hidden;
transform: translateY(40px) scale(0.97);
opacity: 0;
transform-origin: bottom center;
transition: transform 0.55s cubic-bezier(0.16,0.84,0.32,1),
opacity 0.45s cubic-bezier(0.16,0.84,0.32,1);
box-shadow:
0 -20px 60px rgba(20,24,28,0.14),
0 -6px 20px rgba(20,24,28,0.08),
0 0 0 1px rgba(255,255,255,0.5) inset;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
#ch-audit-panel.is-open .ch-audit-frame {
transform: translateY(0) scale(1);
opacity: 1;
}
@media (min-width: 768px) {
.ch-audit-frame {
margin: 14px auto 0;
max-height: calc(100% - 14px);
border-radius: 22px;
max-width: min(1100px, calc(100vw - 36px));
}
}
@media (min-width: 1024px) {
.ch-audit-frame {
max-width: min(1100px, calc(100vw - var(--chat-sidebar-width) - 36px));
}
}
/* Restored Session = sofortiges Fade ohne Re-Slide (kein doppelter Animations-Eindruck) */
#ch-audit-panel.is-restored .ch-audit-frame {
transition: opacity 0.3s ease;
transform: translateY(0) scale(1);
}
/* ── Brand-Bar: Quove-Logo + Live-Pill + Close ── */
.ch-audit-brandbar {
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 14px 18px;
background:
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88)),
linear-gradient(135deg, rgba(71,106,111,0.06), rgba(103,92,142,0.05));
border-bottom: 1px solid rgba(42,52,61,0.08);
flex-shrink: 0;
}
.ch-audit-brand {
display: inline-flex; align-items: center; gap: 12px;
min-width: 0;
}
.ch-audit-brand-sep {
width: 1px; height: 14px;
background: rgba(42,52,61,0.18);
flex-shrink: 0;
}
.ch-audit-brand-host {
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 0.74rem;
font-weight: 600;
color: #2A343D;
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
max-width: 280px;
}
.ch-audit-brand-label {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Inter', sans-serif;
font-size: 0.74rem; font-weight: 700;
color: #2A343D;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
min-width: 0;
}
.ch-audit-brand-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: linear-gradient(115deg, #ef4444 0%, #fca5a5 50%, #ef4444 100%);
background-size: 220% 100%;
animation: chBrandShimmer 1.7s linear infinite;
flex-shrink: 0;
}
@keyframes chBrandShimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.ch-audit-close {
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: none;
border-radius: 10px;
color: #64748b;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.26s cubic-bezier(0.34,1.56,0.64,1);
}
.ch-audit-close:hover {
background: rgba(42,52,61,0.07);
color: #1a1f24;
transform: rotate(90deg);
}
.ch-audit-scroll {
flex: 1; min-height: 0;
overflow-y: auto;
padding: clamp(18px, 3vw, 28px) clamp(16px, 3vw, 32px) 32px;
-webkit-overflow-scrolling: touch;
}
.ch-audit-scroll::-webkit-scrollbar { width: 10px; }
.ch-audit-scroll::-webkit-scrollbar-thumb {
background: rgba(42,52,61,0.18);
border-radius: 999px;
border: 2px solid #f4f7fa;
}
/* ── macOS-style Browser-Frame ── */
.ch-audit-browser {
background: #ffffff;
border-radius: 14px;
overflow: hidden;
box-shadow:
0 24px 60px rgba(20,24,28,0.14),
0 6px 18px rgba(20,24,28,0.08),
0 0 0 1px rgba(42,52,61,0.06);
margin-bottom: 22px;
}
.ch-audit-browser-chrome {
display: flex; align-items: center; gap: 14px;
padding: 11px 14px;
background: linear-gradient(180deg, #f0f2f5 0%, #e6eaee 100%);
border-bottom: 1px solid rgba(42,52,61,0.06);
}
.ch-audit-traffic {
display: inline-flex; align-items: center; gap: 7px;
flex-shrink: 0;
}
.ch-audit-traffic-dot {
width: 12px; height: 12px;
border-radius: 50%;
display: block;
box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06) inset;
}
.ch-audit-traffic-red { background: linear-gradient(180deg, #ff6058, #e3493f); }
.ch-audit-traffic-yellow { background: linear-gradient(180deg, #ffbd2e, #e2a01d); }
.ch-audit-traffic-green { background: linear-gradient(180deg, #27ca41, #1aa531); }
.ch-audit-url-pill {
flex: 1; min-width: 0;
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 14px;
background: #fff;
border: 1px solid rgba(42,52,61,0.10);
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
color: #2a343d;
font-weight: 500;
box-shadow: inset 0 1px 2px rgba(42,52,61,0.04);
}
.ch-audit-url-lock { color: #166534; flex-shrink: 0; display: inline-flex; }
.ch-audit-url-text {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-audit-chrome-spacer {
width: 56px; flex-shrink: 0;
/* Optisch balanciert Traffic-Lights links */
}
/* ── Viewport (Screenshot-Bühne) ── */
.ch-audit-viewport {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background: linear-gradient(180deg, #f8fafb 0%, #eef2f5 100%);
overflow: hidden;
}
.ch-audit-shot {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.16,0.84,0.32,1) 0.10s,
filter 0.6s ease;
}
.ch-audit-shot.is-loaded {
opacity: 1;
}
.ch-audit-shot-skeleton {
position: absolute; inset: 0;
padding: 36px clamp(28px, 6%, 60px);
display: flex; flex-direction: column;
gap: 12px;
background: linear-gradient(180deg, #f8fafb 0%, #eef2f5 100%);
transition: opacity 0.4s ease;
}
.ch-audit-shot.is-loaded ~ .ch-audit-shot-skeleton { opacity: 0; pointer-events: none; }
.ch-audit-skeleton-bar {
height: 12px;
border-radius: 6px;
background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 40%, #d6dde4 60%, #e2e8f0 100%);
background-size: 300% 100%;
animation: chAuditSkeleton 1.7s ease-in-out infinite;
}
@keyframes chAuditSkeleton {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.ch-audit-skeleton-status {
margin-top: auto;
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 600;
color: #64748b;
letter-spacing: 0.01em;
align-self: flex-start;
padding: 7px 13px;
background: #fff;
border: 1px solid rgba(42,52,61,0.10);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(42,52,61,0.06);
}
.ch-audit-skeleton-spinner {
width: 12px; height: 12px;
border: 2px solid rgba(71,106,111,0.18);
border-top-color: #476A6F;
border-radius: 50%;
animation: chAuditSpin 0.85s linear infinite;
flex-shrink: 0;
}
@keyframes chAuditSpin { to { transform: rotate(360deg); } }
/* ── Dot-Grid Shimmer (kein Scanner, kein Glow, nur Mask-Shimmer) ──
Subtile Punkte-Matrix wird nur innerhalb einer diagonalen Shimmer-Bande sichtbar.
Die Bande wandert endlos über das Viewport → erzeugt "Tech-Vermessung"-Anmutung
ohne Schatten, ohne Glow, rein durch CSS-Mask-Animation. */
.ch-audit-dotgrid {
position: absolute; inset: 0;
pointer-events: none;
background-image: radial-gradient(circle, rgba(42,52,61,0.42) 1.2px, transparent 1.6px);
background-size: 22px 22px;
background-position: 0 0;
mix-blend-mode: multiply;
opacity: 0;
-webkit-mask-image: linear-gradient(110deg,
transparent 8%,
rgba(0,0,0,0.5) 28%,
rgba(0,0,0,0.92) 46%,
rgba(0,0,0,0.92) 54%,
rgba(0,0,0,0.5) 72%,
transparent 92%);
mask-image: linear-gradient(110deg,
transparent 8%,
rgba(0,0,0,0.5) 28%,
rgba(0,0,0,0.92) 46%,
rgba(0,0,0,0.92) 54%,
rgba(0,0,0,0.5) 72%,
transparent 92%);
-webkit-mask-size: 240% 100%;
mask-size: 240% 100%;
-webkit-mask-position: 220% 0;
mask-position: 220% 0;
transition: opacity 0.55s ease;
}
#ch-audit-panel.is-scanning .ch-audit-dotgrid {
opacity: 1;
animation: chDotgridShimmer 3.6s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes chDotgridShimmer {
0% { -webkit-mask-position: 220% 0; mask-position: 220% 0; }
100% { -webkit-mask-position: -120% 0; mask-position: -120% 0; }
}
/* Zarter Permanent-Hauch nach dem Scan: Dot-Grid bleibt mit sehr niedriger Opacity sichtbar */
#ch-audit-panel:not(.is-scanning) .ch-audit-dotgrid {
opacity: 0.18;
animation: none;
-webkit-mask-image: none; mask-image: none;
}
/* ── Marker auf dem Screenshot ── */
.ch-audit-markers {
position: absolute; inset: 0;
pointer-events: none;
}
.ch-audit-marker {
position: absolute;
transform: translate(-50%, -50%);
pointer-events: auto;
opacity: 0;
animation: chAuditMarkerIn 0.7s cubic-bezier(0.16,0.84,0.32,1) both;
}
@keyframes chAuditMarkerIn {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
60% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ch-audit-marker-dot {
width: 22px; height: 22px;
border-radius: 50%;
background: currentColor;
position: relative;
overflow: hidden;
cursor: pointer;
display: block;
isolation: isolate;
transition: transform 0.26s cubic-bezier(0.34,1.56,0.64,1);
}
/* Shimmer-Sweep über den Dot — kein Glow, nur Reflex-Streifen */
.ch-audit-marker-dot::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(115deg,
transparent 35%,
rgba(255,255,255,0.55) 50%,
transparent 65%);
background-size: 220% 100%;
background-position: 100% 0;
animation: chMarkerShimmer 2.6s cubic-bezier(0.45,0,0.55,1) infinite;
pointer-events: none;
z-index: 1;
}
@keyframes chMarkerShimmer {
0% { background-position: 100% 0; }
100% { background-position: -150% 0; }
}
.ch-audit-marker:hover .ch-audit-marker-dot { transform: scale(1.22); }
.ch-audit-marker.is-active .ch-audit-marker-dot { transform: scale(1.18); }
.ch-audit-marker-num {
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 800;
color: #ffffff;
line-height: 1;
z-index: 2;
}
/* Severity-Farben */
.ch-audit-marker--crit { color: #dc2626; }
.ch-audit-marker--warn { color: #ea580c; }
.ch-audit-marker--info { color: #2563eb; }
.ch-audit-marker--ok { color: #16a34a; }
/* Annotation-Card neben Marker (sichtbar bei Hover/Active) — clean, kein Drop-Shadow */
.ch-audit-marker-card {
position: absolute;
top: 28px; left: 18px;
min-width: 180px; max-width: 260px;
padding: 9px 12px;
background: rgba(20,24,28,0.96);
color: #fff;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: 'Inter', sans-serif;
font-size: 0.74rem;
line-height: 1.4;
opacity: 0;
pointer-events: none;
transform: translateY(-2px) scale(0.96);
transform-origin: top left;
transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.34,1.56,0.64,1);
z-index: 5;
}
.ch-audit-marker-card::before {
content: '';
position: absolute;
top: -6px; left: 10px;
width: 0; height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #1a1f24;
}
.ch-audit-marker:hover .ch-audit-marker-card,
.ch-audit-marker.is-active .ch-audit-marker-card {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Karten rechts vom Rand → links ausklappen */
.ch-audit-marker--right-edge .ch-audit-marker-card {
left: auto; right: 18px;
transform-origin: top right;
}
.ch-audit-marker--right-edge .ch-audit-marker-card::before {
left: auto; right: 10px;
}
.ch-audit-marker-card-title {
font-size: 0.62rem; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 3px;
opacity: 0.7;
}
.ch-audit-marker--crit .ch-audit-marker-card-title { color: #fca5a5; }
.ch-audit-marker--warn .ch-audit-marker-card-title { color: #fdba74; }
.ch-audit-marker--info .ch-audit-marker-card-title { color: #93c5fd; }
.ch-audit-marker--ok .ch-audit-marker-card-title { color: #86efac; }
.ch-audit-marker-card-body {
font-weight: 500;
color: #fff;
}
/* ── Findings-Liste ── */
.ch-audit-findings {
background: #ffffff;
border-radius: 14px;
overflow: hidden;
box-shadow:
0 6px 18px rgba(20,24,28,0.06),
0 0 0 1px rgba(42,52,61,0.06);
}
.ch-audit-findings-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid rgba(42,52,61,0.07);
}
.ch-audit-findings-title {
font-family: 'Inter', sans-serif;
font-size: 0.72rem; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #2A343D;
}
.ch-audit-findings-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 22px;
padding: 0 8px;
background: #1a1f24;
color: #fff;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.7rem; font-weight: 700;
font-variant-numeric: tabular-nums;
transition: transform 0.26s cubic-bezier(0.34,1.56,0.64,1);
}
.ch-audit-findings-count.is-bumped {
animation: chAuditCountBump 0.42s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes chAuditCountBump {
0% { transform: scale(1); }
50% { transform: scale(1.22); }
100% { transform: scale(1); }
}
/* ── Severity-Dashboard mit Filter-Chips ── */
.ch-audit-sev-bar {
display: flex; align-items: center; gap: 5px;
padding: 8px 10px;
border-bottom: 1px solid rgba(42,52,61,0.06);
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.ch-audit-sev-bar::-webkit-scrollbar { display: none; }
.ch-audit-sev-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 9px 5px 9px;
background: #f4f7fa;
border: 1px solid transparent;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.7rem; font-weight: 600;
color: #5a6b7a;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.20s cubic-bezier(0.22,0.61,0.36,1),
color 0.20s ease,
border-color 0.20s ease,
transform 0.20s cubic-bezier(0.34,1.56,0.64,1);
}
.ch-audit-sev-chip:hover { transform: translateY(-1px); background: #eaeff4; }
.ch-audit-sev-chip:active { transform: translateY(0) scale(0.97); }
.ch-audit-sev-chip-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.ch-audit-sev-chip-lbl { letter-spacing: 0.02em; }
.ch-audit-sev-chip-n {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 5px;
background: rgba(42,52,61,0.10);
border-radius: 999px;
font-size: 0.62rem; font-weight: 700;
font-variant-numeric: tabular-nums;
color: inherit;
transition: background 0.20s ease, color 0.20s ease, transform 0.30s cubic-bezier(0.34,1.56,0.64,1);
}
.ch-audit-sev-chip-n.is-bumped {
animation: chAuditCountBump 0.42s cubic-bezier(0.34,1.56,0.64,1);
}
/* Severity-Farben für die Chips */
.ch-audit-sev-chip--crit { color: #dc2626; }
.ch-audit-sev-chip--warn { color: #ea580c; }
.ch-audit-sev-chip--info { color: #2563eb; }
.ch-audit-sev-chip--ok { color: #16a34a; }
.ch-audit-sev-chip--all { color: #2A343D; }
/* Aktiver Chip: gefüllter Severity-Hintergrund, weiße Schrift */
.ch-audit-sev-chip.is-active {
color: #fff;
border-color: transparent;
}
.ch-audit-sev-chip--all.is-active { background: #2A343D; }
.ch-audit-sev-chip--crit.is-active { background: #dc2626; }
.ch-audit-sev-chip--warn.is-active { background: #ea580c; }
.ch-audit-sev-chip--info.is-active { background: #2563eb; }
.ch-audit-sev-chip--ok.is-active { background: #16a34a; }
.ch-audit-sev-chip.is-active .ch-audit-sev-chip-dot { background: #fff; }
.ch-audit-sev-chip.is-active .ch-audit-sev-chip-n {
background: rgba(255,255,255,0.20);
color: #fff;
}
/* Chips mit Count 0 → ausgegraut */
.ch-audit-sev-chip.is-empty:not(.is-active) {
opacity: 0.4;
pointer-events: none;
}
.ch-audit-finding.is-filtered-out {
display: none;
}
.ch-audit-findings-list {
padding: 6px 8px 10px;
display: flex; flex-direction: column; gap: 4px;
min-height: 80px;
}
/* ── Quick-Switch FAB (Mobile only — Chat-Wechsel ohne Audit zu verlieren) ── */
.ch-audit-tochat {
display: none;
position: absolute;
bottom: 18px; right: 18px;
z-index: 10;
align-items: center; gap: 7px;
padding: 11px 16px 11px 13px;
background: linear-gradient(135deg, #2A343D 0%, #3d515e 100%);
border: none;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.78rem; font-weight: 700;
color: #fff;
letter-spacing: 0.01em;
cursor: pointer;
box-shadow: 0 8px 24px rgba(20,24,28,0.28), 0 2px 6px rgba(20,24,28,0.18);
transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.22s ease;
animation: chFabIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.4s both;
}
@keyframes chFabIn {
from { opacity: 0; transform: translateY(20px) scale(0.7); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ch-audit-tochat:hover { transform: translateY(-2px) scale(1.03); }
.ch-audit-tochat:active { transform: translateY(0) scale(0.97); }
.ch-audit-tochat svg {
opacity: 0.95;
transform: scaleX(-1); /* horizontal gespiegelt — Chat-Bubble zeigt nach links */
}
@media (max-width: 1023px) {
#ch-audit-panel.is-open .ch-audit-tochat { display: inline-flex; }
}
.ch-audit-findings-empty {
display: flex; align-items: center; gap: 10px;
padding: 16px 14px;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
color: #64748b;
}
.ch-audit-findings-empty-text {
transition: opacity 0.30s ease, transform 0.30s cubic-bezier(0.16,0.84,0.32,1);
display: inline-block;
min-height: 1.1em;
}
.ch-audit-findings-empty-text.is-changing {
opacity: 0;
transform: translateY(-2px);
}
/* Mini-Indicator: reines Shimmer, kein Box-Shadow-Halo */
.ch-audit-pulse-mini {
width: 9px; height: 9px;
border-radius: 50%;
background: linear-gradient(115deg, #476A6F 0%, #7da3a7 50%, #476A6F 100%);
background-size: 220% 100%;
animation: chMiniShimmer 1.8s linear infinite;
flex-shrink: 0;
}
@keyframes chMiniShimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.ch-audit-finding {
display: flex; align-items: flex-start; gap: 11px;
padding: 11px 14px;
background: transparent;
border-radius: 11px;
cursor: pointer;
text-align: left;
border: none;
font-family: 'Inter', sans-serif;
transition: background 0.18s ease, transform 0.22s cubic-bezier(0.16,0.84,0.32,1);
animation: chAuditFindingIn 0.46s cubic-bezier(0.16,0.84,0.32,1) both;
position: relative;
}
@keyframes chAuditFindingIn {
from { opacity: 0; transform: translateX(-6px); filter: blur(2px); }
to { opacity: 1; transform: translateX(0); filter: blur(0); }
}
.ch-audit-finding:hover { background: #f4f7fa; }
.ch-audit-finding.is-active { background: #eef2f5; }
.ch-audit-finding-num {
flex-shrink: 0;
width: 24px; height: 24px;
border-radius: 50%;
background: rgba(255,255,255,0.95);
border: 2px solid currentColor;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800;
color: currentColor;
margin-top: 1px;
}
.ch-audit-finding--crit .ch-audit-finding-num { color: #dc2626; background: #fef2f2; }
.ch-audit-finding--warn .ch-audit-finding-num { color: #ea580c; background: #fff7ed; }
.ch-audit-finding--info .ch-audit-finding-num { color: #2563eb; background: #eff6ff; }
.ch-audit-finding--ok .ch-audit-finding-num { color: #16a34a; background: #f0fdf4; }
.ch-audit-finding-body { flex: 1; min-width: 0; }
.ch-audit-finding-title {
font-size: 0.83rem; font-weight: 600;
color: #1a1f24;
line-height: 1.35;
margin-bottom: 2px;
}
.ch-audit-finding-severity {
display: inline-flex; align-items: center; gap: 5px;
font-size: 0.6rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
}
.ch-audit-finding--crit .ch-audit-finding-severity { color: #dc2626; }
.ch-audit-finding--warn .ch-audit-finding-severity { color: #ea580c; }
.ch-audit-finding--info .ch-audit-finding-severity { color: #2563eb; }
.ch-audit-finding--ok .ch-audit-finding-severity { color: #16a34a; }
@media (prefers-reduced-motion: reduce) {
#ch-audit-panel, .ch-audit-frame, .ch-audit-shot, .ch-audit-scanline,
.ch-audit-marker, .ch-audit-marker-dot, .ch-audit-skeleton-bar,
.ch-audit-finding, .ch-audit-brand-pulse, .ch-audit-pulse-mini,
.ch-audit-findings-count {
animation: none !important;
transition: opacity 0.18s ease !important;
transform: none !important;
filter: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════
Reconnect-Snackbar — schmaler Pill am unteren Bildschirmrand.
Drei Zustände: reconnecting (Spinner), success (✓ grün), failed (rot + Action).
══════════════════════════════════════════════════════════════════ */
#qc-snackbar {
position: fixed;
left: 50%;
bottom: 24px;
transform: translate(-50%, 12px);
z-index: 10000;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 16px 11px 14px;
background: #1a1f24;
color: #fff;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
font-weight: 500;
box-shadow:
0 12px 32px rgba(20,24,28,0.32),
0 2px 6px rgba(20,24,28,0.16);
opacity: 0;
pointer-events: none;
transition: opacity 0.30s cubic-bezier(0.16,0.84,0.32,1),
transform 0.36s cubic-bezier(0.16,0.84,0.32,1),
background 0.30s ease;
}
#qc-snackbar.is-visible {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
#qc-snackbar.is-success { background: linear-gradient(135deg, #16a34a, #15803d); }
#qc-snackbar.is-failed { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.qc-snack-spinner {
width: 13px; height: 13px;
border: 2px solid rgba(255,255,255,0.28);
border-top-color: #fff;
border-radius: 50%;
flex-shrink: 0;
animation: qcSnackSpin 0.85s linear infinite;
}
#qc-snackbar.is-success .qc-snack-spinner,
#qc-snackbar.is-failed .qc-snack-spinner { display: none; }
@keyframes qcSnackSpin { to { transform: rotate(360deg); } }
#qc-snackbar.is-success::before {
content: '';
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
flex-shrink: 0;
}
#qc-snackbar.is-failed::before {
content: '';
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
flex-shrink: 0;
}
.qc-snack-action {
margin-left: 4px;
padding: 4px 11px;
background: rgba(255,255,255,0.14);
border: none;
border-radius: 999px;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 0.76rem; font-weight: 600;
cursor: pointer;
transition: background 0.18s ease, transform 0.20s cubic-bezier(0.34,1.56,0.64,1);
}
.qc-snack-action:hover { background: rgba(255,255,255,0.26); transform: scale(1.04); }
.qc-snack-action[hidden] { display: none; }
/* ══════════════════════════════════════════════════════════════════
Audit History Sheet ("Vorherige Audits") — eigenes Overlay,
öffnet sich aus dem Chat-Menü. Modal mit Backdrop, Card-Liste.
══════════════════════════════════════════════════════════════════ */
#ch-audit-history-sheet {
position: fixed; inset: 0;
z-index: 9970;
display: flex; align-items: center; justify-content: center;
padding: 24px 16px;
opacity: 0;
pointer-events: none;
transition: opacity 0.32s cubic-bezier(0.16,0.84,0.32,1);
}
#ch-audit-history-sheet.is-open {
opacity: 1;
pointer-events: auto;
}
.ch-ah-backdrop {
position: absolute; inset: 0;
background: rgba(20,24,28,0.40);
backdrop-filter: blur(10px) saturate(1.2);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
cursor: pointer;
}
.ch-ah-frame {
position: relative;
width: 100%;
max-width: 640px;
max-height: calc(100vh - 48px);
background: linear-gradient(180deg, #fcfdfe 0%, #f4f7fa 100%);
border-radius: 18px;
display: flex; flex-direction: column;
overflow: hidden;
transform: translateY(20px) scale(0.985);
transition: transform 0.42s cubic-bezier(0.16,0.84,0.32,1);
box-shadow:
0 24px 60px rgba(20,24,28,0.24),
0 0 0 1px rgba(255,255,255,0.4) inset;
}
#ch-audit-history-sheet.is-open .ch-ah-frame {
transform: translateY(0) scale(1);
}
.ch-ah-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
background: linear-gradient(180deg, #f8fafb 0%, #f1f5f8 100%);
border-bottom: 1px solid rgba(42,52,61,0.08);
flex-shrink: 0;
}
.ch-ah-title {
display: inline-flex; align-items: center; gap: 9px;
font-family: 'Inter', sans-serif;
font-size: 0.88rem; font-weight: 700;
color: #1a1f24;
letter-spacing: 0.01em;
}
.ch-ah-actions { display: inline-flex; align-items: center; gap: 6px; }
.ch-ah-btn-ghost {
padding: 6px 10px;
background: transparent;
border: none;
font-family: 'Inter', sans-serif;
font-size: 0.72rem; font-weight: 600;
color: #94a3b8;
cursor: pointer;
border-radius: 8px;
transition: background 0.18s ease, color 0.18s ease;
}
.ch-ah-btn-ghost:hover { background: rgba(239,68,68,0.08); color: #dc2626; }
.ch-ah-close {
width: 30px; height: 30px;
background: transparent; border: none; border-radius: 9px;
color: #64748b; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.18s ease, transform 0.26s cubic-bezier(0.34,1.56,0.64,1), color 0.18s ease;
}
.ch-ah-close:hover { background: rgba(42,52,61,0.07); color: #1a1f24; transform: rotate(90deg); }
.ch-ah-body {
flex: 1; min-height: 0;
overflow-y: auto;
padding: 16px;
display: flex; flex-direction: column; gap: 10px;
}
.ch-ah-body::-webkit-scrollbar { width: 10px; }
.ch-ah-body::-webkit-scrollbar-thumb {
background: rgba(42,52,61,0.18); border-radius: 999px; border: 2px solid #f4f7fa;
}
/* Empty-State */
.ch-ah-empty {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 40px 24px;
gap: 10px;
}
.ch-ah-empty-ico {
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(71,106,111,0.10);
color: #476A6F;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 4px;
}
.ch-ah-empty-title {
font-family: 'Inter', sans-serif;
font-size: 0.95rem; font-weight: 700; color: #1a1f24;
}
.ch-ah-empty-sub {
font-family: 'Inter', sans-serif;
font-size: 0.78rem; color: #6b7a87; line-height: 1.55;
max-width: 380px;
}
/* Host-Group Card */
.ch-ah-host {
background: #fff;
border-radius: 14px;
border: 1px solid rgba(42,52,61,0.08);
box-shadow: 0 1px 3px rgba(42,52,61,0.04);
overflow: hidden;
transition: transform 0.30s cubic-bezier(0.16,0.84,0.32,1),
box-shadow 0.30s ease, border-color 0.20s ease;
animation: chAhIn 0.42s cubic-bezier(0.16,0.84,0.32,1) both;
}
@keyframes chAhIn {
from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.ch-ah-host:hover {
transform: translateY(-1px);
border-color: rgba(42,52,61,0.16);
box-shadow: 0 6px 18px rgba(42,52,61,0.08);
}
.ch-ah-host-head {
display: flex; align-items: center; gap: 11px;
padding: 12px 14px;
cursor: pointer;
background: transparent;
border: none;
text-align: left;
width: 100%;
font: inherit;
}
.ch-ah-host-fav {
width: 22px; height: 22px;
border-radius: 6px;
background: #f1f5f9;
object-fit: cover;
flex-shrink: 0;
}
.ch-ah-host-info { flex: 1; min-width: 0; }
.ch-ah-host-name {
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
font-size: 0.82rem; font-weight: 600;
color: #1a1f24;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-ah-host-meta {
font-family: 'Inter', sans-serif;
font-size: 0.68rem; color: #94a3b8;
margin-top: 2px;
display: inline-flex; align-items: center; gap: 6px;
}
.ch-ah-host-meta .sep { opacity: 0.5; }
.ch-ah-host-sev {
display: inline-flex; align-items: center; gap: 4px;
margin-left: auto;
flex-shrink: 0;
}
.ch-ah-host-sev-dot {
display: inline-flex; align-items: center; gap: 3px;
font-family: 'Inter', sans-serif;
font-size: 0.7rem; font-weight: 700;
font-variant-numeric: tabular-nums;
padding: 2px 7px;
border-radius: 999px;
}
.ch-ah-host-sev-dot--crit { background: #fef2f2; color: #dc2626; }
.ch-ah-host-sev-dot--warn { background: #fff7ed; color: #ea580c; }
.ch-ah-host-sev-dot--info { background: #eff6ff; color: #2563eb; }
.ch-ah-host-sev-dot--ok { background: #f0fdf4; color: #16a34a; }
.ch-ah-host-chevron {
color: #94a3b8;
transition: transform 0.30s cubic-bezier(0.34,1.56,0.64,1);
flex-shrink: 0;
margin-left: 8px;
}
.ch-ah-host[data-expanded="true"] .ch-ah-host-chevron {
transform: rotate(90deg);
color: #476A6F;
}
.ch-ah-snaps {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.42s cubic-bezier(0.4,0,0.2,1);
}
.ch-ah-host[data-expanded="true"] .ch-ah-snaps {
grid-template-rows: 1fr;
}
.ch-ah-snaps-inner {
overflow: hidden;
min-height: 0;
border-top: 1px solid rgba(42,52,61,0.06);
padding: 8px;
display: flex; flex-direction: column; gap: 6px;
}
.ch-ah-snap {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px;
background: #f8fafb;
border-radius: 9px;
border: 1px solid transparent;
cursor: pointer;
text-align: left;
font: inherit;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.20s cubic-bezier(0.16,0.84,0.32,1);
}
.ch-ah-snap:hover { background: #eef2f5; border-color: rgba(71,106,111,0.22); transform: translateX(2px); }
.ch-ah-snap-when {
font-family: 'Inter', sans-serif;
font-size: 0.78rem; font-weight: 600;
color: #1a1f24;
flex: 1;
min-width: 0;
}
.ch-ah-snap-when-sub {
display: block;
font-size: 0.66rem; font-weight: 500;
color: #94a3b8;
margin-top: 2px;
}
.ch-ah-snap-counts {
display: inline-flex; align-items: center; gap: 4px;
flex-shrink: 0;
}
.ch-ah-snap-cnt {
font-family: 'Inter', sans-serif;
font-size: 0.66rem; font-weight: 700;
padding: 2px 6px;
border-radius: 999px;
font-variant-numeric: tabular-nums;
}
.ch-ah-snap-cnt--crit { background: #fef2f2; color: #dc2626; }
.ch-ah-snap-cnt--warn { background: #fff7ed; color: #ea580c; }
.ch-ah-snap-cnt--info { background: #eff6ff; color: #2563eb; }
.ch-ah-snap-cnt--ok { background: #f0fdf4; color: #16a34a; }
.ch-ah-snap-arr {
color: #cbd5e1;
transition: transform 0.20s cubic-bezier(0.34,1.56,0.64,1), color 0.18s ease;
}
.ch-ah-snap:hover .ch-ah-snap-arr { color: #476A6F; transform: translateX(2px); }
/* Menü-Badge: zeigt Anzahl gespeicherter Audit-Hosts */
.ch-audit-history-badge {
display: inline-flex; align-items: center; justify-content: center;
margin-left: auto;
min-width: 18px; height: 18px;
padding: 0 6px;
background: #675c8e;
color: #fff;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.62rem; font-weight: 800;
font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
#ch-audit-history-sheet, .ch-ah-frame, .ch-ah-host, .ch-ah-snap, .ch-ah-host-chevron, .ch-ah-snaps {
animation: none !important;
transition: opacity 0.18s ease !important;
transform: none !important;
filter: none !important;
}
}
/* Diff-Marker im laufenden Audit-Panel — Findings die NEU sind / nicht mehr da
im Vergleich zum letzten gespeicherten Snapshot dieses Hosts */
.ch-audit-finding[data-diff="new"] .ch-audit-finding-title::after {
content: 'NEU';
display: inline-block;
margin-left: 8px;
padding: 1px 6px;
background: #f0fdf4; color: #16a34a;
border-radius: 999px;
font-size: 0.55rem; font-weight: 800;
letter-spacing: 0.08em;
vertical-align: middle;
transform: translateY(-1px);
}
.ch-audit-finding[data-diff="new"] .ch-audit-finding-num {
box-shadow: inset 0 0 0 2px rgba(22,163,74,0.30);
}
.ch-audit-finding[data-diff="returning"] .ch-audit-finding-title {
opacity: 0.85;
}
/* Removed-Findings (Erfolgs-Story) als eigene leichte Pill am Ende der Liste */
.ch-audit-removed-list {
margin-top: 4px;
padding: 10px 12px;
border-radius: 11px;
background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
border: 1px solid rgba(22,163,74,0.18);
display: flex; flex-direction: column; gap: 6px;
}
.ch-audit-removed-head {
font-family: 'Inter', sans-serif;
font-size: 0.62rem; font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #16a34a;
display: inline-flex; align-items: center; gap: 6px;
}
.ch-audit-removed-item {
font-family: 'Inter', sans-serif;
font-size: 0.74rem; color: #4d6b56;
text-decoration: line-through;
text-decoration-color: rgba(22,163,74,0.5);
opacity: 0.85;
padding-left: 14px;
position: relative;
}
.ch-audit-removed-item::before {
content: '✓';
position: absolute; left: 0; top: 0;
color: #16a34a;
font-weight: 700;
text-decoration: none;
}
/* ── Lead Capture Form ── */
.ch-lead-form-bubble {
background: linear-gradient(135deg, #fff 0%, #f8fffe 100%);
border: 1.5px solid rgba(71,106,111,0.18);
border-radius: 0.28rem 1.1rem 1.1rem 1.1rem;
padding: 1rem 1.1rem 0.9rem;
box-shadow: 0 1px 5px rgba(42,52,61,0.07);
display: flex; flex-direction: column; gap: 10px;
}
.ch-lead-intro { font-size: 0.82rem; color: #1a1f24; line-height: 1.5; font-family: 'Inter', sans-serif; }
.ch-lead-intro strong { color: #476A6F; }
.ch-lead-fields { display: flex; flex-direction: column; gap: 7px; }
.ch-lead-field {
padding: 8px 11px; border: 1.5px solid rgba(42,52,61,0.13);
border-radius: 0.7rem; font-size: 0.81rem;
font-family: 'Inter', sans-serif; color: #1a1f24;
background: #F4F5F7; outline: none; width: 100%; box-sizing: border-box;
transition: border-color 0.18s, background 0.18s;
}
.ch-lead-field:focus { border-color: #476A6F; background: #fff; }
.ch-lead-actions { display: flex; gap: 8px; align-items: center; }
.ch-lead-submit {
flex: 1; padding: 9px 0; border: none; border-radius: 2rem;
background: #2A343D; color: #fff;
font-size: 0.8rem; font-weight: 700; font-family: 'Inter', sans-serif;
cursor: pointer; transition: background 0.18s, transform 0.15s;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ch-lead-submit:hover { background: #476A6F; transform: translateY(-1px); }
.ch-lead-skip {
font-size: 0.73rem; color: #94a3b8; font-family: 'Inter', sans-serif;
background: none; border: none; cursor: pointer; padding: 4px;
transition: color 0.15s;
}
.ch-lead-skip:hover { color: #64748b; }
.ch-lead-success {
text-align: center; padding: 6px 0 2px;
font-size: 0.82rem; color: #476A6F; font-weight: 600;
font-family: 'Inter', sans-serif;
}
/* ── Enterprise Skeleton & Shine System ── */
/* Gray skeleton sweep — LinkedIn/Facebook style */
@keyframes sk-sweep {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* Card shine pass — white reveal sweep over loaded cards */
@keyframes sk-shine-pass {
0% { transform: translateX(-120%) skewX(-15deg); }
100% { transform: translateX(220%) skewX(-15deg); }
}
/* Fade-out skeleton overlay */
@keyframes sk-fade-out {
to { opacity: 0; }
}
/* Injected gray placeholder block that sits over unloaded images */
.sk-placeholder {
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 3;
pointer-events: none;
background: linear-gradient(
90deg,
#e8eaed 0%,
#e8eaed 35%,
#f4f5f7 50%,
#e8eaed 65%,
#e8eaed 100%
);
background-size: 400% 100%;
animation: sk-sweep 1.6s linear infinite;
transition: opacity 0.35s ease;
}
.sk-placeholder.sk-done {
animation: sk-fade-out 0.35s ease forwards;
pointer-events: none;
}
/* Parent wrapper added by JS */
.sk-wrap {
position: relative;
display: inline-block;
line-height: 0;
}
/* Ensure wrapped img fills wrapper */
.sk-wrap > img {
display: block;
}
/* Card shine layer — injected by JS, self-clipping */
.sk-shine-layer {
position: absolute; inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
z-index: 20;
}
.sk-shine-layer::after {
content: '';
position: absolute;
top: 0; bottom: 0; width: 50%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
transform: translateX(-120%) skewX(-15deg);
}
.sk-shine-layer.sk-run::after {
animation: sk-shine-pass 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* Full-page element skeleton — injected over every content element at load */
.sk-ph {
position: absolute; inset: 0;
z-index: 50;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(90deg, #e8eaed 0%, #f4f5f7 50%, #e8eaed 100%);
background-size: 400% 100%;
animation: sk-sweep 1.6s linear infinite;
transition: opacity 0.42s ease;
}
.sk-ph.sk-ph-out {
opacity: 0;
animation-play-state: paused;
}
/* While skeleton is active: content is invisible, only the gray sk-ph block shows */
.sk-active { color: transparent !important; }
.sk-active > *:not(.sk-ph):not(.sk-shine-layer):not(.wr-word) {
opacity: 0 !important;
transition: none !important;
}
/* Reveal phase: content fades in — wr-word excluded, word reveal handles those */
.sk-reveal > *:not(.sk-ph):not(.sk-shine-layer):not(.wr-word) {
opacity: 1 !important;
transition: opacity 0.42s ease !important;
}
/* Image hidden behind its placeholder until loaded */
.sk-wrap > img.sk-img-loading { opacity: 0; transition: opacity 0.32s ease; }