/* Shared styling for the Automation / Guided Workflow variable pickers.
   Global (not scoped) because MudBlazor teleports popovers outside the component subtree. */

/* ---------------------------------------------------------------- Trigger */
.avim-trigger {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 8px;
    padding-inline: 0.5rem;
    color: var(--mud-palette-primary);
}

.avim-trigger--icon {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    color: var(--mud-palette-primary);
    transition: background-color 120ms ease, border-color 120ms ease;
}

.avim-trigger--icon:hover:not(:disabled) {
    border-color: var(--mud-palette-primary);
    background: rgba(59, 130, 246, 0.08);
}

/* ------------------------------------------------------------ Popover shell */
.avim-popover {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.avim-popover .mud-list {
    padding: 0;
}

/* These MudSelect/MudAutocomplete popovers are rendered at document level. */
.attribute-object-popover,
.attribute-attribute-popover {
    min-width: min(520px, 96vw);
    max-width: min(720px, 96vw);
}

.attribute-object-popover .mud-list-item-text,
.attribute-attribute-popover .mud-list-item-text {
    white-space: normal;
}

.avim-panel {
    display: flex;
    flex-direction: column;
    width: min(560px, 92vw);
    max-height: min(560px, 78vh);
    background: var(--mud-palette-surface);
}

/* ---------------------------------------------------------------- Header */
.avim-panel__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem 0.625rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.avim-panel__head--nested {
    padding-left: 0.5rem;
}

.avim-panel__title {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.avim-panel__title-text {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.avim-panel__expect {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.avim-panel__expect strong {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* ------------------------------------------------------- Search and scopes */
.avim-panel__controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
}

.avim-search .mud-input.mud-input-outlined {
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.avim-search .mud-input-helper-text {
    display: none;
}

.avim-scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.avim-scope {
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border-radius: 999px;
    padding: 0.1875rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avim-scope:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.avim-scope--active {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* ------------------------------------------------------------------ Body */
.avim-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 0.5rem 0.75rem;
}

.avim-group + .avim-group {
    margin-top: 0.5rem;
}

.avim-group__label {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
}

/* ------------------------------------------------------------------ Rows */
.avim-row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.avim-row:hover:not(:disabled) {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-divider);
}

.avim-row:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.avim-row--blocked {
    cursor: not-allowed;
    opacity: 0.6;
}

.avim-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    margin-top: 0.0625rem;
}

.avim-row__icon--group {
    background: rgba(59, 130, 246, 0.12);
    color: var(--mud-palette-info);
}

.avim-row__icon--field {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.avim-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;
    min-width: 0;
}

.avim-row__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.35;
}

.avim-row__sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.avim-row__sub--warn {
    color: var(--mud-palette-warning);
}

.avim-row__go {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-primary);
}

.avim-row__code {
    flex: 0 0 auto;
    max-width: 40%;
    padding: 0.125rem 0.375rem;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------- Type chips */
.avim-kind {
    display: inline-flex;
    align-items: center;
    padding: 0 0.375rem;
    border-radius: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    height: 1.125rem;
    border: 1px solid transparent;
}

.avim-kind--text,
.avim-kind--json {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}

.avim-kind--email {
    background: rgba(14, 165, 233, 0.14);
    color: #0369a1;
}

.avim-kind--number {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.avim-kind--boolean {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
}

.avim-kind--date {
    background: rgba(236, 72, 153, 0.14);
    color: #be185d;
}

.avim-kind--object {
    background: rgba(59, 130, 246, 0.16);
    color: #1d4ed8;
}

.avim-kind--list {
    background: rgba(6, 182, 212, 0.16);
    color: #0e7490;
}

.avim-kind--unknown {
    background: rgba(148, 163, 184, 0.18);
    color: #64748b;
}

/* ------------------------------------------------------- Empty and footer */
.avim-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 2rem 1rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.avim-empty span {
    font-size: 0.8125rem;
    font-weight: 500;
}

.avim-empty small {
    font-size: 0.75rem;
}

.avim-panel__foot {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

/* ================================================================
   Token text field (template fields: prompt, subject, body, notes)
   ================================================================ */
.gwtf {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

.gwtf__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 28px;
}

.gwtf__label {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.gwtf__required {
    color: var(--mud-palette-error);
}

.gwtf__hint {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin: -0.125rem 0 0;
}

/* Chips showing which variables the value currently uses */
.gwtf__tokens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.gwtf__tokens-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.gwtf-token {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gwtf-token--unknown {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.gwtf__validation {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--mud-palette-warning);
}

.gwtf__validation--info {
    color: var(--mud-palette-info);
}

/* ================================================================
   Variable / manual value picker (attribute fields)
   ================================================================ */
.avp__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 30px;
}

.avp__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.avp__header-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.avp__segmented {
    display: inline-flex;
    padding: 2px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
}

.avp__segment {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.avp__segment:hover {
    color: var(--mud-palette-primary);
}

.avp__segment:focus-visible,
.avp__link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.avp__segment--active {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.avp__segment .mud-icon-root {
    font-size: 0.9375rem;
}

.avp__selection {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.avp__selection-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avp__selection-chip--warn {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.avp__link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.avp__link--warn {
    color: var(--mud-palette-warning);
}

.avp__validation {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--mud-palette-warning);
}

.avp__validation--info {
    color: var(--mud-palette-info);
}

/* Item fields available on a selected collection */
.avp__fields {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
}

.avp__fields-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.avp__fields-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.avp__field-chip {
    padding: 0.0625rem 0.375rem;
    border-radius: 5px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    line-height: 1.6;
}

.avp__fields-more {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

/* ================================================================
   Inline @ mention suggestions
   ================================================================ */
.avmf {
    position: relative;
}

.avmf__field .mud-input.mud-input-outlined {
    border-radius: 8px;
}

.avmf__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2000;
    margin-top: 6px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.avmf__menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.avmf__list {
    max-height: 300px;
    overflow-y: auto;
    padding: 0.25rem;
}

.avmf__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4375rem 0.5rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.avmf__item:hover {
    background: var(--mud-palette-action-default-hover);
}

.avmf__item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.avmf__item--active {
    background: rgba(59, 130, 246, 0.12);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35);
}

.avmf__item-main {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    flex: 1 1 auto;
    min-width: 0;
}

.avmf__item-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.avmf__item-path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avmf__foot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.avmf__key {
    display: inline-flex;
    align-items: center;
    padding: 0 0.3125rem;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.625rem;
    margin-right: 0.25rem;
}

/* -------------------------------- Guided workflow available-variables panel */
.gwv-panel {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.gwv-panel__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.875rem;
    border: 0;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.9), rgba(248, 250, 252, 0.96));
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.gwv-panel__toggle:hover {
    background: linear-gradient(180deg, rgba(219, 234, 254, 0.95), rgba(241, 245, 249, 1));
}

.gwv-panel__toggle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.gwv-panel__toggle-main {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.gwv-panel__toggle-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.gwv-panel__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-size: 0.6875rem;
    font-weight: 700;
}

html:not([data-theme="light"]) .gwv-panel {
    border-color: rgba(255, 255, 255, 0.1);
    background: var(--syba-surface-inset, #232328);
}

html:not([data-theme="light"]) .gwv-panel__toggle {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--mud-palette-info) 14%, var(--syba-surface-elevated, #333338)),
        var(--syba-surface-inset, #232328)
    );
    color: rgba(255, 255, 255, 0.92);
}

html:not([data-theme="light"]) .gwv-panel__toggle:hover {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--mud-palette-info) 22%, var(--syba-surface-elevated, #333338)),
        color-mix(in srgb, var(--mud-palette-info) 8%, var(--syba-surface-inset, #232328))
    );
}

html:not([data-theme="light"]) .gwv-panel__count {
    background: rgba(1, 208, 255, 0.16);
    color: #7dd3fc;
}

html:not([data-theme="light"]) .gwv-panel__body {
    background: var(--syba-surface-inset, #232328);
    border-top-color: rgba(255, 255, 255, 0.08);
}

html:not([data-theme="light"]) .gwv-panel__empty {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.62);
}

.gwv-panel__body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.gwv-panel__hint {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.gwv-panel__hint code {
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
}

.gwv-panel__search .mud-input.mud-input-outlined {
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
}

.gwv-panel__empty {
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.gwv-panel__list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gwv-group__label {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.25rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
}

.gwv-row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.gwv-row:hover {
    background: rgba(239, 246, 255, 0.85);
    border-color: rgba(37, 99, 235, 0.16);
}

.gwv-row:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.gwv-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    margin-top: 0.0625rem;
}

.gwv-row__icon--field {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.gwv-row__icon--object {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.gwv-row__icon--list {
    background: rgba(14, 165, 233, 0.14);
    color: #0369a1;
}

.gwv-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;
    min-width: 0;
}

.gwv-row__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.35;
}

.gwv-row__sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gwv-row__go {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
    opacity: 0.75;
}

.gwv-row:hover .gwv-row__go {
    opacity: 1;
}

.gwv-row__code {
    flex: 0 0 auto;
    max-width: 42%;
    padding: 0.125rem 0.375rem;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:not([data-theme="light"]) .gwv-row:hover {
    background: rgba(1, 208, 255, 0.1);
    border-color: rgba(1, 208, 255, 0.28);
}

html:not([data-theme="light"]) .gwv-row__icon--field {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

html:not([data-theme="light"]) .gwv-row__icon--object {
    background: rgba(1, 208, 255, 0.14);
    color: #7dd3fc;
}

html:not([data-theme="light"]) .gwv-row__icon--list {
    background: rgba(56, 189, 248, 0.16);
    color: #bae6fd;
}

html:not([data-theme="light"]) .gwv-group__label {
    background: var(--syba-surface-inset, #232328);
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 600px) {
    .avim-panel {
        width: min(94vw, 560px);
        max-height: 72vh;
    }

    .avim-row__code,
    .avim-row__go-text,
    .gwv-row__code {
        display: none;
    }

    .avp__header {
        align-items: flex-start;
    }

    .avmf__foot {
        display: none;
    }
}