/* กล่องแชท — โทน LandLinkGo (home.html) */
.chat-bubble{
  --c-bg:#fff;
  --c-surface:#f1f3f4;
  --c-surface-alt:#e8eaed;
  --c-text:#202124;
  --c-muted:#5f6368;
  --c-line:#dfe1e5;
  --c-pill:#f1f3f4;
  --c-me-bg:#f1f3f4;
  --c-me-text:#202124;
  --c-me-border:#dfe1e5;
  --c-accent:#1a1a1a;
  --c-accent-hover:#333;
  --c-ink:#1a1a1a;
  --c-active-border:#1a73e8;
  --c-online:#1a73e8;
  --c-offline:#dfe1e5;
  --c-shadow:0 1px 6px rgba(32,33,36,.12);
  --c-shadow-hover:0 2px 12px rgba(32,33,36,.18);
  --c-launcher-bg:linear-gradient(145deg,#e8f2ff 0%,#c7dcff 100%);
  --c-launcher-bg-hover:linear-gradient(145deg,#dceaff 0%,#b8d4ff 100%);
  --c-launcher-icon:#1a1a1a;
  --c-launcher-ring:#aec8f5;
  --c-launcher-ring-hover:#8fb4f0;
  --c-launcher-glow:0 1px 6px rgba(32,33,36,.18),0 4px 14px rgba(26,115,232,.15);
  --c-launcher-badge:#1a1a1a;
  --c-launcher-badge-text:#fff;
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:18000;
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  color:var(--c-text);
}
.chat-launcher{
  position:relative;
  width:64px;
  height:64px;
  border:2px solid var(--c-launcher-ring);
  border-radius:999px;
  background:var(--c-launcher-bg);
  color:var(--c-launcher-icon);
  font-size:0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--c-launcher-glow);
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.chat-launcher:hover{
  transform:translateY(-2px);
  background:var(--c-launcher-bg-hover);
  border-color:var(--c-launcher-ring-hover);
  box-shadow:0 6px 18px rgba(16,163,127,.48),0 2px 8px rgba(16,163,127,.32);
}
.chat-launcher:focus-visible{
  outline:2px solid #1a73e8;
  outline-offset:3px;
}
.chat-launcher-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  pointer-events:none;
}
.chat-launcher-icon svg{
  width:28px;
  height:28px;
  display:block;
}
.chat-launcher-badge{
  position:absolute;
  top:-5px;
  right:-3px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:var(--c-launcher-badge);
  color:var(--c-launcher-badge-text);
  border:2px solid #fff;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(32,33,36,.2);
  display:flex;
  align-items:center;
  justify-content:center;
}
.chat-launcher-badge[hidden]{
  display:none!important;
}
.chat-pop{
  position:fixed;
  right:22px;
  bottom:96px;
  width:min(680px,calc(100vw - 28px));
  height:min(660px,calc(100vh - 112px));
  display:none;
  flex-direction:column;
  overflow:hidden;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:20px;
  box-shadow:var(--c-shadow-hover);
}
.chat-pop.show{ display:flex; }
.chat-pop.show > .chat-head,
.chat-pop.show > .chat-profile,
.chat-pop.show > .chat-user-search-bar,
.chat-pop.show > .chat-send{ flex-shrink:0; }
.chat-pop.chat-pop--pick-user > .chat-send{ display:none !important; }
.chat-pop.show > .chat-body{
  flex:1 1 0%!important;
  min-height:0!important;
  max-height:100%;
}
.chat-head{
  height:56px;
  padding:0 18px;
  border-bottom:1px solid var(--c-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--c-bg);
  color:var(--c-text);
}
.chat-user-search-bar{
  padding:8px 12px 10px;
  border-bottom:1px solid var(--c-line);
  background:var(--c-bg);
}
.chat-user-search{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 12px;
  border:1px solid var(--c-line);
  border-radius:999px;
  background:var(--c-surface);
}
.chat-user-search:focus-within{
  border-color:#86efac;
  background:#fff;
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
}
.chat-user-search-ico{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:var(--c-muted);
}
.chat-user-search input{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  outline:none;
  font:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--c-text);
}
.chat-user-search input::placeholder{
  color:var(--c-muted);
  font-weight:600;
}
.chat-title{
  font-size:15px;
  font-weight:600;
  color:var(--c-text);
  letter-spacing:-.01em;
}
.chat-badge,
#chatCount{
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:1000;
  white-space:nowrap;
  background:var(--c-pill);
  color:var(--c-muted);
  border:1px solid var(--c-line);
}
#chatCloseBtn{
  padding:7px 10px;
  border-radius:999px;
  background:var(--c-pill);
  color:var(--c-text);
  border:1px solid var(--c-line);
  cursor:pointer;
  font-size:13px;
  font-weight:900;
}
#chatCloseBtn:hover{ background:var(--c-surface-alt); }
.chat-profile{
  padding:12px 16px;
  border-bottom:1px solid #eef2f7;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  background:#fff;
}
.chat-profile-name{
  font-size:14px;
  font-weight:1100;
  color:#0f172a;
}
.chat-profile-sub{
  margin-top:4px;
  font-size:12px;
  color:#64748b;
  font-weight:900;
  line-height:1.4;
}
#chatProfileBtn{
  padding:8px 10px;
  border-radius:999px;
  background:#f8fafc;
  color:#1f3a5f;
  border:1px solid #dbe3ef;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}
