/* XION(シオン。内部コード名 kintai)PWA — スマホ最適化(設計書5.2: 文字大きく・1画面1目的・タップ完結) */
:root {
  --green: #1a6b54; --green-dark: #114536; --bg: #f5f4ef; --card: #ffffff;
  --text: #22301f; --muted: #6b7568; --line: #dcd8cc;
  --ok: #1a6b54; --und: #b98700; --ng: #b3403a; --tentative: #8a8f98;
}
* { box-sizing: border-box; }
/* v0.9.7.0(N-2): 文字の大きさは OS の設定に従う。基準(1rem)= iOS の「文字サイズ」(Dynamic Type の本文。既定 17px)。
   Android は OS のフォントサイズが自動で掛かる。他(PC)は 17px 固定。各所の文字は 17 を基準にした rem(例: 13px → 0.7647rem)。
   入力欄は iOS が 16px 未満で拡大するため max(16px, …) を守る */
html { font-size: 17px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }
body { margin: 0; background: var(--bg); color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif; font-size: 0.9412rem; }
/* v0.8.0.0(Phase 3-1): ヘッダー=名前+☰(A-2)、下部3タブ(A-1)。上部の横並びナビは廃止 */
:root { --tabbar-h: 60px; --sab: env(safe-area-inset-bottom, 0px); }
/* v0.9.2.4: hidden 属性は常に効かせる(.row 等の display 指定に負けて表示されたままになる事故の防止) */
[hidden] { display: none !important; }
#topbar[hidden] { display: none; }
/* v0.9.4.2: ヘッダーは白+ロゴ(ヤックスフォトさん 9/16)。境界は下のタブバーと同じ 1px の細線(--line)で上下を対に。
   スクロールしたときだけ薄い影(#topbar.scrolled。app.js)で「上に何かある」ことを示す。
   別案に切り替える場合: 緑の帯 → border-bottom: 3px solid var(--green) / ロゴの青の細線 → border-bottom: 1px solid #00529f */
#topbar { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
  background: #fff; color: var(--text); position: sticky; top: 0; z-index: 10; min-height: 50px;
  border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
#topbar.scrolled { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.brand { margin-right: auto; display: flex; align-items: center; }
.brand-logo { height: 30px; width: auto; display: block; }
#topbar { font-size: clamp(15px, 0.9412rem, 18px); }
.menu-btn { background: transparent; border: 0; color: var(--green); min-height: 40px; min-width: 44px;
  padding: 2px 6px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.menu-btn svg { display: block; }
main { max-width: 960px; margin: 0 auto; padding: 14px 12px calc(var(--tabbar-h) + var(--sab) + 16px); }
/* 下部3タブ */
#tabbar[hidden] { display: none; }
#tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid;
  grid-template-columns: 1fr 1fr 1fr; background: #fff; border-top: 1px solid var(--line);
  height: calc(var(--tabbar-h) + var(--sab)); padding-bottom: var(--sab); }
.tab-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none; font-size: clamp(11px, 0.6471rem, 13px); font-weight: 600; position: relative; white-space: nowrap; line-height: 1.2;
  padding: 6px 0 4px; -webkit-tap-highlight-color: transparent; }   /* v0.9.7.2: 枠も崩れない範囲(11〜13px)で OS に追従。タブバーの高さは 60px 固定のまま */
