/* Digital Studio Agent — system-wide production workspace */

.agent-tab {
    height: calc(100dvh - var(--header-height, 56px));
    min-height: 620px;
    padding: 0 !important;
    overflow: hidden;
    font-family: "Space Grotesk", system-ui, sans-serif;
    color: var(--text-primary);
    background: var(--bg-primary);
}

.agent-tab.active {
    display: block;
}

.agent-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(218px, 248px) minmax(0, 1fr) 0;
    width: 100%;
    height: 100%;
    padding: 8px;
    overflow: hidden;
    background: var(--bg-primary);
    transition: grid-template-columns 280ms cubic-bezier(.16, 1, .3, 1);
}

.agent-shell.run-open {
    grid-template-columns: minmax(218px, 248px) minmax(0, 1fr) minmax(300px, 360px);
}

.agent-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.agent-run-head,
.agent-picker-dialog > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agent-new-chat,
.agent-approve,
.agent-picker-add {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--primary-color);
    border-radius: 999px;
    color: var(--text-inverse, #fff);
    background: var(--primary-color);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.agent-new-chat:hover,
.agent-approve:hover,
.agent-picker-add:hover {
    filter: brightness(.94);
}

.agent-new-chat:active,
.agent-approve:active,
.agent-picker-add:active,
.agent-send:active,
.agent-tool-btn:active,
.agent-icon-btn:active {
    transform: scale(.97);
}

.agent-new-chat kbd {
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--text-inverse) 75%, transparent);
    background: color-mix(in srgb, var(--text-inverse) 15%, transparent);
    font: 500 10px/1.5 "Space Grotesk", sans-serif;
}

.agent-search {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
    transition: border-color 160ms ease, background 160ms ease;
}

.agent-search:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-light));
    background: var(--bg-elevated);
}

.agent-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: 500 12px/1.3 "Space Grotesk", sans-serif;
}

.agent-history-list {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
}

.agent-history-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    width: 100%;
    margin-bottom: 3px;
    padding: 10px 10px 9px 12px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: var(--text-secondary);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.agent-history-item > button:first-child {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.agent-history-item:hover {
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

.agent-history-item.active {
    border-color: color-mix(in srgb, var(--primary-color) 25%, var(--border-light));
    color: var(--text-primary);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-elevated));
}

.agent-history-item strong {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-history-item small {
    grid-column: 1;
    color: var(--text-muted);
    font-size: 10px;
}

.agent-history-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 160ms ease;
}

.agent-history-item:hover .agent-history-actions,
.agent-history-item:focus-within .agent-history-actions {
    opacity: 1;
}

.agent-history-actions button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
}

.agent-history-actions button:hover {
    color: var(--error-color);
    background: color-mix(in srgb, var(--error-color) 10%, transparent);
}

.agent-history-empty {
    padding: 18px 10px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.agent-history-skeleton {
    display: grid;
    gap: 8px;
}

.agent-history-skeleton span {
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--bg-tertiary), var(--bg-elevated), var(--bg-tertiary));
    background-size: 200% 100%;
    animation: agent-shimmer 1.4s ease-in-out infinite;
}

.agent-conversation {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    /* One column that may shrink: with the implicit auto column the track took
       the composer's content width, and at 375 px the composer ran 200 px off
       the screen (DEVIR-9 §3/8c). */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: 20px;
    background: var(--bg-primary);
}

.agent-conversation > * {
    min-width: 0;
}

.agent-conversation-head {
    position: relative;
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px clamp(16px, 3vw, 34px);
    border-bottom: 0;
    background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
    backdrop-filter: blur(18px);
}

.agent-conversation-head::after {
    position: absolute;
    right: clamp(16px, 3vw, 34px);
    bottom: 0;
    left: clamp(16px, 3vw, 34px);
    height: 1px;
    background: var(--border-light);
    content: "";
    pointer-events: none;
}

.agent-conversation-title-row,
.agent-title-line,
.agent-head-actions,
.agent-composer-tools,
.agent-composer-submit-row {
    display: flex;
    align-items: center;
}

.agent-conversation-title-row {
    min-width: 0;
    gap: 10px;
}

.agent-conversation-title-row > div {
    min-width: 0;
}

.agent-title-line {
    gap: 9px;
}

.agent-title-line h2 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-conversation-head p {
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-status-pill,
.agent-context-count,
.agent-model-pill,
.agent-cost-pill,
.agent-step-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    white-space: nowrap;
}

.agent-status-pill {
    padding: 4px 8px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    font-size: 9px;
    font-weight: 650;
}

.agent-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--success-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-color) 15%, transparent);
}

.agent-status-pill.running .agent-status-dot {
    background: var(--primary-color);
    animation: agent-breathe 1.7s ease-in-out infinite;
}

.agent-status-pill.error .agent-status-dot {
    background: var(--error-color);
}

.agent-head-actions {
    flex: 0 0 auto;
    gap: 8px;
}

.agent-icon-btn {
    display: inline-grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
}

.agent-icon-btn:hover {
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-light));
    color: var(--primary-color);
}

.agent-chat {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.agent-empty {
    display: grid;
    max-width: 760px;
    min-height: 100%;
    align-content: center;
    gap: 25px;
    margin: 0 auto;
    padding: 48px clamp(20px, 5vw, 60px) 90px;
}

.agent-empty-mark {
    display: flex;
    width: 52px;
    height: 40px;
    align-items: flex-end;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-light));
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-elevated));
}

.agent-empty-mark span {
    width: 5px;
    border-radius: 999px;
    background: var(--primary-color);
    animation: agent-bars 1.8s ease-in-out infinite;
}

.agent-empty-mark span:nth-child(1) { height: 8px; animation-delay: -1.2s; }
.agent-empty-mark span:nth-child(2) { height: 17px; animation-delay: -.7s; }
.agent-empty-mark span:nth-child(3) { height: 12px; animation-delay: -.25s; }

.agent-empty-copy h3 {
    max-width: 620px;
    margin: 0 0 10px;
    font-size: clamp(27px, 4vw, 42px);
    font-weight: 560;
    letter-spacing: -.055em;
    line-height: 1.04;
}

.agent-empty-copy p {
    max-width: 600px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.65;
}

.agent-starter-prompts {
    display: grid;
    grid-template-columns: 1.25fr .85fr;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    background: var(--border-light);
}

.agent-starter-prompts button {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border: 0;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    font: 570 11px/1.35 "Space Grotesk", sans-serif;
    text-align: left;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease;
}

.agent-starter-prompts button:first-child {
    grid-row: span 2;
    align-items: flex-end;
}

.agent-starter-prompts button:hover {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 5%, var(--bg-elevated));
}

.agent-message-stream {
    max-width: 820px;
    margin: 0 auto;
    padding: 34px clamp(18px, 4vw, 46px) 70px;
}

.agent-message {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 27px;
    animation: agent-message-in 300ms cubic-bezier(.16, 1, .3, 1) both;
}

.agent-message.user {
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
}

.agent-message-avatar {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary-color) 28%, var(--border-light));
    border-radius: 11px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, var(--bg-elevated));
    font-size: 10px;
}

.agent-message-body {
    min-width: 0;
    color: var(--text-primary);
    font-size: 13.5px;
    line-height: 1.65;
}

.agent-message.user .agent-message-body {
    max-width: min(620px, 88%);
    padding: 11px 15px;
    border: 1px solid var(--border-light);
    border-radius: 18px 18px 5px 18px;
    background: var(--bg-secondary);
}

.agent-message-body p {
    margin: 0;
    white-space: pre-wrap;
}

.agent-message-meta {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 9px;
}

/* The pictures sent with a message (22 Oct, the owner: "images unnecessarily large"):
   a tight row of small squares, four on show, "+N" on the fourth for the rest; a press
   opens them all large in the page's photo viewer. */
.agent-message-assets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.agent-message.user .agent-message-assets {
    justify-content: flex-end;
}

.agent-message-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ds-line);
    border-radius: 10px;
    background: var(--ds-surface-2);
    cursor: zoom-in;
    transition: border-color 140ms ease, transform 140ms ease;
}

.agent-message-thumb.is-overflow {
    display: none;
}

.agent-message-thumb:hover {
    border-color: var(--ds-line-strong);
    transform: translateY(-1px);
}

.agent-message-thumb:focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
}

.agent-message-thumb img,
.agent-message-thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agent-message-thumb-more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(var(--ds-media-glass-rgb, 0, 0, 0), 0.55);
    color: var(--ds-on-media);
    font-size: 13px;
    font-weight: 650;
}

/* What the Agent delivered: small portrait tiles (3:4, owner 2026-09-23: most of what is
   made is a 3:4 poster and a square cut its headline), a grid that fills the line — they
   were drawn one per row at the drawer's full width. Past two rows the rest wait behind
   "+N içerik daha". */
.agent-result-assets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
    max-width: 520px;
    margin-top: 8px;
}

.agent-result-assets.is-folded > :nth-child(n + 9) {
    display: none;
}

.agent-message-asset,
.agent-result-asset {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.agent-message-asset img,
.agent-message-asset video,
.agent-result-asset img,
.agent-result-asset video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agent-delivery-count {
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--ds-ink-rgb), 0.07);
    color: var(--ds-muted);
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.agent-delivery-more {
    margin-top: 8px;
    padding: 5px 12px;
    border: 1px solid var(--ds-line);
    border-radius: 999px;
    background: none;
    color: var(--ds-ink-2);
    font: 600 11px/1.2 "Space Grotesk", sans-serif;
    cursor: pointer;
}

.agent-delivery-more:hover {
    border-color: var(--ds-line-strong);
    color: var(--ds-ink);
}

/* A long answer, a few lines and "Devamı". */
.agent-message-text.is-clamped:not(.is-open) p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.agent-message-more {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-accent-text);
    font: 600 11.5px/1.4 "Space Grotesk", sans-serif;
    cursor: pointer;
}

.agent-message-more:hover {
    text-decoration: underline;
}

/* The plan in the chat: a tidy card — what will be made, with what, for how much; its
   state; the approval while it waits; one line of progress once it runs. */
.agent-inline-plan {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--ds-line);
    border-radius: 14px;
    background: var(--ds-surface-2);
}

.agent-inline-plan[data-status="awaiting_approval"] {
    border-color: rgba(var(--ds-accent-rgb), 0.45);
}

.agent-inline-plan-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 8px;
    background: rgba(var(--ds-accent-rgb), 0.14);
    color: var(--ds-accent);
    font-size: 11px;
}

