.wa-workspace {
  display: grid;
  grid-template-columns: 52px minmax(300px, 29%) minmax(340px, 1fr) minmax(280px, 28%);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: #1e293b;
  font-family: Inter, sans-serif;
}
.wa-rail { display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 7px; border-right:1px solid #e5e7eb; background:#fff; }
.wa-rail button { position:relative; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:#8b95a3; font-size:18px; }
.wa-rail button:hover { background:#f1f4f7; color:#344054; }
.wa-rail button.is-active { background:#eaf1ff; color:#1877f2; }
.wa-rail b { position:absolute; right:-2px; top:-4px; min-width:16px; height:16px; padding:0 3px; border:2px solid #fff; border-radius:9px; background:#12b76a; color:#fff; font-size:9px; line-height:12px; }
.wa-workspace * { box-sizing: border-box; }
.wa-list-pane, .wa-chat-pane, .wa-profile-pane { min-width: 0; min-height: 0; }
.wa-list-pane { display: flex; flex-direction: column; border-right: 1px solid #e5e7eb; }
.wa-list-header { min-height: 69px; padding: 0 20px 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e7eb; }
.wa-list-header h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.wa-refresh { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #64748b; font-size: 26px; line-height: 1; }
.wa-refresh:hover { background: #f1f5f9; }
.wa-buckets { display: flex; gap: 3px; overflow-x: auto; padding: 9px 14px; border-bottom: 1px solid #e5e7eb; scrollbar-width: thin; }
.wa-buckets button { flex: none; padding: 7px 10px; border-radius: 8px; color: #667085; font-size: 13px; font-weight: 500; white-space: nowrap; }
.wa-buckets button:hover { background: #f1f5f9; }
.wa-buckets button.is-active { background: #eef5ff; color: #1473f9; font-weight: 600; }
.wa-search-wrap { display: flex; align-items: center; gap: 8px; height: 42px; margin: 12px 16px 8px; padding: 0 12px; border: 1px solid #d9dde4; border-radius: 9px; background: #f8f9fb; color: #9aa2ae; }
.wa-search-wrap:focus-within { border-color: #a6bfdc; background: #fff; }
.wa-search-wrap span { font-size: 22px; line-height: 1; }
.wa-search { width: 100%; background: transparent; border: 0; outline: none; color: #1e293b; font-size: 13px; }
.wa-search::placeholder { color: #9aa2ae; }
.wa-list-meta { min-height: 26px; padding: 2px 18px 7px; color: #9aa2ae; font-size: 11px; }
.wa-conversations { flex: 1; overflow-y: auto; min-height: 0; }
.wa-conversation { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 82px; padding: 12px 16px; border-bottom: 1px solid #e9ebef; text-align: left; background: #fff; }
.wa-conversation:hover { background: #f7f9fb; }
.wa-conversation.is-active { background: #eaf6ef; }
.wa-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #e7efff; color: #2a62e6; font-weight: 600; font-size: 15px; }
.wa-conversation-body { min-width: 0; flex: 1; }
.wa-conversation-top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.wa-conversation-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; }
.wa-conversation-top time { flex: none; color: #9aa2ae; font-size: 11px; }
.wa-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px; color: #7e8898; font-size: 12px; }
.wa-preview-row { display:flex; align-items:center; gap:7px; min-width:0; }
.wa-preview-row .wa-preview { flex:1; min-width:0; }
.wa-preview-row i { color:#d08b24; font-style:normal; }
.wa-preview-row b { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:10px; background:#12b76a; color:#fff; font-size:10px; }
.wa-conversation-body > small { display:block; margin-top:4px; color:#a0a7b2; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-list-loader { min-height:4px; display:grid; place-items:center; }
.wa-spinner { width:18px; height:18px; margin:8px; border:2px solid #dbe2ea; border-top-color:#2475ee; border-radius:50%; animation:wa-spin .7s linear infinite; }
@keyframes wa-spin { to { transform:rotate(360deg); } }
.wa-list-footer { padding: 0 16px; }
.wa-list-footer button { display: block; width: 100%; padding: 9px; margin: 7px 0; border: 1px solid #e1e4e9; border-radius: 8px; color: #536176; font-size: 12px; }
.wa-list-footer button:hover { background: #f8fafc; }
.wa-chat-pane { display: flex; flex-direction: column; border-right: 1px solid #e5e7eb; background: #fff; }
.wa-chat-header { display: flex; gap: 10px; align-items: center; min-height: 69px; padding: 10px 17px; border-bottom: 1px solid #e5e7eb; }
.wa-chat-header strong { display: block; font-size: 15px; line-height: 1.3; }
.wa-chat-header small { display: block; color: #8993a3; font-size: 12px; margin-top: 3px; }
.wa-chat-title { flex:1; min-width:0; }
.wa-assign { width:min(180px,25%); height:36px; padding:0 9px; border:1px solid #d8dde5; border-radius:8px; background:#fff; color:#596579; font-size:12px; }
.wa-header-action { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; color:#64748b; font-size:17px; }
.wa-header-action:hover { background:#f1f4f7; color:#1d2939; }
.wa-session-banner { min-height:22px; padding:4px 14px; border-bottom:1px solid #e5e7eb; text-align:center; font-size:10px; }
.wa-session-banner.is-open { background:#effbf5; color:#078c59; }
.wa-session-banner.is-template-only { background:#fff8ed; color:#b54708; }
.wa-avatar-small { width: 34px; height: 34px; }
.wa-back { display: none; color: #64748b; font-size: 27px; line-height: 1; padding: 3px 8px; }
.wa-messages { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
.wa-message { align-self: flex-start; max-width: min(85%, 440px); padding: 11px 13px 7px; border: 1px solid #e9ebef; border-radius: 15px 15px 15px 4px; background: #fff; box-shadow: 0 1px 3px #1018280c; }
.wa-message { position:relative; }
.wa-message-actions { position:absolute; top:-22px; right:2px; display:flex; gap:2px; padding:2px; border:1px solid #e4e7ec; border-radius:8px; background:#fff; box-shadow:0 4px 12px #10182818; opacity:0; pointer-events:none; transform:translateY(3px); transition:opacity .14s ease,transform .14s ease; }
.wa-message.is-outgoing .wa-message-actions { right:auto; left:2px; }
.wa-message:hover .wa-message-actions,.wa-message:focus-within .wa-message-actions { opacity:1; pointer-events:auto; transform:none; }
.wa-message-actions button { width:24px; height:22px; border-radius:5px; color:#667085; font-size:12px; }.wa-message-actions button:hover { background:#f1f4f7; }
.wa-message.is-outgoing { align-self: flex-end; border-color: #d6eee0; border-radius: 15px 15px 4px 15px; background: #e9f7ed; }
.wa-message-text { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; font-size: 13px; line-height: 1.5; }
.wa-message time { display: block; margin-top: 5px; color: #98a2b3; font-size: 10px; text-align: right; }
.wa-message footer { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:5px; color:#98a2b3; font-size:10px; }
.wa-message footer time { margin:0; }
.wa-message footer .is-read { color:#1688e8; }
.wa-message footer .is-failed,.wa-send-error { color:#d92d20; }
.wa-send-error { display:block; margin-top:5px; font-size:10px; }
.wa-reply-preview { display:flex; flex-direction:column; gap:2px; margin:-3px -3px 7px; padding:7px 8px; border-left:3px solid #27ae60; border-radius:6px; background:#ffffff9c; color:#667085; font-size:11px; }.wa-reply-preview span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}.wa-template-header{display:block;margin-bottom:5px;font-size:12px}.wa-template-footer{display:block;margin-top:7px;color:#7e8898}.wa-reaction-badge{position:absolute;bottom:-11px;left:8px;padding:1px 6px;border:1px solid #e3e7ec;border-radius:10px;background:#fff;font-size:12px;box-shadow:0 1px 3px #10182818}.wa-message.is-outgoing .wa-reaction-badge{right:8px;left:auto}.wa-retry-message{margin-left:5px;color:#175cd3;font-weight:600}
.wa-day { display:flex; align-items:center; justify-content:center; width:100%; margin:4px 0; }
.wa-day span { padding:4px 9px; border-radius:10px; background:#eef1f4; color:#7b8492; font-size:10px; }
.wa-load-older { align-self:center; padding:6px 12px; border:1px solid #d8dde5; border-radius:8px; color:#536176; font-size:11px; }
.wa-thread-skeleton { display:flex; flex-direction:column; gap:14px; }
.wa-thread-skeleton i { width:56%; height:56px; border-radius:14px; background:linear-gradient(90deg,#eef1f4,#f8fafc,#eef1f4); background-size:200% 100%; animation:wa-shimmer 1.2s infinite; }
.wa-thread-skeleton i:nth-child(even) { align-self:flex-end; width:48%; }
@keyframes wa-shimmer { to { background-position:-200% 0; } }
.wa-media-type { display: block; margin-bottom: 6px; color: #667085; font-size: 11px; font-weight: 600; text-transform: capitalize; }
.wa-attachment-name { margin-top: 5px; color: #667085; font-size: 11px; overflow-wrap: anywhere; }
.wa-media-image, .wa-media-video { display: block; width: min(100%, 230px); max-height: 320px; border-radius: 9px; object-fit: contain; background: #101014; }
.wa-media-image { object-fit: cover; background: #f4f5f7; }
.wa-media-audio { display: block; width: min(100%, 260px); }
.wa-media-document { display: block; max-width: 240px; overflow-wrap: anywhere; color: #2865c7; font-size: 12px; }
.wa-chat-footer { min-height: 66px; display:flex; align-items:center; padding:8px 12px; border-top:1px solid #e5e7eb; color:#98a2b3; font-size:12px; }
.wa-chat-footer { flex-direction:column; justify-content:center; }
.wa-composer-reply { display:flex; width:100%; align-items:center; justify-content:space-between; padding:5px 10px; border:1px solid #d9e6dc; border-bottom:0; border-radius:10px 10px 0 0; background:#f2faf5; color:#557061; font-size:10px; }.wa-composer-reply button{font-size:16px}
.wa-composer { display:flex; align-items:center; gap:4px; width:100%; min-height:46px; padding:4px 6px; border:1px solid #d9dde4; border-radius:15px; background:#f9fafb; }
.wa-composer button { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:9px; color:#667085; font-size:17px; }
.wa-composer button:hover:not(:disabled) { background:#edf0f3; color:#1d2939; }
.wa-compose-input { flex:1; min-width:0; max-height:90px; resize:none; border:0; outline:0; background:transparent; color:#1e293b; font:13px/1.45 Inter,sans-serif; }
.wa-compose-input:disabled { color:#9aa2ae; }
.wa-composer .wa-send:not(:disabled) { background:#f97316; color:#fff; box-shadow:0 1px 2px #0002; }
.wa-composer-note { width:100%; text-align:center; color:#b54708; }
.wa-profile-pane { overflow-y: auto; background: #fff; }
.wa-profile-pane header { padding: 28px 20px 22px; text-align: center; border-bottom: 1px solid #edf0f3; }
.wa-avatar-large { width: 60px; height: 60px; margin: 0 auto 10px; font-size: 22px; }
.wa-profile-pane h2 { margin: 0; font-size: 18px; font-weight: 650; }
.wa-profile-pane p { margin: 5px 0 0; color: #8b95a3; font-size: 13px; }
.wa-profile-pane dl { margin: 0; padding: 12px 21px; }
.wa-profile-pane dl div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f1f3; font-size: 13px; }
.wa-profile-pane dt { color: #8b95a3; }
.wa-profile-pane dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.wa-profile-tools { display:flex; flex-direction:column; gap:8px; padding:14px 20px 22px; border-top:1px solid #edf0f3; }.wa-profile-tools label{display:flex;flex-direction:column;gap:5px;color:#667085;font-size:11px}.wa-profile-tools input,.wa-profile-tools textarea{width:100%;padding:8px 9px;border:1px solid #d8dde5;border-radius:8px;background:#fff;color:#344054;font:11px/1.4 Inter,sans-serif}.wa-profile-tools textarea{min-height:62px;resize:vertical}.wa-profile-tools>button{align-self:flex-end;padding:6px 9px;border-radius:7px;background:#eef4ff;color:#175cd3;font-size:10px;font-weight:600}.wa-note-list{display:flex;flex-direction:column;gap:7px;margin-top:4px}.wa-note-list article{padding:8px;border-radius:8px;background:#f7f8fa;font-size:10px}.wa-note-list article strong{color:#475467}.wa-note-list article time{float:right;color:#98a2b3}.wa-note-list article p{clear:both;margin:5px 0 0;color:#667085;white-space:pre-wrap}
.wa-profile-empty, .wa-state { padding: 30px 20px; color: #98a2b3; font-size: 13px; text-align: center; }
.wa-state-error { color: #ad3940; }
.wa-state button { display: block; margin: 13px auto 0; padding: 7px 14px; border: 1px solid currentColor; border-radius: 8px; }
.wa-template-modal { position:absolute; inset:0; z-index:80; display:grid; place-items:center; padding:24px; background:#10182872; backdrop-filter:blur(2px); }
.wa-template-modal[hidden] { display:none; }
.wa-template-dialog { display:flex; flex-direction:column; width:min(620px,100%); max-height:min(720px,90vh); overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 24px 80px #10182838; }
.wa-template-dialog > header { display:flex; justify-content:space-between; gap:15px; padding:19px 20px; border-bottom:1px solid #e8ebef; }
.wa-template-dialog h2 { margin:0; font-size:18px; }.wa-template-dialog p { margin:4px 0 0; color:#7c8797; font-size:12px; }.wa-template-dialog header button { font-size:25px; color:#667085; }
.wa-template-search { display:flex; gap:8px; margin:14px 16px 8px; padding:9px 11px; border:1px solid #d8dde5; border-radius:9px; }.wa-template-search input { flex:1; border:0; outline:0; }
.wa-template-list { overflow-y:auto; padding:6px 16px 16px; }.wa-template-list > button { display:block; width:100%; margin-top:8px; padding:13px 14px; border:1px solid #e3e7ec; border-radius:11px; text-align:left; }.wa-template-list > button:hover { border-color:#a6c7f5; background:#f8fbff; }
.wa-template-list strong,.wa-template-list span,.wa-template-list small { display:block; }.wa-template-list span { margin-top:5px; font-size:12px; }.wa-template-list p { color:#596579; white-space:pre-wrap; }.wa-template-list small { color:#98a2b3; }
.wa-card-loading { display:flex; align-items:center; justify-content:center; gap:9px; height:100%; color:#8b95a3; font-size:12px; }
.wa-card-thread { position:relative; display:flex; flex-direction:column; height:100%; min-height:0; background:#fafbfc; }
.wa-card-session { display:flex; align-items:center; justify-content:space-between; flex:none; min-height:31px; padding:5px 12px; border-bottom:1px solid #e4e7ec; font-size:10px; }
.wa-card-session.is-open { background:#effbf5; color:#078c59; }.wa-card-session.is-template-only { background:#fff8ed; color:#b54708; }
.wa-card-session button { display:grid; width:24px; height:20px; place-items:center; border-radius:6px; font-size:17px; line-height:1; }
.wa-card-session button:hover { background:#fff4df; }
.wa-card-messages { display:flex; flex:1; flex-direction:column; gap:10px; min-height:0; overflow-y:auto; padding:12px; scrollbar-width:thin; }
.wa-card-messages > .wa-state { margin:auto; color:#a4acb8; }
.wa-card-messages .wa-message { max-width:88%; padding:9px 10px 6px; }
.wa-card-composer { flex:none; min-height:44px; margin:8px 10px 10px; border-radius:15px; background:#fff; }
.wa-card-composer > button { width:30px; height:30px; border-radius:8px; }
.wa-card-composer > button svg { pointer-events:none; }
.wa-card-composer .wa-card-send:not(:disabled) { background:#f1f3f5; color:#536176; box-shadow:none; }
.wa-card-composer .wa-card-send:disabled { color:#aeb5c0; }
.wa-card-composer textarea { flex:1; min-width:0; resize:none; border:0; outline:0; background:transparent; font:12px/1.4 Inter,sans-serif; }
.wa-card-composer textarea::placeholder { color:#a4acb8; }
.wa-card-error { flex:none; margin:0 10px 8px; color:#d92d20; font-size:10px; text-align:center; }
.wa-card-template-backdrop { position:absolute; inset:0; z-index:90; display:grid; place-items:center; padding:18px; background:rgba(16,24,40,.34); backdrop-filter:blur(1px); }
.wa-card-template-dialog { display:flex; width:min(420px,100%); max-height:min(580px,calc(100% - 28px)); flex-direction:column; overflow:hidden; border:1px solid #e4e7ec; border-radius:14px; background:#fff; box-shadow:0 20px 48px rgba(16,24,40,.2); }
.wa-card-template-dialog > header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid #e8ebef; }
.wa-card-template-dialog h2 { margin:0; color:#202838; font-size:15px; font-weight:650; }
.wa-card-template-dialog header p { margin:3px 0 0; color:#7c8797; font-size:11px; }
.wa-card-template-dialog header button { display:grid; width:28px; height:28px; flex:none; place-items:center; border-radius:7px; color:#667085; font-size:22px; line-height:1; }
.wa-card-template-dialog header button:hover { background:#f2f4f7; }
.wa-card-template-search { display:flex; min-height:36px; align-items:center; gap:8px; margin:12px 14px 6px; padding:0 10px; border:1px solid #d8dde5; border-radius:8px; color:#8b95a3; }
.wa-card-template-search:focus-within { border-color:#9dbce5; box-shadow:0 0 0 2px rgba(37,99,235,.08); }
.wa-card-template-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#344054; font-size:12px; }
.wa-card-template-list { min-height:80px; overflow-y:auto; padding:5px 14px 14px; }
.wa-card-template-list > button { display:block; width:100%; margin-top:7px; padding:11px 12px; border:1px solid #e4e7ec; border-radius:9px; color:#344054; text-align:left; }
.wa-card-template-list > button:hover { border-color:#a8c7ef; background:#f8fbff; }
.wa-card-template-list strong,.wa-card-template-list span,.wa-card-template-list small { display:block; }
.wa-card-template-list strong { font-size:12px; font-weight:650; }
.wa-card-template-list span { margin-top:4px; color:#596579; font-size:11px; }
.wa-card-template-list p { margin:6px 0; color:#667085; font-size:11px; line-height:1.4; white-space:pre-wrap; }
.wa-card-template-list small { color:#98a2b3; font-size:10px; }
.drawer-single-panel.is-whatsapp-view .drawer-bottom-action { display:none; }
@media (max-width: 1100px) { .wa-workspace { grid-template-columns:52px 320px minmax(300px,1fr); } .wa-profile-pane { display:none; } }
@media (max-width: 650px) {
  .wa-workspace { grid-template-columns:44px minmax(0,1fr); }
  .wa-rail { padding-inline:3px; }
  .wa-chat-pane { display: none; }
  .wa-workspace.is-chat-open { grid-template-columns:minmax(0,1fr); }
  .wa-workspace.is-chat-open .wa-rail,.wa-workspace.is-chat-open .wa-list-pane { display:none; }
  .wa-workspace.is-chat-open .wa-chat-pane { display:flex; }
  .wa-back { display: block; }
  .wa-assign { display:none; }
}

/* Uniting WhatsApp workspace parity */
.wa-workspace {
  grid-template-columns: var(--wa-list-width, 400px) 8px minmax(430px, 1fr) 8px var(--wa-profile-width, 511px);
  color: #202838;
}
.wa-resizer { position: relative; z-index: 8; width: 8px; cursor: col-resize; background: #fff; }
.wa-resizer::after { content:""; position:absolute; inset:0 3px; background:#e6e9ed; transition:background .15s ease; }
.wa-resizer:hover::after { background:#aab4c1; }
.wa-bucket-toolbar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  min-height: 52px;
  padding: 0 12px;
  border-bottom: 1px solid #e5e7eb;
}
.wa-bucket-toolbar button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: auto;
  border-radius: 10px;
  color: #7d8795;
  font-size: 20px;
}
.wa-bucket-toolbar button em { display:none; font-style:normal; }
.wa-bucket-toolbar svg { pointer-events:none; }
.wa-bucket-toolbar button:hover { background: #f4f6f8; color: #344054; }
.wa-bucket-toolbar button.is-active { background: #eaf0ff; color: #566176; }
.wa-bucket-toolbar b {
  position: absolute;
  top: -7px;
  right: -3px;
  min-width: 24px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 11px;
  background: #e6e9ed;
  color: #586272;
  font-size: 10px;
  line-height: 16px;
}
.wa-bucket-toolbar b:empty { display: none; }
.wa-search-wrap {
  flex: none;
  height: 40px;
  margin: 10px 12px 12px;
  border-color: #d6dbe3;
  border-radius: 9px;
  background: #f8f9fb;
}
.wa-search { font-size: 13px; }
.wa-conversation {
  position: relative;
  display: block;
  min-height: 72px;
  padding: 13px 18px;
  border-bottom-color: #e6e9ed;
}
.wa-conversation.is-active {
  z-index: 1;
  background: #effaf4;
  box-shadow: inset 0 0 0 1.5px #2878f0;
}
.wa-conversation-top,
.wa-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.wa-conversation-top strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 650;
}
.wa-conversation-top > span { display: flex; align-items: center; gap: 8px; flex: none; }
.wa-conversation-top time { color: #939cab; font-size: 11px; }
.wa-conversation-top b {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: #05bf61;
  color: #fff;
  font-size: 10px;
}
.wa-preview-row { margin-top: 6px; }
.wa-preview { margin: 0; color: #7f8999; font-size: 12px; }
.wa-preview-row small { flex: none; color: #27313f; font-size: 10px; font-weight: 600; }
.wa-preview-row small { display:flex; align-items:center; gap:4px; }
.wa-preview-row small i { width:5px; height:5px; border-radius:50%; background:#f97316; }
.wa-preview-row small.is-session i { background:#00c85e; }
.wa-preview-row i { flex: none; }
.wa-list-skeleton { overflow:hidden; }
.wa-list-skeleton i { display:block; height:72px; border-bottom:1px solid #e6e9ed; background:linear-gradient(90deg,#f4f6f8 20%,#fafbfc 40%,#f4f6f8 60%); background-size:200% 100%; animation:wa-shimmer 1.2s infinite; }
.wa-empty-state { display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:58px; }
.wa-empty-state span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#f1f3f6; color:#8b95a3; font-size:22px; }
.wa-empty-state strong { color:#475467; font-size:13px; }
.wa-empty-state small { font-size:11px; }
.wa-chat-header {
  position: relative;
  min-height: 52px;
  height: 52px;
  padding: 5px 12px;
  gap: 8px;
}
.wa-chat-title strong { font-size: 15px; }
.wa-chat-title small { margin-top: 0; font-size: 11px; }
.wa-chat-title { min-width:0; text-align:left; }
.wa-assign {
  width: min(266px, 42%);
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
}
.wa-menu-wrap { position: relative; flex: none; }
.wa-more {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #d7dce4;
  border-radius: 8px;
  color: #536071;
  font-size: 20px;
}
.wa-action-menu {
  position: absolute;
  z-index: 20;
  top: 42px;
  right: 0;
  width: 190px;
  padding: 6px;
  border: 1px solid #e1e5ea;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px #10182824;
}
.wa-action-menu button { display: block; width: 100%; padding: 8px 10px; border-radius: 7px; color: #344054; text-align: left; font-size: 12px; }
.wa-action-menu button:hover { background: #f4f6f8; }
.wa-messages { gap: 0; padding: 14px 16px; background: #fff; }
.wa-message-stack { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: auto; }
.wa-message { max-width: min(68%, 520px); border-radius: 16px 16px 16px 5px; box-shadow: 0 2px 7px #1018280d; }
.wa-message { touch-action:pan-y; transition:transform .16s ease, background-color .3s ease; }
.wa-message.is-highlighted { background:#fff3b8; }
.wa-message.is-outgoing { border-radius: 16px 16px 5px 16px; background: #effaf4; }
.wa-message-text code { padding:1px 4px; border-radius:4px; background:#e8ebef; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; }
.wa-message-text pre { overflow:auto; margin:6px 0; padding:8px; border-radius:7px; background:#1f2937; color:#fff; }
.wa-message-text pre code { padding:0; background:transparent; color:inherit; }
.wa-message-text blockquote { margin:4px 0; padding-left:8px; border-left:3px solid #98a2b3; color:#667085; }
.wa-message-text .wa-list-line { display:block; }
.wa-reply-preview { width:100%; border:0; text-align:left; }
.wa-media-preview { display:block; padding:0; }
.wa-day { margin: 8px 0 18px; }
.wa-day span { padding: 6px 14px; border: 1px solid #e5e8ec; border-radius: 16px; background: #fff; box-shadow: 0 2px 6px #1018280d; font-weight: 600; text-transform: uppercase; }
.wa-chat-footer { min-height: 66px; padding: 8px 12px 10px; background: #fff; }
.wa-composer { min-height: 48px; padding: 5px 7px; border-color: #d5dae2; border-radius: 16px; background: #f8f9fb; }
.wa-composer button { border-radius: 50%; }
.wa-composer .wa-send { background:#e9edf2; color:#9aa4b2; }
.wa-composer .wa-send:not(:disabled) { background: #f97316; color: #fff; box-shadow: 0 1px 2px #10182822; }
.wa-attach-wrap { position:relative; display:flex; }
.wa-attach-menu { position:absolute; z-index:25; bottom:42px; left:-8px; width:126px; padding:5px; border:1px solid #e1e5ea; border-radius:9px; background:#fff; box-shadow:0 12px 30px #10182824; }
.wa-attach-menu button { display:block; width:100%; height:auto; padding:7px 9px; border-radius:6px; text-align:left; font-size:11px; }
.wa-attach-menu button:hover { background:#f4f6f8; }
.wa-profile-pane { overflow: hidden; }
.wa-card-profile { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #fff; }
.wa-card-profile-header {
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 8px 12px;
  border-bottom: 0;
  text-align: left;
}
.wa-add-person { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: 10px; border: 1px dashed #cbd2da; border-radius: 50%; color: #8a95a4; font-size: 20px; }
.wa-card-profile-header > div { flex: 1; min-width: 0; }
.wa-card-profile-header > div { position:relative; }
.wa-card-profile-header h2 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; color: #1c2433; font-size: 16px; font-weight: 650; }
.wa-card-profile-header h2 button { color: #7f8998; font-size: 13px; }
.wa-profile-status { display:flex; align-items:center; gap:5px; margin-top:3px; color:#5e6878; font-size:11px; }
.wa-profile-status i { width:6px; height:6px; border:1.5px solid #162131; border-radius:50%; }
.wa-workflow-menu { position:absolute; z-index:30; top:47px; left:0; width:220px; max-height:310px; overflow:auto; padding:6px; border:1px solid #e1e5ea; border-radius:9px; background:#fff; box-shadow:0 14px 36px #10182824; }
.wa-workflow-menu > span { display:block; padding:9px; color:#98a2b3; font-size:11px; }
.wa-workflow-menu button { display:flex; align-items:center; gap:8px; width:100%; padding:8px; border-radius:7px; color:#475467; text-align:left; font-size:12px; }
.wa-workflow-menu button:hover { background:#f4f6f8; }
.wa-workflow-menu button i { width:7px; height:7px; border:1.5px solid #8b5cf6; border-radius:50%; }
.wa-card-profile-header nav { display: flex; gap: 8px; }
.wa-card-profile-header nav button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #344054; font-size: 17px; }
.wa-card-profile-header nav button:hover { background: #f1f4f7; }
.wa-card-accent { width:100%; height:2px; background:#d6f4e4; }
.wa-card-accent i { display:block; height:100%; min-width:39%; background:#20ca79; transition:width .25s ease; }
.wa-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.wa-metric { min-width: 0; min-height: 124px; overflow: hidden; border-radius: 16px; background: #f6f7f9; }
.wa-metric > div { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 14px 12px 0; color: #536071; font-size: 12px; font-weight: 600; }
.wa-metric > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-metric > strong { display: block; overflow: hidden; padding: 8px 12px 13px; text-overflow: ellipsis; white-space: nowrap; color: #131c2c; font-size: 15px; }
.wa-metric > footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 36px; padding: 9px 12px; border-top: 1px solid #e1e5e9; color: #697586; font-size: 10px; }
.wa-metric > footer span,
.wa-metric > footer b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-metric > footer b { color: #475467; font-weight: 600; }
.wa-metric-art { display:block; flex:none; width:34px; height:22px; color:#27c883; opacity:.9; }
.wa-metric-art svg { width:100%; height:100%; overflow:visible; }
.wa-metric-art path,.wa-metric-art circle { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.wa-metric-art.is-pink circle { fill:currentColor; stroke:none; }
.wa-metric-art.is-purple { color:#cabaff; }.wa-metric-art.is-yellow { color:#f6ce52; }.wa-metric-art.is-blue { color:#80b6ff; }.wa-metric-art.is-violet { color:#bca6ff; }.wa-metric-art.is-orange { color:#ffb542; }.wa-metric-art.is-cyan { color:#8dd5e6; }.wa-metric-art.is-mint { color:#7adcb7; }.wa-metric-art.is-pink { color:#ff9bd0; }
.wa-profile-notes { max-height: 180px; overflow-y: auto; padding: 0 12px; }
.wa-profile-notes article { margin-bottom: 7px; padding: 9px 10px; border-radius: 10px; background: #f7f8fa; font-size: 10px; }
.wa-profile-notes article strong { color: #475467; }.wa-profile-notes article time { float: right; color: #98a2b3; }.wa-profile-notes article p { clear: both; margin: 5px 0 0; color: #667085; white-space: pre-wrap; }
.wa-profile-spacer { display: flex; flex: 1; min-height: 30px; align-items: flex-end; justify-content: center; color: #a6afb9; }
.wa-profile-composer { display: flex; align-items: center; gap: 5px; flex: none; min-height: 52px; margin: 8px 12px 12px; padding: 4px 6px; border: 1px solid #d5dae2; border-radius: 16px; background: #fafbfc; }
.wa-profile-composer button { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border-radius: 50%; color: #475467; font-size: 16px; }
.wa-profile-composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #344054; font: 12px Inter, sans-serif; }
.wa-profile-composer .wa-profile-send { background: #e9edf2; color: #8b95a3; }
.wa-media-lightbox { position:absolute; z-index:100; inset:0; display:grid; place-items:center; padding:60px; background:#101828e8; }
.wa-media-lightbox[hidden] { display:none; }
.wa-media-lightbox > button { position:absolute; top:20px; right:24px; color:#fff; font-size:34px; }
.wa-media-lightbox > a { position:absolute; top:25px; left:24px; color:#fff; font-size:12px; }
.wa-media-lightbox img { max-width:90%; max-height:90%; object-fit:contain; }
.wa-media-lightbox iframe { width:min(900px,90%); height:90%; border:0; border-radius:10px; background:#fff; }
@media (max-width: 1280px) {
  .wa-workspace { grid-template-columns: minmax(320px, var(--wa-list-width, 400px)) 8px minmax(420px, 1fr); }
  .wa-profile-pane,.wa-resizer-profile { display: none; }
}
@media (max-width: 760px) {
  .wa-workspace { grid-template-columns: minmax(0,1fr); }
  .wa-resizer { display:none; }
  .wa-chat-pane { display: none; }
  .wa-workspace.is-chat-open .wa-list-pane { display: none; }
  .wa-workspace.is-chat-open .wa-chat-pane { display: flex; }
  .wa-back { display: block; }
  .wa-assign { display: none; }
  .wa-bucket-toolbar { display:flex; min-height:52px; gap:6px; overflow-x:auto; padding:6px 10px; }
  .wa-bucket-toolbar button { display:none; width:auto; height:34px; min-width:max-content; padding:0 10px; gap:6px; border:1px solid #e1e5ea; border-radius:17px; font-size:14px; }
  .wa-bucket-toolbar button[data-wa-bucket="open"],.wa-bucket-toolbar button[data-wa-bucket="unassigned"],.wa-bucket-toolbar button[data-wa-bucket="assigned_to_me"],.wa-bucket-toolbar button[data-wa-bucket="resolved"],.wa-bucket-toolbar button[data-wa-bucket="blocked"] { display:flex; }
  .wa-bucket-toolbar button em { display:block; font-size:10px; }
  .wa-bucket-toolbar button b { position:static; height:auto; min-width:0; padding:0; border:0; background:transparent; line-height:1; }
}