/*
 * Messages and the composer (arch §7).
 *
 * The body inside a message is styled by lore-content.css — it is the same
 * `body_html` from the same converter as a lore entry, so `[[handle]]` and
 * `@username` look the same wherever they are read. This file is only the frame
 * around it: who said it, when, what they got back.
 *
 * Registered as a Filament asset in AppServiceProvider, so it loads on every
 * panel page rather than only where a message happens to be.
 */

.ac-thread {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ac-empty {
    color: rgb(113 113 122);
    font-size: 0.875rem;
}

/* ------------------------------------------------------------- a message -- */

.ac-message {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;

    /* A notification links to `#message-N` (arch §8). Without this the browser
       parks the post flush against the panel's sticky topbar and it reads as
       having landed on the wrong one. */
    scroll-margin-top: 5rem;
}

.ac-message-avatar {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: rgb(224 231 255);
    color: rgb(55 48 163);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
}

.ac-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-message-main {
    flex: 1 1 auto;
    min-width: 0;
}

.ac-message-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgb(113 113 122);
}

.ac-message-author {
    font-weight: 600;
    color: rgb(24 24 27);
}

.ac-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 0.375rem;
    border-radius: 0.25rem;
    background: rgb(219 234 254);
    color: rgb(29 78 216);
}

.ac-message-edited {
    font-style: italic;
    cursor: help;
}

.ac-message-replying {
    margin: 0.25rem 0;
    padding-left: 0.5rem;
    border-left: 2px solid rgb(212 212 216);
    font-size: 0.8125rem;
    color: rgb(113 113 122);
}

.ac-message-actions {
    flex: none;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 120ms;
}

.ac-message:hover .ac-message-actions,
.ac-message:focus-within .ac-message-actions {
    opacity: 1;
}

/* ----------------------------------------------------------- reactions --- */

.ac-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.ac-reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.4375rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 9999px;
    background: #fff;
    font-size: 0.75rem;
    line-height: 1.5;
    cursor: pointer;
}

.ac-reaction:hover { background: rgb(244 244 245); }
.ac-reaction.is-mine { border-color: rgb(129 140 248); background: rgb(238 242 255); }
.ac-reaction[disabled] { cursor: default; opacity: 0.7; }

/* The "add one" buttons stay quiet until the message is hovered, so a thread
   is not a wall of grey emoji. */
.ac-reaction--add { opacity: 0; border-style: dashed; }
.ac-message:hover .ac-reaction--add,
.ac-message:focus-within .ac-reaction--add { opacity: 0.65; }
.ac-reaction--add:hover { opacity: 1; }

/* ------------------------------------------------------------ composer --- */

.ac-composer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ac-composer-hint {
    flex: 1 1 auto;
    font-size: 0.75rem;
    color: rgb(161 161 170);
}

.ac-composer-hint kbd {
    font-family: inherit;
    font-size: 0.6875rem;
    padding: 0 0.25rem;
    border: 1px solid rgb(228 228 231);
    border-bottom-width: 2px;
    border-radius: 0.25rem;
}

