styles.css

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Fira Code', monospace;
    background-color: #20232A;
    color: #ABB2BF;
}

.doge-bg {
    background: #20232A;
}

.doge-text {
    color: #61AFEF;
}

.terminal-bg {
    background-color: #282C34;
    border: 1px solid #3E4451;
}

.chart-container {
    background-color: #282C34;
    border-radius: 0.5rem;
    border: 1px solid #3E4451;
}

.tab-active {
    border-bottom: 2px solid #e45392;
    color: #ff1f6d;
}

.orderbook-bid {
    /* background: linear-gradient(90deg, rgba(152, 195, 121, 0.1) 0%, transparent 100%); */
    border-bottom: 1px solid #3E4451; /* Add subtle border */
}

.orderbook-ask {
    /* background: linear-gradient(90deg, rgba(224, 108, 117, 0.1) 0%, transparent 100%); */
    border-bottom: 1px solid #3E4451; /* Add subtle border */
}

.message-self {
    background-color: #3E4451;
    border-radius: 1rem 1rem 0 1rem;
}

.message-other {
    background-color: #282C34;
    border-radius: 1rem 1rem 1rem 0;
    border: 1px solid #3E4451;
}

.indicator-active {
    color: #834bcc !important;
    border-bottom: none;
}

.video-chat {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    height: 150px; /* Reduced height */
}

.video-box {
    background-color: #282C34;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #3E4451;
}

.video-box::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.video-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ABB2BF;
}

.video-user {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    padding: 4px;
    font-size: 10px;
    text-align: center;
}

.video-active {
    border: 2px solid #61AFEF;
}

.feed-switch {
    display: flex;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #282C34;
    margin-bottom: 1rem;
    border: 1px solid #3E4451;
}

.feed-switch-btn {
    flex: 1;
    padding: 0.5rem;
    text-align: center;
    cursor: pointer;
    font-size: 0.875rem;
}

.feed-switch-btn.active {
    background-color: #a97ae7;
    color: #ffffff;
}

.hidden-feed {
    display: none;
}

.order-form {
    background-color: #282C34;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #3E4451;
}

/* Large chart container */
.main-chart-container {
    height: 600px; 
    width: 100%;
    margin-bottom: 20px; /* Remove bottom margin to avoid extra space */
    position: relative; /* Enable proper positioning context */
}

/* Ensure the chart canvas fills its container properly */
#candleChart {
    width: 100% !important;
    height: 100% !important;
}

/* Control z-index for chart and overlays */
canvas {
    z-index: 1;
}

/* Ensure main terminal area maintains proper dimensions */
#main-terminal {
    display: flex;
    flex-direction: column;
}

#chart-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0; /* Remove bottom padding to avoid extra space */
}

/* Set the exact height for the bottom panel to match image */
.bottom-panel-container {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    overflow: hidden;
    flex-shrink: 0; /* Prevent flexbox from resizing this element */
    background-color: #20232A; /* Slightly darker background to match screenshot */
}

/* Style the bottom panel tabs to match the benchmark */
#bottom-panel-tabs {
    height: 100%;
    display: flex;
}

/* Make bottom panel draggable */
#bottom-panel {
    cursor: row-resize;
    user-select: none; /* Prevent text selection during drag */
}

#bottom-panel-tabs button {
    height: 100%;
    padding: 0 16px;
    font-size: 0.75rem; /* Slightly smaller font */
    border-right: 1px solid #3E4451;
    border-bottom: none;
    background-color: transparent;
}

#bottom-panel-tabs button.tab-active {
    border-bottom: 2px solid #4999df95;
    color: #ffffff;
    border-radius: 0;
}

/* Ensure the trade history list has proper dimensions */
#trade-history-list {
    height: 70px; /* Hide the list content initially */
    overflow-y: scroll;
    flex-shrink: 0; /* Prevent flexbox from resizing this element */
}

/* Ensure feed containers don't affect layout */
#posts-feed, #chat-feed, #video-feed {
    height: 100%;
    overflow-y: auto;
    position: absolute; /* Remove from normal flow to prevent layout shifts */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Right sidebar container needs position relative for absolute positioning of feeds */
#right-sidebar > div {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Ensure the feed switch stays at the top */
.feed-switch {
    position: relative;
    z-index: 2;
}

/* Ensure all feed content areas have consistent sizing */
#posts-feed > div, #chat-feed > div, #video-feed > div {
    padding-top: 0.5rem;
}

/* New Solana-inspired button style */
.btn-solana {
    background-color: #0fe0c7; /* Teal/Cyan */
    color: #1a202c; /* Dark text for contrast */
    padding: 0.5rem 0.75rem; /* Adjust padding as needed */
    border-radius: 0.375rem; /* Tailwind default rounded-md */
    border: 1px solid transparent;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    cursor: pointer;
}

.btn-solana:hover {
    background-color: #58817c96; /* Lighter Teal/Cyan for hover */
}

/* Style for secondary/icon buttons using the theme */
.btn-solana-secondary {
    background-color: #282C34;
    color: #ABB2BF;
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid #3E4451;
     transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
     cursor: pointer;
}

.btn-solana-secondary:hover {
    background-color: #3E4451;
    color: #51D0BF; /* Teal text on hover */
}

/* Custom class for flex container with space between items */
.flex-space-between {
    @apply flex justify-between items-center;
}

/* Custom class for rounded image with border */
.rounded-image {
    @apply w-10 h-10 rounded-full border-2 border-yellow-500;
}

/* Hover effect for the logo */
.logo-hover-effect {
    transition: transform 0.3s ease-in-out;
}

.logo-hover-effect:hover {
    transform: scale(1.5); /* Make image 50% larger on hover */
}

/* Custom class for text with specific color and font */
.text-green-mono {
    color: #98C379;
    font-family: 'Fira Code', monospace;
}

/* Custom class for grid layout in orderbook */
.orderbook-grid {
    @apply grid grid-cols-3 text-xs p-1;
}

/* Add style for red text */
.text-red-mono {
    color: #E06C75;
    font-family: 'Fira Code', monospace;
}

/* Adjust gray text color */
.text-muted {
    color: #5C6370; /* Darker gray for less important text */
}

/* Style for the orderbook header row */
.orderbook-header {
    color: #5C6370; /* Muted text color */
    border-bottom: 1px solid #3E4451; /* Add border */
    background-color: #282C34; /* Match container bg */
    position: sticky;
    top: 0;
    z-index: 1; /* Ensure header stays above scrolling content */
}

/* Style for the market price row */
.orderbook-market-price {
    position: sticky;
    top: 1.75rem; /* Approximate height of the header row */
    z-index: 1;
    background-color: #282C34;
    border-top: 1px solid #3E4451;
    border-bottom: 1px solid #3E4451;
}

/* Add border-bottom to trade history rows */
.trade-history-row {
    border-bottom: 1px solid #3E4451; /* Match other borders */
}