/* allsmart chat — Design 1:1 am allsmart.gmbh-System orientiert:
monochrom, linienbasiert (1px borders, hover verstaerkt die Linie),
system-fonts, auto dark/light. Keine Farbflaechen. Naeher an ollama.com. */
:root {
--bg: #ffffff;
--fg: #1a1a1a;
--muted: #888888;
--text-secondary: #555555;
--text-tertiary: #666666;
--border: #e5e5e5;
--border-hover: #1a1a1a;
--card-bg: #ffffff;
--subtle-bg: #f8f8f8;
--logo-box: #1a1a1a;
--logo-mark: #ffffff;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
--radius: 8px;
--radius-lg: 12px;
--sidebar-w: 264px;
--tok-com:#8a8f98;
--tok-str:#15803d;
--tok-num:#b45309;
--tok-kw:#6d28d9;
--tok-tag:#be123c;
--tok-attr:#0e7490;
}
/* Dunkle Palette an genau einer Stelle. static/theme.js setzt data-theme
synchron im aus der Wahl des Users oder, solange er keine getroffen
hat, aus prefers-color-scheme. Deshalb steht hier keine zweite Kopie unter
einer Media Query, die mit dieser auseinanderlaufen koennte. */
:root[data-theme="dark"] {
--bg: #0d0d0d;
--fg: #f5f5f5;
--muted: #888888;
--text-secondary: #b0b0b0;
--text-tertiary: #999999;
--border: #2a2a2a;
--border-hover: #f5f5f5;
--card-bg: #161616;
--subtle-bg: #262626;
--logo-box: #f5f5f5;
--logo-mark: #161616;
--tok-com:#8b93a1;
--tok-str:#4ade80;
--tok-num:#fbbf24;
--tok-kw:#a78bfa;
--tok-tag:#fb7185;
--tok-attr:#22d3ee;
}
* { box-sizing: border-box; }
/* native Controls (Textarea/Select/Scrollbar) folgen dem Theme */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
html, body { height: 100%; margin: 0; }
body {
font-family: var(--font);
color: var(--fg);
background: var(--bg);
font-size: 15px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
/* --- Brand-Mark (allsmart Firmenicon: Knoten/Hub) ------------------------- */
.brand-mark { width: 22px; height: 22px; flex: 0 0 22px; color: var(--fg); display: block; }
.brand-mark.lg { width: 40px; height: 40px; flex-basis: 40px; }
.wordmark { font-weight: 500; letter-spacing: -0.02em; }
.wordmark .hl { font-weight: 800; } /* Betonung nur ueber Schriftstaerke, monochrom */
.wordmark .dim { color: var(--muted); font-weight: 500; }
/* --- Login ---------------------------------------------------------------- */
.login-body { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
.login-card {
width: min(92vw, 360px);
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 30px 26px;
}
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-card h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 18px; letter-spacing: -0.01em; }
.login-card label { display: block; font-size: .85rem; color: var(--text-secondary); margin-bottom: 7px; }
.login-card input {
width: 100%; padding: 11px 13px; border: 1px solid var(--border);
border-radius: var(--radius); background: var(--subtle-bg); outline: none;
transition: border-color .15s ease;
}
.login-card input:focus { border-color: var(--border-hover); }
.login-card button {
width: 100%; margin-top: 18px; padding: 11px; cursor: pointer; font-weight: 600;
background: var(--fg); color: var(--bg); border: 1px solid var(--fg); border-radius: var(--radius);
transition: opacity .15s ease;
}
.login-card button:hover { opacity: .85; }
.login-error { color: var(--fg); font-size: .85rem; margin: 0 0 4px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius); }
/* --- App-Shell ------------------------------------------------------------ */
/* Die Seitenleiste geht ganz nach oben durch; rechts daneben erst der Balken,
darunter die Spalten. Vorher steckte der Balken in #main, also zwischen
Seitenleiste und Werkstatt: dort standen Auto und der Hell/Dunkel-Knopf
mitten im Fenster statt an dessen rechtem Rand. */
#app { display: flex; height: 100dvh; overflow: hidden; position: relative; }
#app-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#app-body { flex: 1; display: flex; min-height: 0; }
#sidebar {
width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
background: var(--bg);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
transition: margin-left .2s ease;
}
#app.sidebar-collapsed #sidebar { margin-left: calc(-1 * var(--sidebar-w)); }
.sidebar-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.sidebar-head .wordmark { flex: 1; font-size: .95rem; }
/* 44 breit um ein 17px-Icon: der rechte Rand von -14 setzt das Icon auf die
Kante, an der links das Logo beginnt (gemessen: vorher 15px zu weit innen). */
#sidebar-close { display: none; min-width: 44px; min-height: 44px; margin: -8px -14px -8px 0; }
.suche {
display: block; box-sizing: border-box; width: calc(100% - 24px); margin: 0 12px 8px;
padding: 8px 10px; font-size: .88rem; color: var(--fg);
background: var(--subtle-bg); border: 1px solid var(--border); border-radius: var(--radius);
outline: none;
}
.suche:focus { border-color: var(--border-hover); }
.suche-item { flex-direction: column; align-items: flex-start; gap: 2px; }
.suche-item .conv-name { font-weight: 600; width: 100%; text-align: left; }
.suche-schnipsel { font-size: .8rem; color: var(--text-secondary); line-height: 1.35; white-space: normal; }
.suche-schnipsel b { color: var(--fg); font-weight: 600; }
.msg.suche-fund .bubble { outline: 2px solid var(--border-hover); outline-offset: 6px; border-radius: var(--radius); }
.btn-new {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 4px 12px 8px; padding: 9px 12px; cursor: pointer;
background: transparent; color: var(--fg);
border: 1px solid var(--border); border-radius: var(--radius);
font-size: .9rem; font-weight: 500; transition: border-color .15s ease;
}
.btn-new:hover { border-color: var(--border-hover); }
.btn-new .plus { font-size: 1.05rem; line-height: 1; margin-top: -1px; display: inline-flex; }
.btn-new .plus .licon { width: 15px; height: 15px; margin: 0; }
.icon-btn .licon { width: 17px; height: 17px; margin: 0; vertical-align: middle; }
.conv-list { flex: 1; overflow-y: auto; padding: 4px 8px; }
.conv-item {
display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radius);
cursor: pointer; color: var(--text-secondary); font-size: .9rem;
border: 1px solid transparent; transition: color .12s ease, border-color .12s ease;
}
.conv-item:hover { color: var(--fg); border-color: var(--border); }
.conv-item.active { color: var(--fg); border-color: var(--border); background: var(--subtle-bg); }
.conv-item .conv-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item .conv-actions { display: none; gap: 1px; }
.conv-item:hover .conv-actions { display: flex; }
.conv-actions button { border: none; background: none; cursor: pointer; color: var(--muted); padding: 3px; border-radius: 4px; display: grid; place-items: center; }
.conv-actions button:hover { color: var(--fg); }
.conv-actions button .licon { width: 15px; height: 15px; }
.sidebar-foot {
padding: 10px 12px; border-top: 1px solid var(--border);
display: flex; flex-direction: column; gap: 1px;
}
/* Als Link gesetzt sieht Mandanten sonst anders aus als die Knoepfe daneben. */
.sidebar-foot a.btn-logout { display: block; box-sizing: border-box; }
.btn-logout {
width: 100%; padding: 8px; cursor: pointer; text-align: left;
background: none; border: none; color: var(--muted); font-size: .85rem; border-radius: var(--radius);
}
.btn-logout:hover { color: var(--fg); }
/* Haelfte-Haelfte mit Untergrenze fuer den Chat. Vorher stand hier flex:1
(Basis 0) gegen flex:1 1 50% der Werkstatt, was den Chat auf ein Viertel
der Breite druckte: bei 1500px Fenster blieben 243px, drei Woerter pro
Zeile. Unterhalb von 720px liegt die Werkstatt ohnehin als Overlay. */
#main { flex: 1 1 50%; display: flex; flex-direction: column; min-width: 420px; }
#topbar {
display: flex; align-items: center; gap: 12px; padding: 13px 20px;
border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.icon-btn { border: none; background: none; cursor: pointer; font-size: 1.15rem; color: var(--text-secondary); padding: 2px 4px; }
/* Als Raster, nicht an der Textgrundlinie: mit `vertical-align: middle` hing
das Icon an der Schriftmetrik, und die rechnet Safari anders als Chromium.
Michaels Bild zeigte den Umschalter hoeher als den Titel, meine Messung
1px tiefer. Mittig im Kasten ist in beiden dasselbe. */
#topbar .icon-btn { display: inline-grid; place-items: center; line-height: 1; }
#sidebar-close { place-items: center; line-height: 1; } /* display kommt vom Telefon-Block */
.icon-btn:hover { color: var(--fg); }
.conv-title { flex: 1; font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#model-select {
padding: 6px 26px 6px 11px; border: 1px solid var(--border); border-radius: var(--radius);
background: var(--bg) url("data:image/svg+xml;utf8,") no-repeat right 9px center;
cursor: pointer; font-size: .85rem; color: var(--text-secondary); -webkit-appearance: none; appearance: none;
}
#model-select:hover { border-color: var(--border-hover); color: var(--fg); }
.messages { flex: 1; overflow-y: auto; padding: 28px 0; }
.empty-state { text-align: center; margin: 16vh auto; color: var(--muted); max-width: 420px; padding: 0 20px; }
.empty-state .brand-mark { margin: 0 auto 18px; color: var(--fg); }
.empty-state h2 { color: var(--fg); font-weight: 600; font-size: 1.3rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.empty-state p { margin: 0; font-size: .92rem; }
.msg { max-width: 760px; margin: 0 auto; padding: 14px 24px; display: flex; gap: 14px; align-items: flex-start; }
.msg .avatar {
flex: 0 0 28px; height: 28px; width: 28px; border-radius: var(--radius); position: relative;
display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: var(--muted);
border: 1px solid var(--border);
}
.msg.assistant .avatar { color: var(--fg); }
.msg.assistant .avatar svg { width: 23px; height: 23px; }
/* Solange gearbeitet wird, dreht sich die Bildmarke: eine Umdrehung, dann gut
zwei Sekunden Ruhe. Dauerlauf waere Zappeln, gar nichts war der Zustand
vorher — bei einem Plan-Lauf ueber Minuten sah man nur am Stopp-Knopf, dass
ueberhaupt etwas passiert. */
@keyframes marke-dreht {
0% { transform: rotate(0deg); }
30% { transform: rotate(360deg); }
100% { transform: rotate(360deg); }
}
.msg.assistant.arbeitet .avatar svg {
transform-origin: 50% 50%;
animation: marke-dreht 3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
.msg.assistant.arbeitet .avatar svg { animation: none; }
}
.msg .msg-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg .bubble { min-width: 0; padding-top: 0; }
/* Ein Wort ohne Leerzeichen (ein langer Link, ein Token) lief sonst ueber den
Rand und machte den ganzen Verlauf seitlich verschiebbar: am Telefon um
290px, gemessen mit einem Link von 100 Zeichen. `anywhere` bricht nur,
wenn es anders nicht geht. */
.msg .bubble { overflow-wrap: anywhere; }
/* Erste Textzeile bündig mit der Icon-Oberkante: das Zeilen-Leading nach
oben ausgleichen (nur beim rahmenlosen Assistant-Text). */
.msg.assistant .bubble { margin-top: -0.3em; }
/* Der negative Versatz oben richtet die erste Textzeile am Avatar aus. Steht
ein Stapel Werkzeug-Abzeichen davor, sitzt die Blase nicht mehr neben dem
Avatar, sondern unter dem Stapel: dann zieht der Versatz den Text an das
letzte Abzeichen heran, enger als die Abzeichen untereinander stehen. Die
Antwort ist aber ein neuer Block, kein weiterer Eintrag der Liste.
Die Auswahl muss `.msg.assistant` mitnehmen: sonst hat sie eine Klasse
weniger als die Regel darueber und verliert. */
.msg.assistant .tool-status + .bubble,
.msg.assistant .route-badge + .bubble { margin-top: 12px; }
/* User-Nachrichten bekommen eine dezente Sprechblase zur Abgrenzung vom
Assistenten (der flaechig-frei bleibt, damit Tabellen/Code sauber lesen). */
.msg.user .msg-col { align-items: flex-start; }
.msg.user .bubble {
background: var(--subtle-bg); border: 1px solid var(--border-light);
border-radius: var(--radius-lg); padding: 9px 14px; max-width: 100%; padding-top: 9px;
white-space: pre-wrap; /* vom User eingegebene Zeilenumbrüche erhalten */
}
.msg .bubble > *:first-child { margin-top: 0; }
.msg .bubble > *:last-child { margin-bottom: 0; }
/* Markdown */
.bubble p { margin: .6em 0; }
.bubble h1, .bubble h2, .bubble h3, .bubble h4, .bubble h5, .bubble h6 { margin: 1em 0 .4em; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.bubble h1 { font-size: 1.35rem; } .bubble h2 { font-size: 1.18rem; } .bubble h3 { font-size: 1.04rem; }
.bubble h4 { font-size: .97rem; } .bubble h5 { font-size: .9rem; } .bubble h6 { font-size: .88rem; color: var(--text-secondary); }
.bubble ul, .bubble ol { margin: .5em 0; }
.bubble ol { padding-left: 1.4em; }
.bubble li { margin: .3em 0; }
/* Unordered lists: readableAudit "logo asterisk" als Bullet — ein 6-strahliger
Asterisk (senkrechte + zwei Diagonalen) als inline-SVG per CSS-mask, damit die
eine Grafik jede Farbe annimmt. Eingefärbt über --bullet (Fallback fg). */
.bubble ul { list-style: none; padding-left: 0; }
.bubble ul > li { position: relative; padding-left: 1.5em; }
.bubble ul > li::before {
content: ""; position: absolute; left: 0; top: 0;
/* Box = volle Zeilenhöhe der ersten Zeile; die mask zentriert das
Sternchen darin -> es sitzt exakt auf der Textmitte, größenunabhängig. */
width: 1.4em; height: 1.65em; background-color: var(--bullet, var(--fg));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cline x1='8' y1='3' x2='8' y2='13'/%3E%3Cline x1='4' y1='5' x2='12' y2='11'/%3E%3Cline x1='12' y1='5' x2='4' y2='11'/%3E%3C/g%3E%3C/svg%3E") .1em center / .8em .8em no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cline x1='8' y1='3' x2='8' y2='13'/%3E%3Cline x1='4' y1='5' x2='12' y2='11'/%3E%3Cline x1='12' y1='5' x2='4' y2='11'/%3E%3C/g%3E%3C/svg%3E") .1em center / .8em .8em no-repeat;
}
.bubble a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--muted); }
.bubble a:hover { text-decoration-color: var(--fg); }
.bubble code { font-family: var(--mono); font-size: .86em; background: var(--subtle-bg); border: 1px solid var(--border); padding: .08em .36em; border-radius: 5px; }
.bubble pre { background: var(--subtle-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; margin: .7em 0; }
.bubble pre code { background: none; border: none; padding: 0; font-size: .84em; }
.bubble blockquote {
margin: 1em 1.6em; padding: .35em 0 .35em 1.1em;
border-left: 2px solid var(--border);
color: var(--text-secondary); line-height: 1.9;
}
.bubble .table-wrap { overflow-x: auto; margin: .7em 0; }
.bubble table { border-collapse: collapse; width: auto; font-size: .92em; }
.bubble th, .bubble td { border: 1px solid var(--border); padding: 7px 12px; text-align: left; vertical-align: top; }
.bubble thead th { background: var(--subtle-bg); font-weight: 600; white-space: nowrap; }
.bubble hr { border: none; border-top: 1px solid var(--border); margin: 1.1em 0; }
/* Inline Lucide-Icons (ersetzte Emojis) — skalieren mit der Textgröße */
.licon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin: 0 .06em; }
/* In Überschriften das Icon auf die Textmitte zentrieren (statt an der
Grundlinie) — sonst sitzt es optisch zu tief. */
.bubble h1 .licon, .bubble h2 .licon, .bubble h3 .licon,
.bubble h4 .licon, .bubble h5 .licon, .bubble h6 .licon {
vertical-align: middle; position: relative; top: -0.08em;
}
/* Bild-Overlay (Vollbild, Escape schliesst) */
.img-overlay {
position: fixed; inset: 0; z-index: 1000; background: rgba(15, 15, 25, 0.85);
display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.img-overlay-img {
max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 8px;
}
/* Springende Pünktchen als Tipp-/Denk-Indikator (statt blinkendem Cursor) */
/* Wartend (leere Blase) den Text-Versatz aufheben, damit die Pünktchen
auf Höhe des Icons zentrieren statt zu hoch zu sitzen. */
.msg.assistant .bubble.thinking { margin-top: 0; }
.typing { display: flex; gap: 9px; align-items: center; min-height: 28px; padding: 0 2px; }
.typing .dots { display: flex; gap: 5px; }
.typing .denkt { font-size: .82rem; color: var(--muted); }
.typing .dots span {
width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary);
animation: bounce 1.25s infinite ease-in-out;
}
.typing .dots span:nth-child(2) { animation-delay: .16s; }
.typing .dots span:nth-child(3) { animation-delay: .32s; }
.typing .think-label { color: var(--text-tertiary); font-size: .85rem; }
.typing .think-label:empty { display: none; }
@keyframes bounce {
0%, 65%, 100% { transform: translateY(0); opacity: .45; }
32% { transform: translateY(-5px); opacity: 1; }
}
.composer { max-width: 760px; width: 100%; margin: 0 auto; padding: 10px 24px 22px; position: relative; }
/* "Ans Ende": haengt am Formular, damit er bei jeder Hoehe des Felds
direkt darueber sitzt. `hidden` nimmt ihn ganz aus dem Fluss. */
.nach-unten {
position: absolute; left: 50%; top: -34px; transform: translateX(-50%);
width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
display: inline-grid; place-items: center; padding: 0;
background: var(--bg); color: var(--fg); border: 1px solid var(--border);
box-shadow: 0 2px 8px rgba(0,0,0,.12); z-index: 5;
}
.nach-unten:hover { border-color: var(--border-hover); }
/* `display` oben schlaegt das [hidden] des Browsers, gleiche Spezifitaet, spaeter gewinnt. */
.nach-unten[hidden] { display: none; }
.nach-unten .licon { width: 18px; height: 18px; margin: 0; }
.composer-inner {
display: flex; flex-direction: column;
border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg);
transition: border-color .15s ease;
}
.composer-inner:focus-within, .composer.drag-over .composer-inner { border-color: var(--border-hover); }
.composer-row { position: relative; }
.composer textarea {
display: block; width: 100%; resize: none;
min-height: 50px; max-height: 220px; overflow-y: hidden;
/* Links zwei Knoepfe (Bueroklammer, Skizze), rechts einer. Die Knoepfe enden
bei 83px, der Text braucht danach Luft und nicht drei Pixel. */
padding: 13px 52px 13px 97px; line-height: 1.5;
border: none; background: transparent; color: var(--fg); outline: none;
border-radius: var(--radius-lg);
}
/* Anhang und Skizze: eine gemeinsame Regel und ein dauerhafter Rahmen. Vorher
waren es zwei nackte Icons nebeneinander, die erst beim Darueberfahren als
Knopf zu erkennen waren. */
.attach-btn, .mal-btn {
position: absolute; bottom: 8px; height: 34px; width: 34px; cursor: pointer;
display: grid; place-items: center; color: var(--text-tertiary);
background: var(--subtle-bg); border: 1px solid var(--border);
border-radius: var(--radius);
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.attach-btn { left: 9px; }
.mal-btn { left: 49px; }
.attach-btn:hover, .mal-btn:hover {
color: var(--fg); border-color: var(--border-hover);
}
.attach-btn .licon, .mal-btn .licon { width: 17px; height: 17px; margin: 0; }
/* Senden und Stopp teilen sich denselben Platz: sie sind nie gleichzeitig
sichtbar (setStreaming blendet das eine aus, das andere ein). Darum eine
gemeinsame Regel, sonst driften die Positionen auseinander. Der Stopp-Knopf
stand auf right:50px und sprang beim Absenden 42px nach links. */
#send, .stop-btn {
position: absolute; right: 8px; bottom: 8px; height: 36px; width: 36px; cursor: pointer;
display: grid; place-items: center;
background: var(--fg); color: var(--bg); border: none; border-radius: var(--radius);
font-size: 1.05rem; line-height: 1; transition: opacity .15s ease;
}
#send:hover, .stop-btn:hover { opacity: .85; }
#send:disabled { background: var(--border); color: var(--muted); cursor: default; }
#send .licon { width: 20px; height: 20px; }
#send[hidden], .stop-btn[hidden] { display: none; }
.stop-glyph { width: 10px; height: 10px; background: currentColor; border-radius: 2px; display: block; }
/* Malflaeche: Vollflaechen-Overlay. Die Regeln stehen hier und nicht in
malflaeche.js, damit das Modul selbst nichts ueber dieses Stylesheet weiss;
in smartstudio kommt ein eigenes daneben. */
.mal-backdrop {
position: fixed; inset: 0; z-index: 1600;
background: rgba(15, 15, 25, .88);
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.mal-panel {
width: 100%; height: 100%;
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius-lg); display: flex; flex-direction: column;
overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
.mal-leiste {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 10px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.mal-abstand { flex: 1; }
.mal-farbe {
width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
border: 2px solid var(--border); background: var(--farbe); padding: 0;
/* Heller Innenring: sonst ist die schwarze Farbe im Dunkelmodus ein
unsichtbarer Kreis auf dunklem Grund. */
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.mal-farbe.aktiv { border-color: var(--fg); transform: scale(1.12); }
.mal-staerke {
width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
cursor: pointer; padding: 0;
}
.mal-staerke span { display: block; background: var(--fg); border-radius: 50%; }
.mal-staerke.aktiv { border-color: var(--fg); }
.mal-werkzeug {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--bg); color: var(--text-secondary); cursor: pointer;
font-family: inherit; font-size: .8rem;
}
.mal-werkzeug .licon { width: 15px; height: 15px; margin: 0; }
.mal-werkzeug:hover { color: var(--fg); border-color: var(--border-hover); }
.mal-werkzeug.aktiv { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.mal-abbrechen, .mal-fertig {
padding: 6px 14px; border-radius: var(--radius); cursor: pointer;
font-family: inherit; font-size: .85rem; font-weight: 600;
}
.mal-abbrechen { background: none; border: 1px solid var(--border); color: var(--text-secondary); }
.mal-abbrechen:hover { color: var(--fg); border-color: var(--border-hover); }
.mal-fertig { background: var(--fg); color: var(--bg); border: 1px solid var(--fg); }
.mal-fertig:hover { opacity: .85; }
.mal-buehne {
flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
padding: 16px; background: var(--subtle-bg);
}
/* Die Flaeche wird passend skaliert, gezeichnet wird in voller Aufloesung. */
.mal-canvas {
max-width: 100%; max-height: 100%; background: #fff;
border: 1px solid var(--border); border-radius: var(--radius);
cursor: crosshair; touch-action: none;
}
/* Bezug: in der Werkstatt markierte Stelle, die mitgeschickt wird */
.auswahl-chip {
display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius);
background: var(--subtle-bg); color: var(--text-secondary); font-size: .82rem;
}
.auswahl-chip[hidden] { display: none; }
.auswahl-icon { display: inline-flex; align-items: center; color: var(--muted); flex: 0 0 auto; }
.auswahl-icon .licon { width: 14px; height: 14px; margin: 0; }
.auswahl-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.auswahl-clear {
flex: 0 0 auto; background: none; border: none; cursor: pointer;
color: var(--text-tertiary); font-size: 1rem; line-height: 1; padding: 2px 4px;
}
.auswahl-clear:hover { color: var(--fg); }
/* Anhang-Vorschau im Composer */
.attach-previews { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 2px; }
.attach-previews:empty { display: none; }
.thumb { position: relative; width: 58px; height: 58px; }
.thumb img { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.thumb-x {
position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
background: var(--fg); color: var(--bg); border: 1px solid var(--bg); cursor: pointer;
font-size: .7rem; line-height: 1; display: grid; place-items: center; padding: 0;
}
/* Bilder in Nachrichten */
.msg.user .bubble.img-only { background: none; border: none; padding: 0; }
.msg.user .bubble.img-only .msg-images { margin-bottom: 0; }
.msg-images { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.msg-images img {
max-width: 260px; max-height: 260px; border-radius: var(--radius);
border: 1px solid var(--border); cursor: pointer; display: block;
}
.error-line { max-width: 760px; margin: 4px auto; padding: 8px 24px; color: var(--text-secondary); font-size: .88rem; }
/* Auto-Badge im Topbar + Route-Badge pro Antwort */
.auto-badge {
font-size: .78rem; color: var(--text-tertiary); border: 1px solid var(--border);
border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.route-badge {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
font-size: .72rem; font-weight: 500; border-radius: var(--radius-lg); padding: 2px 10px 2px 8px;
margin-bottom: 8px;
color: var(--rc, var(--text-tertiary));
border: 1px solid color-mix(in srgb, var(--rc, var(--border)) 40%, transparent);
background: color-mix(in srgb, var(--rc, transparent) 10%, transparent);
}
.route-badge .licon { width: 13px; height: 13px; }
.route-badge.r-direct { --rc: #10b981; }
.route-badge.r-research { --rc: #3b82f6; }
.route-badge.r-plan { --rc: #8b5cf6; }
.route-badge.r-ipcha { --rc: #f59e0b; }
.route-badge.r-fallback { --rc: var(--muted); }
.route-badge.r-vision { --rc: #14b8a6; }
/* Web-Tool-Aktivität (search/fetch/…) */
.tool-status {
display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 8px;
align-self: flex-start; flex-wrap: nowrap;
padding: 6px 11px; border: 1px solid var(--border); border-radius: var(--radius-lg);
color: var(--text-secondary); font-size: .82rem; max-width: 100%;
}
.tool-status .t-label { font-family: var(--mono); color: var(--fg); white-space: nowrap; }
.tool-status .t-arg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Uhrzeit nur im Verlauf: wann wurde diese Seite geholt. */
.tool-status .t-zeit { color: var(--muted); font-size: .76rem; white-space: nowrap; flex: 0 0 auto; }
.tool-status .t-zeit:empty { display: none; }
.tool-status .spinner {
width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%;
border: 1.5px solid var(--border); border-top-color: var(--fg); animation: spin .7s linear infinite;
}
.tool-status.done .spinner { border: none; width: auto; height: auto; animation: none; color: var(--muted); }
.tool-status.done .spinner::before { content: "✓"; }
.tool-status.error {
color: var(--fg);
border-color: color-mix(in srgb, var(--fg) 30%, var(--border));
}
.tool-status.error .spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* --- Agent-Seite (/agent) ------------------------------------------------ */
#agent-app { max-width: 780px; margin: 0 auto; padding: 20px 20px 80px; }
#agent-top { display: flex; align-items: center; gap: 10px; padding: 8px 0 20px; }
.agent-back { display: grid; place-items: center; color: var(--fg); text-decoration: none; }
.agent-back:hover { opacity: .7; }
#agent-top .wordmark { font-weight: 700; letter-spacing: -0.01em; }
#agent-top .wordmark .hl { font-weight: 700; }
#agent-top .wordmark .dim { color: var(--muted); font-weight: 500; }
.agent-form { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }
.agent-label { display: block; font-size: .8rem; color: var(--muted); margin: 0 0 5px; }
#agent-task, #agent-host {
width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius);
background: var(--subtle-bg); color: var(--fg); outline: none; resize: vertical; line-height: 1.4;
}
#agent-task:focus, #agent-host:focus { border-color: var(--border-hover); }
.agent-form-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.agent-host-field { flex: 1; display: flex; flex-direction: column; }
.agent-host-field .agent-label { margin-bottom: 5px; }
#agent-start {
padding: 9px 18px; background: var(--fg); color: var(--bg); border: 1px solid var(--fg);
border-radius: var(--radius); cursor: pointer; font-weight: 600; white-space: nowrap;
}
#agent-start:disabled { opacity: .5; cursor: default; }
.agent-hint { font-size: .78rem; color: var(--muted); margin: 10px 0 0; }
.agent-feed { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.agent-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 11px 13px; }
.agent-card.task-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--subtle-bg); border: none;
}
.agent-task-text { font-weight: 600; }
.agent-host-tag { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.agent-card.thought { border: none; padding: 2px 2px; }
.agent-card.thought .agent-body { color: var(--text-secondary); white-space: pre-wrap; line-height: 1.5; }
.agent-card.confirm { border-color: var(--border-hover); }
.agent-why { color: var(--text-secondary); margin: 0 0 8px; line-height: 1.45; }
.agent-cmd-label { font-size: .78rem; color: var(--muted); margin: 0 0 6px; }
.agent-cmd-label code { font-family: var(--mono); }
.agent-cmd {
width: 100%; font-family: var(--mono); font-size: .85rem; padding: 9px 11px;
border: 1px solid var(--border); border-radius: var(--radius); background: var(--subtle-bg);
color: var(--fg); outline: none; resize: none; overflow: hidden; line-height: 1.45;
}
.agent-cmd:focus { border-color: var(--border-hover); }
.agent-cmd[readonly] { opacity: .7; }
.agent-actions { display: flex; gap: 8px; margin-top: 9px; align-items: center; }
.btn-run, .btn-reject {
padding: 7px 15px; border-radius: var(--radius); cursor: pointer; font-weight: 600; font-size: .85rem;
}
.btn-run { background: var(--fg); color: var(--bg); border: 1px solid var(--fg); }
.btn-reject { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.btn-reject:hover { border-color: var(--border-hover); }
.agent-note { font-size: .82rem; color: var(--muted); }
.agent-stream {
font-family: var(--mono); font-size: .8rem; line-height: 1.5; margin: 6px 0 0;
padding: 8px 10px; border-radius: var(--radius); background: var(--subtle-bg);
white-space: pre-wrap; word-break: break-word; overflow-x: auto; max-height: 320px;
}
.agent-stream.cmd { background: transparent; padding: 0; color: var(--text-secondary); }
.agent-stream.err { color: var(--fg); border: 1px solid var(--border); }
.agent-exit { display: inline-block; font-size: .75rem; font-weight: 600; margin-top: 8px; color: var(--muted); }
.agent-exit.ok::before { content: "✓ "; }
.agent-exit.fail::before { content: "✕ "; }
.agent-result.rejected { font-size: .82rem; color: var(--muted); }
.agent-card.finished { background: var(--subtle-bg); border: none; }
.agent-fin-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 5px; }
.agent-card.finished .agent-body { line-height: 1.5; }
.agent-card.error { color: var(--fg); border-color: var(--border-hover); }
/* Schritt-Divider im Agent-Feed (Iterations-Zähler) */
.agent-card.step {
display: flex; align-items: baseline; gap: 8px; border: none; padding: 6px 2px 2px;
border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px;
}
.agent-card.step:first-child { border-top: none; }
.agent-step-n { font-weight: 700; font-size: .82rem; letter-spacing: .01em; }
.agent-step-max { font-size: .74rem; color: var(--muted); }
/* „arbeitet…"-Indikator (Agent) — zeigt laufende Arbeit bei langen Calls */
.agent-busy { display: flex; align-items: center; gap: 5px; padding: 9px 2px; }
.agent-busy[hidden] { display: none; }
.agent-busy .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: busyblink 1.2s infinite ease-in-out both; }
.agent-busy .dot:nth-child(2) { animation-delay: .18s; }
.agent-busy .dot:nth-child(3) { animation-delay: .36s; }
.agent-busy .busy-label { font-size: .8rem; color: var(--muted); margin-left: 5px; }
@keyframes busyblink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* PDF-Anhänge: Vorschau-Kachel + History-Chip */
.thumb.thumb-file {
width: auto; height: auto; min-width: 90px; max-width: 180px; padding: 8px 26px 8px 10px;
display: flex; align-items: center; background: var(--subtle-bg); border: 1px solid var(--border);
border-radius: var(--radius);
}
.thumb-file .thumb-name { font-size: .78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb-file::before {
content: "PDF"; font-size: .6rem; font-weight: 700; letter-spacing: .04em; color: var(--bg);
background: var(--fg); border-radius: 3px; padding: 2px 4px; margin-right: 8px; flex: 0 0 auto;
}
.msg-pdf {
display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-secondary);
border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 9px; margin-bottom: 6px;
}
.msg-pdf::before {
content: "PDF"; font-size: .58rem; font-weight: 700; color: var(--bg); background: var(--fg);
border-radius: 3px; padding: 2px 4px;
}
/* Inline-/Block-Math (leichter LaTeX-Ersatz, sub/sup + Symbole) */
.math { white-space: nowrap; }
.math sub, .math sup { font-size: .72em; }
.math-block { display: block; text-align: center; margin: 8px 0; white-space: normal; }
/* „Fortsetzen"-Karte (Recherche nach Überlast-Abbruch) */
.resume-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.resume-msg { color: var(--text-secondary); font-size: .9rem; flex: 1; min-width: 160px; }
.resume-btn { padding: 7px 16px; border-radius: var(--radius); cursor: pointer; font-weight: 600; font-size: .88rem; background: var(--fg); color: var(--bg); border: 1px solid var(--fg); }
.resume-btn:hover { opacity: .85; }
/* „Neu generieren"-Angebot nach Stopp */
.regen-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 760px; margin: 4px auto 8px; padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.regen-msg { color: var(--text-secondary); font-size: .88rem; flex: 1; }
.regen-btn { padding: 6px 14px; border-radius: var(--radius); cursor: pointer; font-weight: 600; font-size: .85rem; background: var(--fg); color: var(--bg); border: 1px solid var(--fg); }
.regen-btn:hover { opacity: .85; }
/* Aktionszeile unter Assistant-Blase (Neu-generieren) */
.msg-actions { display: flex; justify-content: flex-end; margin-top: 6px; padding: 0 28px; }
.msg-regen { background: none; border: none; cursor: pointer; color: var(--text-tertiary); font-size: .82rem; padding: 4px 8px; border-radius: 4px; transition: color .12s ease; }
.msg-regen:hover { color: var(--fg); }
/* Versions-Navigation (Antwort-Versionen) */
.variant-nav { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; }
.variant-btn { background: none; border: none; cursor: pointer; color: var(--text-tertiary); font-size: .82rem; padding: 4px 8px; border-radius: 4px; transition: color .12s ease; }
.variant-btn:hover { color: var(--fg); }
.variant-btn:disabled { opacity: .35; cursor: default; }
.variant-count { color: var(--text-secondary); font-size: .78rem; }
/* Icon plus Beschriftung in den Aktionsknoepfen */
.msg-regen, .msg-edit, .variant-btn, .resume-btn, .regen-btn {
display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.msg-regen .licon, .msg-edit .licon, .variant-btn .licon { width: 14px; height: 14px; margin: 0; }
.resume-btn .licon, .regen-btn .licon { width: 15px; height: 15px; margin: 0; }
.variant-btn { padding: 4px 6px; }
/* Kopieren-Knopf an Code-Bloecken */
.bubble pre { position: relative; }
/* Eine Leiste fuer beide Knoepfe. Vorher lagen sie einzeln absolut, der
Vorschau-Knopf auf right:105px: dieser Wert unterstellte eine feste Breite
des Kopieren-Knopfes, und beim Wechsel auf "Kopiert" sprang der Abstand. */
.code-tools {
position: absolute; top: 6px; right: 6px; display: flex; gap: 6px;
opacity: 0; transition: opacity .12s ease;
}
.code-copy, .code-preview, .code-save {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
background: var(--bg); color: var(--text-tertiary); font-family: inherit;
font-size: .75rem; line-height: 1.4; transition: color .12s ease;
}
.code-copy .licon, .code-preview .licon, .code-save .licon { width: 13px; height: 13px; margin: 0; }
.bubble pre:hover .code-tools, .code-tools:focus-within { opacity: 1; }
.code-copy:hover, .code-copy.ok, .code-preview:hover, .code-save:hover { color: var(--fg); }
/* Syntax-Highlighting Token-Farben */
.tok-com { color: var(--tok-com); font-style: italic; }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-kw { color: var(--tok-kw); }
.tok-tag { color: var(--tok-tag); }
.tok-attr { color: var(--tok-attr); }
/* Aktionszeile an der User-Blase (Bearbeiten) */
/* Buendig unter der linken Blasenkante. Vorher stand hier `flex-end` mit 28px
Innenabstand; gemessen ist die Zeile aber nur so breit wie ihr Knopf (99px
in einer 670px-Spalte), `flex-end` bewirkte also nichts und die 28px
schoben den Knopf ins Nichts unter der Blase. */
.msg-actions.user { justify-content: flex-start; padding: 0; opacity: 0; transition: opacity .12s ease; }
.msg.user:hover .msg-actions.user, .msg-actions.user:focus-within { opacity: 1; }
.msg-edit {
background: none; border: none; cursor: pointer; color: var(--text-tertiary);
font-size: .82rem; padding: 4px 8px; border-radius: 4px; transition: color .12s ease;
}
.msg-edit:hover { color: var(--fg); }
/* Inline-Editor */
.edit-box { max-width: 760px; margin: 2px 0 4px; }
.edit-input {
width: 100%; box-sizing: border-box; padding: 10px 12px; resize: vertical;
border: 1px solid var(--fg); border-radius: var(--radius-lg);
background: var(--bg); color: var(--fg); line-height: 1.5; min-height: 44px;
}
.edit-input:focus { outline: none; }
.edit-hint { color: var(--text-tertiary); font-size: .78rem; margin: 6px 2px 0; }
.edit-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.edit-save, .edit-cancel {
padding: 6px 14px; border-radius: var(--radius); cursor: pointer;
font-weight: 600; font-size: .85rem;
}
.edit-save { background: var(--fg); color: var(--bg); border: 1px solid var(--fg); }
.edit-cancel { background: none; color: var(--text-secondary); border: 1px solid var(--border); }
.edit-save:hover, .edit-cancel:hover { opacity: .85; }
/* --- Dropzone-Overlay (Drag & Drop flächendeckend) ------------------------ */
/* Overlay deckt den gesamten Chat-Bereich (#main+composer) ab.
position:absolute innerhalb von #app (daher muss #app position:relative haben). */
.dropzone {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .12s ease;
z-index: 100;
background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.dropzone.active {
opacity: 1;
pointer-events: none;
}
/* Card in der Mitte — nur bei aktiver Dropzone sichtbar/aktiv */
.dropzone .dropzone-card {
background: var(--bg);
border: 2px dashed var(--border-hover);
border-radius: var(--radius-lg);
padding: 48px 32px;
text-align: center;
box-shadow: 0 12px 40px rgba(0,0,0,.15);
/* card darf nicht klickbar sein, pointer-events auf dem Overlay ist none */
pointer-events: none;
}
.dropzone .dropzone-icon {
color: var(--border-hover);
margin-bottom: 16px;
}
.dropzone .dropzone-title {
color: var(--fg);
font-weight: 600;
font-size: 1.1rem;
letter-spacing: -0.02em;
margin-bottom: 6px;
}
.dropzone .dropzone-hint {
color: var(--text-secondary);
font-size: .88rem;
}
/* --- Modal (z.B. nicht unterstütztes Dateiformat) ------------------------- */
.modal-backdrop {
position: fixed; inset: 0; z-index: 200;
display: grid; place-items: center; padding: 20px;
background: rgba(0,0,0,.35); overflow-y: auto;
}
.modal {
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 24px 26px 20px;
max-width: 420px; width: 100%;
box-shadow: 0 16px 48px rgba(0,0,0,.2); text-align: left;
}
.modal-title { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; margin-bottom: 8px; }
.modal-msg { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; }
.modal-hint { color: var(--text-tertiary); font-size: .82rem; line-height: 1.5; margin-top: 8px; }
.modal-ok {
margin-top: 18px; padding: 7px 16px; border-radius: var(--radius); cursor: pointer;
font-weight: 600; font-size: .88rem; float: right;
background: var(--fg); color: var(--bg); border: 1px solid var(--fg);
}
.modal-ok:hover { opacity: .85; }
.modal::after { content: ""; display: block; clear: both; }
/* --- Formular-Dialog (Datei speichern, Ordner anlegen) -------------------- */
/* showModal meldet nur; hier wird etwas eingegeben. Gleiche Huelle, damit ein
Dialog nicht wie ein zweites Fenstersystem aussieht. */
/* Der Mandanten-Dialog hat neun Felder und ein Textfeld: ohne Begrenzung
waechst er aus dem Fenster heraus und der Knopf darunter ist nicht mehr
erreichbar, weder mit der Maus noch fuer einen Test. */
.modal-form { max-width: 460px; max-height: 86vh; overflow-y: auto; }
.modal-feld { display: block; margin-top: 14px; }
.modal-feld > span {
display: block; margin-bottom: 5px;
color: var(--text-secondary); font-size: .82rem;
}
.modal-feld input, .modal-feld select {
width: 100%; box-sizing: border-box; padding: 8px 10px;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--bg); color: var(--fg);
font-family: inherit; font-size: .9rem;
}
.modal-feld input:focus, .modal-feld select:focus {
outline: none; border-color: var(--border-hover);
}
.modal-leiste { display: flex; gap: 8px; justify-content: flex-end; }
.modal-leiste .modal-ok { float: none; }
.modal-sekundaer {
background: transparent; color: var(--text-secondary);
border: 1px solid var(--border); font-weight: 500;
}
.modal-sekundaer:hover { color: var(--fg); border-color: var(--border-hover); opacity: 1; }
/* --- Ordner --------------------------------------------------------------- */
.ordner-backdrop {
position: fixed; inset: 0; z-index: 200;
display: grid; place-items: center; padding: 20px;
background: rgba(0,0,0,.35);
}
.ordner-panel {
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 18px 20px 20px;
width: 100%; max-width: 560px; max-height: 80vh; overflow-y: auto;
box-shadow: 0 16px 48px rgba(0,0,0,.2);
}
.ordner-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ordner-kopf h3 { flex: 1; margin: 0; font-size: 1.02rem; letter-spacing: -0.01em; }
.ordner-kopf-tools { display: flex; gap: 6px; }
.ordner-leer {
color: var(--text-tertiary); font-size: .86rem; line-height: 1.5; margin: 14px 2px 2px;
}
.ordner-zeile {
display: flex; align-items: center; gap: 8px; padding: 8px 4px;
border-bottom: 1px solid var(--border);
}
.ordner-zeile.aktiv .ordner-name { color: var(--fg); font-weight: 600; }
.ordner-name {
flex: 1; display: flex; align-items: center; gap: 7px;
background: transparent; border: 0; cursor: pointer; padding: 2px 0;
color: var(--text-secondary); font-family: inherit; font-size: .9rem; text-align: left;
}
.ordner-name:hover { color: var(--fg); }
.ordner-name .licon { width: 15px; height: 15px; }
.ordner-zahl { color: var(--text-tertiary); font-size: .78rem; }
.ordner-zeile-tools { display: flex; gap: 6px; }
.ordner-dateien {
padding: 4px 4px 10px 26px; display: flex; flex-direction: column; gap: 4px;
color: var(--text-secondary); font-size: .84rem;
}
.ordner-datei { display: flex; align-items: center; gap: 8px; }
.ordner-datei span { flex: 1; font-family: var(--mono, monospace); }
.werkstatt-ordner {
color: var(--text-tertiary); font-size: .78rem;
}
.werkstatt-ordner:not(:empty)::before { content: "· "; }
/* --- Quellen-Panel -------------------------------------------------------- */
.msg-sources {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 8px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg);
}
.msg-sources .q-title {
font-size: .78rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 4px;
}
/* Nummer links, daneben Titel und darunter der Host: eine Zeile pro
Quelle statt drei untereinander. */
.msg-sources .q-item {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 8px;
row-gap: 1px;
padding: 4px 6px;
border-radius: var(--radius);
transition: background .2s ease;
}
.msg-sources .q-item:hover {
background: var(--subtle-bg);
}
.msg-sources .q-num {
font-size: .75rem;
color: var(--muted);
grid-row: 1 / 3;
padding-top: 2px;
}
.msg-sources .q-link {
color: var(--fg);
font-size: .86rem;
text-decoration: none;
font-weight: 500;
}
.msg-sources .q-link:hover {
text-decoration: underline;
}
.msg-sources .q-domain {
font-size: .7rem;
color: var(--text-secondary);
}
.source-ref {
color: var(--fg);
text-decoration: none;
font-weight: 600;
font-size: .88rem;
padding: 2px 4px;
border-radius: 3px;
}
.source-ref:hover {
background: var(--subtle-bg);
text-decoration: underline;
}
.msg-sources .q-item.highlight {
background: color-mix(in srgb, var(--fg) 10%, transparent);
border: 1px solid var(--border-hover);
}
/* --- HTML-Vorschau-Overlay ------------------------------------------------ */
.html-preview-backdrop {
position: fixed; inset: 0; z-index: 1500;
display: flex; align-items: center; justify-content: center;
background: rgba(15, 15, 25, 0.85);
}
.html-preview-panel {
width: min(1100px, 94vw); height: 90vh;
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius-lg); display: flex; flex-direction: column;
overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.3);
}
.html-preview-header {
display: flex; align-items: center; gap: 12px; padding: 10px 14px;
border-bottom: 1px solid var(--border);
}
.html-preview-title { font-size: .9rem; font-weight: 600; margin: 0; color: var(--fg); }
/* Knoepfe rechts: ohne das stehen sie links am Titel geklebt, mit einem
leeren Kopf daneben, der bei 1500px Fensterbreite 800px misst. */
.html-preview-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.html-preview-close, .html-preview-download, .html-preview-pin {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px;
cursor: pointer; font-size: .8rem; line-height: 1.4;
color: var(--text-secondary); background: var(--bg); font-family: inherit;
}
.html-preview-close { padding: 4px 7px; }
.html-preview-close .licon, .html-preview-download .licon, .html-preview-pin .licon {
width: 14px; height: 14px; margin: 0;
}
.html-preview-close:hover, .html-preview-download:hover, .html-preview-pin:hover { color: var(--fg); border-color: var(--border-hover); }
.html-preview-frame { flex: 1; width: 100%; border: 0; background: #fff; }
/* --- Seiten-Werkstatt ----------------------------------------------------- */
/* #app ist flex-direction: row (Default), deshalb rechts neben #main als viertes Kind */
.werkstatt { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--subtle-bg); }
.werkstatt[hidden] { display: none; }
/* Beide Spaltenkoepfe auf dieselbe Hoehe: die Werkstatt-Leiste traegt einen
Knopf und war dadurch 5px hoeher als der Chat-Kopf, was die Trennlinie
im Split um eben diese 5px versetzt hat. */
.werkstatt-bar, .spalten-kopf {
display: flex; align-items: center; gap: 10px; padding: 8px 14px;
border-bottom: 1px solid var(--border); flex: 0 0 auto;
min-height: 43px; box-sizing: border-box;
}
.werkstatt-title, .spalten-titel { font-size: .8rem; font-weight: 600; color: var(--muted); }
/* Icon in Schriftfarbe des Titels, nicht als eigener Akzent. */
.kopf-icon { display: inline-flex; align-items: center; color: var(--muted); margin-right: -4px; }
.kopf-icon .licon { width: 15px; height: 15px; margin: 0; }
/* Ohne Werkstatt gibt es nichts zu unterscheiden: dann waere der Kopf nur
eine leere Leiste ueber dem Chat. */
#app:not(.werkstatt-offen) .spalten-kopf { display: none; }
.werkstatt-files { font-family: var(--mono); font-size: .78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; margin-right: 8px; }
/* Buehne, damit die Aufzieh-Lage genau ueber dem Rahmen liegt. */
.werkstatt-buehne { flex: 1; min-height: 0; position: relative; display: flex; }
.werkstatt-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.ausschnitt-lage {
/* ueber dem Hinweis: auch aus einer kaputten Seite soll man einen
Ausschnitt aufziehen koennen, um sie zu zeigen. */
position: absolute; inset: 0; z-index: 4; cursor: crosshair;
background: rgba(15, 15, 25, .35);
}
.ausschnitt-lage[hidden] { display: none; }
.ausschnitt-rahmen {
position: absolute; border: 2px dashed #fff; background: rgba(255, 255, 255, .12);
pointer-events: none;
}
.ausschnitt-rahmen[hidden] { display: none; }
/* Waehrend der Server schneidet, passiert sonst sichtbar nichts: der
Ausschnitt braucht rund eine Sekunde, und ohne Zeichen ist nicht klar,
ob der Klick ueberhaupt angekommen ist. Dieselbe Bildmarke wie im Chat,
hier durchgehend drehend statt mit Pause. */
/* Eine Seite, die nichts rendert, sieht aus wie ein Ladefehler. Der Grund
gehoert dorthin, wo man hinsieht. */
.werkstatt-hinweis {
position: absolute; left: 0; right: 0; top: 0; z-index: 3;
padding: 9px 14px; font-size: .82rem; line-height: 1.4;
background: var(--fg); color: var(--bg);
}
.werkstatt-hinweis[hidden] { display: none; }
.werkstatt-arbeit {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px; background: rgba(15, 15, 25, .55); color: #fff;
backdrop-filter: blur(1px);
}
.werkstatt-arbeit[hidden] { display: none; }
.arbeit-marke svg { width: 34px; height: 34px; animation: spin 1.4s linear infinite; }
.arbeit-text { font-size: .85rem; letter-spacing: .01em; }
@media (prefers-reduced-motion: reduce) {
.arbeit-marke svg { animation: none; }
}
.ausschnitt-hinweis {
position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
background: rgba(15, 15, 25, .85); color: #fff; font-size: .8rem;
padding: 5px 12px; border-radius: var(--radius); pointer-events: none;
}
@media (max-width: 720px) {
.werkstatt { position: fixed; inset: 0; z-index: 40; border-left: 0; }
#main { min-width: 0; }
}
/* --- Quelltext bearbeiten -------------------------------------------------- */
/* Liegt ueber dem Rahmen statt daneben: die Werkstatt-Spalte ist schmal genug,
dass Vorschau und Editor nebeneinander beide unbrauchbar waeren. */
.quelltext {
position: absolute; inset: 0; z-index: 5;
display: flex; flex-direction: column;
background: var(--bg);
}
.quelltext[hidden] { display: none; }
.quelltext-kopf {
display: flex; align-items: center; gap: 8px; padding: 7px 12px;
border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.quelltext-datei {
padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
background: var(--bg); color: var(--fg);
font-family: var(--mono); font-size: .78rem; max-width: 50%;
}
.quelltext-stand {
flex: 1; color: var(--text-tertiary); font-size: .76rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quelltext-stand.fehler { color: var(--danger, #c0392b); }
.quelltext-feld {
flex: 1; min-height: 0; width: 100%; box-sizing: border-box;
padding: 12px 14px; border: 0; resize: none;
background: var(--bg); color: var(--fg);
font-family: var(--mono); font-size: .8rem; line-height: 1.55;
tab-size: 2; white-space: pre; overflow: auto;
}
.quelltext-feld:focus { outline: none; }
/* --- Knoepfe im Werkstatt-Kopf -------------------------------------------- */
/* Rahmen und Flaeche wie die Knoepfe am Eingabefeld: ohne sie sehen sie aus
wie Text und laden nicht zum Klicken ein. */
.werkstatt-bar .icon-btn {
/* 26px, nicht mehr: die Leiste hat 8px Innenabstand oben und unten plus
eine Trennlinie, und sie muss auf dieselben 43px kommen wie der Chat-Kopf
daneben. Mit 30px stand sie auf 47 und die Trennlinie im Split war
versetzt. */
height: 26px; min-width: 26px; padding: 0 6px;
display: inline-grid; place-items: center;
background: var(--subtle-bg); border: 1px solid var(--border);
border-radius: var(--radius); color: var(--text-tertiary);
font-size: .82rem; line-height: 1;
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.werkstatt-bar .icon-btn:hover { color: var(--fg); border-color: var(--border-hover); }
/* Der eingeschaltete Zustand muss sich vom blossen Hover unterscheiden, sonst
ist beim Ueberfahren nicht zu sehen, ob der Modus laeuft. Darum gedreht:
Schrift auf Flaeche statt Flaeche unter Schrift. */
.werkstatt-bar .icon-btn.aktiv,
.werkstatt-bar .icon-btn.aktiv:hover {
background: var(--fg); border-color: var(--fg); color: var(--bg);
}
.werkstatt-in-ordner {
padding: 3px 9px; cursor: pointer; font-family: inherit; font-size: .74rem;
color: var(--text-tertiary); background: transparent;
border: 1px dashed var(--border); border-radius: var(--radius);
transition: color .12s ease, border-color .12s ease;
}
.werkstatt-in-ordner:hover { color: var(--fg); border-color: var(--border-hover); }
.werkstatt-in-ordner[hidden] { display: none; }
/* --- Mandanten-Verwaltung -------------------------------------------------- */
.mandanten-panel { max-width: 720px; }
.mandant-zeile { align-items: flex-start; }
.mandant-zeile.still { opacity: .55; }
.mandant-name { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mandant-name strong { font-size: .92rem; font-weight: 600; }
.modal-feld textarea {
width: 100%; box-sizing: border-box; padding: 8px 10px; resize: vertical;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--bg); color: var(--fg);
font-family: var(--mono); font-size: .8rem; line-height: 1.5;
}
.modal-feld textarea:focus { outline: none; border-color: var(--border-hover); }
/* --- Mandanten-Seite ------------------------------------------------------- */
.seite-mandanten { background: var(--bg); color: var(--fg); }
.verwaltung { max-width: 860px; margin: 0 auto; padding: 32px 24px 60px; }
.verwaltung-kopf {
display: flex; align-items: flex-start; gap: 24px;
padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.verwaltung-kopf h1 { margin: 0 0 6px; font-size: 1.3rem; letter-spacing: -0.01em; }
.verwaltung-hinweis {
margin: 0; max-width: 56ch; color: var(--text-secondary);
font-size: .86rem; line-height: 1.55;
}
.verwaltung-hinweis code { font-family: var(--mono); font-size: .82rem; }
.verwaltung-tools { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.verwaltung-tools a { text-decoration: none; }
.modal-hinweis {
display: block; margin-top: 4px;
color: var(--text-tertiary); font-size: .74rem; line-height: 1.45;
}
.modal-feld input.modal-haken { width: auto; margin-right: 8px; }
/* --- Am Telefon (ganz am Ende, siehe Hinweis unten) ------------------------------------------------------------
Gemessen an einem 390px breiten Fenster, bevor hier etwas stand: die
Chatliste deckte 264 von 390 Pixeln ab und war beim Start offen, das
Eingabefeld hatte 15px Schrift (worauf iOS beim Antippen hineinzoomt), und
der Umschalter der Liste war 25x26 gross.
Der Block steht bewusst als letzter im Stylesheet: eine Media-Query erhoeht
die Spezifitaet nicht. Stand er weiter oben, gewann jede spaetere Regel
gleicher Staerke — `.msg-actions` zum Beispiel, und die mobile Fassung war
wirkungslos, ohne dass es auffiel. */
@media (max-width: 720px) {
#sidebar { position: absolute; z-index: 20; height: 100%; }
#app:not(.sidebar-collapsed) #main::after {
content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); z-index: 10;
}
#main { min-width: 0; }
/* Unter 16px zoomt iOS beim Fokus in die Seite hinein und zeigt danach
einen verschobenen Ausschnitt. Das ist die Grenze, nicht der Geschmack. */
.composer textarea { font-size: 16px; }
/* Die Knoepfe ruecken zusammen, der Text bekommt den Platz. */
.composer { padding: 8px 10px 14px; }
/* Michaels Bild (chat.png): der Text klebte an den Knoepfen, und die
Spalte hatte 216 von 390px. Kleinere Knoepfe kaufen Luft, keine Breite:
was links und rechts reserviert ist, bleibt ueber die ganze Hoehe
reserviert. Darum am Telefon die Knoepfe in eine Zeile unter das Feld,
und das Feld hat die volle Breite (gemessen 342px). */
.composer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 8px 8px; }
.composer textarea { flex: 1 1 100%; padding: 12px 6px 6px; }
.attach-btn, .mal-btn, #send, .stop-btn { position: static; }
#send, .stop-btn { margin-left: auto; }
/* Fingerkuppen treffen keine 25 Pixel. 44 ist das ueblich empfohlene Mass. */
#topbar { padding: 6px 10px; gap: 6px; }
#topbar .icon-btn { min-width: 44px; min-height: 44px; }
.conv-item { padding: 12px 10px; }
/* Nicht `> *`: Abmelden steckt in einem