/* fixed-chat.css
   目的：背景が情報量多くても “文字が読める” 固定チャットにする
*/

/* 画面全体 */
body { margin: 0; }

/* --- レイアウト土台 --- */
.fixed-wrap{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* 背景（静止画） */
.fixed-bg{
  position: fixed;
  inset: 0;
  z-index: 0;

  background: center/cover no-repeat;
  filter: saturate(1.02);
}

/* 読みやすさ用の膜（ここが要） */
.fixed-overlay{
  position: fixed;
  inset: 0;
  z-index: 1;

  /* indexほど派手にせず、でも読める濃さ */
  background: rgba(0,0,0,.38);
  pointer-events: none;
}

/* コンテンツ枠 */
.fixed-chat{
  position: relative;
  z-index: 2;

  max-width: 980px;
  margin: 0 auto;

  /* 上：ハンバーガー干渉回避 / 下：入力固定分 */
  padding: 84px 16px 104px;
  box-sizing: border-box;
}

/* モード表示 */
.mode-pill{
  position: sticky;     /* ← スクロールしても上に残る（地味に便利） */
  top: 12px;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(2, 255, 23, 0.38);          
  border: 1px solid rgba(255,255,255,.18);

  color: rgba(255,255,255,.95);
  font-size: 13px;
  font-weight: 700;                     /* ← ちょい太く */
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 8px 18px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.18);
  border-radius: 999px;

  /* ちょいガラス感 */
  background: rgba(2,255,23,.50);
  border: 1px solid rgba(255,255,255,.18);

  animation: floatBadge 3.0s ease-in-out infinite;
  will-change: transform;

}


/* ログ：カード化（ここも効く） */
.chat-log{
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.16);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  min-height: 52vh;
}

/* バブル */
.bubble{
  max-width: 72%;
  padding: 10px 12px;
  border-radius: 16px;

  line-height: 1.5;
  font-size: 15px;
  word-break: break-word;
  white-space: pre-wrap;
}

/* 水葉（左） */
.bubble.mizuha{
  align-self: flex-start;

  background: rgba(255,255,255,.94);
  color: rgba(0,0,0,.88);

  border-top-left-radius: 8px;
}

/* ユーザー（右） */
.bubble.user{
  align-self: flex-end;

  background: rgba(70,160,110,.90);
  color: #fff;

  border-top-right-radius: 8px;
}

/* ヒント */
.hint{
  margin-top: 10px;
  color: rgba(255,255,255,.85);
  font-size: 12px;
}

/* 入力エリア固定 */
.composer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;

  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(0,0,0,.30);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-top: 1px solid rgba(255,255,255,.14);
}

.composer-inner{
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 入力欄 */
.composer textarea{
  flex: 1;
  resize: none;

  min-height: 44px;
  max-height: 120px;

  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.86);

  outline: none;
  font-size: 15px;
  line-height: 1.4;
  box-sizing: border-box;
}

/* 送信ボタン */
.composer button{
  height: 44px;
  padding: 0 16px;

  border-radius: 14px;
  border: 0;

  cursor: pointer;

  background: rgba(70,160,110,.92);
  color: #fff;
  font-weight: 700;
}

/* --- スマホ最適化（軽く） --- */
@media (max-width: 520px){
  .fixed-chat{
    padding: 76px 12px 104px;
  }
  .bubble{
    max-width: 86%;
    font-size: 14px;
  }
}

@keyframes floatBadge {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .mode-pill{ animation: none; }
}

@keyframes badgeGlow {
  0%,100% { filter: drop-shadow(0 0 0 rgba(70,160,110,.0)); }
  50%     { filter: drop-shadow(0 0 10px rgba(70,160,110,.18)); }
}
.mode-pill{
  animation: floatBadge 3.0s ease-in-out infinite, badgeGlow 5.2s ease-in-out infinite;
}

