/* Styling for the entire page in dark mode */
body.dark-mode {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Center the title using flexbox */
#title-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

h2#dynamicTitle {
  text-align: center;
}

#dynamicTitleWrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Common styling for all buttons */
button, #connectButton, #publishButton, #docs-button {
    background-color: #5a2d8a;
    border: none;
    color: #ffffff;
    padding: 10px 20px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

/* Styling for the Connect Wallet button */
#connectButton {
    position: absolute;
    top: 0;
    right: 0;
}

/* For connected state */
button.connected {
    background-color: #5a2d8a; /* PulseChain purple background */
}

.fixed-width-title {
    max-width: 1000px;  /* or whatever size fits your layout */
    overflow: hidden;  /* hide text that exceeds the maximum width */
    text-overflow: ellipsis;  /* add ellipsis when text is too long */
    white-space: nowrap;  /* keep the text from breaking into multiple lines */
    font-size: 18px; /* adjust the size as needed */
    text-align: center; /* Center the text */
}

/* New Wrapper for input and publish button */
.input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 90%;
    width: 90%; /* same as scrollable-window */
    margin: auto;
}

/* Styling for the Publish button */
#publishButton {
    margin: 10px auto; /* Center the button */
    margin-top: 10px; /* Some space between the text area and button */
    z-index: 1;
    width: 150px;
}

/* Styling for the Docs button */
#docs-button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 18px; /* Increase font-size for better visibility */
    padding: 12px 24px; /* Increase padding for larger button */
}

/* Common hover effect for all buttons */
button:hover, #connectButton:hover, #publishButton:hover, #docs-button:hover {
    background-color: #3f1d5a;  /* darker purple background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  /* Blackish shadow */
}

/* Styling for the text input container */
.input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 99%;
    width: 90%; //* same as scrollable-window */
    position: relative;
}

/* Styling for the text input area */
#postInput, textarea {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
    margin: 4px 2px;
    border: 2px solid #5a2d8a;
    width: calc(90% - 24px); /* Adjusting for padding and border */
    height: 100%;
    resize: none;
}

#flex-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;  /* Prevent scrolling on the body */
}

#posts-container {
    flex: 1;
    overflow: hidden;
}

#transaction-container {
    flex:1;
    overflow: hidden;
}

/* Style for the new filter container */
#filter-container {
    width: 90%;
    margin: auto;
}

/* Styling for the scrollable transaction data window */
.scrollable-window {
    position: relative;
    width: 90%;
    overflow-y: auto;
    background-color: #000000;
    color: #ffffff;    
    padding: 10px;
    margin-top: 20px;
    max-height: none;
    height: 85%;
    white-space: pre-wrap;
    border: 2px solid #5a2d8a; /* Add a border around each transaction */
    margin: auto;
}

/* Style the scroll bar (webkit) */
.scrollable-window::-webkit-scrollbar {
    width: 10px; /* Set the width of the scrollbar */
}

/* Style the thumb (webkit) */
.scrollable-window::-webkit-scrollbar-thumb {
    background-color: #000000; /* Thumb color */
    border-radius: 10px; /* Rounded corners for the thumb */
}

/* Style the track (webkit) */
.scrollable-window::-webkit-scrollbar-track {
    background-color: #000000; /* Track color */
}

/* Style the scrollbar (firefox) */
.scrollable-window {
    scrollbar-color: #ffffff #000000;
    scrollbar-width: thin;
}

/* Styling for the transactions */
.transaction {
    border: 2px solid #5a2d8a !important; /* Add a border around each transaction */
    padding: 10px; /* Add padding to separate transactions */
    margin: 10px 0; /* Add margin to space out transactions */
    white-space: pre-wrap; /* Preserve line breaks and spaces */
}

/* Styling for the Filter by Tag dropdown */
#tagFilter,
#publishOptionSelect {
    background-color: #000000; /* Background color */
    color: #ffffff; /* Text color */
    border: 2px solid #5a2d8a; /* Border color */
    padding: 5px; /* Padding */
    font-size: 16px; /* Font size */
}

/* Styling for dropdown options */
#tagFilter option,
#publishOptionSelect option {
    background-color: #000000; /* Background color */
    color: #ffffff; /* Text color */
    font-size: 16px; /* Font size */
}

/* Styling for the initial state of the Publish options dropdown */
#publishOptions[style*="display: block"] {
    background-color: #000000 !important; /* Background color */
    color: #ffffff; /* Text color */
    border: 2px solid #5a2d8a; /* Border color */
    padding: 5px; /* Padding */
    font-size: 16px; /* Font size */
}

.transaction-body {
    font-size: 14px; /* main body of message */
}

.transaction-tag {
    font-size: inherit; /* or whatever size you had before */
}