/* The top right of the AxioCHAT main page (js/homebar.js): the language key, the dots key and the member's picture, and
   the card of every Dashboard feature the dots open. Every rule here is new and scoped to its own hb- names. */

/* ---------- the three keys: a little smaller than the menu key and centred on its line, as in his picture ---------- */
.tb .hb-keys{display:flex;align-items:center;gap:8px;flex:none}
.hb-keys > button{flex:none;transition:transform .12s,box-shadow .15s,background .15s}
.hb-keys > button:active{transform:scale(.94)}
.hb-lang{height:40px;padding:0 15px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px rgba(19,83,51,.22),0 4px 14px rgba(12,12,12,.06);color:var(--green);font-size:15px;line-height:40px;font-weight:700;white-space:nowrap}
.hb-lang[lang="ar"]{font-family:"TJ","PJS",system-ui,sans-serif;font-size:16px;letter-spacing:0;padding-top:1px}
.hb-lang[lang="en"]{font-family:"PJS","TJ",system-ui,sans-serif}
.hb-priv{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(12,12,12,.10),0 4px 14px rgba(12,12,12,.06);display:grid;place-items:center}
.hb-priv svg{display:block}
.hb-priv.on{background:var(--gold-soft);box-shadow:inset 0 0 0 1.6px var(--gold),0 4px 14px rgba(12,12,12,.06)}
.hb-dots{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.6px var(--gold),0 4px 14px rgba(12,12,12,.06);display:grid;place-items:center}
.hb-dots svg{display:block}
.hb-dots.on{background:var(--gold-soft)}
.hb-me{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0}
.hb-me .me-av{flex:none}
.hb-login{height:40px;padding:0 16px;border-radius:20px;background:var(--green);color:#fff;font-size:15px;line-height:40px;font-weight:700;white-space:nowrap;box-shadow:0 4px 14px rgba(19,83,51,.22)}
/* a wider finger area than the keys show */
.hb-keys > button{position:relative}
.hb-keys > button::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,48px);transform:translate(-50%,-50%);border-radius:inherit}
@media (max-width:340px){.tb .hb-keys{gap:6px}.hb-lang{padding:0 12px;font-size:14px}.hb-lang[lang="ar"]{font-size:15px}.hb-login{padding:0 13px;font-size:14px}}
/* About (js/homebar.js): the language pill's own look; Arabic a size up, as the pill's Arabic was */
html[lang=ar] .hb-about{font-size:16px;padding-top:1px}
.hb-about.on{background:var(--green-soft)}
@media (max-width:340px){html[lang=ar] .hb-about{font-size:15px}}
/* the About menu under the pill: Explore AxioraX's pages */
.hb-dim-menu{background:rgba(12,12,12,.08)}
.hb-menu{--hb-top:calc(var(--sat) + 74px);position:absolute;z-index:51;top:var(--hb-top);left:15.333px;width:min(272px,calc(100% - 30.667px));box-sizing:border-box;background:#fff;border-radius:24px;box-shadow:0 22px 60px rgba(12,12,12,.18),0 0 0 .5px rgba(12,12,12,.07);padding:7px;opacity:0;transform:translate3d(0,-8px,0) scale(.94);transform-origin:var(--hb-ox,50%) 0;transition:opacity .18s var(--ease),transform .28s cubic-bezier(.2,.9,.3,1.08)}
.hb-menu.on{opacity:1;transform:none}
.hb-mi{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:8px 10px;border-radius:17px;text-align:start;transition:background .15s,transform .12s}
.hb-mi:active{background:#F4F5F4;transform:scale(.98)}
.hb-mic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#F2F3F2;color:#262626;flex:none}
.hb-mic svg{display:block}
.hb-ml{flex:1;min-width:0;font-size:15.5px;line-height:21px;font-weight:600;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.hb-menu{transition:opacity .15s;transform:none}}

/* ---------- the card of every feature ---------- */
.hb-dim{position:absolute;inset:0;z-index:50;background:rgba(12,12,12,.14);opacity:0;transition:opacity .2s var(--ease)}
.hb-dim.on{opacity:1}
.hb-apps{--hb-top:calc(var(--sat) + 74px);position:absolute;z-index:51;top:var(--hb-top);inset-inline-end:15.333px;width:min(360px,calc(100% - 30.667px));max-height:calc(100% - var(--hb-top) - var(--sab) - 16px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;border-radius:28px;box-shadow:0 26px 70px rgba(12,12,12,.20),0 0 0 .5px rgba(12,12,12,.07);padding:16px 10px 12px;opacity:0;transform:translate3d(0,-8px,0) scale(.94);transform-origin:var(--hb-ox,85%) 0;transition:opacity .18s var(--ease),transform .28s cubic-bezier(.2,.9,.3,1.08)}
.hb-apps.on{opacity:1;transform:none}
/* the name never shortens: on a narrow phone the Lite and Advanced switch moves to its own line under it */
.hb-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 10px;min-height:34px;padding:0 8px 10px}
.hb-t{flex:0 0 auto;max-width:100%;font-size:17px;line-height:22px;font-weight:700;color:var(--ink);white-space:nowrap}
/* Lite and Advanced, the same switch as in the side menu */
.hb-mode{display:inline-grid;grid-template-columns:auto auto;gap:2px;padding:3px;border-radius:18px;background:#F1F2F1;flex:none}
.hb-mode button{position:relative;height:28px;padding:0 11px;border-radius:14px;font-size:13px;line-height:28px;font-weight:600;color:#6B6B6B;white-space:nowrap;transition:background .15s,color .15s}
.hb-mode button::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
.hb-mode button.on[data-hbmode="lite"]{background:var(--green);color:#fff;box-shadow:0 1px 3px rgba(19,83,51,.3)}
.hb-mode button.on[data-hbmode="advanced"]{background:var(--gold);color:var(--ink);box-shadow:0 1px 3px rgba(140,122,20,.32)}
.hb-sec{padding:12px 10px 4px;font-size:13px;line-height:18px;font-weight:600;color:var(--sub)}
.hb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 2px}
.hb-tile{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:9px 3px 8px;border-radius:18px;transition:background .15s,transform .12s}
.hb-tile:active{background:#F4F5F4;transform:scale(.96)}
.hb-ic{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);flex:none}
.hb-ic svg{display:block}
.hb-tile.gold .hb-ic{background:var(--gold-soft);color:var(--gold-ink)}
.hb-tile.grey .hb-ic{background:#F2F3F2;color:#262626}
/* two lines at most, and the same height for every name, so the icons of a row stay in one line */
.hb-l{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;min-height:33px;text-align:center;font-size:13px;line-height:16.5px;font-weight:600;color:#262626;overflow-wrap:break-word}
/* narrow phones: a little more room for the names, so a word is never cut in two */
@media (max-width:350px){.hb-apps{padding-inline:6px}.hb-tile{padding-inline:1px}.hb-l{font-size:12px;line-height:15.5px;min-height:31px}.hb-ic{width:50px;height:50px;border-radius:16px}}
.hb-foot{padding:10px 8px 2px}
.hb-foot .bp{height:48px}
@media (prefers-reduced-motion:reduce){.hb-apps{transition:opacity .15s;transform:none}}

/* My AX Card at the top of the card: the same way in as on Profile Settings, a little tighter */
.hb-axc{padding:0 4px 8px}
.hb-axc .axc-entry{margin:0;width:100%}

/* ---------- the greeting of a new chat (js/homebar.js, in the main page's .home-hero): the AxioraX mark, then the
   greeting with the member's title and first name, then one quiet line; the install offer sits under it ---------- */
.home-hero.hello .hello-mark{display:block;width:44px;margin-bottom:14px;animation:hbHi .5s var(--ease) both}
.home-hero.hello .hello-mark svg{display:block;width:100%;height:auto}
.home-hero.hello .hi{max-width:330px;font-size:26px;line-height:33px;font-weight:700;letter-spacing:-.015em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;animation:hbHi .5s .06s var(--ease) both}
.home-hero.hello .hs{margin-top:8px;font-size:16px;line-height:22px;color:var(--sub);animation:hbHi .5s .12s var(--ease) both}
html[dir=rtl] .home-hero.hello .hi{font-family:"TJ","PJS",system-ui,sans-serif;font-size:27px;line-height:37px;letter-spacing:0}
.home-hero.hello .hello-offer{margin-top:18px;pointer-events:auto}
.home-hero.hello .hello-offer:empty{display:none}
.home-hero.hello .hello-offer .instoffer{pointer-events:auto;margin-top:0}
@keyframes hbHi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.home-hero.hello *{animation:none!important}}

/* ---------- web addresses in messages (js/chat.js C.autolink): underlined, and long ones wrap inside the bubble ---------- */
.ans a.ul,.bubble a.ul{overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.bubble a.ul{color:inherit}
/* the app's typeface draws a hyphen between two numbers as a long dash (its contextual forms); in messages it stays a
   plain short hyphen, so page ranges in references (pp. 350-383) never look like a long dash */
.ans,.bubble{font-feature-settings:"calt" 0}