/* TeenChat VIP - UI inspired by dark chat layouts */
:root{
  --tc-bg0:#0b0f17;
  --tc-bg1:#0f1724;
  --tc-panel:#121c2d;
  --tc-panel2:#0f1726;
  --tc-border:rgba(255,255,255,.08);
  --tc-text:#e6ecff;
  --tc-muted:rgba(230,236,255,.72);
  --tc-muted2:rgba(230,236,255,.45);
  --tc-accent:#5bd6ff;
  --tc-vip:#ff4fd8;
  --tc-radius:14px;
}

/* Light mode (toggle via body.tc-light) */
body.tc-light{
  color-scheme: light;
  --tc-bg0:#f6f8ff;
  --tc-bg1:#eef2ff;
  --tc-panel:#ffffff;
  --tc-panel2:#f4f6ff;
  --tc-border:rgba(10,20,40,.10);
  --tc-text:#121a2a;
  --tc-muted:rgba(18,26,42,.70);
  --tc-muted2:rgba(18,26,42,.48);
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--tc-text);
  background: radial-gradient(1200px 700px at 20% 0%, rgba(91,214,255,.15), transparent 55%),
              radial-gradient(1100px 600px at 100% 0%, rgba(255,79,216,.12), transparent 60%),
              linear-gradient(180deg, var(--tc-bg0), var(--tc-bg1));
  min-height:100vh;
}

body.tc-light{
  background: radial-gradient(1200px 700px at 20% 0%, rgba(91,214,255,.18), transparent 55%),
              radial-gradient(1100px 600px at 100% 0%, rgba(255,79,216,.10), transparent 60%),
              linear-gradient(180deg, var(--tc-bg0), var(--tc-bg1));
}

/* Settings modal */
.tc-settings-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:none;
  align-items:flex-start;
  justify-content:flex-end;
  padding:78px 14px 14px;
  z-index: 100050;
}
.tc-settings-modal.is-open{ display:flex; }

.tc-settings-card{
  width: 420px;
  max-width: calc(100vw - 28px);
  background: var(--tc-panel);
  border: 1px solid var(--tc-border);
  border-radius: 16px;
  box-shadow: 0 14px 45px rgba(0,0,0,.35);
  overflow:hidden;
}

.tc-settings-head{
  height:54px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border-bottom:1px solid var(--tc-border);
}
.tc-settings-back{
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:var(--tc-text);
  border-radius:10px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.tc-settings-back svg{ width:18px; height:18px; }
.tc-settings-title{ font-weight:700; font-size:16px; }

.tc-settings-body{ padding: 10px; }
.tc-settings-item{
  width:100%;
  border:0;
  background:transparent;
  color:var(--tc-text);
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 10px;
  border-radius: 12px;
  cursor:pointer;
}
.tc-settings-item:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-settings-item:hover{ background: rgba(10,20,40,.05); }
.tc-settings-ico{
  width:34px;
  height:34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  color: var(--tc-accent);
}
.tc-settings-ico svg{ width:20px; height:20px; }
.tc-settings-txt{ font-size:16px; font-weight:600; }
.tc-settings-right{ margin-left:auto; font-size:13px; color: var(--tc-muted); font-weight:700; }

.tc-app{
  height:100vh;
  display:flex;
  flex-direction:column;
}

.tc-topbar{
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-bottom:1px solid var(--tc-border);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 100000;
}

.tc-top-left, .tc-top-right{
  display:flex;
  position:relative;
  align-items:center;
  gap:10px;
}

.tc-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.2px;
}

.tc-iconbtn{
  position: relative;
  width:40px;height:40px;
  border-radius:10px;
  border:1px solid var(--tc-border);
  background: rgba(255,255,255,.03);
  color:var(--tc-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .08s ease, background .12s ease;
}
.tc-iconbtn svg{ width:18px; height:18px; display:block; }
.tc-iconbtn:hover{ background: rgba(255,255,255,.06); }
.tc-iconbtn:active{ transform: scale(.98); }


/* Left menu (hamburger) */
.tc-leftmenu{
  position: fixed;
  top: 68px;
  left: 14px;
  z-index: 100001;
  display:none;
}
.tc-leftmenu.is-open{ display:block; }

.tc-leftmenu-card{
  width: 340px;
  max-width: calc(100vw - 28px);
  border-radius: 16px;
  background: var(--tc-panel);
  border:1px solid var(--tc-border);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow:hidden;
}

.tc-leftmenu-head{
  padding:16px;
  border-bottom:1px solid var(--tc-border);
}

.tc-leftmenu-room{
  display:flex;
  align-items:center;
  gap:12px;
}
.tc-leftmenu-room-ico{
  width:44px;
  height:44px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--tc-border);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.9);
}
.tc-leftmenu-room-ico svg{ width:22px; height:22px; display:block; }

.tc-leftmenu-room-meta{ min-width:0; }
.tc-leftmenu-room-label{
  font-size:12px;
  color: var(--tc-muted);
  font-weight:700;
  margin-bottom:2px;
}
.tc-leftmenu-room-name{
  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tc-leftmenu-items{ padding: 6px 0; }
.tc-leftmenu-item{
  width:100%;
  border:0;
  background: transparent;
  color: var(--tc-text);
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  font-weight:700;
}
.tc-leftmenu-item + .tc-leftmenu-item{ border-top:1px solid rgba(255,255,255,.04); }
.tc-leftmenu-item:hover{ background: rgba(255,255,255,.05); }

.tc-leftmenu-ico{
  width:32px;
  height:32px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--tc-accent);
  flex: 0 0 auto;
}
.tc-leftmenu-ico svg{ width:20px; height:20px; display:block; }
.tc-leftmenu-txt{ flex:1; text-align:left; }

.tc-leftmenu-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ff4d4d;
  box-shadow:0 0 0 3px rgba(255,77,77,.18);
  flex: 0 0 auto;
}

/* Light theme adjustments */
body.tc-light .tc-leftmenu-card{ box-shadow: 0 18px 50px rgba(0,0,0,.18); }
body.tc-light .tc-leftmenu-room-ico{ background: rgba(10,20,40,.03); color: rgba(10,20,40,.85); }
body.tc-light .tc-leftmenu-item + .tc-leftmenu-item{ border-top-color: rgba(10,20,40,.06); }
body.tc-light .tc-leftmenu-item:hover{ background: rgba(10,20,40,.05); }

/* Top-right user avatar button (userbar) */
.tc-me-btn{
  width:44px;
  height:44px;
  border-radius: 999px;
  padding:0;
  overflow:hidden;
}
.tc-me-avatar{ position:absolute; inset:0; display:block; }
.tc-me-avatar img{ width:100%; height:100%; object-fit:cover; display:block;   border-radius:999px;
}
.tc-me-online{
  position:absolute;
  right:6px;
  bottom:6px;
  width:14px;
  height:14px;
  border-radius:999px;
  background:#34c759;
  box-shadow:0 0 0 2px rgba(11,15,23,.85);
}

.tc-me-avatar .tc-verified-badge{
  left:6px;
  bottom:6px;
}
.tc-me-online::after{
  content:"";
  position:absolute;
  left:4px;
  top:3px;
  width:5px;
  height:3px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform: rotate(-45deg);
}

.tc-main{
  flex:1;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:0;
  min-height:0; /* allow scrolling children */
}

.tc-chat{
  position:relative;
  border-right:1px solid var(--tc-border);
  min-height:0;
}

.tc-chat-bg{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity:.35;
  pointer-events:none;
}

.tc-messages{
  position:absolute; inset:0;
  padding:18px 18px 130px 18px;
  overflow:auto;
  scroll-behavior:smooth;
}

.tc-msg{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  transition: background .12s ease;
}
.tc-msg:hover{ background: rgba(255,255,255,.03); }

.tc-avatar{
	position: relative;
  width:40px;height:40px;border-radius:999px;
  flex:0 0 auto;
  background: rgba(255,255,255,.06);
  border:1px solid var(--tc-border);
  overflow:hidden;
}
.tc-avatar img{ width:100%;height:100%;object-fit:cover;display:block; }

/* Verified/VIP badge (green check) */
.tc-verified-badge{
  position:absolute;
  left:-1px;
  bottom:-1px;
  width:12px;
  height:12px;
  border-radius:999px;
  background:#27c46a;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1.5px rgba(15,23,36,.9);
  color:#fff;
}
.tc-verified-badge svg{ width:8px;height:8px; display:block; }

.tc-msg-body{ flex:1; min-width:0; }
.tc-msg-top{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 4px 0;
  min-width:0;
}
.tc-name{
  font-weight:700;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 220px;
}
.tc-badge{
  font-size:11px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  letter-spacing:.4px;
}
.tc-badge-vip{
  border-color: rgba(255,79,216,.55);
  background: rgba(255,79,216,.14);
  color: #ffd6f3;
}

.tc-time{
  margin-left:auto;
  font-size:12px;
  opacity:.55;
}

.tc-text{
  font-size:14px;
  line-height:1.45;
  opacity:.95;
  word-wrap:break-word;
  overflow-wrap:anywhere;
}

.tc-composer{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px 14px;
  background: linear-gradient(180deg, rgba(15,23,36,0), rgba(15,23,36,.82) 40%, rgba(15,23,36,.96));
  border-top:1px solid var(--tc-border);
  backdrop-filter: blur(10px);
}

/* Light theme: keep composer clean (no dark overlay) */
body.tc-light .tc-composer{
  background: linear-gradient(180deg,
              rgba(246,248,255,0),
              rgba(246,248,255,.88) 45%,
              rgba(246,248,255,.98));
  backdrop-filter: blur(8px);
}

body.tc-light .tc-input{
  background: rgba(10,20,40,.03);
}

body.tc-light .tc-input::placeholder{
  color: rgba(18,26,42,.45);
}

.tc-compose-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.tc-input{
  flex:1;
  height:44px;
  border-radius:12px;
  border:1px solid var(--tc-border);
  background: rgba(255,255,255,.04);
  color:var(--tc-text);
  padding:0 12px;
  outline:none;
}
.tc-input::placeholder{ color: rgba(230,236,255,.45); }
.tc-input:focus{ border-color: rgba(91,214,255,.35); box-shadow: 0 0 0 3px rgba(91,214,255,.12); }

.tc-send{
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(91,214,255,.35);
  background: rgba(91,214,255,.14);
  color: var(--tc-text);
  cursor:pointer;
  font-weight:800;
}
.tc-send:hover{ background: rgba(91,214,255,.18); }
.tc-send:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.tc-meta-row{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-size:12px;
  color: var(--tc-muted2);
}

.tc-room{
  display:flex;
  gap:8px;
  align-items:center;
}

.tc-select{
  height:32px;
  border-radius:10px;
  border:1px solid var(--tc-border);
  background: rgba(255,255,255,.03);
  color:var(--tc-text);
  padding:0 10px;
  outline:none;
}

.tc-side{
  min-height:0;
  background: rgba(255,255,255,.02);
}
.tc-side-header{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-bottom:1px solid var(--tc-border);
}
.tc-side-title{
  font-weight:800;
  opacity:.9;
}
.tc-side-icons{
  display:flex;
  gap:8px;
  position: relative;
  z-index: 2;
}

/* Right panel search (Online / Friends) */
.tc-side-searchwrap{
  position:absolute;
  left:10px;
  right:10px;
  top:8px;
  bottom:8px;
  display:none;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,14,22,.92);
  box-shadow: 0 10px 28px rgba(0,0,0,.30);
  z-index: 3;
}
.tc-side-searchwrap.is-open{ display:flex; }

.tc-side-search{
  flex:1;
  height:32px;
  border:0;
  outline:none;
  background: transparent;
  color: var(--tc-text);
  font-size: 13px;
}
.tc-side-search::placeholder{ color: rgba(255,255,255,.55); }

.tc-side-searchx{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--tc-text);
  cursor:pointer;
  line-height: 30px;
  font-size: 18px;
}
.tc-side-searchx:hover{
  background: rgba(255,255,255,.08);
}
.tc-side-list{
  padding:10px;
  overflow:auto;
  height:calc(100vh - 58px - 52px);
}
.tc-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
}

.tc-user-badge{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  color: var(--tc-muted2);
}
.tc-user-badge svg{ width:18px;height:18px; display:block; }
.tc-user-badge.is-vip{ color: var(--tc-accent); }

.tc-user-badge.is-vip{
  width:auto;
  padding:0 6px;
}
.tc-user-badge .tc-vip-txt{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.6px;
  line-height:1;
}

