/* =========================
   TEAMCHAT 1.0
========================= */

#team-workflow-panel-root {
  position:
    relative;

  z-index:
    9998;
}

/* =========================
   SIDEBAR ENTRY
========================= */

#teamChatSidebarBtn {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  column-gap:
    10px;

  text-align:
    left;
}

#teamChatSidebarBtn >
span:first-child {
  min-width:
    0;

  justify-self:
    start;

  color:
    #ffffff;

  font-weight:
    900;
}

.team-chat-sidebar-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  min-width:
    0;

  color:
    #a7f3d0;

  font-size:
    0.68rem;

  font-weight:
    850;

  white-space:
    nowrap;
}

.team-chat-sidebar-status::before {
  content:
    "";

  width:
    7px;

  height:
    7px;

  flex-shrink:
    0;

  border-radius:
    999px;

  background:
    var(
      --green,
      #10b981
    );

  box-shadow:
    0 0 0 3px
    rgba(
      16,
      185,
      129,
      0.12
    );
}

.team-chat-sidebar-badge {
  position:
    absolute;

  top:
    -6px;

  right:
    -6px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    22px;

  height:
    22px;

  padding:
    0 6px;

  border:
    2px solid
    #10243a;

  border-radius:
    999px;

  background:
    var(
      --red,
      #ef4444
    );

  color:
    #ffffff;

  font-size:
    0.7rem;

  font-weight:
    900;

  line-height:
    1;
}

/* =========================
   PANEL
========================= */

#team-workflow-panel-root
.team-widget-panel {
  position:
    fixed;

  left:
    calc(
      24px +
      240px +
      32px
    );

  right:
    auto;

  bottom:
    24px;

  z-index:
    9998;

  display:
    flex;

  flex-direction:
    column;

  width:
    min(
      720px,
      calc(
        100vw -
        48px
      )
    );

  height:
    min(
      640px,
      calc(
        100vh -
        48px
      )
    );

  overflow:
    hidden;

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

  border-radius:
    28px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(
        59,
        130,
        246,
        0.13
      ),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(
        15,
        23,
        42,
        0.99
      ),
      rgba(
        8,
        19,
        31,
        0.99
      )
    );

  box-shadow:
    0 30px 90px
    rgba(
      0,
      0,
      0,
      0.48
    );

  backdrop-filter:
    blur(
      22px
    );
}

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

#team-workflow-panel-root
.team-widget-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  min-height:
    70px;

  padding:
    16px 18px;

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

  background:
    linear-gradient(
      135deg,
      rgba(
        59,
        130,
        246,
        0.15
      ),
      rgba(
        255,
        255,
        255,
        0.025
      )
    );
}

#team-workflow-panel-root
.team-widget-header > div:first-child {
  display:
    grid;

  gap:
    4px;

  min-width:
    0;
}

#team-workflow-panel-root
.team-widget-header strong {
  display:
    block;

  color:
    #ffffff;

  font-size:
    1.05rem;

  font-weight:
    950;

  letter-spacing:
    -0.025em;
}

#team-workflow-panel-root
.team-widget-header span {
  display:
    block;

  margin:
    0;

  color:
    var(
      --text-muted,
      #94a3b8
    );

  font-size:
    0.75rem;

  line-height:
    1.4;
}

#team-workflow-panel-root
.team-widget-header-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex-shrink:
    0;
}

#team-workflow-panel-root
#team-widget-refresh,
#team-workflow-panel-root
#team-widget-close {
  width:
    38px;

  height:
    38px;

  flex-shrink:
    0;

  padding:
    0;

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

  border-radius:
    13px;

  background:
    rgba(
      255,
      255,
      255,
      0.075
    );

  color:
    #ffffff;

  font-size:
    1rem;
}

#team-workflow-panel-root
#team-widget-refresh:hover {
  background:
    rgba(
      59,
      130,
      246,
      0.18
    );

  border-color:
    rgba(
      96,
      165,
      250,
      0.3
    );
}

#team-workflow-panel-root
#team-widget-close:hover {
  background:
    rgba(
      239,
      68,
      68,
      0.16
    );

  border-color:
    rgba(
      248,
      113,
      113,
      0.26
    );
}

/* =========================
   FEEDBACK
========================= */

#team-workflow-panel-root
.team-chat-error,
#team-workflow-panel-root
.team-chat-notice {
  padding:
    10px 16px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

  font-size:
    0.75rem;

  font-weight:
    750;

  line-height:
    1.45;
}

#team-workflow-panel-root
.team-chat-error {
  background:
    rgba(
      239,
      68,
      68,
      0.1
    );

  color:
    #fecaca;
}

#team-workflow-panel-root
.team-chat-notice {
  background:
    rgba(
      59,
      130,
      246,
      0.09
    );

  color:
    #bfdbfe;
}

/* =========================
   BODY
========================= */

#team-workflow-panel-root
.team-widget-body {
  display:
    grid;

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

  flex:
    1;

  min-height:
    0;
}

