.fx-zap {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  transform-origin: center center;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #17202c;
  -webkit-font-smoothing: antialiased;
}
.fx-zap *, .fx-zap *::before, .fx-zap *::after { box-sizing: border-box; }
.fx-zap [hidden] { display: none !important; }
.fx-zap svg { display: block; flex: none; }
.fx-zap-browser { height: 48px; display: flex; align-items: center; gap: 25px; padding: 0 19px; background: #f7f8fa; border-bottom: 1px solid #e3e7ee; }
.fx-zap-browser-dots { display: flex; gap: 7px; }
.fx-zap-browser-dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #d7dbe2; }
.fx-zap-address { height: 29px; min-width: 366px; display: flex; align-items: center; padding: 0 13px; border: 1px solid #e4e8ee; border-radius: 7px; background: #fff; color: #6e7786; font-size: 13px; letter-spacing: -.01em; }
.fx-zap-lock { color: #9ba4b2; margin-right: 8px; }
.fx-zap-app { display: flex; height: calc(100% - 48px); background: #fff; }
.fx-zap-rail { width: 70px; flex: none; position: relative; display: flex; flex-direction: column; align-items: center; background: #f8f9fb; border-right: 1px solid #e5e9ef; }
.fx-zap-brand { width: 38px; height: 38px; display: grid; place-items: center; margin: 19px 0 42px; border: 1px solid #e8ebf0; border-radius: 11px; background: #fff; }
.fx-zap-brand img { width: 25px; height: 25px; }
.fx-zap-rail-nav { display: grid; gap: 13px; }
.fx-zap-rail-item { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #8a94a3; }
.fx-zap-rail-active { background: #fff; color: #f51359; box-shadow: 0 0 0 1px #e9edf2, 0 3px 9px rgba(20,33,55,.055); }
.fx-zap-rail-bottom { position: absolute; bottom: 20px; }
.fx-zap-list { width: 312px; flex: none; overflow: hidden; border-right: 1px solid #e5e9ef; background: #fff; }
.fx-zap-list-top { height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 23px; border-bottom: 1px solid #edf0f4; }
.fx-zap-workspace { display: flex; align-items: center; gap: 9px; font-size: 16px; letter-spacing: -.025em; }
.fx-zap-workspace svg { color: #8d97a4; margin-left: 13px; }
.fx-zap-workspace-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(100deg,#fa0069,#ff4400); color: white; font-weight: 700; font-size: 16px; }
.fx-zap-list-more { color: #818c9a; }
.fx-zap-list-heading { padding: 27px 22px 20px; }
.fx-zap-list-heading > div { display: flex; align-items: center; gap: 10px; }
.fx-zap-list-heading .fx-zap-h { margin: 0; font-size: 23px; line-height: 1.15; letter-spacing: -.05em; font-weight: 700; }
.fx-zap-list-count { padding: 3px 8px; border-radius: 20px; background: #f0f2f5; color: #687384; font-size: 12px; font-weight: 700; }
.fx-zap-list-heading p { margin: 8px 0 0; color: #8a93a1; font-size: 13px; }
.fx-zap-search { height: 40px; margin: 0 18px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid #e5e9ef; border-radius: 8px; color: #99a3af; font-size: 13px; }
.fx-zap-search kbd { margin-left: auto; border: 1px solid #e7eaf0; border-radius: 4px; padding: 2px 5px; color: #9da6b1; font-family: inherit; font-size: 11px; }
.fx-zap-list-tabs { height: 57px; display: flex; align-items: flex-end; gap: 23px; padding: 0 21px; border-bottom: 1px solid #edf0f4; white-space: nowrap; color: #9ba4b1; font-size: 13px; }
.fx-zap-list-tabs span, .fx-zap-list-tabs b { height: 35px; font-weight: 500; }
.fx-zap-list-tabs b { color: #202b3a; border-bottom: 2px solid #fa0069; }
.fx-zap-list-filter { height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 0 21px; color: #677386; font-size: 12px; font-weight: 600; }
.fx-zap-list-filter svg { color: #8994a2; }
.fx-zap-contacts { border-top: 1px solid #edf0f4; }
.fx-zap-contact { height: 88px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 18px; border-bottom: 1px solid #f0f2f5; }
.fx-zap-contact-selected { background: #f5f7fa; }
.fx-zap-avatar { position: relative; width: 41px; height: 41px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.fx-zap-avatar-blue { color: #31547b; background: #dbe9f7; }
.fx-zap-avatar-teal { color: #26736f; background: #d8efec; }
.fx-zap-avatar-slate { color: #516078; background: #e1e7ee; }
.fx-zap-avatar-sky { color: #376b94; background: #dbebf5; }
.fx-zap-avatar-steel { color: #4e6981; background: #dfe9f0; }
.fx-zap-avatar-sea { color: #327578; background: #ddf0ef; }
.fx-zap-channel { position: absolute; right: -4px; bottom: -5px; width: 19px; height: 19px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #fff; }
.fx-zap-channel-wa { color: #25d366; }
.fx-zap-channel-ig { color: #df4c73; }
.fx-zap-channel-mail { color: #6c8aaa; }
.fx-zap-contact-copy { min-width: 0; flex: 1; }
.fx-zap-contact-line { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.fx-zap-contact-line strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 650; }
.fx-zap-contact-line time { flex: none; color: #a1aab6; font-size: 10px; }
.fx-zap-contact-copy p { margin: 6px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #8d97a4; font-size: 11.5px; }
.fx-zap-chat { position: relative; min-width: 0; flex: 1; background: #f5f7fa; }
.fx-zap-chat-header { height: 79px; position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; border-bottom: 1px solid #e4e8ef; background: #fff; }
.fx-zap-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fx-zap-person .fx-zap-avatar { width: 42px; height: 42px; }
.fx-zap-person > div { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.fx-zap-person strong { font-size: 16px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.fx-zap-person-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #8a95a4; }
.fx-zap-online { width: 6px; height: 6px; border-radius: 50%; background: #26b577; }
.fx-zap-header-actions { display: flex; align-items: center; gap: 11px; }
.fx-zap-wa-label, .fx-zap-number { display: flex; align-items: center; white-space: nowrap; gap: 7px; height: 31px; padding: 0 10px; border: 1px solid #e4e9ef; border-radius: 7px; background: #fff; color: #566274; font-size: 12px; font-weight: 600; }
.fx-zap-wa-label svg { color: #25d366; }
.fx-zap-number { color: #586576; }
.fx-zap-number svg { margin-left: 2px; color: #98a2ad; }
.fx-zap-header-tool { color: #84909f; padding: 6px; }
.fx-zap-message-view { position: absolute; top: 79px; right: 0; bottom: 88px; left: 0; overflow: hidden; background: #f5f7fa; }
.fx-zap-thread { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; gap: 17px; padding: 27px 39px 22px; will-change: transform; }
.fx-zap-date { align-self: center; color: #8993a0; font-size: 11px; font-weight: 600; }
.fx-zap-date span { padding: 6px 14px; border-radius: 5px; background: #e9edf2; }
.fx-zap-message { position: relative; display: flex; max-width: 78%; font-size: 15px; line-height: 1.45; }
.fx-zap-received { align-self: flex-start; }
.fx-zap-outgoing { align-self: flex-end; }
.fx-zap-bubble { max-width: 100%; position: relative; padding: 12px 15px 22px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(26,42,62,.09); }
.fx-zap-outgoing .fx-zap-bubble { background: #d9fdd3; }
.fx-zap-time { position: absolute; right: 11px; bottom: 5px; color: #9ca5ae; font-size: 10px; line-height: 1; }
.fx-zap-bubble-footer { display: flex; align-items: center; gap: 3px; justify-content: flex-end; margin-top: 3px; margin-bottom: -16px; color: #7a8b86; font-size: 10px; }
.fx-zap-ticks { color: #7d9990; }
.fx-zap-ticks-blue { color: #53bdeb; }
.fx-zap-reaction { position: absolute; right: -5px; bottom: -15px; padding: 2px 5px; border: 2px solid #f5f7fa; border-radius: 11px; background: #fff; box-shadow: 0 1px 3px rgba(25,40,55,.13); font-size: 13px; line-height: 1.15; }
.fx-zap-audio { min-width: 420px; }
.fx-zap-audio .fx-zap-bubble { width: 100%; }
.fx-zap-audio-player { display: flex; align-items: center; gap: 12px; padding: 1px 1px 12px; }
.fx-zap-play { width: 33px; height: 33px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #e9edf1; color: #4c647a; }
.fx-zap-wave { height: 36px; display: flex; align-items: center; gap: 3px; flex: 1; }
.fx-zap-wave i { display: block; width: 3px; flex: 1; border-radius: 3px; background: #c9d3dc; }
.fx-zap-wave i.fx-zap-wave-played { background: #64af9f; }
.fx-zap-audio-length { font-size: 11px; color: #8e9aa6; }
.fx-zap-transcript { padding: 11px 0 4px; border-top: 1px solid #edf0f2; color: #697583; font-size: 13px; font-style: italic; }
.fx-zap-sent { max-width: 410px; }
.fx-zap-quote { max-width: 315px; }
.fx-zap-quoted { display: flex; flex-direction: column; gap: 2px; margin: -4px -6px 9px; padding: 7px 10px; border-left: 3px solid #67b88f; border-radius: 4px; background: #f0f2f3; color: #778390; font-size: 12px; }
.fx-zap-quoted strong { color: #42957c; font-size: 11px; }
.fx-zap-typing { position: absolute; z-index: 2; bottom: 99px; left: 39px; display: flex; align-items: center; gap: 4px; padding: 8px 11px; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(19,37,57,.08); color: #82909d; font-size: 11px; }
.fx-zap-typing i { width: 5px; height: 5px; border-radius: 50%; background: #8e9aa6; }
.fx-zap-typing span { margin-left: 4px; }
.fx-zap-automation { position: absolute; z-index: 2; right: 27px; bottom: 100px; left: 27px; height: 75px; display: flex; align-items: center; gap: 13px; padding: 0 17px; border: 1px solid #e3e8ee; border-radius: 10px; background: #fff; box-shadow: 0 5px 18px rgba(29,43,62,.07); }
.fx-zap-automation-icon { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid #e9edf1; border-radius: 8px; color: #fa0069; }
.fx-zap-automation > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fx-zap-automation strong { font-size: 12px; font-weight: 700; }
.fx-zap-automation div span { display: flex; align-items: center; gap: 5px; color: #718092; font-size: 11px; white-space: nowrap; }
.fx-zap-automation > svg { margin-left: auto; color: #a8b1bd; transform: rotate(-90deg); }
.fx-zap-composer { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; height: 88px; display: flex; align-items: center; gap: 11px; padding: 0 24px; border-top: 1px solid #e4e8ee; background: #fff; }
.fx-zap-composer-tool { color: #8b96a5; }
.fx-zap-compose-field { min-width: 0; flex: 1; height: 43px; display: flex; align-items: center; padding: 0 15px; border: 1px solid #e3e8ee; border-radius: 8px; color: #a2acb8; font-size: 13px; }
.fx-zap-compose-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-zap-compose-filled { color: #364251; }
.fx-zap-send-button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(100deg,#fa0069,#ff4400); color: #fff; }
.fx-zap-quick-menu { position: absolute; bottom: 76px; left: 60px; width: 332px; overflow: hidden; border: 1px solid #e3e8ee; border-radius: 9px; background: #fff; box-shadow: 0 12px 35px rgba(23,39,59,.15); }
.fx-zap-quick-heading { padding: 12px 14px 9px; border-bottom: 1px solid #eef1f4; color: #8793a2; font-size: 11px; font-weight: 600; }
.fx-zap-quick-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-bottom: 1px solid #f0f2f5; }
.fx-zap-quick-row:last-child { border-bottom: 0; }
.fx-zap-quick-row strong { color: #354152; font-size: 12px; }
.fx-zap-quick-row span { color: #9aa4b0; font-size: 11px; }
.fx-zap-quick-selected { background: #f4f6f9; }
.fx-zap-quick-selected strong { color: #ec155f; }
.fx-zap-compact .fx-zap-browser { height: 42px; padding: 0 13px; gap: 14px; }
.fx-zap-compact .fx-zap-browser-dots i { width: 8px; height: 8px; }
.fx-zap-compact .fx-zap-address { min-width: 0; height: 25px; font-size: 10px; flex: 1; }
.fx-zap-compact .fx-zap-app { height: calc(100% - 42px); }
.fx-zap-compact .fx-zap-chat-header { height: 82px; padding: 0 17px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; }
.fx-zap-compact .fx-zap-person .fx-zap-avatar { width: 34px; height: 34px; font-size: 11px; }
.fx-zap-compact .fx-zap-person strong { font-size: 15px; }
.fx-zap-compact .fx-zap-person-meta { display: none; }
.fx-zap-compact .fx-zap-header-actions { width: 100%; padding-left: 45px; gap: 6px; }
.fx-zap-compact .fx-zap-wa-label, .fx-zap-compact .fx-zap-number { height: 24px; padding: 0 7px; font-size: 10px; }
.fx-zap-compact .fx-zap-wa-label svg { width: 12px; height: 12px; }
.fx-zap-compact .fx-zap-number svg { width: 11px; height: 11px; }
.fx-zap-compact .fx-zap-header-tool { display: none; }
.fx-zap-compact .fx-zap-message-view { top: 82px; bottom: 68px; }
.fx-zap-compact .fx-zap-thread { gap: 10px; padding: 13px 15px 12px; }
.fx-zap-compact .fx-zap-message { max-width: 84%; font-size: 13px; }
.fx-zap-compact .fx-zap-bubble { padding: 8px 10px 20px; }
.fx-zap-compact .fx-zap-audio { min-width: 0; width: 79%; }
.fx-zap-compact .fx-zap-audio-player { gap: 7px; padding-bottom: 6px; }
.fx-zap-compact .fx-zap-play { width: 27px; height: 27px; }
.fx-zap-compact .fx-zap-wave { gap: 2px; }
.fx-zap-compact .fx-zap-wave i { width: 2px; }
.fx-zap-compact .fx-zap-transcript { font-size: 11px; padding-top: 7px; }
.fx-zap-compact .fx-zap-sent { max-width: 79%; }
.fx-zap-compact .fx-zap-quoted { font-size: 10px; margin-bottom: 6px; }
.fx-zap-compact .fx-zap-automation { left: 11px; right: 11px; bottom: 73px; height: 66px; padding: 0 10px; gap: 8px; }
.fx-zap-compact .fx-zap-automation-icon { width: 27px; height: 27px; }
.fx-zap-compact .fx-zap-automation strong { font-size: 11px; }
.fx-zap-compact .fx-zap-automation div span { font-size: 9px; }
.fx-zap-compact .fx-zap-typing { bottom: 75px; left: 15px; }
.fx-zap-compact .fx-zap-composer { height: 68px; padding: 0 13px; gap: 9px; }
.fx-zap-compact .fx-zap-compose-field { height: 37px; font-size: 11px; }
.fx-zap-compact .fx-zap-send-button { width: 35px; height: 35px; }
.fx-zap-compact .fx-zap-quick-menu { bottom: 58px; left: 14px; width: 290px; }