body.tc-light .tc-user-badge{ color: rgba(18,26,42,.45); }
body.tc-light .tc-user-badge.is-vip{ color: #2c7dff; }
.tc-user:hover{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.05);
}
.tc-user .tc-name{ max-width: 170px; }
.tc-dot{
  width:8px;height:8px;border-radius:50%;
  background: #37ff7a;
  box-shadow: 0 0 0 3px rgba(55,255,122,.12);
}

.tc-dot.is-off{
  background: rgba(255,255,255,.28);
  box-shadow: none;
}

.tc-side-empty{
  padding:18px 10px;
  text-align:center;
  color: var(--tc-muted);
  font-size:13px;
}

.tc-iconbtn.is-active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.tc-alert{
  margin:12px 14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size:13px;
  color: var(--tc-muted);
}

.tc-card{
  border-radius: var(--tc-radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,14,22,.55);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}


/* Hide mobile users toggle on desktop */
.tc-users-toggle, .tc-users-overlay{ display:none; }

@media (max-width: 980px){
  .tc-main{ grid-template-columns: 1fr; }
  .tc-chat{ border-right:none; }
  .tc-side{
    display:block;
    position:fixed;
    top:58px;
    right:0;
    bottom:0;
    width:320px;
    max-width:86vw;
    z-index: 120;
    border-left:1px solid var(--tc-border);
    background: rgba(10,14,22,.96);
    backdrop-filter: blur(10px);
    transform: translateX(110%);
    transition: transform .22s ease;
  }
  body.tc-users-open .tc-side{ transform: translateX(0); }

  /* Mobile users toggle (bottom-right) */
  .tc-users-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    right:14px;
    bottom:80px;
    width:44px;
    height:44px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(15,23,36,.92);
    color: var(--tc-text);
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
    z-index: 130;
    cursor:pointer;
  }
  .tc-users-toggle svg{ width:22px; height:22px; display:block; }

  .tc-users-overlay{
    display:block;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transition: opacity .18s ease;
    z-index: 110;
  }
  body.tc-users-open .tc-users-overlay{
    opacity:1;
    pointer-events:auto;
  }

}


/* Emoji picker (composer) */
.tc-emoji-wrap{ position:relative; }
.tc-emoji-btn{ width:44px; height:44px; padding:0; }
.tc-emoji-picker{
  position:absolute;
  left:0;
  bottom:52px;
  width:260px;
  max-height:220px;
  /* Prevent horizontal overflow + use new styled scrollbar */
  overflow-y:auto;
  overflow-x:hidden;
  box-sizing:border-box;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06);
  display:none;
  grid-template-columns: repeat(8, 1fr);
  gap:6px;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--tc-border);
  background: rgba(15,23,36,.98);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  z-index: 50;
}

/* Emoji picker scrollbar (Chrome/Edge/Safari) */
.tc-emoji-picker::-webkit-scrollbar{ width: 10px; height: 10px; }
.tc-emoji-picker::-webkit-scrollbar-track{ background: transparent; }
.tc-emoji-picker::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.tc-emoji-picker::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.34);
  background-clip: padding-box;
}
.tc-emoji-picker::-webkit-scrollbar-corner{ background: transparent; }

/* Light theme emoji picker scrollbar */
body.tc-light .tc-emoji-picker{
  scrollbar-color: rgba(0,0,0,.25) rgba(0,0,0,.08);
}
body.tc-light .tc-emoji-picker::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.22);
  border: 3px solid rgba(255,255,255,0);
  background-clip: padding-box;
}
body.tc-light .tc-emoji-picker::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,.35);
  background-clip: padding-box;
}
.tc-emoji-picker.is-open{ display:grid; }
.tc-emoji-item{
  width:100%;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  color: var(--tc-text);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tc-emoji-item:hover{ background: rgba(255,255,255,.07); }

/* + button and media picker (GIFs / Stickers) */
.tc-plus-wrap{ position:relative; }
.tc-plus-btn{
  width:44px;
  height:44px;
  font-size:22px;
  font-weight:900;
  line-height:1;
}

.tc-plus-menu{
  position:absolute;
  left:0;
  bottom:52px;
  min-width: auto;
  padding:8px;
  border-radius:14px;
  border:1px solid var(--tc-border);
  background: rgba(15,23,36,.98);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  display:none;
  flex-direction:row;
  gap:10px;
  z-index: 60;
}
.tc-plus-menu.is-open{ display:flex; }

.tc-plus-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:44px;
  height:44px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--tc-text);
  cursor:pointer;
  font-weight:800;
}
.tc-plus-item:hover{ background: rgba(255,255,255,.07); }

.tc-plus-icon{
  width:32px;
  height:32px;
  border-radius:10px;
  border:none;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.tc-plus-icon svg{ width:30px; height:30px; }
.tc-plus-label{ display:none; }

.tc-media-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  /* Keep above the private chat modal (.tc-pm-modal uses z-index: 99999) */
  z-index: 100005;
}
.tc-media-modal.is-open{ display:flex; }

.tc-media-card{
  width: min(920px, 96vw);
  height: min(760px, 88vh);
  max-height: min(760px, 88vh);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}

.tc-media-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  border-bottom:1px solid rgba(0,0,0,.10);
  background:#fff;
}

.tc-media-tabs{
  display:flex;
  gap:8px;
}

