/* テツナグ - 社内情報共有アプリ カスタムスタイル */

/* =====================================================
   カラーパレット（デザイントークン）
   ページ背景=青みグレー / カード=白 / 濃い枠線 / 影の
   コントラストを強くして視認性を確保する。
   ===================================================== */
:root {
  /* サーフェス */
  --app-bg: #E7EDF5;
  --surface: #FFFFFF;
  --border-strong: #AEBAC8;
  --divider: #C5CED8;
  --header-border: #B8C3CF;

  /* テキスト */
  --text-main: #0F172A;
  --text-sub: #334155;
  --text-muted: #5B6778;
  --placeholder: #6B7787;

  /* アクセント（既存ブランドカラーを維持しつつ揃える） */
  --green-main: #00A83B;
  --green-dark: #087A34;
  --blue-main: #155EEF;
  --red-main: #DC2626;
  --red-dark: #B91C1C;
  --gray-main: #7B8794;

  /* バッジ */
  --badge-work-bg: #D4F7E0;
  --badge-work-fg: #087A34;
  --badge-work-br: #9EDDB6;
  --badge-tomo-bg: #DCE8FF;
  --badge-tomo-fg: #155EEF;
  --badge-tomo-br: #AFC7FA;
  --badge-other-bg: #E3E8EE;
  --badge-other-fg: #334155;
  --badge-other-br: #C0CAD5;

  /* タブ */
  --tab-active-bg: #DDF7E7;
  --tab-active-fg: #087A34;
  --tab-active-bar: #00A83B;

  /* 入力欄 */
  --input-border: #9EABB9;
  --input-focus: #155EEF;
  --input-focus-shadow: rgba(21, 94, 239, 0.20);

  /* チャット */
  --chat-bg: #E7EDF5;
  --bubble-mine-bg: #D4F7E0;
  --bubble-mine-br: #9EDDB6;
  --bubble-other-bg: #FFFFFF;
  --bubble-other-br: #AEBAC8;

  /* 影・オーバーレイ */
  --shadow-card:
    0 2px 6px rgba(15, 23, 42, 0.16),
    0 8px 20px rgba(15, 23, 42, 0.10);
  --shadow-header: 0 2px 8px rgba(15, 23, 42, 0.10);
  --shadow-focus: 0 0 0 3px var(--input-focus-shadow);
  --overlay-bg: rgba(15, 23, 42, 0.58);
}

html, body { height: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  background: var(--app-bg);
  color: var(--text-main);
}

/* ロゴ (旧:緑色「村田」テキストバッジ。新ブランドではアイコン画像を使用するため、
   後方互換のため class は残し、非表示扱いにする) */
.murata-logo { display: none; }

/* スクロールバー */
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* 案件の内容バッジ */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-work     { background: var(--badge-work-bg);  color: var(--badge-work-fg);  border-color: var(--badge-work-br); }
.badge-tomorrow { background: var(--badge-tomo-bg);  color: var(--badge-tomo-fg);  border-color: var(--badge-tomo-br); }
.badge-other    { background: var(--badge-other-bg); color: var(--badge-other-fg); border-color: var(--badge-other-br); }

/* アクティブメニュー */
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 8px;
  color: #4b5563; transition: all .15s; cursor: pointer;
  font-size: 14px; font-weight: 500;
}
.menu-item:hover { background: #F1F5F9; color: var(--green-dark); }
.menu-item.active {
  background: linear-gradient(90deg, #D4F7E0, #EAF9EF);
  color: var(--green-dark);
  font-weight: 600;
}
.menu-item i { width: 20px; text-align: center; }

/* チャットバブル（送信者寄せ版）
   - 自分: 右寄せ＋緑、他人: 左寄せ＋白
   - 短文「本社」「OK」「了解」が縦に割れない最小幅
   - 長文は親の最大幅(85%)内で自然に折り返す */
.chat-bubble {
  display: inline-block;
  width: fit-content;
  min-width: 72px;          /* 短い日本語が縦割れしない最小幅 */
  max-width: 100%;          /* 親(chat-msg-bubble-wrap)の幅を超えない */
  padding: 10px 14px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.55;
  box-sizing: border-box;
  text-align: left;         /* 中身の文字は常に左寄せ（吹き出し全体だけ左右に寄せる） */
}
.chat-bubble.mine {
  background: var(--bubble-mine-bg);
  color: var(--text-main);
  border: 1px solid var(--bubble-mine-br);
  border-bottom-right-radius: 4px;
}
.chat-bubble.others {
  background: var(--bubble-other-bg);
  color: var(--text-main);
  border: 1px solid var(--bubble-other-br);
  border-bottom-left-radius: 4px;
}

/* チャット本文：1メッセージ = 1行（左右に寄せる）
   - .is-own  → 右寄せ（自分）
   - .is-other → 左寄せ（他人）
   - PC でも左右の区別が分かるよう .chat-msg-inner で表示領域を制限 */
.chat-msg-row {
  display: flex;
  width: 100%;
  padding: 0 12px;          /* 画面端に密着させない左右余白(12〜16px) */
  box-sizing: border-box;
}
.chat-msg-row.is-own {
  justify-content: flex-end;
}
.chat-msg-row.is-other {
  justify-content: flex-start;
}
/* 吹き出しブロック本体（メタ・吹き出し・添付・アイコンをまとめる縦コンテナ）
   - 自分: 右端に寄り、子要素も右揃え
   - 他人: 左端に寄り、子要素も左揃え
   - max-width で吹き出し最大幅を制御（チャット表示領域の 85%） */
.chat-msg-inner {
  display: flex;
  flex-direction: column;
  max-width: 85%;           /* チャット領域の85%まで */
  min-width: 0;             /* flex 子要素が縮めるように */
  box-sizing: border-box;
}
.chat-msg-row.is-own  .chat-msg-inner { align-items: flex-end; }
.chat-msg-row.is-other .chat-msg-inner { align-items: flex-start; }

/* 吹き出し本体ラッパ：max-content で吹き出し幅に合わせる（メタやアイコンは別行） */
.chat-msg-bubble-wrap {
  display: flex;
  max-width: 100%;
}
/* メタ情報（氏名・日時）・編集削除行は吹き出しの上下に別要素として配置 */
.chat-msg-meta,
.chat-msg-actions {
  max-width: 100%;
}
.chat-msg-row.is-own  .chat-msg-meta,
.chat-msg-row.is-own  .chat-msg-actions { text-align: right; }
.chat-msg-row.is-other .chat-msg-meta,
.chat-msg-row.is-other .chat-msg-actions { text-align: left; }

/* 添付ファイル領域：送信者側に寄せる */
.chat-msg-attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
}
.chat-msg-row.is-own  .chat-msg-attachments { align-items: flex-end; }
.chat-msg-row.is-other .chat-msg-attachments { align-items: flex-start; }
.chat-msg-attachments img {
  max-width: 100%;
  height: auto;
  display: block;
}
.chat-msg-attachments .attach-card {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
}

/* PC では左右の区別がより分かりやすいよう chat-messages を読みやすい最大幅に */
@media (min-width: 768px) {
  .chat-messages > * {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =============================================================
   チャット内 日付区切り（デイセパレータ）
   -------------------------------------------------------------
   仕様:
     - チャット中央に配置（PC・スマホ共通）
     - 薄いベージュ系背景 / 濃いグレー文字 / 横長カプセル型
     - 横幅は文字量に合わせ、必要以上に広げない（inline-block + max-content 相当）
     - メッセージとの上下余白を確保
     - PC 用の .chat-messages > * { max-width:860px; margin:auto } が
       このコンテナにも効くため、860px センターレーンの中央に収まる。
       flex + justify-content:center でスマホ幅でも常に中央。
     - data-msg-id を持たないので既存の返信ジャンプ/既読/メニュー処理と衝突しない。
   ============================================================= */
.chat-day-separator {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 12px 12px;    /* 上下にメッセージとの余白 */
  margin: 4px 0;
  box-sizing: border-box;
  /* .chat-messages の space-y-3 (縦12pxギャップ) に加え、
     区切り自身の padding で更に間隔を確保する */
}
.chat-day-separator-pill {
  display: inline-block;
  max-width: 90%;                    /* 極端な文字量でもレイアウトを崩さない */
  padding: 4px 14px;
  border-radius: 9999px;             /* 完全なカプセル（丸みのある両端） */
  background-color: #f5efe4;         /* 薄いベージュ */
  color: #4b5563;                    /* 濃いグレー (tailwind gray-600 相当) */
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;               /* "2026年7月6日（月）" を折り返さない */
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  user-select: none;                 /* 誤選択防止 */
}

/* ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  font-weight: 600; font-size: 14px;
  transition: all .15s; cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--green-main); color: #FFFFFF; border-color: var(--green-dark); }
.btn-primary:hover:not(:disabled) { background: var(--green-dark); }
.btn-secondary { background: var(--surface); color: var(--text-main); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: #F1F5F9; }
.btn-danger { background: var(--red-main); color: #FFFFFF; border-color: var(--red-dark); }
.btn-danger:hover:not(:disabled) { background: var(--red-dark); }
/* 「表示」ボタン専用色（青系）。見積書タブなどで再利用可能。 */
.btn-view { background: #155EEF; color: #FFFFFF; border-color: #1D4ED8; }
.btn-view:hover:not(:disabled) { background: #1D4ED8; }
.btn-ghost { background: transparent; color: var(--text-sub); }
.btn-ghost:hover:not(:disabled) { background: #F1F5F9; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11px; border-radius: 6px; }

/* =============================================================
   見積書タブ（0014）
   ============================================================= */
.estimate-upload { border: 1px solid var(--border-strong); background: #FFFFFF; }
.estimate-file-row { padding: 4px 0; }
.estimate-file-input { max-width: 100%; }
.estimate-file-summary { word-break: break-all; }
.estimate-card { border: 1px solid var(--border-strong); background: #FFFFFF; }
.estimate-card .estimate-actions .btn { min-height: 34px; }
.estimate-table th { font-weight: 600; }
/* 一覧のアクションボタンが小さすぎないよう最低幅を確保 */
.estimate-actions .btn { min-height: 34px; }
/* スマホでボタンがはみ出さないよう flex-wrap の各ボタンに余白 */
@media (max-width: 640px) {
  .estimate-file-row { flex-direction: column; align-items: stretch; }
  .estimate-file-input { width: 100%; }
  .estimate-row-remove { align-self: flex-end; }
}
.btn-icon {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
}

/* フォーム */
.input, .select, .textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text-main);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--placeholder); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: var(--shadow-focus);
}
.textarea { resize: vertical; min-height: 80px; }
.label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 6px;
}
.label .required {
  color: var(--red-main);
  margin-left: 4px;
}

/* カード：白背景・濃い枠線・明確な影で背景から浮き上がらせる */
.card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s, transform .15s, border-color .15s;
  color: var(--text-main);
}
.card-hover:hover {
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.20),
    0 10px 24px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
  border-color: #8FA0B4;
}

/* モーダル */
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--overlay-bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  padding: 16px;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.28),
    0 24px 60px rgba(15, 23, 42, 0.20);
  color: var(--text-main);
}

