/* ============================================================
   Woopets AI — Photos dans le chat (plan-photos-chat.md, Lot 1)
   Bouton composer + chip de prévisualisation + pièces jointes
   dans les bulles user. Pas de fallback var(--c-x, #hex) (règle
   CLAUDE.md — demo-core.css est garanti chargé avant).
   ============================================================ */

/* --- Bouton 📷 dans la barre outils du composer --- */
.chat-photo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--c-border);
    border-radius: 9999px;
    background: var(--c-bg-card);
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chat-photo-btn:hover {
    background: var(--c-primary-light);
    color: var(--c-primary);
    border-color: var(--c-primary-soft);
}
.chat-photo-btn:focus-visible {
    outline: 2px solid var(--c-primary-soft);
    outline-offset: 2px;
}
.chat-photo-btn[hidden] { display: none; }

/* --- Chip de prévisualisation (au-dessus du textarea) --- */
.chat-photo-chip-row {
    width: 100%;               /* force sa propre ligne dans .input-wrapper (flex-wrap) */
    padding: 4px 2px 0;
}
.chat-photo-chip-row[hidden] { display: none; }

.chat-photo-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(360px, 100%);
    padding: 6px 8px;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-bg-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.chat-photo-chip.is-error {
    border-color: var(--c-danger);
    background: #fef2f2; /* même fond d'erreur que demo-chat.css (idiome existant) */
}

.chat-photo-chip-thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
    background: var(--c-bg-warm);
}
.chat-photo-chip-doc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.chat-photo-chip-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.chat-photo-chip-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.chat-photo-chip-state {
    font-size: 11px;
    color: var(--c-text-muted);
}
.chat-photo-chip-state.is-ok { color: var(--c-success); }
.chat-photo-chip-state.is-error { color: var(--c-danger); }

.chat-photo-chip-bar {
    display: block;
    width: 120px;
    height: 4px;
    border-radius: 9999px;
    background: var(--c-border-light);
    overflow: hidden;
}
.chat-photo-chip-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 9999px;
    background: var(--c-primary-soft);
    /* pas de transition width (layout thrash) — la progression XHR met à jour
       assez souvent pour être fluide sans animation */
}

.chat-photo-chip-remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--c-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.chat-photo-chip-remove:hover {
    background: var(--c-bg-warm);
    color: var(--c-text);
}

/* --- Pièces jointes dans les bulles user (live + reload) --- */
.chat-photo-attachments {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 6px;
}
.chat-message.user .chat-photo-attachments { margin-left: auto; }

.chat-photo-img {
    max-width: min(240px, 60vw);
    max-height: 240px;
    border-radius: 12px;
    border: 1px solid var(--c-border);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
    cursor: zoom-in;
    object-fit: cover;
}

.chat-photo-doc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-bg-card);
    color: var(--c-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    max-width: min(280px, 70vw);
}
.chat-photo-doc:hover { border-color: var(--c-primary-soft); }
.chat-photo-doc-ico { font-size: 18px; }
.chat-photo-doc span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Card « Ajouter à l'album » (Lot 2) --- */
/* Piège largeur documenté : .chat-bubble.agent est shrink-to-fit → largeur
   explicite obligatoire sur toute card rendue dans une bulle agent. */
.chat-album-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: min(720px, calc(100vw - 48px));
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    background: var(--c-bg-card);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}
/* Piège scintillement streaming documenté : pas d'animation d'entrée pendant le stream. */
.chat-bubble.agent.streaming .chat-album-card { animation: none !important; }

.chat-album-card-thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 12px;
    object-fit: cover;
    background: var(--c-bg-warm);
}

.chat-album-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}
.chat-album-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
}
.chat-album-card-sub {
    font-size: 13px;
    color: var(--c-text-muted);
}
.chat-album-card-sub.is-strong {
    color: var(--c-text);
    font-weight: 600;
}
.chat-album-card-which {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-text-secondary);
}
.chat-album-select {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg-card);
    color: var(--c-text);
}
.chat-album-profile {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-text-secondary);
    cursor: pointer;
}
.chat-album-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.chat-album-btn {
    padding: 8px 14px;
    min-height: 36px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid var(--c-border);
    background: var(--c-bg-card);
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chat-album-btn:hover {
    border-color: var(--c-primary-soft);
    color: var(--c-primary);
}
.chat-album-btn.is-primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-inverse);
}
.chat-album-btn.is-primary:hover {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
    color: var(--c-text-inverse);
}
.chat-album-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.chat-album-card-done {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-success);
}
.chat-album-card-done.is-muted {
    color: var(--c-text-muted);
    font-weight: 500;
}

/* --- Card « Ajouter au Carnet de Vie » (Lot 3) --- */
.chat-health-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: min(720px, calc(100vw - 48px));
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    background: var(--c-bg-card);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}
.chat-bubble.agent.streaming .chat-health-card { animation: none !important; }

.chat-health-card-doc {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.chat-health-urgency {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}
.chat-health-urgency.is-emergency {
    background: #fef2f2; /* même fond d'erreur que demo-chat.css */
    border: 1px solid var(--c-danger);
    color: var(--c-danger);
}
.chat-health-urgency.is-warn {
    background: var(--c-accent-light);
    border: 1px solid var(--c-accent);
    color: var(--c-text);
}

.chat-health-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-health-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--c-text-muted);
}
.chat-health-input {
    padding: 8px 10px;
    font-size: 16px; /* anti-zoom iOS (règle CLAUDE.md : inputs ≥ 16px) */
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg-card);
    color: var(--c-text);
    width: 100%;
    box-sizing: border-box;
}
/* La date n'a pas besoin de toute la largeur (input date à largeur intrinsèque) */
.chat-health-input[type="date"] {
    width: auto;
    max-width: 200px;
    align-self: flex-start;
}

/* Tactile : cible ≥ 44px pour la croix de suppression + boutons de card */
@media (hover: none) and (pointer: coarse) {
    .chat-photo-chip-remove { width: 34px; height: 34px; }
    .chat-album-btn { min-height: 44px; }
}