/* ADJUSTED PROVIDED STYLES - Cleaner look with existing palette */
:root {
    --primary-color: #4361ee; /* Keep primary blue */
    --secondary-color: #3a0ca3; /* Keep secondary purple */
    --accent-color: #f72585; /* Keep accent pink */
    --background-color: #f8f9fa; /* Keep light background */
    --card-bg: #ffffff; /* Keep white cards */
    --text-color: #2b2d42; /* Keep dark text */
    --light-text: #6c757d;
    --success-color: #28a745; /* Standard green */
    --border-radius: 8px; /* Slightly smaller radius */
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Less intense shadow */
    --transition: all 0.2s ease-in-out; /* Faster transition */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color); /* Use flat background color */
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

h1 {
    color: var(--primary-color);
    text-align: center;
    margin: 0 0 30px 0; /* Adjusted margin */
    font-size: 2.2rem; /* Slightly smaller title */
    font-weight: 700;
    position: relative;
    max-width: 90%;
}

h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px; /* Shorter underline */
    height: 3px; /* Thinner underline */
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
}

/* ADAPTED LAYOUT AND STYLES */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 800px; /* Slightly narrower container */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    box-shadow: none;
    overflow: visible;
    background-color: transparent;
}

header {
    display: flex;
    flex-direction: column; /* Stack header content vertically */
    align-items: flex-start;
    padding: 15px 20px;
    background-color: var(--primary-color);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Lighter border */
    gap: 15px;
    margin-bottom: 20px;
    border-radius: var(--border-radius); /* Rounded corners for the entire header */
    overflow: hidden;
    box-shadow: var(--shadow);
    flex-shrink: 0; /* Prevent header from shrinking */
}

/* Style for the timer controls and status within the header */
.header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Take full width in header */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 10px;
}


.timer-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 0; /* Remove extra margin */
}

.timer {
    font-size: 1.6em; /* Slightly smaller timer font */
    font-weight: bold;
    min-width: 90px; /* Adjusted width */
    text-align: center;
    transition: color 0.3s ease;
    color: white;
}

.timer.finished {
    color: var(--accent-color);
    animation: pulseTimer 1s infinite;
}

@keyframes pulseTimer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}


/* Styles for ALL buttons */
button { /* Apply to all buttons */
    padding: 8px 15px;
    font-size: 0.95em;
    cursor: pointer;
    border: none;
    border-radius: 4px; /* General button radius */
    color: white;
    background-color: var(--secondary-color);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

button:hover:not(:disabled) {
    background-color: #3a0ca3; /* Use secondary color hover */
}

button:disabled {
     background-color: #cccccc;
     cursor: not-allowed;
     opacity: 0.7;
}


/* Specific styles overrides for key buttons */
#startPauseTimer {
     background-color: var(--success-color);
}
#startPauseTimer:hover:not(:disabled) {
     background-color: #218838; /* Darker success */
}
#startPauseTimer.active {
    background-color: var(--accent-color);
}
#startPauseTimer.active:hover:not(:disabled) {
    background-color: #e85a75; /* Darker accent */
}


#toggleTimerMode {
    background-color: var(--accent-color);
    color: white;
}
#toggleTimerMode:hover:not(:disabled) {
     background-color: #e85a75;
}


#countdownInputGroup {
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
}

#countdownDuration {
    width: 50px;
    padding: 3px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: white;
    color: var(--text-color);
}


/* Microphone status styles */
.status {
    display: flex;
    align-items: center;
    font-size: 1em; /* Slightly smaller status font */
    color: rgba(255, 255, 255, 0.9); /* Brighter status text */
    margin-left: auto;
}

.status i {
    margin-right: 6px; /* Reduced margin */
    font-size: 1.2em; /* Slightly smaller icon */
    transition: color 0.3s ease;
}

.status.active i {
     color: var(--success-color);
     /* Added pulse animation for active microphone icon */
     animation: pulseIcon 1.5s infinite;
}

@keyframes pulseIcon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.status.error i {
    color: #dc3545;
}


main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0; /* Removed horizontal padding from main */
    gap: 20px;
    min-height: 0; /* Added to ensure main shrinks correctly */
    height: 0; /* Added to help main calculate flex space */
}

