/* Homdorong Visual Polish v3 — visual-only overrides, preserves app behavior */
:root{
 --hd-bg:#edf6f1;--hd-panel:#ffffff;--hd-ink:#15352d;--hd-muted:#71877e;
 --hd-line:rgba(23,94,71,.11);--hd-green:#078467;--hd-green-deep:#056b55;
 --hd-mint:#d5f4e3;--hd-glass:rgba(255,255,255,.88);
 --hd-elev:0 10px 30px rgba(14,76,56,.075);
 --hd-elev-lg:0 22px 60px rgba(14,76,56,.13);
}
html{scroll-behavior:smooth}
body{
 background:
 radial-gradient(ellipse at 8% 0%,rgba(75,193,145,.10),transparent 36%),
 radial-gradient(ellipse at 100% 35%,rgba(7,132,103,.055),transparent 32%),
 var(--bg,#f3f8f5);
 color:var(--text,#15352d);
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
}
button,input,textarea,select{font:inherit}
button{ -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[role="button"]:focus-visible{
 outline:3px solid rgba(8,132,103,.27)!important;outline-offset:2px
}
.app-shell{
 gap:clamp(10px,1.4vw,18px)!important;
 padding:clamp(8px,1.3vw,18px)!important;
}
.sidebar,.chat-panel{
 border:1px solid var(--line,rgba(23,94,71,.10))!important;
 border-radius:24px!important;
 overflow:hidden;
 box-shadow:var(--hd-elev)!important;
 background:var(--panel,#fff)!important;
}
.sidebar-header,.chat-header{
 background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(244,251,247,.96))!important;
 border-bottom:1px solid var(--line,rgba(23,94,71,.10))!important;
 padding:16px!important;
}
.brand-inline strong,.chat-heading strong,.row-top strong,.top h1{
 letter-spacing:-.025em;
}
.brand-mark,.choqa-mark{
 box-shadow:0 5px 15px rgba(4,111,82,.18);
}
.search-box{
 border:1px solid var(--line,rgba(23,94,71,.12))!important;
 background:var(--panel-2,#f4f9f6)!important;
 border-radius:16px!important;
 box-shadow:inset 0 1px 2px rgba(17,61,45,.025);
 transition:border-color .18s,box-shadow .18s,background .18s;
}
.search-box:focus-within{
 border-color:rgba(8,132,103,.42)!important;
 box-shadow:0 0 0 4px rgba(8,132,103,.08)!important;
}
.conversation-list{padding:6px!important}
.conversation-item{
 margin:3px 0!important;padding:12px!important;
 border:1px solid transparent!important;
 border-radius:17px!important;
 transition:background .18s,border-color .18s,transform .18s,box-shadow .18s!important;
}
.conversation-item:hover{
 background:var(--hover,#f1faf5)!important;
 border-color:var(--line,rgba(23,94,71,.09))!important;
 transform:translateY(-1px);
}
.conversation-item.active,.conversation-item[aria-current="true"]{
 background:linear-gradient(110deg,rgba(8,132,103,.105),rgba(8,132,103,.045))!important;
 border-color:rgba(8,132,103,.15)!important;
 box-shadow:inset 3px 0 0 var(--accent,#078467)!important;
}
.avatar,.profile-avatar,.group-avatar{
 box-shadow:0 0 0 3px rgba(255,255,255,.8),0 3px 10px rgba(19,70,53,.09);
}
.badge{
 box-shadow:0 2px 7px rgba(8,132,103,.18);
 font-weight:700;
}
.fab{
 box-shadow:0 9px 22px rgba(8,132,103,.25)!important;
 transition:transform .18s,box-shadow .18s!important;
}
.fab:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(8,132,103,.30)!important}
.chat-header{
 min-height:70px;
}
.header-tools .icon-btn,.back-btn,.attach-btn,.record-btn,.ib{
 border:1px solid transparent!important;
 border-radius:14px!important;
 transition:background .18s,border-color .18s,transform .18s!important;
}
.header-tools .icon-btn:hover,.back-btn:hover,.attach-btn:hover,.record-btn:hover,.ib:hover{
 background:rgba(8,132,103,.08)!important;
 border-color:rgba(8,132,103,.10)!important;
}
.messages{
 background-color:var(--chat-bg,#eff7f2)!important;
 background-image:
 radial-gradient(circle at 20% 20%,rgba(8,132,103,.035) 1.2px,transparent 1.5px),
 radial-gradient(circle at 80% 70%,rgba(8,132,103,.025) 1px,transparent 1.4px),
 linear-gradient(145deg,rgba(255,255,255,.16),transparent 60%)!important;
 background-size:22px 22px,28px 28px,100% 100%!important;
 padding:clamp(12px,2vw,24px)!important;
}
.day-sep span{
 background:rgba(255,255,255,.92)!important;
 border:1px solid rgba(23,94,71,.10)!important;
 border-radius:999px!important;
 padding:7px 15px!important;
 box-shadow:0 3px 12px rgba(17,61,45,.055)!important;
 backdrop-filter:blur(12px);
 font-weight:650;
}
.message-row{margin-block:5px!important;gap:5px!important}
.message-bubble{
 border:1px solid rgba(22,77,56,.055)!important;
 border-radius:19px!important;
 box-shadow:0 3px 12px rgba(20,64,47,.045)!important;
 padding:10px 13px!important;
 line-height:1.85!important;
 overflow-wrap:anywhere;
 transition:box-shadow .16s,transform .16s;
}
.message-row.mine .message-bubble{
 background:linear-gradient(145deg,#d9f6e5,#c9efd9)!important;
 border-bottom-right-radius:7px!important;
}
.message-row.theirs .message-bubble{
 background:var(--bubble-in,#fff)!important;
 border-bottom-left-radius:7px!important;
}
.message-bubble .meta,.message-bubble time,.message-meta{
 color:var(--meta,#81938a)!important;
 font-size:11px!important;
 font-weight:500!important;
}
.message-bubble img,.message-bubble video,.message-bubble audio{
 border-radius:14px!important;
 max-width:100%;
}
.message-bubble a{color:var(--accent-dark,#056b55);text-underline-offset:3px}
.composer{
 border:1px solid rgba(23,94,71,.10)!important;
 border-radius:25px!important;
 margin:10px!important;
 padding:9px!important;
 background:rgba(255,255,255,.94)!important;
 box-shadow:0 8px 25px rgba(15,66,48,.075)!important;
 backdrop-filter:blur(18px);
 gap:8px!important;
}
.composer input,.composer textarea,.composer>input,.composer>textarea{
 min-height:48px!important;
 border:1px solid rgba(23,94,71,.10)!important;
 border-radius:18px!important;
 background:#f6faf7!important;
 padding:12px 15px!important;
}
.composer input:focus,.composer textarea:focus{
 background:#fff!important;border-color:rgba(8,132,103,.35)!important;
 box-shadow:0 0 0 4px rgba(8,132,103,.07)!important;
}
.primary,.send-btn{
 border:0!important;
 border-radius:16px!important;
 background:linear-gradient(135deg,#0a9b78,#06745c)!important;
 color:#fff!important;
 box-shadow:0 5px 14px rgba(8,132,103,.20)!important;
 transition:transform .16s,filter .16s,box-shadow .16s!important;
}
.primary:hover,.send-btn:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 8px 18px rgba(8,132,103,.25)!important}
.primary:active,.send-btn:active{transform:scale(.97)}
.auth-card,.modal-card,.profile-card,.call-panel{
 border:1px solid rgba(23,94,71,.10)!important;
 border-radius:26px!important;
 box-shadow:var(--hd-elev-lg)!important;
 background:var(--panel,#fff)!important;
}
.modal-backdrop,.menu-backdrop,.fab-backdrop{
 backdrop-filter:blur(5px)!important;
}
.tabs{
 padding:5px!important;border-radius:16px!important;
 background:var(--panel-2,#f1f7f3)!important;
}
.tabs button,.tabs [role="tab"]{
 border-radius:12px!important;transition:background .18s,box-shadow .18s!important;
}
.tabs .active,.tabs [aria-selected="true"]{
 box-shadow:0 3px 10px rgba(17,61,45,.07)!important;
}
.person-row,.attachment,.media-preview,.theme-row,.check-row,.setup-steps{
 border-radius:16px!important;border-color:var(--line,rgba(23,94,71,.10))!important;
}
input:not([type="checkbox"]):not([type="radio"]),textarea,select{
 border-radius:14px;
}
.inline-error,.error{border-radius:14px!important}
.chip{border-radius:999px!important}
@media(min-width:1000px){
 .app-shell{max-width:1600px;margin-inline:auto}
 .sidebar,.chat-panel{border-radius:26px!important}
}
@media(max-width:720px){
 .app-shell{padding:0!important;gap:0!important}
 .sidebar,.chat-panel{border-radius:0!important;border-inline:0!important;box-shadow:none!important}
 .sidebar-header,.chat-header{padding:12px!important}
 .conversation-list{padding:5px!important}
 .conversation-item{padding:10px!important;border-radius:15px!important}
 .messages{padding:10px!important}
 .message-bubble{max-width:min(86vw,560px);padding:9px 11px!important;border-radius:17px!important}
 .composer{margin:7px!important;border-radius:22px!important;padding:7px!important;gap:6px!important}
 .composer input,.composer textarea,.composer>input,.composer>textarea{min-height:46px!important;padding:10px 12px!important}
 .auth-card,.modal-card,.profile-card,.call-panel{border-radius:22px!important}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
:root[data-theme="dark"] .sidebar-header,:root[data-theme="dark"] .chat-header{
 background:linear-gradient(135deg,rgba(23,42,35,.98),rgba(18,34,28,.97))!important;
}
:root[data-theme="dark"] .message-row.mine .message-bubble{
 background:linear-gradient(145deg,#1b6549,#15543e)!important;border-color:#ffffff0a!important;
}
:root[data-theme="dark"] .composer{
 background:rgba(16,34,28,.94)!important;border-color:#ffffff12!important;
}
:root[data-theme="dark"] .composer input,:root[data-theme="dark"] .composer textarea,:root[data-theme="dark"] .composer>input,:root[data-theme="dark"] .composer>textarea{
 background:#172c24!important;border-color:#ffffff12!important;
}

/* Homdorong Visual Polish v4 — refined responsive UI layer */
:root{
  --hd-green:#087f68;
  --hd-green-deep:#066653;
  --hd-bg:#f3f8f5;
  --hd-line:rgba(20,87,63,.12);
  --hd-soft-shadow:0 5px 18px rgba(15,65,46,.055);
  --hd-float-shadow:0 14px 36px rgba(15,65,46,.11);
}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--bg,#f3f8f5)}
.app-shell{
  isolation:isolate;
  background:var(--panel,#fff)!important;
  box-shadow:0 0 0 1px rgba(15,65,46,.04),0 18px 55px rgba(15,65,46,.09)!important;
}
.sidebar{background:var(--panel,#fff)!important}
.sidebar-header,.chat-header{
  flex-shrink:0;
  backdrop-filter:blur(18px);
}
.sidebar-header{padding-block:14px!important}
.brand-inline strong,.chat-heading strong{font-weight:800!important}
.brand-mark,.choqa-mark{border-radius:15px!important}
.search-box{min-height:48px;margin-block:10px 12px!important;border-radius:17px!important}
.conversation-list{scrollbar-width:thin;scrollbar-color:var(--line, #dce9e0) transparent}
.conversation-item{min-height:76px;gap:13px!important}
.conversation-copy{border-bottom-color:color-mix(in srgb,var(--line,#e1eae4) 72%,transparent)!important}
.row-top time{font-variant-numeric:tabular-nums}
.avatar{flex-shrink:0}
.chat-panel{min-width:0;position:relative}
.chat-header{box-shadow:0 1px 0 var(--line,#e1eae4),0 4px 16px rgba(15,65,46,.025)!important}
.header-tools{align-items:center}
.header-tools .icon-btn,.back-btn,.attach-btn,.record-btn,.ib{flex-shrink:0}
.messages{
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(8,127,104,.22) transparent;
}
.message-group{max-width:100%}
.message-row{align-items:flex-end;min-width:0}
.message-bubble{
  max-width:min(620px,82%)!important;
  padding:9px 13px 7px!important;
  line-height:1.8!important;
  border:1px solid rgba(20,77,55,.055)!important;
  box-shadow:0 2px 7px rgba(15,65,46,.045)!important;
}
.message-row.mine .message-bubble{
  background:linear-gradient(145deg,#d8f5e4 0%,#c7edd8 100%)!important;
  border-bottom-right-radius:7px!important;
}
.message-row:not(.mine) .message-bubble{
  background:var(--bubble-in,#fff)!important;
  border-bottom-left-radius:7px!important;
}
.message-bubble .sender-name{font-size:12px;font-weight:750;color:var(--accent-dark,#066747);margin-bottom:2px}
.message-meta{gap:5px!important;margin-top:3px!important;opacity:.82}
.message-meta time,.message-meta .time,.message-bubble time{font-size:11px!important;font-variant-numeric:tabular-nums}
.message-bubble img,.message-bubble video,.media-preview{display:block;max-width:100%;height:auto;border-radius:13px!important}
.attachment{
  min-width:min(250px,100%);
  max-width:100%;
  align-items:center!important;
  padding:11px!important;
  margin:4px 0!important;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(18,86,60,.10)!important;
}
.attachment-icon{flex-shrink:0;width:42px!important;height:42px!important;border-radius:13px!important;color:var(--accent-dark,#066747)}
.attachment-content{overflow-wrap:anywhere;word-break:break-word}
.attachment-content a{font-weight:700;text-underline-offset:3px}
.media-preview{max-height:min(48vh,420px)!important;object-fit:contain;background:#eaf1ed!important}
.composer{
  flex-shrink:0;
  gap:8px!important;
  border:1px solid rgba(20,87,63,.11)!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 -3px 20px rgba(15,65,46,.045),0 7px 22px rgba(15,65,46,.055)!important;
  padding:9px!important;
}
.composer input,.composer textarea,.composer>input,.composer>textarea{
  min-width:0;
  min-height:47px!important;
  border-radius:17px!important;
  line-height:1.65;
}
.attach-btn,.record-btn{width:44px!important;height:44px!important;border-radius:15px!important}
.send-btn{min-width:46px!important;min-height:46px!important}
.primary,.send-btn,.fab{touch-action:manipulation}
.fab{border-radius:19px!important}
.modal-backdrop,.menu-backdrop,.fab-backdrop{background:rgba(9,31,23,.34)}
.modal-card,.profile-card,.call-panel{max-height:min(88dvh,780px);overflow:auto}
.inline-error,.alert.error,.error{border:1px solid rgba(193,61,75,.2);padding:10px 13px;background:rgba(193,61,75,.055)}
:root[data-theme="dark"] .app-shell{box-shadow:0 0 0 1px #ffffff0b,0 18px 55px #0003!important}
:root[data-theme="dark"] .message-row.mine .message-bubble{background:linear-gradient(145deg,#1b684b,#14553d)!important}
:root[data-theme="dark"] .attachment{background:rgba(255,255,255,.025);border-color:#ffffff14!important}
:root[data-theme="dark"] .composer{background:rgba(17,31,25,.96)!important;border-color:#ffffff14!important}
@media(min-width:1000px){
  .app-shell{grid-template-columns:minmax(320px,380px) minmax(0,1fr)!important}
  .messages{padding-inline:clamp(28px,5vw,82px)!important}
}
@media(max-width:760px){
  .app-shell{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr)!important}
  .sidebar,.chat-panel{min-width:0;width:100%;max-width:100%}
  .conversation-item{min-height:72px;padding-inline:13px!important}
  .chat-header{gap:8px!important;padding-inline:10px!important}
  .chat-heading{min-width:0;flex:1}
  .chat-heading strong{max-width:48vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header-tools{gap:1px!important}
  .header-tools .icon-btn{width:36px;height:36px}
  .messages{padding:12px 10px!important}
  .message-bubble{max-width:min(88%,calc(100vw - 52px))!important;padding:8px 11px 6px!important}
  .message-bubble img,.message-bubble video,.media-preview{max-width:100%!important}
  .attachment{min-width:0;width:100%}
  .composer{margin:7px!important;padding:7px!important;gap:5px!important;border-radius:22px!important}
  .composer input,.composer textarea,.composer>input,.composer>textarea{min-height:44px!important;padding:9px 11px!important}
  .attach-btn,.record-btn{width:40px!important;height:40px!important;border-radius:13px!important}
  .send-btn{width:43px!important;min-width:43px!important;height:43px!important;min-height:43px!important}
}
@media(max-width:380px){
  .chat-header{padding-inline:7px!important}
  .header-tools .icon-btn{width:32px;height:34px}
  .composer{gap:3px!important}
  .attach-btn,.record-btn{width:36px!important;height:38px!important}
  .send-btn{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
}

/* WhatsApp-like multiline composer and partial-bold rendering */
#hd-bold-toolbar{align-self:flex-start}
form.composer{align-items:flex-end!important;flex-wrap:nowrap!important}
form.composer textarea.hd-growing-composer{flex:1 1 0%!important;width:100%!important;min-width:0!important;max-width:100%!important;max-height:35dvh!important;resize:none!important;line-height:1.6!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important}
.message-bubble p strong{font-weight:800!important}
@media(max-width:600px){form.composer textarea.hd-growing-composer{font-size:16px!important;max-height:35dvh!important}}


/* FIX: show full chat/group/channel title instead of truncating with ellipsis */
.chat-heading{min-width:0!important;flex:1 1 auto!important}
.chat-heading strong{
  max-width:none!important;
  width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.35!important;
}