:root {
  --font-sans: 'Noto Sans JP', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ベースカラー: TSUNAGARU 寄りのクールニュートラル */
  --color-bg: #f5f7fa;
  --color-bg-card: #ffffff;
  --color-bg-subtle: #eef1f5;
  --color-bg-hover: #e8ecf2;
  --color-border: #e3e8ee;
  --color-border-strong: #c9d1db;
  --color-text: #1d2733;
  --color-text-muted: #5a6878;
  --color-text-subtle: #6e7a89; /* AA 4.6:1 OK (旧 #8a96a4 は3.1:1 でNGだった) */

  /* ブランドアクセント (TSUNAGARU ティール)
     - accent: 主役 (背景・bordere・large-text用 ※小文字テキスト用ではない)
     - accent-hover: hover 背景遷移用 (テキストには使わない)
     - accent-text: 小文字テキスト用 darker (white背景で 6.8:1 OK)
     - accent-deep: accent-soft 背景上のテキスト用 (8.4:1 OK)
  */
  --color-accent: #0fa9b8;
  --color-accent-strong: #0b7a86;
  --color-accent-hover: #0e8c98;
  --color-accent-text: #086570;
  --color-accent-soft: #e0f4f6;
  --color-accent-subtle: #f0fafb;
  --color-accent-deep: #0a6b75;

  /* state */
  --color-success: #1e7c3a;
  --color-success-soft: #e8f4ec;
  --color-info: #1e6e94;
  --color-info-soft: #e6f0f6;
  --color-danger: #c43030;
  --color-danger-strong: #a82828;
  --color-danger-soft: #fbeaea;
  --color-warning: #b46a10;
  --color-warning-soft: #fdf3e0;

  /* スペーシング (8px grid, Notion風) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* タイポスケール (Stripe風 -letter-spacing) */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;

  /* radius */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
}
body { height: 100vh; }
.app { max-width: 100vw; overflow-x: hidden; }
.tabular { font-variant-numeric: tabular-nums; }

.app {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
}

/* === Header (TSUNAGARU風: 高さ56px・コンパクト・呼吸スペース) === */
.site-header {
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  height: 56px;
}
.header-inner {
  padding: 0 var(--sp-6);
  height: 56px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  flex: 1;
  min-width: 0;
}
.logo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--color-text);
}
.current-page {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 4px 10px;
  background: var(--color-bg-subtle);
  border-radius: 999px;
  white-space: nowrap;
}
.brand-tag {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  border-left: 1px solid var(--color-border);
  padding-left: var(--sp-3);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .brand-tag { display: none; }
}

.tabs {
  display: flex;
  gap: var(--sp-3);
  flex: 1;
  flex-wrap: nowrap;
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
  align-items: center;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px 2px var(--sp-2);
  border-radius: var(--r-md);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.tab-group .tab {
  height: 28px;
  padding: 0 var(--sp-2);
}
.tab-group-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-right: var(--sp-2);
  margin-right: 2px;
  border-right: 1px solid var(--color-border);
  height: 18px;
  line-height: 18px;
}
@media (max-width: 720px) {
  .tabs { gap: var(--sp-2); }
  .tab-group { padding: 2px 4px; }
  .tab-group-label { display: none; }
}
.tab {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0 10px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 150ms ease, color 150ms ease;
  height: 28px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}
.tab.active {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}
.tab-badge {
  background: var(--color-border-strong);
  color: var(--color-text);
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: center;
  font-weight: 500;
}
.tab.active .tab-badge {
  background: var(--color-accent);
  color: white;
}

/* ヘッダー右側 meta-tag は通常ノイズなので大半を非表示化 */
.header-meta {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.meta-tag {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  background: transparent;
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* 個人情報マスキング済み・件数履歴・顧客数は通常時は隠す (情報過多防止) */
#footerMaskNote, #totalPairs, #totalCustomers { display: none; }

/* footerStatus はエラー時のみ目立たせる */
#footerStatus {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  font-weight: 500;
}
#footerStatus.has-error,
#footerStatus[class*="error"],
#footerStatus[class*="エラー"] {
  background: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
  font-weight: 600;
  padding: 4px 10px;
}
.meta-tag--dim {
  background: transparent;
  color: var(--color-text-subtle);
  padding: 4px 8px;
}
.meta-btn {
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-bg-card);
  transition: all 180ms ease-out;
  min-height: 32px;
}
.meta-btn:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}
.meta-btn.configured {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  border-color: var(--color-accent);
}

/* ハンバーガーボタン: タッチターゲット 44px 確保 */
.menu-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms;
}
.menu-btn:hover { background: var(--color-bg-subtle); }
.menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
}

/* === モバイル: ヘッダー縮小 (重なり防止) === */
@media (max-width: 640px) {
  .header-inner {
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
  }
  .logo { font-size: var(--fs-md); }
  .current-page {
    font-size: var(--fs-xs);
    padding: 3px 8px;
  }
  /* モバイルでは「準備完了」「樋口」以外は隠す */
  #footerStatus { display: none; }
  /* ただしエラーは表示する */
  #footerStatus.has-error,
  #footerStatus[class*="エラー"] { display: inline-flex; }
  .meta-btn { padding: 4px 10px; min-height: 28px; font-size: var(--fs-xs); }
}
@media (max-width: 420px) {
  .current-page { display: none; }
}

