/* Decorative browser chrome, matching the approved v2 browser-chrome reference.
   Titles and Mac dots stay in the existing top bar; navigation is inert. */
.browser-navigation {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 34px;
  align-items: center;
  gap: 14px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid #dedede;
  background: #f6f6f6;
  color: #777;
  font: 11px/1 ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
}
.browser-nav-marks { display: flex; flex: none; align-items: center; gap: 15px; }
.browser-nav-marks > span { display: block; position: relative; width: 12px; height: 12px; }
.browser-back::before, .browser-forward::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
.browser-forward { opacity: .4; }
.browser-forward::before { left: 1px; transform: rotate(225deg); }
.browser-reload::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 7v5h-5M20.49 17a9 9 0 1 1-2.12-9.36L21 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.browser-address {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid #dedede;
  border-radius: 4px;
  background: #fff;
  color: #555;
}
.browser-address::before { content: ''; flex: none; width: 9px; height: 9px; border: 1px solid #aaa; border-radius: 50%; background: linear-gradient(transparent 44%, #aaa 44%, #aaa 55%, transparent 55%); }
.browser-address-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-mini { flex-basis: 18px; height: 18px; padding: 0 5px; gap: 5px; font-size: 7px; }
.browser-mini .browser-nav-marks { gap: 4px; }
.browser-mini .browser-nav-marks > span { width: 7px; height: 7px; }
.browser-mini .browser-back::before, .browser-mini .browser-forward::before { top: 2px; left: 2px; width: 3px; height: 3px; }
.browser-mini .browser-forward::before { left: 0; transform: rotate(225deg); }
.browser-mini .browser-address { height: 13px; padding: 0 3px; gap: 3px; border-radius: 2px; }
.browser-mini .browser-address::before { width: 4px; height: 4px; }