/* ========================================================================
   SlicePost application shell

   The Posting header is the canonical application chrome: full-width sticky
   bar, brand at left, icon navigation in the middle, and route-specific
   controls at right. Pages may keep their own status/workflow controls, but
   the shell geometry and primary navigation stay identical everywhere.
   ======================================================================== */

header.app-shell-header {
    --shell-brand-column: 330px;
    --shell-border: var(--v2-border, rgba(255, 255, 255, 0.09));
    --shell-header-bg: var(--v2-header-bg, rgba(13, 14, 18, 0.88));
    --shell-text: var(--v2-white, #f1f4f7);
    --shell-muted: var(--v2-muted, #9da6af);
    --shell-fill: var(--v2-fill, rgba(255, 255, 255, 0.035));
    --shell-fill-hover: var(--v2-fill-hover, rgba(255, 255, 255, 0.06));
    --shell-blue: var(--v2-blue-light, #4c4cff);

    width: 100%;
    min-height: 78px;
    flex: 0 0 auto;
    padding: 1.1rem 2rem;
    display: grid;
    grid-template-columns: var(--shell-brand-column) minmax(0, 1fr) max-content;
    align-items: center;
    justify-content: normal;
    column-gap: 12px;
    row-gap: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--shell-header-bg);
    border-bottom: 1px solid var(--shell-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-theme="light"] header.app-shell-header {
    --shell-header-bg: var(--v2-header-bg, rgba(255, 255, 255, 0.88));
    --shell-text: var(--v2-white, #131619);
    --shell-muted: var(--v2-muted, #4b5560);
}

header.app-shell-header .app-shell-brand {
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 0.75rem;
    overflow: hidden;
    color: var(--shell-text);
    text-decoration: none;
}

header.app-shell-header button.app-shell-brand {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

header.app-shell-header .app-shell-brand:focus-visible,
header.app-shell-header .app-shell-tab:focus-visible,
header.app-shell-header .app-shell-account:focus-visible,
header.app-shell-header .theme-toggle:focus-visible {
    outline: 3px solid var(--shell-blue);
    outline-offset: 3px;
}

header.app-shell-header .app-shell-logo {
    display: block;
    flex: none;
    width: 42px;
    height: 42px;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

header.app-shell-header .app-shell-wordmark {
    font-family: 'Outfit', system-ui, sans-serif;
    color: transparent;
    background: var(--primary-gradient, linear-gradient(135deg, #1014ef 0%, #2f2fff 55%, #4c4cff 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
    white-space: nowrap;
}

header.app-shell-header .app-shell-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: #fff;
    background: var(--accent-gradient, linear-gradient(135deg, #1014ef 0%, #2f74c9 100%));
    box-shadow: none;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

header.app-shell-header .app-shell-nav {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0.4rem;
    margin-left: 0;
    height: 40px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--shell-border) transparent;
}

header.app-shell-header .app-shell-nav::-webkit-scrollbar {
    height: 4px;
}

header.app-shell-header .app-shell-nav::-webkit-scrollbar-thumb {
    background: var(--shell-border);
    border-radius: 999px;
}

header.app-shell-header .app-shell-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 40px;
    gap: 8px;
    padding: 0.6rem 1.05rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--shell-muted);
    background: transparent;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Captions keeps a legacy, more-specific nav rule for its older shell. The
   extra selector makes the shared Posting treatment win on that route too. */
header.app-shell-header nav.app-shell-nav.app-tabs .app-shell-tab {
    min-height: 40px;
    padding: 0.6rem 1.05rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--shell-muted);
    background: transparent;
    font-size: 0.92rem;
    font-weight: 600;
}

header.app-shell-header nav.app-shell-nav.app-tabs .app-shell-tab:hover,
header.app-shell-header nav.app-shell-nav.app-tabs .app-shell-tab:focus-visible {
    color: var(--shell-text);
    background: var(--shell-fill-hover);
    border-color: var(--shell-border);
}

header.app-shell-header nav.app-shell-nav.app-tabs .app-shell-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #1014ef 0%, #1e1eff 100%);
    border-color: rgba(255, 255, 255, 0.18);
}

header.app-shell-header button.app-shell-tab {
    font-family: inherit;
    cursor: pointer;
}

header.app-shell-header .app-shell-tab svg {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

header.app-shell-header .app-shell-tab:hover,
header.app-shell-header .app-shell-tab:focus-visible {
    color: var(--shell-text);
    background: var(--shell-fill-hover);
    border-color: var(--shell-border);
}

header.app-shell-header .app-shell-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #1014ef 0%, #1e1eff 100%);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 4px 18px var(--v2-btn-glow, rgba(16, 20, 239, 0.35));
}

header.app-shell-header .app-shell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    gap: 8px;
    margin-left: 0;
}

header.app-shell-header .app-shell-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 36px;
    gap: 7px;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    color: var(--shell-muted);
    background: var(--shell-fill);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

header.app-shell-header .app-shell-account svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

header.app-shell-header .app-shell-account:hover,
header.app-shell-header .app-shell-account:focus-visible {
    color: var(--shell-text);
    border-color: var(--shell-blue);
    background: var(--shell-fill-hover);
}

header.app-shell-header .app-shell-account.active {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(135deg, #1014ef 0%, #1e1eff 100%);
}

header.app-shell-header .app-shell-status[data-shell-status="hidden"] {
    display: none;
}

header.app-shell-header .app-shell-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 36px;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--shell-border);
    border-radius: 999px;
    color: var(--shell-muted);
    background: var(--shell-fill);
    font-size: 0.85rem;
    white-space: nowrap;
}

header.app-shell-header .app-shell-status > i {
    display: block;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v2-green, #27c58b);
    box-shadow: 0 0 9px rgba(39, 197, 139, 0.6);
}

/* One GPU-friendly rotation clock keeps the compact processing signal smooth.
   The prior independent bar and dot timelines drifted in and out of phase. */
header.app-shell-header .slice-loader-spinner {
    display: block;
    flex: none;
    width: 15px;
    height: 15px;
    border: 2px solid color-mix(in srgb, var(--shell-blue) 20%, transparent);
    border-top-color: var(--shell-blue);
    border-right-color: color-mix(in srgb, var(--shell-blue) 72%, var(--shell-text));
    border-radius: 50%;
    animation: slice-post-processing-spin 900ms linear infinite;
    transform: rotate(0turn);
    transform-origin: center;
    will-change: transform;
}
@keyframes slice-post-processing-spin {
    to { transform: rotate(1turn); }
}
html[data-sp-document-hidden] header.app-shell-header .slice-loader-spinner {
    animation-play-state: paused;
}
header.app-shell-header .slice-loader[hidden] .slice-loader-spinner {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    header.app-shell-header .slice-loader-spinner {
        animation: none;
        transform: rotate(.12turn);
    }
}

header.app-shell-header .app-shell-actions .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    color: var(--shell-muted);
    background: var(--shell-fill);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.15s ease, border-color 0.15s ease,
        color 0.15s ease, transform 0.1s ease;
}

header.app-shell-header .app-shell-actions .theme-toggle:hover {
    color: var(--shell-text);
    background: var(--shell-fill-hover);
    border-color: var(--shell-blue);
}

header.app-shell-header .app-shell-actions .theme-toggle:active {
    transform: scale(0.96);
}

header.app-shell-header .app-shell-actions .theme-toggle .icon-sun {
    display: block;
}

header.app-shell-header .app-shell-actions .theme-toggle .icon-moon {
    display: none;
}

html[data-theme="light"] header.app-shell-header .app-shell-actions .theme-toggle .icon-sun {
    display: none;
}

html[data-theme="light"] header.app-shell-header .app-shell-actions .theme-toggle .icon-moon {
    display: block;
}

@media (max-width: 1180px) {
    header.app-shell-header {
        padding-inline: 1.25rem;
    }

    header.app-shell-header .app-shell-nav {
        margin-left: 0;
    }

    header.app-shell-header .app-shell-tab {
        padding-inline: 0.8rem;
        font-size: 0.86rem;
    }
}

@media (min-width: 761px) and (max-width: 1350px) {
    header.app-shell-header {
        --shell-brand-column: 330px;
        column-gap: 12px;
    }

    /* Keep the five creative destinations and Posting's workflow controls on one
       readable row at common laptop widths. The nav can still scroll if a
       browser reserves unusual scrollbar or zoom space. */
    header.app-shell-header nav.app-shell-nav.app-tabs .app-shell-tab {
        gap: 6px;
        padding-inline: 0.45rem;
        font-size: 0.82rem;
    }

    header.app-shell-header nav.app-shell-nav.app-tabs .app-shell-tab svg {
        width: 14px;
        height: 14px;
    }
}

@media (min-width: 761px) and (max-width: 1050px) {
    header.app-shell-header {
        --shell-brand-column: 220px;
    }

    header.app-shell-header .app-shell-badge {
        display: none;
    }

    header.app-shell-header nav.app-shell-nav.app-tabs .app-shell-tab {
        gap: 5px;
        padding-inline: 0.35rem;
        font-size: 0.78rem;
    }

    /* At compact laptop widths the five creative destinations win over the
       explicitly idle Ready chip. Processing and terminal states remain
       visible so Attention and Cancelled cannot disappear with the loader. */
    header.app-shell-header .app-shell-status[data-status-state="ready"] {
        display: none;
    }
}

@media (min-width: 1351px) {
    header.app-shell-header {
        --shell-brand-column: 390px;
        column-gap: 20px;
    }
}

@media (max-width: 760px) {
    header.app-shell-header {
        min-height: 0;
        padding: 0.8rem 1rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        column-gap: 8px;
        flex-wrap: wrap;
        row-gap: 0.7rem;
    }

    header.app-shell-header .app-shell-brand {
        width: auto;
        max-width: 100%;
        gap: 0.55rem;
    }

    header.app-shell-header .app-shell-logo {
        width: 36px;
        height: 36px;
    }

    header.app-shell-header .app-shell-wordmark {
        font-size: 1.45rem;
    }

    header.app-shell-header .app-shell-badge {
        display: none;
    }

    header.app-shell-header .app-shell-nav {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        margin-left: 0;
        height: 36px;
        padding-bottom: 2px;
        flex-wrap: nowrap;
    }

    header.app-shell-header .app-shell-tab {
        min-height: 36px;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    header.app-shell-header .app-shell-tab svg {
        width: 14px;
        height: 14px;
    }

    header.app-shell-header .app-shell-actions {
        margin-left: auto;
    }

    header.app-shell-header .app-shell-status {
        min-height: 34px;
        padding-inline: 0.7rem;
        font-size: 0.78rem;
    }

    header.app-shell-header .app-shell-account {
        min-height: 34px;
        padding-inline: 0.65rem;
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    header.app-shell-header .app-shell-tab,
    header.app-shell-header .app-shell-account,
    header.app-shell-header .theme-toggle {
        transition-duration: 0.01ms;
    }
}

/* ========================================================================
   Shared action buttons

   These are opt-in semantic controls.  The action-buttons runtime decorates
   [data-sp-action] with the inline Lucide-style icon; keeping this language
   separate from .btn-primary prevents every form button from becoming a
   pill.  V2 tokens keep the treatment legible in both themes.
   ======================================================================== */
.sp-action[data-sp-action] {
    --sp-action-bg: var(--v2-fill, rgba(255, 255, 255, 0.04));
    --sp-action-bg-hover: var(--v2-fill-hover, rgba(255, 255, 255, 0.06));
    --sp-action-border: var(--v2-border-strong, rgba(255, 255, 255, 0.14));
    --sp-action-text: var(--v2-white, #f1f4f7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 36px;
    height: 36px;
    max-width: 100%;
    gap: 10px;
    padding: 0 24px;
    border: 1px solid var(--sp-action-border);
    border-radius: 40px;
    color: var(--sp-action-text);
    background: var(--sp-action-bg);
    font: 500 13px/1 'Manrope', system-ui, sans-serif;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 150ms ease, background-color 150ms ease,
        border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.sp-action[data-sp-action]:hover:not(:disabled):not([aria-disabled='true']),
.sp-action[data-sp-action]:focus-visible {
    background: var(--sp-action-bg-hover);
    border-color: var(--v2-blue-light, #4c4cff);
}

.sp-action[data-sp-action]:hover:not(:disabled):not([aria-disabled='true']) {
    transform: scale(1.02);
}

.sp-action[data-sp-action]:active:not(:disabled):not([aria-disabled='true']) {
    transform: scale(0.96);
}

.sp-action[data-sp-action]:focus-visible {
    outline: 3px solid var(--v2-blue-light, #4c4cff);
    outline-offset: 3px;
}

.sp-action[data-sp-action] .sp-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    transform-origin: center;
    transition: transform 150ms ease;
}

.sp-action[data-sp-action] .sp-action-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sp-action[data-sp-action='delete'] {
    color: var(--v2-red, #f36b76);
}

.sp-action[data-sp-action='delete']:hover:not(:disabled):not([aria-disabled='true']) {
    color: var(--v2-red, #f36b76);
    border-color: rgba(243, 107, 118, 0.55);
    border-color: color-mix(in srgb, var(--v2-red, #f36b76) 55%, transparent);
}

.sp-action[data-sp-action='delete']:hover:not(:disabled):not([aria-disabled='true']) .sp-action-icon {
    animation: sp-action-trash-shake 400ms ease both;
}

@keyframes sp-action-trash-shake {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    20% { transform: translateY(-2px) rotate(-10deg); }
    40% { transform: translateY(0) rotate(10deg); }
    60% { transform: translateY(-2px) rotate(-10deg); }
    80% { transform: translateY(0) rotate(0deg); }
}

.sp-action[data-sp-action='settings']:hover:not(:disabled):not([aria-disabled='true']) .sp-action-icon {
    transform: rotate(180deg);
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-duration: 400ms;
}

.sp-action[data-sp-action='share']:hover:not(:disabled):not([aria-disabled='true']) .sp-action-icon {
    transform: translateX(1px) rotate(-6deg) scale(1.04);
}

.sp-action[data-sp-action]:disabled,
.sp-action[data-sp-action][aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    filter: none;
    box-shadow: none;
}

.sp-action[data-sp-action].sp-action-compact,
.sp-action[data-sp-action][data-sp-compact='true'] {
    min-height: 30px;
    height: 30px;
    gap: 7px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
}

.sp-action[data-sp-action].sp-action-compact .sp-action-icon,
.sp-action[data-sp-action][data-sp-compact='true'] .sp-action-icon,
.sp-action[data-sp-action].sp-action-compact .sp-action-icon svg,
.sp-action[data-sp-action][data-sp-compact='true'] .sp-action-icon svg {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}

.sp-action[data-sp-action].sp-action-icon-only,
.sp-action[data-sp-action][data-sp-icon-only='true'] {
    width: 36px;
    min-width: 36px;
    padding: 0;
}

/* Keep timeline/context actions inside their existing dense affordances. */
.context-menu-item.sp-action[data-sp-action] {
    width: 100%;
    height: auto;
    min-height: 30px;
    justify-content: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
}

.crop-position-delete.sp-action[data-sp-action][data-sp-icon-only='true'] {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    border-radius: 5px;
    padding: 0;
}

#editor-modal .transcript-card-delete.sp-action[data-sp-action][data-sp-icon-only='true'] {
    width: 32px;
    min-width: 32px;
    height: 30px;
    min-height: 30px;
    border-radius: 6px;
    padding: 0;
}

.transcript-word-chip .transcript-word-remove.sp-action[data-sp-action][data-sp-icon-only='true'] {
    width: auto;
    min-width: 0;
    height: 20px;
    min-height: 20px;
    padding: 0 6px;
    border: 0;
    border-left: 1px solid rgba(103, 232, 249, 0.18);
    border-radius: 0;
    background: transparent;
}

@media (hover: none), (pointer: coarse) {
    .sp-action[data-sp-action]:hover:not(:disabled):not([aria-disabled='true']) {
        transform: none;
    }

    .sp-action[data-sp-action='delete']:hover:not(:disabled):not([aria-disabled='true']) .sp-action-icon,
    .sp-action[data-sp-action='settings']:hover:not(:disabled):not([aria-disabled='true']) .sp-action-icon,
    .sp-action[data-sp-action='share']:hover:not(:disabled):not([aria-disabled='true']) .sp-action-icon {
        animation: none;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-action[data-sp-action],
    .sp-action[data-sp-action] .sp-action-icon {
        animation: none !important;
        transition: none !important;
    }

    .sp-action[data-sp-action]:hover:not(:disabled):not([aria-disabled='true']),
    .sp-action[data-sp-action]:active:not(:disabled):not([aria-disabled='true']),
    .sp-action[data-sp-action='settings']:hover:not(:disabled):not([aria-disabled='true']) .sp-action-icon,
    .sp-action[data-sp-action='share']:hover:not(:disabled):not([aria-disabled='true']) .sp-action-icon {
        transform: none !important;
    }
}