/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

@import '@delon/theme/index';

.chat-container {
  display: flex;
  height: 100%;
  min-height: 500px;
  max-height: 80vh;
  background: @layout-body-background;

  .chat-sidebar {
    width: 300px;
    background: #fff !important;
    border-right: 1px solid @border-color-base;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;

    &.collapsed {
      width: 0;
      overflow: hidden;
    }

    .sidebar-header {
      padding: 16px;
      border-bottom: 1px solid @border-color-base;
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        margin: 0;
        font-size: 16px;
        color: @text-color;
      }
    }

    .conversation-list {
      flex: 1;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: @border-color-base transparent;

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: @border-color-base;
        border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: @border-color-split;
      }

      .conversation-item {
        padding: 12px 16px;
        border-bottom: 1px solid @border-color-split;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color 0.2s;

        &:hover {
          background-color: @item-hover-bg;

          .delete-btn {
            opacity: 1;
          }
        }

        &.active {
          background-color: @primary-1;
          border-left: 3px solid @primary-color;
        }

        .conversation-content {
          flex: 1;
          min-width: 0;

          .conversation-title {
            font-size: 14px;
            color: @text-color;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .conversation-time {
            font-size: 12px;
            color: @text-color-secondary;
          }
        }

        .delete-btn {
          opacity: 0;
          transition: opacity 0.2s;
          margin-left: 8px;
        }
      }
    }
  }

  .chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: @layout-body-background;

    .chat-header {
      padding: 16px;
      border-bottom: 1px solid @border-color-base;
      display: flex;
      align-items: center;
      gap: 12px;

      .sidebar-toggle {
        font-size: 16px;
      }

      .chat-title {
        flex: 1;

        h2 {
          margin: 0;
          font-size: 18px;
          color: @heading-color;
        }
      }

      .header-spacer {
        flex: 1;
      }

      .chat-header-actions {
        margin-right: 80px; // Leave space for page-level buttons

        button {
          display: flex;
          align-items: center;
          gap: 6px;

          i {
            font-size: 14px;
          }
        }
      }
    }

    .messages-container {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      background: @layout-body-background;
      scrollbar-width: thin;
      scrollbar-color: @border-color-base transparent;
      scroll-behavior: smooth;

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: @border-color-base;
        border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background: @border-color-split;
      }

      .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        opacity: 0.8;

        p {
          margin-top: 16px;
          color: @text-color-secondary;
          font-size: 14px;
        }
      }

      .welcome-message {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;

        .welcome-content {
          text-align: center;
          max-width: 500px;

          .welcome-icon {
            width: 64px;
            height: 62px;
            margin-bottom: 16px;
            display: block;
            margin-left: auto;
            margin-right: auto;
          }

          h3 {
            color: @heading-color;
            margin-bottom: 16px;
          }

          p {
            color: @text-color;
            margin-bottom: 16px;
            line-height: 1.5;
          }

          ul {
            text-align: left;
            color: @text-color;
            margin: 16px 0;

            li {
              margin-bottom: 8px;
            }
          }
        }
      }

      .message {
        display: flex;
        margin-bottom: 24px;
        animation: fadeIn 0.3s ease;

        &.user-message {
          justify-content: flex-end;

          .message-content {
            background: #3f51b5;
            color: #ffffff;

            .message-text {
              color: #ffffff;
            }

            .message-header {
              .message-role {
                color: rgba(255, 255, 255, 0.85);
              }

              .message-time {
                color: rgba(255, 255, 255, 0.65);
              }
            }
          }

          .message-avatar {
            order: 2;
            margin-left: 12px;
            margin-right: 0;
          }
        }

        &.system-push-message {
          .message-avatar {
            background: #e6f7ff;

            i {
              color: #1890ff;
            }
          }

          .message-content {
            background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
            border-left: 3px solid #1890ff;

            .message-header .message-role {
              color: #096dd9;
              font-weight: 600;
            }
          }
        }

        .message-avatar {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          background: @background-color-light;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
          flex-shrink: 0;

          i {
            font-size: 16px;
            color: @text-color-secondary;
          }
        }

        .message-content {
          max-width: 70%;
          background: #fff;
          border-radius: 8px;
          padding: 12px 16px;
          box-shadow: @box-shadow-base;

          .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;

            .message-role {
              font-weight: 500;
              font-size: 12px;
              color: @text-color;
            }

            .message-time {
              font-size: 11px;
              color: @text-color-secondary;
            }

            .streaming-indicator {
              margin-left: 8px;
              display: flex;
              align-items: center;
              gap: 4px;
              color: @primary-color;
              font-size: 11px;
              opacity: 0.8;

              i {
                font-size: 12px;
              }
            }
          }

          .message-text {
            word-wrap: break-word;
          }

          .typing-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            color: @text-color-secondary;
            font-style: italic;
            font-size: 13px;
            opacity: 0.7;
            padding: 4px 0;
          }
        }
      }
    }

    .input-area {
      padding: 16px;
      border-top: 1px solid @border-color-base;
      background: #fff;

      .input-container {
        display: flex;
        gap: 12px;
        align-items: flex-end;

        nz-textarea-count {
          flex: 1;
        }

        .send-button {
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .input-hint {
        margin-top: 8px;
        text-align: center;

        small {
          color: @text-color-secondary;
        }
      }
    }
  }
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Responsive design
@media (max-width: 768px) {
  .chat-container {
    .chat-sidebar {
      position: absolute;
      height: 100%;
      z-index: 100;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease;

      &.collapsed {
        transform: translateX(-100%);
        width: 300px;
      }
    }

    .chat-main {
      .messages-container {
        .message {

          &.user-message .message-content,
          .message-content {
            max-width: 85%;
          }
        }
      }

      .input-area {
        .input-container {
          flex-direction: column;
          gap: 8px;

          .send-button {
            align-self: flex-end;
            width: auto;
            min-width: 80px;
          }
        }
      }
    }
  }
}

// Extra small devices
@media (max-width: 480px) {
  .chat-container {
    min-height: 400px;
    max-height: 90vh;

    .chat-main {
      .messages-container {
        padding: 12px;

        .message {
          margin-bottom: 16px;

          .message-content {
            max-width: 90%;
            padding: 10px 12px;
          }
        }
      }

      .input-area {
        padding: 12px;
      }
    }
  }
}

// Dark theme overrides with maximum specificity
:host-context([data-theme='dark']) .chat-container,
[data-theme='dark'] .chat-container,
body[data-theme='dark'] .chat-container {
  background: #000;

  .chat-sidebar {
    background: #000 !important;
    border-right-color: @border-color-base;

    .sidebar-header {
      border-bottom-color: @border-color-base;
      background: #000 !important;
    }

    .sidebar-header h3 {
      color: fade(@white, 85%);
    }

    .conversation-list {
      .conversation-item {
        border-bottom-color: @border-color-split;
        background: transparent;
        border-left: 3px solid transparent;

        &:hover {
          background: transparent;

          .conversation-content .conversation-title {
            color: @primary-color;
          }
        }

        &.active {
          background: fade(@white, 5%);
          border-left: 3px solid @primary-color;

          .conversation-content .conversation-title {
            color: @primary-color;
          }
        }

        .conversation-content {
          .conversation-title {
            color: fade(@white, 65%);
          }

          .conversation-time {
            color: fade(@white, 45%);
          }
        }
      }
    }
  }

  .chat-main {
    background: #000;

    .chat-header {
      border-bottom-color: @border-color-base;
      background: #000;

      .chat-title h2 {
        color: fade(@white, 85%);
      }
    }

    .messages-container {
      background: #000;

      .loading-container {
        p {
          color: fade(@white, 65%);
        }
      }

      .welcome-message .welcome-content {
        h3 {
          color: fade(@white, 85%);
        }

        p,
        ul {
          color: fade(@white, 65%);
        }
      }

      .message {
        .message-avatar {
          background: fade(@white, 8%);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

          i {
            color: fade(@white, 65%);
          }
        }

        .message-content {
          background: #141414 !important;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

          .message-header {
            .message-role {
              color: fade(@white, 85%);
            }

            .message-time {
              color: fade(@white, 45%);
            }

            .streaming-indicator {
              color: @primary-color;
            }
          }

          .message-text {
            color: fade(@white, 85%);
          }

          .typing-indicator {
            color: fade(@white, 45%);
          }
        }

        &.user-message .message-content {
          background: @primary-color;

          .message-text {
            color: @white;
          }

          .message-header {
            .message-role {
              color: fade(@white, 90%);
            }

            .message-time {
              color: fade(@white, 70%);
            }
          }
        }
      }
    }

    .input-area {
      background: #000 !important;
      border-top-color: @border-color-base;

      .input-hint small {
        color: fade(@white, 45%);
      }
    }
  }
}



// Force input styling for dark theme
[data-theme='dark'] {
  .chat-container .input-area {
    .ant-input {
      background: fade(@white, 8%) !important;
      border-color: @border-color-split !important;
      color: fade(@white, 85%) !important;

      &::placeholder {
        color: fade(@white, 45%) !important;
      }

      &:focus,
      &:hover {
        border-color: @primary-color !important;
        box-shadow: 0 0 0 2px fade(@primary-color, 20%) !important;
      }
    }

    .ant-input-data-count {
      color: fade(@white, 45%) !important;
    }
  }

  // Fix dropdown/select styling in dark theme
  .ant-select {
    .ant-select-selector {
      background: fade(@white, 8%) !important;
      border-color: @border-color-split !important;
      color: fade(@white, 85%) !important;
    }

    .ant-select-selection-placeholder {
      color: fade(@white, 45%) !important;
    }

    &:hover .ant-select-selector {
      border-color: @primary-color !important;
    }

    &.ant-select-focused .ant-select-selector {
      border-color: @primary-color !important;
      box-shadow: 0 0 0 2px fade(@primary-color, 20%) !important;
    }
  }

  // Fix dropdown options styling
  .ant-select-dropdown {
    background: #141414 !important;
    border: 1px solid @border-color-split !important;

    .ant-select-item {
      color: fade(@white, 85%) !important;

      &:hover {
        background: fade(@white, 8%) !important;
      }

      &.ant-select-item-option-selected {
        background: @primary-color !important;
        color: @white !important;
      }
    }
  }
}

// Additional high-specificity overrides for dark theme
[data-theme="dark"] .chat-container .chat-sidebar {
  background: #000 !important;
}

[data-theme="dark"] .chat-container .chat-sidebar .sidebar-header {
  background: #000 !important;
}

[data-theme="dark"] .chat-container .chat-main .messages-container .message .message-content {
  background: #141414 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  border: none !important;
}

[data-theme="dark"] .chat-container .chat-main .input-area {
  background: #000 !important;
}

// OpenAI Configuration Modal Styles
.config-alert {
  margin-top: 16px;
}

.form-help {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 4px;
  margin-bottom: 0;
}

.validation-result {
  margin-top: 8px;

  nz-alert {
    font-size: 12px;
  }
}

// Provider configuration form styles
.provider-config-form {
  .provider-select-row {
    display: flex;
    align-items: center;
    gap: 8px;

    nz-select {
      flex: 1;
    }
  }

  .baseurl-input-row {
    display: flex;
    align-items: center;
    gap: 8px;

    nz-input-group {
      flex: 1;
    }

    .reset-btn {
      flex-shrink: 0;
    }
  }

  .form-item-with-help {
    margin-bottom: 8px;

    +.form-help {
      margin-bottom: 16px;
    }
  }
}

nz-modal {
  .ant-modal-body {
    padding: 24px;
  }

  .ant-form-item {
    margin-bottom: 16px;
  }

  .ant-form-item-label {
    padding-bottom: 4px;
  }
}