/**
 * Version: 6.9.0
 * Purpose: Core visual layer — panel, toolbar, mode switch, chat/board shell,
 *          status, sun thinking, composer, unified chrome, action buttons
 *          (icon-only → text on hover, aligned left), send/stop button.
 * Decision Log:
 *   - 6.9.0: action buttons show icon-only; label reveals on hover/focus and
 *     the group aligns to the left (flex-end in RTL).
 *   - 6.9.0: send button stop state (icon swap via .is-busy).
 * Dependencies: none
 * Impact Map: a_sun_ai_advisor_render
 * Used By: browser DOM
 * Owner: A-SUN Studio
 */
.a-sun-ai-advisor {
    --a-sun-panel: rgba(17, 18, 23, 0.82);
    --a-sun-text: #f2f3f6;
    --a-sun-muted: color-mix(in srgb, var(--a-sun-text) 68%, transparent);
    --a-sun-surface: color-mix(in srgb, var(--a-sun-text) 7%, transparent);
    --a-sun-surface-strong: color-mix(in srgb, var(--a-sun-text) 13%, transparent);
    --a-sun-field: color-mix(in srgb, var(--a-sun-text) 9%, transparent);
    --a-sun-border: color-mix(in srgb, var(--a-sun-text) 16%, transparent);
    --a-sun-glass: color-mix(in srgb, var(--a-sun-text) 4%, transparent);
    --a-sun-inset: color-mix(in srgb, var(--a-sun-text) 5%, transparent);
    --a-sun-popover: rgba(22, 23, 29, 0.97);
    --a-sun-accent: var(--color-primary, #a46497);
    --a-sun-accent2: var(--color-accent, #2d5c4d);
    --a-sun-success: #35b184;
    --a-sun-error: #e0685c;
    color: var(--a-sun-text);
    background: var(--a-sun-panel);
    backdrop-filter: blur(16px);
    border: 1px solid var(--a-sun-border);
    padding: 20px;
    font-family: var(--a-sun-font, inherit);
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
}

.a-sun-ai-advisor [hidden] {
    display: none !important;
}

/* Asymmetric radius via logical properties (§5.1) */
.a-sun-ai-advisor,
.a-sun-ai-advisor__status,
.a-sun-ai-advisor__field-inline select,
.a-sun-ai-advisor__project-trigger,
.a-sun-ai-advisor__project-option,
.a-sun-ai-advisor__mode,
.a-sun-ai-advisor__chat,
.a-sun-ai-advisor__composer,
.a-sun-ai-advisor__textarea,
.a-sun-ai-advisor__message,
.a-sun-ai-advisor__message-content pre,
.a-sun-ai-advisor__message-content code,
.a-sun-visual,
.a-sun-ai-advisor__send,
.a-sun-ai-advisor__message-actions button,
.a-sun-ai-advisor__upload-preview,
.a-sun-ai-advisor__tool-btn,
.a-sun-ai-advisor__tools-trigger,
.a-sun-ai-advisor__tools-panel,
.a-sun-ai-advisor__message-image,
.a-sun-ai-advisor__preview-image,
.a-sun-ai-advisor__project-panel,
.a-sun-ai-advisor__show-more {
    border-start-start-radius: 0;
    border-start-end-radius: 7px;
    border-end-end-radius: 0;
    border-end-start-radius: 7px;
}

/* ===================== Toolbar ===================== */
.a-sun-ai-advisor__toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

.a-sun-ai-advisor__field-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.a-sun-ai-advisor__field-label {
    font-size: 0.82rem;
    color: var(--a-sun-muted);
}

.a-sun-ai-advisor__field-inline select,
.a-sun-ai-advisor__project-trigger {
    background: var(--a-sun-field);
    border: 1px solid var(--a-sun-border);
    color: var(--a-sun-text);
    padding: 7px 12px;
    block-size: 36px;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
}

/* 6.9.0: theme-proof the project trigger so it matches the role dropdown.
   The theme repaints <button> but not <select>; !important on color props only. */
.a-sun-ai-advisor .a-sun-ai-advisor__project-trigger {
    background: var(--a-sun-field) !important;
    border: 1px solid var(--a-sun-border) !important;
    color: var(--a-sun-text) !important;
    box-shadow: none !important;
}

.a-sun-ai-advisor .a-sun-ai-advisor__project-trigger:hover {
    border-color: var(--a-sun-accent) !important;
    color: var(--a-sun-text) !important;
}

.a-sun-ai-advisor__storage-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--a-sun-text);
    font-size: 0.85rem;
}

