:root{--bg:#2b2d31;--panel:#313338;--panel2:#2b2d31;--field:#1e1f22;--field2:#232428;--text:#f2f3f5;--muted:#b5bac1;--muted2:#949ba4;--border:#3f4147;--accent:#5865f2;--link:#00a8fc;--danger:#da373c;--ok:#23a55a;--embed:#2b2d31;--embed-line:#58b9ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'TwemojiCountryFlags',Inter,ui-sans-serif,system-ui,Segoe UI,Arial,sans-serif;font-size:16px}a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}.topbar{height:54px;display:flex;align-items:center;gap:22px;padding:0 18px;background:#1e1f22;border-bottom:1px solid #161719;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;color:white;font-weight:800}.brand img{width:28px;height:28px;border-radius:50%}.topbar nav{display:flex;align-items:center;gap:22px;flex:1}.topbar nav a,.link-button{color:white;font-weight:700;font-size:14px}.inline{display:inline}.link-button{background:transparent;border:0;padding:0;cursor:pointer}.top-clock{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:13px}.top-clock strong{color:white;font-variant-numeric:tabular-nums}main{width:100%;margin:0;padding:0}.disco-layout{display:grid;grid-template-columns:minmax(420px,1fr) minmax(420px,1fr);height:calc(100vh - 54px);overflow:hidden}.editor-pane,.preview-pane{overflow:auto}.editor-pane{border-right:1px solid #202225;background:#303136}.preview-pane{background:#2b2d31;padding:24px 36px}.notice{margin:18px;border:2px solid #5865f2;background:#414675;color:white;border-radius:5px;padding:17px 18px;line-height:1.55}.toolbar-row{display:flex;gap:12px;margin:0 18px 14px}.button,button{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:3px;background:var(--accent);color:white;font-weight:750;padding:9px 15px;cursor:pointer;font:inherit;text-decoration:none}.ghost{background:transparent;border-color:#8b9098;color:white}.danger{background:var(--danger)}.small{font-size:13px;padding:5px 8px}.small-text{font-size:12px}.composer-form,.drawer,.embed-drawer{border-top:1px solid var(--border)}.drawer,.embed-drawer{padding:0 0}.drawer summary,.embed-drawer summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:800;display:flex;align-items:center;gap:8px}.drawer summary:before,.embed-drawer summary:before{content:'›';font-size:24px;color:#b5bac1;transition:transform .15s}.drawer[open] summary:before,.embed-drawer[open] summary:before{transform:rotate(90deg)}.drawer em{color:var(--muted);font-size:13px;font-weight:600}.drawer p,.embed-drawer p{margin:0 18px 14px}.webhook-line{display:grid;grid-template-columns:1fr 1fr 2.2fr auto;gap:8px;margin:0 18px 16px}.saved-webhooks{display:grid;gap:8px;margin:0 18px 16px}.target-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#2b2d31;border:1px solid var(--border);border-radius:5px;padding:10px}.field-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;padding:16px 18px}.field-row.two{grid-template-columns:1fr 1fr;padding-top:0}.field-row label,.grid-form label{display:flex;flex-direction:column;gap:6px;color:#fff;font-weight:750}.counter-label{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 7px;color:white}.counter-label span{color:var(--muted);font-size:13px}input,textarea,select{width:100%;border:1px solid transparent;background:var(--field);color:var(--text);border-radius:4px;padding:10px;font:inherit;outline:none}input:focus,textarea:focus,select:focus{border-color:#5f6df2}textarea{resize:vertical;min-height:90px}#content-input{margin:0 18px 0;width:calc(100% - 36px);min-height:255px;line-height:1.55}.file-preview{margin:8px 18px 16px;display:flex;gap:8px;flex-wrap:wrap}.file-chip,.files a,.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:5px 10px;background:#24262b;color:white}.embed-drawer textarea{margin:0 18px;width:calc(100% - 36px);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.action-row{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;background:#2f3136;border-top:1px solid var(--border)}.discord-preview{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;max-width:880px}.avatar{width:44px;height:44px;border-radius:50%;background:#202225;display:flex;align-items:center;justify-content:center;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.preview-header{display:flex;align-items:center;gap:7px;margin-bottom:4px}.preview-header #preview-username{font-weight:800;color:#fff}.bot-badge{font-size:10px;background:#5865f2;color:white;border-radius:3px;font-weight:800;padding:1px 4px}.preview-time{font-size:12px;color:var(--muted2)}.preview-content{white-space:pre-wrap;line-height:1.45;color:#dbdee1;word-break:break-word}.preview-content h1{font-size:24px;margin:.2em 0}.preview-content blockquote{border-left:4px solid #4e5058;margin:8px 0;padding-left:12px;color:#dbdee1}.preview-content code{background:#1e1f22;border-radius:3px;padding:1px 4px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.preview-content pre{background:#1e1f22;border:1px solid #111214;border-radius:4px;padding:8px;white-space:pre-wrap}.spoiler{background:#111214;color:#111214;border-radius:3px;padding:0 2px}.spoiler:hover{color:#dbdee1}.preview-embed{max-width:560px;margin-top:10px;background:#2b2d31;border-left:4px solid var(--embed-line);border-radius:4px;padding:12px 14px}.embed-title{font-weight:800;color:white;margin-bottom:8px}.embed-desc{color:#dbdee1;white-space:pre-wrap;line-height:1.35}.embed-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.embed-field strong{display:block;color:white;font-size:14px}.embed-field span{font-size:14px;color:#dbdee1}.embed-image{max-width:100%;border-radius:4px;margin-top:10px}.embed-footer{font-size:12px;color:var(--muted);margin-top:10px}.preview-file-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.preview-file{background:#232428;border:1px solid #3f4147;border-radius:5px;padding:8px 10px;color:#dbdee1}.scheduled-section{padding:24px 18px;max-width:1200px;margin:0 auto}.card{background:#313338;border:1px solid var(--border);border-radius:8px;padding:16px;margin:0 0 18px}.narrow{max-width:520px;margin:40px auto}.grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wide{grid-column:1/-1}.check{grid-column:1/-1;display:flex!important;flex-direction:row!important;align-items:center}.message-card .card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.message-content,pre{white-space:pre-wrap;word-break:break-word;background:#1e1f22;border:1px solid var(--border);border-radius:6px;padding:12px;overflow:auto}.status{font-weight:800}.status.pending{color:#fee75c}.status.sending{color:#57f287}.status.sent{color:#23a55a}.status.failed{color:#ed4245}.status.cancelled{color:#949ba4}.flash{padding:12px 14px;border-radius:6px;margin:18px}.flash.ok{background:rgba(35,165,90,.16);border:1px solid rgba(35,165,90,.45)}.flash.error{background:rgba(218,55,60,.16);border:1px solid rgba(218,55,60,.45)}.muted{color:var(--muted)}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}th{color:var(--muted)}@media(max-width:980px){.disco-layout{grid-template-columns:1fr;height:auto}.editor-pane,.preview-pane{overflow:visible}.preview-pane{border-top:1px solid var(--border);padding:18px}.webhook-line,.field-row{grid-template-columns:1fr}.topbar{height:auto;flex-wrap:wrap;padding:12px 16px}.top-clock{width:100%}}@media(max-width:640px){.grid-form{grid-template-columns:1fr}.toolbar-row{flex-wrap:wrap}.preview-pane{padding:16px}.discord-preview{grid-template-columns:38px 1fr}.avatar{width:36px;height:36px}}
.button-stack{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.toolbar-row.compact{margin:0;display:grid;grid-template-columns:minmax(220px,1fr) 180px auto auto;align-items:end}.scheduled-section.standalone{padding-top:0}.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}.inline-form input,.inline-form select{width:auto;min-width:150px}.preset-strip{display:flex;gap:8px;flex-wrap:wrap;margin:0 18px 14px}.copy-chip{background:#24262b;border-color:var(--border);font-size:13px;padding:7px 10px}.copy-chip code{margin-left:6px;color:#dbdee1}td details{margin-bottom:6px}button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:780px){.toolbar-row.compact{grid-template-columns:1fr}.inline-form input,.inline-form select{width:100%}}

.preview-attachment {
  margin-top: 10px;
  max-width: 420px;
}
.preview-attachment img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  border-radius: 10px;
  border: 1px solid var(--border);
  object-fit: contain;
  background: #202225;
}
.attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.attachment-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  text-decoration: none;
}
.attachment-card img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 8px;
  background: #202225;
}
.attachment-card.file-only {
  min-height: 76px;
  justify-content: center;
}
.details-table th {
  text-align: left;
  color: var(--muted);
  width: 190px;
}
.detail-embed pre {
  white-space: pre-wrap;
}

.file-option {
  margin: 10px 18px 6px;
}
.spoiler-preview img {
  filter: blur(12px);
}
.spoiler-preview:hover img {
  filter: blur(4px);
}
.spoiler-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 4px 4px 4px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #111214;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Flag emoji font — makes country flags render correctly on Windows/Chromium */
@font-face {
  font-family: 'TwemojiCountryFlags';
  src: url('/public/TwemojiCountryFlags.woff2') format('woff2');
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
    U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
}

/* Discord custom emotes in preview */
.discord-emoji {
  display: inline-block;
  width: 1.375em;
  height: 1.375em;
  vertical-align: middle;
  object-fit: contain;
  margin: 0 1px;
}
.discord-emoji-animated {
  /* animated gifs render naturally */
}
/* Standard Unicode emoji rendered as native characters */
.discord-emoji-native {
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  vertical-align: middle;
  font-family: 'TwemojiCountryFlags', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 4px;
  flex-wrap: wrap;
}
.pagination .page-info {
  font-size: 0.9em;
}
.button.ghost.small.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}