/* ==========================================================================
   3b. CREATOR COMPACT LAYOUT (WP7a): segmented controls, destination near the
   top, docked Preview + Create bar, and the creation result dialog.
   Loaded after creator.css and preview-pip.css. Palette: slate/blue tokens.
   ========================================================================== */

/* ---- Stream and cards ---- */
.create-slip-view,
.creator-form-stream,
.gated-section { gap: 10px; }
#createSlipView .cc-card { padding: 12px; border-radius: var(--radius-lg); }
.cc-body { display: flex; flex-direction: column; gap: 10px; }
.cc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cc-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.cc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }

/* Step headers: small uppercase labels. Step numbers matter only in quick mode. */
#createSlipView .cc-step-header { margin-bottom: 8px; gap: 8px; flex-wrap: nowrap; }
#createSlipView .cc-step-header .card-title { font-family: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); gap: 8px; min-width: 0; }
#createSlipView .cc-step-header .card-step-badge { width: 20px; height: 20px; font-size: 11px; }
body:not(.quick-mode-active) #createSlipView .cc-step-header .card-step-badge { display: none; }
body:not(.quick-mode-active) #brandSelectionCard .cc-step-header,
body:not(.quick-mode-active) #linkIngestionCard .cc-step-header { display: none; }
#createSlipView .quick-step-header-right { gap: 6px; min-width: 0; }
#createSlipView .drop-btn { min-height: 28px; padding: 0 10px; font-size: 11px; }
.cc-brand-hint { font-size: 12px; font-weight: 600; color: var(--accent); }

/* ---- Top row: brand segment + workflow segment ---- */
.cc-top-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cc-brand-step { flex: 1 1 auto; min-width: 0; }
body.quick-mode-active .cc-top-card { flex-direction: column-reverse; align-items: stretch; }
body.quick-mode-active .cc-top-card .cc-workflow-seg { align-self: flex-end; }
body.quick-mode-active .cc-brand-step.quick-step-collapsed .cc-step-header,
body.quick-mode-active .cc-brand-step.quick-step-pending .cc-step-header { margin-bottom: 0; }
body.quick-mode-active .cc-brand-step.quick-step-collapsed .card-step-body { display: none; }

/* ---- Segmented control (shared by brand, workflow, link type and template) ----
   Inset-pill style: one rounded track on the lighter panel; the selected option is a raised,
   rounded pill inside it, so its outline can never be clipped by the track's corners. */
.cc-seg {
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
    /* Track is 6px taller than a control so the pill keeps ctl-h minus 2px of tap area
       (42px on touch, 30px on desktop). */
    height: calc(var(--ctl-h) + 6px);
    max-width: 100%;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}
.cc-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.cc-seg-btn:hover:not(:disabled):not(.active) { color: var(--text-main); background: rgba(148, 163, 184, 0.08); }
.cc-seg-btn.active {
    background: var(--surface-3);
    color: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.6), 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 14px rgba(96, 165, 250, 0.14);
}
.cc-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cc-seg-btn:disabled,
.cc-seg-btn.locked-capability { opacity: 0.45; cursor: not-allowed; }
.cc-brand-seg .brand-domain { display: none; }
.cc-brand-seg .brand-name { font-size: 13px; font-weight: 600; color: inherit; }

/* ---- Destination field: Paste sits inside, the text never runs under it (B-09) ---- */
.cc-input,
#createSlipView .filter-select.cc-input { height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 12px; font-size: 14px; width: 100%; }
.cc-urlbox { position: relative; }
.cc-urlbox .cc-input { padding-right: 88px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; text-overflow: ellipsis; }
.cc-paste-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    height: calc(var(--ctl-h) - 8px);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.cc-paste-btn:hover { border-color: var(--accent); color: var(--accent); }
#createSlipView .referral-status-banner { margin-top: 4px; padding: 4px 8px; font-size: 12px; }
.cc-template-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }

