/*
 * 見積システム共通UI部品（quote UI / 接頭辞 qui-）。仕様: uvdtf-quote/docs/quote-ui-spec.md（UVDTF と同じ内容に保つ）
 *
 * 各見積システムのCSSは `#wrapper button { border: ... !important }` のようにIDで強く上書きしているため、
 * 部品側も :is(#各ラッパー, .qui-root) でID並みの詳細度にしている。他システムへ展開する時は
 * このリストへラッパーIDを足す。body直下に出すダイアログは .qui-root を付ける。
 * 表示・非表示は各システムのJSが style.display / hidden で切り替えるので、display に !important を付けない
 * （[hidden] の非表示だけは確実に効かせる）。
 */
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) {
    --qui-accent: #4f46e5;
    --qui-accent-weak: #eef2ff;
    --qui-accent-line: #c7d2fe;
    --qui-text: #111827;
    --qui-muted: #6b7280;
    --qui-border: #e5e7eb;
    --qui-border-strong: #d1d5db;
    --qui-surface: #ffffff;
    --qui-surface-2: #f8fafc;
    --qui-ok: #15803d; --qui-ok-bg: #f0fdf4;
    --qui-warn: #b45309; --qui-warn-bg: #fffbeb;
    --qui-err: #b91c1c; --qui-err-bg: #fef2f2;
    --qui-radius: 10px;
    --qui-tap: 2.25rem;
}
@media (pointer: coarse) { :is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) { --qui-tap: 2.75rem; } }

:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-root-hidden,
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) [class*="qui-"][hidden] { display: none !important; }

