:root{color-scheme:light;--ink:#1c1d1f;--muted:#687381;--line:#e4e7ec;--panel:#f3f4f6;--blue:#407ff2;--note:#fff9e9;--radius:10px;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff}
/* Full-width opaque backing lets the next sticky date cover the previous one
   without stacking labels; message nodes stay flat for paging and reply anchors. */
.day-separator{position:sticky;top:-12px;z-index:2;align-self:stretch;display:flex;justify-content:center;flex-shrink:0;padding:6px 0;min-height:38px;background:#fbfcfe;pointer-events:none}
.day-separator time{display:block;width:fit-content;max-width:100%;padding:3px 13px;border-radius:999px;background:#e9eef5;color:#526174;font-size:12px;font-weight:600;line-height:20px;white-space:nowrap;text-align:center}
.message .message-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.4}
.delete-card{max-width:480px}.delete-preview{white-space:pre-wrap;overflow-wrap:anywhere;border-left:2px solid var(--line);padding-left:10px;margin:12px 0}.delete-card .danger{color:#a04134;border-color:#a04134;margin-top:12px}#delete-panel button{min-height:44px}.delete-card [role="status"]{margin:12px 0;overflow-wrap:anywhere}
.message .username-link{display:inline;min-height:0;border:0;border-radius:2px;padding:0;background:transparent;color:#2864c9;font:inherit;line-height:inherit;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;vertical-align:baseline}.message .username-link:hover{color:#184b9d;background:#eaf0ff}
.message .forward-author{display:inline;min-height:28px;max-width:100%;padding:2px 4px;border:0;border-radius:3px;background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}.message .forward-author:hover{background:#e1f1ec}.message .forward-author:focus-visible{outline:2px solid #2864c9;outline-offset:2px}.forward-reason{display:block;margin-top:3px;font-size:10px;color:#65766f}@media(max-width:760px){.message .forward-author{min-height:44px}.forward-reason{font-size:11px}}
.channel-badge{display:inline-block;width:fit-content;border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:10px;color:var(--muted)}.reply-composer{background:#fff;border-top:1px solid var(--line);padding:12px 20px;flex-shrink:0;max-height:48%;overflow-y:auto}.reply-composer>label{margin:0 0 3px;font-size:13px}.reply-composer textarea{margin:8px 0 5px;min-height:64px;max-height:160px;font-size:14px}.reply-actions{display:flex;align-items:center;gap:8px;margin-top:8px}.reply-actions>span{margin-right:auto}.reply-quote{display:flex;align-items:center;gap:8px;border-left:2px solid var(--blue);padding:3px 8px;margin-top:8px;background:#f6f8fb;font-size:12px;overflow-wrap:anywhere}.reply-quote>span{flex:1;min-width:0;white-space:pre-wrap}.reply-quote button{flex-shrink:0}.reply-results{font-size:11px;color:var(--muted);max-height:90px;overflow:auto;overflow-wrap:anywhere}.reply-result{padding-top:7px}.reply-result p{white-space:pre-wrap}.reply-result[data-state="unknown"],.reply-result[data-state="failed"],.reply-result[data-state="expired"]{color:#a04134}.message .quote-action{font-size:11px;min-height:28px;padding:3px 7px;border:0;color:#2864c9;margin-top:4px}.new-messages{align-self:center;margin:6px;color:#2864c9;flex-shrink:0}
@media(max-width:760px){.reply-composer{padding:10px 12px max(10px,env(safe-area-inset-bottom));max-height:48%}.reply-composer textarea{font-size:16px}.reply-composer button,.message .quote-action,.new-messages{min-height:44px}.reply-quote button{min-width:44px}.reply-actions{flex-wrap:wrap}.inbox-controls #channel-filter{grid-column:1/-1;min-height:44px}.reply-results{max-height:64px}}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,.button{border:1px solid var(--line);background:white;border-radius:8px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.4;min-height:36px}button:hover,.button:hover{background:#f1f3f5}button:disabled{opacity:.5;cursor:wait}.primary{background:var(--ink);border-color:var(--ink);color:white}.primary:hover{background:#30343b}input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:#fff;width:100%;min-width:0}input:focus,select:focus,textarea:focus{outline:2px solid #a9c5ff;outline-offset:1px}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}textarea{resize:vertical}label{display:block;font-size:12px;font-weight:600;margin:12px 0 5px}a{color:#2864c9;overflow-wrap:anywhere}h1,h2,h3,p{margin:0}h1{font-size:28px;line-height:1.2;letter-spacing:-.8px}h2{font-size:17px;line-height:1.3;letter-spacing:-.3px}h3{font-size:14px;line-height:1.4}.muted{color:var(--muted)}.tiny{font-size:12px}.eyebrow{font-size:10px;letter-spacing:1.1px;font-weight:700;color:var(--muted)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.icon-button{font-size:20px;width:36px;padding:4px;flex-shrink:0}.mobile-only{display:none}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:17px;white-space:nowrap;letter-spacing:-.4px}.brand .muted{font-weight:400}.brand-icon{background:var(--ink);color:#fff;border-radius:8px;width:30px;height:30px;display:grid;place-items:center;font-size:16px}.login-screen{min-height:100dvh;display:grid;place-items:center;background:#f7f8fa;padding:24px}.login-card{width:410px;max-width:100%;background:#fff;padding:38px;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 40px #17243d05}.login-card .brand{margin-bottom:42px}.login-card .eyebrow{margin-bottom:12px}.login-card h1{margin-bottom:16px}.login-card form{margin-top:24px}.login-card .primary{width:100%;margin-top:22px;justify-content:space-between;min-height:44px}.login-foot{font-size:11px;color:var(--muted);margin-top:25px;text-align:center}.notification{position:fixed;z-index:100;left:50%;transform:translateX(-50%);top:14px;display:flex;max-width:min(600px,94vw);background:#fff3ef;border-radius:10px;box-shadow:0 4px 20px #0001}.notification #notice{padding:12px 16px;color:#8b3428;overflow-wrap:anywhere}.notification button{background:transparent;border:0;flex-shrink:0}.notification #notice[hidden]+button{display:none}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 22px;border-bottom:1px solid var(--line)}.archive-badge{font-size:11px;display:inline-flex;align-items:center;gap:7px;color:var(--muted);background:var(--panel);border-radius:5px;padding:5px 8px}.dot{width:5px;height:5px;background:#788491;border-radius:50%}.account-box{display:flex;align-items:center;gap:14px;font-size:12px}.account-box button{min-height:30px;font-size:12px;padding:5px 10px}.shell{display:flex;height:calc(100dvh - 64px);min-height:0}.navigation{flex:0 0 164px;border-right:1px solid var(--line);background:#fafbfc;padding:20px 10px;display:flex;flex-direction:column;gap:5px}.navigation>button{justify-content:flex-start;border:0;background:transparent;color:#616b77;font-size:12px;text-align:left;min-height:36px}.navigation>button.active{background:#eaf0ff;color:#2d67c7;font-weight:600}.navigation>button:hover{background:#edf0f4}.nav-divider{height:1px;background:var(--line);margin:13px 6px}.workspace{display:flex;flex:1;min-width:0;min-height:0}.inbox{flex:0 0 292px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.inbox-heading{display:flex;align-items:center;justify-content:space-between;padding:22px 18px 16px}.square-icon{font-size:18px;color:#83909e}.inbox-controls{display:grid;gap:8px;padding:0 14px 14px}.inbox-controls input,.inbox-controls select{font-size:12px;min-height:36px;background:#fbfcfd}.chat-list{overflow-y:auto;flex:1;min-height:0;padding:6px}.chat-row{display:flex;align-items:center;border-radius:9px;padding:3px 5px;gap:3px;margin-bottom:3px}.chat-row.selected{background:#edf3ff}.chat-row>input{width:14px;flex-shrink:0;margin:6px 2px;accent-color:var(--blue)}.chat-link{border:0;background:none;min-width:0;flex:1;padding:10px 5px;justify-content:flex-start;gap:10px;text-align:left}.chat-link:hover{background:none}.chat-row:hover{background:#f2f5f8}.avatar{width:33px;height:33px;border:1px solid #dfe6ef;background:#f6f8fb;display:grid;place-items:center;border-radius:50%;color:#708299;flex-shrink:0}.chat-info{display:grid;min-width:0;gap:5px}.chat-info strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-info>span{font-size:10px;color:var(--muted);white-space:nowrap}.bulk{padding:10px;border-top:1px solid var(--line);background:#fcfcfd}.bulk>div{display:flex;gap:6px;align-items:center;margin:4px 0}.bulk button,.bulk select{font-size:10px;min-height:30px;padding:5px}.bulk>div:first-child{justify-content:space-between}.bulk #selection-count{color:var(--muted);padding:0 6px}.load-more{display:block;max-width:calc(100% - 20px);margin:8px auto;font-size:11px;color:var(--muted);border-style:dashed;background:transparent}
.chat-stage{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column;background:#fff}.conversation{display:flex;flex-direction:column;min-height:0;flex:1}.conversation-header{min-height:82px;border-bottom:1px solid var(--line);padding:17px 24px;display:flex;align-items:center;gap:12px;justify-content:space-between}.client-heading{min-width:0;flex:1}.client-heading h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.client-heading p{font-size:11px;margin-top:4px}.conversation-header .icon-button{border:0;color:#7f8995}.timeline-toolbar{display:flex;gap:6px;padding:8px 15px;border-bottom:1px solid #f0f2f5;align-items:center;flex-wrap:wrap}.timeline-toolbar>span{font-size:10px;color:#8a939e;margin-right:auto}.timeline-toolbar button{font-size:10px;padding:4px 7px;min-height:28px;border:0;color:var(--muted)}.timeline{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;padding:12px 20px 25px;overscroll-behavior:contain;background:#fbfcfe}.messages{display:flex;flex-direction:column;align-items:flex-start;gap:13px}.message{width:fit-content;max-width:90%;background:#fff;border:1px solid #e8ecf1;border-radius:12px 12px 12px 3px;padding:12px 14px;min-width:110px;overflow-wrap:anywhere;font-size:13px}.message.outgoing{align-self:flex-end;background:#edf3ff;border-color:#dfe9fb;border-radius:12px 12px 3px 12px}.message .sender{font-size:10px;font-weight:650;color:#72859c;margin-bottom:6px}.message-text{white-space:pre-wrap}.message pre{max-width:100%;white-space:pre-wrap;background:#f1f3f6;padding:8px;border-radius:5px}.message code{font-size:12px;font-family:ui-monospace,SFMono-Regular,monospace}.forward{font-size:11px;color:#32816f;border-left:2px solid #86bcb1;padding:3px 8px;margin-bottom:9px;background:#eff9f640;white-space:pre-wrap}.reply{max-width:100%;font-size:11px;color:#58749b;justify-content:flex-start;border:0;border-left:2px solid #b4c7e8;border-radius:0;background:#f5f7fb;margin-bottom:8px;text-align:left;overflow-wrap:anywhere;padding:6px 8px;white-space:normal}.message-time{display:block;text-align:right;color:#9aa3af;font-size:9px;margin-top:8px}.attachment{display:flex;flex-direction:column;gap:6px;margin-top:10px;font-size:11px}.attachment img{max-width:100%;max-height:360px;object-fit:contain;object-position:left;border-radius:7px}.attachment audio,.attachment video{max-width:100%;width:280px;border-radius:8px}.poll{border:1px solid var(--line);padding:10px;border-radius:8px;margin-top:10px;font-size:12px}.poll-answer{border-bottom:3px solid #e9edf2;padding:7px 0}.poll small{color:var(--muted);font-size:10px}.preview{display:flex;flex-direction:column;border-left:2px solid #d6dfef;margin-top:10px;padding-left:9px;font-size:11px;text-decoration:none}.preview span{color:var(--muted);max-height:70px;overflow:hidden}.reactions{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.reactions span{background:#eef2f8;font-size:11px;padding:2px 7px;border-radius:10px}.highlight{outline:2px solid #a2bce9;outline-offset:3px}.archive-footer{padding:10px 16px;background:#fafbfc;border-top:1px solid var(--line);font-size:10px;color:var(--muted);text-align:center}.empty{color:var(--muted);text-align:center;padding:24px 15px;font-size:13px}.empty.small{font-size:11px;line-height:1.7}.welcome{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#fcfdfe}.welcome h2{font-size:22px;color:#485361}.welcome p{line-height:1.7}.empty-mark{width:52px;height:52px;background:#f0f3f8;border:1px solid #e8edf4;display:grid;place-items:center;font-size:26px;border-radius:16px;color:#8c9bb0}
.details{flex:0 0 270px;padding:24px 18px;overflow-y:auto;border-left:1px solid var(--line);min-height:0}.detail-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.details h2{margin-bottom:8px;overflow-wrap:anywhere}.details label{color:var(--muted);margin-top:18px}.details select{font-size:12px}.visibility-controls>div{display:flex;gap:5px}.visibility-controls button{padding:6px;font-size:10px}.note-area{border-top:1px solid var(--line);margin:26px -18px -24px;padding:22px 18px;background:var(--note);min-height:220px}.note-hint{font-size:10px;color:#9b8752;margin-top:5px}.note-area textarea{margin-top:15px;background:#fffdf8;border-color:#e7dfc8;font-size:12px;min-height:100px}.note-area .primary{width:100%;margin-top:8px;font-size:12px}.note{padding:12px 0;border-bottom:1px solid #eee6d0;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.note small{display:block;font-size:9px;color:#948868;margin-top:6px}.error-text{color:#a04134;font-size:12px;margin-top:8px}.admin{flex:1;padding:40px;overflow:auto;min-width:0}.admin h1{font-size:26px;margin-bottom:26px}.admin-content{max-width:1000px}.admin-row{border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:20px 0}.admin-row strong{flex:1;font-size:13px}.admin-row button{font-size:12px}.job{border:1px solid var(--line);border-radius:10px;padding:20px;margin:20px 0;max-width:850px}.job p{font-size:12px;color:var(--muted);margin:8px 0}.job progress{width:100%;height:7px;display:block;margin:15px 0;accent-color:var(--blue)}.job button{font-size:12px;margin-right:8px}.user-form{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.user-form input{flex:1 1 180px}.user-form select{width:140px}.audit-row{display:flex;gap:20px;justify-content:space-between;font-size:12px;padding:13px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.audit-row>span{color:var(--muted)}#admin-content>.button,#admin-content>button{margin:20px 12px 0 0}.overlay{position:fixed;inset:0;background:#18243750;z-index:50;display:flex;align-items:center;justify-content:center;padding:25px}.overlay-card{background:white;border:1px solid var(--line);border-radius:14px;padding:20px;width:660px;max-width:100%;max-height:88dvh;overflow:auto;box-shadow:0 18px 70px #1e32442b}.overlay-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.search-hit{display:flex;width:100%;align-items:flex-start;flex-direction:column;text-align:left;margin:8px 0;padding:12px}.search-hit strong{font-size:12px}.search-hit span{font-size:11px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}.overlay-card p{font-size:12px;padding:8px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
@media(min-width:1450px){.inbox{flex-basis:310px}.details{flex-basis:290px}.navigation{flex-basis:180px}.timeline{padding-left:36px;padding-right:36px}}
@media(max-width:1180px) and (min-width:761px){.navigation{flex-basis:118px;padding:15px 5px}.navigation>button{font-size:11px;padding:8px}.inbox{flex-basis:235px}.details{flex-basis:235px;padding-left:14px;padding-right:14px}.note-area{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}.message{max-width:98%}.timeline{padding-left:12px;padding-right:12px}.archive-badge{font-size:10px}}
@media(max-width:760px){:root{font-size:14px}.topbar{height:58px;padding:0 14px;gap:8px}.topbar>.archive-badge{display:none}.brand{font-size:16px;gap:7px}.account-box{gap:7px;font-size:10px}.account-box button{min-height:34px}.shell{height:calc(100dvh - 58px);flex-direction:column}.navigation{flex:0 0 auto;width:100%;border-right:0;border-bottom:1px solid var(--line);padding:6px 10px;flex-direction:row;overflow-x:auto;gap:4px;min-height:52px}.navigation>button{white-space:nowrap;min-height:38px;font-size:12px;padding:8px 11px}.nav-divider{display:none!important}.workspace{width:100%;min-height:0;flex:1;position:relative}.inbox{width:100%;flex:1;border-right:0}.inbox-heading{padding:17px 18px 13px}.inbox-heading h2{font-size:20px}.inbox-controls{grid-template-columns:1fr 135px;padding:0 14px 12px}.inbox-controls input,.inbox-controls select{font-size:13px;min-height:42px}.chat-row{padding:4px 9px;margin:2px 3px}.chat-info strong{font-size:14px}.chat-info>span{font-size:11px}.chat-link{padding:10px 6px;gap:13px}.avatar{width:40px;height:40px}.chat-row>input{width:18px;height:18px;margin-right:9px}.bulk{padding:8px 14px}.bulk>div{justify-content:space-between}.bulk>div:nth-child(2) select{flex:1}.bulk button,.bulk select{font-size:12px;min-height:38px;padding:7px 10px}.chat-stage,.details{display:none}.mobile-chat .inbox,.mobile-chat .navigation{display:none}.mobile-chat .chat-stage{display:flex;flex:1;width:100%}.mobile-chat .workspace{height:100%;flex:1}.conversation-header{min-height:75px;padding:10px 12px;gap:8px}.mobile-only{display:inline-flex}.icon-button{width:42px;height:42px;min-height:42px}.client-heading h2{font-size:16px}.client-heading p{font-size:10px}.timeline-toolbar{padding:5px 12px;min-height:38px}.timeline-toolbar button{min-height:32px}.timeline{padding:12px 13px 18px}.message{max-width:93%;font-size:14px;padding:11px 12px;min-width:145px}.message .sender{font-size:11px}.message-time{font-size:9px}.reply{min-height:40px;font-size:12px}.forward{font-size:12px}.attachment img{max-height:300px}.archive-footer{font-size:9px;padding:8px 10px}.load-more{min-height:40px;font-size:12px}.mobile-info .chat-stage{display:none}.mobile-info .details{display:block;flex:1;width:100%;padding:22px;border-left:0}.mobile-info .detail-heading{margin-bottom:12px}.details h2{font-size:22px}.details select{min-height:44px;font-size:14px}.details label{font-size:12px}.note-area{margin:24px -22px -22px;padding:22px;min-height:45dvh}.note-area textarea{font-size:16px;min-height:120px}.note-area .primary{min-height:44px;font-size:14px}.note-hint{font-size:12px}.note{font-size:14px}.admin{padding:24px 18px}.admin h1{font-size:23px}.admin-row{align-items:flex-start;gap:8px}.admin-row strong{flex:1 1 100%}.admin-row button{min-height:42px}.user-form{display:grid}.user-form input,.user-form select{width:100%;font-size:16px;min-height:44px}.job{padding:16px}.job button{min-height:42px;margin-bottom:7px}.overlay{padding:12px;align-items:flex-end}.overlay-card{max-height:92dvh;padding:16px;border-radius:14px 14px 8px 8px}.overlay-card button{min-height:42px}.overlay-card h2{font-size:16px}.search-hit span{font-size:13px}.login-card{padding:30px 25px}.login-card input{font-size:16px;min-height:44px}.login-card h1{font-size:29px}.login-card .brand{margin-bottom:35px}}
.tools-view{flex:1;min-width:0;min-height:0;overflow:auto;padding:32px 36px max(24px,env(safe-area-inset-bottom))}.tools-view h1{margin-bottom:24px}.tools-view h2{margin-bottom:8px}.tools-view>p{max-width:960px;font-size:13px;margin:10px 0 18px}.tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1100px}.tools-column{min-width:0}.tools-column textarea{display:block;white-space:pre-wrap;overflow-wrap:anywhere;min-height:220px}.tools-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.tools-view button,.tools-picker-card button,.tools-picker-card input,.tools-picker-card select,.tools-column select,#tools-nav{min-height:44px}.tools-column [role="status"]{font-size:13px;margin-top:12px;min-height:40px;overflow-wrap:anywhere}.tools-unavailable{padding:20px 0 0;margin:24px 0 0;list-style:none;border-top:1px solid var(--line);color:var(--muted);display:flex;gap:12px 24px;flex-wrap:wrap;font-size:12px}.tools-picker-card{max-width:620px}.tools-search button{margin-top:10px}.tools-targets{max-height:220px;overflow:auto;margin-top:12px}.tools-targets button{overflow-wrap:anywhere;white-space:normal}.tools-picker-card #tools-confirm{width:100%;margin-top:12px}.tools-picker-card #tools-recipient{font-weight:600}.tools-view button,.tools-picker-card button{transition:none}
@media(max-width:760px){.tools-view{padding:22px 16px max(24px,env(safe-area-inset-bottom));width:100%}.tools-view h1{font-size:23px;margin-bottom:20px}.tools-grid{grid-template-columns:minmax(0,1fr);gap:16px}.tools-column textarea,.tools-column select,.tools-picker-card input,.tools-picker-card select{font-size:16px}.tools-column textarea{min-height:180px}.tools-actions>button{flex:1 1 140px}.tools-unavailable{display:grid;gap:10px}.tools-picker-card{padding-bottom:max(16px,env(safe-area-inset-bottom))}.tools-targets{max-height:180px}}
.tools-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.tools-tabs button[aria-pressed="true"]{color:#2864c9;border-color:#a9c5ff;background:#f4f7ff}
.codes-panel{max-width:620px;min-width:0}.codes-panel input,.codes-panel button,.codes-panel summary{min-height:44px}.codes-panel button{white-space:normal;overflow-wrap:anywhere}.codes-panel form>button{margin-top:12px}.codes-panel p{overflow-wrap:anywhere}.codes-panel [role="status"]{min-height:24px;margin-top:12px;font-size:13px}.codes-results{display:grid;gap:6px;margin-top:12px;max-height:260px;overflow:auto}.codes-results button{justify-content:flex-start;text-align:left}.codes-result{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}.codes-result>p:first-child{font-weight:600}.codes-code{font-size:44px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.3;user-select:all;width:fit-content;max-width:100%;margin:20px 0 12px}.codes-code:empty{display:none}.codes-copy{width:100%;max-width:360px;min-height:48px!important}.codes-panel #codes-countdown{color:var(--muted);font-size:13px;margin:8px 0 16px;min-height:20px}.codes-panel details{border-top:1px solid var(--line);margin-top:24px;padding-top:8px}.codes-panel summary{display:list-item;align-content:center;cursor:pointer;font-weight:600;padding:10px 0}.codes-panel summary:focus-visible,.codes-code:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.codes-panel form>.muted{font-size:12px;margin-top:10px}.codes-danger{color:#a04134;border-color:#cda69f}.codes-dialog{border:1px solid var(--line);border-radius:12px;padding:24px;width:480px;max-width:calc(100vw - 32px);max-height:85dvh;overflow:auto;color:var(--ink);background:#fff}.codes-dialog::backdrop{background:#18243750}.codes-dialog p{margin:12px 0;overflow-wrap:anywhere}.codes-dialog button{min-height:44px}.codes-dialog #codes-delete-target{font-weight:600}.codes-panel #codes-admin-result{font-size:12px;margin-top:12px}.codes-panel #codes-admin-result p{padding:10px 0;border-bottom:1px solid var(--line)}
@media(max-width:760px){.tools-tabs button{flex:1 1 130px}.codes-panel input{font-size:16px}.codes-panel form>button,.codes-copy{width:100%;max-width:none}.codes-code{font-size:40px}.codes-dialog{padding:20px 16px max(20px,env(safe-area-inset-bottom))}.codes-dialog .tools-actions{flex-direction:column}.codes-dialog .tools-actions>button{flex:0 0 auto}}

.prep-panel,.gifts-panel{max-width:1100px;min-width:0}.prep-panel h3,.gifts-panel h3{font-size:14px;margin:22px 0 12px}.prep-panel form,.gifts-panel form{display:grid;gap:8px}.prep-panel input,.gifts-panel input,.prep-panel select,.gifts-panel select{width:100%;min-width:0;min-height:44px}.prep-panel label,.gifts-panel label{font-size:12px;color:var(--muted);margin-top:8px}.prep-panel p,.gifts-panel p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.6;margin:12px 0}.prep-panel button,.gifts-panel button{white-space:normal;overflow-wrap:anywhere}.prep-panel details,.gifts-panel details{border-top:1px solid var(--line);margin-top:20px;padding-top:8px}.prep-panel summary,.gifts-panel summary{min-height:44px;padding:12px 0;font-weight:600;cursor:pointer}.tool-records{display:grid;gap:6px;max-height:310px;overflow:auto;margin:12px 0}.tool-records button{width:100%;justify-content:flex-start;text-align:left;white-space:pre-wrap;line-height:1.5;padding:10px 12px}.prep-panel #prep-summary,.gifts-panel #gifts-order-summary{padding:16px;background:#f5f7fa;border:1px solid var(--line);border-radius:10px;font-weight:550}
.prep-panel #prep-account-title{font-weight:600;margin-top:0}
.prep-panel #prep-account-state{font-weight:600;margin:6px 0}
.prep-panel #prep-account-note{color:var(--muted);margin:6px 0 0;font-weight:400}
.prep-panel #prep-account-note:empty{display:none}
.prep-panel #prep-counts{color:var(--muted);margin:6px 0 0;font-weight:400}
.prep-panel #prep-back{display:none;margin-bottom:12px}
.prep-panel #prep-delivery-box{margin-top:20px}
.prep-panel #prep-delivery-text{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--line);border-radius:10px;padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:16px;line-height:1.7;margin:0}.gifts-panel #gifts-events{max-height:240px;overflow:auto}.gifts-panel #gifts-events p{padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}.prep-panel #prep-result{margin-top:8px;min-height:160px;font-family:inherit;line-height:1.8}.prep-panel #prep-status,.gifts-panel #gifts-status{min-height:24px}.prep-panel #prep-manual,.gifts-panel #gifts-twofa{padding:12px;border:1px solid var(--line);border-radius:10px;margin-top:16px}
.prep-panel{max-width:760px}
.prep-panel #prep-new{margin-bottom:24px}
.prep-panel #prep-new h3{margin-top:0}
.prep-panel #prep-new-hint{font-weight:600}
.prep-panel #prep-new-hint:empty{display:none}
.prep-panel #prep-tab-list{display:grid;gap:8px;margin-top:8px}
.prep-panel #prep-tab-list button{width:100%;justify-content:flex-start;text-align:left}
.prep-panel #prep-detail{border-top:1px solid var(--line);padding-top:16px}
.prep-panel #prep-order-box{margin-top:16px}
.prep-panel #prep-history{margin-top:24px}
.prep-panel .prep-row{display:flex;gap:8px;align-items:stretch}
/* Ширину строке задаёт сама строка, а не кнопки внутри неё: общее правило
   списка растягивает каждую кнопку на всю ширину, и в паре «аккаунт +
   повторить» обе требовали всё место — подпись сжималась до одной буквы
   в строке, а «Повторить» уезжала за край. */
.prep-panel .prep-row>button{width:auto}
.prep-panel .prep-row>button:first-child{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.prep-panel .prep-row>button:last-child{flex:0 0 auto;align-self:center}
.prep-panel .prep-failed #prep-account-state{color:#b3261e}
.prep-panel .prep-failed #prep-summary{border-color:#f2b8b5;background:#fff5f4}
.prep-panel #prep-history .tool-records{max-height:360px}.prep-panel #prep-key-write,.prep-panel #prep-sheet-retry{margin:4px 6px 12px 0}.gifts-panel #gifts-order-summary{margin-top:24px}
.gifts-panel #gifts-decisions{margin-bottom:28px}
.gifts-panel #gifts-history{margin-top:24px}
.gifts-panel #gifts-quote-form{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}
.gifts-panel #gifts-product{font-weight:600}
.gifts-panel #gifts-extra-actions{margin-top:8px}.gifts-panel #gifts-decisions h3{margin-top:0}
.gifts-decision{border:1px solid var(--line);border-radius:10px;padding:14px;margin:8px 0}
.gifts-decision p{margin:4px 0}.gifts-decision p:last-of-type{font-weight:600}
.gifts-panel #gifts-order-title{font-weight:600;margin-top:0}
.gifts-panel #gifts-order-amount{font-size:18px;font-weight:650;margin:6px 0}
.gifts-panel #gifts-order-state{font-weight:600;margin:6px 0}
.gifts-panel #gifts-order-note{color:var(--muted);margin:6px 0 0}
.gifts-panel #gifts-order-note:empty{display:none}
.gifts-panel #gifts-back{display:none;margin-bottom:12px}
.gifts-panel #gifts-codes-title{margin-bottom:8px}
.gifts-codes{display:grid;gap:10px;margin:8px 0 0}
.gifts-code{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:14px}
.gifts-code span{color:var(--muted);font-size:12px;flex:0 0 auto}
.gifts-code-value{flex:1 1 220px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:26px;font-weight:600;letter-spacing:.04em;overflow-wrap:anywhere;user-select:all}
.gifts-code button{flex:0 0 auto;min-height:44px}
@media(max-width:760px){.gifts-panel #gifts-back{display:inline-flex}.prep-panel #prep-back{display:inline-flex}.gifts-code-value{font-size:22px}.gifts-code button{width:100%}.prep-panel input,.gifts-panel input,.prep-panel select,.gifts-panel select{font-size:16px}.prep-panel .tools-grid,.gifts-panel .tools-grid{gap:24px}.tool-records{max-height:250px}.prep-panel #prep-detail{border-top:1px solid var(--line);padding-top:12px}.prep-panel form>button,.gifts-panel form>button{width:100%}.prep-panel #prep-summary,.gifts-panel #gifts-order-summary{padding:12px}.prep-panel #prep-key-write,.prep-panel #prep-sheet-retry{width:100%;margin-right:0}}
@media(prefers-reduced-motion:no-preference){button,a{transition:background-color .12s}.tools-view button,.tools-picker-card button{transition:none}.highlight{animation:focus-flash .45s ease-out}@keyframes focus-flash{from{background:#dae8ff}to{background:inherit}}}

/* Непрочитанное (общее на команду), копирование и два поиска. */
.chat-link{align-items:center}.unread-badge{margin-left:auto;flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#2d67c7;color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}.chat-row.unread .chat-info strong{font-weight:700;color:#1f2937}.unread-divider{align-self:stretch;text-align:center;font-size:11px;font-weight:600;color:#2864c9;background:#eaf0ff;padding:5px 0;border-radius:6px;flex-shrink:0}.message .copy-action{color:#4b5563}.search-view{flex:1;min-width:0;min-height:0;overflow:auto;padding:32px 36px max(24px,env(safe-area-inset-bottom))}.search-view h1{font-size:22px;margin-bottom:14px}.search-form{display:flex;gap:8px;max-width:640px}.search-form input{flex:1;font-size:13px}.search-form button{font-size:13px}.search-hits{display:grid;gap:4px;max-width:760px;margin-top:14px}.search-hits .search-hit{margin:0;border:1px solid var(--line);border-radius:9px}.search-hit time{font-size:10px;color:var(--muted)}.chat-search{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 15px;border-bottom:1px solid #f0f2f5;background:#fbfcfe}.chat-search input{flex:1;min-width:160px;font-size:12px;min-height:34px}.chat-search button{font-size:12px;min-height:34px}.chat-search-hits{flex-basis:100%;display:grid;gap:4px;max-height:220px;overflow-y:auto}.chat-search-hits .search-hit{margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px}.chat-search-hits:empty{display:none}
@media(max-width:760px){.search-view{padding:22px 16px max(24px,env(safe-area-inset-bottom));width:100%}.search-form input{font-size:16px;min-height:44px}.search-form button{min-height:44px}.chat-search{padding:8px 12px}.chat-search input{font-size:16px;min-height:42px}.chat-search button{min-height:42px}.unread-badge{min-width:22px;height:22px;font-size:12px}}
/* Вложения: фото в ленте, файлы карточкой. */
/* Место под снимок занято до того, как он загрузится: пропорция приходит с
   сервера (--ratio = ширина/высота) и рамка считается из неё. Раньше браузер
   узнавал размер только вместе с файлом, и переписка раздвигалась на ходу.
   --cap — та же граница высоты, что была у картинки: у рамки от неё считается
   ширина, поэтому снимок не растягивается и лишнего места не занимает. Ширина
   задана в пикселях, а не долей: доля не участвует в расчёте ширины пузыря, и
   широкий снимок раздвигал бы сообщение уже после загрузки. */
.attachment-photo{--cap:360px;--ratio:1.3333;display:block;align-self:flex-start;
  width:calc(var(--cap)*var(--ratio));max-width:100%;aspect-ratio:var(--ratio);
  border-radius:7px;overflow:hidden;background:#eef1f5}
.attachment-photo img{display:block;cursor:zoom-in;width:100%;height:100%;object-fit:contain;object-position:left}
.attachment-photo.loaded{background:transparent}
/* Файл к нам ещё ни разу не попадал, пропорция неизвестна: держим небольшую
   ровную рамку и вписываем снимок целиком. Как только он загрузится, рамка
   станет точной, а со следующего открытия размер придёт с сервера. */
.attachment-photo.unsized{--cap:195px}
/* Картинка проявляется, а не выскакивает: пока она грузится, её не видно, и
   лента не дёргается от резкого появления. */
.attachment img{opacity:0;transition:opacity var(--t-panel,.24s) var(--ease-out,ease-out)}
.attachment img[data-loaded]{opacity:1}
@media(prefers-reduced-motion:reduce){.attachment img{transition:none}}
@media(max-width:760px){.attachment-photo{--cap:300px}.attachment-photo.unsized{--cap:170px}}
.file-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;text-decoration:none;color:inherit;max-width:320px;min-width:200px}.file-card:hover{background:#eef2f8}.file-icon{font-size:22px;line-height:1}.file-meta{display:grid;min-width:0;gap:2px}.file-meta strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta span{font-size:10px;color:var(--muted)}.file-download{margin-left:auto;color:#2864c9;font-size:15px;flex-shrink:0}
@media(max-width:760px){.file-card{max-width:100%;min-height:44px}}
/* Чистый список: галочки массового выбора только в режиме «Выбрать». */
.chat-list:not(.selecting) .chat-row>input{display:none}.select-toggle{font-size:11px;min-height:28px;padding:4px 10px;border:1px solid var(--line);background:#fff;color:#2d67c7;border-radius:7px}
@media(max-width:760px){.select-toggle{min-height:36px;font-size:12px}}
/* Прикреплённое фото в поле ответа. */
.reply-photo{display:flex;align-items:center;gap:9px;margin-top:8px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:#f8fafc}.reply-photo img{width:44px;height:44px;object-fit:cover;border-radius:6px;flex-shrink:0;background:#e9edf2}.reply-photo span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reply-photo button{flex-shrink:0;min-height:28px;padding:2px 9px;border:0;color:var(--muted)}#reply-attach,#saved-attach{border:0;background:transparent;font-size:17px;min-height:30px;padding:2px 6px;line-height:1}
@media(max-width:760px){.reply-photo img{width:52px;height:52px}.reply-photo button{min-height:44px;min-width:44px}#reply-attach,#saved-attach{min-height:44px;min-width:44px;font-size:20px}}
/* Заказы магазина. */
.nav-badge{margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:10px;background:#2d67c7;color:#fff;font-size:10px;font-weight:600;display:inline-grid;place-items:center}.navigation>button{display:flex;align-items:center;gap:7px}.orders-view{flex:1;min-width:0;min-height:0;overflow:auto;padding:32px 36px max(24px,env(safe-area-inset-bottom))}.orders-view h1{font-size:22px;margin-bottom:14px}.orders-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}.orders-tabs{display:flex;gap:4px}.orders-tabs button{font-size:12px;min-height:32px;padding:5px 12px;border:1px solid var(--line);background:#fff;border-radius:8px;color:#5b6675}.orders-tabs button.active{background:#eaf0ff;color:#2d67c7;border-color:#cddafb;font-weight:600}.orders-search{display:flex;gap:7px;flex:1;min-width:220px}.orders-search input{flex:1;font-size:12px}.orders-search button{font-size:12px}.orders-list{display:grid;gap:8px;max-width:760px;margin-top:12px}.order-card{border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:#fff;display:grid;gap:6px;font-size:13px}.order-card.compact{padding:9px 10px;font-size:12px;gap:4px;background:#fbfcfe}.order-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.order-head strong{font-size:13px}.order-state{font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px}.order-state.open{background:#fff3d9;color:#8a5a00}.order-state.done{background:#e6f6ec;color:#1f7a3d}.order-state.danger{background:#fdeceb;color:#a33028}.order-items{overflow-wrap:anywhere}.order-total{font-weight:600}.order-client,.order-code{font-size:11px;color:var(--muted);overflow-wrap:anywhere}.order-flag{font-size:11px;color:#a33028}.order-actions{display:flex;gap:8px;margin-top:2px}.order-write{font-size:12px;min-height:30px;padding:4px 11px;border:1px solid #cddafb;background:#eaf0ff;color:#2d67c7;border-radius:8px}.order-write:disabled{background:#f4f6f9;border-color:var(--line);color:#9aa3af}.client-orders{margin-top:22px}.client-orders h3{font-size:13px;margin-bottom:8px}.client-orders>div{display:grid;gap:6px}
@media(max-width:760px){.orders-view{padding:22px 16px max(24px,env(safe-area-inset-bottom));width:100%}.orders-search input{font-size:16px;min-height:42px}.orders-search button,.orders-tabs button{min-height:42px}.order-write{min-height:40px}}
/* Строка диалога: имя, последнее сообщение, канал и время. */
.chat-info>span.chat-preview{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.chat-meta time{font-size:10px}
@media(max-width:760px){.chat-info>span.chat-preview{font-size:12px}}
.order-fulfil{font-size:12px;min-height:30px;padding:4px 11px;border:1px solid #bfe3cc;background:#e9f7ef;color:#1f7a3d;border-radius:8px;font-weight:600}.order-fulfil:disabled{background:#f4f6f9;border-color:var(--line);color:#9aa3af}
@media(max-width:760px){.order-fulfil{min-height:40px}}
/* Поле ответа крупнее и заметнее: в него помещается заметно больше текста. */
.reply-composer{max-height:62%}.reply-composer textarea{margin:0 0 6px;min-height:118px;max-height:40vh;font-size:14px;line-height:1.55;border:1px solid #d6dde7;border-radius:10px;padding:11px 13px;background:#fff}.reply-composer textarea:focus{border-color:#9db8e8;background:#fff}
@media(max-width:760px){.reply-composer{max-height:56%}.reply-composer textarea{min-height:96px;max-height:34vh;font-size:16px}}
/* Всплывающие уведомления: угол экрана, ничего не перекрывают и не крадут фокус. */
.toasts{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;max-width:min(360px,calc(100vw - 36px))}.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:100%;background:#fff;border:1px solid var(--line);border-left:3px solid #2d67c7;border-radius:11px;padding:10px 12px;box-shadow:0 10px 26px rgba(19,32,54,.14);text-align:left}.toast.order{border-left-color:#1f7a3d}.toast-body{flex:1;min-width:0;border:0;background:none;padding:0;text-align:left;display:grid;gap:3px;justify-content:stretch;justify-items:start;align-content:start}.toast-body strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* Строки уведомления не шире карточки: иначе длинный текст без пробелов
   уходил под крестик и за край (владелец 26.09, телефон). Текст — две строки. */
.toast-body>*{max-width:100%}
.toast-body span{font-size:11px;color:var(--muted);overflow:hidden;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.toast-close{flex-shrink:0;border:0;background:none;color:var(--muted);font-size:15px;min-height:22px;padding:0 3px;line-height:1}.notify-toggle{font-size:11px;min-height:28px;padding:4px 9px;border:1px solid var(--line);background:#fff;color:#2d67c7;border-radius:7px}
@media(max-width:760px){.toasts{right:10px;bottom:10px;left:10px;max-width:none}.toast-close{min-width:34px;min-height:34px}.notify-toggle{font-size:10px;min-height:34px}}
.order-auto{font-size:11px;color:#1f7a3d}
.read-filter{display:flex;gap:3px}.read-filter button{flex:1;font-size:10px;min-height:28px;padding:4px 6px;border:1px solid var(--line);background:#fff;border-radius:7px;color:#5b6675;white-space:nowrap}.read-filter button.active{background:#eaf0ff;color:#2d67c7;border-color:#cddafb;font-weight:600}
@media(max-width:760px){.inbox-controls .read-filter{grid-column:1/-1}.read-filter button{min-height:38px;font-size:11px}}
/* Крупнее на компьютере: на телефоне размеры уже свои и не затрагиваются. */
@media(min-width:761px){
:root{font-size:15px}
.message{font-size:15px}
.message .sender{font-size:11px}
.message-time{font-size:10px}
.day-separator time{font-size:13px}
.reply-composer textarea{font-size:15px}
.chat-info strong{font-size:13px}
.chat-info>span.chat-preview{font-size:12.5px}
.chat-info>span{font-size:11px}
.channel-badge{font-size:11px}
.client-heading h2{font-size:19px}
.client-heading p{font-size:12px}
.note{font-size:14px}
.notes-title,.details label{font-size:13px}
.search-hit strong{font-size:13px}
.search-hit span{font-size:12px}
.order-card{font-size:14px}
.order-card.compact{font-size:13px}
.order-head strong{font-size:14px}
.order-client,.order-code,.order-flag,.order-auto{font-size:12px}
.order-write,.order-fulfil{font-size:13px}
.orders-tabs button,.orders-search input,.orders-search button{font-size:13px}
.read-filter button{font-size:11px}
.navigation>button{font-size:13px}
.nav-badge{font-size:11px;min-width:21px;height:21px}
.unread-badge{font-size:12px;min-width:22px;height:22px}
.inbox-controls input,.inbox-controls select{font-size:13px}
.empty{font-size:14px}
.empty.small{font-size:12px}
/* Уведомление на компьютере крупнее и просторнее. */
.toasts{right:22px;bottom:22px;gap:10px;max-width:min(440px,calc(100vw - 44px))}
.toast{padding:14px 16px;gap:12px;border-radius:13px}
.toast-body{gap:5px}
.toast-body strong{font-size:14px}
.toast-body span{font-size:13px;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.toast-close{font-size:18px;min-height:26px;padding:0 5px}
}
/* Действия сообщения — под «…», меню открывается по нажатию. */
.message-actions{position:relative;width:fit-content;margin:2px 0 0 auto}.message-more{border:0;background:none;color:#9aa3af;font-size:15px;line-height:1;min-height:24px;padding:0 6px;letter-spacing:1px}.message-more:hover{color:#5b6675;background:#f1f4f8;border-radius:6px}.message-menu{position:absolute;right:0;bottom:100%;z-index:5;display:grid;gap:2px;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px;box-shadow:0 10px 26px rgba(19,32,54,.16)}.message-menu-item{width:100%;justify-content:flex-start;border:0;background:none;color:var(--ink);font-size:12px;min-height:32px;padding:6px 9px;border-radius:7px;text-align:left}.message-menu-item:hover{background:#f1f4f8}
@media(min-width:761px){.message-menu-item{font-size:13px;min-height:34px}.message-more{font-size:16px}}
@media(max-width:760px){.message-more{min-height:34px;padding:0 10px}.message-menu-item{min-height:42px;font-size:13px}
/* Телефон: уведомления выскакивают сверху, как в Telegram. */
.toasts{top:max(8px,env(safe-area-inset-top));bottom:auto;left:10px;right:10px;flex-direction:column-reverse;align-items:stretch}}


/* Оформление и движение. Направление взято из разбора Refero: основа — Attio
   («точный инструмент»: белое полотно, разделяют ГРАНИЦЫ, а не тени; синий
   #407ff2 только как признак интерактивности), детали — Linear Changelog
   (глубина тональными слоями и сменой цвета границы, заголовки средним весом)
   и shadcn/ui (статусы крошечными приглушёнными пилюлями).
   Правила, которых держимся:
   — тень бывает только у по-настоящему парящего слоя: окно поверх, меню,
     всплывающее уведомление. У плоских карточек и кнопок теней нет;
   — одна шкала радиусов: кнопки 10, карточки 8, поля 7, метки 4, пилюли капсулой;
   — цвет редок: синий — интерактивность, зелёный и красный — только статусы;
   — движение быстрое и точное: 100 мс состояние, 150 элемент, 180 панель,
     220 смена экрана (26.09 ускорено на четверть); никаких пружин, двигаются лишь прозрачность и transform,
     и всё снимается системной настройкой «уменьшить движение». */
/* 02.10: одна мягкая кривая — быстрый старт и долгое плавное торможение;
   уходы — коротким разгоном. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-in:cubic-bezier(.4,0,1,1);--t-state:.1s;--t-item:.15s;--t-panel:.18s;--t-screen:.22s;
--ring:0 0 0 3px rgba(148,185,255,.4);--float:0 2px 3px -2px rgba(28,40,64,.10),0 10px 24px -8px rgba(28,40,64,.18)}

/* Свои ответы справа и голубые, сообщения клиента слева и белые. */
.message{border-radius:12px 12px 12px 4px}
.message.outgoing{align-self:flex-end;background:#eef3fc;border-color:#d9e3f6;border-radius:12px 12px 4px 12px}
.message.outgoing .sender{color:#2d67c7}
/* Подряд идущие реплики одного собеседника держатся плотнее. */
.messages>.message.outgoing+.message.outgoing,.messages>.message.incoming+.message.incoming{margin-top:-7px}
.message .message-time{margin-top:6px}
.message .message-actions{margin-top:0}
/* Полотно ленты плотнее белого: сообщения клиента не сливаются с фоном. */
.timeline{background:#f5f7fb}
@media(min-width:1100px){.message{max-width:74%}}

/* Список диалогов: выбранная строка — серой панелью и синей отметкой, без заливки цветом. */
.chat-row{position:relative;border-radius:8px}
.chat-row:hover{background:#f6f7f9}
.chat-row.selected{background:var(--panel)}
.chat-row.selected::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--blue)}
.chat-row.unread .chat-info strong{font-weight:700;color:var(--ink)}
.chat-row.unread .chat-info>span.chat-preview{color:#48525f}
.avatar{background:var(--panel);border-color:var(--line);color:#6f7988;font-weight:600}
.chat-row.selected .avatar{background:#fff;border-color:#d3d8df;color:var(--ink)}

/* Переключатели «Все / Непрочитанные / Прочитанные» и вкладки заказов — одним
   сегментным блоком: выбранное поднято белым, а не раскрашено. */
.read-filter,.orders-tabs{background:var(--panel);border-radius:10px;padding:2px;gap:2px}
.read-filter button,.orders-tabs button{border:1px solid transparent;background:transparent;border-radius:8px;color:#6f7988}
.read-filter button:hover,.orders-tabs button:hover{color:var(--ink)}
.read-filter button.active,.orders-tabs button.active{background:#fff;border-color:var(--line);color:var(--ink);font-weight:600}

/* Кнопки: одна шкала радиусов, нажатие и наведение — тоном, а не тенью. */
.primary,.orders-tabs button,.read-filter button,.order-fulfil,.order-write,.select-toggle,.login-card .primary{border-radius:10px}
.primary:hover:not(:disabled){background:#32343a;border-color:#32343a}
.primary:active:not(:disabled){background:#000;border-color:#000}
.icon-button:hover{background:var(--panel)}

/* Набор текста и клавиатурный фокус: одно кольцо на всё приложение. */
input,select,textarea{border-radius:7px}
input:focus,select:focus,textarea:focus{outline:none;border-color:#94b9ff;box-shadow:var(--ring)}
:focus-visible{outline:2px solid #94b9ff;outline-offset:2px}

/* Заголовки разделов: средний вес и плотный трекинг вместо жирности. */
.inbox-heading h2,.orders-view h1,.tools-view h1,.search-view h1,.admin h1,.details h2,.client-heading h2,.login-card h1{
font-weight:600;letter-spacing:-.02em}

/* Тонкие полосы прокрутки вместо широких системных. */
.chat-list,.timeline,.details,.orders-view,.search-view,.tools-view,.admin{scrollbar-width:thin;scrollbar-color:#cdd5e0 transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d4dae3;background-clip:content-box;border:3px solid transparent;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#bcc5d2;background-clip:content-box}

/* Заказ читается карточкой: состав слева, сумма справа крупно, действия под чертой.
   На широком экране заказы идут в две колонки. Карточка плоская — глубину при
   наведении даёт граница. */
.orders-list{display:grid;gap:12px;align-content:start}
@media(min-width:1180px){.orders-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.order-card{grid-template-columns:minmax(0,1fr) auto;align-items:start;padding:14px 16px;border-radius:8px}
.order-card>*{grid-column:1}
.order-card .order-head{grid-column:1/-1}
.order-card .order-items{font-weight:600;color:var(--ink)}
/* Состав заказа строками (27.10): регион — колонкой меток в начале строк, названия
   выровнены по одной линии, перенос длинного названия остаётся под ним самим. */
.order-card ul.order-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.order-card ul.order-items.regional{grid-template-columns:auto minmax(0,1fr);column-gap:9px}
.order-card .order-line{display:contents}
.order-card .order-line-title{overflow-wrap:anywhere;line-height:1.35}
.order-card .order-region.in-line{justify-self:stretch;text-align:center;align-self:start;margin-top:1px;white-space:nowrap}
.order-card .order-total{grid-column:2;grid-row:2;justify-self:end;display:grid;justify-items:end;gap:2px;max-width:13em;text-align:right;font-size:17px;font-weight:650;color:var(--ink);white-space:normal}
.order-card .order-sum{white-space:nowrap}
.order-card .order-extra{font-size:12px;font-weight:500;color:var(--muted);overflow-wrap:anywhere}
.order-card.compact .order-total{font-size:15px}
.order-card .order-actions{grid-column:1/-1;margin-top:9px;padding-top:10px;border-top:1px solid #f0f2f5}
.order-card.compact .order-actions{margin-top:6px;padding-top:8px}
@media(hover:hover){.orders-list .order-card:hover{border-color:#d3d8df}}
/* На телефоне действия заказа встают в столбец во всю ширину. */
@media(max-width:760px){.order-actions{flex-wrap:wrap}.order-actions>button{flex:1 1 100%}}

/* Парящие слои — единственное место, где есть тень. */
.toast,.overlay-card,.message-menu{box-shadow:var(--float)}
.toast{border-radius:10px}

@media(prefers-reduced-motion:no-preference){
button,a{transition:background-color var(--t-state) var(--ease-out),border-color var(--t-state) var(--ease-out),color var(--t-state) var(--ease-out),transform var(--t-state) var(--ease-out)}
/* Нажатие видно сразу: сжатие без разгона, отпускание — плавно. Строки списка
   не сжимаются — у них подсветка фона. */
button:active:not(:disabled){transform:scale(.97);transition-duration:0s}
.chat-link:active:not(:disabled){transform:none}
.chat-row:active{background:#eef2f7}
.tools-view button,.tools-picker-card button{transition:none}
.chat-row,.avatar,.order-card,.message{transition:background-color var(--t-item) var(--ease-out),border-color var(--t-item) var(--ease-out),color var(--t-item) var(--ease-out)}
input,select,textarea{transition:border-color var(--t-state) var(--ease-out),box-shadow var(--t-state) var(--ease-out)}
/* Экран, переписка и карточка клиента появляются коротким движением. */
@keyframes view-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tools-view,.search-view,.orders-view,.admin,.details{animation:view-in var(--t-panel) var(--ease-out) both}
/* Последнее сообщение поднимается снизу: новое видно, но спокойно. */
@keyframes msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Появление проигрывается один раз за жизнь сообщения. Своё сообщение за одну
   отправку трижды меняет узел (черновик → квитанция → сообщение переписки), и
   без этого оно «прыгало» три-четыре раза подряд: каждый новый узел заново
   играл анимацию. Узлы-продолжения приложение метит data-quiet. */
.messages>.message:last-child:not([data-quiet]){animation:msg-in var(--t-item) var(--ease-out) both}
/* Своё сообщение поднимается от поля ответа — из правого нижнего угла. */
@keyframes msg-out{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.messages>.message.pending:last-child:not([data-quiet]){transform-origin:100% 100%;animation:msg-out var(--t-panel) var(--ease-out) both}
/* Подтверждённое встаёт на место пузыря «в пути» и только доходит до полной
   яркости — без второго появления. */
@keyframes settle-in{from{opacity:.92}to{opacity:1}}
.messages>.message[data-settle]{animation:settle-in var(--t-item) var(--ease-out) both}
/* Пузырь пересобран посреди своего появления (черновик → квитанция → сообщение):
   новый узел доигрывает то же движение с того же места — задержка отрицательная. */
.messages>.message[data-carry]{transform-origin:100% 100%;animation:msg-out var(--t-panel) var(--ease-out) both;animation-delay:var(--carry,0ms)}
/* Подъезд ленты (27.10, motion.js glide): пока пузыри едут снизу, лента обрезана
   по вертикали, иначе браузер засчитал бы сдвиг в её длину. В покое не обрезаем:
   меню первого сообщения открывается над ним. */
.messages.gliding{overflow-x:visible;overflow-y:clip}
/* Блоки карточки клиента (заказы, позиции, перепродажи) проявляются, а не
   выскакивают, когда пришли. */
.client-orders,.client-positions{animation:veil-in var(--t-item) var(--ease-out) both}
/* Уведомление выезжает из своего угла. */
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toast{animation:toast-in .16s var(--ease-out) both}
/* Окно поверх: затемнение и карточка приходят вместе. */
@keyframes veil-in{from{opacity:0}to{opacity:1}}
@keyframes card-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.overlay{animation:veil-in var(--t-state) var(--ease-out) both}
/* Переписка на компьютере только проявляется: сдвигать слой со всеми
   сообщениями, пока его рисуют, — значит терять первые кадры. */
@media(min-width:761px){.conversation{animation:veil-in var(--t-panel) var(--ease-out) both}}
/* Фото в просмотре раскрывается, а не выскакивает. */
@keyframes viewer-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.media-image{animation:viewer-in var(--t-item) var(--ease-out) both}
.overlay-card{animation:card-in var(--t-panel) var(--ease-out) both}
.login-card{animation:card-in var(--t-panel) var(--ease-out) both}
/* Меню сообщения раскрывается от того угла, где стоит «…». */
@keyframes menu-in{from{opacity:0;transform:scale(.98) translateY(3px)}to{opacity:1;transform:none}}
.message-menu{transform-origin:bottom right;animation:menu-in var(--t-state) var(--ease-out) both}
@keyframes badge-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.nav-badge{animation:badge-in var(--t-item) var(--ease-out) both}
/* Пока ответ в пути, строка состояния мягко дышит. */
@keyframes pulse-soft{0%,100%{opacity:1}50%{opacity:.6}}
.reply-result[data-state="saving"],.reply-result[data-state="queued"],.reply-result[data-state="sending"]{animation:pulse-soft 1.7s ease-in-out infinite}
/* «…» у сообщения проявляется под курсором; граница пузыря темнеет — так же,
   как в референсе глубина даётся границей, а не тенью. На телефоне наведения
   нет, поэтому кнопка остаётся видимой. */
@media(hover:hover){.message .message-more{opacity:.4;transition:opacity var(--t-state) var(--ease-out)}
.message:hover .message-more,.message:focus-within .message-more{opacity:1}
.message.incoming:hover{border-color:#dbe1ea}
.message.outgoing:hover{border-color:#c9d8f2}}
}
@media(prefers-reduced-motion:no-preference) and (max-width:760px){
/* Уведомления на телефоне приходят сверху — оттуда же и выезжают. */
@keyframes toast-in-top{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.toast{animation-name:toast-in-top}
/* Переход в переписку — сдвигом, как в приложении, но едут только лёгкие части:
   шапка, панель над лентой и поле ответа. Лента со всеми сообщениями лишь
   проявляется — сдвигать её, пока её рисуют, значит терять первые кадры.
   «Назад» возвращает список коротким сдвигом слева. */
@keyframes slide-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes slide-back{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.mobile-chat .conversation-header,.mobile-chat .timeline-toolbar,.mobile-chat .reply-composer,.mobile-info .details{animation:slide-in var(--t-screen) var(--ease-out) both}
.mobile-chat .messages{animation:veil-in var(--t-item) var(--ease-out) both}
.shell:not(.mobile-chat) .inbox{animation:slide-back var(--t-item) var(--ease-out) both}
/* Окна на телефоне — нижние шторки, поэтому поднимаются снизу. */
@keyframes sheet-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.overlay-card{animation-name:sheet-in}
}

/* Иерархия в карточке заказа по правилу основы: главное действие — тёмная
   кнопка, второе — белая с границей. Цветом остаются только статусы, и их
   тона взяты из той же палитры: приглушённые зелёный, красный и охра. */
.order-fulfil{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.order-fulfil:hover:not(:disabled){background:#32343a;border-color:#32343a}
.order-fulfil:active:not(:disabled){background:#000;border-color:#000}
.order-write{background:#fff;border-color:#d3d8df;color:var(--ink)}
.order-write:hover:not(:disabled){background:var(--panel)}
.order-write:disabled{background:var(--panel);border-color:var(--line);color:#b5bdc9}
.order-state.open{background:#fdf3e2;color:#705500}
.order-state.done{background:#e8f3ed;color:#075a39}
.order-state.danger{background:#fbeceb;color:#772322}
/* Один синий на строку списка: отметка выбранного совпадает со счётчиком непрочитанных. */
.chat-row.selected::before{background:#2d67c7}
/* В карточке клиента колонка узкая: заказ идёт одним столбцом, кнопки — во всю ширину. */
.order-card.compact{grid-template-columns:minmax(0,1fr)}
.order-card.compact .order-total{grid-column:1;grid-row:auto;justify-self:start;justify-items:start;text-align:left;max-width:none}
.order-card.compact .order-actions{flex-wrap:wrap}
.order-card.compact .order-actions>button{flex:1 1 100%}

/* Лента сообщений получает всю высоту, какую можно отдать. Поле ответа в покое
   занимает одну строку и растёт вместе с текстом (высоту ставит growReply,
   потолок здесь), шапка и панель над лентой стали ниже, а на телефоне в самой
   переписке прячется и верхняя полоса приложения — назад ведёт стрелка, как в
   мессенджере. */
.reply-composer{padding:10px 20px;max-height:60%}
.reply-composer textarea{min-height:44px;max-height:34vh;margin:0 0 6px}
.reply-composer p:empty{display:none}
.conversation-header{min-height:70px;padding:14px 24px}
.timeline{padding:12px 20px 16px}
@media(max-width:760px){
.reply-composer{padding:8px 12px max(8px,env(safe-area-inset-bottom));max-height:52%}
.reply-composer textarea{min-height:42px;max-height:28vh}
.conversation-header{min-height:58px;padding:8px 10px}
.timeline-toolbar{min-height:32px;padding:3px 10px}
.timeline{padding:8px 12px 12px}
}
@supports selector(:has(*)){@media(max-width:760px){
body:has(.shell.mobile-chat) .topbar{display:none}
body:has(.shell.mobile-chat) .shell{height:100dvh}
}}
/* Раз верхняя полоса в переписке скрыта, уведомление не должно накрывать шапку
   диалога: стрелка «назад» и имя клиента остаются доступны, пока оно висит. */
@supports selector(:has(*)){@media(max-width:760px){
body:has(.shell.mobile-chat) .toasts,body:has(.shell.mobile-info) .toasts{top:calc(60px + max(8px,env(safe-area-inset-top)))}
body:has(.shell.mobile-info) .topbar{display:none}
body:has(.shell.mobile-info) .shell{height:100dvh}
}}

/* Поле ответа как в мессенджере: скрепка слева, круглая кнопка отправки справа —
   всё внутри одной рамки (приём взят с композеров Meta AI и Telegram Web в Refero;
   вид кнопки — главное действие основы Attio: заливка Ink, без тени).
   Счётчик символов ушёл из-под поля и показывается только у предела. */
.composer-field{position:relative;display:flex;align-items:flex-end;gap:6px;background:#fff;
border:1px solid #d6dde7;border-radius:22px;padding:4px 4px 4px 6px}
.composer-field textarea{flex:1;min-width:0;min-height:38px;border:0;background:none;border-radius:0;
padding:9px 4px;margin:0;box-shadow:none;resize:none}
.composer-field textarea:focus{border:0;box-shadow:none;outline:none}
#reply-attach,#saved-attach{flex:0 0 auto;width:36px;height:36px;min-height:36px;padding:0;border:0;background:none;
border-radius:50%;font-size:17px;color:#6f7988}
#reply-attach:hover:not(:disabled),#saved-attach:hover:not(:disabled){background:var(--panel)}
.send-button{flex:0 0 auto;width:36px;height:36px;min-height:36px;padding:0;border:1px solid var(--ink);
background:var(--ink);color:#fff;border-radius:50%;display:grid;place-items:center}
.send-button:hover:not(:disabled){background:#32343a;border-color:#32343a}
.send-button:active:not(:disabled){background:#000;border-color:#000}
.send-button:disabled{background:var(--panel);border-color:var(--line);color:#b5bdc9;opacity:1;cursor:default}
.send-icon{width:19px;height:19px;display:block}
.reply-actions{margin-top:0}
.reply-actions>*{margin-top:8px}
#reply-count{display:none}
#reply-count.visible{display:inline}
#reply-count.over{color:#772322;font-weight:600}
@media(prefers-reduced-motion:no-preference){
.composer-field{transition:border-color var(--t-state) var(--ease-out),box-shadow var(--t-state) var(--ease-out)}
}
.composer-field:focus-within{border-color:#94b9ff;box-shadow:var(--ring)}
@media(max-width:760px){.composer-field{border-radius:20px;padding:3px 3px 3px 5px}
.composer-field textarea{min-height:36px;padding:8px 4px}
#reply-attach,.send-button{width:38px;height:38px;min-height:38px}}

/* Дата парит таблеткой над лентой, полосы во всю ширину больше нет. Прежняя
   полоса закрывала собой предыдущую дату при прокрутке; теперь это делает сама
   таблетка: она непрозрачная и следующая накрывает предыдущую. */
.day-separator{background:transparent;padding:7px 0 5px;min-height:34px}
.day-separator time{background:#eef1f6;border:1px solid #e1e7ef;color:#5b6879;padding:3px 14px}

/* Раздел теперь называется в боковом меню, и заголовок над списком не нужен:
   строка ужимается до одной кнопки «Выбрать», лента получает высоту. */
#view-name{display:none}
.inbox-heading{justify-content:flex-end;padding:10px 14px 4px;min-height:0}
.inbox-heading:not(:has(button:not([hidden]))){display:none}
/* Регион заказа — отдельная метка рядом с номером: по ней видно, на какой
   аккаунт оформлять. Цвет нейтральный, статус остаётся единственным цветным. */
.order-region{font-size:10px;font-weight:600;padding:3px 8px;border-radius:999px;
background:var(--panel);color:#46505e;border:1px solid var(--line);text-transform:uppercase;letter-spacing:.3px}
/* Цитата ответа: автор и начало сообщения в одну строку, как в Telegram. */
.reply{display:grid;gap:1px;padding:5px 9px;line-height:1.35}
.reply-author{font-weight:650;color:#2d67c7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-text{color:#5b6879;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Заметки переехали наверх карточки: жёлтый блок больше не «подвал». */
.note-area{margin:16px -18px;padding:18px;min-height:0;border-bottom:1px solid var(--line)}
.note-area textarea{min-height:88px}
@media(max-width:760px){.note-area{margin:16px -22px;padding:20px 22px;min-height:0}}
.client-orders{margin-top:18px}

/* Закрепления и «Избранное». Закреплённый диалог стоит наверху списка с меткой,
   закреплённое сообщение — полосой над лентой, как в Telegram. Цвет по-прежнему
   редок: метки нейтральные, синим отмечено только то, с чем работают. */
.chat-pin{font-size:10px;line-height:1;opacity:.75}
.chat-row.pinned{background:#fbfcfe}
.chat-row.pinned.selected{background:var(--panel)}
.pinned-bar{display:flex;align-items:center;gap:10px;width:100%;min-height:0;text-align:left;
border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff;padding:8px 20px}
.pinned-bar:hover{background:var(--panel)}
.pinned-mark{flex:0 0 auto;font-size:13px}
.pinned-body{display:grid;gap:1px;min-width:0;flex:1}
.pinned-label{font-size:10px;font-weight:650;color:#2d67c7;letter-spacing:.2px}
.pinned-text{font-size:12px;color:#46505e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pinned-count{flex:0 0 auto;font-size:10px;color:var(--muted)}
.message.pinned{border-color:#c8d8f3;box-shadow:inset 3px 0 0 #2d67c7}
.message.outgoing.pinned{box-shadow:inset -3px 0 0 #2d67c7}
.detail-actions{margin:10px 0 4px}
.detail-actions button{font-size:12px;min-height:34px;padding:6px 12px;width:100%}
/* «Избранное»: тот же композер, что и в переписке, и карточки записей под ним. */
.saved-view{flex:1;min-width:0;min-height:0;overflow:auto;padding:32px 36px max(24px,env(safe-area-inset-bottom))}
.saved-view h1{font-size:22px;margin-bottom:6px}
.saved-view>p{margin-bottom:16px}
.saved-form{max-width:760px;margin-bottom:20px}
.saved-form textarea{min-height:38px;max-height:34vh}
.saved-list{display:grid;gap:10px;max-width:760px;align-content:start}
.saved-note{position:relative;border:1px solid var(--line);border-radius:8px;background:#fff;padding:12px 44px 10px 14px}
.saved-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;margin-bottom:6px}
.saved-remove{position:absolute;top:8px;right:8px;font-size:11px;min-height:28px;padding:4px 9px;
border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:8px}
.saved-remove:hover{color:#772322;border-color:#e6c9c6}
@media(max-width:760px){.saved-view{padding:22px 16px max(24px,env(safe-area-inset-bottom));width:100%}
.saved-form textarea{font-size:16px}.saved-note{padding:12px 14px 40px}
.saved-remove{top:auto;bottom:8px;right:8px;min-height:36px}
.pinned-bar{padding:7px 12px}}
@media(prefers-reduced-motion:no-preference){.pinned-bar{transition:background-color var(--t-state) var(--ease-out)}}

/* Ссылки на оплату: карточка на каждую, адрес читается целиком. */
.paylinks-panel{max-width:760px;min-width:0}
.paylinks-panel form{display:grid;gap:4px;margin-bottom:16px}
.paylinks-panel input{min-height:40px}
.paylinks-list{display:grid;gap:10px;margin-top:4px}
.paylink-card{border:1px solid var(--line);border-radius:8px;background:#fff;padding:12px 14px;display:grid;gap:6px}
.paylink-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.paylink-title{font-size:12px;color:var(--muted)}
.paylink-url{font-size:12px;color:#2864c9;overflow-wrap:anywhere}
@media(hover:hover){.paylink-card:hover{border-color:#d3d8df}}
@media(max-width:760px){.paylinks-panel input{font-size:16px;min-height:44px}
.paylink-card .tools-actions{flex-wrap:wrap}.paylink-card .tools-actions>button{flex:1 1 140px}}

/* Сообщение компактнее: время уходит в конец текста, повторная подпись
   собеседника не занимает строку, отступы уже — в ленту помещается больше. */
.message{padding:7px 10px 5px;min-width:0}
.messages{gap:8px}
.message .sender{font-size:10px;margin-bottom:3px}
.messages>.message.outgoing+.message.outgoing .sender,
.messages>.message.incoming+.message.incoming .sender{display:none}
.message .message-time{float:right;margin:2px 0 0 10px;padding-top:2px;font-size:10px}
.message .message-text::after{content:"";display:block;clear:both}
.message{position:relative}
/* «…» стоит в самом углу пузыря и не переносится на свою строку при длинном
   тексте; время держится левее, чтобы они не наезжали друг на друга. */
.message .message-actions{position:absolute;right:7px;bottom:3px;margin:0;height:auto;overflow:visible}
.message .message-time{margin-right:20px}
.message .message-more{min-height:16px;padding:0 3px;font-size:14px;line-height:1}
@media(min-width:761px){.message{padding:8px 11px 6px}.message .message-time{font-size:10px}}
@media(max-width:760px){.message{padding:7px 10px 5px;min-width:0}
.message .message-more{min-height:22px;padding:0 6px;font-size:15px}}

/* Кнопка «вниз» живёт над полем ответа и появляется, только когда лента поднята. */
.thread-anchor{position:relative;height:0;z-index:6}
.jump-latest{position:absolute;right:16px;bottom:10px;width:38px;height:38px;min-height:38px;
padding:0;border:1px solid var(--line);background:#fff;color:#46505e;border-radius:50%;display:grid;place-items:center;
box-shadow:var(--float)}
.jump-latest:hover{background:var(--panel);color:var(--ink)}
.jump-icon{width:18px;height:18px;display:block}
.conversation{position:relative}
@media(max-width:760px){.jump-latest{right:12px;bottom:8px;width:42px;height:42px;min-height:42px}}
@media(prefers-reduced-motion:no-preference){
@keyframes jump-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.jump-latest{animation:jump-in var(--t-item) var(--ease-out) both}}
/* PDF: первая страница прямо в ленте, карточка со скачиванием под ней.
   Размер задан РАМКЕ (.pdf-page), а не всему вложению: у вложения класс
   .attachment-pdf, и правило с высотой ловило заодно его — тогда карточка
   файла вываливалась из пузыря сообщения. Высота — как у фото, чтобы от
   чека или счёта было видно не только шапку. */
.pdf-page{display:block;width:100%;max-width:420px;height:360px;border:1px solid var(--line);
border-radius:8px;background:#fff;opacity:0;transition:opacity var(--t-panel) var(--ease-out)}
.pdf-page[data-loaded]{opacity:1}
@media(prefers-reduced-motion:reduce){.pdf-page{transition:none}}
@media(max-width:760px){.pdf-page{height:300px;max-width:100%}}

/* Панель над лентой появляется только когда в ней есть что показать:
   возврат к ответу, состояние приёма или закреплённое сообщение. Пустая полоса
   под именем клиента больше не занимает высоту. */
.timeline-toolbar:not(:has(> :not([hidden]))){display:none}

/* Ожидание подтверждения владельца и страница решения. Та же карточка входа,
   тот же ритм: заголовок, спокойное объяснение, действие. Три точки дышат —
   единственная анимация, и она снимается системной настройкой движения. */
.login-wait{margin-top:26px;animation:card-in var(--t-panel) var(--ease-out) both}
.login-wait h2{margin:18px 0 8px}
.login-wait p{margin-bottom:10px}
.login-wait>button{width:100%;margin-top:16px;min-height:42px}
.wait-mark{display:flex;gap:6px}
.wait-mark span{width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:.35;
animation:wait-pulse 1.25s var(--ease-out) infinite}
.wait-mark span:nth-child(2){animation-delay:.16s}
.wait-mark span:nth-child(3){animation-delay:.32s}
@keyframes wait-pulse{40%{opacity:1;transform:translateY(-3px)}}
.decide-card h1{font-size:24px}
.decide-facts{margin-top:22px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fbfcfd}
.decide-fact{display:flex;gap:14px;justify-content:space-between;align-items:baseline;
padding:11px 14px;border-bottom:1px solid var(--line);font-size:12px}
.decide-fact:last-child{border-bottom:0}
.decide-fact span{color:var(--muted);flex:0 0 auto}
.decide-fact strong{font-weight:600;text-align:right;overflow-wrap:anywhere}
.decide-actions{display:grid;gap:9px;margin-top:22px}
.decide-actions button{width:100%;min-height:46px;justify-content:center}
.decide-actions #decide-deny{color:#a04134;border-color:#f0d7d2}
.decide-actions #decide-deny:hover:not(:disabled){background:#fdf3f1}
@media(prefers-reduced-motion:reduce){.wait-mark span{animation:none;opacity:.7}}

/* Отправленное видно сразу в ленте, как в Telegram: пузырь появляется до
   подтверждения, с часиками. Пришло подтверждение — галочка, не ушло —
   восклицательный знак и «Повторить отправку» рядом с самим сообщением. */
.message.pending{opacity:.92}
.message.pending .message-text{white-space:pre-wrap}
.pending-foot{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:10px;color:#8b95a3;flex-wrap:wrap}
.pending-mark{width:15px;height:15px;border-radius:50%;display:inline-grid;place-items:center;
font-size:10px;line-height:1;background:#e7edf7;color:#6a7788}
.pending-label{overflow-wrap:anywhere}
.pending-action{min-height:26px;font-size:10px;padding:3px 8px;border-radius:7px}
.message.pending[data-state="failed"],.message.pending[data-state="expired"],
.message.pending[data-state="unknown"]{background:#fff6f4;border-color:#f0d7d2}
.message.pending[data-state="failed"] .pending-mark,.message.pending[data-state="expired"] .pending-mark,
.message.pending[data-state="unknown"] .pending-mark{background:#f6ddd7;color:#a04134;font-weight:700}
.message.pending[data-state="sent"] .pending-mark{background:#dff0e4;color:#2f7d4f}

/* Заказ клиента выбирается из списка незакрытых; поле рядом остаётся для
   номеров, которых в CRM нет. */
#gifts-order-pick{margin-bottom:6px}
#gifts-order-pick[disabled]{color:var(--muted)}

/* Перетаскивание снимка: подсказываем, куда он упадёт, не перекрывая переписку. */
.timeline.dropping,.reply-composer.dropping,.saved-form.dropping{outline:2px dashed var(--blue);outline-offset:-5px;background:#f4f8ff}
.saved-form.dropping{padding:6px;border-radius:12px}
.drop-hint{margin-top:8px;color:#2864c9;font-weight:600}

/* Быстрые ответы: список появляется над полем, пока набирают команду. */
/* Подсказки-ответы над полем (27.10): строка «пилюль», первая — главная. */
.suggest-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:1px 0 8px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.suggest-row::-webkit-scrollbar{display:none}
.suggest-chip{flex:0 0 auto;border:1px solid #c9d8f2;background:#f4f8ff;color:#2864c9;font:inherit;font-size:13px;line-height:1;padding:8px 12px;border-radius:999px;white-space:nowrap;min-height:0;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.suggest-chip:hover{background:#e7effd;border-color:#a9c3ee}
.suggest-chip.lead{background:#2d67c7;border-color:#2d67c7;color:#fff}
.suggest-chip.lead:hover{background:#2459b0}
@media (max-width:760px){.suggest-chip{padding:10px 13px}}
.quick-picker{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;max-height:210px;overflow-y:auto;
border:1px solid var(--line);border-radius:10px;background:#fff;padding:4px;box-shadow:0 10px 26px rgba(19,32,54,.12)}
.quick-item{display:flex;gap:9px;align-items:baseline;width:100%;justify-content:flex-start;border:0;background:none;
text-align:left;padding:7px 9px;border-radius:7px;min-height:34px}
.quick-item:hover{background:#f1f4f8}
.quick-item strong{color:#2864c9;font-size:12px;flex-shrink:0}
.quick-item span{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-item.learned span{color:inherit;font-size:13px}
.suggest-admin-learned{white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.suggest-admin-row.muted-row .suggest-admin-learned{color:var(--muted)}
.quick-row{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px;background:#fff}
.quick-row textarea{min-height:120px;margin:8px 0}
.quick-row .quick-name{display:flex;align-items:baseline;gap:8px}
.quick-row .quick-name strong{font-size:14px;color:#2864c9}
.quick-actions{display:flex;gap:8px;align-items:center}
/* Подсказки над полем — раздел владельца под командами. */
.suggest-admin-box{margin-top:28px}
.suggest-admin{margin-bottom:26px}
.suggest-admin>h3{font-size:16px;margin-bottom:4px}
.suggest-admin>p.muted{margin-bottom:12px}
.suggest-admin-row{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fff}
.suggest-admin-row .quick-name{justify-content:space-between}
.suggest-admin-toggle{display:flex;align-items:center;gap:6px;margin:0;font-weight:500;color:var(--muted);white-space:nowrap}
.suggest-admin-toggle input{width:auto}
.suggest-admin-text,.suggest-admin-new{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.suggest-admin-text textarea,.suggest-admin-new textarea{min-height:58px}
.suggest-admin-new>button{align-self:flex-start}

/* Готовые аккаунты: регионы сверху, карточки со снимком блока. */
.accounts-regions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.accounts-region{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:120px;
padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left}
.accounts-region.active{border-color:var(--blue);background:#f2f7ff}
.accounts-region strong{font-size:13px}
.accounts-upload{margin-bottom:10px}
.accounts-list{display:flex;flex-direction:column;gap:10px}
.account-card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px 14px}
.account-card.used{background:#f7f8fa;color:var(--muted)}
.account-head{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.account-head strong{font-size:13px;overflow-wrap:anywhere}
.account-mark{flex-shrink:0;color:var(--muted)}
.account-card.used .account-mark{color:#a04134}
.account-block{white-space:pre-wrap;font-size:11px;line-height:1.5;margin:8px 0;max-height:160px;overflow:auto;
background:#f8fafc;border-radius:8px;padding:8px 10px;overflow-wrap:anywhere}
.account-actions{display:flex;gap:8px;flex-wrap:wrap}
.positions-panel{max-width:1100px;min-width:0}
.positions-panel .tools-column>label{display:block;margin-top:12px}
.positions-panel .tools-column>label:first-child{margin-top:0}
.positions-panel select,.positions-panel input{width:100%;min-height:44px}
.positions-panel #positions-tab{margin-top:6px}
.positions-caption{font-size:12px;color:var(--muted);margin:16px 0 6px}
.positions-list{display:grid;gap:6px;max-height:320px;overflow:auto}
.positions-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.positions-row strong{font-size:13px;overflow-wrap:anywhere}
.positions-row span{font-size:11px;color:var(--muted)}
.positions-row[aria-pressed="true"]{border-color:#2864c9;background:#eef3ff}
.positions-row:disabled{opacity:.55}
.positions-panel #positions-result{display:block;width:100%;white-space:pre-wrap;overflow-wrap:anywhere;min-height:260px}
@media(max-width:760px){.positions-panel select,.positions-panel input,.positions-panel #positions-result{font-size:16px}.positions-list{max-height:260px}.positions-row strong{font-size:14px}.positions-row span{font-size:12px}}
.positions-columns{font-size:12px;color:var(--muted);margin:12px 0 0}
.positions-columns.warning{color:#8a5a00;background:#fff6e0;border:1px solid #f0dca8;border-radius:8px;padding:8px 10px}
.positions-issued{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}
.positions-issued-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.positions-issued-head .positions-caption{margin:0}
.positions-issued-list{display:grid;gap:8px;margin-top:8px}
.positions-issued-item{border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px 12px}
.positions-issued-title{display:flex;flex-direction:column;gap:2px}
.positions-issued-title strong{font-size:13px;overflow-wrap:anywhere}
.positions-issued-title span{font-size:11px;color:var(--muted)}
.positions-issued-item .tools-actions{margin-top:8px}
@media(max-width:760px){.positions-issued-item .tools-actions>button{flex:1 1 140px}}
.pending-foot .pending-dismiss{color:#a04134}
.tools-targets .tools-order-fit{border-left:3px solid #2864c9}
.tools-targets .search-hit:disabled{opacity:.55}
.saved-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px}
.saved-tools .saved-remove{position:static}
.saved-change{font-size:11px;min-height:28px;padding:4px 9px;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:8px}
.saved-change:hover{color:var(--text,#1c1d1f);border-color:#cfd6df}
.saved-note{padding-right:150px}
.saved-note.editing{padding:12px 14px}
.saved-edit{width:100%;min-height:80px;font-size:14px;white-space:pre-wrap}
.saved-actions{display:flex;gap:8px;margin-top:8px}
@media(max-width:760px){.saved-note{padding:12px 14px 48px}.saved-tools{top:auto;bottom:8px}.saved-change{min-height:36px}.saved-edit{font-size:16px}}
/* Заготовка ленты, пока открывающийся диалог задерживается: пара серых пузырей
   вместо пустоты. Появляется только после 150 мс ожидания. */
.messages.loading::before,.messages.loading::after{content:"";display:block;height:46px;border-radius:12px;background:#eef1f5;width:46%}
.messages.loading::after{align-self:flex-end;width:34%;background:#e6edf9}
@media(prefers-reduced-motion:no-preference){.messages.loading::before,.messages.loading::after{animation:pulse-soft 1.2s ease-in-out infinite}}
/* Отмена оплаченного заказа с возвратом: пометка в карточке, окно, страница решения. */
.order-cancel-note{margin-top:8px;font-size:12px;padding:6px 10px;border-radius:8px;background:#f3f5f8;color:var(--muted)}
.order-cancel-note.open{background:#fdf3e2;color:#705500}
.order-cancel-note.done{background:#e8f3ed;color:#075a39}
.order-cancel-note.danger{background:#fdeceb;color:#a33028}
.order-cancel,.order-cancel-retry{font-size:13px;min-height:40px;padding:4px 11px;border:1px solid #f1c9c5;background:#fff;color:#a33028;border-radius:8px;font-weight:500}
.order-cancel-retry{background:#a33028;border-color:#a33028;color:#fff}
.order-reopen{font-size:13px;min-height:40px;padding:4px 11px;border:1px solid #d3d8df;background:#fff;color:var(--ink);border-radius:8px;font-weight:500}.order-reopen:hover:not(:disabled){background:var(--panel)}.order-reopen:disabled{color:#9aa3af}
.order-cancel-card{max-width:520px}
.order-cancel-card #order-cancel-status{margin:10px 0;line-height:1.5}
.cancel-lines{margin:12px 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.5}
.order-cancel-form{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.order-cancel-form label{font-size:12px;color:var(--muted)}
.order-cancel-form textarea{width:100%;min-height:70px;font-size:14px;resize:vertical}
.decide-card .cancel-lines{text-align:left;margin-top:18px}
@media(max-width:760px){.order-cancel,.order-cancel-retry{min-height:44px}}
/* Позиции клиента в карточке: тип, логин, дата и «Копировать» сообщение целиком. */
.client-positions{margin-top:18px}
.client-positions h3{font-size:13px;margin-bottom:8px}
.position-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.position-row:last-child{border-bottom:0}
.position-open{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;background:none;padding:2px 0;text-align:left;cursor:pointer}
.position-kind{font-size:10px;font-weight:650;color:#72859c;letter-spacing:.02em}
.position-login{font-size:13px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.position-open:hover .position-login{text-decoration:underline}
.position-copy{flex:none;font-size:12px;min-height:34px;padding:4px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.position-copy.copied{background:#e8f3ed;border-color:#bfe3cc;color:#075a39}
@media(max-width:760px){.position-copy{min-height:44px}}
.position-actions{display:flex;flex:none;gap:6px}
.position-issue{flex:none;font-size:12px;min-height:34px;padding:4px 10px;border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:#fff}
.position-issue.copied{background:#e8f3ed;border-color:#bfe3cc;color:#075a39}
.position-issue:disabled:not(.copied){opacity:.6}
@media(max-width:760px){.position-issue{min-height:44px}.position-row{flex-wrap:wrap}.position-actions{width:100%;justify-content:flex-end}}
.position-find{display:flex;gap:6px;margin:0 0 6px}
.position-find input{flex:1;min-width:0;min-height:34px;padding:4px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.position-find button{flex:none;font-size:12px;min-height:34px;padding:4px 12px;border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:#fff}
.position-find button:disabled{opacity:.6}
.position-found{margin:0 0 8px;padding:2px 10px;border-radius:8px;background:#f4f7fb;border:1px solid var(--line)}
.position-found>p{margin:8px 0}
@media(max-width:760px){.position-find input,.position-find button{min-height:44px}}
/* Поиск и «Выбрать» — одной строкой над списком: раньше кнопка занимала свою
   строку, а у поля пустовала соседняя колонка. У менеджера кнопки нет — поле
   на всю ширину. */
.inbox-controls .inbox-search{grid-column:1/-1;display:flex;gap:8px;align-items:center}
.inbox-search input{flex:1;min-width:0}
.inbox-search .select-toggle{flex:none;min-height:42px;padding:4px 14px}

/* Уведомления: кнопка в шапке и окно раздела. */
.push-open{min-width:38px;padding:6px 9px;font-size:15px;line-height:1}
.push-card #push-status{line-height:1.45;margin:6px 0 0}
.push-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.push-prefs{border:0;padding:12px 0 0;margin:0;display:grid;gap:12px;border-top:1px solid var(--line)}
.push-prefs label{display:flex;align-items:center;gap:10px;font-size:14px}
.push-prefs input{width:18px;height:18px;margin:0}
.push-actions:not(:has(button:not([hidden]))){display:none}
/* Вышла новая версия CRM: плашка сверху, обновление — по нажатию, когда удобно. */
.update-banner{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;border-radius:12px;background:var(--ink);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:13px;max-width:calc(100vw - 24px)}
.update-banner[hidden]{display:none}
.update-banner button{background:#fff;color:var(--ink);border:0;border-radius:8px;padding:6px 12px;font-weight:600;min-height:32px}
/* Просмотр вложения поверх переписки: фото, видео, PDF и кнопка «Назад».
   Сверху — отступ под вырез экрана: CRM с экрана «Домой» идёт под статус-бар. */
.media-viewer{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:#0b0e13;color:#fff;
padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
animation:veil-in var(--t-state) var(--ease-out) both}
.media-bar{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;flex:0 0 auto}
.media-bar .media-back{background:#ffffff1f;border:0;color:#fff;font-size:15px;font-weight:600;min-height:40px;padding:8px 14px;border-radius:10px}
.media-bar .media-back:hover{background:#ffffff33}
.media-name{flex:1;min-width:0;font-size:13px;font-weight:500;color:#ffffffc7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-download{color:#fff;font-size:13px;text-decoration:none;padding:8px 12px;border-radius:10px;border:1px solid #ffffff40}
.media-download:not([href]){display:none}
.media-stage{flex:1;min-height:0;display:flex;overflow:auto;overscroll-behavior:contain;padding:0 12px 12px}
.media-image{margin:auto;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;border-radius:4px}
.media-image.zoomed{max-width:none;max-height:none;cursor:zoom-out}
.media-video{margin:auto;max-width:100%;max-height:100%;background:#000;border-radius:6px}
.media-pdf{flex:1;width:100%;border:0;border-radius:6px;background:#fff}
/* Прозрачная ссылка поверх первой страницы PDF в ленте — нажатие открывает просмотр. */
.attachment-pdf{position:relative}
.pdf-open{position:absolute;top:0;left:0;width:100%;max-width:420px;height:360px;border-radius:8px;cursor:zoom-in}
@media(max-width:760px){.pdf-open{height:300px;max-width:100%}.media-bar{min-height:52px;padding:6px 10px}.media-stage{padding:0 0 8px}}
/* Длинные списки: строки за краем экрана браузер не рисует. Высота-заглушка
   запоминается по последней отрисовке (auto). Кольцо фокуса — внутрь строки:
   содержимое строки теперь обрезается по её краю. */
.chat-row{content-visibility:auto;contain-intrinsic-size:auto 64px}
.order-card{content-visibility:auto;contain-intrinsic-size:auto 180px}
.chat-link:focus-visible{outline-offset:-2px}
/* Телефон: заказ одним столбцом — состав, под ним сумма; справа ему тесно. */
@media(max-width:760px){.order-card{grid-template-columns:minmax(0,1fr)}
.order-card .order-total{grid-column:1;grid-row:auto;justify-self:start;justify-items:start;text-align:left;max-width:none}}
/* Сворачиваемые разделы карточки клиента: заголовок-строка со счётчиком и
   стрелкой, нажатие сворачивает и разворачивает. Раскрытие без анимации
   высоты — она дорогая; содержимое лишь проявляется. */
.fold>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;user-select:none;-webkit-user-select:none;min-height:30px;margin-bottom:6px;border-radius:6px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary h3{margin:0}
.fold>summary::after{content:"";flex:0 0 auto;width:7px;height:7px;margin:0 4px 0 auto;border-right:1.5px solid #8a939e;border-bottom:1.5px solid #8a939e;transform:translateY(-2px) rotate(45deg)}
.fold:not([open])>summary{margin-bottom:0}
.fold:not([open])>summary::after{transform:rotate(-45deg)}
.fold-count{font-size:11px;font-weight:600;color:#6f7988;background:var(--panel);border-radius:9px;min-width:20px;padding:0 7px;line-height:18px;text-align:center}
.note-area .fold-count{background:#f3ead0;color:#8a7440}
.fold-count:empty{display:none}
@media(hover:hover){.fold>summary:hover h3{color:#2d67c7}}
@media(max-width:760px){.fold>summary{min-height:40px}}
@media(prefers-reduced-motion:no-preference){.fold>summary::after{transition:transform var(--t-state) var(--ease-out)}
.fold[open]>summary~*{animation:veil-in var(--t-item) var(--ease-out) both}}
/* Перепродажи: карточка сделки — та же, что у заказа; стороны строками с
   «Открыть», метка автораспознавания приглушена, выбор позиции — под карточкой. */
.order-state.waiting{background:var(--panel);color:#6f7988}
.resale-auto{font-size:11px;color:#8a939e}
.resale-side{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:#48525f}
.resale-side>span{min-width:0;overflow-wrap:anywhere}
.resale-side button{font-size:12px;min-height:28px;padding:3px 10px}
.resale-choices{grid-column:1/-1;display:grid;gap:6px;margin-top:6px;padding-top:8px;border-top:1px solid #f0f2f5}
.resale-choices button{justify-content:flex-start;text-align:left}
.resale-form{display:grid;gap:10px}
.resale-fields{display:grid;gap:6px}
.resale-fields label{font-size:12px;color:var(--muted);margin-top:4px}
.resale-form .primary{margin-top:6px}
.order-card.resale-card .order-actions{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:760px){.resale-fields input,.resale-fields select{font-size:16px;min-height:44px}.resale-side button{min-height:36px}
.order-card.resale-card .order-actions>button.order-write{flex:1 1 calc(50% - 3px)}}
.resale-link-results{display:grid;gap:6px;margin-top:4px}
.resale-link-results .resale-pick{justify-content:flex-start;text-align:left}
/* «Выдать позицию» в заказе: строка на каждую позицию — что, откуда, сколько
   свободно, кнопка; причина, если выдать нельзя. */
.order-positions{grid-column:1/-1;display:grid;gap:8px;margin:4px 0 2px}
.order-position{display:grid;gap:3px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fafbfc}
.order-position>strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.order-position-facts{font-size:12px;color:var(--muted)}
.order-position-reason{font-size:12px;color:#8a5a00}
.order-position-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.order-position-actions button{font-size:12px;min-height:30px;padding:4px 12px}
@media(max-width:760px){.order-position-actions button{flex:1 1 auto;min-height:40px}}
/* Выдача другого издания (27.10): не кнопка, а неброская ссылка с подтверждением —
   чтобы по привычке не нажать «выдать» и не отдать клиенту не то издание. */
.order-position-actions button.order-substitute{background:none;border:0;padding:4px 2px;color:var(--muted);
text-decoration:underline;text-underline-offset:3px;font-weight:500;box-shadow:none}
.order-position-actions button.order-substitute:hover{color:var(--ink)}
@media(max-width:760px){.order-position-actions button.order-substitute{flex:0 0 auto}}
/* Покупка на аккаунт клиента: аккаунт, данные по нажатию, коды под цену. */
.order-account{grid-column:1/-1;display:grid;gap:8px;margin:4px 0 2px}
.order-account-unit{display:grid;gap:6px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fafbfc}
.order-account-unit>strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.order-account-list{display:grid;gap:4px}
.order-account-toggle{justify-self:start;font-size:12px;min-height:30px;padding:4px 12px}
.order-account-cand{display:flex;gap:6px;align-items:stretch}
.order-account-pick{flex:1 1 auto;justify-content:flex-start;text-align:left;font-size:12px;min-height:30px;padding:4px 10px;border:1px solid var(--line);
  border-radius:6px;background:#fff;overflow-wrap:anywhere}
.order-account-cand.chosen .order-account-pick{border-color:var(--blue);background:#edf3ff;font-weight:600}
.order-account-pick:disabled{opacity:1;cursor:default}
.order-account-reject{font-size:12px;min-height:30px;padding:4px 10px}
.order-account-reveal{display:grid;gap:4px}
.order-account-secret{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.order-account-secret code{user-select:all;overflow-wrap:anywhere}
.order-account-codes{display:grid;gap:6px;padding-top:6px;border-top:1px dashed var(--line)}
.order-account-price{display:flex;flex-wrap:wrap;gap:6px}
.order-account-input{width:120px;min-height:30px;padding:4px 8px;font-size:13px}
.order-account-variant{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.order-account-variant>span{flex:1 1 100%}
.order-account-buy{font-size:12px;min-height:30px;padding:4px 12px}
.order-account-note{font-size:12px;color:#8a5a00;margin:0}
.order-account-results{display:grid;gap:4px}
.order-account-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}
@media(max-width:760px){.order-account-buy,.order-account-reject,.order-account-pick,.order-account-toggle{min-height:40px}.order-account-input{flex:1 1 40%}}

/* Кнопка ждёт ответа дольше 0,2 с — по ней бежит мягкий блик (02.10). Ширина,
   место и надпись не меняются; быстрый ответ блика не показывает. */
button[data-busy]:disabled{opacity:.8;cursor:progress;background-image:linear-gradient(100deg,transparent 30%,rgba(127,127,127,.22) 50%,transparent 70%);
background-size:250% 100%;background-repeat:no-repeat;background-position:150% 0}
@media(prefers-reduced-motion:no-preference){
@keyframes busy-sweep{from{background-position:150% 0}to{background-position:-50% 0}}
button[data-busy]:disabled{animation:busy-sweep 1s linear .2s infinite}}

/* Обрыв связи дольше 20 с (16.10): подсказка про запасной вход. */
.net-hint{position:fixed;z-index:101;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;
align-items:center;gap:6px 12px;max-width:min(560px,94vw);padding:10px 14px;background:#1f2937;color:#fff;border-radius:10px;font-size:13px;box-shadow:0 6px 24px #0003}
.net-hint a{color:#9cc3ff;font-weight:600}
.netlog{margin-top:26px}.netlog h3{margin-bottom:4px}.netlog-row{display:grid;gap:3px;padding:9px 0;border-bottom:1px solid var(--line)}
/* Запуск: пока CRM не услышала сервер, вместо формы входа — строка состояния (29.10). */
.login-screen.connecting #login-form>:not(#login-loading){display:none}