/*
 * AfghanZone Customer + Investor Messaging — WhatsApp-inspired Mobile UI V1.0.0
 * Presentation only. Mobile <= 760px.
 * Protected semantics stay in existing M2/M3/M6/M7 JavaScript and MySQL APIs:
 * sent/delivered/read ticks, timestamps/date groups, online/last-seen/typing,
 * attachments, notifications, permissions, thread workflow and message storage.
 */
@media screen and (max-width: 760px) {
  :root{
    --azpm-ink:#101a2f;
    --azpm-orange:#f97316;
    --azpm-orange-soft:#fff3e8;
    --azpm-bg:#f2f4f7;
    --azpm-line:#e6e9ee;
    --azpm-muted:#748195;
    --azpm-white:#fff;
  }

  /* ---------------- Customer messaging center (M2) ---------------- */
  #customer-product-message-view.customer-message-view{
    margin:0!important;
    padding:0!important;
  }
  #customer-product-message-view .azm-customer-hero{
    min-height:62px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin:0 0 8px!important;
    padding:8px 3px 10px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  #customer-product-message-view .azm-customer-hero::before,
  #customer-product-message-view .azm-customer-hero::after{display:none!important}
  #customer-product-message-view .azm-customer-profile{gap:10px!important;align-items:center!important;min-width:0!important}
  #customer-product-message-view .azm-customer-photo{
    width:46px!important;height:46px!important;flex-basis:46px!important;
    padding:2px!important;border-radius:50%!important;
    background:linear-gradient(135deg,var(--azpm-orange),#ffad55)!important;
    box-shadow:0 6px 16px rgba(249,115,22,.18)!important;
  }
  #customer-product-message-view .azm-customer-photo img,
  #customer-product-message-view .azm-customer-photo span{border-radius:50%!important;border-width:2px!important;font-size:18px!important}
  #customer-product-message-view .azm-customer-kicker,
  #customer-product-message-view .azm-customer-profile p,
  #customer-product-message-view .m21-one-center-copy{display:none!important}
  #customer-product-message-view .azm-customer-profile h2{
    margin:0!important;color:var(--azpm-ink)!important;
    font-size:25px!important;line-height:1.08!important;font-weight:1000!important;
  }
  #customer-product-message-view .azm-customer-hero-actions{width:auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:7px!important}
  #customer-product-message-view .azm-customer-metrics{display:none!important}
  #customer-product-message-view #m2-new-thread{
    width:43px!important;min-width:43px!important;height:43px!important;min-height:43px!important;
    padding:0!important;border-radius:50%!important;font-size:0!important;
    background:var(--azpm-orange)!important;box-shadow:0 7px 16px rgba(249,115,22,.2)!important;
  }
  #customer-product-message-view #m2-new-thread i{font-size:16px!important;margin:0!important}
  #customer-product-message-view #m2-new-thread span{display:none!important}
  #customer-product-message-view .m2-preview-notice,
  #customer-product-message-view .m2-legacy-notice{margin:0 0 7px!important;padding:7px 9px!important;border-radius:10px!important;font-size:8px!important}

  #customer-message-app.m2-customer-app{
    width:100%!important;
    height:calc(100dvh - 165px)!important;
    min-height:500px!important;
    max-height:none!important;
    border:1px solid var(--azpm-line)!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:0 8px 25px rgba(15,23,42,.055)!important;
    overflow:hidden!important;
  }
  #customer-message-app .azm-sidebar{background:#fff!important;border:0!important}
  #customer-message-app .azm-side-head{
    padding:10px 10px 8px!important;
    border-bottom:1px solid #eef1f4!important;
    background:rgba(255,255,255,.98)!important;
  }
  #customer-message-app .azm-side-title{margin:0 0 8px!important;align-items:center!important}
  #customer-message-app .azm-side-title>div>small{display:none!important}
  #customer-message-app .azm-side-title h2{margin:0!important;font-size:19px!important;font-weight:1000!important;color:var(--azpm-ink)!important}
  #customer-message-app .azm-side-title h2 i{display:none!important}
  #customer-message-app .azm-total-badge{
    min-width:25px!important;height:25px!important;padding:0 7px!important;
    background:var(--azpm-ink)!important;font-size:9px!important;
  }
  #customer-message-app .azm-search-wrap>i{inset-inline-start:14px!important;font-size:14px!important;color:#6b7280!important}
  #customer-message-app .azm-search{
    height:46px!important;border:0!important;border-radius:14px!important;
    background:#f1f3f5!important;padding-inline-start:42px!important;padding-inline-end:12px!important;
    font-size:16px!important;font-weight:700!important;box-shadow:none!important;
  }
  #customer-message-app .azm-search:focus{background:#fff!important;box-shadow:0 0 0 3px rgba(249,115,22,.10)!important}
  #customer-message-app .azm-filter-row{gap:7px!important;padding-top:8px!important}
  #customer-message-app .azm-filter-chip{
    min-height:34px!important;padding:6px 13px!important;border:1px solid #dfe3e8!important;
    border-radius:999px!important;background:#fff!important;color:#626d7b!important;font-size:10px!important;box-shadow:none!important;
  }
  #customer-message-app .azm-filter-chip.active{background:var(--azpm-ink)!important;border-color:var(--azpm-ink)!important;color:#fff!important}
  #customer-message-app .azm-thread-list{padding:0 8px 12px!important;background:#fff!important}
  #customer-message-app .azm-thread{
    min-height:72px!important;grid-template-columns:52px minmax(0,1fr) auto!important;
    gap:10px!important;padding:10px 5px!important;border-radius:0!important;
    border-bottom:1px solid #edf0f3!important;background:#fff!important;box-shadow:none!important;
  }
  #customer-message-app .azm-thread.active{background:#fff8f2!important;box-shadow:none!important}
  #customer-message-app .azm-thread.active::before{display:none!important}
  #customer-message-app .azm-avatar{width:50px!important;height:50px!important;border-radius:50%!important;box-shadow:none!important}
  #customer-message-app .azm-thread-title{font-size:14px!important;color:#111827!important}
  #customer-message-app .azm-thread-time{font-size:10px!important}
  #customer-message-app .azm-thread-sub{font-size:10px!important;margin-top:3px!important}
  #customer-message-app .azm-thread-preview{font-size:10px!important;margin-top:3px!important}
  #customer-message-app .azm-unread{background:var(--azpm-orange)!important;min-width:22px!important;height:22px!important}
  #customer-message-app .m2-new-chat-hint{display:none!important}

  #customer-message-app .azm-chat{background:#eef1f2!important}
  #customer-message-app .azm-chat-header{
    min-height:64px!important;padding:9px 10px!important;border-bottom:1px solid #e4e8ec!important;background:#fff!important;
  }
  #customer-message-app .azm-chat-person{gap:8px!important}
  #customer-message-app .azm-chat-person .azm-avatar{width:43px!important;height:43px!important;flex-basis:43px!important}
  #customer-message-app .azm-chat-person h3{font-size:14px!important}
  #customer-message-app .azm-chat-person p{margin-top:2px!important;font-size:9px!important}
  #customer-message-app .azm-mobile-back{width:38px!important;height:38px!important;border-radius:50%!important}
  #customer-message-app .azm-product-strip{
    margin:6px 8px 0!important;padding:7px 9px!important;border-radius:11px!important;background:#fff8f2!important;
  }
  #customer-message-app .azm-secure-note{margin:5px 8px 0!important;font-size:7px!important}
  #customer-message-app .azm-messages{
    padding:12px 9px 14px!important;gap:4px!important;
    background-color:#efeceb!important;
    background-image:radial-gradient(circle at 18px 18px,rgba(249,115,22,.025) 1.2px,transparent 1.4px),radial-gradient(circle at 52px 52px,rgba(16,26,47,.025) 1.1px,transparent 1.4px)!important;
    background-size:68px 68px!important;
  }
  #customer-message-app .azm-day{padding:4px 9px!important;font-size:8px!important;background:rgba(255,255,255,.88)!important}
  #customer-message-app .azm-bubble{
    max-width:86%!important;padding:8px 10px 6px!important;border-radius:14px 14px 14px 4px!important;
    font-size:11px!important;line-height:1.65!important;box-shadow:0 1px 4px rgba(15,23,42,.07)!important;
  }
  #customer-message-app .azm-row.mine .azm-bubble{
    background:linear-gradient(135deg,#ff8b2d,var(--azpm-orange))!important;
    border-radius:14px 14px 4px 14px!important;color:#fff!important;
  }
  #customer-message-app .azm-bubble-meta{font-size:7px!important;margin-top:2px!important}
  #customer-message-app .azm-quick-replies{padding:6px 8px 2px!important;background:#fff!important}
  #customer-message-app .azm-quick-replies button{padding:6px 9px!important;font-size:8px!important}
  #customer-message-app .azm-compose-wrap{padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;background:#f4f5f6!important}
  #customer-message-app .azm-compose{
    display:grid!important;grid-template-columns:40px 40px minmax(0,1fr) 44px!important;gap:5px!important;align-items:end!important;
  }
  #customer-message-app .azm-compose-btn{
    width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;border-radius:50%!important;background:#fff!important;
  }
  #customer-message-app .azm-send{width:44px!important;min-width:44px!important;height:44px!important;background:var(--azpm-orange)!important;color:#fff!important}
  #customer-message-app .azm-compose textarea{
    min-height:42px!important;max-height:110px!important;border:0!important;border-radius:22px!important;background:#fff!important;
    padding:10px 13px!important;font-size:16px!important;box-shadow:none!important;
  }
  #customer-message-app .azm-compose-help{display:none!important}

  /* ---------------- Investor messaging center (M3) ---------------- */
  #tab-messages .m3-shell{gap:8px!important}
  #tab-messages .m3-hero{
    min-height:62px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
    gap:10px!important;padding:8px 3px 10px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  #tab-messages .m3-kicker,#tab-messages .m3-hero p{display:none!important}
  #tab-messages .m3-hero h1{margin:0!important;font-size:25px!important;line-height:1.08!important;font-weight:1000!important;color:var(--azpm-ink)!important}
  #tab-messages .m3-hero-actions{width:auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:7px!important}
  #tab-messages .m3-metrics{display:none!important}
  #tab-messages #m3-new-thread{
    width:43px!important;min-width:43px!important;height:43px!important;min-height:43px!important;padding:0!important;
    border-radius:50%!important;font-size:0!important;background:var(--azpm-orange)!important;box-shadow:0 7px 16px rgba(249,115,22,.2)!important;
  }
  #tab-messages #m3-new-thread i{font-size:16px!important;margin:0!important}
  #tab-messages .m3-legacy,#tab-messages .m3-preview{padding:7px 9px!important;border-radius:10px!important;font-size:8px!important}
  #m3-app.m3-app{
    width:100%!important;height:calc(100dvh - 218px)!important;min-height:490px!important;max-height:none!important;
    border:1px solid var(--azpm-line)!important;border-radius:20px!important;background:#fff!important;
    box-shadow:0 8px 25px rgba(15,23,42,.055)!important;overflow:hidden!important;
  }
  #m3-app .m3-sidebar{height:100%!important;background:#fff!important;border:0!important}
  #m3-app .m3-side-head{padding:10px 10px 8px!important;border-bottom:1px solid #eef1f4!important;background:#fff!important}
  #m3-app .m3-side-title{margin-bottom:8px!important;align-items:center!important}
  #m3-app .m3-side-title>div>small{display:none!important}
  #m3-app .m3-side-title h2{margin:0!important;font-size:19px!important;font-weight:1000!important;color:var(--azpm-ink)!important}
  #m3-app .m3-side-title h2 i{display:none!important}
  #m3-app .m3-count{min-width:25px!important;height:25px!important;padding:0 7px!important;border-radius:999px!important;background:var(--azpm-ink)!important;color:#fff!important;font-size:9px!important}
  #m3-app .m3-search{margin-top:0!important}
  #m3-app .m3-search i{inset-inline-start:14px!important;font-size:14px!important;color:#6b7280!important}
  #m3-app .m3-search input{
    height:46px!important;border:0!important;border-radius:14px!important;background:#f1f3f5!important;
    padding-inline-start:42px!important;padding-inline-end:12px!important;font-size:16px!important;font-weight:700!important;box-shadow:none!important;
  }
  #m3-app .m3-filters{gap:7px!important;margin-top:8px!important;overflow-x:auto!important;scrollbar-width:none!important}
  #m3-app .m3-filters::-webkit-scrollbar{display:none!important}
  #m3-app .m3-filters button{
    flex:0 0 auto!important;min-height:34px!important;padding:6px 13px!important;border:1px solid #dfe3e8!important;
    border-radius:999px!important;background:#fff!important;color:#626d7b!important;font-size:10px!important;
  }
  #m3-app .m3-filters button.active{background:var(--azpm-ink)!important;border-color:var(--azpm-ink)!important;color:#fff!important}
  #m3-app .m3-thread-list{padding:0 8px 12px!important;background:#fff!important}
  #m3-app .m3-thread{
    min-height:72px!important;display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;
    gap:10px!important;padding:10px 5px!important;border:0!important;border-bottom:1px solid #edf0f3!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;
  }
  #m3-app .m3-thread.active{background:#fff8f2!important}
  #m3-app .m3-avatar{width:50px!important;height:50px!important;flex-basis:50px!important;border-radius:50%!important;box-shadow:none!important}
  #m3-app .m3-thread-top b{font-size:14px!important;color:#111827!important}
  #m3-app .m3-thread-top time{font-size:10px!important}
  #m3-app .m3-thread-sub{font-size:9px!important;margin-top:4px!important}
  #m3-app .m3-thread-main>p{font-size:10px!important;margin-top:4px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #m3-app .m3-unread{background:var(--azpm-orange)!important;min-width:22px!important;height:22px!important}

  #m3-app .m3-chat{height:100%!important;background:#efeceb!important}
  #m3-app .m3-chat-head{min-height:64px!important;padding:9px 10px!important;border-bottom:1px solid #e4e8ec!important;background:#fff!important}
  #m3-app .m3-person{gap:8px!important}
  #m3-app .m3-person .m3-avatar{width:43px!important;height:43px!important;flex-basis:43px!important}
  #m3-app .m3-person h3{font-size:14px!important}
  #m3-app .m3-person p{font-size:9px!important;margin-top:2px!important}
  #m3-app #m3-back{width:38px!important;height:38px!important;border-radius:50%!important;background:#fff!important;border:1px solid #e5e8ec!important}
  #m3-app .m3-reference{padding:7px 9px!important;background:#fff8f2!important}
  #m3-app .m3-secure{padding:5px 8px!important;font-size:7px!important;background:#fff!important}
  #m3-app .m3-records{
    padding:12px 9px 14px!important;gap:4px!important;background-color:#efeceb!important;
    background-image:radial-gradient(circle at 18px 18px,rgba(249,115,22,.025) 1.2px,transparent 1.4px),radial-gradient(circle at 52px 52px,rgba(16,26,47,.025) 1.1px,transparent 1.4px)!important;
    background-size:68px 68px!important;
  }
  #m3-app .m3-day{padding:4px 9px!important;font-size:8px!important;background:rgba(255,255,255,.88)!important}
  #m3-app .m3-bubble{
    max-width:86%!important;padding:8px 10px 6px!important;border-radius:14px 14px 14px 4px!important;
    font-size:11px!important;line-height:1.65!important;box-shadow:0 1px 4px rgba(15,23,42,.07)!important;
  }
  #m3-app .m3-row.mine .m3-bubble{background:linear-gradient(135deg,#ff8b2d,var(--azpm-orange))!important;border-radius:14px 14px 4px 14px!important;color:#fff!important}
  #m3-app .m3-quick{padding:6px 8px 2px!important;background:#fff!important}
  #m3-app .m3-quick button{padding:6px 9px!important;font-size:8px!important}
  #m3-app .m3-compose-wrap{padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;background:#f4f5f6!important}
  #m3-app .m3-compose{grid-template-columns:40px minmax(0,1fr) 44px!important;gap:5px!important}
  #m3-app .m3-compose button{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;border-radius:50%!important;background:#fff!important}
  #m3-app .m3-compose button:last-child{width:44px!important;min-width:44px!important;height:44px!important;background:var(--azpm-orange)!important;color:#fff!important}
  #m3-app .m3-compose textarea{
    min-height:42px!important;max-height:110px!important;border:0!important;border-radius:22px!important;background:#fff!important;
    padding:10px 13px!important;font-size:16px!important;box-shadow:none!important;
  }

  /* The existing M2/M3 JavaScript controls chat-open. Keep that behavior; only presentation changes. */
  #customer-message-app.chat-open .azm-chat,
  #m3-app.chat-open .m3-chat{z-index:5!important}
}

@media screen and (max-width: 430px) {
  #customer-message-app.m2-customer-app{height:calc(100dvh - 155px)!important;min-height:480px!important}
  #m3-app.m3-app{height:calc(100dvh - 205px)!important;min-height:470px!important}
  #customer-message-app .azm-bubble,#m3-app .m3-bubble{max-width:91%!important}
  #customer-product-message-view .azm-customer-profile h2,#tab-messages .m3-hero h1{font-size:23px!important}
}