/* Mobile workbench layer: the desktop CRM remains the source of truth while
   phones get a focused customer, conversation, video and report path. */
:root {
  --app-height: 100dvh;
  --app-offset-top: 0px;
  --mobile-nav-height: 68px;
}

.mobile-bottom-nav {
  display: none;
}

.mobile-app-bar {
  display: none;
}
.mobile-record-tabs,.mobile-filter-toggle,.mobile-chat-more{display:none}

.mobile-nav-badge {
  position: absolute;
  top: 5px;
  right: 25%;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: #c96d50;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.inbox-mobile-video {
  display: none;
  align-items: center;
  gap: 5px;
}

.inbox-mobile-video svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 680px) {
  :root {
    --mobile-nav-height: 70px;
  }

  html,
  body {
    min-height: var(--app-height);
  }

  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .workspace {
    min-height: var(--app-height);
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  }

  .workspace > .topbar {
    display: none;
  }

  .mobile-app-bar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: max(9px, env(safe-area-inset-top)) 16px 9px;
    background: #f6f8f3;
    border-bottom: 1px solid rgba(211, 222, 211, .9);
  }

  .mobile-app-back {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--green);
  }

  .mobile-app-back svg {
    width: 20px;
    height: 20px;
  }

  .mobile-app-title {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    text-align: center;
  }

  .mobile-app-title strong {
    overflow: hidden;
    color: #183c35;
    font-size: 17px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-app-title span {
    color: #718276;
    font-size: 10px;
  }

  .mobile-app-account {
    width: 34px;
    height: 34px;
    border: 0;
    background: #dcebd5;
    color: #205239;
    font-size: 13px;
  }

  .mobile-inbox-detail .mobile-app-bar {
    display: none;
  }

  .content:not(.inbox-content) {
    padding: 16px 15px 30px;
  }

  .content {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: var(--mobile-nav-height);
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(193, 207, 193, .9);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -8px 24px rgba(36, 64, 41, .08);
    backdrop-filter: blur(14px);
  }

  .mobile-bottom-nav button {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #718276;
    font: inherit;
    font-size: 11px;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav button.active {
    background: #edf4e9;
    color: #1b6142;
    font-weight: 700;
  }

  .mobile-nav-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
  }

  .mobile-nav-icon svg {
    width: 20px;
    height: 20px;
  }

  .mobile-inbox-detail .mobile-bottom-nav {
    display: none;
  }

  .mobile-inbox-detail .workspace {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-inbox-detail .content {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .inbox-content {
    padding-top: 0 !important;
  }

  .inbox-list-pane {
    border: 0;
    background: #f6f8f3;
  }

  .inbox-list-heading {
    padding: 17px 16px 11px;
  }

  .inbox-list-heading h2 {
    color: #183c35;
    font-size: 22px;
    letter-spacing: -.6px;
  }

  .inbox-list-heading .inbox-count {
    font-size: 12px;
  }

  .inbox-list-controls {
    gap: 4px;
  }

  .inbox-list-controls .btn:not(.btn-primary),
  .inbox-list-controls .inbox-unread-toggle {
    min-height: 34px;
    padding: 7px 8px;
    border: 0;
    border-radius: 10px;
    background: #e7f1eb;
    color: #1b6142;
    font-weight: 650;
  }

  .inbox-list-controls .btn[data-action="inbox-add-contact"] {
    display: none;
  }

  .inbox-search {
    min-height: 43px;
    margin: 0 15px 10px;
    padding: 4px 10px;
    border: 0;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(24, 60, 53, .06);
  }

  .inbox-search input {
    font-size: 14px;
  }

  .inbox-wa-row {
    margin: 0 15px 7px;
  }

  .inbox-wa-label {
    display: none;
  }

  .inbox-wa {
    width: 100%;
    height: 38px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: #eaf2e7;
    color: #285339;
    font-size: 12px;
  }

  .inbox-wa-hint {
    margin: 0 15px 8px;
    font-size: 10px;
  }

  .inbox-business-tabs {
    display: flex;
    gap: 7px;
    padding: 3px 15px 10px;
    overflow-x: auto;
    border-bottom: 0;
    scrollbar-width: none;
  }

  .inbox-business-tabs::-webkit-scrollbar {
    display: none;
  }

  .inbox-business-tabs button {
    min-width: max-content;
    min-height: 33px;
    padding: 7px 11px;
    border: 1px solid #d9e5d7;
    border-radius: 18px;
    background: #fff;
    color: #718276;
    font-size: 11px;
  }

  .inbox-business-tabs button.active {
    border-color: #236746;
    background: #236746;
    color: #fff;
  }

  .inbox-conversations {
    padding: 0 8px;
  }

  .inbox-conversation {
    min-height: 78px;
    align-items: center;
    margin: 4px 0;
    padding: 13px 11px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(24, 60, 53, .045);
  }

  .inbox-conversation:hover,
  .inbox-conversation.selected {
    background: #eaf3e7;
  }

  .inbox-conversation.selected:before {
    display: none;
  }

  .inbox-conversation .avatar {
    width: 43px;
    height: 43px;
    font-size: 14px;
  }

  .inbox-conversation-top b {
    font-size: 14px;
  }

  .inbox-conversation-message {
    margin: 5px 0 3px;
    font-size: 12px;
  }

  .inbox-conversation-bottom {
    font-size: 10px;
  }

  .inbox-pagination {
    padding: 11px 16px;
  }

  .customer-directory .page-heading .eyebrow,
  .customer-record .customer-record-back {
    display: none;
  }

  .customer-directory .page-heading {
    margin: 4px 1px 17px;
  }

  .customer-directory .page-heading h1 {
    font-size: 26px;
  }

  .customer-directory .page-heading p {
    margin-top: 5px;
    font-size: 11px;
  }

  .customer-filter {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(24, 60, 53, .06);
  }

  .customer-filter label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    color: #718276;
  }

  .customer-filter input,
  .customer-filter select {
    min-height: 42px;
    border: 1px solid #dfe8dc;
    border-radius: 10px;
    padding: 8px 10px;
    background: #f8faf6;
    color: #183c35;
    font-size: 13px;
  }

  .customer-filter > .btn {
    min-height: 42px;
    border-radius: 11px;
    font-size: 13px;
  }

  .customer-stage-tabs {
    display: flex;
    gap: 7px;
    margin: 14px 0 9px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .customer-stage-tabs::-webkit-scrollbar {
    display: none;
  }

  .customer-stage-tabs button {
    min-width: max-content;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #d9e5d7;
    border-radius: 18px;
    background: #fff;
    color: #718276;
    font-size: 11px;
  }

  .customer-stage-tabs button.active {
    border-color: #236746;
    background: #236746;
    color: #fff;
  }

  .customer-list-count {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 13px 2px 8px;
    color: #718276;
    font-size: 10px;
  }

  .customer-list-count strong {
    color: #183c35;
    font-size: 13px;
  }

  .customer-directory > .panel {
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .customer-directory .table-wrap {
    overflow: visible;
  }

  .customer-directory table,
  .customer-directory tbody {
    display: block;
    white-space: normal;
  }

  .customer-directory thead {
    display: none;
  }

  .customer-directory tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    margin: 7px 0;
    padding: 13px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(24, 60, 53, .05);
  }

  .customer-directory td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 11px;
    color: #718276;
  }

  .customer-directory td:nth-child(1) {
    grid-row: span 3;
  }

  .customer-directory td:nth-child(2)::before {
    content: '电话 · ';
    color: #9aa89d;
  }

  .customer-directory td:nth-child(3) {
    display: none;
  }

  .customer-directory td:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    color: #9aa89d;
    font-size: 10px;
  }

  .customer-directory td:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .customer-directory td:nth-child(5) .btn {
    min-height: 30px;
    padding: 6px 8px;
    border-radius: 9px;
    background: #e7f1eb;
    color: #1b6142;
    font-size: 10px;
  }

  .customer-directory .name-cell {
    min-height: 47px;
    align-items: center;
  }

  .customer-directory .name-cell .avatar {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  .customer-directory .name-cell b {
    color: #183c35;
    font-size: 14px;
  }

  .customer-directory .pagination {
    padding: 4px 3px 16px;
  }

  .customer-record .customer-record-hero {
    margin: 0 0 13px;
    padding: 18px 15px;
    border: 0;
    border-radius: 17px;
    background: #173d31;
    color: #fff;
  }

  .customer-record-hero .avatar {
    background: #dcebd5;
    color: #205239;
  }

  .customer-record-hero h1,
  .customer-record-hero p {
    color: #fff;
  }

  .customer-record-hero p {
    opacity: .75;
  }

  .customer-record .customer-context-controls,
  .customer-record .customer-case-note {
    border-radius: 13px;
    border: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(24, 60, 53, .05);
  }

  .customer-record .panel {
    border-radius: 15px;
    border-color: #e1e9df;
  }

  .inbox-mobile-video {
    display: inline-flex;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 8px;
  }

  .inbox-mobile-video span {
    display: inline;
  }
}

@media (max-width: 390px) {
  .inbox-mobile-video span {
    display: none;
  }

  .inbox-mobile-video {
    width: 38px;
    justify-content: center;
    padding: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav {
    backdrop-filter: none;
  }
}

/* Phone screens use a viewport shell. Only the current work surface scrolls. */
@media(max-width:680px){
 html,body{height:100%;overflow:hidden;padding:0}
 /* A fixed shell stays out of the document's focus-scroll area. Its origin
    follows visualViewport.offsetTop while iOS pans above the keyboard. */
 #app:has(.workspace){position:fixed;top:var(--app-offset-top,0px);left:0;right:0;bottom:auto;width:100%;height:var(--app-height,100dvh);overflow:hidden}
 #app .workspace{height:100%;min-height:0;display:flex;flex-direction:column;padding:0;margin:0}
 .workspace>.topbar,.workspace>.reminder-banner{display:none}
 .mobile-app-bar{position:relative;flex:none;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;min-height:64px}
 .mobile-app-back[hidden]{display:none}
 .mobile-app-title{text-align:left}
 .mobile-bottom-nav{position:relative;flex:none;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));min-height:64px;box-shadow:none;padding:6px 10px calc(6px + env(safe-area-inset-bottom));background:#fff}
 #app .content{flex:1;width:100%;min-height:0;overflow:auto;max-width:none;margin:0;overscroll-behavior-y:contain;padding:16px}
 #app .inbox-content{height:auto;min-height:0;padding:0;overflow:hidden}
 #app .inbox-layout{height:100%;min-height:0;grid-template-columns:minmax(0,1fr);box-shadow:none;border:0;border-radius:0}
 #app .inbox-list-pane{padding:0;min-height:0}
 #app .inbox-list-heading{padding:4px 15px 8px;min-height:50px}
 #app .inbox-list-heading h2{font-size:18px}
 .inbox-list-controls .btn[data-action="inbox-add-contact"]{display:inline-flex}
 #app .inbox-search{min-height:44px}
 #app .inbox-search input{font-size:16px}
 .mobile-filter-toggle{display:block;margin:0 15px 8px;min-height:44px;text-align:left;border:0;border-radius:10px;padding:10px 13px;background:#eaf2e7;color:#285339}
 #app .inbox-wa-row,#app .inbox-wa-hint,#app #inbox-business-filters{display:none}
 #app .mobile-filters-open .inbox-wa-row,#app .mobile-filters-open .inbox-wa-hint,#app .mobile-filters-open #inbox-business-filters{display:block}
 #app .mobile-filters-open .mobile-filter-toggle{background:#173d31;color:white}
 #app .inbox-pagination{padding:4px 15px;min-height:0;font-size:11px}
 .inbox-list-load-actions:empty{display:none}
 .inbox-list-progress{font-size:11px}
 #app .inbox-chat-header{padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:#173d31}
 #app .inbox-chat-header h2,#app .inbox-back{color:white}
 #app .inbox-chat-header p{color:#d5e4db;font-size:12px}
 #app .inbox-chat-tools{gap:8px;margin-top:10px}
 #app .inbox-chat-tools>.btn,#app .inbox-chat-tools>.badge{display:none}
 #app .inbox-chat-tools>[data-action="inbox-context-toggle"],#app .inbox-chat-tools>.inbox-mobile-video{display:inline-flex;min-height:44px;padding:8px 13px;font-size:13px;margin:0}
 #app .inbox-chat-tools>.inbox-mobile-video span{display:inline}
 #app .inbox-chat-tools>.inbox-mobile-video{width:auto;flex:1;background:#d9ebd8;color:#173d31}
 #app .mobile-chat-more{display:inline-flex;min-height:44px;border:1px solid #789888;border-radius:9px;background:transparent;color:#fff;padding:8px 10px;align-items:center}
 #app .mobile-tools-open .inbox-chat-tools>.btn,#app .mobile-tools-open .inbox-chat-tools>.badge{display:inline-flex;min-height:40px}
 #app .inbox-compose{padding:8px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:none}
 #app .inbox-compose textarea{height:52px;min-height:48px;max-height:96px;resize:none;font-size:16px}
 #app .inbox-compose-footer{margin-top:6px;justify-content:space-between}
 #app .inbox-compose-footer .btn{min-height:44px;font-size:13px}
 #inbox-compose-hint,.inbox-composer-label{display:none}
 #app .inbox-language-row{margin:6px 0 0;font-size:12px}
 #app .inbox-language-row select{font-size:16px;min-height:36px;padding:3px}
 #app #inbox-language-hint{display:none}
 #app .inbox-context{inset:0;width:100%;padding:0 16px 24px;z-index:25;background:#f6f8f3;box-shadow:none}
 #app .inbox-context-heading{position:sticky;top:0;padding:calc(12px + env(safe-area-inset-top)) 0 12px;background:#f6f8f3;z-index:1}
 #app .inbox-context-heading h2{font-size:18px}
 #app .inbox-context .btn,#app .inbox-context .icon-button{min-height:44px}
 #app .inbox-context .inbox-ai-summary-copy{font-size:14px;line-height:1.7}
 #app .inbox-context .inbox-patient-selector select{font-size:16px;min-height:44px}
 .mobile-customer-detail .mobile-bottom-nav{display:none}
 .mobile-record-tabs{display:flex;gap:5px;margin:12px 0;padding:4px;background:#e9efe5;border-radius:12px}
 .mobile-record-tabs button{flex:1;min-height:44px;border:0;border-radius:9px;background:transparent;color:#53695d;font-size:14px}
 .mobile-record-tabs button[aria-pressed=true]{background:#fff;color:#173d31;box-shadow:0 1px 4px #173d3114;font-weight:650}
 .customer-record[data-mobile-tab=overview] [data-mobile-section]:not([data-mobile-section=overview]),
 .customer-record[data-mobile-tab=business] [data-mobile-section]:not([data-mobile-section=business]),
 .customer-record[data-mobile-tab=records] [data-mobile-section]:not([data-mobile-section=records]){display:none}
 .customer-record .btn{min-height:44px;font-size:13px}
 .customer-record .customer-context-controls{padding:12px;gap:10px}
 .customer-context-controls select{font-size:16px;min-height:44px}
 .customer-record .customer-case-note{padding:10px 12px;font-size:12px}
 .customer-directory tr{display:grid;grid-template-columns:1fr auto}
 .customer-directory td:nth-child(1){grid-column:1;grid-row:1}
 .customer-directory td:nth-child(2){grid-column:1;grid-row:2;overflow-wrap:anywhere;color:#53695d}
 .customer-directory td:nth-child(3){display:block;grid-column:1/-1;grid-row:3}
 .customer-directory td:nth-child(4){grid-column:2;grid-row:2}
 .customer-directory td:nth-child(5){grid-column:2;grid-row:1}
 .customer-directory td:nth-child(5) .btn{min-height:44px}
 .customer-directory .name-cell b{overflow-wrap:anywhere}
 .mobile-more-page h2{font-size:13px;color:#657a6d;margin:22px 4px 9px}
 .mobile-profile{display:flex;align-items:center;gap:14px;padding:18px 8px}
 .mobile-profile>.avatar{width:58px;height:58px;font-size:22px}
 .mobile-profile h1{font-size:23px}
 .mobile-profile p{font-size:13px;color:#657a6d}
 .mobile-tool-list{background:white;border-radius:15px;overflow:hidden}
 .mobile-tool-list button{display:flex;width:100%;align-items:center;justify-content:space-between;padding:16px;min-height:56px;border:0;border-bottom:1px solid #edf1e8;background:white;color:#183c35;text-align:left;font-size:15px}
 .mobile-tool-list svg{width:20px;height:20px}
 .login{height:var(--app-height,100dvh);overflow:auto;display:flex;flex-direction:column;min-height:0}
 .login-story{flex:none;min-height:0;padding:calc(32px + env(safe-area-inset-top)) 25px 20px}
 .login-story-content,.login-rings{display:none}
 .login-form-side{flex:1;align-items:flex-start;padding:28px 25px}
 .login input{min-height:48px;font-size:16px}
 dialog{width:100%;max-width:none;margin:auto 0 0;border-radius:22px 22px 0 0;max-height:calc(var(--app-height,100dvh) - 20px);padding-bottom:env(safe-area-inset-bottom)}
 dialog .field input,dialog .field select,dialog .field textarea{font-size:16px;min-height:44px}
 dialog .btn,dialog .icon-button{min-height:44px}
 .toast{bottom:calc(82px + env(safe-area-inset-bottom));font-size:13px}
}
@media(max-width:680px){
 #app:has(.workspace){display:flex;flex-direction:column}
 #app .workspace{flex:1;height:0}
 #app .mobile-bottom-nav{flex-shrink:0}
 #app.mobile-inbox-detail .content{padding:0}
 .mobile-app-account{min-width:44px;min-height:44px}
 .mobile-app-back:not([hidden]),.inbox-back{min-width:44px;min-height:44px}
}

/* Inbox v2: keep the list dense like a native messenger. Secondary work
   stays available, but it must not push the next customer below the fold. */
@media(max-width:680px){
 .mobile-app-actions{display:flex;align-items:center;gap:6px;min-width:92px;justify-content:flex-end}
 .mobile-reminder-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:44px;padding:0 5px;border:0;border-radius:12px;background:transparent;color:#1b6142;font:inherit;font-size:10px;font-weight:750}
 .mobile-reminder-toggle[hidden]{display:none}
 .mobile-reminder-toggle:not([hidden])::after{content:'';position:absolute;top:4px;right:3px;width:7px;height:7px;border-radius:50%;background:#d86b57;border:2px solid #f6f8f3}
 .mobile-reminder-icon{display:inline-flex;width:19px;height:19px}
 .mobile-reminder-icon svg{width:19px;height:19px}
 .mobile-reminder-toggle[aria-expanded=true]{background:#e7f1eb}
 #app .workspace{position:relative}
 #app .workspace>.reminder-banner{display:none;position:absolute;top:64px;right:12px;left:12px;z-index:35;max-height:58vh;overflow:auto;margin:0;padding:13px 14px;border-radius:15px;background:#fffaf0;border:1px solid #ead7b5;box-shadow:0 12px 30px rgba(38,64,42,.18);align-items:flex-start;gap:10px}
 #app .workspace>.reminder-banner{top:calc(64px + env(safe-area-inset-top))}
 #app.mobile-reminder-open .workspace>.reminder-banner{display:flex}
 #app.mobile-reminder-open .workspace::after{content:'';position:absolute;inset:0;z-index:34;background:rgba(23,61,49,.06);pointer-events:none}
 #app .workspace>.reminder-banner .reminder-banner-icon{width:30px;height:30px;border-radius:9px}
 #app .workspace>.reminder-banner .reminder-banner-copy strong{font-size:13px}
 #app .workspace>.reminder-banner .reminder-chips{gap:5px;margin-top:7px}
 #app .workspace>.reminder-banner .reminder-chip{padding:5px 8px}
 #app .workspace>.reminder-banner .actions{display:flex;flex-direction:column;gap:6px;margin-left:auto}
 #app .workspace>.reminder-banner .actions .btn{min-height:36px;padding:6px 9px;font-size:11px;white-space:nowrap}

 #app .inbox-list-heading{padding:5px 15px 6px;min-height:44px}
 #app .inbox-list-heading h2{font-size:18px;letter-spacing:-.35px}
 #app .inbox-list-controls .btn,#app .inbox-list-controls .inbox-unread-toggle{min-height:31px;padding:5px 7px;font-size:10px}
 #app .inbox-search{min-height:39px;margin:0 15px 6px;border-radius:11px}
 #app .inbox-search input{font-size:15px}
 #app .mobile-filter-toggle{min-height:34px;margin:0 15px 4px;padding:6px 10px;border-radius:9px;font-size:11px}
 #app .inbox-conversations{padding:0 4px}
 #app .inbox-conversation{min-height:64px;align-items:center;margin:1px 0;padding:8px 9px;border-radius:10px;box-shadow:none;border-bottom:1px solid #edf1e8}
 #app .inbox-conversation .avatar{width:36px;height:36px;font-size:12px}
 #app .inbox-conversation-top b{font-size:13px}
 #app .inbox-conversation-message{margin:2px 0 2px;font-size:11px;line-height:1.35}
 #app .inbox-conversation-bottom{font-size:9px;line-height:1.2}
 #app .inbox-conversation-bottom .inbox-business-label{padding:2px 4px;font-size:8px}
 #app .inbox-conversation-bottom .inbox-business-label{display:none}
 #app .inbox-conversation{transition:background-color .16s ease,transform .16s ease}
 #app .inbox-conversation:active{background:#eaf2e7;transform:scale(.992)}
 #app .inbox-pagination{padding:4px 10px;font-size:10px}

 #app .inbox-chat-header{padding:calc(6px + env(safe-area-inset-top)) 10px 8px}
 #app .inbox-customer-heading{gap:7px}
 #app .inbox-customer-heading>.avatar{width:34px;height:34px;font-size:12px}
 #app .inbox-customer-heading h2{font-size:15px}
 #app .inbox-customer-heading p{font-size:10px}
 #app .inbox-chat-tools{gap:5px;margin-top:6px}
 #app .inbox-chat-tools>[data-action="inbox-context-toggle"],#app .inbox-chat-tools>.inbox-mobile-video,#app .mobile-chat-more{min-height:36px;padding:6px 9px;font-size:11px;border-radius:8px}
 #app .inbox-chat-tools>.inbox-mobile-video{flex:1}
 #app .inbox-message-scroll{padding:3px 10px 12px}
 #app .inbox-date-divider{margin:10px 0 12px}
 #app .inbox-date-divider span{padding:3px 7px;font-size:9px}
 #app .inbox-compose{padding:6px 9px calc(8px + env(safe-area-inset-bottom))}
 #app .inbox-compose textarea{height:48px;min-height:44px;border-radius:10px;font-size:16px;padding:7px 9px}
 #app .inbox-compose-footer{margin-top:5px}
 #app .inbox-compose-footer .btn{min-height:40px;padding:7px 13px;border-radius:9px}
 #app .inbox-ai-panel{display:none!important}
}

@media(max-width:680px) and (prefers-reduced-motion:no-preference){
 #app .mobile-bottom-nav button{transition:background-color .16s ease,color .16s ease,transform .16s ease}
 #app .mobile-bottom-nav button:active{transform:scale(.94)}
 #app .mobile-app-account:active,#app .mobile-reminder-toggle:active{transform:scale(.94)}
}

/* Mobile density pass.  Keep the conversation list as the primary surface:
   filters live behind one compact control and pagination never reserves a
   permanent block at the bottom of the list. */
@media (max-width: 680px) {
  html,
  body,
  #app {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body {
    background: #f6f8f3;
  }

  #app {
    height: var(--app-height, 100dvh);
    min-height: 0;
  }

  #app .workspace {
    flex: 1 1 auto;
    height: 0;
    max-height: none;
    min-height: 0;
    overflow: hidden;
  }

  #app .mobile-app-bar {
    min-height: 56px;
    padding: calc(6px + env(safe-area-inset-top)) 12px 6px;
  }

  #app .mobile-app-title strong {
    font-size: 16px;
  }

  #app .mobile-app-title span {
    display: none;
  }

  #app .mobile-bottom-nav {
    min-height: 58px;
    padding: 3px 8px max(3px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(36, 64, 41, .06);
  }

  #app .mobile-bottom-nav button {
    min-height: 46px;
    gap: 1px;
    font-size: 10px;
  }

  #app .mobile-nav-icon,
  #app .mobile-nav-icon svg {
    width: 19px;
    height: 19px;
  }

  /* The list pane is a vertical flex surface.  Ordering the filter trigger
     immediately below the title keeps search and conversations above the fold. */
  #app .inbox-list-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  #app .inbox-list-heading {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 3px 12px 4px;
  }

  #app .inbox-list-heading h2 {
    font-size: 17px;
    letter-spacing: -.25px;
  }

  #app .inbox-list-heading .inbox-count {
    font-size: 11px;
  }

  #app .inbox-list-controls {
    gap: 3px;
  }

  #app .inbox-list-controls .btn,
  #app .inbox-list-controls .inbox-unread-toggle {
    min-height: 28px;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: 10px;
  }

  #app .inbox-list-controls .btn[data-action="inbox-add-contact"] {
    display: none;
  }

  #app .mobile-filter-toggle {
    order: 1;
    flex: 0 0 auto;
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    margin: 0 12px 4px;
    padding: 6px 10px;
    border: 1px solid #d9e5d7;
    border-radius: 9px;
    background: #edf4e9;
    color: #285339;
    font-size: 11px;
    font-weight: 650;
  }

  #app .mobile-filter-toggle::after {
    content: '⌄';
    font-size: 15px;
    line-height: 1;
    transition: transform .16s ease;
  }

  #app .mobile-filters-open .mobile-filter-toggle {
    background: #173d31;
    border-color: #173d31;
    color: #fff;
  }

  #app .mobile-filters-open .mobile-filter-toggle::after {
    transform: rotate(180deg);
  }

  #app .inbox-search {
    order: 2;
    flex: 0 0 auto;
    min-height: 38px;
    margin: 0 12px 4px;
    padding: 2px 9px;
    border-radius: 10px;
  }

  #app .inbox-search input {
    font-size: 15px;
  }

  #app .inbox-wa-row,
  #app .inbox-wa-hint,
  #app #inbox-business-filters {
    order: 3;
  }

  #app #inbox-layout:not(.mobile-filters-open) .inbox-wa-row,
  #app #inbox-layout:not(.mobile-filters-open) .inbox-wa-hint,
  #app #inbox-layout:not(.mobile-filters-open) #inbox-business-filters {
    display: none;
  }

  #app .inbox-wa-row {
    margin: 0 12px 4px;
  }

  #app .inbox-wa {
    height: 34px;
    width: 100%;
    margin: 0;
    border-radius: 9px;
    font-size: 11px;
  }

  #app .inbox-wa-hint {
    margin: 0 12px 4px;
    font-size: 9px;
  }

  #app #inbox-business-filters {
    max-height: 132px;
    overflow: auto;
    border-bottom: 1px solid #e3ebe0;
  }

  #app #inbox-business-filters .inbox-business-tabs {
    gap: 5px;
    padding: 2px 12px 5px;
  }

  #app #inbox-business-filters .inbox-business-tabs button {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 10px;
  }

  #app #inbox-business-filters .inbox-tag-subfilters {
    padding: 4px 12px 6px;
  }

  #app #inbox-list-notice {
    order: 4;
    flex: 0 0 auto;
  }

  #app .inbox-conversations {
    order: 5;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 0 3px;
  }

  #app .inbox-conversation {
    min-height: 60px;
    margin: 0;
    padding: 7px 8px;
    border-radius: 8px;
    box-shadow: none;
  }

  #app .inbox-conversation .avatar {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  #app .inbox-conversation-top b {
    font-size: 12px;
  }

  #app .inbox-conversation-message {
    margin: 2px 0;
    font-size: 11px;
    line-height: 1.3;
  }

  #app .inbox-conversation-bottom {
    font-size: 9px;
    line-height: 1.15;
  }

  /* Scrolling now loads the next page.  Keep the footer only for retry or a
     pending list update, where an explicit action is still useful. */
  #app .inbox-pagination {
    order: 6;
    flex: 0 0 auto;
    display: none;
    min-height: 0;
    padding: 3px 10px;
    border-top: 1px solid #e3ebe0;
    font-size: 10px;
  }

  #app .inbox-pagination:has(.inbox-list-load-error),
  #app .inbox-pagination:has([data-action="inbox-list-update"]) {
    display: flex;
  }

  #app .inbox-list-footer {
    display: none;
  }

  /* A selected conversation is a full-height surface with no second footer
     inset.  This removes the blank band visible below the composer. */
  #app.mobile-inbox-detail .content,
  #app.mobile-inbox-detail .inbox-content,
  #app.mobile-inbox-detail .inbox-layout,
  #app.mobile-inbox-detail .inbox-chat-pane {
    height: 100%;
    min-height: 0;
  }

  /* The density pass gives the list pane an explicit flex display.  Keep the
     detail route's one-surface behavior more specific so the list never
     remains stacked above the selected chat on a phone. */
  #app.mobile-inbox-detail .inbox-layout {
    display: block;
  }

  #app.mobile-inbox-detail .inbox-list-pane {
    display: none;
  }

  #app.mobile-inbox-detail .inbox-chat-pane {
    display: flex;
    width: 100%;
  }

  #app.mobile-inbox-detail .inbox-message-scroll {
    min-height: 0;
    overscroll-behavior-y: contain;
  }

  #app.mobile-inbox-detail .inbox-compose {
    flex: 0 0 auto;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  #app.mobile-inbox-detail .inbox-chat-header {
    padding-top: calc(5px + env(safe-area-inset-top));
  }
}

