/* Support module overrides: loaded after app.css to keep chat UI consistent. */

#tickets .section-heading {
  align-items: flex-start;
  margin-bottom: 18px;
}

#tickets .section-heading h2 {
  margin: 0 0 6px;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

#tickets .section-note {
  margin: 0;
  color: #aebbd0;
}

#tickets .wide-panel {
  padding: 24px;
  border-color: rgba(99, 179, 237, .18);
  background: rgba(8, 13, 28, .58);
}

#tickets .avatar,
.chat-section .avatar,
.messenger-card .avatar,
.ticket-inbox .avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  border-color: rgba(125, 211, 252, .32);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .06);
}

#tickets .avatar-small,
.chat-section .avatar-small,
.messenger-card .avatar-small {
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
}

#tickets .ticket-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 860px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(125, 211, 252, .18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(6, 182, 212, .08), rgba(109, 40, 217, .08)),
    rgba(8, 13, 28, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

#tickets .ticket-form label {
  display: grid !important;
  gap: 7px;
  color: #dbeafe;
  font-size: .86rem;
  font-weight: 700;
}

#tickets .ticket-form input,
#tickets .ticket-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 13px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(2, 6, 23, .86);
  color: #f8fafc;
  font: inherit;
  outline: none;
}

#tickets .ticket-form textarea {
  min-height: 118px;
  resize: vertical;
}

#tickets .ticket-form input:focus,
#tickets .ticket-form textarea:focus {
  border-color: rgba(6, 182, 212, .68);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .11);
}

#tickets .ticket-form .button {
  justify-self: start;
}

#tickets .ticket-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

#tickets .ticket-stats article {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(8, 13, 28, .64);
}

#tickets .ticket-stats span {
  color: #94a3b8;
  font-size: .76rem;
}

#tickets .ticket-stats strong {
  color: #f8fafc;
  font-size: 1.45rem;
  line-height: 1;
}

#tickets .ticket-inbox {
  display: grid;
  gap: 8px;
}

#tickets .ticket-inbox-head,
#tickets .ticket-inbox-row {
  display: grid;
  grid-template-columns: minmax(170px, .9fr) minmax(260px, 1.7fr) minmax(120px, .55fr);
  gap: 14px;
  align-items: center;
}

#tickets .ticket-inbox-head {
  padding: 0 14px 4px;
  color: #7f8da3;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

#tickets .ticket-inbox-row {
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(8, 13, 28, .72);
}

#tickets .ticket-inbox-row:hover {
  border-color: rgba(6, 182, 212, .42);
  background: rgba(12, 20, 42, .9);
}

#tickets .ticket-inbox-row.is-new {
  border-left-color: #22c55e;
}

#tickets .ticket-inbox-row.is-in_progress {
  border-left-color: #f59e0b;
}

#tickets .ticket-inbox-row.is-completed {
  border-left-color: #64748b;
  opacity: .86;
}

#tickets .ticket-peer,
#tickets .ticket-preview {
  min-width: 0;
}

#tickets .ticket-peer {
  display: flex;
  gap: 10px;
  align-items: center;
}

#tickets .ticket-peer > div,
#tickets .ticket-preview > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#tickets .ticket-peer strong,
#tickets .ticket-preview strong {
  overflow: hidden;
  color: #f8fafc;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tickets .ticket-peer small,
#tickets .ticket-preview p,
#tickets .ticket-meta small {
  overflow: hidden;
  margin: 0;
  color: #94a3b8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tickets .ticket-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

#tickets .ticket-meta {
  display: grid;
  justify-items: end;
  gap: 2px;
}

#tickets .ticket-meta strong {
  color: #bae6fd;
  font-size: .86rem;
}

#tickets .ticket-client-list,
#tickets .ticket-history {
  display: grid;
  gap: 12px;
}

.chat-section {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.messenger-card {
  display: grid !important;
  overflow: hidden;
  width: min(100%, 980px);
  margin: 0;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(8, 13, 28, .82);
  box-shadow: 0 22px 80px rgba(0, 0, 0, .24);
}

.messenger-card-admin {
  margin: 0 auto;
}

.messenger-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  background: rgba(2, 6, 23, .58);
}

