body{
    font-family:Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
    overflow:hidden;
    font-size:12px;
    width:100vw;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

:root{
    --indicator-position:0%;
    --timeline-height:100px;
}

.container{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100vh;
    padding:20px;
    box-sizing:border-box;
    width:80vw;
    min-width:800px;
    max-width:1600px;
}

.input-area{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

@keyframes timelineShadow{
    0%{
        box-shadow:0 0 0 rgba(0, 0, 0, 0);
    }
    100%{
        box-shadow:0 5px 10px rgba(0, 0, 0, 0.100);
    }
}

@keyframes transcriptShadow{
    0%{
        box-shadow:inset 0 0 0 rgba(0, 0, 0, 0);
    }
    100%{
        box-shadow:inset 0 2px 5px rgba(0, 0, 0, 0.100);
    }
}

@keyframes wipe{
    0%{
        left:0;
    }
    100%{
        left:var(--indicator-position);
    }
}

.timeline-container{
    position:relative;
    background-color:white;
    overflow:hidden;
    cursor:text;
    height:var(--timeline-height);
    border:solid 0.5px black;
    animation:timelineShadow 1s cubic-bezier(.78,0,.2,1) forwards;
    animation-delay:3s;
    margin-bottom:20px;
    transition:height 1s cubic-bezier(.78,0,.2,1);
    /* border-radius:5px; */
}

.time-indicator{
    position:absolute;
    height:100%;
    width:0.5px;
    background-color:black;
    top:0;
    z-index:10;
    animation:wipe 2s cubic-bezier(.78,0,.2,1) forwards;
    animation-delay:0.5s;
}

.time-label{
    position:absolute;
    top:10px;
    color:#666;
    transform:translateX(10px);
    animation:wipe 2s cubic-bezier(.78,0,.2,1) forwards;
    animation-delay:0.5s;
}

.character{
    position:absolute;
    font-size:12px;
    transform:translateY(-50%);
    transition:top 1s cubic-bezier(.78,0,.2,1);
    animation:appear 0.5s cubic-bezier(.25,0,.2,1) forwards;
}

@keyframes appear{
    0%{
        opacity:0%;
    }
    100%{
        opacity:100%;
    }
}

.tick{
    position:absolute;
    height:100%;
    width:1px;
    background-color:rgba(0, 0, 0, 0.100);
    bottom:0%;
    z-index:5;
}

.debug-panel{
    position:fixed;
    bottom:10px;
    right:10px;
}

.clear-button{
    background-color:#f4f4f4;
    border:solid 1px #ddd;
    cursor:pointer;
    margin-bottom:5px;
}

.back-button{
    background-color:#f4f4f4;
    border:solid 1px #ddd;
    cursor:pointer;
}

@keyframes open{
    0%{
        height:0;
        padding:0px;
        background-color:transparent;
        border:solid 0px #ddd;
    }
    100%{
        height:40vh;
        padding:10px;
        background-color:#f9f9f9;
        border:solid 0.5px #ddd;
    }
}

.transcript-container{
    position:relative;
    overflow:auto;
    white-space:pre-wrap;
    flex-grow:0;
    height:0;
    word-break:break-all;
    margin-bottom:10px;
    font-size:12px;
    font-family:monospace;
    animation:open 1s cubic-bezier(.78,0,.2,1) forwards, transcriptShadow 1s cubic-bezier(.78,0,.2,1) forwards;
    animation-delay:3s;
    /* border-radius:5px; */
}

.transcript-line{
    margin-bottom:5px;
    min-height:16px;
    line-height:1.5;
    word-wrap:break-word;
}

.user-count{
    color:#999;
    font-style:italic;
}

.room-info{
    position:fixed;
    top:10px;
    left:10px;
    font-size:14px;
    background-color:rgba(255, 255, 255, 0.8);
    padding:5px 10px;
    border-radius:3px;
}

/*room selection*/

.room-selection{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:300px;
}

.room-button-wrapper{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:10px;
    height:200px;
}

.room-button{
    padding:0 10px;
    background-color:white;
    border:solid 0.5px black;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 5px 0px rgba(0, 0, 0, 0);
    transition:all 0.5s cubic-bezier(.28,0,.16,1);
    flex-basis:0;
    flex-grow:1;
}

.room-button:hover{
    box-shadow:0 5px 10px rgba(0, 0, 0, 0.100);
    background-color:#ebebeb;
    flex-grow:3;
}

.room-button.full{
    background-color:#ebebeb;
    color:#999;
    cursor:not-allowed;
}

.error-message{
    margin-top:10px;
}

.capacity{
    font-family:monospace;
    color:grey;
}