/* ==========================================================
   Emote-Wand-Modul
   Konfigurationsseite im selben Karten-/Akkordeon-Look wie das
   Alerts- und Chatbox-Modul (siehe style/alerts.css, style/chat.css) -
   eigenstaendiges, auf #emoteWallPage skopiertes Stylesheet (ew-*
   Klassenpraefix), damit alle drei Module unabhaengig voneinander bleiben.

   Vorgabe: Border-Radius in diesem Modul ist ueberall maximal 3px, analog
   zur Vorgabe in Alerts/Chatbox - siehe Abschnitt "Radius-Cap" unten.
   ========================================================== */

#emoteWallPage { display: flex; flex-direction: column; gap: 18px; }

/* Login-Hinweis kommt jetzt aus dem globalen .login-notice (boxen.css). */

/* ---------- OBS-Link-Zeile ---------- */
#emoteWallPage .ew-topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 3px; padding: 12px 16px;
}
#emoteWallPage .ew-topbar label {
  color: var(--text-faint); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; flex-shrink: 0;
}
#emoteWallPage .ew-topbar .url-box { flex: 1; min-width: 220px; }

/* ---------- Layout ---------- */
#emoteWallPage .ew-layout { display: flex; gap: 20px; align-items: flex-start; }
#emoteWallPage .ew-panel { flex: 1.3; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
#emoteWallPage .ew-side { flex: 1; min-width: 0; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Karten ----------
   Basis + Kopf kommen vom globalen .card / .card-header (boxen.css). */
#emoteWallPage .ew-cardbody { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Grids & Felder ---------- */
#emoteWallPage .ew-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

#emoteWallPage .ew-rangerow { display: flex; flex-direction: column; gap: 6px; }
#emoteWallPage .ew-rangetop { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
#emoteWallPage .ew-rangetop .ew-val { color: var(--text-primary); font-weight: 700; text-transform: none; letter-spacing: 0; }
/* input[type="range"] -> globales input[type="range"] (formulare.css). */

/* .ew-colorrow -> globales .color-row; .ew-switch/-slider/-switchitem ->
   globales .switch/.switch-slider/.switch-item (formulare.css). */

/* ---------- Outline-Einstellungen (Akkordeon) ---------- */
#emoteWallPage .ew-accordion { border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
#emoteWallPage .ew-acchead {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; cursor: pointer;
  background: var(--bg-raised); user-select: none;
}
#emoteWallPage .ew-acchead .ew-at { font-size: 13.5px; font-weight: 700; color: var(--text-secondary); }
#emoteWallPage .ew-acchead .ew-chev { transition: transform .18s; color: var(--text-faint); font-size: 11px; }
#emoteWallPage .ew-accordion.open .ew-chev { transform: rotate(180deg); }
#emoteWallPage .ew-accbody { padding: 0 13px; max-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; transition: max-height .18s ease, padding .18s ease; }
#emoteWallPage .ew-accordion.open .ew-accbody { padding: 14px 13px; max-height: 200px; }

/* ---------- Vorschau-Spalte ---------- */
#emoteWallPage .ew-side h3 { margin: 0; }
#emoteWallPage .ew-stage {
  position: relative;
  flex: 1;
  min-height: 220px;
  background: #c8c8c8;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
#emoteWallPage .ew-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
#emoteWallPage .ew-status { font-size: 13px; color: var(--mono-text); font-weight: 600; }
/* .ew-obshint -> globales .hint-box (boxen.css). */

.ewFlyingItem {
  position: absolute;
  pointer-events: none;
}
.ew-anim-rise {
  bottom: -40px;
  animation-name: ewRise;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes ewRise {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-260px) translateX(var(--drift)) rotate(var(--rot)); opacity: 0; }
}
.ew-anim-floating {
  bottom: -40px;
  animation-name: ewFloating;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes ewFloating {
  0%   { transform: translateY(0) translateX(0); opacity: 1; }
  25%  { transform: translateY(-70px) translateX(20px); }
  50%  { transform: translateY(-140px) translateX(-20px); }
  75%  { transform: translateY(-210px) translateX(20px); }
  100% { transform: translateY(-260px) translateX(0); opacity: 0; }
}

/* ---------- Radius-Cap: max. 3px, auch fuer global geerbte Formularelemente ---------- */
#emoteWallPage select,
#emoteWallPage input[type="text"],
#emoteWallPage input[type="number"],
#emoteWallPage input[type="color"],
#emoteWallPage textarea,
#emoteWallPage .url-box,
#emoteWallPage .back-btn,
#emoteWallPage button {
  border-radius: 3px;
}

/* .btn-primary/.btn-ghost -> globale .btn/.btn-secondary (buttons.css). */

@media (max-width: 980px) {
  #emoteWallPage .ew-layout { flex-direction: column; }
  #emoteWallPage .ew-side { position: static; width: 100%; }
  #emoteWallPage .ew-grid2 { grid-template-columns: 1fr; }
}