/* トースト */
.toast {
  position: fixed; bottom: 20px; right: 20px;
  background: #1f2937; color: white;
  padding: 12px 20px; border-radius: 8px;
  z-index: 100;
  animation: toastIn .3s ease-out;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  font-size: 14px;
}
.toast.error { background: #dc2626; }
.toast.success { background: #16a34a; }
@keyframes toastIn { from { opacity:0; transform: translateY(20px) } to { opacity:1; transform: translateY(0) } }

/* 画像プレビューサムネ */
.thumb {
  background: #f3f4f6;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  position: relative;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { border-color: #16a34a; }

/* ライトボックス */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
  cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 16px; right: 20px;
  color: white; font-size: 28px;
  background: rgba(0,0,0,.5);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}

/* ===== 添付ファイル プレビュー（×ボタン付き全画面オーバーレイ） ===== */
.file-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.94);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  /* iPhone safe-area 対応：上下左右にセーフエリア余白 */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  overflow: hidden;
}
.file-preview-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,.65);
  color: #fff;
  min-height: 56px;
  flex-shrink: 0;
}
.file-preview-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
  /* ×ボタン分のスペースを確保 */
  margin-right: 48px;
}
.file-preview-close {
  /* ヘッダー内の右上に固定（safe-area はオーバーレイ側で吸収済み） */
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* PDF や画像より前面に */
  z-index: 100001;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}
.file-preview-close:hover,
.file-preview-close:focus {
  background: rgba(255,255,255,.32);
  outline: none;
}
.file-preview-close:active {
  background: rgba(255,255,255,.45);
}
.file-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: #000;
}
.file-preview-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.file-preview-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  display: block;
}

