/* ===== 输入栏 + 鉴权弹窗（叠加在 style.css 之上） ===== */
.input-bar {
  display: flex;
  gap: 10px;
  width: min(540px, 88vw);
  align-items: center;
}
#text-input {
  flex: 1;
  min-width: 0; /* 关键：允许 flex 收缩，否则手机窄屏会把发送按钮挤出屏外 */
  min-height: 46px;
  max-height: 180px;           /* 自动长高的上限，超出后内部滚动 */
  padding: 13px 16px;
  border-radius: 8px;
  background: rgba(8, 18, 30, 0.72);
  border: 1px solid rgba(0, 229, 255, 0.25);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  resize: none;                /* 禁用手动拖拽，高度由内容自动撑开 */
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-word;      /* 长串也能换行，避免横向滚出屏外 */
  -webkit-tap-highlight-color: transparent;
}
#text-input::placeholder { color: var(--text-dim); }
#text-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-soft);
}

/* 历史折叠按钮 ☰ */
.history-btn {
  padding: 13px 16px;
  border-radius: 8px;
  background: rgba(8, 18, 30, 0.72);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: var(--cyan);
  font-size: 16px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, border-color 0.15s;
}
.history-btn:hover { box-shadow: 0 0 16px var(--cyan-soft); }
.history-btn:active { transform: scale(0.92); }
.history-btn.active {
  color: var(--text);
  border-color: rgba(0, 229, 255, 0.7);
  box-shadow: 0 0 14px var(--cyan-soft);
}

.send-btn {
  padding: 13px 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #03131a;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 2px;
  border: none;
  cursor: pointer;
}
.send-btn:active { transform: scale(0.96); }

/* 继续播放按钮：默认隐藏，语音被「收起打断」后出现 */
.replay-btn {
  padding: 7px 16px;
  border-radius: 20px;
  background: rgba(8, 18, 30, 0.78);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: var(--cyan);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  display: none;
}
.replay-btn.show { display: inline-block; animation: replayIn 0.2s ease; }
@keyframes replayIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 场景模型切换器（control-bar 纵向列里的一行，跟输入栏同宽） */
.scene-bar {
  width: min(540px, 88vw);
  display: flex;
  justify-content: center;
}
#scene-select {
  width: 100%;
  max-width: 540px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(8, 18, 30, 0.72);
  border: 1px solid rgba(0, 229, 255, 0.25);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.5px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2317e0ff' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
  cursor: pointer;
}
#scene-select:focus { border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan-soft); }
#scene-select option { background: #0a1220; color: var(--text); }

/* 底部整体上移，给输入栏腾位置（去掉了语音开关那行，回到原高度） */
.conversation {
  bottom: 150px;
  pointer-events: auto;                 /* 覆盖 style.css 的 none：恢复滚动 + 上滑折叠手势 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 264px);      /* header 与输入栏之间，超出可上下滑动查看历史 */
  scrollbar-width: none;                /* 隐藏滚动条，保持科技感界面 */
}
.conversation::-webkit-scrollbar { display: none; }
.conversation .message { flex-shrink: 0; }   /* 防 flex 压缩，保证内容溢出可滚动 */
.control-bar { bottom: 32px; gap: 14px; }

/* 折叠态：完全隐藏对话流，露出中央能量核心 */
.conversation.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);   /* 保持水平居中 + 向下位移 */
}
.conversation { transition: opacity 0.25s ease, transform 0.25s ease; }

/* ===== 底部控制栏：z-index 高于 overlay-grid（z-index:1），防止点击被穿透拦截 ===== */
.control-bar { position: fixed; z-index: 10; }

/* APP / 手机端彻底隐藏网格装饰，避免满屏方格 + 交互层被遮挡 */
@media (max-width: 768px) { .overlay-grid { display: none !important; } }

/* ===== 鉴权弹窗 ===== */
.auth-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2, 4, 10, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
}
.auth-overlay.show { display: flex; }
.auth-box {
  display: flex; flex-direction: column; gap: 16px;
  width: min(320px, 86vw);
  padding: 32px 28px;
  background: rgba(8, 18, 30, 0.82);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.15);
}
.auth-title {
  font-size: 18px; letter-spacing: 2px; color: #eafcff;
  text-align: center; text-shadow: 0 0 12px var(--cyan-soft);
}
.auth-sub { font-size: 12px; color: var(--text-dim); text-align: center; }
#auth-input {
  padding: 12px 14px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: var(--text); font-family: inherit; font-size: 15px;
  text-align: center; outline: none; letter-spacing: 2px;
}
#auth-input:focus { border-color: var(--cyan); }
#auth-btn {
  padding: 12px; border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #03131a; font-weight: 600; font-family: inherit;
  font-size: 15px; letter-spacing: 4px; border: none; cursor: pointer;
}

/* 手机端微调 */
@media (max-width: 640px) {
  .conversation { bottom: 108px; max-height: calc(100vh - 200px); }
  .input-bar { width: 92vw; gap: 8px; }
  #text-input { font-size: 16px; padding: 13px 12px; max-height: 132px; } /* 避免 iOS 自动缩放；收紧 padding 给按钮腾位 */
  .img-btn { padding: 11px 12px; }
  .history-btn { padding: 13px 12px; }
  .send-btn { padding: 13px 14px; letter-spacing: 1px; }
}

