/* The page around the Compose canvas: full height, no page scroll, the app's paper colour while it loads. */
:root{--paper:#F6F1E7;--ink:#161E1C;--brand:#266B4F;--on-brand:#fff;--muted:#526158;
  --safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
@media(prefers-color-scheme:dark){:root{--paper:#161E1C;--ink:#F8F5EB;--muted:#C0CEC6}}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:system-ui,sans-serif}
body{position:fixed;inset:0}
/* Compose owns the safe areas, so headers can paint behind the status bar. */
#khatma-app{position:relative;width:100%;height:var(--viewport-height,100dvh);direction:ltr;padding:0}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:var(--paper);z-index:100;direction:rtl}
#loading img{width:96px;height:96px;object-fit:contain;border-radius:22px}
#loading[hidden]{display:none}
#loading p{font-size:16px;margin:0;padding:0 24px;text-align:center}
button{font:inherit;border:0;border-radius:12px;padding:10px 16px;cursor:pointer;background:var(--brand);color:var(--on-brand)}
button:focus-visible{outline:3px solid #C6A15B;outline-offset:2px}
.web-message{position:fixed;bottom:max(18px,var(--safe-bottom));left:16px;right:16px;margin:auto;max-width:560px;background:#203C34;color:#F8F5EB;border-radius:16px;box-shadow:0 6px 30px #0004;padding:12px 14px;display:flex;gap:12px;align-items:center;direction:rtl;z-index:100000;font-size:14px}
.web-message span{flex:1}
.web-message button{flex-shrink:0;padding:8px 14px}
.web-message .web-message-close{background:transparent;color:inherit;font-size:20px;padding:4px 8px}
noscript{display:block;padding:40px;text-align:center}