/* ==================================================================
   Love Me Work ルック（ボルドー × ゴールド）2026-11-05
   既存のレイアウト（styles.css）は触らず、色・質感・書体だけを上書きする層
   ================================================================== */
:root {
  --lmw-serif: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif;
  --lmw-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, -apple-system, sans-serif;
  --bordeaux: #7B1E2D;
  --bordeaux-dark: #4E101B;
  --bordeaux-deep: #2A0A12;
  --gold: #C9A227;
  --gold-soft: #E2C478;
  --gold-pale: #F7EFD9;
  --gold-line: linear-gradient(90deg, transparent 0%, #E2C478 20%, #C9A227 50%, #E2C478 80%, transparent 100%);
  --bg-cream: #FAF5EC;
  --shadow-soft: 0 10px 30px rgba(78, 16, 27, 0.08);
}

body {
  font-family: var(--lmw-sans);
  background:
    radial-gradient(1200px 500px at 50% -200px, rgba(201, 162, 39, 0.12), transparent 60%),
    var(--bg-cream);
}

/* ---- ヘッダー: 深いボルドー + 金のヘアライン ---- */
.hero-header {
  background:
    radial-gradient(900px 300px at 85% -40%, rgba(201, 162, 39, 0.28), transparent 60%),
    linear-gradient(150deg, #2A0A12 0%, #4E101B 55%, #6B1A28 100%);
  border-bottom: 1px solid rgba(226, 196, 120, 0.55);
  position: relative;
}
.hero-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold-line);
}
.hero-title {
  font-family: var(--lmw-serif);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #FFF8EC;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.brand-badge {
  font-family: var(--lmw-serif);
  letter-spacing: 0.18em;
  color: var(--gold-soft);
  border: 1px solid rgba(226, 196, 120, 0.55);
  background: rgba(255, 255, 255, 0.04);
}
.brand-dot {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}
.hero-story {
  border-left: 2px solid var(--gold-soft);
  background: rgba(255, 255, 255, 0.05);
}
.section-nav {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(226, 196, 120, 0.28);
}
.nav-pill {
  color: rgba(255, 248, 236, 0.86);
  letter-spacing: 0.02em;
}
.nav-pill.active-nav,
.nav-pill:hover {
  background: rgba(226, 196, 120, 0.16);
  color: #FFF3D6;
  box-shadow: inset 0 0 0 1px rgba(226, 196, 120, 0.55);
}
.btn-header-pill {
  border: 1px solid rgba(226, 196, 120, 0.45);
  background: rgba(255, 255, 255, 0.06);
  color: #FFF3D6;
}

/* ---- セクション: 白いカードに金の上辺ライン ---- */
.section-block {
  position: relative;
  border: 1px solid #E9DEC6;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 100%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.section-block::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--gold-line);
}
.section-kicker {
  font-family: var(--lmw-serif);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold-dark);
  font-size: 0.7rem;
}
.section-title,
.login-modal-title,
.subpanel-title,
.side-card-title,
.selected-chat-title {
  font-family: var(--lmw-serif);
  letter-spacing: 0.03em;
}
.section-title {
  color: var(--bordeaux-dark);
}
.section-sub-hint {
  background: var(--gold-pale);
  border-color: #E8D7A6;
  color: #7A5C12;
}

/* ---- エンジン切替タブ ---- */
.chat-engine-tabs {
  background: #F6F0E4;
  border: 1px solid #E9DEC6;
}
.engine-tab-btn.active {
  background: linear-gradient(135deg, #6B1A28 0%, #4E101B 100%);
  color: #FFF3D6;
  box-shadow: inset 0 0 0 1px rgba(226, 196, 120, 0.7), 0 4px 12px rgba(78, 16, 27, 0.28);
}
.engine-tab-btn.active .engine-tab-count {
  background: rgba(226, 196, 120, 0.25);
  color: #FFF3D6;
}

/* ---- チャット一覧カード ---- */
.chat-item-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #FDF8F2 100%);
  border: 1px solid #ECE1CC;
  border-left: 4px solid #6D28D9;
  box-shadow: 0 2px 10px rgba(78, 16, 27, 0.05);
}
.chat-item-card.engine-claude {
  border-left-color: #D97706;
}
.chat-item-card.engine-chatgpt {
  border-left-color: #0D9488;
}
.chat-item-card:hover,
.chat-item-card.active {
  border-color: var(--gold-soft);
  border-left-color: var(--bordeaux);
  box-shadow: 0 8px 22px rgba(78, 16, 27, 0.12);
}
.chat-list-header {
  border-bottom: 1px solid #ECE1CC;
  padding: 2px 2px 10px;
  margin-bottom: 2px;
}
.chat-count-pill,
.btn-new-chatgpt-pill {
  border: 1px solid #E8D7A6;
  background: var(--gold-pale);
  color: #7A5C12;
}

