#inputSection .media-container {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 4px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    /* Spacing from toggle button and fixed width */
    margin-bottom: 8px;
    width: 120px;
    z-index: 1150; /* ensure it appears above the bottom sheet */
}
/* Gallery & Camera buttons: icon-text spacing and text styling */
.media-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;           /* space between icon and label */
  font-weight: 600;   /* make text bold */
  font-size: 1rem;    /* slightly larger label text */
}
/* Render message images above the text */
.message-image {
  display: block;
  /* Fixed thumbnail size */
  width: 120px;
  height: 120px;
  margin: 0;
  border-radius: 8px;
}

/* Override cropper-modal backdrop */
.cropper-modal {
  background-color: #000 !important;
  opacity: 0.8 !important;
}
/* Wrapper for multiple images: horizontal scroll with 2 visible at a time */
.message-images-wrapper {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: thin;
  /* Show only two thumbnails at a time */
  max-width: calc((120px * 2) + 8px);
}
/* Scrollbar styling */
.message-images-wrapper::-webkit-scrollbar {
  height: 6px;
}
.message-images-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.message-images-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
}
/* -----------------------------
   Play/Pause Floating Action Button (FAB)
   ----------------------------- */
#playPauseBtn {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    right: 10px;
    -webkit-tap-highlight-color: transparent;
    /*width: clamp(48px, 15vw, 64px);
    height: clamp(48px, 15vw, 64px);*/
    /*border-radius: 50%;*/
    background-color: transparent;
    border: none;
    /* color: #fff;*/
    display: none;
    /*font-size: clamp(14px, 4vw, 18px);*/
    /*box-shadow: 0 4px 12px rgba(0,0,0,0.12);*/
    cursor: pointer;
    z-index: 1000;
}
/* ensure play/pause icon fills the FAB */
#playPauseBtn img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}
/* ==== Inspired by new design ==== */
body {
    background-color: #f2e7fb;
    font-family: 'Georgia', serif;
}

.user-message {
    background-color: #f9f3fd;
    border-radius: 20px;
    padding: 12px 20px;
    margin: 8px 0;
    font-weight: 600;
    color: #2e1f59;
    font-size: 1rem;
    align-self: flex-end;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    max-width: 80%;
}

#chatContainer > div:not(.user-message) {
    background-color: #f9f3fd;
    border-radius: 20px;
    padding: 24px;
    margin: 8px 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    font-size: 1rem;
    line-height: 1.6;
    color: #2e1f59;
    max-width: 80%;
    align-self: flex-start;
    position: relative;
    box-sizing: border-box;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/*
 * Custom Mobile-First Styles
 * Base (mobile) rules apply to all devices; use media queries below for larger screens.
 */
/* dynamic viewport-height workaround */
html, body {
    height: calc(var(--vh, 1vh) * 100);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.cropper-crop-box {
    outline: 3px solid #794af2 !important;
}

.cropper-point{
    background-color: #794af2 !important;
}

/* full-height flex container */
#mainContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* scrolling chat area */
#chatContainer {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* enable smooth scrolling to highlighted items */
    scroll-behavior: smooth;
    padding: clamp(12px, 4vw, 24px);
    border: 1px solid #ccc;
    font-size: 1.2em;
    margin-bottom: 0;
    padding-bottom: calc(var(--vh, 1vh) * 30 + env(safe-area-inset-bottom));
}

/* input controls (bottom sheet) */
#inputSection {
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100vh;
    /* allow horizontal overflow for popups */
    overflow-y: auto;
    overflow-x: visible;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    z-index: 1100;
    border-radius: 18px 18px 0 0;
}
#inputSection {
    /* always allow children (e.g. media menu) to overflow without clipping */
    overflow: visible !important;
}
#inputSection.open {
    transform: translateY(0);
    /* allow popups to overflow the sheet */
    overflow: visible;
    overscroll-behavior: contain;
}
#inputSection.open:focus-within {
    /* keep the sheet visible and allow overflow when focused */
    overflow: visible;
}

