/* Webkoo X-Chat — Widget. Alle Farben aus OKLCH, abgeleitet von einer Akzentfarbe. */ .xchat-root { --xchat-accent: #0f766e; --xc-accent: oklch(from var(--xchat-accent) l c h); --xc-accent-strong: oklch(from var(--xchat-accent) calc(l - 0.08) c h); --xc-accent-soft: oklch(from var(--xchat-accent) 0.95 calc(c * 0.35) h); --xc-accent-text: oklch(from var(--xchat-accent) 0.34 calc(c * 0.9) h); --xc-on-accent: #fff; --xc-bg: oklch(99% 0.003 240); --xc-surface: #fff; --xc-surface-2: oklch(96.5% 0.006 240); --xc-border: oklch(90% 0.01 240); --xc-text: oklch(22% 0.02 250); --xc-text-2: oklch(50% 0.02 250); --xc-radius: 18px; --xc-font: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --xc-shadow: 0 10px 40px -12px oklch(0% 0 0 / 0.28), 0 2px 8px oklch(0% 0 0 / 0.06); --xc-z: 2147483000; --xchat-side-right: clamp(12px, 3vw, 24px); --xchat-side-left: auto; position: fixed; inset-block-end: clamp(12px, 3vw, 24px); inset-inline-end: var(--xchat-side-right); inset-inline-start: var(--xchat-side-left); z-index: var(--xc-z); font-family: var(--xc-font); font-size: 15px; line-height: 1.5; color: var(--xc-text); display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; } .xchat-root.xchat-pos-left { align-items: flex-start; } .xchat-root *, .xchat-root *::before, .xchat-root *::after { box-sizing: border-box; } .xchat-root button { font: inherit; } .xchat-root .xchat-icon { flex: none; } @media (prefers-color-scheme: dark) { .xchat-root { --xc-bg: oklch(20% 0.015 250); --xc-surface: oklch(24% 0.015 250); --xc-surface-2: oklch(29% 0.015 250); --xc-border: oklch(34% 0.015 250); --xc-text: oklch(95% 0.005 240); --xc-text-2: oklch(72% 0.01 240); --xc-accent-soft: oklch(from var(--xchat-accent) 0.32 calc(c * 0.5) h); --xc-accent-text: oklch(from var(--xchat-accent) 0.88 calc(c * 0.6) h); } } /* Launcher */ .xc-launcher { display: inline-flex; align-items: center; gap: 0.6rem; border: 0; cursor: pointer; padding: 0.8rem 1.1rem 0.8rem 0.9rem; border-radius: 999px; background: var(--xc-accent); color: var(--xc-on-accent); box-shadow: var(--xc-shadow); font-weight: 600; font-size: 0.95rem; transition: transform 0.15s ease, background 0.15s; } .xc-launcher:hover { background: var(--xc-accent-strong); transform: translateY(-1px); } .xc-launcher:focus-visible { outline: 3px solid oklch(from var(--xchat-accent) 0.7 c h / 0.6); outline-offset: 3px; } .xc-launcher span:empty { display: none; } .xchat-root.is-open .xc-launcher { display: none; } /* Panel */ .xc-panel { display: none; width: min(24rem, calc(100vw - 2 * clamp(12px, 3vw, 24px))); height: min(38rem, calc(100dvh - 2 * clamp(12px, 3vw, 24px))); background: var(--xc-bg); border: 1px solid var(--xc-border); border-radius: var(--xc-radius); box-shadow: var(--xc-shadow); overflow: hidden; flex-direction: column; container-type: inline-size; } .xchat-root.is-open .xc-panel { display: flex; animation: xc-in 0.22s ease-out; } @keyframes xc-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } } @media (prefers-reduced-motion: reduce) { .xchat-root.is-open .xc-panel, .xc-launcher { animation: none; transition: none; } } .xc-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0.9rem; background: var(--xc-surface); border-block-end: 1px solid var(--xc-border); } .xc-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--xc-accent-soft); color: var(--xc-accent-text); } .xc-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .xc-head-name { font-weight: 700; line-height: 1.2; } /* Die dauerhafte KI-Kennzeichnung ist das prägende Element des Widgets (Art. 50 KI-VO). */ .xc-avatar { flex: none; } .xc-avatar-logo { border-radius: 0.65rem; background: #fff; border: 1px solid var(--xc-border); overflow: hidden; } .xc-avatar-logo img { width: 100%; height: 100%; object-fit: contain; padding: 0.2rem; box-sizing: border-box; display: block; } .xc-avatar-initials { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; background: var(--xc-accent); color: var(--xc-on-accent); } /* 1.1.7: Untertitel ohne Kapsel — ruhige, gedaempfte Zeile mit kleinem Akzent-Symbol */ .xc-head-sub { display: flex; align-items: flex-start; gap: 0.3rem; min-width: 0; font-size: 0.75rem; font-weight: 500; line-height: 1.3; color: var(--xc-text-2); } .xc-head-sub > span { white-space: normal; overflow-wrap: anywhere; } /* 1.1.8: umbrechen statt mit … kuerzen */ .xc-head-sub svg { flex: none; color: var(--xc-accent); margin-top: 0.15em; } .xchat-iconbtn { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: transparent; color: var(--xc-text-2); cursor: pointer; } .xchat-iconbtn:hover { background: var(--xc-surface-2); color: var(--xc-text); } .xchat-iconbtn:focus-visible { outline: 2px solid var(--xc-accent); outline-offset: 1px; } .xc-body { flex: 1; overflow-y: auto; padding: 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; scroll-behavior: smooth; overscroll-behavior: contain; } .xc-msg { max-width: 86%; padding: 0.65rem 0.85rem; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; } .xc-msg.user { align-self: flex-end; background: var(--xc-accent); color: var(--xc-on-accent); border-end-end-radius: 6px; } .xc-msg.assistant { align-self: flex-start; background: var(--xc-surface); border: 1px solid var(--xc-border); border-end-start-radius: 6px; } .xc-msg.system { align-self: center; max-width: 100%; background: transparent; color: var(--xc-text-2); font-size: 0.82rem; text-align: center; padding: 0.2rem 0.5rem; } .xc-msg-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: var(--xc-text-2); margin-block-start: 0.35rem; } .xc-msg-meta .xc-ai-tag { display: inline-flex; align-items: center; gap: 0.2rem; } .xc-sources { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-block-start: 0.4rem; } .xc-sources a { font-size: 0.72rem; color: var(--xc-accent-text); background: var(--xc-accent-soft); padding: 0.15rem 0.5rem; border-radius: 999px; text-decoration: none; } .xc-sources a:hover { text-decoration: underline; } .xc-typing { display: inline-flex; gap: 0.25rem; align-items: center; padding: 0.7rem 0.9rem; } .xc-typing i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--xc-text-2); opacity: 0.5; animation: xc-dot 1.1s infinite; } .xc-typing i:nth-child(2) { animation-delay: 0.15s; } .xc-typing i:nth-child(3) { animation-delay: 0.3s; } @keyframes xc-dot { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-3px); opacity: 1; } } .xc-feedback { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--xc-text-2); margin-block-start: 0.4rem; } .xc-feedback button { border: 1px solid var(--xc-border); background: var(--xc-surface); border-radius: 999px; padding: 0.15rem 0.45rem; cursor: pointer; color: inherit; display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; } .xc-feedback button:hover { border-color: var(--xc-accent); color: var(--xc-accent-text); } .xc-handoff-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid var(--xc-accent); background: var(--xc-surface); color: var(--xc-accent-text); font-weight: 600; font-size: 0.85rem; cursor: pointer; } .xc-handoff-cta:hover { background: var(--xc-accent-soft); } /* Composer */ .xc-composer { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.6rem 0.75rem; background: var(--xc-surface); border-block-start: 1px solid var(--xc-border); } .xc-composer textarea { flex: 1; resize: none; border: 1px solid var(--xc-border); background: var(--xc-bg); color: var(--xc-text); border-radius: 14px; padding: 0.6rem 0.8rem; font: inherit; line-height: 1.4; max-height: 7rem; min-height: 2.6rem; } .xc-composer textarea:focus { outline: 2px solid var(--xc-accent); outline-offset: 0; border-color: transparent; } .xc-send { width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: var(--xc-accent); color: var(--xc-on-accent); display: grid; place-items: center; cursor: pointer; flex: none; } .xc-send:hover { background: var(--xc-accent-strong); } .xc-send:disabled { opacity: 0.5; cursor: not-allowed; } .xc-send:focus-visible { outline: 2px solid var(--xc-accent); outline-offset: 2px; } .xc-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.9rem; padding: 0.4rem 0.75rem 0.55rem; background: var(--xc-surface); font-size: 0.72rem; color: var(--xc-text-2); } .xc-foot a, .xc-foot button { color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-size: inherit; } .xc-foot a:hover, .xc-foot button:hover { color: var(--xc-accent-text); } .xc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* Gate & Handoff-Views */ .xc-view { flex: 1; overflow-y: auto; padding: 1.25rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; } .xc-view h3 { margin: 0; font-size: 1.05rem; font-weight: 700; } .xc-view p { margin: 0; color: var(--xc-text-2); font-size: 0.9rem; } .xc-gate-facts { list-style: none; margin: 0.25rem 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.86rem; } .xc-gate-facts li { display: flex; gap: 0.5rem; align-items: flex-start; } .xc-gate-facts .xchat-icon { color: var(--xc-accent-text); margin-top: 0.15rem; } .xc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.7rem 1rem; border-radius: 12px; border: 1px solid var(--xc-border); background: var(--xc-surface); color: var(--xc-text); font-weight: 600; cursor: pointer; } .xc-btn:hover { background: var(--xc-surface-2); } .xc-btn:focus-visible { outline: 2px solid var(--xc-accent); outline-offset: 2px; } .xc-btn-primary { background: var(--xc-accent); border-color: var(--xc-accent); color: var(--xc-on-accent); } .xc-btn-primary:hover { background: var(--xc-accent-strong); } .xc-btn:disabled { opacity: 0.55; cursor: not-allowed; } .xc-field { display: grid; gap: 0.3rem; font-size: 0.85rem; font-weight: 500; } .xc-field input, .xc-field textarea { font: inherit; font-weight: 400; padding: 0.6rem 0.75rem; border: 1px solid var(--xc-border); border-radius: 10px; background: var(--xc-bg); color: var(--xc-text); } .xc-field input:focus, .xc-field textarea:focus { outline: 2px solid var(--xc-accent); outline-offset: 0; border-color: transparent; } .xc-check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8rem; color: var(--xc-text-2); cursor: pointer; } .xc-check input { margin-top: 0.2rem; } .xc-error { color: oklch(50% 0.18 25); font-size: 0.85rem; } .xc-preview-tag { background: oklch(96% 0.06 80); color: oklch(40% 0.1 70); font-size: 0.72rem; text-align: center; padding: 0.3rem; } @container (max-width: 22rem) { .xc-msg { max-width: 94%; } } /* 1.1.7: Schutz vor Theme-Regeln mit !important (z. B. X-Site-Engine: „html body h3:not(#…) { font-size: … !important }“). ID + Klasse schlaegt deren Spezifitaet; gilt nur innerhalb des Widgets. */ #xchat-root.xchat-root :is(h1, h2, h3, h4) { font-size: 1rem !important; line-height: 1.3 !important; letter-spacing: normal !important; hyphens: manual !important; } #xchat-root.xchat-root .xc-view h3 { font-size: 1.05rem !important; } /* 1.2.0: Termine & Rückruf im Chat */ .xc-form { display: grid; gap: 0.7rem; } .xc-field select { font: inherit; font-weight: 400; padding: 0.55rem 0.7rem; border: 1px solid var(--xc-border); border-radius: 10px; background: var(--xc-bg); color: var(--xc-text); } .xc-field select:focus { outline: 2px solid var(--xc-accent); outline-offset: 0; border-color: transparent; } .xc-times { display: flex; flex-wrap: wrap; gap: 0.4rem; } .xc-time { font: inherit; font-size: 0.85rem; min-width: 3.9rem; min-height: 2.4rem; padding: 0.35rem 0.6rem; border: 1px solid var(--xc-border); border-radius: 10px; background: var(--xc-bg); color: var(--xc-text); cursor: pointer; } .xc-time:hover { border-color: var(--xc-accent); } .xc-time[aria-pressed="true"] { background: var(--xc-accent); border-color: var(--xc-accent); color: var(--xc-on-accent); font-weight: 600; } .xc-times input[type="time"] { font: inherit; padding: 0.5rem 0.7rem; border: 1px solid var(--xc-border); border-radius: 10px; background: var(--xc-bg); color: var(--xc-text); } .xc-hint { font-size: 0.78rem; color: var(--xc-text-2); margin: 0; } .xc-form .is-invalid, .xc-form .is-invalid input { border-color: oklch(55% 0.18 25) !important; } .xc-times.is-invalid { outline: 1px solid oklch(55% 0.18 25); outline-offset: 4px; border-radius: 10px; } /* ── 1.2.4: Theme-Schutz (automatisch aus den Regeln oben erzeugt) ── Themes setzen oft Farben, Hintergründe oder Schriften auf p/span/div – teils mit !important. ID + Klasse + !important stellt die Widget-Optik wieder her. */ #xchat-root.xchat-root /* Webkoo X-Chat — Widget. Alle Farben aus OKLCH, #xchat-root.xchat-root abgeleitet von einer Akzentfarbe. */ .xchat-root { font-family: var(--xc-font) !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--xc-text) !important; } #xchat-root.xchat-root /* Launcher */ .xc-launcher { background: var(--xc-accent) !important; color: var(--xc-on-accent) !important; font-weight: 600 !important; font-size: 0.95rem !important; } #xchat-root.xchat-root .xc-launcher:hover { background: var(--xc-accent-strong) !important; } #xchat-root.xchat-root /* Panel */ .xc-panel { background: var(--xc-bg) !important; } #xchat-root.xchat-root .xc-head { background: var(--xc-surface) !important; } #xchat-root.xchat-root .xc-avatar { background: var(--xc-accent-soft) !important; color: var(--xc-accent-text) !important; } #xchat-root.xchat-root .xc-head-name { font-weight: 700 !important; line-height: 1.2 !important; } #xchat-root.xchat-root .xc-avatar-logo { background: #fff !important; } #xchat-root.xchat-root .xc-avatar-initials { font-weight: 700 !important; font-size: 0.9rem !important; letter-spacing: 0.02em !important; background: var(--xc-accent) !important; color: var(--xc-on-accent) !important; } #xchat-root.xchat-root /* 1.1.7: Untertitel ohne Kapsel — ruhige, #xchat-root.xchat-root gedaempfte Zeile mit kleinem Akzent-Symbol */ .xc-head-sub { font-size: 0.75rem !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--xc-text-2) !important; } #xchat-root.xchat-root .xc-head-sub svg { color: var(--xc-accent) !important; } #xchat-root.xchat-root .xc-msg.user { background: var(--xc-accent) !important; color: var(--xc-on-accent) !important; } #xchat-root.xchat-root .xc-msg.assistant { background: var(--xc-surface) !important; } #xchat-root.xchat-root .xc-msg.system { background: transparent !important; color: var(--xc-text-2) !important; font-size: 0.82rem !important; } #xchat-root.xchat-root .xc-msg-meta { font-size: 0.7rem !important; color: var(--xc-text-2) !important; } #xchat-root.xchat-root .xc-sources a { font-size: 0.72rem !important; color: var(--xc-accent-text) !important; background: var(--xc-accent-soft) !important; text-decoration: none !important; } #xchat-root.xchat-root .xc-sources a:hover { text-decoration: underline !important; } #xchat-root.xchat-root .xc-typing i { background: var(--xc-text-2) !important; } #xchat-root.xchat-root .xc-feedback { font-size: 0.75rem !important; color: var(--xc-text-2) !important; } #xchat-root.xchat-root .xc-feedback button { background: var(--xc-surface) !important; color: inherit !important; font-size: 0.72rem !important; } #xchat-root.xchat-root .xc-feedback button:hover { border-color: var(--xc-accent) !important; color: var(--xc-accent-text) !important; } #xchat-root.xchat-root .xc-handoff-cta { background: var(--xc-surface) !important; color: var(--xc-accent-text) !important; font-weight: 600 !important; font-size: 0.85rem !important; } #xchat-root.xchat-root .xc-handoff-cta:hover { background: var(--xc-accent-soft) !important; } #xchat-root.xchat-root /* Composer */ .xc-composer { background: var(--xc-surface) !important; } #xchat-root.xchat-root .xc-composer textarea { background: var(--xc-bg) !important; color: var(--xc-text) !important; line-height: 1.4 !important; } #xchat-root.xchat-root .xc-composer textarea:focus { border-color: transparent !important; } #xchat-root.xchat-root .xc-send { background: var(--xc-accent) !important; color: var(--xc-on-accent) !important; } #xchat-root.xchat-root .xc-send:hover { background: var(--xc-accent-strong) !important; } #xchat-root.xchat-root .xc-foot { background: var(--xc-surface) !important; font-size: 0.72rem !important; color: var(--xc-text-2) !important; } #xchat-root.xchat-root .xc-foot a, #xchat-root.xchat-root .xc-foot button { color: inherit !important; background: none !important; text-decoration: underline !important; font-size: inherit !important; } #xchat-root.xchat-root .xc-foot a:hover, #xchat-root.xchat-root .xc-foot button:hover { color: var(--xc-accent-text) !important; } #xchat-root.xchat-root .xc-view h3 { font-size: 1.05rem !important; font-weight: 700 !important; } #xchat-root.xchat-root .xc-view p { color: var(--xc-text-2) !important; font-size: 0.9rem !important; } #xchat-root.xchat-root .xc-gate-facts { font-size: 0.86rem !important; } #xchat-root.xchat-root .xc-gate-facts .xchat-icon { color: var(--xc-accent-text) !important; } #xchat-root.xchat-root .xc-btn { background: var(--xc-surface) !important; color: var(--xc-text) !important; font-weight: 600 !important; } #xchat-root.xchat-root .xc-btn:hover { background: var(--xc-surface-2) !important; } #xchat-root.xchat-root .xc-btn-primary { background: var(--xc-accent) !important; border-color: var(--xc-accent) !important; color: var(--xc-on-accent) !important; } #xchat-root.xchat-root .xc-btn-primary:hover { background: var(--xc-accent-strong) !important; } #xchat-root.xchat-root .xc-field { font-size: 0.85rem !important; font-weight: 500 !important; } #xchat-root.xchat-root .xc-field input, #xchat-root.xchat-root .xc-field textarea { font-weight: 400 !important; background: var(--xc-bg) !important; color: var(--xc-text) !important; } #xchat-root.xchat-root .xc-field input:focus, #xchat-root.xchat-root .xc-field textarea:focus { border-color: transparent !important; } #xchat-root.xchat-root .xc-check { font-size: 0.8rem !important; color: var(--xc-text-2) !important; } #xchat-root.xchat-root .xc-error { color: oklch(50% 0.18 25) !important; font-size: 0.85rem !important; } #xchat-root.xchat-root .xc-preview-tag { background: oklch(96% 0.06 80) !important; color: oklch(40% 0.1 70) !important; font-size: 0.72rem !important; } #xchat-root.xchat-root .xc-field select { font-weight: 400 !important; background: var(--xc-bg) !important; color: var(--xc-text) !important; } #xchat-root.xchat-root .xc-field select:focus { border-color: transparent !important; } #xchat-root.xchat-root .xc-time { font-size: 0.85rem !important; background: var(--xc-bg) !important; color: var(--xc-text) !important; } #xchat-root.xchat-root .xc-time:hover { border-color: var(--xc-accent) !important; } #xchat-root.xchat-root .xc-time[aria-pressed="true"] { background: var(--xc-accent) !important; border-color: var(--xc-accent) !important; color: var(--xc-on-accent) !important; font-weight: 600 !important; } #xchat-root.xchat-root .xc-times input[type="time"] { background: var(--xc-bg) !important; color: var(--xc-text) !important; } #xchat-root.xchat-root .xc-hint { font-size: 0.78rem !important; color: var(--xc-text-2) !important; } #xchat-root.xchat-root :is(span, strong, em, b, i, small, label, .xc-msg-meta, .xc-hint):not(.xc-time) { background: transparent !important; box-shadow: none !important; text-shadow: none !important; } #xchat-root.xchat-root .xc-msg.user, #xchat-root.xchat-root .xc-msg.user * { color: var(--xc-on-accent) !important; } /* ── 1.2.7: Handy & Tablet ── Handy (≤ 640 px Breite oder ≤ 500 px Höhe, also auch Querformat): Chat als Vollbild über der Seite, Höhe folgt dem sichtbaren Bereich (Tastatur) per --xc-vvh/--xc-vvtop aus widget.js, Safe Areas für Notch und Home-Leiste. Eingaben 16 px, sonst zoomt iOS beim Antippen. Bedienflächen ≥ 44 px. */ .xc-foot > span { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; } html.xchat-noscroll, html.xchat-noscroll body { overflow: hidden !important; overscroll-behavior: none !important; } @media (hover: none) { .xc-launcher:hover { transform: none; } .xchat-iconbtn { width: 2.75rem; height: 2.75rem; } .xc-send { width: 2.75rem; height: 2.75rem; } .xc-feedback button { min-height: 2rem; padding: 0.25rem 0.6rem; } .xc-foot a, .xc-foot button { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0; } .xc-foot > span { min-height: 2.75rem; } #xchat-root.xchat-root .xc-composer textarea, #xchat-root.xchat-root .xc-field input, #xchat-root.xchat-root .xc-field textarea, #xchat-root.xchat-root .xc-field select, #xchat-root.xchat-root .xc-times input[type="time"] { font-size: 16px !important; } .xc-composer textarea { min-height: 2.75rem; } } /* Tablet: etwas mehr Platz, Fenster bleibt schwebend */ @media (min-width: 641px) and (max-width: 1180px) and (min-height: 501px) { .xc-panel { width: min(26rem, calc(100vw - 2 * clamp(12px, 3vw, 24px))); height: min(42rem, calc(100dvh - 2 * clamp(12px, 3vw, 24px) - env(safe-area-inset-bottom, 0px))); } .xchat-root { inset-block-end: calc(clamp(12px, 3vw, 24px) + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 640px), (max-height: 500px) { .xchat-root { inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px)); } .xchat-root:not(.xchat-pos-left) { inset-inline-end: calc(12px + env(safe-area-inset-right, 0px)); } .xchat-root.xchat-pos-left { inset-inline-start: calc(12px + env(safe-area-inset-left, 0px)); } /* Knopf: rund, nur Symbol — der Text verdeckt sonst Inhalte der Seite */ .xc-launcher { width: 3.5rem; height: 3.5rem; padding: 0; justify-content: center; gap: 0; } .xc-launcher > span { display: none !important; } .xchat-root.is-open { inset: auto 0 auto 0 !important; top: var(--xc-vvtop, 0px) !important; height: var(--xc-vvh, 100dvh) !important; gap: 0; align-items: stretch; } .xchat-root.is-open .xc-panel { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; animation: xc-up 0.22s ease-out; } .xc-head { padding: calc(0.6rem + env(safe-area-inset-top, 0px)) calc(0.75rem + env(safe-area-inset-right, 0px)) 0.6rem calc(0.9rem + env(safe-area-inset-left, 0px)); gap: 0.6rem; } .xc-body { padding: 0.9rem calc(0.75rem + env(safe-area-inset-right, 0px)) 0.9rem calc(0.75rem + env(safe-area-inset-left, 0px)); } .xc-msg { max-width: 90%; } .xc-composer { padding: 0.55rem calc(0.6rem + env(safe-area-inset-right, 0px)) 0.55rem calc(0.6rem + env(safe-area-inset-left, 0px)); } .xc-foot { gap: 0 1rem; padding: 0 0.75rem calc(0.35rem + env(safe-area-inset-bottom, 0px)); } .xc-view { padding: 1.1rem calc(1rem + env(safe-area-inset-right, 0px)) calc(1.1rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px)); } .xc-btn { min-height: 2.9rem; } .xc-time { min-height: 2.75rem; } .xc-field input, .xc-field select, .xc-field textarea { min-height: 2.75rem; } .xc-check input { width: 1.15rem; height: 1.15rem; flex: none; } } /* Sehr schmale Handys: KI-Kennzeichnung steht dauerhaft im Kopf und an jeder Antwort — Fußzeile einzeilig halten */ @media (max-width: 380px) { .xc-foot > span { display: none !important; } } @keyframes xc-up { from { opacity: 0; transform: translateY(24px); } } @media (prefers-reduced-motion: reduce) { .xchat-root.is-open .xc-panel { animation: none !important; } } /* 1.2.12: Formularfelder nie breiter als das Fenster — ein