#detail-overlay{display:none;position:fixed;inset:0;background:rgba(26,25,22,0.55);z-index:2000;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto}
#detail-overlay.open{display:flex}
.detail-modal{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);width:100%;max-width:calc(100vw - 40px);height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,0.18);margin:auto;overflow:hidden}

/* Top bar */
.detail-topbar{padding:20px 24px 0;border-bottom:1px solid var(--c-border);flex-shrink:0;position:relative}
.detail-topbar-left{flex:1}
.detail-jobcode{font-family:var(--font-mono);font-size:12px;color:var(--c-text3);margin-bottom:4px}
.detail-title{font-size:20px;font-weight:600;letter-spacing:-0.3px;color:var(--c-text);line-height:1.3;outline:none;border:none;background:transparent;width:100%;font-family:var(--font);padding:2px 0;margin-bottom:12px}
.detail-title:focus{outline:2px solid var(--c-accent);border-radius:4px;padding:2px 6px}
.detail-close{position:absolute;top:20px;right:20px;width:32px;height:32px;border:none;background:var(--c-surface2);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--c-text2);font-size:16px;transition:all var(--tr)}
.detail-close:hover{background:var(--c-border)}

/* Meta row */
.detail-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-bottom:14px;position:relative}
.meta-field{display:flex;align-items:center;gap:5px;padding:4px 10px;background:var(--c-surface2);border:1px solid var(--c-border);border-radius:20px;font-size:13px;color:var(--c-text2);cursor:pointer;transition:all var(--tr);white-space:nowrap}
.meta-field:hover{border-color:var(--c-border2);color:var(--c-text)}
.meta-field svg{width:12px;height:12px;flex-shrink:0}
.meta-field select,.meta-field input[type=date]{border:none;background:transparent;font-family:var(--font);font-size:13px;color:var(--c-text2);outline:none;cursor:pointer;padding:0}
.meta-field select:focus,.meta-field input[type=date]:focus{color:var(--c-text)}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.meta-assignees{display:flex;align-items:center;gap:4px;padding:4px 10px;background:var(--c-surface2);border:1px solid var(--c-border);border-radius:20px;cursor:pointer;transition:all var(--tr)}
.meta-assignees:hover{border-color:var(--c-border2)}
.meta-av{width:20px;height:20px;border-radius:50%;border:2px solid var(--c-surface);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;color:white;margin-left:-4px}
.meta-av:first-child{margin-left:0}
.meta-time{display:flex;align-items:center;gap:5px;padding:4px 10px;background:var(--c-green-bg);border:1px solid #A7F3D0;border-radius:20px;font-size:12px;font-weight:500;color:var(--c-green)}
.meta-delete{display:flex;align-items:center;gap:5px;padding:4px 10px;background:transparent;border:1px solid var(--c-border);border-radius:20px;font-size:12px;color:var(--c-text3);cursor:pointer;transition:all var(--tr);font-family:var(--font)}
.meta-delete:hover{border-color:#FCA5A5;color:var(--c-red);background:#FEF2F2}

/* Body layout */
.detail-body{display:grid;grid-template-columns:1fr 440px;flex:1;overflow:hidden;min-height:0}
.detail-main{padding:20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;border-right:1px solid var(--c-border)}
.detail-section{display:flex;flex-direction:column;gap:8px}
.detail-sidebar{display:flex;flex-direction:column;overflow:hidden}
.sidebar-section{padding:16px 20px;border-bottom:1px solid var(--c-border)}
.sidebar-section-grow{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.comments-scroll{flex:1;overflow-y:auto;min-height:0;margin-bottom:10px}

/* Notes */
.detail-notes{font-size:13px;color:var(--c-text);line-height:1.7;outline:none;min-height:100px;white-space:pre-wrap;border:1px solid transparent;border-radius:var(--radius);padding:8px;transition:border-color var(--tr)}
.detail-notes:focus{border-color:var(--c-border2);background:var(--c-surface2)}
.detail-notes:empty:before{content:attr(data-placeholder);color:var(--c-text3)}

/* Subtasks */
.subtask-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--c-border)}
.subtask-item:last-child{border-bottom:none}
.subtask-check{width:16px;height:16px;border:1.5px solid var(--c-border2);border-radius:4px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all var(--tr)}
.subtask-check.done{background:var(--c-green);border-color:var(--c-green)}
.subtask-check svg{width:10px;height:10px;color:white;display:none}
.subtask-check.done svg{display:block}
.subtask-text{font-size:14px;flex:1;color:var(--c-text)}
.subtask-text.done{text-decoration:line-through;color:var(--c-text3)}
.subtask-delete{width:20px;height:20px;border:none;background:none;cursor:pointer;color:var(--c-text3);display:none;align-items:center;justify-content:center;border-radius:4px;transition:all var(--tr)}
.subtask-item:hover .subtask-delete{display:flex}
.subtask-delete:hover{background:var(--c-surface2);color:var(--c-red)}
.subtask-input-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.subtask-input{flex:1;padding:6px 10px;border:1px solid var(--c-border2);border-radius:var(--radius);font-family:var(--font);font-size:13px;color:var(--c-text);outline:none}
.subtask-input:focus{border-color:var(--c-accent)}

/* Checklists */
.checklist-block{margin-bottom:14px}
.checklist-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.checklist-name{font-size:13px;font-weight:500;color:var(--c-text);flex:1}
.checklist-progress{font-size:12px;color:var(--c-text3)}
.checklist-bar{height:4px;background:var(--c-border);border-radius:2px;margin-bottom:8px;overflow:hidden}
.checklist-bar-fill{height:100%;background:var(--c-green);border-radius:2px;transition:width 0.3s ease}
.checklist-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--c-border)}
.checklist-item:last-child{border-bottom:none}

