.task-description-textarea {
  height: 66vh;
  min-height: 300px;
  resize: vertical;
  width: 100%;
}

/* «Ссылки на размещение» — cap the loaded rows at ~10 visible (each row is
   roughly 42px at py-1) before scrolling internally, so a long list doesn't
   push the card (and the add-link field below it) further down the page. */
.links-scroll-list {
  max-height: 420px;
  overflow-y: auto;
}

.link-dropzone {
  border: 1px dashed transparent;
  border-radius: 0.375rem;
  transition: border-color 0.15s, background-color 0.15s;
}

.link-dropzone-active {
  border-color: #0d6efd;
  background-color: rgba(13, 110, 253, 0.06);
}

.toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
}

.toast-item {
  padding: 0.6rem 0.9rem;
  border-radius: 0.375rem;
  color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  font-size: 0.9rem;
  cursor: pointer;
  animation: toast-in 0.2s ease-out;
}

.toast-success { background: #198754; }
.toast-error { background: #dc3545; }
.toast-warning { background: #fd7e14; }
.toast-info,
.toast-debug { background: #0d6efd; }

.toast-item.toast-hiding {
  opacity: 0;
  transition: opacity 0.4s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(1rem); }
  to { opacity: 1; transform: none; }
}

/* Комментарии/Переназначить's text fields — grow with typed content up to
   500px, then scroll inside the field itself rather than pushing the card
   (and the whole page) taller. */
.capped-textarea {
  max-height: 500px;
  overflow-y: auto;
  min-height: 90px;
}

.rubric-picker {
  position: relative;
}

/* «Настройки инфоповода» gives every other field's label class="form-label
   small mb-1" — the rubric picker is a shared widget (also used unstyled on
   task creation) so its own label keeps Bootstrap's default form-label size
   there; scoped to just this one context instead of touching the shared
   widget or task_form.html's matching plain labels. */
.infopovod-settings-form .rubric-picker .form-label {
  font-size: 0.875em;
  margin-bottom: 0.25rem;
}

/* Same shared-widget scoping as above — the "Можно выбрать несколько
   рубрик." hint is redundant clutter in this compact settings card
   specifically; task_form.html's own roomier layout keeps it. */
.infopovod-settings-form .rubric-picker .form-text {
  display: none;
}

.rubric-toggle {
  width: 100%;
  cursor: pointer;
  background-color: #fff;
}

.rubric-options {
  max-height: 220px;
  overflow-y: auto;
}

.rubric-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rubric-modal-overlay.d-none {
  display: none;
}

.rubric-modal {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  width: 90%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}

.rubric-modal-list {
  max-height: 50vh;
  overflow-y: auto;
}

.mention-dropdown {
  position: absolute;
  z-index: 1000;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  width: 320px;
  max-width: 90%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  max-height: 220px;
  overflow-y: auto;
}

.mention-dropdown-item {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.mention-dropdown-item:hover,
.mention-dropdown-item.active {
  background: #f1f3f5;
}

.task-description-view p {
  margin-bottom: 0.5rem;
}

.task-description-view ol,
.task-description-view ul {
  margin-bottom: 0.5rem;
}

/* Read-only rich text is wrapped in .ql-editor so Quill's own format classes
   (ql-size-*, ql-align-*) render correctly outside the editor — but reset
   the editor-chrome parts of that class (padding/height/scroll/cursor) since
   this is plain display, not an editable surface. Quill's own vendor CSS
   also sets line-height: 1.42 directly on .ql-editor — a rule applied right
   on this element beats anything inherited from an ancestor (e.g. the
   .task-detail page wrapper's denser 1.35), no matter that ancestor's
   specificity, so it has to be reset here too. */
.task-description-view.ql-editor {
  padding: 0;
  height: auto;
  overflow: visible;
  line-height: 1.35;
}

/* Размещение renders these blocks full-width, so the same line-height reads
   airier than it does at half-width (fewer, longer wrapped lines) — tighter
   still, scoped to just this role. */
.task-detail-placement .task-description-view.ql-editor {
  line-height: 1.2;
}

.task-description-view.ql-editor > * {
  cursor: auto;
}

/* Every card-header should read as the same height regardless of content —
   a plain text label vs. one carrying buttons (e.g. «Вложения») shouldn't
   make some cards start their body lower than their neighbors. 41px matches
   the tallest existing header (buttons + py-1 padding); flex+align-items
   centers plain-text headers within that same height instead of leaving
   them top-aligned with slack below. Headers that already set their own
   flex layout (d-flex justify-content-between, a Bootstrap !important
   utility) keep that — this only supplies the height and vertical centering. */
.card-header {
  min-height: 41px;
  display: flex;
  align-items: center;
}

/* Denser layout for the task detail page — default Bootstrap spacing between
   headings/cards/list items reads too airy once several stacked blocks
   (status panel, attachments, comments, history) are all on one page. */
.task-detail {
  line-height: 1.35;
}

.task-detail h3,
.task-detail h5 {
  line-height: 1.25;
}

.task-detail .list-group-item {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.task-detail .card-body {
  line-height: 1.35;
}

.task-detail .form-label.small {
  font-size: 0.8rem;
}

/* Border goes on the wrapper, not .richtext-editor — after Quill init that
   element is also .ql-container.ql-snow, whose border:none rule below is more
   specific and would otherwise cancel a border set here. */
.richtext-wrapper {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  overflow: hidden;
}

.richtext-wrapper .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid #ced4da;
  border-radius: 0.375rem 0.375rem 0 0;
}

.richtext-wrapper .ql-container.ql-snow {
  border: none;
}

.richtext-wrapper .ql-editor {
  height: 66vh;
  min-height: 300px;
  resize: vertical;
  overflow-y: auto;
}

.assignee-picker {
  position: relative;
}

.assignee-picker-toggle {
  width: 100%;
  cursor: pointer;
  background-color: #fff;
}

.assignee-picker-panel {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.assignee-picker-panel.d-none {
  display: none;
}

.assignee-picker-search {
  margin: 0.5rem;
  width: calc(100% - 1rem);
}

.assignee-picker-groups {
  overflow-y: auto;
  padding: 0 0.5rem 0.5rem;
}

.assignee-picker-group-title {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6c757d;
  margin-top: 0.5rem;
  padding: 0 0.25rem;
}

/* The block header doubles as a "select the whole block" checkbox. */
.assignee-picker-block-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  margin-bottom: 0.15rem;
}

.assignee-picker-block-toggle input {
  margin: 0;
}

.assignee-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.9rem;
  margin-bottom: 0;
}

.assignee-picker-item:hover {
  background: #f1f3f5;
}

.assignee-picker-item input {
  margin: 0;
}

.assignee-picker-item.is-hidden {
  display: none;
}

/* Picked at your own risk — submitting with one of these still selected gets
   hard-rejected server-side (see forms.AvailabilityCheckMixin), this is just
   the early warning. */
.assignee-picker-item-away {
  color: #997404;
}

.assignee-picker-group.is-hidden {
  display: none;
}

.attachment-strip {
  display: flex;
  gap: 0.5rem;
  height: 250px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.25rem;
}

.attachment-strip-loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 250px;
  color: #6c757d;
}

.attachment-strip-loading.d-none {
  display: none;
}

.attachment-thumb {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  border-radius: 0.375rem;
  overflow: hidden;
  cursor: pointer;
  background: #f1f3f5;
  border: 1px solid #dee2e6;
}

.attachment-thumb img,
.attachment-thumb video {
  height: 100%;
  width: auto;
  max-width: 420px;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.attachment-thumb[draggable="true"] {
  cursor: grab;
}

.attachment-thumb.dragging {
  opacity: 0.4;
}

/* Keep the thumb itself the drag source — don't let the browser start a
   native image/link drag from inside it. */
.attachment-thumb-file-link,
.attachment-thumb-icon {
  -webkit-user-drag: none;
  user-select: none;
}

.attachment-drop-target {
  position: relative;
  transition: background-color 0.15s ease;
}

.attachment-drop-target.attachment-dropzone-active {
  background-color: rgba(13, 110, 253, 0.06);
}

.attachment-dropzone-overlay {
  position: absolute;
  inset: 0.25rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #0d6efd;
  border-radius: 0.375rem;
  background: rgba(13, 110, 253, 0.06);
  pointer-events: none;
}

.attachment-dropzone-message {
  font-weight: 600;
  color: #0d6efd;
}

.page-dropzone-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px dashed #0d6efd;
  background: rgba(13, 110, 253, 0.1);
  pointer-events: none;
}

.page-dropzone-overlay.d-none {
  display: none;
}

.page-dropzone-message {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
  font-size: 1.25rem;
  font-weight: 600;
  color: #0d6efd;
}

.attachment-thumb-uploading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 160px;
  padding: 0.5rem;
  font-size: 0.8rem;
  text-align: center;
  color: #495057;
  word-break: break-word;
  line-height: 1.3;
}

.attachment-thumb-uploading .spinner-border {
  color: #0d6efd;
}

.attachment-uploading-filename {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-thumb-video::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.attachment-thumb-file,
.attachment-thumb-pending,
.attachment-thumb-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 220px;
  padding: 0.5rem;
  font-size: 0.85rem;
  text-align: center;
  color: #495057;
  text-decoration: none;
  word-break: break-word;
  cursor: default;
  line-height: 1.3;
}

.attachment-thumb-icon {
  font-size: 2.5rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}

.btn-icon {
  font-size: 1.25rem;
  line-height: 1;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

a.attachment-thumb-file {
  cursor: pointer;
  color: #495057;
}

.attachment-thumb-file-link {
  color: inherit;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.attachment-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}

.attachment-lightbox.d-none {
  display: none;
}

.attachment-lightbox-body {
  max-width: 100%;
  max-height: 100%;
}

.attachment-lightbox-media {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  display: block;
  margin: 0 auto;
  border-radius: 0.25rem;
}

.attachment-lightbox-iframe {
  width: 85vw;
  height: calc(100vh - 6rem);
  max-width: 1100px;
  border: none;
  background: #fff;
}

.attachment-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  /* Above .attachment-lightbox-nav (z-index: 1) — on narrow screens the
     next/prev strips span the full height up to the edge and would
     otherwise swallow taps meant for the close button in the corner. */
  z-index: 2;
}

.attachment-lightbox-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  max-width: 12vw;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s;
  z-index: 1;
}

