/* ============================================================
   指印咖啡 · 人类小帮手 —— Apple / iOS 主题层
   2026-10-05 小仕仕（应店长要求：简洁大方，苹果官方那种味道）
   用法：在 index.html 里 style.css **之后**加一行
        <link rel="stylesheet" href="/static/ios.css?v=YYYYMMDDHHMM">
   回滚：删掉那一行即可（本文件不改任何功能，只覆盖外观）
   口径：iOS 分组列表（Grouped Inset）+ 发丝线 + 毛玻璃 + SF 字体 + 系统色
   ============================================================ */

/* ---------- 系统色（Apple 语义色，浅色）---------- */
:root {
  --ios-bg: #F2F2F7;              /* systemGroupedBackground */
  --ios-card: #FFFFFF;
  --ios-label: #000000;
  --ios-label-2: rgba(60, 60, 67, 0.86);   /* secondaryLabel */
  --ios-label-3: rgba(60, 60, 67, 0.62);   /* tertiaryLabel */
  --ios-sep: rgba(60, 60, 67, 0.29);       /* separator */
  --ios-blue: #0A66D0;   /* 对比度：白字压它 5.5:1（原 #007AFF 只有 4.02:1） */
  --ios-green: #34C759;
  --ios-orange: #FF9500;
  --ios-red: #FF3B30;
  --ios-gray: #8E8E93;
  --ios-gray6: #F2F2F7;
  --ios-fill: rgba(120, 120, 128, 0.12);   /* fill for pills */
  --ios-blur: saturate(180%) blur(20px);
  --ios-bar: rgba(249, 249, 249, 0.94);
  --ios-radius-card: 12px;
  --ios-radius-bar: 18px;
  --ios-hairline: 0.5px;
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
              "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Helvetica Neue",
              "Microsoft YaHei", system-ui, sans-serif;
}

/* DARKOFF-20261011 小仕仕：本应用只做浅色一套。
   原深色样式只覆盖了少数走变量的元素，与全站硬编码的浅色打架 ——
   真机实测：打卡条 1.07:1、今日安排 1.05:1、#app 1:1（全屏黑吃黑），字等于消失。
   故撤掉深色块，由 color-scheme:light 统一交给浅色一套。 */
/* ---------- 布局修正（线上原有 bug，必须一起修）----------
   症状：内容一多，底部输入框掉到屏幕外（实测无主题 948 / 有主题 955，视口 844）。
   根因：#chatView 用了 height:100%，没扣掉顶部栏；@app 又不是 flex:1 分配。
   修法：让 #app 按列分配、#chatView 用 flex:1 + min-height:0，使消息区自己滚动、输入框永远贴底。 */
#app { height: 100dvh !important; display: flex !important; flex-direction: column !important; overflow: hidden; }
#chatView { height: auto !important; flex: 1 1 auto !important; min-height: 0 !important; }
#msgList { flex: 1 1 auto !important; min-height: 0 !important; }
#boardView, #accountsView { flex: 1 1 auto !important; min-height: 0 !important; }

/* ---------- 页面：iOS 分组背景 + SF 字体 ---------- */
body { font-family: var(--ios-font); background: var(--ios-bg); }
#app { background: var(--ios-bg); }
#app, #topbar, .bubble, button, input, textarea, select { font-family: var(--ios-font); }
button { -webkit-tap-highlight-color: transparent; transition: opacity .15s ease, transform .12s ease; }
button:active { transform: scale(.97); opacity: .85; }
* { -webkit-font-smoothing: antialiased; }

