.mlh-support-chat .chat-panel { width: 370px; max-height: min(680px, calc(100vh - 120px)); } .mlh-support-chat .chat-panel-body { gap: 12px; padding: 16px; max-height: min(599px, calc(100vh - 201px)); overflow-y: auto; overscroll-behavior: contain; } .mlh-support-chat .chat-indicator, .mlh-support-chat .chat-agent-status { background: #d13b3b; } .mlh-support-chat.is-chat-ready .chat-indicator, .mlh-support-chat.is-chat-ready .chat-agent-status { background: #168754; } .mlh-chat-scope { margin: 0; border-radius: 10px; background: #f5f7fc; color: #536080; font-size: 0.78rem; line-height: 1.45; padding: 9px 11px; } .mlh-chat-messages { display: flex; flex-direction: column; gap: 10px; min-height: 84px; max-height: 230px; margin: 0; padding: 2px; overflow-y: auto; overscroll-behavior: contain; list-style: none; } .mlh-chat-message { max-width: 88%; border-radius: 14px; padding: 10px 12px; color: #1d2554; font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; } .mlh-chat-message.is-agent { align-self: flex-start; border-bottom-left-radius: 4px; background: #f1f4ff; } .mlh-chat-message.is-user { align-self: flex-end; border-bottom-right-radius: 4px; background: #27345f; color: #fff; } .mlh-chat-fallback { border: 1px solid #f2d9a3; border-radius: 12px; background: #fff9ec; padding: 11px; } .mlh-chat-fallback p { margin: 0 0 9px; color: #665126; font-size: 0.82rem; line-height: 1.45; } .mlh-chat-ticket-btn { display: inline-flex; align-items: center; border-radius: 999px; background: #27345f; color: #fff; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; } .mlh-chat-ticket-btn:hover, .mlh-chat-ticket-btn:focus { color: #fff; background: #17203f; } .mlh-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; } .mlh-chat-form textarea { width: 100%; min-height: 46px; max-height: 120px; resize: vertical; border: 1px solid #d6dbea; border-radius: 12px; background: #fff; color: #1d2554; font-size: 0.9rem; line-height: 1.4; padding: 10px 12px; } .mlh-chat-form textarea:focus { border-color: #4b5aff; box-shadow: 0 0 0 3px rgba(75, 90, 255, 0.14); outline: none; } .mlh-chat-send { min-height: 46px; border: 0; border-radius: 12px; background: #4b5aff; color: #fff; display: inline-flex; align-items: center; gap: 7px; font-size: 0.86rem; font-weight: 700; padding: 0 14px; } .mlh-chat-send:hover, .mlh-chat-send:focus { background: #3443e7; } .mlh-chat-send:disabled, .mlh-chat-form textarea:disabled { cursor: not-allowed; opacity: 0.6; } .mlh-chat-status { min-height: 1.25em; margin: 0; color: #697594; font-size: 0.76rem; line-height: 1.35; } .mlh-chat-status.is-error { color: #a73838; } @media (max-width: 575px) { .mlh-support-chat .chat-panel { width: calc(100vw - 36px); max-height: calc(100vh - 116px); } .mlh-chat-messages { max-height: min(220px, 32vh); } } @media (prefers-reduced-motion: reduce) { .mlh-support-chat .chat-panel, .mlh-support-chat .chat-trigger, .mlh-support-chat .chat-close, .mlh-support-chat .btn-whatsapp, .mlh-support-chat .mlh-chat-ticket-btn { scroll-behavior: auto; transition: none !important; transform: none; } } .mlh-support-chat{position:fixed;bottom:20px;right:20px;z-index:50;font-family:var(--mlh-font)} .mlh-support-chat .chat-trigger{min-width:60px;min-height:48px;padding:12px 18px;border:0;border-radius:24px;background:var(--mlh-navy);color:white;font:700 .9rem var(--mlh-font);box-shadow:0 6px 24px #202a5528;cursor:pointer} .mlh-support-chat .chat-panel{position:absolute;right:0;bottom:62px;max-width:calc(100vw - 40px);background:white;border:1px solid var(--mlh-line);border-radius:16px;box-shadow:0 12px 48px #202a5528;visibility:hidden;overflow:hidden} .mlh-support-chat.open .chat-panel{visibility:visible} .mlh-support-chat .chat-panel-header{display:flex;gap:12px;align-items:center;padding:16px;background:var(--mlh-navy);color:white} .mlh-support-chat .chat-agent-avatar{background:#ffffff20;padding:8px;border-radius:8px;font-weight:700} .mlh-support-chat .chat-agent-meta{display:grid;flex:1;font-size:.9rem}.mlh-support-chat .chat-agent-role{font-size:.75rem} .mlh-support-chat .chat-close{min-width:44px;min-height:44px;border:0;background:transparent;color:white;font-size:1.8rem;cursor:pointer} .mlh-support-chat .chat-panel-body{display:grid}.mlh-support-chat .chat-action-buttons{display:flex;gap:16px;align-items:center} .mlh-support-chat .mlh-chat-send{background:var(--mlh-action)}.mlh-support-chat .mlh-chat-send:hover{background:#922a04} .mlh-support-chat .mlh-chat-form textarea{border-color:var(--mlh-control)}.mlh-support-chat .mlh-chat-status{color:var(--mlh-muted)} .mlh-support-chat .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .mlh-support-chat [hidden]{display:none!important}