/* BioModels AI · Amino Acids */

/* ── Backgrounds: one palette for everything that is not the canvas ─────────────
   The canvas stays white; the panels around and over it sit on these, so the
   controls read as a separate layer and the text on them has more contrast. */
:root {
  --aa-bg-chrome:  #e4e9ef;   /* outer frame: the left panel's header + tab strip */
  --aa-bg-panel:   #f3f5f8;   /* the open tab's content (and the active tab itself) */
  --aa-bg-card:    #ffffff;   /* cards and boxes inside a panel */
  --aa-bg-bar:     #eaeef3;   /* the bar above each canvas */
  --aa-bg-float:   rgba(243, 245, 248, .97);   /* bars floating over the canvas (build bar, readout) */
  --aa-bd-chrome:  #c9d2dc;   /* borders on those */
}
html, body { height: 100%; overflow: hidden; }
.aa-app { display: flex; width: 100%; height: 100vh; }
body.be .aa-app { flex: 1 1 auto; height: auto; min-height: 0; }   /* under the top bar (css/site.css) */

/* ── left panel: FattyInteractModel3D's config panel, docked ─────────────── */
.aa-side {
  flex: 0 0 372px; width: 372px; height: 100%;
  display: flex; flex-direction: column;
  background: var(--aa-bg-chrome); border-right: 1px solid var(--aa-bd-chrome);
  position: relative; z-index: 5;
}
.aa-brand { flex: 0 0 auto; padding: 8px 12px 7px 14px; font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; }
.aa-tabs { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.aa-tabs .aa-seg button { padding: 2px 9px; }
/* no "Config" title, no "Explain" switch or explanation texts */
.aa-side .fim3d-panel-title, .aa-side .fim3d-explain-toggle, .aa-side .fim3d-explain { display: none !important; }
.aa-brand .home { color: var(--ink-faint); text-decoration: none; font-size: 12px; margin-right: 4px; }
.aa-brand .home:hover { color: var(--ink); }
.aa-side .fim3d-panel {
  position: static; flex: 1 1 auto; min-height: 0;
  width: auto; max-width: none; max-height: none;
  border: none; border-radius: 0; box-shadow: none; background: var(--aa-bg-chrome);
  display: flex; flex-direction: column;
}
.aa-side .fim3d-panel.is-collapsed .fim3d-panel-body { display: block; }
.aa-side .fim3d-collapse { display: none; }
.aa-side .fim3d-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px 16px; background: var(--aa-bg-panel); }
.aa-side .fim3d-tabs { background: var(--aa-bg-chrome); border-bottom-color: var(--aa-bd-chrome); }
.aa-side .fim3d-tab { color: #5d6b7a; }
.aa-side .fim3d-tab:hover { background: rgba(255,255,255,.45); color: var(--ink); }
.aa-side .fim3d-tab.is-active { background: var(--aa-bg-panel); border-color: var(--aa-bd-chrome); border-bottom-color: var(--aa-bg-panel); color: #1d5390; }
.aa-side .fim3d-group-note { color: #6b7684; }

/* ── the stage ───────────────────────────────────────────────────────────── */
/* canvases: 1, 2 side by side, or 4 quadrants */
.aa-stages { flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0; display: grid; gap: 4px; background: #dfe5ec; }
.aa-stages[data-tabs="1"] { grid-template-columns: 1fr; gap: 0; }
.aa-stages[data-tabs="2"] { grid-template-columns: 1fr 1fr; }
.aa-stages[data-tabs="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.aa-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.aa-stages:not([data-tabs="1"]) .aa-pane { box-shadow: inset 0 0 0 2px transparent; }
.aa-stages:not([data-tabs="1"]) .aa-pane.is-active { box-shadow: inset 0 0 0 2px #1e88e5; }
.aa-stages:not([data-tabs="1"]) .aa-pane.is-active .aa-panebar { background: #e8f1fb; }
.aa-panebar { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 10px; padding: 5px 10px 7px; border-bottom: 1px solid var(--aa-bd-chrome);
  font: 12px "Inter", Arial, sans-serif; color: var(--ink); background: #f7f9fb; z-index: 8; }
.aa-stages[data-tabs="1"] .aa-pane-k { display: none; }   /* one canvas: the bar, without its number */
.aa-pane-k { font-weight: 800; color: #fff; background: #90a4ae; border-radius: 3px; min-width: 18px; text-align: center; padding: 0 4px; }
.aa-pane.is-active .aa-pane-k { background: #1e88e5; }
.aa-pane-sel { flex: 0 0 auto; width: auto !important; max-width: 230px; font: 11.5px "Inter", Arial, sans-serif; padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.aa-pane-name { flex: 1 1 auto; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-left: 4px; }
.aa-panebody { position: relative; flex: 1 1 auto; min-height: 0; }
.aa-stage { position: absolute; inset: 0; min-width: 0; background: #fff; overflow: hidden; }
/* AlphaFold / UniProt in a canvas's place */
.aa-alt { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; font: 12px "Inter", Arial, sans-serif; color: var(--ink); }
.aa-alt[hidden] { display: none; }
.aa-alt-msg { margin: auto; color: var(--ink-faint); font-size: 13px; padding: 20px; text-align: center; max-width: 420px; }
.aa-alt-head { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.aa-alt-note { font-size: 11px; color: var(--ink-soft); margin-top: 3px; }
.aa-plddt { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 4px; font-size: 10.5px; color: var(--ink-soft); }
.aa-plddt span { display: inline-flex; align-items: center; gap: 4px; }
.aa-plddt i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.aa-molstar { position: relative; flex: 1 1 auto; min-height: 0; }
.aa-alt-foot { flex: 0 0 auto; padding: 4px 10px; font-size: 10.5px; color: var(--ink-faint); border-top: 1px solid var(--line); }
.aa-alt-foot a { color: #1565c0; }
.aa-uniprot { flex: 1 1 auto; overflow: auto; padding: 10px 14px; }
.aa-up-head b { font-size: 15px; }
.aa-up-meta { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.aa-up-sub { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1d5390; margin: 12px 0 4px; }
.aa-up-p { margin: 0; line-height: 1.5; }
.aa-up-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.aa-up-chips span { background: #eef2f6; border-radius: 3px; padding: 1px 6px; font-size: 11px; }
.aa-up-tracks { display: flex; flex-direction: column; gap: 3px; }
.aa-up-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ink-soft); }
.aa-up-line { position: relative; height: 10px; background: #f1f3f6; border-radius: 2px; }
.aa-up-line span { position: absolute; top: 0; bottom: 0; border-radius: 2px; opacity: .9; }
.aa-topacts--row { display: flex; justify-content: flex-end; margin: -2px 0 6px; }
.aa-stage .fim3d-canvas { position: absolute; inset: 0; }
.aa-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 14px; pointer-events: none; z-index: 1; }
.aa-empty[hidden] { display: none; }
.aa-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6;
  background: #22303f; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 4px; opacity: .92;
  pointer-events: none; white-space: nowrap;
}
.aa-water {
  position: absolute; z-index: 6; transform: translate(-50%, -160%);
  font: 700 13px "Inter", Arial, sans-serif; color: #1565c0; pointer-events: none;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}

/* ── Amino Acids tab ─────────────────────────────────────────────────────── */
.aa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.aa-box {
  appearance: none; cursor: default; font: inherit; color: var(--ink);
  display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px;
  text-align: left; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--cls, #ccc);
  border-radius: 5px; padding: 3px 6px 3px 3px; min-height: 48px; position: relative;
}
.aa-box:hover { border-color: var(--accent); border-left-color: var(--cls, #ccc); background: #fbfcfd; }
.aa-box:active { transform: translateY(1px); }
.aa-box img { width: 62px; height: 42px; object-fit: contain; pointer-events: none; }
.aa-cap { display: flex; flex-direction: column; min-width: 0; }
.aa-cap b { font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.aa-cap small { font-size: 10.5px; color: var(--ink-soft); }
.aa-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 10.5px; color: var(--ink-soft); }
.aa-legend span { display: inline-flex; align-items: center; gap: 4px; }
.aa-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.aa-seq { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0 6px; }
.aa-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 20px; padding: 0 3px;
  border-radius: 3px; color: #fff; font: 700 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.aa-chip.is-queued { background: #fff !important; color: var(--ink-faint); border: 1px dashed var(--line); }
.aa-seq-empty { font-size: 11.5px; color: var(--ink-faint); }
.aa-seq-info { flex-basis: 100%; font-size: 10.5px; color: var(--ink-soft); margin-top: 4px; }
.aa-pane .aa-status { display: block; min-height: 1em; }
.aa-row { display: flex; gap: 6px; align-items: center; }
.aa-input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.aa-slider { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 11.5px; color: var(--ink-soft); margin-top: 6px; }
.aa-slider b { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* counter on each box: how many of this amino acid are in the chain (empty = none) */
.aa-count {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; background: var(--cls, #888); color: #fff; text-align: center; pointer-events: none;
  font: 700 10px/15px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-shadow: 0 0 2px rgba(0,0,0,.35);
}
.aa-count:empty { display: none; }

/* Color: Atoms | Amino | Distinct */
.aa-colorrow { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 11.5px; color: var(--ink-soft); }
.aa-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.aa-seg button {
  appearance: none; border: none; background: #fff; color: var(--ink-soft); cursor: pointer;
  font: 600 11px "Inter", Arial, sans-serif; padding: 3px 10px;
}
.aa-seg button + button { border-left: 1px solid var(--line); }
.aa-seg button:hover { background: #f4f6f9; color: var(--ink); }
.aa-seg button.is-on { background: var(--accent, #1d5390); color: #fff; }

.aa-chip:not(.is-queued) { cursor: default; }
.aa-chip:not(.is-queued):hover { box-shadow: 0 0 0 2px #ffc247; }

/* Appearance: square, thinner colour boxes */
.aa-side .fim3d-color { width: 17px; height: 17px; flex: 0 0 17px; padding: 0; }
.aa-side .fim3d-color::-webkit-color-swatch-wrapper { padding: 1px; }
.aa-side .fim3d-color::-webkit-color-swatch { border: none; border-radius: 2px; }
.aa-side .fim3d-color::-moz-color-swatch { border: none; border-radius: 2px; }

/* Remove last / Clear: top right of the Amino acids group, sized to their text */
.aa-topacts { margin-left: auto; display: flex; gap: 4px; }
.aa-topacts .fim3d-btn { flex: 0 0 auto; padding: 2px 8px; line-height: 1.3; }

/* ── Proteins tab ────────────────────────────────────────────────────────── */
.aa-primary {
  appearance: none; cursor: pointer; font: 600 12px "Inter", Arial, sans-serif;
  background: var(--accent, #56697f); color: #fff; border: 1px solid transparent; border-radius: 5px; padding: 6px 14px;
}
.aa-primary:hover { filter: brightness(1.1); }
.aa-pcard { margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.aa-pname { font-size: 14px; font-weight: 700; color: var(--ink); }
.aa-pmeta { font-size: 11px; color: var(--ink-soft); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.aa-pcat { background: #eef2f6; color: var(--ink); border-radius: 3px; padding: 0 5px; font-weight: 600; }
.aa-ptag { border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; font-size: 10px; }
.aa-prole { font-size: 12px; line-height: 1.45; color: var(--ink); margin: 8px 0 4px; }
.aa-pnote { font-size: 11px; line-height: 1.4; color: var(--ink-soft); margin: 0 0 4px; font-style: italic; }
.aa-pwarn { font-size: 11px; line-height: 1.4; color: #8a5a00; background: #fdf1d8; border-radius: 4px; padding: 4px 6px; margin: 4px 0; }
.aa-psrc { font-size: 10px; color: var(--ink-faint); margin-top: 6px; }
.aa-pstrip { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 6px; max-height: 150px; overflow: auto; padding: 2px 0;
  font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; position: relative; }
.aa-pstrip span { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 16px; border-radius: 2px;
  color: #9aa4ae; background: #f1f3f6; border-bottom: 2px solid #ccc; cursor: default; box-sizing: border-box; }
.aa-pstrip span.done { color: #1d2833; background: #e3e9ef; }
.aa-pstrip span.cur { outline: 2px solid #1e88e5; color: #0d47a1; background: #fff; }
.aa-mright .aa-pstrip span { color: #1d2833; }
.aa-pprogress { height: 4px; background: #eef1f4; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.aa-pprogress > div { height: 100%; width: 0; background: #1e88e5; transition: width .2s; }

/* ── picker pop-up ───────────────────────────────────────────────────────── */
.aa-modal { position: fixed; inset: 0; z-index: 100; background: rgba(20, 28, 38, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.aa-modal[hidden] { display: none; }
.aa-dialog { background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.25); width: min(1000px, 100%); height: min(640px, 100%);
  display: flex; flex-direction: column; overflow: hidden; font-family: "Inter", Arial, sans-serif; }
.aa-mhead { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.aa-mx { appearance: none; border: none; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 0 4px; }
.aa-mx:hover { color: var(--ink); }
.aa-mbody { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.aa-mleft { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.aa-mchips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.aa-chipbtn { appearance: none; cursor: pointer; font: 600 10.5px "Inter", Arial, sans-serif; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 2px 9px; }
.aa-chipbtn:hover { color: var(--ink); border-color: #9aa6b4; }
.aa-chipbtn.is-on { background: var(--accent, #56697f); border-color: transparent; color: #fff; }
.aa-mtable-wrap { flex: 1; min-height: 0; overflow: auto; outline: none; }
.aa-mtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.aa-mtable th { position: sticky; top: 0; background: #f6f8fa; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-soft); padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; white-space: nowrap; }
.aa-mtable th:hover { color: var(--ink); }
.aa-mtable th[data-sort="asc"]::after { content: " ▲"; font-size: 8px; }
.aa-mtable th[data-sort="desc"]::after { content: " ▼"; font-size: 8px; }
.aa-mtable td { padding: 6px 10px; border-bottom: 1px solid #eef1f4; color: var(--ink); }
.aa-mtable td.is-length, .aa-mtable th.is-length { text-align: right; font-variant-numeric: tabular-nums; }
.aa-mtable td.is-category { color: var(--ink-soft); font-size: 11px; }
.aa-mtable tbody tr { cursor: pointer; }
.aa-mtable tbody tr:hover td { background: #f6f9fc; }
.aa-mtable tbody tr.is-on td { background: #e8f1fb; }
.aa-mright { padding: 14px 16px; overflow: auto; }
.aa-mright .aa-pname { font-size: 16px; }
.aa-mright .aa-pstrip { max-height: 220px; }
.aa-mright .aa-primary { margin-top: 12px; }
.aa-mempty { color: var(--ink-faint); font-size: 12.5px; }

/* ── build bar at the top of the canvas ──────────────────────────────────── */
.aa-buildbar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px);
  background: var(--aa-bg-float); border: 1px solid var(--aa-bd-chrome); border-radius: 6px; box-shadow: 0 2px 10px rgba(20,30,45,.12);
  padding: 5px 10px; font: 12px "Inter", Arial, sans-serif; color: var(--ink);
}
.aa-buildbar[hidden] { display: none; }
.aa-bname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; min-width: 60px; }
.aa-bplay, .aa-bstep, .aa-bload, .aa-bribo { white-space: nowrap; flex: 0 0 auto; appearance: none; cursor: pointer; font: 600 12px "Inter", Arial, sans-serif; border-radius: 5px; padding: 4px 12px; }
.aa-bplay { background: #1e88e5; color: #fff; border: 1px solid transparent; min-width: 84px; }
.aa-bplay.is-on { background: #fff; color: #1e88e5; border-color: #1e88e5; }
.aa-bplay:disabled { background: #43a047; color: #fff; cursor: default; }
.aa-bstep, .aa-bribo { background: #fff; color: var(--ink-soft); border: 1px solid var(--line); padding: 4px 8px; }
.aa-bstep:disabled { opacity: .4; cursor: default; }
.aa-bload { background: #fff; color: #1e88e5; border: 1px solid #1e88e5; padding: 4px 10px; }
.aa-bload:hover:not(:disabled) { background: #e8f1fb; }
.aa-bload:disabled { opacity: .4; cursor: default; color: var(--ink-soft); border-color: var(--line); }
.aa-bprog { font: 600 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-soft); white-space: nowrap; }
.aa-bspeed { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); }
.aa-bspeed input { width: 90px; }
.aa-bspeed b { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 34px; }
.aa-stage.has-buildbar .aa-banner { top: 56px; }

/* ── centre / zoom buttons, right end of the status bar ─────────────────── */
.aa-stage .fim3d-readout { padding-right: 92px; min-height: 30px; box-sizing: border-box;
  background: var(--aa-bg-float); border-color: var(--aa-bd-chrome); color: #4f5d6c; box-shadow: 0 2px 10px rgba(20,30,45,.10); }
.aa-viewbtns { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; gap: 3px; pointer-events: auto; }
.aa-viewbtns.is-floating { right: 12px; top: auto; bottom: 12px; transform: none; z-index: 3; }
.aa-vbtn.aa-vrelease.fim3d-btn { width: auto; padding: 0 9px; font-size: 11px; font-weight: 700; color: #fff; background: #1565c0; border-color: #1565c0; }
.aa-vbtn.aa-vrelease.fim3d-btn:hover { background: #0d47a1; }
.aa-vbtn.fim3d-btn { flex: 0 0 auto; width: 24px; height: 22px; padding: 0; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; background: #fff; }

/* the amino acid being added right now */
.aa-box.is-adding { border-color: #1e88e5; box-shadow: 0 0 0 2px rgba(30,136,229,.35); background: #f3f8fe; animation: aa-adding 1s ease-in-out infinite; }
@keyframes aa-adding { 50% { box-shadow: 0 0 0 4px rgba(30,136,229,.18); } }

/* Style: Atoms | Shade (only with Type / Distinct) */
.aa-stylerow { margin-top: -2px; }
.aa-stylerow[hidden] { display: none; }

/* fold time in the build bar; highlighted (with progress) while the chain folds */
.aa-bfold { position: relative; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft);
  padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; transition: background .15s, border-color .15s; overflow: hidden; }
.aa-bfold input { width: 100px; position: relative; }
.aa-bfold b { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 36px; position: relative; }
.aa-bfold span { position: relative; }
.aa-bfold.is-folding { background: #fff4d6; border-color: #f0b429; color: #8a5a00; }
.aa-bfold.is-folding::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fold, 0%); background: rgba(240,180,41,.28); }

/* Physics tab */
.aa-physsel { width: 100%; }
.aa-physics-settings > .fim3d-pane { padding: 0; }

/* Add button: appears on hover, bottom right of the box — the way to add */
.aa-add {
  position: absolute; right: 3px; top: 3px; bottom: 3px; appearance: none; cursor: pointer; z-index: 1;
  display: flex; align-items: center;                                 /* v1.26.1: as tall as the box, 3px margin */
  font: 700 11px "Inter", Arial, sans-serif; color: #fff; background: #1e88e5;
  border: none; border-radius: 4px; padding: 0 9px; line-height: 1.2;
  opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .2s, transform .2s, filter .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); text-shadow: 0 0 2px rgba(0,0,0,.3);
}
.aa-box:hover .aa-add, .aa-add:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.aa-add:hover { filter: brightness(1.12); }
.aa-add:active { transform: translateY(1px); }

/* protein structure links */
.aa-plinks { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 8px; font-size: 11px; }
.aa-plinks-t { color: var(--ink-soft); font-weight: 600; }
.aa-plinks a { color: #1565c0; text-decoration: none; border: 1px solid #cfe0f5; background: #f3f8fe; border-radius: 3px; padding: 1px 6px; }
.aa-plinks a:hover { background: #e3effc; border-color: #9cc3ef; }

.aa-pinnote { color: #8a5a00; min-height: 0; margin-top: 2px; }
.aa-pinnote:empty { display: none; }

/* ── RES tab ─────────────────────────────────────────────────────────────── */
.aa-res-bar { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--ink-soft); }
.aa-res-bar .fim3d-btn { flex: 0 0 auto; margin-left: auto; padding: 2px 8px; }
.aa-res-cat { margin: 10px 0 4px; }
.aa-res-cattitle { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 0 0 4px; }
.aa-res-item { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 5px; background: #fff; overflow: hidden; }
.aa-res-item.is-open { border-color: #e53935; box-shadow: 0 0 0 1px rgba(229,57,53,.25); }
.aa-res-head { appearance: none; display: grid; grid-template-columns: 64px 1fr 14px; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left; padding: 3px 8px 3px 4px; font: inherit; color: var(--ink); }
.aa-res-head:hover { background: #fbf6f6; }
.aa-res-svg { width: 64px; height: 40px; object-fit: contain; }
.aa-res-cap { display: flex; flex-direction: column; min-width: 0; }
.aa-res-cap b { font-size: 12px; }
.aa-res-cap small { font-size: 10.5px; color: var(--ink-soft); }
.aa-res-chev { color: var(--ink-faint); transition: transform .15s; }
.aa-res-item.is-open .aa-res-chev { transform: rotate(90deg); color: #e53935; }
.aa-res-body { padding: 4px 10px 10px; border-top: 1px solid #f1dede; font-size: 11.5px; }
.aa-res-desc { margin: 6px 0; line-height: 1.45; color: var(--ink); }
.aa-res-src { margin: 0 0 6px; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.aa-res-sub { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #b71c1c; margin: 10px 0 4px; }
.aa-res-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.aa-res-table td { padding: 4px 4px; border-bottom: 1px solid #f3eded; vertical-align: top; }
.aa-res-table td.aa-res-aa { white-space: nowrap; font-weight: 700; color: #b71c1c; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; }
.aa-res-table small { color: var(--ink-soft); }
.aa-res-note { color: var(--ink-soft); font-size: 10.5px; margin-top: 2px; }
.aa-res-sites { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow: auto; }
.aa-res-site { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 4px; }
.aa-res-site:hover { background: #fff4f4; }
.aa-res-sitelabel { flex: 1; min-width: 0; font-size: 11px; }
.aa-res-bond, .aa-sitebtn { appearance: none; cursor: pointer; font: 700 10.5px "Inter", Arial, sans-serif; color: #fff; background: #e53935;
  border: none; border-radius: 4px; padding: 2px 8px; }
.aa-res-bond:hover, .aa-sitebtn:hover { background: #c62828; }
.aa-res-none { color: var(--ink-faint); margin: 2px 0; }
.aa-res-see { margin-top: 4px; }

/* Bond buttons on the canvas, next to each red arrow */
.aa-sitelayer { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.aa-sitebtn { position: absolute; left: 0; top: 0; pointer-events: auto; font-size: 9.5px; padding: 1px 5px; opacity: .92; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.aa-water.is-res { color: #c62828; }

/* ── Appearance: collapsible sections (one open at a time), header switches ─ */
.fim3d-pane--appearance .fim3d-group.aa-acc { margin: 0 0 8px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.fim3d-pane--appearance .aa-acc > .fim3d-group-title {
  display: flex; align-items: center; gap: 7px; margin: 0; padding: 7px 10px; cursor: pointer; user-select: none; border-radius: 6px;
}
.fim3d-pane--appearance .aa-acc > .fim3d-group-title:hover { background: #f6f8fa; }
.aa-acc-chev { margin-left: auto; color: var(--ink-faint); font-size: 10px; transition: transform .15s; }
.aa-acc.is-open > .fim3d-group-title .aa-acc-chev { transform: rotate(90deg); color: var(--ink-soft); }
.aa-acc > .aa-acc-body { display: none; padding: 2px 10px 10px; }
.aa-acc.is-open > .aa-acc-body { display: block; }
.aa-acc.is-open { box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.aa-headcb { margin: 0; flex: 0 0 auto; cursor: pointer; }
.aa-acc.is-off > .aa-acc-body { opacity: .45; }
.aa-acc.is-off > .fim3d-group-title .fim3d-group-name { color: var(--ink-faint); }
.fim3d-pane--appearance .aa-app-extras { margin-bottom: 0; }

/* Appearance: a section with nothing to open */
.fim3d-pane--appearance .aa-acc.is-static > .fim3d-group-title { cursor: default; }
.fim3d-pane--appearance .aa-acc.is-static > .fim3d-group-title:hover { background: none; }
.aa-acc.is-static > .aa-acc-body { display: none !important; }

/* RES: filter, site counts, reactivity */
.aa-res-filter { margin-top: 6px; }
.aa-res-n { font-size: 10px; font-weight: 700; color: #c62828; margin-top: 1px; }
.aa-res-empty { font-size: 11.5px; line-height: 1.45; padding: 6px 2px; }
.aa-res-rnote { font-size: 10.5px; color: var(--ink-soft); margin: 0 0 4px; line-height: 1.4; }
.aa-react { display: inline-block; flex: 0 0 auto; min-width: 42px; text-align: center; margin-right: 4px; border-radius: 3px; padding: 0 4px;
  font: 700 9.5px/15px "Inter", Arial, sans-serif; text-transform: uppercase; letter-spacing: .03em; vertical-align: 1px; }
.aa-react.is-high { background: #c62828; color: #fff; }
.aa-react.is-medium { background: #f6a623; color: #fff; }
.aa-react.is-low { background: #eceff1; color: #607080; }

/* Appearance → Distinct Colors: 20 swatches */
.aa-distinct-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px 6px; margin: 4px 0 8px; }
.aa-dcell { display: flex; align-items: center; gap: 5px; font: 700 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); cursor: pointer; }
.aa-dcell .fim3d-color { width: 17px; height: 17px; flex: 0 0 17px; }

/* secondary-structure prediction on the chain chips (ss physics library) */
.aa-chip[data-ss] { position: relative; }
.aa-chip[data-ss]::after { content: attr(data-ss); position: absolute; left: 0; right: 0; bottom: -11px; text-align: center;
  font: 700 8.5px/9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.aa-chip[data-ss="H"]::after, .ss-H { color: #d81b60; }
.aa-chip[data-ss="E"]::after, .ss-E { color: #e6a100; }
.aa-chip[data-ss="T"]::after, .ss-T { color: #00897b; }
.aa-chip[data-ss="C"]::after, .ss-C { color: #90a4ae; }
.aa-seq:has(.aa-chip[data-ss]) { row-gap: 13px; padding-bottom: 10px; }
.aa-seq-ss { flex-basis: 100%; font-size: 10.5px; color: var(--ink-soft); }
.aa-seq-ss b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.aa-ss-base { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--line); }
.aa-ss-basetitle { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 2px 0 6px; }

@media (max-width: 760px) {
  .aa-app { flex-direction: column; height: auto; }
  html, body, body.be { overflow: auto; height: auto; }
  .aa-side { flex: 0 0 auto; width: 100%; height: 55vh; border-right: none; border-bottom: 1px solid var(--line); }
  .aa-stages { height: 60vh; flex: 0 0 60vh; }
}

/* ── Physics tab: Pin, then "Forces: <library>" with its Forces / Movement subtitles ── */
.aa-phys-title .aa-ver { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-faint); font-size: 10px; }
.aa-phys-lib > .fim3d-group-note { margin-bottom: 6px; }
.aa-physics-settings .fim3d-group { margin: 0 0 8px; padding-top: 6px; border-top: 1px dashed var(--line); }
.aa-physics-settings .fim3d-group-title { font-size: 10px; color: var(--ink-soft); letter-spacing: .05em; }
.aa-physics-settings .fim3d-pane { padding: 0; }
.aa-ss-basetitle { margin-top: 8px; }

/* ── help: every "?" opens one nearly full-page pop-up ── */
.fim3d-panel--config > .fim3d-panel-head .fim3d-help-btn { display: none !important; }  /* the tab's own "?" is inside the tab */
.aa-tabhelp { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px;
  font: 11px "Inter", Arial, sans-serif; color: var(--ink-faint); }
.aa-help-overlay { position: fixed; inset: 0; z-index: 10000; padding: 3vh 3vw; }
.aa-help-box { width: 100%; max-width: 1500px; height: 94vh; max-height: 94vh; }
.aa-help-box .fim3d-help-body { font-size: 14px; line-height: 1.55; padding: 18px 28px 28px; }
.aa-help-box .fim3d-help-table { width: 100%; display: table; }

/* ── Publications: the site's PubRefsPop panel + the RES tab's book buttons ──
   This page has no site stylesheet (fa.css), so the panel's design tokens are
   given here — scoped to the panel, so FattyInteractModel3D's own
   --primary-color / --border-color fallbacks elsewhere are untouched. */
#pub-refs-pop, #prp-export, #prp-suggest, .prp-btn {
  --bg-body: #f4f6f8; --bg-card: #ffffff; --text-main: #2c3e50; --text-muted: #64748b; --text-color: #12303f;
  --border-color: #e2e8f0; --primary-color: #3b82f6; --primary-hover: #2563eb; --table-header-bg: #f8fafc;
  --icon-bg: rgba(0,0,0,.035); --icon-bg-hover: rgba(0,0,0,.06); --icon-bg-active: rgba(0,0,0,.12);
  --fs-4xs: .60rem; --fs-3xs: .65rem; --fs-2xs: .72rem; --fs-xs: .78rem; --fs-sm: .85rem; --fs-md: .92rem;
  --fs-base: 1rem; --fs-lg: 1.10rem; --fs-xl: 1.25rem; --fs-2xl: 1.40rem;
  font-family: "Inter", Arial, sans-serif;
}
body #pub-refs-pop.prp--pinned { top: 0; }                   /* no site header on this page */
body.prp-docked .aa-app { width: calc(100% - 460px); }     /* docked: the canvases make room */
@media (max-width: 560px) { body.prp-docked .aa-app { width: 100%; } }
.aa-res-pubs.prp-btn { flex: 0 0 auto; gap: 3px; padding: 1px 6px; font: 700 10.5px "Inter", Arial, sans-serif; border-radius: 4px; }
.aa-res-pubs .toolIcon, .aa-res-pubs .aa-book { width: 13px; height: 13px; }

/* ── Essential amino acids: "e" badge (top left of the box) + foods tooltip ── */
/* option B (Ziv): reversed — white disc, outline and letter in the amino acid's class colour
   (the pale nonpolar yellow is darkened so it still reads on white) */
.aa-ess { position: absolute; top: -5px; left: -6px; z-index: 2; width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; cursor: help;
  font: 700 8.5px/1 "Inter", Arial, sans-serif; --ess: color-mix(in srgb, var(--cls, #2e7d32) 78%, #000);
  color: var(--ess); background: var(--aa-bg-card, #fff); border: 1.5px solid var(--ess); }
.aa-ess:hover { background: var(--ess); color: #fff; }
.aa-esstip { position: fixed; z-index: 1000; max-width: 300px; padding: 9px 11px; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(20,28,38,.18);
  font: 11.5px/1.35 "Inter", Arial, sans-serif; pointer-events: none; }
.aa-esstip[hidden] { display: none; }
.aa-esstip-head { margin-bottom: 6px; }
.aa-esstip-head b { color: #2e7d32; }
.aa-esstip-head span { color: var(--ink-soft); }
.aa-esstip-sub { margin: 7px 0 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.aa-esstip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.aa-food { padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.aa-food.is-animal { background: #fde2e2; color: #8e2424; }
.aa-food.is-plant { background: #e0f2df; color: #25612a; }
.aa-esstip-note { margin-top: 6px; font-size: 10.5px; color: #8a5a00; }
.aa-esstip-foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 10px; color: var(--ink-faint); }

/* ── canvas bar: labelled fields (Show / Physics / Protein) + Fold ▶ / Pause ── */
.aa-pf { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aa-pf-l { font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--ink-soft); line-height: 1; }
.aa-pf .aa-pane-sel { font-size: 12px; padding: 3px 6px; }
.aa-pane-prot { max-width: 260px !important; }
.aa-pane-k { align-self: center; }
.aa-pane-fold { align-self: flex-end; appearance: none; cursor: pointer; white-space: nowrap; min-width: 78px;
  font: 600 12px "Inter", Arial, sans-serif; padding: 4px 10px; border-radius: 5px;
  background: #fff; color: #1e88e5; border: 1px solid #1e88e5; }
.aa-pane-fold:hover { background: #e8f1fb; }
.aa-pane-fold.is-paused { background: #1e88e5; color: #fff; }

/* the canvas bar on the palette (the active canvas keeps its blue tint with Tabs 2 / 4) */
.aa-panebar { background: var(--aa-bg-bar); }
.aa-brand { background: var(--aa-bg-chrome); border-bottom-color: var(--aa-bd-chrome); }
/* .aa-pane is also the canvas pane class (white): the left panel's tab panes sit on the panel tint */
.aa-side .aa-pane, .aa-side .fim3d-pane { background: transparent; }
/* cards and inputs stay white on the tinted panel */
.aa-side .aa-box, .aa-side .aa-acc, .aa-side .fim3d-select, .aa-side .fim3d-btn { background-color: var(--aa-bg-card); }

/* ── click an atom: what it is (bottom left of the canvas, above the readout) ── */
.aa-atominfo { position: absolute; left: 10px; bottom: 46px; z-index: 6; min-width: 190px; max-width: 320px;
  padding: 8px 26px 8px 10px; background: var(--aa-bg-float); border: 1px solid var(--aa-bd-chrome); border-radius: 7px;
  box-shadow: 0 4px 14px rgba(20,30,45,.14); font: 11.5px/1.4 "Inter", Arial, sans-serif; color: var(--ink); }
.aa-atominfo[hidden] { display: none; }
.aa-atominfo-el b { font-size: 13px; }
.aa-atominfo-role { color: var(--ink-soft); margin: 1px 0 5px; }
.aa-atominfo-row { display: flex; gap: 6px; }
.aa-atominfo-row span { flex: 0 0 72px; color: var(--ink-soft); }
.aa-atominfo-x { position: absolute; top: 3px; right: 4px; appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--ink-faint); padding: 2px 4px; }
.aa-atominfo-x:hover { color: var(--ink); }

/* ── Appearance → Performance ── */
.aa-perf-run { margin: 4px 0 6px; }
.aa-perf-prog { font-size: 11px; color: var(--ink-soft); }
.aa-perf-rank { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: 13px; }
.aa-perf-stars { color: #f5a623; font-size: 15px; letter-spacing: 1px; }
.aa-perf-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.aa-perf-tbl th { text-align: left; vertical-align: top; font-weight: 600; color: var(--ink-soft); padding: 2px 8px 2px 0; white-space: nowrap; }
.aa-perf-tbl td { padding: 2px 0; word-break: break-word; }
.aa-perf-tbl tr.is-key td { font-weight: 700; color: #1d5390; }

/* ── Export (canvas bar, right) + its pop-up ── */
.aa-pane-export { margin-left: auto; align-self: flex-end; appearance: none; cursor: pointer; white-space: nowrap;
  font: 600 12px "Inter", Arial, sans-serif; padding: 4px 10px; border-radius: 5px; background: #fff; color: var(--ink); border: 1px solid var(--aa-bd-chrome); }
.aa-pane-export:hover { border-color: #1e88e5; color: #1e88e5; }
.aa-export-box { width: min(900px, 94vw); height: min(640px, 88vh); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--aa-bg-panel); border: 1px solid var(--aa-bd-chrome); border-radius: 10px; box-shadow: 0 12px 40px rgba(20,30,45,.3);
  font: 12px "Inter", Arial, sans-serif; color: var(--ink); }
.aa-export-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.aa-export-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-export-x { appearance: none; border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink-soft); }
.aa-export-x:hover { color: var(--ink); }
.aa-export-note { margin: 0; color: var(--ink-soft); font-size: 11.5px; }
.aa-export-text { flex: 1; min-height: 0; resize: none; width: 100%; box-sizing: border-box; padding: 8px;
  font: 11px/1.4 ui-monospace, Consolas, monospace; color: #33404d; background: #fff; border: 1px solid var(--aa-bd-chrome); border-radius: 6px; white-space: pre; }
.aa-export-acts { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.aa-export-status { margin-right: auto; color: #2e7d32; font-size: 11.5px; }
.aa-export-dl { background: #1e88e5 !important; color: #fff !important; border-color: #1e88e5 !important; }
.aa-export-live { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft); cursor: pointer; user-select: none; }

/* ── v1.17: Select Protein tabs (Library / Search AlphaFold) ───────────────── */
.aa-mhead { gap: 12px; }
.aa-mhead > b { flex: 0 0 auto; }
.aa-mtabs { display: flex; gap: 2px; margin-right: auto; background: var(--aa-bg-bar, #eaeef3); border-radius: 7px; padding: 2px; }
.aa-mtab { appearance: none; border: 0; background: transparent; cursor: pointer; font: 600 12px "Inter", Arial, sans-serif;
  color: var(--ink-soft); padding: 5px 12px; border-radius: 5px; }
.aa-mtab:hover { color: var(--ink); }
.aa-mtab.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.aa-mbody[hidden] { display: none; }
.aa-afform { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
.aa-afinput { width: 100%; box-sizing: border-box; font-size: 13px; padding: 6px 8px; }
.aa-afopts { display: flex; gap: 14px; font-size: 11.5px; color: var(--ink-soft); }
.aa-afopts label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; }
.aa-afinfo { padding: 6px 10px; font-size: 11.5px; color: var(--ink-soft); border-bottom: 1px solid #eef1f4; }
.aa-mtable td.is-gene { font: 600 11px ui-monospace, Menlo, Consolas, monospace; color: var(--ink-soft); white-space: nowrap; }
.aa-mtable td.is-org { color: var(--ink-soft); font-size: 11px; font-style: italic; }
.aa-afrev { color: #c79a00; margin-left: 4px; font-size: 10px; }
.aa-afkept { margin-left: 6px; font: 600 9.5px "Inter", Arial, sans-serif; color: #1565c0; background: #e3f0fd; border-radius: 8px; padding: 1px 6px; vertical-align: 1px; }
.aa-afcredit { margin: 0; padding: 6px 10px; font-size: 10.5px; color: var(--ink-soft); border-top: 1px solid var(--line); }
.aa-afcredit a { color: inherit; }
.aa-afacts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.aa-afacts .aa-primary { margin-top: 0; }
.aa-paf { font-size: 11.5px; color: var(--ink-soft); margin: 6px 0; }
.aa-plddt-v { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 11px; }
/* the chain, now at the bottom of the Proteins tab */
.aa-chain-group { margin-top: 4px; }

/* ── v1.18: back link, Learn ─────────────────────────────────────────────── */
.aa-brand .home { font-size: 15px; line-height: 1; margin-right: 6px; }
.aa-pane-learn { margin-left: auto; align-self: flex-end; appearance: none; cursor: pointer; white-space: nowrap;
  font: 600 12px "Inter", Arial, sans-serif; padding: 4px 10px; border-radius: 5px; background: #fff; color: var(--ink); border: 1px solid var(--aa-bd-chrome); }
.aa-pane-learn:hover { border-color: #1e88e5; color: #1e88e5; }
.aa-pane-learn + .aa-pane-export { margin-left: 0; }
.aa-learn { max-width: 1000px; margin: 0 auto; font-size: 14.5px; line-height: 1.55; color: #1d2833; text-align: center; }
.aa-learn h2 { margin: 0 0 10px; font-size: 20px; }
.aa-learn .learn-lead { font-size: 16px; background: #eef5fc; border-radius: 8px; padding: 10px 14px; display: inline-block; margin: 0; }
.aa-learn .learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.aa-learn .learn-step { position: relative; display: flow-root; background: #f7f9fb; border: 1px solid #e3e8ee; border-radius: 10px; padding: 18px 16px 14px 18px; text-align: justify; hyphens: auto; }
.aa-learn .learn-fig { float: left; margin: 2px 12px 6px 0; }
.aa-learn .learn-fig img { height: 78px; width: auto; max-width: 110px; border-radius: 0; mix-blend-mode: multiply; }
.aa-learn .learn-num { position: absolute; top: -11px; left: -11px; min-width: 24px; height: 24px; padding: 0 7px; box-sizing: border-box; border-radius: 12px; background: #1e88e5; color: #fff;
  font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.aa-learn .learn-step p { margin: 0 0 4px; }
.aa-learn .learn-step ul { list-style: disc outside; padding-left: 20px; margin: 4px 0; overflow: hidden; }
.aa-learn .learn-step li { margin: 3px 0; }
.aa-learn img { max-width: 100%; height: auto; }
@media (max-width: 800px) { .aa-learn .learn-grid { grid-template-columns: 1fr; } }

/* ── v1.19: Export — format switch + toolbar above the text ───────────────── */
.aa-export-acts { flex-wrap: wrap; }
.aa-export-acts .fim3d-btn { flex: 0 0 auto; width: auto; min-width: 0; padding: 3px 10px; font-size: 12px; }
.aa-export-status { margin-left: 4px; }
.aa-export-seg { display: inline-flex; background: var(--aa-bg-bar, #eaeef3); border-radius: 7px; padding: 2px; gap: 2px; flex: 0 0 auto; }
.aa-export-seg button { appearance: none; border: 0; background: transparent; cursor: pointer; font: 600 12px "Inter", Arial, sans-serif;
  color: var(--ink-soft); padding: 4px 14px; border-radius: 5px; }
.aa-export-seg button:hover { color: var(--ink); }
.aa-export-seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* ── v1.21: loading pop-up (long builds run in chunks; progress, time estimate, Stop) ── */
.aa-loading { position: fixed; inset: 0; z-index: 120; background: rgba(20, 28, 38, 0); display: flex; align-items: center; justify-content: center; padding: 16px;
  transition: background-color .9s ease; }
.aa-loading.is-in { background: rgba(20, 28, 38, .35); }
.aa-loading.is-out { background: rgba(20, 28, 38, 0); transition-duration: .1s; pointer-events: none; }
.aa-loading .aa-loading-box { opacity: 0; transition: opacity .9s ease; }
.aa-loading.is-in .aa-loading-box { opacity: 1; }
.aa-loading.is-out .aa-loading-box { opacity: 0; transition-duration: .1s; }
.aa-loading-box { background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.25); padding: 18px 22px 16px; min-width: 320px; max-width: 460px; font: 13px "Inter", Arial, sans-serif; color: #1d2833; }
.aa-loading-title { display: block; font-size: 15px; margin-bottom: 8px; }
.aa-loading-phase { min-height: 18px; color: #3a4654; }
.aa-loading-bar { height: 8px; border-radius: 4px; background: #e6ebf1; margin: 8px 0 6px; overflow: hidden; }
.aa-loading-bar i { display: block; height: 100%; width: 0; background: #1e88e5; border-radius: 4px; transition: width .2s; }
.aa-loading-eta { color: #6b7684; font-size: 12px; }
.aa-loading-note { color: #6b7684; font-size: 12px; margin: 8px 0 0; }
.aa-loading-stop { margin-top: 12px; }

/* ── v1.22: canvas bar sections, Folding switch, Protein tab ─────────────────── */
body { margin: 0; }
.aa-panebar { gap: 0; padding: 0 6px; align-items: stretch; }
.aa-pb-sec { display: flex; align-items: flex-end; gap: 10px; padding: 6px 12px 8px; }
.aa-pb-sec + .aa-pb-sec { border-left: 1px solid var(--aa-bd-chrome); }
.aa-pb-phys { border-right: 1px solid var(--aa-bd-chrome); }
.aa-panebar .aa-pane-learn { margin: auto 0 8px auto; }
.aa-panebar .aa-pane-export { margin: auto 6px 8px 6px; }
.aa-pf-l { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a97a6; }
.aa-pane-prot { font-weight: 700 !important; color: #0d47a1 !important; background: #e8f1fb !important; border-color: #90caf9 !important; max-width: 260px; }
/* Folding switch */
.aa-fold-toggle { --ft-w: 38px; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px;
  border-radius: 999px; font: 600 12px "Inter", Arial, sans-serif; color: var(--ink-soft); white-space: nowrap; min-width: 112px;
  border: 2px solid #b8c2cc; background: #fff; position: relative; }
.aa-fold-toggle.is-on { color: #0d47a1; border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #1e88e5, #64d2ff, #3949ab, #1e88e5) border-box;
  background-size: 100% 100%, 300% 100%; animation: aa-ft-border 2.4s linear infinite; }
@keyframes aa-ft-border { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 300% 0; } }
@media (prefers-reduced-motion: reduce) { .aa-fold-toggle.is-on { animation: none; } }
.aa-ft-track { position: relative; width: var(--ft-w); height: 20px; border-radius: 999px; background: #cfd8dc; transition: background .25s; flex: 0 0 auto; }
.aa-fold-toggle.is-on .aa-ft-track { background: linear-gradient(90deg, #42a5f5, #1e88e5); }
.aa-ft-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center; transition: transform .25s cubic-bezier(.3,1.4,.5,1); fill: #78909c; }
.aa-fold-toggle.is-on .aa-ft-knob { transform: translateX(calc(var(--ft-w) - 20px)); fill: #1e88e5; }
.aa-ft-knob svg { display: block; }
.aa-ft-label { min-width: 48px; text-align: left; }
/* Protein tab */
.aa-psel-row { display: flex; justify-content: flex-end; padding: 10px 12px 2px; }
.aa-psel-row .aa-primary { margin: 0; }
.aa-ptitle { padding: 4px 12px 8px; }
.aa-ptitle .aa-pname { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.aa-ptitle .aa-pmeta { margin-top: 3px; }
.aa-ptitle-none { margin: 0; color: var(--ink-soft); font-size: 12px; }
.aa-pgroup[hidden] { display: none; }
.aa-pclear-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 8px; background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px; }
.aa-pclear-row[hidden] { display: none; }
.aa-pclear-note { flex: 1; font-size: 11.5px; color: #6d4c00; }
.aa-pclear-row .fim3d-btn { flex: 0 0 auto; width: auto; }
.aa-pbuild.is-disabled { opacity: .45; filter: grayscale(1); pointer-events: none; }
.aa-pbuild-row { display: flex; align-items: center; gap: 8px; }
.aa-pbuild-row .aa-bstep { flex: 0 0 auto; width: auto; }
.aa-pbuild .aa-bprog { margin-left: auto; }
.aa-pbuild .aa-pprogress { margin: 8px 0 10px; }
.aa-pslider { display: grid; grid-template-columns: 70px 1fr 44px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-soft); margin: 4px 0;
  position: relative; border-radius: 4px; padding: 2px 4px; }
.aa-pslider input { width: 100%; position: relative; }
.aa-pslider b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; position: relative; }
.aa-pslider span { position: relative; }
.aa-pslider.aa-bfold { border: 0; }
.aa-pslider.aa-bfold.is-folding { background: #fff4d6; }
.aa-pload .aa-lsec + .aa-lsec { margin-top: 10px; }
.aa-lsec-t { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a97a6; margin-bottom: 4px; }
.aa-lgroup { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin: 6px 0 2px; }
.aa-lrow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; background: var(--aa-bg-card, #fff); border: 1px solid #e3e8ee; margin: 3px 0; }
.aa-lrow.is-loaded { border-color: #1e88e5; background: #e8f1fb; }
.aa-ltext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aa-lname { font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: none; }
a.aa-lname:hover { color: #1e88e5; text-decoration: underline; }
.aa-ldetail { font-size: 10.5px; color: var(--ink-soft); }
.aa-lrow .aa-lbtn { flex: 0 0 auto; width: auto; padding: 3px 12px; }
.aa-lrow.is-loaded .aa-lbtn { background: #1e88e5; color: #fff; border-color: #1e88e5; }
/* v1.26.3: Load (API) rows — the Load buttons are strong blue with white text; a loaded one goes quiet */
.aa-pg-load .aa-lrow .aa-lbtn { background: #1565c0 !important; color: #fff !important; border-color: #1565c0 !important; font-weight: 700; }
.aa-pg-load .aa-lrow .aa-lbtn:hover:not(:disabled) { background: #0d47a1 !important; border-color: #0d47a1 !important; }
.aa-pg-load .aa-lrow.is-loaded .aa-lbtn { background: #e8f1fb !important; color: #1565c0 !important; border-color: #1e88e5 !important; }
.aa-lnone { font-size: 11.5px; color: var(--ink-soft); padding: 2px 6px; }
.aa-lnote { font-size: 10.5px; color: var(--ink-soft); margin: 6px 2px 0; }
.aa-collapsible { cursor: pointer; user-select: none; display: flex; align-items: center; }
.aa-collapsible .aa-chev { margin-left: auto; font-size: 11px; color: var(--ink-faint); transition: transform .15s; }
.aa-pg-info.is-collapsed .aa-chev { transform: rotate(-90deg); }
.aa-pg-info.is-collapsed .aa-pcard { display: none; }
.aa-pg-info .aa-pcard { margin-top: 4px; }

/* ── v1.23: toolbar above the canvases, picker tabs, Learn list ─────────────── */
.aa-main { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.aa-main .aa-stages { flex: 1 1 auto; height: auto; min-height: 0; }
.aa-toolbar { flex: 0 0 auto; display: flex; align-items: stretch; background: var(--aa-bg-chrome, #e4e9ef); border-bottom: 1px solid var(--aa-bd-chrome, #c9d2dc); padding: 0 6px; }
.aa-tb-sec { display: flex; align-items: flex-end; gap: 10px; padding: 6px 12px 8px; }
.aa-tb-sec + .aa-tb-sec { border-left: 1px solid var(--aa-bd-chrome, #c9d2dc); }
.aa-tb-clear { margin-left: auto; border-left: 1px solid var(--aa-bd-chrome, #c9d2dc); }
.aa-tb-prot .aa-pane-prot { max-width: 320px; font-size: 12.5px !important; padding: 3px 6px; }
.aa-tb-choose { margin: 0 !important; padding: 4px 14px !important; font-size: 12px !important; }
.aa-toolbar .aa-tabs { margin: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.aa-toolbar .aa-tabs .aa-seg { background: #fff; }
.aa-toolbar .aa-tabs .aa-seg button { padding: 3px 11px; font-size: 12px; }
.aa-tb-clearbtn { width: auto; flex: 0 0 auto; padding: 4px 14px; }
@media (max-width: 760px) { .aa-main { height: auto; } .aa-main .aa-stages { height: 60vh; flex: 0 0 60vh; } .aa-toolbar { flex-wrap: wrap; } }
/* Choose a protein: tabs like the left panel's */
.aa-mtabs { display: flex; gap: 0; margin: 0; padding: 6px 14px 0; background: var(--aa-bg-chrome, #e4e9ef); border-radius: 0;
  border-bottom: 1px solid var(--aa-bd-chrome, #c9d2dc); }
.aa-mtab { appearance: none; background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; margin-bottom: -1px;
  padding: 7px 16px; font: 600 12.5px "Inter", Arial, sans-serif; color: var(--ink-soft); cursor: pointer; box-shadow: none; }
.aa-mtab { color: #1e88e5; }                                        /* v1.26.1: unselected tabs bright blue */
.aa-mtab:hover { color: #0d47a1; background: rgba(255,255,255,.5); }
.aa-mtab.is-on { background: #fff; color: var(--ink); border-color: var(--aa-bd-chrome, #c9d2dc); box-shadow: none; }
/* Info → Learn */
.aa-learn-list { display: flex; flex-direction: column; gap: 6px; }
.aa-learn-btn { appearance: none; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 7px;
  background: var(--aa-bg-card, #fff); border: 1px solid #d6dee7; font: 12px "Inter", Arial, sans-serif; color: var(--ink); }
.aa-learn-btn:hover { border-color: #1e88e5; background: #f3f8fd; }
a.aa-learn-btn { text-decoration: none; }
.aa-learn-more { display: block; margin-top: 8px; font-size: 11.5px; color: #1e88e5; text-decoration: none; }
.aa-learn-more:hover { text-decoration: underline; }
.aa-learn-btn b { color: #0d47a1; font-size: 12.5px; }
.aa-learn-btn small { color: var(--ink-soft); font-size: 11px; line-height: 1.35; }
/* narrow canvases (2 / 4 tabs): the bar wraps and its dropdowns shrink */
.aa-panebar { flex-wrap: wrap; row-gap: 0; }
.aa-panebar .aa-pb-sec { min-width: 0; }
.aa-stages:not([data-tabs="1"]) .aa-panebar .aa-pane-sel { max-width: 118px; }
.aa-stages:not([data-tabs="1"]) .aa-panebar .aa-pane-export { margin-left: auto; margin-right: 4px; }
.aa-stages:not([data-tabs="1"]) .aa-pb-sec { padding-left: 8px; padding-right: 8px; gap: 8px; }
.aa-stages[data-tabs="4"] .aa-fold-toggle { min-width: 0; }
.aa-tb-clearbtn { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--aa-bd-chrome, #c9d2dc) !important; font-weight: 600; }
.aa-tb-clearbtn:hover { border-color: #e53935 !important; color: #c62828 !important; }
/* Protein tab: Build | Load tabs */
.aa-ptabs { display: flex; margin: 4px 12px 0; border-bottom: 1px solid var(--aa-bd-chrome, #c9d2dc); }
.aa-ptabs[hidden], .aa-ptabbox[hidden] { display: none; }
.aa-ptab { appearance: none; background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; margin-bottom: -1px;
  padding: 6px 18px; font: 600 12px "Inter", Arial, sans-serif; color: var(--ink-soft); cursor: pointer; }
.aa-ptab:hover { color: var(--ink); }
.aa-ptab.is-on { background: var(--aa-bg-card, #fff); color: var(--ink); border-color: var(--aa-bd-chrome, #c9d2dc); }
.aa-ptabbox { margin: 0 12px 10px; background: var(--aa-bg-card, #fff); border: 1px solid var(--aa-bd-chrome, #c9d2dc); border-top: 0; border-radius: 0 0 8px 8px; }
.aa-ptabbox .aa-pgroup { margin: 0; padding: 10px 12px; border: 0; }
.aa-ptabbox .aa-pgroup.is-off { display: none; }
.aa-ptabbox .aa-pgroup > .fim3d-group-title { display: none; }

/* ── v1.24: invisible loading overlay until shown, compact Protein tab, inline toolbar labels ── */
.aa-loading:not(.is-in):not(.is-out) { pointer-events: none; }
.aa-toolbar .aa-tb-sec { align-items: center; padding: 5px 12px; }
.aa-toolbar .aa-pf { flex-direction: row; align-items: center; gap: 7px; }
.aa-toolbar .aa-tabs { flex-direction: row; align-items: center; gap: 7px; }
.aa-toolbar .aa-pf-l { line-height: 1; }
/* Protein tab: thinner Build / Load boxes */
.aa-psel-row { padding: 6px 12px 0; }
.aa-ptitle { padding: 0 12px 4px; }
.aa-ptabs { margin: 2px 8px 0; }
.aa-ptab { padding: 5px 12px; }
.aa-ptabbox { margin: 0 8px 6px; }
.aa-ptabbox .aa-pgroup { padding: 8px 8px; }
.aa-pbuild .aa-pprogress { margin: 6px 0 6px; }
.aa-pslider { margin: 1px 0; padding: 1px 2px; }
.aa-lrow { padding: 4px 6px; margin: 2px 0; }
.aa-pload .aa-lsec + .aa-lsec { margin-top: 6px; }
/* Protein Info: larger toggle on the left of the title */
.aa-collapsible .aa-chev { margin: 0 6px 0 0; font-size: 15px; line-height: 1; width: 16px; text-align: center; color: var(--ink-soft); }
.aa-collapsible:hover .aa-chev { color: #1e88e5; }
/* v1.24.2: the Build sub-tab stands out */
.aa-ptab.aa-ptab-build { text-transform: uppercase; letter-spacing: .06em; color: #1e88e5; font-weight: 800; }
.aa-ptab.aa-ptab-build.is-on { color: #fff; background: #1e88e5; border-color: #1e88e5; }

/* ── v1.25: Physics tab — Advanced switch, shared Movement, Build (ribosome) ── */
.aa-adv-toggle { display: flex; align-items: center; gap: 6px; justify-content: flex-end; font: 600 11px "Inter", Arial, sans-serif; color: var(--ink-soft); margin: 2px 6px 4px; cursor: pointer; }
.aa-adv-toggle input { margin: 0; }
.aa-adv { border-left: 2px solid #c9d6e3; padding-left: 6px; }
.aa-move-host label.is-off, .aa-move-host label.is-off input { opacity: .45; cursor: default; }
.aa-brate-note { font-size: 11px; color: #1e88e5; min-height: 14px; margin-top: 2px; }

/* v1.25 · Domains (Protein tab) + Domain colour mode */
.aa-pstrip span.out { opacity: .35; }
.aa-pdom { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.aa-pdom-none { margin: 2px 0; color: var(--ink-soft); font-size: 12px; }
.aa-pdom-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-soft); margin-bottom: 2px; }
.aa-pdom-range { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; border-radius: 5px; background: #eaf2fb; color: #0d47a1; }
.aa-pdom-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 4px; cursor: default; }
.aa-pdom-row:hover { background: #eef2f6; }
.aa-pdom-row.is-on { background: #eaf2fb; }
.aa-pdom-sw { width: 10px; height: 10px; border-radius: 3px; }
.aa-pdom-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-pdom-span { color: var(--ink-soft); white-space: nowrap; font-size: 11px; }
.aa-pdom-build, .aa-pdom-color { padding: 1px 7px; font-size: 11px; }
.aa-chip-dom { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; margin: 0 2px 0 4px; border-radius: 10px; font: 600 10px "Inter", Arial, sans-serif; color: #1d2833; background: #dfe5ec; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.aa-pg-dom.is-collapsed .aa-chev { transform: rotate(-90deg); }
.aa-pg-dom.is-collapsed .aa-pdom { display: none; }
.aa-pdom-count { font-weight: 400; color: var(--ink-soft); margin-left: 4px; }
.aa-pdom-row.is-child .aa-pdom-name { color: var(--ink-soft); }