/* =============================================
   base.css — Reset, Variables, Starfield, Phone Shell
   ============================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: 'Segoe UI', sans-serif;
  background-color: #000a1a;
  background-image: radial-gradient(ellipse at 50% 50%, #001433 0%, #000510 70%);
}

/* Starfield */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(100,180,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 60%, rgba(100,180,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 15%, rgba(100,180,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 80%, rgba(100,180,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 40%, rgba(100,180,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 85%, rgba(100,180,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 35%, rgba(100,180,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 75%, rgba(100,180,255,0.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 10%, rgba(150,210,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 50%, rgba(150,210,255,0.4) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Phone shell */
.phone {
  width: 375px;
  height: 812px;
  background: linear-gradient(160deg, #000d24 0%, #000510 100%);
  border-radius: 44px;
  border: 2px solid #1a2540;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 60px rgba(0,80,255,0.15),
    0 0 120px rgba(0,40,120,0.1),
    inset 0 0 40px rgba(0,20,60,0.5);
}

/* Status bar */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-icons svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Chat page slide animations */
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}