.file-upload-js-error {
  position: relative;
}

.file-upload-js-error__dismiss {
  position: absolute;
  left: 4px;
  top: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}

.file-upload-js-error__dismiss:hover {
  opacity: 0.75;
}

.file-upload-js-error__dismiss:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.skipta-comments input[type="file"],
.skipta-comments input[data-drupal-selector="edit-skipta-comments-files-remove-button"],
.skipta-comments button[data-drupal-selector="edit-skipta-comments-files-remove-button"],
.skipta-comments .form-group input[type="checkbox"] {
  display: none !important;
}

.skipta-comments .file {
  background-image: none !important;
  position: relative;
  display: inline;
 
}

.skipta-comments .file span {
  width: 100% !important;
  position: relative;
  display: inline;
  text-transform: none;
}

.skipta-comments #comment_uploads,
.skipta-comments #comment_uploads_edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
  height: 32px;
  width: 32px;
  padding-bottom: 0;
}

.skipta-comments #comment_uploads span,
.skipta-comments #comment_uploads_edit span {
  display: none;
}

.skipta-comments #comment_uploads .stream__icon,
.skipta-comments #comment_uploads_edit .stream__icon,
.skipta-comments #comment_uploads svg,
.skipta-comments #comment_uploads_edit svg {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
}

.skipta-comments .post-file-container {
  float: left;
  width: 90%;
}

.skipta-comments .post-remove-item {
  float: right;
  width: 32px;
}
.skipta-comments .post-remove-item:hover {
  cursor: pointer;
}

.skipta-comments .form-group .js-form-type-checkbox {
  border-top: 1px solid #cccccc;
  padding: .5em;
  overflow: hidden;
  margin: 0 0 0px 0;
  text-align: center !important;
  min-height: 1px;
}
.skipta-comments .form-group .js-form-type-checkbox:last-of-type {
  border-bottom: 1px solid #cccccc;
}

.skipta__comment__content{
    display: inline-block;
    width: 100%;
    position: relative;
}

.skipta__comment__content .skipta__comment__form {
  position: relative;
}

.skipta-comments textarea.post_comment_description,
.skipta-comments .skipta__comment__form textarea.post_comment_description,
.skipta-comments .skipta__comment__form textarea.micro_post_comment_description {
  padding-bottom: 48px !important;
  box-sizing: border-box;
  border-radius: 8px;
  margin-top: 12px;
  height: auto;
  min-height: 72px;
  max-height: none;
  resize: none;
  overflow-y: hidden;
  field-sizing: content;
  font-family: 'inter';
  line-height: 22px;
  background-color: #f4f4f4;
}

@media (max-width: 568px) {
  .skipta-comments textarea.post_comment_description,
  .skipta-comments .skipta__comment__form textarea.post_comment_description,
  .skipta-comments .skipta__comment__form textarea.micro_post_comment_description {
    font-size: 12px !important;
  }
  .skipta-comments .skipta__comment__form .mentions-input .input {
    font-size: 12px !important;
  }
}

/* Override the stream composer styles that leak onto the comment textarea.
   The stream rule `.stream__wrapper .stream__content .form-control` pins a fixed
   height, and once the mentions plugin adds an `.input` class to the textarea
   (the moment it initializes, just after the form AJAX-loads) the composer rule
   `.stream__wrapper .stream__content .input { width: 84%; margin: 20px 40px 0 93px }`
   also matches it — shoving the field ~93px to the right and narrowing it to
   84%. That late shift makes the placeholder text (and the highlighter/upload
   icon aligned to it) appear to slide in from the left when the comment box
   opens. Pin the field full-width, flush-left and growable so it renders in its
   final position immediately, with no shift when mentions initializes. */
