:root {
  color-scheme: light;
  --primary: #4d6fff;
  --primary-dark: #3655dd;
  --ink: #182034;
  --muted: #788198;
  --line: #e7eaf2;
  --surface: #ffffff;
  --background: #f2f5fb;
  --student: #4d6fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--background); color: var(--ink); }
body { overflow: hidden; }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.logo {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: none;
  color: white;
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(145deg, #6480ff, #3957e8);
  box-shadow: 0 8px 20px rgba(77, 111, 255, .25);
}

.app-shell { height: 100%; max-width: 860px; margin: 0 auto; display: grid; grid-template-rows: auto 1fr auto auto; background: var(--background); box-shadow: 0 0 60px rgba(25, 35, 65, .08); }
.topbar {
  z-index: 3; display: flex; align-items: center; gap: 13px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px);
}
.title-block { min-width: 0; flex: 1; }
.title-block h1 { margin: 0; font-size: 19px; line-height: 1.2; }
.title-block p { display: flex; align-items: center; gap: 7px; margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #f2ad38; box-shadow: 0 0 0 4px rgba(242, 173, 56, .14); }
.status-dot.online { background: #24bd82; box-shadow: 0 0 0 4px rgba(36, 189, 130, .14); }
.icon-button { width: 42px; height: 42px; border: 0; background: transparent; font-size: 19px; color: #555f73; }

.messages { overflow-y: auto; padding: 18px 14px 26px; overscroll-behavior: contain; scroll-behavior: smooth; }
.message { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 17px; }
.message.user { justify-content: flex-end; }
.avatar { width: 34px; height: 34px; border-radius: 12px; flex: none; display: grid; place-items: center; color: white; background: linear-gradient(145deg, #52c7b4, #23a990); font-size: 12px; font-weight: 800; }
.message.user .avatar { order: 2; background: linear-gradient(145deg, #78859a, #505b6e); }
.bubble {
  max-width: min(78%, 650px); padding: 12px 14px; border-radius: 5px 18px 18px 18px; background: var(--surface);
  box-shadow: 0 4px 16px rgba(33, 46, 81, .055); white-space: pre-wrap; word-break: break-word; line-height: 1.72; font-size: 15px;
}
.bubble p { margin: 8px 0 0; }
.bubble.welcome strong { font-size: 16px; }
.message.user .bubble { order: 1; color: white; background: var(--student); border-radius: 18px 5px 18px 18px; box-shadow: 0 6px 20px rgba(77, 111, 255, .18); }
.message-image { display: block; width: min(220px, 100%); max-height: 260px; margin: 0 0 9px; border-radius: 12px; object-fit: cover; }
.meta { margin-top: 8px; color: #9ba3b3; font-size: 11px; }
.message.user .meta { color: rgba(255, 255, 255, .7); }

.quick-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 6px 43px 18px; }
.quick-panel button { padding: 11px 8px; border: 1px solid #dfe5f4; border-radius: 13px; color: #4d5a77; background: rgba(255, 255, 255, .8); font-size: 13px; }

.image-preview { margin: 0 12px 8px; padding: 8px; display: flex; align-items: center; gap: 10px; border: 1px solid #dfe5f4; border-radius: 15px; background: white; box-shadow: 0 8px 28px rgba(36, 48, 82, .08); }
.image-preview img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }
.image-preview div { min-width: 0; flex: 1; }
.image-preview strong, .image-preview span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-preview strong { font-size: 13px; }
.image-preview span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.image-preview button { width: 34px; height: 34px; border: 0; background: transparent; color: #8a93a5; font-size: 22px; }

.composer-wrap { padding: 6px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); }
.helper-note { margin: 0 0 6px; text-align: center; color: #9aa2b3; font-size: 11px; }
.composer { display: flex; align-items: flex-end; gap: 8px; }
.round-button { width: 42px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 13px; color: #5d6880; background: #f1f4fa; cursor: pointer; }
.round-button svg { width: 22px; height: 22px; fill: currentColor; }
.composer textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 112px; resize: none; padding: 11px 13px; border: 1px solid #dfe4ee; border-radius: 14px; outline: none; line-height: 1.45; background: #fafbfe; }
.composer textarea:focus { border-color: #9aabff; background: white; }
.send-button { height: 44px; padding: 0 16px; border: 0; border-radius: 13px; color: white; background: var(--primary); font-weight: 700; }
.send-button:disabled { color: #a6adba; background: #e7e9ee; }
.hold-button {
  height: 44px; flex: 1; border: 1px solid #dfe4ee; border-radius: 14px; color: #44506a; background: #fafbfe;
  font-weight: 700; user-select: none; -webkit-user-select: none;
}
.hold-button.recording { color: white; border-color: #e45268; background: #e45268; }

.recording-bar {
  position: fixed; left: 50%; bottom: 88px; z-index: 30; transform: translateX(-50%); width: min(88%, 420px);
  padding: 13px 14px; border-radius: 14px; color: white; background: rgba(31, 38, 55, .92);
  text-align: center; font-size: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
.recording-bar span { display: block; }
.recording-pulse { width: 12px; height: 12px; margin: 0 auto 8px; border-radius: 50%; background: #ff526d; animation: pulse 1s infinite; }
.recording-bar .recording-hint { margin-top: 5px; color: #d1d6e0; font-size: 10px; }
.recording-bar button { margin-top: 9px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; color: white; background: transparent; font-size: 11px; }

.typing { display: flex; gap: 5px; padding: 4px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #98a2b7; animation: bounce 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }

dialog { width: min(calc(100% - 32px), 430px); border: 0; border-radius: 20px; padding: 20px; color: var(--ink); box-shadow: 0 22px 80px rgba(20, 31, 65, .25); }
dialog::backdrop { background: rgba(18, 25, 45, .42); backdrop-filter: blur(2px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; font-size: 18px; }
.dialog-head button { border: 0; background: transparent; font-size: 25px; color: #7c8494; }
dialog p { color: #697286; line-height: 1.7; font-size: 14px; }
.dialog-actions { display: flex; gap: 10px; margin-top: 18px; }
.dialog-actions button { flex: 1; height: 42px; border: 0; border-radius: 12px; }
.secondary-button { color: #536078; background: #eef1f7; }
.toast { position: fixed; left: 50%; bottom: 110px; z-index: 20; transform: translateX(-50%); max-width: calc(100% - 40px); padding: 10px 15px; border-radius: 12px; color: white; background: rgba(31, 38, 55, .9); font-size: 13px; box-shadow: 0 8px 25px rgba(0, 0, 0, .18); }

@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@keyframes pulse { 50% { transform: scale(.95); opacity: .82; } }

@media (min-width: 700px) {
  body { padding: 14px 0; }
  .app-shell { height: calc(100% - 28px); border-radius: 22px; overflow: hidden; }
  .messages { padding-left: 24px; padding-right: 24px; }
}