/* BEYOND CORE — чаты в стиле Telegram (компьютер и телефон) */
.tc-wrap{display:grid;grid-template-columns:350px minmax(0,1fr) 0;height:calc(100dvh - 190px);min-height:520px;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:rgba(var(--sf-rgb),.55);backdrop-filter:blur(10px);transition:grid-template-columns .25s ease}
.tc-wrap.with-info{grid-template-columns:350px minmax(0,1fr) 300px}
.tc-list{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:rgba(var(--bg-rgb),.35)}
.tc-lhead{padding:12px 12px 0;display:grid;gap:10px}
.tc-search .search-in input{border-radius:99px;padding-top:9px;padding-bottom:9px}
.tc-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tc-chips::-webkit-scrollbar{display:none}
.tc-chips .chip{flex-shrink:0}
.tc-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 -12px;padding:0 8px;overflow-x:auto;scrollbar-width:none}
.tc-tabs button{position:relative;padding:9px 10px 10px;font-size:13px;font-weight:600;color:var(--txt3);white-space:nowrap}
.tc-tabs button small{font-size:11px;opacity:.7}
.tc-tabs button.active{color:var(--txt)}
.tc-tabs button.active::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--grad)}
.tc-items{flex:1;overflow-y:auto;padding:6px;overscroll-behavior:contain}
.tc-item{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:12px;cursor:pointer;transition:background .12s;-webkit-user-select:none;user-select:none}
.tc-item:hover{background:rgba(255,255,255,.05)}
.tc-item.active{background:linear-gradient(135deg,rgba(var(--a1-rgb),.55),rgba(var(--a2-rgb),.4))}
.tc-item.active .tc-time,.tc-item.active .tc-prev,.tc-item.active .tc-prev i{color:rgba(255,255,255,.85)}
.tc-item.off{opacity:.6}
.tc-av{position:relative;width:52px;height:52px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:700;font-size:17px;color:#fff;background:linear-gradient(135deg,var(--av),color-mix(in srgb,var(--av) 55%,#000))}
.tc-av.sm{width:40px;height:40px;font-size:14px}
.tc-av.lg{width:76px;height:76px;font-size:26px;margin:0 auto 10px}
.tc-ch{position:absolute;right:0;bottom:1px;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--bg)}
.tc-ib{flex:1;min-width:0}
.tc-r1,.tc-r2{display:flex;align-items:center;gap:6px}
.tc-r1 b{flex:1;min-width:0;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-time{font-size:11.5px;color:var(--txt3);flex-shrink:0}
.tc-tick{display:inline-flex;color:var(--vio)}
.tc-tick svg{width:15px;height:15px}
.tc-tick.bad{color:#fb7185;font-weight:800}
.tc-r2{margin-top:3px}
.tc-prev{flex:1;min-width:0;font-size:13.5px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-prev i{font-style:normal;color:var(--txt2)}
.tc-badge{min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:var(--grad);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;flex-shrink:0}
.tc-st{width:9px;height:9px;border-radius:50%;background:var(--c);flex-shrink:0}
.tc-empty{display:grid;justify-items:center;gap:10px;text-align:center;color:var(--txt3);padding:40px 16px;font-size:13px}
.tc-empty svg{width:38px;height:38px;opacity:.5}

/* переписка */
.tc-conv{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;
  background:radial-gradient(circle at 20% 10%,rgba(var(--a1-rgb),.12),transparent 40%),radial-gradient(circle at 85% 85%,rgba(var(--a3-rgb),.1),transparent 45%),rgba(var(--bg-rgb),.25)}
.tc-conv::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.4px);background-size:22px 22px}
.tc-pick{margin:auto;display:grid;justify-items:center;gap:8px;text-align:center;color:var(--txt3);padding:20px;max-width:340px}
.tc-pick-ic{width:72px;height:72px;border-radius:50%;background:rgba(var(--a1-rgb),.15);display:grid;place-items:center}
.tc-pick-ic svg{width:34px;height:34px;color:var(--vio)}
.tc-pick b{color:var(--txt);font-size:15px}
.tc-pick span{font-size:13px}
.tc-head{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);background:rgba(var(--sf-rgb),.85);backdrop-filter:blur(16px);min-height:60px}
.tc-back{display:none}
.tc-who{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;padding:4px;border-radius:10px}
.tc-who:hover{background:rgba(255,255,255,.04)}
.tc-whot{min-width:0;display:grid}
.tc-whot b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-whot small{font-size:12px;color:var(--txt3);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-status{width:auto;border-color:color-mix(in srgb,var(--c) 55%,transparent)!important;color:var(--txt)}
.tc-infobtn.on{background:rgba(var(--a1-rgb),.25);border-color:rgba(var(--a2l-rgb),.5)}
.tc-msgs{position:relative;z-index:1;flex:1;overflow-y:auto;padding:14px 6% 10px;display:flex;flex-direction:column;overscroll-behavior:contain}
.tm-hint{margin:auto;color:var(--txt3);font-size:13px;background:rgba(var(--bg-rgb),.6);padding:8px 14px;border-radius:99px}
.tm-day{position:sticky;top:4px;z-index:2;display:flex;justify-content:center;margin:10px 0 8px;pointer-events:none}
.tm-day span{font-size:12px;font-weight:600;padding:4px 12px;border-radius:99px;background:rgba(var(--bg-rgb),.75);backdrop-filter:blur(8px);color:var(--txt2)}
.tm{display:flex;margin-top:8px}
.tm.fresh{animation:msgIn .22s ease}
.tm.grp{margin-top:2px}
.tm.out{justify-content:flex-end}
.tm-b{position:relative;max-width:min(560px,78%);padding:7px 10px 6px 12px;border-radius:16px;background:rgba(var(--sf-rgb),.95);border:1px solid var(--line);font-size:14.5px;line-height:1.42;box-shadow:0 1px 2px rgba(0,0,0,.15);min-width:72px}
.tm.out .tm-b{background:linear-gradient(135deg,var(--a1),var(--a2));border-color:transparent;color:#fff}
.tm.bot .tm-b{background:linear-gradient(135deg,color-mix(in srgb,var(--a1) 55%,#0e7490),color-mix(in srgb,var(--a2) 45%,#0891b2))}
.tm.in.tail .tm-b{border-bottom-left-radius:5px}
.tm.out.tail .tm-b{border-bottom-right-radius:5px}
.tm-t{white-space:pre-wrap;word-break:break-word;display:inline}
.tm-t a{color:inherit;text-decoration:underline}
.tm-author{display:block;font-size:12.5px;font-weight:700;color:var(--vio);margin-bottom:1px}
.tm.out .tm-author{color:rgba(255,255,255,.85)}
.tm-meta{float:right;display:inline-flex;align-items:center;gap:3px;margin:6px 0 -3px 10px;font-size:11px;color:var(--txt3);white-space:nowrap;position:relative;top:2px}
.tm.out .tm-meta{color:rgba(255,255,255,.75)}
.tm-ticks{display:inline-flex}
.tm-ticks svg{width:15px;height:15px}
.tm-ticks.read{color:#fff}
.tm-fail{color:#fecdd3;background:#e11d48;width:15px;height:15px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;cursor:help}
/* вложения */
.tm-photo{display:block;margin:-3px -6px 4px -8px;border-radius:12px;overflow:hidden;line-height:0}
.tm-photo img{width:100%;max-width:360px;max-height:420px;object-fit:cover;display:block;cursor:zoom-in}
.tm-video{width:100%;max-width:380px;max-height:420px;border-radius:12px;margin:-3px -6px 4px -8px;background:#000;display:block}
.tm-video.round{width:240px;height:240px;border-radius:50%;object-fit:cover}
.tm.media-only .tm-b{padding:3px;background:transparent;border:none;box-shadow:none}
.tm.media-only .tm-b::before{display:none}
.tm.media-only .tm-photo,.tm.media-only .tm-video{margin:0}
.tm.media-only .tm-meta{position:absolute;right:10px;bottom:10px;margin:0;padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;float:none;top:auto}
.tm-voice{display:flex;align-items:center;gap:10px;min-width:220px;padding:2px 0}
.tm-play{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--grad);color:#fff}
.tm.out .tm-play{background:#fff;color:var(--a1)}
.tm-play svg{width:18px;height:18px}
.tm-wave{position:relative;flex:1;height:30px;display:flex;align-items:center;gap:2px;cursor:pointer}
.tm-wave i{flex:1;max-width:3px;min-width:2px;border-radius:2px;background:currentColor;opacity:.4}
.tm-prog{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18));border-right:2px solid currentColor;pointer-events:none;transition:width .2s linear}
.tm-voice:not(.playing) .tm-prog{border-right-color:transparent}
.tm-dur{font-size:12px;opacity:.85;min-width:32px}
.tm-file{display:flex;align-items:center;gap:10px;padding:4px 0;color:inherit;text-decoration:none;min-width:200px}
.tm-file svg{width:40px;height:40px;padding:9px;border-radius:50%;background:rgba(var(--a1-rgb),.35);flex-shrink:0}
.tm.out .tm-file svg{background:rgba(255,255,255,.22)}
.tm-file b{display:block;font-size:14px;word-break:break-all}
.tm-file small{font-size:12px;opacity:.75}
.tm-pending{display:flex;align-items:center;gap:8px;font-size:13px;opacity:.9;padding:6px 2px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;display:inline-block;flex-shrink:0}
.spin.sm{width:11px;height:11px;border-width:1.5px}
@keyframes spin{to{transform:rotate(360deg)}}
.tc-down{position:absolute;right:18px;bottom:96px;z-index:3;width:44px;height:44px;border-radius:50%;display:none;place-items:center;background:rgba(var(--sf-rgb),.95);border:1px solid var(--line2);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.tc-down.show{display:grid}
.tc-down svg{width:20px;height:20px}
.tc-down span:not(:empty){position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--grad);font-size:11px;font-weight:700;display:grid;place-items:center;color:#fff}
.tc-drop{position:absolute;inset:8px;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:2px dashed var(--vio);border-radius:16px;background:rgba(var(--bg-rgb),.85);color:var(--txt);pointer-events:none}
.tc-drop.show{display:flex}
.tc-drop svg{width:40px;height:40px;color:var(--vio)}
/* поле ввода */
.tc-foot{position:relative;z-index:2;padding:8px 12px 12px;background:linear-gradient(180deg,transparent,rgba(var(--bg-rgb),.4))}
.tc-tray{display:none;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px}
.tc-tray.open{display:flex}
.tc-tray::-webkit-scrollbar{display:none}
.tc-tray .chip{flex-shrink:0}
.tc-comp{display:flex;align-items:flex-end;gap:8px;max-width:900px;margin:0 auto}
.tc-comp .icon-btn{width:46px;height:46px;border-radius:50%;flex-shrink:0;background:rgba(var(--sf-rgb),.95)}
.tc-comp .icon-btn svg{width:21px;height:21px}
.tc-inwrap{flex:1;min-width:0;position:relative;display:flex;align-items:flex-end;background:rgba(var(--sf-rgb),.95);border:1px solid var(--line);border-radius:23px;transition:border-color .15s}
.tc-inwrap:focus-within{border-color:rgba(var(--a2l-rgb),.6)}
.tc-inwrap textarea{flex:1;min-width:0;resize:none;border:none;background:transparent;color:var(--txt);padding:12px 4px 12px 16px;font:inherit;font-size:15px;line-height:1.4;max-height:160px;outline:none}
.tc-quick{width:40px;height:44px;display:grid;place-items:center;color:var(--txt3);flex-shrink:0}
.tc-quick svg{width:19px;height:19px}
.tc-quick.on{color:var(--vio)}
.tc-send{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 4px 14px var(--grad-sh);transition:transform .12s}
.tc-send:active{transform:scale(.92)}
.tc-send svg{width:20px;height:20px}
.tc-send.mic{background:rgba(var(--sf-rgb),.95);color:var(--vio);box-shadow:none;border:1px solid var(--line)}
.tc-comp.rec{align-items:center}
.tc-recinfo{flex:1;display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:23px;background:rgba(var(--sf-rgb),.95);border:1px solid rgba(244,63,94,.4)}
.tc-recinfo b{font-variant-numeric:tabular-nums}
.rec-dot{width:11px;height:11px;border-radius:50%;background:#f43f5e;animation:recPulse 1s ease-in-out infinite}
@keyframes recPulse{50%{opacity:.25}}
.tc-cancel{color:#fb7185}
.tc-locked{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(var(--sf-rgb),.9);border:1px dashed var(--line2);font-size:13px;max-width:900px;margin:0 auto}
.tc-locked svg{width:20px;height:20px;color:var(--amber);flex-shrink:0}
.tc-locked div{flex:1;display:grid}
.tc-locked span{color:var(--txt3);font-size:12px}
/* карточка клиента */
.tc-info{min-width:0;overflow:hidden auto;border-left:1px solid var(--line);padding:18px;background:rgba(var(--bg-rgb),.35)}
.tc-wrap:not(.with-info) .tc-info{padding:0;border:none}
.att-prev{margin-bottom:12px;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.3);display:grid;place-items:center;max-height:52vh}
.att-prev img,.att-prev video{max-width:100%;max-height:52vh;display:block}
.att-prev .tm-file{padding:16px}
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:20px;animation:ctxIn .15s}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lb-x,.lb-dl{position:absolute;top:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff}
.lb-x{right:14px}.lb-dl{right:68px}
.lb-x svg,.lb-dl svg{width:20px;height:20px}
.drawer-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}

/* светлая тема */
[data-theme=light] .tc-wrap{background:#fff}
[data-theme=light] .tm-b{background:#fff;color:var(--txt)}
[data-theme=light] .tc-conv{background:radial-gradient(circle at 20% 10%,rgba(var(--a1-rgb),.1),transparent 40%),#efeaf8}
[data-theme=light] .tc-conv::before{opacity:.25;background-image:radial-gradient(rgba(var(--a1-rgb),.35) 1px,transparent 1.4px)}
[data-theme=light] .tm-day span,[data-theme=light] .tm-hint{background:rgba(255,255,255,.85)}
[data-theme=light] .tc-inwrap,[data-theme=light] .tc-comp .icon-btn,[data-theme=light] .tc-send.mic,[data-theme=light] .tc-recinfo,[data-theme=light] .tc-head,[data-theme=light] .tc-down{background:#fff}
[data-theme=light] .tc-item.active b{color:#fff}

/* ноутбук */
@media (max-width:1250px){.tc-wrap,.tc-wrap.with-info{grid-template-columns:300px minmax(0,1fr) 0}.tc-info{display:none}}

/* ===== телефон: как приложение Telegram ===== */
@media (max-width:900px){
  .tc-wrap,.tc-wrap.with-info{grid-template-columns:minmax(0,1fr);min-height:0;border:none;border-radius:0;background:none;backdrop-filter:none;margin:-14px -14px 0;width:calc(100% + 28px)}
  .tc-wrap:not(.open){height:auto!important}
  .tc-list{border:none;background:none}
  .tc-lhead{padding:10px 14px 0;position:sticky;top:0;z-index:5;background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(16px)}
  .tc-tabs{margin:0 -14px;padding:0 10px}
  .tc-items{overflow:visible;padding:4px 6px 12px}
  .tc-item{padding:9px 10px;border-radius:14px}
  .tc-item:active{background:rgba(255,255,255,.07)}
  .tc-conv,.tc-info{display:none}
  .tc-wrap.open .tc-list{display:none}
  /* открытый чат — на весь экран, без шапки и нижнего меню CRM */
  body.chat-open .top,body.chat-open .tabbar,body.chat-open .sb-bar,body.chat-open .foot{display:none!important}
  body.chat-open .main{padding-bottom:0}
  body.chat-open .view{padding:0}
  .tc-wrap.open{position:fixed;left:0;right:0;top:0;width:auto;height:var(--vvh,100dvh)!important;margin:0;z-index:300;display:block;background:var(--bg)}
  .tc-wrap.open .tc-conv{display:flex;height:100%}
  .tc-head{padding:6px 8px;padding-top:max(6px,env(safe-area-inset-top));min-height:56px}
  .tc-back{display:grid;width:40px;height:40px;border:none;background:none}
  .tc-back svg{width:24px;height:24px}
  .tc-infobtn{display:none}
  .tc-status{max-width:120px;font-size:13px!important;padding-right:28px}
  .tc-whot small{font-size:11.5px}
  .tc-msgs{padding:10px 8px 8px}
  .tm-b{max-width:84%;font-size:15.5px}
  .tc-foot{padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
  .tc-comp{gap:6px}
  .tc-comp .icon-btn,.tc-send{width:44px;height:44px}
  .tc-inwrap textarea{font-size:16px!important;padding:11px 4px 11px 14px}
  .tc-down{bottom:calc(84px + env(safe-area-inset-bottom));right:12px}
  .tm-photo img,.tm-video{max-width:100%}
  .tm-voice{min-width:200px}
  .tc-drop{display:none!important}
}
@media (max-width:380px){.tc-status{display:none}}
@media (max-width:900px){body.chat-open .toast{top:calc(64px + env(safe-area-inset-top));bottom:auto;transform:translateX(-50%) translateY(-200px)}body.chat-open .toast.show{transform:translateX(-50%) translateY(0)}}