/* The sub-account setup of an install: pick the accounts, then configure them (shared settings plus ones of their own). */

.sa-search { display: flex; align-items: center; gap: 8px; min-width: 220px; max-width: 300px; flex: 0 1 300px; position: relative; }
.sa-search svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--ink-4); pointer-events: none; }
.sa-search .input { width: 100%; padding-left: 34px; }

.sa-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.sa-filter {
  height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--ink-2); font-size: var(--fs-s); font-weight: 500; cursor: pointer;
}
.sa-filter span { margin-left: 4px; font-family: var(--mono); color: var(--ink-4); }
.sa-filter:hover { color: var(--ink); }
.sa-filter.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-text); }
.sa-filter.on span { color: inherit; }

.sa-table { overflow-x: auto; }
.sa-table table.data { margin: 0; }
.sa-table th, .sa-table td { padding-left: 22px; }
.sa-check { width: 44px; }
.sa-check input { width: 18px; height: 18px; accent-color: var(--brand); }
.sa-table tr[data-sa-row].picked td { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.sa-empty { margin: 0; padding: 28px 22px; text-align: center; color: var(--ink-3); font-size: var(--fs-s); }

.sa-who { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.sa-initial {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: var(--panel-3); color: var(--ink-2); font-size: var(--fs-s); font-weight: 600;
}
.sa-initial.all { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-text); }
.sa-initial svg { width: 16px; height: 16px; }

.sa-config { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.sa-config.single { grid-template-columns: minmax(0, 1fr); }
/* The settings and what to pay for share the right column, so the sub-account list on the left stays in view however many there are. */
.sa-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sa-locs { position: sticky; top: calc(var(--topbar) + var(--banner-h, 0px) + 18px); }
.sa-loc-list { display: flex; flex-direction: column; padding: 8px; max-height: min(560px, 60vh); overflow-y: auto; }
.sa-loc {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--r-btn, 10px);
  background: transparent; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer;
}
.sa-loc:hover { background: var(--panel-2); }
.sa-loc.on { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.sa-loc-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sa-loc-t b { font-size: var(--fs-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-loc-t span { font-size: var(--fs-xs); color: var(--ink-3); }
.sa-loc.own .sa-loc-t span { color: var(--brand-text); }
.sa-loc .pill { flex: none; }

.sa-own { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-s); font-weight: 500; color: var(--ink-2); cursor: pointer; }
.sa-readonly .pkg-cards, .sa-readonly .sa-type .seg, .sa-readonly .sa-actions, .sa-readonly [data-sa-set-all], .sa-readonly [data-sa-actions-all] { opacity: .55; }

.sa-h-row { display: flex; align-items: center; gap: 10px; margin: 22px 0 6px; }
.sa-h-row .pick-h { margin: 0; }
[data-sa-part] > .sa-h-row:first-child { margin-top: 0; }

.sa-type { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sa-type:last-of-type { border-bottom: 0; }
.sa-type-ic.rtc-ic { width: 30px; height: 30px; border-radius: 9px; }
.sa-type-ic.rtc-ic svg { width: 15px; height: 15px; }
.sa-type-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sa-type-t b { font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
.sa-type-t span { font-size: var(--fs-xs); color: var(--ink-3); }
.sa-type .seg label { padding: 0 12px; }

.sa-actions { margin-top: 4px; }
.sa-actions .switch:has(input:disabled) { cursor: not-allowed; }

@media (max-width: 1080px) {
  .sa-config { grid-template-columns: 1fr; }
  .sa-locs { position: static; }
}

@media (max-width: 640px) {
  .sa-type { flex-wrap: wrap; }
  .sa-search { max-width: none; flex: 1 1 100%; }
}

/* How to set up: by hand or planned in a chat; the chosen card reads like the wizard's own choice. */
.sa-how .dirpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sa-how .dircard:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand-text) 5%, var(--panel)); box-shadow: var(--focus-ring); }
.sa-how .dircard:has(input:checked) .tick { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
/* Plan with an assistant: pick ChatGPT or Claude, then only that one's two actions show. */
.sa-ai-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sa-ai-pick .dircard { padding: 12px 14px; }
.sa-ai-pick .dircard .dtop { margin-bottom: 0; }
.sa-ai-pick .dircard:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand-text) 5%, var(--panel)); box-shadow: var(--focus-ring); }
.sa-ai-pick .dircard:has(input:checked) .tick { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.sa-ai-for { display: none; gap: 10px; margin-top: 14px; }
.sa-ai:has(input[name="sa-assistant"][value="ChatGPT"]:checked) .sa-ai-for[data-for="ChatGPT"],
.sa-ai:has(input[name="sa-assistant"][value="Claude"]:checked) .sa-ai-for[data-for="Claude"] { display: grid; }
.sa-ai-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--panel-2); }
.sa-ai-n { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-size: var(--fs-s); font-weight: 600; background: color-mix(in srgb, var(--brand-text) 14%, transparent); color: var(--brand-text); }
.sa-ai-t { display: grid; gap: 2px; min-width: 0; }
.sa-ai-prompt { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .sa-ai-pick { grid-template-columns: 1fr; } .sa-ai-row { grid-template-columns: auto minmax(0, 1fr); } .sa-ai-row > .btn { grid-column: 2; justify-self: start; } }
@media (max-width: 760px) { .sa-how .dirpick { grid-template-columns: 1fr; } }

