/* ちょうないかいネット 共通スタイル
   高齢の方にも見やすいよう、本文18px・主要ボタン18px以上・タップ領域44px以上を基本にする */

:root {
  --green: #1f6f3f;
  --green-dark: #17532f;
  --bg: #f4f6f8;
  --timeline-bg: #dfe7ee;
  --text: #1a1a1a;
  --muted: #555;
  --border: #c9d1d9;
  --mine: #c9f0ad;
  --other: #ffffff;
  --admin-bg: #fff3d1;
  --admin-border: #e0a100;
  --admin-badge: #c2410c;
  --danger: #b42318;
  --focus: #1d4ed8;
  font-size: 18px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

button, input, textarea, select { font: inherit; color: inherit; }
a { color: #0b57d0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  min-height: 48px;
  min-width: 48px;
  padding: .4em 1em;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.primary:active { background: var(--green-dark); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.small { min-height: 44px; padding: .2em .8em; font-size: 1rem; }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; border-style: dashed; }

.link-btn {
  min-height: 44px;
  padding: 0 .6em;
  border: none;
  background: none;
  color: #0b57d0;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.link-btn.danger { color: var(--danger); }

/* ---------- 入力 ---------- */
.field { display: block; margin-bottom: 1.2rem; }
.field-label { display: block; font-weight: 700; margin-bottom: .3rem; }
.field input, .field select {
  width: 100%;
  min-height: 52px;
  padding: .4em .7em;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 1.1rem;
}
.hint { display: block; color: var(--muted); font-size: .9rem; margin-top: .2rem; }
.error { color: var(--danger); font-weight: 600; margin: .5rem 0; }
.error:empty, .saved:empty { display: none; }
.saved { color: var(--green); font-weight: 600; }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem;
  margin-bottom: 1.2rem;
}
.card h2 { margin: 0 0 1rem; font-size: 1.25rem; }
details.card summary { font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
details.card[open] summary { margin-bottom: .8rem; }

/* ---------- 画面 ---------- */
.screen { height: 100%; }
.center-screen { display: flex; align-items: center; justify-content: center; }
.scroll-screen { overflow-y: auto; }
.welcome-inner { max-width: 560px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.app-title { color: var(--green); font-size: 1.7rem; margin: .5rem 0; text-align: center; }
.lead { text-align: center; color: var(--muted); }

/* ---------- チャット ---------- */
.chat-screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  position: relative;
}
.topbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem;
  padding-top: max(.4rem, env(safe-area-inset-top));
  background: var(--green);
  color: #fff;
}
.topbar h1 { flex: 1; margin: 0; font-size: 1.2rem; }
.topbar .btn { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.6); color: #fff; }

#timeline {
  flex: 1;
  overflow-y: auto;
  background: var(--timeline-bg);
  padding: .5rem .6rem 1rem;
  overscroll-behavior: contain;
}
#messages { max-width: 820px; margin: 0 auto; }
.older-wrap { text-align: center; margin: .5rem 0; }
.empty-note { text-align: center; color: var(--muted); margin-top: 3rem; }

.day-sep {
  text-align: center;
  margin: 1rem 0 .6rem;
}
.day-sep span {
  display: inline-block;
  background: rgba(0,0,0,.45);
  color: #fff;
  border-radius: 999px;
  padding: .1em .9em;
  font-size: .9rem;
}

.msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: .7rem 0;
  scroll-margin-top: 1rem;
}
.msg.mine { align-items: flex-end; }
.msg-name { font-size: .9rem; color: #333; margin: 0 .4rem .15rem; display: flex; align-items: center; gap: .4rem; }
.badge {
  display: inline-block;
  background: var(--admin-badge);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 0 .45em;
  line-height: 1.6;
}
.bubble {
  max-width: min(88%, 640px);
  background: var(--other);
  border-radius: 18px;
  border-top-left-radius: 6px;
  padding: .55rem .85rem;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
  overflow-wrap: anywhere;
}
.msg.mine .bubble { background: var(--mine); border-top-left-radius: 18px; border-top-right-radius: 6px; }
.msg.admin .bubble { background: var(--admin-bg); border: 2px solid var(--admin-border); }
.msg.deleted .bubble { background: #eef0f2; color: var(--muted); font-style: italic; border: 1px dashed #aab; }
.msg.highlight .bubble { animation: flash 2s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 5px #fbbf24; } 100% { box-shadow: 0 0 0 0 transparent; } }

.body { white-space: pre-wrap; }
.msg-foot { display: flex; align-items: center; gap: .1rem; margin: 0 .2rem; color: var(--muted); font-size: .85rem; }

.reply-quote {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-left: 4px solid #8a9aa9;
  background: rgba(0,0,0,.05);
  border-radius: 6px;
  padding: .3rem .6rem;
  margin-bottom: .4rem;
  font-size: .9rem;
  color: #333;
  cursor: pointer;
  min-height: 44px;
}

/* 添付 */
.atts { display: flex; flex-direction: column; gap: .5rem; margin-top: .4rem; }
.atts:first-child { margin-top: 0; }
.att-image { display: block; padding: 0; border: none; background: none; cursor: zoom-in; max-width: 100%; }
.att-image img {
  display: block;
  max-width: 100%;
  width: 320px;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 10px;
  background: #eee;
}
.att-video { display: block; width: 100%; max-width: 480px; max-height: 60vh; border-radius: 10px; background: #000; }
.att-audio { display: block; width: 100%; min-width: 240px; }
.att-file {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 56px;
  padding: .5rem .8rem;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
}
.att-file-icon { font-size: 1.6rem; }
.att-file-name { font-weight: 600; color: #0b57d0; text-decoration: underline; word-break: break-all; }
.att-file-size { display: block; color: var(--muted); font-size: .85rem; }

.new-below {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 9rem;
  z-index: 5;
  min-height: 48px;
  padding: .3em 1.2em;
  border: none;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* 入力欄 */
.composer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: .5rem .6rem;
  padding-bottom: max(.5rem, env(safe-area-inset-bottom));
}
.post-form { display: flex; align-items: flex-end; gap: .4rem; max-width: 820px; margin: 0 auto; }
.post-form textarea {
  flex: 1;
  min-height: 48px;
  max-height: 40vh;
  resize: none;
  padding: .5em .7em;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 1.05rem;
  line-height: 1.5;
}
.attach { padding: .2em .5em; flex-direction: column; gap: 0; line-height: 1.1; }
.attach-text { font-size: .75rem; }
.send { font-size: 1.1rem; }
.reply-banner {
  display: flex; align-items: center; gap: .5rem;
  max-width: 820px; margin: 0 auto .4rem;
  background: #eef4ff; border-radius: 10px; padding: .3rem .3rem .3rem .7rem;
  font-size: .95rem;
}
.reply-banner-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; }
.file-list li { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; font-size: .95rem; }
.file-list .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { position: relative; max-width: 820px; margin: .4rem auto 0; height: 28px; background: #e5e7eb; border-radius: 8px; overflow: hidden; }
.progress-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: #86c79c; transition: width .2s; }
.progress-text { position: relative; display: block; text-align: center; font-size: .9rem; line-height: 28px; }

/* ダイアログ */
.dialog {
  width: min(92vw, 480px);
  border: none;
  border-radius: 16px;
  padding: 1.2rem;
}
.dialog::backdrop { background: rgba(0,0,0,.5); }
.dialog h2 { margin-top: 0; }
.member-id { margin: 1.2rem 0; }

/* 画像の拡大 */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
}
.lightbox img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.lightbox-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  font-size: 1.1rem;
}

@media (min-width: 700px) {
  .bubble { max-width: 70%; }
}

/* ---------- 登録まわりの案内 ---------- */
.steps { padding-left: 1.4em; margin: .5rem 0 1.2rem; }
.steps li { margin-bottom: .4rem; }
.warning {
  background: #fff4e5;
  border: 2px solid #e8590c;
  border-radius: 12px;
  padding: .8rem 1rem;
  margin-bottom: 1.2rem;
}
.warning p { margin: .4rem 0 0; }
.member-no { font-size: 1.2rem; margin: 0 0 .3rem; }
.member-no strong { font-size: 1.6rem; }
.note { color: #7a4b00; background: #fff8e6; border-radius: 8px; padding: .5rem .7rem; font-size: .95rem; }

/* ---------- ログイン・登録 ---------- */
.plain-page { overflow-y: auto; }
.center { text-align: center; }
.show-pw { display: flex; align-items: center; gap: .5rem; min-height: 44px; margin: -.6rem 0 1rem; }
.show-pw input { width: 22px; height: 22px; accent-color: var(--green); }
.switch-card p { margin-top: 0; }
.ok-note { color: var(--green); font-weight: 700; margin: 0 0 1.2rem; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; }
.dialog-head h2 { margin: 0; }
.dialog-section { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.dialog-section summary { font-weight: 700; min-height: 44px; display: flex; align-items: center; cursor: pointer; }

/* ---------- お知らせ／会議の切り替え（役員と班長） ---------- */
.room-tabs { display: flex; background: #fff; border-bottom: 1px solid var(--border); }
.room-tabs button {
  flex: 1; min-height: 56px; border: none; background: none; cursor: pointer;
  font-size: 1.1rem; font-weight: 700; color: #555; border-bottom: 5px solid transparent;
}
.room-tabs button[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }
.new-dot {
  display: inline-block; min-width: 1.4em; padding: 0 .4em; margin-left: .3em;
  background: #d92d20; color: #fff; border-radius: 999px; font-size: .8rem; line-height: 1.5; font-weight: 700;
}
/* 会議を表示している間は色を変えて、どこにいるか迷わないようにする（役員会議は紺、役員・班長会議は紫） */
[data-room="officers"] .topbar { background: #1f3a68; }
[data-room="officers"] #timeline { background: #e3e9f4; }
.room-tabs button[data-room="officers"][aria-selected="true"] { color: #1f3a68; border-bottom-color: #1f3a68; }
[data-room="council"] .topbar { background: #5b3f99; }
[data-room="council"] #timeline { background: #e9e4f5; }
.room-tabs button[data-room="council"][aria-selected="true"] { color: #5b3f99; border-bottom-color: #5b3f99; }
/* 3つ並んでも収まるよう、「役員・／班長会議」のように区切りで折り返す */
.room-tabs button { padding: .2rem .3rem; line-height: 1.25; }
.room-tabs .tab-label { word-break: keep-all; overflow-wrap: anywhere; }
.badge.leader { background: #1d6fb8; }

/* 見える範囲などの注記 */
.composer-note { margin: 0 auto .4rem; max-width: 820px; color: #7a4b00; font-size: .9rem; text-align: center; }
.msg-label { font-size: .85rem; color: #555; margin: .1rem .4rem 0; }
.msg-label.closed { color: var(--danger); font-weight: 600; }
.msg.private .bubble { border: 2px dashed #b9a36a; }
.accept-replies {
  display: flex; align-items: center; gap: .5rem; max-width: 820px; margin: .4rem auto 0;
  min-height: 44px; font-size: 1rem; font-weight: 600;
}
.accept-replies input { width: 24px; height: 24px; accent-color: var(--green); }

/* 返信の一覧 */
.replies-dialog { width: min(96vw, 720px); }
.replies-title { font-weight: 700; margin: .8rem 0 .2rem; white-space: pre-wrap; }
.replies-list { padding-left: 1.6em; }
.replies-list li { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.replies-list .who { font-weight: 700; }
.replies-list .when { color: var(--muted); font-size: .85rem; margin-left: .5rem; }
.replies-list .body { margin-top: .2rem; }