.chat-page-header{margin-bottom:16px}.chat-shell{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);height:var(--chat-shell-height,min(720px,calc(100dvh - 200px)));min-height:420px;max-height:none;border:1px solid #e5e7eb;border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 18px 50px rgba(15,23,42,.07)}.chat-user-pane{border-right:1px solid #e5e7eb;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fbfcfe}.chat-pane-head,.chat-thread-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #e5e7eb;background:#fff}.chat-pane-head{justify-content:space-between}.chat-pane-head strong,.chat-thread-head strong{display:block;font-size:14px;color:#111827}.chat-pane-head small,.chat-thread-head small{display:block;font-size:12px;color:#6b7280;margin-top:2px}.chat-online-dot{width:9px;height:9px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.12)}.chat-search-wrap{margin:12px 14px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;color:#94a3b8}.chat-search{width:100%;height:40px;border:0;outline:0;background:transparent;font-size:13px}.chat-user-list{flex:1;min-height:0;overflow:auto;padding:0 8px 12px}.chat-user-item{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 10px;border-radius:14px;text-decoration:none;color:#111827;margin:2px 0}.chat-user-item:hover{background:#f3f6fb}.chat-user-item.active{background:color-mix(in srgb,var(--company-primary,#4f46e5) 9%,#fff)}.chat-avatar{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,color-mix(in srgb,var(--company-primary,#4f46e5) 86%,#111827),color-mix(in srgb,var(--company-primary,#4f46e5) 55%,#fff));color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;flex:0 0 auto}.chat-avatar-large{width:44px;height:44px}.chat-user-copy{min-width:0}.chat-user-line{display:flex;align-items:center;gap:7px;min-width:0}.chat-user-line strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-user-line small{font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.chat-preview{display:block;margin-top:3px;font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-user-unread{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;font-weight:800}.chat-thread-pane{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:linear-gradient(180deg,#fbfcff 0%,#f7f9fc 100%)}.chat-thread-head{min-height:76px}.chat-thread-head>div{min-width:0}.chat-live-label{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.08em;color:#059669;display:flex;align-items:center;gap:6px}.chat-live-label i{width:7px;height:7px;border-radius:50%;background:#10b981}.chat-mobile-back{display:none;color:#111827}.chat-back-icon{transform:rotate(180deg)}.chat-messages{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:22px 24px 18px;scroll-behavior:smooth;overscroll-behavior:contain}.chat-message{display:flex;flex-direction:column;margin:9px 0;max-width:min(76%,620px)}.chat-message.mine{margin-left:auto;align-items:flex-end}.chat-message.theirs{margin-right:auto;align-items:flex-start}.chat-bubble{padding:11px 14px;border-radius:16px;font-size:13px;line-height:1.55;word-break:break-word;box-shadow:0 3px 10px rgba(15,23,42,.04)}.chat-message.mine .chat-bubble{background:var(--company-primary,#4f46e5);color:#fff;border-bottom-right-radius:5px}.chat-message.theirs .chat-bubble{background:#fff;border:1px solid #e5e7eb;color:#1f2937;border-bottom-left-radius:5px}.chat-message small{margin-top:4px;color:#94a3b8;font-size:10px}.chat-composer{display:flex;flex:0 0 auto;gap:10px;align-items:flex-end;padding:13px 16px calc(13px + env(safe-area-inset-bottom));border-top:1px solid #e5e7eb;background:#fff;position:relative;z-index:3}.chat-composer-input{flex:1;border:1px solid #dbe2ea;border-radius:15px;background:#f8fafc;padding:8px 12px}.chat-composer textarea{display:block;width:100%;max-height:110px;resize:none;border:0;outline:0;background:transparent;font-size:14px;line-height:1.45;color:#111827}.chat-send-button{width:44px;height:44px;border:0;border-radius:14px;display:grid;place-items:center;background:var(--company-primary,#4f46e5);color:#fff;box-shadow:0 10px 20px color-mix(in srgb,var(--company-primary,#4f46e5) 25%,transparent)}.chat-send-button:disabled{opacity:.5}.chat-thread-empty,.chat-no-thread{margin:auto;text-align:center;color:#6b7280;padding:28px}.chat-thread-empty span,.chat-no-thread-icon{display:inline-grid;place-items:center;width:68px;height:68px;border-radius:22px;background:#eef2ff;color:var(--company-primary,#4f46e5);margin-bottom:12px}.chat-thread-empty strong{display:block;color:#111827}.chat-thread-empty p,.chat-no-thread p{font-size:13px;margin:5px 0 0}.chat-no-thread h2{font-size:18px;color:#111827}.chat-empty-users{padding:18px 12px;font-size:13px;color:#6b7280;text-align:center}.chat-topbar-link{position:relative}.chat-badge{position:absolute;top:-5px;right:-6px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font-size:9px;font-weight:800;border:2px solid #fff}.sidebar-chat-count{margin-left:auto;min-width:20px;height:20px;border-radius:999px;padding:0 6px;display:inline-grid;place-items:center;background:#ef4444;color:#fff;font-size:10px;font-weight:800}
@media(min-width:768px){.chat-shell[data-chat-root]{height:var(--chat-shell-height,min(720px,calc(100dvh - 200px)));min-height:min(420px,calc(100dvh - 32px))}.chat-thread-pane,.chat-user-pane{height:100%}.chat-thread-head,.chat-pane-head{flex:0 0 auto}}
@media(max-width:767.98px){.chat-page-header{display:none}.chat-shell{display:block;height:calc(100dvh - 126px);min-height:0;max-height:calc(100dvh - 126px);margin:-4px -2px 0;border-radius:18px}.chat-user-pane,.chat-thread-pane{height:100%;border:0}.chat-thread-pane{display:none}.chat-has-thread .chat-user-pane{display:none}.chat-has-thread .chat-thread-pane{display:flex}.chat-mobile-back{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#f1f5f9}.chat-messages{padding:16px 13px}.chat-message{max-width:86%}.chat-thread-head{padding:10px 12px;min-height:64px}.chat-avatar-large{width:38px;height:38px;border-radius:12px}.chat-composer{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}.chat-user-list{padding-bottom:18px}.chat-user-item{padding:12px 9px}.chat-bubble{font-size:14px}.chat-search,.chat-composer textarea{font-size:16px}.chat-send-button{width:43px;height:43px}}

/* Chat receipts + attachments */
.chat-message-meta{display:flex;align-items:center;gap:6px}.chat-message-status{font-weight:800;letter-spacing:-.04em;color:#64748b}.chat-message.mine .chat-message-status{color:color-mix(in srgb,var(--company-primary,#4f46e5) 75%,#64748b)}
.chat-attachment-list{display:grid;gap:7px;width:min(360px,100%);margin-top:6px}.chat-message>.chat-attachment-list:first-child{margin-top:0}.chat-image-attachment{display:block;overflow:hidden;border-radius:14px;text-decoration:none;border:1px solid #dfe5ed;background:#fff;color:#475569;box-shadow:0 3px 10px rgba(15,23,42,.05)}.chat-image-attachment img{display:block;width:100%;max-height:280px;object-fit:cover;background:#eef2f7}.chat-image-attachment span{display:block;padding:7px 9px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-file-attachment{display:grid;grid-template-columns:34px minmax(0,1fr) 26px;align-items:center;gap:9px;padding:9px 10px;border:1px solid #dfe5ed;border-radius:13px;background:#fff;color:#1f2937;text-decoration:none;box-shadow:0 3px 10px rgba(15,23,42,.04)}.chat-file-attachment:hover{border-color:color-mix(in srgb,var(--company-primary,#4f46e5) 35%,#dfe5ed);color:#111827}.chat-file-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eef2ff;color:var(--company-primary,#4f46e5)}.chat-file-attachment>span:nth-child(2){min-width:0}.chat-file-attachment strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-file-attachment small{display:block!important;margin:2px 0 0!important;font-size:9px!important;color:#94a3b8!important}.chat-file-download{display:grid;place-items:center;color:#64748b}
.chat-composer{display:block;flex:0 0 auto}.chat-composer-row{display:flex;gap:9px;align-items:flex-end}.chat-composer-input{min-width:0}.chat-attach-button{width:44px;height:44px;border:1px solid #dbe2ea;border-radius:14px;display:grid;place-items:center;background:#f8fafc;color:#475569;flex:0 0 auto}.chat-attach-button:hover{background:#eef2f7;color:var(--company-primary,#4f46e5)}.chat-selected-files{display:flex;gap:7px;overflow-x:auto;padding:0 0 9px;scrollbar-width:thin}.chat-selected-file{display:grid;grid-template-columns:36px minmax(100px,1fr) 24px;align-items:center;gap:7px;min-width:190px;max-width:270px;padding:6px;border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc}.chat-selected-file>img,.chat-selected-file-icon{width:36px;height:36px;border-radius:8px;object-fit:cover;display:grid;place-items:center;background:#eef2f7}.chat-selected-file>span:nth-child(2){min-width:0}.chat-selected-file strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-selected-file small{display:block;margin-top:1px;color:#94a3b8;font-size:9px}.chat-selected-file button{width:23px;height:23px;border:0;border-radius:7px;background:#fff;color:#64748b;font-size:16px;line-height:1}.chat-selected-file button:hover{background:#fee2e2;color:#b91c1c}.chat-composer-hint{display:block;margin-top:6px;padding-left:53px;color:#94a3b8;font-size:9px}
@media(max-width:767.98px){.chat-attachment-list{width:min(320px,100%)}.chat-image-attachment img{max-height:230px}.chat-composer-row{gap:7px}.chat-attach-button{width:43px;height:43px}.chat-composer-hint{display:none}.chat-selected-file{min-width:170px;max-width:220px}}


/* Camera photo/video capture */
.chat-video-attachment{overflow:hidden;border-radius:14px;border:1px solid #dfe5ed;background:#fff;box-shadow:0 3px 10px rgba(15,23,42,.05)}.chat-video-attachment video{display:block;width:100%;max-height:320px;background:#0f172a}.chat-video-attachment>a{display:block;padding:7px 9px;color:#475569;text-decoration:none;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-camera-wrap{position:relative;flex:0 0 auto}.chat-camera-button{width:44px;height:44px;border:1px solid #dbe2ea;border-radius:14px;display:grid;place-items:center;background:#f8fafc;color:#475569}.chat-camera-button:hover{background:#eef2f7;color:var(--company-primary,#4f46e5)}.chat-camera-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;width:210px;padding:6px;border:1px solid #dbe2ea;border-radius:14px;background:#fff;box-shadow:0 16px 40px rgba(15,23,42,.16)}.chat-camera-menu[hidden]{display:none!important}.chat-camera-menu>button{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;padding:8px;border:0;border-radius:10px;background:transparent;text-align:left;color:#1f2937}.chat-camera-menu>button:hover{background:#f1f5f9}.chat-camera-menu>button>span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eef2ff}.chat-camera-menu strong,.chat-camera-menu small{display:block}.chat-camera-menu strong{font-size:11px}.chat-camera-menu small{font-size:9px;color:#94a3b8;margin-top:1px}.chat-selected-file-icon{font-size:16px}@media(max-width:767.98px){.chat-camera-button{width:43px;height:43px}.chat-camera-menu{position:fixed;left:12px;right:12px;bottom:calc(82px + env(safe-area-inset-bottom));width:auto}.chat-video-attachment video{max-height:260px}}

/* ==========================================================================\n   Mobile Chat Fullscreen Focus Mode — 2026-09-04\n   Full-page chat owns the mobile viewport. Global bottom navigation is hidden\n   and the composer stays inside the visible visual viewport / keyboard area.\n   ========================================================================== */
@media (max-width: 767.98px) {
  body.chat-page-mode {
    overflow: hidden !important;
    padding-bottom: 0 !important;
    overscroll-behavior: none;
  }

  body.chat-page-mode .app-main {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.chat-page-mode .app-topbar {
    flex: 0 0 auto;
  }

  body.chat-page-mode .app-content {
    box-sizing: border-box;
    width: 100% !important;
    height: calc(100dvh - 62px - env(safe-area-inset-top, 0px)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 62px - env(safe-area-inset-top, 0px)) !important;
    margin: 0 !important;
    padding: 10px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }

  body.chat-page-mode .mobile-bottom-nav.app-global-bottom-nav {
    display: none !important;
  }

  body.chat-page-mode .pwa-install-card,
  body.chat-page-mode .push-permission-card {
    display: none !important;
  }

  body.chat-page-mode .chat-shell[data-chat-root] {
    box-sizing: border-box;
    width: 100%;
    height: var(--chat-shell-height, 100%) !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 18px;
    overflow: hidden;
  }

  body.chat-page-mode .chat-user-pane,
  body.chat-page-mode .chat-thread-pane {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  body.chat-page-mode .chat-thread-head {
    flex: 0 0 auto;
  }

  body.chat-page-mode .chat-messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 13px 18px !important;
    scroll-padding-bottom: 18px;
  }

  body.chat-page-mode .chat-composer {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100%;
    margin: 0;
    padding: 9px 9px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff;
    z-index: 6;
  }

  body.chat-page-mode .chat-camera-menu {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: calc(100% + 8px) !important;
    width: min(260px, calc(100vw - 30px)) !important;
  }
}

/* Short screens / Android browser chrome: use JS visual-viewport height and compact spacing. */
@media (max-width: 767.98px) and (max-height: 700px) {
  body.chat-page-mode .app-content { padding-top: 6px !important; }
  body.chat-page-mode .chat-thread-head { min-height: 58px; padding-block: 8px; }
  body.chat-page-mode .chat-messages { padding-top: 10px !important; }
  body.chat-page-mode .chat-composer { padding-top: 7px !important; }
}