/* ============================================================
   AI Adamskun  /  app.css
   Aesthetic: 薄い緑色ベースのやわらかな世界。りんごの木の相棒。
   背景は淡いリーフグリーン、ボタン・アクセントは濃いフォレストグリーン。
   ふわふわ漂う吹き出しと、木漏れ日のようにゆっくり流れる背景。
   ============================================================ */

:root{
  /* ---- 構造（共通） ---- */
  --radius:16px;
  --rail-w:288px;
  --presence-w:248px;
  --mono:"Space Mono",ui-monospace,monospace;
  --grotesk:"Space Grotesk",system-ui,sans-serif;
  --jp:"Noto Sans JP",system-ui,"Hiragino Kaku Gothic ProN",sans-serif;

  /* ===== 薄い緑ベース（システム全体・既定） ===== */
  --ink:#EAF4E4;        /* 最も淡い面（入力欄など） */
  --abyss:#EEF7E7;      /* ステージ（薄い緑） */
  --panel:#FFFFFF;      /* レール/カード */
  --panel-2:#E7F2E0;
  --line:#CBE3BF;       /* 罫線 */
  --line-soft:#DDEED4;
  --mist:#5E7A52;       /* 補助テキスト */
  --mist-dim:#98B08C;
  --text:#22331B;       /* 本文 */
  --accent:#2E7D32;     /* ボタン・アクセント（濃い緑） */
  --accent-ink:#FFFFFF; /* アクセント上の文字 */
  --pulse:#57A05A;      /* 副アクセント（ユーザー吹き出し） */
  --ember:#E0913F;      /* 自発アプローチの温かみ（幹の色） */
  --apple:#E5484D;      /* りんごの赤（小さな差し色） */
  --danger:#C0392B;
  --shadow:0 16px 42px -20px rgba(40,110,55,.28);
}

/* ===== 深い森グリーン（濃いめの好み） ===== */
:root[data-theme="forest"]{
  --ink:#E4F0DC;
  --abyss:#E7F2DF;
  --panel:#FFFFFF;
  --panel-2:#DFEDD5;
  --line:#BEDCAF;
  --line-soft:#D3E8C7;
  --mist:#4F6E44;
  --mist-dim:#8AA57C;
  --text:#1B2C15;
  --accent:#1B5E20;
  --accent-ink:#FFFFFF;
  --pulse:#4C9A57;
  --ember:#D9852F;
  --apple:#E5484D;
  --danger:#B23A2C;
  --shadow:0 16px 42px -20px rgba(25,80,35,.30);
}

:root{--brand:"Baloo 2","Zen Maru Gothic",var(--jp);--round:"Zen Maru Gothic",var(--jp)}
.brand,.login-mark{font-family:var(--brand) !important;letter-spacing:0}
.presence-name,.welcome h1,.modal-head h2{font-family:var(--round)}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--jp);color:var(--text);
  background:
    radial-gradient(1100px 760px at 80% -10%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%),
    radial-gradient(900px 640px at 6% 110%, color-mix(in srgb,var(--pulse) 18%,transparent), transparent 60%),
    var(--abyss);
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;border:2px solid transparent;background-clip:content-box}

/* ============== LOGIN ============== */
.login{position:fixed;inset:0;display:grid;place-items:center;z-index:60;
  background:radial-gradient(700px 500px at 50% 30%, color-mix(in srgb,var(--accent) 16%,transparent), transparent),var(--abyss)}
.login-card{width:min(380px,92vw);background:var(--panel);border:1px solid var(--line);
  border-radius:22px;padding:34px 30px;box-shadow:var(--shadow);text-align:center}
.login-mark{font-family:var(--grotesk);font-weight:700;font-size:22px;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}
.login-mark .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent);animation:breathe 3.4s ease-in-out infinite}
.login-sub{color:var(--mist);font-size:13px;margin:4px 0 22px}
.login input{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--text);
  padding:13px 15px;border-radius:12px;font-size:15px;margin-bottom:14px}
