/* Canonical inbox layout. Mock and React live data use the same primitives. */
:is(.content.conversations-page,.conversations-surface){width:100%;max-width:1344px;margin:0 auto;padding:20px 32px 70px}
:is(.content.conversations-page,.conversations-surface).live-react-host{display:block;height:auto;min-height:calc(100dvh - 56px);overflow:visible}
.conversations-page .live-react-root,.conversations-page .live-react-root>.shell{height:auto;min-height:0}
:is(.content.conversations-page,.conversations-surface) .inbox-tabs{display:flex;gap:4px;padding:0;margin:0 0 20px;height:28px;flex:none}
:is(.content.conversations-page,.conversations-surface) .inbox-tabs :is(button,a){display:inline-flex;align-items:center;font-size:13px;line-height:20px;border:0;background:transparent;border-radius:8px;padding:4px 13px;color:#303030;text-decoration:none;font-weight:450}
:is(.content.conversations-page,.conversations-surface) .inbox-tabs .selected{background:#e4e4e4}
:is(.content.conversations-page,.conversations-surface) .convo-toolbar{padding:0;margin:0 0 20px;gap:8px;min-height:32px;flex:none}
:is(.content.conversations-page,.conversations-surface) .member-search{position:relative;margin:0 8px 0 0;padding:0;border:0;height:32px;display:block;flex:1}
:is(.content.conversations-page,.conversations-surface) .member-search .ui-icon{position:absolute;left:13px;top:8px;width:15px;height:15px;color:#999}
:is(.content.conversations-page,.conversations-surface) .member-search input{width:100%;height:32px;min-height:32px;border:1px solid #aaa;border-radius:7px;padding:6px 12px 6px 39px;background:#fff;outline-offset:2px;font-size:13px}
:is(.content.conversations-page,.conversations-surface) .inbox.convo-panels,:is(.content.conversations-page,.conversations-surface)>.convo-panels{display:grid;grid-template-columns:calc((100% - 48px)/4) minmax(0,1fr) calc((100% - 48px)/4);align-items:start;gap:16px;margin:0;border:0;background:transparent;overflow:visible;flex:none}
:is(.content.conversations-page,.conversations-surface) .convo-panels.unpopulated,:is(.content.conversations-page,.conversations-surface)>.convo-panels:not(.populated){grid-template-columns:calc((100% - 48px)/4) minmax(0,1fr) calc((100% - 48px)/4)}
:is(.content.conversations-page,.conversations-surface) .convo-panels :is(.convo-list,.convo-preview){width:100%;height:calc(100dvh - 280px);min-height:400px;border:1px solid #dedede;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 1px 2px #0000000e}
:is(.content.conversations-page,.conversations-surface) .convo-list{overflow-y:auto!important;scrollbar-gutter:stable}
:is(.content.conversations-page,.conversations-surface) .convo-panels .convo-item{width:100%;padding:8px 15px;border:0;border-bottom:1px solid #e8e8e8;border-radius:0;background:#fff;text-align:left;height:85px;color:inherit;font-size:14px}
:is(.content.conversations-page,.conversations-surface) .convo-panels .convo-item.selected{background:#eee}
.convo-item:hover{background:#f7f7f7!important}
.convo-draft-count{margin-left:7px;padding:0 8px;border-radius:8px;background:#e4e4e4;color:#555;font-size:12px}
:is(.content.conversations-page,.conversations-surface) .convo-item .item-text strong{flex-direction:column;align-items:flex-start;gap:0;line-height:20px}
.convo-item-title,.convo-channel-mark,.convo-draft-mark{display:inline-flex;align-items:center;flex:none}
.convo-item-title{gap:4px;max-width:100%}
.convo-manual-mark{width:20px;height:20px;flex:none;vertical-align:middle}
.convo-visitor-name{overflow:hidden;text-overflow:ellipsis}
.convo-channel-mark{position:relative}
.convo-channel-mark .convo-list-brand{width:18px;height:18px;margin:0;vertical-align:middle}
.convo-pdp-mark{transform:scale(1.8);clip-path:inset(23%)}
.convo-channel-mark .unread-dot{position:absolute;top:-2px;right:-2px;margin:0}
.convo-draft-mark,.convo-assignee-name small .ui-icon{color:#b45600;background:#ffe1be;border-radius:4px}
.convo-draft-mark .ui-icon,.convo-assignee-name small .ui-icon{width:14px;height:14px;vertical-align:middle}
.convo-assignee-name{min-width:0;text-align:left;flex:1}
.convo-assignee-name>span,.customer-card .convo-entry-url{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convo-assignee-name small{display:block;white-space:nowrap}
.convo-auto-note .ui-icon{width:16px;height:16px}
.convo-message-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.convo-message-meta.is-ai{justify-content:flex-start;flex-wrap:wrap;gap:4px 12px}
.convo-message-actions{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.convo-message-actions button{padding:0;border:0;background:none;color:#303030;font:inherit;line-height:inherit}
.convo-message-actions button:hover{text-decoration:underline}
.convo-receipt{display:inline-flex;color:#3c81f5}
.convo-receipt .ui-icon{width:20px;height:20px}
.convo-sentiment-badge{display:inline-block;padding:2px 8px;border-radius:8px;background:#0000000f;color:#616161;font-size:12px;line-height:16px}
.convo-draft-composer{flex:none;border-top:1px solid #e8e8e8;padding:12px 15px 12px}
.convo-draft-composer .convo-composer{padding:0;flex-direction:row;align-items:center;border:0;gap:8px}
.convo-draft-composer textarea{flex:1;min-width:0;height:80px;padding:0;resize:none;border:0;background:transparent;color:#303030;font-size:13px;line-height:20px}
.convo-draft-composer textarea:focus-visible{outline:2px solid #2678f4;outline-offset:2px}
.convo-draft-composer .convo-composer button{height:28px;padding:6px 12px;border-radius:8px;font-size:13px;line-height:13px;font-weight:600;box-shadow:inset 0 1px 0 #ffffff40,inset 0 -2px 0 #0007}
.convo-draft-composer label{display:flex;align-items:center;gap:8px;margin-top:8px;padding:4px 0;font-size:13px;line-height:20px}
.convo-draft-composer label input{margin:0;width:16px;height:16px;accent-color:#303030}
.convo-free{display:inline-flex;align-items:center;gap:4px;color:#064632;font-weight:600}
.convo-free-info{position:relative;display:inline-flex;color:#777;cursor:help}
.convo-free-info svg{width:18px;height:18px}
.convo-free-info [role="tooltip"]{
  display:none;position:absolute;z-index:2;top:100%;left:50%;transform:translateX(-50%);
  width:max-content;max-width:200px;padding:6px 8px;border-radius:6px;
  background:#303030;color:#fff;font-weight:400;text-align:center;white-space:normal;
}
.convo-free-info:is(:hover,:focus) [role="tooltip"]{display:block}
:is(.content.conversations-page,.conversations-surface) .convo-list-empty:empty{display:none}
:is(.content.conversations-page,.conversations-surface) .convo-preview{display:flex;flex-direction:column;min-width:0}
:is(.content.conversations-page,.conversations-surface) .convo-messages{flex:1;min-height:0;overflow:auto;margin-block:12px 16px;scrollbar-gutter:stable}
.convo-messages .convo-bubble{padding:12px;font-size:12px;line-height:20px}
.convo-messages .convo-bubble a{color:inherit;text-decoration:underline}
:is(.content.conversations-page,.conversations-surface) .unpopulated .convo-messages{display:grid;place-items:center}
.detail-assignee-wrap{position:relative}
.member-shell .assignee-display{width:100%;background:#fff;color:inherit;text-align:left;cursor:pointer}
.detail-assignee-wrap .detail-assignee-popover{position:absolute;top:100%;left:0;right:0;width:100%;z-index:15;border:1px solid #ddd;border-radius:8px;background:#fff;box-shadow:0 4px 12px #0002;padding:0;overflow:hidden}
.detail-assignee-wrap .detail-assignee-popover button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;border:0;background:#fff;border-radius:0;padding:12px;text-align:left;font-size:13px;line-height:18px}
.detail-assignee-wrap .detail-assignee-popover button:hover:not(:disabled){background:#f5f5f5}
.detail-assignee-wrap .detail-assignee-popover .convo-avatar{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:#3b82f6;color:#fff}
.detail-assignee-wrap .detail-assignee-popover button>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-assignee-wrap .detail-assignee-popover small{display:block;color:#666;font-size:12px;line-height:18px}
.content.conversation-detail-page.live-react-host{width:100%;max-width:1112px;margin:0 auto;padding:20px 32px 70px;height:auto;overflow:visible}
:is(.conversation-detail-page,.conversation-detail-surface) .inbox.is-detail{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;margin:0;background:transparent;border:0;overflow:visible}
:is(.conversation-detail-page,.conversation-detail-surface) .inbox.is-detail>.list{display:none}
:is(.conversation-detail-page,.conversation-detail-surface) .inbox.is-detail>.thread{width:auto;height:612px}
:is(.conversation-detail-page,.conversation-detail-surface) .is-detail .message-bubble{max-width:475px}
:is(.conversation-detail-page,.conversation-detail-surface) .is-detail .message-content{max-width:85%}
@media(max-width:900px){:is(.content.conversations-page,.conversations-surface){padding:20px}:is(.content.conversations-page,.conversations-surface) .convo-toolbar{flex-wrap:wrap}:is(.content.conversations-page,.conversations-surface) .member-search{flex-basis:100%;margin-right:0}:is(.content.conversations-page,.conversations-surface) .convo-panels.populated{grid-template-columns:minmax(150px,1fr) minmax(0,2fr)}:is(.content.conversations-page,.conversations-surface) .convo-details{grid-column:2}.content.conversation-detail-page.live-react-host{padding:20px}:is(.conversation-detail-page,.conversation-detail-surface) .inbox.is-detail{grid-template-columns:minmax(0,1fr) 210px}}
@media(max-width:640px){:is(.content.conversations-page,.conversations-surface){padding:16px}:is(.content.conversations-page,.conversations-surface) .inbox.convo-panels,:is(.content.conversations-page,.conversations-surface)>.convo-panels,:is(.content.conversations-page,.conversations-surface) .convo-panels.unpopulated,:is(.conversation-detail-page,.conversation-detail-surface) .inbox.is-detail{display:flex;flex-direction:column}:is(.content.conversations-page,.conversations-surface) .convo-panels>.convo-list{min-height:140px;height:auto;max-height:240px}:is(.content.conversations-page,.conversations-surface) .convo-panels>.convo-preview{height:520px}.convo-details{width:100%}:is(.conversation-detail-page,.conversation-detail-surface) .inbox.is-detail>.thread{height:520px;width:100%}.conversation-detail-page .conversation-aside{display:flex!important;width:100%}}

.content.conversations-page .conversations-surface,.content.conversation-detail-page .conversations-surface{padding:0;margin:0;max-width:none;min-height:0;overflow:visible}
#root.live-react-root>.shell>.workspace>.conversation-detail-surface{max-width:1112px;padding:20px 32px 70px}

.convo-search-clear{position:absolute;right:5px;top:2px;height:28px;width:28px;border:0;background:#fff;color:#666;border-radius:5px;font-size:18px}
.member-search:has(.convo-search-clear) input{padding-right:38px!important}
:is(.content.conversation-detail-page,.conversations-surface.conversation-detail-surface) .inbox.convo-panels.is-detail{grid-template-columns:minmax(0,1fr) 250px}
:is(.content.conversations-page,.conversations-surface,.content.conversation-detail-page) .convo-history-head{height:auto;min-height:56px;flex-shrink:0;flex-wrap:wrap}
@media(max-width:640px){:is(.content.conversation-detail-page,.conversations-surface.conversation-detail-surface) .inbox.convo-panels.is-detail{display:flex}}

html:has(.conversations-surface),html:has(.content.conversations-page){overflow-y:scroll}
body:has(.member-shell){margin:0}
.member-shell .assignee-display>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-shell .assignee-display .avatar{flex-shrink:0}
.topbar.visitor-topbar{justify-content:flex-start;gap:16px}
:is(.content.conversations-page,.conversations-surface) .convo-panels:is(.unpopulated,.populated):not(.is-detail)>:is(.convo-list,.convo-preview){height:calc(100dvh - 280px)}
@media(max-width:640px){:is(.content.conversations-page,.conversations-surface) .convo-panels>.conversation-aside{width:100%;min-width:0;max-width:100%}:is(.content.conversations-page,.conversations-surface) .convo-panels:is(.unpopulated,.populated):not(.is-detail)>.convo-list{height:auto;min-height:140px;max-height:240px}:is(.content.conversations-page,.conversations-surface) .convo-panels:is(.unpopulated,.populated):not(.is-detail)>.convo-preview{height:520px}}

@media(max-width:640px){
  :is(.content.conversations-page,.conversations-surface) .inbox-tabs{
    min-width:0;
    max-width:100%;
    height:auto;
    overflow-x:auto;
  }
  :is(.content.conversations-page,.conversations-surface) .inbox-tabs :is(button,a){
    flex:none;
    white-space:nowrap;
  }
  :is(.content.conversations-page,.conversations-surface) .convo-panels.populated:not(.is-detail)>.convo-list{
    min-height:0;
    max-height:140px;
  }
}