/* Clyr chat v2 — a calmer, clearer shell layered over user appearance themes. */
body.chat-page.chat-v2 {
  --v2-panel: color-mix(in srgb, var(--chat-bg-channels, var(--bg-mid)) 94%, var(--chat-text, var(--text)) 6%);
  --v2-panel-raised: color-mix(in srgb, var(--chat-bg-zones, var(--bg-card)) 94%, var(--chat-text, var(--text)) 6%);
  --v2-line: color-mix(in srgb, var(--border) 80%, var(--teal) 20%);
  --v2-soft: color-mix(in srgb, var(--text-muted) 86%, var(--text) 14%);
  background: var(--bg-dark);
  color: var(--text);
  overflow: hidden;
}

body.chat-page.chat-v2 .chat-layout {
  height: 100dvh;
  background: var(--bg-dark);
}

body.chat-page.chat-v2 .chat-sidebar-zones {
  flex-basis: 68px;
  padding: .75rem .45rem;
  background: color-mix(in srgb, var(--bg-dark) 94%, #000 6%);
  border-right: 1px solid var(--v2-line);
}

body.chat-page.chat-v2 .chat-sidebar-main {
  flex-basis: 248px;
  background: var(--v2-panel);
  border-right: 1px solid var(--v2-line);
}

body.chat-page.chat-v2 .logo-mini,
body.chat-page.chat-v2 .zone-pill,
body.chat-page.chat-v2 .dm-pill {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  box-shadow: none;
}

body.chat-page.chat-v2 .logo-mini {
  border: 1px solid color-mix(in srgb, var(--teal) 38%, transparent);
  background: color-mix(in srgb, var(--teal) 12%, var(--bg-card));
  color: var(--teal);
  font-weight: 800;
}

body.chat-page.chat-v2 .zone-pill,
body.chat-page.chat-v2 .dm-pill {
  border: 1px solid transparent;
  background: var(--bg-mid);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

body.chat-page.chat-v2 .zone-pill:hover,
body.chat-page.chat-v2 .dm-pill:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--teal) 28%, transparent);
  border-radius: 13px;
}

body.chat-page.chat-v2 .zone-pill-active,
body.chat-page.chat-v2 .dm-pill.dm-pill-active {
  background: var(--teal);
  border-color: var(--teal);
  color: #071014;
}