.login input:focus{outline:none;border-color:var(--accent)}
.login-err{color:var(--danger);font-size:13px;min-height:18px;margin-top:10px}

/* ============== APP LAYOUT ============== */
.app{display:grid;grid-template-columns:var(--rail-w) 1fr var(--presence-w);grid-template-rows:minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden;position:relative;z-index:1}

/* ============== RAIL ============== */
.rail{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 80%,var(--ink)));
  border-right:1px solid var(--line-soft);display:flex;flex-direction:column;min-width:0}
.rail-top{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 10px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--grotesk);font-weight:700;
  font-size:18px;letter-spacing:.03em}
.brand-orb{width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--accent) 55%, color-mix(in srgb,var(--accent) 40%, #000));
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);animation:breathe 3.6s ease-in-out infinite}
.rail-close{display:none;background:none;border:none;color:var(--mist);font-size:18px}

.new-chat{margin:8px 16px 14px;padding:13px 16px;border-radius:13px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--text);font-weight:700;font-size:14px;
  display:flex;align-items:center;gap:9px;transition:.18s}
.new-chat:hover{background:color-mix(in srgb,var(--accent) 20%,var(--panel));transform:translateY(-1px)}
.new-chat .plus{color:var(--accent);font-size:18px;line-height:0}

.rail-search{padding:0 16px 12px}
.rail-search input{width:100%;background:var(--ink);border:1px solid var(--line-soft);color:var(--text);
  padding:9px 12px;border-radius:10px;font-size:13px}
.rail-search input:focus{outline:none;border-color:var(--line)}

.projects{flex:1;overflow-y:auto;padding:4px 10px 10px;min-height:0}
.proj{margin-bottom:3px}
.proj-row{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:10px;cursor:pointer;
  color:var(--text);transition:.14s;position:relative}
.proj-row:hover{background:var(--panel-2)}
.proj-row.open{background:var(--panel-2)}
.proj-caret{width:14px;color:var(--mist-dim);font-size:10px;transition:transform .18s;flex:none;text-align:center}
.proj.expanded .proj-caret{transform:rotate(90deg)}
.proj-title{flex:1;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-pin{color:var(--ember);font-size:11px;flex:none}
.proj-menu{opacity:0;background:none;border:none;color:var(--mist);font-size:16px;flex:none;padding:0 2px;line-height:1}
.proj-row:hover .proj-menu{opacity:1}

.threads{padding:2px 0 6px 22px;display:none}
.proj.expanded .threads{display:block}
.thread-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;cursor:pointer;
  font-size:12.5px;color:var(--mist);border-left:2px solid var(--line-soft);margin:1px 0;transition:.14s}
.thread-item:hover{color:var(--text);background:var(--panel)}
.thread-item.active{color:var(--text);border-left-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.thread-item .t-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;opacity:.6}
.thread-new{font-size:12px;color:var(--mist-dim);padding:6px 10px;cursor:pointer;border-radius:8px}
.thread-new:hover{color:var(--accent)}

.rail-empty{color:var(--mist-dim);font-size:13px;text-align:center;padding:30px 16px;line-height:1.7}

