.seberd-chat-root {
  position: relative;
}

.page-template-page-chat .seberd-chat-root {
  --text-head: var(--text-heading, var(--text, #cccccc));
  --accent-lt: color-mix(in srgb, var(--accent) 78%, var(--sbrd-mix-paper) 22%);
  --accent-dk: color-mix(in srgb, var(--accent) 72%, var(--sbrd-mix-ink) 28%);
  --r-xs: 4px;
  --border-m: var(--border-strong, color-mix(in srgb, var(--sbrd-mix-paper) 13%, transparent));
  --sc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sc-ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
}

.page-template-page-chat .site-content > .seberd-chat-root {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

.sc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.page-template-page-chat .inside-article,
.page-template-page-chat .entry-content,
.page-template-page-chat .page-content,
.page-template-page-chat .post-padding,
.page-template-page-chat .entry-header {
  padding: 0 !important;
  margin:  0 !important;
}

body.page-template-page-chat {
  overscroll-behavior: none;
  overflow-y: hidden;
}

html:has(body.page-template-page-chat) {
  overflow-y: hidden;
}

body.page-template-page-chat #page {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  overflow-y: hidden;
  overscroll-behavior: none;
}

.sc-wrap {
  --sc-canvas: var(--bg, #1e1e1e);
  --sc-elev: color-mix(in srgb, var(--bg-card, #252526) 90%, var(--bg) 10%);
  --sc-bubble: color-mix(in srgb, var(--bg-card, #252526) 94%, var(--accent) 6%);
  --sc-bubble-me: color-mix(in srgb, var(--bg-card-h, var(--bg-card-alt, #2d2d30)) 88%, var(--accent) 12%);
  --sc-fg: var(--text, #cccccc);
  --sc-muted: var(--text-muted, #858585);
  --sc-dim: var(--text-sec, #9d9d9d);
  --sc-line: var(--border, color-mix(in srgb, var(--sbrd-mix-paper) 9%, transparent));
  --sc-field: var(--bg-input, #3c3c3c);

  --sc-top: var(--sbrd-header-row-min-h, 64px);
  --sc-side: 24px;
  --sc-radius: 14px;
  --sc-bubble-max: min(78ch, 88%);
  --sc-read-width: min(56rem, 100%);
  --sc-space-1: 4px;
  --sc-space-2: 8px;
  --sc-space-3: 12px;
  --sc-space-4: 16px;
  --sc-space-5: 20px;
  --sc-space-6: 24px;
  --sc-fs-meta-xs: 10px;
  --sc-fs-meta-sm: 11px;
  --sc-fs-meta-md: 12px;
  --sc-fs-ui: 12px;
  --sc-fs-body: 14px;
  --sc-fs-body-lg: 15px;
  --sc-meta-lh: 1.35;
  --sc-body-lh: 1.55;
  --sc-radius-xs: 6px;
  --sc-radius-sm: 8px;
  --sc-radius-md: 12px;
  --sc-radius-lg: 14px;
  --sc-radius-xl: 16px;
  --sc-radius-pill: 999px;
  --sc-chip-pad-y: 1px;
  --sc-chip-pad-x: 7px;
  --sc-meta-name-fs: var(--sc-fs-meta-md);
  --sc-meta-time-fs: var(--sc-fs-meta-sm);
  --sc-meta-chip-fs: var(--sc-fs-meta-sm);
  --sc-meta-chip-lh: var(--sc-meta-lh);
  --sc-meta-chip-pad-y: var(--sc-chip-pad-y);
  --sc-meta-chip-pad-x: var(--sc-chip-pad-x);
  --sc-avatar-size: 32px;
  --sc-send-size: 40px;
  --sc-bubble-radius: var(--sc-radius-xl);
  --sc-font-ui: var(--font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif);
  --sc-font-mono: var(--font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
  --sc-bubble-border: color-mix(in srgb, var(--border) 78%, var(--accent) 6%);
  --sc-shadow-1:
    0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent),
    0 6px 22px color-mix(in srgb, var(--sbrd-mix-ink) 32%, transparent),
    0 16px 40px color-mix(in srgb, var(--sbrd-mix-ink) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sbrd-mix-paper) 5%, transparent);
  --sc-shadow-2: 0 0 0 1px var(--sc-line) inset;

  position: fixed;
  top: var(--sc-top);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--sbrd-header-z, 110) - 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--sc-font-ui);
  color: var(--sc-fg);
  background-color: transparent;
  background-image: none;
}

@media screen and (max-width: 782px) {
  .sc-wrap {
    --sc-side: 12px;
  }
}

.page-template-page-chat .sbrd-chat-intro {
  flex-shrink: 0;
  width: 100%;
  max-width: var(--sc-read-width);
  margin: 0 auto;
  padding: var(--sc-space-5) var(--sc-side) var(--sc-space-4);
  box-sizing: border-box;
  font-size: var(--sc-fs-body);
  line-height: var(--sc-body-lh);
  color: color-mix(in srgb, var(--sc-fg) 90%, var(--sc-muted));
  border-bottom: 1px solid color-mix(in srgb, var(--sc-line) 92%, var(--accent) 8%);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-card) 42%, transparent) 0%,
    color-mix(in srgb, var(--bg-card) 12%, transparent) 55%,
    transparent 100%
  );
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent-s) 35%, transparent);
}

.page-template-page-chat .sbrd-chat-intro > *:first-child {
  margin-top: 0;
}

.page-template-page-chat .sbrd-chat-intro > *:last-child {
  margin-bottom: 0;
}

.page-template-page-chat .sbrd-chat-intro a {
  color: var(--accent-lt);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.page-template-page-chat .sbrd-chat-intro a:hover {
  color: var(--focus, #ffaa33);
  border-bottom-color: color-mix(in srgb, var(--focus, #ffaa33) 55%, transparent);
}

.sc-feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sc-space-4) var(--sc-side) var(--sc-space-5);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sc-space-3);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 22%, transparent) transparent;
  background: transparent;
}

.sc-feed > .sc-empty {
  align-self: stretch;
  width     : 100%;
  max-width : none;
}

.sc-feed::-webkit-scrollbar        { width: 6px; }
.sc-feed::-webkit-scrollbar-track  { background: transparent; }
.sc-feed::-webkit-scrollbar-thumb  {
  background   : color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 99px;
}
.sc-feed::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 38%, transparent);
}

.sc-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-3);
  color: var(--sc-muted);
  font-family: var(--sc-font-ui);
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
}

.sc-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0;
  opacity: 1;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--sc-elev)), var(--sc-elev));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--sc-line));
  box-shadow:
    0 12px 40px color-mix(in srgb, var(--sbrd-mix-ink) 35%, transparent),
    0 0 0 1px color-mix(in srgb, var(--sbrd-mix-paper) 4%, transparent) inset,
    0 0 28px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: sc-float 5.5s ease-in-out infinite;
}