/* Modal */
/* === カルテタイトル選択チップ (既存 modal を流用) === */
.carte-title-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.carte-title-chip {
  appearance: none;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 40px;
  transition: background 180ms ease-out, border-color 180ms ease-out;
}
.carte-title-chip:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }
.carte-title-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.carte-title-input {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg-card);
  min-height: 44px;
}
.carte-title-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 20, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal {
  background: var(--color-bg-card);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.modal-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.modal-desc code {
  background: var(--color-bg-subtle);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.modal textarea {
  font-family: var(--font-mono);
  font-size: 12px;
  min-height: 120px;
}
.modal-status {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--color-bg-subtle);
}
.modal-status.ok {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.modal-status.error {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* === Views === */
.view { overflow: hidden; height: 100%; }

/* === Inbox 3-pane (TSUNAGARU風: カード感・呼吸スペース) === */
.view-inbox {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: var(--sp-3);
  background: var(--color-bg);
  padding: var(--sp-3);
}
.pane {
  background: var(--color-bg-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

/* --- 中間幅 (901-1200px): 右ペインをオフスクリーン固定・スライドイン方式 --- */
@media (min-width: 901px) and (max-width: 1200px) {
  .view-inbox {
    grid-template-columns: 300px 1fr;
    padding: var(--sp-2);
    gap: var(--sp-2);
  }
  /* グリッドから外れてオフスクリーンに固定。display:noneを使わない = JSからdisplayを上書き不要 */
  .view-inbox .pane-profile {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    z-index: 500;
    border-radius: 0;
    border-left: 1px solid var(--color-border);
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(105%);
    transition: transform 220ms ease-out;
    background: var(--color-bg-card);
  }
  .view-inbox .pane-profile.profile-open {
    transform: translateX(0);
  }
  /* バッジを非表示: 300px幅でstabが丸くなるのを防ぐ */
  .status-tabs .stab .count {
    display: none;
  }
  #profileToggleBtn { display: inline-flex !important; }
  #profileCloseBtn { display: flex !important; }
}

/* 右ペイン内の閉じるボタン */
.profile-close-btn {
  display: none;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 10px 14px 6px;
  cursor: pointer;
  transition: color 150ms ease-out;
  align-self: flex-start;
}
.profile-close-btn:hover { color: var(--color-text); }

/* --- Inbox モバイル対応: 1カラム化 (W6 必須) --- */
@media (max-width: 900px) {
  .view-inbox {
    grid-template-columns: 1fr;
    padding: var(--sp-2);
    gap: var(--sp-2);
    overflow-y: auto;
  }
  /* モバイル時は会話選択前は list のみ、選択後は thread のみ表示する想定 */
  .view-inbox .pane-thread,
  .view-inbox .pane-profile {
    display: none;
  }
  /* 会話を選択後 (body に .conv-selected を JS が付与) */
  body.conv-selected .view-inbox .pane-list { display: none; }
  body.conv-selected .view-inbox .pane-thread { display: flex; min-height: calc(100vh - 80px); }
  /* プロフィールはモバイルでは折りたたみ */
  body.conv-selected .view-inbox .pane-profile {
    display: none;
  }
}

/* --- Pane: List --- */
.pane-list { background: var(--color-bg-card); }
.status-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 10px 8px;
  background: var(--color-bg-card);
}
.stab {
  min-width: 0;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.15;
  padding: 7px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  white-space: nowrap;
  overflow: hidden;
  transition: all 150ms ease-out;
}
.stab:hover {
  color: var(--color-text);
  background: var(--color-bg-subtle);
}
.stab.active {
  color: var(--color-accent-deep);
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  font-weight: 600;
}
.stab .count {
  font-size: var(--fs-xs);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
}
.stab.active .count {
  background: var(--color-accent-deep);
  color: white;
}

.search-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-card);
}
.search-box input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  background: var(--color-bg);
  transition: border-color 200ms;
}
.search-box input[type="text"]:focus {
  outline: none;
  border-color: var(--color-accent);
}
.mine-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}
.mine-toggle input[type="checkbox"] {
  accent-color: var(--color-accent);
  cursor: pointer;
}

.conv-list {
  flex: 1;
  overflow-y: auto;
}

.elapsed-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.elapsed-pill.fresh { background: var(--color-success-soft); color: var(--color-success); }
.elapsed-pill.soon { background: var(--color-info-soft); color: var(--color-info); }
.elapsed-pill.warn { background: var(--color-warning-soft); color: var(--color-warning); }
.elapsed-pill.danger { background: var(--color-danger-soft); color: var(--color-danger); font-weight: 500; }
.assignee-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-weight: 500;
}

.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-right: 6px;
  vertical-align: 1px;
}
.conv-item.unread .conv-name {
  font-weight: 700;
}
.conv-item.unread .conv-preview {
  color: var(--color-text);
  font-weight: 500;
}

.stats-date-input {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: white;
  color: var(--color-text);
  margin-left: 4px;
  min-height: 32px;
}

