/* =========================================================
   OMETONG — FLOATING CHAT WIDGET
   Self-contained: injected by chatWidget.js on every page. Liquid
   glass panel (blur + saturate + a slow shimmering conic-gradient
   edge) rather than the heavy displacement-map SVG filter used on
   the Home navbar, so this stays lightweight on every single page.
========================================================= */

/* ---------------------------------------------------------
   SITE-WIDE FIX — the [hidden] attribute vs. author CSS `display`
   Not related to the chat widget itself; placed here because this
   file is the one stylesheet loaded on every single page, so this
   fixes it everywhere in one shot.

   Several panels toggle visibility by setting element.hidden = true
   in JS (e.g. the "select a message" placeholder vs. the actual
   message thread in messages.html / admindashboard.html's Inquiries
   and Contact Messages panels). That's supposed to work automatically
   — the browser's UA stylesheet has `[hidden]{display:none}` built
   in. But *any* author stylesheet rule beats a UA stylesheet rule
   regardless of specificity, so a class like `.msg-thread-empty{
   display:flex }` silently wins over `[hidden]`, and the element
   keeps rendering even while "hidden". Both the empty-state
   placeholder and the real content end up stacked and visible at
   once, overflowing a fixed-height box with no way to scroll to
   what's pushed out of view underneath.
   --------------------------------------------------------- */
[hidden] { display: none !important; }
#ow-root{
  --ow-accent:#FF7431;
  --ow-accent-dark:#E05A18;
  --ow-ink:#15181F;
  --ow-ink-soft:#666E7A;
  --ow-ink-faint:#9AA1AC;
  --ow-line:rgba(21,24,31,.08);
  --ow-glass-bg:rgba(255,255,255,.62);
  --ow-glass-strong:rgba(255,255,255,.82);
  --ow-glass-border:rgba(255,255,255,.7);
  --ow-shadow:0 20px 60px rgba(15,20,30,.25);
  --ow-ease:cubic-bezier(.22,1,.36,1);
  position:fixed;bottom:22px;right:22px;z-index:99999;
  font-family:'Inter',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  #ow-root{
    --ow-ink:#F2F3F5;--ow-ink-soft:#A0AAB5;--ow-ink-faint:#767F8C;
    --ow-line:rgba(255,255,255,.1);
    --ow-glass-bg:rgba(23,26,33,.6);--ow-glass-strong:rgba(23,26,33,.82);
    --ow-glass-border:rgba(255,255,255,.14);
  }
}
#ow-root *{box-sizing:border-box;}
#ow-root button{font-family:inherit;cursor:pointer;}

/* ---- launcher ---- */
.ow-launcher{
  width:60px;height:60px;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--ow-accent),var(--ow-accent-dark));
  box-shadow:0 10px 28px rgba(255,116,49,.42), var(--ow-shadow);
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:transform .3s var(--ow-ease);
}
.ow-launcher:hover{transform:translateY(-3px) scale(1.05);}
.ow-launcher:active{transform:scale(.92);}
.ow-launcher img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));}
.ow-launcher-ring{
  position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(255,116,49,.35);
  animation:owRingPulse 2.6s ease-out infinite;
}
@keyframes owRingPulse{
  0%{transform:scale(.85);opacity:.9;}
  70%{transform:scale(1.35);opacity:0;}
  100%{opacity:0;}
}
.ow-launcher-close-icon{display:none;}
#ow-root.open .ow-launcher-chat-icon{display:none;}
#ow-root.open .ow-launcher-close-icon{display:block;}
#ow-root.open .ow-launcher-ring{display:none;}

/* ---- panel ---- */
.ow-panel{
  position:absolute;bottom:74px;right:0;width:368px;max-width:calc(100vw - 32px);
  height:min(560px, calc(100vh - 120px));
  border-radius:26px;overflow:hidden;
  background:var(--ow-glass-bg);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--ow-glass-border);
  box-shadow:var(--ow-shadow);
  display:flex;flex-direction:column;
  transform-origin:bottom right;
  opacity:0;transform:scale(.85) translateY(16px);pointer-events:none;
  transition:opacity .32s var(--ow-ease), transform .38s var(--ow-ease);
}
#ow-root.open .ow-panel{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}

/* liquid shimmering edge */
.ow-panel::before{
  content:"";position:absolute;inset:0;border-radius:26px;padding:1.5px;
  background:conic-gradient(from 0deg, var(--ow-accent), #FFC24D, #3A6FF7, var(--ow-accent));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.35; animation:owEdgeSpin 6s linear infinite; pointer-events:none;
}
@keyframes owEdgeSpin{to{transform:rotate(360deg);}}

/* soft moving light blob behind the blur for a "liquid" feel */
.ow-panel::after{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,116,49,.25), transparent 70%);
  top:-60px;left:-60px;filter:blur(10px);animation:owBlobDrift 9s ease-in-out infinite;pointer-events:none;
}
@keyframes owBlobDrift{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(60px,90px);}
}

