/* Scaliffy Unified Inbox — ZIP design (scaliffy_unified_inbox_rebuild/frontend/inbox.css)
   Integrated into the existing SPA route app.html#clientDashboard/inbox.
   Keeps the cream/beige/terracotta design validated in the rebuild package. */
#esInboxView{
  --bg:#f7f0e5;
  --panel:#fffaf3;
  --soft:#f2e7d7;
  --border:#ded2c1;
  --text:#1d1b18;
  --muted:#746c63;
  --accent:#bb7968;
  --sc-accent:#bb7968;
  --sc-accent-soft:#ead0c7;
  --accent-soft:#f1dfd8;
  --black:#181715;
  --success:#477354;
  --shadow:0 14px 40px rgba(68,52,35,.08);
  --radius:22px;
  color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
}
#esInboxView *{box-sizing:border-box}
#esInboxView button,#esInboxView input,#esInboxView textarea{font:inherit}
#esInboxView button{cursor:pointer}
#esInboxView [hidden]{display:none!important}
#esInboxView .hidden{display:none!important}
#esInboxView .muted{color:var(--muted)}
#esInboxView .section-label{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
#esInboxView.is-active{display:flex!important;flex-direction:column;gap:0;height:calc(100dvh - 90px)!important;min-height:620px!important;padding:0!important;overflow:hidden!important}
#esInboxView .inbox-card{flex:1;min-height:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
#esInboxView .toolbar{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;background:rgba(255,250,243,.96)}
#esInboxView .search-wrap{min-width:250px;max-width:360px;flex:0 1 360px;border:1px solid var(--border);background:#fffdf9;border-radius:14px;height:42px;display:flex;align-items:center;padding:0 12px;gap:8px}
#esInboxView .search-wrap svg{width:17px;fill:none;stroke:var(--muted);stroke-width:1.8}
#esInboxView .search-wrap input{border:0;background:transparent;outline:0;width:100%;color:var(--text);font-size:13px}
#esInboxView .channel-tabs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
#esInboxView .channel-tabs::-webkit-scrollbar{display:none}
#esInboxView .tab{border:0;background:transparent;padding:9px 12px;border-radius:999px;color:var(--muted);white-space:nowrap;font-size:12px;font-weight:650}
#esInboxView .tab.active{background:var(--black);color:white}
#esInboxView .tab:hover:not(.active){background:var(--soft);color:var(--text)}
#esInboxView .head-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
#esInboxView .live-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--border);padding:9px 12px;border-radius:999px;background:var(--panel);font-size:12px;font-weight:700}
#esInboxView .live-pill span{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(71,115,84,.12)}
#esInboxView .live-pill.is-offline{color:#a05e50}
#esInboxView .live-pill.is-offline span{background:#a05e50;box-shadow:none}
#esInboxView .ghost-btn{width:38px;height:38px;border:1px solid var(--border);background:var(--panel);border-radius:12px;font-size:18px;color:var(--muted)}
#esInboxView .ghost-btn:hover{border-color:var(--accent);color:var(--text)}
#esInboxView .inbox-grid{display:grid;grid-template-columns:330px minmax(390px,1fr) 290px;flex:1;min-height:0}
#esInboxView .conversation-pane,#esInboxView .detail-pane{min-width:0;background:#fffdf9}
#esInboxView .conversation-pane{border-right:1px solid var(--border);display:flex;flex-direction:column}
#esInboxView .detail-pane{border-left:1px solid var(--border);overflow-y:auto}
#esInboxView .pane-title-row{height:42px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);text-transform:uppercase;font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--muted);flex:0 0 auto}
#esInboxView .count-badge{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--soft);display:grid;place-items:center;color:var(--text)}
#esInboxView .conversation-list{overflow-y:auto;flex:1;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9bba7 transparent}
#esInboxView .conversation-item{position:relative;width:100%;border:0;border-bottom:1px solid #eee4d7;background:transparent;text-align:left;padding:13px 14px;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;align-items:center;color:inherit}
#esInboxView .conversation-item:hover{background:#fbf5ec}
#esInboxView .conversation-item.active{background:var(--soft)}
#esInboxView .conversation-item.active:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
#esInboxView .avatar{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e9ddca;font-weight:800;font-size:12px;color:#51483f;overflow:hidden}
#esInboxView .avatar img{width:100%;height:100%;object-fit:cover}
#esInboxView .avatar-lg{width:38px;height:38px}
#esInboxView .avatar-xl{width:68px;height:68px;font-size:19px}
#esInboxView .conv-main{min-width:0}
#esInboxView .conv-top{display:flex;align-items:center;gap:6px;min-width:0}
#esInboxView .conv-name{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#esInboxView .channel-mini{font-size:8px;font-weight:900;letter-spacing:.08em;border:1px solid var(--border);padding:2px 4px;border-radius:5px;color:var(--muted);flex:0 0 auto}
#esInboxView .conv-preview{margin-top:5px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#esInboxView .conv-side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
#esInboxView .conv-time{font-size:10px;color:var(--muted)}
#esInboxView .unread-dot{min-width:19px;height:19px;border-radius:999px;background:var(--black);color:#fff;font-size:9px;display:grid;place-items:center;padding:0 5px}
#esInboxView .human-mark{width:8px;height:8px;border-radius:50%;background:var(--accent)}
#esInboxView .inbox-more{width:100%;height:38px;flex:0 0 auto;border:0;border-top:1px solid var(--border);background:var(--panel);color:var(--muted);font:700 10px/1 "JetBrains Mono",monospace;cursor:pointer}
#esInboxView .inbox-more:hover{color:var(--text);background:var(--soft)}
#esInboxView .chat-pane{min-width:0;background:#faf3e8;position:relative}
#esInboxView .empty-state{height:100%;display:grid;place-content:center;text-align:center;padding:40px;color:var(--muted)}
#esInboxView .empty-state h2{color:var(--text);font-size:18px;margin:12px 0 4px}
#esInboxView .empty-state p{font-size:13px;margin:0}
#esInboxView .empty-icon{margin:auto;width:48px;height:48px;border-radius:16px;background:var(--soft);display:grid;place-items:center;color:var(--accent);font-size:20px}
#esInboxView .chat-view{height:100%;display:grid;grid-template-rows:62px minmax(0,1fr) auto auto}
#esInboxView .chat-head{display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--border);background:rgba(255,250,243,.92);backdrop-filter:blur(10px);gap:12px}
#esInboxView .chat-person{display:flex;align-items:center;gap:10px;min-width:0}
#esInboxView .chat-name-line{display:flex;align-items:center;gap:7px;min-width:0}
#esInboxView .chat-name-line strong{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#esInboxView .chat-meta{font-size:10px;color:var(--muted);margin-top:2px}
#esInboxView .channel-badge{font-size:8px;font-weight:900;letter-spacing:.09em;border-radius:5px;padding:3px 5px;background:var(--soft);color:var(--muted);flex:0 0 auto}
#esInboxView .chat-actions{display:flex;align-items:center;gap:8px}
#esInboxView .state-pill{font-size:9px;text-transform:uppercase;letter-spacing:.09em;font-weight:900;padding:7px 9px;border-radius:999px;white-space:nowrap}
#esInboxView .state-pill.ai{color:var(--success);background:rgba(71,115,84,.1)}
#esInboxView .state-pill.human{color:#90513f;background:var(--accent-soft)}
#esInboxView .takeover-btn{border:1px solid var(--border);background:#fffaf3;border-radius:999px;padding:8px 12px;font-size:10px;font-weight:800;color:var(--text);white-space:nowrap}
#esInboxView .takeover-btn:hover{border-color:var(--accent)}
#esInboxView .messages{overflow-y:auto;padding:22px 20px 18px;display:flex;flex-direction:column;gap:8px;background-image:radial-gradient(rgba(187,121,104,.11) .7px,transparent .7px);background-size:16px 16px;scrollbar-width:thin;scrollbar-color:#c9bba7 transparent}
#esInboxView .msg-row{display:flex;max-width:78%;flex-direction:column}
#esInboxView .msg-row.in{align-self:flex-start}
#esInboxView .msg-row.out{align-self:flex-end}
#esInboxView .bubble{border:1px solid rgba(222,210,193,.9);padding:9px 11px;border-radius:15px;font-size:13px;line-height:1.42;box-shadow:0 2px 5px rgba(68,52,35,.03);word-break:break-word}
#esInboxView .msg-row.in .bubble{background:#fffdf9;border-bottom-left-radius:5px}
#esInboxView .msg-row.out .bubble{background:#eadccb;border-bottom-right-radius:5px}
#esInboxView .msg-row.human .bubble{background:#1d1b18;color:white;border-color:#1d1b18}
#esInboxView .msg-meta{font-size:8px;color:var(--muted);margin:4px 4px 0;display:flex;gap:5px;align-items:center}
#esInboxView .msg-row.out .msg-meta{justify-content:flex-end}
#esInboxView .ai-label{font-weight:900;letter-spacing:.08em;text-transform:uppercase}
#esInboxView .msg-state.failed{color:#c86958;font-weight:800}
#esInboxView .msg-retry{border:0;background:transparent;color:var(--accent);text-decoration:underline;padding:0;font:inherit;cursor:pointer}
#esInboxView .message-media{margin-top:7px;overflow:hidden;border-radius:12px;border:1px solid rgba(0,0,0,.07);background:#eee}
#esInboxView .message-media img,#esInboxView .message-media video{display:block;width:100%;max-height:300px;object-fit:cover}
#esInboxView .reel-card{width:220px;aspect-ratio:9/13;position:relative;background:linear-gradient(145deg,#211b18,#b27767);display:grid;place-items:center;color:white}
#esInboxView .reel-card:after{content:"▶";width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);backdrop-filter:blur(8px)}
#esInboxView .reel-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
#esInboxView .reel-card .reel-play{position:relative;z-index:1;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);backdrop-filter:blur(8px)}
#esInboxView .media-caption{padding:8px 9px;background:#fffdf9;color:var(--muted);font-size:10px}
#esInboxView .audio-card{display:flex;align-items:center;gap:8px;min-width:210px}
#esInboxView .audio-card audio{max-width:230px;height:32px}
#esInboxView .doc-card{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text)}
#esInboxView .doc-icon{width:32px;height:32px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-weight:800}
#esInboxView .takeover-notice{margin:0 14px 10px;border:1px solid #dfc7bc;background:#f4e5df;border-radius:12px;padding:9px 12px;display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#6d493d}
#esInboxView .composer{margin:0 14px 14px;border:1px solid var(--border);border-radius:17px;background:#fffdf9;display:flex;align-items:flex-end;padding:7px;gap:7px;box-shadow:0 6px 16px rgba(68,52,35,.05)}
#esInboxView .composer textarea{border:0;outline:0;background:transparent;resize:none;flex:1;min-height:34px;max-height:120px;padding:8px 5px;color:var(--text);font-size:13px}
#esInboxView .composer textarea:disabled{background:transparent;cursor:not-allowed;opacity:.6}
#esInboxView .composer-icon,#esInboxView .send-btn{width:36px;height:36px;border-radius:11px;border:0;display:grid;place-items:center}
#esInboxView .composer-icon{background:transparent;color:var(--muted);font-size:20px}
#esInboxView .send-btn{background:var(--black);color:white}
#esInboxView .send-btn svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.8}
#esInboxView .send-btn:disabled,#esInboxView .composer-icon:disabled{opacity:.45;cursor:not-allowed}
#esInboxView .detail-empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:12px;padding:25px}
#esInboxView .detail-view{padding:22px 18px}
#esInboxView .profile-block{text-align:center;padding:2px 0 20px;border-bottom:1px solid var(--border)}
#esInboxView .profile-block .avatar{margin:0 auto 10px}
#esInboxView .profile-block h3{font-size:15px;margin:0}
#esInboxView .profile-sub{font-size:10px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
#esInboxView .detail-section{padding:16px 0;border-bottom:1px solid var(--border)}
#esInboxView .detail-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:10px}
#esInboxView .detail-row span{color:var(--muted)}
#esInboxView .detail-row strong{font-size:10px;text-align:right;max-width:155px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#esInboxView .tags{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}
#esInboxView .tag{background:var(--soft);border-radius:999px;padding:6px 8px;font-size:9px;font-weight:700}
#esInboxView .tag button{border:0;background:transparent;padding:0 0 0 4px;color:var(--muted);font-size:10px}
#esInboxView .tag-input{width:100%;border:1px solid var(--border);background:#fffdf9;border-radius:10px;padding:7px 9px;font-size:11px;margin:4px 0 6px;outline:0;color:var(--text)}
#esInboxView .tag-input:focus{border-color:var(--accent)}
#esInboxView .text-btn{border:0;background:transparent;padding:4px 0;color:var(--accent);font-size:10px;font-weight:800}
#esInboxView .note-input{width:100%;border:1px solid var(--border);background:#fffdf9;border-radius:12px;resize:vertical;outline:0;padding:9px;font-size:11px;margin:9px 0 7px;color:var(--text)}
#esInboxView .note-input:focus{border-color:var(--accent)}
#esInboxView .secondary-btn{width:100%;border:1px solid var(--border);background:var(--soft);border-radius:10px;padding:8px;font-size:10px;font-weight:800}
#esInboxView .mobile-back{display:none;border:0;background:transparent;font-size:18px;color:var(--text)}
#esInboxView .load-older{align-self:center;border:1px solid var(--border);border-radius:999px;background:rgba(255,250,243,.92);color:var(--muted);padding:6px 10px;font:700 9px/1 "JetBrains Mono",monospace;cursor:pointer;margin:4px 0}
#esInboxView .date-separator{align-self:center;margin:12px 0 8px;padding:4px 8px;border:1px solid rgba(222,210,193,.75);border-radius:999px;background:rgba(255,250,243,.86);color:var(--muted);font:700 9px/1 "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.06em}
#esInboxView .inbox-error{padding:28px 20px;text-align:center;color:var(--muted);font-size:12px;line-height:1.7}
#esInboxView .inbox-error button{display:block;margin:12px auto 0;border:1px solid var(--border);border-radius:9px;background:var(--panel);padding:8px 12px;color:var(--text);font-size:11px;font-weight:700}
#esInboxView .inbox-skeleton{padding:14px;display:grid;gap:10px}
#esInboxView .inbox-skeleton span,#esInboxView .message-skeleton span{display:block;border-radius:12px;background:linear-gradient(90deg,#f1e7da 25%,#fbf5ed 42%,#f1e7da 58%);background-size:300% 100%;animation:esInboxShimmer 1.15s ease-in-out infinite}
#esInboxView .inbox-skeleton span{height:64px}
#esInboxView .message-skeleton{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:24px 20px}
#esInboxView .message-skeleton span{height:42px;width:62%}
#esInboxView .message-skeleton span:nth-child(2){align-self:flex-end;width:48%}
#esInboxView .message-skeleton span:nth-child(3){width:72%}
@keyframes esInboxShimmer{to{background-position:-300% 0}}
@media(max-width:1100px){
  #esInboxView .inbox-grid{grid-template-columns:300px minmax(390px,1fr)}
  #esInboxView .detail-pane{display:none}
}
@media(max-width:820px){
  #esInboxView.is-active{height:calc(100dvh - 66px)!important;min-height:0!important}
  #esInboxView .toolbar{flex-wrap:wrap;padding:10px;gap:8px}
  #esInboxView .search-wrap{min-width:0;max-width:none;flex:1 1 100%;order:1}
  #esInboxView .channel-tabs{order:2;flex:1 1 auto;width:100%}
  #esInboxView .head-actions{order:0;margin-left:auto}
  #esInboxView .inbox-grid{display:block;position:relative;height:100%}
  #esInboxView .conversation-pane,#esInboxView .chat-pane{position:absolute;inset:0}
  #esInboxView .chat-pane{display:none}
  #esInboxView .inbox-grid.chat-open .conversation-pane{display:none}
  #esInboxView .inbox-grid.chat-open .chat-pane{display:block}
  #esInboxView .mobile-back{display:block}
  #esInboxView .msg-row{max-width:88%}
  #esInboxView .channel-tabs{padding-bottom:2px}
  #esInboxView .conversation-item{height:76px}
}
@media(prefers-reduced-motion:reduce){#esInboxView .message-media img,#esInboxView .message-media video{transition:none}}
@media(prefers-reduced-motion:reduce){#esInboxView .inbox-skeleton span,#esInboxView .message-skeleton span{animation:none}}