/* Capability console: Action Runtime cards.
   Scoped away from the global .btn rules, which are full-width by default. */
#panel-mcp-manager #cap-console-scenario {
    display: grid !important;
    grid-template-columns: minmax(130px, 1fr) minmax(240px, 1.45fr) auto;
    gap: 8px !important;
    align-items: center !important;
}

#panel-mcp-manager #cap-console-slug {
    width: 100%;
    min-width: 0 !important;
    height: 34px;
    box-sizing: border-box;
}

#panel-mcp-manager #cap-console-surface {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px !important;
    min-width: 0;
}

#panel-mcp-manager .cap-surface-btn,
#panel-mcp-manager #cap-console-scenario > .btn,
#panel-mcp-manager #cap-console-tabs .cap-console-tab {
    width: auto !important;
    min-width: 0;
    height: 34px;
    padding: 0 10px !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    /* Some themes (qirituan / construct / 等) put letter-spacing 0.5-1px +
       text-transform: uppercase on global .btn. On English-only labels
       like CHAT / TICK / TASK / PROPOSAL / SKILL / ASK that visual makes
       letters look "abnormally spread out" and pushes PROPOSAL past the
       row width so its tail gets clipped. Force normal letter rhythm and
       case (lowercase HTML stays lowercase, no auto-uppercase) here. */
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#panel-mcp-manager #cap-console-scenario > .btn {
    min-width: 64px;
}

#panel-mcp-manager #cap-console-tabs {
    gap: 4px !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
}

#cap-actions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#cap-actions-list .action-card {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    box-sizing: border-box;
    overflow: hidden;
}

#cap-actions-list .action-card-main {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

#cap-actions-list .action-card-badge {
    width: 38px;
    min-width: 38px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

#cap-actions-list .action-card-copy {
    min-width: 0;
}

#cap-actions-list .action-card-title {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}

#cap-actions-list .action-card-id {
    margin-top: 2px;
    color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.68rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#cap-actions-list .action-card-desc {
    margin-top: 8px;
    color: var(--text);
    opacity: 0.72;
    font-size: 0.74rem;
    line-height: 1.45;
    word-break: normal;
    overflow-wrap: anywhere;
}

#cap-actions-list .action-card-meta {
    margin-top: 6px;
    color: var(--text-secondary);
    opacity: 0.72;
    font-size: 0.66rem;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: anywhere;
}

#cap-actions-list .action-run-btn {
    appearance: none;
    width: auto !important;
    min-width: 76px;
    max-width: 96px;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 17px;
    background: var(--text);
    color: var(--bg);
    box-shadow: none;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 34px;
    text-align: center;
    white-space: nowrap;
    flex: 0 0 auto;
}

#cap-actions-list .action-run-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#cap-actions-list .action-result {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--border);
}

#cap-actions-list .action-result summary {
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}

#cap-actions-list .action-result-ok summary {
    color: #3f8f4a;
}

#cap-actions-list .action-result-error summary {
    color: #c62828;
}

#cap-actions-list .action-result pre {
    margin: 8px 0 0;
    padding: 10px;
    max-height: 220px;
    overflow: auto;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.045);
    color: var(--text);
    font-size: 0.68rem;
    line-height: 1.45;
    white-space: pre;
}

#cap-actions-list .action-result-detail {
    margin-top: 6px;
    font-size: 0.72rem;
    opacity: 0.8;
}

@media (max-width: 520px) {
    #panel-mcp-manager #cap-console-scenario {
        grid-template-columns: 1fr;
    }

    #panel-mcp-manager #cap-console-surface {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #cap-actions-list .action-card-main {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    #cap-actions-list .action-run-btn {
        grid-column: 2;
        justify-self: start;
        margin-top: 8px;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   AZOTH unified chip + status-dot system (M-档 visual contract).
   Applies across capability console: 行动 cards, 技能 skill cards,
   配置管理 摘要. MCP page intentionally not migrated here — its existing
   layout is the visual model the rest of the console mimics.
   ───────────────────────────────────────────────────────────────────── */

.az-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.az-chip {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 0.62rem;
    line-height: 1;
    font-weight: 600;
    /* letter-spacing intentionally normal — earlier 0.01em produced visible
       gaps between English letters (SKILL, ASK) while not changing Chinese
       glyphs, which read as "压缩/异常" on phones. Keep zh and en at the
       same rhythm. */
    letter-spacing: 0;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
}

/* Tool sub-card: nested card-in-card for skill > tool rendering. The skill
   card stays the outer container; each tool now reads as its own discrete
   sub-block instead of a continuous wall of dashed-line rows. */
.az-subcard {
    margin-bottom: 8px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.025);
    box-sizing: border-box;
}

.az-subcard:last-child {
    margin-bottom: 0;
}

.az-subcard-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    cursor: pointer;
}

