/* Chat Widget — Specialist Electric Blue */
.chat-toggle{position:fixed;bottom:24px;right:24px;z-index:1000}
.chat-btn{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#3B82F6 0%,#06B6D4 100%);color:#fff;border:none;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 24px rgba(59,130,246,0.4);transition:all 250ms;display:flex;align-items:center;justify-content:center}
.chat-btn:hover{transform:scale(1.1);box-shadow:0 4px 32px rgba(59,130,246,0.6)}
.chat-btn svg{width:28px;height:28px;fill:#fff}
.chat-btn .chat-close{display:none}
.chat-toggle.open .chat-btn .chat-open{display:none}
.chat-toggle.open .chat-btn .chat-close{display:block}

.chat-panel{position:fixed;bottom:96px;right:24px;width:380px;max-width:calc(100vw - 48px);height:520px;max-height:calc(100vh - 120px);background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.05);display:flex;flex-direction:column;overflow:hidden;transform:scale(0.8) translateY(20px);opacity:0;pointer-events:none;transition:all 300ms cubic-bezier(0.4,0,0.2,1);z-index:999}
.chat-toggle.open .chat-panel{transform:scale(1) translateY(0);opacity:1;pointer-events:all}

.chat-header{padding:16px 20px;background:linear-gradient(135deg,#0F172A 0%,#1E293B 100%);color:#fff;display:flex;align-items:center;gap:12px;flex-shrink:0;min-height:68px}
.chat-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#3B82F6 0%,#06B6D4 100%);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.chat-header-info h3{font-size:0.938rem;font-weight:700;margin:0;line-height:1.2}
.chat-header-info p{font-size:0.75rem;color:rgba(255,255,255,0.6);margin:2px 0 0}

.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:#F8FAFC}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:2px}

.chat-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:0.875rem;line-height:1.5;word-wrap:break-word;animation:msgIn 250ms ease-out}
.chat-msg.bot{background:#F1F5F9;color:#0F172A;border-bottom-left-radius:4px;align-self:flex-start}
.chat-msg.user{background:linear-gradient(135deg,#3B82F6,#2563EB);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}

.chat-msg.typing{display:flex;gap:4px;padding:12px 18px;align-items:center}
.chat-msg.typing span{width:7px;height:7px;border-radius:50%;background:#94A3B8;animation:typingDot 1.4s infinite}
.chat-msg.typing span:nth-child(2){animation-delay:0.2s}
.chat-msg.typing span:nth-child(3){animation-delay:0.4s}

@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-6px);opacity:1}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.chat-input-area{padding:12px 16px;border-top:1px solid #E2E8F0;display:flex;gap:8px;flex-shrink:0;background:#fff}
.chat-input{flex:1;padding:10px 14px;border:1px solid #E2E8F0;border-radius:12px;font-size:0.875rem;outline:none;transition:border-color 200ms;font-family:inherit}
.chat-input:focus{border-color:#3B82F6}
.chat-input::placeholder{color:#94A3B8}
.chat-send{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#3B82F6 0%,#06B6D4 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 200ms;flex-shrink:0}
.chat-send:hover{transform:scale(1.05);box-shadow:0 2px 12px rgba(59,130,246,0.4)}
.chat-send:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.chat-send svg{width:18px;height:18px;fill:#fff}

.chat-error{background:#FEF2F2;color:#991B1B;padding:10px 14px;border-radius:12px;font-size:0.813rem;align-self:center;max-width:90%}

/* Tablet */
@media(max-width:768px){
  .chat-panel{width:340px;bottom:88px;right:16px;max-width:calc(100vw - 32px);height:460px;max-height:calc(100vh - 104px)}
  .chat-toggle{bottom:16px;right:16px}
}

/* Mobile — compact bottom sheet, NOT fullscreen */
@media(max-width:480px){
  .chat-panel{
    bottom:76px;
    right:8px;
    left:8px;
    width:auto;
    max-width:none;
    height:60vh;
    max-height:440px;
    min-height:300px;
    border-radius:16px 16px 8px 8px;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px
  }
  .chat-toggle{bottom:12px;right:12px}
  .chat-toggle.open .chat-btn{
    width:48px;height:48px;
    box-shadow:0 2px 12px rgba(59,130,246,0.3)
  }
  .chat-header{padding:12px 16px;min-height:56px}
  .chat-avatar{width:32px;height:32px;font-size:0.875rem}
  .chat-header-info h3{font-size:0.875rem}
  .chat-messages{padding:12px}
  .chat-input-area{padding:10px 12px}
}