/* Hookah Splitter — mobile-first styles per SPEC §10.4, §11.1–11.3.
 * No inline styles are used anywhere — every visual concern lives here. */

/* ---------- Theme tokens ---------- */

:root {
  --bg: #ffffff;
  --bg-elevated: #f5f5f7;
  --bg-card: #ffffff;
  --text: #1c1c1e;
  --text-secondary: #6e6e73;
  --accent: #007aff;
  --accent-contrast: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  /* Telegram virtual-keyboard-aware viewport height (SPEC §11.9). Falls back
     to 100vh outside Telegram or before the SDK reports a value. main.js
     overrides this on viewportChanged. */
  --tg-viewport-stable-height: 100vh;
}

[data-theme='dark'] {
  --bg: #000000;           /* AMOLED */
  --bg-elevated: #1c1c1e;
  --bg-card: #1c1c1e;
  --text: #ffffff;
  --text-secondary: #98989d;
  --accent: #0a84ff;
  --accent-contrast: #ffffff;
  --border: rgba(255, 255, 255, 0.15);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ---------- Base ---------- */

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

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

img {
  max-width: 100%;
  display: block;
}

/* ---------- App shell ---------- */

#app {
  display: flex;
  flex-direction: column;
  /* Use Telegram's stable viewport height when available, fall back to 100vh.
     This shrinks the app when the iOS virtual keyboard opens, so the input
     the user is editing stays visible (SPEC §11.9 viewportStableHeight). */
  min-height: var(--tg-viewport-stable-height, 100vh);
  max-height: var(--tg-viewport-stable-height, 100vh);
  overflow: hidden;
}

.app-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.app-header h1 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.app-main {
  flex: 1;
  min-height: 0; /* let flex shrink it below content size */
  overflow-y: auto;
  padding: 16px;
  padding-bottom: calc(72px + var(--safe-bottom) + 16px);
}

/* ---------- Bottom navigation ---------- */

.app-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: nowrap;          /* never wraps to a second row (§11.3) */
  align-items: center;
  gap: 4px;
  padding: 8px;
  padding-bottom: calc(8px + var(--safe-bottom));
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  z-index: 10;
}

.nav-item {
  flex: 1 1 0;
  min-width: 0;               /* enables ellipsis on narrow chips */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--text);
  font-size: clamp(11px, 3vw, 14px);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-item.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* ---------- User chip (the 4th nav item) ---------- */

.user-chip {
  max-width: 30vw;            /* never extends past 30% of viewport width */
}

.chip-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--bg);
}

.chip-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
}

.user-chip.active .chip-avatar-fallback {
  background: var(--accent-contrast);
  color: var(--accent);
  border-color: transparent;
}

.chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---------- Views ---------- */

.view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.view h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.placeholder {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

/* ---------- Generic card ---------- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
}

/* ---------- Buttons ---------- */

.primary-button,
.add-bowl-button {
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  text-align: center;
}

.add-bowl-button {
  background: var(--bg-elevated);
  color: var(--accent);
  border: 1px dashed var(--border);
}

.end-session-button {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  text-align: center;
  border: 1px solid var(--border);
}

.end-session-button:hover,
.end-session-button:focus-visible {
  color: var(--text);
  outline: none;
}

/* ---------- Session title input ---------- */

.session-title-row {
  display: flex;
}

.session-title-input {
  flex: 1;
  font-size: 20px;
  font-weight: 600;
  padding: 8px 12px;
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 8px;
  letter-spacing: -0.01em;
}

.session-title-input:focus {
  outline: none;
  border-color: var(--border);
  background: var(--bg-elevated);
}

/* ---------- Bowl list + cards ---------- */

.bowl-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bowl-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;            /* the card body activates the bowl on tap */
  transition: border-color 0.15s ease;
}

.bowl-card.active {
  border-color: var(--accent);  /* SPEC §11.4 — active bowl marked by accent border */
}

.bowl-card-fields {
  display: flex;
  gap: 8px;
}

.bowl-name-input {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.bowl-cost-input {
  width: 92px;
  font-size: 15px;
  text-align: right;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  /* Hide native number spinners for a cleaner mobile look */
  appearance: textfield;
  -moz-appearance: textfield;
}

.bowl-cost-input::-webkit-outer-spin-button,
.bowl-cost-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bowl-name-input:focus,
.bowl-cost-input:focus,
.add-participant-input:focus {
  outline: none;
  border-color: var(--accent);
}

.participant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 4px;
}

.participant-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
  font-size: 13px;
  max-width: 100%;
  overflow: hidden;
}

.chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16ch;
}