.rail-foot{border-top:1px solid var(--line-soft);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.foot-btn{background:none;border:1px solid var(--line-soft);color:var(--mist);padding:9px 12px;border-radius:10px;
  font-size:13px;text-align:left;display:flex;gap:9px;align-items:center;transition:.14s}
.foot-btn:hover{color:var(--text);border-color:var(--line);background:var(--panel-2)}
.foot-btn.ghost{border:none;justify-content:center;font-size:12px;color:var(--mist-dim)}

/* ============== STAGE ============== */
.stage{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:
  linear-gradient(180deg, color-mix(in srgb,#fff 42%,transparent), color-mix(in srgb,var(--abyss) 40%,transparent))}
.stage-head{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(6px)}
.icon-btn{background:var(--panel);border:1px solid var(--line-soft);color:var(--text);
  border-radius:10px;padding:8px 12px;font-size:13px;transition:.14s}
.icon-btn:hover{border-color:var(--line);background:var(--panel-2)}
.menu{display:none}
.head-titles{flex:1;min-width:0}
.head-project{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-thread{font-family:var(--mono);font-size:11px;color:var(--mist);letter-spacing:.04em;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-actions{display:flex;align-items:center;gap:8px}
.thread-switch{display:flex;gap:5px;max-width:40vw;overflow-x:auto}
.thread-switch .tchip{font-size:11.5px;white-space:nowrap;padding:6px 11px;border-radius:20px;border:1px solid var(--line-soft);
  color:var(--mist);background:var(--panel)}
.thread-switch .tchip.active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:700}
.voice-toggle.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.voice-toggle:not(.on){opacity:.55}

/* ----- messages ----- */
.messages{flex:1;overflow-y:auto;padding:30px 22px 18px;display:flex;flex-direction:column;gap:22px;min-height:0}
.messages{max-width:none}
.msg{max-width:760px;width:100%;margin:0 auto;display:flex;gap:14px;animation:floatIn .55s cubic-bezier(.22,1,.36,1) both}
.msg .av{width:34px;height:34px;border-radius:11px;flex:none;overflow:hidden;background:var(--panel-2);
  border:1px solid var(--line-soft)}
.msg .av img{width:100%;height:100%;object-fit:cover}
.msg .bubble{flex:1;min-width:0}
.msg .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mist-dim);margin-bottom:6px}
.msg .body{font-size:15px;line-height:1.85;color:var(--text);white-space:pre-wrap;word-break:break-word}
.msg .body p{margin:0 0 .7em}
.msg .body ul,.msg .body ol{margin:.2em 0 .7em;padding-left:1.3em}
.msg .body li{margin:.2em 0}
.msg .body code{background:var(--ink);border:1px solid var(--line-soft);padding:1px 6px;border-radius:6px;font-size:.9em}
.msg .body strong{color:color-mix(in srgb,var(--accent) 55%, var(--text));font-weight:700}

.msg.user{flex-direction:row-reverse}
.msg.user .av{background:linear-gradient(135deg,var(--pulse),#5a78e0);border:none;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700}
.msg.user .who{text-align:right}
.msg.user .body{background:color-mix(in srgb,var(--pulse) 16%,var(--panel));border:1px solid color-mix(in srgb,var(--pulse) 30%,var(--line-soft));
  padding:13px 16px;border-radius:14px 14px 4px 14px;box-shadow:0 8px 22px -14px color-mix(in srgb,var(--pulse) 70%,transparent)}

.msg.assistant .body{background:var(--panel);border:1px solid var(--line-soft);padding:14px 17px;border-radius:4px 14px 14px 14px;
  box-shadow:0 10px 26px -16px color-mix(in srgb,var(--accent) 55%,transparent)}
.msg.assistant .av{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}

/* ふわふわ漂う吹き出し */
.msg .body{animation:bubbleBob 7s ease-in-out infinite}
.msg:nth-child(odd) .body{animation-duration:8.4s;animation-delay:-2.1s}
.msg:nth-child(3n) .body{animation-duration:9.2s;animation-delay:-3.4s}

.msg.proactive .body{background:color-mix(in srgb,var(--ember) 12%,var(--panel));
  border:1px dashed color-mix(in srgb,var(--ember) 45%,var(--line));border-radius:14px;padding:13px 16px}
.msg.proactive .who{color:var(--ember)}
.msg.proactive .who::before{content:"● ";font-size:8px;vertical-align:middle}

.msg-actions{margin-top:8px;display:flex;gap:6px}
.msg-act{background:none;border:1px solid var(--line-soft);color:var(--mist-dim);font-size:11px;
  padding:4px 9px;border-radius:7px;transition:.14s}
.msg-act:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}

/* build suggestion card */
.build-card{margin-top:12px;background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 14%,var(--panel)), var(--panel));
  border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:14px;padding:15px 17px}
.build-card .bc-tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.build-card .bc-title{font-weight:700;font-size:14.5px;margin:6px 0 3px}
.build-card .bc-desc{font-size:13px;color:var(--mist);line-height:1.7}
.build-card .bc-actions{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap}
.bc-btn{font-size:13px;font-weight:700;padding:9px 15px;border-radius:10px;text-decoration:none;border:1px solid transparent;transition:.16s}
.bc-btn.primary{background:var(--accent);color:var(--accent-ink)}
.bc-btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.bc-btn.ghost{background:transparent;border-color:var(--line);color:var(--text)}
.bc-btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---- 専門チームへの手配カード（非同期オーダー） ---- */
.order-card{--pc:var(--accent);margin-top:12px;border-radius:15px;padding:15px 17px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--pc) 12%,var(--panel)), var(--panel));
  border:1px solid color-mix(in srgb,var(--pc) 40%,var(--line));
  box-shadow:0 10px 26px -18px color-mix(in srgb,var(--pc) 70%,transparent)}
