* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #101722;
  color: #f7f9fc;
}
.wrap, .chat-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.card, .chat-card {
  width: 100%;
  max-width: 720px;
  background: #172131;
  border: 1px solid #28364a;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.chat-card { max-width: 980px; min-height: 78vh; display: flex; flex-direction: column; }
.brand { color: #73b7ff; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
h1 { margin: 8px 0 8px; font-size: 32px; }
.muted { color: #aab8cb; }
label { display: block; margin: 18px 0; font-weight: bold; }
input, textarea {
  width: 100%;
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid #34455f;
  border-radius: 12px;
  background: #0f1722;
  color: #fff;
  font-size: 16px;
}
textarea { resize: vertical; }
button {
  border: 0;
  border-radius: 12px;
  background: #2f8cff;
  color: white;
  font-weight: bold;
  padding: 13px 18px;
  cursor: pointer;
  font-size: 15px;
}
button:disabled { opacity: .55; cursor: not-allowed; }
button.secondary { background: #34455f; }
.status { margin-top: 14px; min-height: 22px; color: #ffd27d; }
.chat-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 1px solid #28364a; padding-bottom: 16px; }
.reconnect { margin: 14px 0; padding: 12px; border: 1px dashed #34455f; border-radius: 12px; color: #aab8cb; word-break: break-all; }
.messages { flex: 1; overflow-y: auto; padding: 18px 0; display: flex; flex-direction: column; gap: 12px; }
.message { max-width: 78%; border-radius: 14px; padding: 12px 14px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.message .meta { display: block; font-size: 12px; color: #c4cfdd; margin-bottom: 4px; }
.web_user { align-self: flex-end; background: #2f8cff; }
.discord_agent { align-self: flex-start; background: #26354a; }
.system { align-self: center; background: #3d3320; color: #ffe3ad; max-width: 92%; }
.message-form { display: flex; gap: 10px; border-top: 1px solid #28364a; padding-top: 16px; }
.message-form input { margin: 0; }
.message-form button { min-width: 100px; }
@media (max-width: 640px) {
  .chat-header { flex-direction: column; }
  .message { max-width: 92%; }
  .message-form { flex-direction: column; }
}

.admin-wrap { max-width: 1500px; margin: 0 auto; padding: 28px; }
.admin-card { min-height: auto; }
.admin-search { display: grid; grid-template-columns: 1fr 170px 120px; gap: 10px; align-items: end; }
.admin-search input, .admin-search select { margin: 0; }
.admin-search select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #34455f;
  border-radius: 12px;
  background: #0f1722;
  color: #fff;
  font-size: 16px;
}
.admin-grid { display: grid; grid-template-columns: 420px 1fr; gap: 18px; margin-top: 18px; }
.admin-list-card, .admin-detail-card { min-height: 600px; }
.ticket-list { display: flex; flex-direction: column; gap: 10px; max-height: 72vh; overflow-y: auto; }
.ticket-row {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #141f2d;
  border: 1px solid #26364b;
  padding: 12px;
}
.ticket-row.active, .ticket-row:hover { border-color: #2f8cff; background: #19283b; }
.ticket-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.badge { border-radius: 999px; padding: 3px 8px; font-size: 12px; text-transform: uppercase; }
.badge.open { background: #164b2a; color: #96f0b0; }
.badge.closed { background: #4b1d1d; color: #ffc0c0; }
.admin-detail-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.admin-messages { max-height: 52vh; min-height: 340px; border: 1px solid #28364a; border-radius: 14px; padding: 14px; }
.event-list { display: flex; flex-direction: column; gap: 10px; max-height: 240px; overflow-y: auto; }
.event-row { border: 1px solid #28364a; border-radius: 12px; padding: 10px; background: #111a26; }
.button-link {
  display: inline-block;
  border-radius: 12px;
  background: #34455f;
  color: white;
  font-weight: bold;
  padding: 13px 18px;
  text-decoration: none;
}
@media (max-width: 980px) {
  .admin-search { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-detail-header { flex-direction: column; }
}