@font-face {
  font-family: Vazir;
  src: url(/hw-assets/fonts/Vazir.ttf);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Vazir;
}
html{
  font-size: 14px;
}
body {
  /* Rich layered gradient background */
  background-color: #0f1523;
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(255,193,7,0.16), rgba(255,193,7,0) 60%),
    radial-gradient(900px 500px at -10% 85%, rgba(0,210,255,0.14), rgba(0,210,255,0) 60%),
    radial-gradient(600px 600px at 50% 120%, rgba(138,43,226,0.10), rgba(138,43,226,0) 60%),
    linear-gradient(135deg, #0d1422 0%, #0e1626 40%, #0f1b2e 100%);
  background-repeat: no-repeat;
  /* Keep glows pinned on desktop */
  background-attachment: fixed, fixed, fixed, fixed;
  transition: background 400ms ease;
  min-height: 100vh;
}
.up-container,
.up-container2 {
  width: 80%;
  height: 80vh;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 768px){
  .up-container, .up-container2{ width: 94%; height: auto; }
}
header {
  width: 100%;
  height: auto;
  min-height: 56px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #e0e0e0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
header nav {
  width: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
header nav a {
  display: inline-block;
  width: auto;
  text-decoration: none;
  color: #c8c4c4;
  transition: color 0.2s ease;
  padding: 8px 12px;
  border-radius: 6px;
}
header nav a:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
}
.prof,
.upgrade {
  width: 150px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  background: rgb(40 50 64);
  padding: 0.2rem;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.prof:hover, .upgrade:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.prof img {
  margin-right: 0.6rem;
  width: 25px !important;
  height: 25px !important;
  border-radius: 50%;
}
.prof {
  background: rgb(40 50 64);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
}
.upgrade {
  border-radius: 10px;
  background-color: #e5eb25;
  color: #ffffff;
  font-size: 0.9rem;
}
/* Mobile header tidy */
@media (max-width: 640px){
  #logo img{ width: 120px !important; height: auto; }
  .prof{ padding: 6px; width: auto; min-width: 40px; height: 36px; border-radius: 9999px; }
  .prof span{ display: none; }
  header nav a{ padding: 6px 8px; }
}
.up-container2 {
  background: #e6e6e6;
}
.fixed {
  width: 19%;
  margin-left: 1rem;
  height: auto;
  padding: 10px;
  list-style-type: none;
}
.fixed ul {
  list-style-type: none;
}
li {
  cursor: pointer;
}
.org-li,
li {
  width: 100%;
  padding: 8px;
  background: rgb(25 32 42);
  color: #e1dede;
  border-radius: 10px;
  height: 6vh;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
ul li {
  margin-top: 5px;
  display: flex;
  align-items: center;
}
ul li a,
#dropdown-room a {
  text-decoration: none;
  color: #c8c4c4;
  display: flex;
  align-items: center;
  width: 100%;
  height: 6vh;
  transition: color 0.2s ease;
}
ul li img {
  margin-left: 10px;
}
ul li:hover {
  background-color: rgb(54, 76, 106);
  transform: translateX(-3px);
}

/* Off-canvas user menu (2025 refresh) */
#menu-hide{
  position: fixed;
  top: 72px;
  right: 12px;
  width: min(280px, 86vw);
  padding: 10px;
  background: rgba(30,40,54,.96);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  z-index: 40;
}
#menu-hide .org-li{
  background: transparent;
  height: auto;
  padding: 10px 12px;
  border-radius: 10px;
}
#menu-hide .org-li:hover{
  background: rgba(255,255,255,.06);
}

/* Improve spacing for icons/emojis and text in mobile menu */
#menu-hide ul{ padding: 6px; }
#menu-hide li{ margin: 6px 0; }
#menu-hide li a{
  display:flex;
  align-items:center;
  gap:10px;                 /* فاصله آیکن/ایموجی از متن */
  min-height:44px;          /* افزایش ناحیه لمس در موبایل */
  height:auto;              /* لغو height سراسری */
  padding:10px 12px;        /* پدینگ مناسب برای خوانایی */
}
#menu-hide li a i,
#menu-hide li a .fa,
#menu-hide li a .far,
#menu-hide li a .fas{
  font-size:1.05rem;
  width:1.25rem;            /* پهنای ثابت برای هم‌راستاسازی */
  text-align:center;
}

/* Panel layout: mobile -> single column, desktop -> sidebar + content */
.panel-layout{ display:block; }
@media (min-width: 768px){
  .panel-layout{ display:grid; grid-template-columns: 260px minmax(0,1fr); gap:16px; align-items:start; }
  .panel-content{ width: 100%; max-width: none; margin: 0; }
}

/* Desktop sidebar behavior */
@media (min-width: 768px){
  #menu-hide{
    position: static;  /* let grid layout place it */
    top: auto; right: auto; left: auto;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    margin-left: 0;
  }
}

/* Cards + section titles */
.card{
  background: rgba(40,50,64,.95);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 16px;
}
.section-title{
  font-weight: 700;
  color: #e8eaee;
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.muted{ color:#9aa7b3; }

/* Dashboard stat cards */
.stat-grid{ display:grid; grid-template-columns: 1fr; gap:12px; width: 100%; max-width: 100%; overflow-x: hidden; }
.stat-card{ padding:16px; border-radius: 14px; background: linear-gradient(180deg, rgba(59,130,246,.18), rgba(59,130,246,.08)); border:1px solid rgba(255,255,255,.06); color:#e8eaee; width: 100%; min-width: 0; overflow: hidden; }
.stat-card .value{ font-size: 1.8rem; font-weight: 800; }
.stat-card .label{ color:#aab4be; font-size:.9rem; }
@media (min-width:768px){ .stat-card{ grid-column: auto; } }
@media (min-width:1024px){ .stat-card{ grid-column: auto; } }

/* Compact shortcut buttons inside stat cards on mobile */
.stat-card .btn-cre{ height:auto; line-height:1.2; padding:10px 14px; border-radius:10px; }
@media (max-width:480px){ .stat-card .btn-cre{ flex:1 1 calc(50% - 8px); text-align:center; } }

/* Profile form rows */
.form-row{ display:flex; flex-direction: column; gap:8px; margin: 14px 0; }
@media (min-width:1024px){ .form-row{ flex-direction: row; align-items:center; } }
.form-row label{ min-width: 160px; color:#e0e0e0; font-weight:600; }
.form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 18px; }

/* Ticket table responsive (improve small screens) */
@media (max-width:640px){
  .tick-table thead{ display:none; }
  .tick-table, .tick-table tbody, .tick-table tr, .tick-table td{ display:block; width:100%; }
  .tick-table tr{ background: rgba(54,76,106,.55); margin:10px 0; border-radius:10px; padding:8px 6px; }
  .tick-table td{ border-bottom:none; text-align: right; position:relative; padding-right: 36%; }
  .tick-table td::before{ content: attr(data-label); position:absolute; right:10px; top:50%; transform: translateY(-50%); color:#aab4be; font-size:.85rem; }
}

/* Ticket thread reply box */
.reply-box{ position: sticky; bottom: 0; background: rgba(30,40,54,.96); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px; box-shadow: 0 -6px 24px rgba(0,0,0,.25); }

/* Screen reader only */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ==== User Plans redesign ==== */
.plans-empty{ display:grid; place-items:center; gap:10px; padding:24px; border-radius:16px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); margin: 8px 0 16px; }
.plans-empty-icon{ font-size:28px; color:#ffcf3a; opacity:.9; }
.plans-empty-text{ color:#e8eaee; }
.plans-grid{ display:grid; grid-template-columns: 1fr; gap:12px; width: 100%; max-width: 100%; overflow-x: hidden; }
@media (min-width:640px){ .plans-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1024px){ .plans-grid{ grid-template-columns: repeat(3, 1fr); } }
.plan-card{ background: rgba(40,50,64,.9); border:1px solid rgba(255,255,255,.06); border-radius:16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding:14px; display:flex; flex-direction:column; gap:10px; width: 100%; min-width: 0; overflow: hidden; }
.plan-card.is-active{ border-color: rgba(34,197,94,.35); background: rgba(40,50,64,.95); }
.plan-card.is-expired{ opacity: 0.7; border-color: rgba(239,68,68,.2); }
.plan-card-head{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:10px; }
.plan-card-icon{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background: rgba(255,255,255,.06); color:#90caf9; }
.plan-card-title{ font-weight:700; color:#e8eaee; font-size:1.05rem; }
.badge-status{ font-size:.8rem; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.1); }
.badge-active{ background: rgba(34,197,94,.12); color:#86efac; border-color: rgba(34,197,94,.35); }
.badge-expired{ background: rgba(239,68,68,.12); color:#fca5a5; border-color: rgba(239,68,68,.35); }
.plan-card-body{ display:flex; flex-direction:column; gap:8px; }
.plan-meta{ display:flex; align-items:center; gap:8px; color:#c8d2dc; }
.plan-meta i{ opacity:.85; }
.plan-meta span{ color:#9fb0c0; }
.plan-card-actions{ display:flex; justify-content:flex-end; }
.btn-danger{ padding: 8px 12px; background: rgba(228,8,8,.9); color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:600; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .2s, box-shadow .2s; }
.btn-danger:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.35); }

/* ===== Ticket thread polish (override) ===== */
.ticket-head{ background: rgba(40,50,64,.9); border:1px solid rgba(255,255,255,.06); }
.ticket-head-title{ color:#e8eaee; margin-bottom:8px; font-weight:700; }
.ticket-head-body{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; color:#e8eaee; }
.readable, .message-text{ white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; line-height: 1.8; }
.ticket-meta{ color:#b7c2cf; font-size:.85rem; display:flex; align-items:center; gap:.4rem; margin-bottom:6px; }
.ticket-meta i{ opacity:.9; }
.user-ticket{ background: linear-gradient(180deg, rgba(37,99,235,.18), rgba(37,99,235,.08)); color:#e8eaee; padding:12px 14px; border-radius:14px 14px 4px 14px; max-width:86%; border:1px solid rgba(59,130,246,.35); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.ticket-admin{ background: linear-gradient(180deg, rgba(16,185,129,.16), rgba(16,185,129,.07)); color:#e8eaee; padding:12px 14px; border-radius:14px 14px 14px 4px; max-width:86%; border:1px solid rgba(16,185,129,.35); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
#li-info,
#li-room {
  cursor: auto;
  background-color: rgba(54, 76, 106, 0.3);
}
#dropdown-info,
#dropdown-room {
  display: block;
}
.fixed {
  position: fixed;
  top: 10%;
  right: 10%;
  font-size: 1rem;
}
.fixed h2 {
  color: #b0b0b0;
  margin: 1.5rem 0;
  font-size: 1.2rem;
}
.fixed i {
  font-size: 1.1rem;
  margin-left: 1rem;
}
.active {
  background-color: rgb(54, 76, 106);
  border-right: 3px solid #2563eb;
}
.display,
.sub-display,
.tick-display {
  width: 100%;
  max-width: 1100px;
  margin: 20px auto;
  background-color: rgba(40, 50, 64, 0.95);
  border-radius: 16px;
  position: relative;
  color: #c8c4c4;
  padding: 1.5rem;
  font-size: 0.95rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
}
.display .form-horizontal > div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.display .form-horizontal label {
  font-weight: bold;
  color: #e0e0e0;
}
.txt-inp,
.email-inp,
.password-inp {
  width: 60%;
  padding: 0.8rem;
  direction: ltr;
  color: #e0e0e0;
  font-weight: bold;
  border: 1px solid rgba(200, 196, 196, 0.2);
  outline: none;
  border-radius: 8px;
  background-color: rgba(30, 40, 54, 0.7);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.txt-inp:focus,
.email-inp:focus,
.password-inp:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.edit-btn {
  padding: 10px 16px;
  width: auto;
  min-width: 100px;
  cursor: pointer;
  background-color: rgb(58 71 89);
  color: #e0e0e0;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.edit-btn:hover {
  background-color: rgb(42, 51, 62);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.edit-btn:active {
  transform: translateY(1px);
}
.sub-display {
  height: 400px;
  padding: 0;
  display: flex;
}
.box {
  min-width: 30%;
  border-radius: 10px;
  background: rgba(50, 68, 96, 0.8);
  margin: 0.7rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-size: 0.9rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.box div {
  margin: 0.3rem 0;
}
.box-not-sub {
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: rgb(54, 76, 106);
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.p-box-not-sub {
  font-size: large;
  display: flex;
  align-items: baseline;
}
.box-not-sub a:visited,
.box-not-sub a:active,
.box-not-sub a:link {
  color: #2563eb;
  transition: color 0.2s ease;
}
.box-not-sub a:hover {
  color: #3b7bff;
  text-decoration: underline;
}
.div1 {
  display: flex;
  align-items: center;
  padding: 1rem;
}
.div1 div {
  display: flex;
  margin-right: 1rem;
}
.div1 i {
  font-size: 1.2rem;
}
#del-btn {
  width: 30%;
  padding: 8px 12px;
  cursor: pointer;
  background: rgba(179, 26, 26, 0.8);
  border: none;
  border-radius: 6px;
  color: #ffffff;
  margin: 0.5rem 0;
  transition: all 0.2s ease;
  font-weight: bold;
}
#del-btn:hover {
  background-color: rgba(228, 8, 8, 0.9);
  transform: scale(1.05);
}
.topic {
  font-weight: bold;
  color: #e0e0e0;
}

.tick-form div {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}
.tick-form label {
  margin-bottom: 0.5rem;
  color: #e0e0e0;
}
.tick-form input,
select,
textarea {
  background-color: #e5e5e5;
  border-radius: 8px;
  border: none;
  outline: none;
  padding: 0.6rem 1rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tick-form input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}
select,
#ticket-topic-inp {
  padding: 0.6rem 1rem;
  cursor: pointer;
  color: #4a4a4a;
}
#ticket-topic-inp {
  color: #4b4b4b;
  cursor: auto;
  font-size: 0.9rem;
}
#send-ticket-btn,
#see-ticket-btn,
#create-ticket-btn {
  width: auto;
  min-width: 100px;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-weight: bold;
  margin-right: 0.8rem;
  margin-bottom: 1rem;
  color: #ffffff;
  background-color: #2563eb;
  border: none;
  outline: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#see-ticket-btn {
  background-color: #000e28;
}
#send-ticket-btn:hover,
#create-ticket-btn:hover {
  background: #1a53e2;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#see-ticket-btn:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#send-ticket-btn:active,
#create-ticket-btn:active,
#see-ticket-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#see-ticket-btn a,
#create-ticket-btn a,
#see-text a {
  text-decoration: none;
  color: #ffffff;
}
#create-ticket-btn {
  margin-top: 1rem;
}
.tick-table {
  font-family: Vazir, Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-top: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.tick-table td,
.tick-table th {
  text-align: center;
  padding: 0.8rem;
}

.tick-table td {
  color: #fff;
  background-color: rgb(54, 76, 106);
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tick-table tr:last-child td {
  border-bottom: none;
}
.tick-table th {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  text-align: center;
  background-color: rgb(25 32 42);
  color: white;
  font-size: 0.95rem;
}
#see-text,
#close-tick {
  width: auto;
  min-width: 50px;
  border: none;
  outline: none;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  color: #ffffff;
  background: rgba(8, 156, 8, 0.9);
  font-size: 0.8rem;
  transition: all 0.2s ease;
}
#close-tick {
  background-color: rgba(228, 8, 8, 0.9);
}
#close-tick:hover,
#see-text:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.lobby-main {
  margin-top: 1.5rem;
  color: #e0e0e0;
  width: 100%;
}
.create-lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
}
.inp-lobby {
  margin-top: 1rem;
  display: none;
  align-items: center;
}
#text-code {
  height: 40px;
  width: 60%;
  padding: 0 15px;
  direction: ltr;
  border: none;
  outline: none;
  border-radius: 8px 0 0 8px;
  letter-spacing: 1.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#go-lobby {
  background: rgb(240, 195, 30);
  color: #000000;
  padding: 7px;
  border: none;
  outline: none;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#go-lobby:hover {
  background: rgb(255, 215, 50);
}
#go-lobby a {
  text-decoration: none;
}
.create-lobby button, .btn-cre, .op-btn, .op-res {
  margin-top: 1.5rem;
  width: 250px;
  height: 50px;
  background-color: #fdbd00;
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.create-lobby button:hover, .btn-cre:hover, .op-btn:hover, .op-res:hover {
  background: #ffc822;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.create-lobby button:active, .btn-cre:active, .op-btn:active, .op-res:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.a-lobby{
  width: 100%;
  background: rgb(42, 51, 62);
  color: #e0e0e0;
  margin-top: 2rem;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#code-btn {
  height: 50px;
  font-weight: bold;
  cursor: pointer;
  color: #000000;
}
.create-lobby button a {
  display: inline-block;
  text-decoration: none;
  color: #000000;
  font-size: 0.9rem;
  font-weight: bold;
  width: 100%;
  height: 100%;
  line-height: 50px;
}
.div-del {
  display: flex;
  align-items: center;
}
.div-del p {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: bold;
  color: #e0e0e0;
}
.div-del p i {
  margin-right: 10px;
  color: #fdbd00;
}
/* FOOTER */
#home-footer {
  font-size: 0.9rem;
  margin-top: 11rem;
  width: 100%;
  color: #c8c4c4;
  position: fixed;
  bottom: 0;
  background-color: rgba(25, 32, 42, 0.9);
  backdrop-filter: blur(5px);
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
#home-footer div {
  list-style-type: none;
  width: 80%;
  margin: 0 auto;
  padding-bottom: 7px;
  display: flex;
  gap: 15px;
}
#home-footer div li {
  margin-bottom: 7px;
  height: 20px;
  background: transparent;
  color: #b0b0b0;
  transition: color 0.2s ease;
}
#home-footer div li:hover {
  color: #ffffff;
  transform: none;
  background: transparent;
}
/* ===== LOBBY MAIN LAYOUT (FIXED) ===== */
.lobby-body {
  min-height: 100vh;
  background: linear-gradient(135deg, #0b1220 0%, #11161d 50%, #1a1f2e 100%);
  padding: 0;
  position: relative;
  overflow-x: hidden;
}

.div-lobby {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 0;
}

@media (min-width: 768px) {
  .div-lobby {
    grid-template-columns: auto 1fr auto;
    gap: 0;
  }
}

/* ===== RIGHT SIDEBAR - NARROW DESIGN ===== */
.option-lobby {
  position: fixed;
  right: 8px;
  top: 8px;
  bottom: 8px;
  width: 70px;
  background: rgba(25, 32, 42, 0.92);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  z-index: 50;
  display: none;
  flex-direction: column;
  padding: 10px 0;
  overflow: visible;
}

@media (min-width: 768px) {
  .option-lobby {
    display: flex;
  }
}
/* ===== SIDEBAR ITEMS - COMPACT ===== */
.option-lobby > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  overflow: visible;
}

.option-lobby > div > div,
.option-lobby > div > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  color: #c8d2dc;
  text-decoration: none;
  font-size: 0.65rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  border-radius: 10px;
  width: 56px;
  min-height: 52px;
  max-height: 60px;
}

.option-lobby > div > div:hover,
.option-lobby > div > a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateX(-3px);
}