/* ---- Screenshot row ---- */
#createSlipView .cc-drop {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 8px 8px 12px;
    text-align: left;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    box-shadow: none;
}
#createSlipView .cc-drop:hover,
#createSlipView .cc-drop.dragover { border-color: var(--accent); background: rgba(96, 165, 250, 0.05); box-shadow: none; }
#createSlipView .image-preview-card.cc-drop { display: none; cursor: default; }
.cc-drop-icon { width: 22px; height: 22px; color: var(--text-muted); flex-shrink: 0; }
.cc-drop-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13px; color: var(--text-main); }
.cc-drop-sub { font-size: 11px; color: var(--text-dim); }
#createSlipView .image-thumb-wrapper { width: 40px; height: 56px; border-radius: 4px; }
#createSlipView .image-meta { flex: 1; min-width: 0; }
#createSlipView .image-meta h4 { font-size: 13px; font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ok { font-size: 12px; color: var(--success-text); }
.cc-btn,
#createSlipView .btn-action.cc-btn { height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 12px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.cc-icon-btn,
#createSlipView .btn-action.cc-icon-btn { width: var(--ctl-h); padding: 0; }

/* ---- Title and slashtag ---- */
#createSlipView .cc-prefix { height: var(--ctl-h); border-radius: var(--radius-sm); }
#createSlipView .cc-prefix .url-base-prefix { padding: 0 2px 0 12px; font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-dim); max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
#createSlipView .cc-prefix .url-slug-input { height: 100%; min-width: 0; padding: 0 10px 0 2px; font-size: 13px; }
#createSlipView .slashtag-status-box { margin-top: 0; padding: 0; gap: 6px; border: 0; background: transparent; font-weight: 500; color: var(--text-muted); }
#createSlipView .slashtag-status-box b { font-weight: 600; }
#createSlipView .slashtag-status-box.available b { color: var(--success-text); }
#createSlipView .slashtag-status-box.taken b { color: var(--danger-text); }
#createSlipView .slashtag-status-box.checking { color: var(--accent); }
#createSlipView .suggestion-bar { margin-top: 0; padding: 6px 10px; }

/* Advanced options: one disclosure for header style, button text, footer and colours */
.cc-advanced summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: var(--ctl-h);
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.cc-advanced summary::-webkit-details-marker { display: none; }
.cc-advanced summary:hover { color: var(--text-main); }
.cc-advanced[open] summary svg { transform: rotate(90deg); }
.cc-advanced-body { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.cc-advanced-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.creator-quick-link .cc-landing-only { display: none; }
body.creator-quick-link #templateAdvancedDetails { display: none; }
#createSlipView .color-toggle-box { margin-top: 0; min-height: var(--ctl-h); }
#createSlipView .color-inputs-grid { margin-top: 4px; gap: 8px; }
.cc-color-cap { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }

/* ---- Bottom dock: Preview (below 1100px) + Create ---- */
.cc-dock { display: flex; gap: 8px; align-items: center; }
#createSlipView .cc-create-btn {
    flex: 1;
    width: auto;
    height: max(40px, var(--ctl-h));
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: none;
}
#createSlipView .cc-create-btn:hover { transform: none; box-shadow: none; }
#executePipelineBtnLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#createSlipView select.cc-input { font-weight: 500; }
.cc-dock-preview { height: max(40px, var(--ctl-h)); padding: 0 14px; flex-shrink: 0; }
.gated-section.locked + .cc-dock .cc-create-btn,
.gated-section.locked + .cc-dock .cc-dock-preview { opacity: 0.35; pointer-events: none; }
body.quick-mode-active .cc-dock-preview,
body.creator-quick-link .cc-dock-preview { display: none; }

@media (min-width: 1100px) {
    body:not(.quick-mode-active):not(.preview-hidden) #createSlipView { grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
    #pipWidget,
    .pip-widget.minimized,
    .pip-widget.expanded { width: 340px; height: 640px; border-radius: var(--radius-md); }
    .cc-dock { position: sticky; bottom: 0; z-index: 5; padding: 8px 0; background: linear-gradient(to top, var(--bg-base) 70%, transparent); }
    .cc-dock-preview { display: none; }
    /* Quick links have no page preview: the form takes the full width like preview-hidden. */
    body.creator-quick-link:not(.quick-mode-active):not(.preview-hidden) #createSlipView { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin: 0 auto; width: 100%; }
}

@media (max-width: 1099px) {
    /* The dock replaces the floating Preview pill and the minimized PiP. */
    .pip-widget.minimized,
    #showPreviewPill { display: none !important; }
    .gated-section { padding-bottom: 0; }
    .cc-dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 700;
        padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        background: var(--bg-deep);
        border-top: 1px solid var(--border);
    }
    body:not(.authenticated) .cc-dock,
    body.force-password-reset .cc-dock { display: none; }
}

