:root { --bg:#0f172a; --card:#111827; --muted:#9ca3af; --accent:#ef4444; --bot:#1f2937; --user:#334155; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: white; font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, Helvetica, Arial, sans-serif; }
.app { max-width: 720px; margin: 0 auto; height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
header { display:flex; align-items:center; gap:.75rem; padding: .75rem 1rem; background: var(--card); position: sticky; top: 0; z-index: 2; border-bottom: 2px solid #b68b60; }
header .brand { width: 48px; height:48px; border-radius: 12px; }
header h1 { font-size: 1.1rem; margin: 0; }
header .actions { margin-left: auto; display:flex; gap:.5rem; }
button { background:#374151; border:1px solid #4b5563; color:white; border-radius:12px; padding:.5rem .75rem; font-size:.95rem; writing-mode: horizontal-tb; }
button:hover { filter: brightness(1.05); }
.chat { padding: 1rem; overflow-y: auto; }
.row { display:flex; gap:.75rem; margin: .5rem 0; width: 100%; }
.row.bot { align-items:flex-start; }
.row.user { justify-content: flex-end; }
.bubble { max-width: 75%; padding: .75rem .9rem; border-radius:16px; line-height:1.5; word-break: break-word; }
.bot .bubble { background: var(--bot); border-top-left-radius: 6px; }
.user .bubble { background: var(--user); border-top-right-radius: 6px; max-width: 80%; text-align: right; }
.row .avatar { width: 72px; height: 72px; border-radius: 16px; flex: 0 0 auto; object-fit: cover; background:#222; }
form { display:flex; gap:.5rem; padding: .75rem; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.3)); position: sticky; bottom: 0; }
input[type=text] { appearance:none; border:none; outline:none; width:100%; background:#0b1220; color:white; padding:.8rem 1rem; border-radius:12px; border:1px solid #344155; font-size:1rem; }
.kbtns { display:flex; flex-wrap: wrap; gap:.5rem; margin-top:.5rem; }
.kbtn { font-size:.85rem; background:#192033; border:1px solid #2a3347; padding:.35rem .6rem; border-radius:999px; }
.small { font-size:.85rem; color:#cbd5e1; }

.row.user .bubble {
    background: var(--user);
    border-top-right-radius: 6px;
    width: fit-content;
    max-width: 80%;
    margin-left: 0;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#btn-reset,
form button[type="submit"] {
    background-color: #a24b4b;      /* 深めの赤茶 */
    border: 1px solid #793737;      /* トーンを落とした赤枠 */
    writing-mode: horizontal-tb;    /* ← 横書き固定 */
    white-space: nowrap;            /* ← 折り返し防止 */
    height: 2.8rem;                 /* ← 入力欄と同じ高さに */
    display: flex;                  /* ← 内側の文字を中央寄せ */
}

#btn-reset:hover,
form button[type="submit"]:hover {
    filter: brightness(1.1);
}