.stats-daily-wrap {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.stats-daily-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media (max-width: 720px) { .stats-daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stats-daily-cell { min-width: 0; }
.stats-daily-cell {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  transition: background 150ms;
}
.stats-daily-cell:hover { background: var(--color-bg-subtle); }
.stats-daily-cell.today { background: var(--color-accent-soft); }
.stats-daily-day {
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.stats-daily-cnt {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stats-daily-sub {
  font-size: 10px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.empty-list {
  padding: 56px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
}
.empty-list::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  margin-bottom: 4px;
}
.conv-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 150ms;
  position: relative;
}
.conv-item:hover { background: var(--color-bg-subtle); }
.conv-item.active {
  background: var(--color-accent-soft);
}
.conv-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-accent);
}
.conv-row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.conv-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-time {
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.conv-preview {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.conv-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.unread-pill {
  background: var(--color-accent);
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.risk-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.risk-pill.high {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.risk-pill.mid {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.risk-pill.low {
  background: var(--color-success-soft);
  color: var(--color-success);
}

/* --- Pane: Thread --- */
.pane-thread {
  background: var(--color-bg);
}
.thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  gap: 12px;
  padding: 32px;
  text-align: center;
}
.thread-empty::before {
  content: "";
  display: block;
  width: 52px;
  height: 52px;
  background-color: var(--color-accent);
  opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/></svg>") center/contain no-repeat;
}
.thread {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.thread-header {
  background: var(--color-bg-card);
  padding: 14px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
/* モバイル時のみ「会話一覧に戻る」ボタンを表示 (W3: タッチターゲット 44x44px 確保) */
.thread-back {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  flex-shrink: 0;
  margin-right: 8px;
  transition: background 150ms;
}
.thread-back:hover { background: var(--color-bg-subtle); }
@media (max-width: 900px) {
  .thread-back { display: inline-flex; }
}
.thread-customer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.thread-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.thread-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.thread-id {
  font-size: 11px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.thread-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.thread-actions .btn {
  padding: 7px 12px;
  font-size: 13px;
}
.thread-actions .btn svg { vertical-align: -2px; }
.status-select {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  color: var(--color-text);
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-bg);
}
.msg {
  max-width: 80%;
  display: flex;
  flex-direction: column;
}
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.msg-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.msg.out .msg-row { flex-direction: row-reverse; }
.msg-pick {
  margin-top: 12px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 150ms ease;
}
.msg:hover .msg-pick,
.msg-pick:checked { opacity: 1; }
.msg-bubble {
  padding: 9px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.in .msg-bubble {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 5px;
  color: var(--color-text);
}
.msg.out .msg-bubble {
  background: var(--color-accent-strong);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.msg-bubble-image, .msg-bubble-video, .msg-bubble-audio {
  padding: 4px !important;
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
}
.msg-image-link {
  display: block;
  line-height: 0;
}
.msg-image {
  max-width: 280px;
  max-height: 360px;
  border-radius: 8px;
  display: block;
  cursor: zoom-in;
  transition: opacity 200ms;
}
.msg-image:hover { opacity: 0.85; }
.msg-media {
  max-width: 280px;
  border-radius: 8px;
  display: block;
}
.msg-file-link {
  display: inline-block;
  padding: 8px 12px;
  color: var(--color-info);
  text-decoration: none;
  font-size: 13px;
}
.msg-file-link:hover { text-decoration: underline; }
.msg-sticker {
  font-size: 28px;
  display: inline-block;
  padding: 8px 12px;
}
.msg-meta {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-marker {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

/* --- Reply --- */
.reply-area {
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
  padding: 14px 24px;
  flex-shrink: 0;
}
.reply-area textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: white;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  color: var(--color-text);
  transition: border-color 200ms;
}
.reply-area textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
/* 確認中(パーク状態)のロック表示: グレー背景+操作不可カーソルで一目で分かるように */
.reply-area textarea:disabled {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.reply-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.reply-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.reply-instruction {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text);
  transition: border-color 200ms;
}
.reply-instruction::placeholder { color: var(--color-text-muted); }
.reply-instruction:focus {
  outline: none;
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.char-count { font-size: 11px; color: var(--color-text-muted); }

/* --- Pane: Profile --- */
.pane-profile {
  background: var(--color-bg-card);
  overflow-y: auto;
}
.profile-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  font-size: var(--fs-sm);
  padding: 48px 20px;
  text-align: center;
  gap: 10px;
}
.profile-empty::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
}
.profile {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.profile-section { display: flex; flex-direction: column; gap: 10px; }

/* === 過去の対応 (直近3件・CRMを開かず前回の温度感を確認) === */
.past-history { display: flex; flex-direction: column; gap: 8px; }
.ph-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--color-bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ph-date {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}
.ph-line {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text);
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.ph-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-border);
  color: var(--color-text);
  line-height: 1.6;
  white-space: nowrap;
}
.ph-tag-op {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}
.ph-more {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
  padding-top: 2px;
}
.profile-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.customer-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-bg-subtle);
  padding: 12px 14px;
  border-radius: 8px;
}
.customer-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.customer-row-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.customer-row-value {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.customer-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-accent-text);
  background: var(--color-accent-soft);
  padding: 2px 8px;
  border-radius: 4px;
}
.customer-empty {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 13px;
}
.customer-line-name {
  font-size: 12px;
  color: var(--color-text-muted);
}
.edit-customer-btn {
  font-size: 11px !important;
  padding: 3px 8px !important;
  min-height: 24px !important;
  margin-left: auto;
}
.carte-link {
  font-size: 11px !important;
  padding: 3px 10px !important;
  min-height: 24px !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.carte-link:hover { text-decoration: none; }

/* 会話リストの番号バッジ */
.conv-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-accent-text);
  margin-right: 4px;
}
/* スレッドヘッダーの番号 */
.th-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-accent-text);
  margin-right: 6px;
  font-size: 13px;
}

.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.stat-card {
  background: var(--color-bg-subtle);
  padding: 10px 12px;
  border-radius: 6px;
}
.stat-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.risk-indicator {
  background: var(--color-bg-subtle);
  padding: 12px 14px;
  border-radius: 8px;
}
.risk-bar {
  height: 8px;
  background: var(--color-bg-card);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0 6px;
}
.risk-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 400ms ease-out;
}
.risk-score {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.risk-label {
  font-size: 11px;
  color: var(--color-text-muted);
}

.profile-history {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-item {
  font-size: 12px;
  padding: 8px 10px;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  line-height: 1.5;
}
.history-date {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.quick-replies {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qr-category {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  margin: 8px 0 4px;
  text-transform: uppercase;
}
.qr-item {
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  padding: 8px 10px;
  background: var(--color-bg-subtle);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text);
  line-height: 1.4;
  transition: all 150ms;
}
.qr-item:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.qr-title {
  font-weight: 500;
  margin-bottom: 2px;
}
.qr-preview {
  font-size: 11px;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Search View === */
.view-search { padding: 24px; height: 100%; overflow-y: auto; }
.search-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 960px) {
  .search-layout { grid-template-columns: 1fr; }
}
.search-input, .search-result {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.input-card { padding: 20px; }
.label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
}
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: white;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  color: var(--color-text);
  transition: border-color 200ms ease-out;
}
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.help-card {
  background: var(--color-bg-subtle);
  padding: 16px 18px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.help-title {
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 6px;
  font-size: 13px;
}
.empty-state {
  border: 1px dashed var(--color-border-strong);
  border-radius: 10px;
  padding: 56px 36px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  background: var(--color-bg-card);
}

/* === AI Card === */
.ai-card {
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg-card);
}
.ai-header {
  background: var(--color-accent-soft);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-accent);
}
.ai-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent-text);
}
.ai-meta { font-size: 11px; color: var(--color-text-muted); }
.ai-body {
  padding: 18px;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-actions {
  border-top: 1px solid var(--color-border);
  padding: 10px 16px;
  display: flex;
  gap: 8px;
  background: var(--color-bg-subtle);
}

/* === Match List (search) === */
.match-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.match-section-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 8px 0 8px 4px;
}
.match-item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.match-header {
  padding: 8px 16px;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.match-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.match-date {
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.match-body {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) {
  .match-body { grid-template-columns: 1fr; }
}
.side-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.side-label.user { color: var(--color-info); }
.side-label.operator { color: var(--color-success); }
.side-text {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* === Stats View === */
.view-stats { padding: 32px; overflow-y: auto; }
.stats-layout { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.stats-header h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.2;
}
.stats-subtitle {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
}
.stats-period { display: flex; gap: 6px; }
.period-btn {
  font-size: 12px !important;
  padding: 6px 14px !important;
  min-height: 32px !important;
}
.period-btn.active {
  background: var(--color-accent) !important;
  color: white !important;
  border-color: var(--color-accent) !important;
}
.stats-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) {
  .stats-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stats-card { min-width: 0; box-sizing: border-box; }
.stats-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px 18px;
}
.stats-card-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.stats-card-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stats-card-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.stats-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-top: 8px;
  letter-spacing: -0.01em;
  position: relative;
  padding-left: 12px;
}
.stats-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}
.stats-table-wrap {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}
.stats-table {
  width: 100%;
  min-width: 560px; /* モバイルでは横スクロール、テーブル内コンテンツの圧縮を防ぐ */
  border-collapse: collapse;
  font-size: 13px;
}
.stats-table thead {
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}
.stats-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stats-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}
.stats-table tbody tr:last-child td { border-bottom: none; }
.stats-table tbody tr:hover { background: var(--color-bg-subtle); }
.stats-bar {
  height: 6px;
  background: var(--color-bg-subtle);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
.stats-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 3px;
}
.stats-rank {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-muted);
}
.stats-rank.top { color: var(--color-accent); }
.team-pill {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}

