/* ================================
   NEURODRIVEN INTERACTION PATTERN™
   ================================ */

:root{
  --pht-stroke: rgba(30,110,255,0.3);     /* azul claro e discreto */
  --pht-stroke-soft: rgba(30,110,255,.15);
  --pht-width: 2px;
  --pht-radius: 8px;
  --pht-speed: 20s;
  --pht-beam: 28deg;
}

@property --pht-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}

#quali-brf-content .blueprint-botao,
.blueprint-botao{
  all: unset;
  position: relative;
  display: inline-block;
  padding: .18rem .70rem;
  border-radius: var(--pht-radius);
  font: inherit;
  font-weight: 600;
  line-height: 1.1;
  color: inherit;
  background: transparent;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;

  box-shadow:
    inset 0 0 0 4px var(--pht-stroke-soft),
    0 0 6px var(--pht-stroke-soft);

  border: var(--pht-width) solid transparent;
  border-image: conic-gradient(
      from var(--pht-angle),
      transparent 0deg,
      var(--pht-stroke) var(--pht-beam),
      transparent calc(var(--pht-beam) + 2deg) 360deg
    ) 1;

  animation: pht-rotate var(--pht-speed) linear infinite;
  transition: transform .12s ease, box-shadow .12s ease;
}

#quali-brf-content .blueprint-botao:hover,
.blueprint-botao:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(30,110,255,.22),
    0 0 8px rgba(30,110,255,.22);
}

#quali-brf-content .blueprint-botao:focus-visible,
.blueprint-botao:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px rgba(30,110,255,0.3);
}

@keyframes pht-rotate { to { --pht-angle: 1turn; } }

@media (prefers-reduced-motion: reduce){
  #quali-brf-content .blueprint-botao,
  .blueprint-botao{ animation: none; }
}

:where(.blueprint-botao){
  background: transparent !important;
  border-color: transparent !important;
}

@supports not (background: conic-gradient(red, blue)) {
  #quali-brf-content .blueprint-botao,
  .blueprint-botao{
    animation: none;
    border-image: linear-gradient(90deg, rgba(30,110,255,0.3), rgba(30,110,255,0.3)) 1;
  }
}

/* 🧠 Cognitive Input Node™ */
/* 🧠 Cognitive Input Node™ (CIN) */
/* Estilo do container do CIN™ no topo */
.cin-topo-li {
  display: flex;
  align-items: center;         /* Centraliza verticalmente */
  justify-content: center;     /* Centraliza horizontalmente */
  font-size: 16px;
  color: white;
  padding: 8px 24px;           /* ← Padding horizontal para afastar das bordas */
  white-space: nowrap;
  max-width: 600px;            /* ou aumente se quiser mais espaço */
  white-space: nowrap;
  max-width: 1200px;         /* ← Aumentamos aqui */
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 12px;         /* opcional: arredondar um pouco a "máscara" */
  background-color: rgba(255,255,255,0.05); /* opcional: dar leve destaque */
}

.cognitive-input-node {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block; /* 🔁 era inline, agora inline-block */
  width: auto;
  min-width: 8ch; /* 🔁 aumente um pouco a largura mínima */
  white-space: nowrap;
  box-shadow: none !important;
  border-bottom: 1px dashed #aaa;
  transition: border-color 0.3s ease;
  vertical-align: baseline;
}

#header-sticky .cognitive-input-node {
  color: #e9ff48 !important;
}

.cognitive-input-node:hover {
  border-bottom: 1px dashed #005eff;
}

.cognitive-input-node::placeholder {
  color: #888;
}

.cognitive-input-node:focus {
  border-color: #005eff;
}

/* 🔗 Recognition Bridge™ */
.recognition-bridge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.recognition-bridge button {
  background-color: #f1f1f1;
  color: #333;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.recognition-bridge button:hover {
  background-color: #005eff;
  color: #fff;
}