/* AI guide (BR Stage 1, S05; S1Chrome): clay is the AI colour, used only here and on AI scores. */
.ci-header__ai {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: var(--ci-tap);
    padding: 0 14px;
    border: 1px solid var(--ci-clay-light);
    border-radius: var(--ci-r-pill);
    background: transparent;
    color: var(--ci-paper);
    font: 600 14px/1 var(--ci-sans);
    cursor: pointer;
}
.ci-header__ai:hover { background: rgba(240, 160, 124, .15); }
@media (min-width: 1024px) { .ci-header__ai { display: inline-flex; } }

.ci-ai__fab {
    position: fixed;
    right: var(--ci-s5);
    bottom: var(--ci-s5);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    background: var(--ci-deep-forest);
    color: var(--ci-paper);
    box-shadow: 0 0 0 4px rgba(240, 160, 124, .45), var(--ci-shadow-hover);
    cursor: pointer;
}
.ci-ai__fab .ci-icon { width: 28px; height: 28px; }
.ci-ai__fab:focus-visible { outline: 3px solid var(--ci-clay-light); outline-offset: 3px; }
.ci-ai__hint {
    position: fixed;
    right: calc(var(--ci-s5) + 72px);
    bottom: calc(var(--ci-s5) + 10px);
    z-index: 1040;
    max-width: 240px;
    margin: 0;
    padding: var(--ci-s3) var(--ci-s4);
    border-radius: var(--ci-r-field);
    background: var(--ci-surface);
    color: var(--ci-ink);
    box-shadow: var(--ci-shadow-float);
    font: var(--ci-small);
}
.ci-ai__hint[hidden], .ci-ai__panel[hidden] { display: none; }

.ci-ai__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1065;
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    background: var(--ci-surface);
    color: var(--ci-ink);
    box-shadow: var(--ci-shadow-float);
    font: var(--ci-body);
}
.ci-ai__head { display: flex; align-items: center; gap: var(--ci-s2); padding: var(--ci-s3) var(--ci-s3) var(--ci-s3) var(--ci-s4); border-bottom: 1px solid var(--ci-line); }
.ci-ai__head h2 { display: flex; align-items: center; gap: 6px; margin: 0 auto 0 0; font: 600 16px/1.3 var(--ci-sans); color: var(--ci-clay-ink); }
.ci-ai__left { font: var(--ci-caption); color: var(--ci-muted); }
.ci-ai__full { font: 600 13px/1 var(--ci-sans); color: var(--ci-forest); }
.ci-ai__close { display: inline-flex; align-items: center; justify-content: center; width: var(--ci-tap); height: var(--ci-tap); border: 0; border-radius: 50%; background: transparent; color: var(--ci-ink); cursor: pointer; }
.ci-ai__body { flex: 1; overflow-y: auto; padding: var(--ci-s4); }
.ci-ai__msg { margin: 0 0 var(--ci-s3); padding: var(--ci-s3) var(--ci-s4); border-radius: var(--ci-r-field); font: var(--ci-small); overflow-wrap: anywhere; }
.ci-ai__msg--guide { background: var(--ci-clay-tint); color: var(--ci-ink); }
.ci-ai__msg--you { margin-left: var(--ci-s7); background: var(--ci-paper); white-space: pre-wrap; }
.ci-ai__msg.is-error { background: var(--ci-error-tint); color: var(--ci-error-text); }
.ci-ai__msg p { margin: 0 0 var(--ci-s2); }
.ci-ai__msg p:last-child { margin-bottom: 0; }
.ci-ai__cards { margin: var(--ci-s2) 0 0; padding-left: var(--ci-s4); }
.ci-ai__cards a { color: var(--ci-forest); font-weight: 600; }
.ci-ai__start { margin: var(--ci-s3) 0 var(--ci-s2); font: var(--ci-small); color: var(--ci-muted); }
.ci-ai__suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ci-s2); margin: 0; padding: 0; list-style: none; }
.ci-ai__suggestions button { min-height: 40px; padding: 0 14px; border: 1px solid var(--ci-clay-light); border-radius: var(--ci-r-pill); background: var(--ci-surface); color: var(--ci-clay-ink); font: 500 14px/1.2 var(--ci-sans); text-align: left; cursor: pointer; }
.ci-ai__suggestions button:hover { background: var(--ci-clay-tint); }
.ci-ai__form { display: flex; align-items: flex-end; gap: var(--ci-s2); padding: var(--ci-s3) var(--ci-s4) 0; border-top: 1px solid var(--ci-line); }
.ci-ai__form textarea { min-height: 48px; padding: var(--ci-s3); resize: none; font: var(--ci-small); }
.ci-ai__form .ci-btn { width: 48px; min-height: 48px; padding: 0; flex: none; }
.ci-ai__note { margin: var(--ci-s2) var(--ci-s4) var(--ci-s3); font: var(--ci-caption); color: var(--ci-muted); }