/* ============================================================================
   MCF Web-Mobile — Shell: appbar, bottom-nav, FAB, drawer, theme-sheet, safe-areas
   Baseado na linguagem visual de fonte-mobile.dc.html (appbar :121, nav :219,
   FAB :113, drawer :230, sheet :267). Container coluna unica mobile-first.
   ============================================================================ */

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--t-bg);
  color: var(--t-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
}

::selection { background: rgba(56, 189, 248, .3); }
::-webkit-scrollbar { width: 0; height: 0; }

/* App shell: coluna unica, centralizada no desktop (max-width ~430px) */
#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  height: 100dvh;
  background: var(--t-bg);
  position: relative;
  overflow: hidden;
}
@media (min-width: 600px) {
  body { background: radial-gradient(60% 40% at 50% 0%, #11203a, #070b12); }
  #app { min-height: 100dvh; max-height: 100dvh; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
}

/* ---- App bar (variante modulo, fonte-mobile:121-133) ---- */
#appHeader {
  flex-shrink: 0;
  height: calc(64px + var(--safe-top));
  padding: calc(18px + var(--safe-top)) var(--sp) 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--t-bg2);
  border-bottom: 1px solid var(--t-border);
  backdrop-filter: blur(10px);
  z-index: 20;
}
#appHeader .hdr-title {
  flex: 1;
  font-family: var(--t-font);
  font-weight: 700;
  font-size: var(--fs-title);
  color: var(--t-text);
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  border: none; background: transparent;
  border-radius: var(--r-icon);
  display: flex; align-items: center; justify-content: center;
  color: var(--t-text); cursor: pointer;
  transition: background 120ms;
}
.icon-btn:active { transform: scale(.96); }
.avatar-btn {
  width: 36px; height: 36px; flex-shrink: 0; border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--t-accent), #a78bfa);
  color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}
#backBtn[hidden] { display: none; }

/* ---- Main scroll content ---- */
#mainContent {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen { min-height: 100%; }

/* ---- Bottom nav (5 tabs, fonte-mobile:219-225) ---- */
#bottomNav {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 64px;
  padding-bottom: calc(8px + var(--safe-bottom));
  background: var(--t-bg2);
  border-top: 1px solid var(--t-border);
  backdrop-filter: blur(14px);
  z-index: 40;
}
#bottomNav .nav-i {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: var(--fs-nav); font-weight: 600;
  color: var(--t-text3);
  background: none; border: none; cursor: pointer;
  position: relative;
  transition: color 120ms;
  font-family: inherit;
}
#bottomNav .nav-i:active { transform: scale(.99); }
#bottomNav .nav-i.active { color: var(--t-primary); }
#bottomNav .nav-badge {
  position: absolute; top: -2px; right: 24px;
  background: var(--st-late-fg); color: #fff;
  font-size: 8px; font-weight: 700; padding: 0 5px; border-radius: 8px;
}

/* ---- FAB (fonte-mobile:113) ---- */
#fab {
  position: absolute;
  bottom: calc(84px + var(--safe-bottom));
  right: 18px;
  width: 54px; height: 54px; border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--t-primary), var(--t-primaryl));
  color: #fff; font-size: 28px; font-weight: 300;
  box-shadow: var(--sh-fab);
  cursor: pointer; z-index: 30;
  display: flex; align-items: center; justify-content: center;
}
#fab:active { transform: scale(.96); }

