.chat-history-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg-primary);

  .history-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    .status-msg {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-tertiary);
      font-size: 14px;

      &.error {
        color: var(--danger);
      }

      &.empty {
        color: var(--text-tertiary);
      }
    }
  }

  .history-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;

    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;
      background: var(--bg-tertiary);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .avatar-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-tertiary);
        font-size: 16px;
        font-weight: 500;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
      }
    }

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

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

        .sender {
          font-size: 14px;
          font-weight: 500;
          color: var(--text-primary);
        }

        .time {
          font-size: 12px;
          color: var(--text-tertiary);
          flex-shrink: 0;
          margin-left: 8px;
        }
      }

      .bubble {
        background: var(--bg-secondary);
        padding: 10px 14px;
        border-radius: 18px 18px 18px 4px;
        word-wrap: break-word;
        max-width: 100%;
        display: inline-block;

        &.image-bubble {
          padding: 0;
          background: transparent;
        }

        .text-content {
          font-size: 14px;
          line-height: 1.6;
          color: var(--text-primary);
          white-space: pre-wrap;
          word-break: break-word;
        }

        .media-content {
          img {
            max-width: 100%;
            max-height: 300px;
            border-radius: 8px;
            display: block;
          }

          .media-tip {
            padding: 8px 12px;
            color: var(--text-tertiary);
            font-size: 13px;
          }
        }

        .media-placeholder {
          font-size: 14px;
          color: var(--text-secondary);
          padding: 4px 0;
        }
      }
    }
  }
}