.tc-media-tab{
  padding:8px 12px;
  border-radius: 10px;
  border:1px solid rgba(0,0,0,.12);
  background: #f6f7f9;
  color: #111;
  cursor:pointer;
  font-weight:800;
}
.tc-media-tab:hover{ background: #eef1f5; }
.tc-media-tab.is-active{
  background: #111;
  border-color: #111;
  color: #fff;
}

.tc-media-close{
  width:40px;
  height:40px;
  border-radius: 10px;
  border:1px solid rgba(0,0,0,.12);
  background: #f6f7f9;
  color: #111;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.tc-media-close:hover{ background: #eef1f5; }

.tc-media-search{
  padding:12px;
  border-bottom:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.tc-media-input{
  width:100%;
  height:44px;
  border-radius: 10px;
  border:1px solid rgba(0,0,0,.16);
  background:#fff;
  color:#111;
  padding:0 14px;
  outline:none;
}
.tc-media-input:focus{
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.tc-media-input:focus{ border-color: rgba(91,214,255,.35); box-shadow: 0 0 0 3px rgba(91,214,255,.12); }

.tc-media-grid{
  padding:12px;
  overflow:auto;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  flex: 1;
  min-height: 0;
  align-content:start;
}
@media (max-width: 640px){
  .tc-media-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 420px){
  .tc-media-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.tc-media-item{
  border:1px solid rgba(0,0,0,.10);
  background: #f6f7f9;
  border-radius: 12px;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer;
  overflow:hidden !important;
  position:relative !important;
  display:block !important;
  width:100% !important;
  line-height:0 !important;
  min-height:0 !important;
  aspect-ratio: 1 / 1 !important;
}
.tc-media-item:hover{ filter: brightness(0.98); }
.tc-media-item::before,
.tc-media-item::after{
  content:none !important;
  display:none !important;
}
@supports not (aspect-ratio: 1 / 1){
  .tc-media-item{ position:relative !important; }
  .tc-media-item::before{ content:""; display:block; padding-top:100%; pointer-events:none; }
}

/* Hard reset: prevent any theme/plugin pseudo-elements from overlaying tiles */
.tc-media-item::before,
.tc-media-item::after{
  content:none !important;
  display:none !important;
}

/* Fallback for very old browsers (avoid double-height in modern browsers) */
@supports not (aspect-ratio: 1 / 1){
  .tc-media-item{ position:relative !important; }
  .tc-media-item::before{
    content:"";
    display:block;
    padding-top:100%;
    pointer-events:none;
  }
}

.tc-media-item img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  display:block !important;
}


/* GIFs: square tiles (cover) */
.tc-media-grid[data-type="gifs"] .tc-media-item img{
  object-fit: cover !important;
}

/* Stickers should look like stickers (no GIF-style cropping) */
.tc-media-grid[data-type="stickers"] .tc-media-item img{
  object-fit: contain !important;
  padding: 8px !important;
  background: transparent;
}
/* Hardening: ensure the media grid is always a real grid layout */
#tcMediaGrid.tc-media-grid{
  display:grid;
  gap:10px;
  align-content:start;
}

/* Visual spacing + boxed tiles (prevents any theme/plugin overrides collapsing gaps) */
.tc-media-card #tcMediaGrid.tc-media-grid{
  padding:12px !important;
  gap:12px !important;
}
.tc-media-card #tcMediaGrid.tc-media-grid .tc-media-item{
  border-radius:14px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  background: #f6f7f9 !important;
}

.tc-media-loading{
  padding:16px;
  color: rgba(0,0,0,.55);
  text-align:center;
  grid-column: 1 / -1;
}


.tc-media-more{
  padding: 0 12px 12px;
  display:flex;
  justify-content:center;
}
.tc-media-more[aria-hidden="true"]{ display:none !important; }

.tc-media-more-btn{
  border:1px solid rgba(0,0,0,.16);
  background: #f6f7f9;
  color: #111;
  border-radius: 10px;
  padding: 10px 14px;
  cursor:pointer;
  font-weight:600;
}
.tc-media-more-btn:hover{ background:#eef1f5; }
.tc-media-img{
  max-width: 260px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  display:block;
}

/* Viewer modal (when clicking a posted GIF/Sticker) */
.tc-viewer-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(6px);
  /* Keep above the private chat modal (.tc-pm-modal uses z-index: 99999) */
  z-index: 100006;
}
.tc-viewer-modal.is-open{ display:flex; }

.tc-viewer-card{
  width: min(700px, 94vw);
  height: min(560px, 86vh);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(0,0,0,.40);
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tc-viewer-close{
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  border-radius: 12px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(246,247,249,.95);
  color: #111;
  cursor:pointer;
  font-size: 24px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tc-viewer-close:hover{ background:#eef1f5; }

.tc-viewer-body{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.tc-viewer-img{
  max-width: 100%;
  max-height: 100%;
  width:auto;
  height:auto;
  border-radius: 14px;
  display:block;
  background: transparent;
}


/* User card / profile popup */
.tc-user{ cursor:pointer; }
.tc-userlink{ cursor:pointer; }

.tc-user-popover{
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 10020;
  display: none;
}
.tc-user-popover.is-open{ display:block; }

.tc-usercard{
  width: 280px;
  position: relative;
  border-radius: 14px;
  background: rgba(15,20,30,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  padding: 12px;
  color: #fff;
  backdrop-filter: blur(8px);
}

.tc-usercard-loading{
  text-align:center;
  font-weight: 700;
  padding: 18px 12px;
  color: rgba(255,255,255,.80);
}

.tc-usercard-x{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor:pointer;
  font-size: 20px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tc-usercard-x:hover{ background: rgba(255,255,255,.10); }

.tc-usercard-head{
  display:flex;
  gap: 10px;
  align-items:center;
  padding-right: 36px;
}
.tc-usercard-avatar{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}
.tc-usercard-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.tc-usercard-main{ min-width:0; }
.tc-usercard-name{
  font-weight: 900;
  font-size: 15px;
  display:flex;
  gap: 8px;
  align-items:center;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.tc-usercard-vip{
  font-size: 11px;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 999px;
  color: #121212;
}

.tc-usercard-meta{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  gap: 8px;
}
.tc-usercard-flag{ font-size: 16px; }

.tc-usercard-actions{
  display:flex;
  gap: 8px;
  margin-top: 12px;
}

/* Icons in the 3 main user-card action buttons */
.tc-usercard-actions .tc-usercard-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.tc-ucbtn-ico{
  width: 16px;
  height: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 16px;
}
.tc-ucbtn-ico svg{
  width: 16px;
  height: 16px;
  display:block;
}

/* Accent colors for the 3 main user-card action icons */
.tc-usercard-view .tc-ucbtn-ico{ color: rgba(255,255,255,.85); }
.tc-usercard-private .tc-ucbtn-ico{ color: #5aaaff; }
.tc-usercard-action .tc-ucbtn-ico{ color: #ff5d7a; }

body.tc-light .tc-usercard-view .tc-ucbtn-ico{ color: rgba(18,26,42,.85); }
body.tc-light .tc-usercard-private .tc-ucbtn-ico{ color: #2c7dff; }
body.tc-light .tc-usercard-action .tc-ucbtn-ico{ color: #e1415f; }
.tc-usercard-btn{
  flex: 1 1 auto;
  text-align:center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 10px 10px;
  font-weight: 800;
  cursor:pointer;
  text-decoration:none;
  font-size: 13px;
}
.tc-usercard-btn:hover{ background: rgba(255,255,255,.10); }

.tc-usercard-menu{
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.tc-usercard-menu[aria-hidden="true"]{ display:none; }
.tc-usercard-menuitem{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  padding: 10px 12px;
  font-weight: 800;
  cursor:pointer;
  font-size: 13px;
  text-align:left;
}
.tc-usercard-menuitem:hover{ background: rgba(255,255,255,.10); }

.tc-usercard-menuitem.is-muted{ opacity: .65; }

.tc-usercard-mi-ico{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 18px;
  color: rgba(255,255,255,.90);
}
.tc-usercard-mi-ico svg{
  width: 18px;
  height: 18px;
  display:block;
}
.tc-usercard-mi-txt{ flex: 1 1 auto; }

.tc-usercard-menuitem.is-danger .tc-usercard-mi-ico{ color: rgba(255,110,110,.95); }
.tc-usercard-menuitem.is-warn .tc-usercard-mi-ico{ color: rgba(255,200,120,.95); }




/* User card light mode */
body.tc-light .tc-usercard{
  background: var(--tc-panel);
  border-color: var(--tc-border);
  color: var(--tc-text);
  box-shadow: 0 18px 60px rgba(10,20,40,.20);
}
body.tc-light .tc-usercard-loading{ color: var(--tc-muted); }
body.tc-light .tc-usercard-meta{ color: var(--tc-muted); }
body.tc-light .tc-usercard-x{
  border-color: var(--tc-border);
  background: rgba(10,20,40,.04);
  color: var(--tc-text);
}
body.tc-light .tc-usercard-x:hover{ background: rgba(10,20,40,.08); }
body.tc-light .tc-usercard-avatar{ border-color: var(--tc-border); }
body.tc-light .tc-usercard-btn{
  border-color: var(--tc-border);
  background: rgba(10,20,40,.04);
  color: var(--tc-text);
}
body.tc-light .tc-usercard-btn:hover{ background: rgba(10,20,40,.08); }
body.tc-light .tc-usercard-menu{ border-top-color: var(--tc-border); }
body.tc-light .tc-usercard-menuitem{
  border-color: var(--tc-border);
  background: rgba(10,20,40,.04);
  color: var(--tc-text);
}
body.tc-light .tc-usercard-menuitem:hover{ background: rgba(10,20,40,.08); }
body.tc-light .tc-usercard-mi-ico{ color: var(--tc-text); }


/* Username color modal */
.tc-namecolor-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 100060;
}
.tc-namecolor-modal.is-open{ display:flex; }

.tc-namecolor-card{
  width: 420px;
  max-width: calc(100vw - 28px);
  border-radius: 16px;
  background: var(--tc-panel);
  border: 1px solid var(--tc-border);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  color: var(--tc-text);
  overflow:hidden;
}

.tc-namecolor-head{
  padding: 14px 18px 8px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-namecolor-title{
  font-size:16px;
  font-weight:700;
}
.tc-namecolor-sub{
  margin-top:2px;
  font-size:12px;
  color: var(--tc-muted2);
}

.tc-namecolor-grid{
  padding: 16px 18px 6px;
  display:grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  gap:6px;
}

.tc-namecolor-swatch{
  position:relative;
  width:100%;
  padding-bottom:70%;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.38);
  background:transparent;
  cursor:pointer;
  overflow:hidden;
}
.tc-namecolor-swatch-inner{
  position:absolute;
  inset:0;
}
.tc-namecolor-swatch.is-active{
  box-shadow:0 0 0 2px #ffffff;
}
body.tc-light .tc-namecolor-swatch{
  border-color: rgba(0,0,0,.14);
}
body.tc-light .tc-namecolor-swatch.is-active{
  box-shadow:0 0 0 2px rgba(18,26,42,.85);
}

.tc-namecolor-preview{
  padding: 4px 18px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color: var(--tc-muted);
}
.tc-namecolor-preview-sample{
  font-weight:700;
}

.tc-namecolor-foot{
  padding: 0 18px 16px 18px;
}
.tc-namecolor-foot .tc-namecolor-save{
  width:100%;
  margin-top:2px;
}

/* Make Save button visible in both themes */
.tc-namecolor-save{
  border: 0;
  background: var(--tc-accent);
  color: #081018;
  box-shadow: 0 10px 26px rgba(91,214,255,.22);
}
.tc-namecolor-save:hover{ filter: brightness(.96); }
.tc-namecolor-save:active{ transform: scale(.99); }
body.tc-light .tc-namecolor-save{ box-shadow: 0 10px 22px rgba(10,20,40,.10); }
/* Profile modal (opens when clicking "View profile" from the user card) */

/* Rooms list modal */
.tc-rooms-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 99992;
}
.tc-rooms-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.tc-rooms-card{
  width: min(640px, calc(100vw - 24px));
  max-height: min(78vh, 720px);
  overflow: hidden;
  background: var(--tc-panel);
  border: 1px solid var(--tc-border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  color: var(--tc-text);
}
.tc-rooms-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-rooms-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
}

.tc-rooms-actions{ display:flex; align-items:center; gap:10px; }
.tc-rooms-create{
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.04);
  color: var(--tc-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .2px;
}
body.tc-light .tc-rooms-create{ background: rgba(17,24,39,.03); }
.tc-rooms-create:hover{ background: rgba(255,255,255,.08); }
body.tc-light .tc-rooms-create:hover{ background: rgba(17,24,39,.06); }
.tc-rooms-create-ico{ color: var(--tc-accent); font-size: 18px; line-height: 1; display:flex; align-items:center; justify-content:center; }
.tc-rooms-create-txt{ font-size: 13px; }

.tc-roomcreate-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  z-index: 99999;
}
body.tc-light .tc-roomcreate-modal{ background: rgba(0,0,0,.35); }
.tc-roomcreate-modal.is-open{ display: flex; }
.tc-roomcreate-card{
  width: 520px;
  max-width: 92vw;
  border-radius: 18px;
  border: 1px solid var(--tc-border);
  /* Use theme panel color (tc-card is not defined, which made this transparent) */
  background: var(--tc-panel);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  overflow: hidden;
}
.tc-roomcreate-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-roomcreate-title{ font-size: 18px; font-weight: 900; letter-spacing: .2px; }
.tc-roomcreate-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-text);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tc-roomcreate-close:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-roomcreate-close:hover{ background: rgba(17,24,39,.06); }

.tc-roomcreate-body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tc-roomcreate-label{ font-size: 12px; font-weight: 800; opacity: .85; }
.tc-roomcreate-input,
.tc-roomcreate-textarea{
  width: 100%;
  border: 1px solid var(--tc-border);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: var(--tc-text);
  padding: 12px 12px;
  outline: none;
}
body.tc-light .tc-roomcreate-input,
body.tc-light .tc-roomcreate-textarea{ background: rgba(17,24,39,.03); }
.tc-roomcreate-textarea{ min-height: 82px; resize: vertical; }
.tc-roomcreate-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 2px; }
.tc-roomcreate-cancel,
.tc-roomcreate-save{
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .2px;
}
.tc-roomcreate-cancel{ background: transparent; color: var(--tc-text); }
.tc-roomcreate-cancel:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-roomcreate-cancel:hover{ background: rgba(17,24,39,.06); }
.tc-roomcreate-save{
  background: var(--tc-accent);
  border-color: rgba(0,0,0,0);
  color: #0b1220;
}
.tc-roomcreate-save:disabled{ opacity: .7; cursor: not-allowed; }
.tc-roomcreate-note{ font-size: 12px; opacity: .7; margin-top: 2px; }

.tc-rooms-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-text);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tc-rooms-close:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-rooms-close:hover{ background: rgba(17,24,39,.06); }

.tc-rooms-body{
  padding: 10px 16px;
  overflow: auto;
  max-height: calc(78vh - 60px);
}
.tc-rooms-search{ margin-bottom: 14px; }
.tc-rooms-input{
  width: 100%;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.03);
  color: var(--tc-text);
  outline: none;
  font-size: 16px;
}
body.tc-light .tc-rooms-input{ background: rgba(17,24,39,.03); }
.tc-rooms-input::placeholder{ opacity: .6; }

.tc-rooms-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tc-rooms-item{
  display: flex;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
body.tc-light .tc-rooms-item{ background: rgba(17,24,39,.02); }
.tc-rooms-item:hover{
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
}
body.tc-light .tc-rooms-item:hover{ background: rgba(17,24,39,.05); }

.tc-rooms-item.is-disabled{ opacity: .55; cursor: not-allowed; }

.tc-rooms-ico{
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(59,130,246,.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.tc-light .tc-rooms-ico{ background: rgba(59,130,246,.10); }
.tc-rooms-ico svg{ width: 34px; height: 34px; color: #7aa7ff; }

.tc-rooms-meta{ flex: 1; min-width: 0; }
.tc-rooms-name{ font-size: 18px; font-weight: 800; margin-top: 2px; }
.tc-rooms-desc{ margin-top: 4px; font-size: 13px; opacity: .85; line-height: 1.35; }

.tc-rooms-foot{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tc-rooms-badges{ display: flex; gap: 6px; }
.tc-rooms-badge{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.tc-rooms-badge svg{ width: 11px; height: 11px; }
.tc-rooms-badge.is-blue{ background: #2563eb; }
.tc-rooms-badge.is-green{ background: #16a34a; }
.tc-rooms-badge.is-vip{ background: #a855f7; }

.tc-rooms-count{
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  opacity: .9;
  white-space: nowrap;
}
.tc-rooms-count svg{ width: 16px; height: 16px; opacity: .85; }


.tc-rooms-del{
  margin-left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.tc-rooms-del svg{ width:16px; height:16px; opacity:.9; }
.tc-rooms-del:hover{
  background: rgba(255,255,255,.06);
  color: var(--tc-text);
}
.tc-light .tc-rooms-del:hover{
  background: rgba(0,0,0,.05);
}


.tc-profile-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(6px);
  z-index: 10040;
}
.tc-profile-modal.is-open{ display:flex; }

/* Chat text modal extras */
.tc-textstyle-preview{
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-textstyle-preview-label{
  font-size:12px;
  font-weight:700;
  color: var(--tc-muted2);
}
.tc-textstyle-preview-sample{
  margin-top:6px;
  font-size:14px;
  line-height:1.35;
  font-weight:700;
}

.tc-textstyle-field{
  padding: 12px 18px 14px;
}
.tc-textstyle-label{
  font-size:12px;
  font-weight:700;
  color: var(--tc-muted2);
  margin-bottom:6px;
}
.tc-textstyle-select.tc-select{
  width:100%;
  height:38px;
  background: rgba(255,255,255,.05);
}
body.tc-light .tc-textstyle-select.tc-select{
  background: rgba(0,0,0,.04);
}

/* Native <select> dropdown should stay readable in dark theme */
body:not(.tc-light) .tc-textstyle-select.tc-select{
  color-scheme: dark;
}
body:not(.tc-light) .tc-textstyle-select.tc-select option{
  background: rgba(15,20,30,.98);
  color: #fff;
}

/* Ensure light theme stays readable as well */
body.tc-light .tc-textstyle-select.tc-select{
  color-scheme: light;
}
body.tc-light .tc-textstyle-select.tc-select option{
  background: #fff;
  color: #111;
}



/* Sounds modal */
.tc-sounds-card{
  width: 520px;
  max-width: calc(100vw - 28px);
}
.tc-sounds-head{
  padding: 14px 18px;
  border-bottom: 1px solid var(--tc-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.tc-sounds-title{
  font-size:16px;
  font-weight:800;
}
.tc-sounds-close{
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tc-muted2);
  cursor:pointer;
  font-size: 22px;
  line-height: 1;
}
.tc-sounds-close:hover{ background: rgba(255,255,255,.06); color: var(--tc-text); }
body.tc-light .tc-sounds-close:hover{ background: rgba(0,0,0,.06); }

.tc-sounds-body{ padding: 10px 18px 16px; }
.tc-sounds-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 0;
  border-top: 1px solid var(--tc-border);
}
.tc-sounds-row:first-child{ border-top: 0; }
.tc-sounds-label{
  font-size: 14px;
  font-weight: 650;
  color: var(--tc-text);
}

/* Toggle switch */
.tc-toggle{
  position:relative;
  display:inline-block;
  width: 52px;
  height: 28px;
}
.tc-toggle input{
  opacity:0;
  width:0;
  height:0;
}
.tc-toggle-slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--tc-border);
  transition: .18s ease;
}
body.tc-light .tc-toggle-slider{
  background: rgba(0,0,0,.10);
}
.tc-toggle-slider:before{
  content:'';
  position:absolute;
  left:3px;
  top:3px;
  width: 22px;
  height: 22px;
  border-radius:999px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  transition: .18s ease;
}
.tc-toggle input:checked + .tc-toggle-slider{
  background: #7dbb1f;
  border-color: rgba(0,0,0,.12);
}
.tc-toggle input:checked + .tc-toggle-slider:before{
  transform: translateX(24px);
}
.tc-toggle input:focus + .tc-toggle-slider{
  box-shadow: 0 0 0 3px rgba(125,187,31,.25);
}



.tc-profile-card{
  /* Slightly smaller than before */
  width: min(640px, 92vw);
  height: min(680px, 90vh);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,20,30,.96);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}

.tc-profile-close{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor:pointer;
  font-size: 24px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 2;
}
.tc-profile-close:hover{ background: rgba(255,255,255,.10); }

/* Profile header action icons (report flag + menu) */
.tc-profile-report,
.tc-profile-menu{
  position:absolute;
  top:12px;
  width:44px;
  height:44px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 2;
}
.tc-profile-menu{ right:62px; }
.tc-profile-report{ right:112px; }
.tc-profile-report:hover,
.tc-profile-menu:hover{ background: rgba(255,255,255,.10); }
.tc-profile-report svg,
.tc-profile-menu svg{
  width: 22px;
  height: 22px;
  display:block;
}

.tc-profile-actions{
  position:absolute;
  top:62px;
  right:12px;
  width: 220px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,20,30,.98);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  z-index: 3;
}
.tc-profile-actions[aria-hidden="true"]{ display:none; }
.tc-profile-actions .tc-usercard-menu{ margin-top: 0; border-top: 0; padding-top: 0; }

.tc-profile-inner{
  width:100%;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter: stable;
  /* Match new modal scrollbar styling (avoid bright native scrollbar) */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06);
}

/* Profile modal scrollbar (Chrome/Edge/Safari) */
.tc-profile-inner::-webkit-scrollbar{
  width: 10px;
}
.tc-profile-inner::-webkit-scrollbar-track{
  background: transparent;
}
.tc-profile-inner::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.tc-profile-inner::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.34);
  background-clip: padding-box;
}

/* Light theme scrollbar */
body.tc-light .tc-profile-inner{
  scrollbar-color: rgba(0,0,0,.25) rgba(0,0,0,.08);
}
body.tc-light .tc-profile-inner::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.22);
  border: 3px solid rgba(255,255,255,0);
  background-clip: padding-box;
}
body.tc-light .tc-profile-inner::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,.35);
  background-clip: padding-box;
}

.tc-profile-loading{
  padding:26px 18px;
  text-align:center;
  color: rgba(255,255,255,.80);
  font-weight: 800;
}

.tc-profile-cover{
  height: 230px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 400px at 30% 15%, rgba(91,214,255,.35), transparent 55%),
    radial-gradient(900px 420px at 70% 10%, rgba(255,79,216,.32), transparent 55%),
    linear-gradient(135deg, rgba(20,28,40,1), rgba(10,12,18,1));
}
.tc-profile-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.65));
}

.tc-profile-hero{
  position:absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  text-align:center;
  z-index: 1;
  width: min(720px, 92%);
}

.tc-profile-avatar{
	position: relative;
  width: 108px;
  height: 108px;
  border-radius: 999px;
  border: 4px solid rgba(15,20,30,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
  margin: 0 auto 10px;
  background: rgba(255,255,255,.06);
}

.tc-profile-avatar .tc-verified-badge{
  left:4px;
  bottom:4px;
}
.tc-profile-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.tc-profile-name{
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-shadow: 0 10px 28px rgba(0,0,0,.60);
}

.tc-profile-badge{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  color: #121212;
  background: #ff4fd8;
}

.tc-profile-tagline{
  margin-top: 6px;
  color: rgba(255,255,255,.85);
  font-weight: 700;
  text-shadow: 0 10px 28px rgba(0,0,0,.60);
}

.tc-profile-tabs{
  display:flex;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.tc-profile-tab{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 9px 13px;
  cursor:pointer;
  font-weight: 900;
}
.tc-profile-tab:hover{ background: rgba(255,255,255,.10); }
.tc-profile-tab.is-active{
  background: rgba(91,214,255,.16);
  border-color: rgba(91,214,255,.30);
  color: #fff;
}

.tc-profile-body{ padding: 8px 0; }

.tc-profile-panel{ display:none; }
.tc-profile-panel.is-active{ display:block; }

.tc-profile-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tc-profile-k{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.78);
  font-weight: 800;
}
.tc-profile-k svg{ width: 18px; height: 18px; opacity:.95; }
.tc-profile-v{ color: rgba(255,255,255,.95); font-weight: 900; }

.tc-profile-about{
  padding: 16px;
  color: rgba(255,255,255,.90);
  line-height: 1.55;
  font-weight: 700;
}
.tc-profile-about em{ opacity:.85; }

.tc-profile-gifts{
  padding: 16px;
  color: rgba(255,255,255,.82);
  font-weight: 700;
}

/* Profile modal: light theme */
body.tc-light .tc-profile-card{
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}
body.tc-light .tc-profile-close{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  color: #1a2230;
}
body.tc-light .tc-profile-close:hover{ background: rgba(0,0,0,.08); }

body.tc-light .tc-profile-report,
body.tc-light .tc-profile-menu{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  color: #1a2230;
}
body.tc-light .tc-profile-report:hover,
body.tc-light .tc-profile-menu:hover{ background: rgba(0,0,0,.08); }

body.tc-light .tc-profile-actions{
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 18px 60px rgba(10,20,40,.20);
}

body.tc-light .tc-profile-cover{
  background:
    radial-gradient(1000px 420px at 30% 20%, rgba(91,214,255,.45), transparent 55%),
    radial-gradient(900px 420px at 70% 15%, rgba(255,79,216,.38), transparent 60%),
    linear-gradient(135deg, rgba(238,244,255,1), rgba(224,233,248,1));
}
body.tc-light .tc-profile-cover::after{
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.30));
}
body.tc-light .tc-profile-avatar{
  border-color: rgba(255,255,255,.92);
}

