/* --- 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 */
#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 .2s ease, box-shadow .2s ease, background-color .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 (ปรับใหม่เป็นไล่เฉดจางๆ) */
/* ใช้พื้นหลังกับ <td> ทุกช่องในแถว เพื่อกันกรณีธีมตั้งสีให้ <td> ทับ <tr> */
.tickets-list table tbody tr.is-unread > td,
.tickets-list .table tbody tr.is-unread > td,
.tickets-list table tbody tr.unread > td,
.tickets-list .table tbody tr.unread > td,
.tickets-list table tbody tr.new > td,
.tickets-list .table tbody tr.new > td {
  background-image: linear-gradient(90deg,
    rgba(209, 250, 229, 0.55) 0%,   /* เขียวมิ้นต์จาง */
    rgba(224, 242, 254, 0.55) 100%  /* ฟ้าอ่อนจาง */
  ) !important;
  background-color: transparent !important; /* กันธีมเดิมทับ */
}

/* ทำให้ hover เข้มขึ้นนิดหน่อย แต่ยังจางอยู่ */
.tickets-list table tbody tr.is-unread:hover > td,
.tickets-list .table tbody tr.is-unread:hover > td,
.tickets-list table tbody tr.unread:hover > td,
.tickets-list .table tbody tr.unread:hover > td,
.tickets-list table tbody tr.new:hover > td,
.tickets-list .table tbody tr.new:hover > td {
  background-image: linear-gradient(90deg,
    rgba(209, 250, 229, 0.75) 0%,
    rgba(224, 242, 254, 0.75) 100%
  ) !important;
}

/* ไอคอนแจ้งแถวใหม่ (ถ้ามีใส่จาก JS) */
.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:.6;transform:scale(.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; }