:root{--sapphire:#087f70;--sapphire-dark:#07685e;--sapphire-soft:#e5f4ee;--line:#e2e8e6;--blue:#087f70;--blue-soft:#e5f4ee;--green:#087f70;--navy:#253b36}
body{background:#e6ebe8;margin:0;padding:0;color:#263c36}.app-shell{height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none;overflow:hidden;padding-bottom:0;background:#fff}.topbar{height:56px;background:var(--sapphire);padding:0 18px;gap:24px;border:0}.brand{min-width:198px;gap:10px}.brand-mark{background:#ffffff22;box-shadow:none;border:1px solid #ffffff44;color:#fff;border-radius:9px}.brand-name{font-size:18px;letter-spacing:-.5px}.module-nav{gap:7px;align-items:center}.module-tab{height:38px;padding:0 15px;color:#e0f0e9;border-radius:9px;font-size:13px}.module-tab.active{background:#005e53;color:#fff}.module-tab.active:after{display:none}.nav-count{background:#ffffff22;color:#fff}.topbar-actions{gap:12px}.sync-state{color:#d0e7de}.profile-button{color:#fff;font-size:12px}.topbar .icon-button{color:#fff;background:#ffffff10;border-radius:50%}
.workspace{height:calc(100% - 56px);grid-template-columns:58px 350px minmax(320px,1fr) 320px}.channel-rail{background:var(--sapphire);border:0;padding:8px 0;gap:5px;color:#fff}.page-rail-button{width:40px;height:40px;background:#ffffff18;border:1px solid #ffffff22;border-radius:8px;margin-bottom:3px}.page-rail-button:hover,.page-rail-button.has-page-filter{background:#005e53;color:#fff}.page-rail-mosaic{width:28px;height:28px;gap:2px}.page-rail-mosaic b{font-size:9px;background:#d8eee2;color:#086c5e}.page-rail-mosaic b:nth-child(2){background:#a8d8c0}.page-rail-mosaic b:nth-child(3){background:#c4dfce}.page-rail-mosaic b:nth-child(4){background:#8dc9b2}.page-rail-button>i{border-color:var(--sapphire);background:#f7cf69}.source-rail-filters summary{color:#d0e9df;width:40px;height:38px;border-radius:8px}.source-rail-filters[open] summary,.source-rail-filters summary:hover{color:#fff;background:#005e53}.rail-condition-filters{gap:5px;flex:1 1 0;padding:0 0 8px;overflow:auto;scrollbar-width:none}.rail-condition-filters button{width:40px;height:39px;flex:0 0 39px;border-radius:8px;color:#d2e8df;background:transparent;border:0}.rail-condition-filters button svg{width:21px;height:21px}.rail-condition-filters button:hover{background:#ffffff16;color:#fff}.rail-condition-filters button.selected{background:#005e53;color:#fff;box-shadow:none}.rail-condition-filters button:focus-visible,.page-rail-button:focus-visible{outline:2px solid #bdebd3;outline-offset:2px}.advanced-filters{position:absolute;bottom:14px;left:0;height:0;margin:0;width:100%}.advanced-filters summary{display:none!important}.advanced-filter-content{left:calc(100% + 9px);width:290px;bottom:0;border-radius:9px;box-shadow:0 8px 30px #173f3026;max-height:70vh}.advanced-filters[data-mode='phone'] .date-filter-section,.advanced-filters[data-mode='date'] .phone-filter-section{display:none}.advanced-filter-heading strong{font-size:13px}.filter-field>span{font-size:11px!important;color:#75867e}.advanced-filter-content .select-field,.advanced-filter-content .custom-date-range input{height:37px;font-size:12px}.filter-check-grid input{accent-color:var(--sapphire)}
.conversation-list{border-right:1px solid var(--line);border-top-left-radius:13px;overflow:hidden}.conversation-list .search-box{height:56px;flex-basis:56px;background:#fff;padding:10px 14px;border-bottom:1px solid var(--line);gap:8px}.search-box input{height:36px;font-size:13px}.search-box span{color:#8a9b92}.conversation-items{padding:0;background:#fff}.conversation-item{height:72px;padding:13px 14px;border-bottom:1px solid #edf0ed;gap:11px}.conversation-item .avatar{width:42px;height:42px;font-size:12px;background:#e1eee5;color:#51856b;box-shadow:0 0 0 2px #fff}.conversation-item.is-unread{background:#fff1f0}.conversation-item.is-unread .conversation-topline strong{color:#b96265}.conversation-item.active{background:#dcefe5;box-shadow:inset -3px 0 var(--sapphire)}.conversation-topline strong{font-size:13px;font-weight:600;color:#34463d}.conversation-time{font-size:10px;color:#93a299}.conversation-preview{font-size:12px;color:#819087;margin-top:5px}.conversation-pagination{border-top:1px solid var(--line);height:30px;color:#93a39a}.conversation-pagination button{border-color:#e5ebe6;color:#70887a}.list-footer{height:34px;color:#97a49d;border-top:1px solid #edf0ed;font-size:9px}
.thread-panel{background:#edf0ed;border-right:1px solid var(--line)}.thread-header{height:64px;background:#fff;padding:0 17px}.thread-person h2{font-size:14px;color:#30473a}.thread-person p{font-size:10px;color:#8d9d93}.thread-person .avatar{background:#e0eee5;color:#4c8368}.thread-actions .secondary-button{font-size:10px;border-color:#e2e9e4;color:#647c6d}.thread-actions .icon-button{color:#758b7e;background:transparent}.thread-meta{background:#fff;border-bottom:1px solid var(--line);min-height:37px;padding:4px 16px}.tag{background:#edf5ef;color:#5b8970}.resolve-button{color:#25785a;background:#eff8f1;border-color:#d7e9db}.messages{padding:22px 24px;gap:18px;background:#ecefeb}.message-bubble{font-size:13px;line-height:1.55;border:0;box-shadow:0 1px 1px #24382b15;background:#fff;color:#344b3c;border-radius:13px 13px 13px 3px;padding:11px 14px}.message-row.outgoing .message-bubble{background:#d5eedb;color:#294f37;border:0;border-radius:13px 13px 3px 13px}.message-meta{font-size:9px;color:#91a092}.message-row{max-width:85%}.message-avatar{background:#d7e4d9;color:#63816b}.day-divider{font-size:10px;color:#94a295}.day-divider:before,.day-divider:after{background:#dfe5df}.reply-tools{height:40px;padding:0 14px;background:#fdfefd;border-top:1px solid var(--line)}.quick-reply{font-size:10px;color:#778d7d;border-color:#e1e9e2;border-radius:5px}.reply-tools-label{font-size:8px;color:#9ba89e}.composer{min-height:100px;padding:14px 16px 10px;border-top:1px solid var(--line)}.composer textarea{font-size:13px;color:#3b5545}.send-button{background:var(--sapphire);box-shadow:none;border-radius:7px;padding:9px 16px;font-size:11px}.composer-tools button{color:#92a598}.send-hint{color:#a2afa5}
.customer-panel{background:#fff;border:0;overflow:auto}.panel-tabs{height:56px;border-bottom:1px solid var(--line)}.panel-tab{font-size:12px;color:#899c8e}.panel-tab.active{color:var(--sapphire)}.panel-tab.active:after{left:0;right:0;background:var(--sapphire);height:2px}.panel-content{padding:0 16px 16px}.customer-card{border:0;border-bottom:1px solid #e8eee8;border-radius:0;box-shadow:none;margin:0;padding:17px 0;background:transparent}.section-title h3{font-size:12px;color:#4c6655}.section-icon{background:#eef5f0;color:#6d977a;border-radius:6px}.detail-list{gap:12px}.detail-list dt{font-size:10px;color:#9ba99f}.detail-list dd{font-size:10px;color:#67806e}.customer-name-row strong{font-size:13px}.customer-id{font-size:9px}.customer-tags{border:0;padding-top:5px}.text-link{color:#508c6b;font-size:10px}.lead-stage,.next-task,.activity-entry,.followup-entry{border-radius:6px;background:#f5f8f4}.demo-banner{display:none}.sync-state i,.live-dot{background:#96d5ad;box-shadow:none}.page-filter-popover,.source-filter-popover{border:1px solid #e0e9e2;border-radius:9px;box-shadow:0 10px 32px #173d2924}.page-filter-popover{top:7px;left:calc(100% + 9px);width:320px;padding:15px}.page-filter-heading{color:#37523e;font-size:13px}.page-filter-search{background:#f4f7f4;border-radius:6px;height:40px}.page-filter-option.selected{background:#e4f3e9}.page-filter-group-title{color:#516d59}.source-picker-options .channel-rail-button.selected{background:#e5f4eb;border-color:#b9dcc7;color:var(--sapphire)}.page-filter-clear{border-color:#dde9e0;color:#6f8e79}.page-filter-clear:hover{background:#eff7f1;color:var(--sapphire)}.source-filter-popover{left:calc(100% + 9px);color:#47634f}.source-filter-popover .select-field{outline-color:#a2cfb4}
@media(max-width:1250px) and (min-width:951px){.workspace{grid-template-columns:56px 300px minmax(300px,1fr) 260px}.brand{min-width:160px}.module-tab{padding:0 9px}.customer-panel{position:static;transform:none}.thread-header{padding:0 12px}.thread-actions .secondary-button{padding:0 6px}.messages{padding:20px 15px}.message-row{max-width:90%}}
@media(max-width:950px){.workspace{grid-template-columns:54px 280px minmax(260px,1fr)}.customer-panel{position:fixed;top:64px;bottom:8px;right:8px;width:300px;z-index:5;transform:translateX(calc(100% + 8px));box-shadow:-8px 0 28px #173d2920}.customer-panel.mobile-open{transform:none}.mobile-panel-button{display:inline-flex}.brand{min-width:120px}.module-tab{padding:0 7px}.topbar{gap:12px}.sync-state{display:none}}
@media(max-width:700px){body{padding:4px}.app-shell{height:calc(100dvh - 8px);border-radius:10px}.workspace{grid-template-columns:44px minmax(170px,42%) 1fr!important;height:calc(100% - 102px)}.topbar{height:56px;padding:0 10px}.module-nav{bottom:4px;left:4px;right:4px;height:46px;background:var(--sapphire);border:0}.module-tab{font-size:10px;height:34px}.conversation-item{padding:11px 8px}.conversation-item .avatar{width:32px;height:32px}.conversation-preview{font-size:11px}.conversation-topline strong{font-size:12px}.rail-condition-filters button,.source-rail-filters summary{width:34px}.page-rail-button{width:34px;height:38px}.page-rail-mosaic{width:25px;height:25px}.brand-name{font-size:15px}.page-filter-popover{width:min(310px,calc(100vw - 59px))}.thread-header{padding:0 8px}.messages{padding:15px 9px}.message-bubble{font-size:12px}.customer-panel{top:60px;bottom:50px}.thread-actions .secondary-button{font-size:9px}}
/* Product channels combine connected Pages without changing their messaging identity. */
.channels-view{height:calc(100% - 56px);overflow:auto;background:#f3f7f4;padding:25px 30px 40px;color:#314b3a}.channels-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 0 16px}.channels-heading h1{font-size:23px;letter-spacing:-.5px;margin:4px 0 8px}.channels-heading p:not(.eyebrow){margin:0;color:#819387;font-size:12px}.channel-primary,.channel-secondary{height:37px;padding:0 15px;border:0;border-radius:7px;font:600 12px var(--ui-font);cursor:pointer;white-space:nowrap}.channel-primary{background:var(--sapphire);color:white}.channel-secondary{background:#f1f6f2;color:#6b8573}.channel-primary:disabled,.channel-secondary:disabled{opacity:.45;cursor:default}.channel-storage-status{font-size:11px;line-height:1.5;color:#83968a;margin:0 0 20px}.channel-section{background:#fff;border:1px solid #e3ebe5;border-radius:12px;padding:20px;margin-bottom:20px}.channel-section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.channel-section h2{font-size:14px;margin:0}.channel-section h2>span{font-size:10px;background:#eff6f1;padding:3px 6px;border-radius:6px;margin-left:6px}.channel-section-heading>span{color:#8b9e90;font-size:11px}.channel-section-note{font-size:11px;line-height:1.6;color:#8b9c90;margin:6px 0 14px}.chat-group-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.chat-group-card{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px;padding:16px;border:1px solid #e4ece6;border-radius:9px;background:#fcfefd}.chat-group-copy{min-width:0;flex:1}.chat-group-copy h3{margin:0 0 5px;font-size:14px;overflow-wrap:anywhere}.chat-group-copy p{font-size:11px;color:#83958a;margin:0 0 5px}.chat-group-copy small{font-size:10px;color:#92a397}.chat-group-card-actions{display:flex;align-items:center;gap:10px;width:100%;padding-top:8px;border-top:1px solid #edf3ee}.chat-group-card-actions button{padding:3px 0;background:none;border:0;color:#799484;font:500 10px var(--ui-font);cursor:pointer}.chat-group-card-actions button:first-child{margin-right:auto;color:var(--sapphire)}.channels-columns{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:start}.group-mosaic{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:2px;width:44px;height:44px;flex:0 0 44px;overflow:hidden;border-radius:6px;background:#eef6f0}.group-mosaic b,.page-rail-mosaic b{display:grid;place-items:center;font-size:11px;border-radius:2px;background:#c7e1d1;color:#4b8061}.group-mosaic b:only-child,.page-rail-mosaic b:only-child{grid-area:1/1/3/3;font-size:20px}.group-mosaic .mosaic-instagram,.page-rail-mosaic .mosaic-instagram{background:#eddce7;color:#a57996}.connected-platform{padding:7px 0 17px;border-bottom:1px solid #edf2ee}.connected-platform:last-child{border-bottom:0;padding-bottom:0}.connected-platform h3{display:flex;align-items:center;gap:8px;font-size:12px}.connected-platform h3 small{margin-left:auto;color:#92a197;font-weight:400;font-size:10px}.connected-pages{display:grid;gap:8px}.connected-pages article{display:flex;align-items:center;gap:10px;padding:9px;background:#f8fbf9;border-radius:7px}.connected-page-avatar{display:grid;place-items:center;width:34px;height:34px;background:#e3efe6;color:#6a9479;border-radius:6px;font-size:13px}.connected-pages article>div{display:grid;gap:4px;flex:1;min-width:0}.connected-pages strong{font-size:11px;font-weight:500;overflow-wrap:anywhere}.connected-pages small{font-size:9px;color:#95a399}.connected-pages button{border:0;background:transparent;color:#508d6b;cursor:pointer;font:500 10px var(--ui-font)}.channel-editor form{display:grid;gap:15px;margin-top:20px}.channel-editor form>label{display:grid;gap:7px;font-size:11px;color:#6f8777}.channel-editor input:not([type=checkbox]),.channel-editor select{width:100%;height:38px;border:1px solid #e0e9e3;border-radius:6px;padding:0 10px;font:12px var(--ui-font);color:#405b49;background:#fff;outline-color:#a3cfb5}.group-member-heading{display:flex;justify-content:space-between;gap:12px;font-size:11px}.group-member-heading span{color:#8d9f92;font-size:10px}.group-member-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}.group-member-choices{display:grid;gap:4px;max-height:260px;overflow:auto}.group-member-choice{display:flex;align-items:center;gap:10px;padding:9px;border-radius:6px;background:#f8fbf9;cursor:pointer}.group-member-choice input{accent-color:var(--sapphire);margin:0}.group-member-choice>span:last-child{display:grid;gap:4px}.group-member-choice strong{font-weight:500;font-size:11px}.group-member-choice small{font-size:9px;color:#93a398}.group-member-choice:has(input:checked){background:#e8f5ec}.group-form-actions{display:flex;justify-content:flex-end;gap:8px}.group-form-error{color:#bd6261;font-size:11px;line-height:1.5;min-height:16px;margin:0}.channel-manager-empty{padding:24px 10px;font-size:12px;color:#8c9e90;line-height:1.7}.group-filter-options{border-bottom:1px solid #edf2ee;padding-bottom:10px;margin-bottom:5px}.merged-title{color:#527b61;padding-top:5px}.merged-channel-option{display:flex;width:100%;align-items:center;gap:11px;text-align:left;border:0;border-radius:7px;padding:9px 8px;background:transparent;color:#3f5847;cursor:pointer}.merged-channel-option:hover,.merged-channel-option.selected{background:#edf6f0}.merged-channel-option>span:nth-child(2){display:grid;gap:5px;flex:1;min-width:0}.merged-channel-option strong{font-size:13px;font-weight:500;overflow-wrap:anywhere}.merged-channel-option small{color:#8c9e91;font-size:10px}.merged-channel-option i{font-style:normal;color:var(--sapphire)}.channel-picker-empty{font-size:11px;color:#98a69d;line-height:1.6;margin:8px}.page-filter-manage{margin-top:7px;width:100%;border:0;background:#edf7f0;color:#40855b;font:500 11px var(--ui-font);padding:11px;border-radius:6px;cursor:pointer}.page-filter-popover{max-height:calc(100dvh - 94px);overflow:auto}.page-filter-options{max-height:240px}.page-filter-popover .source-picker-options{margin-bottom:9px;padding-bottom:9px}.module-tab{padding-left:11px;padding-right:11px}.brand{min-width:150px}
.platform-connection-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.platform-connection-card{min-width:0;padding:15px;border:1px solid #e3ebe5;border-radius:9px;background:#fcfefd}.platform-connection-head{display:flex;align-items:flex-start;gap:10px}.platform-connection-icon{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:8px;background:#e7f0e9;color:#0b6047;font-size:15px;font-weight:700}.platform-connection-title{min-width:0;flex:1}.platform-connection-title h3{margin:0 0 4px;font-size:12px}.platform-connection-title p,.platform-connection-copy,.platform-connection-error{margin:0;color:#758a7b;font-size:10px;line-height:1.55}.platform-state{flex:none;padding:4px 7px;border-radius:999px;background:#eef2ee;color:#66796b;font-size:9px;font-weight:600}.platform-state.is-connected{background:#dcefe2;color:#17603e}.platform-state.is-ready{background:#f5efd9;color:#6a592c}.platform-state.is-unavailable{background:#f1f2f1;color:#657368}.platform-connection-action{display:flex;align-items:center;gap:8px;margin-top:12px}.platform-connect-button,.platform-link-save,.platform-disconnect-button{min-height:32px;padding:0 10px;border:1px solid #cedbd1;border-radius:6px;background:#f3f7f4;color:#315a43;font:600 10px var(--ui-font);cursor:pointer}.platform-connect-button{border-color:#0b6047;background:#0b6047;color:#fff}.platform-connect-button:hover,.platform-link-save:hover{filter:brightness(.94)}.platform-connect-button:disabled,.platform-link-save:disabled,.platform-disconnect-button:disabled{opacity:.45;cursor:not-allowed}.platform-assets{display:grid;gap:5px;margin:12px 0 0;padding-top:10px;border-top:1px solid #e8eee9}.platform-assets-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#526a59;font-size:10px;font-weight:600}.platform-asset-choice{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 8px;border-radius:6px;background:#f3f7f4;cursor:pointer}.platform-asset-choice input{accent-color:#0b6047;margin:0}.platform-asset-choice>span{display:grid;gap:3px;min-width:0;flex:1}.platform-asset-choice strong{font-size:10px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.platform-asset-choice small{font-size:9px;color:#758a7b}.platform-setup-guide{margin-top:13px;padding-top:10px;border-top:1px solid #e8eee9;color:#536b5b;font-size:10px;line-height:1.6}.platform-setup-guide summary{width:max-content;cursor:pointer;font-weight:600;color:#315a43}.platform-setup-guide p{margin:8px 0 0}.platform-setup-guide code{border-radius:3px;background:#eff4f0;padding:1px 4px}
@media(max-width:1100px){.channels-columns{grid-template-columns:1fr 1fr}.platform-connection-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.channels-view{padding:20px}.channels-heading h1{font-size:20px}.module-tab{font-size:11px;padding:0 7px}.module-nav{gap:4px}.topbar{gap:12px}.brand{min-width:125px}.topbar-actions{gap:5px}.sync-state{display:none}}
@media(max-width:760px){.channels-columns{grid-template-columns:1fr}.platform-connection-cards{grid-template-columns:1fr}.channels-heading{align-items:flex-start}.channels-heading h1{font-size:18px}.channels-heading p:not(.eyebrow){font-size:11px}.channels-view{height:calc(100% - 102px);padding:16px}.channel-section{padding:15px}.channels-heading .channel-primary{font-size:10px;padding:0 10px}.module-tab{font-size:9px;padding:0 5px}}

/* ==================== PANCAKE CONVERSATION ENHANCEMENTS ==================== */
/* 1. Conversation Item Badges (Red Box 1) */
.conversation-items .conversation-item {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  position: relative !important;
  min-height: 72px !important;
  height: auto !important;
}
.conversation-item .conversation-copy {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.conversation-pancake-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  padding-left: 4px !important;
}
.conversation-phone-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.35);
}
.conversation-phone-badge:hover {
  background: #059669;
  transform: scale(1.12);
}
.conversation-phone-badge svg {
  display: block;
}
.conversation-channel-badge {
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.conversation-channel-badge.channel-inbox {
  color: #0084ff;
}
.conversation-channel-badge.channel-comment {
  color: #f97316;
}

/* 2. Top Thread Header Actions (Red Box 2) */
.thread-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.thread-action-divider {
  width: 1px;
  height: 20px;
  background: #d8e2dc;
  margin: 0 3px;
  display: inline-block;
}
.thread-action-btn {
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #dbe6e0;
  background: #fff;
  color: #4c6655;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.thread-action-btn svg {
  display: block;
  stroke: currentColor;
}
.thread-action-btn:hover {
  background: #eef6f1;
  color: #087f70;
  border-color: #b9d8c6;
}
.thread-action-btn.active {
  background: #e5f4ee;
  color: #087f70;
  border-color: #087f70;
}
#assignButton {
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 0 10px;
}

/* Toggle Customer Panel (Pancake "i" button) */
#inboxView.customer-panel-collapsed {
  grid-template-columns: 58px 350px 1fr !important;
}
#inboxView.customer-panel-collapsed .customer-panel {
  display: none !important;
}

/* 3. Bottom Composer Toolbar & Tools (Red Box 3) */
.reply-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 42px;
  background: #fdfefd;
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.reply-tools::-webkit-scrollbar {
  display: none;
}
.reply-tools-label {
  font-size: 8px;
  letter-spacing: 0.8px;
  font-weight: 700;
  color: #8c9e92;
  white-space: nowrap;
}
.pancake-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.pancake-tag.tag-blue {
  background: #eef5ff;
  color: #1d68d8;
  border-color: #cde0ff;
}
.pancake-tag.tag-blue:hover {
  background: #deecff;
  border-color: #a8cdff;
}
.pancake-tag.tag-amber {
  background: #fff8eb;
  color: #b45309;
  border-color: #fde68a;
}
.pancake-tag.tag-amber:hover {
  background: #ffeed0;
  border-color: #fcd34d;
}
.pancake-tag.tag-green {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}
.pancake-tag.tag-green:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}
.pancake-tag.tag-purple {
  background: #f5f3ff;
  color: #7c3aed;
  border-color: #ddd6fe;
}
.pancake-tag.tag-purple:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
}
.pancake-tag.tag-red {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.pancake-tag.tag-red:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
.pancake-tag.tag-gray {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #e5e7eb;
}
.pancake-tag.tag-gray:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}
.quick-reply-hint {
  font-size: 10px;
  color: #8fa397;
  background: #f2f7f4;
  border: 1px dashed #cadcd2;
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
  margin-left: auto;
}

/* Voice Recorder Bar */
.composer-voice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin-bottom: 8px;
}
.voice-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  animation: voicePulse 1s infinite alternate;
}
@keyframes voicePulse {
  0% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.25); opacity: 1; }
}
.voice-timer {
  font-weight: 700;
  font-size: 12px;
  color: #dc2626;
  font-variant-numeric: tabular-nums;
}
.voice-status-text {
  font-size: 11px;
  color: #991b1b;
  flex: 1;
}
.voice-btn {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
}
.voice-cancel {
  background: #fff;
  color: #6b7280;
  border: 1px solid #d1d5db;
}
.voice-send {
  background: #dc2626;
  color: #fff;
}