body.tc-light .tc-profile-tabs{
  border-bottom-color: rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
body.tc-light .tc-profile-tab{
  border-color: rgba(0,0,0,.12);
  background: rgba(255,255,255,.70);
  color: rgba(20,28,40,.90);
}
body.tc-light .tc-profile-tab:hover{ background: rgba(0,0,0,.04); }
body.tc-light .tc-profile-tab.is-active{
  background: rgba(91,214,255,.20);
  border-color: rgba(91,214,255,.38);
  color: rgba(10,16,26,.95);
}

body.tc-light .tc-profile-row{ border-bottom-color: rgba(0,0,0,.08); }
body.tc-light .tc-profile-k{ color: rgba(20,28,40,.72); }
body.tc-light .tc-profile-v{ color: rgba(20,28,40,.92); }
body.tc-light .tc-profile-about,
body.tc-light .tc-profile-gifts,
body.tc-light .tc-profile-loading{
  color: rgba(20,28,40,.88);
}

/* Private chat (centered popup) */
.tc-pm-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 99999;
}
.tc-pm-modal.is-open{ display:flex; }

/* Private chat shown like the main chat room (full view)
   Keep the topbar + right user list visible by rendering the PM overlay inside the .tc-chat column. */
body.tc-pm-full{ }
body.tc-pm-full .tc-pm-modal{
  position:absolute;
  inset:0;
  background: transparent;
  backdrop-filter: none;
  align-items: stretch;
  justify-content: stretch;
  z-index: 9999; /* keep above chat content in all themes, below fixed topbar */
  pointer-events:none;
}
body.tc-pm-full .tc-pm-card{
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  box-shadow: none;
  pointer-events:auto;
}
body:not(.tc-light) .tc-pm-card{
  background: linear-gradient(135deg, #141b2f, #181f3a);
  border-color: rgba(255,255,255,.12);
}


.tc-pm-card{
  width: 420px;
  max-width: calc(100vw - 26px);
  height: 520px;
  max-height: calc(100vh - 26px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--tc-border);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}

.tc-pm-head{
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--tc-border);
  background: rgba(15,23,36,.85);
}

/* PM Tabs (multiple chats) */
.tc-pm-tabs{
  display:flex;
  gap:8px;
  padding:8px 12px;
  border-bottom: 1px solid var(--tc-border);
  background: rgba(15,23,36,.85);
  overflow-x:auto;
  scrollbar-width: thin;
}
.tc-pm-tab{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 0 0 auto;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor:pointer;
  line-height:1;
  user-select:none;
  position:relative;
}
.tc-pm-tab.is-active{
  background: rgba(255,255,255,.14);
}
.tc-pm-tab-ava img{
  width:18px;
  height:18px;
  border-radius:999px;
  display:block;
  object-fit:cover;
}
.tc-pm-tab-name{
  max-width: 140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  font-size: 12px;
}
.tc-pm-tab-close{
  margin-left:2px;
  opacity:.85;
  font-weight:900;
  cursor:pointer;
}
.tc-pm-tab:hover .tc-pm-tab-close{ opacity:1; }