.option-lobby i {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.option-lobby i:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

.option-lobby p {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.2;
  color: inherit;
}

/* کارت میکروفون - بدون کشیدگی */
.option-lobby > div > div[style*="background-color"] {
  background: rgba(40, 50, 64, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 4px;
  border-radius: 12px;
  width: 56px;
  min-height: auto;
  max-height: none;
}

/* حالات میکروفون */
.option-lobby .fa-microphone[style*="255, 0, 0"],
.option-lobby .fa-microphone-slash {
  background: rgba(239, 68, 68, 0.2);
  color: #ff6b6b;
}

.option-lobby .fa-microphone:not([style*="255, 0, 0"]) {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

/* آیتم آخر به پایین چسبیده */
.option-lobby > div > div:last-child,
.option-lobby > div > a:last-child {
  margin-top: auto;
}
/* ===== VIDEO PLAYER - CENTERED LARGE ===== */
.videoPlayer {
  width: 100%;
  max-width: 100%;
  padding: 12px;
  margin: 0;
  position: relative;
}

@media (min-width: 768px) {
  .videoPlayer {
    margin-left: 296px;
    margin-right: 86px;
    width: calc(100% - 382px);
  }
}

@media (min-width: 1024px) {
  .videoPlayer {
    margin-left: 296px;
    margin-right: 86px;
    width: calc(100% - 382px);
  }
}
.videoPlayer header-loby {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  margin-top: -10px;
}
.search-movie {
  display: flex;
  width: 100%;
  align-items: center;
}
.videoPlayer header-loby div a {
  display: inline-block;
  text-align: center;
  width: 140px;
  height: 40px;
  text-decoration: none;
  line-height: 40px;
  color: #ffffff;
  border-radius: 8px;
  background-color: #2563eb;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.videoPlayer header-loby div a:hover {
  background-color: #1d57d8;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.search-movie,
.send-message {
  display: flex;
}
.search-movie button,
.send-message button {
  padding: 7px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  cursor: pointer;
  height: 42px;
  border: none;
  border-radius: 0 8px 8px 0;
  color: #ffffff;
  background-color: rgb(25 32 42);
  transition: background-color 0.2s ease;
}
.search-movie button:hover,
.send-message button:hover {
  background-color: #2563eb;
}
.in-se,
.send-message input {
  margin: 0;
  border-radius: 8px 0 0 8px;
  width: 250px;
  height: 42px;
  padding: 0 15px;
  background: rgb(42, 51, 62);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  border-right: none;
  transition: border-color 0.2s ease;
}
.in-se:focus,
.send-message input:focus {
  border-color: #2563eb;
}
.in-se {
  width: 500px;
}
.show-code {
  display: flex;
  align-items: baseline;
  margin-right: 20%;
}
.show-code p {
  margin: 0 10px;
  color: #e0e0e0;
}
.arshiv-div {
  width: 90%;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgb(42, 51, 62);
  color: #e0e0e0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.arshiv-div a {
  text-decoration: none;
  background-color: rgb(15, 19, 24);
  padding: 8px 12px;
  border-radius: 6px;
  outline: none;
  border: none;
  color: #e0e0e0;
  transition: all 0.2s ease;
}
.arshiv-div a:hover {
  background-color: #000918;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.div-cam {
  background-color: rgb(40, 50, 64);
  padding: 15px;
  margin-top: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.ar-div {
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}
/* ===== CHAT FIXED - NARROW DESIGN ===== */
.chat-fixed {
  position: fixed;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 280px;
  background: rgba(25, 32, 42, 0.92);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  z-index: 40;
  display: none;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

@media (min-width: 768px) {
  .chat-fixed {
    display: flex;
  }
}

.chat-fixed h4 {
  padding: 12px 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #e8eaee;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
}

.chat-fixed h4 i {
  font-size: 14px;
  opacity: 0.8;
}
/* ===== CHAT FRAME & MESSAGES ===== */
.frame {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.show-frame {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.show-frame::-webkit-scrollbar {
  width: 6px;
}

.show-frame::-webkit-scrollbar-track {
  background: transparent;
}

.show-frame::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

/* ===== CHAT BUBBLES (COMPACT) ===== */
.show-message-me,
.show-message-person {
  padding: 8px 10px;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #e0e0e0;
  border-radius: 10px;
  background: rgb(58 71 89);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  max-width: 90%;
  align-self: flex-end;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-line;
  width: auto;
  display: block;
  text-align: right;
  direction: rtl;
}
.show-message-person {
  background-color: rgb(26, 30, 35);
  align-self: flex-start;
  text-align: right;
}
.show-message-me {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.15));
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #e8eaee;
  border-radius: 14px 14px 4px 14px;
}

.show-message-person {
  align-self: flex-start;
  background: rgba(40, 50, 64, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8eaee;
  border-radius: 14px 14px 14px 4px;
}

.show-message-system {
  align-self: center;
  background: rgba(255, 152, 0, 0.15);
  border: 1px solid rgba(255, 152, 0, 0.3);
  color: #ffb74d;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align: center;
  max-width: 90%;
}

.message-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #90caf9;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.message-name i {
  font-size: 12px;
  opacity: 0.8;
}

.message-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ===== SEND MESSAGE (COMPACT) ===== */
.send-message {
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 6px;
  align-items: center;
}

.send-message select {
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #e8eaee;
  font-size: 0.8rem;
  cursor: pointer;
}

.send-message input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #e8eaee;
  outline: none;
  font-size: 0.85rem;
}

.send-message input:focus {
  border-color: rgba(255, 193, 7, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

.send-message button {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(90deg, #FFC107, #ffbd2f);
  color: #111;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-message button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}
.show-users {
  position: fixed;
  left: 0;
  top: 0;
  width: 20%;
  height: 100vh;
  background: rgba(17, 22, 29, 0.95);
  padding: 20px;
  padding-top: 20px;
  color: #e0e0e0;
  display: block;
  overflow-y: scroll;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  z-index: 10;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
}
.show-users::-webkit-scrollbar {
  width: 6px;
}
.show-users::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.show-users::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}
.show-users h3 {
  color: #fdbd00;
  margin-bottom: 20px;
  margin-left: 5px;
  font-size: 1.2rem;
}
.show-medias {
  position: fixed;
  left: 0;
  top: 0;
  width: 20%;
  height: 100vh;
  background: rgba(17, 22, 29, 0.95);
  padding: 20px;
  padding-top: 20px;
  color: #e0e0e0;
  display: none;
  overflow-y: scroll;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  z-index: 10;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
}
.show-medias::-webkit-scrollbar {
  width: 6px;
}
.show-medias::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.show-medias::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}
.show-medias h3 {
  color: #fdbd00;
  margin-bottom: 20px;
  margin-left: 5px;
  font-size: 1.2rem;
}
.user-img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.user-information {
  background-color: rgb(40, 50, 64);
  margin-top: 12px;
  display: flex;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  cursor: default;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.user-information:hover {
  transform: scale(1.03);
  background-color: rgb(45, 55, 70);
}
.username-p {
  font-weight: bold;
  color: #e0e0e0;
}
.user-information i {
  font-size: 1.2rem;
  color: rgba(228, 8, 8, 0.9);
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 5px;
}
.user-information i:hover {
  transform: scale(1.2);
}
#crown {
  color: rgb(240, 195, 30);
  text-shadow: 0 0 5px rgba(240, 195, 30, 0.5);
}
#hide-users {
  position: fixed;
  left: 2%;
  top: 4%;
  color: #e0e0e0;
  z-index: 12;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.2s ease;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(40, 50, 64, 0.7);
}
#hide-users:hover {
  background-color: rgb(54, 76, 106);
  transform: scale(1.1);
}
#hide-medias {
  position: fixed;
  left: 4%;
  top: 4%;
  color: #e0e0e0;
  z-index: 12;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.2s ease;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(40, 50, 64, 0.7);
}
#hide-medias:hover {
  background-color: rgb(54, 76, 106);
  transform: scale(1.1);
}

.invite-users {
  width: 100%;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(17, 22, 29, 0.8);
  backdrop-filter: blur(5px);
  z-index: 20;
}
.invite-show {
  width: 40%;
  height: auto;
  max-height: 70%;
  background: rgb(42, 51, 62);
  border-radius: 12px;
  padding: 30px;
  color: #e0e0e0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  animation: fadeIn 0.3s ease;
  overflow-y: auto;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.linked {
  margin-top: 3rem;
  display: flex;
  align-items: center;
}
.linked span {
  width: 80%;
  border-radius: 8px 0px 0px 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: none;
  outline: none;
  margin: 0;
  font-weight: bold;
  color: #e0e0e0;
  background-color: rgba(30, 40, 54, 0.7);
}
.linked button {
  width: 15%;
  border-radius: 0 8px 8px 0;
  padding: 12px;
  border: none;
  outline: none;
  margin: 0;
  font-weight: bold;
  color: #ffffff;
  background: rgb(54, 76, 106);
  cursor: pointer;
  transition: all 0.2s ease;
}
.linked button:hover,
.close:hover {
  background: rgb(26, 30, 35);
}
.abs {
  margin-top: 3rem;
  width: 100%;
  padding: 15px;
  background-color: rgb(54, 76, 106);
  border-radius: 8px;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.abs i {
  font-size: 2rem;
  margin-left: 15px;
  color: #fdbd00;
}
.abs p {
  font-size: 0.95rem;
  line-height: 1.5;
}
.close {
  margin-top: 2rem;
  width: auto;
  min-width: 100px;
  padding: 12px 20px;
  background-color: rgb(54, 76, 106);
  color: #ffffff;
  border: none;
  outline: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.close:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.close:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.prom,
.show-help {
  width: 30%;
  height: 100vh;
  background: rgb(42, 51, 62);
  position: fixed;
  right: 6%;
  top: 0;
  padding: 1.5rem;
  color: #e0e0e0;
  display: none;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 15;
  overflow-y: auto;
}
.prom h4 {
  margin-top: 2rem;
  font-size: 1.1rem;
  color: #fdbd00;
}
.prom-cel {
  display: flex;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin: 10px 0;
  border-radius: 8px;
  transition: all 0.2s ease;
  background-color: rgba(54, 76, 106, 0.3);
}
.prom-cel:hover {
  background-color: rgb(54, 76, 106);
  transform: translateX(-5px);
}
.prom-cel div {
  display: flex;
  align-items: center;
}
.prom-cel div i {
  margin-left: 10px;
  color: #1ed721;
  font-size: 1.1rem;
}

/* اصلاح منوی همبرگری - موقعیت جدید */
#open-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(54, 76, 106, 0.7);
  color: #ffffff;
  font-size: 1.2rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin-right: 10px;
  position: relative;
  z-index: 10;
}

#open-nav:hover {
  background-color: rgb(54, 76, 106);
}

#close-prom,
#close-help,
#close-prof,
#close-setting {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: rgba(54, 76, 106, 0.7);
  color: #ffffff;
  font-size: 1.2rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: none;
  z-index: 20;
}

#close-prom:hover,
#close-help:hover,
#close-prof:hover,
#close-setting:hover {
  background-color: rgb(54, 76, 106);
}

/* اصلاح دکمه اشتراک */
.eshterak-btn {
  min-width: 180px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 0 20px;
  font-size: 0.9rem;
  text-decoration: none;
  margin-left: 10px;
}

.eshterak-btn:hover {
  background-color: #1d57d8;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* قرار دادن لوگو و همبرگر کنار هم */
.header-right {
  display: flex;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  margin-right: 10px;
}

.help-btn {
  width: 100%;
}
.help-btn {
  display: none;
}
.show-help {
  display: block;
}
.li-help {
  margin-top: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: start;
  background-color: rgba(54, 76, 106, 0.3);
  border-radius: 10px;
  padding: 15px;
  transition: all 0.2s ease;
}
.li-help:hover {
  background-color: rgb(54, 76, 106);
  transform: translateX(-5px);
}
.num-help {
  font-size: 2.5rem;
  margin-right: 15px;
  color: #fdbd00;
  font-weight: bold;
  line-height: 1;
}
.head-help {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #ffffff;
}
.show-help a {
  margin-top: 25px;
  display: inline-block;
  text-decoration: none;
  color: #000000;
  width: 100%;
  padding: 12px;
  background: #fdbd00;
  text-align: center;
  border-radius: 8px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.show-help a:hover {
  background: #ffca2c;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.show-help a:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.prof-btn,
.setting-btn {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  display: none;
  background-color: rgba(17, 22, 29, 0.8);
  backdrop-filter: blur(5px);
  z-index: 20;
}
.prof-show,
.setting-show {
  width: 30%;
  height: 100vh;
  margin-right: 6%;
  background: rgb(42, 51, 62);
  color: #e0e0e0;
  padding: 1.5rem;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease;
  overflow-y: auto;
}
@keyframes slideIn {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
#change-color {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: none;
  outline: none;
  padding: 0 15px;
  margin: 10px 0;
  cursor: pointer;
}
.not-sub {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(40, 50, 64, 0.9);
  color: #e0e0e0;
  z-index: 30;
  backdrop-filter: blur(5px);
}
.not-sub-content {
  background-color: rgb(42, 51, 62);
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  animation: zoomIn 0.3s ease;
}
@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.ok-1 {
  margin-top: -10rem;
  display: flex;
  justify-content: center;
}
.ok-1 div {
  color: #e0e0e0;
  display: flex;
  align-items: center;
  margin: 0 10px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  background-color: rgba(54, 76, 106, 0.3);
}
.ok-1 div:hover {
  background-color: rgb(54, 76, 106);
  transform: translateY(-2px);
}
.ok-1 div i {
  margin-right: 8px;
  color: #fdbd00;
}

/* رسپانسیو برای موبایل و تبلت */
@media (max-width: 768px) {
  .fixed {
    width: 25%;
    right: 5%;
  }
  .display, .sub-display, .tick-display { width: 100%; }
  .txt-inp, .email-inp, .password-inp { width: 100%; }
  #home-footer div {
    width: 90%;
    flex-wrap: wrap;
  }
  .option-lobby {
    width: 10%;
  }
  .videoPlayer {
    margin-right: 12%;
  }
  .chat-fixed {
    width: 30%;
  }
  .in-se {
    width: 300px;
  }
  .prom, .show-help, .prof-show, .setting-show {
    width: 40%;
  }
  .invite-show {
    width: 60%;
  }
  .eshterak-btn {
    min-width: 120px;
    padding: 0 15px;
  }
}

@media (max-width: 576px) {
  html {
    font-size: 12px;
  }
  .fixed {
    width: 30%;
    right: 3%;
  }
  .display, .sub-display, .tick-display { width: 100%; }
  .txt-inp, .email-inp, .password-inp { width: 100%; font-size: 0.95rem; }
  .sub-display {
    flex-direction: column;
    height: auto;
    padding: 15px;
  }
  .box {
    min-width: 90%;
  }
  .tick-table {
    font-size: 0.8rem;
  }
  .tick-table td, .tick-table th {
    padding: 0.5rem;
  }
  .option-lobby {
    width: 15%;
  }
  .videoPlayer {
    margin-right: 17%;
  }
  .chat-fixed {
    width: 40%;
  }
  .in-se {
    width: 200px;
  }
  .prom, .show-help, .prof-show, .setting-show {
    width: 70%;
    margin-right: 0;
  }
  .invite-show {
    width: 85%;
  }
  .show-users, .show-medias {
    width: 40%;
  }
  
  .eshterak-btn {
    min-width: 100px;
    font-size: 0.8rem;
    padding: 0 10px;
  }

  #open-nav {
    width: 35px;
    height: 35px;
    font-size: 1.1rem;
  }
}

/* برای موبایل های خیلی کوچک */
@media (max-width: 400px) {
  .fixed {
    width: 35%;
  }
  .display, .sub-display, .tick-display { width: 100%; }
  .txt-inp, .email-inp, .password-inp { width: 100%; font-size: 0.9rem; }
  .chat-fixed {
    width: 50%;
  }
  .prom, .show-help, .prof-show, .setting-show {
    width: 85%;
  }
  .invite-show {
    width: 90%;
  }
  .show-users, .show-medias {
    width: 50%;
  }
  
  .eshterak-btn {
    min-width: 80px;
    font-size: 0.75rem;
    padding: 0 8px;
  }

  #open-nav {
    width: 30px;
    height: 30px;
    font-size: 1rem;
    margin-right: 5px;
  }
}

/* اصلاح ظرف ویدیو بدون تغییر HTML */
div[style*="width: 61%"][style*="right: 3%"] {
  position: relative !important;
  width: calc(100% - (25% + 2% + 16px)) !important; /* جمع کل منهای پهنای چت */
  margin-left: calc(25% + 2% + 16px) !important;   /* دقیق کنار چت */
  right: auto !important; /* خنثی کردن right */
  min-height: 250px !important;
}

@media (max-width: 768px) {
  div[style*="width: 61%"][style*="right: 3%"] {
    width: 100% !important;
    margin-left: 0 !important;
  }
}


/* === قالب‌دهی باکس ویدیو بدون تغییر HTML === */
div[style*="width: 61%"][style*="right: 3%"] {
  position: relative !important;
  width: calc(100% - (25% + 2% + 16px)) !important;  /* کنار چت فیکس */
  margin-left: calc(25% + 2% + 16px) !important;
  right: auto !important;
  min-height: 250px !important;

  /* قالب ظاهری */
  aspect-ratio: 16 / 9;                /* نسبت تصویر استاندارد */
  background: linear-gradient(135deg, #202833, #1a222c);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  overflow: hidden;

  /* جا برای هدر بالایی */
  padding-top: 44px; /* ارتفاع هدر */
}

/* هدر بالای باکس (عنوان + آیکون) */
div[style*="width: 61%"][style*="right: 3%"]::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;              /* right/left در RTL/LTR */
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-weight: 700;
  color: #e6e6e6;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
}

/* خود محتوای ویدیو پرِ ظرف شود */
div[style*="width: 61%"][style*="right: 3%"] #my_video {
  position: absolute;
  top: 70px;                   /* زیر هدر */
  right: 0;
  left: 0;
  bottom: 0;
}
div[style*="width: 61%"][style*="right: 3%"] #my_video video,
div[style*="width: 61%"][style*="right: 3%"] #my_video iframe,
div[style*="width: 61%"][style*="right: 3%"] #my_video * {
  width: 100%;
  height: 100%;
  display: block;
}

