/* chatbot.css - styles for PlanB Delivery chatbot (coherent with main.css) */
:root{
    --pb-accent: #dd2121;
    --pb-contrast: #ffffff;
    --pb-bg: #ffffff;
    --pb-text: #212529;
    --pb-shadow: 0 12px 30px rgba(0,0,0,0.12);
    --pb-radius: 14px;
    --pb-z: 99999;
    font-family: "Poppins", sans-serif;
  }
  
  /* Modal overlay */
  .pb-modal{
    position: fixed;
    inset: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,0.45);
    z-index: var(--pb-z);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
  }
  .pb-modal[aria-hidden="false"]{
    opacity:1;
    visibility:visible;
  }
  
  /* Inner card */
  .pb-modal-inner{
    width: 100%;
    max-width: 460px;
    background: var(--pb-bg);
    border-radius: var(--pb-radius);
    box-shadow: var(--pb-shadow);
    overflow: hidden;
    display:flex;
    flex-direction:column;
    height: 600px;
  }
  
  /* Close button */
  .pb-close{
    position: absolute;
    right: 12px;
    top: 10px;
    background: transparent;
    border: none;
    font-size: 26px;
    color: var(--pb-text);
    cursor: pointer;
    z-index: 20;
  }
  
  /* Chat box */
  .pb-chat{
    display:flex;
    flex-direction:column;
    height:100%;
  }
  
  .pb-messages{
    flex:1;
    padding:18px;
    overflow-y:auto;
    background: linear-gradient(180deg,#fff,#f7f7f7);
  }
  
  /* Bubbles */
  .pb-bubble{
    max-width:85%;
    margin-bottom:12px;
    padding:10px 14px;
    border-radius:12px;
    line-height:1.3;
    word-wrap:break-word;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .pb-bot{ background: #ffffff; color: var(--pb-text); align-self:flex-start; border:1px solid #eef0f2; }
  .pb-user{ background: var(--pb-accent); color: var(--pb-contrast); align-self:flex-end; }
  
  .pb-bubble.typing{ opacity:0.8; font-style:italic; }
  
  /* Controls */
  .pb-controls{
    position: sticky;
    bottom:0;
    border-top:1px solid #eee;
    padding:14px;
    background:#fff;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  
  /* Options */
  .pb-options{ display:flex; gap:8px; flex-wrap:wrap; }
  .pb-option-btn{
    background: var(--pb-accent);
    color: var(--pb-contrast);
    border: none;
    padding:10px 12px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    min-width:140px;
    box-shadow: 0 6px 18px rgba(221,33,33,0.12);
  }
  .pb-option-btn.ghost{ background: transparent; color: var(--pb-text); border:1px solid #e6e6e6; box-shadow:none; }
  
  /* Input row */
  .pb-input-row{ display:flex; gap:8px; }
  .pb-text-input{ flex:1; padding:10px 12px; border-radius:8px; border:1px solid #e6e6e6; font-size:14px; }
  .pb-btn-send{ background: #0ea5a4; color:#fff; border:none; padding:10px 14px; border-radius:8px; font-weight:700; cursor:pointer; }
  
  /* WhatsApp float (shown when chatbot closed) */
  .pb-whatsapp-float{
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: calc(var(--pb-z) - 1);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .pb-whatsapp-float a{
    display:block;
    width:64px;
    height:64px;
    background: var(--pb-accent);
    color: white;
    border-radius: 50%;
    text-align:center;
    line-height:64px;
    font-size:28px;
    box-shadow: 0 10px 30px rgba(221,33,33,0.18);
    transition: transform 0.18s ease;
  }
  .pb-whatsapp-float a:hover{ transform: translateY(-6px); }
  
  /* Responsive adjustments */
  @media(max-width:480px){
    .pb-modal-inner{ max-width: 100%; height: 90vh; border-radius: 12px; }
    .pb-option-btn{ min-width: calc(50% - 6px); }
    .pb-whatsapp-float a{ width:56px; height:56px; line-height:56px; font-size:24px; }
  }