/* Inline message editor (js/message-studio.js): the preview is a Discord message you type into. */
html .app-shell #settingsForm .message-studio {
  --studio-bg: #313338; --studio-card: #2b2d31; --studio-line: #3f4147; --studio-text: #dbdee1; --studio-strong: #f2f3f5;
  --studio-muted: #949ba4; --studio-link: #00a8fc; --studio-input: rgba(0, 0, 0, .18); --studio-focus: var(--t-accent, #9fdcc8);
  position: relative; overflow: visible !important; border-radius: 14px !important; background: var(--studio-bg) !important;
}
html .app-shell #settingsForm .message-studio::before { display: none !important; }
/* The editor takes the whole section width under the message type (the read-only preview had a side column). */
html:root body #appView.app-shell #formFields :is(.field-group-body, [data-preview-host], .auto-response-body):has(> .message-studio[data-studio]) { grid-template-columns: minmax(0, 1fr) !important; }
html:root body #appView.app-shell #formFields :is(.field-group-body, [data-preview-host], .auto-response-body) > .message-live-preview.message-studio[data-studio],
html:root body .app-shell #settingsForm .message-live-preview.message-studio[data-studio] { grid-column: 1 / -1 !important; grid-row: auto !important; position: relative !important; top: auto !important; width: 100% !important; max-width: 820px; margin: 6px 0 4px !important; }
html:root body .app-shell #settingsForm .message-studio[data-studio] > .studio-bar { margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html:root body .app-shell #settingsForm .message-studio[data-studio] .discord-preview-stage { border-radius: 12px !important; }
.message-studio .studio-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.message-studio .studio-bar > span { display: grid; gap: 2px; min-width: 0; }
.message-studio .studio-bar b { color: var(--t-text, var(--studio-strong)); font-size: 13px; }
.message-studio .studio-bar small { color: var(--t-muted, var(--studio-muted)); font-size: 11px; }
.message-studio .studio-mode { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px; color: var(--studio-strong); border: 1px solid var(--studio-line); border-radius: 8px; background: #383a40; font: inherit; font-size: 12px; cursor: pointer; }
.message-studio .studio-mode:hover { background: #404249; }
.message-studio svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html .app-shell #settingsForm .message-studio .discord-preview-stage { padding: 16px 16px 18px !important; background: var(--studio-bg) !important; border-radius: 0 0 14px 14px; }
html .app-shell #settingsForm .message-studio .discord-preview-message { grid-template-columns: 40px minmax(0, 1fr); max-width: 100%; color: var(--studio-text); font-family: "gg sans", "Noto Sans", system-ui, sans-serif; }
html .app-shell #settingsForm .message-studio .discord-preview-author { display: flex !important; margin-bottom: 4px; }
html .app-shell #settingsForm .message-studio .discord-preview-author strong { color: var(--studio-strong); }
html .app-shell #settingsForm .message-studio .discord-preview-copy { width: 100%; min-width: 0; }
.message-studio .studio-gutter { display: flex; flex-direction: column; align-items: center; gap: 8px; }
html .app-shell #settingsForm .message-studio .studio-gutter > img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: none; }
.message-studio .studio-color { display: block; width: 26px; height: 26px; padding: 0; border: 2px solid rgba(255, 255, 255, .14); border-radius: 7px; background: var(--studio-accent, #5865f2); cursor: pointer; }
.message-studio:not(.studio-has-color) .studio-color { background: repeating-conic-gradient(#4e5058 0 25%, #383a40 0 50%) 50% / 10px 10px; }
.message-studio .studio-color:hover { border-color: rgba(255, 255, 255, .4); }
.message-studio .studio-color-reset { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; color: var(--studio-muted); border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.message-studio .studio-color-reset:hover { color: var(--studio-strong); background: #404249; }
.message-studio .studio-color-reset svg { width: 13px; height: 13px; }
.message-studio [hidden] { display: none !important; }

/* Edit mode shows the editor, preview mode the rendered message. */
.message-studio[data-studio-mode="edit"] .discord-preview-plain,
.message-studio[data-studio-mode="edit"] [data-preview-card],
.message-studio[data-studio-mode="edit"] [data-preview-image],
.message-studio[data-studio-mode="edit"] [data-preview-empty],
.message-studio[data-studio-mode="edit"] .discord-preview-copy > .preview-components { display: none !important; }
.message-studio[data-studio-mode="view"] [data-studio-edit] { display: none !important; }
.message-studio[data-studio-mode="view"] .studio-color, .message-studio[data-studio-mode="view"] .studio-color-reset { display: none !important; }

.message-studio .studio-edit { position: relative; display: grid; gap: 6px; }
.message-studio .studio-edit input:not([type="color"]):not([type="hidden"]),
.message-studio .studio-edit textarea,
.message-studio .studio-edit select {
  width: 100%; min-width: 0; margin: 0; padding: 6px 8px; color: var(--studio-text); border: 1px solid transparent; border-radius: 6px;
  background: var(--studio-input); font: inherit; font-size: 13.5px; line-height: 1.45; box-shadow: none; outline: none; transition: border-color .15s, background .15s;
}
.message-studio .studio-edit textarea { min-height: 36px; resize: vertical; overflow-wrap: anywhere; }
.message-studio .studio-edit input:not([type="color"]):hover, .message-studio .studio-edit textarea:hover { background: rgba(0, 0, 0, .26); }
.message-studio .studio-edit input:not([type="color"]):focus, .message-studio .studio-edit textarea:focus { border-color: var(--studio-focus); background: rgba(0, 0, 0, .3); }
.message-studio .studio-edit ::placeholder { color: #6d737c; opacity: 1; }
.message-studio .studio-edit .studio-title { color: var(--studio-strong); font-size: 15px; font-weight: 700; }
.message-studio .studio-plain { display: grid; gap: 6px; max-width: 640px; }

.message-studio .studio-card { position: relative; display: grid; gap: 8px; max-width: 560px; padding: 12px 14px 12px 16px; border: 1px solid var(--studio-line); border-radius: 6px; background: var(--studio-card); }
.message-studio .studio-card::before { position: absolute; inset: -1px auto -1px -1px; width: 4px; border-radius: 6px 0 0 6px; background: var(--studio-accent, transparent); content: ""; }
[dir="rtl"] .message-studio .studio-card::before { inset: -1px -1px -1px auto; border-radius: 0 6px 6px 0; }
.message-studio[data-style="components-v2"]:not(.studio-has-color) .studio-card::before { display: none; }
.message-studio[data-style="components-v2"] .studio-card { border-radius: 8px; }
.message-studio .studio-card-top { display: flex; align-items: flex-start; gap: 12px; }
/* In a container the footer is part of the text, above the big picture and the buttons (as the bot sends it). */
.message-studio[data-style="components-v2"] .studio-card > .studio-footer { order: 1; }
.message-studio[data-style="components-v2"] .studio-card > .studio-banner { order: 2; }
.message-studio[data-style="components-v2"] .studio-card > .studio-components { order: 3; }
.message-studio .studio-card-main { display: grid; flex: 1; gap: 6px; min-width: 0; }
.message-studio .studio-author, .message-studio .studio-footer, .message-studio .studio-title-row { display: flex; align-items: center; gap: 8px; }
.message-studio .studio-author input { max-width: 320px; font-size: 13px !important; font-weight: 600; }
.message-studio .studio-title-row .studio-title { flex: 1; }
.message-studio .studio-footer input { flex: 1; font-size: 12px !important; }

.message-studio .studio-icon-slot { position: relative; display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; overflow: hidden; color: var(--studio-muted); border: 1px dashed #5c5f66; border-radius: 50%; background: transparent; cursor: pointer; }
.message-studio .studio-icon-slot.small { width: 22px; height: 22px; }
.message-studio .studio-icon-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.message-studio .studio-icon-slot.has-image { border-style: solid; border-color: transparent; }
.message-studio .studio-icon-slot.has-image > span { display: none; }
.message-studio .studio-icon-slot svg { width: 13px; height: 13px; }
.message-studio .studio-link { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; color: var(--studio-muted); border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.message-studio .studio-link:hover, .message-studio .studio-icon-slot:hover { color: var(--studio-strong); background: #404249; }
.message-studio .studio-link.active { color: var(--studio-link); }

.message-studio .studio-thumb { position: relative; display: grid; place-items: center; flex: none; width: 80px; height: 80px; padding: 0; overflow: hidden; color: var(--studio-muted); border: 1px dashed #5c5f66; border-radius: 6px; background: rgba(0, 0, 0, .12); cursor: pointer; }
.message-studio .studio-thumb > span { display: grid; justify-items: center; gap: 4px; }
.message-studio .studio-thumb small { font-size: 10px; }
.message-studio .studio-thumb img, .message-studio .studio-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.message-studio .studio-thumb.has-image, .message-studio .studio-banner.has-image { border-style: solid; border-color: transparent; }
.message-studio .studio-thumb.has-image > span, .message-studio .studio-banner.has-image > span { display: none; }
.message-studio .studio-banner { position: relative; display: grid; place-items: center; width: 100%; min-height: 120px; padding: 18px; overflow: hidden; color: var(--studio-muted); border: 1px dashed #5c5f66; border-radius: 8px; background: rgba(0, 0, 0, .14); cursor: pointer; }
.message-studio .studio-banner.has-image { min-height: 0; padding: 0; aspect-ratio: 16 / 7; }
.message-studio .studio-banner.big { max-width: 520px; min-height: 180px; }
.message-studio .studio-banner > span { display: grid; justify-items: center; gap: 6px; text-align: center; }
.message-studio .studio-banner > span svg { width: 28px; height: 28px; padding: 7px; box-sizing: content-box; color: var(--t-accent, #9fdcc8); border-radius: 9px; background: #1e1f22; }
.message-studio .studio-banner b { color: var(--studio-strong); font-size: 13px; }
.message-studio .studio-banner small { font-size: 11px; }
.message-studio .studio-thumb:hover, .message-studio .studio-banner:hover { border-color: #80848e; background: rgba(0, 0, 0, .22); }
.message-studio .studio-thumb.has-image:hover, .message-studio .studio-banner.has-image:hover { outline: 2px solid var(--studio-focus); outline-offset: 2px; }

.message-studio .studio-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.message-studio .studio-fields:empty { display: none; }
.message-studio .studio-field { display: grid; grid-column: 1 / -1; gap: 4px; padding: 8px; border: 1px solid var(--studio-line); border-radius: 6px; background: rgba(0, 0, 0, .1); }
.message-studio .studio-field.inline { grid-column: span 1; }
.message-studio .studio-field input { font-weight: 700; font-size: 12.5px !important; }
.message-studio .studio-field textarea { font-size: 12.5px !important; }
.message-studio .studio-field-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.message-studio .studio-remove { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: var(--studio-muted); border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.message-studio .studio-remove:hover { color: #f23f43; background: rgba(242, 63, 67, .12); }
.message-studio .studio-remove svg { width: 14px; height: 14px; }
.message-studio .studio-add-field { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 6px; color: var(--t-accent, #9fdcc8); border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 12.5px; cursor: pointer; }
.message-studio .studio-add-field:hover { background: var(--t-accent-soft, rgba(159, 220, 200, .12)); }
.message-studio .studio-add-field:disabled { opacity: .4; cursor: not-allowed; }
.message-studio .studio-chip { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 26px; padding: 0 9px; color: var(--studio-muted); border: 1px solid var(--studio-line); border-radius: 999px; background: transparent; font: inherit; font-size: 11.5px; cursor: pointer; }
.message-studio .studio-chip svg { width: 13px; height: 13px; }
.message-studio .studio-chip:hover { color: var(--studio-strong); border-color: #5c5f66; }
.message-studio .studio-chip[aria-pressed="true"] { color: var(--t-accent, #9fdcc8); border-color: var(--t-accent-line, rgba(159, 220, 200, .35)); background: var(--t-accent-soft, rgba(159, 220, 200, .12)); }
.message-studio .studio-components:empty, .message-studio .studio-outside-components:empty { display: none; }
.message-studio .studio-components .preview-components, .message-studio .studio-outside-components .preview-components { margin-top: 0; pointer-events: none; }
.message-studio .studio-hint { color: var(--studio-muted); font-size: 11px; line-height: 1.5; }
.message-studio .studio-hint:empty { display: none; }

.message-studio .studio-popover { position: absolute; z-index: 30; inset-inline-start: 0; display: grid; gap: 8px; width: min(360px, 100%); padding: 12px; color: var(--studio-text); border: 1px solid var(--studio-line); border-radius: 10px; background: #1e1f22; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.message-studio .studio-popover.wide { width: min(460px, 100%); }
.message-studio .studio-popover > label { color: var(--studio-strong); font-size: 12px; font-weight: 700; }
.message-studio .studio-popover .field { margin: 0; }
.message-studio .studio-token-row { display: flex; flex-wrap: wrap; gap: 6px; }
.message-studio .studio-done { justify-self: end; height: 30px; padding: 0 14px; color: var(--t-accent-ink, #0b1a16); font-weight: 600; border: 0; border-radius: 6px; background: var(--studio-focus); font: inherit; font-size: 12px; cursor: pointer; }
.message-studio .studio-done:hover { filter: brightness(1.1); }

/* Preview mode: the extras drawn on the rendered card. */
.message-studio .studio-view-author { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--studio-strong); font-size: 13px; font-weight: 600; }
.message-studio .studio-view-author img, .message-studio .studio-view-footer img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.message-studio .studio-view-footer img { width: 18px; height: 18px; }
.message-studio .studio-view-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; clear: both; margin-top: 8px; }
.message-studio .studio-view-fields > div { display: grid; grid-column: 1 / -1; gap: 2px; font-size: 12.5px; }
.message-studio .studio-view-fields > div.inline { grid-column: span 1; }
.message-studio .studio-view-fields b { color: var(--studio-strong); }
.message-studio .studio-view-fields span { white-space: pre-wrap; overflow-wrap: anywhere; }
.message-studio .studio-view-footer { display: flex; align-items: center; gap: 8px; clear: both; margin-top: 10px; color: var(--studio-muted); font-size: 11.5px; }
html .app-shell #settingsForm .message-studio [data-preview-title].studio-linked { color: var(--studio-link); }
html .app-shell #settingsForm .message-studio[data-studio-mode="view"] .discord-preview-card { background: var(--studio-card) !important; border-color: var(--studio-line) !important; }
html .app-shell #settingsForm .message-studio[data-studio-mode="view"] .discord-preview-card::before { background: var(--studio-accent, transparent); }
html .app-shell #settingsForm .message-studio[data-studio-mode="view"][data-style="components-v2"]:not(.studio-has-color) .discord-preview-card::before { display: none; }

/* The page's own inputs that moved into the message leave their empty labels behind. */
html .app-shell #settingsForm .studio-moved { display: none !important; }
.message-studio .studio-picture-field > label { color: var(--studio-strong); font-size: 12px; }

@media (max-width: 620px) {
  .message-studio .studio-bar small { display: none; }
  html .app-shell #settingsForm .message-studio .discord-preview-stage { padding: 12px 10px 14px !important; }
  html .app-shell #settingsForm .message-studio .discord-preview-message { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  html .app-shell #settingsForm .message-studio .studio-gutter > img { width: 30px; height: 30px; }
  .message-studio .studio-card { padding: 10px 10px 10px 12px; }
  .message-studio .studio-thumb { width: 60px; height: 60px; }
  .message-studio .studio-fields, .message-studio .studio-view-fields { grid-template-columns: minmax(0, 1fr); }
  .message-studio .studio-field.inline, .message-studio .studio-view-fields > div.inline { grid-column: 1 / -1; }
}

/* Emoji buttons, uploads and the checks box. */
.message-studio .studio-plain, .message-studio .studio-body-slot { position: relative; }
.message-studio .studio-emoji { position: absolute; z-index: 2; inset-inline-end: 6px; bottom: 6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: var(--studio-muted); border: 0; border-radius: 6px; background: rgba(30, 31, 34, .7); cursor: pointer; }
.message-studio .studio-emoji.inline { position: static; background: transparent; }
.message-studio .studio-emoji:hover { color: #fee75c; background: #404249; }
.message-studio .studio-plain .studio-body, .message-studio .studio-body-slot .studio-body { padding-inline-end: 38px; }
.message-studio .studio-upload { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; color: var(--studio-text); border: 1px dashed #5c5f66; border-radius: 8px; background: rgba(0, 0, 0, .18); font: inherit; text-align: start; cursor: pointer; }
.message-studio .studio-upload:hover { border-color: var(--t-accent, #9fdcc8); background: var(--t-accent-soft, rgba(159, 220, 200, .12)); }
.message-studio .studio-upload > svg { width: 22px; height: 22px; padding: 6px; box-sizing: content-box; color: var(--t-accent, #9fdcc8); border-radius: 8px; background: #2b2d31; }
.message-studio .studio-upload span { display: grid; gap: 2px; }
.message-studio .studio-upload b { color: var(--studio-strong); font-size: 12.5px; }
.message-studio .studio-upload small { color: var(--studio-muted); font-size: 11px; }
.message-studio .mt-dragging, .mt-dragging { outline: 2px dashed var(--t-accent, #9fdcc8) !important; outline-offset: 2px; background: var(--t-accent-soft, rgba(159, 220, 200, .12)) !important; }
:is(.message-studio, .mc) .studio-checks { display: grid; gap: 4px; max-width: 560px; padding: 10px 12px; color: #f0c674; border: 1px solid rgba(240, 178, 50, .35); border-radius: 8px; background: rgba(240, 178, 50, .08); font-size: 12px; }
:is(.message-studio, .mc) .studio-checks b { font-size: 12.5px; }
:is(.message-studio, .mc) .studio-checks ul { margin: 0; padding-inline-start: 18px; }
:is(.message-studio, .mc) .studio-checks.ready { color: var(--t-accent, #9fdcc8); border-color: var(--t-accent-line, rgba(159, 220, 200, .35)); background: var(--t-accent-soft, rgba(159, 220, 200, .12)); }
:is(.message-studio, .mc) .studio-checks:empty { display: none; }

/* Floating panels of js/message-tools.js (colour and emoji pickers). */
.mt-popover { position: fixed; z-index: 1000; display: grid; gap: 10px; padding: 12px; color: #dbdee1; border: 1px solid #3f4147; border-radius: 12px; background: #1e1f22; box-shadow: 0 18px 48px rgba(0, 0, 0, .5); font-size: 12.5px; }
.mt-popover b { color: #f2f3f5; }
.mt-popover small { color: #949ba4; }
.mt-color { width: 268px; }
.mt-color-row { display: flex; align-items: center; gap: 8px; }
.mt-color-swatch { position: relative; flex: none; width: 38px; height: 38px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .14); border-radius: 9px; background: var(--mt-color); cursor: pointer; }
.mt-color-swatch input { position: absolute; inset: -8px; width: 56px; height: 56px; opacity: 0; cursor: pointer; }
.mt-color-row input[data-mt-hex] { flex: 1; min-width: 0; height: 38px; padding: 0 10px; color: #f2f3f5; border: 1px solid #3f4147; border-radius: 8px; background: #111214; font: 600 13px ui-monospace, monospace; }
.mt-color-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.mt-color-grid button { aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 7px; background: var(--mt-color); cursor: pointer; }
.mt-color-grid button:hover { border-color: #fff; transform: scale(1.08); }
.mt-link { justify-self: start; padding: 2px 0; color: var(--t-accent, #9fdcc8); border: 0; background: none; font: inherit; cursor: pointer; }
.mt-emoji { width: min(340px, calc(100vw - 16px)); }
.mt-emoji input[data-mt-search] { height: 36px; padding: 0 10px; color: #f2f3f5; border: 1px solid #3f4147; border-radius: 8px; background: #111214; font: inherit; }
.mt-emoji-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.mt-emoji-tabs button { height: 26px; padding: 0 9px; color: #b5bac1; border: 0; border-radius: 999px; background: #2b2d31; font: inherit; font-size: 11.5px; cursor: pointer; }
.mt-emoji-tabs button[aria-pressed="true"] { color: var(--t-accent-ink, #0b1a16); background: var(--t-accent, #9fdcc8); }
.mt-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 230px; overflow-y: auto; }
.mt-emoji-grid button { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 21px; line-height: 1; cursor: pointer; }
.mt-emoji-grid button:hover { background: #2b2d31; }
.mt-emoji-grid img { width: 26px; height: 26px; object-fit: contain; }
.mt-emoji-grid p { grid-column: 1 / -1; margin: 8px 0; color: #949ba4; text-align: center; }

/* Picture and link panels (js/message-tools.js). */
.mt-image, .mt-link-panel { width: min(320px, calc(100vw - 16px)); }
.mt-upload { display: grid; gap: 2px; width: 100%; padding: 12px; color: #f2f3f5; border: 1px dashed #5c5f66; border-radius: 9px; background: #111214; font: inherit; text-align: center; cursor: pointer; }
.mt-upload:hover { border-color: var(--t-accent, #9fdcc8); background: var(--t-accent-soft, rgba(159, 220, 200, .12)); }
.mt-token-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-token-row button { height: 28px; padding: 0 10px; color: #b5bac1; border: 1px solid #3f4147; border-radius: 999px; background: transparent; font: inherit; font-size: 11.5px; cursor: pointer; }
.mt-token-row button[aria-pressed="true"], .mt-token-row button:hover { color: var(--t-accent, #9fdcc8); border-color: var(--t-accent, #9fdcc8); }
.mt-popover input[data-mt-url] { height: 36px; padding: 0 10px; color: #f2f3f5; border: 1px solid #3f4147; border-radius: 8px; background: #111214; font: inherit; }
.mt-image-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mt-done { height: 30px; padding: 0 14px; color: var(--t-accent-ink, #0b1a16); border: 0; border-radius: 7px; background: var(--t-accent, #9fdcc8); font-weight: 600; font: inherit; cursor: pointer; }
.mt-link.danger { color: #f23f43; }

/* Message composer (js/message-composer.js) on the bot sender page. */
.mc { display: grid; gap: 14px; grid-column: 1 / -1; min-width: 0; }
.mc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mc-kinds, .mc-views { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--t-line, #2b2f33); border-radius: 12px; background: var(--t-surface, #111416); }
.mc-kinds button, .mc-views button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; color: var(--t-muted, #9aa3a8); border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.mc-kinds button[aria-selected="true"], .mc-views button[aria-selected="true"] { color: var(--t-text, #fff); background: var(--t-surface-hover, #23282b); }
.mc-badge { padding: 1px 6px; color: var(--t-accent, #9fdcc8); border-radius: 6px; background: var(--t-accent-soft, rgba(159, 220, 200, .12)); font-size: 10.5px; font-weight: 700; }
.mc-views { justify-self: start; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-actions .button, .mc-send .button { display: inline-flex; align-items: center; gap: 6px; }
.mc-actions svg, .mc-send svg, .mc-empty svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--t-line, #2b2f33); border-radius: 12px; background: var(--t-surface, #111416); }
.mc-name > span { color: var(--t-muted, #9aa3a8); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mc-name input { flex: 1; min-width: 160px; height: 32px; padding: 0 6px; color: var(--t-text, #fff); border: 0; background: transparent; font: inherit; outline: none; }
.mc-count { padding: 3px 8px; color: var(--t-muted, #9aa3a8); border: 1px solid var(--t-line, #2b2f33); border-radius: 7px; font: 600 11.5px ui-monospace, monospace; }
.mc-count.over { color: #f23f43; border-color: rgba(242, 63, 67, .5); }
html:root body .app-shell #settingsForm .mc .mc-stage.message-studio { width: 100% !important; max-width: none; margin: 0 !important; grid-column: auto !important; position: relative !important; top: auto !important; }
html:root body .app-shell #settingsForm .mc .mc-stage .discord-preview-stage { border-radius: 12px !important; padding: 18px !important; }
html:root body .app-shell #settingsForm .mc .mc-stage .discord-preview-message { max-width: 720px; margin-inline: auto; }
.mc .mc-dot { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: #dbdee1; border: 0; border-radius: 50%; background: #1e1f22; cursor: pointer; }
.mc .mc-dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.mc .mc-dot:hover { background: #404249; }
.mc .mc-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc .mc-picture.has-image > span { display: none; }
.mc .studio-banner.has-image { border-style: solid; }
.mc .studio-icon-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc .studio-edit .studio-card { max-width: 560px; }
.mc [data-mc-checks] .studio-checks { max-width: none; }
.mc-send { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 14px; border: 1px solid var(--t-line, #2b2f33); border-radius: 12px; background: var(--t-surface, #111416); }
.mc-send .resource-field { flex: 1; min-width: 220px; margin: 0; }
.mc-send .button.primary { height: 44px; padding: 0 22px; }
.mc-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 16px; color: var(--t-muted, #9aa3a8); border: 1px dashed var(--t-line, #2b2f33); border-radius: 14px; text-align: center; }
.mc-empty svg { width: 28px; height: 28px; }
.mc-empty b { color: var(--t-text, #fff); }
.mc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mc-card { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 96px; padding: 14px 16px 14px 20px; overflow: hidden; color: var(--t-text, #fff); border: 1px solid var(--t-line, #2b2f33); border-radius: 12px; background: var(--t-surface, #111416); font: inherit; text-align: start; }
.mc-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--mc-color); content: ""; }
[dir="rtl"] .mc-card::before { inset: 0 0 0 auto; }
.mc-card > div:first-child { display: grid; gap: 4px; min-width: 0; }
.mc-card b { font-size: 14px; }
.mc-card span { color: var(--t-accent, #9fdcc8); font-weight: 600; font-size: 13px; }
.mc-card small { color: var(--t-muted, #9aa3a8); font-size: 12px; overflow-wrap: anywhere; }
.mc-card time { color: var(--t-muted, #9aa3a8); font-size: 11px; }
.mc-card.template { cursor: pointer; }
.mc-card.template:hover { border-color: var(--mc-color); }
.mc-card.template i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--mc-color); }
.mc-card-actions { display: flex; flex-direction: column; gap: 6px; }
/* Read-only embed preview of the composer. */
.mc-embed { position: relative; display: grid; gap: 8px; max-width: 520px; padding: 12px 16px 14px; border-radius: 5px; background: #2b2d31; border-inline-start: 4px solid var(--studio-accent, #5865f2); color: #dbdee1; font-size: 13.5px; }
.mc-embed-main { display: flex; justify-content: space-between; gap: 14px; }
.mc-embed-main > div { display: grid; gap: 6px; min-width: 0; }
.mc-embed-author, .mc-embed-footer { display: flex; align-items: center; gap: 8px; color: #f2f3f5; font-size: 13px; font-weight: 600; }
.mc-embed-footer { color: #949ba4; font-size: 11.5px; font-weight: 400; }
.mc-embed-author img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.mc-embed-footer img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.mc-embed-title { color: #f2f3f5; font-weight: 700; font-size: 15px; }
a.mc-embed-title { color: #00a8fc; text-decoration: none; }
.mc-embed-text, .v2p-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.mc-embed-text a, .v2p-text a { color: #00a8fc; }
.mc-embed-text code, .v2p-text code { padding: 1px 4px; border-radius: 4px; background: #1e1f22; font-size: 12px; }
.mc-embed-text small, .v2p-text small { color: #949ba4; font-size: 11.5px; }
.mc-embed-text .h1, .v2p-text .h1 { font-size: 20px; } .mc-embed-text .h2, .v2p-text .h2 { font-size: 17px; } .mc-embed-text .h3, .v2p-text .h3 { font-size: 15px; }
.mc-emoji { width: 22px; height: 22px; vertical-align: -5px; object-fit: contain; }
.mc-embed-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.mc-embed-fields > div { grid-column: 1 / -1; display: grid; gap: 2px; font-size: 13px; }
.mc-embed-fields > div.inline { grid-column: span 1; }
.mc-embed-fields b { color: #f2f3f5; }
.mc-embed-thumb { flex: none; width: 80px; height: 80px; border-radius: 6px; object-fit: cover; }
.mc-embed-image { width: 100%; max-height: 300px; border-radius: 6px; object-fit: cover; }
/* V2 builder. */
.v2-builder { display: grid; gap: 12px; }
.v2-list, .v2-children { display: grid; gap: 10px; }
.v2-empty { margin: 12px 0; color: #949ba4; text-align: center; }
.v2-block { display: grid; gap: 8px; padding: 10px 12px 12px; border: 1px solid #3f4147; border-radius: 8px; background: #2b2d31; }
.v2-children .v2-block { background: #232428; }
.v2-container { border-inline-start: 4px solid var(--v2-color, #3f4147); background: #2b2d31; }
.v2-container:not(.colored) { border-inline-start-color: #3f4147; }
.v2-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v2-head > span { color: #949ba4; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v2-tools { display: flex; align-items: center; gap: 2px; }
.v2-tools > button:not(.studio-chip):not(.v2-color) { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: #949ba4; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.v2-tools > button:not(.studio-chip):not(.v2-color):hover { color: #f2f3f5; background: #404249; }
.v2-tools > button.danger:hover { color: #f23f43; }
.v2-tools svg, .v2-block svg, .v2-add svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v2-color { width: 22px; height: 22px; margin-inline-end: 4px; padding: 0; border: 2px solid rgba(255, 255, 255, .2); border-radius: 6px; background: var(--v2-color); cursor: pointer; }
.studio-chip.small { height: 24px; font-size: 11px; }
.v2-add { display: grid; gap: 8px; }
.v2-add.inside { padding: 10px; border: 1px dashed #3f4147; border-radius: 8px; background: rgba(0, 0, 0, .12); }
.v2-add small { color: #949ba4; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v2-add > div { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-add .studio-chip { height: 32px; padding: 0 12px; color: #dbdee1; background: #1e1f22; border-color: #1e1f22; font-size: 12.5px; }
.v2-add .studio-chip:hover { border-color: #5c5f66; }
.v2-section { display: flex; align-items: flex-start; gap: 12px; }
.v2-section-texts { display: grid; flex: 1; gap: 6px; min-width: 0; }
.v2-section-text { display: flex; align-items: flex-start; gap: 4px; }
.v2-section-text .studio-body-slot { flex: 1; }
.v2-gallery { display: grid; gap: 10px; }
.v2-gallery-item { display: grid; gap: 6px; }
.v2-gallery-meta, .v2-button-row { display: flex; align-items: center; gap: 6px; }
.v2-gallery-meta input { flex: 1; }
.v2-separator { display: flex; align-items: center; gap: 10px; }
.v2-separator i { flex: 1; height: 1px; }
.v2-separator.line i { background: #4e5058; }
.v2-separator > div { display: flex; align-items: center; gap: 6px; }
.v2-separator select { height: 30px; padding: 0 8px; color: #dbdee1; border: 1px solid #3f4147; border-radius: 6px; background: #1e1f22; font: inherit; font-size: 12px; }
.v2-buttons { display: grid; gap: 6px; }
.v2-button-row input { min-width: 0; }
.v2-button-row .v2-emoji-input { flex: 0 0 74px; }
.v2-button-row input[data-v2-input="label"] { flex: 1; }
.v2-button-row input[data-v2-input="url"] { flex: 1.4; }
.mc .v2-builder input:not([type="hidden"]), .mc .v2-builder textarea { width: 100%; padding: 6px 8px; color: #dbdee1; border: 1px solid transparent; border-radius: 6px; background: rgba(0, 0, 0, .2); font: inherit; font-size: 13px; outline: none; }
.mc .v2-builder input:focus, .mc .v2-builder textarea:focus { border-color: var(--t-accent, #9fdcc8); }
/* Read-only V2 preview. */
.v2p { display: grid; gap: 8px; max-width: 560px; color: #dbdee1; font-size: 13.5px; }
.v2p-container { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid #3f4147; border-radius: 8px; background: #2b2d31; }
.v2p-container.colored { border-inline-start: 4px solid var(--v2-color); }
.v2p-container.spoiler { filter: blur(0); outline: 1px dashed #5c5f66; }
.v2p-section { display: flex; justify-content: space-between; gap: 12px; }
.v2p-section > div { display: grid; gap: 6px; min-width: 0; }
.v2p-section img { flex: none; width: 80px; height: 80px; border-radius: 6px; object-fit: cover; }
.v2p-gallery { display: grid; gap: 4px; grid-template-columns: repeat(2, 1fr); }
.v2p-gallery.count-1 { grid-template-columns: 1fr; }
.v2p-gallery img { width: 100%; max-height: 300px; border-radius: 6px; object-fit: cover; }
.v2p-gallery img.spoiler { filter: blur(14px); }
.v2p-separator.small { height: 4px; } .v2p-separator.large { height: 16px; }
.v2p-separator.line { height: auto; margin-block: 4px; border-top: 1px solid #4e5058; }
.v2p-separator.line.large { margin-block: 12px; }
.v2p-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.v2p-button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; color: #fff; border-radius: 8px; background: #4e5058; font-size: 13px; font-weight: 600; }
.v2p-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 620px) {
  .mc-top, .mc-send { flex-direction: column; align-items: stretch; }
  .v2-section { flex-direction: column; }
  .v2-button-row { flex-wrap: wrap; }
  .mc-embed-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Read-only samples (moderation, server logs): the Discord look without the editor. */
html:root body .app-shell #settingsForm .message-studio.studio-readonly .discord-preview-card { background: var(--studio-card) !important; border-color: var(--studio-line) !important; }
html:root body .app-shell #settingsForm .message-studio.studio-readonly[data-style="embed"] .discord-preview-card::before { display: block; background: var(--t-accent, #41d9b6); }