/* Connect Roblox Studio panel above the composer (2026-10-16, lib/studio-connect.js).
   One calm surface: a status line, at most two steps, and a quiet "Having trouble?".
   Built on the chat-system tokens (account page is the benchmark). Nothing here relies on
   an animation to become visible: every state is fully opaque without motion. */

body#chat-page .plugin-setup.studio-connect {
  flex-direction: column;
  align-items: stretch;
  gap: var(--rc-sp-3);
  padding: var(--rc-sp-4) var(--rc-sp-4) var(--rc-sp-3) !important;
  opacity: 1;
}

body#chat-page .studio-connect__head {
  display: flex;
  align-items: center;
  gap: var(--rc-sp-3);
}

body#chat-page .studio-connect .plugin-setup__title {
  font-size: var(--rc-fs-ui) !important;
  letter-spacing: var(--rc-ls-title);
}

body#chat-page .studio-connect__status {
  font-size: var(--rc-fs-caption);
  line-height: var(--rc-lh-snug);
  color: var(--rc-text-3);
}

/* Live status dot: amber while waiting, violet while Studio is asking, green when done. */
body#chat-page .studio-connect[data-state="waiting"] .plugin-setup__dot,
body#chat-page .studio-connect[data-state="link"] .plugin-setup__dot { background: var(--rc-warning) !important; }
body#chat-page .studio-connect[data-state="mismatch"] .plugin-setup__dot { background: var(--rc-danger) !important; }
body#chat-page .studio-connect[data-state="connected"] .plugin-setup__dot { background: var(--rc-success) !important; }
body#chat-page .studio-connect[data-state="connected"] .studio-connect__status { color: var(--rc-success); }

body#chat-page .studio-connect__steps {
  display: grid;
  gap: var(--rc-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

body#chat-page .studio-connect__step {
  display: flex;
  align-items: center;
  gap: var(--rc-sp-3);
  min-height: 40px;
  padding: var(--rc-sp-1) 0;
  border-top: 1px solid var(--rc-line);
}

body#chat-page .studio-connect__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rc-line-strong);
  border-radius: 50%;
  color: var(--rc-text-2);
  font-size: var(--rc-fs-meta);
  font-weight: var(--rc-fw-semibold);
  font-variant-numeric: tabular-nums;
}

body#chat-page .studio-connect__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--rc-fs-small);
  line-height: var(--rc-lh-snug);
  color: var(--rc-text);
}

body#chat-page #open-plugin-modal-btn.studio-connect__primary {
  flex: none;
  gap: 6px;
  border: 0 !important;
  background: var(--rc-accent-fill) !important;
  color: var(--rc-on-accent) !important;
  font-weight: var(--rc-fw-semibold) !important;
}
body#chat-page #open-plugin-modal-btn.studio-connect__primary:hover { background: var(--rc-accent-fill-hover) !important; }
body#chat-page #open-plugin-modal-btn.studio-connect__primary .lucide { opacity: 1; }

body#chat-page .studio-connect__minor,
body#chat-page .studio-connect__link,
body#chat-page .studio-connect__help {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rc-text-3);
  font: inherit;
  font-size: var(--rc-fs-caption);
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}
body#chat-page .studio-connect__minor:hover,
body#chat-page .studio-connect__link:hover,
body#chat-page .studio-connect__help:hover { color: var(--rc-text); text-decoration: underline; text-underline-offset: 3px; }
body#chat-page .studio-connect__minor:focus-visible,
body#chat-page .studio-connect__link:focus-visible,
body#chat-page .studio-connect__help:focus-visible,
body#chat-page .studio-connect__btn:focus-visible { outline: 2px solid var(--rc-focus); outline-offset: 2px; border-radius: 4px; }
body#chat-page .studio-connect__help::before,
body#chat-page .studio-connect__help::after,
body#chat-page .studio-connect__link::before,
body#chat-page .studio-connect__link::after,
body#chat-page .studio-connect__btn::before,
body#chat-page .studio-connect__btn::after { display: none !important; }

