/* board.css */

:root {
  /* Dark theme (default) */
  --bg-primary: #0b1622;
  --bg-secondary: #1a2332;
  --bg-tertiary: #151f2e;
  --bg-quaternary: #32445b;
  --text-primary: #8596a5;
  --text-secondary: #a8b5c4;
  --border-color: #32445b;
  --hover-bg: #2a3441;
  --overlay-bg: #101820;
  --button-bg: #1f2a38;
  --special-color: #00bfff;
  --special-color-hover: #57d5ff;
  --border: #3DB4F2;
}

[data-theme="light"] {
  --bg-primary: #e7f0f8;
  --bg-secondary: #b7e0f7;
  --bg-tertiary: #b7e0f7;
  --bg-quaternary: #b7e0f7;
  --text-primary: #0b5f97;
  --text-secondary: #0b5f97;
  --border-color: #b7e0f7;
  --hover-bg: #cfe8f7;
  --overlay-bg: #e7f0f8;
  --button-bg: #cfe8f7;
  --special-color: #E846C4;
  --special-color-hover: #a82a8d;
  --border: #E846C4;
}

[data-theme="brown"] {
  --bg-primary: #271c19;
  --bg-secondary: #55423d;
  --bg-tertiary: #55423d;
  --bg-quaternary: #af7f76;
  --text-primary: #faeee7;
  --text-secondary: #faeee7;
  --border-color: #fffffe;
  --hover-bg: #fffffe;
  --overlay-bg: #271c19;
  --button-bg: #55423d;
  --special-color: #df5c38;
  --special-color-hover: #dd866e;
  --border: #df5c38;
}

body, html {
  height: 100%;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  margin-top: 3rem;
}

#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 18, 34, 0.85);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex; /* ensure flex is applied even after JS toggles display */
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* optional: disable clicks outside the card */
}


.post-modal-card {
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 32px 28px 24px 28px;
  min-width: 340px;
  max-width: 95vw;
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--text-secondary);
  pointer-events: auto;
}

.modal-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-secondary);
  text-align: center;
}

  .comment-box {
    display: flex;
    gap: 10px;
    margin-top: 0;
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    align-items: flex-end;
  }
  .comment-username-input {
    background: var(--overlay-bg);
    color: #e91e63;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 4px;
    margin-right: 0;
    display: block;
  }
  .comment-input {
    background: var(--overlay-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 1rem;
    flex: 1 1 auto;
    margin-right: 4px;
    min-height: 80px;
    max-height: 200px;
    resize: vertical;
    box-sizing: border-box;
    transition: box-shadow 0.2s;
  }
  .comment-input:focus {
    box-shadow: 0 0 0 2px var(--border);
    outline: none;
  }
  .emoji-btn {
    background: none;
    border: none;
    font-size: 1.3em;
    cursor: pointer;
    margin-right: 2px;
    position: relative;
    transition: color 0.2s;
    color: var(--border);
  }
  .emoji-btn:hover {
    color: #e91e63;
  }
  .emoji-picker {
    position: absolute;
    bottom: 40px;
    right: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    display: none;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    min-width: 30rem;
    max-width: 30rem;
    max-height: 180px;
    overflow-y: auto;
    font-size: 1.2em;
    color: var(--text-secondary);
  }
  .emoji-picker span {
    cursor: pointer;
    font-size: 1.2em;
    margin: 2px;
    transition: background 0.15s;
    border-radius: 4px;
    padding: 2px 4px;
    display: inline-block;
  }
  .emoji-picker span:hover {
    background: var(--hover-bg);
  }

.section-header{
  display: flex;
  align-items: center;
  justify-content: space-between; /* space between title and button */
}


.make-post-btn {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background-color: var(--button-bg);
  color: var(--text-primary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.10rem;
}

.make-post-btn:hover {
  background-color: var(--bg-quaternary);
  color: var(--text-secondary);
}
#media-type-select{
    color: var(--text-secondary) !important;
}

  #board-root {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 0 40px 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  #media-type-select, #media-search, #username-input {
    padding: 10px;
    font-size: 1rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    width: 250px;
    max-width: 90vw;
    box-sizing: border-box;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
  }

  #search-container {
    width: 100%;
    display: none; /* Initially hidden, shown by JS */
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative; /* makes #search-results anchor to this */
    max-width: 250px;
    align-items: center;
  }