.attachment-lightbox-nav:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.attachment-lightbox-nav.d-none {
  display: none;
}

.attachment-lightbox-prev {
  left: 0;
}

.attachment-lightbox-next {
  right: 0;
}

.attachment-lightbox-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 0.25rem 0.9rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  z-index: 1;
}

.attachment-lightbox-counter.d-none {
  display: none;
}

.edit-lock-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-lock-modal-overlay.d-none {
  display: none;
}

.edit-lock-modal {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.25rem;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}

.attachment-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.8rem;
  border: none;
  cursor: pointer;
  padding: 0;
}

.attachment-thumb-remove:hover {
  background: rgba(220, 53, 69, 0.9);
}

/* Ссылки на размещение — invalid rows stay reddish; the row the error banner
   was clicked into (browser's native #anchor scroll, via :target) gets a
   brief extra flash so it's unmistakable which one you landed on. */
.link-row-invalid,
.link-row-duplicate {
  background: rgba(220, 53, 69, 0.12);
}

.link-row:target {
  animation: link-row-flash 1.6s ease;
}

@keyframes link-row-flash {
  from { background: rgba(220, 53, 69, 0.4); }
  to { background: inherit; }
}

/* infopovod_list row backgrounds — see _infopovod_row_highlight in
   views.py for the priority these are applied in (archived > overdue >
   due-soon > assigned-to-me). Bootstrap's .table paints background-color
   on each <td> individually (via var(--bs-table-bg)), which occludes any
   background set directly on the <tr> -- so, same as Bootstrap's own
   .table-success/.table-danger/etc., these set the --bs-table-* custom
   properties instead and let the cells' own var() lookups pick them up.
   --bs-table-hover-bg/-color are set too so .table-hover's hover tint
   doesn't just flash back to the untinted default on mouseover. */
