/* 大京AI — www.daikyocorp.co.jp のチャット窓口
 *
 * 配色・余白は既存サイト（assets/teian.css）に合わせてある。
 * ただし**変数は自前で持つ**（このCSSだけで完結させ、サイト側の変更に巻き込まれないため）。
 * 余白は8pxの倍数5段階、角丸は2値（8px と 999px）— design/DESIGN.md の決まり。
 */
.dai{
  --navy:#0f2b4f; --navy-d:#081a31; --gold:#b08a3e;
  --ink:#1b2430; --gray:#586274; --line:#dde2ea; --paper:#f5f7fa;
  --red:#c0391a;                                   /* ★CTAと緊急だけに使う */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --r:8px;
  --font:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;
  font-family:var(--font);
}

/* ── 起動ボタン ───────────────────────────── */
.dai-launch{
  position:fixed; right:var(--s3); bottom:var(--s3); z-index:2147483000;
  display:inline-flex; align-items:center; gap:var(--s1);
  height:56px; padding:0 var(--s3); border:0; border-radius:999px;
  background:var(--navy); color:#fff; font:600 15px/1 var(--font);
  cursor:pointer; box-shadow:0 4px 16px rgba(8,26,49,.28);
}
.dai-launch:hover{background:var(--navy-d);}
.dai-launch:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
.dai-launch svg{width:20px;height:20px;flex:none;}
.dai[data-open="1"] .dai-launch{display:none;}

/* ── 本体 ────────────────────────────────── */
.dai-panel{
  position:fixed; right:var(--s3); bottom:var(--s3); z-index:2147483000;
  display:none; flex-direction:column;
  width:380px; max-width:calc(100vw - var(--s4));
  height:600px; max-height:calc(100vh - var(--s4));
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 12px 40px rgba(8,26,49,.24); overflow:hidden;
}
.dai[data-open="1"] .dai-panel{display:flex;}

.dai-head{
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2); background:var(--navy); color:#fff; flex:none;
}
/* ★1行にまとめる（2026-09-24 オーナー指摘）。2行だとスマホで縦を無駄に食う。
   副題は横に並べ、幅が足りないときだけ隠す。 */
.dai-head>div{display:flex; align-items:baseline; gap:8px; min-width:0;}
.dai-head b{font-size:15px; font-weight:700; letter-spacing:.02em; flex:none;}
.dai-head span{
  font-size:12px; color:#c8d4e4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dai-head .dai-x{
  margin-left:auto; width:32px; height:32px; flex:none;
  border:0; border-radius:var(--r); background:transparent; color:#fff;
  font-size:20px; line-height:1; cursor:pointer;
}
.dai-head .dai-x:hover{background:rgba(255,255,255,.14);}

.dai-body{flex:1; overflow-y:auto; padding:var(--s2); background:var(--paper);}
.dai-body>*+*{margin-top:var(--s2);}

/* ── 吹き出し ─────────────────────────────── */
.dai-msg{max-width:88%; padding:12px var(--s2); border-radius:var(--r); font-size:14px; line-height:1.7;}
.dai-bot {background:#fff; border:1px solid var(--line); color:var(--ink);}
.dai-me  {background:var(--navy); color:#fff; margin-left:auto;}
.dai-msg p+p{margin-top:var(--s1);}
.dai-msg b{color:var(--navy); font-weight:700;}
.dai-me b{color:#fff;}

/* 緊急のときだけ赤。ふだんは1色も使わない */
.dai-alert{background:#fdf3f1; border:1px solid var(--red); color:var(--ink);}
.dai-alert b{color:var(--red);}

/* ── 選択肢 ───────────────────────────────── */
.dai-choices{display:flex; flex-direction:column; gap:var(--s1);}
.dai-choices button{
  width:100%; text-align:left; padding:12px var(--s2);
  border:1px solid var(--navy); border-radius:var(--r);
  background:#fff; color:var(--navy); font:500 14px/1.5 var(--font); cursor:pointer;
}
.dai-choices button:hover{background:var(--navy); color:#fff;}
.dai-choices button:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

/* ── 入力 ────────────────────────────────── */
.dai-form{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:var(--s2);}
.dai-form label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.dai-form label .req{color:var(--red); font-size:12px; margin-left:6px;}
.dai-form input,.dai-form textarea{
  width:100%; padding:10px 12px; margin-bottom:var(--s2);
  border:1px solid var(--line); border-radius:var(--r);
  font:400 16px/1.5 var(--font); color:var(--ink); background:#fff;
}
.dai-form input:focus,.dai-form textarea:focus{outline:2px solid var(--navy); outline-offset:0; border-color:var(--navy);}
/* 自由記入欄。横に伸ばされると窓からはみ出すので縦だけ */
.dai-form textarea{resize:vertical; min-height:72px;}
.dai-form .dai-hint{font-size:12px; color:var(--gray); margin:-8px 0 var(--s2);}
.dai-form .dai-err{font-size:13px; color:var(--red); margin-bottom:var(--s2);}
.dai-send{
  width:100%; padding:14px; border:0; border-radius:var(--r);
  background:var(--red); color:#fff; font:700 15px/1 var(--font); cursor:pointer;
}
.dai-send:hover{filter:brightness(.92);}
.dai-send[disabled]{background:var(--gray); cursor:default;}

/* 人には見えない欄（機械よけ）。send.php の honeypot に合わせる */
.dai-hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important;}


/* ── 画面が狭いとき ───────────────────────── */
@media (max-width:480px){
  .dai-panel{right:0; bottom:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; border:0;}
  .dai-launch{right:var(--s2); bottom:var(--s2);}
  /* ★JS が visualViewport の高さを入れる（キーボード追従）。
     dvh はキーボードで縮まないので、これが無いと会話が数行まで潰れる。 */
  .dai-panel{top:auto;}
}
@media (max-width:480px) and (max-height:520px){
  /* キーボードが出て画面が低いとき。見出しを詰めて会話の行数を稼ぐ */
  .dai-head{padding:8px var(--s2);}
  .dai-head span{display:none;}
}
@media (prefers-reduced-motion:no-preference){
  .dai-panel{animation:dai-in .18s ease-out;}
  @keyframes dai-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
}

/* ── 下の入力欄 ───────────────────────────── */
.dai-bar{
  flex:none; display:flex; align-items:flex-end; gap:var(--s1);
  padding:12px var(--s2); border-top:1px solid var(--line); background:#fff;
}
.dai-bar textarea{
  flex:1; resize:none; max-height:96px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r);
  font:400 16px/1.5 var(--font); color:var(--ink); background:#fff;
}
.dai-bar textarea:focus{outline:2px solid var(--navy); outline-offset:0; border-color:var(--navy);}
.dai-bar button{
  flex:none; width:40px; height:40px; border:0; border-radius:var(--r);
  background:var(--navy); color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.dai-bar button:hover{background:var(--navy-d);}
.dai-bar button:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
.dai-bar button svg{width:20px;height:20px;}
/* ★.dai-bar{display:flex} が hidden 属性に勝ってしまうので明示的に消す */
.dai-bar[hidden]{display:none;}
.dai-form .dai-any{color:var(--gray); font-weight:400; font-size:12px; margin-left:6px;}
/* ★利用目的の明示。窓の下端の固定帯をやめ、個人情報を書く画面の中に置いた */
.dai-form .dai-note{margin:10px 0 0; font-size:11px; line-height:1.6; color:var(--gray);}
.dai-form .dai-note a{color:var(--navy);}