/* =========================
   ONLINE USERS
========================= */

#team-workflow-panel-root
.team-users-list {
  min-height:
    0;

  overflow-y:
    auto;

  padding:
    12px;

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

  background:
    rgba(
      255,
      255,
      255,
      0.022
    );

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(
      148,
      163,
      184,
      0.3
    )
    transparent;
}

#team-workflow-panel-root
.team-users-list::-webkit-scrollbar {
  width:
    6px;
}

#team-workflow-panel-root
.team-users-list::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(
      148,
      163,
      184,
      0.28
    );
}

#team-workflow-panel-root
.team-user-item {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  width:
    100%;

  margin-bottom:
    8px;

  padding:
    11px 12px;

  border:
    1px solid
    transparent;

  border-radius:
    15px;

  background:
    rgba(
      255,
      255,
      255,
      0.042
    );

  color:
    #ffffff;

  text-align:
    left;
}

#team-workflow-panel-root
.team-user-item:hover,
#team-workflow-panel-root
.team-user-item.is-active {
  background:
    rgba(
      59,
      130,
      246,
      0.18
    );

  border-color:
    rgba(
      96,
      165,
      250,
      0.32
    );
}

#team-workflow-panel-root
.team-user-item strong,
#team-workflow-panel-root
.team-user-item small {
  display:
    block;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

#team-workflow-panel-root
.team-user-item strong {
  color:
    #ffffff;

  font-size:
    0.86rem;

  font-weight:
    900;
}

#team-workflow-panel-root
.team-user-item small {
  margin-top:
    3px;

  color:
    var(
      --text-muted,
      #94a3b8
    );

  font-size:
    0.7rem;

  line-height:
    1.35;
}

#team-workflow-panel-root
.team-user-item em {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    22px;

  height:
    22px;

  border-radius:
    999px;

  background:
    var(
      --red,
      #ef4444
    );

  color:
    #ffffff;

  font-size:
    0.7rem;

  font-style:
    normal;

  font-weight:
    900;
}

#team-workflow-panel-root
.team-user-status {
  width:
    10px;

  height:
    10px;

  border-radius:
    999px;

  background:
    rgba(
      148,
      163,
      184,
      0.42
    );
}

#team-workflow-panel-root
.team-user-status.is-online {
  background:
    var(
      --green,
      #10b981
    );

  box-shadow:
    0 0 0 4px
    rgba(
      16,
      185,
      129,
      0.13
    );
}

#team-workflow-panel-root
.team-users-empty {
  padding:
    24px 12px;

  color:
    var(
      --text-muted,
      #94a3b8
    );

  font-size:
    0.77rem;

  line-height:
    1.5;

  text-align:
    center;
}

/* =========================
   CHAT MAIN
========================= */

#team-workflow-panel-root
.team-chat-main {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  min-height:
    0;

  background:
    rgba(
      4,
      12,
      24,
      0.18
    );
}

/* =========================
   CHAT TITLE
========================= */

#team-workflow-panel-root
.team-chat-title {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    66px;

  padding:
    13px 16px;

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

  background:
    rgba(
      255,
      255,
      255,
      0.015
    );
}

#team-workflow-panel-root
.team-chat-title > div {
  display:
    grid;

  gap:
    4px;

  min-width:
    0;
}

#team-workflow-panel-root
.team-chat-title strong {
  overflow:
    hidden;

  color:
    #ffffff;

  font-size:
    0.96rem;

  font-weight:
    900;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

#team-workflow-panel-root
.team-chat-title small {
  overflow:
    hidden;

  color:
    var(
      --text-muted,
      #94a3b8
    );

  font-size:
    0.72rem;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

#team-workflow-panel-root
.team-chat-end-button {
  min-height:
    34px;

  flex-shrink:
    0;

  padding:
    7px 11px;

  border:
    1px solid
    rgba(
      248,
      113,
      113,
      0.18
    );

  border-radius:
    12px;

  background:
    rgba(
      239,
      68,
      68,
      0.075
    );

  color:
    #fecaca;

  font-size:
    0.68rem;

  font-weight:
    850;
}

#team-workflow-panel-root
.team-chat-end-button:hover {
  background:
    rgba(
      239,
      68,
      68,
      0.16
    );

  border-color:
    rgba(
      248,
      113,
      113,
      0.3
    );
}

/* =========================
   MESSAGES
========================= */

#team-workflow-panel-root
.team-chat-messages {
  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  gap:
    10px;

  min-height:
    0;

  overflow-y:
    auto;

  padding:
    16px;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(
      148,
      163,
      184,
      0.3
    )
    transparent;
}

#team-workflow-panel-root
.team-chat-messages::-webkit-scrollbar {
  width:
    6px;
}

#team-workflow-panel-root
.team-chat-messages::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(
      148,
      163,
      184,
      0.28
    );
}

#team-workflow-panel-root
.team-chat-message {
  align-self:
    flex-start;

  max-width:
    82%;

  padding:
    11px 13px;

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

  border-radius:
    17px 17px 17px 6px;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );
}

#team-workflow-panel-root
.team-chat-message.is-mine {
  align-self:
    flex-end;

  border-color:
    rgba(
      96,
      165,
      250,
      0.24
    );

  border-radius:
    17px 17px 6px 17px;

  background:
    linear-gradient(
      135deg,
      rgba(
        59,
        130,
        246,
        0.32
      ),
      rgba(
        37,
        99,
        235,
        0.2
      )
    );
}

#team-workflow-panel-root
.team-chat-message > div {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  margin-bottom:
    5px;
}

#team-workflow-panel-root
.team-chat-message strong {
  color:
    #ffffff;

  font-size:
    0.76rem;

  font-weight:
    900;
}

#team-workflow-panel-root
.team-chat-message small {
  color:
    var(
      --text-muted,
      #94a3b8
    );

  font-size:
    0.68rem;
}

#team-workflow-panel-root
.team-chat-message p {
  margin:
    0;

  color:
    #edf5ff;

  font-size:
    0.85rem;

  line-height:
    1.5;

  overflow-wrap:
    anywhere;
}

/* =========================
   EMPTY STATE
========================= */

#team-workflow-panel-root
.team-chat-empty {
  margin:
    auto;

  color:
    var(
      --text-muted,
      #94a3b8
    );

  font-size:
    0.78rem;

  line-height:
    1.5;

  text-align:
    center;
}

#team-workflow-panel-root
.team-chat-empty-large {
  display:
    grid;

  justify-items:
    center;

  gap:
    7px;

  padding:
    30px;
}

#team-workflow-panel-root
.team-chat-empty-large strong {
  color:
    #ffffff;

  font-size:
    0.95rem;
}

#team-workflow-panel-root
.team-chat-empty-large span {
  color:
    var(
      --text-muted,
      #94a3b8
    );

  font-size:
    0.76rem;
}

/* =========================
   CHAT FORM
========================= */

#team-workflow-panel-root
.team-chat-form {
  display:
    grid;

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

  gap:
    9px;

  padding:
    13px;

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

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );
}

