/* ── utilities.css — reset, base styles, shared helpers ─────────────────
   Global reset, html/body foundation, shared utility classes.
   No component-specific rules here.
────────────────────────────────────────────────────────────────────────── */

/* ── Reset ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Document base ───────────────────────────────────────────── */
html {
  background: red; /*test color*/
}

body {
  overflow: hidden;
  overscroll-behavior: none;
  height: 100vh;
  width: 100vw;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px; /* base — all rem values derive from this */
  line-height: 1.5;
}

/* ── Root container ──────────────────────────────────────────── */
#root {
  position: relative;
  height: 100%;
  width: 100%;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: green; /*test color*/
  opacity: 0;
  transition: opacity 0.15s ease;
}

body.ready #root {
  opacity: 1;
}

/* ── App shell ───────────────────────────────────────────────── */
#app-shell {
  position: relative;
  height: 100%;
  width: 100%;
  inset: 0;
  z-index: 0;
  background: var(--bg);
  background: blue; /*test color*/
  overflow: hidden;
}

/* ── Utility classes ─────────────────────────────────────────── */
.hidden {
  display: none !important;
}

.screen {
  height: 100vh;
}

/* ── Shared error span ───────────────────────────────────────── */
.error {
  font-size: var(--text-xs);
  color: var(--accent);
  min-height: 1em;
}

/* ── Safe-area spacers ──────────────────────────────────────── */
.safe-top {
  display: block;
  width: 100%;
  height: env(safe-area-inset-top, 0px);
  flex-shrink: 0;
  pointer-events: none;
  background: yellow; /*test color*/
}

.safe-bottom {
  display: block;
  width: 100%;
  height: env(safe-area-inset-bottom, 0px);
  flex-shrink: 0;
  pointer-events: none;
  background: purple; /*test color*/
}

.safe-content {
  /* height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); */
  height: 100%;
  width: 100%;
}

/* ── Default scrollbar (desktop baseline) ────────────────────── */
::-webkit-scrollbar {
  width: 4px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--surface3);
}

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

/* ── Touch: suppress selection on messages (coarse-pointer baseline) ── */
@media (pointer: coarse) {
  #messages,
  #messages * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* ── Responsive message bubble width ─────────────────────────── */
.msg-group {
  padding: 0.15rem 0.6rem;
}

@media (max-width: 540px) {
  .msg-bubble {
    max-width: 88vw;
  }
}