/**
 * /styles/romaji-ime.css
 * * Contains all the specific styles for the Romaji IME module.
 * This file should be linked by any page that imports romaji-ime.html.
 * UPDATED: Styles now use variables from pelmeni2025.css for theming,
 * inherit the main font stack, and match button styles.
 * FIXED: Re-implemented shared class with aggressive resets to guarantee alignment.
 */

/* --- Module Root --- */
#romaji-ime-module {
    /* Set a minimum width for the module as requested */
    min-width: 768px;
    /* FIX: Ensure the module itself is a flex container to allow children to grow */
    min-height: 500px;
}

/* --- Font & Text Styles --- */

.graflect-font {
    font-family: "FairfaxHD", "Times New Roman", Times, serif !important;
}

ruby {
    ruby-position: over;
    padding: 0;
    margin: 0;
}

rt {
    font-family: 'Courier New', monospace;
    font-size: 0.6em;
    opacity: 0.8;
    color: var(--text-color);
    padding: 0;
    margin: 0;
}

/* --- Main IME Tool Styles --- */

.romaji-input-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1em;
    /* FIX: This property is necessary for the container to fill the available vertical space in the parent window. */
    flex-grow: 1;
}

.output-container {
    position: relative;
    display: flex;
    /* FIX: This allows the textbox area to expand to its min-height. */
    flex-grow: 1;
}

.output-container.is-focused {
    outline: 2px solid var(--text-color);
    border-radius: 4px;
}

/*
 * This class defines the canonical "textbox" look.
 * It should be applied to the parent container (.output-container)
 * AND the two layered children inside it.
*/
.shared-input-style {
    /* --- CRITICAL: Font & Box Model Properties --- */
    min-height: 500px;
    padding: 1em;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    font-family: 'FairfaxHD', 'Times New Roman', Times, serif;
    font-size: 1.6em;
    line-height: 2.8;
    white-space: pre-wrap;
    word-wrap: break-word;
    letter-spacing: normal;
    word-spacing: normal;
    font-kerning: none;

    /* --- CRITICAL: Browser Style Resets --- */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    resize: none;
}

/*
 * The .output-container gets the .shared-input-style in the HTML,
 * giving it the border, padding, and dimensions.
*/


/*
 * FIX: The children also have .shared-input-style, so we override
 * the properties that would create a "box-in-a-box" effect.
 * They become transparent layers that perfectly match the parent's text grid.
*/
#romaji-output-display,
#romaji-output-editor {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;

    /* Overrides to make them transparent layers */
    background: transparent;
    border-color: transparent;
}

/* The display div is for visuals only */
#romaji-output-display {
    color: var(--text-color);
    overflow: hidden;
}

/* The textarea is for functionality */
#romaji-output-editor {
    z-index: var(--z-window-base);
    color: transparent;
    caret-color: var(--text-color);
    overflow: auto;
}

/* * DEFINITIVE FIX: The #cursor-tracker span is used by JS to position the floater.
 * By default, as an inline element, it sits inside a giant line-box created by the
 * parent's `line-height: 2.8`. This caused its `offsetHeight` to be huge.
 * By changing its display to `inline-block`, we force it to generate its own
 * block formatting context. Its height is now based on its own `line-height`,
 * not its parent's, providing the correct value for positioning.
 */
#romaji-output-display #cursor-tracker {
    display: inline-block;
    line-height: normal;
    /* Reset to a standard line height */
}


#romaji-output-editor:focus {
    outline: none;
}

/* --- IME Floater & Suggestions --- */

#ime-floater {
    position: absolute;
    z-index: var(--z-dropdown);
    background-color: var(--win-bg-color);
    border: 2px solid var(--border-color);
    vertical-align: top;
    border-radius: 0;
}

#ime-floater.hidden {
    display: none;
}

#builder-display {
    padding: 0.2em 0.8em;
    border-bottom: 2px dashed var(--border-color);
    max-height: 3em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* UPDATED: Force content to the top */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.builder-processed {
    opacity: 0.5;
}

.builder-prompt {
    background-color: var(--text-color);
    color: var(--bg-color);
    border-bottom: 2px solid var(--text-color);
    font-weight: bold;
}

.builder-graflect {
    font-size: 1.5em;
    margin-top: 0.2em;
}

