/* ── WebRTC Dialer for Telegram WebApp ──────────────────────────────────────── */

:root {
  --bg:       #1a1a2e;
  --bg2:      #16213e;
  --text:     #e0e0e0;
  --hint:     #777;
  --accent:   #43d9ad;
  --danger:   #e74c3c;
  --btn-bg:   #0f3460;
  --btn-txt:  #fff;
  --pill-bg:  #333;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:     #fff;
    --bg2:    #f5f5f5;
    --text:   #222;
    --hint:   #999;
    --btn-bg: #e0e0e0;
    --btn-txt:#222;
    --pill-bg:#eee;
  }
}

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

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 12px;
}

/* ── Topbar ─────────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 4px;
  flex-shrink: 0;
}

.brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.status-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 9px;
  background: var(--pill-bg);
  color: var(--text);
  transition: background .2s, color .2s;
}
.status-pill.ok     { background: #1b5e20; color: #c8e6c9; }
.status-pill.warn   { background: #e65100; color: #ffe0b2; }
.status-pill.err    { background: var(--danger); color: #fff; }
.status-pill.call   { background: #1565c0; color: #e3f2fd; }

/* ── Number input ───────────────────────────────────────────────────────────── */

.number-area {
  flex-shrink: 0;
  padding: 8px 0;
}

#number {
  width: 100%;
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 2px;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--hint);
  color: var(--text);
  outline: none;
  padding: 6px 0;
  transition: border-color .2s;
}
#number:focus { border-color: var(--accent); }
#number::placeholder { color: var(--hint); letter-spacing: 1px; font-size: 18px; }

.call-meta {
  font-size: 13px;
  color: var(--hint);
  text-align: center;
  padding-top: 4px;
  min-height: 22px;
}

/* ── Keypad ─────────────────────────────────────────────────────────────────── */

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 0;
  flex-shrink: 0;
}

.key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  border-radius: 10px;
  background: var(--btn-bg);
  color: var(--btn-txt);
  font-size: 26px;
  font-weight: 400;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: background .12s;
}
.key:active { opacity: 0.7; background: #0a2540; }
.key .sub {
  font-size: 9px;
  letter-spacing: 2px;
  margin-top: 1px;
  opacity: 0.6;
}

/* ── Controls ───────────────────────────────────────────────────────────────── */

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 0;
  flex-shrink: 0;
}

.ctl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: background .15s, transform .08s;
}
.ctl:active { transform: scale(0.92); }
.ctl:disabled { opacity: 0.4; cursor: default; }
.ctl:disabled:active { transform: none; }

.ctl-call    { background: #27ae60; color: #fff; width: 64px; height: 64px; font-size: 28px; }
.ctl-hangup  { background: var(--danger); color: #fff; width: 64px; height: 64px; font-size: 28px; }
.ctl-secondary { background: var(--btn-bg); color: var(--btn-txt); }

/* ── DTMF pad (inline, replaces keypad while in-call) ──────────────────────── */

.dtmf-pad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 0;
  flex-shrink: 0;
}

.dtmf-pad .key {
  font-size: 18px;
  padding: 10px 0;
}

/* ── Recents ────────────────────────────────────────────────────────────────── */

.recents {
  flex: 1;
  overflow-y: auto;
  padding-top: 6px;
}

.recents-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--hint);
  margin-bottom: 6px;
}

.recents-list {
  list-style: none;
}

.recents-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}
.recents-list li:active { background: var(--bg2); }

.recent-num   { font-size: 14px; font-family: monospace; }
.recent-meta  { font-size: 11px; color: var(--hint); text-align: right; }
.recent-dur   { font-size: 10px; color: var(--accent); }

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.footer {
  padding: 6px 0 12px;
  text-align: center;
  font-size: 11px;
  color: var(--hint);
  flex-shrink: 0;
}