/* WebPageWidget: a web page in a frame under a bar with its address and tools. Same card as the ChatWidget, so the
   two sit side by side on an agent run's page. */
.na-webpage { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-width: 0; border: 1px solid var(--cui-border-color, #d8dbe0); border-radius: .75rem; background: var(--cui-card-bg, #fff); overflow: hidden; box-shadow: 0 4px 14px rgba(15, 23, 42, .035); }

.na-webpage__bar { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem .375rem .875rem; border-bottom: 1px solid var(--cui-border-color, #d8dbe0); }
.na-webpage__address { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--na-text-muted, #6b7785); font-family: var(--cui-font-monospace, monospace); font-size: .8125rem; }
.na-webpage__tools { display: flex; align-items: center; gap: .125rem; flex: 0 0 auto; }
.na-webpage__tool { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; }

.na-webpage__stage { position: relative; flex: 1 1 auto; min-height: 0; background: var(--cui-tertiary-bg, #f6f7f9); }
.na-webpage__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--cui-body-bg, #fff); }

.na-webpage__notice { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--na-text-muted, #6b7785); font-size: .875rem; background: var(--cui-tertiary-bg, #f6f7f9); }
.na-webpage__notice[hidden] { display: none; }

/* Full screen: the card fills the screen and loses its rounding. */
.na-webpage:fullscreen { border: 0; border-radius: 0; box-shadow: none; }

/* Live screen: pictures of a screen elsewhere (an agent's browser), switched with the frame from the bar. */
.na-webpage__modes { flex: 0 0 auto; }
.na-webpage__mode { border: 1px solid var(--cui-border-color, #d8dbe0); color: var(--na-text-muted, #6b7785); background: var(--cui-card-bg, #fff); font-size: .8125rem; white-space: nowrap; }
.na-webpage__mode.active { color: var(--cui-primary, #0d6efd); background: var(--cui-primary-bg-subtle, #e7f0ff); border-color: var(--cui-primary-border-subtle, #b6d0ff); }
.na-webpage__live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .5rem; border-radius: 999px; font-size: .75rem; color: var(--na-text-muted, #6b7785); background: var(--cui-tertiary-bg, #f6f7f9); }
.na-webpage__live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.na-webpage__live--on { color: var(--cui-success, #1b9e5a); background: var(--cui-success-bg-subtle, #e5f6ed); }
.na-webpage__live[hidden] { display: none; }
.na-webpage__screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.na-webpage__screen--closed { opacity: .6; filter: grayscale(.4); }
.na-webpage__screen[hidden], .na-webpage__frame[hidden], .na-webpage__tool[hidden] { display: none; }
.na-webpage__modes[hidden] { display: none; }