.az-subcard-arrow {
    opacity: 0.55;
    font-size: 0.7rem;
    width: 10px;
    text-align: center;
}

.az-subcard-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--text);
    word-break: break-all;
}

.az-subcard-desc {
    margin-top: 5px;
    font-size: 0.72rem;
    line-height: 1.45;
    opacity: 0.7;
    word-break: normal;
    overflow-wrap: anywhere;
}

.az-subcard-meta {
    margin-top: 6px;
}

.az-subcard-explain {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.035);
    font-size: 0.7rem;
    line-height: 1.45;
    opacity: 0.85;
}

.az-subcard-note {
    margin-top: 5px;
    font-size: 0.65rem;
    opacity: 0.55;
}

.az-chip-ok {
    background: rgba(74, 142, 74, 0.13);
    color: #3f8f4a;
}

.az-chip-warn {
    background: rgba(201, 132, 60, 0.15);
    color: #b8731f;
}

.az-chip-danger {
    background: rgba(198, 40, 40, 0.13);
    color: #c62828;
}

.az-chip-muted {
    background: rgba(0, 0, 0, 0.045);
    color: var(--text-secondary);
    font-weight: 500;
}

.az-chip-info {
    background: rgba(63, 111, 176, 0.14);
    color: #3a6ea8;
}

/* Numeric chip with two-line content (label small / number big), used by
   skill card top-row counts (声明 / 装配 / 可见 / 未装配). */
.az-num-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 3px 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.045);
    color: var(--text-secondary);
    line-height: 1.05;
}

.az-num-chip > .az-num-chip-num {
    font-size: 0.85rem;
    font-weight: 700;
}

.az-num-chip > .az-num-chip-label {
    font-size: 0.55rem;
    opacity: 0.85;
    margin-top: 1px;
}

.az-num-chip-ok {
    background: rgba(74, 142, 74, 0.13);
    color: #3f8f4a;
}

.az-num-chip-info {
    background: rgba(63, 111, 176, 0.14);
    color: #3a6ea8;
}

.az-num-chip-warn {
    background: rgba(201, 132, 60, 0.15);
    color: #b8731f;
}

.az-num-chip-danger {
    background: rgba(198, 40, 40, 0.13);
    color: #c62828;
}

/* Last-run status dot, sits inline next to the action title.
   No emoji; pure CSS dot with semantic color. */
.action-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 7px;
    vertical-align: middle;
    transform: translateY(-1px);
}

.action-status-ok {
    background: #3f8f4a;
}

.action-status-err {
    background: #c62828;
}

/* Compact filter chips for the "技能" page top filter row.
   Matches the inline-flex pill style; overrides the .btn-sec heaviness
   that was making each filter look like a separate row on narrow phones. */
#cap-console-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Override global `.btn { width: 100%; margin-top: 10px; padding: 12px }`
   so the 7 filter chips actually wrap as a horizontal chip row instead of
   stacking. width:auto + margin:0 are the must-haves here; without them
   each chip stretches to the parent's full width and the row collapses to
   one chip per line (which is what was happening before this override). */
#cap-console-filter-pills .cap-filter-btn {
    width: auto !important;
    height: 24px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 0.68rem !important;
    line-height: 24px !important;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
    /* Same reason as the surface button override above: kill theme-level
       letter-spacing + uppercase so English labels (SKILL, ASK) read at
       normal letter rhythm and Chinese stays normal too. */
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#cap-console-filter-pills .cap-filter-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
}

.cap-package-card { border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:var(--card-bg); }
.cap-package-card__header { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.cap-package-actions, .cap-package-toolbar { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.cap-package-toolbar { margin-bottom:8px; }
.cap-package-kind, .cap-package-source { margin-left:6px; font-size:.66rem; opacity:.58; }
.cap-package-description { font-size:.72rem; opacity:.72; margin:7px 0; }
.cap-package-surfaces { display:flex; flex-wrap:wrap; gap:10px; font-size:.72rem; }
.cap-package-surfaces label { display:inline-flex; align-items:center; gap:4px; }
.cap-package-tools { margin-top:8px; font-size:.69rem; }
.cap-package-tools code { display:inline-block; margin:3px 4px 0 0; padding:2px 5px; border-radius:4px; background:var(--bg); }
.cap-runtime-preview { margin:0 0 9px; padding:8px 10px; border-left:3px solid var(--accent); background:var(--bg); border-radius:6px; font-size:.7rem; }
.cap-preview-summary, .cap-preview-reasons { display:flex; gap:8px; flex-wrap:wrap; }
.cap-preview-reasons { margin-top:5px; opacity:.7; }
.cap-preview-skills { display:flex; flex-direction:column; gap:3px; margin-top:6px; color:#c98200; }
.cap-empty { text-align:center; opacity:.55; padding:20px; }
.is-error { color:#c62828; }