.save-status-indicator { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; line-height: 1rem; color: var(--text-tertiary); user-select: none; margin-right: auto; padding: 0.2rem 0; min-width: 0; } .save-status-indicator[data-state="saving"] { color: var(--text-secondary); } .save-status-ellipsis > span:nth-child(2) { animation: saving-second-dot 1.5s steps(1, end) infinite; } .save-status-ellipsis > span:nth-child(3) { animation: saving-third-dot 1.5s steps(1, end) infinite; } @keyframes saving-second-dot { 0% { opacity: 0; } 33.333% { opacity: 1; } } @keyframes saving-third-dot { 0% { opacity: 0; } 66.667% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .save-status-ellipsis > span:nth-child(n) { animation: none; } } .save-status-indicator[data-state="saved"] { color: var(--accent); } .save-status-indicator[data-state="error"] { color: var(--error); } .save-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .save-status-dot[data-state="idle"] { background-color: var(--text-tertiary); } .save-status-dot[data-state="saving"] { background-color: var(--text-secondary); animation: save-pulse 1s ease-in-out infinite; } .save-status-dot[data-state="saved"] { background-color: var(--accent); } /* Text-only save states align with the status bar's left padding. */ .save-status-dot[data-state="saving"], .save-status-dot[data-state="saved"] { display: none; } .save-status-dot[data-state="error"] { background-color: var(--error); } @keyframes save-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .save-status-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Concurrent tab warning */ .concurrent-tab-warning { display: flex; align-items: center; gap: 0.375rem; font-size: 0.7rem; color: var(--warning); padding: 0.2rem 0.5rem; user-select: none; margin-right: auto; } .concurrent-tab-warning svg { width: 12px; height: 12px; flex-shrink: 0; }