/* 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-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.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);
}

.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;
 }
}