/* Comments */
.comment-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--c-border)}
.comment-item:last-child{border-bottom:none}
.comment-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:white;flex-shrink:0}
.comment-body{flex:1;min-width:0}
.comment-meta{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.comment-author{font-size:13px;font-weight:500;color:var(--c-text)}
.comment-time{font-size:12px;color:var(--c-text3)}
.comment-text{font-size:14px;color:var(--c-text);line-height:1.5;word-break:break-word}
/* Chat input area */
.chat-input-area{border:1.5px solid var(--c-border2);border-radius:var(--radius);overflow:hidden;flex-shrink:0;margin-top:10px;transition:border-color var(--tr)}
.chat-input-area:focus-within{border-color:var(--c-accent)}
.chat-send-row{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:6px 8px;border-top:1px solid var(--c-border);background:var(--c-surface)}

/* Quill overrides */
.ql-toolbar.ql-snow{border:none;border-bottom:1px solid var(--c-border);padding:5px 8px;font-family:var(--font)}
.ql-container.ql-snow{border:none;font-family:var(--font);font-size:14px}
.ql-editor{min-height:90px;max-height:200px;padding:10px 12px;color:var(--c-text);line-height:1.6;overflow-y:auto}
.ql-editor.ql-blank::before{color:var(--c-text3);font-style:normal;font-size:14px}
.ql-toolbar .ql-stroke{stroke:var(--c-text2)}
.ql-toolbar .ql-fill{fill:var(--c-text2)}
.ql-toolbar button:hover .ql-stroke,.ql-toolbar button.ql-active .ql-stroke{stroke:var(--c-accent)}
.ql-toolbar button:hover .ql-fill,.ql-toolbar button.ql-active .ql-fill{fill:var(--c-accent)}
.ql-toolbar button:hover,.ql-toolbar button.ql-active{color:var(--c-accent)}
.ql-snow .ql-tooltip{z-index:9999;font-family:var(--font);border:1px solid var(--c-border2);border-radius:var(--radius);box-shadow:var(--shadow-md)}

/* @mention dropdown */
#mention-dropdown{position:fixed;background:var(--c-surface);border:1px solid var(--c-border2);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:9999;min-width:200px;max-height:240px;overflow-y:auto;display:none}
.mention-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px;color:var(--c-text);transition:background var(--tr)}
.mention-item:hover,.mention-item.active{background:var(--c-surface2)}
.mention-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:white;flex-shrink:0}

/* Mention chip in rendered messages */
.chat-mention{display:inline;border-radius:4px;padding:1px 5px;font-weight:600;cursor:default;font-size:inherit}

/* Activity */
.activity-item{display:flex;gap:8px;padding:6px 0;font-size:13px;color:var(--c-text2)}
.activity-dot{width:6px;height:6px;border-radius:50%;background:var(--c-border2);flex-shrink:0;margin-top:4px}
.activity-text{flex:1;line-height:1.5}
.activity-time{font-size:12px;color:var(--c-text3);white-space:nowrap}

/* Files */
.file-list{display:flex;flex-direction:column;gap:4px}
.file-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--c-border);border-radius:var(--radius);font-size:13px;color:var(--c-text);background:var(--c-surface);transition:background var(--tr)}
.file-item:hover{background:var(--c-surface2)}
.file-item-icon{width:28px;height:28px;border-radius:4px;background:var(--c-surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;font-weight:700;color:var(--c-text3);text-transform:uppercase}
.file-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item-size{font-size:11px;color:var(--c-text3);flex-shrink:0}
.file-item-dl{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--c-text3);border-radius:4px;transition:all var(--tr);flex-shrink:0;cursor:pointer}
.file-item-dl:hover{background:var(--c-surface2);color:var(--c-text)}
.file-uploading{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;color:var(--c-text3)}
/* Chat file attachment */
.comment-file{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--c-border);border-radius:var(--radius);font-size:12px;color:var(--c-text2);background:var(--c-surface2);margin-top:4px;text-decoration:none;max-width:220px;overflow:hidden}
.comment-file:hover{border-color:var(--c-border2);color:var(--c-text)}

/* Section titles */
.section-title{font-size:12px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--c-text3);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.section-add-btn{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--c-text3);background:none;border:none;cursor:pointer;font-family:var(--font);padding:2px 6px;border-radius:4px;transition:all var(--tr)}
.section-add-btn:hover{background:var(--c-surface2);color:var(--c-text2)}