.order-card.placed{border-style:solid}
.oc-head{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.oc-badge{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--pc);padding:3px 9px;border-radius:20px}
.oc-badge.ok{background:var(--accent)}
.oc-partner{font-weight:700;font-size:13px;color:var(--pc);display:flex;flex-direction:column;text-align:right;line-height:1.25}
.oc-partner small{font-weight:500;font-size:10.5px;color:var(--mist)}
.oc-title{font-weight:700;font-size:15px;margin:9px 0 4px;color:var(--text)}
.oc-desc{font-size:12.5px;color:var(--mist);line-height:1.7}
.oc-actions{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap;align-items:center}
.oc-btn{font-size:12.5px;font-weight:700;padding:9px 15px;border-radius:10px;text-decoration:none;
  border:1px solid transparent;transition:.16s;cursor:pointer}
.oc-btn.primary{background:var(--pc);color:#fff}
.oc-btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.oc-btn.primary:disabled{opacity:.6;cursor:default;transform:none}
.oc-btn.ghost{background:transparent;border-color:color-mix(in srgb,var(--pc) 45%,var(--line));color:var(--text)}
.oc-btn.ghost:hover{border-color:var(--pc);color:var(--pc)}
.oc-btn.link{background:transparent;color:var(--pc);padding:9px 6px}
.oc-track{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:12px 0 2px}
.oc-step{font-size:11px;color:var(--mist-dim);padding:4px 10px;border-radius:20px;border:1px solid var(--line-soft)}
.oc-step.done{color:var(--pc);border-color:color-mix(in srgb,var(--pc) 40%,var(--line))}
.oc-step.now{background:var(--pc);color:#fff;border-color:var(--pc);animation:breathe 2.2s ease-in-out infinite}
.oc-arrow{color:var(--mist-dim);font-size:11px}
.oc-note{font-size:12px;color:var(--mist);margin-top:10px;line-height:1.6}
.oc-note.ok{color:var(--pc);font-weight:700}

/* welcome / empty */
.welcome{margin:auto;max-width:560px;text-align:center;padding:40px 20px}
.welcome .w-orb{width:96px;height:96px;border-radius:50%;margin:0 auto 22px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  box-shadow:0 0 50px -8px color-mix(in srgb,var(--accent) 55%,transparent);position:relative}
.welcome .w-orb img{width:100%;height:100%;object-fit:cover}
.welcome h1{font-size:24px;margin:0 0 8px;font-weight:900}
.welcome p{color:var(--mist);line-height:1.85;font-size:14.5px}
.welcome .chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:22px}
.welcome .chip{background:var(--panel);border:1px solid var(--line-soft);color:var(--text);font-size:13px;
  padding:9px 14px;border-radius:11px;transition:.16s}
.welcome .chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}

/* typing indicator */
.typing{display:inline-flex;gap:5px;align-items:center;padding:4px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.5;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}

