body{font-family:system-ui,-apple-system,sans-serif;background-color:#f9fafb;color:#1f2937;min-width:100vh}#root{width:100%;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Ubuntu,sans-serif;background-color:#f9fafb;color:#1f2937;min-width:100vh}.app{min-width:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background-color:#fff;border-bottom:1x solid #e5e7ed}.app-header h1{font-size:24px;font-weight:700;color:#111872}.note-count{font-size:14px;color:#6b7480;background:#f3f4f6;padding:4px 12px;border-radius:12px}.app-main{padding-bottom:100px;transition:margin-right .3s ease}.app-main.chat-open{margin-right:380px}@media (max-width:768px){.app-header{height:10rem}.app-main.chat-open{margin-right:0}.app-header h1{font-size:4.5rem}.note-count{font-size:2.3rem}}.note-card{font-family:Cause,cursive;background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 8px #00000014;transition:transform .2s,box-shadow .2s;position:relative}.note-card:hover{transform:translateY(-.5rem);box-shadow:0 4px 16px #0000001f}.note-id{position:absolute;top:-8px;left:12px;background:#4f46e5;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}.note-content{margin-top:8px;font-size:15px;line-height:1.5;color:#1f2937;white-space:pre-wrap;word-break:break-word}.note-date{margin-top:12px;font-size:12px;color:#9ca3af}@media (max-width: 768px){.note-id{top:-30px;left:-30px;font-size:2rem}.note-content{font-size:2.5rem;padding-left:20px}.note-date{font-size:2rem;padding-left:20px;margin-top:12px;padding-bottom:20px}}@media (max-width: 500px){.note-card{margin:1rem;box-shadow:0 10px 20px #00000014}.note-card:hover{box-shadow:0 15px 25px #0000001f}.note-id{top:-20px;left:-20px;font-size:2.5rem}.note-content{font-size:2.5rem;margin-top:5%;padding-left:50px;padding-right:1rem;padding-bottom:20px}.note-date{font-size:2rem;padding-left:50px;margin-top:12px;padding-bottom:20px}}.note-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding:24px;max-width:1200px;margin:0 auto}.note-list-empty{display:flex;align-items:center;justify-content:center;height:60vh;color:#9ca3af;font-size:18px;text-align:center;padding:20px}@media (max-width: 768px){.note-list{grid-template-columns:1fr 1fr;margin:1rem}}@media (max-width: 500px){.note-list{grid-template-columns:auto}}.chat-panel{position:fixed;right:0;top:0;bottom:0;width:380px;background:#fff;box-shadow:-4px 0 20px #00000026;display:flex;flex-direction:column;z-index:200;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e5e7eb}.chat-header h3{margin:0;font-size:18px;color:#1f2937}.chat-instructions{position:sticky;top:0;background:#f0f0ff;padding:12px 20px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#4f46e5;z-index:10}.chat-instructions p{margin:2px 0}.chat-instructions strong{color:#1f2937}.chat-close{background:none;border:none;font-size:28px;cursor:pointer;color:#6b7280;line-height:1;padding:0 4px}.chat-close:hover{color:#1f2937}.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.chat-welcome{text-align:center;color:#6b7280;padding:40px 20px}.chat-welcome p{margin:8px 0}.chat-hint{font-size:13px;color:#9ca3af;font-style:italic}.chat-message{display:flex}.chat-message.user{justify-content:flex-end}.chat-message.bot{justify-content:flex-start}.chat-bubble{max-width:85%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.chat-message.user .chat-bubble{background:#4f46e5;color:#fff;border-bottom-right-radius:4px}.chat-message.bot .chat-bubble{background:#f3f4f6;color:#1f2937;border-bottom-left-radius:4px}.chat-bubble.loading{color:#9ca3af}.chat-input-area{display:flex;gap:8px;padding:16px;border-top:1px solid #e5e7eb}.chat-input-area input{flex:1;padding:10px 14px;border:1px solid #d1d5db;border-radius:20px;font-size:14px;outline:none}.chat-input-area button{padding:10px 18px;background:#4f46e5;color:#fff;border:none;border-radius:20px;font-size:14px;cursor:pointer;font-weight:500}.chat-input-area button:hover:not(:disabled){background:#4338ca}.chat-input-area button:disabled{opacity:.5;cursor:not-allowed}.chat-input-area input:focus{border-color:#4f46e5}@media (max-width: 768px){.chat-panel{width:70%}.chat-welcome{font-size:3rem}.chat-header{height:12rem}.chat-header h3{font-size:4.5rem;font-weight:500;padding:1rem}.chat-close{font-size:4rem}.chat-hint{padding-top:20px;font-size:1.5rem}.chat-input-area input{height:6rem;font-size:2rem}.chat-input-area button{width:20%;font-size:2.8rem}.chat-message.user .chat-bubble{font-size:2rem;padding:.5rem 3rem .5rem 2rem}.chat-message.bot .chat-bubble{font-size:2rem;padding:1rem 3rem}.bot{padding-left:1rem}}@media (max-width: 500px){.chat-panel{width:100%}}.message-button{position:fixed;right:24px;bottom:24px;width:56px;height:56px;font-size:3rem;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;text-shadow:2px 2px 6px #000000;transition:transform .2s;z-index:99;animation:shake .8s ease-in-out .5s}@keyframes shake{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-15deg)}40%,80%{transform:rotate(15deg)}}@keyframes shake-mobile{0%,to{transform:translate(-50%) rotate(0)}20%,60%{transform:translate(-50%) rotate(-15deg)}40%,80%{transform:translate(-50%) rotate(15deg)}}.message-button:hover{transform:scale(1.2)}@media (max-width: 768px){.message-button{font-size:8rem;left:90%;bottom:5%;transform:translate(-50%);animation-name:shake-mobile}}@media (max-width: 500px){.message-button{font-size:6rem;left:85%}}