/* themes/base.css - Grundlage aller Designs außer Retro: Retro-Eigenheiten neutralisieren */

html, body { margin: 0; padding: 0; text-align: start; color: var(--txt); }
/* Schrift: Retro setzt Courier direkt auf body und Eingabefelder, deshalb hier mit höherer Spezifität */
html[class*="theme-"] body,
html[class*="theme-"] input, html[class*="theme-"] button, html[class*="theme-"] select, html[class*="theme-"] textarea,
html[class*="theme-"] #name, html[class*="theme-"] #enter, html[class*="theme-"] #chat_room_id, html[class*="theme-"] #copy,
html[class*="theme-"] #change_create, html[class*="theme-"] #new_id, html[class*="theme-"] #help,
html[class*="theme-"] #usermsg, html[class*="theme-"] #submitmsg { font-family: var(--font); }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { white-space: normal; text-decoration: none; }
a:hover { text-decoration: none; }
input, textarea { color: var(--txt); }
input::placeholder, textarea::placeholder, ::placeholder { color: var(--muted); opacity: 1; }
input:-webkit-autofill { -webkit-text-fill-color: var(--txt); }

/* Retro-Bausteine, die nur das Retro-Design zeigt */
.m-p, .m-u, .m-sep, .m-rtag, .m-qts, .m-date, .m-sec, .w-dash, .w-label,
.msgln > br, .m-quote > br, .sysln > br { display: none; }
.sysln i { font-style: normal; }
.sysln .m-ts { display: none; }
q::before, q::after { content: none; }
hr.break { display: none; }
center { display: block; }
.tlink, .tlink-inline { white-space: nowrap; cursor: pointer; }

/* Login-Seite: Retro-Positionierung und feste Breiten aufheben */
#loginform { border: 0; padding: 0; margin: 0; text-align: start; box-sizing: border-box; }   /* margin: Retro schiebt die Maske unter 800 px um 10 px nach oben */
#loginform p { margin: 0; }
#loginform label { display: block; }
#name, #chat_room_id { width: 100%; min-width: 0; box-sizing: border-box; outline: none; }
#enter, #copy, #change_create, #new_id, #help { margin: 0; min-width: 0; outline: none; box-sizing: border-box; }
.center_button { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 !important; padding: 0 !important; text-align: start; }
.room-box p:empty { display: none; }
#footer { position: fixed; top: auto; left: 0; right: 0; bottom: 10px; transform: none; margin: 0 !important; text-align: center; }
@media only screen and (min-width: 1320px) {
    #name, #chat_room_id { width: 100%; }
    #change_create { margin-left: 0; }
}

/* Chatseite: Grundgerüst */
#app { position: relative; box-sizing: border-box; }
#header { width: auto; height: auto; padding: 0; text-align: left; }
#mydiv { width: auto; min-width: 0; margin: 0; box-sizing: border-box; }
#wrapper { border: 0; width: auto; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; }
#menu { box-sizing: border-box; }
#menu > div[style] { display: none; }
.welcome { float: none; margin: 0; min-width: 0; }
.w-avatar, .brand .w-avatar { display: none; background-position: center; background-size: cover; background-repeat: no-repeat; }
.w-room { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* lange Raum-IDs */
.file-btn { display: inline-block; cursor: pointer; }

/* Eingebettet (iframe): Chat füllt den Rahmen, den js/embed.js zeichnet */
html.embed, html.embed body { background: #fff; }
html.embed #app { position: fixed; inset: 0; width: auto; height: auto; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
/* Anmeldeseite: Formular und Fußzeile untereinander, Fußzeile so hoch wie ihr Text (keine feste Höhe, jede Sprache passt) */
html.embed body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; margin: 0; }
html.embed #loginform { position: static; flex: 1 1 auto; min-height: 0; overflow: auto; width: auto; max-width: none; inset: auto; transform: none; margin: 0; border-radius: 0; box-shadow: none; }
html.embed #footer { position: static; flex: 0 0 auto; inset: auto; margin: 0 !important; padding: 8px 12px 10px; text-align: center; background: #fff; line-height: 1.5; }
html.embed .embed-x { position: fixed; top: 10px; inset-inline-end: 10px; z-index: 50; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .25); color: #fff; font-size: 15px; line-height: 30px; text-align: center; }
html.embed .embed-x:hover { background: rgba(0, 0, 0, .45); }
#chatbox { width: auto; min-width: 0; height: auto; margin: 0; border: 0; box-sizing: border-box; text-align: start; }
#msgform { margin: 0; box-sizing: border-box; }
#msgform center { flex: 1; min-width: 0; }
#usermsg { width: 100%; min-width: 0 !important; box-sizing: border-box; outline: none; }
#submitmsg { min-width: 0; margin: 0; outline: none; box-sizing: border-box; }
.footer-line { box-sizing: border-box; }

/* Nachrichten */
.msgln { box-sizing: border-box; word-wrap: break-word; overflow-wrap: anywhere; }
.m-text { white-space: pre-wrap; }
.name_link { cursor: pointer; }
.name_link.addressed { background: none; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.ip { font-size: 11px; }
.own .ip { display: none; }               /* eigene IP braucht niemand */
.sysln .ip { position: static !important; }
.reply_link { color: inherit; }
.botmsg .name_link::after { content: "AI"; display: inline-block; margin-inline-start: 6px; padding: 0 5px; font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: .03em; border-radius: 4px; vertical-align: 1px; background: var(--chip-bg); color: var(--chip-txt); }

/* Popups: Inline-Abstände der alten Markups überschreiben */
.popup center { margin-top: 14px !important; font-size: 14px !important; }
.popup .pop_content { user-select: text; }
.pop_inner { padding: 0; }

/* KI denkt nach: runde Punkte statt Zeichen */
.typing .dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.typing .dots i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.typing .dots i::before { content: none; }
.typing .m-ts { display: none; }
.botfail .m-text { color: #c62828; }