.agent-inline-plan-text {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.agent-inline-plan-text strong {
    overflow: hidden;
    color: var(--ds-ink);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-inline-plan-text small {
    color: var(--ds-muted);
    font-size: 11px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

/* Its state, a third line under what it makes: "● Onay bekliyor", "● Üretiliyor %40 · 2/5 adım". */
.agent-inline-plan-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: var(--ds-muted);
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.agent-inline-plan-state::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.agent-inline-plan-state:empty {
    display: none;
}

.agent-inline-plan[data-status="awaiting_approval"] .agent-inline-plan-state,
.agent-inline-plan[data-status="approved"] .agent-inline-plan-state,
.agent-inline-plan[data-status="queued"] .agent-inline-plan-state,
.agent-inline-plan[data-status="running"] .agent-inline-plan-state {
    color: var(--ds-accent-text);
}

.agent-inline-plan[data-status="completed"] .agent-inline-plan-state {
    color: var(--ds-ok);
}

.agent-inline-plan[data-status="failed"] .agent-inline-plan-state,
.agent-inline-plan[data-status="needs_attention"] .agent-inline-plan-state {
    color: var(--ds-warn);
}

.agent-inline-plan-progress {
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(var(--ds-ink-rgb), 0.08);
}

.agent-inline-plan-progress[hidden] {
    display: none;
}

.agent-inline-plan-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ds-accent);
    transition: width 0.6s ease;
}

.agent-inline-plan-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.agent-inline-plan-actions button[hidden] {
    display: none;
}

/* The chat in the panel's drawer (380 px, 22 Oct): a page-wide stream's paddings and
   gaps made it read loose and crude in a column. One rhythm — 24 px marks, 13 px text at
   a readable measure, quiet times, user bubbles that hug their text. */
.unified-agent-chat .agent-message-stream {
    max-width: none;
    margin: 0;
    padding: 2px 0 8px;
}

.unified-agent-chat .agent-message {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.unified-agent-chat .agent-message.user {
    grid-template-columns: minmax(0, 1fr);
}

.unified-agent-chat .agent-message-avatar {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 9.5px;
}

.unified-agent-chat .agent-message-body {
    color: var(--ds-ink);
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.unified-agent-chat .agent-message.user .agent-message-body {
    max-width: 86%;
    padding: 9px 12px;
    border-color: var(--ds-line);
    border-radius: 16px 16px 4px 16px;
    background: var(--ds-surface-2);
}

.unified-agent-chat .agent-message-meta {
    margin-top: 4px;
    color: var(--ds-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.unified-agent-chat .agent-message.user .agent-message-meta {
    text-align: right;
}

.unified-agent-chat .agent-delivery-head {
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.unified-agent-chat .agent-delivery-head strong {
    font-size: 12.5px;
    font-weight: 650;
}

.agent-memory-candidates {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.agent-memory-candidates button {
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    font: 600 10px/1.2 "Space Grotesk", sans-serif;
    cursor: pointer;
}

.agent-memory-candidates button:hover {
    border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-light));
    color: var(--primary-color);
}

.agent-memory-candidates button:disabled {
    opacity: .65;
    cursor: default;
}

/* The episode engine's suggestion (H2): inside the message, the plan's way —
   a hairline, three parts, nothing boxed. */
.agent-episode {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--border-light);
}

.agent-episode-part {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.agent-episode-part > strong {
    color: var(--text-secondary);
    font: 600 10px/1.2 "Space Grotesk", sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.agent-episode textarea,
.agent-episode-event input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;
    resize: vertical;
}

.agent-episode .agent-memory-candidates {
    margin-top: 0;
    align-items: center;
}

.agent-episode-note,
.agent-episode-decided {
    margin: 0;
    color: var(--text-secondary);
    font-size: 11px;
}

.agent-episode-event {
    display: grid;
    gap: 6px;
}

.agent-episode-next {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.agent-episode-next strong {
    font-weight: 600;
}

.agent-episode-next span {
    color: var(--text-secondary);
}

.agent-episode-next:hover {
    border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-light));
}

.agent-inline-error,
.agent-fatal-error {
    color: var(--error-color);
}

.agent-inline-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--error-color) 25%, var(--border-light));
    border-radius: 14px;
    background: color-mix(in srgb, var(--error-color) 6%, transparent);
    font-size: 12px;
}

.agent-fatal-error {
    display: grid;
    max-width: 460px;
    min-height: 100%;
    align-content: center;
    justify-items: start;
    gap: 10px;
    margin: 0 auto;
    padding: 30px;
}

.agent-fatal-error i { font-size: 22px; }
.agent-fatal-error h3,
.agent-fatal-error p { margin: 0; }
.agent-fatal-error p { color: var(--text-secondary); line-height: 1.6; }
.agent-fatal-error button {
    padding: 8px 13px;
    border: 0;
    border-radius: 999px;
    color: var(--text-inverse, #fff);
    background: var(--primary-color);
    cursor: pointer;
}

.agent-delivery .agent-message-avatar {
    color: var(--success-color);
    border-color: color-mix(in srgb, var(--success-color) 30%, var(--border-light));
}

.agent-inline-plan-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.agent-inline-plan-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--ds-line-strong);
    border-radius: 999px;
    color: var(--ds-ink-2);
    background: transparent;
    font: 600 11.5px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.agent-inline-plan-actions button:hover:not(:disabled) {
    border-color: var(--ds-ink-2);
    color: var(--ds-ink);
}

.agent-inline-plan-actions button:focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
}

.agent-inline-plan-actions .agent-inline-plan-approve {
    border-color: var(--ds-accent);
    background: var(--ds-accent);
    color: var(--ds-accent-ink);
}

.agent-inline-plan-actions .agent-inline-plan-approve:hover:not(:disabled) {
    border-color: var(--ds-accent-hover);
    background: var(--ds-accent-hover);
    color: var(--ds-accent-ink);
}

.agent-inline-plan-actions .agent-inline-plan-approve i {
    font-size: 9px;
}

.agent-inline-plan-actions button:disabled {
    cursor: default;
    opacity: 0.5;
}

/* "Planı incele" is the quiet link at the end. */
.agent-inline-plan-actions .agent-inline-plan-open {
    margin-left: auto;
    border-color: transparent;
    color: var(--ds-accent-text);
}

.agent-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.agent-thinking-bars {
    display: flex;
    align-items: center;
    gap: 3px;
}

.agent-thinking-bars span {
    width: 3px;
    height: 11px;
    border-radius: 999px;
    background: var(--primary-color);
    animation: agent-bars 1.25s ease-in-out infinite;
}

.agent-thinking-bars span:nth-child(2) { animation-delay: 150ms; }
.agent-thinking-bars span:nth-child(3) { animation-delay: 300ms; }

.agent-composer-wrap {
    padding: 8px clamp(16px, 4vw, 42px) 13px;
    background: linear-gradient(to top, var(--bg-primary) 72%, transparent);
}

.agent-composer-assets {
    display: flex;
    max-width: 780px;
    gap: 7px;
    margin: 0 auto 7px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.agent-composer-asset {
    position: relative;
    width: 68px;
    height: 54px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-secondary);
}

.agent-composer-asset img,
.agent-composer-asset video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agent-composer-asset button {
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--ds-ink);
    background: rgba(var(--ds-surface-rgb), 0.94);
    font-size: 8px;
    cursor: pointer;
}

.agent-composer-asset .agent-asset-note-toggle {
    top: auto;
    right: auto;
    bottom: 3px;
    left: 3px;
    font-size: 9px;
}

.agent-composer-asset .agent-asset-note-toggle.has-note {
    background: var(--primary-color);
}

.agent-asset-note {
    max-width: 780px;
    margin: 0 auto 7px;
    padding: 8px 10px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-secondary);
}

.agent-asset-note label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-size: 12px;
}

.agent-asset-note-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.agent-asset-note-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 9px;
    border: 1px solid var(--border-medium);
    border-radius: 9px;
    color: var(--text-primary);
    background: var(--bg-elevated);
    font: inherit;
    font-size: 13px;
}

.agent-asset-note-row button {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 9px;
    color: var(--text-primary);
    background: var(--bg-elevated);
    font-size: 12px;
    cursor: pointer;
}

.agent-composer {
    max-width: 780px;
    margin: 0 auto;
    padding: 12px 12px 9px;
    border: 1px solid var(--border-medium);
    border-radius: 22px;
    background: var(--bg-elevated);
    box-shadow: 0 16px 42px -29px color-mix(in srgb, var(--text-primary) 35%, transparent);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.agent-composer:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 52%, var(--border-medium));
    box-shadow: 0 18px 46px -30px color-mix(in srgb, var(--primary-color) 36%, transparent);
}

.agent-composer textarea {
    display: block;
    width: 100%;
    max-height: 180px;
    min-height: 34px;
    resize: none;
    overflow-y: auto;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: 500 13.5px/1.55 "Space Grotesk", sans-serif;
}

.agent-composer textarea::placeholder {
    color: var(--text-muted);
}

.agent-composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 7px;
}

.agent-composer-tools,
.agent-composer-submit-row {
    gap: 7px;
}

.agent-tool-btn {
    display: inline-flex;
    height: 30px;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    font: 600 10px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
}

.agent-tool-btn:hover {
    border-color: color-mix(in srgb, var(--primary-color) 38%, var(--border-light));
    color: var(--primary-color);
}

/* Model picker — a pinned selection reads as active without shouting. */
.agent-tool-btn.is-pinned {
    border-color: color-mix(in srgb, var(--primary-color) 52%, var(--border-light));
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-secondary));
}

.agent-tool-btn.is-pinned span {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-composer {
    position: relative;
}

.agent-model-panel {
    position: absolute;
    z-index: 40;
    right: 0;
    bottom: calc(100% + 9px);
    left: 0;
    max-height: min(58vh, 460px);
    padding: 14px;
    overflow-y: auto;
    border: 1px solid var(--border-medium);
    border-radius: 18px;
    background: var(--bg-elevated, var(--bg-secondary));
    box-shadow: 0 28px 64px -34px rgba(0, 0, 0, .7);
}

.agent-model-panel[hidden] {
    display: none;
}

.agent-model-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.agent-model-head strong {
    color: var(--text-primary);
    font: 600 12px/1.4 "Space Grotesk", sans-serif;
}

.agent-model-head p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font: 500 10.5px/1.5 "Space Grotesk", sans-serif;
}

.agent-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.agent-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.agent-switch-track {
    position: relative;
    width: 34px;
    height: 19px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--border-medium);
    transition: background 160ms ease;
}

.agent-switch-track::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--text-inverse, #fff);
    transition: transform 160ms ease;
    content: "";
}

.agent-switch input:checked + .agent-switch-track {
    background: var(--primary-color);
}

.agent-switch input:checked + .agent-switch-track::after {
    transform: translateX(15px);
}

.agent-switch input:focus-visible + .agent-switch-track {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.agent-switch-label {
    color: var(--text-secondary);
    font: 600 10px/1 "Space Grotesk", sans-serif;
    white-space: nowrap;
}

/* Two halves side by side: stills left, motion right, one rule between them.
   Reads shorter than a stack and gives each medium the same weight. */
.agent-model-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-top: 13px;
    transition: opacity 160ms ease;
}

.agent-model-group {
    /* flex-basis 0 + min-width 0 so a long model name scrolls inside its
       select instead of making one half wider than the other. */
    min-width: 0;
    flex: 1 1 0;
}

.agent-model-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border-light);
}

@media (max-width: 620px) {
    .agent-model-body {
        flex-direction: column;
        gap: 14px;
    }

    .agent-model-group {
        width: 100%;
        flex: 0 0 auto;
    }

    .agent-model-divider {
        width: 100%;
        height: 1px;
        align-self: auto;
    }
}

.agent-model-body.is-disabled {
    opacity: .45;
}