/* ===== PDFビューア（PDF.js canvas 描画） ===== */
.file-preview-overlay-pdf .file-preview-body {
  /* PDFは縦スクロールでページ閲覧。中央寄せはやめて上から流す */
  align-items: stretch;
  justify-content: flex-start;
  background: #1f2937; /* 黒〜濃グレー（白canvasが映えるように） */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.file-preview-pdf {
  width: 100%;
  min-height: 100%;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.file-preview-pdf-status {
  color: #fff;
  text-align: center;
  padding: 24px 12px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.file-preview-pdf-status .fa-spinner {
  font-size: 28px;
}
.file-preview-pdf-pages {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.file-preview-pdf-page {
  width: 100%;
  max-width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.file-preview-pdf-pagenum {
  color: #6b7280;
  font-size: 12px;
  align-self: flex-start;
  margin-bottom: 4px;
}
.file-preview-pdf-page canvas {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
}
.file-preview-fallback {
  color: #fff;
  text-align: center;
  padding: 32px 20px;
  max-width: 480px;
  margin: 0 auto;
}

/* Round 19: 画像プレビューコンテナ（Blob URL への差し替え中もローディング表示） */
.file-preview-img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Round 19: TXT / CSV プレビュー */
.file-preview-text {
  align-self: stretch;
  width: 100%;
  min-height: 100%;
  padding: 12px;
  box-sizing: border-box;
  background: #1f2937;
  color: #f3f4f6;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.file-preview-text-inner {
  max-width: 960px;
  margin: 0 auto;
  background: #fff;
  color: #111827;
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.file-preview-txt-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  max-height: 70vh;
  overflow: auto;
  color: #111827;
}
.file-preview-csv-scroll {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.file-preview-csv-table {
  border-collapse: collapse;
  font-size: 13px;
  min-width: 100%;
}
.file-preview-csv-table th,
.file-preview-csv-table td {
  border: 1px solid #e5e7eb;
  padding: 6px 10px;
  white-space: nowrap;
  vertical-align: top;
  color: #111827;
}
.file-preview-csv-table th {
  background: #f3f4f6;
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-weight: 600;
}
.file-preview-csv-table tbody tr:nth-child(even) td {
  background: #fafafa;
}

/* Round 19: 管理者お知らせ一覧のタブ／カード */
.ann-admin-tabs {
  display: flex;
  gap: 6px;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ann-admin-tab {
  flex: 1 1 auto;
  min-width: 96px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  white-space: nowrap;
}
.ann-admin-tab[aria-selected="true"] {
  background: #fff;
  color: var(--brand-700, #0f766e);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.ann-admin-tab:focus-visible {
  outline: 2px solid var(--brand-500, #14b8a6);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .file-preview-title { font-size: 13px; }
  .file-preview-header { padding: 8px 10px; min-height: 52px; }
  .file-preview-txt-pre { font-size: 12px; }
  .file-preview-csv-table { font-size: 12px; }
  .file-preview-csv-table th, .file-preview-csv-table td { padding: 5px 8px; }
  .ann-admin-tab { min-width: 84px; font-size: 12px; padding: 8px 8px; }
}

/* レイアウト */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--app-bg);
}
.sidebar {
  width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.main-content {
  flex: 1;
  overflow-y: auto;
  background: var(--app-bg);
  color: var(--text-main);
}

/* モバイル */
.mobile-header { display: none; }

@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .2s;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed; inset: 0; background: var(--overlay-bg); z-index: 35;
    display: none;
  }
  .sidebar-backdrop.open { display: block; }
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text-main);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--shadow-header);
    position: sticky; top: 0; z-index: 30;
  }
  .app-shell { flex-direction: column; }
  .main-content { padding-bottom: 60px; }
}

/* チャット2ペイン */
.chat-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 100%;
}
.chat-list {
  border-right: 1px solid var(--border-strong);
  background: var(--surface);
  overflow-y: auto;
}
.chat-detail {
  display: flex;
  flex-direction: column;
  background: var(--chat-bg);
  overflow: hidden;
}
@media (max-width: 768px) {
  .chat-layout {
    grid-template-columns: 1fr;
  }
  .chat-layout.show-detail .chat-list { display: none; }
  .chat-layout:not(.show-detail) .chat-detail { display: none; }
}

/* チャット項目 */
.chat-row {
  display: flex; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background .1s;
}
.chat-row:hover { background: #f8fafc; }
.chat-row:focus-visible { outline: 2px solid #16a34a; outline-offset: -2px; }
.chat-row.active { background: #f0fdf4; border-left: 3px solid #16a34a; padding-left: 11px; }

/* チャット一覧ページ（/chat = リスト専用） */
.chat-overview {
  background: white;
  min-height: 100%;
}
.chat-overview-head {
  position: sticky; top: 0; z-index: 10;
  background: white;
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
}
.chat-filter-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chip {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.chip:hover { background: #e5e7eb; }
.chip-active {
  background: #16a34a;
  color: white;
}
.chip-active:hover { background: #15803d; }

.chat-rows { background: white; }
.chat-row-icon {
  width: 40px; height: 40px;
  border-radius: 9999px;
  background: #dcfce7;
  color: #15803d;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-row-body { flex: 1; min-width: 0; }
.chat-row-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.chat-row-title {
  font-weight: 600; font-size: 14px; color: #111827;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-row-time {
  font-size: 11px; color: #9ca3af; white-space: nowrap; flex-shrink: 0;
}
.chat-row-kind { margin-top: 2px; }
.chat-row-msg-line {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  margin-top: 4px;
}
.chat-row-msg {
  font-size: 12px; color: #4b5563;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.chat-row-poster { color: #6b7280; }
.chat-row-empty { color: #9ca3af; }

/* iOS 風トグルスイッチ */
.toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 44px; height: 26px;
  background: #d1d5db;
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
  border: none;
  outline: none;
}
.toggle::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: white;
  border-radius: 9999px;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle:checked { background: #16a34a; }
.toggle:checked::before { transform: translateX(18px); }
.toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.toggle:focus-visible { box-shadow: 0 0 0 3px rgba(34,197,94,0.3); }

/* タブ */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--divider);
  background: var(--surface);
  overflow-x: auto;
}
.tab {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all .15s;
  white-space: nowrap;
  background: var(--surface);
}
.tab:hover { color: var(--green-dark); }
.tab.active {
  color: var(--tab-active-fg);
  border-bottom-color: var(--tab-active-bar);
  background: var(--tab-active-bg);
}

/* バッジ未読件数 */
.unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-main);
  color: #FFFFFF;
  border-radius: 9999px;
  font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.35);
}

/* ファイル添付プレビュー */
.attach-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 4px;
}
.attach-card .icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.icon-pdf { background: #fee2e2; color: #b91c1c; }
.icon-excel { background: #dcfce7; color: #166534; }
.icon-word { background: #dbeafe; color: #1e40af; }
.icon-file { background: #f3f4f6; color: #4b5563; }
.icon-zip { background: #fef3c7; color: #92400e; }

/* PCログイン背景 */
.login-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #15803d 0%, #166534 50%, #14532d 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

/* ホーム grid */
.summary-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-card);
  color: var(--text-main);
}

/* -------------------------------------------------------------
   クリック可能なサマリカード（未読チャットカードなど）

   目的:
   - 「未読チャット」カード全体をタップ／クリック可能にする（余白含む）。
   - サイドメニューから「チャット」を押した時と同じ画面へ遷移する。
   - 既存 .summary-card の色・サイズ・配置は変えず、押せることが分かる
     視覚フィードバック（cursor / hover / active / focus）だけを足す。

   注意:
   - .summary-card 側は変更しない（他カードへ影響させない）。
   - PC/スマホで挙動を分ける必要はなく、単一定義で十分。
   - :focus-visible はキーボード操作時のみアウトラインを出す。
   - transform で他の要素と重なる問題を避けるため translateY だけを使う。
   ------------------------------------------------------------- */
.summary-card-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent; /* スマホの青いフラッシュを消す */
}

.summary-card-link:hover {
  border-color: #155EEF;
  transform: translateY(-1px);
  box-shadow:
    0 3px 8px rgba(15, 23, 42, 0.18),
    0 10px 24px rgba(15, 23, 42, 0.12);
}

.summary-card-link:active {
  transform: scale(0.99);
}

.summary-card-link:focus-visible {
  outline: 3px solid rgba(21, 94, 239, 0.30);
  outline-offset: 2px;
}

/* 非表示ヘルパー */
.hide { display: none !important; }

/* =========================================
   チャット入力エリア（縦2段: 入力欄 / ボタン4個）
   ========================================= */
/* PC（既定）：従来どおりカード内に高さ固定で表示 */
.chat-area {
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: min(70vh, 640px);
  overflow: hidden;       /* 親に丸めの背景がある場合のはみ出し抑止 */
}

/* チャット本文：縦スクロール領域 */
.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* 末尾メッセージが入力欄と密着しないための最小余白のみ（過剰にしない） */
  padding-bottom: 4px;
  scroll-padding-bottom: 4px;
}

.chat-compose {
  flex-shrink: 0;         /* 縮まないように：ボタンが切れる主因の防止 */
  padding: 8px;
  position: relative;     /* DnDオーバーレイの絶対配置の基準 */
  /* iPhoneホームバー/Androidジェスチャーバーに重ならないよう下側に安全余白。
     ただし calc(8px + env(...)) のように加算すると safe-area=34px の端末で
     padding-bottom が 42px まで膨らんで大きな空白の原因になるため、
     max() で「8px と safe-area の大きい方」を採用する。
     safe-area が 0 のブラウザでは結果 8px、iPhone では 34px となり過剰にならない。 */
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  /* 安全網：添付プレビュー＋入力欄＋ツールバーを合わせても
     チャット領域(.chat-area)の 75% を超えない。超えた場合は
     .chat-compose 自体を縦スクロール可能にして送信ボタンへ
     必ず到達できるようにする。
     ※ #attach-preview の max-height で 99% のケースは収まるが、
       極端な入力欄拡大などに対する二重防御として残す。 */
  max-height: 75%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 添付プレビュー：複数写真を縦に積み、最大高さを超えたら内部スクロール
   - 縦に並べる：写真ごとに 1 行（横並びをやめてレイアウトを単純化）
   - 最大高さ：画面の約 40%（dvh 対応ブラウザは dvh、未対応は vh フォールバック）
   - 内部スクロール：max-height 超過時のみ縦スクロール
   - 削除(×)ボタンと写真名/形式/容量はそのまま（.attach-card 構造は変更しない） */
#attach-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 40vh;          /* dvh 非対応ブラウザ向けフォールバック */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* スクロール時に末尾カードが入力欄と密着しないための小さな余白 */
  padding-right: 2px;
}
@supports (max-height: 40dvh) {
  #attach-preview { max-height: 40dvh; }
}
/* #attach-preview 内のカードは横幅いっぱい・縮まない（縦リスト） */
#attach-preview .attach-card {
  width: 100%;
  margin-top: 0;             /* 親が gap で管理 */
  flex-shrink: 0;            /* スクロール領域内で潰れない */
}

#attach-preview:empty { display: none; }

/* 入力欄：横幅いっぱい・1行〜3行で自動リサイズ */
.chat-input-field {
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  line-height: 1.4;
  resize: none;
  min-height: 52px;   /* 通常時 ≒ 1行 (約50〜56px の範囲) */
  max-height: 120px;  /* 最大 ≒ 3行 (約100〜120px) */
  overflow-y: hidden; /* 通常は隠す。超過時にJSで auto に切替 */
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.chat-input-field:focus {
  outline: none;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.15);
}

/* =========================================
   ドラッグ＆ドロップ オーバーレイ（PC専用）
   - .chat-compose を position:relative にして、内側に絶対配置で重ねる
   - 通常時は display:none。.chat-compose--dragover が付いたときだけ表示
   - スマホ/タッチ端末では @media (hover:hover) でDnD自体無効化されており、
     overlay 要素自体は DOM に存在するが display:none のまま
   - クリックは通り抜けないとドラッグ判定を取れないため pointer-events は
     activeの時のみ on にする
   ========================================= */
.chat-dropzone-overlay {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;        /* 通常は完全に透過 */
  z-index: 50;
}
.chat-compose--dragover .chat-dropzone-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, .08);       /* うっすら緑 */
  border: 2px dashed #16a34a;
  pointer-events: none;                      /* 入力操作は妨げない（dropはcomposeで受ける） */
}
.chat-compose--dragover {
  background: #f0fdf4;          /* 背景色を薄く変える */
  transition: background-color .15s;
}
.chat-dropzone-inner {
  background: #fff;
  border-radius: 10px;
  padding: 14px 22px;
  text-align: center;
  color: #166534;
  box-shadow: 0 8px 24px rgba(22, 101, 52, .12);
  pointer-events: none;
}
.chat-dropzone-inner > i {
  font-size: 28px;
  color: #16a34a;
  margin-bottom: 6px;
}
.chat-dropzone-text {
  font-size: 15px;
  font-weight: 700;
  color: #14532d;
}
.chat-dropzone-sub {
  font-size: 12px;
  color: #4b5563;
  margin-top: 2px;
}

/* タッチ端末ではDnDを使わない（JS側でも window.matchMedia で抑制）。
   保険として visual も無効化。 */
@media (hover: none), (pointer: coarse) {
  .chat-dropzone-overlay { display: none !important; }
  .chat-compose--dragover { background: inherit; }
}

/* ツールバー：4ボタンを画面幅で均等配置・横スクロール無し */
.chat-toolbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  width: 100%;
}
.chat-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;       /* 44〜48pxの範囲 */
  min-width: 0;       /* 子要素で横幅をはみ出させない */
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #374151;
  font-size: 18px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.chat-tool-btn:hover:not(:disabled) { background: #f9fafb; }
.chat-tool-btn:active { background: #f3f4f6; }
.chat-tool-btn i { pointer-events: none; }

/* 送信ボタン：緑（btn-primary 同等） */
.chat-tool-send {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.chat-tool-send:hover:not(:disabled) {
  background: #15803d;
  border-color: #15803d;
}

/* ============================================================
 * チャット送信中ボタン (二重送信防止)
 * ============================================================
 * ・isChatSending=true の間 .chat-tool-send--sending が付与される。
 * ・ボタンは disabled になり、色をグレー系に変えて操作不可を明示。
 * ・アイコンは JS 側で fa-paper-plane → fa-spinner + fa-spin に差し替える。
 * ・:hover / :active でも色が変わらないよう固定色にする。
 * ============================================================ */
.chat-tool-send--sending,
.chat-tool-send--sending:hover,
.chat-tool-send--sending:active,
.chat-tool-send--sending:focus,
.chat-tool-send:disabled.chat-tool-send--sending {
  background: #94A3B8;
  border-color: #94A3B8;
  color: #FFFFFF;
  cursor: not-allowed;
  opacity: 1; /* 通常の disabled 半透明を打ち消して意図した色を明示 */
}

/* スマホ向け微調整：iPhone・Android・狭幅端末で崩れないよう詰める
   chat-area の高さは「動的ビューポート高さ(dvh) - 上端までのオフセット」で算出する。
   dvh は Chrome/Safari の下部UI（アドレスバー）が伸縮しても実表示領域に追随するため、
   ボタンが隠れず、かつ余分な空白も発生しない。
   注意：padding-bottom はベースルールの max(8px, env(safe-area-inset-bottom)) を
   そのまま継承する。ここで再宣言すると safe-area が二重に加算される原因になるため
   再宣言しない（=単一の真実の出所(SSOT)を維持）。 */
@media (max-width: 768px) {
  /* dvh が無いブラウザ向けフォールバック → vh で計算 */
  .chat-area {
    height: calc(100vh - var(--chat-area-offset, 280px));
    max-height: none;
  }
  /* dvh 対応ブラウザはこちらが優先（Chrome 108+, Safari 15.4+, Firefox 101+） */
  @supports (height: 100dvh) {
    .chat-area {
      height: calc(100dvh - var(--chat-area-offset, 280px));
    }
  }
  /* padding-bottom はベースルールの max(8px, env(safe-area-inset-bottom)) を継承（再宣言しない） */
  .chat-compose { gap: 6px; }
  .chat-toolbar { gap: 4px; }
  .chat-tool-btn { height: 44px; font-size: 17px; border-radius: 10px; }
  .chat-input-field { font-size: 16px; /* iOSの拡大防止 */ }
  /* スマホ：添付プレビューの最大高さを画面の 35% 程度に抑え、
     残りの 65% で入力欄＋ツールバー＋メッセージ本文を確保。
     超えた分は #attach-preview 内で縦スクロール。 */
  #attach-preview { max-height: 35vh; }
  @supports (max-height: 35dvh) {
    #attach-preview { max-height: 35dvh; }
  }
  /* メッセージ本文(.chat-messages)の最低高さを保証して
     プレビューが大きい時でも本文が完全に潰れないようにする
     （flex の min-height: 0 は維持しつつ、最低 80px は残す） */
  .chat-messages { min-height: 80px; }
  /* スマホで .main-content に付与される padding-bottom: 60px が
     chat-area の下に 60px の空白を作る原因になるため、
     チャット領域(#chat-area)を内包する場合は親のフローを縮める。
     ※ チャットタブを開いた main-content にのみ効くよう、:has() で限定。 */
  .main-content:has(#chat-area) { padding-bottom: 0; }
}
@media (max-width: 360px) {
  .chat-toolbar { gap: 4px; }
  .chat-tool-btn { font-size: 16px; }
}

/* ===========================================================
   PC専用（min-width: 1025px）: 案件チャット画面の縦フル拡張
   ---------------------------------------------------------
   目的:
     PC表示（サイドメニュー固定・モバイルヘッダー非表示の 1025px 以上）で、
     `/projects/:id/chat` の入力欄の下に発生する大きな空白を解消し、
     チャット履歴領域を画面高いっぱいに拡張する。
   原因（修正前）:
     - `.chat-area` の PC デフォルトが `height: min(70vh, 640px)` で固定。
       1920×1080 では 640px でキャップされ、下に ~440px の空白が残っていた。
     - `#project-chat-page` は `flex flex-col` だが親（`.main-content`）の
       高さを継承しておらず、内容分だけで縮んでいた。
   修正方針:
     - `.app-shell` は `height: 100vh; overflow: hidden`（既存）。
     - `.main-content` は既に `flex: 1; overflow-y: auto`（既存）→ 高さは
       サイドバー含む viewport 100vh を継承済み。
     - PC でのみ:
        * `#project-chat-page` を `.main-content` の高さいっぱい（`100%`）に
          伸ばし、`display:flex; flex-direction:column; min-height:0`。
        * `.chat-area` の PC 固定高さ `min(70vh, 640px)` を PC breakpoint で
          `flex: 1 1 auto; height: auto; min-height: 0` に上書きし、
          `#project-chat-page` の残余空間を全て占有させる。
        * `#chat-messages` は `flex: 1 1 auto; min-height: 0; overflow-y: auto`
          （既存プロパティを PC でも維持、`flex-basis: auto` を明示）。
        * `.chat-compose` は `flex: 0 0 auto`（縮まない・伸びない）。
        * `.chat-compose` の `max-height: 75%` は PC では入力欄が
          チャット領域の 3/4 まで伸びると読み取り性を損なうため、
          `max-height: 40%` に緩和（添付大量時のみ内部スクロールで対応）。
     - `main.content:has(#chat-area) { padding-bottom: 0 }` は既存の mobile 側
       にのみ効くが、PC 側は元々 `.main-content` に padding-bottom が無いため
       追加処置は不要（念のため PC でも 0 を明示）。
   スマホ・タブレット非影響:
     - すべての規則は `@media (min-width: 1025px)` 内に閉じている。
     - 既存の `@media (max-width: 768px)` の `calc(100dvh - offset)` 計算、
       `#attach-preview` の `max-height`、`.main-content` の mobile
       padding-bottom（60px）、下部ナビゲーションはいずれも変更していない。
   =========================================================== */
@media (min-width: 1025px) {
  /* 親（.main-content）を viewport 100vh から継承させ、
     チャットページを 100% 高さの flex column にする */
  .main-content:has(#project-chat-page) {
    padding-bottom: 0;
    /* .main-content は既に overflow-y: auto だが、PC チャットでは
       内側の #chat-messages がスクロール担当なので二重スクロール防止で
       overflow を hidden 化する（サイドバーの高さは変わらない） */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #project-chat-page {
    /* dvh 対応ブラウザは 100dvh フォールバック（非対応は親 100% を使用） */
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* chat-pane は既に flex-1 flex flex-col overflow-hidden（Tailwind クラス） */
  #project-chat-page > #chat-pane {
    flex: 1 1 auto;
    min-height: 0;
  }
  /* .chat-area の PC 固定高さ（min(70vh, 640px)）を上書きし、
     flex で親（#chat-pane）の残余空間を全て占有 */
  #project-chat-page .chat-area {
    height: auto;
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
  }
  /* チャット履歴のスクロール領域はそのまま flex:1 で伸縮、
     PC で明示的に basis を auto にする（既存 Tailwind flex-1 を補強） */
  #project-chat-page .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  /* 入力欄コンテナは縮まない・伸びない */
  #project-chat-page .chat-compose {
    flex: 0 0 auto;
    /* PC ではチャット領域の 40% を上限に緩和（元は 75%） */
    max-height: 40%;
  }

  /* -------------------------------------------------------
     PC限定: チャット本文の可読性向上（太さ・濃さの調整）
     ---------------------------------------------------------
     対象: .chat-bubble (自分=.mine / 他ユーザー=.others の両方)
       - 通常メッセージの本文テキスト（吹き出し内側）だけを濃く・太く。
     対象外（別要素・別クラスで独自 color/weight を持ち影響を受けない）:
       - 送信者名 (.chat-msg-meta)  … Tailwind font-semibold + text-gray-700
       - 送信時刻 (.chat-msg-meta text-gray-500) … 変更なし
       - 返信元引用 (.chat-msg-reply-quote / .rq-name / .rq-line)
         … color:#374151/#4b5563、font-weight:600(名前のみ) を維持
       - 削除済みメッセージ (.chat-message-deleted-text) … color:#9CA3AF を維持
       - 添付ファイル、リアクション、送信ボタン、入力欄
     推奨値（ユーザー指定）:
       font-weight: 500  （細すぎず太すぎず）
       color:       #0f172a  (slate-900 相当)
     ------------------------------------------------------- */
  #project-chat-page .chat-bubble {
    font-weight: 500;
    color: #0f172a;
  }
}

/* ===========================================================
   既読インジケータ (.read-count)
   - 自分のメッセージ吹き出しの下、投稿時刻の近くに表示
   - 11〜13px、薄いグレー、横一列で「既読 10」でも崩れない
   - ボタン風にしすぎず、タップ領域は 44px 以上確保（min-height）
   =========================================================== */
.chat-msg-reads {
  display: flex;
  /* is-own は右寄せのため end、is-other 側では呼ばれない */
  justify-content: flex-end;
  margin-top: 2px;
}
.read-count {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1.2;
  color: #94a3b8; /* slate-400 */
  background: transparent;
  border: 0;
  padding: 8px 6px;     /* タップ領域 16+x ≥ 24、min-height で 44 確保 */
  min-height: 44px;
  min-width: 44px;
  justify-content: flex-end;
  white-space: nowrap;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.read-count--read {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: #cbd5e1;
  text-underline-offset: 2px;
}
.read-count--read:hover {
  color: #475569;
  text-decoration-color: #94a3b8;
}
.read-count--read:focus-visible {
  outline: 2px solid #14b8a6;
  outline-offset: 2px;
  border-radius: 4px;
}
.read-count--unread { cursor: default; }

/* ===========================================================
   既読者一覧モーダル / ボトムシート
   =========================================================== */
.readers-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 80vh;
}
.readers-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.readers-modal-close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: #64748b;
  border: 0;
  cursor: pointer;
  font-size: 16px;
}
.readers-modal-close:hover { background: #f1f5f9; color: #0f172a; }
.readers-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
}
.readers-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 14px;
  color: #0f172a;
}
.readers-row + .readers-row { border-top: 1px solid #f1f5f9; }
.readers-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #ecfdf5; /* brand-tinted */
  color: #047857;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.readers-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.readers-time {
  color: #94a3b8;
  font-size: 12px;
  flex-shrink: 0;
}
.readers-empty {
  padding: 24px 18px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}