/* ---- Drawer (fonte-mobile:228-261) ---- */
#drawerOverlay {
  position: absolute; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .55);
  animation: fadein 200ms ease;
}
#drawer {
  position: absolute; top: 0; left: 0; bottom: 0; width: 282px; z-index: 71;
  background: var(--t-bg2);
  border-right: 1px solid var(--t-border);
  border-radius: 0 40px 40px 0;
  display: flex; flex-direction: column;
  box-shadow: 18px 0 50px rgba(0, 0, 0, .5);
  animation: drawerin 240ms cubic-bezier(.2, .8, .2, 1);
}
.drawer-head {
  padding: calc(22px + var(--safe-top)) 18px 14px;
  border-bottom: 1px solid var(--t-border);
  display: flex; align-items: center; gap: 11px;
}
.drawer-head .av {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--t-accent), #a78bfa);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.drawer-body { flex: 1; overflow-y: auto; padding: 6px 0; font-size: var(--fs-sm); color: var(--t-text2); }
.drawer-section {
  font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--t-text3); padding: 12px 18px 4px;
}
.drawer-body .nav-i {
  display: flex; align-items: center; gap: 11px; padding: 11px 18px;
  color: var(--t-text2); cursor: pointer; background: none; border: none;
  width: 100%; text-align: left; font: inherit;
}
.drawer-body .nav-i.active { color: var(--t-primary); font-weight: 600; }
.drawer-body .nav-i:active { opacity: .7; }
.dmenu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 11px 18px; }
.dmenu summary::-webkit-details-marker { display: none; }
.dmenu .dchev { margin-left: auto; opacity: .5; transition: transform 200ms cubic-bezier(.4, 0, .2, 1); }
.dmenu details[open] > summary .dchev { transform: rotate(180deg); }
.dmenu .leaf { padding: 8px 18px 8px 42px; cursor: pointer; }
.dmenu .leaf:active { opacity: .7; }
.drawer-foot { border-top: 1px solid var(--t-border); padding: 12px calc(12px + var(--safe-bottom)); }
/* SOS fixo (fonte-mobile:258-259) */
#sosBtn {
  width: 100%; padding: 12px; border: 1px solid #ef4444;
  background: linear-gradient(135deg, #dc2626, #7f1d1d);
  border-radius: var(--r-btn);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  cursor: pointer; animation: sosp 2.4s infinite;
}

/* ---- Theme sheet (fonte-mobile:265-281) ---- */
#themeOverlay { position: absolute; inset: 0; z-index: 80; background: rgba(0, 0, 0, .55); animation: fadein 200ms ease; }
#themeSheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 81;
  background: var(--t-bg2);
  border-radius: 24px 24px 0 0;
  padding: 18px 18px calc(26px + var(--safe-bottom));
  animation: sheetup 280ms cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 -16px 50px rgba(0, 0, 0, .5);
}
.sheet-grab { width: 40px; height: 4px; border-radius: 999px; background: var(--t-border); margin: 0 auto 16px; }
.sheet-title { font-size: 16px; font-weight: 700; color: var(--t-text); margin-bottom: 4px; }
.sheet-sub { font-size: 12px; color: var(--t-text3); margin-bottom: 16px; }
.theme-row {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  border-radius: 14px; background: var(--t-bg3); border: 1.5px solid transparent;
  cursor: pointer; margin-bottom: 9px; width: 100%; text-align: left; font: inherit;
}
.theme-row.sel { border-color: var(--t-primary); background: color-mix(in srgb, var(--t-primary) 12%, transparent); }
.theme-row .sw { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.18); }
.theme-row .lbl { flex: 1; font-size: 14px; font-weight: 600; color: var(--t-text); }
.theme-row .desc { font-size: 11px; color: var(--t-text3); font-weight: 400; }
.theme-row .chk { font-size: 16px; color: var(--t-primary); }

/* ---- Chrome de auth (login): esconde header/nav/fab ---- */
body.auth #appHeader, body.auth #bottomNav, body.auth #fab { display: none; }

[hidden] { display: none !important; }

/* ---- Toast (reuso de toast.js) ---- */
#toastContainer { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: 92%; max-width: 400px; pointer-events: none; }
.toast {
  background: var(--t-bg2); color: var(--t-text);
  border: 1px solid var(--t-border); border-radius: 12px;
  padding: 12px 16px; font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  display: flex; align-items: center; gap: 8px;
  animation: fadein 200ms ease;
}
.toast-success { border-left: 3px solid var(--st-ok); }
.toast-error { border-left: 3px solid var(--st-late-fg); }
.toast.out { opacity: 0; transition: opacity 300ms; }

/* ---- Animacoes (fonte-mobile:22-24) ---- */
@keyframes sheetup { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes drawerin { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes sosp { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); } 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } }