:root{
  --bg:#0b0b0f;
  --panel:#12121a;
  --panel2:#0f0f16;
  --line:#242433;
  --text:#e8e8f0;
  --muted:#a2a2b3;
  --red:#d11b2b;
  --red2:#ff2b3d;
}

html,body{background:var(--bg); color:var(--text);}

/* 채팅 영역(메시지 스크롤) */
#chat-root{
  background:var(--panel2);
  color:var(--text);
  height:100%;
  overflow:auto;
  padding:10px 10px 0 10px;
}

/* 시스템 메시지 */
.chat-system{
  color:var(--muted);
  font-size:12px;
  padding:6px 8px;
  margin:6px 0;
  border-left:3px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:10px;
}

/* 일반 메시지 */
.chat-msg{
  padding:8px 10px;
  margin:6px 0;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  line-height:1.35;
}

/* 이미지 */
.chat-msg img{
  max-width: 320px; /* PC 기준 */
  border-radius:12px;
  display:block;
  margin-top:6px;
}

/* 방장 도구 */
.sc-hosttools{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  margin:0 0 10px 0;
}

/* ✅ 채팅창 위의 방장 도구 숨김 (부모 패널에만 표시) */
#chat-root .sc-hosttools,
#chat-root #host-tools {
  display: none !important;
}
.sc-hosttools-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.sc-userlist{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sc-userrow{
  display:flex;
  gap:8px;
  align-items:center;
}

/* 입력 바 (하단 sticky) */
.sc-inputbar{
  position:sticky;
  bottom:0;
  display:flex;
  gap:8px;
  padding:10px;
  background:linear-gradient(180deg, rgba(18,18,26,.2) 0%, rgba(18,18,26,.92) 35%, rgba(18,18,26,1) 100%);
  border-top:1px solid var(--line);
  backdrop-filter: blur(8px);
  z-index: 10;
}

/* 모바일에서 하단 메뉴 공간 확보 */
@media (max-width: 900px) {
  .sc-inputbar {
    padding-bottom: 50px !important; /* JavaScript로 동적 조정됨 */
  }
}

/* 공통 입력 */
.sc-input{
  flex:1;
  background:#0c0c12;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
.sc-input::placeholder{color:#77778a;}
.sc-input:focus{border-color:rgba(255,43,61,.55); box-shadow:0 0 0 3px rgba(255,43,61,.12);}

/* 공통 버튼 */
.sc-btn{
  border-radius:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-weight:600;
}
.sc-btn:hover{border-color:rgba(255,255,255,.22);}

.sc-btn-red{
  background:var(--red);
  border-color:transparent;
}
.sc-btn-red:hover{background:var(--red2);}

.sc-btn-ghost{
  background:transparent;
}

.sc-btn-row{
  flex:1;
  text-align:left;
}


.live-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  background: linear-gradient(180deg, #0f0f12, #09090b);
  border-bottom: 1px solid #1f1f23;
}

.live-header-left span {
  margin-right: 12px;
  font-size: 14px;
  color: #ddd;
}

/* 방장 아이콘 및 텍스트 */
.host-name {
  display: flex;
  align-items: center;
  gap: 4px;
}

.host-icon {
  display: none; /* PC에서는 숨김 */
  font-size: 16px;
}

.host-text {
  display: inline; /* PC에서는 표시 */
}

/* 접속자 아이콘 및 텍스트 */
.viewer-count {
  color: #ff4d4f;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.viewer-icon {
  display: none; /* PC에서는 숨김 */
  font-size: 16px;
}

.viewer-text {
  display: inline; /* PC에서는 표시 */
}

/* 나가기 버튼 */
.btn-exit {
  background: #1f1f23;
  border: 1px solid #333;
  color: #eee;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-exit:hover {
  background: #ff4d4f;
  border-color: #ff4d4f;
  color: #000;
}

.exit-text {
  display: inline; /* PC에서는 표시 */
}

.exit-icon {
  display: inline; /* 항상 표시 */
  font-size: 16px;
  font-weight: 600;
}

/* 모바일: 텍스트 숨기고 아이콘만 표시 */
@media (max-width: 900px) {
  .host-icon {
    display: inline-block; /* 모바일에서 표시 */
  }
  
  .host-text {
    display: none; /* 모바일에서 숨김 */
  }
  
  .viewer-icon {
    display: inline-block; /* 모바일에서 표시 */
  }
  
  .viewer-text {
    display: none; /* 모바일에서 숨김 */
  }
  
  .exit-text {
    display: none; /* 모바일에서 숨김 */
  }
  
  .btn-exit {
    padding: 6px 10px; /* 아이콘만이므로 패딩 축소 */
    min-width: 36px;
    justify-content: center;
  }
  
  .exit-icon {
    font-size: 18px;
  }
}


/* PC에서도 방 제목 길면 ... 처리 */
.live-header-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.room-title{
  display:block;
  max-width:520px;   /* PC에서 제목이 차지할 최대 폭 (원하면 숫자 조절) */
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
}

/* 상단 타이틀. 모바일: 폭 제한 후 말줄임 */
@media (max-width: 768px){
  .room-title{
    max-width: 120px;
    font-size: 12px;
  }
}



/* ✅ 로딩 오버레이가 레이어 전체를 덮게 */
#chatLayer{ position: relative; }

.chat-loading{
  position: absolute;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
}

.chat-loading-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background: rgba(10,10,14,.92);
}

.chat-spinner{
  width:28px;
  height:28px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,0,60,.9);
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }



/* ===============================
   Chat Input Buttons: PC=TEXT, Mobile=ICON (force)
=============================== */

/* ===============================
   Buttons: PC(TEXT), Mobile(ICON) - iframe safe
=============================== */

/* 기본(PC): 텍스트만 */
#chat-send .btn-text,
#btnImage  .btn-text { display: inline !important; }

#chat-send .btn-icon,
#btnImage  .btn-icon { display: none !important; }

/* 모바일(터치): 아이콘만 */
@media (pointer: coarse) {
  #chat-send .btn-text,
  #btnImage  .btn-text { display: none !important; }

  #chat-send .btn-icon,
  #btnImage  .btn-icon { display: inline-block !important; font-size: 20px; line-height: 1; }

  /* 모바일에서 버튼 폭 아이콘용으로 */
  #chat-send, #btnImage {
    width: 48px;
    padding: 0 !important;
    justify-content: center;
  }
}



