/* =========================
   SALES COPILOT PANEL
========================= */

.sales-copilot-widget-toggle {
  min-width: 104px;

  overflow: hidden;

  isolation: isolate;

  background:
    linear-gradient(
      135deg,
      #8b5cf6 0%,
      #6366f1 48%,
      #2563eb 100%
    );

  border-color:
    rgba(
      196,
      181,
      253,
      0.38
    );

  box-shadow:
    0 18px 46px
    rgba(
      99,
      102,
      241,
      0.38
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.16
    );

  letter-spacing:
    -0.01em;
}

.sales-copilot-widget-toggle::before {
  content:
    "AI";

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    27px;

  height:
    27px;

  flex-shrink:
    0;

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

  border-radius:
    10px;

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

  color:
    #ffffff;

  font-size:
    0.63rem;

  font-weight:
    950;

  letter-spacing:
    0.04em;

  box-shadow:
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.14
    );
}

.sales-copilot-widget-toggle:hover {
  background:
    linear-gradient(
      135deg,
      #a78bfa 0%,
      #7c3aed 48%,
      #3b82f6 100%
    );

  border-color:
    rgba(
      221,
      214,
      254,
      0.58
    );

  box-shadow:
    0 22px 56px
    rgba(
      99,
      102,
      241,
      0.48
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.2
    );
}

.sales-copilot-widget-panel {
  width:
    min(
      540px,
      calc(
        100vw -
        48px
      )
    );

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

  border-color:
    rgba(
      167,
      139,
      250,
      0.3
    );

  background:
    radial-gradient(
      circle at 92% 2%,
      rgba(
        139,
        92,
        246,
        0.18
      ),
      transparent 34%
    ),
    radial-gradient(
      circle at 8% 92%,
      rgba(
        59,
        130,
        246,
        0.1
      ),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(
        18,
        24,
        48,
        0.99
      ),
      rgba(
        7,
        15,
        29,
        0.99
      )
    );

  box-shadow:
    0 34px 100px
    rgba(
      0,
      0,
      0,
      0.56
    ),
    0 0 0 1px
    rgba(
      139,
      92,
      246,
      0.08
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.07
    );
}

.sales-copilot-widget-panel
.team-widget-header {
  min-height:
    74px;

  padding:
    18px 20px;

  border-bottom-color:
    rgba(
      167,
      139,
      250,
      0.16
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        139,
        92,
        246,
        0.18
      ),
      rgba(
        59,
        130,
        246,
        0.07
      )
    );
}

.sales-copilot-widget-panel
.team-widget-header > div {
  display:
    grid;

  gap:
    4px;
}

.sales-copilot-widget-panel
.team-widget-header strong {
  color:
    #ffffff;

  font-size:
    1.12rem;

  font-weight:
    950;

  letter-spacing:
    -0.025em;
}

.sales-copilot-widget-panel
.team-widget-header span {
  margin:
    0;

  color:
    #c4b5fd;

  font-size:
    0.74rem;

  font-weight:
    850;

  letter-spacing:
    0.035em;

  text-transform:
    uppercase;
}

#sales-copilot-widget-close {
  width:
    38px;

  height:
    38px;

  flex-shrink:
    0;

  padding:
    0;

  border-radius:
    14px;

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

  border-color:
    rgba(
      255,
      255,
      255,
      0.1
    );

  color:
    #ffffff;
}

#sales-copilot-widget-close:hover {
  background:
    rgba(
      239,
      68,
      68,
      0.18
    );

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

.sales-copilot-widget-panel
.team-chat-main {
  background:
    rgba(
      4,
      11,
      23,
      0.18
    );
}

