/* Default: WhatsApp Light Mode */
:root {
  --tg-theme-bg-color: #efeae2;
  --tg-theme-secondary-bg-color: #ffffff;
  --tg-theme-text-color: #111b21;
  --tg-theme-hint-color: #8696a0;
  --tg-theme-link-color: #027eb5;
  --tg-theme-button-color: #00a884;
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-header-bg-color: #f0f2f5;
  --user-bubble: #d9fdd3;
  --assistant-bubble: #ffffff;
  --input-bg: #ffffff;
  --input-area-bg: #f0f2f5;
  --menu-btn-bg: #e9edef;
  --bubble-text: #111b21;
}

/* Light theme doodle — painted on html/body; .chat-area is transparent */
html, body {
  background-color: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%23d4c9a8' fill-opacity='0.55'%3E%3Cpath transform='translate(20,18) rotate(-15) scale(0.55)' d='M12 21.6C6.4 16.1 1 11.3 1 7.2 1 3.4 4.1 2 6.3 2 7.6 2 10.4 3 12 7 13.6 3 16.4 2 17.7 2 19.9 2 23 3.4 23 7.2 23 11.3 17.6 16.1 12 21.6Z'/%3E%3Cpath transform='translate(144,13) scale(0.65)' d='M12 2 14.9 9.2 22.6 9.8 16.9 14.8 18.7 22.3 12 18.3 5.3 22.3 7.1 14.8 1.4 9.8 9.1 9.2Z'/%3E%3Cg transform='translate(258,42) rotate(22)'%3E%3Cellipse cx='0' cy='-5' rx='2.5' ry='4'/%3E%3Cellipse cx='5' cy='0' rx='4' ry='2.5'/%3E%3Cellipse cx='0' cy='5' rx='2.5' ry='4'/%3E%3Cellipse cx='-5' cy='0' rx='4' ry='2.5'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(42,110)'%3E%3Cellipse cx='3' cy='11' rx='3.2' ry='2.2' transform='rotate(-20 3 11)'/%3E%3Crect x='5.8' y='0' width='1.6' height='11'/%3E%3C/g%3E%3Cpath transform='translate(190,96) rotate(30)' d='M0 13C0 13 1 0 10 0 10 0 9 13 0 13Z'/%3E%3Cg transform='translate(248,185)'%3E%3Crect x='-1.2' y='-7' width='2.4' height='14' rx='1.2'/%3E%3Crect x='-1.2' y='-7' width='2.4' height='14' rx='1.2' transform='rotate(60)'/%3E%3Crect x='-1.2' y='-7' width='2.4' height='14' rx='1.2' transform='rotate(-60)'/%3E%3C/g%3E%3Cpath transform='translate(165,248) rotate(10) scale(0.45)' d='M12 21.6C6.4 16.1 1 11.3 1 7.2 1 3.4 4.1 2 6.3 2 7.6 2 10.4 3 12 7 13.6 3 16.4 2 17.7 2 19.9 2 23 3.4 23 7.2 23 11.3 17.6 16.1 12 21.6Z'/%3E%3Ccircle cx='82' cy='65' r='2.5'/%3E%3Ccircle cx='218' cy='148' r='2.5'/%3E%3Ccircle cx='58' cy='270' r='2.5'/%3E%3Ccircle cx='272' cy='250' r='2.5'/%3E%3Cpath transform='translate(272,270) scale(0.5)' d='M12 2 14.9 9.2 22.6 9.8 16.9 14.8 18.7 22.3 12 18.3 5.3 22.3 7.1 14.8 1.4 9.8 9.1 9.2Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
}

.chat-area {
  background-color: transparent;
  background-image: none;
}

/* Dark Mode: WhatsApp Dark */
body.dark-theme {
  --tg-theme-bg-color: #111b21;
  --tg-theme-secondary-bg-color: #202c33;
  --tg-theme-text-color: #e9edef;
  --tg-theme-hint-color: #8696a0;
  --tg-theme-link-color: #53bdeb;
  --tg-theme-button-color: #00a884;
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-header-bg-color: #1f2c34;
  --user-bubble: #005c4b;
  --assistant-bubble: #202c33;
  --input-bg: #2a3942;
  --input-area-bg: #1f2c34;
  --menu-btn-bg: #2a3942;
  --bubble-text: #e9edef;
  background-color: #111b21;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%231f2c34'%3E%3Cpath transform='translate(20,18) rotate(-15) scale(0.55)' d='M12 21.6C6.4 16.1 1 11.3 1 7.2 1 3.4 4.1 2 6.3 2 7.6 2 10.4 3 12 7 13.6 3 16.4 2 17.7 2 19.9 2 23 3.4 23 7.2 23 11.3 17.6 16.1 12 21.6Z'/%3E%3Cpath transform='translate(144,13) scale(0.65)' d='M12 2 14.9 9.2 22.6 9.8 16.9 14.8 18.7 22.3 12 18.3 5.3 22.3 7.1 14.8 1.4 9.8 9.1 9.2Z'/%3E%3Cg transform='translate(258,42) rotate(22)'%3E%3Cellipse cx='0' cy='-5' rx='2.5' ry='4'/%3E%3Cellipse cx='5' cy='0' rx='4' ry='2.5'/%3E%3Cellipse cx='0' cy='5' rx='2.5' ry='4'/%3E%3Cellipse cx='-5' cy='0' rx='4' ry='2.5'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(42,110)'%3E%3Cellipse cx='3' cy='11' rx='3.2' ry='2.2' transform='rotate(-20 3 11)'/%3E%3Crect x='5.8' y='0' width='1.6' height='11'/%3E%3C/g%3E%3Cpath transform='translate(190,96) rotate(30)' d='M0 13C0 13 1 0 10 0 10 0 9 13 0 13Z'/%3E%3Cg transform='translate(248,185)'%3E%3Crect x='-1.2' y='-7' width='2.4' height='14' rx='1.2'/%3E%3Crect x='-1.2' y='-7' width='2.4' height='14' rx='1.2' transform='rotate(60)'/%3E%3Crect x='-1.2' y='-7' width='2.4' height='14' rx='1.2' transform='rotate(-60)'/%3E%3C/g%3E%3Cpath transform='translate(165,248) rotate(10) scale(0.45)' d='M12 21.6C6.4 16.1 1 11.3 1 7.2 1 3.4 4.1 2 6.3 2 7.6 2 10.4 3 12 7 13.6 3 16.4 2 17.7 2 19.9 2 23 3.4 23 7.2 23 11.3 17.6 16.1 12 21.6Z'/%3E%3Ccircle cx='82' cy='65' r='2.5'/%3E%3Ccircle cx='218' cy='148' r='2.5'/%3E%3Ccircle cx='58' cy='270' r='2.5'/%3E%3Ccircle cx='272' cy='250' r='2.5'/%3E%3Cpath transform='translate(272,270) scale(0.5)' d='M12 2 14.9 9.2 22.6 9.8 16.9 14.8 18.7 22.3 12 18.3 5.3 22.3 7.1 14.8 1.4 9.8 9.1 9.2Z'/%3E%3C/g%3E%3C/svg%3E");
}

