/* ============================================================================
   Ainova 管理画面 — スタイル
   設計方針: 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;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.brand .logo {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, #F2C14E, #3FA9F5);
  box-shadow: 0 0 18px rgba(63,169,245,.35);
}
.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; }
.hint { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.6; }

/* ボタン */
.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; }

/* 通知 */
.toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 100;
  background: #12203A; color: #fff; padding: 13px 18px; border-radius: 11px;
  font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  animation: up .3s cubic-bezier(.22,1,.36,1);
}
.toast.err { background: #7F1D1D; }
@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; }
.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; }
.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); }
.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)}

/* --- 未計測の表示（ゲージの代わり）------------------------------------------ */
.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; }

.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; }

.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 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, .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; }
  .rtable tbody tr { break-inside: avoid; page-break-inside: avoid; }
  .rtable thead { display: table-header-group; }   /* 改ページ後も見出しを出す */
  @page { margin: 14mm 12mm; }
}

/* 左メニューの「対応待ち」件数
   ★お待たせしている数なので、他の色と混ぜず、目に付く赤にする。 */
.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; }