:root{
  --tc-blue:#1687f8;
  --tc-blue-dark:#0876dc;
  --tc-text:#152033;
  --tc-muted:#7a8494;
  --tc-border:#e7ebf0;
  --tc-surface:#ffffff;
  --tc-background:#f3f6fa;
  --tc-danger:#e34b56;
  --tc-success:#19a86b;
  --tc-shadow:0 5px 20px rgba(15,34,60,.09);
  --tc-radius:18px;
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,
body{
  margin:0;
  min-height:100%;
  font-family:Arial,"Noto Sans Bengali","Noto Sans",sans-serif;
  color:var(--tc-text);
  background:var(--tc-background);
}

button,
input,
textarea{
  font:inherit;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tc-app-body{
  min-height:100vh;
  overflow-x:hidden;
}

.tc-app-shell{
  width:100%;
  min-height:100vh;
  padding-bottom:76px;
  background:#fff;
}

.tc-mobile-header{
  position:sticky;
  top:0;
  z-index:50;
  height:74px;
  display:flex;
  align-items:center;
  padding:0 16px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--tc-border);
  backdrop-filter:blur(18px);
}

.tc-header-profile{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:12px;
}

.tc-header-profile img,
.tc-header-profile > span{
  width:46px;
  height:46px;
  flex:none;
  border-radius:50%;
}

.tc-header-profile img{
  object-fit:cover;
}

.tc-header-profile > span{
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--tc-blue),#6267ef);
  font-size:19px;
  font-weight:800;
}

.tc-header-profile strong{
  display:block;
  font-size:22px;
  line-height:1.1;
}

.tc-header-profile small{
  display:block;
  margin-top:3px;
  color:var(--tc-muted);
  font-size:12px;
}

.tc-header-actions{
  display:flex;
  align-items:center;
  gap:4px;
}

.tc-icon-button,
.tc-back-button{
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#202a39;
  background:transparent;
  cursor:pointer;
}

.tc-icon-button:active,
.tc-back-button:active{
  background:#edf2f7;
}

.tc-popup-menu{
  position:absolute;
  z-index:100;
  top:65px;
  right:12px;
  width:210px;
  display:none;
  padding:7px;
  border:1px solid var(--tc-border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 12px 40px rgba(18,34,58,.18);
}

.tc-popup-menu.show{
  display:block;
}

.tc-popup-menu a,
.tc-popup-menu button{
  width:100%;
  display:block;
  padding:12px;
  border:0;
  border-radius:9px;
  color:var(--tc-text);
  background:transparent;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}

.tc-popup-menu a:hover,
.tc-popup-menu button:hover{
  background:#f2f6fa;
}

.tc-popup-menu form{
  margin:0;
}

.tc-popup-menu .danger{
  color:var(--tc-danger);
}

.tc-search-panel{
  position:sticky;
  top:74px;
  z-index:40;
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 15px;
  background:#fff;
  border-bottom:1px solid var(--tc-border);
}

.tc-search-panel.show{
  display:flex;
}

.tc-search-panel svg{
  width:21px;
  color:#7f8997;
}

.tc-search-panel input{
  min-width:0;
  flex:1;
  height:42px;
  padding:0 15px;
  border:0;
  border-radius:22px;
  outline:none;
  background:#f0f2f5;
  font-size:15px;
}

.tc-home-main{
  width:100%;
}

.tc-home-tabs{
  position:sticky;
  top:74px;
  z-index:30;
  display:flex;
  background:#fff;
  border-bottom:1px solid var(--tc-border);
}

.tc-tab{
  position:relative;
  flex:1;
  height:52px;
  border:0;
  color:#7b8594;
  background:#fff;
  font-weight:700;
  cursor:pointer;
}

.tc-tab span{
  display:inline-grid;
  min-width:21px;
  height:21px;
  place-items:center;
  margin-left:4px;
  padding:0 6px;
  border-radius:999px;
  color:#fff;
  background:#9da6b4;
  font-size:10px;
}

.tc-tab.active{
  color:var(--tc-blue);
}

.tc-tab.active span{
  background:var(--tc-blue);
}

.tc-tab.active::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:0;
  height:3px;
  border-radius:4px 4px 0 0;
  background:var(--tc-blue);
}

.tc-tab-section{
  display:none;
}

.tc-tab-section.active{
  display:block;
}

.tc-chat-list{
  background:#fff;
}

.tc-chat-row{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:10px 15px;
  color:var(--tc-text);
  text-decoration:none;
}

.tc-chat-row:active{
  background:#edf4fb;
}

.tc-chat-avatar{
  width:56px;
  height:56px;
  flex:none;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--tc-blue),#5368ee);
  font-size:22px;
  font-weight:800;
}

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

.tc-chat-info{
  min-width:0;
  flex:1;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-right:3px;
  border-bottom:1px solid #edf0f4;
}

.tc-chat-row:last-child .tc-chat-info{
  border-bottom:0;
}

.tc-chat-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.tc-chat-topline strong{
  min-width:0;
  overflow:hidden;
  font-size:16px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-chat-topline time{
  flex:none;
  color:var(--tc-blue);
  font-size:12px;
}

.tc-chat-preview{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:6px;
}

.tc-chat-preview p{
  min-width:0;
  flex:1;
  margin:0;
  overflow:hidden;
  color:#7b8492;
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-chat-preview small{
  flex:none;
  color:#9aa3af;
  font-size:11px;
}

.tc-mini-label,
.tc-open-label{
  flex:none;
  padding:4px 7px;
  border-radius:999px;
  color:#fff;
  background:var(--tc-blue);
  font-size:9px;
  font-weight:800;
}

.tc-open-label{
  color:var(--tc-blue);
  background:#edf5ff;
  font-size:10px;
}

.tc-empty-state{
  min-height:55vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px;
  text-align:center;
}

.tc-empty-circle{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  margin-bottom:17px;
  border-radius:50%;
  color:var(--tc-blue);
  background:#eaf4ff;
  font-size:30px;
  font-weight:800;
}

.tc-empty-state h2{
  margin:0 0 8px;
  font-size:20px;
}

.tc-empty-state p{
  max-width:310px;
  margin:0;
  color:var(--tc-muted);
  line-height:1.55;
}

.tc-floating-button{
  position:fixed;
  z-index:45;
  right:20px;
  bottom:91px;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--tc-blue);
  box-shadow:0 8px 24px rgba(22,135,248,.34);
}

.tc-floating-button svg{
  width:28px;
  height:28px;
  stroke-width:2.2;
}

.tc-bottom-nav{
  position:fixed;
  z-index:60;
  left:0;
  right:0;
  bottom:0;
  height:72px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.98);
  border-top:1px solid var(--tc-border);
  backdrop-filter:blur(18px);
}

.tc-bottom-nav a,
.tc-bottom-nav button{
  border:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#687384;
  background:transparent;
  text-decoration:none;
  font-size:11px;
}

.tc-bottom-nav svg{
  width:23px;
  height:23px;
}

.tc-bottom-nav .active{
  color:var(--tc-blue);
  font-weight:800;
}

/* Channel */

.tc-channel-shell{
  min-height:100vh;
  padding-bottom:77px;
  background:
    linear-gradient(rgba(220,244,224,.84),rgba(184,231,200,.84)),
    radial-gradient(circle at 15px 15px,rgba(255,255,255,.5) 2px,transparent 3px);
  background-size:auto,34px 34px;
}

.tc-channel-topbar{
  position:sticky;
  top:0;
  z-index:60;
  height:73px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 8px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--tc-border);
  backdrop-filter:blur(18px);
}

.tc-channel-title{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:11px;
}

.tc-channel-header-avatar{
  width:46px;
  height:46px;
  flex:none;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--tc-blue),#5a65ed);
  font-weight:800;
}

.tc-channel-header-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tc-channel-title strong{
  display:block;
  max-width:65vw;
  overflow:hidden;
  font-size:18px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-channel-title small{
  display:block;
  margin-top:2px;
  color:#818a98;
  font-size:13px;
}

.tc-channel-menu{
  top:64px;
}

.tc-channel-preview{
  width:calc(100% - 28px);
  max-width:540px;
  margin:18px auto;
  padding:22px;
  border-radius:20px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--tc-shadow);
  text-align:center;
}

.tc-preview-avatar{
  width:84px;
  height:84px;
  display:grid;
  place-items:center;
  margin:0 auto 13px;
  overflow:hidden;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--tc-blue),#5c65ee);
  font-size:32px;
  font-weight:800;
}

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

.tc-channel-preview h1{
  margin:0 0 5px;
  font-size:23px;
}

.tc-channel-preview > strong{
  display:block;
  color:var(--tc-blue);
}

.tc-channel-preview p{
  margin:14px 0;
  color:#5f6a7a;
  line-height:1.6;
  white-space:pre-wrap;
}

.tc-join-button{
  width:100%;
  height:46px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:var(--tc-blue);
  font-weight:800;
  cursor:pointer;
}

.tc-channel-feed{
  width:100%;
  max-width:780px;
  min-height:calc(100vh - 73px);
  margin:0 auto;
  padding:14px 13px 22px;
}

.tc-feed-preview{
  min-height:auto;
}

.tc-date-divider{
  display:flex;
  justify-content:center;
  margin:7px 0 13px;
}

.tc-date-divider span{
  padding:6px 12px;
  border-radius:999px;
  color:#fff;
  background:rgba(51,92,70,.57);
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(8px);
}

.tc-post-bubble{
  position:relative;
  width:calc(100% - 45px);
  max-width:570px;
  margin:0 0 13px;
  padding:6px;
  border-radius:9px 16px 16px 16px;
  background:#fff;
  box-shadow:0 2px 7px rgba(26,55,36,.14);
}

.tc-pinned-post,
.tc-forwarded-label{
  padding:7px 9px 4px;
  color:var(--tc-blue);
  font-size:12px;
  font-weight:800;
}

.tc-post-image-button{
  width:100%;
  padding:0;
  border:0;
  border-radius:7px 12px 7px 7px;
  overflow:hidden;
  background:#e8edf3;
  cursor:pointer;
}

.tc-post-image-button img{
  display:block;
  width:100%;
  max-height:650px;
  object-fit:cover;
}

.tc-post-video{
  display:block;
  width:100%;
  max-height:620px;
  border-radius:7px 12px 7px 7px;
  background:#000;
}

.tc-post-caption{
  padding:10px 10px 6px;
  color:#131b25;
  font-size:16px;
  line-height:1.48;
  white-space:normal;
  word-break:break-word;
}

.tc-post-caption a,
.tc-post-link{
  color:#0786d8;
  text-decoration:none;
}

.tc-post-link{
  display:block;
  padding:2px 10px 8px;
  word-break:break-all;
}

.tc-file-message{
  display:flex;
  align-items:center;
  gap:12px;
  margin:3px;
  padding:12px;
  border-radius:11px;
  color:var(--tc-text);
  background:#f1f7fc;
  text-decoration:none;
}

.tc-file-icon{
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--tc-blue);
}

.tc-file-message strong{
  display:block;
  max-width:330px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-file-message small{
  display:block;
  margin-top:4px;
  color:var(--tc-muted);
}

.tc-post-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  padding:1px 8px 5px;
  color:#8c96a3;
  font-size:11px;
}

.tc-view-count{
  display:flex;
  align-items:center;
  gap:3px;
}

.tc-view-count svg{
  width:15px;
  height:15px;
}

.tc-forward-float{
  position:absolute;
  right:-45px;
  bottom:4px;
  width:38px;
  height:38px;
  border:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:rgba(53,144,83,.75);
  cursor:pointer;
}

.tc-forward-float svg{
  width:19px;
  height:19px;
}

.tc-forward-float.copied{
  background:var(--tc-blue);
}

.tc-post-admin-row{
  display:flex;
  align-items:center;
  gap:5px;
  padding:7px 8px 5px;
  border-top:1px solid #edf0f3;
}

.tc-post-admin-row a,
.tc-post-admin-row button{
  border:0;
  padding:6px 9px;
  border-radius:7px;
  color:var(--tc-blue);
  background:#edf5ff;
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}

.tc-post-admin-row form{
  margin:0;
}

.tc-post-admin-row .danger{
  color:var(--tc-danger);
  background:#fff0f1;
}

.tc-feed-empty{
  min-height:55vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.tc-feed-empty > div{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--tc-blue);
  background:rgba(255,255,255,.85);
  font-size:28px;
  font-weight:800;
}

.tc-feed-empty h2{
  margin:13px 0 5px;
}

.tc-feed-empty p{
  margin:0;
  color:#63746a;
}

.tc-broadcast-bar,
.tc-member-bottom-bar{
  position:fixed;
  z-index:70;
  left:8px;
  right:8px;
  bottom:8px;
  height:59px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px;
  border-radius:30px;
  background:#fff;
  box-shadow:0 5px 23px rgba(25,48,33,.2);
}

.tc-composer-attach,
.tc-composer-send{
  width:49px;
  height:49px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#65707e;
}

.tc-composer-send{
  color:#fff;
  background:var(--tc-blue);
}

.tc-broadcast-input{
  min-width:0;
  flex:1;
  color:#89919c;
  text-decoration:none;
  font-size:16px;
}

.tc-member-bottom-bar{
  justify-content:center;
}

.tc-member-bottom-bar form{
  width:100%;
}

.tc-member-bottom-bar button{
  width:100%;
  height:49px;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--tc-blue);
  background:transparent;
  font-weight:800;
}

/* Editor */

.tc-editor-shell{
  width:100%;
  max-width:760px;
  min-height:100vh;
  margin:0 auto;
  background:#fff;
}

.tc-editor-header{
  position:sticky;
  top:0;
  z-index:30;
  height:69px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 8px;
  border-bottom:1px solid var(--tc-border);
  background:#fff;
}

.tc-editor-header > div{
  min-width:0;
  flex:1;
}

.tc-editor-header strong{
  display:block;
  font-size:18px;
}

.tc-editor-header small{
  display:block;
  margin-top:2px;
  color:var(--tc-muted);
}

.tc-publish-button{
  border:0;
  padding:10px 15px;
  border-radius:11px;
  color:#fff;
  background:var(--tc-blue);
  font-weight:800;
  cursor:pointer;
}

.tc-editor-error{
  margin:12px;
  padding:12px;
  border-radius:10px;
  color:var(--tc-danger);
  background:#fff0f1;
}

.tc-post-editor{
  padding:15px;
}

.tc-upload-preview{
  min-height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  overflow:hidden;
  border:2px dashed #d9e3ee;
  border-radius:17px;
  background:#f8fbfe;
  cursor:pointer;
}

.tc-upload-preview input{
  display:none;
}

#uploadPlaceholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  color:#758195;
  text-align:center;
}

#uploadPlaceholder svg{
  width:35px;
  height:35px;
  color:var(--tc-blue);
}

#uploadPlaceholder strong{
  color:#344154;
}

.tc-selected-file-preview{
  width:100%;
  display:none;
}

.tc-selected-file-preview.show{
  display:block;
}

.tc-selected-file-preview img,
.tc-selected-file-preview video{
  display:block;
  width:100%;
  max-height:520px;
  object-fit:contain;
}

.tc-selected-document{
  padding:25px;
}

.tc-selected-document strong,
.tc-selected-document small{
  display:block;
}

.tc-selected-document small{
  margin-top:6px;
  color:var(--tc-muted);
}

.tc-post-editor textarea{
  width:100%;
  min-height:230px;
  padding:15px 4px;
  border:0;
  outline:none;
  resize:vertical;
  color:var(--tc-text);
  background:#fff;
  font-size:17px;
  line-height:1.55;
}

.tc-link-input{
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 13px;
  border:1px solid var(--tc-border);
  border-radius:13px;
}

.tc-link-input svg{
  width:21px;
  color:var(--tc-blue);
}

.tc-link-input input{
  min-width:0;
  flex:1;
  height:49px;
  border:0;
  outline:none;
  background:transparent;
}

.tc-current-attachment{
  margin-bottom:14px;
  overflow:hidden;
  border-radius:14px;
  background:#f2f6fa;
}

.tc-current-attachment img{
  display:block;
  width:100%;
  max-height:430px;
  object-fit:contain;
}

.tc-current-attachment strong{
  display:block;
  padding:18px;
}

/* Image Preview */

.tc-image-preview{
  position:fixed;
  z-index:300;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.92);
}

.tc-image-preview.show{
  display:flex;
}

.tc-image-preview img{
  max-width:100%;
  max-height:92vh;
  object-fit:contain;
}

.tc-image-preview button{
  position:absolute;
  top:15px;
  right:15px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.17);
  font-size:28px;
}

/* Desktop */

