/* Expression autocomplete ("[" menu) and coloured expression tags — tokens from voiceiq-ui.css */
.owned-field{position:relative}
.emotion-menu{position:absolute;left:0;right:0;bottom:100%;margin-bottom:8px;z-index:20;max-height:220px;overflow-y:auto;scrollbar-width:none;padding:6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.emotion-menu::-webkit-scrollbar{display:none}
.emotion-menu[hidden]{display:none}
.emotion-menu [role=option]{padding:9px 12px;border-radius:var(--radius-s);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--accent-text);cursor:pointer;transition:background .12s ease}
.emotion-menu [aria-selected=true],.emotion-menu [role=option]:hover{background:var(--accent-soft);color:var(--accent-text)}
.emotion-hint{font-size:11px;color:var(--faint);order:-1}
.owned-meta{flex-wrap:wrap;gap:8px}

/* Mirror layer that paints [expression] tags in colour underneath a transparent textarea.
   The textarea owns the caret and the selection; the mirror only draws the glyphs. For that to line
   up, every glyph in the mirror must be exactly as wide as the same glyph in the textarea: never change
   weight, size, spacing or padding on a tag, only its colour and background. */
.emotion-editor{position:relative}
.emotion-editor textarea.emotion-colored{color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:var(--text);display:block;position:relative;z-index:2;background:transparent!important}
.emotion-editor textarea::placeholder{color:var(--faint)!important;-webkit-text-fill-color:var(--faint)!important}
/* The site-wide ::selection rule gives selected text a solid colour, which would paint the textarea's own
   glyphs on top of the mirror and double the text. Keep them transparent and tint the selection instead. */
.emotion-editor textarea.emotion-colored::selection{color:transparent;-webkit-text-fill-color:transparent;background:color-mix(in srgb,var(--text) 20%,transparent)}
.emotion-mirror{position:absolute;top:0;left:0;pointer-events:none;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;overflow:hidden;border-style:solid;border-color:transparent;color:var(--text);z-index:1;margin:0}
.emotion-tag{color:var(--accent-text);-webkit-text-fill-color:var(--accent-text);font-weight:inherit;font-style:inherit;letter-spacing:inherit;border-radius:3px;background:color-mix(in srgb,var(--accent-text) 12%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-text) 12%,transparent)}