:root{
  color-scheme:light;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:#142841;background:#e9edf5;font-synthesis:none;
  --ink:#142841;--muted:#8494a9;--canvas:#e9edf5;--paper:#fff;--navy:#122840;--line:#e0e6ee;--pale:#f0f4fa;--accent:#345f93;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;height:100%;background:#e9edf5}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}[hidden]{display:none!important}
.app{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:84px minmax(0,1fr);height:100dvh;min-height:430px}
.rail{grid-column:1;grid-row:1 / 3;background:#112741;color:#dbe9ff;display:flex;flex-direction:column;align-items:center;gap:19px;padding:23px 9px 19px;z-index:3}
.rail-logo{display:grid;place-items:center;color:white;font-size:28px;font-weight:800;height:42px;width:42px;margin-bottom:43px}
.rail-active{height:52px;width:52px;border-radius:14px;background:#263b58;color:white;display:grid;place-items:center}
.rail-spacer{flex:1}.rail-lang{height:44px;width:46px;border:1px solid #314761;border-radius:11px;display:grid;place-items:center;font-size:21px}
.rail-profile{width:46px;height:46px;border-radius:13px;border:1px solid #304761;display:grid;place-items:center;font-size:15px;font-weight:800;color:#d7e6fa}
.workspace-header{grid-column:2;grid-row:1;background:#fff;border-bottom:1px solid #edf0f5;display:flex;align-items:center;justify-content:space-between;padding:12px 26px 12px 30px;min-width:0}
.workspace-title,.workspace-right{display:flex;align-items:center;gap:20px;min-width:0}.workspace-title h1{font-size:27px;line-height:1.1;margin:0;font-weight:750;letter-spacing:-.035em}
.workspace-back{font-size:40px;color:#90a0b4;line-height:0.7;font-weight:300}.workspace-caption{font-size:13px;color:#9ba7b8;border-left:1px solid #e3e9f2;padding-left:18px}
.workspace-project{height:49px;border:1px solid #dbe3ee;border-radius:13px;display:flex;align-items:center;gap:13px;padding:0 15px;color:#8191a8;font-size:15px;font-weight:550;white-space:nowrap}
.workspace-project-dot{width:22px;height:22px;border-radius:50%;background:#98a7bb;box-shadow:0 0 0 4px #eef3f8}
.workspace-chevron{font-size:23px;color:#94a1b6}.workspace-user{width:42px;height:42px;border-radius:50%;background:#e7bec6;color:#c63849;display:grid;place-items:center;font-size:18px;font-weight:700}
.workspace-content{grid-column:2;grid-row:2;min-height:0;min-width:0;display:grid;grid-template-columns:minmax(365px,39%) minmax(0,1fr);gap:13px;padding:14px;background:#e9edf5}
.sidebar,.conversation{background:#fff;border-radius:18px;min-width:0;min-height:0;box-shadow:0 1px 2px #17345a0d}
.sidebar{display:flex;flex-direction:column;overflow:hidden}
.sidebar-heading{padding:20px 18px 10px}.sidebar-search{height:54px;border-radius:14px;background:#f0f3f9;display:flex;align-items:center;gap:12px;padding:0 16px;color:#8a99ad}
.sidebar-search:focus-within{outline:2px solid #c7d5e9}.sidebar-search input{min-width:0;flex:1;background:transparent;border:0;outline:0;font-size:16px;color:var(--ink);font-weight:500}
.sidebar-search input::placeholder{color:#97a2b5}
.filter-box{display:flex;align-items:center;gap:6px;padding:13px 0 4px;flex-wrap:wrap}
.filter-box button{font-size:12px;font-weight:660;border:1px solid #dce4ee;color:#647893;background:white;padding:8px 12px;border-radius:9px}
.filter-box button:hover{background:#eef3f9}.filter-box button.selected{background:#152d49;color:white;border-color:#152d49}
.counter{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 21px 14px;color:#91a0b1;font-size:12px;border-bottom:1px solid #e9edf4}
.connection{color:#318658;font-size:11px;white-space:nowrap}.connection.offline{color:#bc673b}
.chat-list{min-height:0;overflow:auto;padding:7px 15px 20px;flex:1;scrollbar-color:#d7e0eb transparent;scrollbar-width:thin}
.chat-item{border:1px solid transparent;border-bottom-color:#e0e6ef;display:flex;align-items:flex-start;gap:12px;padding:18px 13px;width:100%;min-height:113px;text-align:left;color:#142841;background:white;border-radius:13px}
.chat-item:hover{background:#f4f7fc}.chat-item.active{background:#f0f3f9;border-color:#edf1f6;box-shadow:none}
.chat-item .avatar{width:48px;height:48px;font-size:23px}.avatar{width:48px;height:48px;flex-shrink:0;border-radius:50%;background:#e1c4c1;color:#ba4a40;display:grid;place-items:center;font-weight:600;font-size:20px}
.chat-item:nth-child(4n+2) .avatar{background:#e4eaca;color:#91a61e}.chat-item:nth-child(4n+3) .avatar{background:#f1d9e6;color:#b2306d}.chat-item:nth-child(4n+4) .avatar{background:#ebe7d9;color:#be9f39}
.chat-main{min-width:0;flex:1;padding-top:1px}.chat-line{display:flex;align-items:baseline;justify-content:space-between;gap:7px}
.chat-line strong{color:#142841;font-size:17px;line-height:1.25;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-line time{font-size:12px;color:#95a3b8;white-space:nowrap}
.last-message{margin:7px 0 9px;color:#8997aa;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:#6b7d91}
.chat-meta:before{content:"◉ АрендаФортепиано.ру";font-size:10px;background:#e2e9f2;border-radius:8px;padding:5px 9px;color:#233d58;font-weight:650;max-width:100%;white-space:nowrap}
.chat-meta .human{background:#faeedf;color:#a7731e;padding:4px 7px;border-radius:6px;font-weight:650}.unread{display:inline-grid;place-items:center;background:#2566d1;color:white;width:18px;height:18px;border-radius:50%;font-size:10px}
.sidebar-foot{min-height:54px;padding:10px 17px;border-top:1px solid #e8edf5;display:flex;gap:8px;align-items:center;justify-content:space-between}
.channel-tag{background:#e4eaf3;border-radius:8px;color:#233e5e;padding:7px 9px;font-size:11px;font-weight:650;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sidebar-foot button{border:0;background:#fff;color:#8493a6;font-size:13px;font-weight:600;padding:8px}
.conversation{display:flex;flex-direction:column;position:relative;overflow:hidden}
.conversation-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:95px;padding:18px 25px;border-bottom:1px solid #e9edf3;background:#fff}
.chat-person{display:flex;gap:14px;align-items:center;min-width:0}.chat-person h2{margin:0 0 5px;font-size:20px;font-weight:750;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:31vw}
.chat-person p{margin:0;color:#8d9cb0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:35vw}
.mode-buttons{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:0}
.mode-tag{font-size:12px;background:#edf2f8;color:#627991;border:1px solid #e0e7f1;border-radius:9px;padding:10px 11px;white-space:nowrap}
.mode-tag.human{background:#ffecd5;color:#9b6a18;border-color:#ffddaa}
.primary,.secondary{padding:11px 14px;border-radius:11px;font-size:13px;font-weight:720;white-space:nowrap}
.primary{color:#fff;background:#132c47;border:1px solid #132c47}.primary:hover{background:#254763}
.secondary{background:#fff;color:#152d47;border:1px solid #d6e0eb}.secondary:hover{background:#eef3f9}
.messages{flex:1;min-height:0;display:flex;flex-direction:column;gap:18px;padding:27px clamp(22px,4%,60px);overflow:auto;background:#fff}
.bubble-row{display:flex;flex-direction:column;align-items:flex-start;max-width:76%;position:relative}
.bubble-row.customer,.bubble-row.ai,.bubble-row.employee{align-self:flex-start}
.bubble-row.ai,.bubble-row.employee{margin-left:auto;align-items:flex-end}
.bubble-label{font-size:13px;color:#152d48;font-weight:720;margin-bottom:6px}.bubble-time{font-size:11px;color:#96a3b5;margin-top:4px}
.bubble{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #dce4ef;border-radius:16px;padding:13px 17px;line-height:1.56;font-size:14px;background:#fff;color:#192d45;box-shadow:none}
.bubble-row.ai .bubble{background:#f0f4fa;border-color:#e3eaf3}
.bubble-row.employee .bubble{background:#e6eefb;border-color:#cfdef3}
.bubble-row.system .bubble{background:#fff7ec;color:#986617;border-color:#ffedce}
.empty{text-align:center;margin:auto;padding:30px 15px;max-width:380px;color:#8394aa}
.empty-icon{color:#a8bad1}.empty h3{font-size:20px;color:#18304e;font-weight:760;margin:15px 0 5px}
.empty p{font-size:14px;line-height:1.55;margin:9px 0 0}
.composer{padding:13px 23px 18px;background:#fff}.composer-hint{font-size:12px;color:#8192a8;padding:5px 3px 11px}
.reply-form{display:flex;align-items:flex-end;gap:9px;background:#f0f3f9;border:1px solid #e8edf5;border-radius:15px;padding:8px 9px 8px 14px}
.reply-form:focus-within{border-color:#aebfd6}.reply-form textarea{flex:1;min-width:0;min-height:50px;max-height:165px;resize:vertical;border:0;outline:0;background:transparent;color:#182f4d;padding:7px 3px;font-size:14px;line-height:1.45}
.send{width:46px;height:43px;border:0;border-radius:12px;background:#152c49;color:white;font-size:18px}.send:hover{background:#2b4a6f}
.composer-foot{display:flex;justify-content:space-between;gap:7px;margin-top:8px;padding:0 3px;color:#9eacbb;font-size:11px}
#toast{position:absolute;bottom:105px;left:50%;transform:translateX(-50%);background:#142942;color:white;border-radius:11px;padding:13px 17px;font-size:13px;display:none;box-shadow:0 7px 28px #12243e22;z-index:8}
#toast.show{display:block}
.login-screen{min-height:100dvh;display:grid;place-items:center;background:#e9edf5;padding:20px}
.login-card{width:min(430px,100%);background:white;border:1px solid #e1e7ef;border-radius:20px;box-shadow:0 14px 55px #172c4b12;padding:35px 36px}
.login-mark{display:grid;place-items:center;background:#112941;color:white;width:52px;height:52px;border-radius:13px;font-size:27px;margin:0 auto 22px}
.login-card h1{margin:0;text-align:center;font-size:25px;color:#142942}.login-card p{color:#8b99ad;font-size:13px;text-align:center;margin:9px 0 27px}
.login-card label{font-size:13px;font-weight:650;display:block;margin-bottom:9px}.login-card input{width:100%;background:#f0f3f9;border:1px solid #e1e8f1;border-radius:11px;padding:14px;outline:0}
.login-card input:focus{border-color:#91afcb}.login-card .full{width:100%;margin-top:15px;min-height:47px}
.error{font-size:12px;color:#c74646;margin-top:12px;min-height:15px;line-height:1.4}
@media(max-width:1120px){.workspace-content{grid-template-columns:minmax(300px,42%) minmax(0,1fr);gap:9px;padding:9px}.conversation-head{padding:13px 16px}.chat-person h2{max-width:21vw;font-size:17px}.chat-person p{max-width:24vw;font-size:12px}.mode-buttons{flex-wrap:wrap}.mode-tag{font-size:10px;padding:7px}.primary,.secondary{font-size:11px;padding:9px 11px}.chat-line strong{font-size:15px}.workspace-caption{display:none}}
@media(max-width:750px){.app{grid-template-columns:49px 1fr;grid-template-rows:62px minmax(0,1fr)}.rail{padding:12px 3px;gap:12px}.rail-logo{width:36px;height:36px;margin-bottom:15px}.rail-active{width:39px;height:39px}.rail-profile,.rail-lang{width:36px;height:36px}.workspace-header{padding:8px 13px}.workspace-title{gap:9px}.workspace-title h1{font-size:20px}.workspace-back{font-size:30px}.workspace-project{height:35px;padding:0 8px;font-size:10px;gap:6px}.workspace-project-dot{width:12px;height:12px}.workspace-user{display:none}.workspace-content{grid-template-columns:40% minmax(0,1fr);gap:5px;padding:5px}.sidebar,.conversation{border-radius:9px}.sidebar-heading{padding:7px}.sidebar-search{height:37px;padding:0 6px;gap:5px}.sidebar-search svg{width:14px}.sidebar-search input{font-size:10px}.filter-box{gap:3px;padding:8px 0 2px}.filter-box button{font-size:9px;padding:4px 5px}.counter{padding:7px;font-size:9px}.connection{font-size:9px}.chat-list{padding:2px}.chat-item{gap:5px;padding:10px 5px;min-height:85px}.chat-item .avatar{width:28px;height:28px;font-size:13px}.chat-line strong{font-size:11px}.chat-line time{display:none}.last-message{font-size:10px;margin:5px 0}.chat-meta:before{content:"◉ Чат";font-size:8px;padding:4px}.chat-meta{font-size:9px}.sidebar-foot{padding:5px}.channel-tag{display:none}.conversation-head{padding:8px;gap:6px;min-height:67px;flex-wrap:wrap}.chat-person{gap:6px}.chat-person>.avatar{width:30px;height:30px;font-size:13px}.chat-person h2{max-width:34vw;font-size:12px}.chat-person p{max-width:34vw;font-size:9px}.mode-buttons{width:100%}.mode-tag{font-size:9px}.messages{padding:10px;gap:12px}.bubble-row{max-width:100%}.bubble{font-size:12px;padding:9px}.bubble-label{font-size:10px}.composer{padding:8px}.composer-hint{font-size:10px}.reply-form{padding:5px}.reply-form textarea{font-size:11px}.send{height:34px;width:34px}.composer-foot{font-size:9px}.empty h3{font-size:14px}.empty p{font-size:11px}}