/* ---------------------------------------------------------------------
   Shared design system for Hatespeech-Simulation (student + admin views)
--------------------------------------------------------------------- */

:root {
  --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom scrollbars ------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Page background used on join / setup / ended screens -------------- */
.app-gradient-bg {
  background:
    radial-gradient(circle at 12% 15%, rgba(99, 102, 241, .10) 0%, transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(124, 58, 237, .10) 0%, transparent 42%),
    #f1f5f9;
}

/* Brand mark (logo bubble) ------------------------------------------- */
.brand-mark {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1.1rem;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(79, 70, 229, .55);
}

/* Avatars (chat + kanban) -------------------------------------------- */
.avatar {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .78rem;
  color: #fff;
  letter-spacing: .01em;
}

/* Sidebar (student game screen) -------------------------------------- */
.sidebar-panel {
  background: linear-gradient(190deg, #0f172a 0%, #1e1b4b 130%);
}

/* Chat message rows & bubbles ---------------------------------------- */
.msg-row { display: flex; }
.msg-row.them { justify-content: flex-start; gap: .5rem; }
.msg-row.me { justify-content: flex-end; }
.msg-row + .msg-row { margin-top: .6rem; }
.msg-row.grouped { margin-top: .15rem; }
.msg-row.them .avatar-slot { width: 2.25rem; flex-shrink: 0; }
.msg-row.them.grouped .avatar-slot .avatar { visibility: hidden; }

.bubble {
  max-width: 74%;
  padding: .55rem .95rem;
  border-radius: 1.15rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .07);
  animation: bubble-in .16s ease-out;
  word-wrap: break-word;
}
.bubble.me {
  background: var(--gradient-primary);
  color: #fff;
  border-bottom-right-radius: .35rem;
}
.bubble.them {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  border-bottom-left-radius: .35rem;
}
.bubble .meta {
  font-size: .68rem;
  font-weight: 600;
  opacity: .65;
  margin-bottom: .2rem;
  display: flex;
  gap: .4rem;
  align-items: center;
  flex-wrap: wrap;
}
.bubble .role-chip {
  font-size: .6rem;
  padding: .05rem .42rem;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ausgangssituation banner (top of student chat log) ------------------ */
.situation-banner {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
  border-radius: 1rem;
  padding: .85rem 1.1rem;
  margin-bottom: .9rem;
  font-size: .85rem;
  line-height: 1.45;
}
.situation-banner-label {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
  margin-bottom: .3rem;
}

/* Template suggestion chips (student sidebar) ------------------------ */
.chip-btn {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  transition: background .12s ease, transform .12s ease;
}
.chip-btn:hover { background: rgba(255, 255, 255, .13); }
.chip-btn:active { transform: scale(.98); }

/* Admin-code keypad (student start screen) ---------------------------- */
.keypad-btn {
  height: 3.75rem;
  border-radius: 1rem;
  background: #f1f5f9;
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
  transition: background .12s ease, transform .1s ease;
}
.keypad-btn:hover { background: #e2e8f0; }
.keypad-btn:active { transform: scale(.94); background: #cbd5e1; }

.admin-code-dot-filled { background: #4f46e5; border-color: #4f46e5; }

@keyframes code-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.code-shake { animation: code-shake .35s ease; }

/* Kanban table cards (admin) ------------------------------------------ */
.table-card.selected { outline: 3px solid #6366f1; transform: scale(1.03); }
.table-card:active { transform: scale(0.97); }
.drop-target.drag-over { outline: 3px dashed #6366f1; background-color: rgba(99, 102, 241, 0.08); }
.drag-ghost { transform: scale(1.05); box-shadow: 0 16px 34px rgba(0, 0, 0, .28); opacity: .92; }