#opdcs-bubble{position:fixed;right:16px;bottom:16px;width:54px;height:54px;border-radius:999px;background:#111;color:#fff;
display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:999999;cursor:pointer;opacity:0;transform:translateY(40px) scale(.85);transition:all .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
#opdcs-bubble svg{width:26px;height:26px;display:block}
#opdcs-panel{position:fixed;right:16px;bottom:78px;width:340px;max-width:92vw;background:#fff;border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,.28);z-index:999999;overflow:hidden;display:none}
#opdcs-header{background:#111;color:#fff;padding:10px 12px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
#opdcs-close{cursor:pointer;border:none;background:transparent;color:#fff;font-size:20px;line-height:1}
#opdcs-body{padding:12px}
#opdcs-body input, #opdcs-body textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;margin:6px 0;box-sizing:border-box;font-size:14px}
#opdcs-send{width:100%;padding:10px;border-radius:8px;border:none;background:#111;color:#fff;font-weight:600;cursor:pointer}
#opdcs-note{font-size:12px;color:#666;margin-top:6px}
#opdcs-success{display:none;color:#0a7d2f;font-weight:600;margin-top:6px}
#opdcs-quick{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
#opdcs-quick button{padding:6px 8px;border:1px solid #ddd;border-radius:999px;background:#f6f6f6;cursor:pointer;font-size:12px}
#opdcs-consent{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#666;margin:6px 0}
#opdcs-whats{font-size:12px;margin-top:8px}
#opdcs-files{padding:8px}
#opdcs-hint{font-size:11px;color:#666;margin-top:-2px}
@media (prefers-color-scheme: dark){
  #opdcs-panel{background:#1f1f1f;color:#eaeaea;border:1px solid #333}
  #opdcs-body input, #opdcs-body textarea{background:#121212;color:#eaeaea;border-color:#333}
  #opdcs-quick button{background:#222;border-color:#333;color:#ddd}
}


/* Phone-only: lift chat bubble/panel above OPD bottom nav */
@media (hover: none) and (pointer: coarse) and (max-width: 600px){
  #opdcs-bubble{bottom: calc(16px + 76px + env(safe-area-inset-bottom));}
  #opdcs-panel{bottom: calc(78px + 76px + env(safe-area-inset-bottom));}
}
@media (hover: none) and (pointer: coarse) and (max-height: 500px){
  /* Landscape phones */
  #opdcs-bubble{bottom: calc(16px + 76px + env(safe-area-inset-bottom));}
  #opdcs-panel{bottom: calc(78px + 76px + env(safe-area-inset-bottom));}
}


/* Phone-only offset so the bubble/panel never sits under OPD bottom nav (and stays correct on rotation). */
.opdcs-phone #opdcs-bubble{
  bottom: calc(16px + 96px + env(safe-area-inset-bottom));
}
.opdcs-phone #opdcs-panel{
  bottom: calc(78px + 96px + env(safe-area-inset-bottom));
}

/* Delay reveal (8s) + premium animation */
.opdcs-chat-visible #opdcs-bubble{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
  pointer-events:auto;
}

/* Keep above OPD mobile bottom menu on phones */
html.opdcs-phone #opdcs-bubble{ bottom:90px; }
html.opdcs-phone #opdcs-panel{ bottom:152px; }
