/* Mahatosoft Chat — the React site's ChatWidget, same look. Scoped under
   #ms-chat so theme and Elementor styles can't change it. */
#ms-chat {
  --blue: #19639A; --blue-700: #124b76; --blue-900: #0d3554; --blue-50: #eef5fb; --blue-100: #d8e7f4;
  --orange: #ED804B; --orange-hover: #E0703A;
  --ink: #111827; --text: #1F2937; --soft: #6B7280; --line: #E5E7EB; --gray-50: #F9FAFB; --gray-100: #F3F4F6;
  --card: #ffffff; --page: #ffffff; --sh: 0 1px 2px rgba(17,24,39,.05);
  --h: 'Plus Jakarta Sans', system-ui, sans-serif; --b: 'DM Sans', system-ui, sans-serif;
  position: fixed; right: 18px; bottom: 18px; z-index: 99990;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  font-family: var(--b); font-size: 16px; line-height: normal; color: var(--text); text-align: left;
  pointer-events: none;
}
#ms-chat *, #ms-chat *::before, #ms-chat *::after { box-sizing: border-box; }
#ms-chat p, #ms-chat span, #ms-chat a, #ms-chat button, #ms-chat input, #ms-chat form { margin: 0; letter-spacing: normal; text-transform: none; }
#ms-chat button { font: inherit; box-shadow: none; min-height: 0; line-height: 1.2; }
#ms-chat a { text-decoration: none; box-shadow: none; }
#ms-chat [hidden] { display: none !important; }
#ms-chat svg { display: block; }

@keyframes ms-chat-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ms-chat-ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.9); opacity: 0; } }