/* ===== 图片上传 ===== */
.img-btn {
  padding: 11px 14px;
  border-radius: 8px;
  background: rgba(8, 18, 30, 0.72);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: var(--cyan);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
  /* 包裹了 <input type="file">，需要 position/overflow 让绝对定位的 input 不被展示 */
  position: relative; overflow: hidden;
}
.img-btn:hover { box-shadow: 0 0 16px var(--cyan-soft); }
.img-btn:active { transform: scale(0.92); }
.img-btn.has-img {
  color: #eafcff;
  border-color: var(--cyan);
  box-shadow: 0 0 14px var(--cyan-soft);
}

/* Android WebView 兼容：文件 input 必须留在 DOM 布局内、不能移出视口 */
.file-hidden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.image-preview {
  display: none;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: min(540px, 88vw);
}
.image-preview.show { display: flex; }
.image-preview .thumb {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, 0.4);
  background: rgba(8, 18, 30, 0.72);
}
.image-preview .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 视频附件：封面 + 居中 ▶ 角标（2026-10-13） */
.image-preview .thumb.vid { border-color: rgba(0, 229, 255, 0.75); }
.image-preview .thumb .play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
.image-preview .thumb .rm {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(2, 4, 10, 0.85);
  color: var(--cyan);
  font-size: 11px; line-height: 16px; text-align: center;
  cursor: pointer;
  border: 1px solid rgba(0, 229, 255, 0.5);
}

@media (max-width: 640px) {
  .image-preview { width: 92vw; }
}

/* ===== 壳内 Token 消耗面板（2026-09-18） ===== */
.usage-btn {
  position: fixed;
  left: 12px;
  bottom: calc(6px + env(safe-area-inset-bottom));
  z-index: 51;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(8, 18, 30, 0.78);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: var(--cyan);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.usage-btn:active { transform: scale(0.94); }

.usage-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(2, 6, 14, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.usage-overlay.show { display: flex; }

.usage-card {
  width: min(560px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 20, 34, 0.98), rgba(5, 11, 20, 0.98));
  border: 1px solid rgba(0, 229, 255, 0.3);
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.12);
}
.usage-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.usage-title { color: var(--cyan); font-size: 12px; letter-spacing: 1.5px; }
#usage-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 18px; line-height: 1; cursor: pointer; font-family: inherit;
  padding: 2px 6px;
}
#usage-close:active { color: var(--cyan); }

.usage-tiles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px;
}
.usage-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.16);
}
.usage-tile .k { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.usage-tile .v { font-size: 19px; color: #eaf7ff; }

.usage-sec {
  font-size: 11px; color: var(--cyan); letter-spacing: 1px;
  margin: 14px 0 8px; display: flex; justify-content: space-between; align-items: baseline;
}
.usage-sec em { font-style: normal; color: var(--text-dim); font-size: 10px; letter-spacing: 0; }

.usage-bars {
  display: flex; align-items: flex-end; gap: 4px; height: 110px;
  padding-bottom: 16px;
}
.usage-bar-wrap {
  position: relative; flex: 1; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
.usage-bar {
  display: block; width: 100%; max-width: 22px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #00e5ff, rgba(77, 141, 255, 0.35));
}
.usage-bar-x {
  position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--text-dim); white-space: nowrap;
}

.usage-list { display: flex; flex-direction: column; }
.usage-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid rgba(0, 229, 255, 0.08);
}
.usage-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.usage-row .t { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-row .m { font-size: 10px; color: var(--text-dim); }
.usage-row-num { font-size: 12px; color: var(--cyan); white-space: nowrap; }
.usage-empty { padding: 24px 0; text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.8; }
.usage-sub { font-size: 10px; color: var(--text-dim); }
.usage-foot { margin-top: 12px; font-size: 10px; color: var(--text-dim); line-height: 1.6; }

/* ===== 壳内 GEO 月度监测面板（2026-10-10）===== */
/* 复用 Token 面板的骨架类，只换配色（冷绿）与按钮位置，避免再复制一份卡片样式 */
.geo-btn {
  left: 12px;
  bottom: calc(34px + env(safe-area-inset-bottom));
  border-color: rgba(90, 230, 170, 0.34);
  color: #7ce6b4;
}
.geo-card .usage-title { color: #7ce6b4; }
.geo-card .usage-sec { color: #7ce6b4; }
.geo-card .usage-tile {
  background: rgba(90, 230, 170, 0.06);
  border-color: rgba(90, 230, 170, 0.18);
}
.geo-card .usage-tile .v { color: #eafff5; }
.geo-card .usage-row { border-bottom-color: rgba(90, 230, 170, 0.10); }
.geo-card .usage-row-num { color: #7ce6b4; }

.geo-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid rgba(90, 230, 170, 0.10);
  text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.geo-row:active { background: rgba(90, 230, 170, 0.07); }
.geo-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.geo-row .t { font-size: 13px; color: var(--text); }
.geo-row .m { font-size: 10px; color: var(--text-dim); line-height: 1.6; }
.geo-rate { font-size: 16px; font-weight: 600; color: #7ce6b4; white-space: nowrap; }
.geo-tip {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px; font-size: 10px; line-height: 1.7;
  color: var(--text-dim); background: rgba(90, 230, 170, 0.05);
  border: 1px solid rgba(90, 230, 170, 0.14);
}
.geo-tip b { color: #7ce6b4; font-weight: 600; }