/* ==========================================================
   CLOUDPELIZZON PORTAL DO CLIENTE
   FASE 8.1C
   CHAMADOS / EXPERIENCIA PREMIUM
   ========================================================== */

:root {
  --cp81-bg: #071117;
  --cp81-surface: #0b1820;
  --cp81-surface-2: #0f2029;
  --cp81-surface-3: #132832;

  --cp81-border: rgba(86, 224, 255, .16);
  --cp81-border-strong: rgba(86, 224, 255, .30);

  --cp81-cyan: #59e7ff;
  --cp81-blue: #4bb9ff;

  --cp81-text: #edf7fa;
  --cp81-text-2: #bfd0d8;
  --cp81-muted: #7f9ba8;

  --cp81-green: #75efb9;
  --cp81-yellow: #ffd86b;
  --cp81-red: #ff7189;

  --cp81-shadow:
    0 22px 60px rgba(0, 0, 0, .28);
}


/* ==========================================================
   CABECALHO
   ========================================================== */

.cp81-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;

  margin-bottom: 22px;
}

.cp81-head > div:first-child {
  max-width: 900px;
}

.cp81-head small {
  display: block;

  color: var(--cp81-cyan);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .14em;
}

.cp81-head h1 {
  margin: 7px 0 6px;

  color: var(--cp81-text);

  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;

  letter-spacing: -.04em;
}

.cp81-head p {
  margin: 0;

  color: var(--cp81-text-2);

  font-size: 13px;
  line-height: 1.55;
}


/* ==========================================================
   KPIs
   ========================================================== */

.cp81-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 12px;

  margin-bottom: 14px;
}

.cp81-kpis article {
  position: relative;

  overflow: hidden;

  min-height: 96px;

  padding: 20px;

  border:
    1px solid
    var(--cp81-border);

  background:
    linear-gradient(
      145deg,
      rgba(19, 42, 53, .96),
      rgba(8, 22, 29, .96)
    );

  box-shadow:
    0 14px 35px
    rgba(0, 0, 0, .16);
}

.cp81-kpis article::after {
  content: "";

  position: absolute;

  width: 70px;
  height: 70px;

  top: -35px;
  right: -25px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(79, 220, 255, .18),
      transparent 70%
    );
}

.cp81-kpis strong {
  display: block;

  color: var(--cp81-cyan);

  font-size: 36px;
  line-height: 1;
}

.cp81-kpis span {
  display: block;

  margin-top: 9px;

  color: var(--cp81-text-2);

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .08em;
}


/* ==========================================================
   PAINEIS
   ========================================================== */

.cp81-panel {
  border:
    1px solid
    var(--cp81-border);

  background:
    linear-gradient(
      145deg,
      rgba(14, 31, 40, .97),
      rgba(7, 19, 25, .98)
    );

  box-shadow:
    var(--cp81-shadow);
}

.cp81-ticket-grid {
  display: grid;

  grid-template-columns:
    minmax(460px, .78fr)
    minmax(0, 1.22fr);

  gap: 14px;

  align-items: start;
}


/* ==========================================================
   ABERTURA DE CHAMADO
   ========================================================== */

.cp81-new-ticket {
  padding: 25px;
}

.cp81-section-head {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  margin-bottom: 20px;
}

.cp81-icon {
  display: grid;

  place-items: center;

  flex: 0 0 50px;

  width: 50px;
  height: 50px;

  border:
    1px solid
    var(--cp81-border-strong);

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      #173849,
      #0a1922
    );

  color: var(--cp81-cyan);

  font-size: 20px;

  box-shadow:
    inset 0 0 18px
    rgba(89, 231, 255, .06);
}

.cp81-section-head small,
.cp81-list-head small,
.cp81-section-title small,
.cp81-admin-tramitacao > small {
  color: var(--cp81-cyan);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .13em;
}

.cp81-section-head h2,
.cp81-list-head h2,
.cp81-section-title h2 {
  margin: 5px 0;

  color: var(--cp81-text);

  font-size: 24px;
}

.cp81-section-head p {
  margin: 0;

  max-width: 580px;

  color: var(--cp81-muted);

  font-size: 11px;
  line-height: 1.5;
}


/* ==========================================================
   FORMULARIOS
   ========================================================== */

.cp81-form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 13px;
}

.cp81-wide {
  grid-column: 1 / -1;
}

