*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  /* The WebView must not rubber-band the whole screen when an inner list
     reaches its end — that is the gap a phone shows below the chat list. */
  overscroll-behavior: none;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg-root);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

[hidden] {
  display: none !important;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

svg {
  display: block;
  flex: none;
}

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

.logo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: linear-gradient(145deg, var(--auth-g1), var(--auth-g2) 55%, var(--auth-g3));
  box-shadow: 0 6px 16px rgba(63, 94, 251, 0.26);
}

.logo svg {
  width: 60%;
  height: 60%;
}

.logo-lg {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg-root);
  z-index: 200;
}

.boot .logo {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  animation: boot-pulse 1.5s ease-in-out infinite;
}

@keyframes boot-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-weight: 650;
  letter-spacing: 0.2px;
  line-height: 1;
  user-select: none;
  overflow: hidden;
  box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.09);
}

.avatar-saved {
  background: linear-gradient(140deg, #43c6ff, #3d7bf7 55%, #7b5cff);
}

.avatar-saved svg {
  width: 44%;
  height: 44%;
}

/* ——— Auth ——— */

.auth-screen {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.9fr);
  height: 100dvh;
  background: var(--surface);
}

.auth-aside {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.18), transparent 40%),
    radial-gradient(circle at 10% 94%, rgba(255, 255, 255, 0.1), transparent 44%),
    linear-gradient(148deg, var(--auth-g1), var(--auth-g2) 58%, var(--auth-g3));
}

.auth-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.3;
  pointer-events: none;
}

.auth-aside > * {
  position: relative;
  z-index: 1;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.auth-brand .logo {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.auth-aside h1 {
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1.04;
  letter-spacing: -1.8px;
  margin: 48px 0 20px;
  font-weight: 750;
}

.auth-lead {
  max-width: 480px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
  margin: 0;
}

.auth-points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.92);
}

.auth-points li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.point-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  flex: none;
}

.point-check svg {
  width: 13px;
  height: 13px;
}

.auth-art {
  position: absolute;
  right: -12px;
  bottom: -26px;
  width: 44%;
  max-width: 500px;
  aspect-ratio: 1;
  pointer-events: none;
}

.art-ring {
  position: absolute;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.art-ring-1 {
  inset: 6%;
}

.art-ring-2 {
  inset: 22%;
}

.art-ring-3 {
  inset: 38%;
}

.art-plane {
  position: absolute;
  inset: 33%;
  display: grid;
  place-items: center;
  color: #fff;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25));
  animation: float 7s ease-in-out infinite;
}

.art-plane svg {
  width: 100%;
  height: 100%;
}

.art-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.chip-1 {
  top: 10%;
  left: -2%;
  animation: float 6.4s ease-in-out infinite;
}

.chip-2 {
  right: 3%;
  top: 40%;
  animation: float 7.6s ease-in-out infinite 0.6s;
}

.chip-3 {
  left: 2%;
  bottom: 6%;
  animation: float 8.2s ease-in-out infinite 1.2s;
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot-blue {
  background: #6fd0ff;
}

.dot-green {
  background: #6ff0b0;
}

.dot-violet {
  background: #c7b3ff;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.auth-panel {
  display: grid;
  place-items: center;
  padding: calc(40px + var(--lg-edge-top)) calc(40px + var(--lg-edge-right))
    calc(40px + var(--lg-edge-bottom)) calc(40px + var(--lg-edge-left));
  background:
    radial-gradient(circle at 50% -10%, var(--accent-soft), transparent 52%),
    var(--surface);
  overflow-y: auto;
}

.auth-card {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 38px 36px 30px;
  box-shadow: var(--shadow-lg);
}

.auth-mobile-brand {
  display: none;
}

.auth-card h2 {
  font-size: 27px;
  letter-spacing: -0.6px;
  margin: 0 0 6px;
  font-weight: 750;
}

.auth-sub {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14.5px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 14px;
  margin-bottom: 22px;
}

.auth-tab {
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.18s var(--ease), color 0.18s, box-shadow 0.18s;
}

.auth-tab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field-label {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-2);
  letter-spacing: 0.1px;
}

.field input {
  height: 48px;
  width: 100%;
  padding: 0 15px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--input-bg);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.field input::placeholder {
  color: var(--faint);
}

.field input:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: var(--surface);
}

.field-control {
  position: relative;
  display: block;
}

.field-control .at {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 600;
  pointer-events: none;
}

.field-control input {
  padding-left: 32px;
}

.field-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.form-error {
  margin: 0;
  padding: 10px 13px;
  border-radius: 11px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  line-height: 1.4;
}

