/* theme.css — 担当者画面用テーマ (orange / mono / dark)
 *
 * 使い方:
 *   <link rel="stylesheet" href="/theme.css">
 *   <script>document.documentElement.setAttribute("data-theme", localStorage.getItem("cop_theme") || "orange");</script>
 *
 * 既存の `var(--orange)` 参照との互換性のため、--orange も同名で維持する。
 */

:root,
[data-theme="orange"] {
  --accent:          #ff8c3a;
  --accent-hover:    #ff7a1d;
  --accent-on:       #ffffff;
  --accent-soft:     rgba(255, 140, 58, 0.12);
  --orange:          #ff8c3a;            /* 既存コード互換 */
  --bg:              #f7f7f7;
  --card-bg:         #ffffff;
  --card-bg-2:       #f5f5f5;
  --text:            #1f1f1f;
  --text-dim:        #6b6b6b;
  --border:          #eaeaea;
  --shadow:          0 4px 14px rgba(0, 0, 0, 0.08);

  --bubble-customer-bg:  #ffda20;
  --bubble-customer-fg:  #1f1f1f;
  --bubble-host-bg:      #ff8c3a;
  --bubble-host-fg:      #ffffff;
  --bubble-system-bg:    #fff7f0;
  --bubble-system-fg:    #5b4a3c;
  --bubble-system-border:#ffd5b3;

  --ai-bubble-bg:        #e3f2fd;        /* 明るい水色 */
  --ai-bubble-fg:        #0d47a1;        /* 濃い青 */
  --ai-bubble-border:    #1976d2;        /* くっきりした青 */
  --ai-bubble-icon:      #1976d2;
  --ai-warn-bg:          #fff4e5;        /* 攻撃性除去マーク用 */
  --ai-warn-border:      #f57c00;

  --danger:          #c0392b;
  --danger-soft:     #fdecea;
}

[data-theme="mono"] {
  --accent:          #2d2d2d;
  --accent-hover:    #1a1a1a;
  --accent-on:       #ffffff;
  --accent-soft:     rgba(45, 45, 45, 0.08);
  --orange:          #2d2d2d;
  --bg:              #fafafa;
  --card-bg:         #ffffff;
  --card-bg-2:       #f1f1f1;
  --text:            #1a1a1a;
  --text-dim:        #6b6b6b;
  --border:          #d8d8d8;
  --shadow:          0 4px 14px rgba(0, 0, 0, 0.06);

  --bubble-customer-bg:  #2d2d2d;
  --bubble-customer-fg:  #ffffff;
  --bubble-host-bg:      #ffffff;
  --bubble-host-fg:      #1a1a1a;
  --bubble-system-bg:    #f1f1f1;
  --bubble-system-fg:    #444444;
  --bubble-system-border:#cccccc;

  --ai-bubble-bg:        #e8f4fd;
  --ai-bubble-fg:        #0d47a1;
  --ai-bubble-border:    #1976d2;
  --ai-bubble-icon:      #1976d2;
  --ai-warn-bg:          #fff8e1;
  --ai-warn-border:      #f57c00;

  --danger:          #b71c1c;
  --danger-soft:     #fbe9e7;
}

[data-theme="dark"] {
  --accent:          #4a8ed9;
  --accent-hover:    #6aa0e0;
  --accent-on:       #ffffff;
  --accent-soft:     rgba(74, 142, 217, 0.18);
  --orange:          #4a8ed9;
  --bg:              #0a1628;
  --card-bg:         #14253a;
  --card-bg-2:       #1c3050;
  --text:            #e6edf3;
  --text-dim:        #9aabbf;
  --border:          #2a3f5d;
  --shadow:          0 4px 14px rgba(0, 0, 0, 0.5);

  --bubble-customer-bg:  #4a8ed9;
  --bubble-customer-fg:  #ffffff;
  --bubble-host-bg:      #1c3050;
  --bubble-host-fg:      #e6edf3;
  --bubble-system-bg:    #1c2a40;
  --bubble-system-fg:    #b8c5d6;
  --bubble-system-border:#3a4d6d;

  --ai-bubble-bg:        #1e3a5f;
  --ai-bubble-fg:        #b3d9ff;
  --ai-bubble-border:    #4a8ed9;
  --ai-bubble-icon:      #6aa0e0;
  --ai-warn-bg:          #3a2818;
  --ai-warn-border:      #f9a825;

  --danger:          #ef5350;
  --danger-soft:     #3b1e1e;
}

