:root {
  --bg: #030405;
  --panel: rgba(9, 12, 12, 0.72);
  --panel-strong: rgba(4, 5, 5, 0.9);
  --red: #d62518;
  --red-soft: rgba(214, 37, 24, 0.22);
  --amber: #f2a51f;
  --amber-soft: rgba(242, 165, 31, 0.2);
  --green: #1f7a32;
  --line: rgba(218, 47, 30, 0.28);
  --line-hot: rgba(242, 165, 31, 0.58);
  --text: #f4d7a1;
  --muted: #9f624e;
  --good: #63d884;
  --bad: #ff5f4e;
  --message-font-size: 13px;
  color-scheme: dark;
  font-family: "Consolas", "Cascadia Mono", "Microsoft YaHei UI", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.2), 0 0 14px rgba(214, 37, 24, 0.12);
}

button,
input,
textarea {
  font: inherit;
}

.lang-toggle {
  position: fixed;
  z-index: 6;
  min-width: 74px;
  min-height: 32px;
  border: 1px solid rgba(242, 165, 31, 0.52);
  border-radius: 8px;
  color: var(--amber);
  background:
    linear-gradient(180deg, rgba(31, 16, 8, 0.72), rgba(0, 0, 0, 0.62));
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.72), 0 0 18px rgba(214, 37, 24, 0.34);
  box-shadow:
    0 0 12px rgba(242, 165, 31, 0.14),
    0 0 26px rgba(214, 37, 24, 0.1),
    inset 0 0 12px rgba(214, 37, 24, 0.1);
}

body[data-amadeus-build="web"] .bridge-only,
body[data-amadeus-build="web"] .login-bridge-panel {
  display: none !important;
}

.login-lang,
.desktop-lang {
  right: 22px;
  top: 18px;
  bottom: auto;
}

.desktop-lang {
  z-index: 7;
  top: 16px;
  right: 22px;
  height: 36px;
  min-height: 36px;
}

#matrix {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 43%, rgba(41, 92, 39, 0.28), transparent 34%),
    radial-gradient(circle at 70% 35%, rgba(91, 27, 92, 0.12), transparent 28%),
    #030405;
  background-size: 100% 4px, 4px 100%, auto, auto, auto;
  opacity: 0;
  transition: opacity 360ms ease;
}

body.is-authenticated #matrix {
  opacity: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.56));
  mix-blend-mode: screen;
  opacity: 0.26;
}

.login-screen,
.desktop {
  position: fixed;
  inset: 0;
  z-index: 2;
}

.login-screen {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(17, 46, 18, 0.18), transparent 30%),
    #030405;
  transition: opacity 620ms ease, filter 620ms ease;
}

.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
    url("./assets/login-frame.jpg") center / 100% 100% no-repeat;
  opacity: 0.9;
  transition: opacity 520ms ease, filter 520ms ease, transform 620ms ease;
}

.login-screen::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 36%, rgba(242, 165, 31, 0.1) 45%, rgba(255, 230, 162, 0.34) 50%, rgba(214, 37, 24, 0.16) 56%, transparent 68%),
    radial-gradient(circle at 50% 47%, rgba(242, 165, 31, 0.28), transparent 24%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-24%) scale(1.02);
}

.login-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.login-screen.is-unlocking {
  z-index: 7;
  filter: saturate(1.12) contrast(1.05);
}

.login-screen.is-unlocking::before {
  opacity: 1;
  filter: brightness(1.18) contrast(1.08);
  transform: scale(1.012);
}

.login-screen.is-unlocking::after {
  animation: loginSystemSweep 760ms ease-out both;
}

.login-screen.is-unlocking .boot,
.login-screen.is-unlocking .login-bridge-panel {
  animation: loginCodeConfirm 760ms steps(4, end) both;
}

.login-screen.is-unlocking .login-core {
  animation: loginCoreRelease 760ms ease-out both;
}

.login-screen.is-unlocking .login-hint {
  color: var(--amber);
  animation: authHintPulse 760ms ease-out both;
}

.boot {
  position: absolute;
  z-index: 1;
  color: rgba(231, 35, 24, 0.76);
  font-size: clamp(9px, 0.72vw, 13px);
  line-height: 1.28;
  text-shadow:
    0 0 5px rgba(255, 38, 24, 0.9),
    0 0 14px rgba(214, 37, 24, 0.72),
    0 0 28px rgba(214, 37, 24, 0.34);
  opacity: 0.85;
  filter: blur(0.1px);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.boot-left {
  left: 1.18vw;
  top: 6.7vh;
  width: 22.9vw;
  height: 78.6vh;
}

.boot-right {
  right: 3.45vw;
  top: 14.7vh;
  width: 20.35vw;
  height: 73.2vh;
  font-size: clamp(8.5px, 0.67vw, 12px);
}

.boot pre {
  margin: 0;
  white-space: pre-wrap;
  user-select: none;
  -webkit-user-select: none;
}

.login-bridge-panel {
  position: absolute;
  right: 3.45vw;
  top: 61.2vh;
  width: 20.35vw;
  min-height: 20vh;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 10px;
  color: rgba(231, 35, 24, 0.86);
  font-size: clamp(8.5px, 0.67vw, 12px);
  line-height: 1.36;
  text-shadow:
    0 0 5px rgba(255, 38, 24, 0.9),
    0 0 14px rgba(214, 37, 24, 0.72),
    0 0 28px rgba(214, 37, 24, 0.34);
}

.login-bridge-title,
.login-bridge-help-title {
  color: var(--amber);
  letter-spacing: 0.04em;
  text-shadow:
    0 0 7px rgba(242, 165, 31, 0.7),
    0 0 18px rgba(214, 37, 24, 0.42);
}

.login-bridge-note,
.login-bridge-help p {
  margin: 0;
}

.login-bridge-button {
  width: min(190px, 100%);
  min-height: 32px;
  justify-self: start;
  color: var(--amber);
  border-color: rgba(242, 165, 31, 0.55);
}

.login-bridge-help {
  padding: 10px;
  border: 1px solid rgba(214, 37, 24, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(24, 8, 6, 0.72), rgba(0, 0, 0, 0.48));
  box-shadow: inset 0 0 16px rgba(214, 37, 24, 0.08), 0 0 16px rgba(214, 37, 24, 0.1);
}

.login-bridge-help.is-hidden {
  display: none;
}

.login-core {
  position: relative;
  z-index: 2;
  width: min(440px, 37vw);
  display: grid;
  justify-items: center;
  gap: 26px;
  transform: translateY(3.5vh);
}

.amadeus-mark {
  position: relative;
  width: min(330px, 25vw);
  height: clamp(96px, 12vw, 150px);
  display: grid;
  place-items: center;
  isolation: isolate;
  pointer-events: none;
  transform: translateY(-5.5vh);
  margin-bottom: 10px;
  animation: logoGlowBreath 4.2s ease-in-out infinite;
}

.amadeus-mark::before {
  content: "";
  position: absolute;
  inset: 17% 6%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(242, 165, 31, 0.34), rgba(214, 37, 24, 0.17) 42%, transparent 72%);
  filter: blur(20px);
  opacity: 0.78;
  animation: markAuraBreath 4.2s ease-in-out infinite;
}

