/* PharX shared design system
   Layout idea: calm mint paper, one deep-green "security print" moment (the sealed prescription).
   Type: Bricolage Grotesque for display, Readex Pro (Arabic + Latin, built for readability) for everything else. */
:root{
  --bg:#F2F6F3; --surface:#FFFFFF; --sunk:#E4ECE7; --ink:#0F201A; --muted:#52645B; --line:#D0DBD4;
  --green:#03704A; --green-ink:#03704A; --on-green:#FFFFFF; --green-soft:#D5EEE2; --mint:#3EAD7E;
  --band:#06402B; --on-band:#EAF7F0; --band-muted:#A9D8C1;
  --danger:#B42318; --on-danger:#FFFFFF; --danger-soft:#FBE6E3;
  --warn:#8A5206; --warn-soft:#FAEED6; --ok:#0B6E3F; --ok-soft:#DCF2E5;
  --cheque:#F6FBF8; --cheque-line:#BAD5C7; --bezel:#14201B;
  --px-ink:#0C1E14; --px-a:#03704A; --px-b:#3EAD7E;
  --rxpaper:#FFFDF6; --rxink:#1D2B4A; --scanglow:rgba(10,122,82,.28);
  --map-bg:#E6EDE8; --map-road:#FFFFFF; --map-minor:#D3DDD7; --map-water:#B9D7E8; --map-park:#CBE6D6;
  --shadow:rgba(15,32,26,.22); --scrim:rgba(6,14,11,.5);
  --f-display:'Bricolage Grotesque','Alexandria','Readex Pro',system-ui,sans-serif;
  --f-display-ar:'Alexandria','Readex Pro',system-ui,sans-serif;
  --f-body:'Readex Pro',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --f-hand:'Caveat','Bradley Hand','Segoe Print',cursive;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#09120F; --surface:#111C18; --sunk:#0C1612; --ink:#E5EEE9; --muted:#93A79E; --line:#22342D;
    --green:#45C895; --green-ink:#5AD3A3; --on-green:#041D14; --green-soft:#10342A; --mint:#2F9C72;
    --band:#0D2E22; --on-band:#E5F4EC; --band-muted:#8CC4AA;
    --danger:#FF8577; --on-danger:#2A0A06; --danger-soft:#3A1813;
    --warn:#F2B452; --warn-soft:#33250F; --ok:#56D495; --ok-soft:#0F2F1F;
    --cheque:#0F2119; --cheque-line:#2B4A3D; --bezel:#2A3A33;
    --px-ink:#E5EEE9; --px-a:#45C895; --px-b:#A6EBCF;
    --rxpaper:#E8E4D8; --rxink:#1D2B4A; --scanglow:rgba(69,200,149,.32);
    --map-bg:#0F1A16; --map-road:#25372F; --map-minor:#18271F; --map-water:#11303F; --map-park:#123327;
    --shadow:rgba(0,0,0,.6); --scrim:rgba(0,0,0,.62);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#09120F; --surface:#111C18; --sunk:#0C1612; --ink:#E5EEE9; --muted:#93A79E; --line:#22342D;
  --green:#45C895; --green-ink:#5AD3A3; --on-green:#041D14; --green-soft:#10342A; --mint:#2F9C72;
  --band:#0D2E22; --on-band:#E5F4EC; --band-muted:#8CC4AA;
  --danger:#FF8577; --on-danger:#2A0A06; --danger-soft:#3A1813;
  --warn:#F2B452; --warn-soft:#33250F; --ok:#56D495; --ok-soft:#0F2F1F;
  --cheque:#0F2119; --cheque-line:#2B4A3D; --bezel:#2A3A33;
  --px-ink:#E5EEE9; --px-a:#45C895; --px-b:#A6EBCF;
  --rxpaper:#E8E4D8; --rxink:#1D2B4A; --scanglow:rgba(69,200,149,.32);
  --map-bg:#0F1A16; --map-road:#25372F; --map-minor:#18271F; --map-water:#11303F; --map-park:#123327;
  --shadow:rgba(0,0,0,.6); --scrim:rgba(0,0,0,.62);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-text="lg"]{font-size:118.75%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased}
