/* Adds more line height so there is vertical space between resource links */
::deep#chat-assistant-container {
    display: flex;
    flex-direction: column;
    line-height: calc(var(--type-ramp-base-line-height) + 1px);
}

::deep#chat-assistant-container p {
    line-height: inherit;
}

::deep#chat-assistant-container.chat-assistant-modal {
    scroll-behavior: smooth;
    flex: 1;
    overflow-wrap: anywhere;
}

@media (min-height: 500px) {
    ::deep#chat-assistant-container.chat-assistant-modal {
        overflow-y: auto;
    }
}

::deep#chat-assistant-container.chat-assistant-sidebar {
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    padding-left: 0.5%;
    padding-right: 0.5%;
    flex: 1;
    overflow-wrap: anywhere;
}

::deep#chat-assistant-container .user-message {
    margin-top: calc(var(--design-unit)* 1px);
    margin-bottom: calc(var(--design-unit)* 4px);
    background: var(--chat-user-background-color);
    display: inline-block;
    color: var(--neutral-foreground-rest);
    border: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-layer-rest);
    border-radius: calc(var(--layer-corner-radius)* 1px);
    box-shadow: var(--elevation-shadow-card-rest);
    padding: calc(var(--design-unit)* 2px) calc(var(--design-unit)* 3px);
    align-self: end;
}

::deep#chat-assistant-container .last-message {
    min-height: calc(100vh - 20rem - var(--next-steps-height, 0px));
}

::deep#chat-assistant-container p {
    margin-bottom: 0.5rem;
}

::deep#chat-assistant-container .message-buttons {
    display: flex;
    padding-bottom: 0.5rem;
}

::deep#chat-assistant-container .message-buttons fluent-button {
    min-width: 28px;
    height: 28px;
}

::deep#chat-assistant-container .message-buttons fluent-button::part(control) {
    background-color: transparent;
    padding: 0px;
    line-height: 0;
}

::deep#chat-assistant-container .message-buttons fluent-button::part(control):hover {
    background-color: var(--neutral-fill-rest);
}

::deep#chat-assistant-container .error-message {
    margin-top: calc(var(--design-unit)* 1px);
    margin-bottom: calc(var(--design-unit)* 4px);
    background: var(--log-error);
    display: inline-block;
    color: var(--neutral-foreground-rest);
    border-radius: calc(var(--layer-corner-radius)* 1px);
    padding: calc(var(--design-unit)* 2px) calc(var(--design-unit)* 3px);
}

::deep#chat-assistant-container h1 {
    font-size: var(--type-ramp-plus-2-font-size);
    line-height: var(--type-ramp-plus-2-line-height);
}

::deep#chat-assistant-container h2 {
    font-size: var(--type-ramp-plus-1-font-size);
    line-height: var(--type-ramp-plus-1-line-height);
}

::deep#chat-assistant-container h3 {
    font-size: var(--type-ramp-plus-1-font-size);
    line-height: var(--type-ramp-plus-1-line-height);
}

::deep#chat-assistant-container h4 {
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
}

::deep#chat-assistant-container h5 {
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
}

::deep#chat-assistant-container .trace-tag {
    display: flex;
    align-items: center;
    border: 1px solid rgb(217, 217, 217);
    padding: 2px 7px;
    font-size: 12px;
    background-color: var(--neutral-fill-rest);
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

::deep#chat-assistant-container .trace-service-tag {
    border-left-width: 15px;
    margin-right: 7px;
}

::deep#chat-assistant-container .fluent-overflow-more {
    min-width: 36px;
}

::deep#chat-assistant-container .resource-name, ::deep.chat-assistant-next-steps .resource-name,
::deep#chat-assistant-container .log-entry, ::deep.chat-assistant-next-steps .log-entry {
    font-weight: normal;
    border: 1px solid rgb(217, 217, 217);
    padding: 1px 4px;
    font-family: var(--body-font);
    border-left-width: 10px;
    border-left-style: solid;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    font-size: 12.25px;
    text-decoration: none;
    margin-left: 2px;
    margin-right: 2px;
}

::deep#chat-assistant-container .fluent-card-minimal-style {
    height: unset !important;
}

::deep.chat-assistant-next-step, ::deep.chat-assistant-next-step-refresh {
    margin-bottom: 6px;
}

