* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans JP', sans-serif; margin: 0; background: #f6f7f9; color: #222; }
.app-header { position: sticky; top: 0; background: white; border-bottom: 1px solid #e5e7eb; padding: 12px 16px; }
h1 { font-size: 18px; margin: 0 0 8px; }
h3 { font-size: 10px; margin: 0 0 3px; }
.modes { display: flex; gap: 8px; flex-wrap: wrap; }
.mode-btn { padding: 6px 10px; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; }
.mode-btn.active { background: #111827; color: #fff; border-color: #111827; }
.chat { max-width: 860px; margin: 16px auto; padding: 0 16px; }
.chatlog { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; min-height: 50vh; display: grid; gap: 12px; }
.msg { display: flex; gap: 10px; }
.msg .b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.msg.user .b { background: #e0f2fe; color: #0c4a6e; }
.msg.bot  .b { background: #ede9fe; color: #5b21b6; }
.bubble { background: #f9fafb; border: 1px solid #e5e7eb; padding: 10px 12px; border-radius: 12px; flex: 1; }
.msg.user .bubble { background: #eff6ff; }
.msg.bot  .bubble { background: #f5f3ff; }
.chat-input { display: flex; gap: 8px; margin-top: 12px; }
.chat-input input { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid #cbd5e1; }
.chat-input button { padding: 12px 16px; border-radius: 10px; border: 1px solid #111827; background: #111827; color: white; cursor: pointer; }
.foot { max-width: 860px; margin: 12px auto 32px; color: #4b5563; padding: 0 16px; }
.suggestion { margin-top: 8px; font-size: 14px; color: #374151; }
.suggestion a { color: #1d4ed8; text-decoration: underline; cursor: pointer; }
.small { font-size: 12px; color: #6b7280; }
/* おすすめ表示などの細部 */
.recbar .rec-btn:hover { background:#f3f4f6; }
.badge { display:inline-block; padding:2px 6px; border-radius:999px; background:#eef2ff; font-size:12px; }
mark { background: #ffeb3b; padding: 0 2px; border-radius: 2px; }

h1 { font-size: 18px; margin: 0 0 8px; }