/* src/features/email/EmailInboxPanel.css
   受信トレイ行のレスポンシブ・レイアウト（2026/6/10）。
   ・スマホ（既定）：超圧縮の3行構成（1行目=差出人/顧客名＋受信時刻／2行目=件名／3行目=本文プレビュー）。
   ・PC（md=768px 以上）：完全1行構成（左=差出人固定幅／中央=件名＋プレビュー／右=受信時刻）。
   色はテーマ依存のため CSS 変数（--eib-*）でコンポーネントから注入。レイアウトのみ本 CSS で固定。
   件名/プレビューが空（データ未投入）の間は :empty で行を畳み、データ到着時に自動で展開される。 */

.eib-list {
  display: flex;
  flex-direction: column;
  gap: 3px;                     /* スマホ：カード間隔を最小に */
}

/* 受信アドレス表示チップ（コピー付き・2026/6/12）。Gmail 風の控えめな1行。ヘッダ右端に配置。
   色はコンポーネントから inline で注入（テーマ依存）。レイアウト・タイポのみ本 CSS。
   ★スマホで入り切るよう 1 行固定＝アドレスは ellipsis(…) で縮め、コピーボタンは常に右端に残す（全文はコピーで取得）。 */
.eib-addr {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;            /* 折り返さず 1 行（縮める） */
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 2px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.3;
  min-width: 0;                 /* 子の ellipsis を効かせるため */
  overflow: hidden;
}
.eib-addr-label {
  flex-shrink: 0;
  white-space: nowrap;
}
/* スマホ（〜767px）はラベル文言を隠して横幅をアドレスへ回す（社員名は社員セレクタ側で確認できる）。 */
@media (max-width: 767px) {
  .eib-addr-label { display: none; }
}
.eib-addr-value {
  flex: 0 1 auto;
  min-width: 0;                 /* これが無いと ellipsis が効かない */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;      /* 入り切らない分は … で省略（全文はコピーで取得） */
}
.eib-addr-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;               /* コピーボタンは縮まず常に右端に残す */
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
}
.eib-addr-none { flex-shrink: 0; opacity: 0.75; white-space: nowrap; }

.eib-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 10px;           /* スマホ：上下を極限まで圧縮（さらに薄く） */
  border-radius: 8px;
  cursor: pointer;
}

