/* Optimistic sending, composer drafts and the Quick Switcher (client/js/optimisticSend.js,
   drafts.js, quickSwitcher.js). Uses the theme tokens from styles.css. */

/* A message on its way is dimmed; one that failed is red, with Retry / Delete under it. */
.message.sending .content,
.message.sending .reply-preview { opacity: 0.55; }
.message.send-failed .content { color: var(--danger); }
.send-failed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 13px; color: var(--danger); }
.send-failed-bar .icon { flex: none; }
.send-failed-text { font-weight: 600; }
.send-failed-reason { min-width: 0; overflow-wrap: anywhere; }
.send-failed-bar .link-button { padding: 2px 4px; font-size: 13px; }
.send-failed-bar .send-delete { color: var(--danger); }

/* Its files' upload progress. */
.sending-uploads { display: flex; flex-direction: column; gap: 6px; max-width: 420px; margin-top: 6px; padding: 8px 36px 8px 10px; position: relative; border-radius: 6px; background: var(--bg-sidebar); }
.sending-upload { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; color: var(--text-muted); }
.sending-upload-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; }
.sending-upload progress { grid-column: 2; width: 100%; height: 6px; accent-color: var(--accent); }
.sending-cancel { position: absolute; top: 4px; right: 4px; padding: 4px; }

/* A text channel with a draft waiting in it. */
.channel .channel-draft { display: inline-flex; margin-left: auto; flex: none; color: var(--text-muted); }
.channel .channel-draft + .channel-mention-badge { margin-left: 6px; }

/* The Quick Switcher. */
.quick-switcher { width: min(570px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 64px)); max-height: min(560px, calc(100dvh - 64px)); margin: 12vh auto auto; margin: 12dvh auto auto; padding: 16px; border: 0; border-radius: var(--radius); background: var(--bg-sidebar); color: var(--text); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
.quick-switcher[open] { display: flex; flex-direction: column; gap: 10px; }
.quick-switcher::backdrop { background: rgba(0, 0, 0, 0.7); }
.qs-input { width: 100%; padding: 12px 14px; border: 0; border-radius: 6px; background: var(--bg-rail); color: var(--text-strong); font: inherit; font-size: 18px; outline: none; }
.qs-input::placeholder { color: var(--text-muted); }
.qs-results { min-height: 48px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.qs-header { padding: 10px 8px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.qs-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; border-radius: 4px; cursor: pointer; color: var(--text-muted); }
.qs-row.active { background: var(--bg-active); color: var(--text-strong); }
.qs-row.unread .qs-name { color: var(--text-strong); font-weight: 600; }
.qs-icon { width: 28px; flex: none; display: grid; place-items: center; }
.qs-icon .avatar { width: 24px; height: 24px; font-size: 12px; }
.qs-guild-icon { width: 24px; height: 24px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--bg-chat); color: var(--text); font-size: 10px; font-weight: 700; }
.qs-guild-icon img { width: 100%; height: 100%; object-fit: cover; }
.qs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.qs-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; margin-left: auto; text-transform: uppercase; }
.qs-badge { flex: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.qs-empty { padding: 16px 8px; text-align: center; }
.qs-tip { padding-top: 6px; border-top: 1px solid var(--border); }
.qs-tip strong { color: var(--online); }
.qs-tip kbd { font: inherit; font-weight: 700; padding: 0 5px; border-radius: 4px; background: var(--bg-rail); color: var(--text-strong); }