/* ======================================
   CATTLEMANIA SUPPORT TICKETS
   DASHBOARD WIDGET STYLE
====================================== */

/* ======================================
   SUPPORT TICKET PANEL
====================================== */

#ticketModal {
  display: none;

  margin-top: 15px;
}

/* MAIN PANEL */

#ticketModal.support-panel {
  background: linear-gradient(145deg, #111827, #0b132b);

  border-radius: 14px;

  padding: 18px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}

/* ======================================
   HEADER
====================================== */

#ticketModal .widget-header {
  color: #ff4d4d;

  font-size: 18px;

  font-weight: 800;

  margin-bottom: 15px;
}

/* ======================================
   TICKET LIST
====================================== */

#ticketList {
  max-height: 300px;

  overflow-y: auto;
}

#ticketList.assistant-question {
  padding: 12px;
}

/* individual tickets */

.ticket-item {
  background: #111827;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 10px;

  padding: 12px;

  margin-bottom: 10px;

  cursor: pointer;

  transition: 0.25s;
}

.ticket-item:hover {
  background: #16213b;

  border-color: #dc2626;

  transform: translateY(-2px);
}

/* ======================================
   CREATE TICKET
====================================== */

#createTicketPopup {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

#createTicketPopup h3 {
  color: white;

  margin-bottom: 5px;
}

/* inputs */

#createTicketPopup input,
#createTicketPopup textarea {
  width: 100%;

  box-sizing: border-box;
}

#createTicketPopup textarea {
  min-height: 130px;

  resize: none;
}

/* ======================================
   BUTTONS
====================================== */

#ticketModal button {
  background: #dc2626;

  color: white;

  border: none;

  border-radius: 8px;

  padding: 10px 16px;

  font-weight: 700;

  cursor: pointer;

  transition: 0.25s;
}

#ticketModal button:hover {
  background: #ff4d4d;

  transform: translateY(-2px);
}

/* ======================================
   TICKET CHAT VIEW
====================================== */

#ticketChatView {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

/* messages container */

#ticketMessages {
  min-height: 200px;

  max-height: 350px;

  overflow-y: auto;
}

/* message bubble */

#ticketMessages .msg {
  background: #111827;

  border-radius: 10px;

  padding: 12px;

  margin-bottom: 10px;

  border-left: 4px solid #dc2626;
}

/* sender */

.msg-user {
  color: #fb923c;

  font-weight: 800;

  margin-bottom: 5px;
}

/* typing */

#typingIndicator {
  color: #94a3b8;

  font-size: 13px;
}

/* ======================================
   INPUT AREA
====================================== */

#ticketModal .assistant-input {
  display: flex;

  gap: 8px;

  margin-top: 10px;
}

#ticketModal .assistant-input input {
  flex: 1;
}

/* ======================================
   CLOSE / BACK BUTTON
====================================== */

.ticket-close {
  background: #374151 !important;
}

.ticket-close:hover {
  background: #4b5563 !important;
}

/* ======================================
   SCROLLBARS
====================================== */

#ticketList::-webkit-scrollbar,
#ticketMessages::-webkit-scrollbar {
  width: 8px;
}

#ticketList::-webkit-scrollbar-thumb,
#ticketMessages::-webkit-scrollbar-thumb {
  background: #374151;

  border-radius: 10px;
}

/* ======================================
   MOBILE
====================================== */

@media (max-width: 700px) {
  #ticketModal.support-panel {
    padding: 15px;
  }

  #ticketModal .assistant-input {
    flex-direction: column;
  }

  #ticketMessages {
    max-height: 250px;
  }
}