/* antiszene.org — v1 styles
 * mIRC-orientiertes Layout:
 *   Drei Spalten am Desktop (Channels | Chat | User)
 *   Drawer-Slide auf Mobile
 *   Monospace, schmale Zeilen, Topic oben, Eingabe unten
 */

:root {
    --bg:           #f0efe8;
    --panel:        #fafaf6;
    --panel-alt:    #efeee5;
    --border:       #c8c5ba;
    --text:         #1d1d1d;
    --muted:        #666;
    --accent:       #8b1c1c;       /* punk-rot */
    --accent-soft:  #c43a3a;
    --link:         #1a4f8a;
    --highlight-bg: #fff1a8;
    --error-bg:     #ffe2e2;
    --error-fg:     #8a1a1a;
    --ok-bg:        #d8f3d6;
    --ok-fg:        #1d5b1d;
    --warn-bg:      #fff0d6;
    --warn-fg:      #6a4a00;
    --system:       #888;
    --action:       #6a3aa3;

    --font-mono:    ui-monospace, "Cascadia Mono", "Source Code Pro",
                    "DejaVu Sans Mono", Consolas, "Liberation Mono", monospace;

    --left-w:  220px;
    --right-w: 200px;
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.45;
}
a { color: var(--link); text-decoration: underline; }
a.link, button.link {
    background: none; border: none; padding: 0;
    color: var(--link); cursor: pointer; font: inherit; text-decoration: underline;
}
button.ghost {
    background: transparent; border: 1px solid var(--border);
    padding: 0.3em 0.8em; cursor: pointer; font: inherit;
}
.hidden { display: none !important; }
small { font-size: 0.85em; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }

/* ============== Landing ============== */
body.landing {
    display: grid; place-items: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}
.landing-bg {
    position: fixed; inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg);
}
.landing-bg .bg-chat {
    position: absolute; inset: 0;
    padding: 1em 2em;
    filter: blur(2px) saturate(0.8);
    opacity: 0.3;
    color: #555;
}
.landing-bg .bg-line { line-height: 1.6; }
.landing-bg .t { color: #999; margin-right: 0.6em; }
.landing-bg .n { color: var(--accent-soft); }

.landing-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: 0 6px 30px rgba(0,0,0,0.18);
    padding: 1.6em 1.8em;
    max-width: 460px;
    width: calc(100% - 2em);
    z-index: 2;
}
.landing-card.narrow { max-width: 520px; }
.landing-card .logo {
    margin: 0 0 0.4em;
    font-size: 1.6em;
    letter-spacing: 0.02em;
}
.landing-card .tagline {
    margin: 0 0 1.2em;
    line-height: 1.5;
}
.landing-card .tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1em;
    flex-wrap: wrap;
}
.landing-card .tab {
    background: transparent; border: none;
    padding: 0.6em 1em;
    cursor: pointer; font: inherit;
    color: var(--muted);
    border-bottom: 2px solid transparent;
}
.landing-card .tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.landing-card .panel label {
    display: block;
    margin: 0.7em 0 0.2em;
    font-weight: 600;
}
.landing-card input[type=text],
.landing-card input[type=email],
.landing-card input[type=password] {
    width: 100%; box-sizing: border-box;
    padding: 0.5em 0.6em;
    border: 1px solid var(--border);
    background: #fff;
    font: inherit;
}
.landing-card .panel button[type=submit] {
    margin-top: 1em;
    padding: 0.6em 1.2em;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}
.landing-card .panel button[type=submit]:hover {
    background: var(--accent-soft);
}
.landing-card .footer-links {
    margin-top: 1.5em;
    font-size: 0.85em;
    color: var(--muted);
    text-align: center;
}
.landing-card .footer-links a { color: var(--muted); }

.msg {
    border: 1px solid;
    padding: 0.6em 0.9em;
    margin: 0.8em 0;
}
.msg.err  { background: var(--error-bg); border-color: var(--error-fg); color: var(--error-fg); }
.msg.ok   { background: var(--ok-bg);    border-color: var(--ok-fg);    color: var(--ok-fg); }
.msg.warn { background: var(--warn-bg);  border-color: var(--warn-fg);  color: var(--warn-fg); }

.btn {
    display: inline-block;
    padding: 0.5em 1.2em;
    background: var(--accent);
    color: #fff;
    border: none;
    text-decoration: none;
    cursor: pointer;
}

