/* AI chat widget (Eva) - floating bubble + overlay panel */

:root {
 --ai-chat-primary: #0085af;
 --ai-chat-primary-dark: #025671;
 --ai-chat-bg: #ffffff;
 --ai-chat-bg-soft: #eef4f7;
 --ai-chat-text: #1b2733;
 --ai-chat-muted: #6b7680;
 --ai-chat-border: #e1e8ec;
}

.ai-chat-bubble {
 position: fixed;
 right: 20px;
 bottom: 100px;
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background: var(--ai-chat-primary);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
 cursor: pointer;
 z-index: 10050;
 border: none;
 transition: transform 0.15s ease, background 0.15s ease;
}

.ai-chat-bubble:hover {
 background: var(--ai-chat-primary-dark);
 transform: scale(1.06);
}

.ai-chat-bubble .ai-chat-unread {
 position: absolute;
 top: -4px;
 right: -4px;
 background: #e63946;
 color: #fff;
 font-size: 11px;
 line-height: 18px;
 min-width: 18px;
 height: 18px;
 border-radius: 9px;
 text-align: center;
 padding: 0 4px;
}

.ai-chat-nudge {
 position: fixed;
 right: 20px;
 bottom: 170px;
 max-width: 260px;
 background: var(--ai-chat-bg);
 color: var(--ai-chat-text);
 border-radius: 14px;
 border-bottom-right-radius: 4px;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
 padding: 14px 30px 14px 16px;
 font-size: 14px;
 line-height: 1.4;
 z-index: 10049;
 cursor: pointer;
 opacity: 0;
 transform: translateY(8px);
 transition: opacity 0.25s ease, transform 0.25s ease;
 pointer-events: none;
}

.ai-chat-nudge.visible {
 opacity: 1;
 transform: translateY(0);
 pointer-events: auto;
}

.ai-chat-nudge-close {
 position: absolute;
 top: 6px;
 right: 8px;
 background: none;
 border: none;
 color: var(--ai-chat-muted);
 font-size: 14px;
 line-height: 1;
 cursor: pointer;
 padding: 4px;
}

.ai-chat-nudge-close:hover {
 color: var(--ai-chat-text);
}