/* ----- composer ----- */
.composer{padding:14px 22px 20px;border-top:1px solid var(--line-soft)}
.composer-inner{max-width:790px;margin:0 auto;display:flex;align-items:flex-end;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:8px 8px 8px 10px;
  transition:border-color .16s, box-shadow .16s}
.composer-inner:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
#input{flex:1;background:none;border:none;color:var(--text);font-size:15px;line-height:1.6;resize:none;
  max-height:180px;padding:8px 2px;font-family:inherit}
#input:focus{outline:none}
.mic-btn,.send-btn{flex:none;width:42px;height:42px;border-radius:12px;border:none;display:grid;place-items:center;font-size:18px;transition:.16s}
.mic-btn{background:var(--ink);color:var(--mist);border:1px solid var(--line-soft)}
.mic-btn:hover{color:var(--text)}
.mic-btn.rec{color:var(--danger);border-color:var(--danger);animation:breathe 1.4s infinite}
.send-btn{background:var(--accent);color:var(--accent-ink)}
.send-btn:disabled{opacity:.35;cursor:not-allowed}
.send-btn:not(:disabled):hover{filter:brightness(1.1)}
.composer-hint{max-width:790px;margin:7px auto 0;font-size:11px;color:var(--mist-dim);text-align:center;min-height:14px}

/* ============== PRESENCE ============== */
.presence{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 84%,var(--ink)));
  border-left:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:center;
  padding:34px 22px;text-align:center;gap:4px}
.orb-wrap{position:relative;width:150px;height:150px;display:grid;place-items:center;margin-bottom:14px}
.orb-aura{position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 40%,transparent), transparent 68%);
  filter:blur(6px);animation:breathe 4s ease-in-out infinite}
.orb-ring{position:absolute;inset:6px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent) 50%,transparent);
  border-top-color:var(--accent);border-right-color:transparent}
.orb-face{position:relative;width:118px;height:118px;border-radius:50%;overflow:hidden;
  border:2px solid color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--ink);z-index:1}
.orb-face img{width:100%;height:100%;object-fit:cover}
/* states */
.orb-wrap[data-state="thinking"] .orb-ring{animation:spin 1.1s linear infinite}
.orb-wrap[data-state="thinking"] .orb-aura{animation:breathe 1.4s ease-in-out infinite}
.orb-wrap[data-state="speaking"] .orb-aura{animation:speak 0.9s ease-in-out infinite}
.orb-wrap[data-state="speaking"]::before,
.orb-wrap[data-state="speaking"]::after{content:"";position:absolute;inset:10px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 60%,transparent);animation:ripple 1.4s ease-out infinite}
.orb-wrap[data-state="speaking"]::after{animation-delay:.7s}

.presence-name{font-weight:900;font-size:18px;margin-top:4px}
.presence-tag{font-size:12px;color:var(--mist);line-height:1.5;margin-top:2px}
.presence-status{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--mist);margin-top:14px;text-transform:uppercase}
.s-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.presence-settings{margin-top:auto;width:100%;background:var(--ink);border:1px solid var(--line-soft);
  color:var(--mist);border-radius:11px;padding:10px;font-size:13px;transition:.14s}
.presence-settings:hover{color:var(--text);border-color:var(--line)}

/* ============== MODAL ============== */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb,var(--text) 26%, transparent);backdrop-filter:blur(4px);animation:fade .2s ease}
.modal-card{width:min(720px,96vw);max-height:90vh;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line-soft)}
.modal-head h2{font-size:18px;margin:0;font-weight:900}
.modal-close{background:none;border:none;color:var(--mist);font-size:18px}
.modal-close:hover{color:var(--text)}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 24px;
  border-top:1px solid var(--line-soft);flex-wrap:wrap}
.foot-right{display:flex;gap:10px;margin-left:auto}

.btn-primary{background:var(--accent);color:var(--accent-ink);border:none;font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:11px;transition:.16s}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text);font-size:13px;
  padding:10px 16px;border-radius:11px;text-decoration:none;transition:.14s;display:inline-flex;align-items:center}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost.danger{border-color:transparent;color:var(--danger)}
