:root {
  --link-color: oklch(33.68% 0.1567 257.82);
  --link-hover-color: oklch(33.68% 0.1567 351.52);
  --layout-break-width: 768px;

  --border-radius-std: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: 15%;
    --color-bg-inc: 2.5%;
    --color-fg: 85%;
    --color-fg-inc: -1%;

    --invert: 100%;

    --color-timeline-bg: #282828;
    --color-bg-default: #1c1c1c;
    --color-post-highlight-bg: #333333;
    --color-tab-inactive-bg: #333333;

    /* --color-timeline-item-border: #91919c; */
    --color-post-bg: #404040;

    --color-blockquote-bg: rgba(255, 255, 255, 0.08);

    --color-border: rgba(255, 255, 255, 0.2);
    --color-text-input: var(--color-text-default);
    --quote-background-color: rgba(0, 0, 0, 0.3);

    /* Bright shadows for dark mode */
    --shadow-color: rgba(255, 255, 255, 0.1);
    --shadow-color-strong: rgba(255, 255, 255, 0.15);

    /* Less saturated links for dark mode */
    --color-link: oklch(68% 0.12 30);
    --color-link-hover: oklch(82% 0.16 30);

    /* Subtle button colors for dark mode */
    --color-button-bg: oklch(25% 0 0);
    --color-button-bg-hover: oklch(30% 0 0);
    --color-button-border: oklch(50% 0 0);
    --color-button-border-hover: oklch(60% 0 0);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: 97%;
    --color-bg-inc: -1%;
    --color-fg: 10%;
    --color-fg-inc: 1%;

    --invert: 0%;

    --color-timeline-bg: oklch(calc(97% + 5 * -1%) 0 0);
    --color-bg-default: oklch(97% 0 0);
    --color-post-highlight-bg: oklch(calc(97% + 8 * -1%) 0 0);
    --color-tab-inactive-bg: oklch(calc(97% + 10 * -1%) 0 0);

    /* --color-timeline-item-border: rgb(217, 217, 232); */
    --color-post-bg: #f7f7f7;
    --color-blockquote-bg: #f9fafb;


    --color-border: rgb(217, 217, 232);
    --color-text-input: var(--color-text-default);
    --quote-background-color: #f9fafb;

    /* Dark shadows for light mode */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-strong: rgba(0, 0, 0, 0.15);

    /* Link colors for light mode */
    --color-link: oklch(40% 0.20 30);
    --color-link-hover: oklch(30% 0.50 30);

    /* Button colors for light mode */
    --color-button-bg: oklch(93% 0 0);
    --color-button-bg-hover: oklch(90% 0 0);
    --color-button-border: oklch(67% 0 0);
    --color-button-border-hover: oklch(72% 0 0);
  }
}

:root {
  --color-text-default: oklch(calc(var(--color-fg) + 2 * var(--color-fg-inc)) 0 0);
  --color-pre-bg: oklch(calc(var(--color-bg) + 10 * var(--color-bg-inc)) 0 0);
  --color-text-input-bg: oklch(calc(var(--color-bg) + 3 * var(--color-bg-inc)) 0 0);
  --color-timeline-item-border: oklch(calc(var(--color-bg) + 10 * var(--color-bg-inc)) 0 0);
}

/* RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* GLOBAL STYLE */

html {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: sans-serif;
  color: var(--color-text-default);
  background-color: var(--color-bg-default);
  line-height: 1.6;
  font-size: 16px;

  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  font-weight: 600;
}

h1 {
  font-size: 2.0rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.35rem;
}

h5 {
  font-size: 1.10rem;
}

h6 {
  font-size: 1rem;
}

blockquote {
  border-left: 4px solid #e5e7eb;
  margin: 1.0rem 0;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background-color: var(--color-blockquote-bg);
  color: #4b5563;
}

pre,
code {
  background-color: var(--color-pre-bg);
  border-radius: var(--border-radius-std);
  padding: 4px 6px;
  font-size: 1rem;
  font-family: monospace;
}

