/* React Bits-inspired layer for this static app.
   Adapted from the interaction ideas in ClickSpark, SpotlightCard, GlareHover,
   StarBorder, and DotGrid without adding React/GSAP runtime dependencies. */

:root {
  --rb-bg: #05070b;
  --rb-panel: rgba(13, 17, 26, .86);
  --rb-panel-strong: rgba(17, 22, 33, .94);
  --rb-elevated: rgba(22, 28, 42, .88);
  --rb-line: rgba(148, 163, 184, .18);
  --rb-line-strong: rgba(125, 211, 252, .34);
  --rb-text: #f8fafc;
  --rb-muted: #99a5b6;
  --rb-faint: #667085;
  --rb-blue: #67c8ff;
  --rb-cyan: #7df9ff;
  --rb-green: #34d399;
  --rb-danger: #ff8b8b;
}

html.rb-ready,
html.rb-ready body {
  background: var(--rb-bg);
}

html.rb-ready body {
  color: var(--rb-text);
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.rb-dot-field,
.rb-click-sparks {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.rb-dot-field {
  z-index: 0;
  opacity: .72;
}

.rb-click-sparks {
  z-index: 10000;
}

body > .main,
body > .wrap {
  position: relative;
  z-index: 1;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 8%, rgba(103, 200, 255, .16), transparent 34%),
    radial-gradient(circle at 18% 88%, rgba(52, 211, 153, .10), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.028), transparent 38%);
}

button,
select,
textarea,
input {
  font: inherit;
}

button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid var(--rb-blue);
  outline-offset: 2px;
}

/* Shared surfaces */
.sidebar,
.top-bar,
.main-top,
.wrap,
.input-box,
.modal,
.acct-modal,
.copy-modal {
  border-color: var(--rb-line) !important;
  background: var(--rb-panel) !important;
}

.sidebar {
  box-shadow: 18px 0 60px rgba(0, 0, 0, .28);
}

.top-bar,
.main-top {
  min-height: 58px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, .18);
}

.wrap {
  width: min(390px, calc(100vw - 36px)) !important;
  max-width: 390px !important;
  padding: 30px !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
  overflow: hidden;
}

@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .sidebar,
  .top-bar,
  .main-top,
  .wrap,
  .input-box,
  .modal,
  .acct-modal,
  .copy-modal,
  .quota-badge,
  .img-act-btn,
  .lightbox-close,
  .lightbox-dl,
  .gl-lb-close,
  .gl-lb-dl {
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    backdrop-filter: blur(22px) saturate(1.25);
  }
}

/* React Bits style spotlight */
.rb-spotlight {
  position: relative;
  overflow: hidden;
  --rb-x: 50%;
  --rb-y: 50%;
}

.rb-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px circle at var(--rb-x) var(--rb-y),
      rgba(125, 249, 255, .16),
      rgba(103, 200, 255, .08) 28%,
      transparent 62%);
  opacity: 0;
  transition: opacity .28s ease;
}

.rb-spotlight:hover::before,
.rb-spotlight:focus-within::before {
  opacity: 1;
}

.admin-panel,
.admin-panel.rb-spotlight {
  overflow: visible !important;
}

.admin-panel::before {
  display: none;
}

.acct-modal-body {
  align-items: stretch;
}

.acct-modal .admin-panel {
  flex-shrink: 0;
}

.acct-modal .admin-panel-body {
  overflow: visible;
}

.acct-modal .password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.acct-modal .password-row:first-child {
  grid-template-columns: 1fr;
}

.acct-modal .field {
  min-width: 0;
}

.acct-modal .form-input {
  min-height: 44px;
}

.rb-glare {
  position: relative;
  overflow: hidden;
}

.rb-glare::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 43%,
      rgba(255, 255, 255, .34) 50%,
      transparent 57%,
      transparent 100%);
  background-size: 220% 220%;
  background-position: -150% -150%;
  transition: background-position .72s ease;
}

.rb-glare:hover::after {
  background-position: 150% 150%;
}

/* App chrome */
.new-btn,
.new-gen-btn,
.back-btn,
.logout-btn,
.admin-btn,
.image2-btn,
.model-picker,
.quota-badge,
.conv-item,
.hist-item,
.user-row {
  border-radius: 14px !important;
}

.new-btn,
.new-gen-btn,
.model-picker {
  background: rgba(23, 30, 45, .82) !important;
  border: 1px solid var(--rb-line) !important;
}

.new-btn:hover,
.new-gen-btn:hover,
.back-btn:hover,
.logout-btn:hover,
.admin-btn:hover,
.image2-btn:hover,
.conv-item:hover,
.hist-item:hover {
  background: rgba(42, 54, 76, .74) !important;
  color: var(--rb-text) !important;
}

.conv-item.active,
.hist-item.active,
.image2-btn.active {
  background: rgba(22, 43, 62, .9) !important;
  border-color: rgba(103, 200, 255, .38) !important;
  box-shadow: inset 3px 0 0 var(--rb-blue);
}

.sec-label,
.hist-label,
.ai-model,
.hint,
.main-top-info p,
.hist-time,
.no-conv,
.no-hist {
  color: var(--rb-muted) !important;
}