/* کنترل‌های پایین، روی هاور نمایش کامل */
div[style*="width: 61%"][style*="right: 3%"]:hover > div[style*="height: 55px"] {
  opacity: 1 !important;
  background-color: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(2px);
}

/* نوار پیشرفت کمی شکیل‌تر */
#bar_base_id {
  background-color: rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  height: 10px !important;
}
#bar_base_id > div {
  background-color: #fdbd00 !important; /* رنگ پیشرفت */
  height: 100% !important;
  top: 0 !important;
  border-radius: 6px !important;
}

/* حالت Hover خود باکس: لبه‌ها براق‌تر */
div[style*="width: 61%"][style*="right: 3%"]:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  border-color: rgba(255,255,255,0.12);
}

/* ریسپانسیو: وقتی چت جمع/مخفی میشه، باکس ویدیو تمام‌عرض بشه */
@media (max-width: 768px) {
  div[style*="width: 61%"][style*="right: 3%"] {
    width: 100% !important;
    margin-left: 0 !important;
    border-radius: 12px;
  }
}

/* متغیرها برای کنترل فاصله‌ها و پهناها */
:root{
  --chatW: 25%;   /* پهنای چت ثابت */
  --chatGap: 2%;  /* فاصله‌ی چت از لبه چپ */
  --rightDock: 92px; /* پهنای ستون دکمه‌های سمت راست (کم/زیاد کن اگر فرق دارد) */
  --gutter: 16px; /* فاصله‌ی امن بین باکس‌ها */
}

/* ظرف ویدیو — کنار چت و با فاصله از ستون راست */
div[style*="width: 61%"][style*="right: 3%"]{
  position: relative !important;

  /* پهنا = کل صفحه منهای چت و فاصله‌ها و ستون راست */
  width: calc(100% - (var(--chatW) + var(--chatGap) + var(--rightDock) + (2 * var(--gutter)))) !important;

  /* فاصله از چپ = چت + فاصله‌اش + گاتر */
  margin-left: calc(var(--chatW) + var(--chatGap) + var(--gutter)) !important;

  /* فاصله از راست = ستون راست + گاتر */
  margin-right: calc(var(--rightDock) + var(--gutter)) !important;

  right: auto !important; /* بی‌اثر کردن inline right */
  min-height: 250px !important;

  /* — قالب ظاهری قبلی — */
  aspect-ratio: 16/9;
  background: linear-gradient(135deg,#202833,#1a222c);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  overflow: hidden;
  padding-top: 44px; /* جا برای هدر */
}

/* هدر بالای باکس */
div[style*="width: 61%"][style*="right: 3%"]::before{
  content:"محل پخش فیلم";
  position:absolute; top:0; inset-inline:0; height:44px;
  display:flex; align-items:center; padding:0 14px;
  font-weight:700; color:#e6e6e6;
  background:rgba(0,0,0,.25);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
}

/* محتوا پرِ ظرف */
div[style*="width: 61%"][style*="right: 3%"] #my_video{
  position:absolute; top:44px; right:0; left:0; bottom:0;
}
div[style*="width: 61%"][style*="right: 3%"] #my_video video,
div[style*="width: 61%"][style*="right: 3%"] #my_video iframe,
div[style*="width: 61%"][style*="right: 3%"] #my_video *{
  width:100%; height:100%; display:block;
}

/* کنترل‌ها روی هاور واضح‌تر شوند */
div[style*="width: 61%"][style*="right: 3%"]:hover > div[style*="height: 55px"]{
  opacity:1 !important;
  background-color:rgba(0,0,0,.45) !important;
  backdrop-filter:blur(2px);
}

/* ریسپانسیو: وقتی چت مخفی می‌شود، ویدیو تمام‌عرض */
@media (max-width:768px){
  div[style*="width: 61%"][style*="right: 3%"]{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* ===== Glass Sidebar 2025 — FIXED RIGHT, SCROLL, STATES ===== */
:root{
  --rightDock: 92px;                 /* عرض ستون راست */
  --glass-bg1: rgba(255,255,255,.08);
  --glass-bg2: rgba(255,255,255,.03);
  --glass-brd: rgba(255,255,255,.14);
  --glass-shadow: 0 12px 32px rgba(0,0,0,.35);
  --txt-muted: #c8c4c4;
  --txt-strong: #e8e8e8;
  --accent: #2563eb;
  --accent-warn: #fdbd00;
}

.option-lobby{
  position: fixed !important;
  right: 0 !important;               /* ← صراحتاً سمت راست */
  left: auto !important;             /* اگر قبلاً ست شده، خنثی شود */
  top: 0 !important;
  z-index: 30 !important;

  width: var(--rightDock) !important;
  height: 100vh !important;
  padding: 12px 8px 20px !important;

  background: linear-gradient(180deg, var(--glass-bg1), var(--glass-bg2)) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  border-left: 1px solid var(--glass-brd) !important;
  border-right: none !important;
  border-radius: 16px 0 0 16px !important;
  box-shadow: var(--glass-shadow) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow-y: auto !important;       /* ← دکمه‌های انتهایی از دست نرن */
  overflow-x: visible !important;
}

/* اسکرول‌بار لطیف */
.option-lobby::-webkit-scrollbar{ width: 6px; }
.option-lobby::-webkit-scrollbar-track{ background: transparent; }
.option-lobby::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 6px; }

.option-lobby > div{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 8px !important;
  min-height: 0 !important;
}

/* آیتم‌ها */
.option-lobby > div > div,
.option-lobby > div > a{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 0 !important;
  border-radius: 12px !important;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease !important;
  text-decoration: none !important;
  color: var(--txt-muted) !important;
}

/* آیکن‌های شیشه‌ای — بدون !important روی رنگ تا inline-style کار کند */
.option-lobby i{
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.15rem;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  /* color را عمداً بدون !important می‌گذاریم تا inline (مثل میکروفون) غالب شود */
  color: var(--txt-strong);
}
.option-lobby i:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 20px rgba(0,0,0,.32);
}

/* کارت دوربین/میکروفون که inline-style داشت → شیشه‌ای مرتب */
.option-lobby > div > div[style*="background-color"]{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--glass-brd) !important;
  outline: none !important;
  padding: 8px !important;
  border-radius: 14px !important;
  gap: 8px !important;
}

/* میکروفون: اگر inline-style قرمز بود (=Mute)، افکت تاکید هم بگیر */
.option-lobby .fa-microphone[style*="255, 0, 0"]{
  /* رنگ قرمز از inline می‌آد؛ فقط پس‌زمینه و حاشیه را تاکید می‌دهیم */
  background: rgba(255,77,79,.15);
  border-color: rgba(255,77,79,.35);
}
.option-lobby .fa-microphone:not([style*="255, 0, 0"]){
  /* حالت Unmute */
  color: #d7ffe1;                    /* سبز ملایم */
  background: rgba(46, 204, 113, .14);
  border-color: rgba(46, 204, 113, .28);
}

/* تاکید رنگی روی برخی آیتم‌ها */
#invited-btn{ color: var(--accent-warn); }
#open-setting{ color: var(--accent); }

/* دکمه‌های پایین: آخرین آیتم (بستن لابی) را بچسبان به انتهای ستون */
.option-lobby > div > div:last-child{ margin-top: auto !important; }

/* اندازه‌ها در عرض‌های کوچکتر */
@media (max-width: 1280px){
  :root{ --rightDock: 84px; }
  .option-lobby i{ width: 40px; height: 40px; font-size: 1.05rem; }
}
@media (max-width: 1024px){
  :root{ --rightDock: 76px; }
  .option-lobby i{ width: 38px; height: 38px; font-size: 1rem; }
}


/* ===== Glass Sidebar 2025 — Floating, No-Scroll, Tighter Spacing ===== */
:root{
  --rightDock: 88px;                /* ↓ کمی باریک‌تر از قبل برای جا شدن بدون اسکرول */
  --dockGap: 16px;                  /* فاصله از لبه راست و بالا/پایین */
  --glass-bg1: rgba(255,255,255,.10);
  --glass-bg2: rgba(255,255,255,.04);
  --glass-brd: rgba(255,255,255,.18);
  --glass-shadow: 0 16px 36px rgba(0,0,0,.35);
  --txt-muted: #c8c4c4;
  --txt-strong: #ececec;
}

.option-lobby{
  position: fixed !important;
  right: var(--dockGap) !important;         /* ← شناور؛ از لبه جدا شد */
  left: auto !important;
  top: var(--dockGap) !important;
  bottom: auto !important;                  /* ← ارتفاع اتوماتیک */
  z-index: 30 !important;

  width: var(--rightDock) !important;
  height: auto !important;                  /* ← بدون اسکرول داخلی */
  padding: 10px 8px !important;

  background: linear-gradient(180deg, var(--glass-bg1), var(--glass-bg2)) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  border: 1px solid var(--glass-brd) !important;
  border-radius: 16px !important;           /* ← گوشه‌های گرد کامل دیده می‌شن */
  box-shadow: var(--glass-shadow) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: visible !important;             /* ← هیچ اسکرولی روی خود پنل */
}

/* ستون داخلی آیکن‌ها — فاصله‌ها کمتر */
.option-lobby > div{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;                      /* ← کمتر از قبل */
  width: 100% !important;
  margin-top: 4px !important;
}

/* هر آیتم (آیکن + عنوان) */
.option-lobby > div > div,
.option-lobby > div > a{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;                      /* ← تنگ‌تر */
  padding: 4px 0 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: var(--txt-muted) !important;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

/* آیکن‌ها — کمی کوچک‌تر تا جا بشن */
.option-lobby i{
  width: 38px; height: 38px;                /* ← قبلاً 44px بود */
  display: grid; place-items: center;
  font-size: 1.05rem;
  color: var(--txt-strong);
  background: rgba(255,255,255,.10);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.25);
  cursor: pointer;
}
.option-lobby i:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
}

/* کارت دوربین/میکروفون (inline-style داشت) → یکپارچه شیشه‌ای */
.option-lobby > div > div[style*="background-color"]{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--glass-brd) !important;
  outline: none !important;
  padding: 8px !important;
  border-radius: 14px !important;
  gap: 8px !important;
}

/* وضعیت میکروفون (Mute/On) — بدون اسکرول، فقط رنگ/پس‌زمینه تغییر کند */
.option-lobby .fa-microphone[style*="255, 0, 0"]{
  /* Mute (قرمز) */
  background: rgba(255,77,79,.15);
  border-color: rgba(255,77,79,.35);
}
.option-lobby .fa-microphone:not([style*="255, 0, 0"]){
  /* On (سبز ملایم) */
  color: #d7ffe1;
  background: rgba(46,204,113,.14);
  border-color: rgba(46,204,113,.28);
}

/* آخرین آیتم (مثلاً بستن لابی) کمی از بقیه جدا شود ولی بدون اسکرول */
.option-lobby > div > div:last-child,
.option-lobby > div > a:last-child{
  margin-top: 6px !important;              /* فاصله‌ی خیلی کم به‌جای auto */
}

/* اگر ارتفاع نمایشگر کوتاه شد، باز هم اسکرول نزن؛ آیکن‌ها کوچک‌تر شوند */
@media (max-height: 780px){
  .option-lobby{ padding: 8px 6px !important; }
  .option-lobby i{ width: 34px; height: 34px; font-size: .98rem; }
  .option-lobby > div{ gap: 6px !important; }
}
@media (max-height: 660px){
  .option-lobby i{ width: 32px; height: 32px; font-size: .95rem; }
  .option-lobby > div{ gap: 5px !important; }
}

/* === Right Floating Glass Sidebar — no scroll, fits viewport === */
:root{
  --dockGap: 16px;              /* فاصله از لبه‌ها */
  --dockW: 90px;                /* عرض ستون */
  --row-gap: 8px;               /* فاصله بین آیتم‌ها */
  /* اندازه آیکن با توجه به قد صفحه: بین 28 تا 38px */
  --icon: clamp(28px, 4.2vh, 38px);
  --glass1: rgba(255,255,255,.10);
  --glass2: rgba(255,255,255,.04);
  --brd: rgba(255,255,255,.18);
  --shadow: 0 16px 36px rgba(0,0,0,.35);
  --txt: #e8e8e8;
  --txtMuted: #c8c4c4;
}

/* ظرف اصلی سایدبار */
.option-lobby{
  position: fixed !important;
  right: var(--dockGap) !important;
  top: var(--dockGap) !important;
  width: var(--dockW) !important;

  /* قدِ دقیقاً داخل ویوپورت (بدون اسکرول) */
  height: calc(100vh - (var(--dockGap) * 2)) !important;

  padding: 10px 8px !important;
  background: linear-gradient(180deg, var(--glass1), var(--glass2)) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  border: 1px solid var(--brd) !important;
  border-radius: 16px !important;          /* گوشه‌های گرد دیده میشن */
  box-shadow: var(--shadow) !important;
  z-index: 30 !important;

  display: flex !important;
  align-items: stretch !important;
  /* اسکرول قطع */
  overflow: hidden !important;
}

/* ستون داخلی: تبدیل به فلکس عمودی که خودش فضا را مدیریت کند */
.option-lobby > div{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--row-gap) !important;
  height: 100% !important;
  width: 100% !important;
}

/* ترفند: این pseudo-element فضای خالی می‌سازد تا دکمه‌ی آخر همیشه داخل کادر بماند */
.option-lobby > div::after{
  content: "";
  flex: 1 1 auto;
}

/* هر آیتم (div یا a) */
.option-lobby > div > div,
.option-lobby > div > a{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--txtMuted) !important;
  text-decoration: none !important;
}

/* آیکن‌ها: هم‌راستا و اندازه‌ی تطبیقی */
.option-lobby i{
  width: var(--icon);
  height: var(--icon);
  display: grid;
  place-items: center;
  font-size: calc(var(--icon) * 0.75);
  color: var(--txt);
  background: rgba(255,255,255,.10);
  border: 1px solid var(--brd);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.25);
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
  cursor: pointer;
}
.option-lobby i:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
}

/* کارت دوربین/میکروفون (که inline-style خاکستری دارد) → شیشه‌ای منسجم */
.option-lobby > div > div[style*="background-color"]{
  width: 100%;
  padding: 8px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--brd) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--row-gap) !important;
}

/* وضعیت میکروفون: از inline-style قرمز برای تشخیص استفاده کن */
.option-lobby .fa-microphone[style*="255, 0, 0"]{
  /* میوت */
  background: rgba(255,77,79,.15);
  border-color: rgba(255,77,79,.35);
}
.option-lobby .fa-microphone:not([style*="255, 0, 0"]){
  /* روشن */
  color: #d7ffe1;
  background: rgba(46,204,113,.14);
  border-color: rgba(46,204,113,.28);
}

/* دکمه‌ی آخر همیشه داخل باشد و کمی از آیتم قبلی فاصله بگیرد */
.option-lobby > div > div:last-child,
.option-lobby > div > a:last-child{
  margin-top: 4px !important;
}

/* اگر باز هم قد زیاد شد، خودکار فشرده‌تر شو (بدون اسکرول) */
@media (max-height: 780px){
  :root{ --icon: clamp(26px, 3.8vh, 34px); --row-gap: 6px; --dockW: 86px; }
}
@media (max-height: 660px){
  :root{ --icon: clamp(24px, 3.4vh, 32px); --row-gap: 5px; --dockW: 82px; }
}


/* === Normalize icon alignment in .option-lobby === */
/* اندازه‌ها (درصورت نیاز تغییر بده) */
:root{
  --icon: clamp(28px, 4.2vh, 38px); /* سایز چیپ آیکن */
  --iconRadius: 12px;
  --row-gap: 8px;
  --chip-bg: rgba(255,255,255,.10);
  --chip-brd: rgba(255,255,255,.18);
  --txt: #e8e8e8;
  --txt-muted: #c8c4c4;
}

/* ردیف‌ها هم‌عرض و وسط */
.option-lobby > div{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--row-gap) !important;
  width: 100% !important;
}

/* هر آیتم (چه div چه a) با عرض کامل و محتوای مرکز */
.option-lobby > div > div,
.option-lobby > div > a{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  text-decoration: none !important;
  color: var(--txt-muted) !important;
  /* پاک‌سازی حاشیه‌های قدیمی */
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* چیپ آیکن: اندازه ثابت، دقیقاً وسط، بدون هیچ مارجین اضافی */
.option-lobby i{
  width: var(--icon) !important;
  height: var(--icon) !important;
  line-height: var(--icon) !important;
  display: inline-grid !important;
  place-items: center !important;

  font-size: calc(var(--icon) * .72) !important;
  color: var(--txt) !important;

  background: var(--chip-bg) !important;
  border: 1px solid var(--chip-brd) !important;
  border-radius: var(--iconRadius) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.25) !important;

  /* پاک‌سازی هر مارجین/پدینگ قدیمی */
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Hover یکنواخت */
.option-lobby i:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.16) !important;
}

/* عنوان زیر هر آیکن تمیز و وسط */
.option-lobby > div > div p,
.option-lobby > div > a p,
.option-lobby > div > div a{
  margin: 0 !important;
  padding: 0 !important;
  font-size: .82rem !important;
  color: var(--txt-muted) !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
}