.ai-chat-panel {
 position: fixed;
 right: 20px;
 bottom: 170px;
 width: 360px;
 max-width: calc(100vw - 40px);
 height: 520px;
 max-height: calc(100vh - 200px);
 background: var(--ai-chat-bg);
 color: var(--ai-chat-text);
 border-radius: 14px;
 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
 display: none;
 flex-direction: column;
 overflow: hidden;
 z-index: 10051;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ai-chat-panel.open {
 display: flex;
}

.ai-chat-panel.expanded {
 width: 720px;
 height: 1040px;
 transition: width 0.15s ease, height 0.15s ease;
}

.ai-chat-header {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 14px 16px;
 background: var(--ai-chat-primary);
 color: #fff;
}

.ai-chat-header .ai-chat-avatar {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 background: var(--ai-chat-primary-dark);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 flex-shrink: 0;
}

.ai-chat-header .ai-chat-title {
 flex: 1;
}

.ai-chat-header .ai-chat-title strong {
 display: block;
 font-size: 15px;
 color: #fff;
}

.ai-chat-header .ai-chat-title span {
 display: block;
 font-size: 12px;
 color: rgba(255, 255, 255, 0.8);
}

.ai-chat-header button {
 background: none;
 border: none;
 color: rgba(255, 255, 255, 0.8);
 font-size: 15px;
 cursor: pointer;
 padding: 4px 6px;
}

.ai-chat-header button:hover {
 color: #fff;
}

.ai-chat-menu-wrap {
 position: relative;
}

.ai-chat-menu-toggle {
 font-size: 18px !important;
 line-height: 1;
}

.ai-chat-menu {
 display: none;
 position: absolute;
 top: 100%;
 right: 0;
 margin-top: 6px;
 background: var(--ai-chat-bg);
 border: 1px solid var(--ai-chat-border);
 border-radius: 8px;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
 min-width: 180px;
 overflow: hidden;
 z-index: 10052;
}

.ai-chat-menu-wrap.open .ai-chat-menu {
 display: block;
}

.ai-chat-menu button {
 display: block;
 width: 100%;
 text-align: left;
 padding: 10px 14px;
 background: var(--ai-chat-bg);
 color: var(--ai-chat-text) !important;
 border: none;
 font-size: 13px;
 cursor: pointer;
}

.ai-chat-menu button:hover:not(:disabled) {
 background: var(--ai-chat-bg-soft);
}

.ai-chat-menu button:disabled {
 color: var(--ai-chat-muted) !important;
 cursor: default;
 opacity: 0.6;
}

.ai-chat-back {
 font-size: 16px !important;
}

.ai-chat-thread-view {
 flex: 1;
 display: flex;
 flex-direction: column;
 min-height: 0;
}

.ai-chat-messages {
 flex: 1;
 overflow-y: auto;
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 background: var(--ai-chat-bg);
}

/* Peer-message bubbles reuse the same visual language as visitor/ai */

.ai-chat-msg.from-peer-mine {
 align-self: flex-end;
 background: var(--ai-chat-primary);
 color: #fff;
 border-bottom-right-radius: 4px;
}

.ai-chat-msg.from-peer-mine .ai-chat-msg-time {
 text-align: right;
 color: rgba(255, 255, 255, 0.85);
}

.ai-chat-msg.from-peer-theirs {
 align-self: flex-start;
 background: var(--ai-chat-bg-soft);
 color: var(--ai-chat-text);
 border-bottom-left-radius: 4px;
}

.ai-chat-msg.from-peer-theirs .ai-chat-msg-time {
 text-align: left;
 color: var(--ai-chat-muted);
}

/* List view (Support pinned row + peer conversations) - portal users only */

.ai-chat-list-view {
 flex: 1;
 display: flex;
 flex-direction: column;
 min-height: 0;
 background: var(--ai-chat-bg);
}

.ai-chat-list-toolbar {
 padding: 10px 14px;
 border-bottom: 1px solid var(--ai-chat-border);
}

.ai-chat-list-new-btn {
 width: 100%;
 background: var(--ai-chat-bg-soft);
 border: 1px dashed var(--ai-chat-primary);
 color: var(--ai-chat-primary-dark);
 border-radius: 8px;
 padding: 8px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
}

.ai-chat-list-new-btn:hover {
 background: #e2eef2;
}

.ai-chat-list-items {
 flex: 1;
 overflow-y: auto;
}

.ai-chat-list-item {
 padding: 12px 14px;
 border-bottom: 1px solid var(--ai-chat-border);
 cursor: pointer;
}

.ai-chat-list-item:hover {
 background: var(--ai-chat-bg-soft);
}

.ai-chat-list-item-name {
 font-weight: 600;
 font-size: 13px;
 color: var(--ai-chat-text);
 display: flex;
 align-items: center;
 gap: 6px;
}

.ai-chat-list-item-badge {
 background: var(--ai-chat-bg-soft);
 color: var(--ai-chat-muted);
 font-size: 10px;
 font-weight: 700;
 padding: 1px 6px;
 border-radius: 8px;
 text-transform: uppercase;
}

.ai-chat-list-item-unread {
 margin-left: auto;
 background: #e63946;
 color: #fff;
 font-size: 10px;
 font-weight: 700;
 min-width: 16px;
 height: 16px;
 line-height: 16px;
 text-align: center;
 border-radius: 8px;
 padding: 0 4px;
}

.ai-chat-list-item-preview {
 font-size: 12px;
 color: var(--ai-chat-muted);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 margin-top: 2px;
}

/* New-message contact picker modal (Bootstrap .modal, appended to body) */

.ai-chat-picker-groups {
 max-height: 360px;
 overflow-y: auto;
}

.ai-chat-picker-group-title {
 font-size: 12px;
 font-weight: 700;
 text-transform: uppercase;
 color: var(--ai-chat-muted);
 margin: 14px 0 6px;
}

.ai-chat-picker-group-title:first-child {
 margin-top: 0;
}

.ai-chat-picker-contact {
 display: block;
 padding: 8px 10px;
 border-radius: 4px;
 cursor: pointer;
 text-decoration: none;
 color: var(--ai-chat-text);
 font-size: 13px;
}

.ai-chat-picker-contact:hover {
 background: var(--ai-chat-bg-soft);
 text-decoration: none;
 color: var(--ai-chat-text);
}

.ai-chat-picker-empty {
 color: var(--ai-chat-muted);
 font-size: 13px;
 padding: 6px 10px;
}

.ai-chat-msg {
 max-width: 82%;
 padding: 10px 13px;
 border-radius: 14px;
 font-size: 14px;
 line-height: 1.4;
 word-wrap: break-word;
 white-space: pre-wrap;
}

.ai-chat-msg.from-visitor {
 align-self: flex-end;
 background: var(--ai-chat-primary);
 color: #fff;
 border-bottom-right-radius: 4px;
}

.ai-chat-msg.from-ai,
.ai-chat-msg.from-agent {
 align-self: flex-start;
 background: var(--ai-chat-bg-soft);
 color: var(--ai-chat-text);
 border-bottom-left-radius: 4px;
}

.ai-chat-msg.from-ai .ai-chat-msg-text a,
.ai-chat-msg.from-agent .ai-chat-msg-text a {
 color: var(--ai-chat-primary-dark);
 text-decoration: underline;
 word-break: break-all;
}

.ai-chat-msg.from-ai .ai-chat-msg-text code,
.ai-chat-msg.from-agent .ai-chat-msg-text code {
 background: rgba(0, 0, 0, 0.08);
 padding: 1px 5px;
 border-radius: 4px;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 0.9em;
}

.ai-chat-msg-text ul,
.ai-chat-msg-text ol {
 margin: 4px 0;
 padding-left: 20px;
 white-space: normal;
}

.ai-chat-msg-text li {
 margin: 2px 0;
}

.ai-chat-msg.from-system {
 align-self: center;
 background: transparent;
 color: var(--ai-chat-muted);
 font-size: 12px;
 text-align: center;
}

.ai-chat-msg-time {
 font-size: 10px;
 margin-top: 4px;
 opacity: 0.75;
}

.ai-chat-msg.from-visitor .ai-chat-msg-time {
 text-align: right;
 color: rgba(255, 255, 255, 0.85);
}

.ai-chat-msg.from-ai .ai-chat-msg-time,
.ai-chat-msg.from-agent .ai-chat-msg-time {
 text-align: left;
 color: var(--ai-chat-muted);
}

.ai-chat-typing {
 align-self: flex-start;
 display: flex;
 gap: 4px;
 padding: 10px 13px;
 background: var(--ai-chat-bg-soft);
 border-radius: 14px;
 border-bottom-left-radius: 4px;
}

.ai-chat-typing span {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--ai-chat-primary);
 opacity: 0.6;
 animation: ai-chat-typing-bounce 1.2s infinite ease-in-out;
}

