* {

    box-sizing: border-box;

}



:root {

    color-scheme: dark;

    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

}



body {

    margin: 0;

    background: #343541;

    color: #e9e9f3;

    min-height: 100vh;

}



a {

    color: #10a37f;

    text-decoration: none;

}



a:hover {

    text-decoration: underline;

}



.auth-container {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    padding: 24px;

}



.auth-card {

    background: #40414f;

    border: 1px solid #565869;

    border-radius: 12px;

    padding: 32px;

    width: 100%;

    max-width: 420px;

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);

}



.auth-card h1 {

    margin: 0 0 24px;

    font-size: 28px;

    text-align: center;

}



.auth-card label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

}



.auth-card input {

    width: 100%;

    padding: 12px;

    border-radius: 8px;

    border: 1px solid #6d6f7d;

    background: #3e3f52;

    color: inherit;

    margin-bottom: 18px;

}



.auth-card button {

    width: 100%;

    padding: 12px;

    border-radius: 8px;

    border: none;

    background: #10a37f;

    color: #111;

    font-weight: 600;

    cursor: pointer;

    transition: transform 0.15s ease, box-shadow 0.15s ease;

}



.auth-card button:hover {

    transform: translateY(-1px);

    box-shadow: 0 8px 20px rgba(16, 163, 127, 0.3);

}



.auth-footer {

    margin-top: 16px;

    text-align: center;

    font-size: 14px;

    color: #b0b1c5;

}



#app {

    min-height: 100vh;

}



.app-shell {

    display: flex;

    height: 100vh;

    width: 100%;

}



.sidebar {

    width: 260px;

    background: #202123;

    border-right: 1px solid #2a2b32;

    display: flex;

    flex-direction: column;

    padding: 16px 12px;

    gap: 12px;

}



.sidebar-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-weight: 600;

    margin-bottom: 4px;

}



.link-button {

    background: none;

    border: none;

    color: inherit;

    cursor: pointer;

    padding: 6px 8px;

    border-radius: 6px;

}



.link-button:hover {

    background: rgba(86, 88, 105, 0.25);

}



.new-subject {

    display: flex;

    gap: 8px;

}



.new-subject input {

    flex: 1;

    padding: 10px;

    border-radius: 8px;

    border: 1px solid #565869;

    background: #3e3f52;

    color: inherit;

}



.sidebar-actions button {

    width: 100%;

    padding: 10px;

    border-radius: 8px;

    border: 1px dashed #565869;

    background: transparent;

    color: inherit;

    cursor: pointer;

}



.sidebar-actions button:hover {

    border-style: solid;

}



.sidebar-list {

    flex: 1;

    overflow-y: auto;

    padding-right: 4px;

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.sidebar-subject {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding: 10px 12px;

    background: transparent;

    border-radius: 8px;

    border: none;

    width: 100%;

    color: inherit;

    text-align: left;

    cursor: pointer;

    transition: background 0.15s ease;

}



.sidebar-subject.active {

    background: #343541;

}



.sidebar-subject:hover {

    background: #2a2b32;

}



.sidebar-subject input {

    flex: 1;

    padding: 8px 10px;

    border-radius: 6px;

    border: 1px solid #565869;

    background: #3e3f52;

    color: inherit;

}



.subject-controls {

    display: flex;

    gap: 6px;

}



.subject-controls button {

    padding: 6px 8px;

    border-radius: 6px;

    border: 1px solid #565869;

    background: transparent;

    color: inherit;

    cursor: pointer;

    font-size: 12px;

}



.subject-controls button:hover {

    background: rgba(86, 88, 105, 0.25);

}



.subject-name {

    flex: 1;

    overflow: hidden;

    text-overflow: ellipsis;

}



.main-area {

    flex: 1;

    display: flex;

    flex-direction: column;

    height: 100vh;

    position: relative;

}



.topbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 24px;

    border-bottom: 1px solid #3f414d;

    background: rgba(32, 33, 35, 0.55);

    position: sticky;

    top: 0;

    z-index: 10;

}



.topbar-actions {

    display: flex;

    gap: 8px;

}



.topbar button {

    background: #2a2b32;

    border: 1px solid #565869;

    border-radius: 8px;

    color: inherit;

    padding: 8px 14px;

    cursor: pointer;

}



.topbar button:hover {

    background: #3a3b45;

}



