/* ---------- fennec mark (the Tonton logo) ---------- */
.fennec {
  --fs: 44px;
  position: relative;
  display: inline-block;
  width: var(--fs);
  height: var(--fs);
  flex: 0 0 auto;
}
.fennec-ear {
  position: absolute;
  top: -10%;
  width: 0; height: 0;
  border-left: calc(var(--fs) * 0.16) solid transparent;
  border-right: calc(var(--fs) * 0.16) solid transparent;
  border-bottom: calc(var(--fs) * 0.5) solid var(--fennec-fur);
  filter: drop-shadow(0 0 0 var(--fennec-line));
}
.fennec-ear::after {
  content: '';
  position: absolute;
  left: calc(var(--fs) * -0.16);
  top: 0;
  width: 0; height: 0;
  border-left: calc(var(--fs) * 0.16) solid transparent;
  border-right: calc(var(--fs) * 0.16) solid transparent;
  border-bottom: calc(var(--fs) * 0.5) solid var(--fennec-line);
  z-index: -1;
  transform: translateY(-2px) scale(1.12);
}
.fennec-ear--l { left: 8%; transform: rotate(-16deg); }
.fennec-ear--r { right: 8%; transform: rotate(16deg); }
.fennec-face {
  position: absolute;
  inset: 28% 8% 4%;
  background: var(--fennec-fur);
  border: 2px solid var(--fennec-line);
  border-radius: 46% 46% 50% 50%;
}
.fennec-eyes { position: absolute; top: 34%; left: 0; right: 0; height: 16%; }
.fennec-eyes::before, .fennec-eyes::after {
  content: '';
  position: absolute;
  width: 13%; height: 90%;
  min-width: 3px; min-height: 3px;
  background: #3A2A1C;
  border-radius: 50%;
  top: 0;
}
.fennec-eyes::before { left: 26%; }
.fennec-eyes::after { right: 26%; }
.fennec-snout {
  position: absolute;
  top: 56%; left: 50%;
  width: 26%; height: 26%;
  transform: translateX(-50%);
  background: var(--fennec-snout);
  border-radius: 50% 50% 50% 50%;
}
.fennec-snout::before {
  content: '';
  position: absolute;
  top: 18%; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 28%;
  background: #3A2A1C;
  border-radius: 50%;
}

/* ---------- cards ---------- */
.card {
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-radius: var(--r-wonky);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}
.card + .card { margin-top: var(--sp-4); }
.card--alt { border-radius: var(--r-wonky-2); }
.card--dots { background-color: var(--c-surface); background-image: var(--pattern-dots); }
.card h3 { display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 0 var(--sp-5);
  background: var(--c-surface);
  color: var(--c-ink);
  border: var(--bw-chunky) solid var(--c-shadow);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--c-shadow); }
.btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent-deep);
  box-shadow: 0 3px 0 var(--c-accent-deep);
}
.btn--primary:active { box-shadow: 0 0 0 var(--c-accent-deep); }
.btn--ghost { background: transparent; border-color: var(--c-line); box-shadow: none; }
.btn--danger { background: var(--c-surface); color: var(--c-danger); border-color: var(--c-danger); box-shadow: 0 3px 0 var(--c-danger); }
.btn--small { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-width: var(--bw-sticker); }
.btn--icon { width: var(--tap-min); padding: 0; border-radius: var(--r-pill); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.btn-row .btn { flex: 1; }

/* ---------- chips & badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--c-surface-2);
  border: var(--bw-thin) solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-ink-soft);
  cursor: default;
  flex: 0 0 auto;
  white-space: nowrap;
}
.chip--btn { cursor: pointer; }
.chip--btn:active { transform: translateY(1px); }
.chip--on { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-ink); }
.chip--count { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-ink); }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-family: var(--font-display);
  font-weight: 600;
  border: var(--bw-thin) solid var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-ink-soft);
  flex: 0 0 auto;
  white-space: nowrap;
}
.status-pill[data-tone='ok'] { background: #E6F4EC; border-color: var(--c-ok); color: var(--c-ok); }
.status-pill[data-tone='warn'] { background: #FBF1DA; border-color: var(--c-warn); color: #9A6B12; }
.status-pill[data-tone='danger'] { background: #FBE7E3; border-color: var(--c-danger); color: var(--c-danger); }
.status-pill[data-tone='accent'] { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-ink); }

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; gap: var(--sp-3); }
.list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  min-height: 64px;
  text-align: start;
  width: 100%;
  color: var(--c-ink);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.list-item:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-shadow); }
.list-item .li-icon {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent-soft);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-radius: var(--r-md);
  font-size: 16px; color: var(--c-accent-ink);
}
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title {
  font-family: var(--font-display);
  font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-2);
}
.list-item .li-sub {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-item .li-side { font-size: var(--fs-xs); color: var(--c-ink-faint); flex: 0 0 auto; align-self: flex-start; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.field--row { flex-direction: row; gap: var(--sp-3); align-items: center; }
.label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft); }
.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-line);
  border-radius: var(--r-md);
  font-size: 16px;
}
.textarea { resize: vertical; min-height: 88px; line-height: 1.45; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--c-accent-deep); outline: none; }
.help { font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* ---------- segmented toggle ---------- */
.seg { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.seg button {
  flex: 1;
  min-height: 42px;
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-line);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--c-ink);
}
.seg button.on {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent-deep);
  box-shadow: 0 2px 0 var(--c-accent-deep);
}

