/* ============================================================
   ar-page.css — shared nav / bottom-nav / Rhyssa FAB styles
   for standalone article and tool pages
   ============================================================ */

/* ── VARIABLES ── */
:root{
  --accent:#3DD6E8;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

/* ── NAV (top) ── */
nav:not(.bnav){position:fixed;top:0;left:0;right:0;z-index:800;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.5rem,5vw,4.5rem);background:linear-gradient(to bottom,rgba(3,18,30,.88),transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nl{display:flex;align-items:center;text-decoration:none;transition:opacity .3s}
.nl:hover{opacity:.75}
.nlinks{display:flex;gap:2.6rem;list-style:none}
.nlinks a{font-size:.63rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);text-decoration:none;transition:color .3s;position:relative}
.nlinks a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:rgba(61,214,232,.75);transition:width .35s var(--ease)}
.nlinks a:hover{color:rgba(255,255,255,.98)}
.nlinks a:hover::after{width:100%}
.nlinks a.active{color:rgba(61,214,232,.9)}
.nlinks a.active::after{width:100%}
.nbg{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:none;border:none;padding:5px;cursor:pointer}
.nbg span{display:block;height:1px;background:rgba(255,255,255,.4);transition:transform .36s var(--ease),opacity .22s,width .3s var(--ease);transform-origin:center}
.nbg span:nth-child(1){width:18px}
.nbg span:nth-child(2){width:12px}
.nbg.open span:nth-child(1){transform:translateY(6px) rotate(45deg);width:18px}
.nbg.open span:nth-child(2){transform:translateY(-6px) rotate(-45deg);width:18px}
.nmob{position:fixed;top:68px;left:0;right:0;z-index:799;background:rgba(6,16,13,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(139,189,210,.08);padding:0 clamp(1.5rem,5vw,4.5rem);max-height:0;overflow:hidden;pointer-events:none;transition:max-height .48s var(--ease),padding-top .35s,padding-bottom .35s}
.nmob.open{max-height:380px;padding-top:1.6rem;padding-bottom:2rem;pointer-events:all}
.nmob ul{list-style:none}
.nmob li{border-bottom:1px solid rgba(255,255,255,.05)}
.nmob li:last-child{border-bottom:none}
.nmob a{display:block;padding:.95rem 0;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.74);text-decoration:none;transition:color .25s,padding-left .3s var(--ease)}
.nmob a:hover{color:rgba(61,214,232,.96);padding-left:.5rem}

/* Match SPA nav padding reduction at mid-viewport widths */
@media(max-width:1024px){
  nav:not(.bnav){padding:0 clamp(1.1rem,3.5vw,2.2rem)}
}

/* Show hamburger at intermediate widths; bottom nav handles mobile */
@media(max-width:960px){
  .nlinks{display:none}
  .nbg{display:flex}
}

/* ── SETTINGS BUTTON ── */
.ar-settings-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:none;border:none;border-radius:50%;cursor:pointer;padding:0;color:rgba(139,189,210,.72);opacity:.52;transition:background .25s,opacity .3s;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.ar-settings-btn:hover{background:rgba(139,189,210,.1);opacity:.92}

/* ── BOTTOM NAV (PWA / mobile) ── */
.bnav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:850;height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(4,12,10,.97);border-top:1px solid rgba(139,189,210,.1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);flex-direction:row;align-items:stretch;justify-content:space-around;-webkit-user-select:none;user-select:none}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;text-decoration:none;color:rgba(255,255,255,.35);transition:color .22s var(--ease);position:relative;-webkit-tap-highlight-color:transparent}
.bnav-item::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%) scaleX(0);width:24px;height:2px;border-radius:0 0 3px 3px;background:var(--accent);transition:transform .3s var(--ease),opacity .22s;opacity:0}
.bnav-item.active{color:var(--accent)}
.bnav-item.active::before{transform:translateX(-50%) scaleX(1);opacity:1}
.bnav-icon,.bnav-item svg{width:22px;height:22px;flex-shrink:0}
.bnav-label,.bnav-item span{font-size:.48rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1}
@media(max-width:720px){
  .bnav{display:flex}
  .nbg{display:none!important}
  .nmob{display:none!important}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}
