/* OSSIA shared UI: header/footer source of truth */
:root { --ossia-green:#07543b; --ossia-green-2:#0b754b; --ossia-mint:#edf7f1; --ossia-ink:#13251d; --ossia-muted:#718279; --ossia-line:#e1ebe5; }
html, body { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",sans-serif !important; }
.ossia-mobile-page { width:100% !important; max-width:none !important; min-height:100% !important; margin:0 !important; padding:0 0 78px !important; background:#f4f8f5 !important; color:var(--ossia-ink) !important; }
/* Header on Home, Riwayat, Chat and Me is identical to the Me reference. */
.ossia-mobile-page > .om-topbar { position:sticky !important; top:0 !important; z-index:30 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; height:72px !important; min-height:72px !important; flex:0 0 72px !important; padding:0 15px !important; background:#fff !important; border:0 !important; border-bottom:1px solid #e8efea !important; box-shadow:none !important; }
.om-topbar .om-brand { display:flex !important; align-items:center !important; gap:10px !important; color:#07543b !important; font-size:17px !important; line-height:1.05 !important; font-weight:750 !important; }
.om-topbar .om-brand small { display:block !important; margin-top:3px !important; color:#718279 !important; font-size:10px !important; font-weight:450 !important; }
.om-topbar .om-logo { position:relative !important; display:grid !important; place-items:center !important; flex:0 0 38px !important; width:38px !important; height:38px !important; border-radius:11px !important; background:#07543b !important; color:#fff !important; font-size:21px !important; font-weight:750 !important; }
.om-topbar .om-logo i { position:absolute !important; top:-2px !important; right:-2px !important; width:9px !important; height:9px !important; border:2px solid #fff !important; border-radius:50% !important; background:#e9b52c !important; }
.om-topbar .om-icon-btn { position:relative !important; display:grid !important; place-items:center !important; flex:0 0 42px !important; width:42px !important; height:42px !important; padding:0 !important; border:1px solid #dce9e1 !important; border-radius:14px !important; background:#fff !important; color:#07543b !important; }
.om-topbar .om-icon-btn svg { width:19px !important; height:19px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.7 !important; stroke-linecap:round !important; stroke-linejoin:round !important; }
.om-topbar .om-icon-btn b { position:absolute !important; top:7px !important; right:7px !important; width:7px !important; height:7px !important; border:1px solid #fff !important; border-radius:50% !important; background:#e4544d !important; }
/* Child pages must not draw another footer. The only footer is #ossiaIndexNav in index.html. */
.mobile-nav { display:none !important; }
.ossia-mobile-page > .om-content { width:100% !important; max-width:none !important; margin:0 !important; padding:20px 15px 28px !important; }
.om-page-intro { margin:0 1px 18px !important; }
.om-page-intro .om-eyebrow, .om-welcome .om-eyebrow { color:#087b4b !important; font-size:10px !important; font-weight:800 !important; letter-spacing:1.1px !important; }
.om-page-intro h1 { color:#14251d !important; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif !important; font-size:23px !important; line-height:1.2 !important; font-weight:750 !important; margin:0 0 6px !important; }
.om-page-intro > p:last-child { color:#718279 !important; font-size:13px !important; }
/* Home and history stay clean and empty before the first upload. */
.home-page .om-content, .history-page .om-content { background:#f4f8f5 !important; }
/* Chat page layout matching the supplied Chat reference. */
.om-chat-page { display:flex !important; flex-direction:column !important; height:100% !important; min-height:100% !important; overflow:hidden !important; background:#f4f8f5 !important; }
.om-chat-page .om-chat-content { display:flex !important; flex:1 1 auto !important; flex-direction:column !important; min-height:0 !important; overflow:hidden !important; padding:16px 15px 10px !important; background:#f4f8f5 !important; }
.om-chat-page .om-chat-intro { flex:0 0 auto; margin:0 1px 16px; }
.om-chat-page .om-chat-intro .om-eyebrow { margin:0 0 6px; color:#087b4b; font-size:10px; font-weight:800; letter-spacing:1.1px; }
.om-chat-page .om-chat-intro h1 { margin:0 0 6px; color:#14251d; font-size:23px; line-height:1.2; font-weight:750; }
.om-chat-page .om-chat-intro p:last-child { margin:0; color:#718279; font-size:13px; line-height:1.45; }
.om-chat-page .om-chat-card { display:flex !important; flex:1 1 auto !important; flex-direction:column !important; min-height:0 !important; overflow:hidden !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
.om-chat-page .om-chat-box { display:flex !important; flex:1 1 auto !important; flex-direction:column !important; min-height:0 !important; overflow-y:auto !important; gap:10px !important; margin:0 0 10px !important; padding:2px 0 8px !important; background:transparent !important; border:0 !important; }
.om-chat-page .chat-bubble { display:flex !important; align-items:flex-start !important; gap:8px !important; max-width:94% !important; margin:3px 0 !important; }
.om-chat-page .chat-bubble.user { align-self:flex-end !important; flex-direction:row-reverse !important; margin-left:auto !important; }
.om-chat-page .chat-avatar { display:grid !important; place-items:center !important; flex:0 0 30px !important; width:30px !important; height:30px !important; border-radius:9px !important; background:#07543b !important; color:#fff !important; font-size:14px !important; }
.om-chat-page .chat-message { max-width:100% !important; padding:12px 13px !important; border:1px solid #e4eee8 !important; border-radius:17px 17px 17px 5px !important; background:#fff !important; color:#17251e !important; box-shadow:0 3px 12px rgba(10,55,34,.035) !important; font-size:13px !important; line-height:1.55 !important; overflow-wrap:anywhere !important; }
.om-chat-page .chat-bubble.user .chat-message { border:1px solid #d9f1e4 !important; border-radius:17px 17px 5px 17px !important; background:#ddf6e9 !important; color:#17251e !important; box-shadow:none !important; }
.om-chat-page .om-quick-text-card { display:none !important; }
.om-chat-page .om-chat-composer { display:flex !important; align-items:center !important; gap:8px !important; flex:0 0 auto !important; margin:0 !important; padding:7px !important; border:1px solid #e2ebe5 !important; border-radius:999px !important; background:#fff !important; box-shadow:0 4px 14px rgba(10,55,34,.06) !important; }
.om-chat-page .om-chat-composer input { flex:1 1 auto !important; min-width:0 !important; padding:10px 12px !important; border:1px solid #e7eee9 !important; border-radius:999px !important; background:#fbfdfb !important; color:#17251e !important; font-size:13px !important; }
.om-chat-page .om-chat-attach { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border:1px solid #e2ebe5; border-radius:50%; background:#f8fbf9; color:#718279; font-size:18px; }
.om-chat-page .om-chat-send { flex:0 0 38px !important; width:38px !important; height:38px !important; border-radius:50% !important; background:#08764b !important; color:#fff !important; font-size:16px !important; }
.om-chat-page .om-disclaimer { flex:0 0 auto; margin:8px 3px 0 !important; color:#829188 !important; font-size:10px !important; text-align:center; }
/* Me page: visual hierarchy and grouped rows from the supplied profile reference. */
.om-me-page .om-me-content { min-height:calc(100% - 72px) !important; padding:20px 15px 28px !important; background:#f4f8f5 !important; }
.om-me-page .om-page-intro { margin-bottom:13px !important; }
.om-me-page .om-page-intro h1 { color:#08764b !important; font-size:13px !important; letter-spacing:.6px !important; }
.om-me-page .om-custom-profile-card { display:flex !important; align-items:center !important; gap:12px !important; margin:0 0 14px !important; padding:13px !important; border:1px solid #e3ece6 !important; border-radius:18px !important; background:#fff !important; box-shadow:none !important; }
.om-me-page .om-custom-avatar { flex:0 0 58px !important; width:58px !important; height:58px !important; border:0 !important; background:#e4f5eb !important; }
.om-me-page .om-profile-details { display:flex !important; flex-direction:column !important; gap:3px !important; }
.om-me-page .om-badge-pill { padding:0 !important; margin:0 0 2px !important; border-radius:0 !important; background:transparent !important; color:#17251e !important; font-size:14px !important; letter-spacing:0 !important; }
.om-me-page .om-info-text { color:#52645a !important; font-size:10px !important; line-height:1.35 !important; }
.om-me-page .om-profile-menu { display:flex !important; flex-direction:column !important; gap:0 !important; margin:0 0 13px !important; padding:0 12px !important; border:1px solid #e3ece6 !important; border-radius:17px !important; background:#fff !important; }
.om-me-page .om-profile-menu button { display:flex !important; align-items:center !important; gap:11px !important; min-height:48px !important; width:100% !important; padding:8px 0 !important; border:0 !important; border-bottom:1px solid #edf2ee !important; border-radius:0 !important; background:transparent !important; color:#17251e !important; text-align:left !important; }
.om-me-page .om-profile-menu button:last-child { border-bottom:0 !important; }
.om-me-page .om-profile-menu-icon { display:grid !important; place-items:center !important; flex:0 0 22px !important; width:22px !important; height:22px !important; border-radius:0 !important; background:transparent !important; color:#62766b !important; font-size:16px !important; }
.om-me-page .om-profile-menu button>span:nth-child(2) { display:flex !important; flex:1 !important; flex-direction:column !important; gap:2px !important; }
.om-me-page .om-profile-menu strong { color:#17251e !important; font-size:12px !important; font-weight:550 !important; }
.om-me-page .om-profile-menu small { color:#718279 !important; font-size:10px !important; }
.om-me-page .om-profile-menu button>b { color:#687b70 !important; font-size:19px !important; }
.om-me-page .om-logout-btn { min-height:45px !important; margin:0 !important; border:1px solid #f2dddd !important; border-radius:14px !important; background:#fff !important; color:#dc3d36 !important; font-size:12px !important; }
@media (min-width:700px) { .ossia-mobile-page > .om-content { max-width:none !important; } }
@media (max-width:430px) { .ossia-mobile-page { min-height:100dvh !important; } .om-chat-page { height:100dvh !important; } }


/* FINAL CHAT POSITION FIX
   Chat was vertically centered by the legacy body flex layout from style.css.
   The parent index.html already supplies the phone frame and the only footer.
   Keep the Chat page at the top of the iframe, exactly like Home, Riwayat and Me.
*/
html:has(body.ossia-chat-document),
body.ossia-chat-document {
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  margin:0 !important;
}
body.ossia-chat-document {
  display:block !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#f4f8f5 !important;
}
body.ossia-chat-document > .om-chat-page {
  display:flex !important;
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 0 78px !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#f4f8f5 !important;
}
body.ossia-chat-document > .om-chat-page > .om-topbar {
  position:relative !important;
  top:auto !important;
  flex:0 0 72px !important;
  height:72px !important;
  min-height:72px !important;
}
body.ossia-chat-document > .om-chat-page > .om-chat-content {
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:16px 15px 10px !important;
  overflow:hidden !important;
  justify-content:flex-start !important;
}
body.ossia-chat-document .om-chat-card {
  flex:1 1 auto !important;
  min-height:0 !important;
  justify-content:flex-start !important;
}
body.ossia-chat-document .om-chat-box {
  flex:1 1 auto !important;
  min-height:0 !important;
  justify-content:flex-start !important;
}