.btn-primary {
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #7b5cff));
  color: var(--accent-contrast);
  font-weight: 650;
  font-size: 15px;
  box-shadow: 0 10px 24px var(--accent-soft);
  transition: transform 0.15s var(--ease), filter 0.15s, box-shadow 0.15s;
}

.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 28px var(--accent-soft);
}

.btn-primary:active {
  transform: scale(0.985);
}

.btn-primary:disabled {
  opacity: 0.65;
  cursor: default;
  filter: none;
}

.auth-footnote {
  margin: 22px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--faint);
  line-height: 1.5;
}

.auth-install {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
}

.auth-install a {
  display: inline-block;
  margin: 0 6px 4px;
  color: var(--accent);
  text-decoration: none;
}

.auth-install a:hover {
  text-decoration: underline;
}

.auth-install-meta {
  color: var(--faint);
  font-size: 12px;
}

/* ——— App shell ——— */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  height: 100dvh;
  background: var(--chat-bg);
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  position: relative;
  z-index: 3;
  transition: background-color 0.25s var(--ease);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(14px + var(--lg-edge-top)) calc(16px + var(--lg-edge-right)) 10px
    calc(20px + var(--lg-edge-left));
  min-height: calc(70px + var(--lg-edge-top));
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  user-select: none;
}

.brand-name {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.5px;
}

.sidebar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--text-2);
  transition: background 0.16s, color 0.16s, transform 0.12s;
}

.icon-btn svg {
  width: 21px;
  height: 21px;
}

.icon-btn:hover {
  background: var(--hover);
  color: var(--text);
}

.icon-btn:active {
  transform: scale(0.94);
}

@media (hover: none) {
  /* A finger aims at the circle but lands beside it. The paint stays 38px;
     the area that answers the tap grows to what Android asks for. */
  .icon-btn {
    position: relative;
  }

  .icon-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

.icon-btn-accent {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 8px 18px var(--accent-soft);
}

.icon-btn-accent:hover {
  background: var(--accent-strong);
  color: var(--accent-contrast);
}

.icon-btn-accent svg {
  width: 19px;
  height: 19px;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 16px 12px;
  padding: 0 14px;
  height: 44px;
  background: var(--input-bg);
  border-radius: 14px;
  border: 1.5px solid transparent;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.search:focus-within {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.search svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
}

.search input::placeholder {
  color: var(--faint);
}

.conn-banner {
  margin: 0 16px 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--text-2);
  font-size: 12.5px;
  text-align: center;
  animation: fade-in 0.2s ease;
}

.chat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 8px 10px;
}

.chat-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  text-align: left;
  transition: background 0.16s var(--ease), transform 0.12s var(--ease);
}

.chat-item:active {
  transform: scale(0.985);
}

.chat-item:hover {
  background: var(--hover);
  transform: translateY(-1px);
}

.chat-item.is-active {
  background: var(--active);
}

/* A lit edge marks the conversation that is open, and follows its accent. */
.chat-item.is-active::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 3px;
  height: 24px;
  margin-top: -12px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-soft);
}

.chat-item .avatar {
  width: 52px;
  height: 52px;
  font-size: 19px;
}

