/* ─────────────────────────────────────────────
   Browser App
   ───────────────────────────────────────────── */

.browser-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(14, 14, 32, 0.95);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.browser-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.browser-nav {
  display: flex;
  gap: var(--space-1);
}

.browser-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  font-family: inherit;
}

.browser-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.browser-btn:active {
  transform: translateY(0) scale(0.95);
  transition: transform 0.1s ease-out;
}

.browser-btn i {
  font-size: 16px;
}

.browser-search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
}

.browser-search-wrap:focus-within {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.browser-search-wrap i {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.browser-search {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: var(--font-sm);
  font-family: inherit;
  outline: none;
  padding: var(--space-1) 0;
}

.browser-search::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.browser-go-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.browser-go-btn:hover {
  background: rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.5);
  color: #fff;
  transform: translateY(-1px);
}

.browser-go-btn:active {
  transform: translateY(0) scale(0.95);
  transition: transform 0.1s ease-out;
}

.browser-logo {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  margin-left: var(--space-2);
}

.browser-content {
  flex: 1;
  position: relative;
  background: #fff;
  overflow: hidden;
}

.browser-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
  display: block;
}

/* Loading indicator */
.browser-content.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: browserSpin 0.8s linear infinite;
  z-index: 10;
  pointer-events: none;
}

@keyframes browserSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}