.agent-model-group h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    color: var(--text-secondary);
    font: 600 10px/1 "Space Grotesk", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.agent-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.agent-field {
    display: grid;
    gap: 5px;
}

.agent-field[hidden] {
    display: none;
}

.agent-field > span {
    color: var(--text-muted);
    font: 600 9.5px/1 "Space Grotesk", sans-serif;
}

.agent-field select {
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: 500 11px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
}

.agent-field select:focus-visible {
    border-color: var(--primary-color);
    outline: 0;
}

.agent-field select:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.agent-field optgroup {
    color: var(--text-muted);
    background: var(--bg-primary);
    font: 600 10px/1 "Space Grotesk", sans-serif;
}

.agent-field optgroup option {
    color: var(--text-primary);
    font-weight: 500;
}

.agent-model-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid var(--border-light);
}

.agent-model-note {
    margin: 0;
    color: var(--text-muted);
    font: 500 10px/1.55 "Space Grotesk", sans-serif;
}

.agent-model-save {
    display: inline-flex;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    font: 600 10px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease;
}

.agent-model-save:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-light));
    color: var(--primary-color);
}

.agent-model-save:disabled {
    cursor: default;
    opacity: .55;
}

.agent-model-save.is-saved {
    border-color: color-mix(in srgb, var(--success-color, #33c481) 45%, var(--border-light));
    color: var(--success-color, #33c481);
}

/* ── Paket paneli ────────────────────────────────────────────────────────────
   Model panelinin kalıbını kullanır; buradakiler yalnızca onda karşılığı
   olmayan parçalar: sekme şeridi, kalem listesi ve maliyet satırı. */

.agent-package-panel {
    max-height: min(72vh, 560px);
}

.agent-package-tabs {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border-light);
    /* Sarılıyor, kaydırılmıyor: dokuzuncu sekme (Film) yatay kaydırmada
       görünmüyordu ve devre dışı bir sekmeyi kimse aramaz. Satır sayısı
       seçimle değişmediği için panel yüksekliği de oynamıyor. */
    flex-wrap: wrap;
}

.agent-package-tab {
    flex: 0 0 auto;
    padding: 6px 11px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    font: 600 10px/1 "Space Grotesk", sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.agent-package-tab:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-light));
    color: var(--primary-color);
}

.agent-package-tab.is-active,
.agent-package-tab.active {
    border-color: color-mix(in srgb, var(--primary-color) 52%, var(--border-light));
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-secondary));
}

.agent-package-tab:disabled {
    cursor: default;
    opacity: .5;
}

.agent-package-tab small {
    margin-left: 5px;
    font-size: 8.5px;
    font-weight: 500;
    opacity: .8;
}

.agent-package-items,
.agent-package-roles {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 9px;
    padding: 0;
    list-style: none;
}

.agent-package-items li,
.agent-package-roles li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    border: 1px solid var(--border-light);
    border-radius: 11px;
    background: var(--bg-secondary);
}

.agent-package-items li strong,
.agent-package-roles li span:first-child {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--text-primary);
    font: 600 10.5px/1.4 "Space Grotesk", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-package-items li em {
    flex: 0 0 auto;
    color: var(--text-muted);
    font: 500 9.5px/1 "Space Grotesk", sans-serif;
    font-style: normal;
}

.agent-package-items li .agent-package-count {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    font: 700 9.5px/1.5 "Space Grotesk", sans-serif;
}

.agent-package-drop {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-muted);
    background: transparent;
    font-size: 9px;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease;
}

.agent-package-drop:hover {
    border-color: color-mix(in srgb, var(--danger-color, #e5484d) 45%, var(--border-light));
    color: var(--danger-color, #e5484d);
}

.agent-package-roles select {
    flex: 0 0 auto;
    max-width: 150px;
}

.agent-package-empty {
    margin: 0 0 9px;
    color: var(--text-muted);
    font: 500 10px/1.55 "Space Grotesk", sans-serif;
}

/* Bir kalemin neden düştüğü panelin kendisinde yazar; koşu başladıktan sonra
   aynı cümleler `preference_notes` olarak onay ekranına da gider. */
.agent-package-notes {
    margin-top: 11px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--warning-color, #e2a03f) 32%, var(--border-light));
    border-radius: 12px;
    background: color-mix(in srgb, var(--warning-color, #e2a03f) 7%, transparent);
}

.agent-package-notes p {
    margin: 0;
    color: var(--text-secondary);
    font: 500 10px/1.55 "Space Grotesk", sans-serif;
}

.agent-package-notes p + p {
    margin-top: 4px;
}

.agent-package-cost {
    flex: 0 0 auto;
    color: var(--text-primary);
    font: 700 12px/1 "Space Grotesk", sans-serif;
}

.agent-context-count {
    padding: 5px 8px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    font-size: 9px;
    font-weight: 700;
}

.agent-composer-hint,
.agent-disclaimer {
    color: var(--text-muted);
    font-size: 9px;
}

.agent-send {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--text-inverse, #fff);
    background: var(--primary-color);
    cursor: pointer;
    transition: opacity 160ms ease, transform 160ms ease;
}

.agent-send:disabled,
.agent-approve:disabled,
.agent-picker-add:disabled {
    cursor: not-allowed;
    opacity: .38;
}

.agent-disclaimer {
    max-width: 780px;
    margin: 6px auto 0;
    text-align: center;
}

.agent-run-panel {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-left: 1px solid var(--border-light);
    background: var(--bg-secondary);
    opacity: 0;
    transform: translateX(14px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 280ms cubic-bezier(.16, 1, .3, 1);
}

.agent-shell.run-open .agent-run-panel {
    margin-left: 8px;
    border-radius: 20px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.agent-run-head {
    min-height: 72px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--border-light);
}

.agent-run-head h3,
.agent-picker-dialog h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.025em;
}

.agent-run-body {
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
}

.agent-run-empty {
    display: grid;
    min-height: 260px;
    place-content: center;
    gap: 12px;
    color: var(--text-muted);
    text-align: center;
}

.agent-run-empty i {
    color: var(--primary-color);
    font-size: 22px;
}

.agent-run-empty p {
    max-width: 230px;
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
}

.agent-budget-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    margin-bottom: 17px;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: var(--border-light);
}

.agent-budget-summary > div {
    padding: 12px;
    background: var(--bg-elevated);
}

.agent-budget-summary span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 9px;
}

.agent-budget-summary strong {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.025em;
}

.agent-budget-summary small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 7.5px;
    line-height: 1.3;
}

.agent-run-progress {
    height: 3px;
    margin: 0 0 17px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-tertiary);
}

.agent-run-progress span {
    display: block;
    width: var(--agent-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--primary-color);
    transition: transform 260ms ease;
    transform-origin: left;
}

.agent-step-list {
    display: grid;
}

.agent-step {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--border-light);
}

.agent-step:first-child {
    border-top: 0;
}

.agent-step-index {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid var(--border-medium);
    border-radius: 50%;
    color: var(--text-muted);
    background: var(--bg-elevated);
    font-size: 8px;
    font-weight: 750;
}

.agent-step.running .agent-step-index {
    border-color: var(--primary-color);
    color: var(--primary-color);
    animation: agent-breathe 1.6s ease-in-out infinite;
}

.agent-step.completed .agent-step-index {
    border-color: color-mix(in srgb, var(--success-color) 45%, var(--border-light));
    color: var(--success-color);
}

.agent-step.failed .agent-step-index,
.agent-step.waiting_user .agent-step-index {
    border-color: color-mix(in srgb, var(--error-color) 45%, var(--border-light));
    color: var(--error-color);
}

.agent-step-content {
    min-width: 0;
}

.agent-step-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.agent-step-title strong {
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
}

.agent-step-state {
    padding: 3px 6px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    font-size: 8px;
    font-weight: 700;
}

.agent-step-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.agent-model-pill,
.agent-cost-pill,
.agent-scene-pill,
.agent-format-pill,
.agent-source-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    font-size: 8px;
    font-weight: 620;
    white-space: nowrap;
}

.agent-model-pill,
.agent-scene-pill {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 24%, var(--border-light));
    background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-elevated));
}

/* Delivery: preview, per-item and bulk download ------------------------ */

.agent-delivery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

/* Two switches on one line under the video column. They wrap rather than
   overflow, because the labels are Turkish and grow with translation. */
.agent-switch-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    /* Full panel width, below both columns: three Turkish labels do not fit
       inside the video column and the third one dropped to its own line. */
    padding: 11px 14px 0;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

/* Same switch as the panel header, sized down to sit inside a field group. */
.agent-switch-sm .agent-switch-track {
    width: 28px;
    height: 16px;
}

.agent-switch-sm .agent-switch-track::after {
    width: 12px;
    height: 12px;
}

.agent-switch-sm input:checked + .agent-switch-track::after {
    transform: translateX(12px);
}

.agent-switch-sm {
    gap: 7px;
}

/* Disabled by the master switch: still legible, clearly not live. */
.agent-switch input:disabled + .agent-switch-track {
    opacity: .45;
}

.agent-switch:has(input:disabled) {
    cursor: default;
}

.agent-switch:has(input:disabled) .agent-switch-label {
    opacity: .5;
}

/* The videoisation prompt sits beside the bulk download in the delivery head,
   so it reads as a sibling action rather than a second, competing style. */
.agent-copy-prompt,
.agent-bulk-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, var(--border-light));
    border-radius: 999px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-elevated));
    font-size: 9px;
    font-weight: 640;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease;
}

.agent-copy-prompt:hover,
.agent-bulk-download:hover {
    background: color-mix(in srgb, var(--primary-color) 16%, var(--bg-elevated));
}

.agent-copy-prompt:focus-visible,
.agent-bulk-download:focus-visible,
.agent-asset-download:focus-visible,
.agent-asset-open:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.agent-result-asset,
.agent-message-asset {
    position: relative;
}

.agent-asset-open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.agent-asset-download {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--ds-line-strong);
    border-radius: 50%;
    color: var(--ds-on-media);
    background: rgba(0, 0, 0, 0.62);
    font-size: 9px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease, background 140ms ease;
}

.agent-result-asset:hover .agent-asset-download,
.agent-message-asset:hover .agent-asset-download,
.agent-asset-download:focus-visible {
    opacity: 1;
}

.agent-asset-download:hover {
    background: var(--primary-color);
}

/* Touch devices have no hover, so the control stays visible. */
@media (hover: none) {
    .agent-asset-download { opacity: 1; }
}

/* The operator's verdict on a delivered picture (Faz 4) — the brand's taste.
   Top right: the "Bakılmalı" mark holds the bottom left of a flagged picture. */
.agent-asset-taste {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 4;
    display: inline-flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 140ms ease;
}

.agent-result-asset:hover .agent-asset-taste,
.agent-asset-taste:focus-within,
.agent-asset-taste:has(.active) {
    opacity: 1;
}

.agent-asset-taste-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--ds-line-strong);
    border-radius: 50%;
    color: var(--ds-on-media);
    background: rgba(0, 0, 0, 0.62);
    font-size: 9px;
    cursor: pointer;
}

.agent-asset-taste-btn:hover,
.agent-asset-taste-btn.active {
    background: var(--primary-color);
}

@media (hover: none) {
    .agent-asset-taste { opacity: 1; }
}

