:root{
  --bg:#0e0f12; --bg2:#15171c; --panel:#1a1d24; --line:#262a33;
  --ink:#e7e4dc; --ink-dim:#9a978f; --ink-faint:#6a6862;
  --accent:#c8b89a; --accent-soft:#8a8270; --warn:#b98a6a;
  --r:16px; --maxw:560px;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:16px; line-height:1.75; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
.hidden{display:none !important}

#app{
  max-width:var(--maxw); margin:0 auto; min-height:100dvh;
  padding:env(safe-area-inset-top) 22px calc(96px + env(safe-area-inset-bottom));
}

/* ---------- onboarding ---------- */
.intro{min-height:100dvh; display:flex; flex-direction:column; justify-content:center; gap:30px; padding-bottom:40px}
.intro .kicker{color:var(--accent-soft); font-size:.78rem; letter-spacing:.32em; text-transform:uppercase}
.intro h1{font-size:1.55rem; line-height:1.9; font-weight:600; margin:0; letter-spacing:.04em}
.intro h1 em{font-style:normal; color:var(--accent)}
.intro p{color:var(--ink-dim); font-size:.95rem; margin:0}
.or-line{display:flex;align-items:center;gap:12px;color:var(--ink-faint);font-size:.78rem;margin:4px 0}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}
.fade{animation:fade .9s ease both}
.fade.d1{animation-delay:.15s}.fade.d2{animation-delay:.5s}.fade.d3{animation-delay:.9s}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- shared ---------- */
.screen-head{padding:28px 0 18px}
.screen-head .date{color:var(--ink-faint); font-size:.78rem; letter-spacing:.2em}
.screen-head h2{font-size:1.25rem; margin:.3em 0 0; font-weight:600}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px}
.card + .card{margin-top:14px}
.muted{color:var(--ink-dim)}
.faint{color:var(--ink-faint); font-size:.82rem}
.label{color:var(--accent-soft); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:8px}

input,textarea,button,select{font-family:inherit; font-size:1rem}
.field{
  width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--ink);
  border-radius:12px; padding:14px 16px; line-height:1.7; resize:none;
}
.field:focus{outline:none; border-color:var(--accent-soft)}
::placeholder{color:var(--ink-faint)}

