/* TeaSpilt Chat visual refresh — deliberately presentation-only. */
:root {
  --chat-accent: #8d6bff;
  --chat-accent-soft: rgba(141, 107, 255, .18);
  --chat-accent-line: rgba(164, 137, 255, .34);
  --chat-surface: var(--panel-bg, linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)));
  --chat-control: var(--button-bg, linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045)));
  --chat-control-hover: var(--button-hover, linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07)));
  --chat-border: var(--surface-border, rgba(255,255,255,.10));
  --chat-radius-lg: 24px;
  --chat-radius-md: 17px;
  --chat-footer-height: 52px;
}

html, body {
  background: var(--bg-main, #14161d) !important;
  color: var(--text, #f5f7ff) !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

body::before {
  background: var(--bg-before, none);
  filter: blur(10px);
}

body::after {
  background: var(--bg-after, none);
  filter: blur(28px);
}

body > .chat-theme-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .14;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.app {
  grid-template-columns: 304px minmax(0, 1fr) !important;
  background: transparent !important;
}

.sidebar,
.app > aside,
aside.sidebar {
  border-right: 1px solid var(--chat-border) !important;
  background: color-mix(in srgb, var(--menu-bg, #0a0f23) 78%, transparent) !important;
  box-shadow: 18px 0 50px rgba(0, 0, 0, .12) !important;
  padding: 18px !important;
  gap: 14px !important;
}

.brand {
  min-height: 66px;
  padding: 5px 4px 13px;
  border-bottom: 1px solid var(--chat-border);
}

.chat-brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}

.chat-brand-lockup img {
  display: block;
  width: 164px;
  height: auto;
  max-width: 100%;
}

html[data-theme="corporo"] .chat-brand-lockup img,
html[data-theme="corporo"] .connect-brand img,
html[data-theme="tilly"] .chat-brand-lockup img,
html[data-theme="tilly"] .connect-brand img {
  filter: invert(1);
}

.chat-product-label {
  margin: -4px 0 0 3px;
  color: var(--muted, #bcc3da);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .18em;
  line-height: 1;
  text-transform: uppercase;
}

.brand small.chat-account-label {
  display: block;
  margin-top: 8px;
  color: var(--muted, #bcc3da);
  font-size: 12px;
}

.btn,
.mode-select,
button,
select,
input,
textarea {
  border-color: var(--chat-border) !important;
}

.btn,
.mode-select,
.rename-chat-btn,
.sidebar-chat-menu button {
  color: var(--text, #f5f7ff) !important;
  background: var(--chat-control) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 7px 20px rgba(0,0,0,.08);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.btn:hover,
.mode-select:hover,
.rename-chat-btn:hover,
.sidebar-chat-menu button:hover {
  background: var(--chat-control-hover) !important;
  border-color: var(--line-strong, rgba(255,255,255,.2)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.12);
}

.btn:active,
.rename-chat-btn:active {
  transform: translateY(1px) scale(.985);
}

.chat-list,
.chats {
  gap: 6px !important;
  padding: 3px 2px 8px !important;
}

.chat-item {
  min-height: 42px !important;
  border-radius: 13px !important;
  padding: 10px 12px !important;
  color: var(--muted, #bcc3da) !important;
  font-size: 13px !important;
  font-weight: 670 !important;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}

.chat-item:hover {
  color: var(--text, #f5f7ff) !important;
  background: color-mix(in srgb, var(--glass-2, rgba(255,255,255,.06)) 90%, transparent) !important;
  transform: translateX(2px);
}

.chat-item.active {
  color: var(--text, #f5f7ff) !important;
  background: var(--chat-accent-soft) !important;
  border-color: var(--chat-accent-line) !important;
  box-shadow: inset 3px 0 0 var(--chat-accent);
}

.account {
  padding-top: 12px;
  border-top: 1px solid var(--chat-border);
}

.account-menu {
  border-radius: var(--chat-radius-md) !important;
  background: var(--menu-bg, rgba(10,15,35,.96)) !important;
  border-color: var(--chat-border) !important;
  box-shadow: var(--shadow-soft, 0 12px 30px rgba(0,0,0,.25));
}

.main,
.app > section.main {
  background: transparent !important;
}

.topbar {
  min-height: 72px !important;
  padding: 13px 22px !important;
  border-bottom-color: var(--chat-border) !important;
  background: color-mix(in srgb, var(--menu-bg, #0a0f23) 46%, transparent) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.06);
  backdrop-filter: blur(22px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
}

.topbar-title strong {
  color: var(--title-color, #fff);
  font-size: 16px;
  letter-spacing: -.025em;
}

.topbar-title > span {
  color: var(--muted, #bcc3da) !important;
  font-size: 11px !important;
}

.messages {
  width: min(100%, 980px) !important;
  margin: 0 auto !important;
  padding-left: clamp(18px, 4vw, 52px) !important;
  padding-right: clamp(18px, 4vw, 52px) !important;
}

.empty {
  width: min(520px, 100%);
  margin: auto;
  padding: 34px !important;
  border: 1px solid var(--chat-border);
  border-radius: 28px;
  background: var(--chat-surface);
  box-shadow: var(--shadow-soft, 0 12px 30px rgba(0,0,0,.25));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.empty h2 {
  color: var(--title-color, #fff);
  letter-spacing: -.045em;
}

.empty p {
  color: var(--muted, #bcc3da) !important;
}

.msg {
  max-width: min(82%, 760px) !important;
  width: fit-content !important;
  min-width: 0 !important;
  border-radius: 21px !important;
  border-color: var(--chat-border) !important;
  background: var(--chat-surface) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.12) !important;
}

.msg.user,
.message.user {
  margin-left: auto !important;
  background: linear-gradient(145deg, rgba(141,107,255,.25), rgba(100,74,190,.18)) !important;
  border-color: var(--chat-accent-line) !important;
  border-bottom-right-radius: 7px !important;
}

.msg.assistant,
.message.assistant {
  margin-right: auto !important;
  border-bottom-left-radius: 7px !important;
}

.msg-content,
.message-content {
  color: var(--text, #f5f7ff) !important;
  line-height: 1.58 !important;
}

.composer,
.input-row,
.message-input-row {
  background: color-mix(in srgb, var(--menu-bg, #070a12) 92%, transparent) !important;
  border-top-color: var(--chat-border) !important;
  box-shadow: 0 -20px 46px color-mix(in srgb, var(--menu-bg, #070a12) 78%, transparent) !important;
  backdrop-filter: blur(24px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
}

.composer-main {
  width: min(100%, 920px) !important;
  margin-inline: auto !important;
  gap: 10px !important;
}

.composer textarea,
#messageInput {
  min-height: 48px !important;
  border-radius: 17px !important;
  color: var(--text, #f5f7ff) !important;
  background: var(--input-bg, rgba(255,255,255,.05)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.composer textarea:focus,
#messageInput:focus {
  background: var(--input-focus-bg, rgba(255,255,255,.07)) !important;
  border-color: var(--chat-accent-line) !important;
  box-shadow: 0 0 0 3px rgba(141,107,255,.12) !important;
}

.attach-btn,
.send {
  border-radius: 16px !important;
}

.send:not(.danger):not(.secondary) {
  background: linear-gradient(145deg, #9272ff, #7452e2) !important;
  border-color: rgba(194,178,255,.42) !important;
  color: #fff !important;
}

.attachment-card,
.modal-card,
.custom-prompt-box,
.sidebar-chat-menu {
  color: var(--text, #f5f7ff) !important;
  background: var(--menu-bg, rgba(10,15,35,.96)) !important;
  border-color: var(--chat-border) !important;
  box-shadow: var(--shadow, 0 24px 70px rgba(0,0,0,.42)) !important;
}

.auth-wrap {
  position: relative;
  z-index: 1;
}

.auth-card {
  width: min(470px, 100%) !important;
  padding: 34px !important;
  border-radius: 30px !important;
  color: var(--text, #f5f7ff) !important;
  background: var(--chat-surface) !important;
  border-color: var(--chat-border) !important;
  box-shadow: var(--shadow, 0 24px 70px rgba(0,0,0,.42)) !important;
  backdrop-filter: blur(24px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(118%) !important;
}

.auth-card h1 {
  color: var(--title-color, #fff) !important;
}

.auth-card p,
.auth-card label {
  color: var(--muted, #bcc3da) !important;
}

.connect-signin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 11px 18px;
  border: 1px solid var(--chat-accent-line);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #9272ff, #7452e2);
  box-shadow: 0 14px 34px rgba(85,55,176,.28), inset 0 1px 0 rgba(255,255,255,.16);
  font-weight: 850;
  text-decoration: none;
}

.connect-signin-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(85,55,176,.36), inset 0 1px 0 rgba(255,255,255,.2);
}

.connect-brand {
  display: block;
  width: min(255px, 82%);
  margin: 0 0 22px;
}

.connect-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.connect-product-label {
  display: block;
  margin: -8px 0 0 4px;
  color: var(--muted, #bcc3da);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.connect-auth-kicker {
  margin: 0 0 8px;
  color: var(--title-color, #fff) !important;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -.035em;
}

.connect-auth-note {
  margin: 0 0 22px;
  line-height: 1.55;
}

.connect-auth-footnote {
  margin: 14px 0 0 !important;
  font-size: 12px;
  text-align: center;
}

.chat-site-footer {
  background: var(--footer-bg, rgba(9,11,18,.9)) !important;
  border-top-color: var(--footer-border, rgba(255,255,255,.08)) !important;
  color: var(--muted, #bcc3da) !important;
}

.chat-site-footer .site-footer-inner,
.chat-site-footer .footer-left,
.chat-site-footer .footer-center,
.chat-site-footer .footer-right,
.chat-site-footer .footer-right-text,
.chat-site-footer .footer-heart {
  color: var(--muted, #bcc3da) !important;
}

.chat-theme-picker {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 250;
}

body:has(.app) .chat-theme-picker {
  top: auto;
  right: 18px;
  bottom: calc(var(--chat-footer-height) + 12px);
}

.edu-theme-trigger,
.edu-theme-option,
.chat-theme-picker button {
  border: 1px solid var(--chat-border);
  color: var(--text, #f5f7ff);
  background: var(--chat-control);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@media (max-width: 820px) {
  :root { --chat-footer-height: 44px; }

  .app { grid-template-columns: 1fr !important; }

  .sidebar,
  .app > aside,
  aside.sidebar {
    padding: 14px !important;
  }

  .topbar {
    min-height: 66px !important;
    padding: 10px 14px !important;
  }

  .messages {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .msg { max-width: 91% !important; }

  .auth-wrap {
    align-items: start !important;
    padding: 68px 16px 58px !important;
  }
  .auth-card { padding: 25px !important; border-radius: 24px !important; }

  .chat-theme-picker {
    top: 10px;
    right: 10px;
  }

  body:has(.app) .chat-theme-picker {
    display: none;
  }
}

@media (max-width: 640px) {
  .chat-site-footer .site-footer-inner {
    width: 100% !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    padding: 6px 12px !important;
  }

  .chat-site-footer .footer-center {
    justify-self: center !important;
  }

  .chat-site-footer .footer-right-text {
    display: none !important;
  }

  .chat-site-footer .footer-right-stack {
    gap: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}