/* ============================================================
   DGN Chat - Core Styles (Phase 1)
   Dark-First, responsive, kein Framework-Ballast.
   ============================================================ */

:root {
  --bg:          #0a0e13;
  --panel:       #12171f;
  --panel-2:     #1a2028;
  --border:      #242d3a;
  --border-soft: #1d2530;
  --fg:          #e4ebf2;
  --fg-dim:      #aab4bf;
  --muted:       #6b7684;
  --accent:      #5cb0ff;
  --accent-2:    #7ac4ff;
  --ok:          #51d88a;
  --warn:        #ffb454;
  --err:         #ff6b6b;
  --live:        #ff3b5c;
  --dj:          #c77dff;
  --admin:       #ff6b6b;
  --mod:         #9b7fff;
  --vip:         #ffd166;

  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      0 8px 32px rgba(0,0,0,.5);
  --font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono:        "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* Schriftgroessen — ueber JS per data-fontsize auf #app ueberschreibbar */
  --fs-base:     15px;
  --fs-msg:      15px;
  --fs-time:     12px;
  --fs-author:   15px;
  --fs-roomname: 17px;
}

#app[data-fontsize="small"]  { --fs-base:14px; --fs-msg:14px; --fs-time:11px; --fs-author:14px; --fs-roomname:16px; }
#app[data-fontsize="normal"] { --fs-base:15px; --fs-msg:15px; --fs-time:12px; --fs-author:15px; --fs-roomname:17px; }
#app[data-fontsize="large"]  { --fs-base:16px; --fs-msg:17px; --fs-time:13px; --fs-author:17px; --fs-roomname:19px; }
#app[data-fontsize="xlarge"] { --fs-base:17px; --fs-msg:19px; --fs-time:14px; --fs-author:19px; --fs-roomname:21px; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
button { font: inherit; }

/* ==================== APP LAYOUT ==================== */
#app {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100vh;
  width: 100vw;
}

/* ==================== SIDEBAR ==================== */
#sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-logo {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--accent), var(--dj));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff; font-weight: 700;
}
.brand-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3px;
}

.section {
  padding: 14px 10px 6px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.section.flex-grow { flex: 1; overflow: hidden; }
.section-title {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .8px;
  color: var(--muted);
  padding: 0 8px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-title .count {
  background: var(--border);
  color: var(--fg-dim);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
}

.room-list, .user-list {
  list-style: none;
  margin: 0; padding: 0;
  overflow-y: auto;
}
.user-list { flex: 1; }

.room-list li {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-dim);
  transition: background .1s;
  font-size: 13px;
}
.room-list li:hover { background: var(--panel-2); color: var(--fg); }
.room-list li.active {
  background: rgba(92, 176, 255, .12);
  color: var(--accent);
  font-weight: 600;
}
.room-list li::before { content: "#"; color: var(--muted); }
.room-list li.has-password::before { content: "🔒"; }

.user-list li {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
}
.user-list li:hover { background: var(--panel-2); }

.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  position: relative;
}
.user-avatar::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--muted);
  border: 2px solid var(--panel);
}
.user-avatar.status-online::after  { background: var(--ok); }
.user-avatar.status-afk::after     { background: var(--warn); }
.user-avatar.status-away::after    { background: var(--muted); }
.user-avatar.status-dnd::after     { background: var(--err); }
.user-avatar.status-live_dj::after {
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(255,59,92,.7);
  animation: pulseLive 1.5s infinite;
}
@keyframes pulseLive {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,92,.7); }
  70%  { box-shadow: 0 0 0 6px rgba(255,59,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,92,0); }
}

