/* frame.css */
/* ADDITIVE: Layered after app.css to fix device-frame clamping and overlay containment. */

/* ---- 1. Device Frame Clamp (Ground Truth) ------------------------------- */
/* Ensures the app shell and all fixed children stay within the 480px column. */
body {
  background: var(--panel2); /* Page gutter color */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* the PAGE must NOT scroll — only the inner regions (.feed, .chat-list) do.
     This rule loads AFTER app.css and was missing the lock, so the body grew to
     content height and produced the fat gutter scrollbar next to the column. */
  height: 100dvh;
  overflow: hidden;
}

.app {
  /* Clamp the shell to a mobile column and center it */
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  position: relative; /* Anchor for absolute-positioned overlays */
  background: var(--bg);
  box-shadow: 0 0 40px rgba(31, 20, 16, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent horizontal sprawl */
}

/* ---- 2. Overlay & Drawer Containment ------------------------------------ */
/* NOTE: the blanket `position: absolute !important` on overlays was removed
   (owner 2026-06-22) — it was the source of the shadow/clipping artifact under
   the header (an absolutely-positioned overlay anchored to .app cast/clipped
   against the scroll region). Overlays keep their own positioning from app.css;
   .app's `overflow: hidden` already clamps them inside the 480px frame. */

/* Drawer: slide from right, clamped to frame width */
.drawer {
  top: 0;
  right: 0;
  bottom: 0;
  width: 85%; /* Relative to the 480px frame */
  max-width: 400px;
  height: 100%;
}

/* Action Sheet: slide from bottom, clamped to frame width */
.action-sheet {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}

/* In-app Banner: centered within the 480px frame */
.inapp-banner {
  top: var(--pad-sm);
  left: var(--pad-sm);
  right: var(--pad-sm);
  width: auto;
  transform: none; /* Remove the translateX(-50%) from app.css */
  max-width: none;
}

/* Search Overlay: full frame coverage */
.search-overlay {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- 3. Utility Classes for Templates ----------------------------------- */

/* .app-clamp: A utility to wrap standalone fragments (like HTMX partials) 
   to ensure they inherit the frame width during direct rendering. */
.app-clamp {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* .overlay-within-frame: Utility to force any fixed child to respect .app boundaries */
.overlay-within-frame {
  position: absolute;
  max-width: 480px;
  left: 50%;
  transform: translateX(-50%);
}

/* ---- 4. Visual Polish & Contrast Fixes ---------------------------------- */

/* Increase contrast for Day Separators (Audit finding) */
.day-sep {
  background: var(--line) !important;
  color: var(--txt) !important;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Ensure the drawer body is scrollable while actions stay pinned */
.drawer {
  display: flex;
  flex-direction: column;
}
.drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer-actions {
  flex: 0 0 auto;
  background: var(--panel);
  padding-bottom: calc(var(--pad-md) + env(safe-area-inset-bottom, 0px));
}

/* Fix for the "Klik" vs "Lihat" touch affordance */
.cyc-detail-link:active, 
.chat-row:active, 
.launcher-tile:active {
  background: var(--panel2) !important;
  transition: background 0.1s ease;
}

/* Responsive: On very wide screens, darken the gutter to emphasize the frame */
@media (min-width: 1200px) {
  body {
    background: #E8D9C8; /* Deeper tone for desktop "desk" effect */
  }
}