/* ════════════════════════════════════════════════════════════════
   MediVoX  shared/css/layout.css
   position:fixed レイヤーシェル
   — オーバーレイ・パネル・モーダル・ドロワー・トースト

   ※ app.css でアプリ固有の border / box-shadow 等を上書き可
   ════════════════════════════════════════════════════════════════ */

/* ── 汎用バックドロップ ── */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 90; }
.overlay.show { display: block; }

/* ── 患者パネル（底部スライドアップ）── */
.patient-panel {
  overflow-y: auto; position: fixed; bottom: 0; left: 0; right: 0;
  width: 100%; max-width: 500px; margin: 0 auto;
  background: var(--surface); border-top: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(36px + env(safe-area-inset-bottom,0px));
  transform: translateY(100%); transition: transform .35s cubic-bezier(.34,1.56,.64,1); z-index: 100;
}
.patient-panel.show { transform: translateY(0); }

/* ── 設定パネル ── */
.settings-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 150;
}
.settings-overlay.show { display: block; }
.settings-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  width: 100%; max-width: 500px; margin: 0 auto;
  background: var(--surface); border-top: 1px solid rgba(var(--accent-rgb),.2);
  border-radius: 20px 20px 0 0;
  padding: 16px 20px calc(40px + env(safe-area-inset-bottom,0px));
  transform: translateY(100%); transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  z-index: 160; max-height: 85vh; overflow-y: auto;
}
.settings-panel.show { transform: translateY(0); }

/* スライドパネル（Check の設定パネル呼称）*/
.overlay-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); z-index: 100; }
.overlay-bg.show { display: block; }
.slide-panel {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
  width: 100%; max-width: 520px;
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 16px 18px 44px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  z-index: 110; max-height: 85vh; overflow-y: auto;
}
.slide-panel.show { transform: translateX(-50%) translateY(0); }

/* ── 履歴ドロワー ── */
.hist-drawer-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 199; }
.hist-drawer-bg.open { display: block; }
.hist-drawer {
  position: fixed; bottom: 0; left: 0; right: 0; max-height: 75vh;
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%); transition: transform .3s ease;
  z-index: 200; overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom,0px);
}
.hist-drawer.open { transform: translateY(0); }

/* ── 言語設定モーダル ── */
.ls-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 250; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ls-overlay.show { display: block; }
.ls-modal {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 500px; margin: 0 auto;
  background: var(--surface); border-top: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(32px + env(safe-area-inset-bottom,0px));
  transform: translateY(100%); transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  z-index: 260; max-height: 80vh; overflow-y: auto;
}
.ls-modal.show { transform: translateY(0); }

/* ── ログイン / パスワードゲート ── */
.login-overlay, .pw-gate {
  display: none; position: fixed; inset: 0;
  background: var(--bg); z-index: 99999;
  flex-direction: column; align-items: center; justify-content: flex-start;
  overflow-y: auto;
  padding: max(40px, env(safe-area-inset-top,0px)) 20px 120px;
}
.login-overlay.show { display: flex; }
.pw-gate { display: flex; }
.pw-gate.hidden { display: none; }

/* ── アップグレードモーダル ── */
.upgrade-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 300; align-items: center; justify-content: center; padding: 20px; }
.upgrade-overlay.show { display: flex; }

/* ── フロー選択パネル（Check）── */
.flow-select-panel {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
  width: 100%; max-width: 520px; background: var(--surface);
  border-radius: 20px 20px 0 0; padding: 14px 16px 40px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1); z-index: 110;
  max-height: 80vh; overflow-y: auto;
}
.flow-select-panel.show { transform: translateX(-50%) translateY(0); }

/* ── 言語選択モーダル ── */
.lang-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 280; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lang-modal-overlay.show { display: block; }
.lang-modal {
  position: fixed; top: 50%; left: 0; right: 0;
  max-width: 500px; margin: 0 auto;
  background: var(--surface); border: 2px solid rgba(var(--accent-rgb),.35);
  border-radius: 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom,0px));
  transform: translateY(-50%) scale(.94); opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
  z-index: 290; max-height: 92vh; overflow-y: auto; display: block;
}
.lang-modal.show { transform: translateY(-50%) scale(1); opacity: 1; pointer-events: auto; }

/* ── トースト通知 ── */
.toast {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom,0px)); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 18px;
  font-size: 13px; color: var(--text);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
  opacity: 0; transition: all .25s; pointer-events: none; z-index: 9999;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── スクロール慣性 ── */
.settings-panel, .slide-panel { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ── フォントサイズ大: 固定パネルを viewport 幅に強制（モバイル）── */
@media (max-width: 540px) {
  [data-fontsize="lg"] .settings-panel,
  [data-fontsize="lg"] .slide-panel,
  [data-fontsize="lg"] .ls-modal,
  [data-fontsize="lg"] .hist-drawer,
  [data-fontsize="lg"] .patient-panel {
    width: 100vw; max-width: 100vw; left: 0; right: 0; margin-left: 0; margin-right: 0;
  }
}