/* Native V2 API access. Layout follows the width of the area (the shell sidebar takes space): side column from 900 px, chips below. */
.aa { position: absolute; inset: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: #f1f1f1; font-size: 14px; color: var(--ink); overflow: hidden; }
.aa.off { visibility: hidden; pointer-events: none; }
.aa .ct-loading { grid-column: 1 / -1; padding: 24px; color: var(--muted); text-align: center; }

.aa-menu { background: #fff; padding: 8px; display: flex; flex-direction: column; gap: 16px; align-content: start; min-height: 0; overflow-y: auto; }
.aa-item { display: flex; align-items: center; gap: 14px; padding: 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-weight: 600; font-size: 13.5px; text-align: start; cursor: pointer; }
.aa-item .aa-icon { color: gray; }
.aa-item:hover { background: #f5f5f5; } .aa-item.on { background: #f1f1f1; color: var(--deep); }
.aa[data-layout="narrow"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.aa[data-layout="narrow"] .aa-menu { flex-direction: row; background: none; padding: 12px 16px 0; gap: 12px; flex-wrap: wrap; overflow: visible; }
.aa[data-layout="narrow"] .aa-item { border: 1px solid #cfcfcf; border-radius: 16px; padding: 4px 14px; gap: 8px; background: #fff; }
.aa[data-layout="narrow"] .aa-item.on { background: #dfe9e2; }

.aa-main { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px; display: grid; gap: 16px; align-content: start; }
.aa[data-layout="narrow"] .aa-main { padding: 12px; }
.aa-card { background: #fff; border-radius: 16px; padding: 16px; min-width: 0; }

/* key card */
.aa-keycard { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.aa-art { width: 100px; height: auto; display: block; }
.aa-key { max-width: 100%; border: 0; background: none; border-radius: 16px; padding: 16px; cursor: pointer; font: inherit; color: inherit; }
.aa-key:hover { background: #f5f5f5; }
.aa-key span { display: block; font-style: italic; font-size: 13px; text-align: center; word-break: break-all; overflow-wrap: anywhere; }
.aa-gen { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--green); font: inherit; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; text-transform: capitalize; }
.aa-gen:hover { background: var(--mint); } .aa-gen:disabled { opacity: .5; cursor: progress; }

/* documentation */
.aa-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid #e0e0e0; scrollbar-width: thin; }
.aa-tab { flex: none; border: 0; background: none; font: inherit; font-size: 13.5px; color: #555; padding: 12px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; text-transform: capitalize; white-space: nowrap; }
.aa-tab:hover { background: #f7f7f7; }
.aa-tab.on { color: var(--green); font-weight: 600; border-bottom-color: var(--green); }
.aa-panel { padding: 16px 12px; min-width: 0; }
.aa[data-layout="narrow"] .aa-panel { padding: 12px 0; }
.aa-doc { display: grid; gap: 12px; min-width: 0; }
.aa-doc hr { border: 0; border-top: 1px solid #e0e0e0; margin: 4px 0; width: 100%; }
.aa-doc p { margin: 0; }
.aa-sub { font-size: 14px; }
.aa-note { color: gray; }
.aa-step { display: grid; gap: 4px; min-width: 0; }
.aa-code { margin: 4px 0; padding: 1em; overflow: auto; background: hsl(230, 1%, 98%); color: hsl(230, 8%, 24%); border-radius: .3em; font: 10px/1.5 "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: 11px; white-space: pre; tab-size: 2; direction: ltr; text-align: left; max-width: 100%; }
.aa-code code { font: inherit; }
.aa-t-key { color: hsl(5, 74%, 59%); } .aa-t-str { color: hsl(95, 38%, 52%); } .aa-t-num, .aa-t-kw { color: hsl(35, 99%, 36%); }
.aa-t-method { color: hsl(5, 74%, 59%); } .aa-t-punc { color: hsl(230, 8%, 24%); }
.aa-params { margin: 0; padding-inline-start: 40px; display: grid; gap: 2px; line-height: 1.5; }