/* === Templates View === */
.view-templates { padding: 32px; overflow-y: auto; }
.templates-layout { max-width: 1280px; margin: 0 auto; }
.templates-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.templates-header h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.2;
}
.templates-desc { font-size: var(--fs-md); color: var(--color-text-muted); line-height: 1.6; }
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.template-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 180ms, transform 180ms;
}
.template-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.template-cat {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent-text);
  background: var(--color-accent-soft);
  padding: 2px 8px;
  border-radius: 4px;
  align-self: flex-start;
}
.template-title { font-weight: 500; font-size: 14px; }
.template-content {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.6;
  white-space: pre-wrap;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.template-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
}
.template-actions .btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
  min-height: 28px !important;
}
.tpl-filter {
  font-size: 11px !important;
  padding: 4px 10px !important;
  min-height: 28px !important;
}
.tpl-filter.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}
input[type="datetime-local"] {
  width: 100%;
}

/* === Buttons === */
.btn {
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 100ms ease-out;
  min-height: 38px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.btn svg { flex-shrink: 0; }
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--color-accent);
  color: white;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary {
  background: var(--color-bg-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn-outline {
  background: transparent;
  color: var(--color-accent-deep);
  border: 1px solid var(--color-accent);
}
.btn-outline:hover {
  background: var(--color-accent);
  color: white;
}
.btn-danger {
  background: var(--color-danger);
  color: #fff;
  font-weight: 600;
  border: 1px solid var(--color-danger);
}
.btn-danger:hover:not(:disabled) { background: var(--color-danger-strong); border-color: var(--color-danger-strong); }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}


/* === Footer (廃止: ヘッダー右側に統合) === */
.site-footer { display: none; }
.footer-inner { display: none; }

/* === Operator Picker === */
.operator-picker-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 2000;
  overflow-y: auto;
  padding: 48px 24px;
}
.operator-picker-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.opicker-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.opicker-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.opicker-sub {
  font-size: 13px;
  color: var(--color-text-muted);
}
#opickerSearch {
  margin-top: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  background: var(--color-bg-card);
  transition: border-color 200ms;
}
#opickerSearch:focus {
  outline: none;
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.opicker-team {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.opicker-team-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.opicker-team-count {
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.opicker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.opicker-btn {
  font-family: inherit;
  font-size: 14px;
  padding: 14px 16px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 150ms;
  color: var(--color-text);
}
.opicker-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  transform: translateX(2px);
}
.opicker-btn.leader::before {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 5px;
  vertical-align: -2px;
  background-color: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.2 6.8.9-5 4.7 1.3 6.7L12 18l-6 3.2 1.3-6.7-5-4.7 6.8-.9z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.2 6.8.9-5 4.7 1.3 6.7L12 18l-6 3.2 1.3-6.7-5-4.7 6.8-.9z'/></svg>") center/contain no-repeat;
}

/* === Skeleton === */
.skeleton {
  background: var(--color-bg-subtle);
  border-radius: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* リスト読み込み中スケルトン (会話リスト / メールリスト) */
.list-skeleton { display: flex; flex-direction: column; }
.list-skeleton-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}
.sk-line { height: 12px; border-radius: 4px; }
.sk-line.sk-title { width: 42%; }
.sk-line.sk-body { width: 86%; }
.sk-line.sk-meta { width: 24%; height: 10px; }

.error-card {
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger);
  border-radius: 8px;
  padding: 16px 18px;
}
.error-title {
  font-weight: 500;
  color: var(--color-danger);
  margin-bottom: 4px;
}
.error-message { font-size: 13px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }

