#modal-detail #det-close{transition:background .15s,color .15s}
#modal-detail.open #det-close{visibility:visible}
#modal-detail #det-close:focus-visible{outline:1px solid var(--violet3);outline-offset:3px}
#modal-detail .detail-comment-composer[hidden]{display:none!important}
#modal-detail.overlay{padding:16px;align-items:center}
#modal-detail>.modal.modal-lg{display:flex;flex-direction:column;height:auto;min-height:0;max-height:calc(100dvh - 32px);overflow:clip}
#modal-detail .m-head{position:relative;flex:0 0 auto;min-width:0}
#modal-detail .m-head>div{min-width:0}
#modal-detail .m-title{min-width:0;overflow-wrap:anywhere}
#modal-detail textarea.m-title{resize:none;overflow:auto;min-height:30px;max-height:150px;line-height:1.45}
#modal-detail .dd-grid{position:relative;contain:layout;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;align-items:start;overscroll-behavior:contain;overflow-anchor:none;scroll-padding:20px}
#modal-detail .dd-main,#modal-detail .dd-side{min-width:0;min-height:0;max-height:none;overflow:visible}
#modal-detail .dd-main>*{flex:0 0 auto;min-width:0}
#modal-detail .detail-rich-text{overflow-wrap:anywhere;max-width:100%}
#modal-detail .detail-rich-text img{max-width:100%;height:auto}
#modal-detail .detail-rich-text pre{white-space:pre-wrap;overflow-wrap:anywhere}
#modal-detail .detail-comments-head{gap:12px;align-items:center}
#modal-detail .detail-comment-composer{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px}
#modal-detail .detail-comment-composer .av{width:30px;height:30px;margin:0!important;align-self:center}
#modal-detail .detail-comment-composer textarea{display:block;min-width:0;width:100%;height:40px;min-height:40px!important;max-height:140px;padding:10px 0!important;line-height:20px;resize:none}
#modal-detail .detail-comment-composer .detail-comment-send{min-height:36px;align-self:center!important;margin:0}
#modal-detail .cmt{align-items:flex-start;gap:12px;margin:0 0 12px}
#modal-detail .cmt>.av{width:30px;height:30px;flex:none;margin:0!important}
#modal-detail .cmt-bubble{border-radius:12px;padding:10px 12px}
#modal-detail #det-client-group[hidden]{display:none!important}
#modal-detail .detail-assignee-person{display:flex;align-items:center;gap:10px;min-width:0;font-size:12px;line-height:1.6;color:var(--text2)}
#modal-detail .detail-assignee-person>.av{flex:none;width:32px;height:32px}
#modal-detail .detail-assignee-person>.fi,#modal-detail .detail-assignee-person>span{min-width:0;flex:1;overflow-wrap:anywhere}
#modal-detail #det-admin-controls{display:flex;flex-direction:column;gap:10px}
#modal-detail #det-admin-controls>.btn{width:100%;justify-content:center;margin:0}
@media(min-width:901px){
 #modal-detail .dd-grid{grid-template-rows:minmax(0,1fr);overflow:clip;align-items:stretch}
 #modal-detail .dd-main,#modal-detail .dd-side{position:relative;contain:layout;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scroll-padding:20px}
}
@media(max-width:900px){
 #modal-detail.overlay.open{padding:12px max(10px,var(--safe-right)) max(12px,var(--safe-bottom)) max(10px,var(--safe-left));align-items:center!important}
 #modal-detail.overlay.open>.modal.modal-lg{width:100%;max-width:600px!important;height:auto;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px)!important;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border2)!important;border-radius:20px!important;box-shadow:0 24px 80px #0005;background:var(--bg2)}
 #modal-detail .m-head{position:relative;flex:none;align-items:flex-start;padding:18px 18px 14px;gap:10px;z-index:2;background:var(--bg2)}
 #modal-detail .m-title{font-size:17px!important;line-height:1.45;letter-spacing:-.3px;overflow-wrap:anywhere;min-width:0}
 #modal-detail input.m-title{padding:3px 0!important;min-height:30px;border-radius:5px}
 #modal-detail textarea.m-title{padding:3px 0!important;min-height:30px;max-height:150px;resize:none;overflow:auto;border-radius:5px;white-space:pre-wrap}
 #modal-detail .m-close{width:34px;height:34px;border-radius:10px;font-size:17px;color:var(--text2)}
 #modal-detail #det-badges{flex-wrap:wrap;gap:6px;margin-top:8px!important}
 #modal-detail .detail-save-state{font-size:9px;min-height:12px;margin-top:6px}
 #modal-detail .dd-grid{display:block;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;scroll-padding:16px}
 #modal-detail .dd-main{display:flex;flex-direction:column;gap:18px;max-height:none;min-height:0;padding:16px 16px 20px;border:0;overflow:visible}
 #modal-detail .dd-side{display:none}
 #modal-detail .detail-meta-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;padding:0 0 16px;border-bottom:1px solid var(--border)}
 #modal-detail .detail-side-group{padding:0;margin:0;border:0;border-radius:0;background:none;min-width:0}
 #modal-detail .detail-meta-fields.detail-client>.detail-side-group:first-child{grid-column:1/-1}
 #modal-detail .detail-meta-fields:not(.detail-client)>.detail-side-group:nth-child(-n+2){grid-column:1/-1}
 #modal-detail .dd-label{font-size:9px;line-height:1.5;letter-spacing:.055em;margin:0 0 5px;color:var(--text3)}
 #modal-detail .dd-val{font-size:12px;line-height:1.5;min-height:22px;margin:0;overflow-wrap:anywhere}
 #modal-detail .detail-meta-fields .fi{font-size:16px;min-height:40px;padding:8px 10px;border-radius:9px;background:var(--bg3)}
 #modal-detail .detail-meta-fields .badge{font-size:10px}
 #modal-detail .detail-section-card{background:none;border:0;border-radius:0;padding:0}
 #modal-detail .detail-section-head{margin-bottom:9px;min-height:26px}
 #modal-detail .detail-section-title{font-size:12px;color:var(--text);gap:7px}
 #modal-detail .detail-edit-btn{font-size:11px;padding:6px 8px}
 #modal-detail .detail-rich-text{padding:0!important;border:0!important;min-height:0!important;background:transparent!important;line-height:1.8;font-size:13px}
 #modal-detail .detail-empty{font-size:12px;font-style:normal;color:var(--text3)}
 #modal-detail .detail-status-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 #modal-detail .detail-status-grid .btn{min-height:34px;justify-content:center;padding:7px 3px;font-size:9px;white-space:normal;line-height:1.3;border-radius:8px}
 #modal-detail #det-status-controls:empty{display:none}
 #modal-detail #det-comments-section{border-top:1px solid var(--border);padding-top:16px}
 #modal-detail .detail-comments-head{margin-bottom:12px}
 #modal-detail .detail-comments-count{font-size:9px;padding:2px 7px}
 #modal-detail #det-comments>div:only-child:not(.cmt){padding:10px 0!important;font-size:12px!important;color:var(--text3)}
 #modal-detail .detail-comment-composer{position:static;display:grid;grid-template-columns:26px minmax(0,1fr) 36px;align-items:end;gap:8px;margin:12px 0 0;padding:8px;border:1px solid var(--border2);border-radius:12px;background:var(--bg3);box-shadow:none;backdrop-filter:none}
 #modal-detail .detail-comment-composer .av{width:26px;height:26px;margin:0!important;font-size:9px}
 #modal-detail .detail-comment-composer textarea{height:40px;min-height:40px!important;max-height:140px;padding:9px 1px!important;border:0!important;border-radius:0!important;background:transparent!important;font-size:16px!important;line-height:1.35!important;resize:none}
 #modal-detail .detail-comment-composer .detail-comment-send{width:36px;min-width:36px;height:38px;min-height:38px;padding:0;margin:0;grid-column:auto;align-self:end;border-radius:9px}
 #modal-detail #det-admin-controls:empty{display:none}
 #modal-detail #det-admin-controls{border-top:1px solid var(--border);padding-top:14px}
 #modal-detail .detail-danger-zone{margin:0;padding:0;border:0}
 #modal-detail .detail-editor,#modal-detail .demand-rich-input{font-size:16px;min-height:120px}
}
@media(max-width:360px){#modal-detail .m-head{padding:15px}#modal-detail .dd-main{padding:14px;gap:16px}#modal-detail .detail-meta-fields{gap:10px}#modal-detail .detail-meta-fields:not(.detail-client){grid-template-columns:1fr}}

/* A compact document surface, with consistent controls and one mobile scroll. */
@media(max-width:900px){
 #modal-detail.overlay.open{top:var(--demand-viewport-top,0px);bottom:auto;height:var(--demand-viewport-height,100dvh);padding:10px max(10px,var(--safe-right)) max(10px,var(--safe-bottom)) max(10px,var(--safe-left))}
 #modal-detail.overlay.open>.modal.modal-lg{max-height:calc(var(--demand-viewport-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 20px)!important;border-radius:18px!important}
 #modal-detail>.modal{transform:translateY(6px);transition:transform .2s cubic-bezier(.2,.75,.25,1)}
 #modal-detail.open>.modal{transform:translateY(0)}
 #modal-detail .m-head{padding:16px 16px 12px;gap:12px}
 #modal-detail .m-head>div{flex:1;min-width:0}
 #modal-detail .m-title{font-size:16px!important;line-height:1.4;letter-spacing:-.2px}
 #modal-detail textarea.m-title{max-height:112px;padding:2px 0!important}
 #modal-detail #det-close{width:34px;height:34px;border-radius:10px}
 #modal-detail #det-badges{margin-top:8px!important;gap:6px}
 #modal-detail #det-badges .badge{font-size:10px;line-height:1.4;padding:4px 8px}
 #modal-detail .detail-save-state{font-size:9px;line-height:1.5;margin-top:7px;color:var(--text3)}
 #modal-detail .dd-main{padding:14px 16px 18px;gap:22px}
 #modal-detail .detail-meta-fields{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--bg3);gap:12px}
 #modal-detail .detail-side-group{min-width:0;max-width:100%}
 #modal-detail .dd-label{font-size:9px;letter-spacing:.055em;margin-bottom:6px;line-height:1.4}
 #modal-detail .detail-meta-fields .fi{width:100%;max-width:100%;min-width:0;min-height:44px;height:44px;padding:9px 10px;border-radius:10px;background:var(--bg2);color:var(--text2);font-family:'Manrope',sans-serif}
 #modal-detail .detail-meta-fields select.fi{appearance:none;-webkit-appearance:none;padding-right:30px;background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239998ad' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 9px center;background-size:16px}
 #modal-detail .detail-assignee-person{gap:9px;font-size:13px;line-height:1.5}
 #modal-detail .detail-assignee-person>.av{width:30px;height:30px;font-size:10px}
 #modal-detail .detail-assignee-person>.fi{width:0;flex:1 1 0}
 #modal-detail .capacity-date-wrap .capacity-calendar-toggle:not([hidden]){height:44px;background:var(--bg2);padding:9px 10px;font-size:13px;font-family:'Manrope',sans-serif}
 #modal-detail .detail-section-head{gap:10px;min-height:28px;margin-bottom:10px}
 #modal-detail .detail-section-title{font-size:12px;line-height:1.5;font-weight:600;gap:7px}
 #modal-detail .detail-section-title>span{font-size:12px;line-height:1}
 #modal-detail .detail-edit-btn{min-height:32px;padding:6px 0 6px 8px;font-size:11px}
 #modal-detail .detail-rich-text{font-size:13px;line-height:1.75;color:var(--text2)}
 #modal-detail .detail-rich-text h2{font-size:18px;line-height:1.45;margin:14px 0 8px}
 #modal-detail .detail-rich-text h3{font-size:15px;line-height:1.5;margin:12px 0 7px}
 #modal-detail .detail-rich-text p{margin-bottom:9px}
 #modal-detail .detail-rich-text ul,#modal-detail .detail-rich-text ol{padding-left:20px}
 #modal-detail .detail-empty{font-size:12px;color:var(--text3)}
 #modal-detail .detail-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:4px;border:1px solid var(--border);border-radius:11px;background:var(--bg3)}
 #modal-detail .detail-status-grid .btn{min-height:36px;padding:6px 3px;font:600 10px/1.35 'Manrope',sans-serif;border-radius:8px;white-space:normal;gap:4px;background:transparent!important;border:1px solid transparent!important;color:var(--text3)!important;transition:background .18s,border-color .18s,color .18s}
 #modal-detail .detail-status-grid .btn[aria-pressed=true]{background:var(--bg2)!important;border-color:var(--border2)!important;color:var(--text)!important}
 #modal-detail .detail-status-grid .detail-status-dot{width:5px;height:5px;flex:none;border-radius:50%;background:var(--text3)}
 #modal-detail [data-detail-status="Em andamento"] .detail-status-dot{background:var(--amber)}
 #modal-detail [data-detail-status="Concluído"] .detail-status-dot{background:var(--emerald)}
 #modal-detail #det-comments-section{padding-top:18px}
 #modal-detail .detail-comments-head{gap:8px;margin-bottom:10px}
 #modal-detail .detail-comments-count{font-size:9px;padding:3px 7px;white-space:nowrap}
 #modal-detail #det-comments>div:only-child:not(.cmt){font-size:12px!important;padding:10px 0!important;text-align:left!important}
 #modal-detail .cmt{gap:9px;margin-bottom:10px}
 #modal-detail .cmt>.av{width:26px;height:26px;font-size:9px}
 #modal-detail .cmt-bubble{min-width:0;padding:10px 11px;border-radius:11px}
 #modal-detail .cmt-name{font-size:11px}#modal-detail .cmt-text{overflow-wrap:anywhere}
 #modal-detail .cmt-text{font-size:12px;line-height:1.7}
 #modal-detail .detail-comment-composer{grid-template-columns:26px minmax(0,1fr) 38px;gap:8px;padding:8px;margin-top:12px;align-items:center;border-radius:12px}
 #modal-detail .detail-comment-composer textarea{height:40px;min-height:40px!important;padding:9px 0!important;line-height:22px!important}
 #modal-detail .detail-comment-composer .detail-comment-send{height:38px;min-height:38px;width:38px;align-self:center;border-radius:10px;box-shadow:none}
 #modal-detail #det-admin-controls{gap:8px;padding-top:18px}
 #modal-detail #det-admin-controls>.btn{min-height:40px;font:600 12px/1.4 'Manrope',sans-serif;border-radius:10px;white-space:normal}
}
@media(max-width:360px){#modal-detail .detail-meta-fields{padding:10px;gap:10px}#modal-detail .detail-meta-fields:not(.detail-client){grid-template-columns:repeat(2,minmax(0,1fr))}#modal-detail .detail-status-grid .btn{font-size:9px}}
@media(prefers-reduced-motion:reduce){#modal-detail,#modal-detail *{scroll-behavior:auto!important;transition:none!important}}