.suggestions-dropdown {
    max-height: 250px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 0.8em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item.divider {
    cursor: default;
    background-color: var(--bg-color);
    padding: 0.2em;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.suggestion-item .suggestion-content {
    display: flex;
    align-items: center;
    gap: 1em;
}

.suggestion-item .graflect-font {
    font-size: 1.4em;
}

.suggestion-item .slug-text {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    opacity: 0.7;
}

.suggestion-item.active,
.suggestion-item:hover:not(.divider) {
    background-color: var(--text-color);
    color: var(--bg-color);
}

/* --- Buttons & Controls --- */

.editor-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
    z-index: var(--z-window-active);
}

.editor-controls button {
    /* FIX: Use the emoji font stack from pelmeni2025.css */
    font-family: var(--font-emoji);
    border: 2px solid var(--border-color);
    background: var(--win-bg-color);
    color: var(--text-color);
    /* FIX: Removed border-radius to make buttons square */
    border-radius: 0;
    width: 36px;
    height: 36px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.editor-controls button:hover {
    background-color: var(--text-color);
    color: var(--win-bg-color);
}

/* --- Shared Modal Styles --- */

#notification-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--inv-bg-color);
    color: var(--inv-text-color);
    padding: 12px 24px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    z-index: var(--z-overlay);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    font-family: var(--font-body);
}

#notification-banner.visible {
    opacity: 1;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.modal-overlay.hidden {
    display: none;
}

.modal-window {
    width: 90%;
    max-width: 600px;
    /* UPDATED: Match graflect.html styles */
    background-color: var(--win-bg-color);
    border: 2px solid var(--border-color);
    border-radius: 0;
    /* Match sharp corners */
    display: flex;
    flex-direction: column;
}

.modal-header {
    /* Inherits title-bar styles */
    font-family: var(--font-body);
}

.modal-title .symbol {
    font-family: var(--font-emoji);
}

.modal-close-btn {
    /* Inherits close-btn styles */
    font-family: var(--font-body);
}

.modal-content {
    padding: 1em;
    overflow-y: auto;
    max-height: 70vh;
    font-family: var(--font-body);
}

.modal-footer {
    padding: 1em;
    border-top: 2px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1em;
}

.modal-footer button {
    /* Inherits normal-btn styles */
    border: 2px solid var(--border-color);
    background-color: var(--win-bg-color);
    color: var(--text-color);
    padding: 6px 12px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 0;
}

.modal-footer button:hover,
.modal-footer button:active,
.modal-footer button:focus-visible {
    background-color: var(--text-color);
    color: var(--win-bg-color);
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.modal-form label {
    font-weight: bold;
}

.modal-form input {
    padding: 0.5em;
    border: 2px solid var(--border-color);
    background-color: var(--win-bg-color);
    color: var(--text-color);
    font-family: inherit;
}

.modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8em;
    border-bottom: 1px solid var(--border-color);
}

.modal-list li:last-child {
    border-bottom: none;
}

.dict-info .name {
    font-weight: bold;
}

.dict-info .author {
    font-style: italic;
    font-size: 0.9em;
}

.dict-btn-group {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
}

.editor-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1em;
}

.editor-tab {
    padding: 0.5em 1em;
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-bottom: none;
    background-color: var(--bg-color);
    opacity: 0.7;
    margin-bottom: -2px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.editor-tab.active {
    background-color: var(--win-bg-color);
    border-bottom: 2px solid var(--win-bg-color);
    opacity: 1;
}

.editor-content.hidden {
    display: none;
}

.dict-edit-input {
    border: 2px solid var(--border-color);
    background-color: var(--win-bg-color);
    color: var(--text-color);
    padding: 0.2em;
    flex-grow: 1;
    font-family: inherit;
}

/* --- UPDATED: Scrollbar styles for IME Floater --- */
.suggestions-dropdown::-webkit-scrollbar {
    width: var(--sb-size, 16px);
    height: var(--sb-size, 16px);
}

.suggestions-dropdown::-webkit-scrollbar-track {
    background: var(--win-bg-color);
}

.suggestions-dropdown::-webkit-scrollbar-thumb {
    background: var(--win-bg-color);
    border: 2px solid var(--border-color);
}

@supports not selector(::-webkit-scrollbar) {
    .suggestions-dropdown {
        scrollbar-color: var(--border-color) var(--win-bg-color);
        scrollbar-width: thin;
    }
}