html[lang="ar"] body{line-height:1.75}
img,svg,canvas{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--green-ink);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
h1,h2,h3{text-wrap:balance}
/* Arabic headings get a display face made for Arabic */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .display,html[lang="ar"] .h2,html[lang="ar"] .m-h{font-family:var(--f-display-ar)}
p{text-wrap:pretty}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}
.skip{position:absolute;inset-inline-start:1rem;top:-6rem;z-index:100;background:var(--ink);color:var(--bg);padding:.75rem 1rem;border-radius:.625rem;font-weight:600;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + .75rem)}
[dir="rtl"] .flip{transform:scaleX(-1)}
.ltr{direction:ltr;unicode-bidi:isolate}

/* Demo notice */
.demo-bar{margin:0;background:var(--ink);color:var(--bg);font-size:.8125rem;line-height:1.4;text-align:center;padding:.5rem 1rem}

/* Logo */
.logo{display:block;height:2rem;width:auto}
.logo .px-ink{stroke:var(--px-ink)}
.logo .px-a,.mark .px-a{fill:var(--px-a)}
.logo .px-b,.mark .px-b{fill:var(--px-b)}
.logo .px-hl,.mark .px-hl{stroke:#FFFFFF}
.brandlink{display:inline-flex;align-items:center;text-decoration:none;color:inherit;border-radius:.5rem;flex:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.625rem 1.125rem;border-radius:.875rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:.9375rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .12s,background-color .15s,border-color .15s}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--green);color:var(--on-green);border-color:transparent}
.btn.primary:hover{border-color:transparent;filter:brightness(1.06)}
.btn.sm{min-height:2.25rem;padding:.4375rem .75rem;font-size:.8125rem;border-radius:.625rem}
.btn.lg{min-height:3.25rem;padding:.875rem 1.5rem;font-size:1.0625rem;border-radius:1rem}
.btn.block{width:100%}
.btn[disabled]{opacity:.65;cursor:default;transform:none}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btnrow{display:flex;flex-wrap:wrap;gap:.5rem}
.linkbtn{background:none;border:0;padding:.25rem 0;color:var(--green-ink);font-weight:600;font-size:.875rem;cursor:pointer;text-decoration:underline;text-underline-offset:.2em;justify-self:start}

