/* ============================================================================
   TASK ASSIGNMENT UI
   ============================================================================ */

/* Assignee Dropdown */
.assignee-dropdown {
    position: fixed;
    width: min(240px, calc(100vw - 32px));
    max-height: 300px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    z-index: calc(var(--z-layer-modal) + 5);
    overflow: hidden;
    display: none;
}

.assignee-dropdown.visible {
    display: block;
}

.assignee-dropdown-header {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-light);
}

.assignee-list {
    max-height: 250px;
    overflow-y: auto;
}

.assignee-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.assignee-item:hover {
    background: var(--bg-secondary);
}

.assignee-item:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset-inset);
}

.assignee-item.selected {
    background: rgba(53, 122, 189, 0.1);
}

.assignee-item-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background: var(--accent-fill);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    flex-shrink: 0;
}

.assignee-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignee-item-check {
    width: 16px;
    height: 16px;
    color: var(--accent-blue);
}

.assignee-item.unassigned .assignee-item-avatar {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

/* Active state for assign button */
.modal-action-btn[data-action="assign"].has-assignee {
    color: var(--accent-blue);
    background: rgba(53, 122, 189, 0.1);
}

/* Assignee badge on task cards */
.task-assignee-badge {
    display: inline-flex;
    align-items: center;
    cursor: default;
}

.task-assignee-avatar {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-circle);
    background: var(--accent-fill);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.meta-assignee-avatar {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-circle);
    background: var(--accent-fill);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
}

/* Task row assignee badge */
.task-meta-badge.meta-assignee {
    display: inline-flex;
    align-items: center;
    background: none;
    padding: 0;
    cursor: default;
}

.task-meta-badge.meta-assignee .badge-avatar {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-circle);
    background: var(--accent-fill);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Task row subtask badge */
.task-meta-badge.meta-subtasks {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    color: var(--text-tertiary);
}

.task-meta-badge.meta-subtasks svg {
    width: 12px;
    height: 12px;
}

/* ============================================================================
   @MENTION SYSTEM
   ============================================================================ */

/* Mention dropdown */
.mention-dropdown {
    position: fixed;
    width: min(280px, calc(100vw - 32px));
    max-height: 300px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    z-index: calc(var(--z-layer-modal) + 1);
    overflow: hidden;
    display: none;
}

.mention-dropdown.visible {
    display: block;
}

.mention-dropdown-header {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-light);
}

.mention-list {
    max-height: 250px;
    overflow-y: auto;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.mention-item:hover {
    background: var(--bg-secondary);
}

.mention-item:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset-inset);
}

.mention-item.selected {
    background: rgba(53, 122, 189, 0.1);
}

.mention-item.no-results {
    color: var(--text-tertiary);
    cursor: default;
}

.mention-item-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background: var(--accent-fill);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    flex-shrink: 0;
}

.mention-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.mention-item-email {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

/* Inline mention span in editors */
.mention {
    display: inline;
    background: rgba(53, 122, 189, 0.12);
    color: var(--accent-blue);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    user-select: all;
}

/* Mention access banner — shown when mentioned user lacks access */
.mention-access-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    background: rgba(74, 144, 217, 0.08);
    border-left: 3px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    animation: mentionBannerFadeIn var(--duration-normal) var(--ease-in-out);
}

.mention-access-banner.fade-out {
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.mention-access-banner .banner-message {
    flex: 1;
    min-width: 0;
}

.mention-access-banner .banner-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.mention-access-banner .banner-actions button {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-12);
    font-weight: 500;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity var(--transition-fast);
}

.mention-access-banner .banner-actions button:hover {
    opacity: 0.85;
}

.mention-access-banner .share-btn {
    background: var(--accent-fill);
    color: white;
}

.mention-access-banner .skip-btn {
    background: transparent;
    color: var(--text-tertiary);
}

@keyframes mentionBannerFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.mention:hover {
    background: rgba(53, 122, 189, 0.2);
}

/* ============================================================================
   NOTIFICATION SYSTEM
   ============================================================================ */

/* Notification Bell */