/*
 * バイホロンAI 共通ブランドテーマ
 * 会社サイトのネイビー／ブルー／ティールを全アプリへ統一適用する。
 */
:root {
  color-scheme: light;
  --bih-navy: #324da3;
  --bih-blue: #2025ac;
  --bih-teal: #31a39f;
  --bih-mint: #eef9f7;
  --bih-sky: #ebf6ff;
  --bih-page: #f8f8f8;
  --bih-surface: #ffffff;
  --bih-text: #404040;
  --bih-muted: #686c76;
  --bih-line: #dfe3ee;
  --bih-danger: #c63b47;
  --bih-shadow: 0 8px 24px rgba(50, 77, 163, 0.12);
  --bih-gradient: linear-gradient(135deg, #324da3 0%, #2025ac 68%, #31a39f 100%);

  /* 各アプリで使われている既存変数をブランド値へ寄せる。 */
  --navy: var(--bih-navy);
  --blue: var(--bih-blue);
  --teal: var(--bih-teal);
  --page: var(--bih-page);
  --line: var(--bih-line);
  --muted: var(--bih-muted);
  --primary-color: var(--bih-navy);
  --header-bg: var(--bih-navy);
  --bg-color: var(--bih-page);
  --text-color: var(--bih-text);
  --border-color: var(--bih-line);
  --focus-color: var(--bih-teal);
  --panel-left-bg: var(--bih-surface);
  --panel-right-bg: var(--bih-sky);
  --panel-bg-left: var(--bih-surface);
  --panel-bg-right: var(--bih-sky);
  --panel-bg: var(--bih-surface);
  --btn-bg: var(--bih-navy);
  --btn-hover: var(--bih-blue);
  --btn-gradient: var(--bih-gradient);
  --btn-grad: var(--bih-gradient);
  --btn-grad-hover: linear-gradient(135deg, #2025ac, #324da3 62%, #31a39f);
  --gradient-btn: var(--bih-gradient);
}

html,
body {
  background: var(--bih-page) !important;
  background-image: none !important;
  color: var(--bih-text) !important;
}

body::before,
body::after {
  background: none !important;
  box-shadow: none !important;
}

body,
button,
input,
select,
textarea {
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}

/* ヘッダー */
header,
.header {
  background: var(--bih-gradient) !important;
  border-color: var(--bih-teal) !important;
  border-bottom: 4px solid var(--bih-teal) !important;
  box-shadow: 0 4px 16px rgba(50, 77, 163, 0.2) !important;
  color: #ffffff !important;
  text-align: left !important;
}

/*
 * 一部アプリに残る中央寄せ指定より優先し、最上部のアプリ名を左寄せに統一する。
 * AI回答内の見出しや各パネルのタイトルには影響させない。
 */
header > h1,
header > .header-inner > h1,
header > .header-content h1,
.header > h1,
.header > .header-inner > h1,
.header > .header-content h1,
.header > .header-title,
.header > .title {
  text-align: left !important;
}

header h1,
header h2,
header h3,
header p,
header span,
.header h1,
.header h2,
.header h3,
.header p,
.header span,
.header .title,
.header .brand {
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

header .subtitle,
.header .subtitle,
header .brand .subtitle,
.header .brand .subtitle {
  color: rgba(255, 255, 255, 0.84) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.84) !important;
  opacity: 1 !important;
}

.header-icon,
.brand-icon,
.logo {
  color: #ffffff !important;
}

.cyber-grid,
.city-silhouettes {
  display: none !important;
}

/* 基本レイアウトとパネル */
.main,
.main-container,
.container {
  background: var(--bih-page) !important;
}

.left-panel,
.form-area,
.settings-panel {
  background: var(--bih-surface) !important;
  background-image: none !important;
  border-color: var(--bih-line) !important;
  color: var(--bih-text) !important;
}

.right-panel {
  background: var(--bih-sky) !important;
  background-image: none !important;
  border-color: var(--bih-line) !important;
  color: var(--bih-text) !important;
}

.left-panel,
.right-panel {
  box-shadow: var(--bih-shadow) !important;
}

.panel-header,
.right-header,
.history-header,
.form-section-title {
  background: var(--bih-mint) !important;
  border-color: var(--bih-line) !important;
  color: var(--bih-navy) !important;
}

.panel-header h1,
.panel-header h2,
.panel-header h3,
.right-header h1,
.right-header h2,
.right-header h3,
.right-header-title,
.right-title,
.left-title,
.form-section-title,
.title {
  color: var(--bih-navy) !important;
}

.left-panel h1,
.left-panel h2,
.left-panel h3,
.right-panel h1,
.right-panel h2,
.right-panel h3,
.form-area h1,
.form-area h2,
.form-area h3,
.settings-panel h1,
.settings-panel h2,
.settings-panel h3,
.history-section h1,
.history-section h2,
.history-section h3 {
  background: none !important;
  border-color: var(--bih-teal) !important;
  color: var(--bih-navy) !important;
  -webkit-text-fill-color: var(--bih-navy) !important;
  text-shadow: none !important;
}

.left-title,
.form-section-title {
  border-left-color: var(--bih-teal) !important;
}

.form-group label,
.checkbox-label,
.dynamic-title,
.score-card-title,
.alert-section-title {
  color: var(--bih-navy) !important;
}

.subtitle,
.file-hint,
.file-size,
.time,
.loading-text,
.placeholder-text,
.placeholder-msg,
.output-placeholder {
  color: var(--bih-muted) !important;
}

/* 入力欄 */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.form-control,
.chat-input {
  background: var(--bih-surface) !important;
  border-color: var(--bih-line) !important;
  color: var(--bih-text) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.chat-input:focus {
  border-color: var(--bih-teal) !important;
  box-shadow: 0 0 0 3px rgba(49, 163, 159, 0.16) !important;
  outline: none !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--bih-teal);
}

.file-upload-area,
.file-upload-wrapper,
.file-drop-area,
.file-drop-zone,
.device-input {
  background: var(--bih-mint) !important;
  border-color: var(--bih-teal) !important;
  color: var(--bih-navy) !important;
}

.file-upload-area:hover,
.file-upload-wrapper:hover,
.file-drop-area:hover,
.file-drop-zone:hover,
.device-input:hover {
  background: #e3f5f2 !important;
  border-color: var(--bih-blue) !important;
}

.file-chip,
.file-info,
.file-status,
.file-preview-bar {
  background: var(--bih-sky) !important;
  border-color: var(--bih-line) !important;
  color: var(--bih-navy) !important;
}

.btn-area,
.action-bar,
.modal-buttons,
.modal-btns,
.modal-actions,
.export-actions,
.export-tools {
  background: var(--bih-surface) !important;
  border-color: var(--bih-line) !important;
  box-shadow: none !important;
}

/* 主要アクション */
.send-btn,
.retry-btn,
.retry-trigger-btn,
.chat-send-btn,
.modal-submit,
.modal-submit-btn,
.submit,
.add-btn,
.primary,
#sendBtn {
  background: var(--bih-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(50, 77, 163, 0.2) !important;
}

.send-btn:hover:not(:disabled),
.retry-btn:hover:not(:disabled),
.retry-trigger-btn:hover:not(:disabled),
.chat-send-btn:hover:not(:disabled),
.modal-submit:hover:not(:disabled),
.modal-submit-btn:hover:not(:disabled),
.submit:hover:not(:disabled),
.add-btn:hover:not(:disabled),
.primary:hover:not(:disabled),
#sendBtn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2025ac, #324da3 62%, #31a39f) !important;
  box-shadow: 0 7px 18px rgba(32, 37, 172, 0.24) !important;
}

/* 補助アクション */
.reset-btn,
.export-btn,
.action-btn,
.tool-btn,
.small-btn,
.modal-cancel,
.modal-cancel-btn,
.modal-btn-cancel,
.cancel,
.close-modal,
.clear-history-btn,
#attachBtn.icon-btn {
  background: var(--bih-surface) !important;
  border-color: var(--bih-navy) !important;
  color: var(--bih-navy) !important;
  box-shadow: none !important;
}

