/* ========================================
 * 患者端 H5 设计系统 v2.0 - 高保真
 * 参考：现代医疗APP（丁香医生/平安好医生）
 * ======================================== */
:root{
  --brand:#2563EB; --brand-2:#06B6D4; --brand-3:#10B981;
  --grad-primary:linear-gradient(135deg,#2563EB 0%,#06B6D4 100%);
  --grad-care:linear-gradient(135deg,#06B6D4 0%,#10B981 100%);
  --grad-warm:linear-gradient(135deg,#F59E0B 0%,#EF4444 100%);
  --grad-purple:linear-gradient(135deg,#8B5CF6 0%,#EC4899 100%);
  --grad-bg:linear-gradient(180deg,#EFF6FF 0%,#F8FAFC 50%,#F1F5F9 100%);
  --m-bg:#F1F5F9; --m-card:#FFFFFF;
  --m-text:#0F172A; --m-text-2:#475569; --m-text-3:#94A3B8;
  --m-border:#E2E8F0; --m-line:#F1F5F9;
  --m-danger:#EF4444; --m-warning:#F59E0B; --m-success:#10B981;
  --m-shadow-1:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.04);
  --m-shadow-2:0 4px 12px rgba(15,23,42,.06),0 2px 4px rgba(15,23,42,.04);
  --m-shadow-3:0 12px 32px rgba(37,99,235,.12),0 4px 12px rgba(15,23,42,.06);
}

/* ========================================
 * Page shell - 手机壳模拟
 * ======================================== */
body.mobile-page{margin:0;background:#E2E8F0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;color:var(--m-text);-webkit-font-smoothing:antialiased}
.mobile-shell{max-width:414px;min-height:100vh;margin:0 auto;background:var(--m-bg);position:relative;padding-bottom:80px;overflow-x:hidden}

@media(min-width:768px){
  /* 桌面：body 居中容器，禁止外滚动 */
  body.mobile-page{
    background:radial-gradient(ellipse at top,#DBEAFE 0%,#E2E8F0 50%,#CBD5E1 100%);
    height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 0;
    min-height:0;
  }
  /* 手机壳：430px 总宽（414 内容 + 16 边框）；内部滚动 */
  .mobile-shell{
    width:430px;
    height:844px;
    max-height:calc(100vh - 48px);
    min-height:auto;
    margin:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    border-radius:44px;
    border:8px solid #1E293B;
    box-shadow:0 24px 60px rgba(15,23,42,.22),0 8px 16px rgba(15,23,42,.08);
    display:flex;
    flex-direction:column;
    padding-bottom:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
    position:relative;
  }
  .mobile-shell::-webkit-scrollbar{width:0;height:0;display:none;background:transparent}

  /* 灵动岛：sticky 跟随顶部，永远在最上层（不占用顶部留白） */
  .mobile-shell::before{
    content:"";
    display:block;
    position:sticky;
    top:8px;
    z-index:300;
    width:110px;
    height:26px;
    background:#0F172A;
    border-radius:14px;
    margin:0 auto -26px;
    flex-shrink:0;
    pointer-events:none;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
  }

  /* 状态栏 sticky 顶部 */
  .mobile-shell > .m-status{
    position:sticky !important;
    top:0 !important;
    z-index:200;
    flex-shrink:0;
    background:transparent;
    height:38px !important;
    padding-top:8px !important;
  }
  /* hero 页白色状态栏：加渐变底色保证滚动过白色卡片时仍可读 */
  .mobile-shell > .m-status[style*="color:#fff"],
  .mobile-shell > .m-status[style*="color: #fff"]{
    background:linear-gradient(180deg,rgba(15,23,42,.08) 0%,transparent 100%);
  }
  /* hero 页：状态栏覆盖在 hero 上 */
  .mobile-shell > .m-status[style*="position:absolute"],
  .mobile-shell > .m-status[style*="position: absolute"]{
    margin-bottom:-38px !important;
  }

  /* hero 页将 padding-top 由 50 提升以容纳灵动岛 */
  .mobile-shell > .hero{
    padding-top:56px !important;
  }

  /* m-nav 桌面下移 38px 避开状态栏 */
  .mobile-shell > .m-nav{
    top:38px !important;
    z-index:90;
  }

  /* TabBar sticky 贴底（仅当 tabbar 在 shell 内部时生效） */
  .mobile-shell > .m-tabbar{
    position:sticky !important;
    bottom:0 !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    margin-top:auto;
    margin-left:0;
    margin-right:0;
    flex-shrink:0;
    border-radius:0 0 36px 36px;
  }

  /* TabBar 在 body 级（手机壳同级，HTML 历史结构）→ fixed 定位贴到手机壳底部边缘 */
  body.mobile-page > .m-tabbar{
    position:fixed !important;
    bottom:max(24px, calc(50vh - 422px)) !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:414px !important;
    max-width:none !important;
    border-radius:0 0 36px 36px !important;
    z-index:200;
  }
  /* 当存在 body 级 tabbar 时，手机壳底部预留 tabbar 高度的空间 */
  body.mobile-page:has(> .m-tabbar) .mobile-shell{
    padding-bottom:64px;
  }

  /* 聊天输入栏 sticky 贴底 */
  .mobile-shell > .chat-input-bar{
    position:sticky !important;
    bottom:0 !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    margin-top:auto;
    flex-shrink:0;
    border-radius:0 0 36px 36px;
  }

  /* 全屏覆盖屏（预警/拨号）→ 限制在手机壳尺寸内 */
  body.mobile-page > .alert-screen,
  body.mobile-page > .calling-screen{
    position:relative !important;
    inset:auto !important;
    width:430px;
    height:844px;
    max-height:calc(100vh - 48px);
    min-height:auto;
    border-radius:44px;
    border:8px solid #1E293B;
    box-shadow:0 24px 60px rgba(15,23,42,.22),0 8px 16px rgba(15,23,42,.08);
    overflow:hidden;
    overflow-y:auto;
    margin:0;
    transform:none !important;
    left:auto !important;
    max-width:none !important;
    scrollbar-width:none;
  }
  body.mobile-page > .alert-screen::-webkit-scrollbar,
  body.mobile-page > .calling-screen::-webkit-scrollbar{display:none;width:0}

  /* chat-shell flex:1 占满剩余高度，内部滚动 */
  .mobile-shell > .chat-shell{
    flex:1 1 auto;
    min-height:auto !important;
    overflow-y:auto;
    padding-bottom:14px !important;
    scrollbar-width:none;
  }
  .mobile-shell > .chat-shell::-webkit-scrollbar{display:none;width:0}

  /* 防止 flex 项目意外被压缩 → 保证所有内容按自然高度排列 */
  .mobile-shell > *{
    flex-shrink:0;
  }
  .mobile-shell > .chat-shell{
    flex-shrink:1;
  }
}

/* 移动端真机：保持自然滚动行为（body 滚动） */
@media(max-width:767px){
  .mobile-shell{overflow:visible}
}

/* iOS 状态栏 */
.m-status{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:13px;font-weight:600;color:var(--m-text);background:transparent;position:relative;z-index:99}
.m-status .right{display:flex;gap:5px;align-items:center;font-size:11px}
.m-status .right .battery{width:22px;height:11px;border:1px solid var(--m-text);border-radius:3px;position:relative;padding:1px}
.m-status .right .battery::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;background:var(--m-text);border-radius:0 1px 1px 0}
.m-status .right .battery i{display:block;height:100%;width:75%;background:var(--m-text);border-radius:1px}

/* 导航栏 */
.m-nav{height:46px;display:flex;align-items:center;padding:0 16px;background:var(--m-card);border-bottom:1px solid var(--m-line);position:sticky;top:0;z-index:90;backdrop-filter:saturate(180%) blur(20px)}
.m-nav.transparent{background:transparent;border-bottom:0;position:absolute;top:32px;left:0;right:0;max-width:414px;margin:0 auto;color:#fff}
.m-nav.transparent .back,.m-nav.transparent .title{color:#fff}
.m-nav .back{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--m-text);font-size:18px;font-weight:300}
.m-nav .back:active{background:rgba(0,0,0,.05)}
.m-nav .title{flex:1;text-align:center;font-size:16px;font-weight:600;margin-right:32px;letter-spacing:-.2px}
.m-nav .right{font-size:14px;color:var(--brand);font-weight:500}
.m-nav .right.icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--m-text)}

/* ========================================
 * Tab Bar - 底部
 * ======================================== */
.m-tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:414px;width:100%;height:64px;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--m-line);display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:768px){.m-tabbar{position:absolute;border-radius:0 0 28px 28px}}
.m-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--m-text-3);font-size:10px;gap:3px;text-decoration:none;font-weight:500;transition:color .2s}
.m-tabbar a.active{color:var(--brand)}
.m-tabbar a .ico{font-size:22px;line-height:1}
.m-tabbar a.center{position:relative}
.m-tabbar a.center .ico{width:48px;height:48px;border-radius:50%;background:var(--grad-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;margin-top:-20px;box-shadow:0 6px 16px rgba(37,99,235,.4);font-weight:400}

/* ========================================
 * 通用组件
 * ======================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;border:0;cursor:pointer;letter-spacing:-.1px;transition:all .2s;font-family:inherit;background:transparent;color:var(--m-text)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad-primary);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.btn-default{background:var(--m-card);color:var(--m-text);border:1px solid var(--m-border)}
.btn-success{background:var(--m-success);color:#fff}
.btn-danger{background:var(--m-danger);color:#fff;box-shadow:0 4px 12px rgba(239,68,68,.25)}
.btn-warning{background:var(--grad-warm);color:#fff}
.btn-ghost{background:rgba(37,99,235,.08);color:var(--brand)}
.btn-block{display:flex;width:100%}
.btn-lg{padding:14px 24px;font-size:15px;border-radius:14px}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}
.btn-pill{border-radius:24px}

.tag{display:inline-flex;align-items:center;padding:3px 8px;font-size:11px;border-radius:6px;font-weight:500;line-height:1.5;letter-spacing:.2px}
.tag-primary{background:rgba(37,99,235,.1);color:var(--brand)}
.tag-success{background:rgba(16,185,129,.1);color:var(--m-success)}
.tag-warning{background:rgba(245,158,11,.1);color:var(--m-warning)}
.tag-danger{background:rgba(239,68,68,.1);color:var(--m-danger)}
.tag-default{background:#F1F5F9;color:var(--m-text-2)}

/* Card 卡片 */
.card{background:var(--m-card);border-radius:16px;padding:16px;box-shadow:var(--m-shadow-1)}
.card-2{background:var(--m-card);border-radius:18px;padding:18px;box-shadow:var(--m-shadow-2)}
.card-floating{background:var(--m-card);border-radius:20px;padding:20px;box-shadow:var(--m-shadow-3)}

/* 异常数据 */
.val-abnormal{color:var(--m-danger);font-weight:700;display:inline-flex;align-items:center;gap:3px}
.val-abnormal::before{content:"↑";font-size:.85em}
.val-warning{color:var(--m-warning);font-weight:700}
.val-normal{color:var(--m-success);font-weight:700}

/* ========================================
 * 顶部 Hero Header - 卡片渐变
 * ======================================== */
.hero{background:var(--grad-primary);color:#fff;padding:0 20px 28px;position:relative;overflow:hidden;border-radius:0 0 28px 28px}
.hero.care{background:var(--grad-care)}
.hero.warm{background:var(--grad-warm)}
.hero::before{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:rgba(255,255,255,.08);border-radius:50%;filter:blur(20px)}
.hero::after{content:"";position:absolute;bottom:-60px;left:-30px;width:180px;height:180px;background:rgba(255,255,255,.06);border-radius:50%;filter:blur(20px)}
.hero > *{position:relative;z-index:1}
.hero-row{display:flex;align-items:center;gap:14px;margin-top:8px}
.hero-avatar{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600}
.hero-name{font-size:20px;font-weight:700;letter-spacing:-.5px}
.hero-sub{font-size:13px;opacity:.92;margin-top:2px}
.hero-tags{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.hero-tags span{padding:4px 10px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);border-radius:14px;font-size:11px;font-weight:500;border:1px solid rgba(255,255,255,.2)}

/* 状态卡 - Hero下方悬浮卡 */
.hero-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff;border-radius:16px;padding:16px;margin:-20px 16px 0;box-shadow:var(--m-shadow-3);position:relative;z-index:5}
.hero-stat > div{text-align:center;padding:0 6px;border-right:1px solid var(--m-line)}
.hero-stat > div:last-child{border-right:0}
.hero-stat .num{font-size:22px;font-weight:700;color:var(--m-text);letter-spacing:-.5px;line-height:1.1}
.hero-stat .num.danger{color:var(--m-danger)}
.hero-stat .num.warning{color:var(--m-warning)}
.hero-stat .lab{font-size:11px;color:var(--m-text-3);margin-top:4px}

/* ========================================
 * Section
 * ======================================== */
.section{padding:0 16px;margin-top:20px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}
.section-head h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--m-text)}
.section-head .more{font-size:13px;color:var(--m-text-3);display:flex;align-items:center;gap:2px}
.section-head .more::after{content:"›";margin-left:2px}

