/* =========================================
   Container & Layout
   ========================================= */
.nmr-viewer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: system-ui, -apple-system, sans-serif;
    user-select: none;
    margin: 10px 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    overflow: hidden; /* Ensures sharp corners are maintained */
}

/* =========================================
   Canvas Area
   ========================================= */
.nmr-canvas-container {
    position: relative;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

.nmr-canvas {
    cursor: crosshair;
    outline: none;
    display: block;
}

.nmr-canvas:focus {
    box-shadow: inset 0 0 0 2px rgba(100,150,200,.15);
}

/* =========================================
   Floating Legend
   ========================================= */
.nmr-legend {
    position: absolute;
    top: 12px;
    right: 16px;
    background: rgba(255, 255, 255, 0.85);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 11px;
    font-weight: 600;
    color: #444;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    pointer-events: none; /* Prevents mouse events from interfering with canvas drag */
}

/* Legend line indicators */
.leg-re { display: inline-block; width: 10px; height: 3px; background: #0055aa; border-radius: 1px; }
.leg-im { display: inline-block; width: 10px; height: 2px; background: #e63946; border-radius: 1px; }

/* =========================================
   Control Bar (Bottom)
   ========================================= */
.nmr-bar {
    display: flex;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
}

.nmr-grp { display: flex; align-items: center; gap: 10px; }
.nmr-lbl { font-size: 13px; color: #444; font-weight: 600; }

/* Input fields for phase parameters */
.nmr-input {
    width: 55px;
    padding: 4px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: #111;
    background: #f9f9f9;
    outline: none;
    transition: border-color 0.2s;
}

.nmr-input:focus {
    border-color: #0055aa;
    background: #fff;
}

/* Base styling for interactive buttons */
.nmr-btn {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nmr-btn-outline {
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
}

.nmr-btn-outline:hover {
    background: #f0f0f0;
    border-color: #bbb;
}

/* Contextual hints text */
.nmr-hints {
    font-size: 11px;
    color: #888;
    font-style: italic;
    margin-right: 8px;
    letter-spacing: 0.2px;
}

/* =========================================
   Completion State (Banner & Copying)
   ========================================= */
.nmr-success-banner {
    padding: 16px;
    border: 1px solid #cce0f5;
    background: #f8fbff; /* Professional light blue, matching widget theme */
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-family: system-ui, -apple-system, sans-serif;
}

.nmr-success-title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 15px;
    color: #0055aa; /* Aligned with the real-line color */
}

.nmr-success-subtitle {
    font-size: 13px;
    color: #555;
    margin-bottom: 12px;
}

.nmr-copy-container {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.nmr-code-block {
    flex-grow: 1;
    background: #fff;
    border: 1px solid #d9d9d9;
    padding: 10px 12px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    display: flex;
    align-items: center;
}

/* Usage hint text - unselectable and grayed out */
.nmr-code-hint {
    color: #999;
    user-select: none;
}

/* The actual text to be copied */
.nmr-code-target {
    color: #000;
    user-select: all; /* Allows 1-click highlighting of just the target code */
}

/* Actionable copy button */
.nmr-copy-btn {
    padding: 0 16px;
    border: 1px solid #004488;
    background: #0055aa;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s ease;
}

.nmr-copy-btn:hover {
    background: #004488;
}

/* Dynamic modifiers for JavaScript state toggling */
.nmr-copy-btn.copied {
    background: #28a745; /* Transition to green only upon successful action */
    border-color: #218838;
}

.nmr-copy-btn.failed {
    background: #dc3545;
    border-color: #c82333;
}