/* Ensure timeline section behaves correctly in flex layout */
.timeline-section {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* Ensure it shrinks correctly in flex container */
    height: 0; /* Added to help timeline section calculate flex space */
}

.note-input-section {
     padding: 20px;
     display: flex;
     flex-direction: column;
     border-left: none;
     flex-shrink: 0;
     margin-top: 20px; /* Add space above input section */
}


.card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: 1px solid #e0e0e0; /* Add a subtle border to cards */
}


h2 {
    margin-top: 0;
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.5em; /* Slightly smaller H2 */
}

.timeline-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.timeline-filters input[type="text"],
.timeline-filters select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--text-color);
    background-color: var(--background-color);
}

#timelineSearchInput {
    flex-grow: 1;
}


/* Ensure the event timeline area itself scrolls */
.event-timeline {
    flex-grow: 1;
    overflow-y: auto; /* This ensures the scrollbar */
    min-height: 0; /* Ensure it shrinks correctly within flex container */
    height: 0; /* Added to help event timeline calculate flex space */
    padding: 15px;
    border: 1px solid #eee;
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    cursor: text;
    line-height: 1.6;
    color: var(--text-color);
    margin-top: 0;
    box-sizing: border-box;
}

.timeline-item {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
    word-wrap: break-word;
    cursor: text;
    transition: opacity 0.3s ease;
}

.timeline-item.hidden {
    display: none;
}


.timeline-item:last-child {
     border-bottom: none;
     padding-bottom: 0;
}

.timeline-item strong { /* Timestamp */
    margin-right: 8px;
    color: var(--secondary-color);
    font-weight: 600;
}

/* Styles for the type label (written or voice) */
.timeline-item .item-type-label {
    font-size: 0.9em;
    margin-left: 5px; /* Space after timestamp */
    margin-right: 8px; /* Space after label */
    font-weight: bold;
    color: var(--primary-color); /* Default label color */
}

/* Specific color for written note label */
.timeline-item.written-note .item-type-label {
     color: var(--accent-color); /* Accent color for written notes */
}

/* Specific color for voice note label */
.timeline-item.voicenote .item-type-label {
     color: var(--primary-color); /* Primary color for voice notes */
}


[contenteditable="true"]:focus {
    outline: none;
    background-color: #eef;
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(67, 97, 238, 0.5);
}


/* Style for the combined input bar */
.note-voice-input-bar {
    display: flex;
    align-items: flex-end; /* Align items to the bottom */
    gap: 10px;
    margin-top: auto; /* Push to bottom of section */
    padding-top: 15px; /* Space above bar */
    border-top: 1px solid #eee; /* Separator above bar */
}

#noteInput {
    flex-grow: 1; /* Allow textarea to take most space */
    padding: 12px; /* Increased padding */
    border: 1px solid #ccc;
    border-radius: var(--border-radius); /* Use general card radius */
    font-size: 1em;
    resize: vertical;
    min-height: 80px;
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Style for Add Note button (now smaller and round) */
#addNoteButton {
     background-color: var(--success-color);
     padding: 10px; /* Equal padding for roundness */
     font-size: 1.2em; /* Adjust icon size */
     border-radius: 50%; /* Make it round */
     aspect-ratio: 1 / 1; /* Keep it a circle */
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0; /* Prevent from shrinking */
     align-self: flex-end; /* Align to the bottom */
}
#addNoteButton:hover:not(:disabled) {
    background-color: #218838;
}


/* Style for the Push-to-Talk button (now round) */
#pushToTalkButton {
    background-color: var(--primary-color);
    font-size: 1.5em;
    padding: 10px; /* Equal padding for roundness */
    width: auto;
    border-radius: 50%; /* Make it round */
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    align-self: flex-end;
}
#pushToTalkButton:hover:not(:disabled) {
    background-color: var(--secondary-color); /* Use secondary color hover */
}
#pushToTalkButton.active {
    background-color: var(--accent-color);
    animation: pulseButton 1.5s infinite;
}
#pushToTalkButton.active:hover:not(:disabled) {
    background-color: #e85a75;
}


@keyframes pulseButton {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}


/* Interim transcription styles */
.interim-transcription {
    color: var(--light-text);
    font-style: italic;
    margin-top: 10px;
    min-height: 1.5em;
    word-wrap: break-word;
    padding: 0 15px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}