/* Preference toggles */
.pref{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:2.5rem;min-width:2.5rem;padding:.375rem .8rem;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:.875rem;line-height:1;cursor:pointer;white-space:nowrap}
.pref:hover{border-color:var(--muted)}
.pref[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pref .aa{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:.3rem;font-weight:600;font-size:.75rem;line-height:1.1;padding:.375rem .625rem;border-radius:99px;white-space:nowrap}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.danger{background:var(--danger-soft);color:var(--danger)}
.chip.muted{background:var(--sunk);color:var(--muted)}
.chip.green{background:var(--green-soft);color:var(--green-ink)}

/* Sealed prescription (cheque) */
.cheque{position:relative;isolation:isolate;background:var(--cheque);color:var(--ink);border:1px solid var(--cheque-line);border-radius:1rem;overflow:hidden;padding:1rem 1.125rem .875rem;text-align:start}
.cheque canvas.g{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.ch-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-weight:600;font-size:.6875rem;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink)}
html[lang="ar"] .ch-top{letter-spacing:0;font-size:.8125rem}
.ch-serial{font-family:var(--f-mono);font-weight:500;letter-spacing:.04em;color:var(--ink);text-transform:none;font-size:.75rem}
.ch-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;margin-top:.875rem;align-items:start}
.ch-fields{display:grid;gap:.5rem;min-width:0}
.ch-field{display:grid;gap:.0625rem;font-size:.875rem;line-height:1.35}
.ch-field small{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
html[lang="ar"] .ch-field small{letter-spacing:0;font-size:.75rem}
.qr{width:4.75rem;height:4.75rem;display:block;border-radius:.25rem}
.qr-cap{font-weight:600;font-size:.625rem;text-align:center;color:var(--muted);margin-top:.375rem;letter-spacing:.12em;text-transform:uppercase}
html[lang="ar"] .qr-cap{letter-spacing:0;font-size:.75rem}
.ch-items{margin-top:.75rem;border-top:1px dashed var(--cheque-line);padding-top:.625rem;display:grid;gap:.3rem;font-size:.875rem}
.ch-items b{font-weight:600}
.ch-micr{margin-top:.75rem;font-family:var(--f-mono);font-size:.6875rem;color:var(--muted);letter-spacing:.06em;display:flex;justify-content:space-between;gap:.25rem .75rem;flex-wrap:wrap;direction:ltr}
.stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);border:3px double var(--danger);color:var(--danger);font-family:var(--f-display);font-weight:800;font-size:1.625rem;line-height:1;letter-spacing:.14em;padding:.55rem .9rem .4rem;border-radius:.5rem;text-align:center;background:var(--cheque);animation:stamp .4s cubic-bezier(.2,1.5,.4,1) both;white-space:nowrap}
html[lang="ar"] .stamp{letter-spacing:0;line-height:1.2}
.stamp small{display:block;font-family:var(--f-mono);font-weight:500;font-size:.625rem;letter-spacing:.04em;margin-top:.3rem}
@keyframes stamp{from{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(1.7)}to{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}
/* The stamp lands like real ink: a hard press, a worn texture, a ring of ink and a few specks */
.stamp{animation:stampSlam .6s cubic-bezier(.2,1.3,.35,1) both;background:transparent;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E")}
.stamp::before{content:"";position:absolute;inset:-.5rem;border-radius:.9rem;border:2px solid var(--danger);opacity:0;animation:inkRing .7s .28s ease-out both}
.stamp::after{content:"";position:absolute;inset:-1.4rem -1.8rem;pointer-events:none;opacity:0;animation:inkDots .3s .3s ease-out forwards;
  background:radial-gradient(circle at 6% 30%,var(--danger) 0 2px,transparent 2.5px),radial-gradient(circle at 94% 70%,var(--danger) 0 1.6px,transparent 2px),radial-gradient(circle at 88% 12%,var(--danger) 0 1.2px,transparent 1.6px),radial-gradient(circle at 14% 86%,var(--danger) 0 1.4px,transparent 1.8px),radial-gradient(circle at 50% 2%,var(--danger) 0 1px,transparent 1.4px)}
@keyframes stampSlam{0%{opacity:0;transform:translate(-50%,-50%) rotate(-26deg) scale(2.6)}55%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(.9)}78%{transform:translate(-50%,-50%) rotate(-13deg) scale(1.04)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}
@keyframes inkRing{0%{opacity:.55;transform:scale(.92)}100%{opacity:0;transform:scale(1.55)}}
@keyframes inkDots{to{opacity:.7}}
.cheque::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .52 0 0 0 0 .48 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
html[data-theme="dark"] .cheque::after{mix-blend-mode:screen;opacity:.18}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cheque::after{mix-blend-mode:screen;opacity:.18}}

/* Motion: reveals start hidden only below the first screen (set by PX.reveal) */
[data-reveal].pre{opacity:0;transform:translateY(1.75rem)}
[data-reveal].in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal="stagger"].pre{opacity:1;transform:none}
[data-reveal="stagger"].pre > *{opacity:0;transform:translateY(1.5rem)}
[data-reveal="stagger"].in > *{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*110ms),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*110ms)}
[data-spot]{position:relative;isolation:isolate}
[data-spot]::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(24rem circle at var(--mx,50%) var(--my,50%),var(--green-soft),transparent 62%);opacity:0;transition:opacity .35s;z-index:-1;pointer-events:none}
[data-spot]:hover::before{opacity:1}
@keyframes ping{to{transform:scale(2.6);opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}

/* Medicine autocomplete */
.cbx{position:relative;flex:1;min-width:0}
.cbx input{width:100%}
.cbx-list{position:absolute;inset-inline:0;top:calc(100% + .5rem);z-index:40;list-style:none;margin:0;padding:.375rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem;box-shadow:0 24px 48px -24px var(--shadow);max-height:19rem;overflow:auto;text-align:start}
.cbx-opt{display:grid;gap:.1rem;padding:.55rem .75rem;border-radius:.625rem;cursor:pointer;color:var(--ink)}
.cbx-opt b{font-weight:600;direction:ltr;unicode-bidi:isolate;justify-self:start}
.cbx-opt span{font-size:.8125rem;color:var(--muted)}
.cbx-opt[aria-selected="true"],.cbx-opt:hover{background:var(--green-soft)}

/* Maps */
.map{position:relative;width:100%;height:21rem;border-radius:1rem;overflow:hidden;background:var(--sunk);z-index:0}
.map-wait{display:grid;place-items:center;color:var(--muted);font-size:.9375rem}
.leaflet-container{font-family:var(--f-body)!important;direction:ltr;background:var(--sunk)!important}
.leaflet-control-attribution{font-size:.625rem!important;background:color-mix(in srgb,var(--surface) 85%,transparent)!important;color:var(--muted)!important}
.leaflet-control-attribution a{color:var(--green-ink)!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface)!important;color:var(--ink)!important;box-shadow:0 18px 40px -20px var(--shadow)!important;border-radius:1rem!important}
.leaflet-popup-content{margin:.75rem 1rem!important;font-size:.875rem;line-height:1.5;min-width:10rem}
.leaflet-popup-content b{display:block;font-size:.9375rem}
.leaflet-popup-content a{color:var(--green-ink)!important;font-weight:600}
.leaflet-bar a{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
.leaflet-bar{border:1px solid var(--line)!important;box-shadow:none!important;border-radius:.75rem!important;overflow:hidden}
.px-pin{background:none;border:0}
.px-pin i{display:block;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--muted);border:3px solid var(--surface);box-shadow:0 8px 16px -8px rgba(0,0,0,.6);animation:pindrop .55s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--d,0)*90ms)}
.px-pin.still i{animation:none}
.px-pin.in i{background:var(--ok)} .px-pin.order i{background:var(--warn)} .px-pin.out i{background:var(--muted)}
.px-pin.wait i{background:var(--surface);border-color:var(--muted)}
.px-pin.far{opacity:.35}
@keyframes pindrop{from{opacity:0;transform:translateY(-22px) rotate(-45deg)}to{opacity:1;transform:rotate(-45deg)}}
.px-me{background:none;border:0}
.px-me i{position:relative;display:block;width:18px;height:18px;border-radius:50%;background:var(--green);border:3px solid var(--surface);box-shadow:0 4px 10px -4px rgba(0,0,0,.6)}
.px-me i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green);animation:ping 1.8s ease-out infinite}
.px-wave{background:none;border:0;pointer-events:none}
.px-wave i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);margin-top:calc(var(--s) / -2);border-radius:50%;background:var(--green);animation:wave 1.8s ease-out infinite}
@keyframes wave{from{transform:scale(.04);opacity:.45}to{transform:scale(1);opacity:0}}
.leaflet-container path.zone{fill:var(--green);fill-opacity:.07;stroke:var(--green);stroke-opacity:.55;stroke-width:1.5}
.leaflet-container path.osm-ph{fill:var(--surface);fill-opacity:1;stroke:var(--ink);stroke-width:2.5}
.leaflet-container path.req-area{fill:var(--c-yday,#7A6BB8);fill-opacity:.22;stroke:var(--c-yday,#7A6BB8);stroke-width:1.5}
.leaflet-container path.req-area.new{animation:areaIn .8s cubic-bezier(.2,1.4,.4,1)}
@keyframes areaIn{from{fill-opacity:.6;stroke-width:6}to{fill-opacity:.22;stroke-width:1.5}}
.px-dark .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55)}
.map-legend{display:flex;flex-wrap:wrap;gap:.375rem 1rem;font-size:.8125rem;color:var(--muted)}
.map-legend span{display:inline-flex;align-items:center;gap:.4rem}
.map-legend i{width:.7rem;height:.7rem;border-radius:50%;display:inline-block;flex:none}