/* === 共通の AI 要約バブル スタイル (識別性向上) === */
.bubble.AItoHost,
.bubble.aitohost {
  background: var(--ai-bubble-bg) !important;
  color: var(--ai-bubble-fg) !important;
  border: 2px solid var(--ai-bubble-border) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  position: relative;
  margin-left: 18px !important;
  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.15);
}
/* AI 要約バブルの先頭マーク */
.bubble.AItoHost::before,
.bubble.aitohost::before {
  content: "🤖";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  background: var(--ai-bubble-border);
  color: #fff;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* 攻撃性除去済み (⚠️ プレフィクス付き) は警告色帯 */
.bubble.AItoHost.warn,
.bubble.aitohost.warn {
  background: var(--ai-warn-bg) !important;
  border-color: var(--ai-warn-border) !important;
  color: var(--text) !important;
}
.bubble.AItoHost.warn::before,
.bubble.aitohost.warn::before {
  content: "⚠️";
  background: var(--ai-warn-border);
}

/* === dm-host.html の既存吹き出しを各テーマで適切に上書き === */
[data-theme="mono"] .bubble.host    { background: var(--accent) !important; color: var(--accent-on) !important; }
[data-theme="mono"] .bubble.customer{ background: var(--card-bg) !important; color: var(--text) !important; border-color: var(--border) !important; }

[data-theme="dark"] .bubble.host    { background: var(--accent) !important; color: var(--accent-on) !important; }
[data-theme="dark"] .bubble.customer{ background: var(--card-bg-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] .name-label     { color: var(--text-dim) !important; }
[data-theme="dark"] .time-label     { color: var(--text-dim) !important; }

/* === ダークテーマで body 全体に適用したい上書き === */
[data-theme="dark"] body { background: var(--bg) !important; color: var(--text); }
[data-theme="dark"] .messages { background: var(--bg) !important; }
[data-theme="dark"] .chat-wrapper { background: var(--card-bg) !important; }
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"] {
  background: var(--card-bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] input::placeholder { color: var(--text-dim); }
[data-theme="dark"] .card { background: var(--card-bg) !important; color: var(--text); }
[data-theme="dark"] .thread-card { background: var(--card-bg) !important; color: var(--text); box-shadow: var(--shadow); }
[data-theme="dark"] .thread-card .last-message { color: var(--text-dim) !important; }
[data-theme="dark"] .thread-id { color: var(--text); }
[data-theme="dark"] select,
[data-theme="dark"] .sort-box select { background: var(--card-bg-2); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .field-label .label-desc { color: var(--text-dim); }
[data-theme="dark"] .url-card { background: var(--accent-soft); border-color: var(--accent); }
[data-theme="dark"] .url-card code { background: var(--card-bg-2); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .field { border-bottom-color: var(--border); }

/* === モノトーンテーマ: 派手な色を抑える上書き === */
[data-theme="mono"] body { background: var(--bg); color: var(--text); }
[data-theme="mono"] .toolbar,
[data-theme="mono"] .header { background: var(--accent) !important; color: var(--accent-on) !important; }

/* === Hide / Show ボタン === */
.hide-thread-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.hide-thread-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* 未返信バッジ */
.unreplied-badge {
  background: var(--accent);
  color: var(--accent-on);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

/* テーマ切替セグメント (settings 用) */
.theme-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 2px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
}
.theme-seg-btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.theme-swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-block;
}
.theme-swatch.orange { background: #ff8c3a; }
.theme-swatch.mono   { background: linear-gradient(135deg, #2d2d2d 50%, #fafafa 50%); border: 1px solid #ccc; }
.theme-swatch.dark   { background: #14253a; border: 1px solid #4a8ed9; }