/* ... (Previous CSS) ... */

/* Device Mockups */
.mockup-container {
    position: absolute;
    right: 0; bottom: 0;
    width: 800px; height: 100%;
    pointer-events: none;
}

/* Phone */
.mockup-phone {
    position: absolute;
    right: 120px; bottom: 60px;
    width: 280px; height: 560px;
    background: #fff;
    border: 8px solid #1a1a1a;
    border-radius: 36px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.15);
    z-index: 20;
    overflow: hidden;
    transform: translateY(20px);
    animation: floatPhone 6s ease-in-out infinite;
}

.phone-screen {
    width: 100%; height: 100%;
    background: #f2f2f2;
    position: relative;
}

.chat-app-header {
    height: 60px; background: #fff; border-bottom: 1px solid #eee;
    display: flex; align-items: center; justify-content: center; font-weight: bold;
}

.chat-bubbles { padding: 20px 15px; display: flex; flex-direction: column; gap: 15px; }
.bubble { padding: 10px 14px; border-radius: 12px; font-size: 13px; max-width: 80%; opacity: 0; animation: popIn 0.5s forwards; }
.bubble-l { background: #fff; align-self: flex-start; border-top-left-radius: 2px; }
.bubble-r { background: #95ec69; align-self: flex-end; border-top-right-radius: 2px; }

.keyboard-area {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: #e0e0e0; padding: 8px 4px 20px;
}
.key-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 6px; }
.key-btn {
    width: 24px; height: 36px; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    transition: background 0.1s;
}
.key-btn.active { background: #ccc; }

/* PC */
.mockup-pc {
    position: absolute;
    right: 280px; bottom: 0;
    width: 600px; height: 420px;
    background: #fff;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    z-index: 10;
    overflow: hidden;
}

.pc-window { width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; }
.pc-header {
    height: 30px; background: #f0f0f0; border-bottom: 1px solid #ddd;
    display: flex; align-items: center; padding: 0 10px; gap: 6px;
}
.win-dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; }
.win-dot.r { background: #ff5f57; } .win-dot.y { background: #febc2e; } .win-dot.g { background: #28c840; }

.pc-content { padding: 40px; }
.doc-line { height: 12px; background: #f0f0f0; margin-bottom: 15px; border-radius: 2px; width: 100%; }
.doc-line.short { width: 60%; }

.input-bar-pc {
    position: absolute; top: 150px; left: 80px;
    background: #fff; border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    padding: 10px; border: 1px solid #eee;
    animation: typeMove 4s infinite;
}
.candidate-list { display: flex; gap: 15px; font-size: 16px; }
.cand-item span { color: #999; font-size: 12px; margin-right: 4px; }
.cand-item.sel { color: var(--sa-orange); font-weight: bold; }

/* Animations */
@keyframes floatPhone { 0%,100%{transform:translateY(20px)} 50%{transform:translateY(10px)} }
@keyframes popIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes typeMove { 0%{left:80px} 50%{left:120px} 100%{left:80px} }