#app-container {
    display: none; 
    flex-direction: column; 
    height: 100%;
    max-width: 900px; 
    margin: 0 auto; 
    padding: 20px;
}

/* --- HEADER --- */
.header-row { 
    display: flex; 
    justify-content: space-between;
    align-items: center;
    min-height: 40px; 
    flex-shrink: 0; 
    margin-bottom: 10px; 
    flex-wrap: wrap; 
    gap: 10px;
}
.header-left { display: flex; gap: 10px; align-items: center; }

/* --- HISTORY BOX --- */
#history-box {
    flex: 1 1 0; 
    background: var(--box-bg);
    border-radius: 20px; 
    box-shadow: 0 10px 30px var(--shadow-color);
    padding: 25px 15px; 
    overflow-y: auto;
    display: flex; 
    flex-direction: column; 
    margin-bottom: 10px;
    min-height: 0; 
}

/* --- STATUS AREA --- */
#status-area { 
    height: 30px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    margin-bottom: 5px; 
    flex-shrink: 0; 
}
#status-text { 
    color: var(--text-main); font-weight: 500; font-size: 1rem; opacity: 0; 
    transition: opacity 0.5s ease; text-shadow: 0 2px 4px var(--shadow-color); 
}
#status-text.visible { opacity: 1; }

/* --- WORKSPACE (STRICT ROW) --- */
#workspace {
    display: flex;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;   
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    flex-shrink: 0;
    padding-bottom: 10px;
}

/* LEFT: Prompt Area */
#prompt-area {
    flex: 1 1 auto; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    justify-content: center;
    text-align: right;
    min-width: 0; 
}

/* RIGHT: Interaction Area */
#interaction-area {
    flex: 0 0 35%; 
    max-width: 250px; 
    min-width: 120px; 
    display: flex; 
    justify-content: flex-start;
    align-items: center; 
}

#input-wrapper { width: 100% !important; height: 60px; }

#prompt-hanzi { 
    font-size: 3rem; font-weight: 800; color: var(--text-main); 
    text-shadow: 0 2px 10px var(--shadow-color); line-height: 1.1; 
    cursor: pointer; transition: opacity 0.2s; white-space: nowrap; 
}
#prompt-hanzi:hover { opacity: 0.8; }

#prompt-english { 
    font-size: 1rem; color: var(--text-dim); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

#prompt-hint { 
    color: var(--text-dim); font-size: 0.8rem; margin-bottom: 2px; opacity: 0.7; font-family: monospace; 
}
.new-tag { 
    background: var(--accent-color); color: white; font-size: 0.7rem; 
    padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: bold; 
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 600px) {
    #app-container { padding: 10px; }
    #history-box { padding: 15px; margin-bottom: 5px; }
    #status-area { height: 20px; font-size: 0.9rem; }
    #workspace { gap: 10px; }

    #prompt-hanzi { font-size: 2.2rem; }
    #prompt-english { font-size: 0.9rem; }
    
    #input-wrapper { height: 50px; }
    
    /* CHANGED: Explicitly smaller font for mobile input */
    #command-input { font-size: 1rem !important; padding: 0 10px !important; }
}

@media (max-height: 350px) {
    .header-row { display: none; }
    #history-box { display: none; }
    #input-wrapper { height: 45px; }
}