@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Shippori+Mincho:wght@600;800&display=swap');

:root{
  --sea-deep:#0b3d55;
  --sea:#136b8c;
  --sea-bright:#1c94b8;
  --sand:#f3ead9;
  --sand-light:#faf6ec;
  --sun:#e8703a;
  --sun-dark:#c85a29;
  --ink:#173238;
  --line:#d9cdb0;
  --ok:#3f8b5c;
  --card:#ffffff;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Zen Kaku Gothic New', sans-serif;
  background:
    radial-gradient(1200px 400px at 50% -100px, #d7ecf1 0%, transparent 60%),
    var(--sand-light);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:28px 14px 60px;
}
.app{
  width:100%;
  max-width:640px;
}

/* ---- header : 波打ち際モチーフ ---- */
.header{
  position:relative;
  background:linear-gradient(160deg, var(--sea-deep), var(--sea) 65%, var(--sea-bright));
  border-radius:22px;
  padding:26px 24px 34px;
  color:#fff;
  overflow:hidden;
  box-shadow:0 14px 30px -14px rgba(11,61,85,.55);
}
.header-content{
  position:relative;
  z-index:2;
}
.header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:16px;
  z-index:1;
  background:
    radial-gradient(circle at 10px 0, transparent 9px, var(--sand-light) 10px) 0 0/32px 16px repeat-x;
  opacity:.9;
  pointer-events:none;
}
.eyebrow{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#bfe6ef; font-weight:700; display:flex; align-items:center; gap:8px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--sun);display:inline-block;}
h1{
  font-family:'Shippori Mincho', serif;
  font-weight:800;
  font-size:26px;
  margin:8px 0 4px;
  letter-spacing:.02em;
}
.sub{font-size:13px; color:#dcf0f4; line-height:1.6; margin:0; max-width:46ch;}

/* ---- knowledge chip row ---- */
.chips{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;
}
.chip{
  font-size:11px; padding:5px 10px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#eef8fa; border:1px solid rgba(255,255,255,.3);
}

/* ---- chat card ---- */
.card{
  background:var(--card);
  border-radius:22px;
  margin-top:16px;
  border:1px solid var(--line);
  box-shadow:0 20px 40px -28px rgba(23,50,56,.35);
  overflow:hidden;
}
.thread{
  padding:20px 18px 8px;
  display:flex; flex-direction:column; gap:14px;
  min-height:220px;
  max-height:52vh;
  overflow-y:auto;
}
/* URL等の空白を含まない長い文字列は折り返し位置がなく吹き出しからはみ出すため、
   どこでも折り返せるようにする（通常の単語は従来どおり単語境界で折り返す） */
.msg{max-width:88%; font-size:14.5px; line-height:1.72; white-space:pre-wrap; overflow-wrap:anywhere;}
.msg.user{
  align-self:flex-end;
  background:var(--sea);
  color:#fff;
  padding:10px 14px; border-radius:16px 16px 4px 16px;
}
.msg.user img{max-width:180px; border-radius:10px; display:block; margin-bottom:6px;}
.msg.bot{
  align-self:flex-start;
  background:var(--sand);
  padding:12px 15px; border-radius:16px 16px 16px 4px;
  border:1px solid #ecdfc2;
  /* bot はMarkdownをHTML化して表示するため、改行はブロック要素で制御する */
  white-space:normal;
}
.msg.bot .cat{
  display:inline-block;
  font-weight:700; font-size:12.5px;
  background:var(--sun); color:#fff;
  padding:3px 10px; border-radius:8px;
  margin-bottom:6px;
}
/* ---- bot メッセージ内の Markdown 要素 ---- */
.msg.bot > :first-child{margin-top:0;}
.msg.bot > :last-child{margin-bottom:0;}
.msg.bot p{margin:0 0 8px;}
.msg.bot ul,.msg.bot ol{margin:6px 0; padding-left:1.35em;}
.msg.bot li{margin:3px 0;}
.msg.bot li::marker{color:var(--sea);}
.msg.bot strong{font-weight:700; color:var(--sea-deep);}
/* 折り返しは .msg の overflow-wrap:anywhere に任せる（break-all だと収まる行でも単語途中で切れる） */
.msg.bot a{color:var(--sea); text-decoration:underline;}
.msg.bot code{
  background:#fff; border:1px solid #ecdfc2; border-radius:5px;
  padding:0 4px; font-size:13px;
}
.msg.bot h1,.msg.bot h2,.msg.bot h3,
.msg.bot h4,.msg.bot h5,.msg.bot h6{
  font-size:14.5px; font-weight:700; color:var(--sea-deep);
  margin:10px 0 4px; line-height:1.5;
}
/* Markdownテーブル。列が多い表は吹き出しを広げず、ラッパー内で横スクロールさせる */
.msg.bot .md-table-wrap{
  margin:8px 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--card);
  border:1px solid #ecdfc2; border-radius:8px;
}
.msg.bot table{
  border-collapse:collapse; width:100%;
  font-size:13.5px; line-height:1.6;
}
.msg.bot th,.msg.bot td{
  padding:7px 10px; text-align:left; vertical-align:top;
  border-bottom:1px solid #f0e6d0;
}
.msg.bot th+th,.msg.bot td+td{border-left:1px solid #f5efe0;}
.msg.bot th{
  background:var(--sand-light); color:var(--sea-deep);
  font-weight:700; white-space:nowrap;
}
.msg.bot tbody tr:last-child td{border-bottom:none;}
.msg.bot .md-left{text-align:left;}
.msg.bot .md-center{text-align:center;}
.msg.bot .md-right{text-align:right;}
.msg.system{
  align-self:center; font-size:12px; color:#8a7a58; text-align:center;
}
.typing{align-self:flex-start; display:flex; gap:4px; padding:10px 6px;}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--sea);opacity:.4;animation:blink 1.1s infinite;}
.typing span:nth-child(2){animation-delay:.18s;}
.typing span:nth-child(3){animation-delay:.36s;}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}

