#message-templates-panel *, #message-templates-panel *::before, #message-templates-panel *::after { box-sizing: border-box; }
#message-templates-panel { padding: 20px; border: 1px solid var(--line, #3f3f46); border-radius: 16px; background: var(--surface, #18181b); color: var(--ink, #e4e4e7); }
.mt-header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mt-header h3 { font-size: 18px; font-weight: 700; }
.mt-header p, .mt-field>span { font-size: 12px; color: var(--muted, #a1a1aa); }
.mt-status-badge { font-size: 12px; white-space: nowrap; }
.mt-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin: 16px 0; }
.mt-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.mt-toolbar select { flex: 1; min-width: 160px; max-width: 100%; }
#message-templates-panel input:not([type=checkbox]), #message-templates-panel textarea, #message-templates-panel select { width: 100%; min-width: 0; border: 1px solid var(--line, #52525b); color: inherit; background: var(--surface, #18181b); }
#message-templates-panel textarea { resize: vertical; font-family: ui-monospace, monospace; }
#message-templates-panel button { border: 1px solid var(--line, #52525b); background: var(--surface, #27272a); }
#message-templates-panel button:hover { border-color: var(--accent); }
#message-templates-panel button:disabled { opacity: .45; cursor: not-allowed; }
#message-templates-panel :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#mt-save { background: var(--accent) !important; color: var(--on-accent); }
.mt-field { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.mt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.mt-field:has(textarea) { grid-column: 1 / -1; }
.mt-embed-field { padding: 10px; border: 1px solid var(--line, #3f3f46); border-radius: 8px; margin: 8px 0; }
.mt-inline { display: flex; align-items: center; gap: 8px; font-size: 12px; }
#message-templates-panel input[type=checkbox] { width: auto; }
.mt-details { margin: 12px 0; }
.mt-details summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.mt-placeholder-list { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px; }
.mt-placeholder-list button { font-family: ui-monospace, monospace; }
.mt-preview-column { min-width: 0; }
.mt-preview { padding: 16px; background: #313338; color: #dbdee1; border-radius: 10px; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; min-height: 150px; }
.mt-message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mt-avatar { display: grid; place-items: center; width: 32px; height: 32px; background: #5865f2; border-radius: 50%; color: white; font-size: 11px; }
.mt-app-badge { font-size: 9px; color: white; background: #5865f2; border-radius: 3px; padding: 0 4px; }
.mt-preview-embed { margin: 10px 0; padding: 12px; border-left: 4px solid #5865f2; background: #2b2d31; border-radius: 4px; }
.mt-preview-embed h4 { font-weight: 700; color: white; margin: 6px 0; }
.mt-preview-embed small { display: block; margin-top: 10px; font-size: 11px; color: #b5bac1; }
.mt-preview-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.mt-wide { grid-column: 1 / -1; }
.mt-preview blockquote { padding-left: 10px; border-left: 3px solid #4e5058; }
.mt-preview code, .mt-preview pre { background: #1e1f22; border-radius: 3px; font-family: ui-monospace, monospace; white-space: pre-wrap; }
.mt-preview a { color: #00a8fc; }
.mt-preview .mt-thumbnail { float: right; max-width: 72px; max-height: 72px; margin-left: 10px; }
.mt-preview .mt-image { max-width: 100%; max-height: 260px; border-radius: 4px; margin-top: 10px; }
.mt-attachment { margin-top: 10px; border: 1px solid #4e5058; border-radius: 4px; padding: 8px; }
#mt-payload { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; background: #1e1f22; color: #dbdee1; font-size: 11px; max-height: 400px; overflow: auto; }
.mt-error { white-space: pre-wrap; color: #fca5a5; font-size: 12px; margin: 8px 0; }
@media (max-width: 900px) { .mt-workspace { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 500px) { .mt-fields { grid-template-columns: minmax(0, 1fr); } .mt-header { flex-direction: column; } }

.mt-preview-author, .mt-preview-embed small { display: flex; align-items: center; gap: 6px; }
.mt-preview-author img, .mt-preview-embed small img { width: 20px; height: 20px; border-radius: 50%; }
.mt-preview-title { display: block; font-weight: 700; margin: 6px 0; }
@media (min-width: 901px) { .mt-preview-column { position: sticky; top: 20px; align-self: start; } }