/* Connect sheet (#/connect). Sizes and spacing are Connect.dc.html's; the
   sheet radius (26, top only) and the segmented control radii (14, inner
   10) are DESIGN.md's tokens. Colors are tokens.css variables only. */

.v1c-cs { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: var(--backdrop); }
.v1c-cs-scrim { position: absolute; inset: 0; background: var(--scrim); }

.v1c-cs-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px;
  height: min(780px, calc(100vh - 64px)); height: min(780px, calc(100dvh - 64px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); color: var(--ink);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-sheet);
  padding: 10px 20px 28px; display: flex; flex-direction: column; gap: 18px;
  animation: v1c-sheet .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes v1c-sheet { from { transform: translateY(36px); opacity: .6; } to { transform: none; opacity: 1; } }

.v1c-cs-handle { align-self: center; flex-shrink: 0; width: 40px; height: 5px; border-radius: 3px; background: var(--handle); }
.v1c-cs-head { display: flex; align-items: center; justify-content: space-between; }
.v1c-cs-title { margin: 0; font-family: var(--font-brand); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); }
.v1c-root .v1c-cs-close {
  width: 44px; height: 44px; margin-right: -8px; border-radius: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--secondary);
}
.v1c-root .v1c-cs-close:hover { color: var(--ink); }

.v1c-cs-tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px;
  border-radius: var(--r-seg); background: var(--seg); flex-shrink: 0;
  /* The tabs stay in view while the sheet scrolls (operator, 2026-11-06:
     "can't view the tabs on mobile"); the card-colored ring hides what
     scrolls under them. */
  position: sticky; top: 0; z-index: 3; box-shadow: 0 0 0 8px var(--card);
}
.v1c-cs-tab {
  position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px;
  border: 0; border-radius: var(--r-seg-inner); background: transparent; box-shadow: none;
  color: var(--secondary); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.v1c-cs-tab::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.v1c-cs-tab[aria-selected="true"] { background: var(--seg-on); box-shadow: var(--shadow-tab); color: var(--ink); }

.v1c-cs-panel { display: flex; flex-direction: column; gap: 16px; animation: v1c-rise .25s ease-out both; }
.v1c-cs-panel[hidden] { display: none; }
.v1c-cs-lede { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--body-2); }