#chat-send.sc-btn-send{
  width: 46px;
  min-width: 46px;
  height: 42px;
  border-radius: 10px;              /* ✅ sc-btn 기본과 통일 */
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, var(--red2), var(--red));
  box-shadow: 0 8px 18px rgba(255,43,61,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#chat-send.sc-btn-send:hover{
  filter: brightness(1.05);
}

#chat-send.sc-btn-send:active{
  transform: translateY(1px);
}

#chat-send.sc-btn-send .icon-send{
  width: 20px;
  height: 20px;
  fill: #fff;
}


#btnImage .icon-image {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
}



/* =========================================
   Global Scrollbar Theme (Dark UI)
========================================= */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #9a9a9a transparent;
}

/* WebKit */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(180, 180, 180, 0.75);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(220, 220, 220, 0.95);
}

/* ✅ 글자 크기 조절 버튼 및 메뉴 */
.sc-font-size-control {
  position: relative;
}

.sc-btn-fontsize {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.font-size-icon {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.sc-font-size-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  min-width: 100px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 100;
}

.font-size-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
}

.font-size-option:hover {
  background: rgba(255,255,255,.08);
}

/* ✅ 글자 크기 적용 */
#chat-root.font-small .chat-msg {
  font-size: 12px;
}

#chat-root.font-medium .chat-msg {
  font-size: 14px;
}

#chat-root.font-large .chat-msg {
  font-size: 16px;
}

#chat-root.font-small .chat-system {
  font-size: 11px;
}

#chat-root.font-medium .chat-system {
  font-size: 12px;
}

#chat-root.font-large .chat-system {
  font-size: 14px;
}