:root{
    --bg:#0f1724;
    --card:#0b1220;
    --muted:#9aa4b2;
    --accent:#4f46e5;
    --success:#10b981;
    --glass: rgba(255,255,255,0.04);
}

/* Reset small bits */
body{
    background: linear-gradient(180deg, #071025 0%, #0b1220 100%);
    color: #e6eef8;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.container-lg{
    padding-top: 28px;
    padding-bottom: 48px;
}

.card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}

.card-header h4{ margin:0; font-weight:600; }

h1{
    font-size: 1.6rem;
    letter-spacing: -0.4px;
}

input.form-control, select.form-select{
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    color: #e6eef8;
}

.btn-primary{ background: var(--accent); border: none; }
.btn-success{ background: var(--success); border: none; }
.btn-info{ background: #06b6d4; border: none; }

.btn{ border-radius: 10px; padding: 10px 14px; }

.mt-4{ margin-top: 1.25rem!important; }

/* Results styling */
#results-area .card{ padding: 12px; }

/* History panel styles */
.history-panel{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-left: 1px solid rgba(255,255,255,0.03);
    padding: 12px;
    border-radius: 12px;
    height: auto;
    max-height: 72vh;
    overflow:auto;
}

.history-item{ background: var(--glass); padding:10px; margin-bottom:8px; border-radius:8px; font-size:0.95rem; color:var(--muted); }

/* Floating history button for mobile */
.history-toggle-mobile{
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
    border-radius: 14px;
    padding: 10px 14px;
    background: linear-gradient(90deg,var(--accent), #06b6d4);
    color: white;
    box-shadow: 0 8px 24px rgba(15,23,42,0.6);
    border: none;
}

/* Hide redundant history (if duplicates appear) on small screens */
@media (max-width: 991px){
    .history-panel{ display:none !important; }
}

/* Layout tweaks */
@media (min-width: 992px){
    .main-col{ padding-right: 20px; }
    .sidebar-col{ padding-left: 20px; }
}

/* Subtle responsive text sizes */
@media (max-width: 576px){
    h1{ font-size: 1.25rem; }
    .card{ border-radius:10px; }
}

/* Mobile history overlay */
.mobile-history-overlay{
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,0.8);
    z-index: 1400;
    display: none;
    padding: 18px;
}
.mobile-history-overlay.open{ display:block; }
.mobile-history-overlay .panel{ background: rgba(10,16,26,0.96); border-radius:10px; padding:12px; max-height: 92vh; overflow:auto; }

/* Search history / sidebar tweaks to avoid overlap and improve wrapping */
#search-history{
    max-height: 86vh;
    overflow:auto;
}

#search-history .list-group-item,
#search-history .history-item{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: block;
}

#search-history .list-group-item small{
    display:block;
    color: var(--muted);
}

.sidebar-content{ padding-right: 8px; }

/* Ensure sidebar doesn't overlap main content on medium screens */
@media (min-width: 768px) and (max-width: 1100px){
    .col-md-2{ flex: 0 0 220px; max-width: 220px; }
    .col-md-10{ margin-left: 8px; }
}

/* Mobile: tighten buttons, enable wrapping and prevent header overlap */
@media (max-width: 576px){
    /* Make action buttons smaller and allow them to wrap */
    .btn, .btn-sm{ padding: 6px 8px; font-size: 0.88rem; border-radius: 8px; }
    .btn{ min-width: 0; }
    .d-grid.d-sm-flex .btn{ flex: 1 1 auto; min-width: 0; }

    /* Ensure header layout stacks cleanly */
    .card-header .d-flex.flex-column,
    .card-header .d-flex.flex-md-row{ flex-direction: column !important; align-items: flex-start; gap: 8px; }
    .card-header .flex-grow-1{ min-width: 0; }

    /* Make titles smaller and prevent overflow */
    .card-header h3, .card-header h4{ font-size: 1.05rem; margin: 0; }
    .card-header .text-muted{ display:block; }

    /* Wrap long pre blocks and lyrics without horizontal scroll */
    .card-body pre, #lyrics-text, #medium-content pre{ white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

    /* Favorite / copy / download buttons: compact and stacked when needed */
    .favorite-btn, .favorite-btn-remove, #copy-lyrics-btn, .copy-medium-btn{ padding:6px 10px; font-size:0.88rem; }

    /* Search history list items: reduce padding and wrap text */
    #search-history .list-group-item{ padding-top:8px; padding-bottom:8px; white-space: normal; overflow-wrap: anywhere; }

    /* Ensure inline link text does not overflow */
    .text-truncate, a.text-truncate{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* Reduce gaps slightly to avoid overlap */
    .d-flex.gap-2{ gap: 6px !important; }
}

/* Small screens: also tweak medium breakpoint to avoid overlap on small laptops */
@media (max-width: 900px){
    .card-header .d-flex.flex-md-row{ flex-direction: column !important; }
    .col-md-2{ flex: 0 0 200px; max-width: 200px; }
}

/* Layout: fixed sidebar + flexible main content */
.sidebar-fixed{
    flex: 0 0 260px;
    max-width: 260px;
    min-width: 220px;
}
.main-fluid{
    flex: 1 1 auto;
    min-width: 0; /* allow children to shrink properly */
}

/* Ensure the row uses flex; allow wrapping by default for small screens */
.container-fluid > .row{ display:flex; flex-wrap: wrap; align-items: flex-start; }

/* On wider screens prevent wrapping so sidebar + main sit side-by-side */
@media (min-width: 1100px){
    .container-fluid > .row{ flex-wrap: nowrap; }
    .sidebar-fixed{ flex: 0 0 340px; max-width: 340px; }
    .main-fluid{ width: calc(100% - 340px); }
}

/* Responsive: stack sidebar above main on small screens */
@media (max-width: 767px){
    .sidebar-fixed{ flex: 0 0 100%; max-width: 100%; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.06); order: 0; }
    .main-fluid{ flex: 0 0 100%; max-width: 100%; order: 1; }
    /* prevent horizontal scrolling on mobile */
    body, html{ overflow-x: hidden; }
}

/* Large-screen: give search-history more breathing room and spacing */
@media (min-width: 1100px){
    #search-history{ padding-right: 18px; }
    #search-history .list-group{ gap: 10px; }
    #search-history .list-group-item{ line-height: 1.4; padding-left: 12px; padding-right: 12px; }
}

/* Ensure card headers wrap their children nicely (fix Medium header overlap) */
.card-header .d-flex{ flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.card-header .d-flex > div{ min-width: 0; }

/* Make sure the right-side action buttons don't push the title off on medium screens */
@media (min-width: 768px){
    .card-header .d-flex.flex-md-row{ flex-direction: row; }
    .card-header .d-flex .flex-grow-1{ min-width: 0; }
}