.builder-dialog,.record-dialog:has(.composer-designer) { width:min(1080px,calc(100vw - 40px)) }
.message-dialog-subtitle { display:block;margin-top:5px;color:var(--muted);font:400 13px/1.5 "Segoe UI",sans-serif }
.message-save-context { display:grid;gap:3px;margin-right:auto;max-width:55%;font-size:13px }
.message-draft-state { font-weight:600 }
.message-save-context small { color:var(--muted);font-size:12px }
.builder-dialog .composer { padding:16px }
.command-dialog:has(.composer-designer) .record-body { padding:0 16px 16px }
.command-dialog:has(.composer-designer) .command-panel { padding-top:12px }
.composer-designer .composer-workspace { display:block;border:1px solid #1e1f22;border-radius:12px;background:#313338;min-width:0 }
.composer-stage { min-width:0;background:#313338;border-radius:11px;color:#dbdee1;color-scheme:dark;position:relative;max-height:calc(100dvh - 240px);min-height:340px;overflow:auto;scrollbar-color:#1e1f22 #2b2d31;overscroll-behavior:contain }
.composer-channel { display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid #26272b;background:#313338;position:sticky;top:0;z-index:15 }
.composer-channel>.icon { width:22px;height:22px;color:#949ba4 }
.composer-channel>strong { font:600 15px/1.4 "gg sans","Segoe UI",sans-serif;color:#f2f3f5 }
.composer-channel>.actions-inline { margin-left:auto;gap:4px;flex-wrap:nowrap }
.composer-channel>.composer-history-actions { margin-left:0 }
.composer-channel>.actions-inline>.button { min-height:30px;padding:5px 9px;background:transparent;border-color:transparent;box-shadow:none;color:#dbdee1;font-size:12px }
.composer-channel>.actions-inline>.button:hover:not(:disabled) { background:#ffffff1a;color:#fff }
.composer-channel .info-button.button { color:#b5bac1 }
.composer-channel .info-button.button:hover,.composer-channel .info-button.button[aria-expanded="true"] { color:#fff;background:#ffffff1a }
.composer-designer .composer-canvas { padding:24px 20px 0;border:0;border-radius:0;background:#313338;min-height:0 }
.composer-designer .discord-preview { max-width:none;padding:0 0 8px;margin:0;min-height:100px }
.composer-designer .discord-content { min-width:0 }
.composer-designer .designer-block { position:relative;outline:1px solid transparent;outline-offset:4px;scroll-margin:84px 0 30px }
.composer-designer .designer-block.discord-block { overflow:visible }
.composer-designer .designer-block:hover:not(:has(.designer-block:hover)),.composer-designer .designer-block:focus-visible { outline-color:#717783 }
.composer-designer .designer-block.is-selected { outline:1px solid #a6adff }
.composer-designer .designer-block>.discord-accent { border-radius:8px 0 0 8px }
.composer-designer [data-inline-text] { cursor:text;min-height:24px;outline:none;white-space:normal;caret-color:#fff;scroll-margin:84px 0 30px }
.composer-designer [data-inline-text].is-empty:before { content:attr(data-placeholder);color:#949ba4;position:absolute;pointer-events:none;font:400 16px/1.375 "gg sans","Segoe UI",sans-serif }
.composer-designer [data-inline-text].is-empty>p:only-of-type { min-height:24px }
.composer-designer [data-inline-text]::selection,.composer-designer [data-inline-text] ::selection { background:#5865f280 }
.designer-variable { border-radius:3px;background:#5865f229;box-shadow:0 1px 0 #a6adff80;cursor:default }
.composer-designer .designer-block.discord-separator { min-height:1px;cursor:pointer;overflow:visible }
.composer-designer .designer-block.discord-separator:after { content:"";position:absolute;inset:-7px 0 }
.composer-designer .designer-block.discord-spoiler { overflow:visible }
.composer-designer .designer-block.discord-spoiler>.spoiler-content { display:block }
.composer-designer .designer-block.is-disabled { opacity:.65 }
.composer-designer .discord-gallery { width:100%;max-width:520px }
.composer-designer .designer-block.discord-gallery { overflow:visible }
.composer-designer .discord-gallery-item { border-radius:8px }
.composer-designer .discord-gallery .preview-image { border-radius:8px }
.composer-designer .discord-thumbnail { cursor:pointer }
.composer-designer .designer-block.discord-thumbnail { overflow:visible }
.composer-designer .discord-thumbnail .preview-image { border-radius:8px }
.composer-designer .canvas-block-tools { position:absolute;bottom:calc(100% + 6px);right:0;display:flex;align-items:center;gap:2px;padding:3px;background:#1e1f22;color:#dbdee1;border:1px solid #4e5058;border-radius:7px;z-index:10;opacity:0;visibility:hidden;pointer-events:none;white-space:nowrap;box-shadow:0 4px 12px #0003 }
.composer-designer .canvas-block-tools>span { font:500 11px/1.2 "Segoe UI",sans-serif;padding:0 5px }
.composer-designer .designer-block:hover:not(:has(.designer-block:hover))>.canvas-block-tools,
.composer-designer .designer-block.is-selected>.canvas-block-tools,
.composer-designer .designer-block:focus-within:not(:has(.designer-block:focus-within))>.canvas-block-tools { opacity:1;visibility:visible;pointer-events:auto }
.canvas-control.button { display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:28px;min-height:28px;width:28px;height:28px;padding:5px;border:0;box-shadow:none;border-radius:4px;background:transparent;color:inherit;cursor:pointer }
.canvas-control.button>.icon { width:16px;height:16px }
.canvas-control.button:hover { background:#ffffff1a;color:#fff }
.canvas-control.button:focus-visible,.canvas-add.button:focus-visible,.canvas-side-prompt.button:focus-visible { outline:2px solid #a6adff;outline-offset:3px }
.canvas-control.canvas-grip { cursor:grab;touch-action:none }
.canvas-control.canvas-grip:active { cursor:grabbing }
.canvas-control.canvas-grip:disabled { display:none }
.composer-designer .canvas-accent.button { position:absolute;left:-9px;top:8px;width:20px;height:calc(100% - 16px);min-height:24px;min-width:0;border:0;border-radius:7px;background:transparent;z-index:2;opacity:.7;padding:0 }
.composer-designer .canvas-accent.button>.icon { width:16px;height:16px;position:absolute;top:0;left:1px;opacity:0;background:#1e1f22;border-radius:4px }
.composer-designer .canvas-accent.button:hover,.composer-designer .canvas-accent.button:focus-visible { background:#a6adff33;opacity:1 }
.composer-designer .canvas-accent.button:hover>.icon,.composer-designer .canvas-accent.button:focus-visible>.icon { opacity:1 }
.composer-designer .discord-block:not(.has-accent)>.canvas-accent { border-left:2px dashed #656873 }
.canvas-add.button { display:flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:5px 10px;border:1px dashed #656873;background:transparent;box-shadow:none;color:#b5bac1;font:500 12px/1.4 "Segoe UI",sans-serif;border-radius:5px;cursor:pointer }
.canvas-add.button>.icon { width:15px;height:15px }
.canvas-add.button:hover { color:#fff;border-color:#a6adff;background:#5865f21a }
.composer-designer .designer-block>.canvas-add,.composer-designer .discord-section-text>.canvas-add { align-self:flex-start;margin-top:8px }
.composer-designer .discord-row>.canvas-add { margin:0;min-width:32px;min-height:32px }
.composer-designer .canvas-add.is-compact { padding:4px }
.composer-additions { padding:8px 20px 24px 76px;margin:0 }
.composer-additions>.canvas-add { width:100%;min-height:40px }
.canvas-side-prompt.button { flex:none;align-self:flex-start;display:flex;flex-direction:column;gap:6px;width:80px;height:80px;padding:8px;border:1px dashed #656873;background:#232428;color:#b5bac1;border-radius:8px;font:400 11px/1.3 "Segoe UI",sans-serif;white-space:normal }
.canvas-side-prompt.button:hover { color:#fff;border-color:#a6adff;background:#383a40 }
.canvas-side-prompt>.icon { width:24px;height:24px }
.canvas-image-prompt.button { width:100%;min-width:0;flex:1;white-space:normal;color:#b5bac1;background:#232428;border:1px dashed #656873;min-height:80px }
.canvas-empty-message { color:#b5bac1;font:400 16px/1.5 "Segoe UI",sans-serif;padding:16px 0 }
.designer-popover { position:fixed;inset:auto;margin:0;padding:16px;width:350px;max-width:calc(100vw - 24px);max-height:min(70dvh,620px);overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 12px 48px #0005;z-index:100;font:400 13px/1.5 "Segoe UI",sans-serif }
.designer-popover::backdrop { background:transparent }
.designer-popover>header { display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px }
.designer-popover>header h3 { font-size:14px;margin:0 }
.designer-popover .canvas-control:hover { background:var(--wash);color:var(--ink) }
.designer-popover .block-fields { padding:0 }
.designer-popover .block-fields>.field-row { grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 0 }
.designer-popover .block-fields textarea { min-height:140px;max-height:250px;line-height:1.5;resize:vertical }
.designer-popover .block-fields>.field-row .field-control { min-width:0 }
.designer-popover .block-actions { padding:12px 0 0;margin-top:12px;gap:8px }
.designer-popover .block-actions .button,.designer-popover .block-actions select { font-size:12px;min-height:34px }
.designer-popover .block-text-help,.designer-popover .block-note,.designer-popover .block-variables small { font-size:12px;line-height:1.5;color:var(--muted) }
.designer-popover .block-variables { display:grid;gap:8px }
.canvas-component-menu { display:grid;grid-template-columns:1fr 1fr;gap:6px }
.canvas-component-option.button { display:flex;align-items:flex-start;justify-content:flex-start;gap:8px;padding:10px 8px;text-align:left;white-space:normal;border:0;background:transparent;box-shadow:none }
.canvas-component-option.button:hover { background:var(--wash) }
.canvas-component-option>.icon { width:18px;height:18px;flex:none;margin-top:2px }
.canvas-component-option strong { display:block;font-size:12px }
.canvas-component-option small { display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:3px }
.canvas-variable-menu,.canvas-accessory-menu { display:grid;gap:4px }
.canvas-variable-menu>.button { justify-content:flex-start }
.canvas-variable-menu>[hidden] { display:none }
.composer-designer.is-dragging { cursor:grabbing;user-select:none }
.composer-designer.is-dragging .canvas-block-tools { visibility:hidden;pointer-events:none }
.composer-designer .drag-source { opacity:.25;outline:1px dashed #a6adff }
.canvas-drag-ghost { position:fixed;left:0;top:0;pointer-events:none;z-index:1000;max-height:220px;overflow:hidden;opacity:.9;padding:12px;background:#313338;color:#dbdee1;border:1px solid #a6adff;border-radius:8px;box-shadow:0 10px 30px #0006;will-change:transform }
.canvas-drop-indicator { position:fixed;pointer-events:none;z-index:1001;border-radius:4px;background:#a6adff;color:#fff;font:500 11px/1.3 "Segoe UI",sans-serif;text-indent:8px;line-height:26px;white-space:nowrap;text-shadow:0 1px 3px #000 }
.canvas-drop-indicator:before,.canvas-drop-indicator:after { content:"";position:absolute;top:-2px;width:7px;height:7px;border-radius:50%;background:#a6adff }
.canvas-drop-indicator:before { left:0 }.canvas-drop-indicator:after { right:0 }
.canvas-drop-indicator.is-vertical { text-indent:10px }
.component-composer-heading { display:flex;align-items:center;justify-content:space-between;gap:20px }
.component-composer-heading>div { min-width:0 }
.component-composer-heading h2,.component-composer-heading p { margin:0 }
.component-composer-clear.button { flex:none;min-height:40px;padding:9px 14px;box-shadow:none }
.component-composer-clear>.icon { width:16px;height:16px }
.component-composer-controls { margin:0 20px;border-bottom:1px solid var(--line) }
.component-composer-controls>summary { display:flex;align-items:center;gap:8px;min-height:48px;width:fit-content;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--muted) }
.component-composer-controls>summary::-webkit-details-marker { display:none }
.component-composer-controls>summary:hover { color:var(--ink) }
.component-composer-controls>summary:focus-visible { outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:4px }
.component-composer-controls>summary>.icon { width:15px;height:15px }
.component-composer-controls[open]>summary>.icon { transform:rotate(90deg) }
.component-composer-import-body { display:grid;gap:8px;padding:0 0 16px }
.component-composer-canvas { padding:20px;min-width:0 }
.component-composer-import { display:flex;gap:8px;flex-wrap:wrap }
.component-composer-import input { flex:1 1 240px;min-width:0 }
.component-composer-target { margin:0 20px 16px;overflow-wrap:anywhere;color:var(--muted);font-size:13px;line-height:1.5 }
.component-composer-target:empty { display:none }
.component-composer>.notice { margin:16px 20px }
.component-composer>.validation-errors { margin:16px 20px }
.component-composer>.component-composer-delivery { display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 20px;padding:16px 20px }
.component-composer-destination { display:grid;flex:1 1 240px;gap:8px;min-width:0 }
.component-composer-destination>.field-control { min-width:0 }
.component-composer-publish { display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px }
.component-composer-hint { flex-basis:100%;margin:0;color:var(--muted);font-size:12px }
.component-composer-mentions { display:flex;align-items:center;gap:8px;flex-basis:100%;font-size:13px;cursor:pointer }
.component-composer-mentions input { width:18px;height:18px;min-height:0;flex:none;accent-color:var(--accent-ink) }
@container module-settings (max-width:560px) {
  .component-composer-heading { gap:12px }
  .component-composer-heading p { max-width:28ch }
  .component-composer-controls { margin-inline:16px }
  .component-composer-canvas { padding:16px }
  .component-composer .composer-channel { padding:10px 12px;gap:8px }
  .component-composer .composer-channel>strong { flex:1 1 calc(100% - 82px);white-space:nowrap }
  .component-composer-publish { width:100% }
  .component-composer-publish>.button { flex:1;white-space:normal }
  .component-composer>.component-composer-delivery { padding:16px }
}
.dialog.composer-json-dialog { position:fixed;inset:auto 0 auto;top:calc(var(--json-viewport-top,0px) + var(--json-viewport-height,100dvh)/2);transform:translateY(-50%);margin:0 auto;width:min(560px,calc(100vw - 32px));max-height:calc(var(--json-viewport-height,100dvh) - 32px);border:1px solid var(--edge);border-radius:16px }
.composer-json-dialog::backdrop { background:#11182780;backdrop-filter:blur(3px) }
.composer-json-dialog>.dialog-head { padding:22px 24px 0;border:0 }
.composer-json-dialog>.dialog-head h2 { font-family:inherit;font-size:22px;letter-spacing:-.4px }
.composer-json-dialog>.dialog-content { padding:12px 24px 24px }
.composer-json-dialog>.dialog-actions { padding:16px 24px;background:var(--paper);gap:10px }
.composer-json-dialog>.dialog-actions>.button { min-height:44px;min-width:104px }
.composer-json-dialog .icon-button { min-height:44px;min-width:44px }
.composer-json-import { display:grid;gap:16px;min-width:0 }
.composer-json-import>p { margin:0;line-height:1.55 }
.composer-json-import .composer-json-intro { margin-bottom:4px }
.composer-json-drop { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;min-height:210px;padding:24px 16px;border:1.5px dashed var(--edge);border-radius:12px;background:var(--canvas);text-align:center;transition:border-color .15s,background .15s }
.composer-json-drop:hover,.composer-json-drop.is-dragging { border-color:var(--accent-line);background:var(--accent-wash) }
.composer-json-drop.is-dragging { border-style:solid;outline:3px solid var(--accent-wash);outline-offset:3px }
.composer-json-drop:focus-visible { outline:2px solid var(--accent-line);outline-offset:4px }
.composer-json-file-icon { display:grid;place-items:center;color:var(--accent-ink);margin-bottom:6px }
.composer-json-file-icon>.icon { width:36px;height:36px;stroke-width:1.5 }
.composer-json-drop>strong { font-size:16px;font-weight:600;line-height:1.4 }
.composer-json-browse { font-size:14px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px }
.composer-json-drop>small { font-size:12px;color:var(--muted);margin-top:4px }
.composer-json-drop .composer-json-touch-copy { display:none }
.composer-json-selection { display:flex;align-items:center;gap:12px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--wash) }
.composer-json-selection>.icon { flex:none;color:var(--accent-ink);width:20px;height:20px }
.composer-json-selection>div { display:grid;gap:4px;flex:1;min-width:0 }
.composer-json-selection strong { overflow-wrap:anywhere;font-size:13px;font-weight:600;line-height:1.4 }
.composer-json-selection span { font-size:12px;color:var(--muted) }
.composer-json-selection>.button { flex:none }
.composer-json-import .composer-json-status { color:var(--accent-ink);font-size:13px;overflow-wrap:anywhere }
.composer-json-import .field-error { padding:12px 14px;border:1px solid var(--error-line);border-radius:8px;color:var(--red);background:var(--error-wash);overflow-wrap:anywhere }
.composer-json-paste { min-width:0;border-top:1px solid var(--line) }
.composer-json-paste>summary { display:flex;align-items:center;gap:8px;min-height:44px;padding-block:12px;cursor:pointer;font-weight:600;font-size:13px;list-style:none }
.composer-json-paste>summary::-webkit-details-marker { display:none }
.composer-json-paste>summary>.icon { width:15px;height:15px;transition:transform .15s }
.composer-json-paste[open]>summary>.icon { transform:rotate(90deg) }
.composer-json-paste>label { display:grid;gap:8px;font-size:13px;font-weight:600;min-width:0;padding:4px 0 8px }
.composer-json-source { width:100%;min-width:0;min-height:180px;max-height:360px;resize:vertical;font:13px/1.6 Consolas,monospace;tab-size:2 }
.composer-json-import .composer-json-note { font-size:12px }
.composer-json-import [hidden] { display:none }
:root:has(.composer-json-dialog[open]) { overflow:hidden }
@media(max-width:600px),(any-pointer:coarse) {
  .composer-json-drop .composer-json-touch-copy { display:block }
  .composer-json-drop .composer-json-desktop-copy { display:none }
  .composer-json-source { font-size:16px;min-height:160px }
}
@media(max-width:600px) {
  .dialog.composer-json-dialog { width:calc(100vw - 24px);max-height:calc(var(--json-viewport-height,100dvh) - 24px) }
  .composer-json-dialog>.dialog-head { padding:18px 18px 0 }
  .composer-json-dialog>.dialog-content { padding:10px 18px 18px }
  .composer-json-dialog>.dialog-actions { padding:12px 18px max(12px,env(safe-area-inset-bottom)) }
  .composer-json-dialog>.dialog-actions>.button { flex:1;min-width:0 }
  .composer-json-drop { min-height:180px }
}
@media(prefers-reduced-motion:reduce) { .composer-json-drop,.composer-json-paste>summary>.icon { transition:none } }
@media(max-width:600px) {
  .builder-dialog,.record-dialog:has(.composer-designer) { width:calc(100vw - 16px) }
  .builder-dialog .composer { padding:10px }
  .command-dialog:has(.composer-designer) .record-body { padding:0 10px 10px }
  .composer-stage { max-height:calc(100dvh - 250px);min-height:260px }
  .composer-channel { padding:10px 12px;gap:6px }
  .composer-channel>strong { font-size:13px }
  .composer-channel>.actions-inline>.button { padding:4px 6px }
  .composer-designer .composer-canvas { padding:20px 12px 0 }
  .composer-designer .discord-preview { padding:8px 0;gap:8px }
  .composer-designer .discord-preview .discord-avatar { width:24px;height:24px }
  .composer-designer .discord-block { padding:12px }
  .composer-additions { padding:12px 12px 24px 44px }
  .canvas-side-prompt.button { width:60px;height:70px }
  .message-save-context { flex-basis:100%;max-width:none }
  .message-save-context small { font-size:11px }
  .builder-dialog .dialog-actions>.button { flex:1 }
}
.composer-touch-tools[hidden] { display:none }
.uses-touch-layout .composer-channel { flex-wrap:wrap }
.composer-touch-tools { flex-basis:100%;min-width:0;border-top:1px solid #464850;padding-top:6px }
.uses-touch-layout .designer-block>.canvas-block-tools { display:none }
.composer-touch-tools>.canvas-block-tools { position:static;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;border:0;background:transparent;padding:0;width:100%;white-space:normal }
.composer-touch-tools>.canvas-block-tools>span { flex:1;min-width:0;font-size:13px;overflow-wrap:break-word }
.composer-touch-tools .canvas-control.button { width:44px;height:44px;min-width:44px;min-height:44px }
.uses-touch-layout .canvas-accent { display:none }
.composer-designer .designer-text-block { min-width:0;max-width:100% }
.composer-designer .discord-section { flex-wrap:wrap }
.composer-designer .discord-section-text { flex:1 1 160px }
.composer-designer .discord-accessory { max-width:100% }
.composer-designer .discord-button { max-width:100%;word-break:normal;overflow-wrap:break-word }
.canvas-component-menu { grid-template-columns:repeat(2,minmax(0,1fr)) }
.canvas-component-option.button,.canvas-component-option>span { min-width:0 }
@media(max-width:600px) {
  .component-composer-canvas { padding-inline:8px }
  .composer-channel>strong { flex:1;min-width:0 }
  .composer-channel>.actions-inline { margin-left:0 }
  .composer-designer .composer-canvas { padding:16px 8px 0 }
  .composer-designer .discord-preview { display:block }
  .composer-designer .discord-preview>.discord-avatar { display:none }
  .composer-designer .discord-block { padding:10px }
  .composer-designer .discord-section { gap:10px }
  .composer-designer .discord-section-text { flex-basis:140px }
  .composer-additions { padding:12px 8px 20px }
}
@media(prefers-reduced-motion:reduce) { .canvas-drag-ghost { will-change:auto } }