pre {
  overflow-x: auto;
  white-space: pre;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
  color: var(--color-text-default);
  background: none;
  background-color: var(--color-button-bg);
  border: solid 1px;
  border-radius: var(--border-radius-std);
  border-color: var(--color-button-border);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

button:hover {
  background-color: var(--color-button-bg-hover);
  border-color: var(--color-button-border-hover);
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

textarea,
input[type="text"],
input[type="email"],
input[type="username"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"] {
  background-color: var(--color-text-input-bg);
  color: var(--color-text-input);


  font: inherit;
  cursor: pointer;
  color: var(--color-text-default);
  background: none;
  border: solid 1px;
  border-radius: var(--border-radius-std);
  border-color: var(--color-button-border);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  height: 1.75rem;
  padding: 0 .5rem;
}

/* Fix autofill/autocomplete styling for dark mode */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--color-text-input-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-default) !important;
  color: var(--color-text-default) !important;
}

/* Firefox autofill styling */
input:-moz-autofill,
textarea:-moz-autofill {
  background-color: var(--color-text-input-bg) !important;
  color: var(--color-text-default) !important;
}

a {
  color: var(--color-link);
  text-decoration: none;
  position: relative;
  transition: color 0.2s;
}

a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transform: scaleX(0);
  transition: transform 0.2s;
}

a:hover {
  color: var(--color-link-hover);
  /* Darker blue */
}

a:hover::after {
  transform: scaleX(1);
}


/* Active/clicked state */
a:active {
  color: red;
  /* Very dark blue */
}

img {
  max-width: 100%;
}

img.u-userImage[loading="lazy"] {
  display: block;
  /* Start invisible */
  opacity: 0;
  /* Very fast fade to minimize perceived flicker */
  transition: opacity 0.1s ease-in;
}

/* Cached images (or loaded ones) fade in instantly */
img.u-userImage[src]:not([loading="lazy"]),
/* Non-lazy images */
img.u-userImage[loading="lazy"][src][width][height] {
  /* Lazy images with dimensions */
  opacity: 1;
}

/* UTILITY CLASSES */
.u-tooltip:not(.shown) {
  display: none;
}

.u-button {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  min-width: 5rem;
  max-width: 140px;
  padding: 0.0rem .5rem;
}

.u-buttonIcon {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  filter: invert(var(--invert));
}

.u-displayName {
  font-weight: bold;
  color: var(--color-text-default);
}

.u-displayName:hover {
  color: var(--color-link);
}


.u-userImage {
  width: 32pt;
  height: 32pt;
  display: inline-block;

  background-color: whitesmoke;
  border-radius: var(--border-radius-std);
  border: 1px solid var(--color-button-border);
  padding: 1pt;

}

.u-hidden {
  display: none;
}

.u-button:disabled,
.u-button[disabled] {
  color: var(--color-button-border);
  background-color: var(--color-button-bg);
  border-color: var(--color-button-border);
  cursor: not-allowed;
  pointer-events: none;
}

[disabled]>.u-buttonIcon {
  opacity: 0.6;
}

.o-pageLayout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.o-navBar {
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 5pt;
  justify-items: flex-start;
}

@media (min-width: 768px
  /* var's dont work here */
) {
  .o-pageLayout {
    flex-direction: row;
  }

  .o-navBar {
    position: sticky;
    top: 0;
    align-self: start;
    max-width: 400px;
    padding: 10pt;
    padding-right: 5pt;
  }
}


.o-navBar__list {
  display: flex;
  gap: 4pt;
}

.o-navBar__item {
  display: block;
}

.o-navBar__header {
  font-weight: bold;
}

.o-mainBar {
  flex-grow: 1;
  max-width: 50rem;
  padding: 4pt clamp(0px, 4vw - 30px, 4pt);
  padding-top: 0;
  width: 100%;
}

