trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/* ============================================
   Print Loading Overlay — Used by ?print=1 mode
   ============================================ */

.print-loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: white;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
}

.print-loading-overlay .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #4C3F6D;
  border-radius: 50%;
  animation: print-spin 0.8s linear infinite;
  margin-right: 12px;
}

@keyframes print-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   Browser Print (Ctrl+P on screen view)
   Hides navigation/UI when user prints from
   the regular screen. Does NOT affect
   ?print=1 pages — those have own CSS.
   ============================================ */
@media print {
  .no-print,
  .navbar,
  .drawer,
  .drawer-side,
  #app-drawer,
  label[for="app-drawer"],
  [data-controller="chat-panel"],
  #notifications-dropdown,
  #notifications-overlay,
  #offline-banner,
  .flash,
  .modal,
  .modal-backdrop,
  dialog,
  form,
  input,
  select,
  textarea,
  button,
  .btn,
  .sticky,
  [role="tooltip"],
  .tooltip,
  .drawer-overlay,
  .recycle-bin-fab,
  .topbar,
  #main-topbar,
  .avatar-dropdown,
  .user-menu,
  .chat-panel,
  .print-info-bar,
  .print-metadata,
  .center-period-bar,
  div.mb-4 > a.flex.items-center.gap-1,
  a > i.fa-receipt,
  div.mt-6.text-\[10px\].text-gray-400 {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  body {
    background: white !important;
    color: black !important;
  }
  /* No @page rule here — each ?print=1 page defines its own margins */
/* ===================================================
   Social Feed Theme System
   Each theme changes: backgrounds, cards, buttons,
   borders, text, icons, badges, inputs, and accents.
   Only affects the social feed area (data-social-feed-container).
   =================================================== */

/* ----- CSS Variables (set per theme via class) ----- */
[data-social-feed-container] {
  --theme-bg-from: #fdf2f8;
  --theme-bg-via: #ffffff;
  --theme-bg-to: #fff1f2;
  --theme-accent: #ec4899;
  --theme-accent-hover: #db2777;
  --theme-accent-light: #fdf2f8;
  --theme-accent-lighter: #fce7f3;
  --theme-accent-lightest: #fce7f3;
  --theme-btn-from: #ec4899;
  --theme-btn-to: #f43f5e;
  --theme-btn-hover-from: #db2777;
  --theme-btn-hover-to: #e11d48;
  --theme-text: #db2777;
  --theme-text-light: #ec4899;
  --theme-ring: #f9a8d4;
  --theme-ring-light: #fbcfe8;
  --theme-border: #f9a8d4;
  --theme-card-header: linear-gradient(to right, #f472b6, #fb7185, #a78bfa);
  --theme-story-ring: #f9a8d4;
  --theme-bg-page: linear-gradient(135deg, #fdf2f8 0%, #ffffff 50%, #fff1f2 100%);
  --theme-icon-bg: #fce7f3;
  --theme-icon-color: #ec4899;
  --theme-nav-active-bg: #fdf2f8;
  --theme-nav-active-text: #ec4899;
  --theme-badge-bg: #fdf2f8;
  --theme-badge-text: #db2777;
  --theme-badge-border: #f9a8d4;
  --theme-comment-bg: rgba(229, 231, 235, 0.4);
  --theme-input-focus: #f9a8d4;
  --theme-empty-icon: rgba(0, 0, 0, 0.1);
  --theme-reaction-active-bg: #fdf2f8;
  --theme-reaction-active-ring: #f9a8d4;
  --theme-reaction-hover: #fdf2f8;
  --theme-text-on-accent: #ffffff;
  --theme-link-hover: #db2777;
  --theme-follow-btn-bg: #fdf2f8;
  --theme-follow-btn-text: #ec4899;
  --theme-follow-btn-border: #f9a8d4;
  --theme-follow-btn-hover-bg: #fdf2f8;
}

/* ===================================================
   THEME: DEFAULT (Pink / Rose)
   =================================================== */
[data-social-feed-container].theme-default {
  --theme-bg-from: #fdf2f8;
  --theme-bg-via: #ffffff;
  --theme-bg-to: #fff1f2;
  --theme-accent: #ec4899;
  --theme-accent-hover: #db2777;
  --theme-accent-light: #fdf2f8;
  --theme-accent-lighter: #fce7f3;
  --theme-accent-lightest: #fce7f3;
  --theme-btn-from: #ec4899;
  --theme-btn-to: #f43f5e;
  --theme-btn-hover-from: #db2777;
  --theme-btn-hover-to: #e11d48;
  --theme-text: #db2777;
  --theme-text-light: #ec4899;
  --theme-ring: #f9a8d4;
  --theme-ring-light: #fbcfe8;
  --theme-border: #f9a8d4;
  --theme-card-header: linear-gradient(to right, #f472b6, #fb7185, #a78bfa);
  --theme-story-ring: #f9a8d4;
  --theme-bg-page: linear-gradient(135deg, #fdf2f8 0%, #ffffff 50%, #fff1f2 100%);
  --theme-icon-bg: #fce7f3;
  --theme-icon-color: #ec4899;
  --theme-nav-active-bg: #fdf2f8;
  --theme-nav-active-text: #ec4899;
  --theme-badge-bg: #fdf2f8;
  --theme-badge-text: #db2777;
  --theme-badge-border: #f9a8d4;
  --theme-comment-bg: rgba(229, 231, 235, 0.4);
  --theme-input-focus: #f9a8d4;
  --theme-reaction-active-bg: #fdf2f8;
  --theme-reaction-active-ring: #f9a8d4;
  --theme-reaction-hover: #fdf2f8;
  --theme-follow-btn-bg: #fdf2f8;
  --theme-follow-btn-text: #ec4899;
  --theme-follow-btn-border: #f9a8d4;
  --theme-follow-btn-hover-bg: #fdf2f8;
}

/* ===================================================
   THEME: LIGHT (Gray)
   =================================================== */
[data-social-feed-container].theme-light {
  --theme-bg-from: #f9fafb;
  --theme-bg-via: #ffffff;
  --theme-bg-to: #f9fafb;
  --theme-accent: #6b7280;
  --theme-accent-hover: #4b5563;
  --theme-accent-light: #f9fafb;
  --theme-accent-lighter: #f3f4f6;
  --theme-accent-lightest: #e5e7eb;
  --theme-btn-from: #6b7280;
  --theme-btn-to: #4b5563;
  --theme-btn-hover-from: #4b5563;
  --theme-btn-hover-to: #374151;
  --theme-text: #4b5563;
  --theme-text-light: #6b7280;
  --theme-ring: #d1d5db;
  --theme-ring-light: #e5e7eb;
  --theme-border: #d1d5db;
  --theme-card-header: linear-gradient(to right, #9ca3af, #6b7280, #4b5563);
  --theme-story-ring: #d1d5db;
  --theme-bg-page: linear-gradient(135deg, #f9fafb 0%, #ffffff 50%, #f9fafb 100%);
  --theme-icon-bg: #f3f4f6;
  --theme-icon-color: #6b7280;
  --theme-nav-active-bg: #f3f4f6;
  --theme-nav-active-text: #4b5563;
  --theme-badge-bg: #f3f4f6;
  --theme-badge-text: #4b5563;
  --theme-badge-border: #d1d5db;
  --theme-comment-bg: rgba(229, 231, 235, 0.4);
  --theme-input-focus: #9ca3af;
  --theme-reaction-active-bg: #f3f4f6;
  --theme-reaction-active-ring: #d1d5db;
  --theme-reaction-hover: #f3f4f6;
  --theme-follow-btn-bg: #f3f4f6;
  --theme-follow-btn-text: #6b7280;
  --theme-follow-btn-border: #d1d5db;
  --theme-follow-btn-hover-bg: #e5e7eb;
}

/* ===================================================
   THEME: SOFT BLUE
   =================================================== */
[data-social-feed-container].theme-soft-blue {
  --theme-bg-from: #eff6ff;
  --theme-bg-via: #ffffff;
  --theme-bg-to: #eef2ff;
  --theme-accent: #3b82f6;
  --theme-accent-hover: #2563eb;
  --theme-accent-light: #eff6ff;
  --theme-accent-lighter: #dbeafe;
  --theme-accent-lightest: #bfdbfe;
  --theme-btn-from: #3b82f6;
  --theme-btn-to: #6366f1;
  --theme-btn-hover-from: #2563eb;
  --theme-btn-hover-to: #4f46e5;
  --theme-text: #2563eb;
  --theme-text-light: #3b82f6;
  --theme-ring: #93c5fd;
  --theme-ring-light: #bfdbfe;
  --theme-border: #93c5fd;
  --theme-card-header: linear-gradient(to right, #60a5fa, #818cf8, #a78bfa);
  --theme-story-ring: #93c5fd;
  --theme-bg-page: linear-gradient(135deg, #eff6ff 0%, #ffffff 50%, #eef2ff 100%);
  --theme-icon-bg: #dbeafe;
  --theme-icon-color: #3b82f6;
  --theme-nav-active-bg: #eff6ff;
  --theme-nav-active-text: #3b82f6;
  --theme-badge-bg: #eff6ff;
  --theme-badge-text: #2563eb;
  --theme-badge-border: #93c5fd;
  --theme-comment-bg: rgba(229, 231, 235, 0.4);
  --theme-input-focus: #93c5fd;
  --theme-reaction-active-bg: #eff6ff;
  --theme-reaction-active-ring: #93c5fd;
  --theme-reaction-hover: #eff6ff;
  --theme-follow-btn-bg: #eff6ff;
  --theme-follow-btn-text: #3b82f6;
  --theme-follow-btn-border: #93c5fd;
  --theme-follow-btn-hover-bg: #dbeafe;
}

/* ===================================================
   THEME: SOFT PURPLE
   =================================================== */
[data-social-feed-container].theme-soft-purple {
  --theme-bg-from: #faf5ff;
  --theme-bg-via: #ffffff;
  --theme-bg-to: #f3e8ff;
  --theme-accent: #a855f7;
  --theme-accent-hover: #9333ea;
  --theme-accent-light: #faf5ff;
  --theme-accent-lighter: #f3e8ff;
  --theme-accent-lightest: #e9d5ff;
  --theme-btn-from: #a855f7;
  --theme-btn-to: #8b5cf6;
  --theme-btn-hover-from: #9333ea;
  --theme-btn-hover-to: #7c3aed;
  --theme-text: #9333ea;
  --theme-text-light: #a855f7;
  --theme-ring: #c084fc;
  --theme-ring-light: #d8b4fe;
  --theme-border: #c084fc;
  --theme-card-header: linear-gradient(to right, #c084fc, #a855f7, #8b5cf6);
  --theme-story-ring: #c084fc;
  --theme-bg-page: linear-gradient(135deg, #faf5ff 0%, #ffffff 50%, #f3e8ff 100%);
  --theme-icon-bg: #f3e8ff;
  --theme-icon-color: #a855f7;
  --theme-nav-active-bg: #faf5ff;
  --theme-nav-active-text: #a855f7;
  --theme-badge-bg: #faf5ff;
  --theme-badge-text: #9333ea;
  --theme-badge-border: #c084fc;
  --theme-comment-bg: rgba(229, 231, 235, 0.4);
  --theme-input-focus: #c084fc;
  --theme-reaction-active-bg: #faf5ff;
  --theme-reaction-active-ring: #c084fc;
  --theme-reaction-hover: #faf5ff;
  --theme-follow-btn-bg: #faf5ff;
  --theme-follow-btn-text: #a855f7;
  --theme-follow-btn-border: #c084fc;
  --theme-follow-btn-hover-bg: #f3e8ff;
}

/* ===================================================
   THEME: SOFT GREEN
   =================================================== */
[data-social-feed-container].theme-soft-green {
  --theme-bg-from: #ecfdf5;
  --theme-bg-via: #ffffff;
  --theme-bg-to: #f0fdfa;
  --theme-accent: #10b981;
  --theme-accent-hover: #059669;
  --theme-accent-light: #ecfdf5;
  --theme-accent-lighter: #d1fae5;
  --theme-accent-lightest: #a7f3d0;
  --theme-btn-from: #10b981;
  --theme-btn-to: #14b8a6;
  --theme-btn-hover-from: #059669;
  --theme-btn-hover-to: #0d9488;
  --theme-text: #059669;
  --theme-text-light: #10b981;
  --theme-ring: #6ee7b7;
  --theme-ring-light: #a7f3d0;
  --theme-border: #6ee7b7;
  --theme-card-header: linear-gradient(to right, #34d399, #14b8a6, #2dd4bf);
  --theme-story-ring: #6ee7b7;
  --theme-bg-page: linear-gradient(135deg, #ecfdf5 0%, #ffffff 50%, #f0fdfa 100%);
  --theme-icon-bg: #d1fae5;
  --theme-icon-color: #10b981;
  --theme-nav-active-bg: #ecfdf5;
  --theme-nav-active-text: #10b981;
  --theme-badge-bg: #ecfdf5;
  --theme-badge-text: #059669;
  --theme-badge-border: #6ee7b7;
  --theme-comment-bg: rgba(229, 231, 235, 0.4);
  --theme-input-focus: #6ee7b7;
  --theme-reaction-active-bg: #ecfdf5;
  --theme-reaction-active-ring: #6ee7b7;
  --theme-reaction-hover: #ecfdf5;
  --theme-follow-btn-bg: #ecfdf5;
  --theme-follow-btn-text: #10b981;
  --theme-follow-btn-border: #6ee7b7;
  --theme-follow-btn-hover-bg: #d1fae5;
}

/* ===================================================
   THEME: WARM (Amber / Orange)
   =================================================== */
[data-social-feed-container].theme-warm {
  --theme-bg-from: #fffbeb;
  --theme-bg-via: #ffffff;
  --theme-bg-to: #fff7ed;
  --theme-accent: #f59e0b;
  --theme-accent-hover: #d97706;
  --theme-accent-light: #fffbeb;
  --theme-accent-lighter: #fef3c7;
  --theme-accent-lightest: #fde68a;
  --theme-btn-from: #f59e0b;
  --theme-btn-to: #f97316;
  --theme-btn-hover-from: #d97706;
  --theme-btn-hover-to: #ea580c;
  --theme-text: #d97706;
  --theme-text-light: #f59e0b;
  --theme-ring: #fcd34d;
  --theme-ring-light: #fde68a;
  --theme-border: #fcd34d;
  --theme-card-header: linear-gradient(to right, #fbbf24, #f59e0b, #f97316);
  --theme-story-ring: #fcd34d;
  --theme-bg-page: linear-gradient(135deg, #fffbeb 0%, #ffffff 50%, #fff7ed 100%);
  --theme-icon-bg: #fef3c7;
  --theme-icon-color: #f59e0b;
  --theme-nav-active-bg: #fffbeb;
  --theme-nav-active-text: #f59e0b;
  --theme-badge-bg: #fffbeb;
  --theme-badge-text: #d97706;
  --theme-badge-border: #fcd34d;
  --theme-comment-bg: rgba(229, 231, 235, 0.4);
  --theme-input-focus: #fcd34d;
  --theme-reaction-active-bg: #fffbeb;
  --theme-reaction-active-ring: #fcd34d;
  --theme-reaction-hover: #fffbeb;
  --theme-follow-btn-bg: #fffbeb;
  --theme-follow-btn-text: #f59e0b;
  --theme-follow-btn-border: #fcd34d;
  --theme-follow-btn-hover-bg: #fef3c7;
}

/* ===================================================
   THEME: DARK
   =================================================== */
[data-social-feed-container].theme-dark {
  --theme-bg-from: #111827;
  --theme-bg-via: #1f2937;
  --theme-bg-to: #111827;
  --theme-accent: #f472b6;
  --theme-accent-hover: #f9a8d4;
  --theme-accent-light: #1f2937;
  --theme-accent-lighter: #374151;
  --theme-accent-lightest: #4b5563;
  --theme-btn-from: #ec4899;
  --theme-btn-to: #f43f5e;
  --theme-btn-hover-from: #db2777;
  --theme-btn-hover-to: #e11d48;
  --theme-text: #f472b6;
  --theme-text-light: #f9a8d4;
  --theme-ring: #f472b6;
  --theme-ring-light: #f9a8d4;
  --theme-border: #4b5563;
  --theme-card-header: linear-gradient(to right, #374151, #4b5563, #374151);
  --theme-story-ring: #4b5563;
  --theme-bg-page: #111827;
  --theme-icon-bg: #374151;
  --theme-icon-color: #f472b6;
  --theme-nav-active-bg: #374151;
  --theme-nav-active-text: #f472b6;
  --theme-badge-bg: #374151;
  --theme-badge-text: #f472b6;
  --theme-badge-border: #4b5563;
  --theme-comment-bg: #374151;
  --theme-input-focus: #6b7280;
  --theme-reaction-active-bg: #374151;
  --theme-reaction-active-ring: #4b5563;
  --theme-reaction-hover: #374151;
  --theme-follow-btn-bg: #374151;
  --theme-follow-btn-text: #f472b6;
  --theme-follow-btn-border: #4b5563;
  --theme-follow-btn-hover-bg: #4b5563;
}

/* ===================================================
   APPLY THEME VARIABLES TO ELEMENTS
   These rules override Tailwind classes inside the
   social feed container when a theme class is active.
   =================================================== */

/* --- PAGE BACKGROUND --- */
[data-social-feed-container] {
  background: var(--theme-bg-page) !important;
  background-image: var(--theme-bg-page) !important;
}
/* Block dark mode from applying to the container when not on dark theme */
[data-social-feed-container]:not(.theme-dark) {
  background: var(--theme-bg-page) !important;
  background-image: var(--theme-bg-page) !important;
}

/* --- CARD STYLES --- */
[data-social-feed-container] .card {
  border-color: var(--theme-accent-light) !important;
}
[data-social-feed-container].theme-dark .card {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

/* --- ACCENT TEXT COLORS --- */
[data-social-feed-container] .text-pink-600,
[data-social-feed-container] .text-pink-500,
[data-social-feed-container] .text-pink-400 {
  color: var(--theme-text) !important;
}
[data-social-feed-container] .text-rose-500 {
  color: var(--theme-accent) !important;
}

/* --- HOVER TEXT COLORS --- */
[data-social-feed-container] a:hover {
  color: var(--theme-link-hover) !important;
}
[data-social-feed-container] .hover\:text-pink-600:hover,
[data-social-feed-container] .hover\:text-pink-500:hover,
[data-social-feed-container] .hover\:text-pink-400:hover {
  color: var(--theme-accent-hover) !important;
}
[data-social-feed-container] .group:hover .group-hover\:text-pink-600 {
  color: var(--theme-accent-hover) !important;
}

/* --- ACCENT BACKGROUNDS --- */
[data-social-feed-container] .bg-pink-50 {
  background-color: var(--theme-accent-light) !important;
}
[data-social-feed-container] .bg-pink-100,
[data-social-feed-container] .bg-pink-100\/30 {
  background-color: var(--theme-accent-lighter) !important;
}
[data-social-feed-container] .bg-pink-500 {
  background-color: var(--theme-accent) !important;
}
[data-social-feed-container] .hover\:bg-pink-50:hover {
  background-color: var(--theme-reaction-hover) !important;
}
[data-social-feed-container] .hover\:bg-pink-100:hover,
[data-social-feed-container] .hover\:bg-pink-200:hover {
  background-color: var(--theme-accent-lighter) !important;
}

/* --- DARK MODE BACKGROUND OVERRIDES --- */
[data-social-feed-container] .dark\:bg-pink-900\/20 {
  background-color: var(--theme-accent-light) !important;
}
[data-social-feed-container] .dark\:text-pink-400 {
  color: var(--theme-text-light) !important;
}
[data-social-feed-container] .dark\:hover\:bg-pink-900\/20:hover {
  background-color: var(--theme-accent-lighter) !important;
}
[data-social-feed-container].theme-dark .dark\:bg-pink-900\/20 {
  background-color: var(--theme-accent-light) !important;
}

/* --- GRADIENT BUTTONS (from-pink-500 to-rose-500) --- */
[data-social-feed-container] .bg-gradient-to-r.from-pink-500,
[data-social-feed-container] [class*="from-pink-500"] {
  --tw-gradient-from: var(--theme-btn-from) !important;
}
[data-social-feed-container] .bg-gradient-to-r.to-rose-500,
[data-social-feed-container] [class*="to-rose-500"] {
  --tw-gradient-to: var(--theme-btn-to) !important;
}
[data-social-feed-container] .hover\:from-pink-600:hover {
  --tw-gradient-from: var(--theme-btn-hover-from) !important;
}
[data-social-feed-container] .hover\:to-rose-600:hover {
  --tw-gradient-to: var(--theme-btn-hover-to) !important;
}

/* --- CARD HEADER GRADIENTS --- */
/* Pink accent values (the variable overrides are per-theme below) */
[data-social-feed-container] .bg-gradient-to-r.from-pink-400,
[data-social-feed-container] [class*="from-pink-400"] {
  --tw-gradient-from: #f472b6 !important;
}
[data-social-feed-container] .via-rose-400 {
  --tw-gradient-via: #fb7185 !important;
}
[data-social-feed-container] .to-purple-400 {
  --tw-gradient-to: #a78bfa !important;
}

/* Theme-specific card header gradients */
[data-social-feed-container].theme-default .bg-gradient-to-r.from-pink-400,
[data-social-feed-container].theme-default [class*="from-pink-400"] { --tw-gradient-from: #f472b6 !important; }
[data-social-feed-container].theme-default .via-rose-400 { --tw-gradient-via: #fb7185 !important; }
[data-social-feed-container].theme-default .to-purple-400 { --tw-gradient-to: #a78bfa !important; }

[data-social-feed-container].theme-light .bg-gradient-to-r.from-pink-400,
[data-social-feed-container].theme-light [class*="from-pink-400"] { --tw-gradient-from: #9ca3af !important; }
[data-social-feed-container].theme-light .via-rose-400 { --tw-gradient-via: #6b7280 !important; }
[data-social-feed-container].theme-light .to-purple-400 { --tw-gradient-to: #4b5563 !important; }

[data-social-feed-container].theme-soft-blue .bg-gradient-to-r.from-pink-400,
[data-social-feed-container].theme-soft-blue [class*="from-pink-400"] { --tw-gradient-from: #60a5fa !important; }
[data-social-feed-container].theme-soft-blue .via-rose-400 { --tw-gradient-via: #818cf8 !important; }
[data-social-feed-container].theme-soft-blue .to-purple-400 { --tw-gradient-to: #a78bfa !important; }

[data-social-feed-container].theme-soft-purple .bg-gradient-to-r.from-pink-400,
[data-social-feed-container].theme-soft-purple [class*="from-pink-400"] { --tw-gradient-from: #c084fc !important; }
[data-social-feed-container].theme-soft-purple .via-rose-400 { --tw-gradient-via: #a855f7 !important; }
[data-social-feed-container].theme-soft-purple .to-purple-400 { --tw-gradient-to: #8b5cf6 !important; }

[data-social-feed-container].theme-soft-green .bg-gradient-to-r.from-pink-400,
[data-social-feed-container].theme-soft-green [class*="from-pink-400"] { --tw-gradient-from: #34d399 !important; }
[data-social-feed-container].theme-soft-green .via-rose-400 { --tw-gradient-via: #14b8a6 !important; }
[data-social-feed-container].theme-soft-green .to-purple-400 { --tw-gradient-to: #2dd4bf !important; }

[data-social-feed-container].theme-warm .bg-gradient-to-r.from-pink-400,
[data-social-feed-container].theme-warm [class*="from-pink-400"] { --tw-gradient-from: #fbbf24 !important; }
[data-social-feed-container].theme-warm .via-rose-400 { --tw-gradient-via: #f59e0b !important; }
[data-social-feed-container].theme-warm .to-purple-400 { --tw-gradient-to: #f97316 !important; }

[data-social-feed-container].theme-dark .bg-gradient-to-r.from-pink-400,
[data-social-feed-container].theme-dark [class*="from-pink-400"] { --tw-gradient-from: #374151 !important; }
[data-social-feed-container].theme-dark .via-rose-400 { --tw-gradient-via: #4b5563 !important; }
[data-social-feed-container].theme-dark .to-purple-400 { --tw-gradient-to: #374151 !important; }

/* --- STORY CIRCLE GRADIENTS --- */
[data-social-feed-container] .from-pink-400.to-purple-500 {
  --tw-gradient-from: #ec4899 !important;
  --tw-gradient-to: #8b5cf6 !important;
}
/* Theme-specific story circle gradients */
[data-social-feed-container].theme-default .from-pink-400.to-purple-500 { --tw-gradient-from: #ec4899 !important; --tw-gradient-to: #8b5cf6 !important; }
[data-social-feed-container].theme-light .from-pink-400.to-purple-500 { --tw-gradient-from: #6b7280 !important; --tw-gradient-to: #4b5563 !important; }
[data-social-feed-container].theme-soft-blue .from-pink-400.to-purple-500 { --tw-gradient-from: #3b82f6 !important; --tw-gradient-to: #6366f1 !important; }
[data-social-feed-container].theme-soft-purple .from-pink-400.to-purple-500 { --tw-gradient-from: #a855f7 !important; --tw-gradient-to: #7c3aed !important; }
[data-social-feed-container].theme-soft-green .from-pink-400.to-purple-500 { --tw-gradient-from: #10b981 !important; --tw-gradient-to: #059669 !important; }
[data-social-feed-container].theme-warm .from-pink-400.to-purple-500 { --tw-gradient-from: #f59e0b !important; --tw-gradient-to: #ea580c !important; }
[data-social-feed-container].theme-dark .from-pink-400.to-purple-500 { --tw-gradient-from: #4b5563 !important; --tw-gradient-to: #374151 !important; }

/* --- BORDERS & RINGS --- */
[data-social-feed-container] .border-pink-300,
[data-social-feed-container] .border-pink-500 {
  border-color: var(--theme-border) !important;
}
[data-social-feed-container] .hover\:border-pink-300:hover {
  border-color: var(--theme-border) !important;
}
[data-social-feed-container] .group:hover .group-hover\:ring-pink-300 {
  --tw-ring-color: var(--theme-ring-light) !important;
}
[data-social-feed-container] .ring-pink-300 {
  --tw-ring-color: var(--theme-ring-light) !important;
}
[data-social-feed-container] .ring-pink-500 {
  --tw-ring-color: var(--theme-ring) !important;
}
[data-social-feed-container] .ring-dashed.ring-pink-300 {
  --tw-ring-color: var(--theme-ring-light) !important;
}

/* --- FOCUS RING ON INPUTS --- */
[data-social-feed-container] .focus\:ring-pink-300:focus,
[data-social-feed-container] .focus\:ring-pink-200:focus {
  --tw-ring-color: var(--theme-input-focus) !important;
}

/* --- FEELING / BADGE STYLES --- */
[data-social-feed-container] .badge.bg-pink-50,
[data-social-feed-container] [class*="bg-pink-50"].rounded-full {
  background-color: var(--theme-badge-bg) !important;
  color: var(--theme-badge-text) !important;
  border-color: var(--theme-badge-border) !important;
}

/* --- REACTION BUTTON ACTIVE STATE --- */
[data-social-feed-container] [class*="text-pink-600"].bg-pink-50,
[data-social-feed-container] [class*="text-pink-500"].bg-pink-50 {
  background-color: var(--theme-reaction-active-bg) !important;
  color: var(--theme-text) !important;
}

/* --- PROFILE CARD AVATAR GRADIENT --- */
[data-social-feed-container] .from-pink-100.to-rose-100 {
  --tw-gradient-from: var(--theme-accent-lighter) !important;
  --tw-gradient-to: var(--theme-accent-light) !important;
}
[data-social-feed-container] .from-pink-100.to-rose-100 .text-pink-600 {
  color: var(--theme-text) !important;
}

/* --- FOLLOW/UNFOLLOW BUTTONS --- */
[data-social-feed-container] .btn-outline.border-pink-300 {
  border-color: var(--theme-follow-btn-border) !important;
  color: var(--theme-follow-btn-text) !important;
}
[data-social-feed-container] .btn-outline.border-pink-300:hover {
  background-color: var(--theme-follow-btn-hover-bg) !important;
}
[data-social-feed-container] .text-pink-500.btn-ghost {
  color: var(--theme-follow-btn-text) !important;
}
[data-social-feed-container] .text-pink-500.btn-ghost:hover {
  background-color: var(--theme-follow-btn-hover-bg) !important;
}

/* --- NAV ACTIVE LINK --- */
[data-social-feed-container] .bg-pink-50.text-pink-600.dark\:bg-pink-900\/20.dark\:text-pink-400 {
  background-color: var(--theme-nav-active-bg) !important;
  color: var(--theme-nav-active-text) !important;
}
[data-social-feed-container] .bg-pink-100.text-pink-500 {
  background-color: var(--theme-icon-bg) !important;
  color: var(--theme-icon-color) !important;
}

/* --- POST TYPE BUTTON ACTIVE --- */
[data-social-feed-container] .bg-pink-100.text-pink-600.hover\:bg-pink-200 {
  background-color: var(--theme-accent-lighter) !important;
  color: var(--theme-text) !important;
}
[data-social-feed-container] .bg-pink-100.text-pink-600.hover\:bg-pink-200:hover {
  background-color: var(--theme-accent-lightest) !important;
}

/* --- STORY TYPE SELECTOR --- */
[data-social-feed-container] .bg-pink-100.text-pink-600.border-pink-300 {
  background-color: var(--theme-accent-lighter) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

/* --- ICONS AND EMPTY STATES --- */
[data-social-feed-container] .text-pink-300,
[data-social-feed-container] .text-pink-300\/70 {
  color: var(--theme-text-light) !important;
}

/* --- COMMENT BUBBLE BACKGROUND --- */
[data-social-feed-container] .bg-base-200\/60 {
  background-color: var(--theme-comment-bg) !important;
}

/* --- REACTION TRAY SELECTED --- */
[data-social-feed-container] .bg-pink-50.ring-2.ring-pink-300 {
  background-color: var(--theme-reaction-active-bg) !important;
  --tw-ring-color: var(--theme-reaction-active-ring) !important;
}

/* --- COMMENT REACTIONS --- */
[data-social-feed-container] [data-controller="comment-reactions"] .text-pink-500 {
  color: var(--theme-text) !important;
}

/* --- ALBUM CARDS --- */
[data-social-feed-container] .card.group .group-hover\:text-pink-600 {
  color: var(--theme-accent-hover) !important;
}
[data-social-feed-container] .from-pink-100.to-rose-100 .text-pink-300 {
  color: var(--theme-text-light) !important;
}

/* --- SUGGESTED USERS FOLLOW BUTTON --- */
[data-social-feed-container] .text-pink-500.hover\:bg-pink-50 {
  color: var(--theme-follow-btn-text) !important;
}
[data-social-feed-container] .text-pink-500.hover\:bg-pink-50:hover {
  background-color: var(--theme-follow-btn-hover-bg) !important;
}

/* --- THEME DOT ACTIVE STATE --- */
[data-social-feed-container] .theme-dot.border-pink-500 {
  border-color: var(--theme-accent) !important;
}
[data-social-feed-container] .theme-dot.ring-pink-300 {
  --tw-ring-color: var(--theme-ring-light) !important;
}

/* --- DARK THEME SPECIFIC OVERRIDES --- */
[data-social-feed-container].theme-dark {
  background: #111827 !important;
  color: #e5e7eb;
}
[data-social-feed-container].theme-dark .card {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}
[data-social-feed-container].theme-dark .card .bg-base-100 {
  background-color: #1f2937 !important;
}
[data-social-feed-container].theme-dark .text-base-content {
  color: #e5e7eb !important;
}
[data-social-feed-container].theme-dark .text-base-content\/40,
[data-social-feed-container].theme-dark .text-base-content\/50,
[data-social-feed-container].theme-dark .text-base-content\/60,
[data-social-feed-container].theme-dark .text-base-content\/70 {
  color: #9ca3af !important;
}
[data-social-feed-container].theme-dark .text-base-content\/20,
[data-social-feed-container].theme-dark .text-base-content\/30 {
  color: #6b7280 !important;
}
[data-social-feed-container].theme-dark .btn-ghost {
  color: #9ca3af !important;
}
[data-social-feed-container].theme-dark .bg-base-200\/50,
[data-social-feed-container].theme-dark .bg-base-200\/70,
[data-social-feed-container].theme-dark .bg-base-200\/60 {
  background-color: #374151 !important;
}
[data-social-feed-container].theme-dark .input-ghost,
[data-social-feed-container].theme-dark .textarea-ghost {
  background-color: #374151 !important;
  color: #e5e7eb !important;
}
[data-social-feed-container].theme-dark .border-base-200 {
  border-color: #374151 !important;
}
[data-social-feed-container].theme-dark .border-base-200\/50 {
  border-color: #374151 !important;
}
[data-social-feed-container].theme-dark .hover\:bg-base-200\/50:hover {
  background-color: #4b5563 !important;
}
[data-social-feed-container].theme-dark .select-bordered,
[data-social-feed-container].theme-dark .file-input-bordered,
[data-social-feed-container].theme-dark .input-bordered {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #e5e7eb !important;
}
[data-social-feed-container].theme-dark .modal-box {
  background-color: #1f2937 !important;
}
[data-social-feed-container].theme-dark .from-gray-100.to-gray-200 {
  --tw-gradient-from: #374151 !important;
  --tw-gradient-to: #4b5563 !important;
}
[data-social-feed-container].theme-dark .text-gray-500 {
  color: #9ca3af !important;
}
[data-social-feed-container].theme-dark .bg-white {
  background-color: #1f2937 !important;
}
[data-social-feed-container].theme-dark .divide-base-200\/50 > * + * {
  border-color: #374151 !important;
}

/* --- SMOOTH THEME TRANSITIONS --- */
[data-social-feed-container],
[data-social-feed-container] .card,
[data-social-feed-container] button,
[data-social-feed-container] a,
[data-social-feed-container] .badge,
[data-social-feed-container] input,
[data-social-feed-container] textarea,
[data-social-feed-container] select,
[data-social-feed-container] .btn,
[data-social-feed-container] [class*="bg-"],
[data-social-feed-container] [class*="text-"],
[data-social-feed-container] [class*="border-"],
[data-social-feed-container] [class*="ring-"] {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
}

/* --- NEW: Comment bubble, input, and shared UI elements --- */
[data-social-feed-container] .focus\:bg-base-200\/30:focus {
  background-color: var(--theme-comment-bg) !important;
}

/* Remove dark mode from inside the social feed container when not in dark theme */
[data-social-feed-container]:not(.theme-dark) .dark\:from-gray-900,
[data-social-feed-container]:not(.theme-dark) .dark\:via-gray-900,
[data-social-feed-container]:not(.theme-dark) .dark\:to-gray-800 {
  background: transparent !important;
}

/* Make sure dark theme gets proper dark gradients */
[data-social-feed-container].theme-dark .dark\:from-gray-900,
[data-social-feed-container].theme-dark .dark\:via-gray-900,
[data-social-feed-container].theme-dark .dark\:to-gray-800 {
  background: transparent !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

/* Custom styles */

/* Comment slide-in animation */
@keyframes commentSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.comment-item {
  animation: commentSlideIn 0.25s ease-out;
}

#mobile-menu {
  display: none;
}

#mobile-menu.show {
  display: block;
}

/* Form styles - only keeping non-conflicting custom styles */
.form-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.form-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

/* === Global Mobile-Friendly Styles === */
/* Prevent horizontal scroll on all screen sizes */
html, body {
  overflow-x: hidden;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Keep scrollbar always visible so dialogs don't cause a white bar to slide in */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* Even when a dialog opens (browser tries to hide scrollbar), keep it visible */
html:has(dialog[open]) {
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
}

/* Prevent content overflow in flex/grid containers */
#app-drawer, .drawer-content, main, .navbar {
  max-width: 100vw;
  overflow-x: clip;
}

/* Make table cells not break layout on mobile */
table {
  word-break: normal;
}

/* Better touch targets for mobile */
@media (max-width: 640px) {
  /* Slightly larger tap targets */
  .btn, button, a, select, input, textarea {
    touch-action: manipulation;
  }
  
  /* Compact selects and dropdowns on mobile - reduce height, font, padding */
  select, .select, .select-bordered, .select-sm {
    min-height: 2.25rem !important;
    height: 2.25rem !important;
    font-size: 16px !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
  }
  
  /* Compact text inputs on mobile */
  input.input, .input, .input-bordered, .input-sm {
    min-height: 2.25rem !important;
    height: 2.25rem !important;
    font-size: 16px !important;
  }
  
  /* Reduce textarea height on mobile */
  textarea.textarea {
    font-size: 16px !important;
  }
  
  /* Compact input groups / joins on mobile */
  .join .btn, .join .input, .join .select {
    min-height: 2.25rem !important;
    height: 2.25rem !important;
  }
  
  /* Prevent tables from causing horizontal scroll by default */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Ensure card bodies don't overflow */
  .card-body {
    overflow-wrap: break-word;
  }
}

/* Hide Turbo progress bar (the thin loading line at the top) */
.turbo-progress-bar {
  display: none !important;
}

/* Flash message animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.25s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

/* Product card slide-up animation */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}