/* In-House chat bubble (chat_dialog.html opened with frontend=In-House-Chat): same clean look as /fe-chat/
   (chat_clean.css). Scoped to body.fc-inhouse, which the page sets only for In-House, so the public website
   chat widget keeps its own look. Only looks change here. */

body.fc-inhouse {
    --fc-bg: #f4f6f9;
    --fc-panel: #ffffff;
    --fc-line: #e5e7eb;
    --fc-text: #1f2937;
    --fc-muted: #6b7280;
    --fc-accent: #0052cc;
    --fc-accent-soft: #e8f0fe;
    --fc-mine: #dce9ff;
    --fc-theirs: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    background: var(--fc-bg);
}
body.fc-inhouse .user-content h3,
body.fc-inhouse .user-content p,
body.fc-inhouse .mail-content p { font-family: inherit; }

/* Light chat area instead of the navy picture background */
body.fc-inhouse .chatbox,
body.fc-inhouse .chatbox .msg-head,
body.fc-inhouse .chatbox .modal-body,
body.fc-inhouse .chatbox .modal-content { background: var(--fc-bg); }
body.fc-inhouse .chatbox .send-box { background: var(--fc-panel); }
body.fc-inhouse .chatbox { border-left: none; }

/* Header */
body.fc-inhouse .chat-header {
    background: var(--fc-panel);
    border-bottom: 1px solid var(--fc-line);
}
body.fc-inhouse .user-content h3 { color: var(--fc-text); font-size: 17px; font-weight: 600; }

/* Team picker ("What are you seeking help related to?") */
body.fc-inhouse .mail-content p { color: var(--fc-muted); font-size: 14px; }
body.fc-inhouse .group-select-btn {
    height: auto;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--fc-text);
    background: var(--fc-panel);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
body.fc-inhouse .group-select-btn:hover {
    color: var(--fc-accent);
    background: var(--fc-accent-soft);
    border-color: var(--fc-accent);
}
body.fc-inhouse .group-select-btn i { margin-top: 0; top: 50%; transform: translateY(-50%); }

/* Messages */
body.fc-inhouse .msg-body ul li { margin: 10px 0; }
body.fc-inhouse .msg-body ul li .message-div,
body.fc-inhouse .msg-body ul li.others-msg .message-div,
body.fc-inhouse .msg-body ul li.my-msg .message-div {
    font-size: 14px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
body.fc-inhouse .msg-body ul li.others-msg .message-div {
    background: var(--fc-theirs);
    color: var(--fc-text);
    border: 1px solid var(--fc-line);
    border-bottom-left-radius: 4px;
}
body.fc-inhouse .msg-body ul li.my-msg .message-div {
    background: var(--fc-mine);
    color: var(--fc-text);
    border-bottom-right-radius: 4px;
}
body.fc-inhouse .message-div p:last-child { margin-bottom: 0; }
body.fc-inhouse .sender-name { color: var(--fc-accent); font-size: 12px; font-weight: 600; line-height: 20px; }
body.fc-inhouse .msg-body .time { color: var(--fc-muted); font-size: 11px; margin-top: 3px; }
body.fc-inhouse .msg-body ul li.my-msg .time { text-align: right; }

body.fc-inhouse .information-text {
    width: auto;
    max-width: 85%;
    margin: 12px auto;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--fc-line);
    border-radius: 999px;
    color: var(--fc-muted) !important;
    font-size: 12px;
}
body.fc-inhouse .information-text .time { display: none; }
body.fc-inhouse .information-text .text-div,
body.fc-inhouse .information-text .text-div p { margin: 0; }

/* "Loading more" / "Load old messages" and End Chat: small and quiet */
body.fc-inhouse .load-more,
body.fc-inhouse #load_more_history {
    background: var(--fc-panel) !important;
    color: var(--fc-muted) !important;
    border: 1px solid var(--fc-line);
    border-radius: 999px;
    font-size: 12px !important;
    padding: 3px 12px;
    margin: 6px auto;
    width: auto;
    display: table;
}
body.fc-inhouse .end-session-div { background: var(--fc-bg); padding: 4px 0; }
body.fc-inhouse .end-session-btn {
    background: var(--fc-panel);
    color: #b42318;
    border: 1px solid var(--fc-line);
    border-radius: 999px;
    font-size: 12px;
    padding: 3px 12px;
    margin-bottom: 0;
}
body.fc-inhouse .end-session-btn:hover { background: #fef3f2; color: #b42318; border-color: #fda29b; }

/* Message box */
body.fc-inhouse .inner-chatboat-area .send-box { border-top: 1px solid var(--fc-line) !important; }
body.fc-inhouse .cke_chrome { border: none !important; box-shadow: none !important; border-radius: 0 !important; }
body.fc-inhouse #send_message_button i { color: var(--fc-accent) !important; }
body.fc-inhouse .send-box button.attach { color: var(--fc-muted); }

/* Hover buttons (reply_forward.css) sit on the light background now */
body.fc-inhouse .msg-tools { border-color: var(--fc-line); }