/* ---- トーク画面 ---- */
.chat-detail-panel {
  border: 1px solid #ECE1CC;
  background: #FFFDF9;
}
.chat-messages-box {
  background:
    repeating-linear-gradient(0deg, rgba(201, 162, 39, 0.035) 0 1px, transparent 1px 28px),
    #F7F1E6;
  border: 1px solid #E9DEC6;
}
.chat-bubble {
  box-shadow: 0 2px 8px rgba(78, 16, 27, 0.06);
  font-family: var(--lmw-sans);
  line-height: 1.65;
}
.chat-bubble-row.ai .chat-bubble {
  background: #FFFFFF;
  border: 1px solid #EADFC8;
  border-left: 3px solid var(--gold-soft);
}
.chat-bubble-row.user .chat-bubble {
  background: linear-gradient(135deg, #7B1E2D 0%, #4E101B 100%);
  color: #FFF8EC;
  border: 1px solid rgba(226, 196, 120, 0.45);
}
.bubble-heading {
  display: block;
  font-family: var(--lmw-serif);
  font-weight: 800;
  color: var(--bordeaux-dark);
  margin: 4px 0 2px;
}
.chat-bubble-row.user .bubble-heading {
  color: #FFF3D6;
}
.bubble-bullet {
  color: var(--gold-dark);
  font-weight: 800;
}
.chat-bubble-row.user .bubble-bullet {
  color: var(--gold-soft);
}
.bubble-code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.85em;
  background: rgba(123, 30, 45, 0.07);
  border-radius: 4px;
  padding: 0 4px;
}
.chat-bubble-row.user .bubble-code {
  background: rgba(255, 255, 255, 0.16);
}
.chat-bubble strong {
  color: var(--bordeaux-dark);
}
.chat-bubble-row.user .chat-bubble strong {
  color: #FFF3D6;
}
.quick-reply-chip {
  border: 1px solid #E8D7A6;
  background: #FFFDF6;
  color: var(--bordeaux-dark);
}
.quick-reply-chip:hover {
  background: var(--gold-pale);
}
.remote-msg-input,
.memo-input,
.login-input {
  border: 1px solid #E3D6BC;
  background: #FFFFFF;
}
.remote-msg-input:focus,
.memo-input:focus,
.login-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

/* ---- ボタン ---- */
.btn-gold-cta {
  background: linear-gradient(135deg, #E6C65A 0%, #C9A227 55%, #B08A14 100%);
  color: var(--bordeaux-deep);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 16px rgba(201, 162, 39, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}
.btn-bordeaux {
  background: linear-gradient(135deg, #7B1E2D 0%, #4E101B 100%);
  border: 1px solid rgba(226, 196, 120, 0.4);
}
.btn-outline-bordeaux,
.btn-back-chat-list {
  border: 1px solid var(--bordeaux);
  color: var(--bordeaux);
  background: #FFFDF9;
}

/* ---- バッジ ---- */
.chat-topic-tag {
  border: 1px solid #E8D7A6;
  background: var(--gold-pale);
  color: #7A5C12;
}

/* ---- ログインモーダル ---- */
.login-modal-backdrop {
  background: radial-gradient(800px 400px at 50% 20%, rgba(123, 30, 45, 0.55), rgba(20, 6, 10, 0.86));
  backdrop-filter: blur(4px);
}
.login-modal-card {
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18), 0 24px 60px rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF9EE 100%);
}
.login-modal-card .brand-badge {
  color: var(--gold-dark);
  border-color: #E8D7A6;
  background: var(--gold-pale);
}

/* ---- フッター ---- */
.site-footer {
  color: #8C7A5C;
  font-family: var(--lmw-serif);
  letter-spacing: 0.08em;
}

/* 新規チャットボタン（Antigravity / Claude / ChatGPT）を横並びに */
.new-chat-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}
.chat-list-header.all-mode .new-chat-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.chat-list-header.all-mode .new-chat-buttons .btn-new-chatgpt-pill {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 6px 4px;
  font-size: 0.7rem;
  letter-spacing: -0.02em;
}
.new-chat-buttons .btn-new-chatgpt-pill[hidden] {
  display: none !important;
}

/* プッシュ通知の設定カード */
.push-setup-title {
  font-family: var(--lmw-serif);
  font-size: 0.98rem;
  color: var(--bordeaux-dark);
  margin: 0 0 6px;
}
.push-divider {
  border: none;
  border-top: 1px solid #ECE1CC;
  margin: 14px 0 10px;
}

/* 一覧カードの「新着」チップ */
.chat-new-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #FFF8EC;
  background: linear-gradient(135deg, #B8232F 0%, #7B1E2D 100%);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.35);
}
.chat-new-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-soft);
}

