/* Mobile app mode (Capacitor shell). html.tc-app is set by /js/app-mode.js and
   never on the website. Rooms and DMs fill the screen like Discord channels;
   the selectors out-rank the !important mobile card rules in style.css
   (left:50%, bottom:70px, translateX(-50%)) and the inline left/top/width/
   height that _positionRoomModal / _positionDmModal write. */

html.tc-app .room-float-modal[id^="room-float-modal-"]:not(.room-float-minimized),
html.tc-app .dm-float-modal[id^="dm-float-modal-"]:not(.dm-float-minimized) {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  resize: none !important;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: tc-app-push .22s cubic-bezier(.2, .8, .2, 1) both !important;
  transition: none !important;
}

/* `translate`, not `transform`: the transform:none !important above would
   beat an animated transform. */
@keyframes tc-app-push {
  from { translate: 28% 0; opacity: 0; }
  to   { translate: 0 0; opacity: 1; }
}

/* No window chrome in the app: no drag/resize, maximize, full screen or
   minimize (back does that). Close stays: it leaves the room / ends the DM. */
html.tc-app .room-float-resize-handle,
html.tc-app .room-float-btn-maximize,
html.tc-app .room-float-btn-fullscreen,
html.tc-app .room-float-modal:not(.room-float-minimized) .room-float-btn-minimize,
html.tc-app .dm-float-modal:not(.dm-float-minimized) [id^="dm-float-minimize-btn-"] {
  display: none !important;
}
html.tc-app .room-float-modal:not(.room-float-minimized) .room-float-header,
html.tc-app .dm-float-modal:not(.dm-float-minimized) [id^="dm-float-header-"] {
  cursor: default;
  min-height: 52px;
  /* chat-modern.css rounds the header's top corners for the floating card;
     full-screen, they'd show as notches under the status bar. */
  border-radius: 0 !important;
}

/* Back button (injected first in the header) */
.tc-app-back { display: none; }
html.tc-app .room-float-modal:not(.room-float-minimized) .tc-app-back,
html.tc-app .dm-float-modal:not(.dm-float-minimized) .tc-app-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0 2px 0 -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.tc-app .tc-app-back:active { background: rgba(127, 127, 127, .22); }

/* While a conversation is on screen, the minimized pills would sit on top of
   its composer: hide them until the user goes back to the room list. */
