/* Rules 手机版 · 配色与桌面版同一套 */
:root {
  --chat-bg: #EDEBE6;
  --head-bg: #F7F6F3;
  --ink: #23262B;
  --fs: 13px;
  --av: 36px;
  --line: #E2DFD8;
  /* 三个点菜单的字：白天黑夜都用蓝色，跟两种背景都拉开 */
  --menu-fg: #1A5FD0;
  --menu-sub: #5C7BA6;
  --menu-hit: rgba(26, 95, 208, .10);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--chat-bg);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI",
    "Microsoft YaHei", "Helvetica Neue", sans-serif;
  color: var(--ink);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

#app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}

/* ---------------- 顶栏 */
#head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 6px) 10px 6px;
  background: var(--head-bg);
  border-bottom: 1px solid var(--line);
  min-height: calc(52px + env(safe-area-inset-top));
  position: relative; z-index: 5;
}
.who { flex: 1 1 auto; min-width: 0; text-align: center; }
#name {
  font-size: 15px; font-weight: 500; color: #1F2328;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#status {
  font-size: calc(var(--fs) + 1px); color: #8A8681;
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#status.warn { color: #A32D2D; }
.icon-btn {
  flex: 0 0 auto; width: 40px; height: 36px;
  border: none; background: transparent; color: #5F5E5A;
  font-size: 20px; line-height: 1; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.icon-btn:active { background: #ECE9E3; }
#back { font-size: 26px; padding-bottom: 4px; }
#more { font-size: 15px; letter-spacing: 1px; }

/* ---------------- 聊天区 */
#chatWrap {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--chat-bg);
  background-size: cover;
  background-position: center;
}
#chat { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 9px; }

.row { display: flex; align-items: flex-start; gap: 8px; }
.row.rme { justify-content: flex-end; }
.row.box { justify-content: flex-start; }

.av {
  flex: 0 0 auto; width: var(--av); height: var(--av);
  border-radius: 50%; object-fit: cover; background: #3A3F46;
  display: flex; align-items: center; justify-content: center;
  color: #F4F4F1; font-size: 14px; font-weight: 500; overflow: hidden;
  user-select: none;
}
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bubble {
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: var(--fs);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  animation: pop .16s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.bot { background: var(--ink); color: #F4F4F1; border-top-left-radius: 4px; }
.scold {
  background: #332225; color: #F7E4E4;
  border-top-left-radius: 4px; border-left: 3px solid #A32D2D;
  padding-left: 11px;
}
.mine { background: #DCE7F5; color: #16202E; border-top-right-radius: 4px; }
.box-b {
  background: #FFFFFF; color: #1F2328;
  font-size: calc(var(--fs) - 1px);
  border: 1px solid #D9D5CC; border-radius: 10px;
  padding: 12px 14px; max-width: 88%;
}

.time-sep {
  align-self: center; font-size: 11px; color: #9A958C;
  background: rgba(255, 255, 255, .55);
  padding: 2px 10px; border-radius: 10px; margin: 4px 0;
}

/* 头像占位 */
.av.ph { background: #3A3F46; color: #F4F4F1; }
.av.ph.me-av { background: #DCE7F5; color: #16202E; }

/* ---------------- 类别快捷 */
#chips {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 14px 2px; background: var(--chat-bg);
}
.chip {
  background: #FFFFFF; border: 1px solid #D8D3CA; border-radius: 14px;
  padding: 5px 12px; font-size: 12px; color: #3A3A38;
  font-family: inherit; cursor: pointer;
}
.chip:active { background: #EFECE6; }

#recallBar {
  flex: 0 0 auto; padding: 4px 16px 2px; background: var(--chat-bg);
  display: flex;
}
#recallBtn {
  border: none; background: transparent; color: #9A958C;
  font-size: 11px; padding: 3px 0; font-family: inherit; cursor: pointer;
}
#recallBtn:disabled { color: #D8D4CC; }
#recallBtn.ok { color: #0F6E56; }

/* ---------------- 输入区 */
#inputWrap {
  flex: 0 0 auto;
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--head-bg);
  border-top: 1px solid var(--line);
}
#input {
  flex: 1 1 auto; min-width: 0;
  background: #FFFFFF; border: 1px solid #DBD7CF; border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;                 /* iOS 上小于 16px 会自动放大页面 */
  color: #1F2328; font-family: inherit;
  outline: none; appearance: none;
}
#input:focus { border-color: #9C968C; }
#send {
  flex: 0 0 auto; background: var(--ink); color: #FFFFFF;
  border: none; border-radius: 8px; padding: 11px 18px;
  font-size: var(--fs); font-family: inherit; cursor: pointer;
}
#send:active { background: #3A3F46; }
#send:disabled { background: #B4B2A9; }

/* ---------------- 弹层 */
.mask {
  position: fixed; inset: 0; background: rgba(20, 18, 16, .38);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 50; animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  width: 100%; max-width: 560px;
  background: #FFFFFF; border-radius: 16px 16px 0 0;
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto;
  animation: up .18s ease-out;
}
@keyframes up { from { transform: translateY(18px); } to { transform: none; } }
.sheet.grow { height: 88vh; display: flex; flex-direction: column; }