.btn-ghost.danger:hover{border-color:var(--danger)}

/* settings */
.settings-body{padding:22px 24px;overflow-y:auto}
.char-switch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.char-chip{display:flex;align-items:center;gap:8px;background:var(--ink);border:1px solid var(--line-soft);
  border-radius:30px;padding:5px 13px 5px 6px;font-size:13px;color:var(--mist);cursor:pointer;transition:.14s}
.char-chip img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.char-chip:hover{color:var(--text)}
.char-chip.active{border-color:var(--accent);color:var(--text)}
.settings-grid{display:grid;grid-template-columns:140px 1fr;gap:22px}
.set-avatar{text-align:center}
.avatar-preview{width:120px;height:120px;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--ink);margin:0 auto 12px}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.upload-btn{display:inline-block;background:var(--ink);border:1px solid var(--line);color:var(--text);
  font-size:12.5px;padding:8px 14px;border-radius:10px;cursor:pointer}
.upload-btn:hover{border-color:var(--accent)}
.upload-note{font-size:11px;color:var(--mist-dim);margin-top:8px;line-height:1.5}
.set-fields{display:flex;flex-direction:column;gap:14px}
.settings-body label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--mist);font-weight:500}
.settings-body input[type=text],.settings-body textarea,.settings-body select{
  background:var(--ink);border:1px solid var(--line-soft);color:var(--text);border-radius:10px;
  padding:10px 12px;font-size:14px;font-family:inherit;width:100%}
.settings-body textarea{resize:vertical;line-height:1.6}
.settings-body input:focus,.settings-body textarea:focus,.settings-body select:focus{outline:none;border-color:var(--accent)}
.settings-row{display:flex;gap:24px;align-items:center;margin-top:20px;flex-wrap:wrap}
.inline{flex-direction:row !important;align-items:center;gap:10px !important}
.inline input[type=color]{width:42px;height:32px;border:1px solid var(--line);border-radius:8px;background:none;padding:2px;cursor:pointer}
.switch-label{cursor:pointer;position:relative}
.switch-label input{position:absolute;opacity:0}
.switch{width:42px;height:24px;border-radius:14px;background:var(--line);position:relative;transition:.18s;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s}
.switch-label input:checked + .switch{background:var(--accent)}
.switch-label input:checked + .switch::after{left:21px}

.voice-box{margin-top:22px;background:var(--ink);border:1px solid var(--line-soft);border-radius:14px;padding:16px}
.voice-title{font-size:12.5px;color:var(--mist);font-weight:700;margin-bottom:12px}
.voice-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;align-items:end}
.rng-val{font-family:var(--mono);color:var(--accent)}
.voice-box input[type=range]{width:100%;accent-color:var(--accent)}
.voice-box .btn-ghost{margin-top:14px}

/* brief */
.brief-body{padding:22px 26px;overflow-y:auto;font-size:14px;line-height:1.85}
.brief-body h1{font-size:20px;margin:.2em 0 .6em}
.brief-body h2{font-size:15px;margin:1.3em 0 .4em;color:var(--accent);border-bottom:1px solid var(--line-soft);padding-bottom:4px}
.brief-body ul,.brief-body ol{padding-left:1.4em}
.brief-body li{margin:.25em 0}
.brief-body code{background:var(--ink);padding:1px 6px;border-radius:5px}
.brief-loading{padding:50px;text-align:center;color:var(--mist)}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:var(--panel-2);
  border:1px solid var(--line);color:var(--text);padding:11px 20px;border-radius:12px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.25s;z-index:70;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============== animations ============== */
@keyframes breathe{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.07);opacity:.6}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes speak{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes ripple{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.5);opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ふわっと浮かぶ登場＋ゆらぎ */
@keyframes floatIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes bubbleBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}