@media(display-mode:standalone){
  .bnav{display:flex}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* ── Rhyssa FAB ── */
@keyframes rh-fab-breathe{0%,100%{opacity:.18}50%{opacity:.32}}
.rh-fab{position:fixed;right:1rem;bottom:calc(56px + env(safe-area-inset-bottom) + .8rem);z-index:870;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 38% 32%,rgba(255,255,255,.08) 0%,transparent 52%),radial-gradient(ellipse at 50% 50%,rgba(61,214,232,.13) 0%,transparent 66%),rgba(6,18,14,.88);border:1.5px solid rgba(61,214,232,.38);color:rgba(61,214,232,.9);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;box-shadow:0 0 16px rgba(61,214,232,.13),0 6px 22px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.07);transition:border-color .25s,background .25s,transform .5s cubic-bezier(0.22,1.8,0.36,1),opacity .4s ease,box-shadow .3s;visibility:visible;will-change:transform}
.rh-fab:hover{border-color:rgba(61,214,232,.62);box-shadow:0 0 24px rgba(61,214,232,.2),0 6px 22px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.07)}
.rh-fab:active{transform:scale(.85)}
.rh-fab.active{border-color:rgba(61,214,232,.62);background:radial-gradient(ellipse at 38% 32%,rgba(255,255,255,.1) 0%,transparent 52%),radial-gradient(ellipse at 50% 50%,rgba(61,214,232,.2) 0%,transparent 66%),rgba(10,28,20,.96);box-shadow:0 0 28px rgba(61,214,232,.26),0 6px 22px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.09)}
.rh-fab-icon{flex-shrink:0}
.rh-fab-lbl{display:none}
.rh-fab.idle{animation:rh-fab-breathe 2.8s ease-in-out infinite}
.rh-fab.idle[data-side="right"]{transform:translateX(calc(100% - 14px))}
.rh-fab.idle[data-side="left"]{transform:translateX(calc(-100% + 14px))}
.rh-fab.snapping{transform:scale(.82)}
.rh-fab.dragging{transition:none!important;opacity:1!important;transform:none!important;animation:none!important;cursor:grabbing}

