/* PATCH 013 - SURFACE CANONICALIZATION */
.canonical-surface-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0;
}
.canonical-title-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--text, #f5f0df);
    background: color-mix(in srgb, var(--entity-accent, var(--entity-default, #ffd95a)) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--entity-accent, var(--entity-default, #ffd95a)) 48%, transparent);
    font-weight: 950;
    line-height: 1;
}

/* Relationship queue is a service surface, not a workspace floor. */
.canonical-service-surface[data-surface-role="service"] {
    position: fixed !important;
    left: auto !important;
    right: 12px !important;
    bottom: calc(var(--system-workspace-footer-height, 34px) + 12px) !important;
    top: auto !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-height: min(42vh, 420px) !important;
    overflow: auto !important;
    z-index: calc(var(--system-workspace-message-layer, 500) + 4) !important;
    pointer-events: auto !important;
}
.canonical-service-surface[data-surface-role="service"]:empty,
.canonical-service-surface[data-surface-role="service"]:has([data-pending-count="0"]):not(:hover):not(:focus-within) {
    display: none !important;
}

.ai-status {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
}
.canonical-system-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-weight: 850 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

/* Inspector workspace is a layered card plane. Current card is top-most. */
.inspector-stack-workspace {
    perspective: 1400px;
    transform-style: preserve-3d;
}
.inspector-stack-card {
    transform-origin: center top;
    transition: transform .16s ease, opacity .16s ease, filter .16s ease;
}
.inspector-stack-card-active {
    z-index: 30 !important;
    transform: translate3d(0, 0, 30px) !important;
}
.inspector-stack-card[data-stack-depth="1"] {
    z-index: 20 !important;
    transform: translate3d(18px, 18px, 10px) scale(.985) !important;
    opacity: .92;
}
.inspector-stack-card[data-stack-depth="2"] {
    z-index: 10 !important;
    transform: translate3d(36px, 36px, 0) scale(.97) !important;
    opacity: .78;
}

[data-runtime-role="template"]::after {
    content: "Template";
    margin-left: auto;
    color: var(--text-muted, #aeb4bd);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}