body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f0f2f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; color: #333;}
#app { background: white; padding: 2.5rem 3.5rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); text-align: center; max-width: 800px; width: 90%;}
h1 { color: #1c1e21; margin-bottom: 0.5rem; }
p { color: #606770; font-size: 0.9rem; }
input[type="password"], input[type="text"] { width: calc(100% - 24px); padding: 12px; margin: 1rem 0; box-sizing: border-box; border: 1px solid #dddfe2; border-radius: 6px; font-size: 1rem; }
button { background: #1877f2; color: white; border: none; padding: 12px 20px; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: bold; width: calc(100% - 24px); transition: background-color 0.2s; }
button:hover { background: #166fe5; }
#drop-zone {
    border: 2px dashed #ccd0d5;
    border-radius: 8px;
    padding: 30px; /* 調整 padding */
    margin-top: 2rem;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex; /* 啟用 Flexbox */
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 水平置中 */
    min-height: 150px; /* 最小高度 */
    gap: 20px; /* 左右兩邊的間距 */
}
#drop-zone.dragover { background-color: #e7f3ff; border-color: #1877f2; }

.drop-zone-left {
    flex: 1; /* 左側佔據可用空間 */
    text-align: center;
}

.drop-zone-right {
    flex: 1; /* 右側佔據可用空間 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px; /* 確保有足夠空間顯示縮圖 */
}

#thumbnail-container {
    max-width: 100%;
    max-height: 150px; /* 限制縮圖高度 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#thumbnail-container img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 4px;
    object-fit: contain; /* 保持圖片比例 */
}

#result { margin-top: 1.5rem; position: relative; }
#copy-button { position: absolute; right: 8px; top: 35px; width: auto; font-size: 0.8rem; padding: 6px 10px; }

/* 訊息顯示區塊樣式 */
#message-display {
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    /* 添加 height, padding, margin 的過渡 */
    transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out, padding 0.3s ease-in-out, margin 0.3s ease-in-out;
}

.message-hidden {
    opacity: 0;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}

.message-info {
    background-color: #e0f7fa;
    color: #00796b;
    border: 1px solid #00796b;
}

.message-success {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #2e7d32;
}

.message-error {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #c62828;
}