/* Prediction SPA customizer — floating launcher + slide-out panel.
   Self-contained styles, scoped to .fpfx-prediction-spa-customizer so they
   can't leak into the SPA content itself. All position:fixed so the panel
   stays anchored regardless of where the SPA is mounted in the document. */

.fpfx-prediction-spa-customizer {
    position: fixed;
    inset: 0 0 auto auto;
    top: 20px; right: 20px;
    z-index: 2147483647;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #111827;
}

.fpfx-pmc-launcher {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #1f2937;
    color: #fff;
    border: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    transition: transform 150ms ease, background 150ms ease;
}
.fpfx-pmc-launcher:hover { background: #111827; transform: translateY(-2px); }

.fpfx-pmc-panel {
    position: fixed;
    top: 0; right: 0;
    width: 360px; max-width: 100vw;
    height: 100vh;
    background: #ffffff;
    /* Shadow only when open — otherwise the -8px x-offset bleeds a faint
       vertical strip into the visible viewport area along the right edge,
       which looked like a stray border on the iframe. */
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transform: translateX(100%);
    transition: transform 220ms ease, box-shadow 220ms ease;
    display: flex; flex-direction: column;
    z-index: 1;
}
.fpfx-prediction-spa-customizer.is-open .fpfx-pmc-panel {
    transform: translateX(0);
    box-shadow: -8px 0 30px rgba(0,0,0,0.18);
}

.fpfx-pmc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}
.fpfx-pmc-title { font-size: 15px; font-weight: 600; }
.fpfx-pmc-close {
    background: transparent; border: 0; cursor: pointer;
    color: #6b7280; font-size: 16px; padding: 4px 8px;
}
.fpfx-pmc-close:hover { color: #111827; }

.fpfx-pmc-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 16px;
}
.fpfx-pmc-tab {
    background: transparent;
    border: 0;
    padding: 10px 14px;
    color: #6b7280;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.fpfx-pmc-tab:hover { color: #111827; }
.fpfx-pmc-tab.is-active { color: #2563eb; border-bottom-color: #2563eb; }

.fpfx-pmc-search {
    margin: 12px 16px 0;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}
.fpfx-pmc-search:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }

.fpfx-pmc-body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
}
.fpfx-pmc-empty {
    padding: 24px 0;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}

.fpfx-pmc-group { margin-bottom: 12px; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
.fpfx-pmc-group-header {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    background: #f9fafb;
    padding: 10px 12px;
    border: 0;
    cursor: pointer;
    font-size: 13px; font-weight: 600;
    text-align: left;
}
.fpfx-pmc-group-header:hover { background: #f3f4f6; }
.fpfx-pmc-group-caret { transition: transform 150ms ease; color: #6b7280; font-size: 11px; }
.fpfx-pmc-group.is-collapsed .fpfx-pmc-group-caret { transform: rotate(-90deg); }
.fpfx-pmc-group.is-collapsed .fpfx-pmc-group-items { display: none; }
.fpfx-pmc-group-items { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }

.fpfx-pmc-row {
    display: grid; grid-template-columns: 1fr; gap: 4px;
    padding: 6px 0;
}
.fpfx-pmc-row.is-overridden { position: relative; }
.fpfx-pmc-row.is-overridden::before {
    content: ''; position: absolute; left: -8px; top: 8px;
    width: 4px; height: 4px; border-radius: 50%;
    background: #2563eb;
}
.fpfx-pmc-label {
    font-size: 12px; color: #374151; font-weight: 500;
}
.fpfx-pmc-control {
    display: flex; gap: 6px; align-items: center;
}

.fpfx-pmc-color {
    display: flex; gap: 6px; flex: 1; align-items: center;
}
.fpfx-pmc-color-picker {
    width: 36px; height: 28px;
    border: 1px solid #d1d5db; border-radius: 4px;
    padding: 0; background: transparent; cursor: pointer;
}
.fpfx-pmc-color-text {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 12px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    min-width: 0;
}
.fpfx-pmc-color-text:focus, .fpfx-pmc-text:focus, .fpfx-pmc-size-number:focus, .fpfx-pmc-size-unit:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}

.fpfx-pmc-size { display: flex; gap: 4px; flex: 1; align-items: center; }
.fpfx-pmc-size-number {
    flex: 1; min-width: 0;
    padding: 4px 8px;
    border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 12px;
}
.fpfx-pmc-size-unit {
    padding: 4px 6px;
    border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 12px; background: #fff;
}

.fpfx-pmc-text {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 12px;
}

.fpfx-pmc-reset {
    background: transparent; border: 1px solid #e5e7eb;
    width: 26px; height: 26px;
    border-radius: 4px; cursor: pointer;
    color: #6b7280;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.fpfx-pmc-reset:hover { color: #2563eb; border-color: #2563eb; }

.fpfx-pmc-footer {
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    align-items: center;
}
.fpfx-pmc-history { display: inline-flex; gap: 4px; margin-right: auto; }
.fpfx-pmc-icon-btn {
    width: 30px; height: 30px;
    border: 1px solid #d1d5db; border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.fpfx-pmc-icon-btn:hover:not(:disabled) { background: #f3f4f6; color: #111827; }
.fpfx-pmc-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fpfx-pmc-action {
    padding: 6px 10px;
    border: 1px solid #d1d5db; border-radius: 6px;
    background: #f9fafb;
    color: #111827;
    font-size: 12px; font-weight: 500;
    cursor: pointer;
}
.fpfx-pmc-action:hover { background: #f3f4f6; }
.fpfx-pmc-action-danger { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.fpfx-pmc-action-danger:hover { background: #fee2e2; }

/* ----- AI tab ----- */
.fpfx-pmc-ai { display: flex; flex-direction: column; gap: 14px; }
.fpfx-pmc-ai-section { display: flex; flex-direction: column; gap: 6px; }
.fpfx-pmc-ai-label { font-size: 12px; font-weight: 600; color: #374151; }
.fpfx-pmc-ai-input,
.fpfx-pmc-ai-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    resize: vertical;
}
.fpfx-pmc-ai-input:focus,
.fpfx-pmc-ai-textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.fpfx-pmc-ai-colors { display: flex; gap: 8px; }
.fpfx-pmc-ai-color-slot { display: flex; gap: 4px; align-items: center; flex: 1; min-width: 0; }
.fpfx-pmc-ai-color-picker {
    width: 32px; height: 28px;
    border: 1px solid #d1d5db; border-radius: 4px;
    padding: 0; background: transparent; cursor: pointer;
    flex-shrink: 0;
}
.fpfx-pmc-ai-color-text {
    flex: 1; min-width: 0;
    padding: 4px 6px;
    border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 11px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.fpfx-pmc-ai-submit {
    padding: 10px 14px;
    border: 0; border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease;
}
.fpfx-pmc-ai-submit:hover:not(:disabled) { background: #1d4ed8; }
.fpfx-pmc-ai-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.fpfx-pmc-ai-result {
    padding: 10px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
}
.fpfx-pmc-ai-result-head { font-size: 12px; color: #047857; font-weight: 600; }