/* ============================================================
   组件库 — 虹膜知健康 (Iris Health Insight)
   基于 Naturesphere 设计系统令牌，零新增颜色变量
   作者：UI Designer
   ============================================================ */

/* ---------- 布局容器 ---------- */
.iris-wrap { padding-block: var(--space-10) var(--space-16); }
@media (min-width: 768px) { .iris-wrap { padding-block: var(--space-12) var(--space-20); } }

/* ---------- Hero ---------- */
.iris-hero { text-align: center; max-width: 56em; margin: 0 auto var(--space-12); }
.iris-title {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: var(--weight-bold);
  color: var(--color-text-strong); line-height: 1.2; margin: var(--space-4) 0 var(--space-3);
}
.iris-sub { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.7; max-width: 46em; margin: 0 auto; }
.iris-disclaimer { text-align: left; margin-top: var(--space-6); }

/* ---------- 知识体系 ---------- */
.iris-k-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-10);
}
@media (min-width: 640px) { .iris-k-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .iris-k-grid { grid-template-columns: repeat(4, 1fr); } }

.iris-k-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-sm); transition: all var(--dur-normal) var(--ease-out);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.iris-k-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }
.iris-k-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md); flex: none;
  background: var(--brand-50); color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
}
.iris-k-card h3 { font-size: var(--text-lg); color: var(--color-text-strong); }
.iris-k-card p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; margin: 0; }
.iris-k-card .k-big { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--leaf-700); }

.iris-h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-text-strong); margin: var(--space-8) 0 var(--space-4); }

/* ---------- 测评表单 ---------- */
.iris-assess { margin-top: var(--space-12); }
.iris-form { padding: var(--space-6); }
@media (min-width: 768px) { .iris-form { padding: var(--space-8); } }
.iris-form-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.iris-form-row .form-group { min-width: 220px; }

.iris-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-8); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg);
  background: var(--color-surface-dim); color: var(--color-text-muted); cursor: pointer;
  transition: all var(--dur-fast); text-align: center;
}
.iris-upload:hover { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
.iris-upload svg { color: var(--brand-500); }

.iris-previews { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.iris-thumb {
  position: relative; width: 96px; height: 96px; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-surface-dim);
}
.iris-thumb img { width: 100%; height: 100%; object-fit: cover; }
.iris-thumb-tag {
  position: absolute; left: 4px; top: 4px; background: rgba(28,25,23,.72); color: #fff;
  font-size: 10px; padding: 1px 6px; border-radius: var(--radius-sm);
}
.iris-thumb-x {
  position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(28,25,23,.72); color: #fff; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.iris-thumb-x:hover { background: var(--error-500); }

.iris-q { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.iris-opts { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-top: var(--space-2); }
@media (min-width: 560px) { .iris-opts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .iris-opts { grid-template-columns: repeat(3, 1fr); } }
.iris-opts .checkbox, .iris-opts .radio { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); transition: all var(--dur-fast); }
.iris-opts .checkbox:hover, .iris-opts .radio:hover { border-color: var(--brand-300); background: var(--brand-50); }

.iris-actions { margin-top: var(--space-6); display: flex; justify-content: center; }
.iris-actions .btn { min-width: 280px; }

/* ---------- 我的测评记录 ---------- */
.iris-mine { margin-top: var(--space-12); }
.iris-empty { color: var(--color-text-muted); font-size: var(--text-sm); padding: var(--space-4) 0; }
.iris-mine-item { padding: var(--space-5); margin-bottom: var(--space-4); border-radius: var(--radius-lg); }
.iris-mine-top { display: flex; align-items: center; gap: var(--space-3); }
.iris-mine-photo { width: 56px; height: 56px; border-radius: var(--radius-md); object-fit: cover; flex: none; border: 1px solid var(--color-border); }
.iris-mine-name { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.iris-mine-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.iris-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.iris-mine-advice {
  margin-top: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--brand-50);
  border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--brand-800); border-left: 3px solid var(--brand-400);
}
.iris-mine-advice-label { font-weight: var(--weight-semibold); margin-right: 6px; }

/* ---------- 报告弹层 ---------- */
.iris-report-modal {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); opacity: 0; visibility: hidden; transition: opacity var(--dur-normal), visibility var(--dur-normal);
}
.iris-report-modal.open { opacity: 1; visibility: visible; }
.iris-report-mask { position: absolute; inset: 0; background: rgba(28,25,23,.55); backdrop-filter: blur(2px); }
.iris-report-panel {
  position: relative; z-index: 1; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
  background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}