@media(min-width:900px){
  .tc-app-shell{
    width:480px;
    min-height:100vh;
    margin:0 auto;
    border-left:1px solid var(--tc-border);
    border-right:1px solid var(--tc-border);
    box-shadow:0 0 40px rgba(18,37,61,.08);
  }

  .tc-channel-shell{
    width:760px;
    min-height:100vh;
    margin:0 auto;
    box-shadow:0 0 40px rgba(18,37,61,.12);
  }

  .tc-broadcast-bar,
  .tc-member-bottom-bar{
    width:744px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }

  .tc-bottom-nav{
    width:480px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }

  .tc-floating-button{
    right:calc(50% - 220px);
  }

  .tc-post-bubble{
    max-width:610px;
  }
}

@media(max-width:480px){
  .tc-channel-feed{
    padding-left:10px;
    padding-right:10px;
  }

  .tc-post-bubble{
    width:calc(100% - 41px);
  }

  .tc-forward-float{
    right:-41px;
  }

  .tc-post-caption{
    font-size:16px;
  }
}

/* =========================================================
   TELECHAT SHARED FORM SYSTEM
   Login / Register / Create Channel / Admin Login
   Do not remove when updating app UI.
   ========================================================= */

.auth-body{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:
    radial-gradient(circle at top left,rgba(22,135,248,.13),transparent 34%),
    radial-gradient(circle at bottom right,rgba(98,103,239,.12),transparent 34%),
    #f4f7fb;
}

.auth-card{
  width:100%;
  max-width:520px;
  padding:28px;
  border:1px solid #e4eaf1;
  border-radius:24px;
  background:#fff;
  box-shadow:0 22px 65px rgba(20,39,67,.13);
}

.auth-card-small{
  max-width:440px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:#152033;
  font-size:22px;
  font-weight:800;
  text-decoration:none;
}

.brand-logo{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,#1687f8,#6267ef);
  font-size:21px;
  font-weight:900;
}

.auth-card h1{
  margin:27px 0 8px;
  color:#152033;
  font-size:30px;
  line-height:1.2;
}

.auth-subtitle{
  margin:0 0 23px;
  color:#758195;
  font-size:15px;
  line-height:1.55;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:17px;
}

.auth-form label{
  display:block;
  color:#354156;
  font-size:14px;
  font-weight:800;
}

.auth-form label small{
  color:#8792a3;
  font-weight:500;
}

.auth-form input,
.auth-form textarea,
.auth-form select{
  width:100%;
  display:block;
  margin-top:8px;
  padding:14px;
  border:1px solid #d8e1ec;
  border-radius:13px;
  outline:none;
  color:#172033;
  background:#fbfdff;
  font:inherit;
  transition:.18s ease;
}

.auth-form input:focus,
.auth-form textarea:focus,
.auth-form select:focus{
  border-color:#1687f8;
  box-shadow:0 0 0 4px rgba(22,135,248,.11);
  background:#fff;
}

.auth-form textarea{
  min-height:110px;
  resize:vertical;
  line-height:1.55;
}

.username-input{
  display:flex;
  align-items:center;
  margin-top:8px;
  overflow:hidden;
  border:1px solid #d8e1ec;
  border-radius:13px;
  background:#fbfdff;
}

.username-input:focus-within{
  border-color:#1687f8;
  box-shadow:0 0 0 4px rgba(22,135,248,.11);
  background:#fff;
}

.username-input span{
  flex:none;
  padding-left:14px;
  color:#1687f8;
  font-weight:800;
}

.username-input input{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none!important;
  background:transparent;
}

.primary-button{
  width:100%;
  min-height:49px;
  border:0;
  border-radius:13px;
  color:#fff;
  background:#1687f8;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(22,135,248,.2);
}

.primary-button:active{
  transform:scale(.99);
  background:#0876dc;
}

.primary-link-button,
.secondary-link-button{
  display:block;
  padding:14px;
  border-radius:13px;
  text-align:center;
  text-decoration:none;
  font-weight:800;
}

.primary-link-button{
  color:#fff;
  background:#1687f8;
}

.secondary-link-button{
  color:#526176;
  background:#edf3f9;
}

.auth-footer{
  margin:22px 0 0;
  color:#727e90;
  text-align:center;
  font-size:14px;
}

.auth-footer a{
  color:#1687f8;
  font-weight:800;
  text-decoration:none;
}

.alert-error{
  margin:0 0 18px;
  padding:13px 15px;
  border-radius:12px;
  color:#c93643;
  background:#fff0f1;
  font-size:14px;
  line-height:1.5;
}

@media(max-width:600px){
  .auth-body{
    align-items:flex-start;
    padding:0;
    background:#fff;
  }

  .auth-card,
  .auth-card-small{
    width:100%;
    max-width:none;
    min-height:100vh;
    padding:25px 19px 40px;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .auth-card h1{
    font-size:28px;
  }

  .auth-form input,
  .auth-form textarea,
  .auth-form select{
    font-size:16px;
  }
}

/* =========================================================
   TELECHAT INLINE BROADCAST COMPOSER
   ========================================================= */

.tc-channel-shell{
  padding-bottom:78px;
}

.tc-inline-composer{
  position:fixed;
  z-index:80;
  left:8px;
  right:8px;
  bottom:8px;
  overflow:hidden;
  border:1px solid rgba(217,225,234,.85);
  border-radius:25px;
  background:#fff;
  box-shadow:0 6px 25px rgba(25,48,33,.22);
}

.tc-composer-row{
  min-height:58px;
  display:flex;
  align-items:flex-end;
  gap:5px;
  padding:5px;
}

.tc-inline-composer .tc-composer-attach{
  width:48px;
  height:48px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#647181;
  cursor:pointer;
}

.tc-inline-composer .tc-composer-attach:active{
  background:#eef3f7;
}

.tc-inline-composer textarea{
  min-width:0;
  flex:1;
  height:48px;
  max-height:130px;
  padding:13px 8px 9px;
  border:0;
  outline:none;
  resize:none;
  overflow-y:auto;
  color:#172033;
  background:transparent;
  font-size:16px;
  line-height:1.4;
}

.tc-inline-composer textarea::placeholder{
  color:#929aa5;
}

.tc-inline-composer textarea.tc-input-error{
  border-radius:10px;
  background:#fff0f1;
}

.tc-inline-composer .tc-composer-send{
  width:48px;
  height:48px;
  flex:none;
  border:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#1687f8;
  cursor:pointer;
}

.tc-inline-composer .tc-composer-send:disabled{
  opacity:.65;
}

.tc-inline-composer .tc-composer-send.sending svg{
  animation:tcSendPulse .7s infinite alternate;
}

@keyframes tcSendPulse{
  from{transform:translateX(-2px);opacity:.65}
  to{transform:translateX(2px);opacity:1}
}

.tc-inline-media-preview{
  position:relative;
  display:none;
  max-height:250px;
  padding:8px 8px 0;
  border-bottom:1px solid #edf1f5;
  background:#fff;
}

.tc-inline-media-preview.show{
  display:block;
}

#inlinePreviewContent img,
#inlinePreviewContent video{
  display:block;
  width:100%;
  max-height:230px;
  border-radius:15px;
  object-fit:contain;
  background:#eef2f6;
}