.amadeus-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 8px rgba(255, 187, 45, 0.76))
    drop-shadow(0 0 21px rgba(214, 37, 24, 0.46))
    drop-shadow(0 0 34px rgba(242, 165, 31, 0.25));
}

.login-form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  align-items: end;
  margin-top: 8px;
}

.login-form label {
  grid-column: 1;
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  min-height: 28px;
  color: var(--amber);
  font-size: 12px;
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.55), 0 0 18px rgba(214, 37, 24, 0.28);
}

.login-form span {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  border-radius: 7px 0 0 7px;
  background: rgba(146, 96, 28, 0.5);
  box-shadow:
    0 0 12px rgba(242, 165, 31, 0.16),
    0 0 22px rgba(214, 37, 24, 0.1),
    inset 0 0 9px rgba(242, 165, 31, 0.08);
}

.login-form input {
  width: 100%;
  height: 28px;
  border: 1px solid rgba(242, 165, 31, 0.46);
  border-radius: 0 7px 7px 0;
  outline: none;
  color: var(--text);
  background: rgba(0, 0, 0, 0.72);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.5);
  box-shadow:
    0 0 12px rgba(242, 165, 31, 0.16),
    0 0 24px rgba(214, 37, 24, 0.12),
    inset 0 0 12px rgba(242, 165, 31, 0.1);
}

.login-form input:focus {
  border-color: rgba(255, 180, 45, 0.78);
  box-shadow:
    0 0 0 2px rgba(242, 165, 31, 0.16),
    0 0 16px rgba(242, 165, 31, 0.36),
    0 0 32px rgba(214, 37, 24, 0.2),
    inset 0 0 14px rgba(242, 165, 31, 0.14);
}

.login-form button {
  grid-column: 2;
  grid-row: 1 / span 2;
  height: 62px;
  min-width: 96px;
  border: 1px solid rgba(242, 165, 31, 0.56);
  border-radius: 8px;
  color: var(--amber);
  background: rgba(0, 0, 0, 0.64);
  cursor: pointer;
  text-shadow: 0 0 9px rgba(242, 165, 31, 0.65), 0 0 18px rgba(214, 37, 24, 0.3);
  box-shadow:
    0 0 15px rgba(242, 165, 31, 0.2),
    0 0 32px rgba(214, 37, 24, 0.17),
    inset 0 0 14px rgba(242, 165, 31, 0.1);
}

.login-form button:hover {
  box-shadow:
    0 0 18px rgba(242, 165, 31, 0.34),
    0 0 44px rgba(214, 37, 24, 0.24),
    inset 0 0 16px rgba(242, 165, 31, 0.14);
}

.login-keypad {
  width: min(540px, 46vw);
  margin-top: 2px;
  padding: 10px;
  border: 1px solid rgba(214, 37, 24, 0.28);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(6, 8, 8, 0.58), rgba(0, 0, 0, 0.35));
  box-shadow:
    0 0 18px rgba(214, 37, 24, 0.12),
    inset 0 0 18px rgba(242, 165, 31, 0.05);
}

.keypad-targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 8px;
}

.keypad-targets button,
.keypad-keys button {
  min-height: 27px;
  border: 1px solid rgba(242, 165, 31, 0.38);
  border-radius: 7px;
  color: rgba(244, 215, 161, 0.86);
  background: rgba(0, 0, 0, 0.56);
  cursor: pointer;
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.45), 0 0 16px rgba(214, 37, 24, 0.22);
  box-shadow:
    0 0 10px rgba(242, 165, 31, 0.11),
    inset 0 0 8px rgba(242, 165, 31, 0.06);
}

.keypad-targets button.is-active,
.keypad-keys button.is-active {
  color: var(--amber);
  border-color: rgba(242, 165, 31, 0.74);
  background: rgba(67, 37, 6, 0.62);
  box-shadow:
    0 0 15px rgba(242, 165, 31, 0.24),
    0 0 26px rgba(214, 37, 24, 0.16),
    inset 0 0 10px rgba(242, 165, 31, 0.12);
}

.keypad-keys {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
}

.keypad-keys button[data-action="shift"],
.keypad-keys button[data-action="backspace"],
.keypad-keys button[data-action="space"],
.keypad-keys button[data-action="clear"] {
  color: var(--amber);
}

.keypad-keys button[data-action="space"] {
  grid-column: span 2;
}

.login-hint {
  min-height: 18px;
  margin: 0;
  color: rgba(214, 37, 24, 0.9);
  font-size: 12px;
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 38, 24, 0.86), 0 0 22px rgba(214, 37, 24, 0.5);
}

.desktop {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr minmax(320px, 440px);
  grid-template-rows: 1fr auto auto;
  gap: 18px;
  padding: 22px;
  opacity: 1;
  transform: scale(1);
  filter: none;
  transition: opacity 760ms ease, filter 760ms ease, transform 760ms ease;
}

