/* ============================================================================ ATLAS REDESIGN — AI Workforce agent profile drawer styles (v1.5) Branch: atlas-redesign-2026-06-29 · tokens only (--r-*), both themes. Mounted on (outside .rd-agents) → all selectors are global. ========================================================================== */ .rd-adrawer__overlay { position: fixed; inset: 0; z-index: 210; background: var(--r-select); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .18s var(--r-ease); } .rd-adrawer__overlay.is-open { opacity: 1; pointer-events: auto; } .rd-adrawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 211; width: 444px; max-width: 100vw; background: var(--r-canvas); border-left: 1px solid var(--r-border); box-shadow: var(--r-shadow-pop); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s var(--r-ease); font-family: var(--r-font-body); color: var(--r-body); } .rd-adrawer.is-open { transform: translateX(0); } /* header */ .rd-adrawer__head { flex: none; padding: 18px 20px; border-bottom: 1px solid var(--r-hairline); background: var(--r-canvas-raised); display: flex; align-items: flex-start; gap: 13px; } .rd-adrawer__ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--r-surface); border: 1px solid var(--r-border); color: var(--r-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 23px; } .rd-adrawer__id { flex: 1; min-width: 0; } .rd-adrawer__id-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rd-adrawer__name { font-family: var(--r-font-display); font-size: 19px; font-weight: 600; color: var(--r-ink); } .rd-adrawer__role { font-size: 12px; color: var(--r-faint); margin-top: 3px; } .rd-adrawer__x { flex: none; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--r-border); background: var(--r-surface); color: var(--r-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .rd-adrawer__x:hover { color: var(--r-ink); } /* body */ .rd-adrawer__body { flex: 1; overflow-y: auto; padding: 18px 20px; } .rd-adrawer__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; } .rd-adrawer__stat { background: var(--r-surface); border: 1px solid var(--r-border); border-radius: 12px; padding: 11px 12px; } .rd-adrawer__stat-n { font-family: var(--r-font-display); font-size: 17px; font-weight: 600; color: var(--r-ink); line-height: 1.1; } .rd-adrawer__stat-l { font-family: var(--r-font-mono); font-size: 10px; letter-spacing: .06em; color: var(--r-faint); margin-top: 3px; } .rd-adrawer__task { background: var(--r-surface); border: 1px solid var(--r-border); border-radius: 12px; padding: 13px 15px; margin-bottom: 18px; } .rd-adrawer__task-l, .rd-adrawer__cap-l, .rd-adrawer__thread-l { font-family: var(--r-font-mono); font-size: 9px; letter-spacing: .1em; color: var(--r-faint); } .rd-adrawer__task-l { margin-bottom: 6px; } .rd-adrawer__task-v { font-size: 13.5px; color: var(--r-ink); line-height: 1.45; } .rd-adrawer__cap-l { margin-bottom: 10px; } .rd-adrawer__cap { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; } .rd-adrawer__detail { display: flex; gap: 12px; font-size: 12.5px; } .rd-adrawer__detail-l { flex: none; width: 92px; color: var(--r-faint); } .rd-adrawer__detail-v { flex: 1; min-width: 0; color: var(--r-body); line-height: 1.4; } .rd-adrawer__cap-empty { font-size: 12.5px; color: var(--r-faint); margin: 0; } .rd-adrawer__thread-l { margin-bottom: 2px; } .rd-adrawer__thread { min-height: 40px; } .rd-adrawer__thread-empty { font-size: 12.5px; color: var(--r-faint); line-height: 1.5; padding: 10px 0; margin: 0; } .rd-adrawer__msg { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--r-hairline); } .rd-adrawer__msg-av { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--r-canvas-raised); color: var(--r-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: var(--r-font-mono); } .rd-adrawer__msg-body { flex: 1; min-width: 0; } .rd-adrawer__msg-top { display: flex; align-items: baseline; gap: 7px; } .rd-adrawer__msg-who { font-size: 12px; font-weight: 700; color: var(--r-ink); } .rd-adrawer__msg-time { font-family: var(--r-font-mono); font-size: 12px; color: var(--r-faint); } .rd-adrawer__msg-txt { font-size: 12.5px; color: var(--r-body); line-height: 1.45; margin-top: 2px; } /* composer */ .rd-adrawer__composer { flex: none; padding: 12px 16px; border-top: 1px solid var(--r-hairline); background: var(--r-surface); display: flex; gap: 8px; } .rd-adrawer__input { flex: 1; height: 38px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--r-border); background: var(--r-canvas); font-size: 13px; font-family: inherit; color: var(--r-ink); outline: none; } .rd-adrawer__input:focus-visible { outline: var(--r-focus); outline-offset: 1px; } .rd-adrawer__send { flex: none; height: 38px; padding: 0 15px; border-radius: 10px; border: none; background: var(--r-primary); color: var(--r-primary-ink); font: 600 13px var(--r-font-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .rd-adrawer__send:active { transform: translateY(.5px); } /* ============================================================================ v2.8 — Overview / Settings tabs + Settings panel (tokens only, both themes) ========================================================================== */ .rd-adrawer__tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--r-surface); border: 1px solid var(--r-border); border-radius: var(--r-radius-control); } .rd-adrawer__tab { flex: 1; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--r-muted); cursor: pointer; font: 600 12.5px var(--r-font-body); transition: background var(--r-dur) var(--r-ease), color var(--r-dur) var(--r-ease); } .rd-adrawer__tab:hover { color: var(--r-ink); } .rd-adrawer__tab.is-on { background: var(--r-canvas-raised); color: var(--r-ink); box-shadow: var(--r-shadow-card); } .rd-adrawer__tab:focus-visible { outline: var(--r-focus); outline-offset: 1px; } /* Settings blocks */ .rd-adset__block { margin-bottom: 18px; } .rd-adset__label { font-family: var(--r-font-mono); font-size: 9px; letter-spacing: .1em; color: var(--r-faint); margin-bottom: 9px; } /* pause row */ .rd-adset__row--pause { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; background: var(--r-surface); border: 1px solid var(--r-border); border-radius: 12px; padding: 13px 15px; } .rd-adset__row-tt { flex: 1; min-width: 0; } .rd-adset__row-tt b { display: block; font-size: 13.5px; font-weight: 600; color: var(--r-ink); } .rd-adset__row-tt span { font-size: 12px; color: var(--r-faint); line-height: 1.4; } .rd-adset__switch { flex: none; width: 42px; height: 24px; border-radius: 20px; padding: 0; border: 1px solid var(--r-border); background: var(--r-seg-track); cursor: pointer; position: relative; transition: background var(--r-dur) var(--r-ease), border-color var(--r-dur) var(--r-ease); } .rd-adset__switch.is-on { background: var(--r-primary); border-color: var(--r-primary); } .rd-adset__switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--r-surface); box-shadow: var(--r-shadow-card); transition: transform var(--r-dur) var(--r-ease); } .rd-adset__switch.is-on .rd-adset__switch-knob { transform: translateX(18px); } .rd-adset__switch:focus-visible { outline: var(--r-focus); outline-offset: 2px; } /* autonomy segmented */ .rd-adset__seg { display: flex; gap: 4px; padding: 4px; background: var(--r-surface); border: 1px solid var(--r-border); border-radius: var(--r-radius-control); } .rd-adset__seg-btn { flex: 1; height: 30px; border: none; border-radius: 7px; background: transparent; color: var(--r-muted); cursor: pointer; font: 600 12px var(--r-font-body); transition: background var(--r-dur) var(--r-ease), color var(--r-dur) var(--r-ease); } .rd-adset__seg-btn:hover { color: var(--r-ink); } .rd-adset__seg-btn.is-on { background: var(--r-mint-surface); color: var(--r-mint-ink); } .rd-adset__seg-btn:focus-visible { outline: var(--r-focus); outline-offset: 1px; } .rd-adset__hint { font-size: 12px; color: var(--r-faint); line-height: 1.45; margin-top: 8px; } /* tools chips */ .rd-adset__chips { display: flex; flex-wrap: wrap; gap: 8px; } .rd-adset__chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--r-border); border-radius: var(--r-radius-pill); background: var(--r-surface); color: var(--r-muted); cursor: pointer; padding: 6px 12px; font: 500 12px var(--r-font-body); transition: all var(--r-dur) var(--r-ease); } .rd-adset__chip i { font-size: 13px; } .rd-adset__chip.is-on { border-color: var(--r-primary); background: var(--r-mint-surface); color: var(--r-mint-ink); font-weight: 600; } .rd-adset__chip:focus-visible { outline: var(--r-focus); outline-offset: 1px; } /* working hours link */ .rd-adset__hours { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--r-border); border-radius: 12px; background: var(--r-surface); color: var(--r-body); cursor: pointer; padding: 12px 14px; font: 500 12.5px var(--r-font-body); transition: background var(--r-dur) var(--r-ease), border-color var(--r-dur) var(--r-ease); } .rd-adset__hours span { display: inline-flex; align-items: center; gap: 8px; } .rd-adset__hours > span > i { font-size: 15px; color: var(--r-primary); } .rd-adset__hours > i { font-size: 14px; color: var(--r-faint); } .rd-adset__hours:hover { background: var(--r-canvas-raised); border-color: var(--r-primary); } .rd-adset__hours:focus-visible { outline: var(--r-focus); outline-offset: 1px; } /* playbook */ .rd-adset__playbook { width: 100%; box-sizing: border-box; min-height: 92px; resize: vertical; line-height: 1.5; font: 13px var(--r-font-body); color: var(--r-ink); background: var(--r-surface-2); border: 1px solid var(--r-border); border-radius: var(--r-radius-control); padding: 10px 12px; transition: border-color var(--r-dur) var(--r-ease), box-shadow var(--r-dur) var(--r-ease); } .rd-adset__playbook::placeholder { color: var(--r-faint); } .rd-adset__playbook:focus { outline: none; border-color: var(--r-primary); box-shadow: 0 0 0 3px var(--r-select); } /* lifecycle */ .rd-adset__life { display: flex; gap: 10px; padding-top: 4px; } .rd-adset__life-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border: 1px solid var(--r-border); border-radius: var(--r-radius-control); background: var(--r-surface); color: var(--r-body); cursor: pointer; font: 600 12.5px var(--r-font-body); transition: background var(--r-dur) var(--r-ease), border-color var(--r-dur) var(--r-ease), color var(--r-dur) var(--r-ease); } .rd-adset__life-btn i { font-size: 15px; } .rd-adset__life-btn:hover { background: var(--r-canvas-raised); } .rd-adset__life-btn--danger { color: var(--r-alert); } .rd-adset__life-btn--danger:hover { border-color: var(--r-alert); background: var(--r-chip-down-surface); } .rd-adset__life-btn:focus-visible { outline: var(--r-focus); outline-offset: 1px; } /* ============================================================================ v3.1 — Onboarding overlay (uses shared rd-modal chrome; adds step list + spinner) ========================================================================== */ .rd-onb__steps { display: flex; flex-direction: column; gap: 4px; } .rd-onb__step { display: flex; align-items: flex-start; gap: 12px; padding: 13px 12px; border-radius: 10px; transition: background var(--r-dur) var(--r-ease), opacity var(--r-dur) var(--r-ease); } .rd-onb__step--active { background: var(--r-mint-surface); } .rd-onb__step--todo { opacity: .5; } .rd-onb__step-tt { flex: 1; min-width: 0; } .rd-onb__step-tt b { display: block; font-size: 13.5px; font-weight: 600; color: var(--r-ink); } .rd-onb__step-tt span { font-size: 12px; color: var(--r-faint); line-height: 1.4; } .rd-onb__step-ic { font-size: 22px; flex: none; line-height: 1; } .rd-onb__step-ic--done { color: var(--r-good); } .rd-onb__step-dot { flex: none; width: 20px; height: 20px; margin: 1px; border-radius: 50%; border: 2px solid var(--r-border); box-sizing: border-box; } .rd-onb__spin { flex: none; width: 20px; height: 20px; margin: 1px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--r-seg-track); border-top-color: var(--r-primary); animation: rdOnbSpin .7s linear infinite; } .rd-onb__spin--sm { width: 15px; height: 15px; margin: 0; border-width: 2px; border-top-color: var(--r-primary-ink); border-color: var(--r-select); } @keyframes rdOnbSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rd-onb__spin { animation: none; } } html[data-rmotion="reduced"] .rd-onb__spin { animation: none; } @media (max-width: 480px) { .rd-adrawer { width: 100vw; } }