.tc-pm-user{ display:flex; align-items:center; gap:10px; min-width:0; }
.tc-pm-avatar{ width:36px; height:36px; border-radius:999px; overflow:hidden; border:1px solid var(--tc-border); background: rgba(255,255,255,.06); flex:0 0 auto; }
.tc-pm-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.tc-pm-name{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.tc-pm-actions{ display:flex; gap:8px; }

.tc-pm-menu{
  position:absolute;
  top: 56px;
  right: 12px;
  width: 260px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  background: rgba(15,23,36,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  display:none;
  z-index: 30;
}
.tc-pm-menu.is-open{ display:block; }

.tc-pm-menuitem{
  width: 100%;
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px;
  border:0;
  background: transparent;
  color: var(--tc-text);
  cursor:pointer;
  border-radius: 10px;
  text-align:left;
}
.tc-pm-menuitem:hover{ background: rgba(255,255,255,.06); }
.tc-pm-menuicon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  margin-top: 1px;
}
.tc-pm-menuicon svg{ width: 18px; height: 18px; }
.tc-pm-menutxt{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 0;
}
.tc-pm-menutitle{
  font-weight: 800;
  line-height: 1.1;
}
.tc-pm-menudesc{
  font-size: 12px;
  opacity: .75;
  line-height: 1.2;
}

.tc-pm-btn{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid var(--tc-border);
  background: rgba(255,255,255,.04);
  color: var(--tc-text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.tc-pm-btn:hover{ background: rgba(255,255,255,.07); }
.tc-pm-btn svg{ width:18px; height:18px; }

.tc-pm-body{ flex:1; min-height:0; background: rgba(15,23,36,.35); }
.tc-pm-messages{ height:100%; overflow:auto; padding: 12px; display:flex; flex-direction:column; gap:10px; }

.tc-pm-msg{ display:flex; flex-direction:column; align-items:flex-start; max-width: 92%; }
.tc-pm-msg.is-me{ align-self:flex-end; align-items:flex-end; }

.tc-pm-bubble{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.05);
  line-height: 1.35;
  font-size: 14px;
  overflow-wrap:anywhere;
}
.tc-pm-msg.is-me .tc-pm-bubble{
  border-color: rgba(91,214,255,.35);
  background: rgba(91,214,255,.10);
}

.tc-pm-time{ font-size: 11px; opacity: .55; margin-top: 4px; }

.tc-pm-meta{ display:flex; align-items:center; gap:8px; margin-bottom:6px; opacity:.85; font-size:12px; }
.tc-pm-msg.is-me .tc-pm-meta{ flex-direction:row-reverse; }
.tc-pm-msg-avatar{ width:22px; height:22px; border-radius:999px; overflow:hidden; flex:0 0 22px; border:1px solid var(--tc-border); background: rgba(255,255,255,.06); }
.tc-pm-msg-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.tc-pm-msg-name{ font-weight:600; }

.tc-pm-compose{
  display:flex;
  gap:10px;
  padding: 12px;
  border-top: 1px solid var(--tc-border);
  background: rgba(15,23,36,.85);
}
.tc-pm-input{
  flex:1;
  height: 42px;
  border-radius: 12px;
  border:1px solid var(--tc-border);
  background: rgba(255,255,255,.04);
  color: var(--tc-text);
  padding: 0 12px;
  outline:none;
}
.tc-pm-input:focus{ border-color: rgba(91,214,255,.35); box-shadow: 0 0 0 3px rgba(91,214,255,.12); }

.tc-pm-send{
  width: 44px;
  height: 42px;
  border-radius: 12px;
  border:1px solid rgba(91,214,255,.35);
  background: rgba(91,214,255,.14);
  color: var(--tc-text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.tc-pm-send svg{ width:18px; height:18px; }
.tc-pm-send:disabled{ opacity:.55; cursor:not-allowed; }

/* PM emoji button */
.tc-pm-emoji-btn{ width:44px; height:42px; border-radius:12px; font-size:18px; line-height:1; }
.tc-pm-emoji-btn:disabled{ opacity:.55; cursor:not-allowed; }

/* Minimized state */
.tc-pm-card.is-minimized{ height: 54px; width: 320px; }
.tc-pm-card.is-minimized .tc-pm-body,
.tc-pm-card.is-minimized .tc-pm-compose{ display:none; }


/* Toast notifications (modern popup messages) */
.tc-toast-wrap{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.tc-toast{
  min-width: 240px;
  max-width: 520px;
  width: max-content;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--tc-border);
  background: rgba(15,23,36,.92);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  color: var(--tc-text);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: auto;
}
.tc-toast.is-show{
  opacity: 1;
  transform: translateY(0);
}
.tc-toast-ic{
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  margin-top: 1px;
}
.tc-toast-success .tc-toast-ic{
  border-color: rgba(66,255,159,.25);
  background: rgba(66,255,159,.12);
}
.tc-toast-error .tc-toast-ic{
  border-color: rgba(255,85,85,.25);
  background: rgba(255,85,85,.12);
}
.tc-toast-info .tc-toast-ic{
  border-color: rgba(91,214,255,.25);
  background: rgba(91,214,255,.12);
}
.tc-toast-msg{
  flex: 1;
  line-height: 1.35;
  font-size: 13.5px;
  padding-top: 2px;
  overflow-wrap: anywhere;
}
.tc-toast-x{
  background: transparent;
  border: none;
  color: var(--tc-text);
  opacity: .6;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  margin-left: 6px;
}
.tc-toast-x:hover{ opacity: 1; }

@media (max-width: 520px){
  .tc-toast{ max-width: calc(100vw - 24px); }
}

/* Light theme: toast should be light so text stays readable */
body.tc-light .tc-toast{
  background: rgba(255,255,255,.96);
  border-color: rgba(10,20,40,.12);
  color: rgba(18,26,42,.92);
  box-shadow: 0 12px 40px rgba(10,20,40,.18);
}
body.tc-light .tc-toast-ic{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}
body.tc-light .tc-toast-x{ color: rgba(18,26,42,.85); }

/* Inbox (Private conversations list like top Messages panel) */
.tc-iconbtn.tc-inbox-btn{ position: relative; }

.tc-top-badge{
  position:absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,79,216,.95);
  color: #121212;
  font-size: 10px;
  font-weight: 900;
  display: none;
  align-items:center;
  justify-content:center;
  line-height: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.40);
}
.tc-top-badge.is-show{ display:inline-flex; }

.tc-inbox-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 70px 18px 18px 18px;
  background: rgba(0,0,0,0);
  z-index: 10045;
}
.tc-inbox-modal.is-open{ display:flex; }

.tc-inbox-card{
  width: 320px;
  max-width: calc(100vw - 36px);
  max-height: min(640px, 75vh);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,20,30,.96);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tc-inbox-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.tc-inbox-title{ font-weight: 900; font-size: 16px; }
.tc-inbox-actions{ display:flex; gap: 8px; }
.tc-inbox-ic{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tc-inbox-ic:hover{ background: rgba(255,255,255,.10); }
.tc-inbox-ic svg{ width: 18px; height: 18px; display:block; }

.tc-inbox-list{
  overflow:auto;
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.tc-inbox-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.tc-inbox-item:hover{ background: rgba(255,255,255,.08); }

.tc-inbox-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.tc-inbox-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.tc-inbox-name{
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255,255,255,.92);
}
.tc-inbox-name.is-unread{ color: #fff; }

.tc-inbox-main{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 3px;
}

.tc-inbox-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.tc-inbox-time{
  flex: 0 0 auto;
  color: rgba(255,255,255,.60);
  font-size: 11px;
  font-weight: 800;
}

.tc-inbox-snippet{
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-inbox-unread{
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,79,216,.22);
  border: 1px solid rgba(255,79,216,.35);
  color: #fff;
  flex: 0 0 auto;
}

.tc-inbox-x{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}
.tc-inbox-x:hover{ background: rgba(255,255,255,.10); }

.tc-inbox-empty{
  padding: 18px 10px;
  color: rgba(255,255,255,.72);
  text-align:center;
  font-weight: 800;
}

/* Notifications (bell) */
.tc-notif-list{
  overflow:auto;
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.tc-notif-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.tc-notif-item:hover{ background: rgba(255,255,255,.08); }

.tc-notif-avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
  position: relative;
}
.tc-notif-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.tc-notif-ico{
  position:absolute;
  bottom: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(20,22,33,.90);
  display:flex;
  align-items:center;
  justify-content:center;
  color: #fff;
  background: rgba(148,163,184,.95);
}
.tc-notif-ico svg{ width: 12px; height: 12px; display:block; }
.tc-notif-ico.is-friend{ background: rgba(59,130,246,.95); }
.tc-notif-ico.is-like{ background: rgba(34,197,94,.95); }
.tc-notif-ico.is-pm{ background: rgba(255,79,216,.80); }

.tc-notif-main{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 3px;
}

.tc-notif-text{
  color: rgba(255,255,255,.90);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  overflow:hidden;
  text-overflow: ellipsis;
}
.tc-notif-time{
  color: rgba(255,255,255,.60);
  font-size: 11px;
  font-weight: 800;
}

.tc-notif-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.95);
  flex: 0 0 auto;
}

.tc-notif-item.is-read .tc-notif-dot{ opacity: 0; }

.tc-notif-empty{
  padding: 18px 10px;
  color: rgba(255,255,255,.72);
  text-align:center;
  font-weight: 800;
}


/* Friend requests (sent) */
.tc-freq-list{
  overflow:auto;
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.tc-freq-item{
  cursor: default;
}
.tc-freq-item .tc-inbox-x{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 20px;
}
.tc-freq-empty{
  padding: 18px 10px;
  color: rgba(255,255,255,.72);
  text-align:center;
  font-weight: 800;
}

.tc-freq-section{
  padding: 12px 6px 4px;
  font-weight: 900;
  color: rgba(255,255,255,.78);
  letter-spacing: .02em;
}
.tc-freq-section.tc-freq-section-sent{ margin-top: 6px; }

.tc-freq-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}
.tc-freq-actions .tc-inbox-x svg{
  width: 18px;
  height: 18px;
}
.tc-freq-sub{
  font-weight: 900;
  color: rgba(255,255,255,.72);
}


/* Userbar dropdown */
.tc-me-menu{
  position:absolute;
  right:0;
  top:46px;
  width:320px;
  max-width:calc(100vw - 24px);
  background:rgba(35, 41, 56, 0.98);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 14px 50px rgba(0,0,0,.45);
  padding:10px;
  display:none;
  z-index: 100001;
}
.tc-me-menu.is-open{ display:block; }

.tc-me-menu-head{
  display:flex;
  gap:12px;
  align-items:center;
  padding:8px 8px 10px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tc-me-menu-avatar{
  position:relative;
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:50%;
  overflow:hidden;
}
.tc-me-menu-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.tc-me-menu-avatar .tc-verified-badge{
  width:14px;
  height:14px;
  bottom:2px;
  right:2px;
}
.tc-me-menu-meta{ min-width:0; }
.tc-me-menu-badge{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:700;
  opacity:.95;
}
.tc-me-menu-badge-ico{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#22c55e;
  color:#fff;
}
.tc-me-menu-badge-ico svg{
  width:12px;
  height:12px;
  display:block;
}
.tc-me-menu-badge-txt{ white-space:nowrap; }

.tc-me-menu-role{
  font-size:12px;
  opacity:.75;
  line-height:1.1;
}
.tc-me-menu-name{
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tc-me-menu-edit{
  margin-top:2px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font-size:13px;
  opacity:.8;
  cursor:pointer;
}
.tc-me-menu-edit:hover{ opacity:1; text-decoration:underline; }

.tc-me-menu-items{
  padding-top:8px;
}
.tc-me-menu-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  background:transparent;
  border:0;
  cursor:pointer;
}
.tc-me-menu-item:hover{
  background:rgba(255,255,255,.06);
}
.tc-me-menu-ico{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}
.tc-me-menu-ico svg{ width:18px; height:18px; }
.tc-me-menu-arrow{
  margin-left:auto;
  opacity:.7;
}
.tc-me-menu-arrow svg{ width:18px; height:18px; }

/* Light theme: stronger input contrast */
body.tc-light .tc-input,
body.tc-light .tc-input input,
body.tc-light .tc-input textarea{
  background:#ffffff;
  color:#121a2a;
}

body.tc-light .tc-input::placeholder{
  color: rgba(18,26,42,.7);
  opacity:1;
}



/* Light theme: make side search bar light */
body.tc-light .tc-side-searchwrap{
  border-color: rgba(0,0,0,.06);
  background:#ffffff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

body.tc-light .tc-side-search{
  color:#121a2a;
}

body.tc-light .tc-side-search::placeholder{
  color: rgba(18,26,42,.55);
}

body.tc-light .tc-side-searchx{
  border-color: rgba(0,0,0,.08);
  background: rgba(10,20,40,.03);
}



/* Light theme: emoji picker / userbar dropdown */
body.tc-light .tc-emoji-picker{
  background:#ffffff;
  border-color: rgba(0,0,0,.08);
  box-shadow:0 16px 40px rgba(0,0,0,.10);
}

body.tc-light .tc-emoji-item{
  border-color: rgba(0,0,0,.06);
  background:rgba(10,20,40,.02);
}

body.tc-light .tc-emoji-item:hover{
  background:rgba(10,20,40,.06);
}

body.tc-light .tc-me-menu{
  background:#ffffff;
  border-color: rgba(0,0,0,.06);
  box-shadow:0 14px 40px rgba(0,0,0,.10);
}

body.tc-light .tc-me-menu-item:hover{
  background:rgba(10,20,40,.04);
}



/* Light theme: force emoji tiles + panel very light */
body.tc-light .tc-emoji-picker,
.tc-light .tc-emoji-picker{
  background:#ffffff !important;
}

body.tc-light .tc-emoji-item,
.tc-light .tc-emoji-item{
  background:#f4f6ff !important;
  border-color: rgba(0,0,0,.06) !important;
}

body.tc-light .tc-emoji-item:hover,
.tc-light .tc-emoji-item:hover{
  background:#e7ebff !important;
}



/* Light theme: + media picker (GIFs / images) */
body.tc-light .tc-plus-menu,
.tc-light .tc-plus-menu{
  background:#ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.10) !important;
}

body.tc-light .tc-plus-item,
.tc-light .tc-plus-item{
  border-color: rgba(0,0,0,.06) !important;
  background: rgba(10,20,40,.02) !important;
}

body.tc-light .tc-plus-item:hover,
.tc-light .tc-plus-item:hover{
  background: rgba(10,20,40,.06) !important;
}



/* Light theme: inbox / notifications / friend requests */
body.tc-light .tc-inbox-card{
  background:#ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.12) !important;
}

body.tc-light .tc-inbox-head{
  border-bottom:1px solid rgba(0,0,0,.06) !important;
}

body.tc-light .tc-inbox-ic{
  border-color: rgba(0,0,0,.06) !important;
  background: rgba(10,20,40,.02) !important;
  color:#121a2a !important;
}

body.tc-light .tc-inbox-ic:hover{
  background: rgba(10,20,40,.06) !important;
}

body.tc-light .tc-inbox-item{
  border-color: rgba(0,0,0,.06) !important;
  background: rgba(10,20,40,.02) !important;
}

body.tc-light .tc-inbox-item:hover{
  background: rgba(10,20,40,.06) !important;
}

body.tc-light .tc-inbox-empty,
body.tc-light .tc-notif-empty{
  color: rgba(18,26,42,.65) !important;
}

/* Notification list tiles */
body.tc-light .tc-notif-item{
  border-color: rgba(0,0,0,.06) !important;
  background: rgba(10,20,40,.02) !important;
}

body.tc-light .tc-notif-item:hover{
  background: rgba(10,20,40,.06) !important;
}

body.tc-light .tc-notif-text{
  color: rgba(18,26,42,.9) !important;
}

body.tc-light .tc-notif-time{
  color: rgba(18,26,42,.55) !important;
}

/* Friend requests (sent/received) list items share same styling as inbox items */
body.tc-light .tc-freq-list .tc-inbox-item,
body.tc-light .tc-friends-list .tc-inbox-item{
  border-color: rgba(0,0,0,.06) !important;
  background: rgba(10,20,40,.02) !important;
}

body.tc-light .tc-freq-list .tc-inbox-item:hover,
body.tc-light .tc-friends-list .tc-inbox-item:hover{
  background: rgba(10,20,40,.06) !important;
}



/* Light theme: fix friend-requests & inbox empty text colors */
body.tc-light .tc-freq-sub{
  color: rgba(18,26,42,.7) !important;
}

body.tc-light .tc-freq-title,
body.tc-light .tc-freq-heading{
  color: rgba(18,26,42,.9) !important;
}

/* ensure inbox empty text also dark in light theme */
body.tc-light .tc-inbox-empty{
  color: rgba(18,26,42,.65) !important;
}



/* Light theme: ensure Friend requests sections visible */
body.tc-light .tc-freq-section{
  color: rgba(18,26,42,.85) !important;  /* "Friend requests" / "Sent" inside panel */
}

body.tc-light .tc-freq-sub{
  color: rgba(18,26,42,.7) !important;   /* "No new requests." / "No sent requests." */
}



/* Light theme: force all Friend requests texts to dark */
body.tc-light .tc-freq-section,
.tc-light .tc-freq-section{
  color: rgba(18,26,42,.85) !important;  /* "Friend requests" / "Sent" sections inside panel */
}

body.tc-light .tc-freq-sub,
.tc-light .tc-freq-sub{
  color: rgba(18,26,42,.75) !important;  /* "No new requests." / "No sent requests." */
}



/* Light theme: FINAL override for Friend requests empty text */
body.tc-light .tc-inbox-card .tc-freq-sub,
body.tc-light .tc-inbox-card .tc-inbox-empty,
.tc-light .tc-inbox-card .tc-freq-sub,
.tc-light .tc-inbox-card .tc-inbox-empty{
  color: #182a42 !important;
}



/* Light theme: Private inbox text colors */
body.tc-light .tc-inbox-name{
  color: rgba(18,26,42,.95) !important;
}
body.tc-light .tc-inbox-name.is-unread{
  color: #e11d8f !important; /* keep unread accent but visible on white */
}
body.tc-light .tc-inbox-time{
  color: rgba(18,26,42,.55) !important;
}
body.tc-light .tc-inbox-snippet{
  color: rgba(18,26,42,.75) !important;
}
body.tc-light .tc-inbox-unread{
  background: rgba(236,72,153,.12) !important;
  border-color: rgba(236,72,153,.4) !important;
  color: #9d174d !important;
}



/* Light theme: make inbox row X button visible */
body.tc-light .tc-inbox-x{
  border-color: rgba(0,0,0,.06) !important;
  background: rgba(10,20,40,.02) !important;
  color: rgba(18,26,42,.75) !important;
}
body.tc-light .tc-inbox-x:hover{
  background: rgba(10,20,40,.08) !important;
}



/* Light theme: Friend requests empty rows text color */
body.tc-light .tc-freq-empty,
.tc-light .tc-freq-empty{
  color: rgba(18,26,42,.75) !important;  /* "No new requests." / "No sent requests." */
}



/* Light theme: Private chat popup */
body.tc-light .tc-pm-card{
  background:#ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.16) !important;
}

body.tc-light .tc-pm-head{
  background:#f4f6ff !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
}

body.tc-light .tc-pm-body{
  background:#f9fbff !important;
}

/* Ensure PM text is readable in Light theme (avoid inheriting dark-mode text colors) */
body.tc-light .tc-pm-card,
body.tc-light .tc-pm-head,
body.tc-light .tc-pm-body,
body.tc-light .tc-pm-messages,
body.tc-light .tc-pm-name,
body.tc-light .tc-pm-meta,
body.tc-light .tc-pm-bubble{
  color:#121a2a !important;
}

body.tc-light .tc-pm-bubble{
  border-color: rgba(0,0,0,.06) !important;
  background:#ffffff !important;
}

body.tc-light .tc-pm-msg.is-me .tc-pm-bubble{
  border-color: rgba(59,130,246,.35) !important;
  background: rgba(59,130,246,.10) !important;
}

body.tc-light .tc-pm-time{
  color: rgba(18,26,42,.55) !important;
}

body.tc-light .tc-pm-compose{
  background:#f4f6ff !important;
  border-top:1px solid rgba(0,0,0,.06) !important;
}

body.tc-light .tc-pm-input{
  background:#ffffff !important;
  color:#121a2a !important;
}

body.tc-light .tc-pm-input::placeholder{
  color: rgba(18,26,42,.55) !important;
}

body.tc-light .tc-pm-send{
  border-color: rgba(59,130,246,.4) !important;
  background: rgba(59,130,246,.12) !important;
}


/* Light theme: PM dots menu (Ignore / Report) readable */
body.tc-light .tc-pm-menu{
  background: rgba(255,255,255,.98) !important;
  border-color: rgba(17,24,39,.12) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.22) !important;
}
body.tc-light .tc-pm-menuitem{ color: rgba(17,24,39,.96) !important; }
body.tc-light .tc-pm-menuitem:hover{ background: rgba(17,24,39,.06) !important; }
body.tc-light .tc-pm-menuicon{
  background: rgba(17,24,39,.03) !important;
  border-color: rgba(17,24,39,.12) !important;
}
body.tc-light .tc-pm-menuicon svg{ color: rgba(17,24,39,.90) !important; }
body.tc-light .tc-pm-menudesc{ opacity: .70 !important; }



/* Confirm modal (modern popup) */
.tc-confirm-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
    /* Must sit above Edit Profile modal (z-index: 999999) */
  z-index: 1000001;
}
body.tc-light .tc-confirm-modal{ background: rgba(0,0,0,.35); }
.tc-confirm-modal.is-open{ display: flex; }

.tc-confirm-card{
  width: 420px;
  max-width: 92vw;
  border-radius: 18px;
  border: 1px solid var(--tc-border);
  background: var(--tc-panel);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  overflow: hidden;
  color: var(--tc-text);
}
.tc-confirm-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-confirm-title{ font-size: 18px; font-weight: 900; letter-spacing: .2px; }
.tc-confirm-x{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-text);
  font-size: 20px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
}
.tc-confirm-x:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-confirm-x:hover{ background: rgba(17,24,39,.06); }