html:has(body.dark-theme) {
  background-color: #111b21;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%231f2c34'%3E%3Cpath transform='translate(20,18) rotate(-15) scale(0.55)' d='M12 21.6C6.4 16.1 1 11.3 1 7.2 1 3.4 4.1 2 6.3 2 7.6 2 10.4 3 12 7 13.6 3 16.4 2 17.7 2 19.9 2 23 3.4 23 7.2 23 11.3 17.6 16.1 12 21.6Z'/%3E%3Cpath transform='translate(144,13) scale(0.65)' d='M12 2 14.9 9.2 22.6 9.8 16.9 14.8 18.7 22.3 12 18.3 5.3 22.3 7.1 14.8 1.4 9.8 9.1 9.2Z'/%3E%3Cg transform='translate(258,42) rotate(22)'%3E%3Cellipse cx='0' cy='-5' rx='2.5' ry='4'/%3E%3Cellipse cx='5' cy='0' rx='4' ry='2.5'/%3E%3Cellipse cx='0' cy='5' rx='2.5' ry='4'/%3E%3Cellipse cx='-5' cy='0' rx='4' ry='2.5'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(42,110)'%3E%3Cellipse cx='3' cy='11' rx='3.2' ry='2.2' transform='rotate(-20 3 11)'/%3E%3Crect x='5.8' y='0' width='1.6' height='11'/%3E%3C/g%3E%3Cpath transform='translate(190,96) rotate(30)' d='M0 13C0 13 1 0 10 0 10 0 9 13 0 13Z'/%3E%3Cg transform='translate(248,185)'%3E%3Crect x='-1.2' y='-7' width='2.4' height='14' rx='1.2'/%3E%3Crect x='-1.2' y='-7' width='2.4' height='14' rx='1.2' transform='rotate(60)'/%3E%3Crect x='-1.2' y='-7' width='2.4' height='14' rx='1.2' transform='rotate(-60)'/%3E%3C/g%3E%3Cpath transform='translate(165,248) rotate(10) scale(0.45)' d='M12 21.6C6.4 16.1 1 11.3 1 7.2 1 3.4 4.1 2 6.3 2 7.6 2 10.4 3 12 7 13.6 3 16.4 2 17.7 2 19.9 2 23 3.4 23 7.2 23 11.3 17.6 16.1 12 21.6Z'/%3E%3Ccircle cx='82' cy='65' r='2.5'/%3E%3Ccircle cx='218' cy='148' r='2.5'/%3E%3Ccircle cx='58' cy='270' r='2.5'/%3E%3Ccircle cx='272' cy='250' r='2.5'/%3E%3Cpath transform='translate(272,270) scale(0.5)' d='M12 2 14.9 9.2 22.6 9.8 16.9 14.8 18.7 22.3 12 18.3 5.3 22.3 7.1 14.8 1.4 9.8 9.1 9.2Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* 表格主题适配 */
.table-wrap {
  background: transparent;
}

.bubble table,
.bubble--assistant table {
  border-color: currentColor;
}

body.dark-theme .bubble table,
body.dark-theme .bubble--assistant table {
  border-color: var(--tg-theme-hint-color);
}

/* Shared: developer OTP modal (hub + console) */
.dev-otp-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}
.dev-otp-card {
  background: var(--tg-theme-secondary-bg-color, #fff);
  border-radius: 12px;
  padding: 16px;
  width: min(400px, 100%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  color: var(--tg-theme-text-color, #111);
}
.dev-otp-card h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}
.dev-otp-hint {
  font-size: 0.92rem;
  color: var(--tg-theme-hint-color, #666);
  margin: 0 0 12px;
}
.dev-otp-err {
  color: #c62828;
  font-size: 0.88rem;
  margin: 0 0 8px;
}
.dev-otp-inputs {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dev-otp-digit {
  width: 100%;
  max-width: 48px;
  text-align: center;
  font-size: 1.25rem;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--tg-theme-bg-color, #fff);
  color: inherit;
}
.dev-otp-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dev-otp-footer .dev-btn,
.dev-otp-footer button {
  font: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--tg-theme-button-color, #00a884);
  color: var(--tg-theme-button-text-color, #fff);
}
.dev-otp-footer button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}