/* ── Preview panel (RIGHT) ───────────────────────── */
.preview-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    min-width: 200px;
}
.preview-panel-header {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel);
    gap: 8px;
}
.preview-url-bar {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 28px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
}
.preview-header-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.preview-header-btn:hover { color: var(--text-primary); background: var(--bg-surface); }
.preview-header-btn:disabled { opacity: 0.4; cursor: default; }

/* Signal-type panel wrappers (injected by SignalTypeRegistry) */
.signal-type-panel { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }

/* When the website plugin is active (edit mode), suppress the native preview container
   so the signal-type-panel (editor) gets all available flex space */
.preview-panel.website-active #website-preview-content {
    display: none !important;
}

/* ── Website editor layout ─────────────────────── */
.website-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.website-mode-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel);
    flex-shrink: 0;
}

.website-mode-toggle button {
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.website-mode-toggle button:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.website-mode-toggle button.active {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
}

.website-mode-spacer { flex: 1; }

.website-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 16px;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.website-toggle-btn:hover { color: var(--text-primary); background: var(--bg-surface); }

/* Responsive preview viewport toggle (desktop / tablet / mobile) */
.website-viewport-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--border);
}

.website-viewport-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.website-viewport-btn svg { width: 15px; height: 15px; }

.website-viewport-btn:hover { color: var(--text-primary); background: var(--bg-surface); }

.website-viewport-btn.active {
    color: var(--text-primary);
    background: var(--bg-surface);
    border-color: var(--border);
}

#website-editor-host {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Empty-state shown in Preview mode when the site has no content yet — keeps
   the preview from rendering as a blank white iframe (see website-plugin.js
   _syncEmptyState). */
.website-preview-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: var(--bg-panel);
    color: var(--text-muted);
}
.website-preview-empty__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 320px;
}
.website-preview-empty__icon { opacity: 0.5; }
.website-preview-empty__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}
.website-preview-empty__hint { font-size: 13px; line-height: 1.5; }

/* Override html-editor canvas sizing for full-height website mode */
#website-editor-host .he-canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* The edit-mode frame div — renders site body HTML in the main document
   so selection-manager hit-testing (document.elementFromPoint) works correctly */
.website-html-frame {
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    color: #000;
    /* No transform scaling — full-height scrollable document */
    transform: none !important;
    transform-origin: top left;
}

/* Empty-state placeholder — matches Lani dark theme until generated content fills the frame */
.website-html-frame:empty {
    background: var(--bg-primary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
}

.website-html-frame:empty::before {
    content: "Describe your site in the chat below to begin.";
    font-size: 14px;
    line-height: 1.6;
    max-width: 480px;
    opacity: 0.7;
}

/* Generation-progress pill (mirrors presentation.css .pres-gen-progress) —
   a non-blocking "Working… Xs" indicator floated over the website preview
   while the assistant reads/writes files, so generation doesn't look frozen. */
@keyframes website-spin { to { transform: rotate(360deg); } }
.website-gen-progress {
    position: absolute;
    top: 12px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: var(--bg-panel, rgba(20, 22, 28, 0.92));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    color: var(--text-primary); font-size: 13px; font-weight: 500;
    z-index: 20;
    pointer-events: none;
    backdrop-filter: blur(4px);
}
.website-gen-progress-spinner {
    width: 14px; height: 14px;
    border: 2px solid var(--border, rgba(255, 255, 255, 0.18));
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: website-spin 0.9s linear infinite;
}
.website-gen-progress-elapsed {
    color: var(--text-muted); font-size: 12px;
    font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
    .website-gen-progress-spinner { animation-duration: 2.4s; }
}

/* Build error pill — shown when the goal completes without producing a page
   (AB#12161: complex builds silently return nothing). Floated over the preview,
   auto-dismisses after BUILD_ERROR_VISIBLE_MS, user can dismiss via ✕. */
.website-build-error {
    position: absolute;
    top: 12px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 12px;
    max-width: calc(100% - 32px);
    background: var(--bg-panel, rgba(20, 22, 28, 0.96));
    border: 1px solid var(--color-error, #f87171);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    color: var(--text-primary); font-size: 13px; line-height: 1.5;
    z-index: 21;
    backdrop-filter: blur(4px);
}
.website-build-error__icon {
    flex-shrink: 0;
    color: var(--color-error, #f87171);
    font-size: 15px;
    margin-top: 1px;
}
.website-build-error__msg {
    flex: 1;
    word-break: break-word;
}
.website-build-error__close {
    flex-shrink: 0;
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    font-size: 13px; padding: 0 2px;
    line-height: 1;
}
.website-build-error__close:hover { color: var(--text-primary); }