@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 #61AFEF;
    color: #61AFEF;
}

.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: #61AFEF;
    border-bottom: 2px solid #61AFEF;
}

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

.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: #3E4451;
    color: #61AFEF;
}

.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: 500px;
    width: 100%;
    margin-bottom: 1rem;
}

/* Custom class for button styling */
.btn {
    background-color: #282C34;
    color: #ABB2BF;
    border: 1px solid #3E4451;
    &:hover {
        background-color: #3E4451;
        color: #61AFEF;
    }
}

/* 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;
}

/* 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 */
}