/* tv-chat.css - vrc.dj TV's chat beside a channel's screen (views/tv_chat.php,
   tv-chat.js; _specs/vrcdj-tv.md 11.2). Layout A: a line a message, the role
   tile and the rank coin before the name, the channel's colour for what is
   the reader's (their own name, a line that names them) and for the
   channel's own lines. Both themes from the site's tokens; the channel's
   colour is --tv-tone (and --tv-tone-ink, --tv-on) from tv.css. */

/* sticky beside the screen, ending where the player's room begins (--pb-room, core.css) so the box is never under the bar */
.tvp-side.tvc { display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height: none;
  height: calc(100vh - 100px - var(--pb-room, 0px)); height: calc(100dvh - 100px - var(--pb-room, 0px)); }

/* the tabs: Chat | Guide, how many are here, the ink under the open one */
.tvc-tabs { position: relative; display: flex; align-items: flex-end; gap: 4px; padding: 0 12px 0 8px; border-bottom: 1px solid var(--border); flex: none; }
.tvc-tab { appearance: none; border: 0; background: none; cursor: pointer; padding: 12px 10px 10px; font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--text) 55%, transparent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tvc-tab:hover { color: var(--text); }
.tvc-tab.is-on { color: var(--white); }
.tvc-tab:focus-visible { outline: 2px solid var(--tv-tone-ink); outline-offset: -2px; }
.tvc-ink { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--tv-tone); border-radius: 2px; transition: translate .28s var(--ease), width .28s var(--ease); }
.tvc-here { margin-left: auto; padding-bottom: 11px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--text) 62%, transparent); white-space: nowrap; }
.tvc-here i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }

