/* --- CSS FOR SCRIPT 3: CHAT/TICKET SYSTEM UI --- */
:root{--bg:#f5f7fb;--panel:#ffffff;--me:#6f62ff;--me-soft:#edeaff;--other:#0ea5e9;--other-soft:#eaf7ff;--text:#1f2937;--muted:#6b7280;--bd:rgba(17,24,39,.08);--r:18px}
.ticket-dialog .row>.col{padding:0}
.ticket-dialog__title{display:none!important}
.ticket-dialog__body{background:var(--bg);padding:0}
.ticket-dialog__body .component_ticket_messages{max-width:980px;margin:0 auto;padding:20px 20px 8px;min-height:40vh;display:flex;flex-direction:column;gap:28px}
.ticket-dialog__row{display:flex;align-items:flex-end;gap:10px}
.ticket-dialog__row-user{justify-content:flex-start}
.ticket-dialog__row-admin{justify-content:flex-end}
.ticket-dialog__row-message{max-width:72%;position:relative}
.ticket-dialog__row-message span{display:block;border-radius:var(--r);padding:12px 14px;line-height:1.55;border:1px solid var(--bd);font-size:14.5px;background:linear-gradient(180deg,var(--other-soft),#fff);color:var(--text);box-shadow:0 3px 12px rgba(0,0,0,.04);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}
.ticket-dialog__row-admin .ticket-dialog__row-message span{background:linear-gradient(180deg,var(--me-soft),#fff)}
.ticket-dialog__row-user .ticket-dialog__row-message:after,.ticket-dialog__row-admin .ticket-dialog__row-message:after{content:"";position:absolute;bottom:-1px;width:10px;height:10px;background:#fff;border:1px solid var(--bd);transform:rotate(45deg)}
.ticket-dialog__row-user .ticket-dialog__row-message:after{left:10px}
.ticket-dialog__row-admin .ticket-dialog__row-message:after{right:10px}
.ticket-dialog__row-bottom{position:absolute;bottom:-20px;font-size:12px;color:var(--muted);white-space:nowrap}
.ticket-dialog__row-user .ticket-dialog__row-bottom{left:12px;text-align:left}
.ticket-dialog__row-admin .ticket-dialog__row-bottom{right:12px;text-align:right}
.ticket-dialog__row-bottom-name{font-weight:600}
.ticket-dialog__footer{position:sticky;bottom:0;z-index:4;background:linear-gradient(180deg,rgba(245,247,251,.7),rgba(245,247,251,1));backdrop-filter:blur(6px);border-top:1px solid var(--bd)}
.ticket-dialog__footer .component_form_group{max-width:980px;margin:0 auto;padding:14px 20px}
.ticket-dialog__footer textarea{background:var(--panel);border:1px solid var(--bd)!important;border-radius:16px!important;padding:12px 14px!important;min-height:60px;resize:none;box-shadow:0 6px 18px rgba(0,0,0,.04) inset}
.ticket-dialog__footer .btn{border-radius:12px!important;font-weight:800;padding:10px 16px;background:linear-gradient(180deg,var(--me),#5b4cff)!important;border:0!important;box-shadow:0 10px 24px rgba(111,98,255,.28)}
.chat-app-header{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.85));backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--bd);padding:18px 22px;margin:0 auto;display:flex;align-items:center;gap:12px}
.chat-app-avatar{width:38px;height:38px;border-radius:50%;background:#6f62ff;color:#fff;display:grid;place-items:center;font-weight:800}
.chat-app-meta{display:flex;flex-direction:column}
.chat-app-title{font-size:16px;font-weight:800;color:#111827}
.chat-app-sub{font-size:12px;color:#6b7280}
.ticket-imglink{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--bd);border-radius:12px;background:var(--panel);font-size:12px;color:#1f2937;text-decoration:none;cursor:zoom-in;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.ticket-imglink:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.ticket-imglink::before{content:"";width:14px;height:14px;flex:0 0 14px;background:center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='3' ry='3'/><circle cx='8.5' cy='8.5' r='2.5'/><path d='M21 15l-4.5-4.5L9 18'/></svg>");filter:drop-shadow(0 1px 0 rgba(0,0,0,.02))}
.chat-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .15s ease}
.chat-lightbox.open{opacity:1;pointer-events:auto}
.chat-lightbox__img{max-width:92vw;max-height:92vh;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.45);background:#fff;transform:scale(.98);transition:transform .15s ease}
.chat-lightbox.open .chat-lightbox__img{transform:scale(1)}
.chat-lightbox__close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:#ffffff;box-shadow:0 6px 18px rgba(0,0,0,.2);cursor:pointer}
.chat-lightbox__close:before{content:"";display:block;width:16px;height:16px;margin:9px auto;background:center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>")}
#ticket-holiday-banner{margin:8px auto 10px;max-width:980px}
.ticket-holiday{position:relative;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid rgba(239,68,68,.28);border-radius:14px;background:linear-gradient(180deg,#ffffff 0%,#ffe4e6 100%);box-shadow:0 10px 28px rgba(239,68,68,.18)}
.ticket-holiday:before{content:"";width:22px;height:22px;flex:0 0 22px;border-radius:6px;background:#ef4444 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11v2a4 4 0 0 0 4 4h2l7 3V6l-7 3H7a4 4 0 0 0-4 4z'/><path d='M16 8a5 5 0 0 1 0 8'/></svg>") center/14px 14px no-repeat;box-shadow:0 6px 16px rgba(239,68,68,.35)}
.ticket-holiday__text{font-size:13px;color:#b91c1c}
.ticket-holiday__label{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:#fee2e2;color:#b91c1c;margin-right:8px}
@media (max-width:640px){.ticket-dialog__body .component_ticket_messages{padding:14px 12px}.ticket-dialog__row-message{max-width:86%}}
.ticket-dialog__row-admin .ticket-dialog__row-message,.ticket-dialog__row-message{background:transparent!important;border:none!important;box-shadow:none!important}

/* --- (MODIFIED) STYLES FOR TICKET LIST & FORM --- */

/* 1. Ticket Form Enhancements */
/* *** FIX: Increased selector specificity to prevent being overridden *** */
#ticket-fields .form-group .ads4u-form-hint {
  color: #ef4444 !important;
  font-size: 0.8em;
  margin-top: 4px;
}

/* 2. Ticket List UI Overhaul */
.tickets-list .table-wr {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
  background: #fff;
}
.tickets-list table {
  border-collapse: separate;
  border-spacing: 0;
}
.tickets-list th {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  padding: 12px 16px;
  text-align: left;
}
.tickets-list td {
  padding: 16px;
  border-bottom: 1px solid #f1f1f1;
  vertical-align: middle;
}
.tickets-list tbody tr {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.tickets-list tbody tr:last-child td {
  border-bottom: none;
}
.tickets-list tbody tr.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  background-color: #fcfdff;
  cursor: pointer;
}
.tickets-list a {
  color: #0056b3;
  text-decoration: none !important;
  font-weight: 500;
}
.tickets-list a:hover {
  color: #003d80;
}

/* 3. Unread Ticket Styling */
.tickets-list tr.is-unread {
  background-color: rgba(40, 167, 69, 0.05); /* *** NEW: Faint green background *** */
}
.unread-indicator {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 10px;
}
.unread-indicator svg {
  width: 1em;
  height: 1em;
  color: #28a745;
  animation: pulse-glow 1.8s infinite ease-in-out;
}
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.95);
  }
}

/* 4. Status Pill Styling */
.tickets-list td:nth-child(3) {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.tickets-list tr.status-replied td:nth-child(3) { color: #0056b3; }
.tickets-list tr.status-closed td:nth-child(3) { color: #6c757d; }
.tickets-list tr.status-pending td:nth-child(3) { color: #b88b00; }

.tickets-list td:nth-child(3)::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.tickets-list tr.status-replied td:nth-child(3)::before { background-color: #007bff; }
.tickets-list tr.status-closed td:nth-child(3)::before { background-color: #6c757d; }
.tickets-list tr.status-pending td:nth-child(3)::before { background-color: #ffc107; }