/* ============================================================
   像素小手机 — 电子宠物游戏机风（黑白灰复古像素）
   ============================================================ */
:root {
  --ink: #0d0d0d;
  --paper: #e6e6e6;
  --panel: #f4f4f4;
  --tint: #8a8a8a;
  --shade: #3a3a3a;
  --bg: #bfbfbf;
  --case: #2b2b2b;       /* 机身主色 */
  --case-hi: #454545;    /* 机身高光 */
  --case-lo: #161616;    /* 机身阴影 */
  --shadow: 4px 4px 0 0 var(--ink);
  --shadow-sm: 3px 3px 0 0 var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; }
body {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  background:
    repeating-conic-gradient(#b5b5b5 0% 25%, #c4c4c4 0% 50%) 0 0 / 12px 12px,
    var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
.pixel-font { font-family: 'Press Start 2P', monospace; letter-spacing: .03em; }
.mono { font-family: 'VT323', monospace; }

/* ============================================================
   游戏机外壳（固定尺寸）
   ============================================================ */
#console {
  position: relative;
  width: 404px;
  max-width: 100vw;
  background: var(--case);
  border: 4px solid var(--ink);
  border-radius: 14px 14px 18px 18px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--case-hi), inset 0 -3px 0 var(--case-lo);
  padding: 12px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  /* 像素凸点装饰（角点）用 box-shadow 模拟 */
}

/* ---- 品牌条 ---- */
.brand-bar {
  display: flex; align-items: center; gap: 8px; padding: 2px 4px 0;
}
.brand-logo { display: inline-flex; filter: invert(1); }
.brand-name { font-size: 9px; color: var(--paper); }
.brand-dot { margin-left: auto; width: 7px; height: 7px; background: var(--paper); border: 1px solid var(--ink); }

/* ---- 屏幕凹槽 ---- */
.screen-frame {
  background: var(--case-lo);
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 10px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.7);
}
.screen {
  position: relative;
  width: 336px;
  height: 392px;
  background-color: var(--paper);
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.04) 75%),
    linear-gradient(45deg, rgba(0,0,0,.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.04) 75%);
  background-size: 5px 5px;
  background-position: 0 0, 2.5px 2.5px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
}
/* CRT 扫描线 */
.screen::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.06) 0 1px, transparent 1px 3px);
  pointer-events: none; z-index: 50; mix-blend-mode: multiply;
}

/* ---- 通用 ---- */
.pixel-border { border: 2px solid var(--ink); }
.hidden { display: none !important; }

/* ---- 状态栏 ---- */
#status-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px; border-bottom: 2px solid var(--ink);
  background: var(--ink); color: var(--paper); z-index: 2; flex-shrink: 0;
}
#status-time { font-size: 9px; }
.status-right { display: flex; align-items: center; gap: 6px; }
.sig { width: 13px; height: 7px; background: var(--paper); clip-path: polygon(0 100%, 25% 100%, 25% 66%, 50% 66%, 50% 33%, 75% 33%, 75% 0, 100% 0, 100% 100%); }
.bat { width: 15px; height: 7px; border: 1px solid var(--paper); position: relative; }
.bat::after { content: ''; position: absolute; right: -3px; top: 2px; width: 2px; height: 3px; background: var(--paper); }
.bat::before { content: ''; position: absolute; inset: 1px; background: var(--paper); }