/* Composer Bottom 7 Tools */
.composer-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}
.composer-tool-btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #5c7467;
  transition: background 0.15s, color 0.15s;
}
.composer-tool-btn svg {
  display: block;
  stroke: currentColor;
}
.composer-tool-btn:hover {
  background: #eaf3ed;
  color: #087f70;
}
.send-group .send-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  font-weight: 600;
}

/* Rich Message Bubble Types */
.message-voice-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.message-voice-note .voice-note-icon {
  font-size: 18px;
}
.message-attachment-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f4f8f5;
  border-radius: 8px;
  border: 1px solid #dce8e1;
}
.message-attachment-file .file-icon {
  font-size: 20px;
}
.message-attachment-file .file-details strong {
  display: block;
  font-size: 12px;
  color: #273e34;
}
.message-attachment-file .file-details small {
  font-size: 10px;
  color: #778f82;
}
.message-product-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #dce8e1;
  border-radius: 8px;
  margin: 6px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.product-card-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #eef6f1;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex: 0 0 auto;
}
.product-card-details strong {
  font-size: 12px;
  display: block;
  color: #273e34;
}
.product-card-sku {
  font-size: 10px;
  color: #799184;
  display: block;
}
.product-card-price {
  font-size: 12px;
  font-weight: 700;
  color: #087f70;
  display: block;
}
.sticker-bubble {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
}
.sticker-tag-bubble {
  display: inline-block;
  padding: 8px 14px;
  background: #e7f5ee;
  border: 1px solid #a8dcbf;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #0c614b;
}

/* Modals & Popovers for Pancake Features */
.canned-cat-chip {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid #dce8e1;
  background: #fff;
  color: #5c7467;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.canned-cat-chip.active {
  background: #087f70;
  color: #fff;
  border-color: #087f70;
}
.sticker-card-btn:hover {
  background: #eef6f1 !important;
  border-color: #a8dcbf !important;
  transform: translateY(-2px);
}