/* ==========================================================================
   CIUTEK - Velvet Nexus nas conversas

   O chat e a tela mais dependente de JavaScript do WoWonder: os dois paineis
   sao posicionados por script, e no celular o painel da conversa e fixo e
   cobre a tela inteira. Por isso aqui quase tudo e acerto de superficie -
   moldura, linhas, raios e cores - e o mínimo possivel de geometria.

   Duas correcoes nao sao de aparencia:
     . no celular a pagina abria direto na conversa vazia, escondendo a lista;
     . o compositor ficava atras da barra de baixo, sem como escrever.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Moldura dos dois paineis
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat .wo_kb_msg_page {
  background: transparent;
}

@media (min-width: 992px) {
  .ctk-app.ck-chat .msg_under_hood {
    display: flex;
    gap: 14px;
    background: transparent;
  }
  .ctk-app.ck-chat .mobilerightpane,
  .ctk-app.ck-chat .mobileleftpane {
    /* Cor por extenso: nesta tela a variavel de superficie da plataforma
       resolve para um cinza chapado, sem o roxo do Velvet. */
    background: rgba(28, 18, 48, .62) !important;
    border: 1px solid rgba(150, 96, 255, .16);
    border-radius: var(--ck-raio-3, 16px);
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   2. Lista de conversas
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat .mobilerightpane .form-control {
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--ck-borda, rgba(150, 96, 255, .20));
  background: var(--ck-campo, rgba(255, 255, 255, .05));
  color: var(--ck-texto, #f3eefc);
}
.ctk-app.ck-chat .mobilerightpane .form-control:focus {
  border-color: rgba(150, 96, 255, .55);
  outline: none;
}