/* ── Backdrop ── */
.rh-backdrop{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.rh-backdrop.open{opacity:1;pointer-events:auto}

/* ── Bottom sheet ── */
.rh-sheet{position:fixed;inset:0;z-index:910;background:rgba(4,12,9,.99);border:none;border-radius:0;display:flex;flex-direction:column;overflow:hidden;transform:translateY(100%);transition:transform .38s var(--ease);will-change:transform}
.rh-sheet.open{transform:translateY(0)}
.rh-sheet-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.35rem;padding:calc(.75rem + env(safe-area-inset-top)) .75rem .75rem;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.rh-sheet-back{width:44px;height:44px;background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:12px;transition:color .2s,background .2s;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.rh-sheet-back:hover{color:rgba(255,255,255,.78);background:rgba(255,255,255,.07)}
.rh-sheet-title-group{text-align:center;justify-self:center;min-width:0;max-width:min(52vw,220px)}
.rh-sheet-head-end{display:flex;align-items:center;flex-shrink:0;justify-self:end}
.rh-sheet-kofi{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;text-decoration:none;transition:background .2s,transform .12s;-webkit-tap-highlight-color:transparent}
.rh-sheet-kofi:hover,.rh-sheet-kofi:focus-visible{background:rgba(61,214,232,.1)}
.rh-sheet-kofi:focus-visible{outline:2px solid rgba(61,214,232,.38);outline-offset:1px}
.rh-sheet-kofi:active{transform:scale(.94)}
.rh-sheet-kofi-svg{display:block}
.rh-sheet-name{font-family:var(--serif);font-size:1rem;font-weight:300;color:rgba(255,255,255,.86);display:block;line-height:1.1}
.rh-sheet-sub{font-size:.48rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.28);display:block;margin-top:.1rem}
.rh-sheet-thread{flex:1;overflow-y:auto;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.55rem;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.rh-sheet-thread .rh-bubble{border-left:none;border-radius:14px;max-width:82%;padding:.72rem .95rem}
.rh-sheet-thread .rh-bubble-you{align-self:flex-end;background:rgba(61,214,232,.13);border:1px solid rgba(61,214,232,.18)}
.rh-sheet-thread .rh-bubble-rh{align-self:flex-start;background:rgba(12,26,20,.9);border:1px solid rgba(255,255,255,.07);max-width:92%}
.rh-sheet-thread .rh-bubble-you .rh-bubble-who{text-align:right;color:rgba(61,214,232,.45)}
.rh-sheet-thread .rh-bubble p{font-size:.9rem;line-height:1.72;margin:0;color:rgba(235,240,236,.88)}
.rh-sheet-thread .rh-bubble-rh p{color:rgba(235,240,236,.85)}
.rh-bubble-body{margin:0}
.rh-bubble-body p+p{margin-top:.6rem}
.rh-bubble-body strong{font-weight:600;color:rgba(255,255,255,.96)}
.rh-bubble-body em{font-style:italic;opacity:.88}
.rh-sheet-thread .rh-typing{align-self:flex-start;background:rgba(12,26,20,.9);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:.65rem 1rem}
.rh-typing{display:flex;gap:.32rem;align-items:center;padding:.35rem 0 .1rem .05rem}
.rh-typing span{width:5px;height:5px;border-radius:50%;background:rgba(61,214,232,.45);animation:rh-pulse 1.2s ease-in-out infinite}
.rh-typing span:nth-child(2){animation-delay:.18s}
.rh-typing span:nth-child(3){animation-delay:.36s}
@keyframes rh-pulse{0%,80%,100%{transform:scale(.55);opacity:.4}40%{transform:scale(1);opacity:1}}
.rh-date-sep{display:flex;align-items:center;gap:.6rem;margin:.3rem 0;flex-shrink:0}
.rh-date-sep::before,.rh-date-sep::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07)}
.rh-date-sep span{font-size:.46rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.22);white-space:nowrap}
.rh-sheet-welcome{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.4rem .5rem .6rem;gap:.7rem}
.rh-sheet-welcome-txt{font-size:.88rem;line-height:1.68;color:rgba(235,240,236,.65);max-width:280px;margin:0;font-weight:300}
.rh-sheet-also{font-size:.5rem;color:rgba(255,255,255,.22);text-align:center;margin:.5rem 0 0;line-height:1.6}
.rh-sheet-also a{color:rgba(61,214,232,.4);text-decoration:none;transition:color .2s}
.rh-sheet-also a:hover{color:rgba(61,214,232,.75)}
.rh-sheet-foot{flex-shrink:0;border-top:1px solid rgba(255,255,255,.07);background:rgba(4,11,9,.97);padding:.6rem .85rem calc(.6rem + env(safe-area-inset-bottom))}
.rh-sheet-form{display:flex;align-items:flex-end;gap:.5rem}
.rh-sheet-inp{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.6rem .9rem;color:rgba(235,240,236,.92);font-size:.95rem;font-family:var(--sans);resize:none;max-height:120px;overflow-y:auto;line-height:1.5;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.rh-sheet-inp:focus{outline:none;border-color:rgba(61,214,232,.4)}
.rh-sheet-inp::placeholder{color:rgba(255,255,255,.2)}
.rh-sheet-send{flex-shrink:0;width:38px;height:38px;background:rgba(61,214,232,.18);border:1px solid rgba(61,214,232,.32);border-radius:11px;color:rgba(61,214,232,.9);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.rh-sheet-send:hover{background:rgba(61,214,232,.28);border-color:rgba(61,214,232,.55)}
.rh-sheet-send:disabled{opacity:.3;cursor:default}
.rh-sheet-note{font-size:.48rem;color:rgba(255,255,255,.18);text-align:center;margin:.4rem 0 0;line-height:1.5}
.rh-suggest-chips{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-top:.2rem;max-width:320px}
.rh-suggest-chip{background:rgba(61,214,232,.07);border:1px solid rgba(61,214,232,.2);color:rgba(61,214,232,.75);font-size:.7rem;font-family:var(--sans);padding:.35rem .75rem;border-radius:20px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-align:left;line-height:1.3}
.rh-suggest-chip:hover{background:rgba(61,214,232,.14);border-color:rgba(61,214,232,.4);color:rgba(61,214,232,.95)}

/* Desktop: panel anchored bottom-right */
@media(min-width:721px){
  .rh-fab{bottom:1.6rem;right:1.5rem}
  .rh-sheet{inset:auto;left:auto;right:1.5rem;bottom:0;width:400px;height:min(78vh,700px);border-radius:16px 16px 0 0;border-top:1px solid rgba(61,214,232,.13)}
  .rh-sheet-head{padding:.65rem .75rem .65rem}
  .rh-sheet-title-group{max-width:min(200px,46%)}
}
@media(display-mode:standalone){
  .rh-fab{bottom:calc(56px + env(safe-area-inset-bottom) + .8rem)}
}