/* One font stack, used everywhere.
 *
 * Inconsolata is the brand face and covers Latin and Cyrillic. It has no
 * Devanagari, no Arabic and no CJK at all, so a Hindi, Arabic or Chinese page
 * set in it renders as a row of boxes - which is how an untranslated-looking
 * page is actually a font problem.
 *
 * The fallbacks are SYSTEM fonts rather than more webfonts: Noto covers these
 * scripts on Android and most Linux, PingFang and Hiragino on Apple, Microsoft
 * YaHei and Nirmala on Windows. Shipping webfonts for three more scripts would
 * add megabytes to a page whose whole point is that it loads inside somebody
 * else's site.
 */
:root {
  --chboco-font: 'Inconsolata', ui-monospace, 'Noto Sans Devanagari', 'Nirmala UI',
    'Noto Sans Arabic', 'Geeza Pro', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans',
    'Microsoft YaHei', monospace;
}

html {
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #F8F8F8;
    font-family: var(--chboco-font);
}

/* Header */
.chat-header {
    flex-shrink: 0;
    background-color: #000000;
    color: #ffffff;
    padding: 0;
    text-align: center;
    align-content: center;
    margin: 0px;
}

.chat-header h1 {
    margin: 0;
    padding: 0;
    font-size: 32px;
    line-height: 70px;
}

/* Main container */
.chat-window {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-image:
    linear-gradient(to bottom, black 50%, transparent 50%),
    linear-gradient(to bottom, black 50%, transparent 50%);
    background-repeat: repeat-y;
    background-size: 1px 20px; /* 2px width and 20px total unit height */
    background-position: left, right;
}

/* Chat container */
.chat-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: #F8F8F8;
    margin: 0px 60px;
    padding: 0px;
    overflow: hidden;
    font-size: 22px;
}

.message-list {
    flex-grow: 1; /* Takes up all available space pushing the buttons down */
    overflow-y: auto; /* Allows scrolling of messages only */
    margin: 0px;
    padding: 0px;
    margin-bottom: 15px;
}

.message-list::-webkit-scrollbar {
    display: none;
}