.row-archived {
  --bs-table-color: #6c757d;
  --bs-table-bg: rgba(108, 117, 125, 0.1);
  --bs-table-hover-bg: rgba(108, 117, 125, 0.18);
  --bs-table-hover-color: #6c757d;
}

.row-assigned-to-me {
  --bs-table-bg: rgba(25, 135, 84, 0.12);
  --bs-table-hover-bg: rgba(25, 135, 84, 0.2);
}

.row-overdue {
  --bs-table-bg: rgba(220, 53, 69, 0.12);
  --bs-table-hover-bg: rgba(220, 53, 69, 0.2);
}

.row-due-soon {
  --bs-table-bg: rgba(255, 193, 7, 0.15);
  --bs-table-hover-bg: rgba(255, 193, 7, 0.25);
}

/* A block is sitting at "На проверке" (director approval) — blinking, not
   just tinted, since this is a bottleneck someone needs to actively clear
   rather than a passive status like row-due-soon. Steps (not a smooth
   fade) between two --bs-table-bg values so it reads as a blink even
   without registering the custom property via @property. */
.row-pending-approval {
  animation: row-pending-approval-blink 1.2s step-end infinite;
}

@keyframes row-pending-approval-blink {
  0%, 49% {
    --bs-table-bg: rgba(255, 193, 7, 0.35);
    --bs-table-hover-bg: rgba(255, 193, 7, 0.45);
  }
  50%, 100% {
    --bs-table-bg: rgba(255, 193, 7, 0.08);
    --bs-table-hover-bg: rgba(255, 193, 7, 0.18);
  }
}

