/* ── Portal overrides ─────────────────────────────────────────── */

/* ポータルのタブアクティブ色だけ上書き（teal系） */
.portal-body .tab-btn.active {
  background: linear-gradient(135deg, #4a9a8c22, #5bb8a822);
  color: var(--teal);
  box-shadow: 0 1px 4px rgba(74,154,140,0.15);
}

.portal-body header::before {
  background: linear-gradient(135deg, #4a9a8c 0%, #5bb8a8 100%);
}

.portal-body header h1 {
  background: linear-gradient(135deg, #4a9a8c 0%, #5bb8a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.portal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.portal-badge {
  display: inline-block;
  background: var(--teal-l);
  color: var(--teal);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid rgba(74,154,140,0.2);
}


.btn-portal-primary {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #4a9a8c 0%, #5bb8a8 100%);
  color: white;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  font-family: inherit;
  transition: opacity 0.18s;
}

.btn-portal-primary:hover { opacity: 0.88; }

/* ── Clinic code display ─────────────────────────────────────── */
.clinic-code-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}

.clinic-code-box code {
  flex: 1;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 0.85rem;
  color: var(--tx-2);
  word-break: break-all;
  line-height: 1.5;
}

.btn-copy {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1.5px solid var(--teal);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--teal);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
}

.btn-copy:hover {
  background: var(--teal);
  color: white;
}

/* ── Textarea ────────────────────────────────────────────────── */
/* 背景が var(--bg) だと白いカードの上で「読み取り専用の表示欄」に見える。
   白地＋濃いめの枠にして、押す前から書き換えられると分かるようにする */
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-field);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 1rem;
  font-family: inherit;
  color: var(--tx);
  line-height: 1.7;
  resize: vertical;
  transition: border-color 0.18s;
}

textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(74,154,140,.14);
}

/* ── Patients placeholder ────────────────────────────────────── */
.patients-placeholder {
  text-align: center;
  padding: 40px 20px;
}

.patients-placeholder-icon {
  margin-bottom: 20px;
}

.patients-placeholder h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 8px;
}

.patients-placeholder p {
  font-size: 0.95rem;
  color: var(--tx-2);
  margin-bottom: 24px;
}

.roadmap-list {
  list-style: none;
  text-align: left;
  display: inline-block;
  font-size: 0.95rem;
  color: var(--tx-2);
  line-height: 2;
}

.badge-coming-soon,
.badge-beta {
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--teal-l);
  color: var(--teal);
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.05em;
}

/* β期間の説明。読み飛ばされると「いつか勝手に課金される」と思われる。
   注意書きの見た目にせず、本文と同じ大きさで読ませる */
.billing-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--tx-2);
}
.billing-note p + p { margin-top: 12px; }
.billing-note strong { color: var(--tx-1); font-weight: 700; }
.billing-contact { color: var(--tx-2); }
.billing-contact a { color: var(--teal); font-weight: 600; }

/* ── Clinic ID display ───────────────────────────────────────── */
.clinic-id-display {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}

.clinic-id-display code {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 0.85rem;
  color: var(--teal);
  font-weight: 600;
}

.hint-inline {
  font-size: 0.95rem;
  color: var(--tx-3);
}

/* ── Billing plan ────────────────────────────────────────────── */
.billing-plan {
  background: var(--teal-l);
  border: 1px solid rgba(74,154,140,0.2);
  border-radius: var(--r-sm);
  padding: 16px;
  margin-bottom: 4px;
}

.billing-plan-info {
  display: flex;
  flex-wrap: wrap;            /* 狭い画面では「Halo for／Clinic」と割らずに2段にする（2026-10-28） */
  gap: 2px 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.billing-plan-name {
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tx);
}

.billing-plan-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--teal);
}

.billing-plan-price small {
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
}

.billing-plan-features {
  list-style: none;
  font-size: 0.95rem;
  color: var(--tx-2);
  line-height: 1.9;
}
.billing-plan-features li::before {
  content: '✓';
  color: var(--teal);
  font-weight: 700;
  margin-right: 7px;
}

/* ── 患者ダッシュボード ──────────────────────────────── */
/* サマリーグリッド */
.pt-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.pt-summary-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pt-summary-label {
  font-size: 0.85rem;
  color: var(--tx-3);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.pt-summary-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--tx);
  line-height: 1.1;
}

.pt-summary-unit {
  font-size: 0.85rem;
  color: var(--tx-3);
}
/* 数字と「名」は同じ行に（「1」の下に「名」が落ちていた。2026-10-28 伊藤さん） */
.pt-summary-num { display: flex; align-items: baseline; gap: 4px; }
.pt-summary-num .pt-summary-unit { font-size: 0.95rem; }

/* 画面の数字やボタンの「条件・定義」を添える小さな注記（2026-10-02）。13px を下回らせない */
.portal-note {
  font-size: 0.85rem;
  color: var(--tx-2);
  line-height: 1.7;
  margin: 6px 0 0;
}
.pt-summary-note { margin: -6px 0 14px; }

/* ツールバー */
.pt-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.pt-search-wrap {
  position: relative;
}

.pt-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.pt-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: 1.0rem;
  font-family: inherit;
  color: var(--tx);
  transition: border-color 0.18s;
  box-sizing: border-box;
}

.pt-search-input:focus {
  outline: none;
  border-color: var(--teal);
}