html.tc-app-convo-open .room-float-modal.room-float-minimized,
html.tc-app-convo-open .dm-float-modal.dm-float-minimized {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Pills on the room list clear the gesture bar / home indicator. */
html.tc-app .room-float-modal.room-float-minimized,
html.tc-app .dm-float-modal.dm-float-minimized {
  margin-bottom: env(safe-area-inset-bottom, 0px);
}

/* The pills (z ~1e7) would float over an open drawer (z 1050) and cover its
   bottom menu buttons: hide them while either drawer is out. */
html.tc-app:has(#app-body.mobile-sidebar-open, #app-body.mobile-right-open) .room-float-modal.room-float-minimized,
html.tc-app:has(#app-body.mobile-sidebar-open, #app-body.mobile-right-open) .dm-float-modal.dm-float-minimized {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── System bars ────────────────────────────────────────────────────────────
   Android shells from 4.3.5 pad the WebView clear of the bars natively and
   report zero insets, so everything below is a no-op there. Older shells
   (and iOS) leave the page under the status bar and nav buttons and report
   the real insets through env(), so every surface that touches an edge has
   to clear them itself. */

/* The drawers are position:fixed from top:0, outside #app's padding, and
   style.css's mobile .sidebar-header safe-area rule is beaten by a later one. */
html.tc-app .sidebar .sidebar-header {
  padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}
html.tc-app .sidebar .mobile-panel-close:not(.mobile-panel-close-right) {
  top: calc(10px + env(safe-area-inset-top, 0px));
}
html.tc-app .right-sidebar {
  padding-top: env(safe-area-inset-top, 0px) !important;
}

/* The channel header pads itself for the status bar (style.css, mobile), and
   so does the room header: don't pad their containers too, or the gap doubles. */
html.tc-app #app {
  padding-top: 0 !important;
}
html.tc-app .room-float-modal[id^="room-float-modal-"]:not(.room-float-minimized) {
  padding-top: 0 !important;
}

/* Tap targets feel native: no grey flash, no long-press callout on chrome. */
html.tc-app button,
html.tc-app .room-float-header,
html.tc-app .channel-item {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ── App login (/login inside the app) ──────────────────────────────────────
   The website's landing page is marketing; in the app /login is just a sign-in
   screen: brand header (.tc-app-brand, injected by app-mode.js) over the
   existing auth card, which auth.js keeps driving unchanged (sign in, 2FA,
   recovery, register + terms gate). The decorative .lp-bg glow is dropped
   too: on a phone it reads as rounded corners against the system bars. */
html.tc-app body.landing .lp-nav,
html.tc-app body.landing .lp-hero-copy,
html.tc-app body.landing .lp-showcase,
html.tc-app body.landing .lp-section,
html.tc-app body.landing .lp-footer,
html.tc-app body.landing .lp-float,
html.tc-app body.landing .lp-lightbox,
html.tc-app body.landing .lp-bg,
html.tc-app body.landing .lp-view:not([data-view="home"]),
html.tc-app body.landing #mic-permission-block {
  display: none !important;
}
html.tc-app body.landing {
  min-height: 100vh;
  min-height: 100dvh;
}
html.tc-app body.landing #lp-main,
html.tc-app body.landing .lp-view[data-view="home"] {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
html.tc-app body.landing .lp-hero {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 22px;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 440px;
  margin: 0 auto !important;
  padding: 28px 16px 24px !important;
  box-sizing: border-box;
  grid-template-columns: none !important;
}
html.tc-app body.landing .lp-hero-auth {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  /* relative, not static: its ::before glow border is absolutely positioned
     and would otherwise stretch over the whole screen. */
  position: relative !important;
  transform: none !important;
}
html.tc-app body.landing .auth-card.lp-card {
  width: 100%;
  max-width: none;
  margin: 0;
}
html.tc-app body.landing .lp-card .auth-main {
  padding: 24px 20px 18px;
}

/* Looks like the desktop app's sign-in (tauri-native index.html .auth-header):
   logo beside a tracked TARACHAT wordmark, flat light background, teal
   accents, the form sitting directly on the page (no card, no heading). */
html.tc-app body.landing {
  --lp-bg: #e6e4e0;
  --lp-bg-2: #e6e4e0;
  --lp-surface: transparent;
  --lp-surface-2: #dcdad5;
  --lp-input: #e9e7e3;
  --lp-line: rgba(40, 40, 40, .12);
  --lp-line-strong: rgba(40, 40, 40, .18);
  --lp-ink: #2a2a2a;
  --lp-ink-2: #4a4a4a;
  --lp-muted: #6b6b6b;
  --lp-accent: #2a8fa3;
  --lp-accent-rgb: 42, 143, 163;
  --lp-accent-2: #45a5b6;
  --lp-on-accent: #fff;
  --lp-grad: linear-gradient(135deg, #21889d, #45a5b6);
  --lp-btn-grad: linear-gradient(135deg, #21889d, #45a5b6);
  --lp-shadow: none;
  background: #e6e4e0 !important;
}
html.tc-app body.landing .lp-hero-auth::before,
html.tc-app body.landing .lp-card-head {
  display: none !important;
}
html.tc-app body.landing .auth-card.lp-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html.tc-app body.landing .lp-card .auth-main {
  padding: 0 !important;
}
html.tc-app body.landing .lp-hero {
  justify-content: flex-start;
  padding-top: 40px !important;
  gap: 26px;
}
/* "Remember me" and "Forgot password?" share a row (app-mode.js moves the link). */
html.tc-app body.landing #login-form .form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
html.tc-app body.landing #login-form .form-options #forgot-password-show {
  color: var(--lp-ink-2) !important;
  font-size: 14px !important;
  font-weight: 500;
  text-decoration: none;
}
html.tc-app body.landing .age-verify-text svg {
  color: var(--lp-accent);
  stroke: var(--lp-accent);
}

.tc-app-brand { display: none; }
html.tc-app body.landing .tc-app-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  user-select: none;
  -webkit-user-select: none;
}
.tc-app-brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.tc-app-brand-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tc-app-brand-name {
  margin: 0;
  font-family: var(--lp-font-display, inherit);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .3em;
  background: linear-gradient(135deg, #21889d, #45a5b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.tc-app-brand-tag {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--lp-ink-2, currentColor);
}

/* The age / terms rows are flex, so their text, <strong> and links become
   separate columns on a phone; let the sentence wrap normally instead. */
html.tc-app body.landing .age-verify-text {
  display: block !important;
  line-height: 1.45;
}
html.tc-app body.landing .age-verify-text svg {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 4px;
}

/* The shared auth form (style.css) hardcodes white-on-dark text for the
   website's dark landing; on the app's flat light background it vanished.
   Re-ink every piece of it from the light palette above. */
html.tc-app body.landing {
  --auth-accent: #2a8fa3;
  --auth-accent-2: #45a5b6;
}
html.tc-app body.landing .auth-toggle {
  background: var(--lp-surface-2);
  border-color: var(--lp-line);
}
html.tc-app body.landing .toggle-btn { color: var(--lp-muted); }
html.tc-app body.landing .toggle-btn.active { color: #fff; }
html.tc-app body.landing .form-group.floating input {
  background: var(--lp-input);
  border-color: var(--lp-line-strong);
  color: var(--lp-ink);
}
html.tc-app body.landing .form-group.floating input:focus {
  background: #f2f1ee;
  border-color: var(--lp-accent);
  box-shadow: 0 0 0 3px rgba(var(--lp-accent-rgb), .15);
}
html.tc-app body.landing .form-group.floating label,
html.tc-app body.landing .form-group.floating input:not([type=hidden]):not(:placeholder-shown) ~ label {
  color: var(--lp-muted);
}
html.tc-app body.landing .form-group.floating input:not([type=hidden]):focus ~ label {
  color: var(--lp-accent);
}
html.tc-app body.landing .form-group.floating .input-icon,
html.tc-app body.landing .form-group.floating .password-toggle {
  color: var(--lp-ink-2);
  opacity: .6;
}
html.tc-app body.landing .form-group.floating input:not([type=hidden]):focus ~ .input-icon {
  color: var(--lp-accent);
  opacity: .9;
}
html.tc-app body.landing .form-group.floating .password-toggle:hover {
  background: var(--lp-line);
  opacity: .9;
}
html.tc-app body.landing .form-group.floating .input-hint,
html.tc-app body.landing .form-group.floating .input-hint.is-checking {
  color: var(--lp-muted) !important;
}
html.tc-app body.landing .remember-me { color: var(--lp-ink-2); }
html.tc-app body.landing .remember-me .checkmark,
html.tc-app body.landing .age-verify-checkmark {
  border-color: rgba(40, 40, 40, .32);
  background: #f2f1ee;
}
html.tc-app body.landing .remember-me input:checked + .checkmark,
html.tc-app body.landing .age-verify-row input:checked + .age-verify-checkmark {
  background: var(--lp-accent);
  border-color: var(--lp-accent);
}
html.tc-app body.landing .age-verify-text,
html.tc-app body.landing .age-verify-row input:checked ~ .age-verify-text {
  color: var(--lp-ink-2);
}
html.tc-app body.landing .age-verify-text strong { color: var(--lp-ink); }
html.tc-app body.landing .auth-version { color: var(--lp-muted); }

/* Sidebar bottom bar: the second Settings gear (desktop pop-out button) is
   redundant next to the ⚙️ icon, so the app drops it. */
html.tc-app #open-settings-btn {
  display: none !important;
}

/* Closing: app-room-modal.js / app-dm-modal.js add .room-float-slide-out /
   .dm-float-slide-out and only hide the window on `animationend`. The
   !important push animation above would swallow theirs (no animationend, the
   window never closes), so give the close its own animation. */
html.tc-app .room-float-modal[id^="room-float-modal-"].room-float-slide-out:not(.room-float-minimized),
html.tc-app .dm-float-modal[id^="dm-float-modal-"].dm-float-slide-out:not(.dm-float-minimized) {
  animation: tc-app-pop .18s ease-in both !important;
}
@keyframes tc-app-pop {
  from { translate: 0 0; opacity: 1; }
  to   { translate: 28% 0; opacity: 0; }
}