#team-workflow-panel-root
.team-chat-form input {
  min-height:
    46px;

  padding:
    11px 13px;

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

  border-radius:
    15px;

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );

  color:
    #ffffff;

  font-size:
    0.84rem;
}

#team-workflow-panel-root
.team-chat-form input::placeholder {
  color:
    rgba(
      148,
      163,
      184,
      0.72
    );
}

#team-workflow-panel-root
.team-chat-form input:focus {
  outline:
    none;

  border-color:
    rgba(
      96,
      165,
      250,
      0.62
    );

  box-shadow:
    0 0 0 4px
    rgba(
      59,
      130,
      246,
      0.12
    );
}

#team-workflow-panel-root
.team-chat-form button {
  min-width:
    82px;

  border:
    1px solid
    rgba(
      147,
      197,
      253,
      0.2
    );

  border-radius:
    14px;

  background:
    linear-gradient(
      135deg,
      #3b82f6,
      #1d4ed8
    );

  color:
    #ffffff;

  font-size:
    0.8rem;

  font-weight:
    900;
}

#team-workflow-panel-root
.team-chat-form button:hover {
  background:
    linear-gradient(
      135deg,
      #60a5fa,
      #2563eb
    );
}

#team-workflow-panel-root
.team-chat-form input:disabled,
#team-workflow-panel-root
.team-chat-form button:disabled {
  opacity:
    0.5;

  cursor:
    not-allowed;

  transform:
    none;
}

/* =========================
   SIDEBAR WIDTH ALIGNMENT
========================= */

@media (
  max-width:
  1400px
) {

  #team-workflow-panel-root
  .team-widget-panel {
    left:
      calc(
        24px +
        220px +
        32px
      );
  }

}

/* =========================
   TABLET
========================= */

@media (
  max-width:
  900px
) {

  #team-workflow-panel-root
  .team-widget-panel {
    left:
      14px;

    right:
      auto;

    bottom:
      14px;

    width:
      calc(
        100vw -
        28px
      );

    height:
      calc(
        100vh -
        28px
      );
  }

  #team-workflow-panel-root
  .team-widget-body {
    grid-template-columns:
      1fr;
  }

  #team-workflow-panel-root
  .team-users-list {
    max-height:
      180px;

    border-right:
      0;

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

}

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

@media (
  max-width:
  560px
) {

  #team-workflow-panel-root
  .team-widget-panel {
    border-radius:
      22px;
  }

  #team-workflow-panel-root
  .team-widget-header {
    min-height:
      62px;

    padding:
      13px 14px;
  }

  #team-workflow-panel-root
  .team-chat-title {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  #team-workflow-panel-root
  .team-chat-end-button {
    width:
      100%;
  }

  #team-workflow-panel-root
  .team-chat-form {
    grid-template-columns:
      1fr;
  }

  #team-workflow-panel-root
  .team-chat-form button {
    width:
      100%;
  }

}