:root {
  --ink: #28213a;
  --ink-soft: #685f78;
  --paper: #fffdf7;
  --cream: #fff5d9;
  --mango: #ffca3a;
  --coral: #ff6b4a;
  --coral-dark: #d9472d;
  --aqua: #58d9d0;
  --aqua-dark: #147f82;
  --berry: #a94fd0;
  --leaf: #79c94b;
  --line: #332a48;
  --accent-ink: #28213a;
  --buddy-bg: #ffca3a;
  --pet-bubble: #ffffff;
  --header-bg: rgba(255, 253, 247, 0.94);
  --composer-bg: rgba(255, 253, 247, 0.96);
  --own-alt: #ff9ad5;
  --shadow: 0 16px 0 rgba(51, 42, 72, 0.09), 0 24px 50px rgba(60, 43, 78, 0.15);
}

html[data-theme="dark"] {
  --ink: #fff8ff;
  --ink-soft: #c8bfd4;
  --paper: #171421;
  --cream: #262135;
  --mango: #ffd24a;
  --coral: #ff765c;
  --coral-dark: #ff927d;
  --aqua: #54ddd4;
  --aqua-dark: #86eee7;
  --berry: #cf7aef;
  --leaf: #8bd85c;
  --line: #f8efff;
  --buddy-bg: #3b2754;
  --pet-bubble: #242033;
  --header-bg: rgba(23, 20, 33, 0.94);
  --composer-bg: rgba(23, 20, 33, 0.96);
  --own-alt: #d77db8;
  --shadow: 0 16px 0 rgba(0, 0, 0, 0.28), 0 24px 55px rgba(0, 0, 0, 0.42);
}

html[data-theme="retro"] {
  --ink: #f5e9df;
  --ink-soft: #c8a98b;
  --paper: #1b120c;
  --cream: #241609;
  --mango: #9c704f;
  --coral: #c1522b;
  --coral-dark: #d96a41;
  --aqua: #80634e;
  --aqua-dark: #c8a98b;
  --berry: #6e4935;
  --leaf: #9a7b5f;
  --line: #4a3325;
  --accent-ink: #1b120c;
  --buddy-bg: #241609;
  --pet-bubble: #3a2818;
  --header-bg: rgba(27, 18, 12, 0.96);
  --composer-bg: rgba(27, 18, 12, 0.96);
  --own-alt: #a74a2a;
  --shadow: none;
}

* { box-sizing: border-box; }
html { background: var(--cream); color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  min-width: 320px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: var(--ink);
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  background:
    radial-gradient(circle at 8% 15%, rgba(255, 202, 58, 0.88) 0 6%, transparent 6.2%),
    radial-gradient(circle at 94% 82%, rgba(88, 217, 208, 0.65) 0 9%, transparent 9.2%),
    linear-gradient(135deg, #fff8de 0%, #ffe7b8 48%, #ffc5b8 100%);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 8% 15%, rgba(207, 122, 239, 0.26) 0 6%, transparent 6.2%),
    radial-gradient(circle at 94% 82%, rgba(84, 221, 212, 0.22) 0 9%, transparent 9.2%),
    linear-gradient(135deg, #100e18 0%, #22162f 52%, #321b32 100%);
}

html[data-theme="retro"] body {
  background: #1b120c;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--aqua-dark); outline-offset: 3px; }

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

#chat-screen {
  width: min(1180px, calc(100% - 48px));
  height: min(860px, calc(100dvh - 48px));
  margin: 24px auto;
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.65fr);
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 34px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.buddy-panel {
  position: relative;
  min-width: 0;
  padding: clamp(28px, 4vw, 52px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 18% 76%, rgba(255, 255, 255, 0.72) 0 4px, transparent 5px),
    radial-gradient(circle at 25% 83%, rgba(255, 255, 255, 0.72) 0 4px, transparent 5px),
    radial-gradient(circle at 13% 90%, rgba(255, 255, 255, 0.72) 0 4px, transparent 5px),
    var(--buddy-bg);
}

.buddy-panel::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -105px;
  top: 18%;
  border: 28px solid rgba(255, 107, 74, 0.55);
  border-radius: 50%;
}

.eyebrow {
  display: inline-block;
  width: fit-content;
  margin-bottom: 14px;
  padding: 7px 12px 6px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--line);
}