/* 患者一覧カード */
/* 未記録アラートバッジ */
.pt-alert-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: 4px;
  vertical-align: middle;
}
.pt-alert-danger { background: #fee2e2; color: #dc2626; }
.pt-alert-warn   { background: #fef3c7; color: #92400e; }
/* 患者が共有していない区分。こちらの落ち度でも患者の怠りでもないので、
   注意を引く色を使わない（赤にすると声かけの対象に見えてしまう） */
.pt-alert-muted  { background: #eceae6; color: #6b6560; }
.pt-ai-off-badge { background: #e5e7eb; color: #4b5563; }
/* 連携して7日以内（portal-patients.js の isNewLink）。歓迎の意味なので、注意の色（赤・黄）にしない */
.pt-new-link     { background: #dcfce7; color: #166534; }
.pt-new-reaction { background: var(--teal); color: #fff; }

/* AI停止/再開ボタン */
/* 隣に並ぶメタ情報（参加日・最終利用）と同じ見た目だったため、
   状態を示すバッジに見えていた。押せるものとして見せる */
.pt-ai-toggle {
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal);
  background: var(--surface);
  border: 1.5px solid var(--teal);
  border-radius: 8px;
  cursor: pointer;
  margin-left: 8px;
}
.pt-ai-toggle:hover { background: var(--teal); color: #fff; }
.pt-ai-toggle:hover { background: rgba(0,0,0,0.04); }
.pt-ai-toggle-on { color: var(--teal); border-color: var(--teal); }

.pt-active-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4a9a8c;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

.pt-inactive-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ddd;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

.pt-goal-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.pt-arrow-cell {
  color: var(--tx-3);
  font-size: 1.2rem;
}

.pt-card {
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pt-card:hover {
  border-color: var(--teal);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.pt-card:last-child { border-bottom: none; }
.pt-card:hover { background: var(--bg-2); }

.pt-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pt-card-left {
  display: flex;
  align-items: center;
  gap: 4px 8px;
  /* 印が増えると「来院日を／過ぎています」と印の中で折れていた。印は折らず、印ごと次の行へ（2026-10-28） */
  flex-wrap: wrap;
}
.pt-card-left .pt-alert-badge,
.pt-card-left .pt-unlink-badge { white-space: nowrap; }

.pt-card-id {
  font-weight: 800;
  color: var(--tx);
  font-size: 1.05rem;
  white-space: nowrap;
}

.pt-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pt-card-spark {
  flex-shrink: 0;
}

.pt-card-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pt-card-meta {
  font-size: 0.88rem;
  color: var(--tx-2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}

/* 患者詳細モーダル */
.pt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}

.pt-modal-panel {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  /* スマホのブラウザは、URL欄のぶん見えている高さが変わる。見えている高さに合わせる（非対応の端末は上の行） */
  max-height: 88dvh;
  overflow-y: auto;
  padding: 24px 20px 40px;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  animation: slideUp 0.25s ease;
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.pt-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  /* 右上の✕（下の帯）と重ならないように空ける */
  padding-right: 48px;
}

/* ✕を載せる帯。送っても窓の上に残る（2026-10-11）。
   帯は白で、下へ送った中身はその下を通る。高さ0の帯に✕だけを浮かせていたころは、
   ✕が入力欄や文字の上に重なった（シミュレータの Safari で確認）。
   窓の上の余白（24px）のぶんを帯が受け持つので、開いた直後の見た目は変わらない */
.pt-modal-closebar {
  position: sticky;
  top: -24px;
  z-index: 5;
  margin: -24px -20px 0;
  padding: 16px 16px 0;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  background: linear-gradient(var(--surface) 78%, rgba(255,255,255,0));
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}
.pt-modal-closebar .pt-modal-close { pointer-events: auto; }
/* 帯の高さぶん、見出しを上へ戻す（開いた直後は、お名前と✕が同じ行に並ぶ） */
.pt-modal-closebar + .pt-modal-header {
  margin-top: -44px;
  /* 見出し（お名前）は白い帯より手前に出す。帯の下に隠れて、開いた直後にお名前が見えなかった（2026-10-11 シミュレータで確認）。
     見出しの右の空きが ✕ を覆って押せなくならないよう、当たり判定は中身だけに付ける */
  position: relative;
  z-index: 6;
  pointer-events: none;
}
.pt-modal-closebar + .pt-modal-header > * { pointer-events: auto; }

.modal-pt-id {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--tx);
  margin-bottom: 6px;
}

.modal-pt-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.95rem;
}

.modal-active-txt {
  color: var(--tx-3);
  font-size: 0.88rem;
}

.pt-modal-close {
  border: none;
  background: var(--bg-2);
  color: var(--tx-2);
  /* 指で押しやすい大きさに（32px だと隣を押しやすい） */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.15s;
}

.pt-modal-close:hover {
  background: var(--border);
}

.modal-section {
  margin-bottom: 24px;
}

.modal-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tx-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

/* 体重グラフ */
.weight-chart-wrap {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 8px 4px;
  margin-bottom: 12px;
  overflow: hidden;
}

.weight-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.weight-summary-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-label {
  font-size: 0.85rem;
  color: var(--tx-3);
  font-weight: 600;
}

.ws-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--tx);
}

/* 医院の体組成計での測定（体重グラフの下） */
.bodycomp-section { margin-top: 12px; }
/* 運動の記録（migration_101）。患者アプリの活動タブと同じ並び */
.act-day { padding: 10px 0; border-bottom: 1px solid var(--border); }
.act-day:last-child { border-bottom: none; }
.act-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.act-day-date { font-size: 0.95rem; font-weight: 700; color: var(--tx); }
.act-day-sum { font-size: 0.86rem; color: var(--tx-3); white-space: nowrap; }
.act-day-sum b { font-size: 1rem; color: var(--rose); margin-left: 8px; }
.act-item { padding: 6px 0 0 2px; }
.act-item-name { font-size: 0.92rem; font-weight: 600; color: var(--tx); }
.act-item-meta { font-size: 0.86rem; color: var(--tx-3); }
.act-item-note { font-size: 0.82rem; color: var(--tx-3); }
.bodycomp-title { font-size: 0.9rem; font-weight: 700; color: var(--tx-2); margin-bottom: 6px; }
.bodycomp-row {
  display: grid;
  /* 1行目に日付と機械、2行目に値。3列だと幅が狭いとき機械の名前が「タニタ／MC-／780A」と折れた（2026-10-25） */
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.bodycomp-date { color: var(--tx-3); font-weight: 600; }
.bodycomp-dev  { color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bodycomp-vals { grid-column: 1 / -1; font-weight: 800; color: var(--tx); word-break: auto-phrase; }

/* 食事記録 */
.modal-meal-row {
  display: grid;
  grid-template-columns: 60px 42px 1fr 60px;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.modal-meal-row:last-child {
  border-bottom: none;
}

.meal-date {
  color: var(--tx-3);
  font-size: 0.85rem;
}

.meal-type {
  color: var(--tx-2);
  font-weight: 700;
  font-size: 0.85rem;
}

.meal-content {
  color: var(--tx);
  line-height: 1.4;
}

.meal-kcal {
  color: var(--tx-3);
  font-size: 0.85rem;
  text-align: right;
}

/* ── 食事サマリー（俯瞰 + AIハイライト） ─────────────── */
.meal-nutrient-summary {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.mns-item {
  flex: 1; background: var(--bg); border-radius: 10px;
  padding: 10px 8px; text-align: center;
}
.mns-val   { display: block; font-size: 1.05rem; font-weight: 800; color: var(--tx); }
.mns-label { display: block; font-size: 0.85rem; color: var(--tx-3); margin-top: 2px; }

.meal-alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
/* 文字まで警告色にしていたため、橙の字を橙の地に載せることになり、
   読むより先に色が目に入って読みにくかった。色は「印」だけに使い、
   本文は黒。地は白のまま、左の縦線で種類を示す */
.meal-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--surface);
  color: var(--tx-1);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 8px;
}
.meal-alert-ok   { border-left-color: #3a8c7e; }
.meal-alert-warn { border-left-color: #d99a2b; }
.meal-alert-info { border-left-color: #6b8fc4; }
.meal-alert-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
}
.meal-alert-dot-ok   { background: #3a8c7e; }
.meal-alert-dot-warn { background: #d99a2b; }
.meal-alert-dot-info { background: #6b8fc4; }

.meal-summary-list { display: flex; flex-direction: column; gap: 1px; }
.meal-summary-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.meal-summary-row:last-child { border-bottom: none; }
.meal-summary-emoji { font-size: 1.2rem; flex-shrink: 0; width: 24px; text-align: center; }
.meal-summary-info  { flex: 1; min-width: 0; }
.meal-summary-date  { display: block; font-size: 0.85rem; color: var(--tx-3); }
.meal-summary-name  { display: block; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-summary-kcal  { color: var(--tx-3); font-size: 0.85rem; white-space: nowrap; flex-shrink: 0; }

/* ── 食事コメント（栄養士レビュー） ─────────────────── */
.meal-review-form {
  padding: 8px 8px 10px 36px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.meal-review-textarea {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 1.0rem; color: var(--tx);
  background: #fff; resize: none;
  font-family: inherit; line-height: 1.5;
  transition: border-color 0.15s;
}
.meal-review-textarea:focus { outline: none; border-color: var(--teal); }
.meal-review-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.btn-meal-review-save {
  padding: 5px 14px; font-size: 0.9rem; font-weight: 600;
  background: var(--teal); color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  transition: opacity 0.15s;
}
.btn-meal-review-save:hover { opacity: 0.85; }
.btn-meal-review-save:disabled { opacity: 0.6; cursor: default; }
.meal-reviewed-mark {
  font-size: 0.85rem; color: var(--teal); font-weight: 600;
}
.meal-review-status {
  margin: 6px 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--teal);
}
.meal-review-status:empty { display: none; }

/* ── 食事レビューカード（旧スタイル、削除予定） ──────── */
.review-badge {
  font-size: 0.85rem; font-weight: 600; padding: 2px 8px;
  border-radius: 99px; background: #fde8e8; color: var(--rose);
}
.meal-review-card {
  border: 1.5px solid var(--border); border-radius: 12px;
  margin-bottom: 10px; overflow: hidden; background: #fff;
}
.meal-review-card.reviewed {
  border-color: #b8e0d8;
}
.meal-review-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer;
}
.meal-review-thumb {
  width: 52px; height: 52px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; overflow: hidden;
}
.meal-review-thumb img { width: 100%; height: 100%; object-fit: cover; }
.meal-review-info { flex: 1; min-width: 0; }
.meal-review-date { font-size: 0.85rem; color: var(--tx-3); margin-bottom: 2px; }
.meal-review-name { font-size: 0.88rem; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meal-review-kcal { font-size: 0.88rem; color: var(--tx-3); margin-top: 2px; }
.meal-review-status {
  font-size: 0.85rem; font-weight: 600; padding: 3px 8px;
  border-radius: 99px; white-space: nowrap; flex-shrink: 0;
}
.meal-review-status.pending { background: #fde8e8; color: var(--rose); }
.meal-review-status.done    { background: #e0f4f0; color: #3a9a8c; }
.meal-review-body {
  display: none; padding: 0 12px 14px; border-top: 1px solid var(--border);
}
.meal-review-body.open { display: block; }
.review-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 12px 0 10px;
}
.review-field label {
  display: block; font-size: 0.85rem; color: var(--tx-3); font-weight: 600; margin-bottom: 4px;
}
.review-field input {
  width: 100%; box-sizing: border-box; padding: 7px 8px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 1.0rem; color: var(--tx); background: var(--bg);
}
.review-field input:focus { outline: none; border-color: var(--teal); background: #fff; }
.review-note-row { margin-bottom: 10px; }
.review-note-row label { display: block; font-size: 0.85rem; color: var(--tx-3); font-weight: 600; margin-bottom: 4px; }
.review-note-row textarea {
  width: 100%; box-sizing: border-box; padding: 8px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 1.0rem; resize: vertical; min-height: 52px;
  font-family: inherit; color: var(--tx); background: var(--bg);
}
.review-note-row textarea:focus { outline: none; border-color: var(--teal); background: #fff; }
.review-save-btn {
  width: 100%; padding: 10px; font-size: 0.9rem; font-weight: 700;
  background: linear-gradient(135deg, #4a9a8c, #5fbfad);
  color: #fff; border: none; border-radius: 10px; cursor: pointer;
  transition: opacity .15s;
}
.review-save-btn:hover { opacity: .88; }
.review-saved-msg { font-size: 0.95rem; color: #3a9a8c; text-align: center; margin-top: 6px; display: none; }

/* AI相談サマリー */
.ai-summary-count {
  font-size: 0.88rem;
  color: var(--tx-2);
  margin-bottom: 10px;
}

.ai-summary-count strong {
  color: var(--teal);
  font-size: 1rem;
}

.ai-topics-label {
  font-size: 0.85rem;
  color: var(--tx-3);
  margin-bottom: 8px;
}

.ai-topics-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-topic-chip {
  display: inline-block;
  padding: 4px 12px;
  background: var(--teal-l);
  color: var(--teal);
  border-radius: 99px;
  font-size: 0.88rem;
  font-weight: 600;
}

/* ── Protocol upload ─────────────────────────────────────────── */
.protocol-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--r-sm);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
  background: var(--bg);
}

.protocol-dropzone:hover,
.protocol-dropzone.drag-over {
  border-color: var(--teal);
  background: var(--teal-l);
}

.protocol-drop-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  line-height: 1;
}

.protocol-drop-label {
  font-size: 0.88rem;
  color: var(--tx-2);
  font-weight: 600;
  margin: 0;
}

.protocol-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--teal-l);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  color: var(--teal);
  margin-top: 12px;
}

.spinner-inline {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(74,154,140,0.3);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.protocol-saved-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--teal-l);
  border: 1px solid rgba(74,154,140,0.3);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  color: var(--teal);
  font-weight: 600;
}

/* ── Supplement catalog ──────────────────────────────────────── */
.supp-add-details {
  margin-top: 16px;
}

.supp-add-summary {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal);
  cursor: pointer;
  padding: 10px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.supp-add-summary::-webkit-details-marker { display: none; }

.supp-add-form {
  padding: 16px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.supp-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  background: var(--surface);
}

.supp-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--teal-l);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.supp-card-body {
  flex: 1;
  min-width: 0;
}

.supp-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 2px;
}

.supp-card-meta {
  font-size: 0.85rem;
  color: var(--tx-2);
  line-height: 1.5;
}

.supp-card-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal);
  white-space: nowrap;
}

.supp-remove-btn {
  background: none;
  border: none;
  color: var(--tx-3);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s;
}
.supp-remove-btn:hover { color: var(--rose); }

.supp-empty {
  font-size: 0.95rem;
  color: var(--tx-2);
  padding: 12px 0;
}

/* ── Portal Floating AI Chat ─────────────────────────────────── */
body.portal-chat-open .portal-chat-fab-wrap {
  opacity: 0;
  pointer-events: none;
}
.portal-chat-fab-wrap {
  transition: opacity 0.2s;
  position: fixed;
  z-index: 1050;      /* 患者情報を開いていても押せるようにする */
  bottom: 28px;
  /* コンテンツ(.container = 740px)は中央寄せなのに、ボタンだけ画面の端に
     固定されていた。画面が広いほど本文から離れ、視線の外に出る。
     本文の右端に沿わせ、狭い画面では従来どおり端から28px */
  right: max(28px, calc(50% - 370px - 76px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.portal-chat-fab-wrap:hover { animation: none; }

/* 2026-10-02 の見直し: 幅の狭い画面（タブレット縦・スマホ）で患者情報を開くと、
   浮いているAIボタンが食事の kcal や「保存」ボタンに重なって押せなかった。
   患者情報を開いている間（body.pt-modal-open）は隠す。広い画面では、
   患者情報の外側に出るので今までどおり押せる */
/* 2026-10-28: 縦向きのタブレット（〜1023px）でも患者情報は幅いっぱいになったので、そこまで隠す */
@media (max-width: 1023px) {
  body.pt-modal-open .portal-chat-fab-wrap {
    opacity: 0;
    pointer-events: none;
  }
}

/* 6秒でフェードアウトさせていたため、出ている時と消えている時があった。
   アイコンだけでは何のボタンか分からないので、出したままにする */
.portal-chat-fab-label-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: #4a9a8c;
  background: #fff;
  padding: 3px 10px;
  border-radius: 99px;
  box-shadow: 0 2px 8px rgba(50,30,20,0.12);
  letter-spacing: 0.04em;
  pointer-events: none;
  white-space: nowrap;
}

.portal-chat-fab {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a9a8c 0%, #5bb8a8 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(74,154,140,0.42);
  transition: transform 0.15s, box-shadow 0.2s;
  animation: portal-fab-glow 3s ease-in-out infinite;
}
.portal-chat-fab:hover  { transform: scale(1.07); box-shadow: 0 6px 26px rgba(74,154,140,0.58); }
.portal-chat-fab:active { transform: scale(0.95); }

@keyframes portal-fab-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(74,154,140,0.42); }
  50%       { box-shadow: 0 6px 28px rgba(74,154,140,0.62), 0 0 0 7px rgba(74,154,140,0.10); }
}


/* 患者情報のモーダル(z-index:1000)より上に出す。栄養士は患者のデータを
   見ながらAIに相談するので、患者情報を開いたままAIを開ける必要がある。
   950だったころは背面に回って何も出ないように見えていた */
.portal-chat-panel {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;       /* ボタンと同じ右下に舫う */
  padding: 0 max(28px, calc(50% - 370px - 76px)) 28px 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}

.portal-chat-panel.open {
  pointer-events: all;
  opacity: 1;
}

.portal-chat-overlay {
  position: absolute;
  inset: 0;
  /* デスクトップは脇に付くパネルなので画面を暗くしない。
     暗幕+中央はモーダルの文法で、ボタンから出た感じがしなかった */
  background: transparent;
}

.portal-chat-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  /* AIの返答は「3点挙げる」形式が多く、420×640では1返答の半分しか
     見えなかった。毎回⤢で広げさせるより、既定を大きくする */
  max-width: 500px;   /* 医院全体モードの定型3つが1行に収まる幅 */
  height: min(800px, calc(100vh - 80px));
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.22);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateY(16px);
  transition: transform 0.25s ease;
  overflow: hidden;
}

.portal-chat-panel.open .portal-chat-sheet {
  transform: translateY(0);
}

.portal-chat-drag-handle { display: none; }

.portal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.portal-chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a9a8c 0%, #5bb8a8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.portal-chat-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tx);
}

.portal-chat-sub {
  font-size: 0.85rem;
  color: var(--tx-3);
  margin-top: 1px;
}

.portal-chat-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.portal-chat-close-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--bg-2);
  color: var(--tx-2);
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.portal-chat-close-btn:hover { background: var(--border); }

.portal-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portal-chat-quick-btns {
  display: flex;
  flex-wrap: wrap;      /* 横スクロールはバーを消していたので「切れている」ようにしか見えなかった */
  gap: 6px;
  padding: 6px 14px 8px;
  flex-shrink: 0;
}

.portal-quick-btn {
  flex-shrink: 0;
  padding: 6px 13px;
  border: 1.5px solid var(--teal);
  border-radius: 99px;
  background: transparent;
  color: var(--teal);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s;
}
.portal-quick-btn:hover {
  background: var(--teal-l);
}

.portal-chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* 患者アプリ（AiChatModal）と同じ位置に免責を出す。読むのは専門家なので
   文言は「医院の判断で確認」に寄せる。13px未満にしない */
.portal-chat-hint {
  margin: 0;
  padding: 8px 16px 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--tx-2);
  flex-shrink: 0;
}
.portal-chat-disclaimer {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--tx-3);
  text-align: center;
  flex-shrink: 0;
}

.portal-chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  background: var(--bg);
  font-size: 1.0rem;
  font-family: inherit;
  color: var(--tx);
  transition: border-color 0.18s;
}
.portal-chat-input:focus {
  outline: none;
  border-color: var(--teal);
}