/* Drawn street map (hero phone, and the map wherever live tiles are blocked) */
.smap{display:block;width:100%;height:100%}
.smap .bg{fill:var(--map-bg)}
.smap .water{fill:none;stroke:var(--map-water);stroke-linecap:round}
.smap .park{fill:var(--map-park)}
.smap .minor{fill:none;stroke:var(--map-minor);stroke-width:4;stroke-linecap:round}
.smap .major{fill:none;stroke:var(--map-road);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.smap .zone{fill:var(--green);fill-opacity:.08;stroke:var(--green);stroke-opacity:.7;stroke-width:1.5;stroke-dasharray:5 5}
.smap .wave{fill:var(--green);transform-box:fill-box;transform-origin:center;animation:wave 2.4s ease-out infinite}
.smap .you{fill:var(--green);stroke:var(--surface);stroke-width:3.5}
.smap .pin path{stroke:var(--surface);stroke-width:2.5}
.smap .pin circle{fill:var(--surface)}
.smap .pin.in path{fill:var(--ok)} .smap .pin.order path{fill:var(--warn)} .smap .pin.out path{fill:var(--muted)} .smap .pin.wait path{fill:var(--surface);stroke:var(--muted)}
.smap .pin.far{opacity:.35}
.smap .pin > g{transform-box:fill-box;transform-origin:50% 100%;animation:smDrop .6s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--d,0s)}
.smap .pin.still > g{animation:none}
.smap .real{fill:var(--surface);stroke:var(--ink);stroke-width:2}
@keyframes smDrop{from{opacity:0;transform:translateY(-16px) scale(.6)}to{opacity:1;transform:none}}

