/* The address composer (B, app/aliases/composer.js): [ name | dice ] @ [ domain ▾ ] + one line about who can read. */
.vb-composer { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.vb-comp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); align-items: center; gap: var(--s2); min-width: 0; }
.vb-comp-name { position: relative; min-width: 0; }
.vb-comp-name .input { font-family: var(--mono); padding-right: calc(var(--ctl) - 2px); }
.vb-comp-name .in-btn, .vb-comp-dice { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--ctl) - 8px); height: calc(var(--ctl) - 8px); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.vb-comp-dice:hover { background: var(--surface-2); color: var(--text); }
.vb-comp-dice:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 0; }
.vb-comp-dice:active .ico { transform: rotate(90deg); transition: transform .12s; }
.vb-comp-at { font-size: 1.05rem; font-weight: 600; color: var(--muted); padding: 0 2px; }
.vb-comp-err:empty { display: none; }
.vb-comp-err { margin: 0; }
.vb-comp-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); }

/* one strip under the address: who can read its mail */
.vb-strip { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--radius-ctl); font-size: .85rem; line-height: 1.4; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.vb-strip .ico { width: 16px; height: 16px; margin-top: 1px; }
.vb-strip strong { color: var(--text); font-weight: 620; }
.vb-strip.private { border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.vb-strip.private .ico { color: var(--ok); }
.vb-strip.public { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.vb-strip.public .ico, .vb-strip.public strong { color: var(--danger); }

.vb-domain-picker { min-width: 240px; }

@media (max-width: 760px) {
  .vb-comp-row { grid-template-columns: auto minmax(0, 1fr); }
  .vb-comp-name { grid-column: 1 / -1; }
}