/* Styles for the pages and Settings sections added after styles.css: the automation dialog, the
   Review page's notes, the repositories list, the long model lists, the account test line and the
   marketplace note. Only the design tokens of styles.css are used, so both themes work. */

/* A link drawn as a button (Download patch) is not underlined like a link in text. */
a.btn { text-decoration: none; }

/* --- Automations: the dialog ------------------------------------------------------------------- */

.modal.small.auto-dialog { width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
/* The dialog is tall: it is held to the window's height and scrolls inside, instead of being cut
   off at the bottom on a laptop or a phone. */
.dialog-body.auto-form { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.form-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.form-pair.single { grid-template-columns: minmax(0, 1fr); }
.dialog-body select.field:disabled { color: var(--text-3); background-color: var(--sunken); }
.auto-form .form-error { margin: 0; }

/* --- Review: what approving does, and what it did ---------------------------------------------- */

.review-hint { margin-top: -4px; padding: 0 0 12px; font-size: 12px; line-height: 18px; color: var(--text-3); }
.review-applied { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 0 0 12px; font-size: 13px; line-height: 18px; color: var(--text-2); overflow-wrap: anywhere; }
.review-applied[data-state="pushed"] { color: var(--success); }
.review-applied[data-state="failed"] { color: var(--danger); }
.review-applied .mono { font-size: 12px; }
.review-applied a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-1); text-underline-offset: 3px; }
.review-applied[data-state="pushed"] > span a { color: inherit; }
.review-item[data-status="loading"] .list-sub { color: var(--text-3); }
.review-bar .btn:disabled { cursor: default; }

/* --- Settings: repositories, tokens and sending ------------------------------------------------ */

.tag.on-server { flex: none; white-space: nowrap; color: var(--text-2); }
.set-row.repo-entry { min-height: 48px; padding: 6px 0; gap: 12px; }
.set-row.repo-add { min-height: 46px; gap: 8px; }
.set-control .tag.on-server { margin-right: 4px; }

/* --- Settings › AI models: long lists ---------------------------------------------------------- */

.model-family { padding: 12px 4px 4px; font-size: 12px; line-height: 16px; color: var(--text-3); }
.model-family:first-child { padding-top: 4px; }
.model-rows .model-more { align-self: flex-start; margin: 6px 0 2px -4px; }

/* --- Settings › Accounts: how the last test went ----------------------------------------------- */

.acct-check[data-status="ok"] { color: var(--success); }
.acct-check[data-status="failed"] { color: var(--danger); }
.acct-check[data-status="testing"] { color: var(--text-2); }

/* --- Marketplace: what an agent is, and its whole description ---------------------------------- */

.market-note { margin-top: 10px; max-width: 640px; font-size: 14px; line-height: 22px; color: var(--text-2); }
.market-item { padding-top: 6px; padding-bottom: 6px; }
/* A description says what the agent can and cannot do, so it is not cut to one line. */
.market-item .market-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }

@media (max-width: 767px) {
  .modal.small.auto-dialog { width: calc(100% - 32px); max-height: calc(100vh - 32px - var(--safe-top) - var(--safe-bottom)); max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)); }
  .form-pair { grid-template-columns: minmax(0, 1fr); }
  .review-hint { margin-top: 0; }
  .review-applied a { display: inline-flex; align-items: center; min-height: 44px; }
  .set-row.repo-add { flex-wrap: nowrap; }
  .set-row.repo-add .field { height: 44px; }
  .model-rows .model-more { height: 44px; padding: 0 14px; font-size: 13px; }
  .market-item .market-desc { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* --- Settings: the GitHub connection, Environments and AWS (connections.js) --------------------- */

/* A state that is still moving ("Working", "Installing…", "Opening…"): its dot breathes. */
.conn-working::before { animation: conn-breathe .9s ease-in-out infinite alternate; }
@keyframes conn-breathe { from { opacity: .25; } to { opacity: 1; } }

/* GitHub: the one-time code, and the pasted token folded away under the list. */
.gh-wait { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; }
.gh-wait .login-code { align-self: stretch; user-select: all; overflow-wrap: anywhere; }
.gh-wait-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#github-connection[data-state="failed"] .set-desc { color: var(--danger); }
.token-instead { margin-top: 12px; }
.token-instead > summary { width: fit-content; padding: 6px 8px; border-radius: 8px; font-size: 13px; line-height: 18px; color: var(--text-2); cursor: pointer; }
.token-instead > summary:hover { color: var(--text); }
.token-instead[open] > summary { margin-bottom: 6px; }

/* The dialogs of these sections: taller than a small one, held to the window and scrolling inside. */
.modal.small.conn-dialog { width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.dialog-body.conn-form { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.conn-form small { font-size: 12px; line-height: 16px; color: var(--text-3); }
.conn-form .form-error { margin: 0; }
.dialog-body textarea.field.env-text { height: 176px; font: 12px/18px var(--mono); white-space: pre; overflow: auto; }

/* Environments: one card each, the variable names as chips. */
.set-card.env-card { padding: 12px 14px; }
.env-head { display: flex; align-items: center; gap: 12px; }
.env-name { font-weight: 500; overflow-wrap: anywhere; }
.env-facts { margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--text-2); overflow-wrap: anywhere; }
.env-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.env-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 24px; padding: 0 2px 0 8px; border-radius: 6px; background: var(--fill); font: 12px/16px var(--mono); color: var(--text); }
.env-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env-chip-x { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; color: var(--text-3); }
.env-chip-x:hover { background: var(--fill-hover); color: var(--danger); }
.env-chip.env-more { padding: 0 8px; font: 12px/16px var(--font); color: var(--text-2); }
.env-chip.env-more:hover { background: var(--fill-hover); color: var(--text); }
.set-note.env-withheld { padding: 10px 0 0; }
.env-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-3); }

