footer#input {
    flex:              0 0 auto;
    min-height:        $input-height;
    width:             100%;
    display:           flex;
    flex-direction:    row;
    padding:           0;
    margin:            0;
    border-top:        1px solid lighten($glaciergray, 10%);
    position:          relative;

    .typing {
        display:       block;
        position:      absolute;
        left:          $chat-left-margin;
        top:           0;
        line-height:   0.6*$line-height;
        font-size:     0.7*$font-size;
        color:         $woodbine;
    }

    fieldset {
        $padding: ( $input-height - $line-height ) / 2;

        margin:           0;
        padding:          0;
        border:           0;
        position:         relative;
        width:            100%;

        #channel-input {
            box-sizing:       border-box;
            box-shadow:       none;
            outline:          0;
            vertical-align:   middle;
            width:            100%;
            font-size:        $font-size;
            line-height:      $line-height !important;
            min-height:       $input-height;
            max-height:       $input-height + 3 * $line-height;
            margin:           0;
            padding-top:      $padding;
            padding-bottom:   $padding;
            padding-left:     $chat-left-margin;
            padding-right:    $font-size;
            overflow-y:       auto;
            word-break:       break-all;
            overflow-wrap:    break-word;
            word-break:       break-word;
            hyphens:          auto;
            color:            $black;
            background-color: $white;

            &.locked {
                background-color: lighten($glaciergray, 20%);
            }

            #marker {
                background-color: lighten($custard, 15%);
                border: 1px solid lighten($custard, 15%);
                line-height:      $line-height;
            }

            .at {
                color:            darken($classicblue,10%);
                background-color: lighten($custard, 10%);
                border-radius:    4px;
                cursor:           pointer;
                border:           1px solid $custard;
                padding:          0;
                padding-right:    0.5*$font-size;
                padding-left:     0.5*$font-size;
                line-height:      $line-height - 2px;
            }
        }

        .placeholder {
            position:       absolute;
            top:            $padding;
            padding-left:   $chat-left-margin + 3*$font-size;
            left:           0;
            display:        inline-block;
            z-index:        1;
            color:          $lucitegreen;

            @keyframes finger-pointing {
                0%   { left: $chat-left-margin + $font-size; }
                50%  { left: $chat-left-margin; }
                100% { left: $chat-left-margin + $font-size; }
            }

            &:before {
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M0 220.8C0 266.416 37.765 304 83.2 304h35.647a93.148 93.148 0 0 0 7.929 22.064c-2.507 22.006 3.503 44.978 15.985 62.791C143.9 441.342 180.159 480 242.701 480H264c60.063 0 98.512-40 127.2-40h2.679c5.747 4.952 13.536 8 22.12 8h64c17.673 0 32-12.894 32-28.8V188.8c0-15.906-14.327-28.8-32-28.8h-64c-8.584 0-16.373 3.048-22.12 8H391.2c-6.964 0-14.862-6.193-30.183-23.668l-.129-.148-.131-.146c-8.856-9.937-18.116-20.841-25.851-33.253C316.202 80.537 304.514 32 259.2 32c-56.928 0-92 35.286-92 83.2 0 8.026.814 15.489 2.176 22.4H83.2C38.101 137.6 0 175.701 0 220.8zm48 0c0-18.7 16.775-35.2 35.2-35.2h158.4c0-17.325-26.4-35.2-26.4-70.4 0-26.4 20.625-35.2 44-35.2 8.794 0 20.445 32.712 34.926 56.1 9.074 14.575 19.524 27.225 30.799 39.875 16.109 18.374 33.836 36.633 59.075 39.596v176.752C341.21 396.087 309.491 432 264 432h-21.299c-40.524 0-57.124-22.197-50.601-61.325-14.612-8.001-24.151-33.979-12.925-53.625-19.365-18.225-17.787-46.381-4.95-61.05H83.2C64.225 256 48 239.775 48 220.8zM448 360c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z'/></svg>");
                left:                      $chat-left-margin + $font-size;
                position:                  absolute;
                animation-name:            finger-pointing;
                animation-duration:        2s;
                animation-delay:           3s;
                animation-iteration-count: 10;
            }
        }

        textarea#channel-input {
            resize:         none  !important;

            &:focus {
                box-shadow:     none;
            }
        }
    }
}