.sc-empty-glyph {
  font-family: var(--sc-font-mono);
  letter-spacing: 0;
}

.sc-empty-cursor {
  display: inline-block;
  width: 0.55ch;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  border-right: 2px solid var(--accent);
  animation: sc-caret 1.05s steps(1, end) infinite;
}

@keyframes sc-caret {
  0%,
  45% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.sc-empty-title {
  font-size: var(--sc-fs-body-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: color-mix(in srgb, var(--sc-fg) 92%, var(--sc-muted));
}

.sc-empty-sub {
  font-size: var(--sc-fs-ui);
  letter-spacing: 0.01em;
  color: var(--sc-muted);
  text-align: center;
  max-width: 28rem;
  padding: 0 var(--sc-side);
  line-height: var(--sc-meta-lh);
}

@keyframes sc-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}

.sc-date-sep {
  display: flex;
  align-items: center;
  gap: var(--sc-space-3);
  width: 100%;
  max-width: var(--sc-read-width);
  margin: 0 auto;
  padding: var(--sc-space-5) 0 var(--sc-space-3);
  font-size: var(--sc-fs-meta-sm);
  font-family: var(--sc-font-ui);
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 55%, var(--sc-muted));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.88;
  flex-shrink: 0;
  user-select: none;
  align-self: center;
}

.sc-date-sep::before,
.sc-date-sep::after {
  content   : '';
  flex      : 1;
  height    : 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 45%, transparent) 50%,
    transparent
  );
}

@supports not (background: color-mix(in srgb, black 50%, transparent)) {
  .sc-date-sep::before,
  .sc-date-sep::after {
    background: linear-gradient(90deg, transparent, rgba(78, 163, 255, 0.28), transparent);
  }
}

.sc-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-space-3);
  width: 100%;
  max-width: var(--sc-read-width);
  margin: 0 auto;
  padding: var(--sc-space-1) var(--sc-space-1);
  border-radius: var(--sc-radius-xl);
  animation: sc-in 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
  align-self: stretch;
}

.sc-msg--me {
  justify-content: flex-end;
}

@keyframes sc-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.sc-msg--grouped               { padding-top: 2px; padding-bottom: 2px; }
.sc-msg--grouped .sc-avatar    { visibility: hidden; }
.sc-msg--grouped .sc-meta      { display: none !important; }

.sc-msg--grouped .sc-body {
  padding-left: 8px;
  border-left : 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.sc-msg--grouped.sc-msg--me .sc-body {
  padding-left : 0;
  padding-right: 8px;
  border-left  : none;
  border-right : 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

@supports not (border-left: 2px solid color-mix(in srgb, white 50%, black 50%)) {
  .sc-msg--grouped .sc-body { border-left-color: rgba(78, 163, 255, 0.22); }
  .sc-msg--grouped.sc-msg--me .sc-body { border-right-color: rgba(78, 163, 255, 0.22); }
}

.sc-msg--flash {
  animation: sc-msg-flash 2.1s ease-out 1;
}

@keyframes sc-msg-flash {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 52%, transparent);
  }

  35% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 14%, transparent);
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.sc-msg--failed {
  opacity: 1;
}

.sc-msg--failed.sc-msg--pending {
  opacity: 1;
}

.sc-msg--failed .sc-time::after {
  content: none !important;
  animation: none !important;
}

.sc-msg-fail-actions {
  display    : inline-flex;
  gap        : 6px;
  align-items: center;
  margin-left: 6px;
}