.eib-dots {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  width: 7px;
  padding-top: 4px;
}
.eib-dot { width: 7px; height: 7px; border-radius: 50%; }
.eib-dot-unread { background: #3B82F6; }
.eib-dot-reply { background: #EF4444; }

.eib-body {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "sender time"
    "main   main";
  column-gap: 8px;
  row-gap: 0;                   /* 行間ゼロ＝3行をぴったり詰める */
  align-items: baseline;
}

.eib-sender {
  grid-area: sender;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--eib-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eib-time {
  grid-area: time;
  font-size: 11px;
  line-height: 1.15;
  color: var(--eib-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.eib-main { grid-area: main; min-width: 0; max-width: 100%; overflow: hidden; }

.eib-subject {
  display: block;              /* span を block 化＝inline では overflow/ellipsis が効かない（スマホはみ出し対策） */
  max-width: 100%;
  min-width: 0;
  font-size: 12px;
  line-height: 1.15;
  color: var(--eib-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eib-preview {
  display: block;              /* 同上：block 化しないとスマホ(非flex)で省略記号が出ず右にはみ出す */
  max-width: 100%;
  min-width: 0;
  font-size: 12px;
  line-height: 1.15;
  color: var(--eib-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 未読＝差出人・件名を太字（共通ルール） */
.eib-unread .eib-sender,
.eib-unread .eib-subject { font-weight: 700; }

/* 本文プレビューのみ、空のときに行を畳む（件名行は常時表示＝空なら画面側で「件名なし」）。 */
.eib-preview:empty { display: none; }

/* 一覧最下部が固定の下部ナビ／FAB に被る不具合の確実修正（2026/6/13 再修正・★CSS のみ＝JS state 非依存）。
   実測根拠：固定ナビ実総高 ≈102px（ボタン padding10+icon22+gap6+label16+10=64 ＋ ナビ上下10/28）。
            モバイルの円形 FAB は fixed bottom:124px(+safe)・直径56 ＝ ★上端 ≈180px(+safe)。
   旧修正(40+safe)＝mainContent(120)+(.eib-panel 40+safe)=160+safe では、末尾行下端(160) が ナビ(102)は越えるが
            ★FAB 上端(180) を越えられず＝末尾が FAB の下に潜っていた（これが「入りきらない/被る」の正体）。
   修正：モバイルは FAB 上端を越えるクリアランス（120+96+safe=216+safe ＞180+safe）に。PC は FAB 無し＝ナビ+余裕（120+64=184＞102）。
   ・768px 境界は isPC(useIsDesktop) と一致＝JS 分岐と CSS が常に同方向。リサイズはブラウザが CSS で即追従（JS state stale を排除）。
   ・.eib-panel は受信トレイ/送信済み/ゴミ箱/下書きを全内包する EmailInboxPanel ルート＝この1本で全 view の末尾余白を担保。
   ・下部ナビ下 padding の safe-area 連動は App.jsx 側（792244c）で実施済み。 */
.eib-panel { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
@media (min-width: 768px) {
  .eib-panel { padding-bottom: 64px; }
}

/* ===== PC（md 以上）：完全1行構成 ===== */
@media (min-width: 768px) {
  .eib-row {
    align-items: center;
    padding: 18px 14px;         /* PC：各行の上下余白をもう一段広げる（12px→18px・前回と同程度の増分・2026/6/12 二宮さん要望(2)／スマホは不変）。同 .eib-row を使う送信済み一覧も自動で揃う。 */
    min-height: 28px;           /* 本文プレビュー空などで極端に薄くならない下限。 */
  }
  .eib-body {
    grid-template-columns: 160px minmax(0, 1fr) auto;  /* PC-8：差出人列を抑え（210→160px）件名を主表示にして読める幅を確保。 */
    grid-template-areas: "sender main time";
    column-gap: 12px;
    align-items: baseline;
  }
  /* PC：主要テキストを少し大きく（Gmail 程度の可読性）。 */
  .eib-sender { font-size: 15px; }
  .eib-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
  }
  .eib-subject {
    /* PC-8：本文プレビューは PC で非表示のため、件名は残り幅をフルに使う（旧 max-width:42% で不要に件名が切れていた）。 */
    flex: 1;
    min-width: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .eib-preview {
    flex: 1;
    min-width: 0;
    font-size: 13px;
  }
  .eib-time { font-size: 13px; }
}
/* Reset & base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

/* 縦スクロールバー幅(::-webkit-scrollbar=8px・非オーバーレイ)の有無で window 利用可能幅が変わり、
   中央寄せ(mainContent margin:0 auto)の中身が左右に約4px ブレる問題への対処（2026/6/12・PC-9 横ブレ解消）。
   root スクローラに gutter を常時確保＝スクロールバーの出没（受信=件数多で有／送信=少/空で無 等）に依らず
   表示幅を一定化し、画面切替時の横ブレを無くす。未対応ブラウザ(旧Safari)は従来挙動にフォールバック（無害）。 */
html {
  scrollbar-gutter: stable;
}

body {
  font-family: "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #09090b;
  color: #fafafa;
}

input,
textarea,
select,
button {
  font-family: inherit;
}

/* iOS でズームを防ぐため、入力フィールドは最低 16px */
input,
textarea,
select {
  font-size: 16px;
}

/* スクロールバー（任意） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   Phase 24b 後続 (2026/5/27 セッション 58): 顧客一覧クイックアクション 3 ボタンの
   モバイル対応。プロジェクト全体は inline style 設計だが、メディアクエリ分岐は CSS
   側でしか書けないため、本セクションでのみ class セレクタを使用 (CrmPanel.jsx
   の 3 ボタンで className 指定)。

   ブレークポイント 640px: Tailwind の sm 互換、業界標準 (Apple HIG / Material
   Design でも mobile/tablet 境界として一般的)。

   PC (>= 641px) の表示:
     [📋 活動] [💰 売上] [📁 案件]
     - .qa-btn-icon: 絵文字表示 (📋 / 💰 / 📁)
     - .qa-btn-label: テキスト表示 (活動 / 売上 / 案件)
     - .qa-btn-mobile-label: 非表示 (display: none)

   スマホ (<= 640px) の表示 (2026/5/27 セッション 58 後半 更新):
     [動] [売] [件]
     - .qa-btn-icon: 非表示 (display: none、絵文字を消して幅を稼ぐ)
     - .qa-btn-label: visually-hidden (sr-only パターン、DOM 残置で a11y 維持)
     - .qa-btn-mobile-label: 漢字 1 文字表示 (動 / 売 / 件)
     - .qa-btn: 最小サイズに縮小 (高さ 24px 程度、padding 最小)

   a11y: スマホでも .qa-btn-label は visually-hidden で DOM に残し、スクリーン
   リーダーが「活動」「売上」「案件」を読み上げ可能。さらに button 自体に
   aria-label="活動記録" 等のフルラベルがある (CrmPanel.jsx 側で指定)、title 属性
   も併用で 3 層防御。
   ============================================================ */

/* PC 既定: スマホ専用ラベルを非表示 */
.qa-btn-mobile-label {
  display: none;
}

@media (max-width: 640px) {
  /* スマホ表示: 絵文字を完全に非表示 (幅節約) */
  .qa-btn-icon {
    display: none;
  }
  /* スマホ表示: PC 用テキスト「活動」「売上」「案件」を視覚的に隠す (sr-only パターン)。
     display: none ではなくスクリーンリーダーには残す手法 = a11y 維持 (button の
     aria-label と併せて 2 層防御)。 */
  .qa-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* スマホ表示: 漢字 1 文字「動」「売」「件」を表示 */
  .qa-btn-mobile-label {
    display: inline;
  }
  /* スマホ表示: ボタンサイズを最小化。
     漢字 1 文字なので min-width 24px / min-height 24px で十分、tap target は
     ブラウザ既定 (約 24-28px) を尊重しつつ最小、複数ボタン横並びでも会社名表示
     領域を最大化。 */
  .qa-btn {
    padding: 4px 6px !important;
    font-size: 13px !important;
    font-weight: 700;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}