/* kot-coder Web 版：Claude 風（やわらかいベージュ、返事は吹き出しなし、丸い入力欄）。ライトとダーク、幅 360px から */
:root {
  --bg: #f5f4ed; --card: #ffffff; --ink: #141413; --sub: #5f5e58; --line: #dcd9cc; --field: #faf9f5;
  --acc: #c6613f; --acc-ink: #ffffff; --acc-soft: #f1dfd6; --mine: #e9e6dc;
  --bad: #b3372f; --mid: #c28a1c; --ok: #3d7a4f;
  --serif: ui-serif, "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --sans: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1b1a; --card: #262624; --ink: #f1efe8; --sub: #bab7ad; --line: #3b3a37; --field: #222220;
    --acc: #d97757; --acc-ink: #1f1e1d; --acc-soft: #3f2d25; --mine: #2d2d2b;
    --bad: #ef7d73; --mid: #e3b24f; --ok: #7ccb93;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: 16px/1.7 var(--sans); -webkit-text-size-adjust: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
.hidden { display: none !important; }
a { color: var(--acc); }

/* 上の帯 */
header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
header h1 { flex: 1; margin: 0; font: 500 19px/1.3 var(--serif); letter-spacing: .01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hbtn { border: 0; background: none; color: var(--sub); font-weight: 500; padding: 6px 4px; border-radius: 8px; }
.hbtn:hover { color: var(--ink); }
.hmeta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sub); }
.plan { font-weight: 700; letter-spacing: .06em; font-size: 11px; padding: 2px 9px; border-radius: 99px; background: var(--mine); color: var(--ink); }
.plan.pro { background: var(--acc-soft); color: var(--acc); }
.plan.max { background: #3c3366; color: #e4defc; }
.plan.vip { background: linear-gradient(135deg, #e9c46a, #c9892b); color: #2b2008; }
.upill { font-variant-numeric: tabular-nums; }
.banner { margin: 8px 16px 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--bad) 12%, var(--card)); color: var(--bad); font-size: 14px; }
main { max-width: 760px; margin: 0 auto; padding: 8px 16px 16px; }

/* ログイン・登録・GitHub */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px 20px; }
.card h2 { margin: 0 0 6px; font: 500 24px/1.3 var(--serif); }
.lead { margin: 0 0 16px; color: var(--sub); font-size: 14px; }
.tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--field); border: 1px solid var(--line); border-radius: 12px; }
.tabs button { flex: 1; border: 0; background: none; padding: 8px 4px; border-radius: 9px; color: var(--sub); font-size: 14px; }
.tabs button.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; margin-bottom: 4px; color: var(--sub); font-size: 13px; }
.field input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.field input:focus { outline: 2px solid color-mix(in srgb, var(--acc) 35%, transparent); border-color: var(--acc); }
.field input.bad { border-color: var(--bad); }
.field small { display: block; margin-top: 4px; color: var(--sub); font-size: 12px; }
.field small.bad { color: var(--bad); }
.pw { position: relative; }
.pw input { padding-right: 64px; }
.pw button { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); border: 0; background: none; color: var(--acc); font-size: 13px; padding: 6px 8px; }
.meter { display: flex; align-items: center; gap: 8px; margin: -8px 0 14px; font-size: 12px; color: var(--sub); }
.meter .bar { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.meter .bar i { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.pwhint { display: block; min-height: 1.2em; margin: -8px 0 10px; font-size: 13px; color: var(--sub); }
.pwhint.bad { color: var(--bad); }
.primary { width: 100%; padding: 13px; border: 0; border-radius: 12px; background: var(--acc); color: var(--acc-ink); font-weight: 600; }
.ghost { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--ink); font-weight: 500; }
.formerr { margin: 10px 0 0; color: var(--bad); font-size: 14px; min-height: 1.2em; }
.code { margin: 14px 0; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; background: var(--field); font: 600 20px/1.5 ui-monospace, Consolas, monospace; letter-spacing: 2px; text-align: center; overflow-wrap: anywhere; }
.check { display: flex; gap: 8px; align-items: center; margin: 12px 0; font-size: 14px; }
.linkbtn { display: block; text-align: center; text-decoration: none; color: var(--acc-ink) !important; padding: 13px; border-radius: 12px; background: var(--acc); font-weight: 600; margin-top: 10px; }
details summary { cursor: pointer; margin-top: 14px; }
.card select { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.card .ghost { margin-top: 10px; }

/* 一覧 */
.greet { padding: 36px 4px 18px; }
.greet h2 { margin: 0; font: 400 30px/1.35 var(--serif); }
.greet h2 b { color: var(--acc); font-weight: 400; }
.greet p { margin: 6px 0 0; color: var(--sub); font-size: 14px; }
.top { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.top .btns { display: flex; gap: 8px; }
.top .primary, .top .ghost { width: auto; padding: 10px 16px; }
.list { display: flex; flex-direction: column; gap: 4px; }
.item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 4px; }
.item:hover { background: color-mix(in srgb, var(--mine) 50%, transparent); }
.item .t { display: flex; align-items: center; gap: 8px; }
.item b { flex: 1; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.item small { display: block; color: var(--sub); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tag { flex: none; font-size: 11px; padding: 1px 8px; border-radius: 99px; background: var(--mine); color: var(--sub); }
.tag.agent { background: var(--acc-soft); color: var(--acc); }
.tag.run { background: var(--acc); color: var(--acc-ink); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.empty { padding: 36px 0; color: var(--sub); text-align: center; }

/* 会話：返事は吹き出しなし、自分の文だけ薄い塊 */
.chat { display: flex; flex-direction: column; gap: 18px; padding: 8px 0 170px; }
.msg { overflow-wrap: anywhere; white-space: pre-wrap; }
.msg.user { align-self: flex-end; max-width: 86%; padding: 10px 16px; border-radius: 20px; background: var(--mine); }
.msg.say { align-self: stretch; padding: 0 2px; font-size: 16.5px; line-height: 1.8; }
.msg.thinking { color: var(--sub); }
.msg.thinking::before { content: "✻ "; color: var(--acc); }
.msg .from { display: block; font-size: 11px; color: var(--sub); }
.msg.md { white-space: normal; }   /* AI の返事（md.js で段落・表にしたもの） */
.msg.md > :first-child { margin-top: 0; } .msg.md > .acts { margin-top: 4px; }
.msg.md p { margin: 0 0 .8em; }
.msg.md h1, .msg.md h2, .msg.md h3, .msg.md h4, .msg.md h5, .msg.md h6 { margin: 1.1em 0 .4em; font-size: 1em; font-weight: 700; line-height: 1.5; }
.msg.md h1 { font-size: 1.25em; } .msg.md h2 { font-size: 1.15em; } .msg.md h3 { font-size: 1.05em; }
.msg.md ul, .msg.md ol { margin: 0 0 .8em; padding-left: 1.4em; }
.msg.md li > ul, .msg.md li > ol { margin: .2em 0 0; }
.msg.md hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
.msg.md blockquote { margin: 0 0 .8em; padding: 2px 0 2px 12px; border-left: 3px solid var(--line); color: var(--sub); }
.msg.md code { padding: 1px 5px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); font: .88em ui-monospace, Consolas, monospace; }
.msg.md pre code { padding: 0; border: 0; background: none; }
.msg.md .md-table { overflow-x: auto; margin: 0 0 .9em; }
.msg.md table { border-collapse: collapse; font-size: .9em; line-height: 1.55; }
.msg.md th, .msg.md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.msg.md th { background: var(--card); font-weight: 700; white-space: nowrap; }   /* 英単語を途中で切らない。入りきらない表は箱の中で横にずらす */
.msg.md td { min-width: 4em; }
.msg.md .al-center { text-align: center; } .msg.md .al-right { text-align: right; }
.msg pre { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); overflow-x: auto; white-space: pre; font: 13px/1.6 ui-monospace, Consolas, monospace; }
.ev { align-self: flex-start; display: inline-block; max-width: 100%; padding: 3px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); color: var(--sub); font: 12.5px/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.ev.error { color: var(--bad); }
.runcard { align-self: stretch; padding: 14px !important; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.runcard .row2 { display: flex; gap: 8px; margin-top: 6px; }
.runcard .row2 button { flex: 1; width: auto; }

/* 入力欄：丸い大きな枠の中に、文字・チップ・送る */
.composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.composer .box { max-width: 760px; margin: 0 auto; padding: 10px 12px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 2px 14px rgba(0, 0, 0, .08); }
.composer .box:focus-within { border-color: color-mix(in srgb, var(--acc) 55%, var(--line)); }
.composer .cnote { margin: 0 4px 4px; color: var(--sub); font-size: 12px; }
.composer textarea { display: block; width: 100%; resize: none; max-height: 140px; padding: 6px 6px; border: 0; background: none; outline: none; }
.composer .bar2 { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.composer .chips { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.chip { padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--sub); font-size: 12px; max-width: 100%; }
.chip[aria-pressed="true"] { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 50%, var(--line)); }
select.chip { appearance: none; }
#send { flex: none; min-width: 40px; height: 36px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--acc); color: var(--acc-ink); font-weight: 600; }

/* 広い画面（iPad・PC）：左に会話の一覧、右に会話（Claude と同じ形） */
@media (min-width: 900px) {
  body.wide #shell { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 100vh; }
  .side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 12px; padding: calc(16px + env(safe-area-inset-top)) 12px 12px; background: color-mix(in srgb, var(--mine) 55%, var(--bg)); border-right: 1px solid var(--line); overflow: hidden; }
  .side-brand { font: 500 21px/1.3 var(--serif); padding: 4px 8px 8px; }
  .side-top { display: flex; flex-direction: column; gap: 8px; }
  .side-top .primary, .side-top .ghost { width: 100%; padding: 10px; text-align: left; }
  .side-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 4px -4px; padding: 0 4px; }
  .side-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font-size: 14.5px; }
  .side-item span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .side-item:hover { background: color-mix(in srgb, var(--mine) 80%, transparent); }
  .side-item.on { background: var(--mine); font-weight: 600; }
  .side-item .gh { font-style: normal; font-size: 10px; color: var(--ok); }
  .side-item .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--acc); animation: pulse 1.4s ease-in-out infinite; }
  .side-foot { padding-top: 6px; border-top: 1px solid var(--line); }
  .col { min-width: 0; }
  header { padding-left: 28px; padding-right: 28px; }
  main { padding: 8px 28px 16px; }
  body.wide .composer { left: 290px; }
  .greet { padding-top: 12vh; }
  .greet h2 { font-size: 36px; }
}
@media (max-width: 899px) { .side { display: none; } }