.a-sun-ai-advisor__field-inline select:focus-visible,
.a-sun-ai-advisor__project-trigger:focus-visible,
.a-sun-ai-advisor__project-option:focus-visible,
.a-sun-ai-advisor__project-new:focus-visible,
.a-sun-ai-advisor__project-delete:focus-visible,
.a-sun-ai-advisor__textarea:focus-visible,
.a-sun-ai-advisor__send:focus-visible,
.a-sun-ai-advisor__tools-trigger:focus-visible,
.a-sun-ai-advisor__tool-btn:focus-visible,
.a-sun-ai-advisor__message-actions button:focus-visible,
.a-sun-ai-advisor__mode-btn:focus-visible {
    outline: 2px solid var(--a-sun-accent);
    outline-offset: 2px;
}

/* ===================== Mode switch ===================== */
.a-sun-ai-advisor__mode {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--a-sun-border);
    background: var(--a-sun-field);
    block-size: 36px;
    overflow: hidden;
}

.a-sun-ai-advisor .a-sun-ai-advisor__mode-btn {
    background: transparent !important;
    border: none !important;
    margin: 0;
    color: var(--a-sun-muted) !important;
    padding: 0 16px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    border-radius: 0;
    transition: color 0.2s ease, background 0.2s ease;
}

.a-sun-ai-advisor .a-sun-ai-advisor__mode-btn:hover {
    color: var(--a-sun-text) !important;
}

.a-sun-ai-advisor .a-sun-ai-advisor__mode-btn.is-active {
    background: color-mix(in srgb, var(--a-sun-accent) 18%, transparent) !important;
    color: var(--a-sun-accent) !important;
    font-weight: 600;
}

/* ===================== Project dropdown ===================== */
.a-sun-ai-advisor__project-menu {
    position: relative;
}

.a-sun-ai-advisor__project-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-inline-size: 150px;
}

.a-sun-ai-advisor__project-caret {
    font-size: 0.7rem;
    color: var(--a-sun-muted);
}

.a-sun-ai-advisor__project-panel {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    min-inline-size: 230px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--a-sun-popover);
    border: 1px solid var(--a-sun-border);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}

.a-sun-ai-advisor__project-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-block-size: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--a-sun-border) transparent;
}

.a-sun-ai-advisor .a-sun-ai-advisor__project-option {
    display: block;
    width: 100%;
    margin: 0;
    text-align: start;
    background: transparent !important;
    border: 1px dashed var(--a-sun-border) !important;
    color: var(--a-sun-text) !important;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.a-sun-ai-advisor .a-sun-ai-advisor__project-option:hover {
    border-color: var(--a-sun-accent) !important;
    color: var(--a-sun-accent) !important;
}

.a-sun-ai-advisor .a-sun-ai-advisor__project-option[aria-selected="true"] {
    border: 1px solid var(--a-sun-accent) !important;
    background: color-mix(in srgb, var(--a-sun-accent) 14%, transparent) !important;
    color: var(--a-sun-accent) !important;
    font-weight: 600;
}

.a-sun-ai-advisor__project-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--a-sun-border);
    padding-top: 8px;
}

.a-sun-ai-advisor__project-new,
.a-sun-ai-advisor__project-delete {
    flex: 1;
    background: transparent;
    border: 1px solid var(--a-sun-border);
    padding: 7px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

.a-sun-ai-advisor__project-new {
    color: var(--a-sun-success);
}

.a-sun-ai-advisor__project-new:hover {
    border-color: var(--a-sun-success);
}

.a-sun-ai-advisor__project-delete {
    color: var(--a-sun-error);
}

.a-sun-ai-advisor__project-delete:hover {
    border-color: var(--a-sun-error);
}

/* ===================== Board / messages ===================== */
.a-sun-ai-advisor__chat {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--a-sun-border);
    display: flex;
    flex-direction: column;
    background-color: var(--a-sun-inset);
    background-image: radial-gradient(color-mix(in srgb, var(--a-sun-text) 9%, transparent) 1px, transparent 1px);
    background-size: 18px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--a-sun-border) transparent;
}

