*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #4aa30c;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.app {
  position: fixed;
  inset: var(--app-top, 0) 0 auto 0;
  height: var(--app-h, 100dvh);
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* 画面へ戻ったとき、ログインの状態を確かめるまで前の表示を見せない。位置は保つ。 */
body[data-veiled] .app > *, body[data-veiled] > .sheet { visibility: hidden; }

/* ログイン: 小さな合言葉の入力だけ */
.auth {
  position: fixed;
  inset: var(--app-top, 0) 0 auto 0;
  height: var(--app-h, 100dvh);
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 16px;
  background: #fff;
}
.login {
  margin: 48px auto 0;
  max-width: 22em;
  display: grid;
  gap: 12px;
  text-align: center;
}
.auth-status {
  margin: 16px auto 0;
  max-width: 22em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* 上部: 部屋の切替は小さく */
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: calc(env(safe-area-inset-top) + 4px) 8px 4px;
  min-height: 40px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}
.room-button {
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d8d8d8;
  border-radius: 16px;
  background: linear-gradient(#fff, #eee);
  color: #333;
  font-size: 14px;
}
.room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-caret { color: #888; font-size: 11px; }
/* 見た目は小さいまま、指で押せる範囲を縦横 44px 以上に広げる */
.room-button::before, .room-add::before, .clear-button::before, .failed-tools button::before, .jump::before {
  content: "";
  position: absolute;
}
.room-button::before { inset: -6px 0; }
.room-add::before { inset: -6px; }
/* 利用者メニュー: 右端に小さく */
.user-button {
  position: relative;
  min-width: 0;
  max-width: 40%;
  flex: 0 1 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 0 4px 0 8px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: #666;
  font-size: 12px;
}
.user-button::before { content: ""; position: absolute; inset: -8px 0; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-add {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid #d8d8d8;
  border-radius: 50%;
  background: linear-gradient(#fff, #eee);
  color: #4aa30c;
  font-size: 18px;
  line-height: 1;
}

/* 会話欄 */
.log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 10px 16px;
  background: #fff;
}
.messages { list-style: none; margin: 0; padding: 0; }
.day-group, .day-messages { display: flow-root; list-style: none; margin: 0; padding: 0; }
/* 日単位の親の範囲だけに固定し、次の日付が前の日付を押し上げる。 */
.date-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 4px 0 12px;
  pointer-events: none;
}
.date-pill {
  padding: 4px 11px;
  border-radius: 14px;
  background: rgba(231, 237, 226, .94);
  color: #526147;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.message-time {
  flex: none;
  padding-bottom: 1px;
  color: #888;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bubble-row { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 14px; }
.bubble-row.user { justify-content: flex-end; }
.bubble-row.ai { justify-content: flex-start; }
.bubble-row.fresh { animation: pop .22s ease-out both; animation-delay: var(--delay, 0s); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bubble {
  position: relative;
  max-width: min(78%, 34em);
  padding: 9px 14px 10px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}
/* 利用者: 明るい緑、右、尻尾は右下 */
.bubble.user {
  color: #fff;
  background: linear-gradient(#7fd33a 0, #5cbc12 16px, #55b80a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 1px rgba(0,0,0,.08);
  margin-right: 12px;
}
.bubble.user::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -13px;
  width: 20px;
  height: 14px;
  background: #55b80a;
  clip-path: polygon(0 0, 45% 0, 100% 100%);
}
/* AI: 銀色、左、尻尾は左下 */
.bubble.ai {
  color: #222;
  background: linear-gradient(#f4f4f4 0, #dedede 50%, #d0d0d0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(0,0,0,.08);
  margin-left: 12px;
}
.bubble.ai::after {
  content: "";
  position: absolute;
  left: -12px;
  bottom: -13px;
  width: 20px;
  height: 14px;
  background: #d0d0d0;
  clip-path: polygon(55% 0, 100% 0, 0 100%);
}

.bubble.pending { opacity: .7; }
.bubble.failed { opacity: .75; outline: 2px solid #e8336d; outline-offset: 1px; }
.failed-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: -6px 20px 14px 0;
  font-size: 13px;
  color: #c2185b;
}
.failed-tools button::before { inset: -6px 0; }
.failed-tools button {
  position: relative;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: #e8336d;
  color: #fff;
  font-size: 13px;
}

.typing { display: flex; gap: 5px; align-items: center; padding: 13px 16px; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #666;
  animation: blink 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .45; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

.notice {
  margin: 24px auto;
  max-width: 22em;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f3f3f3;
  color: #444;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

.first-room {
  margin: 28px auto 0;
  max-width: 22em;
  display: grid;
  gap: 12px;
  text-align: center;
}
.first-title { margin: 0; color: #333; font-size: 16px; }
.name-input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
}
.form-error { margin: 0; color: #c2185b; font-size: 14px; }

.pink-button {
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(#ff5d9a 0, #f02a78 50%, #e0136a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.2);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
}
.pink-button.small { flex: none; font-size: 15px; }
.pink-button:disabled { opacity: .6; cursor: default; }
.send-button:disabled { background: linear-gradient(#ffc3da, #f7a3c4); color: rgba(255,255,255,.9); cursor: default; }

.jump-wrap {
  position: sticky;
  bottom: 0;
  height: 0;
  display: flex;
  justify-content: center;
  overflow: visible;
}
.jump {
  position: relative;
  flex: none;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 17px;
  background: rgba(40, 110, 0, .9);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transform: translateY(-44px);
}
.jump::before { inset: -5px 0; }

.status {
  flex: none;
  padding: 6px 12px;
  background: #fff3f6;
  border-top: 1px solid #f6c3d3;
  color: #b0124f;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-text { flex: 1; min-width: 0; white-space: pre-line; }
.status-button {
  position: relative;
  flex: none;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #e8336d;
  border-radius: 16px;
  background: #fff;
  color: #c2185b;
  font-size: 13px;
}
.status-button::before { content: ""; position: absolute; inset: -6px 0; }
.typing-note { padding-bottom: 1px; color: #888; font-size: 11px; white-space: nowrap; }

/* 下部: 緑の帯、白い入力欄、ピンクの発言 */
.composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(#55b012, #3f9a08);
}
.clear-button {
  position: relative;
  flex: none;
  width: 40px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(#3b7f0c, #235a02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.clear-button::before { inset: 0 -2px; }
.clear-button:disabled { opacity: .45; cursor: default; }
.input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 9.5em;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
  font-size: 16px; /* 16px 未満だと iOS が拡大する */
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}
.input:focus { outline: 2px solid #ffd2e4; }
.send-button {
  flex: none;
  min-width: 72px;
  height: 44px;
  padding: 0 14px;
  border: 2px solid #fff;
  border-radius: 12px;
  background: linear-gradient(#ff6aa3 0, #f0287a 50%, #dc0f66 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.25);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .05em;
}

/* 部屋の一覧 (下から出る小さなシート) */
/* アプリと同じく、キーボードを除いた見えている範囲に合わせる */
.sheet { position: fixed; inset: var(--app-top, 0) 0 auto 0; height: var(--app-h, 100dvh); z-index: 10; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 75%;
  display: flex;
  flex-direction: column;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,.2);
}
.room-list { list-style: none; margin: 0 0 10px; padding: 0; overflow-y: auto; }
.room-list button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid #eee;
  background: none;
  color: #222;
  font-size: 16px;
  text-align: left;
}
.room-list button[aria-current="true"] { color: #2f7d00; font-weight: 700; }
.room-list .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-list .busy { color: #4aa30c; font-size: 12px; font-weight: 400; }
.new-room { flex: none; display: flex; gap: 8px; }

/* 利用者のシート */
#user-sheet .sheet-panel { overflow-y: auto; gap: 10px; }
.sheet-user { margin: 4px 0 0; color: #333; font-size: 15px; overflow-wrap: anywhere; }
.sheet-button {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: linear-gradient(#fff, #eee);
  color: #333;
  font-size: 15px;
}
.owner-area { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid #eee; }
.owner-title { margin: 0; color: #333; font-size: 15px; }
.user-list { list-style: none; margin: 0; padding: 0; }
.user-list:empty { display: none; }
.user-list li { display: flex; align-items: center; gap: 8px; min-height: 36px; border-bottom: 1px solid #eee; font-size: 15px; }
.user-list .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-list .role { color: #888; font-size: 12px; }
.issued { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: #fff7e0; }
.issued-note { margin: 0; color: #5a4300; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.issued-pass {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font-size: 16px;
  overflow-wrap: anywhere;
  user-select: all;
}
.issued-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.copy-result { margin: 0; color: #555; font-size: 13px; }

@media (min-width: 720px) {
  .app { left: 50%; width: 640px; transform: translateX(-50%); box-shadow: 0 0 24px rgba(0,0,0,.25); }
  .sheet-panel { left: 50%; width: 640px; transform: translateX(-50%); }
  .auth { left: 50%; width: 640px; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .bubble-row.fresh, .typing span { animation: none; }
}