/* Cửa sổ chat khách — giao diện chuẩn LiveChat open_chat (đo trực tiếp từ bản mẫu,
   xem docs/livechat-mau-ghi-chu.md). Một bố cục cho cả PC và mobile. */
:root {
  --lc-theme: #512767;
  --lc-theme-text: #fff;
  --lc-bg: #f8f8f8;
  --lc-text: #111;
  --lc-muted: #575757;
  --lc-sys: #6e6e6e;
  --lc-border: #e3e3e3;
  --lc-hbtn: #dfdfdf;
  --lc-shadow: rgba(0, 0, 0, .08) 0 .48px 2.41px -.38px, rgba(0, 0, 0, .25) 0 4px 20px -.75px;
  --lc-font: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--lc-font);
  background: var(--lc-bg);
  color: var(--lc-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.lc-app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
  background: var(--lc-bg);
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* —— Header: quay lại + menu bên trái, pill agent giữa, đóng bên phải —— */
.lc-header { position: absolute; inset: env(safe-area-inset-top) 0 auto 0; height: 0; z-index: 20; }
.lc-hbtn {
  position: absolute;
  top: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lc-hbtn);
  color: var(--lc-text);
  display: grid;
  place-items: center;
  transition: filter .15s;
}
.lc-hbtn:hover { filter: brightness(.94); }
.lc-hbtn:focus-visible, .lc-pill-head:focus-visible, .lc-thumb:focus-visible { outline: 2px solid var(--lc-theme); outline-offset: 2px; }
#lc-back { left: 8px; }
#lc-menu-btn { left: 44px; }
#lc-close { right: 8px; }

.lc-pill {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 176px);
  padding: 5px 13px 5px 5px;
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--lc-shadow);
  transition: padding .15s;
}
.lc-pill-head {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lc-text);
  white-space: nowrap;
  border-radius: 20px;
}
.lc-pill-avw { position: relative; flex: none; display: block; width: 30px; height: 30px; }
.lc-pill-av {
  display: block;
  width: 28px;
  height: 28px;
  margin: 1px;
  border-radius: 50%;
  object-fit: cover;
  background: #eee;
}
.lc-pill-dot { display: none; }
.lc-pill-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mở rộng: avatar 34 viền + chấm xanh, tên, 2 nút đánh giá */
.lc-pill.open { padding: 12px; max-width: calc(100% - 32px); }
.lc-pill.open .lc-pill-head { gap: 12px; }
.lc-pill.open .lc-pill-avw { width: 36px; height: 36px; border: 1px solid var(--lc-border); border-radius: 50%; }
.lc-pill.open .lc-pill-av { width: 34px; height: 34px; margin: 0; }
.lc-pill.open .lc-pill-dot {
  display: block;
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #268750;
}
.lc-pill-rate { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.lc-thumb {
  width: 44px;
  height: 44px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lc-text);
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
}
.lc-thumb:hover { background: #f2f2f2; }
.lc-thumb.sel { color: var(--lc-theme); }
.lc-thumb.sel path { fill: currentColor; fill-opacity: .18; }

/* —— Menu "…" —— */
.lc-menu {
  position: absolute;
  top: 48px;
  left: 32px;
  width: 235px;
  max-width: calc(100vw - 40px);
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--lc-shadow);
  z-index: 30;
}
.lc-menu-item {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 8px;
  border-radius: 6px;
  color: var(--lc-text);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.lc-menu-item svg { flex: none; margin-right: 8px; }
.lc-menu-item:hover, .lc-menu-item:focus-visible { background: #474747; color: #fff; }
.lc-mi-text { flex: 1; }
.lc-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: 24px;
  background: #b3b3b3;
  transition: background .15s;
}
.lc-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}
.lc-switch.on { background: #268750; }
.lc-switch.on::after { transform: translateX(20px); }

/* —— Vùng tin nhắn —— */
.lc-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.lc-feed { padding: calc(70px + env(safe-area-inset-top)) 0 16px; }
@media (min-width: 960px) { .lc-feed { padding-top: 30px; } }

.lc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 20px;
  margin-top: 4px;
}
.lc-row.lc-gap { margin-top: 22px; }
.lc-feed > :first-child { margin-top: 0; }
.lc-av {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: #eee;
}
.lc-av-ph {
  display: grid;
  place-items: center;
  background: var(--lc-theme);
  color: var(--lc-theme-text);
}
.lc-av-spacer { flex: none; width: 20px; }
.lc-col { min-width: 0; max-width: min(280px, calc(100% - 28px)); display: flex; flex-direction: column; }

