/* ShotGram v139.55 — LIVE viewer, TikTok layout (phones only: .live-tt).
   The video owns the whole screen. Top-start: a small host pill. Top-end:
   viewer faces, count, close. Bottom-start: slim comments that fade out at
   the top. Bottom: one bar — comment · gift · share · like · more.
   Every rule is scoped to .live-tt, so the desktop LIVE page is untouched. */

html body .live-screen.live-tt {
  position: fixed !important; inset: 0 !important; z-index: 60;
  padding: 0 !important; margin: 0 !important; max-width: none !important;
  background: #000 !important; overflow: hidden !important;
}
html body .live-screen.live-tt .ltt {
  position: absolute !important; inset: 0 !important; display: block !important;
  width: 100% !important; height: 100% !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important; gap: 0 !important;
  background: #000 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html body .live-screen.live-tt .ltt-player {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  max-height: none !important; aspect-ratio: auto !important; border-radius: 0 !important;
  margin: 0 !important; border: 0 !important; background: #000 !important; overflow: hidden !important;
}

/* soft shades so white text reads on any video */
html body .live-tt .ltt-shade { position: absolute; inset-inline: 0; z-index: 3; pointer-events: none;
  border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; display: block !important; }
.live-tt .ltt-shade.top { top: 0; height: calc(var(--sa-t, 0px) + 120px);
  background: linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,0)); }
.live-tt .ltt-shade.bottom { bottom: 0; height: 46%;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.18) 55%, rgba(0,0,0,0)); }