/* Chat */
.chat-log{display:grid;gap:.5rem;align-content:start;padding:1rem;overflow-y:auto;overscroll-behavior:contain}
.bubble{max-width:82%;padding:.625rem .875rem;border-radius:1.125rem;font-size:.9375rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;animation:rise .3s ease-out both}
.bubble.me{justify-self:end;background:var(--green);color:var(--on-green);border-end-end-radius:.375rem}
.bubble.them{justify-self:start;background:var(--sunk);color:var(--ink);border-end-start-radius:.375rem}
.bubble small{display:block;font-size:.6875rem;opacity:.75;margin-top:.2rem}
.bubble .tag{display:inline-block;font-size:.625rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.8;margin-inline-start:.4rem}
.typing{justify-self:start;display:inline-flex;gap:.25rem;padding:.75rem .875rem;border-radius:1.125rem;background:var(--sunk)}
.typing i{width:.4rem;height:.4rem;border-radius:50%;background:var(--muted);animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.composer{display:flex;gap:.5rem;align-items:flex-end;padding:.625rem;border-top:1px solid var(--line);background:var(--surface)}
.composer textarea{flex:1;min-width:0;resize:none;min-height:2.75rem;max-height:8rem;border:1.5px solid var(--line);border-radius:1.375rem;background:var(--bg);padding:.625rem 1rem;font-size:1rem;line-height:1.4}
.composer textarea:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.composer .send{width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:var(--green);color:var(--on-green);display:grid;place-items:center;cursor:pointer;flex:none}
.composer .send svg{width:1.2rem;height:1.2rem}
.composer .send[disabled]{opacity:.5;cursor:default}
.quick{display:flex;gap:.375rem;overflow-x:auto;padding:.5rem 1rem 0;scrollbar-width:none}
.quick button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:99px;min-height:2.25rem;padding:.25rem .875rem;font-size:.8125rem;cursor:pointer;white-space:nowrap}
.badge{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:99px;background:var(--danger);color:var(--on-danger);font-size:.6875rem;font-weight:700;line-height:1}