.readers-modal-foot {
  padding: 10px 18px 14px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* スマホ: ボトムシート化（画面下から出現）*/
@media (max-width: 640px) {
  /* ボトムシート用 backdrop: align ではなく、絶対配置の .modal を内側に置く */
  .readers-modal-back {
    /* align-items / justify-content を上書きして無効化（.modal 自身が位置を持つ） */
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  .readers-modal-back .modal {
    /* fixed な backdrop の中で、bottom: 0 に固定して画面下端から立ち上げる。
       これにより親の高さに関係なく必ず viewport の下端に張り付く（Playwright の isMobile でも安定）。 */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    /* 画面の高さの最大 80% に収め、safe-area を引いて閉じるボタンが画面外にはみ出さないようにする */
    max-height: 80vh;
    max-height: calc(80dvh - env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    /* safe-area: iOS の下部インジケータ領域を避ける */
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: readers-sheet-up .22s ease-out;
    overflow: hidden;
  }
  .readers-modal-back .readers-modal {
    /* モバイルではモーダル自身を flex column にして、リストだけがスクロールし、
       ヘッダと「閉じる」フッタは画面内に固定される */
    max-height: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  @keyframes readers-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .readers-modal-head {
    /* ボトムシート上部にドラッグハンドル風の余白を確保 */
    padding-top: 14px;
  }
}

/* =============================================================
   Chat: 「…」メニュー / 返信 / リアクション  (2026-07 追加)
   ============================================================= */

/* --- 吹き出しの右横（自分は左横）に「…」を配置する横並びラッパー --- */
/* .chat-msg-body-row … 横並び行本体
   .chat-msg-body     … 返信引用＋吹き出し＋添付をまとめるブロック
   .chat-msg-menu-btn … 「…」ボタン
   自分メッセージは .chat-msg-row.is-own の row-reverse で「…」を左に寄せる。 */
.chat-msg-body-row {
  display: flex;
  align-items: center;    /* 吹き出しと縦方向中央に揃える */
  gap: 6px;               /* 吹き出しとの間隔 4〜8px */
  max-width: 100%;
  min-width: 0;
}
.chat-msg-row.is-own .chat-msg-body-row {
  flex-direction: row-reverse;   /* 自分: […][吹き出し] */
}
.chat-msg-body {
  /* 返信引用＋吹き出し＋添付を縦に並べつつ、行幅を吹き出しの実サイズに合わせる */
  display: flex;
  flex-direction: column;
  min-width: 0;                  /* flex 内で縮められるように */
  max-width: 100%;
}
.chat-msg-row.is-own .chat-msg-body { align-items: flex-end; }
.chat-msg-row.is-other .chat-msg-body { align-items: flex-start; }

.chat-msg-menu-btn {
  /* 実タップ領域は 44×44 を維持しつつ、見た目は小さく（36×36 の丸） */
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;                /* gray-500 */
  background: transparent;
  border: 0;
  border-radius: 9999px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  position: relative;
}
/* ボタン外側に 4px の透明領域を出して実タップ領域を約 44px 相当に拡張 */
.chat-msg-menu-btn::before {
  content: "";
  position: absolute;
  inset: -4px;                   /* 上下左右 -4px 拡張 → 44x44 */
}
.chat-msg-menu-btn:hover,
.chat-msg-menu-btn:focus-visible {
  color: #111827;                /* gray-900 */
  background: rgba(0,0,0,0.06);
  outline: none;
}

/* 編集・削除アイコンは従来通り「吹き出しの下」に横並び（縦積みではない）で表示 */
.chat-msg-icon-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  max-width: 100%;
}
.chat-msg-row.is-own  .chat-msg-icon-actions { justify-content: flex-end; }
.chat-msg-row.is-other .chat-msg-icon-actions { justify-content: flex-start; }

.chat-msg-icon-btn {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;                /* gray-400 */
  background: transparent;
  border: 0;
  border-radius: 9999px;
  padding: 4px 8px;
  cursor: pointer;
}
.chat-msg-icon-btn:hover,
.chat-msg-icon-btn:focus-visible {
  color: #1d4ed8;
  background: rgba(0,0,0,0.06);
  outline: none;
}
.chat-msg-icon-btn--danger:hover,
.chat-msg-icon-btn--danger:focus-visible {
  color: #dc2626;                /* red-600 */
}

/* PCではホバー時のみ表示、モバイルは常時表示 */
@media (hover: hover) and (pointer: fine) {
  .chat-msg-body-row .chat-msg-menu-btn,
  .chat-msg-icon-actions .chat-msg-icon-btn {
    opacity: 0;
    transition: opacity .12s ease-out;
  }
  .chat-msg-row:hover  .chat-msg-body-row .chat-msg-menu-btn,
  .chat-msg-row:focus-within .chat-msg-body-row .chat-msg-menu-btn,
  .chat-msg-row:hover  .chat-msg-icon-actions .chat-msg-icon-btn,
  .chat-msg-row:focus-within .chat-msg-icon-actions .chat-msg-icon-btn {
    opacity: 1;
  }
  /* クリック後 aria-expanded="true" の間は常に表示 */
  .chat-msg-menu-btn[aria-expanded="true"] {
    opacity: 1 !important;
  }
}

/* 吹き出しはコンテンツ幅にフィット、ただし親の 100% を超えない
   （吹き出しが横に伸びすぎて「…」がはみ出さないようにする） */
.chat-msg-body-row .chat-bubble {
  max-width: 100%;
}

/* --- ポップアップメニュー本体 --- */
.chat-msg-popup {
  position: fixed;
  z-index: 1500;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.08);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100vw - 16px);
  animation: chat-popup-in .12s ease-out;
}
@keyframes chat-popup-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
.chat-msg-popup-row {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.chat-msg-popup-emoji {
  min-width: 40px;
  min-height: 40px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform .08s ease-out, background .1s;
}
.chat-msg-popup-emoji:hover,
.chat-msg-popup-emoji:focus-visible {
  background: #f3f4f6;   /* gray-100 */
  transform: scale(1.1);
  outline: none;
}
.chat-msg-popup-emoji:active {
  transform: scale(0.95);
}
.chat-msg-popup-sep {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 0;
}
.chat-msg-popup-item {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  cursor: pointer;
  text-align: left;
}
.chat-msg-popup-item:hover,
.chat-msg-popup-item:focus-visible {
  background: #f3f4f6;
  outline: none;
}
.chat-msg-popup-item i {
  color: #6b7280;
  width: 18px;
  text-align: center;
}

/* --- 返信元 quote ブロック（メッセージ本文の上に表示） --- */
.chat-msg-reply-quote {
  display: block;
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  margin: 0 0 4px;
  text-align: left;
  cursor: pointer;
  border-left: 3px solid #93c5fd;   /* blue-300 */
  color: #374151;                   /* gray-700 */
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
}
.chat-msg-reply-quote:hover {
  background: rgba(59,130,246,0.06);
}
.chat-msg-reply-quote .rq-name {
  display: block;
  font-weight: 600;
  color: #1d4ed8;                   /* brand-700 */
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-msg-reply-quote .rq-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #4b5563;                   /* gray-600 */
  word-break: break-word;
}
.chat-msg-reply-quote--deleted {
  border-left-color: #d1d5db;       /* gray-300 */
  color: #9ca3af;                   /* gray-400 */
  font-style: italic;
  cursor: default;
}
.chat-msg-reply-quote--deleted:hover {
  background: transparent;
}
/* 自分側は右寄せなので反転（右にラインを出す） */
.chat-msg-row.is-own .chat-msg-reply-quote {
  border-left: 0;
  border-right: 3px solid #93c5fd;
  text-align: right;
}
.chat-msg-row.is-own .chat-msg-reply-quote--deleted {
  border-right-color: #d1d5db;
}

/* --- リアクション帯（バブル直下） --- */
.chat-msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  max-width: 100%;
}
.chat-msg-row.is-own .chat-msg-reactions {
  justify-content: flex-end;
}
.chat-msg-reactions-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.chat-msg-reactions-pill:hover,
.chat-msg-reactions-pill:focus-visible {
  background: #f9fafb;
  border-color: #d1d5db;
  outline: none;
}
.chat-msg-reactions-pill.is-mine {
  background: #dbeafe;              /* blue-100 */
  border-color: #93c5fd;            /* blue-300 */
  color: #1d4ed8;
  font-weight: 600;
}
.chat-msg-reactions-pill .rp-emoji {
  font-size: 14px;
  line-height: 1;
}
.chat-msg-reactions-pill .rp-count {
  font-variant-numeric: tabular-nums;
}
.chat-msg-reactions-list {
  min-height: 28px;
  min-width: 32px;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px dashed #d1d5db;
  background: transparent;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
}
.chat-msg-reactions-list:hover,
.chat-msg-reactions-list:focus-visible {
  background: #f3f4f6;
  color: #111827;
  outline: none;
}

/* --- スクロール時ハイライト --- */
.chat-msg-flash > .chat-msg-inner {
  animation: chat-msg-flash-anim 1.8s ease-out;
}
@keyframes chat-msg-flash-anim {
  0%   { background: transparent; box-shadow: none; }
  10%  { background: #fef9c3; box-shadow: 0 0 0 3px #fde68a; } /* yellow-100/200 */
  60%  { background: #fef9c3; box-shadow: 0 0 0 3px #fde68a; }
  100% { background: transparent; box-shadow: none; }
}

/* --- 返信プレビュー（compose 直上） --- */
.chat-reply-preview {
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
  padding: 6px 10px;
}
.chat-reply-preview-inner {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 40px;
}
.chat-reply-preview .crp-bar {
  width: 3px;
  background: #3b82f6; /* blue-500 */
  border-radius: 2px;
  flex: 0 0 3px;
}
.chat-reply-preview .crp-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: #374151;
  padding: 2px 0;
}
.chat-reply-preview .crp-head {
  font-weight: 600;
  color: #1f2937;
  font-size: 11px;
  margin-bottom: 2px;
}
.chat-reply-preview .crp-name {
  color: #1d4ed8;
  font-weight: 700;
}
.chat-reply-preview .crp-text {
  color: #4b5563;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.chat-reply-preview .crp-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #6b7280;
  border-radius: 9999px;
  cursor: pointer;
  flex: 0 0 auto;
}
.chat-reply-preview .crp-close:hover,
.chat-reply-preview .crp-close:focus-visible {
  background: rgba(0,0,0,0.06);
  color: #111827;
  outline: none;
}

/* --- リアクター一覧モーダルの reaction ごとのセクション --- */
.reactors-section {
  padding: 10px 12px 6px;
  border-bottom: 1px solid #f3f4f6;
}
.reactors-section:last-child {
  border-bottom: 0;
}
.reactors-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}
.reactors-section-head .rs-emoji {
  font-size: 20px;
  line-height: 1;
}
.reactors-section-head .rs-count {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.reactors-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.readers-row.is-me {
  background: #eff6ff; /* blue-50 */
  border-radius: 6px;
}

/* 横スクロール発生防止（保険） */
.chat-messages {
  overflow-x: hidden;
}

/* 小画面時にリアクション帯・返信プレビューが横にはみ出さないよう */
@media (max-width: 480px) {
  .chat-msg-reactions {
    max-width: 100%;
  }
  .chat-msg-reactions-pill {
    font-size: 11.5px;
  }
  .chat-msg-popup {
    /* 画面幅ぎりぎりの時は端に寄せて配置。JS 側でも計算するが CSS 保険 */
    max-width: calc(100vw - 16px);
  }
}

/* ================================================================
 * 出荷数量タブ
 * ================================================================ */

/* --- 入力行（新規登録） ---------------------------------------- */
.ship-input-card { }
.ship-input-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
  /* PC: 取付日 | 部位 | 加工 | 取付 | 削除 の横並び */
  .ship-input-grid {
    grid-template-columns: 140px minmax(120px, 1fr) 130px 130px auto;
    align-items: end;
  }
}
.ship-field { display: flex; flex-direction: column; min-width: 0; }
.ship-field-label {
  font-size: 12px; color: #4b5563; margin-bottom: 4px;
}
.ship-row-actions {
  display: flex; align-items: end; justify-content: flex-end;
}
@media (max-width: 767px) {
  /* スマホでは削除ボタンを幅いっぱいに */
  .ship-row-actions .btn { width: 100%; }
}
@media (min-width: 768px) {
  /* PC 用: 削除ボタンの文言を短く（アイコンのみ相当） */
  .ship-remove-label { display: none; }
  .ship-row-actions .btn { padding: 6px 10px; }
}

/* --- 一覧表示 --------------------------------------------------- */
.ship-list { display: flex; flex-direction: column; gap: 8px; }

.ship-list-head {
  display: none;
}
.ship-list-item {
  display: grid;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-card);
  color: var(--text-main);
}
/* スマホ: カード形式（縦積み・ラベル付き） */
.ship-list-item .ship-cell {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  min-width: 0;
}
.ship-list-item .ship-cell-label {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.ship-list-item .ship-cell-value {
  font-size: 14px;
  color: var(--text-main);
  text-align: right;
  word-break: break-word;
  min-width: 0;
}
.ship-list-item .ship-cell-actions { justify-content: flex-end; }
.ship-list-actions {
  display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}

/* PC: テーブル風の横並び */
@media (min-width: 768px) {
  .ship-list-head, .ship-list-item {
    display: grid;
    /* 取付日 | 部位 | 加工 | 取付 | 登録者 | 登録日時 | 操作 */
    grid-template-columns: 110px minmax(120px, 1fr) 110px 110px 120px 150px auto;
    align-items: center;
    gap: 12px;
  }
  .ship-list-head {
    padding: 6px 12px;
    font-size: 12px;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }
  .ship-list-head .ship-cell-label { display: none; }
  .ship-list-item .ship-cell {
    display: block;
    padding: 0;
    text-align: left;
  }
  .ship-list-item .ship-cell-label { display: none; }
  .ship-list-item .ship-cell-value { text-align: left; font-size: 13px; }
  .ship-cell-proc, .ship-cell-inst { text-align: right; }
  .ship-list-item .ship-cell-proc .ship-cell-value,
  .ship-list-item .ship-cell-inst .ship-cell-value { display: block; text-align: right; }
  .ship-cell-actions { text-align: right; }
}

/* --- 編集モーダル --------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 16px;
}
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.28),
    0 24px 60px rgba(15, 23, 42, 0.20);
  color: var(--text-main);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
  color: var(--text-main);
}
.modal-header .modal-close {
  background: transparent;
  border: 0;
  width: 32px; height: 32px;
  border-radius: 9999px;
  color: var(--text-muted);
  cursor: pointer;
}
.modal-header .modal-close:hover { background: #F1F5F9; color: var(--text-main); }
.modal-body { padding: 16px; overflow-y: auto; color: var(--text-main); }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--divider);
  background: #F5F8FC;
}

/* btn-xs（小さいボタン） */
.btn-xs {
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 6px;
}

/* =====================================================
   Tailwind ユーティリティの色補正
   （新カラーパレットにブランド緑・補助文字色などを揃える）
   ===================================================== */

/* ブランドカラーの緑を新指定 #00A83B / #087A34 に統一
   （Tailwind の text-brand-600 はデフォルトで #16a34a に設定されているため
     ここで直接色コードを上書きし、アプリ全体のブランド緑を一致させる） */
.text-brand-600 { color: var(--green-main) !important; }
.text-brand-700 { color: var(--green-dark) !important; }
.text-brand-800 { color: var(--green-dark) !important; }
.bg-brand-600  { background-color: var(--green-main) !important; }
.bg-brand-700  { background-color: var(--green-dark) !important; }
.border-brand-600 { border-color: var(--green-main) !important; }
.hover\:bg-brand-700:hover { background-color: var(--green-dark) !important; }

/* 見出し・本文の濃度を統一 */
.text-gray-900 { color: var(--text-main) !important; }
.text-gray-800 { color: var(--text-main) !important; }
.text-gray-700 { color: var(--text-sub) !important; }
.text-gray-600 { color: var(--text-sub) !important; }
/* 「更新日時」等の補助表示を新指定 #5B6778 まで濃くする */
.text-gray-500 { color: var(--text-muted) !important; }
.text-gray-400 { color: var(--text-muted) !important; }

/* 件数・カウンタ表示のアクセント色を新指定に一致させる */
.text-blue-600 { color: var(--blue-main) !important; }
.text-red-600  { color: var(--red-main) !important; }

/* Tailwind bg-gray-50 / bg-gray-100 で「淡い背景カード」を作っている箇所は
   新配色ではアプリ背景に埋もれないよう、わずかに暖色寄せのグレーへ */
.bg-gray-50  { background-color: #F5F8FC !important; }
.bg-gray-100 { background-color: #EEF2F7 !important; }

/* text-brand-600 のアイコンだけは「工事アイコン緑」の指定
   （ホームの「その他」セクションアイコンは元々 text-gray-500 なので
     上の .text-gray-500 上書きで #5B6778 相当 = 濃グレー化される） */

/* ====== モバイル用の外余白（ページ背景が見えるようにする） ====== */
@media (max-width: 1024px) {
  .main-content { background: var(--app-bg); }
}
nt { background: var(--app-bg); }
}

/* ============================================================
 * 削除済みチャットメッセージ (soft-delete プレースホルダ)
 * ============================================================
 * ・通常メッセージと同じ左右配置 (自分=右, 他人=左) を維持
 * ・元本文・添付・リアクション・「…」メニュー・既読は非表示
 * ・「HH:MM　このメッセージは削除されました。」だけ表示
 * ============================================================ */
.chat-message-deleted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  color: #9CA3AF;
  font-size: 14px;
  font-style: normal;
  line-height: 1.4;
  max-width: 100%;
  word-break: break-word;
  box-sizing: border-box;
}
.chat-message-deleted-time {
  color: #64748B;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.chat-message-deleted-text {
  color: #9CA3AF;
  font-size: 14px;
  line-height: 1.4;
}
/* 削除済みメッセージ行では吹き出し・添付・リアクション・アイコン等の余計な余白を殺す */
.chat-msg-row.is-deleted .chat-msg-body-row { align-items: center; }
.chat-msg-row.is-deleted .chat-msg-inner { gap: 2px; }

/* 返信元(quote)が削除済みの場合の枠 (既存の .chat-msg-reply-quote--deleted は
   別スタイルなのでそのまま。追加のフォールバックはここでは不要) */

/* ================================================================
 * 案件一覧の状態復元中の一瞬のジャンプ防止
 * ================================================================ */
/* 案件詳細から戻ってきた際、レイアウトが確定するまで一覧全体を非表示にして、
   「先頭が一瞬見えてからスクロールする」現象を隠す。
   復元完了後（requestAnimationFrame ×2 or 300ms 保険）に JS 側で解除する。 */
.project-list-restoring {
  visibility: hidden;
}

/* ================================================================
 * 取付人工タブ
 * ================================================================ */

/* --- 集計カード ------------------------------------------------- */
.labor-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .labor-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.labor-summary-card {
  background: #E8FAF0;
  border: 1px solid #9EDDB6;
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 0;
}
.labor-summary-label {
  font-size: 12px;
  color: #334155;
  margin-bottom: 4px;
}
.labor-summary-value {
  font-size: 22px;
  font-weight: 700;
  color: #087A34;
  word-break: break-word;
  line-height: 1.3;
}
@media (max-width: 360px) {
  .labor-summary-value { font-size: 20px; }
}

/* --- 入力行（新規登録） ---------------------------------------- */
.labor-input-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
  /* PC: 取付日 | 部位 | 取付人工 | 削除 の横並び */
  .labor-input-grid {
    grid-template-columns: 140px minmax(120px, 1fr) 140px auto;
    align-items: end;
  }
}
.labor-field { display: flex; flex-direction: column; min-width: 0; }
.labor-field-label {
  font-size: 12px; color: #4b5563; margin-bottom: 4px;
}
.labor-row-actions {
  display: flex; align-items: end; justify-content: flex-end;
}
@media (max-width: 767px) {
  .labor-row-actions .btn { width: 100%; }
}
@media (min-width: 768px) {
  .labor-remove-label { display: none; }
  .labor-row-actions .btn { padding: 6px 10px; }
}