#search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  box-sizing: border-box;
  z-index: 100;
  max-width: 250px;
}
/* Send Post Button */
  .search-result-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    background: none;
    color: var(--text-secondary);
  }
  .search-result-item:hover {
    background-color: var(--bg-quaternary);
  }

  #send-post-btn {
    padding: 10px 24px;
    font-size: 1.1rem;
    border-radius: 6px;
    border: none;
    background-color: var(--border);
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
    margin-top: 8px;
  }
  #send-post-btn:disabled {
    background-color: #444;
    color: #888;
    cursor: default;
  }
  #send-post-btn:not(:disabled):hover {
    background-color: var(--special-color-hover);
  }

  #close-modal-btn {
    padding: 10px 24px;
    font-size: 1.1rem;
    border-radius: 6px;
    border: none;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
    margin-top: 8px;
  }

    #close-modal-btn:hover {
    background-color: var(--bg-quaternary);
  }

  #posts-container {
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    background: none;
    max-height: none;
    overflow: visible;
  }
  .board-post {
    padding: 18px 24px 14px 24px;
    border-bottom: 1px solid var(--bg-tertiary);
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    transition: background 0.2s;
    max-width: 50rem;
    min-width: 45rem;
  }
  .board-post:last-child {
    margin-bottom: 0;
  }
  .board-post p {
    margin: 0 0 6px 0;
    font-size: 1.08rem;
    color: var(--text-secondary);
  }
  .board-post small {
    color: var(--text-primary);
    font-size: 0.95rem;
    float:left;
  }
  .board-post a {
    color: var(--special-color);
    text-decoration: none;
    font-weight: 600;
  }
  .board-post a:hover {
    text-decoration: none;
    color: var(--special-color-hover);
  }


  #post-preview {
    margin: 10px 0;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-tertiary);
    font-style: italic;
    width: 300px;
    max-width: 45rem;
  }

  #post-preview a {
  color: var(--special-color); /* your desired color */
  text-decoration: none; /* optional: remove underline */
}