/* backdrop behind the bottom sheet */
#sheetBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1050;
}
#sheetBackdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* touch-friendly form elements */
input, button {
    padding: 10px;
    margin-top: 10px;
    min-width: 44px;
    min-height: 44px;
}
/* -------------------------------------------------------------------------
   Disabled state styling for image-send buttons (gallery, camera, submit)
--------------------------------------------------------------------------- */
#inputSection .send-btn:disabled {
    background: #d1d1d1; /* muted gray background */
    cursor: not-allowed;
    opacity: 0.7;
}
#inputSection .send-btn:disabled svg {
    fill: #888; /* darker gray icon */
}

/* user message styling */
.user-message {
    background-color: #f9f3fd;
    border-radius: 20px;
    padding: 12px 20px;
    font-weight: 600;
    color: #2e1f59;
    font-size: 16px;
    align-self: flex-start;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* highlighted response block */
.highlight-block {

    background-color: #fdf9c4; /* exact pale yellow highlight */
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500;
    /*color: #2e1f59;*/
    line-height: 1.5;
    transform: scale(1.02);
    animation: heroFadeIn 0.2s ease-in-out;
    scroll-margin-top: clamp(80px, 4vw, 80px);
    /* enable smooth scrolling to highlighted items */
    scroll-behavior: smooth;

    /*background: linear-gradient(to right, #f3e5f5, #ede7f6);*/
    /*border-left: 1px solid #4a148c;*/
    /*scroll-margin-top: clamp(80px, 4vw, 80px);
    max-width: 100%;
    text-align: justify-all;
    box-shadow: 0 2px 10px rgba(123, 31, 162, 0.3);
    transform: scale(1.02);
    animation: heroFadeIn 0.6s ease-in-out;
    will-change: transform, opacity;*/
}
/* ===== Spinner overlay for image uploads ===== */
.spinner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
}
.spinner {
  width: 32px;
  height: 32px;
  /* theme-based ring: light bubble background with dark purple accent */
  border: 4px solid #f9f3fd;
  border-top-color: #2e1f59;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}



@keyframes heroFadeIn {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Copy button in assistant response bubble */
/* Assistant response container needs relative positioning for copy button */
#chatContainer > div:not(.user-message) {
    position: relative;
}
/* Copy button styling */
.copy-btn {
    position: absolute;
    top: 7px;
    right: 4px;
    background: #f9f3fd;
    border: none;
    color: #2e1f59;
    transition: opacity 0.2s, background 0.2s;
    /* override global min-width/min-height on buttons */
    min-width: 0;
    min-height: 0;
    margin: 0;
}
/* Ensure copy/checkmark icons are small and centered */
.copy-btn svg {
    width: 17px;
    height: 17px;
}
/* Hide when loading */
#chatContainer > div.loading .copy-btn {
    display: none;
}

/* === Username Dialog (optimized) === */
:root {
  --accent: #6a4cff;
  --accent-light: #8f5bff;
  --dialog-bg: #ffffff;
  --dialog-radius: 16px;
  --shadow-elev: 0 20px 50px rgba(0, 0, 0, 0.15);
  --text-dark: #1a144f;
  --muted-bg: #f0f0f5;
  --muted-hover: #e0e0ea;
}

/* Shared family for everything inside the modal */
.username-modal { font-family: "Segoe UI", sans-serif; }

/* Backdrop */
.username-modal .modal-backdrop{
  position:fixed;
  inset:0;
  width:100vw;height:100vh;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(3px);
  z-index:2000;
}

/* Dialog container */
.username-modal .modal-dialog{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(420px,90%);
  background:var(--dialog-bg);
  border-radius:var(--dialog-radius);
  box-shadow:var(--shadow-elev);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:2001;
}

/* Header */
.username-modal .modal-header{
  padding:0px 28px 0px;
  font-size:1.3rem;
  font-weight:700;
  color:var(--text-dark);
}

/* Body */
.username-modal .modal-body{
  padding:0 28px 12px;
  display:flex;
  flex-direction:column;
}

/* Text field */
.username-modal .modal-body input{
  padding:12px 16px;
  font-size:1rem;
  border:2px solid #d6d6ec;
  border-radius:10px;
  transition:border-color .2s,box-shadow .2s;
  outline:none;
}
.username-modal .modal-body input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(106,76,255,.2);
}