.sc-msg-retry,
.sc-msg-discard {
  font-size     : var(--sc-fs-meta-sm);
  font-weight   : 600;
  padding       : var(--sc-space-1) var(--sc-space-3);
  border-radius : var(--sc-radius-pill);
  border        : 1px solid var(--sc-line);
  background    : color-mix(in srgb, var(--sc-elev) 82%, var(--sc-canvas));
  color         : var(--sc-muted);
  cursor        : pointer;
  transition    : background 0.14s, border-color 0.14s, color 0.14s;
}

.sc-msg-retry:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  color       : var(--accent-lt);
}

.sc-msg-discard:hover {
  border-color: rgba(248, 113, 113, 0.45);
  color       : #f87171;
}

.sc-msg--pending               { opacity: .55; }
.sc-msg--pending .sc-time::after {
  content  : ' ·';
  animation: sc-blink 1s ease-in-out infinite;
}
@keyframes sc-blink { 0%,100%{opacity:.4} 50%{opacity:1} }

.sc-avatar {
  width: var(--sc-avatar-size);
  height: var(--sc-avatar-size);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sc-fs-meta-sm);
  font-weight: 700;
  font-family: var(--sc-font-ui);
  color: var(--accent);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(165deg, color-mix(in srgb, var(--sc-bubble) 78%, var(--accent) 22%), var(--sc-bubble));
  border: 1px solid var(--sc-bubble-border);
  box-shadow:
    0 4px 16px color-mix(in srgb, var(--sbrd-mix-ink) 26%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sbrd-mix-paper) 7%, transparent);
  align-self: flex-start;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-msg:hover .sc-avatar {
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px color-mix(in srgb, var(--sbrd-mix-ink) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sbrd-mix-paper) 9%, transparent);
}

.sc-msg--guest .sc-avatar {
  color       : var(--sc-muted);
  border-color: color-mix(in srgb, var(--sc-line) 90%, transparent);
}

.sc-msg--me .sc-avatar {
  color       : color-mix(in srgb, var(--accent-lt) 70%, var(--accent));
  border-color: color-mix(in srgb, var(--accent) 48%, var(--sc-line));
}

.sc-body {
  flex           : 0 1 auto;
  min-width      : 0;
  max-width      : min(74%, var(--sc-bubble-max));
  display        : flex;
  flex-direction : column;
  align-items    : flex-start;
}

.sc-msg--me .sc-body {
  align-items: flex-end;
}

.sc-msg--me .sc-meta {
  align-self: flex-end;
}

.sc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sc-space-2) var(--sc-space-3);
  margin-bottom: var(--sc-space-2);
  line-height: var(--sc-meta-lh);
  max-width: 100%;
  font-family: var(--sc-font-ui);
}

.sc-name {
  font-size: var(--sc-meta-name-fs, var(--sc-fs-meta-md));
  font-weight: 600;
  font-family: var(--sc-font-ui);
  letter-spacing: 0.01em;
  text-transform: none;
  color: color-mix(in srgb, var(--sc-fg) 94%, var(--accent));
  cursor: default;
  transition: opacity 0.18s, color 0.18s;
}

.sc-msg--guest .sc-name {
  color: var(--sc-dim);
}

.sc-name:hover { opacity: 0.92; }

.sc-time {
  font-size: var(--sc-meta-time-fs, var(--sc-fs-meta-sm));
  font-family: var(--sc-font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--sc-dim);
  opacity: 0.96;
  letter-spacing: 0.02em;
}

@supports not (color: color-mix(in srgb, black 50%, transparent)) {
  .sc-time {
    color: var(--sc-muted);
  }
}

.sc-del {
  display: none;
  background: none;
  border: none;
  color: var(--sc-muted);
  font-size: var(--sc-fs-meta-md);
  line-height: 1;
  padding: var(--sc-space-1) var(--sc-space-2);
  border-radius: var(--sc-radius-sm);
  cursor: pointer;
  opacity: 0.45;
  transition: color 0.14s, background 0.14s, opacity 0.14s;
}
.sc-msg:hover .sc-del  { display: inline-block; }
.sc-del:hover          { color: #f87171; background: rgba(248,113,113,.10); opacity: 1; }

.sc-text {
  font-size: var(--sc-fs-body);
  font-family: var(--sc-font-ui);
  line-height: var(--sc-body-lh);
  color: var(--sc-fg);
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  margin: 0;
  padding: var(--sc-space-3) var(--sc-space-4);
  border-radius: calc(var(--sc-bubble-radius) - 2px);
  width: fit-content;
  max-width: min(var(--sc-bubble-max), 100%);
  box-sizing: border-box;
  background: color-mix(in srgb, var(--bg-card) 82%, transparent);
  border: 1px solid var(--sc-bubble-border);
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, var(--sc-line));
  box-shadow: var(--sc-shadow-1);
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  isolation: isolate;
  transition:
    border-color 0.2s var(--sc-ease-out),
    box-shadow 0.22s var(--sc-ease-out),
    transform 0.22s var(--sc-ease-out);
}

.sc-msg--guest .sc-text {
  color: var(--sc-muted);
  border-left-color: color-mix(in srgb, var(--sc-line) 88%, var(--accent) 12%);
}

