:root{
  --bg-1:#0f1420; --bg-0:#1a2233; --block-bg:#111827;
  --text-1:#ffffff; --text-0:#cbd5e1;
  --primary:#3b82f6; --ok:#10b981; --danger:#ef4444;
  --border:#263046; --shadow:0 10px 30px rgba(0,0,0,.35);
}

.sentence-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.sentence-text {
  flex: 1;
  line-height: 1.5;
}
.sentence-item .sound {
  flex-shrink: 0;
}

/* 禁用双击放大 */
* {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 允许输入框和文本区域选择文本 */
input, textarea {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg-1);color:var(--text-1);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
.app{height:100vh;display:flex;flex-direction:column;min-width:320px}

header{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--border);background:#0c1220;position:relative}
header.hidden{display:none}
.back-btn{width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:var(--text-0);transition:color 0.2s;}
.back-btn:hover{color:var(--text-1);}
.placeholder{width:32px;}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:#263046;color:#d1d5db;cursor:pointer;font-weight:800}
#pageTitle,
.page-title{
  margin:0;
  font-size:20px;
  font-weight:800;
  flex:1;
  text-align:center
}
#progressBadge{min-width:64px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:#1f2937;color:#94a3b8;font-weight:700;visibility:hidden}

.menu{position:fixed;top:60px;right:16px;min-width:220px;background:var(--bg-0);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);
  display:none;overflow:hidden;z-index:9999}
.menu.open{display:block}
.menu .title{padding:10px 14px;font-weight:800;border-bottom:1px solid var(--border)}
.menu .item{padding:12px 14px;cursor:pointer}
.menu .item:hover{background:#1c2435}
.menu .danger{color:#ffb4b4}

.view{display:none;flex:1;min-height:0}
.view.active{display:flex;flex-direction:column}
main{flex:1;min-height:0;padding:16px;overflow:auto}
.footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:12px;align-items:center;background:#0c1220;flex-wrap:nowrap;overflow:hidden;width:100%;box-sizing:border-box}

.card{background:var(--bg-0);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:16px}
.btn{height:50px;border-radius:12px;border:none;display:grid;place-items:center;font-weight:800;letter-spacing:.2px;cursor:pointer;padding:0 16px;color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--primary)} .btn.ok{background:var(--ok)} .btn.danger{background:var(--danger)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:#cbd5e1}
.btn.sm{height:36px;padding:0 12px;border-radius:10px;font-size:14px}
.label{color:#9aa5b1;font-size:14px}
.input,.textarea{width:100%;background:#0b1220;border:1px solid var(--border);color:#fff;border-radius:10px;padding:12px;outline:none}
.textarea{resize:none;overflow:auto}

/* 手机端优化 */
@media (max-width: 768px) {
  .footer{gap:8px;padding:8px 12px;justify-content:space-between}
  .footer .label{font-size:12px;white-space:nowrap;flex-shrink:0}
  .footer .input{flex:1;max-width:80px;padding:8px;font-size:14px;margin:0 8px}
  .footer .btn{flex:1;max-width:120px;height:40px;font-size:14px;flex-shrink:0}
}

/* 防止手机端键盘弹出时界面抬高 */
@media (max-width: 768px) {
  .footer{position:fixed;bottom:24px;left:0;right:0;z-index:1001}
  body{height:100vh;overflow:hidden}
  .view{height:calc(100vh - 84px);overflow-y:auto}
  
  /* 优化主内容区域 */
  main{padding:8px;gap:8px;margin-bottom:84px;display:flex;flex-direction:column;height:100%}
  .card{padding:12px;margin-bottom:8px}
  .wordlist-card{flex:1;min-height:0}
  
  /* 优化学习进度卡片 */
  .card > div{gap:8px;flex-wrap:wrap}
  .card .badge{font-size:12px;padding:4px 8px}
  
  /* 优化按钮区域 */
  .card > div > div{gap:8px}
  .btn.sm{height:32px;padding:0 8px;font-size:12px}
  
  /* 优化文本区域 */
  .textarea{min-height:200px;font-size:14px;flex:1}
  
  /* 优化标题 */
  .card h3{font-size:16px;margin-bottom:8px}
}

.login-wrap{height:100%;display:grid;place-items:center}
.login-card{width:min(420px,92vw);display:grid;gap:14px}
.login-title{font-size:22px;font-weight:800;margin-bottom:2px}

.home-wrap{height:100%;display:flex;flex-direction:column;gap:14px}
.stats-card{display:flex;align-items:center;gap:14px}
.stats-card .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}
.stat{display:grid;gap:6px}
.stat .num{font-size:24px;font-weight:900}
.wordlist-card{flex:1;min-height:0;display:flex;flex-direction:column}
.wordlist-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.wordlist-card .textarea{flex:1;min-height:0}
.wordlist-note{font-size:12px;margin-top:6px;color:#9aa5b1}

.badge{background:#1f2937;color:#9aa5b1;padding:2px 8px;border-radius:6px;font-size:13px}
.phonetic{color:#9aa5b1}
.sound{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;color:#3b82f6;background:rgba(59,130,246,0.1);transition:all 0.2s ease}
.sound:hover{background:rgba(59,130,246,0.2);transform:scale(1.05)}
.sound:active{transform:scale(0.95)}
.pos{margin-top:10px;display:grid;gap:6px}
.pos p{margin:0;color:#cbd5e1}
.translation-lines{white-space:pre-line;line-height:1.6}

.block{margin-top:16px;background:#0d1322;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.block .title{background:#3b82f6;color:#fff;padding:8px 16px;font-size:18px;font-weight:800}
.block .content{padding:12px 14px}
.forms{display:flex;flex-wrap:wrap;gap:10px 18px}
.forms .item{display:flex;gap:8px}
.forms .name{color:#94a3b8}
.forms .value{color:#93c5fd;font-weight:700}

.sentences{display:grid;gap:0}
.sentences p{margin:4px 0}
.en{color:#cbd5e1}
.cn{color:#9aa5b1}
.ex-strong{ color:#93c5fd; font-weight:800; }

/* 状态栏样式 */
.status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  background: #0c1220;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #6b7280;
  z-index: 999;
  flex-shrink: 0;
  overflow: hidden;
  /* 防止整个状态栏的双击缩放 */
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.status-bar #versionInfo {
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 防止双击缩放和文本选择 */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* 为状态栏留出空间 */
.app {
  padding-bottom: 24px;
}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#263046;border-radius:6px}

.hidden {
  display: none !important;
}

/* === AI Chat View Styles === */
#view-ai {
  background: var(--bg-1);
  color: var(--text-1);
}

#view-ai .messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#view-ai .message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}

#view-ai .message.ai {
  align-items: flex-start;
}

#view-ai .message.user {
  align-items: flex-end;
}

#view-ai .message-content {
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.5;
  word-wrap: break-word;
}

#view-ai .message.ai .message-content {
  background: transparent;
  padding: 0;
  color: var(--text-0);
}

#view-ai .message.user .message-content {
  background: var(--primary);
  color: #ffffff;
  max-width: 70%;
}

#view-ai .input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #0c1220;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#view-ai .input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

#view-ai .input-wrapper {
  flex: 1;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#view-ai .input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: 16px;
  resize: none;
  max-height: 120px;
  min-height: 24px;
  overflow-y: auto;
}

#view-ai .input-field::placeholder {
  color: #6b7280;
}

#view-ai .mic-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

#view-ai .mic-btn:hover {
  background: var(--border);
  color: var(--text-0);
}

#view-ai .mic-btn:active {
  transform: scale(0.95);
}

#view-ai .recording-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

#view-ai .control-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

#view-ai .control-btn.cancel {
  border-color: var(--danger);
  color: var(--danger);
}

#view-ai .control-btn.cancel:hover {
  background: var(--danger);
  color: white;
}

#view-ai .control-btn.confirm {
  border-color: var(--ok);
  color: var(--ok);
}

#view-ai .control-btn.confirm:hover {
  background: var(--ok);
  color: white;
}