/* Footer & Buttons */
.username-modal .modal-footer{
  padding:20px 28px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  background:#faf9fe;
  border-top:1px solid #eee;
}
.username-modal .btn{
  padding:10px 22px;
  font-size:1rem;
  font-weight:600;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:background-color .2s,transform .1s;
}
.username-modal .btn:hover{ transform:translateY(-1px); }
.username-modal .btn-cancel{
  background:var(--muted-bg);
  color:#555;
}
.username-modal .btn-cancel:hover{ background:var(--muted-hover); }
.username-modal .btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  color:#fff;
}
.username-modal .btn-primary:hover{
  background:linear-gradient(135deg,#5a3ae6,#794af2);
}

/* Responsive tweaks */
@media (max-width:400px){
  .username-modal .modal-dialog{ width:84vw;border-radius:14px; }
  .username-modal .modal-header{ padding:0px 20px 0px;font-size:1.2rem; }
  .username-modal .modal-body{ padding:0 20px 10px; }
  .username-modal .modal-body input{ padding:10px 14px;font-size:.95rem; }
  .username-modal .modal-footer{ padding:16px 20px;gap:8px; }
  .username-modal .btn{ padding:8px 18px;font-size:.95rem; }
}

/* dim non-highlight text within highlighted responses */
#chatContainer span.has-highlight {
    color: rgba(0, 0, 0, 0.9);
    transition: color 0.5s ease;
}

/* === KaTeX formula scrollable blocks === */
.katex-display {
  /* constrain to parent width and allow horizontal scroll if content overflows */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.katex-display > .katex {
  /* ensure inner math content doesn't wrap and can overflow container */
  min-width: max-content;
}
#chatContainer span.has-highlight .highlight-block {
    color: #000000;
}
/* ---------------------------------------------------------------------------
   Loading overlay & spinner
   --------------------------------------------------------------------------- */
#loadingOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}
#--------------------------------------------------------------------------
/* Offline (no-internet) full-screen overlay */
#offlineOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 10000;
}
#offlineOverlay > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.25rem;
  color: #000000;
  text-align: center;
}
#loadingOverlay .loader-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}
#loadingOverlay .loader-text {
  color: #ffffff;
  font-size: 1rem;
  text-align: center;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Mobile-first sizing adjustments */
@media (min-width: 480px) {
  #loadingOverlay .loader-spinner { width: 64px; height: 64px; border-width: 6px; }
  #loadingOverlay .loader-text { font-size: 1.2rem; }
}

/* Always preserve line breaks in user messages */
.user-message {
    white-space: pre-wrap;
}
/* Expand more link under truncated user messages */
/* Expand/collapse toggle link */
.expand-toggle {
    display: inline-block;
    color: #5a3eeb;
    cursor: pointer;
    margin-top: 8px;
    font-size: 0.9em;
    font-weight: 600;
    padding: 2px 6px;
    background-color: rgba(90, 62, 235, 0.1);
    border: 1px solid #5a3eeb;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.expand-toggle:hover {
    background-color: rgba(90, 62, 235, 0.2);
}

/* Truncate user message text to 6 lines by default */
.message-text.collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Ensure message-text preserves line breaks */
.message-text {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Expanded state shows full text */
.message-text.expanded {
    display: block;
}

/* floating action buttons */
#inputBtn {
    /*position: fixed;
    left: 50%;
    transform: translateX(-50%);*/
    /* width: clamp(48px, 15vw, 64px);
     height: clamp(48px, 15vw, 64px);*/
    display: none;
    background: transparent;
    border: none;
    -webkit-tap-highlight-color: transparent;
    /*box-shadow: 0 4px 10px rgba(0,0,0,0.05);*/
    /*padding: 0;
    box-shadow: none;
    animation: none;*/
    cursor: pointer;
    /*bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);*/
}
/* ensure input button image fills its container */
#inputBtn img {
    width: 94px;
    height: 94px;
    object-fit: contain;
}

button {
    font-size: clamp(14px, 4vw, 18px);
    padding: clamp(6px, 2vw, 10px);
}