/* کارت میانی (دوربین/میکروفون) را هم یکدست کن */
.option-lobby > div > div[style*="background-color"]{
  width: 100% !important;
  padding: 8px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--chip-brd) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--row-gap) !important;
}
/* آیتم‌های داخل کارت هم مرکز و هم‌عرض */
.option-lobby > div > div[style*="background-color"] > div{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* وضعیت میکروفون: از inline-style قرمز تشخیص بده و چیپ را تاکید رنگی کن */
.option-lobby .fa-microphone[style*="255, 0, 0"]{
  background: rgba(255,77,79,.15) !important;
  border-color: rgba(255,77,79,.35) !important;
}
.option-lobby .fa-microphone:not([style*="255, 0, 0"]){
  color: #d7ffe1 !important;
  background: rgba(46,204,113,.14) !important;
  border-color: rgba(46,204,113,.28) !important;
}

/* اگر در CSS قدیمی margin-left/right روی i ست شده بود، خنثی‌اش کن */
.option-lobby i[style*="margin"]{ margin: 0 !important; }


/* === Archive box align with video player === */
.arshiv-div{
  max-width: 61% !important;      /* همون درصدی که برای ویدیوپلیر داری */
  margin: 12px auto 0 auto !important; /* وسط‌چین زیر پلیر */
  background: rgba(42, 51, 62, 0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between; /* متن سمت چپ / دکمه سمت راست */
  align-items: center;
  color: #e0e0e0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* متن توضیح داخل آرشیو */
.arshiv-div p{
  margin: 0;
  font-size: 0.9rem;
  color: #c8c4c4;
}

/* دکمه آرشیو */
.arshiv-div a{
  text-decoration: none;
  background: #2563eb;
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 0.85rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.arshiv-div a:hover{
  background: #1d57d8;
  transform: translateY(-2px);
}


/* === تغییر رنگ وضعیت میکروفون (سبز=روشن، قرمز=خاموش) === */
.option-lobby .fa-microphone[style*="255, 0, 0"]{
  /* این حالت وقتی inline-style رنگ قرمز ست میشه → یعنی Mute */
  color: #ff4d4f !important;
  background: rgba(255,77,79,.15) !important;
  border-color: rgba(255,77,79,.35) !important;
}

.option-lobby .fa-microphone:not([style*="255, 0, 0"]){
  /* هر حالت دیگه (یعنی فعال/روشن) → سبز */
  color: #2ecc71 !important;
  background: rgba(46,204,113,.14) !important;
  border-color: rgba(46,204,113,.28) !important;
}


/* === Sidebar fixes: mobile & fullscreen === */

/* موبایل و تبلت‌های کوچک: سایدبار مخفی شود (مثل قبل از تغییرات) */
@media (max-width: 768px){
  .option-lobby{
    display: none !important;
  }
}

/* وقتی UI پنهان است یا ویدیو فول‌اسکرین است: سایدبار مخفی شود */
body.ui-hidden .option-lobby,
body.is-fullscreen .option-lobby{
  display: none !important;
}

/* اگر خودِ باکس ویدیو فول‌اسکرین شد و سایدبار درون همان والد باشد */
:fullscreen .option-lobby{
  display: none !important;
}

/* اگر از WebKit قدیمی استفاده می‌شود */
:-webkit-full-screen .option-lobby{
  display: none !important;
}


/* ===== Chat bubbles - FIX + STYLE ===== */

/* ظرف پیام‌ها: ستون با فاصله ثابت */
.show-frame{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;                 /* فاصله بین پیام‌ها */
  padding-bottom: 12px;                /* ته لیست نفس داشته باشه */
}

/* پایه‌ی مشترک حباب‌ها */
.show-message-me,
.show-message-person{
  position: relative;
  display: inline-block !important;    /* اندازه به متن */
  max-width: 85% !important;           /* از عرض ظرف بیرون نزنه */
  padding: 10px 12px !important;
  margin: 4px 10px !important;

  font-size: 0.92rem;
  line-height: 1.6;

  direction: rtl;                      /* فارسی */
  text-align: right;

  /* مهم: مشکل نمایش ناقص متن */
  white-space: pre-wrap !important;    /* \n حفظ شود و طولانی‌ها بشکنند */
  overflow-wrap: anywhere !important;  /* حتی کلمات کشیده */
  word-break: break-word !important;   /* زور آخر برای رشته‌های خیلی بلند */

  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.06);
  color: #e8e8e8;
}

/* پیام من */
.show-message-me{
  align-self: flex-end !important;     /* سمت راست ظرف (در RTL) */
  background: #3a4759;                 /* آبی-خاکستری تیره */
  border-bottom-right-radius: 4px;     /* گوشه‌ی دم */
}

/* دم‌ماهی پیام من */
.show-message-me::after{
  content: "";
  position: absolute;
  right: -6px;                         /* بیرون از حباب */
  bottom: 10px;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left-color: #3a4759;          /* همان رنگ پس‌زمینه */
}

/* پیام دیگران */
.show-message-person{
  align-self: flex-start !important;   /* سمت چپ ظرف (در RTL) */
  background: #1f2630;
  border-bottom-left-radius: 4px;
  color: #e2e6ec;
}

/* دم‌ماهی پیام دیگران */
.show-message-person::after{
  content: "";
  position: absolute;
  left: -6px;
  bottom: 10px;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-right-color: #1f2630;
}

/* نام/متادیتا (اگر استفاده می‌کنی) */
.message-name{
  color: #fdbd00 !important;
  font-size: .78rem !important;
  margin-bottom: 4px !important;
  display: block !important;
  opacity: .9;
}

/* زمان پیام اختیاری: <span class="msg-time">۱۲:۴۵</span> داخل حباب */
.msg-time{
  display: inline-block;
  font-size: .75rem;
  opacity: .7;
  margin-inline-start: 8px;            /* فاصله از متن */
}

/* وقتی تصویر/فایل داخل پیام است، مطمئن شو عرض حباب نشکند */
.show-message-me img,
.show-message-person img,
.show-message-me video,
.show-message-person video{
  max-width: 100%;
  border-radius: 10px;
  display: block;
  margin-top: 6px;
}

/* === Received bubbles — clean & distinct === */

/* پایه: ساده‌تر، کمی روشن‌تر از بک‌گراند، با نوار تأکیدی کناری */
.show-message-person{
  align-self: flex-start !important;
  background: #1e2a36 !important;                 /* تیرهِ خنثی */
  color: #e6ebf1 !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 14px !important;
  border-top-left-radius: 8px !important;         /* گوشه‌ی مخصوص دریافتی */
  box-shadow: 0 2px 6px rgba(0,0,0,.22) !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-right: 12px !important;                 /* RTL */
  padding-left: 14px !important;
  /* نوار باریک تأکیدی (بدون شلوغی) */
  box-shadow:
    inset 3px 0 0 rgba(37,99,235,.45),            /* آبی باریک سمت چپ (برای RTL میشه چپ) */
    0 2px 6px rgba(0,0,0,.22) !important;
}

/* دم‌ماهی ملایم */
.show-message-person::after{
  content:"";
  position:absolute;
  left:-6px; bottom:10px;
  width:0; height:0;
  border:6px solid transparent;
  border-right-color:#1e2a36;
}

/* هدر/نام فرستنده (اگر داری: <span class="message-name">) */
.show-message-person .message-name{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin-bottom:4px !important;
  font-size:.8rem !important;
  color:#a9c7ff !important;                       /* ته‌مایه آبیِ خنک */
  font-weight:700 !important;
}

/* آیکن کوچک کنار نام (اگر i داخلش داری) */
.show-message-person .message-name i{
  font-size:.9rem !important;
  color:#7fb0ff !important;
}

/* لینک/ایمیل داخل پیام های دریافتی خواناتر شود */
.show-message-person a{
  color:#ffd34d !important;                       /* زرد لطیف */
  text-decoration:none !important;
  border-bottom:1px dotted rgba(255,211,77,.6);
}
.show-message-person a:hover{
  filter:brightness(1.08);
}

/* پیام‌های دریافتیِ پشت‌سرهم: جمع‌وجورتر و پیوسته‌تر دیده شوند */
.show-message-person + .show-message-person{
  margin-top:6px !important;
  border-top-left-radius:10px !important;
}

/* پیام من را دست نمی‌زنیم؛ فقط کمی کنتراست نسبت به دریافتی حفظ شود (اختیاری) */
.show-message-me{
  background:#3a4759 !important;
  border-bottom-right-radius:6px !important;
}

/* شکستن متن/کشیده‌ها (برای اطمینان) */
.show-message-person,
.show-message-me{
  white-space:pre-wrap !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

/* ارجحیت بیشتر با انتخابگر دقیق‌تر نسبت به button خالی */
.search-movie .btn-local-file,
button.btn-local-file {
  display: inline-flex;          /* برای وسط‌چین عمودی متن */
  align-items: center;
  justify-content: center;
  background-color: #283240;
  color: #fff;
  padding: 8px 12px;
  border: 1px solid #3b4b63;
  border-radius: 6px;
  height: 40px;                  /* هم‌قد با input */
  line-height: 1;
  white-space: nowrap;           /* نذار کلمه‌ها بشکنن */
  min-width: 140px;              /* جا برای متن فارسی */
  cursor: pointer;
  transition: background 0.2s ease;
  margin-right: 25px;   /* فاصله از سمت چپ */

}

.search-movie .btn-local-file:hover,
button.btn-local-file:hover {
  background-color: #3b4b63;
}

/* Local file button styling */
.search-movie .btn-local-file {
  background-color: #283240;
  color: #fff;
}

/* دکمه فقط روی صفحه‌های بزرگتر از 768px دیده میشه */
.btn-local-file {
  display: inline-flex;
}

@media (max-width: 768px) {
  .btn-local-file {
    display: none !important;
  }
}


/* Share button */
.search-movie .share-btn,
button.share-btn {
  display: inline-flex;          /* وسط‌چین عمودی متن */
  align-items: center;
  justify-content: center;
  background-color: #18417c;
  color: #fff;
  padding: 8px 12px;
  border: 1px solid #3b4b63;
  border-radius: 6px;            /* اگر inline داری 3px، حذفش کن تا این اعمال شه */
  height: 40px;                  /* هم‌قد با input */
  line-height: 1;
  white-space: nowrap;           /* نذار کلمات بشکنن */
  min-width: 140px;              /* جا برای متن فارسی */
  cursor: pointer;
  transition: background 0.2s ease;
  
}

.search-movie .share-btn:hover,
button.share-btn:hover {
  background-color: #3b4b63;
}

.share-input {
  background-color: #30517e;  /* هر رنگی که می‌خوای */
  color: #fff;   
  padding: 8px 12px;
  border: 1px solid #3b4b63;
  border-radius: 4px;            /* اگر inline داری 3px، حذفش کن تا این اعمال شه */
  height: 40px;                  /* هم‌قد با input */
  line-height: 1;
  white-space: nowrap;           /* نذار کلمات بشکنن */
  min-width: 140px;              /* جا برای متن فارسی */
  
  /* رنگ متن */
}

.share-input::placeholder {
  color: #bbb;               /* رنگ placeholder */
}


.music-mode #my_video video {
  height: 72px;
  background: #0f1217;
  object-fit: contain;
}

.music-mode #box_video_id { width: 90% !important; }
.music-mode #bar_base_id {
  height: 8px !important;
  border-radius: 9999px !important;
  background-color: #2a2f3a !important;
}
.music-mode #bar_base_id > div {
  height: 100% !important;
  top: 0 !important;
  background-color: #57a6ff !important;
}

/* کاور اختیاری */
.music-mode .music-cover {
  width: 140px; height: 140px;
  border-radius: 10px;
  margin: 8px auto 6px;
  background: radial-gradient(120px 120px at 30% 30%, #3b4b63, #283240);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* اختیاری: مدیاهای WebRTC را پنهان کن */
.music-mode .show-medias { display: none; }

html, body { height: 100%; }
body { margin: 0; }

.lobby-body {
  min-height: 100vh;
  /* گرادینت آبی نرم */
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(88, 140, 255, 0.25), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(0, 212, 255, 0.20), transparent 60%),
    linear-gradient(180deg, #0e1624 0%, #0b1320 60%, #0a1020 100%);
  background-attachment: fixed; /* ثابت بمونه هنگام اسکرول */
}

/* اختیاری: شیشه‌ای کردن بعضی پنل‌ها تا گرادینت از پشت دیده بشه */
.chat-fixed,
.setting-show,
.invite-show,
.show-help,
.user-information {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}

/* حالت ویدیو (گرادینت آبی نرم) */
.lobby-body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(88, 140, 255, 0.25), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(0, 212, 255, 0.20), transparent 60%),
    linear-gradient(180deg, #0e1624 0%, #0b1320 60%, #0a1020 100%);
  background-attachment: fixed;
}

/* حالت موسیقی */
.music-mode {
  min-height: 100vh;
  background:
    radial-gradient(1000px 600px at 30% 0%, rgba(255, 0, 128, 0.25), transparent 70%),
    radial-gradient(800px 500px at 70% 30%, rgba(0, 200, 255, 0.20), transparent 70%),
    linear-gradient(180deg, #1a0b2e 0%, #0d0618 60%, #0a0510 100%);
  background-attachment: fixed;
  animation: music-bg-pulse 12s infinite alternate ease-in-out;
}

/* انیمیشن نرم برای حالت موزیک */
@keyframes music-bg-pulse {
  0% {
    filter: hue-rotate(0deg) brightness(1);
  }
  100% {
    filter: hue-rotate(30deg) brightness(1.15);
  }
}

/* برای اینکه حس شیشه‌ای داشته باشه */
.music-mode .chat-fixed,
.music-mode .setting-show,
.music-mode .invite-show,
.music-mode .show-help,
.music-mode .user-information {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
}

/* ==== سوییچ نئومورفیک حالت ویدیو/موسیقی ==== */
.halat-btn{
  --bg: #e9eef6;              /* پس‌زمینهٔ سوییچ (رو حالت روشنِ نئومورفیک) */
  --shadow-dark: rgba(14, 25, 46, 0.18);
  --shadow-light: rgba(255, 255, 255, 0.92);
  --accent-video: #3b82f6;    /* آبی برای ویدیو */
  --accent-music: #22c55e;    /* سبز/فیروزه‌ای برای موزیک */

  position: relative;
  width: 86px;
  height: 44px;
  border: 0;
  background: var(--bg);
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform .15s ease;
  /* نئومورفیک */
  box-shadow:
    8px 8px 16px var(--shadow-dark),
    -8px -8px 16px var(--shadow-light),
    inset 0 0 0 0 rgba(0,0,0,0);
}

.halat-btn:active { transform: scale(.98); }

.halat-track{
  position: absolute; inset: 6px 10px; /* فاصله از لبه‌ها */
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; justify-items: center;
  pointer-events: none;
}

/* آیکون‌ها */
.halat-icon{
  font-size: 16px;
  opacity: .5;
  transition: opacity .25s ease, color .25s ease, transform .25s ease;
}

.halat-icon--video { color: var(--accent-video); }
.halat-icon--music { color: var(--accent-music); }

/* دستگیره */
.halat-knob{
  position: absolute;
  top: 6px; left: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
  box-shadow:
    4px 4px 10px rgba(0,0,0,.15),
    -3px -3px 8px rgba(255,255,255,.95);
}

/* حالت پیش‌فرض: VIDEO */
.halat-btn[data-mode="video"] .halat-icon--video{ opacity: 1; transform: scale(1.05); }
.halat-btn[data-mode="video"] .halat-icon--music{ opacity: .35; transform: scale(.95); }
.halat-btn[data-mode="video"] .halat-knob{
  transform: translateX(0);
  box-shadow:
    4px 4px 10px rgba(59,130,246,.25),
    -3px -3px 8px rgba(255,255,255,.95);
}

/* حالت MUSIC */
.halat-btn[data-mode="music"] .halat-icon--music{ opacity: 1; transform: scale(1.05); }
.halat-btn[data-mode="music"] .halat-icon--video{ opacity: .35; transform: scale(.95); }
.halat-btn[data-mode="music"] .halat-knob{
  transform: translateX(40px);
  box-shadow:
    4px 4px 10px rgba(34,197,94,.25),
    -3px -3px 8px rgba(255,255,255,.95);
}

/* نسخهٔ تیره (اگر پس‌زمینه صفحه‌ات تاریک است) */
.lobby-body,
.music-mode{
  color: #e8eaee;
}
.lobby-body .halat-btn,
.music-mode .halat-btn{
  --bg: #1b2230;
  --shadow-dark: rgba(0,0,0,.55);
  --shadow-light: rgba(255,255,255,.06);
  background: var(--bg);
  box-shadow:
    6px 6px 14px var(--shadow-dark),
    -6px -6px 14px var(--shadow-light);
}
.lobby-body .halat-knob,
.music-mode .halat-knob{
  background: #e6eefb;
}

/* === Toggle دوتایی ویدیو/موسیقی – نسخهٔ سازگار با تم تیره و Tailwind === */
.lobby-body .halat-btn{
  all: unset;                             /* ریست کامل تا چیزی تداخل نکنه */
  position: relative;
  display: inline-block;
  width: 92px;                            /* اندازهٔ کلی */
  height: 46px;
  border-radius: 999px;
  cursor: pointer;
  vertical-align: middle;
  /* پس‌زمینه و سایه‌ها (نئومورفیک تیره) */
  background: #1b2230 !important;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.55),
    -6px -6px 14px rgba(255,255,255,.06) !important;
  transition: transform .15s ease;
}
.lobby-body .halat-btn:active{ transform: scale(.98); }

.lobby-body .halat-btn .halat-track{
  position: absolute; inset: 6px 10px;    /* padding داخلی track */
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; justify-items: center;
  pointer-events: none;
}

.lobby-body .halat-btn .halat-icon{
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  opacity: .45;
  transition: opacity .25s ease, color .25s ease, transform .25s ease;
}
.lobby-body .halat-btn .halat-icon i{ font-size: 16px; }
.lobby-body .halat-btn .halat-icon .fa-fallback{ font-size: 16px; line-height: 1; display: none; }

/* رنگ‌های حالت‌ها */
.lobby-body .halat-btn .halat-icon--video{ color: #3b82f6; }  /* آبی */
.lobby-body .halat-btn .halat-icon--music{ color: #22c55e; }  /* سبز */

/* دستگیره */
.lobby-body .halat-btn .halat-knob{
  position: absolute;
  top: 7px; left: 8px;                    /* موقعیت حالت ویدیو */
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #e6eefb !important;
  box-shadow:
    4px 4px 10px rgba(0,0,0,.22),
    -3px -3px 8px rgba(255,255,255,.12) !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
}

/* حالت پیش‌فرض: VIDEO */
.lobby-body .halat-btn[data-mode="video"] .halat-icon--video{ opacity: 1; transform: scale(1.05); }
.lobby-body .halat-btn[data-mode="video"] .halat-icon--music{ opacity: .35; transform: scale(.95); }
.lobby-body .halat-btn[data-mode="video"] .halat-knob{ transform: translateX(0); }

/* حالت MUSIC */
.lobby-body .halat-btn[data-mode="music"] .halat-icon--music{ opacity: 1; transform: scale(1.05); }
.lobby-body .halat-btn[data-mode="music"] .halat-icon--video{ opacity: .35; transform: scale(.95); }
.lobby-body .halat-btn[data-mode="music"] .halat-knob{ transform: translateX(44px); } /* اگر دستگیره درست جا نشد 40-46px امتحان کن */

/* در تم روشن اگر لازم شد (اختیاری): */
/*
.lobby-body-light .halat-btn{
  background: #e9eef6 !important;
  box-shadow: 8px 8px 16px rgba(14,25,46,.18), -8px -8px 16px rgba(255,255,255,.92) !important;
}
.lobby-body-light .halat-btn .halat-knob{ background: #fff !important; }
*/
/* سوییچ دوحالته؛ knob خودش آیکون حالت فعاله */
.lobby-body .halat-btn{
  all: unset;
  position: relative;
  display: inline-block;
  width: 78px;                 /* پهنا */
  height: 40px;                /* ارتفاع */
  border-radius: 999px;
  cursor: pointer;
  vertical-align: middle;
  background: #1b2230;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.55),
    -6px -6px 14px rgba(255,255,255,.06);
  transition: transform .15s ease;
}
.lobby-body .halat-btn:active { transform: scale(.98); }

/* راهنمای نیمه‌ها (چپ=ویدیو آبی، راست=موزیک سبز) */
.lobby-body .halat-btn .halat-track{
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      rgba(59,130,246,.18) 0 50%,
      rgba(34,197,94,.18) 50% 100%);
  pointer-events: none;
}

/* گردالی (knob) + آیکون داخلش */
.lobby-body .halat-btn .halat-knob{
  position: absolute;
  top: 6px; left: 7px;         /* محل حالت ویدیو */
  width: 28px; height: 28px;   /* اندازه گردالی */
  border-radius: 50%;
  background: #e6eefb;         /* پس‌زمینه knob */
  display: grid; place-items: center;
  box-shadow:
    4px 4px 10px rgba(0,0,0,.22),
    -3px -3px 8px rgba(255,255,255,.12);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    background .28s,
    box-shadow .28s;
  overflow: hidden;
}

/* آیکون‌ها داخل knob */
.lobby-body .halat-btn .halat-knob i{ font-size: 14px; line-height: 1; }
.lobby-body .halat-btn .halat-knob .emoji-video,
.lobby-body .halat-btn .halat-knob .emoji-music{ font-size: 15px; line-height: 1; }

/* پیش‌فرض همه پنهان، بعد براساس data-mode نمایش می‌دیم */
.lobby-body .halat-btn .icon-video,
.lobby-body .halat-btn .icon-music,
.lobby-body .halat-btn .emoji-video,
.lobby-body .halat-btn .emoji-music{ display: none; }

/* حالت ویدیو: knob سمت چپ، آیکون فیلم، رنگ آبی ملایم */
.lobby-body .halat-btn[data-mode="video"] .halat-knob{
  transform: translateX(0);
  background: #e9f1ff;
  box-shadow:
    4px 4px 10px rgba(59,130,246,.28),
    -3px -3px 8px rgba(255,255,255,.12);
}
.lobby-body .halat-btn[data-mode="video"] .icon-video{ display: inline-flex; color:#3b82f6; }
.lobby-body .halat-btn[data-mode="video"] .emoji-video{ display: inline-block; }

/* حالت موزیک: knob میره راست، آیکون موزیک، رنگ سبز ملایم */
.lobby-body .halat-btn[data-mode="music"] .halat-knob{
  transform: translateX(38px); /* اگر کمی جابه‌جا بود 36–40 امتحان کن */
  background: #eafff3;
  box-shadow:
    4px 4px 10px rgba(34,197,94,.28),
    -3px -3px 8px rgba(255,255,255,.12);
}
.lobby-body .halat-btn[data-mode="music"] .icon-music{ display: inline-flex; color:#22c55e; }
.lobby-body .halat-btn[data-mode="music"] .emoji-music{ display: inline-block; }

/* فوکوس کیبورد (دسترسی‌پذیری) */
.lobby-body .halat-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.3);
  outline-offset: 3px;
}

/* === Toggle دوحالته؛ بدون ایموجی، فقط Font Awesome === */
.lobby-body .halat-btn{
  all: unset;
  position: relative;
  display: inline-block;
  width: 78px;                 /* پهنا */
  height: 40px;                /* ارتفاع */
  border-radius: 999px;
  cursor: pointer;
  vertical-align: middle;
  background: #1b2230;
  box-shadow:
    6px 6px 14px rgba(0,0,0,.55),
    -6px -6px 14px rgba(255,255,255,.06);
  transition: transform .15s ease;
}
.lobby-body .halat-btn:active { transform: scale(.98); }

/* نوار پس‌زمینهٔ دو رنگ + آیکون‌های کم‌رنگ طرفین */
.lobby-body .halat-btn .halat-track{
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      rgba(59,130,246,.18) 0 50%,
      rgba(34,197,94,.18) 50% 100%);
  pointer-events: none;
}
.lobby-body .halat-btn .track-icon{
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 14px; opacity: .28;
  color: #bcd0ff; /* برای ویدیو آبی‌گونه */
}
.lobby-body .halat-btn .track-video{ left: 10px; color:#8fb7ff; }
.lobby-body .halat-btn .track-music{ right: 10px; color:#9ff0c4; }

/* گردالی (knob) که آیکون حالت فعال داخل آن است */
.lobby-body .halat-btn .halat-knob{
  position: absolute;
  top: 6px; left: 7px;         /* محل حالت ویدیو */
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #e9f1ff;         /* حالت ویدیو: آبی ملایم */
  display: grid; place-items: center;
  box-shadow:
    4px 4px 10px rgba(59,130,246,.28),
    -3px -3px 8px rgba(255,255,255,.12);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    background .28s,
    box-shadow .28s;
  overflow: hidden;
}

/* اندازه آیکون داخل knob */
.lobby-body .halat-btn .halat-knob i{ font-size: 14px; line-height: 1; }

/* پیش‌فرض همه پنهان؛ بعد بر اساس data-mode یکی را روشن می‌کنیم */
.lobby-body .halat-btn .icon-video,
.lobby-body .halat-btn .icon-music{ display: none; }

/* حالت VIDEO */
.lobby-body .halat-btn[data-mode="video"] .icon-video{ display: inline-flex; color:#3b82f6; }
.lobby-body .halat-btn[data-mode="video"] .halat-knob{
  transform: translateX(0);
  background: #e9f1ff;
  box-shadow:
    4px 4px 10px rgba(59,130,246,.28),
    -3px -3px 8px rgba(255,255,255,.12);
}

/* حالت MUSIC */
.lobby-body .halat-btn[data-mode="music"] .icon-music{ display: inline-flex; color:#22c55e; }
.lobby-body .halat-btn[data-mode="music"] .halat-knob{
  transform: translateX(38px);           /* اگر کمی جابه‌جا بود 36–40px تنظیم کن */
  background: #eafff3;                   /* سبز ملایم */
  box-shadow:
    4px 4px 10px rgba(34,197,94,.28),
    -3px -3px 8px rgba(255,255,255,.12);
}

/* فوکوس کیبورد */
.lobby-body .halat-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.3);
  outline-offset: 3px;
}


/* === حالت موزیک: تغییر استایل فقط روی پلیر === */

/* پس‌زمینه نرم برای خود پلیر (article اول که ویدیو داخلشه) */
.music-mode .videoPlayer article:first-of-type {
  background: radial-gradient(120% 120% at 0% 0%, #21293a 0%, #151b27 100%);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* اگر می‌خوای تصویر ویدیو در موزیک‌مود دیده نشه، اینو نگه دار؛
   اگر می‌خوای دیده بشه، همین خط رو حذف کن. */
.music-mode #my_video,
.music-mode #my_video video {
  display: none !important;
}

/* بار کنترل‌ها (نوار پایینی شفاف) تیره‌تر + بلور */
.music-mode .videoPlayer article:first-of-type > div.absolute.bottom-0 {
  background-color: rgba(30, 40, 60, 0.85) !important;
  backdrop-filter: blur(8px);
}

/* استایل نوار پیشرفت */
.music-mode #bar_base_id {
  background: #2f3a4e !important;
  height: 10px !important;
  border-radius: 999px !important;
  overflow: hidden;
}
/* خود پروگرس (div داخلی) — چون inline-style داری، با !important می‌پوشونیم */
.music-mode #bar_base_id > div {
  height: 100% !important;
  top: 0 !important;
  background: #ffda4d !important;
  border-radius: 999px !important;
  transition: width .18s linear !important;
}

/* دکمه‌ها گردتر و لمسی‌تر */
.music-mode .videoPlayer .fas {
  color: #fff;
}
.music-mode .videoPlayer .fa-play,
.music-mode .videoPlayer .fa-pause,
.music-mode .videoPlayer .fa-expand,
.music-mode .videoPlayer .fa-volume-mute,
.music-mode .videoPlayer .fa-volume-up {
  padding: 6px 8px;
  border-radius: 10px;
  background: #2a3242;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.music-mode .videoPlayer .fa-play:active,
.music-mode .videoPlayer .fa-pause:active,
.music-mode .videoPlayer .fa-expand:active,
.music-mode .videoPlayer .fa-volume-mute:active,
.music-mode .videoPlayer .fa-volume-up:active {
  transform: scale(0.96);
}

/* درجه‌های صدا (اون «-» ها) وقتی فعال سفید، وقتی غیرفعال خاکستری بمونن؛
   اگر خواستی کمرنگ‌تر شن: */
.music-mode .videoPlayer .fas[style*="color: #cccccc"] {
  color: #9fb0c7 !important;
}

/* وقتی فول‌اسکرین می‌شی، ویدیو عرض/ارتفاع تمام صفحه داره؛
   در موزیک‌مود هم اگر نمایشی داشتی، زمینه مشکی می‌مونه */
.music-mode .videoPlayer video#wmyMovie {
  background-color: black;
}

/* ریسپانسیو جزئی */
@media (max-width: 480px){
  .music-mode .videoPlayer article:first-of-type {
    border-radius: 10px;
  }
}

/* ===== Music Mode EQ UI ===== */
.music-mode #my_video {
  position: relative;
  min-height: 220px;
  background: radial-gradient(120% 120% at 0% 0%, #21293a 0%, #151b27 100%);
  border-radius: 12px;
  overflow: hidden;
}

/* ویدیو در موزیک‌مود مخفی شود (اگر نمی‌خواهی، این خط را حذف کن) */
.music-mode #my_video video { display: none !important; }

/* کانتینر اکولایزر */
.music-mode #my_video .music-eq{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:16px;
}

/* متادیتا (کاور + عنوان) */
.music-mode #my_video .eq-meta{
  display:flex; align-items:center; gap:12px;
  padding:6px 10px; border-radius:10px;
  background: rgba(20,24,35,.45);
  backdrop-filter: blur(6px);
}
.music-mode #my_video .eq-cover{
  width:56px; height:56px; border-radius:10px;
  background: linear-gradient(135deg,#3b4660,#2b3448);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.music-mode #my_video .eq-text .eq-title{
  color:#e9eef5; font-size:14px; font-weight:700; line-height:1.2;
  max-width:48vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.music-mode #my_video .eq-text .eq-sub{
  color:#9fb0c7; font-size:12px; margin-top:2px;
}

/* نوارهای اکولایزر */
.music-mode #my_video .eq-bars{
  display:flex; align-items:flex-end; gap:8px;
  height:96px;
}
.music-mode #my_video .eq-bars span{
  width:8px; border-radius:999px;
  background: linear-gradient(180deg, #8ec5ff, #f9f871);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  height:18px;
  animation: eq-bounce 1.2s ease-in-out infinite;
  opacity:.95;
}
.music-mode #my_video .eq-bars span:nth-child(1){ animation-delay: .00s }
.music-mode #my_video .eq-bars span:nth-child(2){ animation-delay: .08s }
.music-mode #my_video .eq-bars span:nth-child(3){ animation-delay: .16s }
.music-mode #my_video .eq-bars span:nth-child(4){ animation-delay: .24s }
.music-mode #my_video .eq-bars span:nth-child(5){ animation-delay: .32s }
.music-mode #my_video .eq-bars span:nth-child(6){ animation-delay: .40s }
.music-mode #my_video .eq-bars span:nth-child(7){ animation-delay: .48s }
.music-mode #my_video .eq-bars span:nth-child(8){ animation-delay: .56s }
.music-mode #my_video .eq-bars span:nth-child(9){ animation-delay: .64s }
.music-mode #my_video .eq-bars span:nth-child(10){ animation-delay: .72s }
.music-mode #my_video .eq-bars span:nth-child(11){ animation-delay: .80s }
.music-mode #my_video .eq-bars span:nth-child(12){ animation-delay: .88s }

@keyframes eq-bounce{
  0%,100% { height:18px; transform:translateY(6px) }
  25% { height:72px; transform:translateY(0) }
  50% { height:40px; transform:translateY(4px) }
  75% { height:90px; transform:translateY(-2px) }
}

/* نوار کنترل‌ها در موزیک‌مود */
.music-mode .videoPlayer article:first-of-type > div.absolute.bottom-0{
  background-color: rgba(30,40,60,.85) !important;
  backdrop-filter: blur(8px);
}

/* نوار پیشرفت در موزیک‌مود */
.music-mode #bar_base_id{
  background:#2f3a4e !important;
  height:10px !important;
  border-radius:999px !important;
  overflow:hidden;
}
.music-mode #bar_base_id > div{
  height:100% !important; top:0 !important;
  background:#ffda4d !important;
  border-radius:999px !important;
  transition: width .18s linear !important;
}

