.ys-public-live-chat {
  --ys-live-text: #f0ede8;
  --ys-live-muted: #aaa39a;
  --ys-live-gold: #c79a55;
  --ys-live-border: rgba(199,154,85,.44);
  --ys-live-soft: rgba(199,154,85,.10);
  --ys-live-green: #4ebd73;

  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 2147483000;
  pointer-events: none;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ys-public-live-chat *,
.ys-public-live-chat *::before,
.ys-public-live-chat *::after {
  box-sizing: border-box;
}

.ys-public-live-chat__tracker,
.ys-public-live-chat__panel {
  pointer-events: auto;
}

.ys-public-live-chat__tracker[hidden],
.ys-public-live-chat__panel[hidden],
.ys-public-live-chat [hidden] {
  display: none !important;
}

.ys-public-live-chat__tracker {
  min-width: 244px;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--ys-live-border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(28,25,22,.99), rgba(10,10,11,.995));
  color: var(--ys-live-text);
  box-shadow: 0 18px 58px rgba(0,0,0,.56);
  cursor: pointer;
  text-align: left;
}

.ys-public-live-chat__tracker:hover {
  border-color: rgba(218,170,92,.76);
}

.ys-public-live-chat__tracker-icon,
.ys-public-live-chat__brand-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(199,154,85,.55);
  border-radius: 50%;
  background: rgba(199,154,85,.07);
  color: var(--ys-live-gold);
  font-size: 16px;
}

.ys-public-live-chat__tracker-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ys-public-live-chat__tracker-copy strong {
  color: var(--ys-live-text);
  font-size: 13px;
  line-height: 1.2;
}

.ys-public-live-chat__tracker-copy small {
  max-width: 158px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ys-live-muted);
  font-size: 10px;
}

.ys-public-live-chat__tracker-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ys-live-gold);
  color: #17120d;
  font-size: 11px;
  font-weight: 800;
}

.ys-public-live-chat__tracker-arrow {
  color: var(--ys-live-gold);
}

.ys-public-live-chat__panel {
  width: min(580px, calc(100vw - 36px));
  height: min(700px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto auto auto minmax(200px,1fr) auto;
  overflow: hidden;
  border: 1px solid var(--ys-live-border);
  border-radius: 15px;
  background:
    radial-gradient(circle at 10% 0%, rgba(177,111,48,.10), transparent 30%),
    linear-gradient(180deg, rgba(25,24,23,.995), rgba(9,10,11,.997));
  color: var(--ys-live-text);
  box-shadow: 0 24px 90px rgba(0,0,0,.68);
}

.ys-public-live-chat__header {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(199,154,85,.22);
  background: rgba(255,255,255,.018);
}

.ys-public-live-chat__brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.ys-public-live-chat__brand > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ys-public-live-chat__brand strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e8c88f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  letter-spacing: .02em;
}

.ys-public-live-chat__brand small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ys-live-muted);
  font-size: 11px;
}

.ys-public-live-chat__online-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--ys-live-green);
  box-shadow: 0 0 0 3px rgba(78,189,115,.10);
}

.ys-public-live-chat__window-actions {
  display: flex;
  gap: 6px;
}

.ys-public-live-chat__window-actions button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(199,154,85,.28);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #ead2aa;
  cursor: pointer;
  font-size: 19px;
}

.ys-public-live-chat__window-actions button:hover {
  background: var(--ys-live-soft);
  border-color: rgba(199,154,85,.58);
}

.ys-public-live-chat__ticketline {
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  color: #d1b278;
  font-size: 11px;
}

.ys-public-live-chat__ticketline span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ys-public-live-chat__ticketline strong {
  flex: 0 0 auto;
  color: #e7d7ba;
  font-size: 10px;
  font-weight: 700;
}

.ys-public-live-chat__inactivity {
  margin: 10px 14px 0;
  padding: 9px 11px;
  border: 1px solid rgba(173,112,64,.32);
  border-radius: 8px;
  background: rgba(126,70,35,.12);
  color: #d6b99a;
  font-size: 12px;
  line-height: 1.4;
}

.ys-public-live-chat__messages {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(199,154,85,.38) transparent;
}

.ys-public-live-chat__message {
  max-width: 88%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}

.ys-public-live-chat__message--player {
  justify-self: end;
  border-color: rgba(199,154,85,.35);
  background: rgba(199,154,85,.10);
}