/* Link Roblox / different account: one line and one button in place of the steps. */
body#chat-page .studio-connect__alt {
  display: flex;
  align-items: center;
  gap: var(--rc-sp-3);
  padding-top: var(--rc-sp-3);
  border-top: 1px solid var(--rc-line);
}
body#chat-page .studio-connect__alt[hidden] { display: none; }
body#chat-page .studio-connect__alt-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--rc-fs-small);
  line-height: var(--rc-lh-snug);
  color: var(--rc-text);
  text-wrap: pretty;
}
body#chat-page .studio-connect__alt-text strong { font-weight: var(--rc-fw-semibold); }
body#chat-page .studio-connect__alt-msg {
  margin: 0;
  font-size: var(--rc-fs-caption);
  color: var(--rc-danger);
}
body#chat-page .studio-connect__btn {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--rc-radius-md, 10px);
  background: var(--rc-accent-fill);
  color: var(--rc-on-accent);
  font: inherit;
  font-size: var(--rc-fs-small);
  font-weight: var(--rc-fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}
body#chat-page .studio-connect__btn:hover { background: var(--rc-accent-fill-hover); }
body#chat-page .studio-connect__btn:disabled { background: var(--rc-surface-raised); color: var(--rc-text-disabled); cursor: default; }

body#chat-page .studio-connect[data-state="link"] .studio-connect__steps,
body#chat-page .studio-connect[data-state="mismatch"] .studio-connect__steps { display: none; }

body#chat-page .studio-connect__foot {
  display: flex;
  justify-content: flex-end;
}

body#chat-page .studio-connect__helpbox {
  display: grid;
  gap: var(--rc-sp-2);
  padding: var(--rc-sp-3);
  border-radius: var(--rc-radius-md, 10px);
  background: var(--rc-bg);
}
body#chat-page .studio-connect__helpbox[hidden],
body#chat-page .studio-connect__code[hidden] { display: none; }
body#chat-page .studio-connect__helptext {
  margin: 0;
  font-size: var(--rc-fs-caption);
  line-height: var(--rc-lh-snug);
  color: var(--rc-text-2);
}
body#chat-page .studio-connect__helptext a { color: var(--rc-accent-text); }
body#chat-page .studio-connect__link { justify-self: start; color: var(--rc-accent-text); }
body#chat-page .studio-connect__code { display: grid; gap: var(--rc-sp-2); }
body#chat-page .studio-connect__code .plugin-pair-form { justify-self: start; }

/* A send without Studio points here (app.js): a border, never motion only. */
body#chat-page .plugin-setup.studio-connect.is-nudge {
  border-color: var(--rc-accent-line) !important;
  box-shadow: 0 0 0 3px var(--rc-accent-soft) !important;
}
body#chat-page .studio-connect__alt-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--rc-sp-1); }

/* Code-first (today): the code form sits under step 2, indented to the step text. */
body#chat-page .studio-connect:not(.is-code-hidden) > .studio-connect__code {
  padding: 0 0 var(--rc-sp-1) 34px;
}
body#chat-page .studio-connect .plugin-setup__sub { display: block; }
body#chat-page .studio-connect[data-state="mismatch"] > .studio-connect__code,
body#chat-page .studio-connect[data-state="link"] > .studio-connect__code { display: none; }
body#chat-page .studio-connect__secondary { justify-self: start; font-size: var(--rc-fs-caption); color: var(--rc-text-3); }

/* Connected: only the head shows (app.js hides the row right after). */
body#chat-page .studio-connect[data-state="connected"] > :not(.studio-connect__head) { display: none !important; }

/* setup_link_first test, arm link_first (2026-10-16): the big Link Roblox step replaces the small nudge line. */
body#chat-page.rc-setup-link-first #rc-oc-nudge { display: none !important; }
body#chat-page #studio-connect-step2-link.studio-connect__primary {
  flex: none;
  display: inline-flex !important;
  align-items: center;
  min-height: 36px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: var(--rc-radius-md) !important;
  background: var(--rc-accent-fill) !important;
  color: var(--rc-on-accent) !important;
  box-shadow: none !important;
  font-size: var(--rc-fs-small) !important;
  font-weight: var(--rc-fw-semibold) !important;
  cursor: pointer;
}
body#chat-page #studio-connect-step2-link.studio-connect__primary:hover { background: var(--rc-accent-fill-hover) !important; }
body#chat-page #studio-connect-step2-link.studio-connect__primary:disabled { opacity: .7; cursor: default; }
/* The code is the backup in this arm: its Connect button steps down to a quiet one. */
body#chat-page.rc-setup-link-first #plugin-pair-btn.plugin-pair-btn {
  border: 1px solid var(--rc-line-strong) !important;
  background: transparent !important;
  color: var(--rc-text) !important;
}
body#chat-page.rc-setup-link-first #plugin-pair-btn.plugin-pair-btn:hover { background: var(--rc-hover) !important; }