body.chat-page.chat-v2 .chat-zone-header,
body.chat-page.chat-v2 .chat-main-header {
  min-height: 58px;
  height: 58px;
  background: color-mix(in srgb, var(--v2-panel) 94%, transparent);
  border-bottom: 1px solid var(--v2-line);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

body.chat-page.chat-v2 .chat-zone-header { padding: 0 .85rem; }
body.chat-page.chat-v2 .chat-main-header { padding: 0 1.25rem; }

body.chat-page.chat-v2 .chat-zone-name {
  min-width: 0;
  font-size: .9rem;
  font-weight: 700;
}

body.chat-page.chat-v2 #zone-name,
body.chat-page.chat-v2 #channel-title,
body.chat-page.chat-v2 .chat-user-name,
body.chat-page.chat-v2 .dm-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.chat-page.chat-v2 #zone-name { max-width: 152px; }
body.chat-page.chat-v2 #channel-title { max-width: min(36vw, 420px); }

body.chat-page.chat-v2 .channel-list {
  padding: .65rem .45rem 1rem;
}

body.chat-page.chat-v2 .channel-item,
body.chat-page.chat-v2 .dm-item,
body.chat-page.chat-v2 .dm-friends-request {
  min-height: 36px;
  margin: 1px 0;
  padding: .48rem .58rem;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--v2-soft);
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

body.chat-page.chat-v2 .channel-item:hover,
body.chat-page.chat-v2 .dm-item:hover,
body.chat-page.chat-v2 .dm-friends-request:hover {
  background: color-mix(in srgb, var(--teal) 6%, var(--bg-card));
  color: var(--text);
}

body.chat-page.chat-v2 .channel-item-active,
body.chat-page.chat-v2 .dm-item-active {
  border-color: color-mix(in srgb, var(--teal) 16%, transparent);
  background: color-mix(in srgb, var(--teal) 10%, var(--bg-card));
  color: var(--text);
}

body.chat-page.chat-v2 .dm-unified-heading {
  padding: .2rem .35rem .65rem;
}

body.chat-page.chat-v2 .dm-section-label {
  padding: .8rem .55rem .25rem;
  color: var(--text-muted);
  font-size: .62rem;
  letter-spacing: .1em;
}

body.chat-page.chat-v2 .dm-friends-add {
  margin: 0 .15rem .55rem;
}

body.chat-page.chat-v2 .dm-friends-input {
  min-width: 0;
  min-height: 38px;
  padding: .55rem .65rem;
  border: 1px solid var(--v2-line);
  border-radius: 9px;
  background: var(--bg-dark);
}

body.chat-page.chat-v2 .dm-request-name { max-width: 48%; }

body.chat-page.chat-v2 .chat-main {
  position: relative;
  min-width: 0;
  background: color-mix(in srgb, var(--bg-dark) 96%, var(--bg-mid) 4%);
}

body.chat-page.chat-v2 .chat-main-title { min-width: 0; }
body.chat-page.chat-v2 .chat-channel-label { min-width: 0; }

body.chat-page.chat-v2 .chat-channel-label h1 {
  font-size: 1rem;
  letter-spacing: -.015em;
}

body.chat-page.chat-v2 .channel-hash {
  color: var(--text-muted);
  font-size: 1rem;
}

body.chat-page.chat-v2 .chat-main-subtitle {
  max-width: min(30vw, 360px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: .72rem;
}

body.chat-page.chat-v2 .chat-e2ee-badge,
body.chat-page.chat-v2 .dm-call-btn {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-soft);
}

body.chat-page.chat-v2 .chat-e2ee-badge:hover,
body.chat-page.chat-v2 .dm-call-btn:hover {
  border-color: color-mix(in srgb, var(--teal) 38%, transparent);
  color: var(--teal);
}

body.chat-page.chat-v2 .chat-messages {
  padding: 1.15rem clamp(.85rem, 2.2vw, 1.75rem) .65rem;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.chat-page.chat-v2 .chat-messages .message-group {
  margin-bottom: .82rem;
}

body.chat-page.chat-v2 .message {
  border-radius: 8px;
  transition: background-color 120ms ease;
}

body.chat-page.chat-v2 .message:hover {
  background: color-mix(in srgb, var(--text) 2.6%, transparent);
}

body.chat-page.chat-v2 .message-avatar {
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 11px;
}

body.chat-page.chat-v2 .message-author {
  color: var(--text);
  font-size: .86rem;
  font-weight: 700;
}

body.chat-page.chat-v2 .message-meta {
  color: var(--text-muted);
  font-size: .68rem;
}

body.chat-page.chat-v2 .message-text {
  color: color-mix(in srgb, var(--text) 84%, var(--text-soft) 16%);
  font-size: .94rem;
  line-height: 1.48;
}

body.chat-page.chat-v2 .message-report-btn {
  top: .1rem;
  right: .35rem;
  background: var(--bg-card);
  border-color: var(--v2-line);
}

body.chat-page.chat-v2 .chat-new-messages {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 103px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .48rem .72rem;
  border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 94%, var(--teal) 6%);
  color: var(--text);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  font: 700 .72rem/1 var(--font);
  cursor: pointer;
  animation: clyr-v2-new-messages 180ms ease-out both;
}

body.chat-page.chat-v2 .chat-new-messages[hidden] { display: none; }
body.chat-page.chat-v2 .chat-new-messages span { color: var(--teal); font-size: .9rem; }

body.chat-page.chat-v2 .chat-typing-indicator {
  height: 24px;
  min-height: 24px;
  padding: 0 clamp(1rem, 2.2vw, 1.75rem);
  background: transparent;
  font-size: .67rem;
}

body.chat-page.chat-v2 .chat-typing-indicator.is-active {
  opacity: .86;
}

body.chat-page.chat-v2 .chat-typing-dots i {
  width: 3px;
  height: 3px;
  animation-duration: 1.45s;
}

body.chat-page.chat-v2 .chat-input-bar {
  padding: 0 clamp(.8rem, 2vw, 1.5rem) .8rem;
  background: transparent;
}

body.chat-page.chat-v2 .chat-input-inner {
  min-height: 48px;
  padding: .35rem .4rem .35rem .8rem;
  border: 1px solid var(--v2-line);
  border-radius: 12px;
  background: var(--v2-panel-raised);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

body.chat-page.chat-v2 .chat-input-inner:focus-within {
  border-color: color-mix(in srgb, var(--teal) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 8%, transparent);
}

body.chat-page.chat-v2 .chat-input {
  min-height: 32px;
  max-height: 180px;
  padding: .43rem 0;
  color: var(--text);
  line-height: 1.45;
}

body.chat-page.chat-v2 .chat-send-btn {
  min-width: 40px;
  height: 38px;
  padding: 0 .72rem;
  border-radius: 9px;
  box-shadow: none;
}

body.chat-page.chat-v2 .chat-input-hint {
  margin: .3rem .2rem 0;
  color: var(--text-muted);
  font-size: .62rem;
}

body.chat-page.chat-v2 .chat-user-footer {
  margin: .45rem;
  padding: .42rem;
  border: 1px solid var(--v2-line);
  border-radius: 11px;
  background: var(--bg-card);
}

body.chat-page.chat-v2 .chat-user-info { min-width: 0; }
body.chat-page.chat-v2 .chat-user-meta { min-width: 0; }
body.chat-page.chat-v2 .chat-user-name,
body.chat-page.chat-v2 .chat-user-tag { max-width: 116px; }

body.chat-page.chat-v2 .voice-status-bar {
  margin: .4rem;
  padding: .55rem;
  border: 1px solid color-mix(in srgb, var(--teal) 22%, var(--border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--teal) 6%, var(--bg-card));
}

body.chat-page.chat-v2 .voice-status-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent);
}