/* A delivered picture the board flagged. The mark is on the image itself
   because that is where it is looked at — a chip in a summary panel elsewhere
   was missed, and a wrong pack shipped inside a finished campaign. */
.agent-asset-flagged {
    outline: 3px solid rgba(var(--ds-danger-rgb), 0.85);
    outline-offset: -3px;
    border-radius: inherit;
}

.agent-asset-flag {
    position: absolute;
    left: 5px;
    bottom: 5px;
    z-index: 3;
    white-space: nowrap; /* one line on a narrow card (25 Oct: "Bakıl-malı" over the picture) */
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 36px);
    padding: 4px 8px;
    border-radius: 7px;
    background: rgba(var(--ds-danger-rgb), 0.92);
    color: var(--ds-bg);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    cursor: help;
    pointer-events: auto;
}

.agent-asset-flag i {
    font-size: 0.72rem;
}

.agent-lightbox .agent-lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 88vw;
    max-height: 82vh;
}

.agent-lightbox .agent-lightbox-stage img,
.agent-lightbox .agent-lightbox-stage video {
    max-width: 88vw;
    max-height: 82vh;
    border-radius: 10px;
    object-fit: contain;
}

.agent-lightbox .agent-lightbox-stage {
    overflow: hidden;
    touch-action: none;
}

.agent-lightbox .agent-lightbox-stage img {
    transition: transform 120ms ease-out;
    transform-origin: center;
    user-select: none;
}

/* While panning the transition would lag the pointer. */
.agent-lightbox .agent-lightbox-stage.zoomed img {
    transition: none;
    cursor: grab;
}

.agent-lightbox .agent-lightbox-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
}

.agent-lightbox .agent-lightbox-counter,
.agent-lightbox .agent-lightbox-zoom {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.agent-lightbox-actions {
    display: inline-flex;
    gap: 6px;
}

.agent-lightbox-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: var(--ds-on-media);
    background: rgba(255, 255, 255, 0.06);
    font-size: 9px;
    font-weight: 620;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.agent-lightbox-action:hover {
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    background: color-mix(in srgb, var(--primary-color) 26%, transparent);
}

.agent-lightbox-action:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .agent-lightbox .agent-lightbox-bar { gap: 6px 10px; }
    .agent-lightbox-action span { display: none; }
}

/* Quality repair proposal ---------------------------------------------- */

.agent-repair {
    margin: 10px 0 2px;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--warning-color, var(--primary-color)) 38%, var(--border-light));
    border-radius: 12px;
    background: color-mix(in srgb, var(--warning-color, var(--primary-color)) 9%, var(--bg-elevated));
}

.agent-repair.blocked {
    border-color: color-mix(in srgb, var(--error-color) 34%, var(--border-light));
    background: color-mix(in srgb, var(--error-color) 8%, var(--bg-elevated));
}

.agent-quality-limited {
    border-color: color-mix(in srgb, var(--warning-color, #d59b42) 44%, transparent);
}

.agent-quality-limited.waived {
    border-color: color-mix(in srgb, var(--success-color, #4c9f70) 44%, transparent);
}

.agent-quality-limited.waived .agent-repair-head i {
    color: var(--success-color, #4c9f70);
}

.agent-quality-limited small {
    display: block;
    margin-top: .45rem;
    color: var(--text-secondary);
}

.agent-waiver-receipt {
    margin-top: .8rem;
    padding: .8rem;
    border: 1px solid color-mix(in srgb, var(--success-color, #4c9f70) 38%, transparent);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--success-color, #4c9f70) 7%, transparent);
}

.agent-waiver-receipt > div {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.agent-waiver-receipt dl { margin: .65rem 0 0; }
.agent-waiver-receipt dl div { display: grid; grid-template-columns: 7rem 1fr; gap: .6rem; }
.agent-waiver-receipt dt { color: var(--text-secondary); }
.agent-waiver-receipt dd { margin: 0; overflow-wrap: anywhere; }

.agent-repair-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-size: 9px;
}

.agent-repair-head i { color: var(--warning-color, var(--primary-color)); }
.agent-repair.blocked .agent-repair-head i { color: var(--error-color); }

.agent-repair p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1.5;
}

/* Teslim paketi. The panel's own box, in the neutral register rather than the
   warning one: a finished delivery is not an alarm. */
.agent-delivery {
    border-color: color-mix(in srgb, var(--success-color, #4c9f70) 32%, var(--border-light));
    background: color-mix(in srgb, var(--success-color, #4c9f70) 6%, var(--bg-elevated));
}

.agent-delivery .agent-repair-head i { color: var(--success-color, #4c9f70); }

.agent-delivery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.agent-delivery-error {
    color: var(--error-color);
}

.agent-delivery-detail {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 9px;
}

.agent-delivery-receipt {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-delivery-receipt li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-light) 60%, transparent);
    color: var(--text-primary);
    font-size: 9px;
}

.agent-delivery-receipt li span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-delivery-receipt li em {
    color: var(--text-muted);
    font-size: 8px;
    font-style: normal;
}

.agent-video-shots {
    margin: 8px 0 0;
    padding-left: 14px;
    color: var(--text-primary);
    font-size: 9px;
    line-height: 1.55;
}

.agent-video-shots li {
    margin-bottom: 4px;
}

.agent-video-shots span {
    display: block;
    color: var(--text-secondary);
    font-size: 8px;
}

.agent-video-shots small {
    display: block;
    color: var(--text-secondary);
    font-size: 8px;
    opacity: 0.8;
}

.agent-video-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 2px;
}

.agent-video-settings label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--text-secondary);
    font-size: 8px;
}

.agent-video-settings input,
.agent-video-settings select {
    min-width: 110px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--surface-color, rgba(255, 255, 255, 0.04));
    color: var(--text-primary);
    font-size: 9px;
}

.agent-repair-targets {
    margin: 8px 0 0;
    padding-left: 14px;
    color: var(--text-primary);
    font-size: 9px;
    line-height: 1.55;
}

.agent-repair-targets ul {
    margin: 2px 0 6px;
    padding-left: 13px;
    color: var(--text-secondary);
    font-size: 8px;
}

.agent-repair-cost {
    margin-left: 6px;
    color: var(--text-secondary);
    font-size: 8px;
}

.agent-repair-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 8px;
}

.agent-repair-ok { color: var(--success-color); }
.agent-repair-warn { color: var(--warning-color, var(--primary-color)); }

.agent-repair-apply {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    color: var(--ds-accent-ink);
    background: var(--primary-color);
    font-size: 9px;
    font-weight: 650;
    cursor: pointer;
}

.agent-repair-apply:hover { filter: brightness(1.08); }

/* "Olduğu gibi kabul et" beside a repair: the operator's other way forward. */
.agent-repair-apply.secondary {
    margin-left: 6px;
    color: var(--primary-color);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.agent-quality-flagged .agent-repair-foot { justify-content: flex-end; }

.agent-repair-apply:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.agent-input-roles {
    display: grid;
    gap: 6px;
    margin: 10px 0 2px;
    padding: 9px 10px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-elevated);
}

.agent-input-roles strong {
    color: var(--text-primary);
    font-size: 10px;
}

.agent-input-roles p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1.5;
}

.agent-input-roles ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-input-roles li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 9px;
}

.agent-input-role-name {
    overflow: hidden;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-input-roles select {
    flex: 0 0 auto;
    padding: 3px 6px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-surface, var(--bg-elevated));
    color: var(--text-primary);
    font-size: 9px;
}

.agent-routing-notes {
    display: grid;
    gap: 5px;
    margin: 10px 0 2px;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--warning-color, var(--primary-color)) 32%, var(--border-light));
    border-radius: 12px;
    background: color-mix(in srgb, var(--warning-color, var(--primary-color)) 8%, var(--bg-elevated));
}

.agent-routing-notes p {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--text-primary);
    font-size: 9px;
    line-height: 1.5;
}

.agent-routing-notes i {
    margin-top: 2px;
    color: var(--warning-color, var(--primary-color));
}

/* Whose reading won (M3): the planner's readings the server refused, folded. */
.agent-overruled {
    margin: 8px 0 2px;
    color: var(--text-secondary);
    font-size: 10px;
}

.agent-overruled summary {
    cursor: pointer;
    color: var(--text-secondary);
}

.agent-overruled p {
    margin: 6px 0 4px;
    line-height: 1.5;
}

.agent-overruled ul {
    display: grid;
    gap: 3px;
    margin: 0;
    padding-left: 14px;
}

.agent-overruled code {
    font-size: 10px;
    overflow-wrap: anywhere;
}

.agent-step-note {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 7px;
    color: var(--text-secondary);
    font-size: 8px;
    line-height: 1.5;
}

.agent-step-note i {
    margin-top: 2px;
    color: var(--primary-color);
}

.agent-scene-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.agent-scene-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    font-size: 8px;
    font-weight: 620;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.agent-scene-action:hover:not(:disabled) {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-light));
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-elevated));
}

.agent-scene-action:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.agent-scene-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.agent-scene-action.locked {
    color: var(--warning-color, var(--primary-color));
    border-color: color-mix(in srgb, var(--warning-color, var(--primary-color)) 40%, var(--border-light));
    background: color-mix(in srgb, var(--warning-color, var(--primary-color)) 10%, var(--bg-elevated));
}

/* Scene timeline ------------------------------------------------------- */

.agent-timeline {
    margin: 10px 0 12px;
    padding: 9px 10px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-elevated);
}

.agent-timeline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 9px;
}

.agent-timeline-head strong {
    color: var(--text-primary);
    font-weight: 680;
}

.agent-timeline-contract {
    color: var(--text-secondary);
    font-size: 8px;
    text-align: right;
}

.agent-scene-strip {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-scene {
    display: grid;
    gap: 1px;
    flex: 1 1 var(--agent-scene-share, 100%);
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.agent-scene-index {
    color: var(--primary-color);
    font-size: 8px;
    font-weight: 700;
}

.agent-scene-label {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-scene-duration {
    color: var(--text-secondary);
    font-size: 8px;
}

.agent-scene.running {
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-light));
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-secondary));
}

.agent-scene.completed {
    border-color: color-mix(in srgb, var(--success-color) 34%, var(--border-light));
}

.agent-scene.failed {
    border-color: color-mix(in srgb, var(--error-color) 40%, var(--border-light));
}

/* Narrow screens cannot hold six proportional shots side by side. */
@media (max-width: 640px) {
    .agent-scene-strip {
        flex-wrap: wrap;
    }

    .agent-scene {
        flex: 1 1 calc(50% - 4px);
    }
}

.agent-step-error {
    margin-top: 7px;
    color: var(--error-color);
    font-size: 9px;
    line-height: 1.45;
}

.agent-step-review {
    display: grid;
    gap: 3px;
    margin-top: 8px;
    padding: 8px 9px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, var(--border-light));
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 5%, var(--bg-elevated));
}

