:root { --max: 1100px; }
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  background: #f6f7f9;
  color: #111;
}

/* ヘッダー */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  border-bottom: 1px solid #e6e8ee;
  padding: 14px 16px;
}
.topbar-inner { max-width: var(--max); margin: 0 auto; display:flex; justify-content:center; }
.brand { width: 100%; max-width: 820px; text-align:center; }
.brand-title { font-weight: 900; font-size: 18px; display:inline-flex; gap:8px; align-items:center; justify-content:center; }
.brand-sub { font-size: 12.5px; color:#555; margin-top:6px; line-height:1.6; }
.badge { font-size: 11px; padding: 2px 8px; border: 1px solid #ddd; border-radius: 999px; color: #333; font-weight: 800; }

/* notice */
.notice { max-width: var(--max); margin: 12px auto 0; padding: 0 10px; }
.notice-inner { background:#fff; border:1px solid #e6e8ee; border-radius:12px; padding:12px 14px; max-width:920px; margin:0 auto; }
.notice-title { font-weight: 900; font-size: 13px; margin-bottom: 8px; }
.notice-list { margin:0; padding-left:18px; font-size:12px; color:#333; line-height:1.65; }

a.tel { color:#111; text-decoration: underline; font-weight: 900; }
a.tel:hover { opacity: 0.85; }

.wrap { max-width: var(--max); margin: 12px auto; padding: 0 10px 18px; }

/* チャット枠 */
.chat {
  background:#fff;
  border:1px solid #e6e8ee;
  border-radius:14px;
  padding:14px;
  height:min(56vh, 560px);
  overflow-y:auto;
  max-width:920px;
  margin:0 auto;
}

/* ★超重要：右/左を “margin auto” で確実にする */
.row {
  width: 100%;
  display: flex;
  gap: 10px;
  margin: 12px 0;
  align-items: flex-end;
}

/* AIは左：アバター→吹き出し */
.row.ai { justify-content: flex-start; }

/* あなたは右：吹き出し→アバター に並べ替え */
.row.user { justify-content: flex-end; }
.row.user .avatar { order: 2; }
.row.user .bubble { order: 1; }

/* アバター */
.avatar {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid #e6e8ee;
  background: #fafbff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px; color: #333;
  flex: 0 0 auto;
}

/* 吹き出し（これが “左詰めすぎ” に見える主役なので幅・余白を整える） */
.bubble {
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  border: 1px solid #e6e8ee;
  background: #fff;
}

/* あなたの吹き出しだけ色を変える */
.row.user .bubble { background: #f2f4ff; }

/* 入力欄 */
.composer { margin-top: 10px; }
.composer-inner {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 14px;
  padding: 10px;
  align-items: end;
}
textarea {
  width: 100%;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  resize: vertical;
  outline: none;
  min-height: 92px;
}
.composer-actions { display:flex; flex-direction:column; gap:8px; align-items:stretch; }

button {
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 900;
  background: #111;
  color: #fff;
  cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: not-allowed; }

.hint { font-size: 11px; color: #666; line-height: 1.4; }

.foot { margin-top: 10px; color:#666; }
.foot-small { max-width:920px; margin:0 auto; font-size:11px; line-height:1.6; }

@media (max-width: 520px) {
  .bubble { max-width: 92%; }
  .composer-inner { grid-template-columns: 1fr; }
  .composer-actions { flex-direction: row; justify-content: space-between; align-items: center; }
  .hint { text-align: right; }
}
body { border-top: 12px solid red !important; }
/* language toggle buttons */
.langbtn{
  display:inline-block;
  padding:8px 12px;
  border:1px solid #e6e8ee;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  color:#111;
  background:#fff;
}
.langbtn:hover{ opacity:.85; }
.langbtn[aria-current="page"]{
  background:#111;
  color:#fff;
  border-color:#111;
}
.title-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.title-text{
  font-weight:900;
  font-size:20px;
  text-align:center;
}

.title-icon{
  width:48px;
  height:48px;
  object-fit:contain;
}

@media (max-width:520px){
  .title-icon{
    width:38px;
    height:38px;
  }
}

/* 入力欄を画面下に固定 */
.composer {
  position: sticky;
  bottom: 0;
  background: #f7f8fb;
  padding-bottom: 8px;
  z-index: 10;
}