.avatar,
.admin-big-avatar {
  background: linear-gradient(135deg, #1d8ed7, #34d399) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 24px rgba(0,0,0,.22);
}

.logo-icon,
.ai-ico {
  box-shadow: 0 12px 30px rgba(103, 200, 255, .18);
}

.logo h1,
.welcome h2,
.main-top-info h1 {
  letter-spacing: 0 !important;
  color: var(--rb-text) !important;
}

.welcome h2 {
  font-weight: 760 !important;
}

.msgs {
  background: transparent !important;
}

.welcome p,
.main-top-info p {
  line-height: 1.65;
}

.user-bub {
  background: linear-gradient(135deg, rgba(33, 50, 72, .96), rgba(25, 34, 52, .96)) !important;
  border: 1px solid rgba(103, 200, 255, .20);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}

.ai-txt,
.ai-txt h1,
.ai-txt h2,
.ai-txt h3,
.ai-txt strong {
  color: var(--rb-text) !important;
}

.ai-txt a {
  color: var(--rb-blue) !important;
}

.thinking-block,
.code-block,
.admin-panel,
.model-config-item,
.copy-user-item,
.upload-card,
.gen-hist-card,
.img-card {
  background: rgba(14, 18, 28, .92) !important;
  border-color: var(--rb-line) !important;
}

.img-card {
  border-radius: 16px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
}

/* Inputs and actions */
.input-area {
  background: transparent !important;
  border-top: 0 !important;
}

.input-box {
  max-width: 880px !important;
  border-radius: 24px !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.inp-row {
  gap: 10px !important;
}

.inp-row textarea,
input,
.form-input,
.image2-textarea {
  color: var(--rb-text) !important;
  caret-color: var(--rb-cyan);
}

.inp-row textarea::placeholder,
input::placeholder,
.image2-textarea::placeholder {
  color: var(--rb-faint) !important;
}

.send-btn,
.gen-btn,
button[type="submit"],
.form-btn:not(.secondary):not(.danger) {
  background: linear-gradient(135deg, var(--rb-blue), var(--rb-cyan)) !important;
  color: #03111d !important;
  border: 0 !important;
  box-shadow: 0 12px 30px rgba(103, 200, 255, .28);
}

.send-btn,
.pause-btn,
.icon-btn,
.hamburger,
.modal-close,
.gl-lb-close,
.lightbox-close {
  border-radius: 999px !important;
}

.send-btn:hover:not(:disabled),
.gen-btn:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled),
.form-btn:not(.secondary):not(.danger):hover {
  filter: brightness(1.08);
}

.send-btn:active:not(:disabled),
.gen-btn:active:not(:disabled),
button[type="submit"]:active:not(:disabled),
.icon-btn:active {
  transform: scale(.96);
}

.icon-btn:hover,
.hamburger:hover {
  background: rgba(42, 54, 76, .72) !important;
  color: var(--rb-text) !important;
}

.icon-btn.toggle-on {
  color: var(--rb-cyan) !important;
  background: rgba(103, 200, 255, .16) !important;
}

.form-btn.secondary,
.act-btn,
.clear-hist-btn {
  background: rgba(22, 28, 42, .76) !important;
  border-color: var(--rb-line) !important;
  color: var(--rb-muted) !important;
}

.act-btn,
.clear-hist-btn {
  border-radius: 999px !important;
}

.form-btn.secondary:hover,
.act-btn:hover,
.clear-hist-btn:hover {
  background: rgba(42, 54, 76, .74) !important;
  color: var(--rb-text) !important;
}

.form-btn.danger,
.logout-btn:hover,
.conv-del:hover,
.hist-del:hover {
  color: var(--rb-danger) !important;
}

.quota-badge,
.img-act-btn,
.lightbox-close,
.lightbox-dl,
.gl-lb-close,
.gl-lb-dl {
  background: rgba(17, 22, 33, .74) !important;
  border: 1px solid var(--rb-line) !important;
}

.img-act-btn,
.lightbox-dl,
.gl-lb-dl {
  color: var(--rb-text) !important;
}

.lightbox,
.gl-lightbox,
.modal-overlay,
.sidebar-backdrop,
.backdrop {
  background: rgba(0, 0, 0, .72) !important;
}

/* Login-specific cleanup */
.wrap label {
  color: var(--rb-muted) !important;
}

.wrap input {
  min-height: 44px;
  border-radius: 12px !important;
  border-color: var(--rb-line) !important;
  background: rgba(6, 9, 14, .78) !important;
}

.wrap input:focus,
.form-input:focus,
.image2-textarea:focus {
  border-color: var(--rb-line-strong) !important;
  box-shadow: 0 0 0 3px rgba(103, 200, 255, .14);
}

.error,
.gen-error,
.modal-msg.err {
  border-color: rgba(255, 139, 139, .36) !important;
  background: rgba(58, 22, 28, .74) !important;
  color: #fecaca !important;
}

@media (max-width: 768px) {
  .top-bar,
  .main-top {
    min-height: 58px;
  }

  .input-box {
    border-radius: 26px !important;
  }

  .send-btn,
  .gen-btn {
    min-width: 46px;
    min-height: 46px;
  }

  .welcome h2 {
    font-size: 30px !important;
    line-height: 1.18 !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .sidebar,
  .top-bar,
  .main-top,
  .wrap,
  .input-box,
  .modal,
  .acct-modal,
  .copy-modal,
  .quota-badge,
  .img-act-btn,
  .lightbox-close,
  .lightbox-dl,
  .gl-lb-close,
  .gl-lb-dl {
    background: var(--rb-panel-strong) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

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

  .rb-glare::after,
  .rb-spotlight::before {
    display: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --rb-line: rgba(226, 232, 240, .34);
    --rb-muted: #cbd5e1;
  }
}