/* ===== 수신 전화 (js/phone.js) ===== */

/* 수신 알림: 단추로만 닫히고, 테두리가 깜빡여 소리 없이도 눈에 띈다 */
.toast.toast-phone { border-left: 4px solid #2a9d6f; }
.toast-phone .toast-app { font-size: 11px; color: #2a9d6f; font-weight: 700; margin-bottom: 2px; }
.toast-phone .toast-from { font-size: 13px; font-weight: 700; }
.toast-phone .toast-text { font-size: 12px; }
.toast-phone.is-ringing { animation: toast-in 220ms ease-out, phone-ring 1.2s ease-in-out 220ms infinite; }
.toast-phone.is-ringing .toast-icon svg { animation: phone-shake 1.2s ease-in-out infinite; }
.toast-actions { display: flex; gap: 8px; margin-top: 8px; }
.toast-act { flex: 1 1 0; padding: 6px 0; border: 1px solid var(--btn-border); border-radius: 6px; background: var(--btn-bg); color: var(--btn-fg); font-size: 12.5px; cursor: pointer; }
.toast-act:hover { background: var(--btn-bg-hover); }
.toast-act.is-primary { background: #2a9d6f; border-color: #2a9d6f; color: #fff; font-weight: 700; }
.toast-act.is-primary:hover { background: #23855e; }

@keyframes phone-ring {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(42, 157, 111, 0.55); }
  50% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 6px rgba(42, 157, 111, 0); }
}
@keyframes phone-shake {
  0%, 40%, 100% { transform: rotate(0); }
  5%, 15%, 25% { transform: rotate(-12deg); }
  10%, 20%, 30% { transform: rotate(12deg); }
}

/* 작업 표시줄: 울리는 중 / 통화 중 */
.tb-pin.is-ringing svg { animation: phone-shake 1.2s ease-in-out infinite; }
.tb-pin.is-ringing, .tb-pin.is-oncall { position: relative; }
.tb-pin.is-ringing::after, .tb-pin.is-oncall::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #2a9d6f;
}
.tb-pin.is-ringing::after { animation: phone-blink 0.8s steps(2, start) infinite; }
@keyframes phone-blink { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .toast-phone.is-ringing, .toast-phone.is-ringing .toast-icon svg, .tb-pin.is-ringing svg, .tb-pin.is-ringing::after { animation: none; }
  .toast-phone.is-ringing { box-shadow: 0 0 0 3px rgba(42, 157, 111, 0.6); }
}

/* 통화 창 */
.win--call .win-body { background: #f4f6f8; }
.call { display: flex; flex-direction: column; height: 100%; font-size: 13.5px; color: #1f2d3d; }
.call-head { flex: 0 0 auto; padding: 14px 16px 12px; background: #fff; border-bottom: 1px solid #e1e5ea; }
.call-dir { font-size: 11.5px; color: #2a9d6f; font-weight: 700; }
.call-who { font-size: 15px; font-weight: 700; margin-top: 2px; }
.call-sub { font-size: 12.5px; color: #5a6878; margin-top: 1px; }
.call-sub.is-unknown { color: #b5452f; font-weight: 600; }
.call-log { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.call-line { display: flex; flex-direction: column; max-width: 86%; }
.call-line-who { font-size: 11px; color: #7a8796; margin-bottom: 2px; }
.call-line-text { padding: 8px 11px; border-radius: 10px; background: #fff; border: 1px solid #e1e5ea; line-height: 1.5; white-space: pre-wrap; }
.call-line.is-me { align-self: flex-end; align-items: flex-end; }
.call-line.is-me .call-line-text { background: #dff3ea; border-color: #bfe3d2; }
.call-typing { display: flex; gap: 4px; padding: 10px 12px; align-self: flex-start; }
.call-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9aa7b4; animation: call-dot 1s infinite ease-in-out; }
.call-typing span:nth-child(2) { animation-delay: 0.15s; }
.call-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes call-dot { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.call-choices { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 0 14px; }
.call-choices:not(:empty) { padding: 10px 14px; border-top: 1px solid #e1e5ea; background: #fff; }
.call-choice { text-align: left; padding: 9px 12px; border: 1px solid #c9d3dc; border-radius: 8px; background: #fff; color: #1f2d3d; font-size: 13px; cursor: pointer; line-height: 1.45; }
.call-choice:hover { border-color: #2a9d6f; background: #f0faf5; }
.call-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-top: 1px solid #e1e5ea; background: #fafbfc; }
.call-note { font-size: 11.5px; color: #6b7886; }
.call-btns { display: flex; gap: 6px; flex: none; }
.call-btns button, .ph-actions button, .ph-sound { padding: 5px 12px; border: 1px solid var(--btn-border); border-radius: 6px; background: var(--btn-bg); color: var(--btn-fg); font-size: 12px; cursor: pointer; }
.call-btns button:hover, .ph-actions button:hover, .ph-sound:hover { background: var(--btn-bg-hover); }

/* 통화 이력 창 */
.win--phone .win-body { background: #fff; }
.ph { display: flex; flex-direction: column; height: 100%; font-size: 13px; color: #1f2d3d; }
.ph-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #e1e5ea; background: #f7f9fb; }
.ph-title { font-weight: 700; }
.ph-sound.is-on { border-color: #2a9d6f; color: #1d7a55; }
.ph-main { flex: 1 1 auto; display: flex; min-height: 0; }
.ph-list { flex: 0 0 280px; overflow-y: auto; border-right: 1px solid #e1e5ea; }
.ph-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: none; border-bottom: 1px solid #eef1f4; background: #fff; text-align: left; cursor: pointer; color: inherit; }
.ph-item:hover { background: #f5f8fa; }
.ph-item.is-sel { background: #e8f5ef; }
.ph-item-mark { flex: none; width: 18px; text-align: center; color: #2a9d6f; font-weight: 700; }
.ph-item.is-missed .ph-item-mark, .ph-item.is-missed .ph-item-who { color: #c0392b; }
.ph-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ph-item-who { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-item-sub { font-size: 11.5px; color: #6b7886; }
.ph-item-time { flex: none; font-size: 11px; color: #7a8796; text-align: right; }
.ph-empty { padding: 24px 12px; color: #7a8796; text-align: center; }
.ph-detail { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; background: #f4f6f8; }
.ph-detail .call-head { border-bottom: 1px solid #e1e5ea; }
.ph-when { font-size: 11.5px; color: #7a8796; margin-top: 4px; }
.ph-msg { padding: 18px 16px; color: #4a5a6a; }
.ph-replay { flex: 0 0 auto; overflow: visible; }
.ph-note { padding: 4px 16px 12px; font-size: 11.5px; color: #7a8796; }
.ph-actions { padding: 0 16px 16px; }
.ph-actions button.is-primary { background: #2a9d6f; border-color: #2a9d6f; color: #fff; font-weight: 700; }

@media (max-width: 720px) {
  .ph-main { flex-direction: column; }
  .ph-list { flex: 0 0 auto; max-height: 40%; border-right: none; border-bottom: 1px solid #e1e5ea; }
}