:root{
  --bg:#f3f5f7; --card:#fff; --ink:#1f2933; --sub:#5f6b7a; --line:#d3d9e1; --soft:#eceff3;
  --accent:#0f766e; --accent-ink:#fff; --accent-soft:#d6efec;
  --s1:#2563eb; --s1-soft:#dfe9fd; --s2:#b45309; --s2-soft:#fdecd3; --s3:#7c3aed; --s3-soft:#ede5fd; --s9:#64748b; --s9-soft:#e8edf3;
  --ok:#15803d; --ok-soft:#e3f5e8; --warn:#c2410c; --warn-soft:#fdeadb; --danger:#dc2626;
  --me:#d6efec; --you:#ffffff;
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14181d; --card:#1d232a; --ink:#e6eaef; --sub:#9aa5b1; --line:#36404b; --soft:#262d35;
    --accent:#2dd4bf; --accent-ink:#06201d; --accent-soft:#123b38;
    --s1:#60a5fa; --s1-soft:#172a4a; --s2:#fbbf24; --s2-soft:#3d2f12; --s3:#a78bfa; --s3-soft:#2c2245; --s9:#94a3b8; --s9-soft:#262d35;
    --ok:#4ade80; --ok-soft:#163222; --warn:#fb923c; --warn-soft:#3b2414; --danger:#f87171;
    --me:#123b38; --you:#262d35;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#14181d; --card:#1d232a; --ink:#e6eaef; --sub:#9aa5b1; --line:#36404b; --soft:#262d35;
  --accent:#2dd4bf; --accent-ink:#06201d; --accent-soft:#123b38; --me:#123b38; --you:#262d35; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.hidden-input{display:none}
.loading,.empty{color:var(--sub);text-align:center;padding:24px 16px}
.muted{color:var(--sub)} .small{font-size:.82rem} .mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.02em}
.pre{white-space:pre-wrap;word-break:break-word;margin:0}
.grow{flex:1;min-width:0}

/* 並び：スマホは1列、iPad以上は左に一覧・右に中身 */
#app{max-width:1200px;margin:0 auto}
#side,#main{padding:0 16px calc(96px + var(--safe-b));min-height:100vh}
body[data-route="home"] #main{display:none}
body[data-route="other"] #side,body[data-route="welcome"] #side{display:none}
@media (min-width:900px){
  #app{display:grid;grid-template-columns:360px 1fr;gap:0}
  body[data-route] #side{display:block;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto}
  body[data-route] #main{display:block}
  body[data-route="welcome"] #app{display:block}
  body[data-route="welcome"] #side{display:none}
  body[data-route="welcome"] #main{max-width:560px;margin:0 auto}
  #main .top .back{display:none}
}
.placeholder{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--sub)}