.portal-chat-send-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a9a8c 0%, #5bb8a8 100%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.18s;
}
.portal-chat-send-btn:hover { opacity: 0.85; }
.portal-chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 返答を待っている間はチップを押せない見た目にする（sendPortalMessage が付け外し） */
.portal-chat-quick-btns.sending .portal-quick-btn {
  opacity: 0.45;
  cursor: wait;
  pointer-events: none;
}

/* ── Chat bubbles (portal) ───────────────────────────────────── */
.p-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.p-msg-row.user {
  flex-direction: row-reverse;
}

.p-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a9a8c 0%, #5bb8a8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.p-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--tx);
  background: var(--bg-2);
  border: 1px solid var(--border);
  white-space: pre-wrap;
}
.p-bubble.md {
  white-space: normal;
}
.p-bubble.md p            { margin: 0 0 7px; }
.p-bubble.md p:last-child { margin-bottom: 0; }
.p-bubble.md strong       { font-weight: 700; }
.p-bubble.md ul, .p-bubble.md ol { margin: 5px 0 7px; padding-left: 18px; }
.p-bubble.md li           { margin-bottom: 3px; }
.p-bubble.md h1, .p-bubble.md h2, .p-bubble.md h3 {
  font-size: 0.95rem; font-weight: 700; margin: 8px 0 4px;
}
.p-bubble.md table        { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 0.95rem; }
.p-bubble.md th, .p-bubble.md td { border: 1px solid var(--border); padding: 4px 8px; }
.p-bubble.md th           { background: rgba(0,0,0,0.04); font-weight: 700; }
.p-bubble.md code         { font-family: monospace; font-size: 0.82em; background: rgba(0,0,0,0.06); border-radius: 3px; padding: 1px 4px; }
.p-bubble.md blockquote   { border-left: 3px solid var(--border); margin: 4px 0; padding: 3px 10px; color: var(--tx-2); }

.p-msg-row.user .p-bubble {
  background: linear-gradient(135deg, #4a9a8c 0%, #5bb8a8 100%);
  color: white;
  border: none;
  border-radius: 16px 16px 4px 16px;
}

.p-msg-thinking {
  color: var(--tx-3);
  font-size: 0.95rem;
  padding: 10px 14px;
}

/* ── Goal nutrient chips (patient app) ──────────────────────── */
.goal-nutrients-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.goal-nutrient-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--teal-l);
  border: 1px solid rgba(74,154,140,0.2);
  border-radius: 99px;
  font-size: 0.85rem;
}

.gnc-label {
  color: var(--teal);
  font-weight: 700;
}

.gnc-value {
  color: var(--tx);
  font-weight: 600;
}

/* ── Goal nutrients details/summary ─────────────────────────── */
.goal-nutrients-details {
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0 14px;
  margin-bottom: 14px;
}

.goal-nutrients-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tx-2);
  cursor: pointer;
  list-style: none;
}
.goal-nutrients-summary::-webkit-details-marker { display: none; }

.goal-nutrients-details[open] .goal-nutrients-summary {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.goal-nutrients-badge {
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--bg-2);
  color: var(--tx-3);
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.05em;
}

.goal-nutrients-details .form-row {
  padding: 12px 0 0;
}

/* ── 診療科テンプレート ────────────────────────────────────────── */
.specialty-select-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.specialty-select {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--tx-1);
  font-size: 1.0rem;
  font-family: inherit;
  cursor: pointer;
  appearance: auto;
}
.specialty-select:focus {
  outline: none;
  border-color: var(--teal);
}

/* 読ませる文章なので、下地は白・文字は本文色にする。
   薄いグレー字を薄いベージュ地に載せていたので、大きくしても読みにくかった */
.specialty-preview-body {
  background: var(--surface);
  border-radius: 10px;
  padding: 20px;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--tx);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* 1行=1項目。折り返しと項目の切れ目が同じ見た目になると、
   どこで終わるのか読み取れない */
.sp-line {
  margin: 0 0 10px;
  padding-left: 14px;
  position: relative;
}
.sp-line:last-child { margin-bottom: 0; }
.sp-line::before {
  content: '';
  position: absolute;
  left: 0; top: 0.75em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border);
}
.sp-preview-row strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.02em;
}
.sp-preview-row p {
  margin: 0;
  line-height: 1.6;
  color: var(--tx-2);
}

/* ═══════════════════════════════════════════════════════
   AI設定相談チャット
══════════════════════════════════════════════════════ */
.config-chat-wrap {
  margin-bottom: 4px;
}

