/* ============ Section styles (7): Omnichannel inbox demo ============ */

.inbox{margin-top:44px; background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-line); border-radius:20px; box-shadow:var(--sh-3), var(--glass-inset); overflow:hidden}
.inbox-grid{display:grid; grid-template-columns:288px minmax(0,1fr) 252px; height:600px}
@media(max-width:1040px){ .inbox-grid{grid-template-columns:260px minmax(0,1fr)} .inbox-aside{display:none} }
@media(max-width:720px){ .inbox-grid{grid-template-columns:1fr; height:auto} .inbox-list{display:none} }

/* list */
.inbox-list{border-right:1px solid var(--glass-line); background:rgba(255,255,255,.35); display:flex; flex-direction:column; min-height:0}
.inbox-search{padding:14px 14px 10px; display:flex; flex-direction:column; gap:10px}
.inbox-search .sb{display:flex; align-items:center; gap:9px; height:38px; padding:0 12px; border-radius:10px; background:var(--surface); border:1px solid var(--border); color:var(--ink-4); font-size:13px}
.inbox-tabs{display:flex; gap:6px}
.inbox-tab{border:0; background:none; padding:6px 12px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ink-3); cursor:pointer; transition:.15s}
.inbox-tab.on{background:var(--ink); color:#fff}
.inbox-tab .b{display:inline-block; margin-left:6px; font-size:11px; padding:1px 6px; border-radius:20px; background:var(--accent-soft); color:var(--accent-700); font-weight:700}
.inbox-tab.on .b{background:rgba(255,255,255,.2); color:#fff}
.convos{overflow-y:auto; flex:1; padding:4px 8px 10px; min-height:0}
.convo{display:flex; gap:11px; padding:11px 11px; border-radius:12px; cursor:pointer; transition:.13s; align-items:flex-start; position:relative}
.convo:hover{background:var(--surface)}
.convo.on{background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--accent), var(--sh-1)}
.convo-av{width:40px;height:40px;border-radius:11px; flex-shrink:0; display:grid; place-items:center; font-size:13px; font-weight:700; font-family:var(--mono); color:#fff; background:#2a3142; position:relative}
.convo-av.q{background:var(--surface-3); color:var(--ink-4)}
.ch-badge{position:absolute; right:-4px; bottom:-4px; width:18px;height:18px; border-radius:6px; display:grid; place-items:center; color:#fff; border:2px solid var(--surface-2)}
.convo.on .ch-badge{border-color:var(--surface)}
.convo:hover .ch-badge{border-color:var(--surface)}
.convo-main{flex:1; min-width:0}
.convo-top{display:flex; align-items:center; gap:8px}
.convo-name{font-size:13.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1}
.convo-time{font-size:11px; color:var(--ink-4); flex-shrink:0}
.convo-prev{font-size:12px; color:var(--ink-3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px}
.convo-unread{width:7px;height:7px;border-radius:50%; background:var(--accent); flex-shrink:0}

/* thread */
.thread{display:flex; flex-direction:column; min-height:0; background:rgba(255,255,255,.25)}
.thread-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border)}
.thread-av{width:38px;height:38px;border-radius:10px; display:grid; place-items:center; font-size:13px; font-weight:700; font-family:var(--mono); color:#fff; background:#2a3142; flex-shrink:0}
.thread-name{font-size:15px; font-weight:600; letter-spacing:-.01em}
.thread-sub{font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:6px; margin-top:2px}
.thread-ch{display:inline-flex; align-items:center; gap:5px; font-weight:600}
.thread-body{flex:1; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:14px; min-height:0; background:linear-gradient(var(--surface),var(--surface-2))}
.msg{display:flex; flex-direction:column; max-width:74%}
.msg.client{align-self:flex-start; align-items:flex-start}
.msg.op{align-self:flex-end; align-items:flex-end}
.msg.ai{align-self:flex-start; align-items:flex-start}
.msg-bubble{padding:11px 15px; font-size:14px; line-height:1.45; border-radius:16px}
.msg.client .msg-bubble{background:var(--surface-3); color:var(--ink); border:1px solid var(--border); border-bottom-left-radius:5px}
.msg.op .msg-bubble{background:var(--accent); color:#fff; border-bottom-right-radius:5px; box-shadow:var(--sh-1)}
.msg.ai .msg-bubble{background:var(--success-soft); color:#155e3f; border:1px solid var(--success-line); border-bottom-left-radius:5px}
.msg-src{display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; font-family:var(--mono); letter-spacing:.02em; margin-bottom:5px; opacity:.92}
.msg.op .msg-src{flex-direction:row-reverse}
.msg-tag{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--success); margin-bottom:5px; font-family:var(--mono); display:flex; align-items:center; gap:5px}
.msg-time{font-size:10.5px; color:var(--ink-4); margin-top:5px; font-variant-numeric:tabular-nums}
.msg-time.w{color:rgba(255,255,255,.6)}
.thread-compose{border-top:1px solid var(--border); padding:12px 16px}
.quick{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.quick-chip{font-size:12.5px; font-weight:500; padding:7px 13px; border-radius:20px; border:1px solid var(--accent-line); background:var(--accent-soft); color:var(--accent-700); cursor:pointer; transition:.14s}
.quick-chip:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.compose-bar{display:flex; align-items:center; gap:10px; height:46px; padding:0 6px 0 16px; border-radius:13px; border:1px solid var(--border-2); background:var(--surface-2)}
.compose-bar input{flex:1; border:0; background:none; outline:none; font-family:inherit; font-size:14px; color:var(--ink)}
.compose-bar input::placeholder{color:var(--ink-4)}
.compose-send{height:36px; padding:0 12px; border-radius:10px; border:0; background:var(--accent); color:#fff; font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; transition:.15s}
.compose-send:hover{background:var(--accent-700)}
.compose-send:disabled{opacity:.45; cursor:default}
.compose-send.round{width:42px;height:42px;border-radius:50%; padding:0; display:grid; place-items:center; box-shadow:var(--sh-2)}
.compose-send.round:hover{filter:brightness(.94); transform:translateY(-1px)}
.compose-send.round:disabled{opacity:.5; transform:none; filter:none}
.send-wrap{position:relative; flex-shrink:0}
.send-fan{position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:11px; z-index:40; align-items:center}
.send-orb{width:40px;height:40px;border-radius:50%; border:0; display:grid; place-items:center; color:#fff; cursor:pointer; box-shadow:0 7px 20px rgba(20,27,41,.24); transition:transform .14s ease, box-shadow .14s ease; animation:orbUp .22s cubic-bezier(.2,.8,.2,1) backwards}
.send-orb:hover{transform:scale(1.14)}
.send-orb.on{box-shadow:0 0 0 3px var(--surface-2), 0 7px 20px rgba(20,27,41,.28)}
@keyframes orbUp{from{opacity:0; transform:translateY(10px) scale(.85)} to{opacity:1; transform:translateY(0) scale(1)}}

/* aside */
.inbox-aside{border-left:1px solid var(--glass-line); background:rgba(255,255,255,.35); padding:20px 18px; overflow-y:auto; min-height:0}
.aside-id{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding-bottom:18px; border-bottom:1px solid var(--border)}
.aside-av{width:60px;height:60px;border-radius:16px; display:grid; place-items:center; font-size:18px; font-weight:700; font-family:var(--mono); color:#fff; background:#2a3142}
.aside-name{font-size:15px; font-weight:700; letter-spacing:-.01em}
.aside-seg{margin-top:2px}
.aside-block{padding:16px 0; border-bottom:1px solid var(--border)}
.aside-block:last-child{border-bottom:0}
.aside-h{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px}
.aside-chans{display:flex; flex-direction:column; gap:7px}
.aside-chan{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:var(--ink-2)}
.aside-chan .cc{width:24px;height:24px;border-radius:7px; display:grid; place-items:center; color:#fff; flex-shrink:0}
.aside-kv{display:flex; flex-direction:column; gap:9px}
.aside-kv .r{display:flex; align-items:flex-start; gap:8px; font-size:12.5px}
.aside-kv .rk{color:var(--ink-3); width:74px; flex-shrink:0}
.aside-kv .rv{color:var(--ink); font-weight:600; flex:1}
.aside-merge{font-size:11.5px; color:var(--ink-3); line-height:1.45; display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:10px; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-700)}

/* ---------- Omnichannel BEFORE (Без Jay) — browser with tabs ---------- */
.bw{height:600px; display:flex; flex-direction:column; background:#dfe3ea; overflow:hidden}
@media(max-width:760px){ .bw{height:auto} }
.bw-top{background:#d4d9e2; padding:9px 12px 0; flex-shrink:0}
.bw-dots{display:flex; gap:7px; padding:2px 4px 9px}
.bw-dots i{width:11px;height:11px;border-radius:50%}
.bw-dots i:nth-child(1){background:#f0605c} .bw-dots i:nth-child(2){background:#f5bd4f} .bw-dots i:nth-child(3){background:#62c554}
.bw-tabs{display:flex; gap:3px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none}
.bw-tabs::-webkit-scrollbar{display:none}
.bw-tab{flex-shrink:0; display:flex; align-items:center; gap:8px; max-width:188px; padding:9px 12px; border-radius:10px 10px 0 0; background:#c7cdd8; color:var(--ink-3); font-size:12.5px; font-weight:500; cursor:pointer; transition:.14s; position:relative; white-space:nowrap}
.bw-tab:hover{background:#cfd4de}
.bw-tab.on{background:#f4f6f9; color:var(--ink); font-weight:600}
.bw-tab .fav{width:17px;height:17px;border-radius:5px; display:grid; place-items:center; color:#fff; font-size:10px; font-weight:700; flex-shrink:0; font-family:var(--mono)}
.bw-tab .ttl{overflow:hidden; text-overflow:ellipsis}
.bw-tab .tx{width:16px;height:16px;border-radius:5px; display:grid; place-items:center; color:var(--ink-4); flex-shrink:0; margin-left:2px}
.bw-tab.on .tx:hover{background:rgba(0,0,0,.08)}
.bw-tab .unread{position:absolute; top:5px; left:24px; min-width:15px;height:15px;border-radius:8px; background:var(--risk); color:#fff; font-size:9.5px; font-weight:700; display:grid; place-items:center; border:1.5px solid #c7cdd8; padding:0 3px}
.bw-tab.on .unread{border-color:#f4f6f9}

.bw-urlbar{display:flex; align-items:center; gap:10px; padding:9px 14px; background:#f4f6f9; flex-shrink:0; border-bottom:1px solid var(--border)}
.bw-nav{display:flex; gap:5px; color:var(--ink-4)}
.bw-url{flex:1; display:flex; align-items:center; gap:8px; height:32px; padding:0 13px; border-radius:9px; background:#fff; border:1px solid var(--border-2); font-size:12.5px; color:var(--ink-3); font-family:var(--mono); overflow:hidden; white-space:nowrap}
.bw-switches{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--risk); background:var(--risk-soft); border:1px solid var(--risk-line); padding:6px 11px; border-radius:9px; white-space:nowrap}
.bw-switches .n{font-variant-numeric:tabular-nums; min-width:14px; text-align:center}

.bw-page{flex:1; overflow-y:auto; background:#fbfcfe; min-height:0; padding:0}
.bw-app{display:flex; flex-direction:column; min-height:100%}
.bw-apphead{display:flex; align-items:center; gap:12px; padding:15px 20px; border-bottom:1px solid var(--border); background:#fff}
.bw-appav{width:40px;height:40px;border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; font-family:var(--mono); flex-shrink:0}
.bw-appname{font-size:14.5px; font-weight:600; letter-spacing:-.01em}
.bw-appsub{font-size:12px; color:var(--ink-3); margin-top:2px}
.bw-chat{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1}
.bw-day{align-self:center; font-size:11px; color:var(--ink-4); background:var(--surface-3); padding:3px 11px; border-radius:100px; margin-bottom:4px}
.bw-msg{max-width:74%; font-size:13.5px; line-height:1.45; padding:10px 14px; border-radius:15px}
.bw-msg.in{align-self:flex-start; background:#eceef3; color:var(--ink); border-bottom-left-radius:5px}
.bw-msg.out{align-self:flex-end; color:#fff; border-bottom-right-radius:5px}
.bw-repeat{align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:var(--risk); font-family:var(--mono); text-transform:uppercase; letter-spacing:.03em; background:var(--risk-soft); border:1px solid var(--risk-line); padding:5px 10px; border-radius:8px}
.bw-empty{margin:auto; text-align:center; color:var(--ink-3); max-width:34ch; display:flex; flex-direction:column; align-items:center; gap:12px; padding:30px}
.bw-empty .ring{width:56px;height:56px;border-radius:14px; background:var(--surface-3); display:grid; place-items:center; color:var(--ink-4)}
.bw-crm-row{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px dashed var(--border); font-size:13px}
.bw-crm-row .ck{color:var(--ink-3); width:130px; flex-shrink:0}
.bw-crm-row .cv{font-weight:600; color:var(--ink)}
.bw-crm-row .cv.miss{color:var(--ink-4); font-weight:500; font-style:italic}
.bw-pains{display:flex; flex-wrap:wrap; gap:8px; padding:13px 18px; background:#fff; border-top:1px solid var(--border); flex-shrink:0}
.bw-pain{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--risk); padding:6px 11px; border-radius:8px; background:var(--risk-soft); border:1px solid var(--risk-line)}
@media(max-width:760px){ .bw-pains{position:static} }