.ctk-app.ck-chat .wo_msg_tabs {
  border-bottom: 1px solid var(--ck-borda, rgba(150, 96, 255, .14));
}
.ctk-app.ck-chat .wo_msg_tabs > li > a {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  color: var(--ck-texto-2, #cfc4e0) !important;
  background: transparent !important;
}
.ctk-app.ck-chat .wo_msg_tabs > li.active > a {
  background: var(--ck-acento-suave, rgba(122, 65, 240, .16)) !important;
  color: var(--ck-acento-texto, #b295ff) !important;
}

.ctk-app.ck-chat .text-sender-container > li {
  border: 0 !important;
  border-radius: var(--ck-raio-2, 12px) !important;
  margin: 2px 8px !important;
  padding: 10px 12px !important;
  background: transparent !important;
  transition: background var(--ck-tempo-1, 120ms) ease;
}
.ctk-app.ck-chat .text-sender-container > li:hover {
  background: var(--ck-realce, rgba(150, 96, 255, .08)) !important;
}
.ctk-app.ck-chat .text-sender-container > li.active,
.ctk-app.ck-chat .text-sender-container > li.selected_user {
  background: var(--ck-acento-suave, rgba(122, 65, 240, .16)) !important;
}
.ctk-app.ck-chat .text-sender-container img {
  border-radius: 50% !important;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   3. Baloes
   O modelo do WoWonder separa quem enviou por pull-left / pull-right.
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat .messages-wrapper {
  max-width: min(76%, 560px);
}
.ctk-app.ck-chat .messages-text {
  border-radius: 18px;
  padding: 10px 14px;
  line-height: 1.45;
  word-break: break-word;
  background: var(--ck-superficie-2, #1c1230);
  border: 1px solid var(--ck-borda, rgba(150, 96, 255, .14));
  color: var(--ck-texto, #f3eefc);
}
.ctk-app.ck-chat .pull-right .messages-text,
.ctk-app.ck-chat .messages-wrapper.pull-right .messages-text {
  background: linear-gradient(135deg, #7a41f0 0%, #6524cf 100%);
  border-color: transparent;
  color: #fff;
}
.ctk-app.ck-chat .messages-text img,
.ctk-app.ck-chat .message-media img,
.ctk-app.ck-chat .message-media video {
  border-radius: 14px;
  max-width: 100%;
  height: auto;
}
.ctk-app.ck-chat .message-user-image img {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.ctk-app.ck-chat .wo_reply_msg_bg {
  border-left: 3px solid var(--ck-roxo-500, #7a41f0);
  border-radius: 10px;
  background: rgba(150, 96, 255, .10);
  padding: 8px 10px;
}
.ctk-app.ck-chat .messages-reactions {
  border-radius: 999px;
  background: var(--ck-superficie, #150d24);
  border: 1px solid var(--ck-borda, rgba(150, 96, 255, .18));
}

/* --------------------------------------------------------------------------
   4. Compositor
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat .sendMessages {
  background: var(--ck-vidro-fundo, rgba(16, 12, 28, .92));
  border-top: 1px solid var(--ck-borda, rgba(150, 96, 255, .14));
}
.ctk-app.ck-chat .msg_write_combo textarea,
.ctk-app.ck-chat .sendMessages textarea {
  border-radius: 20px !important;
  border: 1px solid var(--ck-borda, rgba(150, 96, 255, .20)) !important;
  background: var(--ck-campo, rgba(255, 255, 255, .05)) !important;
  color: var(--ck-texto, #f3eefc) !important;
  /* 16px e o menor tamanho que o iPhone aceita sem dar zoom ao focar */
  font-size: 16px !important;
  padding: 10px 14px !important;
  resize: none;
}
.ctk-app.ck-chat .sendMessages .btn-send,
.ctk-app.ck-chat .sendMessages button[type="submit"] {
  border-radius: 50% !important;
  background: linear-gradient(135deg, #9a6bff, #7a41f0) !important;
  border: 0 !important;
  min-width: 44px; min-height: 44px;
}

/* --------------------------------------------------------------------------
   5. Estado vazio
   A ilustracao original vinha em bege e verde-agua, sem relacao nenhuma com
   a identidade. Ela sai e entra a marca do Ciutek.
   -------------------------------------------------------------------------- */
/* o desenho antigo e um SVG, nao uma imagem */
.ctk-app.ck-chat div.no-messages > svg,
.ctk-app.ck-chat div.no-messages > br { display: none !important; }

.ctk-app.ck-chat .ck-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.ctk-app.ck-chat .ck-vazio__marca {
  width: 86px; height: 86px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(122, 65, 240, .26), rgba(122, 65, 240, 0) 72%);
}
.ctk-app.ck-chat .ck-vazio__titulo {
  font-size: 17px; font-weight: 600;
  color: var(--ck-texto, #f3eefc);
  margin: 0;
}
.ctk-app.ck-chat .ck-vazio__texto {
  font-size: 14px;
  color: var(--ck-texto-3, #a294b8);
  margin: 0;
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   6. Celular
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Sem conversa aberta o painel da conversa e fixo e cobre a lista inteira:
     quem entrava em Mensagens caia num vazio, sem ver com quem falar. */
  .ctk-app.ck-chat:not(.ck-chat-aberto) .mobileleftpane { display: none !important; }
  .ctk-app.ck-chat:not(.ck-chat-aberto) .mobilerightpane { display: block !important; }

  /* Com a conversa aberta ela fica com a tela toda, e a barra de baixo sai:
     o compositor ficava atras dela, sem como escrever. Volta-se pela seta. */
  .ctk-app.ck-chat.ck-chat-aberto .ck-barra { display: none !important; }
  body.ctk-app.ck-chat.ck-chat-aberto { padding-bottom: 0 !important; }

  .ctk-app.ck-chat .mobilerightpane,
  .ctk-app.ck-chat .mobileleftpane {
    background: transparent;
    border: 0;
  }
  .ctk-app.ck-chat .sendMessages {
    padding-bottom: calc(8px + var(--ck-seguro-baixo, 0px));
  }
}

/* --------------------------------------------------------------------------
   7. Tema claro
   -------------------------------------------------------------------------- */
html[data-ck-tema="claro"] .ctk-app.ck-chat .messages-text {
  background: #ffffff;
  border-color: rgba(38, 13, 85, .12);
  color: var(--ck-texto, #1c1430);
}
html[data-ck-tema="claro"] .ctk-app.ck-chat .pull-right .messages-text {
  background: linear-gradient(135deg, #7a41f0 0%, #6524cf 100%);
  color: #fff;
}
html[data-ck-tema="claro"] .ctk-app.ck-chat .mobilerightpane .form-control,
html[data-ck-tema="claro"] .ctk-app.ck-chat .sendMessages textarea {
  background: rgba(38, 13, 85, .05) !important;
  border-color: rgba(38, 13, 85, .14) !important;
  color: var(--ck-texto, #1c1430) !important;
}


/* --------------------------------------------------------------------------
   8. Ajustes que so apareceram no teste
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat div.no-messages {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
html[data-ck-tema="claro"] .ctk-app.ck-chat .mobilerightpane,
html[data-ck-tema="claro"] .ctk-app.ck-chat .mobileleftpane {
  background: #ffffff !important;
  border-color: rgba(38, 13, 85, .12);
}


/* --------------------------------------------------------------------------
   9. Duas coisas que so o teste mostrou

   . A lista de conversas tem fundo rgb(247,247,247) escrito no CSS da
     plataforma. No tema escuro isso virava uma faixa branca atravessando a
     tela, com o nome da pessoa ilegivel por cima.
   . A folha da plataforma manda em qualquer svg dentro do estado vazio:
     180 px e traco branco. A marca do Ciutek entrava junto nessa regra e
     saia gigante e cinza, por cima do proprio texto.
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat .messages-recipients-list,
.ctk-app.ck-chat .messages-chat-list,
.ctk-app.ck-chat .messages-users {
  background: transparent !important;
}

.ctk-app.ck-chat .ck-vazio__marca svg {
  width: 38px !important;
  height: 38px !important;
  stroke: #9a6bff !important;
  color: #9a6bff !important;
}

html[data-ck-tema="claro"] .ctk-app.ck-chat .messages-recipients-list,
html[data-ck-tema="claro"] .ctk-app.ck-chat .messages-chat-list {
  background: transparent !important;
}

/* proporcao do vazio: a 38 px dentro de um halo de 86 px a marca lia como
   um ponto perdido. */
.ctk-app.ck-chat .ck-vazio__marca {
  width: 96px;
  height: 96px;
  background: radial-gradient(circle closest-side, rgba(122, 65, 240, .34), rgba(122, 65, 240, 0) 70%);
}
.ctk-app.ck-chat .ck-vazio__marca svg {
  width: 46px !important;
  height: 46px !important;
  stroke-width: 1.9 !important;
}

/* --------------------------------------------------------------------------
   10. O que so apareceu com mensagens de verdade na tela

   . messages-wrapper e messages-text sao o MESMO elemento, nao um dentro do
     outro. Como ele e block com float, ocupava sempre os 76% do maximo, e o
     balao ficava largo mesmo com duas palavras dentro. Com width fit-content
     ele passa a abracar o texto, e o maximo continua valendo como limite.
   . No celular o painel da conversa comeca em 45 px, mas o cabecalho do
     Ciutek termina em 56: o nome de quem estava do outro lado ficava cortado
     por baixo dele.
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat .messages-wrapper {
  width: fit-content;
  width: -moz-fit-content;
}

@media (max-width: 991px) {
  .ctk-app.ck-chat.ck-chat-aberto .mobileleftpane {
    top: 56px !important;
    height: calc(100% - 56px) !important;
  }
}


/* --------------------------------------------------------------------------
   11. O player de audio

   O audio no chat nao e desenhado pelo tema: quem monta e a biblioteca
   green-audio-player, que traz a propria folha de estilo. Ela pintava o botao
   de tocar de vermelho (#a52729) e o trilho de rosa claro (#fcdbe0) - duas
   cores que nao existem no Velvet Nexus e que apareciam bem no meio de um
   balao roxo.

   O que muda aqui e pintura, quase nada de geometria. O trilho continua com
   4px de altura e o pino com 16px de proposito: a posicao do pino e calculada
   em JavaScript pela propria biblioteca (top:-6px depende da altura do
   trilho), e mexer nesses numeros desalinha a bolinha do progresso.
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat .green-audio-player {
  padding: 0 22px 0 9px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(63, 42, 112, .96) 0%, rgba(26, 19, 45, .96) 100%) !important;
  border: 1px solid rgba(178, 149, 255, .22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 10px 26px rgba(9, 4, 22, .42) !important;
}

/* O botao de tocar. O anel de foco e um pseudo-elemento por baixo, para o
   brilho crescer sem empurrar nada ao redor. */
.ctk-app.ck-chat .green-audio-player .holder,
.ctk-app.ck-chat .green-audio-player .play-pause-btn {
  width: 42px !important;
  height: 42px !important;
}
.ctk-app.ck-chat .green-audio-player .play-pause-btn {
  position: relative;
  border-radius: 50% !important;
  background: linear-gradient(140deg, #a781ff 0%, #6528d4 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    0 6px 16px rgba(122, 65, 240, .48);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ctk-app.ck-chat .green-audio-player .play-pause-btn::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 50%;
  border: 1px solid rgba(178, 149, 255, .45);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.ctk-app.ck-chat .green-audio-player .play-pause-btn:hover {
  transform: scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 10px 26px rgba(146, 104, 251, .60);
}
.ctk-app.ck-chat .green-audio-player .play-pause-btn:hover::after {
  opacity: 1;
  transform: scale(1);
}
.ctk-app.ck-chat .green-audio-player .play-pause-btn:active {
  transform: scale(.95);
}
.ctk-app.ck-chat .green-audio-player .play-pause-btn__icon {
  fill: #ffffff !important;
}

/* Trilho, progresso e pino. */
.ctk-app.ck-chat .green-audio-player .controls__slider {
  background: rgba(255, 255, 255, .16) !important;
  border-radius: 999px !important;
}
.ctk-app.ck-chat .green-audio-player .controls__progress {
  background: linear-gradient(90deg, #c9a4ff 0%, #8b5cf6 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 10px rgba(146, 104, 251, .55);
}
.ctk-app.ck-chat .green-audio-player .progress__pin {
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(122, 65, 240, .45), 0 2px 6px rgba(9, 4, 22, .45);
}

/* Os tempos. Numeros de largura fixa param de dancar enquanto o audio toca. */
.ctk-app.ck-chat .green-audio-player .controls__current-time,
.ctk-app.ck-chat .green-audio-player .controls__total-time {
  color: rgba(226, 216, 255, .72) !important;
  font-size: 12px !important;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* Volume. */
.ctk-app.ck-chat .green-audio-player .volume__speaker {
  fill: #b295ff !important;
  transition: fill .18s ease;
}
.ctk-app.ck-chat .green-audio-player .volume__button:hover .volume__speaker {
  fill: #ffffff !important;
}
.ctk-app.ck-chat .green-audio-player .volume__controls {
  background: rgba(26, 19, 45, .94) !important;
  border: 1px solid rgba(178, 149, 255, .20);
  border-radius: 12px !important;
}
.ctk-app.ck-chat .green-audio-player .volume__progress {
  background: linear-gradient(180deg, #c9a4ff 0%, #8b5cf6 100%) !important;
}
.ctk-app.ck-chat .green-audio-player .volume__pin {
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(122, 65, 240, .45);
}
.ctk-app.ck-chat .green-audio-player .loading__spinner {
  border-color: rgba(178, 149, 255, .28) !important;
  border-top-color: #b295ff !important;
}

/* O balao que carrega so o audio nao precisa de moldura: a capsula do player
   ja e a moldura. A classe vem do JavaScript porque :has() ainda nao chega em
   todos os navegadores que o site atende. */
.ctk-app.ck-chat .messages-text.ck-bolha-audio,
.ctk-app.ck-chat .pull-right .messages-text.ck-bolha-audio {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   12. Baloes, icones e compositor

   A conversa estava correta mas sem acabamento: balao com o mesmo raio nos
   quatro cantos, compositor cinza (rgb(54,54,54)) e icones herdando um azul
   acinzentado (rgb(84,98,165)) da plataforma - nenhuma dessas cores e do
   Velvet Nexus.

   A ideia aqui e simples: o canto do lado de quem falou fica mais fechado,
   como uma ponta; a superficie ganha profundidade em vez de peso; e cada
   icone passa a ter um alvo redondo com halo, que so aparece quando o dedo ou
   o ponteiro chega perto.
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat .messages-wrapper.messages-text {
  border-radius: 18px 18px 18px 6px;
  box-shadow: 0 6px 18px rgba(9, 4, 22, .28);
}
.ctk-app.ck-chat .pull-right .messages-wrapper.messages-text,
.ctk-app.ck-chat .outgoing .messages-wrapper.messages-text {
  border-radius: 18px 18px 6px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),
    0 8px 22px rgba(101, 40, 212, .30);
}

/* Entrada discreta. Quem pediu menos movimento no sistema nao recebe nenhum. */
@media (prefers-reduced-motion: no-preference) {
  .ctk-app.ck-chat .message-contnaier {
    animation: ck-bolha-entra .26s cubic-bezier(.22, .8, .3, 1) both;
  }
}
@keyframes ck-bolha-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* O compositor: vidro roxo no lugar do cinza, e o campo por dentro sem
   fundo proprio - uma superficie so, nao duas empilhadas. */
.ctk-app.ck-chat .msg_write_combo {
  background: linear-gradient(180deg, rgba(43, 34, 70, .88) 0%, rgba(24, 19, 41, .88) 100%) !important;
  border: 1px solid rgba(178, 149, 255, .18) !important;
  border-radius: 26px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ctk-app.ck-chat .msg_write_combo:focus-within {
  border-color: rgba(178, 149, 255, .48) !important;
  box-shadow:
    0 0 0 3px rgba(122, 65, 240, .16),
    0 10px 26px rgba(9, 4, 22, .38);
}
.ctk-app.ck-chat .msg_write_combo textarea.form-control {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Os icones do compositor. O halo e um pseudo-elemento atras: cresce do
   centro, nao ocupa espaco e nao mexe no alinhamento do campo. */
.ctk-app.ck-chat .msg_write_combo .message-option-btns > .btn-file:not(.hidden),
.ctk-app.ck-chat .msg_write_combo .emo-message {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  color: #b295ff !important;
  transition: color .18s ease, transform .18s ease;
}
.ctk-app.ck-chat .msg_write_combo .message-option-btns > .btn-file:not(.hidden)::before,
.ctk-app.ck-chat .msg_write_combo .emo-message::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(178, 149, 255, .55) 0%, rgba(122, 65, 240, .28) 52%, rgba(122, 65, 240, 0) 76%);
  box-shadow: 0 0 0 1px rgba(178, 149, 255, .22), 0 4px 14px rgba(122, 65, 240, .35);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.ctk-app.ck-chat .msg_write_combo .message-option-btns > .btn-file:not(.hidden):hover,
.ctk-app.ck-chat .msg_write_combo .emo-message:hover {
  color: #ffffff !important;
  transform: translateY(-1px);
}
.ctk-app.ck-chat .msg_write_combo .message-option-btns > .btn-file:not(.hidden):hover::before,
.ctk-app.ck-chat .msg_write_combo .emo-message:hover::before {
  opacity: 1;
  transform: scale(1);
}
.ctk-app.ck-chat .msg_write_combo .message-option-btns > .btn-file:not(.hidden):active,
.ctk-app.ck-chat .msg_write_combo .emo-message:active {
  transform: scale(.92);
}
.ctk-app.ck-chat .msg_write_combo .message-option-btns svg {
  position: relative;
  width: 21px !important;
  height: 21px !important;
}

/* O microfone e o unico que muda de estado de verdade: quando esta gravando,
   a plataforma marca o botao, e o anel pulsa para deixar claro que o audio
   esta correndo. */
.ctk-app.ck-chat .msg_write_combo #messages-record.recording,
.ctk-app.ck-chat .msg_write_combo #messages-record.active {
  color: #ffffff !important;
}
.ctk-app.ck-chat .msg_write_combo #messages-record.recording::before,
.ctk-app.ck-chat .msg_write_combo #messages-record.active::before {
  opacity: 1;
  transform: scale(1);
  animation: ck-pulso 1.4s ease-out infinite;
}
@keyframes ck-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(146, 104, 251, .45); }
  70%  { box-shadow: 0 0 0 12px rgba(146, 104, 251, 0); }
  100% { box-shadow: 0 0 0 0 rgba(146, 104, 251, 0); }
}

/* O botao de enviar. O aviao inclina para a direita ao passar o ponteiro -
   um empurrao de 1px, nada mais. */
.ctk-app.ck-chat .sendMessages .send-button,
.ctk-app.ck-chat .sendMessages button.btn-main {
  border-radius: 999px !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ctk-app.ck-chat .sendMessages .send-button:hover,
.ctk-app.ck-chat .sendMessages button.btn-main:hover {
  box-shadow: 0 10px 26px rgba(122, 65, 240, .50);
}
.ctk-app.ck-chat .sendMessages .send-button svg,
.ctk-app.ck-chat .sendMessages button.btn-main svg {
  transition: transform .2s cubic-bezier(.22, .8, .3, 1);
}
.ctk-app.ck-chat .sendMessages .send-button:hover svg,
.ctk-app.ck-chat .sendMessages button.btn-main:hover svg {
  transform: translate(2px, -2px);
}
.ctk-app.ck-chat .sendMessages .send-button:active,
.ctk-app.ck-chat .sendMessages button.btn-main:active {
  transform: scale(.95);
}

/* O cabecalho da conversa: o icone de apagar vinha cinza chapado. Fica
   discreto em repouso e so acende - em vermelho, que aqui e o unico lugar
   onde vermelho faz sentido - quando o ponteiro chega. */
.ctk-app.ck-chat .msg_usr_info_top_list svg {
  color: rgba(226, 216, 255, .55);
  transition: color .18s ease, transform .18s ease;
}
.ctk-app.ck-chat .msg_usr_info_top_list svg:hover {
  color: #ff8a9b;
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   13. Tema claro para o que entrou nas secoes 11 e 12
   -------------------------------------------------------------------------- */
html[data-ck-tema~="claro"] .ctk-app.ck-chat .green-audio-player {
  background: linear-gradient(135deg, #ffffff 0%, #f4f0ff 100%) !important;
  border-color: rgba(38, 13, 85, .12) !important;
  box-shadow: 0 8px 22px rgba(38, 13, 85, .12) !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat .green-audio-player .controls__slider {
  background: rgba(38, 13, 85, .14) !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat .green-audio-player .controls__current-time,
html[data-ck-tema~="claro"] .ctk-app.ck-chat .green-audio-player .controls__total-time {
  color: rgba(38, 13, 85, .62) !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat .green-audio-player .volume__speaker {
  fill: #6528d4 !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat .green-audio-player .volume__controls {
  background: #ffffff !important;
  border-color: rgba(38, 13, 85, .12);
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat .msg_write_combo {
  background: #ffffff !important;
  border-color: rgba(38, 13, 85, .14) !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat .msg_write_combo:focus-within {
  border-color: rgba(101, 40, 212, .40) !important;
  box-shadow: 0 0 0 3px rgba(122, 65, 240, .12), 0 10px 24px rgba(38, 13, 85, .10);
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat .msg_write_combo textarea.form-control {
  background: transparent !important;
  border: 0 !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat .msg_write_combo .message-option-btns > .btn-file:not(.hidden),
html[data-ck-tema~="claro"] .ctk-app.ck-chat .msg_write_combo .emo-message {
  color: #6528d4 !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat .msg_write_combo .message-option-btns > .btn-file:not(.hidden):hover,
html[data-ck-tema~="claro"] .ctk-app.ck-chat .msg_write_combo .emo-message:hover {
  color: #3b1580 !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat .msg_usr_info_top_list svg {
  color: rgba(38, 13, 85, .45);
}


/* --------------------------------------------------------------------------
   14. Dois acertos que so o teste mostrou

   1. Zerar o fundo do balao nao bastou: por dentro dele a plataforma ainda
      monta .message-media e .message, e .message vinha com fundo proprio
      (rgb(84,98,165)) e 7px de recheio - era esse retangulo que continuava
      desenhado em volta da capsula do audio.

   2. O alvo redondo dos icones estava pegando dois elementos que a
      plataforma mantem escondidos: o span interno do proprio botao de
      emoji, e o cronometro de gravacao (.messages-rtime.hidden). Forcados a
      aparecer, empurravam o campo de escrita e quebravam a frase em duas
      linhas. Agora a regra so alcanca filhos diretos e nunca o que esta
      marcado como escondido.
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat .messages-text.ck-bolha-audio .message-media,
.ctk-app.ck-chat .messages-text.ck-bolha-audio .message {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   15. Tirar o cinza da folha escura da plataforma de cima do Velvet

   O painel da conversa ja era vidro roxo, mas nada disso aparecia: a folha
   dark.css do WoWonder pinta a tela inteira de cinza por cima, e faz isso com
   seletores de id e com !important -

     #wo_msg_right_prt .msg_write_combo   -> rgb(54,54,54)
     .text-sender-container               -> rgb(33,33,33)
     .msg_usr_info_top_list               -> rgb(19,19,19)
     .messages-load-more-messages a       -> rgb(19,19,19)

   Um seletor de classe, mesmo com !important, nao ganha de um seletor de id.
   Por isso aqui o id entra junto: e a unica forma de a superficie do tema
   aparecer. Nenhuma dessas regras muda tamanho, posicao ou comportamento -
   todas apagam uma cor que nao e do Ciutek.
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat #wo_msg_right_prt .text-sender-container,
.ctk-app.ck-chat #wo_msg_left_prt .text-sender-container,
.ctk-app.ck-chat #wo_msg_right_prt .chat-messages-wrapper,
.ctk-app.ck-chat #wo_msg_right_prt .messages-container,
.ctk-app.ck-chat #wo_msg_right_prt .messagejoint {
  background: transparent !important;
}

/* O cabecalho da conversa: em vez de uma faixa preta, uma linha de luz. */
.ctk-app.ck-chat #wo_msg_right_prt .msg_usr_info_top_list {
  background: transparent !important;
  border-bottom: 1px solid rgba(150, 96, 255, .16) !important;
}

/* Por dentro do balao a plataforma monta mais uma caixa com cor propria -
   azul acinzentado no enviado, cinza no recebido. Quem pinta o balao e o
   .messages-text, entao esta caixa some. */
.ctk-app.ck-chat #wo_msg_right_prt .messages-text .message {
  background: transparent !important;
}
.ctk-app.ck-chat #wo_msg_right_prt .messages-text .message p {
  color: inherit !important;
}
.ctk-app.ck-chat #wo_msg_right_prt .message-details {
  color: rgba(226, 216, 255, .55) !important;
}

/* O botao de carregar as mensagens anteriores. Era um circulo preto achatado,
   solto no meio da conversa; vira um alvo redondo de verdade, com o mesmo
   halo dos icones do compositor. */
.ctk-app.ck-chat #wo_msg_right_prt .messages-load-more-messages,
.ctk-app.ck-chat #wo_msg_right_prt .view-more-wrapper {
  background: transparent !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.ctk-app.ck-chat #wo_msg_right_prt .messages-load-more-messages > a,
.ctk-app.ck-chat #wo_msg_right_prt .view-more-wrapper > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(150, 96, 255, .14) !important;
  border: 1px solid rgba(178, 149, 255, .22);
  color: #b295ff !important;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.ctk-app.ck-chat #wo_msg_right_prt .messages-load-more-messages > a:hover,
.ctk-app.ck-chat #wo_msg_right_prt .view-more-wrapper > a:hover {
  background: rgba(150, 96, 255, .26) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}
.ctk-app.ck-chat #wo_msg_right_prt .messages-load-more-messages > a svg,
.ctk-app.ck-chat #wo_msg_right_prt .view-more-wrapper > a svg {
  width: 17px !important;
  height: 17px !important;
}

/* O compositor perdia para #wo_msg_right_prt .msg_write_combo. Aqui a mesma
   superficie da secao 12, agora com peso para valer. */
.ctk-app.ck-chat #wo_msg_right_prt .msg_write_combo {
  background: linear-gradient(180deg, rgba(43, 34, 70, .88) 0%, rgba(24, 19, 41, .88) 100%) !important;
  border: 1px solid rgba(178, 149, 255, .18) !important;
  border-radius: 26px !important;
}
.ctk-app.ck-chat #wo_msg_right_prt .msg_write_combo:focus-within {
  border-color: rgba(178, 149, 255, .48) !important;
  box-shadow:
    0 0 0 3px rgba(122, 65, 240, .16),
    0 10px 26px rgba(9, 4, 22, .38) !important;
}
.ctk-app.ck-chat #wo_msg_right_prt .msg_write_combo textarea,
.ctk-app.ck-chat #wo_msg_right_prt .msg_write_combo .input-group,
.ctk-app.ck-chat #wo_msg_right_prt .msg_write_combo .message-option-btns {
  background: transparent !important;
  border: 0 !important;
}
/* O cinza que a folha escura acendia sob o icone no hover sai: quem responde
   ao ponteiro agora e o halo roxo da secao 12. */
.ctk-app.ck-chat #wo_msg_right_prt .message-option-btns .btn:hover {
  background: transparent !important;
}

/* O campo de procurar da lista de conversas, pela mesma razao. */
.ctk-app.ck-chat #wo_msg_left_prt .form-control,
.ctk-app.ck-chat #wo_msg_left_prt #query {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(150, 96, 255, .20) !important;
  color: #efecf7 !important;
}

/* --------------------------------------------------------------------------
   16. Tema claro para a secao 15
   -------------------------------------------------------------------------- */
html[data-ck-tema~="claro"] .ctk-app.ck-chat #wo_msg_right_prt .msg_usr_info_top_list {
  border-bottom-color: rgba(38, 13, 85, .10) !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat #wo_msg_right_prt .message-details {
  color: rgba(38, 13, 85, .55) !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat #wo_msg_right_prt .messages-load-more-messages > a,
html[data-ck-tema~="claro"] .ctk-app.ck-chat #wo_msg_right_prt .view-more-wrapper > a {
  background: rgba(101, 40, 212, .10) !important;
  border-color: rgba(38, 13, 85, .12);
  color: #6528d4 !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat #wo_msg_right_prt .msg_write_combo {
  background: #ffffff !important;
  border-color: rgba(38, 13, 85, .14) !important;
}
html[data-ck-tema~="claro"] .ctk-app.ck-chat #wo_msg_left_prt .form-control,
html[data-ck-tema~="claro"] .ctk-app.ck-chat #wo_msg_left_prt #query {
  background: rgba(38, 13, 85, .05) !important;
  border-color: rgba(38, 13, 85, .14) !important;
  color: #1c1430 !important;
}


/* --------------------------------------------------------------------------
   17. O celular

   Tirar o cinza da folha escura (secao 15) revelou o que estava por baixo:
   no celular o painel da conversa ocupa a tela inteira e a plataforma o deixa
   branco. Aqui ele recebe o fundo do tema, que ja acompanha claro e escuro.

   Junto vieram dois acertos de largura que so aparecem em telas estreitas: o
   nome no cabecalho ficava com 43px e subia quebrado por cima da faixa, e o
   campo de escrita ficava com 142px uteis para uma frase que pede 197px.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .ctk-app.ck-chat #wo_msg_right_prt,
  .ctk-app.ck-chat #wo_msg_left_prt {
    background: var(--ck-fundo, #0d0a16) !important;
  }

  .ctk-app.ck-chat #wo_msg_right_prt .msg_usr_info_top_list {
    align-items: center;
  }
  .ctk-app.ck-chat #wo_msg_right_prt .msg_usr_cht_usr_data {
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
  }
  .ctk-app.ck-chat #wo_msg_right_prt #user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ctk-app.ck-chat .msg_write_combo .message-option-btns > .btn-file:not(.hidden),
  .ctk-app.ck-chat .msg_write_combo .emo-message {
    width: 32px !important;
    height: 32px !important;
  }
  .ctk-app.ck-chat #wo_msg_right_prt .msg_write_combo textarea.form-control {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* --------------------------------------------------------------------------
   18. O nome no cabecalho da conversa

   O bloco do nome nao acompanhava a largura do cabecalho: ficava com 43px,
   e como o link do nome e um bloco, o selo de verificado caia para a linha
   de baixo e o conjunto subia por cima da faixa. Agora o bloco ocupa o vao
   que sobra e o nome e o selo ficam lado a lado, com reticencias quando o
   nome for maior que o espaco.
   -------------------------------------------------------------------------- */
.ctk-app.ck-chat #wo_msg_right_prt .msg_usr_cht_usr_data > div {
  flex: 1 1 auto;
  min-width: 0;
}
.ctk-app.ck-chat #wo_msg_right_prt #user-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.ctk-app.ck-chat #wo_msg_right_prt #user-name > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctk-app.ck-chat #wo_msg_right_prt #user-name > svg {
  flex: 0 0 auto;
}