.btn-config-chat-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  background: linear-gradient(135deg, #4a9a8c12, #5bb8a808);
  border: 1.5px solid #4a9a8c44;
  border-radius: 12px;
  font-size: 0.9rem; font-weight: 600; color: var(--teal);
  cursor: pointer; text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.btn-config-chat-toggle:hover {
  background: linear-gradient(135deg, #4a9a8c20, #5bb8a812);
  border-color: var(--teal);
}
.config-chat-chevron {
  font-size: 0.85rem; transition: transform 0.2s; flex-shrink: 0;
}
.config-chat-chevron.open { transform: rotate(180deg); }

.config-chat-panel {
  margin-top: 10px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
}

.config-chat-messages {
  max-height: 340px;
  overflow-y: auto;
  padding: 14px 14px 6px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}

/* メッセージバブル */
.cchat-row { display: flex; }
.cchat-row.user { justify-content: flex-end; }
.cchat-row.assistant { justify-content: flex-start; align-items: flex-start; gap: 8px; }

.cchat-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #4a9a8c, #5bb8a8);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; color: #fff; font-weight: 700;
  margin-top: 2px;
}

.cchat-bubble {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 0.95rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.cchat-row.user    .cchat-bubble { background: var(--teal); color: #fff; border-bottom-right-radius: 4px; }
.cchat-row.assistant .cchat-bubble { background: #fff; border: 1.5px solid var(--border); color: var(--tx); border-bottom-left-radius: 4px; }
.cchat-bubble p { margin: 0 0 6px; }
.cchat-bubble p:last-child { margin-bottom: 0; }
.cchat-bubble strong { color: var(--teal); }

.cchat-thinking {
  font-size: 0.95rem; color: var(--tx-3); padding: 8px 4px;
  display: flex; align-items: center; gap: 6px;
}
.cchat-thinking::before {
  content: ''; display: inline-block;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--teal); border-top-color: transparent;
  animation: spin 0.7s linear infinite; flex-shrink: 0;
}

/* 適用ボタン */
.config-chat-apply-wrap {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border);
  background: #f0faf8;
}
.btn-config-apply {
  width: 100%; padding: 11px;
  background: linear-gradient(135deg, #4a9a8c, #5bb8a8);
  color: #fff; border: none; border-radius: 10px;
  font-size: 0.9rem; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s;
}
.btn-config-apply:hover { opacity: 0.88; }

/* 入力バー */
.config-chat-input-bar {
  display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.config-chat-input {
  flex: 1; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 1.0rem; color: var(--tx);
  background: var(--bg); outline: none;
  transition: border-color 0.15s;
}
.config-chat-input:focus { border-color: var(--teal); }
.config-chat-send-btn {
  padding: 9px 16px;
  background: var(--teal); color: #fff;
  border: none; border-radius: 10px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: opacity 0.15s;
  flex-shrink: 0;
}
.config-chat-send-btn:hover { opacity: 0.85; }
.config-chat-send-btn:disabled { opacity: 0.5; cursor: default; }

/* ── AIサジェストボタン ─────────────────────────────── */
.modal-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn-ai-suggest {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal);
  background: var(--teal-l);
  border: 1.5px solid var(--teal);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.btn-ai-suggest:hover  { opacity: 0.8; }
.btn-ai-suggest:disabled { opacity: 0.5; cursor: default; }

/* AIサジェストチップ */
/* 案を待っている間の1行（動く点＋文）。案が出る場所に出す */
.ai-suggest-busy {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 12px 14px;
  font-size: 0.9rem; color: var(--tx-2);
  background: var(--bg); border-radius: 12px;
}

.ai-suggest-chip {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--tx);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  line-height: 1.5;
}
/* 案の下に添える「根拠」。読み比べ用。13px 未満にしない */
.ai-suggest-basis {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 0.82rem;
  color: var(--tx-3);
  font-weight: 400;
}

.ai-suggest-chip:hover {
  border-color: var(--teal);
  background: var(--teal-l);
}

/* ナースメッセージ送信済みカード */
.nurse-sent-card {
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--teal);
}
.nurse-sent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.nurse-sent-label { font-size: 0.85rem; font-weight: 700; color: var(--teal); }
.nurse-sent-date  { font-size: 0.85rem; color: var(--tx-3); }
.nurse-sent-body  { font-size: 0.95rem; color: var(--tx); line-height: 1.5; }

/* アラートバッジ */
.pt-alert-badge { font-size: 0.85rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.pt-alert-danger { background: #fee2e2; color: #dc2626; }
.pt-alert-warn   { background: #fef3c7; color: #92400e; }
.pt-alert-muted  { background: #eceae6; color: #6b6560; }

/* 患者が共有していない区分の説明。「記録がありません」と同じ見た目にすると
   スタッフが取り違えるので、区別がつく程度に落ち着いた枠で置く */
.pt-not-shared {
  color: var(--tx-2);
  background: #f5f3f0;
  border: 1px dashed #ddd8d2;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* マイルストーン達成 */
.ms-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.ms-icon { flex-shrink: 0; display: flex; align-items: center; }
.ms-info  { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ms-title { font-size: 0.85rem; font-weight: 700; color: var(--tx); }
.ms-date  { font-size: 0.85rem; color: var(--tx-3); }
.btn-celebrate {
  flex-shrink: 0;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 7px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-celebrate:hover { opacity: 0.85; }
.ms-celebrated { flex-shrink: 0; font-size: 0.85rem; font-weight: 700; color: var(--teal); }

/* 食事写真サムネイル */
.meal-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.meal-thumb:hover { opacity: 0.8; }
.meal-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: default;
}
.meal-thumb-empty:hover { opacity: 1; }
/* 写真はあるのに医院から読めない状態。「撮っていない」と同じ顔をさせない */
.meal-thumb-error {
  color: #b26a00;
  border-color: #b26a00;
  cursor: help;
}

/* 食事写真ライトボックス */
/* QRの下のリンク。狭い画面では「QRを／印刷」と割らずに、リンクごと次の行へ（2026-10-28） */
.qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; align-items: center; }
.qr-actions .btn-text { white-space: nowrap; }

.meal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
/* 武藤先生のiPhoneで、拡大した写真が料理名の幅ほどに小さく出た（2026-10-28）。
   箱の幅を中身任せにしていたため。シミュレータでは再現せず原因は推定。
   箱は画面幅いっぱいに決め、写真は縦横比のまま収める */
.meal-lightbox-inner { width: 100%; max-width: 960px; text-align: center; }
.meal-lightbox-inner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  object-fit: contain;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
  .meal-lightbox { padding: 12px; }
  .meal-lightbox-inner img { border-radius: 8px; }
}
.meal-lightbox-caption { color: #fff; font-size: 1rem; margin-top: 10px; }



/* 患者詳細：アクティブ状態ドット */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
}
.status-dot-on  { background: #22c55e; }
.status-dot-off { background: var(--border); }

/* ── 連携解除（患者詳細モーダル） ───────────────────────── */
.unlink-note {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--tx-2);
  margin: 0 0 10px;
}
.btn-danger-outline {
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rose);
  background: transparent;
  border: 1px solid var(--rose);
  border-radius: 8px;
  cursor: pointer;
}
.btn-danger-outline:hover { background: rgba(190, 90, 90, 0.06); }
.btn-danger-outline:disabled { opacity: 0.5; cursor: default; }

/* 患者からの連携解除の申し出 */
.pt-unlink-badge {
  padding: 2px 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--rose);
  background: rgba(190, 90, 90, 0.1);
  border-radius: 999px;
}
.unlink-requested {
  padding: 10px 12px;
  margin: 0 0 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--rose);
  background: rgba(190, 90, 90, 0.07);
  border-left: 3px solid var(--rose);
  border-radius: 6px;
}

/* ── はじめの3ステップ（オンボーディング） ───────────────────── */
.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.onboarding-step:hover {
  border-color: var(--teal);
  background: var(--teal-l);
}

.onboarding-step-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  color: var(--tx-2);
  font-size: 0.85rem;
  font-weight: 700;
}

.onboarding-step.done .onboarding-step-mark {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}

.onboarding-step-body { flex: 1; min-width: 0; }

.onboarding-step-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tx);
}

.onboarding-step.done .onboarding-step-title {
  color: var(--tx-2);
  text-decoration: line-through;
  text-decoration-color: var(--tx-3);
}

.onboarding-step-desc {
  display: block;
  font-size: 0.95rem;
  color: var(--tx-2);
  margin-top: 2px;
  line-height: 1.45;
}

.onboarding-step-arrow {
  color: var(--tx-3);
  font-size: 1.1rem;
  flex-shrink: 0;
}


/* モバイルはボタンの真上に置く場所がないので、従来どおり下からのシート */
@media (max-width: 640px) {
  .portal-chat-panel { justify-content: center; padding: 0; }
  .portal-chat-overlay { background: rgba(0,0,0,0.3); backdrop-filter: blur(2px); }
  .portal-chat-sheet {
    max-width: 100%;
    height: 86vh;
    /* スマホのブラウザは URL 欄のぶん見えている高さが変わる。見えている高さに合わせる（患者さんの窓と同じ理由） */
    height: 86dvh;
    border-radius: 20px 20px 0 0;
    border: none;
    transform: translateY(40px);
  }
}

/* ── 指導方針に照らした観察 ─────────────────────────────────── */
.policy-obs { margin-top: 4px; }

.policy-obs-head {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--teal);
  margin: 14px 0 8px;
}

.policy-obs-note {
  font-size: 0.85rem;
  color: var(--tx-3);
  margin-top: 8px;
  line-height: 1.7;
}

.policy-obs-loading,
.policy-obs-empty {
  font-size: 0.9rem;
  color: var(--tx-3);
  padding: 12px 0;
  line-height: 1.8;
}

/* ── 並び順 ────────────────────────────────────────────────── */
.pt-sort-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.pt-sort-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tx-2);
  flex-shrink: 0;
}

.pt-sort {
  flex: 1;
  max-width: 260px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 1rem;
  font-family: inherit;
  color: var(--tx-1);
  cursor: pointer;
}

/* ── 食事履歴の続きを開く ────────────────────────────────── */
.meal-more-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--tx-2);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.meal-more-btn:hover { border-color: var(--teal); color: var(--teal); }

/* ── 栄養士コメント ────────────────────────────────────────── */
.meal-review { display: block; width: 100%; margin-top: 8px; }
.meal-review-form { width: 100%; }
.meal-review-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
}