/* position nav buttons at center left/right */
#prevBtn,
#nextBtn {
    position: fixed;
    /* vertical center */
    top: 50%;
    -webkit-tap-highlight-color: transparent;
    bottom: auto;
    border: none;
    background: transparent;
    transform: translateY(-50%);
    z-index: 1000;
}

/* size the icons inside nav buttons */
#prevBtn img,
#nextBtn img {
    width: 43px;
    height: 43px;
    object-fit: contain;
}
/* position prev and next at left/right edges */
#prevBtn {
    left: 0px;
}
#nextBtn {
    right: 0px;
}

/* default hidden nav; fade in when active */
#prevBtn, #nextBtn {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
#prevBtn.visible, #nextBtn.visible {
    opacity: 1;
    pointer-events: auto;
}

/* small-screen overrides */
@media (max-width: 600px) {
    .highlight-block {
        margin: 18px 3px;
        border-left-width: 1px;
    }
    #chatContainer {
        font-size: 1em;
    }

    /* Full-width messages on mobile for better space utilization */
    #chatContainer > div:not(.user-message),
    .user-message {
        max-width: 100%;
    }
}

/* ---- New Input Section Design (from newDesignFile.html) ---- */
/*#inputSection {
  !* wrap the centered card *!
  !*padding: 0 !important;*!
  background: transparent !important;
  display: flex;
  justify-content: center;
}*/
/*#inputSection .card {
  width: min(94vw, 420px);
  background: #fff;
  border-radius: 36px;
  padding: 32px 28px 40px;
  box-shadow: 0 18px 60px rgba(130,83,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 28px;
}*/
#inputSection .title {
    /*font-size: clamp(1.8rem, 6vw, 2.1rem);*/
    font-weight: 600;
    color: #0f0072;
    /*line-height: 1.25;*/
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
#inputSection .title .emoji {
    font-size: 1.25em;
    line-height: 0.7;
}
#inputSection .input-row {
    display: flex;
    align-items: center;
    /* more compact layout: tighter spacing and no side padding */
    padding: 15px 10px;
    background: #ece2ff;
    border-radius: 22px;
    /* span full width of parent */
    width: 100%;
    box-sizing: border-box;
}
#inputSection .input-row textarea,
#inputSection .input-row .editable-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: #0f0072;
    outline: none;
    /* height controlled for single-line look */
    min-height: 44px;
    max-height: 80px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
#inputSection .input-row textarea::placeholder {
    color: #beb8d4;
}
/* Placeholder for contenteditable div */
.editable-input:empty:before {
    content: attr(data-placeholder);
    color: #beb8d4;
    pointer-events: none;
}
#inputSection .controls-row {
    display: flex;
    align-items: center;
    gap: 17px;
    /* use full width inside input-row */
    width: 100%;
}
#inputSection .controls-row {
    display: flex;
    align-items: center;
    gap: 17px;
}
/* Faded interim speech text */
.faded {
    opacity: 0.6;
}
/* Fade interim STT (speech-to-text) text while speech is in progress */
#inputSection .input-row textarea.stt-active {
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
}
#inputSection .send-btn {
    /* slightly smaller tap area on mobile */
    /* slightly smaller touch target to align edges closer to screen */
    width: 36px;
    height: 36px;
    border: none;
    cursor: pointer;
    border-radius: 16px;
    background: linear-gradient(145deg, #6b4cff, #8253ff);
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
#inputSection .send-btn svg {
    /* smaller icon size for mobile-friendly UI */
    fill: #fff;
    width: 20px;
    height: 20px;
    transform: none;
}
#inputSection .media-card {
    display: flex;
    gap: 8px; /* space between icon and label */
    align-items: center;
    padding: 8px 12px;
    background: transparent;
    border-radius: 8px;
    box-shadow: none;
    border: none;
    cursor: pointer;
    margin: 0;
}
#inputSection .media-card svg {
    width: 24px;
    height: 24px;
    fill: #6b4cff;
}
#inputSection .media-card span {
    color: #0f0072;
    font-weight: 600; /* bold label */
    font-size: 1rem;  /* slightly larger */
}
#inputSection .actions {
    display: flex;
    gap: 18px;
    flex-wrap: nowrap;
}
#inputSection .btn {
    flex: 1 1 0;
    height: 60px;
    font-size: 1.15rem;
    -webkit-tap-highlight-color: transparent;
    font-weight: 600;
    border: none;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}
