/* ============================================================
   الأغراض المفقودة — ما يخصّ هذه الصفحة وحدها (lost-items.js).
   المشترك (.panel/.kpi/.tbl/.quote/.cx-*) من app.css وcaptains.css.
   ============================================================ */

.li .li-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 14px; }
.li .li-bar .cx-tabs { margin: 0; }
.li .li-q { flex: 1; min-width: 220px; max-width: 420px; }

.li .li-tbl tbody tr { cursor: pointer; }
.li .li-tbl td small { display: block; margin-top: 2px; font-size: 11px; }
.li .li-tbl .li-desc { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* طلبت الدعم: أحمر وأولاً — هذا ما ينتظر الدعم الآن. */
.li .li-tbl tr.li-hot td { background: var(--crit-bg); }
.li .li-tbl tr.li-hot td:first-child { box-shadow: inset -3px 0 0 var(--crit); }

.li .li-cat { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; white-space: nowrap; }

/* ---------- صفحة البلاغ ---------- */
.li-detail .page-head .act.sm { margin-bottom: 8px; }
.li .li-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .li .li-grid { grid-template-columns: minmax(0, 1fr); } }
.li .li-main, .li .li-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.li .li-item { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.li .li-photo { width: 150px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); cursor: zoom-in; }

/* المحادثة: العميلة يميناً والكابتنة يساراً كما في التطبيق، الدعم بلون السياسات،
   ورسائل النظام في الوسط. */
.li .li-chat { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; padding: 4px 2px; }
.li .li-msg { max-width: 78%; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.li .li-msg.customer { align-self: flex-start; border-start-start-radius: 4px; }
.li .li-msg.captain { align-self: flex-end; background: var(--good-bg); border-color: var(--good-line); border-start-end-radius: 4px; }
.li .li-msg.staff { align-self: center; background: var(--cl-ops-bg); border-color: var(--cl-ops-line); }
.li .li-msg .li-who { font-size: 11px; font-weight: 800; color: var(--muted); margin-bottom: 3px; }
.li .li-msg .li-text { font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.li .li-msg small, .li .li-sys small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.li .li-sys { align-self: center; text-align: center; font-size: 12px; color: var(--muted); padding: 4px 10px; }
.li .li-sys span { background: var(--surface-2); border: 1px dashed var(--border); border-radius: 999px; padding: 3px 10px; }

.li .li-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.li .li-reply textarea { flex: 1; }

.li .li-outcome { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; font-weight: 700; }
.li .li-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; }
.li .li-meta.col { flex-direction: column; gap: 8px; margin-top: 0; }
.li .li-meta span { display: flex; flex-direction: column; gap: 2px; }
.li .li-meta small { font-size: 10.5px; }
.li .li-time { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.li .li-time li { display: flex; justify-content: space-between; gap: 10px; }