.btn{
  width:100%; border:none; border-radius:12px; padding:15px; font-weight:600;
  background:var(--accent); color:#1b1813; cursor:pointer; letter-spacing:.05em;
  transition:opacity .2s, transform .1s;
}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.4; cursor:default}
.btn.ghost{background:transparent; color:var(--ink-dim); border:1px solid var(--line)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.chip{
  background:var(--bg2); border:1px solid var(--line); color:var(--ink-dim);
  border-radius:999px; padding:8px 14px; font-size:.86rem; cursor:pointer;
}
.chip:active{border-color:var(--accent-soft); color:var(--ink)}

/* ---------- home ---------- */
.facil-card{display:flex; align-items:center; gap:14px}
.facil-orb{
  width:46px;height:46px;border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%, #d8c9ac, #8a8270 70%, #4a473f);
  box-shadow:0 0 24px rgba(200,184,154,.18);
}
.history-item{display:block; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; margin-top:10px; color:var(--ink); cursor:pointer}
.history-item .h-sym{color:var(--ink); font-size:.95rem}
.history-item .h-date{color:var(--ink-faint); font-size:.74rem; letter-spacing:.12em}
.empty{color:var(--ink-faint); text-align:center; padding:30px 10px; font-size:.9rem}

/* ---------- meeting ---------- */
.thread{display:flex; flex-direction:column; gap:16px; padding-top:10px}
.turn{animation:fade .5s ease both; scroll-margin-top:16px}
.bubble-user{align-self:flex-end; max-width:84%; background:var(--accent); color:#1b1813;
  border-radius:16px 16px 4px 16px; padding:11px 15px}
.facil-line{display:flex; gap:11px; align-items:flex-start}
.facil-line .mini-orb{width:26px;height:26px;border-radius:50%;flex:0 0 auto;margin-top:3px;
  background:radial-gradient(circle at 35% 30%, #d8c9ac, #8a8270 70%, #4a473f)}
.facil-name{color:var(--accent); font-size:.74rem; letter-spacing:.12em; margin-bottom:2px}
.facil-text{color:var(--ink); font-size:.95rem}

/* avatar */
.ava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.ex-role{color:var(--accent); font-weight:600; font-size:.86rem}
.ex-domain{color:var(--ink-faint); font-size:.68rem; letter-spacing:.1em; margin-left:8px; font-weight:400}
.ex-body{color:var(--ink-dim); font-size:.92rem; margin-top:2px}

.panel-experts{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:15px}
.expert-row{display:flex; gap:11px; align-items:flex-start}
.expert-body{flex:1}

/* 専門家同士の会話 */
.dialogue{display:flex; flex-direction:column; gap:12px; padding:4px 2px}
.speak-line{display:flex; gap:11px; align-items:flex-start}
.speak-line > div:last-child{flex:1}
.speak-text{color:var(--ink); font-size:.93rem; margin-top:2px}
.speak-line.is-question{background:#171a20; border:1px solid #2a2f3a; border-radius:14px; padding:12px 14px}

.hypothesis{background:linear-gradient(180deg,#1d2128,#181b21); border:1px solid #2c3340; border-radius:14px; padding:16px 18px}
.hypothesis .label{color:var(--warn)}
.hypothesis ul{margin:6px 0 0; padding-left:18px; color:var(--ink)}
.hypothesis li{margin:6px 0; font-size:.94rem}
.disclaimer{color:var(--ink-faint); font-size:.76rem; margin-top:10px; line-height:1.6}

.composer{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:linear-gradient(180deg, rgba(14,15,18,0), var(--bg) 26%);
  padding:18px 22px calc(18px + env(safe-area-inset-bottom));
}
.composer-inner{max-width:var(--maxw); margin:0 auto; display:flex; gap:10px; align-items:flex-end}
.composer .field{flex:1}
.composer .send{flex:0 0 auto; width:52px; height:52px; border-radius:14px; padding:0; font-size:1.1rem}

/* 相談相手の選択／相談中のアクション */
.composer-col{max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; gap:10px}
.select-hint{font-size:.8rem; color:var(--ink-dim)}
.consult-actions{display:flex; gap:8px; justify-content:flex-end}
.btn.sm{height:38px; padding:0 14px; font-size:.82rem; width:auto; flex:0 0 auto}

.thinking{display:flex; gap:6px; padding:6px 0 0 37px}
.thinking i{width:6px;height:6px;border-radius:50%;background:var(--accent-soft);animation:blink 1.2s infinite}
.thinking i:nth-child(2){animation-delay:.2s}.thinking i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---------- profile ---------- */
.trait{display:flex; flex-direction:column; gap:7px; padding:14px 0; border-bottom:1px solid var(--line)}
.trait:last-child{border-bottom:none}
.trait .t-top{display:flex; justify-content:space-between; align-items:baseline}
.trait .t-key{font-size:.92rem}
.trait .t-val{color:var(--ink-dim); font-size:.84rem}
.bar{height:5px; background:var(--bg2); border-radius:3px; overflow:hidden}
.bar > i{display:block; height:100%; background:var(--accent-soft); border-radius:3px}

/* ---------- tabbar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; max-width:var(--maxw); margin:0 auto;
  background:rgba(20,22,27,.92); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{flex:1; background:none; border:none; color:var(--ink-faint); padding:11px 0 12px;
  font-size:.7rem; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; letter-spacing:.12em}
.tab .tab-i{font-size:1rem}
.tab.is-active{color:var(--accent)}
.banner{background:#1d1a16; border:1px solid #3a3326; color:var(--warn); border-radius:12px;
  padding:10px 14px; font-size:.78rem; margin-bottom:14px; letter-spacing:.04em}