.message-list {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Chat bubbles */
.chat-bubble {
    display: block;
    max-width: 40%; /* Maximum width to prevent the bubble from stretching too far */
    width: fit-content; /* This makes the width to be as per the content size */
    padding: 0; /* Padding around the text inside the bubble */
    margin-top: 15px;
    margin-bottom: 10px; /* Keeps the same spacing at the bottom */
    background-color: inherit;
    font-family: var(--chboco-font);
    font-size: 22px;
    word-wrap: break-word; /* Ensures text wraps within the bubble */
    word-break: break-word; /* To prevent overflow of long unbroken text */
}

/* Align sent messages to the right */
.message-sent {
    /* Logical, not left/right: with dir=rtl the sender's own messages
       have to move to the other side, and `margin-left` would pin them. */
    margin-inline-start: auto;
    margin-inline-end: 0;
    text-align: end;
}

/* Align received messages to the left */
.message-received {
    margin-inline-end: auto;
    margin-inline-start: 0;
}

.message-time {
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 16px;
    font-family: var(--chboco-font);
}

.message-received .message-time {
    text-align: start;
}

.message-sent .message-time {
    text-align: end;
}

/* A separator BETWEEN messages, so it is a list item like the messages it
   separates - it used to be a bare <div> inside the <ul>, which is markup a
   screen reader has no name for. `display: block` is what stops a list marker
   appearing next to a 1px line. */
.divider {
    display: block;
    list-style: none;
    height: 1px;          /* Line thickness */
    background-color: #000000;  /* Line color */
    margin-inline: 2px;
}

/* ---------------------------------------------------------------------------
   Inside a bubble.

   Two modes. The visitor's own words are a text node in `pre-wrap`: what they
   typed, laid out how they typed it. The bot's are HTML rendered from markdown
   on the server (markdown.rs), where `pre-wrap` would be wrong - the newlines
   BETWEEN the block elements would each render as a blank line, which is
   exactly the bug this stylesheet used to have one level up.
   --------------------------------------------------------------------------- */
.bubble-text {
    white-space: pre-wrap;
}

.bubble-text--md {
    white-space: normal;
}

/* Spacing between blocks, with the first and last flush - a bubble that opens
   or closes on a margin is the "huge padding above Powered by" all over again. */
.bubble-text--md > :first-child { margin-top: 0; }
.bubble-text--md > :last-child { margin-bottom: 0; }

.bubble-text--md p {
    margin: 0 0 0.6em;
}

.bubble-text--md ul,
.bubble-text--md ol {
    margin: 0.4em 0;
    padding-inline-start: 1.3em;
}

.bubble-text--md li {
    margin: 0 0 0.2em;
    /* The outer <li> is the bubble and sets this to block; the ones in here
       are a real list and want their markers back. Spelled out rather than
       `revert`, because this list is nested inside the bubble's own <li> and
       a reverted marker is therefore the SECOND-level one - a hollow circle,
       which reads as a sub-point of something that is not there. */
    display: list-item;
    max-width: none;
}

.bubble-text--md ul > li { list-style-type: disc; }
.bubble-text--md ol > li { list-style-type: decimal; }

.bubble-text--md h1,
.bubble-text--md h2,
.bubble-text--md h3,
.bubble-text--md h4 {
    /* A chat message is not a document: a heading marks a section of a reply,
       so it is the body size in bold rather than a banner. */
    margin: 0.6em 0 0.3em;
    font-size: 1em;
    font-weight: 700;
}

.bubble-text--md a {
    color: inherit;
    text-decoration: underline;
}

.bubble-text--md code {
    background-color: rgba(0, 0, 0, 0.07);
    padding: 0.05em 0.3em;
    font-size: 0.9em;
}

.bubble-text--md pre {
    margin: 0.5em 0;
    padding: 0.6em 0.8em;
    background-color: rgba(0, 0, 0, 0.07);
    /* Scrolled, not wrapped: a wrapped command is one that breaks when
       somebody pastes it. */
    overflow-x: auto;
    font-size: 0.85em;
}

.bubble-text--md pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

.bubble-text--md blockquote {
    margin: 0.5em 0;
    padding-inline-start: 0.8em;
    border-inline-start: 2px solid rgba(0, 0, 0, 0.25);
    opacity: 0.85;
}

.bubble-text--md hr {
    margin: 0.7em 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
}

.bubble-text--md img {
    max-width: 100%;
    height: auto;
}

.bubble-text--md table {
    border-collapse: collapse;
}

.buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Adjust the space between buttons */
}

.main-button {
    display: inline-block;
    flex: 1 0 20%; /* Adjusts so 4 buttons fill a row */
    padding: 10px 0px;
    border: 1px solid #000000;
    background-color: rgba(0, 0, 0, 0.07);
    font-family: var(--chboco-font);
    font-size: 18px;
    box-sizing: border-box;
}

.main-button:hover {
    background-color: rgba(0, 0, 0, 0.10);
}

.main-button:active {
    background-color: rgba(0, 0, 0, 0.15);
}
/* Input area */
.input-area {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between; /* This will space out your input and button */
    padding: 15px 0px 0px;
    box-sizing: border-box; /* Ensures padding doesn't affect the overall width */
    padding-bottom: 30px;
    padding-inline: 60px;
    width: 100%; /* Ensures full width */
}

/* This will ensure the input field grows to fill the space, minus the button width */
.input-field {
    resize: none;
    width: 100%;
    flex-grow: 1; /* Allows the input field to grow and fill the space */
    /* Without this a flex item refuses to go below its content width, so the
       input would keep its 100% and push the button off the edge. */
    min-width: 0;
    padding: 0px 10px;
    border: 1px solid #000000;
    outline: none;
    font-size: 19px;
    font-family: var(--chboco-font);
    color: rgba(0, 0, 0, 1);
}

/* Send button
 *
 * Sized by its own label, never by a share of the width. `width: 11%` held
 * "Send" and nothing else: "Отправить" is more than twice as long and was
 * clipped mid-word, and every other language we add would have had to be
 * measured against that number. The input takes whatever is left. */