.tc-confirm-body{ padding: 14px 16px 6px; }
.tc-confirm-text{ font-size: 14px; opacity: .92; }

/* Confirm modal extra (Delete account: type word) */
.tc-confirm-extra{ margin-top: 12px; }
.tc-confirm-hint{ font-size: 13px; opacity: .85; margin-bottom: 8px; }
.tc-confirm-hint b{ font-weight: 900; letter-spacing: .4px; }
.tc-confirm-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.03);
  color: var(--tc-text);
  outline: none;
}
body.tc-light .tc-confirm-input{
  background: rgba(17,24,39,.02);
}
.tc-confirm-input:focus{
  border-color: rgba(94,234,212,.45);
  box-shadow: 0 0 0 3px rgba(94,234,212,.10);
}
.tc-confirm-ok:disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: none;
}

.tc-confirm-foot{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--tc-border);
}
.tc-confirm-cancel,
.tc-confirm-ok{
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .2px;
}
.tc-confirm-cancel{ background: transparent; color: var(--tc-text); }
.tc-confirm-cancel:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-confirm-cancel:hover{ background: rgba(17,24,39,.06); }

.tc-confirm-ok{
  background: var(--tc-accent);
  border-color: rgba(0,0,0,0);
  color: #0b1220;
}
.tc-confirm-ok:hover{ filter: brightness(1.04); }
.tc-confirm-ok.is-danger{
  background: #ff4d4d;
  color: #fff;
}

/* Optional confirm variants */
.tc-confirm-ok.is-success{
  background: #16a34a;
  border-color: rgba(0,0,0,0);
  color: #fff;
}

.tc-confirm-card.is-center .tc-confirm-head{
  justify-content: center;
  position: relative;
}
.tc-confirm-card.is-center .tc-confirm-title{
  text-align: center;
}
.tc-confirm-card.is-center .tc-confirm-x{
  position: absolute;
  right: 16px;
  top: 10px;
}
.tc-confirm-card.is-center .tc-confirm-text{ text-align: center; }
.tc-confirm-card.is-center .tc-confirm-foot{ justify-content: center; }

/* Friends wall */
.tc-fw-panel{
  position: fixed;
  left: 14px;
  top: 72px;
  bottom: 14px;
  width: 360px;
  max-width: calc(100vw - 28px);
  z-index: 99990;
  pointer-events: none;
  transform: translateX(-115%);
  transition: transform .18s ease;
}
.tc-fw-panel.is-open{ transform: translateX(0); pointer-events: auto; }

.tc-fw-card{
  height: 100%;
  background: var(--tc-panel);
  border: 1px solid var(--tc-border);
  border-radius: 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}

.tc-fw-head{
  height: 54px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-fw-title{ font-weight: 900; font-size: 18px; }
.tc-fw-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-text);
  font-size: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.tc-fw-close:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-fw-close:hover{ background: rgba(17,24,39,.06); }

.tc-fw-toolbar{
  padding: 12px 14px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-fw-add{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  background: rgba(91,214,255,.16);
  color: var(--tc-text);
  font-weight: 900;
  cursor: pointer;
}
body.tc-light .tc-fw-add{ background: rgba(91,214,255,.12); }
.tc-fw-add:disabled{ opacity: .6; cursor: not-allowed; }
.tc-fw-add-ico{ font-size: 18px; line-height: 1; }

.tc-fw-body{ padding: 12px 14px; overflow: auto; flex: 1; }
.tc-fw-feed{ display:flex; flex-direction: column; gap: 12px; }

.tc-fw-post{
  border: 1px solid var(--tc-border);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
body.tc-light .tc-fw-post{ background: rgba(17,24,39,.02); }

.tc-fw-post-head{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
}
.tc-fw-avatar{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
  overflow:hidden;
}
.tc-fw-avatar img{ width:100%; height:100%; object-fit: cover; display:block; }
.tc-fw-meta{ flex:1; min-width:0; }
.tc-fw-name{ font-weight: 900; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-fw-time{ font-size: 12px; color: var(--tc-muted); }
.tc-fw-morebtn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-text);
  cursor:pointer;
}
.tc-fw-morebtn:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-fw-morebtn:hover{ background: rgba(17,24,39,.06); }

.tc-fw-post-body{ padding: 0 12px 10px; }
.tc-fw-content{ white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.35; }

.tc-fw-reactions{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--tc-border);
}
.tc-fw-react-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.03);
  color: var(--tc-text);
  border-radius: 12px;
  height: 34px;
  padding: 0 12px;
  cursor:pointer;
  font-weight: 900;
}
body.tc-light .tc-fw-react-btn{ background: rgba(17,24,39,.03); }
.tc-fw-react-btn.is-active{ background: rgba(91,214,255,.18); border-color: rgba(91,214,255,.22); }

/* Friends wall (compat) - style new action markup */
.tc-fw-post-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px 10px;
}
.tc-fw-post-user{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.tc-fw-user-meta{ min-width:0; flex:1; }
.tc-fw-avatar{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  border: 1px solid var(--tc-border);
  overflow:hidden;
  flex: 0 0 auto;
  background: rgba(255,255,255,.04);
}
body.tc-light .tc-fw-avatar{ background: rgba(17,24,39,.03); }
.tc-fw-avatar img{ width:100%; height:100%; object-fit: cover; display:block; }

.tc-fw-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--tc-border);
  justify-content: space-between;
}

/* Friends wall reactions (emoji icons + counts) */
.tc-fw-rx{
  display:flex;
  align-items:center;
  gap: 12px;
  flex: 1;
}
.tc-fw-rxbtn{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor:pointer;
  user-select:none;
  color: var(--tc-text);
  font-weight: 900;
}
.tc-fw-rxbtn[data-disabled="1"]{ opacity: .55; cursor:not-allowed; }
.tc-fw-rxicon{
  width: 22px;
  height: 22px;
  border-radius: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  line-height: 1;
  background: transparent;
  color: inherit;
}
.tc-fw-rxnum{ font-size: 13px; line-height: 1; }

/* Friends wall reactions: show plain emoji without colored background */
.tc-fw-rx-like .tc-fw-rxicon,
.tc-fw-rx-dislike .tc-fw-rxicon,
.tc-fw-rx-love .tc-fw-rxicon,
.tc-fw-rx-laugh .tc-fw-rxicon{
  background: transparent;
  color: inherit;
}
.tc-fw-rxbtn.is-on .tc-fw-rxicon,
body.tc-light .tc-fw-rxbtn.is-on .tc-fw-rxicon{
  box-shadow:none;
}

.tc-fw-rxbtn.is-on .tc-fw-rxicon{ box-shadow:none; }
body.tc-light .tc-fw-rxbtn.is-on .tc-fw-rxicon{ box-shadow:none; }