.user-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-badge {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.user-badge.live     { background: var(--live);  color: #fff; animation: pulseBadge 1.8s infinite; }
.user-badge.dj       { background: var(--dj);    color: #fff; }
.user-badge.admin    { background: var(--admin); color: #fff; }
.user-badge.mod      { background: var(--mod);   color: #fff; }
.user-badge.vip      { background: var(--vip);   color: #000; }
@keyframes pulseBadge {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ME (unten in Sidebar) */
.me {
  padding: 12px 14px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-2);
}
.me-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
}
.me-info { flex: 1; min-width: 0; }
.me-name {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-role {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.me-role.role-superadmin, .me-role.role-admin { color: var(--admin); }
.me-role.role-mod { color: var(--mod); }
.me-role.role-dj  { color: var(--dj); }
.me-role.role-vip { color: var(--vip); }

.me-admin {
  color: var(--muted);
  font-size: 18px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.me-admin:hover { color: var(--accent); background: rgba(92,176,255,.12); }
.me-logout {
  color: var(--muted);
  font-size: 18px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.me-logout:hover { color: var(--err); background: rgba(255,107,107,.1); }

/* ==================== MAIN CHAT AREA ==================== */
#main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

#chat-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.header-main { flex: 1; min-width: 160px; }

/* Radio-Info (Now-Playing, Schedule, Listeners) */
.radio-info {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(255,59,92,.08), rgba(199,125,255,.08));
  border: 1px solid rgba(255,59,92,.25);
  border-radius: var(--radius-sm);
  font-size: 12px;
  flex: 1 0 100%;
  order: 3;
  margin-top: 8px;
}
.radio-part { display: flex; align-items: center; gap: 6px; }
.radio-label { color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-size: 10px; font-weight: 700; }
.radio-dj    { font-weight: 700; }
.radio-show  { color: var(--fg); }
.radio-current .radio-label { color: var(--live); }
.radio-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--live);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,59,92,.7);
  animation: pulseLive 1.5s infinite;
}
.radio-next { color: var(--fg-dim); }
.radio-np   { color: var(--accent); }
.radio-listeners { color: var(--fg-dim); }
.room-name { font-size: var(--fs-roomname); font-weight: 700; }
.room-name::before { content: "# "; color: var(--muted); font-weight: 400; }
.room-topic { font-size: 12px; color: var(--muted); margin-top: 2px; }
.header-actions { display: flex; gap: 6px; }

.icon-btn {
  min-width: 36px; height: 36px;
  padding: 0 8px;
  background: transparent;
  color: var(--fg-dim);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background .1s;
}
.icon-btn:hover { background: var(--panel-2); color: var(--fg); }

/* Action-Buttons im Header (DJ-Panel, Wunsch) — mit Label, groesser */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all .15s;
  white-space: nowrap;
}
.action-btn:hover {
  background: var(--accent);
  color: #0a0e13;
  border-color: var(--accent);
  transform: translateY(-1px);
}
.action-btn-icon { font-size: 15px; line-height: 1; }
.action-btn-label { font-size: 13px; }
#btn-dj-panel {
  background: linear-gradient(135deg, rgba(255,59,92,.12), rgba(199,125,255,.12));
  border-color: rgba(255,59,92,.4);
  color: var(--live);
}
#btn-dj-panel:hover {
  background: var(--live);
  color: #fff;
  border-color: var(--live);
}
#btn-wish {
  background: linear-gradient(135deg, rgba(255,209,102,.10), rgba(255,180,84,.10));
  border-color: rgba(255,209,102,.4);
  color: var(--vip);
}
#btn-wish:hover {
  background: var(--vip);
  color: #000;
  border-color: var(--vip);
}

