feat: improve the input area

Author: bajrangCoder

src/pages/acp/acp.js

@@ -251,11 +251,14 @@ export default function AcpPageInclude() {
 				{$emptyState}
 				{$messages}
 				<div className="acp-input-area">
-					<div className="acp-input-wrapper">
-						{$attachBtn}
+					<div className="acp-input-container">
 						{$textarea}
-						{$sendBtn}
-						{$cancelBtn}
+						<div className="acp-input-toolbar">
+							{$attachBtn}
+							<div className="acp-toolbar-spacer"></div>
+							{$sendBtn}
+							{$cancelBtn}
+						</div>
 					</div>
 				</div>
 			</div>

src/pages/acp/acp.scss

@@ -322,19 +322,18 @@
 			);
 			border-top: 1px solid var(--border-color);
 
-			.acp-input-wrapper {
+			.acp-input-container {
 				display: flex;
-				align-items: flex-end;
-				gap: 6px;
+				flex-direction: column;
+				border-radius: 14px;
 				border: 1.5px solid
-					color-mix(in srgb, var(--border-color), transparent 30%);
-				border-radius: 16px;
+					color-mix(in srgb, var(--border-color), transparent 20%);
 				background: color-mix(
 					in srgb,
 					var(--popup-background-color),
 					var(--secondary-color) 40%
 				);
-				padding: 4px 4px 4px 12px;
+				overflow: hidden;
 				transition:
 					border-color 0.2s,
 					box-shadow 0.2s;
@@ -351,69 +350,82 @@
 			}
 
 			textarea {
-				flex: 1;
+				width: 100%;
 				min-height: 40px;
 				max-height: 128px;
 				resize: none;
 				border: none;
 				background: transparent;
 				color: var(--popup-text-color);
-				padding: 10px 0;
+				padding: 14px 16px 8px;
 				font-size: 0.88rem;
 				font-family: inherit;
-				line-height: 1.4;
+				line-height: 1.5;
 				outline: none;
+				box-sizing: border-box;
+			}
+
+			.acp-input-toolbar {
+				display: flex;
+				align-items: center;
+				gap: 2px;
+				padding: 4px 8px 8px;
+			}
+
+			.acp-toolbar-spacer {
+				flex: 1;
 			}
 
 			.acp-attach-btn {
-				width: 32px;
-				height: 32px;
+				width: 34px;
+				height: 34px;
 				border-radius: 8px;
 				border: none;
-				background: none;
+				background: transparent;
 				color: var(--secondary-text-color);
-				opacity: 0.35;
+				opacity: 0.4;
 				font-size: 1.1rem;
 				cursor: pointer;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				flex-shrink: 0;
-				margin-bottom: 4px;
-				transition: opacity 0.15s;
+				transition:
+					opacity 0.15s,
+					background 0.15s;
 
 				&:active {
 					opacity: 0.7;
+					background: color-mix(
+						in srgb,
+						var(--secondary-text-color),
+						transparent 88%
+					);
 				}
 			}
 
 			.acp-send-btn,
 			.acp-cancel-btn {
-				width: 36px;
-				height: 36px;
-				border-radius: 10px;
+				width: 34px;
+				height: 34px;
+				border-radius: 8px;
 				border: none;
-				font-size: 0.88rem;
+				font-size: 1rem;
 				cursor: pointer;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				transition: all 0.15s;
 				flex-shrink: 0;
-				margin-bottom: 2px;
 			}
 
 			.acp-send-btn {
-				background: color-mix(
-					in srgb,
-					var(--secondary-text-color),
-					transparent 20%
-				);
-				color: var(--secondary-color);
+				background: transparent;
+				color: var(--secondary-text-color);
+				opacity: 0.4;
 
 				&:active {
-					transform: scale(0.92);
-					opacity: 0.85;
+					opacity: 0.8;
 				}
 
 				&:disabled {