.agent-step-review.limited {
    border-color: color-mix(in srgb, var(--warning-color, #f59e0b) 28%, var(--border-light));
    background: color-mix(in srgb, var(--warning-color, #f59e0b) 6%, var(--bg-elevated));
}

.agent-step-review strong {
    color: var(--text-secondary);
    font-size: 8px;
}

.agent-step-review span {
    color: var(--text-muted);
    font-size: 8.5px;
    line-height: 1.45;
}

.agent-run-footer {
    display: grid;
    gap: 8px;
    padding: 13px 16px 16px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-elevated);
}

.agent-budget-approval {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agent-budget-approval label {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 620;
}

.agent-budget-input {
    display: flex;
    width: 94px;
    height: 32px;
    align-items: center;
    gap: 4px;
    padding: 0 9px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: var(--bg-secondary);
}

.agent-budget-input span {
    color: var(--text-muted);
    font-size: 10px;
}

.agent-budget-input input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: 650 11px/1 "Space Grotesk", sans-serif;
}

.agent-approve {
    width: 100%;
}

.agent-cancel-run,
.agent-picker-cancel {
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    color: var(--text-muted);
    background: transparent;
    font: 600 10px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
}

.agent-cancel-run:hover {
    color: var(--error-color);
    background: color-mix(in srgb, var(--error-color) 7%, transparent);
}

.agent-gallery-picker[hidden] {
    display: none;
}

.agent-gallery-picker {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1200;
}

.agent-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 17, 20, .54);
    backdrop-filter: blur(8px);
}

.agent-picker-dialog {
    position: relative;
    display: grid;
    width: min(920px, calc(100vw - 32px));
    max-height: min(760px, calc(100dvh - 42px));
    grid-template-rows: auto auto minmax(180px, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 24px;
    background: var(--bg-elevated);
    box-shadow: 0 28px 80px -32px rgba(var(--ds-accent-rgb), 0.65);
    animation: agent-picker-in 260ms cubic-bezier(.16, 1, .3, 1) both;
}

.agent-picker-dialog > header,
.agent-picker-toolbar,
.agent-picker-dialog > footer {
    padding: 15px 18px;
}

.agent-memory-dialog {
    width: min(620px, calc(100vw - 32px));
    max-height: min(720px, calc(100dvh - 42px));
    grid-template-rows: auto auto minmax(160px, 1fr) auto;
}

.agent-memory-intro {
    margin: 0;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.5;
}

.agent-memory-list {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 16px 18px;
    overflow-y: auto;
}

.agent-memory-item {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 15px;
    background: var(--bg-secondary);
}

.agent-memory-item-head,
.agent-memory-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agent-memory-item-head div {
    display: grid;
    gap: 3px;
}

.agent-memory-item-head span {
    color: var(--primary-color);
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
}

.agent-memory-item-head strong {
    font-size: 11px;
}

.agent-memory-item-head button,
.agent-memory-item-foot button {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.agent-memory-item-head button {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--text-muted);
    background: transparent;
    font-size: 9px;
}

.agent-memory-item textarea {
    width: 100%;
    min-height: 58px;
    resize: vertical;
    border: 1px solid var(--border-light);
    border-radius: 11px;
    outline: 0;
    padding: 9px 10px;
    color: var(--text-primary);
    background: var(--bg-elevated);
    font: 500 10px/1.5 "Space Grotesk", sans-serif;
}

.agent-memory-item textarea:focus {
    border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-light));
}

.agent-memory-item-foot small {
    color: var(--text-muted);
    font-size: 8px;
}

.agent-memory-item-foot button {
    padding: 7px 10px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    font: 700 9px/1 "Space Grotesk", sans-serif;
}

.agent-memory-empty {
    display: grid;
    min-height: 220px;
    place-content: center;
    justify-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-align: center;
}

.agent-memory-empty i {
    color: var(--primary-color);
    font-size: 22px;
}

.agent-memory-empty strong {
    color: var(--text-secondary);
    font-size: 12px;
}

.agent-memory-empty span {
    max-width: 300px;
    font-size: 10px;
    line-height: 1.5;
}

.agent-confirm-dialog {
    width: min(410px, calc(100vw - 32px));
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 13px;
    padding: 18px;
}

.agent-confirm-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    color: var(--warning-color, #f59e0b);
    background: color-mix(in srgb, var(--warning-color, #f59e0b) 10%, transparent);
    font-size: 12px;
}

.agent-confirm-dialog h3 {
    margin: 1px 0 6px;
    color: var(--text-primary);
    font-size: 14px;
}

.agent-confirm-dialog p {
    margin: 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.55;
}

.agent-confirm-input {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.agent-confirm-input[hidden] { display: none; }

.agent-confirm-input span {
    color: var(--text-secondary);
    font: 700 10px/1.2 "Space Grotesk", sans-serif;
}

.agent-confirm-input textarea {
    width: 100%;
    min-height: 78px;
    resize: vertical;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 10px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    font: 500 11px/1.45 "Inter", sans-serif;
}

.agent-confirm-input textarea:focus {
    border-color: var(--primary-color);
    outline: 2px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.agent-confirm-input small {
    color: var(--text-muted);
    font-size: 9px;
}

.agent-confirm-dialog > footer {
    grid-column: 1 / -1;
    padding: 13px 0 0;
    border-top: 1px solid var(--border-light);
}

.agent-confirm-accept {
    min-width: 110px;
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    color: var(--text-inverse, #fff);
    background: var(--primary-color);
    font: 700 10px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
}

.agent-confirm-accept.danger {
    background: var(--error-color);
}

.agent-picker-dialog > header {
    border-bottom: 1px solid var(--border-light);
}

.agent-picker-toolbar,
.agent-picker-dialog > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agent-picker-toolbar .agent-search {
    width: min(360px, 100%);
    background: var(--bg-secondary);
}

.agent-picker-toolbar > span {
    color: var(--text-muted);
    font-size: 10px;
}

.agent-picker-grid {
    display: grid;
    min-height: 180px;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    /* Implicit `auto` rows stretch their items, which makes the grid ignore the
       card's aspect-ratio when sizing the row: rows collapsed to ~9px while the
       cards stayed square, so every thumbnail overlapped the ones below it.
       `min-content` lets the aspect-ratio drive the row height instead. */
    grid-auto-rows: min-content;
    align-content: start;
    gap: 8px;
    padding: 3px 18px 18px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.agent-picker-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 15px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease;
}

.agent-picker-card:hover {
    transform: translateY(-2px);
}

.agent-picker-card.selected {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

.agent-picker-card img,
.agent-picker-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agent-picker-kind {
    position: absolute;
    left: 7px;
    bottom: 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 7px;
    border-radius: 999px;
    color: var(--ds-ink);
    background: rgba(var(--ds-surface-rgb), 0.94);
    font-size: 8px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.agent-picker-check {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    color: transparent;
    background: rgba(20, 21, 24, .45);
    font-size: 9px;
}

.agent-picker-card.selected .agent-picker-check {
    color: var(--ds-accent-ink);
    background: var(--primary-color);
}

.agent-picker-dialog > footer {
    justify-content: flex-end;
    border-top: 1px solid var(--border-light);
}

.agent-picker-cancel,
.agent-picker-add {
    min-width: 104px;
}

.agent-picker-loading,
.agent-picker-empty,
.agent-picker-error {
    grid-column: 1 / -1;
    display: grid;
    min-height: 210px;
    place-items: center;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

@keyframes agent-shimmer {
    to { background-position: -200% 0; }
}

@keyframes agent-breathe {
    50% { opacity: .45; transform: scale(.86); }
}

@keyframes agent-bars {
    0%, 100% { transform: scaleY(.58); opacity: .52; }
    50% { transform: scaleY(1); opacity: 1; }
}

@keyframes agent-message-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes agent-picker-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1180px) {
    .agent-shell.run-open {
        grid-template-columns: minmax(210px, 236px) minmax(0, 1fr) minmax(284px, 330px);
    }

    .agent-budget-profile button {
        padding-inline: 7px;
    }
}

@media (max-width: 920px) {
    .agent-tab {
        min-height: 540px;
    }

    .agent-shell,
    .agent-shell.run-open {
        grid-template-columns: 1fr;
    }

    .agent-run-panel {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 4;
        width: min(320px, 88vw);
        transform: translateX(-104%);
        opacity: 0;
        pointer-events: none;
        transition: transform 260ms cubic-bezier(.16, 1, .3, 1), opacity 180ms ease;
        box-shadow: 24px 0 60px -36px rgba(12, 14, 18, .7);
    }

    .agent-shell.run-open .agent-run-panel {
        margin-left: 0;
    }

    .agent-shell.run-open .agent-run-panel {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .agent-run-panel {
        inset: 0 0 0 auto;
        transform: translateX(104%);
        border-right: 0;
        box-shadow: -24px 0 60px -36px rgba(12, 14, 18, .7);
    }

    .agent-composer-hint {
        display: none;
    }
}

@media (max-width: 640px) {
    .agent-conversation-head {
        min-height: 64px;
        padding: 10px 12px;
    }

    .agent-conversation-head p,
    .agent-status-pill,
    .agent-budget-profile button:not(.active) {
        display: none;
    }

    .agent-budget-profile button.active {
        display: block;
        padding: 7px 9px;
    }

    .agent-empty {
        align-content: start;
        padding: 66px 18px 50px;
    }

    .agent-empty-copy h3 {
        font-size: 30px;
    }

    .agent-starter-prompts {
        grid-template-columns: 1fr;
    }

    .agent-starter-prompts button:first-child {
        grid-row: auto;
        align-items: center;
    }

    .agent-message-stream {
        padding: 24px 15px 55px;
    }

    .agent-message.user .agent-message-body {
        max-width: 94%;
    }

    .agent-composer-wrap {
        padding: 6px 9px 9px;
    }

    .agent-composer {
        border-radius: 19px;
    }

    .agent-tool-btn span,
    .agent-disclaimer {
        display: none;
    }

    .agent-tool-btn {
        width: 30px;
        justify-content: center;
        padding: 0;
    }

    /* Inside the Bağlam menu a button is a tile: its name stays. */
    .agent-context-row .agent-tool-btn { width: auto; justify-content: center; padding: 8px 4px; }
    .agent-context-row .agent-tool-btn span { display: -webkit-box; }

    .agent-picker-dialog {
        width: calc(100vw - 18px);
        max-height: calc(100dvh - 18px);
        border-radius: 20px;
    }

    .agent-picker-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding-inline: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .agent-tab *,
    .agent-tab *::before,
    .agent-tab *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Marks a tile as a clip. Without it the first frame of a video is
   indistinguishable from a still. */
.agent-asset-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    color: var(--text-inverse, #fff);
    background: color-mix(in srgb, var(--text-primary) 55%, transparent);
    backdrop-filter: blur(3px);
    font-size: 11px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.agent-asset-play i {
    margin-left: 2px;
}

/* `hidden` has to actually hide.
 *
 * The browser's own `[hidden] { display: none }` comes from the UA stylesheet,
 * and an author rule beats a UA rule at equal specificity — so
 * `.agent-approve { display: inline-flex }` and `.agent-run-footer { display:
 * grid }` quietly cancelled it. The JS set `hidden` on the footer, on Onayla
 * and on İptal and every one of them stayed on screen and clickable; the only
 * thing stopping a click on a run that was not waiting for approval was the
 * server answering 409.
 *
 * Scoped to the agent workspace rather than written globally, so it fixes this
 * surface without changing how `hidden` behaves everywhere else in the app.
 *
 * `.agent-workspace` was the wrong root and matched nothing: the markup's
 * outermost elements are `.agent-tab` and `.agent-shell`
 * (templates/partials/_agent_workspace.html), so only the three explicit
 * selectors below it were ever doing any work. The five pills have the same
 * `display: inline-flex` defect and were still on screen with `hidden` set —
 * visible as a "0 içerik" attachment pill on a composer with no attachments.
 */
.agent-shell [hidden],
.agent-run-footer[hidden],
.agent-approve[hidden],
.agent-cancel-run[hidden],
.agent-status-pill[hidden],
.agent-context-count[hidden],
.agent-model-pill[hidden],
.agent-cost-pill[hidden],
.agent-step-state[hidden] {
    display: none !important;
}

.agent-package-items li.is-empty span,
.agent-package-items li.is-empty {
    color: var(--text-muted);
    font: 500 10.5px/1.4 "Space Grotesk", sans-serif;
}

/* ── Marka ve paket panelleri: iki sütun (23 Eylül) ──────────────────────────
   Solda ayarlar, sağda sonuç — ince bir çizgiyle bölünmüş. Tek sütunda seçili
   kalemler ayarların altına diziliyor, panel kayıyor ve "kalem ekle" görünmez
   oluyordu; marka panelinde metin kutuları tarayıcının beyaz kutularıydı. */

.agent-sheet-panel {
    max-height: min(80vh, 660px);
}

.agent-sheet {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    margin-top: 13px;
}

.agent-sheet[hidden] {
    display: none;
}

.agent-sheet-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
    padding-right: 16px;
}

.agent-sheet-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding-left: 16px;
    border-left: 1px solid var(--border-light);
}

.agent-sheet-main h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--text-secondary);
    font: 600 10px/1 "Space Grotesk", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.agent-sheet-main h4 em,
.agent-field > span em {
    margin-left: auto;
    color: var(--text-muted);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.agent-field > span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.agent-sheet .agent-package-items {
    margin: 0;
}

/* A grid item's min-width is its content's by default; one long run title
   (nowrap) widened the whole column past the panel's edge. */
.agent-sheet-main > *,
.agent-sheet-side > * {
    min-width: 0;
}

#agentBrandLibraryField {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.agent-sheet .agent-package-items li {
    min-width: 0;
}

#agentBrandLibraryField[hidden] {
    display: none;
}

.agent-field-row--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 0;
}

.agent-field input[type="text"] {
    height: 32px;
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: 500 11px/1 "Space Grotesk", sans-serif;
    transition: border-color 160ms ease;
}

.agent-field input[type="text"]::placeholder {
    color: var(--text-muted);
}

.agent-field input[type="text"]:focus-visible {
    border-color: var(--primary-color);
    outline: 0;
}

.agent-sheet-sum {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    font: 600 10px/1.2 "Space Grotesk", sans-serif;
    white-space: nowrap;
}

.agent-sheet-sum[hidden] {
    display: none;
}

.agent-tab-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
    border-radius: 50%;
    vertical-align: -1px;
}

/* Renkler: kutucuk + hex, ikisi aynı yuvaya yazar. */
.agent-swatch-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.agent-swatch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 3px;
    border: 1px solid var(--border-light);
    border-radius: 11px;
    background: var(--bg-primary);
}

.agent-swatch-chip {
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
    border-radius: 8px;
    background: var(--swatch, #c8a96e);
    cursor: pointer;
}

.agent-swatch-chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.agent-swatch input[type="text"] {
    width: 66px;
    height: 24px;
    padding: 0 4px;
    border: 0;
    color: var(--text-primary);
    background: transparent;
    font: 600 10px/1 "Space Grotesk", monospace;
    letter-spacing: .02em;
}

.agent-swatch input[type="text"]:focus-visible {
    outline: 0;
    color: var(--primary-color);
}

.agent-swatch button,
.agent-chip button {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--text-muted);
    background: transparent;
    font-size: 8.5px;
    cursor: pointer;
}

.agent-swatch button:hover,
.agent-chip button:hover {
    color: var(--danger-color, #e5484d);
}

.agent-swatch-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 11px;
    border: 1px dashed var(--border-medium);
    border-radius: 11px;
    color: var(--text-secondary);
    background: transparent;
    font: 600 10px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
}

.agent-swatch-add:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Fontlar: etiketli giriş. */
.agent-chip-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 3px 6px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-primary);
}

.agent-chip-input:focus-within {
    border-color: var(--primary-color);
}

.agent-chip-list {
    display: contents;
}

.agent-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 9px;
    border-radius: 999px;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-secondary));
    font-size: 11px;
    line-height: 1;
}

