:root {
  --pm: #74e4ee;
  --pm-strong: #c9fbff;
  --online: #62d98a;
  --talk: #f1dcb0;
  --clan-talk: #8fe3a8;
  --town: #efdcb3;
  --quiet: #a6a095;
  --cl-inset: 3.35rem;
  --cl-rule: 2.95rem;
  --cl-pad: .1rem;
}

.chat-line, .chat-line:is(.k-news, .is-stopped, .role-owner, .role-queen, .role-staff), .chat-line.k-rare:is(.g-legendary, .g-mythic), .chat-line.k-kill:is(.g-rare, .g-epic, .g-legendary, .g-mythic) {
  display: block; position: relative; margin: 0; padding: var(--cl-pad) 0 var(--cl-pad) var(--cl-inset); border: 0; border-radius: .45rem; background: none; animation: none; }
.chat-line time { position: absolute; left: 0; top: .12rem; width: 2.75rem; font: 500 .8rem/1.5rem var(--font-num); color: var(--quiet); }
.chat-line::before { content: ""; position: absolute; left: var(--cl-rule); top: .35rem; bottom: .35rem; width: 2px; border-radius: 1px; background: transparent; }
.chat-line .who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chat-line .chat-text { color: var(--text-1); overflow-wrap: anywhere; }
.chat-line > span:not([class]) { overflow-wrap: anywhere; }
.chat-line .cl-plate { display: inline-flex; align-items: center; gap: .32rem; max-width: 100%; margin-right: .5rem; white-space: nowrap; vertical-align: -.12em; }
.chat-line .cl-plate::after { content: ""; flex: none; align-self: center; width: 1px; height: .95em; margin-left: .15rem; background: rgba(255, 255, 255, .16); }
.chat-line .cl-plate > .chat-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--talk); }
.chat-line .chat-name::after { content: none; }
.chat-line .clan-name-badge { padding: .02rem .36rem .02rem .26rem; font-size: .68rem; letter-spacing: .08em; }
.chat-line .epithet { font-size: .98em; }
.chat-line .chat-role { display: inline-flex; align-items: center; gap: .2rem; padding: .06rem .36rem .06rem .26rem; border-radius: .3rem; font: 800 .68rem/1.4 var(--font-ui); letter-spacing: .1em; box-shadow: none; text-shadow: none; }
.chat-line .chat-role.role-owner { color: #ffd98a; background: linear-gradient(180deg, rgba(255, 196, 92, .22), rgba(255, 140, 60, .12)); box-shadow: inset 0 0 0 1px rgba(255, 196, 92, .5); }
.chat-line .chat-role.role-queen { color: #ffc2e0; background: linear-gradient(180deg, rgba(255, 143, 200, .22), rgba(194, 139, 255, .12)); box-shadow: inset 0 0 0 1px rgba(255, 150, 205, .5); }
.chat-line .chat-role.role-staff { color: #b8f3ff; background: linear-gradient(180deg, rgba(95, 216, 255, .22), rgba(169, 139, 255, .12)); box-shadow: inset 0 0 0 1px rgba(110, 220, 255, .5); }
.chat-line .chat-role .ia-glyph { width: .78rem; height: .78rem; }
.chat-line.role-owner .cl-plate > .chat-name { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ffd98a; filter: none; }
.chat-line.role-queen .cl-plate > .chat-name { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ffb9dc; filter: none; }
.chat-line.role-staff .cl-plate > .chat-name { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #8fe9ff; filter: none; }
.chat-line.role-owner .chat-text, .chat-line.role-queen .chat-text, .chat-line.role-staff .chat-text { color: var(--text-1); }
.chat-line.is-own .cl-plate > .chat-name { color: var(--gold-1); }
.chat-line.ch-clan::before { background: var(--clan-talk); }
.chat-line.ch-trade::before { background: #e8b86a; }
.chat-line.ch-clan .cl-plate > .chat-name { color: var(--clan-talk); }
.chat-line.ch-clan:not(.k-news) .who, .chat-line:has(.chat-text.is-clan) .who { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: inline; margin-right: .45rem; font: 800 .6rem/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--clan-talk); vertical-align: .12em; }
.chat-line .clan-mark { margin-right: .35rem; vertical-align: -.1em; }
.chat-line .chat-text.is-clan { color: #cdeed7; }
.chat-line:is(.k-system, .k-equip) .chat-text { color: var(--text-3); }
.chat-line.k-warn::before { background: var(--ember); }
.chat-line.k-warn .chat-text { color: #ffcfae; }
.chat-line.k-level::before { background: var(--emerald); }
.chat-line.k-level .chat-text { color: #d4f7dc; }
.chat-line.k-milestone::before { background: var(--gold-1); }
.chat-line.k-rare::before { background: var(--rar-epic); }
.chat-line.k-rare .chat-text { color: #ead9ff; }
.chat-line.k-rare[class*="g-"]::before, .chat-line.k-kill:is(.g-rare, .g-epic, .g-legendary, .g-mythic)::before { background: var(--tip-rar); }
.chat-line.k-rare[class*="g-"] .chat-text { color: color-mix(in srgb, var(--tip-rar) 45%, #fff); }
.chat-line.k-rare:is(.g-legendary, .g-mythic), .chat-line.k-kill:is(.g-legendary, .g-mythic) { background: linear-gradient(90deg, transparent calc(var(--cl-rule) - .05rem), color-mix(in srgb, var(--tip-rar) 12%, transparent) calc(var(--cl-rule) + .15rem), transparent 85%); }
.chat-line.k-kill .kill-line { display: inline; }
.chat-line.k-news { margin: .15rem 0; padding-top: .28rem; padding-bottom: .28rem; background: linear-gradient(90deg, transparent calc(var(--cl-rule) - .05rem), rgba(242, 198, 106, .09) calc(var(--cl-rule) + .15rem), transparent 85%); }
.chat-line.k-news::before { background: var(--gold-2); }
.chat-line.k-news[class*="g-"]::before { background: var(--tip-rar); }
.chat-line.k-news[class*="g-"] { background: linear-gradient(90deg, transparent calc(var(--cl-rule) - .05rem), color-mix(in srgb, var(--tip-rar) 12%, transparent) calc(var(--cl-rule) + .15rem), transparent 85%); }
.chat-line.k-news.ch-clan::before { background: var(--clan-talk); }
.chat-line.k-news.ch-clan { background: linear-gradient(90deg, transparent calc(var(--cl-rule) - .05rem), rgba(143, 227, 168, .08) calc(var(--cl-rule) + .15rem), transparent 85%); }
.chat-line.k-news .news-crest { display: inline-flex; vertical-align: -.1em; margin-right: .3rem; color: var(--gold-1); }
.chat-line.k-news .news-crest.is-board .ia-emblem { width: 1.05rem; height: 1.05rem; }
.chat-line.k-news .cl-plate { margin-right: .3rem; }
.chat-line.k-news .cl-plate::after { display: none; }
.chat-line.k-news .cl-plate > .chat-name { color: var(--gold-0); }
.chat-line.k-news .chat-text { color: #ffe9b8; }
.chat-line.k-news[class*="g-"] .chat-text { color: color-mix(in srgb, var(--tip-rar) 85%, #fff); }
.chat-line.k-news:has(.is-town) { background: linear-gradient(90deg, transparent calc(var(--cl-rule) - .05rem), rgba(239, 220, 179, .08) calc(var(--cl-rule) + .15rem), transparent 90%); }
.chat-line.k-news:has(.is-town)::before { background: var(--town); }
.chat-line .chat-text.is-town { font: 400 1.06em/1.45 var(--font-display); letter-spacing: .01em; color: var(--town); }
.chat-line.is-stopped::before { background: rgba(255, 93, 87, .7); }
.chat-line.is-stopped .chat-stop { display: inline-flex; vertical-align: .08em; margin-right: .35rem; }
.chat-line.is-stopped .chat-stop-why { margin-right: .45rem; font-size: .88em; color: #e9aaa4; }
.chat-line.is-stopped .chat-text { color: #aaa397; font-style: italic; }
.chat-line.is-stopped .cl-plate > .chat-name { color: var(--text-2); }
.chat-line.is-stopped time { opacity: 1; }
.chat-line.k-pm::before { background: var(--pm); }
.chat-line.k-pm, .pm-line { color: var(--pm); overflow-wrap: anywhere; }
.chat-line.k-pm .pm-dir, .pm-line .pm-dir { font-weight: 700; color: var(--pm-strong); }
.chat-line.k-pm .chat-name, .pm-line .chat-name { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--pm-strong); cursor: pointer; }
.chat-line.k-pm .chat-name::after, .pm-line .chat-name::after { content: none; }
.chat-line.k-pm.is-to .pm-text, .pm-line.is-to .pm-text { color: color-mix(in srgb, var(--pm) 78%, #fff); }
.chat-line.k-pm.is-pending, .pm-line.is-pending { opacity: .6; }
.chat-unread.is-pm { background: var(--pm); box-shadow: 0 0 .45rem var(--pm); }
.chat-log { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.1rem); mask-image: linear-gradient(180deg, transparent 0, #000 1.1rem); }
.chat-log { will-change: scroll-position; }
.chat-input .chat-say.is-pm { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .4rem .16rem .5rem; border-radius: .3rem; font: 700 .66rem var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--pm); border: 1px solid color-mix(in srgb, var(--pm) 45%, transparent); background: color-mix(in srgb, var(--pm) 10%, transparent); }
.chat-input .chat-say.is-pm:disabled { opacity: 1; cursor: default; }
.chat-input .chat-say.is-pm .ia-glyph { width: .7rem; height: .7rem; }
.chat-input.is-pm { border-color: color-mix(in srgb, var(--pm) 35%, transparent); }
.chat-input.is-muted input::placeholder { color: #ffb8ae; }

.pm-split { display: grid; gap: .08rem; }
.pm-line { margin: 0; }
.pm-split .is-leaving { animation: pm-leave .9s ease-in forwards; }
@keyframes pm-leave { to { opacity: 0; } }
.reduce-motion .pm-split .is-leaving { animation: none; }
@media (prefers-reduced-motion: reduce) { .pm-split .is-leaving { animation: none; } }
.pm-reply { display: inline-flex; align-items: center; gap: .25rem; margin-left: .45rem; padding: .05rem .45rem .05rem .35rem; border-radius: .35rem; border: 1px solid color-mix(in srgb, var(--pm) 45%, transparent); background: rgba(5, 10, 16, .55); color: var(--pm-strong); font: 700 .9rem/1.3 var(--font-ui); letter-spacing: .04em; vertical-align: .08em; cursor: pointer; text-shadow: none; }
.pm-reply .ia-glyph { width: .78rem; height: .78rem; }
.pm-reply:hover, .pm-reply:focus-visible { border-color: var(--pm); color: #fff; }
.pm-hint { margin: .1rem 0 0; font-size: .9rem; color: color-mix(in srgb, var(--pm) 60%, var(--text-3)); }
.pm-hint kbd { padding: 0 .3rem; border-radius: .25rem; border: 1px solid color-mix(in srgb, var(--pm) 40%, transparent); font: 700 .7rem var(--font-ui); color: var(--pm-strong); }

@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .is-hud { --hud-chat-w: 37rem; }
  .is-hud .region-chat .chat { height: 19.5rem; background: linear-gradient(180deg, rgba(10, 15, 25, .88), rgba(6, 9, 16, .9)); border: 1px solid rgba(242, 198, 106, .22); border-top-color: rgba(242, 198, 106, .42); border-radius: 1rem; }
  .is-hud.hud-solid .region-chat .chat { background: rgb(8, 12, 20); }
  .is-hud .region-chat .chat-head { gap: 1rem; padding: .5rem .5rem 0 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .is-hud .region-chat .chat-tab { padding: .3rem 0 .5rem; font: 700 .9rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
  .is-hud .region-chat .chat-tab[aria-pressed="true"] { color: var(--gold-1); }
  .is-hud .region-chat .chat-tab-place { text-transform: none; letter-spacing: .02em; font-weight: 600; color: var(--text-3); }
  .is-hud .region-chat .chat-log { padding: .5rem 1rem .5rem .9rem; font-size: .96rem; line-height: 1.52; }
  .is-hud .region-chat .chat-line time { font-size: .8rem; }
  .is-hud .region-chat .chat-input { margin: .1rem .75rem .75rem; }
  .is-hud .chat-over { position: absolute; left: 0; right: 0; bottom: calc(100% + .45rem); display: flex; flex-direction: column; gap: .55rem; pointer-events: none; }
  .is-hud .chat-over > .broadcast { position: static; pointer-events: auto; }
  .is-hud .pm-split { position: relative; padding: .5rem .8rem .45rem .4rem; isolation: isolate; }
  .is-hud .pm-split::before { content: ""; position: absolute; z-index: -1; left: -1rem; right: 12%; top: .2rem; bottom: -.4rem; border-radius: 50%; background: rgba(2, 5, 10, .5); filter: blur(1.1rem); }
  .is-hud .pm-line { font: 600 .98rem/1.45 var(--font-ui); text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 .5rem rgba(0, 0, 0, .85); }
  .is-hud .pm-line :is(.chat-name, .pm-reply), .is-hud .pm-hint { pointer-events: auto; }
  .is-hud .pm-hint { text-shadow: 0 1px 0 #000; }
  .is-hud .region-chat:has(> .hud-chat-pill) .chat-over { bottom: calc(100% + .45rem); }
}
@media (min-width: 761px) and (max-width: 1319px) and (min-height: 501px), (min-width: 761px) and (max-width: 1319px) and (pointer: fine), (min-width: 761px) and (max-width: 1319px) and (pointer: none) {
  .is-hud { --hud-chat-w: 28rem; }
  .is-hud .region-chat .chat-head { gap: .75rem; padding-left: .85rem; }
  .is-hud .region-chat .chat-tab { font-size: .8rem; letter-spacing: .04em; }
}

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .ia-client[data-sheet="chat"] .region-chat { display: flex; flex-direction: column-reverse; gap: .5rem; }
  .ia-client[data-sheet="chat"] .region-chat > .chat { flex: 1; min-height: 0; height: auto; }
  .chat-over { flex: none; display: grid; gap: .5rem; }
  .pm-split { padding: .6rem .75rem; border-radius: .8rem; border: 1px solid color-mix(in srgb, var(--pm) 30%, transparent); background: rgba(4, 10, 16, .94); }
  .pm-line { font: 600 .92rem/1.45 var(--font-ui); }
  .pm-reply { position: relative; min-height: 2.4rem; margin-top: .2rem; }
  .pm-reply::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max(100%, 3.3rem); height: max(100%, 3.3rem); }
  .pm-hint { display: none; }
  .chat-head { gap: 0; padding-inline: .3rem; }
  .chat-head .chat-tab { justify-content: center; min-width: 3.3rem; min-height: 3.3rem; padding: .6rem .7rem .65rem; }
  .chat-head > .icon-btn, .chat-head > .btn-icon { min-width: 3.3rem; min-height: 3.3rem; }
  :root { --cl-inset: 3rem; --cl-rule: 2.65rem; --cl-pad: .18rem; }
  .chat-line { line-height: 1.55; }
  .chat-line time { top: .22rem; font-size: .76rem; }
  .chat-line::before { top: .38rem; bottom: .38rem; }
  .chat-line .cl-plate { margin-right: .45rem; }
  .chat-line .cl-plate::after { display: none; }
  .region-chat .chat-log { font-size: .9rem; }
  .region-chat :is(.chat-line time, .chat-stop, .chat-stop-why, .chat-role, .chat-say, .chat-line .who, .clan-name-badge, .pm-hint kbd) { font-size: .9rem; }
  .region-chat .chat-head .chat-tab { font-size: .9rem; }
  .region-chat :is(.chat-line.ch-clan:not(.k-news), .chat-line:has(.chat-text.is-clan)) .who { font-size: .9rem; }
  .region-chat .chat-line .epithet { font-size: 1em; }
  .region-chat .chat-input input { min-height: 3.3rem; }
  .region-chat .chat-head { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .region-chat .chat-head::-webkit-scrollbar { display: none; }
  .region-chat .chat-head { padding-inline: .15rem; }
  .region-chat .chat-head .chat-tab { flex: none; padding-inline: .35rem; }
  .region-chat .chat-head > :is(.icon-btn, .btn-icon) { position: sticky; right: 0; z-index: 1; flex: none; margin-left: auto; background: rgb(9, 14, 24); box-shadow: -.6rem 0 .6rem rgb(9, 14, 24); }
}