/* AWS: the region box, who the key belongs to, and the tunnels. */
.field.aws-region { width: 150px; }
.aws-identity { overflow-wrap: anywhere; }
.aws-identity[data-ok="true"] { color: var(--success); }
.aws-identity[data-ok="false"] { color: var(--danger); }
.set-note.tunnel-needs { padding: 0 8px 10px; }
.tunnel { padding: 12px 0; }
.tunnel + .tunnel { border-top: 1px solid var(--border-3); }
.tunnel-main { display: flex; align-items: center; gap: 12px; }
.tunnel-where { font: 12px/18px var(--mono); color: var(--text-2); overflow-wrap: anywhere; }
.tunnel-detail { margin: 6px 0 0 40px; font-size: 12px; line-height: 18px; color: var(--text-2); overflow-wrap: anywhere; }
.tunnel[data-state="failed"] .tunnel-detail { color: var(--danger); }
.tunnel-foot { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 40px; }
.tunnel-auto { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13px; line-height: 18px; color: var(--text-2); }

@media (max-width: 767px) {
  .gh-wait-actions { align-self: stretch; }
  .gh-wait-actions .btn { flex: 1 1 auto; }
  .token-instead > summary { padding: 13px 8px; }
  .modal.small.conn-dialog { width: calc(100% - 32px); max-height: calc(100vh - 32px - var(--safe-top) - var(--safe-bottom)); max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)); }
  /* 16px keeps a phone from zooming in when a box is tapped. */
  .conn-form .field.mono, .dialog-body textarea.field.env-text, .field.aws-region { font-size: 16px; }
  .env-head { flex-wrap: wrap; row-gap: 4px; }
  .env-head .set-text { flex-basis: 40%; }
  .env-chip { height: 44px; padding: 0 0 0 12px; border-radius: 10px; font-size: 13px; }
  .env-chip-x { width: 44px; height: 44px; border-radius: 10px; }
  .env-chip.env-more { padding: 0 16px; font-size: 13px; }
  .env-actions .btn { flex: 1 1 auto; }
  .aws-region-row .set-control { flex: 1 1 100%; }
  .field.aws-region { width: 100%; }
  .tunnel-main { flex-wrap: wrap; row-gap: 8px; }
  .tunnel-main .set-text { flex-basis: 60%; }
  .tunnel-main .btn { margin-left: auto; }
  .tunnel-detail, .tunnel-foot { margin-left: 0; }
  .tunnel-foot { flex-wrap: wrap; }
}

/* GitHub: repository browser, setup steps (github-ui.js) */

/* The sign-in widget, in Settings and in the browser: its rows sit in whatever card holds it. */
.gh-connect[data-state="failed"] .set-desc { color: var(--danger); }
.switch:disabled { opacity: .45; cursor: default; }