/* Tool-Buttons im Send-Form (Smiley, A-, A+) */
.send-tools {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.tool-btn {
  width: 40px; height: 40px;
  background: var(--panel-2);
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: all .1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tool-btn:hover {
  background: var(--accent);
  color: #0a0e13;
  border-color: var(--accent);
  transform: scale(1.05);
}
#btn-smiley { font-size: 18px; }
#btn-font-up, #btn-font-down {
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: -.5px;
}

/* ==================== MESSAGES ==================== */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 10px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
.chat-messages::-webkit-scrollbar-thumb:hover { background: var(--border-soft); }

.msg {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: var(--fs-msg);
  line-height: 1.55;
  word-wrap: break-word;
}
.msg-time {
  color: var(--muted);
  font-size: var(--fs-time);
  font-family: var(--mono);
  min-width: 56px;
  padding-top: 3px;
  user-select: none;
}
.msg-author {
  font-weight: 600;
  flex-shrink: 0;
}
.msg-body {
  flex: 1;
  word-break: break-word;
}
.msg-body .msg-author { margin-right: 6px; }
.msg-body .msg-author::after { content: ":"; color: var(--muted); font-weight: 400; }

/* Action (/me) + Dice + Coin — gleiche Darstellung */
.msg.action .msg-body,
.msg.dice   .msg-body,
.msg.coin   .msg-body { color: var(--fg-dim); font-style: italic; }

.msg.action .msg-body .msg-author::after,
.msg.dice   .msg-body .msg-author::after,
.msg.coin   .msg-body .msg-author::after { content: ""; }

.msg.action .msg-body::before { content: "* ";  color: var(--muted); }
.msg.dice   .msg-body::before { content: "🎲 "; }
.msg.coin   .msg-body::before { content: "🪙 "; }

/* Whisper */
.msg.whisper { background: rgba(199, 125, 255, .06); border-left: 3px solid var(--dj); padding-left: 12px; margin-left: -12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.msg.whisper .msg-body::before { content: "🔒 "; }

/* System */
.msg.system .msg-body {
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
}
.msg.system .msg-body::before { content: "— "; }

/* Wish — hervorgehobene Wunsch-Nachricht, NUR der DJ sieht das */
.msg.wish {
  background: linear-gradient(90deg, rgba(255,209,102,.10), transparent);
  border-left: 3px solid var(--vip);
  padding: 8px 12px;
  margin: 4px -12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.msg.wish .msg-body {
  color: var(--fg);
  font-size: var(--fs-msg);
  font-style: normal;
}
.msg.wish .msg-body::before { content: "💌 "; font-style: normal; }

/* Welcome Box (optionale Raum-Begruessung, nur beim Betreten) */
.welcome-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(92,176,255,.10), rgba(199,125,255,.08));
  border: 1px solid rgba(92,176,255,.3);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 6px 0 18px;
  animation: welcomeFadeIn .3s ease-out;
}
@keyframes welcomeFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.welcome-box-icon {
  font-size: 30px;
  flex-shrink: 0;
  line-height: 1;
}
.welcome-box-content {
  flex: 1;
  font-size: var(--fs-msg);
  line-height: 1.6;
  color: var(--fg);
}
.welcome-box-content strong { color: var(--accent); }
.welcome-box-content em     { color: var(--fg-dim); }
.welcome-box-content .smiley { max-height: 48px; vertical-align: middle; }
.welcome-box-content a { color: var(--accent); }

/* Typing Indicator */
.typing-indicator {
  height: 20px;
  padding: 0 20px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* ==================== SEND FORM ==================== */
.send-form {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
  align-items: center;
}
#send-input {
  flex: 1;
  padding: 12px 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 22px;
  outline: none;
  font-size: var(--fs-msg);
  transition: border-color .1s;
}
#send-input:focus { border-color: var(--accent); }
.send-btn {
  padding: 12px 20px;
  background: var(--accent);
  color: #0a0e13;
  border: none;
  border-radius: 22px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s, background .1s;
}
.send-btn:hover { background: var(--accent-2); }
.send-btn:active { transform: scale(.97); }

/* ==================== AUTH PAGE ==================== */
body.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at top, #161d2a, var(--bg));
  padding: 20px;
}
.auth-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow);
  text-align: center;
}
.auth-logo {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--accent), var(--dj));
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff; font-weight: 700;
}
.auth-card h1 { margin: 0; font-size: 22px; letter-spacing: .3px; }
.auth-sub { color: var(--muted); font-size: 13px; margin-bottom: 24px; }
.auth-form { text-align: left; }
.auth-form label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin: 14px 0 4px;
}
.auth-form input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
}
.auth-form input:focus { border-color: var(--accent); }
.auth-btn {
  width: 100%;
  padding: 12px;
  margin-top: 20px;
  background: var(--accent);
  color: #0a0e13;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.auth-btn:hover { background: var(--accent-2); }
.auth-err {
  background: rgba(255,107,107,.1);
  border: 1px solid var(--err);
  color: var(--err);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 14px;
}
.auth-switch {
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}
.auth-tabs {
  display: flex;
  gap: 4px;
  margin: 18px 0 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: background .1s, color .1s;
}
.auth-tab:hover { color: var(--fg); }
.auth-tab.active {
  background: var(--panel-2);
  color: var(--accent);
}
.auth-hint {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(92,176,255,.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 11px;
  color: var(--fg-dim);
  line-height: 1.5;
}

/* Guest-Badge in User-Liste */
.user-badge.guest {
  background: var(--muted);
  color: var(--panel);
}

/* ==================== PHASE 2: BBCODE + INLINE ==================== */
.msg-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
}
.msg-body a:hover { color: var(--accent-2); border-bottom-style: solid; }

.msg-body .bb-s { text-decoration: line-through; opacity: .7; }
.msg-body .bb-code {
  font-family: var(--mono);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid var(--border);
}
.msg-body .bb-quote {
  margin: 4px 0;
  padding: 6px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(92,176,255,.06);
  color: var(--fg-dim);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.msg-body .smiley {
  vertical-align: middle;
  max-height: 64px;
  margin: 0 2px;
}

.clickable-nick { cursor: pointer; transition: opacity .1s; }
.clickable-nick:hover { opacity: .7; text-decoration: underline; }

.whisper-prefix {
  color: var(--dj);
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
}

.notice-fade {
  animation: fadeNotice 5s forwards;
  opacity: .9;
  background: rgba(255,180,84,.05);
  border-left: 2px solid var(--warn);
  padding-left: 10px !important;
}
@keyframes fadeNotice {
  0% { opacity: 0; transform: translateY(-4px); }
  10% { opacity: .9; transform: translateY(0); }
  80% { opacity: .9; }
  100% { opacity: 0; }
}

/* ==================== POPUPS ==================== */
.popup {
  position: fixed;
  z-index: 200;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--fg);
  animation: popIn .15s ease-out;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.user-popup { min-width: 240px; padding: 14px; }
.popup-header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.popup-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 18px;
}
.popup-name { font-weight: 700; font-size: 15px; }
.popup-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.popup-role.role-superadmin, .popup-role.role-admin { color: var(--admin); }
.popup-role.role-mod { color: var(--mod); }
.popup-role.role-dj  { color: var(--dj); }
.popup-role.role-vip { color: var(--vip); }

.popup-dj {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: rgba(255,59,92,.08);
  border: 1px solid var(--live);
  border-radius: var(--radius-sm);
}
.popup-dj-live { color: var(--live); font-weight: 700; font-size: 12px; }
.popup-dj-np { color: var(--fg-dim); font-size: 11px; margin-top: 2px; }

.popup-bio {
  font-size: 12px;
  color: var(--fg-dim);
  margin-bottom: 10px;
  line-height: 1.5;
}
.popup-actions {
  display: flex;
  gap: 6px;
}
.popup-actions button {
  flex: 1;
  padding: 7px 10px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  transition: background .1s;
}
.popup-actions button:hover { background: var(--border); }

/* ==================== SENDEPLAN POPUP ==================== */
.radio-schedule-btn {
  margin-left: auto;
  padding: 6px 12px;
  background: var(--panel-2);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .1s;
}
.radio-schedule-btn:hover {
  background: var(--accent);
  color: #0a0e13;
  border-color: var(--accent);
}

.schedule-popup {
  padding: 22px;
  width: 500px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.schedule-scroll {
  overflow-y: auto;
  flex: 1;
  margin: -4px -4px 0;
  padding: 4px;
}
.schedule-empty {
  padding: 40px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.schedule-day {
  margin-bottom: 18px;
}
.schedule-day-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.schedule-show {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
}
.schedule-show:hover { border-color: var(--accent); }
.schedule-time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  min-width: 90px;
  padding-top: 2px;
}
.schedule-info { flex: 1; min-width: 0; }
.schedule-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
}
.schedule-genre {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.schedule-dj {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
.schedule-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}
.schedule-recurring {
  color: var(--muted);
  font-size: 14px;
  padding-top: 4px;
  user-select: none;
}

/* ==================== WISH/DJ POPUP ==================== */
.wish-popup, .dj-panel-popup {
  padding: 24px;
  width: 360px;
  max-width: 90vw;
}
.wish-popup .popup-title,
.dj-panel-popup .popup-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.popup-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 12px 0 4px;
  font-weight: 600;
}
.wish-popup input[type="text"],
.wish-popup textarea,
.dj-panel-popup input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
}
.wish-popup input:focus,
.wish-popup textarea:focus,
.dj-panel-popup input:focus { border-color: var(--accent); }
.wish-popup .popup-actions,
.dj-panel-popup .popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.wish-popup .popup-actions button,
.dj-panel-popup .popup-actions button {
  flex: 1;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.wish-popup .popup-actions button.primary,
.dj-panel-popup .popup-actions button.primary {
  background: var(--accent);
  color: #0a0e13;
  border-color: var(--accent);
}
.wish-popup .popup-actions button:hover,
.dj-panel-popup .popup-actions button:hover {
  background: var(--border);
}
.wish-popup .popup-actions button.primary:hover,
.dj-panel-popup .popup-actions button.primary:hover {
  background: var(--accent-2);
}

/* ==================== SMILEY PICKER ==================== */
.smiley-picker {
  width: 320px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
}
.smiley-empty {
  padding: 30px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.smiley-cat-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin: 6px 4px 4px;
}
.smiley-cat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 4px;
  margin-bottom: 8px;
}
.smiley-pick {
  width: 40px; height: 40px;
  object-fit: contain;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 4px;
  transition: background .1s, transform .1s;
}
.smiley-pick:hover {
  background: var(--border);
  transform: scale(1.15);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  #app { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform .2s;
    z-index: 100;
    box-shadow: var(--shadow);
  }
  #sidebar.open { transform: translateX(0); }
}