/* ---------- 顶部：iOS 导航栏（毛玻璃 + 发丝线，去掉绿色渐变）---------- */
#topbar {
  background: var(--ios-bar) !important;
  -webkit-backdrop-filter: var(--ios-blur);
  backdrop-filter: var(--ios-blur);
  color: var(--ios-label) !important;
  box-shadow: none !important;
  border-bottom: var(--ios-hairline) solid var(--ios-sep);
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  min-height: 48px;
}
.top-left .title { font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--ios-label); }
.top-left .subtitle { font-size: 12.5px; color: var(--ios-label-2); opacity: 1; margin-top: 1px; }
.top-right { gap: 6px; }
.name-tag {
  background: var(--ios-fill); color: var(--ios-label);
  border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 500;
}
.ck-tag { color: var(--ios-label-2); }
/* 工具按钮：iOS 用文字按钮（蓝色），不用彩色胶囊 */
.board-toggle, .coord-btn {
  background: transparent !important; color: var(--ios-blue) !important;
  border: none !important; box-shadow: none !important;
  font-size: 15px; font-weight: 400; padding: 6px 6px;
}
.icon-btn {
  background: transparent !important; color: var(--ios-blue) !important;
  width: auto !important; height: auto !important; font-size: 19px;
}
.icon-btn:active { background: transparent !important; opacity: .5; }

/* ---------- 消息区：iMessage 观感 ---------- */
#msgList { background: var(--ios-bg); padding: 14px 12px 10px; }
.msg { margin-bottom: 10px; }
.bubble {
  max-width: 76%; padding: 9px 14px; border-radius: 18px;
  font-size: 16.5px; line-height: 1.45; box-shadow: none;
}
.msg.me .bubble { background: var(--ios-blue); color: #fff; border-radius: 18px 18px 4px 18px; }
.msg.other .bubble, .msg.ai .bubble {
  background: var(--ios-card); color: var(--ios-label);
  border: none; border-left: none;                 /* 去掉微信风绿竖条 */
  border-radius: 18px 18px 18px 4px;
}
.msg.ai .bubble.notice { background: rgba(255, 149, 0, .12); color: var(--ios-label); }
.sender { font-size: 12px; color: var(--ios-label-2); margin: 0 6px 3px; font-weight: 500; }
.ts { font-size: 11px; color: var(--ios-label-3); margin-top: 3px; }
.bubble img.msg-img { border-radius: 14px; }
.bubble .file-link { background: var(--ios-fill); border-radius: 12px; color: var(--ios-label); }

/* ---------- 业务速问 / 快捷条：iOS 胶囊（白底 + 发丝线）---------- */
.biz-bar { background: transparent; padding: 6px 12px 2px; }
.biz-label { font-size: 12.5px; color: var(--ios-label-2); }
.biz-chip, .quick-btn {
  background: var(--ios-card) !important; color: var(--ios-label) !important;
  border: var(--ios-hairline) solid var(--ios-sep) !important;
  border-radius: 999px !important; font-size: 14px;
  padding: 7px 13px !important; box-shadow: none !important;
}
.biz-chip:active, .quick-btn:active { background: var(--ios-fill) !important; }
#quickBar { padding: 6px 12px 4px; gap: 8px; background: transparent; }

/* ---------- 底部输入：iMessage 输入栏（毛玻璃 + 圆形发送）---------- */
#inputBar {
  background: var(--ios-bar) !important;
  -webkit-backdrop-filter: var(--ios-blur);
  backdrop-filter: var(--ios-blur);
  border-top: var(--ios-hairline) solid var(--ios-sep) !important;
  padding: 8px 12px; padding-bottom: max(8px, env(safe-area-inset-bottom)); gap: 8px;
}
#input, #coordInput {
  background: var(--ios-card) !important; color: var(--ios-label) !important;
  border: var(--ios-hairline) solid var(--ios-sep) !important;
  border-radius: var(--ios-radius-bar) !important;
  font-size: 16.5px; padding: 9px 14px !important;
}
.send-btn {
  background: var(--ios-blue) !important; color: #fff !important;
  border-radius: 999px !important; font-size: 15px; font-weight: 500;
  padding: 0 16px !important; min-width: 60px; min-height: 36px;
  box-shadow: none !important;
}
.send-btn:disabled { background: var(--ios-fill) !important; color: var(--ios-label-3) !important; }

