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;
}
/* Sortable.js drag and drop styles */
.sortable-ghost {
  opacity: 0.4;
  background: #f3f4f6;
}

.sortable-drag {
  opacity: 0.8;
  background: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.drag-handle {
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

/* Hide scrollbar for horizontal scroll on mobile */
.scrollbar-hide {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* Mobile-specific improvements */
@media (max-width: 640px) {
  .mobile-touch-scroll {
    -webkit-overflow-scrolling: touch;
  }
} 

/* Layout Selection Modal Animations */
@keyframes slidePreview {
  0%, 25% { background: linear-gradient(135deg, #ec4899, #be185d); }
  25%, 50% { background: linear-gradient(135deg, #3b82f6, #1e40af); }
  50%, 75% { background: linear-gradient(135deg, #10b981, #047857); }
  75%, 100% { background: linear-gradient(135deg, #f59e0b, #d97706); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.3); }
  50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.4); }
}

.layout-preview-slider {
  animation: slidePreview 4s infinite;
}

.layout-preview-classic:hover .gradient-preview,
.layout-preview-banner:hover .gradient-preview {
  animation: pulseGlow 2s infinite;
}

/* Layout Selection Hover Effects */
.layout-option {
  transition: all 0.2s ease-in-out;
}

.layout-option:hover {
  transform: translateY(-2px);
}

.layout-option.selected {
  background: linear-gradient(to bottom right, #dbeafe, #bfdbfe);
  border-color: #3b82f6;
}

/* Touch-friendly targets */
.touch-target {
  min-width: 44px;
  min-height: 44px;
}

/* Heart burst micro-animation */
@keyframes heart-burst {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  60%  { transform: scale(0.9); }
  80%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes heart-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

.favorite-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.favorite-btn.heart-bursting i {
  animation: heart-burst 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.favorite-btn.heart-bursting::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #B39B63;
  pointer-events: none;
  animation: heart-ring 0.45s ease-out forwards;
}

/* Feed skeleton shimmer */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, #f3f4f6 25%, #e8e9eb 50%, #f3f4f6 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* Turbo page transitions */
.turbo-progress-bar {
  background-color: #B39B63 !important;
  height: 2px !important;
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.page-entering {
  animation: page-fade-in 0.15s ease-out both;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .layout-selection-modal {
    margin: 0.5rem;
    max-height: calc(100vh - 1rem);
    border-radius: 1rem;
    overflow-y: auto;
  }
  
  .layout-options-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .layout-option {
    padding: 1.5rem 1rem;
  }
  
  .layout-option .preview-container {
    height: 6rem;
    margin-bottom: 1rem;
  }
} 
/* Mobile Bottom Sheet Comment Styles */

/* Ensure sheet and overlay are on top of everything */
[data-comment-sheet-target="overlay"] {
  z-index: 99998 !important;
  pointer-events: auto !important;
}

[data-comment-sheet-target="sheet"] {
  z-index: 99999 !important;
  background-color: white !important;
  min-height: 400px !important;
  display: block !important;
}

/* When sheet is visible (not hidden) */
[data-comment-sheet-target="sheet"]:not(.hidden) {
  display: block !important;
}

/* Transform transition */
[data-comment-sheet-target="sheet"].translate-y-full {
  transform: translateY(100%) !important;
}

[data-comment-sheet-target="sheet"]:not(.translate-y-full) {
  transform: translateY(0) !important;
}

/* Line clamp utility for truncating text */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bottom sheet animations */
@media (max-width: 767px) {
  /* Ensure mobile sheet elements are properly styled */
  [data-comment-sheet-target="sheet"] {
    touch-action: pan-y;
  }
  
  /* Smooth overlay fade */
  [data-comment-sheet-target="overlay"] {
    transition: opacity 300ms ease-out;
  }
  
  /* Smooth sheet slide */
  [data-comment-sheet-target="sheet"] {
    transition: transform 300ms ease-out;
  }
  
  /* When dragging, remove transition for smooth follow */
  [data-comment-sheet-target="sheet"].dragging {
    transition: none !important;
  }
  
  /* Improve textarea experience in sheet */
  [data-comment-sheet-target="content"] textarea {
    min-height: 120px;
    max-height: 500px; /* Allow more expansion on mobile */
    font-size: 16px; /* Prevent iOS zoom on focus */
    transition: height 0.15s ease;
    overflow-y: hidden; /* Will switch to auto when needed */
  }
  
  /* Ensure sheet content area can grow */
  [data-comment-sheet-target="sheet"] .overflow-y-auto {
    max-height: calc(90vh - 180px); /* Account for handle, header, and buttons */
  }
  
  /* Mobile-optimized button sizes */
  [data-comment-sheet-target="sheet"] button {
    min-height: 48px; /* Better touch targets */
  }
  
  /* Handle visual feedback */
  [data-comment-sheet-target="handle"]:active {
    opacity: 0.7;
  }
  
  /* Ensure sheet content doesn't overflow */
  [data-comment-sheet-target="sheet"] .overflow-y-auto {
    overscroll-behavior: contain;
  }
}

/* Desktop: hide all mobile-specific elements */
@media (min-width: 768px) {
  [data-comment-sheet-target="trigger"],
  [data-comment-sheet-target="overlay"],
  [data-comment-sheet-target="sheet"] {
    display: none !important;
  }
  
  [data-comment-sheet-target="content"] {
    display: block !important;
  }
}

/* Prevent body scroll when sheet is open (mobile only) */
@media (max-width: 767px) {
  body.sheet-open {
    overflow: hidden;
  }
}

/* Reply context styling */
[data-comment-sheet-target="replyContext"] {
  background: linear-gradient(to right, rgba(179, 155, 99, 0.05), transparent);
}

/* Smooth transition for all interactive elements */
[data-comment-sheet-target="sheet"] .transition-colors {
  transition-property: background-color, border-color, color;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}

/* Gold accent for lavish feel */
[data-comment-sheet-target="sheet"] .border-l-4 {
  border-left-color: #B39B63;
}

/* Improve shadow for depth */
[data-comment-sheet-target="sheet"] {
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Enhanced backdrop blur for overlay */
[data-comment-sheet-target="overlay"] {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Smooth handle dragging */
[data-comment-sheet-target="sheet"].dragging {
  transition: none !important;
  will-change: transform;
}

[data-comment-sheet-target="handle"] {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Discovery Interface Styles */
.filter-tag {
  @apply inline-block px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-full cursor-pointer transition-colors;
}

@media (hover: hover) {
  .filter-tag:hover {
    @apply bg-gray-300;
  }
}

.filter-tag.active {
  @apply bg-blue-500 text-white;
}

/* Discovery Grid - Masonry Layout */
.discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem 0;
}

.discovery-item {
  @apply bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer transition-all duration-200;
  break-inside: avoid;
}

@media (hover: hover) {
  .discovery-item:hover {
    @apply shadow-md transform scale-102;
  }
}

.discovery-item.selected {
  @apply ring-2 ring-blue-500 shadow-lg;
}

/* Content Type Specific Styling */
.discovery-item[data-type="unsplash"] {
  @apply border-l-4 border-blue-500;
}

.discovery-item[data-type="film_grab"] {
  @apply border-l-4 border-purple-500;
}

/* Discovery Item Image */
.discovery-item img {
  @apply w-full h-auto object-cover;
  min-height: 150px;
  max-height: 300px;
}

/* Color Palette Display */
.color-palette {
  @apply flex space-x-1 mt-2;
}

.color-palette .color-swatch {
  @apply w-4 h-4 rounded-full border border-gray-200;
}

/* Loading States */
.discovery-loading {
  @apply flex items-center justify-center p-8 text-gray-500;
}

.discovery-loading .spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500;
}

/* Error States */
.discovery-error {
  @apply bg-red-50 border border-red-200 text-red-800 p-4 rounded-lg;
}

/* Empty States */
.discovery-empty {
  @apply text-center p-8 text-gray-500;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .discovery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
  }
  
  .discovery-item img {
    min-height: 120px;
    max-height: 200px;
  }
}

/* Letterboxd-style Enhancements */

/* Line Clamp Utilities */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Film Poster Hover Effects */
.film-poster-container {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

@media (hover: hover) {
  .film-poster-container:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
}

.film-poster-container img {
  transition: transform 0.2s ease-in-out;
}

@media (hover: hover) {
  .film-poster-container:hover img {
    transform: scale(1.05);
  }
}

/* Hero Background Image Styling */
.hero-background {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

/* Rating Cards */
.rating-card {
  backdrop-filter: blur(10px);
  background: rgba(31, 41, 55, 0.8);
  border: 1px solid rgba(75, 85, 99, 0.5);
}

/* Custom Scrollbar for Dark Theme */
.dark-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark-scrollbar::-webkit-scrollbar-track {
  background: #374151;
  border-radius: 4px;
}

.dark-scrollbar::-webkit-scrollbar-thumb {
  background: #6B7280;
  border-radius: 4px;
}

@media (hover: hover) {
  .dark-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
  }
}

/* Film Grid Animations */
.film-grid-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .film-grid-item:hover {
    transform: translateY(-2px);
  }
}

/* Typography Enhancements */
.film-title {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.film-year {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

/* Button Hover Effects */
.btn-primary {
  @apply bg-blue-600 text-white px-6 py-2 rounded-lg font-medium;
  transition: all 0.2s ease-in-out;
}

@media (hover: hover) {
  .btn-primary:hover {
    @apply bg-blue-700 shadow-lg;
    transform: translateY(-1px);
  }
}

.btn-secondary {
  @apply bg-gray-600 text-white px-4 py-2 rounded-lg font-medium;
  transition: all 0.2s ease-in-out;
}

@media (hover: hover) {
  .btn-secondary:hover {
    @apply bg-gray-700;
  }
}

/* Form Input Styling for Dark Theme */
.form-input-dark {
  @apply bg-gray-700 border-gray-600 text-white placeholder-gray-400 rounded-lg;
  transition: all 0.2s ease-in-out;
}

.form-input-dark:focus {
  @apply border-blue-500 ring-blue-500 ring-opacity-50;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Screenshot Gallery Enhancements */
.screenshot-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

@media (hover: hover) {
  .screenshot-item:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.3);
  }
}

.screenshot-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

@media (hover: hover) {
  .screenshot-item:hover .screenshot-overlay {
    opacity: 1;
  }
}

/* Responsive Typography */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.1;
  }
  
  .film-grid-item h3 {
    font-size: 0.875rem;
  }
}
/* ─── The hub: a welcome screen ───
   Wallpaper behind retro windows. Values come from docs/agents/retro_os_design_system.md
   (gold title bars, black borders, hard offset shadows, Arial chrome, Courier labels) and are
   declared once here so the page can be re-tinted in one place. Loaded only by the hub. */
:root {
  --hub-desk: #6F8A8F;
  --hub-desk-2: #5E777C;
  --hub-ink: #1a1a1a;
  --hub-ink-2: #4A3F32;
  --hub-ink-3: #6B5532;
  --hub-gold: #B39B63;
  --hub-gold-2: #A08C5C;
  --hub-gold-pale: #E9DFC6;
  --hub-cream: #FFFBF4;
  --hub-hover: #faf6ee;
  --hub-selected: #f5edda;
  --hub-rule: #d4c9b0;
  --hub-parchment: #EDE6D4;
  --hub-green: #1F6F4A;
  --hub-flag: #D9302C;
  --hub-screen: #2C2416;
  --hub-pill-draft: #FFF2CC;
  --hub-pill-on: #E3F3EA;
  --hub-pill-quiet: #EEE9DD;
  --hub-pill-no: #FBE7E7;
  --hub-light-red: #ff5f57;
  --hub-light-yellow: #febc2e;
  --hub-light-green: #28c840;
  --hub-chrome: Arial, Helvetica, sans-serif;
  --hub-mono: 'Courier New', Courier, monospace;
}
.hub-desk {
  background-color: var(--hub-desk);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.10) 1px, transparent 1.5px),
    linear-gradient(135deg, var(--hub-desk) 0%, var(--hub-desk-2) 100%);
  background-size: 14px 14px, 100% 100%;
}
.hub-win { background: #fff; border: 2.5px solid var(--hub-ink); box-shadow: 5px 5px 0 var(--hub-ink); }
.hub-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--hub-gold); border-bottom: 2.5px solid var(--hub-ink); }
.hub-bar-title { flex: 1; margin: 0; text-align: center; color: #fff; font: 700 13px/1.3 var(--hub-chrome); letter-spacing: 0.04em; }
.hub-bar-right { color: rgba(255, 255, 255, 0.85); font: 700 10px var(--hub-mono); letter-spacing: 0.12em; }
.hub-light { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hub-ink); }
.hub-light--red { background: var(--hub-light-red); }
.hub-light--yellow { background: var(--hub-light-yellow); }
.hub-light--green { background: var(--hub-light-green); }

.hub-welcome { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--hub-cream); border-bottom: 2px solid var(--hub-ink); }
.hub-avatar { width: 64px; height: 64px; flex: none; border: 2px solid var(--hub-ink); box-shadow: 3px 3px 0 var(--hub-ink); overflow: hidden; background: var(--hub-parchment); display: grid; place-items: center; }
.hub-hello { margin: 0; font: 900 26px/1 var(--hub-chrome); letter-spacing: -0.02em; }
.hub-hello em { font-style: italic; color: var(--hub-gold-2); }
.hub-since { margin-left: auto; text-align: right; font: 700 10px/1.6 var(--hub-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-ink-3); }

.hub-col { padding: 14px; min-width: 0; }
.hub-col + .hub-col { border-top: 2px solid var(--hub-ink); }
@media (min-width: 768px) { .hub-col + .hub-col { border-top: 0; border-left: 2px solid var(--hub-ink); } }
.hub-col-h { margin: 0 0 10px; font: 700 10px var(--hub-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--hub-ink-3); }

.hub-got { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 12px 8px 10px; background: #fff; border: 2px solid var(--hub-ink); box-shadow: 3px 3px 0 var(--hub-ink); text-align: center; color: var(--hub-ink); font-family: var(--hub-chrome); }
.hub-got:hover { background: var(--hub-hover); }
.hub-got:active { box-shadow: inset 1px 1px 0 var(--hub-ink); }
.hub-got--hot { background: var(--hub-cream); }
.hub-got--quiet { box-shadow: 2px 2px 0 var(--hub-ink); color: var(--hub-ink-2); }
.hub-got svg { width: 44px; height: 44px; }
.hub-got b { font-size: 13px; font-weight: 900; letter-spacing: -0.01em; }
.hub-got--quiet b { font-weight: 700; }
.hub-got small { font: 11px var(--hub-mono); color: var(--hub-ink-3); }

.hub-meter { display: block; height: 100%; border: 2px solid var(--hub-ink); background: #fff; padding: 8px 6px 6px; text-align: center; box-shadow: 2px 2px 0 var(--hub-ink); color: var(--hub-ink); }
.hub-meter:hover { background: var(--hub-hover); }
.hub-lcd { display: inline-block; font: 700 26px/1 var(--hub-mono); padding: 2px 8px; background: var(--hub-ink); color: var(--hub-gold-pale); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.hub-meter b { display: block; font: 700 11px var(--hub-chrome); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.hub-meter small { display: block; min-height: 12px; font: 10px var(--hub-mono); color: var(--hub-ink-3); }

.hub-listbox { border: 2px solid var(--hub-ink); background: #fff; }
.hub-listbox-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 10px; background: var(--hub-gold-pale); border-bottom: 2px solid var(--hub-ink); font: 700 11px var(--hub-chrome); letter-spacing: 0.06em; text-transform: uppercase; }
.hub-listbox-h a { color: var(--hub-gold-2); font: 700 10px var(--hub-mono); letter-spacing: 0.1em; }
.hub-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--hub-rule); font-size: 13px; color: var(--hub-ink); }
.hub-row:last-child { border-bottom: 0; }
.hub-row:hover { background: var(--hub-hover); }
.hub-row-title { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.hub-row-meta { display: block; font: 10px var(--hub-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hub-ink-3); margin-top: 2px; }
.hub-pill { font: 700 10px var(--hub-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border: 1.5px solid var(--hub-ink); background: #fff; white-space: nowrap; }
.hub-pill--draft { background: var(--hub-pill-draft); }
.hub-pill--on { background: var(--hub-pill-on); }
.hub-pill--quiet { background: var(--hub-pill-quiet); }

.hub-chan { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px; font: 700 12px var(--hub-chrome); border: 2px solid var(--hub-ink); background: #fff; box-shadow: 2px 2px 0 var(--hub-ink); color: var(--hub-ink); }
.hub-chan:hover { background: var(--hub-hover); }
.hub-chan:active { box-shadow: inset 1px 1px 0 var(--hub-ink); }
.hub-chan--gold { background: var(--hub-gold); color: #fff; }
.hub-chan--gold:hover { background: var(--hub-gold-2); }
.hub-chan-sep { height: 1px; border: 0; background: var(--hub-rule); margin: 10px 0; }

.hub-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 5px 12px; border-top: 2.5px solid var(--hub-ink); background: var(--hub-cream); font: 10px var(--hub-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-ink-3); }
.hub-status b { color: var(--hub-ink); }

.hub-grp { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; background: var(--hub-gold-pale); border-top: 1.5px solid var(--hub-ink); border-bottom: 1.5px solid var(--hub-ink); font: 900 12px var(--hub-chrome); }
.hub-grp:first-child { border-top: 0; }
.hub-grp em { font: 700 11px var(--hub-mono); color: var(--hub-ink-3); }
.hub-grp-new { margin-left: 6px; font: 700 10px var(--hub-mono); color: var(--hub-green); }
.hub-buddy { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; font-size: 12px; border-bottom: 1px solid var(--hub-rule); }
.hub-buddy-meta { display: block; font: 10px var(--hub-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--hub-ink-3); }
.hub-btn { font: 700 11px var(--hub-chrome); padding: 3px 8px; border: 2px solid var(--hub-ink); box-shadow: 2px 2px 0 var(--hub-ink); background: #fff; color: var(--hub-ink); white-space: nowrap; cursor: pointer; }
.hub-btn:hover { background: var(--hub-hover); }
.hub-btn:active { box-shadow: inset 1px 1px 0 var(--hub-ink); }
.hub-btn--gold { background: var(--hub-gold); color: #fff; }
.hub-btn--gold:hover { background: var(--hub-gold-2); }
.hub-foot { display: flex; gap: 6px; padding: 10px; border-top: 2px solid var(--hub-ink); background: var(--hub-cream); }
.hub-foot .hub-btn { flex: 1; text-align: center; padding: 6px 4px; }

.hub-got:focus-visible, .hub-meter:focus-visible, .hub-chan:focus-visible, .hub-btn:focus-visible, .hub-row:focus-visible, .hub-avatar-link:focus-visible {
  outline: 3px solid var(--hub-gold); outline-offset: 2px;
}

/* ─── Your Algorithm window ─── */
.hub-algo-head { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; padding: 16px 18px; background: var(--hub-cream); border-bottom: 2px solid var(--hub-ink); align-items: center; }
@media (max-width: 767px) { .hub-algo-head { grid-template-columns: 1fr; } }
.hub-algo-title { margin: 0; font: 900 24px/1.05 var(--hub-chrome); letter-spacing: -0.02em; }
.hub-algo-title em { font-style: italic; color: var(--hub-gold-2); }
.hub-algo-lede { margin: 6px 0 0; font-size: 13px; color: var(--hub-ink-2); max-width: 60ch; }
.hub-counter { border: 2px solid var(--hub-ink); background: #fff; box-shadow: 3px 3px 0 var(--hub-ink); padding: 10px 12px; text-align: center; }
.hub-counter-label { font: 700 10px var(--hub-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--hub-ink-3); }
.hub-counter .hub-lcd { font-size: 30px; margin: 6px 0 4px; padding: 3px 10px; }
.hub-counter small { display: block; font: 10px var(--hub-mono); color: var(--hub-ink-3); }
.hub-counter-delta { display: inline-block; margin-top: 6px; font: 700 10px var(--hub-mono); color: var(--hub-green); background: var(--hub-pill-on); border: 1.5px solid var(--hub-ink); padding: 1px 6px; }
.hub-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .hub-steps { grid-template-columns: 1fr; } }
.hub-step { padding: 14px; min-width: 0; }
.hub-step + .hub-step { border-top: 2px solid var(--hub-ink); }
@media (min-width: 768px) { .hub-step + .hub-step { border-top: 0; border-left: 2px solid var(--hub-ink); } }
.hub-step-title { margin: 0 0 2px; font: 900 14px var(--hub-chrome); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hub-step-title a { font: 700 10px var(--hub-mono); letter-spacing: 0.1em; color: var(--hub-gold-2); }
.hub-step-sub { margin: 0 0 10px; font-size: 12px; color: var(--hub-ink-3); }
.hub-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hub-toggles form { margin: 0; }
.hub-tog { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; font: 700 12px var(--hub-chrome); border: 2px solid var(--hub-ink); background: #fff; box-shadow: 2px 2px 0 var(--hub-ink); color: var(--hub-ink); cursor: pointer; }
.hub-tog:hover { background: var(--hub-hover); }
.hub-tog:active { box-shadow: inset 1px 1px 0 var(--hub-ink); }
.hub-tog:disabled { opacity: 0.6; cursor: wait; }
.hub-tog [data-box] { width: 12px; height: 12px; border: 2px solid var(--hub-ink); background: #fff; display: inline-grid; place-items: center; font: 700 9px var(--hub-mono); }
.hub-tog--on { background: var(--hub-selected); }
.hub-tog--on [data-box] { background: var(--hub-gold); color: #fff; }
.hub-tog--no { background: var(--hub-pill-no); }
.hub-tog-input { display: inline-flex; border: 2px solid var(--hub-ink); background: var(--hub-cream); box-shadow: 2px 2px 0 var(--hub-ink); }
.hub-tog-input input { width: 150px; border: 0; background: transparent; padding: 5px 8px; font: 700 12px var(--hub-mono); color: var(--hub-ink); outline: none; }
.hub-tog-input input::placeholder { color: var(--hub-ink-3); font-weight: 400; }
.hub-tog-input button { border: 0; border-left: 2px solid var(--hub-ink); background: var(--hub-gold); color: #fff; font: 700 12px var(--hub-chrome); padding: 0 10px; cursor: pointer; }
.hub-creator { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hub-rule); }
.hub-creator:last-child { border-bottom: 0; }
.hub-creator-av { width: 36px; height: 36px; border: 2px solid var(--hub-ink); background: var(--hub-parchment); flex: none; overflow: hidden; display: grid; place-items: center; font: 700 12px var(--hub-mono); color: var(--hub-ink-3); }
.hub-creator-av img { width: 100%; height: 100%; object-fit: cover; }
.hub-creator-who { flex: 1; min-width: 0; font-size: 12px; }
.hub-creator-who b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-creator-who small { display: block; font: 10px var(--hub-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--hub-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-creator form { margin: 0; }
.hub-btn--pressed { box-shadow: inset 1px 1px 0 var(--hub-ink); background: var(--hub-selected); }
.hub-avs { display: inline-flex; }
.hub-avs span { width: 28px; height: 28px; border: 2px solid var(--hub-ink); background: var(--hub-parchment); margin-right: -8px; display: block; overflow: hidden; }
.hub-avs img { width: 100%; height: 100%; object-fit: cover; }
.hub-algo-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) { .hub-algo-rows { grid-template-columns: 1fr 1fr; } }
.hub-algo-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 8px 14px; border-top: 2.5px solid var(--hub-ink); background: var(--hub-cream); font: 10px var(--hub-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-ink-3); }
.hub-algo-foot b { color: var(--hub-ink); }
.hub-algo-foot a { color: var(--hub-gold-2); font-weight: 700; }
.hub-tog:focus-visible, .hub-tog-input:focus-within { outline: 3px solid var(--hub-gold); outline-offset: 2px; }

/* ─── Your Algorithm control panel (/settings/feed) ─── */
.hub-panel-sect { padding: 14px 18px; border-bottom: 2px solid var(--hub-ink); }
.hub-panel-sect:last-of-type { border-bottom: 0; }
.hub-panel-title { margin: 0 0 4px; font: 900 15px var(--hub-chrome); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.hub-panel-title small { font: 700 10px var(--hub-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-ink-3); }
.hub-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 640px) { .hub-sources { grid-template-columns: 1fr; } }
.hub-source { display: block; border: 2px solid var(--hub-ink); padding: 8px 10px; background: #fff; box-shadow: 2px 2px 0 var(--hub-ink); font: 700 12px var(--hub-chrome); color: var(--hub-ink); }
.hub-source:hover { background: var(--hub-hover); }
.hub-source b { display: block; font: 700 20px var(--hub-mono); }
.hub-source small { display: block; font: 10px var(--hub-mono); color: var(--hub-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.hub-tog-input--wide { display: flex; width: 100%; max-width: 520px; }
.hub-tog-input--wide input { width: auto; flex: 1; min-width: 0; }
.hub-tog button[data-action] { border: 0; background: transparent; padding: 0 0 0 2px; font: 700 14px/1 var(--hub-mono); color: var(--hub-ink-3); cursor: pointer; }
.hub-tog button[data-action]:hover { color: var(--hub-flag); }
.hub-autocomplete { position: relative; z-index: 20; max-width: 520px; margin-top: 4px; background: #fff; border: 2px solid var(--hub-ink); box-shadow: 3px 3px 0 var(--hub-ink); max-height: 240px; overflow-y: auto; font-size: 13px; }
.hub-source:focus-visible { outline: 3px solid var(--hub-gold); outline-offset: 2px; }
/* Mobile Navigation Styles */

/* Mobile Header */
.mobile-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 40;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.mobile-menu[style*="display: block"] {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile Create Menu */
.mobile-create-menu {
  position: absolute;
  top: 100%;
  right: 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 40;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  width: 192px; /* w-48 */
}

.mobile-create-menu[style*="display: block"] {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 30;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mobile-menu-backdrop[style*="display: block"] {
  opacity: 1;
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  padding-bottom: env(safe-area-inset-bottom); /* iPhone safe area */
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
}

.mobile-nav-item {
  transition: all 0.2s ease;
  border-radius: 8px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .mobile-nav-item:hover {
    background: rgba(179, 155, 99, 0.1);
  }
}

/* Press feedback must be instant: zero transition on the way down, animate on release */
.mobile-nav-item:active {
  background: rgba(179, 155, 99, 0.15);
  transform: scale(0.92);
  transition-duration: 0s;
}

.mobile-nav-item.text-\[#B39B63\] {
  color: #B39B63 !important;
}

.mobile-nav-item svg {
  transition: transform 0.2s ease;
}

.mobile-nav-item.text-\[#B39B63\] svg {
  transform: scale(1.1);
}

/* Back Button Animations */
.mobile-back-btn {
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .mobile-back-btn:hover {
    background: rgba(179, 155, 99, 0.1);
    transform: scale(1.05);
  }
}

.mobile-back-btn:active {
  background: rgba(179, 155, 99, 0.2);
  transform: scale(0.95);
  transition-duration: 0s;
}

/* Menu Button Animations */
.mobile-menu-btn {
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 10;
  position: relative;
}

@media (hover: hover) {
  .mobile-menu-btn:hover {
    background: rgba(179, 155, 99, 0.1);
  }
}

.mobile-menu-btn:active {
  background: rgba(179, 155, 99, 0.2);
  transform: scale(0.95);
  transition-duration: 0s;
}

/* Create Button Animations */
.mobile-create-btn {
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 10;
  position: relative;
}

@media (hover: hover) {
  .mobile-create-btn:hover {
    background: rgba(179, 155, 99, 0.1);
  }
}

.mobile-create-btn:active {
  background: rgba(179, 155, 99, 0.2);
  transform: scale(0.95);
  transition-duration: 0s;
}

/* Touch behavior for header controls and dropdown menu items */
.mobile-header a,
.mobile-header button,
.mobile-menu a,
.mobile-create-menu a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Header icon links (e.g. messages) that aren't one of the named buttons above */
.mobile-icon-btn {
  transition: all 0.2s ease;
}

.mobile-icon-btn:active {
  background: rgba(179, 155, 99, 0.2);
  transform: scale(0.95);
  transition-duration: 0s;
}

/* Dropdown + hamburger menu rows */
.mobile-menu a:active,
.mobile-create-menu a:active {
  background: rgba(179, 155, 99, 0.1);
}

/* Responsive Adjustments */
@media (max-width: 1023px) {
  /* Ensure mobile elements are visible */
  .mobile-header {
    display: block;
  }
  
  .mobile-bottom-nav {
    display: block;
  }
  
  /* Hide desktop header on mobile */
  .desktop-header {
    display: none !important;
  }
  
  /* Add bottom padding for bottom nav */
  body {
    padding-bottom: 80px;
  }
}

@media (min-width: 1024px) {
  /* Hide mobile elements on desktop */
  .mobile-header {
    display: none !important;
  }
  
  .mobile-bottom-nav {
    display: none !important;
  }
  
  /* Show desktop header */
  .desktop-header {
    display: block !important;
  }
  
  /* Remove bottom padding on desktop */
  body {
    padding-bottom: 0;
  }
}

/* Small screen adjustments */
@media (max-width: 480px) {
  .mobile-nav-item .text-xs {
    font-size: 10px;
  }
  
  .mobile-nav-item svg {
    width: 20px;
    height: 20px;
  }
}

/* Landscape mode adjustments */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023px) {
  .mobile-bottom-nav {
    display: none;
  }
  
  body {
    padding-bottom: 0;
  }
}

/* Additional Utility Classes */
.notification-dot {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* PWA-specific adjustments */
@media (display-mode: standalone) {
  .mobile-header {
    /* Account for status bar in PWA mode */
    padding-top: env(safe-area-inset-top);
  }
}

/* Focus states for accessibility */
.mobile-back-btn:focus,
.mobile-menu-btn:focus,
.mobile-nav-item:focus {
  outline: 2px solid #B39B63;
  outline-offset: 2px;
}

/* Loading states */
.mobile-nav-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* User Tagging Dropdown - Mobile/PWA Optimizations */
@media (max-width: 768px) {
  /* Make dropdown more mobile-friendly */
  [data-comment-user-tagging-target="dropdown"],
  [data-user-tagging-target="dropdown"] {
    /* Ensure dropdown is visible above mobile keyboard */
    position: fixed !important;
    z-index: 10000 !important;
    /* Mobile-optimized sizing */
    max-height: 200px !important;
    width: 280px !important;
    /* Better touch targets */
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  }
  
  /* Larger touch targets for mobile */
  [data-comment-user-tagging-target="dropdown"] .flex.items-center,
  [data-user-tagging-target="dropdown"] .flex.items-center {
    padding: 12px 16px !important;
    min-height: 48px !important;
  }
  
  /* Better text sizing for mobile */
  [data-comment-user-tagging-target="dropdown"] .text-sm,
  [data-user-tagging-target="dropdown"] .text-sm {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}

/* PWA-specific dropdown adjustments */
@media (display-mode: standalone) {
  [data-comment-user-tagging-target="dropdown"],
  [data-user-tagging-target="dropdown"] {
    /* Ensure dropdown stays above PWA UI elements */
    z-index: 10001 !important;
    /* Account for PWA status bar */
    margin-top: env(safe-area-inset-top, 0px);
  }
} 
.notification-bell {
  position: relative;
  cursor: pointer;
}

.bell-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #B39B63;
  color: white;
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-dropdown {
  position: fixed;
  width: 360px;
  max-width: calc(100vw - 2rem);
  max-height: 500px;
  overflow-y: auto;
  background-color: white;
  border-radius: 0;
  box-shadow: 4px 4px 0 #1a1a1a;
  z-index: 10000;
  display: none;
  border: 2.5px solid #1a1a1a;
}

.notification-dropdown.active {
  display: block !important;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 2.5px solid #1a1a1a;
  background-color: #B39B63;
}

.notification-header-actions {
  display: flex;
  gap: 6px;
}

.notification-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
}

.notification-list {
  padding: 0;
}

.notification-item {
  padding: 16px;
  border-bottom: 1px solid #e8e0d0;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.notification-item.unread {
  background-color: #FFFBF4;
  border-left: 3px solid #B39B63;
}

@media (hover: hover) {
  .notification-item:hover {
    background-color: #f8f9fa;
  }
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-content {
  flex: 1;
}

.notification-content p {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}

.notification-snippet {
  margin: 8px 0;
  padding: 8px 12px;
  background-color: #FFFBF4;
  border-left: 3px solid #1a1a1a;
  border-radius: 0;
  font-style: italic;
  color: #666;
  font-size: 13px;
  line-height: 1.4;
}

.notification-actions {
  margin-top: 8px;
}

.notification-actions .btn-action {
  display: inline-block;
  padding: 6px 12px;
  background-color: #B39B63;
  color: white;
  text-decoration: none;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  border: 1.5px solid #1a1a1a;
  box-shadow: 1px 1px 0 #1a1a1a;
}

@media (hover: hover) {
  .notification-actions .btn-action:hover {
    background-color: #A38B57;
    text-decoration: none;
    color: white;
  }
}

/* Voice memo specific styles */
.voice-memo-snippet {
  background-color: #f0f8ff !important;
  border-left-color: #B39B63 !important;
}

.voice-memo-snippet i.fas.fa-microphone {
  color: #B39B63;
  font-size: 16px;
}

.btn-listen {
  background-color: #B39B63 !important;
  color: white !important;
}

@media (hover: hover) {
  .btn-listen:hover {
    background-color: #A38B57 !important;
    color: white !important;
  }
}

.btn-listen i {
  margin-right: 4px;
}

/* Message notification specific styles */
.message-snippet {
  background-color: #f0f8ff !important;
  border-left-color: #B39B63 !important;
}

.message-snippet i.fas.fa-envelope {
  color: #B39B63;
  font-size: 14px;
}

.btn-view i {
  margin-right: 4px;
}



.notification-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  width: 100%;
}

.notification-actions .btn-action {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ensure notification content doesn't get squished */
.notification-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.notification-snippet {
  margin: 8px 0;
  padding: 8px 12px;
  background-color: #FFFBF4;
  border-left: 3px solid #1a1a1a;
  border-radius: 0;
  font-style: italic;
  color: #666;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Post notification specific styles */
.post-snippet {
  background-color: #fff3cd !important;
  border-left-color: #B39B63 !important;
}

.notification-time {
  font-size: 12px;
  color: #888;
}

.notification-group h4 {
  margin: 0;
  padding: 8px 16px;
  background-color: #f7f7f7;
  font-size: 14px;
  font-weight: 600;
  color: #555;
}

.mark-read-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  transition: all 0.2s ease;
  min-width: 32px;
  min-height: 32px;
}

@media (hover: hover) {
  .mark-read-btn:hover {
    background-color: rgba(179, 155, 99, 0.1);
    color: #B39B63;
  }
}

.mark-read-btn svg {
  width: 16px;
  height: 16px;
}

.notification-footer {
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid #e0e0e0;
}

.view-all-btn {
  color: #B39B63;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.loading-spinner {
  padding: 20px;
  text-align: center;
  color: #888;
}

.no-notifications {
  padding: 30px;
  text-align: center;
  color: #888;
}

.notification-error {
  padding: 20px;
  text-align: center;
  color: #e74c3c;
}

.error-details {
  font-size: 12px;
  color: #7f8c8d;
  margin-bottom: 15px;
}

.retry-btn {
  padding: 8px 12px;
  background-color: #B39B63;
  color: white;
  border: 1.5px solid #1a1a1a;
  box-shadow: 1px 1px 0 #1a1a1a;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}

@media (hover: hover) {
  .retry-btn:hover {
    background-color: #a38a52;
  }
}

/* Notification header action buttons */
.notif-btn {
  padding: 4px 10px;
  background-color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 2px;
  font-size: 11px;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.04em;
  color: white;
  cursor: pointer;
}

@media (hover: hover) {
  .notif-btn:hover { background-color: rgba(255,255,255,0.32); }
}

.notif-btn--primary {
  background-color: rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.7);
}

.refresh-btn {
  padding: 4px 8px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 8px;
}

@media (hover: hover) {
  .refresh-btn:hover {
    background-color: #e0e0e0;
  }
} 
/* Progressive Loading Styles */

/* Skeleton Loading Animation */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

/* Image Loading States */
.image-container {
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
}

.image-loading {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.image-loaded {
  opacity: 1;
}

.image-error {
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
}

/* Progressive Loading Skeleton for Images */
.image-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f3f4f6;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-out;
}

.image-skeleton.hide {
  opacity: 0;
  pointer-events: none;
}

.image-skeleton-icon {
  color: #d1d5db;
  font-size: 2rem;
  opacity: 0.7;
}

/* Post Content Skeleton */
.post-skeleton {
  padding: 1.5rem;
  background: white;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  margin-right: 0.75rem;
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-text.medium {
  width: 80%;
}

.skeleton-text.long {
  width: 100%;
}

/* Image Gallery Skeleton */
.image-gallery-skeleton {
  background-color: #f5f5f5;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.single-image-skeleton {
  width: 100%;
  height: 400px;
  max-height: 600px;
}

.multi-image-skeleton {
  height: 400px;
}

/* Fade transition for loaded images */
.progressive-image {
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.progressive-image[data-state="loading"] {
  opacity: 0;
}

.progressive-image[data-state="loaded"] {
  opacity: 1;
}

.progressive-image[data-state="error"] {
  opacity: 1;
  background-color: #f8f9fa;
}

/* Blur-to-clear effect (optional enhancement) */
.progressive-blur {
  filter: blur(5px);
  transition: filter 0.3s ease-out;
}

.progressive-blur.loaded {
  filter: blur(0);
}

/* Loading state for different image layouts */
.layout-classic .image-skeleton {
  border-radius: 0.5rem;
}

.layout-banner .image-skeleton {
  border-radius: 0.5rem;
}

.layout-slider .image-skeleton {
  border-radius: 0;
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .image-skeleton-icon {
    font-size: 1.25rem;
  }
  
  .single-image-skeleton {
    height: 300px;
  }
  
  .multi-image-skeleton {
    height: 300px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .skeleton {
    background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
  }
  
  .image-skeleton {
    background: linear-gradient(90deg, 
      rgba(224, 224, 224, 0.9) 25%, 
      rgba(208, 208, 208, 0.9) 50%, 
      rgba(224, 224, 224, 0.9) 75%
    );
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .image-skeleton {
    animation: none;
    background: #f0f0f0;
  }
  
  .progressive-image {
    transition: none;
  }
  
  .progressive-blur {
    transition: none;
  }
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
  .skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  }
  
  .image-skeleton {
    background: #374151;
  }
  
  .image-skeleton-icon {
    color: #6b7280;
  }
  
  .image-container {
    background-color: #2a2a2a;
  }
  
  .image-error {
    background-color: #2a2a2a;
    color: #9ca3af;
  }
} 
/* Pull to Refresh Styles */
.pull-refresh-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #b39b63; /* Match header color */
  color: white;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
  border-bottom: none;
  transition: opacity 0.2s, background 0.2s;
  will-change: opacity, transform;
}

.pull-refresh-indicator.visible {
  opacity: 1;
}

.pull-refresh-indicator .pull-icon {
  font-size: 2.2rem;
  color: white;
  margin-right: 0.5rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.pull-refresh-indicator .pull-text {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
  display: none;
}

.pull-refresh-indicator.ready .pull-text,
.pull-refresh-indicator.refreshing .pull-text {
  display: inline;
}

.pull-refresh-indicator.refreshing {
  background: #a08c5c;
}

.pull-refresh-indicator.refreshing .pull-icon {
  font-size: 2.5rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Main container transition for pull effect */
.main-container {
  transition: transform 0.15s cubic-bezier(.4,1.4,.6,1);
}

@media (prefers-reduced-motion: reduce) {
  .main-container {
    transition: none;
  }
  .pull-refresh-indicator .pull-icon,
  .pull-refresh-indicator.refreshing .pull-icon {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .pull-refresh-indicator {
    font-size: 15px;
    height: 64px;
  }
  .pull-refresh-indicator .pull-icon {
    font-size: 1.7rem;
  }
  .pull-refresh-indicator.refreshing .pull-icon {
    font-size: 2rem;
  }
}

/* PWA-specific adjustments */
@media (display-mode: standalone) {
  .pull-refresh-indicator {
    top: env(safe-area-inset-top);
    height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .pull-refresh-indicator {
    background: #2d3748;
    border-bottom: 2px solid #B39B63;
  }
  
  .pull-refresh-indicator.ready {
    background: #1a202c;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .pull-refresh-indicator {
    transition: none;
  }
  
  .pull-refresh-indicator.refreshing .pull-icon {
    animation: none;
  }
  
  .fa-spin {
    animation: none !important;
  }
  
  .main-container {
    transition: none;
  }
  
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1);
    }
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .pull-refresh-indicator {
    background: linear-gradient(135deg, #2d3748, #1a202c);
    color: #e2e8f0;
  }
  
  .pull-refresh-indicator.ready {
    background: linear-gradient(135deg, #1a202c, #0f1419);
  }
}

/* Full-page overlay for pull-to-refresh */
.pull-refresh-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(40, 32, 16, 0.7); /* dimmed, matches brand */
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.pull-refresh-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.pull-refresh-overlay .overlay-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.pull-refresh-overlay .overlay-spinner .fa-spinner {
  font-size: 2.5rem;
  color: #fff;
  margin-right: 0.5rem;
}
.pull-refresh-overlay .overlay-spinner .svg-spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.5rem;
  display: inline-block;
  vertical-align: middle;
} 
/* Social Sharing Cards - Letterboxd Style */
.social-sharing-card {
  margin: 0;
  padding: 0;
  background: #2a2a2a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-container {
  width: 1200px;
  height: 630px;
  background: #2a2a2a;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
}

/* Back Navigation */
.back-navigation {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 20;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(42, 42, 42, 0.8);
  color: #d4af37;
  text-decoration: none;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #d4af37;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .back-link:hover {
    background: #d4af37;
    color: #2a2a2a;
    transform: translateY(-1px);
  }
}

/* Share Navigation */
.share-navigation {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
}

.share-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(42, 42, 42, 0.8);
  color: #d4af37;
  text-decoration: none;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #d4af37;
  transition: all 0.2s ease;
  cursor: pointer;
  font-family: inherit;
}

@media (hover: hover) {
  .share-link:hover {
    background: #d4af37;
    color: #2a2a2a;
    transform: translateY(-1px);
  }
}

/* User Profile Photo */
.user-avatar-container {
  margin-bottom: -20px; /* Pulls the next element (poster) up by 35px, creating overlap */
  position: relative; /* Needed for z-index to work */
  z-index: 10; /* Ensure it's above the poster */
}

.user-avatar-link {
  display: inline-block;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .user-avatar-link:hover {
    transform: scale(1.05);
  }
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #d4af37;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.default-avatar {
  background: #d4af37;
  color: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
}

/* Content Poster/Cover */
.content-poster-container {
  margin-bottom: 20px;
}

.content-poster {
  width: 300px;
  height: 450px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  display: block;
}

/* Content Title */
.content-title {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  color: white;
  line-height: 1.2;
  max-width: 800px;
}

/* Star Rating */
.star-rating {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
}

.star {
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
  color: #666;
}

.star.filled {
  color: #d4af37;
}

.star.half {
  background: linear-gradient(90deg, #d4af37 50%, #666 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Divider */
.divider {
  width: 200px;
  height: 1px;
  background: #666;
  margin: 10px 0 5px 0;
}

/* Platform Attribution */
.platform-attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
}

.platform-text {
  font-size: 14px;
  color: #999;
  margin-right: 8px;
}

.platform-name {
  font-size: 18px;
  font-weight: 600;
  color: white;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
  .card-container {
    width: 100%;
    max-width: 1200px;
    height: auto;
    min-height: 630px;
  }
  
  .content-poster {
    width: 250px;
    height: 375px;
  }
  
  .content-title {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .card-container {
    padding: 20px;
  }
  
  .content-poster {
    width: 200px;
    height: 300px;
  }
  
  .content-title {
    font-size: 24px;
  }
  
  .user-avatar {
    width: 60px;
    height: 60px;
  }
}
/* Streaming service icons styling */
.streaming-icon {
  @apply inline-flex items-center justify-center w-8 h-8 rounded-full transition-all duration-200 hover:scale-110;
}

.streaming-icon.spotify {
  @apply bg-green-600 text-white hover:bg-green-700;
}

.streaming-icon.apple-music {
  @apply bg-pink-600 text-white hover:bg-pink-700;
}

.streaming-icon.youtube {
  @apply bg-red-600 text-white hover:bg-red-700;
}

/* Track list streaming icons */
.track-streaming-icons {
  @apply flex items-center gap-1 opacity-60 hover:opacity-100 transition-opacity;
}

.track-streaming-icons a {
  @apply p-1 rounded transition-colors;
}

@media (hover: hover) {
  .track-streaming-icons a:hover {
    @apply bg-gray-100;
  }
}
.trix-content {
  @apply prose prose-lg max-w-none;
}

.trix-button-group {
  @apply border border-gray-200 rounded-md overflow-hidden;
}

.trix-button {
  @apply p-2 hover:bg-gray-100 transition-colors duration-200;
}

.trix-button.trix-active {
  @apply bg-[#B39B63] text-white;
}

.trix-button--icon {
  @apply w-8 h-8 flex items-center justify-center;
}

.trix-button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

.trix-button--icon-bold::before {
  @apply font-bold;
}

trix-toolbar .trix-dialog {
  @apply bg-white border border-gray-200 rounded-lg shadow-lg;
}

trix-editor {
  @apply min-h-[400px] p-4 prose max-w-none focus:outline-none focus:ring-2 focus:ring-[#B39B63] focus:border-transparent;
}

trix-editor h1 {
  @apply text-3xl font-bold mb-4;
}

trix-editor a {
  @apply text-[#B39B63] hover:text-[#9A855A];
}

/* Trix freezes the selection with an inline "background-color: highlight" while
   the link dialog is open; that system color is nearly invisible, so override
   it with a visible brand highlight to show which words are being linked. */
trix-editor [style*="background-color: highlight"] {
  background-color: rgba(179, 155, 99, 0.35) !important;
  box-shadow: 0 2px 0 0 #B39B63;
}

.trix-dialog__link-selection {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 6px;
}

.trix-dialog__link-selection strong {
  color: #111827;
  font-weight: 600;
}

.trix-content ul {
  @apply list-disc pl-5;
}

.trix-content ol {
  @apply list-decimal pl-5;
}

.trix-content blockquote {
  @apply border-l-4 border-[#B39B63] pl-4 italic my-4;
}

.trix-content pre {
  @apply bg-gray-100 p-4 rounded-lg font-mono text-sm my-4;
}

/* Deep Dive Trix Editor Styles */
.deep-dive-trix-editor trix-editor {
  @apply min-h-[200px] p-3 prose prose-sm max-w-none focus:outline-none focus:ring-1 focus:ring-[#B39B63] focus:border-transparent;
}

.deep-dive-trix-editor trix-toolbar {
  @apply border border-gray-200 rounded-t-lg bg-white;
}

.deep-dive-trix-editor .trix-content {
  @apply prose prose-sm max-w-none;
}

.deep-dive-trix-editor .trix-content p {
  @apply my-2;
}

.deep-dive-trix-editor .trix-content ul,
.deep-dive-trix-editor .trix-content ol {
  @apply my-2 pl-5;
}

.deep-dive-trix-editor .trix-content blockquote {
  @apply border-l-2 border-[#B39B63] pl-3 italic my-2 text-gray-600;
}

.deep-dive-trix-editor .trix-content img {
  @apply rounded-lg my-2;
}

.deep-dive-trix-editor .trix-content a {
  @apply text-[#B39B63] hover:text-[#9A855A] underline;
} 
/* Watch (dark viewer) badges. Picked up by application.css via require_tree. */
.watch-badge {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.watch-badge--live {
  background-color: #e24b4a;
  color: #fff;
}

.watch-badge--premiere {
  background-color: #B39B63;
  color: #fff;
}

.watch-badge--upcoming {
  background-color: rgba(255, 255, 255, 0.92);
  color: #0f0f0f;
}

.watch-badge--streamed {
  background-color: rgba(255, 255, 255, 0.14);
  color: #e5e5e5;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.watch-live-dot {
  background-color: #e24b4a;
}
/* The watch room: a page-level grid like a video site. Left: the stage, then the page's own
   content. Right: chat at stage height with Up next beneath, or Up next from the top when there is
   no chat. Theater widens the stage to the viewport; full screen takes the grid and shows only the
   stage and chat. */
.watch-room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
  align-items: start;
}

.watch-room__stage {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #000;
  border-radius: 12px;
  overflow: hidden; /* rounds the corners; the stage is the thing that grows, so it clips nothing of its own */
}

/* The chat cell takes the row height the stage sets; the inner box scrolls instead of growing the row. */
.watch-room__chat {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  position: relative;
  min-height: 0;
  border: 1px solid rgba(179, 155, 99, 0.25);
  border-radius: 12px;
  overflow: hidden;
  background: #0f0b08;
}

.watch-room__chat > [data-controller~="event-chat"] {
  position: absolute;
  inset: 0;
}

.watch-room__main {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.watch-room__rail {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

/* No chat: the rail starts beside the stage, the way a video site's sidebar does. */
.watch-room.is-chat-hidden .watch-room__chat { display: none; }
.watch-room.is-chat-hidden .watch-room__rail { grid-row: 1 / span 2; }

.watch-room__player {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  --media-object-fit: contain;
}

/* A film's screen: the shared video player fills a 16:9 box, sized like the live player. */
.watch-room__screen { width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* The room's toolbar owns full screen (it keeps chat). Mux Player's own button would fullscreen the
   video alone, so it is hidden for every player in the room. */
.watch-room mux-player { --fullscreen-button: none; }

.watch-room__controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: #0a0806;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.watch-room__spacer { flex: 1; }

.watch-room__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.watch-room__btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.watch-room__btn:focus-visible { outline: 2px solid #B39B63; outline-offset: 1px; }
.watch-room__btn[aria-pressed="true"] { color: #B39B63; }
.watch-room__btn svg { width: 18px; height: 18px; }
.watch-room__btn[hidden] { display: none; }

/* The Up next rail: rows on the page paper, thumbnail left. */
.watch-rail__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #2C2416;
}

.watch-rail__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.watch-row { display: flex; gap: 10px; border-radius: 10px; padding: 4px; color: #2C2416; }
.watch-row:hover { background: rgba(44, 36, 22, 0.06); }
.watch-row__thumb {
  position: relative;
  flex-shrink: 0;
  width: 168px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #4A3F32, #1f1911);
  display: grid;
  place-items: center;
}
.watch-row__initial { font-size: 22px; font-weight: 600; color: rgba(255, 255, 255, 0.3); }
.watch-row__duration {
  position: absolute;
  right: 4px;
  bottom: 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 1px 4px;
  font-size: 11px;
  font-weight: 500;
}
.watch-row__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.watch-row__sub { margin: 2px 0 0; font-size: 12px; color: #6B5532; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Theater: the stage breaks out to the viewport edges across both columns, capped so the picture
   never pushes the controls off screen. Chat drops beside the page content, the rail beneath it. */
.watch-room.is-theater .watch-room__stage {
  grid-column: 1 / -1;
  border-radius: 0;
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.watch-room.is-theater .watch-room__player,
.watch-room.is-theater .watch-room__screen { max-height: 78vh; }

.watch-room.is-theater .watch-room__chat { grid-row: 2; align-self: start; height: 520px; }
.watch-room.is-theater .watch-room__main { grid-row: 2; }
.watch-room.is-theater .watch-room__rail { grid-row: 3; }
.watch-room.is-theater.is-chat-hidden .watch-room__rail { grid-row: 2 / span 2; }

/* Full screen: the grid fills the screen; only the stage and chat show, side by side. */
.watch-room:fullscreen,
.watch-room.is-fullscreen {
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
  background: #000;
  align-items: stretch;
}

.watch-room:fullscreen.is-chat-hidden,
.watch-room.is-fullscreen.is-chat-hidden { grid-template-columns: minmax(0, 1fr); }

.watch-room:fullscreen .watch-room__main,
.watch-room.is-fullscreen .watch-room__main,
.watch-room:fullscreen .watch-room__rail,
.watch-room.is-fullscreen .watch-room__rail { display: none; }

.watch-room:fullscreen .watch-room__stage,
.watch-room.is-fullscreen .watch-room__stage {
  grid-column: 1;
  grid-row: 1;
  border-radius: 0;
  width: auto;
  max-width: none;
  left: auto;
  right: auto;
  margin: 0;
  min-height: 0;
}

.watch-room:fullscreen .watch-room__chat,
.watch-room.is-fullscreen .watch-room__chat {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  height: auto;
  border-radius: 0;
  border-width: 0 0 0 1px;
}

.watch-room:fullscreen .watch-room__player,
.watch-room.is-fullscreen .watch-room__player,
.watch-room:fullscreen .watch-room__screen,
.watch-room.is-fullscreen .watch-room__screen {
  flex: 1;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  height: auto;
}

/* Phones: one column. Stage, then chat at a fixed height, then the page, then the rail as a row of cards. */
@media (max-width: 900px) {
  .watch-room,
  .watch-room:fullscreen,
  .watch-room.is-fullscreen { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }

  .watch-room .watch-room__stage,
  .watch-room.is-theater .watch-room__stage { grid-column: 1; grid-row: 1; width: auto; left: auto; right: auto; margin: 0; border-radius: 12px; }
  .watch-room .watch-room__chat,
  .watch-room.is-theater .watch-room__chat { grid-column: 1; grid-row: 2; height: 360px; align-self: start; }
  .watch-room .watch-room__main,
  .watch-room.is-theater .watch-room__main { grid-column: 1; grid-row: 3; }
  .watch-room .watch-room__rail,
  .watch-room.is-theater .watch-room__rail,
  .watch-room.is-chat-hidden .watch-room__rail { grid-column: 1; grid-row: 4; }

  .watch-rail__list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .watch-row { flex-direction: column; width: 200px; flex-shrink: 0; }
  .watch-row__thumb { width: 100%; }

  .watch-room:fullscreen,
  .watch-room.is-fullscreen { grid-template-rows: auto minmax(0, 1fr); }
  .watch-room:fullscreen .watch-room__stage,
  .watch-room.is-fullscreen .watch-room__stage { border-radius: 0; }
  .watch-room:fullscreen .watch-room__player,
  .watch-room.is-fullscreen .watch-room__player,
  .watch-room:fullscreen .watch-room__screen,
  .watch-room.is-fullscreen .watch-room__screen { flex: none; aspect-ratio: 16 / 9; }
  .watch-room:fullscreen .watch-room__chat,
  .watch-room.is-fullscreen .watch-room__chat { grid-row: 2; height: auto; border-width: 1px 0 0; }
}
/*
 * 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.
 *


 */

/* Global Navigation Styles */
.global-nav {
  background-color: #1f1f1f;
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 0.4rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #2e2e2e;
}

.nav-toggle {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.7);
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-toggle svg {
  transition: transform 0.3s ease;
}

.nav-links {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0;
  gap: 0.5rem;
}

.nav-links.active {
  display: flex;
}

/* Vintage editorial type treatment on nav links */
.global-nav a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  padding: 0.55rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

@media (hover: hover) {
  .global-nav a:hover {
    color: #C8AD78;
    border-bottom-color: #C8AD78;
  }
}

.global-nav a.is-active {
  color: #B39B63;
  border-bottom-color: #B39B63;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .nav-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    padding: 0.5rem;
  }

  .global-nav {
    padding: 0.3rem 1rem;
  }

  .global-nav a {
    padding: 0.45rem 0.1rem;
  }
}

/* Trix Editor Styles */
.trix-content {
  @apply prose prose-sm max-w-none;
}

/* Image Grid Styles */
.trix-image-grid {
  @apply grid grid-cols-2 gap-2 mb-4;
}

.trix-image-grid figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
}

.trix-image-grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

.trix-image-grid .image-count-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  cursor: pointer;
}

.trix-image-grid .image-count-overlay span {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Hide other attachments in the content */
.trix-content .attachment-hidden {
  display: none;
}

/* Existing Trix styles */
.trix-content .attachment {
  display: inline-block;
}

.trix-content .attachment__caption,
.trix-content .attachment__name,
.trix-content .attachment__size,
.trix-content .attachment__metadata,
.trix-content .attachment__toolbar {
  display: none;
}

.trix-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

@media (hover: hover) {
  .trix-content img:hover {
    opacity: 0.9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
}

.trix-content .attachment__preview {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Trix Editor Gallery Styles */
.trix-content .attachment--preview {
  margin-bottom: 1rem;
}

/* Trix attachment styles */
.trix-content figure.attachment--preview {
  margin-bottom: 1rem;
  display: inline-block;
}

.trix-content figure.attachment--preview img {
  max-width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  cursor: pointer;
}

@media (hover: hover) {
  .trix-content figure.attachment--preview img:hover {
    opacity: 0.9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
}

.trix-content figure.attachment--preview figcaption {
  display: none;
}

/* Gallery Modal Styles */
.trix-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.9);
}

.trix-gallery-modal img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
}

.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.9);
}

.gallery-modal img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
}

.gallery-modal .gallery-nav {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

.gallery-modal .gallery-nav button {
  padding: 0.5rem;
  color: white;
  transition: color 0.2s;
}

@media (hover: hover) {
  .gallery-modal .gallery-nav button:hover {
    color: theme('colors.lavish.gold');
  }
}

/* Notification styles */
.notification-bell {
  position: relative;
  display: flex;
  align-items: center;
}

.bell-icon {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  background-color: #ff4757;
  color: white;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #B39B63;
  display: none;
}

.notification-badge.active {
  display: flex;
}

.messages-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.messages-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #B39B63;
  color: white;
  font-size: 9px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  font-weight: 600;
}

.notification-dropdown {
  position: fixed;
  background-color: white;
  width: 360px;
  max-width: calc(100vw - 2rem);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: none;
  z-index: 10000;
}

.notification-dropdown.active {
  display: block !important;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #f8f9fa;
}

.notification-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

.notification-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.mark-read-btn {
  font-size: 0.75rem;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

@media (hover: hover) {
  .mark-read-btn:hover {
    color: var(--accent-color);
  }
}

.notification-list {
  max-height: 350px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

.notification-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex !important;
  align-items: center;
  background-color: rgba(179, 155, 99, 0.05);
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-content {
  flex: 1;
}

.notification-text {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.notification-time {
  font-size: 0.75rem;
  color: #666;
}

.notification-mark-read {
  margin-left: 0.5rem;
  color: #ccc;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) {
  .notification-mark-read:hover {
    color: var(--accent-color);
    background-color: rgba(179, 155, 99, 0.1);
  }
}

.notification-footer {
  padding: 0.75rem 1rem;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #f8f9fa;
}

.view-all-btn {
  display: block;
  width: 100%;
  padding: 0.5rem;
  background-color: var(--accent-color);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.2s;
}

@media (hover: hover) {
  .view-all-btn:hover {
    background-color: #9a8652;
  }
}

.empty-notifications {
  padding: 2rem 1rem;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

.loading-spinner {
  padding: 2rem 1rem;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

.error-message {
  padding: 1rem;
  text-align: center;
  color: #ff4757;
  font-size: 0.9rem;
}

/* Portal styling */
.dropdown-portal {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.dropdown-portal .notification-dropdown {
  pointer-events: auto;
}

/* Header layout adjustments */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-link, .header-button {
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.header-button {
  padding: 0;
}

/* Mobile notification styles */
.notification-bell-mobile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.notification-badge-mobile {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  background-color: #ff4757;
  color: white;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #333;
  display: none;
}

.notification-badge-mobile.active {
  display: flex;
}

.nav-link, .nav-button {
  display: block;
  color: white;
  text-decoration: none;
  width: 100%;
  text-align: center;
  padding: 0.5rem;
  background: none;
  border: none;
  font-size: 0.9rem;
}

/* Add these responsive classes */
.desktop-only {
  display: none;
}

.mobile-only {
  display: flex;
}

@media (min-width: 768px) {
  .desktop-only {
    display: flex;
  }
  
  .mobile-only {
    display: none !important;
  }
}

/* ─── Masthead ─── */
.main-header {
  background: linear-gradient(135deg, #B39B63, #A08C5C);
  color: #fff;
  padding: 0.7rem 1rem;
  font-family: 'Courier New', Courier, monospace;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 200;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.header-title-link {
  text-decoration: none;
  color: inherit;
}

.header-tagline {
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.85;
  margin-top: 0.15rem;
  letter-spacing: 0.02em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: nowrap;
}

/* Utility links (sign in / sign up / help / about) */
.header-link {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 0.78rem;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.04em;
  padding: 0.2rem 0;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.header-link:hover {
  opacity: 0.75;
}

.header-link--cta {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.45);
  padding: 0.25rem 0.65rem;
  border-radius: 3px;
}

.header-link--cta:hover {
  background: rgba(255,255,255,0.28);
  opacity: 1;
}

/* Icon links (bell, messages) */
.header-icon-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: white;
  text-decoration: none;
}

/* ─── Account dropdown ─── */
.header-account {
  position: relative;
}

.header-account summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: rgba(255,255,255,0.9);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.2rem 0;
  user-select: none;
}

.header-account summary::-webkit-details-marker,
.header-account summary::marker {
  display: none;
  content: '';
}

.header-account-chevron {
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.header-account[open] .header-account-chevron {
  transform: rotate(180deg);
}

.header-account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 2px solid #1a1a1a;
  box-shadow: 3px 3px 0 #1a1a1a;
  min-width: 140px;
  z-index: 9999;
  font-family: 'Courier New', Courier, monospace;
}

.header-account-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.1s;
}

.header-account-item:hover {
  background: #f5f0e8;
  color: #1a1a1a;
}

.header-account-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 0.2rem 0;
}

.header-account-signout {
  color: #7a3d3d;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* button_to wraps in a <form> — strip its default margin */
.header-account-menu form {
  margin: 0;
}

/* Responsive */
@media (min-width: 768px) {
  .header-title {
    font-size: 2rem;
  }

  .header-tagline {
    font-size: 0.9rem;
  }

  .mobile-only {
    display: none !important;
  }
}

/* Search input */
.header-search-form {
  display: flex;
  align-items: center;
}

.header-search-input {
  background-color: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 3px;
  padding: 0.3rem 0.65rem;
  color: white;
  font-size: 0.78rem;
  font-family: 'Courier New', Courier, monospace;
  width: 170px;
  outline: none;
  transition: background 0.2s, border-color 0.2s;
}

.header-search-input::placeholder {
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.03em;
}

.header-search-input:focus {
  background-color: rgba(255,255,255,0.26);
  border-color: rgba(255,255,255,0.7);
}

@media (max-width: 1024px) {
  .header-search-input { width: 130px; }
}

@media (max-width: 768px) {
  .header-search-form { display: none; }
}

/* Notification styles */
.notification-bell, .notification-bell-mobile {
  position: relative;
  display: flex;
  align-items: center;
}

.bell-icon {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.notification-badge, .notification-badge-mobile {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  background-color: #ff4757;
  color: white;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #B39B63;
  display: none;
}

.notification-badge.active, .notification-badge-mobile.active {
  display: flex;
}

/* Ensure notification items are visible */
.notification-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex !important;
  align-items: center;
  background-color: rgba(179, 155, 99, 0.05);
}

.notification-content {
  flex: 1;
}

.notification-text {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.notification-time {
  font-size: 0.75rem;
  color: #666;
}

/* Make sure empty-notifications is styled correctly */
.empty-notifications {
  padding: 2rem 1rem;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

/* Ensure notification list scrolls properly */
.notification-list {
  max-height: 350px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

/* Notification styling */
.notification-section-title {
  font-size: 1.1rem;
  margin: 1rem 0 0.5rem;
  padding: 0 1rem;
  color: #444;
}

.notification-item {
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start;
  position: relative;
}

.notification-item.unread {
  background-color: rgba(179, 155, 99, 0.1);
}

.notification-item.read {
  background-color: rgba(255, 255, 255, 0.5);
}

.notification-content {
  flex: 1;
}

.notification-text {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.notification-time {
  font-size: 0.75rem;
  color: #777;
  margin-bottom: 0.5rem;
}

.notification-cta {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.notification-link, .cta-link {
  color: #B39B63;
  text-decoration: none;
  padding-right: 1rem;
  position: relative;
}

@media (hover: hover) {
  .notification-link:hover, .cta-link:hover {
    text-decoration: underline;
  }
}

.notification-link:not(:last-child)::after, .cta-link:not(:last-child)::after {
  content: '•';
  position: absolute;
  right: 0.4rem;
  color: #ccc;
}

.notification-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.btn-action {
  padding: 0.25rem 0.75rem;
  border-radius: 0;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border: 1.5px solid #1a1a1a;
  box-shadow: 1px 1px 0 #1a1a1a;
}

.btn-accept {
  background-color: #B39B63;
  color: white;
}

.btn-decline {
  background-color: white;
  color: #444;
}

.btn-view {
  background-color: transparent;
  color: #B39B63;
  border: 1.5px solid #B39B63;
  box-shadow: 1px 1px 0 #B39B63;
}

.btn-secondary {
  background-color: white;
  color: #444;
  padding: 0.5rem 1rem;
  border: 1.5px solid #1a1a1a;
  box-shadow: 1px 1px 0 #1a1a1a;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
  margin-bottom: 1rem;
}

@media (hover: hover) {
  .btn-secondary:hover {
    background-color: #e1e1e1;
  }
}

.notification-status {
  font-size: 0.85rem;
  color: #777;
  font-style: italic;
  margin-top: 0.5rem;
}

.notification-mark-read {
  background: white;
  border: 1.5px solid #e8e0d0;
  padding: 0.4rem;
  cursor: pointer;
  color: #ccc;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
}

@media (hover: hover) {
  .notification-mark-read:hover {
    border-color: #B39B63;
    color: #B39B63;
  }
}

/* Style for the dropdown */
.notification-dropdown .notification-cta {
  margin-top: 0.5rem;
}

.notification-dropdown .cta-link {
  display: inline-block;
  padding: 0.25rem 0;
  font-size: 0.85rem;
}

.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: #777;
}

/* Notification dropdown styles */
#notification-dropdown {
  display: none;
  position: fixed;
  top: 100px;
  right: 20px;
  width: 360px;
  background-color: white;
  border: 2px solid #B39B63;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100000;
}

#notification-dropdown.active {
  display: block !important;
}

/* Debug outline to make sure it's visible */
#notification-dropdown.active::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 5px solid red;
  z-index: -1;
  border-radius: 13px;
}

.lavish-highlight {
  background: #fdf6ed !important;
  border: 2px solid #B39B63 !important;
  box-shadow: 0 4px 16px 0 rgba(179,155,99,0.15), 0 0 0 4px #B39B6333 !important;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.2s, border-color 0.2s;
}

/* Tom Select Custom Styles */
.ts-wrapper.single .ts-control {
  background-color: white;
  border-color: #D1D5DB;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ts-wrapper.focus .ts-control {
  border-color: #B39B63;
  box-shadow: 0 0 0 3px rgba(179, 155, 99, 0.5);
}

.ts-dropdown {
  margin-top: 0.25rem;
  background-color: white;
  border: 1px solid #D1D5DB;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.ts-dropdown .option {
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  color: #374151;
}

@media (hover: hover) {
  .ts-dropdown .option:hover {
    background-color: rgba(179, 155, 99, 0.1);
  }
}

.ts-dropdown .active {
  background-color: rgba(179, 155, 99, 0.1);
  color: #111827;
}

.ts-wrapper.multi .ts-control > div {
  background-color: rgba(179, 155, 99, 0.1);
  border: 1px solid rgba(179, 155, 99, 0.2);
  color: #374151;
  border-radius: 0.25rem;
  padding: 1px 5px;
}

.ts-wrapper.multi .ts-control > div.active {
  background-color: #B39B63;
  border-color: #B39B63;
  color: white;
}

.ts-wrapper.multi.focus .ts-control > div {
  border-color: #B39B63;
}

.ts-wrapper .ts-control > input {
  font-size: 0.875rem;
}

.ts-wrapper.multi .ts-control > div .remove {
  border: none;
  color: #6B7280;
  padding-left: 5px;
}

@media (hover: hover) {
  .ts-wrapper.multi .ts-control > div .remove:hover {
    color: #374151;
  }
}

/* Deep Dive Item Trix Editor Mobile Styles */
@media (max-width: 640px) {
  /* Scope all styles to deep dive items only */
  .deep-dive-item .trix-toolbar .trix-button-row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
  }

  /* Only show essential buttons on mobile for deep dive items */
  .deep-dive-item .trix-toolbar .trix-button-group {
    display: none;
  }

  /* Show only bold and italic buttons for deep dive items */
  .deep-dive-item .trix-toolbar .trix-button-group[data-trix-button-group="text-tools"] {
    display: flex;
  }

  /* Hide all buttons except bold and italic for deep dive items */
  .deep-dive-item .trix-toolbar .trix-button-group[data-trix-button-group="text-tools"] .trix-button:not([data-trix-attribute="bold"]):not([data-trix-attribute="italic"]) {
    display: none;
  }

  /* Make the editor take full width on mobile for deep dive items */
  .deep-dive-item .trix-editor {
    width: 100%;
    min-height: 100px;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
  }

  /* Adjust toolbar spacing for deep dive items */
  .deep-dive-item .trix-toolbar {
    padding: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
  }

  /* Make buttons more touch-friendly for deep dive items */
  .deep-dive-item .trix-toolbar .trix-button {
    padding: 0.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
  }

  /* Style the editor content for deep dive items */
  .deep-dive-item .trix-content {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .deep-dive-item .trix-content p {
    margin-bottom: 0.75rem;
  }

  .deep-dive-item .trix-content ul,
  .deep-dive-item .trix-content ol {
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
  }

  .deep-dive-item .trix-content li {
    margin-bottom: 0.25rem;
  }

  /* Make the editor container more compact on mobile */
  .deep-dive-item .deep-dive-trix-editor {
    margin-bottom: 0.5rem;
  }
}

/* Mobile Deep Dive Video & Embed Styles */
@media (max-width: 768px) {
  /* Ensure embedded videos are responsive on mobile */
  .dive-item-row iframe {
    width: 100% !important;
    max-width: none !important;
    border-radius: 0.5rem;
  }
  
  /* YouTube embeds specifically */
  .dive-item-row iframe[src*="youtube.com"],
  .dive-item-row iframe[src*="youtu.be"] {
    aspect-ratio: 16/9;
    height: auto !important;
    min-height: 200px;
  }
  
  /* Vimeo embeds */
  .dive-item-row iframe[src*="vimeo.com"] {
    aspect-ratio: 16/9;
    height: auto !important;
    min-height: 200px;
  }
  
  /* Spotify embeds */
  .dive-item-row iframe[src*="spotify.com"] {
    height: 152px !important;
    border-radius: 0.75rem;
  }
  
  /* General iframe styling for mobile */
  .dive-item-row .spotify-embed iframe,
  .dive-item-row iframe {
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
}

/* Desktop Deep Dive Video & Embed Styles - Make YouTube embeds responsive on desktop too */
.dive-item-row iframe[src*="youtube.com"],
.dive-item-row iframe[src*="youtu.be"] {
  width: 100% !important;
  max-width: 700px !important;
  aspect-ratio: 16/9;
  height: auto !important;
  min-height: 200px;
  border-radius: 0.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Vimeo embeds on desktop */
.dive-item-row iframe[src*="vimeo.com"] {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 16/9;
  height: auto !important;
  min-height: 200px;
  border-radius: 0.5rem;
}

/* Mobile Deep Dive - Remove horizontal padding */
@media (max-width: 768px) {
  .deep-dive-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .deep-dive-content .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* User Mention Link Styles */
.prose a[href*="/users/"] {
  color: #B39B63 !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .prose a[href*="/users/"]:hover {
    color: #A08C5C !important;
    text-decoration: underline;
  }
}

/* Image orientation fix for CDN-processed images */
.image-orientation-fix {
  image-orientation: from-image;
  -webkit-image-orientation: from-image;
  -moz-image-orientation: from-image;
  -ms-image-orientation: from-image;
}

/* Fallback for browsers that don't support image-orientation */
.image-orientation-fix {
  transform: rotate(0deg);
}

/* Additional fix for specific orientation issues */
.image-orientation-fix[style*="transform: rotate(90deg)"] {
  transform: rotate(90deg);
}

.image-orientation-fix[style*="transform: rotate(180deg)"] {
  transform: rotate(180deg);
}

.image-orientation-fix[style*="transform: rotate(270deg)"] {
  transform: rotate(270deg);
}

.image-orientation-fix[style*="transform: rotate(270deg)"] {
  width: 100vh;
  height: 100vw;
}

/* Mobile Header Auto-Hide Animation */
.mobile-header {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

.mobile-header.header-hidden {
  transform: translateY(-100%);
}

/* Prevent transitions during page load */
.mobile-header.no-transition {
  transition: none !important;
}

/* Ensure smooth transitions only on mobile */
@media (max-width: 1023px) {
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
}

/* Desktop: always show header, no transitions */
@media (min-width: 1024px) {
  .mobile-header {
    transform: translateY(0) !important;
    transition: none;
  }
}

/* Mobile full-bleed utility for single-column feeds */
@media (max-width: 639px) {
  /* Small mobile screens */
  .lm-mobile-bleed {
    width: 100%;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50%;
    margin-right: -50%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }
  .lm-mobile-bleed-inner {
    max-width: 100%;  /* Full width on mobile */
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  /* Tablet screens */
  .lm-mobile-bleed {
    width: 100%;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50%;
    margin-right: -50%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }
  .lm-mobile-bleed-inner {
    max-width: 42rem;  /* 672px for tablet */
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
  }
}
@media (min-width: 1024px) {
  .lm-mobile-bleed {
    width: auto;
    position: static;
    margin-left: 0;
    margin-right: 0;
  }
  .lm-mobile-bleed-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Full-bleed grid shell shared by the feed, now and read pages.
   Declared after the .lm-mobile-bleed resets above and with compound
   selectors, so it wins at every width regardless of load order. */
.full-bleed,
.full-bleed.lm-mobile-bleed {
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: visible;
}
.feed-inner,
.feed-inner.lm-mobile-bleed-inner {
  max-width: 2400px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 640px) {
  .feed-inner,
  .feed-inner.lm-mobile-bleed-inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
/* Read: the writers tile belongs to the grid, not the single-thread column */
#read-single-column [data-read-writers] { display: none; }
/* 100vw includes the scrollbar, so a full-bleed shell overshoots the viewport by a few pixels.
   Clip at the viewport (body's overflow propagates to it) so no page scrolls sideways. clip, not
   hidden: it creates no scroll container, so position: sticky keeps working. */
body { overflow-x: clip; }

/* AOL Chat Room Style for LavishMade */
.aol-chat-box {
  background: #f4f8fd;
  border: 2px solid #B39B63;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(179, 155, 99, 0.08);
  padding: 0.5rem 0.5rem 0 0.5rem;
  margin-bottom: 1.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Message Container Scrollbar Styling */
[data-controller="messages"] [data-messages-target="container"],
[data-controller="room-chat"] [data-room-chat-target="messages"] {
  /* Make scrollbars always visible and more prominent on desktop */
  scrollbar-width: thin;
  scrollbar-color: rgba(179, 155, 99, 0.6) rgba(179, 155, 99, 0.1);
}

/* Webkit scrollbar styling for better visibility */
[data-controller="messages"] [data-messages-target="container"]::-webkit-scrollbar,
[data-controller="room-chat"] [data-room-chat-target="messages"]::-webkit-scrollbar {
  width: 8px;
}

[data-controller="messages"] [data-messages-target="container"]::-webkit-scrollbar-track,
[data-controller="room-chat"] [data-room-chat-target="messages"]::-webkit-scrollbar-track {
  background: rgba(179, 155, 99, 0.1);
  border-radius: 4px;
}

[data-controller="messages"] [data-messages-target="container"]::-webkit-scrollbar-thumb,
[data-controller="room-chat"] [data-room-chat-target="messages"]::-webkit-scrollbar-thumb {
  background: rgba(179, 155, 99, 0.6);
  border-radius: 4px;
}

@media (hover: hover) {
  [data-controller="messages"] [data-messages-target="container"]::-webkit-scrollbar-thumb:hover,
  [data-controller="room-chat"] [data-room-chat-target="messages"]::-webkit-scrollbar-thumb:hover {
    background: rgba(179, 155, 99, 0.8);
  }
}

/* Only apply visible scrollbars on desktop */
@media (min-width: 1024px) {
  [data-controller="messages"] [data-messages-target="container"],
  [data-controller="room-chat"] [data-room-chat-target="messages"] {
    scrollbar-width: auto;
  }
  
  [data-controller="messages"] [data-messages-target="container"]::-webkit-scrollbar,
  [data-controller="room-chat"] [data-room-chat-target="messages"]::-webkit-scrollbar {
    width: 12px;
  }
}

.aol-chat-header {
  font-weight: bold;
  color: #3B82F6;
  background: #e6eaf3;
  border-bottom: 1px solid #B39B63;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-align: left;
  margin-bottom: 0.5rem;
}
.aol-message {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.1rem;
  background: transparent;
}
.aol-username {
  font-weight: bold;
  letter-spacing: 0.01em;
}
.aol-timestamp {
  font-family: monospace;
  color: #b0b0b0;
  font-size: 0.85em;
}
.aol-message-content {
  font-family: inherit;
  color: #222;
}
.aol-system-message {
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.98rem;
  color: #2563eb;
  background: #e6eaf3;
  border-left: 4px solid #3B82F6;
  padding: 0.15rem 0.75rem;
  margin: 0.25rem 0;
  border-radius: 4px;
}
.aol-chat-input-bar {
  display: flex;
  align-items: center;
  background: #fffbe6;
  border-top: 1px solid #B39B63;
  padding: 0.5rem 0.75rem;
  border-radius: 0 0 10px 10px;
}
.aol-chat-input-bar textarea {
  flex: 1;
  border: 1px solid #B39B63;
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  font-size: 1rem;
  font-family: Verdana, Arial, sans-serif;
  background: #f9f7f3;
  resize: none;
  margin-right: 0.5rem;
}
.aol-chat-input-bar button {
  background: #B39B63;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 1.2rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
@media (hover: hover) {
  .aol-chat-input-bar button:hover {
    background: #9A8A5A;
  }
}

/* Moment Overlay System Styles */
.overlay-box { 
  position: absolute; 
  transform-origin: center center; 
}

.overlay-tappable { 
  pointer-events: auto; 
}

.overlay-pill { 
  border-radius: 12px; 
  padding: 6px 10px; 
  background: rgba(0,0,0,.5); 
  color: #fff; 
  text-decoration: none; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

/* Editor Styles */
.edit-box { 
  position: absolute; 
  border: 1px dashed rgba(255,255,255,.6); 
}

.handle { 
  position: absolute; 
  width: 14px; 
  height: 14px; 
  border-radius: 7px; 
  background: #fff; 
  border: 1px solid #000; 
}

.handle.br { 
  right: -7px; 
  bottom: -7px; 
  cursor: se-resize; 
}

.handle.rot { 
  top: -24px; 
  left: 50%; 
  transform: translateX(-50%); 
  cursor: grab; 
}

/* Deep Dive Preview Mode Styles */
.preview-hidden {
  display: none !important;
}

/* Remove extra padding in preview mode */
.dive-item-row.preview-mode > div:first-child {
  padding-left: 0 !important;
}

/* Preview mode button styles */
.preview-toggle-button {
  transition: all 0.3s ease;
}

@media (hover: hover) {
  .preview-toggle-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(179, 155, 99, 0.2), 0 2px 4px -1px rgba(179, 155, 99, 0.1);
  }
}

.preview-toggle-button.active {
  background: linear-gradient(135deg, #B39B63, #A08C5C);
  color: white;
  border-color: #B39B63;
}

/* Smooth transitions for mode switching */
body.deep-dive-preview-mode .drag-handle,
body.deep-dive-preview-mode [data-deep-dive-items-target="stickyAddButton"],
body.deep-dive-preview-mode .dive-item-controls,
body.deep-dive-preview-mode .add-item-button,
body.deep-dive-preview-mode .remove-item {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Message content formatting - preserve line breaks without unwanted indentation */
.message-content p {
  margin: 0 !important;
  padding: 0 !important;
  display: inline;
}

.message-content > p:first-child {
  display: inline;
}

.message-content br {
  display: block;
  content: "";
  margin: 0;
}

/* Keep embeds as block elements */
.message-content div[class*="aspect-video"],
.message-content div[class*="relative"] {
  display: block !important;
  margin: 0.5rem 0 !important;
}

/* Markdown styling in messages */
.message-content strong,
.message-content b {
  font-weight: 700;
}

.message-content em,
.message-content i {
  font-style: italic;
}

.message-content code {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
}

/* Code styling needs to adapt based on message bubble color */
.bg-\[\#B39B63\] .message-content code {
  background-color: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.95);
}

.message-content del {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Faster taps: interactive elements opt out of the browser's double-tap-to-zoom
   delay. touch-action: manipulation still allows scroll and pinch. */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"] {
  touch-action: manipulation;
}