.starter-row{
  display:flex; gap:8px; overflow-x:auto; padding:2px 18px 14px;
}
.starter{
  flex:none; font-size:12.5px; padding:8px 12px; border-radius:12px;
  background:#fff; border:1px solid var(--line); color:var(--sea-deep);
  cursor:pointer; white-space:nowrap;
}
.starter:hover{border-color:var(--sea-bright); background:#f0faf9;}

.composer{
  border-top:1px solid var(--line);
  padding:12px 14px;
  background:var(--sand-light);
  display:flex; flex-direction:column; gap:8px;
}
.preview{
  display:none; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:6px 10px; font-size:12px; color:var(--sea-deep); width:fit-content;
}
.preview img{width:34px; height:34px; object-fit:cover; border-radius:6px;}
.preview button{
  border:none; background:none; color:var(--sun-dark); font-weight:700; cursor:pointer; font-size:14px;
}
.input-row{display:flex; align-items:flex-end; gap:8px;}
.icon-btn{
  flex:none; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  color:var(--sea);
}
.icon-btn:hover{background:#eef8f7;}
textarea{
  flex:1; resize:none; border:1px solid var(--line); border-radius:14px;
  padding:11px 13px; font-size:14.5px; font-family:inherit; line-height:1.5;
  max-height:110px; min-height:42px; outline:none; background:#fff;
}
textarea::placeholder{
  font-size:12.5px;
  color:#9aa7ab;
}
textarea:focus{border-color:var(--sea-bright); box-shadow:0 0 0 3px rgba(28,148,184,.13);}
.send{
  flex:none; width:42px; height:42px; border-radius:12px; border:none;
  background:var(--sun); color:#fff; font-size:16px; cursor:pointer;
}
.send:disabled{background:#e7c8b3; cursor:not-allowed;}
.send:hover:not(:disabled){background:var(--sun-dark);}

.footnote{
  text-align:center; font-size:11px; color:#8a9aa0; margin-top:14px; line-height:1.7;
}
.footnote a{color:var(--sea); text-decoration:none;}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:#d8cba9; border-radius:8px;}

/* ---- banner ad ----
   #bannerAd は AdSense 専用の枠。AdSense の <ins> がそのまま入るので独自スタイルは持たない
   （ハウス広告用の .banner-ad は廃止した。app.js の AD_CONFIG のコメント参照）。 */

/* ---- thinking popup ad ---- */
.ad-overlay{
  display:none;
  position:fixed; inset:0; z-index:50;
  background:rgba(11,29,37,.55);
  align-items:center; justify-content:center;
  padding:20px;
}
.ad-overlay.show{display:flex;}
.ad-popup{
  width:100%; max-width:320px;
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  position:relative;
  animation:popIn .25s ease;
}
@keyframes popIn{from{transform:scale(.92); opacity:0;} to{transform:scale(1); opacity:1;}}
.ad-popup .ad-tag{
  position:absolute; top:8px; left:10px; z-index:2;
  font-size:9px; letter-spacing:.05em; color:#fff;
  background:rgba(0,0,0,.35); padding:2px 7px; border-radius:6px;
}
.ad-popup .ad-close{
  position:absolute; top:8px; right:8px; z-index:2;
  width:26px; height:26px; border-radius:50%; border:none;
  background:rgba(0,0,0,.4); color:#fff; font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ad-popup .ad-visual{
  height:150px;
  background:linear-gradient(135deg, var(--sun), var(--sun-dark));
  display:flex; align-items:center; justify-content:center;
  font-size:44px; color:#fff;
}
.ad-popup .ad-body{padding:14px 16px 16px;}
.ad-popup .ad-body h3{margin:0 0 4px; font-size:15px; color:var(--ink);}
.ad-popup .ad-body p{margin:0 0 12px; font-size:12.5px; color:#6c7a7f; line-height:1.6;}
.ad-popup .ad-cta{
  display:inline-block; font-size:12.5px; font-weight:700;
  background:var(--sea); color:#fff; padding:8px 14px; border-radius:10px;
  text-decoration:none;
}
.ad-popup .thinking-note{
  display:flex; align-items:center; gap:8px;
  padding:9px 16px; background:var(--sand); font-size:11.5px; color:#7a6b48;
  border-top:1px solid #ecdfc2;
}
.ad-popup .thinking-note .spin{
  width:11px; height:11px; border-radius:50%;
  border:2px solid #d8c79a; border-top-color:var(--sun);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- region chooser (top / apex) ---- */
.regions{
  margin-top:16px;
  display:flex; flex-direction:column; gap:10px;
}
.region-link{
  display:flex; align-items:center; gap:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:0 12px 30px -24px rgba(23,50,56,.4);
}
.region-link:hover{border-color:var(--sea-bright); background:#f6fcfc;}
.region-link .region-emoji{
  flex:none; width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  background:linear-gradient(135deg, var(--sea-bright), var(--sea-deep)); color:#fff;
}
.region-link .region-name{font-size:15px; font-weight:700; margin:0;}
.region-link .region-note{font-size:12px; color:#7a8b90; margin:2px 0 0;}
.region-link .region-arrow{margin-left:auto; color:var(--sea); font-size:18px;}
.section-label{
  font-size:12px; letter-spacing:.04em; color:#8a7a58; font-weight:700;
  margin:18px 2px 4px;
}

/* ---- prefecture filter + city search (top page) ---- */
.region-filter{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:14px;
}
.pref-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-family:inherit; line-height:1;
  padding:8px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--sea-deep);
  cursor:pointer;
}
.pref-chip:hover{border-color:var(--sea-bright); background:#f0faf9;}
.pref-chip .pref-chip-count{
  font-size:11px; font-weight:700;
  background:var(--sand); color:#8a7a58;
  padding:1px 7px; border-radius:999px;
}
.pref-chip.is-active{
  background:var(--sea); border-color:var(--sea); color:#fff;
}
.pref-chip.is-active .pref-chip-count{
  background:rgba(255,255,255,.22); color:#fff;
}

.region-search{
  width:100%; margin-top:10px;
  border:1px solid var(--line); border-radius:14px;
  padding:11px 13px; font-size:14.5px; font-family:inherit; line-height:1.5;
  background:#fff; color:var(--ink); outline:none;
}
.region-search::placeholder{font-size:12.5px; color:#9aa7ab;}
.region-search:focus{border-color:var(--sea-bright); box-shadow:0 0 0 3px rgba(28,148,184,.13);}

.region-search-note{
  font-size:11px; color:#8a9aa0; line-height:1.7;
  margin:6px 2px 0;
}

.region-empty{
  text-align:center; font-size:12.5px; color:#8a7a58;
  background:var(--sand); border:1px solid #ecdfc2; border-radius:14px;
  padding:16px 14px; margin-top:12px;
}

/* .region-link は display:flex を直接持つため hidden 属性が効かない。明示的に打ち消す。 */
.region-link[hidden]{display:none;}