/* ============================================================================
   Welconvo 管理画面 — スタイル
   設計方針: ITに不慣れな担当者でも迷わない。明るく静かな面に、
   意味のある場所だけ色を置く。左にメニュー、右に内容。
   ============================================================================ */

:root {
  --bg:        #F7F8FB;   /* ページ背景 */
  --surface:   #FFFFFF;   /* カード */
  --sidebar:   #101728;   /* 左メニュー（濃紺） */
  --sidebar-2: #1A2440;
  --line:      #E4E9F2;
  --text:      #1A2233;
  --text-dim:  #6B7A90;
  --accent:    #2E6BFF;
  --accent-2:  #7B5CFF;
  --ok:        #12A150;
  --warn:      #C2410C;
  --danger:    #DC2626;
  --radius:    14px;
  --shadow:    0 1px 2px rgba(16,23,40,.04), 0 8px 24px rgba(16,23,40,.06);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }

/* ===== 全体レイアウト（左メニュー＋右コンテンツ）======================== */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

/* --- 左メニュー ---------------------------------------------------------- */
.side {
  background: linear-gradient(180deg, var(--sidebar-2), var(--sidebar));
  color: #E8EDF7; padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh;
  /* ★運営の項目（2026年10月11日に左へ移した）が増え、低い画面ではログアウトまで届かなかった。メニューだけ上下に動かせるようにする */
  overflow-y: auto; overscroll-behavior: contain;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.brand .logo {
  width: 30px; height: 30px; flex: none; display: block; object-fit: contain;
}
.brand .name { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.brand .sub { font-size: 11px; color: #8DA0C0; margin-top: 1px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  color: #B9C6DD; text-decoration: none; font-size: 14px;
  transition: background .18s, color .18s;
}
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.on { background: rgba(46,107,255,.22); color: #fff; font-weight: 600; }
.nav a .ic { width: 18px; height: 18px; flex: none; opacity: .9; }
.nav .sec { font-size: 11px; color: #6F82A3; padding: 14px 12px 6px; letter-spacing: .06em; }

.side .foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.side .who { font-size: 12px; color: #8DA0C0; margin-bottom: 8px; word-break: break-all; }
.side .out { font-size: 12.5px; color: #B9C6DD; background: none; border: none; cursor: pointer; padding: 0; }
.side .out:hover { color: #fff; text-decoration: underline; }

/* --- 右コンテンツ -------------------------------------------------------- */
.main { padding: 28px 32px 64px; }
.head { margin-bottom: 22px; }
.head h1 { font-size: 22px; font-weight: 700; letter-spacing: .01em; }
.head p { color: var(--text-dim); font-size: 13.5px; margin-top: 6px; line-height: 1.7; }

/* ===== 部品 ============================================================== */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 18px;
}
.card h2 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }

/* 既定の担当者アイコンを選ぶボタン */
.avpick {
  width: 52px; height: 52px; border-radius: 50%; padding: 0; overflow: hidden;
  border: 2px solid var(--line); background: #fff; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
/* 写真も絵も同じ <img> で出す（選ぶ側から見れば違いは無い） */
.avpick img { width: 100%; height: 100%; display: block; object-fit: cover; }
.avpick:hover { transform: translateY(-1px); border-color: var(--accent); }
.avpick.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46,107,255,.15); }

/* たたんで並べる設定カード
   ★1枚の白枠に詰め込むと、どこを触ればよいか分からなくなる。 */
details.card.sect { padding: 0; }
details.card.sect > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 16px 20px; list-style: none;
}
details.card.sect > summary::-webkit-details-marker { display: none; }
details.card.sect > summary::before {
  content: "▸"; color: var(--text-dim); font-size: 12px; flex: none;
}
details.card.sect[open] > summary::before { content: "▾"; }
details.card.sect > summary:hover { background: #FAFBFE; border-radius: var(--radius); }
details.card.sect > summary .ctitle { font-size: 15px; font-weight: 700; }
details.card.sect > summary .cstatus {
  margin-left: auto; font-size: 12.5px; color: var(--text-dim);
  text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 45%;
}
details.card.sect[open] > summary { border-bottom: 1px solid var(--line-2); }
details.card.sect > .sbody { padding: 16px 20px 20px; }
details.card.sect > .sbody > .desc:first-child { margin-top: 0; }
.card .desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; margin-bottom: 14px; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }

/* 指標タイル */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .label { font-size: 12px; color: var(--text-dim); }
.stat .value { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -.01em; }
.stat .delta { font-size: 12px; margin-top: 4px; }
.stat .delta.up { color: var(--ok); } .stat .delta.down { color: var(--warn); }

/* フォーム */
label.f { display: block; margin-bottom: 14px; }
label.f .t { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46,107,255,.12);
}
textarea { resize: vertical; min-height: 80px; }
/* まだ変えられない欄。壊れているのではなく「いまは変えられない」と分かる見た目にする */
input:disabled, select:disabled, textarea:disabled {
  background: var(--bg); color: var(--text-dim); cursor: default;
}
.hint { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.6; }
/* 2行以上の説明で、改行をそのまま出す */
.hint.multi { white-space: pre-line; }

/* ボタン */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: 13.5px; font-weight: 600;
  transition: background .18s, border-color .18s, transform .12s;
}
.btn:hover { border-color: #C9D3E4; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.p { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }
.btn.p:hover { box-shadow: 0 4px 14px rgba(46,107,255,.28); }
.btn.d { color: var(--danger); border-color: #F3C9C9; background: #FEF6F6; }
.btn.s { padding: 7px 12px; font-size: 12.5px; }

/* テーブル */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 12px; color: var(--text-dim); font-weight: 600;
     padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid #F0F3F8; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.clickable:hover { background: #FAFBFE; cursor: pointer; }
/* ★一覧の中身は折り返さない。「AIが対／応」「開／く」のように割れると
   1行が3行分の高さになり、一覧としてとても読みにくくなる。 */
td .badge, td .btn { white-space: nowrap; }
/* 中身の幅ぴったりに縮める列。余った幅は class を付けなかった列へ回る */
th.fit, td.fit { width: 1%; white-space: nowrap; }
/* 操作ボタンの列。右端に寄せる */
th.act, td.act { text-align: right; }
/* ログイン画面の補助リンク（パスワードの再設定） */
.linkbtn{
  display:block; width:100%; margin-top:14px; padding:6px;
  background:none; border:0; cursor:pointer;
  font-size:12.5px; color:var(--text-dim); text-decoration:underline;
}
.linkbtn:hover{color:var(--accent)}
.linkbtn:disabled{opacity:.5; cursor:default}

/* 分類ごとにまとめた質問の一覧（開くと中身が出る）*/
details.acc > summary { display: flex; align-items: center; gap: 12px; }
details.acc > summary::before { flex: none; }
.qcount { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums;
  min-width: 52px; text-align: right; }
.qbarwrap { flex: 1; min-width: 60px; max-width: 220px; height: 6px;
  background: #EDF1F7; border-radius: 999px; overflow: hidden; }
.qbar { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #7BA6FF); }
.qpct { font-size: 12px; color: var(--text-dim); min-width: 36px;
  text-align: right; font-variant-numeric: tabular-nums; }
.qrow { display: flex; align-items: center; gap: 12px; padding: 8px 4px;
  border-top: 1px solid #F0F3F8; }
.qrow:first-child { border-top: 0; }
.qtext { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.7; }
.qrow .qmeta { font-size: 12px; color: var(--text-dim); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
/* 手で分類を移したもの */
.qmoved { font-size: 10.5px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 1px 7px; margin-left: 8px; white-space: nowrap; }
/* 移動先を選ぶ小さな一覧 */
.qmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 190px; padding: 6px; }
.qmenuhead { font-size: 11.5px; color: var(--text-dim); padding: 4px 10px 6px; }

/* 営業時間の表。選択欄が画面いっぱいに広がらないようにする */
table.hours td { padding: 5px 8px; border-bottom: none; vertical-align: middle; }
table.hours select { width: auto; min-width: 88px; padding: 7px 10px; }
table.hours .row { flex-wrap: nowrap; gap: 6px; align-items: center; }

/* 長い文章の列。1行に収め、あふれた分は…にする */
td.clip { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-dim); }

/* バッジ */
.badge { display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: #F1F4F9; color: var(--text-dim); border: 1px solid var(--line); }
.badge.ok { background: #ECFDF3; color: var(--ok); border-color: #C7EFD7; }
.badge.warn { background: #FFF5EC; color: var(--warn); border-color: #FBD9BE; }
.badge.hot { background: #FFF0F0; color: var(--danger); border-color: #F8CFCF; }

/* 熱量バー */
.heat { display: flex; align-items: center; gap: 8px; }
.heat .bar { width: 64px; height: 6px; border-radius: 999px; background: #EDF1F7; overflow: hidden; }
.heat .bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #3FA9F5, #F2C14E, #F35B5B); }
.heat .n { font-size: 12.5px; color: var(--text-dim); min-width: 24px; }

/* 空状態（何をすればいいか示す） */
.empty { text-align: center; padding: 42px 20px; color: var(--text-dim); }
.empty .big { font-size: 15px; color: var(--text); font-weight: 600; margin-bottom: 6px; }
.empty p { font-size: 13px; line-height: 1.8; }

/* 通知 */
/* 知らせは右下に縦に並べる。エラーは「×」で閉じるまで残る（2026年10月4日） */
.toasts {
  position: fixed; right: 22px; bottom: 22px; z-index: 100;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  max-width: min(520px, calc(100vw - 44px)); pointer-events: none;
}
.toast {
  background: #12203A; color: #fff; padding: 13px 18px; border-radius: 11px;
  font-size: 13.5px; line-height: 1.7; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  animation: up .3s cubic-bezier(.22,1,.36,1); pointer-events: auto;
}
.toast.err { background: #7F1D1D; display: flex; align-items: flex-start; gap: 12px; padding-right: 10px; }
.toast .tx-close { flex: none; background: none; border: none; color: #fff; opacity: .85;
  font-size: 18px; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 6px; }
.toast .tx-close:hover { opacity: 1; background: rgba(255,255,255,.15); }
/* 右上の通知（エビデンスの読み込みが終わった時。193） */
body .toasts.top { top: 18px; bottom: auto; }   /* 使い方のチャットがある時の .has-hc .toasts より強く */
.toast.done { display: flex; align-items: flex-start; gap: 12px; padding-right: 10px; }
@keyframes up { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ログイン */
.login { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login .box { width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 32px 28px; }
.login .brand { justify-content: center; padding-bottom: 22px; }

/* 会話ログ */
.chat { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.bub { max-width: 78%; padding: 10px 13px; border-radius: 13px; font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; }
.bub.visitor { align-self: flex-start; background: #F1F4F9; }
.bub.ai { align-self: flex-end; background: #EDF3FF; }
/* AIの返事の大事な所の飾り（2026年11月2日・229）。お客様の画面（widget の .emb・.eml）と同じ見え方 */
/* 文中のリンク（2026年11月3日・230）。お客様の画面（widget の a.cvinline）と同じく、色・太字・下線 */
.bub a.inlink { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.bub .emb { font-weight: 700; }
.bub .eml { background: linear-gradient(transparent 60%, rgba(56,189,248,.42) 60%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 1px; }
.bub.human { align-self: flex-end; background: #ECFDF3; }

/* 折りたたみ */
details.acc { border: 1px solid var(--line); border-radius: 11px; margin-bottom: 10px; background: #fff; }
details.acc > summary { padding: 13px 15px; cursor: pointer; font-size: 13.5px; font-weight: 600; list-style: none; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before { content: "▸ "; color: var(--text-dim); }
details.acc[open] > summary::before { content: "▾ "; }
details.acc > div { padding: 0 15px 15px; }

/* スマホ: メニューを上部に */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  /* ★min-width を 0 にしないと、グリッドの列が中身の幅まで広がってしまう
     （既定の min-width:auto）。メニューが画面より広くなり、画面全体が
     横にはみ出して右端の項目が切れる。 */
  .app > * { min-width: 0; }
  .side { position: static; height: auto; min-width: 0; }
  .nav { flex-direction: row; overflow-x: auto; }
  /* ★横に並べると幅が足りず「チャッ／ト」のように割れる。折り返さずに
     横スクロールさせる（.nav は overflow-x: auto にしてある）。 */
  .nav a { white-space: nowrap; flex: 0 0 auto; }
  .nav .sec { display: none; }
  .side .foot { display: none; }
  .main { padding: 20px 16px 48px; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
}

/* ============================================================================
   追加: 視覚的に分かりやすくする部品（ゲージ・グラフ・説明・トグル）
   ============================================================================ */

/* --- 右上のプロフィール --------------------------------------------------- */
/* ★幅を 1100px で止めていたため、大きな画面では右側が大きく空き、
   右上のアイコンが中央あたりに来て、表や説明文だけが窮屈に折り返していた。
   画面の幅をそのまま使う。 */
.topbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 14px 32px 0; }
/* 運営がほかの会社を見るだけで開いている時の帯（view-as.js・11/7）。画面を下へ送っても見えるように上に留める */
.viewbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 14px; padding: 10px 32px; background: #FFF4E5; border-bottom: 1px solid #F5C77E;
  color: #7A3E00; font-size: 13.5px; line-height: 1.6; }
.viewbar-t { flex: 1 1 260px; min-width: 0; }
.viewbar-t b { margin-right: 2px; }
@media print { .viewbar { display: none; } }
.avatar { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; flex: none;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow);
  background: linear-gradient(135deg, #E8EDF7, #CFD9EA); overflow: hidden;
  display: grid; place-items: center; transition: box-shadow .2s, transform .15s; }
.avatar:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar svg { width: 22px; height: 22px; color: #8A9AB5; }
.avatar .dot { position: absolute; }
.avwrap { position: relative; }
.avwrap .badge-n { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px;
  display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--bg); }

.menu { position: absolute; right: 0; top: 46px; width: 260px; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(16,23,40,.14); overflow: hidden;
  animation: pop .16s cubic-bezier(.22,1,.36,1); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98) } to { opacity: 1; transform: none } }
.menu .mhead { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.menu .mhead .n { font-size: 13.5px; font-weight: 700; }
.menu .mhead .e { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; word-break: break-all; }
.menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; font-size: 13.5px; color: var(--text); text-decoration: none; cursor: pointer; }
.menu a:hover { background: #F6F8FC; }
.menu .sep { height: 1px; background: var(--line); }

/* --- 説明ツールチップ（？マーク）------------------------------------------ */
.q { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px;
  border-radius: 50%; background: #E7ECF5; color: #6B7A90; font-size: 11px; font-weight: 700;
  cursor: help; position: relative; vertical-align: middle; user-select: none; }
.q:hover { background: var(--accent); color: #fff; }
.q .tip { display: none; position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: 280px; background: #12203A; color: #fff; font-size: 12px; font-weight: 400;
  line-height: 1.8; padding: 11px 13px; border-radius: 10px; z-index: 70; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); white-space: pre-line; }
.q:hover .tip, .q:focus .tip { display: block; }
.q .tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #12203A; }

/* --- 切り替えトグル -------------------------------------------------------- */
.tg { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.tg input { display: none; }
.tg .sw { width: 42px; height: 24px; border-radius: 999px; background: #D5DCE8; position: relative;
  transition: background .2s; flex: none; }
.tg .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.tg input:checked + .sw { background: var(--ok); }
.tg input:checked + .sw::after { transform: translateX(18px); }
.tg .lb { font-size: 13px; font-weight: 600; }

/* --- ゲージ（円） ---------------------------------------------------------- */
.gauge { display: grid; place-items: center; position: relative; }
.gauge .val { position: absolute; text-align: center; }
.gauge .val .n { font-size: 22px; font-weight: 700; line-height: 1.1; }
.gauge .val .u { font-size: 11px; color: var(--text-dim); }

/* --- 棒グラフ -------------------------------------------------------------- */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding: 8px 0 0; }
.bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.bars .col .b { width: 100%; max-width: 46px; border-radius: 7px 7px 0 0; margin-top: auto;
  background: linear-gradient(180deg, var(--accent), #6E9BFF); min-height: 3px;
  transition: height .5s cubic-bezier(.22,1,.36,1); }
.bars .col .b.warm { background: linear-gradient(180deg, #F2994A, #F2C14E); }
.bars .col .b.hot  { background: linear-gradient(180deg, #E8524F, #F2994A); }
.bars .col .cap { font-size: 11px; color: var(--text-dim); text-align: center; line-height: 1.4; }
.bars .col .num { font-size: 12px; font-weight: 700; }

/* --- 進捗バー -------------------------------------------------------------- */
.prog { height: 8px; border-radius: 999px; background: #EDF1F7; overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s; }

/* --- 注意書き（赤） -------------------------------------------------------- */
.warnbox { background: #FEF6F6; border: 1px solid #F5D2D2; border-radius: 11px;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.8; color: #B42318; margin-bottom: 14px; }
.warnbox b { font-weight: 700; }

/* --- 説明ボックス（使い方ガイド）------------------------------------------- */
.guide { background: #F4F8FF; border: 1px solid #D6E4FF; border-radius: 11px;
  padding: 14px 16px; font-size: 12.5px; line-height: 1.9; color: #1B3A6B; margin-bottom: 16px; }
.guide b { font-weight: 700; }
.guide ol { margin: 6px 0 0 18px; } .guide li { margin-bottom: 3px; }

/* --- モーダル -------------------------------------------------------------- */
.mask { position: fixed; inset: 0; background: rgba(16,23,40,.45); z-index: 80;
  display: grid; place-items: center; padding: 20px; animation: fade .18s; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: pop .2s cubic-bezier(.22,1,.36,1); }
.modal .mh { padding: 18px 22px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; }
.modal .mh h2 { font-size: 16px; font-weight: 700; }
.modal .mb { padding: 20px 22px; }
.modal .mf { padding: 14px 22px 20px; display: flex; gap: 10px; justify-content: flex-end; }
.x { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 20px; line-height: 1; }

/* --- タブ ------------------------------------------------------------------ */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs button { background: none; border: none; cursor: pointer; padding: 10px 16px;
  font-size: 13.5px; color: var(--text-dim); border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }

/* --- フィルタ行 ------------------------------------------------------------ */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters label { font-size: 12px; color: var(--text-dim); }
.filters select, .filters input { min-width: 150px; padding: 8px 11px; }

/* ファイルのドロップ領域 */
.drop { border: 2px dashed #C9D5E8; border-radius: 12px; padding: 26px; text-align: center;
  color: var(--text-dim); font-size: 13px; cursor: pointer; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: var(--accent); background: #F6F9FF; }

/* --- チャット詳細：発言者ラベル・AI下書き ---------------------------------- */
.bub .bwho{font-size:11px;font-weight:700;letter-spacing:.02em;opacity:.62;margin-bottom:4px}
.bub.human{background:#0F2A43;color:#EAF2FF;margin-left:auto}
.draft{border:1px solid #CFE0FF;background:#F7FAFF;border-radius:12px;padding:14px;margin-bottom:12px}
.draft .dhead{font-size:12px;font-weight:700;color:#2C5AA0;margin-bottom:6px}
.draft .dbody{font-size:13.5px;line-height:1.9;white-space:pre-wrap;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px}
.draft textarea{margin-top:8px}
/* エビデンスから参照した資料の1件分 */
.draft .ref{background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px;margin-top:10px}
.draft .ref .rpoint{font-size:13.5px;line-height:1.8;font-weight:600}
.draft .ref details{margin-top:8px}
.draft .ref summary{font-size:12px;color:var(--text-dim);cursor:pointer}
.draft .ref .rbody{font-size:12.5px;line-height:1.9;color:var(--text-dim);
  white-space:pre-wrap;margin-top:8px;max-height:220px;overflow:auto}
.draft .ref .rsrc{display:inline-block;margin-top:8px;font-size:11.5px;
  color:var(--accent);word-break:break-all}

/* --- 一覧の合計件数 --------------------------------------------------------- */
.total{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:4px;padding-top:14px;font-size:13px;color:var(--text-dim)}
.total b{font-size:19px;font-weight:700;color:var(--text)}
.total .hint{font-size:11.5px}

/* --- ラジオ選択（有人対応の運用など）--------------------------------------- */
.pick{display:flex;gap:11px;align-items:flex-start;padding:13px 0;
  border-top:1px solid var(--line);cursor:pointer}
.pick input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent);flex:none}
.pick .pt{font-size:13.5px;font-weight:600;line-height:1.5}
.pick .pd{font-size:12px;color:var(--text-dim);margin-top:3px;line-height:1.7}

/* --- プラン比較カード ------------------------------------------------------- */
.plan{position:relative;border:1px solid var(--line);border-radius:15px;padding:20px;background:#fff}
.plan.cur{border-color:var(--accent);box-shadow:0 0 0 3px rgba(58,124,255,.10)}
.plan .tag{position:absolute;top:-10px;left:18px;background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px}
.plan .pn{font-size:15px;font-weight:700}
.plan .pp{font-size:26px;font-weight:700;margin:6px 0 14px;letter-spacing:-.01em}
.plan .pp .u{font-size:12px;font-weight:500;color:var(--text-dim);margin-left:3px}
.plan .pr{display:flex;justify-content:space-between;gap:10px;
  padding:9px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-dim)}
.plan .pr b{color:var(--text);font-weight:600;text-align:right}

/* --- コピーさせたい文字列（共有先アドレスなど）------------------------------ */
.copytext{flex:1;min-width:240px;display:block;background:#F4F6FB;border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;font-size:13px;word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* --- 折りたたみの説明（長い手順） ------------------------------------------- */
.tbox{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:#FAFBFE}
.tbox summary{cursor:pointer;padding:12px 14px;font-size:13px;font-weight:600;
  list-style:none;display:flex;align-items:center;gap:8px}
.tbox summary::-webkit-details-marker{display:none}
.tbox summary::before{content:"▶";font-size:9px;color:var(--text-dim);transition:transform .2s}
.tbox[open] summary::before{transform:rotate(90deg)}
.tbox .tbody{padding:0 16px 16px;font-size:12.5px;line-height:1.95;color:var(--text-dim)}
.tbox .tbody b{color:var(--text)}

/* --- 診断のプレビュー（チャットでの見え方）---------------------------------- */
.cpv{background:#0F1526;border-radius:14px;padding:16px;max-height:340px;overflow-y:auto;
  display:flex;flex-direction:column;gap:9px;margin-top:12px}
.cpvb{max-width:82%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.75;
  white-space:pre-wrap;word-break:break-word}
.cpvb.ai{align-self:flex-start;background:#1B2540;color:#E7EDFB;border-bottom-left-radius:5px}
.cpvb.user{align-self:flex-end;background:#3AA9FF;color:#06121F;border-bottom-right-radius:5px}
.cpvc{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:92%}
.cpvchip{padding:7px 13px;border-radius:999px;font-size:12.5px;cursor:pointer;
  background:transparent;border:1px solid #2C3A5C;color:#BFD0EE}
.cpvchip:hover{border-color:#3AA9FF;color:#fff}

/* --- 時間帯・曜日の分布 ------------------------------------------------------ */
.heat{display:grid;grid-template-columns:26px repeat(24,1fr);gap:2px;margin-top:14px}
.heat .hcell{aspect-ratio:1;border-radius:3px;background:#F1F4FA;min-height:14px}
.heat .hcell.hhead{background:transparent;display:grid;place-items:center;
  font-size:10px;color:var(--text-dim);aspect-ratio:auto}

/* --- 対応可否の切り替え（有人対応を使う設定の時だけ表示）--------------------- */
.presence{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--text-dim);margin-right:12px}
.presence:hover{border-color:var(--accent)}
.presence .dot{width:8px;height:8px;border-radius:50%;background:#C7CEDB;flex:none}
.presence.on{color:#0F7B3E;border-color:#BFE6CE;background:#F2FBF6}
.presence.on .dot{background:#14A44D;box-shadow:0 0 0 3px rgba(20,164,77,.18)}

/* --- この画面のマニュアルを見る（対応可否の左）---------------------------------- */
.manualbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--accent)}
.manualbtn:hover{border-color:var(--accent);background:#F4F7FF}
.manualbtn .short{display:none}
/* 幅が狭い時は短い言葉にする（右上に並ぶものが折り返さないように） */
@media (max-width:860px){ .manualbtn .long{display:none} .manualbtn .short{display:inline} }
@media print{ .manualbtn{display:none} }

/* --- 未計測の表示（ゲージの代わり）------------------------------------------ */
.nogauge{width:108px;display:grid;place-items:center;text-align:center;flex:none}
.nogauge .ng{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;
  border:3px dashed var(--line);color:var(--text-dim);font-size:14px;font-weight:600}
.nogauge .ngl{font-size:12px;color:var(--text-dim);margin-top:8px}

/* ===========================================================================
   レポート — そのまま社内で共有できる資料の見た目
   ★画面で見た通りに印刷されるようにする。印刷用に別の書き方をすると、
     画面では整っているのに配ったPDFだけ崩れる、が起きる。
   =========================================================================== */
.report {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 34px 38px 30px; color: #1B2333;
}
/* 表紙にあたる部分。上に細い色帯を置いて、資料としての体裁を作る */
.rhead { border-bottom: 2px solid #1B2333; padding-bottom: 18px; margin-bottom: 24px; position: relative; }
.rhead::before {
  content: ""; position: absolute; left: 0; top: -34px; right: 0; height: 5px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #2E6BFF, #7DD3FC);
}
.rtitle { font-size: 23px; font-weight: 800; letter-spacing: .02em; }
.rorg   { font-size: 15px; font-weight: 700; margin-top: 6px; color: #33405C; }
.rmeta  { font-size: 12.5px; color: #5B6478; margin-top: 4px; }

/* 会議で最初に聞かれる数字。ここだけ大きく */
.rkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.rkpi  { border: 1px solid var(--line); border-radius: 11px; padding: 14px 15px; background: #FAFBFD; }
.rkpi .l { font-size: 11.5px; color: #5B6478; }
.rkpi .v { font-size: 27px; font-weight: 800; line-height: 1.25; margin-top: 3px; letter-spacing: -.01em; }
.rkpi .s { font-size: 11.5px; color: #5B6478; min-height: 17px; }

/* --- 「AIが学習していること」（2026年9月25日からレポートに出す）--------------------------------------- */
/*  ★カードの中の小見出しと、効き目を示す細いバー。
    レポート用の .rsub は印刷向けの指定なので、画面では使わない。 */
/* レポートの中に置く時は、資料の1節として見せる（カードの枠を外す）。2026年9月26日 */
.rlearn .card { box-shadow: none; border: none; padding: 0; margin: 0; background: transparent; }
.rlearn .card > h2 { font-size: 14.5px; font-weight: 700; margin-bottom: 8px; padding-left: 9px; border-left: 3px solid #2E6BFF; }
.lsub { font-size: 13px; font-weight: 700; color: var(--text);
        margin: 18px 0 8px; padding-left: 8px; border-left: 3px solid #2E6BFF; }
.minibar { width: 72px; height: 6px; border-radius: 3px; background: #EEF2F9; overflow: hidden; }
.minibar i { display: block; height: 100%; border-radius: 3px; background: #2E6BFF; }
/* 「これだけ学習した」：大きな数字4つと、積み上がる棒グラフ（2026年9月25日・案A） */
.lgrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.lgrow-tile { border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 12px; background: #fff; }
.lg-label { font-size: 12px; color: var(--text-dim); display: flex; align-items: flex-start; gap: 4px; min-height: 34px; line-height: 1.4; }
.lg-num { font-size: 28px; font-weight: 800; color: var(--text); margin-top: 6px; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.lg-diff { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.lg-who { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); background: #F7F8FB; }
.lg-who.ai { color: var(--accent); border-color: #CFDBFF; background: #F2F6FF; }
.lgchart { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 8px 2px 0;
  border-bottom: 1px solid var(--line); margin-top: 8px; }
.lg-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; cursor: default; }
.lg-col:hover .lg-bar { filter: brightness(1.12); }
.lg-val { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; min-height: 16px; }
.lg-bar { width: 70%; max-width: 44px; background: var(--accent); border-radius: 4px 4px 0 0; }
.lg-mon { font-size: 11px; color: var(--text-dim); margin: 6px 0 -22px; height: 16px; }
.lgchart { margin-bottom: 26px; }
/* ご利用マニュアル：画面の項目の中に並べる「くわしい説明」（2026年9月25日） */
.msub { margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; background: #F7F8FB; }
.msub-t { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 4px; }
.msub details.acc { background: #fff; }
details.lmore { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
details.lmore > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); }
@media (max-width:860px){ .lgrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rsec { margin-bottom: 24px; }
.rsec h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 8px;
           padding-left: 9px; border-left: 3px solid #2E6BFF; }
.rnote  { font-size: 11.5px; color: #5B6478; margin-bottom: 7px; line-height: 1.75; }
.rempty { font-size: 12.5px; color: #8A93A6; padding: 12px 0; }
.rsub   { font-size: 12.5px; font-weight: 700; margin: 10px 0 4px; }
.rlist  { margin: 0 0 0 18px; font-size: 13px; line-height: 1.95; }
/* 11. AIの見解のまとめ（文章）。2026年9月26日 */
.rsummary { font-size: 13px; line-height: 1.95; margin: 0; }

.rtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rtable th {
  text-align: left; background: #F2F5FA; color: #33405C; font-weight: 700;
  padding: 8px 10px; border: 1px solid var(--line); white-space: nowrap;
}
.rtable td { padding: 8px 10px; border: 1px solid var(--line); line-height: 1.6;
             word-break: break-all; }
.rtable td.n { text-align: right; white-space: nowrap; width: 1%; }
/* 日付など、折り返すと読めなくなる列。★幅を詰めても縦に割らない */
.rtable td.d { white-space: nowrap; width: 1%; }
/* 文字の棒グラフ。★印刷でもCSVでも崩れないよう、文字だけで描く */
.rtable td.bar { white-space: nowrap; width: 1%; letter-spacing: -1px;
                 color: var(--brand, #2F6BFF); }
/* 表がはみ出す時は、ページではなく表の中だけを横に動かす */
.rscroll { overflow-x: auto; }
.rtable tbody tr:nth-child(even) td { background: #FAFBFD; }

.rfoot { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line);
         font-size: 11px; color: #8A93A6; line-height: 1.8; }

/* --- 印刷（PDF保存）------------------------------------------------------
   ★管理画面の枠は資料に不要なので消す。残すのは .report だけ。
   ★表が途中で切れないように、区切りで改ページさせる。 */
@media print {
  .side, .topbar, .noprint, .toasts, .toast, .modal, .mask { display: none !important; }
  .app, .main { display: block !important; margin: 0 !important; padding: 0 !important;
                max-width: none !important; }
  body { background: #fff !important; }
  .pagehead { display: none !important; }
  .report { border: none; border-radius: 0; padding: 0; }
  .rhead::before { display: none; }          /* 色帯は紙では意味がない */
  .rsec, .rkpis { break-inside: avoid; page-break-inside: avoid; }
  /* ★印刷では、横に動かす囲いを外す。囲ったままだと右が切れて出る */
  .rscroll { overflow: visible !important; }
  .rtable tbody tr { break-inside: avoid; page-break-inside: avoid; }
  .rtable tbody tr.rpage-hide { display: table-row !important; }   /* 画面は10件ずつ・印刷は全件（2-3） */
  .rtable thead { display: table-header-group; }   /* 改ページ後も見出しを出す */
  @page { margin: 14mm 12mm; }
  /* 11. AIが学習していること（2026年9月26日からPDFに出す）
     ★長いので、ページをまたいでよい（またがせないと、まるごと次のページへ飛んで空白ができる）。
     ★「?」の説明は紙では開けないので出さない。棒グラフの色は、印刷でも消さない。 */
  .rsec.rlearn { break-inside: auto; page-break-inside: auto; }
  .rlearn .q { display: none; }
  .rlearn .lgrow-tile, .rlearn .lgchart, .rlearn .lg-bar, .rlearn .lg-who, .rlearn .minibar, .rlearn .minibar i,
  .rlearn .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rlearn .lgrow-tile, .rlearn .lmore > div { break-inside: avoid; page-break-inside: avoid; }
  .rlearn .lgrow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 左メニューの「対応待ち」件数
   ★お待たせしている数なので、他の色と混ぜず、目に付く赤にする。 */
.navbadge {
  margin-left: auto; min-width: 20px; padding: 1px 6px;
  border-radius: 999px; background: #E5484D; color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 1.6;
  text-align: center; font-variant-numeric: tabular-nums;
}
.nav a { display: flex; align-items: center; gap: 10px; }

/*  日本語以外の会話で、原文の下に添える日本語。
    原文と見分けがつくように、少し小さく薄くする。 */
.bub .trans {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--text-dim);
}

/* 分析：日付ごとの折れ線（2026年9月26日） */
.lc { position: relative; margin: 6px 0 4px; }
.lc-tip { display: none; position: absolute; top: 0; z-index: 2;
  background: #1A2233; color: #fff; font-size: 12px; padding: 5px 9px; border-radius: 6px;
  white-space: nowrap; pointer-events: none; line-height: 1.6; }
.lc-tip-h { font-weight: 700; }
.lc-tip-sum { border-top: 1px solid rgba(255,255,255,.3); margin-top: 3px; padding-top: 3px; font-weight: 700; }

/* ============================================================================
   営業の型の診断（2026年10月4日・149・ご本人の指示「AI感のある、おしゃれなデザイン」「アイコン」「モーション」）
   画面いっぱいの暗い面に、ゆっくり動く光を置き、その上にすりガラスの板を重ねる。
   絵文字は使わない（アイコンはすべて SVG）。動きを減らす設定の方には、動きを止める。
   ============================================================================ */
.sd { position: fixed; inset: 0; z-index: 90; overflow-y: auto; color: #EEF2FF;
  background: radial-gradient(120% 90% at 10% 0%, #1B2350 0%, #0B1024 55%, #070A18 100%);
  animation: sd-fade .35s ease both; -webkit-font-smoothing: antialiased; }
.sd-bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.sd-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.sd-orb.o1 { width: 520px; height: 520px; left: -140px; top: -160px; background: #2E6BFF; animation: sd-drift1 18s ease-in-out infinite alternate; }
.sd-orb.o2 { width: 460px; height: 460px; right: -120px; top: 18%; background: #7B5CFF; animation: sd-drift2 22s ease-in-out infinite alternate; }
.sd-orb.o3 { width: 380px; height: 380px; left: 30%; bottom: -200px; background: #14B8C9; opacity: .32; animation: sd-drift3 26s ease-in-out infinite alternate; }
.sd-grid { position: absolute; inset: 0; opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%); }

.sd-wrap { position: relative; min-height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 40px 16px; }
.sd-card { position: relative; width: 100%; max-width: 760px; border-radius: 24px; padding: 28px 32px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(3,6,20,.55), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  animation: sd-rise .55s cubic-bezier(.2,.8,.2,1) both; }

.sd-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sd-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #DCE4FF;
  background: linear-gradient(90deg, rgba(46,107,255,.28), rgba(123,92,255,.28));
  border: 1px solid rgba(160,175,255,.28); }
.sd-chip svg { width: 15px; height: 15px; color: #A9BBFF; animation: sd-twinkle 2.8s ease-in-out infinite; }
.sd-stepno { margin-left: auto; font-size: 12px; color: #9AA8D0; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.sd-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color: #C9D3F2; cursor: pointer; font-size: 18px; line-height: 1; }
.sd-x:hover { background: rgba(255,255,255,.1); }

.sd-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 26px; }
.sd-bar i { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; position: relative; }
.sd-bar i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, #4C8DFF, #9B7BFF); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.sd-bar i.on::after { transform: scaleX(1); }
.sd-bar i.now::after { transform: scaleX(1); background: linear-gradient(90deg, #4C8DFF, #9B7BFF, #4C8DFF);
  background-size: 200% 100%; animation: sd-flow 2.2s linear infinite; }

.sd-stage { position: relative; }
.sd-in-f { animation: sd-in-f .45s cubic-bezier(.2,.8,.2,1) both; }
.sd-in-b { animation: sd-in-b .45s cubic-bezier(.2,.8,.2,1) both; }

.sd-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #8FA6FF; margin-bottom: 8px; }
.sd-title { font-size: 25px; line-height: 1.45; font-weight: 800; letter-spacing: .01em; color: #fff; }
.sd-sub { font-size: 14px; line-height: 1.8; color: #AEB9DA; margin-top: 6px; }

.sd-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.sd-opt { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  padding: 16px 16px; border-radius: 16px; color: #EEF2FF;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  animation: sd-pop .5s cubic-bezier(.2,.8,.2,1) both; }
.sd-opt:hover { transform: translateY(-2px); background: rgba(255,255,255,.075); border-color: rgba(150,170,255,.45);
  box-shadow: 0 10px 30px rgba(46,107,255,.18); }
.sd-opt:focus-visible { outline: 2px solid #8FA6FF; outline-offset: 2px; }
.sd-opt .ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  color: #CFD9FF; background: linear-gradient(135deg, rgba(76,141,255,.28), rgba(155,123,255,.28));
  border: 1px solid rgba(170,185,255,.25); transition: transform .25s ease; }
.sd-opt:hover .ic { transform: scale(1.06) rotate(-3deg); }
.sd-opt .ic svg { width: 23px; height: 23px; }
.sd-opt .tx { flex: 1; min-width: 0; }
.sd-opt .lb { font-size: 15px; font-weight: 700; line-height: 1.5; }
.sd-opt .sb { font-size: 12.5px; color: #9AA8D0; margin-top: 2px; line-height: 1.6; }
.sd-opt .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25);
  display: grid; place-items: center; transition: all .2s ease; }
.sd-opt .ck svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.4); transition: all .25s cubic-bezier(.2,.8,.2,1); }
.sd-opt.sel { border-color: transparent; background: linear-gradient(rgba(23,30,66,.92), rgba(23,30,66,.92)) padding-box,
  linear-gradient(120deg, #4C8DFF, #9B7BFF) border-box; border: 1px solid transparent;
  box-shadow: 0 0 0 4px rgba(110,130,255,.14), 0 14px 34px rgba(76,141,255,.25); }
.sd-opt.sel .ck { background: linear-gradient(135deg, #4C8DFF, #9B7BFF); border-color: transparent; }
.sd-opt.sel .ck svg { opacity: 1; transform: none; }
.sd-opt.picked { animation: sd-picked .42s ease both; }

.sd-foot { display: flex; align-items: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.sd-foot .sp { flex: 1; }
.sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  padding: 12px 20px; border-radius: 12px; font-size: 14.5px; font-weight: 700; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, opacity .2s; }
.sd-btn svg { width: 17px; height: 17px; }
.sd-btn:disabled { opacity: .55; cursor: default; }
.sd-btn.pri { color: #fff; background: linear-gradient(120deg, #3B7BFF, #7B5CFF); background-size: 160% 100%;
  box-shadow: 0 10px 28px rgba(76,110,255,.38); }
.sd-btn.pri:hover:not(:disabled) { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 14px 34px rgba(110,100,255,.48); }
.sd-btn.pri svg { transition: transform .2s ease; }
.sd-btn.pri:hover svg { transform: translateX(3px); }
.sd-btn.gho { color: #C9D3F2; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.sd-btn.gho:hover { background: rgba(255,255,255,.1); }
.sd-btn.back svg { transform: scaleX(-1); }

/* はじめの画面 */
.sd-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 4px; }
.sd-core { position: relative; width: 132px; height: 132px; margin: 4px 0 22px; display: grid; place-items: center; }
.sd-core .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(150,170,255,.35);
  animation: sd-ring 3.2s ease-out infinite; }
.sd-core .ring.r2 { animation-delay: 1.07s; } .sd-core .ring.r3 { animation-delay: 2.14s; }
.sd-core .arc { position: absolute; inset: 10px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, #4C8DFF 75%, #9B7BFF 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: sd-spin 2.6s linear infinite; }
.sd-core .dot { position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #7FA8FF, #5B4BFF 60%, #2A1F8F);
  box-shadow: 0 0 40px rgba(110,120,255,.7), inset 0 2px 10px rgba(255,255,255,.35);
  animation: sd-breathe 3.2s ease-in-out infinite; }
.sd-core .dot svg { width: 30px; height: 30px; color: #fff; }
.sd-feats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.sd-feat { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font-size: 13px;
  color: #D7DFFA; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  animation: sd-pop .55s cubic-bezier(.2,.8,.2,1) both; }
.sd-feat svg { width: 16px; height: 16px; color: #9DB2FF; }

/* 読み取り中 */
.sd-think { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 0 18px; }
.sd-think .sd-core { width: 150px; height: 150px; }
.sd-think-t { font-size: 16px; font-weight: 700; color: #fff; min-height: 1.6em; }
.sd-think-t span { display: inline-block; animation: sd-in-f .4s ease both; }
.sd-think-s { font-size: 12.5px; color: #8E9BC4; margin-top: 8px; letter-spacing: .12em; }
.sd-scan { width: 220px; height: 3px; border-radius: 3px; margin-top: 18px; overflow: hidden; background: rgba(255,255,255,.08); }
.sd-scan i { display: block; width: 40%; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #9B7BFF, transparent); animation: sd-scan 1.3s ease-in-out infinite; }

/* 結果 */
.sd-res-head { display: flex; align-items: center; gap: 20px; }
.sd-badge { position: relative; flex: none; width: 92px; height: 92px; border-radius: 26px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, #3B7BFF, #7B5CFF);
  box-shadow: 0 16px 40px rgba(90,100,255,.45), inset 0 1px 0 rgba(255,255,255,.35);
  animation: sd-badge .8s cubic-bezier(.2,1.3,.4,1) both; }
.sd-badge svg { width: 42px; height: 42px; }
.sd-badge::before { content: ""; position: absolute; inset: -8px; border-radius: 32px; border: 1px solid rgba(160,170,255,.4);
  animation: sd-ring 2.8s ease-out infinite; }
.sd-name { font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: .02em;
  background: linear-gradient(100deg, #FFFFFF 10%, #B9C8FF 50%, #D3B9FF 90%); -webkit-background-clip: text; background-clip: text;
  color: transparent; }
.sd-catch { font-size: 14.5px; color: #C3CDEC; margin-top: 4px; line-height: 1.7; }
.sd-fit { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: #9DB2FF;
  padding: 4px 10px; border-radius: 999px; background: rgba(76,141,255,.14); border: 1px solid rgba(120,150,255,.25); }
.sd-fit svg { width: 13px; height: 13px; }
.sd-sec { margin-top: 24px; }
.sd-sec-t { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #8FA6FF; margin-bottom: 12px; }
.sd-sec-t svg { width: 15px; height: 15px; }
.sd-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; position: relative; }
.sd-flow::before { content: ""; position: absolute; left: 8%; right: 8%; top: 17px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #4C8DFF, #9B7BFF); transform-origin: left; animation: sd-draw 1s .25s cubic-bezier(.2,.8,.2,1) both; opacity: .6; }
.sd-step { position: relative; text-align: center; padding: 0 4px; animation: sd-pop .5s cubic-bezier(.2,.8,.2,1) both; }
.sd-step b { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  font-size: 14px; color: #fff; background: #151C3E; border: 2px solid #6C7DFF; box-shadow: 0 0 18px rgba(108,125,255,.5); }
.sd-step div { font-size: 13px; line-height: 1.7; color: #DCE3FA; margin-top: 10px; }
.sd-goals { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-goal { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 11px; font-size: 13px; font-weight: 600;
  color: #E3E9FF; background: rgba(123,92,255,.16); border: 1px solid rgba(160,140,255,.3); animation: sd-pop .5s cubic-bezier(.2,.8,.2,1) both; }
.sd-goal svg { width: 15px; height: 15px; color: #B7A6FF; }

/* ほかの型から選ぶ */
.sd-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.sd-types .sd-opt .rec { position: absolute; top: -9px; right: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #3B7BFF, #7B5CFF); }

/* 設定できた */
.sd-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 4px; }
.sd-okmark { width: 92px; height: 92px; margin-bottom: 18px; }
.sd-okmark circle { fill: none; stroke: url(#sdgrad); stroke-width: 4; stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: sd-stroke .7s cubic-bezier(.65,0,.45,1) forwards; }
.sd-okmark path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 60; animation: sd-stroke .45s .55s cubic-bezier(.65,0,.45,1) forwards; }
.sd-next { margin-top: 18px; width: 100%; max-width: 520px; text-align: left; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,200,90,.08); border: 1px solid rgba(255,200,90,.28); font-size: 13.5px; line-height: 1.8; color: #F6E3B8; }

/* 営業設定のカード（明るい面の上） */
.st-type { display: flex; gap: 16px; align-items: flex-start; }
.st-type .tile { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #3B7BFF, #7B5CFF); box-shadow: 0 8px 20px rgba(90,100,255,.28); }
.st-type .tile svg { width: 28px; height: 28px; }
.st-type .nm { font-size: 18px; font-weight: 800; }
.st-type .ct { font-size: 13.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.7; }
.st-flow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.st-flow span { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: #F1F4FF; color: #33427A; border: 1px solid #DCE3FF; }

@keyframes sd-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sd-rise { from { opacity: 0; transform: translateY(18px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes sd-in-f { from { opacity: 0; transform: translateX(26px) } to { opacity: 1; transform: none } }
@keyframes sd-in-b { from { opacity: 0; transform: translateX(-26px) } to { opacity: 1; transform: none } }
@keyframes sd-pop { from { opacity: 0; transform: translateY(10px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes sd-picked { 0% { transform: scale(1) } 40% { transform: scale(.97) } 100% { transform: scale(1) } }
@keyframes sd-drift1 { to { transform: translate(120px, 90px) scale(1.1) } }
@keyframes sd-drift2 { to { transform: translate(-110px, 80px) scale(.92) } }
@keyframes sd-drift3 { to { transform: translate(-90px, -70px) scale(1.15) } }
@keyframes sd-flow { to { background-position: -200% 0 } }
@keyframes sd-twinkle { 0%,100% { transform: scale(1) rotate(0); opacity: 1 } 50% { transform: scale(.82) rotate(20deg); opacity: .7 } }
@keyframes sd-ring { from { transform: scale(.7); opacity: .9 } to { transform: scale(1.25); opacity: 0 } }
@keyframes sd-spin { to { transform: rotate(360deg) } }
@keyframes sd-breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } }
@keyframes sd-scan { from { transform: translateX(-110%) } to { transform: translateX(260%) } }
@keyframes sd-badge { from { opacity: 0; transform: scale(.4) rotate(-12deg) } to { opacity: 1; transform: none } }
@keyframes sd-draw { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes sd-stroke { to { stroke-dashoffset: 0 } }

@media (max-width: 640px) {
  .sd-wrap { padding: 16px 16px 28px; align-items: flex-start; }
  .sd-card { padding: 22px 18px 20px; border-radius: 20px; }
  .sd-title { font-size: 21px; }
  .sd-opts, .sd-types { grid-template-columns: 1fr; }
  .sd-res-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sd-name { font-size: 26px; }
  .sd-flow { grid-template-columns: 1fr; gap: 10px; }
  .sd-flow::before { display: none; }
  .sd-step { display: flex; align-items: center; gap: 12px; text-align: left; }
  .sd-step div { margin-top: 0; }
  .sd-foot .sd-btn { flex: 1 1 auto; }
  .sd-foot .sp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sd *, .sd { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sd-orb { animation: none !important; }
}

/* ===== アナリティクス（161。2026年10月7日・見本で決めていただいた形）======================= */
.an-strip { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.an-meta { font-size: 12.5px; color: var(--text-dim); }
.an-strip .an-period { width: auto; margin-left: auto; padding: 7px 10px; }
.an-pg { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 12px; }
.an-t { font-weight: 700; font-size: 14px; }
.an-path { font-size: 12px; color: var(--accent); margin-left: 8px; font-weight: 400; word-break: break-all; }
td .an-path { margin-left: 0; }
.an-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.an-chip { font-size: 12px; background: #F3F6FB; border-radius: 7px; padding: 3px 8px; }
.an-chip.w { background: #FFF5EC; color: var(--warn); }
.an-why { font-size: 13px; line-height: 1.8; }
.an-topq { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.an-topq b { color: var(--text); font-weight: 600; }
.an-moves { background: #F6F4FF; border: 1px solid #E1DAFF; border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.an-mh { font-size: 12.5px; font-weight: 700; color: #5B3FD9; margin-bottom: 6px; }
.an-mv { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding: 9px 0; border-top: 1px dashed #E1DAFF; }
.an-mh + .an-mv { border-top: none; }
.an-mvx { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.7; }
.an-mvx small { display: block; color: var(--text-dim); font-size: 12px; }
.an-lock { background: #F7F8FB; border: 1px dashed #C9D3E4; border-radius: 10px; padding: 10px 14px; margin-top: 12px;
  font-size: 12.5px; color: var(--text-dim); }
.an-lock b { color: var(--text); }
.an-bar { height: 8px; border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.an-src td:nth-child(2) { width: 40%; }
.an-sub td:first-child { padding-left: 28px; color: var(--text-dim); }
.an-scroll { overflow-x: auto; }
.an-scroll td, .an-scroll th { white-space: nowrap; }
.an-heat { font-size: 12px; }
.an-heat th { text-align: center; }
.an-heat td:not(.fit) { text-align: center; border: 2px solid #fff; padding: 8px 4px; }
.an-callout { background: #EEF4FF; border: 1px solid #D5E2FF; border-radius: 10px; padding: 12px 14px;
  font-size: 13px; line-height: 1.8; margin-bottom: 18px; }
.an-steps { padding-left: 20px; font-size: 13.5px; line-height: 2; }
.an-copy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #F3F6FB; border-radius: 9px;
  padding: 8px 10px; margin: 6px 0 4px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; word-break: break-all; }
.an-input { width: 240px; max-width: 100%; }

/* ===== アバターと声で話しかける（設置。左に設定・右にお客様の画面での見え方。10/10 ご本人）=========== */
.av-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .av-stage { grid-template-columns: 1fr; } }
.av-pv { position: sticky; top: 16px; }
.av-ttl { font-size: 11.5px; color: var(--text-dim); margin-bottom: 8px; }
.av-scr { position: relative; height: 360px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #F8FAFD, #EEF2F8); }
.av-bar { display: flex; gap: 6px; padding: 9px 12px; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.av-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E1E6EF; }
.av-lines { padding: 18px 20px; display: grid; gap: 10px; }
.av-lines b { height: 14px; width: 46%; border-radius: 6px; background: #DDE3EE; }
.av-lines span { height: 9px; width: 88%; border-radius: 5px; background: #E6EAF2; }
.av-lnch { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: center; }
.av-btn { display: flex; align-items: center; gap: 7px; padding: 8px 14px 8px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 6px 20px rgba(16,24,40,.18); }
.av-btn img { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; object-fit: cover; }
.av-fig { position: relative; width: 96px; height: 160px; margin-bottom: -4px; transform-origin: 50% 100%; }
.av-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.av-fig .e, .av-fig .m { opacity: 0; }
.av-fig.eyes .e { opacity: 1; }
.av-fig.mouth .m { opacity: 1; }
.av-sh { position: absolute; left: 30%; width: 40%; top: 92%; height: 9px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,24,48,.22), transparent); }
.av-bub { position: absolute; right: calc(50% + 50px); bottom: 104px; width: 168px; padding: 10px 12px; border-radius: 14px;
  background: #FFFFFF; color: #1B2233; font-size: 12px; font-weight: 600; line-height: 1.55;
  box-shadow: 0 6px 24px rgba(16,24,40,.16), 0 1px 3px rgba(16,24,40,.08); }
.av-bub::after { content: ""; position: absolute; right: -7px; bottom: 14px;
  border: 8px solid transparent; border-right: 0; border-left-color: #FFFFFF; }

/* ============================================================================
   使い方のチャット（右下の丸いボタン。2026年10月11日・pages-help.js・SQL 174）
   ★ふつうのチャットのアイコンで、動きは付けない（ご本人：目立つと邪魔）。押すと右下に窓が開く。
   ============================================================================ */
.hc { position: fixed; right: 22px; bottom: 22px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.has-hc .toasts { bottom: 92px; }

.hc-fab { width: 54px; height: 54px; border: none; border-radius: 50%; padding: 0; cursor: pointer; color: #fff;
  display: grid; place-items: center; background: var(--accent); box-shadow: 0 6px 18px rgba(16,23,40,.18); }
.hc-fab:hover { background: #2459E0; }
.hc-fab:focus-visible { outline: 3px solid rgba(46,107,255,.4); outline-offset: 3px; }

/* 窓 */
.hc-panel { width: 380px; height: min(580px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(123,92,255,.18); border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(16,23,40,.22), 0 2px 8px rgba(16,23,40,.06); }
.hc-panel[hidden] { display: none; }

.hc-head { display: flex; align-items: center; gap: 11px; padding: 14px 14px 14px 16px; color: #fff;
  background: linear-gradient(120deg, #101728 0%, #1E2A5A 45%, #3B2E8F 100%); }
.hc-hcore { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.95); }
.hc-hlogo { width: 26px; height: 26px; }
.hc-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.hc-ht b { font-size: 14.5px; letter-spacing: .02em; }
.hc-ht span { font-size: 11.5px; opacity: .75; }
.hc-x { flex: none; width: 30px; height: 30px; border: none; border-radius: 8px; background: rgba(255,255,255,.1);
  color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.hc-x:hover { background: rgba(255,255,255,.2); }

.hc-list { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #F7F8FF 0%, #FFFFFF 140px); }
.hc-msg { display: flex; }
.hc-msg.me { justify-content: flex-end; }
.hc-bub { max-width: 86%; padding: 10px 13px; border-radius: 15px; font-size: 13.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.hc-msg.ai .hc-bub { background: #fff; border: 1px solid #E6E9F5; border-top-left-radius: 5px; box-shadow: 0 2px 8px rgba(16,23,40,.04); }
.hc-msg.me .hc-bub { color: #fff; border-top-right-radius: 5px; background: linear-gradient(135deg, #2E6BFF, #7B5CFF); }
.hc-msg.err .hc-bub { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.hc-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E2E6F2; font-size: 12.5px; color: var(--text-dim); }
.hc-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; white-space: normal; }
.hc-link { border: 1px solid rgba(46,107,255,.28); background: #F3F6FF; color: #2050D8; border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; line-height: 1.5; }
.hc-link:hover { background: #E6EDFF; }
.hc-starters { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding-left: 2px; }
.hc-chip { border: 1px solid #DCE2F3; background: #fff; border-radius: 999px; padding: 7px 13px; font-size: 12.5px;
  cursor: pointer; color: var(--text); transition: border-color .2s, box-shadow .2s; }
.hc-chip:hover { border-color: #7B5CFF; box-shadow: 0 0 0 3px rgba(123,92,255,.12); }
.hc-dots { display: inline-flex; gap: 5px; align-items: center; padding: 13px 15px; }
.hc-dots i { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #2E6BFF, #7B5CFF); animation: hc-dot 1.2s ease-in-out infinite; }
.hc-dots i:nth-child(2) { animation-delay: .15s; } .hc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hc-dot { 0%,80%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

.hc-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #EEF0F6; background: #fff; }
.hc-in { flex: 1; resize: none; border: 1px solid #DCE2F3; border-radius: 12px; padding: 9px 12px; font-size: 13.5px; line-height: 1.6;
  max-height: 120px; outline: none; background: #FAFBFF; }
.hc-in:focus { border-color: #7B5CFF; box-shadow: 0 0 0 3px rgba(123,92,255,.14); background: #fff; }
.hc-send { flex: none; width: 40px; height: 40px; border: none; border-radius: 12px; color: #fff; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(135deg, #2E6BFF, #7B5CFF); box-shadow: 0 6px 14px rgba(46,107,255,.3); }
.hc-send:disabled { opacity: .5; cursor: default; }
.hc-foot { padding: 0 14px 10px; font-size: 11px; color: var(--text-dim); background: #fff; }

@media (max-width: 860px) {
  .hc { right: 14px; bottom: 14px; left: 14px; align-items: flex-end; pointer-events: none; }
  .hc > * { pointer-events: auto; }
  .hc-fab { width: 50px; height: 50px; }
  .hc-panel { width: 100%; height: min(72vh, 560px); }
  .has-hc .toasts { bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .hc-dots i { animation: none; } }
@media print { .hc { display: none !important; } }
/* 長い表のページ送り（レポート 2-3。画面だけ。印刷では @media print で全件出す） */
.rtable tbody tr.rpage-hide { display: none; }
/* 表の絞り込み（レポート 2-3 のチャット経由・未経由。11/7）。絞って外した行は、画面でも印刷でも出さない */
.rtable tbody tr.rfilter-hide { display: none !important; }
.rfilters { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }

/* ============================================================================
   スマホで、表や横に長い部品が画面からはみ出さないようにする（2026年10月17日・ご本人）
   ・画面の幅が 860px より狭い時だけ（PC の見た目は変えない）。印刷（レポートの PDF）にも効かせない（screen だけ）。
   ・表は、表の中だけで横に動かす。表の幅で画面全体が横に広がり、左右が切れていた
     （契約中のプラン・担当者・チャット・誘導・答えられなかったご質問・レポートなど）。
   ・文章の列が1文字ずつ折り返して縦書きのようにならないよう、文章の列には最低の幅を持たせる
     （幅を決めてある列 .fit・ボタンの列 .act はそのまま）。
   ・会話の時間帯の表は、マスの最小の大きさ×24時間がスマホの幅より大きかった → マスを小さくしてよいことにする。
   ・受付時間の表は、選ぶ欄の最小の幅を外して、詰めて並べる。
   ============================================================================ */
@media screen and (max-width: 860px) {
  #main table:not(.hours) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #main table:not(.hours) td:not(.fit):not(.act) { min-width: 7em; }
  .heat .hcell { min-height: 0; }
  table.hours td { padding: 5px 4px; }
  table.hours select { min-width: 0; padding: 7px 6px; }
}

/* 言語の切り替え（2026年10月18日・海外の会社向け）。右上のメニュー・ログイン・設定に出す */
.langsw { display: inline-flex; gap: 6px; flex-shrink: 0; }
.langsw .btn { white-space: nowrap; }

/* 印刷の時だけ出す文（レポートの「AIの見解は作っていません」など。2026年10月25日） */
.printonly { display: none; }
@media print { .printonly { display: block; } }

/* 会話の詳細：前のチャット・次のチャット（220。2026年10月26日） */
.chatnav { justify-content: space-between; margin: 0 0 18px; }
.chatnav .btn { min-width: 150px; justify-content: center; }
@media (max-width: 640px) { .chatnav .btn { min-width: 0; flex: 1; } }

/* 営業設定：AIの話し方（222。2026年10月26日） */
.toneopt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.toneex { background: #F6F8FC; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.toneline { font-size: 13.5px; line-height: 1.8; margin-top: 2px; }

/* 運営の会社の一覧：会社名などの下の1行（会社ごとに使えるようにする機能のトグル）と、右の「⋮」（11/3 ご本人） */
tr.subrow td { padding-top: 0; }
tr:has(+ tr.subrow) td { border-bottom: none; }
.subsw { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.tg.s .sw { width: 34px; height: 20px; }
.tg.s .sw::after { top: 3px; left: 3px; width: 14px; height: 14px; }
.tg.s input:checked + .sw::after { transform: translateX(14px); }
.tg.s .lb { font-size: 12.5px; font-weight: 500; color: var(--text-dim); }
.btn.kebab { width: 32px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn.kebab .dots { display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.btn.kebab .dots span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.menu.qmenu a.danger { color: var(--danger); }