/* 「返事待ちだけ」トグルとピン留めボタン */
.only-waiting-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #7A5C12;
  background: var(--gold-pale);
  border: 1px solid #E8D7A6;
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.only-waiting-toggle input {
  accent-color: var(--bordeaux);
  margin: 0;
}
.chat-list-header-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.chat-pin-btn {
  margin-left: 6px;
  cursor: pointer;
  opacity: 0.45;
  font-size: 0.9rem;
  line-height: 1;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.chat-pin-btn.on {
  opacity: 1;
  transform: rotate(-20deg);
}
.chat-pin-btn:hover {
  opacity: 1;
}
.chat-rename-btn {
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.6;
  font-size: 0.82rem;
  line-height: 1;
  transition: opacity 0.15s ease;
}
.chat-rename-btn:hover {
  opacity: 1;
}
.chat-item-card {
  -webkit-touch-callout: none;
}

/* トーク画面ヘッダーの「✏️ 名前変更」「⏹️ ストップ」ボタン */
.btn-chat-action-mini {
  background: var(--gold-pale);
  color: #7A5C12;
  border: 1px solid #E8D7A6;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}
.btn-chat-action-mini:hover {
  background: #F5E6B8;
}
.btn-stop-chat-mini {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
  color: #FFF8EC;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.28);
}
.btn-stop-chat-mini:hover {
  filter: brightness(1.08);
}

/* AIが生成した画像・動画・音声の吹き出し内インラインプレビュー */
.chat-bubble-media-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.chat-media-card {
  background: #FAF6EE;
  border: 1px solid #E5D7B8;
  border-radius: 12px;
  padding: 8px;
  overflow: hidden;
}
.chat-bubble-video {
  width: 100%;
  max-height: 420px;
  border-radius: 8px;
  background: #14080C;
  display: block;
}
.chat-bubble-audio {
  width: 100%;
  height: 38px;
  margin-top: 6px;
}
.chat-bubble-img.ai-gen-img {
  width: 100%;
  max-width: 100%;
  max-height: 380px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #FFFFFF;
  display: block;
}
.chat-media-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #5C4632;
  margin-top: 6px;
  padding: 0 2px;
}
.chat-media-caption a {
  color: var(--bordeaux);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.chat-media-caption a:hover {
  text-decoration: underline;
}

/* メモ帳・指示書からの「🚀 1タップでAIに丸投げ」ボタン列 */
.memo-item-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.memo-item-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.memo-ai-launch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #E8DFCE;
}
.memo-ai-launch-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #7A5C12;
}
.btn-launch-ai {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.71rem;
  font-weight: 800;
  background: #FFFFFF;
  border: 1px solid #E2D5BE;
  color: #3A252C;
}
.btn-launch-ai.agy {
  color: #5B21B6;
  border-color: #DDD6FE;
  background: #FAF5FF;
}
.btn-launch-ai.claude {
  color: #B45309;
  border-color: #FDE68A;
  background: #FFFBEB;
}
.btn-launch-ai.chatgpt {
  color: #0F766E;
  border-color: #99F6E4;
  background: #F0FDFA;
}
.btn-launch-ai:hover {
  filter: brightness(0.96);
}

/* 🤝 相方AIとの1往復作戦会議バー＆吹き出し */
.ai-discuss-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: linear-gradient(135deg, #FFFDF7 0%, #FBF3DE 100%);
  border: 1px solid #E8D7A6;
  border-radius: 11px;
  padding: 7px 10px;
}
.ai-discuss-bar[hidden] {
  display: none !important;
}
.ai-discuss-label {
  font-size: 0.73rem;
  font-weight: 800;
  color: var(--bordeaux-dark);
  white-space: nowrap;
}
.ai-discuss-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}
.btn-discuss-ai {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(78, 16, 27, 0.08);
}
.btn-discuss-ai.claude {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  color: #92400E;
  border: 1px solid #F59E0B;
}
.btn-discuss-ai.agy {
  background: linear-gradient(135deg, #FAF5FF 0%, #EDE9FE 100%);
  color: #5B21B6;
  border: 1px solid #8B5CF6;
}
.btn-discuss-ai.chatgpt {
  background: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%);
  color: #115E59;
  border: 1px solid #14B8A6;
}
.btn-discuss-ai:hover {
  filter: brightness(0.97);
}
.chat-bubble-row.partner-bubble .chat-bubble-meta {
  font-weight: 800;
  color: var(--bordeaux);
}
.chat-bubble-row.partner-claude .chat-bubble {
  background: #FFFDF7;
  border: 1.5px solid #F59E0B;
  border-left: 4px solid #D97706;
}
.chat-bubble-row.partner-antigravity .chat-bubble {
  background: #FCF9FF;
  border: 1.5px solid #A78BFA;
  border-left: 4px solid #6D28D9;
}
.chat-bubble-row.partner-chatgpt .chat-bubble {
  background: #F7FFFD;
  border: 1.5px solid #2DD4BF;
  border-left: 4px solid #0D9488;
}
.chat-baton-action-row {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #E8D7A6;
  display: flex;
  justify-content: flex-end;
}
.btn-apply-baton {
  font-size: 0.76rem;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  width: 100%;
  justify-content: center;
}