.sales-copilot-widget-panel
.team-chat-title {
  align-items:
    center;

  min-height:
    70px;

  padding:
    15px 18px;

  border-bottom-color:
    rgba(
      167,
      139,
      250,
      0.12
    );

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

.sales-copilot-widget-panel
.team-chat-title > div {
  display:
    grid;

  gap:
    4px;

  min-width:
    0;
}

.sales-copilot-widget-panel
.team-chat-title strong {
  overflow:
    hidden;

  color:
    #ffffff;

  font-size:
    0.98rem;

  font-weight:
    900;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

.sales-copilot-widget-panel
.team-chat-title small {
  overflow:
    hidden;

  color:
    #aebfdb;

  font-size:
    0.73rem;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

.sales-copilot-connection-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    31px;

  flex-shrink:
    0;

  padding:
    7px 11px;

  border:
    1px solid
    rgba(
      167,
      139,
      250,
      0.25
    );

  border-radius:
    999px;

  background:
    rgba(
      139,
      92,
      246,
      0.12
    );

  color:
    #ddd6fe;

  font-size:
    0.7rem;

  font-weight:
    900;

  white-space:
    nowrap;
}

.sales-copilot-connection-notice {
  display:
    grid;

  gap:
    7px;

  margin:
    14px 14px 0;

  padding:
    14px 15px;

  border:
    1px solid
    rgba(
      167,
      139,
      250,
      0.17
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(
        139,
        92,
        246,
        0.1
      ),
      rgba(
        255,
        255,
        255,
        0.035
      )
    );

  box-shadow:
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.035
    );
}

.sales-copilot-connection-notice strong {
  color:
    #f5f3ff;

  font-size:
    0.82rem;

  font-weight:
    900;
}

.sales-copilot-connection-notice span {
  color:
    #aebfdb;

  font-size:
    0.75rem;

  line-height:
    1.5;

  overflow-wrap:
    anywhere;
}

.sales-copilot-widget-panel
.team-workspace-switch {
  gap:
    9px;

  padding:
    10px 14px 14px;

  border-bottom:
    0;
}

.sales-copilot-widget-panel
.team-workspace-button {
  min-height:
    42px;

  padding:
    9px 12px;

  border-radius:
    14px;

  font-size:
    0.75rem;

  font-weight:
    900;
}

.sales-copilot-widget-panel
.team-workspace-button.is-active {
  background:
    linear-gradient(
      135deg,
      rgba(
        139,
        92,
        246,
        0.52
      ),
      rgba(
        79,
        70,
        229,
        0.28
      )
    );

  border-color:
    rgba(
      196,
      181,
      253,
      0.43
    );

  box-shadow:
    0 12px 28px
    rgba(
      99,
      102,
      241,
      0.2
    );
}

.sales-copilot-widget-panel
.team-chat-messages {
  gap:
    12px;

  padding:
    16px 14px;
}

.sales-copilot-widget-panel
.team-chat-message {
  max-width:
    88%;

  border-color:
    rgba(
      167,
      139,
      250,
      0.12
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.075
      ),
      rgba(
        139,
        92,
        246,
        0.055
      )
    );
}

.sales-copilot-widget-panel
.team-chat-message.is-mine {
  background:
    linear-gradient(
      135deg,
      rgba(
        139,
        92,
        246,
        0.38
      ),
      rgba(
        79,
        70,
        229,
        0.24
      )
    );

  border-color:
    rgba(
      196,
      181,
      253,
      0.26
    );
}

.sales-copilot-widget-panel
.team-chat-form {
  padding:
    13px 14px 14px;

  border-top-color:
    rgba(
      167,
      139,
      250,
      0.13
    );

  background:
    rgba(
      10,
      17,
      34,
      0.72
    );
}

.sales-copilot-widget-panel
.team-chat-form input {
  min-height:
    48px;

  border-color:
    rgba(
      167,
      139,
      250,
      0.18
    );

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

.sales-copilot-widget-panel
.team-chat-form input:focus {
  border-color:
    rgba(
      167,
      139,
      250,
      0.68
    );

  box-shadow:
    0 0 0 4px
    rgba(
      139,
      92,
      246,
      0.13
    );
}

.sales-copilot-widget-panel
.team-chat-form button {
  background:
    linear-gradient(
      135deg,
      #8b5cf6,
      #4f46e5
    );

  box-shadow:
    0 12px 28px
    rgba(
      99,
      102,
      241,
      0.24
    );
}

.sales-copilot-widget-panel
.team-chat-form input:disabled,
.sales-copilot-widget-panel
.team-chat-form button:disabled {
  opacity:
    0.48;

  cursor:
    not-allowed;

  transform:
    none;

  box-shadow:
    none;
}

/* =========================
   SALES COPILOT ACTION MODE
========================= */

.sales-copilot-widget-panel.is-action-mode {
  width:
    min(
      680px,
      calc(
        100vw -
        48px
      )
    );

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

  border-color:
    rgba(
      167,
      139,
      250,
      0.4
    );

  background:
    radial-gradient(
      circle at 90% 4%,
      rgba(
        139,
        92,
        246,
        0.22
      ),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(
        20,
        25,
        52,
        0.995
      ),
      rgba(
        7,
        14,
        29,
        0.995
      )
    );

  box-shadow:
    0 38px 110px
    rgba(
      0,
      0,
      0,
      0.62
    ),
    0 0 0 1px
    rgba(
      167,
      139,
      250,
      0.12
    );
}

.sales-copilot-widget-panel.is-action-mode
.team-widget-header {
  min-height:
    68px;

  padding:
    16px 20px;
}

.sales-copilot-widget-panel.is-action-mode
.team-chat-title {
  min-height:
    62px;

  padding:
    13px 18px;
}

.sales-copilot-widget-panel.is-action-mode
.team-chat-main {
  min-height:
    0;

  overflow:
    hidden;

  background:
    linear-gradient(
      180deg,
      rgba(
        8,
        15,
        31,
        0.36
      ),
      rgba(
        4,
        10,
        22,
        0.2
      )
    );
}

.sales-copilot-widget-panel.is-action-mode
.sales-copilot-action-editor {
  flex:
    1;

  min-height:
    0;

  margin:
    16px;

  padding:
    18px;

  overflow:
    hidden;

  border-radius:
    22px;

  border-color:
    rgba(
      167,
      139,
      250,
      0.28
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        139,
        92,
        246,
        0.115
      ),
      rgba(
        255,
        255,
        255,
        0.035
      )
    );

  box-shadow:
    0 18px 50px
    rgba(
      0,
      0,
      0,
      0.24
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.045
    );
}

