* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f0f2f5;
  overscroll-behavior: none;
}

.screen {
  height: 100%;
  height: 100dvh;
}

.hidden { display: none !important; }

/* ── Lang buttons ── */

.lang-row {
  display: flex;
  gap: 6px;
}

.lang-btn {
  padding: 4px 10px;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  background: none;
  color: #666;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.lang-btn.active {
  background: #4a7fe8;
  border-color: #4a7fe8;
  color: #fff;
}

/* ── Login ── */

#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px 32px;
  width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 13px;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
}

.login-card .lang-row { justify-content: flex-end; }

.login-card h1 {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin-bottom: 2px;
}

.login-card input {
  padding: 13px 14px;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  font-size: 16px;
  outline: none;
  transition: border-color .15s;
}

.login-card input:focus { border-color: #4a7fe8; }

.login-card button#login-btn {
  padding: 14px;
  background: #4a7fe8;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: background .15s;
}

.login-card button#login-btn:active { background: #3366cc; }

.error {
  color: #d44;
  font-size: 14px;
  min-height: 16px;
  text-align: center;
}

/* ── Chat layout ── */

#chat-screen {
  display: flex;
  flex-direction: column;
}

/* ── Side panel overlay ── */

#panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10;
  animation: fadeIn .2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Side panel ── */

#side-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(290px, 85vw);
  background: #fff;
  z-index: 11;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 28px rgba(0,0,0,.18);
  animation: slideIn .2s ease-out;
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #1a1a2e;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}

#panel-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

#peer-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 6px 0;
}

.peer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .12s;
}

.peer-item:active { background: #eef2ff; }
.peer-item.active { background: #f0f4ff; }

.peer-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #4a7fe8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.peer-info { flex: 1; min-width: 0; }

.peer-display-name {
  font-size: 15px;
  font-weight: 600;
  color: #111;
}

.peer-status {
  font-size: 12px;
  color: #aaa;
  margin-top: 2px;
}

.peer-status.online { color: #4cd964; }

.badge {
  background: #e53935;
  color: #fff;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  flex-shrink: 0;
}

.panel-footer {
  padding: 14px 16px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

/* ── Header ── */

header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #1a1a2e;
  color: #fff;
  flex-shrink: 0;
}

.icon-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.peer-name {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
}

.online-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #555;
  transition: background .4s;
  flex-shrink: 0;
}

.online-dot.online { background: #4cd964; }

/* ── Messages ── */

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overscroll-behavior: contain;
}

.bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
  animation: pop .12s ease-out;
}

@keyframes pop {
  from { transform: scale(.96); opacity: .7; }
  to   { transform: scale(1);   opacity: 1; }
}

.bubble.mine {
  align-self: flex-end;
  background: #4a7fe8;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bubble.theirs {
  align-self: flex-start;
  background: #fff;
  color: #111;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.bubble .time {
  font-size: 11px;
  margin-top: 4px;
  text-align: right;
  opacity: .6;
}

/* ── Image messages ── */

.msg-img {
  max-width: 220px;
  max-height: 260px;
  border-radius: 10px;
  display: block;
  cursor: zoom-in;
  object-fit: cover;
}

.bubble.uploading {
  opacity: .6;
  font-style: italic;
  font-size: 13px;
}

/* ── Fullscreen image overlay ── */

.img-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  animation: fadeIn .15s ease-out;
}

.img-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 8px;
  object-fit: contain;
}

/* ── Input bar ── */

.input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #e5e5e5;
  flex-shrink: 0;
}

#photo-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: .7;
}

#photo-btn:active { opacity: 1; }

.input-bar input {
  flex: 1;
  padding: 11px 16px;
  border: 1.5px solid #ddd;
  border-radius: 24px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s;
  min-width: 0;
}

.input-bar input:focus { border-color: #4a7fe8; }

#send-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #4a7fe8;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

#send-btn:active { background: #3366cc; }

/* ── Call modal ── */

#call-modal {
  position: fixed;
  inset: 0;
  background: rgba(10,10,20,.92);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .2s ease-out;
}

.call-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 32px;
  color: #fff;
  text-align: center;
  width: min(320px, 90vw);
}

.call-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #4a7fe8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 700;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,127,232,.5); }
  50%       { box-shadow: 0 0 0 18px rgba(74,127,232,0); }
}

.call-name {
  font-size: 26px;
  font-weight: 700;
}

.call-status {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  min-height: 20px;
}

.call-actions {
  display: flex;
  gap: 32px;
  margin-top: 16px;
}

.call-action {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s, opacity .1s;
}

.call-action:active { transform: scale(.92); }

.call-action.accept  { background: #4cd964; }
.call-action.reject  { background: #e53935; }

/* ── Active call bar ── */

#call-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 8px 16px;
  background: #1a3a1a;
  color: #4cd964;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

#call-duration { min-width: 38px; }

.call-ctrl {
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.call-ctrl:active       { background: rgba(255,255,255,.25); }
.call-ctrl.hangup       { background: #e53935; }
.call-ctrl.hangup:active { background: #b71c1c; }
.call-ctrl.muted        { background: #e5a039; }

/* ── Call button in header ── */

#call-btn { font-size: 20px; }
#call-btn:disabled { opacity: .35; }

/* ── Toast ── */

.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 50;
  pointer-events: none;
  white-space: nowrap;
}