.o-mainBar__newPostsAlert {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 150;
  background: var(--color-bg-default);
  padding: 4pt;
  border: 1px solid var(--color-timeline-item-border);
}

.o-mainBar__newPostsAlert.-hidden {
  display: none;
}

.o-mainBarTimeline {
  background-color: var(--color-timeline-bg);
  border: 1px solid var(--color-timeline-item-border);
  border-top: 0px;
  width: 100%;
}

.o-mainBarTimeline__pendingNotifications {
  padding: .5rem .1rem;
}

.o-mainBarTimeline.-hideReplies .o-mainBarTimeline__item.-reply {
  display: none;
}

.o-mainBarTimeline__switches {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem;
}

/* Disable, until we figure out if we really want it. */
.o-mainBarTimeline__switches {
  display: none;
}

.o-mainBarTimeline__repliesLabel {
  font-weight: bold;
  padding: 4pt;
}

.o-mainBarTimeline__repliesToggle {
  padding: 4pt;
}

.o-mainBarTimeline__item.-empty {
  display: none;
}

@media (min-width: 768px
  /* var's dont work here */
) {
  .o-mainBarTimeline__item {
    padding: 1rem;
  }
}

.o-mainBarTimeline__item {
  margin-top: 0.5em;
}

.o-mainBarTimeline__item.-preview .m-postView {
  opacity: 0.6;
}

.o-mainBarTimeline__item.-preview .m-postView {
  opacity: 0.6;
}

.o-mainBarTimeline>.o-mainBarTimeline__item:not(:last-child) {
  border-bottom: 1px solid var(--color-timeline-item-border);
}

.o-mainBar__item {
  padding: 10pt;
  border-bottom: 1px solid gray;
}

.o-sideBar {
  /* flex: 1; */
  padding: 10pt;
}

.m-postView {
  max-width: 55rem;
  margin: 0.5em;
}


.m-postView__main {
  display: flex;
  /* min-width: 20rem; */
  max-width: 50rem;
}


.m-postView__userImage {
  margin: 2pt;
}

.m-postView__contentSide {
  padding-inline: 10pt;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.m-postView__content {
  position: relative;
}

/* Unexpanded (folded) reply-parent's should be truncated, so the response itself is uncluttered */
.m-postContext__postParent:not(.-expanded) {
  max-height: 10rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical;
}

/* Cover reply-parent's folded content with gradient if not expanded */
.m-postContext__postParent:not(.-expanded) .m-postView__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10rem;
  /* top: 40%; */
  background: linear-gradient(to bottom,
      rgba(59, 59, 59, 0%) 20%,
      var(--color-timeline-bg) 70%);
  z-index: 1;
}

/* By default, hide buttons on reply parents */
.m-postContext__postParent:not(.-expanded) .m-postView__buttonBar {
  display: none;
}


.m-postView__contentSide>* {
  word-wrap: break-word;
  word-break: break-all;
}


.m-postView__userHandle {
  display: flex;
  gap: 2pt;
  justify-content: space-between;
  align-items: center;
}

.m-postView__header {
  display: flex;
  gap: 2pt;
  justify-content: space-between;
}