.reset-btn:hover:not(:disabled),
.export-btn:hover:not(:disabled),
.action-btn:hover:not(:disabled),
.tool-btn:hover:not(:disabled),
.small-btn:hover:not(:disabled),
.modal-cancel:hover:not(:disabled),
.modal-cancel-btn:hover:not(:disabled),
.modal-btn-cancel:hover:not(:disabled),
.cancel:hover:not(:disabled),
.close-modal:hover:not(:disabled),
.clear-history-btn:hover:not(:disabled),
#attachBtn.icon-btn:hover:not(:disabled) {
  background: var(--bih-mint) !important;
  border-color: var(--bih-teal) !important;
  color: var(--bih-blue) !important;
}

button:disabled,
.send-btn:disabled,
.retry-btn:disabled,
.export-btn:disabled {
  background: #cbd0dc !important;
  border-color: #cbd0dc !important;
  color: #ffffff !important;
  box-shadow: none !important;
  opacity: 0.72;
}

header .new-chat,
.header .new-chat {
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  color: #ffffff !important;
}

header .new-chat:hover,
.header .new-chat:hover {
  background: rgba(255, 255, 255, 0.23) !important;
}

/* 出力・カード・表 */
.output-area,
.output-content,
.score-card,
.history-list,
.alert-section,
.comic-frame-box,
.recommend-option {
  background: var(--bih-surface) !important;
  border-color: var(--bih-line) !important;
  color: var(--bih-text) !important;
}

