/* THE AI LAB — chat simulation, workflow builder, idea chain. */

.lab-hd { max-width: 780px; }
.lab-panel { padding: clamp(24px, 3vw, 40px); }
.lab-tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(227,184,92,.3);
  background: rgba(227,184,92,.08); padding: 6px 12px; border-radius: 999px;
}

/* ---------- Chat ---------- */
.chat__picks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chat__picks button {
  padding: 9px 15px; border-radius: 999px; cursor: pointer; font-size: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--mute);
  transition: border-color .28s, color .28s, background .28s;
}
.chat__picks button:hover { border-color: rgba(59,224,206,.5); color: var(--teal); }
.chat__picks button[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); background: rgba(59,224,206,.1); }

.chat__win {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: rgba(5,8,15,.55);
}
.chat__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--line-2); background: rgba(255,255,255,.025);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute-2);
}
.chat__feed { padding: 22px; min-height: 380px; max-height: 480px; overflow-y: auto; scroll-behavior: smooth; }
.chat__row { display: flex; margin-bottom: 14px; }
.chat__row--them { justify-content: flex-end; }
.chat__row--ai { justify-content: flex-start; }
.chat__b {
  max-width: 78%; padding: 13px 17px; border-radius: 16px; font-size: 14.5px; line-height: 1.55;
  animation: bIn .32s var(--ease);
}
@keyframes bIn { from { opacity: 0; transform: translateY(7px); } }
.chat__b--them { background: rgba(255,255,255,.09); border-bottom-right-radius: 5px; }
.chat__b--ai {
  background: linear-gradient(150deg, rgba(59,224,206,.17), rgba(59,224,206,.07));
  border: 1px solid rgba(59,224,206,.26); border-bottom-left-radius: 5px;
}
.chat__note {
  margin: 20px 0 4px; padding: 12px 16px; border-radius: 10px;
  border: 1px dashed rgba(227,184,92,.42); background: rgba(227,184,92,.07);
  font-size: 11.5px; letter-spacing: .05em; color: var(--gold-soft); text-align: center;
}
.chat__typing { display: flex; gap: 5px; align-items: center; padding: 16px 18px; }
.chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); opacity: .35; animation: dot 1.25s infinite; }
.chat__typing i:nth-child(2) { animation-delay: .18s; }
.chat__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Workflow builder ---------- */
.lab-in { display: flex; gap: 10px; flex-wrap: wrap; }
.lab-in input {
  flex: 1; min-width: 240px; padding: 15px 18px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--white); font-size: 15px;
}
.lab-in input:focus { outline: none; border-color: rgba(59,224,206,.55); background: rgba(59,224,206,.06); }
.lab-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lab-chips button {
  padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: 11.5px;
  border: 1px solid var(--line-2); background: transparent; color: var(--mute-2);
  transition: color .25s, border-color .25s;
}
.lab-chips button:hover { color: var(--teal); border-color: rgba(59,224,206,.4); }

.wf { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: wf; }
.wf__s {
  display: grid; grid-template-columns: 108px 1fr; gap: 18px; align-items: baseline;
  padding: 15px 0; border-top: 1px solid var(--line-2);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.wf__s.in { opacity: 1; transform: none; }
@media (max-width: 620px) { .wf__s { grid-template-columns: 1fr; gap: 5px; } }
.wf__k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.wf__v { font-size: 14.5px; color: var(--white); }

/* ---------- Idea chain ---------- */
.chain { margin-top: 26px; }
.chain__s {
  border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px;
  background: rgba(255,255,255,.025);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.chain__s.in { opacity: 1; transform: none; }
.chain__s:last-of-type { border-color: rgba(227,184,92,.34); background: rgba(227,184,92,.07); }
.chain__k { font-size: 10px; letter-spacing: .19em; text-transform: uppercase; color: var(--teal); }
.chain__s:last-of-type .chain__k { color: var(--gold); }
.chain__v { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
.chain__a { text-align: center; color: var(--gold); padding: 9px 0; font-size: 17px; }