:root{
  --support-blue:#176ee8;
  --support-blue-2:#43a0ff;
  --support-ink:#142944;
  --support-muted:#6c7f97;
  --support-line:#dce7f3;
  --support-soft:#f5f9fe;
  --support-green:#079467;
  --support-red:#ef3f56;
  --support-shadow:0 18px 55px rgba(28,72,125,.10);
}

.nav-unread-badge,.admin-nav-unread{
  display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;
  background:#ef3f56;color:#fff;font-size:10px;font-weight:950;line-height:1;box-shadow:0 6px 14px rgba(239,63,86,.25)
}
.admin-nav-unread{margin-left:auto}

.support-page-shell{position:relative;max-width:1180px}
.support-member-hero{
  position:relative;display:flex;align-items:center;gap:17px;margin-bottom:16px;padding:22px 24px;overflow:hidden;
  border:1px solid var(--support-line);border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(244,249,255,.98));
  box-shadow:0 14px 42px rgba(25,78,140,.09)
}
.support-member-hero:after{content:"";position:absolute;width:240px;height:240px;right:-75px;top:-130px;border-radius:50%;background:radial-gradient(circle,rgba(23,110,232,.16),transparent 67%);pointer-events:none}
.support-hero-icon{flex:0 0 auto;display:grid;place-items:center;width:64px;height:64px;border-radius:21px;background:linear-gradient(145deg,var(--support-blue),var(--support-blue-2));color:#fff;font-size:29px;box-shadow:0 14px 34px rgba(23,110,232,.25)}
.support-member-hero h1{margin:3px 0 5px;font-size:clamp(26px,4vw,38px);color:var(--support-ink)}
.support-member-hero p{margin:0;color:var(--support-muted);max-width:660px;line-height:1.65}
.support-status{margin-left:auto;display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(20,155,103,.18);border-radius:999px;background:rgba(20,155,103,.07);color:#087a50;font-size:13px;font-weight:800;white-space:nowrap}
.support-status i{width:9px;height:9px;border-radius:50%;background:#18ad74;box-shadow:0 0 0 5px rgba(24,173,116,.12)}

.support-chat-card,.support-admin-chat-card,.support-conversation-panel{border:1px solid var(--support-line);background:rgba(255,255,255,.98);box-shadow:var(--support-shadow)}
.support-chat-card{overflow:hidden;border-radius:28px}
.support-chat-head{min-height:82px;display:flex;align-items:center;gap:13px;padding:15px 20px;border-bottom:1px solid var(--support-line);background:linear-gradient(180deg,#fff,#f8fbff)}
.support-chat-head>div:nth-of-type(2){min-width:0}
.support-chat-head strong{display:block;color:var(--support-ink);font-size:15px}
.support-chat-head span{display:block;margin-top:4px;color:var(--support-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-agent-avatar,.support-member-avatar{display:grid;place-items:center;flex:0 0 auto;border-radius:16px;background:linear-gradient(145deg,var(--support-blue),#52a8ff);color:#fff;font-weight:950;box-shadow:0 9px 22px rgba(23,110,232,.2)}
.support-agent-avatar{width:48px;height:48px}
.support-member-avatar{width:42px;height:42px}
.support-member-avatar.large{width:50px;height:50px;border-radius:18px}
.support-retention-pill{margin-left:auto!important;padding:8px 11px;border-radius:999px;background:#eef5ff;color:var(--support-blue)!important;font-size:11px!important;font-weight:850;white-space:nowrap}

.support-message-feed{height:min(58vh,560px);min-height:390px;overflow-y:auto;overscroll-behavior:contain;padding:25px 22px;background:radial-gradient(circle at 7% 8%,rgba(23,110,232,.055),transparent 30%),linear-gradient(180deg,#f8fbff,#f2f7fc);scrollbar-width:thin;scrollbar-color:#b8cbe1 transparent}
.support-message{display:flex;margin:9px 0}
.support-message.mine{justify-content:flex-end}
.support-message.theirs{justify-content:flex-start}
.support-bubble{max-width:min(76%,620px);padding:12px 15px 9px;border-radius:19px;box-shadow:0 7px 22px rgba(31,75,127,.08)}
.support-message.theirs .support-bubble{border:1px solid #dce7f2;border-bottom-left-radius:6px;background:#fff;color:#20344f}
.support-message.mine .support-bubble{border-bottom-right-radius:6px;background:linear-gradient(145deg,var(--support-blue),#2e89f3);color:#fff;box-shadow:0 9px 24px rgba(23,110,232,.19)}
.support-bubble p{margin:0;white-space:pre-wrap;word-break:break-word;line-height:1.55;font-size:14px}
.support-message-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px;min-height:14px}
.support-message-meta time{display:block;font-size:10px;opacity:.72;text-align:right}
.support-read-state{font-size:10px;font-weight:850;white-space:nowrap;opacity:.78}
.support-read-state.read{color:#bce9ff;opacity:1}
.support-message.theirs .support-read-state{color:var(--support-green)}
.support-empty{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--support-muted);padding:28px}
.support-empty>div{display:grid;place-items:center;width:60px;height:60px;margin-bottom:13px;border-radius:20px;background:#eaf3ff;color:var(--support-blue);font-size:26px}
.support-empty strong{color:var(--support-ink);font-size:17px}
.support-empty p{max-width:430px;margin:7px 0 0;line-height:1.55;font-size:13px}

.support-composer{display:flex;align-items:flex-end;gap:11px;padding:15px 17px calc(15px + env(safe-area-inset-bottom));border-top:1px solid var(--support-line);background:#fff}
.support-compose-box{position:relative;flex:1;border:1px solid #d4e1ee;border-radius:18px;background:#f8fbff;transition:.2s}
.support-compose-box:focus-within{border-color:#7fb8ff;box-shadow:0 0 0 4px rgba(23,110,232,.08);background:#fff}
.support-compose-box textarea{display:block;width:100%;min-height:48px;max-height:132px;padding:13px 66px 11px 15px;border:0!important;outline:0!important;resize:none;background:transparent!important;color:var(--support-ink);font:inherit;line-height:1.5;box-shadow:none!important}
.support-compose-box small{position:absolute;right:12px;bottom:9px;color:#8a9ab0;font-size:10px}
.support-send-button{display:flex;align-items:center;justify-content:center;gap:9px;height:49px;padding:0 18px;border:0;border-radius:17px;background:linear-gradient(145deg,var(--support-blue),#2e89f3);color:#fff;font-weight:950;cursor:pointer;box-shadow:0 10px 24px rgba(23,110,232,.22);transition:.2s}
.support-send-button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(23,110,232,.28)}
.support-send-button:disabled{opacity:.58;cursor:wait;transform:none}
.support-send-button b{font-size:18px}
.support-compose-error{padding:8px 15px;border-top:1px solid #ffd9df;background:#fff1f3;color:#b4263a;font-size:12px;font-weight:800}

.admin-support-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:16px}
.admin-support-stats>div{padding:17px 19px;border:1px solid var(--support-line);border-radius:20px;background:#fff;box-shadow:0 10px 32px rgba(27,72,126,.07)}
.admin-support-stats span{display:block;color:var(--support-muted);font-size:12px}
.admin-support-stats strong{display:block;margin-top:6px;color:var(--support-ink);font-size:23px}
.admin-support-layout{display:grid;grid-template-columns:minmax(310px,350px) minmax(0,1fr);gap:16px;min-height:680px}
.support-conversation-panel,.support-admin-chat-card{overflow:hidden;border-radius:24px}
.support-panel-title{display:flex;align-items:center;justify-content:space-between;min-height:76px;padding:15px 17px;border-bottom:1px solid var(--support-line)}
.support-panel-title h2{margin:3px 0 0;color:var(--support-ink);font-size:17px}
.support-panel-title>span{display:grid;place-items:center;min-width:32px;height:32px;padding:0 9px;border-radius:12px;background:#edf5ff;color:var(--support-blue);font-weight:950}
.support-directory-tools{padding:12px;border-bottom:1px solid var(--support-line);background:#fff}
.support-member-search{display:flex!important;align-items:center;gap:8px;padding:0 12px;border:1px solid #d9e5f1;border-radius:15px;background:#f7faff;font-weight:400!important}
.support-member-search:focus-within{border-color:#79b5ff;box-shadow:0 0 0 4px rgba(23,110,232,.08);background:#fff}
.support-member-search span{color:#7490ae;font-size:20px}
.support-member-search input{height:43px;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;font-size:13px}
.support-filter-row{display:flex;gap:6px;margin-top:9px;overflow-x:auto;scrollbar-width:none}
.support-filter-row::-webkit-scrollbar{display:none}
.support-filter-row button{flex:0 0 auto;padding:7px 10px;border:1px solid #dde8f3;border-radius:999px;background:#fff;color:#6f8197;font-size:10px;font-weight:900;cursor:pointer}
.support-filter-row button.active{border-color:transparent;background:linear-gradient(145deg,var(--support-blue),#3f9cf7);color:#fff}
.support-conversation-list{height:510px;overflow-y:auto;background:#f8fbff;transition:opacity .18s}
.support-conversation-list.loading{opacity:.55}
.support-conversation-item{position:relative;display:flex;align-items:flex-start;gap:10px;padding:14px 13px;border-bottom:1px solid #e5edf6;text-decoration:none;transition:.18s}
.support-conversation-item:hover{background:#fff}
.support-conversation-item.active{background:#fff;box-shadow:inset 3px 0 var(--support-blue)}
.support-conversation-copy{display:block;min-width:0;flex:1}
.support-conversation-copy strong,.support-conversation-copy small,.support-conversation-copy time{display:block}
.support-conversation-copy strong{color:var(--support-ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-conversation-copy small{margin-top:4px;color:var(--support-muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-conversation-copy time{margin-top:6px;color:#91a0b3;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-unread-count{display:grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--support-red);color:#fff;font-size:10px;box-shadow:0 6px 14px rgba(239,63,86,.22)}
.support-new-chat-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:9px;background:#eaf3ff;color:var(--support-blue);font-size:15px}
.support-list-empty{padding:50px 20px;text-align:center;color:var(--support-muted);font-size:13px;line-height:1.6}
.support-admin-chat-card{display:flex;flex-direction:column}
.admin-support-head{flex:0 0 auto}
.admin-support-head .support-view-member{margin-left:auto}
.admin-message-feed{flex:1;height:auto;min-height:470px}
.admin-support-composer{flex:0 0 auto}
.admin-empty{min-height:650px}
.support-mobile-back{display:none;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border:1px solid #dbe6f1;border-radius:13px;background:#fff;color:var(--support-blue);text-decoration:none;font-size:27px;line-height:1}

.mobile-bottom.has-support{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.mobile-bottom.guest-bottom{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.mobile-bottom a i{position:relative;font-style:normal;line-height:1;font-size:16px}
.mobile-support-unread{position:absolute;display:grid;place-items:center;min-width:17px;height:17px;top:-10px;right:-13px;padding:0 4px;border:2px solid #fff;border-radius:999px;background:var(--support-red);color:#fff;font-size:8px;font-style:normal;font-weight:950;line-height:1;box-shadow:0 5px 12px rgba(239,63,86,.35);animation:supportPulse 1.8s ease-in-out infinite}
@keyframes supportPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

@media(max-width:980px){
  .support-status{display:none}
  .admin-support-layout{grid-template-columns:285px minmax(0,1fr)}
}

@media(max-width:760px){
  .support-member-screen{overflow:hidden}
  .support-member-screen .site-footer{display:none}
  .support-member-screen .flash-shell{position:fixed;z-index:1100;left:10px;right:10px;top:72px;width:auto;margin:0}
  .support-member-screen .support-page-shell{width:100%;height:calc(100dvh - 68px - 78px);margin:0;padding:0 8px 8px}
  .support-member-screen .support-member-hero{display:none}
  .support-member-screen .support-chat-card{height:100%;display:flex;flex-direction:column;border-radius:0 0 22px 22px;box-shadow:none}
  .support-member-screen .support-chat-head{flex:0 0 auto;min-height:66px;padding:10px 13px}
  .support-member-screen .support-message-feed{flex:1;height:auto;min-height:0;padding:16px 10px}
  .support-member-screen .support-composer{position:relative;flex:0 0 auto;padding:9px 9px calc(9px + env(safe-area-inset-bottom))}
  .support-member-screen .support-bubble{max-width:88%;padding:11px 13px 8px}
  .support-member-screen .support-retention-pill{display:none}
  .support-member-screen .support-send-button{width:49px;padding:0}
  .support-member-screen .support-send-button span{display:none}

  .admin-support-screen .admin-content{padding:8px!important}
  .admin-support-screen .admin-topbar,.admin-support-screen .admin-support-stats{display:none}
  .admin-support-layout{display:block;min-height:0;height:calc(100dvh - 70px)}
  .support-conversation-panel,.support-admin-chat-card{height:100%;border-radius:20px}
  .admin-support-layout.has-selected .support-conversation-panel{display:none}
  .admin-support-layout.no-selected .support-admin-chat-card{display:none}
  .support-panel-title{min-height:66px;padding:12px 14px}
  .support-directory-tools{padding:10px}
  .support-member-search input{height:42px}
  .support-conversation-list{height:calc(100% - 151px);overflow-y:auto;display:block;padding:0}
  .support-conversation-item{border:0;border-bottom:1px solid #e5edf6;border-radius:0;background:transparent}
  .support-admin-chat-card{min-height:0;display:flex}
  .admin-support-head{min-height:66px;padding:9px 10px}
  .support-mobile-back{display:flex}
  .admin-support-head .support-view-member{display:none}
  .admin-message-feed{flex:1;height:auto;min-height:0;padding:16px 10px}
  .admin-support-composer{position:relative;padding:9px 9px calc(9px + env(safe-area-inset-bottom))}
  .admin-support-composer .support-send-button{width:49px;padding:0}
  .admin-support-composer .support-send-button span{display:none}
  .support-bubble{max-width:88%;padding:11px 13px 8px}
}

@media(max-width:430px){
  .support-chat-head span{max-width:190px}
  .support-agent-avatar{width:43px;height:43px;border-radius:14px}
  .support-member-avatar.large{width:43px;height:43px;border-radius:14px}
  .support-bubble{max-width:92%;font-size:13px}
  .support-bubble p{font-size:13px}
  .support-message-meta{gap:6px}
  .support-read-state,.support-message-meta time{font-size:9px}
  .support-filter-row button{padding:7px 9px}
  .mobile-bottom{left:6px!important;right:6px!important;bottom:6px!important;padding:6px!important;border-radius:20px!important}
  .mobile-bottom a{padding:7px 1px!important;font-size:8px!important}
}

@media(prefers-reduced-motion:reduce){.mobile-support-unread{animation:none}.support-send-button,.support-conversation-item{transition:none}}

/* ==========================================================
   Member mobile keyboard-safe chat layout — final override
   ========================================================== */
:root{
  --support-vvh:100dvh;
  --support-vv-top:0px;
  --support-header-height:68px;
  --support-nav-space:88px;
}

@media(max-width:760px){
  html:has(body.support-member-screen){
    height:100%;
    overflow:hidden;
    overscroll-behavior:none;
  }

  body.support-member-screen{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:var(--support-vvh,100dvh)!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    touch-action:manipulation;
  }

  body.support-member-screen .site-header{
    position:fixed!important;
    z-index:1000!important;
    top:var(--support-vv-top,0px)!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    margin:0!important;
  }

  body.support-member-screen .support-page-shell{
    position:fixed!important;
    z-index:40!important;
    top:calc(var(--support-vv-top,0px) + var(--support-header-height,68px))!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:calc(var(--support-vvh,100dvh) - var(--support-header-height,68px) - var(--support-nav-space,88px))!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0 7px 7px!important;
    overflow:hidden!important;
    transition:height .16s ease,top .16s ease;
  }

  body.support-member-screen .support-chat-card{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:0 0 21px 21px!important;
    background:#fff!important;
  }

  body.support-member-screen .support-chat-head{
    flex:0 0 auto!important;
    min-height:62px!important;
    padding:8px 11px!important;
  }

  body.support-member-screen .support-message-feed{
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    scroll-padding-bottom:18px!important;
    padding:14px 9px 18px!important;
  }

  body.support-member-screen .support-compose-error{
    flex:0 0 auto!important;
  }

  body.support-member-screen .support-composer{
    position:relative!important;
    inset:auto!important;
    z-index:10!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:flex-end!important;
    gap:7px!important;
    margin:0!important;
    padding:7px 7px max(7px,env(safe-area-inset-bottom))!important;
    border-top:1px solid #dce7f3!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -8px 24px rgba(24,64,105,.07)!important;
    transform:translateZ(0);
  }

  body.support-member-screen .support-compose-box{
    min-width:0!important;
    border-radius:17px!important;
  }

  body.support-member-screen .support-compose-box textarea{
    min-height:46px!important;
    max-height:120px!important;
    padding:12px 50px 10px 13px!important;
    font-size:16px!important; /* prevents iOS input zoom */
    line-height:1.42!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.support-member-screen .support-compose-box small{
    right:10px!important;
    bottom:8px!important;
    font-size:9px!important;
  }

  body.support-member-screen .support-send-button{
    flex:0 0 47px!important;
    width:47px!important;
    height:47px!important;
    min-width:47px!important;
    padding:0!important;
    border-radius:16px!important;
  }

  body.support-member-screen .mobile-bottom{
    transition:opacity .13s ease,transform .13s ease,visibility .13s ease!important;
  }

  body.support-member-screen.support-keyboard-open .mobile-bottom,
  body.support-member-screen.support-input-focused .mobile-bottom{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(calc(100% + 30px))!important;
  }

  body.support-member-screen.support-keyboard-open .support-page-shell,
  body.support-member-screen.support-input-focused .support-page-shell{
    height:calc(var(--support-vvh,100dvh) - var(--support-header-height,68px))!important;
    padding-bottom:0!important;
  }

  body.support-member-screen.support-keyboard-open .support-chat-card,
  body.support-member-screen.support-input-focused .support-chat-card{
    border-radius:0!important;
  }

  body.support-member-screen.support-keyboard-open .support-composer,
  body.support-member-screen.support-input-focused .support-composer{
    padding-bottom:max(6px,env(safe-area-inset-bottom))!important;
    box-shadow:0 -10px 28px rgba(24,64,105,.11)!important;
  }

  body.support-member-screen.support-keyboard-open .support-message-feed,
  body.support-member-screen.support-input-focused .support-message-feed{
    scroll-padding-bottom:84px!important;
  }
}

@media(max-width:380px){
  body.support-member-screen .support-chat-head{
    min-height:58px!important;
    padding:7px 9px!important;
  }
  body.support-member-screen .support-agent-avatar{
    width:40px!important;
    height:40px!important;
    border-radius:13px!important;
  }
  body.support-member-screen .support-chat-head strong{font-size:13px!important}
  body.support-member-screen .support-chat-head span{font-size:10px!important;max-width:165px!important}
  body.support-member-screen .support-message-feed{padding-inline:7px!important}
}