/* دکمه‌ها نرم‌تر */
.music-mode .videoPlayer .fa-play,
.music-mode .videoPlayer .fa-pause,
.music-mode .videoPlayer .fa-expand,
.music-mode .videoPlayer .fa-volume-mute,
.music-mode .videoPlayer .fa-volume-up{
  padding:6px 8px; border-radius:10px; background:#2a3242;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
@media (max-width:480px){
  .music-mode #my_video .eq-meta{ transform: scale(.95); }
  .music-mode #my_video .eq-cover{ width:48px; height:48px; }
  .music-mode #my_video .eq-text .eq-title{ max-width:60vw; }
}


/* حالت پیش‌فرض: اکولایزر پنهان باشد */
#vue-div .music-eq { display: none; }

/* وقتی موزیک‌مود فعاله: ویدیو قایم، اکولایزر نمایش، ارتفاع قطعی */
#vue-div.music-mode #my_video {
  position: relative !important;
  min-height: 260px !important;
  background: radial-gradient(120% 120% at 0% 0%, #21293a 0%, #151b27 100%) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
#vue-div.music-mode #my_video video { display: none !important; }
#vue-div.music-mode .music-eq {
  display: flex !important;
  position: absolute; inset: 0;
  z-index: 1; 
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
}

/* متادیتا اکولایزر */
#vue-div.music-mode .music-eq .eq-meta{
  display:flex; align-items:center; gap:12px;
  padding:6px 10px; border-radius:10px;
  background: rgba(20,24,35,.45); backdrop-filter: blur(6px);
}
#vue-div.music-mode .music-eq .eq-cover{
  width:56px; height:56px; border-radius:10px;
  background: linear-gradient(135deg,#3b4660,#2b3448);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
#vue-div.music-mode .music-eq .eq-title{
  color:#e9eef5; font-size:14px; font-weight:700; line-height:1.2;
  max-width:48vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#vue-div.music-mode .music-eq .eq-sub{ color:#9fb0c7; font-size:12px; margin-top:2px; }

/* میله‌های اکولایزر */
#vue-div.music-mode .music-eq .eq-bars{ display:flex; align-items:flex-end; gap:8px; height:96px; }
#vue-div.music-mode .music-eq .eq-bars span{
  width:8px; border-radius:999px;
  background: linear-gradient(180deg,#8ec5ff,#f9f871);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  height:18px; animation: eq-bounce 1.2s ease-in-out infinite; opacity:.95;
}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(2){animation-delay:.08s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(3){animation-delay:.16s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(4){animation-delay:.24s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(5){animation-delay:.32s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(6){animation-delay:.40s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(7){animation-delay:.48s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(8){animation-delay:.56s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(9){animation-delay:.64s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(10){animation-delay:.72s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(11){animation-delay:.80s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(12){animation-delay:.88s}

@keyframes eq-bounce{
  0%,100%{height:18px;transform:translateY(6px)}
  25%{height:72px;transform:translateY(0)}
  50%{height:40px;transform:translateY(4px)}
  75%{height:90px;transform:translateY(-2px)}
}

/* نوار کنترل‌ها و پروگرس در موزیک‌مود هم متفاوت شوند */
#vue-div.music-mode article:first-of-type > div.absolute.bottom-0{
  background-color: rgba(30,40,60,.85) !important; backdrop-filter: blur(8px);
}
#vue-div.music-mode #bar_base_id{
  background:#2f3a4e !important; height:10px !important; border-radius:999px !important; overflow:hidden;
}
#vue-div.music-mode #bar_base_id > div{
  height:100% !important; top:0 !important; background:#ffda4d !important; border-radius:999px !important;
  transition: width .18s linear !important;
}
#vue-div.music-mode .fa-play,
#vue-div.music-mode .fa-pause,
#vue-div.music-mode .fa-expand,
#vue-div.music-mode .fa-volume-mute,
#vue-div.music-mode .fa-volume-up{
  padding:6px 8px; border-radius:10px; background:#2a3242; box-shadow:0 2px 8px rgba(0,0,0,.25);
}


/* دیباگ: اگر موزیک‌مود فعال است، یک حاشیه بنفش دور کل لایه بگذار */
#vue-div.music-mode { outline: 2px solid magenta !important; }

/* کانتینر اصلی پلیر: همانی که داخل article و بلافاصله زیر آن <div :style="boxVideoStyle()"> است */
#vue-div.music-mode .videoPlayer article:first-of-type > div[style*="min-height"] {
  background: radial-gradient(120% 120% at 0% 0%, #21293a 0%, #151b27 100%) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* خود باکس پخش */
#vue-div.music-mode #my_video {
  position: relative !important;
  min-height: 260px !important;
}

/* هر نوع تصویر ویدئویی/کانواس/iframe را در موزیک‌مود پنهان کن */
#vue-div.music-mode #my_video video,
#vue-div.music-mode #my_video canvas,
#vue-div.music-mode #my_video iframe {
  display: none !important;
}

/* اکولایزر را حتماً نشان بده و روی همه قرار بده */
#vue-div .music-eq { display: none; }
#vue-div.music-mode #my_video .music-eq {
  display: flex !important;
  position: absolute !important; inset: 0 !important;
  z-index: 3 !important;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
}

/* متادیتا */
#vue-div.music-mode .music-eq .eq-meta {
  display:flex; align-items:center; gap:12px;
  padding:6px 10px; border-radius:10px;
  background: rgba(20,24,35,.45); backdrop-filter: blur(6px);
}
#vue-div.music-mode .music-eq .eq-cover {
  width:56px; height:56px; border-radius:10px;
  background: linear-gradient(135deg,#3b4660,#2b3448);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
#vue-div.music-mode .music-eq .eq-title {
  color:#e9eef5; font-size:14px; font-weight:700; line-height:1.2;
  max-width:48vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#vue-div.music-mode .music-eq .eq-sub { color:#9fb0c7; font-size:12px; margin-top:2px; }

/* میله‌های اکولایزر */
#vue-div.music-mode .music-eq .eq-bars { display:flex; align-items:flex-end; gap:8px; height:96px; }
#vue-div.music-mode .music-eq .eq-bars span {
  width:8px; border-radius:999px;
  background: linear-gradient(180deg,#8ec5ff,#f9f871);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  height:18px; animation: eq-bounce 1.2s ease-in-out infinite; opacity:.95;
}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(2){animation-delay:.08s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(3){animation-delay:.16s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(4){animation-delay:.24s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(5){animation-delay:.32s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(6){animation-delay:.40s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(7){animation-delay:.48s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(8){animation-delay:.56s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(9){animation-delay:.64s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(10){animation-delay:.72s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(11){animation-delay:.80s}
#vue-div.music-mode .music-eq .eq-bars span:nth-child(12){animation-delay:.88s}

@keyframes eq-bounce{
  0%,100%{height:18px;transform:translateY(6px)}
  25%{height:72px;transform:translateY(0)}
  50%{height:40px;transform:translateY(4px)}
  75%{height:90px;transform:translateY(-2px)}
}

/* نوار کنترل پایین در موزیک‌مود */
#vue-div.music-mode article:first-of-type > div.absolute.bottom-0{
  background-color: rgba(30,40,60,.85) !important; backdrop-filter: blur(8px);
}
#vue-div.music-mode #bar_base_id{
  background:#2f3a4e !important; height:10px !important; border-radius:999px !important; overflow:hidden;
}
#vue-div.music-mode #bar_base_id > div{
  height:100% !important; top:0 !important; background:#ffda4d !important; border-radius:999px !important;
  transition: width .18s linear !important;
}

/* پیش‌فرض: نمایش (موبایل) */
.hamburger-btn {
  font-size: 28px !important;
  color: #333 !important;
  cursor: pointer !important;
  transition: color .3s ease !important;
}

/* وقتی عرض صفحه 768px به بالا شد (دسکتاپ) → مخفی */
@media (min-width: 768px) {
  .hamburger-btn {
    display: none !important;
  }
}


/* ظرف پیام‌ها: ستون، بدون کش دادن آیتم‌ها */
.ticket-container, .tickets, .messages{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;   /* قبلاً stretch باعث پهن‌شدن می‌شد */
}

.ticket-container {
  display: flex;
  flex-direction: column;   /* پیام‌ها زیر هم */
  width: 100%;              /* پر کنه کل عرض */
}

/* پیام کاربر: سمت راست */
.user-ticket {
  align-self: flex-end;     /* ببر سمت راست */
  background: #3a9efd;
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  max-width: 70%;
}

/* پیام ادمین: سمت چپ */
.ticket-admin {
  align-self: flex-start;   /* ببر سمت چپ */
  background: #e8e8e8;
  color: #222;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  max-width: 70%;
}

/* جلوگیری از زوم ناخواسته روی فیلدهای چت در iOS/Android (نسخه موبایل) */
@media (max-width: 768px){
  #chat-mobile input,
  #chat-mobile textarea,
  #chat-mobile select {
    font-size: 16px !important;   /* کلید حل مشکل زوم */
    line-height: 1.4 !important;
    padding: 10px 12px;           /* دلخواه؛ برای ظاهر بهتر */
  }
}

/* توصیهٔ تکمیلی برای iOS */
html { -webkit-text-size-adjust: 100%; }


/* --- Stop mobile zoom on chat inputs (iOS/Android) --- */

/* اگر جایی فونت پایه‌ی موبایل رو کوچیک کردی، این خط خنثی‌اش می‌کنه */
@media (max-width: 820px){
  html { font-size: 16px !important; } /* کلید اصلی در iOS */
}

/* مخصوص ناحیه چت موبایل: هر ورودی/تکست‌اریا/سلکت و حتی contenteditable */
@media (max-width: 820px){
  #chat-mobile input,
  #chat-mobile textarea,
  #chat-mobile select,
  #chat-mobile [contenteditable="true"],
  #chat-mobile .send-message input,
  #chat-mobile .send-message textarea {
    font-size: 16px !important;   /* شرط ضد زوم در iOS */
    line-height: 1.4 !important;
  }
}

/* پوشش بهتر iOS (Safari) */
@supports (-webkit-touch-callout: none) {
  #chat-mobile input,
  #chat-mobile textarea,
  #chat-mobile select,
  #chat-mobile [contenteditable="true"]{
    font-size: 16px !important;
  }
}

/* متن‌های خیلی بلند داخل پیام‌ها هم از کادر نزنن بیرون (کمک به عدم اسکرول افقی) */
@media (max-width: 820px){
  .show-message-person .message-text,
  .show-message-me .message-text{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* پیشنهاد تکمیلی برای سازگاری اندازه متن در وبکیت */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


/* 1) جلوی بریدگی پایین آیفون (ناتچ) برای باکس ارسال پیام */
@supports (padding: max(0px)) {
  #chat-mobile .send-message { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* 2) ارتفاع پایدار روی موبایل هنگام باز/بسته شدن کیبورد */
#chat-mobile { height: 100dvh; }         /* مرورگرهای جدید */
@supports not (height: 100dvh) {
  #chat-mobile { height: 100svh; }       /* iOS جدیدتر */
}

/* 3) تاچ تمیز روی نوار پیشرفت / ویدیو */
#bar_base_id, video, canvas { touch-action: pan-y; }

/* === Preload Overlay === */
#preload{
  position: fixed; inset: 0; z-index: 9999;
  display:flex; align-items:center; justify-content:center;
  padding: 32px;
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(80,110,160,.25), transparent 60%),
    radial-gradient(1200px 600px at 20% 90%, rgba(255,255,255,.06), transparent 60%),
    rgba(16,22,30,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .35s ease, visibility .35s ease;
}
#preload.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.preload-card{
  width: min(460px, 92vw);
  border-radius: 20px; padding: 22px 20px;
  background: rgba(25,32,42,.7);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  text-align: center; color:#fff;
}

.preload-logo{ display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:16px; font-weight:600; margin-bottom:14px; }
.preload-logo i{ font-size:22px; opacity:.9; }

.preload-spinner{
  width:56px; height:56px; margin:8px auto 16px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.15);
  border-top-color: rgba(255,255,255,.9);
  animation: pre_spin 1s linear infinite;
}
@keyframes pre_spin{ to{ transform: rotate(360deg); } }

.preload-progress{ position:relative; height:8px; border-radius:999px; overflow:hidden;
  background: rgba(255,255,255,.12); margin:0 auto 10px; width:84%; }
.preload-progress .preload-bar{
  position:absolute; left:0; top:0; bottom:0;
  width:18%;
  background: linear-gradient(90deg, rgba(196,224,255,.85), rgba(255,255,255,.95));
  border-radius:inherit;
  animation: pre_bar 2.2s ease-in-out infinite;
}
@keyframes pre_bar{
  0%{ width:8%; transform: translateX(0); }
  50%{ width:68%; transform: translateX(22%); }
  100%{ width:8%; transform: translateX(100%); }
}

.preload-tip{ opacity:.8; font-size:12px; line-height:1.6; margin-top:6px; }

/* احترام به Safe-Area پایین آیفون */
@supports (padding: max(0px)){ #preload{ padding-bottom:max(32px, env(safe-area-inset-bottom)); } }

/* وقتی پریلود باز است، اسکرول بدنه را قفل نکنیم هم اوکی است؛
   اگر خواستی قفل کنی، body.preload-active { overflow:hidden; } را اضافه کن */

/* آلفا باید بین 0 و 1 باشه */
.show-message-system { background: rgba(255,149,0,0.12); }


/* پنل‌های فول‌اسکرین موبایل: عرض/ارتفاع اجباری */
#chat-mobile,
#user-mo{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 90 !important;
}

/* جلوگیری از بیرون‌زدگی افقی در موبایل */
html, body { max-width:100%; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
img, video, iframe { max-width:100%; height:auto; display:block; }

/* هر کانتینر اصلی صفحه—اسم‌ها رو با ساختار خودت تطبیق بده */
#app, .web-body, .page-container, .lobby-container, main, header, footer {
  overflow-x:hidden; max-width:100vw;
}

/* پنل‌های فول‌اسکرین که ممکنه عرض ایجاد کنن */
#preload, #chat-mobile, #user-mo {
  left:0; right:0; width:100vw; max-width:100vw;
}

/* اگر جایی داخل محتوا (نه پنل‌ها) کلاس w-screen داری، این خط جلوش را می‌گیرد */
:not(#chat-mobile):not(#user-mo) [class*="w-screen"] { max-width:100%; }

/* چت موبایل */
#chat-mobile { direction:rtl; }
#chat-mobile .show-frame{
  display:flex; flex-direction:column; gap:.5rem; padding:.25rem 0 .5rem;
}
#chat-mobile .message-text{
  white-space:pre-wrap; word-break:break-word; line-height:1.6;
}
#chat-mobile .message-name{
  font-size:.72rem; opacity:.8; margin-bottom:.2rem;
}

/* پیام سیستمی (دو نام برای سازگاری با هر دو مارک‌آپ) */
#chat-mobile .sys-bubble,
#chat-mobile .show-message-system{
  text-align:center;
  background:rgba(255,149,0,0.12);
  border:1px dashed #FF9500;
  color:#FFB84D;
  padding:6px 10px; margin:2px 0; border-radius:8px; font-size:.9rem;
}

/* پیام من */
#chat-mobile .me-bubble,
#chat-mobile .show-message-me{
  align-self:flex-end; max-width:85%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px 14px 4px 14px;
  padding:8px 10px;
}

/* پیام دیگران */
#chat-mobile .other-bubble,
#chat-mobile .show-message-person{
  align-self:flex-start; max-width:85%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px 14px 14px 4px;
  padding:8px 10px;
}

/* ناحیه ارسال پیام پایین صفحه بماند و جمع‌وجور شود */
#chat-mobile .send-message{
  position:sticky; bottom:0; background:#0b1220;
  display:flex; align-items:center; gap:.5rem; padding-top:.5rem;
}
#chat-mobile .send-message input{ flex:1; min-width:0; }
#chat-mobile .send-message select{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:.3rem .4rem; color:#fff;
}

