/* ===== 诊所数智化健康管理系统 · 患者端 H5 ===== */
:root{
  --m-blue:#2f6df6; --m-blue-d:#1f52c4; --m-green:#17a673; --m-orange:#f59a23;
  --m-red:#e34d59; --m-bg:#f4f6fa; --m-line:#e8ecf3; --m-text:#1f2733; --m-text2:#7a869a;
}
.m-body{background:var(--m-bg);color:var(--m-text);-webkit-text-size-adjust:100%}

/* ---------- 顶部 ---------- */
.m-head{
  position:sticky;top:0;z-index:60;height:50px;display:flex;align-items:center;
  background:linear-gradient(90deg,#2f6df6,#4b8bf8);color:#fff;padding:0 8px
}
.m-head .m-title{flex:1;text-align:center;font-size:17px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.m-back{
  width:34px;height:34px;border:none;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer
}
.m-head-right{min-width:44px;text-align:right;color:#fff;font-size:13px;opacity:.95}

/* ---------- 主体 ---------- */
.m-main{padding:12px 12px 78px;max-width:640px;margin:0 auto}
.m-card{
  background:#fff;border-radius:12px;padding:14px;margin-bottom:12px;
  box-shadow:0 2px 10px rgba(31,39,51,.05)
}
.m-card h3{border-left:4px solid var(--m-blue);padding-left:10px;margin:0 0 12px;font-size:16px}
.m-card.block{display:block;color:inherit}
a.m-card:hover{text-decoration:none}
.m-grid2{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.m-grid2>*{flex:1 1 calc(50% - 6px);min-width:calc(50% - 6px)}

.m-tile{
  display:block;background:#fff;border-radius:12px;padding:16px 12px;text-align:center;
  box-shadow:0 2px 10px rgba(31,39,51,.05);color:var(--m-text)
}
.m-tile:hover{text-decoration:none;color:var(--m-text)}
.m-tile .ico{display:block;font-size:26px;line-height:1;margin-bottom:6px}
.m-tile b{display:block;font-size:15px}
.m-tile small{display:block;color:var(--m-text2);font-size:12px;margin-top:2px}

/* ---------- 列表 ---------- */
.m-list{list-style:none;margin:0;padding:0}
.m-list li{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--m-line);font-size:14px
}
.m-list li:last-child{border-bottom:none}
.m-list li .sub{display:block;color:var(--m-text2);font-size:12px;margin-top:2px}

/* ---------- 日期 / 号源 ---------- */
.date-row{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px}
.date-chip{
  flex:0 0 62px;text-align:center;padding:8px 4px;border:1px solid var(--m-line);
  border-radius:10px;background:#fff;color:var(--m-text);font-size:12px
}
.date-chip:hover{text-decoration:none}
.date-chip b{display:block;font-size:15px}
.date-chip.on{background:var(--m-blue);border-color:var(--m-blue);color:#fff}
.slot-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.slot-grid .slot{min-width:104px;flex:1 1 104px}

/* ---------- 用药行 ---------- */
.med-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--m-line)
}
.med-row:last-child{border-bottom:none}

/* ---------- 进度条 ---------- */
.progress .bar{height:8px;border-radius:6px;background:#eef1f6;overflow:hidden}
.progress .bar i{display:block;height:100%;background:linear-gradient(90deg,#2f6df6,#5b9bff);border-radius:6px}

/* ---------- 聊天 ---------- */
.chat-box{
  background:#f7f9fc;border-radius:12px;padding:12px;height:calc(100vh - 300px);
  min-height:320px;overflow-y:auto
}
.chat-row{display:flex;margin-bottom:12px}
.chat-row.me{justify-content:flex-end}
.chat-row.other{justify-content:flex-start}
.chat-row .bubble{
  max-width:78%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.55;
  word-break:break-word;white-space:pre-wrap;box-shadow:0 1px 4px rgba(31,39,51,.06)
}
.chat-row.other .bubble{background:#fff;border-top-left-radius:4px}
.chat-row.me .bubble{background:var(--m-blue);color:#fff;border-top-right-radius:4px}
.chat-row .bubble .tag{
  display:inline-block;font-size:11px;padding:0 6px;border-radius:10px;
  background:#e8f2ff;color:var(--m-blue);margin-right:6px;vertical-align:1px
}
.chat-row .bubble .tag.green{background:#e3f8f0;color:var(--m-green)}
.chat-bar{display:flex;gap:8px;margin-top:10px;align-items:flex-end}
.chat-bar textarea,.chat-bar input{flex:1;margin:0}

/* ---------- 底部导航 ---------- */
.m-tab{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  background:#fff;border-top:1px solid var(--m-line);padding:6px 0 calc(6px + env(safe-area-inset-bottom))
}
.m-tab a{
  flex:1;text-align:center;color:var(--m-text2);font-size:11px;padding:2px 0
}
.m-tab a:hover{text-decoration:none}
.m-tab a .ico{display:block;font-size:20px;line-height:1.3}
.m-tab a.on{color:var(--m-blue)}

/* ---------- 工具类 ---------- */
.block{display:block;width:100%}
.sm{font-size:12px}
.text-green{color:var(--m-green)}
.text-red{color:var(--m-red)}
.text-orange{color:var(--m-orange)}
.m-body .alert.sm{padding:8px 10px;font-size:12px}
.m-body .btn.lg{width:100%}
.m-body .modal-box{width:92%;max-height:82vh;overflow:auto}
.m-body .muted{color:var(--m-text2)}