/* ============================================================
   メール返信 ワークリストUI
   ============================================================ */
.mail-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--color-bg);
}
/* 親 .view-mail も 100% 高さ・横突き抜け防止 */
.view-mail { height: 100%; min-width: 0; overflow: hidden; }
.mail-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-6);
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: nowrap;
}
@media (max-width: 900px) {
  .mail-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  .mail-toolbar-right { flex-wrap: wrap; }
}
.mail-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-shrink: 0;
}
.mail-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mail-counts {
  display: flex;
  gap: 4px;
}
.mail-count {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0 var(--sp-3);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  cursor: pointer;
  color: var(--color-text-muted);
  height: 30px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease;
}
.mail-count:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}
.mail-count:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}
.mail-count--active {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-weight: 500;
}
.mail-count-num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1;
  color: var(--color-text);
  background: var(--color-border);
  padding: 1px 6px;
  border-radius: 3px;
  min-width: 18px;
  text-align: center;
}
.mail-count-label {
  font-size: var(--fs-base);
  color: inherit;
}
.mail-count--active .mail-count-num {
  background: var(--color-accent);
  color: white;
}
.mail-toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.mail-search {
  width: 200px;
  height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg-card);
  transition: border-color 150ms ease;
}
.mail-search::placeholder { color: var(--color-text-subtle); }
.mail-search:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
  border-color: var(--color-accent);
}

