/* Project Build chat + typing indicator (extracted from main.css) */

/* --- Ideavibes AI chat --- */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    height: 42px;
}

.chat-title {
    font-size: 14px;
    font-weight: 600;
}

.chat-participants {
    display: flex;
    align-items: center;
    gap: 0;
}

.chat-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-left: -4px;
    border: 2px solid var(--bg-primary);
}

.chat-avatar:first-child { margin-left: 0; }
.chat-avatar.ai { background: var(--accent); }
.chat-avatar.user { background: linear-gradient(135deg, var(--accent), #8b5cf6); }

.chat-transcript-shell {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.chat-jump-latest {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 4px 16px rgba(15, 18, 25, 0.16);
    transform: translateX(-50%);
    cursor: pointer;
}

.chat-jump-latest:hover {
    background: var(--bg-hover);
    box-shadow: 0 6px 18px rgba(15, 18, 25, 0.2);
}

.chat-jump-latest:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.chat-messages {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Shared Design / Build / Replay outer message frame. Radius, max-width,
   alignment, and spacing live here once; markdown / confirm / replay
   internals stay on the existing surface classes. */
.wb-msg {
    width: fit-content;
    max-width: var(--msg-max-width);
    min-width: 0;
    box-sizing: border-box;
}

.wb-msg.user {
    align-self: flex-end;
    margin-left: auto;
    padding: var(--msg-user-padding);
    border-radius: var(--msg-user-radius);
}

.wb-msg.assistant {
    align-self: flex-start;
    padding: 0;
    border-radius: 0;
}

.wb-msg.ai {
    align-self: flex-start;
    /* do not zero padding — .chat-bubble supplies boxed chrome */
}

.chat-bubble {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    width: fit-content;
    max-width: var(--msg-max-width);
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    margin-bottom: 10px;
}

.chat-bubble:last-child {
    margin-bottom: 0;
}

.chat-bubble.ai {
    align-self: flex-start;
    border-left: 3px solid var(--accent);
}

.chat-bubble.user {
    width: fit-content;
    max-width: var(--msg-max-width);
    align-self: flex-end;
    margin-left: auto;
    background: var(--msg-user-bg);
    border-color: var(--msg-user-border);
    color: var(--msg-user-fg);
}

.chat-bubble-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-avatar-sm {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.chat-avatar-sm.ai { background: var(--accent); }
.chat-avatar-sm.user { background: linear-gradient(135deg, var(--accent), #8b5cf6); }

.chat-sender {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-time {
    font-size: 14px;
    color: var(--text-muted);
    margin-left: auto;
}

.chat-bubble-content {
    min-width: 0;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.6;
    color: var(--msg-ai-fg);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-bubble.user .chat-bubble-content {
    color: var(--msg-user-fg);
}

.chat-bubble.ai .chat-bubble-content {
    color: var(--msg-ai-fg);
}

.chat-bubble-content > div {
    min-width: 0;
    max-width: 100%;
}

/* Markdown rendering inside chat bubbles */
.chat-bubble-content ol,
.chat-bubble-content ul {
    margin: 8px 0;
    padding-left: 24px;
}

.chat-bubble-content ol {
    list-style-type: decimal;
}

.chat-bubble-content ul {
    list-style-type: disc;
}

.chat-bubble-content li {
    margin-bottom: 4px;
    padding-left: 4px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-bubble-content p {
    margin: 6px 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-bubble-content p:first-child {
    margin-top: 0;
}

.chat-bubble-content p:last-child {
    margin-bottom: 0;
}

.chat-bubble-content code {
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-bubble-content pre {
    background: var(--bg-tertiary);
    max-width: 100%;
    max-height: 180px;
    padding: 10px 12px;
    border-radius: 6px;
    overflow: auto;
    margin: 8px 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-bubble-content pre code {
    background: none;
    padding: 0;
}

.chat-bubble-content blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 12px;
    margin: 8px 0;
    color: var(--msg-ai-muted);
}

.chat-bubble-content strong {
    color: inherit;
    font-weight: 650;
}

.chat-bubble.ai .chat-bubble-content strong {
    color: var(--msg-ai-fg);
}

.chat-bubble.user .chat-bubble-content strong {
    color: var(--msg-user-fg);
}

/* Links sit on muted body text, so give them a resting affordance
   (accent + underline) instead of relying on hover to reveal them. */
.chat-bubble-content a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-bubble-content a:hover {
    color: var(--accent-hover);
}

.chat-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.chat-badge {
    font-size: 14px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(113, 113, 122, 0.15);
    color: var(--text-muted);
}

.chat-badge.success {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.chat-badge.active {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

/* Chat input */
.chat-input-area {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-file-input {
    display: none;
}

.chat-attach-btn,
.goal-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: border-color var(--transition-speed), color var(--transition-speed);
}

.chat-attach-btn {
    width: 36px;
    padding: 0;
}

.chat-attach-btn:hover,
.goal-attach-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Shared “+” attachment menu (Design + Build) ── */
.attachment-add-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Stay above prompt chrome; menu itself is position:fixed so it is not
       clipped by .chat-prompt-box { overflow: hidden }. */
    z-index: 20;
}

.attachment-add-dismiss {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.attachment-add-button.open {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.attachment-add-menu {
    /* Viewport-fixed so parent overflow (prompt box) cannot clip it. */
    position: fixed;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    max-width: min(280px, calc(100vw - 16px));
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-primary);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

.attachment-add-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.attachment-add-item:hover:not(:disabled) {
    background: var(--bg-hover);
}

.attachment-add-item:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.attachment-add-item-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--border));
    color: var(--text-secondary);
}

.attachment-add-item-icon svg {
    display: block;
}

.attachment-add-item:hover:not(:disabled) .attachment-add-item-icon {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary));
}

.attachment-add-item-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.attachment-add-item-copy strong {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
}

.attachment-add-item-copy > span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.chat-image-preview-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0 16px 8px;
    padding: 0 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: none;
    scrollbar-width: thin;
}

.chat-doc-preview-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0 16px 8px;
    padding: 0 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.wizard-image-preview-row {
    padding: 8px 0 0;
}

.chat-image-preview {
    position: relative;
    width: 72px;
    height: 72px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.chat-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-image-preview button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
    font-size: 16px;
    line-height: 1;
}

/* Legacy class kept for wizard/other embeds; Build composer uses .composer-notice. */
.chat-image-error {
    padding: 0 16px 10px;
    color: var(--danger);
    font-size: 14px;
}

.wizard-image-error {
    padding: 8px 0 0;
}

.goal-image-actions {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.chat-image-grid {
    /* auto-fill + 1fr reserved empty columns for the bubble's full width
       (1 image still looked like a 4-slot row). Size to content instead. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 120px));
    width: fit-content;
    max-width: 100%;
    gap: 8px;
    margin-bottom: 8px;
}

/* --- Document attachments (.txt/.md) --- */
/* .chat-doc-preview-row layout: see strip styles above (above the composer). */

.wizard-doc-preview-row {
    padding: 8px 0 0;
}

.chat-doc-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 240px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    font-size: 14px;
}

.chat-doc-preview .chat-doc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-doc-preview .chat-doc-size {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.chat-doc-preview button {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

.chat-doc-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.chat-doc-attachment {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.chat-doc-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
}

.chat-doc-chip .chat-doc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-doc-chip .chat-doc-size {
    margin-left: auto;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.chat-doc-body {
    margin: 0;
    max-height: 320px;
    overflow: auto;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-doc-loading,
.chat-doc-load-error {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.chat-doc-load-error {
    color: #ef4444;
}

.chat-image-link {
    display: block;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.chat-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-image-loading,
.chat-image-load-error {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 14px;
}

.chat-image-load-error {
    color: #ef4444;
}

button.chat-image-retry {
    width: 100%;
    cursor: pointer;
    font: inherit;
    border-style: solid;
}

button.chat-image-retry:hover {
    color: color-mix(in srgb, #ef4444 80%, var(--text-primary));
    border-color: color-mix(in srgb, #ef4444 35%, var(--border));
}

.chat-input {
    flex: 1;
    min-height: 44px;
    max-height: 120px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.45;
    outline: none;
    resize: none;
    overflow-y: auto;
    field-sizing: content;
    transition: border-color var(--transition-speed);
}

.chat-input::placeholder {
    color: var(--text-muted);
}

.chat-input:focus {
    border-color: var(--accent);
}

.chat-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background var(--transition-speed);
}

.chat-send-btn:hover {
    background: var(--accent-hover);
}

/* Plan list in chat */
.chat-plan-list {
    margin: 8px 0 6px 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    counter-reset: plan-step;
}

.chat-plan-item {
    counter-increment: plan-step;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    position: relative;
    padding-left: 30px;
}

.chat-plan-item::before {
    content: counter(plan-step);
    position: absolute;
    left: 8px;
    top: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-plan-title {
    font-weight: 600;
    color: var(--text-primary);
}

.chat-plan-detail {
    color: var(--text-muted);
}

.chat-plan-summary {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* Confirm plan bubble */
.chat-bubble.confirm-plan {
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.06);
}

.chat-bubble.interim {
    border-color: rgba(59, 130, 246, 0.28);
    border-left: 3px solid var(--accent);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.04));
}

.chat-confirm-action {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.chat-confirm-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.btn-confirm-plan {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all var(--transition-speed);
    background: var(--success);
    color: #fff;
}

.btn-confirm-plan:disabled {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
    cursor: default;
}

/* Confirmed user bubble */
.chat-bubble.confirmed {
    border: 1px solid rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.06);
}

/* Project / Build conversation - ChatGPT-style reading surface. Keep the
   actionable confirmation controls, but remove decorative avatars and large
   assistant cards so the design-to-build handoff reads as one conversation.
 */
.project-chat-panel .chat-messages {
    gap: 0;
    /* Match Design: keep top clearance outside the scrollport so messages
       clip below the panel edge instead of scrolling through padding. */
    margin-top: 16px;
    padding: 12px 18px 12px;
}

.project-chat-panel .chat-thread {
    display: flex;
    width: var(--msg-thread-max-width);
    margin: 0 auto;
    flex-direction: column;
    gap: var(--msg-thread-gap);
}

.project-chat-panel .chat-bubble {
    margin-bottom: 0;
    gap: 4px;
    border: 0;
    background: transparent;
}

.project-chat-panel .chat-bubble.ai,
.project-chat-panel .chat-bubble.ai.confirm-plan,
.project-chat-panel .chat-bubble.ai.interim {
    border: 0;
    background: transparent;
}

/* The analysis start and completion rows form one compact progress block.
   Offset the normal thread gap only after the completion row exists. While
   analysis is still running, the start row keeps its full height so the
   out-of-thread typing indicator cannot overlap it. */
.project-chat-panel .chat-bubble.ai.interim.analysis-started:has(~ .analysis-completed) {
    margin-bottom: calc(6px - var(--msg-thread-gap));
}

.project-chat-panel .chat-bubble.user {
    justify-content: center;
    border: 1px solid var(--msg-user-border);
    background: var(--msg-user-bg);
    color: var(--msg-user-fg);
}

.project-chat-panel .chat-bubble.user.confirmed {
    border: 1px solid rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.06);
    color: var(--msg-user-fg);
}

.project-chat-panel .chat-bubble.ai .chat-bubble-content {
    color: var(--msg-ai-fg);
}

.project-chat-panel .chat-bubble.user .chat-bubble-content {
    color: var(--msg-user-fg);
}

.project-chat-panel .chat-bubble-header {
    margin-bottom: 2px;
}

.project-chat-panel .chat-avatar,
.project-chat-panel .chat-avatar-sm,
.project-chat-panel .chat-participants {
    display: none;
}

.project-chat-panel .chat-sender {
    font-size: 14px;
}

.project-chat-panel .chat-bubble-content {
    font-size: 15px;
    line-height: 1.7;
}

/* Same width + centering as `.chat-thread` so label left edge matches AI replies. */
.project-chat-panel .chat-typing {
    width: var(--msg-thread-max-width);
    margin: 0 auto;
    padding: 8px 0;
    box-sizing: border-box;
    align-self: center;
}

/* `.design-messages` is already the thread column. */
.design-messages > .chat-typing {
    width: 100%;
}

/* Inside a bubble the thread-width rule would overflow the message. */
.project-chat-panel .chat-bubble .chat-typing {
    width: auto;
    max-width: 100%;
    margin: 8px 0 0;
    padding: 0;
    align-self: flex-start;
}

/* Let floating notices/slash paint over the message list without clipping. */
.project-chat-panel {
    overflow: visible;
}

.project-chat-panel .chat-transcript-shell {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.project-chat-panel .chat-transcript-shell .chat-messages {
    flex: 1;
    min-height: 0;
}

/* Composer shell: width/margin; floating notices use .composer-notice-stack. */
.chat-composer-shell {
    position: relative;
    flex-shrink: 0;
    min-width: 0;
    overflow: visible;
    z-index: 5;
}

.project-chat-panel .chat-composer-shell {
    width: var(--composer-shell-width);
    margin: 8px auto 20px;
}

/* Shared live chrome (Idea home + session + Build): grid overlay + pill shell. */
.chat-composer-shell .chat-input-area,
.project-chat-panel .chat-input-area {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
}

.chat-composer-shell .chat-prompt-box,
.project-chat-panel .chat-prompt-box {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    /* Clip rectangular textarea/browser focus rings inside the pill. */
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--composer-pill-radius);
    background: var(--bg-primary);
    box-shadow: var(--composer-pill-shadow);
    transition: border-color 150ms, box-shadow 150ms;
}

/* Match Design/home soft focus (no hard square outline on the control itself). */
.chat-composer-shell .chat-prompt-box:focus-within,
.project-chat-panel .chat-prompt-box:focus-within {
    border-color: color-mix(in srgb, var(--accent) 68%, var(--border));
    box-shadow: var(--composer-pill-shadow-focus);
}

.chat-composer-shell .chat-prompt-box .chat-input,
.project-chat-panel .chat-prompt-box .chat-input {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-height: var(--composer-min-height);
    max-height: 150px;
    padding: 14px 50px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    box-shadow: none;
    resize: none;
    /* Avoid UA rectangular focus ring inside the pill. */
    -webkit-tap-highlight-color: transparent;
}

.chat-composer-shell .chat-prompt-box .chat-input:focus,
.chat-composer-shell .chat-prompt-box .chat-input:focus-visible,
.project-chat-panel .chat-prompt-box .chat-input:focus,
.project-chat-panel .chat-prompt-box .chat-input:focus-visible {
    border: 0;
    border-color: transparent;
    outline: none;
    box-shadow: none;
}

.chat-composer-shell .chat-prompt-box .attachment-add-control,
.chat-composer-shell .chat-prompt-box > .chat-attach-btn,
.project-chat-panel .chat-prompt-box .attachment-add-control,
.project-chat-panel .chat-prompt-box > .chat-attach-btn {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    z-index: 2;
}

.chat-composer-shell .chat-prompt-box .chat-attach-btn,
.project-chat-panel .chat-prompt-box .chat-attach-btn {
    width: var(--composer-attach-size);
    min-width: var(--composer-attach-size);
    height: var(--composer-attach-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
}

.chat-composer-shell .chat-prompt-box .chat-attach-btn:hover:not(:disabled),
.project-chat-panel .chat-prompt-box .chat-attach-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: transparent;
}

.chat-composer-shell .chat-prompt-box .chat-send-btn,
.project-chat-panel .chat-prompt-box .chat-send-btn {
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    z-index: 2;
    width: var(--composer-control-size);
    min-width: var(--composer-control-size);
    height: var(--composer-control-size);
    border-radius: 50%;
}

/* Narrow viewports: keep thread + composer inside the panel (no page-level
   horizontal scroll). Bubble width still uses --msg-max-width (80%). */
@media (max-width: 1024px) {
    .project-chat-panel .chat-messages {
        margin-top: 12px;
        padding: 10px 14px 10px;
    }

    .project-chat-panel .chat-composer-shell {
        width: min(var(--composer-max-width), calc(100% - 24px));
    }

    .project-chat-panel .chat-thread,
    .project-chat-panel .chat-typing {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    .project-chat-panel .chat-messages {
        margin-top: 8px;
        padding: 8px 10px 8px;
    }

    .project-chat-panel .chat-composer-shell {
        width: calc(100% - 16px);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 12px;
    }

    .project-chat-panel .chat-thread,
    .project-chat-panel .chat-typing {
        width: 100%;
    }

    .wb-msg,
    .chat-bubble,
    .project-chat-panel .chat-bubble,
    .project-chat-panel .chat-bubble.user,
    .project-chat-panel .chat-bubble.ai {
        max-width: var(--msg-max-width);
    }

    .chat-bubble-content {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}


/* --- Chat typing indicator --- */
/* Option A: plain bold label + bouncing dots (docs/qa/chat-typing-indicator-options.html). */

.chat-typing {
    /* block-level flex so width + margin:auto can match the AI thread column */
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 0;
}

.chat-typing-label {
    color: var(--chat-typing-label);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.chat-typing--note .chat-typing-label,
.chat-typing--note .chat-typing-label em {
    font-weight: 400;
    font-style: italic;
}

.typing-dots {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.typing-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chat-typing-dot);
    animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dots .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .typing-dots .dot {
        animation: none;
        opacity: 0.7;
    }
}


/*
 * Archived Build conversation. The composer is replaced rather than disabled:
 * archiving is an indefinite state the user chose, so a greyed-out input would
 * keep offering a reply that only an explicit Restore can make possible.
 * Occupies the composer's place so the page stays anchored at the bottom.
 */
.chat-composer-shell.is-hidden {
    display: none;
}

.chat-archived-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
}

.chat-archived-bar__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--text-secondary);
}

.chat-archived-bar__text {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.chat-archived-bar__text span {
    color: var(--text-secondary);
}

.chat-archived-bar__action {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-speed), border-color var(--transition-speed);
}

.chat-archived-bar__action:hover:not(:disabled) {
    background: var(--bg-tertiary);
}

.chat-archived-bar__action:disabled {
    opacity: 0.6;
    cursor: default;
}

.chat-archived-bar__error {
    box-sizing: border-box;
    width: 100%;
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
    background: color-mix(in srgb, var(--danger) 12%, var(--bg-secondary));
    color: color-mix(in srgb, var(--danger) 72%, var(--text-primary));
    font-size: 13px;
    line-height: 1.45;
}