.ys-public-live-chat__message--staff {
  justify-self: start;
  border-color: rgba(120,128,137,.28);
  background: rgba(89,96,105,.10);
}

.ys-public-live-chat__message--system {
  max-width: 100%;
  justify-self: center;
  background: transparent;
  border-style: dashed;
  color: var(--ys-live-muted);
}

.ys-public-live-chat__message-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 5px;
  color: #d9c3a0;
  font-size: 10px;
}

.ys-public-live-chat__message-head span {
  color: var(--ys-live-muted);
}

.ys-public-live-chat__message-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ys-live-text);
  font-size: 14px;
  line-height: 1.5;
}

.ys-public-live-chat__composer {
  border-top: 1px solid rgba(199,154,85,.18);
  background: rgba(0,0,0,.16);
}

.ys-public-live-chat__composer-inner {
  display: grid;
  gap: 9px;
  padding: 12px 14px 14px;
}

.ys-public-live-chat__composer textarea {
  width: 100%;
  min-height: 96px;
  max-height: 220px;
  resize: vertical;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  outline: none;
  background: rgba(255,255,255,.035);
  color: var(--ys-live-text);
  font-size: 14px;
  line-height: 1.45;
}

.ys-public-live-chat__composer textarea:focus {
  border-color: rgba(199,154,85,.58);
  box-shadow: 0 0 0 3px rgba(199,154,85,.08);
}

.ys-public-live-chat__composer-actions {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
}

.ys-public-live-chat__attach,
.ys-public-live-chat__primary {
  min-height: 42px;
  border-radius: 8px;
  cursor: pointer;
}

.ys-public-live-chat__attach {
  padding: 0 12px;
  border: 1px solid rgba(199,154,85,.25);
  background: rgba(255,255,255,.025);
  color: #d9c39f;
}