/* 上の帯 */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) 0 10px;background:var(--bg)}
.top h1{flex:1;font-size:1.1rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back{border:0;background:none;font-size:1.9rem;line-height:1;padding:0 8px 4px 0;color:var(--accent)}
.iconbtn{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:6px 12px;font-size:.85rem;font-weight:600;color:var(--accent)}
.banner{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:8px 12px;font-size:.85rem;margin-bottom:8px}
.crumb{color:var(--sub);font-size:.85rem;margin:-4px 0 8px}

/* 棚 */
.stage{margin:12px 0 18px}
.stage h2{font-size:.85rem;color:var(--sub);margin:0 0 6px;font-weight:700}
.stage.st-s1 h2{color:var(--s1)} .stage.st-s2 h2{color:var(--s2)} .stage.st-s3 h2{color:var(--s3)}
.row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin:6px 0}
.row .ttl{font-weight:600;display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .sub{font-size:.78rem;color:var(--sub)}
.row .cnt{font-size:.78rem;color:var(--sub);white-space:nowrap}
.row .chev{color:var(--sub);font-size:1.2rem}
.row.unread{border-color:var(--accent)}
.sdot{width:10px;height:10px;border-radius:50%;background:var(--s9);flex:none}
.st-s1 .sdot{background:var(--s1)} .st-s2 .sdot{background:var(--s2)} .st-s3 .sdot{background:var(--s3)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--danger);flex:none;display:inline-block}
.new{background:var(--danger);color:#fff;border-radius:99px;font-size:.68rem;padding:1px 7px;font-weight:700}
.fabwrap{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + var(--safe-b));background:linear-gradient(transparent,var(--bg) 35%);z-index:4;pointer-events:none}
.fab{pointer-events:auto;display:block;max-width:560px;margin:0 auto;background:var(--accent);color:var(--accent-ink);text-align:center;border-radius:14px;padding:13px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.15)}
@media (min-width:900px){ #side .fabwrap{position:sticky;background:none;padding:12px 0} #main .fabwrap{position:static;background:none;padding:12px 0} }

/* ボタン・入力 */
.primary,.secondary,.danger,.btn-s{border-radius:12px;padding:10px 16px;font-weight:700;border:1px solid transparent}
.primary{background:var(--accent);color:var(--accent-ink)}
.primary:disabled{opacity:.45}
.secondary{background:var(--card);border-color:var(--accent);color:var(--accent)}
.danger{background:var(--card);border-color:var(--danger);color:var(--danger)}
.btn-s{padding:6px 10px;font-size:.8rem;background:var(--card);border-color:var(--line);font-weight:600}
.btn-s.danger{border-color:var(--danger);color:var(--danger)}
.link{border:0;background:none;color:var(--accent);font-weight:600;padding:6px}
.link.light{color:#fff}
.wide{width:100%;padding:13px}
.field{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card);margin-top:4px}
textarea.field{resize:vertical}
.form{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.form label,.card label{display:block;font-size:.85rem;color:var(--sub);font-weight:600}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline .field{flex:1;min-width:140px;margin-top:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.card h2{font-size:1rem;margin:0}
.card .row{background:var(--bg)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:.9rem}
.kv dt{color:var(--sub)} .kv dd{margin:0;word-break:break-all}
.pill{display:inline-block;font-size:.72rem;padding:2px 9px;border-radius:99px;font-weight:700;white-space:nowrap;background:var(--soft);color:var(--sub);margin-left:6px}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.st-s1{background:var(--s1-soft);color:var(--s1);margin-left:0} .pill.st-s2{background:var(--s2-soft);color:var(--s2);margin-left:0} .pill.st-s3{background:var(--s3-soft);color:var(--s3);margin-left:0} .pill.st-s9{margin-left:0}
.photo-area{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.recovery{font-size:1.15rem;line-height:1.9;background:var(--soft);border-radius:10px;padding:12px;word-spacing:.3em;margin:0;user-select:all}
.invite-out{display:flex;flex-direction:column;gap:8px;background:var(--accent-soft);border-radius:12px;padding:12px}

/* 症例の部屋 */
.thead{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.tmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.topic-sel{border:1px solid var(--line);border-radius:99px;padding:3px 10px;background:var(--card);font-size:.82rem;max-width:60vw}
.tactions{display:flex;gap:6px;flex-wrap:wrap}
.summary{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0 12px}
.summary summary{font-weight:700;cursor:pointer}
.summary p{margin:8px 0}
.summary.editing{display:flex;flex-direction:column;gap:8px}
.summary-input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg)}
.btns{display:flex;justify-content:flex-end;gap:8px}
.msgs{display:flex;flex-direction:column;gap:8px;padding-bottom:12px}
.msg{max-width:86%;border:1px solid var(--line);border-radius:14px;padding:8px 12px;background:var(--you);position:relative}
.msg.me{align-self:flex-end;background:var(--me);border-color:transparent}
.msg .who{font-size:.72rem;color:var(--sub);margin-bottom:2px}
.msg.deleted{opacity:.7}
.msg .del{border:0;background:none;color:var(--sub);font-size:.72rem;padding:2px 0 0;display:block;margin-left:auto}
.phs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.phbox{border:0;padding:0;background:var(--soft);border-radius:10px;overflow:hidden;width:132px;height:100px}
.ph{width:100%;height:100%;object-fit:cover;display:block}
.phgone{font-size:.75rem;color:var(--sub)}
.composer{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:8px 12px calc(8px + var(--safe-b));z-index:6}
@media (min-width:900px){ .composer{left:calc(50% - 600px + 360px);left:max(360px,calc(50% - 240px));right:max(0px,calc(50% - 600px))} }
.composer-row{display:flex;gap:8px;align-items:flex-end;max-width:820px;margin:0 auto}
.composer-input{flex:1;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--card);resize:none;max-height:180px;min-height:42px}
.send{padding:9px 14px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 auto 6px;max-width:820px}
.chip{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--soft)}
.chip img{width:100%;height:100%;object-fit:cover}
.chip .x{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:.8rem;line-height:22px;padding:0}

/* 重ねる画面（写真の加工・拡大） */
#overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--bg);width:100%;max-width:960px;max-height:100vh;overflow-y:auto;border-radius:18px 18px 0 0;padding:12px 16px calc(16px + var(--safe-b));display:flex;flex-direction:column;gap:10px}
.ed-bar{display:flex;align-items:center;justify-content:space-between}
.segs{display:flex;background:var(--soft);border-radius:10px;padding:3px}
.seg{border:0;background:none;padding:6px 14px;border-radius:8px;font-weight:600;color:var(--sub)}
.seg.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ed-hint{font-size:.82rem;color:var(--sub);margin:0}
.ed-wrap{display:flex;justify-content:center}
.ed-canvas{touch-action:none;border-radius:8px;max-width:100%;background:#000}
.ed-check{display:flex;align-items:center;gap:8px;font-weight:600}
.ed-check input{width:22px;height:22px}
.viewer{position:fixed;inset:0;background:#000;display:flex;flex-direction:column}
.viewer-bar{display:flex;justify-content:flex-end;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px}
.viewer-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;touch-action:pinch-zoom}
.viewer-img{max-width:100%;max-height:100%}
.viewer-msg{color:#ccc}

/* はじめに */
.welcome{display:flex;flex-direction:column;gap:14px;padding:calc(24px + env(safe-area-inset-top,0px)) 0 40px}
.welcome h1{font-size:1.4rem;margin:0}
.welcome p{margin:0}
.steps{display:flex;flex-direction:column;gap:14px;padding-left:1.3em;margin:0}
.steps li{padding-left:2px}
.steps li > *{display:block;margin-top:6px}
.steps li > b{margin-top:0}
.steps li > button{display:inline-block}
.more{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.more summary{font-weight:700;color:var(--accent);cursor:pointer}
.more[open]{display:flex;flex-direction:column;gap:10px}
.list{display:flex;flex-direction:column}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + var(--safe-b));background:rgba(20,24,29,.92);color:#fff;padding:10px 16px;border-radius:12px;font-size:.88rem;z-index:60;max-width:calc(100% - 32px);text-align:center}