body{

font-family:Arial;

background:#f1f5f9;

}


.container{

width:90%;

max-width:400px;

margin:40px auto;

text-align:center;

}


.card{

background:white;

padding:20px;

border-radius:15px;

margin-bottom:20px;

}


.status-text{

margin-top:10px;

font-size:0.9em;

color:#555;

}


input{

width:90%;

padding:12px;

}


button{

margin-top:10px;

padding:12px 25px;

background:#0066cc;

color:white;

border:0;

border-radius:10px;

}


#answer{

margin-top:20px;

padding:15px;

background:#eef6ff;

text-align:left;

}


#crmInfo{

margin-top:15px;

text-align:left;

font-size:0.95em;

}


/* PHASE 2 (AVA PILOT V1) - mobile-first: nut to, it thao tac, khong
   animation/trang tri thua. */

.navbar{

display:flex;

flex-wrap:wrap;

gap:8px;

justify-content:center;

margin-bottom:20px;

}


.navBtn{

margin-top:0;

padding:12px 14px;

font-size:0.9em;

background:#0066cc;

color:white;

border:0;

border-radius:10px;

flex:1 1 auto;

min-width:100px;

}


textarea{

width:90%;

padding:12px;

font-family:Arial;

margin-top:10px;

}


.listItem{

background:#f8fafc;

border:1px solid #e2e8f0;

border-radius:10px;

padding:12px;

margin-top:10px;

text-align:left;

cursor:pointer;

}


.listItem:active{

background:#eef6ff;

}


/* AUDIO/UI FIX - lich su transcript Voice Live (nguoi dung + AVA).
   max-height + overflow-y:auto de cuon rieng ben trong khung nay, KHONG
   de tran/de mat chu tren man hinh mobile (khac voi #voiceLiveStatus/
   #voiceLiveError - van la 1 dong trang thai don, khong doi). */

.voice-transcript{

margin-top:10px;

max-height:180px;

overflow-y:auto;

text-align:left;

font-size:0.9em;

background:#f8fafc;

border:1px solid #e2e8f0;

border-radius:10px;

padding:8px 12px;

}


.voice-transcript:empty{

display:none;

}


.voice-transcript-line{

padding:4px 0;

border-bottom:1px solid #e2e8f0;

}


.voice-transcript-line:last-child{

border-bottom:0;

}


/* FIELD VIDEO (Field Workflow A MVP) - video/cover phai vua man hinh
   dien thoai, khong tran ra ngoai .container (max-width:400px). */

.field-media{

width:100%;

border-radius:10px;

margin-top:10px;

}


/* PS4A - luoi preview anh da chon (client-side, khong upload len server
   khi chi xem preview - dung URL.createObjectURL, giai phong khi trang
   dong lai). */

.field-preview-grid{

display:flex;

flex-wrap:wrap;

gap:6px;

margin-top:8px;

}


.field-preview-thumb{

width:70px;

height:70px;

object-fit:cover;

border-radius:8px;

border:1px solid #e2e8f0;

display:block;

}


/* PS4B - moi anh preview la 1 "item" co the xoa rieng le, KHONG anh
   huong cac anh khac (xem app.js::removeFieldImage()). */

.field-preview-item{

position:relative;

width:70px;

height:70px;

}


.field-preview-remove{

position:absolute;

top:-6px;

right:-6px;

width:22px;

height:22px;

padding:0;

margin:0;

border-radius:50%;

background:#dc2626;

color:white;

font-size:0.75em;

line-height:22px;

text-align:center;

border:2px solid white;

}


button:disabled{

background:#94a3b8;

opacity:0.7;

}


/* PS5.2 NHIEM VU 5 - reorder (nut ◀▶ duoi tung thumbnail) + "Xóa tất
   cả" (nut phu, mau nhat hon nut chinh de tranh bam nham). */

.field-secondary-btn{

margin-top:10px;

padding:10px 16px;

background:#e2e8f0;

color:#334155;

border:0;

border-radius:10px;

font-size:0.85em;

}


.field-preview-move-bar{

display:flex;

align-items:center;

justify-content:center;

gap:4px;

margin-top:4px;

}


.field-preview-move-btn{

margin-top:0;

padding:2px 6px;

font-size:0.7em;

background:#64748b;

color:white;

border:0;

border-radius:6px;

min-width:22px;

}


.field-preview-order-label{

font-size:0.7em;

color:#64748b;

min-width:14px;

text-align:center;

}


/* PS5.2 NHIEM VU 5 - loading/progress: thanh animation vo dinh
   (indeterminate) - CHI hien trong luc goi API tao video that. */

.field-loading-bar{

margin-top:10px;

height:6px;

background:#e2e8f0;

border-radius:4px;

overflow:hidden;

}


.field-loading-bar-fill{

height:100%;

width:40%;

background:#0066cc;

border-radius:4px;

animation:field-loading-slide 1.1s ease-in-out infinite;

}


@keyframes field-loading-slide{

0%{ margin-left:-40%; }

100%{ margin-left:100%; }

}


/* PS5.2 NHIEM VU 5 - error state: phan biet ro bang mau (khong chi dua
   vao emoji trong text) - ap dung cho #fieldStatus khi co loi/canh bao. */

.field-error{

color:#dc2626;

font-weight:bold;

}