.agent-chip-input input[type="text"] {
    width: auto;
    min-width: 90px;
    height: 24px;
    flex: 1 1 90px;
    padding: 0 4px;
    border: 0;
    background: transparent;
}

.agent-chip-input input[hidden] {
    display: none;
}

/* Logo: dosya alanı ve sürüm satırları. */
.agent-logo-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.agent-logo-list[hidden] {
    display: none;
}

.agent-logo-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    border: 1px solid var(--border-light);
    border-radius: 11px;
    background: var(--bg-primary);
}

.agent-logo-thumb {
    display: grid;
    width: 44px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 7px;
    background: var(--ds-accent);
}

.agent-logo-thumb.is-dark {
    background: var(--ds-surface);
}

.agent-logo-thumb img {
    max-width: 38px;
    max-height: 24px;
    object-fit: contain;
}

.agent-logo-list select {
    min-width: 0;
    height: 26px;
    flex: 1 1 auto;
    padding: 0 7px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    font: 500 10.5px/1 "Space Grotesk", sans-serif;
}

.agent-dropzone {
    display: grid;
    justify-items: center;
    gap: 4px;
    width: 100%;
    padding: 11px 10px;
    border: 1px dashed var(--border-medium);
    border-radius: 12px;
    color: var(--text-secondary);
    background: transparent;
    font: 600 10.5px/1.3 "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.agent-dropzone i {
    font-size: 13px;
}

.agent-dropzone small {
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 500;
}

.agent-dropzone:hover,
.agent-dropzone.is-over {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}

/* Önizleme: markanın açık ve koyu zemini, palet şeridi, font örneği. */
.agent-brand-preview {
    display: grid;
    gap: 9px;
}

.agent-brand-tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.agent-brand-tile {
    position: relative;
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    border-radius: 13px;
}

.agent-brand-tile img {
    max-width: 72%;
    max-height: 42px;
    object-fit: contain;
}

.agent-brand-tile strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .14em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-brand-tile small {
    position: absolute;
    bottom: 7px;
    left: 9px;
    font: 600 8.5px/1 "Space Grotesk", monospace;
    opacity: .6;
}

.agent-brand-strip {
    display: flex;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
}

.agent-brand-strip span {
    flex: 1 1 0;
}

.agent-brand-strip em,
.agent-brand-type em {
    color: var(--text-muted);
    font: 500 10px/1.4 "Space Grotesk", sans-serif;
    font-style: normal;
}

.agent-brand-strip:has(em) {
    height: auto;
}

.agent-brand-type {
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.4;
}

.agent-brand-voice {
    margin: 0;
    color: var(--text-secondary);
    font: italic 500 11px/1.5 "Space Grotesk", sans-serif;
}

/* Alt satır: durum solda, eylemler sağda. */
.agent-foot-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
}