/* Icon buttons in headers (theme, voice) */
.pref.icon{padding:.375rem;width:2.5rem}
.mic{width:2.5rem;height:2.5rem;border-radius:50%;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
.mic svg{width:1.2rem;height:1.2rem}
.mic:hover{color:var(--green-ink)}
.mic.on{background:var(--danger);color:var(--on-danger);animation:micPulse 1.2s infinite}
@keyframes micPulse{0%{box-shadow:0 0 0 0 var(--danger-soft)}70%{box-shadow:0 0 0 .6rem transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Medicine cards in chat */
.medcard{display:grid;gap:.55rem;min-width:13.5rem}
.medcard .mc{display:flex;gap:.625rem;align-items:center}
.mc-ico{width:2.25rem;height:2.25rem;border-radius:.75rem;display:grid;place-items:center;background:var(--surface);color:var(--green-ink);flex:none}
.mc-ico svg{width:1.15rem;height:1.15rem}
.bubble.me .mc-ico{background:var(--on-green);color:var(--green)}
.medcard b{display:block;font-weight:600;direction:ltr;unicode-bidi:isolate;text-align:start}
.medcard .mc span{font-size:.8125rem;opacity:.85}
.mc-btns{display:flex;flex-wrap:wrap;gap:.375rem}
.mc-btns .btn{min-height:2.1rem;padding:.3rem .7rem;font-size:.8125rem}
.bubble.me .mc-btns .btn:not(.primary){background:var(--on-green);color:var(--green);border-color:transparent}
.mc-wait{font-size:.75rem;opacity:.85}
.medcard .chip{justify-self:start}
.attach-btn{width:2.75rem;height:2.75rem;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--green-ink);display:grid;place-items:center;cursor:pointer;flex:none}
.attach-btn svg{width:1.2rem;height:1.2rem}
.attach-btn[aria-expanded="true"]{background:var(--green-soft);border-color:var(--green)}
.attach-panel{display:grid;gap:.5rem;padding:.75rem;border-top:1px solid var(--line);background:var(--bg);animation:rise .25s ease-out}
.attach-panel .ap-title{font-size:.8125rem;font-weight:600;color:var(--muted);margin:0}
.attach-panel .ap-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.attach-panel input{min-height:2.75rem;border:1.5px solid var(--line);border-radius:.875rem;background:var(--surface);padding:.5rem .875rem;font-size:1rem;width:100%}
.attach-panel input:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.attach-panel .cbx{flex:1 1 12rem}
.attach-panel .cbx-list{top:auto;bottom:calc(100% + .5rem)}
.attach-panel .price{flex:0 1 9rem}
.attach-panel .ap-err{margin:0;color:var(--danger);font-size:.8125rem;font-weight:600}
.attach-panel .ap-err:empty{display:none}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:99px;background:var(--surface)}
.qty button{width:2.5rem;height:2.5rem;border:0;background:none;font-size:1.2rem;font-weight:600;cursor:pointer;color:var(--ink);border-radius:50%}
.qty output{min-width:1.75rem;text-align:center;font-weight:600}

/* Two capsules meeting: used for interaction visuals */
.pillx{display:flex;align-items:center;justify-content:center;gap:.5rem;direction:ltr}
.cap{display:inline-flex;align-items:center;min-height:2.25rem;padding:.35rem .9rem;border-radius:99px;font-weight:600;font-size:.875rem;color:var(--ink);background:linear-gradient(90deg,var(--green-soft) 50%,var(--surface) 50%);border:1.5px solid var(--line);box-shadow:0 10px 20px -14px var(--shadow)}
.cap.b{background:linear-gradient(90deg,var(--surface) 50%,var(--warn-soft) 50%)}
.zap{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;background:var(--danger);color:var(--on-danger);flex:none;animation:zap 1.8s ease-in-out infinite}
.zap.caution{background:var(--warn);color:var(--surface)} .zap.none{background:var(--ok);color:var(--surface);animation:none} .zap.unknown{background:var(--muted);color:var(--surface);animation:none}
.zap svg{width:1.1rem;height:1.1rem}
@keyframes zap{0%,100%{transform:scale(1);box-shadow:0 0 0 0 var(--danger-soft)}50%{transform:scale(1.08);box-shadow:0 0 0 .5rem var(--danger-soft)}}
.pillx .cap.a{animation:capL .8s cubic-bezier(.2,1.3,.4,1) both}.pillx .cap.b{animation:capR .8s cubic-bezier(.2,1.3,.4,1) both}
@keyframes capL{from{transform:translateX(-1.5rem);opacity:0}}@keyframes capR{from{transform:translateX(1.5rem);opacity:0}}

/* 3D tilt helper */
[data-tilt]{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;animation-delay:0s!important;scroll-behavior:auto!important}
}

