/* @ tags in the prompt: see prompt-tags.js. The editor copies its box from the textarea it
   replaces, so every studio keeps its own look; only the tags, the list and the preview are here. */
.mpt-source { display: none !important; }
.mpt-editor { display: block; width: 100%; box-sizing: border-box; outline: none; white-space: pre-wrap; overflow-wrap: anywhere;
  overflow-y: auto; max-height: 360px; cursor: text; resize: none; }
.mpt-editor:focus { border-color: #7C4DFF !important; box-shadow: 0 0 0 3px rgba(124, 77, 255, .18) !important; }
.mpt-editor.is-empty::before { content: attr(data-placeholder); color: rgba(178, 186, 200, .62); pointer-events: none; white-space: pre-wrap; }
/* the box and its @ button */
.mpt-wrap { position: relative; display: block; width: 100%; min-width: 0; }
.mpt-wrap > .mpt-editor { padding-right: 52px !important; }
.mpt-at { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; margin: 0;
  border-radius: 999px; border: 1px solid rgba(167, 139, 250, .5); background: rgba(124, 58, 237, .18); color: #EDE9FE;
  font: 700 16px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .15s, border-color .15s; }
.mpt-at:hover { background: rgba(124, 58, 237, .32); border-color: #C4B5FD; color: #fff; }
.mpt-at:focus-visible { outline: 2px solid #C4B5FD; outline-offset: 2px; }

.mpt-chip { display: inline-flex; align-items: center; gap: .3em; margin: 0 .1em; padding: .08em .45em .08em .14em; vertical-align: -.22em;
  border-radius: .55em; background: rgba(124, 77, 255, .16); border: 1px solid rgba(167, 139, 250, .45); color: #d4c6ff;
  font-weight: 600; line-height: 1.25; white-space: nowrap; user-select: all; cursor: default; }
.mpt-chip img { width: 1.35em; height: 1.35em; border-radius: .35em; object-fit: cover; display: block; }
.mpt-chip b { font-weight: 600; }
.mpt-chip.is-missing { background: rgba(255, 59, 92, .1); border-color: rgba(255, 59, 92, .5); color: #ff9aac; }
.mpt-ico { display: inline-flex; width: 1.35em; height: 1.35em; border-radius: .35em; align-items: center; justify-content: center;
  background: rgba(167, 139, 250, .2); font-style: normal; }
.mpt-ico svg { width: 72%; height: 72%; }
.mpt-ico.big { width: 40px; height: 40px; border-radius: 9px; }

.mpt-pop { position: absolute; z-index: 9999; max-height: 280px; overflow-y: auto; padding: 6px; border-radius: 14px;
  background: #111824; border: 1px solid rgba(148, 163, 184, .22); box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  font: 500 14px/1.3 Inter, system-ui, sans-serif; color: #F7F8FA; }
.mpt-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mpt-item img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; }
.mpt-item span { display: flex; flex-direction: column; min-width: 0; }
.mpt-item b { font-weight: 700; color: #d4c6ff; }
.mpt-item small { color: #B2BAC8; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpt-item:hover, .mpt-item.is-active { background: rgba(124, 77, 255, .18); }
.mpt-empty { padding: 10px; color: #B2BAC8; font-size: 13px; }

.mpt-peek { position: absolute; z-index: 9999; padding: 6px; border-radius: 12px; background: #111824; border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55); pointer-events: none; text-align: center; font: 700 12px Inter, system-ui, sans-serif; color: #d4c6ff; }
.mpt-peek img { display: block; width: 150px; height: 150px; object-fit: cover; border-radius: 8px; margin-bottom: 5px; }