.meal-comment-shown {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--bg-2);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.meal-comment-icon { flex-shrink: 0; }
.meal-comment-text { font-size: 0.95rem; color: var(--tx-1); line-height: 1.7; }

.meal-comment-toggle {
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--tx-2);
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.meal-comment-toggle:hover { border-color: var(--teal); color: var(--teal); }

.meal-review-form { margin-top: 8px; }

/* ── 患者カード本体 ────────────────────────────────────────── */
.pt-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pt-card-actions { flex-shrink: 0; }

/* ── 食事記録：日付と食事区分でまとめる ─────────────────────── */
.meal-day {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface);
}
.meal-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.meal-day-date  { font-size: 1rem; font-weight: 800; color: var(--tx-1); }
.meal-day-total { font-size: 0.95rem; font-weight: 700; color: var(--teal); }

.meal-type-group { margin-bottom: 12px; }
.meal-type-group:last-child { margin-bottom: 0; }
.meal-type-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tx-2);
  margin-bottom: 6px;
}

.meal-item {
  display: block;      /* 入力欄が行の横に回り込んで料理名を潰していた */
  margin-bottom: 8px;
}
.meal-item:last-child { margin-bottom: 0; }
.meal-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.meal-item-name {
  flex: 1;
  /* 料理名は Chrome の言葉の区切りの推測が外れる（「に／ぎり寿司盛り合わせ」。2026-10-28） */
  word-break: normal;
  min-width: 0;
  font-size: 0.95rem;
  color: var(--tx-1);
  line-height: 1.5;
}
.meal-item-kcal {
  font-size: 0.9rem;
  color: var(--tx-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.meal-comment-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  opacity: .45;
}
.meal-comment-btn:hover { opacity: 1; border-color: var(--teal); }
.meal-comment-btn.has   { opacity: 1; border-color: var(--teal); background: var(--teal-l, #eaf5f2); }

/* ── 応答待ちの表示 ────────────────────────────────────────── */
/* 「考え中...」の静止テキストは、止まっているのか動いているのか分からない */
.p-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}
.p-typing i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tx-3);
  display: inline-block;
  animation: p-typing-bounce 1.2s infinite ease-in-out;
}
.p-typing i:nth-child(2) { animation-delay: .18s; }
.p-typing i:nth-child(3) { animation-delay: .36s; }

@keyframes p-typing-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: .35; }
  30%           { transform: translateY(-5px); opacity: 1;   }
}

.p-searching { color: var(--tx-2); font-size: 0.95rem; }

/* ── 血液検査 ──────────────────────────────────────────────── */
.blood-date {
  font-size: 0.9rem;
  color: var(--tx-2);
  margin-bottom: 12px;
}
.blood-date-stale { color: #b5842a; font-weight: 700; }

.blood-grid {
  display: grid;
  /* 96px では基準の文が枠の中で折れていた（2026-10-13）。スマホで2列・広い画面で3列 */
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

.blood-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  background: var(--surface);
}
.blood-label { font-size: 0.85rem; color: var(--tx-2); margin-bottom: 4px; }
.blood-value { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.blood-unit  { font-size: 0.82rem; font-weight: 600; color: var(--tx-3); margin-left: 2px; }
.blood-note  { font-size: 0.85rem; font-weight: 700; margin-top: 2px; }
.blood-range { font-size: 0.82rem; color: var(--tx-3); margin-top: 4px; }

/* ── 日ごとの栄養サマリー ──────────────────────────────────── */
.mdn-bars { padding: 6px 0 8px; }
.mdn-bar-row { padding: 6px 0; }
.mdn-bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mdn-bar-label { font-size: 0.92rem; color: var(--tx-2); white-space: nowrap; }
.mdn-bar-val { font-size: 0.86rem; color: var(--tx-3); white-space: nowrap; }
.mdn-bar-val b { font-size: 1.02rem; font-weight: 800; color: var(--tx); }
.mdn-bar-val b.is-over { color: #c05050; }
.mdn-bar { height: 6px; border-radius: 3px; background: var(--bg-2); margin-top: 4px; overflow: hidden; }
.mdn-bar i { display: block; height: 6px; border-radius: 3px; }
.mdn-bar-note { font-size: 0.82rem; color: var(--tx-3); margin-top: 2px; }
.mdn-bar-foot { font-size: 0.82rem; color: var(--tx-3); margin: 6px 0 0; }
.mdn-bars-last { border-bottom: 1px solid var(--border); margin-bottom: 6px; padding-bottom: 12px; }
.meal-day-nutrients {
  display: grid;
  /* 84px では「8品中4品ぶん」「目安を含む」が途中で折れていた（2026-10-18） */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  padding: 10px 0 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.mdn-item {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
}
.mdn-label { font-size: 0.82rem; color: var(--tx-2); margin-bottom: 2px; }
.mdn-value { font-size: 1rem; font-weight: 800; color: var(--tx-1); }
.mdn-unit  { font-size: 0.82rem; font-weight: 600; color: var(--tx-3); margin-left: 1px; }
/* 何品ぶんの合計か（値が入っていない品があるとき）。13px未満にしない */
.mdn-note  { font-size: 0.82rem; color: var(--tx-3); margin-top: 1px; white-space: nowrap; }
/* 枠の中で項目名を折らない（1日の合計・1品の内訳とも、枠は100px以上にしてある） */
.mdn-label { white-space: nowrap; }

/* ── 食事の内訳と補正 ──────────────────────────────────────── */
.meal-item-row { cursor: pointer; }

.meal-corrected {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--teal);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  vertical-align: middle;
}
/* コメント・確認だけで、数値は直していない記録（2026-10-02）。「医院修正」と見分ける */
.meal-corrected.meal-checked {
  background: transparent;
  color: var(--teal);
  border: 1px solid var(--teal);
}

.meal-detail {
  margin: 8px 0 4px 58px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: 10px;
}
.meal-detail-nutrients {
  display: grid;
  /* 1日の合計と同じ幅（「ビタミンB12」を1行に。2026-10-18） */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.meal-detail-empty { font-size: 0.9rem; color: var(--tx-3); }

.meal-fix { margin-top: 12px; }
.meal-fix > summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal);
  padding: 6px 0;
}
.meal-fix-hint {
  font-size: 0.88rem;
  color: var(--tx-2);
  line-height: 1.75;
  margin: 4px 0 10px;
}
.meal-fix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.meal-fix-grid label,
.meal-fix-note {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tx-2);
}
.meal-fix-grid input,
.meal-fix-note textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 1rem;
  font-family: inherit;
  color: var(--tx-1);
}
.meal-fix-note { margin-bottom: 10px; }

/* ── 週の切り替え ──────────────────────────────────────────── */
.meal-week-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 14px;
}
.meal-week-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tx-1);
  text-align: center;
  flex: 1;
}
.meal-week-btn {
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--tx-2);
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.meal-week-btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.meal-week-btn:disabled { opacity: .35; cursor: default; }

/* ── 規約・サポート ────────────────────────────────────────── */
.support-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.support-link {
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--tx-1);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}
.support-link:hover { border-color: var(--teal); color: var(--teal); }

/* ── チャットのタブ（患者相談／使い方）────────────────────── */
.portal-chat-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.portal-chat-tab {
  flex: 1;
  padding: 9px 6px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tx-3);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.portal-chat-tab:hover { color: var(--tx-2); }
.portal-chat-tab.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

/* ── いつ時点の情報か ──────────────────────────────────────── */
.pt-freshness {
  font-size: 0.85rem;
  color: var(--tx-3);
  white-space: nowrap;
}