.chip-remove {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.chip-remove:hover,
.chip-remove:focus-visible {
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.add-participant-input {
  width: 100%;
  font-size: 14px;
  padding: 6px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* ---------- Splits panel ---------- */

.splits-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.splits-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.splits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.splits-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.splits-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.splits-unallocated {
  color: var(--text-secondary);
  font-style: italic;
}

.splits-total {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-weight: 600;
}

/* ---------- From-saved picker (bowl card) ---------- */

.from-saved-select {
  width: 100%;
  font-size: 14px;
  padding: 6px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.from-saved-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---------- People view ---------- */

.view-people .people-add-row {
  display: flex;
}

.people-add-input {
  flex: 1;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.people-add-input:focus {
  outline: none;
  border-color: var(--accent);
}

.people-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.people-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: var(--shadow);
}

.people-name-input {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  padding: 6px 8px;
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 6px;
}

.people-name-input:focus {
  outline: none;
  border-color: var(--border);
  background: var(--bg);
}

.people-delete {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.people-delete:hover,
.people-delete:focus-visible {
  color: var(--text);
  outline: none;
}

/* ---------- Settings view ---------- */

.view-settings .settings-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.settings-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.settings-cost-input,
.settings-select {
  font-size: 15px;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.settings-cost-input:focus {
  outline: none;
  border-color: var(--accent);
}

.settings-select:disabled {
  opacity: 0.6;
}

.settings-segmented {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}

.settings-segment {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.settings-segment.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* ---------- Cabinet: profile card ---------- */

.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--bg);
}

.profile-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  border: 1px solid var(--border);
}

.profile-text {
  min-width: 0;
  flex: 1;
}

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

/* ---------- Cabinet: section + history ---------- */

.cabinet-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cabinet-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 8px 0 0;
}

.cabinet-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-empty {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
  padding: 8px 4px;
}

.history-card {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.history-card-link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  color: var(--text);
}

.history-card-title {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-card-meta {
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.history-card-delete {
  align-self: stretch;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-left: 1px solid var(--border);
}

.history-card-delete:hover,
.history-card-delete:focus-visible {
  color: var(--text);
  background: var(--bg-elevated);
  outline: none;
}

/* ---------- SessionDetail ---------- */

.view-session-detail h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}

.detail-meta-label {
  font-weight: 500;
  color: var(--text);
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.detail-bowl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-bowl {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-bowl-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.detail-bowl-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-bowl-cost {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.detail-bowl-chips {
  margin-top: 0;
}

.detail-bowl-empty {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

.detail-splits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-split-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-split-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.detail-split-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-split-total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.detail-per-bowl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  margin-left: 2px;
}

.detail-per-bowl-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}

.detail-split-unallocated .detail-split-name {
  font-style: italic;
  color: var(--text-secondary);
}

.detail-split-totalrow {
  background: var(--bg-elevated);
  font-weight: 600;
}

.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.detail-back {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
}

.detail-back:hover,
.detail-back:focus-visible {
  background: var(--bg-card);
  outline: none;
}

.detail-delete {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
}

.detail-delete:hover,
.detail-delete:focus-visible {
  color: var(--text);
  background: var(--bg-card);
  outline: none;
}

/* ---------- Merge dialog (custom modal) ---------- */

.merge-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-top: calc(16px + var(--safe-top));
  padding-bottom: calc(16px + var(--safe-bottom));
  overflow-y: auto;
}

.merge-dialog {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 380px;
  width: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.merge-dialog-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.merge-dialog-body {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.merge-dialog-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.merge-dialog-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

.merge-dialog-option input[type='checkbox'] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.merge-dialog-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.merge-dialog-cancel,
.merge-dialog-confirm {
  flex: 1;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border);
  cursor: pointer;
}

.merge-dialog-cancel {
  background: var(--bg-elevated);
  color: var(--text);
}

.merge-dialog-cancel:hover,
.merge-dialog-cancel:focus-visible {
  background: var(--bg-card);
  outline: none;
}

.merge-dialog-confirm {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: transparent;
}

.merge-dialog-confirm:hover,
.merge-dialog-confirm:focus-visible {
  opacity: 0.9;
  outline: none;
}

/* ---------- Telegram chrome: hide custom buttons replaced by native ones ---------- */

/* When running inside Telegram, MainButton replaces our custom Start/End and
   BackButton replaces our custom '← Back' link. main.js adds .in-telegram on
   <body> when telegram.isInTelegram() is true (SPEC §11.9). Outside Telegram
   this class is absent and all custom buttons remain visible. */

body.in-telegram #start-session,
body.in-telegram .end-session-button,
body.in-telegram .detail-back {
  display: none;
}

/* Reflow the detail-actions row so the lone Delete button stays full-width
   after the Back link disappears in Telegram. */
body.in-telegram .detail-actions {
  justify-content: stretch;
}