.chat-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chat-item-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.chat-item-name {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.chat-item-time {
  font-size: 11.5px;
  color: var(--muted);
  flex: none;
}

.chat-item-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-item-preview {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item-preview .you {
  color: var(--faint);
}

.chat-item-preview.is-typing {
  color: var(--accent);
  font-weight: 550;
}

.unread-badge {
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 66%, #7b5cff));
  color: var(--accent-contrast);
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px var(--accent-soft);
}

.chat-list-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.profile-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(70px + var(--lg-edge-bottom));
  padding: 0 calc(16px + var(--lg-edge-right)) var(--lg-edge-bottom)
    calc(18px + var(--lg-edge-left));
  border-top: 1px solid var(--sidebar-border);
  text-align: left;
  flex: none;
  transition: background 0.16s;
}

.profile-bar:hover {
  background: var(--hover);
}

.profile-bar .avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

.profile-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.profile-name {
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-username {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-more svg {
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.profile-coins {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 5px 9px 5px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #43300a;
  background: linear-gradient(150deg, #ffe9a3, #f2b83f 56%, #dd9c1f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 3px 10px rgba(216, 150, 32, 0.34);
  cursor: pointer;
  transition:
    transform 0.14s var(--ease),
    filter 0.14s var(--ease);
}

.profile-coins:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.profile-coins:active {
  transform: translateY(0) scale(0.97);
}

.profile-coins svg {
  width: 15px;
  height: 15px;
}

.chat-pane {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: var(--chat-bg);
}

.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  background:
    radial-gradient(circle at 50% 42%, var(--accent-soft), transparent 42%),
    var(--chat-bg);
}

.empty-badge {
  width: 88px;
  height: 88px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--auth-g1), var(--auth-g2) 60%, var(--auth-g3));
  box-shadow: 0 20px 44px rgba(63, 94, 251, 0.28);
  margin-bottom: 24px;
}

.empty-badge svg {
  width: 42px;
  height: 42px;
}

.chat-empty h2 {
  font-size: 24px;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
  font-weight: 750;
}

.chat-empty p {
  margin: 0;
  max-width: 420px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.chat-empty kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  font-family: inherit;
  color: var(--text-2);
  vertical-align: 1px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 1180px) {
  .auth-art {
    display: none;
  }
}

@media (max-width: 1100px) {
  :root {
    --sidebar-width: 340px;
  }
}

@media (max-width: 920px) {
  .auth-screen {
    grid-template-columns: 1fr;
  }

  .auth-aside {
    display: none;
  }

  .auth-panel {
    padding: calc(24px + var(--lg-edge-top)) calc(24px + var(--lg-edge-right))
      calc(24px + var(--lg-edge-bottom)) calc(24px + var(--lg-edge-left));
  }

  .auth-card {
    padding: 32px 26px 26px;
  }

  .auth-mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 750;
    font-size: 18px;
    letter-spacing: -0.4px;
    margin-bottom: 26px;
  }
}

@media (max-width: 560px) {
  .auth-panel {
    padding: 0;
  }

  .auth-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
    padding: calc(32px + var(--lg-edge-top)) calc(24px + var(--lg-edge-right))
      calc(32px + var(--lg-edge-bottom)) calc(24px + var(--lg-edge-left));
  }
}

/* Phone build only (html.lg-phone is set from the WebView marker in index.html).
   Four 38px buttons plus the brand measured 402px, and a grid track sized 1fr
   cannot shrink below its content — so the sidebar forced the whole document
   wider than the screen and body's overflow-x: hidden swallowed the language,
   theme and plus buttons off the right edge. The track is capped and the header
   is packed against the label instead of against the invisible edge. */
html.lg-phone .app {
  grid-template-columns: minmax(0, 1fr);
}

html.lg-phone .sidebar {
  min-width: 0;
}

html.lg-phone .sidebar-header {
  gap: 6px;
  min-width: 0;
  padding: calc(12px + var(--lg-edge-top)) calc(10px + var(--lg-edge-right)) 8px
    calc(14px + var(--lg-edge-left));
}

html.lg-phone .brand {
  gap: 8px;
  min-width: 0;
}

html.lg-phone .brand-name {
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.lg-phone .sidebar-actions {
  flex: none;
  gap: 5px;
  /* Both margins auto = the group sits in the middle of the leftover space,
     so it drifts right with the screen instead of hugging an edge that used to
     be off-screen; when nothing is left over it falls back to touching the label. */
  margin-left: auto;
  margin-right: auto;
}

html.lg-phone .sidebar-actions .icon-btn {
  width: 34px;
  height: 34px;
}

html.lg-phone .sidebar-actions .icon-btn svg {
  width: 19px;
  height: 19px;
}

/* The one action people actually reach for; the picker buttons stay smaller. */
html.lg-phone #new-chat-btn {
  width: 40px;
  height: 40px;
}

html.lg-phone #new-chat-btn svg {
  width: 23px;
  height: 23px;
}

/* A dialog is capped at 620px and the profile one runs past it — 32 avatar
   presets plus the name fields. overflow: hidden kept the tail unreachable and
   a finger on the glass moved nothing, so the lower presets and the save
   button simply did not exist. The card scrolls instead, and the back gesture
   closes it rather than losing the scroll position. */
html.lg-phone .modal {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The smallest phones in the wild are 320px wide. Without this tier the four
   buttons fit but "SpaceGram" itself gets cut to "SpaceGr…". */
@media (max-width: 340px) {
  html.lg-phone .brand-name {
    font-size: 17px;
  }

  html.lg-phone .sidebar-actions {
    gap: 4px;
  }

  html.lg-phone .sidebar-actions .icon-btn {
    width: 32px;
    height: 32px;
  }

  html.lg-phone .sidebar-actions .icon-btn svg {
    width: 18px;
    height: 18px;
  }

  html.lg-phone #new-chat-btn {
    width: 38px;
    height: 38px;
  }

  html.lg-phone #new-chat-btn svg {
    width: 22px;
    height: 22px;
  }
}

/* ——— Premium finish ——— */

/* Selection takes the theme colour instead of the browser's blue. */
::selection {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Every control reached from the keyboard answers in the same voice. */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}