:root {
  --bg: #ffffff;
  --muted: #7a8194;
  --accent: #2563eb;
  --accent-soft: #e8efff;
  --line: #e5e8ef;
  --nav-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151821;
    --muted: #8b92a5;
    --accent: #5b8cff;
    --accent-soft: #232a40;
    --line: #262b38;
  }
}

/* Don't showing in desktop */
.bottom-nav { display: none; }

/* Only Mobile */
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }

  .bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg);
    border-top: 1px solid var(--line);
    z-index: 100;
  }
  .bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.72rem;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .bottom-nav .icon-wrap {
    padding: 4px 16px;
    border-radius: 999px;
    transition: background .2s;
  }
  .bottom-nav a.active { color: var(--accent); font-weight: 600; }
  .bottom-nav a.active .icon-wrap { background: var(--accent-soft); }

  /* Send Button */
  .bottom-nav a.send { color: var(--accent); font-weight: 600; }
  .bottom-nav a.send .icon-wrap {
    width: 54px; height: 54px;
    padding: 0;
    margin-top: -22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    border: 4px solid var(--bg);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
  }
  .bottom-nav a.send svg { stroke: #fff; }
  .bottom-nav a.send.active .icon-wrap { background: var(--accent); }
}