/* デモ専用の層。本番の見た目は assets/prod/（本番 CSS のコピー）が担い、ここには
   ツアー・ストーリー画面・一覧の仮画面など、本番に無いものだけを書く。 */

:root {
  --actual-sidebar: 240px;
  --actual-header: 52px;
  --tour-navy: #001b34;
}

html,body { height: 100%; }
body { overflow: hidden; }
button,select,textarea,input { font: inherit; }
button { cursor: pointer; }

/* デモ側で描く補助アイコン（icon() が付けるクラス）。本番マークアップの SVG には付けない。 */
.demo-icon { width: 1em; height: 1em; }

/* Production-like list screens */
.actual-page { width: 100%; max-width: 1460px; margin: 0 auto; }
.actual-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.actual-page-title { margin: 0; color: var(--text-primary); font-size: 20px; font-weight: 700; }
.actual-page-subtitle { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.actual-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.actual-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.actual-summary-card { padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-primary); }
.actual-summary-card small { display: block; color: var(--text-secondary); font-size: 11px; }
.actual-summary-card strong { display: block; margin-top: 4px; color: var(--text-primary); font-size: 20px; }
.actual-summary-card span { color: var(--color-primary); font-size: 11px; font-weight: 600; }
.actual-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px; margin-bottom: 12px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-primary); }
.actual-search { min-width: 240px; flex: 1; position: relative; }
.actual-search svg { position: absolute; left: 10px; top: 10px; color: var(--text-tertiary); }
.actual-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--border-light); border-radius: 6px; background: #fff; }
.actual-select { height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--border-light); border-radius: 6px; color: var(--text-primary); background: #fff; }
.table-wrapper { overflow-x: auto; }
.data-table { min-width: 900px; }
.data-table tbody tr { cursor: pointer; transition: background .14s ease; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.table-title { color: var(--text-primary); font-weight: 600; }
.table-subtitle { margin-top: 2px; color: var(--text-secondary); font-size: 11px; }
.actual-person { display: flex; align-items: center; gap: 9px; }
.actual-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--color-primary); background: var(--color-primary-soft); font-size: 11px; font-weight: 700; }
.actual-two-col { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .55fr); gap: 16px; align-items: start; }
.actual-side-card { padding: 16px; border: 1px solid var(--border-light); border-radius: 8px; background: #fff; }
.actual-side-card h3 { margin: 0 0 12px; font-size: 14px; }
.actual-insight { padding: 10px 0; border-top: 1px solid var(--border-light); }
.actual-insight:first-of-type { border-top: 0; }
.actual-insight strong { display: block; font-size: 12px; }
.actual-insight p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11px; }

