:root{
  --tn-bg:#0F1114;--tn-surface:#1A1D21;--tn-text:#EDEFF2;--tn-muted:#8A9099;--tn-accent:#FF4D4F;--tn-radius:12px;--tn-shadow:0 12px 32px rgba(0,0,0,.35)
}
.tcn-notify{position:relative;display:inline-block}
.tcn-bell{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:#fff;background:transparent!important;position:relative;-webkit-tap-highlight-color:transparent}
.tcn-bell:focus,.tcn-bell:focus-visible{outline:none;box-shadow:none;background:transparent}
/* Evitar flash de fundo no mobile e estados iniciais */
.tcn-bell,.tcn-bell:active,.tcn-bell:focus{background:transparent!important}
@media (hover:hover) and (pointer:fine){
  .tcn-bell:hover{background:rgba(255,255,255,.06)}
}
.tcn-bell-icon{color:#D7DBE0}
.tcn-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--tn-accent);color:#fff;font-weight:600;font-size:11px;line-height:18px;font-family:'Inter', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;text-align:center}
.tcn-panel{position:fixed;inset:auto 12px auto auto;width:min(360px,calc(100vw - 24px));max-height:70vh;overflow:auto;background:var(--tn-surface);color:var(--tn-text);border-radius:var(--tn-radius);box-shadow:var(--tn-shadow);z-index:2147483647;overscroll-behavior:contain;transform:translateX(0);transition:transform .28s ease}
.tcn-panel,.tcn-title,.tcn-meta,.tcn-panel-header,.tcn-list,.tcn-empty{font-family:'Inter', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif}
.tcn-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px dashed rgba(255,255,255,.08);font-weight:600}
/* Botão como link minimalista */
.tcn-panel-header .tcn-mark-all{all:unset;cursor:pointer;background:none!important;border:0!important;box-shadow:none!important;color:#B6BCC4;font-size:12px;padding:0;margin:0;display:inline;font-family:'Inter', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif}
.tcn-panel-header .tcn-mark-all:hover{color:#EDEFF2;text-decoration:underline}
.tcn-close{all:unset;cursor:pointer;display:none}
.tcn-list{display:flex;flex-direction:column;position:relative;overflow:auto;background:transparent}
.tcn-list{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.tcn-list::-webkit-scrollbar{width:8px;height:8px}
.tcn-list::-webkit-scrollbar-track{background:transparent}
.tcn-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.tcn-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}
.tcn-list::before,.tcn-list::after{content:"";position:sticky;left:0;right:0;height:14px;opacity:0;transition:opacity .18s ease;pointer-events:none;z-index:2;background:var(--tn-surface)}
/* Fades usam mask para refletir a mesma cor do fundo */
.tcn-list::before{top:0;-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))}
.tcn-list::after{bottom:0;-webkit-mask-image:linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));mask-image:linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0))}
.tcn-list.shadow-top::before{opacity:1}
.tcn-list.shadow-bottom::after{opacity:1}
.tcn-item{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.04);align-items:center}
.tcn-item:last-child{border-bottom:0}
.tcn-item.is-link{cursor:pointer}
.tcn-item.is-link:hover{background:rgba(255,255,255,.06)}
.tcn-avatar{width:36px;height:36px;border-radius:50%;background:#2B2F35;background-size:cover;background-position:center center;overflow:hidden}
.tcn-title{font-size:13.5px;color:var(--tn-text);font-family:'Inter', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif}
.tcn-meta{font-size:12px;color:var(--tn-muted);margin-top:2px;font-family:'Inter', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif}
.tcn-empty{padding:32px 14px;color:var(--tn-muted);text-align:center;font-size:12px;font-family:'Inter', Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif}


@media (max-width:600px){
  .tcn-panel.tcn-mobile{top:0;right:0;left:0;bottom:0;width:100vw;height:100vh;height:100dvh;height:100svh;max-height:none;border-radius:0;transform:translateX(100%);display:flex;flex-direction:column;overflow:hidden;z-index:999999}
  .tcn-panel.tcn-mobile.is-open{transform:translateX(0)}
  .tcn-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:#B6BCC4;background:transparent;border:1px solid rgba(255,255,255,.12)}
  .tcn-close:hover{color:#EDEFF2;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
  .tcn-panel-header .tcn-mark-all{display:none}
  .tcn-list{flex:1 1 auto;overflow:auto}
}

/* Override solicitado: remover altura do fade superior */
.tcn-list::before{height:0!important}

@media (min-width:601px){
  /* esconder o botão fechar no desktop */
  .tcn-close{display:none!important}
  /* reduzir altura visível da lista no desktop */
  .tcn-list{max-height:240px!important;overflow:auto}
}

@media (max-width:601px){
.tcn-panel.tcn-mobile.is-open {
    border-radius: 0px !important;
}
  /* garantir lista em tela inteira no mobile */
  .tcn-panel.tcn-mobile .tcn-list{
    max-height:none!important;
    height:auto!important;
    flex:1 1 auto;
    overflow:auto!important;
  }
}

.tcn-panel-header .tcn-mark-all:hover {
    text-decoration: none !important;
}

.tcn-panel-header .tcn-mark-all {
 
    font-weight: 400 !important;
   
}