.customer-filter-advanced{display:contents}
.customer-filter-toggle{display:none}

/* Keep routing, send restrictions, translation and business-stage context
   visible on phones. These details are needed before an employee replies. */
@media(max-width:680px){
  #app .inbox-composer-label{display:flex;gap:8px;justify-content:space-between;font-size:12px;line-height:1.4}
  #app #inbox-compose-hint{display:block;flex:1 1 100%;font-size:12px;line-height:1.45;color:#526b5c}
  #app .inbox-compose-footer{flex-wrap:wrap;gap:6px}
  #app #inbox-language-hint{display:inline;font-size:12px;line-height:1.4}
  #app .inbox-conversation-bottom .inbox-business-label{display:inline-flex;align-items:center;max-width:46%;min-height:19px;padding:2px 5px;font-size:10px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #app .inbox-list-controls .btn,#app .inbox-list-controls .inbox-unread-toggle,
  #app .mobile-filter-toggle,#app .inbox-chat-tools>[data-action="inbox-context-toggle"],
  #app .inbox-chat-tools>.inbox-mobile-video,#app .mobile-chat-more,
  #app .inbox-compose-footer .btn,#app .inbox-language-row select{min-height:44px}
  #app .inbox-search input,#app .inbox-language-row select{font-size:16px}
  #app .mobile-notification-action{min-height:44px;white-space:nowrap;font-size:11px;padding:6px 8px}
  #app .mobile-bottom-nav button{min-height:48px;font-size:10px}
  #app .wa-report-scope::after{content:'手机上左右滑动每个号码的期间卡片，可查看今天、本周、本月和历史。';display:block;margin-top:7px;color:#315d42}
  #app .wa-report-period-grid{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:10px 12px 14px}
  #app .wa-report-period{flex:0 0 min(82vw,320px);scroll-snap-align:start}
  #app .wa-report-filters button{min-height:44px}

  /* Restrictions use a whole line; the language selector and action buttons
     remain comfortable to tap even when the 24-hour explanation is long. */
  #app .inbox-compose-footer{display:grid;grid-template-columns:1fr auto;align-items:center}
  #app #inbox-compose-hint{grid-column:1/-1;min-width:0;max-width:none;width:100%;white-space:normal;overflow-wrap:anywhere}
  #app #inbox-attach{justify-self:start}
  #app #inbox-send{grid-column:2;justify-self:end}
  #app #inbox-language-row{display:grid;grid-template-columns:auto minmax(100px,1fr);gap:5px 8px;align-items:center}
  #app #inbox-language-row[hidden]{display:none}
  #app #inbox-language-hint{grid-column:1/-1;min-width:0;width:100%;white-space:normal}

  #app .customer-directory .page-heading{margin:0 0 9px;align-items:center}
  #app .customer-directory .page-heading h1{font-size:21px}
  #app .customer-directory .page-heading p{display:none}
  #app .customer-directory .page-heading .btn{min-height:44px}
  #app .customer-filter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 8px;padding:10px;box-shadow:none}
  #app .customer-filter .customer-search-field{grid-column:1;grid-row:1;min-width:0;gap:4px}
  #app .customer-filter input,#app .customer-filter select{min-height:44px;font-size:16px}
  #app .customer-filter>.btn{grid-column:2;grid-row:1;min-height:44px;align-self:end}
  #app .customer-filter-toggle{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;border:0;border-radius:9px;padding:8px 10px;background:#edf4e9;color:#285339;font:inherit;font-size:12px;text-align:left}
  #app .customer-filter-toggle span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #app .customer-filter-toggle[aria-expanded=true]{background:#dcebd5}
  #app .customer-filter-toggle[aria-expanded=true] span:last-child{transform:rotate(180deg)}
  #app .customer-filter-advanced{display:none;grid-column:1/-1}
  #app .customer-filter.is-expanded .customer-filter-advanced{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
  #app .customer-filter-advanced label{min-width:0}
  #app .customer-stage-tabs{flex-wrap:nowrap;margin:8px 0;overscroll-behavior-x:contain}
  #app .customer-stage-tabs button{min-height:44px;flex:none}
  #app .customer-list-count{align-items:flex-start;margin:9px 2px 7px}
}

