/* Styles specific to full-page embed (override and polish) */
:root{
  --bg-grad-start:#f7fbff;
  --bg-grad-end:#eef6ff;
  --accent-1:#1a2a6c;
  --accent-2:#2b5876;
  --muted:#6b7280;
  --bot-bg:#eff3fb;
  --user-bg:#1a2a6c;
  --white:#ffffff;
}

html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg-grad-start),var(--bg-grad-end));color:#0f172a}

/* Full viewport container */
#chatbot-widget{height:100%;display:flex;align-items:stretch;justify-content:center}

.container{width:100%;max-width:900px;height:100%;background:var(--white);box-shadow:0 20px 60px rgba(11,20,39,.08);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}

.header{display:flex;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:var(--white)}
.header .avatar-container{width:56px;height:56px;flex:0 0 56px}
.header .avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.15)}
.header-content h1{margin:0;font-size:18px;letter-spacing:.2px}
.header-content p{margin:2px 0 0;font-size:13px;opacity:.9}

.chat-container{flex:1 1 auto;padding:18px;overflow:auto;background:linear-gradient(180deg,rgba(243,247,255,0.6),transparent)}
.message{max-width:78%;padding:12px 14px;margin-bottom:12px;border-radius:14px;line-height:1.45}
.bot-message{background:var(--bot-bg);color:#0f172a;display:flex;gap:12px;align-items:flex-start}
.bot-avatar{width:22%;min-width:62px;max-width:84px;height:auto;max-height:96px;border-radius:0;flex-shrink:0;object-fit:contain}
.message-content{font-size:15px;display:flex;flex-direction:column;gap:6px}
.message-time{display:inline-flex;align-items:center;align-self:flex-end;margin-top:2px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:500;line-height:1;letter-spacing:.2px;background:rgba(255,255,255,0.32);border:1px solid rgba(255,255,255,0.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#334155}
.user-message{background:var(--user-bg);color:var(--white);align-self:flex-end;border-bottom-right-radius:6px;display:flex;flex-direction:column;gap:6px}
.user-message .message-time{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.2);color:#eaf3ff}

.typing-indicator{display:none;align-items:center;gap:8px;margin-bottom:12px}
.typing-indicator img.bot-avatar{width:48px;height:auto;max-height:56px;object-fit:contain}
.typing-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-2);animation:typing 1.2s infinite;display:inline-block}
.typing-dot:nth-child(2){animation-delay:.12s}
.typing-dot:nth-child(3){animation-delay:.24s}
@keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* Ensure typing indicator shows as a flex row only when explicitly visible */
.typing-indicator.visible, .typing-indicator[aria-hidden="false"]{
  display:flex !important;
}

.suggestions{display:flex;gap:8px;padding:10px 18px;border-top:1px solid #f1f5f9;background:#fff;flex-wrap:wrap}
.suggestion{background:#eef3ff;color:var(--accent-1);padding:8px 12px;border-radius:999px;border:0;cursor:pointer;font-size:13px;min-width:fit-content}

.input-container{display:flex;gap:10px;padding:12px 18px;border-top:1px solid #eef2f7;background:#fff}
.input-container input{flex:1;padding:12px 14px;border-radius:999px;border:1px solid #e6eef8;font-size:15px;outline:none}
.input-container button{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:var(--white);border:0;padding:10px 14px;border-radius:999px;cursor:pointer}
.fullscreen-video-button{align-self:flex-start;margin-top:6px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:var(--white);border:0;padding:7px 12px;border-radius:999px;cursor:pointer;font-size:12px}
.fullscreen-video-button{display:inline-block;text-decoration:none}

.chat-controls{display:flex;justify-content:flex-end;padding:8px 18px;background:#fff}
.chat-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #dbe6f5;background:#f8fbff;color:#1a2a6c;padding:8px 12px;border-radius:999px;cursor:pointer;font-size:13px;line-height:1}
.chat-btn:hover{background:#eef4ff}
.chat-btn:focus{outline:3px solid rgba(43,88,118,0.12);outline-offset:2px}

/* Responsive */
@media (max-width:720px){
  .container{border-radius:0}
  .header .avatar-container{width:44px;height:44px}
  .header-content h1{font-size:16px}
  .chat-container{padding:12px}
}

/* Accessibility focus */
.suggestion:focus,.input-container input:focus,.input-container button:focus{outline:3px solid rgba(43,88,118,0.12);outline-offset:2px}

/* Theme (dark mode) overrides when JS toggles `dark-mode` on #chatbot-widget */
#chatbot-widget.dark-mode { background: linear-gradient(180deg,#051022,#072033); }
#chatbot-widget.dark-mode .container { background:#071526; color:#e6eef8; box-shadow: 0 20px 60px rgba(2,6,23,0.8); }
#chatbot-widget.dark-mode .header { background: linear-gradient(90deg,#0b2540,#113247); color:#e6eef8; }
#chatbot-widget.dark-mode .header-content p { opacity:0.85; color:#d9eaf8 }
#chatbot-widget.dark-mode .bot-message { background:rgba(255,255,255,0.03); color:#dbeaf8 }
#chatbot-widget.dark-mode .user-message { background:linear-gradient(90deg,#12314f,#1b516e); color:#fff }
#chatbot-widget.dark-mode .message-time { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.16); color:#d5e7f8 }
#chatbot-widget.dark-mode .user-message .message-time { background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.24); color:#eef6ff }
#chatbot-widget.dark-mode .chat-container { background: linear-gradient(180deg, rgba(10,20,30,0.6), transparent); }
#chatbot-widget.dark-mode .chat-controls { background: transparent; border-top:1px solid rgba(255,255,255,0.04); }
#chatbot-widget.dark-mode .chat-btn { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); color:#dbeaf8; }
#chatbot-widget.dark-mode .chat-btn:hover { background: rgba(255,255,255,0.06); }
#chatbot-widget.dark-mode .input-container { background:transparent; border-top:1px solid rgba(255,255,255,0.04); }
#chatbot-widget.dark-mode .input-container input { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); color:#eaf6ff }
#chatbot-widget.dark-mode .input-container button { box-shadow:none }
#chatbot-widget.dark-mode .fullscreen-video-button { background: linear-gradient(90deg,#12314f,#1b516e); color:#eef6ff }
#chatbot-widget.dark-mode .suggestion { background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); color: #a9d5ff; border:1px solid rgba(255,255,255,0.04) }

/* Dark-mode: ensure suggestions container matches theme (not only text) */
#chatbot-widget.dark-mode .suggestions { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-top:1px solid rgba(255,255,255,0.04) }

/* Improve suggestion hover/active for dark mode */
#chatbot-widget.dark-mode .suggestion:hover { background: rgba(255,255,255,0.04) }

/* Make theme toggle clearly clickable */
.theme-toggle { cursor: pointer; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px }
.theme-toggle i { font-size:16px }