/* ============================================================================
   השדות של טופס ההוספה כשהחשבונית ממלאת אותם: "קורא מהחשבונית…" מעל השדה,
   ההקלדה, ההבזק הירוק, התג שליד התווית ותגיות הספק. ההצעות שמתחת לשדות
   ב-expense-ai-assist.css, לפי כלל 300 השורות.

   **כל הודעה ליד השדה שהיא עוסקת בו** (החלטת בעלים, 11.10.2026).
   **ושום מצב בצבע בלבד** (DESIGN.md): כל תג נושא מילים, והקצה הירוק או
   הכתום של השדה מלווה תמיד בתג שאומר מה הוא.
   ============================================================================ */

/* התווית והתג שלידה בשורה אחת. */
.exp-modal .exp-ai-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.exp-ai-chip {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    border-radius: 999px;
    padding: 1px 7px;
    white-space: nowrap;
    animation: expAiChipPop .35s cubic-bezier(.3, 1.5, .5, 1) both;
}

.exp-ai-chip[hidden],
.exp-ai-chip[data-wait] {
    display: none;
}

.exp-ai-chip--unsure {
    color: #92400e;
    background: #fef3c7;
}

.exp-ai-chip-ack {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: #2f4f7f;
    cursor: pointer;
    white-space: nowrap;
}

/* ── המסגרת של כל שדה, שהשכבה יושבת בה ── */
.exp-ai-field {
    position: relative;
}

.amount-with-tool > .exp-ai-field {
    flex: 1 1 180px;
    min-width: 0;
}

@media (max-width: 520px) {
    .amount-with-tool > .exp-ai-field {
        flex: 1 1 100%;
    }
}

.exp-ai-reading {
    position: absolute;
    inset: 1px;
    border-radius: 5px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-size: 12px;
    color: #2f4f7f;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.exp-ai-reading svg {
    flex-shrink: 0;
    animation: expInvTwinkle 1.2s ease-in-out infinite;
}

/* תיאור: השכבה בראש השדה, כמו הטקסט שייכתב בו. */
.exp-ai-field textarea ~ .exp-ai-reading {
    align-items: flex-start;
    padding-top: 8px;
}

.exp-ai-shimmer {
    flex: 1;
    max-width: 160px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e2e8f0 0%, #f8fafc 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    animation: expAiShimmer 1.2s linear infinite;
}

/* ההקלדה: אותו ריווח וגופן כמו השדה, ולכן הטקסט נוחת בדיוק במקומו. */
.exp-ai-reading--typing {
    background: #fff;
    color: #0f172a;
    font-size: 13px;
    padding: 0 10px;
    white-space: pre;
}

.exp-ai-field textarea ~ .exp-ai-reading--typing {
    white-space: pre-wrap;
    padding-top: 7px;
}

.exp-modal .exp-ai-hide-text {
    color: transparent !important;
    caret-color: transparent;
}

.exp-modal .exp-ai-flash {
    animation: expAiFlash .8s ease-out both;
}

/* ערך שנכנס בלי ודאות: הקצה כתום ולא ירוק, ולצד התווית "לא ודאי, בדקו". */
.exp-modal .exp-autofilled--unsure {
    border-inline-start: 3px solid #d97706 !important;
}

/* ── תגיות הספק, בתוך השדה ── */
.exp-ai-tags {
    position: absolute;
    top: 50%;
    inset-inline-end: 38px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.exp-modal .exp-ai-has-tags .combobox__input {
    padding-inline-end: 230px;
}

.exp-ai-tag-tax {
    font-size: 11.5px;
    color: #5a6779;
    white-space: nowrap;
}

.exp-ai-pill {
    font-size: 10.5px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
    animation: expAiChipPop .35s cubic-bezier(.3, 1.5, .5, 1) both;
}

.exp-ai-pill--new {
    color: #2f4f7f;
    background: #eef2f7;
}

/* במסך צר התגיות יורדות מתחת לשם, ולא דוחסות אותו. */
@media (max-width: 560px) {
    /* **מתחת למסגרת ולא בתוכה**: תגיות שמגדילות את המסגרת היו מזיזות את
       כפתור הפתיחה, שממוקם באמצע גובהה. */
    .exp-modal .exp-ai-has-tags {
        margin-bottom: 26px;
    }

    .exp-ai-tags {
        top: 100%;
        inset-inline-end: auto;
        inset-inline-start: 0;
        transform: none;
        margin-top: 5px;
    }

    .exp-modal .exp-ai-has-tags .combobox__input {
        padding-inline-end: 38px;
    }
}

@keyframes expAiChipPop {
    0% { opacity: 0; transform: scale(.6); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes expAiShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes expAiFlash {
    0% { box-shadow: 0 0 0 0 rgba(4, 120, 87, .45); background-color: rgba(16, 185, 129, .12); }
    100% { box-shadow: 0 0 0 6px rgba(4, 120, 87, 0); background-color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    .exp-ai-chip,
    .exp-ai-pill,
    .exp-ai-reading svg,
    .exp-ai-shimmer,
    .exp-modal .exp-ai-flash {
        animation: none;
    }
}

/* מספר ותאריך באותה שורה גם כשתווית אחת מהן גלשה לשתיים בגלל התג. */
.exp-modal .exp-field-pair:has(.exp-ai-label) {
    align-items: end;
}

/* **שטח לחיצה של 44 פיקסלים בטלפון** (DESIGN.md) לכפתורי הטקסט הקטנים, בלי
   לשנות את מה שרואים: שכבה שקופה סביב הכפתור. */
@media (max-width: 520px) {
    #addExpenseModal .exp-fill-undo,
    #addExpenseModal .exp-ai-chip-ack,
    #addExpenseModal .exp-ai-ack,
    #addExpenseModal .exp-ai-overwrite-keep,
    #addExpenseModal .exp-inv-or-btn {
        position: relative;
    }

    #addExpenseModal .exp-fill-undo::after,
    #addExpenseModal .exp-ai-chip-ack::after,
    #addExpenseModal .exp-ai-ack::after,
    #addExpenseModal .exp-ai-overwrite-keep::after,
    #addExpenseModal .exp-inv-or-btn::after {
        content: "";
        position: absolute;
        inset: -15px -6px;
    }
}