/* 評価センター 差配表アプリ — 画面の見た目（2026-10-19 刷新・同日にメイン領域を再設計）。CSP が style-src 'self' なので、すべてここに書く（inline style は使わない） */
:root {
--bg: #eef2f8; --surface: #ffffff; --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --line: #e2e8f0; --line-2: #cbd5e1;
--primary: #2563eb; --primary-2: #1d4ed8; --primary-soft: #dbeafe; --accent: #0ea5e9; --accent-2: #14b8a6;
--success: #16a34a; --success-soft: #dcfce7; --warn: #d97706; --warn-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2;
--g1: #2563eb; --g2: #16a34a; --g3: #d97706; --g4: #7c3aed;
--g1-soft: #dbeafe; --g2-soft: #dcfce7; --g3-soft: #fef3c7; --g4-soft: #ede9fe;
--side: #0f172a; --side-2: #1e293b; --side-ink: #cbd5e1;
--radius: 16px; --radius-sm: 10px;
--shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px -12px rgba(15, 23, 42, .18);
--shadow-lift: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 40px -16px rgba(37, 99, 235, .35);
--grad: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
--font: "Segoe UI Variable Text", "Segoe UI", "BIZ UDPGothic", "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", "Meiryo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
font-family: var(--font); color: var(--ink); font-size: 14px; line-height: 1.55; font-feature-settings: "palt";
background: radial-gradient(1100px 420px at 18% -8%, #dbeafe 0%, rgba(219, 234, 254, 0) 65%),
radial-gradient(900px 360px at 100% 0%, #ccfbf1 0%, rgba(204, 251, 241, 0) 60%),
var(--bg);
background-attachment: fixed;
}
a { color: var(--primary); }
h1 { font-size: 24px; font-weight: 800; margin: 0; letter-spacing: -.01em; line-height: 1.2; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.005em; }
h4 { font-size: 12px; font-weight: 700; margin: 0 0 6px; color: var(--muted); letter-spacing: .04em; }
::selection { background: var(--primary-soft); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }
/* ---- 枠 */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, var(--side) 0%, var(--side-2) 100%); color: var(--side-ink); display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { padding: 4px 6px 12px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 10px; }
/* 会社ロゴを球体に見せてゆっくり回す: ロゴだけが回り、光沢と陰（::before・::after）は固定なので、光の当たった玉が回って見える */
.logo-orb { position: relative; width: 42px; height: 42px; border-radius: 50%; flex: none; overflow: hidden; background: #fff;
box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 10px 20px rgba(0, 0, 0, .45), 0 0 18px rgba(56, 189, 248, .25); }
.logo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; animation: logo-spin 8s linear infinite; }
.logo-orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.45) 100%); }
.logo-orb::after { content: ""; position: absolute; left: 14%; top: 8%; width: 46%; height: 34%; border-radius: 50%; pointer-events: none; z-index: 2;
background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 55%, rgba(255,255,255,0) 75%); transform: rotate(-20deg); }
@keyframes logo-spin { to { transform: rotate(360deg); } }
.logo-globe { display: block; width: 100%; height: 100%; border-radius: 50%; } /* 地球儀の描画（lib/globe.js）。canvas が使えないときは .logo の回転 */
.brand-row { display: flex; align-items: center; gap: 10px; }
/* アプリ名（メインタイトル。2026-10-20 ユーザー指示）: 上に小さく「評価センター」、下に大きく「差配表アプリ」を白→淡い青のグラデーションで */
.brand-title { min-width: 0; line-height: 1.15; }
.brand-title span { display: block; white-space: nowrap; }
.brand-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .22em; color: #93c5fd; }
.brand-main { margin-top: 2px; font-size: 20px; font-weight: 800; letter-spacing: .04em; color: #fff; background: linear-gradient(180deg, #ffffff 30%, #bfdbfe); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 6px rgba(37, 99, 235, .45)); }
.brand-sub { font-size: 11px; color: #94a3b8; }
.menu { display: flex; flex-direction: column; gap: 2px; flex: 1 0 auto; }
/* 区切りの間の余白: 画面の高さに合わせて伸び縮みし、余った高さを 4 か所（区切りの間 3＋「使い方を AI に聞く」と利用者欄の間 1）に
均等に配る。どこか 1 か所だけが空くことがないように上限は付けない（最小 6px。2026-10-20 ユーザー指示） */
.menu-gap { flex: 1 1 0; min-height: 6px; }
/* メニューの区切り（2026-10-20）: 見出しの左に線画のアイコン（業務＝かばん・評価部＝人・管理＝つまみ・案内＝本）、右へ細い線。
色の印は第1〜第4評価部の色の点と紛らわしいのでやめた（同日ユーザー指摘）。アイコンは文字と同じ色の 1 色。
右へ細い線を伸ばす（一度外したが、あったほうがよいとユーザー判断で戻した・同日） */
.menu-group { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px; font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: .14em; }
.menu-group svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.menu-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(148, 163, 184, .75), rgba(148, 163, 184, .25)); } /* はっきり見えるように濃く・右端まで残す（同日ユーザー指示） */
.menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--side-ink); text-decoration: none; font-weight: 500; transition: background .15s, color .15s; }
.menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu a.current { background: var(--primary); color: #fff; box-shadow: 0 6px 14px rgba(37, 99, 235, .35); }
.menu a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.menu a.other-group { opacity: .6; }
.dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 3px; flex: none; }
.dot.g1 { background: var(--g1); } .dot.g2 { background: var(--g2); } .dot.g3 { background: var(--g3); } .dot.g4 { background: var(--g4); }
.sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 6px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #334155; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.user-text { min-width: 0; }
.user-name { color: #fff; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: #94a3b8; }
.sidebar-links { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px; }
.sidebar-links a { color: #93c5fd; text-decoration: none; font-size: 12px; white-space: nowrap; }
.sidebar-links button { background: transparent; color: var(--side-ink); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.sidebar-links button:hover { background: rgba(255,255,255,.08); color: #fff; }
.deployed { font-size: 10px; color: #64748b; white-space: nowrap; }
/* 提供表示（lib/credit.js。確認チェックリストの CreditBadge と同じ演出）。アプリ名の上（2026-10-20 ユーザー指示）。操作・選択を受けない */
.credit { padding: 0 2px 10px; min-height: 40px; pointer-events: none; user-select: none; }
.credit-l1 { min-height: 15px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: #cbd5e1; }
.credit-aws { display: inline-block; margin-left: 1px; padding: 0 5px; border-radius: 3px; background: #000; color: #ff9900; font-weight: 800; letter-spacing: .04em; line-height: 15px; }
.credit-l2 { min-height: 14px; margin-top: 1px; font-size: 10px; letter-spacing: .02em; color: #64748b; }
.credit-caret { display: inline-block; width: 6px; height: 11px; margin-left: 2px; vertical-align: -1px; background: #60a5fa; animation: credit-blink .7s steps(1) infinite; }
.credit-caret-sm { height: 9px; }
.credit-rule { height: 2px; width: 0; margin-top: 5px; border-radius: 2px; background: #60a5fa; animation: credit-grow .45s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes credit-blink { 50% { opacity: 0; } }
@keyframes credit-grow { to { width: 100%; } }
.content { padding: 22px 28px 48px; min-width: 0; }
/* ---- ページ見出し（帯） */
.page-head {
position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin-bottom: 18px; overflow: hidden;
background: linear-gradient(120deg, #ffffff 0%, #f3f8ff 55%, #effdfb 100%); border: 1px solid #e3eaf5; border-radius: 20px; box-shadow: var(--shadow);
}
.page-head::before { content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle at center, rgba(37, 99, 235, .14), rgba(37, 99, 235, 0) 65%); pointer-events: none; }
.page-head::after { content: ""; position: absolute; right: 140px; bottom: -150px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle at center, rgba(20, 184, 166, .14), rgba(20, 184, 166, 0) 65%); pointer-events: none; }
.page-icon { position: relative; width: 50px; height: 50px; border-radius: 15px; background: #eef4ff; color: var(--primary-2); border: 1px solid #d6e4ff; display: grid; place-items: center; flex: none; }
.page-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.page-icon .dot { width: 18px; height: 18px; margin: 0; box-shadow: 0 0 0 5px rgba(255,255,255,.9); }
.page-icon.g1 { background: var(--g1-soft); border-color: #bfdbfe; } .page-icon.g2 { background: var(--g2-soft); border-color: #bbf7d0; }
.page-icon.g3 { background: var(--g3-soft); border-color: #fde68a; } .page-icon.g4 { background: var(--g4-soft); border-color: #ddd6fe; }
.page-text { position: relative; min-width: 0; }
.page-sub { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.page-aside { position: relative; margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #fff; border: 1px solid var(--line); color: var(--ink-2); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.chip-date::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px rgba(20, 184, 166, .2); }
.chip-env { background: var(--warn-soft); border-color: #fcd34d; color: #92400e; }
.chip-portal { color: var(--primary-2); text-decoration: none; border-color: #bfdbfe; cursor: pointer; }
.chip-portal:hover { background: #eff6ff; border-color: #93c5fd; }
/* ---- 共通部品 */
.card, .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 14px; transition: box-shadow .2s, transform .2s; }
.card:hover, .step:hover { box-shadow: var(--shadow-lift); }
button, .btn { border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 14px; cursor: pointer; font: inherit; font-weight: 600; line-height: 1.2; transition: background .15s, box-shadow .15s, transform .05s, border-color .15s; display: inline-flex; align-items: center; gap: 8px; }
button:hover, .btn:hover { background: #f8fafc; border-color: #94a3b8; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.primary { background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%); border: 1px solid #1e40af; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(15,23,42,.2), 0 8px 18px -6px rgba(37, 99, 235, .6); }
.btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(15,23,42,.2), 0 14px 26px -8px rgba(37, 99, 235, .65); }
.btn.primary:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.btn.primary.lg::after { content: "→"; margin-left: 4px; font-weight: 800; opacity: .85; transition: transform .15s; }
.btn.primary.lg:hover::after { transform: translateX(3px); }
.btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.btn.danger { background: #fff; border-color: #fca5a5; color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.lg { padding: 13px 24px; font-size: 15px; border-radius: 999px; }
/* ボタンの図（SVG をマスクで描く。色は文字色） */
.btn[class*=" ic-"]::before, .btn[class^="ic-"]::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.btn.lg::before { width: 20px; height: 20px; }
.ic-paste { --ic: url("data:image/svg+xml;utf8,"); }
.ic-run { --ic: url("data:image/svg+xml;utf8,"); }
.ic-folder { --ic: url("data:image/svg+xml;utf8,"); }
.ic-download { --ic: url("data:image/svg+xml;utf8,"); }
.ic-send { --ic: url("data:image/svg+xml;utf8,"); }
.ic-check { --ic: url("data:image/svg+xml;utf8,"); }
.ic-trash { --ic: url("data:image/svg+xml;utf8,"); }
input[type=text], input[type=email], select, textarea { font: inherit; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
select { padding-right: 26px; }
label { color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
.w-wide { min-width: 240px; }
.muted { color: var(--muted); }
.ok { color: var(--success); font-weight: 600; }
.warn { color: var(--warn); font-weight: 600; }
.error { color: var(--danger); }
.strong { font-weight: 700; }
p.notice, p.error { padding: 12px 14px; border-radius: 10px; }
p.notice { background: var(--warn-soft); border: 1px solid #fcd34d; color: #78350f; }
p.error { background: var(--danger-soft); border: 1px solid #fca5a5; color: #7f1d1d; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 12px; background: rgba(255,255,255,.85); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.toolbar .muted { margin-left: auto; font-size: 12px; }
.toolbar input[type=text] { padding-left: 32px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 10px center; background-size: 15px; }
.toolbar select, .toolbar input[type=text] { border-radius: 999px; }
.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.chk input { accent-color: var(--primary); width: 15px; height: 15px; }
details summary { cursor: pointer; color: var(--muted); margin-top: 8px; font-size: 12.5px; }
details summary:hover { color: var(--primary-2); }
details[open] summary { margin-bottom: 6px; }
/* 件数（統計タイル） */
.counts { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin: 0 0 12px; }
.counts .strong { align-self: center; color: var(--muted); font-size: 12px; font-weight: 700; margin-right: 2px; letter-spacing: .04em; }
.tag { position: relative; display: inline-flex; flex-direction: column; justify-content: center; min-width: 108px; padding: 10px 16px 9px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12px; color: var(--muted); overflow: hidden; }
.tag::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--line-2); }
.tag b { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tag.g1::before { background: var(--g1); } .tag.g2::before { background: var(--g2); } .tag.g3::before { background: var(--g3); } .tag.g4::before { background: var(--g4); }
.tag-total { background: linear-gradient(135deg, var(--side), #1e3a8a); border-color: transparent; color: #bfdbfe; }
.tag-total::before { background: var(--grad); }
.tag-total b { color: #fff; }
.tag-staff::before { background: var(--primary); }
.tag-contractor::before { background: var(--success); }
.preview .counts { margin-top: 12px; }
.preview .counts span { display: inline-flex; flex-direction: column; min-width: 120px; padding: 8px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.preview .counts span.strong { color: var(--primary-2); font-weight: 700; background: var(--primary-soft); border-color: #bfdbfe; }
.preview .counts span.warn { background: var(--warn-soft); border-color: #fcd34d; }
/* 取込の手順カード */
.step { counter-increment: step; position: relative; padding: 18px 22px 20px; }
.step h3 { font-size: 17px; display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.step h3::before { content: "STEP " counter(step); font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #94a3b8; }
main#main { counter-reset: step; }
.paste { width: 100%; font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; background: #f8fafc; }
.paste.small { min-height: 60px; }
.preview { margin-top: 10px; }
.guide { position: relative; background: linear-gradient(135deg, #eff6ff, #ecfeff); border: 1px solid #bfdbfe; border-radius: 14px; padding: 14px 18px 14px 20px; margin: 8px 0 10px; overflow: hidden; }
.guide::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #93c5fd; }
.guide h4 { margin: 0 0 8px; font-size: 14.5px; color: var(--primary-2); letter-spacing: 0; }
.guide ol { margin: 8px 0; padding-left: 22px; }
.guide li { margin: 4px 0; }
.paste-table { max-height: 440px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
/* 一覧 — 現行 Excel「差配リスト」の書式に合わせる（2026-10-19 に xlsm から読み取り）:
見出し=白の太字・中央・塗りは列ごとに 5 色、データ=MS Pゴシック・1 行おきに #D9E1F2、選択中の行=#FFE699（条件付き書式 CELL("ROW")=ROW()）、
邸名の重複=赤の太字、罫線=Excel の枠線（#D4D4D4） */
.grid-box { overflow: auto; max-height: calc(100vh - 250px); background: #fff; border: 1px solid #bfbfbf; border-radius: 6px; box-shadow: var(--shadow); }
.grid-box.loading { opacity: .6; }
table.grid { border-collapse: separate; border-spacing: 0; font-family: "ＭＳ Ｐゴシック", "MS PGothic", var(--font); font-size: 13.5px; color: #000; white-space: nowrap; width: max-content; min-width: 100%; }
table.grid th { position: sticky; top: 0; z-index: 2; background: #2f75b5; color: #fff; font-weight: 700; font-size: 13.5px; padding: 8px 8px; text-align: center; vertical-align: middle; border-right: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; cursor: pointer; user-select: none; }
table.grid th:hover { filter: brightness(1.1); }
table.grid th.sorted { box-shadow: inset 0 -3px 0 #ffe699; }
table.grid th.th-collapsed { background: #7f7f7f; }
table.grid td.td-collapsed { background: #eef0f3; } /* 折りたたんだ範囲の行側の 1 列（見出しと列をそろえる） */
table.grid th.th-no { background: #f2f2f2; color: #595959; font-weight: 400; }
table.grid td { border-bottom: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4; padding: 4px 6px; vertical-align: middle; max-width: 420px; overflow: hidden; text-overflow: ellipsis; background: #fff; }
table.grid td.w-xwide { max-width: 520px; white-space: normal; }
table.grid td.td-no { background: #f2f2f2 !important; color: #595959; }
table.grid tbody tr:nth-child(even) td { background: #d9e1f2; }
table.grid tbody tr:hover td, table.grid tbody tr.active td { background: #ffe699; }
table.grid tr.highlight td:first-child { box-shadow: inset 4px 0 0 var(--success); }
table.grid td.cell-editable { cursor: text; }
table.grid td.cell-editable:hover { box-shadow: inset 0 0 0 2px #217346; }
table.grid td.editing { padding: 0; }
table.grid td.editing input, table.grid td.editing select { width: 100%; min-width: 100px; border: 2px solid #217346; border-radius: 0; padding: 3px 5px; box-shadow: none; font: inherit; }
table.grid td.dup-name { color: #ff0000; font-weight: 700; }
table.grid tr.unmatched td { background: var(--warn-soft); }
table.grid.small { width: 100%; }
table.grid.small th { position: static; background: #f1f5f9; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.th-no, .td-no { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.btn-toggle { padding: 0 6px; margin-right: 6px; font-size: 11px; background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); border-radius: 6px; }
.pager { display: flex; gap: 10px; align-items: center; padding: 8px 12px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); background: #fff; position: sticky; bottom: 0; }
.empty { position: sticky; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 44px 20px 48px; text-align: center; white-space: normal; }
.empty-mark { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, #e2e8f0, #f1f5f9); color: #94a3b8; display: grid; place-items: center; font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.empty-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.empty p { margin: 0; }
/* テンプレ・メンバー */
.lists-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.list-col { flex: 1 1 150px; min-width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.list-col h4 { color: var(--primary-2); }
.list-area { width: 100%; min-height: 150px; font-size: 12.5px; }
.members { width: 100%; }
.members td { white-space: normal; }
.members input[type=text] { width: 160px; }
.members tr.self td { background: var(--primary-soft); }
.groups { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); margin-bottom: 14px; }
.form input, .form select { min-width: 140px; }
.confirm { background: var(--warn-soft); border: 1px solid #fcd34d; border-radius: 12px; padding: 12px 14px; }
.result { margin-top: 12px; }
/* 通知 */
.toast { position: fixed; right: 20px; top: 20px; padding: 12px 16px 12px 42px; border-radius: 14px; background: rgba(15, 23, 42, .92); backdrop-filter: blur(8px); color: #fff; box-shadow: 0 16px 40px -8px rgba(15, 23, 42, .5); max-width: 480px; z-index: 50; font-size: 13px; animation: toast-in .2s ease-out; }
.toast::before { content: "✓"; position: absolute; left: 14px; top: 11px; width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.toast.warn { background: rgba(120, 53, 15, .94); } .toast.warn::before { content: "!"; background: var(--warn); }
.toast.error { background: rgba(127, 29, 29, .94); } .toast.error::before { content: "×"; background: var(--danger); }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
/* 低い画面（ノート PC など）: サイドバーの間隔を詰めて下の利用者欄まで収める */
@media (max-height: 860px) {
.sidebar { padding-top: 10px; padding-bottom: 8px; }
.brand { padding-bottom: 6px; margin-bottom: 4px; }
.logo-orb { width: 38px; height: 38px; }
.brand-main { font-size: 18px; }
.credit { padding-bottom: 6px; min-height: 36px; }
.menu-group { padding: 3px 10px 2px; }
.menu a { padding: 4px 10px; }
.menu-ai { padding: 6px 10px; margin-top: 3px; }
.sidebar-footer { padding-top: 6px; }
.user-card { padding: 2px 6px; }
.avatar { width: 28px; height: 28px; font-size: 12px; }
.sidebar-links { padding: 2px 6px; }
}
/* 狭い画面 */
@media (max-width: 960px) {
.app { grid-template-columns: 1fr; }
.sidebar { position: static; height: auto; padding: 12px; }
.menu { flex-direction: row; flex-wrap: wrap; }
.menu-group, .menu-gap { display: none; }
.sidebar-footer { margin-top: 8px; }
.help-panel { left: auto; right: 16px; }
.content { padding: 16px; }
.grid-box { max-height: none; }
.page-head { flex-wrap: wrap; }
.page-aside { margin-left: 0; }
}
/* Windows の「アニメーション効果」がオフ（prefers-reduced-motion）でも、すべての動きをそのまま見せる（2026-10-19 ユーザー決定）。点滅する動きは使わない */
/* ---- Excel と同じ見出しの色・行の削除・確認バー・パスの案内・使い方 */
table.grid th.hdr-steel { background: #2f75b5; color: #fff; }
table.grid th.hdr-navy { background: #4472c4; color: #fff; }
table.grid th.hdr-green { background: #00b050; color: #fff; }
table.grid th.hdr-red { background: #ff0000; color: #fff; }
table.grid th.hdr-blue { background: #0070c0; color: #fff; }
table.grid th[class*="hdr-"].sorted { box-shadow: inset 0 -3px 0 #ffe699; }
.td-no { position: relative; white-space: nowrap; }
.btn-trash { display: none; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0; line-height: 1; border-radius: 50%; border: 1px solid #fca5a5; color: var(--danger); background: #fff; font-size: 12px; justify-content: center; }
table.grid tbody tr:hover .btn-trash { display: inline-flex; }
.btn-trash:hover { background: var(--danger); color: #fff; }
.confirm-bar[hidden] { display: none; }
.confirm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--danger-soft); border: 1px solid #fca5a5; border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; color: #7f1d1d; }
.pager-hint { margin-left: auto; color: #94a3b8; }
.chk-latest { font-weight: 700; color: var(--primary-2); }
.path-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.path { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; background: #f1f5f9; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; user-select: all; }
.help { position: relative; padding-left: 20px; }
.help::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--radius) 0 0 var(--radius); background: #bfdbfe; }
.help h3 { color: var(--primary-2); }
.help ol, .help ul { margin: 0; padding-left: 22px; }
.help li { margin: 5px 0; }
.help li::marker { color: var(--primary); font-weight: 700; }
/* データ作成（D-31） */
.release-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; padding: 14px 18px; margin-bottom: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.release-bar[hidden] { display: none; }
.release-bar.pending { background: linear-gradient(135deg, #fff7ed, #fffbeb); border-color: #fdba74; }
.release-bar.pending strong { color: #c2410c; }
.release-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 400px; }
.release-text strong { font-size: 15px; }
table.grid tr.unreleased td:first-child { box-shadow: inset 4px 0 0 #f97316; }
/* 差配リスト／受付物件リストの切り替えタブ（差配一覧の上） */
.sheet-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 12px; padding: 5px; background: #e2e8f0; border-radius: 16px; }
.sheet-tabs[hidden] { display: none; }
.sheet-tab { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 10px 16px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); box-shadow: none; }
.sheet-tab:hover { background: rgba(255,255,255,.55); border: 0; }
.sheet-tab.on { background: #fff; color: var(--ink); box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .35); }
.sheet-tab-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.sheet-tab-sub { grid-column: 1; font-size: 12px; font-weight: 500; color: var(--muted); }
.sheet-tab-n { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: inherit; }
.sheet-tab.on:first-child .sheet-tab-title { color: #c2410c; }
.sheet-tab.on:last-child .sheet-tab-title { color: var(--primary-2); }
.sheet-tab:first-child::before, .sheet-tab:last-child::before { display: none; }
/* 折りたたみの見出しは押せることが分かる形に（矢印と下線） */
details > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--primary-2); font-weight: 600; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸"; transition: transform .15s; }
details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { text-decoration: underline; }
/* 手順カードの説明文と操作の間に余白 */
.step > p.muted { margin: 0 0 12px; max-width: 920px; }
/* D-32 評価部の入力完了と未割当（飾りは淡色、押せるのはボタンと未割当の件数だけ） */
.status-box[hidden] { display: none; }
.status-box.all { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.st-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.st-card.is-done { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4, #fff); }
.st-head { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.st-chip { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.st-chip.done { background: var(--success-soft); color: #15803d; }
.st-chip.done::before { content: "✓ "; }
.st-un { display: inline-flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px dashed #cbd5e1; background: #fff; color: var(--muted); font-size: 12px; font-weight: 600; box-shadow: none; }
.st-un b { font-size: 16px; color: var(--ink-2); }
.st-un.has { border-color: #fdba74; background: #fff7ed; color: #c2410c; }
.st-un.has b { color: #c2410c; }
.st-un.on { border-style: solid; box-shadow: 0 0 0 3px #fed7aa; }
.status-box.one { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.status-box.one.is-done { border-color: #86efac; background: linear-gradient(135deg, #f0fdf4, #fff); }
.status-box.one .st-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 380px; min-width: 0; }
.status-box.one .st-text strong { font-size: 15px; }
.status-box.one .st-chip { align-self: center; }
.status-box .st-confirm { flex-basis: 100%; margin: 4px 0 0; }
@media (max-width: 1100px) { .status-box.all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* サイドバーの件数（差配リスト・受付物件リスト） */
.menu-badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.12); color: #cbd5e1; font-size: 11.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.menu-badge.warn { background: #f97316; color: #fff; }
.menu a.current .menu-badge { background: rgba(255,255,255,.25); color: #fff; }
.menu a.current .menu-badge.warn { background: #f97316; }
/* D-33 使い方を AI に聞く（右下のボタンとパネル） */
/* サイドバーの「使い方を AI に聞く」（D-33）。光が流れる枠と、きらめく印で目に留まるようにする */
.menu-ai { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(147, 197, 253, .45); background: linear-gradient(135deg, rgba(59, 130, 246, .22), rgba(139, 92, 246, .22)); color: #fff; font-weight: 700; font-size: 13px; text-align: left; cursor: pointer; animation: ai-glow 3.2s ease-in-out infinite; }
.menu-ai::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: ai-shine 4s ease-in-out infinite; pointer-events: none; }
.menu-ai:hover { background: linear-gradient(135deg, rgba(59, 130, 246, .38), rgba(139, 92, 246, .38)); border-color: rgba(191, 219, 254, .8); }
.menu-ai.open { background: var(--primary); border-color: var(--primary); animation: none; }
.menu-ai.open::after { display: none; }
.menu-ai-icon { width: 17px; height: 17px; flex: none; display: grid; place-items: center; animation: ai-twinkle 2.4s ease-in-out infinite; }
.menu-ai-icon svg { width: 17px; height: 17px; fill: #fde68a; }
@keyframes ai-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes ai-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); } 50% { box-shadow: 0 0 14px 1px rgba(96, 165, 250, .45); } }
@keyframes ai-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.3) rotate(90deg); opacity: .75; } }
.help-panel { --panel-shadow: 0 24px 60px -16px rgba(15, 23, 42, .45); position: fixed; left: 252px; bottom: 22px; z-index: 41; width: min(440px, calc(100vw - 32px)); height: min(640px, calc(100vh - 44px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--panel-shadow); overflow: hidden; }
.help-panel[hidden] { display: none; }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg, #0f172a, #1e3a8a); color: #fff; }
.help-title { display: flex; align-items: center; gap: 11px; }
.help-title-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #38bdf8, #8b5cf6); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 4px 14px -2px rgba(139, 92, 246, .7); animation: ai-icon-pulse 3s ease-in-out infinite; }
.help-title-icon svg { width: 20px; height: 20px; fill: #fff; }
@keyframes ai-icon-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 4px 14px -2px rgba(139, 92, 246, .7); } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset, 0 4px 20px 0 rgba(56, 189, 248, .8); } }
.help-head strong { display: block; font-size: 15px; }
.help-sub { font-size: 11.5px; color: #bfdbfe; }
.help-head-btns { display: flex; gap: 6px; }
.help-icon-btn { padding: 4px 10px; font-size: 12px; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; }
.help-icon-btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
/* パネルの開閉の演出（確認チェックリスト apps/web/src/styles.css の .ai-panel を写した。ポータルの案 C と同じ・2026-10-20 ユーザー指示）。
開く＝中央の光線から上下へ開く（約 1 秒）／閉じる＝その逆再生（約 0.8 秒）。所要は --ai-panel-close-ms を lib/helpchat.js が読む */
.ai-panel {
--ai-sky: 14, 165, 233; /* #0ea5e9 入口ボタンの縁（左） */
--ai-violet: 168, 85, 247; /* #a855f7 入口ボタンの縁（右） */
--ai-core: 224, 242, 254; /* #e0f2fe 入口ボタンの文字＝光の芯 */
--ai-glow: 56, 189, 248; /* #38bdf8 光点の光 */
--ai-panel-close-ms: 900; /* 閉じる演出の所要（ms・逆再生 約 0.8 秒＋余裕）。lib/helpchat.js が読む */
overflow: hidden; /* 走査線・方眼を角丸の中に収める */
}
/* 閉じる間は操作を受けない（inert は lib/helpchat.js） */
.ai-panel--closing {
pointer-events: none;
}
/* ---- 窓本体: 開く＝中央の 4px の光線から上下へ開く（0.1s 待ってから）・開き切った直後に縁が一度発光
閉じる＝まず縁が発光し、0.32s から中央の線へ閉じて消える ---- */
.ai-panel--open {
animation:
ai-panel-open 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards,
ai-panel-ring 0.7s ease-out 0.55s backwards;
}
.ai-panel--closing {
animation:
ai-panel-close 0.46s cubic-bezier(0.6, 0, 0.4, 1) 0.32s both,
ai-panel-ring 0.32s ease-out both;
}
@keyframes ai-panel-open {
0% {
opacity: 1;
clip-path: inset(calc(50% - 2px) 0 calc(50% - 2px) 0);
}
100% {
opacity: 1;
clip-path: inset(0 0 0 0);
}
}
@keyframes ai-panel-close {
0% {
opacity: 1;
clip-path: inset(0 0 0 0);
}
72% {
opacity: 1;
clip-path: inset(calc(50% - 2px) 0 calc(50% - 2px) 0);
}
100% {
opacity: 0;
clip-path: inset(calc(50% - 2px) 0 calc(50% - 2px) 0);
}
}
/* 縁の発光。Tailwind の shadow-xl（--tw-shadow）は消さずに重ねる */
@keyframes ai-panel-ring {
0%,
100% {
box-shadow:
0 0 0 0 rgba(var(--ai-sky), 0),
0 0 0 rgba(var(--ai-sky), 0),
var(--panel-shadow, 0 0 #0000);
}
30% {
box-shadow:
0 0 0 2px rgba(var(--ai-sky), 0.6),
0 0 34px rgba(var(--ai-sky), 0.45),
var(--panel-shadow, 0 0 #0000);
}
}
/* ---- 走査線: 開く＝中央で点灯して横に伸び、上下の縁へ走る／閉じる＝縁から中央へ集まり、縮んで消える
左が空色・右が紫（入口ボタンの縁と同じ向き） ---- */
.ai-panel::before,
.ai-panel::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
pointer-events: none;
z-index: 3;
background: linear-gradient(
90deg,
rgba(var(--ai-sky), 0),
rgba(var(--ai-sky), 0.95) 30%,
rgba(var(--ai-core), 1) 50%,
rgba(var(--ai-violet), 0.95) 70%,
rgba(var(--ai-violet), 0)
);
box-shadow:
0 0 12px rgba(var(--ai-glow), 0.95),
0 0 28px rgba(var(--ai-violet), 0.6);
transform-origin: 50% 50%;
opacity: 0;
}
.ai-panel--open::before {
animation: ai-panel-scan-up 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ai-panel--open::after {
animation: ai-panel-scan-down 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ai-panel--closing::before {
animation: ai-panel-unscan-top 0.46s cubic-bezier(0.6, 0, 0.4, 1) 0.32s both;
}
.ai-panel--closing::after {
animation: ai-panel-unscan-bottom 0.46s cubic-bezier(0.6, 0, 0.4, 1) 0.32s both;
}
@keyframes ai-panel-scan-up {
0% {
top: 50%;
transform: scaleX(0.05);
opacity: 1;
}
16% {
top: 50%;
transform: scaleX(1);
opacity: 1;
}
88% {
opacity: 1;
}
100% {
top: 0;
transform: scaleX(1);
opacity: 0;
}
}
@keyframes ai-panel-scan-down {
0% {
top: 50%;
transform: scaleX(0.05);
opacity: 1;
}
16% {
top: 50%;
transform: scaleX(1);
opacity: 1;
}
88% {
opacity: 1;
}
100% {
top: 100%;
transform: scaleX(1);
opacity: 0;
}
}
@keyframes ai-panel-unscan-top {
0% {
top: 0;
transform: scaleX(1);
opacity: 0;
}
10% {
opacity: 1;
}
72% {
top: 50%;
transform: scaleX(1);
opacity: 1;
}
100% {
top: 50%;
transform: scaleX(0.05);
opacity: 0;
}
}
@keyframes ai-panel-unscan-bottom {
0% {
top: 100%;
transform: scaleX(1);
opacity: 0;
}
10% {
opacity: 1;
}
72% {
top: 50%;
transform: scaleX(1);
opacity: 1;
}
100% {
top: 50%;
transform: scaleX(0.05);
opacity: 0;
}
}
/* ---- 方眼: 会話欄に空色の格子が浮かんで消える（開閉とも） ---- */
.ai-panel-log {
position: relative;
}
.ai-panel .ai-panel-log::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
opacity: 0;
background:
repeating-linear-gradient(0deg, rgba(var(--ai-sky), 0.28) 0 1px, transparent 1px 18px),
repeating-linear-gradient(90deg, rgba(var(--ai-sky), 0.28) 0 1px, transparent 1px 18px);
}
.ai-panel--open .ai-panel-log::before {
animation: ai-panel-grid 0.75s ease-out 0.12s both;
}
.ai-panel--closing .ai-panel-log::before {
animation: ai-panel-grid 0.42s ease-out 0.16s both;
}
@keyframes ai-panel-grid {
0% {
opacity: 0;
}
25% {
opacity: 0.55;
}
100% {
opacity: 0;
}
}
/* ---- 中身（見出し・注意書き・定型質問・会話・入力欄の全部）: 開く＝走査線が通ったあと滑らかに点灯／閉じる＝滑らかに消灯 ---- */
.ai-panel--open > * {
animation: ai-panel-boot 0.4s ease-out 0.34s backwards;
}
.ai-panel--closing > * {
animation: ai-panel-shutdown 0.26s ease-in 0.04s both;
}
@keyframes ai-panel-boot {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ai-panel-shutdown {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* ---- 窓の名前: 開く＝左から現れる／閉じる＝左へ消える ---- */
.ai-panel--open .ai-panel-title {
animation: ai-panel-wipe 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s backwards;
}
.ai-panel--closing .ai-panel-title {
animation: ai-panel-wipe 0.22s cubic-bezier(0.6, 0, 0.4, 1) reverse both;
}
@keyframes ai-panel-wipe {
0% {
clip-path: inset(0 100% 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
/* ---- 四隅のブラケット: 開く＝外から飛び込んで固定され、薄く残る／閉じる＝来た方向へ飛び去る。上は空色・下は紫 ---- */
.ai-panel-head,
.ai-panel-foot {
position: relative;
}
.ai-panel .ai-panel-head::before,
.ai-panel .ai-panel-head::after,
.ai-panel .ai-panel-foot::before,
.ai-panel .ai-panel-foot::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
pointer-events: none;
z-index: 4;
border: 0 solid rgba(var(--ai-sky), 0.9);
opacity: 0;
}
.ai-panel--open .ai-panel-head::before,
.ai-panel--open .ai-panel-head::after,
.ai-panel--open .ai-panel-foot::before,
.ai-panel--open .ai-panel-foot::after {
animation: ai-panel-bracket 0.45s cubic-bezier(0.2, 0.9, 0.2, 1) 0.48s both;
}
.ai-panel--closing .ai-panel-head::before,
.ai-panel--closing .ai-panel-head::after,
.ai-panel--closing .ai-panel-foot::before,
.ai-panel--closing .ai-panel-foot::after {
animation: ai-panel-bracket-out 0.28s cubic-bezier(0.5, 0, 0.8, 0.4) both;
}
.ai-panel .ai-panel-head::before {
top: 4px;
left: 4px;
border-top-width: 2px;
border-left-width: 2px;
--dx: -12px;
--dy: -12px;
}
.ai-panel .ai-panel-head::after {
top: 4px;
right: 4px;
border-top-width: 2px;
border-right-width: 2px;
--dx: 12px;
--dy: -12px;
}
.ai-panel .ai-panel-foot::before {
bottom: 4px;
left: 4px;
border-bottom-width: 2px;
border-left-width: 2px;
border-color: rgba(var(--ai-violet), 0.9);
--dx: -12px;
--dy: 12px;
}
.ai-panel .ai-panel-foot::after {
bottom: 4px;
right: 4px;
border-bottom-width: 2px;
border-right-width: 2px;
border-color: rgba(var(--ai-violet), 0.9);
--dx: 12px;
--dy: 12px;
}
@keyframes ai-panel-bracket {
0% {
opacity: 0;
transform: translate(var(--dx), var(--dy));
}
60% {
opacity: 1;
transform: none;
}
100% {
opacity: 0.55;
transform: none;
}
}
@keyframes ai-panel-bracket-out {
0% {
opacity: 0.55;
transform: none;
}
30% {
opacity: 1;
transform: none;
}
100% {
opacity: 0;
transform: translate(var(--dx), var(--dy));
}
}
.help-note { margin: 0; padding: 8px 16px; font-size: 11.5px; color: #92400e; background: #fffbeb; border-bottom: 1px solid #fde68a; }
.help-log { flex: 1; overflow: auto; padding: 14px 16px; background: #f8fafc; display: flex; flex-direction: column; gap: 10px; }
.help-msg { display: flex; }
.help-msg.user { justify-content: flex-end; }
.help-bubble { max-width: 86%; padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; line-height: 1.6; font-size: 13.5px; }
.help-msg.user .help-bubble { background: #dbeafe; color: #1e3a8a; border-bottom-right-radius: 4px; }
.help-msg.assistant .help-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.help-msg.error .help-bubble { background: var(--danger-soft); border-color: #fca5a5; color: #7f1d1d; }
.help-bubble.typing { color: var(--muted); font-style: italic; }
.help-empty p { margin: 0 0 8px; font-size: 12px; }
.help-quick { display: flex; flex-direction: column; gap: 6px; }
.help-chip { justify-content: flex-start; text-align: left; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--primary-2); background: #fff; border: 1px dashed #93c5fd; border-radius: 10px; }
.help-chip:hover { background: #eff6ff; border-style: solid; border-color: #60a5fa; }
.help-form { padding: 10px 12px 12px; border-top: 1px solid var(--line); background: #fff; }
.help-input { width: 100%; resize: none; font-size: 13.5px; }
.help-form-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.help-count { font-size: 11px; color: var(--muted); }
/* D-34 新着・受け取り */
.st-chip.new { background: #ffedd5; color: #c2410c; }
.st-chip.new::before { content: "● "; }
.st-chip.working { background: #dbeafe; color: #1d4ed8; }
.st-card.is-new { border-color: #fdba74; background: linear-gradient(180deg, #fff7ed, #fff); }
.st-card.is-done { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4, #fff); }
.status-box.one.is-new { border-color: #fb923c; background: linear-gradient(135deg, #fff7ed, #fffbeb); box-shadow: 0 0 0 3px #fed7aa, var(--shadow); }
.status-box.one.is-new .st-text strong { color: #c2410c; font-size: 16px; }
table.grid tr.is-new td:first-child { box-shadow: inset 4px 0 0 #f97316; }
table.grid tr.is-new td.td-no::after { content: "新着"; display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; background: #f97316; color: #fff; font-size: 10px; font-weight: 700; vertical-align: middle; }