/* ---- header ---- */
.ow-header{
  display:flex;align-items:center;gap:11px;padding:16px 16px 14px;
  border-bottom:1px solid var(--ow-line);position:relative;z-index:1;flex-shrink:0;
}
.ow-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--ow-accent),var(--ow-accent-dark));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(255,116,49,.15);
}
.ow-avatar img{width:24px;height:24px;object-fit:contain;}
.ow-header-text{flex:1;min-width:0;}
.ow-header-text strong{display:block;font-size:.9rem;color:var(--ow-ink);}
.ow-header-text span{display:flex;align-items:center;gap:5px;font-size:.72rem;color:#22C55E;font-weight:600;}
.ow-header-status-dot{width:6px;height:6px;border-radius:50%;background:#22C55E;animation:owStatusPulse 2s ease-in-out infinite;}
@keyframes owStatusPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5);}50%{box-shadow:0 0 0 4px rgba(34,197,94,0);}}
.ow-header-close{
  width:28px;height:28px;border-radius:50%;border:none;background:rgba(0,0,0,.06);
  color:var(--ow-ink-soft);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .2s;
}
.ow-header-close:hover{background:rgba(0,0,0,.12);}

/* ---- body ---- */
.ow-body{
  flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:9px;
  position:relative;z-index:1;
}
.ow-body::-webkit-scrollbar{width:5px;}
.ow-body::-webkit-scrollbar-thumb{background:var(--ow-line);border-radius:6px;}

.ow-row{display:flex;opacity:0;transform:translateY(8px);animation:owBubbleIn .35s var(--ow-ease) forwards;}
.ow-row.bot{justify-content:flex-start;}
.ow-row.user{justify-content:flex-end;}
@keyframes owBubbleIn{to{opacity:1;transform:translateY(0);}}

.ow-bubble{
  max-width:78%;padding:10px 14px;border-radius:16px;font-size:.85rem;line-height:1.45;
  box-shadow:0 4px 14px rgba(15,20,30,.06);
}
.ow-row.bot .ow-bubble{background:var(--ow-glass-strong);color:var(--ow-ink);border-bottom-left-radius:4px;}
.ow-row.user .ow-bubble{background:linear-gradient(135deg,var(--ow-accent),var(--ow-accent-dark));color:#fff;border-bottom-right-radius:4px;}

/* quick replies */
.ow-quick-replies{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px;opacity:0;animation:owBubbleIn .35s var(--ow-ease) forwards;}
.ow-chip{
  padding:8px 14px;border-radius:999px;border:1.5px solid var(--ow-accent);background:transparent;
  color:var(--ow-accent-dark);font-size:.8rem;font-weight:700;transition:background .2s, color .2s, transform .2s;
}
.ow-chip:hover{background:var(--ow-accent);color:#fff;transform:translateY(-1px);}
.ow-chip.ow-chip-ghost{border-color:var(--ow-line);color:var(--ow-ink-faint);}
.ow-chip.ow-chip-ghost:hover{background:var(--ow-line);color:var(--ow-ink-soft);}

/* name-capture row */
.ow-name-row{display:flex;gap:8px;opacity:0;animation:owBubbleIn .35s var(--ow-ease) forwards;}
.ow-name-row input{
  flex:1;border:1px solid var(--ow-line);border-radius:999px;padding:9px 14px;font-size:.84rem;
  outline:none;background:var(--ow-glass-strong);color:var(--ow-ink);transition:border-color .2s, box-shadow .2s;
}
.ow-name-row input:focus{border-color:var(--ow-accent);box-shadow:0 0 0 3px rgba(255,116,49,.14);}
.ow-name-row button{
  width:36px;height:36px;border-radius:50%;border:none;flex-shrink:0;
  background:linear-gradient(135deg,var(--ow-accent),var(--ow-accent-dark));color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.ow-name-row button svg{fill:none;stroke:currentColor;stroke-width:2.2;}

/* typing indicator */
.ow-typing{display:flex;gap:4px;background:var(--ow-glass-strong);border-radius:16px;padding:11px 15px;width:fit-content;box-shadow:0 4px 14px rgba(15,20,30,.06);}
.ow-typing span{width:5px;height:5px;border-radius:50%;background:var(--ow-ink-faint);animation:owTypingBounce 1.2s ease-in-out infinite;}
.ow-typing span:nth-child(2){animation-delay:.15s;}
.ow-typing span:nth-child(3){animation-delay:.3s;}
@keyframes owTypingBounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}

/* ---- composer ---- */
.ow-composer{
  display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--ow-line);
  position:relative;z-index:1;flex-shrink:0;
}
.ow-composer input{
  flex:1;border:1px solid var(--ow-line);border-radius:999px;padding:10px 16px;font-size:.85rem;
  outline:none;background:var(--ow-glass-strong);color:var(--ow-ink);transition:border-color .2s, box-shadow .2s;
}
.ow-composer input:focus{border-color:var(--ow-accent);box-shadow:0 0 0 3px rgba(255,116,49,.14);}
.ow-composer button{
  width:38px;height:38px;border-radius:50%;border:none;flex-shrink:0;
  background:linear-gradient(135deg,var(--ow-accent),var(--ow-accent-dark));color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(255,116,49,.35);
  transition:transform .25s var(--ow-ease);
}
.ow-composer button:hover{transform:translateY(-2px) scale(1.05);}
.ow-composer button:active{transform:scale(.9);}
.ow-composer button svg{fill:none;stroke:currentColor;stroke-width:2.1;}

@media (max-width:480px){
  #ow-root{right:14px;bottom:14px;}
  .ow-panel{width:calc(100vw - 28px);right:-8px;}
}

/* Disclosure line — visitors are told their chat is stored and may be
   reviewed, since these conversations are kept server-side. */
.ow-disclosure{
  margin:0;padding:0 16px 12px;flex-shrink:0;position:relative;z-index:1;
  font-size:.66rem;line-height:1.45;color:var(--ow-ink-faint);text-align:center;
}