#page-title {
    position: relative;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    padding: 16px 10px 12px 10px;
    color: var(--title-text);
    background-color: var(--title-bg);
    letter-spacing: -0.5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    z-index: 10;
    white-space: pre-wrap;
}

/* Text Display Area Layout */
#display-container {
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    bottom: var(--keyboard-height);
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#text-output {
    font-size: 22px;
    line-height: 1.3;
    color: #000000;
    word-break: break-word;
    width: 100%;
    white-space: pre-wrap;
    padding-top: 10px;
    font-family:
        "Special Elite",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
}
#text-output::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}
#display-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}
#text-output:focus {
    outline: none;
    border: none;
}
#text-output:not(:focus):-webkit-autofill,
#text-output:empty::before {
    content: attr(data-placeholder);
    color: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Fixed Bottom Element Shell */
#bottom-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--keyboard-height);
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05);
}
#action-bar {
    height: 44px;
    padding: 0 12px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background-color: var(--bg-color);
    position: relative;
}

/* Action Bar Buttons */
#clear-btn {
    justify-self: start;
    background-color: rgb(0, 0, 0);
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
#clear-btn:active {
    background-color: rgba(0, 0, 0, 0.18);
}
.share-container {
    justify-self: center;
    position: relative;
    display: inline-block;
}
#share-menu-btn {
    background-color: var(--btn-share);
    color: var(--btn-share-text);
    border: none;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
#share-menu-btn:active {
    opacity: 0.8;
}
#info-btn {
    justify-self: end;
    background-color: var(--special-key-bg);
    color: var(--key-text);
    border: none;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
#info-btn:active {
    opacity: 0.8;
}

/* Floating Labels: top-left logo and top-right date */
#text-logo {
    position: absolute;
    top: 16px;
    left: 16px; /* Floating at top left */
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.5px;
    color: var(--title-text);
    z-index: 100;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    pointer-events: none;
}
#text-date {
    position: absolute;
    top: 16px;
    right: 16px; /* Floating at top right */
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.5px;
    color: var(--title-text);
    z-index: 100;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    pointer-events: none;
    text-align: right;
}