/* car-advisor-ai — 明るめ・シンプル・暖色ベース */

:root{
  --cream:#FFF8F0;
  --cream-2:#FFF1E3;
  --card:#FFFFFF;
  --ink:#4A3B33;
  --ink-soft:#8A776C;
  --line:#F0DFCE;

  --accent:#F2884B;        /* メインの暖色（オレンジ） */
  --accent-deep:#DD6B32;
  --accent-soft:#FFE6D2;
  --amber:#F6B65C;
  --coral:#F27E6F;

  --radius:18px;
  --shadow:0 2px 14px rgba(196,131,86,.13);
  --font:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:linear-gradient(170deg,#FFF9F2 0%,#FFEFE0 100%);
  -webkit-font-smoothing:antialiased;
}

.app{
  max-width:560px;
  margin:0 auto;
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--cream);
  box-shadow:0 0 40px rgba(200,140,90,.12);
  position:relative;
  overflow:hidden;
}

/* ---------- ビュー切り替え ---------- */
.view{display:none;flex:1;min-height:0;flex-direction:column}
.view.is-active{display:flex}

.page{
  flex:1;overflow-y:auto;
  padding:26px 20px 24px;
}
.page h2{font-size:1.35rem;margin-bottom:8px}
.lead{color:var(--ink-soft);font-size:.92rem;line-height:1.75;margin-bottom:20px}

/* ---------- チャットヘッダー ---------- */
.chat-head{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;
  background:linear-gradient(135deg,#FFD9B8 0%,#FFC9A5 55%,#FFBE9A 100%);
  border-bottom:1px solid rgba(221,107,50,.12);
  flex-shrink:0;
}
.chat-head-text{flex:1;min-width:0}
.chat-head h1{font-size:1.06rem;letter-spacing:.04em}
.chat-head p{font-size:.74rem;color:#8C5B3A;margin-top:2px}

.ghost-btn{
  width:36px;height:36px;border:none;border-radius:50%;
  background:rgba(255,255,255,.55);color:#9A5C33;
  font-size:1.15rem;cursor:pointer;transition:background .18s;
  flex-shrink:0;
}
.ghost-btn:hover{background:rgba(255,255,255,.9)}

/* ---------- アバター ---------- */
.avatar{position:relative;width:54px;height:54px;flex-shrink:0}
.avatar svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 2px 5px rgba(180,100,50,.28));
  animation:bob 4.5s ease-in-out infinite;}
