compose: Move row of formatting buttons into the textbox.

[N-Shar-ma]

The row of buttons is placed using CSS grid template areas so that visually it is now inside the bottom edge of the textbox. The color of the buttons row and individual buttons is changed to match the color of the textbox. All textbox border / box shadow properties are now applied to its parent instead which is extended under the buttons' row, so that its border snuggly fits around the buttons row too.

Notable side effects:

• In dark mode the textbox in focused state now has a light border which does not match the recipient input's current border which doesn't change when focused. Likely, the recipient input should be updated to match the textbox's border color.
• The dividers in the formatting buttons row are not vertically centered now. This should be figured out soon.

Known concern:

• The textbox resize handle still shows, breaking the illusion of the buttons row being inside the textbox. It will be removed when enabling a 3 stage resizeable textbox.

Fixes: #28702.

Screenshots and screen captures:

Light Mode

Hovering a button:

Focus in textbox:

Preview mode:

Dark Mode

Hovering a button:

Focus in textbox:

Preview mode:

Self-review checklist

• Self-reviewed the changes for clarity and maintainability
  (variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

• Explains differences from previous plans (e.g., issue description).
• Highlights technical choices and bugs encountered.
• Calls out remaining decisions and concerns.
• Automated tests verify logic where appropriate.

Individual commits are ready for review (see commit discipline).

• Each commit is a coherent idea.
• Commit message(s) explain reasoning and motivation for changes.

Completed manual review and testing of the following:

• Visual appearance of the changes.
• Responsiveness and internationalization.
• Strings and tooltips.
• End-to-end functionality of buttons, interactions and flows.
• Corner cases, error conditions, and easily imagined bugs.

[zulipbot]

Hello @zulip/design members, this pull request was labeled with the "redesign" label, so you may want to check it out!

[alya]

Cool! A couple of notes from testing the PR:

1. This change breaks keyboard navigation when you use Tab starting from the main compose area. The focus goes from the send buttons to the top of app, rather than the formatting buttons.
2. The hover color between the buttons and the three-dot buttons menu is inconsistent in dark theme. I guess we should remove the blue in the menu?
   
3. When playing with the width, the ? button overflows.
   

That's all I've got so far!

[N-Shar-ma]

@alya Thanks for the feedback!

1. Even after lots of investigation, I'm not sure why the buttons are skipped when tabbing. I'll soon make a #development-help thread to figure this out (https://chat.zulip.org/#narrow/stream/101-design/topic/Changing.20tabbing.20order)
2. Thanks for noticing this issue! Fixed:
   
3. This problem was only on Chrome (not Firefox) since the native scrollbar there takes up a significant amount of space, making the compose box narrower. I've tweaked the breakpoints to fit in, in Chrome too

[N-Shar-ma]

@alya The tabbing order has been fixed! All feedback so far has now been addressed