:root {
  --main-bg: #819067;
  --main-fg: #0A400C;
  --main-font: "Noto Sans Mono", monospace;
  --window-radius: 15px;
  --window-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
@keyframes hovering {
from {
 margin-bottom: 3px;
}
to {
 margin-bottom: 0;
}
}

.window {
    display: none;
    position: fixed; /* Keep this, it makes the window stick relative to the viewport */

    /* --- REMOVE these fixed position offsets --- */
    /* top: 14rem; */
    /* left: 69rem; */

    /* --- ADD responsive corner positioning --- */
    bottom: 60px;    /* Positions the window 20px from the bottom of the screen */
    right: 20px;     /* Positions the window 20px from the right of the screen */

    border-radius: var(--window-radius);
    z-index: 1000;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;

    /* --- ADD responsive sizing for the chat window container --- */
    max-width: 350px; /* Don't let the window get wider than 350px on large screens */
    width: 90vw;      /* On smaller screens, take up 90% of the viewport width */
    min-width: 280px; /* Ensure it's at least 280px wide for readability on very small screens */
    height: auto;     /* Let the height adjust naturally to content */
    max-height: 90vh; /* Prevent it from being taller than the viewport height */
    overflow: hidden; /* Hide any internal scrollbars if content overflows the window */
}

.window.show {
    display: block;
    opacity: 1;
}

.window:focus,
.window *:focus {
  outline: 2px solid #0A400C;
  outline-offset: 2px;
}

 #chattable {
    position: relative; /* This is fine, but it's contained by .window's position */
    border: none;
    border-radius: var(--window-radius);
    width: 100% !important; /* This makes the iframe fill 100% of its parent (.window) */
    
    /* --- You can likely remove max-width from the iframe itself --- */
    /* max-width: 300px; */ /* The .window container's max-width (350px) will now control this */
    
    height: 400px; /* Keep this fixed height for the iframe content itself */
    background-color: transparent !important;
    box-shadow: var(--window-shadow);
    font-family: var(--main-font);
    left: 0; /* These are likely redundant due to width: 100% */
    bottom: 0; /* These are likely redundant due to width: 100% */
    background-image: url("/image-assets/chattable-background.png");
}

/* This body might be for the iframe's internal body, or your main page body.
   For the main page body, keep your existing styles.
   For the iframe's internal body, ensure it's transparent.
*/

.msgWrapper {
  margin: 5px;
}

.allMessages {
  font-family: var(--main-font);
  display: flex;
  gap: 2.5vh;
  background: rgba(129, 144, 103, 0.2);
  border: 1px solid rgba(10, 64, 12, 0.4);
  border-radius: var(--window-radius);
  font-size: 10pt;
  margin: 0;
  line-height: 9pt;
  position: relative;
  color: var(--main-bg);
  text-shadow: 0 0 1px #FFF;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: auto;
}

.msgWrapper:nth-child(6n) {
  margin-top: 20px;
}
.msgWrapper:nth-child(6n) > .allMessages:before {
  content: attr(time);
  position: absolute;
  bottom: calc(100% + 3px);
  width: 100%;
  text-align: center;
}
br {
height: 6pt;
}

/* --- Sender Info --- */
.senderInfo {
  display: block;
  margin: 2px;
  font-family: var(--main-font);
  font-style: italic;
  font-weight: bold;
  text-align: justify;
  min-width: 50px;
  max-width: 30%;
  word-break: break-all;
  color: var(--main-fg);
  text-shadow: none;
}
/* .sent > .senderInfo {
 text-align: right;
}
.recieved > .senderInfo {
 text-align: left;
}
*/
#background {
background-color: transparent; /* Ensure any internal background for the chat itself is transparent */
}
.msgBody {
text-align: left;
}

/* --- Input Fields (Message and Name) --- */
#input, #nameEntry {
  background-color: rgba(129, 144, 103, 0.1);
  color: var(--main-fg);
  border: none;
  font-family: var(--main-font);
  font-size: 8pt;
  padding: 5px;
  width: calc(100% - 10px);
  border-radius: 0;
  margin: 0;
  border-top: solid 1px rgba(10, 64, 12, 0.5);
}
#input:focus, #nameEntry:focus {
  outline: dotted 1px var(--main-fg);
}
#input:empty::before {
  content: "Leave a message...";
  color: rgba(10, 64, 12, 0.6);
}
a {
  font-family: inherit;
  color: var(--main-fg);
}
#timestamp {
  color: rgba(10, 64, 12, 0.8);
  text-align: center;
  font-size: 8pt;
  margin: 0;
}
#timestamp:after {
  content: "\2934";
  font-size: 12pt;
  font-weight: bold;
}
.badge {
  display: none;
}
/* --- Owner/Mod Colors (Changed to use your palette) --- */
.senderInfo:has(.owner),
.senderInfo:has(.mod) {
  font-family: var(--main-font);
  font-weight: bold;
  color: #FEFAE0;
}

#top_banner {
  display: none;
}
#settings {
  filter: invert(50%);
  opacity: 0.75;
}
#settings:hover {
  filter: invert(10%);
}
blockquote {
  font-style: italic;
}
#loadMore {
  font-size: 10pt;
  font-family: var(--main-font);
  color: var(--main-fg);
}
.pinned {
  position: sticky;
  top: 5px;
  z-index: 2;
  max-height: 15vh;
  overflow: hidden;
  cursor: default;
  background: rgba(10, 64, 12, 0.5);
  border-radius: var(--window-radius);
}
.pinned::before {
  content: "\23F7";
  text-align: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 15vh;
  max-height: 15vh;
  animation: 500ms linear infinite alternate hovering;
}
.pinned:hover::before {
display: none;
}
.pinned > .allMessages {
  color: #FFF; /* Changed to white for high contrast */
  border-radius: var(--window-radius);
  box-shadow: none;
}
.pinned > .allMessages:hover {
box-shadow: none;
}
.pinned > .allMessages::before {
content: " ";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 15vh;
max-height: 100%;
/* Gradient for pinned message fade */
opacity: 0.75
}
.pinned > .allMessages:hover::before {
display: none;
}
.pinned:after {
  display: inline-block;
  position: absolute;
  right: 15px;
  top: 2px;
  content: "⋆˙⟡";
  color: white; /* Pin icon color */
}
#replyBanner {
  font-size: 10pt;
  font-family: var(--main-font);
  color: var(--main-fg);
}
#is_typing {
  opacity: 0;
}
#is_typing > span {
  background-color: rgba(10, 64, 12, 0.5);
}
pre:has(>code) {
  margin: 5px;
  background-color: rgba(10, 64, 12, 0.3);
}
#emojiTray {
  background: rgba(10, 64, 12, 0.75);
  color: #FFF;
}
@media (max-width: 700px) {
  .window {
    min-width: 95vw;
    left: 2vw;
    top: 5vh;
    transform: none;
    overflow: auto;
  }
  iframe {
    max-width: 95vw;
    height: 250px;
  }
}