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

body {
  font-family: 'Times New Roman', Times, serif;
  font-size: 18px !important;
  font-weight: lighter;
  line-height: 1.5;
  color: black;
  background-color: #C4C4C4;
  text-align: center;
  padding: 10px;
}

h1 {
  font-family: 'Times New Roman', Times, serif;
  font-weight: lighter;
  font-size: 18px !important;
  color: #000000;
  margin-bottom: 20px;
  text-align: center;
}

a {
  color: rgb(0, 0, 0);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #808080;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  -webkit-text-decoration-thickness: 1px;
  font-size: 18px !important;
}

a:hover {
  color: #A9A9A9;
  font-size: 18px !important;
}

hr {
  border: none;
  border-top: 1px solid #808080;
  margin: 6px 0;
}

/* Hide hr on desktop — posts have their own separators */
@media (min-width: 1024px) {
  hr { display: none; }
}

/* ========== Threads / Posts ============================================== */
.replies { margin-left: 50px; }
.reply {
  margin: 5px; padding: 5px; background-color: #C4C4C4; border: none;
}

.post {
  padding: 10px;
  margin-bottom: 20px;
  background-color: #C4C4C4;
  border-radius: 0px;
  text-align: left;
  position: relative;
}

/* Desktop-specific post styling */
@media (min-width: 1024px) {
  .post {
    max-width: 500px;
    margin-left: auto; margin-right: auto;
    border-bottom: 1px solid #808080;
    padding: 20px 0;
  }
  .post:last-child { border-bottom: none; }
}

.post img,
.post video {
  border: 0; padding: 0; border-radius: 0;
  background-color: #C4C4C4;
  display: block;
  margin: 10px auto;
}

/* Grayscale for feed media */
.post img,
.post video,
img.feed-photo,
video.feed-photo,
.feed-item img,
.feed-item video { filter: grayscale(100%); }

.newReply { margin: 10px 5px; }

.thread {
  padding: 5px; margin-bottom: 10px; background-color: #C4C4C4; border: none; overflow: hidden;
}

.id { font-size: 10.5px; color: gray; }

#submitNewThread { margin: 50px auto; }

/* Desktop widths for submit page (kept for admin/legacy) */
@media (min-width: 1024px) {
  #submitNewThread { max-width: 500px; margin: 50px auto; }
  #submitNewThread + hr,
  #submitNewThread ~ hr {
    display: block; width: 100%; max-width: 500px; margin-left: auto; margin-right: auto;
  }
}

img, video {
  max-width: 100%; height: auto; display: block; margin: 0 auto; border: none;
}

.container {
  max-width: 800px; margin: 0 auto; padding: 10px;
  text-align: left; background-color: #C4C4C4; border: none;
}

/* Desktop container */
@media (min-width: 1024px) {
  .container { max-width: 100%; padding: 20px; }
}

/* ========== Buttons ======================================================= */
button[type="submit"] {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: #C4C4C4;
  font-family: "Times New Roman", serif;
  font-size: 16px;
  border: 1px solid black;
  padding: 5px 20px;
  cursor: pointer;
  border-radius: 0;
  margin-left: auto;
  color: black;
  font-weight: normal !important;
}

a[type="submit"],
button[type="submit"].link-style,
input[type="submit"].link-style,
.submit-link {
  border: none; background: none; padding: 0;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #808080;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  -webkit-text-decoration-thickness: 1px;
  cursor: pointer; position: relative; display: inline-block;
}

/* Safari underline fallback */
@supports (-webkit-appearance: none) {
  a[type="submit"],
  button[type="submit"].link-style,
  input[type="submit"].link-style,
  .submit-link {
    text-decoration: none;
    border-bottom: 1px solid #808080;
    padding-bottom: 4px;
  }
}

@media (max-width: 600px) {
  button[type="submit"] { color: black !important; font-weight: normal !important; }
}

/* Desktop media sizing */
@media (min-width: 1024px) {
  .post img, .post video {
    width: 100% !important; min-width: 100%; max-width: 100%;
    height: auto; object-fit: contain; max-height: none;
  }
  .post p, .post div, .post span, .replies { max-width: 100%; }
  .replies { margin-left: 30px; margin-right: 0; }
}

/* ========== Sticky Composer (bottom bar) ================================== */
/* Spacer so content doesn’t hide behind the bar */
.page-bottom-spacer { height: 120px; }

.composer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: #EFEFEF;                 /* subtle light bar */
  border-top: 1px solid #808080;       /* thin gray like the site hr */
  box-shadow: 0 -10px 32px rgba(0,0,0,0.08);
}
.composer .inner {
  max-width: 1100px; margin: 0 auto; padding: 14px 20px;
}

/* Layout mimicking the separate page */
.post-form {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 520px) auto;
  align-items: center;
  gap: 16px;
  font-family: 'Times New Roman', Times, serif;
}
.post-form .hint {
  justify-self: start;
  font-size: 18px;
  color: #000;
}
.post-form textarea {
  width: 100%;
  min-height: 44px; max-height: 120px; resize: vertical;
  padding: 10px 12px;
  font-size: 18px; line-height: 1.25;
  background: #CFCFCF;                 /* same gray family as site */
  border: 1px solid #000;              /* thin solid black like your buttons */
  border-radius: 0;                    /* square edges */
  color: #000;
}
.post-form .btn {
  font-size: 18px;
  padding: 8px 18px;
  border: 1px solid #000;
  border-radius: 0;
  background: #D9D9D9;
  cursor: pointer;
}
.post-form .btn:hover { filter: brightness(0.95); }

/* Stack nicely on narrow screens */
@media (max-width: 720px) {
  .post-form {
    grid-template-columns: 1fr; gap: 10px;
  }
  .post-form .hint { order: -1; text-align: left; }
  .post-form .btn { justify-self: end; }
}

/* ========== Toast ========================================================= */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px;
  background:#111; color:#fff; padding:.55rem .8rem; border-radius:8px;
  font-size:14px; opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.toast.show { opacity: 1; }