.send-button {
    padding: 14px 20px;
    border: none;
    background-color: #000000;
    color: white;
    cursor: pointer;
    white-space: nowrap; /* Prevents the text inside the button from wrapping */
    flex: 0 0 auto;
    font-size: 20px;
    font-family: var(--chboco-font);
}

/* Handle button states */
.send-button:hover {
    background-color: rgba(0, 0, 0, 0.70);
}

.send-button:active {
    background-color: rgba(0, 0, 0, 0.40);
}

/* Utility classes */
.text-right {
    text-align: end;
}

.powered-by {
    color: rgba(0, 0, 0, 0.40);
    display: flex;
    /* The legal links below take a line of their own - see .powered-by-legal. */
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 5px;
    font-size: 16px;
    margin-bottom: 15px;
    word-spacing: -4px;
    align-items: flex-end;
}

.powered-by-logo {
    width: 20px;                 /* Set the logo size */
    height: auto;                /* Maintain aspect ratio */
    margin-inline-start: 5px;  /* Space between the logo and the text */
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .main-button {
        padding: 5px 0px;
        flex: 1 0 30%; /* Adjusts so 3 buttons fill a row */
    }
    .chat-bubble{
        max-width: 65%;
    }
}

/* Responsive adjustments */
@media (max-width: 600px ) {
    .chat-window {
        width: 100%;
        margin: 0;
    }
    .chat-container {
        margin: 5px 15px;
    }
    .chat-bubble {
        max-width: 90%;
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 5px; /* Keeps the same spacing at the bottom */
    }
    .message-list {
        margin-bottom: 5px;
    }
    .message-time {
        font-size: 12px;
    }
    .buttons-container {
        gap: 3px; /* Adjust the space between buttons */
    }
    .main-button {
        padding: 5px 0px;
        flex: 1 0 40%; /* Adjusts so 2 buttons fill a row */
        font-size: 14px;
    }
    .input-area{
        padding: 5px 15px 15px;
        margin: 0px 0px;
        height: 50px
    }
    .send-button{
        font-size: 18px;
        padding: 5px 12px;
    }
    .powered-by{
        font-size: 10px;
        margin-bottom: 5px;
        /* The -4px above is a nudge at 16px; at 10px it eats the whole space
           and the line reads "Poweredby". */
        word-spacing: normal;
    }
    .powered-by-logo {
        width: 15px;                 /* Set the logo size */
        height: auto;                /* Maintain aspect ratio */
        margin-inline-start: 5px;  /* Space between the logo and the text */
    }
    .chat-header h1 {
        font-size: 24px;
        line-height: 40px;
    }
    .input-field {
        font-size: 14px;
    }
}

@media (max-width: 300px) {
    .main-button {
        padding: 5px 0px;
        flex: 1 0 90%; /* Adjusts so 1 buttons fill a row */
    }
}

@media (max-height: 600px) {
    .chat-header h1{
        line-height: 40px;
    }
    .input-area{
        padding-bottom: 15px;
    }
    .input-area h1{
        padding-bottom: 15px;
    }

}

@media (max-width: 600px ) and (max-height: 600px) {
    .chat-header h1{
        line-height: 40px;
    }
    .input-area{
        padding-bottom: 15px;
    }
    .input-area h1{
        padding-bottom: 15px;
    }
    .powered-by {
        padding: 0px;
    }

}


/* The legal links beside "Powered by".
 *
 * Quieter than the mark they sit next to, and allowed to wrap onto their own
 * line: this page is often embedded in a narrow column, and three items on one
 * line would push the logo out of view rather than wrapping.
 */
.powered-by-legal {
    /* Its own line, under "Powered by", rather than trailing it. On one line
       the three items crowd each other at any width this page is embedded at,
       and the links read as part of the attribution rather than as their own
       thing. `flex-basis: 100%` is what breaks the line: the parent wraps, and
       the text and the mark stay together above. */
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: baseline;
    margin-top: 3px;
    word-spacing: normal;
    font-size: 13px;
}

.powered-by-legal a {
    color: inherit;
    text-decoration: none;
}

.powered-by-legal a:hover,
.powered-by-legal a:focus {
    color: rgba(0, 0, 0, 0.70);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .powered-by-legal {
        font-size: 10px;
        margin-top: 1px;
    }
}