/* D3 · multiline. Loads after a.css, d.css and d2.css; only the changes.
   - The field grows to about six lines on a phone (ten on desktop), then scrolls.
   - A clipped edge fades instead of cutting a line in half.
   - Once text is taller than the field, an expand button opens a full-height editor;
     the settings row, mic and send stay with it. Sending or Esc closes it. */

.c-input { max-height: 168px; scroll-padding: 16px 0; }
.vp-desktop .c-input { max-height: 260px; }
.c-input.fade-top { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px); mask-image: linear-gradient(to bottom, transparent 0, #000 30px); }
.c-input.fade-bottom { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22px); mask-image: linear-gradient(to top, transparent 0, #000 22px); }
.c-input.fade-top.fade-bottom { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 22px), transparent 100%); }

/* expand / collapse, top-right of the text */
.c-expand { grid-area: input; justify-self: end; align-self: start; z-index: 2 !important; width: 32px; height: 32px; margin: 8px 8px 0 0; display: none; place-items: center; border: 0; border-radius: 9px; background: var(--card-2); color: var(--mid); box-shadow: 0 0 0 1px var(--line); }
.c-expand::after { content: ''; position: absolute; inset: -6px; } /* 44pt target */
.c-expand:hover { color: var(--ink); }
.composer.overflowing .c-expand, .editor-open .c-expand { display: grid; }
.composer.overflowing .c-input, .editor-open .c-input { padding-right: 48px; }
.composer.recording .c-expand, .composer.transcribing .c-expand { display: none; }

/* full-height editor: the thread steps aside, the card takes its place */
.device.editor-open .thread { display: none !important; }
.vp-desktop.is-empty.editor-open { grid-template-rows: auto minmax(0, 1fr) auto; }
.editor-open .dock { display: flex; flex-direction: column; min-height: 0; padding-top: 6px; }
.editor-open .composer { flex: 1; min-height: 0; width: 100%; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto auto; }
.editor-open .c-input { max-height: none; height: 100% !important; align-self: stretch; }
.editor-open .card-bg { border-color: var(--line-2); }

/* a sent multi-paragraph message keeps its line breaks */
.msg.user p { white-space: pre-wrap; }