.a-sun-ai-advisor__chat::-webkit-scrollbar {
    width: 6px;
}

.a-sun-ai-advisor__chat::-webkit-scrollbar-track {
    background: transparent;
}

.a-sun-ai-advisor__chat::-webkit-scrollbar-thumb {
    background: var(--a-sun-border);
    border-radius: 3px;
}

.a-sun-ai-advisor__chat::-webkit-scrollbar-thumb:hover {
    background: var(--a-sun-muted);
}

.a-sun-ai-advisor__messages {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
}

.a-sun-ai-advisor__board {
    flex: 1 1 0%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.a-sun-ai-advisor__board-empty {
    padding: 24px;
    color: var(--a-sun-muted);
    font-size: 0.9rem;
}

.a-sun-ai-advisor__dock {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-block-start: auto;
    inline-size: 90%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block: 6px 12px;
}

/* ===================== Status ===================== */
.a-sun-ai-advisor__status {
    inline-size: 50%;
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 0.85rem;
    font-weight: 350;
    color: var(--a-sun-muted);
    background: var(--a-sun-panel);
    backdrop-filter: blur(12px);
    border: 1px solid var(--a-sun-border);
    border-inline-start: 3px solid var(--a-sun-border);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.a-sun-ai-advisor__status.is-thinking {
    border-inline-start-color: var(--a-sun-accent);
    background: color-mix(in srgb, var(--a-sun-accent) 10%, transparent);
}

.a-sun-ai-advisor__status.is-done {
    border-inline-start-color: var(--a-sun-success);
    background: color-mix(in srgb, var(--a-sun-success) 10%, transparent);
}

.a-sun-ai-advisor__status.is-error {
    border-inline-start-color: var(--a-sun-error);
    background: color-mix(in srgb, var(--a-sun-error) 10%, transparent);
}

/* ===================== Composer ===================== */
.a-sun-ai-advisor__composer {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
}

.a-sun-ai-advisor__composer:focus-within {
    border-color: var(--a-sun-accent);
}

.a-sun-ai-advisor__composer-field {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.a-sun-ai-advisor__composer-field>.a-sun-ai-advisor__send {
    order: 1;
}

.a-sun-ai-advisor__composer-field>.a-sun-ai-advisor__textarea {
    order: 2;
}

.a-sun-ai-advisor__composer-field>.a-sun-ai-advisor__tools-menu {
    order: 3;
}

.a-sun-ai-advisor__textarea {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 44px;
    max-block-size: 160px;
    resize: none;
    field-sizing: content;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid var(--a-sun-border);
    color: var(--a-sun-text);
    font-size: 0.90rem;
    line-height: 1.5;
    font-family: inherit;
    outline: none;
}

/* ===================== Send / Stop button ===================== */
.a-sun-ai-advisor .a-sun-ai-advisor__send {
    inline-size: 44px;
    block-size: 44px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 1px solid var(--a-sun-border) !important;
    color: var(--a-sun-text) !important;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.a-sun-ai-advisor .a-sun-ai-advisor__send:hover {
    background: color-mix(in srgb, var(--a-sun-accent) 14%, transparent) !important;
    border-color: var(--a-sun-accent) !important;
}

/* 6.9.0: stop state — swap the send icon for the stop icon, signal danger. */
.a-sun-ai-advisor__stop-icon {
    display: none;
}

.a-sun-ai-advisor .a-sun-ai-advisor__send.is-busy {
    border-color: var(--a-sun-error) !important;
    color: var(--a-sun-error) !important;
    background: color-mix(in srgb, var(--a-sun-error) 12%, transparent) !important;
}

.a-sun-ai-advisor .a-sun-ai-advisor__send.is-busy .a-sun-ai-advisor__send-icon {
    display: none;
}

.a-sun-ai-advisor .a-sun-ai-advisor__send.is-busy .a-sun-ai-advisor__stop-icon {
    display: block;
}

.a-sun-ai-advisor .a-sun-ai-advisor__send-icon {
    inline-size: 20px;
    block-size: 20px;
    stroke: currentColor !important;
    fill: none !important;
    pointer-events: none;
}

.a-sun-ai-advisor .a-sun-ai-advisor__stop-icon {
    inline-size: 18px;
    block-size: 18px;
    fill: currentColor !important;
    pointer-events: none;
}

/* ===================== Tools menu chrome ===================== */
.a-sun-ai-advisor__tools-menu {
    position: relative;
    flex-shrink: 0;
}

.a-sun-ai-advisor .a-sun-ai-advisor__tools-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 12px;
    block-size: 44px;
    background: transparent !important;
    border: 1px dashed var(--a-sun-border) !important;
    color: var(--a-sun-text) !important;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
}

.a-sun-ai-advisor .a-sun-ai-advisor__tools-trigger:hover {
    background: color-mix(in srgb, var(--a-sun-accent) 12%, transparent) !important;
    border-color: var(--a-sun-accent) !important;
    color: var(--a-sun-accent) !important;
}

.a-sun-ai-advisor .a-sun-ai-advisor__tools-trigger[aria-expanded="true"] {
    border-style: solid !important;
    border-color: var(--a-sun-accent) !important;
    color: var(--a-sun-accent) !important;
    background: color-mix(in srgb, var(--a-sun-accent) 12%, transparent) !important;
}

.a-sun-ai-advisor .a-sun-ai-advisor__tools-trigger.is-active {
    border-style: solid !important;
    border-color: var(--a-sun-accent) !important;
    color: var(--a-sun-accent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--a-sun-accent) 55%, transparent),
        0 0 14px color-mix(in srgb, var(--a-sun-accent) 38%, transparent);
}

.a-sun-ai-advisor__tools-plus {
    display: inline-block;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.2s ease;
}

.a-sun-ai-advisor .a-sun-ai-advisor__tools-trigger[aria-expanded="true"] .a-sun-ai-advisor__tools-plus {
    transform: rotate(45deg);
}

.a-sun-ai-advisor__tools-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-end: 0;
    min-inline-size: 220px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--a-sun-popover);
    border: 1px solid var(--a-sun-border);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}