.ys-public-live-chat__primary {
  padding: 0 16px;
  border: 1px solid rgba(199,154,85,.70);
  background: linear-gradient(180deg, #b58445, #8d602e);
  color: #fff8ec;
  font-weight: 700;
}

.ys-public-live-chat__attach:disabled,
.ys-public-live-chat__primary:disabled {
  opacity: .55;
  cursor: wait;
}

.ys-public-live-chat__attachment-hint {
  min-width: 0;
  color: var(--ys-live-muted);
  font-size: 10px;
  line-height: 1.3;
}

.ys-public-live-chat__composer-feedback {
  min-height: 16px;
  color: #d1b278;
  font-size: 11px;
}

body[data-ys-live-chat-standalone="1"] {
  margin: 0;
  min-height: 100vh;
  background: #08090a;
}

body[data-ys-live-chat-standalone="1"] .ys-public-live-chat {
  position: static;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
}

body[data-ys-live-chat-standalone="1"] .ys-public-live-chat__panel {
  width: min(720px, 100%);
  height: calc(100vh - 36px);
}

@media (max-width: 700px) {
  .ys-public-live-chat {
    right: 10px;
    bottom: 10px;
  }

  .ys-public-live-chat__tracker {
    min-width: 210px;
  }

  .ys-public-live-chat__panel {
    width: calc(100vw - 20px);
    height: min(760px, calc(100vh - 20px));
  }

  .ys-public-live-chat__composer-actions {
    grid-template-columns: 1fr auto;
  }

  .ys-public-live-chat__attachment-hint {
    grid-column: 1 / -1;
    order: 3;
  }
}

@media (max-width: 460px) {
  .ys-public-live-chat {
    right: 0;
    bottom: 0;
  }

  .ys-public-live-chat__panel {
    width: 100vw;
    height: 92vh;
    border-radius: 14px 14px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .ys-public-live-chat__tracker {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .ys-public-live-chat__message {
    max-width: 94%;
  }

  .ys-public-live-chat__composer-actions {
    grid-template-columns: 1fr 1fr;
  }

  .ys-public-live-chat__attach,
  .ys-public-live-chat__primary {
    width: 100%;
  }
}


/* YASHARIEL_LIVE_CHAT_COMPACT_ATTACHMENTS_V1 */
.ys-public-live-chat__panel {
  width: min(520px, calc(100vw - 28px));
  height: min(620px, calc(100vh - 28px));
  border-radius: 12px;
}
.ys-public-live-chat__header {
  min-height: 54px;
  padding: 9px 12px;
  gap: 10px;
}
.ys-public-live-chat__brand {
  gap: 8px;
}
.ys-public-live-chat__brand > div {
  gap: 1px;
}
.ys-public-live-chat__brand strong {
  font-size: 16px;
}
.ys-public-live-chat__brand small {
  font-size: 10px;
}
.ys-public-live-chat__window-actions button {
  width: 34px;
  height: 34px;
  font-size: 16px;
}
.ys-public-live-chat__ticketline {
  min-height: 34px;
  padding: 6px 12px;
  gap: 10px;
}
.ys-public-live-chat__inactivity {
  margin: 7px 10px 0;
  padding: 6px 8px;
  font-size: 11px;
}
.ys-public-live-chat__messages {
  gap: 7px;
  padding: 10px;
}
.ys-public-live-chat__message {
  max-width: 90%;
  padding: 7px 9px;
  border-radius: 8px;
}
.ys-public-live-chat__message-head {
  gap: 10px;
  margin-bottom: 3px;
  font-size: 9px;
}
.ys-public-live-chat__message-body {
  font-size: 13px;
  line-height: 1.38;
}
.ys-public-live-chat__composer-inner {
  gap: 6px;
  padding: 8px 10px 9px;
}
.ys-public-live-chat__composer textarea {
  min-height: 64px;
  max-height: 150px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
}
.ys-public-live-chat__composer-actions {
  gap: 6px;
}
.ys-public-live-chat__attach,
.ys-public-live-chat__primary {
  min-height: 34px;
  border-radius: 7px;
  font-size: 12px;
}
.ys-public-live-chat__attach {
  padding: 0 9px;
}
.ys-public-live-chat__primary {
  padding: 0 12px;
}
.ys-public-live-chat__attachment-hint {
  font-size: 9px;
}
.ys-public-live-chat__composer-feedback {
  min-height: 12px;
  font-size: 10px;
}

.ys-public-live-chat__attachment-card {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr);
  grid-template-areas:
    "preview info"
    "preview actions";
  gap: 6px 9px;
  margin-top: 2px;
  padding: 7px;
  border: 1px solid rgba(199,154,85,.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(199,154,85,.07), rgba(255,255,255,.025));
}
.ys-public-live-chat__attachment-card:hover {
  border-color: rgba(199,154,85,.62);
  background:
    linear-gradient(180deg, rgba(199,154,85,.11), rgba(255,255,255,.035));
}
.ys-public-live-chat__attachment-preview {
  grid-area: preview;
  position: relative;
  width: 74px;
  height: 58px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  background: rgba(0,0,0,.28);
  cursor: pointer;
}
.ys-public-live-chat__attachment-preview img,
.ys-public-live-chat__attachment-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ys-public-live-chat__attachment-fallback,
.ys-public-live-chat__attachment-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #dfbd83;
  font-size: 20px;
  pointer-events: none;
}
.ys-public-live-chat__attachment-info {
  grid-area: info;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 2px;
}
.ys-public-live-chat__attachment-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ead7b8;
  font-size: 11px;
}
.ys-public-live-chat__attachment-info small {
  color: var(--ys-live-muted);
  font-size: 9px;
}
.ys-public-live-chat__attachment-status {
  width: fit-content;
  padding: 1px 5px;
  border: 1px solid rgba(108,156,96,.42);
  border-radius: 999px;
  color: #a9cf9f;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
}
.ys-public-live-chat__attachment-actions {
  grid-area: actions;
  display: flex;
  gap: 5px;
  align-items: center;
}
.ys-public-live-chat__attachment-actions button {
  min-height: 25px;
  padding: 0 7px;
  border: 1px solid rgba(199,154,85,.26);
  border-radius: 5px;
  background: rgba(255,255,255,.025);
  color: #d9c39f;
  font-size: 9px;
  cursor: pointer;
}
.ys-public-live-chat__attachment-actions button:hover {
  border-color: rgba(199,154,85,.58);
}
.ys-public-live-chat__attachment-actions button:disabled,
.ys-public-live-chat__attachment-preview:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ys-public-live-chat__attachment-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(5px);
}
.ys-public-live-chat__attachment-overlay-frame {
  position: relative;
  width: min(980px, 94vw);
  max-height: 92vh;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(199,154,85,.42);
  border-radius: 10px;
  background: #101112;
  box-shadow: 0 28px 100px rgba(0,0,0,.78);
}
.ys-public-live-chat__attachment-overlay-title {
  padding-right: 44px;
  color: #e8d5b4;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ys-public-live-chat__attachment-overlay-close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(199,154,85,.35);
  border-radius: 7px;
  background: rgba(0,0,0,.35);
  color: #ead7b8;
  font-size: 22px;
  cursor: pointer;
}
.ys-public-live-chat__attachment-overlay-media {
  width: 100%;
  max-height: calc(92vh - 70px);
  object-fit: contain;
  border-radius: 7px;
  background: #050506;
}

