/* AgentPost: o que é próprio dele por cima do sistema de design do RIA Studio
 * (design/*.css, studio.css, composer.css). Cor só por variável. */

.rs {
  --ap-instagram: oklch(60% 0.2 355);
  --ap-threads: var(--rs-texto);
  --ap-youtube: oklch(58% 0.22 27);
  --ap-tiktok: oklch(65% 0.13 200);
}

.rs-tema-escuro {
  --ap-instagram: oklch(72% 0.17 355);
  --ap-youtube: oklch(68% 0.19 27);
  --ap-tiktok: oklch(78% 0.12 200);
}

[data-rede="instagram"] { --ap-rede: var(--ap-instagram); }
[data-rede="threads"] { --ap-rede: var(--ap-threads); }
[data-rede="youtube"] { --ap-rede: var(--ap-youtube); }
[data-rede="tiktok"] { --ap-rede: var(--ap-tiktok); }

/* studio.css põe `position: relative` em todo filho do #app (regra com id,
   mais forte que .rs-nav), o que desliga o sticky do trilho: ele rolava junto
   com a página. */
#app > .rs-nav {
  position: sticky;
}

/* Ícone de cada rede no trilho com a cor dela. */
.rs-nav-item[data-rede]:not([data-rede=""]) > svg {
  color: var(--ap-rede);
}

/* Os campos de design/componentes.css usam o atalho `background` no tema escuro
   e no hover/foco: isso repete a setinha do select (escuro) ou some com ela
   (hover). Aqui a setinha volta e fica fixa. */
.rs .rs-selecao,
.rs .rs-selecao:hover,
.rs .rs-selecao:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355506B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--rs-e3) center;
}

.rs-tema-escuro .rs-selecao,
.rs-tema-escuro .rs-selecao:hover,
.rs-tema-escuro .rs-selecao:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A6A1BC' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.ap-linha-quebra {
  flex-wrap: wrap;
  gap: var(--rs-e3);
}

.ap-coluna-direita {
  gap: var(--rs-e4);
}

/* Sem isso, um link comprido (que não quebra) alarga a coluna além da tela
   no celular. */
.rs-duas-colunas > * {
  min-width: 0;
}

/* ------------------------------------------------------------ compositor */

.ap-conta {
  width: auto;
  min-width: 180px;
  margin-left: auto;
}

.ap-texto {
  min-height: 150px;
  resize: vertical;
  line-height: 1.5;
}

.rs-contador[data-excedeu="true"] {
  color: var(--rs-erro);
  font-weight: 600;
}

.ap-links {
  gap: 6px;
}

.ap-links:empty {
  display: none;
}

.ap-link-opcao {
  min-width: 0;
}

.ap-link-opcao span {
  font-family: var(--rs-fonte-mono, ui-monospace, monospace);
  font-size: var(--rs-t-xs);
}

.ap-miniatura {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  background: var(--rs-suave);
}

/* ---------------------------------------------------- prévia do Threads */

.ap-previa {
  gap: var(--rs-e3);
}

.ap-tp {
  display: flex;
  flex-direction: column;
  gap: var(--rs-e2);
  padding: var(--rs-e4);
  border: 1px solid var(--rs-borda);
  border-radius: var(--rs-raio-md);
  background: color-mix(in oklab, var(--rs-fundo) 70%, transparent);
}

.ap-tp-topo {
  display: flex;
  align-items: center;
  gap: var(--rs-e2);
  font-size: var(--rs-t-sm);
}

.ap-tp-topo .rs-avatar {
  width: 30px;
  height: 30px;
}

.ap-tp-texto {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--rs-t-sm);
  line-height: 1.5;
}

.ap-link {
  color: var(--rs-primaria);
}

.ap-tp-midia {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  overflow: hidden;
  border-radius: var(--rs-raio-sm);
}

.ap-tp-midia[data-qtd="1"] {
  grid-auto-columns: 100%;
}

.ap-tp-midia :is(img, video) {
  width: 100%;
  max-height: 320px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rs-raio-sm);
  background: var(--rs-suave);
}

.ap-tp-midia[data-qtd="1"] :is(img, video) {
  aspect-ratio: auto;
}

.ap-tp-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--rs-e3);
  border: 1px solid var(--rs-borda);
  border-radius: var(--rs-raio-sm);
  font-size: var(--rs-t-xs);
}

/* --------------------------------------------------- prévia do Instagram */

.ap-previa-ig {
  align-items: center;
}