.buddy-copy { position: relative; z-index: 1; }
.buddy-copy h2 { max-width: 360px; margin: 0; font-size: clamp(2.25rem, 4.5vw, 4.7rem); line-height: 0.9; letter-spacing: -0.065em; }
.buddy-copy p { max-width: 300px; margin: 20px 0 0; font-family: system-ui, sans-serif; font-size: 1rem; font-weight: 650; line-height: 1.5; }

.mascot-stage { position: relative; z-index: 1; min-height: 270px; display: grid; place-items: center; }
.mascot-stage::before { content: ""; position: absolute; width: min(24vw, 280px); aspect-ratio: 1; border-radius: 45% 55% 63% 37% / 46% 37% 63% 54%; background: var(--coral); transform: rotate(-8deg); }
.mascot-stage img { position: relative; z-index: 2; width: min(24vw, 290px); max-height: 320px; object-fit: contain; filter: drop-shadow(0 14px 0 rgba(51, 42, 72, 0.15)); animation: mascot-bob 4s ease-in-out infinite; }
.mascot-stage img.mood-changing { animation: mood-arrive 520ms cubic-bezier(0.2, 0.9, 0.25, 1.35); }
.spark { position: absolute; z-index: 3; font-size: 2rem; color: var(--paper); text-shadow: 2px 2px 0 var(--line); }
.spark-one { left: 4%; top: 14%; transform: rotate(-12deg); }
.spark-two { right: 2%; top: 26%; color: var(--berry); transform: rotate(10deg); }
.spark-three { right: 10%; bottom: 12%; font-size: 1.5rem; }

.mood-strip { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.mood-strip span { padding: 7px 10px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 0.75rem; font-weight: 900; }
.mood-strip span:nth-child(2) { background: var(--aqua); }
.mood-strip span:nth-child(3) { background: #ff9ad5; }

.chat-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: radial-gradient(circle, rgba(169, 79, 208, 0.12) 1.5px, transparent 1.7px) 0 0 / 24px 24px, var(--paper); }

header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-height: 84px;
  padding: 14px 20px;
  border-bottom: 3px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  transition: min-height 260ms ease, padding 260ms ease;
}

.avatar { width: 54px; height: 54px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 19px; background: var(--coral); transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--line); transition: width 260ms ease, height 260ms ease, border-radius 260ms ease, transform 260ms ease; }
.avatar img { width: 112%; height: 112%; object-fit: contain; transform: rotate(3deg); transition: transform 260ms ease; }
.avatar img.mood-changing { animation: mood-arrive 520ms cubic-bezier(0.2, 0.9, 0.25, 1.35); }
.header-text { min-width: 0; flex: 1; }
.header-text h1 { margin: 0; overflow: hidden; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.control-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 11px; font-size: 0.9rem; font-weight: 900; }
.control-btn::after { content: attr(data-label); font-family: system-ui, sans-serif; font-size: 0.72rem; white-space: nowrap; }

.header-control, #logout-btn { min-width: 44px; min-height: 44px; border: 2px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--paper); cursor: pointer; box-shadow: 3px 3px 0 var(--line); transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
#theme-btn { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; line-height: 1; }
.mood-expand { font-size: 1.15rem; }
#logout-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; font-size: 0.8rem; font-weight: 900; }
.logout-icon { font-size: 1rem; transform: rotate(45deg); }
.header-control:hover, #logout-btn:hover { color: var(--accent-ink); background: var(--mango); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line); }
#notify-btn.active, #voice-btn.active { color: var(--accent-ink); background: var(--aqua); }
#notify-btn.hidden, #voice-btn.hidden { display: none; }

header.mood-expanded { min-height: 238px; align-items: center; justify-content: space-between; padding: 12px 16px; }
header.mood-expanded .avatar { width: 210px; height: 210px; margin-left: clamp(20px, 7vw, 72px); border-radius: 44px; transform: rotate(-2deg); }
header.mood-expanded .avatar img { transform: rotate(2deg); }
header.mood-expanded .header-text { display: none; }
header.mood-expanded .header-actions { align-self: stretch; flex-direction: column; justify-content: center; }
header.mood-expanded #theme-btn,
header.mood-expanded #voice-btn,
header.mood-expanded #notify-btn { display: none; }
header.mood-expanded .mood-expand,
header.mood-expanded #settings-btn { width: 100%; }
header.mood-expanded .mood-expand { background: var(--mango); }