/* ---------- 看板 / 账号库：分组卡片 + 发丝线 ---------- */
#boardView, #accountsView { background: var(--ios-bg) !important; }
.board-col { background: var(--ios-card) !important; border-radius: var(--ios-radius-card) !important; box-shadow: none !important; border: none; }
.col-head { font-size: 13px; font-weight: 600; color: var(--ios-label-2); background: transparent !important; border-bottom: var(--ios-hairline) solid var(--ios-sep); }
.board-stat, .board-stats > * { background: var(--ios-card) !important; border-radius: var(--ios-radius-card) !important; box-shadow: none !important; }
.acc-search {
  background: var(--ios-card) !important; border: var(--ios-hairline) solid var(--ios-sep) !important;
  border-radius: 10px !important; color: var(--ios-label) !important; font-size: 16px;
}
.acc-item, .acc-list > * { background: var(--ios-card) !important; border-radius: var(--ios-radius-card) !important; box-shadow: none !important; }

/* ---------- 弹层 / 遮罩：iOS Alert 与 Sheet ---------- */
.modal-mask, .lightbox { background: rgba(0, 0, 0, .4) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal {
  background: var(--ios-card) !important; color: var(--ios-label) !important;
  border-radius: 14px !important; box-shadow: 0 12px 40px rgba(0, 0, 0, .18) !important;
}
.modal button, .modal .btn { border-radius: 10px; }

/* ============================================================
   考勤打卡条（att3.js 注入）—— 覆盖成 iOS 分组卡 + 系统色按钮
   ============================================================ */
#a3bar {
  background: var(--ios-card) !important;
  border-radius: var(--ios-radius-card) !important;
  box-shadow: none !important;
  border: none;
  margin: 8px 12px 4px !important;
  padding: 10px 12px 12px !important;
}
#a3bar .a3-live {
  background: var(--ios-fill) !important; border: none !important;
  border-radius: 10px !important; color: var(--ios-label) !important;
  font-size: 13px !important; padding: 7px 10px !important;
}
#a3bar .a3-live b { color: var(--ios-blue) !important; }
#a3bar .a3-today { color: var(--ios-label-2) !important; font-size: 12.5px !important; }
#a3bar button.a3-btn {
  border-radius: 12px !important; font-size: 15px !important; font-weight: 590 !important;
  min-height: 46px !important; box-shadow: none !important;
}
#a3bar .a3-in    { background: var(--ios-green) !important; }
#a3bar .a3-break { background: var(--ios-orange) !important; }
#a3bar .a3-back  { background: var(--ios-blue) !important; }
#a3bar .a3-out   { background: var(--ios-gray) !important; }
#a3bar .a3-meal  { background: #FF9F0A !important; }
#a3bar .a3-leave {
  background: var(--ios-card) !important; color: var(--ios-blue) !important;
  border: var(--ios-hairline) solid var(--ios-sep) !important;
}
#a3bar button.a3-btn[disabled] { background: var(--ios-fill) !important; color: var(--ios-label-3) !important; }
#a3bar .a3-why { font-size: 11px !important; }
#a3bar .a3-msg { background: var(--ios-fill) !important; border-radius: 10px !important; color: var(--ios-label) !important; }