@media (max-width: 600px) {
    .cc-grid2,
    .cc-advanced-grid { grid-template-columns: minmax(0, 1fr); }
    .cc-top-card .cc-seg,
    .cc-brand-seg { width: 100%; }
    .cc-top-card .cc-seg-btn { flex: 1 1 0; padding: 0 6px; }
    .cc-row > .cc-seg,
    .cc-template-wrap { width: 100%; }
    .cc-template-wrap .cc-seg { flex: 1 1 100%; }
    .cc-template-wrap .cc-seg-btn,
    .cc-row > .cc-seg .cc-seg-btn { flex: 1 1 0; padding: 0 6px; }
    #createSlipView .cc-replace-btn { padding: 0 10px; }
}

/* ==========================================================================
   CREATION RESULT DIALOG (#creationDialog, result-dialog.js)
   ========================================================================== */
dialog.studio-dialog.cc-result-dialog {
    width: min(620px, calc(100vw - 32px));
    max-width: 620px;
    max-height: calc(100dvh - 32px);
    padding: 16px;
    border-radius: var(--radius-md);
    overflow-y: auto;
    overscroll-behavior: contain;
}
dialog.studio-dialog.cc-result-dialog::backdrop { background-color: rgba(7, 10, 18, 0.82); backdrop-filter: none; }
.cc-result-loading { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--text-main); }
.cc-result-sheet { display: none; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; }
.cc-result-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-result-head h2 { font-size: 16px; font-weight: 600; color: var(--text-main); white-space: nowrap; }
.cc-result-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; }
.cc-result-status.is-copied .cc-dot { background: var(--success); }
.cc-result-close { margin-left: auto; }
.cc-result-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cc-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-sm);
    background: var(--bg-deep);
    min-width: 0;
}
.cc-url-text { flex: 1; min-width: 0; font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.cc-url-sub { border-color: var(--border); }
.cc-url-sub .cc-url-text { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.cc-tag { flex-shrink: 0; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted); }
.cc-url-row .cc-btn { height: calc(var(--ctl-h) - 2px); min-height: 0; min-width: 72px; }
.cc-url-row .cc-btn.is-copied { color: var(--success-text); }
.cc-result-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cc-result-acts .btn-action { flex-direction: column; gap: 3px; height: 52px; min-height: 52px; padding: 0 4px; font-size: 12px; font-weight: 600; }
.cc-result-pv { display: none; height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 12px; font-size: 13px; }
#creationDialog .qr-section { padding: 10px; gap: 6px; }
.cc-qr-cap { font-size: 11px; color: var(--text-muted); }
.cc-result-preview {
    position: relative;
    height: 208px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-deep);
    overflow: hidden;
}
.cc-result-preview .modal-preview-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 375px;
    height: 520px;
    border: 0;
    transform: scale(0.4);
    transform-origin: top left;
    pointer-events: none;
}
#creationDialog.no-preview .cc-result-sheet { grid-template-columns: minmax(0, 1fr); }
#creationDialog.no-preview .cc-result-preview,
#creationDialog.no-preview .cc-result-pv { display: none !important; }
.cc-result-foot { grid-column: 1 / -1; display: flex; gap: 8px; }
.cc-result-foot .btn-action { flex: 1; height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 12px; font-size: 13px; font-weight: 600; }
.cc-dev-urls { grid-column: 1 / -1; margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-deep); border: 1px solid var(--border); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted); white-space: pre-wrap; word-break: break-all; }

@media (max-width: 767px) {
    /* Phone: bottom sheet with the actions first; the page preview is one tap away. */
    dialog.studio-dialog.cc-result-dialog {
        width: 100vw;
        max-width: 100vw;
        margin: auto 0 0;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        border-bottom: 0;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }
    .cc-result-sheet { grid-template-columns: minmax(0, 1fr); }
    .cc-result-preview { display: none; height: 280px; }
    .cc-result-preview .modal-preview-iframe { left: 50%; transform: translateX(-50%) scale(0.54); transform-origin: top center; }
    #creationDialog.show-preview .cc-result-preview { display: block; }
    .cc-result-pv { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
    #createSlipView *,
    #creationDialog *,
    .pip-widget { transition: none !important; animation-duration: 1.6s !important; }
}