.sc-msg:hover .sc-text {
  border-color: color-mix(in srgb, var(--border) 55%, var(--accent) 18%);
  border-left-color: color-mix(in srgb, var(--accent) 72%, var(--sc-line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 8px 26px color-mix(in srgb, var(--sbrd-mix-ink) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sbrd-mix-paper) 6%, transparent);
  transform: translateY(-1px);
}

.sc-msg--guest:hover .sc-text {
  border-left-color: color-mix(in srgb, var(--sc-line) 82%, var(--accent) 18%);
}

.sc-msg--me .sc-text {
  background: color-mix(in srgb, var(--bg-card-h) 78%, transparent);
  color: var(--sc-fg);
  border: 1px solid var(--sc-bubble-border);
  border-right: 2px solid color-mix(in srgb, var(--accent) 55%, var(--sc-line));
  border-left: 1px solid var(--sc-bubble-border);
  border-radius: calc(var(--sc-bubble-radius) - 2px);
  backdrop-filter: blur(12px) saturate(1.14);
  -webkit-backdrop-filter: blur(12px) saturate(1.14);
}

.sc-msg--me:hover .sc-text {
  border-color: color-mix(in srgb, var(--border) 55%, var(--accent) 18%);
  border-right-color: color-mix(in srgb, var(--accent) 78%, var(--sc-line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 8px 26px color-mix(in srgb, var(--sbrd-mix-ink) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sbrd-mix-paper) 6%, transparent);
  transform: translateY(-1px);
}

@supports not (background: color-mix(in srgb, black 50%, transparent)) {
  .sc-text {
    background: #252526;
  }
  .sc-msg--me .sc-text {
    background: #2d2d30;
    border-color: color-mix(in srgb, var(--sbrd-mix-paper) 10%, transparent);
    border-right-color: rgba(78, 163, 255, 0.45);
    border-left-color: color-mix(in srgb, var(--sbrd-mix-paper) 10%, transparent);
  }
  .sc-msg--me:hover .sc-text {
    border-right-color: rgba(78, 163, 255, 0.55);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sc-text,
  .sc-msg--me .sc-text {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .sc-text {
    background: #252526;
  }
  .sc-msg--me .sc-text {
    background: #2d2d30;
  }
  .seberd-chat-root textarea.sc-input {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--sc-field);
  }
}

.sc-msg--grouped .sc-text {
  margin-top: var(--sc-space-1);
}

.sc-text code {
  font-family  : var(--sc-font-mono);
  font-size    : var(--sc-fs-ui);
  background   : color-mix(in srgb, var(--sc-canvas) 55%, var(--sc-bubble));
  color        : var(--accent-lt);
  padding      : 1px 5px;
  border-radius: 3px;
  border       : 1px solid color-mix(in srgb, var(--accent) 22%, var(--sc-line));
}

.sc-text strong { color: color-mix(in srgb, var(--sc-fg) 92%, var(--sbrd-mix-paper)); }

.sc-text a {
  color: var(--accent-lt);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: color 0.16s, border-color 0.16s;
}
.sc-text a:hover {
  color: var(--focus, #ffaa33);
  border-bottom-color: color-mix(in srgb, var(--accent) 65%, transparent);
}

.sc-reply-snippet {
  width: fit-content;
  max-width: min(var(--sc-bubble-max), 100%);
  font-size: var(--sc-fs-ui);
  line-height: var(--sc-meta-lh);
  padding: var(--sc-space-2) var(--sc-space-3);
  margin: 0 0 var(--sc-space-2);
  border-radius: var(--sc-radius-md);
  background: color-mix(in srgb, var(--sc-canvas) 28%, var(--sc-bubble));
  border: 1px solid var(--sc-line);
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--sc-muted);
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.18s var(--sc-ease-out), border-color 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--sbrd-mix-ink) 18%, transparent);
}

.sc-reply-snippet:hover {
  background: color-mix(in srgb, var(--sc-canvas) 18%, var(--sc-bubble));
  box-shadow: 0 4px 18px color-mix(in srgb, var(--sbrd-mix-ink) 22%, transparent);
}

.sc-reply-snippet:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

@supports not (border-left: 2px solid color-mix(in srgb, white 50%, black 50%)) {
  .sc-reply-snippet {
    border-left-color: rgba(78, 163, 255, 0.45);
  }
}

.sc-reply-snippet-user {
  display      : block;
  font-weight  : 600;
  font-size    : var(--sc-fs-meta-sm);
  color         : var(--accent-lt);
  margin-bottom : 2px;
}

.sc-reply-snippet-text {
  display           : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow          : hidden;
}

.sc-meta-tail {
  margin-left: auto;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: center;
  gap: var(--sc-space-2);
}

#sbrd-chat .sc-meta button.sc-reply-btn {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: var(--sc-radius-pill);
  border: 1px solid transparent;
  padding: var(--sc-meta-chip-pad-y) var(--sc-meta-chip-pad-x);
  font-family: var(--sc-font-ui);
  font-size: var(--sc-meta-chip-fs);
  font-weight: 500;
  line-height: var(--sc-meta-chip-lh);
  letter-spacing: 0.01em;
  white-space: nowrap;
  min-height: 0;
  height: auto;
  color: var(--sc-dim);
  cursor: pointer;
  opacity: 0;
  background: transparent;
  box-shadow: none;
  transition: opacity 0.18s ease, color 0.18s, border-color 0.18s, background 0.18s var(--sc-ease-out);
}