.sales-copilot-widget-panel.is-action-mode
.sales-copilot-action-editor
.team-workspace-switch {
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;

  padding:
    0;
}

.sales-copilot-widget-panel.is-action-mode
.sales-copilot-action-editor
.team-workspace-button {
  min-height:
    44px;

  border-radius:
    14px;
}

.sales-copilot-widget-panel.is-action-mode
#sales-copilot-action-text {
  flex:
    1;

  min-height:
    360px !important;

  max-height:
    none !important;

  padding:
    18px !important;

  resize:
    none !important;

  border:
    1px solid
    rgba(
      167,
      139,
      250,
      0.3
    ) !important;

  border-radius:
    18px !important;

  background:
    rgba(
      3,
      9,
      21,
      0.88
    ) !important;

  color:
    #f8fafc !important;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size:
    0.9rem !important;

  font-weight:
    550;

  line-height:
    1.7 !important;

  caret-color:
    #c4b5fd;

  box-shadow:
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.045
    ),
    inset 0 0 0 1px
    rgba(
      0,
      0,
      0,
      0.12
    );
}

.sales-copilot-widget-panel.is-action-mode
#sales-copilot-action-text:focus {
  border-color:
    rgba(
      196,
      181,
      253,
      0.78
    ) !important;

  background:
    rgba(
      5,
      12,
      28,
      0.96
    ) !important;

  box-shadow:
    0 0 0 4px
    rgba(
      139,
      92,
      246,
      0.14
    ),
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.05
    ) !important;
}

.sales-copilot-widget-panel.is-action-mode
#sales-copilot-action-text::-webkit-scrollbar {
  width:
    8px;
}

.sales-copilot-widget-panel.is-action-mode
#sales-copilot-action-text::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(
      167,
      139,
      250,
      0.38
    );
}