.m-postView__timestamp {
  font-size: 0.8rem;
  color: oklch(60% 0 0);
  opacity: 0.7;
  margin-left: 0.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.m-postView__personaDisplayName {
  display: none;
}

.m-postView__header:hover .m-postView__personaDisplayName {
  display: inline-block;
}

.m-postView__comments {
  padding-left: 1rem;
}


.m-newPostForm__replyToText {
  font-weight: bold;
}

.m-newPostForm__emojiButton {
  padding-left: 1rem;
  padding-right: 1rem;
}

.m-newPostForm__emojiBar.-hidden {
  display: none;
}

emoji-picker {
  width: 100%;
}

.m-postView__content {
  word-break: break-word;
}

.m-postView__content .lazyload-wrapper:not(.-expanded) img,
.m-postView__content .lazyload-wrapper:not(.-expanded) iframe {
  display: none;
}

.m-postView__content .lazyload-wrapper.-expanded p {
  display: none;
}

.m-postView__content .lazyload-wrapper p {
  font-style: italic;
}

.m-postView__content.-missing {
  color: red;
  font-style: italic;
}

.m-postView__buttonBar {
  display: flex;
  justify-content: space-between;
  gap: 5pt;
}


.m-postView__reactions {
  display: flex;
  gap: .5rem;
}

.m-postView__buttons {
  display: flex;
  gap: .5rem;
}

.m-postView__commentsButtonIcon {
  background: url('/assets/icons/comment.svg') center/contain no-repeat;
}

.m-postView__replyToButtonIcon {
  background: url('/assets/icons/reply.svg') center/contain no-repeat;
}

.m-postView__deleteButtonIcon {
  background: url('/assets/icons/xmark.svg') center/contain no-repeat;
}

.m-postView__fetchButtonIcon {
  background: url('/assets/icons/download.svg') center/contain no-repeat;
}

.m-profileSummary {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
}

.m-profileSummary__userImage {
  margin: 2pt;
}

.m-profileSummary.-edit .m-profileSummary__userImage:hover {
  filter: blur(2px);
}

.m-profileSummary__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

.m-profileSummary__displayName {
  height: 1.1rem;
  line-height: 1.1rem;
  vertical-align: middle;
  font-size: 1rem;
}

.m-profileSummary__bio {
  /* min-height: 200px; */
  /* min-width: 100%; */
  width: 100%;
}

.m-profileSummary__buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  max-width: 400px;
}

.m-profileSummary__copyButton {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
  padding-left: 2rem;
}