/* Chat first: one input row and a compact language control. Restrictions and
   draft/patient warnings stay visible; routine help is opened on demand. */
#app .inbox-compose{padding:8px 12px;background:#f8faf6;position:relative;flex:none}
#app .inbox-compose-main{display:flex;align-items:flex-end;gap:7px;min-width:0}
#app .inbox-compose-main textarea{flex:1;min-width:0;width:0;height:44px;min-height:44px;max-height:104px;resize:none;padding:10px 11px;border:1px solid #d7dfd5;border-radius:8px;background:#fff;font-size:15px;line-height:22px;box-sizing:border-box}
#app .inbox-compose-main .btn{flex:none;min-height:44px;padding:8px 14px;font-size:14px;border-radius:8px;max-width:145px;line-height:1.3}
#app .inbox-compose-main .inbox-attach-compact{width:40px;padding:8px;min-width:40px;background:transparent;border:0;color:#42624d}
#app .inbox-attach-compact svg{width:24px;height:24px}
#app .inbox-compose-options{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px;min-height:32px}
#app #inbox-language-row{display:flex;align-items:center;gap:5px;margin:0;font-size:11px;min-width:0}
#app #inbox-language-row[hidden],#app #inbox-attach[hidden]{display:none}
#app #inbox-language-row label{font-size:11px;white-space:nowrap;color:#536958}
#app #inbox-language-row select{width:auto;max-width:142px;min-width:84px;min-height:32px;height:32px;padding:2px 22px 2px 5px;font-size:13px;border:0;background-color:transparent;color:#244632}
#app .inbox-compose-help{font-size:11px;line-height:1.5;color:#536958;position:static;margin-left:0;flex:none}
#app .inbox-compose-help>summary{cursor:pointer;padding:7px 2px;min-height:30px;box-sizing:border-box}
#app .inbox-compose-explainer{position:absolute;bottom:38px;right:0;width:min(300px,calc(100vw - 30px));padding:12px;background:white;border:1px solid #d3ded0;border-radius:9px;box-shadow:0 6px 24px #173d3126;z-index:8;font-size:12px;line-height:1.5}
#app .inbox-compose-explainer p{margin:5px 0}
#app .inbox-compose-explainer .inbox-composer-label{display:flex;font-size:11px;margin:0 0 6px;gap:12px}
#app .inbox-compose-explainer #inbox-language-hint{display:block;font-size:12px;line-height:1.5;width:auto}
#app .inbox-compose-footer{display:none;margin:0}
#app .inbox-compose.has-restriction .inbox-compose-footer{display:block;margin-top:5px}
#app .inbox-compose.has-restriction #inbox-compose-hint{display:block;font-size:12px;color:#88452e;line-height:1.45;white-space:normal}
#app .inbox-compose .inbox-inline-error:not(:empty){padding:5px 8px;margin-top:4px;font-size:12px;line-height:1.45}
@media(max-width:680px){
 #app.mobile-inbox-detail .inbox-chat-header{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:4px;padding:calc(4px + env(safe-area-inset-top)) 7px 4px;min-height:60px;box-sizing:border-box}
 #app .inbox-customer-heading{gap:6px;min-width:0}
 #app .inbox-customer-heading>div{min-width:0;flex:1}
 #app .inbox-customer-heading h2{font-size:15px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 #app .inbox-chat-header p{font-size:11px;line-height:1.3;margin-top:2px}
 #app .inbox-customer-heading .avatar{width:29px;height:29px;flex:none;font-size:13px}
 #app .inbox-customer-heading .inbox-back{width:30px;min-width:30px;min-height:44px;padding:5px;flex:none}
 #app .inbox-chat-tools{display:flex;justify-content:flex-end;margin:0;gap:5px}
 #app .inbox-chat-tools>.btn,#app .inbox-chat-tools>.badge,#app .inbox-chat-tools>.inbox-mobile-video{display:none}
 #app .inbox-chat-tools .mobile-chat-more{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:4px;font-size:12px;margin:0}
 #app .mobile-tools-open .inbox-chat-tools{grid-column:1/-1;flex-wrap:wrap;justify-content:flex-start;padding-top:4px}
 #app .mobile-tools-open .inbox-chat-tools>.btn,#app .mobile-tools-open .inbox-chat-tools>.badge,#app .mobile-tools-open .inbox-chat-tools>.inbox-mobile-video{display:inline-flex;min-height:40px}
 #app .mobile-tools-open .inbox-chat-tools .mobile-chat-more{margin-left:auto}
 #app.mobile-inbox-detail .inbox-compose{padding:6px 8px max(6px,env(safe-area-inset-bottom))}
 #app .inbox-compose-main{gap:5px}
 #app .inbox-compose-main textarea{font-size:16px}
 #app .inbox-compose-main .btn{min-height:44px}
 #app #inbox-language-row select{font-size:16px;min-height:32px;height:32px}
 #app .inbox-compose-help{font-size:11px}
 #app.mobile-inbox-detail.mobile-keyboard-open .inbox-compose{padding-bottom:6px}
}