.desktop::before,
.desktop::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.desktop::before {
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(242, 165, 31, 0.045) 46%, rgba(214, 37, 24, 0.065) 50%, transparent 58%),
    radial-gradient(circle at 58% 42%, rgba(242, 165, 31, 0.08), transparent 18%);
  mix-blend-mode: screen;
  opacity: 0.38;
  animation: desktopSweep 11s ease-in-out infinite;
}

.desktop::after {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(214, 37, 24, 0.018) 0 1px, transparent 1px 7px);
  opacity: 0.11;
  animation: signalNoise 1.9s steps(4, end) infinite;
}

.desktop.is-locked {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.018);
  filter: blur(5px) brightness(0.72);
}

.desktop.is-entering {
  animation: desktopBootIn 920ms ease-out both;
}

.desktop.is-entering .hud,
.desktop.is-entering .top-clock {
  animation: panelBootIn 760ms ease-out both, hudIdleBreath 6.4s ease-in-out 760ms infinite;
}

.desktop.is-entering .persona-video {
  animation: videoBootIn 920ms ease-out both, videoBreath 7s ease-in-out 920ms infinite;
}

.persona-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.grid-wall {
  position: absolute;
  inset: -20px;
  background:
    linear-gradient(rgba(140, 165, 165, 0.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(140, 165, 165, 0.08) 2px, transparent 2px),
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.08), transparent 25%);
  background-size: 74px 74px, 74px 74px, auto;
  filter: blur(0.2px);
  opacity: 0.28;
  animation: gridDrift 18s linear infinite;
}

.top-clock {
  position: fixed;
  top: 10px;
  right: 110px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 500px);
  height: 42px;
  min-height: 42px;
  padding: 6px 8px 6px 14px;
  color: var(--amber);
  background:
    linear-gradient(180deg, rgba(24, 13, 8, 0.68), rgba(0, 0, 0, 0.42));
  border: 1px solid rgba(214, 37, 24, 0.28);
  border-radius: 8px;
  box-shadow:
    inset 0 0 16px rgba(214, 37, 24, 0.08),
    0 0 18px rgba(214, 37, 24, 0.1),
    0 0 26px rgba(242, 165, 31, 0.06);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.72), 0 0 20px rgba(214, 37, 24, 0.36);
}

.clock-display {
  min-width: 104px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}

.clock-controls {
  display: flex;
  gap: 8px;
}

.clock-button {
  min-height: 30px;
  min-width: 108px;
  padding: 0 10px;
  border-color: rgba(242, 165, 31, 0.52);
  color: var(--amber);
  border-radius: 8px;
}

.persona-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(1.04) contrast(1.02);
  pointer-events: none;
  transition: filter 240ms ease, transform 360ms ease, opacity 240ms ease;
  animation: videoBreath 7s ease-in-out infinite;
}

.persona-view.has-live2d .persona-video,
.persona-view.has-live2d .portrait {
  opacity: 0;
}

.live2d-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 260ms ease, filter 260ms ease;
}

.live2d-stage.is-hidden {
  opacity: 0;
}

.live2d-stage canvas {
  width: 100%;
  height: 100%;
}

.live2d-stage-status {
  position: absolute;
  left: 50%;
  bottom: 15%;
  width: min(520px, 62vw);
  transform: translateX(-50%);
  padding: 10px 12px;
  border: 1px solid rgba(214, 37, 24, 0.34);
  border-radius: 8px;
  color: var(--amber);
  background: rgba(0, 0, 0, 0.42);
  text-align: center;
  font-size: 12px;
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.58), 0 0 18px rgba(214, 37, 24, 0.28);
}

.live2d-stage-status:empty {
  display: none;
}

.live2d-stage[data-state="thinking"] {
  filter: drop-shadow(0 0 18px rgba(242, 165, 31, 0.18));
}

.live2d-stage[data-state="speaking"] {
  filter: drop-shadow(0 0 24px rgba(242, 165, 31, 0.28));
}

.live2d-stage[data-state="error"] {
  filter: drop-shadow(0 0 24px rgba(255, 95, 78, 0.42));
}

body[data-amadeus-state="thinking"] .persona-video {
  filter: saturate(1.18) contrast(1.08) brightness(1.05);
  animation-duration: 3.2s;
}

body[data-amadeus-state="speaking"] .persona-video {
  filter: saturate(1.24) contrast(1.08) brightness(1.08);
  animation-duration: 2.4s;
}

body[data-amadeus-state="error"] .persona-video {
  filter: saturate(0.9) contrast(1.16) brightness(0.92) hue-rotate(-8deg);
}

.portrait {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(54vh, 34vw);
  min-width: 310px;
  height: min(86vh, 850px);
  transform: translateX(-50%);
  display: grid;
  align-items: end;
  justify-items: center;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  opacity: 0;
}

#personaImage {
  position: absolute;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transform-origin: 50% 88%;
  animation: idleFloat 5s ease-in-out infinite;
}

#personaImage.has-image {
  opacity: 1;
}

.fallback-portrait {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 88%;
  animation: idleFloat 5s ease-in-out infinite;
}

.portrait.has-custom {
  opacity: 1;
}

.portrait.has-custom .fallback-portrait {
  opacity: 0;
}