/* چت موبایل تیره‌تر با اسکرین */
#chat-mobile{
  position: relative;              /* برای ::before */
  background: #070b16;             /* یک درجه تیره‌تر از #0b1220 */
}
#chat-mobile::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);     /* اسکرین تیره؛ درصورت نیاز .45 کن */
  pointer-events: none;            /* کلیک‌ها به محتوا برسند */
  z-index: 1;
}

/* مطمئن شو محتوا بالای اسکرین است */
#chat-mobile .chat-header,
#chat-mobile #f-mobile,
#chat-mobile .send-message{ position: relative; z-index: 2; }

html, body { overflow-x: hidden; }
.header-loby { overflow-x: hidden; }

/* هدر جمع‌وجور و بدون اسکرول افقی */
header{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; overflow-x:hidden; width:100%;
}

/* nav و لوگو محدود و قابل جمع شدن */
header nav{ flex:0 0 auto; }
header #logo{ flex:0 0 auto; }

/* لینک پروفایل: در یک خط، قابل جمع‌شدن و بدون بیرون‌زدگی */
header .prof{
  display:inline-flex; align-items:center; gap:.5rem;
  max-width:60vw; /* در موبایل */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* تصاویر داخل هدر مطمئن */
header img{ display:block; max-width:100%; height:auto; }
header .prof img{ width:30px; height:30px; flex:0 0 auto; }

html, body { max-width:100%; overflow-x:hidden; }
.header-loby { overflow-x:hidden; }
header img { display:block; max-width:100%; height:auto; } /* لوگو هرگز از والد پهن‌تر نشود */
#chat-mobile, #user-mo { left:0; right:0; width:100vw; max-width:100vw; }

/* هدر هرگز افقی اسکرول نخورد */
header{ overflow-x:hidden; }
header img{ display:block; max-width:100%; height:auto; }
/* متن نام کاربری اگر طولانی شد، نریزد بیرون */
header .prof span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* اگر کانتینر بیرونی پدینگ/عرض می‌دهد، جلو بیرون‌زدگی را بگیر */
html,body,#vue-div{ max-width:100vw; overflow-x:hidden; }



/* پنل چت موبایل: ارتفاع واقعیِ ویوپورت + رفتار اسکرول درست */
#chat-mobile{
  /* fallback ها */
  height: 100vh;
  max-height: 100vh;
  overscroll-behavior: contain;
}
@supports (height: 100dvh){
  #chat-mobile{
    height: 100dvh;          /* روی موبایل‌ها، 100vh مشکل دارد؛ 100dvh دقیقاً ناحیه‌ی دیده‌شده است */
    max-height: 100dvh;
  }
}

/* لیست پیام‌ها نرم اسکرول شود و پایینش فضای کافی داشته باشد */
#chat-mobile #f-mobile{
  -webkit-overflow-scrolling: touch;
  /* ارتفاع فوتر + حاشیه‌ی امن برای ناچ/نوار سیستم */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
}

/* فوتر چت همیشه قابل‌کلیک بماند و زیر هیچ چیزی نرود */
#chat-mobile .send-message{
  position: sticky;          /* نسبت به اسکرول داخلی پنل */
  bottom: 0;
  z-index: 3;
  background: #0b1220;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .5rem calc(env(safe-area-inset-bottom, 0px) + .5rem);
  border-top: 1px solid rgba(255,255,255,.08);
}
#chat-mobile .send-message input{ flex:1; min-width:0; }
#chat-mobile .send-message select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: .3rem .4rem; color:#fff;
}


/* ===== پایه و متغیرها ===== */
.lobby-header * { box-sizing: border-box; }
:root{
  --gap: .5rem;
  --radius: 8px;
  --h: 40px;
  --primary: #FFC107; /* رنگ اصلی دکمه ثبت */
  --primary-hover: #ffcf3a;
  --neutral: #2b2b2b; /* رنگ دکمه فایل */
  --neutral-hover: #3a3a3a;
  --border: rgba(255,255,255,.12);
  --bg: rgba(255,255,255,.06);
  --text: #fff;
  --text-dim: #c9c9c9;
}

/* ===== لایه‌بندی موبایل (پیش‌فرض) ===== */
.lobby-header{
  width: 100%;
  display: flex;
  flex-direction: column;          /* موبایل: عمودی */
  align-items: stretch;
  gap: var(--gap);
  padding: .5rem .75rem;
  overflow: hidden;
}

.lobby-logo{
  align-self: center;
  display: inline-flex;
}
.lobby-logo img{
  height: 40px;
  width: auto;
  display: block;
}

.lobby-controls{
  width: 100%;
  min-width: 0;
}
.lobby-form{ width: 100%; }
.lobby-row{
  display: flex;
  flex-direction: column;          /* موبایل: اجزا زیر هم */
  gap: var(--gap);
  width: 100%;
  min-width: 0;
}

/* ورودی لینک */
.lobby-input{
  width: 100%;
  min-width: 0;
  height: var(--h);
  padding: 0 .75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  outline: none;
  direction: ltr;                  /* لینک/URL درست تایپ شود */
}
.lobby-input::placeholder{ color: var(--text-dim); }
.lobby-input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,193,7,.25);
}

/* دکمه‌ها */
.btn{
  height: var(--h);
  padding: 0 .9rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.2); }

.btn-primary{
  background: var(--primary);
  color: #111;
  border-color: rgba(0,0,0,.05);
}
.btn-primary:hover{ background: var(--primary-hover); }

.btn-secondary{
  background: var(--neutral);
  color: var(--text);
  border-color: rgba(255,255,255,.08);
}
.btn-secondary:hover{ background: var(--neutral-hover); }

/* input فایل مخفی */
.lobby-file-input{ display: none; }

/* ===== دسکتاپ (>=768px) ===== */
@media (min-width: 768px){
  .lobby-header{
    flex-direction: row;           /* دسکتاپ: افقی */
    align-items: center;
    gap: .75rem;
  }
  .lobby-logo{ align-self: auto; }
  .lobby-logo img{ height: 56px; }

  .lobby-controls{ flex: 1 1 auto; }
  .lobby-row{
    flex-direction: row;
    align-items: center;
  }

  /* ورودی لینک کشسان؛ دکمه‌ها اندازه محتوا */
  .lobby-input{
    flex: 1 1 22rem;               /* بزرگ می‌شود ولی حداقل ~352px */
  }
  .btn{ flex: 0 0 auto; }
}

/* ===== نمایش‌های خیلی عریض (اختیاری) ===== */
@media (min-width: 1280px){
  .lobby-input{ flex-basis: 28rem; } /* ~448px */
}

/* ===== Layout پایه (موبایل‌فرست) ===== */
.lobby-header{              /* overflow-hidden رو حذف کردیم */
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.5rem;
  padding:.5rem .75rem;
}

.lobby-logo{ align-self:center; display:inline-flex; }
.lobby-logo img{ height:40px; width:auto; display:block; }