header[data-mood="excited"] .avatar,
header[data-mood="laughing"] .avatar,
header[data-mood="playful"] .avatar { background: var(--mango); }
header[data-mood="affectionate"] .avatar { background: #ff9ad5; }
header[data-mood="curious"] .avatar,
header[data-mood="greeting"] .avatar { background: var(--aqua); }
header[data-mood="sleepy"] .avatar,
header[data-mood="napping"] .avatar,
header[data-mood="sad"] .avatar { background: #b9c7ef; }
header[data-mood="annoyed"] .avatar,
header[data-mood="startled"] .avatar { background: var(--coral); }
header.mood-expanded .avatar img { animation: mood-breathe 3.8s ease-in-out infinite; }
header.mood-expanded[data-mood="excited"] .avatar img,
header.mood-expanded[data-mood="laughing"] .avatar img,
header.mood-expanded[data-mood="playful"] .avatar img { animation-name: mood-bounce; animation-duration: 2.2s; }
header.mood-expanded[data-mood="curious"] .avatar img,
header.mood-expanded[data-mood="startled"] .avatar img { animation-name: mood-tilt; animation-duration: 3s; }
header.mood-expanded[data-mood="sleepy"] .avatar img,
header.mood-expanded[data-mood="napping"] .avatar img,
header.mood-expanded[data-mood="sad"] .avatar img { animation-duration: 5.5s; }
header.mood-expanded .avatar img.mood-changing { animation: mood-arrive 520ms cubic-bezier(0.2, 0.9, 0.25, 1.35); }

#messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--coral) transparent; padding: 28px clamp(18px, 4vw, 42px); display: flex; flex-direction: column; gap: 16px; }
.msg { position: relative; max-width: min(78%, 620px); padding: 13px 17px; border: 2px solid var(--line); border-radius: 22px; font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; box-shadow: 4px 5px 0 rgba(51, 42, 72, 0.13); animation: message-pop 260ms cubic-bezier(0.2, 0.85, 0.34, 1.25) both; }
.msg.pet { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 8px; border-bottom-left-radius: 6px; background: var(--pet-bubble); }
.msg.pet::before { content: "TUKURU"; position: absolute; left: 14px; top: -9px; padding: 2px 7px; border: 2px solid var(--line); border-radius: 99px; color: var(--accent-ink); background: var(--mango); font-family: ui-rounded, "Arial Rounded MT Bold", sans-serif; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.07em; }
.sticker-img { width: 92px; height: 92px; align-self: center; object-fit: contain; display: block; filter: drop-shadow(0 5px 0 rgba(51, 42, 72, 0.1)); }
.msg-row { width: 100%; display: flex; align-items: center; gap: 8px; }
.msg.pet .msg-row { justify-content: space-between; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-media { display: block; width: 100%; height: auto; max-height: 520px; margin-top: 4px; border-radius: 14px; border: 2px solid var(--line); object-fit: contain; }
.msg-play-btn { min-width: 34px; height: 36px; flex-shrink: 0; padding: 0 9px; display: none; align-items: center; justify-content: center; gap: 5px; border: 2px solid var(--line); border-radius: 999px; color: inherit; background: var(--cream); font-weight: 900; cursor: pointer; }
.msg-play-btn::after { content: attr(data-label); font-family: system-ui, sans-serif; font-size: 0.7rem; }
.msg-play-btn:hover, .msg-play-btn.playing { color: var(--accent-ink); background: var(--aqua); }
#messages.tts-enabled .msg-play-btn { display: inline-flex; }
.msg.own { align-self: flex-end; border-bottom-right-radius: 6px; color: var(--accent-ink); background: var(--aqua); }
.msg.own:nth-of-type(4n + 2) { background: var(--own-alt); }
.msg.system { align-self: center; padding: 7px 12px; border: 0; border-radius: 999px; color: var(--ink-soft); background: var(--cream); box-shadow: none; font-size: 0.8rem; font-style: italic; text-align: center; }

#typing-indicator { width: fit-content; margin: 0 clamp(18px, 4vw, 42px) 10px; padding: 8px 13px; border: 2px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--cream); font-family: system-ui, sans-serif; font-size: 0.8rem; font-weight: 700; }
#typing-indicator.hidden { display: none; }
.dots span { animation: blink 1.4s infinite both; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

#message-form { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 14px 18px max(14px, env(safe-area-inset-bottom)); border-top: 3px solid var(--line); background: var(--composer-bg); backdrop-filter: blur(12px); }
#message-input { min-width: 0; min-height: 50px; flex: 1; padding: 12px 18px; border: 2px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--cream); font-family: system-ui, sans-serif; font-size: 1rem; box-shadow: inset 0 -3px 0 rgba(255, 202, 58, 0.42); }
#message-input::placeholder { color: #84798f; }
#message-form button { min-height: 50px; padding: 10px 18px; border: 2px solid var(--line); border-radius: 17px; color: white; background: var(--coral); font-weight: 900; cursor: pointer; box-shadow: 3px 3px 0 var(--line); transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
#message-form button:hover { background: var(--coral-dark); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line); }
.send-arrow { margin-left: 5px; font-size: 1.15rem; }
#mic-btn { width: 50px; flex: 0 0 50px; padding: 0 !important; display: grid; place-items: center; color: var(--accent-ink) !important; background: var(--mango) !important; }
#mic-btn.hidden { display: none; }
#mic-btn.recording { background: #ff9ad5 !important; animation: mic-pulse 1.2s infinite; }
#mic-btn.unsupported { cursor: not-allowed; filter: grayscale(0.8); opacity: 0.45; box-shadow: none; }

.login-body { min-height: 100dvh; height: auto; overflow: auto; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
.login-shell { position: relative; width: min(880px, 100%); min-height: 560px; display: grid; grid-template-columns: 0.95fr 1.05fr; overflow: hidden; border: 3px solid var(--line); border-radius: 34px; background: var(--paper); box-shadow: var(--shadow); }
.login-mascot { position: relative; min-height: 360px; display: grid; place-items: end center; overflow: hidden; background: radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.8) 0 5px, transparent 6px), radial-gradient(circle at 28% 29%, rgba(255, 255, 255, 0.8) 0 5px, transparent 6px), radial-gradient(circle at 16% 36%, rgba(255, 255, 255, 0.8) 0 5px, transparent 6px), var(--mango); }
.login-mascot::before { content: ""; position: absolute; width: 290px; height: 290px; left: 50%; bottom: 42px; border-radius: 43% 57% 55% 45% / 52% 43% 57% 48%; background: var(--coral); transform: translateX(-50%) rotate(8deg); }
.login-mascot img { position: relative; z-index: 1; width: min(90%, 340px); filter: drop-shadow(0 14px 0 rgba(51, 42, 72, 0.14)); animation: mascot-bob 4s ease-in-out infinite; }
.login-scribble { position: absolute; z-index: 2; top: 32px; right: 24px; font-size: 1.35rem; font-weight: 1000; transform: rotate(9deg); }
.login-scribble::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -5px; height: 4px; border-radius: 50%; background: var(--berry); transform: rotate(-3deg); }
.login-theme-toggle { position: absolute; z-index: 5; top: 18px; right: 18px; min-width: 46px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 11px; border: 2px solid var(--line); border-radius: 15px; color: var(--ink); background: var(--paper); font-weight: 900; cursor: pointer; box-shadow: 3px 3px 0 var(--line); }
.login-theme-toggle::after { content: attr(data-label); font-family: system-ui, sans-serif; font-size: 0.72rem; }
.login-theme-toggle:hover { color: var(--accent-ink); background: var(--mango); }

.login-card { align-self: center; padding: clamp(34px, 6vw, 70px); text-align: left; }
.login-card h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 0.95; letter-spacing: -0.06em; }
.login-card .subtitle { margin: 14px 0 26px; color: var(--ink-soft); font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.5; }
#login-form { display: flex; flex-direction: column; }
#login-form label { margin: 0 0 7px 3px; font-family: system-ui, sans-serif; font-size: 0.85rem; font-weight: 800; }
#login-form input { width: 100%; min-height: 50px; margin-bottom: 15px; padding: 11px 15px; border: 2px solid var(--line); border-radius: 15px; color: var(--ink); background: var(--cream); font-family: system-ui, sans-serif; font-size: 1rem; }
#login-form input::placeholder { color: #8e8498; }
#login-form button, #retry-btn { width: 100%; min-height: 52px; margin-top: 5px; padding: 11px 16px; border: 2px solid var(--line); border-radius: 15px; color: white; background: var(--coral); font-size: 1rem; font-weight: 900; cursor: pointer; box-shadow: 4px 4px 0 var(--line); transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
#login-form button:hover, #retry-btn:hover { background: var(--coral-dark); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--line); }
#login-form button:disabled { cursor: wait; opacity: 0.65; }
.login-card .error { min-height: 20px; margin: 12px 0 0; color: #b4233d; font-family: system-ui, sans-serif; font-size: 0.85rem; font-weight: 700; }
.offline-shell .login-mascot { background-color: var(--aqua); }
.offline-shell .login-mascot::before { background: #bdece7; }
.admin-login-shell .login-mascot { background-color: var(--berry); }
.admin-login-shell .login-mascot::before { background: var(--aqua); }
.admin-login-shell .login-scribble { color: white; font-size: 1rem; }

html[data-theme="dark"] .buddy-panel::after { border-color: rgba(255, 118, 92, 0.55); }
html[data-theme="dark"] .mascot-stage::before { background: #7c3f7f; }
html[data-theme="dark"] .login-mascot { color: var(--accent-ink); background-color: #d49d2f; }
html[data-theme="dark"] .offline-shell .login-mascot { background-color: #287f83; }
html[data-theme="dark"] .admin-login-shell .login-mascot { background-color: #51306b; }
html[data-theme="dark"] .login-card .error { color: #ff9baa; }

html[data-theme="retro"] #chat-screen,
html[data-theme="retro"] .settings-shell,
html[data-theme="retro"] .login-shell { box-shadow: none; }
html[data-theme="retro"] .chat-panel { background: var(--paper); }
html[data-theme="retro"] .buddy-panel { background: var(--buddy-bg); }
html[data-theme="retro"] .buddy-panel::after,
html[data-theme="retro"] .spark { display: none; }
html[data-theme="retro"] .mascot-stage::before { background: #3a2818; }
html[data-theme="retro"] .msg,
html[data-theme="retro"] .header-control,
html[data-theme="retro"] #settings-btn,
html[data-theme="retro"] #message-form button,
html[data-theme="retro"] .settings-card,
html[data-theme="retro"] .theme-choice,
html[data-theme="retro"] .settings-toggle { box-shadow: none; }

.settings-body { min-height: 100dvh; height: auto; overflow: auto; padding: 24px; }
.settings-shell { width: min(900px, 100%); min-height: calc(100dvh - 48px); margin: 0 auto; overflow: hidden; border: 3px solid var(--line); border-radius: 34px; background: var(--paper); box-shadow: var(--shadow); }
.settings-topbar { min-height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 20px; }
.settings-topbar h1 { margin: 0; font-size: 1.2rem; text-align: center; }
.settings-topbar-spacer { width: 1px; justify-self: end; }
.settings-back { width: fit-content; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 2px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--line); font-family: system-ui, sans-serif; font-size: 0.82rem; font-weight: 850; text-decoration: none; }
.settings-back:hover { color: var(--accent-ink); background: var(--mango); }
.settings-content { padding: 4px clamp(20px, 6vw, 64px) 56px; }
.settings-intro { display: flex; align-items: center; gap: clamp(20px, 5vw, 46px); margin: 10px 0 34px; padding: 24px clamp(22px, 5vw, 44px); border: 3px solid var(--line); border-radius: 28px; color: var(--accent-ink); background: var(--mango); overflow: hidden; }
.settings-intro .eyebrow { margin-bottom: 12px; color: var(--ink); }
.settings-intro h2 { margin: 0; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 0.95; letter-spacing: -0.05em; }
.settings-intro p:last-child { margin: 13px 0 0; font-family: system-ui, sans-serif; font-weight: 650; }
.settings-mascot { width: clamp(118px, 22vw, 190px); aspect-ratio: 1; flex: 0 0 auto; display: grid; place-items: center; border: 3px solid var(--line); border-radius: 38px; background: var(--coral); transform: rotate(-3deg); box-shadow: 5px 5px 0 var(--line); }
.settings-mascot img { width: 112%; height: 112%; object-fit: contain; transform: rotate(3deg); animation: mood-tilt 3s ease-in-out infinite; }
.settings-card { margin-top: 18px; padding: clamp(20px, 4vw, 30px); border: 2px solid var(--line); border-radius: 24px; background: var(--pet-bubble); box-shadow: 4px 5px 0 rgba(51, 42, 72, 0.13); }
.settings-card-heading, .setting-row, .account-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.settings-card h2 { margin: 3px 0 0; font-size: 1.25rem; }
.settings-card p { margin: 8px 0 0; color: var(--ink-soft); font-family: system-ui, sans-serif; font-size: 0.9rem; line-height: 1.45; }
.settings-kicker { color: var(--coral-dark); font-family: system-ui, sans-serif; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.settings-card-icon { font-size: 1.6rem; color: var(--berry); }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.theme-choice { min-width: 0; padding: 13px; border: 2px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--cream); cursor: pointer; text-align: left; box-shadow: 3px 3px 0 var(--line); }
.theme-choice.selected { color: var(--accent-ink); background: var(--mango); transform: translateY(-2px); }
.theme-choice strong, .theme-choice small { display: block; }
.theme-choice strong { margin-top: 10px; font-size: 0.9rem; }
.theme-choice small { margin-top: 3px; color: var(--ink-soft); font-family: system-ui, sans-serif; font-size: 0.72rem; }
.theme-choice.selected small { color: var(--accent-ink); opacity: 0.78; }
.theme-preview { height: 62px; display: flex; align-items: flex-end; gap: 5px; padding: 9px; border: 2px solid var(--line); border-radius: 11px; }
.theme-preview i { display: block; height: 18px; flex: 1; border-radius: 5px; }
.theme-preview i:nth-child(2) { height: 34px; }
.theme-preview i:nth-child(3) { height: 25px; }
.preview-light { background: #fffdf7; }.preview-light i { background: #ffca3a; }.preview-light i:nth-child(2) { background: #58d9d0; }.preview-light i:nth-child(3) { background: #ff6b4a; }
.preview-dark { background: #171421; }.preview-dark i { background: #cf7aef; }.preview-dark i:nth-child(2) { background: #54ddd4; }.preview-dark i:nth-child(3) { background: #ff765c; }
.preview-retro { background: #1b120c; }.preview-retro i { background: #4a3325; }.preview-retro i:nth-child(2) { background: #80634e; }.preview-retro i:nth-child(3) { background: #c1522b; }
.settings-toggle, #settings-logout-btn { min-width: 104px; min-height: 46px; flex: 0 0 auto; padding: 9px 13px; border: 2px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--cream); cursor: pointer; box-shadow: 3px 3px 0 var(--line); font-size: 0.82rem; font-weight: 900; }
.settings-toggle.active { color: var(--accent-ink); background: var(--aqua); }
.settings-toggle.hidden { display: none; }
.settings-toggle:disabled { cursor: not-allowed; opacity: 0.5; box-shadow: none; }
#settings-logout-btn { color: white; background: var(--coral); }
#settings-logout-btn:hover { background: var(--coral-dark); }

@keyframes blink { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }
@keyframes mascot-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes mood-arrive { 0% { opacity: 0.25; transform: scale(0.72) rotate(-8deg); } 65% { opacity: 1; transform: scale(1.08) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes mood-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.025); } }
@keyframes mood-bounce { 0%, 68%, 100% { transform: translateY(0) rotate(0); } 76% { transform: translateY(-7px) rotate(-2deg); } 84% { transform: translateY(0) rotate(2deg); } }
@keyframes mood-tilt { 0%, 72%, 100% { transform: rotate(0); } 82% { transform: rotate(-3deg); } 90% { transform: rotate(3deg); } }
@keyframes message-pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mic-pulse { 0%, 100% { box-shadow: 3px 3px 0 var(--line), 0 0 0 0 rgba(169, 79, 208, 0.4); } 50% { box-shadow: 3px 3px 0 var(--line), 0 0 0 9px rgba(169, 79, 208, 0); } }

@media (max-width: 820px) {
  body { background: var(--paper); }
  #chat-screen { width: 100%; height: 100vh; height: 100dvh; margin: 0; display: block; border: 0; border-radius: 0; box-shadow: none; }
  .buddy-panel { display: none; }
  .chat-panel { height: 100%; }
  header { min-height: 76px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; }
  .avatar { width: 48px; height: 48px; border-radius: 16px; }
  .avatar img { width: 54px; height: 54px; }
  header.mood-expanded { min-height: 202px; padding: max(8px, env(safe-area-inset-top)) 10px 8px; }
  header.mood-expanded .avatar { width: 178px; height: 178px; border-radius: 38px; }
  header.mood-expanded .avatar img { width: 112%; height: 112%; }
  header.mood-expanded .header-text { padding-top: 14px; }
  #messages { padding: 26px 16px 20px; }
  .msg { max-width: 86%; }
  #message-form { padding-inline: 12px; }
  .login-shell { width: min(480px, 100%); min-height: 0; display: block; }
  .login-mascot { min-height: 250px; }
  .login-mascot::before { width: 230px; height: 230px; bottom: 15px; }
  .login-mascot img { width: 235px; }
  .login-card { padding: 34px 28px 38px; }
  .login-card h1 { font-size: clamp(2.2rem, 12vw, 3.2rem); }
}

@media (max-width: 1050px) {
  .header-actions .control-btn { width: 44px; padding: 0; }
  .header-actions .control-btn::after { display: none; }
}

@media (max-height: 650px) and (min-width: 821px) {
  .buddy-panel { padding-block: 24px; }
  .buddy-copy h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
  .buddy-copy p, .mood-strip { display: none; }
  .mascot-stage { min-height: 210px; }
  .mascot-stage img { max-height: 230px; }
}

@media (max-width: 520px) {
  .logout-label { display: none; }
  #logout-btn { width: 44px; padding: 0; }
  .header-actions { gap: 6px; }
  .control-btn { width: 44px; padding: 0; }
  .control-btn::after { display: none; }
  .header-text h1 { font-size: 1rem; }
  header.mood-expanded { min-height: 188px; }
  header.mood-expanded .avatar { width: 166px; height: 166px; border-radius: 34px; }
  header.mood-expanded .header-text h1 { font-size: 1.1rem; }
  #message-form { gap: 8px; }
  #message-form button[type="submit"] { width: 50px; padding: 0; }
  #message-form button[type="submit"] > span:first-child { display: none; }
  .send-arrow { margin: 0; }
}

@media (max-width: 620px) {
  .settings-body { padding: 0; background: var(--paper); }
  .settings-shell { min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .settings-topbar { min-height: 68px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; border-bottom: 2px solid var(--line); }
  .settings-content { padding: 20px 14px max(34px, env(safe-area-inset-bottom)); }
  .settings-intro { gap: 16px; margin-top: 0; padding: 18px; border-radius: 22px; }
  .settings-mascot { width: 108px; border-radius: 27px; }
  .settings-intro h2 { font-size: clamp(1.65rem, 9vw, 2.35rem); }
  .settings-intro p:last-child { font-size: 0.82rem; }
  .settings-intro .eyebrow { display: none; }
  .theme-grid { grid-template-columns: 1fr; }
  .theme-choice { display: grid; grid-template-columns: 94px 1fr; column-gap: 12px; align-items: center; }
  .theme-preview { grid-row: span 2; }
  .theme-choice strong { align-self: end; margin-top: 0; }
  .theme-choice small { align-self: start; }
  .setting-row, .account-card { align-items: flex-end; gap: 12px; }
  .settings-toggle, #settings-logout-btn { min-width: 88px; }
}

@media (max-width: 390px) {
  header { gap: 9px; }
  .avatar { width: 44px; height: 44px; }
  .header-actions { gap: 5px; }
  #settings-btn, #mood-expand-btn { min-width: 40px; width: 40px; min-height: 40px; }
  .login-theme-toggle { top: 12px; right: 12px; min-width: 42px; min-height: 42px; padding: 0; }
  .login-theme-toggle::after { display: none; }
  .msg { max-width: 91%; }
  .sticker-img { width: 82px; height: 82px; }
  .login-body { padding: 12px; }
  .login-mascot { min-height: 210px; }
  .login-mascot img { width: 205px; }
  .login-card { padding: 28px 22px 32px; }
}

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