.sheet h3 {
  margin: 0; padding: 14px 18px 10px; font-size: 15px; font-weight: 500;
  border-bottom: 1px solid #EFECE6; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.sheet .body { padding: 8px 0 8px; overflow-y: auto; flex: 1 1 auto; }
.sheet .foot { padding: 10px 16px 6px; display: flex; gap: 8px; flex: 0 0 auto; }

.mi {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; font-size: 14px; color: var(--menu-fg);
  border: none; background: transparent; width: 100%; text-align: left;
  font-family: inherit; cursor: pointer;
}
.mi:active { background: var(--menu-hit); }
.mi .sub { font-size: 12px; color: var(--menu-sub); margin-left: auto; }
.mi.danger { color: #A32D2D; }

.close-x {
  border: none; background: transparent; color: #8A8681;
  font-size: 18px; width: 30px; height: 30px; cursor: pointer;
}

.field {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid #F4F2EE;
}
.field label { flex: 1 1 auto; font-size: 14px; color: #1F2328; }
.field .hint { display: block; font-size: 12px; color: #8A8681; margin-top: 2px; font-weight: 400; }
.field input[type="text"], .field input[type="number"], .field select {
  flex: 0 0 auto; width: 118px;
  border: 1px solid #DBD7CF; border-radius: 8px;
  padding: 8px 10px; font-size: 16px; font-family: inherit; color: #1F2328;
  background: #FFFFFF; outline: none; appearance: none;
}
.field input:focus, .field select:focus { border-color: #9C968C; }
.field.tall { align-items: flex-start; }
.switch { width: 46px; height: 28px; flex: 0 0 auto; position: relative; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i {
  display: block; width: 46px; height: 28px; border-radius: 14px;
  background: #D8D3CA; transition: background .15s;
}
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #FFF;
  transition: transform .15s;
}
.switch input:checked + i { background: #1D9E75; }
.switch input:checked + i::after { transform: translateX(18px); }

.btn {
  flex: 1 1 auto; border: 1px solid #DBD7CF; background: #FFFFFF;
  border-radius: 10px; padding: 12px; font-size: 14px;
  font-family: inherit; color: #1F2328; cursor: pointer;
}
.btn:active { background: #F4F2EE; }
.btn.primary { background: var(--ink); color: #FFF; border-color: var(--ink); }
.btn.danger { color: #A32D2D; border-color: #E8C9C9; }

/* 条目列表 */
.item {
  padding: 11px 18px; border-bottom: 1px solid #F4F2EE;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.item:active { background: #F8F6F2; }
.item .nm { flex: 1 1 auto; font-size: 14px; }
.item .nm small { display: block; color: #8A8681; font-size: 12px; margin-top: 3px; }
.item .num { font-size: 13px; color: #5F5E5A; white-space: nowrap; }
.item.off .nm { color: #B4B2A9; }

.empty { padding: 30px 18px; text-align: center; color: #9A958C; font-size: 13px; line-height: 1.7; }

.hist-row {
  padding: 11px 18px; border-bottom: 1px solid #F4F2EE; font-size: 13px;
}
.hist-row .top { display: flex; gap: 8px; align-items: baseline; }
.hist-row .top b { font-weight: 500; font-size: 14px; }
.hist-row .top span { margin-left: auto; color: #8A8681; font-size: 12px; }
.hist-row .its { color: #8A8681; font-size: 12px; margin-top: 4px; }

.banned-row {
  padding: 9px 18px; border-bottom: 1px solid #F4F2EE;
  display: flex; gap: 10px; align-items: center; font-size: 13px;
}
.banned-row span { flex: 1 1 auto; }
.banned-row button {
  border: 1px solid #DBD7CF; background: #FFF; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; font-family: inherit; cursor: pointer;
}

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: rgba(35, 38, 43, .92); color: #FFF;
  font-size: 13px; padding: 9px 16px; border-radius: 10px;
  z-index: 90; pointer-events: none; animation: fade .14s ease-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --chat-bg: #17181A; --head-bg: #1F2124; --line: #2C2E31;
    /* 天黑以后蓝要提亮，否则压在深色面板上还是糊成一片 */
    --menu-fg: #8FBBFA;
    --menu-sub: #93A6BE;
    --menu-hit: rgba(143, 187, 250, .16);
  }
  #name { color: #F0EEE9; }
  #input { background: #26282B; border-color: #3A3C40; color: #EDEBE6; }
  #send { background: #EDEBE6; color: #1A1C1E; }
  .bubble.bot { background: #EDEBE6; color: #1A1C1E; }
  .mine { background: #2B4055; color: #E4EEF8; }
  .box-b { background: #26282B; color: #EDEBE6; border-color: #3A3C40; }
  .sheet { background: #1F2124; color: #EDEBE6; }
  .sheet h3 { border-color: #2C2E31; }
  .item, .field, .hist-row, .banned-row { border-color: #2A2C2F; }
  .item .nm, .field label { color: #EDEBE6; }
  .item .num { color: #A8A49C; }
  .field input[type="text"], .field input[type="number"], .field select {
    background: #26282B; border-color: #3A3C40; color: #EDEBE6;
  }
  .banned-row button { background: #26282B; border-color: #3A3C40; color: #EDEBE6; }
  .chip { background: #26282B; border-color: #3A3C40; color: #DDD9D2; }
  .btn { background: #26282B; border-color: #3A3C40; color: #EDEBE6; }
  .btn.primary { background: #EDEBE6; color: #1A1C1E; }
  .btn.danger { color: #F0908F; border-color: #5A3A3A; }
  .mi.danger { color: #F0908F; }
  .av.ph { background: #3A3F46; }
}