/* --- 一覧表示（登録履歴） -------------------------------------- */
.labor-list { display: flex; flex-direction: column; gap: 8px; }

.labor-list-head { display: none; }
.labor-list-item {
  display: grid;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-card);
  color: var(--text-main);
}
/* スマホ: カード形式（縦積み・ラベル付き） */
.labor-list-item .labor-cell {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  min-width: 0;
}
.labor-list-item .labor-cell-label {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.labor-list-item .labor-cell-value {
  font-size: 14px;
  color: var(--text-main);
  text-align: right;
  word-break: break-word;
  min-width: 0;
}
.labor-list-item .labor-cell-actions { justify-content: flex-end; }
.labor-list-actions {
  display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}

/* PC: テーブル風の横並び */
@media (min-width: 768px) {
  .labor-list-head, .labor-list-item {
    display: grid;
    /* 取付日 | 部位 | 取付人工 | 登録者 | 登録日時 | 操作 */
    grid-template-columns: 110px minmax(120px, 1fr) 130px 120px 150px auto;
    align-items: center;
    gap: 12px;
  }
  .labor-list-head {
    padding: 6px 12px;
    font-size: 12px;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }
  .labor-list-head .labor-cell-label { display: none; }
  .labor-list-item .labor-cell {
    display: block;
    padding: 0;
    text-align: left;
  }
  .labor-list-item .labor-cell-label { display: none; }
  .labor-list-item .labor-cell-value { text-align: left; font-size: 13px; }
  .labor-cell-labor { text-align: right; }
  .labor-list-item .labor-cell-labor .labor-cell-value { display: block; text-align: right; }
  .labor-cell-actions { text-align: right; }
}

/* =============================================================
 * チャット添付アップロードの進捗表示（0025 の仮カード内）
 * - renderAttachCard() の _pending 分岐で使用
 * - 幅は親 (.attach-card) にフィット、モバイル(375px)でも崩れないよう
 *   フォントサイズ・パディングを抑えめに設定
 * ============================================================= */
.attach-progress-bar {
  margin-top: 4px;
  height: 4px;
  background: #E5E7EB;             /* gray-200 */
  border-radius: 999px;
  overflow: hidden;
  width: 100%;
}
.attach-progress-bar__fill {
  height: 100%;
  background: #2563EB;             /* blue-600 */
  border-radius: 999px;
  width: 0%;
  transition: width 120ms linear;
}

/* =============================================================
 * チャット添付の「表示」「DL」ボタン行
 * - 添付カード内の下段にコンパクトに 2 ボタンを並べる
 * - モバイル 375px 幅でも親カードからはみ出さないよう min-width を抑制
 * - btn-xs は既存定義 (padding 3px 8px, font-size 11px) を使う
 * - 縦方向にも折り返せる（超狭幅で fallback）
 * ============================================================= */
.chat-att-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.chat-att-actions .btn {
  gap: 4px;
  /* Flexbox は既定で min-width: auto のため長いラベルで縮小できない。
     チャット添付のボタン (表示 / DL) は極小幅でも親からはみ出さないよう明示的にゼロを許可。 */
  min-width: 0;
  flex-shrink: 1;
  white-space: nowrap;
}
/* 画像サムネイル + ダウンロードボタンをまとめる小さなラッパー */
.chat-att-img-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
}

