/* ARTBIRTH トーク（外部の人のアプリ）。色は会社アプリと同じ（背景 #f2f1ee・濃い灰 #3a3a3a）。スマホ幅 360〜430px で見やすく */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overscroll-behavior-y:none}
body{font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP','Segoe UI',sans-serif;background:#f2f1ee;color:#1f2937;
  -webkit-text-size-adjust:100%;font-size:16px;line-height:1.55}
button,textarea,input{font:inherit;color:inherit}
button{cursor:pointer}
.app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;background:#f2f1ee;position:relative}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center;gap:14px}
.muted{color:#6b7280;font-size:14px}
.noscript{padding:24px;text-align:center}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid #d6d3cc;border-top-color:#3a3a3a;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* はじめの画面 */
.brand{font-size:13px;letter-spacing:.24em;color:#8a8a8a}
.title{font-size:22px;font-weight:700;color:#1f1f1f}
.lead{font-size:15px;color:#374151;max-width:330px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;width:100%;max-width:360px;text-align:left;display:flex;flex-direction:column;gap:10px}
.card h2{font-size:15px}
.card p{font-size:13px;color:#6b7280}
.field{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:12px;font-size:16px;background:#fff}
.btn{border:none;border-radius:10px;padding:12px 16px;font-size:15px;font-weight:700;background:#3a3a3a;color:#fff;min-height:46px}
.btn:disabled{opacity:.5}
.btn.ghost{background:#fff;color:#374151;border:1px solid #d1d5db}
.btn.small{min-height:36px;padding:7px 12px;font-size:13px}
.err{color:#b91c1c;font-size:14px}

/* トークの画面 */
.head{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid #e5e7eb}
.head .who{flex:1;min-width:0}
.head .name{font-size:16px;font-weight:700;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head .sub{font-size:11.5px;color:#6b7280}
.iconbtn{border:none;background:none;font-size:22px;line-height:1;padding:8px 10px;border-radius:10px;color:#555550;min-width:44px;min-height:44px}
.banner{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f0ede4;color:#6b5d40;font-size:13px;border-bottom:1px solid #e7e1d1}
.banner .txt{flex:1}
.banner .x{border:none;background:none;font-size:18px;color:#8a7d5f;padding:4px 8px;min-width:36px;min-height:36px}
.list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 8px;display:flex;flex-direction:column;gap:4px}
.more{align-self:center;margin:4px 0 10px}
.day{align-self:center;margin:10px 0 6px;font-size:11.5px;color:#6b7280;background:#e7e4dc;border-radius:10px;padding:2px 10px}
.row{display:flex;flex-direction:column;max-width:82%;margin:2px 0}
.row.me{align-self:flex-end;align-items:flex-end}
.row.other{align-self:flex-start;align-items:flex-start}
.from{font-size:11.5px;color:#6b7280;margin:0 4px 2px}
.bubble{padding:9px 13px;border-radius:18px;font-size:15.5px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.me .bubble{background:#3a3a3a;color:#fff;border-bottom-right-radius:6px}
.other .bubble{background:#fff;color:#1f2937;border:1px solid #e5e7eb;border-bottom-left-radius:6px}
.other.claude .bubble{background:#eef0fb;border-color:#d9ddf6}
.bubble img{display:block;max-width:220px;max-height:280px;border-radius:12px;margin-bottom:6px}
.meta{font-size:10.5px;color:#9ca3af;margin:2px 6px 0}
.meta.fail{color:#b91c1c}
.retry{border:none;background:none;color:#b91c1c;text-decoration:underline;font-size:11px;padding:2px 4px}
.empty{white-space:pre-line;align-self:center;margin:auto 0;text-align:center;color:#6b7280;font-size:14px;padding:24px}

.composer{flex-shrink:0;display:flex;align-items:flex-end;gap:8px;padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e5e7eb}
.composer textarea{flex:1;resize:none;border:1px solid #d1d5db;border-radius:20px;padding:9px 14px;font-size:16px;line-height:1.4;max-height:132px;min-height:42px;background:#fafaf9}
.send{border:none;border-radius:20px;background:#3a3a3a;color:#fff;font-weight:700;font-size:15px;padding:0 16px;height:42px;flex-shrink:0}
.send:disabled{opacity:.4}
.count{font-size:11px;color:#b91c1c;padding:0 14px 4px;background:#fff}

/* 下から出る板（メニュー・確認） */
.shade{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet{background:#fff;width:100%;max-width:480px;border-radius:18px 18px 0 0;padding:18px 16px;padding-bottom:max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.sheet h3{font-size:16px}
.sheet p{font-size:13.5px;color:#4b5563}
.sheet .btn{width:100%}
.btn.danger{background:#fff;color:#b91c1c;border:1px solid #fecaca}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#1f2937;color:#fff;font-size:13px;padding:8px 14px;border-radius:18px;z-index:60;max-width:90%}