/* hannah.css — Hannah AI agent styles */

/* ── HANNAH AI AGENT ─────────────────────────────────────────────────────── */
  .hannah-btn {
    position:fixed; bottom:24px; right:24px; z-index:9000;
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,#0E036C,#1a0a8a);
    border:none; cursor:pointer; box-shadow:0 4px 20px rgba(14,3,108,0.4);
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.2s, box-shadow 0.2s, opacity 0.3s;
  }
  .hannah-btn:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(14,3,108,0.5); }
  .hannah-btn svg { width:24px; height:24px; }
  .hannah-btn .hannah-close { display:none; }
  .hannah-btn.open .hannah-chat-icon { display:none; }
  .hannah-btn.open .hannah-close { display:block; }
  .hannah-btn.expanded-mode { opacity:0; pointer-events:none; }
  .hannah-unread {
    position:absolute; top:-2px; right:-2px; width:18px; height:18px;
    background:#ef4444; border-radius:50%; font-size:10px; font-weight:700;
    color:white; display:flex; align-items:center; justify-content:center;
    border:2px solid white;
  }

  /* Base panel */
  .hannah-panel {
    position:fixed; bottom:92px; right:24px; z-index:8999;
    width:360px; max-width:calc(100vw - 32px);
    background:white; border-radius:16px;
    box-shadow:0 8px 40px rgba(0,0,0,0.18);
    display:flex; flex-direction:column; overflow:hidden;
    transform:scale(0.95) translateY(10px); opacity:0;
    transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
    pointer-events:none; max-height:520px;
  }
  .hannah-panel.open {
    transform:scale(1) translateY(0); opacity:1; pointer-events:all;
  }
  /* Expanded state — centered modal with two panes */
  .hannah-panel.expanded {
    bottom:auto; right:auto;
    top:50%; left:50%;
    transform:translate(-50%,-50%) !important;
    width:min(760px, calc(100vw - 32px));
    max-height:min(620px, calc(100vh - 32px));
    opacity:1; pointer-events:all;
    flex-direction:row;
  }
  @media(max-width:600px) {
    .hannah-panel.expanded {
      top:0; left:0; right:0; bottom:0;
      transform:none !important;
      width:100%; max-height:100%;
      border-radius:0;
      flex-direction:column;
    }
  }

  /* Backdrop for expanded mode */
  .hannah-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.5);
    z-index:8998; opacity:0; pointer-events:none;
    transition:opacity 0.35s ease;
  }
  .hannah-backdrop.show { opacity:1; pointer-events:all; }

  /* Two-pane layout */
  .hannah-chat-pane {
    display:flex; flex-direction:column;
    transition:width 0.35s ease, max-width 0.35s ease;
    width:100%; overflow:hidden;
  }
  .hannah-panel.expanded .hannah-chat-pane {
    width:320px; min-width:320px; max-width:320px;
    border-right:1px solid #e2e8f0;
  }
  @media(max-width:600px) {
    .hannah-panel.expanded .hannah-chat-pane {
      width:100%; min-width:0; max-width:100%;
      max-height:35vh; border-right:none; border-bottom:1px solid #e2e8f0;
    }
  }
  .hannah-booking-pane {
    flex:1; display:none; flex-direction:column; overflow:hidden;
    animation:slideInRight 0.3s ease forwards;
  }
  .hannah-panel.expanded .hannah-booking-pane { display:flex; }
  @keyframes slideInRight { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

  .hannah-booking-pane-hdr {
    background:linear-gradient(135deg,#0E036C,#1a0a8a);
    padding:14px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0;
  }
  .hannah-back-btn {
    background:rgba(255,255,255,0.15); border:none; color:white;
    width:28px; height:28px; border-radius:6px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:14px;
    flex-shrink:0;
  }
  .hannah-back-btn:hover { background:rgba(255,255,255,0.25); }
  .hannah-booking-pane-body {
    flex:1; overflow-y:auto; padding:20px;
  }

  .hannah-header {
    background:linear-gradient(135deg,#0E036C,#1a0a8a);
    padding:14px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0;
  }
  .hannah-avatar {
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,0.15);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0;
  }
  .hannah-header-text h3 { color:white; font-size:14px; font-weight:700; margin:0; }
  .hannah-header-text p { color:rgba(255,255,255,0.65); font-size:11px; margin:0; }
  .hannah-status { width:8px; height:8px; background:#22c55e; border-radius:50%; margin-left:auto; flex-shrink:0; }
  .hannah-messages {
    flex:1; overflow-y:auto; padding:14px; display:flex;
    flex-direction:column; gap:10px; min-height:200px;
  }
  .hannah-panel.expanded .hannah-messages { min-height:0; }
  .hannah-msg { display:flex; flex-direction:column; max-width:85%; }
  .hannah-msg.hannah { align-self:flex-start; }
  .hannah-msg.user { align-self:flex-end; }
  .hannah-bubble { padding:10px 13px; border-radius:12px; font-size:13px; line-height:1.5; }
  .hannah-msg.hannah .hannah-bubble { background:#f1f5f9; color:#1e293b; border-bottom-left-radius:3px; }
  .hannah-msg.user .hannah-bubble { background:#0E036C; color:white; border-bottom-right-radius:3px; }
  .hannah-typing { display:flex; gap:4px; padding:10px 13px; background:#f1f5f9; border-radius:12px; border-bottom-left-radius:3px; width:fit-content; }
  .hannah-typing span { width:6px; height:6px; background:#94a3b8; border-radius:50%; animation:hannahBounce 1.2s infinite; }
  .hannah-typing span:nth-child(2) { animation-delay:0.2s; }
  .hannah-typing span:nth-child(3) { animation-delay:0.4s; }
  @keyframes hannahBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }
  .hannah-input-row { padding:10px 12px; border-top:1px solid #e2e8f0; display:flex; gap:8px; flex-shrink:0; }
  .hannah-input {
    flex:1; padding:9px 12px; border:1.5px solid #e2e8f0; border-radius:8px;
    font-size:13px; font-family:inherit; resize:none; outline:none;
    max-height:80px; line-height:1.4;
  }
  .hannah-input:focus { border-color:#0E036C; }
  .hannah-send {
    width:36px; height:36px; background:#0E036C; border:none; border-radius:8px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; align-self:flex-end;
  }
  .hannah-send:disabled { background:#94a3b8; cursor:not-allowed; }
  .hannah-send svg { width:16px; height:16px; }
  .hannah-powered { text-align:center; padding:4px; font-size:10px; color:#cbd5e1; flex-shrink:0; }