.hair-back {
  position: absolute;
  left: 24%;
  top: 3%;
  width: 52%;
  height: 58%;
  border-radius: 48% 48% 36% 36%;
  background: linear-gradient(90deg, #2b120b, #a84416 46%, #3b160d);
  box-shadow: inset 16px 0 rgba(0, 0, 0, 0.28), inset -20px 0 rgba(255, 135, 28, 0.22);
}

.head {
  position: absolute;
  left: 30%;
  top: 16%;
  width: 40%;
  height: 24%;
  border-radius: 44% 44% 48% 48%;
  background: linear-gradient(#f1d9bb, #dfbd97);
  box-shadow: inset -8px -10px rgba(117, 68, 42, 0.16);
}

.bang {
  position: absolute;
  top: -14%;
  width: 28%;
  height: 58%;
  background: linear-gradient(#b94b18, #5b210e);
  clip-path: polygon(0 0, 100% 0, 58% 100%);
}

.bang-a {
  left: 13%;
  transform: rotate(9deg);
}

.bang-b {
  left: 34%;
  height: 68%;
}

.bang-c {
  right: 12%;
  transform: rotate(-12deg);
}

.eye {
  position: absolute;
  top: 46%;
  width: 16%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, #e8dbff 0 18%, #8d7bb7 19% 48%, #17111e 49%);
  box-shadow: 0 0 9px rgba(210, 198, 255, 0.7);
}

.eye-left {
  left: 25%;
}

.eye-right {
  right: 25%;
}

.mouth {
  position: absolute;
  left: 46%;
  bottom: 19%;
  width: 8%;
  height: 2%;
  border-radius: 999px;
  background: #8d543d;
  transition: height 120ms ease, transform 120ms ease;
}

.hair-side {
  position: absolute;
  right: 20%;
  top: 16%;
  width: 18%;
  height: 56%;
  border-radius: 50% 36% 62% 48%;
  background: linear-gradient(95deg, #9d3e14, #40170c);
  transform: rotate(-7deg);
}

.coat {
  position: absolute;
  left: 18%;
  bottom: 0;
  width: 64%;
  height: 58%;
  background: linear-gradient(100deg, #e8f1ea, #f8fff9 48%, #c8ded4);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  box-shadow: inset -20px 0 rgba(67, 108, 93, 0.15);
}

.shirt {
  position: absolute;
  left: 37%;
  top: 0;
  width: 26%;
  height: 48%;
  background: linear-gradient(#f7eee6, #e5dad2);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
}

.tie {
  position: absolute;
  left: 46%;
  top: 3%;
  width: 8%;
  height: 56%;
  background: linear-gradient(#df2d28, #8f0d0e);
  clip-path: polygon(50% 0, 100% 12%, 72% 100%, 28% 100%, 0 12%);
}

.scanline {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent, rgba(255, 255, 255, 0.16), transparent),
    linear-gradient(90deg, transparent, rgba(242, 165, 31, 0.08), transparent);
  transform: translateY(-100%);
  animation: scan 4.8s linear infinite;
  opacity: 0.18;
}

.portrait[data-state="thinking"] .fallback-portrait,
.portrait[data-state="thinking"] #personaImage {
  animation-duration: 2.2s;
  filter: drop-shadow(0 0 18px rgba(242, 165, 31, 0.24));
}

.portrait[data-state="speaking"] .fallback-portrait,
.portrait[data-state="speaking"] #personaImage {
  animation-duration: 2.6s;
  filter: drop-shadow(0 0 22px rgba(242, 165, 31, 0.32));
}

.portrait[data-state="speaking"] .mouth {
  height: 8%;
  transform: scaleX(1.4);
}

.portrait[data-state="error"] {
  filter: drop-shadow(0 0 22px rgba(255, 80, 56, 0.7));
}

.hud {
  position: relative;
  z-index: 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(16, 18, 18, 0.82), rgba(5, 7, 7, 0.74)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px),
    var(--panel);
  box-shadow:
    inset 0 0 24px rgba(214, 37, 24, 0.08),
    inset 0 0 1px rgba(242, 165, 31, 0.18),
    0 12px 34px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(7px);
  text-shadow: 0 0 7px rgba(214, 37, 24, 0.5), 0 0 18px rgba(214, 37, 24, 0.22);
  transition: border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease;
  animation: hudIdleBreath 6.4s ease-in-out infinite;
}

body[data-amadeus-state="thinking"] .hud {
  border-color: rgba(242, 165, 31, 0.34);
  animation-duration: 3.2s;
}

body[data-amadeus-state="speaking"] .hud {
  border-color: rgba(242, 165, 31, 0.46);
  box-shadow:
    inset 0 0 30px rgba(214, 37, 24, 0.11),
    inset 0 0 1px rgba(242, 165, 31, 0.24),
    0 12px 34px rgba(0, 0, 0, 0.36),
    0 0 28px rgba(242, 165, 31, 0.08);
  animation-duration: 2.4s;
}

body[data-amadeus-state="error"] .hud {
  border-color: rgba(255, 95, 78, 0.46);
  filter: drop-shadow(0 0 10px rgba(214, 37, 24, 0.18));
}

.hud::before,
.hud::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0.74;
}

.hud::before {
  left: -1px;
  top: -1px;
  border-top: 1px solid rgba(242, 165, 31, 0.42);
  border-left: 1px solid rgba(242, 165, 31, 0.42);
  border-radius: 8px 0 0 0;
}

.hud::after {
  right: -1px;
  bottom: -1px;
  border-right: 1px solid rgba(242, 165, 31, 0.34);
  border-bottom: 1px solid rgba(242, 165, 31, 0.34);
  border-radius: 0 0 8px 0;
}

.session-hud {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding: 16px;
  display: grid;
  gap: 12px;
}

.hud-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.hud-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.label {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 38, 24, 0.86), 0 0 22px rgba(214, 37, 24, 0.48);
}

.session-hud h1 {
  margin: 0;
  color: var(--amber);
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.1;
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.62), 0 0 22px rgba(214, 37, 24, 0.26);
  cursor: pointer;
}

.status-line {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-shadow: 0 0 7px rgba(214, 37, 24, 0.52), 0 0 18px rgba(214, 37, 24, 0.24);
  transition: color 220ms ease, text-shadow 220ms ease;
}

body[data-amadeus-state="thinking"] .status-line,
body[data-amadeus-state="speaking"] .status-line {
  color: var(--amber);
  text-shadow: 0 0 10px rgba(242, 165, 31, 0.7), 0 0 24px rgba(214, 37, 24, 0.32);
}

.connection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  text-shadow: 0 0 7px rgba(214, 37, 24, 0.52), 0 0 18px rgba(214, 37, 24, 0.22);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
  animation: dotPulse 2.8s ease-in-out infinite;
}

body[data-amadeus-state="thinking"] .dot {
  animation-duration: 1.1s;
}

body[data-amadeus-state="speaking"] .dot {
  animation-duration: 0.68s;
  box-shadow: 0 0 16px rgba(242, 165, 31, 1), 0 0 28px rgba(214, 37, 24, 0.38);
}