.stream__wrapper .stream__content .skipta-comments .skipta__comment__form textarea.post_comment_description,
.stream__wrapper .stream__content .skipta-comments .skipta__comment__form textarea.micro_post_comment_description {
  height: auto;
  min-height: 105px;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Video Showcase: the comment form renders outside .stream__content in both the
   logged-in stream (.showcase-video-content) and the passthrough page
   (.showcase-video-wraper), so the .stream__content rule above never matches
   there. Without it the textarea falls back to the 72px base min-height, so it
   collapses further on reset than on other streams and the bottom-anchored send
   (airplane) icon jumps noticeably more after submit. Match the standard
   composer box exactly (105px min-height, full width, flush left) so the icon
   rests in the same place and shifts the same small amount as every other
   stream. */
.showcase-video-content .skipta-comments .skipta__comment__form textarea.post_comment_description,
.showcase-video-content .skipta-comments .skipta__comment__form textarea.micro_post_comment_description,
.showcase-video-wraper .skipta-comments .skipta__comment__form textarea.post_comment_description,
.showcase-video-wraper .skipta-comments .skipta__comment__form textarea.micro_post_comment_description {
  height: auto;
  min-height: 105px;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Video Showcase: keep the send (airplane) icon fixed when the comment is
   submitted. The submit button's #ajax has no explicit progress indicator, so
   Drupal injects an inline .ajax-progress-throbber ("Please wait…") right after
   the button, inside .skipta__comment__button__wrapper. On standard streams the
   comment form sits inside .stream__content, where the theme rule
   `.stream__content .ajax-progress { position:absolute }` pulls that throbber
   out of flow so the icon never moves. On the Video Showcase (both the
   .showcase-video-content stream and the .showcase-video-wraper passthrough) the
   form is outside .stream__content, so the throbber stays inline and shoves the
   icon sideways on click. Overlay the throbber on the 32x32 button and hide its
   message so the icon stays put — consistent with every other stream. */
.showcase-video-content .skipta-comments .skipta__comment__button__wrapper,
.showcase-video-wraper .skipta-comments .skipta__comment__button__wrapper {
  position: relative;
}
.showcase-video-content .skipta-comments .skipta__comment__button__wrapper .ajax-progress-throbber,
.showcase-video-wraper .skipta-comments .skipta__comment__button__wrapper .ajax-progress-throbber {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.showcase-video-content .skipta-comments .skipta__comment__button__wrapper .ajax-progress-throbber .message,
.showcase-video-wraper .skipta-comments .skipta__comment__button__wrapper .ajax-progress-throbber .message {
  display: none;
}

/* Lock the form container height so absolutely-positioned navigation icons
   never flash at the top-left when textAreaAdjust() briefly collapses the
   textarea to 0 to measure scrollHeight. The min-height keeps the
   position:relative container tall enough that bottom:8px icons stay put. */
.skipta-comments .skipta__comment__form {
  min-height: 72px;
}
.stream__wrapper .skipta-comments .skipta__comment__form {
  min-height: 105px;
}

.skipta-comments .skipta__comment__panel{
  position: absolute;
  bottom: 12px;
  right: 17px;
  z-index: 0;
  display: flex;
  align-items: center;
  height: 32px;
}

.skipta-comments .skipta__comment__navigation {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  position: absolute;
  bottom: 12px;
  left: 17px;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 32px;
}
.skipta-comments .skipta__comment__navigation .list-item {
  margin-bottom: 0 !important;
  line-height: 0;
}
.skipta-comments .skipta__comment__navigation .skipta__comment__link,
.skipta-comments .skipta__comment__navigation .skipta__comment__link .js-form-item {
  margin: 0;
  padding: 0;
  line-height: 0;
}
.skipta-comments .skipta__comment__navigation .skipta__comment__link .js-form-item{
  margin-bottom: 0px;
}

.skipta-comments .skipta__comment__button__wrapper {
    display: inline-block;
    float: right;
}

.comment__list .comment__into .post_image{
    text-align: right;
    padding: 10px 20px 10px 0px;
    min-width: 100%;
    margin: 10px auto;
}

.stream__wrapper .comment__wrapper .comment__into {
    background-color: #f4f4f4;
    border-radius: 6px;
}
.stream__wrapper .comment__wrapper {
    margin: 0;
    padding: 0 ;
}
.stream__wrapper .comment__wrapper.active-comment-form,
.stream__wrapper .comment__wrapper.has-comment {
    display: block;
    margin: 0;
    padding: 0;
    border-top:var(--text-muted, #BDBDBD) solid 1.5px !important;
    margin-top: 12px !important;
}
@media (max-width: 767px) {
  .stream__wrapper .comment__wrapper.active-comment-form,
  .stream__wrapper .comment__wrapper.has-comment {
    margin-top: 8px !important;
  }
}
.stream__wrapper .video-social-activity,
.stream__wrapper .skipta_statistics_wrapper {
    padding-top: 12px;
}
@media (max-width: 767px) {
  .stream__wrapper .video-social-activity,
  .stream__wrapper .skipta_statistics_wrapper {
    padding-top: 8px;
  }
}

.skipta-comments .skipta__comment__button__wrapper .btn-primary {
  height: 32px;
  width: 32px;
  font-size: 0;
  cursor: pointer;
  border: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M9.94,12.65l-2.25-.75c-2.35-.78-3.53-1.18-3.53-1.9s1.18-1.11,3.53-1.9l8.51-2.84c1.66-.55,2.48-.83,2.92-.39.44.44.16,1.26-.39,2.92l-2.84,8.51c-.78,2.35-1.18,3.53-1.9,3.53s-1.11-1.18-1.9-3.53l-.75-2.25,4.35-4.35c.39-.39.39-1.02,0-1.41-.39-.39-1.02-.39-1.41,0l-4.35,4.35Z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M9.94,12.65l-2.25-.75c-2.35-.78-3.53-1.18-3.53-1.9s1.18-1.11,3.53-1.9l8.51-2.84c1.66-.55,2.48-.83,2.92-.39.44.44.16,1.26-.39,2.92l-2.84,8.51c-.78,2.35-1.18,3.53-1.9,3.53s-1.11-1.18-1.9-3.53l-.75-2.25,4.35-4.35c.39-.39.39-1.02,0-1.41-.39-.39-1.02-.39-1.41,0l-4.35,4.35Z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: 32px 32px;
  mask-size: 32px 32px;
  transition: all 0.2s ease;
  text-indent: -9999px;
  min-width: auto !important;
}
.skipta-comments.edit-comment #comment_uploads_edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.skipta-comments.edit-comment #comment_uploads_edit span {
  display: none;
}

.ui-dialog.ui-widget:has(.skipta-comments.edit-comment) {
  width: 600px !important;
  max-width: 90vw;
}

/* Edit comment modal: toolbar row inside the gray comment box, below text. */
.skipta-comments.edit-comment .skipta__comment__form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 4px;
  background-color: #f4f4f4;
  border-radius: 8px;
  margin-top: 10px;
  padding-bottom: 8px;
}

.skipta-comments.edit-comment .skipta__comment__form > .js-form-item,
.skipta-comments.edit-comment .skipta__comment__form > .form-item {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.skipta-comments.edit-comment .skipta__comment__form textarea.post_comment_description,
.skipta-comments.edit-comment .skipta__comment__form textarea.micro_post_comment_description {
  background-color: transparent;
  border: none;
  border-radius: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 12px 17px 4px !important;
  box-shadow: none;
  field-sizing: auto;
  line-height: 22px;
  font-family: 'inter';
}

.skipta-comments.edit-comment .skipta__comment__form .skipta__comment__navigation {
  position: static;
  grid-column: 1;
  justify-self: start;
  align-self: center;
  padding-left: 17px;
  left: auto;
  bottom: auto;
  margin: 0;
  height: 32px;
}

.skipta-comments.edit-comment .skipta__comment__form .skipta__comment__navigation .skipta__comment__link .js-form-item {
  margin-bottom: 0;
}

.skipta-comments.edit-comment .skipta__comment__form .skipta__comment__panel {
  position: static;
  grid-column: 2;
  justify-self: end;
  align-self: center;
  padding-right: 17px;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  padding-top: 0;
  padding-bottom: 0 !important;
}
.skipta-comments .skipta__comment__button__wrapper .btn-primary:focus,
.skipta-comments .skipta__comment__button__wrapper .btn-primary:focus-visible {
  background-color: var(--btn-stream-focus, #0B0B0B) !important;
  outline: none;
}
.skipta-comments .skipta__comment__button__wrapper .btn-primary:hover {
  background-color: var(--btn-stream-hover, #0B0B0B) !important;
}
.skipta-comments .skipta__comment__button__wrapper .btn-primary:active,
.skipta-comments .skipta__comment__button__wrapper .btn-primary:focus:active,
.skipta-comments .skipta__comment__button__wrapper .btn-primary:hover:active {
  background-color: var(--btn-stream-click, #0B0B0B) !important;
  transition: none;
}
.skipta-comments .skipta__comment__button__wrapper .btn-primary:disabled {
  background-color: var(--text-muted) !important;
  cursor: not-allowed;
  transition: background-color 0.2s ease 0.6s;
}

.skipta-comment-preview .form-type-checkbox .form-check-input:focus,
.skipta-comment-preview .form-type-checkbox .form-check-input:focus-visible,
.skipta-comment-preview .form-type-checkbox .form-check-input:active {
  border: none;
  box-shadow: none;
  outline: none;
}

/* PHSK-10626 Fix 8: Lazy comment form stub — mimics the textarea until the
   real form is loaded via /skipta-comments/form/{nid} AJAX route. */
.skipta-comment-form-placeholder {
  display: block;
}

.skipta-comment-stub-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.skipta-comment-stub-textarea {
  display: block;
  position: relative;
  width: 100%;
  /* PHSK-10631: Match the real comment textarea's box exactly so nothing moves
     when the lazy form replaces this stub. The real field uses
     padding: 5px 18px 48px 18px and margin-top: 12px (see the stream textarea
     rules above); the old 6px 10px 48px / 10px values left the placeholder ~8px
     to the left, so it appeared to slide right when the form loaded. */
  padding: 5px 18px 48px 18px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #f4f4f4;
  color: #9e9e9e;
  font-size: 14px;
  min-height: 105px;
  line-height: 1.5;
  cursor: text;
  box-sizing: border-box;
  margin-top: 12px;
  margin-bottom: 10px;
}

/* PHSK-10631: Preview the real toolbar icons in their final positions so they
   do not pop/animate in when the AJAX form loads. The upload icon mirrors
   .skipta__comment__navigation (left: 17px) and the send button mirrors the
   disabled submit in .skipta__comment__panel (right: 17px), both 32x32 at
   bottom: 12px — identical to the live form. */
.skipta-comment-stub-textarea::before,
.skipta-comment-stub-textarea::after {
  content: "";
  position: absolute;
  bottom: 12px;
  width: 32px;
  height: 32px;
  pointer-events: none;
}
.skipta-comment-stub-textarea::after {
  left: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 7.6C4 5.6 5.6 4 7.6 4H16.5C18.5 4 20.1 5.6 20.1 7.6V16.5C20.1 18.5 18.5 20.1 16.5 20.1H7.6C5.6 20.1 4 18.5 4 16.5V7.6Z' stroke='%239F9F9F' stroke-width='1.5'/%3E%3Cpath d='M4 14.7L6.5 12.2C7.3 11.4 8.6 11.5 9.2 12.4L10.9 14.8C11.5 15.7 12.7 15.8 13.5 15.2L15.7 13.4C16.4 12.8 17.4 12.9 18.1 13.5L20.1 15.5' stroke='%239F9F9F' stroke-width='1.5'/%3E%3Cpath d='M15.6 10.2C16.6 10.2 17.4 9.4 17.4 8.4C17.4 7.4 16.6 6.6 15.6 6.6C14.6 6.6 13.8 7.4 13.8 8.4C13.8 9.4 14.6 10.2 15.6 10.2Z' fill='%239F9F9F'/%3E%3C/svg%3E") no-repeat center;
  background-size: 24px 24px;
}
.skipta-comment-stub-textarea::before {
  right: 17px;
  background-color: var(--text-muted, #BDBDBD);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M9.94,12.65l-2.25-.75c-2.35-.78-3.53-1.18-3.53-1.9s1.18-1.11,3.53-1.9l8.51-2.84c1.66-.55,2.48-.83,2.92-.39.44.44.16,1.26-.39,2.92l-2.84,8.51c-.78,2.35-1.18,3.53-1.9,3.53s-1.11-1.18-1.9-3.53l-.75-2.25,4.35-4.35c.39-.39.39-1.02,0-1.41-.39-.39-1.02-.39-1.41,0l-4.35,4.35Z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M9.94,12.65l-2.25-.75c-2.35-.78-3.53-1.18-3.53-1.9s1.18-1.11,3.53-1.9l8.51-2.84c1.66-.55,2.48-.83,2.92-.39.44.44.16,1.26-.39,2.92l-2.84,8.51c-.78,2.35-1.18,3.53-1.9,3.53s-1.11-1.18-1.9-3.53l-.75-2.25,4.35-4.35c.39-.39.39-1.02,0-1.41-.39-.39-1.02-.39-1.41,0l-4.35,4.35Z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: 32px 32px;
  mask-size: 32px 32px;
}

.skipta-comment-stub-link:hover .skipta-comment-stub-textarea {
  border-color: #adb5bd;
  background: #f8f9fa;
}




/* Comment success toast, shown at the top of the comments list (inside the
   comments component) so it stays visible even when the composer is collapsed.
   Injected by the comment create/update AJAX callbacks; styling and dismiss
   behaviour are shared with the composer's inline
   `.skipta-comments-description-message` notifications. */
.skipta-comments-content > .skipta-comments-toast {
  display: block;
  margin: 8px 0 4px;
}
.skipta-comments-content > .skipta-comments-toast > .alert.alert-dismissible {
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
 @media (max-width :390px) {
    padding-right: 0px;
 }
}

.skipta-comments-description-message .sr-only {
  display: none;
}