/*
 * SevastanChat widget styles (track T6, v1).
 * Visual language follows the game's dark glass-and-brass panels
 * (see staging/game-v4-globe/assets/game-additions.css).
 * All selectors are prefixed with .sev-chat to avoid collisions.
 */

.sev-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 320px;
  max-width: 100%;
  height: 420px;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(3, 12, 18, .84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(238, 213, 151, .24);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  color: #f3e4b5;
  font: 13px/1.45 "Segoe UI", system-ui, sans-serif;
}

.sev-chat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(238, 213, 151, .12);
}

.sev-chat-room {
  flex: 1;
  font-weight: 600;
  letter-spacing: .04em;
  color: #f0d77e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sev-chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(238, 213, 151, .3);
  transition: background .3s;
}

.sev-chat-dot[data-state="online"] {
  background: #9dd68a;
  box-shadow: 0 0 6px rgba(157, 214, 138, .6);
}

.sev-chat-dot[data-state="reconnecting"] {
  background: #ff9488;
}

.sev-chat-status {
  font-size: 11px;
  color: rgba(238, 213, 151, .6);
}

.sev-chat-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(238, 213, 151, .3) transparent;
}

.sev-chat-empty {
  margin: auto;
  font-size: 12px;
  color: rgba(238, 213, 151, .45);
  text-align: center;
}

.sev-chat-msg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(238, 213, 151, .05);
}

.sev-chat-msg-own {
  background: rgba(238, 213, 151, .12);
  border-left: 2px solid rgba(245, 211, 127, .6);
}

.sev-chat-time {
  font-size: 10px;
  color: rgba(238, 213, 151, .45);
  align-self: center;
}

.sev-chat-author {
  font-weight: 600;
  font-size: 12px;
  color: #ecd699;
  overflow-wrap: anywhere;
}

.sev-chat-text {
  flex-basis: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgba(243, 228, 181, .92);
}

.sev-chat-error {
  font-size: 11px;
  color: #ff9488;
  padding: 2px 4px;
}

.sev-chat-form {
  display: flex;
  gap: 6px;
}

.sev-chat-name {
  width: 96px;
  flex: none;
}

.sev-chat-input {
  flex: 1;
  min-width: 0;
}

.sev-chat-name,
.sev-chat-input {
  padding: 7px 9px;
  background: rgba(3, 12, 18, .76);
  border: 1px solid rgba(238, 213, 151, .24);
  border-radius: 6px;
  color: #f3e4b5;
  font: inherit;
  outline: none;
}

.sev-chat-name:focus,
.sev-chat-input:focus {
  border-color: rgba(245, 211, 127, .55);
}

.sev-chat-name::placeholder,
.sev-chat-input::placeholder {
  color: rgba(238, 213, 151, .35);
}

.sev-chat-send {
  flex: none;
  padding: 7px 14px;
  background: rgba(238, 213, 151, .12);
  border: 1px solid rgba(245, 211, 127, .55);
  border-radius: 6px;
  color: #f0d77e;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.sev-chat-send:hover:not(:disabled) {
  background: rgba(238, 213, 151, .22);
}

.sev-chat-send:disabled {
  opacity: .5;
  cursor: default;
}