/* FasutGPT — Claude Design "Chatbot Character UI" ported to plain CSS.
   Tokens mirror the design: gold accent on a deep blue-black stage. */

:root {
  --accent: #d9bd7a;
  --char-scale: .55; /* 1 = the design's original framing */
  --accent-soft: rgba(217, 189, 122, .55);
  --ink: #e8e0cf;
  --ink-dim: rgba(232, 224, 207, .6);
  --you: #f0eadb;
  --her: #a8dcf0;
  --system: rgba(217, 189, 122, .85);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #05070c;
  overflow: hidden;
}

body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #f2dfae; }

@keyframes fg-spin  { to { transform: rotate(360deg); } }
@keyframes fg-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes fg-rise  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #16203a 0%, #0a0f1c 45%, #05070c 100%);
  user-select: none;
}

.stage--bg-lechu {
  background-image:
    linear-gradient(rgba(5, 7, 12, .55), rgba(5, 7, 12, .55)),
    url("background/lechu.png");
  background-size: cover;
  background-position: center;
}

/* ── overlays ───────────────────────────────────────────────── */

.fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.fx--scanlines {
  background-image: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 100% 3px;
}
.fx--vignette { box-shadow: inset 0 0 240px 60px rgba(0, 0, 0, .75); }

/* ── character ──────────────────────────────────────────────── */

.char {
  position: absolute;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%) scale(var(--char-scale));
  transform-origin: center bottom;
  /* Don't constrain with max-*; let the scale handle sizing.
     The canvas is rendered at native crop size, then scaled by CSS. */
  z-index: 2;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .6));
}

.floor-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42vh;
  background: linear-gradient(to top, rgba(5, 7, 12, .94) 12%, rgba(5, 7, 12, 0));
  z-index: 3;
  pointer-events: none;
}

/* offscreen video sources — decoded, never shown directly */
.src {
  position: absolute;
  left: 0; bottom: 0;
  width: 2px; height: 2px;
  opacity: .001;
  pointer-events: none;
}

/* ── title + state ──────────────────────────────────────────── */

.titlebar {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  padding: 20px 20px 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.titlebar__rule { display: flex; align-items: center; gap: 11px; }

.rule { width: 26px; height: 1px; }
.rule--l { background: linear-gradient(to right, transparent, rgba(217, 189, 122, .7)); }
.rule--r { background: linear-gradient(to left, transparent, rgba(217, 189, 122, .7)); }

.wordmark {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .2em;
  color: #efe4c8;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
}

.statusline { display: flex; align-items: center; gap: 8px; }

.statusline__label {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ink-dim);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transition: background .25s linear, box-shadow .25s linear;
}
.dot.is-pondering { background: #e0c063; box-shadow: 0 0 8px #e0c063; }
.dot.is-yapping   { background: #7fd4a0; box-shadow: 0 0 8px #7fd4a0; }
.dot.is-error     { background: #d97a7a; box-shadow: 0 0 8px #d97a7a; }

/* ── background select ──────────────────────────────────────── */

.bgselect {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  padding: 0 20px;
  z-index: 8;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.bgselect__inner { position: relative; pointer-events: auto; }

.bgselect__btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  background: linear-gradient(to bottom, rgba(13, 21, 36, .92), rgba(8, 13, 24, .96));
  backdrop-filter: blur(3px);
  border: 1px solid rgba(217, 189, 122, .3);
  cursor: pointer;
  transition: border-color .15s linear, background .15s linear;
}
.bgselect__btn:hover { border-color: rgba(217, 189, 122, .55); background: rgba(217, 189, 122, .1); }

.bgselect__label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--accent);
}

.bgselect__value {
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
}

.bgselect__caret {
  font-size: 8px;
  color: rgba(217, 189, 122, .55);
  transition: transform .15s ease-out;
}
.bgselect.is-open .bgselect__caret { transform: rotate(180deg); }

.bgselect__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: linear-gradient(to bottom, rgba(13, 21, 36, .97), rgba(8, 13, 24, .99));
  backdrop-filter: blur(4px);
  border: 1px solid rgba(217, 189, 122, .3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

.bgselect__option {
  padding: 7px 10px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-dim);
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s linear, color .12s linear;
}
.bgselect__option:hover { background: rgba(217, 189, 122, .14); color: var(--ink); }
.bgselect__option.is-active { color: var(--accent); }
.bgselect__option.is-active::before { content: "✦ "; }

/* ── chat log ───────────────────────────────────────────────── */

.log {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  height: 210px;
  padding: 0 20px;
  z-index: 5;
  display: flex;
  flex-direction: column-reverse;
  gap: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-soft) transparent;
  mask-image: linear-gradient(to bottom, transparent, #000 24px);
}
.log::-webkit-scrollbar { width: 6px; }
.log::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 3px; }

.line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  transition: opacity .9s linear;
  animation: fg-rise .32s ease-out both;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .98), 0 0 14px rgba(0, 0, 0, .9), 0 0 26px rgba(0, 0, 0, .7);
}