.messenger-head .ticket-peer strong {
  font-size: .95rem;
}

.messenger-head .ticket-peer small {
  font-size: .8rem;
}

.chat-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ticket-status-form {
  display: flex !important;
  gap: 8px;
  align-items: center;
}

.ticket-status-form select {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(2, 6, 23, .82);
  color: #f8fafc;
  font: inherit;
}

.messenger-feed {
  display: grid;
  gap: 8px;
  min-height: 280px;
  max-height: 58vh;
  overflow: auto;
  padding: 14px;
  background:
    radial-gradient(circle at 18% 10%, rgba(6, 182, 212, .08), transparent 160px),
    radial-gradient(circle at 82% 88%, rgba(109, 40, 217, .08), transparent 170px),
    rgba(2, 6, 23, .28);
}

.messenger-feed-admin {
  min-height: 430px;
}

.message-row {
  display: flex !important;
  gap: 7px;
  align-items: flex-end;
  width: fit-content;
  max-width: min(680px, 88%);
}

.message-row.is-admin {
  justify-self: end;
  flex-direction: row-reverse;
}

.message-row .avatar-small {
  width: 20px !important;
  height: 20px !important;
  margin-bottom: 3px;
}

.message-bubble {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 15px 15px 15px 5px;
  background: rgba(15, 23, 42, .92);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

.message-row.is-admin .message-bubble {
  border-color: rgba(6, 182, 212, .22);
  border-radius: 15px 15px 5px 15px;
  background: linear-gradient(135deg, rgba(6, 182, 212, .2), rgba(109, 40, 217, .18));
}

.message-bubble strong {
  color: #bae6fd;
  font-size: .7rem;
  line-height: 1.15;
}

.message-bubble p {
  margin: 0;
  color: #f8fafc;
  font-size: .94rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-bubble time {
  justify-self: end;
  color: rgba(203, 213, 225, .68);
  font-size: .66rem;
}

.messenger-composer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-top: 1px solid rgba(148, 163, 184, .14);
  background: rgba(2, 6, 23, .64);
}

.messenger-composer label {
  display: block !important;
  min-width: 0;
}

.messenger-composer textarea {
  width: 100%;
  min-height: 42px !important;
  max-height: 150px;
  padding: 10px 12px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, .96) !important;
  color: #f8fafc !important;
  font: inherit;
  resize: vertical;
  outline: none;
}

.messenger-composer textarea:focus {
  border-color: rgba(6, 182, 212, .66) !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .1);
}

.messenger-composer .button {
  min-width: 116px;
  min-height: 42px;
}

.chat-delete-form {
  display: flex;
  justify-content: flex-end;
  padding: 0 10px 10px;
  background: rgba(2, 6, 23, .64);
}

.history-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(8, 13, 28, .62);
}

.history-card strong,
.history-card p {
  margin: 0;
}

.history-card p {
  color: #94a3b8;
  font-size: .86rem;
}

@media (max-width: 900px) {
  #tickets .ticket-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tickets .ticket-inbox-head {
    display: none;
  }

  #tickets .ticket-inbox-row {
    grid-template-columns: 1fr;
  }

  #tickets .ticket-preview {
    grid-template-columns: 1fr;
  }

  #tickets .ticket-meta {
    justify-items: start;
  }

  .chat-head-actions,
  .ticket-status-form {
    width: 100%;
  }

  .ticket-status-form select,
  .ticket-status-form .ghost-button {
    flex: 1 1 150px;
  }
}

@media (max-width: 620px) {
  #tickets .ticket-stats {
    grid-template-columns: 1fr 1fr;
  }

  #tickets .ticket-form {
    padding: 12px;
  }

  .messenger-feed {
    max-height: 62vh;
    padding: 10px;
  }

  .message-row {
    max-width: 96%;
  }

  .message-row .avatar-small {
    width: 18px !important;
    height: 18px !important;
  }

  .message-bubble {
    padding: 7px 9px;
  }

  .messenger-composer {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .messenger-composer .button {
    width: 100%;
  }
}