.ai-chat-typing span:nth-child(2) {
 animation-delay: 0.15s;
}

.ai-chat-typing span:nth-child(3) {
 animation-delay: 0.3s;
}

@keyframes ai-chat-typing-bounce {

 0%,
 60%,
 100% {
  transform: translateY(0);
  opacity: 0.4;
 }

 30% {
  transform: translateY(-4px);
  opacity: 1;
 }
}

.ai-chat-input {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 12px;
 border-top: 1px solid var(--ai-chat-border);
 background: var(--ai-chat-bg);
}

.ai-chat-input textarea {
 flex: 1;
 resize: none;
 border: 1px solid var(--ai-chat-border);
 background: var(--ai-chat-bg-soft);
 color: var(--ai-chat-text);
 border-radius: 18px;
 padding: 10px 14px;
 font-size: 14px;
 max-height: 80px;
 line-height: 1.3;
}

.ai-chat-input textarea:focus {
 outline: none;
 border-color: var(--ai-chat-primary);
}

.ai-chat-input button {
 background: var(--ai-chat-primary);
 color: #fff;
 border: none;
 width: 38px;
 height: 38px;
 border-radius: 50%;
 flex-shrink: 0;
 cursor: pointer;
 font-size: 15px;
 transition: background 0.15s ease;
}