/* ---- 视图 ---- */
.view { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

/* ---- 按钮 ---- */
.pbtn {
  font-family: inherit; font-size: 12px; padding: 6px 12px;
  background: var(--panel); color: var(--ink); border: 2px solid var(--ink);
  cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .08s;
}
.pbtn:active, .pbtn.loading { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pbtn:disabled { opacity: .5; cursor: not-allowed; }
.pbtn-primary { background: var(--ink); color: var(--paper); }
.pbtn-danger {
  background: repeating-linear-gradient(45deg, var(--ink) 0 4px, var(--paper) 4px 8px);
  color: var(--ink);
}
.icon-btn, .icon-btn-sm {
  background: var(--panel); border: 2px solid var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 3px;
  box-shadow: var(--shadow-sm); width: 30px; height: 30px;
}
.icon-btn:active, .icon-btn-sm:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ---- 像素方块头像（替代 emoji） ---- */
.pix-avatar {
  width: 22px; height: 22px; border: 2px solid var(--ink); display: inline-flex;
  align-items: center; justify-content: center; background: var(--ink); color: var(--paper);
  font-family: 'Press Start 2P', monospace; font-size: 9px; flex-shrink: 0; box-shadow: 2px 2px 0 var(--ink);
}
.chat-avatar { width: 24px; height: 24px; }
.avatar-lg { width: 30px; height: 30px; font-size: 11px; }

/* ============================================================
   聊天
   ============================================================ */
.chat-header, .app-header {
  display: flex; align-items: center; gap: 6px; padding: 6px;
  background: var(--panel); border-bottom: 2px solid var(--ink); z-index: 3; flex-shrink: 0;
}
.chat-title-wrap { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
#chat-title { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat-tokens { font-family: 'VT323', monospace; font-size: 13px; color: var(--shade); background: var(--paper); border: 1px solid var(--ink); padding: 1px 5px; }
.msg-flow { flex: 1; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 8px; }
.msg-row { display: flex; max-width: 100%; }
.msg-row.mine { justify-content: flex-end; }
.msg-row.their { justify-content: flex-start; }
.bubble {
  max-width: 82%; padding: 7px 9px; border: 2px solid var(--ink); word-break: break-word;
  font-size: 13px; line-height: 1.5; position: relative; box-shadow: var(--shadow-sm);
}
.msg-row.mine .bubble { background: var(--ink); color: var(--paper); }
.msg-row.their .bubble { background: var(--panel); color: var(--ink); }
.bubble-time { font-size: 8px; color: var(--tint); margin-top: 3px; text-align: right; }
.msg-row.mine .bubble-time { color: rgba(230,230,230,.6); }
.typing { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .4; } }

.chat-input-row {
  display: flex; align-items: flex-end; gap: 5px; padding: 5px;
  background: var(--panel); border-top: 2px solid var(--ink); z-index: 3; flex-shrink: 0;
}
.msg-input {
  flex: 1; resize: none; border: 2px solid var(--ink); background: #fff;
  padding: 7px; font-family: inherit; font-size: 13px; line-height: 1.4; min-height: 32px; outline: none;
}
#btn-ai { padding: 7px 10px; }

/* ---- App 容器 ---- */
.app-body { flex: 1; overflow-y: auto; padding: 8px; }
.app-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.app-toolbar .spacer { flex: 1; }
.app-list { display: flex; flex-direction: column; gap: 8px; }

/* ---- 条目卡片 ---- */
.entry-card {
  background: var(--panel); padding: 8px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .08s;
}
.entry-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.entry-card.active { background: var(--ink); color: var(--paper); }
.entry-card.active .entry-preview { color: rgba(230,230,230,.7); }
.entry-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.entry-title { font-weight: 700; font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-cat { font-size: 8px; padding: 1px 4px; border: 1px solid var(--ink); background: var(--paper); }
.entry-preview { font-size: 11px; color: var(--tint); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge { font-size: 8px; padding: 1px 4px; border: 1px solid var(--ink); }
.toggle {
  font-family: 'Press Start 2P', monospace; font-size: 7px; padding: 3px 5px;
  border: 2px solid var(--ink); background: var(--paper); cursor: pointer;
}
.toggle.on { background: var(--ink); color: var(--paper); }
.muted { color: var(--tint); }
.empty { text-align: center; color: var(--tint); font-size: 12px; padding: 24px 0; }

/* ---- 提示词 / 装配顺序 ---- */
.prompts-wrap { display: flex; flex-direction: column; gap: 8px; }
.tab-bar { display: flex; gap: 3px; padding: 3px; background: var(--panel); border: 2px solid var(--ink); }
.tab { flex: 1; font-size: 10px; padding: 5px 0; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; }
.tab.on { background: var(--ink); color: var(--paper); }
.section-title { font-size: 10px; font-weight: 700; margin: 10px 0 5px; color: var(--shade); }
.order-list { display: flex; flex-direction: column; gap: 5px; }
.order-row { display: flex; align-items: center; gap: 7px; padding: 6px 8px; background: var(--panel); border: 2px solid var(--ink); }
.order-num { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--tint); }
.order-label { flex: 1; font-size: 12px; font-weight: 700; }
.order-btns { display: flex; gap: 3px; }
.order-btns button { width: 24px; height: 24px; font-size: 12px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; }
.order-btns button:disabled { opacity: .3; }

/* ---- 设置 ---- */
.preset-card .entry-preview { font-size: 10px; }
.model-row { display: flex; align-items: center; gap: 8px; }
.model-row .field-label { margin: 8px 0 2px; }
.model-select { margin-bottom: 4px; }
.model-status { font-size: 10px; color: var(--tint); margin: 4px 0; min-height: 14px; }
.temp-row { display: flex; align-items: center; gap: 8px; }
.temp-row input { flex: 1; accent-color: var(--ink); }
.temp-row span { font-family: 'VT323', monospace; font-size: 15px; min-width: 22px; text-align: right; }
.check { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; cursor: pointer; margin-right: 8px; }
.check input { accent-color: var(--ink); }
.toggle-row { display: flex; flex-wrap: wrap; gap: 5px 0; margin-top: 6px; }
.bind-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 5px; }

/* ---- 特殊指令卡片 ---- */
.card { border: 2px solid var(--ink); background: #fff; padding: 7px; margin: 3px 0; display: flex; gap: 7px; align-items: center; box-shadow: var(--shadow-sm); }
.card-ico { display: flex; }
.card-body { flex: 1; min-width: 0; }
.card-title { font-size: 10px; font-weight: 700; }
.card-sub { font-size: 10px; color: var(--tint); word-break: break-word; }
.card-sticker { display: inline-block; padding: 5px 8px; background: var(--panel); border: 2px dashed var(--ink); font-size: 11px; }
.card-transfer .card-amount { font-family: 'VT323', monospace; font-size: 16px; }

/* ---- 弹窗 ---- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-card {
  width: min(340px, 92vw); max-height: 84vh; background: var(--paper);
  padding: 12px; box-shadow: var(--shadow); overflow-y: auto;
}
.modal-card.scrollable { overflow-y: auto; }
.modal-title { font-family: 'Press Start 2P', monospace; font-size: 10px; margin-bottom: 8px; }
.modal-text { font-size: 13px; line-height: 1.5; margin-bottom: 10px; white-space: pre-wrap; }
.modal-error { font-family: 'VT323', monospace; font-size: 13px; color: var(--shade); background: #fff; border: 2px solid var(--ink); padding: 7px; word-break: break-all; }
.modal-actions { display: flex; gap: 5px; justify-content: flex-end; margin-top: 8px; }
.field-label { display: block; font-size: 10px; font-weight: 700; margin: 6px 0 2px; color: var(--shade); }
.pinput {
  width: 100%; border: 2px solid var(--ink); background: #fff; padding: 7px;
  font-family: inherit; font-size: 12px; line-height: 1.5; outline: none;
}
.pinput:focus { background: #ffffe0; }

/* ============================================================
   实体按键装饰区
   ============================================================ */
.pad {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 6px 0;
}
/* 十字方向键 */
.dpad { position: relative; width: 64px; height: 64px; }
.dpad span { position: absolute; background: var(--ink); }
.dpad-h { width: 40px; height: 14px; top: 25px; left: 12px; box-shadow: inset 0 -2px 0 var(--case-lo); }
.dpad-v { width: 14px; height: 40px; top: 12px; left: 25px; box-shadow: inset -2px 0 0 var(--case-lo); }
.dpad-c { width: 14px; height: 14px; top: 25px; left: 25px; background: var(--case-lo); }
/* 中心十字凹点用伪元素 */
.dpad-c::after { content: ''; position: absolute; inset: 4px; background: var(--case-hi); }

/* 电源指示 */
.pad-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.led { width: 6px; height: 6px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 0 4px var(--paper); }
.led-label { font-size: 6px; color: var(--tint); }

/* A/B 圆钮（像素风八角） */
.ab-pad { display: flex; align-items: center; gap: 10px; transform: rotate(-20deg); }
.round-btn {
  width: 34px; height: 34px; border: 2px solid var(--ink); cursor: pointer;
  background: var(--case-hi); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; box-shadow: 2px 2px 0 var(--ink), inset 0 -3px 0 var(--case-lo);
  transition: transform .08s; padding: 0;
}
.round-btn span { font-size: 11px; transform: rotate(20deg); }
.round-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* 扬声器条纹 */
.speaker-grill {
  display: flex; gap: 4px; justify-content: center; padding: 2px 0 0; transform: rotate(-20deg) translateX(-12px); align-self: flex-end; margin-right: 18px;
}
.speaker-grill span {
  width: 3px; height: 14px; background: var(--case-lo); border: 1px solid var(--ink);
  border-radius: 2px;
}

/* ============================================================
   菜单覆盖层
   ============================================================ */
.menu-overlay {
  position: fixed; inset: 0; background: rgba(13,13,13,.6); z-index: 150;
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
.menu-panel {
  width: 220px; background: var(--paper); padding: 12px; box-shadow: var(--shadow); text-align: center;
}
.menu-title { font-size: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.menu-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.menu-item {
  display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer;
  background: var(--panel); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  transition: transform .08s;
}
.menu-item:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.menu-item-ico { display: inline-flex; flex-shrink: 0; }
.menu-item-name { font-size: 12px; font-weight: 700; }
.menu-close { width: 100%; }
.menu-install { width: 100%; margin-bottom: 5px; }

/* ---- Toast ---- */
.mo-toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper); padding: 7px 12px; border: 2px solid var(--paper);
  box-shadow: var(--shadow-sm); font-size: 11px; opacity: 0; transition: .2s; z-index: 300; pointer-events: none;
}
.mo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- 滚动条 ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--ink); }
::-webkit-scrollbar-track { background: var(--tint); }