.cp81-new-ticket label > span,
.cp81-reply label > span,
.cp81-admin-tramitacao label > span {
  display: block;

  margin-bottom: 7px;

  color: var(--cp81-text-2);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .02em;
}

.cp81-new-ticket input,
.cp81-new-ticket select,
.cp81-new-ticket textarea,
.cp81-reply input,
.cp81-reply select,
.cp81-reply textarea,
.cp81-admin-tramitacao input,
.cp81-admin-tramitacao select,
.cp81-admin-tramitacao textarea,
.cp81-filter-bar select {
  width: 100%;

  box-sizing: border-box;

  border:
    1px solid
    rgba(94, 188, 216, .32);

  outline: none;

  background:
    rgba(4, 15, 21, .82);

  color: var(--cp81-text);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.cp81-new-ticket input,
.cp81-new-ticket select,
.cp81-reply input,
.cp81-reply select,
.cp81-admin-tramitacao input,
.cp81-admin-tramitacao select,
.cp81-filter-bar select {
  min-height: 45px;

  padding:
    0 13px;
}

.cp81-new-ticket textarea,
.cp81-reply textarea,
.cp81-admin-tramitacao textarea {
  min-height: 170px;

  padding: 14px;

  resize: vertical;

  font-family: inherit;
  font-size: 12px;
  line-height: 1.6;
}

.cp81-new-ticket textarea {
  min-height: 290px;
}

.cp81-new-ticket input:focus,
.cp81-new-ticket select:focus,
.cp81-new-ticket textarea:focus,
.cp81-reply input:focus,
.cp81-reply select:focus,
.cp81-reply textarea:focus,
.cp81-admin-tramitacao input:focus,
.cp81-admin-tramitacao select:focus,
.cp81-admin-tramitacao textarea:focus,
.cp81-filter-bar select:focus {
  border-color:
    rgba(89, 231, 255, .74);

  background:
    rgba(6, 22, 30, .96);

  box-shadow:
    0 0 0 3px
    rgba(89, 231, 255, .06);
}

.cp81-message-field {
  display: block;

  margin-top: 15px;
}

.cp81-label-row {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  margin-bottom: 7px;
}

.cp81-label-row > span {
  color: var(--cp81-text-2);

  font-size: 10px;
  font-weight: 800;
}

.cp81-label-row > small {
  color: var(--cp81-cyan);

  font-size: 9px;
}


/* ==========================================================
   UPLOAD
   ========================================================== */

.cp81-upload-box {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-top: 14px;

  padding: 15px;

  border:
    1px dashed
    rgba(89, 231, 255, .27);

  background:
    rgba(6, 22, 29, .72);

  transition:
    border-color .18s ease,
    background .18s ease;
}

.cp81-upload-box.cp81-drag-active {
  border-color:
    var(--cp81-cyan);

  background:
    rgba(20, 65, 80, .46);
}

.cp81-upload-box strong {
  display: block;

  color: var(--cp81-text);

  font-size: 11px;
}

.cp81-upload-box span {
  display: block;

  margin-top: 4px;

  color: var(--cp81-muted);

  font-size: 9px;
  line-height: 1.4;
}

.cp81-upload-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 38px;

  padding:
    0 14px;

  border:
    1px solid
    var(--cp81-border-strong);

  background:
    linear-gradient(
      145deg,
      #102b37,
      #091820
    );

  color: var(--cp81-cyan);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .07em;

  cursor: pointer;

  white-space: nowrap;

  transition:
    transform .15s ease,
    border-color .15s ease;
}

.cp81-upload-button:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(89, 231, 255, .68);
}

.cp81-upload-box.compact {
  justify-content: flex-end;

  padding: 9px;

  border-style: solid;
}

.cp81-file-preview {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(160px, 1fr)
    );

  gap: 8px;

  margin-top: 9px;
}

.cp81-file-card {
  position: relative;

  overflow: hidden;

  min-height: 56px;

  padding: 9px;

  border:
    1px solid
    var(--cp81-border);

  background:
    rgba(6, 19, 26, .90);

  color: var(--cp81-text-2);

  font-size: 9px;
}

.cp81-file-card.image {
  min-height: 115px;
}

.cp81-file-card img {
  display: block;

  width: 100%;
  height: 72px;

  margin-bottom: 7px;

  object-fit: cover;

  border:
    1px solid
    rgba(255, 255, 255, .05);
}