/* Comment count (right side) */
.tc-fw-cmeta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.03);
  color: var(--tc-text);
  border-radius: 999px;
  height: 32px;
  padding: 0 12px;
  cursor:pointer;
  font-weight: 900;
  user-select:none;
  margin-left: auto;
}
body.tc-light .tc-fw-cmeta{ background: rgba(17,24,39,.03); }
.tc-fw-cmeta:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-fw-cmeta:hover{ background: rgba(17,24,39,.06); }
.tc-fw-cmeta[data-disabled="1"]{ opacity: .55; cursor:not-allowed; }
.tc-fw-cicon{ display:inline-flex; font-size: 16px; line-height: 1; }
.tc-fw-ccount{ font-size: 13px; line-height: 1; }
.tc-fw-like,
.tc-fw-commentbtn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.03);
  color: var(--tc-text);
  border-radius: 12px;
  height: 34px;
  padding: 0 12px;
  cursor:pointer;
  font-weight: 900;
  line-height: 1;
  user-select:none;
}
body.tc-light .tc-fw-like,
body.tc-light .tc-fw-commentbtn{ background: rgba(17,24,39,.03); }
.tc-fw-like:hover,
.tc-fw-commentbtn:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-fw-like:hover,
body.tc-light .tc-fw-commentbtn:hover{ background: rgba(17,24,39,.06); }
.tc-fw-like:disabled,
.tc-fw-commentbtn:disabled{ opacity: .55; cursor:not-allowed; }
.tc-fw-like.is-active{ background: rgba(91,214,255,.18); border-color: rgba(91,214,255,.22); }
.tc-fw-ico{ font-size: 16px; line-height: 1; display:inline-flex; }
.tc-fw-num{ font-size: 13px; line-height: 1; }

.tc-fw-comments{
  padding: 10px 12px 12px;
  border-top: 1px solid var(--tc-border);
  display:none;
}
.tc-fw-comments.is-open{ display:block; }
.tc-fw-comments-list{ display:flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tc-fw-comment{
  display:flex;
  gap: 8px;
  align-items:flex-start;
}
.tc-fw-comment .tc-fw-avatar{ width: 26px; height: 26px; border-radius: 10px; }
.tc-fw-comment-bubble{
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 8px 10px;
  flex: 1;
}
body.tc-light .tc-fw-comment-bubble{ background: rgba(17,24,39,.03); }
.tc-fw-comment-name{ font-weight: 900; font-size: 12px; }
.tc-fw-comment-text{ font-size: 13px; color: var(--tc-text); white-space: pre-wrap; word-break: break-word; }
.tc-fw-comment-input{
  width:100%;
  border: 1px solid var(--tc-border);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(255,255,255,.03);
  color: var(--tc-text);
  outline:none;
}
body.tc-light .tc-fw-comment-input{ background: rgba(17,24,39,.03); }
/* Friends wall: hide the little send/arrow button in comment box (Enter still sends) */
.tc-fw-comment-row .tc-fw-comment-send{ display:none !important; }

/* News: hide the send button in comment box (Enter still sends) */
#tcNewsWall .tc-fw-commentbox .tc-fw-comment-send{ display:none !important; }


.tc-fw-more{
  width: 100%;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-text);
  cursor:pointer;
  margin-top: 12px;
}
.tc-fw-more:hover{ background: rgba(255,255,255,.05); }
body.tc-light .tc-fw-more:hover{ background: rgba(17,24,39,.05); }

/* Friends wall create modal */
.tc-fw-create-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  z-index: 100000;
}
body.tc-light .tc-fw-create-modal{ background: rgba(0,0,0,.35); }
.tc-fw-create-modal.is-open{ display:flex; }
.tc-fw-create-card{
  width: 560px;
  max-width: 92vw;
  border-radius: 18px;
  border: 1px solid var(--tc-border);
  background: var(--tc-panel);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  overflow: hidden;
}
.tc-fw-create-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-fw-create-title{ font-size: 18px; font-weight: 900; }
.tc-fw-create-close{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-text);
  font-size: 20px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.tc-fw-create-close:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-fw-create-close:hover{ background: rgba(17,24,39,.06); }
.tc-fw-create-body{ padding: 14px 16px 16px; }
.tc-fw-textarea{
  width:100%;
  min-height: 120px;
  border: 1px solid var(--tc-border);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  color: var(--tc-text);
  padding: 14px 14px;
  outline:none;
  resize: vertical;
}
body.tc-light .tc-fw-textarea{ background: rgba(17,24,39,.03); }
.tc-fw-create-footer{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 2px 0;
}
.tc-fw-gear{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tc-fw-gear:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-fw-gear:hover{ background: rgba(17,24,39,.06); }
.tc-fw-send{
  width: 46px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0);
  background: var(--tc-accent);
  color: #0b1220;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}
.tc-fw-send:disabled{ opacity:.65; cursor:not-allowed; }

/* Friends wall options modal */
.tc-fw-options-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  z-index: 100001;
}
body.tc-light .tc-fw-options-modal{ background: rgba(0,0,0,.35); }
.tc-fw-options-modal.is-open{ display:flex; }
.tc-fw-options-card{
  width: 420px;
  max-width: 92vw;
  border-radius: 18px;
  border: 1px solid var(--tc-border);
  background: var(--tc-panel);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  overflow: hidden;
}
.tc-fw-options-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tc-border);
}
.tc-fw-options-title{ font-size: 18px; font-weight: 900; }
.tc-fw-options-close{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-text);
  font-size: 20px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.tc-fw-options-close:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-fw-options-close:hover{ background: rgba(17,24,39,.06); }
.tc-fw-options-body{ padding: 10px 12px; }

@media (max-width: 900px){
  .tc-fw-panel{ top: 62px; width: 340px; }
}
@media (max-width: 600px){
  .tc-fw-panel{
    left: 10px;
    right: 10px;
    width: auto;
    top: 62px;
    transform: translateY(-120%);
  }
  .tc-fw-panel.is-open{ transform: translateY(0); }
}

.tc-fw-menu{
  position:absolute;
  width: 260px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  background: rgba(15,23,36,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  display:none;
  /* Must sit above the Friends Wall panel (z-index: 99990) */
  z-index: 100005;
}
.tc-fw-menu.is-open{ display:block; }

/* Light theme: make the dots menu readable */
body.tc-light .tc-fw-menu{
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
body.tc-light .tc-fw-menuitem{ color: rgba(17,24,39,.96); }
body.tc-light .tc-fw-menuitem:hover{ background: rgba(17,24,39,.06); }
body.tc-light .tc-fw-menuicon{
  background: rgba(17,24,39,.03);
  border-color: rgba(17,24,39,.12);
}
body.tc-light .tc-fw-menuicon svg{ color: rgba(17,24,39,.90); }

.tc-fw-menuitem{
  width: 100%;
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px;
  border:0;
  background: transparent;
  color: var(--tc-text);
  cursor:pointer;
  border-radius: 10px;
  text-align:left;
}
.tc-fw-menuitem:hover{ background: rgba(255,255,255,.06); }

.tc-fw-menuicon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  margin-top: 1px;
}
.tc-fw-menuicon svg{ width: 18px; height: 18px; display:block; }

.tc-fw-menutxt{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 0;
}
.tc-fw-menutitle{
  font-weight: 800;
  line-height: 1.1;
}
.tc-fw-menudesc{
  font-size: 12px;
  opacity: .75;
  line-height: 1.2;
}

.tc-fw-likes-modal,
.tc-fw-report-modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 16px;
  /* Must sit above the Friends Wall panel (z-index: 99990) */
  z-index:  110000;
}
body.tc-light .tc-fw-likes-modal,
body.tc-light .tc-fw-report-modal{ background: rgba(0,0,0,.35); }

.tc-fw-likes-modal.is-open,
.tc-fw-report-modal.is-open{ display:flex; }

.tc-fw-likes-card,
.tc-fw-report-card{
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--tc-border);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Light theme: force Report modal card/body to be fully readable */
body.tc-light .tc-fw-report-card{
  background: #ffffff;
  border-color: rgba(17,24,39,.12);
}
body.tc-light .tc-fw-report-body,
body.tc-light .tc-fw-report-label{
  color: #111827;
}
body.tc-light .tc-fw-report-select{
  background: #ffffff;
  color: #111827;
  border-color: rgba(17,24,39,.14);
}
body.tc-light .tc-fw-report-select option{
  background: #ffffff;
  color: #111827;
}
body.tc-light .tc-fw-report-submit{ color: #111827; }

/* Dark theme: force Report select dropdown to stay dark */
body:not(.tc-light) .tc-fw-report-card{
  color-scheme: dark;
  background: rgba(15,23,36,.98);
  border-color: rgba(255,255,255,.12);
}
body:not(.tc-light) .tc-fw-report-select{
  color-scheme: dark;
  background: rgba(15,23,36,.92);
  color: #e5e7eb;
  border-color: rgba(255,255,255,.12);
}
body:not(.tc-light) .tc-fw-report-select option{
  background: #0b1220;
  color: #e5e7eb;
}


.tc-fw-likes-head,
.tc-fw-report-head{
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--tc-border);
  background: rgba(15,23,36,.85);
}
.tc-fw-likes-title,
.tc-fw-report-title{ font-size: 18px; font-weight: 900; }

/* Light theme: keep the dark header but force readable (white) text/icons */
body.tc-light .tc-fw-likes-head,
body.tc-light .tc-fw-report-head{ color: #fff; }
body.tc-light .tc-fw-likes-title,
body.tc-light .tc-fw-report-title{ color: #fff; }
body.tc-light .tc-fw-likes-close,
body.tc-light .tc-fw-report-close{
  color: #fff;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
body.tc-light .tc-fw-likes-close:hover,
body.tc-light .tc-fw-report-close:hover{ background: rgba(255,255,255,.12); }

.tc-fw-likes-close,
.tc-fw-report-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.04);
  color: var(--tc-text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.tc-fw-likes-close:hover,
.tc-fw-report-close:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-fw-likes-close:hover,
body.tc-light .tc-fw-report-close:hover{ background: rgba(17,24,39,.06); }

.tc-fw-likes-row{
  padding: 10px 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  border-bottom: 1px solid var(--tc-border);
}
.tc-fw-likes-filter{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.04);
  color: var(--tc-text);
  cursor:pointer;
}
.tc-fw-likes-filter.is-active{ background: rgba(91,214,255,.18); border-color: rgba(91,214,255,.22); }
.tc-fw-likes-ic{ font-size: 15px; line-height: 1; }
.tc-fw-likes-count{ font-size: 13px; line-height: 1; opacity: .9; }

.tc-fw-likes-body{ padding: 12px; overflow:auto; flex:1; }
.tc-fw-likes-list{ display:flex; flex-direction:column; gap: 6px; }

.tc-fw-likeuser{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.02);
}
body.tc-light .tc-fw-likeuser{ border-color: rgba(17,24,39,.05); background: rgba(17,24,39,.01); }
.tc-fw-likeav{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.tc-fw-likeav img{ width:100%; height:100%; object-fit:cover; display:block; }
.tc-fw-likenm{ font-weight: 800; font-size: 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.tc-fw-likes-empty{
  padding: 46px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  opacity: .85;
}
.tc-fw-likes-empty-ic{ font-size: 42px; line-height: 1; }
.tc-fw-likes-empty-txt{ font-weight: 800; }

.tc-fw-report-body{ padding: 12px; }
.tc-fw-report-note{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  font-size: 13px;
  line-height: 1.35;
  opacity: .9;
}
body.tc-light .tc-fw-report-note{ border-color: rgba(17,24,39,.06); background: rgba(17,24,39,.03); }

.tc-fw-report-field{ margin-top: 12px; display:flex; flex-direction:column; gap: 6px; }
.tc-fw-report-label{ font-weight: 800; font-size: 13px; }

.tc-fw-report-select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--tc-border);
  background: rgba(255,255,255,.04);
  color: var(--tc-text);
}

.tc-fw-report-actions{ margin-top: 14px; display:flex; justify-content:flex-end; }
.tc-fw-report-submit{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(91,214,255,.35);
  background: rgba(91,214,255,.18);
  color: var(--tc-text);
  font-weight: 900;
  cursor:pointer;
}
.tc-fw-report-submit:hover{ background: rgba(91,214,255,.24); }

/* ---------- Edit Profile modal ---------- */
.tc-profile-cover{
  background-size: cover;
  background-position: center;
}

.tc-ep-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
}

.tc-ep-modal.is-open{ display:flex; }

.tc-ep-card{
  width: min(820px, 94vw);
  max-height: 92vh;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(18,24,33,.96);
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
}

body.tc-light .tc-ep-card{
  background: #ffffff;
  color: #111;
  border: 1px solid rgba(0,0,0,.08);
}