/* --- Hamburger / Drawer Nav --- */
.hamburger{
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 9999;

  width: 44px;
  height: 44px;

  padding: 0;                 /* ← 追加：これが本命 */
  box-sizing: border-box;     /* ← ついでに安定 */
  border: 0;

  border-radius: 14px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display: flex;               /* ← gridから変更 */
  flex-direction: column;
  justify-content: center;     /* ← 縦中央 */
  align-items: center;         /* ← 横中央 */
  gap: 4px;                    /* ← 線の間隔を gap で管理 */
  place-items: center;

  cursor: pointer;

  appearance: none;           /* ← おまけ：標準見た目の影響を減らす */
  -webkit-appearance: none;   /* ← おまけ */
}

.hamburger span{
  display: block;
  width: 22px;
  height: 3pt;                 /* ← 太くする（超重要） */
  background: rgba(255,255,255,.92);
  border-radius: 0;
  box-shadow:none;
}

.nav-overlay{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.35);
}

.nav-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.nav-title{
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.92);
}
.nav-close{
  width: 42px;
  height: 42px;
  padding: 0;                 /* ← 念のため */
  border: 0;
  border-radius: 14px;

  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);

  display: flex;              /* ← ここ重要 */
  align-items: center;        /* ← 縦中央 */
  justify-content: center;    /* ← 横中央 */

  font-size: 22px;
  line-height: 1;             /* ← ベースライン殺す */

  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size: 24px;
  cursor:pointer;
}

.nav-link{
  display: flex;                 /* ← ここ重要 */
  align-items: center;           /* ← 縦中央 */
  gap: 10px;                     /* ← アイコンと文字の間 */
  
  padding: 12px 14px;
  margin-top: 8px;
  border-radius: 14px;

  text-decoration: none;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);

  font-size: 15px;
  line-height: 1;                /* ← ベースライン暴れ防止 */
}

.nav-link:hover{
  background: rgba(255,255,255,.12);
}

/* nav内ボタンをaっぽく */
.nav-link-btn{
  width: 100%;
  text-align: left;
  border: 0;
  cursor: pointer;
  font: inherit;
}

/* ----- Pref Modal ----- */
.pref-overlay{
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 14px;
}

.pref-modal{
  width: min(560px, 100%);
  border-radius: 18px;
  background: rgba(15,15,18,.86);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 14px;
  color: rgba(255,255,255,.94);
}

.pref-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pref-title{ font-weight: 800; letter-spacing: .04em; }
.pref-x{
  width: 42px; height: 42px;
  border: 0; border-radius: 14px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  line-height: 1;
  cursor: pointer;
}

.pref-step{
  padding: 8px 4px 6px;
}

.pref-q{
  font-weight: 800;
  margin: 6px 0 10px;
}
.pref-desc{
  margin: 0 0 10px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  line-height: 1.5;
}

.pref-options{
  display: grid;
  gap: 10px;
  margin: 10px 0 6px;
}

#prefNext { display:none !important; }

.pref-option{
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border-radius: 16px;
  padding: 12px 12px;
  cursor: pointer;
  text-align: left;
  display:flex;
  align-items:center;
  gap: 10px;
}
.pref-option strong{ font-size: 15px; }
.pref-option small{
  display:block;
  color: rgba(255,255,255,.74);
  font-size: 12px;
  margin-top: 2px;
}

.pref-option.selected{
  border-color: rgba(255,255,255,.26);
  background: rgba(70,160,110,.26);
}

.pref-actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.pref-btn{
  height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: rgba(70,160,110,.92);
  color: #fff;
  font-weight: 800;
}
.pref-btn.ghost{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

/* hidden属性は絶対に非表示にする */
.pref-overlay[hidden] { 
  display: none !important; 
}

/* hiddenが外れた時だけ表示 */
.pref-overlay { 
  display: grid; 
}

/* 入力不可時の見た目（軽く） */
.composer.is-disabled{
  opacity: .78;
}

.nav-drawer{
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  height: 100%;
  z-index: 11000; /* ← ここだけ上げる（追加/変更） */
  padding: 14px;

  background: rgba(10,10,12,72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 18px 0 40px rgba(0,0,0,35);
  transition: left .22s ease;
  border-right: 1px solid rgba(255,255,255,10);
  border-left: none;
}
.nav-drawer.open{ left: 0; }