/* =========================================================
   chat.css: the robot chat buddy
   A round robot button in the corner, and the chat window.
   ========================================================= */

.chat-button {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--card);
    box-shadow: 0 10px 28px rgba(40, 30, 20, 0.25);
    cursor: pointer;
    transition: transform 0.2s;
}
.chat-button:hover { transform: translateY(-3px); }

.chat {
    position: fixed;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    z-index: 21;
    display: flex;
    flex-direction: column;
    width: min(370px, calc(100vw - 32px));
    height: min(520px, calc(100vh - 200px));
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(40, 30, 20, 0.3);
}

.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}
.chat-head div { display: grid; flex: 1; }
.chat-head b { font-family: var(--font-display); }
.chat-head small { font-size: 12px; color: var(--muted); }

.chat-close {
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}

.chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    overflow-y: auto;
}

.msg {
    max-width: 85%;
    padding: 10px 13px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-line;        /* keeps line breaks in the answers */
    overflow-wrap: anywhere;
}
.msg-bot { align-self: flex-start; background: var(--bg); }
.msg-me  { align-self: flex-end; background: var(--coral); color: #FFFFFF; }

.msg .open-notebook {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.chat-suggestions {
    display: flex;
    gap: 6px;
    padding: 0 14px 10px;
    overflow-x: auto;
}
.chat-suggestions button {
    flex: none;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.chat-form {
    display: flex;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--line);
}
.chat-form input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--field);
    color: var(--text);
    font: inherit;
    font-size: 16px;
}
.chat-form input:focus { outline: none; border-color: var(--coral); }
.chat-form .btn { padding: 10px 16px; }

/* phones: sit above the tab bar */
@media (max-width: 759px) {
    .chat-button { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .chat { bottom: calc(146px + env(safe-area-inset-bottom, 0px)); height: min(480px, calc(100vh - 230px)); }
}