/* Capítulo 5: NEU Connect. O agente conversa, o Connect monta a história do cliente. */
@property --cnp { syntax: '<number>'; inherits: true; initial-value: 0 }

#connect { --env: #ff5c8a }
.cn-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px }
.cn-tabs button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: .82rem; color: var(--mut); transition: .3s }
.cn-tabs button.on { background: color-mix(in srgb, var(--env) 20%, transparent); border-color: var(--env); color: #fff }

.cn-stage { display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1.08fr); gap: 16px; align-items: stretch }
.cn-chat, .cn-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 420px }
.cn-h { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 800; color: #fff; margin-bottom: 4px }
.cn-h em { margin-left: auto; font-style: normal; font-size: .68rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; color: var(--cyan, #22d3ee); background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .4) }
.cn-b { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: .84rem; line-height: 1.5; animation: cnpop .55s both }
.cn-b.u { align-self: flex-end; background: rgba(255, 255, 255, .09); color: #e7e9f3; border-bottom-right-radius: 4px }
.cn-b.a { background: rgba(34, 211, 238, .14); border: 1px solid rgba(34, 211, 238, .38); color: #fff; border-bottom-left-radius: 4px }
.cn-b:nth-of-type(1) { animation-delay: .1s } .cn-b:nth-of-type(2) { animation-delay: .5s } .cn-b:nth-of-type(3) { animation-delay: .9s } .cn-b:nth-of-type(4) { animation-delay: 1.5s }
.cn-call { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #9fe9f7; background: rgba(34, 211, 238, .1); border: 1px dashed rgba(34, 211, 238, .4); margin: 4px 0 }
@keyframes cnpop { from { opacity: 0; transform: translateY(10px) scale(.97) } to { opacity: 1; transform: none } }

.cn-mid { position: relative; display: grid; place-items: center }
.cn-mid::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(transparent, rgba(255, 255, 255, .14), transparent) }
.cn-mid i { position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--env); box-shadow: 0 0 14px var(--env); opacity: 0; top: 0 }
.cn-core { position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-weight: 900; font-size: .78rem; letter-spacing: .05em; color: #fff;
  background: radial-gradient(circle at 30% 25%, #ff86a6, #b3124a 72%); box-shadow: 0 0 0 8px rgba(255, 92, 138, .1), 0 0 0 20px rgba(255, 92, 138, .05); transition: box-shadow .5s, transform .5s }
.cn-core small { display: block; font-size: .56rem; font-weight: 700; letter-spacing: .1em; opacity: .85 }
.cn-stage[data-s="1"] .cn-core, .cn-stage[data-s="2"] .cn-core { transform: scale(1.06); box-shadow: 0 0 44px var(--env), 0 0 0 10px rgba(255, 92, 138, .16), 0 0 0 24px rgba(255, 92, 138, .07) }
.cn-stage[data-s="1"] .cn-mid i, .cn-stage[data-s="2"] .cn-mid i { animation: cnflow 2.2s ease-in infinite }
.cn-stage[data-s="1"] .cn-mid i:nth-child(2), .cn-stage[data-s="2"] .cn-mid i:nth-child(2) { animation-delay: .7s }
.cn-stage[data-s="1"] .cn-mid i:nth-child(3), .cn-stage[data-s="2"] .cn-mid i:nth-child(3) { animation-delay: 1.4s }
@keyframes cnflow { 0% { top: 8%; opacity: 0 } 20% { opacity: 1 } 100% { top: 90%; opacity: 0 } }

.cn-card > * { transition: opacity .6s, transform .6s }
.cn-card [data-from] { opacity: 0; transform: translateY(12px) }
.cn-card [data-from].on { opacity: 1; transform: none }
.cn-card [data-from="0"] { opacity: 1; transform: none }
.cn-who { display: flex; align-items: center; gap: 12px }
.cn-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff5c8a, #b3124a) }
.cn-who b { display: block; color: #fff; font-size: 1rem }
.cn-who small { color: var(--mut); font-size: .74rem }
.cn-stg { margin-left: auto; font-size: .7rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; color: #ffb454; background: rgba(255, 180, 84, .13); border: 1px solid rgba(255, 180, 84, .45) }
.cn-src { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .74rem; color: var(--mut) }
.cn-chip { padding: 3px 11px; border-radius: 999px; font-size: .7rem; font-weight: 800; color: #7fa0ff; background: rgba(127, 160, 255, .13); border: 1px solid rgba(127, 160, 255, .42) }
.cn-chip.ok { color: #34d399; background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .42) }
.cn-body { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center }
.cn-fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px }
.cn-fields li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 11px; background: rgba(255, 255, 255, .045); font-size: .8rem; color: var(--mut) }
.cn-fields li b { color: #fff; font-weight: 700 }
.cn-fields li::before { content: "\2713"; color: var(--env); font-weight: 900; margin-right: 8px }
.cn-fields li span { flex: 1 }
.cn-score { display: grid; place-items: center; gap: 6px }
.cn-score small { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mut) }
.cn-ring { --cnp: 0; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--env) calc(var(--cnp) * 1%), rgba(255, 255, 255, .08) 0); transition: --cnp 1.3s cubic-bezier(.2, .8, .2, 1) }
.cn-stage[data-s="2"] .cn-ring, .cn-stage[data-s="3"] .cn-ring { --cnp: 85 }
.cn-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #0a0e1b }
.cn-ring b { position: relative; font-size: 1.5rem; color: #fff }
.cn-sum { padding: 10px 12px; border-radius: 12px; font-size: .8rem; line-height: 1.55; color: #cdd1e2; background: rgba(255, 92, 138, .08); border-left: 2px solid var(--env) }
.cn-sum b { color: #fff }
.cn-tl { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px }
.cn-tl li { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: #d7dbea }
.cn-tl i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--env) }
.cn-tl li.al i { background: #f0645a; box-shadow: 0 0 10px #f0645a }
.cn-tl li.rf i { background: #34d399; box-shadow: 0 0 10px #34d399 }
.cn-tl b { color: #fff }
.cn-narr { margin: 18px 0 0; min-height: 3.2em; max-width: 60em; font-size: 1.02rem; line-height: 1.6; color: #d4d8ea; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s }
.cn-narr.in { opacity: 1; transform: none }

@media (max-width: 900px) {
  .cn-stage { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .cn-mid { height: 74px }
  .cn-mid::before { top: 0; bottom: 0 }
  .cn-core { width: 64px; height: 64px; font-size: .62rem; box-shadow: 0 0 0 6px rgba(255, 92, 138, .1) }
  .cn-core small { display: none }
  .cn-chat, .cn-card { min-height: 0 }
  .cn-body { grid-template-columns: minmax(0, 1fr) }
  .cn-score { justify-self: start; grid-auto-flow: column; gap: 12px }
}
@media (prefers-reduced-motion: reduce) {
  .cn-b { animation: none }
  .cn-mid i { display: none }
  .cn-card [data-from] { transition: none }
}