.agent-sheet-btn {
    display: inline-flex;
    height: 30px;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    font: 600 10.5px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.agent-sheet-btn[hidden] {
    display: none;
}

/* "Sheet üret" with no price read: nothing to approve. */
.agent-sheet-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.agent-sheet-btn.is-primary {
    border-color: var(--primary-color);
    color: var(--ds-accent-ink);
    background: var(--primary-color);
}

.agent-sheet-btn.is-primary:hover {
    background: color-mix(in srgb, var(--primary-color) 86%, var(--ds-surface));
}

.agent-sheet-btn.is-quiet:hover {
    border-color: color-mix(in srgb, var(--danger-color, #e5484d) 45%, var(--border-light));
    color: var(--danger-color, #e5484d);
}

@media (max-width: 720px) {
    .agent-sheet {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .agent-sheet-side {
        padding-right: 0;
    }

    .agent-sheet-main {
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px solid var(--border-light);
        border-left: 0;
    }
}

/* ── Art direktör paneli (C2) ────────────────────────────────────────────── */

.agent-persona-list {
    display: grid;
    gap: 5px;
}

.agent-persona-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px 7px 7px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    color: var(--text-primary);
    background: var(--bg-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.agent-persona-row:hover {
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-light));
}

.agent-persona-row.is-active {
    border-color: color-mix(in srgb, var(--primary-color) 60%, var(--border-light));
    background: color-mix(in srgb, var(--primary-color) 9%, var(--bg-primary));
}

.agent-persona-mark {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    font: 600 12px/1 "Space Grotesk", sans-serif;
}

.agent-persona-row.is-active .agent-persona-mark {
    color: var(--ds-accent-ink);
    background: var(--primary-color);
}

.agent-persona-text {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 2px;
}

.agent-persona-text strong {
    font: 600 11px/1.3 "Space Grotesk", sans-serif;
}

.agent-persona-text small {
    overflow: hidden;
    color: var(--text-muted);
    font: 500 9.5px/1.3 "Space Grotesk", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-persona-row em {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    font: 600 9px/1.4 "Space Grotesk", sans-serif;
    font-style: normal;
}

.agent-persona-story {
    margin: 0;
    color: var(--text-secondary);
    font: 500 11px/1.6 "Space Grotesk", sans-serif;
}

.agent-persona-block {
    display: grid;
    gap: 6px;
}

.agent-persona-block > span {
    color: var(--text-muted);
    font: 600 9.5px/1 "Space Grotesk", sans-serif;
}

.agent-persona-bar {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
}

.agent-persona-bar em {
    color: var(--text-primary);
    font: 500 10.5px/1.2 "Space Grotesk", sans-serif;
    font-style: normal;
}

.agent-persona-bar i {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-secondary);
}

.agent-persona-bar i::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--share, 0%);
    border-radius: inherit;
    background: var(--primary-color);
    content: "";
}

.agent-persona-bar b {
    color: var(--text-muted);
    font: 600 9.5px/1 "Space Grotesk", sans-serif;
    text-align: right;
}

.agent-persona-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.agent-persona-tags i {
    padding: 4px 9px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-secondary);
    font: 500 10px/1 "Space Grotesk", sans-serif;
    font-style: normal;
}

.agent-persona-note {
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    font: 500 10px/1.5 "Space Grotesk", sans-serif;
}

/* ── The workspace (agent/PLAN-CALISMA-ALANI.md, Faz 2) ─────────────────────
   Four columns: navigator | canvas | run panel (when open) | chat. Each state
   sets its own track through a variable, so every combination composes. */

.agent-shell {
    --agent-nav-w: minmax(212px, 236px);
    --agent-chat-w: 420px;
    --agent-col-nav: var(--agent-nav-w);
    --agent-col-canvas: minmax(0, 1fr);
    --agent-col-run: 0px;
    --agent-col-chat: var(--agent-chat-w);
    grid-template-columns: var(--agent-col-nav) var(--agent-col-canvas) var(--agent-col-run) var(--agent-col-chat);
}

.agent-shell.run-open { --agent-col-run: minmax(292px, 340px); }

.agent-shell.run-open {
    grid-template-columns: var(--agent-col-nav) var(--agent-col-canvas) var(--agent-col-run) var(--agent-col-chat);
}

/* Each area in its own track: a drawer navigator leaves the flow, and the
   others must not slide one track to the left when it does. */
.agent-shell > .agent-run-panel { grid-column: 3; grid-row: 1; }
.agent-shell > .agent-conversation { grid-column: 4; grid-row: 1; }

/* Navigator */
.agent-icon-btn.agent-icon-btn-sm { width: 28px; height: 28px; font-size: 12px; }
.agent-link {
    padding: 0;
    border: 0;
    color: var(--primary-color);
    background: none;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* Canvas */
.agent-link-btn {
    margin-left: 6px;
    padding: 0;
    border: 0;
    color: var(--primary-color);
    background: none;
    font: inherit;
    font-style: normal;
    font-weight: 600;
    cursor: pointer;
}
.agent-link-btn:hover { text-decoration: underline; }

.agent-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: var(--bg-primary);
}
.agent-card.status-approved { border-color: color-mix(in srgb, var(--success-color, #30a46c) 60%, transparent); }
.agent-card.status-revision { border-color: color-mix(in srgb, var(--warning-color, #f5a524) 70%, transparent); }
.agent-card.status-rejected { opacity: .62; }

.agent-card-actions { display: flex; gap: 2px; padding: 6px 6px 8px; }
.agent-card-act {
    display: inline-grid;
    width: 30px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    font-size: 12px;
}
.agent-card-act:hover,
.agent-card-act:focus-visible { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.agent-card-act.active { color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 14%, transparent); }

/* Chat panel */
.agent-shell .agent-conversation {
    margin-left: 8px;
    border: 1px solid var(--border-light);
    border-radius: 22px;
}

.agent-conversation-head .agent-head-actions { gap: 6px; }
.agent-conversation-head .agent-icon-btn[aria-pressed="true"],
.agent-conversation-head .agent-icon-btn[aria-expanded="true"] { color: var(--primary-color); }

.agent-history-popover {
    position: absolute;
    z-index: 30;
    top: 68px;
    right: 12px;
    left: 12px;
    display: flex;
    max-height: min(62%, 520px);
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-medium);
    border-radius: 16px;
    background: var(--bg-elevated, var(--bg-secondary));
    box-shadow: 0 28px 64px -34px rgba(0, 0, 0, .7);
}
.agent-history-popover[hidden] { display: none; }
.agent-history-popover .agent-history-list { min-height: 0; flex: 1; overflow-y: auto; }
.agent-history-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--bg-primary); }
.agent-history-tabs button {
    flex: 1;
    padding: 6px 8px;
    border: 0;
    border-radius: 999px;
    color: var(--text-muted);
    background: transparent;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.agent-history-tabs button.active { color: var(--text-primary); background: var(--bg-elevated, var(--bg-secondary)); }

/* The one "Bağlam" button, its row and the chips */
/* The composer's menus (27 Sep): Dosya's two ways in and Bağlam's panels open
   above the input, like the panels themselves, never between the buttons. */
.agent-pop-menu {
    position: absolute;
    z-index: 41;
    bottom: calc(100% + 9px);
    left: 0;
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--border-medium);
    border-radius: 16px;
    background: var(--bg-elevated, var(--bg-secondary));
    box-shadow: 0 24px 56px -32px rgba(0, 0, 0, .7);
}
.agent-pop-menu[hidden] { display: none; }
.agent-pop-title {
    margin: 2px 4px 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.agent-file-menu { width: min(280px, 100%); }
.agent-file-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    color: var(--text-primary);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.agent-file-menu button:hover { background: color-mix(in srgb, var(--primary-color) 10%, transparent); }
.agent-file-menu button i { width: 18px; color: var(--primary-color); text-align: center; }
.agent-file-menu button span { display: grid; gap: 2px; }
.agent-file-menu button strong { font-size: 13px; }
.agent-file-menu button small { color: var(--text-muted); font-size: 11px; }
/* Bağlam's panels side by side as tiles — the icon over the name, or over what
   is chosen (27 Sep, owner). Five (six in a universe) fit one row of the
   narrow chat; a phone folds them into two. */
.agent-context-row {
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px 10px;
}
.agent-context-row[hidden] { display: none; }
.agent-context-tiles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
}
.agent-pop-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.agent-pop-head .agent-pop-title { margin: 0 2px; }
.agent-context-row .agent-tool-btn {
    flex-direction: column;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: 54px;
    padding: 7px 3px;
    gap: 5px;
    border-radius: 12px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
}
.agent-context-row .agent-tool-btn i { font-size: 15px; }
.agent-context-row .agent-tool-btn span,
.agent-context-row .agent-tool-btn.is-pinned span {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}
.agent-context-row .agent-tool-btn[hidden] { display: none; }
/* A small ← before a panel's title (back is on the left); the menu's × on its right. */
.agent-pop-head .agent-panel-back { margin-left: auto; }
.agent-panel-back {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-muted);
    background: transparent;
    font-size: 12px;
    cursor: pointer;
}
.agent-panel-back:hover { color: var(--text-primary); border-color: var(--primary-color); }

.agent-context-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px; }
.agent-context-chips[hidden] { display: none; }
.agent-context-chip {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-primary));
    font-size: 12px;
}
.agent-context-chip.is-locked { background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-primary)); }
.agent-context-chip-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    border: 0;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.agent-context-chip-open i { color: var(--text-muted); font-size: 11px; }
.agent-context-chip-open em { color: var(--text-muted); font-style: normal; font-size: 11px; }
.agent-context-chip-clear {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 0;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    font-size: 11px;
}
.agent-context-chip-clear:hover { color: var(--text-primary); }
.agent-context-chip-lock { padding-right: 10px; color: var(--text-muted); font-size: 10px; }
/* "Tek görselde birleştir": a switch among the chips — dashed off, filled on. */
.agent-context-chip.is-toggle { border-style: dashed; background: transparent; }
.agent-context-chip.is-toggle .agent-context-chip-open { padding-right: 10px; }
.agent-context-chip.is-toggle.is-on {
    border-style: solid;
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-primary));
}
.agent-context-chip.is-toggle.is-on .agent-context-chip-open i { color: var(--primary-color); }

.agent-composer-toolbar { flex-wrap: wrap; }

/* A narrow screen: one column, the chat first; the canvas opens over it. */
@media (max-width: 920px) {
    .agent-shell,
    .agent-shell.run-open {
        grid-template-columns: minmax(0, 1fr);
    }

    .agent-shell > .agent-run-panel,
    .agent-shell > .agent-conversation { grid-column: 1; }

    .agent-shell .agent-conversation {
        margin-left: 0;
        border-width: 1px;
        opacity: 1;
        pointer-events: auto;
    }
}

/* The chat panel's head: the title takes the room, the buttons keep theirs. */
.agent-shell .agent-conversation-head { flex-wrap: nowrap; gap: 8px; }
.agent-shell .agent-conversation-title-row { min-width: 0; flex: 1 1 auto; }
.agent-shell .agent-conversation-title-row > div { min-width: 0; }
.agent-shell .agent-conversation-head .agent-head-actions { flex: 0 0 auto; }
.agent-shell #agentConversationTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-subtitle-line { display: flex; min-width: 0; align-items: center; gap: 8px; }
.agent-subtitle-line p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.agent-subtitle-line .agent-model-pill {
    max-width: 150px;
    overflow: hidden;
    flex: 0 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gallery: the Agent's work, marked and scoped (workspace plan, Faz 2). */
.gallery-agent-scope {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 4px 2px 10px;
    font-size: 13px;
}
.gallery-agent-scope label { color: var(--text-muted); }
.gallery-agent-scope select {
    min-width: 240px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
}
.gallery-agent-scope span { color: var(--text-muted); font-size: 12px; }
.gallery-agent-badge {
    position: absolute;
    z-index: 3;
    bottom: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--ds-on-media);
    background: rgba(var(--ds-media-glass-rgb), .72);
    font-size: 11px;
    font-weight: 650;
    pointer-events: none;
}
/* On a storyboard / Social Studio card the name sits bottom-left. */
.sb-folder-card .gallery-agent-badge.sb-agent-mark { left: auto; right: 8px; bottom: 10px; }