.line__time {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .05em;
  color: rgba(232, 224, 207, .38);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}

.line__body {
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}
.line__who { font-weight: 600; }

.line--you    .line__body { color: var(--you); }
.line--her    .line__body { color: var(--her); }
.line--system .line__body { color: var(--system); }
.line--error  .line__body { color: #e6a3a3; }

/* streaming caret on the in-flight reply */
.line.is-streaming .line__body::after {
  content: "▌";
  margin-left: 2px;
  animation: fg-pulse 1s steps(1) infinite;
}

/* ── composer ───────────────────────────────────────────────── */

.composer {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  padding: 0 20px;
  z-index: 5;
}

.composer__frame {
  position: relative;
  padding: 1px;
  background: linear-gradient(to bottom, var(--accent-soft), rgba(217, 189, 122, .12));
}

.composer__inner {
  display: flex;
  align-items: stretch;
  background: linear-gradient(to bottom, rgba(13, 21, 36, .9), rgba(8, 13, 24, .94));
  backdrop-filter: blur(3px);
}

.composer__tag {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px 0 15px;
  border-right: 1px solid rgba(217, 189, 122, .22);
  background: transparent;
  border-top: 0; border-bottom: 0; border-left: 0;
  cursor: pointer;
  transition: background .15s linear;
}
.composer__tag:hover:not(:disabled) { background: rgba(217, 189, 122, .13); }
.composer__tag:disabled { cursor: not-allowed; opacity: .45; }

.composer__say {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--accent);
}
.composer__caret { font-size: 9px; color: rgba(217, 189, 122, .55); }

.composer__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  padding: 14px 12px;
  letter-spacing: .01em;
}
.composer__input::placeholder { color: rgba(232, 224, 207, .34); font-style: italic; }
.composer__input:disabled { cursor: not-allowed; }

.composer__send {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(217, 189, 122, .22);
  color: var(--accent);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: .16em;
  padding: 0 20px;
  cursor: pointer;
  transition: background .15s linear, color .15s linear;
}
.composer__send:hover:not(:disabled) { background: rgba(217, 189, 122, .13); color: #f6e9c6; }
.composer__send:disabled { opacity: .45; cursor: not-allowed; }

.tick { position: absolute; width: 9px; height: 9px; }
.tick--tl { left: -1px; top: -1px;    border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); }
.tick--tr { right: -1px; top: -1px;   border-right: 2px solid var(--accent); border-top: 2px solid var(--accent); }
.tick--bl { left: -1px; bottom: -1px; border-left: 2px solid rgba(217, 189, 122, .4); border-bottom: 2px solid rgba(217, 189, 122, .4); }
.tick--br { right: -1px; bottom: -1px; border-right: 2px solid rgba(217, 189, 122, .4); border-bottom: 2px solid rgba(217, 189, 122, .4); }

.composer__hints {
  display: flex;
  justify-content: space-between;
  padding: 7px 4px 0;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(232, 224, 207, .28);
}

/* ── loading overlay ────────────────────────────────────────── */

.loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: radial-gradient(120% 90% at 50% 45%, rgba(22, 32, 58, .97), rgba(4, 6, 11, .99));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transition: opacity .5s ease-out;
}
.loader.is-hidden { opacity: 0; pointer-events: none; }

.loader__rings { position: relative; width: 96px; height: 96px; }

.ring { position: absolute; border-radius: 50%; }
.ring--outer {
  inset: 0;
  border: 1px solid rgba(217, 189, 122, .18);
  border-top-color: var(--accent);
  animation: fg-spin 1.15s linear infinite;
}
.ring--inner {
  inset: 14px;
  border: 1px solid rgba(217, 189, 122, .1);
  border-bottom-color: rgba(217, 189, 122, .7);
  animation: fg-spin 1.9s linear infinite reverse;
}
.ring__glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: var(--accent);
  animation: fg-pulse 2s ease-in-out infinite;
}

.loader__text { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.loader__title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  letter-spacing: .34em;
  color: #efe4c8;
}

.loader__rule {
  width: 220px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(217, 189, 122, .6), transparent);
}

.loader__flavor {
  font-size: 14px;
  font-style: italic;
  color: rgba(232, 224, 207, .55);
  min-height: 20px;
  letter-spacing: .02em;
  text-align: center;
  padding: 0 24px;
}

.loader__progress {
  width: 220px;
  height: 2px;
  background: rgba(217, 189, 122, .13);
  overflow: hidden;
}
.loader__progressbar {
  width: 0;
  height: 100%;
  background: linear-gradient(to right, rgba(217, 189, 122, .4), var(--accent));
  transition: width .2s linear;
}

.loader__retry {
  margin-top: 6px;
  background: transparent;
  border: 1px solid var(--accent-soft);
  color: var(--accent);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: .16em;
  padding: 9px 22px;
  cursor: pointer;
}
.loader__retry:hover { background: rgba(217, 189, 122, .13); color: #f6e9c6; }

@media (max-width: 480px) {
  .char { bottom: 76px; }
  .log { bottom: 112px; }
}