/* ── 保存済みかどうかが分かる入力欄 ────────────────────────── */
.field-dirty textarea,
.field-dirty input {
  border-color: var(--rose, #c07a6a) !important;
  background: #fffdf9 !important;
}
/* 保存ボタンは横幅いっぱいなので、横に置くと折り返して据わりが悪い。
   ボタンの真下に置く */
.save-state {
  display: block;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 8px;
}
.save-state:empty { display: none; }
.save-state-dirty { color: #b5842a; }
.save-state-saved { color: var(--teal); }

/* ── 日ごとの開閉 ──────────────────────────────────────────── */
.meal-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.meal-day.open .meal-day-head {
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.meal-day-chevron { color: var(--tx-3); font-size: 0.9rem; flex-shrink: 0; }
.meal-day-count   { font-size: 0.88rem; color: var(--tx-3); margin-left: auto; }
.meal-day-total   { font-size: 0.95rem; font-weight: 700; color: var(--teal); flex-shrink: 0; }
.meal-day-date    { font-size: 1rem; font-weight: 800; color: var(--tx-1); }

/* ── 患者情報とAIコーチを同時に開いたとき ────────────────────
   重ねると、AIに渡している患者データが見えないまま相談することになる。
   横に並べて両方読めるようにする。画面が狭いときは従来どおり重ねる
   （ずらす余地が無く、かえって読めなくなるため）。 */
@media (min-width: 1100px) {
  body.portal-chat-open .pt-modal {
    justify-content: flex-start;
    padding-left: max(24px, calc(50% - 540px));
  }
  body.portal-chat-open .pt-modal-panel {
    animation: none;   /* 位置が変わるときにスライドし直さない */
  }
  body.portal-chat-open .portal-chat-panel {
    padding-right: max(24px, calc(50% - 540px));
  }

  /* 横に並べても患者情報がスクロールできなかった。チャットの器は
     inset:0 の全画面で、開くと pointer-events:all になり、中の
     .portal-chat-overlay（デスクトップでは透明）も全画面を覆うので、
     左の患者情報の上に見えない面が乗ってホイールが届いていなかった。
     並んでいる間はチャットのシートだけが受け取るようにする。
     オーバーレイのクリックで閉じる導線は失われるが、✕が同じ位置にある */
  body.portal-chat-open.pt-modal-open .portal-chat-panel.open { pointer-events: none; }
  body.portal-chat-open.pt-modal-open .portal-chat-overlay    { display: none; }
  body.portal-chat-open.pt-modal-open .portal-chat-sheet      { pointer-events: auto; }
}


/* ── チャット入力（複数行） ────────────────────────────────── */
.portal-chat-input {
  resize: none;
  min-height: 42px;
  max-height: 140px;
  line-height: 1.6;
  padding: 10px 14px;
  /* 角丸の入力欄に既定のスクロールバーが出ると、直線のバーが丸みから
     はみ出して見える。細くして角に合わせる */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.portal-chat-input::-webkit-scrollbar { width: 6px; }
.portal-chat-input::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.portal-chat-input::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

/* ── 患者からのスタンプ ────────────────────────────────────── */
.nurse-reaction {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--teal-l, #eaf5f2);
  color: var(--teal);
  font-size: 0.9rem;
  font-weight: 700;
}

/* ── チャットを大きく表示 ──────────────────────────────────── */
.portal-chat-panel.wide .portal-chat-sheet {
  max-width: min(860px, calc(100vw - 48px));
  height: min(860px, calc(100vh - 80px));
}
@media (min-width: 1100px) {
  body.portal-chat-open .portal-chat-panel.wide { padding-right: 24px; }
  /* 患者情報を開いたまま広げたときは、患者情報（540px）の右に残った幅を
     使う。固定860pxだと患者情報に被さり、AIに渡している記録が読めなかった。
     並べる余地がないほど狭い画面でも既定の500pxは下回らせない */
  body.portal-chat-open.pt-modal-open .portal-chat-panel.wide .portal-chat-sheet {
    max-width: max(500px, calc(100vw - max(24px, 50vw - 540px) - 540px - 48px));
  }
}

/* ── 日ごとの開閉（矢印） ──────────────────────────────────── */
/* ▾▸ の文字だと環境で大きさが揃わず、押せる印にも見えなかった */
.meal-day-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--tx-2);
  transition: transform 0.15s, background 0.15s;
  transform: rotate(-90deg);   /* 閉じているときは右向き */
}
.meal-day.open .meal-day-chevron {
  transform: rotate(0deg);     /* 開いたら下向き */
  background: var(--teal);
  color: #fff;
}
.meal-day-head:hover .meal-day-chevron { background: var(--border); }
.meal-day.open .meal-day-head:hover .meal-day-chevron { background: var(--teal); }

/* ── 方針プレビュー ───────────────────────────────────── */
/* 医院が書いた方針が、患者との会話にどう出るかをその場で確かめる欄。
   設定フォームの続きなので、囲みは軽くして「保存」より前に出過ぎないようにする */
.policy-preview {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border);
}
.policy-preview-title { font-size: 1.05rem; font-weight: 700; color: var(--tx); margin: 0 0 6px; }
.preview-samples { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.preview-sample {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 99px;
  background: var(--surface); color: var(--tx-2); font-size: 0.92rem;
  cursor: pointer; font-family: inherit;
}
.preview-sample:hover { border-color: var(--teal); color: var(--teal); }
.preview-input-row { display: flex; gap: 8px; align-items: center; }
.preview-input {
  flex: 1; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 0.95rem; font-family: inherit; outline: none; box-sizing: border-box;
}
.preview-input:focus { border-color: var(--teal); }
.btn-preview-run {
  flex-shrink: 0; padding: 11px 22px; border: none; border-radius: 10px;
  background: var(--teal, #4a9a8c); color: #fff; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.btn-preview-run:disabled { opacity: 0.55; cursor: default; }
.preview-result { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.preview-bubble { padding: 12px 15px; border-radius: 14px; font-size: 0.95rem; line-height: 1.75; white-space: pre-wrap; }
.preview-bubble-patient { align-self: flex-end; max-width: 85%; background: var(--bg); color: var(--tx); }
.preview-bubble-ai      { align-self: flex-start; max-width: 92%; background: #eef5f3; color: var(--tx); }
.preview-loading { color: var(--tx-3); font-size: 0.95rem; margin: 0; }
.preview-error   { color: #c05050; font-size: 0.95rem; margin: 0; line-height: 1.7; }

/* ── 差出人（メッセージ・食事コメントの送信欄） ───────────────── */
.nurse-sender {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.nurse-sender-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tx-2);
  flex-shrink: 0;
}

.nurse-sender-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--tx);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
}

.nurse-sender-input:focus {
  outline: none;
  border-color: var(--teal);
}

/* 患者に出る文字列そのもの。読み飛ばされると意味がないので本文と同じ濃さ */
.nurse-sender-preview {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: var(--tx-2);
}

.nurse-sender-preview.is-warning { color: var(--rose); }

/* ご意見に添える写真 */
.fb-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fb-previews:empty { display: none; }
.fb-preview { position: relative; }
.fb-preview img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.fb-preview-x { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--tx-2); font-size: 16px; line-height: 1; cursor: pointer; }
.fb-preview-x:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── おすすめレシピ（migration_055）──────────────────────────── */
.recipes-note {
  font-size: 0.95rem;
  color: var(--tx-2);
  background: var(--bg-2);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.recipe-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  background: var(--surface);
}
.recipe-card-body { flex: 1; min-width: 0; }
.recipe-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tx);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.recipe-badge {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg-2);
  color: var(--tx-2);
}
.recipe-badge.is-pub { background: var(--teal-l); color: var(--teal); }
.recipe-card-meta { font-size: 0.875rem; color: var(--tx-2); margin-top: 2px; }
.recipe-card-summary { font-size: 0.9rem; color: var(--tx-2); margin-top: 4px; line-height: 1.55; }
.recipe-card-warn { font-size: 0.85rem; color: var(--rose); margin-top: 6px; }
.recipe-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.recipe-card-actions .btn-text { font-size: 0.875rem; }
.recipe-card-actions .recipe-del { color: var(--rose); }

.recipe-import-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.recipe-import-actions .btn-portal-primary { width: auto; margin-top: 0; padding: 11px 18px; }

.btn-recipe-secondary {
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--tx);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.btn-recipe-secondary:hover { border-color: var(--teal); color: var(--teal); }
.btn-recipe-secondary:disabled, .recipe-import-actions button:disabled { opacity: 0.5; cursor: default; }

.recipe-editor {
  margin-top: 18px;
  padding: 16px;
  border: 1.5px solid var(--teal);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.recipe-editor-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; color: var(--tx); }
.recipe-editor textarea,
.recipe-editor .re-row input {
  width: 100%;
  padding: 9px 10px;
  border: 1.5px solid var(--border-field);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--tx);
  box-sizing: border-box;
}
.re-servings-row input { max-width: 120px; }
.re-block { margin: 16px 0; }
.re-block-head { font-size: 0.95rem; font-weight: 700; color: var(--tx); margin-bottom: 4px; }
.re-block .hint { margin-bottom: 8px; }
.re-row { margin-bottom: 8px; }
.re-ing {
  display: grid;
  grid-template-columns: 2fr 0.8fr 1fr 1.6fr auto;
  gap: 6px;
  align-items: center;
}
.re-step {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}
.re-step-top { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.re-step-top .re-step-title { flex: 1; }
.re-step-min { display: flex; align-items: center; gap: 4px; font-size: 0.9rem; color: var(--tx-2); white-space: nowrap; }
.re-step-min input { width: 64px !important; }
.re-remove {
  background: none;
  border: none;
  color: var(--tx-3);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 6px;
}
.re-remove:hover { color: var(--rose); }
.re-nutri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.re-nutri label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--tx-2); }
.re-nutri input {
  width: 90px;
  padding: 8px;
  border: 1.5px solid var(--border-field);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}
.re-publish { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; margin: 8px 0 12px; cursor: pointer; }
.recipe-editor-actions { display: flex; gap: 8px; align-items: center; }
.recipe-editor-actions .btn-portal-primary { width: auto; margin-top: 0; padding: 11px 24px; }

@media (max-width: 600px) {
  .re-ing { grid-template-columns: 1fr 0.7fr 0.9fr auto; }
  .re-ing .re-ing-note { grid-column: 1 / -2; }
  .recipe-card { flex-direction: column; }
  .recipe-card-actions { flex-direction: row; align-items: center; }
}

/* 資料の字数。患者アプリは3,000字で切ってAIに渡すので、超えたら目立たせる（2026-09-29） */
.protocol-char-count {
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--tx-3);
  line-height: 1.6;
}
.protocol-char-count.over {
  color: var(--rose);
  font-weight: 600;
}

/* ── QRの印刷用の1枚（2026-09-29） ─────────────────────────────
   画面では出さない。印刷のとき body.print-qr が付いていれば、これ以外を
   すべて隠して、受付に貼れる1枚（医院名・大きなQR・読み取り方・コード）にする。
   印（print-qr）は portal.js の「QRを印刷」ボタンと beforeprint が付ける */
#qr-print-sheet { display: none; }

@media print {
  body.print-qr > *:not(#qr-print-sheet) { display: none !important; }
  body.print-qr {
    background: #fff !important;
    margin: 0;
    padding: 0;
  }
  body.print-qr #qr-print-sheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 95vh;
    color: #22282a;
    font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #qr-print-sheet p { margin: 0; }
  #qr-print-sheet .qr-print-brand {
    font-size: 16pt;
    font-weight: 700;
    color: #35786c;
    letter-spacing: .06em;
    margin-bottom: 6mm;
  }
  #qr-print-sheet .qr-print-clinic {
    font-size: 26pt;
    font-weight: 700;
    margin-bottom: 8mm;
  }
  #qr-print-sheet img {
    width: 110mm;
    height: 110mm;
    margin-bottom: 8mm;
  }
  #qr-print-sheet .qr-print-howto {
    font-size: 20pt;
    font-weight: 700;
    margin-bottom: 3mm;
  }
  #qr-print-sheet .qr-print-sub {
    font-size: 13pt;
    color: #4a5450;
    margin-bottom: 12mm;
  }
  #qr-print-sheet .qr-print-code-label {
    font-size: 13pt;
    color: #4a5450;
    margin-bottom: 2mm;
  }
  #qr-print-sheet .qr-print-code {
    font-size: 16pt;
    font-family: ui-monospace, Menlo, monospace;
    word-break: break-all;
  }
}