/* ============== AMBIENT（時の流れ／ふわふわ） ============== */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient-flow{position:absolute;inset:-25%;
  background:
    radial-gradient(closest-side, color-mix(in srgb,var(--accent) 26%,transparent), transparent),
    radial-gradient(closest-side, color-mix(in srgb,var(--pulse) 24%,transparent), transparent),
    radial-gradient(closest-side, color-mix(in srgb,var(--accent) 18%,transparent), transparent);
  background-size:48% 48%, 42% 42%, 54% 54%;
  background-position:12% 16%, 84% 24%, 50% 88%;
  background-repeat:no-repeat;
  filter:blur(26px);
  animation:flow 30s ease-in-out infinite alternate;
}
@keyframes flow{
  0%  {background-position:10% 14%, 86% 22%, 48% 88%}
  50% {background-position:26% 32%, 66% 44%, 62% 68%}
  100%{background-position:14% 24%, 90% 16%, 40% 92%}
}

/* 漂う粒（木の葉） */
.ambient-particles span{position:absolute;bottom:-6vh;width:13px;height:13px;
  border-radius:100% 0 100% 0;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb,var(--accent) 30%,#fff), color-mix(in srgb,var(--accent) 62%,#fff) 78%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent);
  opacity:0;animation:floatUp linear infinite}
@keyframes floatUp{
  0%{transform:translateY(0) translateX(0) rotate(0);opacity:0}
  12%{opacity:.55}
  88%{opacity:.5}
  100%{transform:translateY(-112vh) translateX(50px) rotate(240deg);opacity:0}
}
.ambient-particles span:nth-child(1){left:6%;width:9px;height:9px;animation-duration:24s;animation-delay:-2s}
.ambient-particles span:nth-child(2){left:14%;width:15px;height:15px;animation-duration:31s;animation-delay:-9s}
.ambient-particles span:nth-child(3){left:23%;width:11px;height:11px;animation-duration:27s;animation-delay:-14s}
.ambient-particles span:nth-child(4){left:31%;width:18px;height:18px;animation-duration:35s;animation-delay:-5s}
.ambient-particles span:nth-child(5){left:39%;width:8px;height:8px;animation-duration:22s;animation-delay:-18s}
.ambient-particles span:nth-child(6){left:47%;width:13px;height:13px;animation-duration:33s;animation-delay:-11s}
.ambient-particles span:nth-child(7){left:55%;width:12px;height:12px;animation-duration:28s;animation-delay:-3s}
.ambient-particles span:nth-child(8){left:62%;width:16px;height:16px;animation-duration:38s;animation-delay:-21s}
.ambient-particles span:nth-child(9){left:70%;width:10px;height:10px;animation-duration:25s;animation-delay:-7s}
.ambient-particles span:nth-child(10){left:77%;width:14px;height:14px;animation-duration:30s;animation-delay:-16s}
.ambient-particles span:nth-child(11){left:84%;width:10px;height:10px;animation-duration:34s;animation-delay:-1s}
.ambient-particles span:nth-child(12){left:90%;width:16px;height:16px;animation-duration:26s;animation-delay:-12s}
.ambient-particles span:nth-child(13){left:50%;width:8px;height:8px;animation-duration:40s;animation-delay:-24s}
.ambient-particles span:nth-child(14){left:18%;width:13px;height:13px;animation-duration:29s;animation-delay:-19s}

/* ============== RESPONSIVE ============== */
@media (max-width:1100px){
  .app{grid-template-columns:var(--rail-w) 1fr}
  .presence{display:none}
}
@media (max-width:820px){
  :root{--rail-w:280px}
  .app{grid-template-columns:1fr}
  .rail{position:fixed;inset:0 auto 0 0;width:var(--rail-w);z-index:40;transform:translateX(-102%);
    transition:transform .25s ease;box-shadow:var(--shadow)}
  .rail.open{transform:none}
  .rail-close{display:block}
  .menu{display:inline-block}
  .messages{padding:22px 14px}
  .composer{padding:12px 14px 16px}
  .thread-switch{max-width:34vw}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.05ms !important}
}