::deep.chat-assistant-next-steps {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 6px;
}

/* Support multiline buttons */
/* Adds more line height so there is vertical space between resource links */
::deep.chat-assistant-next-steps fluent-button {
    height: auto;
}
::deep.chat-assistant-next-steps fluent-button::part(control) {
    width: 100%;
    white-space: normal;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 13px;
    line-height: calc(var(--type-ramp-base-line-height) + 1px);
}
::deep.chat-assistant-next-steps fluent-button code {
    overflow-wrap: anywhere; /* Ensure code blocks in buttons wrap */
}

::deep#chat-scroll-bottom-container #chat-scroll-bottom-button {
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3.40282e+38px;
}

::deep#chat-scroll-bottom-container.chat-assistant-sidebar #chat-scroll-bottom-button {
    bottom: calc(115px + var(--next-steps-height, 0px));
}

::deep#chat-scroll-bottom-container.chat-assistant-modal #chat-scroll-bottom-button {
    bottom: calc(125px + var(--next-steps-height, 0px));
}

#chat-form-container {
    position: relative;
}

.input-box {
    display: flex;
    flex-direction: column;
    background: padding-box linear-gradient(var(--neutral-fill-input-rest), var(--neutral-fill-input-rest)), border-box var(--neutral-stroke-input-rest);
    box-sizing: border-box;
    color: inherit;
    border: calc(var(--stroke-width)* 1px) solid transparent;
    border-radius: calc(var(--control-corner-radius)* 1px);
}

.input-box:focus-within {
    background: padding-box linear-gradient(var(--neutral-fill-input-focus), var(--neutral-fill-input-focus)), border-box var(--neutral-stroke-input-rest);
}

.input-box textarea {
    resize: none;
    border: none;
    outline: none;
    flex-grow: 1;
    background-color: transparent;
    padding: 0;
    width: 100%;
}

.input-box label {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

::deep#chat-form-container #chat-form-submit:not(:hover)::part(control) {
    background-color: transparent;
}

::deep#chat-form-container .model-button {
    height: auto;
    margin-right: 4px;
    font-size: 12px;
    color: var(--foreground-settings-text);
}

::deep#chat-form-container .model-button::part(control) {
    padding-top: 2px;
    padding-bottom: 2px;
}

::deep#chat-form-container .model-button::part(control):not(:hover) {
    background: transparent;
}

::deep#chat-form-container .model-button::part(end) {
    margin-inline-start: 6px;
}

@media (forced-colors: none) {
    .input-box:active::after, .input-box:focus-within:not(:active)::after {
        content: "";
        position: absolute;
        height: calc(var(--focus-stroke-width)* 1px);
        bottom: 0px;
        border-bottom: calc(var(--focus-stroke-width)* 1px) solid var(--accent-fill-rest);
        border-bottom-left-radius: calc(var(--control-corner-radius)* 1px);
        border-bottom-right-radius: calc(var(--control-corner-radius)* 1px);
        z-index: 2;
        transition: all 300ms cubic-bezier(0.1,0.9,0.2,1);
    }
}

@media (forced-colors: none) {
    .input-box:focus-within::after {
        left: 0px;
        width: 100%;
        transform: none;
    }
    .input-box::after {
        width: 0%;
    }
}

::deep#chat-assistant-container .assistant-message blockquote {
    font-style: normal;
    margin-left: 0;
    margin-right: 0;
}

/* Remove paragraph margin-bottom when it's the last element in a blockquote. */
::deep#chat-assistant-container .assistant-message blockquote > p:last-child {
    margin-bottom: 0;
}

/* Remove paragraph margin-bottom when it's the last element in a blockquote. */
::deep#chat-assistant-container .assistant-message li > p:last-child {
    margin-bottom: 0;
}

/*
    Remove paragraph margin-bottom when it's nested in a list,
    and the paragraph is immediately followed by another list.
*/
::deep#chat-assistant-container .assistant-message li > p:first-child:has(+ ul),
::deep#chat-assistant-container .assistant-message li > p:first-child:has(+ ol) {
    margin-bottom: 0;
}

::deep#chat-assistant-container .assistant-message li {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