#inputSection .btn svg {
    width: 24px;
    height: 24px;
}
#inputSection .btn-speak {
    background: #ece2ff;
    color: #0f0072;
}
#inputSection .btn-speak svg {
    fill: #0f0072;
}
#inputSection .btn-stop {
    background: #ffefef;
    color: #b80c42;
}
#inputSection .btn-stop svg {
    fill: #b80c42;
}
@media (max-width: 340px) {
    #inputSection .card {
        padding: 28px 22px 36px;
    }
    #inputSection .btn {
        height: 54px;
        font-size: 1.05rem;
    }
    #inputSection .send-btn {
        width: 56px;
        height: 48px;
    }
}

/* ===== Floating action bar for input and play/pause buttons ===== */
.action-bar {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 1000;
}
#inputBtn {
    position: static !important;
    transform: none !important;
}

/* ==== Inspired by new Story UI theme ==== */
body {
    background-color: #f2e7fb;
    font-family: 'Georgia', serif;
}

.container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

#chatContainer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.user-message {
    background-color: #f9f3fd;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 600;
    color: #2e1f59;
    font-size: 16px;
    align-self: flex-start;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    max-width: 100%;
}

/* Accent color for input/play buttons */

/* ==== Inspired Theme from New Design ==== */
body {
    background-color: #f2e7fb;
    font-family: 'Georgia', serif;
}

/* Re-theme user messages */
.user-message {
    background-color: #f9f3fd;
    border-radius: 20px;
    padding: 12px 20px;
    font-weight: 600;
    color: #2e1f59;
    font-size: 16px;
    align-self: flex-start;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    max-width: 100%;
}

/* Accent color for controls */




/* Privacy Policy link fixed at the very bottom center */
#privacyPolicyLink {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
    left: 0;
    width: 100%;
    text-align: left;  /* changed from center to left */
    padding-left: 16px;
    z-index: 900;
    pointer-events: none; /* allow buttons above to remain clickable */
}
#privacyPolicyLink a {
    display: inline-block;
    font-size: 11px;
    color: #8b7ebc;
    opacity: 0.8;
    text-decoration: underline;
    background: rgba(255,255,255,0.45);
    border-radius: 8px;
    margin: 0 auto 5px auto;
    padding: 3px 14px 3px 14px;
    pointer-events: auto;
    transition: background 0.15s;
}
#privacyPolicyLink a:hover {
    background: #ede7f6;
    opacity: 1;
}

/* =========================
   Cropper Modal Fullscreen
   ========================= */
#cropperModal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  background-color: rgba(0,0,0,0.8);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#cropperModal .modal-dialog {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#cropperModal .modal-body {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#cropperModal .modal-body img {
  max-width: 100%;
  max-height: calc(100vh - 80px);
}
#cropperModal .modal-footer {
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 12px 0;
  width: 100%;
}
#cropperModal .modal-footer .btn {
  padding: 10px 22px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}
#cropperModal .modal-footer .btn:hover {
  transform: translateY(-1px);
}
#cropperModal .modal-footer .btn-cancel {
  background: var(--muted-bg);
  color: #555;
}
#cropperModal .modal-footer .btn-cancel:hover {
  background: var(--muted-hover);
}
#cropperModal .modal-footer .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
}
#cropperModal .modal-footer .btn-primary:hover {
  background: linear-gradient(135deg, #5a3ae6, #794af2);
}
/* ===================================================
   Hide everything except cropper when in cropping mode
   =================================================== */
body.cropping #loadingOverlay,
body.cropping #mainContainer,
body.cropping #prevBtn,
body.cropping #nextBtn,
body.cropping .action-bar,
body.cropping #playPauseBtn,
body.cropping #usernameModal,
body.cropping #ErrorModal,
body.cropping #sheetBackdrop,
body.cropping #inputSection,
body.cropping #offlineOverlay,
body.cropping #privacyPolicyLink {
  display: none !important;
}