/* Output Inspector — accessible, responsive agent-output viewer. */
#fos-output-modal.fos-output-inspector {
    padding: clamp(12px, 2.5vw, 28px);
}

.fos-output-inspector__dialog,
#fos-output-modal.fos-output-inspector .fos-output-inspector__dialog {
    display: flex;
    flex-direction: column;
    width: min(1280px, calc(100vw - 48px));
    max-width: none;
    margin: 0;
    max-height: min(94vh, 960px);
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: var(--fos-radius-lg, 16px);
    background: #fff;
    box-shadow: 0 24px 60px -12px rgba(15, 20, 32, .35);
}

.fos-output-inspector__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px 14px;
}

.fos-output-inspector__identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 13px;
}

.fos-output-inspector__agent-badge {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(108, 71, 255, .20);
    border-radius: 12px;
    color: var(--fos-primary-dark, #5535E0);
    background: linear-gradient(145deg, #f3f0ff, #e8e1ff);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .08em;
}

.fos-output-inspector__eyebrow {
    margin: 0 0 3px;
    color: var(--fos-text-dim, #6b7280);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.fos-output-inspector__header h2 {
    overflow: hidden;
    margin: 0 !important;
    color: var(--fos-text, #1d2327) !important;
    /* The modal is a detail/inspector layer over the pipeline page, not a
       page of its own — its title must not outweigh the page's own hero
       title (19px, .fos-hero__title in costudio-admin-detail.css). */
    font-size: clamp(16px, 1.6vw, 18px) !important;
    font-weight: 700 !important;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fos-output-inspector__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 33px;
    padding: 0 24px 14px;
}

.fos-output-inspector__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid #edeef1;
    border-radius: 6px;
    color: var(--fos-text-dim, #6b7280);
    background: transparent;
    font-size: 11px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fos-output-inspector__tabs {
    display: flex;
    gap: 5px;
    padding: 0 24px;
    border-bottom: 1px solid var(--fos-border, #e5e7eb);
}

.fos-output-inspector__tab {
    position: relative;
    margin: 0 0 -1px;
    padding: 11px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--fos-text-dim, #6b7280);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.fos-output-inspector__tab:hover,
.fos-output-inspector__tab:focus-visible {
    color: var(--fos-primary, #6C47FF);
}

.fos-output-inspector__tab.is-active {
    border-bottom-color: var(--fos-primary, #6C47FF);
    color: var(--fos-primary, #6C47FF);
}

.fos-output-inspector__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: clamp(18px, 2.4vw, 30px);
    background: var(--fos-bg-soft, #f9fafb);
}

.fos-output-inspector__panel {
    max-width: none;
    margin: 0;
}

.fos-output-inspector__panel[hidden] {
    display: none !important;
}

#fos-output-panel-raw,
#fos-output-panel-edit {
    max-width: 1000px;
    margin: 0 auto;
}

#fos-output-body-html {
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: var(--fos-radius, 10px);
    background: #fff;
    box-shadow: var(--fos-shadow, 0 1px 3px rgba(0, 0, 0, .06));
    color: var(--fos-text, #1d2327);
    font-size: 14px;
    line-height: 1.72;
}

#fos-output-body-html > :first-child { margin-top: 0; }
#fos-output-body-html > :last-child { margin-bottom: 0; }
#fos-output-body-html h1,
#fos-output-body-html h2,
#fos-output-body-html h3 {
    color: var(--fos-text, #1d2327);
    line-height: 1.3;
}

/* Scaled down from the design handoff's literal 22px/16px: those sat ABOVE
   the pipeline page's own hero title (19px, .fos-hero__title) and agent-row
   name (14px, .fos-pipeline-row__agent-name) — the modal is a detail layer
   over that page, its internal headings must read below its own title
   (18px) and below the page chrome around it, not compete with it. */
#fos-output-body-html h1 { font-size: 17px; font-weight: 700; }
#fos-output-body-html h2 { font-size: 17px; font-weight: 700; }
#fos-output-body-html h3 { font-size: 14.5px; font-weight: 700; }

#fos-output-body-html h4,
#fos-output-body-html h5,
#fos-output-body-html h6 {
    margin: 22px 0 8px;
    color: var(--fos-text, #1d2327);
    font-weight: 700;
    line-height: 1.35;
}

#fos-output-body-html h4 { font-size: 13.5px; }

#fos-output-body-html h5,
#fos-output-body-html h6 {
    color: var(--fos-text-sub, #50575e);
    font-size: 12px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

#fos-output-body-html p {
    margin: 0 0 14px;
    color: var(--fos-text-sub, #50575e);
    font-size: 14px;
}

#fos-output-body-html ul,
#fos-output-body-html ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

#fos-output-body-html li { margin: 4px 0; }
#fos-output-body-html li > ul,
#fos-output-body-html li > ol { margin: 4px 0; }

#fos-output-body-html a {
    color: var(--fos-primary, #6C47FF);
    text-decoration: underline;
    text-decoration-color: rgba(108, 71, 255, .35);
    text-underline-offset: 2px;
}

#fos-output-body-html a:hover,
#fos-output-body-html a:focus-visible { text-decoration-color: currentColor; }

#fos-output-body-html blockquote {
    margin: 14px 0;
    padding: 10px 16px;
    border-left: 3px solid rgba(108, 71, 255, .3);
    border-radius: 0 8px 8px 0;
    color: #3b3a52;
    background: var(--fos-primary-faint, rgba(108, 71, 255, .06));
}

#fos-output-body-html blockquote > :first-child { margin-top: 0; }
#fos-output-body-html blockquote > :last-child { margin-bottom: 0; }

#fos-output-body-html code {
    padding: .15em .4em;
    border-radius: 5px;
    color: #b93815;
    background: var(--fos-bg-soft, #f9fafb);
    font: 12.5px var(--fos-font-mono, Consolas, monospace);
}

#fos-output-body-html pre {
    overflow-x: auto;
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid #2b2f3a;
    border-radius: var(--fos-radius, 10px);
    color: #e8edf7;
    background: var(--fos-text, #1d2327);
}

#fos-output-body-html pre code {
    padding: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    font-size: 12.5px;
    line-height: 1.65;
    white-space: pre;
}

#fos-output-body-html hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--fos-border, #e5e7eb);
}

#fos-output-body-html img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--fos-radius, 10px);
}

#fos-output-body-html figure {
    margin: 20px 0;
}

#fos-output-body-html figcaption {
    margin-top: 8px;
    color: var(--fos-text-dim, #6b7280);
    font-size: 12.5px;
    text-align: center;
}

.fos-preview-image-placeholder__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 40px 20px;
    border: 2px dashed var(--fos-border-input, #d1d5db);
    border-radius: var(--fos-radius, 10px);
    background: var(--fos-bg-soft, #f9fafb);
    text-align: center;
}

.fos-preview-image-placeholder__name {
    color: var(--fos-text-sub, #50575e);
    font-size: 13px;
    font-weight: 600;
}

.fos-preview-image-placeholder__alt {
    color: var(--fos-text-dim, #6b7280);
    font-size: 12px;
}

.fos-output-inspector__preview-loading {
    padding: 40px 20px;
    color: var(--fos-text-dim, #6b7280);
    font-size: 13px;
    text-align: center;
}

.fos-output-inspector__toc {
    margin-bottom: 20px;
    padding: 18px 20px;
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: var(--fos-radius, 10px);
    background: #fff;
    box-shadow: var(--fos-shadow, 0 1px 3px rgba(0, 0, 0, .06));
}

.fos-output-inspector__toc-title {
    margin-bottom: 12px;
    color: var(--fos-text-dim, #6b7280);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fos-output-inspector__toc ul {
    column-count: 2;
    column-gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fos-output-inspector__toc-item {
    margin-bottom: 9px;
    break-inside: avoid;
}

.fos-output-inspector__toc a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #374151;
    font-size: 13px;
    text-decoration: none;
}

.fos-output-inspector__toc a::before {
    content: '';
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(108, 71, 255, .45);
}

.fos-output-inspector__toc a:hover,
.fos-output-inspector__toc a:focus-visible {
    color: var(--fos-primary, #6C47FF);
    text-decoration: underline;
}

.fos-output-inspector__toc-item--h3 { margin-left: 17px; }
.fos-output-inspector__toc-item--h3 a { color: var(--fos-text-dim, #6b7280); }
.fos-output-inspector__toc-item--h3 a::before { width: 4px; height: 4px; background: #d1d5db; }

.fos-output-inspector__table-wrap {
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: var(--fos-radius, 10px);
    overflow: auto;
}

#fos-output-body-html table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

#fos-output-body-html th,
#fos-output-body-html td {
    min-width: 64px;
    padding: 16px 18px;
    border-top: 1px solid var(--fos-border, #e5e7eb);
    text-align: left;
    vertical-align: top;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fos-text-sub, #50575e);
    overflow-wrap: anywhere;
}

#fos-output-body-html td:first-child { font-weight: 600; color: var(--fos-text, #1d2327); }

#fos-output-body-html th {
    padding: 11px 14px;
    border-top: 0;
    background: var(--fos-bg-soft, #f9fafb);
    color: var(--fos-text, #1d2327);
    font-weight: 700;
    font-size: 12px;
}

#fos-output-body-html tbody tr:first-child td { border-top: 0; }

.fos-output-inspector__raw {
    overflow: auto;
    min-height: 420px;
    margin: 0;
    padding: 22px;
    border: 1px solid #2b2f3a;
    border-radius: var(--fos-radius, 10px);
    color: #e8edf7;
    background: var(--fos-text, #1d2327);
    font: 12.5px/1.68 var(--fos-font-mono, Consolas, monospace);
    white-space: pre-wrap;
    word-break: break-word;
}

#fos-output-edit-wrap { display: flex; flex-direction: column; gap: 10px; }

#fos-output-editor {
    width: 100%;
    min-height: 440px;
    padding: 16px;
    resize: vertical;
    border-color: var(--fos-border-input, #d1d5db);
    border-radius: var(--fos-radius-sm, 7px);
    font: 13px/1.65 var(--fos-font-mono, Consolas, monospace);
}

.fos-output-inspector__hint {
    margin: 0;
    color: var(--fos-text-dim, #6b7280);
    font-size: 12px;
}

.fos-output-inspector__asset-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.fos-output-inspector__asset-card {
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: var(--fos-radius, 10px);
    background: #fff;
    box-shadow: var(--fos-shadow, 0 1px 3px rgba(0, 0, 0, .06));
}

.fos-output-inspector__asset-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--fos-border, #e5e7eb);
    background: var(--fos-bg-soft, #f9fafb);
}

.fos-output-inspector__asset-identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.fos-output-inspector__asset-header h3 {
    margin: 0;
    color: var(--fos-text, #1d2327);
    font: 700 15px/1.35 var(--fos-font, inherit);
    overflow-wrap: anywhere;
}

.fos-output-inspector__asset-body {
    padding: 16px 18px;
}

.fos-output-inspector__asset-role {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 5px;
    color: var(--fos-primary-dark, #5535E0);
    background: var(--fos-primary-light, #EAE6FF);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* editorial_role (Ciclo 3): a different kind of tag than the cover/inline
   slot badge next to it — neutral, not brand-purple, to avoid implying it's
   the same taxonomy. */
.fos-output-inspector__asset-role--function {
    color: var(--fos-text-sub, #50575e);
    background: var(--fos-bg-soft, #f9fafb);
}

.fos-output-inspector__asset-field {
    display: grid;
    grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
    gap: 14px;
    padding: 11px 0 0;
    margin-top: 9px;
    border-top: 1px solid #f1f2f5;
    color: var(--fos-text-sub, #50575e);
    font-size: 13px;
    line-height: 1.55;
}

.fos-output-inspector__asset-field:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.fos-output-inspector__asset-field strong {
    color: var(--fos-text-sub, #50575e);
    font-size: 11px;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.fos-output-inspector__asset-field span { overflow-wrap: anywhere; }

.fos-output-inspector__prompt-box {
    margin: 0 0 4px;
    padding: 14px 16px;
    border: 1px solid var(--fos-border, #e5e7eb);
    border-radius: var(--fos-radius, 10px);
    color: var(--fos-text, #1d2327);
    background: var(--fos-bg-soft, #f9fafb);
}

.fos-output-inspector__prompt-box strong {
    display: block;
    margin-bottom: 7px;
    color: var(--fos-primary, #6C47FF);
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.fos-output-inspector__prompt-box p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.fos-output-inspector__copy-prompt {
    flex: 0 0 auto;
    min-height: 32px;
}

.fos-output-inspector__footer {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--fos-border, #e5e7eb);
    background: #fff;
}

.fos-output-inspector__footer [hidden] { display: none !important; }

@media (max-width: 782px) {
    #fos-output-modal.fos-output-inspector { padding: 0; }
    .fos-output-inspector__dialog,
    #fos-output-modal.fos-output-inspector .fos-output-inspector__dialog { width: 100%; max-height: 100vh; height: 100vh; border: 0; border-radius: 0; }
    .fos-output-inspector__header { padding: 15px 16px 10px; }
    .fos-output-inspector__meta { padding: 0 16px 10px; }
    .fos-output-inspector__tabs { overflow-x: auto; padding: 0 12px; }
    .fos-output-inspector__tab { flex: 1 0 auto; }
    .fos-output-inspector__body { padding: 14px; }
    .fos-output-inspector__footer { padding: 11px 14px; }
    #fos-output-editor, .fos-output-inspector__raw { min-height: calc(100vh - 280px); }
    .fos-output-inspector__asset-header { align-items: stretch; flex-direction: column; }
    .fos-output-inspector__copy-prompt { align-self: flex-start; }
    .fos-output-inspector__asset-field { grid-template-columns: 1fr; gap: 4px; }
    .fos-output-inspector__toc ul { column-count: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fos-output-inspector__dialog { animation: none; }
}