#sbrd-chat .sc-msg:hover .sc-meta button.sc-reply-btn {
  opacity: 1;
}

#sbrd-chat .sc-meta button.sc-reply-btn:hover {
  color: var(--accent-lt);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent-s) 42%, transparent);
}

#sbrd-chat .sc-meta button.sc-reply-btn:focus-visible {
  outline: none;
  border-radius: var(--sc-radius-pill);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--bg, #0a0a0b) 92%, transparent),
    0 0 0 4px color-mix(in srgb, var(--focus, #ffaa33) 45%, transparent) !important;
}

@supports not (box-shadow: 0 0 0 4px color-mix(in srgb, white 50%, black 50%)) {
  #sbrd-chat .sc-meta button.sc-reply-btn:focus-visible {
    box-shadow:
      0 0 0 2px var(--bg, #0a0a0b),
      0 0 0 4px rgba(107, 189, 255, 0.45) !important;
  }
}

@media (hover: none) {
  #sbrd-chat .sc-meta button.sc-reply-btn {
    opacity: 0.78;
  }
}

@media (pointer: coarse) {
  #sbrd-chat .sc-meta button.sc-reply-btn {
    min-height: 44px;
    padding-inline: max(var(--sc-meta-chip-pad-x), var(--sc-space-3));
  }
}

#sbrd-chat[data-sc-composer-locked="1"] .sc-meta button.sc-reply-btn {
  display: none !important;
}

.sc-reply-bar {
  flex-shrink    : 0;
  display        : flex;
  align-items    : center;
  gap            : var(--sc-space-3);
  width          : 100%;
  max-width      : var(--sc-read-width);
  margin         : 0 auto var(--sc-space-2);
  padding        : var(--sc-space-2) var(--sc-space-3);
  box-sizing     : border-box;
  border-radius  : var(--sc-radius-md);
  background     : color-mix(in srgb, var(--sc-bubble) 92%, var(--sc-canvas));
  border         : 1px solid var(--sc-line);
}

@supports not (background: color-mix(in srgb, black 50%, transparent)) {
  .sc-reply-bar {
    background: rgba(28, 28, 33, 0.88);
  }
}

.sc-reply-bar--hidden {
  display: none !important;
}

.sc-reply-bar-inner {
  flex          : 1;
  min-width     : 0;
  display       : flex;
  flex-direction: column;
  gap           : var(--sc-space-1);
  font-size     : var(--sc-fs-ui);
}

.sc-reply-bar-label {
  font-size      : var(--sc-fs-meta-xs);
  text-transform : uppercase;
  letter-spacing : 0.06em;
  color          : var(--sc-muted);
}

.sc-reply-bar-name {
  font-weight: 600;
  color      : var(--accent-lt);
}

.sc-reply-bar-preview {
  color        : var(--sc-muted);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.sc-reply-bar-dismiss {
  flex-shrink   : 0;
  width         : calc(var(--sc-send-size) * 0.8);
  height        : calc(var(--sc-send-size) * 0.8);
  border-radius : var(--sc-radius-lg);
  border        : 1px solid var(--sc-line);
  background    : transparent;
  color         : var(--sc-muted);
  font-size     : 1.125rem;
  line-height   : 1;
  cursor        : pointer;
  transition    : color 0.14s, background 0.14s, border-color 0.14s;
}

.sc-reply-bar-dismiss:hover {
  color       : var(--sc-fg);
  background  : color-mix(in srgb, var(--sc-fg) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--sc-line));
}

.sc-reply-bar-dismiss:focus-visible {
  outline       : none;
  box-shadow    :
    0 0 0 2px color-mix(in srgb, var(--bg, #0a0a0b) 88%, transparent),
    0 0 0 4px color-mix(in srgb, var(--focus, #ffaa33) 40%, transparent);
}

.sc-typing-slot {
  flex-shrink  : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  min-height     : 40px;
  width          : 100%;
  max-width      : var(--sc-read-width);
  margin         : 0 auto;
  padding        : 0 var(--sc-side);
  box-sizing     : border-box;
}

.sc-typing-bar {
  flex-shrink: 0;
  width: 100%;
  max-width: var(--sc-read-width);
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-3);
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--sc-space-3);
  font-family: var(--sc-font-ui);
  font-size: var(--sc-fs-ui);
  letter-spacing: 0.02em;
  color: var(--sc-muted);
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.28s var(--sc-ease-out), opacity 0.28s var(--sc-ease-out), padding 0.28s var(--sc-ease-out);
}

.sc-typing-bar--on {
  max-height: 52px;
  min-height: var(--sc-send-size);
  opacity: 0.9;
  padding: var(--sc-space-2) var(--sc-space-4);
  margin-bottom: 0;
  border-radius: var(--sc-radius-pill);
  background: color-mix(in srgb, var(--sc-elev) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--sc-line));
  box-shadow: 0 4px 18px color-mix(in srgb, var(--sbrd-mix-ink) 20%, transparent);
}

@supports not (background: color-mix(in srgb, black 50%, transparent)) {
  .sc-typing-bar--on {
    background: rgba(28, 28, 33, 0.92);
  }
}

.sc-typing-dots {
  display    : inline-flex;
  gap        : 3px;
  align-items: center;
}

.sc-typing-dots span {
  width        : 4px;
  height       : 4px;
  border-radius: 50%;
  background   : var(--accent-lt);
  opacity      : .38;
  animation    : sc-bounce 1.3s ease-in-out infinite;
}
.sc-typing-dots span:nth-child(2) { animation-delay: .18s; }
.sc-typing-dots span:nth-child(3) { animation-delay: .36s; }

@keyframes sc-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.35;
  }

  40% {
    transform: translateY(-5px) scale(1.15);
    opacity: 1;
  }

  80% {
    transform: translateY(-1px) scale(1.02);
    opacity: 0.55;
  }
}