.ac-btn {
    padding: 0.3125rem 0.75rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.ac-btn:hover { background: rgb(244 244 245); }

.ac-btn--primary {
    border-color: transparent;
    background: rgb(79 70 229);
    color: #fff;
}

.ac-btn--primary:hover { background: rgb(67 56 202); }

.ac-btn--quiet {
    border-color: transparent;
    background: transparent;
    color: rgb(113 113 122);
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
}

.ac-btn--quiet:hover { background: rgb(244 244 245); color: rgb(39 39 42); }
.ac-btn--danger:hover { background: rgb(254 226 226); color: rgb(153 27 27); }

/* --------------------------------------------------------------- typing -- */

/* Filament ships no `[x-cloak]` rule, so these two carry their own: both start
   empty and Alpine only hides them once it has initialised, which is late enough
   to be seen as a flicker. */
.ac-typing[x-cloak],
.ac-presence[x-cloak] { display: none; }

.ac-typing {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    min-height: 1rem;
    font-size: 0.75rem;
    font-style: italic;
    color: rgb(113 113 122);
}

.ac-typing-dots { display: inline-flex; gap: 0.125rem; }

.ac-typing-dots i {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 9999px;
    background: currentColor;
    animation: ac-typing-bounce 1.2s infinite ease-in-out;
}

.ac-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.ac-typing-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes ac-typing-bounce {
    0%, 60%, 100% { opacity: 0.25; }
    30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ac-typing-dots i { animation: none; opacity: 0.6; }
}

/* ------------------------------------------------------------- dark mode -- */

.dark .ac-empty { color: rgb(161 161 170); }
.dark .ac-message-author { color: rgb(244 244 245); }
.dark .ac-message-avatar { background: rgb(49 46 129); color: rgb(199 210 254); }
.dark .ac-badge { background: rgb(30 58 138); color: rgb(191 219 254); }
.dark .ac-message-replying { border-left-color: rgb(63 63 70); color: rgb(161 161 170); }
.dark .ac-reaction { background: rgb(39 39 42); border-color: rgb(63 63 70); color: rgb(228 228 231); }
.dark .ac-reaction:hover { background: rgb(63 63 70); }
.dark .ac-reaction.is-mine { border-color: rgb(99 102 241); background: rgb(49 46 129); }
.dark .ac-btn { background: rgb(39 39 42); border-color: rgb(63 63 70); color: rgb(228 228 231); }
.dark .ac-btn:hover { background: rgb(63 63 70); }
.dark .ac-btn--quiet { background: transparent; border-color: transparent; color: rgb(161 161 170); }
.dark .ac-btn--quiet:hover { background: rgb(63 63 70); color: rgb(244 244 245); }
.dark .ac-btn--danger:hover { background: rgb(69 10 10); color: rgb(254 202 202); }
.dark .ac-composer-hint kbd { border-color: rgb(63 63 70); }

.ac-composer-replying {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.375rem;
    font-size: 0.8125rem;
    color: rgb(113 113 122);
}

.dark .ac-composer-replying { color: rgb(161 161 170); }

/* ------------------------------------------------------------- comments -- */

/* The thread 03-lore/14 embeds under a record. Deliberately almost no chrome:
   it is mounted inside somebody else's page and should not bring a card with
   it. */
.ac-comments {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ac-comments-heading {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(24 24 27);
}

.ac-comments-count {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    background: rgb(244 244 245);
    color: rgb(113 113 122);
}

.dark .ac-comments-heading { color: rgb(244 244 245); }
.dark .ac-comments-count { background: rgb(39 39 42); color: rgb(161 161 170); }

/* ------------------------------------------------------------ chat page -- */

.ac-chat {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 48rem) {
    .ac-chat { grid-template-columns: minmax(0, 1fr); }
}

.ac-channels {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.75rem;
    background: #fff;
}

.ac-channel {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: rgb(63 63 70);
    text-decoration: none;
}

.ac-channel:hover { background: rgb(244 244 245); }
.ac-channel.is-current { background: rgb(238 242 255); color: rgb(55 48 163); font-weight: 600; }
.ac-channel-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ac-channel-gm {
    flex: none;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    background: rgb(254 243 199);
    color: rgb(146 64 14);
}

.ac-channel-unread {
    flex: none;
    min-width: 1.25rem;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.0625rem 0.3125rem;
    border-radius: 9999px;
    background: rgb(79 70 229);
    color: #fff;
}

.ac-room-ctn {
    border: 1px solid rgb(228 228 231);
    border-radius: 0.75rem;
    background: #fff;
    padding: 1rem;
}

.ac-room { display: flex; flex-direction: column; gap: 0.75rem; }

/* A fixed height, so "load older on scroll" has somewhere to scroll. Tall
   enough to read in, short enough that the composer stays on screen. */
.ac-room-scroll {
    max-height: min(60vh, 34rem);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.ac-room-older { display: flex; justify-content: center; padding-bottom: 0.75rem; }

.dark .ac-channels, .dark .ac-room-ctn { background: rgb(24 24 27); border-color: rgb(63 63 70); }
.dark .ac-channel { color: rgb(212 212 216); }
.dark .ac-channel:hover { background: rgb(39 39 42); }
.dark .ac-channel.is-current { background: rgb(49 46 129); color: rgb(224 231 255); }
.dark .ac-channel-gm { background: rgb(69 45 6); color: rgb(253 230 138); }

/* ------------------------------------------------------------- presence -- */

/* Who is in this space right now, above the channel list. Names, not avatars:
   a hobby group is four people, and four initials in circles is a puzzle where
   four names are a sentence. */
.ac-presence {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.375rem;
    padding: 0.25rem 0.5rem 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgb(228 228 231);
    font-size: 0.75rem;
}

.ac-presence-label {
    width: 100%;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.625rem;
    color: rgb(161 161 170);
}

.ac-presence-who {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgb(63 63 70);
}

/* The dot is the "online" part, so it is drawn rather than written. */
.ac-presence-who::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: rgb(34 197 94);
}

.dark .ac-typing { color: rgb(161 161 170); }
.dark .ac-presence { border-bottom-color: rgb(63 63 70); }
.dark .ac-presence-who { color: rgb(212 212 216); }

/* ---------------------------------------------------------- attachments -- */
/*
 * Files on a message, and the tray under a composer (05-conversations/07).
 *
 * Two shapes, both used in both places: an image thumbnail and a row with a
 * paperclip. What differs is only that the tray's version carries a remove
 * button and the message's version opens.
 */

.ac-attachments {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.ac-attachment-images {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* A button, not a link: it opens the lightbox rather than navigating. The
   reset is because a <button> around an image otherwise draws a chrome frame. */
.ac-attachment-image {
    padding: 0;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.5rem;
    background: none;
    cursor: zoom-in;
    overflow: hidden;
    line-height: 0;
}

.ac-attachment-image img {
    max-width: 22rem;
    max-height: 16rem;
    object-fit: cover;
}

.ac-attachment-file {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    align-self: flex-start;
    max-width: 100%;
    padding: 0.375rem 0.625rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: rgb(63 63 70);
    text-decoration: none;
}

.ac-attachment-file:hover { background: rgb(250 250 250); }

.ac-attachment-icon,
.ac-attach-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

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

.ac-attachment-meta {
    flex: none;
    font-size: 0.6875rem;
    color: rgb(161 161 170);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Above Filament's own overlays, which top out in the 40s. */
.ac-lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgb(0 0 0 / 0.75);
    cursor: zoom-out;
}

.ac-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.5rem;
}

/* ------------------------------------------------------ composer tray ---- */

.ac-attach {
    border-radius: 0.5rem;
}

/* The drop target is the whole composer, so the outline is drawn outside the
   editor's own border rather than replacing it. */
.ac-attach.is-dropping {
    outline: 2px dashed rgb(129 140 248);
    outline-offset: 3px;
}

.ac-attach-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

.ac-attach-input { display: none; }

.ac-attach-bar .ac-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ac-attach-hint {
    font-size: 0.75rem;
    color: rgb(161 161 170);
}

.ac-attach-staged {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.375rem 0 0;
    padding: 0;
    list-style: none;
}

.ac-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 16rem;
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.5rem;
    font-size: 0.75rem;
}

.ac-attach-chip img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    object-fit: cover;
}

.ac-attach-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-attach-remove {
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0 0.25rem;
    font-size: 1rem;
    line-height: 1;
    color: rgb(161 161 170);
}

.ac-attach-remove:hover { color: rgb(220 38 38); }

.dark .ac-attachment-image,
.dark .ac-attachment-file,
.dark .ac-attach-chip { border-color: rgb(63 63 70); }
.dark .ac-attachment-file { color: rgb(212 212 216); }
.dark .ac-attachment-file:hover { background: rgb(39 39 42); }

/* ----------------------------------------------- a record's discussion ---- */
/*
 * The comments block under a lore page (03-lore/14). It sits below the
 * infolist's last section rather than inside a card of its own, so it needs the
 * separation a Filament section would have given it.
 */

.ac-record-discussion {
    padding-top: 1.5rem;
    border-top: 1px solid rgb(228 228 231);
}

.dark .ac-record-discussion { border-top-color: rgb(63 63 70); }