/* ============================================================
   CONNECTING A SOURCE

   The panel that opens under the four Connect buttons, and the
   states it goes through. Everything is inline — there is no
   overlay, no backdrop and no focus trap, because every step
   here asks the customer to go and look at another app and a
   dialog that covers the page fights that on a phone.
   ============================================================ */

/* ---- the four picker buttons -------------------------------- */
.cnx-pick{
  justify-content:flex-start;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.cnx-pick.on{
  border-color:var(--blue);
  background:linear-gradient(180deg,
              color-mix(in oklab, var(--blue) 14%, transparent),
              transparent);
}
/*  Dimmed, not disabled. The button still opens and the panel explains what
 *  the operator has not set up — a greyed-out control with no explanation is
 *  the thing a customer writes a support ticket about.  */
.cnx-pick.dim-src{opacity:.55}
.cnx-pick.dim-src .src i{filter:grayscale(1)}

/* ---- the panel ---------------------------------------------- */
.cnx-panel{
  margin-top:14px;
  border-color:color-mix(in oklab, var(--blue) 34%, var(--line));
  animation:cnxIn .3s var(--ease) both;
}
@keyframes cnxIn{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .cnx-panel{animation:none}
}

.cnx-bd{display:flex;flex-direction:column;gap:14px}

.cnx-lead{
  margin:0;
  font:400 14px/1.65 var(--ui);
  color:var(--ash);
}
.cnx-lead b{color:var(--ink);font-weight:600}

/* ---- one field ---------------------------------------------- */
.cnx-f{display:flex;flex-direction:column;gap:6px}
.cnx-f > span{
  font:600 12px/1 var(--ui);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--faint);
}
.cnx-f input{
  width:100%;
  padding:13px 14px;
  font:500 16px/1.2 var(--ui);   /* 16px: anything smaller zooms iOS on focus */
  color:var(--ink);
  background:var(--lift);
  border:1px solid var(--line);
  border-radius:10px;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.cnx-f input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--blue) 22%, transparent);
}
.cnx-f em{
  font:400 12.5px/1.5 var(--ui);
  font-style:normal;
  color:var(--faint);
}

.cnx-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- what came back ----------------------------------------- */
.cnx-note{
  margin:0;
  padding:11px 13px;
  border-radius:9px;
  font:500 13.5px/1.55 var(--ui);
  border:1px solid var(--line);
  background:var(--lift);
  color:var(--ash);
}
/*  The engine's own sentence, in the colour of what it means. It says
 *  "that code is not right" or "Telegram is rate-limiting this number",
 *  and replacing either with "failed" throws away the answer.  */
.cnx-note.bad{
  border-color:color-mix(in oklab, var(--rose) 46%, var(--line));
  background:color-mix(in oklab, var(--rose) 10%, transparent);
  color:var(--rose);
}
.cnx-note.ok{
  border-color:color-mix(in oklab, var(--mint) 40%, var(--line));
  color:var(--mint);
}
.cnx-note.hide{display:none}

/* ---- the terms warning, before the scan and not after ------- */
.cnx-warn{
  padding:14px 16px;
  border-radius:11px;
  border:1px solid color-mix(in oklab, var(--gold) 48%, var(--line));
  background:color-mix(in oklab, var(--gold) 9%, transparent);
}
.cnx-warn b{
  display:block;
  margin-bottom:6px;
  font:600 14px/1.3 var(--ui);
  color:var(--gold);
}
.cnx-warn p{margin:0;font:400 13.5px/1.65 var(--ui);color:var(--ash)}

/* ---- the WhatsApp code -------------------------------------- */
.cnx-qr{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:20px;
  text-align:center;
  border:1px dashed var(--line);
  border-radius:12px;
  min-height:180px;
  justify-content:center;
}
/*  White, always. A QR inverted by a dark theme does not scan, and this one
 *  has about twenty seconds to be read before it is reissued.  */
.cnx-qr img{
  width:min(232px,60vw);
  height:auto;
  padding:12px;
  background:#fff;
  border-radius:10px;
}
.cnx-qr p{margin:0;max-width:34ch}

/* ---- a value shown once ------------------------------------- */
.cnx-raw{
  display:block;
  padding:13px 14px;
  font:600 13px/1.7 var(--mono);
  color:var(--ink);
  background:var(--lift);
  border:1px solid var(--line);
  border-radius:9px;
  word-break:break-all;
  user-select:all;               /* one click selects the whole credential */
}

/* ---- "use my own bot instead" ------------------------------- */
.cnx-more{
  border-top:1px solid var(--line);
  padding-top:12px;
}
.cnx-more > summary{
  cursor:pointer;
  font:600 13px/1.4 var(--ui);
  color:var(--blue);
  list-style:none;
}
.cnx-more > summary::-webkit-details-marker{display:none}
.cnx-more > summary::before{content:"+ ";opacity:.7}
.cnx-more[open] > summary::before{content:"\2212 "}
.cnx-more > summary:hover{color:var(--cyan)}
.cnx-more .cnx-f{margin-top:12px}

/* ---- the row actions on the list above ---------------------- */
.sess .act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

@media (max-width:640px){
  .cnx-act{flex-direction:column;align-items:stretch}
  .cnx-act .btn{width:100%;justify-content:center}
  .sess .act{width:100%}
  .sess .act .btn{flex:1 1 auto;justify-content:center}
}