.a-sun-ai-advisor__tool-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===================== Unified tool buttons ===================== */
.a-sun-ai-advisor .a-sun-ai-advisor__tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent !important;
    border: 1px dashed var(--a-sun-border) !important;
    color: var(--a-sun-text) !important;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    text-align: start;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.a-sun-ai-advisor .a-sun-ai-advisor__tool-btn:hover {
    background: color-mix(in srgb, var(--a-sun-accent) 10%, transparent) !important;
    border-color: var(--a-sun-accent) !important;
    color: var(--a-sun-accent) !important;
}

.a-sun-ai-advisor .a-sun-ai-advisor__tool-btn.is-active {
    background: color-mix(in srgb, var(--a-sun-accent) 18%, transparent) !important;
    border: 1px solid var(--a-sun-accent) !important;
    color: var(--a-sun-accent) !important;
}

.a-sun-ai-advisor__tool-btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Upload preview */
.a-sun-ai-advisor__upload-preview {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    padding: 6px;
    background: var(--a-sun-surface);
    border: 1px solid var(--a-sun-border);
}

.a-sun-ai-advisor__preview-image {
    display: block;
    inline-size: 72px;
    block-size: 72px;
    object-fit: cover;
}

.a-sun-ai-advisor__upload-remove {
    position: absolute;
    inset-block-start: -8px;
    inset-inline-end: -8px;
    inline-size: 24px;
    block-size: 24px;
    border: 1px solid var(--a-sun-border);
    background: var(--a-sun-surface-strong);
    color: var(--a-sun-text);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
}

/* ===================== Messages ===================== */
.a-sun-ai-advisor__message {
    position: relative;
    padding: 14px 16px;
    background: var(--a-sun-surface);
    border: 1px solid var(--a-sun-border);
    line-height: 1.85;
    font-size: 0.95rem;
}

