* { box-sizing: border-box; }

/* 受付・LINE返信の両画面で共通に使うフォントサイズ5段階。
   これまで 10〜16px がばらばらに指定されていたのを、役割ごとに集約する。
   h1=ページ見出し / h2=セクション見出し / body=本文・入力 / sub=小見出し・ラベル / note=補足 */
:root {
  --fs-h1: 18px;
  --fs-h2: 15px;
  --fs-body: 13.5px;
  --fs-sub: 12.5px;
  --fs-note: 11.5px;

  /* 色は役割で決める(受付・LINE返信 共通)。
     accent      = 実行・送信。ベタ塗りは主目的ボタン(登録・送信)だけに使う。
     accent-ink  = 緑の文字・枠線(白地でコントラストを確保)。
     accent-wash = 選択中・進行中の「うすい地色」。ベタ塗りの代わりに使う。
     ink-soft    = 補助文・ラベル。#888 より濃くして可読性を上げる。
     danger      = 削除・警告  /  warn = 注意・急ぎ */
  --accent: #06c755;
  --accent-ink: #05803a;
  --accent-wash: #e8f7ee;
  --accent-border: #a3ddba;
  --ink: #22282a;
  --ink-soft: #576460;
  --ink-faint: #7b847f;
  --line: #e3e7e4;
  --line-strong: #d4dad6;
  --danger: #c62828;
  --warn: #9a6410;
  --warn-wash: #fbf1de;
  --warn-border: #ecd6a8;
  --accent-wash2: #f3fbf6;
  --accent-dim: #9bd9b4;
  --info: #245a9e;
  --info-wash: #eef4fb;
  --bg: #f4f5f7;
  --lower: #eef0ef;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  margin: 0;
  background: var(--bg);
  color: #222;
}
/* 頭のバーは薄いオレンジの地に赤の字(部品注文アプリの頭と同じ。社長の指示 9/21) */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  border-bottom: 1px solid var(--accent-border);
}
header h1 { font-size: var(--fs-h1); margin: 0; }
/* 会話画面の頭：お客様の名前は残り幅いっぱいで右寄せ・長ければ省略(右端のベルに隠れないように・9/21) */
header.conv-head h1 { flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; }
header a.back { color: var(--accent-ink); text-decoration: none; margin-right: 12px; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-actions .link-btn { white-space: nowrap; } /* 右にベル(自分宛の通知)が入っても「ログアウト」が折れないように(9/21) */
@media (max-width: 480px) { .header-actions { gap: 10px; } }
.link-btn { background: none; border: none; color: var(--accent-ink); text-decoration: underline; cursor: pointer; font-size: 14px; }
a.link-btn { text-decoration: none; }
a.link-btn:hover { text-decoration: underline; }

.login-box {
  max-width: 320px;
  margin: 80px auto;
  padding: 24px;
  background: white;
  border-radius: 8px;
  text-align: center;
}
.login-box input, .login-box button, .draft-panel input, .draft-panel textarea {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}
.login-box button, .draft-panel button {
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
}
/* 「送信」ボタンと見た目・押し間違いを区別するための控えめなスタイル(記録のみ・送信しない操作用) */
.draft-panel button.btn-log-only {
  background: white;
  color: #666;
  border: 1px solid #ccc;
  font-weight: normal;
  margin-left: 6px;
}

/* ボタンの重要度を3段階に分ける。
   btn-send      = お客様へ実際に送信する不可逆操作。一番強く見せる(濃い緑・大きめ)。
   (無印)        = 文案生成・検索など、やり直しがきく操作。緑のまま。
   btn-secondary = 上と同じ画面内で主役ではない操作。緑の枠線だけにして面積を弱める。
   btn-log-only  = 送信しない記録専用。グレーで最も控えめ。 */
.draft-panel button.btn-send {
  background: var(--accent-ink);
  font-size: var(--fs-h2);
  padding: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.draft-panel button.btn-secondary {
  background: white;
  color: var(--accent-ink);
  border: 1px solid var(--accent-ink);
  font-weight: normal;
}
.error { color: #d33; }

/* --- ホーム画面の導入(2026-09-06)に伴う追記。ホーム自体は public/home.css --- */
/* 受信箱の上部: 文字の題名をやめてロゴ(白地) */
header.brandbar { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); padding: 8px 16px; }
header.brandbar .header-logo { height: 32px; width: auto; display: block; }
header.brandbar .link-btn { color: var(--info); }
/* 受信箱の戻る導線(社長 10/11「PC だと『前の画面に戻る』『ホームに戻る』が出ない」)：ロゴの帯のすぐ下に、PC・スマホともいつも見える形で */
.ib-nav { flex: none; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; padding: 2px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.ib-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.ib-nav a[hidden] { display: none; }
.rail a.rail-item { text-decoration: none; }
/* ログイン画面もロゴ */
.login-box .login-logo { display: block; width: 100%; max-width: 250px; height: auto; margin: 0 auto 6px; }
.login-box h1 { font-size: 14px; color: var(--ink-soft); font-weight: normal; margin: 0 0 12px; }
/* (スマホ幅の受信箱の指定はファイル末尾。.rail 等の既存指定より後に置かないと負ける) */

/* --- 3ペイン ダッシュボード(受信一覧) --- */
/* スマホのブラウザはアドレスバー表示中、100vhが実際に見える高さより大きくなることがある
   (よくある「100vh問題」)。vh/dvhは画面の拡大率やOS側の表示スケーリングの端数処理で
   実際の表示より数十px短くなることがあり(2026-10-24 社長の環境で下に空白ができた)、
   position:fixed+insetで実際のビューポートそのものに固定する方が確実なため、
   vh/dvh計算はやめてこちらに統一する。 */
.dashboard-body { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.dashboard-body header { flex: none; }
.app { flex: 1; display: flex; min-height: 0; }

.rail {
  flex: none; width: 68px; background: white; border-right: 1px solid #e4e6ea;
  display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 4px;
}
.rail-item {
  width: 52px; height: 52px; border: none; background: none; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; color: #999;
}
.rail-item svg { width: 22px; height: 22px; }
.rail-item .rail-label { font-size: 9.5px; line-height: 1; white-space: nowrap; }
.rail-item.active { background: var(--accent-wash); color: var(--accent-ink); }
.rail-item:disabled { cursor: not-allowed; opacity: .45; }
/* ヘッダー廃止(2026-10-24 社長の指示)で、ログアウト・通知ベルをレールの一番下に寄せる。
   margin-top:auto でレールの残りの縦の空きを全部この要素より上に押し込み、一番下に固定する。 */
.rail-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rail-bottom form { display: contents; }
.rail-item:not(:disabled):not(.active):hover { background: #f1f2f4; color: #666; }

.panel { display: none; flex: 1; min-width: 0; }
.panel.active { display: flex; }

.list-pane {
  width: 340px; flex: none; background: white; border-right: 1px solid #e4e6ea;
  display: flex; flex-direction: column; min-width: 0;
}
/* 受信箱トップの「新規作成 / LINE WORKS を開く」ボタンと「過去のやり取りを探す」 */
.list-top { padding: 10px 14px 0; }
.list-top-btns { display: flex; gap: 8px; margin-bottom: 8px; }
.new-thread-btn, .lineworks-open-btn {
  flex: 1; text-align: center; padding: 8px 6px; border-radius: 6px; font-size: 12px;
  text-decoration: none; font-weight: bold;
}
.new-thread-btn { background: var(--accent-ink); color: white; }
.lineworks-open-btn { background: var(--info-wash); color: var(--info); border: 1px solid var(--line-strong); }
.contact-search { position: relative; }
.contact-search input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; }
.contact-search-results { border: 1px solid #e0e0e0; border-radius: 6px; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.contact-search-results:empty { display: none; }
.contact-search-results .row { display: block; padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 12.5px; color: #222; text-decoration: none; }
.contact-search-results a.row:hover { background: var(--info-wash); }
.contact-search-results .row.empty { color: #888; text-align: center; }
.contact-search-results .row .meta { color: #777; font-size: 11.5px; }
.contact-search-results .row-group-label { padding: 6px 10px; font-size: 11px; font-weight: bold; color: #888; background: var(--bg); }
.contact-search-results .mini-btn { display: inline-block; margin-top: 4px; font-size: 11px; padding: 2px 6px; background: var(--info-wash); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--info); text-decoration: none; }

.today-stats { display: flex; gap: 8px; padding: 12px 14px 0; }
.stat-card { flex: 1; background: var(--bg); border-radius: 8px; padding: 8px 6px; text-align: center; }
.stat-card .stat-label { font-size: 10.5px; color: #666; white-space: nowrap; }
.stat-card .stat-value { font-size: 17px; font-weight: bold; margin-top: 2px; }
.stat-card.total .stat-value { color: var(--accent-ink); }

.yesterday-stats { margin: 6px 14px 0; font-size: 11px; color: #999; }

.list-controls { display: flex; gap: 8px; padding: 10px 14px; }
.list-controls input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 13.5px; }
.list-controls select { padding: 8px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 13.5px; background: white; }

.inbox-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; border-top: 1px solid #e4e6ea; }
.inbox-list li { border-bottom: 1px solid #e0e0e0; background: white; }
.inbox-list li.empty { padding: 24px; text-align: center; color: #888; font-size: 13.5px; }
.inbox-list a { display: block; padding: 12px 14px; text-decoration: none; color: #222; }
.inbox-list .name { font-weight: bold; display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.inbox-list .badge { background: #ff5b5b; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; }
.inbox-list .badge.channel-badge { background: #4a86e8; }
.inbox-list .badge.internal-badge { background: #999; }
.inbox-list .badge.attention-badge { background: #e05252; }
.inbox-list .preview { color: #666; font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-list .time { color: #999; font-size: 11px; margin-top: 2px; }
.inbox-list li.needs-reply { background: #fff8e6; }
.inbox-list li.selected { background: var(--accent-wash); }
.inbox-list li.needs-reply.selected { background: var(--accent-wash); }
/* 担当者への確認が必須な相手からの問い合わせを見逃さないための強調表示。
   needs-reply(要対応)より優先して目立たせるため、より濃い色+左端の帯を付ける。 */
.inbox-list li.needs-attention { background: #ffe1e1; border-left: 4px solid #e05252; }
.inbox-list li.needs-attention.selected { background: var(--accent-wash); border-left: 4px solid #e05252; }

.conv-pane { flex: 1; min-width: 0; position: relative; background: var(--bg); }
.conv-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #aaa; gap: 14px;
}
.conv-empty svg { width: 88px; height: 88px; opacity: .5; }
.conv-empty p { font-size: 14px; margin: 0; }
.conv-iframe { width: 100%; height: 100%; border: none; display: none; }
.conv-iframe.full { display: block; flex: 1; }

.conv-embed-header {
  display: flex; align-items: center; gap: 8px; padding: 12px 20px;
  background: white; border-bottom: 1px solid #e4e6ea; font-size: 14.5px;
}
.conv-embed-sub { color: #666; font-size: 12px; }

.internal-toggle {
  display: block; font-size: 12.5px; color: #666; background: var(--bg);
  padding: 8px 16px; margin: 0; border-bottom: 1px solid #e4e6ea;
}
.internal-toggle input { margin-right: 6px; vertical-align: middle; }
#internalStatus { font-size: 11.5px; color: #999; margin: 2px 16px 0; }

.status-panel {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 13px; color: #444; background: white; padding: 10px 16px; border-bottom: 1px solid #e4e6ea;
  position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.status-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.status-actions button {
  font-size: 12px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px;
  background: white; cursor: pointer;
}
.status-actions button:hover { background: var(--bg); }
#statusMsg { font-size: 11.5px; color: #999; margin: 2px 16px 0; }

.in-progress { font-size: 11.5px; color: #b8860b; margin-top: 2px; }

.thread { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.unread-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; color: #ff5b5b; font-size: 12px; }
.unread-divider::before, .unread-divider::after { content: ''; flex: 1; height: 1px; background: #ff5b5b; opacity: 0.4; }
.bubble { max-width: 80%; padding: 10px 12px; border-radius: 10px; background: white; }
.bubble.customer { align-self: flex-start; background: white; }
.bubble.staff { align-self: flex-end; background: var(--accent-wash); } /* こちら側の吹き出し。緑(LINE 風)から土台の薄いオレンジへ(9/21) */
.bubble p { margin: 0; white-space: pre-wrap; }
/* 全文英語で届いたメッセージに添える日本語訳。原文の下に、区切り線付きで控えめに表示する
   (白黒印刷でも区別できるよう、色ではなく区切り線とラベルで分ける)。 */
.bubble .translation { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #b9c2b9; font-size: 13px; color: #555; }
.bubble .translation-label { display: block; font-size: 10.5px; color: #888; margin-bottom: 2px; }
.bubble img { max-width: 100%; border-radius: 6px; display: block; }
.bubble .time { display: block; font-size: 11px; color: #999; margin-top: 4px; }
.bubble.image-group { max-width: 90%; }
.image-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.image-grid img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.msg-video { max-width: 100%; max-height: 260px; border-radius: 6px; display: block; }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: var(--bg); border-radius: 8px; text-decoration: none; color: #333;
  font-size: 13.5px; word-break: break-all;
}
.file-chip:hover { background: #e9eaec; }

.draft-panel { padding: 16px; background: white; margin: 12px; border-radius: 8px; }

/* すぐに返信の添付ファイル一覧(1件ずつ内容確認・個別削除できるようにする) */
.attach-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.attach-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg); border: 1px solid #e0e0e0; border-radius: 6px; padding: 6px 10px;
  font-size: 13px; color: #333;
}
.attach-list .attach-name { word-break: break-all; }
.attach-list .attach-del {
  flex: none; width: auto; margin: 0; padding: 4px 10px; font-size: 12px;
  background: white; color: #d33; border: 1px solid #d9a3a3; font-weight: normal;
}
.attach-list .attach-del:hover { background: #fdeaea; }

/* チェックした画像がページのどこにあっても、送信ボタンをスクロールなしで押せるように画面下部に固定する */
#imageSendBar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); border: 1px solid #e4e6ea;
}
#imageSendBar p { margin: 0; font-size: 13px; }
#imageSendBar button { margin-top: 0; }
.draft-panel label { display: block; margin-top: 12px; font-size: 13px; color: #555; }
#status { color: var(--accent-ink); font-size: 14px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.thumbs img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
.zoomable { cursor: zoom-in; }
.lightbox {
  display: flex; position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out; padding: 24px;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.nav-link { display: inline-block; margin: 12px; color: var(--accent-ink); text-decoration: none; font-weight: bold; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip-group .chip {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid #ccc;
  background: white;
  color: #333;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}
.chip-group .chip.active { background: var(--accent); border-color: var(--accent); color: white; font-weight: bold; }
#draftSegments > div { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #ddd; }
#draftSegments > div:first-child { border-top: none; }

.manual-results { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.manual-result { border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 12px; }
.manual-result strong { display: block; font-size: 13.5px; margin-bottom: 6px; }
.manual-result button { width: auto; font-size: 12.5px; padding: 6px 10px; }
.manual-insert-all {
  display: block; margin-bottom: 8px; background: #444 !important;
}
.manual-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 520px) {
  .manual-blocks { grid-template-columns: 1fr; }
}
.manual-block { border: 1px solid #e8e8e8; border-radius: 6px; overflow: hidden; }
.manual-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--accent-wash2); padding: 5px 8px; font-size: 12.5px; font-weight: bold; color: #333;
}
.manual-block-internal { border-color: #e0a83c; }
.manual-block-internal .manual-block-head { background: #fdf0d9; color: #8a5a00; }
.manual-block-head button { padding: 4px 8px; font-size: 11.5px; }
.manual-text {
  white-space: pre-wrap; word-break: break-word; font-family: inherit;
  font-size: 12.5px; background: var(--bg); padding: 6px 8px; margin: 0; max-height: 160px; overflow-y: auto;
}

/* --- 部位・ブランド選択の共通ウィジェット(part-picker.js) --- */
/* 折り返す横並びピル型チップをやめ、端がそろった見た目にする。
   選択中はアクセントのベタ塗りではなく、うすい地色＋チェック。 */

/* 7カテゴリの部位ピッカー */
.pp { display: block; }
/* 折り返す横並びピルにしない。端をそろえた等幅グリッドで、全セル同じ高さ。 */
.pp-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pp-tab {
  font: inherit; font-size: var(--fs-sub); cursor: pointer;
  padding: 7px 12px; border-radius: 6px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px; text-align: left;
  min-height: 46px; line-height: 1.28;
}
.pp-tab-t { display: block; }
.pp-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.pp-tab:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.pp-tab.is-on { background: var(--accent-wash); border-color: var(--accent-border); color: var(--accent-ink); font-weight: bold; }
.pp-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.pp-panel {
  display: flex; flex-wrap: wrap; gap: 6px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-height: 54px; background: #fff;
}
.pp-opt {
  font: inherit; font-size: var(--fs-sub); cursor: pointer;
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
}
.pp-opt:hover { border-color: var(--accent); }
.pp-opt:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.pp-opt.is-on {
  background: var(--accent-wash); border-color: var(--accent-border); color: var(--accent-ink); font-weight: bold;
}
.pp-opt.is-on::before { content: "\2713\00a0"; }

/* ブランド選択ドロップダウン(M1) */
.pp-dd { position: relative; max-width: 300px; }
.pp-dd-btn {
  width: 100%; font: inherit; font-size: 13px; cursor: pointer; text-align: left;
  padding: 9px 32px 9px 12px; border: 1px solid #cfd4db; border-radius: 8px;
  background: #fff; color: #222; position: relative;
}
.pp-dd-btn::after {
  content: "\25BE"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #8a919e;
}
.pp-dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pp-dd-ph { color: #8a919e; }
.pp-dd-menu {
  list-style: none; margin: 6px 0 0; padding: 4px; position: absolute; z-index: 30; left: 0; right: 0;
  background: #fff; border: 1px solid #cfd4db; border-radius: 8px;
  box-shadow: 0 8px 24px -12px rgba(20, 26, 33, 0.25); max-height: 244px; overflow-y: auto;
}
.pp-dd-menu[hidden] { display: none; }
.pp-dd-menu li {
  padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; color: #222;
}
.pp-dd-menu li:hover { background: var(--bg); }
.pp-dd-menu li.is-on { color: #058a3d; font-weight: bold; }
.pp-dd-mk { width: 12px; flex: none; visibility: hidden; }
.pp-dd-menu li.is-on .pp-dd-mk { visibility: visible; }

/* --- スマホ幅の受信箱(2026-09-06 ホーム導入時に追加。既存の .rail/.list-pane/.conv-pane より後に置くこと) ---
   左レールと右ペイン(iframe)を出さず、一覧だけを全幅に。会話は別画面で開く(inbox.ejs のJSと対)。
   各ツールへの入口はホーム(/)が担う。 */
@media (max-width: 760px) {
  /* 2026-10-24でログアウト・通知ベルをレールの下部(.rail-bottom)に移したが、レール自体を
     display:none にすると、その中のログアウト・ベルもろとも消え、スマホでログアウトする
     手段が無くなってしまった(社長の指摘・2026-10-25)。ツール切り替えのアイコンは今までどおり
     隠す(各ツールへの入口はホーム(/)に任せる設計のまま)が、レールは消さずに横長の細いバーへ
     変え、ログアウト・ベル(.rail-bottom の中身)だけは常に見える位置に残す。 */
  .app { flex-direction: column; }
  .rail {
    width: 100%; height: auto; flex-direction: row; justify-content: flex-end;
    border-right: 0; border-bottom: 1px solid #e4e6ea; padding: 6px 10px; gap: 10px;
  }
  .rail > .rail-item { display: none; }
  .rail-bottom { margin-top: 0; flex-direction: row; gap: 10px; }
  .list-pane { width: 100%; border-right: 0; }
  .conv-pane { display: none; }
  .today-stats { flex-wrap: wrap; }
  /* 画面内スクロール(高さ固定)をやめ、ページ全体をふつうにスクロールさせる。
     固定高さのままだと、お知らせ・件数・検索欄で高さを使い切り、一覧がほぼ見えなくなる */
  .dashboard-body { height: auto; overflow: visible; display: block; }
  .app { display: block; }
  .panel.active { display: block; }
  .inbox-list { overflow: visible; }
  #noticePanel .np-box.np-open .np-body { max-height: 200px; overflow-y: auto; }
}

/* /login 専用。既存画面のフォーム・ヘッダー指定から分離する。 */
body.login-page {
  background: #fff;
  color: var(--ink);
}
body.login-page .login-header {
  height: 64px;
  padding: 0 24px;
  justify-content: flex-start;
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
body.login-page .login-brand {
  display: block;
  height: 36px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
body.login-page .login-main {
  position: relative;
  padding: 56px 0 40px;
}
body.login-page .login-heading {
  margin: 0 20px 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
body.login-page .login-stage {
  position: relative;
  isolation: isolate;
}
body.login-page .login-card {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: 400px;
  margin: 0 auto;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
body.login-page .login-staff {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}
body.login-page .login-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
body.login-page .login-error {
  margin: 0 0 12px;
  color: #c62828;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body.login-page .login-password {
  display: block;
  width: 100%;
  height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
body.login-page .login-submit {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 20px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: #e00000; /* マスコットの赤に合わせる(社長の指示 9/18) */
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms;
}
body.login-page .login-submit:hover { background: #c40000; }
body.login-page .login-password:focus,
body.login-page .login-submit:focus {
  outline: 2px solid #9a0000;
  outline-offset: 3px;
}
body.login-page .login-characters {
  position: absolute;
  z-index: 0;
  /* 足元を内容で伸びる枠の高さの75%に合わせる。高さは幅に応じて(1280 で詰まらないように) */
  --chara-h: clamp(140px, 13vw, 200px);
  top: calc(75% - var(--chara-h));
  left: 0;
  right: 0;
  height: var(--chara-h);
  overflow: hidden;
  pointer-events: none;
}
body.login-page .login-character-group {
  position: absolute;
  top: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 3.5vw, 60px);
  box-sizing: border-box;
  width: calc(50% - 220px);
  height: var(--chara-h);
}
/* 枠に近い側から並べ、入り切らない分は画面の外側で切れる(手本と同じ「列が外まで続く」見え方) */
body.login-page .login-character-group-left { left: -40px; justify-content: flex-end; padding-right: 28px; }
body.login-page .login-character-group-right { right: -40px; justify-content: flex-start; padding-left: 28px; }
body.login-page .login-characters img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: var(--chara-h);
}
/* 1799px までは左右 2 体ずつ(3 体だと右側が入り切らない)。1800 以上で 3 体 */
@media (min-width: 601px) and (max-width: 1799px) {
  body.login-page .login-characters .login-character-desktop { display: none; }
}
@media (max-width: 600px) {
  body.login-page .login-header { height: 56px; padding: 0 16px; }
  body.login-page .login-brand { height: 30px; }
  body.login-page .login-main { padding-top: 28px; }
}
/* 1024px 以下(スマホ・タブレット)は枠の後ろに置くと切れるので、枠の下に横一列 */
@media (max-width: 1024px) {
  body.login-page .login-characters {
    position: static;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 96px;
    margin-top: 32px;
  }
  body.login-page .login-character-group { display: contents; }
  body.login-page .login-characters img {
    /* 390pxでは96px。さらに狭い画面でも4体の比率と足元を保つ。 */
    height: min(96px, 24.8vw);
  }
  body.login-page .login-characters .login-character-desktop { display: none; }
}

/* 文案の前に AI が読み取った補足(メーカー・修理箇所)の箱(9/18) */
.ai-note { margin: 8px 0 12px; padding: 10px 12px; background: var(--info-wash); border: 1px solid var(--accent-border); border-radius: 8px; font-size: 13.5px; }
.ai-note .ai-note-head { font-weight: 700; color: var(--info); margin-bottom: 4px; }
.ai-note .ai-note-head small { font-weight: 400; color: var(--ink-soft); }
.ai-note pre { margin: 0; white-space: pre-wrap; font: inherit; color: var(--ink); }
.ai-note .ai-note-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ai-note .ai-note-actions button { margin: 0; width: auto; padding: 6px 12px; font-size: 13px; }
.ai-note .ai-note-actions span { font-size: 12.5px; color: var(--ink-soft); }