/* System UI chrome — status bar, Dynamic Island, home indicator */

.system-chrome-layer,
.system-chrome-layer * {
  pointer-events: none;
}

.system-chrome-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.sys-chrome {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* ── iOS / Android status bar ── */
.sys-status-bar {
  top: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 24px 8px;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Dynamic Island — single pill at top center; time/icons flank it on one row */
.sys-status-bar.has-dynamic-island {
  align-items: center;
  padding: 11px 28px 0;
  box-sizing: border-box;
}

.sys-status-bar.has-dynamic-island .sys-time,
.sys-status-bar.has-dynamic-island .sys-status-icons {
  flex: 1;
  z-index: 3;
}

.sys-status-bar.has-dynamic-island .sys-time {
  min-width: 0;
}

.sys-status-bar.has-dynamic-island .sys-status-icons {
  justify-content: flex-end;
}

.device-frame.mobile .sys-status-bar {
  color: #000;
}

.sys-dynamic-island {
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-50%);
  background: #000;
  border-radius: 18.5px;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.sys-time {
  position: relative;
  z-index: 1;
  min-width: 54px;
}

.sys-status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

/* Cellular signal bars */
.sys-icon.sys-cellular {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  width: 18px;
  height: 11px;
}

.sys-icon.sys-cellular i {
  display: block;
  width: 3px;
  background: currentColor;
  border-radius: 0.5px;
}

.sys-icon.sys-cellular i:nth-child(1) { height: 4px; opacity: 0.45; }
.sys-icon.sys-cellular i:nth-child(2) { height: 6px; opacity: 0.65; }
.sys-icon.sys-cellular i:nth-child(3) { height: 8px; opacity: 0.85; }
.sys-icon.sys-cellular i:nth-child(4) { height: 10px; }

/* WiFi */
.sys-icon.sys-wifi {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
  width: 16px;
  height: 11px;
  gap: 1px;
}

.sys-icon.sys-wifi i {
  display: block;
  border: 1.5px solid currentColor;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.sys-icon.sys-wifi i:nth-child(1) {
  width: 4px;
  height: 2px;
  border: none;
  background: currentColor;
  border-radius: 50%;
}

.sys-icon.sys-wifi i:nth-child(2) { width: 8px; height: 4px; opacity: 0.7; }
.sys-icon.sys-wifi i:nth-child(3) { width: 14px; height: 6px; opacity: 0.45; }

/* Battery */
.sys-icon.sys-battery {
  width: 25px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  position: relative;
  padding: 1px;
}

.sys-icon.sys-battery::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 3px;
  width: 2px;
  height: 4px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
}

.sys-battery-fill {
  display: block;
  width: 72%;
  height: 100%;
  background: currentColor;
  border-radius: 1px;
}

.sys-icon.sys-battery.android {
  border-radius: 2px;
}

/* Android status bar tweaks */
.sys-status-bar.android {
  font-family: Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 0 16px 4px;
}

/* ── Home indicator (iOS) ── */
.sys-home-indicator {
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sys-home-bar {
  background: #000;
  border-radius: 3px;
  opacity: 0.25;
}

.device-frame.mobile .sys-home-bar {
  opacity: 0.3;
}

.sys-status-bar.landscape-top {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  box-sizing: border-box;
}

.sys-status-bar.landscape-top.has-dynamic-island {
  align-items: center;
  padding: 0 28px;
}

.sys-status-bar.landscape-top.has-dynamic-island .sys-time,
.sys-status-bar.landscape-top.has-dynamic-island .sys-status-icons {
  flex: 1;
  z-index: 3;
}

.sys-status-bar.landscape-top.has-dynamic-island .sys-status-icons {
  justify-content: flex-end;
}

.sys-status-bar.landscape-top .sys-dynamic-island {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.sys-home-indicator.landscape-bottom {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-frame.landscape .sys-home-indicator {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
}

.device-frame.landscape .sys-nav-bar {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
}

.device-frame.landscape .sys-nav-pill {
  width: 120px;
  height: 5px;
  border-radius: 3px;
}

/* ── Android gesture nav bar ── */
.sys-nav-bar {
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sys-nav-pill {
  width: 96px;
  height: 4px;
  background: #1a1a1a;
  border-radius: 2px;
  opacity: 0.35;
}

/* ── macOS menu bar ── */
.sys-menu-bar {
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  color: #1a1a1a;
}

.sys-menu-left {
  display: flex;
  gap: 16px;
}

.sys-menu-left span:first-child::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #555 0%, #333 100%);
  border-radius: 2px;
  vertical-align: -1px;
}

.sys-menu-time {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sys-menu-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sys-menu-icons .sys-icon {
  color: #1a1a1a;
}

/* ── Windows title bar ── */
.sys-title-bar {
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 12px;
  background: #f3f3f3;
  border-bottom: 1px solid #e0e0e0;
  font-size: 12px;
  color: #1a1a1a;
}

.sys-title-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sys-title-buttons {
  display: flex;
  height: 100%;
}

.sys-title-btn {
  width: 46px;
  height: 100%;
  position: relative;
  border-left: 1px solid #e0e0e0;
}

.sys-title-btn-minimize::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 1px;
  background: #1a1a1a;
}

.sys-title-btn-maximize::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border: 1px solid #1a1a1a;
}

.sys-title-btn-close::before,
.sys-title-btn-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: #1a1a1a;
}

.sys-title-btn-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sys-title-btn-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.sys-title-btn-close:hover {
  background: #e81123;
}

.sys-title-btn-close:hover::before,
.sys-title-btn-close:hover::after {
  background: #fff;
}

/* ── Browser chrome (website mode) ── */
.sys-browser-bar {
  top: 0;
  display: flex;
  flex-direction: column;
  background: #dee1e6;
  border-bottom: 1px solid #c4c7cc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  pointer-events: none;
}

.sys-browser-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 8px 0;
  min-height: 34px;
}

.sys-browser-tab {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  padding: 6px 12px;
  background: #c4c7cc;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  color: #3c4043;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sys-browser-tab.active {
  background: #fff;
  color: #202124;
}

.sys-browser-tab-add {
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}

.sys-browser-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 8px;
  background: #fff;
}

.sys-browser-nav {
  display: flex;
  gap: 6px;
  color: #5f6368;
  font-size: 14px;
  flex-shrink: 0;
}

.sys-browser-nav i {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f1f3f4;
}

.sys-browser-url {
  flex: 1;
  padding: 6px 12px;
  background: #f1f3f4;
  border-radius: 16px;
  font-size: 13px;
  color: #3c4043;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sys-browser-menu {
  color: #5f6368;
  font-size: 18px;
  padding: 0 4px;
  flex-shrink: 0;
}

.sys-browser-bar.web-mobile {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.sys-browser-bar.web-mobile .sys-browser-toolbar {
  padding: 8px 12px;
}

.sys-browser-bar.web-mobile .sys-browser-url {
  border-radius: 8px;
  font-size: 14px;
}

.device-frame.browser.browser-mobile .sys-browser-bar {
  border-radius: 18px 18px 0 0;
}