/* The chat's look chosen by the player for themself (js/chatprefs.js → attributes on <html>). Only the messenger is
   touched, nothing animates (no battery cost), and the default ("light", "m", "default") is the game's own look. */

/* colours of the chat area */
html[data-chat-theme="dark"] .messenger { --chat-bg: #1d1430; --chat-ink: #efe9fb; --chat-muted: #b5a8d0; --chat-bubble: #2c2045; }
html[data-chat-theme="rose"] .messenger { --chat-bg: #fff0f6; --chat-ink: #4a1d34; --chat-muted: #9c5d7c; --chat-bubble: #ffe0ee; }
html[data-chat-theme="ocean"] .messenger { --chat-bg: #eaf5ff; --chat-ink: #12324f; --chat-muted: #4f7393; --chat-bubble: #d8ecff; }
html:not([data-chat-theme="light"]) .messenger .chat-body,
html:not([data-chat-theme="light"]) .messenger .chat-list { background: var(--chat-bg); color: var(--chat-ink); }
html:not([data-chat-theme="light"]) .messenger .msg-box { background: var(--chat-bubble); }
html:not([data-chat-theme="light"]) .messenger .note,
html:not([data-chat-theme="light"]) .messenger .empty-note { color: var(--chat-muted); }
html[data-chat-theme="dark"] .messenger .chat-header { background: #251a3b; color: #efe9fb; }

/* text size of the lines */
html[data-chat-size="s"] .messenger .chat-list { font-size: 12.5px; }
html[data-chat-size="l"] .messenger .chat-list { font-size: 16.5px; }
html[data-chat-size="xl"] .messenger .chat-list { font-size: 19px; }
html[data-chat-size="l"] .messenger .msg-text, html[data-chat-size="xl"] .messenger .msg-text,
html[data-chat-size="s"] .messenger .msg-text { font-size: 1em; line-height: 1.5; }

/* font of the lines */
html[data-chat-font="nunito"] .messenger .chat-list { font-family: Nunito, Cairo, sans-serif; }
html[data-chat-font="montserrat"] .messenger .chat-list { font-family: Montserrat, Cairo, sans-serif; }
html[data-chat-font="system"] .messenger .chat-list { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Tahoma, sans-serif; }

/* colour of the message text */
html[data-chat-color="ink"] .messenger .msg-text { color: #1b1028; }
html[data-chat-color="purple"] .messenger .msg-text { color: #6a2bd8; }
html[data-chat-color="blue"] .messenger .msg-text { color: #1f6fd1; }
html[data-chat-color="green"] .messenger .msg-text { color: #1e8a4c; }
html[data-chat-theme="dark"][data-chat-color="ink"] .messenger .msg-text { color: #ffffff; }

/* pictures turned off: a small grey chip in their place (tap the line's menu to see it) */
.chat-no-gifs .messenger .media-msg[data-kind="gif"] img,
.chat-no-stickers .messenger .msg-sticker img, .chat-no-stickers .messenger .msg-sticker .sticker-pic,
.chat-no-stickers .messenger .media-msg[data-kind="mstickers"] img,
.chat-no-animated .messenger .media-msg[data-kind="memoji"] img, .chat-no-animated .messenger .media-msg[data-kind="mtext"] img,
.chat-no-animated .messenger .media-msg[data-kind="mcustom"] img { display: none; }
.chat-no-gifs .messenger .media-msg[data-kind="gif"]::before,
.chat-no-stickers .messenger .msg-sticker::before, .chat-no-stickers .messenger .media-msg[data-kind="mstickers"]::before,
.chat-no-animated .messenger .media-msg[data-kind="memoji"]::before, .chat-no-animated .messenger .media-msg[data-kind="mtext"]::before,
.chat-no-animated .messenger .media-msg[data-kind="mcustom"]::before { content: "🖼 ⦸"; display: inline-block; padding: 2px 10px; border-radius: 999px; background: rgba(120, 100, 150, .15); color: #7a6b93; font-size: 12px; }
.chat-no-gifs .messenger .media-msg[data-kind="gif"] .media-attr { display: none; }

/* a line translated into my language as it came */
.msg-auto-tr { display: block; margin-top: 3px; font-size: .86em; opacity: .8; font-style: italic; }

/* the settings window's choices */
.st6-group { padding: 4px 0 10px; border-bottom: 1px solid #f1ecf7; }
.st6-group:last-of-type { border-bottom: 0; }
.st6-sub { display: block; margin: 8px 0 8px; font-size: 12.5px; font-weight: 800; color: #7a6b93; letter-spacing: .2px; }
.st6-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.st6-tiles-font { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st6-tiles-color { display: flex; flex-wrap: wrap; justify-content: center; }
.st6-tiles-color .st6-tile { flex: 0 0 calc((100% - 16px) / 3); }
@media (min-width: 1100px) { .set-screen .st6-tiles-color .st6-tile { flex-basis: calc((100% - 32px) / 5); } }
.st6-tiles-font .st6-tile { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 10px; }
.st6-tiles-font .st6-tile-label { text-align: start; }
.st6-tile { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 7px; border-radius: 14px; border: 1.5px solid #ebe5f3; background: #fbf9fe; color: #3a2d4f; cursor: pointer; transition: border-color .15s, background .15s; }
.st6-tile:hover { border-color: #cdbdf0; }
.st6-tile.on { border-color: #8b5cf6; background: #f3eeff; box-shadow: 0 0 0 3px rgba(139, 92, 246, .14); color: #5b2bc4; }
.st6-tile-label { max-width: 100%; font-size: 11.5px; font-weight: 700; line-height: 1.15; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.st6-prev { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 14px; line-height: 1; color: #3a2d4f; background: #fff; border: 1px solid #e6dff0; }
/* the colours: the chat's background with a message bubble in it */
.st6-prev[class*="prev-theme-"] i { width: 16px; height: 9px; border-radius: 5px; }
.prev-theme-light { background: #ffffff; } .prev-theme-light i { background: #efe9f8; }
.prev-theme-dark { background: #1d1430; border-color: #1d1430; } .prev-theme-dark i { background: #3a2c58; }
.prev-theme-rose { background: #fff0f6; } .prev-theme-rose i { background: #ffc9df; }
.prev-theme-ocean { background: #eaf5ff; } .prev-theme-ocean i { background: #bcdcfb; }
/* the sizes and the fonts: "Aa" as it would look */
.prev-size-s { font-size: 11px; } .prev-size-m { font-size: 14px; } .prev-size-l { font-size: 17px; } .prev-size-xl { font-size: 20px; }
.prev-font-default { font-family: inherit; } .prev-font-nunito { font-family: Nunito, Cairo, sans-serif; }
.prev-font-montserrat { font-family: Montserrat, Cairo, sans-serif; } .prev-font-system { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* the text colours: a dot of the colour */
.st6-prev[class*="prev-color-"] { width: 24px; height: 24px; border: 2px solid #fff; box-shadow: 0 0 0 1px #e1d8ee; }
.prev-color-default { background: linear-gradient(135deg, #3a2d4f 50%, #efe9fb 50%); } .prev-color-ink { background: #1b1028; }
.prev-color-purple { background: #6a2bd8; } .prev-color-blue { background: #1f6fd1; } .prev-color-green { background: #1e8a4c; }

/* the chat's ⋯ card: its buttons */
.ti-acts { display: grid; gap: 6px; margin-top: 10px; }
.ti-act { padding: 9px 12px; border-radius: 12px; background: #f3f0fb; color: #3a2d4f; font-weight: 800; font-size: 13.5px; text-align: start; }
.ti-act.danger { background: #fff0f2; color: #b0213f; }