/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* not found */
/*@import "emoji_reactions.css";*/

/* Turbo Drive Progress Bar */
.turbo-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: #3B82F6; /* Tailwind blue-500 */
  z-index: 2147483647;
  transition: width 300ms ease-out, opacity 150ms ease-in;
  transform: translate3d(0, 0, 0);
}

/* Editor for Post comments */
.post-comment-filed-container .ql-editor {
    padding: 8px 12px !important;
}

.post-comment-filed-container .ql-container.ql-snow {
    border: 0 !important;
}

/* Comment highlight animation */
.highlight-comment {
    background-color: rgba(59, 130, 246, 0.1); /* Light blue highlight */
    transition: background-color 0.3s ease-in-out;
    border-radius: 0.5rem;
}

/* ── Rich-text inline links ───────────────────────────────────────────────── */
/* Applied by the rich-text Stimulus controller while typing and by           */
/* Components::Posts::Content when rendering saved content.                   */
.rich-text-link,
.rich-text-content a,
.ql-editor a {
    color: oklch(var(--color-primary, 55.69% 0.1816 257.97));
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    word-break: break-all;
}

.rich-text-link:hover,
.rich-text-content a:hover,
.ql-editor a:hover {
    opacity: 0.8;
}

/* ── Link preview card ────────────────────────────────────────────────────── */
.link-preview-card {
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.link-preview-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.link-preview-fallback-banner {
    /* height controlled by Tailwind h-48 class */
}

.link-preview-youtube-embed {
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
}