body {
    font-family: Arial, sans-serif;
    background: #f8f8f8;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden; /* Disable scrolling for the entire page */
}
html { height: 100%; }
:fullscreen { 
    background: #f8f8f8; 
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
header {
    background-color: #4f86c4;
    color: white;
    padding: 10px 7.5pt;
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
}
:fullscreen header { 
    top: 0; 
    width: 100%;
}
.info-bar {
    background: #333;
    color: white;
    display: flex;
    padding: .3125pc .3125pc .3125pc .3125pc;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 28.5pt;
    z-index: 90;
    font-size: .875pc;
}
:fullscreen .info-bar { 
    top: 2.375pc; 
    width: 100%;
    box-sizing: border-box;
}
.info-bar-left {
    display: flex;
    align-items: center;
    gap: .104166667in;
}
.container {
    display: flex;
    padding: 40px 15pt 15pt 15pt;
    height: 100vh; /* Fit within viewport */
    overflow: hidden; /* Disable scrolling for container */
    box-sizing: border-box;
}
:fullscreen .container {
    padding-top: calc(2.375pc + 28.5pt); /* Adjust for header and info-bar */
    padding-bottom: 1.25pc;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
}
.nta-mode .container {
    flex-direction: column;
    padding: 0.208333333in 0.208333333in 0.208333333in 15pt;
}
:fullscreen.nta-mode .container {
    flex-direction: column;
    padding: 0.208333333in;
}
.left-panel {
    display: flex;
    flex-direction: column;
    width: 70%;
}
:fullscreen .left-panel {
    width: 70%;
    height: calc(100vh - 2.375pc - 28.5pt); /* Adjust for header and info-bar */
}
.nta-mode .left-panel {
    width: 100%;
}
:fullscreen.nta-mode .left-panel {
    width: 100%;
    height: calc(100vh - 2.375pc - 28.5pt);
}
.right-panel {
    width: 30%;
    padding-left: .208333333in;
}
:fullscreen .right-panel {
    width: 30%;
    height: calc(100vh - 2.375pc - 28.5pt);
    overflow-y: auto;
}
.nta-mode .right-panel {
    display: none;
}
.paragraph-box, .input-box {
    width: 100%;
    padding: .052083333in;
    font-size: 15pt;
    margin-bottom: 11.25pt;
    border: .75pt solid #ccc;
    background: white;
    box-sizing: border-box;
    flex-grow: 1;
    overflow-y: auto; /* Enable scrolling for content */
    text-align: justify; /* Justified text for symmetry */
    white-space: pre-wrap; /* Preserve spaces and line breaks */
    line-height: 1.2; /* Consistent line height for alignment */
    font-family: inherit; /* Consistent font family */
    word-spacing: normal; /* Ensure consistent word spacing */
}
.paragraph-box {
    margin-top: 0;
    max-height: 20vh;
    transition: font-size .3s ease;
}
:fullscreen .paragraph-box {
    max-height: 30vh; /* Increased for better visibility in fullscreen */
}
.input-box {
    resize: none;
    min-height: 1.458333333in;
    max-height: 25vh;
}
:fullscreen .input-box {
    max-height: 25vh; /* Increased for better typing space */
}
.nta-mode .paragraph-box {
    max-height: 30vh;
}
:fullscreen.nta-mode .paragraph-box {
    max-height: 25vh; /* Adjusted for better balance in fullscreen NTA mode */
}
.nta-mode .input-box {
    max-height: 25vh;
}
:fullscreen.nta-mode .input-box {
    max-height: 25vh; /* Adjusted for better typing space in fullscreen NTA mode */
}
:fullscreen .button-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .9375pc;
    background: #f8f8f8;
    border-top: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
}
.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 7.5pt;
    margin-top: .15625in;
    padding: 10px 0 0 0;
    position: sticky;
    bottom: 0;
    z-index: 50;
}
.submit-btn {
    background-color: #4f86c4;
    color: white;
    border: none;
    padding: .0625in .15625in;
    font-size: .1875in;
}
.cancel-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: .0625in .15625in;
    font-size: .1875in;
}
.fullscreen-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: .0625in .15625in;
    font-size: .1875in;
}
.settings-btn {
    background-color: #28a745;
    color: white;
    padding: .6875pc 7.5pt;
    margin-right: 6pt;
    font-size: 10.5pt;
    border: none;
}
.custom-content-btn {
    background-color: #4f86c4;
    color: white;
    border: none;
    padding: 8px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
}
.custom-content-btn:hover {
    background-color: #3a6ea5;
}
.custom-para-btn {
    background-color: #ff9800;
    color: white;
    border: none;
    padding: 8px 15px;
    margin-right: 10px;
    border-radius: 4px;
}
.custom-para-btn:hover {
    background-color: #e68a00;
}
.custom-content-area {
    width: 100%;
    min-height: 150px;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: 15pt;
    resize: vertical;
    text-align: justify; /* Justified text for custom content input */
    white-space: pre-wrap; /* Preserve spaces and line breaks */
    line-height: 1.2; /* Consistent line height */
}
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    z-index: 200;
    overflow: auto;
    align-items: center;
    justify-content: center;
}
:fullscreen .modal {
    width: 100vw;
    height: 100vh;
}
.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: .208333333in 1.25pc;
    border: .0625pc solid #888;
    width: 80%;
    max-width: 31.25pc;
    border-radius: .052083333in;
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
}
:fullscreen .modal-content {
    max-height: 90vh; /* Allow more space in fullscreen */
}
.close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    float: right;
    cursor: pointer;
}
.close:hover {
    color: black;
}
.setting-group {
    margin: 11.25pt 0;
}
.setting-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.toggle-switch {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 34px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 25.5pt;
}
.slider:before {
    position: absolute;
    content: "";
    height: 19.5pt;
    width: 26px;
    left: 3pt;
    bottom: 3pt;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #4f86c4;
}
input:checked + .slider:before {
    transform: translateX(26px);
}
.font-size-controls {
    display: flex;
    align-items: center;
    gap: .104166667in;
}
.font-size-btn {
    background: #4f86c4;
    color: white;
    border: none;
    border-radius: 50%;
    width: 1.875pc;
    height: 22.5pt;
    font-weight: bold;
}
.font-select {
    font-size: 15px;
    padding: .3125pc;
}
button {
    cursor: pointer;
    padding: .0625in .15625in;
    font-size: .1875in;
    margin-right: 10px;
}
@media (max-width: 768px) {
    .container { 
        flex-direction: column; 
        padding: 40px 10px 10px 10px;
    }
    :fullscreen .container {
        padding: calc(2.375pc + 28.5pt) 10px 10px 10px;
    }
    .left-panel, .right-panel { width: 100%; }
    .right-panel { padding-left: 0; margin-top: 10px; }
    .paragraph-box { max-height: 15vh; font-size: 15pt; }
    :fullscreen .paragraph-box { max-height: 25vh; }
    .input-box { max-height: 20vh; font-size: 15pt; }
    :fullscreen .input-box { max-height: 30vh; }
    .nta-mode .paragraph-box { max-height: 40vh; }
    :fullscreen.nta-mode .paragraph-box { max-height: 45vh; }
    .nta-mode .input-box { max-height: 30vh; }
    :fullscreen.nta-mode .input-box { max-height: 35vh; }
    .info-bar-left { flex-direction: column; align-items: flex-start; gap: 5px; }
    .modal-content { width: 90%; }
    :fullscreen .modal-content { width: 95%; max-height: 85vh; }
}
@media (orientation: landscape) and (max-width: 768px) {
    .paragraph-box { max-height: 25vh; }
    :fullscreen .paragraph-box { max-height: 30vh; }
    .input-box { max-height: 30vh; }
    :fullscreen .input-box { max-height: 35vh; }
    .nta-mode .paragraph-box { max-height: 50vh; }
    :fullscreen.nta-mode .paragraph-box { max-height: 55vh; }
    .nta-mode .input-box { max-height: 35vh; }
    :fullscreen.nta-mode .input-box { max-height: 40vh; }
}