/* ── 読み込み直し・失敗の表示（2026-10-02 の見直し） ───────────── */
/* 「もう一度読み込む」。ページごと再読み込みさせず、その場所だけ読み直す */
.btn-reload {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 18px;
  border: 1.5px solid var(--teal);
  border-radius: 999px;
  background: #fff;
  color: var(--teal);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-reload:hover { background: var(--teal); color: #fff; }
.btn-reload:disabled { opacity: 0.6; cursor: default; }
/* 記録が無いのではなく、読めなかった。「記録なし」と同じ薄い色にしない */
.pt-load-failed { color: var(--rose); line-height: 1.8; }

/* 推定値の修正を保存した知らせ。描き直しても残す */
.meal-fix-status {
  margin: 8px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--teal); font-weight: 600;
}
.meal-fix-status:empty { display: none; }

/* AIチャットで送れなかったときの知らせ（履歴には入れない） */
.p-msg-row .p-bubble.p-bubble-error,
.cchat-row.assistant .cchat-bubble.cchat-error {
  color: var(--rose);
  border: 1px solid var(--rose);
  background: #fff;
  line-height: 1.7;
}

/* 次回の来院日（患者詳細）と、来院前のバッジ（migration_076、2026-10-06） */
.visit-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.visit-date-input { font-size: 1rem; padding: 8px 10px; border: 1px solid var(--border, #e8e2dc); border-radius: 10px; background: #fff; color: inherit; }
.pt-visit-soon { background: var(--teal-l); color: var(--teal); font-weight: 700; }

/* 下書きのままのレシピの知らせ（2026-10-06） */
.recipe-draft-note {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px; border-radius: 12px;
  background: #fef3c7; color: #6b4a00; font-size: 0.92rem; line-height: 1.6;
}
.recipe-draft-note > div { flex: 1; min-width: 240px; }

/* 来院前のお知らせの設定（カスタムタブ） */
.visit-num-row { display: flex; align-items: center; gap: 8px; font-size: 1rem; white-space: nowrap; }
.visit-num-row .visit-num-input { width: 96px; flex: 0 0 96px; max-width: 96px; font-size: 1.05rem; padding: 8px 10px; border: 1px solid var(--border, #e8e2dc); border-radius: 10px; background: #fff; color: inherit; }

/* 患者詳細: 診察券番号を医院側で入れる欄（2026-10-06） */
.pt-card-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pt-card-edit-label { font-size: 0.92rem; color: var(--tx-2); font-weight: 600; min-width: 9.5em; white-space: nowrap; }  /* 2つの欄の入力をそろえる */
.pt-card-edit .pt-card-edit-input { width: 170px; flex: 0 0 170px; font-size: 1rem; padding: 7px 10px; border: 1px solid var(--border, #e8e2dc); border-radius: 10px; background: #fff; color: inherit; }
.pt-card-edit-btn { padding: 7px 14px; }

/* ご意見への返信が届いた知らせ（タブの上の1行）。押すと設定タブの履歴へ */
.fb-reply-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin: 0 0 12px; padding: 12px 16px;
  background: var(--teal-l); color: var(--tx);
  border: 1px solid var(--teal); border-radius: 12px;
  font-size: 0.95rem; font-weight: 600; text-align: left; cursor: pointer;
}
.fb-reply-notice[hidden] { display: none; }
.fb-reply-notice-go { flex: none; color: #2f7a6c; font-weight: 700; }
.fb-item-new {
  display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px;
  background: #2f7a6c; color: #fff; font-size: 0.82rem; font-weight: 700;
}

/* 一覧の上の「患者さんのリアクション」「連携解除の申し出」 */
.pt-attention { margin: 0 0 16px; display: grid; gap: 10px; }
.pt-attention[hidden] { display: none; }
.pt-attention-item {
  padding: 12px 16px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--teal);
}
.pt-attention-unlink { border-left-color: var(--rose); }
.pt-attention-name.pt-attention-hard { border-color: var(--rose); background: var(--rose-l); }
/* 医院がまだ開いていないリアクション（2026-10-28 武藤先生。見たものと新しいものが同じ見た目だった） */
.pt-attention-name.pt-attention-new { border-color: var(--teal); border-width: 2px; }
.pt-reaction-new-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 99px; background: var(--teal); color: #fff; font-size: 0.8rem; font-weight: 700; }
.pt-reaction-new-count { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 99px; background: var(--teal); color: #fff; font-size: 0.85rem; font-weight: 700; vertical-align: 1px; }
.pt-attention-label { font-size: 0.95rem; font-weight: 700; color: var(--tx); }
.pt-attention-names { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
.pt-attention-name {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-field);
  background: var(--bg); color: var(--tx); font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.pt-attention-name:hover { border-color: var(--teal); }
.pt-attention-hint { font-size: 0.85rem; color: var(--tx-2); }

/* ── 指で押す端末: 小さいボタンに押せる大きさを持たせる（2026-10-11 スマホ幅の見直し）──
   先生は iPhone の Safari でポータルを使っている。パソコンの幅でしか見ておらず、
   30〜34px のボタンが残っていた（AIアシスタントの ✕・広げる、食事のコメント、AI提案、AIを停止する） */
@media (pointer: coarse), (max-width: 640px) {
  .portal-chat-close-btn { width: 40px; height: 40px; }
  /* 下へ送ったら「AIアシスタント」の札はしまう（丸いボタンは残す。一番上では札も出る） */
  .portal-chat-fab-label-tag { transition: opacity 0.2s; }
  body.page-scrolled .portal-chat-fab-label-tag { opacity: 0; pointer-events: none; }
  /* iPhone の Safari は、文字が16px未満の入力欄を押すと画面を勝手に拡大する（拡大されたまま戻らず、
     横にずれて ✕ やボタンが画面の外に出る）。入力欄はすべて16px以上にする */
  .portal-body input:not([type=checkbox]):not([type=radio]):not([type=file]),
  .portal-body textarea,
  .portal-body select { font-size: 16px; }
  /* タブの「ご利用状況」が「ご利用...」と切れていた。5文字が入るよう、狭い画面では文字を少し詰める（15px。13px未満にしない） */
  .portal-body .tab-btn { font-size: 0.94rem; padding: 12px 2px; letter-spacing: 0; }
  /* 見出しの字間が広く、右の「ログアウト」とぶつかりそうだった（2026-10-28） */
  .portal-body header h1 { font-size: 1.9rem; letter-spacing: 0.06em; }
  /* 右下の AIアシスタントのボタンが、一覧の最後の行の「›」や文字に重なる。一覧の下に、ボタンの高さぶんの空きを足す */
  .portal-body .container { padding-bottom: 150px; }
  .meal-comment-btn { width: 40px; height: 40px; }
  .btn-ai-suggest { padding: 9px 14px; }
  .pt-ai-toggle { padding: 9px 14px; }
}


/* ── スマホの幅: AIアシスタントの窓を広く・免責を1行に（2026-10-12）──
   丸いボタンの位置と大きさは変えない。重なりは、一覧を下まで送れる空き（上の padding-bottom: 150px。
   CCP と同じやり方）で避ける。小さくして隅へ寄せる案・下に帯を取る案は見送り（伊藤さんの判断） */
@media (max-width: 640px) {
  /* 窓の高さ。86% だと上に空きが残り、キーボードが出ると会話の見える所がさらに減る */
  .portal-chat-sheet { height: 96vh; height: 96dvh; }
  /* 免責は1行に収める（13px未満にはしない） */
  .portal-chat-disclaimer { padding: 0 12px 10px; }
}

/* ── 指で押す端末: 入力中は、案内と質問のボタンをしまう（2026-10-12）──
   キーボードが出て窓が低くなると、案内文と質問のボタンが場所を取り、会話が1行ぶんしか
   見えなかった。打っている間は使わないので、入力欄にカーソルがある間だけしまう。
   入力欄より下（免責の文）は動かさない。動かすと、送信を押した瞬間に入力欄の位置がずれる */
@media (pointer: coarse), (max-width: 640px) {
  .portal-chat-sheet:has(.portal-chat-input:focus) .portal-chat-hint,
  .portal-chat-sheet:has(.portal-chat-input:focus) .portal-chat-quick-btns { display: none !important; }
}

/* 血液検査のこれまでの値（2026-10-13）。最新の欄の下に、4回ぶんまでを表で */
.blood-history { margin-top: 16px; }
.blood-history-title { font-size: 0.95rem; font-weight: 700; color: var(--tx-2); margin-bottom: 6px; }
.blood-history-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blood-history-table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.blood-history-table th, .blood-history-table td { padding: 8px 6px; border-bottom: 1px solid var(--border, #e8e2dc); text-align: right; white-space: nowrap; }
/* スマホの幅でも4回ぶんが横に送らずに収まるよう、左右の余白を詰める */
.blood-history-table th:first-child, .blood-history-table td:first-child { text-align: left; font-weight: 600; padding-left: 2px; }
.blood-history-table th { font-size: 0.85rem; color: var(--tx-2); font-weight: 600; vertical-align: bottom; }
.blood-history-table td { font-weight: 700; }
/* 見出しは年と月日の2段。最新の列は薄く色を敷く */
.blood-history-year { display: block; font-size: 13px; font-weight: 400; color: var(--tx-3); }
.blood-history-new { background: rgba(74, 154, 140, 0.07); }
/* 最新の欄: 基準の数字は途中で折らない。「検査会社の基準」も1行に */
.blood-range-val { white-space: nowrap; }
.blood-basis { white-space: nowrap; }
.blood-history-none { color: var(--tx-3); font-weight: 400; }

/* 用紙の全項目（2026-10-14） */
.lab-all { margin-top: 14px; border-top: 1px solid var(--border, #e8e2dc); padding-top: 10px; }
.lab-all summary { cursor: pointer; font-weight: 700; color: var(--accent, #c17a6b); font-size: 15px; padding: 6px 0; }
.lab-sec { font-size: 14px; font-weight: 700; color: var(--tx-2); margin: 12px 0 4px; }
.lab-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lab-table td { padding: 6px 4px; border-bottom: 1px solid var(--border, #eee); vertical-align: top; }
.lab-name { color: var(--tx-1); }
.lab-val { font-weight: 700; white-space: nowrap; text-align: right; }
.lab-unit { font-weight: 400; color: var(--tx-3); font-size: 13px; }
.lab-ref { color: var(--tx-3); font-size: 13px; margin-top: 2px; }
.lab-conflict { display: block; font-weight: 400; color: #b5842a; font-size: 13px; white-space: normal; }
.lab-note { font-size: 13px; color: var(--tx-2); margin-top: 8px; }
.lab-judge { font-size: 13px; font-weight: 400; margin-top: 2px; white-space: normal; }
.lab-val.lab-out-ref { color: #c05050; }
.lab-val.lab-out-target { color: #b5842a; }
.lab-judge.lab-out-ref { color: #c05050; }
.lab-judge.lab-out-target { color: #b5842a; }

/* ── 今回のお約束（migration_091。2026-10-24 むとう歯科の管理栄養士ヒアリング） ── */
.nurse-promise-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tx-2);
  cursor: pointer;
  min-height: 40px;
}
.nurse-promise-toggle input { width: 20px; height: 20px; accent-color: var(--teal); }

/* 窓の一番上。次の来院でまず見るものなので、ほかの欄と見分けがつくよう枠に色を付ける */
.promise-section {
  border: 1.5px solid var(--teal);
  background: var(--teal-l);
  border-radius: 12px;
  padding: 12px 14px;
}
.promise-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tx);
  white-space: pre-wrap;
}

/* ── 達成の特典（migration_092。2026-10-25） ── */
.reward-rows { display: flex; flex-direction: column; gap: 10px; }
.reward-row { display: grid; grid-template-columns: 11em 1fr; gap: 10px; align-items: center; }
.reward-label { font-size: 0.95rem; font-weight: 700; color: var(--tx-2); }
.reward-input { min-width: 0; padding: 9px 10px; font-size: 16px; border: 1.5px solid var(--border, #ddd); border-radius: 8px; background: var(--bg); color: var(--tx); }
@media (max-width: 560px) { .reward-row { grid-template-columns: 1fr; gap: 4px; } }
.reward-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border, #eee); }
.reward-item:last-child { border-bottom: 0; }
.reward-item-main { min-width: 0; flex: 1; }
.reward-item-title { font-weight: 700; font-size: 0.98rem; color: var(--tx); }
.reward-item-date { display: block; font-weight: 400; font-size: 0.88rem; color: var(--tx-3); }
.reward-item-gift { font-size: 0.95rem; color: var(--tx-2); margin-top: 2px; }
.reward-given { font-size: 0.9rem; font-weight: 700; color: var(--teal); white-space: nowrap; }

/* ── 体組成の推移（2026-10-25） ── */
.bc-trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.bc-trend { margin: 0; background: var(--bg); border-radius: 10px; padding: 8px 10px 4px; min-width: 0; }
.bc-trend-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; font-size: 0.92rem; font-weight: 700; color: var(--tx-2); }  /* 年つきの期間は次の行へ（2026-10-28） */
.bc-trend-diff { font-weight: 600; color: var(--tx-3); white-space: nowrap; }
.bc-trend-svg { width: 100%; height: auto; display: block; }

/* ── サプリをメーカーのページから読み取る（2026-10-25） ── */
.supp-import-results { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.supp-import-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.supp-import-desc { font-size: 0.92rem; color: var(--tx-2); line-height: 1.6; }

/* 本人が書いた「工夫したこと」（migration_092） */
.meal-patient-note { font-size: 0.92rem; color: var(--tx-2); background: var(--teal-l); border-radius: 8px; padding: 6px 10px; margin: 4px 0 2px; }

/* 以前のメッセージ（2026-10-25） */
.nurse-older { margin-top: 6px; }
.nurse-older > summary { cursor: pointer; font-size: 0.95rem; font-weight: 700; color: var(--teal); padding: 8px 0; min-height: 40px; }

/* 本人の工夫（2026-10-25）。一覧の印と、メッセージ欄の上の囲み */
.pt-note-badge { color: var(--teal); font-weight: 700; }
.pt-notes { background: var(--teal-l); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.pt-notes-title { font-size: 0.92rem; font-weight: 700; color: var(--teal); }
.pt-note-meta { font-size: 0.85rem; color: var(--tx-2); }
.pt-note-text { font-size: 1rem; color: var(--tx-1); line-height: 1.6; word-break: auto-phrase; }
.pt-note-new { display: inline-block; background: var(--teal); color: #fff; font-size: 0.8rem; font-weight: 700; border-radius: 6px; padding: 0 6px; margin-right: 6px; }

/* 説明文を ⓘ でしまう（2026-10-25） */
.hint-folded { display: none; }
.hint-folded.is-open { display: block; }
.hint-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 8px; padding: 0; vertical-align: 2px;
  border-radius: 50%; border: 1.5px solid var(--teal); background: transparent;
  color: var(--teal); font: italic 700 13px/1 Georgia, serif; cursor: pointer;
  position: relative;
}
/* 押せる範囲は見た目より広く */
.hint-info-btn::after { content: ''; position: absolute; inset: -10px; }
.hint-info-btn[aria-expanded="true"] { background: var(--teal); color: #fff; }

/* 一覧の行で、声をかける判断に使う値を目立たせる（2026-10-25） */
.pt-meta-v { font-weight: 700; color: var(--tx-1); }
.pt-meta-hot { color: var(--teal); }
.pt-meta-sub { color: var(--tx-3); }
.pt-note-badge { background: var(--teal-l); border-radius: 999px; padding: 1px 10px; }
.modal-section [data-fold-sec] { display: none; }
.modal-section.is-fold-open [data-fold-sec] { display: block; }
/* しまう説明がまだ無い欄（血液検査が無い方など）では i を出さない */
.modal-section:not(:has([data-fold-sec])) .js-sec-fold { display: none; }
.modal-section-title .js-sec-fold { margin-right: auto; }

/* 体組成計の用紙の全項目（2026-10-28） */
.bcs-all { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-2); padding: 0 12px; }
.bcs-all > summary { cursor: pointer; font-size: 0.95rem; font-weight: 700; color: var(--teal); padding: 10px 0; }
.bcs-sec { font-size: 0.85rem; font-weight: 700; color: var(--tx-3); margin: 8px 0 2px; }
.bcs-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.bcs-table td { padding: 6px 0; border-top: 1px solid var(--border); vertical-align: top; font-size: 0.95rem; }
.bcs-name { color: var(--tx); }
.bcs-val { text-align: right; font-weight: 700; color: var(--tx); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bcs-unit, .bcs-ref { font-weight: 400; color: var(--tx-3); font-size: 0.85rem; }

/* ── タブレット・広い画面（2026-10-28 武藤先生「iPadで見ると縦持ちのスマホ向けのデザイン」）──
   本体は幅740pxまで、患者情報は真ん中に540pxで重ねていたので、iPadの横向き（1180px前後）では
   左右が大きく空き、患者情報を開くと一覧が隠れていた。
   縦向き（768〜1023px）: 1列のまま幅いっぱい。数字は横4つ、患者情報は幅いっぱいのパネル。
   横向き・パソコン（1024px〜）: 左に一覧、右に患者情報を並べる。一覧の別の方を押すと右が切り替わる */
/* 患者情報を開いている間、後ろのページは動かさない（並べる幅では止めない） */
@media (max-width: 1023px) {
  body.pt-modal-open { overflow: hidden; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .portal-body .container { max-width: none; padding-left: 28px; padding-right: 28px; }
  .pt-summary-grid { grid-template-columns: repeat(4, 1fr); }
  .pt-modal-panel { max-width: none; width: calc(100% - 32px); max-height: 94vh; max-height: 94dvh; }
}
@media (min-width: 1024px) {
  :root { --pt-split: 58vw; }
  /* 本体は1100pxまで。広げすぎると右下のAIのボタンが一覧に重なる（ボタンは本体の右外に置く） */
  .portal-body .container { max-width: 1100px; padding-left: 32px; padding-right: 32px; }
  .portal-chat-fab-wrap { right: max(28px, calc(50% - 550px - 76px)); }
  .pt-summary-grid { grid-template-columns: repeat(4, 1fr); }
  /* 患者情報を開いている間は、一覧を左に寄せる */
  body.portal-body.pt-modal-open .container {
    max-width: none; margin-left: 0; margin-right: var(--pt-split);
    padding-left: 24px; padding-right: 20px;
  }
  body.portal-body.pt-modal-open .pt-summary-grid { grid-template-columns: repeat(2, 1fr); }
  body.portal-body.pt-modal-open header h1 { font-size: 1.8rem; letter-spacing: 0.06em; }
  .pt-modal { inset: 0 0 0 auto; width: var(--pt-split); align-items: stretch; }
  .pt-modal-backdrop { display: none; }
  .pt-modal-panel {
    max-width: none; width: 100%;
    height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
    border-radius: 0; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08);
    animation: none;
  }
  /* AIのボタンとシートは左の一覧の側に出す（右の患者情報に重ねない） */
  body.pt-modal-open .portal-chat-fab-wrap { right: calc(var(--pt-split) + 24px); }
  body.portal-chat-open .pt-modal { justify-content: stretch; padding-left: 0; }
  body.portal-chat-open.pt-modal-open .portal-chat-panel { padding-left: 16px; padding-right: calc(var(--pt-split) + 24px); }
  /* AIのシートの透明な面が右の患者情報を覆わないように（1100px〜の指定と同じものを1024pxから） */
  body.portal-chat-open.pt-modal-open .portal-chat-panel.open { pointer-events: none; }
  body.portal-chat-open.pt-modal-open .portal-chat-overlay    { display: none; }
  body.portal-chat-open.pt-modal-open .portal-chat-sheet      { pointer-events: auto; }
  body.portal-chat-open.pt-modal-open .portal-chat-panel.wide .portal-chat-sheet {
    max-width: calc(100vw - var(--pt-split) - 48px);
  }
}

/* 単位は数字から離して折らない（「12.3」の次の行に「mg/dL」が落ちないように。2026-10-28） */
.bcs-unit, .blood-unit, .lab-unit, .mdn-unit { white-space: nowrap; }

/* AIを使わない医院（migration_100）。一覧の上に一度だけ出す */
.pt-no-ai-note { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #f3efe9; color: #5c544e; font-size: 15px; line-height: 1.6; }