/* The repository browser: a head, the search, the list (the only part that scrolls) and a foot. */
.modal.repo-browser { flex-direction: column; width: min(680px, 100%); height: min(760px, 100%); }
.rb { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; width: 100%; }
.rb-head { flex: none; padding: 22px 60px 12px 24px; }
.rb-head h2 { font-size: 17px; line-height: 22px; font-weight: 500; }
.rb-head p { margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.rb-tools { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 24px 10px; }
.rb-search { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--border-3); border-radius: 10px; background: var(--surface); color: var(--text-3); cursor: text; }
.rb-search:focus-within { border-color: var(--border-1); }
.rb-search input { flex: 1; width: 0; font-size: 14px; color: var(--text); }
.rb-tools .icon-btn { flex: none; width: 36px; height: 36px; border-radius: 10px; }
.rb-tools .icon-btn.spinning .icon { animation: spin .8s linear infinite; }
.rb-main { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 12px; scrollbar-width: thin; }
.rb-connect { padding: 4px 0 12px; }
.rb-connect .login-code { font-size: 32px; line-height: 44px; letter-spacing: 4px; padding: 14px 10px; }
.rb-notices { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.rb-notice { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 10px; background: var(--fill); font-size: 13px; line-height: 18px; color: var(--text); }
.rb-notice > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rb-notice > .icon { color: var(--text-3); }
.rb-notice.warn { color: var(--warn); }
.rb-notice .btn { flex: none; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-3); }
.rb-owner { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 10px 6px; background: var(--modal); font-size: 12px; line-height: 16px; color: var(--text-3); }
.rb-owner span:first-child { font-weight: 500; color: var(--text-2); overflow-wrap: anywhere; }
.rb-owner span:last-child { flex: none; }
.rb-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.rb-row:hover, .rb-row:focus-within { background: var(--fill); }
.rb-row.picked { background: var(--selected); }
.rb-check { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.rb-check:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rb-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; line-height: 20px; color: var(--text); }
.rb-repo { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.rb-name .tag { flex: none; max-width: 100%; }
.rb-project { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.rb-project span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 18px; color: var(--text-2); }
.rb-when { flex: none; font-size: 12px; line-height: 16px; color: var(--text-3); white-space: nowrap; }
.rb-more { display: flex; margin: 10px auto 4px; }
.rb-empty { display: grid; justify-items: center; gap: 12px; padding: 48px 16px; text-align: center; font-size: 13px; line-height: 18px; color: var(--text-2); overflow-wrap: anywhere; }
.rb-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 24px 16px; border-top: 1px solid var(--border-3); }
.rb-foot .dialog-error { flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; }
.rb-count { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--text-2); }
.rb-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Home: what is left to set up, above the composer. */
.setup-steps { margin: 0 0 16px; padding: 8px 14px; border: 1px solid var(--border-3); border-radius: 14px; background: var(--surface); }
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.setup-head h3 { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text); }
.setup-step { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--divider); }
.setup-step > span { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--text-2); }
.setup-step .btn { flex: none; }

/* The project dialog: held to the window and scrolling inside, the browse button, the setup command. */
.modal.small.project-dialog { width: min(480px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.project-dialog .dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.project-dialog .pd-browse { align-self: flex-start; }
.project-dialog .pd-typed { align-items: center; }
.project-dialog .pd-or { flex: none; font-size: 12px; line-height: 16px; color: var(--text-3); white-space: nowrap; }
.project-dialog .pd-typed .field { height: 30px; font-size: 13px; }
.dialog-body textarea.field.pd-setup { height: auto; min-height: 56px; font: 12px/18px var(--mono); }

/* Settings, Cloud, Repositories: the list, the blocked owners, long choices. */
.tag.blocked { color: var(--warn); }
.set-row.repo-entry[data-blocked="true"] .mono { color: var(--text-3); }
.repo-rules .set-control { min-width: 0; max-width: 100%; }
.repo-rules .select-btn { max-width: 100%; }
.repo-rules .select-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#github-available .set-desc, #repo-agents .set-note { overflow-wrap: anywhere; }
#repo-agents .set-note { padding-top: 0; }

@media (max-width: 767px) {
  .modal.repo-browser { width: 100%; height: 100%; }
  .rb-head { padding: 16px 60px 10px 16px; }
  .rb-tools { padding: 0 16px 8px; }
  .rb-search { height: 44px; }
  .rb-search input { font-size: 16px; }
  .rb-tools .icon-btn { width: 44px; height: 44px; }
  .rb-main { padding: 0 16px 8px; }
  .rb-connect .login-code { font-size: 26px; line-height: 36px; letter-spacing: 2px; }
  .rb-notice { flex-wrap: wrap; }
  .rb-notice > span { flex-basis: 60%; }
  .rb-notice .btn { flex: 1 1 100%; }
  .rb-owner { padding: 10px 4px 6px; }
  .rb-row { flex-wrap: wrap; row-gap: 0; min-height: 56px; padding: 8px 4px; }
  .rb-check { width: 22px; height: 22px; }
  .rb-text { flex-basis: 60%; }
  .rb-when { flex: 1 1 100%; padding-left: 34px; }
  .rb-more { width: 100%; }
  .rb-foot { padding: 10px 16px 12px; }
  .rb-count { flex: 1 1 100%; }
  .rb-actions { flex: 1 1 100%; }
  .rb-actions .btn { flex: 1 1 auto; }
  .setup-step { flex-wrap: wrap; }
  .setup-step > span { flex-basis: 100%; }
  .setup-step .btn { flex: 1 1 100%; }
  .modal.small.project-dialog { width: calc(100% - 32px); max-height: calc(100vh - 32px - var(--safe-top) - var(--safe-bottom)); max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)); }
  .project-dialog .pd-browse { align-self: stretch; }
  .project-dialog .pd-typed { flex-wrap: wrap; }
  .project-dialog .pd-or { flex-basis: 100%; }
  .project-dialog .pd-typed .field { height: 44px; font-size: 16px; }
  .dialog-body textarea.field.pd-setup { font-size: 16px; line-height: 22px; min-height: 64px; }
}