.a-sun-ai-advisor__message--user {
    border-inline-start: 3px solid var(--a-sun-accent);
    margin-inline-start: 28px;
}

.a-sun-ai-advisor__message--assistant {
    border-inline-start: 3px solid var(--a-sun-border);
    margin-inline-end: 28px;
}

.a-sun-ai-advisor__message--system {
    background: color-mix(in srgb, var(--a-sun-accent) 12%, transparent);
    border-inline-start: 3px solid var(--a-sun-accent);
    font-style: italic;
}

.a-sun-ai-advisor__message--system a {
    color: var(--a-sun-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.a-sun-ai-advisor__message--system a:hover {
    color: var(--a-sun-text);
}

.a-sun-ai-advisor__message--generated {
    background: color-mix(in srgb, var(--a-sun-accent) 8%, transparent);
    border-inline-start: 3px solid var(--a-sun-accent);
}

.a-sun-ai-advisor__message-image-wrap {
    margin-bottom: 10px;
}

.a-sun-ai-advisor__message-image {
    display: block;
    max-width: 220px;
    max-height: 220px;
    object-fit: contain;
    border: 1px solid var(--a-sun-border);
}

.a-sun-ai-advisor__message-image--generated {
    max-width: 400px;
    max-height: 400px;
}

/* 6.9.0: action buttons — icon-only, label reveals on hover/focus, aligned left. */
.a-sun-ai-advisor__message-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* left side in RTL */
}

.a-sun-ai-advisor .a-sun-ai-advisor__message-actions button {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: transparent !important;
    border: 1px solid var(--a-sun-border) !important;
    color: var(--a-sun-text) !important;
    padding: 6px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.a-sun-ai-advisor .a-sun-ai-advisor__message-actions button:hover {
    background: color-mix(in srgb, var(--a-sun-accent) 18%, transparent) !important;
    border-color: var(--a-sun-accent) !important;
    color: var(--a-sun-text) !important;
}

.a-sun-ai-advisor__message-actions button span {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    margin-inline-start: 0;
    transition: max-width 0.25s ease, opacity 0.25s ease, margin-inline-start 0.25s ease;
}

.a-sun-ai-advisor__message-actions button:hover span,
.a-sun-ai-advisor__message-actions button:focus-visible span {
    max-width: 140px;
    opacity: 1;
    margin-inline-start: 6px;
}

.a-sun-ai-advisor__btn-icon {
    inline-size: 14px;
    block-size: 14px;
    flex-shrink: 0;
}

.a-sun-ai-advisor__message-content h2,
.a-sun-ai-advisor__message-content h3 {
    margin: 14px 0 6px;
    font-weight: 700;
}

.a-sun-ai-advisor__message-content code {
    background: var(--a-sun-surface-strong);
    padding: 2px 6px;
    font-family: ui-monospace, monospace;
}

.a-sun-ai-advisor__message-content pre {
    background: var(--a-sun-surface-strong);
    padding: 14px;
    overflow-x: auto;
}

.a-sun-ai-advisor__message-content blockquote {
    border-inline-start: 3px solid var(--a-sun-accent);
    padding: 8px 12px;
    margin: 12px 0;
    color: var(--a-sun-muted);
    background: var(--a-sun-glass);
}

/* Show-more clamp for long assistant messages */
.a-sun-ai-advisor__message-content.is-clamped {
    max-height: 240px;
    overflow: hidden;
    position: relative;
}

.a-sun-ai-advisor__message-content.is-clamped:not(.is-expanded)::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to top, var(--a-sun-surface), transparent);
    pointer-events: none;
}

.a-sun-ai-advisor__message-content.is-expanded {
    max-height: none;
}

.a-sun-ai-advisor__show-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 12px;
    background: transparent;
    border: 1px dashed var(--a-sun-border);
    color: var(--a-sun-accent);
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.a-sun-ai-advisor__show-more:hover {
    background: color-mix(in srgb, var(--a-sun-accent) 12%, transparent);
    border-color: var(--a-sun-accent);
}

