:root {
    --bg: #f6f7f9;
    --panel: #ffffff;
    --border: #e3e6ea;
    --user: #2f6fed;
    --user-bg: #2f6fed;
    --assistant-bg: #f0f2f5;
    --text: #1c1f23;
    --muted: #6b7280;
    --bezel: #111418;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    /* Soft backdrop so the phone frame stands out. */
    background: radial-gradient(circle at 30% 20%, #e9edf5 0%, #d7dde8 55%, #c7cedd 100%);
}

/* Stacks the logo above the phone, both centered on the page. */
.phone-stage {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px;
}

/* App logo, in normal flow above the phone (not overlapping it),
   left-aligned to the top-left corner while the phone stays centered. */
.app-logo {
    align-self: flex-start;
    width: min(340px, 70vw);
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(20, 24, 35, 0.18));
}

/* The device: a landscape tablet — wider than tall, with a dark bezel. */
.phone {
    position: relative;
    /* Scales with the viewport (keeping an 11" iPad Pro 2388:1668 ≈ 1.43 ratio)
       so the mockup occupies the same proportion at any window size or zoom. No
       fixed px cap, or wide windows of different widths would each pin to it and
       look different. The two min() terms fit it to the width (92vw) or, on
       short windows, the available height (minus the logo/gap above) — smaller
       wins. The 1.43 factor must equal the aspect ratio (2388/1668). */
    width: min(92vw, calc((100vh - 140px) * 1.43));
    aspect-ratio: 2360 / 1640;
    height: auto;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 14px solid var(--bezel);
    border-radius: 34px;
    box-shadow: 0 30px 60px rgba(20, 24, 35, 0.45), 0 2px 6px rgba(0,0,0,0.2);
    overflow: hidden;
}

/* A small front camera dot centered on the top bezel (no phone notch). */
.phone::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2a2f37;
    z-index: 5;
}

