Чат v1.1.1: упростить ввод и стороны по устройству

web/app.css

@@ -752,9 +752,8 @@ input[type="password"] {
   margin-top: 0;
 }
 
-/* строка сообщения: автор над текстом, блок целиком к своему краю —
-   свои вправо, чужие влево (ADR-065). Ширина блока ограничена, иначе
-   выравнивать нечего — текст в один абзац занял бы всю ленту. */
+/* строка сообщения: автор над текстом. На телефоне и планшете своё стоит
+   у правого края; на десктопе все сообщения идут слева (ADR-077). */
 
 .line {
   display: flex;
@@ -773,6 +772,17 @@ input[type="password"] {
   align-items: flex-end;
 }
 
+/* Ширина окна не отличает планшет от десктопа: iPad бывает шире ноутбука.
+   Точный указатель с hover — признак десктопного способа работы; там сторона
+   не помогает и только заставляет взгляд ходить через всю ленту. */
+
+@media (hover: hover) and (pointer: fine) {
+  .line--me {
+    align-self: flex-start;
+    align-items: flex-start;
+  }
+}
+
 .author {
   display: flex;
   flex-wrap: wrap;
@@ -918,12 +928,12 @@ input[type="password"] {
   line-height: 1.5;
 }
 
-/* строка сообщения — редактируемый блок, а не поле формы (ADR-069):
-   растёт под текст сама, дальше семи строк — прокрутка. Переносы строк
-   в ней настоящие символы, поэтому pre-wrap; длинное слово рвётся,
-   иначе строка ввода уезжает вбок */
+/* строка сообщения — textarea (ADR-076): браузер сам держит вставку,
+   выделение, отмену и предел. Число rows растёт под текст до семи строк,
+   дальше поле прокручивается */
 
 .input .input__field--text {
+  resize: none;
   overflow-y: auto;
   /* семь строк — это семь высот строки плюс вертикальные отступы:
      без них предел вышел бы вдвое ниже обещанного */
@@ -932,14 +942,6 @@ input[type="password"] {
   overflow-wrap: anywhere;
 }
 
-/* подсказка пустой строки: placeholder у блока не бывает, текст приходит
-   атрибутом data-hint (ADR-069) */
-
-.input .input__field--text:empty::before {
-  content: attr(data-hint);
-  color: var(--stone);
-}
-
 .input .input__field::placeholder {
   color: var(--stone);
 }