:root {
    --md-sys-color-primary: #6750A4;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-on-primary-container: #21005D;
    --md-sys-color-secondary: #625B71;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1D192B;
    --md-sys-color-tertiary: #7D5260;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #FFD8E4;
    --md-sys-color-on-tertiary-container: #31111D;
    --md-sys-color-error: #B3261E;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #F9DEDC;
    --md-sys-color-on-error-container: #410E0B;
    --md-sys-color-background: #FFFBFE;
    --md-sys-color-on-background: #1C1B1F;
    --md-sys-color-surface: #FFFBFE;
    --md-sys-color-on-surface: #1C1B1F;
    --md-sys-color-surface-variant: #E7E0EC;
    --md-sys-color-on-surface-variant: #49454F;
    --md-sys-color-outline: #79747E;
    --md-sys-color-shadow: #000000;
    --md-sys-color-inverse-surface: #313033;
    --md-sys-color-inverse-on-surface: #F4EFF4;
    --md-sys-color-inverse-primary: #D0BCFF;
}

@media (prefers-color-scheme: dark) {
    :root {
        --md-sys-color-primary: #D0BCFF;
        --md-sys-color-on-primary: #381E72;
        --md-sys-color-primary-container: #4F378B;
        --md-sys-color-on-primary-container: #EADDFF;
        --md-sys-color-secondary: #CCC2DC;
        --md-sys-color-on-secondary: #332D41;
        --md-sys-color-secondary-container: #4A4458;
        --md-sys-color-on-secondary-container: #E8DEF8;
        --md-sys-color-tertiary: #EFB8C8;
        --md-sys-color-on-tertiary: #492532;
        --md-sys-color-tertiary-container: #633B48;
        --md-sys-color-on-tertiary-container: #FFD8E4;
        --md-sys-color-error: #F2B8B5;
        --md-sys-color-on-error: #601410;
        --md-sys-color-error-container: #8C1D18;
        --md-sys-color-on-error-container: #F9DEDC;
        --md-sys-color-background: #1C1B1F;
        --md-sys-color-on-background: #E6E1E5;
        --md-sys-color-surface: #1C1B1F;
        --md-sys-color-on-surface: #E6E1E5;
        --md-sys-color-surface-variant: #49454F;
        --md-sys-color-on-surface-variant: #CAC4D0;
        --md-sys-color-outline: #938F99;
        --md-sys-color-shadow: #000000;
        --md-sys-color-inverse-surface: #E6E1E5;
        --md-sys-color-inverse-on-surface: #313033;
        --md-sys-color-inverse-primary: #6750A4;
    }
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

#app {
    width: 100%;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    background-color: var(--md-sys-color-surface);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
}

.header h1 {
    margin: 0;
    font-size: 1.5em;
}

#chat-screen, #profile-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#chat-window {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px;
}

#chat-window .user, #chat-window .assistant {
    padding: 12px;
    border-radius: 18px;
    margin-bottom: 12px;
    max-width: 80%;
    word-wrap: break-word;
}

#chat-window .user {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    align-self: flex-end;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

#chat-window .assistant {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

#chat-form {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 8px;
}

#user-input {
    flex-grow: 1;
    border: 1px solid var(--md-sys-color-outline);
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border-radius: 24px;
    padding: 12px 18px;
    font-size: 1em;
}

button {
    border-radius: 24px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    text-transform: uppercase;
}

#chat-form button, #save-key, #save-profile, #verify-provider, #save-model, #change-model-btn, #save-provider {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

#profile-btn, #back-btn, #file-btn, #help-btn, #history-btn, #clear-history-btn {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
}

.header-actions {
    display: flex;
    gap: 8px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  margin: 10% auto;
  padding: 20px;
  border: 1px solid var(--md-sys-color-outline);
  width: 80%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

/* The Close Button */
.close, .close-history {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus,
.close-history:hover,
.close-history:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.close-company-profile {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-company-profile:hover,
.close-company-profile:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#save-modal-profile {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    margin-top: 10px;
}

#history-table-container {
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
}

#history-table {
    width: 100%;
    border-collapse: collapse;
}

#history-table th, #history-table td {
    border: 1px solid var(--md-sys-color-outline);
    padding: 8px;
    text-align: left;
}

#history-table th {
    background-color: var(--md-sys-color-surface-variant);
    cursor: pointer;
}

.expand-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: var(--md-sys-color-primary);
}

.expand-btn:hover {
    color: var(--md-sys-color-on-primary-container);
}

.history-details {
    display: none;
}

.history-details td {
    padding: 16px;
    background-color: var(--md-sys-color-surface-variant);
}

.stats {
    font-size: 0.8em;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 8px;
}

.disclaimer {
    font-size: 0.7em;
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
    padding: 4px;
}




#chat-form .icon-btn {
    padding: 12px;
}


#profile-screen {
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-container {
    width: 100%;
    max-width: 600px;
}

.profile-section {
    margin-bottom: 24px;
}


#api-key-section, #api-provider-section, #company-profile-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#api-key-container {
    position: relative;
    display: flex;
    align-items: center;
}

#toggle-api-key-visibility {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

h2 {
    font-size: 1.2em;
    color: var(--md-sys-color-primary);
    margin-bottom: 16px;
}

input[type="text"], input[type="password"], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 16px;
    box-sizing: border-box;
}

textarea {
    height: 150px;
    resize: vertical;
}

@media (min-width: 600px) {
    #app {
        max-width: 70vw;
        max-height: 90vh;
        margin: auto;
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
}

.timer-container {
    display: none; /* Hidden by default */
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    border-radius: 24px;
    margin-left: 16px;
}

#timer-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 1em;
    min-width: 80px;
    text-align: center;
}
#timer-progress {
    width: 100px;
    height: 8px;
    background-color: var(--md-sys-color-outline);
    border-radius: 4px;
    overflow: hidden;
}