/* Frontend - modern WhatsApp-like chat UI for user tasks (updated) */

.ump-tasks-wrap {
    max-width:920px;
    margin:20px auto;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    color:#222;
    padding:0 12px;
}

.ump-task {
    background:#fff;
    border:1px solid #eaeaea;
    border-radius:10px;
    padding:14px;
    margin-bottom:16px;
    box-shadow: 0 2px 6px rgba(8,12,20,0.03);
}

.ump-task h3 { margin:0 0 8px; display:flex; align-items:center; gap:12px; font-size:18px; }
.ump-task-desc { color:#444; margin-bottom:10px; }

/* Card */
.ump-card { background:#fff; border-radius:10px; overflow:hidden; border:1px solid #eef2f5; }
.ump-card .card-body { padding:12px; }

/* Messages container */
.ump-messages {
    height:320px;
    overflow:auto;
    padding:14px;
    background:linear-gradient(180deg,#fbfdff,#f7fbff);
    border-radius:8px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* Chat bubble */
.ump-msg { max-width:78%; display:flex; flex-direction:column; word-break:break-word; }
.ump-msg .ump-bubble{ padding:10px 12px; border-radius:18px; display:inline-block; }
.ump-msg.user { align-self:flex-end; }
.ump-msg.user .ump-bubble { background:#dcf8c6; border-bottom-right-radius:6px; color:#071; }
.ump-msg.admin { align-self:flex-start; }
.ump-msg.admin .ump-bubble { background:#fff; border:1px solid #e6e6e6; color:#111; }
.ump-msg.system { align-self:center; }
.ump-msg.system .ump-bubble { background:transparent; color:#666; font-style:italic; padding:6px; }

/* message meta */
.ump-msg .time { display:block; font-size:11px; color:#6b7280; margin-top:6px; text-align:right; }

/* file preview */
.ump-msg img { max-width:260px; border-radius:8px; display:block; margin-top:8px; border:1px solid #e6e6e6; }

/* composer */
.ump-composer {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 12px;
	flex-wrap: wrap;
}
.ump-composer textarea { flex:1; min-height:48px; padding:10px 12px; border-radius:12px; border:1px solid #ddd; resize:vertical; }
.ump-composer input[type="file"]{ min-width:120px; }
.ump-composer button { background:#0073aa; color:#fff; border:0; padding:8px 12px; border-radius:10px; }

/* attachments area */
.ump-task-files { margin-top:12px; }

/* responsiveness */
@media (max-width:720px) {
    .ump-messages { height:260px; }
    .ump-msg { max-width:92%; }
    .ump-composer input[type="file"]{ display:none; }
}