/* ===== 朝のノート — 紙とインクのカーム設計 ===== */
:root{
  --paper:#faf6ef;
  --paper-2:#f3ede2;
  --ink:#2b2926;
  --ink-soft:#6b655c;
  --ink-faint:#a8a196;
  --line:#e6ddce;
  --accent:#c0673a;      /* 朝の陽ざし（テラコッタ）*/
  --accent-soft:#ecd3bf;
  --ai:#3a4a44;          /* AIの問い（深い緑がかった墨）*/
  --gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",-apple-system,system-ui,sans-serif;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#191614; --paper-2:#221e1b; --ink:#ece4d8; --ink-soft:#a89f92;
    --ink-faint:#6a6258; --line:#322c26; --accent:#dc8a5c; --ai:#a9c2b6;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:var(--gothic);
  background:var(--paper);
  color:var(--ink);
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
}
.view{
  min-height:100dvh;
  max-width:600px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 20px) 22px calc(env(safe-area-inset-bottom) + 20px);
  display:flex;flex-direction:column;
}
.hidden{display:none !important}

/* ---------- HOME ---------- */
.home-head{margin-top:6vh}
.greeting{font-family:var(--mincho);font-size:2rem;letter-spacing:.06em;margin:0}
.date{color:var(--ink-soft);font-size:.9rem;margin:.3rem 0 0;letter-spacing:.08em}
.orb-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.orb{
  width:210px;height:210px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 38% 32%, #ffe9d3 0%, var(--accent) 62%, #a8542e 100%);
  color:#fff;font-family:var(--mincho);font-size:1.35rem;letter-spacing:.1em;
  box-shadow:0 18px 50px -18px rgba(192,103,58,.7), inset 0 2px 12px rgba(255,255,255,.35);
  animation:breathe 6.5s ease-in-out infinite;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.orb:active{transform:scale(.97)}
@media (prefers-color-scheme: dark){
  .orb{background:radial-gradient(circle at 38% 32%, #f0a877 0%, var(--accent) 60%, #9a4f2c 100%)}
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.orb-hint{color:var(--ink-soft);text-align:center;max-width:19rem;font-size:.98rem;margin:0}
.streak{display:flex;gap:7px;justify-content:center;align-items:center;flex-wrap:wrap;min-height:24px;margin-bottom:8px}
.streak .dot{width:11px;height:11px;border-radius:50%;background:var(--line)}
.streak .dot.on{background:var(--accent)}
.streak .streak-label{color:var(--ink-soft);font-size:.85rem;margin-left:6px}
.home-nav{display:flex;gap:14px;justify-content:center}
.ghost-btn{background:none;border:none;color:var(--ink-soft);font-family:var(--gothic);
  font-size:.92rem;padding:10px 8px;cursor:pointer;border-bottom:1px solid transparent}
.ghost-btn:active{color:var(--accent)}
.ghost-btn.danger{color:var(--ink-faint)}

/* ---------- SESSION ---------- */
.sess-head,.card-head{display:flex;align-items:center;justify-content:space-between;
  font-size:.9rem;color:var(--ink-soft);letter-spacing:.05em}
.back,.finish{background:none;border:none;color:var(--ink-soft);font-size:1.4rem;
  cursor:pointer;font-family:var(--gothic);padding:4px 8px}
.finish{font-size:.9rem;border:1px solid var(--line);border-radius:20px;padding:6px 14px;color:var(--accent)}
.phase-dots{display:flex;gap:6px}
.phase-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block;transition:background .3s}
.phase-dots i.on{background:var(--accent)}

.thread{flex:1;overflow-y:auto;padding:24px 2px 12px;display:flex;flex-direction:column;gap:22px}
.bubble{max-width:88%;white-space:pre-wrap;word-break:break-word}
.bubble.user{align-self:flex-end;color:var(--ink);background:var(--paper-2);
  padding:12px 15px;border-radius:16px 16px 4px 16px;font-size:1rem}
.bubble.ai{align-self:flex-start;font-family:var(--mincho);color:var(--ai);
  font-size:1.32rem;line-height:1.65;letter-spacing:.02em;padding:2px 4px}
.bubble.ai::before{content:"";display:block;width:26px;height:1px;background:var(--accent);
  margin:0 0 12px;opacity:.6}
.bubble.thinking{align-self:flex-start;color:var(--ink-faint);font-family:var(--mincho);font-size:1.1rem}
.bubble.thinking::after{content:"…";animation:blink 1.4s steps(4) infinite;width:1.5em;display:inline-block;text-align:left}
@keyframes blink{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

.mic-bar{padding-top:10px;border-top:1px solid var(--line)}
.interim{min-height:1.5em;color:var(--ink-soft);font-size:.95rem;margin:0 0 10px;text-align:center}
.mic-controls{display:flex;align-items:center;justify-content:center;gap:14px}
.mic{width:70px;height:70px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper-2);color:var(--accent);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s}
.mic.rec{background:var(--accent);color:#fff;border-color:var(--accent);
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,103,58,.4)}50%{box-shadow:0 0 0 14px rgba(192,103,58,0)}}
.send{background:var(--accent);color:#fff;border:none;border-radius:24px;
  padding:12px 24px;font-family:var(--gothic);font-size:1rem;cursor:pointer}
.mic-state{text-align:center;color:var(--ink-faint);font-size:.82rem;margin:10px 0 0;min-height:1em}

/* ---------- CARD ---------- */
.card-body{flex:1;padding:26px 4px}
.card-block{margin-bottom:22px}
.card-block .k{font-size:.78rem;color:var(--ink-faint);letter-spacing:.12em;margin-bottom:6px}
.card-block .v{font-size:1.05rem}
.card-quote{font-family:var(--mincho);font-size:1.4rem;line-height:1.6;color:var(--ai);
  border-left:2px solid var(--accent);padding-left:16px;margin:8px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  padding:5px 13px;font-size:.9rem}
.energy-dots{display:flex;gap:6px}
.energy-dots i{width:14px;height:14px;border-radius:50%;background:var(--line)}
.energy-dots i.on{background:var(--accent)}
.primary{background:var(--accent);color:#fff;border:none;border-radius:26px;
  padding:16px;font-family:var(--gothic);font-size:1.05rem;cursor:pointer;width:100%}

/* ---------- HISTORY / CALENDAR ---------- */
.calendar{padding:16px 0}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cal-head button{background:none;border:none;color:var(--ink-soft);font-size:1.2rem;cursor:pointer;padding:4px 12px}
.cal-title{font-family:var(--mincho);font-size:1.1rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid .wd{text-align:center;color:var(--ink-faint);font-size:.7rem;padding-bottom:4px}
.cal-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:10px;font-size:.85rem;color:var(--ink-soft);cursor:default}
.cal-cell.has{cursor:pointer;color:var(--ink)}
.cal-cell.has .m{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:3px}
.cal-cell.today{outline:1px solid var(--accent)}
.entry-list{flex:1;overflow-y:auto;padding-top:8px}
.entry-item{padding:16px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.entry-item .ed{font-size:.8rem;color:var(--ink-faint);letter-spacing:.06em}
.entry-item .es{font-family:var(--mincho);font-size:1.08rem;color:var(--ink);margin-top:4px}
.entry-item .em{color:var(--ink-soft);font-size:.85rem;margin-top:4px}
.empty{color:var(--ink-faint);text-align:center;padding:40px 0;font-family:var(--mincho)}

/* ---------- ENTRY DETAIL ---------- */
.entry-detail{flex:1;overflow-y:auto;padding:20px 4px}
.transcript{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.transcript .t-ai{font-family:var(--mincho);color:var(--ai);font-size:1.05rem;margin:14px 0 4px}
.transcript .t-user{color:var(--ink-soft);font-size:.95rem;margin-bottom:8px}

/* ---------- SETTINGS ---------- */
.settings{padding:24px 4px;display:flex;flex-direction:column;gap:4px}
.switch{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:.98rem}
.switch input{width:44px;height:26px;appearance:none;background:var(--line);border-radius:20px;position:relative;cursor:pointer;transition:.2s;flex:0 0 auto}
.switch input:checked{background:var(--accent)}
.switch input::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}
.switch input:checked::after{left:21px}
.setting-note{color:var(--ink-faint);font-size:.82rem;padding:12px 0;line-height:1.6}
.settings hr{border:none;border-top:1px solid var(--line);margin:12px 0}