/* AI app */
.v1c-cs-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.v1c-cs-step { display: flex; gap: 12px; align-items: flex-start; }
.v1c-cs-stepnum {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: var(--mark-ai-bg); color: var(--mark-ai-fg); font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.v1c-cs-stepbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v1c-cs-steptitle { font-size: 15px; font-weight: 600; }
.v1c-cs-stepnote { font-size: 14px; line-height: 1.45; color: var(--secondary); }
.v1c-cs-copyrow { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.v1c-cs-copy { height: 40px; padding: 0 16px; font-size: 14px; }

.v1c-cs-perm {
  border-radius: 18px; border: 1px solid var(--field-border); background: var(--panel);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.v1c-cs-permrow { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.v1c-cs-permtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v1c-cs-permname { font-size: 14.5px; font-weight: 600; }
.v1c-cs-permnote { font-size: 12.5px; color: var(--secondary-2); }
.v1c-cs-always { font-size: 12.5px; font-weight: 600; color: var(--gold-text); white-space: nowrap; }
.v1c-cs-permdiv { height: 1px; background: var(--divider); }

/* Telegram */
.v1c-cs-tgbody { display: flex; flex-direction: column; gap: 12px; }
.v1c-cs-tgwait { display: flex; flex-direction: column; gap: 12px; }
.v1c-cs-tgopen { height: 52px; gap: 10px; font-size: 16px; border-radius: 26px; }
.v1c-cs-tgopen .v1c-wm, .v1c-cs-tghow .v1c-wm { color: inherit; }
.v1c-cs-tgskel { display: block; height: 52px; border-radius: 26px; background: var(--fill); }
.v1c-cs-tghelp { font-size: 14px; line-height: 1.5; color: var(--secondary); }
.v1c-cs-strong { font-weight: 600; color: var(--ink); }
.v1c-cs-code { font-weight: 700; color: var(--ink); letter-spacing: 0.06em; white-space: nowrap; }
.v1c-cs-tgstatus { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--gold-text); }
.v1c-cs-ok {
  border-radius: 18px; background: var(--ok-bg); border: 1px solid var(--ok-border);
  padding: 16px; display: flex; gap: 12px; align-items: center; animation: v1c-rise .3s ease-out both;
}
.v1c-cs-okmark {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--gold); color: var(--on-gold);
  display: inline-flex; align-items: center; justify-content: center;
}
.v1c-cs-oktext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v1c-cs-okname { font-size: 15px; font-weight: 600; }
.v1c-cs-oknote { font-size: 13px; color: var(--secondary); }
.v1c-cs-tghow, .v1c-cs-donebtn { height: 48px; border-radius: 24px; font-size: 15.5px; }

/* API key */
.v1c-cs-field { display: flex; flex-direction: column; gap: 8px; }
.v1c-cs-input {
  height: 50px; border-radius: 14px; border: 1px solid var(--btn-border); background: var(--input);
  padding: 0 14px; font-size: 16px; color: var(--ink); width: 100%; min-width: 0;
}
.v1c-cs-input::placeholder { color: var(--muted); opacity: 1; }
.v1c-cs-input[aria-invalid="true"] { border-color: var(--late-ring); }
.v1c-cs-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v1c-cs-radio {
  display: inline-flex; align-items: center; justify-content: center; height: 44px;
  border-radius: 22px; border: 1px solid var(--btn-border); background: var(--card); color: var(--ink);
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.v1c-cs-radio[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.v1c-cs-keyslot { display: flex; flex-direction: column; }
.v1c-cs-create { height: 50px; border-radius: 25px; font-size: 15.5px; }
.v1c-cs-key {
  border-radius: 18px; background: var(--panel); border: 1px solid var(--field-border);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; animation: v1c-rise .3s ease-out both;
}
.v1c-cs-key .v1c-cs-copyrow { margin-top: 0; }
.v1c-cs-keycode { background: var(--input); font-size: 12.5px; }
.v1c-cs-keynote { font-size: 13px; line-height: 1.45; color: var(--secondary); }

/* AI app: the picker and each app's sheet (spec section C). */
.v1c-cs-pick, .v1c-cs-appsheet { display: flex; flex-direction: column; gap: 14px; }
.v1c-cs-subtitle { margin: 0; font-family: var(--font-brand); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
.v1c-cs-subtitle:focus { outline: none; }
.v1c-cs-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--secondary); }
.v1c-cs-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v1c-cs-apptile {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px 0 8px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--field-border); color: var(--ink);
  font-size: 15px; font-weight: 600; line-height: 1.2; text-align: left;
}
.v1c-cs-apptile:hover { border-color: var(--btn-border); }
.v1c-cs-appmark {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; font-family: var(--font-brand);
  font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.v1c-cs-apphead { display: flex; align-items: center; gap: 10px; }
.v1c-cs-appbtn { height: 52px; border-radius: 26px; font-size: 16px; }
.v1c-cs-textbtn {
  position: relative; align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px;
  padding: 0; border: 0; background: transparent; color: var(--gold-text);
  font-size: 14px; font-weight: 600; line-height: 1.2; text-align: left;
}
.v1c-cs-textbtn:hover { color: var(--ink); }
.v1c-cs-reveal { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.v1c-cs-reveal[hidden] { display: none; }
.v1c-cs-steps .v1c-cs-steptitle { font-weight: 500; line-height: 1.45; }

/* Telegram: the QR code (laptop) and the inline "Open it here". */
.v1c-cs-qrbox { align-self: center; line-height: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--field-border); }
.v1c-qr { display: block; width: 220px; height: 220px; }
.v1c-qr-light { fill: var(--qr-bg); }
.v1c-qr-dark { fill: var(--qr-fg); }
.v1c-root .v1c-cs-inlinelink { position: relative; color: var(--gold-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.v1c-root .v1c-cs-inlinelink::after { content: ""; position: absolute; left: -4px; right: -4px; top: -14px; bottom: -14px; }

/* ChatGPT's plan question, and the plan answers. */
.v1c-cs-planq { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.v1c-cs-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v1c-cs-plan { white-space: normal; text-align: center; line-height: 1.2; padding: 0 8px; min-height: 44px; height: auto; }
.v1c-cs-planbody { display: flex; flex-direction: column; gap: 14px; }
.v1c-cs-planbody:empty { display: none; }
.v1c-cs-plantitle { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.v1c-cs-btnrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
/* The plan's own "Pick another app" replaces the link at the foot. */
.v1c-cs-appsheet:has([data-chatgpt-plan="free"]) .v1c-cs-backlink { display: none; }
.v1c-cs-cmd { font-size: 12px; }