voip click2calll

static/css/operations.css

@@ -39,6 +39,11 @@
 .contact-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;padding:1rem;background:#f7fafc}.contact-card{display:grid;gap:.75rem;min-width:0;border:1px solid #dce7ef;border-radius:1rem;background:#fff;padding:1rem;transition:.18s ease;box-shadow:0 10px 28px -26px #08376b}.contact-card:hover{transform:translateY(-2px);border-color:#9dcbe2;box-shadow:0 18px 36px -29px #08376b}.contact-card header{display:flex;align-items:center;gap:.7rem}.contact-avatar{display:grid;width:2.65rem;height:2.65rem;flex:none;place-items:center;border-radius:.8rem;background:linear-gradient(145deg,#dff4ff,#dff7ef);color:#084d73;font-size:1rem;font-weight:900}.contact-identity{min-width:0;flex:1}.contact-identity h2{overflow:hidden;margin:0;color:#153f60;font-size:.88rem;text-overflow:ellipsis;white-space:nowrap}.contact-identity p{overflow:hidden;margin:.15rem 0 0;color:#718698;font-size:.63rem;text-overflow:ellipsis;white-space:nowrap}.contact-type{flex:none;border-radius:999px;background:#e7f4fb;padding:.2rem .48rem;color:#146b98;font-size:.57rem;font-weight:900}.contact-type.type-supplier{background:#fff3d8;color:#966000}.contact-type.type-carrier{background:#f0eaff;color:#6841b8}.contact-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;color:#5f7689;font-size:.64rem}.contact-groups{display:flex;min-height:1.6rem;flex-wrap:wrap;gap:.3rem}.contact-groups span{border-radius:999px;background:#edf5f8;padding:.18rem .48rem;color:#49677c;font-size:.58rem;font-weight:800}.contact-groups small{color:#93a2ae;font-size:.6rem}.contact-ticket-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}.contact-ticket-stats span{display:grid;gap:.1rem;border-radius:.6rem;background:#f3f6f8;padding:.45rem;text-align:center;color:#718394;font-size:.55rem}.contact-ticket-stats b{color:#173f60;font-size:.82rem}.contact-ticket-stats .needs-action{background:#fff5df;color:#916000}.contact-ticket-stats .needs-action b{color:#c37700}.contact-card footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf2f5;padding-top:.7rem}.contact-card footer a{color:#557187;font-size:.64rem;font-weight:900}.contact-card footer .primary-action{border-radius:.6rem;background:#e8f6ff;padding:.4rem .65rem;color:#0875b5}.contact-empty{grid-column:1/-1}.contact-empty>span{display:grid;width:3rem;height:3rem;margin:0 auto .5rem;place-items:center;border-radius:1rem;background:#eaf5fb;color:#1679aa;font-size:1.3rem}
 .operations-split,.template-layout,.dispatch-layout{display:grid;grid-template-columns:minmax(0,1fr) 20rem;align-items:start;gap:1rem}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem;border-bottom:1px solid #e5edf3;background:#f8fbfd}.panel-heading small{color:#74889a;font-size:.6rem}.panel-heading h2{margin:.15rem 0 0;color:#173f60;font-size:.95rem}.panel-heading>span{border-radius:999px;background:#e7f4fb;padding:.3rem .6rem;color:#126c9d;font-size:.6rem;font-weight:900}.group-card-list,.template-card-list{display:grid;gap:.55rem;padding:.8rem}.group-card,.template-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.75rem;border:1px solid #e0e9ef;border-radius:.8rem;padding:.75rem;transition:.15s}.group-card:hover,.template-card:hover{border-color:#acd2e5;background:#fafdff}.group-symbol,.template-icon{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.7rem;background:#e8f5fb;color:#0870a6;font-weight:900}.group-card h3,.template-card h3{margin:0;color:#173f60;font-size:.78rem}.group-card p,.template-card p{margin:.12rem 0;color:#667d90;font-size:.62rem}.group-card small,.template-card small{color:#8a9aa7;font-size:.56rem}.group-card>a,.template-card>a{color:#0875b5;font-size:.62rem;font-weight:900}.operations-form-side{overflow:hidden;border:1px solid #d8e4ec;border-radius:1rem;background:#fff;box-shadow:0 18px 40px -36px #08376b;position:sticky;top:5.6rem}.operations-form-side>header{display:flex;align-items:center;gap:.65rem;padding:1rem;background:linear-gradient(135deg,#0a4d78,#087b91);color:#fff}.operations-form-side>header>span{display:grid;width:2rem;height:2rem;place-items:center;border-radius:.6rem;background:rgba(255,255,255,.16);font-weight:900}.operations-form-side header small{font-size:.56rem;color:rgba(255,255,255,.65)}.operations-form-side header h2{margin:.12rem 0 0;font-size:.85rem}.operations-form{display:grid;gap:.75rem;padding:1rem}.operations-form label{display:grid;gap:.35rem}.operations-form label>span{color:#405e75;font-size:.65rem;font-weight:900}.operations-form input,.operations-form select,.operations-form textarea{width:100%;min-height:2.65rem;border:1px solid #c8d8e4;border-radius:.7rem;background:#fbfdff;padding:.6rem .7rem;color:#143e60}.operations-form textarea{min-height:6rem;resize:vertical}.operations-form button{min-height:2.75rem;border:0;border-radius:.7rem;background:linear-gradient(135deg,#0879b7,#075b8d);color:#fff;font-size:.7rem;font-weight:900}.operations-form>a{text-align:center;color:#6e8293;font-size:.62rem;font-weight:800}.operations-form .errorlist,.editor-section .errorlist,.dispatch-composer .errorlist{margin:0;padding:0;color:#b42318;font-size:.6rem;list-style:none}
 .contact-editor,.dispatch-composer{display:grid;gap:.85rem}.contact-editor{max-width:58rem;width:100%;margin-inline:auto}.editor-section,.dispatch-composer>section{overflow:hidden;border:1px solid #dbe6ee;border-radius:1rem;background:#fff;box-shadow:0 15px 38px -35px #08376b}.editor-section>header,.dispatch-composer>section>header{display:flex;align-items:center;gap:.7rem;border-bottom:1px solid #e8eef3;padding:.85rem 1rem;background:#f9fcfe}.editor-section>header>span,.dispatch-composer>section>header>span{display:grid;width:2rem;height:2rem;flex:none;place-items:center;border-radius:.65rem;background:linear-gradient(135deg,#0a699f,#098d9c);color:#fff;font-size:.7rem;font-weight:900}.editor-section h2,.dispatch-composer h2{margin:0;color:#173f60;font-size:.82rem}.editor-section header p,.dispatch-composer header p{margin:.15rem 0 0;color:#73889a;font-size:.6rem}.editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;padding:1rem}.editor-grid label,.group-selector,.message-editor{display:grid;align-content:start;gap:.35rem;color:#3f5f77;font-size:.65rem;font-weight:900}.editor-grid input,.editor-grid select,.group-selector select,.message-editor textarea{width:100%;min-height:2.75rem;border:1px solid #c8d8e4;border-radius:.72rem;background:#fbfdff;padding:.62rem .72rem;color:#123f61}.editor-grid input:focus,.editor-grid select:focus,.group-selector select:focus,.message-editor textarea:focus{border-color:#1689bd;outline:3px solid rgba(22,137,189,.11);background:#fff}.editor-grid small,.group-selector small{color:#7a8e9e;font-size:.56rem;font-weight:500}.editor-grid em,.group-selector em{color:#d05c3b;font-style:normal}.editor-wide{grid-column:1/-1}.group-selector,.message-editor{margin:1rem}.group-selector select{min-height:9rem}.location-status{margin:-.35rem 1rem .85rem;border-radius:.6rem;background:#edf7fc;padding:.55rem .7rem;color:#39708e;font-size:.58rem}.location-status.is-error{background:#fff0ed;color:#b04432}.editor-actions{display:flex;align-items:center;gap:.7rem;border:1px solid #d9e5ed;border-radius:1rem;background:#fff;padding:.8rem}.editor-actions button{min-height:2.75rem;border:0;border-radius:.7rem;background:linear-gradient(135deg,#0879b7,#075b8d);padding:.65rem 1.4rem;color:#fff;font-weight:900}.editor-actions a{color:#657d90;font-size:.65rem;font-weight:900}.editor-actions span{margin-right:auto;color:#8798a5;font-size:.58rem}
+.voip-call{position:relative;display:inline-flex;align-items:center;gap:.4rem}.voip-call-trigger{min-height:2.35rem;border:1px solid #0b8b74!important;border-radius:.65rem!important;background:#e8f8f3!important;padding:.45rem .8rem!important;color:#08735f!important;font-size:.68rem;font-weight:900}.voip-call-menu{position:absolute;z-index:80;top:calc(100% + .35rem);right:0;min-width:10.5rem;border:1px solid #d4e5e1;border-radius:.75rem;background:#fff;padding:.35rem;box-shadow:0 16px 38px -20px #08376b}.voip-call-menu button{display:block;width:100%;border:0!important;border-radius:.5rem!important;background:#fff!important;padding:.6rem .7rem!important;text-align:right;color:#164e63!important;font-size:.65rem;font-weight:800}.voip-call-menu button:hover{background:#edf9f6!important}.voip-call-status{max-width:11rem;color:#647b88;font-size:.57rem}.voip-call-status:empty{display:none}.voip-call-status.is-error{color:#b42318}.voip-call-status.is-success{color:#08735f}.contact-card footer .voip-call-status{position:absolute;right:1rem;bottom:.15rem}.ticket-head-actions .voip-call-status{position:absolute;top:100%;right:0;border-radius:.4rem;background:#fff;padding:.2rem .4rem;white-space:nowrap}.ticket-head-actions .voip-call{position:relative}
+.voip-call{isolation:isolate}.voip-call-trigger{display:flex!important;align-items:center;gap:.55rem;min-height:2.65rem!important;border:1px solid rgba(7,132,112,.28)!important;border-radius:.8rem!important;background:linear-gradient(135deg,#edfbf7,#dcf5ed)!important;padding:.38rem .55rem .38rem .72rem!important;color:#076a59!important;box-shadow:0 8px 22px -17px rgba(7,106,89,.8)!important;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important}.voip-call-trigger:hover{transform:translateY(-1px);border-color:rgba(7,132,112,.52)!important;box-shadow:0 12px 24px -16px rgba(7,106,89,.9)!important}.voip-call-trigger:focus-visible{outline:3px solid rgba(18,170,142,.2);outline-offset:2px}.voip-call-trigger:disabled{cursor:wait;opacity:.72}.voip-call-trigger-icon{display:grid;width:1.85rem;height:1.85rem;flex:none;place-items:center;border-radius:.58rem;background:linear-gradient(145deg,#0d987f,#08715f);color:#fff;box-shadow:0 6px 14px -8px #075c4e}.voip-call-trigger-icon svg{width:1rem;height:1rem;fill:currentColor}.voip-call-trigger-copy{display:grid;text-align:right;line-height:1.2}.voip-call-trigger-copy b{font-size:.68rem}.voip-call-trigger-copy small{margin-top:.16rem;color:#438478;font-size:.5rem;font-weight:700}.voip-call-chevron{margin-right:.1rem;color:#4b897e;font-size:.8rem;transition:transform .16s}.voip-call-trigger.is-open .voip-call-chevron{transform:rotate(180deg)}.voip-call-trigger.is-success .voip-call-trigger-icon{background:linear-gradient(145deg,#16a36f,#087d55)}.voip-call-trigger.is-loading .voip-call-trigger-icon svg{animation:voip-pulse .9s ease-in-out infinite alternate}@keyframes voip-pulse{to{opacity:.42;transform:scale(.82)}}
+body>.voip-call-menu{position:fixed;z-index:2147483000;top:0;right:auto;left:0;width:min(20rem,calc(100vw - 1.5rem));min-width:18rem;overflow:hidden;border:1px solid rgba(22,77,99,.13);border-radius:1rem;background:rgba(255,255,255,.98);padding:0;direction:rtl;box-shadow:0 24px 65px -24px rgba(8,47,85,.48),0 7px 18px -12px rgba(8,47,85,.25);backdrop-filter:blur(14px);transform-origin:top right;animation:voip-menu-in .16s ease-out}body>.voip-call-menu[hidden]{display:none!important}@keyframes voip-menu-in{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}body>.voip-call-menu>header{display:flex;align-items:center;gap:.7rem;border-bottom:1px solid #e7eff2;background:linear-gradient(135deg,#f1fbf8,#f7fbfd);padding:.85rem .9rem}body>.voip-call-menu>header>span{display:grid;width:2.2rem;height:2.2rem;flex:none;place-items:center;border-radius:.7rem;background:linear-gradient(145deg,#0c927b,#096c78);color:#fff;font-size:.85rem;box-shadow:0 8px 18px -11px #075f51}body>.voip-call-menu header b,body>.voip-call-menu header small{display:block}body>.voip-call-menu header b{color:#173f56;font-size:.72rem}body>.voip-call-menu header small{margin-top:.15rem;color:#718795;font-size:.55rem}.voip-call-options{display:grid;gap:.35rem;padding:.48rem}.voip-call-menu .voip-call-options button{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.65rem;width:100%;min-height:3.8rem;border:1px solid transparent!important;border-radius:.75rem!important;background:#fff!important;padding:.55rem .6rem!important;text-align:right;color:#173f56!important;box-shadow:none!important;transition:background .14s,border-color .14s,transform .14s!important}.voip-call-menu .voip-call-options button:hover,.voip-call-menu .voip-call-options button:focus-visible{transform:translateX(-2px);border-color:#cbe8df!important;background:#f1fbf8!important;outline:none}.voip-call-menu .voip-call-options button>span:nth-child(2){min-width:0}.voip-call-menu .voip-call-options b,.voip-call-menu .voip-call-options small{display:block}.voip-call-menu .voip-call-options b{font-size:.68rem}.voip-call-menu .voip-call-options small{margin-top:.18rem;overflow:hidden;color:#718795;font-size:.53rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.voip-method-icon{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.68rem;background:#e4f7f1;color:#08715f;font-size:1rem;font-weight:900}.voip-method-icon.is-mobile{background:#e9f3fb;color:#176b99}.voip-method-arrow{color:#7da19a;font-size:.85rem}
+body>.voip-call-status{position:fixed!important;z-index:2147483001;right:auto!important;bottom:1.25rem!important;left:50%!important;top:auto!important;display:flex;align-items:center;gap:.55rem;width:max-content;max-width:min(26rem,calc(100vw - 1.5rem));min-height:2.8rem;border:1px solid rgba(21,64,82,.12);border-radius:.85rem;background:#fff;padding:.55rem .85rem!important;color:#23485b!important;font-size:.64rem;font-weight:850;white-space:normal;box-shadow:0 18px 46px -20px rgba(8,47,85,.65);opacity:0;pointer-events:none;transform:translate(-50%,1rem);transition:opacity .18s,transform .18s}body>.voip-call-status:before{display:grid;width:1.55rem;height:1.55rem;flex:none;place-items:center;border-radius:.48rem;background:#e7f4f8;color:#176c88;content:'…'}body>.voip-call-status.is-visible{opacity:1;transform:translate(-50%,0)}body>.voip-call-status.is-loading:before{content:'↻';animation:voip-spin .9s linear infinite}body>.voip-call-status.is-success{border-color:#bce5d7!important;background:#f6fdfa!important;color:#08715f!important}body>.voip-call-status.is-success:before{background:#dff6ed;color:#08715f;content:'✓'}body>.voip-call-status.is-error{border-color:#f0c5be!important;background:#fff9f8!important;color:#a33a2b!important}body>.voip-call-status.is-error:before{background:#ffebe8;color:#b34231;content:'!'}@keyframes voip-spin{to{transform:rotate(360deg)}}.contact-card footer .voip-call-trigger{min-height:2.25rem!important;padding:.28rem .42rem!important}.contact-card footer .voip-call-trigger-icon{width:1.65rem;height:1.65rem}.contact-card footer .voip-call-trigger-copy small,.contact-card footer .voip-call-chevron{display:none}
+@media(max-width:560px){body>.voip-call-menu{top:auto!important;right:.65rem!important;bottom:.65rem!important;left:.65rem!important;width:auto;min-width:0;border-radius:1.05rem;transform-origin:bottom center;animation:voip-sheet-in .2s ease-out}@keyframes voip-sheet-in{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}body>.voip-call-status{bottom:5.25rem!important}.operations-hero-actions .voip-call-trigger{width:100%;justify-content:center}.ticket-head-actions .voip-call-trigger-copy small{display:none}}
 .group-selector{border:0}.group-selector legend{color:#3f5f77;font-size:.7rem;font-weight:900}.group-selector-tools{display:grid;grid-template-columns:minmax(12rem,1fr) auto auto;align-items:center;gap:.55rem;margin:.4rem 0 .65rem}.group-selector-tools label{display:block}.group-selector-tools input{width:100%;min-height:2.65rem;border:1px solid #c8d8e4;border-radius:.72rem;background:#fbfdff;padding:.58rem .75rem}.group-selection-count{border-radius:999px;background:#e7f4fb;padding:.42rem .7rem;color:#126c9d;white-space:nowrap}.group-selector-tools button{min-height:2.55rem;border:1px solid #d8e4ec;border-radius:.65rem;background:#fff;padding:.45rem .7rem;color:#64798c;font-size:.6rem;font-weight:900}.group-selector-tools button:disabled{cursor:not-allowed;opacity:.45}.group-choice-list>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.group-choice-list>div>div{border:1px solid #dbe5ec;border-radius:.75rem;background:#fbfdff;transition:.15s}.group-choice-list label{display:flex;align-items:center;gap:.65rem;min-height:3.15rem;padding:.65rem .75rem;cursor:pointer;color:#35566e;font-size:.65rem}.group-choice-list input{width:1.1rem;height:1.1rem;flex:none;accent-color:#0879a7}.group-choice-list>div>div.is-selected{border-color:#58aeca;background:#eaf8fb;box-shadow:0 0 0 2px rgba(22,137,189,.08)}.group-choice-list>div>div[hidden]{display:none}.group-empty{margin:.5rem 0;border-radius:.65rem;background:#f5f8fa;padding:.75rem;color:#758999;font-size:.62rem}.staff-attachment-picker{display:grid;gap:.8rem}.attachment-picker-copy{display:flex;align-items:center;gap:.7rem}.staff-attachment-picker .media-picker-actions{margin:0}.staff-attachment-picker .file-preview:empty{display:none}
 .dispatch-composer>footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid #d7e4ec;border-radius:1rem;background:#fff;padding:.9rem 1rem}.dispatch-composer footer b,.dispatch-composer footer small{display:block}.dispatch-composer footer b{color:#173f60;font-size:.68rem}.dispatch-composer footer small{margin-top:.18rem;color:#73889a;font-size:.56rem}.dispatch-composer footer button{min-height:2.8rem;border:0;border-radius:.72rem;background:linear-gradient(135deg,#0879b7,#087c86);padding:.65rem 1rem;color:#fff;font-size:.68rem;font-weight:900}.message-editor textarea{min-height:11rem;resize:vertical;line-height:1.9}.dispatch-history{overflow:hidden;border:1px solid #d8e4ec;border-radius:1rem;background:#fff;position:sticky;top:5.6rem}.dispatch-history>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5edf3;padding:1rem}.dispatch-history header small{color:#7b8d9d;font-size:.56rem}.dispatch-history header h2{margin:.12rem 0 0;color:#173f60;font-size:.88rem}.dispatch-history header>span{display:grid;width:2rem;height:2rem;place-items:center;border-radius:.65rem;background:#e8f4fb;color:#0873a9;font-size:.65rem;font-weight:900}.dispatch-history>div{display:grid;max-height:39rem;overflow:auto}.dispatch-history-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55rem;border-bottom:1px solid #edf2f5;padding:.75rem;color:inherit}.dispatch-history-card:hover{background:#f7fbfd}.dispatch-state{width:.5rem;height:.5rem;border-radius:50%;background:#8da0ae}.dispatch-state.state-sent{background:#12a36d}.dispatch-state.state-queued{background:#e19b18}.dispatch-state.state-partial{background:#dc5c42}.dispatch-history-card b{display:block;overflow:hidden;color:#24485f;font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}.dispatch-history-card small{display:block;margin-top:.15rem;color:#718698;font-size:.56rem}.dispatch-history-card p{display:flex;gap:.6rem;margin:.35rem 0 0;color:#8798a5;font-size:.52rem}.dispatch-history-card em{color:#8aa0b0;font-style:normal}
 .template-card-list{max-height:44rem;overflow:auto}.variable-box{border:1px dashed #b9cedb;border-radius:.7rem;background:#f7fbfd;padding:.7rem}.variable-box>b{display:block;margin-bottom:.45rem;color:#3e6077;font-size:.62rem}.variable-box>div{display:flex;flex-wrap:wrap;gap:.3rem}.variable-box code{border-radius:.35rem;background:#e7f3f9;padding:.18rem .35rem;color:#075e8d;font-size:.53rem}