/* ============================================================================ * shiro.css — viewer-v5 SHIRO theme override * ============================================================================ * Activates when is set. * Override existing dark+blue+monospace chrome → light+grey+Inter+SANGOKU 群青. * 既存 base.css/tabs.css/slides.css/comments.css を維持し、本 file が上書きする。 * data-theme="shiro" を外せば即座に元 dark theme に戻る (rollback 安全)。 * ============================================================================ */ body[data-theme="shiro"] { background: var(--color-bg-page); font-family: var(--font-sans); font-feature-settings: var(--font-feature); color: var(--color-text-default); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ============ Top bar ============ */ body[data-theme="shiro"] .topbar { background: var(--color-bg-surface); backdrop-filter: none; border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-6); } body[data-theme="shiro"] .topbar-title .title { font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-default); letter-spacing: -0.01em; } body[data-theme="shiro"] .topbar-title .subtitle { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-gray); margin-top: 2px; } body[data-theme="shiro"] .topbar-actions { gap: var(--space-2); } /* ============ Mode toggle (GRID / SCROLL) ============ */ body[data-theme="shiro"] .mode-toggle { background: var(--color-bg-warmer); padding: 2px; border-radius: var(--radius-md); border: 1px solid var(--color-border); } body[data-theme="shiro"] .mode-btn { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: 0; color: var(--color-text-gray); border-radius: var(--radius-sm); padding: 6px 14px; } body[data-theme="shiro"] .mode-btn.active { background: var(--color-bg-page); color: var(--color-text-default); box-shadow: var(--shadow-sm); } body[data-theme="shiro"] .mode-btn:hover:not(.active) { background: rgba(0, 0, 0, 0.03); color: var(--color-text-default); } /* ============ Action buttons (Notion pill) ============ */ body[data-theme="shiro"] .action-btn { background: var(--color-bg-page); border: 1px solid var(--color-border); color: var(--color-text-default); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0; border-radius: var(--radius-md); padding: 6px 12px; transition: all var(--duration-fast) var(--easing); } body[data-theme="shiro"] .action-btn:hover { background: var(--color-bg-warmer); color: var(--color-text-default); } body[data-theme="shiro"] .action-btn.primary { background: var(--color-icon-blue); color: var(--color-on-accent); border-color: var(--color-icon-blue); } body[data-theme="shiro"] .action-btn.primary:hover { background: var(--color-icon-blue-hover); border-color: var(--color-icon-blue-hover); } /* Comment count badge */ body[data-theme="shiro"] .comment-count { background: var(--color-bg-blue); color: var(--color-icon-blue); font-family: var(--font-mono); font-feature-settings: 'tnum'; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding: 1px 7px; border-radius: var(--radius-pill); margin-left: 6px; letter-spacing: 0; } body[data-theme="shiro"] .comment-count.zero { background: var(--color-bg-warmer); color: var(--color-text-gray); } /* Copy mode button (yellow → SANGOKU subtle) */ body[data-theme="shiro"] #btn-copy-mode.active { background: var(--color-bg-yellow); color: var(--color-text-default); border-color: var(--color-bg-yellow); } /* ============ Tab bar ============ */ body[data-theme="shiro"] .tab-bar { background: var(--color-bg-page); backdrop-filter: none; border-bottom: 1px solid var(--color-border); padding: 0 var(--space-6); } body[data-theme="shiro"] .tab-btn { background: transparent; color: var(--color-text-gray); font-family: var(--font-sans); padding: var(--space-3) var(--space-4) var(--space-2); border-bottom: 2px solid transparent; min-width: auto; gap: 1px; } body[data-theme="shiro"] .tab-btn:hover { color: var(--color-text-default); background: var(--color-bg-surface); } body[data-theme="shiro"] .tab-btn.active { color: var(--color-text-default); border-bottom-color: var(--color-text-default); background: transparent; } body[data-theme="shiro"] .tab-btn .tab-label { font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0; text-transform: none; } body[data-theme="shiro"] .tab-btn .tab-sub { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-text-light); letter-spacing: 0; text-transform: none; } body[data-theme="shiro"] .tab-btn.active .tab-sub { color: var(--color-text-gray); } /* tab-gate: Phase 進捗 ● (HitL gate state) */ body[data-theme="shiro"] .tab-btn .tab-gate { position: absolute; top: 12px; right: 8px; font-size: 14px; color: var(--color-icon-blue); font-weight: var(--font-weight-bold); text-shadow: none; } /* ============ Tab placeholder (Notion empty state) ============ */ body[data-theme="shiro"] .tab-placeholder { max-width: 560px; margin: 96px auto; padding: var(--space-7) var(--space-6); background: transparent; border: none; text-align: center; } body[data-theme="shiro"] .tab-placeholder h2 { font-family: var(--font-sans); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-default); margin-bottom: var(--space-2); letter-spacing: -0.01em; } body[data-theme="shiro"] .tab-placeholder p { font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-loose); color: var(--color-text-gray); margin-bottom: var(--space-2); } body[data-theme="shiro"] .tab-placeholder code { background: var(--color-bg-warmer); color: var(--color-text-default); padding: 1px 6px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--font-size-xs); } body[data-theme="shiro"] .tab-placeholder .meta { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-border); color: var(--color-text-light); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0; } /* ============ Markdown panel (script / composition tabs) ============ */ body[data-theme="shiro"] .md-panel-header { border-bottom: 1px solid var(--color-border); } body[data-theme="shiro"] .md-panel-header h2 { font-family: var(--font-sans); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-default); letter-spacing: -0.01em; } body[data-theme="shiro"] .md-path { color: var(--color-text-light); font-family: var(--font-mono); } body[data-theme="shiro"] .md-path code { background: var(--color-bg-warmer); color: var(--color-text-default); } body[data-theme="shiro"] .md-panel-meta { font-family: var(--font-sans); color: var(--color-text-gray); } body[data-theme="shiro"] .md-body .loading { color: var(--color-text-light); font-family: var(--font-mono); } body[data-theme="shiro"] .md-body .error { background: var(--color-bg-red); border-color: var(--color-icon-red); color: var(--color-text-default); font-family: var(--font-sans); } body[data-theme="shiro"] .md-body .hint { color: var(--color-text-gray); font-family: var(--font-sans); } /* Frontmatter & Preface */ body[data-theme="shiro"] .md-frontmatter { background: var(--color-bg-blue); border-left: 3px solid var(--color-icon-blue); border-radius: var(--radius-md); } body[data-theme="shiro"] .md-fm-label { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; color: var(--color-icon-blue); } body[data-theme="shiro"] .md-frontmatter pre { font-family: var(--font-mono); color: var(--color-text-default); } body[data-theme="shiro"] .md-preface { background: var(--color-bg-surface); border-left: 3px solid var(--color-border-strong); } body[data-theme="shiro"] .md-preface pre { font-family: var(--font-sans); color: var(--color-text-default); } /* Section (collapsible) — Notion expand block */ body[data-theme="shiro"] .md-section { background: var(--color-bg-page); border: 1px solid var(--color-border); border-left: 4px solid var(--color-border-strong); border-radius: var(--radius-lg); } body[data-theme="shiro"] .md-section[open] { background: var(--color-bg-surface); } body[data-theme="shiro"] .md-section.status-approved { border-left-color: var(--color-icon-green); } body[data-theme="shiro"] .md-section.status-requested_change { border-left-color: var(--color-icon-red); } body[data-theme="shiro"] .md-section.status-question { border-left-color: var(--color-icon-yellow); } body[data-theme="shiro"] .md-section.status-pending { border-left-color: var(--color-border-strong); } body[data-theme="shiro"] .md-section summary { font-family: var(--font-sans); } body[data-theme="shiro"] .md-section summary::before { color: var(--color-text-gray); } body[data-theme="shiro"] .md-section .sec-icon { background: var(--color-bg-warmer); color: var(--color-text-gray); } body[data-theme="shiro"] .md-section.status-approved .sec-icon { background: var(--color-bg-green); color: var(--color-icon-green); } body[data-theme="shiro"] .md-section.status-requested_change .sec-icon { background: var(--color-bg-red); color: var(--color-icon-red); } body[data-theme="shiro"] .md-section.status-question .sec-icon { background: var(--color-bg-yellow); color: var(--color-icon-yellow); } body[data-theme="shiro"] .md-section .sec-heading { font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-default); letter-spacing: -0.01em; } body[data-theme="shiro"] .md-section .sec-meta { font-family: var(--font-mono); color: var(--color-text-light); letter-spacing: 0; text-transform: none; } body[data-theme="shiro"] .md-section .sec-body { border-top: 1px solid var(--color-border); } body[data-theme="shiro"] .md-section .sec-body .md-raw { font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--color-text-default); line-height: var(--line-height-loose); } body[data-theme="shiro"] .approval-row { border-top: 1px solid var(--color-border); } body[data-theme="shiro"] .ap-btn { background: var(--color-bg-page); border: 1px solid var(--color-border); color: var(--color-text-gray); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: 0; border-radius: var(--radius-md); padding: 6px 14px; } body[data-theme="shiro"] .ap-btn.ap-approve:hover { background: var(--color-bg-green); border-color: var(--color-icon-green); color: var(--color-icon-green); } body[data-theme="shiro"] .ap-btn.ap-change:hover { background: var(--color-bg-red); border-color: var(--color-icon-red); color: var(--color-icon-red); } body[data-theme="shiro"] .ap-btn.ap-question:hover { background: var(--color-bg-yellow); border-color: var(--color-icon-yellow); color: var(--color-icon-yellow); } /* Template picker (composition tab) */ body[data-theme="shiro"] .template-picker { background: var(--color-bg-blue); border-color: rgba(27, 61, 110, 0.2); border-radius: var(--radius-lg); } body[data-theme="shiro"] .tp-label { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; color: var(--color-icon-blue); } body[data-theme="shiro"] .template-picker select { background: var(--color-bg-page); color: var(--color-text-default); border: 1px solid var(--color-border); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border-radius: var(--radius-md); } body[data-theme="shiro"] .tp-name { font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-default); } body[data-theme="shiro"] .tp-desc { color: var(--color-icon-blue); font-family: var(--font-mono); } body[data-theme="shiro"] .tp-use { color: var(--color-text-gray); font-family: var(--font-sans); } /* QA tab */ body[data-theme="shiro"] .qa-section h3 { color: var(--color-icon-blue); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; } body[data-theme="shiro"] .qa-count { color: var(--color-text-light); } body[data-theme="shiro"] .qa-check { background: var(--color-bg-page); border: 1px solid var(--color-border); border-left: 4px solid var(--color-border-strong); border-radius: var(--radius-md); } body[data-theme="shiro"] .qa-check.sev-critical { border-left-color: var(--color-icon-red); } body[data-theme="shiro"] .qa-check.sev-high { border-left-color: var(--color-icon-orange); } body[data-theme="shiro"] .qa-check.sev-medium { border-left-color: var(--color-icon-yellow); } body[data-theme="shiro"] .qa-check.sev-low { border-left-color: var(--color-icon-blue); } body[data-theme="shiro"] .qa-check.result-fail { background: var(--color-bg-red); } body[data-theme="shiro"] .qa-check-name { font-family: var(--font-sans); color: var(--color-text-default); } body[data-theme="shiro"] .qa-check-result { font-family: var(--font-mono); } body[data-theme="shiro"] .qa-check-sev { background: var(--color-bg-warmer); color: var(--color-text-gray); font-family: var(--font-sans); font-weight: var(--font-weight-medium); letter-spacing: 0.06em; } body[data-theme="shiro"] .qa-blocking { background: var(--color-icon-red); font-family: var(--font-sans); font-weight: var(--font-weight-semibold); } body[data-theme="shiro"] .qa-check-msg { color: var(--color-text-gray); } body[data-theme="shiro"] .qa-check-slide { color: var(--color-text-light); } body[data-theme="shiro"] .qa-check-slide code { background: var(--color-bg-warmer); color: var(--color-text-default); } body[data-theme="shiro"] .qa-meta { color: var(--color-text-light); font-family: var(--font-mono); } body[data-theme="shiro"] #qa-summary .sum-pass { color: var(--color-icon-green); } body[data-theme="shiro"] #qa-summary .sum-warn { color: var(--color-icon-yellow); } body[data-theme="shiro"] #qa-summary .sum-fail { color: var(--color-icon-red); } body[data-theme="shiro"] .cmd-block { background: var(--color-bg-warmer); border: 1px solid var(--color-border); color: var(--color-text-default); font-family: var(--font-mono); } /* Export tab */ body[data-theme="shiro"] .export-preset-row { background: var(--color-bg-blue); border-color: rgba(27, 61, 110, 0.2); } body[data-theme="shiro"] .export-preset-row select { background: var(--color-bg-page); color: var(--color-text-default); border-color: var(--color-border); font-family: var(--font-sans); } body[data-theme="shiro"] .export-hint { color: var(--color-text-gray); font-family: var(--font-sans); } body[data-theme="shiro"] .export-fmt-card { background: var(--color-bg-page); border-color: var(--color-border); border-radius: var(--radius-lg); } body[data-theme="shiro"] .fmt-label { color: var(--color-text-default); font-family: var(--font-sans); font-weight: var(--font-weight-semibold); } body[data-theme="shiro"] .export-validation { background: var(--color-bg-green); border-color: var(--color-icon-green); } body[data-theme="shiro"] .export-validation h3 { color: var(--color-icon-green); font-family: var(--font-sans); font-weight: var(--font-weight-semibold); } body[data-theme="shiro"] .export-validation td.ok { color: var(--color-icon-green); } body[data-theme="shiro"] .export-validation td.ng { color: var(--color-icon-red); } body[data-theme="shiro"] .val-extra { color: var(--color-text-light); } /* ============ Slides view ============ */ body[data-theme="shiro"] .grid-view .section { color: var(--color-text-gray); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; } body[data-theme="shiro"] .grid-view .card iframe { border-radius: var(--radius-md); box-shadow: var(--shadow-md); } body[data-theme="shiro"] .grid-view .card-label { color: var(--color-text-default); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0; } body[data-theme="shiro"] .grid-view .card-label .num { color: var(--color-text-light); font-family: var(--font-mono); font-feature-settings: 'tnum'; } body[data-theme="shiro"] .scroll-view .slide-label { color: var(--color-text-gray); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0; } body[data-theme="shiro"] .scroll-view .slide-label .num { color: var(--color-icon-blue); font-family: var(--font-mono); font-feature-settings: 'tnum'; } body[data-theme="shiro"] .scroll-view .slide-frame-wrapper { box-shadow: var(--shadow-lg); border-radius: var(--radius-md); } body[data-theme="shiro"] .scroll-view .slide-frame { background: var(--color-bg-warmer); } /* Comment box / sidebar */ body[data-theme="shiro"] .comment-box { background: var(--color-bg-warmer); border-color: var(--color-border); border-radius: var(--radius-md); } body[data-theme="shiro"] .comment-box:focus-within { background: var(--color-bg-page); border-color: var(--color-icon-blue); } body[data-theme="shiro"] .comment-box.drag-over { background: var(--color-bg-blue); border-color: var(--color-icon-blue); box-shadow: 0 0 0 2px rgba(27, 61, 110, 0.2); } body[data-theme="shiro"] .comment-box.fully-resolved { background: var(--color-bg-green); border-color: var(--color-icon-green); } body[data-theme="shiro"] .comment-box textarea { color: var(--color-text-default); font-family: var(--font-sans); font-size: var(--font-size-sm); } body[data-theme="shiro"] .comment-box textarea::placeholder { color: var(--color-text-light); font-family: var(--font-sans); } body[data-theme="shiro"] .resolved-history { background: var(--color-bg-green); border-left-color: var(--color-icon-green); color: var(--color-text-gray); text-decoration-color: var(--color-text-light); font-family: var(--font-sans); } body[data-theme="shiro"] .resolved-history::before { font-family: var(--font-sans); color: var(--color-icon-green); font-weight: var(--font-weight-semibold); } body[data-theme="shiro"] .resolved-stamp { color: var(--color-icon-green); border-color: var(--color-icon-green); font-family: var(--font-sans); font-weight: var(--font-weight-medium); } body[data-theme="shiro"] .comment-actions { border-top: 1px solid var(--color-border); } body[data-theme="shiro"] .resolve-btn { background: var(--color-bg-green); border-color: var(--color-icon-green); color: var(--color-icon-green); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: 0; border-radius: var(--radius-sm); } body[data-theme="shiro"] .resolve-btn:hover { background: var(--color-icon-green); color: var(--color-on-accent); } /* Comment badge (thumbnail) */ body[data-theme="shiro"] .comment-badge { background: var(--color-icon-blue); color: var(--color-on-accent); font-family: var(--font-mono); font-feature-settings: 'tnum'; font-weight: var(--font-weight-semibold); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); } body[data-theme="shiro"] .comment-badge.resolved-only { background: var(--color-icon-green); } /* Attachments */ body[data-theme="shiro"] .attachment-hint { color: var(--color-text-light); font-family: var(--font-mono); border-top-color: var(--color-border); } body[data-theme="shiro"] .attachment-item { border-color: var(--color-border); } body[data-theme="shiro"] .attachment-remove { background: var(--color-text-default); color: var(--color-on-accent); } body[data-theme="shiro"] .attachment-remove:hover { background: var(--color-icon-red); } /* Scroll view sidebar (per-slide comment) */ body[data-theme="shiro"] .scroll-view .comment-sidebar { background: var(--color-bg-surface); border-color: var(--color-border); border-radius: var(--radius-lg); } body[data-theme="shiro"] .scroll-view .comment-sidebar .sidebar-title { color: var(--color-icon-blue); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; } body[data-theme="shiro"] .scroll-view .comment-sidebar textarea { background: var(--color-bg-page); border-color: var(--color-border); color: var(--color-text-default); font-family: var(--font-sans); font-size: var(--font-size-sm); } body[data-theme="shiro"] .scroll-view .comment-sidebar textarea:focus { border-color: var(--color-icon-blue); } /* Toast */ body[data-theme="shiro"] .toast { background: var(--color-text-default); color: var(--color-bg-page); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } /* Lightbox keep dark (image preview に画像 contrast 必要、変えない) */ /* ============ Fullscreen / Presentation mode ============ * 中央 iframe 周辺は dark keep (slide content が映える) * topbar / control / comment panel は Notion light + 群青 accent に統一 * ============================================================================ */ body[data-theme="shiro"] .fullscreen-view { background: #1A1818; } body[data-theme="shiro"] .fs-topbar { background: var(--color-bg-page); backdrop-filter: none; color: var(--color-text-default); border-bottom: 1px solid var(--color-border); padding: var(--space-3) var(--space-6); } body[data-theme="shiro"] .fs-title { font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; color: var(--color-text-default); } body[data-theme="shiro"] .fs-counter { font-family: var(--font-mono); font-feature-settings: 'tnum'; color: var(--color-text-light); font-weight: var(--font-weight-regular); margin-left: var(--space-3); } body[data-theme="shiro"] .fs-controls { gap: var(--space-2); } body[data-theme="shiro"] .fs-btn { background: var(--color-bg-page); border: 1px solid var(--color-border); color: var(--color-text-default); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0; border-radius: var(--radius-md); padding: 6px 12px; } body[data-theme="shiro"] .fs-btn:hover { background: var(--color-bg-warmer); } body[data-theme="shiro"] .fs-btn.close { background: var(--color-bg-red); border-color: var(--color-icon-red); color: var(--color-icon-red); } body[data-theme="shiro"] .fs-btn.close:hover { background: var(--color-icon-red); color: var(--color-on-accent); } /* fs comment panel = Notion light card */ body[data-theme="shiro"] .fs-comment-panel { background: var(--color-bg-surface); border-left: 1px solid var(--color-border); padding: var(--space-5); } body[data-theme="shiro"] .fs-comment-panel .panel-title { font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; color: var(--color-icon-blue); text-transform: uppercase; margin-bottom: var(--space-3); } body[data-theme="shiro"] .fs-comment-panel textarea { background: var(--color-bg-page); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-default); font-family: var(--font-sans); font-size: var(--font-size-base); padding: var(--space-3); } body[data-theme="shiro"] .fs-comment-panel textarea:focus { border-color: var(--color-icon-blue); } body[data-theme="shiro"] .fs-comment-panel textarea::placeholder { color: var(--color-text-light); } /* Slide iframe 周りは keep dark + 群青 shadow */ body[data-theme="shiro"] .fs-iframe { box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7); border-radius: var(--radius-md); background: #FFFFFF; } /* ============ Agent Chat Panel (static UI、A5 floating pattern) ============ * 右下 fixed、Notion card、Codex agent との会話 demo (動かない、見せ用) * 実機能は別 session で実装、parent PLAN P0-T1 (Codex WS client) 連動 * ============================================================================ */ .agent-chat-panel { position: fixed; right: var(--space-5, 24px); bottom: var(--space-5, 24px); width: 360px; height: 440px; min-width: 280px; min-height: 280px; max-width: 96vw; max-height: 92vh; z-index: 250; display: none; flex-direction: column; resize: both; overflow: hidden; } .agent-chat-panel.open { display: flex; } .agent-chat-panel.dragging { transition: none; user-select: none; } /* drag affordance on header */ body[data-theme="shiro"] .agent-chat-header { cursor: move; user-select: none; } body[data-theme="shiro"] .agent-chat-close { cursor: pointer; } /* 4-corner resize handles (CSS native resize:both は右下のみなので、左右上 3 corner を補完) */ .agent-chat-panel .resize-handle { position: absolute; width: 14px; height: 14px; z-index: 10; } .agent-chat-panel .resize-handle.nw { top: 0; left: 0; cursor: nw-resize; } .agent-chat-panel .resize-handle.ne { top: 0; right: 0; cursor: ne-resize; } .agent-chat-panel .resize-handle.sw { bottom: 0; left: 0; cursor: sw-resize; } /* se corner is browser native (resize: both) — handle 不要 */ body[data-theme="shiro"] .agent-chat-panel { background: var(--color-bg-page); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); font-family: var(--font-sans); } body[data-theme="shiro"] .agent-chat-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); } body[data-theme="shiro"] .agent-chat-title { font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-default); display: flex; align-items: center; gap: var(--space-2); } body[data-theme="shiro"] .agent-chat-title .agent-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-agent-active); display: inline-block; } body[data-theme="shiro"] .agent-chat-title .agent-name { font-family: var(--font-mono); font-weight: var(--font-weight-medium); letter-spacing: -0.01em; font-size: var(--font-size-sm); color: var(--color-text-default); } body[data-theme="shiro"] .agent-chat-meta { font-family: var(--font-sans); font-size: 10px; font-weight: var(--font-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-light); } body[data-theme="shiro"] .agent-chat-close { background: transparent; border: none; color: var(--color-text-gray); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: var(--radius-sm); } body[data-theme="shiro"] .agent-chat-close:hover { background: var(--color-bg-warmer); color: var(--color-text-default); } body[data-theme="shiro"] .agent-chat-body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } body[data-theme="shiro"] .chat-bubble { max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--font-size-sm); line-height: var(--line-height-base); } body[data-theme="shiro"] .chat-bubble.from-owner { align-self: flex-end; background: var(--color-icon-blue); color: var(--color-on-accent); border-bottom-right-radius: var(--radius-sm); } body[data-theme="shiro"] .chat-bubble.from-agent { align-self: flex-start; background: var(--color-bg-surface); color: var(--color-text-default); border: 1px solid var(--color-border); border-bottom-left-radius: var(--radius-sm); } body[data-theme="shiro"] .chat-bubble .bubble-meta { font-family: var(--font-mono); font-feature-settings: 'tnum'; font-size: 10px; margin-top: 4px; opacity: 0.7; } body[data-theme="shiro"] .chat-bubble.from-agent .bubble-agent-name { font-family: var(--font-mono); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs); color: var(--color-text-gray); margin-bottom: 2px; letter-spacing: -0.01em; } body[data-theme="shiro"] .chat-bubble.from-agent .reasoning { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-gray); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border); } body[data-theme="shiro"] .chat-bubble.from-agent .reasoning .cite { color: var(--color-icon-blue); font-weight: var(--font-weight-semibold); } body[data-theme="shiro"] .chat-bubble.from-agent .confidence { display: inline-block; margin-top: 4px; font-family: var(--font-mono); font-feature-settings: 'tnum'; font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--color-icon-green); } body[data-theme="shiro"] .agent-chat-input { border-top: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); display: flex; gap: var(--space-2); align-items: center; } body[data-theme="shiro"] .agent-chat-input input { flex: 1; background: var(--color-bg-page); border: 1px solid var(--color-border); color: var(--color-text-default); font-family: var(--font-sans); font-size: var(--font-size-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); outline: none; } body[data-theme="shiro"] .agent-chat-input input::placeholder { color: var(--color-text-light); } body[data-theme="shiro"] .agent-chat-input button { background: var(--color-icon-blue); color: var(--color-on-accent); border: none; border-radius: var(--radius-md); padding: 6px 12px; font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; } /* Floating chat toggle button (右下 fixed circle) */ .agent-chat-toggle { position: fixed; right: var(--space-5, 24px); bottom: var(--space-5, 24px); z-index: 240; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; } body[data-theme="shiro"] .agent-chat-toggle { background: var(--color-icon-blue); color: var(--color-on-accent); box-shadow: var(--shadow-lg); transition: transform var(--duration-fast) var(--easing); } body[data-theme="shiro"] .agent-chat-toggle:hover { transform: scale(1.05); } body[data-theme="shiro"] .agent-chat-toggle.hidden { display: none; } /* ============ Slide drag-and-drop reorder (grid view) ============ * grid 内 slide thumbnail を drag で並び替え可能に * core slides-tab.js は触らない、本 CSS + JS で override * ============================================================================ */ body[data-theme="shiro"] .grid-view .card { cursor: grab; transition: transform var(--duration-fast) var(--easing), opacity var(--duration-fast) var(--easing); } body[data-theme="shiro"] .grid-view .card:active { cursor: grabbing; } body[data-theme="shiro"] .grid-view .card.drag-source { opacity: 0.4; transform: scale(0.96); } body[data-theme="shiro"] .grid-view .card.drag-over { outline: 2px solid var(--color-icon-blue); outline-offset: 4px; } body[data-theme="shiro"] .grid-view .card.drag-over .card-thumb { transform: none; /* drag-over hover scale を抑制 */ }