/* ══════════════════════════════════════════════════════════════════════════
   DEVS CONS — "The Developers" console styles
   ──────────────────────────────────────────────────────────────────────────
   AI-control settings inside the shared modal. Deliberately uses the app's
   stg-* settings chrome (rows, toggles, buttons) so it looks native instead of
   like a separate terminal app. Only the server cards and a few details get
   bespoke styles.
   ══════════════════════════════════════════════════════════════════════════ */

/* The trigger button carries the `hidden` attribute until Dev Mode is on.
   style.css gives .input-tools-left .tool-btn { display:flex } which BEATS the
   browser's [hidden] UA rule (specificity, not !important) — so the circle
   leaks through whenever dev mode is off. Kill it hard here; devs-cons.css
   loads last. */
#devs-cons-trigger[hidden] {
    display: none !important;
}

/* Full-bleed inside the shared modal, exactly like the settings shell */
.data-window .content-viewer:has(.devs-shell) {
    padding: 0 !important;
    overflow: hidden !important;
}

/* The mount wrapper must fill the viewer or the shell's height:100% collapses
   and the whole panel stops scrolling. */
.devs-mount {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.devs-shell {
    display: flex;
    height: 100%;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* The main panel must scroll independently of the shell (settings behaviour). */
.devs-shell .stg-main {
    overflow-y: auto !important;
    height: 100%;
}

/* ── Buttons used inside Devs Cons ───────────────────────────────────────────
   `stg-row-control-button` has no rules in the app CSS, so these define the
   complete look: same geometry as the settings buttons (34px, radius 9, full
   width auto) with the terminal accent for primary actions. */
.devs-shell .stg-row-control-button {
    height: 34px;
    padding: 0 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    background: var(--secondary-color, #2a2a2a);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    min-width: 110px;
    transition: background 0.14s ease, transform 0.1s ease, filter 0.14s ease;
    box-sizing: border-box;
}

.devs-shell .stg-row-control-button:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.1));
}

.devs-shell .stg-row-control-button:active {
    transform: scale(0.97);
}

.devs-shell .stg-row-control-button.cancel {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
    border-color: transparent;
}

.devs-shell .stg-row-control-button .material-symbols-rounded {
    font-size: 17px;
}

.devs-shell .devs-primary-btn {
    background: var(--accent, #b7795c);
    border-color: transparent;
    color: #fff;
}

.devs-shell .devs-primary-btn:hover {
    filter: brightness(1.08);
}

/* ── AI tool rows: icon tint to match the Devs tag ───────────────────────── */
.devs-shell .tool-row-ico {
    font-size: 17px;
    color: var(--subheading-color, #8a8a8a);
    margin-right: 8px;
    vertical-align: -3px;
}

.devs-shell .stg-beta-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent, #b7795c);
    background: var(--accent-soft, rgba(183, 121, 92, 0.14));
    border-radius: 5px;
    padding: 2px 7px;
    margin-left: 6px;
    vertical-align: 1px;
}

/* ── Server cards ────────────────────────────────────────────────────────── */
.devs-server-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}

.devs-server-card:last-child {
    border-bottom: none;
}

.devs-server-card .ds-ico {
    font-size: 22px;
    color: var(--subheading-color, #8a8a8a);
    flex-shrink: 0;
}

.devs-server-card .ds-main {
    flex: 1;
    min-width: 0;
}

.devs-server-card .ds-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.devs-server-card .ds-meta {
    font-size: 12.5px;
    color: var(--subheading-color, #8a8a8a);
    margin-top: 3px;
}

.devs-server-card .ds-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ds-badge {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.1));
    color: var(--subheading-color, #8a8a8a);
}

.ds-badge.on {
    background: rgba(46, 204, 113, 0.14);
    color: #2ecc71;
}

.ds-badge.ok {
    background: rgba(56, 189, 248, 0.14);
    color: #38bdf8;
}

/* ── Attach button row ───────────────────────────────────────────────────── */
.devs-add-row {
    margin: 14px 0 4px;
}

.devs-primary-btn {
    background: var(--accent, #b7795c) !important;
    border-color: transparent !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
}

.devs-primary-btn:hover {
    filter: brightness(1.08);
}

.devs-primary-btn .material-symbols-rounded {
    font-size: 17px;
}

/* ── Server form ─────────────────────────────────────────────────────────── */
.devs-form {
    margin-top: 8px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    padding-top: 6px;
}

/* Inputs inside the form rows get full control width on stacked rows */
.devs-form .stg-row-control input[type="text"],
.devs-form .stg-row-control input[type="number"],
.devs-form .stg-row-control input[type="password"],
.devs-form .stg-row-control input[type="file"],
.devs-form .stg-row-control select,
.devs-form .stg-row-control textarea {
    width: 100%;
    min-width: 260px;
    max-width: 420px;
    box-sizing: border-box;
}

.devs-form .stg-row-control textarea {
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
}

.devs-form .stg-row-control input[type="file"] {
    padding: 8px 10px;
    font-size: 12.5px;
}

/* ── Status + form actions ───────────────────────────────────────────────── */
.devs-status {
    font-size: 12.5px;
    border-radius: 8px;
    padding: 9px 12px;
    display: none;
    margin: 8px 0;
}

.devs-status.ok    { display: block; background: rgba(46, 204, 113, 0.12); color: #2ecc71; }
.devs-status.err   { display: block; background: rgba(255, 107, 107, 0.12); color: #ff6b6b; }
.devs-status.info  { display: block; background: var(--secondary-hover-color, rgba(255, 255, 255, 0.1)); color: var(--text-color); }

.devs-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ── Compact screens ─────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .devs-server-card {
        flex-wrap: wrap;
    }
    .devs-server-card .ds-actions {
        width: 100%;
        justify-content: flex-end;
    }
}