/* NeneForms shared stylesheet. ONE SOURCE, used by all four pages.
 *
 * Published to two buckets by tools/deploy-frontend.ps1, because the designer and the submissions
 * dashboard sit behind different CloudFront distributions.
 *
 * RULE: anything assuming the fixed-height two-panel chat layout must be scoped to
 * `body.chat-page`. Only chat.html carries that class. Unscoped viewport rules here previously
 * made three other pages unscrollable.
 *
 * Enforced by testing/frontend/test-css-contract.mjs.
 */
/* ===== Base ===== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box }
/* Shared by every page: typography, colour, and no more. */
html, body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
    color: #333;
    background: #f5f5f5;
    margin: 0;
    padding: 0;
}

/* The fixed-viewport layout belongs to the chat page only. Unscoped, this is what made the Forms
 * List and both submissions pages unscrollable. */
html:has(body.chat-page), body.chat-page {
    height: 100%;
    overflow: hidden;
}
body.chat-page #wrapper { height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; display:flex; flex-direction:column; overflow:hidden }
.clear { display:none !important; height:0; margin:0; padding:0 }
img { max-width:100%; height:60px; display:block }
a { color:#005BAC; text-decoration:none }
a:hover { text-decoration:underline }

/* ===== Mast ===== */
#mast { background:#386193; padding:10px 20px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 2px 4px rgba(0,0,0,.1); flex-shrink:0 }
.main-nav { background:#244D7A; padding:0 20px; flex-shrink:0 }
/* justify-content centres the items. margin:0 auto centres only the container. */
.nav-inner { max-width:1400px; margin:0 auto; display:flex; justify-content:center; gap:4px; align-items:center; flex-wrap:wrap }
.nav-item { position:relative }
.nav-btn { background:none; border:none; color:#fff; padding:12px 16px; font-family:inherit; font-size:0.9rem; cursor:pointer; text-decoration:none; display:block; border-radius:4px 4px 0 0 }
a.nav-item.nav-btn { display:flex; align-items:center; padding:12px 16px; line-height:1 }
.nav-btn:hover { background:rgba(255,255,255,0.1) }
.nav-active { background:rgba(255,255,255,0.15); border-bottom:2px solid #fff }

/* ===== Chat Layout ===== */
#chat-layout { flex:1; display:flex; overflow:hidden; min-height:0 }

/* ===== Chat Panel (Left) ===== */
#chat-panel { width:45%; min-width:360px; display:flex; flex-direction:column; background:#fff; border-right:1px solid #ddd }
#chat-header { padding:16px 20px; border-bottom:1px solid #eee }
#chat-header h1 { font-size:1.4em; color:#386193; margin-bottom:4px }
#chat-header p { font-size:0.85em; color:#505a5f; margin:0 }

#chat-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px }

/* ===== Messages ===== */
.message { display:flex; max-width:90% }
.bot-message { align-self:flex-start }
.user-message { align-self:flex-end }
.message-content { padding:12px 16px; border-radius:12px; font-size:0.9em; line-height:1.6 }
.bot-message .message-content { background:#f0f4f8; color:#0b0c0c; border-bottom-left-radius:4px }
.user-message .message-content { background:#386193; color:#fff; border-bottom-right-radius:4px }
.message-content p { margin-bottom:8px }
.message-content p:last-child { margin-bottom:0 }
.message-content ul { margin:8px 0; padding-left:20px }
.message-content li { margin-bottom:4px; font-size:0.9em }
.message-content code { background:rgba(0,0,0,.06); padding:2px 5px; border-radius:3px; font-size:0.88em }

/* Thinking indicator */
.thinking-message .message-content { display:flex; align-items:center; gap:10px }
.thinking-dots { display:flex; gap:4px }
.thinking-dots span { width:8px; height:8px; background:#386193; border-radius:50%; animation:bounce 1.4s infinite ease-in-out }
.thinking-dots span:nth-child(2) { animation-delay:.2s }
.thinking-dots span:nth-child(3) { animation-delay:.4s }
@keyframes bounce { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }

/* ===== Chat Input ===== */
#chat-input-area { padding:12px 20px; border-top:1px solid #eee; background:#fafafa }
#chat-input-wrapper { display:flex; align-items:flex-end; gap:8px; background:#fff; border:1px solid #ccc; border-radius:8px; padding:8px 12px }
#chatInput { flex:1; border:none; outline:none; resize:none; font-family:'Roboto',sans-serif; font-size:14px; line-height:1.5; max-height:120px; min-height:36px }
.send-btn { background:#386193; border:none; color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; flex-shrink:0 }
.send-btn:hover { background:#0e335b }
.send-btn:disabled { background:#b1b4b6; cursor:not-allowed }
.chat-disclaimer { font-size:0.75em; color:#505a5f; margin-top:6px; text-align:center }

/* ===== Preview Panel (Right) ===== */
#preview-panel { flex:1; display:flex; flex-direction:column; background:#fafafa }
#preview-header { padding:12px 20px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; background:#fff }
#preview-header h2 { font-size:1.1em; color:#333; margin:0 }
.preview-open-btn { font-size:0.85em; background:#386193; color:#fff; padding:5px 12px; border-radius:4px; text-decoration:none }
.preview-open-btn:hover { background:#0e335b; text-decoration:none }

#preview-content { flex:1; position:relative; overflow:hidden }
#preview-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#b1b4b6 }
.placeholder-icon { font-size:4em; margin-bottom:16px }
#preview-placeholder p { font-size:0.95em }

#previewFrame { width:100%; height:100%; border:none }

/* ===== Responsive ===== */
@media (max-width:900px) {
    #chat-layout { flex-direction:column }
    #chat-panel { width:100%; min-width:unset; border-right:none; border-bottom:1px solid #ddd; max-height:60vh }
    #preview-panel { min-height:40vh }
}

/* ===== Session Banner ===== */
.session-banner { background:#f0f4f8; border:1px solid #386193; border-radius:4px; padding:6px 12px; font-size:0.78em; color:#386193; margin-top:8px }
.session-banner a { color:#386193; font-weight:bold }

/* ===== Status Banner ===== */
.status-banner { background:#e8f5e9; border:1px solid #2e7d32; border-radius:4px; padding:6px 12px; font-size:0.8em; color:#2e7d32; margin-top:6px; font-weight:bold }

/* ===== Action Buttons ===== */
.action-buttons { display:flex; gap:10px; padding:12px 0; flex-wrap:wrap }
.action-btn { border:none; border-radius:6px; cursor:pointer; font-family:Arial,sans-serif; font-weight:bold; font-size:13px; padding:10px 20px; transition:.2s }
.submit-btn { background:#386193; color:#fff }
.submit-btn:hover { background:#0e335b }
.scrap-btn { background:#fff; color:#d32f2f; border:2px solid #d32f2f }
.scrap-btn:hover { background:#ffebee }

/* ===== Inline Form (email/PDF) ===== */
.inline-form { display:flex; flex-direction:column; gap:12px }
.inline-form-group label { display:block; font-weight:bold; margin-bottom:4px; font-size:0.9em }
.inline-form-group input[type="text"] { width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; font-size:14px }
.inline-form-group input[type="text"]:focus { outline:2px solid #386193 }
.inline-radio { display:flex; gap:16px; margin-top:4px }
.inline-radio label { font-weight:normal; display:flex; align-items:center; gap:4px; cursor:pointer }

.secondary-btn { background:#fff; color:#386193; border:2px solid #386193 }
.secondary-btn:hover { background:#f0f4f8 }

/* ===== Header Row ===== */
.chat-header-row { display:flex; justify-content:space-between; align-items:center }
.new-session-btn { font-size:0.8em; background:#386193; color:#fff; padding:5px 12px; border-radius:4px; text-decoration:none; font-weight:bold }
.new-session-btn:hover { background:#0e335b; text-decoration:none }


/* ===== User Bar (inside mast) ===== */
.user-bar { display:flex; align-items:center; gap:12px; margin-left:auto; }
.user-email { color:rgba(255,255,255,0.85); font-size:0.85em; }
.logout-btn { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.4); color:#fff; padding:5px 14px; border-radius:20px; cursor:pointer; font-size:0.8em; transition:all 0.2s ease; }
.logout-btn:hover { background:rgba(255,255,255,0.3); border-color:rgba(255,255,255,0.7); }

/* My Sessions */
.my-sessions-btn{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:13px;margin-right:8px;transition:background .2s}
.my-sessions-btn:hover{background:rgba(255,255,255,.15)}
.sessions-panel{display:none;position:fixed;top:0;right:0;bottom:0;width:380px;max-width:90vw;background:#fff;box-shadow:-4px 0 20px rgba(0,0,0,.15);z-index:1000;flex-direction:column;animation:slideIn .2s ease}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.sessions-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e0e0e0}
.sessions-panel-header h2{margin:0;font-size:18px;color:#333}
.sessions-close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:#666;line-height:1;padding:0 4px}
.sessions-close-btn:hover{color:#333}
.new-session-btn{background:#386193;color:#fff;border:none;padding:6px 14px;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;margin-left:auto;margin-right:12px}
.new-session-btn:hover{background:#244D7A}
.sessions-list{flex:1;overflow-y:auto;padding:12px 16px}
.sessions-loading,.sessions-empty{color:#666;font-size:14px;text-align:center;padding:40px 20px}
.session-card{display:block;padding:14px 16px;border:1px solid #e8e8e8;border-radius:8px;margin-bottom:10px;text-decoration:none;color:#333;transition:border-color .2s,box-shadow .2s}
.session-card:hover{border-color:#1a73e8;box-shadow:0 2px 8px rgba(26,115,232,.1)}
.session-active{border-color:#1a73e8;background:#f0f7ff}
.session-card-title{font-size:14px;font-weight:500;margin-bottom:6px;line-height:1.3}
.session-card-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#888}
.session-card-status{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.status-draft{background:#fff3cd;color:#856404}
.status-submitted{background:#d4edda;color:#155724}
.status-scrapped{background:#f8d7da;color:#721c24}
.status-changes{background:#fff3cd;color:#856404}
.session-card-wrapper{position:relative;display:flex;align-items:stretch}
.session-card-wrapper .session-card{flex:1}
.session-delete-btn{position:absolute;top:8px;right:8px;background:none;border:none;color:#999;font-size:18px;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;line-height:1}
.session-delete-btn:hover{background:#f8d7da;color:#721c24}

/* ===== Dark Mode ===== */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] body, [data-theme="dark"] html { background:#181b20; color:#f0f3f6 }
[data-theme="dark"] #chat-panel { background:#2d333b; border-color:#444c56 }
[data-theme="dark"] #chat-header { border-color:#444c56 }
[data-theme="dark"] #chat-header h1 { color:#a2d2ff }
[data-theme="dark"] #chat-header p { color:#b1bac4 }
[data-theme="dark"] #chat-messages { background:#181b20 }
[data-theme="dark"] .bot-message .message-content { background:#2d333b; color:#f0f3f6 }
[data-theme="dark"] #chat-input-area { background:#2d333b; border-color:#444c56 }
[data-theme="dark"] #chat-input-wrapper { background:#2a2f37; border-color:#444c56 }
[data-theme="dark"] #chatInput { background:#2a2f37; color:#f0f3f6 }
[data-theme="dark"] #preview-panel { background:#181b20 }
[data-theme="dark"] #preview-header { background:#2d333b; border-color:#444c56 }
[data-theme="dark"] #preview-header h2 { color:#f0f3f6 }
[data-theme="dark"] #preview-placeholder { color:#b1bac4 }
[data-theme="dark"] .session-banner { background:#2d333b; border-color:#444c56; color:#b1bac4 }
[data-theme="dark"] .status-banner { background:#2d333b; color:#b1bac4 }
[data-theme="dark"] .message-content code { background:rgba(255,255,255,.08) }
[data-theme="dark"] .chat-disclaimer { color:#b1bac4 }
[data-theme="dark"] .sessions-panel { background:#2d333b }
[data-theme="dark"] .sessions-panel-header { border-color:#444c56 }
[data-theme="dark"] .sessions-panel-header h2 { color:#f0f3f6 }
[data-theme="dark"] .session-card { border-color:#444c56; color:#f0f3f6 }
[data-theme="dark"] .session-card:hover { border-color:#a2d2ff }
[data-theme="dark"] .main-nav { background:#22272e }
[data-theme="dark"] .nav-btn:hover { background:rgba(255,255,255,0.1) }
[data-theme="dark"] .nav-active { background:rgba(255,255,255,0.15); border-bottom-color:#fff }
.theme-toggle { background:none; border:none; cursor:pointer; font-size:1.2em; padding:0 4px; line-height:1 }
.theme-toggle:hover { opacity:0.7 }

/* Role badge and view-only preview, both in the mast. Here rather than in a page stylesheet
 * because all four pages show them. Note .preview-btn.preview-on is compound: .preview-on alone
 * loses to .preview-btn:hover. */
.role-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: .75em;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.5);
    color: #fff;
}
.role-admin { background: rgba(46,125,50,.55); }
.role-user  { background: rgba(255,255,255,.18); }
.preview-btn {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: .78em;
    transition: .2s;
}
.preview-btn:hover { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.7); }
.preview-btn.preview-on { background: #e2ca76; border-color: #e2ca76; color: #0b0c0c; font-weight: 700; }
.preview-btn:focus-visible, .logout-btn:focus-visible { outline: 3px solid #e2ca76; outline-offset: 2px; }
/* Hidden from sight, still announced by a screen reader. The standard clip pattern rather than
   display:none, which removes the element from the accessibility tree as well. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* Signed out panel. Shown instead of bouncing the user straight back into sign-in, which is what
   used to happen because Entra ID keeps its own session after Cognito ends hers. */
.signed-out-panel {
    max-width: 34rem;
    margin: 4rem auto;
    padding: 2rem;
    text-align: center;
}

.signed-out-panel h1 {
    margin-top: 0;
}

.signed-out-note {
    font-size: 0.9rem;
    opacity: 0.8;
}