diff --git a/static/css/chat.css b/static/css/chat.css index e226bf8..a82a030 100644 --- a/static/css/chat.css +++ b/static/css/chat.css @@ -86,8 +86,8 @@ body { padding: 20px; height: 100vh; height: 100dvh; overflow: hidden; } .recent-item:hover { color: var(--brand-text); } .recent-date { white-space: nowrap; color: var(--muted); font-size: 10px; } .composer { flex-shrink: 0; align-self: center; width: min(820px, calc(100% - 76px)); padding: 12px 0 15px; background: var(--surface); } -.composer-toolbar { display: flex; gap: 8px; align-items: flex-start; } -.composer-toolbar .hot-bar { flex: 1; min-width: 0; } +.composer-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } +.composer-toolbar .hot-bar { flex: 1; min-width: 0; margin-bottom: 0; } .voice-toggle, .voice-hold { display: none; } .voice-panel { position: absolute; z-index: 35; left: 50%; bottom: calc(var(--composer-height, 150px) + 14px); transform: translateX(-50%); width: min(330px, calc(100% - 32px)); padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--brand-text); box-shadow: var(--shadow); text-align: center; pointer-events: none; } .voice-panel p { margin: 9px 0; font-size: 13px; } @@ -224,9 +224,15 @@ body { padding: 20px; height: 100vh; height: 100dvh; overflow: hidden; } #input-text, .history-search { font-size: max(16px, 1em); } .history-search { height: 44px; } .history-search-wrap svg { top: 14px; } + .composer-toolbar { margin-bottom: 8px; } + .hot-bar .hot-capsule { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; } + .input-area { align-items: center; } + .input-area .emoji-control { display: flex; align-items: center; } + #upload-btn, #emoji-toggle, #send-button { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-height: 44px; padding-top: 0; padding-bottom: 0; border-radius: 8px; line-height: 1; } + #input-text { min-height: 44px; padding-top: 10px; padding-bottom: 10px; line-height: 1.5; } .user-message, .robot-message { max-width: 94%; } .del-history-btn { opacity: 1; } - .voice-toggle { display: grid; place-items: center; flex: 0 0 40px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--brand-text); font-size: 20px; } + .voice-toggle { display: grid; place-items: center; flex: 0 0 40px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--brand-text); font-size: 20px; line-height: 1; } .input-area.voice-mode #input-text, .input-area.voice-mode .emoji-control, .input-area.voice-mode #send-button { display: none; } .input-area.voice-mode .voice-hold { display: block; flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); color: var(--text); font-size: 15px; font-weight: 600; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; } .voice-hold.is-recording { color: var(--brand-text); background: var(--brand-soft); } @@ -255,14 +261,13 @@ body { padding: 20px; height: 100vh; height: 100dvh; overflow: hidden; } .hot-capsule { font-size: 10px; padding: 6px 8px; } #recentChatWrap { grid-template-columns: 1fr; gap: 0; } .composer { width: calc(100% - 24px); padding-bottom: calc(10px + env(safe-area-inset-bottom)); } - .hot-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px; margin-bottom: 8px; } + .hot-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px; } .hot-bar-label { display: none; } - .hot-bar .hot-capsule { white-space: nowrap; flex-shrink: 0; min-height: 32px; padding: 6px 9px; font-size: 11px; } + .hot-bar .hot-capsule { white-space: nowrap; flex-shrink: 0; padding: 6px 9px; font-size: 11px; } .input-area { gap: 7px; padding: 7px; } #send-button { min-width: 57px; padding: 0 12px; } - #upload-btn { flex-basis: 36px; height: 42px; } + #upload-btn { flex-basis: 36px; } #input-text { font-size: 16px; } - #send-button { min-height: 42px; } .attachment-remove { width: 40px; height: 40px; } .keyboard-hint { display: none; } .composer-footer { justify-content: center; padding-top: 7px; }