*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



:root {

    /* ألوان شعار غرفة حائل 2026 */

    --teal-900: #002828;

    --teal-800: #003333;

    --teal-700: #004d4d;

    --teal-600: #006060;

    --green: #00a859;

    --green-dark: #008547;

    --green-light: #e6f7ef;

    --sand: #c4a882;

    --sand-light: #f5efe6;

    --brown: #a67c52;

    --blue: #0054a6;

    --blue-light: #e8f0fa;

    --white: #ffffff;



    --primary: var(--green);

    --primary-dark: var(--green-dark);

    --accent: var(--blue);

    --bg-page: var(--teal-800);

    --surface: var(--white);

    --surface-soft: #f7faf9;

    --text: #1a2e2e;

    --text-muted: #5a7070;

    --border: #dce8e8;

    --shadow: 0 8px 32px rgba(0, 40, 40, 0.18);

    --radius: 16px;

    --radius-sm: 10px;

}



body {

    font-family: "Alexandria", sans-serif;

    background: var(--bg-page);

    color: var(--text);

    min-height: 100vh;

    line-height: 1.7;

}



.page-bg {

    position: fixed;

    inset: 0;

    z-index: -1;

    background:

        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0, 168, 89, 0.12), transparent),

        linear-gradient(165deg, var(--teal-700) 0%, var(--teal-900) 55%, #001a1a 100%);

}



.app {

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    max-width: 860px;

    margin: 1.25rem auto;

    background: var(--surface);

    border-radius: calc(var(--radius) + 4px);

    box-shadow: var(--shadow);

    overflow: hidden;

}



/* Header — تدرج غرفة حائل */

.header {

    background: #0a5c4d url('../../img/header-gradient.png') center / cover no-repeat;

    padding: 0;

}



.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.25rem;

    padding: 1rem 1.5rem;

    direction: rtl;

}



.header-logo {

    display: block;

    width: auto;

    max-width: min(300px, 50vw);

    height: auto;

    max-height: 80px;

    object-fit: contain;

    flex-shrink: 0;

    order: 1;

}



.header-brand {

    flex: 1;

    min-width: 0;

    text-align: start;

    order: 2;

}



.header-brand h1 {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--white);

    line-height: 1.35;

}



.header-brand .tagline {

    font-size: 0.78rem;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.7);

    margin-top: 0.2rem;

    line-height: 1.5;

}



.header-accent {

    height: 3px;

    background: linear-gradient(

        90deg,

        var(--sand) 0%,

        var(--brown) 25%,

        var(--green) 55%,

        var(--teal-600) 80%,

        var(--blue) 100%

    );

}



/* Services */

.services-section {

    padding: 1.25rem 1.25rem 0.5rem;

    background: var(--surface-soft);

    border-bottom: 1px solid var(--border);

}



.section-title {

    font-size: 0.88rem;

    font-weight: 700;

    color: var(--teal-800);

    margin-bottom: 0.85rem;

    text-align: center;

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0.65rem;

}



.service-card {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    padding: 0.75rem 0.65rem;

    text-align: center;

    transition: border-color 0.2s, box-shadow 0.2s;

}



.service-card:hover {

    border-color: var(--green);

    box-shadow: 0 2px 12px rgba(0, 168, 89, 0.1);

}



.service-icon {

    font-size: 1.25rem;

    display: block;

    margin-bottom: 0.35rem;

}



.service-card h3 {

    font-size: 0.78rem;

    font-weight: 700;

    color: var(--teal-800);

    margin-bottom: 0.2rem;

}



.service-card p {

    font-size: 0.68rem;

    font-weight: 400;

    color: var(--text-muted);

    line-height: 1.5;

}



/* AI disclaimer */

.ai-disclaimer-banner {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.55rem 1.25rem;

    background: var(--sand-light);

    border-bottom: 1px solid var(--border);

    font-size: 0.76rem;

    font-weight: 500;

    color: var(--brown);

}



.ai-disclaimer-banner .ai-icon {

    flex-shrink: 0;

}



/* Chat */

.chat-container {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 1rem 1.25rem 0;

    overflow: hidden;

    background: var(--surface-soft);

}



.messages {

    flex: 1;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    padding-bottom: 1rem;

    scroll-behavior: smooth;

    min-height: 280px;

    max-height: 420px;

}



.message {

    display: flex;

    gap: 0.65rem;

    align-items: flex-start;

    animation: fadeIn 0.3s ease;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(8px); }

    to { opacity: 1; transform: translateY(0); }

}



.user-message {

    flex-direction: row-reverse;

}



.avatar {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: #0d0d0d;

    border: 2px solid var(--green);

    overflow: hidden;

}



.avatar-img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 3px;

}