#post-preview a:hover {
  color: var(--special-color-hover); /* hover color */
}

  /* Likes/Comments row */
  .likes-row {
    display: flex;
    align-items: center;
    gap: 0.2rem !important;
    justify-content: flex-end;
  }
  .like-heart {
    font-size: 1.3em;
    color: #e91e63;
    transition: opacity 0.2s;
  }
  .like-heart[style*="opacity: 1"] {
    filter: drop-shadow(0 0 4px #e91e63);
  }

.like-heart:hover {
  transform: scale(1.4);
  filter: brightness(1.3) drop-shadow(0 0 4px #e91e63);
}

  .likes-count {
    font-size: 1em;
    color: var(--text-primary);
    margin-right: 8px;
  }
  .comment-icon {
    font-size: 1.1em;
    color: #F06292;
  }

  .comment-icon:hover {
  transform: scale(1.3) rotate(10deg); /* grows slightly and tilts */
  filter: brightness(1.2);             /* makes it a bit brighter */
}
  .comments-count {
    font-size: 1em;
    color: var(--text-primary);
  }

  /* Comments section */
  .comments-section {
    margin-top: 10px;
    background: var(--overlay-bg);
    border-radius: 10px;
    padding: 16px 18px 12px 18px;
    color: var(--text-secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    max-width: 45;
  }
  .comment {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 1.08rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 4px solid var(--border);
    position: relative;
    overflow-wrap: break-word;
    white-space: normal;
  }
  .comment:last-child {
    margin-bottom: 0;
  }
  .comment-username {
    font-weight: bold;
    color: #e91e63;
    font-size: 1.05em;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
  }
  .comment-timestamp {
    color: var(--text-primary);
    font-size: 0.90em;
    margin-left: 0;
    margin-top: 2px;
    align-self: flex-end;
    opacity: 0.85;
  }
  .comment-text {
    margin-bottom: 2px;
    word-break: break-word;
    font-size: 1.08em;
    color: var(--text-secondary);
  }
  .comment-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  .comment-tab-btn {
    padding: 6px 12px;
    background: var(--button-bg);
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
  }
  .comment-tab-btn:hover {
    background: var(--bg-quaternary);
  }
  .comment-tab-btn.active {
    background: var(--border);
    color: #fff;
  }
  .comment-tab-content {
    display: none;
  }
  .comment-tab-content.active {
    display: block;
  }
  .comment-input {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    background: var(--overlay-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 8px;
  }
  .send-comment-btn {
    background: var(--border);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 7px 18px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .send-comment-btn:hover {
    background: var(--special-color-hover);
  }

  .empty-message {
    color: var(--text-primary);
    text-align: center;
    margin: 2rem 0;
  }

  /* New Post Box */
  .new-post-box {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  }

  #username-field {
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    background: var(--overlay-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
  }

  .post-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }

  .tab-btn {
    padding: 8px 16px;
    background: var(--button-bg);
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
  }

  .tab-btn:hover {
    background: var(--bg-quaternary);
  }

  .tab-btn.active {
    background: var(--border);
    color: #fff;
  }

  .tab-content {
    display: none;
  }

  .tab-content.active {
    display: block;
  }

  #post-text {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    background: var(--overlay-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
  }

  #post-text:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--border);
  }

  .post-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }

  #insert-media-btn, #send-post-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.2s;
  }

  #insert-media-btn {
    background: var(--button-bg);
    color: var(--text-primary);
  }

  #insert-media-btn:hover {
    background: var(--bg-quaternary);
  }

  #send-post-btn {
    background: var(--border);
    color: #fff;
  }

  #send-post-btn:hover {
    background: var(--special-color-hover);
  }

  #send-post-btn:disabled {
    background: #444;
    color: #888;
    cursor: not-allowed;
  }

  #media-type-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .media-type-btn {
    padding: 8px 16px;
    background: var(--button-bg);
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s;
  }

  .media-type-btn:hover {
    background: var(--bg-quaternary);
    color: var(--text-secondary);
  }

  #media-search-box {
    margin-top: 12px;
  }

  #media-search-input {
    width: 100%;
    padding: 10px;
    background: var(--overlay-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
  }

  #media-search-results {
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--overlay-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
  }

  .search-result-item {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
  }

  .search-result-item:hover {
    background: var(--bg-quaternary);
  }

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

  #post-preview {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    background: var(--overlay-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    box-sizing: border-box;
  }

  #post-preview a {
    color: var(--special-color);
    text-decoration: none;
  }

  #post-preview a:hover {
    color: var(--special-color-hover);
  }

  @media (orientation: portrait) {
  body {
    padding-top: 15rem;
  }

  main{
    transform: scale(2.5);
    transform-origin: top;
  }

  .new-post-box {
    max-width: 20rem;
  }

  .board-post{
    min-width: 0;
  }

  .board-post p {
    font-size: 1rem;
  }

  .board-post{
    max-width: 20rem;
  }

  .post-modal {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh; /* adjusts to real visible height on mobile */
    pointer-events: none;
    transform: translateY(-40%);
}

  #modal-overlay {
    position: fixed;
    inset: 0; /* shorthand for top, right, bottom, left = 0 */
    width: 100%;
    height: 100%;
    background: rgba(10, 18, 34, 0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-40%);
}
}