.tab-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.tab-btn.active { color: var(--green); }
.tab-btn:active { background: #f4f6f5; }
.tab-badge { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 17px; height: 17px;
  border-radius: 999px; background: #e0533f; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; }
/* 右上メニュー(ドロワー) */
#drawer[hidden] { display: none; }
.drawer-back { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 70; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(82vw, 320px); background: #fff;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(12px + var(--sab)); overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px; box-shadow: -6px 0 24px rgba(0,0,0,.2); }
.drawer-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; border-bottom: 1px solid var(--line);
  margin-bottom: 6px; }
/* ドロワーは px 固定(v0.9.7.1。「特大」で項目が欠けた指摘) */
/* v0.9.7.2: 崩れない範囲で OS に追従(clamp)。行の高さは文字に合わせて伸びる */
.drawer-name { font-weight: 700; font-size: clamp(17px, 1rem, 20px); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.drawer-item { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-radius: 10px; line-height: 1.35;
  padding: 13px 10px; font-size: clamp(16px, 0.9412rem, 20px); color: var(--text); text-decoration: none; min-height: 48px; }
.drawer-item:active { background: #f4f6f5; }
.drawer-item.sub { padding-left: 26px; font-size: clamp(15px, 0.8824rem, 19px); }
.drawer-sec { font-size: clamp(12px, 0.7059rem, 15px); color: var(--muted); padding: 10px 10px 2px; }
.drawer-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); font-size: clamp(12px, 0.7059rem, 15px); color: var(--muted); }
.drawer-foot button, .drawer .install-card, .drawer .install-card button { font-size: clamp(15px, 0.8824rem, 18px); }
.drawer-foot button { width: 100%; margin-top: 8px; }
.drawer .card { margin: 6px 0; }
/* 管理画面のリンク列(ダッシュボード上部・各画面の「← 管理」) */
.adm-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.adm-links a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: #fff;
  color: var(--text); text-decoration: none; font-size: 0.8235rem; }
.adm-links a.on { background: var(--green); border-color: var(--green); color: #fff; }
.back-row { margin: 0 0 6px; }
/* シフトタブ上部「次の勤務」 */
.next-shift { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; }
.next-shift small { font-size: 0.7059rem; color: var(--muted); font-weight: 400; display: block; }
h1 { font-size: 1.1765rem; margin: 6px 0 14px; }
h2 { font-size: 0.9412rem; margin: 18px 0 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin-bottom: 12px; }
button { font-size: 0.9412rem; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; color: var(--text); cursor: pointer; min-height: 48px; }
button.primary { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
button.ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; min-height: 36px; padding: 6px 12px; }
button.small { min-height: 40px; padding: 8px 12px; font-size: 0.8235rem; }
button.danger { color: var(--ng); border-color: var(--ng); }
button:disabled { opacity: .45; cursor: default; }
input, select, textarea { font-size: max(16px, 0.9412rem); padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; min-height: 46px; }
label { display: block; font-size: 0.7647rem; color: var(--muted); margin: 10px 0 4px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }
.msg-error { background: #fbeceb; color: var(--ng); border: 1px solid #eec7c4;
  padding: 10px 12px; border-radius: 10px; margin: 10px 0; white-space: pre-wrap; }
.msg-warn { background: #fdf6e3; color: #7a5b00; border: 1px solid #efdca4;
  padding: 10px 12px; border-radius: 10px; margin: 10px 0; white-space: pre-wrap; }
.msg-ok { background: #e9f4ef; color: var(--green-dark); border: 1px solid #cae2d7;
  padding: 10px 12px; border-radius: 10px; margin: 10px 0; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--green-dark); color: #fff; padding: 12px 18px; border-radius: 12px;
  z-index: 50; max-width: 90%; }
/* カレンダー(予定登録・シフト) */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .head { text-align: center; font-size: 0.7059rem; color: var(--muted); padding: 2px 0; }
.cal .day { border: 1px solid var(--line); border-radius: 10px; min-height: 62px;
  padding: 4px; background: #fff; cursor: pointer; position: relative; font-size: 0.7059rem; }
.cal .day .num { font-weight: 700; font-size: 0.7647rem; }
.cal .day.closed { background: #eeece5; color: var(--muted); }
.cal .day.sel { outline: 3px solid var(--green); }
.cal .day .st { display: block; margin-top: 2px; font-weight: 700; }
.cal .day .st.ok { color: var(--ok); } .cal .day .st.und { color: var(--und); }
.cal .day .st.ng { color: var(--ng); }
.badge { display: inline-block; font-size: 0.6471rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; }
.badge.tentative { color: #555; border-color: #bbb; background: #f2f2f2; }
.badge.confirmed { color: #fff; background: var(--green); border-color: var(--green); }
.badge.manager { color: #fff; background: #5b4a9e; border-color: #5b4a9e; }
.badge.und { color: #7a5b00; background: #fdf6e3; border-color: #efdca4; }
.shift-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid var(--line); }
.shift-item .date { min-width: 84px; font-weight: 700; }
.shift-item.tentative { opacity: .65; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button { flex: 1; }
.tabs button.on { background: var(--green); color: #fff; border-color: var(--green); }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; margin: 3px; background: #fff; cursor: pointer; font-size: 0.8235rem; }
.chip.on { background: var(--green); color: #fff; border-color: var(--green); }
.chip.und { border-color: #efdca4; background: #fdf6e3; }
.chip.x { border-style: dashed; color: var(--muted); }
table.grid { width: 100%; border-collapse: collapse; font-size: 0.7647rem; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 6px; text-align: left;
  vertical-align: top; background: #fff; }
table.grid tr.confirmed td { background: #eef7f2; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; background: #fff;
  border-top: 2px solid var(--green); border-radius: 16px 16px 0 0; padding: 14px 14px calc(14px + var(--sab, 0px));
  max-height: 70vh; overflow-y: auto; z-index: 40; box-shadow: 0 -8px 30px rgba(0,0,0,.15);
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* v0.8.5.1: シートの背景。後ろの画面のスクロールを止め、タップで閉じる */
.sheet-back { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.25); }
.modal-back { touch-action: none; overscroll-behavior: none; }
.qrbox { text-align: center; padding: 10px; }
.qrbox img { width: 220px; height: 220px; }
.deadline { font-size: 0.7647rem; color: var(--muted); }
label.toggle { display: inline-flex; align-items: center; gap: 6px; border: none;
  background: transparent; padding: 4px 2px; cursor: pointer; font-size: 0.8235rem; color: var(--text); }
.cal .day .st { font-size: 0.6471rem; line-height: 1.35; }
.cal .day .st .t { display: block; font-weight: 600; }
.cal .day.past { background: #eeece5; color: var(--muted); cursor: default; }
.tag { display: inline-block; font-size: 0.8235rem; padding: 2px 6px; color: var(--text); }
@media (min-width: 700px) { .cal .day { min-height: 80px; font-size: 0.7647rem; } }

/* 提出状況マトリクス(案A。v0.1.3.1) */
.scroll-x { overflow-x: auto; }
table.matrix { border-collapse: collapse; font-size: 0.6471rem; }
table.matrix th, table.matrix td { border: 1px solid var(--line); padding: 3px 4px;
  text-align: center; background: #fff; white-space: nowrap; vertical-align: top; }
table.matrix th.name, table.matrix td.name { position: sticky; left: 0; z-index: 1;
  background: #f7f6f1; text-align: left; font-size: 0.7647rem; max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; }
table.matrix .ok { color: var(--ok); font-weight: 700; }
table.matrix .und { color: var(--und); font-weight: 700; }
table.matrix .ng { color: var(--ng); font-weight: 700; }
table.matrix .empty { color: #ccc; }
table.matrix .t { display: block; font-weight: 400; font-size: 0.5882rem; color: var(--text); }
table.matrix th .wd { display: block; font-size: 0.5882rem; color: var(--muted); font-weight: 400; }
table.matrix th .wd.sat { color: #2b6cb0; } table.matrix th .wd.sun { color: var(--ng); }

/* シフト作成の一覧表(D-8。v0.9.1.0): 日付 → 1行1人。タイムライン表示は廃止 */
table.plan-list td.pl-date { width: 128px; white-space: nowrap; font-size: 0.7647rem; }
table.plan-list td.pl-who { cursor: pointer; padding: 4px 8px; min-height: 32px; }
.pl-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 0.8235rem; }
.pl-row .nm { flex: none; min-width: 6em; }
.pl-row .tm { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-row.tentative { opacity: .65; }
@media (max-width: 480px) {
  table.plan-list td.pl-date { width: 96px; font-size: 0.7059rem; }
  .pl-row { gap: 6px; font-size: 0.7647rem; }
  .pl-row .nm { min-width: 5em; }
}

/* 時間帯選択ポップアップ(v0.1.5.0) */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; border-radius: 14px; padding: 18px; width: 100%;
  max-width: 420px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }

/* 日付セルの状態色・申告時間帯の枠(v0.1.5.1) */
.day-confirmed { background: #eef7f2 !important; }
.day-unmet { background: #fdf3d0 !important; }
.day-closed { background: #dedcd4 !important; }

/* ---- マニュアル動画フィード(Phase1設計書 §2。モック合意済みのUI) ---- */
body.feed-open { overflow: hidden; }
body.feed-open #topbar { display: none; }
.feed-root { position: fixed; inset: 0 0 calc(var(--tabbar-h) + var(--sab)) 0; z-index: 20; background: #0b0f0d; color: #f4f7f5; }  /* v0.8.0.0: 下3タブの分だけ空ける(石橋さん画面案) */
.feed-top { position: absolute; inset: 0 0 auto 0; z-index: 30; display: flex;
  justify-content: space-between; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent); pointer-events: none; }
.feed-icon { pointer-events: auto; border: 0; background: rgba(0,0,0,.35); color: #f4f7f5;
  width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%;
  font-size: 1rem; display: grid; place-items: center; }
.feed { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.feed-cell { position: relative; height: calc(100dvh - var(--tabbar-h) - var(--sab)); scroll-snap-align: start;
  scroll-snap-stop: always; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #0b0f0d; }
.feed-video { width: 100%; height: 100%; object-fit: contain; background: #0b0f0d; }
.feed-pause { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5;
  opacity: 0; transition: opacity .2s; pointer-events: none; font-size: 3.1765rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.feed-cell.paused .feed-pause { opacity: .9; }
.feed-rail { position: absolute; right: 10px; bottom: 96px; z-index: 20; display: flex;
  flex-direction: column; align-items: center; gap: 4px; }
.feed-like { border: 0; background: rgba(0,0,0,.28); width: 48px; height: 48px; min-height: 48px;
  padding: 0; border-radius: 50%; display: grid; place-items: center; color: #f4f7f5; }
.feed-like svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }
.feed-like.liked { color: #43c878; }
.feed-like.liked svg { fill: #43c878; stroke: #43c878; }
.feed-like-count { font-size: 0.6471rem; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: no-preference) {
  .feed-like.pop svg { animation: feedpop .35s; }
  @keyframes feedpop { 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }
  .heart-fly { animation: heartfly .7s forwards; }
  @keyframes heartfly { 0%{transform:scale(.4);opacity:0} 25%{transform:scale(1.25);opacity:1}
    100%{transform:scale(1) translateY(-46px);opacity:0} }
}
.heart-fly { position: fixed; z-index: 25; font-size: 3.7647rem; pointer-events: none; opacity: 0;
  color: #43c878; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.feed-meta { position: absolute; left: 16px; right: 70px; bottom: 30px; z-index: 20;
  text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.feed-meta .vtitle { font-size: 0.9412rem; font-weight: 700; margin-bottom: 4px; }
.feed-meta .vnote { font-size: 0.7059rem; color: rgba(244,247,245,.72); }
.feed-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: 3px;
  background: rgba(255,255,255,.14); }
.feed-progress .bar { height: 100%; width: 0%; background: #43c878; }
.feed-empty { height: 100%; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; }

/* ---- マニュアル動画 管理(§6) ---- */
.video-card .video-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 10px;
  background: #222; flex: none; }
.video-card .video-thumb.placeholder { display: grid; place-items: center; color: #999;
  font-size: 1.4118rem; }
.upload-progress { margin-top: 8px; font-weight: 700; color: var(--green-dark); }
.badge.ok { color: #fff; background: var(--green); border-color: var(--green); }
.badge.ng { color: #fff; background: var(--ng); border-color: var(--ng); }

/* ---- Phase 1.5: フィード拡張(⋯シート・検索/しおり・2倍速・一覧) ---- */
.feed-top-right { display: flex; gap: 8px; pointer-events: auto; }
.feed-more { width: 48px; height: 48px; min-height: 48px; font-size: 1.2941rem;
  background: rgba(0,0,0,.28); }
.feed-speed { position: absolute; top: calc(64px + env(safe-area-inset-top, 0px));
  right: 14px; z-index: 22; background: rgba(0,0,0,.55); color: #fff; font-weight: 800;
  padding: 4px 10px; border-radius: 999px; font-size: 0.8235rem; }
.feed-overlay { position: fixed; inset: 0; z-index: 40; }
.feed-overlay[hidden] { display: none; }
.feed-sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; }
.feed-sheet { width: 100%; background: #fff; color: #1c2b22;
  border-radius: 16px 16px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.feed-sheet-title { font-weight: 700; padding: 4px 6px 10px; }
.feed-sheet-item { display: block; width: 100%; text-align: left; background: #f4f6f5;
  border: 0; border-radius: 12px; padding: 14px; margin-top: 8px; font-size: 0.8824rem; }
.feed-sheet-item.cancel { text-align: center; color: #666; background: #fff;
  border: 1px solid var(--line); }
.feed-panel { position: absolute; inset: calc(10px + env(safe-area-inset-top, 0px)) 10px auto;
  max-height: 80%; overflow: auto; background: #fff; color: #1c2b22;
  border-radius: 14px; padding: 12px; }
.feed-search-input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 0.8824rem; }
.feed-list { margin-top: 10px; }
.feed-list-item { display: flex; gap: 10px; align-items: center; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--line); padding: 10px 4px;
  text-align: left; }
.feed-list-item img, .feed-list-item .noimg { width: 56px; height: 56px; border-radius: 8px;
  object-fit: cover; background: #222; color: #999; display: grid; place-items: center; flex: none; }
.feed-list-item b { display: block; font-size: 0.8235rem; }
.feed-list-item small { color: var(--green-dark); }
.feed-list-empty { color: #666; padding: 16px 4px; }

/* ---- Phase 1.5: 管理(タグ・視聴状況) ---- */
.tag-chips { margin: 4px 0 2px; display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chip { font-size: 0.6471rem; color: var(--green-dark); background: #eef6f1;
  border: 1px solid #cfe6d8; border-radius: 999px; padding: 1px 8px; }
.stats-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.7647rem; }
.stats-table th, .stats-table td { border-bottom: 1px solid var(--line); padding: 7px 6px;
  text-align: left; white-space: nowrap; }
.stats-table tr.unviewed td { color: #b04a3a; }

/* ---- Phase 2: 代行バナー ---- */
.act-banner { background: #5b4a9e; color: #fff; padding: 6px 12px; font-size: 0.7647rem;
  display: flex; align-items: center; gap: 10px; }
.act-banner[hidden] { display: none; }
.act-banner button { background: #fff; color: #5b4a9e; }

/* ---- チャット(Phase 2a。LINE準拠) ---- */
.chat-room { display: flex; gap: 10px; align-items: center; width: 100%; background: #fff;
  border: 0; border-bottom: 1px solid var(--line); padding: 12px 8px; text-align: left; }
.chat-room-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--green);
  color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.chat-room-prev { color: #666; font-size: 0.7647rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 60vw; }
.chat-unread { background: var(--green); color: #fff; border-radius: 999px; font-size: 0.6471rem;
  padding: 2px 7px; font-weight: 700; }
.chat-pick { display: block; padding: 8px 4px; border-bottom: 1px solid var(--line); }
body.chat-open #tabbar { display: none; }   /* ルーム内は下部タブを消す(A-5) */
/* v0.6.2.1: ルーム表示中はページ本体をスクロールさせない(一覧が端にいる時の上下スワイプが本体へ連鎖し、
   その後しばらく一覧が動かなくなる)。一覧側でも連鎖を止める */
body.chat-open { overflow: hidden; overscroll-behavior: none; }
.chat-root { overscroll-behavior: none; }
.chat-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.chat-root { position: fixed; inset: 0; display: flex; flex-direction: column; background: #8fb2c9; z-index: 15; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
  background: #fff; border-bottom: 1px solid var(--line); }
.chat-title { background: none; border: 0; text-align: left; padding: 4px; min-height: 0; }
.chat-list { flex: 1; overflow-y: auto; padding: 10px 10px 4px; }
.chat-date { text-align: center; margin: 8px 0; }
.chat-date, .chat-sys { font-size: 0.6471rem; color: #fff; }
.chat-date::before { content: ""; }
.chat-date, .chat-sys { display: block; }
.chat-sys { text-align: center; margin: 6px auto; background: rgba(0,0,0,.25); border-radius: 999px;
  padding: 3px 10px; width: fit-content; }
.chat-date { background: rgba(0,0,0,.25); border-radius: 999px; padding: 3px 10px; width: fit-content; margin: 8px auto; }
.chat-row { margin: 6px 0; display: flex; flex-direction: column; align-items: flex-start; width: 100%; }   /* 行は全幅(短い吹き出しでも行のどこを引いても返信。v0.9.7.2) */
.chat-row.mine { align-items: flex-end; }
.chat-name { font-size: 0.6471rem; color: #234; margin: 0 0 2px 6px; }
.chat-line { display: flex; align-items: flex-end; gap: 6px; max-width: 85%; }
.chat-bubble { background: #fff; border-radius: 16px; padding: 8px 12px; font-size: 0.8824rem;
  line-height: 1.45; word-break: break-word; white-space: pre-wrap; user-select: none; -webkit-user-select: none; }
.chat-row.mine .chat-bubble { background: #7ee27a; }
.chat-bubble.revoked { color: #777; font-size: 0.7647rem; background: #eee; }
.chat-img { max-width: 60vw; height: auto; border-radius: 10px; display: block; background: #eee; }
.chat-card { display: block; margin-top: 6px; background: #f4f6f5; border-radius: 10px; padding: 8px 10px;
  color: var(--green-dark); text-decoration: none; font-weight: 700; }
.chat-card small { display: block; font-weight: 400; color: #666; }
.chat-edited { color: #666; font-size: 0.6471rem; margin-left: 4px; }
.chat-meta { display: flex; flex-direction: column; align-items: flex-end; color: #234; font-size: 0.5882rem; line-height: 1.3; }
.chat-row:not(.mine) .chat-meta { align-items: flex-start; }
.chat-reacts { margin: 3px 6px 0; display: flex; gap: 4px; flex-wrap: wrap; }
.chat-react { background: none; border: 0; padding: 0; font-size: 0.6471rem; color: #234; font-weight: 700;
  display: inline-flex; align-items: center; gap: 2px; }
.chat-ricon { height: 22px; width: auto; display: inline-block; vertical-align: middle; }
.chat-ricon-lg { height: 44px; width: auto; display: block; }
/* v0.10.9.0(N-24): スレッドの札。返信した人のアイコン(新しい順に最大 3 人。先頭=最新を上に重ねる)+「+N」+「N件の返信」。名前があれば上に「💬 名前」(N-23) */
.chat-thread-pill { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 85%; margin: 4px 6px 0;
  padding: 5px 10px 5px 6px; background: rgba(255,255,255,.94); border: 1px solid rgba(0,0,0,.06); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); min-height: 0; text-align: left; color: #234; }
.chat-thread-name { max-width: 60vw; padding-left: 4px; font-size: 0.7059rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread-row { display: flex; align-items: center; gap: 6px; }
.chat-thread-avs { display: inline-flex; align-items: center; }
.chat-thread-av { position: relative; border: 2px solid #fff; box-sizing: content-box; }
.chat-thread-av + .chat-thread-av { margin-left: -8px; }
.chat-thread-av:nth-child(1) { z-index: 3; } .chat-thread-av:nth-child(2) { z-index: 2; } .chat-thread-av:nth-child(3) { z-index: 1; }
.chat-thread-more { font-size: 0.6471rem; font-weight: 700; color: #456; }
.chat-thread-count { font-size: 0.7647rem; font-weight: 700; color: var(--green-dark); }
.chat-thread-go { font-weight: 700; color: #89a; }
/* v0.10.9.1(9/26 の確認での指摘): 他の人の投稿の札は右に寄せ、左の「└」の線で本文とつなぐ(続けて投稿したように見えないように)。自分の投稿の札はそのまま */
.chat-row:not(.mine) > .chat-thread-pill { position: relative; margin-left: 30px; margin-top: 2px; }
.chat-row:not(.mine) > .chat-thread-pill::before { content: ""; position: absolute; left: -19px; top: -9px; width: 12px; height: 26px; pointer-events: none;
  border-left: 2px solid rgba(255,255,255,.9); border-bottom: 2px solid rgba(255,255,255,.9); border-bottom-left-radius: 10px; }
/* v0.10.9.0(N-23): スレッドの見出し(名前)。変えられる人には ✎ */
.chat-thread-title { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chat-thread-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread-edit { color: var(--muted); font-size: 0.7647rem; flex: none; }
.chat-thread-edit[hidden] { display: none; }
.chat-draft-thread { font-weight: 400; color: var(--muted); font-size: 0.7647rem; }
.chat-pick-thread { font-weight: 700; }
.chat-barbox { flex-shrink: 0; }   /* v0.10.9.0: 入力バーの部品(ルーム・スレッド共通) */
.chat-more { display: block; margin: 4px auto 10px; background: rgba(255,255,255,.7); border: 0; border-radius: 999px; font-size: 0.7059rem; padding: 6px 12px; min-height: 0; }
.chat-bar { display: flex; align-items: flex-end; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid var(--line); }
.chat-icon { background: none; border: 0; font-size: clamp(20px, 1.2941rem, 25px); padding: 6px 5px; min-height: 40px; }   /* v0.9.7.2: 20〜25px で追従 */
.chat-input { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line); border-radius: 18px;
  padding: 9px 12px; font-size: max(16px, 0.9412rem); max-height: 40vh; line-height: 1.4; overflow-y: auto; }  /* 16px未満だとiOSがフォーカス時に拡大する。v0.9.5.0: 上限 120px→画面の40%(長文) */
/* v0.9.6.0(M-9/M-10): 通知の設定。iPhone の「設定」風のリストとトグル */
.notify-page h2 { margin: 0 0 0 6px; font-size: 1.0588rem; }
.ios-page { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.ios-group { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ios-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; }
.ios-row + .ios-row, .ios-group > .ios-sub { border-top: 1px solid var(--line); }
.ios-title { font-size: 1rem; }
.ios-sub { font-size: 0.7647rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.ios-group > .ios-sub { padding: 8px 14px; }
.ios-warn { color: #b04a3a; }
.ios-sub button.link { background: none; border: 0; color: var(--green); text-decoration: underline; padding: 0 4px; font-size: 0.7647rem; min-height: 0; }
.ios-switch { position: relative; width: 51px; height: 31px; flex: none; }
.ios-toggle { position: absolute; inset: 0; margin: 0; opacity: 0; width: 100%; height: 100%; }
.ios-knob { position: absolute; inset: 0; border-radius: 16px; background: #e9e9ea; transition: background .2s; pointer-events: none; }
.ios-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .2s; }
.ios-toggle:checked + .ios-knob { background: #34c759; }
.ios-toggle:checked + .ios-knob::after { transform: translateX(20px); }
.ios-toggle:disabled + .ios-knob { opacity: .5; }
.ios-toggle:focus-visible + .ios-knob { outline: 2px solid var(--green); outline-offset: 2px; }
/* 第4弾(v0.9.8.0): 人のシート・送り先の選択・個別チャットの印・プロフィール */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; flex: none; }
.avatar-img { object-fit: cover; background: #ddd; }
/* v0.9.9.0(N-1): 吹き出しの左のアイコン。N-5: アプリ内バナー */
.chat-who { display: flex; align-items: flex-end; gap: 6px; }
.chat-avatar { cursor: pointer; margin-bottom: 2px; }
#inBanner { position: fixed; top: calc(6px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; z-index: 60; }
#inBanner[hidden] { display: none; }
.in-banner { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); animation: bannerIn .2s ease-out; cursor: pointer; }
.in-banner-title { display: block; font-size: 0.8824rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-banner-body { font-size: 0.8235rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes bannerIn { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
/* v0.10.1.0: 送信待ちの常時バナー(返答まで消えない)と入力欄上の「送信待ち」 */
#pendBanner { position: fixed; top: calc(6px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; z-index: 59; }
.in-banner.pend { background: #fff7e0; border-color: #e6c46a; }
.pend-icon { font-size: 22px; }
.chat-sched-link.pending { color: #b04a3a; }
.person-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.person-name { font-size: 1.0588rem; }
.person-action { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 6px 0; font-size: 1rem; color: var(--text); text-decoration: none; }
.pick-list { max-height: 50vh; overflow-y: auto; margin: 8px 0; }
.pick-sec { font-size: 0.7059rem; color: var(--muted); margin: 8px 0 4px; }
.pick-item { display: flex; align-items: center; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; font-size: 0.9412rem; }
.chat-direct-tag { font-size: 0.6471rem; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; margin-left: 6px; }
.share-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.vis-list { display: flex; flex-direction: column; gap: 4px; }
.vis-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.vis-item.on { background: #e9f4ef; }
.chat-name { -webkit-touch-callout: none; }
/* v0.10.0.0(M-8/M-11): 予約送信 */
.chat-sched-link { display: block; width: 100%; background: #fff; border: 0; border-top: 1px solid var(--line); color: var(--green); font-size: 0.7647rem; font-weight: 700; padding: 6px 12px; text-align: left; min-height: 0; }
.chat-sched-link[hidden] { display: none; }
.seg { display: flex; gap: 6px; margin: 4px 0 8px; }
.seg-btn { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: 0.9412rem; }
.seg-btn.on { background: var(--green); color: #fff; border-color: var(--green); }
.seg-btn:disabled { opacity: .5; }
.sched-when { margin-top: 4px; }
.sched-when .row { align-items: center; }
.sched-actions { margin-top: 18px; }   /* v0.10.8.2: 日時の欄とボタンの間は、切り替えと日時の間(8px)より広く */
.sched-when input, .sched-when select { flex: 1; min-width: 0; }
.sched-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.sched-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; }
.sched-item.paused { opacity: .7; }
.sched-text { white-space: pre-wrap; word-break: break-word; font-size: 0.9412rem; margin: 4px 0; }
.sched-pending { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; max-height: 40vh; overflow-y: auto; }
.check-line { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 0.8824rem; }   /* v0.9.8.1: チップの枠なし・入力欄と同じ左端 */
.check-line input { width: 20px; height: 20px; margin: 0; }
.card > label + select, .card > label + input[type=tel] { margin-bottom: 4px; }
.card > select { margin-top: 4px; }
.worker { cursor: pointer; }
/* v0.9.7.0(N-9): 吹き出しの右スワイプで返信 */
.swipe-act { position: relative; touch-action: pan-y; }   /* 横方向は JS(touchmove の preventDefault)で受ける */
.swipe-hint { position: absolute; right: -28px; top: 50%; transform: translateY(-50%); opacity: 0; color: var(--green); font-size: 19px; pointer-events: none; }
/* v0.9.5.0(M-1/M-7/M-2): 入力バー左のアイコン群・畳みボタン・宛先(TO)・下書きの目印・残り字数 */
.chat-tools { display: flex; align-items: flex-end; gap: 0; flex: none; }
.chat-bar .chat-input { min-width: 96px; }
/* 文字サイズが大きい端末(html が 20px 以上)ではアイコンを常に「‹」に畳み、開いた時は横スクロール(v0.9.7.1) */
.chat-bar.compact .chat-tools { max-width: 45vw; overflow-x: auto; }
.chat-tools[hidden] { display: none; }
.chat-icon { position: relative; }
.chat-to-btn { font-size: clamp(13px, 0.7647rem, 15px); font-weight: 800; color: var(--green); letter-spacing: .02em; }
.chat-expand { font-size: clamp(24px, 1.5294rem, 28px); color: var(--green); padding: 2px 10px; flex: none; }
.chat-dot { position: absolute; top: 6px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #e0533f; }
.chat-dot[hidden] { display: none; }
.chat-counter { font-size: clamp(11px, 0.7059rem, 14px); color: var(--muted); text-align: right; padding: 2px 12px 0; background: #fff; }
.chat-counter.over { color: #b04a3a; font-weight: 700; }
.chat-to { font-size: 0.7059rem; font-weight: 700; color: #0b4f8a; margin-bottom: 2px; }
.chat-to.tome { color: #fff; background: #0b4f8a; display: inline-block; padding: 1px 8px; border-radius: 999px; }
.chat-to-all { font-size: 0.7059rem; color: #0b4f8a; margin: 1px 0 3px; }   /* v0.9.8.2: 一斉送信の宛先一覧「(TO ○さん、TO △さん)」 */
.chat-to-list { display: flex; flex-direction: column; gap: 4px; max-height: 45vh; overflow-y: auto; margin: 8px 0; }
.chat-to-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; font-size: 0.9412rem; }
.chat-to-item.on { background: #e9f4ef; }
.chat-to-item input { width: 22px; height: 22px; }
.chat-draft-tag { color: #b04a3a; font-size: 0.7059rem; margin-right: 4px; }
.chat-stealth-tag { display: inline-block; margin-left: 6px; font-size: 0.6471rem; color: #6b5b95; background: #efeaf8; border-radius: 8px; padding: 0 6px; font-weight: normal; }   /* v0.10.4.1 */
.chat-text .chat-link { color: #1a5fb4; text-decoration: underline; word-break: break-all; }   /* v0.10.4.0: 本文の URL */
.chat-moved-from { font-size: 0.7059rem; color: var(--muted); margin-bottom: 2px; }   /* N-4(v0.10.3.0) */
.chat-warp-list { max-height: 50vh; overflow-y: auto; }
/* v0.10.6.0(§F-29): ステルスのルームでリアクションを選ぶ欄の直下の注意書き */
.chat-stealth-note { margin: 2px 4px 8px; color: var(--muted); font-size: 0.7647rem; line-height: 1.4; }
/* v0.10.5.0(I-50 c): ワープの確認(返信・リアクションも移すか) */
.chat-warp-desc { margin: 6px 0 4px; color: var(--muted); font-size: 0.8235rem; }
.chat-sheet-item.chat-warp-go { text-align: center; background: var(--green); color: #fff; font-weight: bold; }
.chat-sheet-item.chat-warp-go:disabled { opacity: .6; }
.rx-table { width: 100%; border-collapse: collapse; font-size: 0.7647rem; }   /* N-16(v0.10.3.0) */
.rx-table th, .rx-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.rx-table th:first-child, .rx-table td:first-child { text-align: left; white-space: normal; }
.rx-table tr.ref td { color: var(--muted); }
.rx-wrap { overflow-x: auto; }
.chat-unreplied-tag { color: #fff; background: #b04a3a; border-radius: 8px; padding: 0 6px; font-size: 0.6471rem; margin-right: 4px; }   /* M-6(v0.10.2.0) */
.chat-draft-sec { font-size: 0.7059rem; color: var(--muted); margin: 10px 0 4px; }
.chat-draft-other { display: block; width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.chat-draft-line { font-size: 0.7647rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-draft-preview { white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow-y: auto; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 8px 0; font-size: 0.8824rem; }
.chat-send { background: var(--green); color: #fff; border: 0; border-radius: 50%; width: 40px; height: 40px; flex: none;
  min-height: 40px; padding: 0; font-size: clamp(17px, 1.0588rem, 20px); }
.chat-fail { color: #b04a3a; font-size: 0.7059rem; margin: 2px 4px; }
.chat-mention { position: absolute; left: 8px; right: 60px; bottom: 64px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 5; }
.chat-mention[hidden] { display: none; }
.chat-mention-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; }
.chat-overlay { position: fixed; inset: 0; z-index: 50; }
.chat-overlay[hidden] { display: none; }
.chat-sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; }
.chat-sheet { width: 100%; background: #fff; border-radius: 16px 16px 0 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.chat-react-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; }
.chat-react-btn { background: #f4f6f5; border: 1px solid var(--line); border-radius: 12px; padding: 4px; min-height: 0; }
.chat-react-btn.on { background: #e5f6ea; border-color: var(--green); }
.chat-sheet-item { display: block; width: 100%; text-align: left; background: #f4f6f5; border: 0; border-radius: 12px;
  padding: 13px; margin-top: 6px; font-size: 0.8824rem; }
.chat-sheet-item.danger { color: #b04a3a; }
.chat-sheet-item.cancel { text-align: center; color: #666; background: #fff; border: 1px solid var(--line); }
.chat-reactor { padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 0.8235rem; }
.chat-reactor-time { display: flex; align-items: center; gap: 6px; }   /* N-3(v0.10.2.0): 1人1行+時刻(管理者) */
.chat-reactor-time small { color: var(--muted); font-size: 0.7059rem; text-align: right; flex: none; max-width: 62%; }
.chat-editor-wrap { position: absolute; inset: 0; background: #fff; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 12px;
  display: flex; flex-direction: column; gap: 10px; }
.chat-editor { flex: 1; font-size: 0.9412rem; padding: 12px; border: 1px solid var(--line); border-radius: 10px; resize: none; }
.chat-row.root .chat-bubble { border: 2px solid var(--green); }
body.chat-open #topbar { display: none; }

/* ---- チャット動画(v0.5.1.0) ---- */
.chat-video-wait { color: #555; font-size: 0.7647rem; background: #f1f3f2; border-radius: 8px; padding: 10px 12px; }
.chat-video-wait.err { color: #b04a3a; }
.chat-progress { position: absolute; left: 12px; right: 12px; bottom: 72px; background: #fff; border-radius: 10px;
  padding: 8px 12px; font-weight: 700; color: var(--green-dark); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.chat-progress[hidden] { display: none; }
video.chat-img { background: #000; }

/* ---- Phase 2-2b(1/3): タスク・アクティビティ・ナビバッジ(v0.6.0.0) ---- */
.nav-badge { display: inline-block; margin-left: 5px; background: #e0533f; color: #fff; border-radius: 999px;
  font-size: 0.6471rem; line-height: 16px; min-width: 16px; padding: 0 5px; text-align: center; font-weight: 700; }
.chat-pills { display: flex; gap: 8px; margin: 0 0 10px; }
.chat-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; color: #123; text-decoration: none; font-size: 0.8235rem; font-weight: 700; }
.chat-task-tag { display: inline-block; background: #fdf6e3; color: #7a5b00; border: 1px solid #efdca4;
  border-radius: 999px; font-size: 0.6471rem; padding: 0 6px; margin-right: 6px; }
.chat-taskbar { display: block; width: 100%; text-align: left; background: #fff8e1; color: #5a4300;
  border: 0; border-bottom: 1px solid #efdca4; border-radius: 0; padding: 8px 12px; font-size: 0.7647rem; min-height: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-taskbar[hidden] { display: none; }
.chat-taskbar b { margin: 0 2px; }
.chat-taskbar small { color: #8a6d00; }
.chat-sheet-tall { max-height: 80vh; overflow-y: auto; }
.chat-hl { animation: chat-hl 2.5s ease-out; }
@keyframes chat-hl { 0%, 60% { background: rgba(255, 213, 79, .45); border-radius: 12px; } 100% { background: transparent; } }
.task-row { display: flex; align-items: center; gap: 8px; background: #fff; border-bottom: 1px solid var(--line); padding: 10px 8px; }
.task-link { background: none; border: 0; text-align: left; padding: 4px; min-height: 0; color: #123; font-size: 0.8824rem; }
.task-link small { color: #666; display: block; font-size: 0.7059rem; }
.task-room { color: #666; font-size: 0.7059rem; }
.task-btns { display: flex; flex-direction: column; gap: 4px; }
.task-cand { background: #f7f7f4; border-radius: 10px; padding: 6px 8px; margin: 6px 0; }
.task-person { padding: 4px 0; }
.act-row { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 10px 8px; color: #123; }
.act-row.unread { background: #eef7f2; }
.act-type { display: inline-block; font-size: 0.6471rem; background: var(--green); color: #fff; border-radius: 999px; padding: 1px 8px; margin-right: 6px; }
.act-prev { color: #333; font-size: 0.8235rem; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9412rem; line-height: 1.6; margin: 10px 0 0; }   /* お知らせの全文(v0.9.2.5) */
.date-field { width: 100%; font-size: 1.1765rem; letter-spacing: 2px; text-align: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.desig-person { display: flex; align-items: center; gap: 4px; padding: 3px 0; font-size: 0.8824rem; }
.desig-person input { width: 20px; height: 20px; }
.task-cand.fixed { background: #eef7f2; }

/* ---- v0.6.0.2 長押し時のブラウザ動作(文字選択・コピー/調べるのメニュー)を無効化。A-10(本文コピー禁止)とも整合 ---- */
/* v0.6.0.3: ルーム表示中は画面全体(シートの背景を含む)を選択不可に。上側の投稿を長押しすると
   シートの開いた後の判定点が背景(.chat-sheet-back)になり、そこが選択可だったため文字選択が起きていた */
body.chat-open, body.chat-open *, .chat-list, .chat-list *, .chat-sheet, .chat-taskbar, .chat-card, .chat-overlay, .chat-sheet-back { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* マニュアル(縦フィード)の長押し2倍速: iOSの長押し(選択・コールアウト)が pointercancel を起こして倍速が止まるため同じ対策 */
body.feed-open, body.feed-open *, .feed-cell, .feed-cell * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.chat-list img, .chat-list video { -webkit-user-drag: none; pointer-events: auto; }
.chat-input, .chat-editor, .date-field, input, textarea { -webkit-user-select: text; user-select: text; }
.list-ctl { margin-bottom: 8px; font-size: 0.8235rem; color: #333; }
.list-done-head { margin: 14px 0 6px; font-size: 0.8824rem; color: #666; }

/* ---- Phase 2-2b(2/3): ブックマーク・検索(v0.6.1.0) ---- */
.search-input { flex: 1; font-size: 0.9412rem; padding: 10px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.search-panel { display: flex; flex-direction: column; gap: 8px; }
.search-foot { padding: 6px 4px; color: #555; }
.search-text { white-space: normal; }
mark { background: #ffe66d; color: inherit; padding: 0 1px; border-radius: 3px; }

/* ---- 左スワイプ操作(v0.6.1.1) ---- */
.swipe-wrap { position: relative; overflow: hidden; touch-action: pan-y; }
/* 操作ボタンは行を引き始めた時だけ描く(常に裏に置くと行の角の丸みからはみ出して見える。v0.6.1.2) */
.swipe-action { position: absolute; top: 0; bottom: 0; right: 0; width: 84px; border: 0; border-radius: 0; background: #e0533f; color: #fff; font-weight: 700; min-height: 0; visibility: hidden; }
.swipe-wrap.swiping .swipe-action { visibility: visible; }
.swipe-row { position: relative; background: #fff; z-index: 1; width: 100%; margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .swipe-action { opacity: 0; transition: opacity .15s; }
  .swipe-wrap:hover .swipe-action, .swipe-wrap:focus-within .swipe-action { visibility: visible; opacity: 1; z-index: 2; }
  /* 左端のボタン(ピン留め)はマウスでは出さない(一覧のアイコンの上に重なり、押し間違える)。PC はグループ設定の「ピン留め」で */
  .swipe-wrap[data-swipe-side="left"]:hover .swipe-action, .swipe-wrap[data-swipe-side="left"]:focus-within .swipe-action { visibility: hidden; }
}
/* v0.10.7.0(N-19): 左→右に引くと出る左端のボタン(ピン留め)。LINE と同じ向き */
.swipe-action.swipe-action-left { right: auto; left: 0; }
.swipe-action.swipe-pin { background: #3d7fd9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 0.7059rem; }
.swipe-action.swipe-pin .pin-ico { font-size: 1.1765rem; line-height: 1; }
.chat-pin-mark { font-size: 0.7059rem; margin-right: 2px; }
/* 長文の切り詰め(ブックマーク一覧等): flex の子は min-width:0 が無いと縮まない */
.task-row { overflow: hidden; }
/* v0.8.6.1: 一覧のカードは幅を親に固定する。以前は button が内容幅に広がり、長い本文で画面が横に伸びていた。
   さらに iOS は幅が画面を超えたブロックの文字を自動で大きくする(text autosizing)ため、長い依頼だけ文字が大きく見えていた */
.task-link { display: block; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; }
.task-link > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-cand, .task-row { max-width: 100%; overflow: hidden; }
main { overflow-x: hidden; }
/* v0.9.7.3: 一覧系の画面(チャット一覧・シフト)は、中身が短くても画面の下端(タブバーの上)まで広げ、余白でも横スワイプが効くようにする */
.swipe-page { min-height: calc(100dvh - 50px - env(safe-area-inset-top, 0px) - var(--tabbar-h) - var(--sab) - 30px); }
@supports not (height: 100dvh) { .swipe-page { min-height: calc(100vh - 50px - var(--tabbar-h) - var(--sab) - 30px); } }

/* ---- Phase 2-2b(3/3): 背景(B-11。v0.6.2.0)。プリセット8種はグループの取り違え防止のため色味をはっきり変える ---- */
.chat-bg-none { background: #8fb2c9; }   /* 従来の既定色 */
.chat-bg-p1 { background: linear-gradient(160deg, #e8f3ea, #bfe0c6); }
.chat-bg-p2 { background: linear-gradient(160deg, #fdf0e0, #f6cf9e); }
.chat-bg-p3 { background: linear-gradient(160deg, #e6eefb, #b9cdf3); }
.chat-bg-p4 { background: linear-gradient(160deg, #f7e6f0, #e9b7d3); }
.chat-bg-p5 { background: linear-gradient(160deg, #fbf5d6, #efdc86); }
.chat-bg-p6 { background: linear-gradient(160deg, #e3f4f5, #a9dde0); }
.chat-bg-p7 { background: repeating-linear-gradient(45deg, #dfe6ec 0 12px, #cfd9e2 12px 24px); }
.chat-bg-p8 { background: radial-gradient(circle at 20% 20%, #fff 0 4px, transparent 5px) 0 0/36px 36px, #5b6f80; }
.chat-bg-photo { background-size: cover; background-position: center; }
.bg-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.bg-swatch { width: 60px; height: 44px; border: 2px solid var(--line); border-radius: 10px; min-height: 0; padding: 0; font-size: 0.7059rem; color: #333; background-size: cover; background-position: center; }
.bg-swatch.on { border-color: var(--green); box-shadow: 0 0 0 2px #fff inset; }
.bg-photo { background: #fff; }

/* ---- Phase 2-2c(1/2): 管理者の閲覧モード(v0.7.0.0) ---- */
.chat-react.stealth { border-style: dashed; color: #5b4a9e; }
.chat-react.stealth small { margin-left: 2px; font-size: 0.5882rem; }

/* ---- v0.7.1.0: 従業員選択の施設見出し ---- */
.pick-head { margin: 10px 0 4px; font-size: 0.7059rem; color: #666; border-bottom: 1px solid var(--line); }

/* ---- Phase 2-2c(2/2): スクショ共有(v0.7.2.0) ---- */
.shot-preview { display: block; width: 100%; max-height: 40vh; object-fit: contain; background: #8fb2c9; border-radius: 10px; margin: 6px 0; }

/* ---- 画像の拡大表示(v0.7.2.1) ---- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none; }
.lightbox-img { max-width: 100vw; max-height: 100vh; object-fit: contain; transform-origin: center; transition: transform .05s; }
.lightbox-close { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; background: rgba(255,255,255,.2); color: #fff; border: 0; border-radius: 999px; width: 40px; height: 40px; min-height: 0; font-size: 1.0588rem; }

/* ---- Phase 3-2a: シフトタブのカレンダー(D-1)・1日メモ(D-3)。v0.8.2.0 ---- */
.scal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 10px; }   /* minmax(0,…): 中身が長くても列幅を変えない(v0.9.7.1) */
.scal .head { text-align: center; font-size: 0.6471rem; color: var(--muted); padding: 2px 0; }
.scal .head.sun, .scal .day.sun .num { color: var(--ng); }
.scal .head.sat, .scal .day.sat .num { color: #2b6cb0; }
.scal .day { border: 1px solid var(--line); border-radius: 10px; min-height: 64px; padding: 3px 3px 2px;
  background: #fff; display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; min-width: 0; overflow: hidden;
  font-size: 0.6471rem; line-height: 1.25; -webkit-tap-highlight-color: transparent; }
.scal .day > * { min-width: 0; max-width: 100%; }
.scal .day.empty { border: 0; background: transparent; }
/* N-13(v0.9.7.0): 予定メモ(セルの下段の一言・日付なしのリスト) */
.scal .day .memo { display: block; font-size: clamp(9px, 0.5882rem, 11px); color: #6b7568; line-height: 1.2; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-memo-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.memo-box.mine-memo { background: #f3f6ef; }
.plan-memos summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.plan-memo-count { color: var(--muted); font-weight: 400; margin-left: 4px; }
.plan-memo-list { margin: 6px 0; }
.plan-memo { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.plan-memo:last-child { border-bottom: 0; }
.scal .day.past { background: #f3f2ed; }
.scal .day.today .num { background: var(--green); color: #fff; border-radius: 999px; }
.scal .day.sel { outline: 3px solid var(--green); outline-offset: -1px; }
.scal .num { font-weight: 700; font-size: 0.7647rem; width: 22px; height: 22px; line-height: 22px; text-align: center; display: inline-block; }
.scal .me { display: block; border-radius: 5px; padding: 1px 3px; font-weight: 700; color: #fff; background: var(--green);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scal .me.tentative { background: #9aa39f; }
.scal .foot { margin-top: auto; color: var(--muted); font-size: 0.5882rem; display: flex; justify-content: space-between; }
.day-panel .fac-head { font-weight: 700; margin: 10px 0 4px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.day-panel .worker { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 0.8824rem; }
.day-panel .worker.mine { background: #eef7f2; font-weight: 700; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.day-panel .wtime { color: #333; white-space: nowrap; }
.memo-box { background: #fff8e1; border: 1px solid #efdca4; color: #5a4300; border-radius: 10px; padding: 8px 10px; margin: 6px 0 8px;
  white-space: pre-wrap; font-size: 0.8235rem; }
.memo-edit { width: 100%; font-size: 0.9412rem; padding: 10px; border: 1px solid var(--line); border-radius: 10px; resize: none; min-height: 64px; }

/* ---- Phase 3-2b: ボタン式の予定登録(D-6)。v0.8.4.0 ---- */
.type-bar-pad { padding-bottom: 150px; }
.type-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--sab)); z-index: 9;
  background: #fff; border-top: 1px solid var(--line); padding: 6px 10px 8px; box-shadow: 0 -4px 14px rgba(0,0,0,.06); }
.type-hint { text-align: center; margin: 0 0 6px; font-size: 0.7059rem; }
.type-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.type-btn { min-width: 64px; min-height: 48px; border-radius: 12px; border: 2px solid var(--line); background: #fff;
  font-weight: 700; font-size: 0.8824rem; padding: 4px 10px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.type-btn small { font-weight: 400; font-size: 0.6471rem; color: var(--muted); }
.type-btn.ok { border-color: var(--ok); color: var(--ok); }
.type-btn.undecided { border-color: var(--und); color: var(--und); }
.type-btn.ng { border-color: #888; color: #555; }
.type-btn.pl { border-color: #7b4fb8; color: #7b4fb8; }
.type-btn.clear { border-style: dashed; color: var(--muted); }
.type-btn:disabled { opacity: .4; }
.scal .day .st { display: block; font-weight: 700; font-size: 0.6471rem; line-height: 1.25; margin-top: 2px; }
.scal .day .st.ok { color: var(--ok); } .scal .day .st.und { color: var(--und); }
.scal .day .st.ng { color: #666; } .scal .day .st.pl { color: #7b4fb8; }
.scal .day .st .t { display: block; font-weight: 400; color: #333; }
.time-field { width: 78px; text-align: center; }
/* N8/A-10(v0.8.4.1): アルバイトの画面では長押しの文字選択・コピー・コールアウトを止める。入力欄は選択可 */
body.no-copy, body.no-copy * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.no-copy input, body.no-copy textarea, body.no-copy [contenteditable] { -webkit-user-select: text; user-select: text; }

/* ---- Phase 3-2c: 管理者の割当編集(D-2/D-4/D-5)。v0.8.5.0 ---- */
.assign-row { display: flex; align-items: center; gap: 8px; padding: 11px 8px; background: #fff; border-bottom: 1px solid var(--line); min-height: 48px; }
.assign-row .nm { font-weight: 700; flex: 1; min-width: 0; }
.assign-row .tm { font-variant-numeric: tabular-nums; }
.assign-row .decl { font-size: 0.6471rem; color: var(--muted); display: block; font-weight: 400; }
.cand-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cand-btn { min-height: 48px; border: 2px solid var(--ok); color: var(--ok); background: #fff; border-radius: 12px; padding: 4px 12px;
  font-weight: 700; font-size: 0.8824rem; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.cand-btn small { font-weight: 400; font-size: 0.6471rem; color: var(--muted); }
.cand-btn.und { border-color: var(--und); color: var(--und); }
.cand-btn.ng, .cand-btn.none { border-color: #aaa; color: #555; }
.cand-more summary { cursor: pointer; color: var(--muted); font-size: 0.7647rem; padding: 6px 0; }
.memo-inline { margin: 6px 0 10px; }
.memo-inline textarea { min-height: 48px; }

/* v0.8.5.1: ボタン連打で iOS がダブルタップ拡大しないようにする(ピンチ拡大は残す) */
html, body { touch-action: manipulation; }

/* ---- E-3 ようこそ / E-4(Web版) 起動演出。v0.8.6.0 ---- */
body.welcome-open #topbar, body.welcome-open #tabbar { display: none; }
.wl-root { position: fixed; inset: 0; z-index: 30; background: linear-gradient(160deg, var(--green) 0%, #0f4a3a 100%); color: #fff; }
.wl-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wl-track::-webkit-scrollbar { display: none; }
.wl-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 24px 28px calc(64px + var(--sab)); box-sizing: border-box; }
.wl-slide h1 { color: #fff; font-size: 1.6471rem; margin: 12px 0 8px; }
.wl-slide p { white-space: pre-line; font-size: 0.9412rem; line-height: 1.6; opacity: .92; }
.wl-logo, .splash-logo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wl-brand { font-size: 1.7647rem; font-weight: 800; letter-spacing: .04em; }
.wl-tag { font-size: 0.7647rem; opacity: .85; letter-spacing: .1em; }
/* v0.10.9.3: アプリのロゴ(白い角丸。ホーム画面のアイコンと同じ見え方) */
.app-mark { display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 24px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); margin-bottom: 10px; }
.app-mark img { height: 80px; width: auto; display: block; }
.wl-tabs { display: flex; gap: 14px; margin: 18px 0; }
.wl-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; }
.wl-tab svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wl-tab b { font-size: 0.8235rem; } .wl-tab small { font-size: 0.6471rem; opacity: .85; }
.wl-slide .card { color: var(--text); text-align: left; width: 100%; max-width: 360px; }
.wl-start { margin-top: 18px; min-width: 200px; background: #fff; color: var(--green); border-color: #fff; font-size: 1rem; }
.wl-dots { position: absolute; left: 0; right: 0; bottom: calc(22px + var(--sab)); display: flex; justify-content: center; gap: 8px; }
.wl-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.4); }
.wl-dot.on { background: #fff; }
.wl-skip { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 1; background: transparent; border: 0; color: rgba(255,255,255,.85); font-size: 0.8235rem; min-height: 40px; }
#splash { position: fixed; inset: 0; z-index: 100; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center;
  animation: splash-out .35s ease-in .95s forwards; pointer-events: none; }
#splash .splash-logo { animation: splash-in .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes splash-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
.next-shift .next-memo { display: block; font-weight: 400; font-size: 0.7647rem; margin: 6px 0 0; padding: 6px 8px; }
.next-shift { align-items: flex-start; }

/* 交通費の申請(L-2。v0.9.3.0) */
.exp-row { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 4px; font: inherit; color: var(--text); cursor: pointer; }
.exp-row.filed { background: #f6f8f7; }
.exp-row .row { gap: 6px; }
.exp-unfiled { color: #b23; font-weight: 700; font-size: 0.7647rem; }
.exp-legs { font-size: 0.7647rem; color: #333; margin-top: 3px; }
.exp-table tr.exp-person { cursor: pointer; }
.exp-table td, .exp-table th { white-space: nowrap; }
.exp-link { display: block; width: 100%; text-align: left; margin-top: 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px;
  background: #fff; font: inherit; font-size: 0.8235rem; color: var(--text); cursor: pointer; min-height: 48px; }
.exp-link.filed { border-style: solid; }
.exp-expired { color: var(--muted); font-weight: 700; font-size: 0.7647rem; }
.exp-row.closed { opacity: .7; }
.exp-closed { background: #fff4e5; border: 1px solid #f0c98d; border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 0.8235rem; }
.exp-custom { border: 1px dashed var(--line); border-radius: 10px; padding: 8px; margin: 8px 0; }
/* v0.10.7.1(BG-2): 交通費の保存中は、シートのボタンを薄くして押せないことを示す */
.saving .type-btn, .saving button { opacity: .55; pointer-events: none; }
/* v0.10.8.0(N-28): TO のシートの個別チャットボタン(チェックと離して右端に) */
.chat-to-dm { margin-left: auto; min-width: 40px; height: 36px; padding: 0 10px; border-radius: 18px; border: 1px solid var(--line); background: #fff; font-size: 1.05rem; }
/* v0.10.8.0(N-30): 取り消し・移動の帯(LINE と同じ中央の帯。.chat-sys の見た目) */
.chat-revoked { max-width: 90%; }
/* v0.10.8.0(N-20): 音ありの自動再生が止められた時の「🔊 タップで音を出す」 */
.feed-sound { display: none; position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 7;
  background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: 10px 18px; font-size: 1rem; }
.feed-cell.need-sound .feed-sound { display: block; }
/* v0.10.8.0(N-21): 管理者の「動画を再生しますか?」。「はい」は押したくなる色(赤・青)を避けた地味な灰褐色(文字は読める濃さ) */
.feed-gate { display: none; position: absolute; inset: 0; z-index: 8; background: rgba(0,0,0,.55);
  flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.feed-cell.gated .feed-gate { display: flex; }
.feed-gate-q { color: #eee; font-size: 1.06rem; }
.feed-gate-yes { background: #cdc6bc; color: #4a433c; border: 0; border-radius: 8px; padding: 10px 36px; font-size: 1rem; box-shadow: none; }
/* v0.10.8.0(N-21): 確認中でも右の いいね・⋯(共有)は押せる(.feed-rail の z-index 20 > .feed-gate の 8) */