/* Visual block */
.a-sun-visual {
    direction: ltr;
    text-align: left;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    background: var(--a-sun-inset);
    border: 1px solid var(--a-sun-border);
    border-inline-start: 3px solid var(--a-sun-accent);
    padding: 16px;
    margin: 10px 0;
    overflow-x: auto;
    white-space: pre;
    color: var(--a-sun-text);
}

.a-sun-visual code {
    font-family: inherit;
    background: none;
    padding: 0;
    color: inherit;
}

/* ===================== Thinking indicator ===================== */
.a-sun-ai-advisor__thinking {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
}

.a-sun-ai-advisor__thinking-icon {
    inline-size: 64px;
    block-size: 64px;
}

.a-sun-think-sun {
    stroke: var(--a-sun-accent);
    stroke-width: 2.5;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: a-sun-draw-sun 3s ease-in-out infinite;
}

.a-sun-think-rays line {
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 6;
    stroke-dashoffset: 6;
    animation: a-sun-draw-ray 3s ease-in-out infinite;
}

.a-sun-think-rays line:nth-child(1),
.a-sun-think-rays line:nth-child(2),
.a-sun-think-rays line:nth-child(3),
.a-sun-think-rays line:nth-child(4) {
    stroke: var(--a-sun-accent);
}

.a-sun-think-rays line:nth-child(5),
.a-sun-think-rays line:nth-child(6),
.a-sun-think-rays line:nth-child(7),
.a-sun-think-rays line:nth-child(8) {
    stroke: var(--a-sun-accent2);
}

.a-sun-think-rays line:nth-child(1) {
    animation-delay: 0.4s;
}

.a-sun-think-rays line:nth-child(2) {
    animation-delay: 0.55s;
}

.a-sun-think-rays line:nth-child(3) {
    animation-delay: 0.7s;
}

.a-sun-think-rays line:nth-child(4) {
    animation-delay: 0.85s;
}

.a-sun-think-rays line:nth-child(5) {
    animation-delay: 1.0s;
}

.a-sun-think-rays line:nth-child(6) {
    animation-delay: 1.15s;
}

.a-sun-think-rays line:nth-child(7) {
    animation-delay: 1.3s;
}

.a-sun-think-rays line:nth-child(8) {
    animation-delay: 1.45s;
}

@keyframes a-sun-draw-sun {
    0% {
        stroke-dashoffset: 60;
        opacity: 0.3;
    }

    60%,
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes a-sun-draw-ray {
    0% {
        stroke-dashoffset: 6;
        opacity: 0.2;
    }

    60%,
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* ===================== Footer ===================== */
.a-sun-ai-advisor__footer {
    display: flex;
    justify-content: center;
    padding-top: 2px;
}

.a-sun-ai-advisor__version {
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--a-sun-text) 38%, transparent);
    letter-spacing: 0.02em;
}

/* ===================== Responsive ===================== */
@media (max-width: 1024px) {
    .a-sun-ai-advisor__toolbar {
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .a-sun-ai-advisor {
        height: auto;
        min-height: 100dvh;
    }

    .a-sun-ai-advisor__toolbar {
        gap: 10px;
    }

    .a-sun-ai-advisor__dock {
        inline-size: 94%;
    }

    .a-sun-ai-advisor__status {
        inline-size: 70%;
    }

    .a-sun-ai-advisor__message-image {
        max-width: 160px;
        max-height: 160px;
    }

    .a-sun-ai-advisor__message--user {
        margin-inline-start: 12px;
    }

    .a-sun-ai-advisor__message--assistant {
        margin-inline-end: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .a-sun-ai-advisor__status,
    .a-sun-ai-advisor__composer,
    .a-sun-ai-advisor__send,
    .a-sun-ai-advisor__tools-trigger,
    .a-sun-ai-advisor__tools-plus,
    .a-sun-ai-advisor__tool-btn,
    .a-sun-ai-advisor__show-more,
    .a-sun-ai-advisor__message-actions button,
    .a-sun-ai-advisor__message-actions button span {
        transition: none;
    }

    .a-sun-think-sun,
    .a-sun-think-rays line {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}