/* ---------- switch ---------- */
.switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 52px; height: 30px; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--c-surface-2);
  border: var(--bw-sticker) solid var(--c-line);
  border-radius: var(--r-pill);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.switch .knob {
  position: absolute; top: 50%; inset-inline-start: 4px;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  background: var(--c-surface);
  border: var(--bw-thin) solid var(--c-shadow);
  border-radius: 50%;
  transition: inset-inline-start var(--t-pop) var(--ease-bounce);
  pointer-events: none;
}
.switch input:checked ~ .track { background: var(--c-accent); border-color: var(--c-accent-deep); }
.switch input:checked ~ .knob { inset-inline-start: 26px; }
.switch input:focus-visible ~ .track { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* ---------- empty / loading / error states ---------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--c-ink-soft);
}
.empty .fennec { --fs: 80px; animation: pop-in var(--t-pop) var(--ease-bounce); }
.empty p { max-width: 300px; margin: 0; }
.loading-row {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-6);
  color: var(--c-ink-soft);
  font-family: var(--font-display);
}
.error-row {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6);
  text-align: center;
  color: var(--c-danger);
}

/* ---------- skeletons ---------- */
.skel { background: var(--c-surface-2); border-radius: var(--r-md); animation: pulse-soft 1.3s infinite; }
.skel-line { height: 14px; margin: 8px 0; }
.skel-card { height: 76px; }

/* ---------- thinking dots ---------- */
.dots { display: inline-flex; gap: 5px; align-items: center; height: 16px; }
.dots i {
  width: 7px; height: 7px;
  background: var(--c-accent-deep);
  border-radius: 50%;
  animation: bounce-dot 1.1s infinite var(--ease-bounce);
}
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }

