.browser-window {
  display: flex;
  flex-direction: column;
  background: var(--browser-window-background, var(--color-white));
  border: 1px solid var(--browser-window-border-color, var(--color-gray-200));
  border-radius: var(--browser-window-border-radius, 8px);
  overflow: hidden;
  box-shadow: var(--browser-window-shadow, 0 1px 3px rgba(0, 0, 0, 0.04));
}

.browser-window__header {
  display: flex;
  align-items: center;
  gap: var(--browser-window-header-gap, 12px);
  padding: var(--browser-window-header-padding, 12px 16px);
  background: var(--browser-window-header-background, var(--color-gray-50));
  border-bottom: 1px solid var(--browser-window-header-border-color, var(--color-gray-200));
}

.browser-window__controls {
  display: flex;
  gap: var(--browser-window-controls-gap, 8px);
  align-items: center;
}

.browser-window__control {
  width: var(--browser-window-control-size, 12px);
  height: var(--browser-window-control-size, 12px);
  border-radius: var(--browser-window-control-border-radius, 50%);
  background: var(--browser-window-control-background, var(--color-gray-300));
}

.browser-window__address-bar {
  flex: 1;
  padding: var(--browser-window-address-bar-padding, 6px 12px);
  background: var(--browser-window-address-bar-background, var(--color-white));
  border: 1px solid var(--browser-window-address-bar-border-color, var(--color-gray-200));
  border-radius: var(--browser-window-address-bar-border-radius, 6px);
  font-size: var(--browser-window-address-bar-font-size, var(--font-size-sm));
  color: var(--browser-window-address-bar-color, var(--color-gray-600));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-window__iframe {
  width: 100%;
  height: var(--browser-window-iframe-height, 600px);
  border: none;
  background: var(--browser-window-iframe-background, var(--color-white));
}