.m-profileSummary__copyButtonIcon {
  background: url('/assets/icons/id-card.svg') center/contain no-repeat;
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.m-profileSummary__copyButton:hover .m-profileSummary__copyButtonIcon {
  background-image: url('/assets/icons/copy.svg');
}

.m-profileSummary__copyButton.-active .m-profileSummary__copyButtonIcon {
  background-image: url('/assets/icons/circle-check.svg') !important;
}

.m-profileSummary__editButton {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
  padding-left: 2rem;
}

.m-profileSummary__editButtonIcon {
  background: url('/assets/icons/pen-to-square.svg') center/contain no-repeat;
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.m-profileSummary__saveButton {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.m-profileSummary__saveButtonIcon {
  background: url('/assets/icons/upload.svg') center/contain no-repeat;
}

.m-profileSummary__logoutButton {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
  padding-left: 2rem;
}

.m-profileSummary__logoutButtonIcon {
  background: url('/assets/icons/arrow-right-from-bracket.svg') center/contain no-repeat;
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.m-newPostForm {
  display: flex;
  flex-direction: column;
  justify-items: flex-end;
  gap: 5pt;
}


.m-newPostForm__content {
  padding: 5pt;
  height: 10rem;
  border: 1px solid var(--color-button-border);
  border-radius: var(--border-radius-std);
}

.m-newPostForm__footer {
  display: flex;
  flex-direction: column;
  gap: 5pt;
}

.m-newPostForm__footerRow {
  display: flex;
  justify-content: flex-end;
  gap: 5pt;
}

.m-newPostForm__footerRow--media {
  justify-content: flex-start;
}

.m-newPostForm__previewButton {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.m-newPostForm__previewButtonIcon {
  background: url('/assets/icons/arrow-right.svg') center/contain no-repeat;
}

.m-newPostForm__attachButtonIcon {
  background: url('/assets/icons/paperclip.svg') center/contain no-repeat;
}

.m-newPostForm__uploadButtonIcon {
  background: url('/assets/icons/cloud-arrow-up.svg') center/contain no-repeat;
}

.m-addFolloweeForm {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

.m-addFolloweeForm__content {
  border: 1px solid var(--color-button-border);
  border-radius: var(--border-radius-std);
  flex-grow: 1;
  /* width: 100%; */
  /* min-width: 100%; */
}

.m-addFolloweeForm__bottomBar {
  display: flex;
  gap: 5pt;
}


.m-addFolloweeForm__followButtonIcon {
  background: url('/assets/icons/upload.svg') center/contain no-repeat;
}

.m-profileSummary__followButtonIcon {
  background: url('/assets/icons/arrow-right.svg') center/contain no-repeat;
}

.m-profileSummary__unfollowButtonIcon {
  background: url('/assets/icons/upload.svg') center/contain no-repeat;
}

.o-unlockScreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  padding: 1rem;
}

.o-unlockScreen__form {
  padding: clamp(0px, 2.5vw, 2rem) clamp(0px, 5vw, 4rem);
  border: solid 1px var(--color-timeline-item-border);
  border-radius: var(--border-radius-std);

  display: flex;
  flex-direction: column;
  gap: .5rem;

  background: var(--color-timeline-bg);
  box-shadow: 0 8px 25px var(--shadow-color-strong), 0 2px 10px var(--shadow-color);
}

.o-unlockScreen__header>* {
  padding-top: 4pt;
  padding-bottom: 4pt;
}

.o-unlockScreen__fakeUsername {
  display: none;
}

.o-unlockScreen__idLine {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5pt;
}

.o-unlockScreen__id {
  flex-grow: 1;
}

.o-unlockScreen__mnemonicLine {
  display: flex;
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 5pt;
}

.o-unlockScreen__mnemonic {
  flex-grow: 1;
}

.o-unlockScreen__unlockLine {
  display: flex;
  gap: 5pt;
}

.o-unlockScreen__unlockButtonIcon {
  background: url('/assets/icons/right-to-bracket.svg') center/contain no-repeat;
}

.o-unlockScreen__roButtonIcon {
  background: url('/assets/icons/circle-xmark.svg') center/contain no-repeat;
}

.o-unlockScreen__generateButtonIcon {
  background: url('/assets/icons/dice.svg') center/contain no-repeat;
}

.o-mainBarTimeline {
  position: static;
}

.o-mainBarTimeline__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  position: sticky;
  top: 0;

  z-index: 100;
  background-color: var(--color-tab-inactive-bg);
  border-top: 1px solid var(--color-timeline-item-border);
}

.o-mainBarTimeline__tabs>* {
  font-weight: 600;

  padding: clamp(0px, 0.4vw, 0.5rem) clamp(0.5rem, 1vw, 4rem);
  text-align: center;
}

.o-mainBarTimeline__tabs>*.-active {
  background-color: var(--color-timeline-bg);
}

.o-previewDialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.o-previewDialog.-active {
  display: flex;
}

.o-previewDialog__content {
  background-color: var(--color-bg-default);
  border-radius: 8px;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.o-previewDialog__post {
  margin-bottom: 20px;
  border: 1px solid var(--color-timeline-item-border);
  border-radius: 8px;
  padding: 10px;
}

.o-previewDialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.o-previewDialog__form {
  width: 100%;
}

.o-previewDialog__actionContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 4pt;
}

.o-previewDialog__personaContainer {
  display: flex;
  align-items: center;
}

.o-previewDialog__personaLabel {
  display: none;
}

.o-previewDialog__personaSelect {
  padding: 4px 8px;
  border-radius: var(--border-radius-std);
  border: 1px solid var(--color-button-border);
  background-color: var(--color-text-input-bg);
  color: var(--color-text-default);
}

.o-previewDialog__actionButtons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.o-previewDialog__cancelButton {
  background-color: var(--color-button-bg);
}

.o-previewDialog__submitButton {
  background-color: var(--color-button-bg);
}

.o-previewDialog__submitButtonIcon {
  background: url('/assets/icons/upload.svg') center/contain no-repeat;
}

.o-previewDialog__cancelButtonIcon {
  background: url('/assets/icons/arrow-left.svg') center/contain no-repeat;
}

/* Follow Dialog Styles */
.o-followDialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.o-followDialog.-active {
  display: flex;
}

.o-followDialog__content {
  background-color: var(--color-bg-default);
  border-radius: 8px;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.o-followDialog__title {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.o-followDialog__form {
  width: 100%;
}

.o-followDialog__optionsContainer {
  margin-bottom: 20px;
}

.o-followDialog__selectContainer {
  margin-bottom: 15px;
}

.o-followDialog__followTypeSelect {
  width: 100%;
  padding: 2pt;
  border-radius: var(--border-radius-std);
  border: 1px solid var(--color-button-border);
  background-color: var(--color-text-input-bg);
  color: var(--color-text-default);
  font-size: 1rem;
}

.o-followDialog__personaList {
  margin-top: 15px;
  margin-left: 25px;
  display: none;
}

.o-followDialog__personaList.-visible {
  display: block;
}

.o-followDialog__personaOption {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.o-followDialog__personaLabel {
  margin-left: 8px;
}

.o-followDialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.o-followDialog__cancelButton {
  background-color: var(--color-button-bg);
}

.o-followDialog__submitButton {
  background-color: var(--color-button-bg);
}

.o-followDialog__submitButtonIcon {
  background: url('/assets/icons/upload.svg') center/contain no-repeat;
}

.o-followDialog__cancelButtonIcon {
  background: url('/assets/icons/arrow-left.svg') center/contain no-repeat;
}

.o-previewDialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.o-previewDialog.-active {
  display: flex;
}

.o-previewDialog__content {
  background-color: var(--color-bg-default);
  border-radius: 8px;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.o-previewDialog__title {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.o-previewDialog__post {
  margin-bottom: 20px;
  border: 1px solid var(--color-timeline-item-border);
  border-radius: 8px;
  padding: 10px;
}

.o-previewDialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.o-previewDialog__cancelButton {
  background-color: var(--color-button-bg);
}

.o-previewDialog__submitButton {
  background-color: var(--color-button-bg);
}

/* TOGGLE SWITCH CHECKBOXES */
.switch {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: calc(1.5rem - 2 * 4px);
  width: calc(1.5rem - 2 * 4px);
  left: 6px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(calc(1.5rem - 4px));
  -ms-transform: translateX(calc(1.5rem - 4px));
  transform: translateX(calc(1.5rem - 4px));
}

/* Rounded sliders */
.slider.round {
  border-radius: 2rem;
}

.slider.round:before {
  border-radius: 50%;
}

/* Media List Styles */
.o-mediaList {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.o-mediaList.-active {
  display: flex;
}

.o-mediaList__content {
  background-color: var(--color-bg-default);
  border-radius: 8px;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.o-mediaList__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
  overflow-y: auto;
  flex-grow: 1;
  max-height: calc(80vh - 120px);
  /* Leave space for header and close button */
  padding: 10px;
  border: 1px solid var(--color-timeline-item-border);
  border-radius: var(--border-radius-std);
}

.o-mediaList__item {
  cursor: pointer;
  border: 1px solid var(--color-button-border);
  border-radius: var(--border-radius-std);
  padding: 8px;
  text-align: center;
  transition: background-color 0.2s;
}

.o-mediaList__item:hover {
  background-color: var(--color-button-bg-hover);
}

.o-mediaList__thumbnail {
  width: 100%;
  max-width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--border-radius-std);
  margin-bottom: 5px;
}

.o-mediaList__info {
  font-size: 0.8rem;
  color: var(--color-text-default);
  opacity: 0.7;
}

.o-mediaList__empty {
  text-align: center;
  color: var(--color-text-default);
  opacity: 0.7;
  padding: 20px;
}

.o-mediaList__actionButtons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.o-mediaList__closeButton {
  background-color: var(--color-button-bg);
}