/* Union Maxwell - Live Chat Widget (Tawk-style, bottom-right) */
.umc-root, .umc-root * { box-sizing: border-box; }
.umc-root { font-family: Roboto, "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.4; color: #222; }
.umc-root [hidden] { display: none !important; }
.umc-root button, .umc-root input, .umc-root textarea, .umc-root select { font-family: inherit; font-size: inherit; margin: 0; }
.umc-root svg { display: block; }

/* ---------- bubble ---------- */
.umc-launcher {
  position: fixed !important; right: 20px !important; left: auto !important; bottom: 20px; z-index: 9990;
  width: 60px; height: 60px; border-radius: 50%; border: 0; padding: 0;
  background: #0b5cff; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  transition: transform .2s ease, background .2s ease;
}
.umc-launcher:hover { transform: scale(1.06); background: #0a50e0; }
.umc-launcher:focus-visible { outline: 3px solid #9bbcff; outline-offset: 3px; }
.umc-launcher svg { width: 30px; height: 30px; transition: opacity .2s, transform .25s; }
.umc-launcher .umc-ic-down { position: absolute; opacity: 0; transform: rotate(-90deg); width: 34px; height: 34px; }
.umc-root.umc-open .umc-launcher .umc-ic-chat { opacity: 0; transform: rotate(90deg); }
.umc-root.umc-open .umc-launcher .umc-ic-down { opacity: 1; transform: none; }
.umc-badge {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: #d40000; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}

/* ---------- greeting card + quick replies (closed state) ---------- */
.umc-hello {
  position: fixed; right: 26px; bottom: 100px; z-index: 9989; width: 286px; max-width: calc(100vw - 52px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 22px;
  animation: umc-in .4s ease-out both;
}
.umc-hello-card {
  width: 100%; background: #fff; border-radius: 14px 14px 0 14px; padding: 17px 20px; font-size: 15px; color: #222;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .14); cursor: pointer;
}
.umc-qr { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin: 14px 0 6px; }
.umc-hello .umc-qr { margin: 0; }
.umc-qrb {
  background: #fff; color: #0b5cff; border: 1px solid #0b5cff; border-radius: 18px; padding: 7px 17px;
  cursor: pointer; line-height: 1.3; transition: background .15s, color .15s;
}
.umc-qrb:hover { background: #0b5cff; color: #fff; }
@keyframes umc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- panel ---------- */
.umc-panel {
  position: fixed !important; right: 20px !important; left: auto !important; bottom: 98px; z-index: 99999;
  width: 350px; max-width: calc(100vw - 24px);
  height: 520px; max-height: calc(100vh - 118px); max-height: calc(100dvh - 118px);
  background: #fff; border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 5px 40px rgba(0, 0, 0, .18);
  transform-origin: bottom right; animation: umc-pop .22s ease-out;
}
@keyframes umc-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.umc-head { position: relative; flex: 0 0 60px; height: 60px; background: #0b5cff; color: #fff; display: flex; align-items: center; padding: 0 12px 0 10px; gap: 4px; }
.umc-head-title { flex: 1; font-size: 23px; font-weight: 400; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umc-hbtn { background: transparent; border: 0; color: #fff; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.umc-hbtn:hover { background: rgba(255, 255, 255, .15); }
.umc-hbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.umc-menu { position: absolute; top: 54px; right: 12px; z-index: 5; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, .22); padding: 6px 0; min-width: 160px; }
.umc-menu button { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 10px 18px; font-size: 14px; color: #222; cursor: pointer; }
.umc-menu button:hover { background: #f1f4fa; }

.umc-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 12px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.umc-msgs::-webkit-scrollbar { width: 6px; }
.umc-msgs::-webkit-scrollbar-thumb { background: #b9b9b9; border-radius: 3px; }
.umc-msgs > :first-child { margin-top: auto; }

.umc-arow { display: flex; align-items: flex-end; gap: 10px; }
.umc-av { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.umc-av svg { width: 40px; height: 40px; }
.umc-acol { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; max-width: 232px; }
.umc-alabel { font-size: 12px; color: #222; margin-bottom: 0; }
.umc-b { padding: 10px 12px; border-radius: 8px; background: #0b5cff; color: #fff; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; max-width: 100%; }
.umc-b a.umc-att { color: inherit; text-decoration: underline; display: block; margin-top: 2px; }
.umc-mrow { display: flex; justify-content: flex-end; }
.umc-b.umc-me { background: #e6e6e6; color: #222; max-width: 82%; }
.umc-b.umc-pending { opacity: .65; }
.umc-b.umc-fail { background: #f6d6d6; cursor: pointer; }
.umc-sys { align-self: center; text-align: center; font-size: 12.5px; color: #666; padding: 2px 10px; }
.umc-typing { display: flex; gap: 4px; padding: 14px 14px; }
.umc-typing i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .5; animation: umc-dot 1s infinite ease-in-out; }
.umc-typing i:nth-child(2) { animation-delay: .15s; }
.umc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes umc-dot { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- in-chat form ---------- */
.umc-form-wrap { padding-left: 50px; }
.umc-fm { display: flex; flex-direction: column; gap: 14px; width: 210px; }
.umc-fm input[type="text"], .umc-fm input[type="email"], .umc-fm input[type="tel"], .umc-fm textarea {
  width: 100%; height: 40px; border: 1px solid #1d1d1d; border-radius: 8px; padding: 0 14px; background: #fff; color: #222; font-size: 14px; outline: 0;
}
.umc-fm textarea { height: 80px; padding: 10px 14px; resize: none; }
.umc-fm input::placeholder, .umc-fm textarea::placeholder { color: #333; opacity: 1; }
.umc-fm input:focus, .umc-fm textarea:focus, .umc-phone:focus-within { border-color: #0b5cff; box-shadow: 0 0 0 1px #0b5cff; }
.umc-phone { position: relative; display: flex; align-items: stretch; height: 40px; border: 1px solid #1d1d1d; border-radius: 8px; background: #fff; }
.umc-phone label { position: absolute; top: -9px; left: 74px; background: #fff; padding: 0 4px; font-size: 12px; color: #333; line-height: 1; }
.umc-phone select { width: 70px; border: 0; border-right: 1px solid #1d1d1d; background: transparent; padding: 0 2px 0 8px; font-size: 13px; color: #222; outline: 0; border-radius: 8px 0 0 8px; cursor: pointer; }
.umc-phone input[type="tel"] { border: 0 !important; box-shadow: none !important; height: 100% !important; padding: 0 10px !important; border-radius: 0 8px 8px 0 !important; flex: 1; min-width: 0; }
.umc-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.umc-err { color: #c0392b; font-size: 12.5px; line-height: 1.3; }
.umc-err:empty { display: none; }
.umc-subrow { display: flex; align-items: flex-end; gap: 10px; margin-left: -50px; }
.umc-submit { display: flex; align-items: center; justify-content: center; gap: 8px; height: 45px; padding: 0 20px; background: #0b5cff; color: #fff; border: 0; border-radius: 8px; font-size: 16px; cursor: pointer; }
.umc-submit:hover { background: #0a50e0; }
.umc-submit:disabled { opacity: .65; cursor: default; }
.umc-submit svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }

/* ---------- footer (input) ---------- */
.umc-ended { flex: 0 0 auto; padding: 14px 16px; text-align: center; font-size: 14px; border-top: 1px solid #eee; background: #fff; }
.umc-ended button { margin-top: 8px; width: 100%; background: #0b5cff; color: #fff; border: 0; border-radius: 8px; padding: 11px; cursor: pointer; font-size: 15px; }
.umc-foot { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 14px 6px 16px; background: #fff; box-shadow: 0 -2px 10px rgba(0, 0, 0, .06); }
.umc-foot textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; font-size: 14px; color: #222; height: 36px; max-height: 96px; padding: 8px 0; line-height: 20px; }
.umc-foot textarea::placeholder { color: #8a8a8a; }
.umc-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.umc-ic { flex: 0 0 28px; background: transparent; border: 0; padding: 3px; width: 28px; height: 28px; color: #222; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.umc-ic:hover { background: #f1f1f1; }
.umc-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.umc-rate { display: flex; align-items: center; }
.umc-rate .umc-down { display: none; color: #d40000; }
.umc-rate .umc-down svg { transform: scaleY(-1); }
.umc-rate:hover .umc-down, .umc-rate:focus-within .umc-down { display: flex; }
.umc-rate:hover .umc-up, .umc-rate:focus-within .umc-up { color: #1a9a3a; }
.umc-up.umc-on { color: #1a9a3a; background: #e6f5ea; }
.umc-down.umc-on { display: flex; color: #d40000; background: #fbe6e6; }
.umc-emoji { position: absolute; right: 10px; bottom: 56px; z-index: 6; width: 262px; background: #fff; border-radius: 10px; box-shadow: 0 4px 22px rgba(0, 0, 0, .25); padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.umc-emoji button { background: transparent; border: 0; font-size: 20px; line-height: 1; padding: 5px 0; cursor: pointer; border-radius: 6px; }
.umc-emoji button:hover { background: #f1f1f1; }

/* ---------- phones ---------- */
@media (max-width: 480px) {
  .umc-launcher { right: 14px !important; bottom: 14px; width: 56px; height: 56px; }
  .umc-hello { right: 20px; bottom: 88px; }
  .umc-panel { right: 0 !important; left: 0 !important; top: 0; bottom: 0; width: auto; max-width: none; height: auto; max-height: none; border-radius: 0; }
  .umc-root.umc-open .umc-launcher { display: none; }
  .umc-foot textarea, .umc-fm input, .umc-fm textarea { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) { .umc-panel, .umc-hello, .umc-typing i { animation: none; } }

/* keep the site's back-to-top button clear of the chat bubble */
.back-to-top { bottom: 100px !important; }
@media (max-width: 480px) { .back-to-top { bottom: 84px !important; right: 18px !important; } }