.sa-ai-pick .dar.sa-ai-logo { display: grid; place-items: center; flex: none; width: 34px; height: 34px; overflow: hidden; border-radius: 9px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-line); }
.sa-ai-pick .dar.sa-ai-logo img { width: 22px; height: 22px; }

/* Inside the setup grid beside the live preview: the sub-account list stacks above the editor. */
.sa-setup .sa-config { grid-template-columns: minmax(0, 1fr); }
.sa-setup .sa-locs { position: static; }
.sa-steps { min-width: 0; }

/* The choice step: plan it in ChatGPT, in Claude, or set it up here. */
.sa-choose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sa-choice { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel-2); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sa-choice:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.sa-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sa-choice b { font-weight: 600; color: var(--ink); }
.sa-choice > span:not(.sa-choice-ic):not(.tick) { font-size: var(--fs-s); color: var(--ink-3); line-height: 1.5; }
.sa-choice .tick { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: transparent; font-size: 11px; }
.sa-choice:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand-text) 6%, var(--panel)); box-shadow: var(--focus-ring); }
.sa-choice:has(input:checked) .tick { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.sa-choice-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-line); }
.sa-choice-ic img { width: 26px; height: 26px; }
.sa-choice-ic.manual { background: color-mix(in srgb, var(--brand-text) 14%, transparent); box-shadow: none; color: var(--brand-text); }
.sa-choice-ic.sm { width: 40px; height: 40px; flex: none; }
.sa-choice-ic.sm img { width: 24px; height: 24px; }

/* The prompt in a chat window that fills the card: the message typed out once, then how the assistant usually answers. */
.card.sa-ai { display: flex; flex-direction: column; }
.card.sa-ai > .card-body { flex: 1; display: flex; flex-direction: column; }
.sa-chat { flex: 1; display: flex; flex-direction: column; min-height: 420px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel-2); }
.sa-chat-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.sa-chat-body { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 20px 18px; overflow-y: auto; }
.sa-msg { display: grid; gap: 6px; max-width: 86%; }
.sa-msg.you { align-self: flex-end; justify-items: end; }
.sa-msg.them { align-self: flex-start; }
.sa-who-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); }
.sa-who-tag em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-4); }
.sa-reply-logo { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-line); }
.sa-reply-logo img, .sa-reply-logo svg { width: 13px; height: 13px; }
.sa-bubble { padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--brand-text) 14%, var(--panel)); color: var(--ink); font-size: var(--fs-s); line-height: 1.55; }
.sa-answer { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: var(--fs-s); line-height: 1.55; }
.sa-answer p { margin: 0; }
.sa-dots { display: none; gap: 4px; padding: 4px 0; }
.sa-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); animation: sa-dot 1s ease-in-out infinite; }
.sa-dots i:nth-child(2) { animation-delay: .15s; }
.sa-dots i:nth-child(3) { animation-delay: .3s; }
/* The bubble holds its full size from the start; only the words fade in, so nothing jumps while it plays. */
.sa-chat-body.playing [data-type-out] .w { opacity: 0; transition: opacity .28s ease; }
.sa-chat-body.playing [data-type-out] .w.on { opacity: 1; }
.sa-chat-body.playing .sa-reply { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.sa-chat-body.playing.replying .sa-reply { opacity: 1; transform: none; }
.sa-chat-body.playing .sa-answer p { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.sa-answer p:nth-of-type(2) { transition-delay: .26s; }
.sa-answer p:nth-of-type(3) { transition-delay: .52s; }
.sa-answer p:nth-of-type(4) { transition-delay: .78s; }
.sa-answer p:nth-of-type(n+5) { transition-delay: 1.04s; }
.sa-chat-body.playing.thinking .sa-dots { display: inline-flex; }
.sa-chat-body.playing.answered .sa-answer p { opacity: 1; transform: none; }
.sa-composer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 14px 14px; padding: 11px 12px 11px 16px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--panel); color: var(--ink-4); font-size: var(--fs-s); }
.sa-composer svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--panel-3); color: var(--ink-3); }
.sa-ai-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@keyframes sa-dot { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
@media (max-width: 900px) { .sa-choose { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sa-choice { transition: none; } }

.sa-table table.data th.sa-actions-h { text-align: right; }
.card-head .sa-head-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; flex: none; }
.sa-head-tools .sa-search { flex: 0 1 240px; min-width: 180px; }
.sa-head-tools .btn { flex: none; white-space: nowrap; }
@media (max-width: 760px) { .card-head .sa-head-tools { flex-wrap: wrap; } }