/* Deal-only directories add owner cells between WA and the original date/action. */
@media(max-width:680px){
 #app .customer-directory-deals tr{grid-template-columns:minmax(0,1fr) auto}
 #app .customer-directory-deals td.customer-deal-sales,
 #app .customer-directory-deals td.customer-deal-operations{grid-column:1/-1;min-width:0;color:#294c3d;font-size:13px;overflow-wrap:anywhere;border-top:1px solid #edf1e8;padding-top:8px}
 #app .customer-directory-deals td.customer-deal-sales{grid-row:4}
 #app .customer-directory-deals td.customer-deal-operations{grid-row:5}
 #app .customer-directory-deals td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:#657a6d;margin-bottom:4px}
 #app .customer-directory-deals td:nth-child(6){grid-column:2;grid-row:2;color:#9aa89d;font-size:10px}
 #app .customer-directory-deals td:nth-child(7){grid-column:2;grid-row:1;align-self:start}
 #app .customer-directory-deals td:nth-child(7) .btn{min-height:44px;padding:6px 9px;font-size:11px;white-space:nowrap}
}

/* The same optional filter panel is collapsed on desktop and phone. */
@media(max-width:680px){
 #app .inbox-search{order:1}
 #app .inbox-filter-anchor{order:2}
 #app #inbox-filters-toggle{min-height:38px;margin-bottom:5px;width:calc(100% - 24px)}
 #app .inbox-filter-panel{max-height:none;overflow:visible}
 #app .inbox-filter-panel #inbox-business-filters{max-height:none;overflow:visible;border-bottom:0}
 #app .inbox-country-option{min-height:36px;font-size:12px}
 #app #inbox-country-search,#app #inbox-wa-search{min-height:38px;font-size:16px}
 #app .inbox-selection-popup{padding:10px;border-radius:10px}
 #app .inbox-selection-header button{width:36px;height:36px}
 #app .inbox-filter-choice{min-height:45px}
 #app .inbox-country-actions button{min-height:36px}
 #app .inbox-pagination{order:6;display:flex;flex-direction:row;min-height:30px;padding:3px 10px}
}

@media(max-width:680px){
 #app .inbox-avatar-column{flex-basis:42px;width:42px;gap:2px}
 #app .inbox-ai-rounds{font-size:9px;line-height:12px}
}

@media(max-width:680px){
 #app .inbox-compose-options{gap:4px}
 #app .inbox-compose-shortcuts{gap:4px}
 #app .inbox-compose-tool{min-height:30px;padding:4px 6px;font-size:11px}
}
@media(max-width:440px){
 #app .inbox-compose-options #inbox-language-row{flex:0 1 94px}
 #app .inbox-compose-options #inbox-language-row label{display:none}
 #app .inbox-compose-options #inbox-language-row select{width:100%;min-width:70px;max-width:94px;padding-left:0}
}