@media (
  max-width:
  900px
) {

  .sales-copilot-widget-panel {
    right:
      14px;

    bottom:
      14px;

    width:
      calc(
        100vw -
        28px
      );

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

}

@media (
  max-width:
  560px
) {

  .sales-copilot-widget-toggle {
    min-width:
      52px;

    width:
      52px;

    padding:
      0;

    font-size:
      0;
  }

  .sales-copilot-widget-toggle::before {
    width:
      30px;

    height:
      30px;

    font-size:
      0.68rem;
  }

  .sales-copilot-widget-panel {
    border-radius:
      22px;
  }

  .sales-copilot-widget-panel
  .team-widget-header {
    min-height:
      66px;

    padding:
      14px 16px;
  }

  .sales-copilot-widget-panel
  .team-chat-title {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .sales-copilot-connection-status {
    width:
      100%;
  }

  .sales-copilot-widget-panel
  .team-workspace-switch {
    grid-template-columns:
      1fr;
  }

  .sales-copilot-widget-panel
  .team-chat-form {
    grid-template-columns:
      1fr;
  }

  .sales-copilot-widget-panel
  .team-chat-form button {
    width:
      100%;
  }

}

/* =========================
   COMPACT DESKTOP PANEL
========================= */

@media (
  min-width:
  901px
) {

  .sales-copilot-widget-panel:not(
    .is-action-mode
  ) {
    width:
      clamp(
        360px,
        25vw,
        420px
      );

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

    border-radius:
      24px;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-widget-header {
    min-height:
      60px;

    padding:
      13px 15px;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-widget-header strong {
    font-size:
      1rem;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-widget-header span {
    font-size:
      0.66rem;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-chat-title {
    min-height:
      58px;

    padding:
      11px 13px;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-connection-status {
    min-height:
      27px;

    padding:
      5px 9px;

    font-size:
      0.64rem;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-connection-notice {
    gap:
      5px;

    margin:
      9px 10px 0;

    padding:
      9px 10px;

    border-radius:
      14px;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-connection-notice strong {
    font-size:
      0.72rem;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-connection-notice span {
    font-size:
      0.67rem;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-chat-messages {
    gap:
      9px;

    padding:
      11px 10px;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-chat-message {
    max-width:
      92%;

    padding:
      10px 11px;

    border-radius:
      15px 15px 15px 5px;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-chat-message.is-mine {
    border-radius:
      15px 15px 5px 15px;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-chat-message p {
    font-size:
      0.82rem;

    line-height:
      1.48;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-chat-form {
    gap:
      8px;

    padding:
      10px;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-chat-form input {
    min-height:
      44px;

    padding:
      10px 12px;

    border-radius:
      14px;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-chat-form button {
    min-width:
      70px;

    padding:
      10px 13px;

    border-radius:
      14px;
  }

}
/* =========================
   COMPACT AI PICKER
========================= */

@media (
  min-width:
  561px
) {

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-chat-main {
    position:
      relative;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .team-chat-title {
    position:
      relative;

    padding-right:
      148px;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-ai-picker {
    position:
      absolute !important;

    top:
      10px;

    right:
      10px;

    z-index:
      40;

    display:
      block !important;

    width:
      calc(
        100% -
        20px
      );

    margin:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    pointer-events:
      none;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-ai-picker >
  summary {
    display:
      flex;

    align-items:
      center;

    justify-content:
      flex-end;

    width:
      100%;

    min-height:
      31px;

    list-style:
      none;

    cursor:
      pointer;

    pointer-events:
      auto;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-ai-picker >
  summary::-webkit-details-marker {
    display:
      none;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-ai-picker >
  summary >
  span {
    display:
      inline-flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    width:
      auto !important;

    margin-right:
      64px;

    gap:
      0 !important;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-ai-picker >
  summary >
  span >
  span {
    display:
      none !important;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-ai-picker >
  summary >
  span >
  strong {
    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    min-height:
      28px;

    padding:
      5px 9px;

    border:
      1px solid
      rgba(
        167,
        139,
        250,
        0.25
      );

    border-radius:
      999px;

    background:
      rgba(
        139,
        92,
        246,
        0.1
      );

    color:
      #ddd6fe;

    font-size:
      0.64rem;

    font-weight:
      900;

    white-space:
      nowrap;

    transition:
      background 0.18s ease,
      border-color 0.18s ease,
      color 0.18s ease;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-ai-picker >
  summary:hover >
  span >
  strong {
    border-color:
      rgba(
        196,
        181,
        253,
        0.48
      );

    background:
      rgba(
        139,
        92,
        246,
        0.2
      );

    color:
      #ffffff;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-ai-picker[open] >
  summary >
  span >
  strong {
    border-color:
      rgba(
        196,
        181,
        253,
        0.55
      );

    background:
      rgba(
        139,
        92,
        246,
        0.28
      );

    color:
      #ffffff;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-ai-picker[open] >
  summary >
  span >
  strong::after {
    content:
      " ×";

    margin-left:
      4px;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-ai-picker >
  div {
    position:
      relative;

    z-index:
      41;

    display:
      grid !important;

    gap:
      9px !important;

    width:
      100%;

    margin-top:
      18px;

    padding:
      14px !important;

    border:
      1px solid
      rgba(
        167,
        139,
        250,
        0.28
      );

    border-radius:
      18px;

    background:
      linear-gradient(
        145deg,
        rgba(
          31,
          27,
          68,
          0.99
        ),
        rgba(
          11,
          18,
          38,
          0.99
        )
      );

    box-shadow:
      0 22px 60px
      rgba(
        0,
        0,
        0,
        0.55
      ),
      inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.06
      );

    pointer-events:
      auto;
  }

  .sales-copilot-widget-panel:not(
    .is-action-mode
  )
  .sales-copilot-ai-picker >
  div >
  .team-workspace-switch {
    padding:
      4px 0 0;

    margin:
      0;
  }

}