.chat-body{
  flex:1 1 0%;
  min-height:0;
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  background:var(--c-bg);
}
.thread-list{
  border-right:1px solid var(--c-line);
  padding:12px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:var(--c-surface);
  min-height:0;
}
.thread{
  border:1px solid transparent;
  border-radius:16px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow:none;
}
.thread:hover{
  background:var(--c-bg)!important;
  border-color:var(--c-line);
}
.thread.active{
  background:var(--c-bg)!important;
  border-color:var(--c-active-border);
  box-shadow:var(--c-shadow);
}
.thread-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.thread-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  flex-shrink:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
  color:var(--c-text);
  background:var(--c-pill);
  border:2px solid var(--c-offline);
  box-sizing:border-box;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.thread-avatar.is-online{
  animation:thread-avatar-online-pulse 3.2s ease-in-out infinite;
}
.thread-avatar.is-offline{
  border-color:var(--c-offline);
  box-shadow:none;
}
@keyframes thread-avatar-online-pulse{
  0%,100%{
    border-color:#aec8f5;
    box-shadow:0 0 0 0 rgba(26,115,232,.12);
  }
  50%{
    border-color:var(--c-online);
    box-shadow:0 0 0 3px rgba(26,115,232,.22);
  }
}
.thread-avatar .avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.thread .t1{
  font-size:13px;
  font-weight:800;
  color:var(--c-text);
  line-height:1.25;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.thread .t2{
  display:none!important;
}
.chat-main{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--c-bg);
  overflow:hidden;
}
.chat-room-head{
  display:none!important;
}
.chat-room-title{
  font-size:15px;
  font-weight:1100;
  color:#0f172a;
  line-height:1.25;
}
.chat-room-sub{
  display:none!important;
}
#openListingBtn{
  display:none!important;
}
.chat-log{
  flex:1 1 0%;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--c-surface);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.bubble{
  max-width:78%;
  border:1px solid var(--c-line);
  border-radius:16px 16px 16px 4px;
  padding:10px 14px;
  background:var(--c-bg);
  box-shadow:none;
  font-size:13px;
  font-weight:450;
  line-height:1.5;
  color:var(--c-text);
  word-break:break-word;
}
.bubble.me{
  align-self:flex-end;
  background:var(--c-me-bg);
  color:var(--c-me-text);
  border-color:var(--c-me-border);
  border-radius:16px 16px 4px 16px;
  box-shadow:none;
}
.bubble.me .bubble-meta{ color:var(--c-muted)!important; }
.bubble-meta{
  margin-top:6px;
  font-size:10px;
  color:var(--c-muted);
  font-weight:600;
}
.chat-bubble-media{
  margin-bottom:6px;
  border-radius:12px;
  overflow:hidden;
  max-width:100%;
  border:1px solid var(--c-line);
}
.bubble.me .chat-bubble-media{
  border-color:var(--c-me-border);
}
.chat-bubble-media img,
.chat-bubble-media video{
  max-width:100%;
  max-height:280px;
  display:block;
  vertical-align:middle;
}
.chat-send{
  border-top:1px solid var(--c-line);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--c-bg);
}
.chat-send-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
}
.chat-composer-avatar{
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:999px;
  background:var(--c-pill);
  color:var(--c-text);
  font-size:16px;
  font-weight:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--c-line);
  overflow:hidden;
  user-select:none;
}
.chat-composer-avatar .avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.chat-composer-wrap{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  overflow:hidden;
}
.chat-composer-pill{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:2px;
  background:var(--c-pill);
  border:1px solid var(--c-line);
  border-radius:999px;
  padding:4px 8px 4px 16px;
  min-height:48px;
  box-sizing:border-box;
  overflow:hidden;
}
.chat-composer-pill .chat-composer-field{
  flex:1;
  min-width:0;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:none;
  height:40px;
  padding:0 8px 0 0!important;
  font-size:14px;
  color:var(--c-text);
  border-radius:0!important;
}
.chat-composer-pill .chat-composer-field::placeholder{ color:#9aa0a6; }
.chat-composer-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  padding-right:2px;
}
button.chat-composer-icon-btn{
  width:38px;
  height:38px;
  padding:0;
  margin:0;
  border-radius:12px;
  border:1px solid var(--c-line);
  background:var(--c-bg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  cursor:pointer;
  flex-shrink:0;
}
button.chat-composer-icon-btn:hover{
  border-color:#c6c9cc;
  background:var(--c-pill);
}
.chat-send-submit{
  flex-shrink:0;
  height:46px;
  min-width:72px;
  border-radius:999px;
  border:1px solid var(--c-accent);
  background:var(--c-accent);
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  padding:0 16px;
  transition:background .15s ease, border-color .15s ease;
}
.chat-send-submit:hover{
  background:var(--c-accent-hover);
  border-color:var(--c-accent-hover);
}
.chat-pending-attach{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  font-size:12px;
  font-weight:900;
  color:#64748b;
  width:100%;
}
#chatPendingAttach[hidden],
.chat-pending-attach[hidden]{
  display:none!important;
  margin:0!important;
  padding:0!important;
  height:0!important;
  min-height:0!important;
  border:none!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.chat-pending-clear{
  margin-left:auto;
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:20px;
  color:#64748b;
  padding:2px 8px;
}
.chat-pop .empty,
.thread-list .empty{
  font-size:12px;
  font-weight:900;
  color:#64748b;
  line-height:1.45;
  padding:8px 4px;
}
@media(max-width:820px){
  .chat-pop{
    left:10px!important;
    right:10px!important;
    bottom:86px!important;
    width:auto!important;
    height:min(78vh,650px)!important;
    border-radius:24px!important;
  }
  .chat-body{ grid-template-columns:116px minmax(0,1fr)!important; }
  .thread-list{ padding:8px!important; }
  .thread{ padding:9px!important; border-radius:15px!important; }
  .thread .t2{ display:none!important; }
  .chat-profile{ display:none!important; }
  .chat-room-head{ min-height:54px!important; }
  .chat-room-sub{ display:none!important; }
}
@media(max-width:520px){
  .chat-bubble{ right:14px; bottom:14px; }
  .chat-launcher{ width:60px; height:60px; }
  .chat-launcher-icon svg{ width:27px; height:27px; }
  .chat-pop{
    inset:auto 8px 78px 8px!important;
    height:calc(100vh - 98px)!important;
    max-height:680px!important;
    border-radius:22px!important;
  }
  .chat-head{ height:56px; padding:0 12px; }
  .chat-title{ font-size:14px; }
  .chat-body{ grid-template-columns:96px minmax(0,1fr)!important; }
  .chat-log{ padding:12px!important; }
  .bubble{ max-width:92%!important; font-size:12.5px!important; }
  .chat-send{ padding:10px!important; }
  .chat-composer-pill{ min-height:44px; padding:3px 6px 3px 12px; }
  .chat-composer-pill .chat-composer-field{ height:36px; font-size:13px; }
  button.chat-composer-icon-btn{ width:34px; height:34px; font-size:15px; }
  .chat-send-submit{ height:44px; min-width:62px; }
  .chat-composer-avatar{ width:36px; height:36px; font-size:14px; }
}

/* ปุ่มแชทในแถบบน — ใช้ร่วมทุกหน้าที่มี pdTopBarChat */
body.pd-chat-topbar .chat-bubble,
body.pd-chat-topbar #LandLinkGoChatBubble{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  bottom:auto!important;
  width:0!important;
  height:0!important;
  overflow:visible!important;
  pointer-events:none!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.pd-chat-topbar .chat-pop{
  pointer-events:auto!important;
  top:calc(var(--pd-top-bar-h, 56px) + 8px)!important;
  right:16px!important;
  bottom:auto!important;
  left:auto!important;
  height:min(660px,calc(100vh - var(--pd-top-bar-h, 56px) - 24px))!important;
}
@media(max-width:820px){
  body.pd-chat-topbar .chat-pop{
    left:10px!important;
    right:10px!important;
    bottom:auto!important;
    width:auto!important;
    height:min(78vh,calc(100vh - var(--pd-top-bar-h, 56px) - 24px))!important;
  }
}
@media(max-width:520px){
  body.pd-chat-topbar .chat-pop{
    inset:calc(var(--pd-top-bar-h, 56px) + 8px) 8px auto 8px!important;
    height:calc(100vh - var(--pd-top-bar-h, 56px) - 16px)!important;
  }
}