/* ========================================
 * Grid - 快捷入口
 * ======================================== */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#fff;border-radius:18px;padding:18px 8px;box-shadow:var(--m-shadow-1)}
.quick-grid a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;color:var(--m-text);text-decoration:none}
.quick-grid a .ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;position:relative;transition:transform .2s}
.quick-grid a:active .ico{transform:scale(.92)}
.quick-grid a .lab{font-size:11px;color:var(--m-text-2);font-weight:500}
.quick-grid a .badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;background:var(--m-danger);color:#fff;border-radius:8px;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600;border:2px solid #fff}
.ico-blue{background:var(--grad-primary)}
.ico-cyan{background:linear-gradient(135deg,#06B6D4,#3B82F6)}
.ico-green{background:linear-gradient(135deg,#10B981,#06B6D4)}
.ico-orange{background:linear-gradient(135deg,#F59E0B,#EF4444)}
.ico-purple{background:var(--grad-purple)}
.ico-pink{background:linear-gradient(135deg,#EC4899,#F43F5E)}
.ico-indigo{background:linear-gradient(135deg,#6366F1,#8B5CF6)}
.ico-teal{background:linear-gradient(135deg,#14B8A6,#06B6D4)}
.ico-red{background:linear-gradient(135deg,#EF4444,#DC2626)}

/* ========================================
 * List
 * ======================================== */
.m-list{background:var(--m-card);border-radius:16px;padding:4px 0;box-shadow:var(--m-shadow-1);overflow:hidden}
.m-li{display:flex;align-items:center;padding:14px 16px;gap:12px;position:relative}
.m-li:not(:last-child)::after{content:"";position:absolute;left:60px;right:16px;bottom:0;height:1px;background:var(--m-line)}
.m-li .ico-box{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0}
.m-li .content{flex:1;min-width:0}
.m-li .content .title{font-size:15px;font-weight:600;color:var(--m-text);letter-spacing:-.2px;margin-bottom:2px}
.m-li .content .sub{font-size:12px;color:var(--m-text-3);line-height:1.5}
.m-li .right{display:flex;align-items:center;gap:6px;color:var(--m-text-3);font-size:13px}
.m-li .arrow{color:var(--m-text-3);font-size:18px;font-weight:300}

/* ========================================
 * 服务包卡片
 * ======================================== */
.pack-card{border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--m-shadow-2);position:relative;cursor:pointer;transition:transform .2s}
.pack-card:active{transform:scale(.98)}
.pack-card .header{padding:20px;color:#fff;position:relative;overflow:hidden}
.pack-card .header::before{content:"";position:absolute;top:-30px;right:-30px;width:140px;height:140px;background:rgba(255,255,255,.12);border-radius:50%}
.pack-card .header::after{content:"";position:absolute;bottom:-50px;left:-20px;width:120px;height:120px;background:rgba(255,255,255,.08);border-radius:50%}
.pack-card .header > *{position:relative;z-index:1}
.pack-card .name{font-size:17px;font-weight:700;letter-spacing:-.3px}
.pack-card .target{font-size:12px;opacity:.92;margin-top:2px}
.pack-card .price{margin-top:16px;display:flex;align-items:baseline;gap:4px}
.pack-card .price b{font-size:30px;font-weight:800;letter-spacing:-1px}
.pack-card .price span{font-size:12px;opacity:.85}
.pack-card .hot-badge{position:absolute;top:14px;right:14px;background:#fff;color:#EF4444;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;z-index:2;box-shadow:0 4px 8px rgba(239,68,68,.25)}
.pack-card .body{padding:14px 16px 16px}
.pack-card .body ul{margin:0;padding:0;list-style:none}
.pack-card .body ul li{font-size:13px;color:var(--m-text-2);padding:4px 0 4px 22px;position:relative}
.pack-card .body ul li::before{content:"✓";position:absolute;left:0;top:4px;width:16px;height:16px;background:rgba(16,185,129,.12);color:var(--m-success);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.pack-card .footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--m-line);margin-top:8px;font-size:12px;color:var(--m-text-3)}
.pack-card .footer .sales::before{content:"🔥 ";margin-right:2px}
.pack-card .footer .go{color:var(--brand);font-weight:600;font-size:13px}

/* ========================================
 * 聊天界面（企微风）
 * ======================================== */
.chat-shell{background:#EDEDED;min-height:calc(100vh - 110px);padding:12px;padding-bottom:90px}
.chat-time{text-align:center;color:#9CA3AF;font-size:11px;margin:14px 0 8px;background:rgba(0,0,0,.04);padding:2px 10px;border-radius:4px;display:inline-block;left:50%;position:relative;transform:translateX(-50%)}
.chat-row{display:flex;margin-bottom:14px;align-items:flex-start;gap:8px}
.chat-row.me{flex-direction:row-reverse}
.chat-avatar{width:38px;height:38px;border-radius:6px;background:var(--grad-care);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.chat-row.me .chat-avatar{background:var(--grad-warm)}
.chat-bubble{max-width:75%;padding:11px 14px;border-radius:6px;background:#fff;font-size:14.5px;line-height:1.55;word-wrap:break-word;position:relative;color:#1F2937;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.chat-bubble::before{content:"";position:absolute;top:13px;left:-6px;border:6px solid transparent;border-right-color:#fff;border-left:0}
.chat-row.me .chat-bubble{background:#95EC69;color:#000}
.chat-row.me .chat-bubble::before{left:auto;right:-6px;border-right:0;border-left:6px solid #95EC69}
.chat-bubble.card{padding:0;background:#fff;overflow:hidden;width:280px;max-width:75%}
.chat-input-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:414px;width:100%;background:#F7F7F7;border-top:1px solid #DDD;padding:10px 8px;display:flex;gap:8px;align-items:center;z-index:100;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
@media(min-width:768px){.chat-input-bar{position:absolute}}
.chat-input-bar .face,.chat-input-bar .voice{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#666;font-size:22px;flex-shrink:0}
.chat-input-bar input{flex:1;border:0;background:#fff;border-radius:6px;padding:9px 12px;font-size:15px;outline:none;font-family:inherit}
.chat-input-bar .send-btn{background:#07C160;color:#fff;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;border:0}

/* 聊天里的服务包推荐卡 */
.pack-chat{border-radius:8px;overflow:hidden}
.pack-chat .head{padding:14px;background:var(--grad-primary);color:#fff;position:relative;overflow:hidden}
.pack-chat .head::before{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:rgba(255,255,255,.1);border-radius:50%}
.pack-chat .head .n{font-size:15px;font-weight:700;position:relative}
.pack-chat .head .p{font-size:13px;opacity:.92;margin-top:2px;position:relative}
.pack-chat .body{padding:10px 14px;font-size:12px;color:var(--m-text-2);background:#fff}
.pack-chat .body ul{margin:0;padding-left:18px}
.pack-chat .body li{padding:2px 0}
.pack-chat .foot{padding:8px 14px;border-top:1px solid var(--m-line);background:#fff;display:flex;justify-content:space-between;font-size:12px}
.pack-chat .foot a{color:var(--brand);font-weight:600}

/* AI typing 三点动画 */
.typdot{display:inline-flex;gap:4px}
.typdot i{width:6px;height:6px;background:#94A3B8;border-radius:50%;animation:tp 1.4s infinite}
.typdot i:nth-child(2){animation-delay:.2s}
.typdot i:nth-child(3){animation-delay:.4s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* 快捷回复按钮组 */
.quick-replies{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px 46px}
.quick-replies button{padding:7px 14px;background:#fff;border:1px solid var(--brand);color:var(--brand);border-radius:18px;font-size:13px;font-weight:500;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.quick-replies button:active{background:rgba(37,99,235,.08)}

/* ========================================
 * 应急预警全屏
 * ======================================== */
.alert-screen{position:fixed;inset:0;background:linear-gradient(180deg,#EF4444 0%,#F59E0B 100%);z-index:9000;display:flex;flex-direction:column;color:#fff;padding:32px 24px 24px;max-width:414px;left:50%;transform:translateX(-50%);overflow:hidden}
.alert-screen::before{content:"";position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:rgba(255,255,255,.1);border-radius:50%;filter:blur(40px)}
.alert-screen .alert-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);border-radius:20px;font-size:13px;font-weight:600;align-self:flex-start;border:1px solid rgba(255,255,255,.25);position:relative}
.alert-screen .alert-tag .dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse-dot 1.4s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.alert-screen h2{font-size:26px;font-weight:700;margin:18px 0 6px;letter-spacing:-.5px;position:relative}
.alert-screen .sub{font-size:14px;opacity:.92;position:relative}
.alert-screen .bigval-wrap{margin:32px 0;padding:24px;background:rgba(255,255,255,.15);backdrop-filter:blur(20px);border-radius:20px;text-align:center;border:1px solid rgba(255,255,255,.2);position:relative}
.alert-screen .bigval-wrap .label{font-size:13px;opacity:.85;margin-bottom:6px}
.alert-screen .bigval{font-size:56px;font-weight:800;letter-spacing:-2px;line-height:1}
.alert-screen .unit{font-size:18px;font-weight:500;opacity:.85;margin-left:4px}
.alert-screen .info-list{background:rgba(255,255,255,.12);backdrop-filter:blur(20px);border-radius:16px;padding:14px 16px;margin-bottom:16px;border:1px solid rgba(255,255,255,.16);position:relative}
.alert-screen .info-list > div{padding:6px 0;font-size:14px;display:flex;gap:8px;align-items:center}
.alert-screen .actions{margin-top:auto;display:flex;flex-direction:column;gap:10px;position:relative}
.alert-screen .actions .btn-ghost-white{background:rgba(255,255,255,.18);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.3);padding:14px;border-radius:14px;font-size:15px;font-weight:600}
.alert-screen .actions .btn-call{background:#fff;color:#EF4444;padding:16px;border-radius:14px;font-size:16px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* 打电话动画屏 */
.calling-screen{position:fixed;inset:0;background:radial-gradient(ellipse at center,#1E293B 0%,#0F172A 100%);z-index:9001;flex-direction:column;align-items:center;justify-content:center;color:#fff;max-width:414px;left:50%;transform:translateX(-50%)}
@media(min-width:768px){.calling-screen{border-radius:28px}}
.calling-screen .label{font-size:14px;opacity:.7;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.calling-screen .ring-avatar{width:140px;height:140px;border-radius:50%;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-size:52px;font-weight:700;margin:24px 0;animation:pulse-ring 2s infinite;box-shadow:0 0 0 0 rgba(255,255,255,.4)}
@keyframes pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.6)}50%{box-shadow:0 0 0 32px rgba(37,99,235,0)}}
.calling-screen .doc-name{font-size:28px;font-weight:700}
.calling-screen .doc-sub{opacity:.7;margin-top:6px}
.calling-screen .status{margin-top:24px;display:flex;align-items:center;gap:8px;font-size:14px;opacity:.85}
.calling-screen .status .typdot i{background:#fff}
.calling-screen .hangup{margin-top:60px;width:64px;height:64px;border-radius:50%;background:#EF4444;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 8px 24px rgba(239,68,68,.4);border:0;cursor:pointer}

/* ========================================
 * Banner 大入口
 * ======================================== */
.banner{margin:16px;border-radius:18px;padding:18px;color:#fff;position:relative;overflow:hidden;background:var(--grad-primary)}
.banner.care{background:var(--grad-care)}
.banner.warm{background:var(--grad-warm)}
.banner.purple{background:var(--grad-purple)}
.banner::before{content:"";position:absolute;top:-30px;right:-30px;width:140px;height:140px;background:rgba(255,255,255,.12);border-radius:50%}
.banner > *{position:relative;z-index:1}
.banner h3{margin:0 0 4px;font-size:17px;font-weight:700;letter-spacing:-.3px}
.banner p{margin:0;font-size:13px;opacity:.92}

/* ========================================
 * 体征/数据可视化
 * ======================================== */
.metric-card{background:#fff;border-radius:16px;padding:16px;box-shadow:var(--m-shadow-1);position:relative;overflow:hidden}
.metric-card.danger{background:linear-gradient(135deg,#FEF2F2 0%,#FFF1F2 100%);border:1px solid #FECACA}
.metric-card.warning{background:linear-gradient(135deg,#FFFBEB 0%,#FEF3C7 100%);border:1px solid #FDE68A}
.metric-card.success{background:linear-gradient(135deg,#F0FDF4 0%,#ECFDF5 100%);border:1px solid #BBF7D0}

.kpi-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi-cell{padding:12px;border-radius:12px;background:#F8FAFC}
.kpi-cell .lab{font-size:11px;color:var(--m-text-3);margin-bottom:4px}
.kpi-cell .val{font-size:20px;font-weight:700;letter-spacing:-.5px;color:var(--m-text)}
.kpi-cell .val small{font-size:12px;font-weight:500;opacity:.7;margin-left:2px}

/* Segment 切换器 */
.seg{display:inline-flex;background:#F1F5F9;border-radius:12px;padding:3px;width:100%}
.seg button{flex:1;padding:8px 12px;font-size:13px;border-radius:9px;color:var(--m-text-2);background:transparent;border:0;font-weight:500;cursor:pointer;font-family:inherit}
.seg button.on{background:#fff;color:var(--brand);box-shadow:var(--m-shadow-1);font-weight:600}

/* AI 建议条 */
.ai-tip{background:linear-gradient(135deg,#FEF3C7 0%,#FED7AA 100%);border:1px solid #FDE68A;border-radius:14px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.ai-tip.danger{background:linear-gradient(135deg,#FEE2E2 0%,#FECACA 100%);border-color:#FCA5A5}
.ai-tip .ico{width:32px;height:32px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.ai-tip .text{font-size:13px;color:var(--m-text);line-height:1.6}
.ai-tip .text b{display:block;margin-bottom:2px;font-weight:700}

/* 进度条 */
.bar{height:6px;background:#F1F5F9;border-radius:3px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--grad-primary);border-radius:3px;transition:width .5s}
.bar.success > i{background:var(--m-success)}
.bar.warning > i{background:var(--m-warning)}

/* 周打卡条 */
.week-dots{display:flex;gap:6px;margin-top:12px}
.week-dots .d{flex:1;height:32px;border-radius:8px;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:rgba(255,255,255,.5)}
.week-dots .d.done{background:#fff;color:var(--brand-3)}
.week-dots .d.today{background:rgba(255,255,255,.5);color:#fff;border:1px dashed #fff}

/* 任务条目 */
.task-item{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border-radius:14px;margin-bottom:10px;box-shadow:var(--m-shadow-1)}
.task-item .check{width:36px;height:36px;border-radius:50%;background:#F1F5F9;border:2px solid var(--m-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all .2s}
.task-item .check.done{background:var(--m-success);border-color:var(--m-success);color:#fff}
.task-item .check.done::after{content:"✓";font-size:18px;font-weight:700}
.task-item .info{flex:1;min-width:0}
.task-item .info .t{font-size:14.5px;font-weight:600;letter-spacing:-.2px;color:var(--m-text)}
.task-item .info.done .t{text-decoration:line-through;color:var(--m-text-3)}
.task-item .info .s{font-size:12px;color:var(--m-text-3);margin-top:2px}

/* Timeline 时间线 */
.timeline{padding:0 8px}
.timeline-item{display:flex;gap:14px;padding:12px 0;position:relative}
.timeline-item:not(:last-child)::before{content:"";position:absolute;left:11px;top:30px;bottom:-2px;width:2px;background:var(--m-line)}
.timeline-item .dot{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--brand);flex-shrink:0;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:12px;font-weight:700}
.timeline-item.danger .dot{border-color:var(--m-danger);color:var(--m-danger)}
.timeline-item.success .dot{border-color:var(--m-success);color:var(--m-success)}
.timeline-item .body{flex:1;padding-top:2px}
.timeline-item .time{font-size:11px;color:var(--m-text-3)}
.timeline-item .desc{font-size:14px;color:var(--m-text);margin-top:2px;line-height:1.5}

/* Upload 上传区 */
.uploader{border:2px dashed var(--m-border);border-radius:16px;padding:32px 20px;text-align:center;background:linear-gradient(180deg,#F8FAFC 0%,#fff 100%);cursor:pointer;transition:all .2s}
.uploader:active{transform:scale(.98)}
.uploader .ico{width:56px;height:56px;border-radius:16px;background:var(--grad-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;box-shadow:0 6px 16px rgba(37,99,235,.25)}
.uploader .t{font-size:15px;font-weight:600;color:var(--m-text)}
.uploader .s{font-size:12px;color:var(--m-text-3);margin-top:4px}

/* Form */
.form-item{margin-bottom:14px}
.form-label{display:block;font-size:13px;color:var(--m-text-2);margin-bottom:6px;font-weight:500}
.form-label.required::before{content:"*";color:var(--m-danger);margin-right:4px}
.form-input,.form-select,.form-textarea{width:100%;padding:12px 14px;border:1px solid var(--m-border);border-radius:12px;font-size:14px;background:#fff;color:var(--m-text);font-family:inherit;outline:none;transition:border-color .2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.form-textarea{resize:vertical;min-height:80px}

/* Modal/Toast 复用 common.css */

/* Loading 骨架 */
.skeleton{background:linear-gradient(90deg,#F1F5F9 0%,#E2E8F0 50%,#F1F5F9 100%);background-size:200% 100%;animation:skel 1.4s infinite}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 微工具类 */
.flex{display:flex} .col{flex-direction:column} .ic{align-items:center} .jb{justify-content:space-between} .jc{justify-content:center}
.g-1{gap:4px} .g-2{gap:8px} .g-3{gap:12px} .g-4{gap:16px}
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-5{margin-top:20px}
.mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px}
.t-xs{font-size:11px} .t-sm{font-size:12px} .t-md{font-size:13px} .t-lg{font-size:15px} .t-xl{font-size:17px} .t-2xl{font-size:20px} .t-3xl{font-size:28px}
.fw-5{font-weight:500} .fw-6{font-weight:600} .fw-7{font-weight:700} .fw-8{font-weight:800}
.tc-1{color:var(--m-text)} .tc-2{color:var(--m-text-2)} .tc-3{color:var(--m-text-3)}
.tc-b{color:var(--brand)} .tc-s{color:var(--m-success)} .tc-w{color:var(--m-warning)} .tc-d{color:var(--m-danger)}
.tac{text-align:center} .tar{text-align:right}
.w-full{width:100%}

/* SVG 图标继承当前颜色 */
.icon-svg{width:1em;height:1em;vertical-align:-.1em;fill:currentColor}