*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: #E8ECF5;
      min-height: 100vh;
    }

    /* ══ FAB ══ */
  #esi-fab {
    position: fixed;
    bottom: 120px;
    right: 30px; /* geser ke kiri dari WA */

    width: 58px;
    height: 58px;
    background: #1B3FE4;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 9999;

    transition: transform 0.2s ease, background 0.2s;
    box-shadow: 0 6px 24px rgba(27,63,228,0.38);
  }

    #esi-fab:hover { transform: scale(1.08); background: #1432c2; }
    .fab-inner { transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; }
    #esi-fab.open .fab-inner { transform: rotate(45deg); }

    .fab-badge {
      position: absolute; top: 7px; right: 7px;
      width: 12px; height: 12px;
      background: #EF4444; border-radius: 50%;
      border: 2.5px solid #E8ECF5;
      animation: badge-pulse 2s infinite;
    }
    @keyframes badge-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

    /* ══ POPUP ══ */
    #esi-popup {
      position: fixed;
      bottom: 200px; right: 30px;
      width: 364px; max-height: 572px;
      background: #fff;
      border-radius: 22px;
      border: 1px solid rgba(0,0,0,0.07);
      box-shadow: 0 12px 48px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.06);
      display: flex; flex-direction: column;
      overflow: hidden;
      z-index: 9998;
      font-family: 'Plus Jakarta Sans', sans-serif;
      transform-origin: bottom right;
      transform: scale(0.84) translateY(18px);
      opacity: 0; pointer-events: none;
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
    }
    #esi-popup.visible { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }

    /* ══ HEADER ══ */
    .esi-header {
      background: linear-gradient(135deg, #1B3FE4 0%, #2855FF 100%);
      padding: 13px 14px;
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
    }
    .esi-header-left { display: flex; align-items: center; gap: 10px; }
    .esi-avatar {
      width: 38px; height: 38px;
      background: rgba(255,255,255,0.18);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 1.5px solid rgba(255,255,255,0.32);
      flex-shrink: 0;
    }
    .esi-header-name { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
    .esi-header-status { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
    .status-dot {
      width: 7px; height: 7px; background: #4ADE80; border-radius: 50%;
      animation: pulse-dot 2.2s infinite;
    }
    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.45} }
    .status-text { color: rgba(255,255,255,0.72); font-size: 11px; }
    .esi-header-actions { display: flex; gap: 5px; }
    .header-btn {
      background: rgba(255,255,255,0.14); border: none; border-radius: 8px;
      width: 30px; height: 30px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s;
    }
    .header-btn:hover { background: rgba(255,255,255,0.26); }

    /* ══ MESSAGES ══ */
    .esi-messages {
      flex: 1; overflow-y: auto;
      padding: 14px 13px 6px;
      display: flex; flex-direction: column; gap: 11px;
      background: #F7F9FD;
      scrollbar-width: thin; scrollbar-color: #D1D5DB transparent;
    }
    .esi-messages::-webkit-scrollbar { width: 3px; }
    .esi-messages::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 2px; }

    .date-divider {
      text-align: center; font-size: 11px; color: #9CA3AF; font-weight: 500;
      display: flex; align-items: center; gap: 8px; margin: 2px 0;
    }
    .date-divider::before,.date-divider::after { content:''; flex:1; height:1px; background:#E5E7EB; }

    .msg-row { display: flex; gap: 7px; align-items: flex-end; }
    .msg-row.user { flex-direction: row-reverse; }

    .bot-av {
      width: 26px; height: 26px; background: #1B3FE4; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-bottom: 2px;
    }

    .bubble {
      max-width: 242px; padding: 9px 13px;
      font-size: 13px; line-height: 1.55; color: #1F2937;
      background: #fff; border: 1px solid #E5E7EB;
      border-radius: 16px 16px 16px 4px;
      word-break: break-word;
    }
    .bubble.user-b {
      background: #1B3FE4; color: #fff; border: none;
      border-radius: 16px 16px 4px 16px;
    }
    .bubble strong { font-weight: 600; }

    .msg-meta { display:flex; align-items:center; gap:4px; margin-top:3px; padding:0 2px; }
    .msg-meta.user-m { flex-direction: row-reverse; }
    .msg-time { font-size: 10px; color: #9CA3AF; }

    /* metric card */
    .metric-card {
      margin-top: 9px; background: #F3F4F6;
      border: 1px solid #E5E7EB; border-radius: 10px; padding: 9px 11px;
    }
    .metric-item { margin-bottom: 9px; }
    .metric-item:last-child { margin-bottom: 0; }
    .metric-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
    .metric-name { font-size: 11.5px; color: #6B7280; font-weight: 500; }
    .metric-val { font-size: 12px; font-weight: 700; }
    .positive { color: #16A34A; } .warning { color: #D97706; }
    .bar-track { height: 5px; background: #E5E7EB; border-radius: 3px; overflow: hidden; }
    .bar-fill { height: 100%; border-radius: 3px; width: 0%; transition: width 1.1s cubic-bezier(0.4,0,0.2,1); }
    .g { background: #22C55E; } .o { background: #F59E0B; } .b { background: #3B82F6; }

    /* typing */
    .typing-bubble {
      background: #fff; border: 1px solid #E5E7EB;
      border-radius: 16px 16px 16px 4px;
      padding: 10px 14px; display: flex; gap: 5px; align-items: center;
    }
    .tdot {
      width: 6px; height: 6px; border-radius: 50%; background: #9CA3AF;
      animation: ta 1.4s infinite ease-in-out;
    }
    .tdot:nth-child(2){animation-delay:.2s} .tdot:nth-child(3){animation-delay:.4s}
    @keyframes ta { 0%,80%,100%{transform:translateY(0);opacity:.5} 40%{transform:translateY(-5px);opacity:1} }

    /* ══ QUICK CHIPS ══ */
    .quick-chips {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding: 8px 13px 9px;
      background: #F7F9FD; border-top: 1px solid #EEF0F5;
      flex-shrink: 0;
    }
    .chip {
      display: flex; align-items: center; gap: 5px;
      background: #fff; border: 1px solid #E0E4EF; border-radius: 20px;
      padding: 5px 11px; font-size: 11.5px; font-weight: 500; color: #374151;
      cursor: pointer; white-space: nowrap;
      transition: all 0.15s ease;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .chip:hover { background: #EEF2FF; color: #1B3FE4; border-color: #C7D2FE; }
    .chip:active { transform: scale(0.96); }
    .chip.used { opacity: 0.38; pointer-events: none; }
    .chip svg { flex-shrink: 0; }

    /* ══ INPUT ══ */
    .esi-input-row {
      display: flex; align-items: center; gap: 6px;
      padding: 10px 12px;
      background: #fff; border-top: 1px solid #F0F0F5;
      flex-shrink: 0;
    }
    .input-btn {
      background: none; border: none; cursor: pointer;
      padding: 5px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s; flex-shrink: 0;
    }
    .input-btn:hover { background: #F3F4F6; }
    .esi-input {
      flex: 1; border: none; outline: none;
      font-size: 13px; font-family: 'Plus Jakarta Sans', sans-serif;
      color: #111827; background: transparent; min-width: 0;
    }
    .esi-input::placeholder { color: #9CA3AF; }
    .send-btn {
      width: 34px; height: 34px; background: #1B3FE4;
      border: none; border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.15s, background 0.15s; flex-shrink: 0;
    }
    .send-btn:hover { background: #1432c2; transform: scale(1.07); }
    .send-btn:active { transform: scale(0.94); }

    /* ══ FOOTER ══ */
    .esi-footer {
      text-align: center; padding: 5px 0 7px;
      font-size: 10.5px; color: #9CA3AF;
      background: #fff; flex-shrink: 0;
      border-top: 1px solid #F5F5F8;
    }
    .esi-footer b { font-weight: 600; color: #1B3FE4; }

    .bubble {
      white-space: pre-wrap;
    }

    .email-bubble {
      width: min(190px, calc(100vw - 76px));
      max-width: none;
      padding: 10px;
      border-color: #DDE5F2;
      box-shadow: 0 8px 22px rgba(27, 63, 228, 0.08);
      white-space: normal;
    }

    .email-title {
      color: #111827;
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.35;
      margin-bottom: 4px;
    }

    .email-copy {
      color: #667085;
      font-size: 11px;
      line-height: 1.4;
      margin-bottom: 8px;
    }

    .email-row {
      display: grid;
      grid-template-columns: auto auto;
      gap: 6px;
      justify-content: start;
      align-items: center;
    }

    .email-input {
      grid-column: 1 / -1;
      width: 100%;
      height: 30px;
      min-width: 0;
      border: 1px solid #D7DDE8;
      border-radius: 8px;
      padding: 6px 8px;
      color: #111827;
      font: 500 11.5px 'Plus Jakarta Sans', sans-serif;
      line-height: 1.4;
      outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .email-input::placeholder {
      color: #9AA5B5;
      font-weight: 400;
    }

    .email-input:focus {
      border-color: #1B3FE4;
      box-shadow: 0 0 0 3px rgba(27, 63, 228, 0.12);
    }

    .email-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 50px;
      height: 28px;
      border: 0;
      border-radius: 8px;
      padding: 0 9px;
      font: 700 11px 'Plus Jakarta Sans', sans-serif;
      line-height: 1.4;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }

    .email-action:hover {
      transform: translateY(-1px);
    }

    .email-action:active {
      transform: translateY(0);
    }

    .email-action.primary {
      background: #1B3FE4;
      color: #fff;
      box-shadow: 0 4px 10px rgba(27, 63, 228, 0.18);
    }

    .email-action.primary:hover {
      background: #1432c2;
    }

    .email-action.secondary {
      background: #EEF2F8;
      color: #4B5C70;
    }

    .email-action.secondary:hover {
      background: #E3E9F2;
      color: #2F3B4B;
    }

    @media (max-width: 420px) {
      #esi-popup {
        right: 12px;
        bottom: 188px;
        width: calc(100vw - 24px);
      }

      #esi-fab {
        right: 18px;
      }
    }