/* assets/widget.css */
/* Found during Phase 8's live browser walkthrough: any element that uses
   the `hidden` attribute AND has an author CSS rule setting its own
   `display` value loses the browser's native hiding behavior -- the
   UA stylesheet's `[hidden]{display:none}` is an attribute selector
   (low specificity), so an ID rule like `#airtel-chat-panel{display:flex}`
   below wins and the element stays visually shown even while
   `element.hidden` is `true`. Confirmed live: the chat panel and the lead
   form were both permanently visible on every page load. This one
   `!important` rule restores `hidden` as the final word regardless of
   what any other rule in this file sets. */
[hidden] { display: none !important; }
#airtel-chat-widget { position: fixed; bottom: 20px; right: 20px; z-index: 99999; font-family: sans-serif; }
#airtel-chat-bubble { width: 56px; height: 56px; border-radius: 50%; border: none; background: #d81f26; color: #fff; font-size: 24px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
#airtel-chat-panel { position: fixed; bottom: 90px; right: 20px; width: 320px; max-width: calc(100vw - 40px); height: 440px; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; }
#airtel-chat-header { background: #d81f26; color: #fff; padding: 12px; display: flex; justify-content: space-between; align-items: center; }
#airtel-chat-close { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
#airtel-chat-messages { flex: 1; overflow-y: auto; padding: 12px; }
.airtel-chat-msg { margin-bottom: 8px; padding: 8px 10px; border-radius: 6px; max-width: 85%; word-wrap: break-word; }
.airtel-chat-msg-visitor { background: #eee; margin-left: auto; }
.airtel-chat-msg-ai, .airtel-chat-msg-agent, .airtel-chat-msg-system { background: #ffe5e6; }
.airtel-chat-heading { font-weight: 700; color: #a8161b; margin: 8px 0 3px; }
.airtel-chat-heading:first-child { margin-top: 0; }
.airtel-chat-list { margin: 0 0 6px; padding-left: 18px; }
.airtel-chat-list li { margin-bottom: 2px; }
.airtel-chat-line { margin-bottom: 4px; }
.airtel-chat-line:last-child, .airtel-chat-list:last-child { margin-bottom: 0; }
.airtel-chat-typing { display: flex; align-items: center; gap: 4px; padding: 10px 12px; }
.airtel-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: #d81f26; opacity: .4; animation: airtel-chat-typing-bounce 1s infinite ease-in-out; }
.airtel-chat-typing span:nth-child(2) { animation-delay: .15s; }
.airtel-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes airtel-chat-typing-bounce { 0%, 60%, 100% { opacity: .4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
#airtel-chat-form { display: flex; border-top: 1px solid #eee; }
#airtel-chat-input { flex: 1; border: none; padding: 10px; }
#airtel-chat-form button { border: none; background: #d81f26; color: #fff; padding: 0 14px; cursor: pointer; }
#airtel-chat-lead-prompt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid #eee; background: #fafafa; font-size: 13px; }
#airtel-chat-lead-open { border: none; background: #d81f26; color: #fff; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; white-space: nowrap; }
/* Client report: the lead form used to be squeezed in alongside the
   transcript inside the panel's fixed height, leaving almost no room to
   see the chat and no way to dismiss it. It now replaces the transcript
   view entirely (via updateLeadFormVisibility() in widget.js) instead
   of sharing space with it, and flex:1 lets it use that same full area
   rather than only its own natural content height. */
#airtel-chat-lead-form { flex: 1; padding: 12px; border-top: 1px solid #eee; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
#airtel-chat-lead-form-header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: 4px; }
#airtel-chat-lead-close { border: none; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: #666; }
#airtel-chat-lead-form input, #airtel-chat-lead-form textarea { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
#airtel-chat-lead-form button[type="submit"] { border: none; background: #d81f26; color: #fff; padding: 10px; border-radius: 4px; cursor: pointer; font-size: 14px; }