#ms-chat .msc-panel {
  pointer-events: auto; width: 372px; max-width: calc(100vw - 36px); height: 540px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 70px -20px rgba(17,24,39,.42); overflow: hidden; animation: ms-chat-in 240ms cubic-bezier(.2,.7,.3,1) both;
}
@media (max-width: 479px) { #ms-chat .msc-panel { width: calc(100vw - 36px); height: min(74vh, 540px); } }

#ms-chat .msc-head { flex: none; display: flex; gap: 12px; align-items: center; padding: 15px 16px; background: linear-gradient(135deg, var(--blue-900), var(--blue)); color: #fff; }
#ms-chat .msc-avatar { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); }
#ms-chat .msc-avatar img { width: 24px; height: 24px; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; max-width: none; }
#ms-chat .msc-avatar b { font-family: var(--h); font-weight: 800; font-size: 16px; color: #fff; }
#ms-chat .msc-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #3FBF6F; border: 2px solid var(--blue-900); }
#ms-chat .msc-titles { flex: 1; min-width: 0; }
#ms-chat .msc-title { display: block; font-family: var(--h); font-weight: 700; font-size: 15.5px; color: #fff; }
#ms-chat .msc-sub { display: block; font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.4; }
#ms-chat .msc-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; }
#ms-chat .msc-x:hover { background: rgba(255,255,255,.26); color: #fff; }

#ms-chat .msc-log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; background: var(--gray-50); display: flex; flex-direction: column; gap: 12px; }
#ms-chat .msc-row { display: flex; justify-content: flex-start; }
#ms-chat .msc-row.you { justify-content: flex-end; }
#ms-chat .msc-bubble { max-width: 84%; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 11px 14px; font-size: 14.5px; line-height: 1.6; box-shadow: var(--sh); white-space: pre-line; overflow-wrap: anywhere; }
#ms-chat .msc-row.you .msc-bubble { background: var(--blue); color: #fff; border-color: var(--blue); border-radius: 14px 14px 4px 14px; }
#ms-chat .msc-bubble a.msc-inline { color: var(--blue-700); text-decoration: underline; text-underline-offset: 2px; }
#ms-chat .msc-label { display: block; font-family: var(--h); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-bottom: 6px; line-height: 1.3; }
#ms-chat .msc-routes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--gray-100); white-space: normal; }
#ms-chat .msc-route { font-family: var(--h); font-weight: 600; font-size: 12.5px; color: var(--blue-700); white-space: nowrap; }
#ms-chat .msc-route:hover { color: var(--blue); }

#ms-chat .msc-foot { flex: none; border-top: 1px solid var(--line); background: var(--card); }
#ms-chat .msc-chips { display: flex; gap: 7px; padding: 12px 12px 0; flex-wrap: wrap; }
#ms-chat .msc-chip { border: 1px solid var(--blue-100); background: var(--blue-50); color: var(--blue-700); border-radius: 999px; padding: 8px 13px; font-family: var(--h); font-weight: 600; font-size: 12.5px; line-height: 1.2; cursor: pointer; white-space: nowrap; }
#ms-chat .msc-chip:hover { background: var(--blue-100); color: var(--blue-700); }
#ms-chat .msc-form { display: flex; gap: 9px; align-items: center; padding: 12px; }
#ms-chat .msc-input { flex: 1; min-width: 0; width: auto; height: auto; border: 1px solid var(--line); border-radius: 999px; padding: 12px 15px; font-family: var(--b); font-size: 14.5px; line-height: 1.3; color: var(--ink); background: var(--page); box-shadow: none; outline: none; margin: 0; }
#ms-chat .msc-input:focus { border-color: var(--blue); }
#ms-chat .msc-send { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 0; background: var(--orange); color: var(--ink); cursor: pointer; }
#ms-chat .msc-send:hover { background: var(--orange-hover); color: var(--ink); }
#ms-chat .msc-note { margin: 0; padding: 0 14px 12px; font-size: 11.5px; line-height: 1.5; color: var(--soft); }
#ms-chat .msc-note a { color: var(--blue); font-weight: 500; }

#ms-chat .msc-fab { pointer-events: auto; position: relative; display: grid; place-items: center; width: 58px; height: 58px; border: 0; background: var(--blue); color: #fff; border-radius: 50%; padding: 0; box-shadow: 0 16px 36px -10px rgba(25,99,154,.7); cursor: pointer; transition: background 200ms ease, transform 200ms ease; }
#ms-chat .msc-fab:hover { background: var(--blue-700); color: #fff; transform: translateY(-2px); }
#ms-chat .msc-ping { position: absolute; inset: 0; border-radius: 50%; background: var(--blue); animation: ms-chat-ping 2.4s ease-out infinite; pointer-events: none; }
#ms-chat .msc-fab-icon { position: relative; z-index: 1; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { #ms-chat .msc-ping, #ms-chat .msc-panel { animation: none; } }

/* ---- v2: typing indicator, page results, lead form ---------------------- */
@keyframes ms-chat-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
#ms-chat .msc-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
#ms-chat .msc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--soft); animation: ms-chat-dot 1.1s infinite ease-in-out; }
#ms-chat .msc-typing i:nth-child(2) { animation-delay: .15s; }
#ms-chat .msc-typing i:nth-child(3) { animation-delay: .3s; }

#ms-chat .msc-pages { display: grid; gap: 8px; margin-top: 10px; white-space: normal; }
#ms-chat .msc-page { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--gray-50); }
#ms-chat .msc-page:hover { border-color: var(--blue-100); background: var(--blue-50); }
#ms-chat .msc-page-t { display: block; font-family: var(--h); font-weight: 700; font-size: 13px; line-height: 1.35; color: var(--blue-700); }
#ms-chat .msc-page-s { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--soft); }

#ms-chat .msc-bubble--form { width: 100%; max-width: 100%; white-space: normal; }
#ms-chat .msc-lead { display: grid; gap: 8px; margin: 0; }
#ms-chat .msc-lead-h { display: block; font-family: var(--h); font-weight: 700; font-size: 14.5px; color: var(--ink); }
#ms-chat .msc-lead-p { display: block; font-size: 13px; line-height: 1.5; color: var(--soft); margin-bottom: 2px; }
#ms-chat .msc-lead input { width: 100%; height: auto; margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: var(--b); font-size: 14px; line-height: 1.3; color: var(--ink); background: var(--page); box-shadow: none; outline: none; }
#ms-chat .msc-lead input:focus { border-color: var(--blue); }
#ms-chat .msc-lead .msc-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
#ms-chat .msc-lead-err { display: block; font-size: 12.5px; color: #B8531F; min-height: 0; }
#ms-chat .msc-lead-err:empty { display: none; }
#ms-chat .msc-lead-btn { border: 0; border-radius: 8px; padding: 11px 14px; background: var(--orange); color: var(--ink); font-family: var(--h); font-weight: 700; font-size: 14px; cursor: pointer; }
#ms-chat .msc-lead-btn:hover { background: var(--orange-hover); color: var(--ink); }
#ms-chat .msc-lead-btn:disabled { opacity: .7; cursor: progress; }