/* ============== Chat-App ============== */
body.chat-app {
    overflow: hidden;
    height: 100%;
}
.app {
    display: grid;
    grid-template-columns: var(--left-w) 1fr var(--right-w);
    grid-template-rows: 1fr;
    height: 100vh;
    width: 100vw;
}

/* Mobile-Header: nur unter ~860px */
.mobile-bar { display: none; }

/* --- Linke Spalte --- */
.sidebar-left {
    background: var(--panel-alt);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 0.8em 0.6em;
}
.sidebar-left h2 {
    font-size: 0.9em;
    margin: 1em 0 0.4em;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.me-box {
    border-bottom: 1px solid var(--border);
    padding: 0.4em 0.4em 0.8em;
    margin-bottom: 0.4em;
}
.me-nick { font-weight: 700; }
.me-nick.guest { color: var(--muted); }
.me-actions { font-size: 0.85em; margin-top: 0.2em; }
.channel-list {
    list-style: none; padding: 0; margin: 0;
}
.channel-list li { margin: 0; }
.ch-link {
    display: block;
    padding: 0.25em 0.4em;
    color: var(--text);
    text-decoration: none;
    border-radius: 2px;
}
.ch-link:hover { background: rgba(0,0,0,0.05); }
.ch-link.active {
    background: var(--accent);
    color: #fff;
}
.ch-mark { color: var(--muted); margin-left: 0.3em; }
.ch-link.active .ch-mark { color: rgba(255,255,255,0.8); }

.create-channel { margin-top: 0.8em; }
#create-channel-form {
    margin-top: 0.5em;
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 0.5em;
}
#create-channel-form label { display: block; font-size: 0.85em; margin-top: 0.4em; }
#create-channel-form input {
    width: 100%; box-sizing: border-box;
    padding: 0.3em; font: inherit;
    border: 1px solid var(--border);
}
#create-channel-form button {
    font: inherit; padding: 0.3em 0.7em; margin-top: 0.5em;
    cursor: pointer;
}
#create-channel-form button[type=submit] {
    background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.create-error { color: var(--error-fg); margin-top: 0.5em; font-size: 0.85em; }