.lobby-controls{ width:100%; min-width:0; }
.lobby-form{
  display:flex;
  flex-direction:column;     /* موبایل: زیر هم */
  gap:.5rem;
}
.lobby-input{
  height:40px; padding:0 .75rem; border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff; outline:0; direction:ltr; min-width:0;
}
.lobby-input::placeholder{ color:#c9c9c9; }
.lobby-input:focus{ border-color:#FFC107; box-shadow:0 0 0 3px rgba(255,193,7,.25); }

.lobby-file-input{ display:none; }
.btn{
  height:40px; padding:0 .9rem; border-radius:8px;
  border:1px solid transparent; font-weight:600; white-space:nowrap; cursor:pointer;
}
.btn-primary{ background:#FFC107; color:#111; }
.btn-primary:hover{ background:#ffcf3a; }
.btn-secondary{ background:#2b2b2b; color:#fff; border-color:rgba(255,255,255,.08);}
.btn-secondary:hover{ background:#3a3a3a; }

/* ===== دسکتاپ (>=768px) ===== */
@media (min-width:768px){
  .lobby-header{ flex-direction:row; align-items:center; gap:.75rem; }
  .lobby-logo{ align-self:auto; }
  .lobby-logo img{ height:56px; }
  .lobby-controls{ flex:1 1 auto; }

  .lobby-form{
    flex-direction:row; align-items:center;
  }
  .lobby-input{
    flex:1 1 22rem;              /* ورودی کشسان، حداقل ~352px */
  }
  .btn{ flex:0 0 auto; }         /* دکمه‌ها اندازه محتوا */
}

/* ------- Theme vars & base ------- */
:root{
  --h: 42px;              /* قد یکسان برای ورودی و دکمه‌ها */
  --r: 10px;              /* گردی گوشه‌ها */
  --gap: 8px;
  --primary: #FFC107;
  --primary-hover: #ffcf3a;
  --neutral: #2b2b2b;
  --neutral-hover: #3a3a3a;
  --border: rgba(255,255,255,.14);
  --bg: rgba(255,255,255,.06);
  --text: #fff;
  --text-dim: #c9c9c9;
}

.header-loby { overflow: visible; } /* چیزی برش نخورد */

/* گرید کنترل‌ها (اگر قبلاً گذاشتی، همین مقادیر را نگه دار) */
.controls-grid{
  display: grid;
  grid-template-columns: 1fr auto;  /* موبایل: ورودی + ثبت */
  gap: var(--gap);
  align-items: stretch;             /* قد برابر همه آیتم‌ها */
  width: 100%;
  min-width: 0;
}

/* ورودی لینک */
.lobby-input{
  height: var(--h);
  padding: 0 .8rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  outline: none;
  min-width: 0;
  direction: ltr;
}
.lobby-input::placeholder{ color: var(--text-dim); }
.lobby-input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,193,7,.25);
}

/* دکمه‌ها (ظاهر شیک‌تر برای دسکتاپ هم) */
.btn{
  height: var(--h);
  padding: 0 1rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s, transform .05s, border-color .2s;
}
.btn:active{ transform: translateY(1px) scale(.99); }

.btn-primary{
  background: var(--primary);
  color: #111;
  border-color: rgba(0,0,0,.05);
  box-shadow: 0 6px 14px -8px rgba(255,193,7,.7);
}
.btn-primary:hover{ background: var(--primary-hover); }

.btn-secondary{
  background: linear-gradient(180deg, #2f2f2f, var(--neutral));
  color: var(--text);
  border-color: rgba(255,255,255,.1);
}
.btn-secondary:hover{
  background: linear-gradient(180deg, #3a3a3a, var(--neutral-hover));
}

/* دکمه فایل روی موبایل مخفی، روی دسکتاپ نمایش */
.file-btn,
.btn-local-file{          /* اگر هنوز کلاس قدیمی داری هم پوشش دهد */
  display: none;          /* موبایل: مخفی */
}
@media (min-width: 768px){
  .file-btn,
  .btn-local-file{
    display: inline-flex; /* دسکتاپ: نمایش */
  }
}

/* روی موبایل اگر هنوز گرید داری، دکمه فایل یک ردیف کامل بگیرد (در صورت نمایش) */
.file-btn{ grid-column: 1 / -1; }

/* دسکتاپ: سه‌ستونه در یک ردیف، فواصل مرتب */
@media (min-width: 640px){
  .controls-grid{
    grid-template-columns: 1fr auto auto; /* ورودی + ثبت + انتخاب فایل */
    gap: 10px;
  }
}

/* لوگو کمی بزرگ‌تر در دسکتاپ */
.header-loby > a img{ height: 40px; width: auto; }
@media (min-width:768px){ .header-loby > a img{ height: 56px; } }


/* ---- اندازه‌های یکنواخت و رنگ‌ها ---- */
:root{
  --h: 42px;
  --r: 10px;
  --primary: #FFC107;
  --primary-hover: #ffcf3a;
  --neutral: #2b2b2b;
  --neutral-hover: #3a3a3a;
  --border: rgba(255,255,255,.14);
  --bg: rgba(255,255,255,.06);
  --text: #fff;
  --text-dim: #c9c9c9;
}

.header-loby{ overflow:visible; } /* چیزی برش نخوره */

/* ورودی لینک */
.header-loby .share-input{
  height: var(--h);
  padding: 0 .8rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  outline: none;
  min-width: 0;
  direction: ltr;
}
.header-loby .share-input::placeholder{ color: var(--text-dim); }
.header-loby .share-input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,193,7,.25);
}

/* دکمه‌ها (ثبت + انتخاب فایل) */
.header-loby .share-btn,
.header-loby .btn-local-file{
  height: var(--h);
  padding: 0 1rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s, transform .05s, border-color .2s;
}
.header-loby .share-btn:active,
.header-loby .btn-local-file:active{ transform: translateY(1px) scale(.99); }

/* رنگ‌ها */
.header-loby .share-btn{
  background: var(--primary);
  color:#111;
  border-color: rgba(0,0,0,.05);
  box-shadow: 0 6px 14px -8px rgba(255,193,7,.7);
}
.header-loby .share-btn:hover{ background: var(--primary-hover); }

.header-loby .btn-local-file{
  background: linear-gradient(180deg, #2f2f2f, var(--neutral));
  color:#fff;
  border-color: rgba(255,255,255,.1);
}
.header-loby .btn-local-file:hover{
  background: linear-gradient(180deg, #3a3a3a, var(--neutral-hover));
}

/* ===== موبایل: دکمه "انتخاب فایل" را مخفی کن ===== */
@media (max-width: 767.98px){
  .header-loby .btn-local-file{ display: none !important; }
}

/* ===== دسکتاپ: همه در یک ردیف و بدون رَپ ===== */
@media (min-width: 768px){
  /* جلوگیری از شکست ردیفِ دکمه فایل */
  .header-loby .search-movie .flex.flex-wrap{ flex-wrap: nowrap !important; }

  /* ورودی کشسان؛ کلاس‌های md:w-60 و ... را بی‌اثر کن */
  .header-loby .share-input{
    width: auto !important;
    flex: 1 1 22rem !important; /* حداقل ~352px، بقیه کش میاد */
  }

  /* دکمه‌ها اندازه محتوا و کنار ورودی */
  .header-loby .share-btn,
  .header-loby .btn-local-file{
    flex: 0 0 auto;
  }
}

/* چیزی برش نخوره */
header .grid { overflow: visible; }

/* دکمه فایل در موبایل قطعاً مخفی بماند */
@media (max-width: 767.98px){
  button[onclick*="triggerLocalFile"],
  .btn-local-file {
    display: none !important;
  }
}

/* جلوگیری از رفتن دکمه فایل به ردیف پایین در دسکتاپ */
@media (min-width: 768px){
  /* اگر جایی flex-wrap خورده، خنثی‌ش کن */
  .search-movie .flex, 
  .search-movie .flex-wrap { flex-wrap: nowrap !important; }
}

/* هم‌قد شدن اجباری ورودی و دکمه‌ها اگر چیزی override می‌کند */
input[type="search"].h-10,
button.h-10 { height: 40px !important; line-height: 40px; }


/* اندازه‌ها و رنگ‌ها */
:root{
  --h: 42px;
  --r: 12px;
  --primary: #FFC107;
  --primary-hover: #ffcf3a;
  --secondary: #2b2b2b;
  --secondary-hover: #3a3a3a;
}

/* دکمه‌های تضمینی (اگر ریست‌ها !important داشته باشن هم جواب می‌ده) */
.tw-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:var(--h) !important;
  padding:0 1rem !important;
  border-radius:var(--r) !important;
  border:1px solid transparent !important;
  font-weight:700 !important;
  line-height:1 !important;
  cursor:pointer !important;
  text-decoration:none !important;
}
.tw-btn--primary{
  background:var(--primary) !important;
  color:#111 !important;
  box-shadow:0 6px 14px -8px rgba(255,193,7,.7) !important;
}
.tw-btn--primary:hover{ background:var(--primary-hover) !important; }
.tw-btn--secondary{
  background:var(--secondary) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.1) !important;
}
.tw-btn--secondary:hover{ background:var(--secondary-hover) !important; }

/* ورودی هم‌قد دکمه‌ها بماند */
input[type="search"].h-10{ height:var(--h) !important; }

/* موبایل: دکمه فایل قطعاً مخفی باشد */
@media (max-width: 767.98px){
  button.tw-btn--secondary{ display:none !important; }
}

/* دسکتاپ: سه ستون در یک ردیف بمانند و مرکزچین نشوند */
@media (min-width: 768px){
  /* اگر جایی flex-wrap اعمال شده، خنثی */
  .search-movie .flex, .search-movie .flex-wrap{ flex-wrap:nowrap !important; }

  /* ورودی کشسان، دکمه‌ها اندازهٔ محتوا */
  form.grid{ align-items:center !important; }
}

/* === Fix: prevent global header rules from breaking player header === */
.videoPlayer > header{
  display:block !important;
  height:auto !important;
  border:0 !important;
  padding: .5rem .75rem !important;
}
@media (min-width: 1024px){
  .videoPlayer > header > .mx-auto{
    max-width:none !important; width:auto !important; padding:0 !important;
    margin-left: calc(var(--chatW,25%) + var(--chatGap,2%) + var(--gutter,16px)) !important;
    margin-right: calc(var(--rightDock,96px) + var(--dockGap,16px) + var(--gutter,16px)) !important;
  }
}

/* Desktop: form columns and button sizing */
@media (min-width: 1024px){
  /* Row: input | file | submit (LTR layout; mobile untouched) */
  .videoPlayer > header form.grid{ grid-template-columns: 1fr auto auto !important; align-items:center !important; direction:ltr; }
  .videoPlayer > header input[type="search"]{ order:1 !important; grid-column: 1 / 2 !important; min-width: 420px; }
  .videoPlayer > header button[type="button"]{ order:2 !important; grid-column: 2 / 3 !important; }
  .videoPlayer > header button[type="submit"]{ order:3 !important; grid-column: 3 / 4 !important; }
  .videoPlayer > header .tw-btn{ min-width:auto !important; }
  .tw-btn{ height:36px !important; padding:0 12px !important; border-radius:10px !important; font-weight:600 !important; }
}

/* === Fix: do not force sidebar visible on mobile (respect hidden md:flex) === */
@media (max-width: 767.98px){
  .option-lobby{ display:none !important; }
}
@media (min-width: 768px){
  .option-lobby{ display:flex !important; }
}

/* === Player wrapper: stable class instead of brittle [style*] selectors === */
.player-wrap{
  position:relative;
  min-height:250px;
}
@media (min-width: 768px){
  .player-wrap{
    width: calc(100% - (var(--chatW,25%) + var(--chatGap,2%) + var(--rightDock,96px) + var(--dockGap,16px) + (2 * var(--gutter,16px)))) !important;
    margin-left: calc(var(--chatW,25%) + var(--chatGap,2%) + var(--gutter,16px)) !important;
    margin-right: calc(var(--rightDock,96px) + var(--dockGap,16px) + var(--gutter,16px)) !important;
  }
}
@media (max-width: 767.98px){
  .player-wrap{ width:100% !important; margin:0 !important; }
}

/* Reset legacy attribute-based decorations on the player box */
.player-wrap{ padding-top:0 !important; background: transparent !important; box-shadow: none !important; border: none !important; }
.player-wrap{ outline: none; }

/* Desktop: visible card around player */
@media (min-width: 1024px){
  .player-wrap{
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }
}
.player-wrap::before{ content: none !important; }
.player-wrap #my_video{ position: static !important; top:auto !important; right:auto !important; left:auto !important; bottom:auto !important; }

/* === Video container (desktop): avoid forced full-viewport height collisions === */
@media (min-width: 768px){
  .videoPlayer{
    height:auto !important;
    min-height:0 !important;
    margin-right:0 !important;
  }
}

/* === Chat mobile footer: keep at bottom, no offset === */
#chat-mobile .send-message{
  position: static !important;
  bottom: auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 10px;
}
#chat-mobile .send-message select{ max-width:64px; }
#chat-mobile .send-message button{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
}
#chat-mobile .send-message input[type="text"]{ min-height:40px; }

/* Slightly larger right dock width for safer spacing on desktop */
:root{ --rightDock: 96px; }

/* Desktop chat: visual overhaul */
@media (min-width: 1024px){
  .chat-fixed{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
    backdrop-filter: blur(12px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    /* Fix height growth: anchor to viewport */
    position: fixed !important;
    top: calc(16px + 56px) !important; /* gutter + approx header */
    bottom: 16px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important; /* allow inner scrolling */
  }
  .chat-fixed h4{ font-weight:700; letter-spacing:.2px; margin: 4px 4px 10px !important; }
  .chat-fixed .frame{
    display:flex; flex-direction:column; flex:1 1 0 !important; height:auto !important;
    min-height: 0 !important; overflow:hidden !important;
    border:none !important; background:transparent !important; box-shadow:none !important; margin-top: 6px !important;
  }
  .chat-fixed .show-frame{
    flex: 1 1 auto !important; width:100% !important; height:auto !important; margin:0 !important;
    min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain;
    padding: 10px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(17,22,29,.55), rgba(17,22,29,.35)) !important;
  }
  .chat-fixed .send-message{
    position: static !important; bottom:auto !important; margin-top: 10px !important;
    width: 100% !important; display:grid !important; grid-template-columns: auto 1fr auto; gap:12px; align-items:center;
    background: transparent !important; padding: 0 !important; flex: 0 0 auto !important;
  }
  .chat-fixed .send-message select{ max-width:68px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color:#eaeaea; }
  .chat-fixed .send-message input[type="text"]{ height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color:#eaeaea; padding: 0 12px; width:100%; }
  .chat-fixed .send-message button{ width:44px; height:44px; display:inline-grid; place-items:center; border-radius:10px; background: #FFC107; color:#111; border:1px solid rgba(0,0,0,.05); box-shadow:0 6px 14px -8px rgba(255,193,7,.7); }
  .chat-fixed .send-message button:hover{ background:#ffcf3a; }
  .chat-fixed .show-message-me{ align-self:flex-end; background: rgba(59,130,246,.18); border-radius: 12px 12px 2px 12px; padding:8px 10px; border:1px solid rgba(59,130,246,.28); max-width: 80%; }
  .chat-fixed .show-message-person{ align-self:flex-start; background: rgba(255,255,255,.06); border-radius: 12px 12px 12px 2px; padding:8px 10px; border:1px solid rgba(255,255,255,.12); max-width: 80%; }
  .chat-fixed .show-message-system{ background: rgba(255,193,7,.12) !important; border:1px dashed rgba(255,193,7,.6) !important; color:#ffd45c !important; border-radius:10px !important; text-align:center; padding:8px 10px; }
  .chat-fixed .message-name{ color:#ffd45c !important; font-weight:700; margin-bottom:4px; }
}

/* === Player Loading Overlay (link load + sync) === */
.player-loading-overlay{
  position:absolute; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background: rgba(7,11,22,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: all;
}
.player-loading-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-width: 200px; max-width: min(92vw, 480px);
  padding: 14px 16px; color:#fff; text-align:center;
  border:1px solid rgba(255,255,255,.16); border-radius:16px;
  background: linear-gradient(180deg, rgba(16,22,30,.55), rgba(16,22,30,.35));
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.player-spinner{
  width: 44px; height: 44px; border-radius:999px;
  border: 4px solid rgba(255,255,255,.18);
  border-top-color: #FFC107;
  animation: player-spin 1000ms linear infinite;
}
.player-loading-text{ font-size:.95rem; font-weight:700; letter-spacing:.3px; }
@keyframes player-spin{ to { transform: rotate(360deg); } }

@media (max-width: 767.98px){
  .player-spinner{ width:36px; height:36px; border-width:3px; }
  .player-loading-card{ min-width:auto; width:max-content; padding:12px 14px; }
  .player-loading-text{ font-size:.9rem; }
}
/* Mobile: avoid heavy fixed backgrounds */
@media (max-width: 767.98px){
  body{ background-attachment: scroll, scroll, scroll, scroll; }
}

/* === Upgrade 2025: Upgrade & plans page === */
.upgrade-section{ max-width: 1100px; margin: 18px auto 24px; padding: 0 8px; }

/* Hero */
.upgrade-hero{
  margin: 6px auto 14px;
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  background: linear-gradient(180deg, rgba(16,22,30,.55), rgba(16,22,30,.35));
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  padding: 16px 14px; color:#fff; text-align:center;
}
.upgrade-hero .uh-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:800; background: linear-gradient(90deg, #FFC107, #ffbd2f); color:#111; box-shadow: 0 6px 16px -8px rgba(255,193,7,.7); }
.upgrade-hero .uh-title{ font-size:1.6rem; font-weight:800; margin-top:8px; }
.upgrade-hero .uh-subtitle{ color:#e6e6e6; opacity:.92; margin-top:6px; }

/* License redeem */
.license-card{
  margin: 10px auto 16px; max-width: 900px;
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  background: linear-gradient(180deg, rgba(16,22,30,.55), rgba(16,22,30,.35));
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  padding: 14px; color:#fff;
}
.license-card .lc-title{ font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.license-card .lc-form{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.u-input{ display:flex; align-items:center; gap:8px; padding: 0 10px; height:46px; border-radius:12px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#eaeaea; flex: 1 1 320px; }
.u-input i{ color:#FFC107; }
.u-input input{ all:unset; color:#eaeaea; width:100%; direction:ltr; }
.u-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 14px; border-radius:12px; border:1px solid rgba(0,0,0,.05); font-weight:800; }
.u-btn-primary{ background: linear-gradient(90deg, #FFC107, #ffbd2f); color:#111; box-shadow: 0 10px 24px -12px rgba(255,193,7,.8); }
.u-btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 30px -12px rgba(255,193,7,.9); }
.license-card .lc-help{ margin-top:8px; color:#e0e0e0; opacity:.9; font-size:.95rem; }

/* Plans grid */
.plans-grid{ margin-top: 8px; display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan-card{
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  background: linear-gradient(180deg, rgba(16,22,30,.55), rgba(16,22,30,.35));
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
  padding: 16px; color:#fff; display:flex; flex-direction:column; gap:10px;
}
.plan-card.is-popular{ border-color: rgba(255,193,7,.5); box-shadow: 0 14px 28px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,193,7,.25); }
.plan-badge{ position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background: linear-gradient(90deg, #FFC107, #ffbd2f); color:#111; font-weight:800; font-size:.85rem; }
.plan-title{ font-weight:800; font-size:1.15rem; }
.plan-meta{ display:flex; align-items:center; gap:10px; color:#e0e0e0; opacity:.95; flex-wrap:wrap; }
.plan-meta .pm-item i{ color:#FFC107; margin-left:6px; }
.plan-price{ display:flex; align-items:baseline; gap:6px; margin-top:6px; }
.plan-price .price-amount{ font-size:1.6rem; font-weight:900; letter-spacing:.3px; }
.plan-price .price-unit{ opacity:.85; }
.plan-features{ list-style:none; padding:0; margin: 6px 0 0; display:grid; gap:6px; }
.plan-features li{ display:flex; align-items:center; gap:8px; color:#e6e6e6; }
.plan-features i{ color:#4ade80; }
.plan-cta{ margin-top:8px; }

@media (max-width: 767.98px){
  .license-card .lc-form{ flex-direction: column; align-items: stretch; }
  .u-btn, .u-input{ width:100%; }
}

/* === Chat: guard against accidental aspect-ratio forcing === */
.chat-fixed .frame,
.chat-fixed .show-frame{
  aspect-ratio: auto !important;
  width: 100% !important;
  min-height: 0 !important;
}

/* ===== Desktop Lobby Grid Layout (non-mobile) ===== */
@media (min-width: 1024px){
  /* 3-column grid: left actions, center player, right chat (small desktop) */
  .div-lobby.desktop-layout,
  .div-lobby.lobby-grid{
    display: grid !important;
    grid-template-columns: 72px minmax(0,1fr) 300px !important;
    gap: 16px !important;
    align-items: start !important;
    padding: 12px 16px 16px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Left vertical actions (sidebar) */
  .div-lobby.desktop-layout .option-lobby,
  .div-lobby.lobby-grid .option-lobby{
    position: sticky !important;
    top: 16px !important;
    left: auto !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: calc(100vh - 32px) !important;
    background-color: rgba(25,32,42,.88) !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
    z-index: 10 !important;
  }

  /* Center video column */
  .div-lobby.desktop-layout .videoPlayer,
  .div-lobby.lobby-grid .videoPlayer{
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  /* Right chat column */
  .div-lobby.desktop-layout .chat-fixed,
  .div-lobby.lobby-grid .chat-fixed{
    position: sticky !important;
    top: 16px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: calc(100vh - 32px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

@media (min-width: 1280px){
  .div-lobby.desktop-layout,
  .div-lobby.lobby-grid{ grid-template-columns: 84px minmax(0,1fr) 320px !important; }
  .div-lobby.desktop-layout .option-lobby,
  .div-lobby.lobby-grid .option-lobby{ width:84px !important; min-width:84px !important; max-width:84px !important; }
}

@media (min-width: 1536px){
  .div-lobby.desktop-layout,
  .div-lobby.lobby-grid{ grid-template-columns: 96px minmax(0,1fr) 360px !important; }
  .div-lobby.desktop-layout .option-lobby,
  .div-lobby.lobby-grid .option-lobby{ width:96px !important; min-width:96px !important; max-width:96px !important; }
}

/* Player controls: ensure full-width rows on desktop layout */
@media (min-width: 1024px){
  .div-lobby.desktop-layout #box_video_id,
  .div-lobby.lobby-grid #box_video_id{ width: 100% !important; max-width: none !important; }
  .div-lobby.desktop-layout .player-wrap > .absolute .w-full.flex.items-center.justify-center,
  .div-lobby.lobby-grid .player-wrap > .absolute .w-full.flex.items-center.justify-center{ width: 100% !important; max-width: none !important; }
}

/* === No-subscription hero (Step1) === */
.no-subscription-card{
  --ns-accent: #FFC107;
  --ns-accent-2: #ffbd2f;
  max-width: 960px;
  margin: 18px auto 0;
  padding: 20px 18px;
  text-align: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(16,22,30,.55), rgba(16,22,30,.35));
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.no-subscription-card .ns-badge{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px; font-size: .9rem; font-weight: 700;
  color: #111; background: linear-gradient(90deg, var(--ns-accent), var(--ns-accent-2));
  box-shadow: 0 6px 16px -8px rgba(255,193,7,.7);
}
.no-subscription-card .ns-title{ margin-top: 10px; font-size: 1.55rem; font-weight: 800; letter-spacing: .2px; }
.no-subscription-card .ns-subtitle{ margin-top: 8px; color: #e6e6e6; opacity: .92; font-size: .98rem; }

.no-subscription-card .ns-features{
  margin: 16px auto 0; padding: 0; list-style: none; width: 100%; max-width: 820px;
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
@media (min-width: 640px){ .no-subscription-card .ns-features{ grid-template-columns: 1fr 1fr; } }
.no-subscription-card .ns-feature{
  display: flex; align-items: center; gap: 10px; justify-content: flex-start;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  text-align: right;
}
.no-subscription-card .ns-feature i{ color: var(--ns-accent); width: 20px; text-align: center; font-size: 1.05rem; }
.no-subscription-card .ns-feature span{ font-size: .98rem; }

.no-subscription-card .ns-cta{
  margin-top: 16px; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.no-subscription-card .ns-btn-primary{
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  min-width: 180px; height: 46px; padding: 0 16px;
  color: #111; font-weight: 800; letter-spacing: .2px; text-decoration: none;
  background: linear-gradient(90deg, var(--ns-accent), var(--ns-accent-2));
  border: 1px solid rgba(0,0,0,.05); border-radius: 12px;
  box-shadow: 0 10px 24px -12px rgba(255,193,7,.8);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.no-subscription-card .ns-btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 30px -12px rgba(255,193,7,.9); }
.no-subscription-card .ns-btn-secondary{
  display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 14px;
  color: #f0f0f0; text-decoration: none; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.no-subscription-card .ns-btn-secondary:hover{ background: rgba(255,255,255,.1); }

.no-subscription-card .ns-trust{
  margin-top: 12px; font-size: .92rem; color:#eaeaea; opacity: .9; display: inline-flex; gap: 8px; align-items: center;
}
.no-subscription-card .ns-trust i{ color: var(--ns-accent); }

@media (max-width: 480px){
  .no-subscription-card{ padding: 16px 12px; }
  .no-subscription-card .ns-title{ font-size: 1.3rem; }
  .no-subscription-card .ns-subtitle{ font-size: .92rem; }
  .no-subscription-card .ns-cta{ flex-direction: column; }
  .no-subscription-card .ns-btn-primary, .no-subscription-card .ns-btn-secondary{ width: 100%; }
}

/* Divider between features and CTA */
.no-subscription-card .ns-divider{
  height: 1px; margin: 12px auto 6px; width: min(96%, 760px);
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.18), rgba(255,255,255,.0));
}

/* Features: simplify on mobile to avoid “buttony” look */
@media (max-width: 639.98px){
  .no-subscription-card .ns-feature{
    background: transparent;
    border: none;
    padding: 6px 8px;
    opacity: .95;
  }
  .no-subscription-card .ns-feature i{ color: #4ade80; }
}

/* === Lobby 2025: Create/Join section === */
.lobby-section{ max-width: 1100px; margin: 18px auto 0; }
.la-header{ text-align:center; margin: 0 auto 12px; }
.la-title{ font-size:1.6rem; font-weight:800; letter-spacing:.2px; }
.la-subtitle{ color:#e0e0e0; opacity:.92; margin-top:6px; }
.la-grid{
  margin-top: 12px; display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.la-card{
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  background: linear-gradient(180deg, rgba(16,22,30,.55), rgba(16,22,30,.35));
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  padding: 16px; color:#fff; display:flex; flex-direction:column; gap:10px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}
.la-card:hover{ transform: translateY(-2px); filter: brightness(1.02); box-shadow: 0 16px 32px rgba(0,0,0,.38); }
.la-icon{
  width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
  background: linear-gradient(90deg, #FFC107, #ffbd2f); color:#111; box-shadow: 0 6px 16px -8px rgba(255,193,7,.7);
}
.la-card-title{ font-size:1.15rem; font-weight:800; }
.la-desc{ color:#e6e6e6; opacity:.92; font-size:.96rem; }
.la-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.la-btn-primary{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  min-width:160px; height:46px; padding:0 16px; border-radius:12px; border:1px solid rgba(0,0,0,.05);
  background: linear-gradient(90deg, #FFC107, #ffbd2f); color:#111; font-weight:800; letter-spacing:.2px;
  box-shadow: 0 10px 24px -12px rgba(255,193,7,.8);
}
.la-btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 30px -12px rgba(255,193,7,.9); }
.la-btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:140px; height:44px; padding:0 14px; border-radius:12px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff;
}
.la-btn-secondary:hover{ background: rgba(255,255,255,.12); }
.la-input{
  display:flex; align-items:center; gap:8px; padding: 0 10px; height:46px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; color:#eaeaea;
}
.la-input i{ color:#FFC107; }
.la-input input{ all:unset; color:#eaeaea; width:100%; direction:ltr; }
.la-avatars{ display:flex; gap:6px; margin-top:4px; }
.la-avatar{ width:28px; height:28px; border-radius:999px; display:grid; place-items:center; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff; }

@media (max-width: 480px){
  .la-title{ font-size:1.35rem; }
  .la-grid{ gap:10px; }
  .la-actions{ flex-direction:column; align-items:stretch; }
  .la-btn-primary, .la-btn-secondary{ width:100%; }
}

/* Desktop alignment for Join-by-Code */
@media (min-width: 768px){
  .la-card.la-join .la-actions{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .la-card.la-join .la-input{ min-width: 280px; }
  .la-card.la-join .la-btn-primary{ min-width: 140px; }
}

/* Mobile: avoid horizontal scroll */
@media (max-width: 767.98px){
  html, body{ overflow-x: hidden; }
  .lobby-section{ margin: 10px auto 0; padding: 0 4px; max-width: 100%; }
  .la-grid{ grid-template-columns: 1fr; }
  .la-card{ padding: 12px; }
}

/* ========================================
   🎯 ACTIVE LOBBIES STYLES (COMPACT DESIGN)
   ======================================== */

/* Container for active lobbies */
.active-lobbies-container {
  margin-top: 24px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Header */
.active-lobbies-header {
  margin-bottom: 12px;
}

.active-lobbies-title {
  font-size: 1rem;
  font-weight: 700;
  color: #4caf50;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.active-lobbies-title i {
  font-size: 0.9rem;
  animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* List of active lobbies */
.active-lobbies-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each lobby item - compact horizontal layout */
.active-lobby-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(56, 142, 60, 0.12) 100%);
  border: 1.5px solid rgba(76, 175, 80, 0.4);
  border-radius: 12px;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.active-lobby-item:hover {
  border-color: rgba(76, 175, 80, 0.7);
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.18) 0%, rgba(56, 142, 60, 0.18) 100%);
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

/* Info section */
.active-lobby-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.active-lobby-code {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: white;
}

.active-lobby-code i {
  color: #4caf50;
  font-size: 1rem;
}

.active-lobby-code strong {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 1px;
}

.active-lobby-users {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.active-lobby-users i {
  color: #4caf50;
  font-size: 0.9rem;
}

/* Owner badge - compact */
.owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  padding: 2px 8px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #1a1a2e;
  border-radius: 10px;
  font-weight: 700;
  margin-right: 4px;
  vertical-align: middle;
}

.owner-badge i {
  font-size: 0.65rem;
}

/* Action button - compact */
.active-lobby-action {
  margin: 0;
}

.active-lobby-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.active-lobby-btn:hover {
  background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.active-lobby-btn i {
  font-size: 0.85rem;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .active-lobbies-container {
    margin-top: 16px;
    padding: 0 4px;
  }

  .active-lobby-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }

  .active-lobby-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .active-lobby-code {
    flex-wrap: wrap;
  }

  .active-lobby-btn {
    width: 100%;
    justify-content: center;
    padding: 10px;
  }

  .owner-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
  }
}

/* Fix step1 mobile padding and responsiveness */
@media (max-width: 767.98px) {
  .step1-main {
    padding: 12px 8px !important;
  }
  
  .lobby-section {
    padding: 0 !important;
  }
  
  .la-header {
    padding: 0 4px !important;
  }
  
  .active-lobbies-container {
    padding: 0 !important;
  }
}

/* Fix step1 mobile padding */
@media (max-width: 767.98px) {
  .up-container main {
    padding: 16px 8px !important;
  }
}

/* ====================================
   Social Follow Bonus Section Styles
   ==================================== */

.social-bonus-section {
  margin-top: 32px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.08) 0%, rgba(0, 210, 255, 0.06) 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.social-bonus-header {
  text-align: center;
  margin-bottom: 32px;
}

.social-bonus-header i {
  font-size: 3rem;
  color: #ffc107;
  margin-bottom: 12px;
  display: block;
  animation: giftPulse 2s ease-in-out infinite;
}

@keyframes giftPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.social-bonus-header h2 {
  font-size: 1.6rem;
  color: #ffffff;
  margin-bottom: 8px;
  font-weight: 700;
}

.social-bonus-header p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
}

.social-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.social-platform-card {
  background: rgba(15, 21, 35, 0.6);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.social-platform-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-platform-card:hover::before {
  opacity: 1;
}

.social-platform-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.platform-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  transition: transform 0.3s ease;
}

.social-platform-card:hover .platform-icon {
  transform: rotate(360deg);
}

.telegram-icon {
  background: linear-gradient(135deg, #0088cc, #00aaff);
}

.instagram-icon {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.youtube-icon {
  background: linear-gradient(135deg, #ff0000, #cc0000);
}

.social-platform-card h3 {
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: 8px;
  font-weight: 600;
}

.bonus-days {
  font-size: 1rem;
  color: #ffc107;
  font-weight: 700;
  margin-bottom: 16px;
  padding: 6px 12px;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 20px;
  display: inline-block;
}

.status-badge {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-badge.claimed {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.status-badge.pending {
  background: rgba(255, 152, 0, 0.15);
  color: #ff9800;
  border: 1px solid rgba(255, 152, 0, 0.3);
  animation: pendingPulse 1.5s ease-in-out infinite;
}

@keyframes pendingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.btn-social {
  display: inline-block;
  width: 100%;
  padding: 12px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  color: #fff;
  border: none;
  cursor: pointer;
  text-align: center;
}

.telegram-btn {
  background: linear-gradient(135deg, #0088cc, #00aaff);
}

.telegram-btn:hover {
  background: linear-gradient(135deg, #0077bb, #0099ee);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
}

.instagram-btn {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.instagram-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(225, 48, 108, 0.4);
}

.youtube-btn {
  background: linear-gradient(135deg, #ff0000, #cc0000);
}

.youtube-btn:hover {
  background: linear-gradient(135deg, #ee0000, #bb0000);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
}

.confirm-form {
  margin-top: 12px;
}

.btn-confirm {
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-confirm:hover {
  background: linear-gradient(135deg, #45a049, #3d8b40);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.cancel-form {
  margin-top: 8px;
}

.btn-cancel-small {
  padding: 8px 16px;
  background: rgba(244, 67, 54, 0.15);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel-small:hover {
  background: rgba(244, 67, 54, 0.25);
  border-color: rgba(244, 67, 54, 0.5);
}

.social-notice {
  background: rgba(33, 150, 243, 0.1);
  border: 1px solid rgba(33, 150, 243, 0.3);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
}

.social-notice i {
  color: #2196f3;
  font-size: 1.25rem;
  margin-top: 2px;
}

.social-notice p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .social-bonus-section {
    padding: 20px 16px;
    margin-top: 24px;
  }

  .social-bonus-header h2 {
    font-size: 1.3rem;
  }

  .social-bonus-header i {
    font-size: 2.5rem;
  }

  .social-platforms {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .social-platform-card {
    padding: 20px;
  }

  .platform-icon {
    width: 60px;
    height: 60px;
    font-size: 1.75rem;
  }

  .social-notice {
    flex-direction: column;
    padding: 14px 16px;
  }

  .social-notice i {
    font-size: 1.1rem;
  }
}

/* Animation for new section */
.social-bonus-section {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====================================
   Social Confirmation Modal Styles
   ==================================== */

.social-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.social-modal.active {
  opacity: 1;
  visibility: visible;
}

.social-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.social-modal-content {
  position: relative;
  background: linear-gradient(135deg, #1a1f35 0%, #0f1523 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px 32px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.4s ease;
  z-index: 10000;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.social-modal-close {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.1rem;
}

.social-modal-close:hover {
  background: rgba(255, 67, 54, 0.2);
  border-color: rgba(255, 67, 54, 0.4);
  color: #f44336;
  transform: rotate(90deg);
}

.social-modal-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #fff;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
  animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.social-modal-icon i.fa-telegram {
  background: linear-gradient(135deg, #0088cc, #00aaff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.social-modal-icon i.fa-instagram {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.social-modal-icon i.fa-youtube {
  background: linear-gradient(135deg, #ff0000, #cc0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#modalTitle {
  text-align: center;
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 24px;
  font-weight: 700;
}

.social-modal-body {
  text-align: center;
  margin-bottom: 28px;
}

.social-modal-body > p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
  line-height: 1.6;
}

.social-modal-body strong {
  color: #ffc107;
}

.bonus-info {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.bonus-info i {
  color: #ffc107;
  font-size: 1.5rem;
}

.bonus-info span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}

.review-notice {
  background: rgba(33, 150, 243, 0.1);
  border: 1px solid rgba(33, 150, 243, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.review-notice i {
  color: #2196f3;
  font-size: 1.1rem;
}

.review-notice span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
}

.social-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-btn {
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.modal-btn-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-btn-cancel:hover {
  background: rgba(244, 67, 54, 0.15);
  color: #f44336;
  border-color: rgba(244, 67, 54, 0.3);
  transform: translateY(-2px);
}

.modal-btn-confirm {
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: #fff;
  border: 1px solid rgba(76, 175, 80, 0.3);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.modal-btn-confirm:hover {
  background: linear-gradient(135deg, #45a049, #3d8b40);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
}

/* Responsive Modal */
@media (max-width: 768px) {
  .social-modal-content {
    padding: 32px 24px;
    width: 95%;
    max-width: none;
  }

  .social-modal-icon {
    width: 75px;
    height: 75px;
    font-size: 2rem;
    margin-bottom: 20px;
  }

  #modalTitle {
    font-size: 1.3rem;
    margin-bottom: 20px;
  }

  .social-modal-body > p {
    font-size: 1rem;
  }

  .bonus-info {
    padding: 14px 16px;
    flex-direction: column;
    gap: 8px;
  }

  .bonus-info i {
    font-size: 1.3rem;
  }

  .bonus-info span {
    font-size: 0.9rem;
    text-align: center;
  }

  .social-modal-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .modal-btn {
    padding: 12px 20px;
    font-size: 0.95rem;
  }
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* ====================================
   Toast Notification Styles
   ==================================== */

.toast-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-120px);
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(76, 175, 80, 0.4);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10001;
  min-width: 400px;
  max-width: 90%;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.toast-message {
  font-size: 0.9rem;
  opacity: 0.95;
  line-height: 1.4;
}

.toast-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* Toast Responsive */
@media (max-width: 768px) {
  .toast-notification {
    min-width: auto;
    width: 90%;
    padding: 14px 16px;
    gap: 12px;
  }

  .toast-icon {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }

  .toast-title {
    font-size: 1rem;
  }

  .toast-message {
    font-size: 0.85rem;
  }

  .toast-close {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
}