body.chat-page.chat-v2 .voice-panel {
  padding: clamp(.8rem, 2vw, 1.5rem);
  background: var(--bg-dark);
}

body.chat-page.chat-v2 .voice-stage-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .1rem .2rem 1rem;
  border-bottom: 1px solid var(--v2-line);
}

body.chat-page.chat-v2 .voice-stage-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .15rem .7rem;
}

body.chat-page.chat-v2 .voice-stage-kicker {
  grid-column: 1 / -1;
  color: var(--teal);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .11em;
}

body.chat-page.chat-v2 .voice-stage-heading h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.chat-page.chat-v2 .voice-stage-status {
  overflow: hidden;
  color: var(--v2-soft);
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.chat-page.chat-v2 .voice-stage-chat-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: .5rem .75rem;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--v2-panel-raised);
  font: 650 .7rem/1 var(--font);
  cursor: pointer;
}

body.chat-page.chat-v2 .voice-stage-chat-btn:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--teal) 34%, var(--v2-line));
}

body.chat-page.chat-v2 .voice-stage-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1rem .4rem .15rem;
  border-top: 1px solid var(--v2-line);
}

body.chat-page.chat-v2 .voice-stage-control {
  min-width: 64px;
  min-height: 52px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .55rem .7rem;
  border: 1px solid var(--v2-line);
  border-radius: 12px;
  color: var(--text-soft);
  background: var(--v2-panel-raised);
  font: 650 .6rem/1 var(--font);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
}

body.chat-page.chat-v2 .voice-stage-control .icon {
  width: 18px;
  height: 18px;
}

body.chat-page.chat-v2 .voice-stage-control:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--teal) 34%, var(--v2-line));
  transform: translateY(-1px);
}

body.chat-page.chat-v2 .voice-stage-control.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--teal) 45%, var(--v2-line));
  background: color-mix(in srgb, var(--teal) 14%, var(--v2-panel-raised));
}

body.chat-page.chat-v2 .voice-stage-control-leave {
  color: #fff;
  border-color: #d73d49;
  background: #d73d49;
}

body.chat-page.chat-v2 .voice-stage-control-leave:hover {
  color: #fff;
  border-color: #ed4c5a;
  background: #ed4c5a;
}

body.chat-page.chat-v2 .voice-participants {
  gap: .75rem;
}

body.chat-page.chat-v2 .voice-tile {
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  background: var(--v2-panel-raised);
  box-shadow: none;
}

body.chat-page.chat-v2 .voice-tile-clickable:hover {
  border-color: color-mix(in srgb, var(--teal) 35%, var(--border));
  transform: translateY(-1px);
}

body.chat-page.chat-v2 .voice-tile-avatar {
  border-radius: 20px;
  background: color-mix(in srgb, var(--teal) 11%, var(--bg-mid));
}

body.chat-page.chat-v2 .voice-tile-name {
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: rgba(3, 7, 9, .72);
}

body.chat-page.chat-v2 .chat-message-skeleton { opacity: .52; }
body.chat-page.chat-v2 .chat-skeleton-row i { border-radius: 11px; }

@keyframes clyr-v2-new-messages {
  from { opacity: 0; transform: translate(-50%, 5px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 900px) {
  body.chat-page.chat-v2 .chat-main-subtitle { display: none; }
  body.chat-page.chat-v2 .chat-e2ee-badge { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 768px) {
  body.chat-page.chat-v2 .chat-sidebar-zones { flex-basis: 60px; }
  body.chat-page.chat-v2 .chat-sidebar-main { flex-basis: min(84vw, 290px); }
  body.chat-page.chat-v2 .chat-main-header { padding: 0 .75rem; }
  body.chat-page.chat-v2 #channel-title { max-width: 34vw; }
  body.chat-page.chat-v2 .chat-e2ee-badge { font-size: 0; width: 30px; padding: 0; }
  body.chat-page.chat-v2 .chat-e2ee-badge::before { content: '⌁'; font-size: .9rem; }
  body.chat-page.chat-v2 .chat-new-messages { bottom: 94px; }
  body.chat-page.chat-v2 .chat-send-label { display: none; }
  body.chat-page.chat-v2 .chat-input-hint { display: none; }
  body.chat-page.chat-v2 .chat-input-bar { padding-bottom: max(.55rem, env(safe-area-inset-bottom)); }
  body.chat-page.chat-v2 .voice-panel { padding: .7rem; }
  body.chat-page.chat-v2 .voice-stage-header { padding-bottom: .7rem; }
  body.chat-page.chat-v2 .voice-stage-status { display: none; }
  body.chat-page.chat-v2 .voice-stage-controls { gap: .35rem; overflow-x: auto; justify-content: flex-start; }
  body.chat-page.chat-v2 .voice-stage-control { min-width: 52px; min-height: 46px; padding: .45rem; }
  body.chat-page.chat-v2 .voice-stage-control span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.chat-page.chat-v2 *,
  body.chat-page.chat-v2 *::before,
  body.chat-page.chat-v2 *::after {
    scroll-behavior: auto !important;
  }
  body.chat-page.chat-v2 .chat-new-messages { animation: none; }
}