@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.app-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Default 1 columns */
    min-height: 300px;
    gap: 1.2rem;
}

.tts-col, .stt-col {
    display: flex;
    flex-direction: column;
    margin: 0.9rem 0.3rem;
    border-radius: 10px;
    background-color: #28648C; /* rgb(180, 212, 232);*/
}

.tts-col {overflow: visible !important; margin-bottom: 2rem;}

@media (min-width: 768px) {
  .app-wrapper {
    grid-template-columns: 1fr 1fr; /* Desktop: 2 columns */
  }
  .tts-col .stt-col { border-bottom: none; border-right: 1px solid #ddd; }
}

/****= 2. =====VOLUME, RATE====& SELECT ==========*****/

.tts-settings {
    background-color: rgb(180, 212, 232);
    display: flex;
    flex-direction: column;
    gap: 2px; /*line height*/
    padding: 1px;
    width: 96%;
    margin: 0 auto;
    border-radius: 4px;
}

/* 4-Column Grid for ALL screen sizes */
.control-group {
    display: grid;
    grid-template-columns: 10% 14% 71% 5%;
    align-items: center;
    width: 100%;
}

/* "Unwrap" label so icon and text occupy separate grid cells */
.control-group label {
    display: contents;
}

/* Column 1: Icon */
.control-group label i {
    grid-column: 1;
    justify-self: center;
    font-size: 20px; 
}

.control-group label { 
    font-size: 14px;
    padding-right: 5px;
}

/* Column 3: Slider or Select */
.slider-container {
    grid-column: 3;
    display: flex;
    align-items: center;
    padding-right: 8px;
}

/* Column 4: Value Badge */
.value-badge {
    grid-column: 4;
    justify-self: start;
    font-size: 12px;
    color: var(--accent);
    white-space: nowrap; 
    margin-left: 10px;
}

input[type="range"], 
.voice-select-dropdown {
    width: 100%;
    cursor: pointer;
    border-radius: 6px;
}

/*------set sliders thin------*/
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #2563eb 0%,
    
    #e5e7eb 100%
  );
  outline: none;
  cursor: pointer;
}

/* Thumb (Chrome / Safari) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* Thumb (Firefox) */
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  border: none;
}



