.cda-assistant,
.cda-news-list { --cda-rose: #e84a7f;
--cda-rose-deep: #d94a7f;
--cda-rose-soft: #fce8f0;
--cda-navy: #1e3a5f;
--cda-navy-soft: #2d4a6f;
--cda-coral: #f4a89a;
--cda-coral-soft: #ffece4;
--cda-violet: #7c3aed;
--cda-violet-soft: #ede9fe;
--cda-blue: #2563eb;
--cda-blue-soft: #dbeafe;
--cda-gold: #c9a227;
--cda-gold-soft: #faf6e8;
--cda-paper: #faf7f2;
--cda-paper-warm: #fff9ef;
--cda-surface: #ffffff;
--cda-ink: #3d3548;
--cda-ink-muted: #6b6378;
--cda-border: rgba(120, 100, 140, 0.18);
--cda-shadow: 0 12px 32px rgba(45, 35, 60, 0.14);
--cda-shadow-sm: 0 4px 14px rgba(45, 35, 60, 0.09);
--cda-radius: 14px;
--cda-radius-pill: 999px;
--cda-focus: var(--cda-rose);
--cda-z-toggle: 99980;
--cda-z-panel: 99990;
--cda-z-backdrop: 99985;
--cda-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.cda-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .cda-assistant {
position: relative;
z-index: var(--cda-z-toggle);
}
.cda-assistant__toggle {
position: fixed;
left: max(1rem, env(safe-area-inset-left));
bottom: max(1rem, env(safe-area-inset-bottom));
z-index: var(--cda-z-toggle);
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 48px;
padding: 0.7rem 1.15rem;
border: 2px solid rgba(255, 255, 255, 0.35);
border-radius: var(--cda-radius-pill);
background: linear-gradient(135deg, var(--cda-rose) 0%, var(--cda-rose-deep) 100%);
color: #fff;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
box-shadow: var(--cda-shadow);
transition: transform 0.2s var(--cda-ease), box-shadow 0.2s var(--cda-ease), filter 0.2s;
}
.cda-assistant__toggle-icon {
font-size: 0.85rem;
opacity: 0.95;
}
.cda-assistant__toggle:hover {
filter: brightness(1.05);
box-shadow: 0 14px 36px rgba(232, 74, 127, 0.35);
}
.cda-assistant__toggle:focus-visible {
outline: 3px solid var(--cda-navy);
outline-offset: 3px;
}
.cda-assistant__toggle[aria-expanded="true"] {
transform: scale(0.98);
}
.cda-assistant__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.4rem;
height: 1.4rem;
padding: 0 0.35rem;
border-radius: var(--cda-radius-pill);
background: var(--cda-navy);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
box-shadow: 0 2px 6px rgba(30, 58, 95, 0.35);
} .cda-assistant__backdrop {
position: fixed;
inset: 0;
z-index: var(--cda-z-backdrop);
background: rgba(30, 58, 95, 0.42);
backdrop-filter: blur(2px);
}
.cda-assistant__panel {
position: fixed;
left: 0;
bottom: 0;
top: 0;
z-index: var(--cda-z-panel);
width: min(100%, 400px);
max-width: 100vw;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, var(--cda-paper-warm) 0%, var(--cda-surface) 28%);
color: var(--cda-ink);
box-shadow: var(--cda-shadow);
transform: translateX(-105%);
transition: transform 0.28s var(--cda-ease);
}
.cda-assistant__panel.is-open {
transform: translateX(0);
}
.cda-assistant__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 1.15rem 1.15rem 0.85rem;
border-bottom: 1px solid var(--cda-border);
background: linear-gradient(135deg, var(--cda-rose-soft) 0%, var(--cda-paper-warm) 55%, var(--cda-surface) 100%);
}
.cda-assistant__kicker {
margin: 0 0 0.2rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cda-rose-deep);
}
.cda-assistant__title {
margin: 0;
font-size: 1.2rem;
font-weight: 800;
line-height: 1.25;
color: var(--cda-navy);
}
.cda-assistant__subtitle {
margin: 0.35rem 0 0;
font-size: 0.92rem;
color: var(--cda-ink-muted);
line-height: 1.4;
}
.cda-assistant__close {
flex-shrink: 0;
width: 44px;
height: 44px;
border: 1px solid var(--cda-border);
border-radius: 50%;
background: var(--cda-surface);
color: var(--cda-ink-muted);
font-size: 1.45rem;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cda-assistant__close:hover {
color: var(--cda-navy);
border-color: var(--cda-rose);
background: var(--cda-rose-soft);
}
.cda-assistant__close:focus-visible {
outline: 3px solid var(--cda-focus);
outline-offset: 2px;
}
.cda-assistant__body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0.85rem 1rem 1.35rem;
}
.cda-assistant__section + .cda-assistant__section {
margin-top: 1.35rem;
padding-top: 1.35rem;
border-top: 1px solid var(--cda-border);
}
.cda-assistant__section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.cda-assistant__section-title {
margin: 0;
font-size: 0.88rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--cda-navy);
}
.cda-assistant__pill {
display: inline-flex;
padding: 0.2rem 0.55rem;
border-radius: var(--cda-radius-pill);
background: var(--cda-rose-soft);
color: var(--cda-rose-deep);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
} .cda-assistant__needs {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.55rem;
}
.cda-assistant__need-link {
display: grid;
gap: 0.2rem;
padding: 0.75rem 0.85rem;
border-radius: var(--cda-radius);
border: 1px solid var(--cda-border);
background: var(--cda-surface);
text-decoration: none;
color: inherit;
box-shadow: var(--cda-shadow-sm);
transition: transform 0.15s var(--cda-ease), border-color 0.15s, box-shadow 0.15s;
}
.cda-assistant__need-link:hover,
.cda-assistant__need-link:focus-visible {
transform: translateY(-1px);
border-color: var(--cda-rose);
box-shadow: 0 8px 22px rgba(232, 74, 127, 0.12);
outline: none;
}
.cda-assistant__need-link:focus-visible {
outline: 3px solid var(--cda-focus);
outline-offset: 2px;
}
.cda-assistant__need--rose .cda-assistant__need-link {
border-left: 4px solid var(--cda-rose);
}
.cda-assistant__need--navy .cda-assistant__need-link {
border-left: 4px solid var(--cda-navy);
}
.cda-assistant__need--violet .cda-assistant__need-link {
border-left: 4px solid var(--cda-violet);
}
.cda-assistant__need--coral .cda-assistant__need-link {
border-left: 4px solid var(--cda-coral);
}
.cda-assistant__need--blue .cda-assistant__need-link {
border-left: 4px solid var(--cda-blue);
}
.cda-assistant__need--gold .cda-assistant__need-link {
border-left: 4px solid var(--cda-gold);
}
.cda-assistant__need-title {
font-size: 0.95rem;
font-weight: 800;
color: var(--cda-navy);
}
.cda-assistant__need-desc {
font-size: 0.82rem;
line-height: 1.4;
color: var(--cda-ink-muted);
}
.cda-assistant__need-cta {
margin-top: 0.15rem;
font-size: 0.78rem;
font-weight: 700;
color: var(--cda-rose-deep);
} .cda-assistant__news-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.55rem;
max-height: min(42vh, 320px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
}
.cda-assistant__news-card {
padding: 0.75rem 0.85rem;
border-radius: var(--cda-radius);
border: 1px solid var(--cda-border);
background: var(--cda-surface);
}
.cda-assistant__news-item.is-unread .cda-assistant__news-card {
border-color: rgba(232, 74, 127, 0.35);
background: linear-gradient(135deg, #fff 0%, var(--cda-rose-soft) 120%);
}
.cda-assistant__news-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.35rem;
}
.cda-assistant__news-tag {
display: inline-block;
padding: 0.12rem 0.45rem;
border-radius: var(--cda-radius-pill);
background: var(--cda-navy-soft);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
text-transform: lowercase;
}
.cda-assistant__news-tag--type {
background: var(--cda-violet-soft);
color: var(--cda-violet);
}
.cda-assistant__news-date {
margin-left: auto;
font-size: 0.72rem;
color: var(--cda-ink-muted);
}
.cda-assistant__news-title {
margin: 0;
font-size: 0.92rem;
font-weight: 800;
color: var(--cda-navy);
line-height: 1.35;
}
.cda-assistant__news-summary {
margin: 0.3rem 0 0;
font-size: 0.82rem;
line-height: 1.45;
color: var(--cda-ink-muted);
}
.cda-assistant__news-action {
display: inline-flex;
align-items: center;
margin-top: 0.55rem;
padding: 0.35rem 0.75rem;
border: none;
border-radius: var(--cda-radius-pill);
background: var(--cda-navy);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.cda-assistant__news-action:hover,
.cda-assistant__news-action:focus-visible {
background: var(--cda-navy-soft);
transform: translateY(-1px);
outline: none;
}
.cda-assistant__news-action:focus-visible {
outline: 3px solid var(--cda-focus);
outline-offset: 2px;
}
.cda-assistant__empty {
padding: 0.85rem;
border-radius: var(--cda-radius);
background: var(--cda-paper);
text-align: center;
}
.cda-assistant__empty-title {
margin: 0;
font-weight: 700;
color: var(--cda-navy);
}
.cda-assistant__empty-text {
margin: 0.35rem 0 0;
font-size: 0.88rem;
color: var(--cda-ink-muted);
}
.cda-assistant__more {
margin: 0.75rem 0 0;
text-align: center;
}
.cda-assistant__more a {
color: var(--cda-rose-deep);
font-weight: 700;
font-size: 0.88rem;
text-decoration: none;
}
.cda-assistant__more a:hover,
.cda-assistant__more a:focus-visible {
text-decoration: underline;
outline: none;
}
.cda-assistant__more a:focus-visible {
outline: 2px solid var(--cda-focus);
outline-offset: 2px;
} .cda-news-list__intro {
margin-bottom: 1.35rem;
padding: 1.15rem 1.25rem;
border-radius: var(--cda-radius);
background: linear-gradient(135deg, var(--cda-rose-soft) 0%, var(--cda-paper-warm) 100%);
border: 1px solid var(--cda-border);
}
.cda-news-list__heading {
margin: 0;
font-size: clamp(1.25rem, 2.5vw, 1.55rem);
font-weight: 800;
color: var(--cda-navy);
}
.cda-news-list__lede {
margin: 0.4rem 0 0;
font-size: 0.95rem;
color: var(--cda-ink-muted);
max-width: 42rem;
}
.cda-news-list__items {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1rem;
}
@media (min-width: 640px) {
.cda-news-list__items {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.cda-news-list__items {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.cda-news-card {
height: 100%;
display: flex;
flex-direction: column;
padding: 1.1rem 1.15rem;
border: 1px solid var(--cda-border);
border-radius: var(--cda-radius);
background: var(--cda-surface);
box-shadow: var(--cda-shadow-sm);
transition: box-shadow 0.2s var(--cda-ease), transform 0.2s var(--cda-ease);
}
.cda-news-card:hover {
box-shadow: var(--cda-shadow);
transform: translateY(-2px);
}
.cda-news-card__badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.55rem;
}
.cda-news-card__tag {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: var(--cda-radius-pill);
font-size: 0.72rem;
font-weight: 700;
}
.cda-news-card__tag--module {
background: var(--cda-navy);
color: #fff;
}
.cda-news-card__tag--type {
background: var(--cda-violet-soft);
color: var(--cda-violet);
}
.cda-news-card__date {
margin-left: auto;
font-size: 0.78rem;
color: var(--cda-ink-muted);
}
.cda-news-card__title {
margin: 0;
font-size: 1.05rem;
line-height: 1.35;
color: var(--cda-navy);
}
.cda-news-card__title a {
color: inherit;
text-decoration: none;
}
.cda-news-card__title a:hover,
.cda-news-card__title a:focus-visible {
color: var(--cda-rose-deep);
outline: none;
}
.cda-news-card__title a:focus-visible {
outline: 2px solid var(--cda-focus);
outline-offset: 2px;
}
.cda-news-card__summary {
margin: 0.55rem 0 0;
font-size: 0.92rem;
line-height: 1.5;
color: var(--cda-ink);
flex: 1;
}
.cda-news-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.85rem;
padding-top: 0.65rem;
border-top: 1px solid var(--cda-border);
}
.cda-news-card__version {
font-size: 0.75rem;
color: var(--cda-ink-muted);
font-weight: 600;
}
.cda-news-card__action {
display: inline-flex;
padding: 0.4rem 0.85rem;
border-radius: var(--cda-radius-pill);
background: linear-gradient(135deg, var(--cda-rose) 0%, var(--cda-rose-deep) 100%);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
transition: filter 0.15s, transform 0.15s;
}
.cda-news-card__action:hover,
.cda-news-card__action:focus-visible {
filter: brightness(1.06);
transform: translateY(-1px);
color: #fff;
outline: none;
}
.cda-news-card__action:focus-visible {
outline: 3px solid var(--cda-navy);
outline-offset: 2px;
}
.cda-news-list__empty {
padding: 2rem 1.25rem;
border-radius: var(--cda-radius);
background: var(--cda-paper);
border: 1px dashed var(--cda-border);
text-align: center;
}
.cda-news-list__empty-title {
margin: 0;
font-size: 1.05rem;
font-weight: 800;
color: var(--cda-navy);
}
.cda-news-list__empty-text {
margin: 0.45rem 0 0;
font-size: 0.92rem;
color: var(--cda-ink-muted);
max-width: 28rem;
margin-inline: auto;
} .cda-assistant__section--context {
margin-bottom: 0.35rem;
}
.cda-assistant__section--context-detail {
margin-bottom: 1rem;
}
.cda-assistant__section--highlights {
margin-bottom: 1rem;
padding: 0.85rem 0.9rem 0.95rem;
border-radius: 14px;
background: linear-gradient(145deg, var(--cda-rose-soft) 0%, var(--cda-paper-warm) 42%, var(--cda-surface) 100%);
border: 1px solid rgba(232, 74, 127, 0.28);
box-shadow: 0 2px 10px rgba(30, 58, 95, 0.06);
scroll-margin-top: 0.75rem;
}
.cda-assistant__section--user-goals {
margin-bottom: 1rem;
padding: 0.85rem 0.9rem 0.95rem;
border-radius: 14px;
background: linear-gradient(145deg, #e8f5f0 0%, var(--cda-paper-warm) 48%, var(--cda-surface) 100%);
border: 1px solid rgba(46, 125, 98, 0.22);
box-shadow: 0 2px 10px rgba(30, 58, 95, 0.05);
scroll-margin-top: 0.75rem;
}
.cda-assistant__section--user-goals .cda-assistant__section-title {
color: #2e7d62;
}
.cda-assistant__goals-lead {
margin: 0 0 0.65rem;
font-size: 0.82rem;
line-height: 1.45;
color: var(--cda-muted, #5a6472);
}
.cda-assistant__goals-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.cda-assistant__goal-item {
padding: 0.55rem 0.6rem;
border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(30, 58, 95, 0.08);
}
.cda-assistant__goal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.65rem;
}
.cda-assistant__goal-body {
flex: 1;
min-width: 0;
}
.cda-assistant__goal-label {
margin: 0 0 0.2rem;
font-size: 0.88rem;
font-weight: 600;
line-height: 1.35;
color: var(--cda-navy, #1e3a5f);
}
.cda-assistant__goal-desc {
margin: 0 0 0.25rem;
font-size: 0.78rem;
line-height: 1.4;
color: var(--cda-muted, #5a6472);
}
.cda-assistant__goal-guide-btn {
flex-shrink: 0;
align-self: center;
padding: 0.35rem 0.65rem;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.2;
color: #2e7d62;
background: #fff;
border: 1px solid rgba(46, 125, 98, 0.35);
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.cda-assistant__goal-guide-btn:hover,
.cda-assistant__goal-guide-btn:focus-visible {
background: #e8f5f0;
border-color: rgba(46, 125, 98, 0.55);
outline: none;
}
.cda-assistant__goal-plan {
margin-top: 0.55rem;
padding-top: 0.55rem;
border-top: 1px dashed rgba(46, 125, 98, 0.25);
}
.cda-assistant__goal-plan--interactive {
padding: 0.65rem 0.5rem 0.75rem;
background: rgba(232, 245, 240, 0.45);
border: 1px solid rgba(46, 125, 98, 0.2);
border-radius: 10px;
}
.cda-assistant__goal-plan-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.45rem;
}
.cda-assistant__goal-plan-title {
margin: 0;
font-size: 0.82rem;
font-weight: 700;
color: #2e7d62;
}
.cda-assistant__goal-plan-progress-label {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
color: var(--cda-navy, #1e3a5f);
white-space: nowrap;
}
.cda-assistant__goal-plan-progress {
height: 6px;
margin: 0 0 0.65rem;
background: rgba(30, 58, 95, 0.1);
border-radius: 999px;
overflow: hidden;
}
.cda-assistant__goal-plan-progress-bar {
height: 100%;
background: linear-gradient(90deg, #2e7d62, #4caf7a);
border-radius: 999px;
transition: width 0.25s ease;
}
.cda-assistant__goal-plan-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cda-assistant__goal-plan-step {
padding: 0.45rem 0.5rem;
background: #fff;
border: 1px solid rgba(30, 58, 95, 0.12);
border-radius: 8px;
}
.cda-assistant__goal-plan-step.is-current,
.cda-assistant__goal-plan-step--in_progress {
border-color: rgba(46, 125, 98, 0.45);
box-shadow: 0 0 0 1px rgba(46, 125, 98, 0.12);
}
.cda-assistant__goal-plan-step--done {
opacity: 0.82;
background: rgba(232, 245, 240, 0.5);
}
.cda-assistant__goal-plan-step-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.45rem;
align-items: start;
}
.cda-assistant__goal-plan-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35rem;
height: 1.35rem;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
background: #2e7d62;
border-radius: 999px;
flex-shrink: 0;
}
.cda-assistant__goal-plan-step--done .cda-assistant__goal-plan-step-num {
background: #4caf7a;
}
.cda-assistant__goal-plan-step-title {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
color: var(--cda-navy, #1e3a5f);
}
.cda-assistant__goal-plan-step-desc {
margin: 0.15rem 0 0;
font-size: 0.72rem;
line-height: 1.35;
color: rgba(30, 58, 95, 0.75);
}
.cda-assistant__goal-plan-step-status {
font-size: 0.68rem;
font-weight: 600;
color: rgba(30, 58, 95, 0.65);
white-space: nowrap;
}
.cda-assistant__goal-plan-step--in_progress .cda-assistant__goal-plan-step-status {
color: #2e7d62;
}
.cda-assistant__goal-plan-step--done .cda-assistant__goal-plan-step-status {
color: #2e7d62;
}
.cda-assistant__goal-plan-step-actions {
margin-top: 0.4rem;
padding-left: 1.8rem;
}
.cda-assistant__goal-plan-show-btn[disabled] {
opacity: 0.55;
cursor: default;
}
.cda-assistant__goal-plan-footer {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.65rem;
}
.cda-assistant__goal-plan-resume-btn,
.cda-assistant__goal-plan-reset-btn {
padding: 0.28rem 0.55rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
}
.cda-assistant__goal-plan-resume-btn {
color: #fff;
background: #2e7d62;
border: 1px solid #2e7d62;
}
.cda-assistant__goal-plan-reset-btn {
color: var(--cda-navy, #1e3a5f);
background: #fff;
border: 1px solid rgba(30, 58, 95, 0.18);
}
.cda-assistant__section--my-journey {
margin-bottom: 0.35rem;
}
.cda-assistant__my-journey-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.65rem;
background: linear-gradient(135deg, rgba(232, 245, 240, 0.9), rgba(255, 255, 255, 0.95));
border: 1px solid rgba(46, 125, 98, 0.25);
border-radius: 10px;
}
.cda-assistant__my-journey-kicker {
margin: 0;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #2e7d62;
}
.cda-assistant__my-journey-label {
margin: 0.1rem 0 0;
font-size: 0.8rem;
font-weight: 700;
color: var(--cda-navy, #1e3a5f);
}
.cda-assistant__my-journey-progress {
margin: 0.1rem 0 0;
font-size: 0.72rem;
color: rgba(30, 58, 95, 0.7);
}
.cda-assistant__my-journey-resume {
padding: 0.35rem 0.75rem;
font-size: 0.76rem;
font-weight: 700;
color: #fff;
background: #2e7d62;
border: none;
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
}
@media (max-width: 480px) {
.cda-assistant__goal-plan-step-head {
grid-template-columns: auto 1fr;
}
.cda-assistant__goal-plan-step-status {
grid-column: 2;
justify-self: start;
margin-top: -0.1rem;
}
.cda-assistant__my-journey-banner {
flex-direction: column;
align-items: stretch;
}
.cda-assistant__my-journey-resume {
width: 100%;
text-align: center;
}
}
.cda-assistant__goal-plan-lead {
margin: 0 0 0.35rem;
font-size: 0.76rem;
font-weight: 600;
color: #2e7d62;
}
.cda-assistant__goal-actions {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.cda-assistant__goal-action-btn {
padding: 0.3rem 0.55rem;
font-size: 0.76rem;
font-weight: 600;
color: var(--cda-navy, #1e3a5f);
background: #fff;
border: 1px solid rgba(30, 58, 95, 0.18);
border-radius: 8px;
cursor: pointer;
}
.cda-assistant__goal-action-btn:hover,
.cda-assistant__goal-action-btn:focus-visible {
border-color: rgba(46, 125, 98, 0.45);
outline: none;
}
.cda-assistant__goal-links {
list-style: none;
margin: 0.35rem 0 0;
padding: 0;
}
.cda-assistant__goal-link {
font-size: 0.78rem;
font-weight: 600;
}
.cda-assistant__section--personal-discovery {
margin-bottom: 1rem;
padding: 0.85rem 0.9rem 0.95rem;
border-radius: 14px;
background: linear-gradient(145deg, var(--cda-violet-soft, #f3ecff) 0%, var(--cda-paper-warm) 48%, var(--cda-surface) 100%);
border: 1px solid rgba(107, 76, 154, 0.22);
box-shadow: 0 2px 10px rgba(30, 58, 95, 0.05);
scroll-margin-top: 0.75rem;
}
.cda-assistant__section--personal-discovery .cda-assistant__section-title {
color: var(--cda-violet-deep, #5a3d8a);
}
.cda-assistant__discovery-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.cda-assistant__discovery-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.65rem;
padding: 0.55rem 0.6rem;
border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(30, 58, 95, 0.08);
}
.cda-assistant__discovery-item-body {
flex: 1;
min-width: 0;
}
.cda-assistant__discovery-label {
margin: 0 0 0.2rem;
font-size: 0.88rem;
font-weight: 600;
line-height: 1.35;
color: var(--cda-navy, #1e3a5f);
}
.cda-assistant__discovery-desc {
margin: 0 0 0.25rem;
font-size: 0.78rem;
line-height: 1.4;
color: var(--cda-muted, #5a6472);
}
.cda-assistant__discovery-show-btn {
flex-shrink: 0;
align-self: center;
padding: 0.35rem 0.65rem;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.2;
color: var(--cda-violet-deep, #5a3d8a);
background: #fff;
border: 1px solid rgba(107, 76, 154, 0.35);
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.cda-assistant__discovery-show-btn:hover,
.cda-assistant__discovery-show-btn:focus-visible {
background: var(--cda-violet-soft, #f3ecff);
border-color: rgba(107, 76, 154, 0.55);
outline: none;
}
.cda-assistant__section--discovery .cda-assistant__section-title {
color: var(--cda-rose-deep);
}
.cda-assistant__discovery-scroll {
margin: 0;
}
.cda-assistant__discovery-scroll--enabled {
max-height: 320px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-right: 0.15rem;
scrollbar-width: thin;
scrollbar-color: rgba(232, 74, 127, 0.35) transparent;
}
.cda-assistant__discovery-scroll--enabled::-webkit-scrollbar {
width: 6px;
}
.cda-assistant__discovery-scroll--enabled::-webkit-scrollbar-thumb {
background: rgba(232, 74, 127, 0.35);
border-radius: 999px;
}
.cda-assistant__discovery-group + .cda-assistant__discovery-group {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px dashed rgba(30, 58, 95, 0.12);
}
.cda-assistant__discovery-group-title {
margin: 0 0 0.45rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--cda-navy-soft);
}
.cda-assistant__section--highlights .cda-assistant__section-title {
color: var(--cda-rose-deep);
}
.cda-assistant__highlights-lead {
margin: 0.35rem 0 0.75rem;
font-size: 0.82rem;
line-height: 1.45;
color: var(--cda-ink-muted);
}
.cda-assistant__section--highlights .cda-assistant__highlight-btn {
background: var(--cda-surface);
border-color: rgba(232, 74, 127, 0.22);
}
.cda-assistant__section--highlights .cda-assistant__highlight-btn:hover,
.cda-assistant__section--highlights .cda-assistant__highlight-btn:focus-visible {
border-color: var(--cda-rose);
background: #fff;
}
.cda-assistant__context-block + .cda-assistant__context-block {
margin-top: 1rem;
}
.cda-assistant__context-subtitle {
margin: 0 0 0.5rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--cda-navy-soft);
}
.cda-assistant__context-subtitle--premium {
margin-top: 0.85rem;
color: var(--cda-gold);
}
.cda-assistant__context-actions,
.cda-assistant__feature-list,
.cda-assistant__context-links,
.cda-assistant__warnings {
margin: 0;
padding: 0;
list-style: none;
}
.cda-assistant__context-action {
padding: 0.55rem 0.65rem;
border-radius: 10px;
background: var(--cda-paper);
border: 1px solid var(--cda-border);
}
.cda-assistant__context-action + .cda-assistant__context-action {
margin-top: 0.45rem;
}
.cda-assistant__context-action-label {
display: block;
font-size: 0.88rem;
font-weight: 700;
color: var(--cda-navy);
}
.cda-assistant__context-action-desc {
display: block;
margin-top: 0.2rem;
font-size: 0.8rem;
color: var(--cda-ink-muted);
line-height: 1.4;
} .cda-assistant__highlight-feedback {
margin: 0 0 0.55rem;
padding: 0.5rem 0.65rem;
border-radius: 8px;
font-size: 0.8rem;
line-height: 1.4;
color: var(--cda-navy);
background: var(--cda-paper-warm);
border: 1px solid var(--cda-border);
}
.cda-assistant__highlight-feedback.is-error {
color: var(--cda-ink);
background: var(--cda-coral-soft);
border-color: rgba(244, 168, 154, 0.5);
}
.cda-assistant__highlight-feedback.is-success {
background: var(--cda-blue-soft);
border-color: rgba(37, 99, 235, 0.2);
}
.cda-assistant__highlight-actions {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.45rem;
}
.cda-assistant__highlight-action {
display: grid;
gap: 0.2rem;
}
.cda-assistant__highlight-btn {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
width: 100%;
min-height: 44px;
padding: 0.55rem 0.75rem;
border: 1px solid var(--cda-border);
border-radius: 10px;
background: var(--cda-surface);
color: var(--cda-navy);
font-size: 0.84rem;
font-weight: 700;
line-height: 1.3;
text-align: left;
cursor: pointer;
transition: border-color 0.15s var(--cda-ease), box-shadow 0.15s var(--cda-ease);
}
.cda-assistant__highlight-btn:hover,
.cda-assistant__highlight-btn:focus-visible {
border-color: var(--cda-rose);
outline: none;
box-shadow: 0 0 0 2px rgba(232, 74, 127, 0.18);
}
.cda-assistant__highlight-btn-label {
flex: 1 1 auto;
}
.cda-assistant__highlight-desc {
font-size: 0.76rem;
color: var(--cda-ink-muted);
line-height: 1.35;
padding-left: 0.15rem;
}
.cda-assistant-highlight {
outline: 3px solid var(--cda-rose) !important;
outline-offset: 4px;
box-shadow: 0 0 0 6px rgba(232, 74, 127, 0.22);
scroll-margin: 1.25rem;
}
.cda-assistant-highlight--pulse {
animation: cda-assistant-highlight-pulse 1.1s ease 2;
}
@keyframes cda-assistant-highlight-pulse {
0%,
100% {
box-shadow: 0 0 0 6px rgba(232, 74, 127, 0.18);
}
50% {
box-shadow: 0 0 0 10px rgba(232, 74, 127, 0.32);
}
} .cda-assistant__guided-progress {
margin: 0 0 0.75rem;
padding: 0.65rem 0.7rem;
border-radius: 10px;
background: var(--cda-paper);
border: 1px solid var(--cda-border);
}
.cda-assistant__guided-progress-label {
margin: 0 0 0.45rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--cda-navy);
line-height: 1.35;
}
.cda-assistant__guided-progress-bar {
position: relative;
height: 0.45rem;
border-radius: var(--cda-radius-pill);
background: var(--cda-paper-warm);
border: 1px solid var(--cda-border);
overflow: hidden;
}
.cda-assistant__guided-progress-fill {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--cda-rose-deep), var(--cda-rose));
transition: width 0.35s ease;
}
.cda-assistant__guided-progress.is-complete .cda-assistant__guided-progress-fill {
background: linear-gradient(90deg, var(--cda-blue), var(--cda-violet));
}
.cda-assistant__guided-progress-complete {
margin: 0.5rem 0 0;
font-size: 0.8rem;
font-weight: 700;
color: var(--cda-blue);
line-height: 1.4;
}
.cda-assistant__guided-progress-bar:focus-visible {
outline: 2px solid var(--cda-rose);
outline-offset: 2px;
} .cda-assistant__guided-steps {
margin: 0;
padding: 0;
list-style: none;
counter-reset: cda-guided-step;
}
.cda-assistant__guided-step {
padding: 0.65rem 0.7rem;
border-radius: 10px;
background: var(--cda-paper-warm);
border: 1px solid var(--cda-border);
}
.cda-assistant__guided-step + .cda-assistant__guided-step {
margin-top: 0.5rem;
}
.cda-assistant__guided-step-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.5rem;
}
.cda-assistant__guided-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.35rem;
height: 1.35rem;
border-radius: 50%;
background: var(--cda-navy);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
}
.cda-assistant__guided-step-title {
flex: 1 1 auto;
font-size: 0.88rem;
font-weight: 700;
color: var(--cda-navy);
line-height: 1.3;
}
.cda-assistant__guided-step-hint {
flex-shrink: 0;
padding: 0.12rem 0.45rem;
border-radius: var(--cda-radius-pill);
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.cda-assistant__guided-step-hint--free {
background: var(--cda-blue-soft);
color: var(--cda-blue);
}
.cda-assistant__guided-step-hint--account {
background: var(--cda-violet-soft);
color: var(--cda-violet);
}
.cda-assistant__guided-step-hint--premium {
background: var(--cda-gold-soft);
color: var(--cda-gold);
}
.cda-assistant__guided-step-hint--editorial {
background: var(--cda-paper);
color: var(--cda-ink-muted);
border: 1px solid var(--cda-border);
}
.cda-assistant__guided-step-text {
margin: 0.45rem 0 0;
font-size: 0.8rem;
color: var(--cda-ink-muted);
line-height: 1.45;
}
.cda-assistant__guided-step-cta {
display: inline-block;
margin-top: 0.45rem;
font-size: 0.78rem;
font-weight: 700;
color: var(--cda-rose-deep);
text-decoration: none;
}
.cda-assistant__guided-step-cta:hover,
.cda-assistant__guided-step-cta:focus-visible {
text-decoration: underline;
color: var(--cda-rose);
}
.cda-assistant__guided-steps-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.cda-assistant__guided-steps-head .cda-assistant__context-subtitle {
margin-bottom: 0;
}
.cda-assistant__guided-steps-dismiss,
.cda-assistant__guided-steps-reset,
.cda-assistant__guided-step-done {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0.35rem 0.75rem;
border-radius: var(--cda-radius-pill);
border: 1px solid var(--cda-border);
background: var(--cda-surface);
color: var(--cda-navy);
font-size: 0.76rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background 0.15s var(--cda-ease), border-color 0.15s var(--cda-ease);
}
.cda-assistant__guided-steps-dismiss {
color: var(--cda-ink-muted);
font-weight: 600;
}
.cda-assistant__guided-steps-reset {
margin-top: 0.65rem;
font-size: 0.74rem;
color: var(--cda-ink-muted);
}
.cda-assistant__guided-step-done {
margin-top: 0.45rem;
}
.cda-assistant__guided-steps-dismiss:hover,
.cda-assistant__guided-steps-dismiss:focus-visible,
.cda-assistant__guided-steps-reset:hover,
.cda-assistant__guided-steps-reset:focus-visible,
.cda-assistant__guided-step-done:hover,
.cda-assistant__guided-step-done:focus-visible {
border-color: var(--cda-rose);
outline: none;
box-shadow: 0 0 0 2px rgba(232, 74, 127, 0.2);
}
.cda-assistant__guided-step.is-done {
border-color: rgba(37, 99, 235, 0.25);
background: #f8fbff;
}
.cda-assistant__guided-step-check {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.35rem;
height: 1.35rem;
border-radius: 50%;
background: var(--cda-blue);
color: #fff;
font-size: 0.75rem;
font-weight: 800;
}
.cda-assistant__guided-steps-dismissed-msg {
margin: 0;
font-size: 0.8rem;
color: var(--cda-ink-muted);
line-height: 1.45;
}
.cda-assistant__context-block--steps.is-dismissed .cda-assistant__guided-steps {
display: none;
}
.cda-assistant__feature {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.4rem 0;
font-size: 0.84rem;
color: var(--cda-ink);
}
.cda-assistant__feature-badge {
flex-shrink: 0;
padding: 0.15rem 0.45rem;
border-radius: var(--cda-radius-pill);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.cda-assistant__feature--free .cda-assistant__feature-badge {
background: var(--cda-blue-soft);
color: var(--cda-blue);
}
.cda-assistant__feature--premium .cda-assistant__feature-badge {
background: var(--cda-gold-soft);
color: var(--cda-gold);
}
.cda-assistant__feature-label {
line-height: 1.35;
}
.cda-assistant__warnings {
margin-top: 0.85rem;
}
.cda-assistant__warning {
padding: 0.55rem 0.7rem;
border-radius: 10px;
font-size: 0.8rem;
line-height: 1.4;
background: var(--cda-paper-warm);
border-left: 3px solid var(--cda-gold);
color: var(--cda-ink);
}
.cda-assistant__context-links {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.cda-assistant__context-link {
display: inline-flex;
padding: 0.35rem 0.7rem;
border-radius: var(--cda-radius-pill);
background: var(--cda-rose-soft);
color: var(--cda-rose-deep);
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
}
.cda-assistant__context-link:hover,
.cda-assistant__context-link:focus-visible {
filter: brightness(0.97);
outline: 2px solid var(--cda-focus);
outline-offset: 2px;
} @media (max-width: 768px) {
.cda-assistant__panel {
width: 100%;
max-width: 100vw;
}
}
@media (max-width: 480px) {
.cda-assistant__toggle {
padding: 0.6rem 0.95rem;
font-size: 0.86rem;
}
.cda-assistant__toggle-label {
max-width: 7.5rem;
}
.cda-assistant__header {
padding: 1rem 0.9rem 0.75rem;
}
} body.cdg-playing--active .cda-assistant__toggle {
bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + 3.75rem);
}
body.cda-assistant-open {
overflow: hidden;
} .cda-assistant__section--knowledge {
margin-top: 0.25rem;
}
.cda-assistant__knowledge-search-label {
display: block;
font-size: 0.82rem;
color: var(--cda-muted, #5f6b7a);
margin: 0.5rem 0 0.35rem;
}
.cda-assistant__knowledge-search {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--cda-border, #d8dee8);
border-radius: 10px;
padding: 0.55rem 0.75rem;
font-size: 0.92rem;
margin-bottom: 0.65rem;
}
.cda-assistant__knowledge-status {
font-size: 0.85rem;
color: var(--cda-muted, #5f6b7a);
margin: 0 0 0.5rem;
}
.cda-assistant__knowledge-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cda-assistant__knowledge-item {
border: 1px solid var(--cda-border, #e3e8ef);
border-radius: 12px;
background: #fff;
overflow: hidden;
}
.cda-assistant__knowledge-question {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
padding: 0.7rem 0.8rem;
cursor: pointer;
list-style: none;
font-weight: 600;
font-size: 0.9rem;
}
.cda-assistant__knowledge-question::-webkit-details-marker {
display: none;
}
.cda-assistant__knowledge-question-text {
flex: 1;
}
.cda-assistant__knowledge-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.35rem;
flex-shrink: 0;
}
.cda-assistant__knowledge-source {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: #6b7280;
background: #f3f4f6;
padding: 0.12rem 0.4rem;
border-radius: 999px;
}
.cda-assistant__rag-score {
font-size: 0.65rem;
font-weight: 700;
color: #6b21a8;
background: #f3e8ff;
padding: 0.12rem 0.35rem;
border-radius: 999px;
}
.cda-assistant__knowledge-hint {
flex-shrink: 0;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.15rem 0.45rem;
border-radius: 999px;
background: #eef2f7;
color: #4a5568;
}
.cda-assistant__knowledge-hint--premium {
background: #fff4df;
color: #8a5a00;
}
.cda-assistant__knowledge-hint--account {
background: #e8f4ff;
color: #1d4f91;
}
.cda-assistant__knowledge-answer {
padding: 0 0.8rem 0.75rem;
font-size: 0.88rem;
line-height: 1.45;
color: #3d4654;
}
.cda-assistant__knowledge-answer p {
margin: 0 0 0.5rem;
}
.cda-assistant__knowledge-links {
margin: 0;
padding: 0;
list-style: none;
}
.cda-assistant__knowledge-links a {
font-size: 0.86rem;
font-weight: 600;
}
@media (max-width: 480px) {
.cda-assistant__section--highlights,
.cda-assistant__section--personal-discovery,
.cda-assistant__section--user-goals {
padding: 0.75rem 0.8rem 0.85rem;
}
.cda-assistant__discovery-scroll--enabled {
max-height: 260px;
}
.cda-assistant__section--highlights .cda-assistant__highlight-btn {
min-height: 48px;
font-size: 0.88rem;
}
.cda-assistant__discovery-item {
flex-direction: column;
align-items: stretch;
}
.cda-assistant__discovery-show-btn {
align-self: flex-start;
min-height: 44px;
padding: 0.45rem 0.85rem;
}
.cda-assistant__goal-header {
flex-direction: column;
align-items: stretch;
}
.cda-assistant__goal-guide-btn {
align-self: flex-start;
min-height: 44px;
padding: 0.45rem 0.85rem;
}
}
.cda-assistant__coach-bridge {
margin: 0.75rem 0 1rem;
padding: 0.85rem 0.9rem;
border-radius: 12px;
background: linear-gradient(145deg, #eef6ff 0%, var(--cda-paper-warm) 55%, var(--cda-surface) 100%);
border: 1px solid rgba(30, 58, 95, 0.14);
}
.cda-assistant__coach-bridge-title {
margin: 0 0 0.35rem;
font-size: 0.92rem;
font-weight: 700;
color: var(--cda-navy, #1e3a5f);
}
.cda-assistant__coach-bridge-lead {
margin: 0 0 0.65rem;
font-size: 0.82rem;
line-height: 1.45;
color: var(--cda-muted, #5a6472);
}
.cda-assistant__coach-bridge-btn {
display: inline-block;
padding: 0.4rem 0.75rem;
font-size: 0.82rem;
font-weight: 600;
color: #fff;
background: var(--cda-navy, #1e3a5f);
border: none;
border-radius: 999px;
cursor: pointer;
}
.cda-assistant__coach-bridge-btn:hover,
.cda-assistant__coach-bridge-btn:focus-visible {
background: #2a4a73;
outline: none;
}
.cda-assistant__coach-bridge-btn:disabled {
opacity: 0.6;
cursor: wait;
}
.cda-assistant__coach-bridge-premium {
display: inline-block;
margin-top: 0.35rem;
padding: 0.35rem 0.7rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--cda-navy, #1e3a5f);
background: #fff;
border: 1px solid rgba(30, 58, 95, 0.22);
border-radius: 999px;
text-decoration: none;
}
.cda-assistant__coach-bridge-response {
margin-top: 0.75rem;
padding-top: 0.65rem;
border-top: 1px dashed rgba(30, 58, 95, 0.18);
font-size: 0.82rem;
line-height: 1.45;
}
.cda-assistant__coach-bridge-note {
margin: 0.5rem 0 0;
font-size: 0.76rem;
color: var(--cda-muted, #5a6472);
font-style: italic;
}
.cda-assistant__coach-bridge-error {
margin: 0;
color: #b45309;
font-weight: 600;
}
.cda-assistant__coach-bridge-resources {
margin: 0.35rem 0 0;
padding-left: 1.1rem;
}
@media (prefers-reduced-motion: reduce) {
.cda-assistant__panel,
.cda-assistant__toggle,
.cda-assistant__need-link,
.cda-news-card,
.cda-news-card__action,
.cda-assistant__highlight-btn {
transition: none;
}
.cda-assistant-highlight--pulse {
animation: none;
}
}