/* NAVORA contact widget — styles for widget.js. Everything is namespaced `.navora-*`.
   The launcher follows the landing page palette (dark green panels, #c4e88b accents). */

.navora-launcher,
.navora-panel,
.navora-promo,
.navora-promo *,
.navora-body input,
.navora-body textarea {
    box-sizing: border-box;
}

/* -------------------------------------------------------------- welcome offer */

.navora-promo{
position:fixed;
right:35px;
bottom:107px;
width:326px;
max-width:calc(100vw - 70px);
padding:18px;
z-index:10000;
overflow:hidden;
border-radius:20px;
color:#f3f5ef;
font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
background:
radial-gradient(circle at 8% 0%,rgba(196,232,139,.18),transparent 38%),
linear-gradient(145deg,#17302f 0%,#09191a 72%);
border:1px solid rgba(196,232,139,.24);
box-shadow:0 26px 65px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(14px) scale(.97);
transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1),visibility .32s;
}

.navora-promo.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;}

.navora-promo::after{
content:"";
position:absolute;
width:130px;
height:130px;
right:-72px;
top:-76px;
border:1px solid rgba(196,232,139,.17);
border-radius:50%;
box-shadow:0 0 0 18px rgba(196,232,139,.025),0 0 0 38px rgba(196,232,139,.018);
pointer-events:none;
}

