ibody { font-family: Arial, sans-serif; background: #f5f5f5; margin: 0; padding: 0; } .navbar { background: #007bff; color: white; padding: 12px; font-size: 1.2rem; font-weight: bold; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .container { max-width: 650px; margin: 20px auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 8px rgba(0,0,0,0.08); } #chat-output { min-height: 200px; max-height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 12px; margin-bottom: 12px; background: #fafafa; white-space: pre-wrap; border-radius: 4px; font-size: 0.95rem; position: relative; } .message { margin-bottom: 8px; } form { display: flex; gap: 0; } #chat-input { flex: 1; padding: 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px 0 0 4px; outline: none; } button { padding: 0 20px; font-size: 1rem; border: none; background: #007bff; color: white; cursor: pointer; border-radius: 0 4px 4px 0; } button:hover { background: #0056b3; } /* Prism copy button - always visible, prominent */ pre[class*="language-"] { position: relative; padding-top: 40px; /* space for Copy button */ } .prism-toolbar { position: absolute !important; top: 6px !important; right: 6px !important; opacity: 1 !important; z-index: 20 !important; } .prism-toolbar button { display: inline-block !important; background: #007bff !important; color: #fff !important; border-radius: 4px; padding: 3px 8px; font-size: 0.85rem; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .prism-toolbar button:hover { background: #0056b3 !important; }