/* The library (Faz 3): products, sets, templates, the package question. */
.agent-product-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.agent-product-row {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 12px;
}
.agent-product-row.is-chosen { border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 10%, transparent); }
.agent-product-pick {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border: 0;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.agent-product-pick img,
.agent-product-nophoto {
    display: grid;
    width: 44px;
    height: 44px;
    flex: none;
    place-items: center;
    border-radius: 9px;
    background: var(--bg-primary);
    object-fit: cover;
}
.agent-product-pick span { display: grid; min-width: 0; flex: 1; gap: 2px; }
.agent-product-pick strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.agent-product-pick small { color: var(--text-muted); font-size: 11px; }
.agent-product-pick > i { color: var(--text-muted); }
.agent-product-row.is-chosen .agent-product-pick > i { color: var(--primary-color); }
.agent-product-actions { display: flex; gap: 2px; padding-right: 6px; }
.agent-product-actions button,
.agent-set-archive {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    font-size: 11px;
}
.agent-product-actions button:hover,
.agent-set-archive:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.agent-product-new { width: 100%; }
.agent-product-form { display: grid; gap: 10px; }
.agent-product-form textarea {
    width: 100%;
    min-height: 88px;
    padding: 8px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 13px;
    resize: vertical;
}
.agent-product-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-product-photos > span { position: relative; }
.agent-product-photos img { width: 64px; height: 64px; border-radius: 9px; object-fit: cover; }
.agent-product-photos > span button {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    color: var(--ds-ink);
    background: rgba(var(--ds-surface-rgb), 0.94);
    font-size: 10px;
    cursor: pointer;
}
.agent-product-photos .agent-dropzone { width: auto; min-height: 64px; padding: 8px 12px; }
.agent-product-hint { color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.agent-product-hint p { margin: 0 0 8px; }
.agent-set-chip { display: inline-flex; align-items: center; }
.agent-set-chip em { color: var(--text-muted); font-style: normal; font-size: 11px; }

.agent-package-templates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 0 2px;
}
.agent-package-templates[hidden] { display: none; }
.agent-templates-label { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.agent-templates-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

.agent-choice-options { display: grid; gap: 8px; margin-top: 10px; }
.agent-choice-option {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.agent-choice-option:hover,
.agent-choice-option:focus-visible { border-color: var(--primary-color); }
.agent-choice-option strong { font-size: 13px; }
.agent-choice-option small { color: var(--text-muted); font-size: 12px; }
.agent-choice-option.is-quiet { border-style: dashed; }

/* The panels open inside the chat panel now, which is narrower than the old
   full-width chat: below ~620 px of panel the two-column sheets stack. */
.agent-shell .agent-conversation { container-type: inline-size; container-name: agentchat; }

@container agentchat (max-width: 620px) {
    .agent-sheet { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .agent-sheet-side { padding-right: 0; }
    .agent-sheet-main { padding-top: 12px; padding-left: 0; border-top: 1px solid var(--border-light); border-left: 0; }
}

/* Medium screens: the navigator and the chat give the canvas room. */
@media (max-width: 1360px) {
    .agent-shell { --agent-nav-w: minmax(188px, 204px); --agent-chat-w: 380px; }
}

/* Below 1180 px the navigator is a drawer (the same one a phone uses), so the
   canvas keeps its width; the chat stays a column down to 920 px. */
@media (min-width: 921px) and (max-width: 1180px) {
    .agent-shell { --agent-col-nav: 0px; }
}

/* A narrow chat panel: the status keeps its dot, the title keeps its room. */
@container agentchat (max-width: 460px) {
    #agentConversationStatus { gap: 0; padding-inline: 6px; font-size: 0; }
    .agent-subtitle-line .agent-model-pill { display: none; }
}

/* The caption under a post (Faz 4). */
.agent-share-settings .agent-field-row { margin-top: 6px; }

/* The cast (Faz 5). */
.agent-cast-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.agent-cast-badges em {
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    font-style: normal;
}
.agent-cast-sheet { width: 100%; max-height: 180px; border-radius: 10px; object-fit: contain; background: var(--ds-surface); }
.agent-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }

/* The universe (Faz 6). */
.agent-universe-cast { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.agent-universe-cast li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 8px; }
.agent-universe-cast input[type="text"],
.agent-universe-place input {
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 12.5px;
}
.agent-universe-place { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 6px; margin-bottom: 6px; }
.agent-universe-place button { border: 0; color: var(--text-muted); background: none; cursor: pointer; }
/* A board place: the picture beside its name and, under the name, its description. */
.agent-universe-place.has-board { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; }
.agent-universe-place.has-board .agent-universe-board { grid-row: 1 / span 2; }
.agent-universe-place.has-board [data-place-name] { grid-column: 2; }
.agent-universe-place.has-board [data-place-description] { grid-column: 2; }
.agent-universe-place.has-board [data-universe="remove-place"] { grid-column: 3; grid-row: 1 / span 2; }
.agent-universe-place .agent-universe-board {
    width: 64px;
    height: 64px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 6px;
}
.agent-universe-place .agent-universe-board img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-canon-list { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.agent-canon-list li { padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 10px; }
.agent-canon-list li p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.45; }
.agent-canon-list li small { color: var(--text-muted); font-size: 11px; }
.agent-canon-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.agent-canon-actions button {
    padding: 3px 8px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}
#agentUniversePanel textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    color: var(--text-primary);
    background: var(--bg-primary);
    font: inherit;
    font-size: 12.5px;
    resize: vertical;
}

/* A universe in the brand panel (27 Sep): its characters in the right column. */
.agent-universe-quick-cast { display: grid; gap: 8px; }
.agent-universe-quick-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.agent-universe-quick-list li { display: flex; align-items: center; gap: 10px; }
.agent-universe-quick-list img,
.agent-universe-quick-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    object-fit: cover;
}
.agent-universe-quick-avatar { display: grid; place-items: center; color: var(--text-muted); }
.agent-universe-quick-list span { display: grid; }
.agent-universe-quick-list em { color: var(--primary-color); font-size: 11px; font-style: normal; }
#agentUniverseVisualToggle { justify-self: start; }
/* The strip of dots sits over the picture's foot: a dot shows that piece and
   the wheel steps through them only here, so the page scrolls everywhere else. */

/* The model panel's two views (27 Sep): production models, and the Agent's LLM seats. */
.agent-model-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.agent-model-tabs {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: var(--bg-secondary);
}
.agent-model-tabs button {
    padding: 5px 11px;
    white-space: nowrap;
    border: 0;
    border-radius: 999px;
    color: var(--text-muted);
    background: transparent;
    font: 600 11px/1 "Space Grotesk", sans-serif;
    cursor: pointer;
}
.agent-model-tabs button.is-active { color: var(--text-primary); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.agent-llm-seats[hidden] { display: none; }
.agent-llm-seat-list { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.agent-llm-seat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 6px 14px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--border-light);
}
.agent-llm-seat-text { display: grid; gap: 2px; min-width: 0; }
.agent-llm-seat-text strong { font-size: 12.5px; }
.agent-llm-seat-text small { color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.agent-llm-seat-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.agent-llm-seat-control select,
.agent-llm-chain select {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid var(--border-light);
    border-radius: 9px;
    color: var(--text-primary);
    background: var(--bg-primary, var(--bg-secondary));
    font-size: 12px;
}
.agent-llm-chain { display: grid; gap: 4px; width: 100%; }
@container agentchat (max-width: 520px) {
    .agent-llm-seat { grid-template-columns: minmax(0, 1fr); }
}


/* Video's controls fold away for an image job (10 Oct). Its own name: a bare .is-folded hid the brand
   page's folded product categories, heads and all (18 Oct). */
.is-video-hidden { display: none !important; }
.is-video-folded { grid-template-columns: 1fr !important; }
.agent-video-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 10px;
    border: 1px solid var(--border-light); border-radius: 8px; background: transparent; color: var(--text-secondary);
    font-size: 12px; cursor: pointer; }
.agent-video-toggle .fa-chevron-down { font-size: 10px; transition: transform .15s ease; }
.agent-video-toggle.is-open .fa-chevron-down { transform: rotate(180deg); }
.agent-package-tab small { margin-left: 6px; font-size: 10px; opacity: .65; }
.agent-templates-hint { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: var(--text-secondary); }

/* ==========================================
   Araçlar, the Agent's art director and package (owner, 10 Oct: "daha profesyonel, az karmaşık,
   derli toplu"): the panel ran two screens tall — six cards, a paragraph, three notes, eight tabs.
   Here the directors are one row of names with the chosen one's line under it, the brand's jobs and
   the ready jobs two rows of small pills, and a chosen job package leaves the rest aside.
   The Agent page keeps its full sheets; only Araçlar is compact.
   ========================================== */
.agent-persona-line {
    display: none;
}

#unifiedToolsPanel .agent-sheet {
    display: block;
    margin-top: 0;
}

#unifiedToolsPanel .agent-sheet[hidden],
#unifiedToolsPanel .is-under-job {
    display: none !important;
}

#unifiedToolsPanel .agent-persona-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#unifiedToolsPanel .agent-persona-row {
    width: auto;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
}

#unifiedToolsPanel .agent-persona-mark,
#unifiedToolsPanel .agent-persona-text small {
    display: none;
}

#unifiedToolsPanel .agent-persona-row em {
    padding: 1px 6px;
}

#unifiedToolsPanel #agentPersonaDetail > :not(.agent-persona-line),
#unifiedToolsPanel #agentPersonaStatus {
    display: none;
}

#unifiedToolsPanel .agent-persona-line {
    display: block;
    margin: 8px 2px 0;
    color: var(--text-muted);
    font: 500 11px/1.4 "Space Grotesk", sans-serif;
}

#unifiedToolsPanel .agent-model-foot {
    margin-top: 6px;
    padding-top: 0;
    border-top: 0;
}

#unifiedToolsPanel .agent-model-foot:not(:has(.agent-sheet-btn:not([hidden]))):not(:has(.agent-model-note:not(:empty))) {
    display: none;
}

#unifiedToolsPanel .agent-package-templates,
#unifiedToolsPanel .agent-package-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
}

#unifiedToolsPanel .agent-templates-label {
    flex: 1 1 100%;
    margin: 2px 0 0;
    color: var(--text-muted);
    font: 600 9.5px/1.3 "Space Grotesk", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#unifiedToolsPanel .agent-package-tab {
    padding: 4px 10px;
    font-size: 11px;
}

#unifiedToolsPanel .agent-templates-hint {
    flex: 1 1 100%;
    margin: 2px 2px 0;
    font-size: 11px;
}

/* The saving actions are the rare step: small links at the end of the brand's jobs. */
#unifiedToolsPanel .agent-templates-actions {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 2px 12px;
}

#unifiedToolsPanel .agent-templates-actions .agent-sheet-btn,
#unifiedToolsPanel #agentPersonaMakeDefault {
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 10.5px;
}

#unifiedToolsPanel .agent-templates-actions .agent-sheet-btn:hover:not(:disabled),
#unifiedToolsPanel #agentPersonaMakeDefault:hover {
    color: var(--primary-color);
}

#unifiedToolsPanel .agent-templates-actions .agent-sheet-btn:disabled {
    display: none;
}

/* A long job name wraps inside its pill on a phone; its frame count stays in sight. */
#unifiedToolsPanel .agent-set-chip {
    min-width: 0;
    max-width: 100%;
}

#unifiedToolsPanel .agent-set-chip .agent-package-tab {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

/* On a question there is nothing to approve: no ceiling to fill (10 Oct). */
.agent-budget-approval[hidden] {
    display: none !important;
}

/* ── The bar's image menu: tabs under the search, folding categories (24 Oct) ── */
#creativeContextMenu .ctx-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
#creativeContextMenu .ctx-tabs::-webkit-scrollbar { display: none; }
#creativeContextMenu .ctx-tab {
    flex: none;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--ds-line);
    border-radius: 999px;
    background: transparent;
    color: var(--ds-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
#creativeContextMenu .ctx-tab small { font-size: 10px; opacity: 0.8; }
#creativeContextMenu .ctx-tab.active {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
    color: var(--ds-accent-text);
}
#creativeContextMenu .ctx-cathead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px 2px 4px;
}
#creativeContextMenu .ctx-cathead[hidden] { display: none; }
#creativeContextMenu .ctx-cat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 6px;
    border: 0;
    background: transparent;
    color: var(--ds-ink);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
#creativeContextMenu .ctx-cat-toggle i { font-size: 9px; color: var(--ds-muted); transition: transform 0.15s ease; }
#creativeContextMenu .ctx-cathead.is-folded .ctx-cat-toggle i { transform: rotate(-90deg); }
#creativeContextMenu .ctx-cathead.is-flat { padding-left: 12px; }
#creativeContextMenu .ctx-cat-name { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
#creativeContextMenu .ctx-cat-name strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#creativeContextMenu .ctx-cat-name small { color: var(--ds-muted); font-size: 10px; }
#creativeContextMenu .ctx-cat-section { display: none; color: var(--ds-muted); font-style: normal; font-size: 10px; }
#creativeContextMenu.is-searching .ctx-cat-section { display: inline; }
#creativeContextMenu .ctx-cat-all {
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--ds-line);
    border-radius: 999px;
    background: transparent;
    color: var(--ds-accent-text);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}
#creativeContextMenu .ctx-cat-all:hover { background: var(--ds-accent-soft); }

/* "Seri olarak başlat (N ürün)": an action among the chips over the bar. */
.agent-context-chip.is-action { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.agent-context-chip.is-action .agent-context-chip-open { padding-right: 12px; color: var(--ds-accent-text); font-weight: 600; }
.agent-context-chip.is-action .agent-context-chip-open i { color: var(--ds-accent-text); }
#unifiedAboveSlot .agent-context-chip.is-action { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
#unifiedAboveSlot .agent-context-chip.is-action .agent-context-chip-open { color: var(--ds-accent-text); }