/* ==========================================================================
   CIUTEK - Velvet Nexus: barra de reacoes, comentarios e midia
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. A barra
   Quatro acoes de mesmo peso, com area de toque folgada.
   -------------------------------------------------------------------------- */
.ctk-app .ck-pub__barra {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  float: none !important;
  width: 100% !important;
  padding: 6px 4px;
  margin: 4px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.ctk-app .ck-pub__acao {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  /* o tema antigo fixa altura em .btn; sem !important dois dos quatro
     controles ficavam com 35px e perdiam a area de toque */
  min-height: 44px !important;
  height: auto !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 12px;
  background: transparent !important;
  color: var(--ck-cinza-300, #cfc4e0) !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.ctk-app .ck-pub__acao:hover {
  background: rgba(150, 96, 255, .13) !important;
  color: var(--ck-texto, #f3eefc) !important;
}
.ctk-app .ck-pub__acao:active { transform: scale(.97); }
.ctk-app .ck-pub__acao:focus-visible {
  outline: 2px solid var(--ck-roxo-400, #9a6bff);
  outline-offset: 2px;
}

/* icone roxo com um leve relevo */
.ctk-app .ck-pub__icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ck-roxo-400, #9a6bff);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45));
}
.ctk-app .ck-pub__acao:hover .ck-pub__icone { color: var(--ck-roxo-300, #b48bff); }
.ctk-app .ck-pub__acao .ck-icone-tema { display: none !important; }

/* estado de ja reagido, vindo do proprio tema */
.ctk-app .ck-pub__acao.selected,
.ctk-app .ck-pub__acao.active {
  color: var(--ck-roxo-300, #b48bff) !important;
  background: rgba(150, 96, 255, .12) !important;
}
.ctk-app .ck-pub__salvar--feito .ck-pub__icone { color: #ffd27a; }

/* contagem real, ao lado do rotulo */
.ctk-app .ck-pub__acao .stat-count,
.ctk-app .ck-pub__acao [class*="count"] {
  font-variant-numeric: tabular-nums;
  color: var(--ck-cinza-400, #a99bbd);
  font-weight: 700;
}

.ctk-app .ck-pub__ver {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 2px 0 0 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ck-roxo-400, #9a6bff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ctk-app .ck-pub__ver:hover { background: rgba(150, 96, 255, .12); }

@media (max-width: 560px) {
  .ctk-app .ck-pub__barra { grid-template-columns: repeat(2, 1fr); }
  .ctk-app .ck-pub__acao { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   2. Midia publicada
   Cantos arredondados, profundidade suave e um contorno roxo quase
   imperceptivel. A cor da foto ou do video nao e tocada: o realce fica na
   moldura, nunca sobre a imagem.
   -------------------------------------------------------------------------- */
.ctk-app .ck-midia__moldura {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(150, 96, 255, .16),
    0 10px 26px rgba(0, 0, 0, .34);
  background: #120a1c;
}
.ctk-app .ck-midia {
  display: block;
  width: 100%;
  height: auto;              /* a proporcao original e preservada */
  /* o tema antigo zera o raio da imagem com regra mais especifica */
  border-radius: 16px !important;
}

/* brilho enquanto a imagem nao chegou */
.ctk-app .ck-midia__moldura--carregando::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.08), rgba(255,255,255,.03));
  background-size: 200% 100%;
  animation: ck-midia-brilho 1.2s linear infinite;
  pointer-events: none;
}
@keyframes ck-midia-brilho {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 767px) {
  .ctk-app .ck-midia__moldura, .ctk-app .ck-midia { border-radius: 14px; }
}

/* --------------------------------------------------------------------------
   3. Comentarios
   -------------------------------------------------------------------------- */
.ctk-app .ck-pub__vazio {
  padding: 14px 8px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ck-cinza-400, #a99bbd);
}

@media (prefers-reduced-motion: reduce) {
  .ctk-app .ck-pub__acao { transition: none; }
  .ctk-app .ck-midia__moldura--carregando::after { animation: none; }
}

/* --------------------------------------------------------------------------
   4. Acertos de especificidade da barra
   O tema antigo marca .btn com !important e alinha os itens ao centro; sem
   isso dois dos quatro controles ficavam menores que a area minima de toque.
   -------------------------------------------------------------------------- */
.ctk-app .ck-pub__barra { align-items: stretch !important; }

.ctk-app .ck-pub__barra .ck-pub__acao {
  min-height: 44px !important;
  height: auto !important;
  line-height: 1.2 !important;
}

/* --------------------------------------------------------------------------
   5. Stories

   A fila e montada assim pelo tema:
     ul.status-list > li > a > img + p
   e cada li tem um tipo diferente: create_new (o seu, com o mais),
   not_seen_story (ainda nao visto) e o comum. Cada um vinha com uma medida
   propria, e por isso um aparecia redondo e o outro nao.

   Aqui os tres passam a ter a mesma forma: um circulo com anel roxo, a foto
   real por dentro e o nome embaixo. Nada do comportamento muda - abrir,
   avancar e fechar continuam sendo do visualizador da propria plataforma.
   -------------------------------------------------------------------------- */
.ctk-app .user-status-home {
  padding: 14px 2px 12px;
  overflow: visible;
}

.ctk-app .user-status-home .status-list {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  margin: 0 !important;
  padding: 2px !important;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ctk-app .user-status-home .status-list::-webkit-scrollbar { display: none; }

/* cada pessoa da fila */
.ctk-app .user-status-home .status-list > li {
  flex: 0 0 auto !important;
  width: 84px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  list-style: none;
  scroll-snap-align: start;
  /* o tema pedia min-width: 20% e o cartao esticava junto com a coluna */
  min-width: 0 !important;
  max-width: 84px !important;
}

/* uma animacao do tema deformava so o cartao ainda nao visto, deixando-o
   oval enquanto os outros ficavam redondos. O anel ja diz o que ela dizia. */
.ctk-app .user-status-home .status-list > li > a,
.ctk-app .user-status-home .status-list > li > a > img {
  animation: none !important;
  transform: none !important;
}

/* no cartao de criar, o tema desenha um mais dentro do rotulo; o nosso ja
   esta no circulo, entao esse fica de fora */
.ctk-app .user-status-home .status-list > li.create_new > a > p > svg,
.ctk-app .user-status-home .status-list > li.create_new > a > p {
  display: none !important;
}

/* o circulo: o anel roxo e o proprio fundo do link */
.ctk-app .user-status-home .status-list > li > a {
  position: relative;
  display: block !important;
  width: 76px !important;
  height: 76px !important;
  margin: 0 auto !important;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  background: linear-gradient(140deg, #c9a4ff 0%, #7a41f0 48%, #4a1fb0 100%) !important;
  box-shadow: 0 0 12px rgba(122, 65, 240, .45), 0 0 26px rgba(122, 65, 240, .22);
  transition: transform .16s ease, box-shadow .2s ease;
}
.ctk-app .user-status-home .status-list > li > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(122, 65, 240, .62), 0 0 34px rgba(122, 65, 240, .32);
}
.ctk-app .user-status-home .status-list > li > a:focus-visible {
  outline: 2px solid #d9c6ff;
  outline-offset: 3px;
}

/* a foto real, sem deformar, com um respiro entre ela e o anel */
.ctk-app .user-status-home .status-list > li > a > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 2px solid var(--ck-fundo, #0a0511) !important;
  background: #1a1024;
  box-sizing: border-box;
}

/* o nome sai de cima da foto e vai para baixo do circulo */
.ctk-app .user-status-home .status-list > li > a > p {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 7px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%);
  width: 84px !important;
  max-width: 84px;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--ck-cinza-300, #cfc4e0) !important;
  text-shadow: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* espaco para o nome que agora fica embaixo do circulo */
.ctk-app .user-status-home .status-list > li { padding-bottom: 22px !important; }

/* ja visto: o anel esfria, sem sumir */
.ctk-app .user-status-home .status-list > li.seen_story > a,
.ctk-app .user-status-home .status-list > li > a.seen_story {
  background: linear-gradient(140deg, rgba(201,164,255,.34), rgba(122,65,240,.34)) !important;
  box-shadow: none !important;
}

/* O tema desenhava por cima do cartao duas coisas que nao existem mais aqui:
   um retangulo colorido no <li> e uma faixa escura sob o nome no <a>. Sem
   desliga-las, o circulo aparecia por baixo de um cartao retangular. */
.ctk-app .user-status-home .status-list > li::before,
.ctk-app .user-status-home .status-list > li::after,
.ctk-app .user-status-home .status-list > li > a::after {
  content: none !important;
  display: none !important;
}

/* a foto vinha posicionada de forma absoluta e escapava do circulo */
.ctk-app .user-status-home .status-list > li > a > img {
  position: static !important;
  inset: auto !important;
}

/* o seu proprio cartao ganha o sinal de mais, no lugar do anel */
.ctk-app .user-status-home .status-list > li.create_new > a {
  background: linear-gradient(140deg, rgba(201,164,255,.22), rgba(122,65,240,.22)) !important;
  box-shadow: inset 0 0 0 1px rgba(154, 107, 255, .5);
}
.ctk-app .user-status-home .status-list > li.create_new > a::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--ck-fundo, #0a0511);
  background:
    linear-gradient(#fff, #fff) center / 11px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 11px no-repeat,
    linear-gradient(135deg, #9a6bff, #7a41f0);
  box-shadow: 0 3px 10px rgba(122, 65, 240, .5);
}

@media (max-width: 767px) {
  .ctk-app .user-status-home .status-list { gap: 12px; }
  .ctk-app .user-status-home .status-list > li { width: 74px !important; }
  .ctk-app .user-status-home .status-list > li > a { width: 68px !important; height: 68px !important; }
  .ctk-app .user-status-home .status-list > li > a > p { width: 74px !important; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .ctk-app .user-status-home .status-list > li > a { transition: none; }
}


/* ==========================================================================
   Stories: so o circulo, e mais perto do topo

   1. O retangulo em volta dos circulos
      A faixa rola na horizontal e por isso e um container de rolagem, com
      overflow-y: hidden. O brilho do anel (26 px) era maior que os 2 px de
      folga da faixa, entao a sombra era cortada numa linha reta: e isso que
      desenhava o quadrado em volta do circulo. A folga agora comporta o
      brilho inteiro, e ele so aparece como circulo.

   2. O anel um pouco maior que a foto
      A folga entre o anel e a foto passou de 3 px para 4 px, e no celular o
      circulo cresceu de 68 px para 74 px.

   3. O vao ate o cabecalho
      Vinha de margens que o tema antigo usava para compensar a barra dele.
      Como o cabecalho do Ciutek e fixo e o corpo ja reserva a altura dele,
      essas margens viraram espaco morto no celular.
   ========================================================================== */
.ctk-app .user-status-home .status-list {
  padding: 14px 12px !important;
  overflow-y: visible;
}
.ctk-app .user-status-home .status-list > li > a {
  padding: 4px !important;
  box-shadow: 0 0 11px rgba(122, 65, 240, .40) !important;
}
.ctk-app .user-status-home .status-list > li > a > img {
  border-width: 2px !important;
}

@media (max-width: 991px) {
  /* espaco morto herdado do tema antigo */
  .ctk-app .content-container.container { margin-top: 0 !important; }
  .ctk-app .page-margin { margin-top: 10px !important; }
  .ctk-app .user-status-home { padding-top: 6px !important; }

  .ctk-app .user-status-home .status-list > li {
    width: 80px !important;
    max-width: 80px !important;
  }
  .ctk-app .user-status-home .status-list > li > a {
    width: 74px !important;
    height: 74px !important;
  }
  .ctk-app .user-status-home .status-list > li > a > p {
    width: 80px !important;
  }
}