:root { --bg:#f5f5f1; --panel:#fff; --text:#22231f; --muted:#84857e; --line:#e8e8e2; --accent:#6d5ef7; --green:#173f35; } * { box-sizing:border-box; } body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; color:var(--text); background:var(--bg); font-size:14px; } button,input,textarea,select { font:inherit; } button { cursor:pointer; } svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .app-shell { height:100vh; display:grid; grid-template-columns:72px 370px minmax(420px,1fr) auto; overflow:hidden; } body.telegram-app { height:var(--tg-viewport-stable-height,var(--telegram-viewport-height,100vh)); overflow:hidden; } body.telegram-app .app-shell { height:var(--tg-viewport-stable-height,var(--telegram-viewport-height,100vh)); max-height:var(--tg-viewport-stable-height,var(--telegram-viewport-height,100vh)); } .rail { background:#1e2f2a; color:#fff; display:flex; flex-direction:column; align-items:center; padding:22px 0; gap:34px; } .brand { width:40px; height:40px; border-radius:12px; background:#f4e95d; color:#1f302b; display:grid; place-items:center; font-weight:800; font-size:18px; } .brand span { color:#f27952; } .rail nav { display:flex; flex-direction:column; gap:10px; } .rail-button { width:42px; height:42px; border:0; border-radius:12px; color:#b8c5c0; background:transparent; display:grid; place-items:center; } .rail-button.active,.rail-button:hover { background:#344a43; color:white; } .rail .self { margin-top:auto; background:#eac8a5; color:#503927; } .sidebar { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; background:var(--panel); border-right:1px solid var(--line); } .sidebar-header { padding:24px 22px 16px; display:flex; justify-content:space-between; align-items:center; } .eyebrow { color:#999a93; font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; } h1 { font-size:25px; line-height:1.1; margin:6px 0 0; letter-spacing:-.04em; } .icon-button { width:36px; height:36px; border:1px solid var(--line); border-radius:10px; background:white; color:#676862; } .header-buttons { display:flex;gap:6px; } #notifyButton.enabled { background:#263f37;color:white; } #installButton { opacity:.55; }#installButton.available { opacity:1;color:#263f37;background:#eef2ed; } .accounts { padding:0 22px 15px; display:flex; gap:8px; overflow:auto; } .account-chip { display:flex; align-items:center; gap:7px; background:#f5f5f1; border:1px solid transparent; border-radius:999px; padding:7px 10px; white-space:nowrap; font-size:12px; color:#65665f; } .account-chip.active { background:#fff; border-color:#d5d5ce; color:#292a26; box-shadow:0 2px 8px #2221; } .account-chip .dot,.account-dot { width:7px; height:7px; border-radius:50%; display:inline-block; } .account-chip b { background:#deded7; padding:1px 6px; border-radius:8px; font-size:10px; } .channel-health { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#b8bbb5; box-shadow:0 0 0 2px #fff; } .health-online { background:#45a36b; }.health-attention { background:#e1a13c; }.health-offline { background:#d95b56; }.health-legacy { background:#8d91a0; }.health-unknown { background:#b8bbb5; } .search-wrap { margin:0 22px 13px; position:relative; } .search-wrap svg { width:17px; position:absolute; left:12px; top:11px; color:#9a9b95; } .search-wrap input { width:100%; border:1px solid var(--line); border-radius:11px; padding:10px 40px 10px 37px; background:#fafaf8; outline:none; } .search-wrap input:focus { border-color:#a8a1ed; box-shadow:0 0 0 3px #6d5ef712; } kbd { position:absolute; right:10px; top:9px; background:white; border:1px solid #e2e2dc; border-radius:5px; color:#aaa; padding:2px 5px; font-size:10px; } .filters { display:flex; gap:16px; padding:0 22px 10px; border-bottom:1px solid var(--line); overflow:auto; } .filters button { border:0; background:transparent; color:#979890; padding:7px 0; white-space:nowrap; font-size:12px; font-weight:600; position:relative; } .filters button.active { color:#272823; } .filters button.active:after { content:""; position:absolute; height:2px; border-radius:2px; left:0; right:0; bottom:-11px; background:#272823; } .conversation-list { overflow:auto; flex:1; } .conversation { width:100%; min-width:0; overflow:hidden; border:0; border-bottom:1px solid #f0f0eb; background:white; padding:15px 18px; display:grid; grid-template-columns:45px minmax(0,1fr) auto; gap:11px; text-align:left; position:relative; transition:.15s; } .conversation:hover { background:#fafaf7; } .conversation.active { background:#f1f1ec; } .avatar { position:relative!important; overflow:hidden!important; contain:paint; isolation:isolate; flex:0 0 auto; width:43px; height:43px; border-radius:50%; background:#dce4e0; color:#35433d; display:grid; place-items:center; font-weight:700; border:0; }.avatar>img { position:absolute!important; inset:0!important; display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:cover; border-radius:inherit; background:inherit; } .avatar.peach { background:#f2dbcb; color:#794c35; }.avatar.blue { background:#dbe5ef; color:#3d5770; }.avatar.yellow { background:#eee7bd; color:#655d2e; } .conversation-main { min-width:0; max-width:100%; overflow:hidden; } .conversation-line { display:flex; align-items:center; justify-content:space-between; gap:8px; } .conversation-name { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .conversation-account { font-size:10px; color:#898a83; display:flex; gap:5px; align-items:center; margin:3px 0 6px; min-width:0; } .conversation-state { padding:2px 6px; border-radius:999px; background:#f0f0ec; color:#74756e; font-size:8px; font-weight:700; } .channel-badge { padding:2px 5px; border-radius:999px; font-size:7px; font-weight:750; background:#eef0ec; color:#7b7d76; }.channel-instagram { color:#9b3d79; background:#f9eaf4; } .related-count { padding:2px 5px; border-radius:999px; background:#fff0e5; color:#a65f36; font-size:7px; font-weight:800; } .state-new { background:#ece9ff;color:#6557d9; }.state-active { background:#e7f0eb;color:#365b4e; }.state-waiting { background:#fff3d8;color:#8a6b26; }.state-paid { background:#e5f3e7;color:#397047; }.state-closed { background:#eeeeea;color:#777; } .conversation-assignee { margin-left:auto; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .preview { display:block; width:100%; max-width:100%; color:#898a83; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .time { color:#a1a29b; font-size:10px; white-space:nowrap; } .unread { min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#263f37; color:#fff; display:grid; place-items:center; font-size:10px; margin-top:16px; } .conversation.sla-overdue:before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#e56f4f; }.sla-badge { align-self:center; min-width:38px; padding:4px 6px; border-radius:8px; background:#fff0e9; color:#b75237; font-size:8px; font-weight:800; text-align:center; white-space:nowrap; } .loading { padding:30px; color:#999; text-align:center; } .chat-loading { margin:auto; color:#92948d; font-size:11px; }.load-older { align-self:center; min-height:32px; padding:7px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:#65706b; font-size:9px; }.load-older:disabled { opacity:.55; } .chat-panel { min-width:0; min-height:0; overflow:hidden; background:#f7f7f4; position:relative; display:flex; } .empty-state { margin:auto; text-align:center; max-width:360px; color:#898a83; } .empty-icon { width:64px; height:64px; border-radius:20px; background:white; box-shadow:0 8px 30px #1e2f2a12; display:grid; place-items:center; margin:0 auto 20px; color:#566a63; } .empty-icon svg { width:28px; } .empty-state h2 { color:#31322e; margin:0 0 9px; font-size:21px; letter-spacing:-.03em; } .empty-state p { margin:0; line-height:1.6; } .chat { min-width:0; min-height:0; width:100%; height:100%; display:flex; flex-direction:column; } .hidden { display:none !important; } .chat-header { height:78px; flex:0 0 auto; display:flex; align-items:center; gap:12px; background:#fff; padding:0 22px; border-bottom:1px solid var(--line); } .chat-person { min-width:0; } .chat-person h2 { font-size:15px; margin:0 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chat-meta { display:flex; align-items:center; gap:6px; color:#989992; font-size:11px; overflow:hidden; white-space:nowrap; } .chat-meta span { flex:0 0 auto; }.chat-meta #chatUsername { overflow:hidden; text-overflow:ellipsis; } .chat-actions { margin-left:auto; display:flex; gap:8px; } .claim-button { max-width:190px; border:0; background:#263f37; color:#fff; border-radius:10px; padding:8px 12px; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.claim-button.claimed { background:#e9eee8;color:#40534b; }.claim-button.locked { background:#f2eee8; color:#8a6c47; cursor:not-allowed; }.claim-button.takeover { background:#a96732; } .chat-actions select { border:1px solid var(--line); background:#fafaf7; border-radius:10px; padding:8px 11px; outline:none; } .related-banner { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:9px 16px; border-bottom:1px solid #ead9c7; background:#fff8ef; color:#6e4a2f; }.related-copy { min-width:180px; display:grid; gap:2px; }.related-copy strong { font-size:10px; }.related-copy small { color:#9a7559; font-size:8px; }.related-chats { min-width:0; display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; }.related-chats::-webkit-scrollbar { display:none; }.related-chats button { flex:0 0 auto; min-width:170px; display:grid; grid-template-columns:7px minmax(0,1fr) auto auto; align-items:center; gap:7px; padding:7px 9px; border:1px solid #eadbcb; border-radius:10px; background:#fff; color:#554b43; text-align:left; }.related-chats button>i { width:7px; height:7px; border-radius:50%; }.related-chats button>span { min-width:0; display:grid; gap:2px; }.related-chats button b,.related-chats button small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.related-chats button b { font-size:9px; }.related-chats button small { color:#9a8e84; font-size:7px; }.related-chats button>em { min-width:17px; height:17px; display:grid; place-items:center; border-radius:9px; background:#d96d4d; color:#fff; font-size:7px; font-style:normal; }.related-chats button>strong { font-size:16px; color:#a58e7d; } .conversation-lock { padding:2px 5px; border-radius:5px; background:#fff0dc; color:#8b652e; font-size:7px; font-weight:700; } .order-reminder-banner { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid #dce7df; background:#f3f8f5; color:#294b40; }.order-reminder-banner.urgent { border-color:#ecd9b5; background:#fff8e9; color:#775821; }.order-reminder-banner.overdue { border-color:#ecc9c4; background:#fff1ef; color:#8a4037; }.order-reminder-icon { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:#dfece5; font-size:15px; }.order-reminder-banner.urgent .order-reminder-icon { background:#f8e7bd; }.order-reminder-banner.overdue .order-reminder-icon { background:#f5d8d3; }.order-reminder-copy { min-width:0; display:grid; gap:2px; flex:1; }.order-reminder-copy strong { font-size:11px; }.order-reminder-copy small { overflow:hidden; color:inherit; opacity:.72; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.order-reminder-actions { flex:0 0 auto; display:flex; gap:7px; }.order-reminder-banner button { flex:0 0 auto; min-height:34px; padding:0 11px; border:0; border-radius:9px; background:#294b40; color:#fff; font-size:9px; font-weight:700; }.order-reminder-banner button.secondary { border:1px solid currentColor; background:transparent; color:inherit; }.order-reminder-banner.urgent button { background:#8b6726; }.order-reminder-banner.urgent button.secondary,.order-reminder-banner.overdue button.secondary { background:transparent; }.order-reminder-banner.overdue button { background:#944b42; } .mobile-back { display:none; border:0; background:transparent; font-size:20px; } .unread-button span { width:10px; height:10px; border:2px solid currentColor; border-radius:50%; display:block; } .info-button { font-family:Georgia,serif; font-weight:700; font-size:14px; } .messages { flex:1 1 0; min-height:0; overflow-x:hidden; overflow-y:auto; padding:28px max(24px,8%); display:flex; flex-direction:column; gap:9px; overscroll-behavior:contain; scrollbar-gutter:stable; } .date-divider { align-self:center; padding:5px 10px; color:#9b9c95; font-size:10px; background:#eeeeea; border-radius:10px; margin:10px 0; } .message { max-width:72%; display:flex; flex-direction:column; } .message.in { align-self:flex-start; }.message.out { align-self:flex-end; align-items:flex-end; } .bubble { border-radius:15px; padding:10px 13px; background:white; box-shadow:0 1px 2px #17231e0d; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; } .message.out .bubble { color:#fff; background:#24473c; border-bottom-right-radius:4px; } .message.in .bubble { border-bottom-left-radius:4px; } .message-meta { display:flex; align-items:center; gap:4px; font-size:9px; color:#a0a19a; margin:4px 4px 0; } .delivery-indicator { min-width:12px; font-size:10px; font-weight:800; letter-spacing:-2px; text-align:center; cursor:help; }.delivery-indicator.sent { color:#9a9c95; }.delivery-indicator.read { color:#2697dc; }.delivery-indicator.failed { color:#c34e47; letter-spacing:0; } .phone-link { display:inline; margin:0; padding:0 2px; border:0; border-radius:4px; background:#2697dc14; color:#1688ca; font:inherit; font-weight:650; line-height:inherit; text-decoration:underline; text-decoration-color:#1688ca55; text-underline-offset:2px; cursor:pointer; touch-action:pan-y; }.message.out .phone-link { background:#ffffff18; color:#bfe7ff; text-decoration-color:#bfe7ff66; } .phone-action-dialog { width:min(390px,calc(100vw - 24px)); border:0; border-radius:20px; padding:14px; color:var(--text); box-shadow:0 28px 90px #14231f38; }.phone-action-dialog::backdrop { background:#14231f72; backdrop-filter:blur(6px); }.phone-action-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 4px 13px; }.phone-action-head>div { display:grid; gap:3px; }.phone-action-head span { color:#92948d; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.phone-action-head strong { font-size:17px; }.phone-action-head>button { width:36px; height:36px; border:0; border-radius:11px; background:#f1f1ed; color:#777; font-size:20px; }.phone-actions { display:grid; gap:5px; }.phone-actions button,.phone-actions a { min-height:46px; display:flex; align-items:center; gap:11px; padding:8px 11px; border:0; border-radius:11px; background:#f5f6f2; color:#35463f; text-decoration:none; text-align:left; }.phone-actions button:disabled { opacity:.5; cursor:not-allowed; }.phone-actions span { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#e6eee9; color:#294b40; font-size:14px; }.phone-actions b { font-size:11px; }.phone-actions b small { display:block; margin-top:2px; font-weight:400; font-size:10px; color:#8a8d86; line-height:1.35; }.phone-actions [hidden] { display:none; }.business-restriction-copy { margin:0 4px 13px; color:#70736d; font-size:11px; line-height:1.55; } .message.note { align-self:center; max-width:80%; } .message.note .bubble { color:#776a28; background:#fff8c9; border:1px solid #eee39c; font-size:12px; } .reply-context { display:grid; gap:2px; margin:-3px -4px 8px; padding:7px 9px; border-left:3px solid #65a18b; border-radius:7px; background:#24473c0a; font-size:10px; line-height:1.35; } .reply-context strong { color:#3f7562; }.reply-context span { opacity:.72; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px; } .message.out .reply-context { border-left-color:#a7d0c1; background:#ffffff12; }.message.out .reply-context strong { color:#d5eee5; } .media-photo { max-width:300px; border-radius:11px; display:block; margin-bottom:6px; cursor:zoom-in; } .media-lightbox { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#101b18f2; overflow:auto; overscroll-behavior:contain; } .media-lightbox[open] { display:grid; place-items:center; } .media-lightbox::backdrop { background:#101b18d9; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .media-lightbox img { display:block; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 18px 70px #0008; } .media-lightbox-close { position:fixed; z-index:2; top:max(14px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); width:48px; height:48px; display:grid; place-items:center; padding:0; border:1px solid #ffffff42; border-radius:15px; background:#172722e8; color:#fff; box-shadow:0 6px 24px #0006; font-size:32px; font-weight:300; line-height:1; cursor:pointer; } .media-lightbox-close:active { transform:scale(.96); } .media-video { width:min(360px,100%); max-height:420px; border-radius:11px; display:block; margin-bottom:6px; background:#111; } .media-video.round { width:220px; height:220px; border-radius:50%; object-fit:cover; } .media-audio { width:min(320px,100%); height:38px; display:block; } .voice-card,.video-card { display:grid; gap:7px; min-width:min(290px,70vw); }.voice-card>span,.video-card>span { font-size:10px; opacity:.78; }.voice-card small { font-size:9px; opacity:.65; } .sticker { width:150px; height:150px; object-fit:contain; display:block; } .document-card,.contact-card,.location-card,.poll-card { display:flex; align-items:center; gap:10px; min-width:220px; } .file-icon { width:36px; height:36px; border-radius:9px; background:#eef0eb; color:#42534c; display:grid; place-items:center; font-weight:700; font-size:10px; } .message.out .file-icon { background:#ffffff22; color:white; } .card-copy { display:flex; flex-direction:column; min-width:0; }.card-copy strong { font-size:12px; overflow:hidden; text-overflow:ellipsis; }.card-copy small { opacity:.65; font-size:9px; } .poll-options { margin-top:8px; display:grid; gap:5px; }.poll-option { display:flex; justify-content:space-between; gap:14px; border-top:1px solid #8882; padding-top:5px; font-size:11px; } .voice { display:flex; align-items:center; gap:10px; min-width:210px; } .voice-play { width:34px; height:34px; border-radius:50%; border:0; background:#ffffff26; color:inherit; } .wave { flex:1; height:22px; background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px); opacity:.35; mask:linear-gradient(180deg,transparent 0,#000 40%,#000 60%,transparent 100%); } .voice-time { font-size:10px; opacity:.7; } .composer-wrap { flex:0 0 auto; padding:10px 22px 18px; background:linear-gradient(transparent,#f7f7f4 22%); } .scheduled-list { display:flex; gap:7px; overflow-x:auto; padding:1px 1px 8px; scrollbar-width:none; }.scheduled-list::-webkit-scrollbar { display:none; } .scheduled-item { flex:0 0 min(330px,88vw); min-width:0; display:grid; grid-template-columns:30px 1fr 28px; align-items:center; gap:8px; padding:8px; border:1px solid #eadfae; border-radius:11px; background:#fffbee; box-shadow:0 2px 8px #4037150a; } .scheduled-clock { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:#f4e9b9; color:#766522; }.scheduled-clock svg { width:16px; } .scheduled-item>span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:2px; }.scheduled-item strong { color:#6f622c; font-size:9px; }.scheduled-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#7e7e77; font-size:9px; }.scheduled-item em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#b44e48; font-size:8px; font-style:normal; }.scheduled-item>button { width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:#a29b79; font-size:17px; }.scheduled-item.failed { border-color:#efcbc7; background:#fff4f2; }.scheduled-item.failed .scheduled-clock { background:#f5d9d5; color:#a84540; } .quick-row { display:flex; gap:7px; overflow:auto; margin-bottom:8px; } .quick { border:1px solid #dddeda; border-radius:9px; padding:6px 10px; background:#fff; color:#696a64; font-size:10px; white-space:nowrap; } .quick-primary { border-color:#b9ccc5; background:#edf3f0; color:#294b40; font-weight:700; } .composer { display:flex; align-items:flex-end; gap:7px; background:white; border:1px solid #deded8; border-radius:14px; padding:7px; box-shadow:0 5px 18px #1e2f2a0b; } .composer textarea { flex:1; min-width:0; resize:none; max-height:130px; min-height:38px; border:0; outline:0; padding:9px 4px; } .attach,.send-button,.schedule-button { width:38px; height:38px; border:0; border-radius:10px; display:grid; place-items:center; } .attach { background:#f3f3ef; color:#777; font-size:22px; }.send-button { background:#263f37; color:white; } .schedule-button { flex:0 0 38px; background:transparent; color:#7a7b74; }.schedule-button svg { width:17px; } .attach:active,.send-button:active,.icon-button:active,.claim-button:active,.mobile-back:active,.quick:active { transform:scale(.96); } .send-button svg { width:18px; } .note-button { border:0; background:transparent; color:#9a8c43; padding:11px 5px; font-size:10px; } .composer.note-mode { border-color:#ded079; background:#fffdf0; } .composer-hint { text-align:right; color:#aaa; font-size:9px; margin:5px 3px 0; } .chat-panel.file-dragging::after { content:'Відпустіть, щоб надіслати файл'; position:absolute; inset:16px; z-index:30; display:grid; place-items:center; border:2px dashed #4f7b6c; border-radius:18px; background:#eef7f2e8; color:#294b40; font-size:16px; font-weight:800; pointer-events:none; backdrop-filter:blur(4px); } .details { width:286px; background:#fff; border-left:1px solid var(--line); padding:28px 22px; position:relative; overflow:auto; } .details-scrim,.details-handle { display:none; } .details-close { position:absolute; right:14px; top:12px; width:36px; height:36px; border:0; border-radius:50%; background:#f3f3ef; font-size:24px; line-height:1; color:#777; } .details-avatar { width:60px; height:60px; margin:20px auto 10px; font-size:18px; } .details h3,.details>p { text-align:center; margin:0; }.details>p { color:#999; font-size:11px; margin-top:4px; } .details-section { border-top:1px solid var(--line); padding:20px 0; margin-top:23px; } .assignee { display:flex; align-items:center; gap:8px; margin-top:12px; }.avatar.mini { width:27px; height:27px; background:#eac8a5; font-size:10px; } .detail-row { display:flex; justify-content:space-between; margin-top:13px; font-size:11px; }.detail-row span { color:#999; }.detail-row strong { font-weight:600; } .tags { display:flex; gap:6px; margin-top:12px; }.tags span,.tags button { border:0; background:#eef1e9; color:#58644f; border-radius:7px; padding:6px 8px; font-size:10px; } .details-select { width:100%; margin-top:10px; border:1px solid var(--line); border-radius:9px; padding:9px; background:#fff; } .contact-form { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }.contact-form label { display:grid; gap:4px; color:#999; font-size:9px; }.contact-form label:nth-last-of-type(-n+2) { grid-column:1/-1; }.contact-form input,.contact-form textarea,.inline-add input,.reminder-form input,.manager-form input,.manager-form select { width:100%; border:1px solid var(--line); border-radius:8px; padding:8px; outline:none; font-size:11px; }.contact-form textarea { resize:vertical; min-height:50px; }.contact-form button { grid-column:1/-1; border:0; background:#263f37; color:white; border-radius:8px; padding:8px; font-size:10px; } .contact-form .full-field { grid-column:1/-1; } .contact-form input:focus,.contact-form textarea:focus,.inline-add input:focus,.reminder-form input:focus { border-color:#779187; box-shadow:0 0 0 3px #365b4e12; } .order-extract { display:grid; grid-template-columns:1fr auto; gap:9px; margin:11px 0 4px; padding:11px; border-radius:11px; background:#f3f6f3; }.order-extract>div { display:grid; gap:2px; }.order-extract span { color:#92948d; font-size:9px; }.order-extract strong { color:#294b40; font-size:12px; }.order-extract button { border:0; border-radius:9px; padding:8px 10px; background:#263f37; color:#fff; font-size:9px; font-weight:700; }.order-extract button:disabled { opacity:.55; }.order-extract p { grid-column:1/-1; margin:2px 0 0; color:#73766f; font-size:9px; line-height:1.45; }.contact-form input.extracted { border-color:#76a58f; background:#f1faf5; }.contact-form input.missing-field { border-color:#deb65b; background:#fffaf0; } .inline-add { display:flex; gap:5px; margin-top:8px; }.inline-add button { border:0;border-radius:7px;width:32px; }.tag-pill { display:flex;align-items:center;gap:4px; }.tag-pill button { padding:0;background:transparent; } .reminder-form { display:grid;gap:6px;margin-top:10px; }.reminder-form button { border:0;border-radius:8px;background:#263f37;color:white;padding:8px;font-size:10px; }.reminder-item { padding:8px;background:#f5f5f1;border-radius:8px;margin-top:6px;font-size:10px;display:flex;justify-content:space-between;gap:5px; }.reminder-item button { border:0;background:transparent; } .event-list { display:grid; gap:0; margin-top:10px; }.event-item { display:grid; grid-template-columns:9px minmax(0,1fr); gap:8px; padding:8px 0; border-bottom:1px solid #f0f0eb; }.event-item:last-child { border-bottom:0; }.event-dot { width:7px; height:7px; margin-top:4px; border-radius:50%; background:#6d5ef7; box-shadow:0 0 0 3px #6d5ef716; }.event-item>span:last-child { display:grid; gap:2px; }.event-item strong { font-size:10px; }.event-item small { color:#65675f; font-size:9px; line-height:1.4; }.event-item time { color:#aaa; font-size:8px; } .onboarding-head { display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; }.onboarding-head strong { font-size:18px; color:#294b40; }.onboarding-head span { color:#8b8d85; font-size:9px; }.onboarding-bar { height:7px; margin:8px 0 10px; overflow:hidden; border-radius:8px; background:#eceeea; }.onboarding-bar i { display:block; width:0; height:100%; border-radius:inherit; background:#4d806e; transition:width .25s ease; }.onboarding-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.onboarding-step { display:flex; align-items:center; gap:7px; padding:8px; border-radius:10px; background:#f6f6f2; color:#969890; }.onboarding-step i { font-style:normal; font-size:13px; }.onboarding-step span { min-width:0; display:grid; gap:1px; }.onboarding-step b { color:#666962; font-size:9px; }.onboarding-step small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:7px; }.onboarding-step.done { background:#edf4f0; color:#39705d; }.onboarding-step.done b { color:#315e4e; } .team-dialog { width:min(620px,calc(100vw - 32px));border:0;border-radius:20px;padding:28px;box-shadow:0 30px 100px #0003; }.team-dialog::backdrop { background:#14231f88;backdrop-filter:blur(4px); }.team-dialog h2 { margin:6px 0 20px; }.manager-list { display:grid;gap:8px;margin-bottom:18px; }.manager-row { display:flex;align-items:center;gap:10px;padding:10px;background:#f6f6f2;border-radius:10px; }.manager-row b { flex:1; }.manager-row small { color:#999; }.manager-form { display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid var(--line);padding-top:18px; }.manager-form button { grid-column:1/-1;border:0;border-radius:9px;padding:10px;background:#263f37;color:white; } .notification-settings { display:grid;grid-template-columns:1fr auto;gap:9px 18px;padding:14px;background:#f5f5f1;border-radius:12px;margin-bottom:18px; }.notification-settings>div { grid-row:span 2;display:flex;flex-direction:column; }.notification-settings small { color:#999;font-size:9px;margin-top:3px; }.notification-settings label { font-size:11px;display:flex;align-items:center;gap:7px; } .dashboard-dialog { width:min(1180px,calc(100vw - 44px)); height:min(860px,calc(100vh - 44px)); max-width:none; max-height:none; padding:0; border:0; border-radius:24px; background:#f5f5f1; color:var(--text); box-shadow:0 30px 100px #10201b38; overflow:hidden; } .dashboard-dialog::backdrop { background:#14231f80; backdrop-filter:blur(8px); } .dashboard-header { min-height:108px; padding:24px 28px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; background:rgba(255,255,255,.88); border-bottom:1px solid var(--line); backdrop-filter:blur(20px) saturate(180%); } .dashboard-header h2 { margin:5px 0 4px; font-size:25px; letter-spacing:-.04em; }.dashboard-header p { margin:0; color:var(--muted); font-size:11px; } .dashboard-controls { display:flex; gap:8px; }.dashboard-controls select,.dashboard-controls button { height:40px; border:1px solid var(--line); border-radius:11px; background:#fff; color:#555750; }.dashboard-controls select { padding:0 32px 0 12px; }.dashboard-controls button { width:40px; font-size:18px; } .dashboard-body { height:calc(100% - 108px); padding:20px; overflow:auto; } .dashboard-loading,.dashboard-error { height:100%; display:grid; place-items:center; color:var(--muted); }.dashboard-error { color:#b34b4b; } .metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:12px; } .metric-card,.dashboard-card { background:#fff; border:1px solid #e9e9e3; border-radius:17px; box-shadow:0 2px 8px #17231e08; } .metric-card { min-height:116px; padding:16px; display:flex; flex-direction:column; }.metric-card>span { color:#7d7f78; font-size:10px; font-weight:700; }.metric-card strong { margin:9px 0 3px; font-size:25px; line-height:1; letter-spacing:-.04em; }.metric-card small { margin-top:auto; color:#a0a19a; font-size:9px; line-height:1.35; } .metric-card.accent { background:#253f37; color:#fff; border-color:#253f37; }.metric-card.accent>span,.metric-card.accent small { color:#c4d2cd; }.metric-card.success strong { color:#397047; }.metric-card.warning strong { color:#9a7325; }.metric-card.danger strong { color:#ba4c46; } .dashboard-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:12px; }.dashboard-card { padding:18px; min-width:0; } .card-heading { min-height:38px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.card-heading>div:first-child { display:flex; flex-direction:column; gap:3px; }.card-heading span { font-size:12px; font-weight:800; }.card-heading small { color:#999b94; font-size:9px; }.card-heading>b { min-width:24px; height:24px; display:grid; place-items:center; background:#eef1ed; border-radius:8px; font-size:10px; } .chart-legend { align-self:center; color:#8c8e87; font-size:8px; white-space:nowrap; }.chart-legend i { display:inline-block; width:7px; height:7px; border-radius:2px; margin:0 3px 0 8px; background:#31584b; }.chart-legend i:nth-of-type(2) { background:#b8cf65; } .activity-chart { height:190px; display:flex; gap:5px; align-items:flex-end; overflow-x:auto; padding:12px 2px 0; border-bottom:1px solid #ecece7; }.activity-day { flex:1 0 34px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; }.activity-day span { color:#a0a19a; font-size:8px; white-space:nowrap; }.bar-pair { width:100%; height:150px; display:flex; align-items:flex-end; justify-content:center; gap:3px; }.bar-pair i { width:8px; min-height:0; border-radius:4px 4px 1px 1px; background:#31584b; }.bar-pair i+ i { background:#b8cf65; } .funnel-list { display:grid; gap:13px; margin-top:13px; }.funnel-row { display:grid; grid-template-columns:66px 1fr 24px; gap:9px; align-items:center; font-size:9px; }.funnel-row>div { height:8px; background:#f0f0ec; border-radius:5px; overflow:hidden; }.funnel-row i { display:block; height:100%; min-width:2px; border-radius:5px; background:#6d5ef7; }.funnel-row .funnel-quote { background:#4c7869; }.funnel-row .funnel-checkout { background:#d2a947; }.funnel-row .funnel-paid { background:#6fa678; }.funnel-row .funnel-lost { background:#c96a5a; }.funnel-row b { text-align:right; } .attention-card,.managers-card,.accounts-card { min-height:240px; }.attention-list,.manager-stats,.account-stats { display:grid; margin-top:8px; }.attention-list button,.manager-stats>div,.account-stats>div { min-height:51px; display:flex; align-items:center; gap:10px; padding:7px 3px; border:0; border-top:1px solid #f0f0eb; background:transparent; text-align:left; }.attention-list button:first-child,.manager-stats>div:first-child,.account-stats>div:first-child { border-top:0; }.attention-list button:active { transform:scale(.99); } .attention-avatar { flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#e3eae6; color:#3a544b; font-size:9px; font-weight:800; }.attention-list button>span:nth-child(2),.manager-stats>div>span:nth-child(2),.account-stats>div>span:nth-child(2) { min-width:0; display:flex; flex:1; flex-direction:column; gap:2px; }.attention-list strong,.manager-stats strong,.account-stats strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }.attention-list small,.manager-stats small,.account-stats small { color:#999b94; font-size:8px; font-style:normal; } .attention-signals { display:flex!important; flex:0 0 auto!important; flex-direction:row!important; align-items:center; gap:4px!important; }.attention-signals b,.attention-signals i { min-width:20px; height:20px; display:grid; place-items:center; border-radius:8px; background:#31584b; color:#fff; font-size:8px; font-style:normal; }.attention-signals i { background:#f7e4df; color:#b24d45; font-weight:800; } .manager-stats>div>b,.account-stats>div>b { margin-left:auto; font-size:12px; white-space:nowrap; }.manager-stats>div>b small,.account-stats>div>b small { font-weight:500; }.manager-stats>div>i { margin-left:4px; padding:4px 6px; border-radius:7px; background:#f8e6e2; color:#b34f47; font-size:7px; font-style:normal; }.account-stats>div>i { flex:0 0 8px; width:8px; height:8px; border-radius:50%; }.account-stats em { padding:4px 6px; border-radius:7px; background:#fff1d3; color:#8a6b26; font-size:7px; font-style:normal; }.dashboard-empty { padding:38px 0; text-align:center; color:#8e9089; font-size:10px; } .accounts-card { grid-column:1/-1; }.account-stats { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; } .schedule-dialog { width:min(440px,calc(100vw - 28px)); border:0; border-radius:20px; padding:0; color:var(--text); box-shadow:0 28px 90px #14231f38; }.schedule-dialog::backdrop { background:#14231f72; backdrop-filter:blur(6px); }.schedule-dialog form { padding:22px; display:grid; gap:16px; }.schedule-dialog header { display:flex; align-items:flex-start; justify-content:space-between; }.schedule-dialog h2 { margin:5px 0 0; font-size:20px; letter-spacing:-.03em; }.schedule-dialog header button { width:36px; height:36px; border:0; border-radius:10px; background:#f1f1ed; color:#777; font-size:20px; }.schedule-preview { max-height:110px; overflow:auto; padding:13px; border-left:3px solid #988330; border-radius:10px; background:#fff9dc; color:#5e572f; font-size:12px; line-height:1.5; white-space:pre-wrap; }.schedule-dialog label { display:grid; gap:6px; color:#70716a; font-size:10px; font-weight:700; }.schedule-dialog input { min-height:44px; padding:0 11px; border:1px solid var(--line); border-radius:11px; outline:none; }.schedule-dialog p { margin:-5px 0 0; color:#999a93; font-size:9px; line-height:1.5; }.schedule-dialog form>button { min-height:44px; border:0; border-radius:11px; background:#263f37; color:#fff; font-size:11px; font-weight:700; } .template-dialog { width:min(560px,calc(100vw - 28px)); max-height:calc(100vh - 28px); border:0; border-radius:22px; padding:0; color:var(--text); box-shadow:0 28px 90px #14231f38; overflow:auto; }.template-dialog::backdrop { background:#14231f72; backdrop-filter:blur(6px); }.template-dialog form { padding:24px; display:grid; gap:20px; }.template-dialog header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.template-dialog h2 { margin:5px 0 3px; font-size:22px; letter-spacing:-.035em; }.template-dialog header p { margin:0; color:#92948d; font-size:13px; }.template-dialog header button { flex:0 0 38px; width:38px; height:38px; border:0; border-radius:11px; background:#f1f1ed; color:#777; font-size:20px; }.template-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.template-fields label { display:grid; gap:6px; color:#70716a; font-size:13px; font-weight:700; }.template-fields input,.template-fields select,.template-fields textarea { width:100%; min-height:44px; padding:0 11px; border:1px solid var(--line); border-radius:11px; outline:none; background:#fff; font-size:15px; }.template-fields textarea { min-height:82px; padding:10px 11px; resize:vertical; }.template-fields input:focus,.template-fields select:focus,.template-fields textarea:focus { border-color:#779187; box-shadow:0 0 0 3px #365b4e12; }.template-fields .template-full { grid-column:1/-1; }.template-fields .hidden-field { display:none; }.template-dialog form>button { min-height:46px; border:0; border-radius:12px; background:#263f37; color:#fff; font-size:15px; font-weight:700; } .crm-status { padding:10px 12px; border-radius:11px; background:#eef4f1; color:#365b4e; font-size:14px; line-height:1.45; }.crm-status.error { background:#fff3ed; color:#a44b28; }.crm-status.success { background:#edf7ef; color:#27643c; } .secondary-field-button { align-self:end; min-height:44px; margin:0; padding:10px 14px; border:1px solid #d9ddd9; border-radius:12px; background:#f5f6f3; color:#244c40; font:inherit; font-weight:700; cursor:pointer; } .template-fields .weekend-toggle { display:flex; align-items:center; gap:11px; min-height:54px; padding:10px 12px; border:1px solid #dfe5e1; border-radius:13px; background:#f7faf8; cursor:pointer; } .template-fields .weekend-toggle input { flex:0 0 22px; width:22px; min-height:22px; height:22px; margin:0; padding:0; accent-color:#284c40; } .weekend-toggle span { display:grid; gap:3px; }.weekend-toggle strong { color:#303b37; font-size:12px; }.weekend-toggle small { color:#8b918e; font-size:9px; font-weight:500; } .schedule-hint { padding:10px 12px; border-radius:11px; background:#eef5f1; color:#365b4e; font-size:10px; line-height:1.45; } .schedule-hint[hidden] { display:none; } .toast { opacity:0; pointer-events:none; position:fixed; left:50%; bottom:22px; transform:translate(-50%,10px); background:#202c28; color:#fff; padding:10px 15px; border-radius:10px; transition:.2s; z-index:20; box-shadow:0 8px 30px #0002; }.toast.show { opacity:1; transform:translate(-50%,0); } .mobile-nav { display:none; } @media (max-width:1050px) { .details { position:absolute; right:0; top:0; bottom:0; z-index:10; box-shadow:-10px 0 30px #0001; }.app-shell { grid-template-columns:64px 340px 1fr; } } @media (max-width:720px) { html { width:100%; height:100%; overflow:hidden; } body { width:100%; height:100%; padding-bottom:64px; overflow:hidden; -webkit-tap-highlight-color:transparent; } .app-shell { height:calc(100dvh - 64px); grid-template-columns:1fr; } .rail { display:none; } .sidebar { width:100%; } .sidebar-header { padding:max(18px,env(safe-area-inset-top)) 18px 13px; } .sidebar-header h1 { font-size:28px; } .sidebar-header .icon-button { width:42px; height:42px; border-radius:13px; } .accounts { padding:0 18px 14px; scrollbar-width:none; } .accounts::-webkit-scrollbar,.filters::-webkit-scrollbar { display:none; } .account-chip { min-height:38px; padding:8px 12px; font-size:12px; } .search-wrap { margin:0 16px 10px; } .search-wrap input { min-height:46px; border-radius:14px; padding-left:40px; font-size:16px; background:#f5f5f1; } .search-wrap svg { top:14px; left:14px; } .search-wrap kbd { display:none; } .filters { gap:20px; padding:0 18px 10px; } .filters button { min-height:38px; font-size:12px; } .conversation-list { padding:5px 10px 22px; background:#f7f7f4; } .conversation { grid-template-columns:50px minmax(0,1fr) auto; gap:11px; min-height:88px; margin:6px 0; padding:13px 12px; border:1px solid #ecece6; border-radius:17px; box-shadow:0 1px 2px #17231e08; } .conversation:active { transform:scale(.985); background:#f5f6f2; } .conversation.active { background:#eef2ed; border-color:#dce5df; } .conversation.has-unread:before { content:""; position:absolute; left:4px; top:19px; bottom:19px; width:3px; border-radius:3px; background:#275145; } .conversation.sla-overdue:before { left:4px; top:19px; bottom:19px; border-radius:3px; background:#e56f4f; } .conversation>.avatar { width:50px; height:50px; font-size:14px; } .conversation-name { font-size:14px; letter-spacing:-.015em; } .conversation.has-unread .conversation-name { color:#173f35; font-weight:800; } .conversation-line { min-height:20px; } .conversation-account { margin:3px 0 5px; gap:6px; } .conversation-state { padding:2px 7px; font-size:8px; } .conversation-assignee { font-size:9px; } .preview { display:-webkit-box; width:100%; max-width:100%; font-size:12px; line-height:1.4; white-space:normal; overflow:hidden; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .time { font-size:9px; } .unread { min-width:22px; height:22px; margin:27px 0 0; background:#275145; font-weight:700; } .chat-panel { display:none; position:fixed; left:0; right:0; top:var(--mobile-viewport-top,0); bottom:auto; height:calc(var(--mobile-viewport-height,100dvh) - 64px); z-index:25; } .chat-panel.mobile-open { display:flex; } body.chat-is-open { position:fixed; inset:0; padding-bottom:0; } body.chat-is-open:not(.keyboard-open) { width:100%; height:100dvh; max-height:none; } body.chat-is-open .sidebar { visibility:hidden; pointer-events:none; } body.chat-is-open .mobile-nav { display:none; } body.chat-is-open .chat-panel { inset:0; width:100%; height:auto; } body.keyboard-open.chat-is-open .chat-panel { top:var(--mobile-viewport-top,0); right:0; bottom:auto; left:0; height:var(--mobile-viewport-height,100dvh); } .chat-header { min-height:116px; height:auto; padding:max(8px,env(safe-area-inset-top)) 12px 9px; gap:10px; display:grid; grid-template-columns:42px 42px minmax(0,1fr) 42px; grid-template-rows:48px 42px; background:rgba(255,255,255,.92); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); } body.telegram-app .chat-header { --content-safe-top:var(--tg-content-safe-area-inset-top,var(--telegram-content-safe-top,52px)); min-height:calc(116px + var(--content-safe-top)); padding-top:calc(8px + var(--content-safe-top)); } .mobile-back { position:relative; z-index:2; display:grid; place-items:center; width:42px; height:42px; padding:0; color:#24473c; border-radius:50%; } .mobile-back svg { width:25px; stroke-width:2.2; } .chat-header>.avatar { width:42px; height:42px; } .chat-person { align-self:center; } .chat-person h2 { font-size:16px; line-height:1.2; margin-bottom:3px; letter-spacing:-.02em; } .chat-meta { font-size:10px; gap:5px; } .chat-actions { grid-column:1/-1; grid-row:2; width:100%; margin:0; display:grid; grid-template-columns:minmax(0,1fr) 42px minmax(112px,1fr) 42px; gap:7px; } .chat-actions>* { min-height:42px; } .chat-actions .icon-button { width:42px; height:42px; border-radius:12px; } .claim-button { max-width:none; padding:7px 10px; font-size:11px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:12px; } .chat-actions select { width:100%; max-width:none; padding:0 30px 0 12px; font-size:12px; font-weight:600; border-radius:12px; } #infoToggle { grid-column:4; grid-row:1; align-self:center; } .messages { min-height:0; padding:18px 14px 10px; gap:7px; scroll-padding-bottom:12px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .related-banner { align-items:flex-start; padding:9px 10px; gap:8px; }.related-copy { flex:0 0 122px; min-width:0; }.related-copy strong { font-size:9px; line-height:1.25; }.related-copy small { display:none; }.related-chats button { min-width:155px; padding:6px 8px; } .order-reminder-banner { padding:9px 10px; gap:8px; align-items:flex-start; flex-wrap:wrap; }.order-reminder-icon { display:none; }.order-reminder-copy strong { font-size:10px; }.order-reminder-copy small { font-size:8px; }.order-reminder-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }.order-reminder-banner button { width:100%; min-height:36px; max-width:none; padding:0 9px; line-height:1.2; } .message { max-width:90%; } .bubble { padding:10px 12px; border-radius:16px; font-size:14px; line-height:1.45; } .message-meta { font-size:9px; margin-top:3px; } .message.note { max-width:86%; } .composer-wrap { flex:0 0 auto; padding:7px 10px max(10px,env(safe-area-inset-bottom)); background:rgba(247,247,244,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } body.keyboard-open .composer-wrap { padding-bottom:7px; } .quick-row { gap:7px; margin:0 -10px 7px; padding:0 10px; scrollbar-width:none; } .quick-row::-webkit-scrollbar { display:none; } .quick { min-height:34px; padding:7px 11px; border-radius:11px; font-size:11px; } .composer { gap:5px; padding:6px; border-radius:18px; align-items:flex-end; box-shadow:0 6px 22px #1e2f2a12; } .composer textarea { min-height:42px; max-height:104px; padding:11px 5px 9px; font-size:16px; line-height:1.35; } .attach,.send-button { flex:0 0 42px; width:42px; height:42px; border-radius:13px; } .schedule-button { flex-basis:36px; width:36px; height:42px; } .note-button { min-height:42px; padding:0 7px; font-size:11px; } .composer-hint { display:none; } .details-scrim { display:block; position:fixed; inset:0; z-index:39; background:#14231f66; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .details { position:fixed; z-index:40; left:0; right:0; top:auto; bottom:0; width:100%; height:min(88dvh,780px); padding:20px 18px max(28px,env(safe-area-inset-bottom)); border:0; border-radius:24px 24px 0 0; box-shadow:0 -18px 60px #14231f26; } .details-handle { display:block; position:absolute; top:7px; left:50%; width:36px; height:5px; transform:translateX(-50%); border-radius:4px; background:#d3d4ce; } .details-close { position:sticky; float:right; top:0; z-index:2; width:42px; height:42px; margin-bottom:-42px; background:#f0f1ed; } .details-avatar { width:68px; height:68px; margin:12px auto 10px; font-size:19px; } .details h3 { font-size:22px; letter-spacing:-.025em; } .details>p { font-size:14px; } .details-section { margin-top:20px; padding:18px 0 0; } .details-section .eyebrow { font-size:12px; color:#777a73; } .onboarding-head strong { font-size:22px; }.onboarding-head span { font-size:12px; }.onboarding-step b { font-size:12px; }.onboarding-step small { font-size:10px; }.onboarding-step { padding:10px; } .order-extract span { font-size:11px; }.kind-row select { font-size:15px; }.detail-row { font-size:13px; } .details-select { min-height:48px; padding:0 12px; border-radius:12px; font-size:16px; } .contact-form { grid-template-columns:1fr; gap:12px; } .contact-form label,.contact-form label:nth-last-of-type(-n+2) { grid-column:1; gap:6px; font-size:13px; font-weight:600; color:#74766f; } .contact-form input,.contact-form textarea,.inline-add input,.reminder-form input { min-height:50px; padding:12px; border-radius:12px; font-size:17px; background:#fafaf8; } .contact-form textarea { min-height:76px; } .contact-form button { min-height:50px; border-radius:13px; font-size:15px; font-weight:700; } .order-extract { margin-top:12px; padding:13px; border-radius:13px; }.order-extract button { min-height:46px; font-size:14px; }.order-extract strong { font-size:16px; }.order-extract p { font-size:12px; } .tags { flex-wrap:wrap; gap:8px; } .tags span,.tags button { min-height:36px; padding:7px 11px; font-size:13px; } .inline-add { gap:8px; } .inline-add button { width:48px; border-radius:12px; font-size:20px; } .reminder-form { gap:9px; } .reminder-form button { min-height:46px; border-radius:12px; font-size:12px; font-weight:700; } .reminder-item { padding:12px; border-radius:12px; font-size:13px; } .dashboard-dialog { width:100%; height:var(--mobile-viewport-height,100dvh); margin:0; max-height:none; border-radius:0; } .dashboard-header { position:sticky; top:0; z-index:3; min-height:118px; padding:max(16px,env(safe-area-inset-top)) 16px 13px; align-items:flex-start; } .dashboard-header h2 { font-size:22px; }.dashboard-header p { display:none; } .dashboard-controls { gap:5px; }.dashboard-controls select { width:92px; height:42px; padding-left:9px; font-size:11px; }.dashboard-controls button { width:42px; height:42px; } .dashboard-body { height:calc(100% - 118px); padding:12px 11px max(24px,env(safe-area-inset-bottom)); } .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .metric-card { min-height:108px; padding:14px; border-radius:16px; }.metric-card strong { font-size:24px; } .dashboard-grid { grid-template-columns:1fr; gap:9px; }.dashboard-card { padding:15px; border-radius:16px; } .activity-chart { height:180px; }.activity-day { flex-basis:35px; }.bar-pair { height:140px; } .accounts-card { grid-column:auto; }.account-stats { grid-template-columns:1fr; } .attention-list button,.manager-stats>div,.account-stats>div { min-height:58px; } .chart-legend { display:none; } .schedule-dialog { position:fixed; inset:auto 0 0; box-sizing:border-box; width:100vw; max-width:none; max-height:min(88dvh,calc(var(--mobile-viewport-height,100dvh) - 10px)); margin:0; border-radius:22px 22px 0 0; overflow:hidden; }.schedule-dialog form { width:100%; max-width:100%; max-height:inherit; padding:18px 18px max(18px,env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }.schedule-dialog input { min-width:0; min-height:48px; font-size:16px; } .template-dialog { position:fixed; inset:auto 0 0; box-sizing:border-box; width:100vw; max-width:none; max-height:min(92dvh,calc(var(--mobile-viewport-height,100dvh) - 10px)); margin:0; border-radius:22px 22px 0 0; overflow:hidden; }.template-dialog form { width:100%; max-width:100%; max-height:inherit; padding:18px 18px max(24px,env(safe-area-inset-bottom)); gap:16px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }.template-dialog header { position:sticky; top:0; z-index:3; margin:0; padding:0 0 12px; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }.template-dialog header button { outline:none; }.template-fields,.template-fields label { min-width:0; max-width:100%; }.template-fields { grid-template-columns:minmax(0,1fr); gap:10px; }.template-fields .template-full { grid-column:1; }.template-fields input,.template-fields select,.template-fields textarea { min-width:0; max-width:100%; min-height:48px; font-size:16px; }.template-fields textarea { min-height:90px; }.template-dialog form>button { position:sticky; bottom:0; z-index:4; flex:0 0 auto; box-shadow:0 -10px 24px 12px #fff; } body.keyboard-open .template-dialog[open],body.keyboard-open .schedule-dialog[open] { top:var(--mobile-viewport-top,0); right:0; bottom:auto; left:0; width:100vw; max-width:none; height:var(--mobile-viewport-height,100dvh); max-height:none; border-radius:0; } body.keyboard-open .template-dialog[open] form,body.keyboard-open .schedule-dialog[open] form { height:100%; max-height:none; padding-bottom:max(24px,env(safe-area-inset-bottom)); } .mobile-nav { position:fixed; display:grid; grid-template-columns:repeat(4,1fr); left:0; right:0; bottom:0; height:64px; padding-bottom:env(safe-area-inset-bottom); background:rgba(255,255,255,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid var(--line); z-index:20; } .mobile-nav button { border:0; background:transparent; color:#91928b; font-size:10px; font-weight:700; } .mobile-nav button.active { color:#24473c; } body.telegram-app { padding-bottom:0; } body.telegram-app .app-shell { height:var(--tg-viewport-stable-height,var(--telegram-viewport-height,100dvh)); } body.telegram-app:not(.chat-is-open) .chat-panel { bottom:auto; } body.telegram-app .details { bottom:0; } body.telegram-app .mobile-nav { display:none; } } @media (max-width:390px) { .chat-header { grid-template-columns:38px 38px minmax(0,1fr) 38px; padding-left:8px; padding-right:8px; gap:7px; } .chat-header>.avatar,.mobile-back,.chat-actions .icon-button { width:38px; height:38px; } .chat-actions { grid-template-columns:minmax(0,1fr) 38px minmax(104px,1fr) 38px; gap:5px; } .note-button { max-width:64px; overflow:hidden; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } } .login-body { min-height:100vh; display:grid; place-items:center; background:radial-gradient(circle at 20% 20%,#eef0d5,transparent 40%),#f5f5f1; } .login-card { width:min(420px,calc(100vw - 32px)); background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px; box-shadow:0 24px 80px #1e2f2a18; display:grid; gap:25px; } .login-card .brand { margin-bottom:5px; }.login-card h1 { margin:7px 0 6px; }.login-card p { color:var(--muted); margin:0; } .login-card form { display:grid; gap:15px; }.login-card label { display:grid; gap:6px; color:#686962; font-size:12px; font-weight:600; } .login-card input { border:1px solid var(--line); border-radius:11px; padding:12px; outline:none; }.login-card input:focus { border-color:#8c83eb; box-shadow:0 0 0 3px #6d5ef714; } .login-card form button { border:0; border-radius:11px; padding:12px; background:#203c33; color:white; font-weight:700; }.login-card form button:disabled { opacity:.6; } .login-error { min-height:18px; color:#c44b4b; font-size:11px; text-align:center; } .load-more { width:100%; border:0; background:transparent; color:#6D5EF7; padding:14px; font:inherit; font-weight:600; cursor:pointer; } .security-settings { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:12px; background:#f6f6f2; border-radius:12px; margin-bottom:16px; } .security-settings > div:first-child { display:grid; gap:2px; }.security-settings small { color:#999; } .security-settings > button, .two-factor-setup button { border:0; border-radius:9px; padding:8px 12px; background:#263f37; color:#fff; font-size:11px; } .two-factor-setup, .two-factor-codes { grid-column:1/-1; display:grid; gap:8px; font-size:11px; } .two-factor-setup form { display:flex; gap:8px; } .two-factor-setup input { flex:1; border:1px solid var(--line); border-radius:8px; padding:8px; } .two-factor-setup code, .two-factor-codes pre { background:#fff; border:1px dashed #cfd3cb; border-radius:8px; padding:8px; font-size:12px; word-break:break-all; user-select:all; margin:0; } .manager-access { display:grid; gap:6px; width:100%; margin-top:8px; font-size:11px; } .manager-access .access-accounts { display:flex; flex-wrap:wrap; gap:6px; } .manager-access label { display:inline-flex; align-items:center; gap:4px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px 8px; } .manager-access select { border:1px solid var(--line); border-radius:8px; padding:4px 6px; font-size:11px; } .manager-access .access-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .manager-access button { border:0; background:#f1e2dc; color:#8a3b25; border-radius:8px; padding:4px 8px; font-size:10px; } .manager-row.detailed { flex-wrap:wrap; } .owner-2fa-hint { position:relative; } .owner-2fa-hint::after { content:''; position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:#e0653a; } .message-system { text-align:center; color:#9a9c94; font-size:10px; margin:10px auto; } /* Дзвінок за посиланням */ .call-button { font-size:15px; }.call-button.live { background:#1f7a4d; color:#fff; border-color:#1f7a4d; animation:call-live 1.6s ease-in-out infinite; }@keyframes call-live { 50% { box-shadow:0 0 0 6px #1f7a4d22; } } .call-dialog { position:fixed; inset:auto 20px 20px auto; margin:0; width:min(340px,calc(100vw - 32px)); border:0; border-radius:20px; padding:0; color:var(--text); background:#fff; box-shadow:0 24px 70px #14231f40; z-index:60; } .call-dialog.minimized .call-body,.call-dialog.minimized .call-link { display:none; } .call-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 8px; }.call-head strong { font-size:15px; }.call-head button { width:32px; height:32px; border:0; border-radius:10px; background:#f1f1ed; color:#777; font-size:18px; } .call-body { padding:6px 16px 4px; text-align:center; } .call-ring { width:64px; height:64px; margin:4px auto 8px; border-radius:50%; background:#24473c; color:#fff; font-size:26px; display:grid; place-items:center; position:relative; }.call-ring.pulse::after { content:""; position:absolute; inset:-8px; border-radius:50%; border:3px solid #24473c55; animation:pulse-ring 1.4s ease-out infinite; }@keyframes pulse-ring { from { transform:scale(.9); opacity:1; } to { transform:scale(1.35); opacity:0; } } .call-timer { font-variant-numeric:tabular-nums; font-size:24px; font-weight:650; } .call-status { margin:4px 0 8px; color:#6d746f; font-size:12px; min-height:18px; }.call-status.live { color:#1f7a4d; font-weight:650; } .call-link { display:flex; gap:6px; margin:0 0 6px; }.call-link input { flex:1; min-width:0; min-height:36px; padding:0 10px; border:1px solid var(--line); border-radius:10px; font-size:11px; color:#6d746f; }.call-link button { border:0; border-radius:10px; padding:0 12px; background:#eef0ea; font-size:11px; font-weight:650; } .call-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px 16px 16px; }.call-controls button { min-height:42px; border:0; border-radius:12px; font-size:12px; font-weight:650; }#callMute { background:#eef0ea; }#callMute.on { background:#f7d9d0; color:#8a2f1c; }#callHang { background:#c9432c; color:#fff; } .call-card { display:grid; gap:6px; }.call-card audio { width:100%; max-width:260px; height:36px; }.call-card small { opacity:.75; font-size:10px; } @media (max-width:720px) { .chat-actions { grid-template-columns:minmax(0,1fr) 42px 42px minmax(100px,1fr) 42px; } .call-dialog { inset:auto 10px calc(72px + env(safe-area-inset-bottom)) 10px; width:auto; } } /* Плашка каналу в шапці діалогу: одразу видно, звідки пише клієнт (Telegram, далі Viber/Instagram) */ .channel-chip { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:#e8f1fb; color:#1f5f99; font-size:10px; font-weight:700; letter-spacing:.02em; } /* Копілот */ .ai-button { width:36px; height:36px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:15px; }.ai-button.busy { opacity:.5; animation:ai-pulse 1s ease-in-out infinite; }@keyframes ai-pulse { 50% { transform:scale(.9); } } .ai-summary { margin:0 22px; padding:10px 14px; border-radius:12px; background:#f4f1e8; color:#4c4636; font-size:11px; line-height:1.5; display:grid; gap:3px; } .ai-summary.tense { background:#fff1e6; color:#7a4a1f; }.ai-summary.angry { background:#fde8e4; color:#8a2f1c; } .ai-summary b { font-weight:700; }.ai-summary .ai-open { display:flex; flex-wrap:wrap; gap:4px; }.ai-summary .ai-open span { padding:1px 8px; border-radius:999px; background:#ffffffaa; } .ai-summary .ai-flag { display:inline-block; margin-right:6px; padding:1px 8px; border-radius:999px; background:#c9432c; color:#fff; font-weight:700; font-size:10px; } .ai-suggest { margin:0 0 8px; padding:10px 12px; border:1px dashed #b7c2bb; border-radius:12px; background:#f6f9f6; } .ai-suggest-head { display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:700; color:#3f5a4f; text-transform:uppercase; letter-spacing:.05em; }.ai-suggest-head button { width:24px; height:24px; border:0; border-radius:8px; background:#e8eee9; color:#666; } .ai-suggest-text { margin:6px 0 8px; font-size:13px; line-height:1.5; white-space:pre-wrap; color:var(--text); }.ai-suggest-text.busy { color:#8b948e; } .ai-suggest-actions { display:flex; gap:6px; }.ai-suggest-actions button { min-height:32px; padding:0 12px; border:0; border-radius:9px; font-size:11px; font-weight:700; background:#263f37; color:#fff; }.ai-suggest-actions button:last-child { background:#e8eee9; color:#2f4a40; } @media (max-width:720px) { .ai-summary { margin:0 10px; } } /* Тип контакту */ .kind-row { grid-column:1/-1; display:flex !important; align-items:center; justify-content:space-between; gap:8px; }.kind-row select { border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:#fff; font-size:11px; } .kind-badge { display:inline-flex; align-items:center; padding:1px 7px; border-radius:999px; background:#ece7f7; color:#4d3a8a; font-size:9px; font-weight:700; }.kind-badge.courier { background:#e6eef8; color:#1f4f8a; }.kind-badge.supplier { background:#f6ecd9; color:#7a5116; }.kind-badge.spam { background:#f3e3e0; color:#8a2f1c; } .channel-chip + .kind-badge { margin-left:4px; } /* ===================================================================================================== Тема «як у Telegram»: та сама мова, що менеджери бачать щодня в телефоні — синій акцент, білий список, зелені вихідні бульбашки, кружечок непрочитаного, галочки. Кольори — глобально, розкладка — лише десктоп, щоб не ламати мобільну сітку нижче 720px. ===================================================================================================== */ :root { --bg:#ffffff; --panel:#ffffff; --text:#000000; --muted:#707579; --line:#e4e4e4; --accent:#3390ec; --accent-soft:#e7f3ff; --green:#3390ec; --out:#effdde; --chatbg:#e7ebf0; } body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif; font-size:14px; color:var(--text); } /* Рейка */ .rail { background:#f4f4f5; color:#707579; border-right:1px solid var(--line); } .brand { background:var(--accent); color:#fff; border-radius:50%; }.brand span { color:#dff0ff; } .rail-button { color:#707579; border-radius:50%; }.rail-button.active,.rail-button:hover { background:#e7f3ff; color:var(--accent); } .rail .self { background:var(--accent); color:#fff; } /* Список чатів */ .sidebar { border-right:1px solid var(--line); } h1 { font-size:20px; letter-spacing:-.01em; } .eyebrow { color:#707579; letter-spacing:.06em; } .icon-button { border-radius:50%; border-color:transparent; background:transparent; color:#707579; }.icon-button:hover { background:#f4f4f5; } #notifyButton.enabled { background:var(--accent); color:#fff; } .search-wrap input { border:0; border-radius:22px; background:#f4f4f5; padding:9px 40px 9px 38px; } .search-wrap input:focus { background:#fff; box-shadow:0 0 0 2px var(--accent); } kbd { display:none; } .account-chip { background:#f4f4f5; color:#707579; }.account-chip.active { background:var(--accent-soft); border-color:transparent; color:var(--accent); box-shadow:none; }.account-chip b { background:#fff; color:#707579; } .filters { gap:18px; border-bottom:1px solid var(--line); } .filters button { color:#707579; font-weight:600; font-size:13px; }.filters button.active { color:var(--accent); }.filters button.active:after { background:var(--accent); height:3px; border-radius:3px 3px 0 0; bottom:-10px; } .conversation { border-bottom:0; padding:9px 12px; gap:10px; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; border-radius:0; } .conversation:hover { background:#f4f4f5; } .conversation.active { background:var(--accent); } .conversation.active .conversation-name,.conversation.active .preview,.conversation.active .time,.conversation.active .conversation-account { color:#fff; } .conversation.active .conversation-state,.conversation.active .channel-badge,.conversation.active .kind-badge,.conversation.active .conversation-lock,.conversation.active .related-count { background:#ffffff33; color:#fff; } .avatar { width:54px; height:54px; font-size:18px; } .conversation .avatar { width:54px; height:54px; } .avatar { background:linear-gradient(135deg,#72d5fd,#2a9ef1); color:#fff; }.avatar.peach { background:linear-gradient(135deg,#ffa85c,#ff6f3a); color:#fff; }.avatar.blue { background:linear-gradient(135deg,#82b1ff,#665fff); color:#fff; }.avatar.yellow { background:linear-gradient(135deg,#ffcd6a,#ffa85c); color:#fff; } .conversation-name { font-weight:600; font-size:15px; } .conversation-account { margin:2px 0 3px; font-size:11px; } .preview { color:#707579; font-size:13.5px; } .time { color:#95999c; font-size:12px; } .unread { background:var(--accent); color:#fff; min-width:22px; height:22px; border-radius:11px; font-size:12px; font-weight:700; margin-top:10px; } .conversation.active .unread { background:#fff; color:var(--accent); } .conversation-state,.channel-badge,.kind-badge { font-size:9px; } .state-new { background:#e7f3ff; color:var(--accent); }.state-active { background:#e6f7e8; color:#2f8f46; } .sla-badge { background:#fdecea; color:#d33b30; border-radius:6px; } /* Чат */ .chat-panel { background:var(--chatbg); } .chat-header { background:#fff; border-bottom:1px solid var(--line); } .chat-person h2 { font-size:16px; font-weight:600; } .chat-meta { color:#707579; font-size:13px; } .channel-chip { background:var(--accent-soft); color:var(--accent); } .claim-button { background:var(--accent); border-radius:22px; font-weight:600; }.claim-button.claimed { background:var(--accent-soft); color:var(--accent); } .chat-actions select { border-radius:22px; background:#fff; } .call-button.live { background:#4fae4e; border-color:#4fae4e; } .date-divider { background:#00000026; color:#fff; font-weight:600; font-size:12px; border-radius:12px; padding:4px 10px; } .message { max-width:min(520px,72%); } .bubble { border-radius:14px; padding:8px 12px 8px; background:#fff; box-shadow:0 1px 1px #0000001a; font-size:14.5px; line-height:1.4; color:#000; } .message.in .bubble { border-bottom-left-radius:6px; } .message.out .bubble { color:#000; background:var(--out); border-bottom-right-radius:6px; } .message-meta { font-size:11px; color:#8b9297; margin:3px 6px 0; } .delivery-indicator.sent { color:#4fae4e; }.delivery-indicator.read { color:#4fae4e; } .message.out .phone-link { background:#3390ec14; color:#1a73c8; text-decoration-color:#1a73c855; } .reply-context { border-left-color:var(--accent); background:#3390ec12; }.reply-context strong { color:var(--accent); } .message.out .reply-context { border-left-color:#4fae4e; background:#4fae4e14; }.message.out .reply-context strong { color:#2f8f46; } .message.out .file-icon { background:#ffffffcc; color:#2f8f46; } .file-icon { background:var(--accent-soft); color:var(--accent); border-radius:50%; } .message.note .bubble { background:#fff8c9; color:#6d5f1e; } .message-system { align-self:center; padding:4px 10px; border-radius:12px; background:#00000026; color:#fff; font-size:12px; font-weight:600; } .load-older { border-radius:22px; border:0; background:#ffffffd9; color:#707579; font-size:12px; } .call-card { color:#000; } /* Композер */ .composer-wrap { background:transparent; padding:6px 12px 12px; } .quick { border-radius:16px; border-color:#dfe3e8; background:#fff; color:#707579; font-size:12px; }.quick-primary { background:var(--accent-soft); border-color:transparent; color:var(--accent); } .composer { border:0; border-radius:22px; background:#fff; box-shadow:0 1px 2px #00000022; padding:5px 6px 5px 6px; } .composer textarea { font-size:15px; padding:9px 6px; } .attach { background:transparent; color:#707579; font-size:24px; } .send-button { background:var(--accent); border-radius:50%; } .schedule-button,.note-button,.ai-button { color:#707579; } .ai-button { border:0; background:transparent; } .note-button { font-size:12px; } .composer.note-mode { background:#fffbe6; box-shadow:0 0 0 2px #e6d67a; } .composer-hint { color:#95999c; } .ai-suggest { background:#fff; border:0; box-shadow:0 1px 2px #00000022; border-radius:16px; }.ai-suggest-head { color:var(--accent); }.ai-suggest-actions button { background:var(--accent); border-radius:16px; }.ai-suggest-actions button:last-child { background:#f4f4f5; color:#707579; } .ai-summary { background:#fff; color:#222; box-shadow:0 1px 1px #0000001a; border-radius:12px; font-size:12.5px; }.ai-summary.tense { background:#fff6e5; }.ai-summary.angry { background:#fdecea; color:#8a2f1c; } /* Права картка */ .details { border-left:1px solid var(--line); } .details-section .eyebrow { color:#707579; } .contact-form button,.manager-form button,.schedule-dialog form>button,.template-dialog form>button,.order-extract button { background:var(--accent); border-radius:22px; } .onboarding-bar i { background:var(--accent); } /* Порожній стан */ .empty-icon { color:var(--accent); border-radius:50%; } @media (min-width:721px) { .app-shell { grid-template-columns:64px 380px minmax(420px,1fr) auto; } .sidebar-header { padding:14px 14px 8px; } .accounts { padding:0 12px 10px; } .search-wrap { margin:0 12px 10px; } .filters { padding:0 14px 8px; } .chat-header { height:58px; padding:0 16px; } .messages { padding:16px max(16px,6%); gap:4px; } .details { padding:20px 18px; } .ai-summary { margin:8px 16px 0; } } .conversation-account { white-space:nowrap; overflow:hidden; }.conversation-account>span:first-child,.conversation-account>.account-text { overflow:hidden; text-overflow:ellipsis; } .ai-summary { flex:0 0 auto; } .composer textarea { min-width:0; } @media (max-width:720px) { .schedule-button { display:none; } .note-button { font-size:11px; padding:11px 2px; } .composer textarea { font-size:16px; } } /* ---- Мобільний UX-прохід 23.09 ---- */ @media (max-width:720px) { /* Список: компактна шапка (на ~90px нижче стартує список), плоскі рядки як у Telegram */ .sidebar-header { padding:max(10px,env(safe-area-inset-top)) 14px 6px; } .sidebar-header .eyebrow { display:none; } .sidebar-header h1 { font-size:22px; margin:0; } .sidebar-header .icon-button { width:38px; height:38px; } .accounts { padding:0 12px 8px; gap:6px; } .account-chip { min-height:32px; padding:5px 10px; font-size:12px; } .search-wrap { margin:0 12px 6px; } .search-wrap input { min-height:40px; border-radius:20px; font-size:16px; background:#f4f4f5; } .search-wrap svg { top:11px; left:13px; } .filters { gap:16px; padding:0 14px 6px; } .filters button { min-height:34px; font-size:13px; } .filters button.active:after { bottom:-7px; } .conversation-list { padding:0 0 22px; background:#fff; } .conversation { min-height:76px; margin:0; padding:10px 12px; border:0; border-bottom:1px solid #f0f0f0; border-radius:0; box-shadow:none; grid-template-columns:54px minmax(0,1fr) auto; } .conversation:active { transform:none; background:#f4f4f5; } .conversation.active { background:#fff; border-color:#f0f0f0; } .conversation.has-unread:before,.conversation.sla-overdue:before { left:0; top:14px; bottom:14px; } .conversation.has-unread:before { background:var(--accent); } .conversation>.avatar { width:54px; height:54px; font-size:17px; } .conversation-name { font-size:15px; } .conversation.has-unread .conversation-name { color:#000; font-weight:700; } .preview { font-size:13px; -webkit-line-clamp:1; } .time { font-size:11px; } .unread { margin:22px 0 0; background:var(--accent); } .toast { bottom:calc(76px + env(safe-area-inset-bottom)); } body.chat-is-open .toast { bottom:calc(84px + env(safe-area-inset-bottom)); } /* Нижнє меню — синій акцент */ .mobile-nav button.active { color:var(--accent); } /* Чат: шапка компактніша, статус не обрізається, бульбашки ширші */ .chat-header { min-height:104px; grid-template-rows:46px 40px; padding-bottom:7px; } .chat-actions { grid-template-columns:minmax(0,1fr) 40px 40px minmax(0,1fr) 40px; gap:6px; } .chat-actions>* { min-height:40px; } .chat-actions .icon-button { width:40px; height:40px; } .chat-actions select { width:100%; min-width:0; padding:6px 24px 6px 10px; font-size:12px; } .claim-button { padding:6px 8px; font-size:12px; } .message { max-width:86%; } .messages { padding:12px 10px 8px; } .date-divider { margin:6px 0; } /* Зведення копілота: згорнуте в один рядок, тап — розгортає */ .ai-summary { margin:6px 10px 0; padding:8px 34px 8px 12px; position:relative; cursor:pointer; } .ai-summary.collapsed>div:not(:first-child) { display:none; } .ai-summary.collapsed>div:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ai-summary::after { content:"⌃"; position:absolute; right:12px; top:8px; color:#95999c; font-size:14px; } .ai-summary.collapsed::after { content:"⌄"; } .chat-actions select { width:100%; } #infoToggle { grid-column:auto; grid-row:auto; } .ai-summary .ai-open { margin-top:4px; } /* Композер: чернетка копілота не займає пів екрана */ .ai-suggest-text { max-height:110px; overflow:auto; font-size:14px; } .ai-suggest-actions button { min-height:40px; flex:1; } .quick { min-height:34px; font-size:12px; } .composer { padding:4px 4px 4px 6px; } .attach,.send-button,.ai-button { width:40px; height:40px; } .composer-hint { display:none; } /* Картка клієнта: більші тапи, поля 16px, щоб iOS не зумив */ .contact-form input,.contact-form textarea,.contact-form select,.kind-row select,#assigneeSelect,.reminder-form input,.inline-add input { min-height:44px; font-size:16px; } .contact-form button,.order-extract button { min-height:46px; font-size:14px; } .details-section .eyebrow { font-size:11px; } /* Діалоги команди/огляду — на всю ширину знизу */ .team-dialog { position:fixed; inset:auto 0 0; width:100vw; max-width:none; max-height:92dvh; margin:0; border-radius:22px 22px 0 0; padding:18px 16px max(18px,env(safe-area-inset-bottom)); overflow:auto; } } /* iOS фарбує