.dot.is-ready {
  background: var(--good);
  box-shadow: 0 0 12px var(--good);
}

.dot.is-error {
  background: var(--bad);
  box-shadow: 0 0 12px var(--bad);
}

.persona-config {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(214, 37, 24, 0.22);
}

.live2d-config {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(214, 37, 24, 0.22);
}

.live2d-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.live2d-status-line {
  min-height: 28px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-shadow: 0 0 7px rgba(214, 37, 24, 0.5), 0 0 16px rgba(214, 37, 24, 0.2);
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--red);
  font-size: 12px;
  text-shadow: 0 0 8px rgba(255, 38, 24, 0.8), 0 0 18px rgba(214, 37, 24, 0.36);
}

.mini-button {
  min-height: 26px;
  min-width: 54px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 7px;
}

#personaPromptInput {
  width: 100%;
  min-height: 112px;
  max-height: 180px;
  font-size: 12px;
  line-height: 1.45;
  border-radius: 8px;
}

#personaPromptInput.is-collapsed,
.persona-save.is-collapsed {
  display: none;
}

.persona-toggle,
.persona-save {
  width: 100%;
  min-height: 34px;
  border-radius: 8px;
  color: var(--amber);
}

.persona-save {
  min-height: 32px;
  color: var(--good);
}

.console {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: end;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  width: 100%;
  height: min(62vh, 620px);
  min-height: 420px;
  max-height: calc(100vh - 96px);
  padding: 24px 14px 14px;
  margin-bottom: -74px;
  overflow: hidden;
}

.console.is-floating {
  position: fixed;
  z-index: 6;
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  margin-bottom: 0;
}

.console-drag-handle {
  position: absolute;
  top: 6px;
  left: 14px;
  right: 42px;
  height: 10px;
  cursor: move;
  touch-action: none;
  opacity: 0.78;
  border-top: 1px solid rgba(242, 165, 31, 0.28);
  border-bottom: 1px solid rgba(214, 37, 24, 0.2);
  background:
    linear-gradient(90deg, transparent, rgba(242, 165, 31, 0.36), transparent) center / 120px 1px no-repeat,
    rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.console-resize-start-handle,
.console-resize-handle {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  touch-action: none;
}

.console-resize-start-handle {
  top: 8px;
  left: 8px;
  cursor: nwse-resize;
  border-left: 1px solid rgba(242, 165, 31, 0.62);
  border-top: 1px solid rgba(242, 165, 31, 0.62);
  border-radius: 8px 0 0 0;
  box-shadow: -4px -4px 12px rgba(242, 165, 31, 0.08);
}

.console-resize-handle {
  right: 8px;
  bottom: 8px;
  cursor: nwse-resize;
  border-right: 1px solid rgba(242, 165, 31, 0.62);
  border-bottom: 1px solid rgba(242, 165, 31, 0.62);
  border-radius: 0 0 8px 0;
  box-shadow: 4px 4px 12px rgba(242, 165, 31, 0.08);
}

.session-tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.session-tools .mini-button,
.session-import .mini-button {
  min-width: 0;
  color: var(--amber);
}

.session-tools .mini-button {
  min-height: 30px;
  border-color: rgba(242, 165, 31, 0.34);
  background:
    linear-gradient(180deg, rgba(40, 18, 8, 0.45), rgba(0, 0, 0, 0.58));
}

.session-tools .mini-button.is-active {
  color: #fff0c9;
  border-color: rgba(242, 165, 31, 0.78);
  box-shadow:
    0 0 16px rgba(242, 165, 31, 0.24),
    inset 0 0 12px rgba(242, 165, 31, 0.14);
}

.console-tools .mini-button.is-active {
  color: #fff0c9;
  border-color: rgba(242, 165, 31, 0.78);
  box-shadow:
    0 0 14px rgba(242, 165, 31, 0.22),
    inset 0 0 10px rgba(242, 165, 31, 0.12);
}

.session-import {
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid rgba(214, 37, 24, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
}

.record-manager-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  max-height: 180px;
  overflow: auto;
}

.record-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 58px;
  gap: 6px;
}

.record-item button,
.record-empty {
  min-height: 28px;
  border-radius: 8px;
  font-size: 11px;
}

.record-main {
  overflow: hidden;
  padding: 0 8px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid rgba(214, 37, 24, 0.22);
  background: rgba(0, 0, 0, 0.28);
}

.session-import.is-hidden {
  display: none;
}

.config-field.is-hidden {
  display: none;
}

.archive-select {
  height: 30px;
  min-width: 0;
  border: 1px solid rgba(214, 37, 24, 0.48);
  border-radius: 8px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.58);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.45), 0 0 16px rgba(214, 37, 24, 0.22);
  box-shadow: 0 0 10px rgba(214, 37, 24, 0.12), inset 0 0 10px rgba(214, 37, 24, 0.08);
}

.console-tools {
  display: grid;
  grid-template-columns: 44px 44px 72px 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.font-select {
  height: 30px;
  min-width: 0;
  border: 1px solid rgba(214, 37, 24, 0.48);
  border-radius: 8px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.58);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.45), 0 0 16px rgba(214, 37, 24, 0.22);
  box-shadow: 0 0 10px rgba(214, 37, 24, 0.12), inset 0 0 10px rgba(214, 37, 24, 0.08);
}

.archive-select:focus,
.font-select:focus,
.config-field input:focus,
.config-field select:focus,
.custom-time input:focus {
  border-color: rgba(242, 165, 31, 0.78);
  outline: none;
  box-shadow:
    0 0 0 2px rgba(242, 165, 31, 0.1),
    0 0 18px rgba(242, 165, 31, 0.16),
    inset 0 0 12px rgba(242, 165, 31, 0.12);
}

.log {
  overflow: auto;
  padding: 4px 4px 0 0;
  scrollbar-color: rgba(214, 37, 24, 0.45) transparent;
}

.log::-webkit-scrollbar,
#personaPromptInput::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  width: 8px;
}

