/* assets/chatbot.css — Drawer (Facebook-like) using ONLY #dcff86, black, white */

:root{
    --rv-accent: #dcff86;
    --rv-black: #000000;
    --rv-white: #ffffff;
    --rv-border: rgba(0,0,0,.12);
  }
  
  /* Header trigger icon */
  .rvc-trigger{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%;
    background: var(--rv-black); color: var(--rv-accent);
    border:1px solid var(--rv-black);
    cursor:pointer; transition: transform .15s ease;
  }
  .rvc-trigger:hover{ transform: scale(1.05); }
  
  /* Overlay + Panel */
  .rvc-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    backdrop-filter:saturate(100%) blur(2px); z-index: 9997;
  }
  .rvc-panel{
    position:fixed; top:0; right:-100%;
    width:100%; height:100%;
    background: var(--rv-white); color: var(--rv-black);
    z-index: 9998; display:flex; flex-direction:column;
    box-shadow: -8px 0 24px rgba(0,0,0,.2);
    transition: right .25s ease-in-out;
  }
  .rvc-panel.rvc-open{ right:0; }
  @media(min-width: 900px){ .rvc-panel{ width:420px; } }
  body.rvc-lock{ overflow:hidden; }
  
  /* Panel header */
  .rvc-head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px; border-bottom:1px solid var(--rv-border);
    background: var(--rv-white);
  }
  .rvc-title{ display:flex; align-items:center; gap:10px; font-weight:700; }
  .rvc-dot{ width:10px; height:10px; border-radius:50%; background: var(--rv-accent); box-shadow: 0 0 0 2px var(--rv-black) inset; }
  .rvc-close{
    border:1px solid var(--rv-black); background: var(--rv-white); color: var(--rv-black);
    border-radius:8px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  
  /* Body */
  .rvc-body{ flex:1; min-height:0; display:flex; flex-direction:column; background: var(--rv-white); }
  
  /* Messages */
  .chat-messages{
    flex:1; overflow:auto; padding: 14px;
    display:flex; flex-direction:column; gap:10px;
    scrollbar-width: thin; scrollbar-color: var(--rv-border) transparent;
  }
  .chat-messages::-webkit-scrollbar{ width:8px }
  .chat-messages::-webkit-scrollbar-thumb{ background: var(--rv-border); border-radius:4px }
  
  .message{ display:flex; }
  .message.bot{ justify-content:flex-start; }
  .message.user{ justify-content:flex-end; }
  
  .message-content{
    max-width: 78%;
    padding: 10px 12px;
    border-radius: 16px;
    border:1px solid var(--rv-border);
    line-height:1.35; font-size:14px;
    background: #f7f7f7; color: var(--rv-black);
  }
  .message.user .message-content{
    background: var(--rv-black); color: var(--rv-accent); border-color: var(--rv-black);
  }
  
  /* Chips */
  .quick-actions{ display:flex; flex-wrap:wrap; gap:8px; margin: 2px 0 6px; }
  .quick-action{
    background: var(--rv-white); border:1px solid var(--rv-border);
    color: var(--rv-black);
    border-radius: 16px; padding:6px 10px; font-size:12px; cursor:pointer;
  }
  .quick-action:hover{ background: var(--rv-black); color: var(--rv-accent); }
  
  /* Typing indicator */
  .typing-indicator{ display:none; padding: 0 14px 10px; }
  .typing-indicator.active{ display:block; }
  .typing-dots{
    display:inline-flex; gap:4px; padding:8px 10px;
    border-radius:16px; border:1px solid var(--rv-border); background:#f7f7f7;
  }
  .typing-dot{ width:6px; height:6px; border-radius:50%; background:#999; animation:blink 1s infinite ease-in-out; }
  .typing-dot:nth-child(2){ animation-delay:.2s } .typing-dot:nth-child(3){ animation-delay:.4s }
  @keyframes blink{ 0%,100%{opacity:.35; transform:translateY(1px)} 50%{opacity:1; transform:none} }
  
  /* Footer input */
  .rvc-foot{ border-top:1px solid var(--rv-border); padding:10px; background: var(--rv-white); }
  .rvc-input{
    display:flex; align-items:center; gap:8px;
    background:#f7f7f7; border:1px solid var(--rv-border);
    border-radius: 24px; padding: 6px;
  }
  .chat-input{
    flex:1; border:none; outline:none; background:transparent;
    padding: 8px 8px 8px 12px; font-size:14px; color: var(--rv-black);
  }
  .chat-input::placeholder{ color:#8c8c8c }
  .send-button{
    width:38px; height:38px; border-radius:50%;
    border:1px solid var(--rv-black); background: var(--rv-black); color: var(--rv-accent);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .send-button:disabled{ opacity:.5; cursor:not-allowed }
  .send-icon{ width:16px; height:16px; fill: currentColor }
  
  /* Alerts */
  .error-message{
    align-self:flex-start;
    color:#b00020; background:#ffecec; border:1px solid #ffc9c9;
    padding:8px 10px; border-radius: 12px;
  }
  .success-message{
    align-self:flex-start;
    color:#0a7; background:#eafff6; border:1px solid #b2f5e9;
    padding:8px 10px; border-radius: 12px;
  }
  
  /* Page-mode container (if used on a dedicated page) */
  .chatbot-container{ max-width:1100px; margin:0 auto; padding:12px 16px 24px; }
  .chat-window{
    width:100%; min-height: calc(100vh - 140px);
    background: var(--rv-white); color: var(--rv-black);
    border-radius: 12px; border:1px solid var(--rv-border);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .chat-header{ padding:14px; border-bottom:1px solid var(--rv-border); background: var(--rv-white); }
  .chat-header h3{ margin:0; font-size:18px; font-weight:700; }
  .chat-status{ font-size:12px; margin-top:4px; }
  .status-dot{ width:8px; height:8px; background: var(--rv-accent); border-radius:50%; display:inline-block; margin-right:6px; }
  .chat-input-container{ padding:10px; border-top:1px solid var(--rv-border); background: var(--rv-white); }
  .chat-input-wrapper{ display:flex; align-items:center; gap:8px; background:#f7f7f7; border:1px solid var(--rv-border); border-radius:24px; padding:6px; }
  
  /* Mobile tweaks */
  @media (max-width:480px){
    .message-content{ max-width:85%; font-size:13px; }
  }