/* 冒頭シーン：連携 → 自動で蓄積 → 放置商談の発見（actual-ui.css の後に読み込む） */

.ob-page { max-width: 1160px; display: grid; gap: 16px; margin: 0 auto; }
.ob-eyebrow { margin: 0 0 8px; color: var(--color-primary, #00796b); font-size: 11px; font-weight: 800; letter-spacing: .12em; }

/* 連携前（モーダルの中身） */
.ob-hero-copy > p:last-child { max-width: 520px; margin: 14px 0 0; color: #475569; font-size: 14px; line-height: 1.8; }
.ob-connect-box { display: grid; gap: 14px; padding: 20px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(15, 45, 41, .08); }
.ob-sources { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ob-sources li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #edf2f7; border-radius: 10px; color: #1e293b; font-size: 13px; font-weight: 700; }
.ob-sources em { margin-left: auto; padding: 2px 8px; border-radius: 99px; color: #64748b; background: #f1f5f9; font-size: 10px; font-style: normal; }
.ob-source-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--color-primary, #00796b); background: #e0f2f1; }
.ob-source-icon svg { width: 16px; height: 16px; }
.ob-connect { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #00897b, #00695c); font-size: 16px; font-weight: 800; cursor: pointer; animation: ob-pulse 2s ease-out infinite; transition: transform .15s; }
.ob-connect:hover { transform: translateY(-1px); }
.ob-connect svg { width: 20px; height: 20px; }
.ob-connect-box small { color: #94a3b8; font-size: 10px; text-align: center; }
@keyframes ob-pulse {
  0% { box-shadow: 0 10px 24px rgba(0, 121, 107, .32), 0 0 0 0 rgba(0, 137, 123, .45); }
  70%, 100% { box-shadow: 0 10px 24px rgba(0, 121, 107, .32), 0 0 0 16px rgba(0, 137, 123, 0); }
}

/* 取り込み中・完了 */
.ob-status { display: grid; gap: 12px; padding: 18px 22px; border: 1px solid #cfe9e4; border-radius: 14px; background: #fff; }
.ob-status-head { display: flex; align-items: center; gap: 10px; color: #0f2d29; font-size: 15px; }
.ob-elapsed { margin-left: auto; color: var(--color-primary, #00796b); font: 800 16px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.ob-spinner { width: 18px; height: 18px; flex: none; border: 2.5px solid #b2dfdb; border-top-color: var(--color-primary, #00796b); border-radius: 50%; animation: ob-spin .8s linear infinite; }
@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-progress { height: 8px; overflow: hidden; border-radius: 99px; background: #e2e8f0; }
.ob-progress span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #26a69a, #00796b); }
.ob-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ob-stages li { display: flex; align-items: center; gap: 7px; color: #94a3b8; font-size: 11px; font-weight: 700; }
.ob-stages li::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #cbd5e1; }
.ob-stages li.is-active { color: var(--color-primary, #00796b); }
.ob-stages li.is-active::before { background: var(--color-primary, #00796b); box-shadow: 0 0 0 4px #e0f2f1; }
.ob-stages li.is-done { color: #334155; }
.ob-stages li.is-done::before { background: #26a69a; }
.ob-status.is-done { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #334155; font-size: 13px; }
.ob-status.is-done strong { color: #0f2d29; font-size: 15px; }
.ob-status.is-done b { color: var(--color-primary, #00796b); }
.ob-done-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--color-primary, #00796b); }
.ob-done-icon svg { width: 15px; height: 15px; }
.ob-status-sep { width: 1px; height: 14px; background: #cbd5e1; }

/* 件数 */
.ob-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ob-stat { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.ob-stat-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 10px; color: var(--color-primary, #00796b); background: #e0f2f1; }
.ob-stat-icon svg { width: 19px; height: 19px; }
.ob-stat small { display: block; color: #64748b; font-size: 11px; font-weight: 700; }
.ob-stat strong { display: block; color: #0f2d29; font: 800 28px/1.15 Inter, 'Noto Sans JP', sans-serif; font-variant-numeric: tabular-nums; }
.ob-page--empty .ob-stat strong { color: #cbd5e1; }
.ob-page--empty .ob-stat-icon { color: #94a3b8; background: #f1f5f9; }
.nav-count.ob-nav-count { color: #00695c; background: #e0f2f1; font-variant-numeric: tabular-nums; }

/* 人物・AIの作業ログ */
.ob-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
.ob-panel { min-width: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.ob-panel > header { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #edf2f7; }
.ob-panel h3 { margin: 0; color: #0f2d29; font-size: 14px; }
.ob-panel > header span { color: #94a3b8; font-size: 11px; }
.ob-people, .ob-log { height: 424px; margin: 0; padding: 4px 0; overflow: hidden; list-style: none; }
.ob-log { padding: 8px 18px; overflow-y: auto; }
.ob-people .ob-empty, .ob-log .ob-empty { min-height: 380px; display: grid; place-items: center; margin: 8px 12px; padding: 0; border: 1.5px dashed #e2e8f0; border-radius: 10px; color: #94a3b8; font-size: 12px; }
.ob-log .ob-empty { margin: 4px 0; }

.ob-person { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 18px; border-bottom: 1px solid #f1f5f9; }
.ob-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #00695c; background: #e0f2f1; font-size: 13px; font-weight: 800; }
.ob-person-main { min-width: 0; }
.ob-person-main strong { display: block; color: #1e293b; font-size: 13px; }
.ob-person-main span { display: block; overflow: hidden; color: #64748b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ob-source-chip { padding: 3px 8px; border-radius: 99px; color: #00695c; background: #effaf8; font-size: 10px; font-weight: 700; white-space: nowrap; }
.ob-person-last { color: #94a3b8; font-size: 10px; white-space: nowrap; }
.ob-person.is-key { background: #fffbeb; box-shadow: inset 3px 0 #f59e0b; }
.ob-person.is-key .ob-avatar { color: #b45309; background: #fef3c7; }
.ob-person.is-new { animation: ob-row-in .5s ease-out; }
@keyframes ob-row-in { from { opacity: 0; transform: translateY(-10px); background: #e0f2f1; } to { opacity: 1; transform: none; } }

.ob-log li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #f1f5f9; color: #334155; font-size: 12px; line-height: 1.6; }
.ob-log b { color: #0f2d29; }
.ob-log-check { width: 18px; height: 18px; display: grid; place-items: center; flex: none; margin-top: 2px; border-radius: 50%; color: #fff; background: #26a69a; }
.ob-log-check svg { width: 11px; height: 11px; }
.ob-log li.is-new { animation: ob-fade-in .45s ease-out; }
@keyframes ob-fade-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* 放置商談の発見 */
.ob-found { padding: 20px 22px; border: 2px solid #5ec4b6; border-radius: 16px; background: linear-gradient(135deg, #f3fbf9, #fff 55%); box-shadow: 0 16px 40px rgba(0, 121, 107, .14); animation: ob-found-in .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes ob-found-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.ob-found > header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.ob-found > header .ob-eyebrow { margin-bottom: 4px; }
.ob-found-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 12px; color: #fff; background: var(--color-primary, #00796b); }
.ob-found-icon svg { width: 22px; height: 22px; }
.ob-found h3 { margin: 0; color: #0f2d29; font-size: 20px; font-weight: 800; }
.ob-found h3 em { color: #c2410c; font-style: normal; }
.ob-found > header p:last-child { margin: 4px 0 0; color: #64748b; font-size: 12px; }
.ob-found-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ob-found-list li { display: grid; grid-template-columns: 28px minmax(0, 1.3fr) auto minmax(0, 1.2fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.ob-found-list li.is-top { border-color: #f5b98f; background: #fffaf5; box-shadow: 0 6px 18px rgba(234, 88, 12, .1); }
.ob-rank { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #64748b; background: #f1f5f9; font: 800 13px Inter, sans-serif; }
.is-top .ob-rank { color: #fff; background: #ea580c; }
.ob-found-main { min-width: 0; }
.ob-found-main strong { display: block; color: #0f2d29; font-size: 14px; }
.ob-found-main span { display: block; color: #64748b; font-size: 11px; }
.ob-idle { padding: 3px 9px; border-radius: 99px; color: #c2410c; background: #fff1e6; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ob-signal { min-width: 0; display: flex; align-items: center; gap: 6px; color: #475569; font-size: 12px; }
.ob-signal svg { width: 15px; height: 15px; flex: none; color: #94a3b8; }
.ob-signal.is-live { color: #b91c1c; font-weight: 800; }
.ob-signal b { font-family: Inter, sans-serif; font-variant-numeric: tabular-nums; }
.ob-live-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #dc2626; animation: ob-live 1.2s ease-in-out infinite; }
@keyframes ob-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); } 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); } }
.ob-follow { white-space: nowrap; }

@media (max-width: 1100px) {
  .ob-found-list li { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .ob-found-list li > .ob-signal, .ob-found-list li > .btn { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 900px) {
  .ob-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-body { grid-template-columns: 1fr; }
  .ob-people, .ob-log { height: 320px; }
  .ob-people .ob-empty, .ob-log .ob-empty { min-height: 280px; }
}
@media (max-width: 520px) {
  .ob-stat { gap: 10px; padding: 12px; }
  .ob-stat-icon { width: 32px; height: 32px; }
  .ob-stat strong { font-size: 22px; }
  .ob-person { grid-template-columns: 34px minmax(0, 1fr) auto; padding-inline: 14px; }
  .ob-person-last, .ob-status-sep { display: none; }
  .ob-stages li { font-size: 10px; }
  .ob-found { padding: 16px; }
  .ob-found h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-connect, .ob-live-dot, .ob-spinner, .ob-person.is-new, .ob-log li.is-new, .ob-found { animation: none; }
}

/* 連携前：取り込み画面（0件）の上に出すモーダル。ツアーバーより下、本文より上 */
.ob-connect-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px 24px 76px; background: rgba(15, 23, 42, .42); backdrop-filter: blur(2px); animation: ob-overlay-in .3s ease-out both; }
@keyframes ob-overlay-in { from { opacity: 0; } }
.ob-connect-modal { width: min(820px, 100%); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); align-items: center; gap: 28px; padding: 32px 36px; border-radius: 16px; background: radial-gradient(circle at 10% 0%, #e3f5f1 0, transparent 55%), linear-gradient(135deg, #f5fbfa 0%, #fff 60%); box-shadow: 0 24px 60px rgba(15, 23, 42, .28); }
.ob-connect-modal h2 { margin: 0; color: #0f2d29; font-size: 28px; font-weight: 800; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.ob-connect-modal .ob-hero-copy > p:last-child { margin: 14px 0 0; color: #475569; font-size: 13px; line-height: 1.8; }
.ob-status.is-idle .ob-status-head strong { color: #64748b; font-size: 14px; font-weight: 700; }
.ob-status.is-idle .ob-elapsed { color: #cbd5e1; }
@media (max-width: 767px) {
  .ob-connect-overlay { align-items: flex-end; padding: 12px 12px 68px; }
  .ob-connect-modal { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; }
  .ob-connect-modal h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .ob-connect-overlay { animation: none; } }

/* 「実際のアカウントには接続しない」は、押す前に必ず目に入るよう赤で目立たせる */
.ob-demo-notice { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid #fca5a5; border-radius: 10px; color: #b91c1c; background: #fef2f2; font-size: 13px; font-weight: 800; line-height: 1.5; text-align: center; word-break: keep-all; }
.ob-demo-notice span { width: 20px; height: 20px; display: grid; place-items: center; flex: none; border-radius: 50%; color: #fff; background: #dc2626; font-size: 13px; font-weight: 900; }

/* ボタンの文言は長いので、折り返すときは「ワンクリックで／連携デモを体験する」で分ける */
.ob-connect { padding: 10px 16px; font-size: 15px; line-height: 1.4; }
.ob-connect span { word-break: keep-all; text-align: center; }