.log::-webkit-scrollbar-thumb,
#personaPromptInput::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(rgba(242, 165, 31, 0.58), rgba(214, 37, 24, 0.54));
}

.message {
  max-width: 96%;
  margin: 0 0 12px;
  padding: 10px 11px 11px;
  border-left: 2px solid rgba(214, 37, 24, 0.48);
  border-radius: 0 8px 8px 0;
  background:
    linear-gradient(90deg, rgba(214, 37, 24, 0.08), transparent 32%),
    rgba(0, 0, 0, 0.36);
  box-shadow: inset 0 0 12px rgba(214, 37, 24, 0.05);
  transform-origin: 16px 50%;
  animation: messageArrive 260ms ease-out both;
}

.message.user {
  margin-left: auto;
  border-left-color: rgba(242, 165, 31, 0.7);
  border-radius: 8px 0 0 8px;
  border-right: 2px solid rgba(242, 165, 31, 0.54);
  border-left-color: transparent;
  background:
    linear-gradient(270deg, rgba(242, 165, 31, 0.1), transparent 36%),
    rgba(0, 0, 0, 0.38);
  transform-origin: calc(100% - 16px) 50%;
}

.message.assistant {
  border-left-color: rgba(52, 131, 62, 0.78);
  background:
    linear-gradient(90deg, rgba(52, 131, 62, 0.1), transparent 36%),
    rgba(0, 0, 0, 0.38);
}

body[data-amadeus-state="thinking"] .message.assistant:last-child {
  box-shadow:
    inset 0 0 14px rgba(52, 131, 62, 0.1),
    0 0 16px rgba(52, 131, 62, 0.08);
}

body[data-amadeus-state="speaking"] .message.assistant:last-child {
  box-shadow:
    inset 0 0 16px rgba(242, 165, 31, 0.08),
    0 0 18px rgba(242, 165, 31, 0.1);
}

.message-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--red);
  font-size: calc(var(--message-font-size) * 0.84);
  text-shadow: 0 0 8px rgba(255, 38, 24, 0.86), 0 0 20px rgba(214, 37, 24, 0.42);
}

.message-avatar {
  display: none;
  width: calc(var(--message-font-size) * 1.85);
  height: calc(var(--message-font-size) * 1.85);
  place-items: center;
  border: 1px solid rgba(242, 165, 31, 0.4);
  border-radius: 999px;
  color: var(--amber);
  background: rgba(0, 0, 0, 0.58);
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 12px rgba(242, 165, 31, 0.12), inset 0 0 10px rgba(214, 37, 24, 0.08);
  cursor: pointer;
  font-size: calc(var(--message-font-size) * 0.78);
  line-height: 1;
  overflow: hidden;
  user-select: none;
}

.message-avatar.has-image {
  color: transparent;
}

.message-time {
  color: rgba(226, 192, 147, 0.62);
  font-size: calc(var(--message-font-size) * 0.76);
  text-shadow: none;
}

.message-name {
  cursor: pointer;
}

.message-body {
  color: #e2c093;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
  font-size: var(--message-font-size);
  text-shadow: 0 0 6px rgba(242, 165, 31, 0.24), 0 0 16px rgba(214, 37, 24, 0.18);
}

.console.is-bubble-mode .message {
  display: grid;
  max-width: 82%;
  width: fit-content;
  min-width: 88px;
  padding: 10px 13px;
  border: 1px solid rgba(214, 37, 24, 0.36);
  border-radius: 16px 16px 16px 4px;
  background:
    linear-gradient(180deg, rgba(28, 14, 10, 0.76), rgba(4, 7, 7, 0.76)),
    rgba(0, 0, 0, 0.54);
  animation-name: bubbleArrive;
}

.console.is-bubble-mode .message.user {
  justify-items: end;
  border-radius: 16px 16px 4px 16px;
  border-color: rgba(242, 165, 31, 0.48);
  background:
    linear-gradient(180deg, rgba(72, 43, 10, 0.5), rgba(12, 9, 5, 0.76)),
    rgba(0, 0, 0, 0.54);
}

.console.is-bubble-mode .message.assistant {
  border-color: rgba(52, 131, 62, 0.58);
  background:
    linear-gradient(180deg, rgba(19, 49, 24, 0.48), rgba(4, 8, 5, 0.76)),
    rgba(0, 0, 0, 0.54);
}

.console.is-bubble-mode .message-meta {
  display: grid;
  grid-template-columns: calc(var(--message-font-size) * 1.85) auto auto;
  gap: 6px;
  margin-bottom: 7px;
}

.console.is-bubble-mode .message.user .message-meta {
  grid-template-columns: auto auto calc(var(--message-font-size) * 1.85);
}

.console.is-bubble-mode .message.user .message-avatar {
  order: 3;
}

.console.is-bubble-mode .message-avatar {
  display: grid;
}

.console.is-bubble-mode .message-body {
  max-width: 100%;
}

.composer {
  display: grid;
  grid-template-columns: 54px 54px 1fr 64px;
  gap: 8px;
  align-items: end;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(214, 37, 24, 0.22);
}

.attachment-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
  margin-top: 10px;
}

.attachment-tray.is-empty {
  display: none;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(214, 37, 24, 0.38);
  color: var(--muted);
  background: rgba(0, 0, 0, 0.48);
  font-size: 12px;
  text-shadow: 0 0 7px rgba(214, 37, 24, 0.42);
}

.attachment-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-chip button {
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  color: var(--red);
  border-radius: 6px;
}

textarea {
  min-height: 42px;
  max-height: 132px;
  resize: none;
  padding: 12px;
  border: 1px solid rgba(214, 37, 24, 0.35);
  border-radius: 8px;
  outline: none;
  color: var(--text);
  background: rgba(0, 0, 0, 0.62);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.45), 0 0 16px rgba(214, 37, 24, 0.22);
  box-shadow: inset 0 0 10px rgba(214, 37, 24, 0.08);
}

textarea:focus {
  border-color: rgba(242, 165, 31, 0.72);
}