@media (max-width: 620px) {
  .ys-public-live-chat__panel {
    width: min(100vw - 16px, 520px);
    height: min(680px, calc(100vh - 16px));
  }
  .ys-public-live-chat__attachment-card {
    grid-template-columns: 64px minmax(0,1fr);
  }
  .ys-public-live-chat__attachment-preview {
    width: 64px;
    height: 52px;
  }
}

/* YASHARIEL_PLAYER_LIVE_CHAT_FINAL_POLISH_V2 */
.ys-public-live-chat__attachment-preview img,
.ys-public-live-chat__attachment-preview video,
.ys-public-live-chat__attachment-canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* YASHARIEL_BIG_UI_CONSISTENCY_V1_PUBLIC_LIVE_CHAT */
.ys-public-live-chat__panel {
  height: min(700px, calc(100dvh - 36px));
  min-height: min(540px, calc(100dvh - 36px));
  display: grid !important;
  grid-template-rows:
    auto
    auto
    auto
    minmax(0, 1fr)
    auto !important;
  overflow: hidden;
}

.ys-public-live-chat__messages {
  min-height: 0 !important;
  height: 100%;
  overflow-y: auto;
  align-content: start !important;
  overscroll-behavior: contain;
}

.ys-public-live-chat__composer {
  align-self: end;
  width: 100%;
  margin-top: 0 !important;
  position: relative;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgba(13,13,13,.98),
      rgba(7,8,9,.995)
    );
}

.ys-public-live-chat__composer-inner {
  width: 100%;
  box-sizing: border-box;
}

body[data-ys-live-chat-standalone="1"] .ys-public-live-chat__panel {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  border-radius: 0;
}

@media (max-height: 620px) {
  .ys-public-live-chat__panel {
    height: calc(100dvh - 16px);
    min-height: 0;
  }

  .ys-public-live-chat__composer textarea {
    min-height: 72px;
  }
}

/* YASHARIEL_PUBLIC_CHAT_SCROLL_SAFETY_V1 */
.ys-public-live-chat__messages {
  box-sizing: border-box;
  padding-bottom: 16px !important;
  scroll-padding-bottom: 16px;
}

.ys-public-live-chat__composer {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto;
}

/* YASHARIEL_PUBLIC_CHAT_FINAL_FOLLOW_BOTTOM_V1 */
.ys-public-live-chat__messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-bottom: 22px !important;
  scroll-padding-bottom: 22px;
}

.ys-public-live-chat__composer {
  position: relative !important;
  inset: auto !important;
  z-index: 3;
  flex: 0 0 auto;
}

/* YASHARIEL_PUBLIC_CHAT_GRID_BOUNDARY_FIX_V1 */
.ys-public-live-chat__messages {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  align-self: stretch !important;
  overflow-y: auto !important;
}

.ys-public-live-chat__composer {
  align-self: stretch !important;
  margin: 0 !important;
}

/* YASHARIEL_PUBLIC_CHAT_FLEX_SHELL_V1 */
.ys-public-live-chat__panel {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ys-public-live-chat__header,
.ys-public-live-chat__ticketline,
.ys-public-live-chat__inactivity,
.ys-public-live-chat__composer {
  flex: 0 0 auto !important;
}

.ys-public-live-chat__messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  align-content: start !important;
  box-sizing: border-box;
}

.ys-public-live-chat__composer {
  width: 100% !important;
  margin-top: auto !important;
  position: relative !important;
  inset: auto !important;
  z-index: 4;
}

body[data-ys-live-chat-standalone="1"] .ys-public-live-chat__panel {
  display: flex !important;
  flex-direction: column !important;
}