@font-face {
    font-family: "RedditSans";
    src: url("./RedditSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    font-family: "RedditSans", sans-serif;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    position: absolute;
    max-width: 100dvw;
    max-height: 100dvh;
    aspect-ratio: 2048 / 1536;
}

#container {
    top: 0;
    left: 0;
    position: absolute;
    width: 2048px;
    height: 1536px;

    transform-origin: 0 0;
    transform: scale(0.25);
}

.background-image {
    display: block;
    width: 100%;
    height: 100%;
}

form {
    position: absolute;
    left: 0;
    top: 0;

    width: 843.538px;
    height: 674.857px;

    transform-origin: 0 0;

    transform: matrix3d(1.659777225247, 0.222749813799, 0, 0.000548518813,
            0.248921919918, 1.447148797894, 0, 0.000299497608,
            0, 0, 1, 0,
            165, 169, 0, 1);
}


input {
    position: absolute;
    display: inline-block;
    border-radius: 50% / 0;
    font-size: 50px;
    height: 74px;
    color: black;
    background: #F0ECE8;
    background: white url('paper_texture.webp') center;
    border: none;
    font-family: "RedditSans", sans-serif;
    font-weight: 700;
    padding: 0 20px;
    border-radius: 37px;
    outline: none;
    min-width: 5ch;
    max-width: 30ch;
    width: auto;
    transition: width 0.2s ease;
    text-align: center;
}

input:focus {
    outline: 6px solid black;
    z-index: 1;
}

.line1-wrapper {
    position: absolute;
    top: 96px;
    left: 70px;
}

.line2-wrapper {
    position: absolute;
    top: 163px;
    left: 180px;
}

.line3-wrapper {
    position: absolute;
    top: 230px;
    left: 110px;
}

.line4-wrapper {
    position: absolute;
    top: 297px;
    left: 240px;
}

/* All line wrapper inputs have the same relative positioning */
.line1-wrapper input,
.line2-wrapper input,
.line3-wrapper input,
.line4-wrapper input {
    position: relative;
}

.chat-tip {
    position: absolute;
    bottom: 0px;
    left: -8px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #F0ECE8;
    z-index: -1;
}

/* Subreddit input styling */
.subreddit-input {
    background: #2d2928;
    color: #ffffff;
    font-size: 28px;
    height: 44px;
    top: 473px;
    left: 408px;
    text-align: left;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
    padding-left: 0;
    padding-bottom: 6px;

}

.subreddit-input::placeholder {
    color: #ffffff;
    opacity: 1;
}

.subreddit-input:focus {
    outline: 6px solid white;
}

/* Controls container */
.controls {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    touch-action: manipulation;
}

/* Bubble control button */
#bubble-control {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    position: relative;
    top: 4px;
}

#bubble-control:hover {
    opacity: 0.8;
}

/* Bubble count badge */
.bubble-badge {
    position: absolute;
    top: 3px;
    left: 2px;
    color: white;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    font-family: "RedditSans", sans-serif;
}

#camera-icon {
    color: white;
    cursor: pointer;
}

#camera-icon:hover {
    opacity: 0.8;
}

/* Bubble count visibility classes (show first N lines top-to-bottom) */
/* 1 bubble: show line1 only */
.bubbles-1 .line2-wrapper,
.bubbles-1 .line3-wrapper,
.bubbles-1 .line4-wrapper {
    display: none;
}

/* 2 bubbles: show line1, line2 */
.bubbles-2 .line3-wrapper,
.bubbles-2 .line4-wrapper {
    display: none;
}

/* 3 bubbles: show line1, line2, line3 */
.bubbles-3 .line4-wrapper {
    display: none;
}

/* Repositioning for different bubble counts */
/* Total vertical space: from 96px to 297px = 201px range */

/* 1 bubble (line1): center vertically within available space */
.bubbles-1 .line1-wrapper {
    top: 196px;
}

/* 2 bubbles (line1 & line2): maintain 67px gap */
.bubbles-2 .line1-wrapper {
    top: 146px;
}

.bubbles-2 .line2-wrapper {
    top: 213px;
}

/* 3 bubbles (line1, line2, line3): centered with 67px gap */
.bubbles-3 .line1-wrapper {
    top: 130px;
}

.bubbles-3 .line2-wrapper {
    top: 197px;
}

.bubbles-3 .line3-wrapper {
    top: 264px;
}

/* Hide chat tips for non-last bubbles */
/* In 2-bubble mode: hide tip of line1 */
.bubbles-2 .line1-wrapper .chat-tip {
    display: none;
}

/* In 3-bubble mode: hide tips of line1 and line2 */
.bubbles-3 .line1-wrapper .chat-tip,
.bubbles-3 .line2-wrapper .chat-tip {
    display: none;
}

/* In 4-bubble mode: hide tips of line1, line2, and line3 */
.bubbles-4 .line1-wrapper .chat-tip,
.bubbles-4 .line2-wrapper .chat-tip,
.bubbles-4 .line3-wrapper .chat-tip {
    display: none;
}