.chat-history {

    flex: 1;

    overflow-y: auto;

    padding: 24px;

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.message {

    display: flex;

    gap: 16px;

    padding: 18px 22px;

    border-radius: 16px;

    background: rgba(64, 65, 79, 0.7);

    line-height: 1.6;

    animation: fadeIn 0.2s ease;

    white-space: pre-wrap;

    word-break: break-word;

}



.message.user {

    background: rgba(52, 53, 65, 0.85);

}



.message.assistant {

    background: rgba(68, 70, 84, 0.75);

}



.message .avatar {

    font-weight: 600;

    color: #bdbfe2;

    min-width: 40px;

}



.message-content {

    flex: 1;

}



.chat-input-bar {

    padding: 16px 24px;

    border-top: 1px solid #3f414d;

    background: linear-gradient(180deg, rgba(52, 53, 65, 0.92), rgba(32, 33, 35, 0.95));

    position: sticky;

    bottom: 0;

}



.input-wrapper {

    background: #40414f;

    border: 1px solid #565869;

    border-radius: 20px;

    padding: 12px 16px;

    display: flex;

    gap: 12px;

    align-items: flex-end;

}



.input-wrapper textarea {

    flex: 1;

    background: transparent;

    border: none;

    color: inherit;

    font-size: 16px;

    resize: none;

    max-height: 180px;

    line-height: 1.5;

    font-family: inherit;

}



.input-wrapper textarea:focus {

    outline: none;

}



.input-wrapper button {

    background: #10a37f;

    border: none;

    border-radius: 12px;

    color: #111;

    padding: 10px 18px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.15s ease;

}



.input-wrapper button:disabled {

    cursor: not-allowed;

    opacity: 0.6;

}



.input-wrapper button:hover:not(:disabled) {

    background: #0d8a6a;

}



.welcome-card {

    margin: auto;

    max-width: 520px;

    background: rgba(64, 65, 79, 0.85);

    border: 1px solid #565869;

    border-radius: 16px;

    padding: 32px;

    text-align: center;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);

}



.welcome-card h2 {

    margin-top: 0;

    margin-bottom: 16px;

    font-size: 28px;

}



.welcome-card p {

    margin: 0 0 24px;

    color: #b0b1c5;

}



.welcome-card input {

    width: 100%;

    padding: 12px;

    border-radius: 8px;

    border: 1px solid #6d6f7d;

    background: #3e3f52;

    color: inherit;

    margin-bottom: 16px;

}



.welcome-card button {

    width: 100%;

    padding: 12px;

    border-radius: 8px;

    border: none;

    background: #10a37f;

    color: #111;

    font-weight: 600;

    cursor: pointer;

}



.toast-container {

    position: fixed;

    top: 24px;

    right: 24px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    z-index: 1000;

}



.toast {

    background: rgba(32, 33, 35, 0.9);

    border: 1px solid #565869;

    border-radius: 10px;

    padding: 12px 16px;

    color: #fff;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);

    animation: fadeIn 0.2s ease;

}



.loader {

    display: inline-flex;

    gap: 4px;

    font-size: 18px;

    letter-spacing: 2px;

    color: #bdbfe2;

}



.loader span {

    animation: blink 1s infinite;

}



.loader span:nth-child(2) {

    animation-delay: 0.2s;

}



.loader span:nth-child(3) {

    animation-delay: 0.4s;

}



@keyframes blink {

    0%, 80%, 100% {

        opacity: 0.2;

    }

    40% {

        opacity: 1;

    }

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(6px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.admin-wrapper {

    max-width: 1080px;

    margin: 0 auto;

    padding: 32px;

    color: #e9e9f3;

}



.admin-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 24px;

}



.admin-table {

    width: 100%;

    border-collapse: collapse;

}



.admin-table th,

.admin-table td {

    padding: 10px 14px;

    border-bottom: 1px solid #3f414d;

    text-align: left;

}



.admin-actions-form {

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

}



.admin-actions-form button {

    padding: 6px 10px;

    border-radius: 6px;

    border: 1px solid #565869;

    background: transparent;

    color: inherit;

    cursor: pointer;

}



.admin-actions-form button:hover {

    background: rgba(86, 88, 105, 0.2);

}



@media (max-width: 960px) {

    .app-shell {

        flex-direction: column;

    }



    .sidebar {

        width: 100%;

        flex-direction: row;

        flex-wrap: wrap;

    }



    .sidebar-list {

        flex-direction: row;

        flex-wrap: wrap;

        gap: 12px;

    }



    /* Tile stile iOS per soggetti su mobile */

    .sidebar-subject {

        width: calc(50% - 6px);

        background: linear-gradient(180deg, #2a2b32, #202123);

        border: 1px solid #3f414d;

        border-radius: 16px;

        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);

        padding: 14px;

    }



    .sidebar-subject.active {

        background: #343541;

    }



    .subject-controls button {

        border-color: #4b4d5e;

    }

}