/* LLChat – Basis-Layout. Farben/Schrift kommen aus dem Skin (static/skins/*.css) ueber CSS-Variablen. */
@font-face {
  font-family: "LLC-VGA";
  src: url("/fonts/VT323-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* Fallback-Werte (= dos-blue), Skins ueberschreiben */
  --bg: #0000aa; --fg: #aaaaaa; --fg-bright: #ffffff; --dim: #5555ff;
  --border: #aaaaaa; --title-fg: #ffffff;
  --menu-bg: #aaaaaa; --menu-fg: #000000; --menu-hot: #aa0000;
  --sel-bg: #00aaaa; --sel-fg: #000000;
  --btn-bg: #00aa00; --btn-fg: #000000; --btn-hot: #ffff55;
  --input-bg: #000000; --input-fg: #ffff55;
  --dialog-bg: #aaaaaa; --dialog-fg: #000000; --dialog-border: #ffffff;
  --speak: #55ff55; --muted: #ff5555; --link: #55ffff; --err: #ff5555; --ok: #55ff55; --warn: #ffff55;
  --name: #ffff55; --time: #5555ff;
  --shadow: #000000;
  --font: "LLC-VGA", "Px437 IBM VGA 8x16", "Perfect DOS VGA 437", "Fixedsys", "Consolas", "DejaVu Sans Mono", monospace;
  --font-size: 20px;
  --scanlines: 0;
  --glow: none;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.15;
  text-shadow: var(--glow);
  overflow: hidden;
}
/* Optionale CRT-Scanlines (Skin setzt --scanlines auf 0..1) */
body::after {
  content: ""; pointer-events: none; position: fixed; inset: 0; z-index: 9999;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
  opacity: var(--scanlines);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
[hidden] { display: none !important; }
::selection { background: var(--sel-bg); color: var(--sel-fg); }

/* ---------- Grundgeruest ---------- */
#app { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }

.menubar, .statusbar {
  background: var(--menu-bg); color: var(--menu-fg);
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  padding: 0 1ch; min-height: 1.4em; text-shadow: none;
}
.menubar button, .statusbar button {
  background: none; border: 0; padding: 0 1ch; cursor: pointer; color: var(--menu-fg);
}
.menubar button:hover, .statusbar button:hover, .menubar button:focus-visible, .statusbar button:focus-visible {
  background: var(--sel-bg); color: var(--sel-fg); outline: none;
}
.hot { color: var(--menu-hot); }
.brand { font-weight: bold; padding-right: 2ch; }
.spacer { flex: 1; }
.statusbar .on { background: var(--muted); color: #000; }
.statusbar .active { background: var(--speak); color: #000; }

main {
  display: grid; grid-template-columns: minmax(18ch, 32ch) 1fr; gap: 1ch;
  padding: 1em 1ch .5em; min-height: 0;
}

/* Turbo-Vision-Fenster: Doppelrahmen + Titel im Rahmen + Schatten */
.window {
  position: relative; border: 4px double var(--border);
  box-shadow: 1ch .6em 0 var(--shadow);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  margin-right: 1ch; margin-bottom: .6em;
}
.window > .title {
  position: absolute; top: -.75em; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 1em; font-weight: normal; white-space: nowrap;
  background: var(--bg); color: var(--title-fg); padding: 0 1ch;
}
.window > .body { flex: 1; overflow: auto; padding: .5em 1ch; min-height: 0; }

/* Scrollbars im DOS-Stil */
* { scrollbar-color: var(--border) var(--dim); }
::-webkit-scrollbar { width: 1ch; }
::-webkit-scrollbar-track { background: var(--dim); }
::-webkit-scrollbar-thumb { background: var(--border); }

/* ---------- Channel-Baum ---------- */
.tree-ch { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.tree-ch:hover, .tree-ch.sel { background: var(--sel-bg); color: var(--sel-fg); }
.tree-ch.cur { color: var(--fg-bright); }
.tree-ch .lock { color: var(--warn); }
.tree-user { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.tree-user:hover { background: var(--sel-bg); color: var(--sel-fg); }
.tree-user.me { color: var(--fg-bright); }
.tree-user.spk { color: var(--speak); }
.tree-user .flags { color: var(--muted); }
.tree-user .vflag { color: var(--speak); }
.tree-user:hover .vflag, .tree-user:hover .flags { color: inherit; }
.tree-user .admin { color: var(--warn); }
.tree-topic { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Chat ---------- */
#messages { display: flex; flex-direction: column; gap: .15em; }
.msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .time { color: var(--time); }
.msg .who { color: var(--name); }
.msg .del { visibility: hidden; background: none; border: 0; color: var(--err); cursor: pointer; padding: 0 .5ch; }
.msg:hover .del { visibility: visible; }
.msg.sys { color: var(--dim); }
.msg.err { color: var(--err); }
.media { display: block; margin: .3em 0 .3em 2ch; max-width: min(48ch, 90%); max-height: 18em; border: 2px solid var(--border); cursor: pointer; background: #000; }
.file-gone { color: var(--muted); margin-left: 2ch; }
.older { align-self: center; }

#chat-form { display: flex; gap: 1ch; padding: .3em 1ch; border-top: 2px solid var(--border); align-items: center; }
#chat-input { flex: 1; min-width: 0; }
#upload-progress { padding: 0 1ch; color: var(--warn); }

/* ---------- Eingaben / Buttons ---------- */
input[type=text], input[type=password], input[type=number], select, textarea {
  background: var(--input-bg); color: var(--input-fg); border: 0; padding: .1em .5ch; outline: none;
  caret-color: var(--input-fg);
}
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px var(--btn-hot); }
.btn, button.btn {
  background: var(--btn-bg); color: var(--btn-fg); border: 0; padding: 0 1ch; cursor: pointer;
  box-shadow: .6ch .3em 0 var(--shadow); text-shadow: none; display: inline-block; margin: .1em .9ch .4em 0;
}
.btn:hover, .btn:focus-visible { color: var(--btn-hot); outline: none; }
.btn:active { transform: translate(.6ch, .3em); box-shadow: none; }
.btn.danger { background: var(--muted); }
input[type=range] { accent-color: var(--sel-bg); vertical-align: middle; }
input[type=checkbox], input[type=radio] { accent-color: var(--sel-bg); }

/* Pegelanzeige */
.meter { position: relative; display: inline-block; width: 16ch; height: .8em; background: #000; margin: 0 1ch; vertical-align: middle; }
.meter .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--dim); }
/* Pegelbalken-Farbe = Sendezustand: gruen = sendet, gedimmt = hoert nur zu, rot = stumm */
.meter.tx .bar { background: var(--speak); }
.meter.muted .bar { background: var(--muted); }
.meter .th { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--warn); }
#tx-ind { padding: 0 1ch; }

/* ---------- Dialoge ---------- */
dialog {
  background: var(--dialog-bg); color: var(--dialog-fg); border: 0; padding: 0;
  box-shadow: 1.5ch 1em 0 var(--shadow); max-width: min(90ch, 96vw); max-height: 90vh; text-shadow: none;
}
dialog::backdrop { background: rgba(0,0,0,.45); }
.dlg-frame { border: 4px double var(--dialog-border); margin: .5em 1ch; padding: .9em 1.5ch .6em; position: relative; }
.dlg-frame > .dlg-title {
  position: absolute; top: -.7em; left: 50%; transform: translateX(-50%); background: var(--dialog-bg);
  padding: 0 1ch; margin: 0; font-size: 1em; font-weight: normal; white-space: nowrap; color: var(--dialog-fg);
}
.dlg-body { overflow: auto; max-height: calc(90vh - 4em); }
.dlg-close { position: absolute; top: -.7em; right: 1ch; background: var(--dialog-bg); border: 0; cursor: pointer; padding: 0 .5ch; color: var(--muted); }
.tabs { display: flex; gap: 1ch; flex-wrap: wrap; margin-bottom: .6em; }
.tabs button { background: none; border: 0; cursor: pointer; padding: 0 1ch; }
.tabs button.act { background: var(--sel-bg); color: var(--sel-fg); }
.row { display: flex; gap: 1ch; align-items: center; flex-wrap: wrap; margin: .25em 0; }
.row > label:first-child { min-width: 22ch; }
.hint { opacity: .75; font-size: .9em; }
table.list { border-collapse: collapse; width: 100%; }
table.list td, table.list th { padding: 0 1ch; text-align: left; white-space: nowrap; }
table.list tr:nth-child(even) { background: rgba(0,0,0,.08); }
.lightbox img, .lightbox video { max-width: 88vw; max-height: 80vh; display: block; }
.popup { position: fixed; z-index: 50; background: var(--dialog-bg); color: var(--dialog-fg); box-shadow: 1ch .6em 0 var(--shadow); padding: .3em 0; min-width: 24ch; text-shadow: none; }
.popup button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0 1.5ch; cursor: pointer; }
.popup button:hover { background: var(--sel-bg); color: var(--sel-fg); }
.popup .ptitle { padding: 0 1.5ch .2em; border-bottom: 1px solid var(--dialog-fg); margin-bottom: .2em; }
.popup .prow { padding: 0 1.5ch; }

/* ---------- Login-Seiten ---------- */
.center { display: grid; place-items: center; height: 100%; padding: 1em; overflow: auto; }
.center .window { width: min(60ch, 96vw); }
.center .window > .body { padding: 1.2em 2ch 1em; overflow: visible; }
.form-row { display: grid; grid-template-columns: 14ch 1fr; gap: 1ch; margin: .5em 0; align-items: center; }
.form-row input { width: 100%; }
.msg-line { min-height: 1.2em; margin: .4em 0; }
.msg-line.err { color: var(--err); }
.msg-line.ok { color: var(--ok); }
.ascii-logo { color: var(--fg-bright); white-space: pre; line-height: 1; margin: 0 0 .8em; font-size: .9em; overflow: hidden; }

@media (max-width: 760px) {
  body { overflow: auto; }
  main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #tree-win { max-height: 35vh; }
  .row > label:first-child { min-width: 0; }
}

/* Hilfe-Tooltips: gepunktet unterstrichen = Mauszeiger drueberhalten fuer Erklaerung */
label.has-help { text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; }
#net, #mode-label, #tx-ind, .meter { cursor: help; }

/* Admin-Protokoll */
.audit-wrap { max-height: 55vh; overflow: auto; }
table.audit td.wrap { white-space: normal; min-width: 24ch; }
table.audit tr.alert td { color: var(--muted); }
.subtitle { color: var(--warn); margin: -.4em 0 1em; }

/* Willkommen / Changelog */
.cl-title { margin-top: .6em; border-top: 1px solid var(--dialog-fg); padding-top: .3em; }
.changelog { max-height: 14em; overflow-y: auto; padding-right: 1ch; min-width: min(64ch, 80vw); }
.cl-entry { margin: .3em 0 .6em; }
.cl-entry ul { margin: .1em 0 0; padding-left: 3ch; }
.cl-head { font-weight: bold; }
.cl-badge { background: var(--muted); color: var(--fg-bright); padding: 0 .5ch; margin-left: 1ch; }

/* Pixel-Animation im Willkommensfenster */
.welcome-anim { display: block; width: min(64ch, 80vw); aspect-ratio: 192 / 72; image-rendering: pixelated;
  image-rendering: crisp-edges; border: 2px solid var(--dialog-fg); background: #000; cursor: pointer; }
.anim-label { text-align: right; font-size: .85em; }
dialog .subtitle { color: var(--menu-hot); font-weight: bold; }

/* Anhang-Vorschau ueber dem Eingabefeld */
#attach-bar { display: flex; align-items: center; gap: 1ch; padding: .3em 1ch; border-top: 2px dashed var(--border); }
.attach-thumb { max-height: 4em; max-width: 12ch; image-rendering: auto; border: 1px solid var(--border); }
.attach-icon { color: var(--warn); }
.attach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chat-Tabs (Channel + Direktnachrichten) */
#chat-tabs { display: flex; flex-wrap: wrap; gap: .3ch; padding: .5em 1ch 0; border-bottom: 2px solid var(--border); }
#chat-tabs .tab { display: inline-flex; background: none; border: 0; padding: 0 .5ch; cursor: pointer; color: var(--fg); }
#chat-tabs .tab button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 .3ch; }
#chat-tabs .tab.act { background: var(--sel-bg); color: var(--sel-fg); }
#chat-tabs .tab.unread { color: var(--warn); font-weight: bold; }
#chat-tabs .tab.act.unread { color: var(--sel-fg); }
#chat-tabs .tab-x { color: var(--muted) !important; }
#chat-tabs .tab-new { color: var(--link); }
/* Angepinnte Nachrichten */
#pin-bar { max-height: 6em; overflow-y: auto; padding: .2em 1ch; border-bottom: 2px solid var(--border); background: rgba(0,0,0,.18); }
.pin { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin .pin-tag { color: var(--warn); }
.pin .del { visibility: hidden; background: none; border: 0; color: var(--err); cursor: pointer; }
.pin:hover .del { visibility: visible; }
.msg.pinned { border-left: 2px solid var(--warn); padding-left: .5ch; }
.msg .pinbtn { color: var(--warn); }
/* Ping & Rundruf */
.poke-text { font-size: 1.2em; }
.poke-msg { font-style: italic; }
dialog.announce { box-shadow: 0 0 0 4px var(--muted), 1.5ch 1em 0 var(--shadow); }
.announce-text { font-size: 1.35em; white-space: pre-wrap; max-width: 60ch; }

/* Drag & Drop im Baum */
.tree-ch[draggable=true], .tree-user[draggable=true] { cursor: grab; }
.tree-ch.drop-before { box-shadow: inset 0 3px 0 var(--warn); }
.tree-ch.drop-after { box-shadow: inset 0 -3px 0 var(--warn); }
.tree-ch.drop-inside { outline: 2px dashed var(--warn); outline-offset: -2px; }
/* Join/Leave-Infos */
.msg.info { color: var(--time); font-style: italic; }