/* ---- Design (edit) layout: editor panel left, canvas right ---- */
.design-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.editor-panel {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: calc(var(--navbar-height, 70px) + 20px);
}

.editor-canvas {
    flex: 1;
    min-width: 0;
}

.editor-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}

.editor-card .form-group:last-child {
    margin-bottom: 0;
}

.editor-card textarea.form-control {
    font-family: inherit;
    resize: vertical;
}

.editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.editor-actions button {
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* The conversation chat dialog is the shared component:
   static/components/chat_dialog.css + templates/components/chat_dialog.html. */

/* Locked state: the page mirrors the working version, so manual widget controls
   are hidden (the grid is also made static from JS). */
.page-design.is-generating .widget-edit,
.page-design.is-generating .widget-delete,
.page-design.is-generating .widget-title-input {
    display: none;
}

/* ---- Grid + widgets ---- */
.grid-stack {
    min-height: 320px;
    /* Gridstack insets every item's content by its margin (8px) on all sides,
       including the outer edges. Pull the grid out by that amount (incl. the
       top) so the edge widgets line up flush with the canvas and the editor
       panel's top. */
    margin: -8px -8px 0;
}

.widget-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-bg);
    border-bottom: var(--border-width) solid var(--color-border);
    cursor: move;
}

.widget-title {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-edit {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    line-height: 1;
    color: var(--color-text-faint);
    padding: 0 4px;
}

.widget-edit:hover {
    color: var(--color-accent);
}

.widget-title-input {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    border: none;
    background: transparent;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
}

.widget-title-input:hover {
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.widget-title-input:focus {
    outline: none;
    background: var(--color-surface);
    box-shadow: var(--focus-ring);
    cursor: text;
}

.widget-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-lg);
    line-height: 1;
    color: var(--color-text-faint);
    padding: 0 4px;
}

.widget-delete:hover {
    color: var(--color-danger);
}

.widget-body {
    flex: 1;
    min-height: 0;
}

.widget-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--color-surface);
}

/* While dragging/resizing, let pointer events pass through the iframes to the
   grid instead of being swallowed by the framed document. */
.grid-stack.is-interacting .widget-frame {
    pointer-events: none;
}

/* Presentation mode shows only the rendered widget content, no editing chrome. */
.page-presentation .widget-header {
    display: none;
}

@media (max-width: 900px) {
    .design-layout {
        flex-direction: column;
    }

    .editor-panel {
        width: 100%;
        position: static;
    }
}