button {
  position: relative;
  overflow: hidden;
  min-height: 42px;
  border: 1px solid rgba(214, 37, 24, 0.48);
  border-radius: 8px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(23, 12, 8, 0.66), rgba(0, 0, 0, 0.58));
  cursor: pointer;
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.55), 0 0 16px rgba(214, 37, 24, 0.28);
  box-shadow: 0 0 10px rgba(214, 37, 24, 0.12), inset 0 0 10px rgba(214, 37, 24, 0.08);
  transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

button::after {
  content: "";
  position: absolute;
  inset: 50%;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(255, 229, 150, 0.48) 0 8%, rgba(242, 165, 31, 0.26) 9% 26%, rgba(214, 37, 24, 0.12) 27% 46%, transparent 48%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
}

button.is-activating::after {
  animation: buttonSignal 360ms ease-out both;
}

button:hover {
  border-color: rgba(242, 165, 31, 0.74);
  color: var(--amber);
  box-shadow:
    0 0 16px rgba(242, 165, 31, 0.18),
    0 0 26px rgba(214, 37, 24, 0.16),
    inset 0 0 12px rgba(242, 165, 31, 0.1);
}

button:active {
  transform: translateY(1px);
  box-shadow:
    0 0 20px rgba(242, 165, 31, 0.24),
    0 0 38px rgba(214, 37, 24, 0.2),
    inset 0 0 18px rgba(242, 165, 31, 0.16);
}

button:disabled {
  cursor: wait;
  opacity: 0.54;
}

.icon-button {
  min-width: 54px;
  padding: 0 8px;
  font-size: 12px;
}

.mic-button.is-recording {
  color: #fff;
  border-color: var(--bad);
  background: rgba(214, 37, 24, 0.34);
  box-shadow: 0 0 18px rgba(214, 37, 24, 0.42);
}

.quick-actions {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
}

.pomodoro-panel {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.timer-display {
  color: var(--amber);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 10px rgba(242, 165, 31, 0.74), 0 0 24px rgba(214, 37, 24, 0.34);
}

.timer-presets,
.timer-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.timer-presets button,
.timer-controls button {
  min-height: 32px;
  color: var(--muted);
}

.custom-time {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  min-height: 32px;
  color: var(--amber);
  font-size: 12px;
}

.custom-time span {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px 0 0 8px;
  background: rgba(146, 96, 28, 0.42);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.55), 0 0 18px rgba(214, 37, 24, 0.28);
}

.custom-time input {
  width: 100%;
  height: 32px;
  border: 1px solid rgba(242, 165, 31, 0.46);
  border-radius: 0 8px 8px 0;
  outline: none;
  color: var(--text);
  background: rgba(0, 0, 0, 0.62);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.45), 0 0 16px rgba(214, 37, 24, 0.22);
  box-shadow: inset 0 0 10px rgba(214, 37, 24, 0.08);
}

.api-config-panel {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(214, 37, 24, 0.14), transparent 34%),
    rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(4px);
}

.api-config-panel.is-hidden {
  display: none;
}

.name-editor-panel {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(242, 165, 31, 0.14), transparent 34%),
    rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}

.name-editor-panel.is-hidden {
  display: none;
}

.name-editor-card {
  width: min(360px, calc(100vw - 40px));
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(214, 37, 24, 0.46);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(11, 14, 14, 0.98), rgba(3, 5, 5, 0.95)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px);
  box-shadow:
    0 0 34px rgba(214, 37, 24, 0.22),
    inset 0 0 26px rgba(214, 37, 24, 0.08);
}

.name-editor-card h2 {
  margin: 0;
  color: var(--red);
  font-size: 13px;
  text-shadow: 0 0 8px rgba(255, 38, 24, 0.86), 0 0 22px rgba(214, 37, 24, 0.48);
}

.name-editor-card input {
  height: 38px;
  border: 1px solid rgba(242, 165, 31, 0.52);
  border-radius: 8px;
  outline: none;
  padding: 0 10px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.68);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.45), 0 0 16px rgba(214, 37, 24, 0.22);
}

.name-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.name-editor-actions button {
  min-height: 34px;
  border: 1px solid rgba(214, 37, 24, 0.64);
  border-radius: 8px;
  color: var(--amber);
  background: rgba(0, 0, 0, 0.52);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.5), 0 0 18px rgba(214, 37, 24, 0.24);
}

.api-config-card {
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(214, 37, 24, 0.46);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(11, 14, 14, 0.98), rgba(3, 5, 5, 0.95)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px);
  box-shadow:
    0 0 34px rgba(214, 37, 24, 0.22),
    0 0 60px rgba(242, 165, 31, 0.06),
    inset 0 0 26px rgba(214, 37, 24, 0.08);
}

.api-config-title {
  margin-bottom: 4px;
}

.sub-title {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(214, 37, 24, 0.22);
}

.config-field {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  min-height: 34px;
  color: var(--amber);
  font-size: 12px;
}

.config-field span {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px 0 0 8px;
  background: rgba(146, 96, 28, 0.42);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.55), 0 0 18px rgba(214, 37, 24, 0.28);
}

.config-field input,
.config-field select {
  width: 100%;
  height: 34px;
  min-width: 0;
  border: 1px solid rgba(242, 165, 31, 0.46);
  border-radius: 0 8px 8px 0;
  outline: none;
  color: var(--text);
  background: rgba(0, 0, 0, 0.66);
  text-shadow: 0 0 8px rgba(242, 165, 31, 0.45), 0 0 16px rgba(214, 37, 24, 0.22);
  box-shadow: inset 0 0 10px rgba(214, 37, 24, 0.08);
}

.checkbox-field input {
  width: 34px;
  justify-self: start;
  accent-color: var(--amber);
}

.template-field {
  align-items: start;
}

.template-field span {
  height: 76px;
}

.template-field textarea {
  min-height: 76px;
  max-height: 140px;
  font-size: 12px;
}

.config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.compact-field {
  grid-template-columns: 74px 1fr;
}

.config-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.bridge-actions {
  grid-template-columns: 1fr 1fr;
}

.bridge-status-panel {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(214, 37, 24, 0.24);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
}