.sc-scroll-btn {
  position      : absolute;
  bottom        : 80px;
  left          : auto;
  right         : var(--sc-side);
  width         : 36px;
  height        : 36px;
  border-radius : 50%;
  background    : color-mix(in srgb, var(--sc-elev) 92%, var(--sc-canvas));
  border        : 1px solid var(--sc-line);
  color         : color-mix(in srgb, var(--accent) 72%, var(--sc-muted));
  display       : flex;
  align-items   : center;
  justify-content: center;
  cursor        : pointer;
  box-shadow    : 0 4px 16px color-mix(in srgb, var(--sbrd-mix-ink) 30%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index       : 5;
  opacity       : 0;
  visibility    : hidden;
  pointer-events: none;
  transform     : translateY(10px) scale(.88);
  transition    :
    opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    visibility 0s linear 0.22s;
}

.sc-scroll-btn--show {
  opacity       : 1;
  visibility    : visible;
  pointer-events: auto;
  transform     : translateY(0) scale(1);
  transition    :
    opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    visibility 0s linear 0s;
}

.sc-scroll-btn:hover {
  background  : color-mix(in srgb, var(--sc-bubble) 88%, var(--sc-canvas));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--sc-line));
  color       : var(--accent-lt);
}
.sc-scroll-btn:active { transform: scale(.92); }

.sc-scroll-btn:focus-visible {
  outline       : none;
  box-shadow    :
    0 0 0 2px color-mix(in srgb, var(--bg, #0a0a0b) 88%, transparent),
    0 0 0 4px color-mix(in srgb, var(--focus, #ffaa33) 42%, transparent);
}

.sc-scroll-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

.sc-unread-badge {
  position     : absolute;
  top          : -6px;
  right        : -6px;
  min-width    : 18px;
  height       : 18px;
  padding      : 0 4px;
  background: var(--accent);
  border-radius: 9px;
  font-size: 9px;
  font-weight: 700;
  color: var(--on-emphasis, #0c0c0c);
  font-family  : var(--sc-font-ui);
  font-variant-numeric: tabular-nums;
  line-height  : 1;
  display      : none;
  align-items  : center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(78, 163, 255, 0.35);
  letter-spacing: 0;
}
.sc-unread-badge--show { display: flex; }


.sc-input-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
  direction: ltr;
  padding: var(--sc-space-3) var(--sc-side) var(--sc-space-3);
  align-self: center;
  width: var(--sc-read-width);
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--sc-radius-xl) var(--sc-radius-xl) 0 0;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  border: 1px solid var(--sc-line);
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--sc-line));
  border-bottom: none;
  box-shadow:
    0 -8px 32px color-mix(in srgb, var(--sbrd-mix-ink) 26%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sbrd-mix-paper) 4%, transparent);
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  position: relative;
  z-index: 2;
}

.sc-input-row {
  display              : grid;
  grid-template-columns: minmax(0, 1fr) var(--sc-send-size);
  align-items          : end;
  column-gap           : 8px;
  width                : 100%;
}

@supports not (background: color-mix(in srgb, black 50%, transparent)) {
  .sc-input-wrap {
    background: var(--sc-elev);
  }
}

.sc-guest-hint {
  margin: 0;
  padding: var(--sc-space-3) var(--sc-space-3);
  border-radius: var(--sc-radius-lg);
  font-size: var(--sc-fs-ui);
  font-family: var(--sc-font-ui);
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--sc-fg);
  background: color-mix(in srgb, var(--accent-s) 45%, var(--sc-elev));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--sc-line));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.sc-guest-hint-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--sc-fs-meta-md) * 2);
  height: calc(var(--sc-fs-meta-md) * 2);
  padding: 0 var(--sc-space-2);
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-fs-meta-sm);
  font-weight: 700;
  color: var(--on-emphasis, #0c0c0c);
  background-color: var(--accent);
  background: linear-gradient(145deg, var(--accent), var(--accent-dk));
  background-color: var(--accent);
  box-shadow: 0 2px 8px rgba(78, 163, 255, 0.35);
}

.sc-guest-hint-txt {
  opacity: 0.82;
}

.sc-guest-hint-sep {
  opacity: 0.45;
}

.sc-guest-hint-link {
  color           : var(--accent);
  text-decoration : underline;
  text-underline-offset: 2px;
}

.sc-guest-hint-link:hover {
  color: var(--accent-lt);
}

@supports not (background: color-mix(in srgb, black 50%, transparent)) {
  .sc-guest-hint {
    background: var(--sc-elev);
  }
}