/* ---------- toasts ---------- */
#toasts {
  position: fixed;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 90;
  width: min(92vw, 420px);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-ink);
  color: var(--c-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  font-size: var(--fs-sm);
  font-weight: 500;
  animation: rise-in var(--t-pop) var(--ease-bounce);
}
.toast--error { background: var(--c-danger); color: #fff; }
.toast--ok { background: var(--c-ok); color: #fff; }

@media (min-width: 860px) {
  #toasts { bottom: calc(var(--safe-bottom) + var(--sp-4)); left: auto; right: var(--sp-5); transform: none; }
}

/* ---------- bottom sheet ---------- */
.scrim {
  position: fixed; inset: 0;
  background: var(--c-overlay);
  z-index: 40;
}
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--c-surface);
  border: var(--bw-sticker) solid var(--c-shadow);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-5) + var(--safe-bottom));
  box-shadow: var(--shadow-float);
  animation: rise-in var(--t-pop) var(--ease-bounce);
  max-height: 86dvh;
  overflow-y: auto;
}
.sheet h3 { margin-bottom: var(--sp-3); }
.sheet .sheet-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0;
  z-index: 95;
  background: var(--c-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.lightbox img {
  max-width: 100%;
  max-height: 80%;
  border-radius: var(--r-md);
  border: var(--bw-chunky) solid var(--c-surface);
}
.lightbox .lb-cap { color: #fff; font-size: var(--fs-sm); text-align: center; }

/* ---------- section title ---------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--sp-5) 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.section-title .st-link { margin-inline-start: auto; font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; }

/* Floating "Ask Tontontan" button — present on every screen (hidden in a chat / login) */
.ask-fab {
  position: fixed; right: 14px; z-index: 85;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3));
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%;
  background: var(--c-accent); cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.ask-fab-img { width: 34px; height: 34px; border-radius: 50%; display: block; }
.ask-fab:active { transform: translateY(1px); }
.ask-fab[disabled] { opacity: .6; }
@media (min-width: 860px) { .ask-fab { bottom: 18px; } }

/* Chat list per-row actions (rename / delete) */
.li-actions { display: flex; gap: 2px; align-items: center; flex: 0 0 auto; }
.li-actions .li-del:active, .li-actions .li-del:hover { color: var(--c-danger); }

/* Community Manager */
.cm-stats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cm-warn { display: flex; gap: var(--sp-2); align-items: flex-start; border-color: var(--c-warn); color: #8a5a10; background: #FBF1DA; font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.cm-tabs { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cm-tabs .chip { flex: 0 0 auto; }
.cm-subhead { margin: var(--sp-5) 0 var(--sp-1); }
.cm-member { padding: var(--sp-3) var(--sp-4); }
.cm-member--sel { border-color: var(--c-accent); box-shadow: 0 4px 0 var(--c-accent-deep); }
.cm-member-top { display: flex; align-items: center; gap: var(--sp-3); }
.cm-avatar { width: 38px; height: 38px; border-radius: var(--r-pill); object-fit: cover; flex: 0 0 auto; border: var(--bw-thin) solid var(--c-line); }
.cm-avatar--ph { display: flex; align-items: center; justify-content: center; background: var(--c-surface-2); color: var(--c-ink-faint); }
.cm-member-main { flex: 1; min-width: 0; }
.cm-member-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-member-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.cm-check { width: 26px; height: 26px; flex: 0 0 auto; border-radius: var(--r-sm); border: var(--bw-sticker) solid var(--c-line); background: var(--c-surface); color: var(--c-accent-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cm-check--on { background: var(--c-accent); border-color: var(--c-accent-deep); }
.cm-rolechips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--sp-3); }
.cm-rolechip { background: var(--c-surface-2); }
.cm-willjoin { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.cm-base .cm-willjoin { margin: var(--sp-2) 0; }
.cm-bulkbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); background: var(--c-accent-soft); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; }
.cm-bulkbar span { margin-right: auto; }
.cm-role-row { cursor: pointer; }
.cm-role-dot { width: 12px; height: 12px; border-radius: var(--r-pill); flex: 0 0 auto; background: var(--c-ink-faint); }
.cm-picker-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); max-height: 46vh; overflow-y: auto; }
.cm-pick-row { justify-content: space-between; }
.cm-invite-preview { padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); }
.cm-invite-to { font-weight: 600; font-size: var(--fs-sm); }
.cm-invite-link { font-size: var(--fs-xs); color: var(--c-ink-soft); word-break: break-all; margin-top: 2px; }

/* ---------- image cropper ---------- */
.scrim--cropper { z-index: 96; }
.cropper {
  position: fixed; inset: 0;
  z-index: 97;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: calc(var(--sp-3) + var(--safe-top)) var(--sp-3) calc(var(--sp-3) + var(--safe-bottom));
  background: var(--c-surface);
}
.cropper__bar { display: flex; align-items: center; gap: var(--sp-2); }
.cropper__title { flex: 1; margin: 0; font-size: var(--fs-md); }
.crop-stage {
  flex: 1;
  min-height: 0;
  border-radius: var(--r-md);
  background: #14110D;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.crop-stage:active { cursor: grabbing; }
.crop-canvas { display: block; width: 100%; height: 100%; }
.cropper__tools { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-ink-soft); }
.crop-zoom { flex: 1; accent-color: var(--c-accent); }
.cropper__hint { margin: 0; text-align: center; }
.cropper__actions { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (min-width: 720px) {
  .cropper { max-width: 760px; inset: 5vh auto; left: 50%; transform: translateX(-50%); border-radius: var(--r-xl); border: var(--bw-sticker) solid var(--c-shadow); box-shadow: var(--shadow-float); }
  .cropper__actions { flex-direction: row-reverse; justify-content: flex-start; }
  .cropper__actions .btn { width: auto; min-width: 160px; }
}