/* =====================================================================
 * Coding sessions in the chat pane (change add-opencode-coding-agents, 4.3).
 *
 * The embedded OpenCode app fills the conversation area, so the frame has to
 * cover exactly what the ordinary composer and message list occupied and
 * nothing else. The hidden/restore decision itself lives in coding.js
 * (`applyChrome`); this file only describes the two states.
 * ===================================================================== */

/* The frame host: chat-main is a flex column holding the message list and the
 * composer. While a coding session is mounted both are hidden, so the frame is
 * the only child left to take the remaining height. */
#chat-main.coding-active {
    padding: 0;
}

/* The empty-chat layout (`#chat-main.chat-home` in appearance.css, which loads
 * before this file) pads the pane's top and makes it a scroll container. The
 * class itself is removed on mount (coding.js, and the console's own layout
 * sync), but the collapse it causes is severe enough to be worth a layout that
 * cannot inherit it: same specificity, later in the cascade. */
html[data-web-palette] #chat-main.coding-active {
    padding: 0;
    overflow: hidden;
    --home-hero-offset: 0px;
}

#chat-main > iframe.coding-frame {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border: 0;
    display: block;
    background: #ffffff;
}

html.dark #chat-main > iframe.coding-frame {
    background: #1a1a1a;
}

/* Waiting for the child's ready notice. Deliberately plain: it must not look
 * like a result, only like work in progress. */
#chat-main > .coding-loading {
    position: absolute;
    inset-inline-start: 50%;
    top: 12px;
    transform: translateX(-50%);
    z-index: 5;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 12px;
    color: #64748b;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(100, 116, 139, 0.2);
}

/* The child stayed silent past the timeout: the pane says what it knows and
 * offers the one safe action (reopen this same session). */
#chat-main > .coding-retry {
    position: absolute;
    inset-inline-start: 50%;
    top: 12px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 32px);
    width: max-content;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 12px;
    color: #92400e;
    background: rgba(255, 251, 235, 0.96);
    border: 1px solid rgba(217, 119, 6, 0.3);
}

html.dark #chat-main > .coding-loading {
    color: #94a3b8;
    background: rgba(26, 26, 26, 0.92);
    border-color: rgba(148, 163, 184, 0.24);
}

html.dark #chat-main > .coding-retry {
    color: #fbbf24;
    background: rgba(41, 37, 20, 0.96);
    border-color: rgba(251, 191, 36, 0.3);
}

.coding-retry-btn {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 9999px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-size: 12px;
    cursor: pointer;
}

.coding-retry-btn:hover {
    background: rgba(217, 119, 6, 0.12);
}

/* The coding-type hint: an icon chip, not a text pill (change
   simplify-coding-agent-type-hint). It shares the top-right corner of the
   workbench card with the default chip, so the square keeps the badge column
   from growing when the name next to it is long. The wording now lives in the
   tooltip and the accessible name, which is why this rule no longer needs a
   font size or a gap. */
.coding-agent-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    font-size: 11px;
    line-height: 1;
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

html.dark .coding-agent-badge {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(147, 197, 253, 0.3);
}

/* Deleting the last coding session leaves the Agent selected but with no
 * conversation: the embedded app is gone, so the pane says why and offers the
 * one explicit control that creates a remote session (console.js
 * `renderCodingEmptyState`). It deliberately looks like the ordinary empty
 * chat: a short line and a single button, not a second composer. */
.coding-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    min-height: 220px;
    padding: 24px;
    text-align: center;
}

.coding-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--history-text, #1f2937);
}

.coding-empty-hint {
    max-width: 420px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--history-muted, #6b7280);
}

.coding-empty-new {
    margin-top: 6px;
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: #228547;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.coding-empty-new:hover {
    background: #1C6B3B;
}

html.dark .coding-empty-title { color: #e5e7eb; }
html.dark .coding-empty-hint { color: #9ca3af; }