/* ── カード ───────────────────────────── */
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-card {
    background: var(--qui-surface) !important;
    border: 1px solid var(--qui-border) !important;
    border-radius: var(--qui-radius) !important;
    padding: 0.75rem 0.875rem !important;
    margin: 0 0 0.625rem !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-card-head {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 0.5rem !important; margin: 0 0 0.5rem !important;
    font-size: 0.875rem !important; font-weight: 700 !important; color: var(--qui-text) !important; line-height: 1.4 !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-card-note {
    display: block !important; margin: 0 0 0.5rem !important;
    font-size: 0.78rem !important; line-height: 1.5 !important; color: var(--qui-muted) !important;
}

/* ── バッジ ───────────────────────────── */
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-badges { display: flex !important; flex-wrap: wrap !important; gap: 0.35rem !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-badge {
    display: inline-flex !important; align-items: center !important; gap: 0.25rem !important;
    padding: 0.2rem 0.55rem !important; border-radius: 999px !important;
    font-size: 0.75rem !important; font-weight: 700 !important; line-height: 1.4 !important;
    background: var(--qui-surface-2) !important; color: #374151 !important; border: 1px solid var(--qui-border) !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-badge--ok { background: var(--qui-ok-bg) !important; color: var(--qui-ok) !important; border-color: #bbf7d0 !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-badge--warn { background: var(--qui-warn-bg) !important; color: var(--qui-warn) !important; border-color: #fde68a !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-badge--err { background: var(--qui-err-bg) !important; color: var(--qui-err) !important; border-color: #fecaca !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-badge--accent { background: var(--qui-accent-weak) !important; color: var(--qui-accent) !important; border-color: var(--qui-accent-line) !important; }

/* ── 切替ボタン（セグメント） ─────────────── */
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-seg {
    display: flex !important; width: 100% !important; margin: 0 !important; padding: 3px !important;
    background: #f1f5f9 !important; border: 1px solid var(--qui-border) !important; border-radius: var(--qui-radius) !important; gap: 3px !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-seg + .qui-seg { margin-top: 0.4rem !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-seg > button {
    flex: 1 1 0 !important; min-width: 0 !important; min-height: var(--qui-tap) !important; margin: 0 !important;
    padding: 0.35rem 0.4rem !important; border: 1px solid transparent !important; border-radius: calc(var(--qui-radius) - 3px) !important;
    background: transparent !important; color: #475569 !important;
    font-size: 0.8rem !important; font-weight: 700 !important; line-height: 1.25 !important; white-space: normal !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-seg > button small { display: block !important; font-size: 0.7rem !important; font-weight: 600 !important; opacity: 0.8; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-seg > button.is-on {
    background: var(--qui-surface) !important; color: var(--qui-accent) !important; border-color: var(--qui-accent-line) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-seg > button:focus-visible { outline: 3px solid rgba(79, 70, 229, 0.35) !important; outline-offset: 1px !important; }

/* ── 「?」ヘルプ ───────────────────────── */
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-help { position: relative !important; display: inline-flex !important; flex: none !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-help-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 1.5rem !important; height: 1.5rem !important; padding: 0 !important; margin: 0 !important;
    border: 1px solid var(--qui-border-strong) !important; border-radius: 999px !important; background: var(--qui-surface) !important;
    color: var(--qui-muted) !important; font-size: 0.8rem !important; font-weight: 700 !important; line-height: 1 !important;
}
@media (pointer: coarse) {
    /* 見た目は小さく、押せる範囲は広く。広げる基準をボタン自身にする（position:relative）。
       基準が無いとダイアログ全体が「?」の押せる範囲になり、スマホで実行ボタン等が押せなくなる */
    :is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-help-btn { position: relative !important; }
    :is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-help-btn::before { content: ''; position: absolute; inset: -0.6rem; }
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-help-btn[aria-expanded="true"] { color: var(--qui-accent) !important; border-color: var(--qui-accent) !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-help-pop {
    position: absolute !important; top: calc(100% + 0.4rem) !important; right: 0 !important; z-index: 50 !important;
    width: min(20rem, 80vw) !important; padding: 0.75rem 0.85rem !important;
    background: var(--qui-surface) !important; border: 1px solid var(--qui-border) !important; border-radius: var(--qui-radius) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
    font-size: 0.8rem !important; font-weight: 400 !important; line-height: 1.65 !important; color: #374151 !important; text-align: left !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-help-pop p,
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-help-pop div { margin: 0 0 0.5rem !important; font-size: 0.8rem !important; line-height: 1.65 !important; color: #374151 !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-help-pop > :last-child { margin-bottom: 0 !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-help-pop strong { color: var(--qui-text) !important; }
@media (max-width: 640px) {
    /* スマホでは画面下のシートとして出す（下部の固定ボタンより上） */
    :is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-help-pop {
        position: fixed !important; top: auto !important; left: 0.75rem !important; right: 0.75rem !important;
        bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important; width: auto !important; max-height: 55vh !important; overflow-y: auto !important;
        z-index: 100001 !important; font-size: 0.875rem !important;
    }
}

/* ── ツールバー ─────────────────────────── */
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-toolbar {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.3rem !important;
    padding: 0.35rem 0.45rem !important; margin: 0 0 0.5rem !important;
    background: var(--qui-surface-2) !important; border: 1px solid var(--qui-border) !important; border-radius: var(--qui-radius) !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-toolbar-spacer { flex: 1 1 auto !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-tool {
    width: var(--qui-tap) !important; height: var(--qui-tap) !important; min-width: var(--qui-tap) !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-tool-text {
    width: auto !important; padding: 0 0.6rem !important; gap: 0.3rem !important; font-size: 0.78rem !important; white-space: nowrap !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-tool-accent { color: var(--qui-accent) !important; border-color: var(--qui-accent-line) !important; background: var(--qui-accent-weak) !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-tool-accent.is-busy,
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-tool-accent.is-done { background: var(--qui-accent) !important; color: #fff !important; border-color: var(--qui-accent) !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-tool-accent.is-done::after {
    content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid #fff;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-toolbar.is-locked > :not(.qui-tool-accent) { opacity: 0.45 !important; pointer-events: none !important; }
@media (max-width: 640px) {
    /* スマホ: 1段・横スクロール。スライダーは省き（ピンチ操作と＋−で足りる）、押せる大きさを確保 */
    :is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-toolbar {
        flex-wrap: nowrap !important; overflow-x: auto !important; overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; margin-left: -0.25rem !important; margin-right: -0.25rem !important;
    }
    :is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-toolbar::-webkit-scrollbar { display: none !important; }
    :is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-toolbar > * { flex: none !important; }
    :is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-hide-mobile { display: none !important; }
}

/* ── キャンバス上の重ね表示 ─────────────── */
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) svg.qui-dim-overlay {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important;
    pointer-events: none !important; overflow: visible !important; z-index: 4 !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-dim-line { stroke: var(--qui-accent); stroke-width: 1.5; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-dim-ext { stroke: var(--qui-accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-dim-arrow { fill: var(--qui-accent); }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-dim-label rect { fill: #fff; stroke: var(--qui-accent); stroke-width: 1; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-dim-label text { fill: var(--qui-accent); font-size: 12px; font-weight: 700; font-family: inherit; }

:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-busy-overlay {
    position: absolute !important; inset: 0 !important; z-index: 6 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; padding: 0.75rem !important;
    background: rgba(255, 255, 255, 0.72) !important; backdrop-filter: blur(1.5px);
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-busy-card {
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.3rem !important;
    width: min(21rem, 100%) !important; padding: 1rem 1.1rem !important; text-align: center !important;
    background: var(--qui-surface) !important; border: 1px solid var(--qui-border) !important; border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14) !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-busy-mascot { display: block !important; width: 64px !important; height: 64px !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-busy-mascot:empty { display: none !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-busy-mascot svg { width: 100% !important; height: 100% !important; overflow: visible !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-busy-title { font-size: 0.95rem !important; font-weight: 700 !important; color: var(--qui-text) !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-busy-sub { font-size: 0.78rem !important; color: var(--qui-muted) !important; line-height: 1.5 !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-progress {
    width: 100% !important; height: 8px !important; margin-top: 0.45rem !important; overflow: hidden !important;
    background: #e2e8f0 !important; border-radius: 999px !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-progress-bar {
    height: 100% !important; width: 0; border-radius: 999px !important; transition: width 0.9s linear;
    background-color: var(--qui-accent) !important;
    background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%) !important;
    background-size: 1.25rem 1.25rem !important; animation: qui-stripes 1s linear infinite;
}
@keyframes qui-stripes { from { background-position: 0 0; } to { background-position: 1.25rem 0; } }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-steps {
    display: flex !important; justify-content: space-between !important; width: 100% !important; margin: 0.35rem 0 0 !important; padding: 0 !important; list-style: none !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-steps li {
    flex: 1 1 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
    font-size: 0.68rem !important; color: #94a3b8 !important; text-align: center !important; white-space: nowrap !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-steps li.is-done { color: var(--qui-ok) !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-steps li.is-done::before { content: '✓ '; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-steps li.is-current { color: var(--qui-accent) !important; font-weight: 700 !important; }
@media (prefers-reduced-motion: reduce) {
    :is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-progress-bar { animation: none; transition: none; }
}

/* ── ダイアログ ─────────────────────────── */
.psw-ai-dialog.qui-dialog {
    position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: rgba(15, 23, 42, 0.5); font-family: inherit;
}
.psw-ai-dialog.qui-dialog[hidden] { display: none; }
.psw-ai-dialog .qui-dialog-panel {
    position: relative; width: min(26rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto;
    background: #fff; color: #111827; border-radius: 14px; padding: 1rem 1.1rem 1.1rem; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.psw-ai-dialog .qui-dialog-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.psw-ai-dialog .qui-dialog-head h2 { flex: 1; margin: 0; font-size: 1.05rem; line-height: 1.4; color: #111827; }
.psw-ai-dialog .qui-dialog-close { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 8px; background: transparent; color: #6b7280; font-size: 1.25rem; cursor: pointer; }
.psw-ai-dialog .qui-dialog-lead { margin: 0 0 0.75rem; font-size: 0.85rem; line-height: 1.6; color: #4b5563; }
@media (max-width: 640px) {
    /* スマホは下からのシート */
    .psw-ai-dialog.qui-dialog { align-items: flex-end; padding: 0; }
    .psw-ai-dialog .qui-dialog-panel { width: 100%; border-radius: 16px 16px 0 0; padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)); max-height: 88dvh; }
}

/* ダイアログ内の「?」は浮かせず見出しの下に展開する（パネルのスクロールで切れないように） */
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review).qui-dialog .qui-dialog-head { flex-wrap: wrap; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review).qui-dialog .qui-dialog-head .qui-help { display: contents !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review).qui-dialog .qui-dialog-head .qui-help-pop {
    position: static !important; order: 10; flex: 1 1 100%; width: auto !important; max-height: none !important;
    margin: 0.35rem 0 0.25rem !important; box-shadow: none !important; background: #f8fafc !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review).qui-dialog .qui-help-pop > span { display: block; margin: 0 0 0.45rem; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review).qui-dialog .qui-dialog-head h2 {
    border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important;
    font-size: 1.05rem !important; line-height: 1.4 !important; color: #111827 !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review).qui-dialog .qui-dialog-head h2::before,
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review).qui-dialog .qui-dialog-head h2::after { content: none !important; display: none !important; }

/* ── 開閉するカード（QUI.accordion） ── */
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-accordion .qui-card-head { margin: 0 !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-accordion.is-open .qui-card-head { margin: 0 0 0.5rem !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-acc-toggle {
    display: flex !important; flex: 1 1 auto !important; align-items: center !important; gap: 0.45rem !important; min-width: 0 !important;
    min-height: var(--qui-tap) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
    font: inherit !important; font-size: 0.875rem !important; font-weight: 700 !important; color: var(--qui-text) !important; text-align: left !important; cursor: pointer !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-acc-toggle:focus-visible { outline: 3px solid rgba(79, 70, 229, 0.35) !important; outline-offset: 2px !important; border-radius: 6px !important; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-acc-state {
    display: inline-flex !important; padding: 0.1rem 0.45rem !important; border-radius: 999px !important;
    background: var(--qui-accent-weak) !important; color: var(--qui-accent) !important; font-size: 0.7rem !important; font-weight: 700 !important;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-acc-chevron {
    display: inline-block !important; flex: none !important; width: 0.5rem !important; height: 0.5rem !important; margin: 0 0.35rem 0 auto !important;
    border-right: 2px solid var(--qui-muted) !important; border-bottom: 2px solid var(--qui-muted) !important; transform: rotate(45deg) translateY(-2px); transition: transform 0.15s;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-accordion.is-open .qui-acc-chevron { transform: rotate(-135deg) translateY(-2px); }

/* ── 四角での範囲指定（QUI.rectSelect） ── */
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-rects { position: absolute; z-index: 5; cursor: crosshair; touch-action: none; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-rect {
    position: absolute; border: 2px dashed var(--qui-accent); background: rgba(79, 70, 229, 0.14); border-radius: 4px; box-sizing: border-box;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-rect.is-drawing { border-style: solid; }
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-rect-no {
    position: absolute; left: 4px; top: 4px; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 999px;
    background: var(--qui-accent); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.3rem; text-align: center;
}
:is(#psq-app-root, .psw-ai-dialog, .psw-ai-review) .qui-rect-del {
    position: absolute; right: -0.9rem; top: -0.9rem; width: 1.8rem; height: 1.8rem; padding: 0; border: 2px solid #fff; border-radius: 50%;
    background: #111827; color: #fff; font-size: 1rem; line-height: 1; cursor: pointer;
}