.av-bg{fill:#FFFDF9}
.av-roof{fill:var(--amber)}
.av-body{fill:var(--accent)}
.av-eyes circle{fill:#FFF;animation:blink 5.2s infinite}
.av-smile{fill:none;stroke:#FFF;stroke-width:2.6;stroke-linecap:round}
.av-cheek{fill:var(--coral);opacity:.55}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
.av-eyes circle{transform-origin:center;transform-box:fill-box}

/* 考え中 */
.thinking-dots{
  position:absolute;inset:auto -4px -2px auto;
  display:none;gap:3px;padding:4px 6px;
  background:#FFF;border-radius:10px;box-shadow:var(--shadow);
}
.thinking-dots i{width:4px;height:4px;border-radius:50%;background:var(--accent);
  animation:dot 1.1s infinite ease-in-out}
.thinking-dots i:nth-child(2){animation-delay:.16s}
.thinking-dots i:nth-child(3){animation-delay:.32s}
@keyframes dot{0%,80%,100%{opacity:.28;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.avatar[data-state="thinking"] .thinking-dots{display:flex}
.avatar[data-state="thinking"] svg{animation:bob 1.4s ease-in-out infinite}
.avatar[data-state="talking"] .av-smile{animation:talk .6s ease-in-out infinite}
@keyframes talk{0%,100%{d:path("M42 64 Q50 69 58 64")}50%{d:path("M42 63 Q50 73 58 63")}}

/* ---------- デモバナー ---------- */
.demo-banner{
  flex-shrink:0;
  background:#FFF4DA;border-bottom:1px solid #F3DFAE;
  color:#8A6414;font-size:.72rem;line-height:1.55;
  padding:8px 16px;text-align:center;
}
.demo-banner strong{
  display:inline-block;background:var(--amber);color:#fff;
  font-size:.65rem;padding:2px 8px;border-radius:999px;margin-right:6px;
}

/* ---------- メッセージ ---------- */
.messages{
  flex:1;overflow-y:auto;
  padding:20px 16px 6px;
  display:flex;flex-direction:column;gap:13px;
  scroll-behavior:smooth;
}
.msg{max-width:84%;line-height:1.78;font-size:.94rem;white-space:pre-wrap;word-break:break-word}
.msg.bot{
  align-self:flex-start;
  background:var(--card);
  border:1px solid var(--line);
  padding:13px 16px;
  border-radius:4px var(--radius) var(--radius) var(--radius);
  box-shadow:var(--shadow);
}
.msg.user{
  align-self:flex-end;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  color:#fff;
  padding:12px 16px;
  border-radius:var(--radius) 4px var(--radius) var(--radius);
  box-shadow:0 2px 10px rgba(221,107,50,.28);
}
.msg.error{
  align-self:center;background:#FFF0EE;border:1px solid #F7C9C2;
  color:#B4483A;font-size:.84rem;padding:10px 14px;border-radius:12px;
}
.msg .cursor{
  display:inline-block;width:2px;height:1em;vertical-align:-.14em;
  background:var(--accent);animation:caret .9s step-end infinite;margin-left:1px;
}
@keyframes caret{50%{opacity:0}}

/* ---------- 費用試算カード ---------- */
.cost-card{
  align-self:stretch;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.cost-head{
  background:linear-gradient(135deg,#FFE2C4 0%,#FFD3AC 100%);
  padding:11px 16px;font-size:.86rem;font-weight:700;color:#8C5B3A;
}
.cost-tabs{display:flex;gap:6px;padding:12px 14px 0;flex-wrap:wrap}
.cost-tab{
  flex:1 1 auto;min-width:0;border:1px solid var(--line);background:#FFFDFA;
  color:var(--ink-soft);font-family:inherit;font-size:.7rem;line-height:1.35;
  padding:7px 8px;border-radius:10px;cursor:pointer;transition:.15s;
}
.cost-tab.is-on{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-deep);font-weight:700}

.cost-controls{padding:14px 16px 4px;display:flex;flex-direction:column;gap:13px}
.cost-controls label{display:block;font-size:.76rem;font-weight:600}
.cost-controls .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.cost-controls output{font-size:.86rem;font-weight:700;color:var(--accent-deep);font-variant-numeric:tabular-nums}
.cost-controls input[type=range]{
  width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--amber) 100%);outline:none;
}
.cost-controls input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;
  border:2px solid var(--accent);cursor:pointer;box-shadow:0 1px 4px rgba(180,100,50,.35);
}
.cost-controls input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);cursor:pointer;
}

.cost-table{width:100%;border-collapse:collapse;margin:12px 0 0;font-size:.83rem}
.cost-table td{padding:6px 16px;border-bottom:1px solid #FBF1E6}
.cost-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.cost-table tr.is-loan td{color:var(--accent-deep)}
.cost-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:13px 16px;background:#FFF6EC;border-top:1px solid var(--line);
}
.cost-total b{font-size:1.3rem;color:var(--accent-deep);font-variant-numeric:tabular-nums}
.cost-total .label{font-size:.82rem;font-weight:700}
.cost-total .unit{font-size:.72rem;color:var(--ink-soft);margin-left:3px}

.cost-loan{display:flex;gap:6px;padding:12px 16px 0}
.cost-loan span{font-size:.74rem;font-weight:600;align-self:center;margin-right:2px}
.cost-loan button{
  flex:1;border:1px solid var(--line);background:#FFFDFA;color:var(--ink-soft);
  font-family:inherit;font-size:.73rem;padding:6px 4px;border-radius:9px;cursor:pointer;transition:.15s;
}
.cost-loan button.is-on{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-deep);font-weight:700}
.cost-note{font-size:.66rem;color:var(--ink-soft);line-height:1.65;padding:10px 16px 14px}