.cp81-file-card strong {
  display: block;

  overflow: hidden;

  color: var(--cp81-text);

  font-size: 9px;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.cp81-file-card small {
  display: block;

  margin-top: 3px;

  color: var(--cp81-muted);

  font-size: 8px;
}


/* ==========================================================
   BOTOES
   ========================================================== */

.cp81-primary,
.cp81-secondary {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  border: 0;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .07em;

  cursor: pointer;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

.cp81-primary {
  width: 100%;

  min-height: 48px;

  margin-top: 16px;

  padding:
    0 18px;

  background:
    linear-gradient(
      90deg,
      var(--cp81-cyan),
      var(--cp81-blue)
    );

  color: #00131a;
}

.cp81-primary:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 10px 30px
    rgba(73, 192, 255, .22);
}

.cp81-secondary {
  min-height: 43px;

  padding:
    0 14px;

  border:
    1px solid
    var(--cp81-border-strong);

  background:
    rgba(9, 28, 37, .90);

  color: var(--cp81-cyan);
}


/* ==========================================================
   HISTORICO
   ========================================================== */

.cp81-ticket-history {
  min-height: 660px;

  padding: 23px;
}

.cp81-list-head {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 15px;

  margin-bottom: 12px;
}

.cp81-list-head > span {
  color: var(--cp81-cyan);

  font-size: 9px;
}

.cp81-ticket-list {
  display: flex;

  flex-direction: column;
}

.cp81-ticket-card {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 15px;

  padding:
    17px 8px;

  border-top:
    1px solid
    rgba(85, 213, 245, .10);

  transition:
    background .16s ease,
    padding .16s ease;
}

.cp81-ticket-card:hover {
  padding-left: 14px;

  background:
    linear-gradient(
      90deg,
      rgba(25, 67, 82, .25),
      transparent
    );
}

.cp81-ticket-main > small {
  display: block;

  color: var(--cp81-muted);

  font-size: 8px;
}

.cp81-ticket-main > strong {
  display: block;

  margin:
    5px 0 9px;

  color: var(--cp81-text);

  font-size: 13px;
}

.cp81-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}

.cp81-tags span {
  padding:
    4px 7px;

  border:
    1px solid
    var(--cp81-border);

  background:
    rgba(8, 25, 33, .80);

  color: var(--cp81-text-2);

  font-size: 8px;
}

.cp81-ticket-sla {
  display: flex;

  align-items: center;

  gap: 18px;
}

.cp81-ticket-sla div small {
  display: block;

  color: var(--cp81-muted);

  font-size: 7px;
}

.cp81-ticket-sla div strong {
  display: block;

  margin-top: 4px;

  color: var(--cp81-green);

  font-size: 9px;
}

.cp81-ticket-sla > b {
  color: var(--cp81-cyan);

  font-size: 26px;
}

.cp81-empty {
  padding:
    90px 30px;

  text-align: center;

  color: var(--cp81-muted);

  font-size: 12px;
}

.cp81-empty strong {
  display: block;

  margin-top: 6px;

  color: var(--cp81-text-2);
}


/* ==========================================================
   DETALHE
   ========================================================== */

.cp81-ticket-title {
  align-items: center;
}

.cp81-status {
  padding:
    11px 15px;

  border:
    1px solid
    var(--cp81-border-strong);

  background:
    rgba(9, 31, 41, .88);

  color: var(--cp81-cyan);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .09em;

  white-space: nowrap;
}

.cp81-detail-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    360px;

  gap: 14px;

  align-items: start;
}

.cp81-description {
  padding: 21px;
}

.cp81-meta-line {
  display: flex;

  flex-wrap: wrap;

  gap: 32px;

  margin-bottom: 15px;
}

.cp81-meta-line small {
  display: block;

  color: var(--cp81-muted);

  font-size: 8px;
}

.cp81-meta-line strong {
  display: block;

  margin-top: 4px;

  color: var(--cp81-text);

  font-size: 10px;
}

.cp81-description-text {
  padding: 17px;

  border:
    1px solid
    rgba(85, 213, 245, .09);

  background:
    rgba(4, 15, 21, .58);

  color: var(--cp81-text-2);

  font-size: 12px;
  line-height: 1.65;

  white-space: pre-wrap;
}


/* ==========================================================
   SLA
   ========================================================== */

.cp81-sla-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;

  margin:
    12px 0;
}

