/**
 * Campaign template editor: merge-tag chip pills and conditional-block
 * wrappers, in both the RichEditor body and the TokenLineInput subject
 * field. Loaded panel-wide from AdminPanelProvider (HEAD_END render hook);
 * the data-type attributes only ever appear inside those two editors.
 *
 * The pill deliberately carries NO vertical padding and inherits the line
 * height — vertical padding on an inline chip is what pushed lines apart in
 * the first chip iteration. Amber follows the panel's primary color.
 */

.fi-fo-rich-editor span[data-type="mergeTag"],
.campaign-token-line span[data-type="mergeTag"] {
    display: inline;
    padding: 0 0.4em;
    border-radius: 9999px;
    background-color: #fde68a; /* amber-200 */
    color: #78350f; /* amber-900 */
    font-size: 0.875em;
    font-weight: 500;
    line-height: inherit;
    white-space: nowrap;
    cursor: grab;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.dark .fi-fo-rich-editor span[data-type="mergeTag"],
.dark .campaign-token-line span[data-type="mergeTag"] {
    background-color: rgb(120 53 15 / 0.55); /* amber-900 */
    color: #fcd34d; /* amber-300 */
}

.fi-fo-rich-editor span[data-type="campaignCondition"] {
    border: 1px dashed rgb(180 83 9 / 0.55); /* amber-700 */
    border-radius: 0.375rem;
    padding: 0 0.3em;
    background-color: rgb(251 191 36 / 0.09); /* amber-400 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.dark .fi-fo-rich-editor span[data-type="campaignCondition"] {
    border-color: rgb(217 119 6 / 0.5); /* amber-600 */
    background-color: rgb(217 119 6 / 0.12);
}

/* The block's badge: names the condition so a wrapped run of text is never
   mistaken for ordinary copy. A pseudo-element, so it is not editable and
   never serializes into the form state. */
.fi-fo-rich-editor span[data-type="campaignCondition"]::before {
    content: 'if: ' attr(data-condition);
    margin-inline-end: 0.35em;
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #b45309; /* amber-700 */
    user-select: none;
}

.dark .fi-fo-rich-editor span[data-type="campaignCondition"]::before {
    color: #fbbf24; /* amber-400 */
}

/* Human label for the one known condition; the attr() fallback above keeps
   an unknown value legible rather than invisible. */
.fi-fo-rich-editor span[data-type="campaignCondition"][data-condition='one_founder']::before {
    content: 'if: one founder';
}

/* One authored block, one badge. The block is a MARK, so a run whose inner
   copy carries another mark (a bold word, a link) can render as several
   adjacent spans; every fragment after the first suppresses its badge.

   Both attributes are matched on the second element deliberately: the
   condition-specific rule above scores on type AND condition, so a selector
   matching only on type would lose the cascade and the duplicate badge would
   still render.

   Known limitation: CSS cannot see text nodes, so two genuinely separate
   same-condition blocks with nothing but plain text between them also count
   as adjacent here, and the second loses its badge. Cosmetic only — the
   stored markers are unaffected. */
.fi-fo-rich-editor
    span[data-type="campaignCondition"][data-condition]
    + span[data-type="campaignCondition"][data-condition]::before {
    content: none;
}

/* ---- TokenLineInput (the subject field) ------------------------------- */

.campaign-token-line {
    display: flex;
    align-items: center;
    width: 100%;
}

.campaign-token-line-editor {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.375rem 0.75rem;
    outline: none;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.campaign-token-line-editor span[data-type="mergeTag"] {
    cursor: default;
}

.campaign-token-line-picker {
    position: relative;
    flex: 0 0 auto;
    padding-inline-end: 0.375rem;
}

.campaign-token-line-picker > button {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    line-height: 1;
    color: #92400e; /* amber-800 */
    background-color: #fde68a; /* amber-200 */
}

.dark .campaign-token-line-picker > button {
    color: #fcd34d; /* amber-300 */
    background-color: rgb(120 53 15 / 0.55); /* amber-900 */
}

.campaign-token-line-picker-menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.25rem);
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 0 0 1px rgb(0 0 0 / 0.05);
}

.dark .campaign-token-line-picker-menu {
    background-color: #18181b; /* zinc-900 */
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.4),
        0 0 0 1px rgb(255 255 255 / 0.1);
}

.campaign-token-line-picker-menu > button {
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    text-align: start;
    font-size: 0.875rem;
}

.campaign-token-line-picker-menu > button:hover {
    background-color: rgb(251 191 36 / 0.15); /* amber-400 */
}

[x-cloak] {
    display: none !important;
}