:root { --bg-primary: #0a0a0f; --bg-secondary: #12121a; --bg-tertiary: #1a1a26; --bg-input: #0f0f18; --border: #2a2a3a; --border-focus: #4a4a6a; --text-primary: #e8e8f0; --text-secondary: #8888a0; --text-muted: #555568; --accent: #6366f1; --accent-hover: #5558e6; --accent-subtle: rgba(99, 102, 241, 0.1); /* Heller Akzent fuer Schrift auf dunklem Grund. Der Grundakzent ist als Flaechenfarbe gedacht und als Text auf #12121a zu dunkel: Genau das war am Admin-Abzeichen zu sehen, dunkel auf dunkel. */ --accent-text: #b4b8ff; --danger: #ef4444; --danger-hover: #dc2626; --success: #22c55e; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --radius: 3px; --radius-lg: 3px; --sidebar-width: 280px; } .hidden { display: none !important; } /* F5-Flicker-Fix: Inline-Script in setzt eine show-* Klasse auf , bevor der erste Paint passiert. So flackert nie kurz die falsche Maske auf. html-Prefix erhoeht die Spezifitaet, sodass diese Regeln die spaeter im File definierten .landing/.chat-layout Display-Werte schlagen. */ html .screen-login, html .screen-chat { display: none; } html.show-login .screen-login { display: flex; } html.show-chat .screen-chat { display: flex; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font); background: var(--bg-primary); color: var(--text-primary); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Landing Page */ .landing { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; } .landing-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3rem; max-width: 480px; width: 100%; text-align: center; } .landing-card h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .kanji { font-weight: 400; opacity: 0.6; font-size: 0.85em; margin-left: 0.2em; } .subtitle { color: var(--text-secondary); margin-bottom: 2rem; font-size: 0.95rem; } .label { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 0.75rem; text-align: left; } /* Divider */ .divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .divider span { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; } /* Join Form */ .join-form { display: flex; gap: 0.5rem; } .join-form input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 0.7rem 1rem; font-size: 0.85rem; font-family: var(--font); outline: none; transition: border-color 0.15s ease; } .join-form input:focus { border-color: var(--border-focus); } .join-form input::placeholder { color: var(--text-muted); } /* Login Form */ .login-form { display: flex; flex-direction: column; gap: 1rem; } .login-form input { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 0.75rem 1rem; font-size: 1rem; font-family: var(--font); outline: none; text-align: center; transition: border-color 0.15s ease; } .login-form input:focus { border-color: var(--border-focus); } .login-form input::placeholder { color: var(--text-muted); } .login-error { color: var(--danger); font-size: 0.85rem; text-align: center; margin: 0; } /* Share URL */ .share-url { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .share-url input { flex: 1; min-width: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 0.7rem 1rem; font-family: var(--font-mono); font-size: 0.75rem; outline: none; } .share-url input:focus { border-color: var(--border-focus); } /* Buttons */ .btn-primary { display: inline-block; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 0.75rem 2rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; text-decoration: none; text-align: center; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 1.2rem; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .btn-secondary:hover { background: var(--bg-secondary); border-color: var(--border-focus); } .btn-danger { display: block; width: 100%; background: transparent; color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius); padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.15s ease; } .btn-danger:hover { background: rgba(239, 68, 68, 0.1); } .btn-sidebar { background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-secondary); padding: 0.4rem 0.7rem; font-size: 1rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .btn-sidebar:hover { background: var(--bg-secondary); color: var(--text-primary); } /* Chat Layout with Sidebar */ .chat-layout { display: flex; height: 100vh; max-width: 1200px; margin: 0 auto; } .chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; /* Bezugspunkt fuer den Sprungknopf, der ueber dem Verlauf schwebt. */ position: relative; background: var(--bg-secondary); border-left: 1px solid var(--border); border-right: 1px solid var(--border); } .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--bg-tertiary); flex-shrink: 0; } .chat-header h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; } /* Sidebar */ .sidebar { width: var(--sidebar-width); background: var(--bg-tertiary); border-left: 1px solid var(--border); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; flex-shrink: 0; } .sidebar-section h3 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .sidebar-hint { color: var(--text-muted); font-size: 0.78rem; margin-bottom: 0.75rem; line-height: 1.4; } .badge { background: var(--accent-subtle); color: var(--accent); padding: 0.1rem 0.5rem; border-radius: var(--radius-lg); font-size: 0.75rem; } /* Participant List */ .participant-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; } .participant-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-primary); padding: 0.3rem 0; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; } /* Status Bar */ .status-bar { padding: 0.5rem 1.5rem; background: var(--accent-subtle); color: var(--accent); font-size: 0.8rem; text-align: center; flex-shrink: 0; } /* Messages */ .messages { flex: 1; overflow-y: auto; padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 2px; scroll-behavior: smooth; } .message { display: flex; gap: 0.65rem; align-items: baseline; padding: 0.35rem 0.6rem; border-radius: var(--radius); transition: background 0.12s ease, opacity 0.2s ease; } .message:hover { background: rgba(255, 255, 255, 0.025); } .message.own { background: rgba(99, 102, 241, 0.04); } .message.own:hover { background: rgba(99, 102, 241, 0.07); } /* Optimistisch gerenderte Nachricht, Serverbestätigung steht noch aus */ .message.pending { opacity: 0.5; } .message.failed { opacity: 0.8; } .message.failed .message-text { color: var(--danger); text-decoration: line-through; } .message-time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); flex-shrink: 0; min-width: 2.6rem; user-select: none; } .message-sender { color: var(--accent); font-size: 0.82rem; font-weight: 600; white-space: nowrap; } .message-text { color: var(--text-primary); word-break: break-word; font-size: 0.92rem; line-height: 1.45; } .system-message { align-self: center; display: flex; align-items: baseline; gap: 0.5rem; color: var(--text-muted); background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.25rem 0.9rem; margin: 0.3rem 0; font-size: 0.75rem; } .system-message .message-time { min-width: 0; } /* Message Form */ .message-form { display: flex; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--bg-tertiary); flex-shrink: 0; } .message-form input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-primary); padding: 0.75rem 1.25rem; font-size: 0.95rem; font-family: var(--font); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .message-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); } .message-form input::placeholder { color: var(--text-muted); } .btn-send { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-lg); padding: 0.75rem 1.5rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .btn-send:hover { background: var(--accent-hover); } .btn-send:active { transform: scale(0.97); } .btn-send:focus-visible, .message-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Scrollbar */ /* Firefox / LibreWolf: Standard Scrollbar-API */ .messages, .sidebar { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* Chromium / WebKit: vendor Pseudos. Mit @supports selector(...) wird der gesamte Block von Firefox uebersprungen, sodass dessen Parser nicht ueber die :hover-Verkettung hinter einem unbekannten Pseudo-Element stolpert ("Ruleset ignored due to bad selector"). */ @supports selector(::-webkit-scrollbar) { .messages::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 6px; } .messages::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track { background: transparent; } .messages::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .messages::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover { background: var(--border-focus); } } /* Responsive */ @media (max-width: 768px) { .sidebar { position: fixed; top: 0; right: 0; height: 100vh; transform: translateX(100%); transition: transform 0.2s ease; z-index: 100; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4); } .sidebar.open { transform: translateX(0); } .chat-layout { max-width: 100%; } } @media (min-width: 769px) { .btn-sidebar { display: none; } } /* Marketing Landing */ .marketing-body { background: radial-gradient(1200px 600px at 80% -10%, rgba(99, 102, 241, 0.15), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(99, 102, 241, 0.08), transparent 60%), var(--bg-primary); min-height: 100vh; } .marketing-container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .marketing-header { padding: 1.25rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .marketing-header .marketing-container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: flex; align-items: baseline; gap: 0.4rem; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; } .brand-kanji { font-weight: 400; opacity: 0.55; font-size: 0.85em; } .marketing-nav { display: flex; gap: 1.5rem; } .marketing-nav a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.15s ease; } .marketing-nav a:hover { color: var(--text-primary); } .lang-switch { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem; padding-left: 1rem; border-left: 1px solid var(--border); font-size: 0.78rem; letter-spacing: 0.05em; } .lang-link { color: var(--text-muted); text-decoration: none; text-transform: uppercase; font-weight: 600; transition: color 0.15s ease; } .lang-link:hover { color: var(--text-primary); } .lang-link.active { color: var(--accent); } .lang-sep { color: var(--text-muted); opacity: 0.5; } .hero { padding: 5rem 0 4rem; } .hero-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: center; } .hero-text { min-width: 0; } .eyebrow { display: inline-block; color: var(--accent); background: var(--accent-subtle); padding: 0.35rem 0.8rem; border-radius: var(--radius-lg); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.25rem; } .hero-title { font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; margin-bottom: 1rem; overflow-wrap: normal; word-break: keep-all; hyphens: none; } .hero-sub { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; margin-bottom: 2rem; max-width: 36rem; } .hero-actions { display: flex; flex-direction: column; gap: 1rem; max-width: 30rem; } .btn-lg { padding: 0.95rem 1.6rem; font-size: 1rem; width: 100%; } .join-hint { color: var(--text-muted); font-size: 0.78rem; margin-top: -0.25rem; } .share-warn { color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; margin: 0.75rem 0 1rem; } .share-warn code { color: var(--accent); background: var(--accent-subtle); padding: 0 0.35rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.8rem; } /* Hero Card (Mockup) */ .hero-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); } .hero-card-header { display: flex; align-items: center; gap: 0.4rem; padding: 0.8rem 1rem; background: var(--bg-tertiary); border-bottom: 1px solid var(--border); } .hero-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); } .hero-card-title { margin-left: 0.5rem; color: var(--text-muted); font-size: 0.75rem; font-family: var(--font-mono); } .hero-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 220px; } .hero-msg { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.9rem; color: var(--text-primary); } .hero-name { color: var(--accent); font-size: 0.78rem; font-weight: 600; min-width: 70px; } /* Beitrittszeile oben. Wie eine Systemmeldung, aber ohne die Trennlinie und ohne den Schub nach unten, den die Restlaufzeit am Fuss der Karte braucht. */ .hero-msg.join { color: var(--text-muted); font-style: italic; font-size: 0.78rem; justify-content: center; padding-bottom: 0.25rem; } .hero-msg.sys { color: var(--text-muted); font-style: italic; font-size: 0.78rem; text-align: center; justify-content: center; margin-top: auto; padding-top: 0.5rem; border-top: 1px dashed var(--border); } /* Section Layout */ .section-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 2.5rem; text-align: center; line-height: 1.2; } .features { padding: 4rem 0; border-top: 1px solid rgba(255, 255, 255, 0.04); } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .feature { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; transition: border-color 0.15s ease, transform 0.15s ease; } .feature:hover { border-color: var(--border-focus); transform: translateY(-2px); } .feature-icon { font-size: 1.6rem; margin-bottom: 0.75rem; } .feature h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; letter-spacing: -0.01em; } .feature p { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; } .feature code { color: var(--accent); background: var(--accent-subtle); padding: 0 0.3rem; border-radius: 4px; font-family: var(--font-mono); font-size: 0.8rem; } .how { padding: 4rem 0; border-top: 1px solid rgba(255, 255, 255, 0.04); } .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: step; } .steps li { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; position: relative; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.75rem; } .steps h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; } .steps p { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; } .security { padding: 4rem 0 5rem; border-top: 1px solid rgba(255, 255, 255, 0.04); } .security-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start; } .security .section-title { text-align: left; margin-bottom: 1rem; } .security-lede { color: var(--text-secondary); font-size: 1rem; line-height: 1.65; } .security-list { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; } .security-list li { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.1rem; color: var(--text-secondary); font-size: 0.9rem; } .security-list strong { color: var(--text-primary); } .marketing-footer { padding: 2rem 0 3rem; border-top: 1px solid rgba(255, 255, 255, 0.04); color: var(--text-muted); font-size: 0.85rem; text-align: center; } .marketing-footer a { color: var(--text-secondary); text-decoration: none; } .marketing-footer a:hover { color: var(--text-primary); } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; } .hero-card { order: -1; max-width: 460px; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: 1fr; } .security-grid { grid-template-columns: 1fr; gap: 1.5rem; } } @media (max-width: 640px) { .hero { padding: 3rem 0 2rem; } .feature-grid { grid-template-columns: 1fr; } .marketing-nav { display: none; } } @media (max-width: 640px) { .landing-card { padding: 2rem 1.5rem; } .chat-header { padding: 0.75rem 1rem; } .messages { padding: 1rem; } .message-form { padding: 0.75rem 1rem; } .message-sender { min-width: 80px; font-size: 0.75rem; } .join-form { flex-direction: column; } } /* Admin-Kennzeichnung im Chat */ .badge-admin { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-lg); /* Drei Stufen statt einer: Flaeche, Rand und helle Schrift. Vorher lag ein zehnprozentiges Flaechenraster unter dem dunklen Grundakzent, beides kaum vom Untergrund zu unterscheiden. */ background: rgba(99, 102, 241, 0.22); border: 1px solid rgba(99, 102, 241, 0.45); color: var(--accent-text); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; vertical-align: middle; } /* Nur fuer Vorleseprogramme sichtbar. Ein Label, das die Gestaltung nicht stoert, aber die Eingabe benennt. display:none waere falsch, das nehmen Vorleseprogramme ebenfalls aus dem Baum. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Tastaturbedienung sichtbar machen. :focus-visible statt :focus, damit der Rahmen nur bei Tastatur erscheint und nicht bei jedem Mausklick. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } /* Hinweis, dass der Link nur einem selbst gehoert. Erscheint einmal je Raum. */ .share-warning { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.75rem 1.5rem 0; padding: 0.6rem 0.8rem; border: 1px solid rgba(224, 164, 74, 0.35); border-radius: var(--radius); background: rgba(224, 164, 74, 0.1); color: #e0a44a; font-size: 0.8rem; line-height: 1.4; } .share-warning span { flex: 1; } .warning-close { background: none; border: none; color: inherit; cursor: pointer; padding: 0 0.2rem; font-size: 0.9rem; line-height: 1; opacity: 0.7; } .warning-close:hover { opacity: 1; } /* Sprung ans Ende, wenn waehrend des Zurueckblaetterns etwas ankommt. */ .jump-btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 5.5rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border: 1px solid var(--border-focus); border-radius: var(--radius-lg); background: var(--bg-tertiary); color: var(--text-primary); font-size: 0.78rem; cursor: pointer; z-index: 5; } .jump-btn:hover { border-color: var(--accent); } /* Aufeinanderfolgende Nachrichten desselben Absenders. Der Name wird versteckt, nicht entfernt: So bleibt die Spalte stehen und der Text springt nicht nach links. Die Uhrzeit bleibt sichtbar, sie sagt bei jeder Zeile etwas Eigenes. */ .message.grouped .message-sender, .message.grouped .sender-tag { visibility: hidden; } .message.grouped { margin-top: -0.25rem; } /* Kommen und Gehen, fluechtig in der Seitenleiste. Frueher lief das durch den Gespraechsverlauf und riss ihn auseinander. */ .activity-list { margin: 0.75rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; } .activity-entry { color: var(--text-muted); font-size: 0.75rem; font-style: italic; line-height: 1.35; padding-left: 0.65rem; border-left: 1px solid var(--border); } @media (prefers-reduced-motion: no-preference) { .activity-entry { animation: aktivitaet-ein 0.25s ease; transition: opacity 0.5s ease; } .activity-entry.faded { opacity: 0; } } @keyframes aktivitaet-ein { from { opacity: 0; transform: translateY(-3px); } } /* Sofortiges Schliessen, zweistufig: Der zweite Klick ist unwiderruflich und trifft alle. Der scharfe Zustand muss sich deshalb deutlich abheben. */ #close-btn { margin-bottom: 0.5rem; } #close-btn.armed { background: var(--danger); border-color: var(--danger); color: #fff; } @media (prefers-reduced-motion: no-preference) { #close-btn.armed { animation: puls-warnung 1.2s ease-in-out infinite; } } @keyframes puls-warnung { 50% { opacity: 0.75; } } /* Reservierter Name ohne Nachweis. Bewusst deutlich, aber nicht schreiend: Der Verdacht soll auffallen, ohne den Chat zu einer Warnwand zu machen. */ .badge-warn { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-lg); background: rgba(224, 164, 74, 0.16); color: #e0a44a; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; vertical-align: middle; } .impostor { text-decoration: underline wavy rgba(224, 164, 74, 0.7); text-underline-offset: 3px; } /* E2E Hinweis im Chat-Header */ .e2e-pill { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; margin-right: 1rem; padding: 0.25rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.72rem; letter-spacing: 0.02em; white-space: nowrap; } @media (max-width: 640px) { .e2e-pill { display: none; } } /* Absenderfarben. Feste Klassen statt im Skript gesetzter Werte, damit die Seite ohne eingebettete Stile auskommt. Der Farbton wird im Client aus dem Namen abgeleitet, sodass derselbe Name immer dieselbe Farbe bekommt. */ .sender-c0 { --sender-color: hsl(0, 55%, 74%); } .sender-c1 { --sender-color: hsl(30, 55%, 70%); } .sender-c2 { --sender-color: hsl(50, 55%, 68%); } .sender-c3 { --sender-color: hsl(80, 45%, 68%); } .sender-c4 { --sender-color: hsl(120, 40%, 70%); } .sender-c5 { --sender-color: hsl(160, 45%, 68%); } .sender-c6 { --sender-color: hsl(185, 50%, 68%); } .sender-c7 { --sender-color: hsl(205, 60%, 74%); } .sender-c8 { --sender-color: hsl(230, 60%, 78%); } .sender-c9 { --sender-color: hsl(265, 55%, 78%); } .sender-c10 { --sender-color: hsl(295, 45%, 76%); } .sender-c11 { --sender-color: hsl(330, 55%, 76%); } /* Restlaufzeit und Absenderkennung */ .lifetime-pill { display: inline-flex; align-items: center; margin-left: auto; padding: 0.25rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius: 3px;) background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.72rem; font-family: var(--font-mono); white-space: nowrap; } .lifetime-pill + .e2e-pill { margin-left: 0.5rem; } .sender-tag { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); background: var(--bg-tertiary); border-radius: 3px; padding: 0 4px; letter-spacing: 0.04em; user-select: none; flex-shrink: 0; } .participant-list .sender-tag { margin-left: auto; } @media (max-width: 640px) { .lifetime-pill { font-size: 0.66rem; padding: 0.2rem 0.5rem; } } /* Symbole. Nur die vier tatsaechlich benutzten Zeichen aus Bootstrap Icons (MIT), damit statt der vollstaendigen Stylesheet-Datei nur die Schrift und diese wenigen Zeilen geladen werden. */ @font-face { font-family: bootstrap-icons; font-display: block; src: url("icons/bootstrap-icons.woff2") format("woff2"); } .bi { display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -0.125em; -webkit-font-smoothing: antialiased; } .bi-send::before { content: "\f6c0"; } .bi-box-arrow-left::before { content: "\f1c2"; } .bi-x-octagon::before { content: "\f627"; } .bi-arrow-down::before { content: "\f128"; } .bi-exclamation-triangle::before { content: "\f33b"; } .bi-x::before { content: "\f62a"; } .bi-people::before { content: "\f4d0"; } .bi-shield-lock::before { content: "\f538"; } /* Absenderfarbe: Die Klasse setzt nur den Wert, verwendet wird er an mehreren Stellen. Ohne Klasse, also bei Admins, greift die Akzentfarbe. */ /* Ein Schema fuer beide Seiten. Vorher fiel der Absender einer Nachricht auf den Akzent zurueck, der Name in der Liste dagegen auf die Grundschrift, und der Admin bekam in der Liste sogar eine Hashfarbe. Derselbe Mensch sah dadurch an zwei Stellen verschieden aus. */ .message-sender, .participant-name { color: var(--sender-color, var(--accent-text)); } /* Anwesend, aber noch ohne Namen. Meist harmlos, jemand liest nur mit. Es ist aber auch das einzige Zeichen, das ein stiller Mitleser hinterlaesst, etwa mit einem abgefangenen Einladungslink. Deshalb nicht unauffaellig grau, sondern erkennbar abgesetzt. */ .participant-name.unnamed { color: #e0a44a; font-style: italic; } /* Der Admin steht ausserhalb der zwoelf Teilnehmerfarben. */ .from-admin .message-sender, .participant-name.is-admin { color: var(--accent-text); } /* Eigene Nachrichten: schmaler Balken in der eigenen Farbe. Alle Zeilen tragen den Rand durchsichtig, damit beim Wechsel nichts springt. */ .message { border-left: 2px solid transparent; } .message.own { border-left-color: var(--sender-color, var(--accent)); } /* Restlaufzeit: je knapper die Zeit, desto deutlicher die Farbe. */ .lifetime-pill.warn { color: #e0a44a; border-color: rgba(224, 164, 74, 0.35); } .lifetime-pill.critical { color: var(--danger); border-color: rgba(239, 68, 68, 0.45); } .lifetime-pill.pulse { animation: lifetime-pulse 1.4s ease-in-out infinite; } @keyframes lifetime-pulse { 50% { opacity: 0.45; } } /* Haarfeine Linie unter der Kopfzeile, die mit der Restzeit schrumpft. */ .room-progress { height: 2px; background: var(--bg-tertiary); flex-shrink: 0; overflow: hidden; } .room-progress span { display: block; height: 100%; width: calc(var(--fortschritt, 1) * 100%); background: var(--accent); transition: width 1s linear, background-color 0.4s ease; } .room-progress.warn span { background: #e0a44a; } .room-progress.critical span { background: var(--danger); } /* Verbindungszustand: unauffaellig, aber ehrlich. */ .connection-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); margin-right: 0.75rem; transition: background-color 0.3s ease; } .connection-dot.live { background: var(--success); } .connection-dot.fallback { background: #e0a44a; } .connection-dot.lost { background: var(--danger); } /* Absenderkuerzel: normalerweise zurueckhaltend, sichtbar beim Ueberfahren. Bei Namensgleichheit im Raum dauerhaft, denn dann traegt es die Aussage. */ .sender-tag { opacity: 0; transition: opacity 0.15s ease; } .message:hover .sender-tag, .message:focus-within .sender-tag, .participant-list li:hover .sender-tag, .participant-list li:focus-within .sender-tag, .sender-tag.always { opacity: 1; } @media (prefers-reduced-motion: reduce) { .lifetime-pill.pulse { animation: none; } .room-progress span, .connection-dot, .sender-tag, .message { transition: none; } .messages { scroll-behavior: auto; } }