:root{
  --bg:#f6f7f9; --panel:#fff; --line:#dfe3e8; --text:#1c2128; --sub:#5b6570;
  --accent:#b3452f; --accent-d:#8f3423; --ok:#1f7a4d; --warn:#8a6100; --err:#b3261e;
  --radius:12px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14171a; --panel:#1c2024; --line:#2c3238; --text:#e6e9ec; --sub:#9aa4ae;
         --accent:#e0765c; --accent-d:#c25d45; --ok:#4cc38a; --warn:#e0b341; --err:#ff6b60; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  font-size:16px; line-height:1.7; -webkit-text-size-adjust:100%;
}
main{max-width:760px; margin:0 auto; padding:16px 16px 96px}

/* ---- ヘッダ ---- */
.bar{position:sticky; top:0; z-index:10; background:var(--panel); border-bottom:1px solid var(--line)}
.bar-in{max-width:760px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:10px}
.logo{font-weight:700; letter-spacing:.08em; color:var(--accent)}
.bar-title{font-size:.95rem; color:var(--sub)}
.bar-cust{margin-left:auto; font-size:.85rem; color:var(--sub); text-align:right}
.progress{height:3px; background:var(--line)}
.progress-in{height:100%; width:0; background:var(--accent); transition:width .25s ease}

/* ---- 共通 ---- */
h1{font-size:1.35rem; margin:.6em 0 .4em}
h2{font-size:1.2rem; margin:.4em 0 .6em}
h3{font-size:1rem; margin:1.4em 0 .4em}
.lead{color:var(--sub); margin:0 0 1em}
.fine{color:var(--sub); font-size:.82rem; margin-top:1.2em}
.note{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent);
      border-radius:var(--radius); padding:10px 12px; color:var(--sub); font-size:.86rem; margin:12px 0}
.err{color:var(--err); font-size:.9rem; margin:8px 0}
.warn{color:var(--warn); font-size:.9rem; margin:0 0 8px}
.spacer{flex:1}

button{font:inherit; border-radius:10px; cursor:pointer; padding:10px 16px; border:1px solid transparent}
button.primary{background:var(--accent); color:#fff}
button.primary:hover{background:var(--accent-d)}
button.primary:disabled{opacity:.5; cursor:default}
button.ghost{background:transparent; color:var(--sub); border-color:var(--line)}
button.ghost:hover{color:var(--text)}

.chk{display:flex; gap:8px; align-items:flex-start; margin:14px 0; font-size:.88rem; color:var(--sub); cursor:pointer}
.chk input{margin-top:.35em; accent-color:var(--accent); width:16px; height:16px; flex:none}
.fld{display:block; margin:16px 0}
.fld span{display:block; font-size:.86rem; color:var(--sub); margin-bottom:6px}
input[type=text], textarea{
  width:100%; padding:11px 12px; font:inherit; color:var(--text);
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
}
textarea{resize:vertical; min-height:46px; max-height:40vh}
input:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px}

/* ---- 問診ログ ---- */
.log{display:flex; flex-direction:column; gap:12px; padding:8px 0 16px}
.msg{max-width:88%; padding:10px 14px; border-radius:14px; white-space:pre-wrap; word-break:break-word}
.msg.ai{align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:4px}
.msg.me{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px}
.msg.sys{align-self:center; background:transparent; color:var(--sub); font-size:.85rem; text-align:center; max-width:100%}
.msg .hint{display:block; margin-top:6px; font-size:.83rem; color:var(--sub)}
.msg.me .hint{color:#ffffffcc}

/* ---- 入力欄 ---- */
.composer{position:sticky; bottom:0; background:var(--bg); padding:10px 0 14px; border-top:1px solid var(--line)}
.composer .row{display:flex; gap:8px; align-items:flex-end}
.composer .row.sub{margin-top:8px; gap:8px; flex-wrap:wrap}
.composer .row.sub button{padding:6px 12px; font-size:.86rem}
/* AI の提案（採用されるかどうかは顧客が決める） */
.bar-ai{font-size:.72rem; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:1px 8px}
.suggest{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent);
         border-radius:var(--radius); padding:10px 12px; margin-bottom:10px}
.suggest-note{font-size:.82rem; color:var(--sub)}
.suggest-val{margin:8px 0; white-space:pre-wrap; word-break:break-word}
.suggest-act{display:flex; gap:8px; flex-wrap:wrap}
.suggest-act button{padding:6px 14px; font-size:.86rem}
.choices button.picked{border-color:var(--accent)}
.choices .tag{display:block; font-size:.7rem; color:var(--accent); font-weight:600}
.choices{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.choices button{background:var(--panel); border:1px solid var(--line); color:var(--text); padding:8px 14px; font-size:.92rem}
.choices button:hover{border-color:var(--accent); color:var(--accent)}
.choices .desc{display:block; font-size:.78rem; color:var(--sub)}

/* ---- 確認画面 ---- */
.status{display:inline-block; padding:6px 12px; border-radius:999px; font-size:.9rem; font-weight:600; margin-bottom:12px}
.status.accepted{background:#1f7a4d1a; color:var(--ok); border:1px solid var(--ok)}
.status.need_more{background:#8a61001a; color:var(--warn); border:1px solid var(--warn)}
.status.meeting{background:#b3452f1a; color:var(--accent); border:1px solid var(--accent)}
.open{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--warn);
      border-radius:var(--radius); padding:12px 14px; margin:12px 0}
.open h4{margin:0 0 6px; font-size:.92rem}
.open ul{margin:0; padding-left:1.2em; color:var(--sub); font-size:.9rem}
.open .fill{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.open .fill .lbl{font-size:.85rem; color:var(--text); margin-bottom:6px}
.open .fill .actions{margin-top:8px}
.open .fill button{padding:6px 14px; font-size:.86rem}
.doc{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:4px 16px 16px}
.doc section{border-bottom:1px solid var(--line); padding:14px 0}
.doc section:last-child{border-bottom:0}
.doc h4{margin:0 0 8px; font-size:.85rem; color:var(--sub); letter-spacing:.04em}
.doc .line{margin:0 0 10px}
.doc .line:last-child{margin-bottom:0}
.doc .lbl{font-size:.8rem; color:var(--sub)}
.doc .val{white-space:pre-wrap; word-break:break-word}
.doc .edit{margin-top:4px; font-size:.8rem; background:transparent; border:1px solid var(--line);
           color:var(--sub); padding:3px 10px; border-radius:8px}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}

/* ---- 完了 ---- */
.receipt{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center; margin:12px 0}
.receipt-no{font-size:1.5rem; font-weight:700; letter-spacing:.06em}
.receipt-at{color:var(--sub); font-size:.85rem; margin:4px 0 12px}
.flow{color:var(--sub); font-size:.92rem}

@media (max-width:480px){
  body{font-size:15px}
  main{padding:12px 12px 88px}
  .msg{max-width:94%}
}