.ai-chat-input button:hover:not(:disabled) {
 background: var(--ai-chat-primary-dark);
}

.ai-chat-input button:disabled {
 opacity: 0.5;
 cursor: default;
}

.ai-chat-footer-actions {
 padding: 6px 16px 12px;
 text-align: center;
}

.ai-chat-footer-actions a {
 font-size: 12px;
 color: var(--ai-chat-muted);
 cursor: pointer;
 text-decoration: underline;
}

.ai-chat-rating {
 padding: 24px 16px;
 text-align: center;
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 16px;
}

.ai-chat-rating h4 {
 font-size: 15px;
 color: var(--ai-chat-text);
 margin: 0;
}

.ai-chat-rating .ai-chat-emojis {
 display: flex;
 justify-content: center;
 gap: 10px;
}

.ai-chat-rating .ai-chat-emojis button {
 background: none;
 border: none;
 font-size: 30px;
 cursor: pointer;
 padding: 6px;
 border-radius: 10px;
 transition: background 0.15s ease, transform 0.15s ease;
}

.ai-chat-rating .ai-chat-emojis button:hover {
 background: var(--ai-chat-bg-soft);
 transform: scale(1.15);
}

.ai-chat-ended {
 text-align: center;
 color: var(--ai-chat-muted);
 font-size: 13px;
 padding: 10px;
}

.ai-chat-new-convo {
 display: block;
 margin: 4px auto 8px;
 background: var(--ai-chat-primary);
 color: #fff;
 border: none;
 border-radius: 20px;
 padding: 10px 20px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 transition: background 0.15s ease;
}

.ai-chat-new-convo:hover {
 background: var(--ai-chat-primary-dark);
}

.ai-chat-contact-form {
 background: var(--ai-chat-bg-soft);
 border: 1px solid var(--ai-chat-border);
 border-radius: 10px;
 padding: 14px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 align-self: stretch;
}

.ai-chat-contact-form label {
 display: flex;
 flex-direction: column;
 gap: 4px;
 font-size: 12px;
 color: var(--ai-chat-muted);
 font-weight: 600;
}

.ai-chat-contact-form input {
 border: 1px solid var(--ai-chat-border);
 border-radius: 8px;
 padding: 8px 10px;
 font-size: 14px;
 color: var(--ai-chat-text);
 background: var(--ai-chat-bg);
}

.ai-chat-contact-form input:focus {
 outline: none;
 border-color: var(--ai-chat-primary);
}

/* intl-tel-input (showContactForm() in ai-chat-widget.js) wraps the phone
   input in its own .iti container and adds left padding for the flag
   dropdown via a rule of equal specificity to .ai-chat-contact-form input
   above - since intlTelInput.min.css loads before this stylesheet, the
   later-loaded rule above would otherwise win on source order and squash
   the number text under the flag button. Restated here, scoped to the
   phone input specifically, with higher specificity so it holds regardless
   of load order. */
.ai-chat-contact-form input.ai-chat-contact-phone {
 padding-left: 52px;
}

.ai-chat-contact-error {
 color: #c0392b;
 font-size: 12px;
 min-height: 14px;
}

.ai-chat-contact-submit {
 align-self: flex-end;
 background: var(--ai-chat-primary);
 color: #fff;
 border: none;
 border-radius: 18px;
 padding: 8px 18px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
}

.ai-chat-contact-submit:hover:not(:disabled) {
 background: var(--ai-chat-primary-dark);
}

.ai-chat-contact-submit:disabled {
 opacity: 0.6;
 cursor: default;
}

@media (max-width: 480px) {
 .ai-chat-panel {
  right: 10px;
  bottom: 90px;
  width: calc(100vw - 20px);
 }

 .ai-chat-bubble {
  right: 12px;
  bottom: 80px;
 }
}