/* メイン分割 */
.mail-split {
  flex: 1;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 0;
}
.mail-list-pane {
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-card);
  overflow-y: auto;
  min-height: 0;
}
.mail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mail-list-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}
.mail-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  background: transparent;
  border-left: 3px solid transparent;
  transition: background 150ms ease;
}
.mail-list-item-name { font-size: var(--fs-md); }
.mail-list-item-ts { font-size: var(--fs-xs); }
.mail-list-item-snippet { font-size: var(--fs-sm); }
.mail-list-item-foot { font-size: var(--fs-xs); gap: 6px; flex-wrap: wrap; }
.mail-status-badge { font-size: var(--fs-xs); padding: 2px 8px; border-radius: 999px; }
.mail-list-item-assignee { font-size: var(--fs-xs); }
.mail-list-item:hover { background: var(--color-bg-hover); }
.mail-list-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.mail-list-item--active {
  background: var(--color-accent-subtle);
  border-left-color: var(--color-accent);
}
.mail-list-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.mail-list-item-name {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-list-item-ts {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.mail-list-item-snippet {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.mail-list-item-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.mail-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
}
/* バッジは既存変数だとコントラスト 4.5:1 未達のため、専用に濃い色を直接指定 */
/* pending: #2d6f8f on #e1edf3 → 5.1:1 */
.mail-status-badge--pending { background: var(--color-info-soft); color: #2d6f8f; }
/* reviewing: #8a5310 on #f7eccd → 5.36:1 */
.mail-status-badge--reviewing { background: var(--color-warning-soft); color: #8a5310; }
/* failed: #a83838 on #f9e8e8 → 5.4:1 */
.mail-status-badge--failed { background: var(--color-danger-soft); color: #a83838; }
/* sent: #2f6e3a on #e3f0e6 → 5.6:1 */
.mail-status-badge--sent { background: var(--color-success-soft); color: #2f6e3a; }
/* confirming: #42505e on #eceef1 → 7.11:1 (スレートグレー=中立色。4色と被らない) */
.mail-status-badge--confirming { background: #eceef1; color: #42505e; }
/* 確認中行: 薄いグレー左罫線で控えめに区別 (ティール縦バー禁止) */
.mail-list-item:has(.mail-status-badge--confirming) {
  border-left-color: #b4bac5;
}
.mail-list-item-assignee {
  color: var(--color-text-muted);
  font-size: 12px;
}
/* 失敗行は視認性UP: 800件滞留時にすぐ気付ける */
.mail-list-item:has(.mail-status-badge--failed) {
  border-left-color: #a83838;
}

/* 詳細ペイン */
.mail-detail-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  min-height: 0;
  position: relative;
}
.mail-detail-empty {
  padding: 96px 24px 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.mail-detail-empty::before {
  content: "";
  width: 52px;
  height: 52px;
  background-color: var(--color-accent);
  opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/></svg>") center/contain no-repeat;
}
/* HTML5 hidden 属性が他CSSで上書きされないよう明示 (詳細パネルバグ修正) */
.mail-detail-empty[hidden] { display: none !important; }
.mail-detail[hidden] { display: none !important; }
.mail-detail {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* HTML5 hidden 属性は display:flex の指定でオーバーライドされてしまうため明示 */
.mail-detail[hidden] { display: none; }

/* 詳細部: 上部に header、その下に左右分割の split、下部に actions(固定) */
/* 横幅が狭いとき右ペインを横スクロールさせる */
.mail-detail-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mail-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.mail-detail-meta { display: flex; flex-direction: column; gap: 4px; }
.mail-detail-customer { display: flex; align-items: baseline; gap: 8px; }
.mail-detail-customer strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-display);
}
.mail-detail-cid {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
}
.mail-detail-ts {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
}
.mail-detail-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
#mdKarteLink {
  font-size: 13px;
  padding: 7px 14px;
  text-decoration: none;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
  background: var(--color-bg-card);
}
#mdKarteLink:hover {
  background: var(--color-accent);
  color: #fff;
}
/* 受信メール↔下書きを左右2分割（受信2.5 : 下書き3） */
/* min-width: 720px で狭いウィンドウ時に圧縮されず親(.mail-detail-scroll)が横スクロール */
.mail-detail-split {
  flex: 1;
  display: grid;
  grid-template-columns: 2.5fr 3fr;
  min-height: 0;
  min-width: 720px;
  overflow: hidden;
}
/* 下書きの件名は非表示 */
.mail-detail-field-label[for="mdReplySubject"],
#mdReplySubject { display: none; }
.mail-detail-section {
  padding: 12px 18px;
  background: var(--color-bg-card);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.mail-detail-received {
  border-right: 1px solid var(--color-border);
  background: var(--color-bg);
}
.mail-detail-h-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.mail-detail-h {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* h-row 内に無い単独の h は下マージン必要 */
.mail-detail-section > .mail-detail-h { margin-bottom: 8px; flex-shrink: 0; }
.mail-detail-subject {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.mail-detail-body {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
  min-height: 0;
  margin: 0;
}
.mail-detail-reply {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: #ecebe5;
}
.mail-detail-reply > * { flex-shrink: 0; }
.mail-detail-reply .mail-detail-textarea { flex: 1; min-height: 0; }
.mail-detail-field-label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 8px 0 4px;
}
.mail-detail-field {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  margin-bottom: 4px;
}
.mail-detail-field:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
  border-color: var(--color-accent);
}
.mail-detail-textarea {
  width: 100%;
  min-height: 200px;
  max-height: none;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg-card);
  resize: none;
}
.mail-detail-textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
  border-color: var(--color-accent);
}
.mail-detail-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px var(--sp-5);
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.mail-detail-actions-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mail-detail-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  /* 長文時のフッター縦伸び防止: 1行省略表示（hover/タイトルで全文確認可） */
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.mail-detail-hint--ok { color: var(--color-success); }
.mail-detail-hint--err { color: var(--color-danger); }

/* ===== 名寄せモーダル ===== */
.nayose-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.nayose-modal[style*="flex"] { display: flex !important; }
.nayose-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.nayose-modal-card {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: var(--color-bg-card, #fff);
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
  filter: drop-shadow(0 8px 24px rgba(15, 23, 42, 0.12));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nayose-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.nayose-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text, #111827);
}
.nayose-modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-muted, #6b7280);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.nayose-modal-close:hover { background: var(--color-bg-subtle, #f3f4f6); }
.nayose-modal-body {
  padding: 16px 18px 4px;
  overflow-y: auto;
}
.nayose-modal-lead {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--color-text-muted, #6b7280);
}
.nayose-modal-label {
  display: block;
  margin: 12px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #111827);
}
.nayose-modal-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 6px;
  box-sizing: border-box;
  font-family: var(--font-mono, monospace);
}
.nayose-modal-input:focus {
  outline: none;
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 0;
}
.nayose-modal-warn {
  margin: 4px 0 0;
  padding: 6px 8px;
  font-size: 12px;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 4px;
}
.nayose-modal-note {
  margin: 14px 0 16px;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 6px;
  color: var(--color-text-muted, #6b7280);
  background: var(--color-bg-subtle, #f3f4f6);
}
.nayose-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg-card, #fff);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 36px;
  transition: background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.btn-ghost:hover { background: var(--color-bg-subtle); color: var(--color-text); border-color: var(--color-border-strong); }

/* レスポンシブ: 中間幅 (640-900px、デュアル半分) */
@media (max-width: 900px) {
  .mail-split { grid-template-columns: 180px minmax(0, 1fr); }
  .mail-toolbar { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .mail-search { width: 140px; }
  .mail-category-filter { max-width: 140px; }
  .mail-list-item { padding: var(--sp-2) var(--sp-3); }
  .mail-detail-header,
  .mail-detail-section,
  .mail-detail-actions { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* スマホ幅 (640px以下) は列を縦積み */
@media (max-width: 640px) {
  .mail-split { grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; }
  .mail-list-pane { border-right: none; border-bottom: 1px solid var(--color-border); }
  .mail-toolbar { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .mail-search { flex: 1; min-width: 120px; width: auto; }
  .mail-category-filter { flex: 1; max-width: none; }
  .header-inner { padding: 0 var(--sp-3); }
}

/* 予約送信 UI (1行配置) */
.mail-detail-schedule {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.mail-detail-schedule-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mail-detail-schedule-input {
  height: 30px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text);
  background: var(--color-bg-card);
  width: 180px;
}
.mail-detail-schedule-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
  border-color: var(--color-accent);
}

/* カテゴリ フィルタ */
.mail-category-filter {
  height: 30px;
  padding: 0 28px 0 var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg-card);
  cursor: pointer;
  max-width: 180px;
}
.mail-category-filter:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
  border-color: var(--color-accent);
}

/* 「要対応だけ」絞り込みトグル (ON時は accent-soft で押下状態を表現・box-shadowは使わない) */
.mail-issue-filter.is-active {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}
.mail-issue-filter.is-active:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
}
.mail-issue-filter-count {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 18px;
}

/* 一覧アイテムのカテゴリチップ */
.mail-list-item-cat {
  background: var(--color-bg-card);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--color-border);
}

.mail-detail-actions-left {
  display: flex;
  gap: 8px;
}

/* 滞留日数バッジ */
.mail-elapsed {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 500;
}
.mail-elapsed--fresh { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.mail-elapsed--soon { background: var(--color-info-soft); color: #2d6f8f; }
.mail-elapsed--warn { background: var(--color-warning-soft); color: #8a5310; }
.mail-elapsed--danger { background: var(--color-danger-soft); color: #a83838; font-weight: 600; }

/* 履歴ビュー: readonly フィールドのスタイル */
.mail-detail-field[readonly],
.mail-detail-textarea[readonly] {
  background: var(--color-bg-subtle);
  cursor: default;
}

/* テンプレート選択 */
.mail-detail-h-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mail-template-select {
  height: 30px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text);
  background: var(--color-bg-card);
  cursor: pointer;
  max-width: 220px;
}
.mail-template-select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
  border-color: var(--color-accent);
}

/* === Stats v2: 統計タブ拡張 (LINE/メール共通) === */
.view-mailstats { padding: 24px; overflow-y: auto; }

.stats-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stats-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

.stats-card--accent {
  border: 2px solid var(--color-accent);
  background: var(--color-accent-subtle);
  padding: 15px 17px; /* 2px境界線増分を吸収 */
}
.stats-card--accent .stats-card-value { color: var(--color-text); }
.stats-card-value-sub {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.stats-daily-cell {
  align-items: stretch;
}
.stats-daily-pair {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.stats-daily-in {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.stats-daily-arrow {
  font-size: 12px;
  color: var(--color-text-muted);
}
.stats-daily-out {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
}
.stats-daily-bar {
  margin-top: 6px;
  height: 3px;
  background: var(--color-bg-subtle);
  border-radius: 2px;
  overflow: hidden;
}
.stats-daily-bar > div {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 200ms ease-out;
}

.empty-block {
  padding: 32px 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

@media (max-width: 720px) {
  .view-stats, .view-mailstats { padding: 16px; }
  .stats-layout { gap: 16px; }
  .stats-header {
    flex-direction: column;
    align-items: stretch;
  }
  .stats-period { flex-wrap: wrap; }
  .stats-card-value { font-size: 26px; }
  .stats-table th, .stats-table td { padding: 10px 8px; font-size: 12px; }
  .stats-daily-out { font-size: 18px; }
  .stats-daily-in { font-size: 14px; }
}

/* =========================================================
   v2: ハンバーガーメニュー + ドロワー
   ========================================================= */
.menu-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 150ms ease;
}
.menu-btn:hover { background: var(--color-bg-subtle); }
.menu-btn span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.menu-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.current-page {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text-muted);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 41, 38, 0.4);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 80vw;
  background: var(--color-bg-card);
  border-right: 1px solid var(--color-border);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--color-border);
}
.drawer-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.drawer-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background 150ms ease;
}
.drawer-close:hover { background: var(--color-bg-subtle); color: var(--color-text); }

.drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}
.drawer-section {
  padding: 8px 0 16px;
}
.drawer-section-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 8px 20px;
}

.drawer-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  border-left: 2px solid transparent;
  transition: background 150ms ease, border-color 150ms ease;
}
.drawer-item:hover { background: var(--color-bg-subtle); }
.drawer-item.active {
  background: var(--color-accent-subtle);
  border-left-color: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: 700;
}
.drawer-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.drawer-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color 150ms ease;
}
.drawer-item:hover svg { color: var(--color-text); }
.drawer-item.active svg { color: var(--color-accent); }

.drawer-badge {
  background: var(--color-border-strong);
  color: var(--color-text);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 22px;
  text-align: center;
}
.drawer-item.active .drawer-badge { background: var(--color-accent); color: white; }

.drawer-foot {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
}
.drawer-operator {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  transition: background 150ms ease;
  text-align: left;
}
.drawer-operator:hover { background: var(--color-bg-subtle); }

/* =========================================================
   v2: ヒーロー型統計レイアウト
   ========================================================= */
.stats-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 880px) {
  .stats-hero {
    grid-template-columns: 1fr;
  }
}

