.sg-chat {
  --sg-chat-accent: var(--guide-accent, var(--game-start, var(--gold, #c4a35a)));
  --sg-chat-accent-2: var(--guide-accent-l, var(--game-end, var(--gold-d, #8a7340)));
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 66px);
  z-index: 9980;
  font-family: var(--ff, 'Cinzel', serif);
}
.sg-chat,
.sg-chat * {
  font-family: var(--ff, 'Cinzel', serif);
}
.sg-chat__fab {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--sg-chat-accent) 58%, transparent);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--sg-chat-accent), var(--sg-chat-accent-2));
  color: #080808;
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
  cursor: pointer;
  transition: transform .2s, filter .2s;
}
.sg-chat__fab:hover { transform: translateY(-2px); filter: brightness(1.08); }
.sg-chat__badge {
  position: absolute;
  top: -4px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f44336;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.sg-chat__panel {
  position: absolute;
  left: 0;
  bottom: 72px;
  width: min(370px, calc(100vw - 28px));
  height: min(560px, calc(100vh - 116px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sg-chat-accent) 24%, transparent);
  border-radius: 14px;
  background: rgba(12,11,16,.96);
  box-shadow: 0 24px 60px rgba(0,0,0,.58);
  backdrop-filter: blur(18px);
}
.sg-chat__panel[hidden] {
  display: none !important;
}
.sg-chat__head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sg-chat__head strong {
  display: block;
  color: var(--text-l, #eee);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sg-chat__head span {
  display: block;
  margin-top: 3px;
  color: var(--text, #999);
  font-size: 12px;
}
.sg-chat__close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: var(--text-l, #eee);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.sg-chat__body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}
.sg-chat__empty,
.sg-chat__loading {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: var(--text, #999);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}
.sg-chat__msg {
  max-width: 86%;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: var(--text-l, #eee);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sg-chat__msg.mine {
  margin-left: auto;
  background: rgba(196,163,90,.18);
  border: 1px solid rgba(196,163,90,.18);
}
.sg-chat__msg.admin {
  background: rgba(80,130,210,.15);
  border: 1px solid rgba(80,130,210,.18);
}
.sg-chat__thread {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: var(--text-l, #eee);
  text-align: left;
  cursor: pointer;
}
.sg-chat__thread:hover,
.sg-chat__thread.active {
  border-color: color-mix(in srgb, var(--sg-chat-accent) 32%, transparent);
  background: color-mix(in srgb, var(--sg-chat-accent) 10%, transparent);
}
.sg-chat__thread-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
}
.sg-chat__thread-name b {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f44336;
  color: #fff;
  font-size: 11px;
}
.sg-chat__thread-last {
  color: var(--text, #999);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sg-chat__thread-meta {
  color: rgba(255,255,255,.4);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sg-chat__back {
  margin: 0 0 12px;
  border: 0;
  background: transparent;
  color: var(--sg-chat-accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sg-chat__time {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.46);
  font-size: 10px;
}
.sg-chat__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.sg-chat__form textarea {
  flex: 1;
  min-height: 42px;
  max-height: 110px;
  resize: none;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  color: var(--text-l, #eee);
  padding: 11px 12px;
  outline: none;
}
.sg-chat__form button,
.sg-chat__admin-link {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--sg-chat-accent);
  color: #080808;
  cursor: pointer;
}

.sg-chat__body,
.sg-chat__form textarea {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sg-chat-accent) 55%, transparent) rgba(255,255,255,.05);
}
.sg-chat__body::-webkit-scrollbar,
.sg-chat__form textarea::-webkit-scrollbar {
  width: 8px;
}
.sg-chat__body::-webkit-scrollbar-track,
.sg-chat__form textarea::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}
.sg-chat__body::-webkit-scrollbar-thumb,
.sg-chat__form textarea::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sg-chat-accent), var(--sg-chat-accent-2));
  border-radius: 999px;
}
.sg-chat__admin-link {
  width: auto;
  height: auto;
  margin: 12px;
  padding: 12px 14px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .04em;
}
@media (max-width: 520px) {
  .sg-chat { left: 14px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 72px); }
  .sg-chat__fab {
    width: 52px;
    height: 52px;
  }
  .sg-chat__panel {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 82px;
    width: auto;
    height: min(560px, calc(100vh - 104px));
  }
}