/* 打卡弹层 → iOS Bottom Sheet（圆角 20 + 抓手 + 毛玻璃背板） */
#a3sheet { background: rgba(0, 0, 0, .4) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#a3sheet .a3-box {
  background: var(--ios-card) !important; color: var(--ios-label);
  border-radius: 20px 20px 0 0 !important;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom)) !important;
}
#a3sheet .a3-box::before {
  content: ""; display: block; width: 36px; height: 5px; border-radius: 3px;
  background: var(--ios-label-3); margin: 0 auto 12px;
}
#a3sheet .a3-box-h { font-size: 20px; font-weight: 600; }
#a3sheet .a3-hint, #a3sheet .a3-lab { color: var(--ios-label-2); font-size: 13px; }
#a3sheet input[type=file] {
  background: var(--ios-fill) !important; border: 1.5px dashed var(--ios-sep) !important;
  border-radius: 12px !important; color: var(--ios-label);
}
#a3sheet input[type=number], #a3sheet input[type=text] {
  background: var(--ios-card) !important; border: var(--ios-hairline) solid var(--ios-sep) !important;
  border-radius: 10px !important; color: var(--ios-label) !important;
}
#a3sheet .a3-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; }
#a3sheet .a3-go { background: var(--ios-blue) !important; border-radius: 12px !important; min-height: 50px; font-size: 17px; }
#a3sheet .a3-go[disabled] { background: var(--ios-fill) !important; color: var(--ios-label-3) !important; }
#a3sheet .a3-cancel { color: var(--ios-blue) !important; font-size: 16px; }
#a3sheet .a3-err-cap { background: rgba(255, 149, 0, .12) !important; border: none !important; }
#a3sheet .a3-cap-msg, #a3sheet .a3-cap-tip { color: var(--ios-label-2) !important; }
#a3sheet .a3-cap-wait { color: var(--ios-orange) !important; }

/* ---------- 细节：滚动条与长按 ---------- */
#msgList::-webkit-scrollbar, #boardView::-webkit-scrollbar, #accountsView::-webkit-scrollbar { width: 0; }
a, button { -webkit-user-select: none; user-select: none; }

/* ============================================================
   其余组件统一到 iOS 语言（2026-10-05 补）
   覆盖：今日安排卡 / 看板 / 任务卡 / 登录墙 / 角色选择 / 节日徽章 /
        渠道横幅 / 设备条 / 账号卡 / 时间分隔
   统一口径：白卡 + 12px 圆角 + 发丝线 + 语义色（不再用饱和促销色）
   ============================================================ */