.stats-hero-main {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}
.stats-hero-main::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, var(--color-accent-soft) 0%, transparent 70%);
  pointer-events: none;
}
.stats-hero-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  position: relative;
}
.stats-hero-value {
  font-family: var(--font-display);
  font-size: 84px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-text);
  position: relative;
  margin: 12px 0 4px;
}
.stats-hero-value-sub {
  font-size: 28px;
  font-weight: 500;
  color: var(--color-text-muted);
  vertical-align: 6px;
  margin-left: 4px;
  letter-spacing: -0.02em;
}
.stats-hero-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  position: relative;
}

.stats-mini-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  grid-column: span 3;
}
@media (max-width: 880px) {
  .stats-mini-grid { grid-column: span 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stats-mini-grid { grid-template-columns: 1fr; }
}
.stats-mini {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  box-sizing: border-box;
}
.stats-mini-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.stats-mini-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.1;
}
.stats-mini-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 3px;
}
.stats-mini-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* TOP3 担当者カード */
.stats-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .stats-podium { grid-template-columns: 1fr; } }
.podium-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
}
.podium-card:first-child {
  border: 2px solid var(--color-accent);
  background: var(--color-accent-subtle);
  padding: 17px 19px;
}
.podium-rank {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.podium-card:first-child .podium-rank { color: var(--color-accent-text); }
.podium-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.podium-team {
  font-size: 11px;
  color: var(--color-text-muted);
}
.podium-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.podium-stat-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text);
}
.podium-stat-unit {
  font-size: 13px;
  color: var(--color-text-muted);
}
.podium-rate {
  font-size: 12px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .stats-hero-value { font-size: 64px; }
  .stats-hero-main { padding: 20px 22px; min-height: auto; }
  .podium-stat-value { font-size: 28px; }
}

