/* ============================================================
   theme.css — 坐席后台统一视觉（青碧 Teal 主题）
   加载顺序：在页面自身样式之后引入，用于整体换肤与移动端修复
   ============================================================ */

/* ---------- 1. 基础色调 ---------- */
:root{
  --tk:#0d9488;            /* 主强调色 teal-600 */
  --tk-deep:#0f766e;       /* 深强调 teal-700 */
  --tk-soft:#e6f7f4;       /* 浅强调底 */
  --tk-line:rgba(13,148,136,.16);
  --ink:#0c2b28;
}

/* 页面背景：薄荷-靛青洗染，替换原蓝紫玻璃 */
html,body{
  background:
    radial-gradient(1200px 800px at 12% -4%, rgba(20,184,166,.16), transparent 55%),
    radial-gradient(1000px 720px at 92% 6%, rgba(99,102,241,.10), transparent 55%),
    linear-gradient(180deg,#f4faf8 0%,#eef4f6 100%) !important;
}
/* chat_center 变量式主题同步换色 */
:root{
  --bg:#eef4f6;
  --blue:#0d9488;
  --blue-soft:#e6f7f4;
  --line:#d5e5e1;
  --line-strong:#c2d8d2;
  --radius:12px;
  --shadow:0 12px 30px rgba(15,118,110,.08);
  --shadow-hover:0 18px 40px rgba(15,118,110,.12);
}

/* ---------- 2. 卡片与标题 ---------- */
.card{
  border-radius:22px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid var(--tk-line) !important;
  box-shadow:0 18px 46px rgba(15,118,110,.10) !important;
}
.card-h{
  background:transparent !important;
  border-bottom:1px dashed rgba(13,148,136,.18) !important;
}
.card-h .h1{ color:var(--ink) !important; }
.h1{ color:var(--ink); }

/* ---------- 3. 按钮换系（青碧/靛/珊瑚，与原蓝色系区分） ---------- */
.btn{ border-radius:16px !important; }
.btn.blue  { background:linear-gradient(135deg,#22d3ee,#0e7490) !important; color:#fff !important; }
.btn.purple{ background:linear-gradient(135deg,#818cf8,#4f46e5) !important; color:#fff !important; }
.btn.teal  { background:linear-gradient(135deg,#2dd4bf,#0f766e) !important; color:#fff !important; }
.btn.orange{ background:linear-gradient(135deg,#fb7185,#e11d48) !important; color:#fff !important; }
.btn.yellow{ background:linear-gradient(135deg,#fbbf24,#d97706) !important; color:#fff !important; }
.btn.green { background:linear-gradient(135deg,#34d399,#059669) !important; color:#fff !important; }
.btn.gray  { background:linear-gradient(135deg,#475569,#1e293b) !important; color:#fff !important; }

/* ---------- 4. 底部导航：悬浮胶囊 ---------- */
.bottom-tabs{
  left:50% !important; right:auto !important;
  bottom:calc(10px + env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  width:min(340px,calc(100% - 20px)) !important;
  border:1px solid var(--tk-line) !important;
  border-top:1px solid var(--tk-line) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 14px 34px rgba(15,118,110,.18) !important;
  padding:5px 6px !important;
  gap:4px;
}
.bottom-tab{
  flex:1 1 0 !important; min-width:0 !important; max-width:none !important;
  border-radius:999px !important;
  padding:8px 4px !important;
  color:#5f707c !important;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.bottom-tab i{ font-size:17px; }
.bottom-tab.active{
  background:linear-gradient(135deg,#14b8a6,#0f766e) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(15,118,110,.32);
}
.bottom-tab.active .badge-dot{ border-color:#0f766e; }
.bottom-tab .badge-dot{
  right:12px !important; top:0 !important;
  background:#f43f5e !important;
}
/* 内容区为悬浮胶囊让位 */
.container{ padding-bottom:calc(104px + env(safe-area-inset-bottom)) !important; }
.container.dashboard-tab-content{ padding-bottom:calc(104px + env(safe-area-inset-bottom)); }

/* ---------- 5. chat_center 顶栏与列表点缀 ---------- */
.top{ background:linear-gradient(180deg,#f2fbf8,#f6fafc) !important; }
/* 会话列表右侧：在线状态 + 删除按钮纵排 */
.rightMeta{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; min-width:0; }
.itemDel{
  width:26px;height:26px;flex:0 0 auto;
  border:0;border-radius:8px;background:transparent;
  color:#b9cbc6;font-size:12px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .15s ease,color .15s ease;
}
.itemDel:active{ background:#fee9ec; color:#e11d48; }
.top-icon{
  border-color:#bfe3dc !important;
  color:var(--tk-deep) !important;
  background:#fff !important;
}
.item.unread{ border-color:#9ed8cc !important; }
.item.unread:before{ background:var(--tk) !important; }
.item:before{ background:#cfe4de; }
.center-gear{ color:var(--tk-deep) !important; border-color:#bfe3dc !important; }
.center-gear:hover{ background:var(--tk-soft) !important; }
.center-modal-title i{ color:var(--tk) !important; }
.center-modal-card{ border-radius:14px !important; }
.m-ico{ background:var(--tk-soft) !important; color:var(--tk-deep) !important; }

/* “我的”页 */
.profile-mine-username{ color:var(--tk-deep) !important; }
.profile-mine-remain{
  background:#0c2b28 !important;
  color:#5eead4 !important;
  border-radius:999px !important;
}
.profile-mine-btn.renew{ background:linear-gradient(135deg,#14b8a6,#0f766e) !important; }
.profile-mine-btn.buy{ background:#1e293b !important; }
.profile-mine-shell{ padding-bottom:calc(120px + env(safe-area-inset-bottom)) !important; }

/* ---------- 6. 移动端适配修复 ---------- */
@media (max-width:420px){
  /* 主页九宫格按钮：固定 3×108px 在窄屏溢出 → 弹性三列 */
  .dashboard-actions{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
    gap:8px !important;
    padding:0 2px;
  }
  .dashboard-actions .btn{
    width:100% !important;
    max-width:none !important;
    height:88px !important;
    font-size:11px !important;
  }
  .dashboard-actions .btn i{ width:32px !important; height:32px !important; font-size:17px !important; }
  .card-b{ padding:14px 12px !important; }
  .m-card{ border-radius:16px !important; }
  .bottom-tabs{ width:calc(100% - 16px) !important; }
  .bottom-tab{ font-size:10.5px !important; }
}
@media (max-width:360px){
  .dashboard-actions{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .dashboard-actions .btn{ height:84px !important; }
}
/* chat_center 窄屏：右侧元信息不再挤压标题 */
@media (max-width:380px){
  .item{ grid-template-columns:44px minmax(0,1fr) 14px !important; }
  .rightMeta{ max-width:88px !important; }
}