/* ── Claude Code 風：左のナビ、編集のまとめカード、道具の 1 行、/ のコマンド、使用量の帯 ── */
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font-size: 15px; }
.nav-btn:hover { background: color-mix(in srgb, var(--mine) 90%, transparent); }
.nav-btn i { width: 20px; text-align: center; font-style: normal; color: var(--sub); }
.side-search { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--field); border: 1px solid var(--line); }
.side-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 14px; }
.side-label { margin: 14px 10px 4px; color: var(--sub); font-size: 12px; letter-spacing: .02em; }
.side-item .pin { opacity: 0; border: 0; background: none; padding: 0 2px; color: var(--sub); font-size: 13px; }
.side-item:hover .pin, .side-item .pin.on { opacity: 1; }
.side-user { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 6px 4px; border-top: 1px solid var(--line); }
.avatar { width: 30px; height: 30px; border-radius: 99px; background: var(--mine); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.side-user .who { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side-user .who small { color: var(--sub); margin-left: 6px; }
.side-user .gear { border: 0; background: none; color: var(--sub); font-size: 18px; padding: 4px 6px; border-radius: 8px; }
.side-menu { position: absolute; left: 6px; right: 6px; bottom: 54px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.side-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; }
.side-menu button:hover { background: var(--mine); }

/* 道具の 1 行（押すと中身が開く） */
.toolrow { align-self: stretch; color: var(--sub); font-size: 14px; }
.toolrow summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 2px 0; }
.toolrow summary::-webkit-details-marker { display: none; }
.toolrow .bullet { width: 6px; height: 6px; border-radius: 99px; background: var(--acc); flex: none; }
.toolrow.err .bullet { background: var(--bad); }
.toolrow .tl { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.toolrow .ms { color: var(--sub); opacity: .7; white-space: nowrap; }
.toolrow summary::after { content: "▸"; margin-left: auto; opacity: .6; }
.toolrow[open] summary::after { content: "▾"; }
.toolrow .tout { margin: 6px 0 4px 16px; padding: 10px 12px; max-height: 260px; overflow: auto; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font: 12.5px/1.55 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }

/* 編集のまとめカード */
.editcard { align-self: stretch; border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.editcard .eh { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.editcard .er { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 14.5px; }
.editcard .er + .er { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.editcard .er .fn { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.editcard .er .ico { color: var(--sub); font-size: 12px; }
.editcard .add { color: var(--ok); font-variant-numeric: tabular-nums; }
.editcard .del { color: var(--bad); font-variant-numeric: tabular-nums; }
.editcard summary { padding: 10px 16px; cursor: pointer; color: var(--sub); font-size: 14px; list-style: none; display: flex; }
.editcard summary::-webkit-details-marker { display: none; }
.editcard summary .tot { margin-left: auto; display: flex; gap: 8px; }

/* 返事の下の操作（コピー） */
.acts { display: flex; gap: 4px; margin-top: 6px; }
.acts button { border: 0; background: none; color: var(--sub); padding: 4px 8px; border-radius: 8px; font-size: 13px; }
.acts button:hover { background: var(--mine); color: var(--ink); }

/* 入力欄の上：使用量の帯・/ のコマンド */
.notice { max-width: 760px; margin: 0 auto 8px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--sub); font-size: 14px; }
.notice b { color: var(--ink); font-weight: 500; }
.notice .x { margin-left: auto; border: 0; background: none; color: var(--sub); font-size: 18px; line-height: 1; }
.slash { max-width: 760px; margin: 0 auto 8px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-height: 240px; overflow: auto; }
.slash button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; font-size: 14px; }
.slash button:hover, .slash button.on { background: var(--mine); }
.slash small { display: block; color: var(--sub); font-size: 12px; }
#send.stop { padding: 0; width: 36px; font-size: 13px; }
.cfoot { max-width: 760px; margin: 6px auto 0; text-align: right; color: var(--sub); font-size: 12px; padding-right: 8px; }

/* 上の帯（広い画面）：題名の右に、プランと使用量 */
@media (min-width: 900px) {
  header { border-bottom: 1px solid var(--line); }
  .side { padding: calc(14px + env(safe-area-inset-top)) 10px 10px; gap: 6px; }
  .msg.user { max-width: 78%; }
}

/* ── 見やすさ・操作しやすさ（2026-11-04）──
   日本語の題名は明朝だと細くて読みにくいので、ゴシックにする（ロゴとあいさつだけ明朝）
   文字を少し大きく、押せる所は 40px 以上、薄い文字は濃く */
header h1 { font: 600 16.5px/1.35 var(--sans); }
.card h2 { font-family: var(--sans); font-weight: 700; font-size: 22px; }
.msg.say { font-size: 17px; line-height: 1.85; }
.msg.user { font-size: 16px; padding: 11px 17px; }
.msg pre, .toolrow .tout { font-size: 13.5px; }
.hmeta { font-size: 13px; }
.plan { font-size: 11.5px; padding: 3px 10px; }
.hbtn { padding: 8px 8px; min-height: 40px; }

/* ログイン前：まん中に読みやすい幅のカード */
body.out main { max-width: 460px; padding-top: 6vh; }
body.out .tabs button { white-space: nowrap; font-size: 14.5px; padding: 10px 4px; }

/* 最初の画面・一覧：下の入力欄に隠れないように */
body.home main { padding-bottom: 190px; }
.welcome { padding-top: 10vh; }
.welcome .greet { text-align: center; padding: 0 4px 22px; }
.tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tipbtn { padding: 10px 16px; min-height: 42px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); font-size: 14.5px; }
.tipbtn:hover { border-color: color-mix(in srgb, var(--acc) 50%, var(--line)); }

/* 入力欄：大きめ・押しやすく */
.composer .box { padding: 12px 14px 10px; border-radius: 26px; }
.composer textarea { font-size: 16.5px; line-height: 1.6; min-height: 30px; }
.composer .cnote { font-size: 13px; }
.chip { min-height: 34px; padding: 5px 13px; font-size: 13.5px; color: var(--ink); }
select.chip { padding-right: 28px; background: no-repeat right 11px center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E"); }
select.chip option { color: #141413; }
#send { min-width: 42px; height: 42px; font-size: 18px; }
#send:disabled { opacity: .35; }
.cfoot { font-size: 12.5px; }

/* 会話の中の部品 */
.toolrow { font-size: 14.5px; }
.toolrow summary { padding: 6px 0; min-height: 34px; }
.editcard .eh, .editcard .er { font-size: 15px; }
.acts button { min-height: 34px; font-size: 13.5px; }

/* 一覧（スマホ・iPad 縦） */
.item { padding: 16px 6px; }
.item b { font-size: 16px; }
.item small { font-size: 13px; }
.top .primary, .top .ghost { min-height: 44px; }

/* 左のナビ（広い画面） */
@media (min-width: 900px) {
  .side-item { font-size: 15px; padding: 10px 10px; min-height: 40px; }
  .nav-btn { font-size: 15.5px; min-height: 42px; }
  .side-label { font-size: 12.5px; }
  .side-search { padding: 8px 10px; }
  .side-search input { font-size: 14.5px; }
  .side-user .who { font-size: 14.5px; }
  .side-user .gear { min-width: 38px; min-height: 38px; }
  main { max-width: 800px; }
  .composer .box, .notice, .slash, .cfoot { max-width: 800px; }
}
/* 指で触る画面では、ピン留めの ☆ を最初から見せる（ホバーできないため） */
@media (hover: none) { .side-item .pin { opacity: .55; padding: 6px; } }

/* ── 動き（2026-11-04）：考え中のマークが回る・文字が光る、道具の実行中は点が脈打つ、画面の切りかえは横からすっと ── */
.msg.thinking::before { content: "✻"; display: inline-block; margin-right: 8px; color: var(--acc); animation: kc-spin 2.4s linear infinite, kc-breathe 1.2s ease-in-out infinite alternate; }
.msg.thinking { background: linear-gradient(90deg, var(--sub) 0%, var(--sub) 40%, var(--ink) 50%, var(--sub) 60%, var(--sub) 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: kc-shine 2.2s linear infinite; }
.msg.thinking::before { -webkit-text-fill-color: var(--acc); }
.toolrow.run .bullet { animation: kc-ping 1s ease-in-out infinite; }
.toolrow.run .tl { color: var(--ink); }
.side-item.on, .item, .nav-btn, .tipbtn, .chip, #send { transition: background .15s, transform .12s, border-color .15s; }
.item:active, .nav-btn:active, .tipbtn:active, .chip:active, #send:active, .side-item:active { transform: scale(.97); }
@keyframes kc-spin { to { transform: rotate(360deg); } }
@keyframes kc-breathe { from { opacity: .55; } to { opacity: 1; } }
@keyframes kc-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes kc-ping { 50% { transform: scale(1.8); opacity: .5; } }
.col { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .msg.thinking::before, .msg.thinking, .toolrow.run .bullet { animation: none; }
}
/* 入力欄の部品は 1 段に（スマホで 2 段に折れて背が高くならないように） */
.composer .chips { flex-wrap: nowrap; overflow: hidden; }
select.chip { flex: 0 1 auto; min-width: 0; max-width: 58%; text-overflow: ellipsis; }
#srch { flex: none; white-space: nowrap; }

/* ── 画像（添付・作る）── */
.chip.plus { width: 34px; padding: 0; font-size: 18px; line-height: 1; flex: none; }
.chip.on { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 55%, var(--line)); background: var(--acc-soft); flex: none; white-space: nowrap; }
.chip.dim { opacity: .45; }
.atts { display: flex; gap: 8px; padding: 2px 4px 8px; overflow-x: auto; }
.att { position: relative; flex: none; }
.att img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.att button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; line-height: 1; padding: 0; }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; justify-content: flex-end; }
.thumbs img { width: 120px; max-height: 160px; object-fit: cover; border-radius: 12px; cursor: zoom-in; }
.genimg { align-self: flex-start; margin: 0; max-width: min(100%, 520px); }
.genimg img { display: block; width: 100%; border-radius: 16px; border: 1px solid var(--line); cursor: zoom-in; }
.genimg figcaption { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: var(--sub); font-size: 13.5px; }
.genimg figcaption span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.genimg figcaption a { flex: none; text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.genimg figcaption a:hover { background: var(--mine); }
.viewer { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .85); cursor: zoom-out; animation: kc-fade .15s ease-out; }
.viewer img { max-width: 100%; max-height: 100%; border-radius: 12px; }
@keyframes kc-fade { from { opacity: 0; } }

/* ── 管理画面 ── */
.admin { padding-top: 8px; padding-bottom: 40px; }
.adm-head { display: flex; align-items: center; gap: 12px; }
.adm-head .lead { flex: 1; margin: 0; }
.adm-head .ghost { width: auto; flex: none; padding: 9px 14px; }
.adm-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.adm-total { color: var(--sub); font-size: 13.5px; }
.adm-search { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); margin-bottom: 8px; }
.adm-list { display: flex; flex-direction: column; }
.adm-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.adm-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.adm-who b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-who small { color: var(--sub); font-size: 12.5px; }
.adm-state.ok { color: var(--ok); }
.adm-state.bad { color: var(--bad); }
.adm-plan { flex: none; min-height: 40px; padding: 6px 30px 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card) no-repeat right 10px center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E"); appearance: none; font-weight: 600; }
.adm-plan option { color: #141413; }

/* ── 設定のメニュー（スマホ・iPad 縦。上の帯の ⚙）── */
.gearbtn { font-size: 20px; min-width: 40px; }
.settings { position: fixed; z-index: 15; top: calc(54px + env(safe-area-inset-top)); right: 12px; width: min(320px, calc(100vw - 24px)); padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); animation: kc-fade .12s ease-out; }
.set-who { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.set-who b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.set-use { display: flex; flex-direction: column; gap: 2px; margin: 0 4px 6px; padding: 10px 12px; border-radius: 12px; background: var(--field); font-size: 14px; }
.set-use small { color: var(--sub); font-size: 12px; }
.settings > button { display: block; width: 100%; text-align: left; padding: 11px 12px; min-height: 48px; border: 0; background: none; border-radius: 10px; font-size: 15px; }
.settings > button:hover, .settings > button:active { background: var(--mine); }
.settings > button small { display: block; color: var(--sub); font-size: 12px; }
.settings > button.danger { color: var(--bad); }

/* iPad の Safari：100vh はアドレスバーの分だけ長く、左の列の下（名前と ⚙）が画面の外に出ていた → 見えている高さ（dvh）にする */
@media (min-width: 900px) {
  body.wide #shell { min-height: 100dvh; }
  .side { height: 100vh; height: 100dvh; }
  .side-list { min-height: 0; }
  .side-user { flex: none; }
}
/* 会話の名前が早く「…」になっていた：☆ や GitHub の印まで名前と同じ幅を取っていたため */
.side-item .pin, .side-item .gh, .side-item .dot { flex: none; }

/* ════ テーマ：水色・青、ChatGPT 風（2026-11-04）════
   白い画面・水色の左メニュー・青いボタン。文字はゴシックだけ。最初の画面は、まん中に入力欄 */
:root {
  --bg: #ffffff; --card: #ffffff; --ink: #0f172a; --sub: #5b6b82; --line: #dbe6f3; --field: #f5f9ff;
  --acc: #0284c7; --acc-ink: #ffffff; --acc-soft: #e0f2fe; --mine: #eaf4ff;
  --side: #f0f7ff; --bad: #dc2626; --ok: #15803d; --mid: #b45309;
  --serif: var(--sans);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220; --card: #111b2e; --ink: #e6eef8; --sub: #93a4bd; --line: #1f2c44; --field: #0f1829;
    --acc: #38bdf8; --acc-ink: #03131f; --acc-soft: #0c2a40; --mine: #162540;
    --side: #0a1020; --bad: #f87171; --ok: #4ade80; --mid: #fbbf24;
  }
}
html, body { font-family: var(--sans); }
header h1, .card h2, .greet h2, .side-brand { font-family: var(--sans); }

/* 左メニュー：水色 */
@media (min-width: 900px) {
  .side { background: var(--side); border-right: 1px solid var(--line); }
  .side-brand { font-weight: 700; font-size: 19px; color: var(--acc); letter-spacing: .01em; }
  .side-item.on { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--ink); }
  .side-item:hover, .nav-btn:hover { background: color-mix(in srgb, var(--acc) 9%, transparent); }
  header { border-bottom: 0; }
}
.nav-btn i { color: var(--acc); }

/* 上の帯：すっきり */
header { background: color-mix(in srgb, var(--bg) 94%, transparent); }
header h1 { font-weight: 600; font-size: 16px; }

/* あいさつ：ChatGPT のように、まん中に短く */
.greet h2 { font-weight: 600; font-size: 28px; letter-spacing: 0; }
.greet h2 b { color: var(--acc); font-weight: 600; }

/* 会話：自分の発言は水色の吹き出し、返事は吹き出しなし */
.msg.user { background: var(--mine); border-radius: 22px; }
.msg.say { font-size: 16.5px; }
.msg.say a, a { color: var(--acc); }
.msg pre, .toolrow .tout { background: color-mix(in srgb, var(--acc) 5%, var(--card)); }

/* 入力欄：丸く、影つき。送るボタンは青い丸 */
.composer { background: linear-gradient(to top, var(--bg) 72%, transparent); }
.composer .box { border-radius: 28px; border-color: var(--line); box-shadow: 0 4px 20px rgba(2, 132, 199, .08); }
.composer .box:focus-within { border-color: color-mix(in srgb, var(--acc) 60%, var(--line)); box-shadow: 0 4px 24px rgba(2, 132, 199, .16); }
#send { background: var(--acc); color: var(--acc-ink); border-radius: 99px; }
#send:disabled { background: color-mix(in srgb, var(--acc) 30%, var(--line)); opacity: 1; }
.chip { border-color: var(--line); }
.chip[aria-pressed="true"], .chip.on { color: var(--acc); background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); }
.primary, .linkbtn { background: var(--acc); color: var(--acc-ink); }
.tipbtn { border-radius: 16px; background: var(--card); }
.tipbtn:hover { border-color: var(--acc); background: var(--acc-soft); }
.plan { background: var(--acc-soft); color: var(--acc); }
.plan.free { background: var(--mine); color: var(--sub); }
.toolrow .bullet { background: var(--acc); }
.msg.thinking::before, .msg.thinking::before { color: var(--acc); -webkit-text-fill-color: var(--acc); }