.bridge-status-panel div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.bridge-status-panel span {
  color: var(--red);
  font-size: 11px;
  text-shadow: 0 0 8px rgba(214, 37, 24, 0.5);
}

.bridge-status-panel strong {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-actions button {
  min-height: 36px;
  color: var(--amber);
}

.config-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.quick-actions button {
  min-width: 0;
  min-height: 34px;
  color: var(--muted);
  font-size: 12px;
  text-shadow: 0 0 7px rgba(214, 37, 24, 0.55), 0 0 18px rgba(214, 37, 24, 0.24);
}

#sendButton,
#apiConnectButton,
#autoBridgeButton,
.persona-save,
#timerStartButton {
  color: var(--amber);
  border-color: rgba(242, 165, 31, 0.48);
}

#sendButton:hover,
#apiConnectButton:hover,
#autoBridgeButton:hover,
.persona-save:hover,
#timerStartButton:hover {
  color: #fff0c9;
  border-color: rgba(242, 165, 31, 0.86);
}

@keyframes idleFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.006);
  }
}

@keyframes dotPulse {
  0%,
  100% {
    opacity: 0.76;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.16);
  }
}

@keyframes desktopSweep {
  0%,
  100% {
    transform: translateX(-18%) translateY(0);
    opacity: 0.25;
  }
  50% {
    transform: translateX(18%) translateY(-2%);
    opacity: 0.45;
  }
}

@keyframes signalNoise {
  0%,
  100% {
    opacity: 0.08;
    transform: translate(0, 0);
  }
  25% {
    opacity: 0.14;
    transform: translate(1px, -1px);
  }
  50% {
    opacity: 0.1;
    transform: translate(-1px, 0);
  }
  75% {
    opacity: 0.16;
    transform: translate(0, 1px);
  }
}

@keyframes gridDrift {
  to {
    background-position: 74px 74px, 74px 74px, center;
  }
}

@keyframes videoBreath {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.98;
  }
  50% {
    transform: scale(1.006);
    opacity: 1;
  }
}

@keyframes hudIdleBreath {
  0%,
  100% {
    box-shadow:
      inset 0 0 24px rgba(214, 37, 24, 0.08),
      inset 0 0 1px rgba(242, 165, 31, 0.18),
      0 12px 34px rgba(0, 0, 0, 0.36);
  }
  50% {
    box-shadow:
      inset 0 0 28px rgba(214, 37, 24, 0.12),
      inset 0 0 1px rgba(242, 165, 31, 0.26),
      0 12px 34px rgba(0, 0, 0, 0.36),
      0 0 18px rgba(242, 165, 31, 0.05);
  }
}

@keyframes messageArrive {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.988);
    filter: brightness(1.4);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes bubbleArrive {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    filter: brightness(1.45);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes loginSystemSweep {
  0% {
    opacity: 0;
    transform: translateX(-28%) scale(1.02);
  }
  24% {
    opacity: 1;
  }
  68% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(28%) scale(1.05);
  }
}

@keyframes loginCodeConfirm {
  0%,
  100% {
    opacity: 0.85;
    filter: brightness(1);
  }
  20%,
  52% {
    opacity: 1;
    filter: brightness(1.55);
  }
  34%,
  70% {
    opacity: 0.58;
    filter: brightness(0.9);
  }
}

@keyframes loginCoreRelease {
  0% {
    transform: translateY(3.5vh) scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  32% {
    transform: translateY(2.8vh) scale(1.012);
    opacity: 1;
    filter: brightness(1.4);
  }
  100% {
    transform: translateY(1.2vh) scale(0.982);
    opacity: 0;
    filter: brightness(1.8) blur(2px);
  }
}

@keyframes authHintPulse {
  0%,
  100% {
    text-shadow: 0 0 8px rgba(242, 165, 31, 0.7), 0 0 20px rgba(214, 37, 24, 0.3);
  }
  45% {
    text-shadow: 0 0 14px rgba(255, 230, 160, 1), 0 0 38px rgba(242, 165, 31, 0.54), 0 0 60px rgba(214, 37, 24, 0.36);
  }
}

@keyframes desktopBootIn {
  0% {
    opacity: 0;
    transform: scale(1.018);
    filter: blur(5px) brightness(0.72);
  }
  48% {
    opacity: 0.78;
    filter: blur(1.5px) brightness(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

@keyframes panelBootIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
    filter: brightness(1.55) blur(1.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}

@keyframes videoBootIn {
  0% {
    opacity: 0;
    transform: scale(1.02);
    filter: blur(5px) saturate(0.8) brightness(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1.04) contrast(1.02);
  }
}

@keyframes buttonSignal {
  0% {
    inset: 50%;
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(0.18);
  }
  100% {
    inset: -18%;
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes logoGlowBreath {
  0%,
  100% {
    filter:
      drop-shadow(0 0 6px rgba(255, 187, 45, 0.58))
      drop-shadow(0 0 15px rgba(214, 37, 24, 0.34))
      drop-shadow(0 0 26px rgba(242, 165, 31, 0.2));
  }
  50% {
    filter:
      drop-shadow(0 0 16px rgba(255, 205, 72, 0.98))
      drop-shadow(0 0 40px rgba(214, 37, 24, 0.7))
      drop-shadow(0 0 70px rgba(242, 165, 31, 0.48));
  }
}

@keyframes markAuraBreath {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes scan {
  to {
    transform: translateY(100%);
  }
}

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

@media (max-width: 980px) {
  body {
    overflow: auto;
  }

  .desktop {
    position: relative;
    min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto auto;
    padding: 14px;
    padding-top: 76px;
  }

  .top-clock {
    left: 14px;
    right: 98px;
    max-width: none;
  }

  .desktop-lang {
    right: 14px;
  }

  .persona-view {
    position: relative;
    min-height: 560px;
    grid-row: 2;
  }

  .session-hud,
  .console,
  .pomodoro-panel,
  .quick-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .console {
    height: 560px;
    min-height: 420px;
    margin-bottom: 0;
  }

  .portrait {
    width: min(92vw, 720px);
    min-width: 0;
    height: 620px;
  }
}