.cp81-sla-grid article {
  padding: 15px;

  border:
    1px solid
    var(--cp81-border);

  background:
    linear-gradient(
      145deg,
      rgba(15, 37, 47, .88),
      rgba(7, 20, 27, .88)
    );
}

.cp81-sla-grid small {
  display: block;

  color: var(--cp81-muted);

  font-size: 8px;
}

.cp81-sla-grid strong {
  display: block;

  margin:
    6px 0;

  color: var(--cp81-green);

  font-size: 11px;
}

.cp81-sla-grid span {
  display: block;

  color: #91aab5;

  font-size: 8px;
}

.danger {
  color:
    var(--cp81-red)
    !important;
}

.ok {
  color:
    var(--cp81-green)
    !important;
}

.muted {
  color:
    var(--cp81-muted)
    !important;
}


/* ==========================================================
   ANEXOS EXISTENTES
   ========================================================== */

.cp81-attachment-list {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 12px;
}

.cp81-attachment {
  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 190px;

  padding:
    10px 12px;

  border:
    1px solid
    var(--cp81-border);

  background:
    rgba(8, 25, 33, .84);

  transition:
    border-color .16s ease,
    transform .16s ease;
}

.cp81-attachment:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--cp81-border-strong);
}

.cp81-attachment strong {
  display: block;

  color: var(--cp81-text);

  font-size: 9px;
}

.cp81-attachment small {
  display: block;

  margin-top: 3px;

  color: var(--cp81-muted);

  font-size: 8px;
}

.cp81-attachment-list.compact
.cp81-attachment {
  min-width: 150px;
}


/* ==========================================================
   CONVERSA
   ========================================================== */

.cp81-conversation {
  margin-top: 20px;
}

.cp81-section-title {
  margin-bottom: 13px;
}

.cp81-message {
  width: 86%;

  box-sizing: border-box;

  margin-bottom: 10px;

  padding:
    14px 15px;

  border:
    1px solid
    rgba(89, 231, 255, .11);

  background:
    rgba(7, 20, 27, .88);
}

.cp81-message.staff {
  margin-left: auto;

  border-color:
    rgba(89, 231, 255, .24);

  background:
    linear-gradient(
      145deg,
      rgba(13, 43, 55, .90),
      rgba(8, 26, 34, .94)
    );
}

.cp81-message-head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;
}

.cp81-message-head strong {
  display: block;

  color: var(--cp81-text);

  font-size: 10px;
}

.cp81-message-head span {
  display: block;

  margin-top: 3px;

  color: #72a6ba;

  font-size: 8px;
}

.cp81-message-head > small {
  color: var(--cp81-muted);

  font-size: 8px;
}

.cp81-message > p {
  margin:
    10px 0 0;

  color: var(--cp81-text-2);

  font-size: 12px;
  line-height: 1.58;

  white-space: pre-wrap;
}


/* ==========================================================
   RESPOSTA
   ========================================================== */

.cp81-reply {
  margin-top: 15px;

  padding: 23px;
}


/* ==========================================================
   ADMINISTRACAO / TRAMITACAO
   ========================================================== */

.cp81-admin-tramitacao {
  position: sticky;

  top: 18px;

  padding: 21px;
}

.cp81-admin-tramitacao h2 {
  margin:
    6px 0 14px;

  color: var(--cp81-text);

  font-size: 23px;
}

.cp81-admin-tramitacao label {
  display: block;

  margin-top: 13px;
}

.cp81-auto-attendant {
  margin-bottom: 15px;

  padding: 13px;

  border:
    1px solid
    rgba(117, 239, 185, .20);

  background:
    rgba(7, 31, 21, .60);
}

.cp81-auto-attendant small {
  display: block;

  color: var(--cp81-green);

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .08em;
}

.cp81-auto-attendant strong {
  display: block;

  margin-top: 5px;

  color: #b8dccc;

  font-size: 10px;
  line-height: 1.45;
}


/* ==========================================================
   FILTROS E TABELA
   ========================================================== */

.cp81-filter-bar {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr))
    auto;

  gap: 8px;

  margin-bottom: 12px;
}

.cp81-filter-bar select {
  padding:
    0 12px;
}

.cp81-table-wrap {
  overflow: auto;
}

.cp81-table {
  width: 100%;

  min-width: 1080px;

  border-collapse: collapse;
}