/****   Copy, Paste ....buttons */
  .toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background: #f8f9fa;
            padding: 2px 12px;
            border: 1px solid #ccc;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            white-space: nowrap;
            /*overflow-x: auto;*/
            position: relative;
            overflow: visible !important;
            z-index: 11;
            margin-left: 0.5rem;
            margin-right: 0.5rem;
        }

        .icon-group {
            display: none; /*flex;*/
            gap: 4px;
            align-items: center;
            border-left: 1px solid #ddd;
            padding-left: 10px;
        }
        
        .icon-group.show{
        	display: flex;
        	animation: fadeIn 0.3s ease;
        }

		@keyframes fadeIn {
            from { opacity: 0; transform: translateX(10px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .tooltip-wrapper {
            position: relative;
            display: inline-block;
        }

        .tooltip-wrapper::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%) scale(0);
            background-color: #333;
            color: #fff;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            transition: all 0.2s ease;
            pointer-events: none;
            z-index: 100;
        }

        .tooltip-wrapper::before {
            content: "";
            position: absolute;
            bottom: 110%;
            left: 50%;
            transform: translateX(-50%) scale(0);
            border-width: 5px;
            border-style: solid;
            border-color: #333 transparent transparent transparent;
            opacity: 0;
            transition: all 0.2s ease;
            z-index: 9999 !important;
        }

        .tooltip-wrapper:hover::after, 
        .tooltip-wrapper:hover::before,
        .tooltip-wrapper:active::after,
        .tooltip-wrapper:focus-within::after,
        .tooltip-wrapper.mobile-show::after, 
        .tooltip-wrapper.mobile-show::before {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }

        .material-icons { font-size: 22px; vertical-align: middle; }
        
        .icon-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        
        .icon-btn:hover { background: #e9ecef; }

        /* Responsive: Stack columns on mobile */
        @media (max-width: 768px) {
            .app-wrapper { grid-template-columns: 1fr; }
        }
        

/** ======== Listen, Pause, Resume ... buttons**/
    .playback-controls {
        display: flex;
        align-items: center;
        
        gap: 12px;
        background: #ffffff;
        padding: 15px;
        border: 1px solid #ccc;
        border-top: 1px dashed #eee; /* Visual separator from sliders */
        border-radius: 0 0 12px 12px;
        flex-wrap: nowrap; /* Helps on small mobile screens */
        width: 96%;
        margin: 0 0.5rem 1rem 0.5rem;
    }

    /* Base button style */
    .playback-controls button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: none;
        border-radius: 8px;
        padding: 10px 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
    }

    /* Primary Listen Button */
    .btn-play {
        background-color: #007bff;
        color: white;
        flex-basis: 35%; 
        box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
    }
    .btn-play:hover { background-color: #0056b3; transform: translateY(-1px); }

    /* Control Group (Pause, Resume, Stop) */
    .playback-group {
        flex-basis: 50%;
        display: flex;
        gap: 5px;
        background: #f1f3f5;
        padding: 4px;
        border-radius: 10px;
    }

    .btn-ctrl {
    background: transparent;
    color: #495057;
    padding: 8px !important;
    }
    .btn-ctrl:hover { background: #e9ecef; color: #007bff; }

    .btn-stop:hover { color: #dc3545 !important; }

    /* Clear Button */
    .btn-clear {
    flex-basis: 15%;
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6 !important;
    }
    .btn-clear:hover { 
    background-color: #fff5f5; 
    color: #dc3545; 
    border-color: #ffc9c9 !important; 
    }

    /* Mobile Tweak */
    @media (max-width: 480px) {
    .playback-controls { justify-content: center; }
    .btn-play { width: 100%; order: -1; } /* Play button on top for mobile */
    }

    /*ADDED this*/
    .playback-controls button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none; /* important for icons */
        box-shadow: none;
        transform: none;
    }
    .playback-controls button:disabled i {
        pointer-events: none;
    }
    /*Recommend for ListenBtn, PauseBtn ...*/
    .btn-play:disabled {
        background-color: #a5c8ff;
    }

    .btn-ctrl:disabled {
        background: transparent;
        color: #adb5bd;
    }

    .btn-clear:disabled {
        background-color: #f1f3f5;
        color: #adb5bd;
        border-color: #e9ecef;
    }






    /* =============STT part ======================*/
.stt-card{
    max-width: 99%;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-family: sans-serif;
}

.stt-card h2::before { /*for DOT*/
  content: "";
  display: inline-block;
  
  width: 16px; 
  height: 16px;
  background-color: currentColor; 
  border-radius: 50%;             
  margin-right: 15px;             /* Space between dot and text */
  flex-shrink: 0;                 /* Prevents dot from shrinking on small screens */
}
.status{
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 20px;
    background-color: #E5E7EB;
    color: #374151;
}
.status.listerning{
    background-color: #DCFCE7;
    color: #166534;
    animation: pulse 2s infinite;
}
@keyframes pulse{
    0% {opacity: 1;} 50% {opacity: 0.5;} 100% {opacity: 1;}
}

#sttArea, #ttsText{
    width: 97%;
    height: 220px;
    padding: 8px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 1rem;
    
    margin: 0.5rem;
    
}
.stt-actions{
    display: flex;
    gap: 1rem;
    align-items: center;
    background: #fff;
    padding:20px 10px;
    border-radius: 10px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 1rem;
    border: none;
    
}
.stt-actions button {
    padding: 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}
.sbtn-start {flex-grow: 2; background-color: #007bff;/* #2563EB;*/ color: white;}
.sbtn-stop {flex-grow: 0; padding-left: 40px; padding-right: 40px; flex-basis: auto; background-color: #d44f4f; color: white;}
.sbtn-clear {flex-grow: 2; background-color: #F3F4F6; color: #374151;}

button:disabled {background-color: #E5E7EB; color: #9CA3AF; cursor: not-allowed;}

.instruction{
    background-color: #f8f9fa;
    margin: 0.5rem;
    padding: 0.3rem;
}
.stt-error-box{
    margin-top: 15px;
    margin-top: 15px;
    padding: 10px;
    background: #FEE2E2;
    color: #B91C1C;
    font-size: 0.9rem;
    font-style: italic;
}