/* ---------- top row ---------- */
.live-tt .ltt-top {
  position: absolute; z-index: 12;
  top: calc(var(--sa-t, 0px) + 8px); inset-inline: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.live-tt .ltt-host {
  display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 60%;
  height: 40px; padding: 3px; padding-inline-end: 4px; border-radius: 999px;
  background: rgba(0,0,0,.34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.live-tt .ltt-host-av, .live-tt .ltt-host-av > * { flex: none; }
.live-tt .ltt-host-av .avatar, .live-tt .ltt-host-av img, .live-tt .ltt-host-av > * {
  width: 34px !important; height: 34px !important; min-width: 34px; border-radius: 50% !important; font-size: 13px !important;
}
.live-tt .ltt-host-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.live-tt .ltt-host-txt b {
  display: flex; align-items: center; gap: 3px; color: #fff; font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw;
}
.live-tt .ltt-host-txt b svg { width: 13px; height: 13px; flex: none; }
.live-tt .ltt-host-txt small {
  display: flex; align-items: center; gap: 3px; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 600;
}
.live-tt .ltt-host-txt small svg { width: 11px; height: 11px; fill: #fff; stroke: none; opacity: .9; }
.live-tt .ltt-host-txt small i { font-style: normal; }
.live-tt .ltt-follow {
  flex: none; display: grid; place-items: center; width: 34px; height: 30px; margin-inline-start: 2px;
  border: 0; border-radius: 999px; background: #fe2c55; color: #fff; padding: 0; cursor: pointer;
  transition: background .2s, width .2s;
}
.live-tt .ltt-follow svg { width: 17px; height: 17px; stroke: #fff; stroke-width: 2.6; fill: none; }
.live-tt .ltt-follow.is-done { background: rgba(255,255,255,.18); }

.live-tt .ltt-right { display: flex; align-items: center; gap: 6px; flex: none; }
.live-tt .ltt-faces { display: flex; align-items: center; }
.live-tt .ltt-faces .live-viewer-face { display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  margin-inline-start: -8px; border: 1.5px solid rgba(0,0,0,.35); background: #3b3550; }
.live-tt .ltt-faces .live-viewer-face:first-child { margin-inline-start: 0; }
.live-tt .ltt-faces .live-viewer-face img { width: 100%; height: 100%; object-fit: cover; }
.live-tt .ltt-faces .live-viewer-face i { display: grid; place-items: center; height: 100%; font-style: normal; color: #fff; font-size: 11px; font-weight: 800; }
.live-tt .ltt-count {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px;
  background: rgba(0,0,0,.34); color: #fff; font-size: 12px; font-weight: 700;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.live-tt .ltt-close {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.live-tt .ltt-close svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2.2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* second row: LIVE + title chips (start) · top gifters (end) */
.live-tt .ltt-sub {
  position: absolute; z-index: 11; top: calc(var(--sa-t, 0px) + 56px); inset-inline-start: 10px;
  display: flex; align-items: center; gap: 6px; max-width: 56%; pointer-events: none;
}
.live-tt .ltt-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
  background: rgba(0,0,0,.32); color: rgba(255,255,255,.92); font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.live-tt .ltt-chip.is-live { flex: none; background: #fe2c55; color: #fff; font-weight: 800; letter-spacing: .4px; }
.live-tt .ltt-chip.is-live i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: ltt-pulse 1.4s ease-in-out infinite; }
@keyframes ltt-pulse { 50% { opacity: .35; } }
html body .live-tt .sg-top-gifters {
  top: calc(var(--sa-t, 0px) + 54px) !important; inset-block-start: calc(var(--sa-t, 0px) + 54px) !important;
  inset-inline-end: 10px !important; inset-inline-start: auto !important;
  background: rgba(0,0,0,.32) !important; border: 0 !important; height: 26px; padding: 2px 8px 2px 3px !important; z-index: 11 !important;
}
html body .live-tt .sg-top-gifters .sg-gifter img, html body .live-tt .sg-top-gifters .sg-gifter i { width: 22px !important; height: 22px !important; border-width: 1.5px !important; }
html body .live-tt .sg-top-gifters .sg-gifter-label { font-size: 10px; color: #ffd36b; }

/* ---------- bottom: comments + bar ---------- */
.live-tt .ltt-bottom {
  position: absolute; z-index: 12; inset-inline: 0; bottom: 0;
  padding: 0 10px calc(var(--sa-b, 0px) + 8px);
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.live-tt .ltt-bottom > * { pointer-events: auto; }
html body .live-tt .ltt-chat {
  display: flex !important; flex-direction: column; gap: 5px;
  width: min(78%, 340px); max-height: 32vh !important; height: auto !important;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 26px 0 2px !important; margin: 0 !important; background: none !important; border: 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
}
.live-tt .ltt-chat::-webkit-scrollbar { display: none; }
.live-tt .ltt-chat > :first-child { margin-top: auto; }
html body .live-tt .ltt-chat .live-chat-empty { display: none !important; }
html body .live-tt .ltt-chat .live-chat-message {
  display: flex !important; align-items: flex-start; gap: 7px;
  width: fit-content !important; max-width: 100% !important; margin: 0 !important;
  padding: 4px 10px 5px 4px !important; padding-inline: 4px 10px !important;
  border-radius: 14px !important; border: 0 !important; box-shadow: none !important;
  background: rgba(0,0,0,.22) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  animation: ltt-in .22s ease-out;
}
@keyframes ltt-in { from { opacity: 0; transform: translateY(6px); } }
html body .live-tt .ltt-chat .live-chat-message > img {
  width: 24px !important; height: 24px !important; min-width: 24px; border-radius: 50% !important; object-fit: cover; margin: 1px 0 0 !important;
}
html body .live-tt .ltt-chat .live-chat-message > div { display: flex !important; flex-direction: column; min-width: 0; gap: 0 !important; }
html body .live-tt .ltt-chat .live-chat-message b {
  display: flex; align-items: center; gap: 3px;
  font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important;
  color: rgba(255,255,255,.68); text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
html body .live-tt .ltt-chat .live-chat-message b svg { width: 11px; height: 11px; }
html body .live-tt .ltt-chat .live-chat-message span {
  display: block; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.32 !important;
  color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.5); overflow-wrap: anywhere; white-space: normal !important;
}
html body .live-tt .ltt-chat .live-chat-system {
  display: flex !important; align-items: center; gap: 5px; width: fit-content; max-width: 100%;
  padding: 2px 4px !important; margin: 0 !important; background: none !important; border: 0 !important;
  color: rgba(255,255,255,.72) !important; font-size: 12px !important; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
html body .live-tt .ltt-chat .live-chat-system svg { width: 13px; height: 13px; opacity: .85; flex: none; }

.live-tt .ltt-bar { display: flex; align-items: center; gap: 8px; margin: 0; }
.live-tt .ltt-input {
  flex: 1; min-width: 0; display: flex; align-items: center; height: 40px; padding: 0 4px; padding-inline-start: 14px;
  border-radius: 999px; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html body .live-tt .ltt-input input {
  flex: 1; min-width: 0; height: 100%; padding: 0 !important; margin: 0; border: 0 !important; outline: 0;
  background: transparent !important; box-shadow: none !important; color: #fff; font-size: 14px; font-family: inherit;
}
.live-tt .ltt-input input::placeholder { color: rgba(255,255,255,.72); }
.live-tt .ltt-send {
  display: none; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: #fe2c55; color: #fff; cursor: pointer;
}
.live-tt .ltt-send svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.2; fill: none; }
html[dir="rtl"] .live-tt .ltt-send svg { transform: scaleX(-1); }
.live-tt .ltt-bar.has-text .ltt-send { display: grid; }
.live-tt .ltt-ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.34); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .12s;
}
.live-tt .ltt-ico:active { transform: scale(.9); }
.live-tt .ltt-ico svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2; fill: none; }
.live-tt .ltt-ico.ltt-gift svg { width: 27px; height: 27px; stroke: none; }
.live-tt .ltt-ico.ltt-gift { animation: ltt-gift-nudge 5s ease-in-out 2s infinite; }
@keyframes ltt-gift-nudge { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(-12deg) scale(1.08); } 94% { transform: rotate(10deg) scale(1.08); } 97% { transform: rotate(-4deg); } }
.live-tt .ltt-ico.ltt-like svg { fill: #fe2c55; stroke: #fe2c55; }
/* typing: the comment box takes the whole row */
.live-tt .ltt-bar.is-typing .ltt-ico { display: none; }
.live-tt .ltt-bar.is-typing .ltt-input { background: rgba(20,20,28,.82); }

/* hearts rise from the like button side */
html body .live-tt .live-heart-burst { z-index: 13; }

@media (prefers-reduced-motion: reduce) {
  .live-tt .ltt-ico.ltt-gift, .live-tt .ltt-chip.is-live i, html body .live-tt .ltt-chat .live-chat-message { animation: none !important; }
}

/* v112 hid this share button for the old side rail; the TikTok bar needs it */
html body .live-screen.live-tt #liveShareBtn { display: grid !important; }
/* "swipe up for the next LIVE": centred (it slid off-screen in Arabic) */
html body .live-tt .sg-swipe-hint {
  left: 50% !important; right: auto !important; inset-inline-start: auto !important;
  inset-block-end: auto !important; bottom: auto !important; top: 44% !important;
  transform: translate3d(-50%, 0, 0) !important; background: rgba(0,0,0,.45) !important; border: 0 !important;
}
html body .live-screen.live-tt .ltt-bar.is-typing #liveShareBtn { display: none !important; }

/* ---------- gift panel (TikTok style, all screen sizes) ---------- */
html body .modal-backdrop.ltt-gs-backdrop {
  display: flex !important; align-items: flex-end !important; justify-content: center !important;
  padding: 0 !important; background: rgba(0,0,0,.18) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body .ltt-gs-backdrop > .modal {
  width: 100% !important; max-width: 520px !important; max-height: 62vh !important; margin: 0 !important;
  padding: 0 0 calc(var(--sa-b, 0px) + 6px) !important; overflow: hidden !important;
  border-radius: 16px 16px 0 0 !important; border: 0 !important;
  background: #121218 !important; background-color: #121218 !important; box-shadow: 0 -10px 40px rgba(0,0,0,.45) !important;
  animation: ltt-gs-up .24s cubic-bezier(.2,.9,.3,1) !important; transform: none !important;
}
@keyframes ltt-gs-up { from { transform: translateY(100%); } }
html body .ltt-gs-backdrop .modal-close { display: none !important; }
.ltt-gs { display: flex; flex-direction: column; color: #fff; max-height: 62vh; }
.ltt-gs-head { padding: 12px 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ltt-gs-tabs { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.ltt-gs-tabs::-webkit-scrollbar { display: none; }
html body .ltt-gs .sg-gift-tier-btn {
  flex: none; position: relative; padding: 4px 0 10px !important; margin: 0; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; color: rgba(255,255,255,.55) !important;
  font-size: 14px !important; font-weight: 600 !important; cursor: pointer;
}
html body .ltt-gs .sg-gift-tier-btn.is-active { color: #fff !important; }
html body .ltt-gs .sg-gift-tier-btn.is-active::after {
  content: ''; position: absolute; inset-inline: 20%; bottom: 0; height: 2.5px; border-radius: 2px; background: #fff;
}
.ltt-gs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px 8px 6px; overflow-y: auto; min-height: 150px;
}
.ltt-gs-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  min-height: 112px; padding: 8px 2px 6px; border: 1.5px solid transparent; border-radius: 10px; background: transparent;
  color: #fff; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.ltt-gs-card.is-selected { border-color: #fe2c55; background: rgba(254,44,85,.08); padding-bottom: 0; overflow: hidden; }
.ltt-gs-art { display: grid; place-items: center; width: 56px; height: 56px; transition: transform .2s cubic-bezier(.3,1.5,.5,1); }
.ltt-gs-card.is-selected .ltt-gs-art { transform: scale(1.12) translateY(-2px); }
.ltt-gs-card.is-pop .ltt-gs-art { animation: ltt-gs-pop .3s cubic-bezier(.3,1.6,.5,1); }
@keyframes ltt-gs-pop { 40% { transform: scale(1.32) translateY(-4px); } }
.ltt-gs-art img, .ltt-gs-art .sg-gift-img { width: 56px !important; height: 56px !important; object-fit: contain; }
.ltt-gs-art span { font-size: 38px; line-height: 1; }
.ltt-gs-name { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.92); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltt-gs-cost { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); }
.ltt-gs-cost .sg-shot-icon { width: 12px; height: 12px; }
.ltt-gs-send {
  display: block; align-self: stretch; margin-top: auto; padding: 6px 0 7px; background: #fe2c55; color: #fff;
  font-size: 13px; font-weight: 700; text-align: center;
}
.ltt-gs-send.is-short { background: #ffb000; color: #1a1300; }
.ltt-gs-warn { margin: 0 14px 4px; font-size: 12px; color: #ffcf66; }
.ltt-gs-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px 6px; border-top: 1px solid rgba(255,255,255,.08);
}
.ltt-gs-coins {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #fff; font-family: inherit; cursor: pointer;
}
.ltt-gs-coins .sg-shot-icon { width: 18px; height: 18px; }
.ltt-gs-coins b { font-size: 14px; font-weight: 800; }
.ltt-gs-coins span { font-size: 13px; font-weight: 600; color: #ffcf66; margin-inline-start: 4px; }
.ltt-gs-coins i { font-style: normal; color: #ffcf66; font-size: 16px; line-height: 1; }
html[dir="rtl"] .ltt-gs-coins i { transform: scaleX(-1); }
.ltt-gs-qty { display: inline-flex; align-items: center; height: 32px; border-radius: 999px; background: rgba(255,255,255,.08); }
.ltt-gs-qty[hidden] { display: none; }
.ltt-gs-qty button { width: 32px; height: 32px; border: 0; background: none; color: #fff; font-size: 18px; cursor: pointer; }
.ltt-gs-qty b { min-width: 30px; text-align: center; font-size: 13px; font-weight: 800; }

/* ---------- the host's own chat (creator screen): same TikTok lines ---------- */
html body .live-creator-screen .live-creator-chat .live-creator-chat-line {
  display: flex !important; align-items: flex-start !important; gap: 7px !important;
  width: fit-content !important; max-width: 92% !important; margin: 0 0 5px !important;
  padding: 4px 10px 5px 4px !important; padding-inline: 4px 10px !important;
  border-radius: 14px !important; background: rgba(0,0,0,.28) !important; border: 0 !important; box-shadow: none !important;
}
html body .live-creator-screen .live-creator-chat .live-creator-chat-line > img {
  width: 24px !important; height: 24px !important; min-width: 24px; border-radius: 50% !important; margin: 1px 0 0 !important;
}
html body .live-creator-screen .live-creator-chat .live-creator-chat-line p {
  display: flex !important; flex-direction: column !important; margin: 0 !important; min-width: 0;
}
html body .live-creator-screen .live-creator-chat .live-creator-chat-line b {
  display: flex !important; align-items: center; gap: 3px; font-size: 12px !important; font-weight: 600 !important;
  line-height: 1.3 !important; color: rgba(255,255,255,.68); text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
html body .live-creator-screen .live-creator-chat .live-creator-chat-line span {
  display: block; font-size: 14px !important; line-height: 1.32 !important; color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.5); overflow-wrap: anywhere;
}
@media (max-width: 759px) {
html body .live-creator-screen.is-broadcasting .live-creator-chat {
  display: flex !important; flex-direction: column !important; gap: 5px !important; align-content: normal !important;
}
html body .live-creator-screen.is-broadcasting .live-creator-chat > :first-child { margin-top: auto !important; }
}
/* laptop host: the TOP gifters sit next to the tool buttons, not on them */
@media (min-width: 760px) {
  html body .live-creator-screen .sg-top-gifters { inset-inline-start: auto !important; left: 64px !important; right: auto !important; top: 16px !important; inset-block-start: 16px !important; }
  html body .live-creator-screen.is-broadcasting .live-creator-social .live-creator-chat {
    display: flex !important; flex-direction: column !important; gap: 6px !important;
    flex: 1 1 auto !important; height: auto !important; max-height: 38vh !important; min-height: 0 !important; overflow-y: auto !important; }
  html body .live-creator-screen.is-broadcasting .live-creator-social { display: flex !important; flex-direction: column !important; min-height: 0 !important; }
  html body .live-creator-screen.is-broadcasting .live-creator-social > :not(.live-creator-chat) { flex: none !important; }
  html body .live-creator-screen.is-broadcasting .live-creator-social .live-creator-chat > :first-child { margin-top: auto !important; }
  html body .live-creator-screen.is-broadcasting .live-creator-social .live-creator-chat > * { flex: none !important; }
}
html body .live-creator-screen .live-creator-chat .live-creator-chat-line { flex: none !important; margin: 0 !important; }

/* ---------- profile: this person is LIVE now ---------- */
html body .profile-avatar.is-live-now {
  position: relative; background: #fe2c55 !important; padding: 3px !important;
  animation: pf-live-ring 1.6s ease-in-out infinite;
}
html body .profile-avatar.is-live-now::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(254,44,85,.65);
  animation: pf-live-wave 1.6s ease-out infinite; pointer-events: none;
}
@keyframes pf-live-ring { 50% { transform: scale(.965); } }
@keyframes pf-live-wave { from { transform: scale(.94); opacity: 1; } to { transform: scale(1.12); opacity: 0; } }
html body .profile-avatar .pf-live-tag {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); z-index: 2;
  padding: 2px 8px 3px; border-radius: 6px; border: 2px solid var(--ink, #05060d);
  background: #fe2c55; color: #fff; font: 800 11px/1.1 Inter, system-ui, sans-serif; letter-spacing: .3px; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  html body .profile-avatar.is-live-now, html body .profile-avatar.is-live-now::after { animation: none; }
}

/* =================== v1.3.6 — everything on the LEFT, like TikTok ===================
   Usernames are Latin, so the whole LIVE overlay is laid out left-to-right
   in every language: host pill top-left, ✕ top-right, comments bottom-left,
   every comment starts at the left edge. Arabic words still read correctly
   inside their line (dir=auto). */
html body .live-tt .ltt,
html body .live-tt .ltt-top, html body .live-tt .ltt-sub, html body .live-tt .ltt-bottom,
html body .live-tt .ltt-chat, html body .live-tt #creatorChatList { direction: ltr !important; }
html body .live-tt .ltt-chat .live-chat-message,
html body .live-tt #creatorChatList .live-creator-chat-line { direction: ltr !important; text-align: left !important; align-self: flex-start !important; }
html body .live-tt .ltt-chat .live-chat-message .ltt-msg,
html body .live-tt #creatorChatList .live-creator-chat-line .ltt-msg { unicode-bidi: plaintext; text-align: left !important; }
html body .live-tt .ltt-chat .live-chat-system { align-self: flex-start !important; direction: ltr; }
html body .live-tt .ltt-chat .live-chat-system span { unicode-bidi: plaintext; }
html body .live-tt .ltt-chat .live-chat-message b .ltt-name,
html body .live-tt #creatorChatList b .ltt-name { unicode-bidi: plaintext; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
html[dir="rtl"] .live-tt .ltt-send svg { transform: none !important; }
html body .live-tt .ltt-host-txt b { unicode-bidi: plaintext; }

/* badges after the name: best badge + clan tag (icon they picked + tag) */
.ltt-badges { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 2px; }
.ltt-badges:empty { display: none; }
.ltt-badges i { font-style: normal; display: inline-flex; align-items: center; }
.ltt-fam svg, .ltt-fam img { width: 16px !important; height: 16px !important; }
.ltt-clan {
  gap: 2px; height: 16px; padding: 0 5px 0 2px; border-radius: 5px;
  background: linear-gradient(90deg, var(--c1), var(--c2)); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .2px; text-shadow: none;
}
.ltt-clan img.clan-badge { width: 13px !important; height: 13px !important; image-rendering: pixelated; }
.ltt-clan em { font-style: normal; line-height: 1; }

/* =================== the HOST's own screen while LIVE (phone) =================== */
html body .live-screen.live-tt-host .live-room-shell { position: absolute !important; inset: 0 !important; display: block !important; padding: 0 !important; max-width: none !important; }
html body .live-screen.live-tt-host #liveStage {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  max-height: none !important; border-radius: 0 !important; margin: 0 !important; aspect-ratio: auto !important;
}
html body .live-screen.live-tt-host #livePreview { width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body .live-screen.live-tt-host .live-control-panel,
html body .live-screen.live-tt-host .live-top-row,
html body .live-screen.live-tt-host .live-host-card,
html body .live-screen.live-tt-host .live-creator-stats-top,
html body .live-screen.live-tt-host .live-empty-preview { display: none !important; }
html body .live-screen.live-tt-host .live-stage-gradient {
  display: block !important; background: linear-gradient(to bottom, rgba(0,0,0,.4), transparent 18%, transparent 55%, rgba(0,0,0,.55)) !important;
}
.live-tt-host .ltt-host-top, .live-tt-host .ltt-sub, .live-tt-host .ltt-host-bottom { z-index: 14; }
.live-tt-host .ltt-host-txt small b, .live-tt-host .ltt-count b, .live-tt-host .ltt-timer-slot { font-weight: 700; }
html body .live-tt-host .ltt-likes-slot, html body .live-tt-host .ltt-likes-slot * { font-style: normal; font-size: 11px !important; color: rgba(255,255,255,.85) !important; }
html body .live-tt-host .ltt-count-slot b { font-size: 12px !important; color: #fff !important; }
html body .live-tt-host .ltt-faces-slot { display: flex; }
html body .live-tt-host .ltt-faces-slot .live-viewer-faces { display: flex !important; }
html body .live-tt-host .ltt-faces-slot .live-viewer-face { display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; margin-inline-start: -8px; border: 1.5px solid rgba(0,0,0,.35); background: #3b3550; }
html body .live-tt-host .ltt-faces-slot .live-viewer-face:first-child { margin-inline-start: 0; }
html body .live-tt-host .ltt-faces-slot .live-viewer-face img { width: 100%; height: 100%; object-fit: cover; }
html body .live-tt-host .ltt-faces-slot .live-viewer-face i { display: grid; place-items: center; height: 100%; font-style: normal; color: #fff; font-size: 11px; font-weight: 800; }
html body .live-tt-host .ltt-timer-slot #liveTimer { all: unset; font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* chat */
html body .live-tt-host #creatorChatList {
  display: flex !important; flex-direction: column !important; gap: 5px !important;
  width: min(78%, 340px) !important; max-height: 32vh !important; height: auto !important; min-height: 0 !important;
  overflow-y: auto !important; padding: 26px 0 2px !important; margin: 0 !important; background: none !important; border: 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px) !important; mask-image: linear-gradient(to bottom, transparent 0, #000 26px) !important;
  scrollbar-width: none; pointer-events: auto;
}
html body .live-tt-host #creatorChatList::-webkit-scrollbar { display: none; }
html body .live-tt-host #creatorChatList > .muted { display: none; }
html body .live-tt-host #creatorChatList .live-creator-chat-line { max-width: 100% !important; background: rgba(0,0,0,.22) !important; }

/* bottom bar: [comment (send)] [share] [♥] [VS] [⋯] */
.live-tt-host .ltt-host-bar { display: flex; align-items: center; gap: 8px; }
html body .live-tt-host #creatorChatForm { display: contents !important; }
html body .live-tt-host #creatorChatInput {
  order: 1; flex: 1; min-width: 0; height: 40px !important; min-height: 40px !important; padding: 0 14px !important; margin: 0 !important;
  border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.14) !important; box-shadow: none !important;
  color: #fff !important; font-size: 14px !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html body .live-tt-host #creatorChatInput::placeholder { color: rgba(255,255,255,.72); }
html body .live-tt-host #creatorChatForm > button,
html body .live-tt-host .ltt-host-bar > .live-battle-invite,
html body .live-tt-host .ltt-host-bar > #lttHostMore {
  flex: none; display: grid !important; place-items: center; width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: rgba(0,0,0,.34) !important; box-shadow: none !important; color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html body .live-tt-host #creatorChatForm > button svg, html body .live-tt-host #lttHostMore svg { width: 22px; height: 22px; stroke: #fff; fill: none; }
html body .live-tt-host #creatorChatForm > button[type="submit"] { order: 2; display: none !important; background: #fe2c55 !important; width: 36px !important; height: 36px !important; min-width: 36px; }
html body .live-tt-host #creatorChatForm.has-text > button[type="submit"] { display: grid !important; }
html body .live-tt-host #creatorChatForm > .live-creator-share { order: 3; }
html body .live-tt-host #creatorChatForm > .live-creator-like { order: 4; }
html body .live-tt-host #creatorChatForm > .live-creator-like svg { fill: #fe2c55 !important; stroke: #fe2c55 !important; color: #fe2c55; }
html body .live-tt-host .ltt-host-bar > .live-battle-invite { order: 5; }
html body .live-tt-host .ltt-host-bar > .live-battle-invite > span:not(.live-battle-bolt) { display: none !important; }
html body .live-tt-host .ltt-host-bar > .live-battle-invite .live-battle-bolt {
  display: grid; place-items: center; width: 30px; height: 22px; margin: 0; border-radius: 7px; font-size: 11px; font-weight: 900;
  background: linear-gradient(135deg, #22d3ee, #6a5cff 55%, #fe2c55); color: #fff;
}
html body .live-tt-host .ltt-host-bar > #lttHostMore { order: 6; }
html body .live-tt-host .ltt-host-bar.is-typing > .live-battle-invite,
html body .live-tt-host .ltt-host-bar.is-typing > #lttHostMore,
html body .live-tt-host .ltt-host-bar.is-typing #creatorChatForm > .live-creator-share,
html body .live-tt-host .ltt-host-bar.is-typing #creatorChatForm > .live-creator-like { display: none !important; }

/* flip + mic: small round buttons on the right edge */
html body .live-tt-host .sg-live-quick {
  position: absolute !important; z-index: 14 !important; right: 10px !important; left: auto !important;
  top: calc(var(--sa-t, 0px) + 100px) !important; bottom: auto !important; transform: none !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important;
}
html body .live-tt-host .sg-live-quick .sg-quick-btn {
  width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important; border-radius: 50% !important;
  display: grid !important; place-items: center; background: rgba(0,0,0,.34) !important; border: 0 !important; box-shadow: none !important;
}
html body .live-tt-host .sg-live-quick .sg-quick-btn.is-off { background: #fe2c55 !important; }
html body .live-tt-host .sg-live-quick .sg-quick-label { display: none !important; }
html body .live-tt-host .sg-live-quick svg { width: 21px; height: 21px; }
/* TOP gifters under the viewers, top-right */
html body .live-tt-host .sg-top-gifters { top: calc(var(--sa-t, 0px) + 54px) !important; inset-block-start: calc(var(--sa-t, 0px) + 54px) !important; right: 10px !important; left: auto !important; inset-inline: auto !important; }
html body .live-tt-host .sg-live-quick { top: calc(var(--sa-t, 0px) + 96px) !important; }
html body .live-tt-host .live-heart-burst { z-index: 13 !important; }

/* stats inside the ⋯ sheet */
.ltt-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 4px 0 12px; }
.ltt-stats span { display: flex; flex-direction: column; align-items: center; padding: 10px 2px; border-radius: 12px; background: rgba(255,255,255,.06); }
.ltt-stats b { font-size: 16px; font-weight: 800; color: #fff; }
.ltt-stats small { font-size: 11px; color: rgba(255,255,255,.6); }
html body .live-tt #liveChatInput, html body .live-tt #creatorChatInput { text-align: left !important; direction: ltr; unicode-bidi: plaintext; }
html body .live-tt #liveChatInput::placeholder, html body .live-tt #creatorChatInput::placeholder { text-align: left; }
html body .live-tt-host .ltt-timer-slot #liveTimer { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; min-width: 0 !important; height: auto !important; border-radius: 0 !important; }

html body .live-tt .sg-swipe-hint { left: 0 !important; right: 0 !important; inset-inline: 0 !important; margin: 0 auto !important; width: max-content !important; transform: none !important; }