/* LazerlichtCraft Hilfe-Chat — Overlay-Widget (H1). Helles Theme wie der Konfigurator (Weiss/Grau, Akzent Tesla-Blau #3e6ae1). Nur Chat-Substanz — keine Vorschau, keine Galerien, keine Formulare. */ :root { --lc-accent: #3e6ae1; --lc-bg: #ffffff; --lc-bg-soft: #f4f5f7; --lc-border: #e2e4e8; --lc-text: #1a1a1a; --lc-text-soft: #5c5e62; } lazerlichtcraft-help, lazerlichtcraft-help * { box-sizing: border-box; } /* hidden-Attribut MUSS gewinnen — Autoren-display-Regeln ueberstimmen sonst die UA-Regel [hidden]{display:none} (Lehre aus dem alten Widget, Runde 6). */ lazerlichtcraft-help [hidden] { display: none !important; } lazerlichtcraft-help { font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; color: var(--lc-text); } /* ----------------------------------- Hilfe-Button im Konfigurator (H2/F3) */ /* Sitzt UNTEN LINKS (Wunsch Daniel 11.7.: Platz/Look des Google-Badges). Desktop: groessere ovale Pill "? Hilfe" mit Badge-Schatten; mobil: rundes Icon in Badge-Groesse (~50px), bleibt sichtbar auch bei offenem Menue. */ .lc-help-trigger { /* fixed + am : raus aus dem preview-section-Stacking-Context, sonst verdeckt das Mobile-Sheet-Overlay (z 240) den Button trotz hoeherem z. */ position: fixed; bottom: 20px; left: 20px; z-index: 260; display: inline-flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid var(--lc-border); border-radius: 999px; padding: 12px 22px; font-size: 16px; font-family: inherit; color: var(--lc-text); cursor: pointer; /* weicher Schatten wie das Google-Badge */ box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18); } .lc-help-trigger:hover { border-color: var(--lc-accent); color: var(--lc-accent); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); } .lc-help-trigger-icon { font-weight: 700; color: var(--lc-accent); font-size: 20px; line-height: 1; } /* Mobil (schmal): rundes Icon in Groesse des Google-Badges (kein Label) */ @media (max-width: 1023px) { .lc-help-trigger { bottom: 12px; left: 12px; top: auto; right: auto; width: 50px; height: 50px; padding: 0; gap: 0; justify-content: center; } .lc-help-trigger-icon { font-size: 24px; } .lc-help-trigger-label { display: none; } } /* Mobile-Nav-Modus: fixed unten links ueber der Bottom-Navigation. BLEIBT sichtbar, auch wenn das Menue (Sheet) offen ist — genau wie das Google-Badge (Wunsch Daniel). z-index 260 liegt ueber Overlay (240) + Sheet (245). */ body.has-mobile-nav .lc-help-trigger { bottom: 68px; left: 12px; z-index: 260; } /* Bei ausgeklapptem Menue etwas kleiner (40px reicht, Wunsch Daniel) — bleibt aber sichtbar (kein display:none). */ body.has-mobile-nav.sheet-open .lc-help-trigger { width: 40px; height: 40px; } body.has-mobile-nav.sheet-open .lc-help-trigger .lc-help-trigger-icon { font-size: 20px; } /* Im Konfigurator (Modifier lc-links, gesetzt von help-chat.js) oeffnet das Desktop-Panel UEBER dem Button unten links statt rechts. */ lazerlichtcraft-help.lc-links .lc-help-panel { left: 16px; right: auto; } /* ---------------------------------------------------------------- Launcher */ /* Pille mit Icon + "Chat"-Label + Badge-Schatten (wie der Konfigurator-Button, Wunsch Daniel 11.7.) — statt kleinem "?"-Kreis. */ .lc-help-launcher { position: fixed; right: 18px; bottom: 18px; z-index: 9998; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--lc-border); background: #fff; color: var(--lc-text); font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1; cursor: pointer; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18); } .lc-help-launcher:hover { border-color: var(--lc-accent); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); } .lc-help-launcher-icon { display: inline-flex; color: var(--lc-accent); /* faerbt die SVG-Sprechblase blau (currentColor) */ } .lc-help-launcher-icon svg { width: 19px; height: 19px; display: block; } /* Bei offenem Panel den Launcher ausblenden (geschlossen wird ueber das X im Header) — sonst schaut die Pille unter dem Chatfenster hervor. */ .lc-help-launcher.lc-open { display: none; } /* ------------------------------------------------------------------ Panel */ .lc-help-panel { position: fixed; right: 16px; bottom: 74px; width: 380px; max-width: calc(100vw - 32px); height: min(620px, calc(100vh - 110px)); background: var(--lc-bg); border: 1px solid var(--lc-border); border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; overflow: hidden; z-index: 9999; } .lc-help-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--lc-border); /* dezenter Blau-Hauch fuer einen freundlicheren Kopf (on-brand) */ background: linear-gradient(180deg, rgba(62, 106, 225, 0.06), rgba(62, 106, 225, 0.02)); flex: 0 0 auto; } .lc-help-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--lc-text); } .lc-help-title-icon { display: inline-flex; color: var(--lc-accent); } .lc-help-title-icon svg { width: 18px; height: 18px; display: block; } /* kleiner gruener Punkt = "aktiv/antwortet sofort" */ .lc-help-title-dot { width: 7px; height: 7px; border-radius: 50%; background: #23b26d; box-shadow: 0 0 0 3px rgba(35, 178, 109, 0.16); } .lc-help-close { border: 0; background: transparent; color: var(--lc-text-soft); font-size: 20px; line-height: 1; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; } .lc-help-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--lc-text); } /* ------------------------------------------------------------------- Chat */ .lc-chat-panel { display: flex; flex-direction: column; background: var(--lc-bg); min-height: 0; flex: 1; } .lc-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .lc-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .lc-msg.assistant { background: var(--lc-bg-soft); align-self: flex-start; border-bottom-left-radius: 4px; } .lc-msg.user { background: var(--lc-accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .lc-msg.system { background: #fdecec; color: #8a2a2a; align-self: center; font-size: 13px; } .lc-thinking { color: var(--lc-text-soft); font-style: italic; } @keyframes lc-pulse { 0% { opacity: 0.45; } 50% { opacity: 1; } 100% { opacity: 0.45; } } .lc-thinking { animation: lc-pulse 1.4s ease-in-out infinite; } /* Deep-Link-Buttons (Quickbar) */ .lc-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; } .lc-buttons button { border: 1px solid var(--lc-accent); color: var(--lc-accent); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 14px; cursor: pointer; } .lc-buttons button:hover { background: var(--lc-accent); color: #fff; } .lc-buttons button:disabled { opacity: 0.45; cursor: default; } /* Composer: Quickbar + Eingabezeile als Einheit unten angeheftet */ .lc-composer { flex: 0 0 auto; background: var(--lc-bg); } .lc-quickbar { align-self: stretch; padding: 8px 12px 0; border-top: 1px solid var(--lc-border); } .lc-quickbar:empty { display: none; } .lc-quickbar:not(:empty) + .lc-inputbar { border-top: 0; } .lc-inputbar { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--lc-border); background: var(--lc-bg); } .lc-inputbar input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--lc-border); border-radius: 8px; font-size: 15px; } .lc-inputbar button { background: var(--lc-accent); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; } .lc-inputbar button:disabled { opacity: 0.5; } /* ------------------------------------------------------- Feedback (H1d) */ .lc-feedback { display: flex; align-items: center; gap: 4px; align-self: flex-start; margin: -6px 0 0 6px; } .lc-feedback > button { border: 0; background: transparent; font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 6px; cursor: pointer; opacity: 0.45; filter: grayscale(100%); } .lc-feedback > button:hover { opacity: 1; filter: none; background: var(--lc-bg-soft); } .lc-feedback > button.lc-voted { opacity: 1; filter: none; background: var(--lc-bg-soft); } .lc-fb-comment { display: inline-flex; gap: 6px; margin-left: 6px; } .lc-fb-comment input { border: 1px solid var(--lc-border); border-radius: 6px; padding: 4px 8px; font-size: 12.5px; width: 180px; } .lc-fb-comment button { border: 1px solid var(--lc-accent); background: #fff; color: var(--lc-accent); border-radius: 6px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; } .lc-fb-danke { font-size: 12px; color: var(--lc-text-soft); margin-left: 6px; } /* -------------------------------------------- Nachricht an Daniel (H1c) */ .lc-help-footer { flex: 0 0 auto; padding: 6px 14px 10px; background: var(--lc-bg); } /* Kontakt-Button prominent: volle Breite + Umrandung (Wunsch Daniel 11.7., war als Text-Link schwer zu entdecken). */ .lc-contact-link { display: block; width: 100%; border: 1px solid var(--lc-accent); background: #fff; color: var(--lc-accent); font-size: 14px; font-weight: 500; cursor: pointer; padding: 9px 12px; border-radius: 8px; } .lc-contact-link:hover { background: var(--lc-accent); color: #fff; } .lc-contact-form { align-self: stretch; background: var(--lc-bg-soft); border: 1px solid var(--lc-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .lc-contact-title { font-size: 14px; font-weight: 600; } .lc-contact-form textarea, .lc-contact-form input[type="text"], .lc-contact-form input[type="email"] { border: 1px solid var(--lc-border); border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit; background: var(--lc-bg); resize: vertical; } /* Honeypot: fuer Menschen unsichtbar (nicht display:none — manche Bots ueberspringen versteckte Felder sonst) */ .lc-contact-form .lc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .lc-contact-check { font-size: 13px; color: var(--lc-text); display: flex; align-items: center; gap: 6px; } .lc-contact-hint { font-size: 11.5px; color: var(--lc-text-soft); } .lc-contact-error { font-size: 13px; color: #8a2a2a; background: #fdecec; border-radius: 8px; padding: 8px 10px; } .lc-contact-actions { display: flex; gap: 8px; } .lc-contact-actions button { border: 0; border-radius: 8px; padding: 8px 16px; font-size: 14px; cursor: pointer; background: var(--lc-accent); color: #fff; } .lc-contact-actions button:disabled { opacity: 0.5; } .lc-contact-actions .lc-contact-cancel { background: transparent; color: var(--lc-text-soft); border: 1px solid var(--lc-border); } /* ----------------------------------------------------------------- Mobile */ @media (max-width: 767px) { /* Bottom-Sheet statt Vollbild (Wunsch Daniel: "ein Ticken kleiner") — laesst oben ~15% frei, abgerundete Oberkante. Beide Selektoren, damit die .lc-links-Regel (Konfigurator) nicht die Breite ueberschreibt. */ lazerlichtcraft-help .lc-help-panel, lazerlichtcraft-help.lc-links .lc-help-panel { left: 0; right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 85dvh; border-radius: 16px 16px 0 0; border: 0; border-top: 1px solid var(--lc-border); } /* Mobil: Pille etwas kompakter (Icon + "Chat" bleiben) */ lazerlichtcraft-help .lc-help-launcher { padding: 10px 16px; font-size: 15px; } lazerlichtcraft-help .lc-help-launcher-icon svg { width: 17px; height: 17px; } /* iOS-Zoom verhindern + Touch-Targets */ lazerlichtcraft-help .lc-inputbar input { font-size: 16px; } lazerlichtcraft-help .lc-buttons button { padding: 9px 16px; font-size: 15px; } lazerlichtcraft-help .lc-msg { font-size: 15px; } }