/* Wasl Chat v3.6.0 — system-wide mobile-first compatibility layer */
:root{--mobile-page-gap:12px;--mobile-control-height:44px;--app-height:100dvh}
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
input,select,textarea,button{min-width:0}
pre,code,.copy-field code,.audit-details,.message-preview,.lead-created{overflow-wrap:anywhere;word-break:break-word}
.mobile-scroll-region{-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}

@media(max-width:1024px){
  .content,.developer-shell,.pricing-shell,.lead-shell{min-width:0}
  .stats-grid,.developer-stats,.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-column,.compose-grid,.settings-grid,.contacts-layout,.templates-workspace,.settings-layout-v330,.developer-dashboard-grid,.developer-report-grid,.developer-company-grid,.developer-grid.two-columns{grid-template-columns:1fr!important}
  .settings-side-stack .webhook-card,.template-preview-panel,.user-editor-panel{position:static!important}
  .developer-support-main-grid{grid-template-columns:1fr!important}
  .developer-support-control-column{border-top:1px solid var(--line)}
  .developer-support-thread-column{border-inline-end:0!important}
}

@media(max-width:820px){
  body{min-height:var(--app-height);background:#f4f8f7}
  body.mobile-nav-open{overflow:hidden;touch-action:none}
  a,button,[role="button"],summary{touch-action:manipulation}
  input,select,textarea{font-size:16px!important}

  /* Main company workspace */
  .sidebar{width:min(88vw,330px);height:var(--app-height);overflow-y:auto;padding:18px 14px max(18px,env(safe-area-inset-bottom));overscroll-behavior:contain}
  .sidebar nav{margin-top:18px;gap:4px}
  .nav-link{min-height:44px;padding:10px 12px;border-radius:12px;font-size:12px}
  .tenant-plan-chip{margin-top:13px}
  .page-shell{min-width:0;width:100%}
  .topbar{height:64px;min-height:64px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));gap:8px}
  .topbar>div:nth-child(2){min-width:0;flex:1}
  .topbar h1{max-width:100%;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar p{display:none}
  .menu-button,.icon-button,.top-actions .avatar{width:40px;height:40px;min-width:40px;border-radius:12px}
  .top-actions{gap:5px;flex:0 0 auto}
  .content{width:100%;padding:10px 8px calc(24px + env(safe-area-inset-bottom));min-width:0}
  .content>*{min-width:0}
  .panel,.developer-panel,.data-page-panel{min-width:0;border-radius:16px;padding:13px;margin-bottom:12px}
  .panel-head{align-items:flex-start;flex-wrap:wrap;margin-bottom:13px}
  .panel-head>*,.page-intro>*{min-width:0}
  .panel-head h3{font-size:15px}
  .panel-head p{font-size:9px;line-height:1.65}

  .page-intro,.compact-intro,.hero-card,.compose-hero{display:block!important;padding:16px!important;border-radius:18px!important;margin-bottom:12px!important}
  .page-intro h2,.compact-intro h2,.hero-card h2,.compose-hero h2{font-size:20px!important;line-height:1.45;margin:5px 0!important}
  .page-intro p,.compact-intro p,.hero-card p,.compose-hero p{font-size:10px!important;line-height:1.75;margin:0!important}
  .page-intro-actions,.hero-actions,.compose-hero-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%;margin-top:13px}
  .page-intro-actions>* ,.hero-actions>* ,.compose-hero-actions>*{width:100%;min-height:42px;margin:0!important;white-space:normal;text-align:center}
  .page-intro-actions>*:only-child,.hero-actions>*:only-child,.compose-hero-actions>*:only-child{grid-column:1/-1}

  .primary-button,.secondary-button,.ghost-button,.ghost-pale,.danger-button,.text-button{min-height:42px;max-width:100%}
  .button-row,.inline-form,.table-toolbar{width:100%;flex-wrap:wrap;align-items:stretch}
  .button-row>* ,.inline-form>* ,.table-toolbar>*{flex:1 1 145px;min-height:42px}
  .form-row,.developer-form-grid,.lead-form-grid,.filter-grid,.compact-filter-grid,.two-inputs,.recipient-format-cards,.permission-grid,.permissions-grid,.contacts-create-grid,.support-ticket-form-grid{grid-template-columns:1fr!important}
  .span-2,.lead-form-grid .span-2,.developer-form-grid .span-2,.support-ticket-form-grid .span-2{grid-column:auto!important}
  .filter-drawer,.workspace-drawer{border-radius:14px;margin-bottom:10px}
  .filter-drawer>summary,.workspace-drawer>summary{min-height:46px;padding:11px 12px}
  .filter-drawer-body,.drawer-content{padding:11px}
  .filter-grid>*{grid-column:auto!important;width:100%}

  .stats-grid,.developer-stats,.dashboard-stats,.developer-stats-six,.mini-stats,.customer-stats,.support-ticket-overview,.developer-support-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .stat-card,.developer-stats article{padding:13px;border-radius:15px}
  .stat-card h3,.developer-stats strong{font-size:20px}

  .preview-table-wrap,.developer-table-wrap{width:100%;max-width:100%;overflow:visible;border:0;background:transparent;margin-top:10px}
  .mobile-card-table{display:block!important;width:100%!important;min-width:0!important;border-collapse:separate!important}
  .mobile-card-table thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .mobile-card-table tbody{display:grid!important;gap:10px!important;width:100%!important}
  .mobile-card-table tbody tr{display:grid!important;width:100%!important;border:1px solid var(--line)!important;border-radius:15px!important;background:#fff!important;box-shadow:0 7px 20px rgba(15,54,44,.045)!important;overflow:hidden!important}
  .mobile-card-table tbody td{display:grid!important;grid-template-columns:minmax(88px,.72fr) minmax(0,1.28fr)!important;align-items:start!important;gap:10px!important;width:100%!important;max-width:100%!important;min-height:42px!important;padding:10px 12px!important;border:0!important;border-bottom:1px solid #edf2f0!important;text-align:start!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .mobile-card-table tbody td:last-child{border-bottom:0!important}
  .mobile-card-table tbody td::before{content:attr(data-label);color:#71827e;font-size:9px;font-weight:800;line-height:1.6}
  .mobile-card-table tbody td.mobile-full-cell{display:block!important;text-align:center!important;padding:22px 12px!important}
  .mobile-card-table tbody td.mobile-full-cell::before{display:none}
  .mobile-card-table tbody td .button-row,.mobile-card-table tbody td form{justify-content:flex-start}
  .mobile-card-table tbody td button,.mobile-card-table tbody td a{max-width:100%}
  .mobile-card-table .empty-cell{display:block!important;padding:28px 12px!important}
  .pagination-bar,.developer-pagination{display:flex;align-items:stretch!important;flex-direction:column!important;gap:8px;width:100%}
  .pagination-bar>* ,.developer-pagination>*{width:100%;text-align:center;justify-content:center}

  .modal{padding:8px;align-items:flex-end}
  .modal-card,.support-dialog-card{width:100%!important;max-width:none!important;max-height:calc(var(--app-height) - 16px)!important;border-radius:20px 20px 0 0!important;padding:17px!important;overflow:auto}
  .modal-card.small-modal{width:100%!important}
  .profile-modal-card input{font-size:16px}

  /* Compose, customers, templates and settings */
  .quick-send-layout,.campaign-workspace,.direct-send-card,.compose-dashboard,.compose-main-grid{grid-template-columns:1fr!important}
  .compose-section,.quick-send-form-card,.recipient-builder,.campaign-message-builder{padding:13px!important;border-radius:15px!important;min-width:0}
  .compose-steps{overflow-x:auto;justify-content:flex-start;padding-bottom:5px;scrollbar-width:none}
  .compose-step{min-width:95px}
  .import-tabs{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .import-tabs::-webkit-scrollbar,.compose-steps::-webkit-scrollbar{display:none}
  .contact-picker{grid-template-columns:1fr;max-height:300px}
  .recipient-table{max-height:none}
  .template-button-row,.module-checkbox-grid{grid-template-columns:1fr!important}
  .template-preview-panel{margin-top:10px}
  .settings-section{padding:14px}
  .settings-section-head{align-items:flex-start;margin-bottom:13px}
  .settings-sticky-actions{position:static;padding:12px;display:grid;grid-template-columns:1fr}
  .settings-sticky-actions>*{width:100%;margin:0!important}
  .copy-field{display:flex;flex-direction:column;align-items:stretch}
  .copy-field code{width:100%;max-width:100%;white-space:normal}

  /* Notifications */
  .notification-panel{top:66px;left:6px;right:6px;width:auto;max-height:calc(var(--app-height) - 72px);border-radius:15px}
  .notification-permission,.notification-panel-head{align-items:flex-start;flex-direction:column}
  .notification-permission-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .notification-list{max-height:calc(var(--app-height) - 350px)}

  /* Public login, pricing and request pages */
  .public-header{height:64px;padding:8px 10px;gap:8px}
  .public-brand{min-width:0;gap:8px}
  .public-brand img{width:40px;height:40px;flex-basis:40px}
  .public-brand span{min-width:0}
  .public-brand strong{font-size:14px;white-space:nowrap}
  .public-brand small{max-width:48vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .public-header>.secondary-button{min-height:40px;padding:8px 11px;font-size:10px;white-space:nowrap}
  .pricing-shell{width:100%;padding:28px 10px 45px}
  .pricing-hero{margin-bottom:20px;padding-inline:4px}
  .pricing-hero h1{font-size:clamp(25px,8vw,34px)!important;line-height:1.4;margin:7px 0}
  .pricing-hero p{font-size:11px;line-height:1.8}
  .pricing-grid{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:12px;width:100%}
  .pricing-card{width:100%;min-width:0;padding:19px 16px;border-radius:20px;transform:none!important}
  .pricing-card-head{min-height:0}
  .pricing-card h2{font-size:21px}
  .pricing-card>p,.pricing-card-head p{min-height:0;font-size:10px;line-height:1.75}
  .price{align-items:baseline;flex-wrap:wrap;gap:5px;margin-top:11px}
  .price strong{font-size:32px}
  .year-price{line-height:1.65}
  .pricing-card ul{margin:15px 0;gap:8px}
  .pricing-card li{font-size:10px;line-height:1.7}
  .pricing-actions{display:grid;grid-template-columns:1fr;gap:7px}
  .pricing-actions>*{width:100%;min-height:43px;justify-content:center;text-align:center}
  .popular-badge{top:-10px;right:15px}
  .meta-verification-service{display:grid;grid-template-columns:1fr!important;gap:13px;margin:16px 0 25px;padding:18px 15px;border-radius:20px;text-align:start}
  .verification-icon{width:45px;height:45px;border-radius:14px;font-size:21px}
  .meta-verification-service h2{font-size:19px;line-height:1.5}
  .meta-verification-service p{font-size:10px}
  .service-tags{gap:5px}
  .service-tags span{font-size:8px}
  .meta-verification-service .primary-button{width:100%;min-height:45px}
  .meta-verification-service .service-price{align-items:flex-start;flex-direction:column;gap:2px}

  .login-page{display:block!important;min-height:var(--app-height)}
  .login-visual{display:none!important}
  .login-panel{min-height:var(--app-height);padding:12px;display:grid;place-items:center}
  .login-card,.tenant-login-card{width:100%;max-width:480px;padding:22px 17px;border-radius:20px}
  .login-card label{margin-bottom:12px}
  .login-card-links{gap:8px;flex-wrap:wrap}
  .lead-page{min-height:var(--app-height)}
  .lead-shell{width:100%;padding:22px 10px 40px;grid-template-columns:1fr!important}
  .lead-intro{padding:8px 4px}
  .lead-intro h1{font-size:27px!important;line-height:1.45}
  .lead-intro p{font-size:10px}
  .lead-form-card{padding:18px 14px;border-radius:19px}
  .simple-status-page,.developer-login-page{min-height:var(--app-height);padding:10px}
  .simple-status-page section,.developer-login-card{padding:22px 15px;border-radius:20px}

  /* Developer control center */
  .developer-page{min-height:var(--app-height)}
  .developer-header{display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;min-height:64px;padding:8px 10px;gap:7px;position:sticky;top:0}
  .developer-header>.public-brand{grid-column:1}
  .developer-header>form{grid-column:2;margin:0}
  .developer-header>form .ghost-button{min-height:40px;padding:8px 10px;font-size:9px;color:#315b4f;border-color:var(--line);background:#f7faf9}
  .developer-header nav{grid-column:1/-1;order:3;width:calc(100% + 20px);margin-inline:-10px;padding:0 10px 5px;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .developer-header nav::-webkit-scrollbar{display:none}
  .developer-header nav a{min-height:40px;display:inline-flex;align-items:center;padding:8px 10px;border:1px solid #e7eeec;background:#fff;font-size:9px;flex:0 0 auto}
  .developer-header nav a.active{border-color:#a8ddcd}
  .developer-shell{width:100%;padding:16px 8px 40px;min-width:0}
  .developer-title{display:block;padding:0!important;margin-bottom:13px}
  .developer-title h1{font-size:23px!important;line-height:1.45}
  .developer-title p{font-size:10px;line-height:1.7}
  .developer-title>.button-row,.developer-title>a,.developer-title>form{margin-top:10px;width:100%}
  .developer-title>a,.developer-title>form button{width:100%}
  .developer-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .developer-stats article{min-width:0}
  .developer-form-grid,.developer-filter-bar,.lead-admin-grid,.lead-meta-grid,.lead-update-form,.plan-admin-grid,.developer-user-fields,.module-checkbox-grid,.developer-report-grid,.funnel-grid{grid-template-columns:1fr!important}
  .developer-filter-bar{padding:10px;gap:8px}
  .developer-filter-bar>*{width:100%;grid-column:auto!important}
  .developer-user-card{display:block}
  .developer-user-actions{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .developer-user-actions>*{width:100%}
  .lead-admin-card,.plan-admin-card{padding:14px}
  .lead-card-head,.developer-ticket-top{align-items:flex-start;flex-wrap:wrap}
  .developer-support-hero{display:block;padding:15px;border-radius:18px}
  .developer-support-head-actions{display:flex;flex-wrap:wrap}
  .developer-support-head-actions>*{flex:1 1 120px}
  .developer-support-workspace{border-radius:15px;min-height:0}
  .developer-support-list,.developer-support-detail{min-width:0}
  .developer-support-filters{grid-template-columns:1fr!important}
  .developer-support-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .developer-support-main-grid{display:block!important}
  .developer-support-control-column{padding:9px}
  .developer-thread{min-height:340px;max-height:none}
  .developer-support-stats{display:flex!important;overflow-x:auto;gap:7px;padding-bottom:3px}
  .developer-support-stat{min-width:130px;flex:0 0 130px}
}

@media(max-width:520px){
  :root{--mobile-page-gap:8px}
  .content{padding-inline:6px}
  .panel,.developer-panel,.data-page-panel{padding:11px;border-radius:14px}
  .page-intro-actions,.hero-actions,.compose-hero-actions{grid-template-columns:1fr}
  .stats-grid,.developer-stats,.dashboard-stats,.developer-stats-six{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat-card,.developer-stats article{padding:11px}
  .stat-card h3,.developer-stats strong{font-size:18px}
  .mobile-card-table tbody td{grid-template-columns:minmax(78px,.65fr) minmax(0,1.35fr)!important;padding:9px 10px!important;font-size:10px!important}
  .mobile-card-table tbody td::before{font-size:8px}
  .public-header .public-brand small{display:none}
  .public-header>.secondary-button{padding-inline:9px}
  .pricing-shell{padding-inline:7px}
  .pricing-card{padding:17px 13px}
  .login-panel{padding:8px}
  .login-card,.tenant-login-card{padding:20px 14px}
  .developer-shell{padding-inline:6px}
  .developer-panel{padding:11px}
  .developer-stats article small{font-size:8px}
  .notification-permission-actions{grid-template-columns:1fr}
  .notification-tabs{overflow-x:auto}
}

@media(max-width:360px){
  .stats-grid,.developer-stats,.dashboard-stats,.developer-stats-six,.mini-stats{grid-template-columns:1fr!important}
  .topbar h1{font-size:14px}
  .public-brand strong{font-size:12px}
  .pricing-hero h1{font-size:24px!important}
  .developer-header nav a{font-size:8px;padding-inline:8px}
  .mobile-card-table tbody td{grid-template-columns:1fr!important;gap:3px!important}
}

@media(max-width:900px) and (orientation:landscape){
  .sidebar{height:100dvh}
  .modal-card,.support-dialog-card{max-height:calc(100dvh - 8px)!important}
  .login-panel{min-height:100dvh;padding-block:8px}
  .developer-header nav{padding-bottom:3px}
}