/* AoN presentation view — a frame around the presentation, which is served by its own service. */
#aon-view { height: 100%; }
.aon-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.aon-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-bottom: 1px solid var(--border-color, rgba(0,0,0,.08));
}
.aon-title { font-size: 14px; font-weight: 600; color: var(--text-primary, #111); }
.aon-spacer { flex: 1; }
.aon-btn {
    font: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer; border-radius: 999px;
    color: var(--text-secondary, #555); background: transparent;
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
}
.aon-btn:hover { color: var(--text-primary, #111); border-color: var(--accent-color, #6366f1); }
.aon-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: transparent; }
.aon-state {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 80px 24px; color: var(--text-secondary, #555); font-size: 14px; text-align: center;
}
.aon-state.error, .aon-state.denied { color: var(--danger-color, #c43d4b); }
.aon-spin {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(99,102,241,.3); border-top-color: var(--accent-color, #6366f1);
}
@media (prefers-reduced-motion: no-preference) { .aon-spin { animation: aon-turn 1s linear infinite; } }
@keyframes aon-turn { to { transform: rotate(360deg); } }

/* Below the sidebar's breakpoint AI Hub floats a hamburger over the top-left corner, which would
   sit on top of this bar's title. Leave it room rather than letting two controls share a spot. */
@media (max-width: 768px) {
    .aon-bar { padding-left: 64px; }
    .aon-title { font-size: 13px; }
}