@media (min-width: 768px) { .iris-report-panel { padding: var(--space-8); } }
.iris-report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.iris-report-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 2px; color: var(--brand-500); text-transform: uppercase; }
.iris-report-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text-strong); margin: 2px 0; }
.iris-report-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.iris-report-disclaimer { margin-bottom: var(--space-5); }
.iris-report-photos { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.iris-report-photos img { width: 88px; height: 88px; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--color-border); }

/* 报告内小节标题（复用 .sec-title 风格，独立于后台） */
.sec-title {
  display: flex; align-items: center; gap: var(--space-2); margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-strong);
}
.sec-title svg { width: 18px; height: 18px; color: var(--brand-500); }

.iris-pheno-list { display: grid; gap: var(--space-3); }
.iris-pheno { background: var(--color-surface-dim); border-radius: var(--radius-md); padding: var(--space-4); border-left: 3px solid var(--leaf-500); }
.iris-pheno-name { font-weight: var(--weight-semibold); color: var(--color-text-strong); margin-bottom: 4px; }
.iris-pheno p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; margin: 0; }
.iris-tips { margin: 0; padding-left: var(--space-5); }
.iris-tips li { font-size: var(--text-sm); color: var(--color-text); line-height: 1.7; margin-bottom: var(--space-2); }

/* ---------- 后台：虹膜测评视图 ---------- */
.iris-admin-photos { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0; }
.iris-no-photo { font-size: var(--text-sm); color: #78716c; }
.iris-drawer-rec { background: #faf9f7; border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.iris-drawer-advice { font-size: 13px; color: #57534e; line-height: 1.6; margin-top: 4px; }

/* ---------- 机器人入口（浮窗助手） ---------- */
.iris-bot-fab {
  position: fixed; right: 18px; bottom: 92px; z-index: 150;
  width: 64px; height: 64px; padding: 0; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--brand-600), var(--brand-800));
  box-shadow: 0 10px 24px -6px rgba(74,52,32,.6);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.iris-bot-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 30px -8px rgba(74,52,32,.7); }
.iris-bot-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.iris-bot-fab svg { flex: none; }
.iris-bot-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  animation: irisPulse 2.4s ease-out infinite;
}
@keyframes irisPulse {
  0%   { box-shadow: 0 0 0 0 rgba(93,131,71,.5); }
  70%  { box-shadow: 0 0 0 16px rgba(93,131,71,0); }
  100% { box-shadow: 0 0 0 0 rgba(93,131,71,0); }
}
@media (min-width: 768px) { .iris-bot-fab { bottom: 24px; } }

.iris-bot-backdrop {
  position: fixed; inset: 0; z-index: 170;
  background: rgba(28,25,23,.45); backdrop-filter: blur(2px);
}

.iris-bot-panel {
  position: fixed; top: 0; right: 0; z-index: 180;
  width: min(440px, 94vw); height: 100%;
  background: var(--color-surface);
  box-shadow: -16px 0 40px -16px rgba(28,25,23,.35);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-normal) var(--ease-out);
  visibility: hidden;
}
.iris-bot-panel.open { transform: translateX(0); visibility: visible; }

.iris-bot-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--brand-50), var(--color-surface));
}
.iris-bot-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.iris-bot-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-600), var(--leaf-600)); color: #fff;
}
.iris-bot-id-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.iris-bot-id-text b { font-size: var(--text-base); color: var(--color-text-strong); }
.iris-bot-id-text i { font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.iris-bot-close {
  flex: none; width: 36px; height: 36px; border: none; cursor: pointer;
  border-radius: 10px; background: rgba(28,25,23,.06); color: var(--color-text-strong);
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast);
}
.iris-bot-close:hover { background: rgba(28,25,23,.12); }

.iris-bot-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.iris-bot-panel .iris-wrap { padding-block: var(--space-8) var(--space-10); }
.iris-bot-panel .iris-hero { text-align: left; margin-bottom: var(--space-8); }
.iris-bot-panel .iris-sub { margin-left: 0; }
.iris-mine-note { margin: 0 0 var(--space-4); }