/* === Stats Pivot Table (日 × 担当者) === */
.stats-table--pivot {
  min-width: 720px;
}
.stats-table--pivot th,
.stats-table--pivot td {
  padding: 8px 12px;
  font-size: var(--fs-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stats-table--pivot th {
  font-weight: 600;
  color: var(--color-text-muted);
}
.stats-table--pivot th.num,
.stats-table--pivot td.num {
  text-align: right;
}
.stats-table--pivot td.num.strong {
  font-weight: 700;
  color: var(--color-accent-deep);
}
.stats-table--pivot .pivot-divider {
  border-left: 1px solid var(--color-border);
}
.stats-table--pivot .weekday-mini {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}
.stats-table--pivot .muted-dash {
  color: var(--color-text-subtle);
}
.stats-table--pivot tbody tr:nth-child(even) {
  background: var(--color-bg-subtle);
}
.stats-table--pivot tbody tr.is-today {
  background: var(--color-accent-subtle);
}
.stats-table--pivot tbody tr.is-today td:first-child {
  border-left: 3px solid var(--color-accent);
  padding-left: 9px;
}
.stats-table--pivot tbody tr:hover {
  background: var(--color-accent-soft);
}
.stats-table--pivot .today-mark {
  display: inline-block;
  font-size: var(--fs-xs);
  background: var(--color-accent);
  color: white;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  font-weight: 600;
  vertical-align: middle;
}

/* メール統計: 持ち越し警告バー (Hero下に1行で出る) */
.mail-carryover-alert {
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--color-danger-soft);
  border-left: 5px solid var(--color-danger);
  color: var(--color-danger);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  row-gap: 6px;
  align-items: baseline;
  font-family: 'Noto Sans JP', sans-serif;
}
.mail-carryover-alert__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  grid-row: 1;
  align-self: center;
}
.mail-carryover-alert__value {
  font-family: 'Bricolage Grotesque', 'Noto Sans JP', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  grid-row: 1;
  color: var(--color-danger);
}
.mail-carryover-alert__value-unit {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin-left: 4px;
}
.mail-carryover-alert__desc {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.6;
}
@media (max-width: 480px) {
  .mail-carryover-alert {
    padding: 14px 16px;
    column-gap: 12px;
  }
  .mail-carryover-alert__value { font-size: 26px; }
}

/* ===== 下書きプロンプト編集 ===== */
.prompt-layout {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.view-mailprompt .stats-period .btn { min-height: 44px; }
.prompt-status {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
  min-height: 20px;
}
.prompt-status.ok { color: var(--color-accent-strong); font-weight: 600; }
.prompt-status.err { color: var(--color-danger); font-weight: 600; }
.prompt-help {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px 20px;
}
.prompt-help-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-text);
}
.prompt-ph-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}
.prompt-ph-list code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--color-accent-soft);
  color: var(--color-text);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 6px;
}
.prompt-textarea {
  width: 100%;
  min-height: 440px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  resize: vertical;
}
.prompt-textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
@media (max-width: 640px) {
  .prompt-layout { padding: 16px; }
  .prompt-textarea { min-height: 360px; }
}

/* === 一括処理ダイアログ (旧インラインhexをトークン化) === */
.bulk-dialog {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  max-width: 560px;
  width: 90%;
  background: var(--color-bg-card);
  color: var(--color-text);
}
.bulk-dialog-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xl);
  font-family: var(--font-display);
}
.bulk-dialog-desc {
  margin: 0 0 var(--sp-4);
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.bulk-dialog-label {
  display: block;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-1);
}
.bulk-dialog-input,
.bulk-dialog-textarea {
  width: 100%;
  padding: var(--sp-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-md);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg-card);
}
.bulk-dialog-textarea { margin-bottom: var(--sp-4); }
.bulk-dialog-input:focus-visible,
.bulk-dialog-textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.bulk-dialog-progress {
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  background: var(--color-accent-subtle);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--color-text);
}
.bulk-dialog-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* === 統計チャネルトグル (LINE / メール ピル型) === */
.stats-channel-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--color-bg-subtle);
  border-radius: 999px;
  border: 1px solid var(--color-border);
}
.stats-channel-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  padding: 9px 22px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease-out, color 200ms ease-out;
}
.stats-channel-btn:hover { color: var(--color-text); }
.stats-channel-btn.active {
  background: var(--color-bg-card);
  color: var(--color-accent-text);
  font-weight: 700;
}
.stats-channel-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* === ビュー切替の登場アニメーション (1回・軽量) === */
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.view { animation: viewFadeIn 280ms ease-out; }

/* A11y: モーション低減設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* KPI buttons */
.kpi-buttons { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.kpi-btn {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  min-height: 36px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 150ms ease-out;
  line-height: 1.4;
  white-space: nowrap;
}
.kpi-btn:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }
.kpi-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.kpi-btn--on {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
  font-weight: 600;
}
.kpi-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* KPI stats section */
.stats-kpi-section { margin-top: 24px; }
.stats-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.stats-sub-title { font-size: 15px; font-weight: 600; color: var(--color-text); margin: 0; }
.stats-period-badge { font-size: 12px; color: var(--color-text-muted); background: var(--color-bg-subtle); padding: 2px 8px; border-radius: 999px; }