.approach-editor { padding: 18px; }
.actual-field { margin-bottom: 14px; }
.actual-field label { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.actual-input { width: 100%; border: 1px solid var(--border-light); border-radius: 6px; background: #fff; color: var(--text-primary); }
.actual-input { height: 38px; padding: 0 11px; }

/* Schedule detail + record modals */
.modal-content-xl { max-width: 930px; }
.schedule-modal { border: 2px solid #0b5f69; }
.schedule-modal .modal-body { padding: 22px 20px 14px; }
.schedule-modal .modal-footer { justify-content: space-between; padding: 12px 20px; }
.schedule-detail-link { color: var(--color-primary); font-weight: 600; }
.pdv2-info-card { margin-bottom: 17px; }
.pdv2-info-label { font-size: 11px; }
.pdv2-info-content { font-size: 12px; }
.modal-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.modal-record-card { padding: 12px; border: 1px solid var(--border-light); border-radius: 7px; }
.modal-record-card.full { grid-column: 1 / -1; }
.modal-record-card small { color: var(--text-secondary); }
.modal-record-card strong { display: block; margin-top: 4px; }

/* Demo tour
   暗転はしない。対象は枠線（#tourRing）で示し、吹き出しは本文を隠さない位置に置く（js/app.js の positionTour）。
   ツアーバーはヘッダーのボタンと重ならないよう、画面の下に置く。 */
.tour-controller {
  position: fixed;
  bottom: 14px;
  left: 50%;
  z-index: 10060;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 5px 8px 5px 14px;
  border-radius: 999px;
  color: #e7eef8;
  background: var(--tour-navy);
  box-shadow: 0 6px 20px rgba(0, 21, 41, .28);
  transform: translateX(-50%);
  font-size: 12px;
}
.tour-controller strong { color: #fff; }
.tour-controller > * { white-space: nowrap; }
.tour-controller-step { color: #9fb3c8; font-variant-numeric: tabular-nums; }
.tour-badge { padding: 4px 9px; border-radius: 999px; color: #fff; background: var(--color-primary); font-size: 10px; font-weight: 800; }
.tour-controller button { padding: 5px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 700; }
.tour-controller button:hover { background: rgba(255,255,255,.16); }
/* サイドメニューとヘッダーは出さない（js/app.js の shellMarkup）。本文は横幅いっぱい */
body.app-shell-react .main-content.demo-chromeless { margin-left: 0 !important; }
/* ツアーバーの分だけ本文とモーダルの下端を空け、ボタンが隠れないようにする */
body.app-shell-react .main-content { padding-bottom: 64px; }
.modal-overlay { padding-bottom: 68px; }

.tour-ring {
  position: fixed;
  z-index: 10040;
  display: none;
  border: 2px solid var(--color-primary, #00796b);
  border-radius: 10px;
  pointer-events: none;
  animation: tour-ring-pulse 1.6s ease-out infinite;
}
@keyframes tour-ring-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 121, 107, .45); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(0, 121, 107, 0); }
}
.tour-popover {
  position: fixed;
  z-index: 10050;
  width: min(320px, calc(100vw - 24px));
  padding: 14px 16px;
  /* 縁と矢印は濃い緑にして、どのボタンを指しているかを一目で分かるようにする */
  border: 1.5px solid var(--color-primary, #00796b);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .2);
  visibility: hidden;
}
/* 矢印（吹き出しが対象のどちら側にあるかで向きを変える。--arrow-at は対象の中心） */
.tour-arrow { position: absolute; display: none; width: 14px; height: 14px; background: #fff; border: 1.5px solid var(--color-primary, #00796b); transform: rotate(45deg); }
.tour-popover[data-side="right"] .tour-arrow { display: block; left: -8px; top: calc(var(--arrow-at) - 7px); border-top: 0; border-right: 0; }
.tour-popover[data-side="left"] .tour-arrow { display: block; right: -8px; top: calc(var(--arrow-at) - 7px); border-bottom: 0; border-left: 0; }
.tour-popover[data-side="bottom"] .tour-arrow { display: block; top: -8px; left: calc(var(--arrow-at) - 7px); border-right: 0; border-bottom: 0; }
.tour-popover[data-side="top"] .tour-arrow { display: block; bottom: -8px; left: calc(var(--arrow-at) - 7px); border-top: 0; border-left: 0; }
.tour-popover-head,.tour-popover-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-step { padding: 4px 8px; border-radius: 999px; color: var(--color-primary); background: var(--color-primary-soft); font-size: 10px; font-weight: 800; }
.tour-close { width: 25px; height: 25px; color: var(--text-tertiary); background: none; border: 0; font-size: 16px; }
.tour-popover h3 { margin: 10px 0 6px; font-size: 14px; line-height: 1.5; }
.tour-popover p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.tour-popover-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-light); }
.tour-popover-foot .btn[disabled] { opacity: .6; cursor: progress; }
.tour-dots { display: flex; gap: 4px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; }
.tour-dot.active { width: 17px; border-radius: 99px; background: var(--color-primary); }
.tour-click-hint { position: fixed; z-index: 10051; padding: 6px 11px; border-radius: 999px; color: #fff; background: var(--color-primary); box-shadow: 0 5px 16px rgba(0,121,107,.35); font-size: 11px; font-weight: 800; pointer-events: none; animation: tour-hint-bob 1.4s ease-in-out infinite; }
@keyframes tour-hint-bob { 50% { transform: translateY(-3px); } }

/* 処理中（会議の解析・送信など） */
.demo-processing-overlay { z-index: 10030; }
.demo-processing { padding: 22px 24px; }
.demo-processing-head { display: flex; align-items: center; gap: 10px; }
.demo-processing-head h2 { margin: 0; font-size: 15px; }
.demo-processing-steps { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.demo-processing-steps li { display: flex; align-items: center; gap: 10px; color: var(--text-tertiary, #94a3b8); font-size: 13px; transition: color .2s; }
.demo-processing-steps li.is-active { color: var(--text-primary, #1e293b); font-weight: 700; }
.demo-processing-steps li.is-done { color: #075e50; }
.demo-processing-mark { width: 18px; height: 18px; display: grid; place-items: center; flex: none; border: 1.5px solid #cbd5e1; border-radius: 50%; }
.demo-processing-steps li.is-active .demo-processing-mark { border-color: var(--color-primary); border-top-color: transparent; animation: ob-spin .8s linear infinite; }
.demo-processing-steps li.is-done .demo-processing-mark { border-color: var(--color-primary); color: #fff; background: var(--color-primary); }
.demo-processing-mark svg { width: 12px; height: 12px; }

/* KPI：棒グラフは開いたときに下から伸びる。受注した10月は最後に伸びて目立たせる */
.mrr-bars.is-growing .mrr-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: mrr-bar-grow .7s cubic-bezier(.2,.8,.2,1) both; }
.mrr-bars.is-growing .mrr-bar.is-won { animation-duration: .9s; }
.mrr-rate-line.is-growing { stroke-dasharray: 2000; animation: mrr-line-draw 1.2s .3s ease-out both; }
.mrr-demo-callout.is-growing { animation: mrr-fade-in .4s 1.7s both; }
@keyframes mrr-bar-grow { from { transform: scaleY(0); } }
@keyframes mrr-line-draw { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
@keyframes mrr-fade-in { from { opacity: 0; transform: translateY(4px); } }
/* assets/prod の写しには MRR推移のカード行の指定が入っていないため、デモ側で 4 列に並べる */
.mrr-trend-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mrr-trend-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.mrr-trend-card-label { color: var(--text-secondary, #64748b); font-size: 12px; }
.mrr-trend-card-value { color: var(--text-primary, #1e293b); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .mrr-trend-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mrr-trend-card.is-updated { border-color: #80cbc4; box-shadow: 0 0 0 3px #e0f2f1; }
.mrr-trend-card-delta { display: block; margin-top: 4px; color: #075e50; font-size: 12px; font-weight: 700; }

/* 完了 CTA */
.demo-cta { padding: 12px 8px 4px; text-align: center; }
.demo-cta-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 14px; color: #fff; background: var(--color-primary); }
.demo-cta-icon svg { width: 26px; height: 26px; }
.demo-cta h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.5; }
.demo-cta > p { max-width: 540px; margin: 0 auto; color: var(--text-secondary); font-size: 13px; line-height: 1.8; }
.demo-cta-recap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.demo-cta-recap li { padding: 10px 8px; border-radius: 8px; background: #f3fbf9; }
.demo-cta-recap b { display: block; color: #075e50; font-size: 18px; }
.demo-cta-recap span { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.demo-cta-actions { display: flex; justify-content: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.demo-cta-actions .btn { min-width: 180px; justify-content: center; text-decoration: none; }
.demo-cta-restart { margin-top: 12px; padding: 4px 8px; border: 0; color: var(--text-secondary); background: none; font-size: 12px; }
.demo-cta-restart:hover { color: var(--color-primary); }

.toast-region { position: fixed; right: 20px; bottom: 72px; z-index: 11000; display: grid; gap: 8px; }
.toast { min-width: 260px; padding: 11px 13px; border: 1px solid #9edaca; border-radius: 8px; color: #075e50; background: #f1fbf8; box-shadow: var(--shadow-lg); font-size: 12px; font-weight: 600; }

@media (max-width: 1180px) {
  .actual-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .actual-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .actual-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actual-page-header { display: block; }
  .actual-page-actions { justify-content: flex-start; margin-top: 12px; }
  .table-wrapper { margin-inline: -12px; border-radius: 0; }
  .modal-overlay { align-items: flex-end; padding: 8px 8px 64px; }
  .modal-content,.modal-content-xl { width: 100%; max-height: 94vh; }
  .pdv2-modal-two-column,.modal-record-grid { grid-template-columns: 1fr; }
  .modal-record-card.full { grid-column: auto; }
  .tour-controller { bottom: 10px; left: 50%; gap: 6px; padding: 5px 6px 5px 8px; font-size: 11px; }
  .tour-controller-title { display: none; }
  .modal-overlay { padding-bottom: 64px; }
  .toast-region { left: 12px; right: 12px; bottom: 64px; }
  .toast { min-width: 0; }
  .tour-popover { width: calc(100vw - 24px); padding: 12px 14px; }
  .tour-popover p { font-size: 12px; line-height: 1.6; }
  .demo-cta-recap { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .actual-summary-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-ring, .tour-click-hint { animation: none; }
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Sales story demo surfaces */
.story-signal-card {
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 8px;
  color: var(--text-primary, #1e293b);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.story-signal-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
}
.story-signal-card:hover { border-color: #9ed5ce; }

.story-signal-card[data-tone="hot"],.story-signal-card[data-tone="alert"] { border-color: #f3b19e; box-shadow: inset 3px 0 #e4572e, 0 1px 2px rgba(15, 23, 42, .04); }

.story-followup { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid #f3b19e; border-radius: 8px; color: var(--text-primary, #1e293b); background: #fffaf8; }
.story-followup > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.story-followup strong { font-size: 12px; }
.story-followup span { color: var(--text-secondary, #64748b); font-size: 11px; }

.mrr-table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.mrr-table th,.mrr-table td { padding: 7px 8px; border-bottom: 1px solid var(--border-light, #e2e8f0); color: var(--text-secondary, #64748b); font-size: 10px; text-align: left; white-space: nowrap; }
.mrr-table th { color: var(--text-muted, #94a3b8); background: #f8fafc; font-weight: 700; }
.mrr-table td strong { color: var(--text-primary, #1e293b); font-size: 11px; }
.mrr-table tr:last-child td { border-bottom: 0; }

@media (max-width: 767px) {
  .story-followup { align-items: flex-start; flex-direction: column; }
  .mrr-table { min-width: 440px; }
}

/* Story implementation details */
.story-signal-card { border-color: #fdba74; box-shadow: inset 3px 0 #f97316, 0 1px 2px rgba(15,23,42,.05); }
.story-signal-card .pdv2-aq-title { color: #0f172a; font-size: 15px; }
.story-signal-card .pdv2-aq-why-source { color: #c2410c; background: #fff7ed; }

.story-eyebrow { margin: 0 0 4px !important; color: #00796b !important; font-size: 9px !important; font-weight: 800; letter-spacing: .12em; }

.story-followup { position: sticky; top: 12px; display: block; padding: 16px; border-color: #9edaca; background: #f3fbf9; }

.story-followup > p { margin: 12px 0; line-height: 1.6; }
.story-followup dl { margin: 0 0 14px; }
.story-followup dl > div { padding: 8px 0; border-top: 1px solid #cce8e2; }
.story-followup dt { color: #64748b; font-size: 9px; }
.story-followup dd { margin: 3px 0 0; color: #1e293b; font-size: 10px; font-weight: 700; }

.story-modal-open { z-index: 10030; }
.story-modal-open .modal-content { border-top: 4px solid #00796b; }

.story-draft-context { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.story-draft-context > div { padding: 9px 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; }
.story-draft-context small { display: block; color: #64748b; font-size: 9px; }
.story-draft-context strong { display: block; margin-top: 3px; color: #1e293b; font-size: 10px; }

.story-connected { max-width: 600px; margin: 0 auto; padding: 10px 16px 4px; text-align: center; }
.story-connected-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 50%; color: #fff; background: #00796b; box-shadow: 0 0 0 8px #e0f2f1; }
.story-connected-icon svg { width: 26px; height: 26px; }
.story-connected h2 { margin: 0 0 7px; font-size: 21px; }
.story-connected > p:not(.story-eyebrow) { max-width: 520px; margin: 0 auto; color: #64748b; font-size: 11px; line-height: 1.7; }
.story-connected-route { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0; }
.story-connected-route span,.story-connected-route strong { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 6px; background: #f1f5f9; font-size: 11px; }
.story-connected-route svg { width: 12px; height: 12px; }
.story-connected-route .is-done { color: #075e50; background: #e0f2f1; }
.story-connected-route .is-active { color: #0f172a; background: #fff7ed; font-weight: 700; }
.story-connected-route .ob-spinner { width: 12px; height: 12px; border-width: 2px; }
.story-connected.is-waiting { padding-top: 18px; }
.story-connected-route strong { color: #075e50; background: #d9f3ed; }

@media (max-width: 900px) {
  .story-followup { position: static; }
}
@media (max-width: 767px) {
  .story-draft-context { grid-template-columns: 1fr; }
  .story-connected-route { align-items: stretch; flex-direction: column; }
  .story-connected-route b { transform: rotate(90deg); }
}

/* モーダルは .app-container の外にあるため、ボタン内アイコンのサイズをここで固定する */
.modal-footer .btn svg { width: 16px; height: 16px; flex: none; }

/* 本番のアプローチ画面はデスクトップ専用（一覧 380px 固定で、スマホでは本文の幅が 0 になる）。
   デモはスマホでも送信まで体験できるよう、767px 以下だけ一覧と本文を縦に積む。 */
@media (max-width: 767px) {
  .approach-body { flex-direction: column; }
  .approach-body .draft-list-panel { width: 100%; max-height: 200px; flex: none; border-right: 0; border-bottom: 1px solid var(--border-light); }
  .approach-body .draft-list-panel .keyboard-hints, .approach-body .draft-bulk-toolbar { display: none; }
  .approach-body .draft-detail-panel { width: 100%; flex: 1; min-height: 0; }
}

/* 会議要約の詳細（商談終了後）。左に会議の情報、右に AI の要約 */
.demo-meeting { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }
.demo-meeting-info section { margin-bottom: 16px; }
.demo-meeting-info h4 { margin: 0 0 6px; color: var(--text-secondary, #64748b); font-size: 11px; font-weight: 700; }
.demo-meeting-info p { margin: 0; font-size: 13px; }
.demo-meeting-muted { margin-top: 2px !important; color: var(--text-secondary, #64748b); font-size: 12px !important; }
.demo-meeting-people, .demo-meeting-sources, .demo-meeting-made { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.demo-meeting-people li { display: flex; align-items: center; gap: 8px; }
.demo-meeting-people strong { display: block; font-size: 12px; }
.demo-meeting-people small { display: block; color: var(--text-secondary, #64748b); font-size: 11px; }
.demo-meeting-sources li, .demo-meeting-made li { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.demo-meeting-sources svg, .demo-meeting-made svg { width: 14px; height: 14px; flex: none; }
.demo-meeting-made li { color: #075e50; font-weight: 600; }
.demo-meeting-summary { padding: 16px 18px; border: 1px solid #b2dfdb; border-radius: 10px; background: #f7fcfb; }
.demo-meeting-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.demo-meeting-summary-head h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; }
.demo-meeting-summary-head h3 svg { width: 16px; height: 16px; color: var(--color-primary); }
.demo-meeting-summary-head span { color: var(--text-secondary, #64748b); font-size: 11px; }
.demo-meeting-note { margin: 4px 0 0; color: var(--text-secondary, #64748b); font-size: 12px; line-height: 1.6; }
.demo-meeting-lead { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; color: #0f172a; background: #fff; font-size: 13px; font-weight: 600; line-height: 1.7; }
.demo-meeting-modal .modal-footer { justify-content: space-between; gap: 12px; }
.demo-meeting-dest { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary, #64748b); font-size: 12px; }
.demo-meeting-dest svg { width: 14px; height: 14px; }
@media (max-width: 767px) {
  .demo-meeting { grid-template-columns: 1fr; }
  .demo-meeting-summary { order: -1; }
  .demo-meeting-modal .modal-footer { flex-direction: column; align-items: stretch; }
}

/* タイムラインに要約が入った直後：上から差し込まれ、しばらく色で目立たせる */
.timeline-item.is-just-stored .tl-item-card-clickable { animation: tl-stored-in .6s cubic-bezier(.2,.8,.2,1) both, tl-stored-glow 2.4s .6s ease-out both; }
@keyframes tl-stored-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes tl-stored-glow { from { background: #e0f2f1; box-shadow: 0 0 0 2px #80cbc4; } to { background: transparent; box-shadow: 0 0 0 0 transparent; } }

/* タイムラインの会議：要約は畳み、残ったものを件数で見せる */
.tl-summary-counts { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.tl-summary-count { padding: 2px 8px; border-radius: 999px; color: #075e50; background: #e0f2f1; font-size: 11px; }
.tl-summary-count b { font-weight: 700; }

/* ガイド外を押したときに、押すべき場所の枠を一瞬強く光らせる */
.tour-ring.is-nudge { animation: tour-ring-nudge .7s ease-out 1, tour-ring-pulse 1.6s .7s ease-out infinite; }
@keyframes tour-ring-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 121, 107, 0); } 30% { box-shadow: 0 0 0 8px rgba(0, 121, 107, .35); border-width: 3px; } }
.toast.is-guide { border-color: #fcd34d; color: #92400e; background: #fffbeb; }