.sc-input-wrap::before {
  content   : '';
  position  : absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(
    90deg, transparent,
    color-mix(in srgb, var(--sc-line) 85%, var(--accent) 15%) 40%,
    color-mix(in srgb, var(--sc-line) 85%, var(--accent) 15%) 60%,
    transparent
  );
  opacity       : 0.55;
  pointer-events: none;
}

.sc-input-box {
  grid-column: 1;
  min-width  : 0;
  position   : relative;
}

.sc-input-wrap .sc-send {
  grid-column: 2;
  align-self : end;
}

.seberd-chat-root textarea.sc-input {
  display: block;
  width: 100%;
  min-height: var(--sc-send-size);
  max-height: 120px;
  padding: var(--sc-space-3) var(--sc-space-4);
  border: 1px solid var(--sc-bubble-border);
  border-radius: var(--sc-radius-xl);
  font-family: var(--sc-font-ui);
  font-size: var(--sc-fs-body);
  line-height: var(--sc-body-lh);
  resize: none;
  outline: none;
  overflow-y: hidden;
  transition: border-color 0.22s var(--sc-ease-out), box-shadow 0.22s var(--sc-ease-out);
  scrollbar-width: thin;
  background-color: color-mix(in srgb, var(--sc-field) 76%, transparent);
  color: var(--sc-fg);
  box-shadow:
    inset 0 2px 12px color-mix(in srgb, var(--sbrd-mix-ink) 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--sbrd-mix-paper) 5%, transparent);
  backdrop-filter: blur(10px) saturate(1.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
}

@supports not (background: color-mix(in srgb, black 50%, transparent)) {
  .seberd-chat-root textarea.sc-input {
    background-color: var(--bg-input, #3c3c3c);
  }
}

.sc-input::placeholder { color: var(--sc-dim); opacity: 0.65; }

.sc-input:focus {
  border-color: color-mix(in srgb, var(--focus, #ffaa33) 55%, var(--sc-bubble-border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--focus, #ffaa33) 18%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 14%, transparent),
    inset 0 2px 8px color-mix(in srgb, var(--sbrd-mix-ink) 12%, transparent);
}

.sc-input-footer {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  gap            : 10px;
  width          : 100%;
  padding-top    : 2px;
}

.sc-input-hint {
  font-size: var(--sc-fs-meta-sm);
  font-family: var(--sc-font-ui);
  letter-spacing: 0.02em;
  color: var(--sc-dim);
  opacity: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.sc-counter {
  position: static;
  font-size: var(--sc-fs-meta-sm);
  font-family: var(--sc-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sc-dim);
  opacity: 1;
  pointer-events: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.18s, opacity 0.18s;
}

.sc-counter--warn {
  color  : color-mix(in srgb, #f87171 90%, var(--accent)) !important;
  opacity: 1 !important;
}

.sc-send {
  width: var(--sc-send-size);
  height: var(--sc-send-size);
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--sc-bubble-border));
  border-radius: var(--sc-radius-xl);
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent-s) 70%, transparent), color-mix(in srgb, var(--accent-s) 35%, transparent));
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 16px color-mix(in srgb, var(--sbrd-mix-ink) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--sbrd-mix-paper) 5%, transparent) inset;
  transition: background 0.2s var(--sc-ease-out), border-color 0.2s, color 0.2s, transform 0.2s var(--sc-ease-spring), opacity 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.sc-send:hover:not(:disabled) {
  background   : color-mix(in srgb, var(--accent-s) 85%, transparent);
  border-color : color-mix(in srgb, var(--accent) 55%, var(--sc-line));
  transform    : translateY(-1px);
  box-shadow:
    0 4px 16px color-mix(in srgb, var(--sbrd-mix-ink) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--sbrd-mix-paper) 5%, transparent) inset,
    0 0 28px color-mix(in srgb, var(--accent) 22%, transparent);
}

.sc-send:active:not(:disabled) {
  transform : scale(0.96);
}

.sc-send:disabled {
  opacity   : 0.32;
  cursor    : not-allowed;
  background: transparent;
}

.sc-send:focus-visible:not(:disabled) {
  outline       : none;
  box-shadow    :
    0 0 0 2px color-mix(in srgb, var(--bg, #0a0a0b) 88%, transparent),
    0 0 0 5px color-mix(in srgb, var(--focus, #ffaa33) 42%, transparent);
}

.seberd-chat-root .sc-send svg {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  color: inherit;
  transition: transform 0.18s var(--sc-ease-out);
}

.seberd-chat-root .sc-send:not(:disabled):hover svg {
  transform: translate(1px, -1px);
}


.sc-auth {
  flex-shrink : 0;
  display     : flex;
  flex-direction: column;
  align-items : center;
  align-self    : center;
  width         : var(--sc-read-width);
  max-width     : 100%;
  box-sizing    : border-box;
  gap         : 14px;
  padding     : 20px var(--sc-side) 22px;
  border-top  : 1px solid var(--sc-line);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--sbrd-mix-ink) 22%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-card) 92%, var(--bg)) 0%,
    color-mix(in srgb, var(--bg) 96%, var(--bg-card)) 100%
  );
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  text-align  : center;
}