.navora-promo-close{
position:absolute;top:9px;right:10px;z-index:2;width:28px;height:28px;padding:0;border:0;border-radius:50%;
background:transparent;color:rgba(243,245,239,.55);font:20px/1 system-ui;cursor:pointer;
transition:background .2s,color .2s;
}
.navora-promo-close:hover,.navora-promo-close:focus-visible{background:rgba(255,255,255,.08);color:#fff;}

.navora-promo-mark{
display:flex;align-items:flex-start;width:max-content;color:#c4e88b;line-height:.8;margin-bottom:14px;
text-shadow:0 0 28px rgba(196,232,139,.18);
}
.navora-promo-mark span{font-size:46px;font-weight:750;letter-spacing:-.07em;}
.navora-promo-mark small{font-size:19px;font-weight:700;margin:2px 0 0 4px;}
.navora-promo-eyebrow{display:block;margin-bottom:5px;color:#c4e88b;font-size:9px;font-weight:700;letter-spacing:.18em;}
.navora-promo-copy strong{display:block;font-size:18px;line-height:1.22;letter-spacing:-.015em;}
.navora-promo-copy p{margin:7px 0 14px;color:rgba(243,245,239,.63);font-size:12px;line-height:1.45;}

.navora-promo-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;}
.navora-promo-email{
min-width:0;width:100%;padding:10px 11px;border-radius:11px;border:1px solid rgba(211,232,215,.16);
outline:0;background:rgba(255,255,255,.055);color:#fff;font-family:inherit;font-size:12px;line-height:1.3;
transition:border-color .2s,box-shadow .2s,background .2s;
}
.navora-promo-email::placeholder{color:rgba(243,245,239,.36);}
.navora-promo-email:focus{border-color:rgba(196,232,139,.55);background:rgba(255,255,255,.075);box-shadow:0 0 0 3px rgba(196,232,139,.08);}
.navora-promo-submit{
padding:10px 13px;border:0;border-radius:11px;background:#c4e88b;color:#13201a;
font-family:inherit;font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap;cursor:pointer;transition:background .2s,transform .2s,opacity .2s;
}
.navora-promo-submit:hover,.navora-promo-submit:focus-visible{background:#d8f6aa;transform:translateY(-1px);}
.navora-promo-submit:disabled{opacity:.6;cursor:wait;transform:none;}
.navora-promo-status{min-height:0;margin:10px 0 0;color:#c4e88b;font-size:11px;line-height:1.4;}
.navora-promo-status:empty{display:none;}
.navora-promo-status[data-kind="error"]{color:#ffb4a8;}
.navora-promo.success .navora-promo-mark{margin-bottom:8px;}

@media (prefers-reduced-motion:reduce){.navora-promo{transform:none;transition:opacity .2s linear,visibility .2s;}}

/* ------------------------------------------------------------------ launcher
   Collapsed state: a disc in the site's own accent green — the same colour as the
   page's primary buttons — with a thin dark monoline envelope. Add
   data-theme="panel" to the script tag for the darker card variant instead. */

.navora-launcher{
position:fixed;
right:35px;
bottom:35px;
width:58px;
height:58px;
padding:0;
border-radius:50%;
display:grid;
place-items:center;
background:#c4e88b;
border:1px solid rgba(7,21,22,.28);
color:#152317;
cursor:pointer;
z-index:9999;
box-shadow:0 16px 38px rgba(0,0,0,.5), 0 0 0 7px rgba(196,232,139,.07);
transition:background .25s, transform .25s, box-shadow .25s;
}

.navora-launcher:hover,
.navora-launcher:focus-visible{
background:#d6f4a9;
transform:translateY(-3px);
box-shadow:0 20px 46px rgba(0,0,0,.5), 0 0 0 9px rgba(196,232,139,.12);
}

/* data-theme="panel": dark card colours, accent green icon. */
.navora-launcher-panel{
background:linear-gradient(135deg,#142626,#0d1d1e);
border-color:rgba(211,232,215,.16);
color:#c4e88b;
box-shadow:0 18px 44px rgba(0,0,0,.45);
}

.navora-launcher-panel:hover,
.navora-launcher-panel:focus-visible{
background:linear-gradient(135deg,#182c2c,#0f2324);
border-color:rgba(196,232,139,.6);
box-shadow:0 22px 54px rgba(0,0,0,.5), 0 0 26px rgba(196,232,139,.16);
}

.navora-launcher-icon{
width:26px;
height:26px;
fill:none;
stroke:currentColor;
stroke-width:1.3;
stroke-linecap:round;
stroke-linejoin:round;
}

/* the three dots inside the chat bubble are filled, not stroked */
.navora-launcher-icon .navora-dot{
fill:currentColor;
stroke:none;
}

/* Notification badge: a red count of unread answers, or a red dot while the invitation is up.
   The ring follows whatever the launcher sits on, so the badge reads cleanly on both themes. */
.navora-badge{
--navora-badge-ring:#c4e88b;
position:absolute;
top:-3px;
right:-3px;
min-width:20px;
height:20px;
padding:0 5px;
border-radius:10px;
background:#ff4a4a;
color:#fff;
font:650 11px/20px 'DM Sans',system-ui,-apple-system,sans-serif;
text-align:center;
box-shadow:0 0 0 3px var(--navora-badge-ring), 0 6px 14px rgba(0,0,0,.45);
animation:navora-badge-in .34s cubic-bezier(.22,1,.36,1) both,
          navora-badge-pulse 2.4s ease-in-out .4s infinite;
}

.navora-launcher-panel .navora-badge{
--navora-badge-ring:#0d1d1e;
box-shadow:0 0 0 3px var(--navora-badge-ring), 0 0 14px rgba(255,74,74,.45);
}

.navora-badge[data-mode="dot"]{
min-width:12px;
width:12px;
height:12px;
padding:0;
font-size:0;
line-height:12px;
border-radius:50%;
}

.navora-badge[hidden]{
display:none;
}

@keyframes navora-badge-in{
from{transform:scale(0);}
to{transform:scale(1);}
}

/* A slow, quiet heartbeat: just enough motion to catch the eye out of the corner of one's own. */
@keyframes navora-badge-pulse{
0%,74%,100%{
transform:scale(1);
box-shadow:0 0 0 3px var(--navora-badge-ring), 0 6px 14px rgba(0,0,0,.45);
}
84%{
transform:scale(1.14);
box-shadow:0 0 0 3px var(--navora-badge-ring), 0 0 16px 3px rgba(255,74,74,.6);
}
}

/* ---------------------------------------------------------------- invitation
   The teaser card: glass over the page, quick actions as floating cards, and a
   fade + slide entrance. It sits just above the launcher and never overlaps the panel. */

.navora-invite{
position:fixed;
right:35px;
bottom:107px;
width:338px;
max-width:calc(100vw - 70px);
padding:18px 18px 16px;
border-radius:22px;
z-index:9998;
color:#eff1e9;
font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
background:linear-gradient(160deg,rgba(22,44,44,.72),rgba(7,19,20,.66));
-webkit-backdrop-filter:blur(18px) saturate(150%);
backdrop-filter:blur(18px) saturate(150%);
border:1px solid rgba(211,232,215,.18);
box-shadow:0 26px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
opacity:0;
transform:translateY(16px) scale(.97);
visibility:hidden;
pointer-events:none;
transition:opacity .34s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.22,1,.36,1), visibility .34s;
}

.navora-invite.open{
opacity:1;
transform:none;
visibility:visible;
pointer-events:auto;
}

/* The card itself fades and slides up (above); its pieces follow in a short stagger, so the
   popup assembles itself instead of landing all at once. */
.navora-invite-head,
.navora-invite-text,
.navora-invite-actions,
.navora-invite-composer,
.navora-invite-hint{
opacity:0;
transform:translateY(8px);
transition:opacity .38s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1);
}

.navora-invite.open .navora-invite-head,
.navora-invite.open .navora-invite-text,
.navora-invite.open .navora-invite-actions,
.navora-invite.open .navora-invite-composer,
.navora-invite.open .navora-invite-hint{
opacity:1;
transform:none;
}

.navora-invite.open .navora-invite-head{transition-delay:.05s;}
.navora-invite.open .navora-invite-text{transition-delay:.1s;}
.navora-invite.open .navora-invite-actions{transition-delay:.15s;}
.navora-invite.open .navora-invite-composer{transition-delay:.2s;}
.navora-invite.open .navora-invite-hint{transition-delay:.24s;}

.navora-invite-close{
position:absolute;
top:10px;
right:12px;
width:26px;
height:26px;
padding:0;
border:0;
border-radius:50%;
background:transparent;
color:rgba(239,241,233,.6);
font-size:19px;
line-height:1;
cursor:pointer;
transition:background .2s, color .2s;
}

.navora-invite-close:hover{
background:rgba(255,255,255,.09);
color:#eff1e9;
}

.navora-invite-head{
display:flex;
align-items:center;
gap:11px;
padding-right:26px;
}

.navora-invite-avatar{
flex:0 0 auto;
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:50%;
background:rgba(196,232,139,.14);
border:1px solid rgba(196,232,139,.45);
color:#c4e88b;
font-size:17px;
font-weight:600;
}

.navora-invite-id b{
display:block;
font-size:14px;
font-weight:600;
letter-spacing:.02em;
}

.navora-invite-id small{
display:flex;
align-items:center;
gap:6px;
margin-top:3px;
font-size:11px;
color:rgba(239,241,233,.62);
}

.navora-online{
width:6px;
height:6px;
border-radius:50%;
background:#c4e88b;
box-shadow:0 0 10px rgba(196,232,139,.8);
}

.navora-invite-text{
margin:13px 0 0;
font-size:14px;
line-height:1.5;
color:rgba(239,241,233,.92);
}

.navora-invite-actions{
display:grid;
gap:8px;
margin-top:14px;
}

.navora-invite-action{
display:grid;
grid-template-columns:1fr auto;
grid-template-areas:"label arrow" "note arrow";
align-items:center;
gap:0 10px;
width:100%;
padding:11px 14px;
text-align:left;
cursor:pointer;
border-radius:14px;
border:1px solid rgba(211,232,215,.16);
background:rgba(255,255,255,.05);
color:#eff1e9;
font:inherit;
transition:background .2s, border-color .2s, transform .2s;
}

.navora-invite-action:hover,
.navora-invite-action:focus-visible{
background:rgba(196,232,139,.12);
border-color:rgba(196,232,139,.5);
transform:translateY(-2px);
}

.navora-invite-action-label{
grid-area:label;
font-size:13px;
font-weight:550;
}

.navora-invite-action-note{
grid-area:note;
font-size:11px;
color:rgba(239,241,233,.55);
}

.navora-invite-action-arrow{
grid-area:arrow;
font-size:15px;
color:#c4e88b;
}

/* ------------------------------------------------------------- invite composer
   The bottom row is the real thing: one input and a round send button. Nothing
   has to be chosen first — a visitor can type straight away and send. */

.navora-invite-composer{
display:flex;
align-items:center;
gap:8px;
margin-top:12px;
padding:5px 5px 5px 14px;
border-radius:16px;
border:1px solid rgba(211,232,215,.16);
background:rgba(255,255,255,.05);
transition:background .2s, border-color .2s, box-shadow .2s;
}

.navora-invite-composer:focus-within{
background:rgba(255,255,255,.08);
border-color:rgba(196,232,139,.5);
box-shadow:0 0 0 3px rgba(196,232,139,.1);
}

.navora-invite-input{
flex:1 1 auto;
min-width:0;
padding:8px 0;
border:0;
background:transparent;
color:#eff1e9;
font:inherit;
font-size:13.5px;
line-height:1.4;
outline:none;
}

.navora-invite-input::placeholder{
color:rgba(239,241,233,.45);
}

.navora-invite-send{
flex:0 0 auto;
width:36px;
height:36px;
padding:0;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid rgba(196,232,139,.45);
background:rgba(196,232,139,.14);
color:#c4e88b;
cursor:pointer;
transition:background .2s, color .2s, border-color .2s, transform .2s, opacity .2s;
}

.navora-invite-send svg{
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:1.6;
stroke-linecap:round;
stroke-linejoin:round;
}

.navora-invite-send:hover:not(:disabled),
.navora-invite-send:focus-visible:not(:disabled){
background:#c4e88b;
border-color:#c4e88b;
color:#152317;
transform:translateY(-1px);
}

.navora-invite-send:disabled{
opacity:.45;
cursor:default;
}

.navora-invite-hint{
margin:12px 0 0;
font-size:10.5px;
letter-spacing:.04em;
text-transform:lowercase;
color:rgba(239,241,233,.45);
}

.navora-invite-hint:empty{
display:none;
}

@media (prefers-reduced-motion: reduce){
.navora-invite{
transform:none;
transition:opacity .2s linear, visibility .2s;
}
.navora-invite-head,
.navora-invite-text,
.navora-invite-actions,
.navora-invite-composer,
.navora-invite-hint{
opacity:1;
transform:none;
transition:none;
}
.navora-badge{
animation:none;
}
}

/* --------------------------------------------------------------------- panel */

.navora-panel{
position:fixed;
right:35px;
bottom:130px;
width:390px;
max-width:calc(100vw - 70px);
height:520px;
max-height:calc(100vh - 160px);
display:flex;
flex-direction:column;
background:linear-gradient(180deg,#071e30,#030b13);
border-radius:28px;
border:1px solid rgba(80,190,255,.3);
color:white;
overflow:hidden;
opacity:0;
transform:translateY(30px) scale(.95);
pointer-events:none;
visibility:hidden;
transition:opacity .35s, transform .35s, visibility .35s;
z-index:9999;
font-family:Arial,Helvetica,sans-serif;
box-shadow:0 30px 80px rgba(0,20,40,.5);
}

.navora-panel.open{
opacity:1;
transform:none;
pointer-events:auto;
visibility:visible;
}

.navora-header{
flex:0 0 auto;
padding:20px;
background:#08263a;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}

.navora-header b{
letter-spacing:.12em;
}

.navora-header small{
display:block;
opacity:.6;
margin-top:5px;
}

.navora-close{
background:none;
border:0;
color:white;
font-size:24px;
line-height:1;
cursor:pointer;
padding:0 2px;
}

.navora-body{
flex:1;
min-height:0;
padding:20px;
display:flex;
flex-direction:column;
}

/* ------------------------------------------------------------------ messages */

.navora-thread{
flex:1;
min-height:0;
display:flex;
flex-direction:column;
gap:10px;
overflow-y:auto;
padding-right:4px;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:rgba(120,200,255,.35) transparent;
}

.navora-thread::-webkit-scrollbar{
width:6px;
}

.navora-thread::-webkit-scrollbar-thumb{
background:rgba(120,200,255,.3);
border-radius:3px;
}

.navora-bubble{
max-width:84%;
margin-bottom:0;
padding:12px 14px;
border-radius:16px;
font-size:14px;
line-height:1.5;
white-space:pre-wrap;
overflow-wrap:anywhere;
}

.navora-in{
align-self:flex-start;
border-bottom-left-radius:6px;
}

.navora-out{
align-self:flex-end;
border-bottom-right-radius:6px;
background:#008cff;
}

.navora-pending{
opacity:.55;
}

.navora-message{
background:rgba(30,75,95,.55);
padding:16px;
border-radius:16px;
margin-bottom:0;
line-height:1.5;
}

/* ------------------------------------------------------------------ composer */

.navora-composer{
flex:0 0 auto;
padding-top:14px;
}

.navora-body input,
.navora-body textarea{
display:block;
width:100%;
margin-bottom:10px;
padding:12px;
border-radius:12px;
border:1px solid rgba(100,210,255,.25);
background:#091722;
color:white;
font:inherit;
}

.navora-body input::placeholder,
.navora-body textarea::placeholder{
color:rgba(255,255,255,.45);
}

.navora-body input:focus,
.navora-body textarea:focus{
outline:none;
border-color:rgba(100,210,255,.7);
}

.navora-body textarea{
height:90px;
resize:none;
}

.navora-send{
width:100%;
padding:14px;
border-radius:14px;
border:0;
background:#008cff;
color:white;
font:inherit;
cursor:pointer;
transition:background .2s, opacity .2s;
}

.navora-send:hover:not(:disabled){
background:#1f9dff;
}

.navora-send:disabled{
opacity:.6;
cursor:progress;
}

.navora-status{
margin:10px 0 0;
font-size:12px;
line-height:1.5;
color:#9fd0ff;
min-height:1em;
}

.navora-status[data-kind="error"]{
color:#ffb4a8;
}

@media (max-width:600px){
.navora-promo{
right:12px;
left:12px;
bottom:84px;
width:auto;
max-width:none;
padding:17px;
}
.navora-promo-email{font-size:16px;}

.navora-launcher{
right:18px;
bottom:18px;
width:54px;
height:54px;
}

.navora-launcher-icon{
width:24px;
height:24px;
}

.navora-panel{
right:12px;
left:12px;
bottom:84px;
width:auto;
max-width:none;
height:auto;
max-height:calc(100vh - 120px);
border-radius:22px;
}

.navora-body textarea{
height:70px;
}

.navora-invite{
right:12px;
left:12px;
bottom:84px;
width:auto;
max-width:none;
padding:16px 16px 14px;
border-radius:20px;
}

.navora-invite-action{
padding:10px 13px;
}

/* 16px keeps iOS from zooming the page when the card's input takes focus. */
.navora-invite-input{
font-size:16px;
}
}

/* Short screens: the teaser must not push above the viewport next to the launcher. */
@media (max-height:520px){
.navora-invite{
bottom:84px;
max-height:calc(100vh - 100px);
overflow-y:auto;
}
}