.user-message .avatar {

    background: var(--green-light);

    border-color: var(--green);

    font-size: 0.95rem;

}



.bubble {

    max-width: 78%;

    padding: 0.85rem 1.05rem;

    border-radius: var(--radius);

    font-size: 0.9rem;

    font-weight: 400;

    white-space: pre-wrap;

    word-break: break-word;

}



.bot-message .bubble {

    background: var(--surface);

    border: 1px solid var(--border);

    box-shadow: 0 1px 6px rgba(0, 51, 51, 0.05);

    border-bottom-right-radius: 4px;

}



.user-message .bubble {

    background: linear-gradient(135deg, var(--green) 0%, var(--teal-600) 100%);

    color: var(--white);

    border-bottom-left-radius: 4px;

}



.topic-badge {

    display: inline-block;

    background: var(--green-light);

    color: var(--green-dark);

    font-size: 0.7rem;

    font-weight: 700;

    padding: 0.15rem 0.55rem;

    border-radius: 999px;

    margin-bottom: 0.45rem;

}



.topic-badge.out-of-scope {

    background: #fde8e8;

    color: #9b1c1c;

}



.bot-message .bubble a {

    color: var(--blue);

    font-weight: 600;

    text-decoration: underline;

}



.bot-message .bubble strong {

    font-weight: 700;

    color: var(--teal-800);

}



/* Typing */

.typing .bubble {

    display: flex;

    gap: 4px;

    align-items: center;

    padding: 1rem 1.15rem;

}



.typing-dot {

    width: 7px;

    height: 7px;

    background: var(--green);

    border-radius: 50%;

    animation: bounce 1.2s infinite;

}



.typing-dot:nth-child(2) { animation-delay: 0.2s; }

.typing-dot:nth-child(3) { animation-delay: 0.4s; }



@keyframes bounce {

    0%, 60%, 100% { transform: translateY(0); }

    30% { transform: translateY(-5px); }

}



/* Suggestions */

.suggestions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.45rem;

    padding: 0.5rem 0 1rem;

}



.suggestion-btn {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 999px;

    padding: 0.38rem 0.85rem;

    font-family: inherit;

    font-size: 0.78rem;

    font-weight: 500;

    color: var(--teal-800);

    cursor: pointer;

    transition: all 0.2s;

}



.suggestion-btn:hover {

    background: var(--green-light);

    border-color: var(--green);

    color: var(--green-dark);

}



/* Input */

.input-area {

    display: flex;

    gap: 0.5rem;

    padding: 0.75rem 0 1.1rem;

    border-top: 1px solid var(--border);

    background: var(--surface-soft);

    position: sticky;

    bottom: 0;

}



.input-area input {

    flex: 1;

    padding: 0.75rem 1rem;

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    font-family: inherit;

    font-size: 0.9rem;

    font-weight: 400;

    background: var(--surface);

    outline: none;

    transition: border-color 0.2s, box-shadow 0.2s;

}



.input-area input:focus {

    border-color: var(--green);

    box-shadow: 0 0 0 3px var(--green-light);

}



.input-area button {

    width: 46px;

    height: 46px;

    border: none;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--green) 0%, var(--teal-600) 100%);

    color: white;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: opacity 0.2s, transform 0.15s;

    flex-shrink: 0;

}



.input-area button:hover {

    opacity: 0.92;

    transform: scale(1.04);

}



.input-area button:disabled {

    opacity: 0.4;

    cursor: not-allowed;

    transform: none;

}



/* Footer */

.footer {

    text-align: center;

    padding: 0.9rem 1.25rem;

    background: linear-gradient(180deg, var(--teal-800) 0%, var(--teal-900) 100%);

    color: rgba(255, 255, 255, 0.85);

}



.footer-main {

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--white);

    margin-bottom: 0.15rem;

}



.footer-note {

    font-size: 0.72rem;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.55);

}



.footer-note a {

    color: var(--sand);

    text-decoration: none;

}



.footer-note a:hover {

    text-decoration: underline;

}



/* Responsive */

@media (max-width: 640px) {

    .app {

        margin: 0;

        border-radius: 0;

        min-height: 100vh;

    }



    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .header-inner {

        flex-direction: column;

        align-items: center;

        text-align: center;

        padding: 1rem;

        gap: 0.85rem;

    }



    .header-logo {

        max-width: min(320px, 80vw);

        max-height: 72px;

        order: 1;

    }



    .header-brand {

        text-align: center;

        order: 2;

    }



    .messages {

        max-height: none;

    }



    .bubble {

        max-width: 88%;

    }

}



@media (max-width: 380px) {

    .services-grid {

        grid-template-columns: 1fr 1fr;

        gap: 0.5rem;

    }



    .service-card p {

        display: none;

    }

}