@charset "UTF-8";
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [AI SD1](https://ai.sd1.su)
 * @summary Стили для отображения списка и карточек моделей AI
 * @created 2026-01
 * @modified 2026-01
 *
 * @link https://ai.sd1.su/pages/models.php
 * @file D:/kz/kz-controls/sd1.su/cdn.sd1.su/css/domain/sdc-sd1-ai-models-view.css
 *
 * @remarks
 * - Используется методология БЭМ
 * - Стилизация без сторонних фреймворков
 * - Соблюдать правила оформления кода: `C:\Users\zerohold\Documents\Cline\Rules\rules-css-style-guide.md`
 * =============================================================================
 */

/* --- ГЛОБАЛЬНЫЕ НАСТРОЙКИ КОМПОНЕНТА */

/* Принудительно устанавливаем border-box для всех элементов компонента,
   чтобы padding и border не увеличивали ширину элементов и не вызывали прокрутку */
.ai-models,
.ai-controls,
.ai-grid,
.ai-card,
.ai-table-container,
[class^="ai-"]
{
  box-sizing: border-box;
}

[class^="ai-"] *
{
  box-sizing: border-box;
}

/* --- БЛОК: ai-models (Основной контейнер) */

.ai-models
{

  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: rgb(51, 65, 85);
}

/* --- БЛОК: ai-controls (Панель управления) */

.ai-controls
{

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;


  background-color: rgb(248, 250, 252);
}

.ai-controls__group
{

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ai-controls__label
{

  font-weight: 500;
  color: rgb(100, 116, 139);
}


/* ЭЛЕМЕНТ: Селект сортировки */
.ai-controls__select
{

  padding: 8px 12px;
  border: 1px solid rgb(203, 213, 225);
  border-radius: 8px;


  font-size: 14px;
  color: rgb(51, 65, 85);


  background-color: rgb(255, 255, 255);
  outline: none;
  cursor: pointer;
}

.ai-controls__select:focus
{

  border-color: rgb(124, 58, 237);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

/* --- БЛОК: ai-grid (Сетка карточек) */

.ai-grid
{

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* ЭЛЕМЕНТ: Карточка модели */
.ai-card
{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: 10px 5px 6px -1px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.ai-card:hover
{
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.15);
}

.ai-card__header
{

  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.ai-card__icon
{

  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 16px;
  border-radius: 8px;
  overflow: hidden;


  background-color: rgb(226, 232, 240);
}

.ai-card__icon img
{

  width: 100%;
  height: 100%;


  object-fit: cover;
}

.ai-card__title-block
{

  overflow: hidden;
}

.ai-card__title
{
  margin: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent-red);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ai-card__status
{
  font-size: 12px;
  font-weight: 500;
}

.ai-card__status--online
{

  color: rgb(16, 185, 129);
}

.ai-card__status--offline
{

  color: rgb(239, 68, 68);
}

/* ЭЛЕМЕНТ: Теги */
.ai-tags,
.ai-tags-list
{

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ai-tags-list
{
  margin-bottom: 0;
}

.ai-tag
{

  padding: 2px 8px;
  border-radius: 12px;


  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.ai-tag--web
{

  color: rgb(30, 64, 175);


  background-color: rgb(219, 234, 254);
}

.ai-tag--reasoning
{

  color: rgb(154, 52, 18);


  background-color: rgb(255, 237, 213);
}

.ai-tag--tools
{

  color: rgb(91, 33, 182);


  background-color: rgb(237, 233, 254);
}

.ai-tag--vision
{

  color: rgb(157, 23, 77);


  background-color: rgb(252, 231, 243);
}

.ai-tag--new
{

  color: rgb(22, 101, 52);

  background-color: rgb(220, 252, 231);
}

.ai-tag--arch
{

  color: rgb(107, 33, 168);

  background-color: rgb(243, 232, 255);
}

.ai-tag--quant
{

  color: rgb(133, 77, 14);

  background-color: rgb(254, 249, 195);
}

.ai-tag--free
{

  color: rgb(21, 128, 61);

  background-color: rgb(220, 252, 231);
  border: 1px solid rgb(134, 239, 172);
}

.ai-tag--neutral
{

  color: rgb(71, 85, 105);


  background-color: rgb(241, 245, 249);
}

.ai-badge
{

  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;


  font-size: 12px;
  color: rgb(71, 85, 105);


  background-color: rgb(241, 245, 249);
}

.ai-card__details
{

  flex-grow: 1;
  margin-bottom: 16px;


  font-size: 14px;
}

.ai-detail-row
{

  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgb(241, 245, 249);
}

.ai-detail-row:last-child
{

  border-bottom: none;
}

.ai-detail-label
{

  color: rgb(100, 116, 139);
}

.ai-detail-value
{

  font-weight: 500;
  color: rgb(51, 65, 85);
}

.ai-detail-value--code
{

  font-family: monospace;
  font-size: 13px;
  color: rgb(71, 85, 105);
}

.ai-card__footer
{

  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgb(226, 232, 240);
}

.ai-price-title
{

  margin-bottom: 8px;


  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgb(148, 163, 184);
}

.ai-price-row
{

  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;


  font-size: 13px;
}

.ai-price-val
{

  font-family: monospace;
  font-weight: 600;
}

/* --- БЛОК: ai-table (Табличный вид) */

.ai-table-container
{

  overflow-x: auto;
  border-radius: 12px;


  background: rgb(255, 255, 255);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ai-table
{

  width: 100%;
  border-collapse: collapse;


  font-size: 14px;
}

.ai-table th
{

  padding: 12px 16px;
  border-bottom: 2px solid rgb(226, 232, 240);


  font-weight: 600;
  text-align: left;
  color: rgb(71, 85, 105);
  white-space: nowrap;


  background-color: rgb(248, 250, 252);
  cursor: pointer;
}

.ai-table th:hover
{

  color: rgb(124, 58, 237);


  background-color: rgb(241, 245, 249);
}

.ai-table td
{

  padding: 12px 16px;
  border-bottom: 1px solid rgb(241, 245, 249);


  color: rgb(51, 65, 85);
}

.ai-table tr:hover td
{

  background-color: rgb(248, 250, 252);
}

.ai-table__price
{

  font-family: monospace;
  font-weight: 600;
  text-align: right;
}

.ai-table__center
{

  text-align: center!important;
}

.ai-table__right
{
  text-align: right!important;
}

.ai-table--compact td,
.ai-table--compact th
{

  padding: 6px 8px;
  font-size: 13px;
}

/* ЭЛЕМЕНТ: Иконка сортировки */
.ai-sort-icon
{

  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: middle;


  fill: currentColor;
}

/* УТИЛИТАРНЫЕ КЛАССЫ */

.ai-hidden
{

  display: none !important;
}

.ai-code
{

  font-family: monospace;
  padding: 0.375rem;
  font-size: 0.9em;
  background-color: rgb(226, 232, 240);
  border-radius: 0.5rem;
}

.ai-text-danger
{

  color: rgb(239, 68, 68);
}

.ai-text-success
{

  color: rgb(16, 185, 129);
}

/* --- Status Dot --- */
.ai-status-dot
{
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}

.ai-status-dot--online
{
  background-color: rgb(16, 185, 129);
}

.ai-status-dot--offline
{
  background-color: var(--color-accent-red);
}

/* --- Copy Icon & Action --- */
.ai-copy-action
{
  position: relative;
  cursor: pointer;
  transition: opacity 0.2s;
}

/* --- Button Link --- */
.ai-btn-link
{

  padding: 0;
  border: none;
  background: none;


  font-size: 12px;
  font-weight: 500;
  color: rgb(37, 99, 235);
  text-decoration: none;
  cursor: pointer;
}

.ai-btn-link:hover
{
  text-decoration: underline;
  color: rgb(29, 78, 216);
}

/* --- Button Icon Details (List View) --- */
.ai-btn-icon-details
{

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-width: 0;
  border-radius: 50%;


  background-color: rgb(255, 255, 255);
  color: rgb(14, 99, 221);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-btn-icon-details:hover
{

  background-color: rgb(241, 245, 249);
  color: rgb(124, 58, 237);
  border-color: rgb(124, 58, 237);
}

/* --- Button Full Details (Card View) --- */
.ai-btn-full-details
{

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;


  width: 100%;
  margin-top: 16px;
  padding: 8px 16px;
  border: 1px solid rgb(203, 213, 225);
  border-radius: 8px;


  background-color: rgb(226, 232, 240);


  font-weight: 600;
  color: rgb(51, 65, 85);
  cursor: pointer;


  transition: all 0.3s ease;
}

.ai-btn-full-details:hover
{
  background-color: rgb(203, 213, 225);
}

.ai-btn-full-details::after
{
  content: "";
  display: block;
  width: 16px;
  height: 16px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ai-copy-action:hover
{
  opacity: 0.7;
}

.ai-copy-icon
{
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Card view specific adjustments */
.ai-card__details .ai-copy-action
{
  cursor: pointer;
}

.ai-card__details .ai-detail-value
{
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Стили для Модального окна (контент внутри) --- */

.ai-modal-profile
{
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.ai-modal-profile__image
{
  width: 64px;
  height: 64px;
  margin-right: 16px;
  object-fit: contain;
  border-radius: 8px;
}

.ai-modal-profile__image--small
{
  width: 32px;
  height: 32px;
}

.ai-modal-title-image
{
  width: 32px;
  height: 32px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 6px;
  object-fit: cover;
}

.ai-modal-profile__info
{
  flex-grow: 1;
}

.ai-modal-section
{
  margin-bottom: 20px;
  padding-top: 15px;
  border-top: 1px solid rgb(241, 245, 249);
}

.ai-modal-section h4,
.ai-modal-section h5
{
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: rgb(51, 65, 85);
}

.ai-modal-section h5
{
  font-size: 14px;
  color: rgb(100, 116, 139);
}

.ai-modal-grid
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* АДАПТИВНОСТЬ */

@media (max-width: 640px)
{
  .ai-hidden-mobile
  {
    display: none !important;
  }

  .ai-controls
  {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }

  /* Гарантируем, что группа не вылезает */
  .ai-controls__group
  {
    justify-content: flex-start;
    width: 100%;
  }

  /* На мобильных элементах управления даем им пространство, но не даем вылезать */
  .ai-controls__select,
  .ai-controls__group .btn
  {
    max-width: 100%;
  }

  /* На мобильных строго одна колонка, занимающая всю доступную ширину */
  .ai-grid
  {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .ai-modal-grid
  {
    grid-template-columns: 1fr;
  }

  /* --- Mobile Table Tweaks --- */

  /* Увеличиваем название модели */
  .ai-model-name-text
  {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 700;
    color: rgb(15, 23, 42);
  }

  /* Уменьшаем теги */
  .ai-model-tags
  {
    transform: scale(0.9);
    transform-origin: left top;
    margin-top: 4px;
  }

  /* Уменьшаем метрики и убираем яркие фоны */
  .ai-metric-badge
  {
    font-size: 11px;
    font-weight: 500;
  }

  /* Превращаем "зеленый квадрат" в текст */
  .ai-metric-badge.bg-success
  {
    padding: 0;
    background-color: transparent !important;
    color: rgb(22, 163, 74) !important; /* Green-600 */
  }

  /* Корректировка контейнера метрик на мобильном */
  .ai-table td .flex.items-center
  {
    flex-wrap: wrap;
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  .ai-table__price {
    font-size: 13px;
  }
}

/* --- MOVED FROM GLOBAL --- */

.ai-metric-badge
{
  display: inline-block;
  padding: 2px 6px;
  color: rgb(21, 128, 61);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 5px;
  vertical-align: middle;
}

.clipboard-textarea
{
  position: fixed;
  left: -9999px;
  top: 0;
}

/* --- ai-models-assets */

.ai-btn-full-details::after
{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23334155'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3' /%3E%3C/svg%3E");
}

.ai-copy-icon
{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2-2v1'%3E%3C/path%3E%3C/svg%3E");
}

.ai-copy-icon--copied
{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}