/* Variable insert pills + optional chip editor (message templates) */

.variable-insert-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.5rem;
}

.variable-insert-pills-hint {
    margin-right: 0.25rem;
}

.variable-insert-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0 !important;
}

.variable-insert-pills-row .tag.variable-insert-pill,
.variable-insert-pills-row .variable-insert-pill.tag {
    cursor: pointer;
    border: none;
    font: inherit;
    margin: 0 !important;
    border-radius: 9999px;
    padding-left: 0.85em;
    padding-right: 0.85em;
}

.variable-insert-pills-row .tag.variable-insert-pill:focus,
.variable-insert-pills-row .variable-insert-pill.tag:focus {
    outline: 2px solid #3273dc;
    outline-offset: 2px;
}

.vmf-input-slot {
    width: 100%;
}

.vmf-chips-editor {
    min-height: 2.5em;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-break: break-word;
    padding: calc(0.5em - 1px) calc(0.75em - 1px);
    line-height: 1.5;
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    background-color: var(--input-bg);
    color: var(--input-text);
}

/*
 * Multiline: Bulma’s .textarea shares .input rules (inline-flex + height: 2.5em), which breaks
 * contenteditable. Reset to block layout, fixed initial height, internal scroll + vertical resize.
 */
.vmf-chips-editor.textarea {
    display: block;
    align-items: unset;
    justify-content: unset;
    min-height: 8em;
    height: 8em;
    max-height: min(80vh, 28rem);
    overflow-y: auto;
    overflow-x: hidden;
    resize: vertical;
}

/* Dark theme inherits bg/border/color from --input-* tokens. */

.vmf-chips-editor:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 0.125em rgba(37, 99, 235, 0.25);
}

.vmf-value-mirror.vmf-sr-mirror {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vmf-input-slot.vmf-has-chips-editor {
    position: relative;
}

.vmf-chip {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0 0.15rem 0.15rem 0 !important;
    user-select: none;
    max-width: 100%;
    border-radius: 9999px;
}

.vmf-chip .vmf-chip-label {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vmf-chip .delete {
    margin-left: 0.25rem !important;
    background: rgba(0, 0, 0, 0.15);
}

html[data-theme="dark"] .vmf-chip .delete,
body[data-theme="dark"] .vmf-chip .delete {
    background: rgba(255, 255, 255, 0.15);
}