/* 今日安排卡 */
.today-card, .plan-card, .task-card, .acc-card, .board-card {
  background: var(--ios-card) !important; border: none !important;
  border-radius: var(--ios-radius-card) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
  padding: 12px 14px !important; margin: 8px 0 !important;
}
.today-card-head { font-size: 15px !important; font-weight: 600 !important; color: var(--ios-label) !important; letter-spacing: 0 !important; }
.plan-card .pl-tick input { accent-color: var(--ios-blue); width: 20px; height: 20px; }
.plan-card .pl-time { color: var(--ios-blue) !important; font-weight: 600 !important; font-size: 14px !important; }
.plan-card .pl-who, .plan-card .pl-note, .plan-card .pl-ev { color: var(--ios-label-2) !important; font-size: 12.5px !important; }
.plan-card .pl-content { font-size: 15.5px !important; color: var(--ios-label) !important; }
.plan-card .pl-line, .bc-meta, .tc-meta { border-color: var(--ios-sep) !important; }
.plan-card .pl-btn, .tc-desc-toggle, .bc-actions > * {
  background: var(--ios-fill) !important; color: var(--ios-blue) !important;
  border: none !important; border-radius: 999px !important; font-size: 13px !important; padding: 6px 12px !important;
}
.plan-card .pl-btn.primary { background: var(--ios-blue) !important; color: #fff !important; }
.plan-card .pl-acc { color: var(--ios-green) !important; }
.plan-card .pl-receipt { color: var(--ios-label-2) !important; font-size: 12px !important; }

/* 徽章：全改 iOS 语义色（低饱和底 + 语义字色） */
.dl-fest, .remind-badge, .new-badge, .tc-status, .bc-pri {
  background: rgba(255, 149, 0, .14) !important; color: #B25000 !important;
  border: none !important; border-radius: 999px !important;
  font-size: 11.5px !important; font-weight: 600 !important; padding: 2px 8px !important;
}
.new-badge, .bc-pri.P0 { background: rgba(255, 59, 48, .14) !important; color: #C0392B !important; }
.bc-pri.P2 { background: var(--ios-fill) !important; color: var(--ios-label-2) !important; }
.tc-status.done, .bc-pri.P3 { background: rgba(52, 199, 89, .16) !important; color: #1B7F35 !important; }
.time-sep { background: transparent !important; color: var(--ios-label-3) !important; font-size: 12px !important; }

/* 看板 */
.board-stats .stat, .board-stats > div {
  background: var(--ios-card) !important; border-radius: var(--ios-radius-card) !important;
  box-shadow: none !important; border: none !important;
}
.board-stats .stat b { color: var(--ios-label) !important; }
.col-head.col-todo { color: #B25000 !important; }
.col-head.col-doing { color: var(--ios-blue) !important; }
.col-head.col-done { color: #1B7F35 !important; }
.col-head, .board-col .col-head { background: transparent !important; border-bottom: var(--ios-hairline) solid var(--ios-sep) !important; }
.board-card .bc-id { color: var(--ios-label-3) !important; font-family: ui-monospace, Menlo, monospace !important; }
.board-card .bc-title { font-size: 15.5px !important; font-weight: 600 !important; color: var(--ios-label) !important; }
.board-card .bc-desc, .board-card .bc-meta { color: var(--ios-label-2) !important; font-size: 13px !important; }

/* 登录墙 / 一人一码（pm-*）：做成 iOS 选择卡 */
.modal.pm-modal { border-radius: 20px !important; }
.pm-title { font-size: 20px !important; font-weight: 600 !important; color: var(--ios-label) !important; }
.pm-sub, .pm-hint { color: var(--ios-label-2) !important; font-size: 13px !important; line-height: 1.5 !important; }
.pm-people { gap: 10px !important; }
.pm-person {
  background: var(--ios-card) !important; border: var(--ios-hairline) solid var(--ios-sep) !important;
  border-radius: var(--ios-radius-card) !important; box-shadow: none !important;
}
.pm-person img { border-radius: 50% !important; }
.pm-n { font-size: 15px !important; font-weight: 600 !important; color: var(--ios-label) !important; }
.pm-r { font-size: 12.5px !important; color: var(--ios-label-2) !important; }
.pm-pwd, .modal textarea, .modal input {
  background: var(--ios-card) !important; color: var(--ios-label) !important;
  border: var(--ios-hairline) solid var(--ios-sep) !important; border-radius: 10px !important; font-size: 17px !important;
}
.pm-err { color: var(--ios-red) !important; font-size: 13px !important; }
.send-btn.pm-go { background: var(--ios-blue) !important; border-radius: 12px !important; }

/* 角色选择 / 设备条 / 渠道横幅 */
.role-picker { gap: 10px !important; }
.role-opt {
  background: var(--ios-card) !important; border: var(--ios-hairline) solid var(--ios-sep) !important;
  border-radius: var(--ios-radius-card) !important; box-shadow: none !important;
}
.role-opt.selected { border-color: var(--ios-blue) !important; background: rgba(0, 122, 255, .08) !important; }
.role-name { color: var(--ios-label) !important; font-weight: 600 !important; }
.role-desc, .role-icon { color: var(--ios-label-2) !important; }
.device-strip { gap: 8px !important; }
.device-chip {
  background: var(--ios-card) !important; border: var(--ios-hairline) solid var(--ios-sep) !important;
  border-radius: var(--ios-radius-card) !important; box-shadow: none !important;
}
.device-chip .d-label { color: var(--ios-label) !important; font-weight: 600 !important; }
.device-chip .d-channel, .device-chip .d-phone { color: var(--ios-label-2) !important; font-size: 12.5px !important; }
.chan-banner {
  background: rgba(0, 122, 255, .08) !important; border: none !important;
  border-radius: var(--ios-radius-card) !important; color: var(--ios-label) !important;
}
.chan-banner .cb-text b { color: var(--ios-blue) !important; }
.chan-banner .cb-btn { background: var(--ios-blue) !important; color: #fff !important; border-radius: 999px !important; border: none !important; }
.chan-banner .cb-close { color: var(--ios-label-2) !important; }

/* 任务卡细部 / 回执 */
.tc-desc, .ti-desc { color: var(--ios-label-2) !important; font-size: 13px !important; line-height: 1.5 !important; }
.tc-reply-in { background: var(--ios-card) !important; border: var(--ios-hairline) solid var(--ios-sep) !important; border-radius: 10px !important; color: var(--ios-label) !important; }
.tc-reply-send { background: var(--ios-blue) !important; color: #fff !important; border-radius: 999px !important; border: none !important; }
.rp-one { background: var(--ios-fill) !important; border-radius: 10px !important; color: var(--ios-label) !important; }
.rp-one.mgr { background: rgba(0, 122, 255, .10) !important; }
.rp-ok { color: var(--ios-green) !important; }
.acc-item, .acc-row { border-bottom: var(--ios-hairline) solid var(--ios-sep) !important; }
.typing .bubble { background: var(--ios-card) !important; }
.typing .dots span { background: var(--ios-label-3) !important; }

/* 头像一律正圆（实测被拉成 60×70 椭圆）——iOS 联系人观感 */
.pm-person img, .role-opt img, .msg .avatar, .bubble img.avatar {
  width: 58px !important; height: 58px !important;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50% !important; background: var(--ios-fill);
}
.pm-person { gap: 4px !important; padding: 8px 4px 7px !important; }
.pm-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-r { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 出品大姐档：补上提示语后版面多出 10px（实测输入框 854 > 视口 844）→ 收紧纵向预算 */
body.a3-tier-maker #a3bar { margin: 6px 10px 2px !important; padding: 9px 10px 10px !important; }
body.a3-tier-maker #msgList { padding: 6px 10px 4px !important; }
body.a3-tier-maker #a3bar::after { margin-top: 6px !important; padding: 7px 9px !important; }

/* FIX-20261005-scroll（小仕仕）：店长反馈"页面根本移动不了，上翻不了，下面的内容看不到"。
   根因：#app 是 height:100dvh + overflow:hidden 的固定高 flex 列，内容一超（新增的"今日安排"卡片变长）
   就被裁掉且无处可滚。#app 改为纵向可滚 → 任何内容都不会再被切掉；输入框随之在文档末尾，滚动可达。 */
#app { height: 100dvh !important; overflow-y: auto !important; overflow-x: hidden !important;
       -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; }
#chatView, #boardView, #accountsView, #coordView, #tasksView { min-height: 0 !important; }
#msgList { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
body { overflow: hidden !important; }

/* FIX-20261005-flow（小仕仕）：根治"页面动不了、下面的内容看不到"。
   前一版让 #app 可滚还不够：固定高 flex 列会把内容挤扁，被挤扁的块各自 overflow:hidden 裁掉，
   于是既滚不动、下面也永远看不到（实测 app 可滚=false）。
   本版改成正常文档流：卡片/打卡条按内容自然长，消息区自己滚且有上限，整页可滚 —— 任何内容都不会被裁。 */
html, body { height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; }
#app { height: auto !important; min-height: 100dvh !important; display: block !important; overflow: visible !important; }
#chatView, #boardView, #accountsView, #coordView, #tasksView { height: auto !important; flex: 0 0 auto !important; overflow: visible !important; }
#msgList, #coordMsgList { max-height: 46vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
.plan-card, #a3bar, #inputBar, #quickBar, #bizBar { flex-shrink: 0 !important; overflow: visible !important; max-height: none !important; }
.plan-card { max-height: none !important; }
#a3bar { position: sticky !important; top: 0 !important; z-index: 30 !important; }
#inputBar { position: sticky !important; bottom: 0 !important; z-index: 30 !important; }