/* ダウンロード中のボタン（aria-busy="true"） */
.btn[aria-busy="true"],
.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* =============================================================
   一括選択 / 一括削除 UI（管理者専用）
   ============================================================= */

/* 一括選択操作バー（案件一覧 / 添付ファイルタブ 共通） */
.bulk-bar {
  background: #E8F1FF;
  border: 1px solid #155EEF;
  border-radius: 8px;
  padding: 10px 12px;
  /* iOS のセーフエリア考慮（下部固定にする場合に効かせる） */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.bulk-bar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bulk-bar .bulk-count {
  font-weight: 700;
  color: #0F172A;
  padding: 0 4px;
  white-space: nowrap;
}
.bulk-bar.is-busy .btn {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 「一括選択」トグルボタン（アクティブ時に押されている見た目） */
#bulk-select-toggle.is-active,
#files-bulk-toggle.is-active {
  background: #E8F1FF;
  color: #0F172A;
  border-color: #155EEF;
  box-shadow: inset 0 0 0 1px #155EEF;
}

/* チェックボックスラッパー（案件カード用） */
.bulk-cb-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 4px 4px;
  cursor: pointer;
  flex-shrink: 0;
  /* 押しやすさ確保: 44x44 の推奨タップターゲット */
  min-width: 44px;
  min-height: 44px;
}
/* 添付ファイルカード用: 右上に絶対配置（サムネの視認性を確保） */
.bulk-cb-wrap--file {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #FFFFFF;
  border: 1px solid #AEBAC8;
  border-radius: 6px;
  padding: 4px 6px;
  min-width: 36px;
  min-height: 36px;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.bulk-cb {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #155EEF;
  margin: 0;
}

/* 選択中のカード（案件・ファイル共通） */
.is-bulk-selected {
  background: #E8F1FF !important;
  border-color: #155EEF !important;
  box-shadow: 0 0 0 2px rgba(21, 94, 239, 0.12);
}

/* 削除ボタン: 一括削除は明示色 */
.btn-danger.is-disabled,
.btn-danger:disabled {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #B91C1C;
  opacity: 0.55;
  cursor: not-allowed;
}

/* モバイル: 選択操作バーの文字が縮まないように調整
   （ただし fixed 化はしない - 既存下部ナビ / bottom-safe-area と競合するリスクを避ける） */
@media (max-width: 480px) {
  .bulk-bar {
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .bulk-bar-inner {
    gap: 6px;
  }
  .bulk-bar-inner .btn {
    /* 小画面でも最低 32px 高さ確保 */
    min-height: 34px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .bulk-bar .bulk-count {
    font-size: 13px;
    flex-basis: 100%;
    order: -1; /* 件数を上段へ寄せて視認性向上 */
  }
}

/* ホーム画面「最近のチャット」の各行 — 案件チャットタブへのリンク */
.recent-chat-item {
  display: block;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.recent-chat-item:hover {
  background: #F1F5F9;
}
.recent-chat-item:active {
  transform: scale(0.99);
}
.recent-chat-item:focus-visible {
  outline: 3px solid rgba(21, 94, 239, 0.30);
  outline-offset: 2px;
}

/* =============================================================
   チャット本文内 URL リンク（.chat-linked）
   ------------------------------------------------------------
   app.js の renderChatBodyHtml() が生成する <a class="chat-linked">
   に対する共通スタイル。
   - 色: 既存アプリのブランドカラーに合わせた青系
   - 下線: リンクであることが常に判別できるよう常時表示
   - 折り返し: 長い URL でも吹き出し / スマホ幅を崩さないよう anywhere で改行
   - hover/active: 弱い濃淡変化でフィードバック
   - 外側が 1 行 truncate（.chat-row-msg / .recent-chat-item）の場合は
     親側の overflow:hidden により自動的に ellipsis 化される（幅崩れなし）
   ============================================================= */
.chat-linked {
  color: #1d4ed8;              /* blue-700 相当。ブランドカラーと親和 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;     /* 長 URL を任意位置で折り返し */
  word-break: break-word;      /* 旧 WebKit 互換 */
}
.chat-linked:hover {
  color: #1e40af;              /* blue-800 相当 */
  text-decoration-thickness: 2px;
}
.chat-linked:active {
  color: #1e3a8a;              /* blue-900 相当 */
}
.chat-linked:focus-visible {
  outline: 2px solid rgba(29, 78, 216, 0.45);
  outline-offset: 2px;
  border-radius: 2px;
}
/* 吹き出し内では色を吹き出し配色に馴染ませつつ、可視性は保つ */
.chat-bubble.mine .chat-linked {
  color: #1e3a8a;
}
.chat-bubble.others .chat-linked {
  color: #1d4ed8;
}

/* =============================================================
   重要なお知らせ (LINEアナウンス風カード)
   ------------------------------------------------------------
   仕様書 Section 2/7/20:
   - 重要度別に背景・左枠線色を切り替え（アクセシビリティ的にラベル文字でも判別可）
   - 未確認: 左上に赤丸ドット + 少し強い枠線 + 「未確認」ラベル
   - 確認済み: 弱い強調で残す（掲載期間中は自動非表示にしない）
   - スマホでは actions ボタンを折り返す（flex-wrap:wrap）
   ============================================================= */

.announcement-section-header h2 {
  color: #0F172A;
}

/* 重要度は廃止済み。すべてのお知らせを統一配色で表示する。
   推奨配色（仕様書）:
     背景     : #EFF6FF
     左枠線   : #155EEF
     タイトル : #0F172A
     本文     : #334155
     補足情報 : #64748B
     未確認ドット : #DC2626
     確認済み : #15803D */
.announcement-card {
  position: relative;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-left: 4px solid #155EEF;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.announcement-card.is-unread {
  /* 未確認は少し強めの枠線 */
  border-width: 2px;
  border-left-width: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* 未確認ドット (左上) */
.announcement-unread-dot {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 10px;
  height: 10px;
  background: #DC2626;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff;
}
.announcement-card.is-unread {
  padding-left: 28px; /* ドットぶんインデント */
}

.announcement-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* 重要度バッジ (.announcement-priority-badge) は廃止済み。定義なし。 */

.announcement-unread-label {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #DC2626;
  color: #ffffff;
}
.announcement-confirmed-label {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #BBF7D0;
}
.announcement-attach-label {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: #F1F5F9;
  color: #334155;
}

.announcement-title {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.4;
  margin: 2px 0 6px 0;
  word-break: break-word;
}
.announcement-body-preview {
  color: #334155;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
  margin-bottom: 8px;
}
.announcement-body-full {
  color: #334155;
  font-size: 14px;
  line-height: 1.65;
}
.announcement-meta {
  font-size: 11px;
  color: #64748B;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
}
.announcement-meta-sep {
  color: #cbd5e1;
}
.announcement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* 一般ユーザー向け一覧のタブ */
.tab-bar .ann-tab {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.tab-bar .ann-tab:hover { color: #0F172A; }
.tab-bar .ann-tab.active {
  color: #155EEF;
  border-bottom-color: #155EEF;
}

/* 詳細モーダル本体 (重要度別の枠色は廃止し、統一色 #155EEF の上枠線のみ) */
.announcement-modal {
  border-radius: 12px;
  max-width: 640px;
  width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-top: 4px solid #155EEF;
}

/* スマホでボタン列を折り返し・タップ領域確保 */
@media (max-width: 480px) {
  .announcement-actions .btn { flex: 1 1 auto; min-width: 44%; justify-content: center; }
  .announcement-card { padding: 12px 14px; }
  .announcement-card.is-unread { padding-left: 24px; }
  .announcement-title { font-size: 14px; }
}

/* =====================================================================
   チャット一覧「未読ツールバー」および一括既読ボタン
   ---------------------------------------------------------------------
   - チャット一覧画面 (renderChatPage) 上部、検索欄の直前に配置
   - PC: 未読件数を左、「すべて既読にする」ボタンを右（1 行）
   - スマホ: 幅が足りなければ自然に折り返す（flex-wrap）
   - 未読 0 件のときはボタン側を hidden 属性で非表示
   - ボタン色は青系のアウトライン（削除・危険操作と誤認されない）
   ===================================================================== */
.chat-list-unread-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.chat-unread-count {
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
}
.chat-unread-count strong {
  color: #dc2626;   /* 未読件数だけ赤字で強調（0 のときは 0 と表示） */
  font-weight: 700;
  margin: 0 2px;
}
/* 青系アウトラインボタン（.btn は既存 .btn の共通ベースを継承） */
.btn.btn-outline {
  background: #ffffff;
  color: #155EEF;
  border: 1px solid #93c5fd;
}
.btn.btn-outline:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #60a5fa;
}
.btn.btn-outline:disabled { opacity: .5; cursor: not-allowed; }
.chat-mark-all-read-btn {
  min-height: 34px;
  white-space: nowrap;
}

/* スマホ: タップ領域を 44px 相当に、ボタン全幅で折り返し */
@media (max-width: 480px) {
  .chat-list-unread-toolbar { gap: 6px; }
  .chat-mark-all-read-btn {
    min-height: 40px;
    padding: 8px 14px;
  }
}

/* ==================================================================
   案件一覧: 日付フィルタバナー
   ------------------------------------------------------------------
   ホームの「今日」カードから遷移した場合や、#f-date に日付が入っている
   間だけ表示される。既存の .card / .btn パターンに合わせ、
   ライトグレー背景 + ブランドカラーのフィルタアイコンで統一感を出す。
   スマホ幅では縦積みにしてタップ領域を確保。
   ================================================================== */
.date-filter-banner {
  margin-bottom: 12px;
}
.date-filter-banner.hidden { display: none; }
.date-filter-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #EFF6FF;              /* blue-50 相当（工事バッジと同系統） */
  border: 1px solid #BFDBFE;        /* blue-200 */
  color: #1E3A8A;                   /* blue-900：可読性を優先 */
  font-size: 14px;
  line-height: 1.4;
}
.date-filter-banner-label {
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 0;                     /* 長い日付ラベルの折り返し確保 */
  overflow-wrap: anywhere;
}
.date-filter-banner-clear {
  flex-shrink: 0;
  min-height: 34px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .date-filter-banner-inner {
    flex-direction: column;         /* 狭幅では縦積みで解除ボタン全幅 */
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .date-filter-banner-clear {
    min-height: 40px;               /* タップ 40px 以上 */
    width: 100%;
    justify-content: center;
  }
}