/* ==============================================
   Unlad Cavite — FAQ Chatbot Widget (shared styles)
   Loaded on every applicant-facing page via <link>.
   Edit this ONE file to change the widget everywhere.
   ============================================== */

  /* ===== FAQ Chatbot Widget ===== */
  .chat-toggle{
    position:fixed; bottom:26px; right:26px; width:58px; height:58px; border-radius:50%;
    background:var(--forest-deep); border:none; box-shadow:0 10px 26px rgba(18,48,31,0.35);
    display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:400;
    transition:transform 0.15s ease;
  }
  .chat-toggle:hover{transform:scale(1.06);}
  .chat-toggle .icon-close{display:none;}
  .chat-toggle.open .icon-chat{display:none;}
  .chat-toggle.open .icon-close{display:block;}

  .chat-panel{
    position:fixed; bottom:96px; right:26px; width:340px; max-width:calc(100vw - 40px);
    height:530px; max-height:calc(100vh - 120px); background:#fff; border-radius:12px;
    box-shadow:0 24px 60px rgba(18,48,31,0.28); display:none; flex-direction:column;
    overflow:hidden; z-index:400;
  }
  .chat-panel.open{display:flex;}
  .chat-head{
    background:var(--forest-deep); color:#fff; padding:16px 18px; display:flex; align-items:center; gap:10px;
  }
  .chat-head img{width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--gold);}
  .chat-head .title{font-family:'Fraunces',serif; font-weight:500; font-size:0.95rem;}
  .chat-head .sub{font-size:0.7rem; color:rgba(255,255,255,0.65);}

  /* The header toggle sits on a light background, so its default
     colors need overriding here for the chat header's dark green. */
  .chat-head .lang-toggle{margin:0 0 0 auto; background:rgba(255,255,255,0.16); flex-shrink:0;}
  .chat-head .lang-btn{color:rgba(255,255,255,0.7);}
  .chat-head .lang-btn.active{background:#fff; color:var(--forest-deep);}

  .chat-body{flex:1; min-height:0; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--parchment);}
  .chat-bubble{max-width:85%; padding:10px 13px; border-radius:12px; font-size:0.84rem; line-height:1.55;}
  .chat-bubble.bot{background:#fff; border:1px solid var(--line); color:var(--ink); align-self:flex-start; border-bottom-left-radius:3px;}
  .chat-bubble.user{background:var(--forest-deep); color:#fff; align-self:flex-end; border-bottom-right-radius:3px;}
  .chat-bubble ul{margin:6px 0 0 16px;}
  .chat-bubble li{margin-bottom:3px;}
  .chat-bubble a{color:var(--gold); font-weight:600;}
  .chat-bubble.bot a{color:#2F5FDE;}

  /* A pinned footer, always visible without scrolling the message
     history — but bounded with its own scroll, so a long list of
     options can never crush the message area down to nothing. */
  .chat-options{
    flex-shrink:0; display:flex; flex-direction:column; gap:6px; width:100%;
    max-height:186px; overflow-y:auto; padding:10px 16px 14px; background:var(--parchment);
    border-top:1px solid var(--line);
  }
  .chat-option-btn{
    background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 12px;
    font-size:0.82rem; text-align:left; color:var(--forest-deep); font-weight:600; cursor:pointer;
    flex-shrink:0;
  }
  .chat-option-btn:hover{background:var(--parchment-dim); border-color:var(--gold);}

  @media (max-width: 420px){
    .chat-panel{right:20px; left:20px; width:auto;}
    .chat-toggle{right:20px;}
  }