.tc-preview-remove{
  position:absolute;
  z-index:3;
  top:15px;
  right:15px;
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(0,0,0,.64);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.tc-inline-document{
  padding:17px;
  border-radius:14px;
  background:#f1f7fc;
}

.tc-inline-document strong,
.tc-inline-document small{
  display:block;
}

.tc-inline-document small{
  margin-top:5px;
  color:#7b8798;
}

.tc-inline-error{
  width:calc(100% - 24px);
  max-width:740px;
  margin:11px auto 0;
  padding:11px 14px;
  border-radius:11px;
  color:#c93643;
  background:#fff0f1;
  font-size:13px;
  font-weight:700;
}

.tc-post-bubble{
  scroll-margin-top:88px;
  transition:box-shadow .25s ease,transform .25s ease;
}

.tc-post-highlight{
  transform:scale(1.012);
  box-shadow:
    0 0 0 3px rgba(22,135,248,.35),
    0 7px 25px rgba(17,50,78,.2)!important;
}

.tc-post-caption a{
  color:#0786d8;
  text-decoration:none;
  word-break:break-word;
}

@media(min-width:900px){
  .tc-inline-composer{
    width:744px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
}

/* =========================================================
   CHANNEL FEED CORRECTIONS
   ========================================================= */

.tc-channel-title-button{
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.tc-post-bubble{
  width:min(calc(100% - 48px),460px);
  max-width:460px;
  padding:5px;
  border-radius:8px 15px 15px 15px;
}

.tc-post-image-button{
  display:block;
  width:100%;
  max-height:360px;
  background:#e4e9ee;
}

.tc-post-image-button img{
  display:block;
  width:100%;
  height:auto;
  max-height:360px;
  object-fit:cover;
  object-position:center;
}

.tc-post-video{
  max-height:360px;
}

.tc-post-caption{
  padding:9px 10px 7px;
  font-size:16px;
  line-height:1.46;
}

.tc-post-bottom-row{
  min-height:35px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  padding:0 5px 3px 8px;
}

.tc-post-bottom-row .tc-post-meta{
  padding:0;
}

.tc-post-share-button{
  width:32px;
  height:32px;
  border:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#6f7b88;
  background:#edf2f5;
  cursor:pointer;
}

.tc-post-share-button svg{
  width:17px;
  height:17px;
}

.tc-forwarded-channel{
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 8px 5px;
  color:#1687f8;
  text-decoration:none;
}

.tc-forwarded-avatar{
  width:33px;
  height:33px;
  flex:none;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#1687f8;
  font-size:13px;
  font-weight:800;
}

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

.tc-forwarded-channel small{
  display:block;
  color:#8792a0;
  font-size:10px;
}

.tc-forwarded-channel strong{
  display:block;
  margin-top:2px;
  color:#1687f8;
  font-size:13px;
}

.tc-preview-members{
  display:block;
  margin-top:7px;
  color:#7d8795;
}

.tc-private-feed-message{
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:25px;
  color:#4f6558;
  text-align:center;
}

.tc-private-feed-message > div{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  margin-bottom:13px;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  font-size:27px;
}

.tc-private-feed-message strong{
  font-size:17px;
}

.tc-private-feed-message span{
  max-width:300px;
  margin-top:7px;
  color:#718078;
  font-size:13px;
  line-height:1.5;
}

/* Bottom sheets */

.tc-sheet-overlay{
  position:fixed;
  z-index:250;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  background:rgba(0,0,0,.38);
}

.tc-sheet-overlay.show{
  display:flex;
}

.tc-channel-info-sheet,
.tc-share-sheet{
  position:relative;
  width:100%;
  max-width:520px;
  max-height:88vh;
  overflow-y:auto;
  padding:12px 20px 25px;
  border-radius:24px 24px 0 0;
  background:#fff;
  box-shadow:0 -10px 40px rgba(0,0,0,.18);
  animation:tcSheetOpen .2s ease-out;
}

@keyframes tcSheetOpen{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}

.tc-sheet-handle{
  width:44px;
  height:5px;
  margin:0 auto 18px;
  border-radius:999px;
  background:#d7dce2;
}

.tc-sheet-close{
  position:absolute;
  top:15px;
  right:17px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  color:#596575;
  background:#eef2f5;
  font-size:24px;
}

.tc-info-avatar{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  margin:0 auto 13px;
  overflow:hidden;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#1687f8,#6267ef);
  font-size:34px;
  font-weight:800;
}

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

.tc-channel-info-sheet{
  text-align:center;
}

.tc-channel-info-sheet h2{
  margin:0 0 4px;
}

.tc-channel-info-sheet > strong{
  display:block;
  color:#1687f8;
}

.tc-channel-info-sheet > small{
  display:block;
  margin-top:5px;
  color:#7c8694;
}

.tc-channel-info-sheet > p{
  margin:18px 0;
  padding:14px;
  border-radius:13px;
  color:#4b586a;
  background:#f5f7fa;
  line-height:1.6;
  text-align:left;
  white-space:pre-wrap;
}

.tc-info-action{
  width:100%;
  min-height:48px;
  margin-top:8px;
  border:0;
  border-radius:12px;
  color:#1687f8;
  background:#edf5ff;
  font-weight:800;
}

.tc-channel-info-sheet form{
  margin:0;
}

.tc-info-danger{
  color:#d9404d;
  background:#fff0f1;
}

.tc-share-sheet h3{
  margin:0 0 19px;
  text-align:center;
}

.tc-share-options{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.tc-share-options button{
  min-width:0;
  border:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:9px 3px;
  background:transparent;
}

.tc-share-options button span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#edf3f8;
  font-size:21px;
}

.tc-share-options button small{
  max-width:64px;
  overflow:hidden;
  color:#475466;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-share-cancel{
  width:100%;
  height:47px;
  margin-top:19px;
  border:0;
  border-radius:12px;
  color:#39475a;
  background:#edf1f5;
  font-weight:800;
}

@media(max-width:480px){
  .tc-post-bubble{
    width:calc(100% - 35px);
    max-width:430px;
  }

  .tc-post-image-button,
  .tc-post-image-button img,
  .tc-post-video{
    max-height:320px;
  }

  .tc-post-caption{
    font-size:15.5px;
  }

  .tc-share-options{
    gap:3px;
  }
}

/* Official share fallback notification */

.tc-toast{
  position:fixed;
  z-index:1000;
  left:50%;
  bottom:92px;
  max-width:calc(100% - 36px);
  padding:11px 17px;
  border-radius:999px;
  color:#fff;
  background:rgba(22,32,48,.92);
  box-shadow:0 8px 30px rgba(0,0,0,.22);
  font-size:13px;
  font-weight:700;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,18px);
  transition:opacity .2s ease,transform .2s ease;
}

.tc-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

/*
 * The old custom share sheet remains hidden because all share buttons
 * now directly request the Android official share sheet.
 */
#shareSheetOverlay{
  display:none!important;
}

/* =========================================================
   TELECHAT IN-APP NOTIFICATIONS
   ========================================================= */

.tc-notification-shell{
  width:100%;
  min-height:100vh;
  padding-bottom:75px;
  background:#fff;
}

.tc-page-header{
  position:sticky;
  top:0;
  z-index:50;
  height:72px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 9px;
  border-bottom:1px solid #e7ebf0;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px);
}

.tc-page-header > div{
  min-width:0;
  flex:1;
}

.tc-page-header strong{
  display:block;
  font-size:19px;
}

.tc-page-header small{
  display:block;
  margin-top:3px;
  color:#7a8494;
  font-size:12px;
}

.tc-page-header form{
  margin:0;
}

.tc-text-button{
  border:0;
  padding:10px;
  color:#1687f8;
  background:transparent;
  font-size:13px;
  font-weight:800;
}

.tc-notification-list{
  background:#fff;
}

.tc-notification-row{
  position:relative;
  display:flex;
  align-items:stretch;
  border-bottom:1px solid #edf0f4;
  background:#fff;
}

.tc-notification-row.unread{
  background:#f0f7ff;
}

.tc-notification-open{
  min-width:0;
  flex:1;
  margin:0;
}

.tc-notification-open > button{
  width:100%;
  min-height:86px;
  border:0;
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 8px 12px 15px;
  color:#152033;
  background:transparent;
  text-align:left;
}

.tc-notification-avatar{
  width:55px;
  height:55px;
  flex:none;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#1687f8,#6267ef);
  font-size:20px;
  font-weight:800;
}

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

.tc-notification-content{
  min-width:0;
  flex:1;
}

.tc-notification-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.tc-notification-title strong{
  min-width:0;
  overflow:hidden;
  font-size:15px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-notification-title span{
  width:9px;
  height:9px;
  flex:none;
  border-radius:50%;
  background:#1687f8;
}

.tc-notification-content p{
  margin:5px 0;
  overflow:hidden;
  color:#667286;
  font-size:13px;
  line-height:1.42;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-notification-content small{
  color:#929cab;
  font-size:11px;
}

.tc-notification-row > form:last-child{
  display:flex;
  align-items:center;
  margin:0;
}

.tc-notification-delete{
  width:38px;
  height:38px;
  margin-right:8px;
  border:0;
  border-radius:50%;
  color:#8c96a3;
  background:transparent;
  font-size:22px;
}

.tc-nav-icon-wrap{
  position:relative;
  display:grid;
  place-items:center;
}

.tc-nav-icon-wrap b{
  position:absolute;
  top:-8px;
  right:-13px;
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border:2px solid #fff;
  border-radius:999px;
  color:#fff;
  background:#f04452;
  font-size:9px;
  line-height:1;
}

@media(min-width:900px){
  .tc-notification-shell{
    width:480px;
    margin:0 auto;
    border-left:1px solid #e7ebf0;
    border-right:1px solid #e7ebf0;
    box-shadow:0 0 40px rgba(18,37,61,.08);
  }
}

/* =========================================================
   CHANNEL-SPECIFIC UNREAD BADGES
   ========================================================= */

.tc-channel-row-badges{
  flex:none;
  display:flex;
  align-items:center;
  gap:6px;
}

.tc-channel-unread-badge{
  min-width:23px;
  height:23px;
  display:grid;
  place-items:center;
  padding:0 7px;
  border:2px solid #fff;
  border-radius:999px;
  color:#fff;
  background:#f04452;
  box-shadow:0 3px 9px rgba(240,68,82,.28);
  font-size:11px;
  font-weight:900;
  line-height:1;
}

.tc-chat-row:has(.tc-channel-unread-badge) .tc-chat-topline strong{
  font-weight:900;
}

.tc-chat-row:has(.tc-channel-unread-badge) .tc-chat-preview p{
  color:#455164;
  font-weight:600;
}

/* =========================================================
   JOINED MEMBER CHANNEL BOTTOM NAV
   ========================================================= */

.tc-channel-member-nav{
  position:fixed;
  z-index:80;
  left:8px;
  right:8px;
  bottom:8px;
  min-height:62px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
  border:1px solid rgba(218,226,234,.92);
  border-radius:25px;
  background:rgba(255,255,255,.98);
  box-shadow:0 7px 27px rgba(25,48,33,.22);
  backdrop-filter:blur(18px);
}

.tc-channel-member-nav a,
.tc-channel-member-nav button{
  min-width:0;
  border:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:7px 4px;
  color:#687586;
  background:transparent;
  font-size:10px;
  font-weight:700;
  text-decoration:none;
}

.tc-channel-member-nav a:active,
.tc-channel-member-nav button:active{
  color:#1687f8;
  background:#edf5ff;
}

.tc-channel-member-nav svg{
  width:22px;
  height:22px;
}

.tc-channel-shell:has(.tc-channel-member-nav){
  padding-bottom:82px;
}

@media(min-width:900px){
  .tc-channel-member-nav{
    width:744px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
}

/* =========================================================
   REAL-TIME UPDATE STATES
   ========================================================= */

.tc-channel-unread-badge.hidden{
  display:none;
}

.tc-chat-row.has-unread .tc-chat-topline strong{
  font-weight:900;
}

.tc-chat-row.has-unread .tc-chat-preview p{
  color:#3f4c60;
  font-weight:650;
}

.tc-realtime-offline::after{
  content:"Reconnecting…";
  position:fixed;
  z-index:1200;
  top:10px;
  left:50%;
  padding:7px 13px;
  border-radius:999px;
  color:#fff;
  background:rgba(218,68,78,.94);
  box-shadow:0 5px 18px rgba(0,0,0,.2);
  font-size:11px;
  font-weight:800;
  transform:translateX(-50%);
}

/* =========================================================
   TELECHAT PUBLIC LANDING PAGE
   ========================================================= */

.welcome{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 20px;
  text-align:center;
  background:
    radial-gradient(circle at top left,rgba(22,135,248,.15),transparent 35%),
    radial-gradient(circle at bottom right,rgba(98,103,239,.13),transparent 36%),
    #f4f8fd;
}

.welcome .logo{
  width:90px;
  height:90px;
  display:grid;
  place-items:center;
  border-radius:28px;
  color:#fff;
  background:linear-gradient(135deg,#1687f8,#6267ef);
  box-shadow:0 18px 45px rgba(22,135,248,.28);
  font-size:46px;
  font-weight:900;
}

.welcome h1{
  margin:22px 0 9px;
  color:#152033;
  font-size:42px;
  line-height:1.1;
}

.welcome > p{
  max-width:430px;
  margin:0;
  color:#6f7b8e;
  font-size:17px;
  line-height:1.6;
}

.welcome-actions{
  display:flex;
  gap:11px;
  margin-top:25px;
}

.welcome .button{
  min-width:135px;
  padding:14px 20px;
  border-radius:13px;
  color:#fff;
  background:#1687f8;
  box-shadow:0 8px 20px rgba(22,135,248,.2);
  text-decoration:none;
  font-weight:800;
}

.welcome .button-light{
  color:#1687f8;
  background:#fff;
  border:1px solid #dce6f1;
  box-shadow:none;
}

.welcome .status{
  margin-top:22px;
  padding:11px 16px;
  border:1px solid #e2e9f1;
  border-radius:999px;
  color:#536075;
  background:#fff;
  box-shadow:0 8px 24px rgba(25,43,70,.07);
  font-size:13px;
  font-weight:700;
}

.welcome .status span{
  width:9px;
  height:9px;
  display:inline-block;
  margin-right:7px;
  border-radius:50%;
  background:#18b86c;
}

/* =========================================================
   TELECHAT ADMIN PANEL
   ========================================================= */

.admin-body{
  min-height:100vh;
  margin:0;
  color:#172033;
  background:#f3f6fb;
}

.admin-topbar{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 25px;
  border-bottom:1px solid #e4eaf1;
  background:#fff;
}

.admin-top-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.admin-top-actions a{
  color:#1687f8;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
}

.admin-top-actions form{
  margin:0;
}

.admin-top-actions button{
  padding:10px 14px;
  border:1px solid #dce4ee;
  border-radius:10px;
  color:#344155;
  background:#fff;
  font-weight:700;
}

.admin-container{
  width:min(1250px,calc(100% - 30px));
  margin:25px auto 60px;
}

.admin-welcome{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}

.admin-welcome h1{
  margin:0 0 6px;
  font-size:29px;
}

.admin-welcome p{
  margin:0;
  color:#788499;
  font-size:14px;
}

.super-admin-badge{
  padding:8px 13px;
  border-radius:999px;
  color:#1687f8;
  background:#eaf4ff;
  font-size:12px;
  font-weight:900;
}

.admin-alert{
  margin-bottom:17px;
  padding:13px 15px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
}

.admin-success{
  color:#177d4c;
  background:#e9f9f0;
}

.admin-error{
  color:#c93643;
  background:#fff0f1;
}

.admin-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
  margin-bottom:21px;
}

.admin-stats article{
  padding:20px;
  border:1px solid #e9edf3;
  border-radius:17px;
  background:#fff;
  box-shadow:0 8px 27px rgba(28,43,72,.055);
}

.admin-stats span{
  display:block;
  margin-bottom:9px;
  color:#788499;
  font-size:13px;
}

.admin-stats strong{
  font-size:28px;
}

.admin-card{
  margin-bottom:21px;
  padding:21px;
  border:1px solid #e8edf3;
  border-radius:19px;
  background:#fff;
  box-shadow:0 8px 27px rgba(28,43,72,.055);
}

.admin-section-title h2{
  margin:0 0 5px;
  font-size:21px;
}

.admin-section-title p{
  margin:0 0 18px;
  color:#7a8699;
  font-size:13px;
}

.admin-table-wrap{
  width:100%;
  overflow-x:auto;
}

.admin-table{
  width:100%;
  border-collapse:collapse;
  white-space:nowrap;
}

.admin-table th,
.admin-table td{
  padding:13px 11px;
  border-bottom:1px solid #edf1f5;
  text-align:left;
  vertical-align:middle;
  font-size:13px;
}

.admin-table th{
  color:#7b8799;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.admin-table tbody tr:last-child td{
  border-bottom:0;
}

.admin-user-cell,
.admin-channel-cell{
  display:flex;
  align-items:center;
  gap:11px;
}

.admin-channel-cell{
  color:#172033;
  text-decoration:none;
}

.admin-user-cell img,
.admin-user-cell > span,
.admin-channel-cell img,
.admin-channel-cell > span{
  width:45px!important;
  height:45px!important;
  max-width:45px!important;
  max-height:45px!important;
  flex:0 0 45px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  object-fit:cover;
  color:#fff;
  background:linear-gradient(135deg,#1687f8,#6267ef);
  font-size:16px;
  font-weight:900;
}

.admin-user-cell div,
.admin-channel-cell div{
  min-width:0;
}

.admin-user-cell strong,
.admin-channel-cell strong{
  display:block;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.admin-user-cell small,
.admin-channel-cell small{
  display:block;
  margin-top:3px;
  color:#7b8799;
}

.admin-user-cell em{
  display:inline-block;
  margin-top:4px;
  color:#1687f8;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}

.admin-primary-button,
.admin-danger-button,
.admin-warning-button{
  border:0;
  padding:9px 11px;
  border-radius:9px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.admin-primary-button{
  color:#fff;
  background:#1687f8;
}

.admin-danger-button{
  color:#c93643;
  background:#fff0f1;
}

.admin-warning-button{
  color:#96600d;
  background:#fff4dd;
}

.permission-on{
  color:#16854f;
  font-size:11px;
  font-weight:900;
}

.admin-block{
  display:block;
  margin-top:3px;
  color:#7d899b;
}

.admin-empty{
  padding:35px;
  color:#7d899b;
  text-align:center;
}

/* Admin login */

.admin-login-body{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:
    radial-gradient(circle at top left,rgba(22,135,248,.15),transparent 35%),
    radial-gradient(circle at bottom right,rgba(98,103,239,.13),transparent 35%),
    #f4f7fb;
}

.admin-login-card{
  width:100%;
  max-width:440px;
  padding:30px;
  border:1px solid #e2e8f0;
  border-radius:24px;
  background:#fff;
  box-shadow:0 23px 65px rgba(22,39,67,.14);
}

.admin-login-brand{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:27px;
}

.admin-login-brand strong{
  display:block;
  font-size:21px;
}

.admin-login-brand small{
  display:block;
  margin-top:3px;
  color:#7c8797;
}

.admin-login-card h1{
  margin:0 0 8px;
  font-size:29px;
}

.admin-login-card > p{
  margin:0 0 22px;
  color:#748095;
  line-height:1.55;
}

.admin-back-link{
  display:block;
  margin-top:21px;
  color:#1687f8;
  text-align:center;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

@media(max-width:800px){
  .admin-topbar{
    min-height:66px;
    padding:10px 13px;
  }

  .admin-topbar .brand{
    font-size:17px;
  }

  .admin-topbar .brand-logo{
    width:37px;
    height:37px;
  }

  .admin-container{
    width:calc(100% - 18px);
    margin-top:14px;
  }

  .admin-welcome{
    align-items:flex-start;
  }

  .admin-welcome h1{
    font-size:24px;
  }

  .admin-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .admin-stats article{
    padding:16px;
  }

  .admin-stats strong{
    font-size:24px;
  }

  .admin-card{
    padding:14px;
    border-radius:15px;
  }

  .admin-table{
    min-width:760px;
  }

  .admin-user-cell img,
  .admin-user-cell > span,
  .admin-channel-cell img,
  .admin-channel-cell > span{
    width:42px!important;
    height:42px!important;
    max-width:42px!important;
    max-height:42px!important;
    flex-basis:42px;
  }
}

@media(max-width:600px){
  .welcome h1{
    font-size:36px;
  }

  .welcome-actions{
    width:100%;
    max-width:350px;
    flex-direction:column;
  }

  .admin-login-body{
    align-items:flex-start;
    padding:0;
    background:#fff;
  }

  .admin-login-card{
    min-height:100vh;
    max-width:none;
    padding:28px 20px;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
}

/* =========================================================
   PWA PUSH NOTIFICATION PANEL
   ========================================================= */

.tc-push-card{
  display:flex;
  align-items:center;
  gap:12px;
  margin:12px;
  padding:14px;
  border:1px solid #dce7f2;
  border-radius:16px;
  background:linear-gradient(135deg,#f0f7ff,#f8f6ff);
}

.tc-push-icon{
  width:46px;
  height:46px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#1687f8,#6267ef);
}

.tc-push-icon svg{
  width:23px;
  height:23px;
}

.tc-push-card > div:nth-child(2){
  min-width:0;
  flex:1;
}

.tc-push-card strong{
  display:block;
  font-size:14px;
}

.tc-push-card p{
  margin:4px 0 0;
  color:#748095;
  font-size:11px;
  line-height:1.4;
}

.tc-push-card button{
  min-width:70px;
  height:37px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:#1687f8;
  font-size:12px;
  font-weight:800;
}

.tc-push-card button.enabled{
  color:#167847;
  background:#e4f7ec;
}

.tc-push-card button:disabled{
  opacity:.6;
}

/* =========================================================
   APP BRANDING ADMIN
   ========================================================= */

.tc-branding-form{
  display:flex;
  flex-direction:column;
  gap:17px;
}

.tc-branding-preview{
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px;
  border:1px solid #e4ebf3;
  border-radius:15px;
  background:#f8fbfe;
}

.tc-branding-preview img{
  width:68px;
  height:68px;
  flex:none;
  border-radius:18px;
  object-fit:cover;
  box-shadow:0 7px 20px rgba(24,43,72,.12);
}

.tc-branding-preview strong,
.tc-branding-preview small{
  display:block;
}

.tc-branding-preview strong{
  font-size:18px;
}

.tc-branding-preview small{
  margin-top:5px;
  color:#7a8699;
}

.tc-branding-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.tc-branding-grid label,
.tc-branding-logo-field{
  color:#354156;
  font-size:13px;
  font-weight:800;
}

.tc-branding-grid input,
.tc-branding-logo-field input{
  width:100%;
  min-height:45px;
  display:block;
  margin-top:7px;
  padding:10px;
  border:1px solid #d9e2ed;
  border-radius:11px;
  background:#fff;
}

.tc-branding-grid input[type="color"]{
  padding:5px;
}

.tc-branding-logo-field small{
  display:block;
  margin-top:4px;
  color:#8590a1;
  font-weight:500;
}

/* =========================================================
   PERSISTENT INSTALL BANNER
   ========================================================= */

.tc-install-banner{
  position:fixed;
  z-index:90;
  left:12px;
  right:12px;
  bottom:82px;
  min-height:69px;
  align-items:center;
  gap:11px;
  padding:10px;
  border:1px solid #dce7f2;
  border-radius:18px;
  background:rgba(255,255,255,.98);
  box-shadow:0 10px 35px rgba(20,40,70,.19);
  backdrop-filter:blur(18px);
}

.tc-install-banner:not([hidden]){
  display:flex;
}

.tc-install-banner img{
  width:48px;
  height:48px;
  flex:none;
  border-radius:14px;
  object-fit:cover;
}

.tc-install-banner > div{
  min-width:0;
  flex:1;
}

.tc-install-banner strong,
.tc-install-banner small{
  display:block;
}

.tc-install-banner strong{
  font-size:14px;
}

.tc-install-banner small{
  margin-top:4px;
  color:#748095;
  font-size:10px;
  line-height:1.4;
}

.tc-install-banner button{
  flex:none;
  border:0;
  padding:10px 13px;
  border-radius:10px;
  color:#fff;
  background:#1687f8;
  font-size:12px;
  font-weight:900;
}

/* =========================================================
   NOTIFICATION ONBOARDING
   ========================================================= */

.tc-onboarding-overlay{
  position:fixed;
  z-index:1000;
  inset:0;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(13,24,40,.47);
  opacity:0;
  transition:opacity .18s ease;
}

.tc-onboarding-overlay:not([hidden]){
  display:flex;
}

.tc-onboarding-overlay.show{
  opacity:1;
}

.tc-onboarding-card{
  position:relative;
  width:100%;
  max-width:390px;
  padding:29px 22px 20px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 75px rgba(0,0,0,.25);
  text-align:center;
  transform:translateY(18px) scale(.98);
  transition:transform .18s ease;
}

.tc-onboarding-overlay.show .tc-onboarding-card{
  transform:translateY(0) scale(1);
}

.tc-onboarding-close{
  position:absolute;
  top:12px;
  right:12px;
  width:35px;
  height:35px;
  border:0;
  border-radius:50%;
  color:#697586;
  background:#eef2f6;
  font-size:22px;
}

.tc-onboarding-icon{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  margin:0 auto 16px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#1687f8,#6267ef);
  box-shadow:0 12px 28px rgba(22,135,248,.25);
}

.tc-onboarding-icon svg{
  width:33px;
  height:33px;
}

.tc-onboarding-card h2{
  margin:0 0 9px;
  font-size:23px;
}

.tc-onboarding-card p{
  margin:0 0 20px;
  color:#687487;
  font-size:14px;
  line-height:1.55;
}

.tc-onboarding-primary,
.tc-onboarding-later{
  width:100%;
  min-height:47px;
  border:0;
  border-radius:12px;
  font-weight:900;
}

.tc-onboarding-primary{
  color:#fff;
  background:#1687f8;
}

.tc-onboarding-later{
  margin-top:8px;
  color:#667386;
  background:#eef2f6;
}

@media(max-width:700px){
  .tc-branding-grid{
    grid-template-columns:1fr;
  }
}

@media(min-width:900px){
  .tc-install-banner{
    width:456px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
}

/* =========================================================
   LAST READ + LIVE VIEW COUNT
   ========================================================= */

.tc-view-count b{
  font:inherit;
  font-weight:700;
}

.tc-post-meta time{
  cursor:default;
}

.tc-jump-latest{
  position:fixed;
  z-index:79;
  right:16px;
  bottom:86px;
  min-width:48px;
  height:48px;
  border:1px solid rgba(215,225,234,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 13px;
  border-radius:999px;
  color:#1687f8;
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 28px rgba(17,45,70,.22);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  backdrop-filter:blur(16px);
}

.tc-jump-latest[hidden]{
  display:none!important;
}

.tc-jump-latest svg{
  width:21px;
  height:21px;
  stroke-width:2.3;
}

.tc-jump-latest:active{
  transform:scale(.96);
  background:#edf6ff;
}

.tc-last-read-highlight{
  box-shadow:
    0 0 0 3px rgba(22,135,248,.28),
    0 8px 28px rgba(20,55,75,.2)!important;
}

@media(min-width:900px){
  .tc-jump-latest{
    right:calc(50% - 355px);
  }
}

/* =========================================================
   PREMIUM POST DESIGN + REACTIONS + MULTI SELECT
   ========================================================= */

.tc-post-bubble{
  position:relative;
  overflow:visible;
  cursor:pointer;
}

.tc-post-bubble:hover{
  box-shadow:0 7px 24px rgba(32,73,49,.17);
}

.tc-post-caption{
  color:#172033;
  font-size:16px;
  line-height:1.55;
  letter-spacing:.002em;
  word-break:break-word;
}

.tc-post-caption a{
  color:#087fd0;
  font-weight:600;
}

.tc-post-reactions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding:5px 8px 7px;
}

.tc-post-reactions button{
  min-height:31px;
  border:1px solid #e2eaf1;
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:999px;
  color:#536174;
  background:#f7fafc;
  font-size:13px;
  cursor:pointer;
}

.tc-post-reactions button.active{
  border-color:#8cc9ff;
  color:#0878cf;
  background:#eaf5ff;
}

.tc-post-reactions button span{
  font-size:17px;
  line-height:1;
}

.tc-post-reactions button b{
  font-size:11px;
}

.tc-post-reactions .tc-add-reaction{
  width:31px;
  min-width:31px;
  padding:0;
  justify-content:center;
  color:#788594;
  font-size:18px;
}

.tc-reaction-picker{
  position:fixed;
  z-index:1300;
  width:284px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:5px;
  border:1px solid #e1e7ee;
  border-radius:999px;
  background:#fff;
  box-shadow:0 12px 38px rgba(18,35,56,.24);
}

.tc-reaction-picker[hidden]{
  display:none!important;
}

.tc-reaction-picker button{
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:transparent;
  font-size:25px;
  transition:transform .14s ease;
}

.tc-reaction-picker button:active{
  transform:scale(1.28);
}

.tc-post-select-check{
  position:absolute;
  z-index:8;
  top:9px;
  left:-42px;
  width:31px;
  height:31px;
  border:2px solid #fff;
  display:none;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#a5afbb;
  box-shadow:0 3px 12px rgba(0,0,0,.18);
  font-size:15px;
  font-weight:900;
}

.tc-post-selection-mode .tc-post-select-check{
  display:grid;
}

.tc-post-bubble.selected{
  box-shadow:
    0 0 0 3px rgba(22,135,248,.4),
    0 8px 25px rgba(20,55,75,.21)!important;
}

.tc-post-bubble.selected .tc-post-select-check{
  background:#1687f8;
}

.tc-selection-toolbar{
  position:fixed;
  z-index:950;
  left:8px;
  right:8px;
  bottom:8px;
  min-height:59px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px;
  border-radius:20px;
  color:#172033;
  background:#fff;
  box-shadow:0 8px 35px rgba(18,38,60,.25);
}

.tc-selection-toolbar[hidden]{
  display:none!important;
}

.tc-selection-toolbar strong{
  min-width:0;
  flex:1;
  padding-left:5px;
  font-size:14px;
}

.tc-selection-toolbar button{
  min-height:43px;
  border:0;
  padding:0 13px;
  border-radius:12px;
  color:#1687f8;
  background:#edf5ff;
  font-size:12px;
  font-weight:900;
}

.tc-selection-toolbar > button:first-child{
  width:43px;
  padding:0;
  border-radius:50%;
  color:#647183;
  background:#eef2f6;
  font-size:22px;
}

.tc-selection-toolbar button.danger{
  color:#d33e4c;
  background:#fff0f1;
}

.tc-post-action-sheet,
.tc-forward-channel-sheet{
  width:100%;
  max-width:520px;
  max-height:88vh;
  overflow-y:auto;
  padding:12px 17px 22px;
  border-radius:24px 24px 0 0;
  background:#fff;
  animation:tcSheetOpen .2s ease-out;
}

.tc-post-action-sheet > button,
.tc-post-action-sheet > a,
.tc-post-action-sheet form button{
  width:100%;
  min-height:50px;
  border:0;
  display:flex;
  align-items:center;
  padding:0 16px;
  border-radius:11px;
  color:#263449;
  background:transparent;
  font-size:15px;
  text-align:left;
  text-decoration:none;
}

.tc-post-action-sheet > button:active,
.tc-post-action-sheet > a:active,
.tc-post-action-sheet form button:active{
  background:#edf4fa;
}

.tc-post-action-sheet form{
  margin:0;
}

.tc-post-action-sheet .danger{
  color:#d33f4d;
}

.tc-post-action-sheet .tc-action-cancel,
.tc-forward-channel-sheet .tc-action-cancel{
  justify-content:center;
  margin-top:9px;
  color:#536174;
  background:#edf1f5;
  font-weight:800;
}

.tc-forward-channel-sheet h3{
  margin:0;
  text-align:center;
}

.tc-forward-channel-sheet > p{
  margin:6px 0 15px;
  color:#7b8797;
  font-size:12px;
  text-align:center;
}

.tc-forward-channel-list{
  display:flex;
  flex-direction:column;
  gap:3px;
  max-height:50vh;
  overflow-y:auto;
}

.tc-forward-channel-list label{
  min-height:64px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px;
  border-radius:13px;
  cursor:pointer;
}

.tc-forward-channel-list label:has(input:checked){
  background:#eaf5ff;
}

.tc-forward-channel-list input{
  width:20px;
  height:20px;
  accent-color:#1687f8;
}

.tc-forward-channel-avatar{
  width:44px;
  height:44px;
  flex:none;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#1687f8,#6267ef);
}

.tc-forward-channel-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tc-forward-channel-list strong,
.tc-forward-channel-list small{
  display:block;
}

.tc-forward-channel-list small{
  margin-top:3px;
  color:#7b8797;
}

.tc-forward-confirm{
  width:100%;
  min-height:48px;
  margin-top:15px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:#1687f8;
  font-weight:900;
}

.tc-post-selection-mode .tc-inline-composer{
  display:none;
}

.tc-post-selection-mode .tc-jump-latest{
  display:none!important;
}

.tc-legacy-admin-row{
  display:none;
}

@media(min-width:900px){
  .tc-selection-toolbar{
    width:744px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
}

@media(max-width:500px){
  .tc-post-selection-mode .tc-post-bubble{
    margin-left:37px;
    width:calc(100% - 72px);
  }

  .tc-post-select-check{
    left:-37px;
  }
}

/* =========================================================
   CORRECTED TELEGRAM-STYLE REACTION EXPERIENCE
   ========================================================= */

.tc-post-reactions.empty{
  display:none;
}

.tc-post-reactions{
  padding:5px 9px 7px;
}

.tc-post-reactions .tc-add-reaction{
  display:none!important;
}

.tc-post-reactions button{
  cursor:pointer;
}

.tc-action-reaction-section{
  padding:1px 4px 13px;
}

.tc-action-reaction-section > strong{
  display:block;
  margin-bottom:11px;
  color:#687587;
  font-size:12px;
  font-weight:800;
  text-align:center;
}

.tc-action-reaction-row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:5px;
}

.tc-action-reaction-row button{
  width:100%;
  min-height:46px;
  aspect-ratio:1;
  border:1px solid transparent;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease;
}

.tc-action-reaction-row button span{
  font-size:28px;
  line-height:1;
}

.tc-action-reaction-row button:active{
  transform:scale(1.2);
}

.tc-action-reaction-row button.active{
  border-color:#8ecbff;
  background:#eaf5ff;
  box-shadow:
    0 4px 12px
    rgba(22,135,248,.14);
}

.tc-action-reaction-row button:disabled{
  opacity:.55;
}

.tc-action-divider{
  width:100%;
  height:1px;
  margin:4px 0;
  background:#edf0f4;
}

.tc-post-action-sheet > button,
.tc-post-action-sheet > a,
.tc-post-action-sheet form button{
  gap:12px;
}

.tc-action-icon{
  width:27px;
  flex:none;
  display:inline-grid;
  place-items:center;
  color:#657386;
  font-size:18px;
}

.tc-post-action-sheet .danger .tc-action-icon{
  color:#d33f4d;
}

.tc-post-image-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:8px 13px 7px 7px;
}

.tc-post-image-wrap .tc-post-image-button{
  width:100%;
  border-radius:0;
}

.tc-image-view-button{
  position:absolute;
  z-index:4;
  top:9px;
  right:9px;
  width:37px;
  height:37px;
  border:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:rgba(18,29,43,.62);
  box-shadow:
    0 4px 14px
    rgba(0,0,0,.18);
  font-size:18px;
  backdrop-filter:blur(7px);
}

.tc-image-view-button:active{
  transform:scale(.94);
  background:rgba(18,29,43,.78);
}

@media(max-width:420px){
  .tc-action-reaction-row{
    gap:2px;
  }

  .tc-action-reaction-row button{
    min-height:43px;
  }

  .tc-action-reaction-row button span{
    font-size:26px;
  }
}

/* =========================================================
   TELECHAT PREMIUM PROFILE PAGE
   ========================================================= */

.tc-profile-page{
  background:#f3f6fa;
}

.tc-profile-page .tc-app-shell{
  min-height:100vh;
  padding-bottom:92px;
  background:#f3f6fa;
}

.tc-profile-topbar{
  position:sticky;
  z-index:100;
  top:0;
  min-height:61px;
  display:grid;
  grid-template-columns:46px 1fr 60px;
  align-items:center;
  padding:0 11px;
  border-bottom:1px solid #e5eaf0;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px);
}

.tc-profile-topbar > strong{
  font-size:18px;
  text-align:center;
}

.tc-profile-back{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#273448;
}

.tc-profile-back svg{
  width:25px;
  height:25px;
}

.tc-profile-edit-trigger{
  border:0;
  color:#1687f8;
  background:transparent;
  font-size:14px;
  font-weight:900;
}

.tc-profile-alert{
  margin:10px 12px 0;
  padding:12px 14px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
}

.tc-profile-alert.success{
  color:#18794c;
  background:#e8f8ef;
}

.tc-profile-alert.error{
  color:#c73543;
  background:#fff0f1;
}

.tc-profile-main{
  width:100%;
  max-width:760px;
  margin:0 auto;
}

.tc-profile-hero{
  position:relative;
  padding:0 18px 23px;
  overflow:hidden;
  background:#fff;
  text-align:center;
}

.tc-profile-cover{
  height:115px;
  margin:0 -18px;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,.32),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #1687f8,
      #5668f0
    );
}

.tc-profile-avatar-wrap{
  position:relative;
  width:116px;
  height:116px;
  margin:-59px auto 12px;
}

.tc-profile-avatar{
  width:116px;
  height:116px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:5px solid #fff;
  border-radius:50%;
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #1687f8,
      #6267ef
    );
  box-shadow:
    0 10px 28px
    rgba(30,55,90,.22);
}

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

.tc-profile-avatar span{
  font-size:45px;
  font-weight:900;
}

.tc-profile-avatar-wrap > button{
  position:absolute;
  right:1px;
  bottom:3px;
  width:37px;
  height:37px;
  border:3px solid #fff;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#1687f8;
}

.tc-profile-avatar-wrap > button svg{
  width:18px;
  height:18px;
}

.tc-profile-hero h1{
  margin:0;
  color:#182337;
  font-size:25px;
  line-height:1.25;
}

.tc-profile-username{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:5px;
  color:#778396;
  font-size:14px;
}

.tc-profile-username span{
  padding:3px 7px;
  border-radius:999px;
  color:#1687f8;
  background:#eaf5ff;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
}

.tc-profile-bio{
  max-width:500px;
  margin:13px auto 0;
  color:#455267;
  font-size:14px;
  line-height:1.5;
  white-space:pre-line;
}

.tc-add-bio-button{
  margin-top:11px;
  border:0;
  color:#1687f8;
  background:transparent;
  font-size:13px;
  font-weight:800;
}

.tc-profile-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin:11px 12px;
  overflow:hidden;
  border:1px solid #e6ebf1;
  border-radius:17px;
  background:#e6ebf1;
  box-shadow:
    0 5px 20px
    rgba(25,42,70,.05);
}

.tc-profile-stats article{
  min-width:0;
  padding:16px 4px;
  background:#fff;
  text-align:center;
}

.tc-profile-stats strong,
.tc-profile-stats span{
  display:block;
}

.tc-profile-stats strong{
  color:#172237;
  font-size:20px;
}

.tc-profile-stats span{
  margin-top:4px;
  color:#7d899a;
  font-size:10px;
}

.tc-profile-card{
  margin:11px 12px;
  overflow:hidden;
  border:1px solid #e7ecf2;
  border-radius:17px;
  background:#fff;
  box-shadow:
    0 5px 20px
    rgba(25,42,70,.045);
}

.tc-profile-card > h2,
.tc-profile-card-heading{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0;
  padding:0 15px;
  border-bottom:1px solid #edf1f5;
}

.tc-profile-card > h2,
.tc-profile-card-heading h2{
  margin:0;
  color:#69768a;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.tc-profile-card-heading a{
  color:#1687f8;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}

.tc-profile-info-row{
  min-height:67px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 15px;
  border-bottom:1px solid #edf1f5;
}

.tc-profile-info-row:last-child{
  border-bottom:0;
}

.tc-profile-info-icon{
  width:39px;
  height:39px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#f0f5fb;
  font-size:18px;
}

.tc-profile-info-row > div{
  min-width:0;
  flex:1;
}

.tc-profile-info-row small,
.tc-profile-info-row strong{
  display:block;
}

.tc-profile-info-row small{
  color:#8691a1;
  font-size:10px;
}

.tc-profile-info-row strong{
  margin-top:3px;
  overflow:hidden;
  color:#263247;
  font-size:14px;
  text-overflow:ellipsis;
}

.tc-profile-private-label{
  padding:5px 8px;
  border-radius:999px;
  color:#778497;
  background:#eef2f6;
  font-size:9px;
  font-weight:800;
}

.tc-profile-channel-list > a{
  min-height:65px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 14px;
  border-bottom:1px solid #edf1f5;
  color:#253248;
  text-decoration:none;
}

.tc-profile-channel-list > a:last-child{
  border-bottom:0;
}

.tc-profile-channel-avatar{
  width:45px;
  height:45px;
  flex:none;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #1687f8,
      #6267ef
    );
  font-weight:900;
}

.tc-profile-channel-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tc-profile-channel-list > a > div:nth-child(2){
  min-width:0;
  flex:1;
}

.tc-profile-channel-list strong,
.tc-profile-channel-list small{
  display:block;
}

.tc-profile-channel-list strong{
  overflow:hidden;
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-profile-channel-list small{
  margin-top:4px;
  color:#8390a1;
  font-size:10px;
}

.tc-profile-channel-list svg{
  width:18px;
  height:18px;
  color:#a3acb8;
}

.tc-profile-actions-card > button,
.tc-profile-actions-card > a{
  width:100%;
  min-height:69px;
  border:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 15px;
  border-bottom:1px solid #edf1f5;
  color:#263247;
  background:#fff;
  text-align:left;
  text-decoration:none;
}

.tc-profile-actions-card > *:last-child{
  border-bottom:0;
}

.tc-profile-action-icon{
  width:41px;
  height:41px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:13px;
  font-size:18px;
}

.tc-profile-action-icon.blue{
  color:#1687f8;
  background:#eaf5ff;
}

.tc-profile-action-icon.red{
  color:#e24151;
  background:#fff0f1;
}

.tc-profile-action-icon.purple{
  color:#6757e8;
  background:#f0edff;
}

.tc-profile-action-icon.green{
  color:#17875a;
  background:#e9f8f0;
}

.tc-profile-action-icon.orange{
  color:#d77817;
  background:#fff3e4;
}

.tc-profile-actions-card > button > span:nth-child(2),
.tc-profile-actions-card > a > span:nth-child(2){
  min-width:0;
  flex:1;
}

.tc-profile-actions-card strong,
.tc-profile-actions-card small{
  display:block;
}

.tc-profile-actions-card strong{
  font-size:14px;
}

.tc-profile-actions-card small{
  margin-top:3px;
  color:#8792a1;
  font-size:10px;
}

.tc-profile-actions-card b{
  color:#a3acb8;
  font-size:25px;
  font-weight:400;
}

.tc-profile-logout{
  margin:17px 12px 0;
}

.tc-profile-logout button{
  width:100%;
  min-height:51px;
  border:1px solid #ffd9dd;
  border-radius:15px;
  color:#d83e4d;
  background:#fff;
  font-size:14px;
  font-weight:900;
}

.tc-profile-version{
  margin:15px 0 28px;
  color:#a0a9b5;
  font-size:10px;
  text-align:center;
}

.tc-profile-bottom-nav{
  position:fixed;
  z-index:90;
  left:0;
  right:0;
  bottom:0;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(18px);
}

.tc-profile-bottom-nav a{
  color:#778294;
}

.tc-profile-bottom-nav a.active{
  color:#1687f8;
}

/* Profile editor */

.tc-profile-editor-overlay{
  position:fixed;
  z-index:1200;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  visibility:hidden;
  background:rgba(16,27,42,.48);
  opacity:0;
  transition:
    opacity .2s ease,
    visibility .2s ease;
}

.tc-profile-editor-overlay.show{
  visibility:visible;
  opacity:1;
}

.tc-profile-editor{
  width:100%;
  max-width:560px;
  max-height:92vh;
  overflow-y:auto;
  padding:10px 18px 25px;
  border-radius:25px 25px 0 0;
  background:#fff;
  transform:translateY(100%);
  transition:transform .23s ease;
}

.tc-profile-editor-overlay.show
.tc-profile-editor{
  transform:translateY(0);
}

.tc-profile-editor-heading{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.tc-profile-editor-heading h2{
  margin:0;
  font-size:20px;
}

.tc-profile-editor-heading button{
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  color:#667386;
  background:#eef2f6;
  font-size:22px;
}

.tc-profile-editor form{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.tc-profile-photo-editor{
  align-self:center;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  color:#1687f8!important;
  cursor:pointer;
}

.tc-profile-photo-editor input{
  display:none!important;
}

.tc-profile-photo-editor > span{
  width:91px;
  height:91px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:4px solid #edf4fb;
  border-radius:50%;
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #1687f8,
      #6267ef
    );
}

.tc-profile-photo-editor img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tc-profile-photo-editor b{
  font-size:35px;
}

.tc-profile-photo-editor small{
  margin-top:7px;
  color:#1687f8;
  font-weight:800;
}

.tc-profile-editor form > label{
  position:relative;
  display:block;
  color:#435066;
  font-size:12px;
  font-weight:800;
}

.tc-profile-editor input[type="text"],
.tc-profile-editor textarea{
  width:100%;
  margin-top:7px;
  border:1px solid #dce4ed;
  border-radius:12px;
  color:#1f2c40;
  background:#f9fbfd;
  font:inherit;
  font-size:14px;
  outline:none;
}

.tc-profile-editor input[type="text"]{
  min-height:47px;
  padding:0 13px;
}

.tc-profile-editor textarea{
  min-height:96px;
  padding:12px 13px;
  resize:none;
  line-height:1.45;
}

.tc-profile-editor input:focus,
.tc-profile-editor textarea:focus{
  border-color:#78bfff;
  background:#fff;
  box-shadow:
    0 0 0 3px
    rgba(22,135,248,.1);
}

.tc-profile-username-input{
  display:flex;
  align-items:center;
  margin-top:7px;
  border:1px solid #dce4ed;
  border-radius:12px;
  background:#f9fbfd;
}

.tc-profile-username-input span{
  padding-left:13px;
  color:#7d8999;
  font-size:15px;
}

.tc-profile-username-input input{
  flex:1;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.tc-profile-bio-count{
  position:absolute;
  right:9px;
  bottom:8px;
  color:#99a3af;
  font-size:9px;
}

.tc-profile-switch-row{
  min-height:62px;
  display:flex!important;
  align-items:center;
  gap:12px;
  padding:8px 0;
}

.tc-profile-switch-row > span{
  min-width:0;
  flex:1;
}

.tc-profile-switch-row strong,
.tc-profile-switch-row small{
  display:block;
}

.tc-profile-switch-row strong{
  color:#263247;
  font-size:14px;
}

.tc-profile-switch-row small{
  margin-top:4px;
  color:#8691a0;
  font-weight:400;
}

.tc-profile-switch-row input{
  width:45px;
  height:24px;
  accent-color:#1687f8;
}

.tc-profile-save-button{
  min-height:49px;
  border:0;
  border-radius:13px;
  color:#fff;
  background:#1687f8;
  box-shadow:
    0 8px 20px
    rgba(22,135,248,.2);
  font-size:14px;
  font-weight:900;
}

@media(min-width:900px){
  .tc-profile-editor{
    margin-bottom:18px;
    border-radius:25px;
  }

  .tc-profile-topbar{
    max-width:760px;
    margin:auto;
  }
}

/* =========================================================
   TELECHAT PREMIUM AUTH PAGES
   ========================================================= */

.tc-auth-body{
  min-height:100vh;
  margin:0;
  color:#172237;
  background:
    radial-gradient(
      circle at top left,
      rgba(22,135,248,.17),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #eef7ff,
      #f7f9fc
    );
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.tc-auth-shell{
  width:100%;
  max-width:520px;
  min-height:100vh;
  margin:0 auto;
  padding:35px 16px;
  box-sizing:border-box;
}

.tc-auth-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:10px 0 25px;
  color:#172237;
  text-decoration:none;
}

.tc-auth-brand > span{
  width:51px;
  height:51px;
  display:grid;
  place-items:center;
  border-radius:17px;
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #1297f5,
      #5868f3
    );
  box-shadow:
    0 10px 24px
    rgba(22,135,248,.24);
  font-size:26px;
  font-weight:800;
}

.tc-auth-brand strong,
.tc-auth-brand small{
  display:block;
}

.tc-auth-brand strong{
  font-size:22px;
}

.tc-auth-brand small{
  margin-top:2px;
  color:#7d8999;
  font-size:10px;
}

.tc-auth-card{
  padding:25px 20px;
  border:1px solid rgba(220,230,240,.9);
  border-radius:25px;
  background:rgba(255,255,255,.96);
  box-shadow:
    0 18px 50px
    rgba(33,56,85,.11);
}

.tc-auth-heading{
  margin-bottom:23px;
  text-align:center;
}

.tc-auth-heading h1{
  margin:0;
  font-size:27px;
}

.tc-auth-heading p{
  margin:8px auto 0;
  color:#7c8797;
  font-size:13px;
  line-height:1.45;
}

.tc-auth-error{
  margin-bottom:16px;
  padding:12px 14px;
  border:1px solid #ffd7db;
  border-radius:12px;
  color:#c93745;
  background:#fff1f2;
  font-size:12px;
  font-weight:700;
}

.tc-auth-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.tc-auth-form > label{
  display:block;
  color:#435066;
  font-size:12px;
  font-weight:800;
}

.tc-auth-form > label > small{
  display:block;
  margin-top:6px;
  color:#8994a3;
  font-size:9px;
  font-weight:400;
  line-height:1.45;
}

.tc-auth-form input,
.tc-auth-form textarea{
  width:100%;
  box-sizing:border-box;
  margin-top:7px;
  border:1px solid #dce4ed;
  border-radius:13px;
  color:#1d2a3e;
  background:#f9fbfd;
  font:inherit;
  font-size:14px;
  outline:none;
}

.tc-auth-form input{
  min-height:49px;
  padding:0 13px;
}

.tc-auth-form textarea{
  min-height:86px;
  padding:12px 13px;
  resize:vertical;
  line-height:1.45;
}

.tc-auth-form input:focus,
.tc-auth-form textarea:focus{
  border-color:#71baff;
  background:#fff;
  box-shadow:
    0 0 0 3px
    rgba(22,135,248,.1);
}

.tc-auth-username-field,
.tc-auth-password-field{
  display:flex;
  align-items:center;
  margin-top:7px;
  overflow:hidden;
  border:1px solid #dce4ed;
  border-radius:13px;
  background:#f9fbfd;
}

.tc-auth-username-field:focus-within,
.tc-auth-password-field:focus-within{
  border-color:#71baff;
  background:#fff;
  box-shadow:
    0 0 0 3px
    rgba(22,135,248,.1);
}

.tc-auth-username-field > span{
  padding-left:13px;
  color:#818c9b;
  font-size:16px;
}

.tc-auth-username-field input,
.tc-auth-password-field input{
  flex:1;
  min-width:0;
  margin:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.tc-auth-password-field button{
  min-width:58px;
  min-height:49px;
  border:0;
  color:#1687f8;
  background:transparent;
  font-size:11px;
  font-weight:800;
}

.tc-auth-photo{
  display:flex!important;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
}

.tc-auth-photo input{
  display:none;
}

.tc-auth-photo > span{
  width:83px;
  height:83px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:4px solid #edf5fc;
  border-radius:50%;
  color:#1687f8;
  background:#eaf5ff;
}

.tc-auth-photo > span svg{
  width:38px;
  height:38px;
}

.tc-auth-photo > span img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tc-auth-photo > small{
  margin-top:7px!important;
  color:#1687f8!important;
  font-weight:800!important;
}

.tc-auth-optional{
  float:right;
  color:#9aa4b1;
  font-size:9px;
  font-weight:500;
}

.tc-auth-submit{
  min-height:51px;
  margin-top:3px;
  border:0;
  border-radius:14px;
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #1594f5,
      #3978f1
    );
  box-shadow:
    0 9px 22px
    rgba(22,135,248,.24);
  font-size:14px;
  font-weight:900;
}

.tc-auth-submit:active{
  transform:scale(.985);
}

.tc-auth-switch{
  margin:21px 0 0;
  color:#7d8998;
  font-size:12px;
  text-align:center;
}

.tc-auth-switch a{
  color:#1687f8;
  font-weight:900;
  text-decoration:none;
}

@media(max-width:480px){
  .tc-auth-shell{
    padding:22px 12px;
  }

  .tc-auth-card{
    padding:22px 16px;
    border-radius:21px;
  }
}

/* =========================================================
   TELECHAT PERSISTENT APP SHELL — PHASE 1
   ========================================================= */

html.tc-soft-navigating::before{
  content:"";
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #1687f8,
      #4d6df3,
      transparent
    );
  background-size:220% 100%;
  animation:
    telechatSoftNavigationProgress
    .75s linear infinite;
}

html.tc-soft-navigating body{
  cursor:progress;
}

.tc-app-shell,
.tc-notification-shell,
.tc-profile-page .tc-app-shell{
  animation:
    telechatScreenEnter
    .16s ease-out;
}

@keyframes telechatSoftNavigationProgress{
  from{
    background-position:100% 0;
  }

  to{
    background-position:-120% 0;
  }
}

@keyframes telechatScreenEnter{
  from{
    opacity:.84;
    transform:translateX(5px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}

@media(prefers-reduced-motion:reduce){
  .tc-app-shell,
  .tc-notification-shell,
  .tc-profile-page .tc-app-shell{
    animation:none;
  }

  html.tc-soft-navigating::before{
    animation:none;
  }
}

/* =========================================================
   TELECHAT CHANNEL APP-SHELL TRANSITION
   ========================================================= */

.tc-channel-shell{
  animation:
    telechatChannelScreenEnter
    .16s ease-out;
}

@keyframes telechatChannelScreenEnter{
  from{
    opacity:.88;
    transform:translateX(7px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}

html.tc-soft-navigating
.tc-channel-shell,
html.tc-soft-navigating
.tc-app-shell,
html.tc-soft-navigating
.tc-notification-shell{
  pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  .tc-channel-shell{
    animation:none;
  }
}

/* =========================================================
   TELECHAT BACKGROUND CACHE UPDATE INDICATOR
   ========================================================= */

html[data-telechat-cache-updated="1"]::after{
  content:"Updated";
  position:fixed;
  z-index:99998;
  top:10px;
  right:11px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  color:#fff;
  background:rgba(35,48,67,.88);
  box-shadow:0 5px 18px rgba(0,0,0,.15);
  font-size:10px;
  font-weight:800;
  pointer-events:none;
  animation:telechatCacheUpdated .2s ease-out;
}

@keyframes telechatCacheUpdated{
  from{
    opacity:0;
    transform:translateY(-7px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   TELECHAT LIVE POST APPEND — PHASE 3B
   ========================================================= */

.tc-channel-feed
.tc-post-bubble:last-child{
  animation:
    telechatLivePostEnter
    .24s ease-out;
}

@keyframes telechatLivePostEnter{
  from{
    opacity:0;
    transform:translateY(13px) scale(.985);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.tc-jump-latest:not([hidden]){
  animation:
    telechatNewPostButton
    .2s ease-out;
}

@keyframes telechatNewPostButton{
  from{
    opacity:0;
    transform:translateY(8px) scale(.94);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media(prefers-reduced-motion:reduce){
  .tc-channel-feed
  .tc-post-bubble:last-child,
  .tc-jump-latest:not([hidden]){
    animation:none;
  }
}

/* =========================================================
   OWNER-ONLY CHANNEL DELETE SYSTEM
   ========================================================= */

.tc-channel-danger-zone{
  display:flex;
  align-items:center;
  gap:14px;
  margin:14px 12px;
  padding:14px;
  border:1px solid #ffd5da;
  border-radius:15px;
  background:#fff5f6;
}

.tc-channel-danger-zone > div{
  min-width:0;
  flex:1;
}

.tc-channel-danger-zone strong,
.tc-channel-danger-zone small{
  display:block;
}

.tc-channel-danger-zone strong{
  color:#d33848;
  font-size:14px;
}

.tc-channel-danger-zone small{
  margin-top:4px;
  color:#8a6870;
  font-size:10px;
  line-height:1.4;
}

.tc-channel-danger-zone button{
  flex:none;
  border:0;
  padding:10px 13px;
  border-radius:10px;
  color:#fff;
  background:#df3d4d;
  font-size:11px;
  font-weight:900;
}

.tc-delete-channel-overlay{
  position:fixed;
  z-index:3000;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  padding:18px;
  background:rgba(14,24,38,.58);
  opacity:0;
  transition:
    opacity .2s ease,
    visibility .2s ease;
}

.tc-delete-channel-overlay.show{
  visibility:visible;
  opacity:1;
}

.tc-delete-channel-dialog{
  width:100%;
  max-width:390px;
  padding:25px 20px 19px;
  border-radius:23px;
  background:#fff;
  box-shadow:
    0 25px 75px
    rgba(0,0,0,.27);
  text-align:center;
  transform:
    translateY(16px)
    scale(.98);
  transition:transform .2s ease;
}

.tc-delete-channel-overlay.show
.tc-delete-channel-dialog{
  transform:
    translateY(0)
    scale(1);
}

.tc-delete-channel-warning{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  border-radius:50%;
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #f05462,
      #cf3042
    );
  box-shadow:
    0 10px 25px
    rgba(218,55,73,.25);
  font-size:35px;
  font-weight:900;
}

.tc-delete-channel-dialog h2{
  margin:0;
  color:#202b3d;
  font-size:23px;
}

.tc-delete-channel-dialog > p{
  margin:10px 0 13px;
  color:#687486;
  font-size:13px;
  line-height:1.55;
}

.tc-delete-channel-notice{
  margin-bottom:15px;
  padding:10px;
  border-radius:10px;
  color:#c73544;
  background:#fff0f1;
  font-size:11px;
  font-weight:900;
}

.tc-delete-channel-dialog label{
  display:block;
  color:#536075;
  font-size:11px;
  font-weight:700;
  text-align:left;
}

.tc-delete-channel-dialog label b{
  color:#d23848;
}

.tc-delete-channel-dialog input{
  width:100%;
  min-height:47px;
  box-sizing:border-box;
  margin-top:8px;
  padding:0 13px;
  border:1px solid #dce3eb;
  border-radius:11px;
  color:#202c3f;
  background:#f9fbfd;
  font-size:14px;
  outline:none;
}

.tc-delete-channel-dialog input:focus{
  border-color:#e46774;
  background:#fff;
  box-shadow:
    0 0 0 3px
    rgba(218,55,73,.1);
}

.tc-confirm-channel-delete,
.tc-cancel-channel-delete{
  width:100%;
  min-height:47px;
  border:0;
  border-radius:12px;
  font-size:13px;
  font-weight:900;
}

.tc-confirm-channel-delete{
  margin-top:16px;
  color:#fff;
  background:#d93c4c;
}

.tc-confirm-channel-delete:disabled{
  opacity:.6;
}

.tc-cancel-channel-delete{
  margin-top:8px;
  color:#5f6c7f;
  background:#edf1f5;
}

/* TELECHAT SETTINGS PAGE FIX START */

.tc-settings-page{
  width:100%;
  max-width:760px;
  min-height:100vh;
  margin:auto;
  background:#f3f6fa;
}

.tc-settings-header{
  position:sticky;
  z-index:50;
  top:0;
  min-height:68px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 15px;
  border-bottom:1px solid #e4e9ef;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);
}

.tc-settings-header > a{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#1f2c40;
  font-size:37px;
  line-height:1;
  text-decoration:none;
}

.tc-settings-header strong,
.tc-settings-header small{
  display:block;
}

.tc-settings-header strong{
  color:#162238;
  font-size:18px;
}

.tc-settings-header small{
  margin-top:2px;
  color:#8490a0;
  font-size:10px;
}

.tc-settings-content{
  padding:14px 12px 40px;
}

.tc-settings-alert{
  margin-bottom:13px;
  padding:12px 14px;
  border-radius:12px;
  font-size:12px;
  font-weight:800;
}

.tc-settings-alert.success{
  color:#147144;
  background:#e8f8ef;
}

.tc-settings-alert.error{
  color:#bd3242;
  background:#ffedef;
}

.tc-settings-profile{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:13px;
  padding:16px;
  border:1px solid #e4e9ef;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(34,51,77,.05);
}

.tc-settings-profile-logo{
  width:72px;
  height:72px;
  flex:none;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#1687f8,#6558eb);
  font-size:28px;
  font-weight:900;
}

.tc-settings-profile-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tc-settings-profile > div:last-child{
  min-width:0;
}

.tc-settings-profile strong,
.tc-settings-profile span,
.tc-settings-profile small{
  display:block;
}

.tc-settings-profile strong{
  overflow:hidden;
  color:#17243a;
  font-size:18px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-settings-profile span{
  margin-top:3px;
  color:#1687f8;
  font-size:12px;
}

.tc-settings-profile small{
  margin-top:6px;
  color:#8a95a5;
  font-size:10px;
}

.tc-settings-form{
  display:grid;
  gap:13px;
}

.tc-settings-card{
  padding:16px;
  border:1px solid #e4e9ef;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(34,51,77,.04);
}

.tc-settings-card h2{
  margin:0 0 14px;
  color:#26354a;
  font-size:13px;
}

.tc-settings-card > label:not(.tc-settings-upload):not(.tc-settings-remove){
  display:block;
  margin-top:14px;
}

.tc-settings-card > label:first-of-type{
  margin-top:0;
}

.tc-settings-card label > span{
  display:block;
  margin-bottom:7px;
  color:#69768a;
  font-size:11px;
  font-weight:800;
}

.tc-settings-card input[type="text"],
.tc-settings-card textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #dce3eb;
  border-radius:12px;
  color:#202e42;
  background:#f9fbfd;
  font:inherit;
  outline:none;
}

.tc-settings-card input[type="text"]{
  min-height:48px;
  padding:0 13px;
}

.tc-settings-card textarea{
  min-height:125px;
  padding:12px 13px;
  line-height:1.5;
  resize:vertical;
}

.tc-settings-card input:focus,
.tc-settings-card textarea:focus{
  border-color:#1687f8;
  background:#fff;
  box-shadow:0 0 0 3px rgba(22,135,248,.1);
}

.tc-settings-counter{
  display:block;
  margin-top:6px;
  color:#929dab;
  font-size:9px;
  text-align:right;
}

.tc-settings-upload{
  min-height:78px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:13px 15px;
  border:1.5px dashed #afd2f5;
  border-radius:14px;
  color:#1687f8;
  background:#f1f8ff;
  cursor:pointer;
}

.tc-settings-upload input{
  display:none;
}

.tc-settings-upload strong{
  font-size:13px;
}

.tc-settings-upload small{
  margin-top:4px;
  color:#8290a2;
  font-size:9px;
}

.tc-settings-remove{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:13px;
  color:#d23848;
  font-size:11px;
  font-weight:800;
}

.tc-settings-remove span{
  margin:0!important;
  color:inherit!important;
}

.tc-settings-link-box{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 7px 0 13px;
  border:1px solid #dce3eb;
  border-radius:12px;
  background:#f9fbfd;
}

.tc-settings-link-box span{
  min-width:0;
  flex:1;
  overflow:hidden;
  color:#1687f8;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-settings-link-box button{
  min-width:70px;
  min-height:35px;
  border:0;
  border-radius:9px;
  color:#fff;
  background:#1687f8;
  font-size:11px;
  font-weight:900;
}

.tc-settings-submit{
  width:100%;
  min-height:52px;
  border:0;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(135deg,#1687f8,#0874de);
  box-shadow:0 10px 23px rgba(22,135,248,.22);
  font-size:14px;
  font-weight:900;
}

.tc-edit-channel-link{
  display:flex!important;
  align-items:center;
    justify-content:center;
  gap:8px;
  text-decoration:none;
}

/* TELECHAT SETTINGS PAGE FIX END */

/* =========================================================
   TELECHAT CHANNEL USERNAME SYSTEM
   ========================================================= */

.tc-username-settings-card{
  margin-top:0;
}

.tc-username-form{
  display:grid;
  gap:11px;
}

.tc-username-form label > span{
  display:block;
  margin-bottom:7px;
  color:#69768a;
  font-size:11px;
  font-weight:800;
}

.tc-username-input-wrap{
  min-height:49px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid #dce3eb;
  border-radius:12px;
  background:#f9fbfd;
}

.tc-username-input-wrap:focus-within{
  border-color:#1687f8;
  background:#fff;
  box-shadow:0 0 0 3px rgba(22,135,248,.1);
}

.tc-username-input-wrap b{
  flex:none;
  padding-left:13px;
  color:#1687f8;
  font-size:13px;
}

.tc-username-input-wrap input{
  width:100%;
  min-width:0;
  min-height:47px;
  padding:0 13px 0 2px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#202e42;
  font-size:13px;
  outline:none;
}

.tc-username-status{
  min-height:18px;
  color:#8490a1;
  font-size:10px;
  line-height:1.45;
}

.tc-username-status.checking{
  color:#8a6d22;
}

.tc-username-status.success{
  color:#16804d;
}

.tc-username-status.error{
  color:#c63647;
}

.tc-username-status.neutral{
  color:#778497;
}

.tc-username-save{
  width:100%;
  min-height:47px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:#1687f8;
  font-size:12px;
  font-weight:900;
}

.tc-username-save:disabled{
  cursor:not-allowed;
  opacity:.5;
}

.tc-username-inline-message{
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:10px;
  font-size:10px;
  font-weight:800;
}

.tc-username-inline-message.success{
  color:#167246;
  background:#e8f8ef;
}

.tc-username-inline-message.error{
  color:#bd3242;
  background:#ffedef;
}

/* =========================================================
   TELEGRAM-STYLE PINNED MESSAGE BANNER
   ========================================================= */

.tc-pinned-banner{
  position:sticky;
  z-index:42;
  top:72px;
  width:100%;
  min-height:53px;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  border-bottom:1px solid rgba(218,225,233,.95);
  background:rgba(255,255,255,.97);
  box-shadow:0 5px 16px rgba(34,50,73,.08);
  opacity:0;
  transform:translateY(-8px);
  transition:
    opacity .18s ease,
    transform .18s ease;
  backdrop-filter:blur(14px);
}

.tc-pinned-banner[hidden]{
  display:none!important;
}

.tc-pinned-banner.show{
  opacity:1;
  transform:translateY(0);
}

.tc-pinned-main{
  min-width:0;
  min-height:53px;
  flex:1;
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 4px 6px 12px;
  border:0;
  color:inherit;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.tc-pinned-main:active{
  background:#f5f8fb;
}

.tc-pinned-accent{
  width:3px;
  height:38px;
  flex:none;
  border-radius:8px;
  background:#1687f8;
}

.tc-pinned-thumbnail{
  width:40px;
  height:40px;
  flex:none;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:#1687f8;
  background:#eaf5ff;
  font-size:17px;
}

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

.tc-pinned-thumbnail.icon-only{
  border:1px solid #d9edff;
}

.tc-pinned-content{
  min-width:0;
  flex:1;
}

.tc-pinned-content strong,
.tc-pinned-content small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-pinned-content strong{
  color:#1687f8;
  font-size:11px;
  font-weight:900;
  line-height:1.25;
}

.tc-pinned-content strong span{
  margin-right:3px;
  font-size:10px;
}

.tc-pinned-content small{
  margin-top:3px;
  color:#455268;
  font-size:11px;
  line-height:1.35;
}

.tc-pinned-close{
  width:44px;
  min-height:53px;
  flex:none;
  border:0;
  color:#93a0af;
  background:transparent;
  font-size:24px;
  font-weight:300;
  cursor:pointer;
}

.tc-pinned-close:active{
  color:#526175;
  background:#f2f5f8;
}

@media(max-width:420px){
  .tc-pinned-banner{
    top:70px;
  }

  .tc-pinned-main{
    padding-left:9px;
  }

  .tc-pinned-thumbnail{
    width:37px;
    height:37px;
  }

  .tc-pinned-content small{
    font-size:10.5px;
  }
}

/* TELECHAT PREMIUM HOME PHASE 1 START */

/* =========================================================
   PREMIUM APPLICATION BACKGROUND
   ========================================================= */

:root{
  --tc-premium-primary:#1687f8;
  --tc-premium-primary-dark:#0878e5;
  --tc-premium-soft:#edf7ff;
  --tc-premium-text:#142033;
  --tc-premium-muted:#7a8797;
  --tc-premium-line:#edf1f5;
  --tc-premium-card:#ffffff;
  --tc-premium-shadow:0 12px 34px rgba(35,67,100,.09);
}

.tc-app-body{
  background:
    radial-gradient(
      circle at 12% -5%,
      rgba(22,135,248,.12),
      transparent 28%
    ),
    radial-gradient(
      circle at 95% 7%,
      rgba(82,209,179,.10),
      transparent 25%
    ),
    #f5f8fc;
}

.tc-app-shell{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.96) 0,
      rgba(248,251,255,.96) 230px,
      #f6f8fb 100%
    );
}

/* =========================================================
   PREMIUM HEADER
   ========================================================= */

.tc-mobile-header{
  min-height:86px;
  padding:13px 18px 11px;
  border-bottom:1px solid rgba(226,233,241,.85);
  background:rgba(255,255,255,.90);
  box-shadow:0 8px 24px rgba(47,70,95,.06);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.tc-header-profile{
  min-width:0;
  gap:12px;
}

.tc-header-profile > img,
.tc-header-profile > span{
  width:52px;
  height:52px;
  flex:none;
  border:3px solid rgba(255,255,255,.95);
  border-radius:50%;
  box-shadow:
    0 0 0 2px rgba(22,135,248,.15),
    0 8px 20px rgba(22,135,248,.18);
}

.tc-header-profile > span{
  display:grid;
  place-items:center;
  color:#fff;
  background:
    linear-gradient(
      145deg,
      #258eff,
      #7367ff
    );
  font-size:20px;
  font-weight:900;
}

.tc-header-profile > div{
  min-width:0;
}

.tc-header-profile strong{
  display:block;
  overflow:hidden;
  color:var(--tc-premium-text);
  font-size:22px;
  font-weight:900;
  letter-spacing:-.45px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-header-profile small{
  display:block;
  margin-top:2px;
  overflow:hidden;
  color:#8b96a5;
  font-size:13px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-header-actions{
  gap:5px;
}

.tc-header-actions .tc-icon-button{
  width:43px;
  height:43px;
  border:0;
  border-radius:50%;
  color:#28374a;
  background:transparent;
  transition:
    transform .15s ease,
    background .15s ease;
}

.tc-header-actions .tc-icon-button:active{
  transform:scale(.92);
  background:#eaf4ff;
}

/* =========================================================
   PREMIUM SEARCH
   ========================================================= */

.tc-search-panel{
  position:relative;
  margin:14px 17px 7px;
  padding:0;
  border:1px solid rgba(228,234,241,.9);
  border-radius:22px;
  background:rgba(239,243,248,.90);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    0 8px 20px rgba(35,55,80,.04);
  overflow:hidden;
}

.tc-search-panel svg{
  width:23px;
  height:23px;
  margin-left:17px;
  color:#8190a2;
}

.tc-search-panel input{
  height:58px;
  padding:0 18px 0 13px;
  border:0;
  outline:0;
  color:#172438;
  background:transparent;
  font-size:16px;
  font-weight:600;
}

.tc-search-panel input::placeholder{
  color:#929ba8;
  font-weight:500;
}

/* =========================================================
   HOME CONTENT AND TABS
   ========================================================= */

.tc-home-main{
  padding-top:5px;
  padding-bottom:105px;
}

.tc-home-tabs{
  position:sticky;
  z-index:20;
  top:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:8px 17px 10px;
  padding:5px;
  border:1px solid rgba(227,233,240,.82);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  box-shadow:0 9px 26px rgba(42,66,93,.06);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.tc-home-tabs .tc-tab{
  min-height:46px;
  padding:8px 11px;
  border:0;
  border-radius:14px;
  color:#7c8999;
  background:transparent;
  font-size:15px;
  font-weight:800;
  transition:
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.tc-home-tabs .tc-tab.active{
  color:#087bdc;
  background:
    linear-gradient(
      145deg,
      #edf7ff,
      #e5f3ff
    );
  box-shadow:
    0 5px 15px rgba(22,135,248,.13),
    inset 0 0 0 1px rgba(22,135,248,.09);
}

.tc-home-tabs .tc-tab:active{
  transform:scale(.97);
}

.tc-home-tabs .tc-tab span{
  min-width:23px;
  height:23px;
  margin-left:5px;
  padding:0 7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff;
  background:#9ba8b8;
  font-size:11px;
  font-weight:900;
}

.tc-home-tabs .tc-tab.active span{
  background:
    linear-gradient(
      145deg,
      #2495ff,
      #087cdf
    );
  box-shadow:0 5px 12px rgba(22,135,248,.25);
}

/* =========================================================
   PREMIUM CHANNEL LIST
   ========================================================= */

.tc-tab-section{
  padding:1px 12px 18px;
}

.tc-chat-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.tc-chat-row{
  position:relative;
  min-height:86px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 12px;
  border:1px solid rgba(229,235,242,.92);
  border-radius:20px;
  color:inherit;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(250,252,255,.97)
    );
  box-shadow:
    0 7px 22px rgba(47,69,96,.055),
    inset 0 1px 0 rgba(255,255,255,.95);
  text-decoration:none;
  overflow:hidden;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.tc-chat-row::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:0 5px 5px 0;
  background:transparent;
}

.tc-chat-row.has-unread{
  border-color:rgba(22,135,248,.17);
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f5faff
    );
  box-shadow:
    0 10px 28px rgba(22,135,248,.09),
    inset 0 1px 0 rgba(255,255,255,.96);
}

.tc-chat-row.has-unread::before{
  background:
    linear-gradient(
      180deg,
      #29a0ff,
      #0879df
    );
}

.tc-chat-row:active{
  transform:scale(.985);
  border-color:rgba(22,135,248,.25);
  box-shadow:0 4px 14px rgba(47,69,96,.08);
}

.tc-chat-avatar{
  position:relative;
  width:62px;
  height:62px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:
    linear-gradient(
      145deg,
      #1b98ff,
      #5568f5
    );
  box-shadow:
    0 9px 22px rgba(38,123,230,.19),
    inset 0 0 0 1px rgba(255,255,255,.22);
  overflow:hidden;
}

.tc-chat-avatar::after{
  content:"";
  position:absolute;
  right:2px;
  bottom:2px;
  width:12px;
  height:12px;
  border:3px solid #fff;
  border-radius:50%;
  background:#34c88a;
  box-shadow:0 2px 7px rgba(29,156,101,.28);
}

.tc-chat-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}

.tc-chat-avatar span{
  font-size:23px;
  font-weight:900;
  text-shadow:0 2px 5px rgba(0,0,0,.12);
}

.tc-chat-info{
  min-width:0;
  flex:1;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.tc-chat-topline{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.tc-chat-topline strong{
  min-width:0;
  flex:1;
  overflow:hidden;
  color:#182438;
  font-size:16px;
  font-weight:850;
  letter-spacing:-.15px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-chat-topline time,
.tc-chat-topline small{
  flex:none;
  color:#8995a4;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}

.tc-chat-row.has-unread .tc-chat-topline time,
.tc-chat-row.has-unread .tc-chat-topline small{
  color:#1387e8;
}

.tc-chat-preview{
  min-width:0;
  margin-top:5px;
  display:flex;
  align-items:center;
  gap:8px;
}

.tc-chat-preview p{
  min-width:0;
  flex:1;
  margin:0;
  overflow:hidden;
  color:#7d8898;
  font-size:13.5px;
  font-weight:530;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tc-chat-row.has-unread .tc-chat-preview p{
  color:#4b5e73;
  font-weight:690;
}

.tc-channel-row-badges{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:6px;
}

.tc-mini-label,
.tc-open-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:21px;
  padding:2px 8px;
  border:1px solid rgba(22,135,248,.12);
  border-radius:999px;
  color:#167fd7;
  background:#ecf7ff;
  font-size:10px;
  font-weight:850;
  line-height:1;
}

.tc-channel-unread-badge{
  min-width:24px;
  height:24px;
  padding:0 7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
  border-radius:999px;
  color:#fff;
  background:
    linear-gradient(
      145deg,
      #27a0ff,
      #087fe5
    );
  box-shadow:0 5px 13px rgba(22,135,248,.28);
  font-size:11px;
  font-weight:900;
  line-height:1;
}

.tc-channel-unread-badge:not(.hidden){
  animation:tcPremiumUnreadBadge .28s ease-out;
}

@keyframes tcPremiumUnreadBadge{
  from{
    opacity:0;
    transform:scale(.65);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* =========================================================
   DISCOVER CHANNEL DESIGN
   ========================================================= */

#discoverSection .tc-chat-row{
  min-height:96px;
  align-items:flex-start;
  padding:14px;
}

#discoverSection .tc-chat-avatar{
  width:66px;
  height:66px;
}

#discoverSection .tc-chat-preview{
  margin-top:7px;
  align-items:flex-start;
  flex-direction:column;
}

#discoverSection .tc-chat-preview p{
  max-width:100%;
  display:-webkit-box;
  overflow:hidden;
  white-space:normal;
  line-height:1.4;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

#discoverSection .tc-chat-preview small{
  color:#728095;
  font-size:11px;
  font-weight:750;
}

#discoverSection .tc-open-label{
  color:#fff;
  border:0;
  background:
    linear-gradient(
      145deg,
      #249cff,
      #087ade
    );
  box-shadow:0 5px 12px rgba(22,135,248,.22);
}

/* =========================================================
   PREMIUM EMPTY STATE
   ========================================================= */

.tc-empty-state{
  min-height:265px;
  margin:10px 5px;
  padding:32px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(137,157,180,.28);
  border-radius:25px;
  text-align:center;
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(22,135,248,.10),
      transparent 45%
    ),
    rgba(255,255,255,.74);
  box-shadow:0 12px 32px rgba(38,62,89,.05);
}

.tc-empty-circle{
  width:76px;
  height:76px;
  margin-bottom:16px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#1687f8;
  background:
    linear-gradient(
      145deg,
      #edf8ff,
      #dfefff
    );
  box-shadow:
    0 10px 25px rgba(22,135,248,.15),
    inset 0 0 0 1px rgba(22,135,248,.08);
  font-size:27px;
  font-weight:900;
}

.tc-empty-state h2{
  margin:0;
  color:#1b293d;
  font-size:19px;
  font-weight:900;
}

.tc-empty-state p{
  max-width:285px;
  margin:8px 0 0;
  color:#8490a0;
  font-size:13.5px;
  line-height:1.55;
}

/* =========================================================
   FLOATING CREATE BUTTON
   ========================================================= */

.tc-floating-button{
  right:20px;
  bottom:91px;
  width:61px;
  height:61px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:
    linear-gradient(
      145deg,
      #22a2ff,
      #087be3
    );
  box-shadow:
    0 14px 32px rgba(22,135,248,.33),
    inset 0 1px 0 rgba(255,255,255,.30);
  transition:
    transform .17s ease,
    box-shadow .17s ease;
}

.tc-floating-button::before{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:-1;
  border-radius:50%;
  background:rgba(22,135,248,.10);
}

.tc-floating-button:active{
  transform:scale(.92);
  box-shadow:0 8px 20px rgba(22,135,248,.27);
}

/* =========================================================
   PREMIUM BOTTOM NAVIGATION
   ========================================================= */

.tc-bottom-nav{
  min-height:78px;
  padding:7px 8px max(7px,env(safe-area-inset-bottom));
  border-top:1px solid rgba(226,232,240,.9);
  background:rgba(255,255,255,.92);
  box-shadow:0 -9px 28px rgba(32,54,78,.07);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.tc-bottom-nav > a,
.tc-bottom-nav > button{
  min-width:0;
  min-height:61px;
  gap:4px;
  border:0;
  border-radius:17px;
  color:#778495;
  background:transparent;
  font-size:11px;
  font-weight:750;
  transition:
    color .17s ease,
    background .17s ease,
    transform .17s ease;
}

.tc-bottom-nav > a svg,
.tc-bottom-nav > button svg{
  width:25px;
  height:25px;
}

.tc-bottom-nav > a.active,
.tc-bottom-nav > button.active{
  color:#087fdf;
  background:
    linear-gradient(
      145deg,
      #eff8ff,
      #e8f4ff
    );
  box-shadow:inset 0 0 0 1px rgba(22,135,248,.07);
}

.tc-bottom-nav > a:active,
.tc-bottom-nav > button:active{
  transform:scale(.94);
}

/* =========================================================
   SMALL SCREEN OPTIMIZATION
   ========================================================= */

@media(max-width:390px){
  .tc-mobile-header{
    padding-left:14px;
    padding-right:14px;
  }

  .tc-header-profile > img,
  .tc-header-profile > span{
    width:48px;
    height:48px;
  }

  .tc-header-profile strong{
    font-size:20px;
  }

  .tc-search-panel,
  .tc-home-tabs{
    margin-left:13px;
    margin-right:13px;
  }

  .tc-tab-section{
    padding-left:9px;
    padding-right:9px;
  }

  .tc-chat-row{
    min-height:81px;
    gap:11px;
    padding:10px;
    border-radius:18px;
  }

  .tc-chat-avatar{
    width:57px;
    height:57px;
  }

  .tc-chat-topline strong{
    font-size:15px;
  }

  .tc-chat-preview p{
    font-size:13px;
  }
}

/* TELECHAT PREMIUM HOME PHASE 1 END */

/* TELECHAT CHANNEL FIXED PREMIUM UI START */

:root{
  --tc-channel-header-height:76px;
  --tc-channel-composer-height:82px;
  --tc-channel-max-width:760px;
}

/* ---------- FIXED APP LAYOUT ---------- */

.tc-channel-shell{
  position:relative!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  background:
    linear-gradient(rgba(207,238,221,.82),rgba(207,238,221,.82)),
    radial-gradient(circle at 15% 10%,rgba(255,255,255,.7),transparent 28%),
    radial-gradient(circle at 88% 22%,rgba(63,163,225,.13),transparent 32%),
    #d4efe1!important;
}

.tc-channel-topbar{
  position:relative!important;
  z-index:100!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  flex:0 0 var(--tc-channel-header-height)!important;
  min-height:var(--tc-channel-header-height)!important;
  width:100%!important;
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid #e8edf2!important;
  box-shadow:0 3px 14px rgba(25,53,74,.07)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}

/* Feed is the only scrolling area */
.tc-channel-feed{
  position:relative!important;
  inset:auto!important;
  flex:1 1 auto!important;
  width:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-behavior:smooth!important;
  padding:
    14px
    max(10px,calc((100% - var(--tc-channel-max-width))/2))
    22px!important;
}

/* Composer remains permanently fixed inside the app layout */
.tc-inline-composer{
  position:relative!important;
  z-index:110!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  flex:0 0 auto!important;
  width:calc(100% - 20px)!important;
  max-width:740px!important;
  min-height:68px!important;
  margin:7px auto max(8px,env(safe-area-inset-bottom))!important;
  padding:7px!important;
  border:1px solid rgba(218,227,236,.95)!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:
    0 8px 28px rgba(29,70,58,.17),
    inset 0 1px 0 #fff!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
}

/* Channel member bottom nav also stays fixed */
.tc-channel-member-nav{
  position:relative!important;
  z-index:110!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  flex:0 0 auto!important;
  width:100%!important;
  max-width:none!important;
  min-height:70px!important;
  margin:0!important;
  padding:
    7px
    10px
    max(7px,env(safe-area-inset-bottom))!important;
  border-top:1px solid #e4eaf0!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 -5px 20px rgba(32,58,80,.07)!important;
}

/* Remove conflicting old fixed positioning */
.tc-channel-shell:has(.tc-channel-member-nav){
  padding-bottom:0!important;
}

.tc-channel-shell .tc-bottom-nav{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
}

/* ---------- CHANNEL HEADER ---------- */

.tc-channel-title{
  min-width:0!important;
}

.tc-channel-header-avatar{
  width:50px!important;
  height:50px!important;
  flex:none!important;
  border-radius:50%!important;
  box-shadow:
    0 0 0 2px rgba(22,135,248,.10),
    0 5px 16px rgba(22,135,248,.17)!important;
}

.tc-channel-title strong{
  font-size:18px!important;
  font-weight:850!important;
  color:#162335!important;
}

.tc-channel-title small{
  margin-top:2px!important;
  color:#83909f!important;
  font-size:12.5px!important;
}

/* ---------- DATE LABEL ---------- */

.tc-date-divider{
  position:relative!important;
  top:auto!important;
  z-index:4!important;
  margin:7px auto!important;
  text-align:center!important;
}

.tc-date-divider span{
  display:inline-flex!important;
  padding:5px 11px!important;
  border:1px solid rgba(255,255,255,.48)!important;
  border-radius:999px!important;
  color:#fff!important;
  background:rgba(72,121,99,.70)!important;
  box-shadow:0 3px 10px rgba(34,78,61,.15)!important;
  font-size:11px!important;
  font-weight:800!important;
  backdrop-filter:blur(9px)!important;
}

/* ---------- TELEGRAM STYLE POSTS ---------- */

.tc-post-bubble{
  position:relative!important;
  width:max-content!important;
  min-width:145px!important;
  max-width:min(88%,620px)!important;
  min-height:0!important;
  margin:0 auto 8px 0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(224,231,237,.95)!important;
  border-radius:18px 18px 18px 6px!important;
  background:#fff!important;
  box-shadow:
    0 4px 13px rgba(29,67,53,.10),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
  cursor:default!important;
}

/* Remove old decorative tail conflicts */
.tc-post-bubble::after,
.tc-post-bubble::before{
  display:none!important;
}

/* Text-only messages stay compact */
.tc-post-bubble:not(:has(.tc-post-image-wrap))
:not(:has(.tc-post-video))
:not(:has(.tc-file-message)){
  width:max-content!important;
  max-width:min(88%,560px)!important;
}

/* Media messages can use more width */
.tc-post-bubble:has(.tc-post-image-wrap),
.tc-post-bubble:has(.tc-post-video),
.tc-post-bubble:has(.tc-file-message){
  width:min(92%,560px)!important;
  max-width:560px!important;
}

/* Forwarded post */
.tc-forwarded-channel{
  margin:11px 12px 0!important;
  padding:8px 9px!important;
  border-radius:12px!important;
  background:#f3f8fc!important;
}

/* Text */
.tc-post-caption{
  min-width:0!important;
  padding:12px 14px 7px!important;
  color:#172333!important;
  font-size:15.5px!important;
  font-weight:450!important;
  line-height:1.5!important;
  letter-spacing:0!important;
}

/* Media */
.tc-post-image-wrap{
  width:100%!important;
  overflow:hidden!important;
  border-radius:17px 17px 0 0!important;
  background:#e8edf1!important;
}

.tc-post-image-button,
.tc-post-image-button img,
.tc-post-video{
  display:block!important;
  width:100%!important;
  border-radius:0!important;
}

.tc-post-image-button img,
.tc-post-video{
  max-height:520px!important;
  object-fit:cover!important;
}

/* File card */
.tc-file-message{
  margin:10px!important;
  padding:11px!important;
  border:0!important;
  border-radius:14px!important;
  background:#edf7ff!important;
  box-shadow:none!important;
}

/* ---------- REACTIONS ---------- */

.tc-post-reactions{
  padding:3px 10px 7px!important;
  gap:5px!important;
}

.tc-post-reactions button{
  min-height:30px!important;
  padding:3px 9px!important;
  border:1px solid #d8e8f3!important;
  border-radius:999px!important;
  color:#3f6077!important;
  background:#f1f8fc!important;
  box-shadow:none!important;
}

.tc-post-reactions button.active{
  border-color:#78c4f7!important;
  color:#087dcc!important;
  background:#e4f4ff!important;
}

/* ---------- META / SHARE ---------- */

.tc-post-bottom-row{
  min-height:38px!important;
  padding:2px 7px 6px 12px!important;
  border-top:0!important;
  gap:5px!important;
}

.tc-post-meta{
  gap:5px!important;
  color:#87929e!important;
  font-size:10.5px!important;
}

.tc-post-share-button{
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  color:#647a8d!important;
  background:#edf3f7!important;
}

/* ---------- COMPOSER ---------- */

.tc-composer-row{
  min-height:53px!important;
  align-items:flex-end!important;
}

.tc-composer-attach{
  width:44px!important;
  height:44px!important;
  flex:none!important;
}

#inlineCaption{
  min-height:44px!important;
  max-height:125px!important;
  padding:11px 7px 9px!important;
  font-size:15px!important;
}

.tc-composer-send{
  width:52px!important;
  height:52px!important;
  flex:none!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#1ea4ff,#087cde)!important;
  box-shadow:0 7px 18px rgba(22,135,248,.27)!important;
}

/* ---------- JUMP TO LATEST ---------- */

.tc-jump-latest{
  position:absolute!important;
  z-index:105!important;
  right:18px!important;
  bottom:92px!important;
  left:auto!important;
  transform:none!important;
  min-width:52px!important;
  height:52px!important;
  border:1px solid rgba(222,230,237,.96)!important;
  border-radius:50%!important;
  color:#087edb!important;
  background:#fff!important;
  box-shadow:0 8px 23px rgba(28,65,54,.19)!important;
}

.tc-jump-latest span{
  display:none!important;
}

/* ---------- MEMBER NAV BUTTONS ---------- */

.tc-channel-member-nav a,
.tc-channel-member-nav button{
  min-height:55px!important;
  border-radius:15px!important;
  color:#768494!important;
  background:transparent!important;
}

.tc-channel-member-nav a:active,
.tc-channel-member-nav button:active{
  background:#edf6fc!important;
}

.tc-channel-member-nav svg{
  width:24px!important;
  height:24px!important;
}

/* ---------- MOBILE ---------- */

@media(max-width:520px){
  :root{
    --tc-channel-header-height:72px;
  }

  .tc-channel-feed{
    padding-right:8px!important;
    padding-left:8px!important;
  }

  .tc-post-bubble{
    max-width:91%!important;
  }

  .tc-post-bubble:has(.tc-post-image-wrap),
  .tc-post-bubble:has(.tc-post-video),
  .tc-post-bubble:has(.tc-file-message){
    width:94%!important;
  }

  .tc-post-caption{
    padding:11px 13px 6px!important;
    font-size:15px!important;
  }

  .tc-post-image-button img,
  .tc-post-video{
    max-height:400px!important;
  }

  .tc-inline-composer{
    width:calc(100% - 14px)!important;
    margin-top:5px!important;
    margin-bottom:max(6px,env(safe-area-inset-bottom))!important;
  }

  .tc-jump-latest{
    right:13px!important;
    bottom:88px!important;
  }
}

/* TELECHAT CHANNEL FIXED PREMIUM UI END */

/* TELECHAT HOME PREMIUM REFINE START */

:root{
  --tc-home-blue:#0795ed;
  --tc-home-blue-dark:#0078cf;
  --tc-home-text:#17243a;
  --tc-home-muted:#77869a;
  --tc-home-line:rgba(220,230,240,.88);
}

/* =========================================================
   PREMIUM HOME BACKGROUND
   ========================================================= */

body.tc-app-body{
  min-height:100dvh;
  background:
    radial-gradient(
      circle at 10% 3%,
      rgba(38,162,255,.13),
      transparent 26%
    ),
    radial-gradient(
      circle at 92% 16%,
      rgba(63,212,170,.11),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #f8fbff 0%,
      #f1f7fd 43%,
      #f6f9fd 100%
    )!important;
}

.tc-app-shell{
  position:relative;
  min-height:100dvh;
  overflow:hidden;
  background:transparent!important;
}

.tc-app-shell::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    radial-gradient(
      circle at 18px 18px,
      rgba(41,137,208,.12) 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 65px 70px,
      rgba(74,190,161,.10) 1px,
      transparent 1.5px
    );
  background-size:95px 95px,130px 130px;
}

.tc-app-shell > *{
  position:relative;
  z-index:1;
}

/* =========================================================
   HEADER
   ========================================================= */

.tc-mobile-header{
  min-height:91px!important;
  padding:14px 19px 12px!important;
  border-bottom:1px solid rgba(224,233,242,.80)!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:
    0 8px 27px rgba(42,72,104,.065),
    inset 0 -1px 0 rgba(255,255,255,.70)!important;
  backdrop-filter:blur(24px)!important;
  -webkit-backdrop-filter:blur(24px)!important;
}

.tc-header-profile{
  gap:13px!important;
}

.tc-header-profile > img,
.tc-header-profile > span{
  width:58px!important;
  height:58px!important;
  border:3px solid rgba(255,255,255,.96)!important;
  box-shadow:
    0 0 0 3px rgba(22,151,239,.11),
    0 10px 24px rgba(22,135,248,.16)!important;
}

.tc-header-profile strong{
  color:var(--tc-home-text)!important;
  font-size:25px!important;
  font-weight:900!important;
  letter-spacing:-.7px!important;
}

.tc-header-profile small{
  margin-top:1px!important;
  color:#7c8b9e!important;
  font-size:14px!important;
  font-weight:650!important;
}

.tc-header-actions .tc-icon-button{
  width:45px!important;
  height:45px!important;
  border-radius:15px!important;
}

.tc-header-actions .tc-icon-button:active{
  background:#eaf6ff!important;
}

/* =========================================================
   MAIN HOME AREA
   ========================================================= */

.tc-home-main{
  position:relative;
  padding:14px 14px 112px!important;
  background:transparent!important;
}

/* =========================================================
   TABS
   ========================================================= */

.tc-home-tabs{
  position:sticky!important;
  z-index:30!important;
  top:6px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  margin:0 2px 15px!important;
  padding:5px!important;
  border:1px solid rgba(219,229,239,.90)!important;
  border-radius:21px!important;
  background:rgba(255,255,255,.91)!important;
  box-shadow:
    0 10px 29px rgba(39,69,102,.08),
    inset 0 1px 0 rgba(255,255,255,.98)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
}

.tc-home-tabs .tc-tab{
  position:relative;
  min-height:54px!important;
  padding:9px 10px!important;
  border:0!important;
  border-radius:17px!important;
  color:#7d8999!important;
  background:transparent!important;
  font-size:16px!important;
  font-weight:850!important;
}

.tc-home-tabs .tc-tab::after{
  display:none!important;
}

.tc-home-tabs .tc-tab.active{
  color:#087dce!important;
  background:
    linear-gradient(
      145deg,
      rgba(235,248,255,.98),
      rgba(224,244,255,.98)
    )!important;
  box-shadow:
    0 7px 18px rgba(18,143,224,.13),
    inset 0 0 0 1px rgba(22,151,239,.10)!important;
}

.tc-home-tabs .tc-tab span{
  min-width:27px!important;
  height:27px!important;
  margin-left:6px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  color:#fff!important;
  background:#9aa8b8!important;
  font-size:12px!important;
  font-weight:900!important;
}

.tc-home-tabs .tc-tab.active span{
  background:
    linear-gradient(
      145deg,
      #21a5ff,
      #0785dc
    )!important;
  box-shadow:0 5px 13px rgba(22,151,239,.26)!important;
}

/* =========================================================
   CHANNEL SECTIONS
   ========================================================= */

.tc-tab-section{
  padding:0!important;
}

.tc-chat-list{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}

/* =========================================================
   PREMIUM CHANNEL CARD
   ========================================================= */

.tc-chat-row{
  position:relative!important;
  width:100%!important;
  min-height:96px!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  padding:13px 13px!important;
  overflow:hidden!important;
  border:1px solid rgba(220,230,240,.91)!important;
  border-radius:23px!important;
  color:inherit!important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(247,251,255,.97)
    )!important;
  box-shadow:
    0 12px 31px rgba(45,74,105,.075),
    inset 0 1px 0 rgba(255,255,255,.98)!important;
  text-decoration:none!important;
  transform:translateZ(0);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease!important;
}

.tc-chat-row::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:5px!important;
  border-radius:0 7px 7px 0!important;
  background:
    linear-gradient(
      180deg,
      transparent,
      transparent
    )!important;
}

.tc-chat-row::after{
  content:""!important;
  position:absolute!important;
  top:-45px!important;
  right:-35px!important;
  width:115px!important;
  height:115px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:rgba(22,151,239,.035)!important;
}

.tc-chat-row.has-unread{
  border-color:rgba(22,151,239,.23)!important;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f0f9ff
    )!important;
  box-shadow:
    0 13px 34px rgba(20,132,205,.11),
    inset 0 1px 0 #fff!important;
}

.tc-chat-row.has-unread::before{
  background:
    linear-gradient(
      180deg,
      #30b0ff,
      #087bd2
    )!important;
}

.tc-chat-row:active{
  transform:scale(.982)!important;
  border-color:rgba(22,151,239,.33)!important;
  box-shadow:0 6px 17px rgba(45,74,105,.09)!important;
}

/* =========================================================
   CHANNEL AVATAR
   ========================================================= */

.tc-chat-avatar{
  position:relative!important;
  width:67px!important;
  height:67px!important;
  flex:none!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  border:3px solid rgba(255,255,255,.98)!important;
  border-radius:50%!important;
  color:#fff!important;
  background:
    linear-gradient(
      145deg,
      #17a7ff,
      #3a68f4
    )!important;
  box-shadow:
    0 0 0 2px rgba(22,151,239,.09),
    0 10px 23px rgba(22,126,217,.19)!important;
}

.tc-chat-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:50%!important;
}

.tc-chat-avatar span{
  font-size:25px!important;
  font-weight:900!important;
}

.tc-chat-avatar::after{
  content:""!important;
  position:absolute!important;
  right:-1px!important;
  bottom:1px!important;
  width:15px!important;
  height:15px!important;
  border:3px solid #fff!important;
  border-radius:50%!important;
  background:#28c689!important;
  box-shadow:0 3px 8px rgba(34,170,113,.28)!important;
}

/* =========================================================
   CHANNEL INFORMATION
   ========================================================= */

.tc-chat-info{
  min-width:0!important;
  flex:1!important;
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

.tc-chat-topline{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}

.tc-chat-topline strong{
  min-width:0!important;
  flex:1!important;
  overflow:hidden!important;
  color:#18243a!important;
  font-size:17px!important;
  font-weight:900!important;
  letter-spacing:-.25px!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.tc-chat-topline time,
.tc-chat-topline small{
  flex:none!important;
  color:#8996a6!important;
  font-size:12px!important;
  font-weight:750!important;
  white-space:nowrap!important;
}

.tc-chat-row.has-unread .tc-chat-topline time,
.tc-chat-row.has-unread .tc-chat-topline small{
  color:#0985dc!important;
}

.tc-chat-preview{
  min-width:0!important;
  margin-top:7px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}

.tc-chat-preview p{
  min-width:0!important;
  flex:1!important;
  margin:0!important;
  overflow:hidden!important;
  color:#718095!important;
  font-size:14px!important;
  font-weight:570!important;
  line-height:1.35!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.tc-chat-row.has-unread .tc-chat-preview p{
  color:#40566d!important;
  font-weight:720!important;
}

/* =========================================================
   BADGES
   ========================================================= */

.tc-channel-row-badges{
  margin-top:7px!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}

.tc-mini-label,
.tc-open-label{
  min-height:24px!important;
  padding:3px 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(20,142,221,.13)!important;
  border-radius:999px!important;
  color:#087fcf!important;
  background:#edf8ff!important;
  font-size:10.5px!important;
  font-weight:850!important;
  line-height:1!important;
}

.tc-channel-unread-badge{
  min-width:28px!important;
  height:28px!important;
  padding:0 8px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:2px solid #fff!important;
  border-radius:999px!important;
  color:#fff!important;
  background:
    linear-gradient(
      145deg,
      #25aaff,
      #0781d7
    )!important;
  box-shadow:0 6px 15px rgba(22,151,239,.29)!important;
  font-size:11px!important;
  font-weight:900!important;
}

/* =========================================================
   DISCOVER
   ========================================================= */

#discoverSection .tc-chat-row{
  min-height:108px!important;
  align-items:flex-start!important;
  padding:15px!important;
}

#discoverSection .tc-chat-avatar{
  width:70px!important;
  height:70px!important;
}

#discoverSection .tc-chat-preview{
  align-items:flex-start!important;
  flex-direction:column!important;
}

#discoverSection .tc-chat-preview p{
  display:-webkit-box!important;
  overflow:hidden!important;
  white-space:normal!important;
  line-height:1.42!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

#discoverSection .tc-open-label{
  color:#fff!important;
  border:0!important;
  background:
    linear-gradient(
      145deg,
      #21a7ff,
      #087ed3
    )!important;
  box-shadow:0 6px 14px rgba(22,151,239,.22)!important;
}

/* =========================================================
   FLOATING CREATE BUTTON
   ========================================================= */

.tc-floating-button{
  position:fixed!important;
  z-index:80!important;
  right:22px!important;
  bottom:102px!important;
  width:64px!important;
  height:64px!important;
  border:0!important;
  border-radius:50%!important;
  color:#fff!important;
  background:
    linear-gradient(
      145deg,
      #20adff,
      #0780d7
    )!important;
  box-shadow:
    0 17px 36px rgba(22,151,239,.34),
    0 0 0 9px rgba(22,151,239,.075),
    inset 0 1px 0 rgba(255,255,255,.36)!important;
}

.tc-floating-button:active{
  transform:scale(.91)!important;
}

/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.tc-bottom-nav{
  position:fixed!important;
  z-index:90!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
  min-height:82px!important;
  padding:
    7px
    9px
    max(8px,env(safe-area-inset-bottom))!important;
  border-top:1px solid rgba(222,231,239,.91)!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 -10px 31px rgba(42,67,93,.075)!important;
  backdrop-filter:blur(24px)!important;
  -webkit-backdrop-filter:blur(24px)!important;
}

.tc-bottom-nav > a,
.tc-bottom-nav > button{
  min-height:62px!important;
  border-radius:18px!important;
  color:#778598!important;
  background:transparent!important;
  font-size:11px!important;
  font-weight:780!important;
}

.tc-bottom-nav > a.active,
.tc-bottom-nav > button.active{
  color:#087fcf!important;
  background:
    linear-gradient(
      145deg,
      #edf8ff,
      #e4f4ff
    )!important;
  box-shadow:inset 0 0 0 1px rgba(22,151,239,.08)!important;
}

.tc-bottom-nav svg{
  width:26px!important;
  height:26px!important;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.tc-empty-state{
  min-height:310px!important;
  margin:7px 2px!important;
  border:1px dashed rgba(109,147,177,.25)!important;
  border-radius:27px!important;
  background:
    radial-gradient(
      circle at 50% 3%,
      rgba(22,151,239,.11),
      transparent 41%
    ),
    rgba(255,255,255,.64)!important;
  box-shadow:0 12px 31px rgba(45,74,105,.05)!important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:420px){
  .tc-home-main{
    padding-right:10px!important;
    padding-left:10px!important;
  }

  .tc-mobile-header{
    padding-right:14px!important;
    padding-left:14px!important;
  }

  .tc-header-profile > img,
  .tc-header-profile > span{
    width:54px!important;
    height:54px!important;
  }

  .tc-header-profile strong{
    font-size:23px!important;
  }

  .tc-chat-row{
    min-height:91px!important;
    gap:12px!important;
    padding:12px 11px!important;
    border-radius:21px!important;
  }

  .tc-chat-avatar{
    width:63px!important;
    height:63px!important;
  }

  .tc-chat-topline strong{
    font-size:16px!important;
  }

  .tc-chat-preview p{
    font-size:13.5px!important;
  }

  .tc-floating-button{
    right:18px!important;
    bottom:99px!important;
    width:61px!important;
    height:61px!important;
  }
}

/* TELECHAT HOME PREMIUM REFINE END */

/* TELECHAT LATEST BUTTON RESTORE START */

/*
 * The channel feed is the scrolling area. The latest button
 * stays permanently above the composer and never moves with posts.
 */

.tc-channel-shell{
  position:relative!important;
}

.tc-jump-latest{
  position:absolute!important;
  z-index:150!important;
  right:17px!important;
  bottom:92px!important;
  left:auto!important;

  width:55px!important;
  min-width:55px!important;
  height:55px!important;
  padding:0!important;

  display:grid!important;
  place-items:center!important;

  border:1px solid rgba(211,224,235,.96)!important;
  border-radius:50%!important;

  color:#087fdc!important;
  background:rgba(255,255,255,.98)!important;

  box-shadow:
    0 12px 30px rgba(25,67,55,.22),
    0 0 0 7px rgba(255,255,255,.18),
    inset 0 1px 0 #fff!important;

  opacity:1!important;
  visibility:visible!important;

  transform:translateY(0) scale(1)!important;
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease!important;

  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

.tc-jump-latest[hidden],
.tc-jump-latest:not(.show){
  display:grid!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(10px) scale(.92)!important;
}

.tc-jump-latest.show{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
}

.tc-jump-latest svg{
  width:25px!important;
  height:25px!important;
}

.tc-jump-latest span{
  display:none!important;
}

.tc-jump-latest:active{
  transform:scale(.90)!important;
  background:#edf8ff!important;
}

/*
 * Briefly identify the restored post, then fade normally.
 */
.tc-post-bubble.tc-restored-position{
  border-color:rgba(22,135,248,.50)!important;
  box-shadow:
    0 0 0 3px rgba(22,135,248,.13),
    0 10px 27px rgba(24,89,124,.17)!important;
  animation:teleChatRestoredPost 1.2s ease-out;
}

@keyframes teleChatRestoredPost{
  0%{
    transform:scale(.985);
  }

  35%{
    transform:scale(1);
  }

  100%{
    transform:scale(1);
  }
}

@media(max-width:520px){
  .tc-jump-latest{
    right:13px!important;
    bottom:87px!important;
    width:53px!important;
    min-width:53px!important;
    height:53px!important;
  }
}

/* TELECHAT LATEST BUTTON RESTORE END */

/* TELECHAT COMPOSER LATEST SEPARATION START */

:root{
  --tc-composer-safe-height:82px;
}

/*
 * Composer stays as the bottom element of the fixed-height
 * channel layout. It never floats over the feed.
 */
.tc-inline-composer{
  position:relative!important;
  z-index:120!important;
  inset:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;

  flex:0 0 auto!important;
  width:calc(100% - 18px)!important;
  max-width:740px!important;
  min-height:68px!important;

  margin:
    6px
    auto
    max(7px,env(safe-area-inset-bottom))!important;

  padding:7px 8px!important;
  border:1px solid rgba(215,225,234,.96)!important;
  border-radius:27px!important;
  background:rgba(255,255,255,.98)!important;

  box-shadow:
    0 9px 28px rgba(27,69,57,.18),
    inset 0 1px 0 #fff!important;
}

/*
 * Latest button is positioned relative to the channel shell,
 * clearly above the composer.
 */
.tc-jump-latest{
  position:absolute!important;
  z-index:160!important;

  right:max(15px,calc((100% - 740px)/2 + 15px))!important;
  bottom:calc(
    var(--tc-composer-safe-height) +
    max(14px,env(safe-area-inset-bottom))
  )!important;

  left:auto!important;
  top:auto!important;
  transform:none!important;

  width:54px!important;
  min-width:54px!important;
  height:54px!important;
  margin:0!important;
  padding:0!important;

  display:grid!important;
  place-items:center!important;

  border:1px solid rgba(211,224,235,.98)!important;
  border-radius:50%!important;
  color:#087fdc!important;
  background:rgba(255,255,255,.99)!important;

  box-shadow:
    0 11px 27px rgba(26,67,56,.22),
    0 0 0 5px rgba(255,255,255,.18),
    inset 0 1px 0 #fff!important;
}

.tc-jump-latest.show{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
}

.tc-jump-latest[hidden],
.tc-jump-latest:not(.show){
  display:grid!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(9px) scale(.91)!important;
}

.tc-jump-latest:active{
  transform:scale(.90)!important;
}

.tc-composer-send{
  position:relative!important;
  z-index:2!important;
  flex:none!important;
}

/*
 * When the virtual keyboard is open, VisualViewport makes the
 * visible screen shorter. Keep the latest button clearly above
 * the composer instead of covering the send button.
 */
html.tc-keyboard-open .tc-jump-latest{
  bottom:calc(
    var(--tc-composer-safe-height) + 18px
  )!important;
}

html.tc-keyboard-open .tc-inline-composer{
  margin-bottom:5px!important;
}

/*
 * Add enough bottom breathing room inside the scrollable feed.
 */
.tc-channel-feed{
  scroll-padding-bottom:125px!important;
}

@media(max-width:520px){
  :root{
    --tc-composer-safe-height:79px;
  }

  .tc-inline-composer{
    width:calc(100% - 14px)!important;
    margin:
      5px
      auto
      max(6px,env(safe-area-inset-bottom))!important;
  }

  .tc-jump-latest{
    right:13px!important;
    bottom:calc(
      var(--tc-composer-safe-height) +
      max(12px,env(safe-area-inset-bottom))
    )!important;

    width:52px!important;
    min-width:52px!important;
    height:52px!important;
  }

  html.tc-keyboard-open .tc-jump-latest{
    right:14px!important;
    bottom:94px!important;
  }
}

/* TELECHAT COMPOSER LATEST SEPARATION END */

/* TELECHAT STABLE SCROLL RESET START */

.tc-channel-shell{
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}

.tc-channel-feed{
  position:relative!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;

  scroll-behavior:auto!important;
  scroll-snap-type:none!important;
  overflow-anchor:auto!important;
  overscroll-behavior-y:contain!important;

  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
}

.tc-channel-feed *{
  scroll-snap-align:none!important;
  scroll-snap-stop:normal!important;
}

html,
body{
  overscroll-behavior-y:none;
}

.tc-inline-composer{
  flex:0 0 auto!important;
}

/* TELECHAT STABLE SCROLL RESET END */