::deep#chat-assistant-container .assistant-message .code-block {
    border: 1px solid var(--neutral-stroke-rest);
    background-color: var(--chat-codeblock-background-color);
    border-radius: .375rem;
    position: relative;
}

::deep#chat-assistant-container .assistant-message .code-title {
    display: flex;
    color: var(--foreground-settings-text);
    background-color: var(--neutral-fill-hover);
    padding-left: 14px;
    padding-right: 14px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 2rem;
    font-size: 13px;
    align-items: center;
}

::deep#chat-assistant-container .assistant-message .code-container {
    overflow-y: auto;
    padding: 14px;
}

::deep#chat-assistant-container .assistant-message .code-buttons-anchor {
    position: sticky;
    top: 2.25rem;
}

::deep#chat-assistant-container .assistant-message .code-buttons-hover {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 2rem;
    display: flex;
    align-items: center;
    padding-right: 14px;
}

::deep#chat-assistant-container .assistant-message pre {
    overflow: visible; /* required for sticky copy button */
    font-family: inherit;
    font-size: inherit;
    margin: 0.5rem 0.75rem 1rem 0;
}

::deep#chat-assistant-container code {
    font-family: 'Cascadia Mono', Consolas, monospace;
    color: unset;
    background-color: var(--neutral-fill-secondary-focus);
    padding: .15rem .3rem;
    border-radius: .25rem;
}

::deep#chat-assistant-container .assistant-message pre code {
    font-size: 13px;
    line-height: 20px;
}

::deep#chat-assistant-container .assistant-message pre code, ::deep#chat-assistant-container a code {
    background-color: unset;
    padding: unset;
    border-radius: unset;
}

::deep#chat-assistant-container .assistant-message .code-copy-button {
    border: 0;
    border-radius: 5px;
    background-color: var(--neutral-fill-hover);
    width: 28px;
    height: 28px;
}

::deep#chat-assistant-container .assistant-message .code-copy-button:hover {
    background-color: var(--neutral-fill-active);
}

::deep#chat-assistant-container .assistant-message .copy-icon,
::deep#chat-assistant-container .assistant-message .checkmark-icon {
    display: inline-flex;
    vertical-align: sub;
}

::deep#chat-assistant-container .assistant-message strong {
    font-weight: 600;
}

::deep#chat-assistant-container .assistant-message table {
    margin-bottom: calc(.25rem * 6);
    margin-top: calc(.25rem * 3);
    width: 100%;
}

::deep#chat-assistant-container .assistant-message tr:last-child {
    border-style: none;
}

::deep#chat-assistant-container .assistant-message tr {
    border-bottom: 1px solid var(--table-body-border-color);
}

::deep#chat-assistant-container .assistant-message th {
    padding-right: calc(.25rem * 1);
}

::deep#chat-assistant-container .assistant-message th {
    border-bottom: 1px solid var(--table-header-border-color);
    padding-bottom: calc(.25rem * 1.5);
    padding-top: calc(.25rem * 1);
    font-weight: 600;
}

::deep#chat-assistant-container .assistant-message td {
    padding-right: calc(.25rem * 1);
    padding-block: calc(.25rem * 1.5);
}

.chat-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
}

::deep.chat-splash .initial-prompt-button {
    height: unset;
    margin-bottom: 16px;
}

@media (min-width: 400px) {
    ::deep.chat-splash .initial-prompt-button {
        width: 350px;
    }
}

::deep.chat-splash .initial-prompt-button::part(control) {
    padding: calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px) calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
    justify-content: left;
    white-space: unset;
}

::deep.chat-splash .initial-prompt-button::part(content) {
    display: flex;
    flex-direction: row;
}

::deep.chat-splash .initial-prompt-icon {
    margin-right: 6px;
}

::deep.chat-splash .initial-prompt-title {
    display: flex;
    margin-bottom: 4px;
    text-align: left;
}

::deep.chat-splash .initial-prompt-description {
    color: var(--foreground-subtext-rest);
    text-align: left;
}

.unavailable-content {
    padding-left: 16px;
    padding-right: 16px;
}

::deep.chat-disclaimer {
    margin-top: 0.5rem;
}

::deep.chat-disclaimer-subtext {
    color: var(--foreground-subtext-rest);
    font-size: 12px;
}