@supports not (background: color-mix(in srgb, black 50%, transparent)) {
  .sc-auth {
    background: rgba(22, 22, 24, 0.96);
  }
}

.sc-auth--hidden {
  display: none !important;
}

.sc-input-wrap.sc-input-wrap--hidden {
  display: none !important;
}

.sc-auth-text {
  margin   : 0;
  font-size: var(--sc-fs-ui);
  color    : color-mix(in srgb, var(--sc-fg) 88%, var(--sc-muted));
}

.sc-auth-actions {
  display        : flex;
  gap            : 10px;
  flex-wrap      : wrap;
  justify-content: center;
}

.sc-auth-btn {
  display      : inline-flex;
  align-items  : center;
  padding      : var(--sc-space-3) var(--sc-space-5);
  border-radius: var(--sc-radius-md);
  font-size    : var(--sc-fs-body);
  font-weight  : 600;
  text-decoration: none !important;
  border-bottom: none !important;
  transition   : transform 0.2s var(--sc-ease-spring), box-shadow 0.2s var(--sc-ease-out), background 0.2s;
}

.sc-auth-btn--login {
  background: linear-gradient(145deg, var(--accent), var(--accent-dk));
  color: var(--on-emphasis, #0c0c0c) !important;
  box-shadow: 0 4px 18px rgba(78, 163, 255, 0.28);
}
.sc-auth-btn--login:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(78, 163, 255, 0.36);
  color: var(--on-emphasis, #0c0c0c) !important;
}

.sc-auth-btn--register {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color     : var(--sc-muted) !important;
  border    : 1px solid var(--sc-line) !important;
}
.sc-auth-btn--register:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: rgba(78, 163, 255, 0.32) !important;
  color       : var(--text-head) !important;
  transform   : translateY(-1px);
}


.sc-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 20px;
  background: color-mix(in srgb, var(--bg-card, #252526) 94%, var(--bg, #1e1e1e));
  border: 1px solid rgba(78, 163, 255, 0.22);
  border-radius: 14px;
  color: var(--text, #cccccc);
  font-size: 13px;
  font-family: var(--font, system-ui, sans-serif);
  box-shadow:
    0 12px 40px color-mix(in srgb, var(--sbrd-mix-ink) 35%, transparent),
    inset 0 0 0 1px rgba(120, 190, 255, 0.06);
  z-index: 9999;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  animation: sc-toast-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  white-space: nowrap;
  pointer-events: none;
}

@keyframes sc-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

.sc-toast--error   { border-color: rgba(248,113,113,.40) !important; }
.sc-toast--success { border-color: rgba(74,222,128,.32)  !important; }
.sc-toast--warning { border-color: rgba(251,191,36,.34)  !important; }

@supports not (background: color-mix(in srgb, black 50%, transparent)) {
  .sc-toast {
    background: rgba(37, 37, 38, 0.97);
  }
}


@media (prefers-reduced-motion: reduce) {
  .sc-empty-icon,
  .sc-empty-cursor,
  .sc-typing-dots span,
  .sc-msg--pending .sc-time::after {
    animation: none !important;
  }

  .sc-msg {
    animation: none !important;
    filter: none !important;
  }

  .sc-msg:hover .sc-text {
    transform: none !important;
  }

  .sc-send,
  .sc-auth-btn {
    transition: none !important;
  }

  .sc-scroll-btn {
    transition:
      opacity 0.1s linear,
      transform 0.1s linear,
      visibility 0s linear 0.1s !important;
  }

  .sc-scroll-btn--show {
    transition:
      opacity 0.1s linear,
      transform 0.1s linear,
      visibility 0s linear 0s !important;
  }
}


@media (max-width: 480px) {
  .sc-avatar                 { width: 28px; height: 28px; font-size: 9px; }
  .sc-body                   { max-width: 88%; }
  .sc-text                   { font-size: 15px; }
  .sc-input                  { font-size: 16px; }
  .sc-msg                    { padding: 4px 0; gap: 8px; }
  .sc-scroll-btn             { bottom: 72px; }
  .sc-input-wrap {
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
  }
  .sc-auth {
    width        : 100%;
    max-width    : none;
    border-radius: 0 0 16px 16px;
  }
}

.page-template-page-chat .sbrd-chat-intro,
.sc-empty-icon,
.sc-avatar,
.sc-auth,
.sc-send,
.sc-auth-btn--login {
  background-image: none !important;
}

.page-template-page-chat .sbrd-chat-intro {
  background-color: color-mix(in srgb, var(--bg-card) 42%, transparent);
}

.sc-empty-icon,
.sc-avatar {
  background-color: color-mix(in srgb, var(--sc-bubble) 88%, var(--bg-card));
}

.sc-date-sep::before,
.sc-date-sep::after,
.sc-input-wrap::before {
  background: color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

.sc-guest-hint-mark,
.sc-auth-btn--login {
  background: var(--accent) !important;
  color: var(--on-emphasis, #0c0c0c) !important;
}

.sc-send {
  background-color: color-mix(in srgb, var(--accent-s) 62%, transparent);
}

.sc-send:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--accent-s) 78%, transparent);
}

.sc-auth {
  background-color: color-mix(in srgb, var(--bg-card) 94%, var(--bg));
}