/* Top navigation inside the device, switching Chat <-> Manage. */
.navbar {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    padding: 0.9rem 0.75rem 0.5rem; /* top room clears the camera dot */
    border-bottom: 1px solid var(--border);
}
.navlink {
    text-decoration: none;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
}
.navlink:hover { background: var(--assistant-bg); }
.navlink.active { background: var(--user); color: #fff; }

/* Signed-in account chip — outside the device, top-right of the stage. */
.account {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.account .logout { margin: 0; }
.account-user {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, 0.75);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(20, 24, 35, 0.15);
}
.account-signout {
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
}
.account-signout:hover { background: var(--assistant-bg); }

/* Language switcher; floats above the login backdrop on EmptyLayout pages. */
.account-floating { position: fixed; z-index: 110; }
.lang-switch {
    margin: 0;
    display: flex;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.lang-option {
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
}
.lang-option:hover { background: var(--assistant-bg); }
.lang-option.active { background: var(--user-bg); color: #fff; }

main {
    flex: 1;
    min-height: 0;
    display: flex;
}

.chat {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1rem 0.75rem 0.75rem;
}

.messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.4rem;
}

.hint { color: var(--muted); text-align: center; margin-top: 2rem; font-size: 0.92rem; }

.bubble { max-width: min(88%, 560px); padding: 0.55rem 0.8rem; border-radius: 16px; }
.bubble .role { font-size: 0.68rem; color: var(--muted); margin-bottom: 0.18rem; }
.bubble .text { white-space: pre-wrap; line-height: 1.45; font-size: 0.94rem; }

.bubble.user {
    align-self: flex-end;
    background: var(--user-bg);
    color: #fff;
    border-bottom-right-radius: 5px;
}
.bubble.user .role { color: rgba(255,255,255,0.8); }

.bubble.assistant {
    align-self: flex-start;
    background: var(--assistant-bg);
    border-bottom-left-radius: 5px;
}

.searching { color: var(--muted); font-style: italic; }

.sources { margin-top: 0.5rem; font-size: 0.78rem; }
.sources summary { cursor: pointer; color: var(--muted); }
.sources ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.sources li { margin: 0.2rem 0; color: #374151; }

.composer { display: flex; gap: 0.5rem; padding: 0.65rem 0.4rem 0.4rem; }
.composer input {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 22px;
    font-size: 0.95rem;
    background: var(--panel);
}
.composer input:focus { outline: 2px solid var(--user); border-color: transparent; }
.composer button {
    flex: none;
    padding: 0.65rem 1.15rem;
    border: none;
    border-radius: 22px;
    background: var(--user);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
}
.composer button:disabled { opacity: 0.5; cursor: default; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ----- Shared form controls (buttons / messages) ----- */
.btn-save, .btn-delete, .btn-cancel {
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.btn-save { background: var(--user); color: #fff; }
.btn-delete { background: #e5484d; color: #fff; }
.btn-cancel { background: var(--assistant-bg); color: var(--text); }
.btn-save:disabled, .btn-delete:disabled, .btn-cancel:disabled { opacity: 0.5; cursor: default; }

.form-msg { font-size: 0.85rem; margin: 0.1rem 0 0; }
.form-msg.ok { color: #2a9d4a; }
.form-msg.error { color: #d23; }
.form-hint { font-size: 0.76rem; color: var(--muted); margin: 0.1rem 0 0; }

.manage {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 1.1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.manage-head { display: flex; align-items: center; justify-content: space-between; }
/* Shared title style so the list header and the form header match exactly. */
.manage-title { font-size: 0.95rem; font-weight: 600; }
.manage-add {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 999px;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--user);
    cursor: pointer;
}
.manage-add:hover { background: var(--assistant-bg); }
.manage-add:disabled { opacity: 0.5; cursor: default; }

.manage-tools { display: flex; align-items: center; gap: 0.5rem; }
.import-pdf {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--user);
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    white-space: nowrap;
}
.import-pdf:hover { background: var(--assistant-bg); }
.import-pdf input { display: none; }

.manage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.manage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    cursor: pointer;
}
.manage-row:hover { background: var(--assistant-bg); }
.manage-row.selected { border-color: var(--user); box-shadow: 0 0 0 1px var(--user); }
.manage-row-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.manage-row-main .cat { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.manage-row-main .ttl { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manage-row-meta { font-size: 0.8rem; color: var(--muted); white-space: nowrap; text-align: right; }

.manage-form {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.manage-form-head { display: flex; align-items: center; justify-content: space-between; }
.manage-close {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.2rem;
}
.manage-close:hover { color: var(--text); }

/* Label on the left, fixed-width control on the right. */
.field { display: flex; align-items: flex-start; gap: 0.75rem; }
.field label { width: 7.5rem; flex: none; font-size: 0.85rem; color: var(--muted); padding-top: 0.5rem; }
.field .req { color: #d23; }
.field input,
.field select,
.field textarea {
    width: 240px;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text);
    background: var(--panel);
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--user); border-color: transparent; }

.manage-actions { display: flex; gap: 0.5rem; margin-top: 0.3rem; }

/* ----- Duties page: list + expandable form (own vocabulary) ----- */
.duties {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 1.1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.duties-head { display: flex; align-items: center; justify-content: space-between; }
/* Shared title style so the list header and the form header match exactly. */
.duties-title { font-size: 0.95rem; font-weight: 600; }
.duties-add {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 999px;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--user);
    cursor: pointer;
}
.duties-add:hover { background: var(--assistant-bg); }
.duties-add:disabled { opacity: 0.5; cursor: default; }

.duties-tools { display: flex; align-items: center; gap: 0.5rem; }

.duties-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.duties-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    cursor: pointer;
}
.duties-row:hover { background: var(--assistant-bg); }
.duties-row.selected { border-color: var(--user); box-shadow: 0 0 0 1px var(--user); }
.duties-row-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.duties-row-main .cat { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.duties-row-main .ttl { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duties-row-meta { font-size: 0.8rem; color: var(--muted); white-space: nowrap; text-align: right; }

.duties-form {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.duties-form-head { display: flex; align-items: center; justify-content: space-between; }
.duties-close {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.2rem;
}
.duties-close:hover { color: var(--text); }

.duties-actions { display: flex; gap: 0.5rem; margin-top: 0.3rem; }

/* ----- Homes admin: each home grouped in its own block ----- */
.home-block { border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem 0.75rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }

/* ----- Task list (drag-and-drop reordering) ----- */
.task-row .grip { flex: none; color: var(--muted); font-size: 1rem; line-height: 1; cursor: grab; user-select: none; }
.task-row .manage-row-main { flex: 1; }
.task-row.dragging { opacity: 0.5; }
.task-row.drag-over { border-color: var(--user); box-shadow: 0 -2px 0 0 var(--user); }
.task-row .ttl.done { text-decoration: line-through; color: var(--muted); }

.status-badge { flex: none; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.status-todo { background: var(--assistant-bg); color: var(--muted); }
.status-inprogress { background: #fff4d6; color: #9a6a00; }
.status-done { background: #e3f7e8; color: #2a9d4a; }

/* ----- Sign-in popup ----- */
.login-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 24, 35, 0.45);
    backdrop-filter: blur(4px);
}
.login-dialog {
    width: min(380px, 92vw);
    background: var(--panel);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(20, 24, 35, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
    padding: 1.6rem 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.login-logo { width: min(220px, 60%); height: auto; align-self: center; margin-bottom: 0.4rem; }
.login-dialog h1 { margin: 0 0 1rem; font-size: 1.2rem; text-align: center; }
.login-dialog form { display: flex; flex-direction: column; gap: 0.7rem; }
.login-dialog label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); }
.login-dialog input {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text);
    background: var(--panel);
}
.login-dialog input:focus { outline: 2px solid var(--user); border-color: transparent; }
.login-dialog button {
    margin-top: 0.5rem;
    border: none;
    border-radius: 8px;
    background: var(--user);
    color: #fff;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.login-dialog button:hover { filter: brightness(1.05); }
.login-dialog .error { color: #d23; font-size: 0.85rem; margin: 0; }
.login-alt { text-align: center; font-size: 0.85rem; color: var(--muted); margin: 0.9rem 0 0; }
.login-alt a { color: var(--user); text-decoration: none; }
.login-alt a:hover { text-decoration: underline; }

/* ----- Full-page notice (error page) ----- */
.notice {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.notice-card {
    width: min(420px, 92vw);
    background: var(--panel);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(20, 24, 35, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    padding: 1.8rem 1.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}
.notice-card h1 { margin: 0; font-size: 1.25rem; }
.notice-card p { margin: 0; color: var(--muted); }
.notice-detail code { font-size: 0.8rem; word-break: break-all; }

/* On a real small screen, let the "phone" become the whole screen. */
@media (max-width: 480px) {
    /* Fixed-height column: account strip on top, the "phone" fills the rest. */
    .phone-stage { padding: 0; gap: 0; height: 100vh; height: 100dvh; min-height: 0; justify-content: flex-start; }
    .app-logo { display: none; }
    .phone {
        width: 100%;
        flex: 1;
        min-height: 0;
        aspect-ratio: auto;   /* full-screen on mobile, not ratio-locked */
        max-height: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .phone::before { display: none; }
    .chat { padding-top: 1rem; }
    .account { top: 6px; right: 8px; gap: 0.35rem; }
    /* In the main layout, put the account strip in its own row above the navbar
       instead of floating over it (EmptyLayout's .account-floating is unaffected). */
    .phone-stage > .account {
        position: static;
        align-self: stretch;
        justify-content: flex-end;
        padding: 6px 8px;
        background: var(--panel);
        border-bottom: 1px solid var(--border);
    }
    .account-user {
        font-size: 0.72rem; padding: 0.25rem 0.5rem;
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Wrap links onto a second row when they don't fit (e.g. Admin's 5 links). */
    .navbar { padding-top: 0.5rem; flex-wrap: wrap; row-gap: 0.3rem; }
    .account-signout { font-size: 0.72rem; padding: 0.25rem 0.55rem; }
    .lang-option { font-size: 0.72rem; padding: 0.25rem 0.45rem; }
}