/* Position the buttons for animation */
#askButton {
    position: relative;
    z-index: 1;
}

.hidden-btn {
    position: absolute;
    top: -50px; /* Position above the main button */
    left: 20px;
    opacity: 0;
    transform: translateY(20px); /* Start below final position */
    pointer-events: none;
}

.hidden-btn.show {
    opacity: 1;
    transform: translateY(0); /* Move up to final position */
    pointer-events: auto;
}

#researcherButton {
    transition-delay: 0.2s; /* Delay for the second button */
}
#researcherButton:hover {
    background: #384365;
}

#sabuButton {
    transition-delay: 0.1s; /* Delay for the first button */
    top: -94px; /* Position the first button higher */
}
#sabuButton:hover {
    background: #384365;
}





.btn-transition {
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.parent-div {
    display: flex;
    flex-direction: column; /* 세로 방향으로 배치 */
    height: 100%; /* 뷰포트 높이의 100%를 사용하거나 원하는 고정 높이 */
}

/* 동적으로 높이를 계산하는 첫 번째 div */
.first-child {
    flex: 0 0 auto; /* grow:0, shrink:0, basis:auto */
    /* 내용에 따라 자연스러운 높이를 가지고, 늘어나거나 줄어들지 않음 */
}

/* 나머지 높이를 차지하는 두 번째 div */
.second-child {
    flex: 1; /* 남은 공간(높이)을 모두 차지 */
    overflow-y: auto; /* 내용이 넘칠 경우 스크롤 표시 */
}

.memo-container {
    /* position: absolute; 제거 */
    /* top: 0px; 제거 */
    /* left: 50%; 제거 */
    /* transform: translateX(-50%); 제거 */
    width: 100%;
    height: 100%; /* 이 값은 유지 */
    background-color: rgba(30, 30, 30, 0.85);
    border-radius: 8px;
    border: 1.5px solid #333333;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.memo-input-wrapper {
    display: flex;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px;
    border-bottom: 1px solid #333;
}

.memo-textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 16px;
    padding: 5px 10px;
    outline: none;
    resize: none;
    min-height: 200px;
    max-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: #555 #222;
}

.memo-textarea::placeholder {
    color: #aaaaaa;
}

.memo-textarea::-webkit-scrollbar {
    width: 5px;
}

.memo-textarea::-webkit-scrollbar-track {
    background: #222;
}

.memo-textarea::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

.memo-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 10px;
    position: absolute;
    width: calc(100% - 20px);
    bottom: 0;
}

.char-count {
    font-size: 12px;
    color: #888;
}

.memo-buttons {
    display: flex;
    gap: 8px;
}

.add-button, .save-button {
    width: 60px;
    height: 36px;
    border-radius: 17px;
    border: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0.9;
    transition: all 0.2s ease;
}

.add-button {
    background-color: #2962ff;
}

.save-button {
    background-color: #00b074;
}

.add-button:hover, .save-button:hover {
    opacity: 1;
    transform: scale(1.05);
}

.icon {
    font-size: 14px;
    font-weight: bold;
}

.saved-message {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 176, 116, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.saved-message.show {
    opacity: 1;
}

/* 반응형 디자인 추가 */
@media (max-width: 768px) { /* sm 크기 기준 */
    @media (max-width: 768px) {
        .memo-container {
            position: fixed; /* 모바일에서는 fixed 유지 */
            /* 다른 스타일들... */
        }
    }

    .memo-button-mobile {
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #2962ff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        z-index: 999;
    }

    .memo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        background-color: #222;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        cursor: move; /* 드래그 가능 표시 */
    }

    .memo-close {
        width: 24px;
        height: 24px;
        background-color: #444;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        cursor: pointer;
    }
}

@media (min-width: 769px) {
    .memo-button-mobile {
        display: none; /* 데스크톱에서는 모바일 버튼 숨김 */
    }

    .memo-header {
        display: none; /* 데스크톱에서는 헤더 숨김 */
    }
}

.dark-memo .note-area {
    background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
    border-radius: 5px;
    height: 100%;
    margin: 15px;
    margin-top: 0px;
    color: #c0c0c0;
    overflow-y: auto;
    position: relative;
    font-family: 'Arial', sans-serif;
}

.dark-memo .lined-note-input {
    background-color: transparent;
    background-image: linear-gradient(transparent 29px, #666 30px);
    background-size: 100% 30px;
    line-height: 30px;
    border: none;
    border-radius: 0px !important;
    color: #c0c0c0;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    resize: none;
    outline: none;
    font-size: 14px;
}

.dark-memo .lined-note-input::placeholder {
    color: #888888;
}