/* bubble — надпись в акцентной плашке.

   Родом из plusbutton: акцентная заливка и текст поверх неё остались,
   плюс ушёл. Плашка тянется по надписи, а края — половина высоты,
   поэтому получается бабл, а не прямоугольник.

   Высота — 30px: бабл меньше кнопки-плюса и тега, это вторичная
   подпись. При необходимости её можно переопределить переменной.

   В правке место надписи занимает поле, на него ложится подсказка-
   продолжение, а справа встаёт крестик: их показывает сам бабл, когда
   хозяин ряда пометит его is-editing. Для гостя и на чужой странице
   правки в разметке нет вовсе. */

.bubble {
    --bubble-height: 30px;
    --bubble-cross: 14px;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--bubble-height);
    padding: 0 12px;
    border-radius: calc(var(--bubble-height) / 2);
    background: var(--color-accent);
    color: var(--color-accent-fg);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
}

/* В правке плашке не нужен правый отступ: крестик — кнопка со своей
   подсветкой, и воздух вокруг неё даёт сама кнопка. */
.bubble.is-editing {
    padding-right: 6px;
}

/* Части правки в покое не показываются: вид бабла у владельца тот же,
   что у всех остальных, хотя поле, подсказка и крестик лежат в его
   разметке. */
.bubble__edit,
.bubble__remove {
    display: none;
}

/* Поле и подсказка стоят в одной ячейке: ячейка шириной по большему
   из них, поэтому плашка сразу встаёт по всей надписи, а хвост
   подсказки не вылезает за её край. */
.bubble.is-editing .bubble__edit {
    display: inline-grid;
    justify-items: start;
    align-items: center;
}

.bubble.is-editing .bubble__text {
    display: none;
}

.bubble.is-editing .bubble__remove {
    display: grid;
}

.bubble__field,
.bubble__hint {
    grid-area: 1 / 1;
}

/* Поле правки — та же плашка, только набранное можно менять: ни рамки,
   ни фона, шрифт и краска от бабла. Ширина идёт по тексту (field-sizing),
   поэтому плашка растёт вместе с надписью, а не стоит пустой коробкой. */
.bubble__field {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    field-sizing: content;
    outline: none;
}

/* Подсказка пустого поля — приглушённой краской бабла: это приглашение
   набрать, а не сама надпись. */
.bubble__field::placeholder {
    color: var(--color-on-accent-muted);
}

/* Подсказка-продолжение ложится на место поля (механизм — modules/suggest):
   набранное в ней повторяется прозрачным — оно держит место для хвоста,
   а буквы поля видно сквозь него. Хвост идёт приглушённой краской бабла,
   как и приглашение: это ещё не надпись, а то, чем она станет. */
.bubble__hint {
    pointer-events: none;
}

.bubble__hint[hidden] {
    display: none;
}

.bubble__hint-typed {
    color: transparent;
}

.bubble__hint-rest {
    color: var(--color-on-accent-muted);
}

/* Крестик — тот же приём, что у плюса: две полосы в одной коробке,
   только под 45°. Толщина — восьмая часть стороны, и краска берётся
   из цвета кнопки, как и у всего, что лежит на акценте. */
.bubble__remove {
    flex: none;
    place-items: center;
    width: var(--bubble-cross);
    height: var(--bubble-cross);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

/* Наведение — краской бабла, но реже обычных пятнадцати процентов:
   это же пятно на акцентной заливке, а не на тёмном фоне. */
.bubble__remove:hover {
    background: color-mix(in srgb, var(--color-accent-fg) 15%, transparent);
}

/* Фокус обводится краской бабла: акцент на акценте не виден. Обводка
   поля ставится самой плашке — внутри неё поле без рамки, и кольцо
   вокруг букв выглядело бы клеткой. */
.bubble:has(.bubble__field:focus-visible),
.bubble__remove:focus-visible {
    outline: 2px solid var(--color-accent-fg);
    outline-offset: 2px;
}

.bubble__cross {
    position: relative;
    width: var(--bubble-cross);
    height: var(--bubble-cross);
}

.bubble__cross::before,
.bubble__cross::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: calc(var(--bubble-cross) * 0.125);
    border-radius: 1px;
    background: currentColor;
}

.bubble__cross::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.bubble__cross::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .bubble__remove {
        transition: none;
    }
}

.bubble[data-removable="1"]:not(:has(.bubble__edit)) .bubble__remove { display: grid; }

.bubble__remove[data-standalone="1"] { display: grid; }

.bubble[data-variant="dismissible"] .bubble__remove {
    display: grid;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-accent);
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
    transition: opacity var(--motion-control-duration, 220ms) var(--motion-ease, ease), filter var(--motion-control-duration, 220ms) var(--motion-ease, ease),
        background-color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

.bubble[data-variant="dismissible"]:hover .bubble__remove,
.bubble[data-variant="dismissible"] .bubble__remove:focus-visible {
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
}
.bubble[data-variant="dismissible"] .bubble__remove:hover {
    background: color-mix(
        in srgb, var(--color-accent-fg) 15%, var(--color-accent)
    );
}

@media (prefers-reduced-motion: reduce) { .bubble[data-variant="dismissible"] .bubble__remove { transition: none; } }