.nav-btn{position:relative}.nav-badge{position:absolute;right:10px;top:9px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#ef4444;color:#fff;font:700 11px/20px system-ui;text-align:center}.chat-shell{display:grid;grid-template-columns:360px minmax(0,1fr);height:calc(100vh - 120px);min-height:560px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(17,32,51,.04)}.chat-list-panel{min-width:0;border-right:1px solid var(--line);display:flex;flex-direction:column}.chat-list-head{padding:18px;display:flex;align-items:center;justify-content:space-between}.chat-list-head h3{margin:0 0 3px}.chat-list-head small,.chat-head small{color:var(--muted)}.chat-search{margin:0 14px 12px}.chat-list{overflow:auto;min-height:0}.chat-list-empty{padding:34px 18px;text-align:center;color:var(--muted)}.chat-row{width:100%;border:0;border-top:1px solid #edf1f5;background:#fff;padding:13px 12px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;text-align:left;cursor:pointer;color:var(--ink)}.chat-row:hover,.chat-row.active{background:#f1f7ff}.chat-row-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#dff5eb;color:#08754d;font-weight:900}.chat-row-body{display:flex;flex-direction:column;min-width:0}.chat-row-body b,.chat-row-body small,.chat-row-body span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-row-body small{color:var(--muted);font-size:11px;margin:2px 0}.chat-row-body span{font-size:12px;color:#526174}.chat-row-side{display:flex;align-items:flex-end;flex-direction:column;gap:8px}.chat-row-side time{font-size:9px;color:var(--muted);white-space:nowrap}.chat-row-side i{font-style:normal;background:#16a36a;color:#fff;min-width:20px;height:20px;border-radius:10px;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 5px}.chat-empty{display:grid;place-content:center;text-align:center;color:var(--muted);background:#f8fafc}.chat-empty h3{color:var(--ink);margin:10px 0 0}.chat-empty p{margin:5px}.chat-empty-icon{font-size:50px;color:#16a36a}.chat-conversation{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;background:#efeae2}.chat-head{display:grid;grid-template-columns:auto 42px minmax(0,1fr) auto;gap:10px;align-items:center;background:#fff;padding:12px 16px;border-bottom:1px solid var(--line)}.chat-head h3{margin:0}.chat-head a{font-size:12px;color:var(--blue);display:block}.chat-back{display:none}.chat-messages{overflow:auto;padding:22px;display:flex;flex-direction:column;gap:8px;background-color:#efeae2;background-image:radial-gradient(#0000000a 1px,transparent 1px);background-size:18px 18px}.chat-bubble{max-width:min(76%,620px);padding:9px 11px 6px;background:#fff;border-radius:8px;box-shadow:0 1px 2px #0002;align-self:flex-start;white-space:normal;word-break:break-word}.chat-bubble.outbound{align-self:flex-end;background:#d9fdd3}.chat-bubble footer{text-align:right;color:#6d7b86;font-size:9px;margin-top:4px}.chat-composer{background:#f7f8fa;padding:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}.chat-composer textarea{resize:none;max-height:120px}.chat-composer button:disabled{opacity:.6}.hidden{display:none!important}@media(max-width:850px){.chat-shell{grid-template-columns:1fr;height:calc(100vh - 170px);min-height:500px}.chat-empty,.chat-conversation{display:none}.chat-shell.conversation-open .chat-list-panel{display:none}.chat-shell.conversation-open .chat-conversation{display:grid}.chat-back{display:grid}.chat-head{grid-template-columns:36px 38px minmax(0,1fr) auto;padding:9px}.chat-head .avatar{width:38px;height:38px}.chat-head .btn{font-size:0;padding:10px}.chat-head .btn:after{content:'Lead';font-size:12px}.chat-messages{padding:14px 9px}.chat-bubble{max-width:88%}.chat-composer{grid-template-columns:1fr}.nav-badge{right:2px;top:2px}}
.chat-conversation{min-height:0;overflow:hidden;grid-template-rows:auto minmax(0,1fr) auto auto}
.chat-messages{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.chat-load-older{align-self:center;margin:2px auto 12px;position:sticky;top:2px;z-index:2;box-shadow:0 2px 8px #0002}
.chat-composer{grid-template-columns:minmax(0,1fr) auto auto auto}
.chat-attach{display:flex;align-items:center;justify-content:center;align-self:stretch;min-height:42px;border-radius:10px;background:#e9eef4;color:var(--ink);font-weight:800;font-size:12px;padding:8px 12px;cursor:pointer}
.chat-attach input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.chat-attach:has(input:focus-visible){outline:3px solid rgba(45,108,223,.18)}
.chat-attach:has(input:disabled){opacity:.55;cursor:not-allowed}
.chat-attachment-name{grid-column:1/-1;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-audio{display:block;width:min(320px,100%);height:42px;margin:1px 0 7px}
.chat-image,.chat-video{display:block;max-width:min(360px,100%);max-height:340px;border-radius:8px;margin-bottom:7px;object-fit:contain}
.chat-document{display:flex;flex-direction:column;gap:2px;min-width:210px;padding:10px;margin-bottom:7px;border-radius:8px;background:#ffffffaa;color:var(--blue);text-decoration:none}
.chat-document span{font-size:11px}.chat-document b{overflow-wrap:anywhere}
.messages{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.message .chat-image,.message .chat-video{max-width:100%}
.media-composer{grid-template-columns:minmax(0,1fr) auto auto auto}
.call-live-timer{display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-items:center;padding:14px;border-radius:12px;background:#eef6ff;border:1px solid #cfe2ff}
.call-live-timer span{font-weight:800;color:#255b9b}.call-live-timer b{font-size:24px;font-variant-numeric:tabular-nums;color:#0c1c2d}.call-live-timer small{grid-column:1/-1;color:var(--muted);font-weight:500}
@media(max-width:850px){
  .chat-shell{min-height:0}
  .chat-conversation{min-height:0}
  .chat-composer{grid-template-columns:minmax(0,1fr) auto auto}
  .chat-composer textarea{grid-column:1/-1}
  .chat-composer .btn{min-width:70px}
  .chat-attachment-name{grid-column:1/-1}
  .media-composer{grid-template-columns:minmax(0,1fr) auto auto}
  .media-composer textarea{grid-column:1/-1}
}

/* Keep the conversation index independently scrollable on desktop and mobile. */
.chat-list-panel{
  min-height:0;
  overflow:hidden;
}
.chat-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}