:root {
  font-family: Arial, sans-serif;
  color: #242424;
  background: #fff;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; }
#app { border: 1px solid #898989; overflow: hidden; }

wa-tab-group {
  display: block;
  height: 100%;
  --indicator-color: #526d89;
  --track-width: 1px;
  --track-color: #898989;
}

wa-tab-group::part(base) { height: 100%; }
wa-tab-group::part(nav) { flex-shrink: 0; background: #e9e9e9; }
wa-tab-group::part(tabs) { gap: 2px; padding: 2px 2px 0; }
wa-tab-group::part(body) { flex: 1; min-height: 0; overflow: hidden; }
wa-tab-group::part(scroll-button) { background: #e9e9e9; }

wa-tab { flex-shrink: 0; font-size: 13px; color: #444; }
wa-tab::part(base) {
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid #999;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #d2d2d2;
}
wa-tab[active] { color: #151515; }
wa-tab[active]::part(base) { background: #fff; }
wa-tab:hover::part(base) { background: #ececec; }
wa-tab[active]:hover::part(base) { background: #fff; }

wa-tab-panel { --padding: 0; }
wa-tab-panel, wa-tab-panel::part(base) { height: 100%; }
iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

.message {
  padding: 24px;
  overflow: auto;
  max-height: 100%;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.message.error { border-top: 3px solid #b43b35; color: #842c28; }
noscript .message { position: absolute; inset: 0; background: #fff; }

@media (max-width: 768px), (pointer: coarse) {
  wa-tab::part(base) { min-height: 44px; padding-inline: 16px; }
  wa-tab-group::part(nav) { padding-inline: 44px; }
  wa-tab-group::part(scroll-button) { width: 44px; }
  .message { padding: 16px; }
}