/* When opened from index.html: overlay and visibility */
#sheetCommentsModal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
overflow-y: auto;
}
#sheetCommentsModal.show {
display: flex;
}
#sheetCommentsModal #sheetCommentsSheetView,
#sheetCommentsModal .task-detail-sheet-view {
height: 100vh;
}
/* Inline meta picker (status / assignee / priority / due date) when modal is on index – styled like priority-picker */
#taskDetailMetaPicker.task-detail-meta-picker {
display: none;
position: fixed;
z-index: 2100;
background: var(--white, #fff);
border: 1px solid var(--gray-200, #e5e7eb);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
padding: 8px 0;
max-height: 280px;
overflow-y: auto;
}
#taskDetailMetaPicker.task-detail-meta-picker.priority-picker {
min-width: 260px;
}
#taskDetailMetaPicker.task-detail-meta-picker.show {
display: block;
}
#taskDetailMetaPicker .priority-picker-inner {
display: flex;
flex-direction: column;
gap: 2px;
}
#taskDetailMetaPicker .priority-picker-row {
display: flex;
align-items: center;
gap: 6px;
padding: 0 10px;
}
#taskDetailMetaPicker .priority-picker-option {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
padding: 8px 10px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 8px;
font-size: 13px;
color: var(--gray-700, #374151);
text-transform: capitalize;
transition: background 0.2s ease, color 0.2s ease;
text-align: left;
min-width: 0;
}
#taskDetailMetaPicker .priority-picker-option:hover {
background: var(--gray-100, #f3f4f6);
color: var(--primary-color, #2563eb);
}
#taskDetailMetaPicker .priority-picker-option.active {
background: rgba(37, 99, 235, 0.12);
color: var(--primary-color, #2563eb);
}
#taskDetailMetaPicker .priority-picker-option span,
#taskDetailMetaPicker .priority-picker-option-content {
display: inline-flex;
align-items: center;
gap: 6px;
}
#taskDetailMetaPicker .priority-picker-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
#taskDetailMetaPicker .priority-color-input {
width: 36px;
height: 32px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
border-radius: 8px;
}
#taskDetailMetaPicker .priority-color-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
#taskDetailMetaPicker .priority-color-input:disabled {
cursor: not-allowed;
opacity: 0.4;
}
#taskDetailMetaPicker .priority-color-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
#taskDetailMetaPicker .priority-picker-divider {
height: 1px;
background: var(--gray-200, #e5e7eb);
margin: 6px 10px;
}
#taskDetailMetaPicker .priority-picker-remove {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
border: none;
border-radius: 8px;
background: transparent;
color: #ef4444;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
#taskDetailMetaPicker .priority-picker-remove:hover {
background: rgba(239, 68, 68, 0.12);
color: #b91c1c;
}
#taskDetailMetaPicker .priority-picker-add {
display: flex;
gap: 8px;
margin: 8px 10px 0;
}
#taskDetailMetaPicker .priority-picker-add input[type="text"] {
flex: 1;
padding: 8px 10px;
border: 1px solid var(--gray-300, #d1d5db);
border-radius: 8px;
font-size: 13px;
color: var(--gray-700, #374151);
}
#taskDetailMetaPicker .priority-picker-add input[type="color"] {
width: 36px;
height: 32px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
border-radius: 8px;
}
#taskDetailMetaPicker .priority-picker-add button {
padding: 8px 12px;
background: var(--primary-color, #2563eb);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
}
.task-detail-meta-picker-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.task-detail-meta-picker-option {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
border: none;
background: none;
text-align: left;
font-size: 14px;
color: var(--gray-800, #1f2937);
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.task-detail-meta-picker-option:hover {
background: var(--gray-100, #f3f4f6);
}
.task-detail-meta-picker-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: var(--gray-400, #9ca3af);
}
.task-detail-meta-picker-option-text {
overflow: hidden;
text-overflow: ellipsis;
}
.task-detail-meta-picker-section-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--gray-500, #6b7280);
padding: 8px 14px 6px;
text-transform: uppercase;
}
.task-detail-meta-picker-assignee .task-detail-meta-picker-list {
padding: 0 0 4px;
}
.task-detail-meta-picker-option-assignee {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 14px;
border: none;
background: none;
text-align: left;
font-size: 14px;
color: var(--gray-800, #1f2937);
cursor: pointer;
}
.task-detail-meta-picker-option-assignee:hover {
background: var(--gray-100, #f3f4f6);
color: var(--primary-color, #2563eb);
}
.task-detail-meta-picker-assignee-avatar {
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 50%;
background: var(--gray-200, #e5e7eb);
color: var(--gray-600, #4b5563);
font-weight: 600;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.task-detail-meta-picker-assignee-avatar-unassigned {
font-size: 12px;
}
.task-detail-meta-picker-assignee-avatar-unassigned i {
font-size: 12px;
}
.task-detail-meta-picker-assignee-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
overflow: hidden;
}
.task-detail-meta-picker-assignee-name {
font-size: 14px;
color: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-detail-meta-picker-assignee-email {
font-size: 11px;
color: var(--gray-500, #6b7280);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-detail-meta-picker-divider {
height: 1px;
background: var(--gray-200, #e5e7eb);
margin: 6px 14px;
}
.task-detail-meta-picker-option-priority {
display: flex;
align-items: center;
gap: 10px;
}
.task-detail-meta-picker-priority-remove-icon {
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 50%;
background: var(--gray-200, #e5e7eb);
color: var(--gray-600, #4b5563);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.task-detail-meta-picker-priority-remove-icon i {
font-size: 12px;
}
.task-detail-meta-picker-priority-row {
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
margin-bottom: 2px;
}
.task-detail-meta-picker-priority-row .task-detail-meta-picker-option-priority {
flex: 1;
min-width: 0;
margin: 0;
padding: 8px 0;
}
.task-detail-meta-picker-priority-trash {
width: 28px;
height: 28px;
min-width: 28px;
border: none;
background: none;
color: var(--gray-500, #6b7280);
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.task-detail-meta-picker-priority-trash:hover {
background: rgba(239, 68, 68, 0.1);
color: var(--red-600, #dc2626);
}
.task-detail-meta-picker-priority-trash i {
font-size: 12px;
}
.task-detail-meta-picker-priority-add {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
flex-wrap: wrap;
}
.task-detail-meta-picker-priority-input {
flex: 1;
min-width: 120px;
padding: 8px 10px;
border: 1px solid var(--gray-200, #e5e7eb);
border-radius: 8px;
font-size: 14px;
}
.task-detail-meta-picker-priority-color {
width: 32px;
height: 32px;
padding: 2px;
border: 1px solid var(--gray-200, #e5e7eb);
border-radius: 6px;
cursor: pointer;
}
.task-detail-meta-picker-priority-add-btn {
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
border: none;
background: var(--primary-color, #2563eb);
color: var(--white, #fff);
cursor: pointer;
}
.task-detail-meta-picker-priority-add-btn:hover {
filter: brightness(1.05);
}
.task-detail-meta-picker-due {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 240px;
}
.task-detail-meta-picker-due-header {
font-size: 13px;
font-weight: 600;
color: var(--gray-700, #374151);
}
.task-detail-meta-picker-date {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--gray-300, #d1d5db);
border-radius: 8px;
font-size: 13px;
color: var(--gray-700, #374151);
box-sizing: border-box;
}
.task-detail-meta-picker-date:focus {
outline: none;
border-color: var(--primary-color, #2563eb);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.task-detail-meta-picker-due-actions {
display: flex;
gap: 8px;
margin-top: 2px;
}
.task-detail-meta-picker-due-actions button {
flex: 1;
padding: 8px 10px;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: background 0.2s ease, color 0.2s ease;
}
.task-detail-meta-picker-due-actions .btn-primary {
background: var(--primary-color, #2563eb);
color: #fff;
}
.task-detail-meta-picker-due-actions .btn-primary:hover {
filter: brightness(1.05);
}
.task-detail-meta-picker-due-actions .btn-secondary {
background: var(--gray-100, #f3f4f6);
color: var(--gray-600, #4b5563);
}
.task-detail-meta-picker-due-actions .btn-secondary:hover {
background: var(--gray-200, #e5e7eb);
color: var(--gray-700, #374151);
}
#sheetCommentsModal .modal-dialog {
width: 98%;
}
#sheetCommentsModal .modal-content {
padding: 0;
border-radius: 24px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 90vh;
background: var(--white, #ffffff);
box-shadow: 0 32px 60px rgba(15, 23, 42, 0.18);
width: 100%;
max-width: none;
}
#sheetCommentsModal.fullscreen .modal-dialog {
width: 100% !important;
}
#sheetCommentsModal.fullscreen .modal-content {
height: 100vh !important;
max-height: 100vh !important;
}
#sheetCommentsModal .task-detail-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 10px 10px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
background: var(--white);
}
#sheetCommentsModal .fullscreen-toggle-btn {
width: 32px;
height: 32px;
border: none;
background: var(--gray-100, #f3f4f6);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-600, #4b5563);
transition: background-color 0.2s ease;
}
#sheetCommentsModal .fullscreen-toggle-btn:hover {
background: var(--gray-200, #e5e7eb);
}
#sheetCommentsModal .close-btn {
width: 32px;
height: 32px;
border: none;
background: var(--gray-100, #f3f4f6);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-600, #4b5563);
transition: background-color 0.2s ease;
}
#sheetCommentsModal .close-btn:hover {
background: var(--gray-200, #e5e7eb);
}
#sheetCommentsModal .task-detail-header-left {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
#sheetCommentsModal .task-detail-header-left.flex-arrow {
flex-direction: row !important;
display: flex !important;
align-items: center;
gap: 12px;
min-height: 40px;
flex-shrink: 0;
min-width: 0;
}
.flex-arrow{
flex-direction: row !important;
}
#sheetCommentsModal .task-detail-header-left {
display: flex;
align-items: flex-start;
gap: 12px;
}
#sheetCommentsModal #sheetCommentsBreadcrumb {
font-size: 13px;
color: var(--gray-500, #6b7280);
letter-spacing: 0.02em;
min-height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#sheetCommentsModal .task-detail-navigation {
display: flex;
align-items: center;
gap: 4px;
}
#sheetCommentsModal .task-nav-arrow {
background: transparent;
border: 1px solid var(--gray-300);
border-radius: 4px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--gray-600);
transition: all 0.2s ease;
padding: 0;
}
#sheetCommentsModal .task-nav-arrow:hover:not(:disabled) {
background: var(--gray-100);
border-color: var(--gray-400);
color: var(--gray-900);
}
#sheetCommentsModal .task-nav-arrow:disabled {
opacity: 0.4;
cursor: not-allowed;
}
#sheetCommentsModal .task-nav-arrow i {
font-size: 12px;
}
#sheetCommentsModal .task-detail-breadcrumb {
font-size: 13px;
color: var(--gray-500);
letter-spacing: 0.02em;
}
#sheetCommentsModal .task-detail-title-block {
display: flex;
flex-direction: column;
gap: 10px;
}
#sheetCommentsModal .task-detail-parent {
font-size: 13px;
color: var(--gray-500);
display: flex;
align-items: center;
gap: 6px;
}
#sheetCommentsModal .task-detail-title {
font-size: 26px;
font-weight: 600;
color: var(--gray-900);
line-height: 1.25;
}
#sheetCommentsModal .task-detail-meta-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 32px;
padding-bottom: 8px;
}
#sheetCommentsModal .task-detail-meta-item {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
#sheetCommentsModal .task-detail-meta-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.85);
}
#sheetCommentsModal .task-detail-meta-value {
font-size: 15px;
font-weight: 500;
color: var(--gray-700);
}
#sheetCommentsModal .task-detail-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
gap: 6px;
padding: 8px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
background: var(--gray-100);
color: var(--gray-700);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.24);
border: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#sheetCommentsModal .task-detail-body {
display: flex;
gap: 5px;
padding: 10px 10px;
flex: 1;
min-height: 0;
height: 100%;
overflow: hidden;
background: linear-gradient(180deg, rgba(248, 250, 252, 0.65) 0%, rgba(255, 255, 255, 0.95) 60%, rgba(255, 255, 255, 0.9) 100%);
position: relative;
}
#sheetCommentsModal .task-detail-left {
flex: 0 0 70%;
max-width: 70%;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
max-height: 100%;
overflow-y: auto;
padding-right: 12px;
gap: 20px;
position: relative;
}
#sheetCommentsModal .task-detail-left-saving-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: rgba(255, 255, 255, 0.92);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
pointer-events: none;
}
#sheetCommentsModal .task-detail-left-saving-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(15, 23, 42, 0.1);
border-top-color: var(--create-task-primary, #dc2626);
border-radius: 50%;
animation: task-detail-left-spin 0.8s linear infinite;
}
#sheetCommentsModal .task-detail-left-saving-overlay .task-detail-left-saving-text {
font-size: 14px;
font-weight: 500;
color: var(--create-task-gray-600, #4b5563);
}
@keyframes task-detail-left-spin {
to { transform: rotate(360deg); }
}
/* Loading state in left column (match www: centered spinner + "Loading task details...") */
#sheetCommentsModal .task-detail-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px 0;
color: var(--create-task-gray-600, #6b7280);
width: 100%;
min-height: 100%;
}
#sheetCommentsModal .task-detail-loading i {
color: var(--create-task-primary, #dc2626);
animation: task-detail-loading-spin 1s linear infinite;
}
@keyframes task-detail-loading-spin {
to { transform: rotate(360deg); }
}
#sheetCommentsModal .task-detail-top {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 24px;
}
#sheetCommentsModal .task-detail-badge.permission-locked,
#sheetCommentsModal .task-detail-chip.permission-locked {
cursor: not-allowed;
opacity: 0.85;
}
#sheetCommentsModal .task-detail-badge.interactive,
#sheetCommentsModal .task-detail-meta-value.interactive,
#sheetCommentsModal .task-detail-chip:not(.permission-locked) {
cursor: pointer;
}
#sheetCommentsModal .task-detail-badge.interactive:hover,
#sheetCommentsModal .task-detail-meta-value.interactive:hover,
#sheetCommentsModal .task-detail-chip:not(.permission-locked):hover {
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35), 0 6px 12px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
#sheetCommentsModal .task-detail-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.28);
background: rgba(255, 255, 255, 0.95);
font-size: 14px;
font-weight: 500;
color: var(--gray-700);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#sheetCommentsModal .task-detail-chip-readonly {
cursor: default;
pointer-events: none;
box-shadow: none;
border-color: rgba(148, 163, 184, 0.24);
}
#sheetCommentsModal .task-detail-chip-readonly:hover {
box-shadow: none;
transform: none;
}
#sheetCommentsModal .task-detail-chip .task-detail-chip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(148, 163, 184, 0.25);
color: var(--gray-600);
font-size: 11px;
}
#sheetCommentsModal .task-summary-card {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(226, 232, 240, 0.7);
border-radius: 18px;
padding: 22px 24px;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
display: flex;
flex-direction: column;
gap: 16px;
}
#sheetCommentsModal .task-summary-breadcrumb {
font-size: 13px;
color: var(--gray-500);
letter-spacing: 0.04em;
}
#sheetCommentsModal .task-summary-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
#sheetCommentsModal .task-summary-title-block {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 220px;
}
#sheetCommentsModal .task-summary-parent {
font-size: 13px;
color: var(--gray-500);
display: flex;
align-items: center;
gap: 6px;
}
#sheetCommentsModal .task-detail-parent-button {
background: none;
border: none;
color: var(--primary-color);
font-weight: 600;
cursor: pointer;
padding: 0;
}
#sheetCommentsModal .task-detail-parent-button:hover {
text-decoration: underline;
}
#sheetCommentsModal .task-summary-title {
font-size: 26px;
font-weight: 600;
color: var(--gray-900);
line-height: 1.3;
}
#sheetCommentsModal .task-summary-meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
#sheetCommentsModal .task-summary-meta-item {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 120px;
}
#sheetCommentsModal .task-summary-meta-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-500);
}
#sheetCommentsModal .task-summary-meta-value {
font-size: 14px;
color: var(--gray-800);
font-weight: 500;
word-break: break-word;
}
#sheetCommentsModal .task-summary-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
background: var(--gray-100);
color: var(--gray-700);
min-width: 72px;
text-align: center;
}
:is(#sheetCommentsModal) .task-detail-card {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(226, 232, 240, 0.7);
border-radius: 18px;
padding: 20px 22px;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
display: flex;
flex-direction: column;
gap: 14px;
}
:is(#sheetCommentsModal) .task-detail-card {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(226, 232, 240, 0.7);
border-radius: 18px;
padding: 20px 22px;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
display: flex;
flex-direction: column;
gap: 14px;
height:100%;
}
#sheetCommentsModal .task-detail-card h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--gray-800);
}
#sheetCommentsModal .task-detail-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#sheetCommentsModal .task-detail-toggle-btn {
border: none;
background: rgba(59, 130, 246, 0.12);
color: var(--primary-color);
padding: 6px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
#sheetCommentsModal .task-detail-toggle-btn:hover {
background: rgba(59, 130, 246, 0.2);
transform: translateY(-1px);
}
#sheetCommentsModal #taskDetailSubtaskCreateBtn,
#sheetCommentsModal .subtask-create-btn {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
height: 24px;
padding: 0 10px;
border-radius: 4px;
border: none;
background: transparent;
color: var(--gray-500, #6b7280);
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: color 0.2s ease;
margin-left: 2px;
}
#sheetCommentsModal #taskDetailSubtaskCreateBtn:hover,
#sheetCommentsModal .subtask-create-btn:hover {
color: var(--gray-700, #374151);
}
#sheetCommentsModal #taskDetailSubtaskCreateBtn:disabled,
#sheetCommentsModal .subtask-create-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
color: var(--gray-400, #9ca3af);
}
#sheetCommentsModal .task-detail-custom-grid {
display: grid;
gap: 16px;
max-height: 220px;
overflow: hidden;
transition: max-height 0.25s ease;
}
#sheetCommentsModal .task-detail-custom-grid.expanded {
max-height: none;
}
#sheetCommentsModal .task-detail-custom-item {
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 14px;
padding: 14px 16px;
background: rgba(248, 250, 252, 0.8);
display: flex;
flex-direction: column;
gap: 6px;
}
#sheetCommentsModal .task-detail-custom-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500);
}
#sheetCommentsModal .task-detail-custom-value {
font-size: 14px;
color: var(--gray-800);
font-weight: 500;
word-break: break-word;
line-height: 1.5;
}
#sheetCommentsModal .task-detail-custom-value-editable {
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.2s ease;
position: relative;
}
#sheetCommentsModal .task-detail-custom-value-editable:hover {
background: rgba(59, 130, 246, 0.08);
}
#sheetCommentsModal .task-detail-custom-value-editable.editing {
padding: 0;
background: transparent;
}
#sheetCommentsModal .task-detail-custom-edit-input {
width: 100%;
padding: 6px 10px;
border: 1px solid var(--gray-300);
border-radius: 6px;
font-size: 14px;
font-family: inherit;
color: var(--gray-800);
background: white;
transition: border-color 0.2s ease;
}
#sheetCommentsModal .task-detail-custom-edit-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(237, 32, 71, 0.1);
}
#sheetCommentsModal .task-detail-custom-edit-textarea {
min-height: 60px;
resize: vertical;
}
#sheetCommentsModal .task-detail-custom-edit-buttons {
display: flex;
gap: 6px;
margin-top: 8px;
align-items: center;
}
#sheetCommentsModal .task-detail-custom-edit-save,
#sheetCommentsModal .task-detail-custom-edit-cancel {
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: all 0.2s ease;
}
#sheetCommentsModal .task-detail-custom-edit-save {
background: var(--primary-color);
color: white;
}
#sheetCommentsModal .task-detail-custom-edit-save:hover {
background: #c91a3d;
}
#sheetCommentsModal .task-detail-custom-edit-cancel {
background: var(--gray-200);
color: var(--gray-600);
}
#sheetCommentsModal .task-detail-custom-edit-cancel:hover {
background: var(--gray-300);
}
/* Custom fields edit container – match Create Task / Edit Task modal exactly */
#sheetCommentsModal #taskDetailCustomFieldsEditContainer {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 12px;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-fields-empty {
font-size: 13px;
color: var(--create-task-gray-500, #6b7280);
background: rgba(15, 23, 42, 0.04);
border-radius: 10px;
padding: 14px 16px;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .task-detail-edit-section-header,
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .modal-section-header {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 14px;
align-items: flex-start;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .modal-section-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--create-task-gray-500, #6b7280);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .modal-section-helper {
font-size: 12px;
color: var(--create-task-gray-400, #9ca3af);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .form-group {
margin-bottom: 0;
display: flex;
flex-direction: column;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .form-label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--create-task-gray-700, #374151);
margin-bottom: 6px;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .form-input,
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .form-textarea,
#sheetCommentsModal #taskDetailCustomFieldsEditContainer select.form-input {
width: 100%;
padding: 12px;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.92);
font-size: 14px;
box-sizing: border-box;
transition: var(--create-task-transition, all 0.2s ease);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .form-input:focus,
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .form-textarea:focus,
#sheetCommentsModal #taskDetailCustomFieldsEditContainer select.form-input:focus {
outline: none;
border-color: rgba(237, 32, 71, 0.35);
box-shadow: 0 0 0 4px var(--create-task-primary-soft, rgba(237, 32, 71, 0.12));
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .form-textarea {
min-height: 150px;
resize: vertical;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer select.form-input {
cursor: pointer;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-multiselect {
min-height: 120px;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-helper {
font-size: 12px;
color: var(--create-task-gray-500, #6b7280);
margin-top: 4px;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .form-input.readonly {
background: rgba(148, 163, 184, 0.12);
color: var(--create-task-gray-600, #4b5563);
cursor: not-allowed;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-dropzone {
border: 1px dashed var(--create-task-gray-300, #d1d5db);
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--create-task-gray-50, #f9fafb);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-dropzone.dragover {
border-color: var(--create-task-primary, #ed2047);
background: rgba(237, 32, 71, 0.05);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-dropzone button {
padding: 6px 14px;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-dropzone-hint {
font-size: 12px;
color: var(--create-task-gray-500, #6b7280);
text-align: center;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-list {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--create-task-gray-200, #e5e7eb);
border-radius: 6px;
background: #fff;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-item.pending-upload,
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-item.pending-removal {
border-style: dashed;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-item.pending-upload {
border-color: var(--create-task-primary, #ed2047);
background: rgba(237, 32, 71, 0.05);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-item.pending-removal {
opacity: 0.6;
border-color: rgba(237, 32, 71, 0.4);
background: rgba(237, 32, 71, 0.08);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-preview-wrapper {
flex: 0 0 auto;
max-width: 260px;
width: 100%;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-preview {
width: 100%;
max-height: 200px;
border-radius: 6px;
background: #000;
object-fit: contain;
display: block;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-preview.audio {
max-height: none;
background: transparent;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-meta {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-name {
font-weight: 600;
color: var(--create-task-gray-800, #1f2937);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-info {
font-size: 12px;
color: var(--create-task-gray-500, #6b7280);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-actions {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
flex-wrap: wrap;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-empty {
font-size: 13px;
color: var(--create-task-gray-500, #6b7280);
border: 1px dashed var(--create-task-gray-200, #e5e7eb);
border-radius: 6px;
padding: 10px 12px;
text-align: center;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-url-list {
display: flex;
flex-direction: column;
gap: 10px;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-url-input-row {
display: flex;
align-items: center;
gap: 8px;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-url-input-row input[type="url"],
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-url-input-row input.form-input {
flex: 1;
min-width: 0;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-secondary-btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--create-task-gray-300, #d1d5db);
border-radius: 6px;
color: var(--create-task-gray-600, #4b5563);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-secondary-btn:hover {
background: var(--create-task-gray-100, #f3f4f6);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-link-btn {
background: none;
border: none;
color: var(--create-task-primary, #ed2047);
cursor: pointer;
font-size: 13px;
padding: 0;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-link-btn:hover {
text-decoration: underline;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-link-btn.danger {
color: #ef4444;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-link-btn.undo {
color: var(--create-task-primary, #ed2047);
font-weight: 600;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-item-removed {
background: rgba(107, 114, 128, 0.1);
border-color: rgba(107, 114, 128, 0.3);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-item-removed-dull {
opacity: 0.55;
filter: grayscale(0.7);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-item-removed .custom-field-file-name.custom-field-file-item-removed-dull,
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-file-item-removed .custom-field-file-info {
color: var(--create-task-gray-500, #6b7280);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper {
border: 1px solid var(--create-task-gray-300, #d1d5db);
border-radius: 6px;
background: #fff;
overflow: hidden;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-container {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
min-height: 200px;
max-height: 500px;
overflow-y: auto;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-editor {
min-height: 200px;
padding: 12px 15px;
color: var(--create-task-gray-800, #1f2937);
line-height: 1.6;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-editor.ql-blank::before {
color: var(--create-task-gray-400, #9ca3af);
font-style: normal;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-toolbar {
border-bottom: 1px solid var(--create-task-gray-200, #e5e7eb);
background: var(--create-task-gray-50, #f9fafb);
padding: 8px;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-toolbar .ql-stroke {
stroke: var(--create-task-gray-600, #4b5563);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-toolbar .ql-fill {
fill: var(--create-task-gray-600, #4b5563);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-toolbar button:hover,
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-toolbar button.ql-active {
color: var(--create-task-primary, #ed2047);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-toolbar button:hover .ql-stroke,
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-toolbar button.ql-active .ql-stroke {
stroke: var(--create-task-primary, #ed2047);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-toolbar button:hover .ql-fill,
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-toolbar button.ql-active .ql-fill {
fill: var(--create-task-primary, #ed2047);
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-editor img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 8px 0;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-editor a {
color: var(--create-task-primary, #ed2047);
text-decoration: underline;
}
#sheetCommentsModal #taskDetailCustomFieldsEditContainer .custom-field-rich-text-wrapper .ql-editor a:hover {
text-decoration: none;
}
/* Edit actions – same as Edit Task modal */
#sheetCommentsModal #taskDetailCustomFieldsEditActions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
justify-content: flex-end;
align-items: center;
}
#sheetCommentsModal #taskDetailCustomFieldsEditActions .btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#sheetCommentsModal #taskDetailCustomFieldsEditActions .btn-secondary {
background: var(--create-task-gray-200, #e5e7eb);
color: var(--create-task-gray-700, #374151);
}
#sheetCommentsModal #taskDetailCustomFieldsEditActions .btn-primary {
background: linear-gradient(135deg, #ed2047, #f26225);
color: white;
}
#sheetCommentsModal #taskDetailCustomFieldsEditActions .btn:hover {
transform: translateY(-1px);
}
#sheetCommentsModal .task-detail-rich-text-content {
font-size: 14px;
color: var(--gray-800);
line-height: 1.6;
word-break: break-word;
}
#sheetCommentsModal .task-detail-rich-text-content :is(p, div) {
margin: 0 0 8px 0;
}
#sheetCommentsModal .task-detail-rich-text-content :is(p, div):last-child {
margin-bottom: 0;
}
#sheetCommentsModal .task-detail-rich-text-content img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 8px 0;
}
#sheetCommentsModal .task-detail-rich-text-content a {
color: var(--primary-color);
text-decoration: underline;
}
#sheetCommentsModal .task-detail-rich-text-content a:hover {
text-decoration: none;
}
#sheetCommentsModal .task-detail-rich-text-content :is(h1, h2, h3, h4, h5, h6) {
margin: 12px 0 8px 0;
font-weight: 600;
color: var(--gray-900);
}
#sheetCommentsModal .task-detail-rich-text-content ul,
#sheetCommentsModal .task-detail-rich-text-content ol {
margin: 8px 0;
padding-left: 24px;
}
#sheetCommentsModal .task-detail-rich-text-content blockquote {
border-left: 3px solid var(--gray-300);
padding-left: 12px;
margin: 8px 0;
color: var(--gray-600);
font-style: italic;
}
#sheetCommentsModal .task-detail-rich-text-content code {
background: var(--gray-100);
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 13px;
}
#sheetCommentsModal .task-detail-rich-text-content pre {
background: var(--gray-100);
padding: 12px;
border-radius: 4px;
overflow-x: auto;
margin: 8px 0;
}
#sheetCommentsModal .task-detail-custom-numbered {
display: flex;
gap: 6px;
align-items: baseline;
line-height: 1.4;
}
#sheetCommentsModal .task-detail-custom-number {
font-weight: 600;
color: var(--gray-600);
}
#sheetCommentsModal .task-detail-attachment-list {
display: flex;
flex-direction: column;
gap: 12px;
}
#sheetCommentsModal .task-detail-attachment-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 14px;
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 12px;
background: rgba(248, 250, 252, 0.7);
font-size: 14px;
}
#sheetCommentsModal .task-detail-attachment-item a {
color: var(--primary-color);
font-weight: 600;
}
#sheetCommentsModal .task-detail-subtasks-table-wrapper {
overflow-x: auto;
border-radius: 12px;
}
#sheetCommentsModal .task-detail-subtasks-table {
width: 100%;
border-collapse: collapse;
min-width: 520px;
}
#sheetCommentsModal .task-detail-subtasks-table th,
#sheetCommentsModal .task-detail-subtasks-table td {
padding: 12px 14px;
text-align: left;
font-size: 13px;
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
color: var(--gray-700);
}
#sheetCommentsModal .task-detail-subtasks-table th {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-500);
}
#sheetCommentsModal .task-detail-subtasks-table tbody tr {
cursor: pointer;
transition: background 0.15s ease;
}
#sheetCommentsModal .task-detail-subtasks-table tbody tr:hover {
background: rgba(59, 130, 246, 0.08);
}
#sheetCommentsModal .task-detail-subtasks-table tbody tr.active {
background: rgba(59, 130, 246, 0.12);
}
.subtask-link {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
color: var(--primary-color);
cursor: pointer;
}
.subtask-link:hover {
text-decoration: underline;
}
#sheetCommentsModal .subtask-link {
background: none;
border: none;
padding: 0;
margin: 0;
color: var(--primary-color);
font-weight: 600;
cursor: pointer;
font-size: 14px;
text-align: left;
}
#sheetCommentsModal .subtask-link:hover {
text-decoration: underline;
}
#sheetCommentsModal .task-detail-text {
font-size: 14px;
line-height: 1.6;
color: var(--gray-700);
display: inline-block;
max-width: 100%;
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
#sheetCommentsModal .task-detail-text.muted {
color: var(--gray-500);
font-style: italic;
}
#sheetCommentsModal .task-detail-empty-state {
padding: 28px;
text-align: center;
color: var(--gray-500);
font-size: 14px;
border: 1px dashed var(--gray-200);
border-radius: 14px;
background: rgba(248, 250, 252, 0.6);
}
#sheetCommentsModal .task-detail-right {
flex: 0 0 30%;
max-width: 30%;
display: flex;
flex-direction: column;
border-left: 1px solid var(--gray-200);
padding-left: 28px;
min-height: 0;
}
#sheetCommentsModal .task-detail-scroll-to-bottom-btn {
position: absolute;
right: 32px;
bottom: 100px;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--primary-color, #ed2047);
color: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#sheetCommentsModal .task-detail-scroll-to-bottom-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
#sheetCommentsModal .task-detail-scroll-to-bottom-btn i {
font-size: 14px;
}
#sheetCommentsModal .task-detail-scroll-to-bottom-btn .sheet-comments-new-count {
display: none;
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: #fff;
color: var(--primary-color, #ed2047);
font-size: 11px;
font-weight: 700;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
#sheetCommentsModal .task-activity-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 5px;
}
#sheetCommentsModal .task-activity-header h3 {
font-size: 16px;
font-weight: 600;
margin: 0;
color: var(--gray-800);
}
#sheetCommentsModal .task-activity-list {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overflow-anchor: auto;
scroll-padding-bottom: 12px;
transition: opacity 0.12s ease-out;
}
#sheetCommentsModal .task-activity-date-separator {
text-align: center;
margin: 20px 0;
position: relative;
}
#sheetCommentsModal .task-activity-date-separator::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: var(--gray-200);
}
#sheetCommentsModal .task-activity-date-separator span {
background: #fff;
padding: 4px 12px;
color: var(--gray-500);
font-size: 12px;
font-weight: 500;
position: relative;
z-index: 1;
}
#sheetCommentsModal .task-activity-item {
display: flex;
gap: 12px;
font-size: 13px;
color: var(--gray-700);
margin-bottom: 8px;
}
#sheetCommentsModal .task-activity-item.self-comment {
flex-direction: row-reverse;
justify-content: flex-end;
margin-left: auto;
width: 100%;
}
#sheetCommentsModal .task-activity-item.self-comment .task-activity-avatar {
display: none;
}
#sheetCommentsModal .task-activity-item .task-activity-content {
position: relative;
}
#sheetCommentsModal .task-activity-item.self-comment .task-activity-content {
align-items: flex-end;
width: 100%;
max-width: 72%;
margin-left: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
#sheetCommentsModal .task-activity-item.self-comment .task-activity-meta {
display: none;
}
#sheetCommentsModal .task-activity-item.self-comment .task-detail-text {
align-self: flex-end;
background: #ed204714;
color: #000;
padding: 8px 12px;
border-radius: 12px;
border-top-right-radius: 4px;
text-align: left;
max-width: 100%;
min-height: 32px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
#sheetCommentsModal .task-activity-item:not(.self-comment) .task-activity-content {
max-width: 70%;
}
#sheetCommentsModal .task-activity-item:not(.self-comment) .task-detail-text {
background: var(--gray-100);
color: var(--gray-800);
padding: 8px 12px;
border-radius: 12px;
border-top-left-radius: 4px;
}
#sheetCommentsModal .task-activity-item.self-comment .task-activity-time {
font-size: 11px;
color: var(--gray-500);
margin-top: 4px;
text-align: right;
}
#sheetCommentsModal .task-activity-item:not(.self-comment) .task-activity-time {
font-size: 11px;
color: var(--gray-500);
margin-top: 4px;
}
/* Activity / project log entries — premium neutral pill */
#sheetCommentsModal .task-activity-item.task-activity-project-log {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 100%;
margin-bottom: 14px;
flex-wrap: wrap;
}
#sheetCommentsModal .task-activity-item.task-activity-project-log .task-activity-avatar,
#sheetCommentsModal .task-activity-item.task-activity-project-log .task-activity-content {
display: none !important;
}
#sheetCommentsModal .task-activity-project-log-wrap {
display: flex;
flex-direction: column;
align-items: center;
max-width: min(520px, 94%);
width: 100%;
text-align: center;
}
#sheetCommentsModal .task-activity-project-log-chip {
display: inline-block;
width: auto;
max-width: 100%;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 12px;
padding: 2px 10px;
background: linear-gradient(165deg, #ffffff 0%, #f4f6f9 45%, #eef1f6 100%);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.7) inset,
0 1px 2px rgba(15, 23, 42, 0.04),
0 8px 24px -6px rgba(15, 23, 42, 0.1);
}
#sheetCommentsModal .task-activity-project-log-line {
font-size: 11px;
line-height: 1.5;
color: #475569;
text-align: center;
display: block;
letter-spacing: -0.01em;
}
#sheetCommentsModal .task-activity-project-log-line strong {
color: #0f172a;
font-weight: 600;
}
#sheetCommentsModal .task-activity-time.task-activity-project-log-time {
margin-top: 8px;
font-size: 11px;
color: #94a3b8;
text-align: center;
font-variant-numeric: tabular-nums;
}
#sheetCommentsModal .task-activity-project-log-group {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 14px;
}
#sheetCommentsModal .task-activity-project-log-more {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#sheetCommentsModal .task-activity-project-log-more[hidden] {
display: none !important;
}
#sheetCommentsModal .task-activity-project-log-toggle {
margin-top: 8px;
padding: 4px 12px;
border: none;
background: transparent;
color: #64748b;
font-size: 12px;
font-weight: 500;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
#sheetCommentsModal .task-activity-project-log-toggle:hover {
color: #0f172a;
}
/* Comment list: attachment previews (WhatsApp-style) */
#sheetCommentsModal .task-comment-body {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 100%;
width: 100%;
}
#sheetCommentsModal .task-comment-body .task-detail-text {
-webkit-user-select: text;
user-select: text;
-webkit-touch-callout: default;
cursor: text;
}
#sheetCommentsModal .task-comment-body .task-comment-attachment-card,
#sheetCommentsModal .task-comment-body .task-comment-attachment-card a,
#sheetCommentsModal .task-comment-body button,
#sheetCommentsModal .task-comment-body .task-comment-reply-context,
#sheetCommentsModal .task-comment-body .task-comment-reaction-pill {
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
#sheetCommentsModal .task-comment-body .task-detail-text a {
-webkit-user-select: text;
user-select: text;
-webkit-touch-callout: default;
cursor: text;
}
#sheetCommentsModal .task-activity-item.self-comment .task-comment-body {
align-items: flex-end;
}
#sheetCommentsModal .task-activity-item.self-comment .task-comment-body > .task-detail-text {
align-self: flex-end;
}
#sheetCommentsModal .task-activity-item:not(.self-comment) .task-comment-body {
align-items: flex-start;
}
#sheetCommentsModal .task-comment-attachments {
display: flex;
flex-direction: column;
gap: 8px;
}
#sheetCommentsModal .task-comment-attachment-card {
border-radius: 12px;
overflow: hidden;
background: var(--gray-100);
border: 1px solid rgba(15, 23, 42, 0.06);
max-width: 280px;
position: relative;
}
#sheetCommentsModal .task-activity-item.self-comment .task-comment-attachment-card {
background: #ed204714;
border-color: rgba(255, 255, 255, 0.24);
}
#sheetCommentsModal .task-comment-attachment-card a {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 12px;
text-decoration: none;
color: inherit;
flex-direction: column;
}
#sheetCommentsModal .task-comment-attachment-card.image a {
flex-direction: column;
align-items: stretch;
padding: 0;
}
#sheetCommentsModal .task-comment-attachment-card .task-comment-attachment-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: rgba(255, 90, 31, 0.12);
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
#sheetCommentsModal .task-comment-attachment-card .task-comment-attachment-thumb {
width: 100%;
max-height: 220px;
overflow: hidden;
}
#sheetCommentsModal .task-comment-attachment-card .task-comment-attachment-thumb img,
#sheetCommentsModal .task-comment-attachment-card .task-comment-attachment-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#sheetCommentsModal .task-comment-attachment-card .task-comment-attachment-info {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
}
#sheetCommentsModal .task-comment-attachment-card .task-comment-attachment-info .name {
font-size: 13px;
font-weight: 600;
color: var(--gray-800);
line-height: 1.3;
word-break: break-word;
}
#sheetCommentsModal .task-comment-attachment-card .task-comment-attachment-info .size,
#sheetCommentsModal .task-comment-attachment-card .task-comment-attachment-info .hint {
font-size: 12px;
color: var(--gray-500);
}
#sheetCommentsModal .task-comment-attachment-card[data-attachment-ready="0"] .task-comment-attachment-thumb {
position: relative;
min-height: 120px;
background: var(--gray-100);
display: flex;
align-items: center;
justify-content: center;
}
#sheetCommentsModal .task-comment-attachment-card[data-attachment-ready="0"] .task-comment-attachment-loader {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
width: 100%;
font-size: 12px;
color: var(--gray-500);
}
#sheetCommentsModal .task-comment-attachment-card[data-attachment-ready="0"] .task-comment-attachment-loader::before {
content: '';
width: 32px;
height: 32px;
border-radius: 50%;
border: 3px solid rgba(255, 90, 31, 0.2);
border-top-color: var(--primary-color);
animation: task-detail-comment-spinner 0.8s linear infinite;
display: block;
}
#sheetCommentsModal .task-activity-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--primary-light, rgba(255, 90, 31, 0.15));
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
text-transform: uppercase;
flex-shrink: 0;
}
#sheetCommentsModal .task-activity-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
#sheetCommentsModal .task-activity-meta {
font-size: 12px;
color: var(--gray-500);
width: fit-content;
position: relative;
}
#sheetCommentsModal .task-comment-form {
display: flex;
align-items: center;
gap: 12px;
border-top: 1px solid var(--gray-200);
padding-top: 16px;
}
#sheetCommentsModal .task-comment-input-wrapper {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
background: rgba(241, 245, 249, 0.9);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 20px;
padding: 8px 14px;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
overflow: visible;
}
#sheetCommentsModal .task-comment-attach-btn {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--gray-500, #6b7280);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: background 0.2s ease, color 0.2s ease;
cursor: pointer;
}
#sheetCommentsModal .task-comment-attach-btn:hover,
#sheetCommentsModal .task-comment-attach-btn:focus-visible {
background: rgba(237, 32, 71, 0.12);
color: var(--primary-color, #ed2047);
}
#sheetCommentsModal .task-comment-send-btn {
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, var(--primary-color, #ed2047), var(--primary-dark, #f26225));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 12px 24px rgba(237, 32, 71, 0.28);
transition: transform 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
}
#sheetCommentsModal .task-comment-send-btn:hover,
#sheetCommentsModal .task-comment-send-btn:focus-visible {
transform: translateY(-1px);
box-shadow: 0 16px 26px rgba(237, 32, 71, 0.32);
}
#sheetCommentsModal .task-comment-input-inner {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
overflow: auto;
}
#sheetCommentsModal .task-comment-mention-dropdown {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
right: 0;
display: none;
background: #fff;
border: 1px solid var(--gray-300);
border-radius: 14px;
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.16);
max-height: 260px;
overflow-y: auto;
margin-top: 0;
z-index: 6;
}
#sheetCommentsModal .task-comment-mention-dropdown.visible {
display: block;
}
#sheetCommentsModal .task-comment-input-inner:has(.task-comment-mention-dropdown.visible) {
overflow: visible;
}
#sheetCommentsModal .task-comment-mention-no-results {
padding: 12px 16px;
font-size: 13px;
color: var(--gray-500);
}
#sheetCommentsModal .task-comment-mention-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
#sheetCommentsModal .task-comment-mention-item:hover,
#sheetCommentsModal .task-comment-mention-item.active {
background: rgba(255, 90, 31, 0.08);
}
#sheetCommentsModal .task-comment-mention-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 90, 31, 0.12);
color: var(--primary-color);
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
flex-shrink: 0;
}
#sheetCommentsModal .task-comment-mention-content {
display: flex;
flex-direction: column;
max-width: 100%;
}
#sheetCommentsModal .task-comment-mention-name {
font-size: 13px;
font-weight: 600;
color: var(--gray-800);
line-height: 1.3;
}
#sheetCommentsModal .task-comment-mention-meta {
font-size: 12px;
color: var(--gray-500);
}
#sheetCommentsModal .task-comment-mention-tag {
display: inline;
background: rgba(37, 211, 102, 0.18);
color: #075e54;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
vertical-align: baseline;
border-radius: 3px;
padding: 0;
}
#sheetCommentsModal .task-comment-composer-context {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: rgba(37, 99, 235, 0.08);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 12px;
padding: 8px 12px;
margin-bottom: 6px;
max-height: 80px;
overflow: hidden;
}
#sheetCommentsModal .task-comment-composer-context[hidden] {
display: none !important;
}
#sheetCommentsModal .task-comment-composer-context-content {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
color: var(--gray-700);
min-width: 0;
flex: 1;
}
#sheetCommentsModal .task-comment-composer-context-title {
font-weight: 600;
color: var(--gray-900);
display: flex;
align-items: center;
gap: 6px;
}
#sheetCommentsModal .task-comment-composer-context-snippet {
color: var(--gray-600);
font-size: 12px;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
#sheetCommentsModal .task-comment-composer-context-clear {
border: none;
background: rgba(15, 23, 42, 0.06);
color: var(--gray-600);
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
#sheetCommentsModal .task-comment-composer-context-clear:hover,
#sheetCommentsModal .task-comment-composer-context-clear:focus-visible {
background: rgba(255, 90, 31, 0.15);
color: var(--primary-color);
}
#sheetCommentsModal .task-comment-attachment-preview {
display: none;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
}
#sheetCommentsModal .task-comment-attachment-chip {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--gray-200);
background: var(--gray-50);
border-radius: 12px;
padding: 8px 12px;
position: relative;
max-width: 220px;
}
/* Upload placeholder in comments list (Sending… row) */
#sheetCommentsModal .task-comment-upload-placeholder {
margin-bottom: 8px;
}
#sheetCommentsModal .task-comment-upload-placeholder .task-comment-upload-progress-row {
margin-bottom: 8px;
}
#sheetCommentsModal .task-comment-upload-placeholder .task-comment-upload-progress-row .task-comment-attachment-upload-indicator {
position: static;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
background: transparent;
padding: 0;
}
#sheetCommentsModal .task-comment-upload-placeholder .task-comment-attachments.uploading {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
#sheetCommentsModal .task-comment-upload-placeholder .task-comment-attachment-chip.uploading {
pointer-events: none;
}
#sheetCommentsModal .task-comment-upload-placeholder .task-comment-attachment-chip.uploading .task-comment-attachment-remove {
display: none;
}
#sheetCommentsModal .task-comment-attachment-chip.uploading .task-comment-attachment-remove {
pointer-events: none;
opacity: 0.35;
}
#sheetCommentsModal .task-comment-attachment-upload-indicator {
position: absolute;
inset: 0;
border-radius: 12px;
background: rgba(255, 255, 255, 0.92);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
pointer-events: none;
}
#sheetCommentsModal .task-comment-attachment-upload-indicator .progress-circle {
width: 38px;
height: 38px;
border-radius: 50%;
background: conic-gradient(var(--primary-color) var(--progress-angle, 0deg), rgba(15, 23, 42, 0.12) 0deg);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: background 0.15s ease;
}
#sheetCommentsModal .task-comment-attachment-upload-indicator .progress-circle::after {
content: '';
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
}
#sheetCommentsModal .task-comment-attachment-upload-indicator .progress-circle span {
position: relative;
z-index: 1;
font-size: 11px;
font-weight: 600;
color: var(--gray-800);
}
#sheetCommentsModal .task-comment-attachment-upload-indicator small {
font-size: 11px;
color: var(--gray-600);
font-weight: 500;
}
#sheetCommentsModal .task-comment-attachment-upload-indicator[data-indeterminate="1"] .progress-circle {
background: conic-gradient(var(--primary-color) 90deg, rgba(15, 23, 42, 0.08) 0deg);
animation: task-detail-comment-spinner 0.9s linear infinite;
}
@keyframes task-detail-comment-spinner {
to { transform: rotate(360deg); }
}
/* Optimistic upload: ensure progress card has size so progress circle is visible */
#sheetCommentsModal .task-comment-attachments-optimistic-upload {
max-width: 280px;
}
#sheetCommentsModal .task-comment-attachment-card-uploading {
position: relative;
min-height: 100px;
min-width: 200px;
border-radius: 12px;
overflow: hidden;
background: var(--gray-100);
border: 1px solid rgba(15, 23, 42, 0.06);
}
#sheetCommentsModal .task-comment-attachment-card-uploading .task-comment-attachment-upload-indicator {
position: absolute;
inset: 0;
z-index: 2;
}
#sheetCommentsModal .task-comment-attachment-chip .task-comment-attachment-thumb,
#sheetCommentsModal .task-comment-attachment-chip .task-comment-attachment-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
#sheetCommentsModal .task-comment-attachment-chip .task-comment-attachment-thumb {
background: var(--gray-200);
}
#sheetCommentsModal .task-comment-attachment-chip .task-comment-attachment-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
#sheetCommentsModal .task-comment-attachment-chip .task-comment-attachment-icon {
background: rgba(255, 90, 31, 0.12);
color: var(--primary-color);
font-size: 16px;
}
#sheetCommentsModal .task-comment-attachment-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
#sheetCommentsModal .task-comment-attachment-meta .name {
font-size: 13px;
font-weight: 500;
color: var(--gray-700);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#sheetCommentsModal .task-comment-attachment-meta .size {
font-size: 12px;
color: var(--gray-500);
}
#sheetCommentsModal .task-comment-attachment-remove {
position: absolute;
top: 4px;
right: 4px;
border: none;
background: rgba(0, 0, 0, 0.06);
color: var(--gray-500);
cursor: pointer;
padding: 4px;
border-radius: 6px;
line-height: 1;
transition: color 0.2s ease, background 0.2s ease;
}
#sheetCommentsModal .task-comment-attachment-remove:hover {
background: rgba(0, 0, 0, 0.1);
color: var(--gray-700);
}
#sheetCommentsModal .task-comment-form textarea {
width: 100%;
resize: none;
min-height: 40px;
max-height: 160px;
padding: 6px 0;
border: none;
font-size: 14px;
font-family: inherit;
color: transparent;
-webkit-text-fill-color: transparent;
background: transparent;
line-height: 1.5;
position: relative;
z-index: 2;
caret-color: var(--gray-900);
}
#sheetCommentsModal .task-comment-form textarea:focus,
#sheetCommentsModal .task-comment-form textarea:focus-visible {
outline: none;
box-shadow: none;
border: none;
}
#sheetCommentsModal .task-comment-form textarea::placeholder {
color: transparent;
}
#sheetCommentsModal .task-comment-input-field {
position: relative;
flex: 1;
overflow: hidden;
}
#sheetCommentsModal .task-comment-input-field::-webkit-scrollbar {
width: 0;
height: 0;
}
#sheetCommentsModal .task-comment-input-field::-webkit-scrollbar-thumb {
background: transparent;
}
#sheetCommentsModal .task-comment-input-field::-webkit-scrollbar-track {
background: transparent;
}
#sheetCommentsModal .task-comment-form textarea {
width: 100%;
resize: none;
min-height: 40px;
max-height: 160px;
padding: 6px 0;
border: none;
font-size: 14px;
font-family: inherit;
color: transparent;
-webkit-text-fill-color: transparent;
background: transparent;
line-height: 1.5;
position: relative;
z-index: 2;
caret-color: var(--gray-900);
overflow: hidden;
scrollbar-width: none;
}
#sheetCommentsModal .task-comment-form textarea:focus,
#sheetCommentsModal .task-comment-form textarea:focus-visible {
outline: none;
box-shadow: none;
border: none;
}
#sheetCommentsModal .task-comment-form textarea::-webkit-scrollbar {
width: 0;
height: 0;
}
#sheetCommentsModal .task-comment-input-editable {
width: 100%;
min-height: 40px;
max-height: 160px;
padding: 6px 0;
border: none;
font-size: 14px;
font-family: inherit;
line-height: 1.5;
color: var(--gray-900, #111);
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
overflow-y: auto;
outline: none;
box-sizing: border-box;
}
#sheetCommentsModal .task-comment-input-editable:focus {
outline: none;
box-shadow: none;
}
#sheetCommentsModal .task-comment-input-editable.task-comment-input-empty:not(:focus)::before {
content: attr(data-placeholder);
color: var(--gray-400, #9ca3af);
}
#sheetCommentsModal .task-comment-input-editable .task-comment-mention-tag {
display: inline;
background: rgba(37, 211, 102, 0.18);
color: #075e54;
padding: 0 2px;
border-radius: 3px;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
}
#sheetCommentsModal .task-comment-input-mirror {
position: absolute;
inset: 0;
padding: 6px 0;
pointer-events: none;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
font: inherit;
font-size: 14px;
line-height: 1.5;
color: var(--gray-900);
z-index: 1;
}
#sheetCommentsModal .task-comment-hover-actions {
position: absolute;
top: -10px;
right: -35px;
display: flex;
gap: 6px;
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
z-index: 10;
}
#sheetCommentsModal .task-activity-item.self-comment .task-comment-hover-actions {
right: -10px;
}
#sheetCommentsModal .task-activity-item:not(.self-comment) .task-comment-hover-actions {
right: -35px;
}
#sheetCommentsModal .task-activity-item:hover .task-comment-hover-actions,
#sheetCommentsModal .task-activity-item:focus-within .task-comment-hover-actions {
opacity: 1;
pointer-events: auto;
}
/* Mobile / touch: always show reply (no hover on touch devices) */
@media (max-width: 768px), (hover: none) {
#sheetCommentsModal .task-comment-hover-actions {
opacity: 1 !important;
pointer-events: auto !important;
}
}
#sheetCommentsModal .task-comment-reply-btn {
border: none;
background: rgba(15, 23, 42, 0.06);
color: var(--gray-600);
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
#sheetCommentsModal .task-comment-reply-btn:hover,
#sheetCommentsModal .task-comment-reply-btn:focus-visible {
background: rgba(255, 90, 31, 0.18);
color: var(--primary-color);
}
#sheetCommentsModal .task-comment-reply-context {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
border: none;
background: rgba(15, 23, 42, 0.06);
border-left: 3px solid var(--primary-color);
border-radius: 10px;
padding: 8px 10px;
margin-bottom: 8px;
font-size: 12px;
color: var(--gray-700);
cursor: pointer;
transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
text-align: left;
}
#sheetCommentsModal .task-comment-reply-context.is-deleted {
border: 1px dashed rgba(15, 23, 42, 0.25);
background: rgba(148, 163, 184, 0.1);
cursor: not-allowed;
}
#sheetCommentsModal .task-comment-reply-context.is-deleted .task-comment-reply-context-text span {
font-style: italic;
color: var(--gray-500);
}
#sheetCommentsModal .task-comment-reply-context:hover,
#sheetCommentsModal .task-comment-reply-context:focus-visible {
background: rgba(255, 90, 31, 0.12);
box-shadow: 0 0 0 1px rgba(255, 90, 31, 0.25);
outline: none;
}
#sheetCommentsModal .task-comment-reply-context-text {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
word-break: break-word;
overflow-wrap: anywhere;
}
#sheetCommentsModal .task-comment-reply-context-text strong {
color: var(--gray-900);
font-size: 12px;
}
#sheetCommentsModal .task-comment-reply-context-text span {
color: var(--gray-600);
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
#sheetCommentsModal .task-comment-reply-attachments {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
#sheetCommentsModal .task-comment-reply-attachment-chip {
width: 22px;
height: 22px;
border-radius: 6px;
background: rgba(255, 90, 31, 0.16);
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
#sheetCommentsModal .task-comment-reply-attachment-more {
font-size: 11px;
color: var(--gray-600);
background: rgba(15, 23, 42, 0.08);
border-radius: 6px;
padding: 0 6px;
height: 22px;
display: flex;
align-items: center;
}
#sheetCommentsModal .task-activity-item.self-comment .task-comment-reply-context {
align-self: flex-end;
max-width: 100%;
}
#sheetCommentsModal .task-activity-item.task-comment-highlight {
animation: taskCommentHighlightFlash 2.5s ease forwards;
}
@keyframes taskCommentHighlightFlash {
0% {
background: rgba(255, 90, 31, 0.24);
box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.18);
}
50% {
background: rgba(255, 90, 31, 0.12);
box-shadow: 0 0 0 6px rgba(255, 90, 31, 0.12);
}
100% {
background: transparent;
box-shadow: none;
}
}
#sheetCommentsModal .task-comment-edited-label {
font-size: 11px;
color: var(--gray-500);
margin-left: 6px;
}
.task-comment-context-menu {
position: fixed;
z-index: 99999;
min-width: 200px;
max-width: min(92vw, 320px);
background: #fff;
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 12px;
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.16);
padding: 0;
overflow: hidden;
display: none;
}
.task-comment-context-menu.show {
display: block;
}
.task-comment-context-menu-emoji-strip {
border-bottom: 1px solid rgba(148, 163, 184, 0.28);
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.task-comment-context-menu-emoji-scroll {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 2px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
padding: 8px 10px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
}
.task-comment-context-menu-emoji-scroll::-webkit-scrollbar {
height: 6px;
}
.task-comment-context-menu-emoji-scroll::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.45);
border-radius: 3px;
}
.task-comment-context-menu-emoji-scroll .task-comment-emoji-picker-btn {
flex-shrink: 0;
width: 38px;
height: 38px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, transform 0.12s ease;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.task-comment-context-menu-emoji-scroll .task-comment-emoji-picker-btn:hover,
.task-comment-context-menu-emoji-scroll .task-comment-emoji-picker-btn:focus-visible {
background: #fff;
transform: scale(1.06);
outline: none;
}
.task-comment-context-menu-actions {
padding: 6px 0;
max-height: 55vh;
overflow-y: auto;
}
.task-comment-context-menu-actions button {
width: 100%;
border: none;
background: transparent;
text-align: left;
padding: 10px 16px;
font-size: 13px;
color: var(--gray-700, #374151);
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.task-comment-context-menu-actions button:hover,
.task-comment-context-menu-actions button:focus-visible {
background: rgba(237, 32, 71, 0.12);
color: var(--primary-color, #ed2047);
}
.task-comment-context-menu-reactions {
min-width: 260px;
max-width: 320px;
max-height: 70vh;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.task-comment-context-menu-reactions .comment-reactions-menu-back {
flex-shrink: 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
padding: 10px 16px;
font-size: 13px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
background: transparent;
width: 100%;
text-align: left;
color: var(--gray-700, #374151);
}
.task-comment-context-menu-reactions .comment-reactions-menu-back:hover {
background: rgba(237, 32, 71, 0.12);
color: var(--primary-color, #ed2047);
}
.task-comment-context-menu-reactions .comment-reactions-menu-list {
overflow-y: auto;
padding: 6px 0;
}
.task-comment-context-menu-reactions .comment-reactions-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
font-size: 13px;
color: var(--gray-700, #374151);
border: none;
background: transparent;
width: 100%;
text-align: left;
cursor: default;
}
.task-comment-context-menu-reactions .comment-reactions-menu-item .reaction-emoji {
font-size: 16px;
flex-shrink: 0;
}
.task-comment-context-menu-reactions .comment-reactions-menu-item .reaction-name {
flex: 1;
min-width: 0;
}
/* Telegram-style emoji picker (right-click / long-press on comment) */
.task-comment-emoji-picker {
position: absolute;
z-index: 100001;
display: none;
flex-direction: row;
flex-wrap: nowrap;
gap: 2px;
padding: 6px 10px;
background: #e8e8e8;
border-radius: 24px;
border: none;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.task-comment-emoji-picker.show {
display: flex;
}
.task-comment-emoji-picker .task-comment-emoji-picker-btn {
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
font-size: 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
}
.task-comment-emoji-picker .task-comment-emoji-picker-btn:hover {
background: rgba(0, 0, 0, 0.08);
}
/* Reaction pill (compact) under comment text */
.task-comment-reactions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin-top: 2px;
margin-bottom: 1px;
}
.task-comment-reaction-pill {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px 2px 4px;
border-radius: 12px;
border: none;
background: #dcf8c6;
color: var(--gray-800, #1f2937);
font-size: 12px;
cursor: pointer;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.task-comment-reaction-pill:hover {
background: #c8f0a8;
}
.task-comment-reaction-pill-active {
background: #b8e098;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.task-comment-reaction-pill .task-comment-reaction-emoji {
font-size: 13px;
line-height: 1;
}
.task-comment-reaction-reactors {
display: inline-flex;
align-items: center;
gap: 1px;
}
.task-comment-reaction-reactor {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--primary-color, #ed2047);
color: #fff;
font-size: 8px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
flex-shrink: 0;
}
.task-comment-reaction-reactor.task-comment-reaction-avatar {
width: 18px;
height: 18px;
font-size: 9px;
}
.task-comment-reaction-reactor-more {
font-size: 9px;
color: var(--gray-600, #4b5563);
margin-left: 1px;
}
.task-comment-reaction-count {
font-size: 10px;
color: inherit;
opacity: 0.9;
}
/* Sheet Comments Modal: selection bar (same as task-detail) */
#sheetCommentsModal .task-detail-selection-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: var(--gray-100, #f3f4f6);
border-bottom: 1px solid var(--gray-200, #e5e7eb);
flex-shrink: 0;
}
#sheetCommentsModal .task-detail-selection-bar .task-detail-selection-cancel {
background: none;
border: none;
color: var(--gray-700, #374151);
font-size: 14px;
cursor: pointer;
padding: 4px 8px;
}
#sheetCommentsModal .task-detail-selection-bar .task-detail-selection-count {
flex: 1;
font-size: 14px;
font-weight: 600;
color: var(--gray-800, #1f2937);
}
#sheetCommentsModal .task-detail-selection-bar .task-detail-selection-more {
background: none;
border: none;
padding: 8px;
cursor: pointer;
color: var(--gray-700, #374151);
font-size: 18px;
line-height: 1;
border-radius: 4px;
}
#sheetCommentsModal .task-detail-selection-bar .task-detail-selection-more:hover {
background: var(--gray-200, #e5e7eb);
}
#sheetCommentsModal #sheetCommentSelectionDropdown {
position: absolute;
right: 8px;
top: 100%;
margin-top: 4px;
background: #fff;
border: 1px solid var(--gray-200, #e5e7eb);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1000;
min-width: 180px;
padding: 4px 0;
}
#sheetCommentsModal #sheetCommentSelectionDropdown button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
border: none;
background: none;
text-align: left;
font-size: 14px;
cursor: pointer;
color: var(--gray-800, #1f2937);
}
#sheetCommentsModal #sheetCommentSelectionDropdown button:hover {
background: var(--gray-100, #f3f4f6);
}
#sheetCommentsModal .task-activity-item.task-comment-selected {
background: rgba(var(--primary-rgb, 237, 32, 71), 0.08);
padding: 5px;
border-radius: 8px;
}
/* Sheet Comments Modal: hide mobile tabs on desktop, show on mobile */
#sheetCommentsModal .task-detail-mobile-tabs {
display: none;
}
/* Sheet Comments Modal: mobile tabs (Sheet | Comment) and swipe - same as task-detail */
@media (max-width: 768px) {
#sheetCommentsModal .task-detail-mobile-tabs {
display: flex;
gap: 0;
padding: 0 16px;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
background: var(--white, #fff);
flex-shrink: 0;
}
#sheetCommentsModal .task-detail-mobile-tab {
flex: 1;
padding: 14px 16px;
border: none;
background: none;
font-size: 14px;
font-weight: 500;
color: var(--gray-500, #6b7280);
cursor: pointer;
position: relative;
transition: color 0.2s ease;
}
#sheetCommentsModal .task-detail-mobile-tab.active {
color: var(--primary-color, #ed2047);
}
#sheetCommentsModal .task-detail-mobile-tab.active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--primary-color, #ed2047);
border-radius: 2px 2px 0 0;
}
#sheetCommentsModal .task-detail-body {
flex: 1;
--swipe: 0px;
display: flex;
flex-direction: row;
gap: 0;
padding: 0;
min-height: 0;
overflow: hidden;
}
#sheetCommentsModal .task-detail-body .task-detail-left,
#sheetCommentsModal .task-detail-body .task-detail-right {
flex: 0 0 100%;
width: 100%;
min-width: 100%;
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 16px;
-webkit-overflow-scrolling: touch;
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}
#sheetCommentsModal .task-detail-body.swiping .task-detail-left,
#sheetCommentsModal .task-detail-body.swiping .task-detail-right {
transition: none;
}
#sheetCommentsModal .task-detail-body.mobile-tab-detail .task-detail-left {
transform: translateX(calc(0 + var(--swipe, 0px)));
visibility: visible;
opacity: 1;
pointer-events: auto;
z-index: 1;
}
#sheetCommentsModal .task-detail-body.mobile-tab-detail .task-detail-right {
transform: translateX(calc(100% + var(--swipe, 0px)));
visibility: visible;
pointer-events: none;
z-index: 0;
}
#sheetCommentsModal .task-detail-body.mobile-tab-comment .task-detail-left {
transform: translateX(calc(-100% + var(--swipe, 0px)));
visibility: visible;
pointer-events: none;
z-index: 0;
}
#sheetCommentsModal .task-detail-body.mobile-tab-comment .task-detail-right {
transform: translateX(calc(-100% + var(--swipe, 0px)));
visibility: visible;
opacity: 1;
pointer-events: auto;
z-index: 1;
min-height: 200px;
}
#sheetCommentsModal .modal-dialog {
width: 100%;
max-width: 100%;
}
#sheetCommentsModal .modal-content {
height: 90vh;
max-height: 90vh;
border-radius: 16px;
padding-bottom: env(safe-area-inset-bottom, 0);
}
:is(#taskDetailModal, #sheetCommentsModal) .task-detail-header {
padding: 12px 16px 10px;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
}
/* Comment Reactions list modal (right-click > Reactions) */
.comment-reactions-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 100010;
display: none;
align-items: center;
justify-content: center;
}
.comment-reactions-modal-overlay.show {
display: flex;
}
.comment-reactions-modal {
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
min-width: 320px;
max-width: 420px;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.comment-reactions-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid #eee;
}
.comment-reactions-modal-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.comment-reactions-modal-close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
color: #666;
}
.comment-reactions-modal-close:hover {
color: #000;
}
.comment-reactions-modal-body {
padding: 12px 16px;
overflow-y: auto;
}
.comment-reactions-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.comment-reactions-summary-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid #e0e0e0;
background: #f5f5f5;
font-size: 14px;
cursor: default;
}
.comment-reactions-summary-btn.active {
background: #e3f2fd;
border-color: #2196f3;
}
.comment-reactions-list {
list-style: none;
margin: 0;
padding: 0;
}
.comment-reactions-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.comment-reactions-list li:last-child {
border-bottom: none;
}
.comment-reactions-list .reaction-emoji {
font-size: 18px;
}
.comment-reactions-list .reaction-name {
font-size: 14px;
color: #333;
}