* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  background: #0b1220;
  color: #e8eefc;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 18px; }
.top {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 16px; border: 1px solid #22304f; border-radius: 14px;
  background: #0f1a33;
}
h1 { margin: 0; font-size: 22px; }
.sub { margin: 6px 0 0; color: #a9b8e8; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }
button {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #2a3a63;
  background: #162449;
  color: #e8eefc;
  cursor: pointer;
}
button:disabled { opacity: .55; cursor: not-allowed; }
button.danger { background: #3b1230; border-color: #6a2a54; }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

.card {
  border: 1px solid #22304f;
  border-radius: 14px;
  background: #0f1a33;
  padding: 14px;
  min-height: 420px;
}
.card h2 { margin: 0 0 10px; font-size: 16px; color: #bcd0ff; }

video {
  width: 100%;
  height: 320px;
  background: #000;
  border-radius: 12px;
  border: 1px solid #1f2c4a;
  object-fit: cover;
}

.row { display: flex; gap: 10px; margin-top: 10px; }
.hint { margin-top: 10px; color: #a9b8e8; font-size: 13px; }

.foot { margin-top: 12px; color: #96a7d8; font-size: 12px; }


/* ✅ Chat UI */
.chatBox{
  margin-top: 12px;
  border: 1px solid #22304f;
  border-radius: 14px;
  background: #0b1430;
  overflow: hidden;
}

.chatHeader{
  padding: 10px 12px;
  font-size: 13px;
  color: #bcd0ff;
  border-bottom: 1px solid #22304f;
  background: #0f1a33;
}

.chatMessages{
  height: 160px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg{
  max-width: 80%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #1f2c4a;
  background: #0f1a33;
  font-size: 13px;
  line-height: 1.3;
  word-wrap: break-word;
}

.msg.me{
  margin-left: auto;
  background: #162449;
  border-color: #2a3a63;
}

.msg.them{
  margin-right: auto;
  background: #0f1a33;
}

.chatForm{
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #22304f;
  background: #0f1a33;
}

.chatForm input{
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #2a3a63;
  background: #0b1430;
  color: #e8eefc;
  outline: none;
}

.chatForm button{
  padding: 10px 14px;
  border-radius: 12px;
}