/* attach.css   */


.attach-content {
  
  padding: 89px 0px;         /* Можно уменьшить отступ */
  border-radius: 8px;
  /* max-height здесь не нужен, убираем или ставим выше */
  max-height: 88%;       /* допустим, оставляем ограничение */
  display: flex;
  flex-direction: column; /* чтобы внутренние блоки шли вертикально */
}

/* Верхняя панель без прокрутки */
.attach-header-panel {
  /* фиксированной высоты не обязательно, 
     главное, что мы не делаем overflow-y: auto */
background: #608584;
padding: 10px;
}


.btn-send-attach {
  background-color: #3498db;
  color: #c2d9f1;
  text-align: center;
  border: 1px solid #ccc;
}

.btn-send-attach:hover {
  transform: scale(1.01);
  background-color: #2980b9;
  transition: all 0.3s ease;
}

.attach-table-container {
   margin-top: 20px;
}


/* Область прокрутки для таблицы */
.attach-table-wrapper {
  flex: 1;                /* растягиваем на оставшееся место */
  overflow-y: auto;       /* вот здесь прокрутка */
}

.attach-table-wrapper table thead th {
  position: sticky;
  top: 0;
  background: #608584; /* или другой цвет */
  z-index: 2;          /* чтобы было поверх строк */
}


.open-attachment {
  color: #191b52;
  font-size: x-small;
}

.btn-remove-attach {
  border: 1px solid #ccc;
  padding: 2px;
  width: 34px;
  cursor: pointer;
  background-color: #3498db;
  color: #c2d9f1;
  text-align: center
}

.btn-remove-attach:hover {
  transform: scale(1.01);
  background-color: #2980b9;
  transition: all 0.3s ease;
}

.attach-remove {
  border: 1px solid #ccc;
  padding: 2px;
  width: 34px;
  cursor: pointer;
  background-color: #3498db;
  color: #c2d9f1;
  text-align: center
}

.attach-remove:hover {
  transform: scale(1.01);
  background-color: #2980b9;
  transition: all 0.3s ease;
}

.attach-cc {
  border: 1px solid #ccc;
  padding: 2px;
  width: 34px;
  cursor: pointer;
  background-color: #3498db;
  color: #c2d9f1;
  text-align: center
}

.attach-cc:hover {
  transform: scale(1.01);
  background-color: #2980b9;
  transition: all 0.3s ease;
}


.attach-upload-options {
  display: flex;
  gap: 40px;
  margin-bottom: 15px;
}

.upload-from-disk,
.upload-from-clipboard {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.paste-area {
  width: 250px;
  height: 50px;
  padding: 8px;
  border: 2px dashed #ccc;
  border-radius: 6px;
  background-color: #f9f9f9;
  outline: none;
  font-size: 14px;
  color: #777;
  position: relative;
}

.paste-area:focus {
  border-color: #66aaff;
  background-color: #fff;
}

.placeholder-text {
  color: #aaa;
}


.clipboard-preview {
  max-width: 200px;
  margin-top: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#previewContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

#previewContainer.hidden {
  display: none;
}

.paste-area img {
  max-width: 99%;
  max-height: 99%;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 1px;
}

.attach-preview-container {
  position: absolute;
  z-index: 999;
  width: 440px;
  max-height: 400px;
  padding: 6px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attach-preview-container.hidden {
  display: none;
}

.attach-preview-image {
  max-width: 100%;
  max-height: 360px;
  border-radius: 4px;
}

.attach-preview-pdf {
  width: 440px;
  height: 400px;
  display: none;
  border: none;
  border-radius: 4px;
  pointer-events: auto;
}