.error-page{display:flex;align-items:center;justify-content:center;height:100vh;background-color:#f8f9fa;color:#333}.error-container{text-align:center;max-width:600px;background:#fff;padding:2rem;border-radius:10px;box-shadow:0 4px 6px #0000001a}.error-code{font-size:6rem;font-weight:700;color:#dc3545;margin:0}.error-message{font-size:1.5rem;margin:1rem 0}.error-details{margin:1rem 0;color:#555}.error-icon{font-size:3rem;color:#dc3545;margin-bottom:1rem}body{font-family:Arial,sans-serif;margin:0;padding:20px;background-color:#f0f0f0}a{color:#0862f9;text-decoration:none}a:hover{text-decoration:underline}input,button{padding:10px;margin:5px 0;border:1px solid #ddd;border-radius:5px}button{padding:12px 20px;border-radius:20px;background-color:#0862f9;color:#fff;border:none;cursor:pointer;font-size:14px;transition:background-color .2s ease}button:hover{background-color:#0056b3}.container{max-width:600px;margin:0 auto;background-color:#fff;border-radius:8px;box-shadow:0 0 10px #0000001a;padding:20px;height:78.5vh;display:flex;flex-direction:column}.chat-container{max-width:800px;margin:0 auto;background-color:#fff;border-radius:10px;box-shadow:0 2px 10px #0000000d;overflow:hidden;height:83vh;display:flex;flex-direction:column}.chat-list-item{display:flex;flex-direction:column;padding:8px 0;transition:opacity .2s ease}.chat-list-subject{font-weight:600;font-size:16px;color:#000;text-decoration:none;display:flex;justify-content:space-between;align-items:center;word-break:break-all;overflow-wrap:break-word}.chat-list-subject:hover{text-decoration:underline}.chat-list-last-message{font-size:12px;color:#777;margin-top:4px;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.chat-list-last-message-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:10px}.chat-list-last-message span{flex-shrink:0;white-space:nowrap}.unread-mark{display:inline-block;width:10px;height:10px;background-color:#ff4500;border-radius:50%;margin-left:5px;flex-shrink:0}.chat-divider{height:1px;background-color:#e0e0e0;margin:8px 0;opacity:.6}.empty-message{font-size:14px;color:#666;text-align:center;padding:20px 0}.chat-actions{display:flex;justify-content:space-between;align-items:center}.logout-link{color:#0862f9;text-decoration:none;font-size:14px}.logout-link:hover{text-decoration:underline}#chatList{flex:1;overflow-y:auto;padding-right:8px}#chatList::-webkit-scrollbar{width:8px}#chatList::-webkit-scrollbar-thumb{background-color:#0003;border-radius:4px}#chatList::-webkit-scrollbar-thumb:hover{background:#555}.chat-header{padding:15px 20px;background-color:#f8f9fa;color:#333;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e0e0;position:sticky;top:0;z-index:1}.chat-header h2{margin:0;font-size:18px;font-weight:600;max-width:70%;word-break:break-all;overflow-wrap:break-word}.chat-header a{color:#0862f9;font-size:14px;text-decoration:none}.chat-header a:hover{text-decoration:underline}.chat-header.editing .header-actions{display:none}.chat-messages{flex-grow:1;height:auto;overflow-y:auto;padding:20px;background-color:#fafafa}.chat-input{display:flex;padding:10px 20px;background-color:#fff;border-top:1px solid #e0e0e0;position:sticky;bottom:0;z-index:1}.chat-input input{flex-grow:1;padding:12px 16px;border:1px solid #ddd;border-radius:20px;outline:none;margin-right:10px;font-size:14px}.chat-input button{padding:12px 20px;border-radius:20px;background-color:#0862f9;color:#fff;border:none;cursor:pointer;font-size:14px;transition:background-color .2s ease}.chat-input button:hover{background-color:#0056b3}.edit-subject-container{display:flex;align-items:center;gap:10px}.edit-subject-input{padding:8px 12px;border:1px solid #ddd;border-radius:5px;font-size:16px;outline:none;width:170px}.edit-subject-button{padding:8px 16px;border-radius:5px;border:none;cursor:pointer;font-size:14px;transition:background-color .2s ease}.change-button{background-color:#218838;color:#fff}.change-button:hover{background-color:#218838}.cancel-button{background-color:#dc3545;color:#fff}.cancel-button:hover{background-color:#c82333}.chat-container{position:relative;max-width:800px;margin:0 auto;background-color:#fff;border-radius:10px;box-shadow:0 2px 10px #0000000d;overflow:hidden;height:83vh;display:flex;flex-direction:column}.header-actions{display:flex;align-items:center;gap:15px}.hamburger-icon,.hamburger-icon:hover{background:none;border:none;font-size:20px;cursor:pointer;padding:0;color:#0862f9;transition:color .2s ease}.user-list-sidebar{position:absolute;top:0;right:-300px;width:250px;height:100%;background-color:#fff;box-shadow:none;padding:20px;transition:right .3s ease;z-index:1000;display:flex;flex-direction:column}.user-list-sidebar.active{right:0;box-shadow:-2px 0 10px #0000001a}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.user-list-sidebar h3{margin:0;font-size:16px;font-weight:600;color:#333}.user-list-sidebar li{padding:10px 0;font-size:14px;color:#666;border-bottom:1px solid #e0e0e0}.user-list-sidebar li:last-child{border-bottom:none}.user-list-sidebar ul{max-height:auto;overflow-y:auto;overflow-x:hidden;padding:0;margin:0;list-style:none}.user-list-sidebar ul::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.user-list-sidebar ul::-webkit-scrollbar-thumb:hover{background:#555}.user-count{font-size:.9em;color:#666}.message{margin:12px 0;display:inline-block;max-width:70%;word-wrap:break-word;clear:both}.sender-name{font-size:12px;color:#666;margin-bottom:4px;font-weight:500;display:block}.message-bubble{padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.4;display:inline-block;word-break:break-word;overflow-wrap:break-word}.sent .message-bubble{background-color:#0862f9;color:#fff;border-bottom-right-radius:4px;float:right;margin-bottom:2px}.sent .message-link{color:#fff;text-decoration:underline}.sent{float:right}.received .message-bubble{background-color:#e9ecef;color:#333;border-bottom-left-radius:4px}.received .message-link{color:#333;text-decoration:underline}.received{float:left}.message-time{font-size:10px;color:#999;margin-top:4px;text-align:right;opacity:.8;display:block;clear:both}.sent .message-time{text-align:right}.received .message-time{text-align:left}.message-content{font-size:14px;line-height:1.4}.system-message{margin:12px auto;max-width:90%;text-align:center;float:none;clear:both;font-size:13px}.system-message-bubble{background-color:#f0f0f0;color:#888;font-size:12px;padding:10px 20px;border-radius:12px;display:inline-block;word-break:break-all;overflow-wrap:break-word;max-width:100%}.system-message-time{font-size:10px;color:#999;text-align:center;margin-top:4px}#userSearch{width:calc(100% - 100px);padding:12px 16px;border-radius:20px;border:1px solid #ddd;outline:none;margin-right:10px;font-size:14px}.search-bar{display:flex;gap:10px;margin-bottom:20px}#userResults{flex:1;overflow-y:auto;padding-right:5px}#userResults::-webkit-scrollbar-thumb{background:#888;border-radius:4px}#userResults::-webkit-scrollbar-thumb:hover{background:#555}.user-result-item{display:flex;flex-direction:column;padding:3px 0}.user-name{font-weight:600;font-size:16px;color:#000;display:flex;justify-content:space-between;align-items:center}.user-action{font-size:14px;color:#777;margin-top:4px;display:flex;justify-content:space-between;align-items:center;padding:0 20px 0 0}.chat-link{color:#3b83fa;text-decoration:none;font-size:16px;padding:0 20px 0 0}.chat-link:hover{text-decoration:none}.user-divider{height:1px;background-color:#e0e0e0;margin:8px 0;opacity:.6}.login-container{max-width:600px;margin:0 auto;background-color:#fff;border-radius:8px;box-shadow:0 0 10px #0000001a;padding:20px;display:flex;flex-direction:column}.login-form{display:flex;flex-direction:column;gap:15px;align-items:center;width:100%}.login-form input{width:100%;max-width:300px;padding:12px 20px;margin:5px 0;border:1px solid #ddd;border-radius:20px;box-sizing:border-box}.login-form button{width:100%;max-width:300px;padding:12px 20px;border-radius:20px;background-color:#0862f9;color:#fff;border:none;cursor:pointer;font-size:14px;transition:background-color .2s ease;box-sizing:border-box}.kakao-login-btn img,.google-login-btn img{width:200px;height:auto;cursor:pointer}.sign-up-container{max-width:600px;margin:0 auto;background-color:#fff;border-radius:8px;box-shadow:0 0 10px #0000001a;padding:20px;display:flex;flex-direction:column}.signup-form{display:flex;flex-direction:column;gap:15px;align-items:center;width:100%}.email-section{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}.signup-form input{width:100%;max-width:300px;padding:10px;margin:5px 0;border:1px solid #ddd;border-radius:5px;box-sizing:border-box}.verification-btn{padding:12px 20px;border-radius:20px;background-color:#fff;color:#0862f9;border:2px solid #0862f9;cursor:pointer;font-size:14px;transition:background-color .2s ease;width:100%;max-width:300px;box-sizing:border-box}.verification-btn:hover{background-color:#f0f4ff}.signup-form button:not(.verification-btn){width:100%;max-width:300px;padding:12px 20px;border-radius:20px;background-color:#0862f9;color:#fff;border:none;cursor:pointer;font-size:14px;transition:background-color .2s ease;box-sizing:border-box}.verification-status{font-size:12px;margin:5px 0 0;text-align:center;color:#777}.verification-status.success{color:#28a745}.verification-status.error{color:#dc3545}.loading{text-align:center;padding:10px;color:#888;font-style:italic;font-size:12px}.welcome-text{font-size:16px;color:#666;margin-bottom:20px;text-align:center}.signup-prompt{font-size:14px;color:#666;margin-top:10px}.signup-prompt a{color:#0862f9;text-decoration:none}.signup-prompt a:hover{text-decoration:underline}.footer{color:gray;font-size:11px;font-family:Arial,sans-serif;text-align:center;width:100%}.small{color:gray;font-size:12px;font-family:Arial,sans-serif;margin-top:0;text-align:end}.white-btn{padding:12px 20px;border-radius:20px;background-color:#fff;color:#0862f9;border:2px solid #0862f9;cursor:pointer;font-size:14px;transition:background-color .2s ease;width:100%;box-sizing:border-box}.white-btn:hover{background-color:#f0f4ff}.call-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:999;display:flex;justify-content:center;align-items:center}.incoming-call,.in-call{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#fff,#f8fafc);border-radius:16px;padding:24px;box-shadow:0 8px 24px #00000026;z-index:1000;width:90%;max-width:360px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.call-header{text-align:center;margin-bottom:24px}.call-header h3{font-size:16px;color:#64748b;margin:0 0 8px}.call-header h2{font-size:24px;color:#1e293b;margin:0;font-weight:600}.call-actions{display:flex;justify-content:center;gap:16px}.call-button{display:flex;align-items:center;gap:8px;padding:12px 24px;border:none;border-radius:12px;font-size:16px;font-weight:500;cursor:pointer;transition:transform .2s,background-color .2s}.call-button:hover{transform:translateY(-2px)}.accept-button{background:#22c55e;color:#fff}.accept-button:hover{background:#16a34a}.reject-button{background:#ef4444;color:#fff}.reject-button:hover{background:#dc2626}.hangup-button{background:#f1f5f9;color:#ef4444}.hangup-button:hover{background:#e2e8f0}.icon{width:20px;height:20px}.status-indicator{display:flex;align-items:center;justify-content:center;margin-top:12px;font-size:14px;color:#64748b}.status-indicator.connected,.status-indicator.completed{color:#22c55e}.connecting{display:flex;align-items:center}.dots{display:inline-flex;margin-left:4px}.dots span{animation:blink 1.4s infinite both}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}@media (max-width: 400px){.incoming-call,.in-call{padding:16px;max-width:300px}button{padding:10px 16px;font-size:14px}}