.ap-previa-ig > .rs-rotulo {
  align-self: flex-start;
}

.ap-previa-dica {
  max-width: 300px;
  text-align: center;
}

.ap-capa {
  align-items: center;
  gap: var(--rs-e3);
}

.ap-capa-quadro {
  width: 72px;
  aspect-ratio: 9 / 16;
  flex: none;
  object-fit: cover;
  border-radius: var(--rs-raio-sm);
  background: var(--rs-suave);
}

.ap-capa-faixa {
  width: 100%;
  accent-color: var(--rs-primaria);
}

/* ---------------------------------------------------------------- filas */

.ap-fila {
  gap: var(--rs-e3);
}

.ap-item {
  align-items: flex-start;
  border: 1px solid var(--rs-borda);
  background: color-mix(in oklab, var(--rs-fundo) 40%, transparent);
}

.ap-item-icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  color: var(--ap-rede, var(--rs-primaria));
  background: color-mix(in oklab, var(--ap-rede, var(--rs-primaria)) 12%, transparent);
}

.ap-item-corpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ap-item-texto {
  font-size: var(--rs-t-sm);
  overflow-wrap: anywhere;
}

.ap-item-detalhes {
  font-size: var(--rs-t-xs);
}

.ap-item-erro {
  font-size: var(--rs-t-xs);
  color: var(--rs-erro);
}

.ap-item-acoes {
  display: flex;
  gap: 2px;
  flex: none;
}

.ap-item[data-status="publicado"] .ap-item-texto,
.ap-item[data-status="cancelado"] .ap-item-texto {
  color: var(--rs-texto-2);
}

.ap-filtro-rede {
  width: auto;
  min-width: 170px;
}

/* --------------------------------------------------------------- contas */

.ap-grade-contas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--rs-e4);
  align-items: start;
}

.ap-caixa-rede .rs-btn {
  align-self: flex-start;
}

.ap-rede-icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--ap-rede);
  background: color-mix(in oklab, var(--ap-rede) 12%, transparent);
}

/* ------------------------------------------------------------ em breve */

.ap-em-breve {
  align-items: flex-start;
  max-width: 620px;
}

.ap-em-breve-icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: var(--ap-rede, var(--rs-primaria));
  background: color-mix(in oklab, var(--ap-rede, var(--rs-primaria)) 12%, transparent);
}

.ap-config {
  max-width: 640px;
}

/* --------------------------------------------------------------- entrar */

.ap-entrar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: var(--rs-e5) var(--rs-e4);
}

.ap-entrar-cartao {
  width: min(420px, 100%);
  gap: var(--rs-e4);
  padding: var(--rs-e6) var(--rs-e5);
}

.ap-entrar-marca {
  display: flex;
  align-items: center;
  gap: var(--rs-e3);
}

.ap-entrar-marca img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.ap-entrar-marca strong {
  display: block;
  font-size: var(--rs-t-xl);
  letter-spacing: -0.015em;
}

.ap-entrar-form {
  gap: var(--rs-e3);
}

.ap-entrar-form .rs-segmentos {
  align-self: stretch;
}

.ap-entrar-form .rs-segmentos button {
  flex: 1;
}

.ap-entrar-msg {
  min-height: 1.2em;
  margin: 0;
  font-size: var(--rs-t-sm);
}

.ap-entrar-msg[data-tipo="erro"] {
  color: var(--rs-erro);
}

.ap-entrar-msg[data-tipo="sucesso"] {
  color: var(--rs-sucesso);
}

.ap-entrar-ou {
  display: flex;
  align-items: center;
  gap: var(--rs-e3);
  color: var(--rs-texto-2);
  font-size: var(--rs-t-xs);
}

.ap-entrar-ou::before,
.ap-entrar-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rs-borda);
}

.ap-google {
  gap: var(--rs-e2);
}

.ap-entrar-estado {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: var(--rs-primaria);
  background: color-mix(in oklab, var(--rs-primaria) 12%, transparent);
}

.ap-chip-usuario {
  gap: var(--rs-e1);
}

/* ----------------------------------------------------- prévia do YouTube */

.ap-yt-sobre {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 12px 14px;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.75));
  color: #fff;
  font-size: var(--rs-t-xs);
  text-align: left;
}

.ap-yt-canal {
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.ap-yt-canal .rs-avatar {
  width: 24px;
  height: 24px;
}

.ap-yt-titulo {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ap-yt-campos {
  gap: var(--rs-e3);
}