/* Thẻ chào mừng + pre-chat + đánh giá */
.lc-row-card .lc-col { flex: 1; max-width: 345px; }
.lc-card {
  width: 100%;
  max-width: 345px;
  margin: 0 28px 10px 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--lc-border);
  border-radius: 20px;
}
.lc-card-in { padding: 8px; }
.lc-welcome {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--lc-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lc-welcome:last-child { margin-bottom: 0; }
.lc-rich a { color: inherit; text-decoration: underline; }
.lc-ul { margin: 0; padding-left: 20px; list-style: disc; }
.lc-ul li { margin: 0; }
.lc-field { margin: 0 0 8px; }
.lc-label { display: block; margin: 0 0 4px; font-size: 14px; color: var(--lc-text); }
.lc-input, .lc-textarea {
  display: block;
  width: 100%;
  margin: 2px 0;
  padding: 10px;
  font-size: 14px;
  color: var(--lc-text);
  background: #ededed;
  border: 1px solid #757575;
  border-radius: 6px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.lc-textarea { min-height: 84px; resize: vertical; }
.lc-input:focus, .lc-textarea:focus { border-color: var(--lc-theme); background: #fff; }
.lc-input.lc-invalid { border-color: #d93311; }
.lc-btn {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--lc-theme);
  color: var(--lc-theme-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  transition: filter .15s, opacity .15s;
}
.lc-btn:hover { filter: brightness(1.1); }
.lc-btn:disabled { opacity: .55; cursor: default; filter: none; }
.lc-btn-danger { background: #d93311; color: #fff; }
.lc-note { margin: 8px 0 0; font-size: 13px; color: #d93311; }
.lc-note.ok { color: #268750; }

/* Bong bóng tin nhắn */
.lc-bubble {
  padding: 12px 18px;
  font-size: 14px;
  line-height: 19.2px;
  border-radius: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.lc-agent .lc-bubble { background: #fff; color: var(--lc-text); }
.lc-me { justify-content: flex-end; }
.lc-me .lc-col { align-items: flex-end; }
.lc-me .lc-bubble { background: var(--lc-theme); color: var(--lc-theme-text); }
.lc-me .lc-bubble a { color: inherit; }
.lc-bubble.lc-img { padding: 0; background: transparent !important; overflow: hidden; }
.lc-bubble.lc-img img {
  display: block;
  max-width: 220px;
  max-height: 260px;
  border-radius: 10px;
  cursor: zoom-in;
  background: #eee;
}
.lc-bubble.lc-img .lc-cap { padding: 6px 2px 0; color: var(--lc-text); }
.lc-meta { margin: 4px 4px 0; font-size: 12px; color: var(--lc-sys); }
.lc-me .lc-meta { text-align: right; }
.lc-failed .lc-bubble { opacity: .6; }
.lc-failed .lc-meta { color: #d93311; cursor: pointer; }

/* Nút gợi ý (Nạp Tiền / Rút Tiền / Tài Khoản) */
.lc-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 23px 20px 0 24px; }
.lc-chip {
  padding: 9.8px 14px;
  border: 0;
  border-radius: 16px;
  background: var(--lc-hbtn);
  color: var(--lc-text);
  font-size: 14px;
  line-height: 18.2px;
  transition: filter .15s;
}
.lc-chip:hover { filter: brightness(.94); }

/* Dòng hệ thống */
.lc-sys {
  margin: 22px 20px 0;
  padding: 0 14px;
  text-align: center;
  font-size: 14px;
  line-height: 19px;
  color: var(--lc-sys);
  overflow-wrap: anywhere;
}
.lc-sys strong { font-weight: 600; }

/* Đang nhập */
.lc-typing .lc-bubble { padding: 18px; display: flex; gap: 4px; align-items: center; }
.lc-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a9a9a;
  animation: lcDot 1.2s infinite ease-in-out;
}
.lc-typing i:nth-child(2) { animation-delay: .15s; }
.lc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes lcDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Thẻ đánh giá sau khi đóng */
.lc-rate fieldset { margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.lc-rate legend { padding: 0; font-size: 14px; color: var(--lc-text); }
.lc-rate-opts { display: flex; gap: 6px; margin-top: 2px; }
.lc-rate-opt {
  width: 40px;
  height: 40px;
  padding: 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--lc-text);
  display: grid;
  place-items: center;
}
.lc-rate-opt:hover { background: #f2f2f2; }
.lc-rate-opt.sel { color: var(--lc-theme); }
.lc-rate-opt.sel path { fill: currentColor; fill-opacity: .18; }
.lc-rate-done { font-size: 14px; }

/* —— Đáy: banner, ô nhập, nút chat mới, powered —— */
.lc-bottom { flex: none; position: relative; padding-bottom: env(safe-area-inset-bottom); }
.lc-banner {
  margin: 0 15px 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff4e5;
  color: #7a4b00;
  font-size: 12.5px;
  text-align: center;
}
.lc-composer { position: relative; margin: 0 15px 3px; }
#lc-input {
  display: block;
  width: 100%;
  min-height: 46px;
  max-height: 136px;
  margin: 0;
  padding: 11px 84px 11px 48px;
  border: 1px solid var(--lc-border);
  border-radius: 32px;
  outline: none;
  resize: none;
  background: #fff;
  color: var(--lc-text);
  font-size: 14px;
  line-height: 21px;
  overflow-y: auto;
  transition: border-color .15s;
}
#lc-input:focus { border-color: var(--lc-theme); }
#lc-input::placeholder { color: #757575; }
.lc-cbtn {
  position: absolute;
  bottom: 7px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ededed;
  color: var(--lc-text);
  display: grid;
  place-items: center;
  transition: background .15s, color .15s, filter .15s;
}
.lc-cbtn:hover { filter: brightness(.95); }
.lc-cbtn-attach { left: 7px; }
.lc-cbtn-emoji { right: 45px; }
.lc-cbtn-send { right: 7px; background: var(--lc-theme); color: var(--lc-theme-text); }
.lc-cbtn-send:disabled { background: var(--lc-border); color: #b3b3b3; cursor: default; filter: none; }
.lc-emoji {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 296px;
  max-width: 100%;
  max-height: 230px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--lc-shadow);
  z-index: 25;
}
.lc-emoji button {
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
}
.lc-emoji button:hover { background: #f2f2f2; }
.lc-newchat { margin: 0 15px 3px; }
.lc-newchat .lc-btn { margin: 0; }
.lc-powered a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  font-size: 10.4px;
  line-height: 14px;
  color: var(--lc-muted);
  text-decoration: none;
}
#lc-powered-text { font-weight: 600; }

/* Hộp xác nhận đóng chat + xem ảnh */
.lc-modal, .lc-lightbox { position: absolute; inset: 0; z-index: 50; }
.lc-modal { background: rgba(0, 0, 0, .4); }
.lc-modal-card {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: 290px;
  max-width: calc(100% - 32px);
  padding: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--lc-shadow);
}
.lc-modal-head { display: flex; justify-content: flex-end; height: 28px; }
.lc-modal-x {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--lc-text);
  display: grid;
  place-items: center;
}
.lc-modal-x:hover { background: #f2f2f2; }
.lc-modal-body { padding: 0 8px 8px; }
.lc-modal-ico {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--lc-border);
  display: grid;
  place-items: center;
}
.lc-modal-text { margin: 16px 0; font-size: 16px; text-align: center; }
.lc-lightbox {
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .85);
  cursor: zoom-out;
}
.lc-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .lc-typing i { animation: none; }
}

/* —— Màn "Nhà" (đo từ bản mẫu #homescreen-wrapper): gradient 330px, tiêu đề 30px,
   thẻ agent bo 20, link bo 12 cách 8, thanh tab nổi 72px bo 26 + blur —— */
.lc-app[data-view="home"] .lc-header,
.lc-app[data-view="home"] .lc-main,
.lc-app[data-view="home"] .lc-banner,
.lc-app[data-view="home"] .lc-composer,
.lc-app[data-view="home"] .lc-newchat { display: none !important; }
.lc-home {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
}
.lc-home-bg { position: absolute; inset: 0 0 auto; height: 330px; pointer-events: none; }
.lc-home-bg i { position: absolute; inset: 0; }
.lc-home-bg i:nth-child(1) { background: radial-gradient(circle, #f6f4f7 0%, #e6e0e9 50%, #d288c6 160%); }
.lc-home-bg i:nth-child(2) { background: linear-gradient(160deg, #f4e5f5 -40%, #8d729c 45%, #04040b 120%); opacity: .85; }
.lc-home-bg i:nth-child(3) { background: linear-gradient(rgba(248, 248, 248, 0), #f8f8f8); }
.lc-home-in { position: relative; z-index: 1; }
.lc-home-title {
  margin: 0;
  padding: calc(64px + env(safe-area-inset-top)) 50px 0 24px;
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  color: #000;
  overflow-wrap: anywhere;
}
.lc-home-cardw { margin-top: 20px; padding: 0 16px; margin-bottom: 16px; }
.lc-home-card {
  display: flex;
  padding: 28px;
  border-radius: 20px;
  background: #fff;
  color: #000;
  box-shadow: rgba(0, 0, 0, .15) 0 .6px .54px -1.33px, rgba(0, 0, 0, .13) 0 2.29px 2.06px -2.67px, rgba(0, 0, 0, .04) 0 10px 9px -4px;
}
.lc-home-card.go { cursor: pointer; }
.lc-home-card { min-height: 100px; }
.lc-app[data-view="home"] .lc-powered { padding: 3px 0 4px; }
.lc-home-avw { position: relative; flex: none; width: 40px; height: 40px; margin-right: 12px; }
.lc-home-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.lc-home-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #268750;
}
.lc-home-txt { min-width: 0; flex: 1; max-width: 585px; padding-top: 1px; }
.lc-home-name { margin: 0 0 4px; font-size: 12px; line-height: normal; color: #6e6e6e; }
.lc-home-msg {
  margin: 0;
  font-size: 14px;
  line-height: 16.8px;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  padding-bottom: 2px;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.lc-home-links { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 16px; list-style: none; }
.lc-home-links li {
  border-radius: 12px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, .15) 0 .6px .54px -1.33px, rgba(0, 0, 0, .13) 0 2.29px 2.06px -2.67px, rgba(0, 0, 0, .04) 0 10px 9px -4px;
}
.lc-home-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 14px;
  color: #111;
  text-decoration: none;
  border-radius: 12px;
}
.lc-home-links a span { min-width: 0; overflow-wrap: anywhere; }
.lc-home-links svg { flex: none; width: 24px; height: 24px; fill: #6e6e6e; }
.lc-home-links a:hover svg { fill: #111; }
.lc-tabs {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(100% + 3px);
  z-index: 5;
  display: flex;
  height: 72px;
  border: 1px solid #e3e3e3;
  border-radius: 26px;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: rgba(0, 0, 0, .09) 0 .6px 1.57px -.75px, rgba(0, 0, 0, .094) 0 2.29px 5.95px -1.5px, rgba(0, 0, 0, .11) 0 10px 26px -2.25px;
}
.lc-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 1px 6px;
  border: 0;
  border-radius: 26px;
  background: transparent;
  color: #6e6e6e;
  font-size: 13.33px;
}
.lc-tab.on { color: #111; }
.lc-tab svg { width: 24px; height: 24px; }
.lc-tab .lc-tab-fill { fill: none; }
.lc-tab.on .lc-tab-fill { fill: currentColor; }