/* --- Mitte: Chat --- */
.chat-main {
    display: flex; flex-direction: column;
    background: var(--panel);
    min-width: 0; /* damit lange Wörter umbrechen */
    overflow: hidden;
}
.chat-header {
    border-bottom: 1px solid var(--border);
    padding: 0.5em 0.8em;
    background: var(--panel-alt);
}
.chan-row { display: flex; align-items: baseline; gap: 0.8em; }
.chan-name { margin: 0; font-size: 1.1em; }
.chan-meta { color: var(--muted); font-size: 0.85em; }
.topic {
    margin-top: 0.2em;
    color: var(--muted);
    white-space: pre-wrap;
}
.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 0.5em 0.8em;
    background: var(--panel);
}
.line {
    padding: 0.05em 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.line .t {
    color: var(--muted);
    margin-right: 0.4em;
    user-select: none;
}
.line .n { font-weight: 600; }
.line.type-action .action {
    color: var(--action);
    font-style: italic;
}
.line.type-system, .line .system {
    color: var(--system);
    font-style: italic;
}
.line.highlight { background: var(--highlight-bg); }
.line.own { /* eigene Nachrichten — leichter visueller Hinweis */ }
.line.own .n { color: var(--accent); }

/* mIRC-artige Nick-Farben — automatisch verteilt per attribute selector
 * (eine bewusst kleine Palette, gut lesbar auf hellem Untergrund) */
.line .n[data-nick] { color: #1a4f8a; }
.line .n[data-nick^="a"], .line .n[data-nick^="A"] { color: #1a4f8a; }
.line .n[data-nick^="b"], .line .n[data-nick^="B"] { color: #5a8a1a; }
.line .n[data-nick^="c"], .line .n[data-nick^="C"] { color: #8a1a1a; }
.line .n[data-nick^="d"], .line .n[data-nick^="D"] { color: #6a3aa3; }
.line .n[data-nick^="e"], .line .n[data-nick^="E"] { color: #8a4a1a; }
.line .n[data-nick^="f"], .line .n[data-nick^="F"] { color: #1a6a8a; }
.line .n[data-nick^="g"], .line .n[data-nick^="G"] { color: #5a8a1a; }
.line .n[data-nick^="h"], .line .n[data-nick^="H"] { color: #8a1a6a; }
.line .n[data-nick^="i"], .line .n[data-nick^="I"] { color: #6a6a1a; }
.line .n[data-nick^="j"], .line .n[data-nick^="J"] { color: #1a4f8a; }
.line .n[data-nick^="k"], .line .n[data-nick^="K"] { color: #5a8a1a; }
.line .n[data-nick^="l"], .line .n[data-nick^="L"] { color: #8a1a1a; }
.line .n[data-nick^="m"], .line .n[data-nick^="M"] { color: #6a3aa3; }
.line .n[data-nick^="n"], .line .n[data-nick^="N"] { color: #8a4a1a; }
.line .n[data-nick^="o"], .line .n[data-nick^="O"] { color: #1a6a8a; }
.line .n[data-nick^="p"], .line .n[data-nick^="P"] { color: #5a8a1a; }
.line .n[data-nick^="q"], .line .n[data-nick^="Q"] { color: #8a1a6a; }
.line .n[data-nick^="r"], .line .n[data-nick^="R"] { color: #6a6a1a; }
.line .n[data-nick^="s"], .line .n[data-nick^="S"] { color: #1a4f8a; }
.line .n[data-nick^="t"], .line .n[data-nick^="T"] { color: #5a8a1a; }
.line .n[data-nick^="u"], .line .n[data-nick^="U"] { color: #8a1a1a; }
.line .n[data-nick^="v"], .line .n[data-nick^="V"] { color: #6a3aa3; }
.line .n[data-nick^="w"], .line .n[data-nick^="W"] { color: #8a4a1a; }
.line .n[data-nick^="x"], .line .n[data-nick^="X"] { color: #1a6a8a; }
.line .n[data-nick^="y"], .line .n[data-nick^="Y"] { color: #5a8a1a; }
.line .n[data-nick^="z"], .line .n[data-nick^="Z"] { color: #8a1a6a; }

/* Eingabefeld */
.chat-input-row {
    display: flex; align-items: center;
    border-top: 1px solid var(--border);
    background: var(--panel-alt);
    padding: 0.4em 0.6em;
    gap: 0.4em;
}
.chat-input-row .prompt {
    color: var(--muted);
    user-select: none;
}
.chat-input-row input[name=content] {
    flex: 1;
    padding: 0.4em 0.5em;
    font: inherit;
    border: 1px solid var(--border);
    background: #fff;
}
.chat-input-row.guest-notice {
    color: var(--muted);
    justify-content: space-between;
}

/* --- Rechte Spalte --- */
.sidebar-right {
    background: var(--panel-alt);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding: 0.8em 0.6em;
}
.sidebar-right h2 {
    font-size: 0.9em;
    margin: 0 0 0.6em;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.user-list {
    list-style: none; padding: 0; margin: 0;
}
.user-list li {
    padding: 0.1em 0.2em;
    word-break: break-all;
}
.user-list li.guest .nick { color: var(--muted); }
.role-mark { font-weight: 700; margin-right: 0.1em; }

/* ============== Mobile (Drawer-Slide) ============== */
@media (max-width: 860px) {
    .app {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--accent);
        color: #fff;
        padding: 0.4em 0.6em;
        z-index: 10;
    }
    .mobile-bar .hamburger,
    .mobile-bar .users-btn {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 1.4em;
        cursor: pointer;
        padding: 0.2em 0.4em;
    }
    .mobile-bar .mobile-channel {
        font-weight: 700;
    }

    /* Sidebars werden Drawer */
    .sidebar-left,
    .sidebar-right {
        position: fixed;
        top: 0; bottom: 0;
        width: 80%;
        max-width: 320px;
        z-index: 20;
        transition: transform 0.18s ease;
        box-shadow: 0 0 30px rgba(0,0,0,0.2);
    }
    .sidebar-left  { left: 0;  transform: translateX(-100%); }
    .sidebar-right { right: 0; transform: translateX(100%);  }
    body.drawer-left-open  .sidebar-left  { transform: translateX(0); }
    body.drawer-right-open .sidebar-right { transform: translateX(0); }

    .drawer-backdrop {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 15;
    }

    .chat-main { grid-column: 1; }
}