/* /public/style.css - 全新整合版 (修正聊天佈局) */
/* 通用樣式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "sans-serif";
    margin: 0;
    background-color: #f4f7f9;
    color: #333;
}
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    background-color: #fff;
}
.chat-header {
    background: linear-gradient(135deg, #007BFF, #0056b3);
    color: white;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
    font-size: 1.2em;
    flex-shrink: 0;
}
.messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.message {
    display: flex;
    margin-bottom: 15px;
    max-width: 80%;
    align-items: flex-end;
}
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}
.message-content {
    display: flex;
    flex-direction: column;
}
.message .bubble {
    padding: 12px 18px;
    border-radius: 20px;
    line-height: 1.5;
    word-wrap: break-word;
}

/* 預設佈局 (客戶端視角): 客戶在右，客服在左 */
.message.customer { align-self: flex-end; flex-direction: row-reverse; }
.message.customer .avatar { margin-right: 0; margin-left: 10px; }
.message.customer .message-content { align-items: flex-end; }
.message.customer .bubble {
    background-color: #007bff; /* 自己的訊息使用藍色 */
    color: white;
    border-bottom-right-radius: 5px;
}
.message.agent { align-self: flex-start; }
.message.agent .message-content { align-items: flex-start; }
.message.agent .bubble {
    background-color: #e9e9eb; /* 對方的訊息使用灰色 */
    color: #333;
    border-bottom-left-radius: 5px;
}
.message.auto { align-self: center; width: 100%; justify-content: center; }
.message.auto .bubble { background-color: #f1f1f1; color: #666; font-style: italic; text-align: center; }
.timestamp {
    font-size: 0.75em;
    color: #999;
    margin-top: 5px;
    padding: 0 5px;
}
.message.customer .timestamp { align-self: flex-end; }
.chat-image {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 5px;
    cursor: pointer;
    display: block;
}
.typing-indicator {
    padding: 0px 20px;
    font-style: italic;
    color: #999;
    height: 24px;
    transition: opacity 0.3s;
    flex-shrink: 0;
}
.typing-indicator span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #999;
    margin: 0 1px;
    animation: typing-blink 1.4s infinite both;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-blink {
    0% { opacity: 0.2; }
    20% { opacity: 1; }
    100% { opacity: 0.2; }
}
.input-area {
    display: flex;
    padding: 10px 15px;
    border-top: 1px solid #ddd;
    background-color: #fcfcfc;
    flex-shrink: 0;
    align-items: flex-end;
}
.input-area textarea {
    flex-grow: 1;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s;
    resize: none;
    line-height: 1.5;
    font-family: inherit;
    max-height: 120px;
    min-height: 24px;
    overflow-y: auto;
}
.input-area textarea:focus { border-color: #007bff; }
.input-area button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 1.5em;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.input-area button:hover { background-color: #0056b3; }
.dashboard-container{display:flex;height:100vh}.conversation-list{width:320px;flex-shrink:0;background-color:#2c3e50;color:#fff;display:flex;flex-direction:column}.conversation-list h2{padding:20px;margin:0;background-color:rgba(0,0,0,.2);font-size:1.2em;flex-shrink:0}.conversation-list ul{list-style:none;padding:0;margin:0;overflow-y:auto;flex-grow:1}.conversation-list li{padding:15px 20px;border-bottom:1px solid #34495e;cursor:pointer;transition:background-color .3s;position:relative}.conversation-list li.active,.conversation-list li:hover{background-color:#3498db}.conversation-list .ip-info{font-size:.8em;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread-dot{background-color:#e74c3c;width:10px;height:10px;border-radius:50%;position:absolute;right:20px;top:50%;transform:translateY(-50%)}.chat-view{flex-grow:1;display:flex;flex-direction:column;background:#fff}
.chat-view .chat-header{background:#fff;color:#333;text-align:left;border-bottom:1px solid #eee; padding: 10px 20px; flex-shrink: 0; }
.chat-view .chat-header .customer-details { font-size: 0.8em; color: #555; word-break: break-all; }
.chat-view .chat-header .customer-details p { margin: 4px 0; line-height: 1.4;}
.chat-view .chat-header .customer-details b { color: #000; }
.placeholder{display:flex;justify-content:center;align-items:center;height:100%;color:#999;font-size:1.5em}.login-body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f4f7f9}.login-panel{padding:40px;background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.1);width:320px;text-align:center}.login-panel h1{color:#333;margin-bottom:30px}.login-panel input{width:100%;padding:12px;margin-bottom:20px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}.login-panel button{width:100%;padding:12px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1em}.error-message{color:#d9534f;margin-bottom:15px}
.paste-preview-container { padding: 0 15px 5px 15px; background-color: #fcfcfc; }
.preview-item { position: relative; display: inline-block; margin-top: 5px; }
.preview-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; }
.preview-item .remove-preview { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; background-color: #333; color: white; border-radius: 50%; border: none; cursor: pointer; font-size: 12px; line-height: 20px; text-align: center; font-weight: bold; }

/* 佈局修正：確保客服後台聊天視窗的輸入框固定在底部 */
#active-chat-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.chat-view .messages {
    flex-grow: 1;
    overflow-y: auto;
}

/* --- 全新！針對客服後台的聊天佈局覆寫規則 --- */
/* 在客服後台，將「自己的訊息(agent)」改到右邊 */
.dashboard-container .message.agent {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.dashboard-container .message.agent .avatar {
    margin-right: 0;
    margin-left: 10px;
}
.dashboard-container .message.agent .message-content {
    align-items: flex-end;
}
/* 客服自己的訊息也使用藍色 */
.dashboard-container .message.agent .bubble {
    background-color: #007bff;
    color: white;
    border-bottom-left-radius: 20px;  /* 恢復預設圓角 */
    border-bottom-right-radius: 5px; /* 設定尖角 */
}

/* 在客服後台，將「對方的訊息(customer)」改到左邊 */
.dashboard-container .message.customer {
    align-self: flex-start;
    flex-direction: row; /* 恢復預設排列 */
}
.dashboard-container .message.customer .message-content {
    align-items: flex-start;
}
/* 客戶的訊息使用灰色 */
.dashboard-container .message.customer .bubble {
    background-color: #e9e9eb;
    color: #333;
    border-bottom-right-radius: 20px; /* 恢復預設圓角 */
    border-bottom-left-radius: 5px;   /* 設定尖角 */
}