/* Комментарии — linebreaks-filtered text wraps every paragraph in its own
   <p>, which carries Bootstrap's Reboot default bottom margin (1rem); left
   as-is that reads as a whole blank line between the comment text and its
   «Ответить»/«Редактировать»/«Удалить» row right below it. */
.comment-text-view p:last-child {
  margin-bottom: 0.25rem;
}

/* Cap the thread at roughly 5 comments' worth of height before scrolling
   internally — same idea as .links-scroll-list above, applied here so a
   long-running thread doesn't push the compose box further down the page. */
.comments-scroll-list {
  max-height: 400px;
  overflow-y: auto;
}

/* Непрочитанные комментарии — светло-зелёная подсветка, стираемая один раз
   при первом наведении (см. comments_panel.js). transition живёт на базовом
   классе, а не на модификаторе — иначе снятие .comment-unread убирало бы и
   саму transition-декларацию, и цвет пропадал бы мгновенно вместо плавного
   затухания. */
.comment-row {
  transition: background-color 0.6s ease;
}

.comment-row.comment-unread {
  background-color: #d7f5df;
}

/* «Продолжить работу» (see _links_block.html/_post_text_block.html/
   _attachments_block.html) is deliberately NOT green: green is reserved
   for the most logical next click — advancing to another stage (see
   _action_button.html/_content_section_button.html's action_label
   buttons, still btn-success). Reclaiming/resuming work on the CURRENT
   stage is a different kind of action, so it gets its own color. «Начать
   работу» (first-ever claim, same button/different label) stays green —
   only the "resuming" wording gets orange. */
.btn-tsur-orange {
  background-color: #fd7e14;
  border-color: #fd7e14;
  color: #fff;
}

.btn-tsur-orange:hover,
.btn-tsur-orange:focus {
  background-color: #e56b0a;
  border-color: #e56b0a;
  color: #fff;
}