/* Lugarcito chat workspace: clear hierarchy, familiar conversation layout. */
.layout.chat-mode{
  --chat-ink:#203830;
  --chat-muted:#63756b;
  --chat-line:#e0e7e0;
  --chat-accent:#176c50;
  --chat-accent-hover:#10583f;
  --chat-pale:#e7f3e9;
  font-family:'DM Sans',sans-serif;
  color:var(--chat-ink);
}
.layout.chat-mode .sidebar{width:208px;min-width:208px;background:#172f29}
.layout.chat-mode .nav-item{font-size:13px;border-radius:9px;min-height:38px}
.layout.chat-mode .nav-item.active{background:#2b5545;box-shadow:inset 3px 0 #94d7a8}
.layout.chat-mode .sidebar .nav-section-label{color:#8ba79a}
.chat-workspace,.chat-workspace-header{background:#fff}
.chat-workspace-top{height:46px;padding:0 23px}
.chat-workspace-path{font-size:12px;font-weight:500;color:#6d8074;gap:10px}
.chat-workspace-path strong{font-weight:700;color:#294e3a}
.chat-workspace-demo{font-size:10px;letter-spacing:.12px;font-weight:700;background:#eff5ef;color:#52745d;padding:6px 10px}
.chat-workspace-user{width:31px;height:31px;background:#e2eee4;color:#315d42}
.chat-workspace-tabs{height:49px;gap:23px;padding:0 24px}
.chat-workspace-tabs button{font:700 13px 'DM Sans',sans-serif;padding:0 2px;color:#6a7c71}
.chat-workspace-tabs button .icon{display:none}
.chat-workspace-tabs button:hover,.chat-workspace-tabs button.active{color:#174e39}
.chat-workspace-tabs button.active:after{height:3px;left:0;right:0;background:#1b835e;border-radius:3px 3px 0 0}

/* Inbox: the list, conversation and optional contact panel are one canvas. */
.wa-inbox-layout{grid-template-columns:minmax(316px,348px) minmax(380px,1fr) 0px}
.wa-inbox-layout.context-open{grid-template-columns:minmax(316px,348px) minmax(380px,1fr) minmax(300px,322px)}
.wa-list-pane{border-right:1px solid #dbe4dc}
.wa-list-header{padding:19px 17px 10px}
.wa-list-top{margin:0 0 16px}
.wa-list-top h1{font:750 22px/1.15 'Plus Jakarta Sans',sans-serif;letter-spacing:-.8px;color:#1c3328}
.wa-list-top h1 span{width:23px;height:23px;margin-left:5px;vertical-align:3px;font:800 11px 'DM Sans',sans-serif;background:#e3f2e7;color:#166a4d}
.wa-new-chat{height:32px;width:auto;padding:0 10px;display:inline-flex;gap:5px;background:#1d7656;color:#fff;border-radius:7px;font-size:11px;font-weight:700}
.wa-new-chat:hover{background:#135c43}
.wa-new-chat .icon{width:15px;height:15px}
.wa-search{height:40px;background:#f2f5f2;border:1px solid #edf1ed;border-radius:8px;padding:0 12px;color:#677d70}
.wa-search:focus-within{border-color:#75a98a;box-shadow:0 0 0 3px #8dc9a93b}
.wa-search input{font:500 13px 'DM Sans',sans-serif;color:#20382b}
.wa-search input::placeholder{color:#788b7e}
.wa-filters{gap:5px;margin:12px 0 10px}
.wa-filters button{padding:7px 10px;font:700 11px 'DM Sans',sans-serif;color:#586b60;background:#f2f5f2}
.wa-filters button.active{background:#dff0e4;color:#155a3f}
.wa-channel-row{padding-top:10px;color:#687b6d;font-size:11px}
.wa-channel-row select{font:700 11px 'DM Sans',sans-serif;color:#315f47}
.wa-chat-row{min-height:92px;padding:16px 17px;gap:13px;border-bottom-color:#eef1ed}
.wa-chat-row.active{background:#edf6ef}
.wa-chat-row.active:before{width:3px;background:#19805b}
.wa-avatar-wrap,.wa-avatar-wrap .avatar{width:48px;height:48px}
.wa-avatar-wrap .avatar{font-size:14px}
.wa-chat-summary{padding-top:1px}
.wa-chat-main strong{font-size:14px;font-weight:750;color:#243a2b}
.wa-chat-main time{font-size:11px;color:#687d6e;font-variant-numeric:tabular-nums}
.wa-chat-preview{font-size:12.5px;color:#5e7064;margin-top:6px;padding-right:17px}
.wa-chat-bottom{margin-top:7px;font-size:10.5px;color:#697b70}
.wa-ticket-status{color:#6a7c70}
.wa-ticket-status.pending{color:#176f50}
.wa-unread{width:20px;height:20px;right:16px;bottom:17px;background:#1b875d;font-size:11px}
.wa-list-empty{font-size:13px;color:#607469}

.wa-thread{background:#f3f0e9}
.wa-thread-header{height:66px;min-height:66px;padding:0 19px;background:#f7f8f6;border-bottom:1px solid #dfe5dc;gap:11px}
.wa-thread-header .wa-avatar-wrap,.wa-thread-header .wa-avatar-wrap .avatar{width:40px;height:40px;font-size:12px}
.wa-thread-identity strong{font-size:14px;font-weight:750;color:#20392c}
.wa-thread-identity small{font-size:11px;color:#5e7364;margin-top:3px}
.wa-header-button,.wa-back{width:34px;height:34px;color:#4e6b59}
.wa-info-button{height:34px;width:auto;padding:0 11px;font-size:11px;color:#2a6043;border-color:#d4e1d5}
.wa-info-button .icon{width:16px;height:16px}
.wa-resolve{height:34px;padding:0 11px;font-size:11px;color:#2b6248;border-color:#d4e1d5}
.wa-resolve .icon{width:15px;height:15px}
.wa-messages{background-color:#f3f0e9;background-size:330px 330px;padding:24px clamp(24px,4.1vw,68px) 28px}
.wa-date{margin-bottom:27px;padding:7px 13px;background:#fffdf8ee;font-size:10px;color:#64756b}
.wa-message-row{margin-bottom:13px}
.wa-bubble{max-width:min(74%,560px);padding:11px 13px 9px;border-radius:9px;color:#273a2c;font:500 14px/1.5 'DM Sans',sans-serif;box-shadow:0 1px 2px #3a4b3517}
.wa-message-row.outbound .wa-bubble{background:#d9f5d8}
.wa-message-row.outbound .wa-bubble:after{border-top-color:#d9f5d8}
.wa-message-meta{font-size:10px;color:#687b6f;margin-top:6px;font-variant-numeric:tabular-nums}
.wa-message-row.outbound .wa-message-meta{color:#477453}
.wa-thread-signal{margin-top:23px;padding:7px 11px;background:#fffdf8d9;color:#5c7063;font-size:11px}
.wa-composer{background:#f8f9f7;padding:11px 15px 9px;border-top-color:#dfe5dc}
.wa-composer-field{min-height:47px;border:1px solid #e0e7df;border-radius:9px;padding:5px 6px 5px 13px}
.wa-composer-field:focus-within{border-color:#75a98a;box-shadow:0 0 0 3px #8dc9a93b}
.wa-composer textarea{font:500 14px/1.45 'DM Sans',sans-serif;min-height:32px;padding:6px 2px;color:#273a2e}
.wa-composer textarea::placeholder{color:#758678}
.wa-send{width:37px;height:37px;background:#197b58}
.wa-send:hover{background:#105a40}
.wa-composer>small{font-size:10px;color:#66796d;margin-top:7px}
.wa-empty-thread h2{font-size:18px}
.wa-empty-thread p{font-size:13px}

/* Contact details are revealed on demand. */
.wa-context-header{height:66px;min-height:66px;background:#f7f8f6;padding:0 18px}
.wa-context-header strong{font-size:13px;color:#274533}
.wa-context-close{width:32px;height:32px;color:#577564}
.wa-profile{padding:17px 17px 14px}
.wa-profile .wa-avatar-wrap,.wa-profile .wa-avatar-wrap .avatar{width:56px;height:56px}
.wa-profile .wa-avatar-wrap{margin-bottom:9px}
.wa-profile .wa-avatar-wrap .avatar{font-size:17px}
.wa-profile strong{font-size:15px}
.wa-profile>span:not(.wa-avatar-wrap){font-size:11px;color:#5e7264}
.wa-profile-state{font-size:10px;color:#1d684b}
.wa-context-section{padding:15px 18px 14px}
.wa-context-section h3{font-size:10px;color:#496b56;letter-spacing:.65px;margin-bottom:9px}
.wa-info-row,.wa-info-row strong{font-size:12px}
.wa-info-row{color:#687b6c;min-height:26px}
.wa-info-row strong{color:#274936}
.wa-info-row select{font-size:11px;color:#225b40}
.wa-order{padding:10px 11px}
.wa-order strong{font-size:12px}
.wa-order small{font-size:10px;color:#677969}
.wa-order b{font-size:12px}
.wa-no-order{font-size:12px;line-height:1.45;color:#647668;margin:0}
.wa-tags span,.wa-link-button,.wa-secondary-button{font-size:11px}
.wa-context-description{font-size:11px;color:#617566}
.wa-ai-state{font-size:10px}
.wa-note-section textarea{font-size:12px;min-height:78px}
.wa-note-section small{font-size:10px;color:#6c7d6e}

/* Settings, agents and team use the same type scale and surface language. */
.chat-workspace-content:not(.wa-inbox-page){background:#f7f9f7;padding:25px 28px 32px}
.chat-workspace-heading{margin-bottom:22px;align-items:flex-start}
.chat-workspace-heading h1{font:750 22px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:-.7px;color:#20372b;text-wrap:balance}
.chat-workspace-heading p{font-size:13px;line-height:1.45;color:#607468;margin-top:7px}
.chat-workspace-heading .button{font-size:12px;padding:10px 13px}
.chat-page-demo{font-size:11px;background:#edf4ed;color:#496e56}
.chat-config-grid,.chat-team-grid{gap:16px}
.chat-config-card,.chat-agent-list,.chat-agent-editor,.chat-agent-capabilities{border:1px solid #dce5dc;border-radius:10px;box-shadow:0 1px 2px #1e412710;background:#fff}
.chat-config-card{padding:23px 24px}
.chat-config-card-head{gap:13px;margin-bottom:15px}
.chat-config-card-head h2,.chat-capability-head h3{font:750 16px 'Plus Jakarta Sans',sans-serif;color:#243a2d}
.chat-config-card-head p,.chat-capability-head p{font-size:12px;line-height:1.45;color:#647668;margin-top:5px}
.chat-config-card-head .op-icon{width:35px;height:35px;border-radius:8px;background:#e8f2e9;color:#3f7653}
.chat-config-card-head .op-icon .icon{width:17px;height:17px}
.chat-setting-row,.chat-setting-select{min-height:65px;padding:15px 0}
.chat-setting-row strong,.chat-setting-select strong,.chat-capability-row strong{font-size:13px;font-weight:700;color:#2a4331}
.chat-setting-row small,.chat-setting-select small,.chat-capability-row small{font-size:11px;line-height:1.45;color:#65786a}
.chat-setting-select select{font-size:12px;color:#315b3d;min-height:35px}
.chat-config-note,.chat-capability-note{font-size:11px;line-height:1.45;color:#607468;background:#f2f6f2}
.chat-config-highlight{background:#214738;border-color:#214738;color:#fff}
.chat-config-highlight .chat-config-card-head h2{color:#fff}
.chat-config-highlight .chat-config-card-head p,.chat-config-highlight-body span{color:#d0e1d4}
.chat-config-highlight .op-icon{background:#35644c;color:#e1f2dc}
.chat-config-highlight-body strong{font:750 24px 'Plus Jakarta Sans',sans-serif;color:#fff}
.chat-config-highlight-body span{font-size:12px}
.chat-config-highlight .button.lime{background:#cdecae;border-color:#cdecae;color:#173625;font-size:12px}
.chat-config-highlight .button.lime:hover{background:#dff3c8}

.chat-agents-layout{grid-template-columns:minmax(220px,245px) minmax(430px,1fr) minmax(245px,270px);gap:16px;max-width:1360px}
.chat-agent-list-top{font-size:12px;padding:19px 17px 15px;color:#294436}
.chat-agent-item{padding:17px 15px;gap:11px}
.chat-agent-item.active{background:#ebf4ed;box-shadow:inset 3px 0 #317e56}
.chat-agent-item strong{font-size:12.5px;color:#243c2f}
.chat-agent-item small{font-size:11px;line-height:1.45;color:#647769}
.chat-agent-list-foot{font-size:11px;color:#67796b}
.chat-agent-editor-head{padding:23px 24px 19px}
.chat-agent-kicker{font-size:10px;letter-spacing:.7px;color:#4c7c5a}
.chat-agent-editor-head h2{font:750 20px 'Plus Jakarta Sans',sans-serif;color:#20382b}
.chat-agent-editor-head p{font-size:12px;color:#65786a}
.chat-agent-form{padding:21px 24px 24px}
.chat-field{margin-bottom:17px}
.chat-field>span{font-size:12px;color:#375b43}
.chat-field input,.chat-field select,.chat-field textarea{font:500 13px/1.5 'DM Sans',sans-serif;border-color:#d6e1d7;color:#243b2c;padding:10px 11px}
.chat-field textarea{min-height:139px}
.chat-field small{font-size:11px;color:#667969}
.chat-capability-head h3{font-size:15px}
.chat-capability-row{padding:13px 4px}
.chat-capability-row strong{font-size:12px}
.chat-capability-row small{font-size:11px}
.chat-agent-form-foot .button{font-size:12px}
.chat-team-member{padding:16px 0}
.chat-team-member strong{font-size:13px}
.chat-team-member small{font-size:11px;color:#65786a}
.chat-label-list span{font-size:11px;background:#e8f3e9;color:#365e42}
.chat-add-label input{font-size:13px;min-height:39px}

.chat-workspace button,.chat-workspace input,.chat-workspace textarea,.chat-workspace select{touch-action:manipulation}
.chat-workspace button{cursor:pointer}
.chat-workspace :is(button,input,textarea,select):focus-visible,.layout.chat-mode .nav-item:focus-visible{outline:2px solid #167b57;outline-offset:2px}
.chat-workspace :is(input,textarea,select){accent-color:#176c50}
body:has(.layout.chat-mode) .modal{border-radius:14px}
body:has(.layout.chat-mode) .modal-head h2{font-size:18px;color:#20382b}
body:has(.layout.chat-mode) .modal-body p{font-size:13px;color:#5c7063}
body:has(.layout.chat-mode) .field>span{font-size:11px;color:#385d46}
body:has(.layout.chat-mode) .field input,body:has(.layout.chat-mode) .field select{font:500 13px 'DM Sans',sans-serif;min-height:41px}
body:has(.layout.chat-mode) .modal-foot .button{font-size:12px}

@media(max-width:1180px){
  .wa-inbox-layout,.wa-inbox-layout.context-open{grid-template-columns:minmax(295px,325px) minmax(340px,1fr)}
  .chat-agents-layout{grid-template-columns:235px minmax(380px,1fr)}
  .chat-agent-capabilities{grid-column:2}
}
@media(max-width:900px){
  .layout.chat-mode .sidebar{width:208px;min-width:208px}
  .wa-inbox-layout,.wa-inbox-layout.context-open{grid-template-columns:minmax(280px,315px) minmax(300px,1fr)}
  .chat-workspace-content:not(.wa-inbox-page){padding:22px 20px 28px}
  .chat-config-grid,.chat-team-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .chat-workspace-top{height:46px;padding:0 11px}
  .chat-workspace-path{font-size:11px}
  .chat-workspace-demo{font-size:8px;padding:5px 6px}
  .chat-workspace-tabs{height:44px;gap:14px;padding:0 12px}
  .chat-workspace-tabs button{font-size:12px}
  .wa-inbox-layout,.wa-inbox-layout.context-open{display:block}
  .wa-list-header{padding:16px 14px 10px}
  .wa-list-top h1{font-size:21px}
  .wa-chat-row{min-height:88px;padding:15px 14px}
  .wa-chat-main strong{font-size:15px}
  .wa-chat-preview{font-size:13px}
  .wa-chat-bottom{font-size:11px}
  .wa-search input{font-size:14px}
  .wa-thread-header{height:60px;min-height:60px;padding:0 9px;gap:7px}
  .wa-thread-header .wa-back,.wa-thread-header .wa-header-button,.wa-thread-header .wa-resolve{min-width:38px;width:38px;height:38px;justify-content:center;padding:0}
  .wa-thread-identity strong{font-size:13px}
  .wa-thread-identity small{font-size:10px}
  .wa-messages{padding:17px 18px 24px}
  .wa-bubble{max-width:87%;font-size:14px}
  .wa-composer{padding:8px 9px 7px}
  .wa-composer textarea{font-size:16px}
  .chat-workspace-content:not(.wa-inbox-page){padding:18px 13px 25px}
  .chat-workspace-heading h1{font-size:20px}
  .chat-workspace-heading p{font-size:12px}
  .chat-config-card{padding:18px}
  .chat-agents-layout{display:block}
  .chat-agent-list,.chat-agent-editor{margin-bottom:13px}
  .chat-agent-list{display:flex;overflow:auto}
  .chat-agent-item{width:190px;flex:none;border-top:0;border-right:1px solid #eef2ed}
  .chat-agent-list-top,.chat-agent-list-foot{display:none}
  .chat-agent-two{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .wa-inbox-layout,.wa-context.context-pane,.chat-switch,.chat-switch:after{transition:none!important}
}