.tvc-pane { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tvc-pane[hidden] { display: none; }
.tvc-guide { display: block; overflow-y: auto; padding: 12px 0 6px; overscroll-behavior: contain; scrollbar-width: thin; }

/* the log: newest at the bottom */
.tvc-log { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0 6px; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; }
.tvc-log > :first-child { margin-top: auto; }
.tvc-log:focus-visible { outline: 2px solid var(--tv-tone-ink); outline-offset: -2px; }
.tvc-empty { margin: auto; padding: 24px 16px; text-align: center; font-size: 13px; color: color-mix(in srgb, var(--text) 55%, transparent); }

/* a line */
.tvc-m { position: relative; padding: 3px 14px; font-size: 13.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.tvc-m:hover, .tvc-m.has-tools { background: color-mix(in srgb, var(--text) 4%, transparent); }
.tvc-who { display: inline-flex; align-items: center; gap: 4px; height: 1.5em; margin-right: 6px; vertical-align: top; max-width: 100%; }
.tvc-who .rkb { --rkb-s: 14px; vertical-align: 0; }
.tvc-who .acl-tile { --s: 16px; }
.tvc-role { display: inline-flex; }
.tvc-n { font-weight: 800; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch; }
.tvc-me .tvc-n { color: var(--tv-tone-ink); }
.tvc-at { font-weight: 700; color: var(--tv-tone-ink); }
/* a mention in a line is the name in its page's colour: the chip would make every line that has one taller */
.tvc-t :is(.mention, .discord-ts) { display: inline; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-weight: 700; line-height: inherit;
  color: color-mix(in srgb, var(--mention-color, var(--accent)) 82%, var(--white)); }
.tvc-t .mention:hover { background: none; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
.tvc-ping { background: color-mix(in srgb, var(--tv-tone) 11%, transparent); box-shadow: inset 2px 0 0 var(--tv-tone); }
.tvc-ping:hover, .tvc-ping.has-tools { background: color-mix(in srgb, var(--tv-tone) 16%, transparent); }
.tvc-m.is-new, .tvc-sys.is-new { animation: tvc-in .22s var(--ease) both; }
@keyframes tvc-in { from { opacity: 0; translate: 0 6px; } }

/* what a reply answers */
.tvc-re { display: flex; align-items: center; gap: 5px; margin: 0 0 1px 2px; font-size: 11.5px; color: color-mix(in srgb, var(--text) 55%, transparent); white-space: nowrap; overflow: hidden; }
.tvc-re b { flex: none; color: color-mix(in srgb, var(--text) 80%, transparent); font-weight: 700; }
.tvc-re span { overflow: hidden; text-overflow: ellipsis; }

/* the channel's own line: what is on */
.tvc-sys { margin: 6px 12px; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.4; color: var(--text);
  background: color-mix(in srgb, var(--tv-tone) 8%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--tv-tone) 70%, transparent); overflow-wrap: anywhere; }
.tvc-sys .bi { color: var(--tv-tone-ink); margin-right: 6px; }
.tvc-sys .tvc-k { font-size: 10.5px; font-weight: 900; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--tv-tone-ink); margin-right: 7px; }
.tvc-sys a { color: var(--white); text-decoration: none; }
.tvc-sys a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tvc-by { color: color-mix(in srgb, var(--text) 70%, transparent); }
.tvc-by::before { content: "\00b7"; margin-right: .4em; }

/* the tools on the line pointed at: reply, delete */
.tvc-x { position: absolute; right: 10px; top: 1px; display: flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--bg-elevated); box-shadow: 0 0 0 1px var(--border), 0 4px 10px rgba(0,0,0,.25); }
.tvc-x button { appearance: none; border: 0; background: none; cursor: pointer; width: 26px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: color-mix(in srgb, var(--text) 70%, transparent); font-size: 13px; }
.tvc-x button:hover, .tvc-x button:focus-visible { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--white); outline: none; }
.tvc-x [data-tvc-do="delete"]:hover { color: #f87171; }
.tvc-x button[hidden] { display: none; }

/* new lines while scrolled up */
.tvc-jump { position: relative; align-self: center; margin: -42px 0 8px; z-index: 2; appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; background: var(--tv-tone); color: var(--tv-on, #fff); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.tvc-jump[hidden] { display: none; }

/* the box */
.tvc-form { flex: none; padding: 8px 12px 12px; border-top: 1px solid var(--border); }
.tvc-replying { display: flex; align-items: center; gap: 6px; margin: 0 2px 6px; font-size: 12px; color: color-mix(in srgb, var(--text) 65%, transparent); min-width: 0; }
.tvc-replying[hidden] { display: none; }
.tvc-replying > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvc-replying b { color: var(--white); }
.tvc-replying button { appearance: none; border: 0; background: none; cursor: pointer; margin-left: auto; padding: 2px 4px; border-radius: 4px; color: color-mix(in srgb, var(--text) 55%, transparent); }
.tvc-replying button:hover { color: var(--white); }
.tvc-box { display: flex; align-items: flex-end; gap: 4px; padding: 5px 5px 5px 12px; border-radius: 8px; border: 1px solid var(--border-bright); background: var(--bg-base); }
.tvc-box:focus-within { border-color: color-mix(in srgb, var(--tv-tone) 70%, transparent); }
.tvc-box .emoji-field-wrap { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; }
.tvc-box textarea { flex: 1; min-width: 0; min-height: 28px; max-height: 120px; margin: 0; padding: 4px 0; border: 0; outline: none; background: none; resize: none; font: inherit; font-size: 14px; line-height: 1.45; color: var(--white); white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: hidden; scrollbar-width: thin; }
.tvc-box textarea::placeholder { color: color-mix(in srgb, var(--text) 45%, transparent); }
.tvc-box .emoji-toggle { position: static; flex: none; width: 30px; height: 28px; border: 0; border-radius: var(--radius-sm); background: none; box-shadow: none; font-size: 17px; opacity: .6; transform: none; }
.tvc-box .emoji-toggle:hover, .tvc-box .emoji-toggle:focus-visible { opacity: 1; transform: none; background: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: none; }
.tvc-send { appearance: none; border: 0; cursor: pointer; flex: none; width: 30px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--tv-tone); color: var(--tv-on, #fff); font-size: 15px; transition: opacity .15s var(--ease); }
.tvc-form:not(.has-text) .tvc-send { opacity: .35; }
.tvc-form.is-sending .tvc-send { opacity: .5; cursor: progress; }
.tvc-meta { display: flex; justify-content: space-between; gap: 8px; margin: 6px 2px 0; font-size: 11px; color: color-mix(in srgb, var(--text) 45%, transparent); }
.tvc-meta kbd { font-size: 10px; padding: 0 4px; }
.tvc-meta [data-tvc-left] { margin-left: auto; font-variant-numeric: tabular-nums; }
.tvc-meta [data-tvc-left].is-over { color: #f87171; font-weight: 700; }
.tvc-signin { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--text) 5%, transparent); font-size: 13px; color: var(--text); }
.tvc-signin a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--radius-sm); background: #5865f2; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tvc-signin a:hover { background: #4752c4; }

:root[data-motion="reduce"] :is(.tvc-ink, .tvc-send) { transition: none; }
:root[data-motion="reduce"] :is(.tvc-m, .tvc-sys).is-new { animation: none; }

/* phones: the panel under the screen, the chat a fixed share of the height */
@media (max-width: 767px) {
  .tvp-side.tvc { height: 62vh; height: 62dvh; }
  .tvc-signin { flex-wrap: wrap; }
}