/* Copied from index.html by tools/seo/build_pages.py: the bottom bar and the Orella chat. Do not edit here. */
:root{--tabh:66px}
/* ---------- BOTTOM BAR: member · call · Orella ---------- */
.bar{position:fixed;z-index:50;left:12px;right:12px;bottom:calc(var(--sb) + 12px);max-width:430px;margin:0 auto;height:var(--tabh);display:flex;align-items:center;gap:7px;padding:7px;border-radius:999px;background:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 20px 40px -18px rgba(0,0,0,.6);opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) 1.7s,transform .9s var(--ease) 1.7s}
.bar.in{opacity:1;transform:none}
.bar-cta{flex:1;height:52px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:transform .35s var(--spring)}
.bar-cta:active,.bar-ic:active,.bar-or:active{transform:scale(.94)}
.bar-ic{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;transition:transform .35s var(--spring),background .3s}
.bar-ic:hover{background:rgba(255,255,255,.14)}
.bar-ic svg{width:20px;height:20px}
.bar-or{position:relative;flex:none;width:52px;height:52px;border-radius:50%;padding:3px;box-shadow:inset 0 0 0 2px var(--lime);transition:transform .35s var(--spring)}
.bar-or img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 15%}
.bar-or i{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;background:#34C759;border:2.5px solid var(--ink)}
/* ---------- ORELLA TIP ---------- */
.orella-tip{position:fixed;z-index:55;right:12px;bottom:calc(var(--tabh) + var(--sb) + 22px);display:flex;align-items:center;gap:6px;padding:10px 10px 10px 16px;border-radius:14px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;box-shadow:0 16px 30px -12px rgba(11,11,11,.45);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .4s var(--ease),transform .6s var(--ease)}
.orella-tip.show{opacity:1;transform:none;pointer-events:auto}
.orella-tip::after{content:"";position:absolute;bottom:-5px;right:var(--ax,30px);width:12px;height:12px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.orella-tip-text{cursor:pointer}
.orella-tip-text b{color:var(--lime);font-weight:600}
.orella-tip-close{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.5);font-size:16px;line-height:1}
/* ---------- ORELLA CHAT ---------- */
.orella-chat{position:fixed;bottom:calc(var(--tabh) + var(--sb) + 20px);right:16px;z-index:160;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 140px);background:var(--paper);border-radius:24px;box-shadow:0 30px 80px -20px rgba(11,11,11,.35),0 0 0 1px var(--line);display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(14px);transform-origin:bottom right;transition:opacity .3s var(--ease),transform .5s var(--ease);overflow:hidden}
.orella-chat.open{opacity:1;pointer-events:auto;transform:none}
body.orella-open{overflow:hidden;position:fixed;width:100%;touch-action:none}
.oc-header{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:var(--paper);border-bottom:1px solid var(--line);flex-shrink:0}
.oc-avatar{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--lime);flex-shrink:0}
.oc-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.oc-header-info{flex:1}
.oc-header-name{font-weight:700;font-size:15px}
.oc-header-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);font-weight:500}
.oc-header-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#34C759}
.oc-close{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink);transition:transform .35s var(--spring)}
.oc-close:active{transform:scale(.9)}
.oc-close svg{width:15px;height:15px}
.oc-messages{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:8px;min-height:0}
.oc-messages-spacer{flex:1 0 auto}
.oc-messages::-webkit-scrollbar{width:4px}
.oc-messages::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px}
.oc-msg{max-width:84%;padding:10px 14px;border-radius:18px;font-size:14.5px;line-height:1.5;word-break:break-word;animation:msgIn .4s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}}
.oc-msg.bot{background:#fff;align-self:flex-start;border-bottom-left-radius:6px;box-shadow:0 0 0 1px var(--line)}
.oc-msg.user{background:var(--ink);color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.oc-msg .oc-register-btn{display:inline-block;margin-top:10px;padding:9px 20px;background:var(--lime);color:var(--ink);font-weight:700;font-size:14px;border-radius:999px}
.oc-typing{align-self:flex-start;background:#fff;padding:12px 16px;border-radius:18px;border-bottom-left-radius:6px;display:none;gap:4px;box-shadow:0 0 0 1px var(--line)}
.oc-typing.show{display:flex}
.oc-typing span{width:6px;height:6px;background:var(--ink3);border-radius:50%;animation:oc-bounce .6s ease-in-out infinite}
.oc-typing span:nth-child(2){animation-delay:.15s}
.oc-typing span:nth-child(3){animation-delay:.3s}
@keyframes oc-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.oc-input-area{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line);flex-shrink:0}
.oc-input{flex:1;padding:10px 16px;border:1px solid var(--line2);border-radius:22px;font-size:15px;font-family:inherit;outline:none;transition:border-color .2s;resize:none;max-height:80px;line-height:1.4;background:#fff;color:var(--ink)}
.oc-input:focus{border-color:var(--ink)}
.oc-send{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;transition:transform .3s var(--spring);flex-shrink:0}
.oc-send:active{transform:scale(.9)}
.oc-send:disabled{opacity:.4;cursor:not-allowed}
.oc-send svg{width:18px;height:18px}
.oc-inline-form{align-self:flex-start;background:#fff;border-radius:18px;border-bottom-left-radius:6px;padding:14px;box-shadow:0 0 0 1px var(--line);max-width:86%;display:flex;flex-direction:column;gap:8px;animation:msgIn .4s var(--ease)}
.oc-inline-form-title{font-size:13px;font-weight:600;color:var(--ink2)}
.oc-inline-form input{padding:11px 14px;border:1px solid var(--line2);border-radius:12px;font-size:15px;font-family:inherit;outline:none;transition:border-color .2s;width:100%;background:var(--paper)}
.oc-inline-form input:focus{border-color:var(--ink);background:#fff}
.oc-inline-form button{padding:11px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;border-radius:999px}
@media(max-width:480px){.orella-chat{top:0;left:0;right:0;bottom:0;width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0;z-index:9999}.oc-header{padding-top:calc(14px + var(--st))}}
