:root {
  --bg-deep: #123832;
  --bg-panel: #17423a;
  --bg-tile: #0e2e29;
  --chalk: #f2f0e6;
  --chalk-dim: #b9c9c2;
  --accent: #e8c468;
  --accent-dim: #7c6b3c;
  --danger: #e4795a;
  --line: rgba(242, 240, 230, 0.14);
  --radius: 14px;
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg-deep);
  color: var(--chalk);
  font-family: "Vazirmatn", "Tahoma", system-ui, -apple-system, sans-serif;
  overscroll-behavior: none;
}

body {
  background-image:
    radial-gradient(circle at 10% 15%, rgba(242,240,230,0.035) 0, transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(242,240,230,0.03) 0, transparent 45%);
}

.screen { min-height: 100dvh; display: flex; }
.screen[hidden] { display: none; }

/* --- صفحه ورود --- */
.join-screen {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.join-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  font-size: 26px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(232,196,104,0.4));
}
.brand h1 { font-size: 22px; margin: 0; letter-spacing: 0.3px; }

.tagline {
  color: var(--chalk-dim);
  font-size: 13.5px;
  margin: 8px 0 24px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 16px;
}

#joinForm label {
  display: block;
  font-size: 13px;
  color: var(--chalk-dim);
  margin-bottom: 14px;
}

#joinForm input {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--chalk);
  font-size: 15px;
  font-family: inherit;
}
#joinForm input:focus {
  outline: none;
  border-color: var(--accent);
}

.hint { font-size: 12px; color: var(--chalk-dim); opacity: 0.8; margin: 4px 0 18px; line-height: 1.7; }

#joinBtn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #24200f;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}
#joinBtn:disabled { opacity: 0.6; cursor: default; }
#joinBtn:hover:not(:disabled) { filter: brightness(1.05); }

.join-error {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(228,121,90,0.15);
  border: 1px solid var(--danger);
  border-radius: 8px;
  color: #f5c8ba;
  font-size: 13px;
}

.teacher-toggle { margin: 4px 0 16px; font-size: 13px; color: var(--chalk-dim); }
.teacher-toggle summary { cursor: pointer; padding: 4px 0; }
.teacher-toggle label { margin-top: 10px; }

.net-tips { margin-top: 20px; font-size: 13px; color: var(--chalk-dim); }
.net-tips summary { cursor: pointer; }
.net-tips ul { margin: 10px 0 0; padding-inline-start: 18px; line-height: 1.9; }

/* --- صفحه‌ی کلاس --- */
.room-screen { flex-direction: column; height: 100dvh; }

.room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.room-title { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.status { font-size: 12px; padding: 3px 9px; border-radius: 20px; }
.status-connecting { background: rgba(232,196,104,0.18); color: var(--accent); }
.status-connected { background: rgba(122,196,150,0.18); color: #8fd4a8; }
.status-poor { background: rgba(228,121,90,0.18); color: var(--danger); }
.room-count { font-size: 13px; color: var(--chalk-dim); }

.stage {
  flex: 1;
  display: grid;
  gap: 10px;
  padding: 12px;
  overflow-y: auto;
  align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.tile {
  position: relative;
  background: var(--bg-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile.speaking { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232,196,104,0.35); }
.tile video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(1);
}
.tile.mirrored video { transform: scaleX(-1); }
.tile .avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent-dim); color: var(--chalk);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
}
.tile .label {
  position: absolute; bottom: 8px; right: 10px;
  background: rgba(14,46,41,0.72);
  padding: 3px 9px; border-radius: 20px; font-size: 12px;
  display: flex; align-items: center; gap: 5px;
}
.tile .host-badge { color: var(--accent); }
.tile .mic-off { color: var(--danger); }
.tile .hand-flag {
  position: absolute; top: 8px; left: 10px; font-size: 18px;
}
.tile .kick-btn {
  position: absolute; top: 8px; right: 8px;
  background: rgba(228,121,90,0.85); color: #fff;
  border: none; border-radius: 6px; font-size: 11px;
  padding: 3px 7px; cursor: pointer; display: none;
}
.tile:hover .kick-btn { display: block; }

.side-panel {
  position: fixed; inset-inline-end: 0; top: 0; bottom: 0;
  width: min(320px, 88vw);
  background: var(--bg-panel);
  border-inline-start: 1px solid var(--line);
  display: flex; flex-direction: column;
  z-index: 20;
}
.side-tabs { display: flex; border-bottom: 1px solid var(--line); }
.side-tab {
  flex: 1; background: none; border: none; color: var(--chalk-dim);
  padding: 12px; font-family: inherit; font-size: 13px; cursor: pointer;
}
.side-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); }
.side-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.side-content[hidden] { display: none; }