/* ---------- 内装ビューア ---------- */
.interior-card{
  align-self:stretch;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.interior-head{
  background:linear-gradient(135deg,#FFE2C4 0%,#FFD3AC 100%);
  padding:11px 16px;font-size:.86rem;font-weight:700;color:#8C5B3A;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.interior-badge{background:rgba(255,255,255,.72);color:#9A5C33;font-size:.63rem;
  font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.interior-stage{
  position:relative;height:230px;overflow:hidden;background:#EFD9BE;
  cursor:grab;user-select:none;touch-action:pan-y;
}
.interior-stage.is-dragging{cursor:grabbing}
.interior-scene{position:absolute;inset:0;height:100%;width:2200px;transform-origin:left center}
.interior-scene svg{height:100%;width:auto;display:block;pointer-events:none}
.interior-hint{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  background:rgba(74,59,51,.72);color:#fff;font-size:.68rem;
  padding:5px 13px;border-radius:999px;pointer-events:none;transition:opacity .3s;
}
.interior-hint.is-hidden{opacity:0}
.interior-spot{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  border:2px solid #fff;background:rgba(242,136,75,.92);color:#fff;
  font-family:inherit;font-size:.68rem;font-weight:700;
  padding:5px 11px;border-radius:999px;cursor:pointer;white-space:nowrap;
  box-shadow:0 2px 8px rgba(120,70,30,.4);transition:.15s;
}
.interior-spot:hover,.interior-spot.is-on{background:var(--accent-deep);transform:translate(-50%,-50%) scale(1.08)}
.interior-jump{display:flex;gap:6px;padding:12px 14px 0}
.interior-jump button{
  flex:1;border:1px solid var(--line);background:#FFFDFA;color:var(--ink-soft);
  font-family:inherit;font-size:.73rem;padding:7px 4px;border-radius:9px;cursor:pointer;transition:.15s;
}
.interior-jump button:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.interior-info{padding:13px 16px 4px;font-size:.83rem;line-height:1.75}
.interior-info b{display:block;color:var(--accent-deep);font-size:.86rem;margin-bottom:3px}
.interior-ar{
  display:block;width:calc(100% - 32px);margin:12px 16px 0;border:1.5px solid var(--accent);
  border-radius:12px;padding:10px;background:#FFFDFA;color:var(--accent-deep);
  font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:.18s;
}
.interior-ar.is-on{background:var(--accent);color:#fff}
.interior-note{font-size:.66rem;color:var(--ink-soft);line-height:1.65;padding:10px 16px 14px}

/* ---------- 店舗に行く：写真診断 ---------- */
.back-btn{
  border:none;background:none;color:var(--accent-deep);font-family:inherit;
  font-size:.83rem;font-weight:600;cursor:pointer;padding:0 0 12px;
}
.shot-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:20px;
}
.shot-drop{
  border:2px dashed var(--accent);border-radius:14px;background:#FFFBF6;
  padding:30px 18px;text-align:center;cursor:pointer;transition:.18s;
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.shot-drop:hover{background:var(--accent-soft)}
.shot-drop svg{width:40px;height:40px;fill:none;stroke:var(--accent);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.shot-drop b{font-size:.94rem;color:var(--accent-deep)}
.shot-drop span{font-size:.76rem;color:var(--ink-soft);line-height:1.6}
.shot-note{font-size:.68rem;color:var(--ink-soft);line-height:1.7;margin-top:12px}

.diag-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px;
}
.diag-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 16px;color:#fff}
.diag-level{font-size:.94rem;font-weight:700}
.diag-demo{background:rgba(255,255,255,.28);font-size:.62rem;font-weight:600;
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.diag-photo{width:100%;max-height:230px;object-fit:cover;display:block}
.diag-body{padding:15px 16px 17px}
.diag-title{display:block;font-size:.95rem;line-height:1.65;margin-bottom:14px}
.diag-sub{font-size:.75rem;font-weight:700;color:var(--ink-soft);margin-bottom:7px}
.diag-list{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.diag-list li{font-size:.83rem;line-height:1.7;color:var(--ink-soft);
  padding-left:18px;position:relative}
.diag-list li::before{content:"";position:absolute;left:3px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--amber)}
.diag-risk,.diag-cost{
  background:#FFF6EC;border-radius:11px;padding:11px 13px;margin-bottom:9px;
  font-size:.83rem;line-height:1.7;
}
.diag-risk b,.diag-cost b{display:block;font-size:.74rem;color:var(--accent-deep);margin-bottom:3px}
.diag-urgency{font-size:.85rem;font-weight:700;color:var(--accent-deep);margin-top:12px}
.diag-actions{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.ghost-wide{
  border:1px solid var(--line);background:#FFFDFA;color:var(--ink-soft);
  font-family:inherit;font-size:.83rem;padding:11px;border-radius:12px;cursor:pointer;transition:.15s;
}
.ghost-wide:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}

/* ---------- 店舗に行く：お店一覧 ---------- */
.shop-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:13px;
}
.shop-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:9px}
.shop-name{display:block;font-size:.98rem;line-height:1.5}
.shop-type{font-size:.72rem;color:var(--ink-soft)}
.shop-dist{background:var(--accent-soft);color:var(--accent-deep);font-size:.75rem;
  font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.shop-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.shop-tags span{background:#FFF4E4;color:#8A6414;font-size:.68rem;padding:3px 9px;border-radius:6px}
.shop-note{font-size:.82rem;line-height:1.75;color:var(--ink-soft);margin-bottom:11px}
.shop-meta{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.shop-meta>div{display:flex;gap:10px;font-size:.78rem}
.shop-meta dt{color:var(--ink-soft);min-width:38px;flex-shrink:0}
.shop-meta dd{line-height:1.6}
.shop-wait{color:var(--accent-deep);font-weight:700}
.shop-actions{display:flex;gap:8px}
.shop-actions button{
  flex:1;border-radius:11px;padding:10px;font-family:inherit;font-size:.83rem;
  font-weight:600;cursor:pointer;transition:.18s;
}
.shop-call{border:1px solid var(--accent);background:#FFFDFA;color:var(--accent-deep)}
.shop-call:hover{background:var(--accent-soft)}
.shop-book{border:none;color:#fff;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  box-shadow:0 2px 8px rgba(221,107,50,.3)}
.shop-book:hover{transform:translateY(-1px)}
.shop-disclaimer{font-size:.68rem;color:var(--ink-soft);line-height:1.7;margin-top:10px}

.book-form h2{margin-bottom:6px}
.check-line{flex-direction:row!important;align-items:center;gap:9px!important;font-weight:600}
.check-line input{width:18px;height:18px;accent-color:var(--accent)}

.done-card{text-align:center;padding:26px 4px}
.done-mark{
  width:66px;height:66px;margin:0 auto 18px;border-radius:50%;
  background:linear-gradient(135deg,#7CC48D 0%,#5B9E6B 100%);color:#fff;
  font-size:2rem;display:grid;place-items:center;box-shadow:0 4px 14px rgba(91,158,107,.35);
}
.done-meta{text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:15px;margin:20px 0}

/* ---------- 店舗誘導カード ---------- */
.dealer-note{
  align-self:stretch;background:#FFFBF3;border:1.5px solid var(--amber);
  border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 12px rgba(214,150,60,.16);
}
.dealer-note-head{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--amber) 0%,#EFA23F 100%);
  color:#fff;padding:11px 15px;font-size:.87rem;font-weight:700;
}
.dealer-note-head svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.dealer-note-reason{padding:13px 16px 10px;font-size:.85rem;line-height:1.8}
.dealer-note-sub{padding:0 16px 6px;font-size:.74rem;font-weight:700;color:#8A6414}
.dealer-note-list{list-style:none;padding:0 16px 4px;display:flex;flex-direction:column;gap:8px}
.dealer-note-list li{
  font-size:.82rem;line-height:1.7;color:var(--ink-soft);padding-left:22px;position:relative;
}
.dealer-note-list li::before{
  content:"✓";position:absolute;left:2px;top:0;color:var(--amber);font-weight:700;font-size:.85rem;
}
.dealer-note-btn{
  display:block;width:calc(100% - 32px);margin:12px 16px 16px;border:none;border-radius:12px;
  padding:11px;background:linear-gradient(135deg,var(--amber) 0%,#E8933A 100%);
  color:#fff;font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
  box-shadow:0 2px 9px rgba(214,150,60,.35);transition:.18s;
}
.dealer-note-btn:hover{transform:translateY(-1px)}

/* ---------- サジェスト ---------- */
.suggest-row{
  display:flex;gap:8px;padding:8px 16px 2px;
  overflow-x:auto;flex-shrink:0;scrollbar-width:none;
}
.suggest-row::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;border:1px solid var(--accent-soft);
  background:#FFFDFA;color:var(--accent-deep);
  padding:8px 14px;border-radius:999px;font-size:.8rem;
  cursor:pointer;font-family:inherit;transition:.16s;white-space:nowrap;
}
.chip:hover{background:var(--accent-soft);border-color:var(--accent)}

/* ---------- 入力欄 ---------- */
.composer{
  display:flex;align-items:flex-end;gap:9px;
  padding:10px 16px 6px;flex-shrink:0;
}
.composer textarea{
  flex:1;resize:none;max-height:120px;
  font-family:inherit;font-size:.94rem;line-height:1.6;color:var(--ink);
  padding:12px 15px;border:1px solid var(--line);border-radius:20px;
  background:var(--card);outline:none;transition:border-color .18s;
}
.composer textarea:focus{border-color:var(--accent)}
.composer button{
  width:44px;height:44px;flex-shrink:0;border:none;border-radius:50%;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  cursor:pointer;display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(221,107,50,.35);transition:.18s;
}
.composer button:hover:not(:disabled){transform:translateY(-1px)}
.composer button:disabled{opacity:.4;cursor:default;box-shadow:none}
.composer button svg{width:19px;height:19px;fill:#fff}

.disclaimer{
  font-size:.66rem;color:var(--ink-soft);text-align:center;
  padding:0 22px 10px;line-height:1.6;flex-shrink:0;
}

/* ---------- 準備中カード / FAQ / フォーム ---------- */
.soon-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:20px;
}
.soon-badge{
  display:inline-block;background:var(--accent-soft);color:var(--accent-deep);
  font-size:.7rem;padding:4px 11px;border-radius:999px;margin-bottom:12px;font-weight:600;
}
.soon-card>p{font-size:.9rem;line-height:1.8;margin-bottom:14px}
.plan-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.plan-list li{
  font-size:.86rem;color:var(--ink-soft);line-height:1.65;padding-left:20px;position:relative;
}
.plan-list li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--amber);
}

.faq{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  margin-bottom:10px;overflow:hidden;
}
.faq summary{
  padding:15px 17px;font-size:.9rem;font-weight:600;cursor:pointer;
  list-style:none;position:relative;padding-right:42px;line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:17px;top:50%;transform:translateY(-50%);
  color:var(--accent);font-size:1.25rem;font-weight:400;transition:transform .2s;
}
.faq[open] summary::after{content:"−"}
.faq p{padding:0 17px 16px;font-size:.87rem;line-height:1.85;color:var(--ink-soft)}

.pform{display:flex;flex-direction:column;gap:15px}
.pform label{display:flex;flex-direction:column;gap:6px;font-size:.83rem;font-weight:600}
.pform input,.pform textarea{
  font-family:inherit;font-size:.9rem;color:var(--ink);font-weight:400;
  padding:11px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);outline:none;resize:vertical;transition:border-color .18s;
}
.pform input:focus,.pform textarea:focus{border-color:var(--accent)}
.pform input::placeholder,.pform textarea::placeholder{color:#C9B5A6}

.primary-btn{
  border:none;border-radius:14px;padding:14px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  color:#fff;font-family:inherit;font-size:.94rem;font-weight:600;
  cursor:pointer;box-shadow:0 3px 12px rgba(221,107,50,.3);transition:.18s;width:100%;
}
.primary-btn:hover{transform:translateY(-1px)}
.saved-msg{text-align:center;font-size:.82rem;color:var(--accent-deep)}

/* ---------- ナビ ---------- */
.nav{
  display:flex;flex-shrink:0;
  background:var(--card);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-btn{
  flex:1;border:none;background:none;cursor:pointer;font-family:inherit;
  padding:9px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:#C3AC9C;transition:color .18s;
}
.nav-btn svg{
  width:23px;height:23px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.nav-btn span{font-size:.66rem;font-weight:600;letter-spacing:.01em}
.nav-btn.is-active{color:var(--accent-deep)}
.nav-btn.is-active svg{stroke-width:2.2}

@media (min-width:600px){
  .app{height:min(880px,100dvh);margin-top:calc((100dvh - min(880px,100dvh))/2);border-radius:26px}
}

/* ============================================================
   スマートフォン対応
   ============================================================ */

/* タップ時の青いハイライトを消す（ネイティブアプリに近い挙動に） */
*{-webkit-tap-highlight-color:transparent}

/* 入力欄は16px以上にする。これ未満だと iOS がフォーカス時に自動ズームする */
.composer textarea,
.pform input,.pform textarea,.pform select,
.book-form input,.book-form select,.book-form textarea{font-size:16px}

/* スクロールが親要素や背景に連鎖しないようにする */
.messages,.page,.suggest-row{overscroll-behavior:contain}

/* ノッチ・ホームバーを避ける */
.chat-head{padding-top:max(14px,env(safe-area-inset-top))}
.view > .page{padding-top:max(26px,calc(env(safe-area-inset-top) + 12px))}

/* スライダーは細いと指で掴みにくいので、当たり判定を広げる */
.cost-controls input[type=range]{
  height:32px;padding:14px 0;background-clip:content-box;border-radius:0;
}

@media (max-width:600px){
  /* --- 指で押せる大きさ（目安44px）を確保する --- */
  .chip{padding:13px 16px;font-size:.82rem}
  .cost-tab{min-height:44px;padding:8px}
  .cost-loan button{min-height:44px;padding:8px 4px}
  .interior-jump button{min-height:44px;padding:8px 4px}
  .ghost-btn{width:44px;height:44px}
  .nav-btn{padding:10px 2px 9px}
  .faq summary{padding:17px 42px 17px 17px}
  .shop-actions button{min-height:46px}
  .interior-spot{min-height:44px;padding:8px 14px}
  .interior-ar{min-height:46px}
  .dealer-note-btn{min-height:46px}
  .primary-btn{min-height:48px}
  .ghost-wide{min-height:46px}
  .back-btn{min-height:44px;padding:0 8px 12px 0}
  .cost-controls input[type=range]{height:44px;padding:20px 0}
  .pform input,.pform select,.book-form input,.book-form select{min-height:46px}
  .shot-drop{min-height:150px}

  /* --- 縦の余白を詰めて、会話が見える面積を増やす --- */
  .chat-head{gap:11px;padding-left:14px;padding-right:14px;padding-bottom:12px}
  .avatar{width:46px;height:46px}
  .demo-banner{padding:7px 14px;font-size:.68rem}
  .messages{padding:16px 14px 4px;gap:11px}
  .msg{max-width:88%}
  .disclaimer{font-size:.6rem;padding:0 16px 8px;line-height:1.5}
  .page{padding:22px 16px 20px}

  /* --- 内装ビューアは画面幅に合わせて少し低く --- */
  .interior-stage{height:200px}
}

/* 横向き（画面が低いとき）は、固定要素をさらに削る */
@media (max-height:480px) and (orientation:landscape){
  .app{height:100dvh}
  .avatar{width:38px;height:38px}
  .chat-head{padding-top:8px;padding-bottom:8px}
  .chat-head h1{font-size:.95rem}
  .chat-head p{display:none}
  .demo-banner,.disclaimer{display:none}
  .messages{padding-top:12px}
  .nav-btn span{display:none}
  .nav-btn{padding:8px 2px}
  .interior-stage{height:170px}
}

/* 動きを減らす設定の端末では、装飾的なアニメーションを止める */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}