/* Help: "How can we help?" dialog, guided tour and first-visit tip (assets/pharx-help.js) */
.help-btn svg{width:1.15rem;height:1.15rem}
.help-btn{font-weight:600}
dialog.hp{width:min(36rem,calc(100vw - 1.5rem));max-height:min(46rem,calc(100dvh - 1.5rem));padding:0;border:1px solid var(--line);border-radius:1.5rem;background:var(--surface);color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;overflow:auto;overscroll-behavior:contain}
dialog.hp::backdrop{background:rgba(3,10,8,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.hp[open]{animation:hpIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes hpIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.hp-in{padding:1.5rem;display:grid;gap:1.25rem}
.hp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.hp-head h2{font-family:var(--f-display);font-weight:750;font-size:1.75rem;letter-spacing:-.025em;line-height:1.1;margin:0 0 .35rem}
html[lang="ar"] .hp-head h2{letter-spacing:0;font-family:var(--f-display-ar)}
.hp-head p{margin:0;color:var(--muted)}
.hp-x{flex:none;width:2.75rem;height:2.75rem;border-radius:99px;border:1px solid var(--line);background:var(--sunk);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.hp-x svg{width:1.2rem;height:1.2rem}
.hp-grp h3{font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink);margin:0 0 .5rem;font-weight:700}
html[lang="ar"] .hp-grp h3{letter-spacing:0;font-size:.95rem}
.hp-list{display:grid;gap:.5rem}
.hp-item{display:flex;align-items:center;gap:.9rem;width:100%;min-height:4rem;padding:.75rem .9rem;border-radius:1.1rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);text-decoration:none;text-align:start;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.hp-item:hover{border-color:var(--green);transform:translateY(-1px);box-shadow:0 14px 30px -22px var(--shadow)}
.hp-item[aria-pressed="true"]{border-color:var(--green);background:var(--green-soft)}
.hp-ico{flex:none;width:2.6rem;height:2.6rem;border-radius:.85rem;display:grid;place-items:center;background:var(--green-soft);color:var(--green-ink)}
.hp-ico svg{width:1.35rem;height:1.35rem}
.hp-t{flex:1;min-width:0;display:grid;gap:.1rem}
.hp-t b{font-weight:650;font-size:1.0625rem;line-height:1.25}
.hp-t small{color:var(--muted);font-size:.875rem;line-height:1.35}
.hp-go{flex:none;width:1.2rem;height:1.2rem;color:var(--muted)}
html[dir="rtl"] .hp-go{transform:scaleX(-1)}
.hp-safe{display:flex;gap:.6rem;align-items:flex-start;margin:0;padding:.85rem 1rem;border-radius:1rem;background:var(--ok-soft);color:var(--ink);font-size:.875rem}
.hp-safe svg{flex:none;width:1.25rem;height:1.25rem;color:var(--ok);margin-top:.1rem}
.tour{position:fixed;inset:0;z-index:2000}
.tour-spot{position:fixed;border-radius:1.25rem;box-shadow:0 0 0 200vmax rgba(3,10,8,.7),0 0 0 2px #45C895,0 0 40px 6px rgba(69,200,149,.45);transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.tour-card{position:fixed;width:min(22rem,calc(100vw - 1.5rem));padding:1.25rem;border-radius:1.25rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 30px 70px -24px rgba(0,0,0,.6);transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1)}
.tour-card h2{font-family:var(--f-display);font-weight:750;font-size:1.35rem;letter-spacing:-.02em;margin:.15rem 0 .4rem}
html[lang="ar"] .tour-card h2{letter-spacing:0;font-family:var(--f-display-ar)}
.tour-n{margin:0;font-size:.8rem;color:var(--green-ink);font-weight:700;letter-spacing:.04em}
.tour-p{margin:0 0 1rem;color:var(--muted)}
.tour-btns{display:flex;justify-content:space-between;gap:.5rem}
.hp-tip{position:fixed;z-index:60;width:min(18rem,calc(100vw - 1.5rem));padding:1rem;border-radius:1.1rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 26px 60px -24px rgba(0,0,0,.55);animation:hpIn .4s cubic-bezier(.2,.8,.2,1)}
.hp-tip p{margin:0 0 .75rem;font-weight:600}
@media (prefers-reduced-motion: reduce){dialog.hp[open],.hp-tip{animation:none}.tour-spot,.tour-card{transition:none}}


/* Smooth page transitions between PharX pages, and the circular theme switch (where the browser supports it) */
/* Guided demo: where the "finger" taps */
.px-tap{position:fixed;z-index:9999;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;background:rgba(69,200,149,.28);border:2px solid rgba(69,200,149,.95);box-shadow:0 0 0 6px rgba(69,200,149,.12);animation:pxTap .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes pxTap{0%{transform:scale(.55);opacity:0}25%{transform:scale(1);opacity:1}100%{transform:scale(1.45);opacity:0}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
html.theme-vt::view-transition-old(root),html.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-vt::view-transition-new(root){z-index:2}

/* Lite mode: lighter for older phones and slow connections */
html[data-perf="lite"]::view-transition-old(root),html[data-perf="lite"]::view-transition-new(root){animation:none}
html[data-perf="lite"] *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-perf="lite"] *,html[data-perf="lite"] *::before,html[data-perf="lite"] *::after{animation-iteration-count:1!important}
html[data-perf="lite"] .stamp{-webkit-mask-image:none;mask-image:none}
html[data-perf="lite"] .stamp::after,html[data-perf="lite"] .cheque::after{display:none}
@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.stamp,.stamp::before,.stamp::after{animation:none!important;opacity:1}.stamp::before{opacity:0}}

/* Secure code checks (pharmacy dashboard and scan page) */
.pxa-v{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;padding:1rem 1.1rem;border-radius:1rem;border:1px solid var(--line);background:var(--surface)}
.pxa-v b{display:block;font-family:var(--f-display);font-size:1.15rem;line-height:1.25}
.pxa-v p{margin:.25rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.5}
.pxa-v .btn{margin-top:.8rem}
.pxa-ic{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:var(--sunk);color:var(--muted)}
.pxa-ic svg{width:1.3rem;height:1.3rem}
.pxa-v.go{border-color:var(--ok);background:var(--ok-soft)}.pxa-v.go .pxa-ic{background:var(--ok);color:#fff}
.pxa-v.stop{border-color:#C9473D;background:rgba(201,71,61,.1)}.pxa-v.stop .pxa-ic{background:#C9473D;color:#fff}
.pxa-spin{width:1.2rem;height:1.2rem;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--green);animation:pxaSpin .9s linear infinite}
@keyframes pxaSpin{to{transform:rotate(360deg)}}
.pxa-who{display:grid;gap:.3rem;margin:.7rem 0 0;font-size:.88rem}
.pxa-who div{display:flex;gap:.6rem}.pxa-who dt{color:var(--muted);min-width:5.5rem}.pxa-who dd{margin:0;font-weight:600}
.pxa-sig{color:var(--green-ink)!important;font-weight:500}
.pxa-demo{font-size:.8rem!important}
.checkcard{display:grid;gap:.75rem;margin-bottom:1.25rem}
.chk-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chk-row input{flex:1 1 12rem;min-height:2.75rem;padding:.6rem .8rem;border-radius:.8rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;letter-spacing:.06em}
.chk-p{margin:0;font-size:.9rem;line-height:1.5}
.chk-video{width:100%;max-width:22rem;border-radius:1rem;background:#000}
.chk-tip{margin:0}
@media (prefers-reduced-motion: reduce){.pxa-spin{animation-duration:3s}}