/* Discord-style mentions, and the @ / # / : menu that inserts them.

   Shared by the dashboard editors and the post editor: both render mentions
   through mentionById() in discord-render.js, so they must be styled from one
   place or a role gradient will show on one page and not the other. Colours
   come from the tokens in theme.css, which both pages already load. */

.mention {
    padding: 0 2px;
    border-radius: 3px;
    background-color: rgba(88, 101, 242, 0.15);
    color: #c9cdfb;
    font-weight: 500;
    /* Never let a pill split across lines mid-name. */
    white-space: nowrap;
}

.mention:hover { background-color: rgba(88, 101, 242, 0.3); }

/* A role with more than one colour stop paints the name itself as the
   gradient, so it needs its own element -- background-clip:text on the pill
   would clip the pill away too. */
.mention-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 600;
}

/* Fallbacks for when there is no directory to resolve against -- the
   standalone post editor has no server context at all. */
.channel-mention::before { content: '#'; }
.role-mention { background: rgba(217, 164, 65, 0.3); color: #ff9eaf; }

.mention-unknown {
    background-color: rgba(224, 92, 92, 0.22);
    color: #f0b4b4;
}

/* img.emoji, not .emoji: a descendant selector like ".msg-embed img" has
   specificity 0,1,1 and would otherwise beat a bare class and turn every emoji
   into a block, pushing the text after it onto the next line. That is exactly
   what happened once already. */
img.emoji {
    display: inline;
    width: 1.375em;
    height: 1.375em;
    vertical-align: -0.3em;
    object-fit: contain;
}

.autocomplete {
    position: fixed;
    /* It sits at the caret now, not across the field, so it sizes itself. */
    width: min(320px, calc(100vw - 16px));
    /* Above the post editor's toolbar (100) and its dropdown panels (200): the
       menu flips above a full-height textarea and lands right under the bar. */
    z-index: 1000;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.ac-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text);
    text-align: left;
    font-weight: 400;
}

.ac-item:hover, .ac-item.is-active { background: rgba(217, 164, 65, 0.16); }

.ac-item img, .ac-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--panel-border);
}

.ac-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ac-kind { color: var(--muted); font-size: 0.78rem; flex-shrink: 0; }

.ac-emoji { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }

.ac-hash {
    width: 22px;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Markdown, as Discord renders it.

   The preview panes set white-space: pre-wrap, so these blocks swallow their
   own trailing newline in discord-render.js -- otherwise every heading would
   have an empty line under it.
   --------------------------------------------------------------------------- */

.md-link {
    color: #00a8fc;
    text-decoration: none;
}
.md-link:hover { text-decoration: underline; }

.md-h1, .md-h2, .md-h3 {
    margin: 8px 0 4px;
    color: var(--text);
    font-weight: 700;
    line-height: 1.25;
}
.md-h1 { font-size: 1.4em; }
.md-h2 { font-size: 1.2em; }
.md-h3 { font-size: 1.05em; }

.md-subtext {
    color: var(--muted);
    font-size: 0.85em;
}

.md-quote {
    margin: 2px 0;
    padding-left: 10px;
    border-left: 4px solid var(--panel-border);
}

.md-list { padding-left: 18px; text-indent: -12px; }
.md-list::before { content: '• '; color: var(--muted); }
.md-list-ordered::before { content: ''; }

.md-time {
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(88, 101, 242, 0.15);
}

/* Hidden until pointed at. Discord wants a click; for a preview, hover is
   enough and needs no script. */
.md-spoiler {
    border-radius: 3px;
    background: #1e1f22;
    color: transparent;
    cursor: pointer;
}
.md-spoiler:hover { background: rgba(30, 31, 34, 0.5); color: inherit; }


/* ---------------------------------------------------------------------------
   Discord preview -- owned by dashboard/js/discord-preview.js.

   One definition, so every surface that shows "what the bot will post"
   looks the same and a fix lands on all of them at once. It sat in the
   dashboard's own stylesheet until the calendar grew a preview of its
   own and drew every one of these elements unstyled.

   Values are Discord's own.
   --------------------------------------------------------------------------- */


.discord-msg {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 8px;
    background: #313338;
}

.discord-msg .avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.msg-body { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.msg-name { font-weight: 600; color: #f2f3f5; }

.badge {
    padding: 1px 5px;
    border-radius: 3px;
    background: #5865f2;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.msg-content {
    color: #dbdee1;
    font-size: 1rem;
    line-height: 1.375rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.msg-embed {
    max-width: 520px;
    margin-top: 8px;
    padding: 0.5rem 1rem 1rem 0.75rem;
    border-left: 4px solid #5865f2;
    border-radius: 4px;
    background: #2b2d31;
    color: #dbdee1;
    font-size: 0.875rem;
    line-height: 1.125rem;
}

/* pre-wrap belongs on the text, never the container: on the box it would also
   render the whitespace between child elements as vertical gaps. */
.embed-title, .embed-description, .embed-field-name,
.embed-field-value, .embed-footer {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.embed-title { margin-bottom: 8px; color: #f2f3f5; font-size: 1rem; line-height: 1.25rem; font-weight: 600; }
/* An embed title that carries a url is a link, and Discord draws it in the
   link colour rather than white. */
.embed-title-link { color: #00a8fc; text-decoration: none; }
.embed-title-link:hover { text-decoration: underline; }
.embed-description { color: #dbdee1; }

.embed-field { margin-top: 8px; }
.embed-field-name { color: #f2f3f5; font-weight: 600; }
.embed-field-value { color: #dbdee1; }

.embed-image { display: block; max-width: 100%; margin-top: 8px; border-radius: 4px; }

/* Text on the left, thumbnail on the right, as Discord lays an embed out. */
.embed-main { display: flex; gap: 12px; align-items: flex-start; }
.embed-text { flex: 1; min-width: 0; }

.embed-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
}

.embed-author { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.embed-author-icon { width: 24px; height: 24px; border-radius: 50%; }
.embed-author-name { color: #f2f3f5; font-size: 0.875rem; font-weight: 600; }

/* Inline fields share a row; anything else takes the full width. */
.embed-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.embed-fields .embed-field { margin-top: 0; flex-basis: 100%; }
.embed-fields .embed-field.inline { flex: 1; flex-basis: 0; min-width: 150px; }

.embed-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #949ba4;
    font-size: 0.75rem;
    line-height: 1rem;
}

.embed-footer-icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }

.button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.fake-button {
    padding: 8px 16px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 1;
    cursor: default;
}
.fake-button:disabled { opacity: 1; }
.fake-button.style-secondary { background: #4e5058; }
.fake-button.style-primary { background: #5865f2; }
.fake-button.style-success { background: #248046; }
.fake-button.style-danger { background: #da373c; }

/* An image that would not load, in place of the image.
 *
 * It used to be removed outright, which left somebody looking at a preview
 * with no picture and no way to tell whether the link was wrong, the host was
 * refusing us, or a Discord attachment link had simply lapsed. */
.embed-image-broken {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--panel-border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}