footer {
    padding: 20px;
    text-align: center;
    color: var(--light-text);
    font-size: 0.9rem; /* Slightly smaller footer text */
    width: 100%;
    background-color: var(--card-bg);
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    flex-shrink: 0; /* Prevent footer from shrinking */
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-top: 20px;
}

.export-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-text {
    font-size: 1em; /* Reset to inherited size */
    color: var(--light-text);
}

footer a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

footer a:hover {
    color: var(--accent-color);
}

.heart {
    color: var(--accent-color);
    display: inline-block;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    header {
         flex-direction: column;
         align-items: flex-start;
         gap: 15px;
         padding: 15px;
    }
    .header-controls {
         flex-direction: column;
         align-items: flex-start;
         gap: 15px;
    }


    main {
        flex-direction: column;
        padding: 0 15px;
        gap: 15px;
        min-height: 0; /* Ensure main shrinks correctly */
        height: auto; /* Allow height to be determined by content + flex-grow */
    }

    .timeline-section {
         flex: none; /* Remove flex-grow on small screens, rely on min-height */
         width: 100%;
         margin-bottom: 0;
         min-height: 150px; /* Ensure a minimum height on small screens */
         height: auto; /* Allow height to be determined by min-height */
    }

     .event-timeline {
         flex-grow: 0; /* Remove flex-grow on small screens if timeline-section has fixed height */
         min-height: 0; /* Keep min-height 0 */
         height: 100%; /* Ensure it fills the timeline-section height */
     }


    .timer-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-top: 0;
    }

    .status {
         align-self: flex-end;
         margin-left: 0;
    }

    .timeline-section,
    .note-input-section {
        padding: 15px;
    }

    .timeline-filters {
        flex-direction: column;
        gap: 8px;
    }

    /* Adjust the input bar to stack vertically on small screens */
    .note-voice-input-bar {
         flex-direction: column;
         gap: 10px;
         padding-top: 10px;
    }

     #noteInput {
          flex-grow: 1;
          min-height: 60px;
          width: 100%; /* Take full width */
     }

     #addNoteButton {
          align-self: stretch; /* Stretch to full width */
          border-radius: 4px; /* Back to square button on small screens */
          padding: 8px 15px; /* Adjust padding */
          font-size: 0.95em;
     }

     #pushToTalkButton {
          align-self: center; /* Center the round button */
          font-size: 1.5em;
          padding: 10px; /* Keep padding for roundness */
     }


     .export-controls {
         flex-direction: column;
         gap: 8px;
     }

     .export-controls button {
         justify-content: center;
     }


     .interim-transcription {
         margin-top: 10px;
         padding-top: 10px;
     }

     footer {
          padding: 15px;
          margin-top: 15px;
     }
}

@media (max-width: 480px) {
     h1 {
         font-size: 2rem;
         margin-bottom: 20px;
     }
     .timer {
         font-size: 1.5em;
     }
     .timer-controls button,
     .export-controls button,
     #addNoteButton {
         font-size: 0.85em;
         padding: 6px 12px;
     }
      #addNoteButton {
           padding: 8px; /* Adjust padding for roundness */
           font-size: 1em;
      }


      .status {
          font-size: 0.9em; /* Smaller status font */
      }
      .status i {
          font-size: 1.1em;
      }

      #noteInput {
         min-height: 50px;
         padding: 10px;
         font-size: 0.9em;
     }

      .event-timeline {
         font-size: 0.9em;
         padding: 10px;
         min-height: 100px; /* Ensure a minimum height */
      }

      .timeline-item {
          margin-bottom: 8px;
          padding-bottom: 6px;
      }
       .timeline-item strong {
            font-size: 1em;
            margin-right: 5px;
       }
        .timeline-item .item-type-label {
             font-size: 0.8em;
             margin-left: 3px;
             margin-right: 5px;
        }


       .timeline-filters input[type="text"],
        .timeline-filters select {
             font-size: 0.85em;
             padding: 6px;
        }

     #pushToTalkButton {
          font-size: 1.2em;
          padding: 8px;
     }
     .interim-transcription {
         font-size: 0.9em;
         padding: 0 10px;
     }

     footer {
          padding: 10px;
          margin-top: 15px;
     }
      .export-controls button {
           font-size: 0.85em;
           padding: 6px 10px;
      }
      footer .footer-text {
           font-size: 0.8em;
      }
}