/* 最初の画面（広い画面）：入力欄を、あいさつのすぐ下（まん中）に */
@media (min-width: 900px) {
  body.home.wide .composer { bottom: auto; top: 46vh; background: none; }
  body.home.wide .welcome { padding-top: 22vh; }
  body.home.wide .welcome .tips { margin-top: 150px; }
}

/* 思考プロセス（折りたたみ）*/
.think { align-self: stretch; color: var(--sub); font-size: 14px; }
.think summary { cursor: pointer; padding: 4px 0; list-style: none; }
.think summary::-webkit-details-marker { display: none; }
.think summary::after { content: " ▸"; opacity: .6; }
.think[open] summary::after { content: " ▾"; }
.think pre { margin: 4px 0 8px; padding: 10px 12px; max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.6 var(--sans); border-left: 3px solid var(--line); background: none; }
.think.live pre { max-height: 220px; }
.think.live summary { color: var(--acc); }
.think.live summary::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 99px; background: var(--acc); animation: kc-ping 1s ease-in-out infinite; vertical-align: middle; }
/* API キー */
.keys .key-new { margin: 14px 0; }
.keys .key-code { font-size: 15px; letter-spacing: 0; user-select: all; }
.keys .key-make { display: flex; gap: 8px; align-items: stretch; margin: 14px 0 6px; }
.keys .key-make .adm-search { flex: 1; margin: 0; }
.keys .key-make .primary { width: auto; flex: none; padding: 10px 16px; }
.keys .adm-row .ghost { width: auto; flex: none; padding: 8px 14px; }
.keys .ghost.danger { color: var(--bad); }
.keys .key-how { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.keys .key-how small { color: var(--sub); font-size: 12.5px; margin-top: 6px; }
.keys .key-how code { font: 13px/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.keys .key-line { display: flex; align-items: center; gap: 8px; }
.keys .key-line code { flex: 1; min-width: 0; }
.keys .key-line .ghost { width: auto; flex: none; padding: 6px 12px; }