.tc-ep-cover{
  height: 120px;
  background: linear-gradient(135deg, rgba(65,105,225,.35), rgba(0,0,0,0));
  position: relative;
  background-size: cover;
  background-position: center;
}

.tc-ep-cover-actions{
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 10px;
  background: rgba(0,0,0,.28);
  padding: 8px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

body.tc-light .tc-ep-cover-actions{
  background: rgba(255,255,255,.7);
}

.tc-ep-btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

/* Modern inline SVG icons inside Edit Profile buttons */
.tc-ep-btn svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* Upload buttons: icon-only (no circular ring) */
.tc-ep-cover-upload,
.tc-ep-avatar-upload{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
}

body.tc-light .tc-ep-cover-upload,
body.tc-light .tc-ep-avatar-upload{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.8);
}

body.tc-light .tc-ep-btn{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.8);
}

.tc-ep-hero{
  padding: 0 18px 14px;
  margin-top: -46px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tc-ep-avatar{
  width: 98px;
  height: 98px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 4px solid rgba(18,24,33,.96);
  background: rgba(0,0,0,.25);
}

body.tc-light .tc-ep-avatar{
  border: 4px solid #fff;
}

.tc-ep-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-ep-avatar-actions{
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  background: rgba(0,0,0,.45);
  padding: 5px 8px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

body.tc-light .tc-ep-avatar-actions{
  background: rgba(255,255,255,.8);
}

.tc-ep-role{
  margin-top: 10px;
  font-weight: 700;
  opacity: .85;
}

.tc-ep-name{
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 2px;
  text-align: center;
}

.tc-ep-tabs{
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 10px 14px 14px;
}

.tc-ep-tab{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: inherit;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

body.tc-light .tc-ep-tab{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

.tc-ep-tab.is-active{
  background: rgba(255,255,255,.10);
}

body.tc-light .tc-ep-tab.is-active{
  background: rgba(0,0,0,.06);
}

.tc-ep-vipbtn{
  margin-left: auto;
  text-decoration: none;
  background: #22c55e;
  color: #111;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 12px;
}

.tc-ep-body{
  padding: 0 14px 16px;
}

.tc-ep-panel{ display:none; }
.tc-ep-panel.is-active{ display:block; }

.tc-ep-split{
  display: flex;
  gap: 14px;
  min-height: 260px;
}

.tc-ep-menu{
  width: 220px;
  flex: 0 0 220px;
}

.tc-ep-nav{
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  color: inherit;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
}

.tc-ep-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}
.tc-ep-ico{
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  opacity: .95;
}
.tc-ep-ico svg{
  width: 20px;
  height: 20px;
  display: block;
}
.tc-ep-txt{
  display: inline-block;
}


body.tc-light .tc-ep-nav{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}

.tc-ep-nav.is-active{
  background: rgba(255,255,255,.10);
}

body.tc-light .tc-ep-nav.is-active{
  background: rgba(0,0,0,.06);
}

.tc-ep-content{
  flex: 1;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px;
  background: rgba(0,0,0,.12);
}

body.tc-light .tc-ep-content{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}

.tc-ep-form{ display:none; }
.tc-ep-form.is-active{ display:block; }

.tc-ep-field{ margin-bottom: 12px; }
.tc-ep-field label{
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  opacity: .9;
}
.tc-ep-field input,
.tc-ep-field select,
.tc-ep-field textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: inherit;
  outline: none;
}
body.tc-light .tc-ep-field input,
body.tc-light .tc-ep-field select,
body.tc-light .tc-ep-field textarea{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: #111;
}

.tc-ep-birth{
  display: flex;
  gap: 10px;
}
.tc-ep-birth select{
  flex: 1;
  min-width: 0;
}
@media (max-width: 420px){
  .tc-ep-birth{ flex-wrap: wrap; }
  .tc-ep-birth select{ flex: 1 1 30%; }
}

.tc-ep-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.tc-ep-save{
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
  background: #38bdf8;
  color: #111;
}

/* Preferences popup save button (icon + label) */
.tc-pref-save{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tc-pref-save-ico{ line-height: 1; }

.tc-ep-note{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
}

body.tc-light .tc-ep-note{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.10);
}

.tc-ep-note-ico{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: rgba(245,158,11,.95);
  color: #111;
  flex: 0 0 26px;
}

.tc-ep-note-txt{
  font-size: 13px;
  line-height: 1.35;
  opacity: .92;
}

.tc-ep-pop{
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.55);
}

.tc-ep-pop.is-open{ display: flex; }

.tc-ep-pop-card{
  width: min(560px, 92vw);
  max-height: 78vh;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(18,24,33,.98);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

body.tc-light .tc-ep-pop-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
}

.tc-ep-pop-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.tc-light .tc-ep-pop-head{
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.tc-ep-pop-title{
  font-weight: 800;
  font-size: 16px;
}

.tc-ep-pop-body{
  padding: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(78vh - 54px);
}

/* Prevent horizontal scrollbars inside Edit Profile popups */
.tc-ep-pop-body select,
.tc-ep-pop-body input,
.tc-ep-pop-body textarea,
.tc-ep-pop-body .tc-field,
.tc-ep-pop-body .tc-form-row{
  max-width: 100%;
  box-sizing: border-box;
}

.tc-ep-pop-body select{ width: 100%; }


.tc-ep-pop-body .tc-ep-actions{
  justify-content: flex-start;
}

.tc-ep-empty{
  padding: 18px;
  opacity: .85;
}

/* More tab list (Edit Profile) */
.tc-ep-morelist{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.12);
}
body.tc-light .tc-ep-morelist{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}

.tc-ep-moreitem{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  text-align: left;
}
body.tc-light .tc-ep-moreitem{
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.tc-ep-moreitem:last-child{ border-bottom: none; }

.tc-ep-moreitem:hover{
  background: rgba(255,255,255,.06);
}
body.tc-light .tc-ep-moreitem:hover{
  background: rgba(0,0,0,.04);
}

.tc-ep-moreico{
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  opacity: .95;
  flex: 0 0 22px;
}
.tc-ep-moreico svg{
  width: 22px;
  height: 22px;
  display: block;
}

.tc-ep-moretxt{ display: inline-block; }

.tc-ep-morearrow{
  margin-left: auto;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  opacity: .75;
}
.tc-ep-morearrow svg{
  width: 20px;
  height: 20px;
  display: block;
}

.tc-ep-moreitem.is-danger .tc-ep-moretxt{ color: #ff6b6b; }
body.tc-light .tc-ep-moreitem.is-danger .tc-ep-moretxt{ color: #dc2626; }

/* Manage friends popup (Edit Profile -> More) */
.tc-mf-loading,
.tc-mf-empty{
  padding: 12px 6px;
  opacity: .85;
}

.tc-mf-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tc-mf-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

body.tc-light .tc-mf-item{
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.08);
}

.tc-mf-avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 38px;
  background: rgba(255,255,255,.08);
}

.tc-mf-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-mf-name{
  flex: 1 1 auto;
  font-weight: 800;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-mf-remove{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  color: inherit;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .95;
}

body.tc-light .tc-mf-remove{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

.tc-mf-remove:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-mf-remove:hover{ background: rgba(0,0,0,.06); }

.tc-mf-remove:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Manage ignores popup (Edit Profile -> More) */
.tc-mi-loading,
.tc-mi-empty{
  padding: 12px 6px;
  opacity: .85;
}

.tc-mi-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tc-mi-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

body.tc-light .tc-mi-item{
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.08);
}

.tc-mi-avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 38px;
  background: rgba(255,255,255,.08);
}

.tc-mi-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-mi-name{
  flex: 1 1 auto;
  font-weight: 800;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-mi-remove{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  color: inherit;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .95;
}

body.tc-light .tc-mi-remove{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

.tc-mi-remove:hover{ background: rgba(255,255,255,.06); }
body.tc-light .tc-mi-remove:hover{ background: rgba(0,0,0,.06); }

.tc-mi-remove:disabled{
  opacity: .55;
  cursor: not-allowed;
}


@media (max-width: 720px){
  .tc-ep-split{ flex-direction: column; }
  .tc-ep-menu{ width: 100%; flex: 0 0 auto; display:flex; flex-wrap:wrap; gap:10px; }
  .tc-ep-nav{ width: auto; flex: 1 1 calc(50% - 10px); margin-bottom:0; }
}



/* Ensure native select dropdown is readable inside Edit Profile (dark + light) */
body:not(.tc-light) .tc-ep-field select{
  color-scheme: dark;
}
body:not(.tc-light) .tc-ep-field select option{
  background: #0f1724;
  color: #ffffff;
}
body.tc-light .tc-ep-field select{
  color-scheme: light;
}
body.tc-light .tc-ep-field select option{
  background: #ffffff;
  color: #111111;
}


/* === TeenChat VIP: message Hide/Report menu (public chat) === */
.tc-msg-time-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #d5e0ff;
}

.tc-msg-time {
  opacity: 0.8;
}

.tc-msg-menu-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 4px;
  font-size: 18px;
  line-height: 1;
  color: #d5e0ff;
}

.tc-msg-menu {
  position: absolute;
  top: 150%;
  right: 0;
  min-width: 220px;
  background: #2b3650;
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
  display: none;
  z-index: 999;
}

.tc-msg-menu.tc-open {
  display: block;
}

.tc-msg-menu-item {
  display: flex;
  align-items: flex-start;
  width: 100%;
  border: none;
  background: transparent;
  color: #ffffff;
  padding: 8px 6px;
  cursor: pointer;
  border-radius: 10px;
}

.tc-msg-menu-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.tc-msg-menu-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 14px;
}

.tc-msg-menu-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tc-msg-menu-title {
  font-weight: 600;
  font-size: 14px;
}

.tc-msg-menu-sub {
  font-size: 12px;
  opacity: 0.7;
}


/* TeenChat VIP tweak: place time + menu on right side in chat list */
.tc-msg-time-wrap{
  margin-left:auto;
}


/* TeenChat VIP: Hide/Report menu visibility for light theme */
body.tc-light .tc-msg-time-wrap{
  color:#1b2335;
}

body.tc-light .tc-msg-menu{
  background:#ffffff;
  color:#111827;
  box-shadow:0 14px 40px rgba(15,23,42,0.25);
}

body.tc-light .tc-msg-menu-item{
  color:#111827;
}

body.tc-light .tc-msg-menu-item:hover{
  background:rgba(15,23,42,0.04);
}

body.tc-light .tc-msg-menu-icon{
  background:transparent;
}


/* TeenChat VIP: make three-dots menu visible in light theme */
body.tc-light .tc-msg-menu-toggle{
  color:#1b2335;
  opacity:0.85;
}
body.tc-light .tc-msg-time{
  opacity:0.75;
}

/* -----------------------------
   VIP popup (Buy VIP)
-------------------------------- */
.tc-vip-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.55);
  z-index:9999;
}
.tc-vip-modal.is-open{display:flex;}
.tc-vip-card{
  position:relative;
  width:min(720px,calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:auto;
  border-radius:18px;
  background:#171a21;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  padding:22px 22px 18px;
}
body.tc-light .tc-vip-card{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
}
.tc-vip-close{
  position:absolute;
  top:10px;
  right:12px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:inherit;
  font-size:20px;
  line-height:32px;
  cursor:pointer;
}
body.tc-light .tc-vip-close{border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.03);}
.tc-vip-title{font-weight:700;font-size:20px;margin:0 0 8px 0;}
.tc-vip-sub{opacity:.85;line-height:1.55;margin:0 0 14px 0;}
.tc-vip-list{list-style:none;margin:0;padding:0;}
.tc-vip-list li{
  position:relative;
  padding:10px 0 10px 30px;
  border-top:1px solid rgba(255,255,255,.08);
  line-height:1.45;
}
body.tc-light .tc-vip-list li{border-top:1px solid rgba(0,0,0,.08);}
.tc-vip-list li:first-child{border-top:0;}
.tc-vip-list li:before{
  content:'';
  position:absolute;
  left:0;
  top:12px;
  width:20px;
  height:20px;
  border-radius:6px;
  background:rgba(34,197,94,.18);
}
.tc-vip-list li:after{
  content:'';
  position:absolute;
  left:6px;
  top:16px;
  width:8px;
  height:4px;
  border-left:3px solid #22c55e;
  border-bottom:3px solid #22c55e;
  transform:rotate(-45deg);
}
.tc-vip-actions{display:flex;justify-content:center;padding-top:14px;}
.tc-vip-cta{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:12px 18px;
  border-radius:10px;
  font-weight:700;
  background:#1f8a2c;
  color:#fff;
  min-width:180px;
}
.tc-vip-cta:hover{filter:brightness(1.05);}

body.tc-modal-open{overflow:hidden;}