:root{font-family:system-ui,sans-serif;color:#173047;background:#edf3f6}*{box-sizing:border-box}body{margin:0}header{background:#103044;color:white;padding:22px 5%;display:flex;align-items:center;justify-content:space-between}header a{color:#a7e6db}h1{margin:0;font-size:1.6rem}small{font-weight:normal}main{max-width:1100px;margin:24px auto;padding:0 16px}.card{background:white;border:1px solid #d3e0e6;border-radius:12px;padding:20px;margin-bottom:16px}button,input,textarea,select{font:inherit;padding:10px;border-radius:6px;border:1px solid #a4b7c2}button{background:#086e70;color:white;cursor:pointer}button:disabled{opacity:.5}textarea{width:100%;min-height:80px}input{max-width:100%}form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}form textarea{flex:1;min-width:200px}.messages{min-height:220px;max-height:55vh;overflow:auto;margin-bottom:16px}.message{padding:12px 16px;border-radius:8px;background:#eef4f7;margin:10px 0;white-space:pre-wrap;overflow-wrap:anywhere}.message.customer{background:#e0f4ed;margin-left:12%}.message.operator{border-left:4px solid #087b74}.message.system{font-size:.85rem;background:#faf5df}.role{font-size:.75rem;font-weight:bold;text-transform:uppercase;display:block;margin-bottom:4px}.muted{color:#516b7a}.error{color:#a11b28;white-space:pre-wrap}.layout{display:grid;grid-template-columns:280px 1fr;gap:16px}.conversation{display:block;width:100%;text-align:left;margin-bottom:8px;background:#eef4f7;color:#173047;overflow-wrap:anywhere}.selected{border:2px solid #087b74}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}label{display:block;margin:10px 0}#escalations{white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:700px){.layout{grid-template-columns:1fr}header{gap:15px;padding:18px}h1{font-size:1.2rem}.card{padding:14px}}

/* Customer messaging interface; dashboard layout remains independent. */
.customer-chat{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#f3f6f8}
.customer-chat>header{flex:none;padding:16px 5%}
.customer-chat .chat-main{width:100%;max-width:860px;flex:1;min-height:0;margin:0 auto;padding:20px 16px 12px;display:flex;flex-direction:column;gap:10px}
.chat-window{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff;border:1px solid #dbe5ea;border-radius:20px;box-shadow:0 10px 36px #1030440a;overflow:hidden}
.chat-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid #e8eef1;flex:none}
.chat-heading p{margin:5px 0 0 17px;font-size:.8rem;color:#627885}
.online-dot{display:inline-block;width:8px;height:8px;background:#13887c;border-radius:50%;margin-right:9px}
.chat-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chat-actions button{background:#f6f9fa;color:#315466;border-color:#dbe5ea;font-size:.8rem;min-height:40px}
.customer-chat .messages{flex:1;min-height:0;max-height:none;padding:16px 22px;margin:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;scrollbar-gutter:stable}
.customer-chat .message{width:fit-content;max-width:85%;margin:12px 0;padding:12px 16px;background:#f0f4f6;border-radius:16px 16px 16px 4px;line-height:1.55;font-size:.95rem}
.customer-chat .message.customer{margin-left:auto;background:#dff3ec;border-radius:16px 16px 4px 16px}
.customer-chat .role{font-weight:500;text-transform:none;font-size:.72rem;color:#536d79}
.customer-chat .message.system{margin:12px auto;background:#faf5df;font-size:.82rem}
.customer-chat .message.unconfirmed{border:1px dashed #ac6f39}
.customer-chat .composer{padding:14px 20px 12px;border-top:1px solid #e8eef1;flex:none;background:white}
.customer-chat #send{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:10px}
.customer-chat #text{min-width:0;min-height:48px;max-height:120px;resize:vertical;border:1px solid #ccdce3;background:#f8fafb;line-height:1.45;padding:12px 14px;border-radius:14px;flex:1;font-size:16px}
.customer-chat #send button{min-height:48px;border:0;border-radius:12px;padding:12px 18px}
.customer-chat #send-hint{font-size:.73rem;margin:8px 0 0}
.customer-chat #error{font-size:.85rem;margin:8px 0 0;max-height:72px;overflow:auto}
.customer-chat #error:empty{display:none}
.chat-information{flex:none;font-size:.78rem;color:#516b7a;padding:0 8px;max-height:18vh;overflow:auto}
.chat-information summary{cursor:pointer;padding:3px 0}
.chat-information p{margin:6px 0;line-height:1.45}
.typing-label{display:block;font-size:.75rem;color:#536d79;margin-bottom:8px}
.typing-dots{display:flex;gap:5px;height:14px;align-items:center}
.typing-dots span{width:7px;height:7px;border-radius:50%;background:#6c8b96;animation:nora-dot 1.2s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.15s}.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes nora-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.customer-chat :focus-visible{outline:3px solid #087f86;outline-offset:3px}
@media(max-width:600px){.customer-chat>header{padding:12px 16px}.customer-chat header h1 small{display:block;font-size:.72rem;margin-top:3px}.customer-chat header a{font-size:.75rem}.customer-chat .chat-main{padding:8px 6px max(8px,env(safe-area-inset-bottom));gap:5px}.chat-window{border-radius:14px}.chat-heading{padding:12px;gap:6px}.chat-heading b{font-size:.9rem}.chat-actions{gap:4px;max-width:145px}.chat-actions button{font-size:.72rem;padding:7px 9px;min-height:36px}.customer-chat .messages{padding:10px 12px}.customer-chat .message{max-width:92%}.customer-chat .composer{padding:10px 12px}.customer-chat #send button{padding:12px}.customer-chat #send-hint{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){.typing-dots span{animation:none;opacity:.7}}
/* Processes only: library first, with a dedicated full-width editor. */
#processes [hidden]{display:none!important}
#processes .process-field{display:grid;gap:7px;min-width:0}
#processes label{margin:0;font-weight:600;line-height:1.4}
#processes input,#processes textarea,#processes select{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
#processes input,#processes select{min-height:44px}
#processes textarea{display:block;resize:vertical;line-height:1.55;min-width:0;flex:none}
#processes button{min-height:44px}
#process-search{display:grid;grid-template-columns:minmax(0,1fr) 150px auto auto;gap:12px;align-items:end;margin:24px 0}
#process-list{display:grid;gap:10px}
#process-list .conversation{margin:0;padding:16px;line-height:1.5}
#process-more{margin-top:16px}
.process-editor-header{border-bottom:1px solid #d3e0e6;margin:24px 0;padding-bottom:20px}
#processes .process-secondary{background:#eef4f7;color:#173047}
#process-editor-heading{margin:20px 0 8px;font-size:1.25rem}
#process-meta{margin:0;font-size:.85rem;line-height:1.6;overflow-wrap:anywhere}
#process-editor{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:stretch}
#processes .process-form-section{display:grid;gap:20px;min-width:0}
#processes h4{margin:0;font-size:1rem}
.process-field-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
#process-description{min-height:120px}
#process-steps{min-height:260px}
#process-tools{min-height:130px}
#process-guidance{min-height:230px}
.process-editor-footer{border-top:1px solid #d3e0e6;padding-top:20px;display:grid;gap:12px}
#process-feedback{margin:0;line-height:1.5;overflow-wrap:anywhere}
#process-feedback:empty{display:none}
.process-editor-actions{display:flex;gap:12px;flex-wrap:wrap}
#processes :focus-visible{outline:3px solid #087f86;outline-offset:3px}
#process-usage button{font-size:.85rem}
#diagnostics{white-space:pre-wrap;overflow-wrap:anywhere}
.attachment{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;margin-top:8px;border:1px solid #b9ccd3;border-radius:10px;white-space:normal;max-width:100%;font-size:.8rem;overflow-wrap:anywhere}
.attachment img{display:block;max-width:100%;width:auto;max-height:170px;object-fit:contain;border-radius:5px}
.attachment button{font-size:.8rem;padding:6px 10px;min-height:36px}
#attachment-preview{display:flex;gap:8px;max-height:210px;overflow:auto}
#attachment-preview .attachment{min-width:140px;max-width:230px;margin:0 0 10px}
#file-limits{font-size:.73rem;margin:5px 0 0}
.chat-window.dragging{outline:3px dashed #087f86;outline-offset:-5px}
@media(max-width:900px){#process-search{grid-template-columns:minmax(0,1fr) minmax(130px,180px)}#process-search button{width:100%}}
@media(max-width:600px){#process-search,.process-field-pair{grid-template-columns:minmax(0,1fr)}#process-search{gap:16px}.process-editor-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.process-editor-actions button{width:100%}#process-steps{min-height:240px}#process-guidance{min-height:210px}}

.customer-chat #conversation-picker{padding:12px 20px;overflow:auto;max-height:35vh;border-bottom:1px solid #e8eef1}
.customer-chat #conversation-picker[hidden]{display:none}
.customer-chat #conversation-picker h2{font-size:1rem;margin:0}
.customer-chat #conversation-list{display:grid;gap:6px}
.customer-chat #conversation-list button{text-align:left;background:#eef4f7;color:#173047;padding:10px;border-radius:8px;overflow-wrap:anywhere}

.customer-chat #device-access{padding:24px;overflow:visible;max-height:none;flex-shrink:0;width:calc(100% - 32px);max-width:440px;margin:24px auto}
.customer-chat #device-access[hidden]{display:none}
.customer-chat #device-access h2{font-size:1.25rem}
.customer-chat #verify-code{display:block}


.contact-card{margin:16px;padding:20px;border:1px solid #cbd5e1;border-radius:14px;background:#f8fafc;max-width:520px;box-sizing:border-box}
.contact-card h2{margin:0 0 8px;font-size:1.25rem}.contact-card p{font-size:.9rem;line-height:1.5}
.contact-card label{display:block;margin:10px 0}.contact-card label input{display:block;width:100%;box-sizing:border-box;margin-top:5px}
.contact-card button{margin:5px 5px 5px 0}.otp-group{border:0;padding:0;margin:16px 0;min-width:0;width:100%}.otp-group legend{font-size:.85rem;margin-bottom:8px}
.otp-boxes{display:flex;gap:8px}.otp-boxes input{width:42px;min-width:0;height:50px;text-align:center;font-size:1.5rem;border:1px solid #94a3b8;border-radius:8px;background:white;padding:0}
.otp-boxes input:focus{outline:2px solid #176b64;outline-offset:2px}
@media(max-width:400px){.contact-card{margin:10px;padding:14px}.otp-boxes{gap:6px}.otp-boxes input{width:36px;height:46px}}

.contact-card [hidden]{display:none!important}
.customer-chat #details-panel{overflow:auto;max-height:55vh;flex-shrink:0}
.contact-card form{display:block}

.device-verifying .chat-window{display:block;overflow-y:auto}
.device-verifying .composer,.device-verifying .messages{display:none}
.device-verifying #case-link,.device-verifying #my-details,.device-verifying #history,.device-verifying #forget{display:none}
.device-verifying .chat-heading{padding:16px 20px}
.device-verifying .chat-heading p{display:none}
.customer-chat #verify-code .otp-digit{flex:1;width:0;min-width:0;max-width:48px;font-size:24px;letter-spacing:normal}
.otp-boxes{width:100%;max-width:328px}
.customer-chat:has(#details-panel:not([hidden])) .chat-window{overflow-y:auto}

.customer-chat [hidden]{display:none!important}
.welcome-card{padding:clamp(24px,8vw,80px);text-align:center;margin:auto;max-width:600px}
.welcome-card h2{color:#173e50;font-size:1.6rem}
.welcome-card p{line-height:1.6;margin:18px 0 24px;color:#526b78}
.welcome-card button{margin:6px;min-height:48px}