.chat-messages { flex: 1; overflow-y: auto; padding: 12px; font-size: 13.5px; }
.chat-msg { margin-bottom: 12px; line-height: 1.6; }
.chat-msg .who { color: var(--accent); font-weight: 700; font-size: 12px; }
.chat-msg .txt { color: var(--chalk); word-break: break-word; }
.chat-msg.system { color: var(--chalk-dim); font-size: 12px; text-align: center; }

.chat-form { display: flex; border-top: 1px solid var(--line); padding: 8px; gap: 6px; }
.chat-form input {
  flex: 1; background: var(--bg-deep); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 12px; color: var(--chalk); font-family: inherit; font-size: 13.5px;
}
.chat-form button {
  background: var(--accent); border: none; border-radius: 8px;
  padding: 0 14px; font-family: inherit; font-weight: 700; color: #24200f; cursor: pointer;
}

.people-list { list-style: none; margin: 0; padding: 10px; overflow-y: auto; }
.people-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 6px; font-size: 13.5px; border-bottom: 1px solid var(--line);
}
.people-list .p-name { display: flex; align-items: center; gap: 6px; }
.people-list button {
  background: none; border: 1px solid var(--line); color: var(--chalk-dim);
  border-radius: 6px; padding: 3px 8px; font-size: 11px; cursor: pointer; font-family: inherit;
}

.attendance-list { list-style: none; margin: 0; padding: 10px; overflow-y: auto; font-size: 13px; }
.attendance-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 6px; border-bottom: 1px solid var(--line);
}
.attendance-list .a-name { color: var(--chalk); }
.attendance-list .a-event { font-size: 11px; padding: 2px 8px; border-radius: 20px; }
.attendance-list .a-event.join { background: rgba(122,196,150,0.18); color: #8fd4a8; }
.attendance-list .a-event.leave { background: rgba(228,121,90,0.18); color: var(--danger); }
.attendance-list .a-time { color: var(--chalk-dim); font-size: 11px; }

.whiteboard-panel {
  position: fixed; inset: 0; z-index: 30;
  background: var(--bg-tile);
  display: flex; flex-direction: column;
}
.whiteboard-panel[hidden] { display: none; }
.whiteboard-toolbar {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--bg-panel); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.wb-tool, .wb-clear, .wb-close {
  background: var(--bg-deep); border: 1px solid var(--line); color: var(--chalk);
  border-radius: 8px; padding: 8px 12px; font-size: 15px; cursor: pointer; font-family: inherit;
}
.wb-tool.active { background: var(--accent); color: #24200f; border-color: var(--accent); }
.wb-clear { font-size: 12px; color: var(--danger); border-color: var(--danger); }
.wb-close { margin-inline-start: auto; color: var(--danger); }
.whiteboard-toolbar select, .whiteboard-toolbar input[type="color"] {
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: 8px;
  color: var(--chalk); padding: 6px; font-family: inherit; font-size: 13px;
}
#whiteboardCanvas { flex: 1; touch-action: none; cursor: crosshair; background: var(--bg-tile); }

.controls {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 10px;
  border-top: 1px solid var(--line);
  background: var(--bg-panel);
}
.ctrl {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  color: var(--chalk);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ctrl.on { background: var(--accent); color: #24200f; border-color: var(--accent); }
.ctrl.active-warn { background: var(--danger); color: #fff; border-color: var(--danger); }
.ctrl.leave { background: var(--danger); color: #fff; border-color: var(--danger); }

.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: var(--bg-panel); border: 1px solid var(--line);
  padding: 10px 18px; border-radius: 20px; font-size: 13px;
  z-index: 50;
}
.toast[hidden] { display: none; }

@media (max-width: 560px) {
  .stage { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 8px; gap: 8px; }
  .join-card { padding: 26px 20px; }
}