.cp81-table th,
.cp81-table td {
  padding:
    13px;

  border-bottom:
    1px solid
    rgba(89, 231, 255, .08);

  text-align: left;
}

.cp81-table th {
  color: #8fa9b4;

  font-size: 8px;

  letter-spacing: .07em;

  text-transform: uppercase;
}

.cp81-table td {
  color: var(--cp81-text-2);

  font-size: 10px;
}

.cp81-table tbody tr {
  transition:
    background .14s ease;
}

.cp81-table tbody tr:hover {
  background:
    rgba(26, 70, 85, .16);
}

.cp81-table a {
  color: var(--cp81-cyan);
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 1180px) {

  .cp81-ticket-grid,
  .cp81-detail-grid {
    grid-template-columns: 1fr;
  }

  .cp81-admin-tramitacao {
    position: relative;

    top: auto;
  }

  .cp81-ticket-history {
    min-height: 0;
  }

}


@media (max-width: 820px) {

  .cp81-kpis {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .cp81-sla-grid {
    grid-template-columns: 1fr;
  }

  .cp81-form-grid {
    grid-template-columns: 1fr;
  }

  .cp81-wide {
    grid-column: auto;
  }

  .cp81-filter-bar {
    grid-template-columns: 1fr;
  }

  .cp81-ticket-card {
    grid-template-columns: 1fr;
  }

  .cp81-ticket-sla {
    justify-content: space-between;
  }

  .cp81-message {
    width: 100%;
  }

}


@media (max-width: 560px) {

  .cp81-head {
    flex-direction: column;
  }

  .cp81-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .cp81-new-ticket,
  .cp81-ticket-history,
  .cp81-reply,
  .cp81-description,
  .cp81-admin-tramitacao {
    padding: 17px;
  }

  .cp81-upload-box {
    align-items: stretch;

    flex-direction: column;
  }

  .cp81-upload-button {
    width: 100%;

    box-sizing: border-box;
  }

}

/* ==========================================================
   CLOUDPELIZZON 8.1C-3
   EDITOR VISUAL / IMAGENS INLINE
   ========================================================== */

.cp81-rich-editor {
  box-sizing: border-box;

  width: 100%;
  min-height: 290px;

  padding: 16px;

  overflow: auto;

  border:
    1px solid
    rgba(94, 188, 216, .32);

  outline: none;

  background:
    rgba(4, 15, 21, .82);

  color: var(--cp81-text);

  font-size: 12px;
  line-height: 1.65;

  white-space: pre-wrap;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.cp81-reply .cp81-rich-editor {
  min-height: 220px;
}

.cp81-rich-editor-admin {
  min-height: 185px;
}

.cp81-rich-editor:focus {
  border-color:
    rgba(89, 231, 255, .74);

  background:
    rgba(6, 22, 30, .96);

  box-shadow:
    0 0 0 3px
    rgba(89, 231, 255, .06);
}

.cp81-rich-editor:empty::before {
  content:
    attr(data-placeholder);

  color:
    #708a96;

  pointer-events: none;
}

.cp81-editor-image {
  display: inline-block;

  max-width: min(
    680px,
    96%
  );

  margin:
    14px 0;

  padding: 8px;

  border:
    1px solid
    rgba(89, 231, 255, .22);

  background:
    rgba(8, 27, 36, .92);

  box-shadow:
    0 12px 32px
    rgba(0, 0, 0, .22);
}

.cp81-editor-image img {
  display: block;

  max-width: 100%;
  max-height: 430px;

  object-fit: contain;
}

.cp81-editor-image figcaption {
  margin-top: 7px;

  color:
    var(--cp81-muted);

  font-size: 8px;
}

.cp81-attachment.cp81-inline-image {
  display: block;

  width: min(
    720px,
    100%
  );

  padding: 9px;
}

.cp81-attachment.cp81-inline-image > img {
  display: block;

  width: 100%;
  max-height: 480px;

  margin-bottom: 9px;

  object-fit: contain;

  border:
    1px solid
    rgba(255,255,255,.05);

  background:
    rgba(0,0,0,.18);
}

.cp81-message
.cp81-attachment.cp81-inline-image {
  width: min(
    620px,
    100%
  );
}

@media (max-width: 700px) {

  .cp81-rich-editor {
    min-height: 240px;
  }

  .cp81-editor-image {
    max-width: 100%;
  }

}