/* Card (Components V2) message editor: welcome, goodbye, boost, level-ups, autoresponders. */

/* ---------------------------------------------------------------- Text / Card switch */
.rm { display: grid; gap: 12px; width: 100%; }
.rm-mode { display: inline-flex; gap: 4px; padding: 4px; width: max-content; max-width: 100%; border-radius: 12px; background: #0a0c10; border: 1px solid #1c2028; }
.rm-mode button { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #9ba5bb; transition: background .2s, color .2s, box-shadow .2s; }
.rm-mode button:hover { color: #e3eafa; }
.rm-mode button.on { background: linear-gradient(180deg, #f3f6fd, #c9d8f8); color: #08090c; box-shadow: 0 4px 14px rgba(255, 255, 255, .08); }
.rm-mode button i { font-size: 12px; }
.rm-body { animation: rm-in .28s var(--ease, ease) backwards; }
@keyframes rm-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- layout */
.ce { display: grid; gap: 14px; width: 100%; }
@media (min-width: 1180px) {
  .ce { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .ce-preview { position: sticky; top: 84px; }
}
.ce-editor { display: grid; gap: 12px; min-width: 0; }

/* ---------------------------------------------------------------- card settings */
.ce-settings { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: #0a0c10; border: 1px solid #191d25; }
.ce-set { display: grid; gap: 4px; }
.ce-set > b { font-size: 13px; color: #e3eafa; }
.ce-set > span { font-size: 12px; color: var(--muted); margin-bottom: 4px; }

/* ---------------------------------------------------------------- blocks */
.ce-blocks { display: grid; gap: 10px; }
.ce-block { border-radius: 14px; background: #0c0f16; border: 1px solid #1c2028; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.ce-block:focus-within { border-color: #38445b; box-shadow: 0 0 0 3px rgba(255, 255, 255, .04); }
.ce-block > :not(.ce-bhead) { padding: 12px 14px 14px; }
.ce-bhead { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; background: #10131a; border-bottom: 1px solid #191d25; }
.ce-bhead b { font-size: 13px; color: #e3eafa; }
.ce-bic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #1a1e26; color: #c3d4f6; font-size: 12px; }
.ce-bact { display: flex; gap: 2px; margin-left: auto; }
.ce-bact .icon-btn { width: 28px; height: 28px; font-size: 12px; }
.ce-bact .icon-btn:disabled { opacity: .3; pointer-events: none; }
.ce-field { display: grid; gap: 8px; }
.ce-field textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }
.ce-stack { display: grid; gap: 8px; }
.ce-sub { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 4px; }
.ce-hint { font-size: 12px; color: var(--muted); }
.ce-inline { display: flex; flex-wrap: wrap; gap: 10px; }
.ce-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: #080a0e; border: 1px solid #1c2028; }
.ce-seg button { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #9ba5bb; transition: background .2s, color .2s; }
.ce-seg button.on { background: #e3eafa; color: #08090c; }
.ce-empty { display: flex; align-items: center; gap: 10px; padding: 18px; border-radius: 14px; border: 1px dashed #232935; color: var(--muted); font-size: 13px; }

/* buttons block */
.ce-buttons { display: grid; gap: 8px; }
.ce-btnrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.4fr) 32px; gap: 8px; align-items: center; animation: rm-in .22s backwards; }
.ce-btnrow .input { height: 36px; }
.ce-emoji { text-align: center; }
.ce-addbtn { justify-self: start; height: 32px; font-size: 12.5px; }
@media (max-width: 640px) {
  .ce-btnrow { grid-template-columns: 56px minmax(0, 1fr) 32px; }
  .ce-btnrow .ce-url { grid-column: 1 / -1; grid-row: 2; }
}

/* add bar */
.ce-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; border-radius: 14px; border: 1px dashed #212733; }
.ce-add > span { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 6px; }
.ce-addblock { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 9px; background: #10131a; border: 1px solid #1e232e; color: #c3d4f6; font-size: 12.5px; font-weight: 600; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.ce-addblock:hover { background: #161a25; border-color: #2e3546; color: #fff; transform: translateY(-1px); }
.ce-addblock:disabled { opacity: .35; pointer-events: none; }
.ce-addblock i { font-size: 11.5px; }

/* ---------------------------------------------------------------- Discord preview extras */
.dc-card.v2.clear { border-left-color: #2b2d31; }
.dc-ping { margin: 0 0 6px 44px; }
.dc-gap { height: 4px; }
.dc-gap.lg { height: 16px; }
.dc-gap.line { height: auto; border-top: 1px solid #3f4147; margin: 2px 0; }
.dc-gap.line.lg { margin: 10px 0; }
.dc-banner.empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 90px; color: #80848e; font-size: 13px; border: 1px dashed #3f4147; }
.dc-card .dc-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* autoresponder reply slot uses the whole width */
.ar-reply { min-width: 0; }

/* compact card colour */
.ce-accent { border-radius: 10px; }
.ce-accent > summary { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 10px; background: #0c0f16; border: 1px solid #1e232e; cursor: pointer; list-style: none; font-size: 13px; color: #e3eafa; user-select: none; transition: border-color .15s; }
.ce-accent > summary::-webkit-details-marker { display: none; }
.ce-accent > summary:hover { border-color: #2e3546; }
.ce-accent > summary i { font-size: 10px; color: #8a96af; transition: transform .2s; }
.ce-accent[open] > summary i { transform: rotate(180deg); }
.ce-accent[open] > :not(summary) { margin-top: 10px; animation: rm-in .2s backwards; }
.ce-swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .15); }
.ce-swatch.clear { background: repeating-conic-gradient(#292f3d 0 25%, #141820 0 50%) 50% / 8px 8px; }
.ce-settings .cp, .ce-settings .color-row { max-width: 100%; }