#view-ai .waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 40px;
}

#view-ai .wave-bar {
  width: 3px;
  background: var(--primary);
  border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}

#view-ai .wave-bar:nth-child(1) { animation-delay: 0s; height: 10px; }
#view-ai .wave-bar:nth-child(2) { animation-delay: 0.1s; height: 20px; }
#view-ai .wave-bar:nth-child(3) { animation-delay: 0.2s; height: 30px; }
#view-ai .wave-bar:nth-child(4) { animation-delay: 0.3s; height: 25px; }
#view-ai .wave-bar:nth-child(5) { animation-delay: 0.4s; height: 15px; }

@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.8); }
}

#view-ai .input-wrapper.recording {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

#view-ai .message-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

#view-ai .msg-action-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}

#view-ai .msg-action-btn:hover {
  background: var(--bg-0);
  color: var(--text-0);
}

#view-ai .msg-action-btn.active {
  color: var(--primary);
}

#view-ai .msg-action-btn.active.like {
  color: var(--ok);
}

#view-ai .msg-action-btn.active.dislike {
  color: var(--danger);
}

#view-ai .msg-action-btn.playing {
  color: var(--primary);
  background: rgba(59, 130, 246, 0.1);
}

#view-ai .send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

#view-ai .send-btn:hover {
  background: #2563eb;
}

#view-ai .send-btn:active {
  transform: scale(0.95);
}

#view-ai .send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#view-ai .empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #6b7280;
  padding: 32px;
  text-align: center;
}

#view-ai .empty-icon {
  width: 64px;
  height: 64px;
  opacity: 0.5;
}