/* ============================================================
   CIUTEK - VISOR
   ------------------------------------------------------------
   Tres coisas moram aqui, e so aqui:

   1. A janela da publicacao (.ck-janela) e o balao da grade
      (.ck-abre) passam a caber inteiros na tela. A midia nunca
      e cortada: o palco toma a forma da propria imagem, entao
      nao sobra tarja preta em cima nem embaixo.
   2. O contorno do perfil. Cada pessoa recebe um anel ao redor
      da foto conforme a verificacao que tem. Sem verificacao e
      um roxo simples. Azul gira devagar. Dourado gira forte.
      Roxo verificado ganha o anel supremo, com profundidade.
   3. A barra de comentario, que estava colada nos icones e sem
      contorno.

   Este arquivo entra por ultimo de proposito: ele so acrescenta
   por cima do que ja existe, nunca apaga regra de ninguem.
   ============================================================ */

/* ------------------------------------------------------------
   1. A JANELA CABE NA TELA
   ------------------------------------------------------------ */
.ck-janela { padding: 18px !important; }

.ck-janela__caixa {
  width: auto !important;
  max-width: min(1280px, 96vw) !important;
  height: var(--ck-jan-alt, min(88vh, 900px)) !important;
  max-height: 92vh !important;
  grid-template-columns: var(--ck-jan-col, minmax(0, 1.25fr) minmax(320px, .75fr)) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
.ck-janela__caixa.ck-janela--so-texto {
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(620px, 96vw) !important;
  height: auto !important;
}

/* a midia inteira, sem corte e sem esticar */
.ck-janela__midia { min-width: 0; overflow: hidden; }
.ck-janela__midia img,
.ck-janela__midia video {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
.ck-janela__midia .ck-carrossel,
.ck-janela__midia .ck-carrossel__trilha,
.ck-janela__midia .ck-carrossel__slide {
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}
.ck-janela__midia .ck-carrossel__slide img,
.ck-janela__midia .ck-carrossel__slide video {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* ------------------------------------------------------------
   2. A BARRA LATERAL
   ------------------------------------------------------------ */
.ck-janela__lado { min-width: 0; overflow-x: hidden; }

.ck-janela__cabeca { padding: 14px 18px 12px !important; }
.ck-janela__cabeca .post-heading {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.ck-janela__cabeca .post-heading > .pull-left.image {
  float: none !important;
  order: 1;
  flex: 0 0 auto;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
}
.ck-janela__cabeca .post-heading > .meta {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.ck-janela__cabeca .post-heading > .pull-right {
  float: none !important;
  order: 3;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center !important;
  gap: 4px;
  margin: 0 0 0 auto !important;
}
.ck-janela__cabeca .post-heading .meta > * { margin: 0 !important; }

.ck-janela__texto { padding: 0 18px !important; max-height: 42% !important; }
.ck-janela__texto .post-description { padding: 0 !important; }
.ck-janela__conversa { padding: 0 18px 16px !important; }
.ck-janela__texto .clear,
.ck-janela__conversa .clear { width: 100% !important; }

/* celular: a janela ocupa a tela e a lateral desce para baixo */
@media (max-width: 980px) {
  .ck-janela { padding: 0 !important; }
  .ck-janela__caixa {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }
  .ck-janela__midia { max-height: 54vh; }
  .ck-janela__lado {
    border-left: 0 !important;
    border-top: 1px solid rgba(178, 149, 255, .14);
    overflow-y: auto;
  }
  .ck-janela__texto { max-height: none !important; overflow: visible !important; }
  .ck-janela__conversa { overflow: visible !important; }
}

/* ------------------------------------------------------------
   3. O BALAO DA GRADE TAMBEM CABE NA TELA
   ------------------------------------------------------------ */
.ck-abre__caixa { max-height: calc(100vh - 36px) !important; }
.ck-abre__corpo {
  max-height: calc(100vh - 36px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: #9a6bff rgba(120, 80, 220, .12);
}
.ck-abre__corpo::-webkit-scrollbar { width: 8px; }
.ck-abre__corpo::-webkit-scrollbar-thumb {
  background: rgba(154, 107, 255, .55);
  border-radius: 8px;
}

/* ------------------------------------------------------------
   4. O CONTORNO DO PERFIL

   O anel e desenhado no ::before com a tecnica de mascara: o
   fundo pinta o circulo inteiro e a mascara recorta o miolo,
   sobrando so a borda. Assim o anel gira sem girar a foto.
   O ::after e a segunda camada - brilho, pulso ou profundidade,
   conforme o nivel.
   ------------------------------------------------------------ */
.ctk-app a.avatar.ck-anel {
  position: relative !important;
  display: block !important;
  width: var(--ck-anel-tam, 46px) !important;
  height: var(--ck-anel-tam, 46px) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  overflow: visible !important;
  line-height: 0 !important;
  --ck-anel-larg: 2px;
  /* sem folga: a foto encosta no aro e preenche o circulo inteiro */
  --ck-anel-folga: 0px;
  --ck-anel-recuo: calc(var(--ck-anel-larg) + var(--ck-anel-folga));
}

/* A foto recua para abrir espaco ao anel na borda de dentro.
   E o que garante o pedido: o efeito nunca sai do circulo. */
/* A foto e presa pelos QUATRO lados, nao por margem mais largura.
   Assim ela nasce concentrica ao aro: nao ha conta de largura que
   outra regra possa vencer e desencontrar os dois circulos. O
   seletor comeca em html body de proposito, para ficar acima das
   regras de largura que a plataforma impoe com !important. */
html body.ctk-app a.avatar.ck-anel > img {
  position: absolute !important;
  top: var(--ck-anel-recuo) !important;
  left: var(--ck-anel-recuo) !important;
  right: auto !important;
  bottom: auto !important;
  width: calc(100% - var(--ck-anel-recuo) * 2) !important;
  height: calc(100% - var(--ck-anel-recuo) * 2) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 1;
}
.ctk-app a.avatar.ck-anel > .verified-color,
.ctk-app a.avatar.ck-anel > .ck-span { z-index: 4; }

/* mesma precaucao do story: altura e largura explicitas, para que
   nenhuma regra de fora consiga achatar o aro e virar um oval */
.ctk-app a.avatar.ck-anel::before,
.ctk-app a.avatar.ck-anel::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
}
/* o aro: mascara recorta o miolo e sobra so a borda */
.ctk-app a.avatar.ck-anel::before {
  padding: var(--ck-anel-larg);
  z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* a segunda camada e sempre um brilho para DENTRO (inset), nunca
   um halo para fora - por isso nao existe mais drop-shadow aqui */
.ctk-app a.avatar.ck-anel::after { z-index: 3; }

@keyframes ck-anel-gira { to { transform: rotate(360deg); } }
@keyframes ck-anel-respira { 0%, 100% { opacity: .68; } 50% { opacity: 1; } }
@keyframes ck-anel-brilho { 0%, 100% { opacity: .28; } 50% { opacity: .78; } }
/* pulso e orbita nunca passam de scale(1): o efeito respira para
   dentro do circulo, e nao para fora dele */
@keyframes ck-anel-pulso {
  0%, 100% { transform: scale(.955); opacity: .35; }
  50%      { transform: scale(1);    opacity: .85; }
}
@keyframes ck-anel-orbita {
  0%, 100% { transform: rotateY(0deg)   scale(.94); opacity: .45; }
  25%      { transform: rotateY(26deg)  scale(.97); opacity: .8; }
  50%      { transform: rotateY(0deg)   scale(1);   opacity: .92; }
  75%      { transform: rotateY(-26deg) scale(.97); opacity: .8; }
}

/* --- sem verificacao: roxo simples --- */
.ctk-app a.avatar.ck-anel--base::before {
  background: conic-gradient(from 0deg,
    rgba(154, 107, 255, .22),
    rgba(178, 140, 255, .62) 35%,
    rgba(206, 182, 255, .85) 55%,
    rgba(154, 107, 255, .22));
  animation: ck-anel-respira 6s ease-in-out infinite;
}
.ctk-app a.avatar.ck-anel--base::after { display: none; }

/* --- verificado azul: degrade com giro leve --- */
.ctk-app a.avatar.ck-anel--azul::before {
  background: conic-gradient(from 0deg,
    #1f4fd8, #4aa8ff, #a8e0ff, #6fc4ff, #4aa8ff, #1f4fd8);
  animation: ck-anel-gira 7s linear infinite;
}
.ctk-app a.avatar.ck-anel--azul::after {
  box-shadow: inset 0 0 8px 1px rgba(74, 168, 255, .55);
  animation: ck-anel-brilho 3.6s ease-in-out infinite;
}

/* --- verificado dourado: giro forte --- */
.ctk-app a.avatar.ck-anel--ouro { --ck-anel-larg: 2.5px; }
.ctk-app a.avatar.ck-anel--ouro::before {
  background: conic-gradient(from 0deg,
    #7d5606, #e8bd52, #fff3c4, #ffd97a, #bd8a14, #fff8dd, #e8bd52, #7d5606);
  animation: ck-anel-gira 2.1s linear infinite;
}
.ctk-app a.avatar.ck-anel--ouro::after {
  box-shadow: inset 0 0 10px 2px rgba(232, 189, 82, .55);
  animation: ck-anel-pulso 1.6s ease-in-out infinite;
}

/* --- verificado roxo: o anel supremo, com profundidade --- */
.ctk-app a.avatar.ck-anel--supremo {
  --ck-anel-larg: 3px;
  perspective: 240px;
}
.ctk-app a.avatar.ck-anel--supremo::before {
  background: conic-gradient(from 0deg,
    #6d21db, #b98cff, #ffffff, #c9a5ff, #9a5cf5, #f3ecff, #7a41f0, #6d21db);
  animation: ck-anel-gira 3s linear infinite;
}
.ctk-app a.avatar.ck-anel--supremo::after {
  inset: var(--ck-anel-larg);
  border: 1.5px solid rgba(214, 186, 255, .55);
  box-shadow: inset 0 0 12px rgba(201, 165, 255, .45);
  transform-style: preserve-3d;
  animation: ck-anel-orbita 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ctk-app a.avatar.ck-anel::before,
  .ctk-app a.avatar.ck-anel::after { animation: none !important; }
}

/* ------------------------------------------------------------
   5. A BARRA DE COMENTARIO

   Antes ela encostava nos icones e nao tinha contorno nenhum.
   Agora tem uma linha de respiro em cima, campo arredondado,
   e o foco acende em roxo.
   ------------------------------------------------------------ */
.ctk-app .post-commet-textarea {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(154, 107, 255, .16);
}
.ctk-app .ck-pub__barra { margin-bottom: 2px; }

.ctk-app .post-commet-textarea .remove_combo_on_click > div:first-child,
.ctk-app .post-commet-textarea [id^="wo_comment_combo"] > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.ctk-app .post-commet-textarea img.avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex: 0 0 auto;
  margin: 0 !important;
  box-shadow: 0 0 0 2px rgba(154, 107, 255, .3);
}
.ctk-app .post-commet-textarea textarea.comment-textarea {
  flex: 1 1 auto;
  min-width: 0;
  width: 100% !important;
  min-height: 44px !important;
  height: 44px;
  padding: 11px 18px !important;
  line-height: 22px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(154, 107, 255, .3) !important;
  background: rgba(154, 107, 255, .08) !important;
  color: inherit !important;
  resize: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.ctk-app .post-commet-textarea textarea.comment-textarea::placeholder {
  color: rgba(190, 175, 225, .8);
}
.ctk-app .post-commet-textarea textarea.comment-textarea:hover {
  border-color: rgba(154, 107, 255, .48) !important;
}
.ctk-app .post-commet-textarea textarea.comment-textarea:focus {
  border-color: rgba(154, 107, 255, .8) !important;
  background: rgba(154, 107, 255, .13) !important;
  box-shadow:
    0 0 0 4px rgba(154, 107, 255, .15),
    0 8px 20px rgba(70, 32, 160, .18) !important;
}

html.ck-claro .ctk-app .post-commet-textarea { border-top-color: rgba(109, 63, 214, .14); }
html.ck-claro .ctk-app .post-commet-textarea textarea.comment-textarea {
  background: #f7f4ff !important;
  border-color: rgba(109, 63, 214, .22) !important;
  color: #2a2140 !important;
}
html.ck-claro .ctk-app .post-commet-textarea textarea.comment-textarea::placeholder {
  color: rgba(90, 76, 125, .7);
}
html.ck-claro .ctk-app .post-commet-textarea textarea.comment-textarea:focus {
  background: #fff !important;
  border-color: rgba(109, 63, 214, .6) !important;
  box-shadow:
    0 0 0 4px rgba(109, 63, 214, .12),
    0 8px 20px rgba(70, 32, 160, .1) !important;
}

/* ------------------------------------------------------------
   6. O PALCO DA MIDIA MANDA NA ALTURA

   O tema limita .post-file a 600px de altura e esconde o resto.
   Dentro da janela isso corta a foto pela metade, entao aqui a
   moldura acompanha o palco inteiro.
   ------------------------------------------------------------ */
.ck-janela__midia > *,
.ck-janela__midia .post-file,
.ck-janela__midia .ck-midia__moldura {
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ck-janela__midia .post-file > div,
.ck-janela__midia .post-file > a,
.ck-janela__midia .post-file > figure {
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ck-janela__midia .ck-carrossel,
.ck-janela__midia .ck-carrossel__trilha,
.ck-janela__midia .ck-carrossel__slide {
  overflow: hidden !important;
}
.ck-janela__midia .ck-carrossel__trilha { display: flex !important; }

/* ------------------------------------------------------------
   7. A FAIXA DE FOTOS TOMA A FORMA DAS PROPRIAS FOTOS

   A altura da faixa vem da primeira foto do post (o JavaScript
   escreve --ck-carrossel-prop), presa entre 4:5 e 1.91:1. Dentro
   dela a foto aparece inteira, sem recorte nas laterais. O que
   sobrar fica sobre um fundo escuro discreto.

   A janela cheia tem regra propria mais acima e nao entra aqui.
   ------------------------------------------------------------ */
.ctk-app .post .ck-carrossel {
  aspect-ratio: var(--ck-carrossel-prop, 4 / 5) !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 14px;
  background: #0b0716;
}
html.ck-claro .ctk-app .post .ck-carrossel { background: #140e24; }

.ctk-app .post .ck-carrossel__trilha,
.ctk-app .post .ck-carrossel__slide {
  height: 100% !important;
  max-height: 100% !important;
}
.ctk-app .post .ck-carrossel__slide img,
.ctk-app .post .ck-carrossel__slide video {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* reforco: ciutek-publicacao.css marca as fotos com .image-file e
   ganhava na especificidade, mantendo o recorte antigo */
html body.ctk-app .post .ck-carrossel {
  aspect-ratio: var(--ck-carrossel-prop, 4 / 5) !important;
  height: auto !important;
  max-height: none !important;
}
html body.ctk-app .post .ck-carrossel__trilha,
html body.ctk-app .post .ck-carrossel__slide {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
}
html body.ctk-app .post .ck-carrossel__slide img,
html body.ctk-app .post .ck-carrossel__slide video,
html body.ctk-app .post .ck-carrossel__slide img.image-file,
html body.ctk-app .post .ck-carrossel__slide .album-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* ------------------------------------------------------------
   8. A FAIXA DE FOTOS DENTRO DA JANELA

   Toda a regra do carrossel mora presa a ".ctk-app .post". Ao
   abrir a janela a faixa sai de dentro da publicacao e perdia
   essas regras: os quadros encolhiam e o arrastar parava de
   funcionar. Aqui a mesma estrutura e redesenhada para o palco
   da janela.
   ------------------------------------------------------------ */
.ck-janela__midia .ck-carrossel {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.ck-janela__midia .ck-carrossel__trilha {
  display: flex !important;
  align-items: stretch;
  gap: 0;
  width: 100% !important;
  height: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.ck-janela__midia .ck-carrossel__trilha::-webkit-scrollbar { display: none; }
.ck-janela__midia .ck-carrossel__slide {
  position: relative;
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}
.ck-janela__midia .ck-carrossel__slide > img,
.ck-janela__midia .ck-carrossel__slide img.image-file,
.ck-janela__midia .ck-carrossel__slide video {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* entre a faixa e os quadros existe o bloco do mosaico da
   plataforma (.wo_adaptive_media). Dentro da janela ele precisa
   ocupar o palco inteiro, senao encolhe a faixa toda. */
.ck-janela__midia .ck-carrossel .wo_adaptive_media,
.ck-janela__midia .ck-carrossel .wo_adaptive_media_4,
.ck-janela__midia .ck-carrossel .wo_adaptive_media_5,
.ck-janela__midia .ck-carrossel > div,
.ck-janela__midia .ck-carrossel > a {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.ck-janela__midia .ck-carrossel__slide .album-image,
.ck-janela__midia .ck-carrossel__slide > a,
.ck-janela__midia .ck-carrossel__slide > figure {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.ck-janela__midia .ck-carrossel__slide .album-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* os controles ficam de fora da regra acima */
.ck-janela__midia .ck-carrossel > .ck-carrossel__pontos,
.ck-janela__midia .ck-carrossel > .ck-carrossel__conta,
.ck-janela__midia .ck-carrossel > .ck-carrossel__seta,
.ck-janela__midia .ck-carrossel > .clear {
  width: auto !important;
  height: auto !important;
  display: initial;
}
.ck-janela__midia .ck-carrossel > .ck-carrossel__pontos { display: flex !important; }
.ck-janela__midia .ck-carrossel > .ck-carrossel__seta { display: grid !important; }
.ck-janela__midia .ck-carrossel > .clear { display: none !important; }

/* ------------------------------------------------------------
   9. CORRECAO DA FAIXA NA JANELA

   Dentro da janela a faixa herdava display:flex e os controles
   (pontos, contador e setas) entravam na mesma linha dos quadros,
   roubando largura: a foto ficava 116px mais estreita que o palco.
   Aqui a faixa volta a ser um bloco e os controles flutuam por
   cima, como devem.
   ------------------------------------------------------------ */
.ck-janela__midia .ck-carrossel {
  display: block !important;
  position: relative !important;
}
.ck-janela__midia .ck-carrossel > div,
.ck-janela__midia .ck-carrossel .wo_adaptive_media,
.ck-janela__midia .ck-carrossel .wo_adaptive_media_4,
.ck-janela__midia .ck-carrossel .wo_adaptive_media_5 {
  flex: none !important;
}
.ck-janela__midia .ck-carrossel__conta {
  position: absolute !important;
  top: 14px; right: 14px; left: auto; bottom: auto;
  z-index: 3;
  width: auto !important; height: auto !important;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(12, 8, 24, .62);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ck-janela__midia .ck-carrossel__pontos {
  position: absolute !important;
  left: 0; right: 0; bottom: 14px; top: auto;
  z-index: 3;
  width: auto !important; height: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 !important;
}
.ck-janela__midia .ck-carrossel__ponto {
  width: 6px !important;
  height: 6px !important;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .34);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ck-janela__midia .ck-carrossel__ponto--ativo {
  background: #b48cff;
  transform: scale(1.35);
}
.ck-janela__midia .ck-carrossel__seta {
  position: absolute !important;
  top: 50%; bottom: auto;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px !important;
  height: 36px !important;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 8, 24, .55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: opacity .18s ease, background .18s ease;
}
.ck-janela__midia .ck-carrossel__seta--ant { left: 14px; right: auto; }
.ck-janela__midia .ck-carrossel__seta--prox { right: 14px; left: auto; }
.ck-janela__midia .ck-carrossel:hover .ck-carrossel__seta,
.ck-janela__midia .ck-carrossel__seta:focus-visible { opacity: 1; }
.ck-janela__midia .ck-carrossel > .clear { display: none !important; }

/* ------------------------------------------------------------
   10. CABECALHO DA PUBLICACAO NO FEED

   Medido em 390px: o bloco do nome tinha 321px comecando no x 26,
   ou seja, terminava no x 347 - e os botoes de salvar e menu
   comecam no x 274. Setenta e tres pixels de texto passavam por
   baixo dos botoes, e por isso o nome quebrava em duas linhas e
   encostava na hora.

   A causa e o cabecalho ser um bloco com floats. Vira linha, como
   ja e dentro da janela: o nome ocupa o que sobra e nunca invade
   o espaco dos botoes.
   ------------------------------------------------------------ */
body.ctk-app .post .post-heading {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
body.ctk-app .post .post-heading > .pull-left.image {
  float: none !important;
  order: 1;
  flex: 0 0 auto;
  margin: 0 !important;
}
body.ctk-app .post .post-heading > .meta {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
body.ctk-app .post .post-heading > .pull-right {
  float: none !important;
  order: 3;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 auto !important;
}
body.ctk-app .post .post-heading .meta .title,
body.ctk-app .post .post-heading .meta > * { min-width: 0; }

/* ------------------------------------------------------------
   11. A FILEIRA DE ATALHOS DIZ QUE TEM MAIS

   A fileira ja rolava de lado, mas o ultimo icone aparecia
   cortado na borda e isso lia como defeito, nao como convite.
   Um esmaecido na ponta resolve: mostra que a fileira continua.
   ------------------------------------------------------------ */
body.ctk-app .ck-atalhos {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
body.ctk-app .ck-atalhos::-webkit-scrollbar { display: none; }
body.ctk-app .ck-atalhos > * { scroll-snap-align: start; }

/* ------------------------------------------------------------
   12. A FAIXA DE HISTORIAS ENCOLHIDA

   O story e redondo, no celular e no computador. Quando ninguem
   mais publicou, o circulo apenas diminui - de 98px para 64px -
   e a faixa passa de 164px de altura para perto de 80px. Nada de
   pilula, nada de texto ao lado: o circulo continua circulo.

   Assim que a primeira historia de outra pessoa chegar, o
   JavaScript tira a classe e tudo volta ao tamanho cheio.
   ------------------------------------------------------------ */
.ctk-app .ck-historias-fora--so-eu {
  padding: 10px 2px 8px !important;
  padding-left: 0 !important;
  margin-bottom: 10px !important;
}
.ctk-app .ck-historias--so-eu { margin-left: 0 !important; }
.ctk-app .ck-historias--so-eu .status-list {
  padding: 0 !important;
  overflow: visible !important;
}
.ctk-app .ck-historias--so-eu .status-list > li.create_new {
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto;
}
/* circulo um pouco maior, a pedido: 64 -> 76px */
.ctk-app .ck-historias--so-eu .status-list > li.create_new > a {
  width: 76px !important;
  height: 76px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: block !important;
}
.ctk-app .ck-historias--so-eu .status-list > li.create_new > a > img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
/* o mais roxo e desenhado no ::before, ancorado no canto do
   circulo: encolhe junto, sem precisar de posicao nova */
.ctk-app .ck-historias--so-eu .status-list > li.create_new > a::before {
  width: 22px !important;
  height: 22px !important;
}
.ctk-app .ck-historias--so-eu .ck-historias__seta { display: none !important; }
/* rotulo de versao anterior, caso sobre em algum cache */
.ck-historias__convite { display: none !important; }

/* ------------------------------------------------------------
   13. O ANEL DO STORY SEGUE A VERIFICACAO

   Mesma linguagem dos avatares das publicacoes, mas mais contida:
   uma camada so. Sem selo e um roxo discreto; azul, dourado e
   roxo verificado ganham o giro proprio de cada nivel.
   As animacoes sao as mesmas ja declaradas na secao 4.
   ------------------------------------------------------------ */
/* So o contorno do circulo aparece. O quadro do story vinha da
   plataforma com um fundo em degrade e um brilho roxo por fora
   (box-shadow), e os dois competiam com o aro: de longe viravam
   uma mancha em volta da foto. Ficam de fora aqui. */
.ctk-app .ck-historias .status-list > li > a.ck-anel-h {
  position: relative;
  overflow: visible !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  --ck-anel-h-larg: 3px;
  /* a foto do story ocupa tudo o que sobra dentro do aro */
  --ck-anel-h-recuo: var(--ck-anel-h-larg);
}
/* Mesma construcao do avatar: a foto do story e presa pelos
   quatro lados. A faixa recolhida tem uma regra da propria
   plataforma mandando a foto ocupar 100% com !important, e na
   disputa por especificidade as duas empatavam - bastava a ordem
   dos arquivos mudar para o aro e a foto se desencontrarem. Preso
   pelos quatro lados nao existe essa disputa. */
html body.ctk-app .ck-historias .status-list > li > a.ck-anel-h > img {
  position: absolute !important;
  top: var(--ck-anel-h-recuo) !important;
  left: var(--ck-anel-h-recuo) !important;
  right: auto !important;
  bottom: auto !important;
  width: calc(100% - var(--ck-anel-h-recuo) * 2) !important;
  height: calc(100% - var(--ck-anel-h-recuo) * 2) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 1;
}
/* o content precisa de !important: ciutek-publicacao.css apaga o
   ::after de todo quadro da faixa com content: none !important, e
   sem isto o aro simplesmente nao chega a existir */
.ctk-app .ck-historias .status-list > li > a.ck-anel-h::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  /* largura e altura explicitas: so o inset nao basta. Uma regra da
     plataforma fixa a altura do ::after do quadro, e como altura
     declarada vence o "bottom: 0", o aro virava meia-lua - um oval
     que girava atravessado por cima da foto na tela do celular. */
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  padding: var(--ck-anel-h-larg);
  pointer-events: none;
  z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* sem verificacao: roxo discreto */
.ctk-app .ck-historias .status-list > li > a.ck-anel-h--base::after {
  background: conic-gradient(from 0deg,
    rgba(154, 107, 255, .22),
    rgba(178, 140, 255, .6) 35%,
    rgba(206, 182, 255, .82) 55%,
    rgba(154, 107, 255, .22));
  animation: ck-anel-respira 6s ease-in-out infinite;
}

/* verificado azul */
.ctk-app .ck-historias .status-list > li > a.ck-anel-h--azul::after {
  background: conic-gradient(from 0deg,
    #1f4fd8, #4aa8ff, #a8e0ff, #6fc4ff, #4aa8ff, #1f4fd8);
  animation: ck-anel-gira 7s linear infinite;
}

/* verificado dourado */
.ctk-app .ck-historias .status-list > li > a.ck-anel-h--ouro::after {
  background: conic-gradient(from 0deg,
    #7d5606, #e8bd52, #fff3c4, #ffd97a, #bd8a14, #fff8dd, #e8bd52, #7d5606);
  animation: ck-anel-gira 2.4s linear infinite;
}

/* verificado roxo */
.ctk-app .ck-historias .status-list > li > a.ck-anel-h--supremo {
  --ck-anel-h-larg: 3px;
}
.ctk-app .ck-historias .status-list > li > a.ck-anel-h--supremo::after {
  background: conic-gradient(from 0deg,
    #6d21db, #b98cff, #ffffff, #c9a5ff, #9a5cf5, #f3ecff, #7a41f0, #6d21db);
  animation: ck-anel-gira 3.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ctk-app .ck-historias .status-list > li > a.ck-anel-h::after {
    animation: none !important;
  }
}