.history-section,
.history-item,
.history-list > div {
  background: var(--bih-surface) !important;
  border-color: var(--bih-line) !important;
  color: var(--bih-muted) !important;
  box-shadow: none !important;
}

.history-item:hover {
  background: var(--bih-mint) !important;
  border-color: var(--bih-teal) !important;
}

.history-item-title {
  color: var(--bih-navy) !important;
}

.history-item-date {
  color: var(--bih-muted) !important;
}

.output-content h1,
.output-content h2,
.output-content h3,
.output-content h4,
.bubble h1,
.bubble h2,
.bubble h3 {
  color: var(--bih-navy) !important;
}

.output-content a,
.bubble a {
  color: var(--bih-blue) !important;
}

.output-content table,
.bubble table,
.md-table {
  background: var(--bih-surface) !important;
  border-color: var(--bih-line) !important;
}

.output-content th,
.bubble th,
.md-table th {
  background: var(--bih-mint) !important;
  color: var(--bih-navy) !important;
  border-color: var(--bih-line) !important;
}

.output-content td,
.bubble td,
.md-table td {
  border-color: var(--bih-line) !important;
}

.score-bar-fill {
  background: var(--bih-gradient) !important;
}

/* チャット */
.chat-area {
  background: linear-gradient(180deg, var(--bih-sky), var(--bih-page)) !important;
}

#chatArea {
  background: linear-gradient(180deg, var(--bih-sky), var(--bih-page)) !important;
}

.input-bar,
.composer,
.chat-input-container {
  background: var(--bih-surface) !important;
  border-color: var(--bih-line) !important;
}

.message.user .bubble,
.chat-bubble.user {
  background: var(--bih-navy) !important;
  border-color: var(--bih-navy) !important;
  color: #ffffff !important;
}

.message.ai .bubble,
.chat-bubble.ai,
.chat-bubble.assistant {
  background: var(--bih-surface) !important;
  border-color: var(--bih-line) !important;
  color: var(--bih-text) !important;
}

.message.user .icon,
.message.user .avatar {
  background: var(--bih-navy) !important;
  color: #ffffff !important;
}

.message.ai .icon,
.message.ai .avatar,
.message.assistant .avatar {
  background: var(--bih-mint) !important;
  border-color: var(--bih-teal) !important;
  color: var(--bih-navy) !important;
}

.bubble code,
.bubble pre,
.output-content code,
.output-content pre {
  background: #f1f4fa !important;
  color: #25325c !important;
  border-color: var(--bih-line) !important;
}

/* モーダル・ローディング */
.retry-modal,
.modal-overlay {
  background: rgba(24, 35, 75, 0.52) !important;
}

.modal-content,
.modal-body,
.modal-footer {
  background: var(--bih-surface) !important;
  border-color: var(--bih-line) !important;
  color: var(--bih-text) !important;
}

.modal-header {
  background: var(--bih-gradient) !important;
  border-color: var(--bih-teal) !important;
  color: #ffffff !important;
}

.loading-overlay {
  background: rgba(248, 248, 248, 0.88) !important;
}

.spinner {
  border-color: rgba(50, 77, 163, 0.18) !important;
  border-top-color: var(--bih-teal) !important;
}

.typing-dot,
.dot {
  background: var(--bih-teal) !important;
}

::selection {
  background: rgba(49, 163, 159, 0.28);
  color: #24315f;
}

@media (max-width: 768px) {
  header,
  .header {
    border-bottom-width: 3px !important;
  }
}