.support-modal-backdrop{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,0.78);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    z-index:9997;
    justify-content:center;align-items:center;
    padding:20px;overflow-y:auto;
    animation:supportFadeIn .25s ease-out;
  }
  .support-modal-backdrop.open{display:flex}
  @keyframes supportFadeIn{from{opacity:0}to{opacity:1}}
  @keyframes supportSlideUp{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

  .support-modal{
    position:relative;
    width:100%;max-width:480px;
    background:linear-gradient(180deg,#131322 0%,#0d0d18 100%);
    border:1px solid #252539;
    border-radius:22px;
    padding:0;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.04);
    animation:supportSlideUp .35s cubic-bezier(.4,0,.2,1);
  }
  .support-modal::before{
    content:'';position:absolute;
    top:0;left:24px;right:24px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(155,123,255,0.55),transparent);
  }
  .support-modal::after{
    content:'';position:absolute;
    top:-50%;right:-15%;width:380px;height:380px;
    background:radial-gradient(circle,rgba(124,92,252,0.10) 0%,transparent 65%);
    pointer-events:none;z-index:0;
  }

  .support-close{
    position:absolute;top:14px;right:14px;
    width:32px;height:32px;border-radius:10px;
    background:transparent;border:1px solid #252539;
    color:#9090a8;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;line-height:1;
    transition:all .18s;z-index:2;
    font-family:'Rubik',sans-serif;
  }
  .support-close:hover{
    border-color:#ef4444;color:#ef4444;
    background:rgba(239,68,68,0.06);
  }

  .support-modal-header{
    text-align:center;
    padding:30px 28px 14px;
    position:relative;z-index:1;
  }
  .support-modal-icon{
    width:60px;height:60px;
    margin:0 auto 12px;
    border-radius:16px;
    background:linear-gradient(135deg,#7C5CFC 0%,#4F37C2 100%);
    display:flex;align-items:center;justify-content:center;
    font-size:28px;
    box-shadow:0 8px 24px rgba(124,92,252,0.35),inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .support-modal-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:20px;font-weight:700;
    color:#e2e8f0;
    letter-spacing:.04em;
    margin-bottom:6px;
  }
  .support-modal-subtitle{
    font-size:12px;color:#a0a0b0;
    line-height:1.55;
    max-width:340px;margin:0 auto;
  }

  /* Tab segment switcher */
  .support-tabs{
    display:flex;gap:4px;
    background:#0a0a12;
    border:1px solid #1f1e30;
    border-radius:12px;
    padding:4px;
    margin:0 28px;
    position:relative;z-index:1;
  }
  .support-tab{
    flex:1;
    background:transparent;
    border:none;
    color:#9090a8;
    padding:9px 12px;
    border-radius:9px;
    font-family:'Rubik',sans-serif;
    font-size:12px;font-weight:600;
    cursor:pointer;
    transition:all .2s;
    display:flex;align-items:center;justify-content:center;gap:6px;
  }
  .support-tab:hover:not(.active){color:#c0c0d0}
  .support-tab.active{
    background:linear-gradient(135deg,#1a1a2e 0%,#252539 100%);
    color:#A78BFA;
    box-shadow:0 2px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .support-modal-body{
    padding:18px 28px 28px;
    position:relative;z-index:1;
  }
  .support-pane{display:none}
  .support-pane.active{display:block;animation:supportFadeIn .2s ease-out}

  /* === Pane 1: Mail App === */
  .support-email-card{
    background:#0a0a12;
    border:1px solid #252539;
    border-radius:14px;
    padding:14px 16px;
    display:flex;align-items:center;gap:12px;
    margin-bottom:14px;
    transition:border-color .2s;
  }
  .support-email-card:hover{border-color:#5B21B6}
  .support-email-meta{flex:1;min-width:0}
  .support-email-label{
    font-size:9px;font-weight:700;
    text-transform:uppercase;letter-spacing:.18em;
    color:#7c7c94;margin-bottom:4px;
  }
  .support-email-value{
    font-family:'JetBrains Mono',monospace;
    font-size:14px;font-weight:700;
    color:#A78BFA;
    font-feature-settings:"zero" 1,"tnum" 1;
    font-variant-numeric:slashed-zero tabular-nums;
    word-break:break-all;line-height:1.3;
  }
  .support-copy-btn{
    flex-shrink:0;
    background:#1a1a2e;
    border:1px solid #363650;
    color:#a0a0b0;
    padding:8px 12px;
    border-radius:10px;
    font-size:11px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
    cursor:pointer;
    font-family:'JetBrains Mono',monospace;
    transition:all .18s;
    display:inline-flex;align-items:center;gap:6px;
  }
  .support-copy-btn:hover{
    border-color:#7C5CFC;color:#7C5CFC;
    background:rgba(124,92,252,0.08);
  }
  .support-copy-btn.copied{
    border-color:#22c55e;color:#22c55e;
    background:rgba(34,197,94,0.08);
  }
  .support-send-btn{
    width:100%;
    background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%);
    color:#ffffff;
    padding:14px 22px;
    border-radius:12px;
    font-weight:700;font-size:14px;
    border:none;cursor:pointer;
    font-family:'Rubik',sans-serif;
    letter-spacing:.04em;
    transition:all .2s;
    box-shadow:0 6px 18px rgba(124,92,252,0.35);
    text-decoration:none;
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin-bottom:16px;
  }
  .support-send-btn:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(124,92,252,0.5);
    background:linear-gradient(135deg,#9B7BFF 0%,#7C5CFC 100%);
  }
  .support-send-btn:active{transform:translateY(0)}
  .support-send-btn:disabled{opacity:.6;cursor:wait;transform:none}

  .support-meta-row{
    display:flex;gap:10px;
    padding-top:14px;
    border-top:1px solid #1f1e30;
  }
  .support-meta-item{
    flex:1;
    background:rgba(8,8,14,0.5);
    border:1px solid #1f1e30;
    border-radius:10px;
    padding:10px 12px;
    text-align:center;
  }
  .support-meta-label{
    font-size:9px;font-weight:700;
    text-transform:uppercase;letter-spacing:.15em;
    color:#7c7c94;margin-bottom:4px;
  }
  .support-meta-val{
    font-size:12px;font-weight:600;
    color:#c0c0d0;
    font-family:'JetBrains Mono',monospace;
  }

  /* === Pane 2: Direct message form === */
  .support-form-from{
    background:rgba(8,8,14,0.5);
    border:1px solid #1f1e30;
    border-radius:10px;
    padding:9px 12px;
    margin-bottom:12px;
    display:flex;align-items:center;gap:10px;
    font-size:11px;
  }
  .support-form-from-lbl{
    color:#7c7c94;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    font-size:9px;
  }
  .support-form-from-val{
    color:#A78BFA;
    font-family:'JetBrains Mono',monospace;
    font-weight:600;
    font-size:11px;
    word-break:break-all;
    flex:1;
  }
  .support-form-field{margin-bottom:12px}
  .support-form-label{
    font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.12em;
    color:#9090a8;margin-bottom:6px;
    display:flex;justify-content:space-between;align-items:center;
  }
  .support-form-input,
  .support-form-textarea{
    width:100%;
    background:#0a0a12;
    border:1px solid #252539;
    border-radius:10px;
    padding:11px 14px;
    color:#e2e8f0;
    font-family:'Rubik',sans-serif;
    font-size:13px;
    outline:none;
    transition:all .2s;
    resize:none;
  }
  .support-form-input:focus,
  .support-form-textarea:focus{
    border-color:#7C5CFC;
    background:#0f0d1c;
    box-shadow:0 0 0 3px rgba(124,92,252,0.1);
  }
  .support-form-textarea{
    min-height:110px;
    line-height:1.5;
    resize:vertical;
    max-height:240px;
  }
  .support-form-counter{
    font-size:10px;
    color:#7c7c94;
    font-family:'JetBrains Mono',monospace;
    font-weight:500;
  }
  .support-form-counter.warn{color:#fbbf24}
  .support-form-counter.over{color:#ef4444}

  .support-form-error{
    background:rgba(239,68,68,0.08);
    border:1px solid rgba(239,68,68,0.3);
    color:#ef4444;
    font-size:12px;
    padding:9px 12px;
    border-radius:8px;
    margin-bottom:12px;
    display:none;
  }
  .support-form-error.show{display:block}

  /* === Success state (replaces body after send) === */
  .support-success{
    text-align:center;
    padding:8px 4px 4px;
    animation:supportFadeIn .3s ease-out;
  }
  .support-success-icon{
    width:64px;height:64px;
    margin:0 auto 16px;
    border-radius:50%;
    background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
    display:flex;align-items:center;justify-content:center;
    font-size:32px;
    color:#0a0a12;
    box-shadow:0 8px 24px rgba(34,197,94,0.35);
    animation:supportSlideUp .4s ease-out;
  }
  .support-success-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:18px;font-weight:700;
    color:#22c55e;
    margin-bottom:8px;
    letter-spacing:.04em;
  }
  .support-success-text{
    font-size:13px;color:#a0a0b0;
    line-height:1.55;
    margin-bottom:18px;
    max-width:320px;margin-left:auto;margin-right:auto;
  }
  .support-success-id{
    display:inline-block;
    background:#0a0a12;
    border:1px solid #252539;
    padding:6px 12px;
    border-radius:8px;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    color:#A78BFA;
    letter-spacing:.05em;
    margin-bottom:18px;
  }

  @media(max-width:480px){
    .support-modal{border-radius:18px;max-width:100%}
    .support-modal-header{padding:26px 20px 12px}
    .support-modal-body{padding:14px 20px 22px}
    .support-modal-icon{width:54px;height:54px;font-size:26px}
    .support-modal-title{font-size:18px}
    .support-tabs{margin:0 20px}
    .support-email-card{padding:12px 14px;gap:10px}
    .support-email-value{font-size:13px}
    .support-copy-btn{padding:7px 10px;font-size:10px}
    .support-form-textarea{min-height:90px}
  }

  /* === Inbox tab — My Messages === */
  .support-inbox-badge{
    display:inline-flex;align-items:center;justify-content:center;
    background:#ef4444;color:#fff;
    font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;
    padding:1px 6px;border-radius:9px;min-width:16px;line-height:1.2;
    letter-spacing:.04em;margin-left:4px;
  }
  .support-sidebar-badge{
    display:inline-flex;align-items:center;justify-content:center;
    background:#ef4444;color:#fff;
    font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;
    padding:1px 6px;border-radius:9px;min-width:16px;line-height:1.2;
    letter-spacing:.04em;margin-left:auto;
  }
  .sup-inbox-empty{
    text-align:center;color:#7c7c94;padding:36px 16px;font-size:13px;line-height:1.6;
  }
  .sup-inbox-empty-icon{font-size:42px;margin-bottom:10px;display:block;opacity:.5}

  /* Ticket list — WhatsApp chat list style */
  .sup-inbox-ticket{
    background:#0a0a12;border:1px solid #1f1e30;border-radius:12px;
    margin-bottom:8px;overflow:hidden;transition:all .2s;
  }
  .sup-inbox-ticket.has-new-reply{border-color:#7C5CFC;box-shadow:0 0 0 1px rgba(124,92,252,0.15)}
  .sup-inbox-ticket.open{background:#08080f}
  .sup-inbox-ticket-head{
    padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;
    transition:background .15s;
  }
  .sup-inbox-ticket-head:hover{background:rgba(124,92,252,0.04)}
  .sup-inbox-ticket-info{flex:1;min-width:0}
  .sup-inbox-ticket-subject{
    font-size:13px;font-weight:600;color:#e2e8f0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;
  }
  .sup-inbox-ticket-meta{
    font-size:10px;color:#7c7c94;font-family:'JetBrains Mono',monospace;
    letter-spacing:.04em;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  }
  .sup-inbox-status-badge{
    font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    padding:2px 7px;border-radius:8px;font-family:'JetBrains Mono',monospace;
  }
  .sup-inbox-status-badge.unread{background:#2d0d0d;color:#ef4444;border:1px solid #991b1b}
  .sup-inbox-status-badge.read{background:#131322;color:#A78BFA;border:1px solid #5B21B6}
  .sup-inbox-status-badge.replied{background:#0d2d1a;color:#22c55e;border:1px solid #166534}
  .sup-inbox-status-badge.closed{background:#1a1a2e;color:#9090a8;border:1px solid #363650}
  .sup-inbox-new-pill{
    background:#7C5CFC;color:#fff;font-size:9px;font-weight:800;
    padding:2px 8px;border-radius:10px;letter-spacing:.06em;
    font-family:'JetBrains Mono',monospace;
  }
  .sup-inbox-chevron{
    color:#7c7c94;font-size:11px;transition:transform .25s;flex-shrink:0;
  }
  .sup-inbox-ticket.open .sup-inbox-chevron{transform:rotate(180deg);color:#7C5CFC}

  .sup-inbox-body{display:none;padding:0 12px 12px}
  .sup-inbox-ticket.open .sup-inbox-body{display:block}

  /* === WhatsApp-style chat (customer POV, purple theme) === */
  .cust-chat-area{
    background:#08080f;
    border:1px solid #1f1e30;
    border-radius:12px;
    padding:12px 12px 4px;
    margin-bottom:10px;
    max-height:320px;
    overflow-y:auto;
    background-image:
      radial-gradient(rgba(124,92,252,0.03) 1px, transparent 1px);
    background-size:18px 18px;
  }
  .cust-chat-area::-webkit-scrollbar{width:4px}
  .cust-chat-area::-webkit-scrollbar-thumb{background:#1f1e30;border-radius:3px}

  .cust-chat-day{
    text-align:center;font-size:9px;color:#7c7c94;
    font-family:'JetBrains Mono',monospace;
    margin:4px 0 10px;letter-spacing:.12em;text-transform:uppercase;
    position:relative;font-weight:700;
  }
  .cust-chat-day span{
    background:#08080f;padding:3px 11px;border-radius:10px;
    border:1px solid #1f1e30;position:relative;z-index:1;
  }

  .cust-chat-row{
    display:flex;margin-bottom:4px;align-items:flex-end;gap:4px;
  }
  .cust-chat-row.me{justify-content:flex-end}
  .cust-chat-row.them{justify-content:flex-start}
  .cust-chat-row + .cust-chat-row.same{margin-top:-2px}

  .cust-chat-bubble{
    max-width:78%;
    padding:6px 10px 17px 10px;
    border-radius:10px;
    position:relative;word-wrap:break-word;
    font-size:12px;line-height:1.45;
    color:#e2e8f0;font-family:'Rubik',sans-serif;
    box-shadow:0 1px 1px rgba(0,0,0,0.2);
    animation:custChatIn .2s ease-out;
  }
  @keyframes custChatIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

  /* Customer's own bubbles — purple (right) */
  .cust-chat-row.me .cust-chat-bubble{
    background:linear-gradient(135deg,#6244E3 0%,#4F37C2 100%);
    border-bottom-right-radius:2px;
    color:#f5f0ff;
  }
  /* Admin bubbles — neutral grey (left) */
  .cust-chat-row.them .cust-chat-bubble{
    background:#1a1a2e;
    border:1px solid #252539;
    border-bottom-left-radius:2px;
  }

  .cust-chat-name{
    font-size:10px;font-weight:700;margin-bottom:2px;display:block;
  }
  .cust-chat-row.them .cust-chat-name{color:#C4B5FD}

  .cust-chat-text{white-space:pre-wrap;word-break:break-word}

  .cust-chat-meta{
    position:absolute;bottom:3px;right:8px;
    font-size:9px;color:rgba(226,232,240,0.55);
    font-family:'JetBrains Mono',monospace;
    letter-spacing:.02em;white-space:nowrap;
  }
  .cust-chat-row.them .cust-chat-meta{color:#7c7c94}

  /* Original message indicator (very first bubble) */
  .cust-chat-first-marker{
    font-size:8px;color:#7c7c94;text-align:center;
    letter-spacing:.18em;text-transform:uppercase;
    margin:6px 0 8px;font-family:'JetBrains Mono',monospace;
    font-weight:700;
  }

  /* === WhatsApp-style input bar (customer side) === */
  .cust-chat-input{
    display:flex;gap:8px;align-items:flex-end;
    background:#0a0a12;border:1px solid #252539;
    border-radius:24px;padding:5px 5px 5px 14px;
    transition:border-color .15s;
  }
  .cust-chat-input:focus-within{border-color:#7C5CFC}
  .cust-chat-input textarea{
    flex:1;background:transparent;border:none;
    color:#e2e8f0;font-family:'Rubik',sans-serif;font-size:12px;
    outline:none;resize:none;
    min-height:22px;max-height:100px;
    padding:7px 0;line-height:1.45;
  }
  .cust-chat-input textarea::placeholder{color:#7c7c94}
  .cust-chat-send{
    flex-shrink:0;width:34px;height:34px;border-radius:50%;
    background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%);
    color:#fff;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;transition:all .18s;
    box-shadow:0 2px 8px rgba(124,92,252,0.3);
  }
  .cust-chat-send:hover:not(:disabled){
    transform:scale(1.06);box-shadow:0 4px 12px rgba(124,92,252,0.55);
  }
  .cust-chat-send:active{transform:scale(0.96)}
  .cust-chat-send:disabled{opacity:.5;cursor:wait;transform:none}

  .cust-chat-closed{
    text-align:center;font-size:11px;color:#7c7c94;
    padding:10px;font-style:italic;
    background:#0a0a12;border:1px solid #1f1e30;border-radius:10px;
  }