/* ==================== */

/* P&L Analysis Tool    */

/* ==================== */

/* Public mode: full-screen layout */
html:has(.pnl-public-mode) {
    height: 100vh;
    overflow: hidden;
}

.pnl-public-mode {
    height: 100vh;
    overflow: hidden;
}

.pnl-public-mode .app-container {
    visibility: visible !important;
    height: 100vh;
}

.pnl-public-mode #tab-content {
    height: 100vh;
}

.pnl-public-mode .main-header,
.pnl-public-mode .main-tabs,
.pnl-public-mode .tab-panel:not(#agents),
.pnl-public-mode .claude-sidebar,
.pnl-public-mode .bug-report-fab {
    display: none !important;
}

.pnl-public-mode #agents {
    display: block !important;
    width: 100%;
    height: 100%;
}

/* Show the entire tools container chain but hide non-PNL content */
.pnl-public-mode .tools-grid-view,
.pnl-public-mode .tools-grid-header,
.pnl-public-mode .tools-flip-btn,
.pnl-public-mode .tools-flip-front,
.pnl-public-mode .tools-flip-wrapper {
    display: none !important;
}

.pnl-public-mode #tools-flip-container {
    display: block !important;
    perspective: none;
    height: 100%;
}

.pnl-public-mode .tools-flipper {
    transform: none !important;
    backface-visibility: visible !important;
    height: 100%;
}

.pnl-public-mode .tools-flip-back {
    transform: none !important;
    backface-visibility: visible !important;
    position: static !important;
    height: 100%;
}

.pnl-public-mode .tools-layout {
    height: 100%;
}

.pnl-public-mode .tools-section {
    height: 100%;
}

/* Hide all tool panels except P&L in public mode */
.pnl-public-mode .tool-panel:not(#tool-pnl-analysis) {
    display: none !important;
}

.pnl-public-mode #tool-pnl-analysis {
    display: block !important;
    opacity: 1 !important;
    height: 100%;
    visibility: visible !important;
}

.pnl-public-mode #tool-pnl-analysis .tool-panel-header,
.pnl-public-mode #tool-pnl-analysis .tool-panel-overview,
.pnl-public-mode #tool-pnl-analysis .tool-panel-button-bar {
    display: none !important;
}

.pnl-public-mode .tool-panel-body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pnl-public-mode .tab-content {
    width: 100%;
}

/* Public header */
.pnl-public-header {
    text-align: center;
    padding: 32px 24px 24px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, #fff 0%, var(--color-bg-subtle) 100%);
}

.pnl-public-header.hidden { display: none; }

.pnl-public-company-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px;
}

.pnl-public-subtitle {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
}

/* State containers */
.pnl-state { padding: 24px; }
.pnl-state.hidden { display: none; }

/* ---- State 1: Email Gate ---- */
.pnl-gate-card {
    max-width: 420px;
    margin: 40px auto;
    text-align: center;
}

.pnl-gate-icon { margin-bottom: 16px; }

.pnl-gate-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px;
}

.pnl-gate-desc {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 28px;
    line-height: 1.5;
}

.pnl-gate-form { text-align: left; }

/* Shared form elements */
.pnl-field { margin-bottom: 16px; }

.pnl-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.pnl-input,
.pnl-select {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #fff 0%, var(--color-bg-subtle) 100%);
    outline: none;
    transition: border-color var(--ease-spring), box-shadow var(--ease-spring);
    box-sizing: border-box;
    color: var(--color-text);
}

.pnl-input:focus,
.pnl-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.pnl-input::placeholder {
    color: var(--color-text-faint);
}

/* Buttons */
.pnl-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: white;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    box-shadow: var(--shadow-primary);
    transition: all var(--ease-spring);
}

.pnl-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

.pnl-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pnl-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text-secondary);
    background: white;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--ease-spring);
}

.pnl-btn-secondary:hover {
    background: var(--color-bg-muted);
    border-color: var(--color-text-faint);
}

.pnl-btn-small {
    padding: 6px 14px;
    font-size: 13px;
}

/* ---- State 2: Upload / Dropzone ---- */
.pnl-upload-card {
    max-width: 560px;
    margin: 24px auto;
}

.pnl-dropzone {
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    padding: 48px 32px;
    text-align: center;
    cursor: pointer;
    transition: all var(--ease-spring);
    background: var(--color-bg-subtle);
}

.pnl-dropzone:hover,
.pnl-dropzone.dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    box-shadow: 0 0 0 4px var(--color-primary-ring);
}

.pnl-upload-icon {
    color: var(--color-text-faint);
    margin-bottom: 12px;
}

.pnl-dropzone:hover .pnl-upload-icon,
.pnl-dropzone.dragover .pnl-upload-icon {
    color: var(--color-primary);
}

.pnl-dropzone-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 6px;
}

.pnl-dropzone-desc {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 4px;
}

.pnl-dropzone-formats {
    font-size: 12px;
    color: var(--color-text-faint);
    margin: 0 0 16px;
}

/* ---- State 3: Processing ---- */
.pnl-processing-card {
    max-width: 420px;
    margin: 60px auto;
    text-align: center;
}

.pnl-processing-icon {
    margin-bottom: 16px;
    animation: pnl-spin 2s linear infinite;
}

@keyframes pnl-spin {
    to { transform: rotate(360deg); }
}

.pnl-processing-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 6px;
}

.pnl-processing-detail {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 20px;
}

.pnl-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--color-bg-muted);
    border-radius: 3px;
    overflow: hidden;
}

.pnl-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.pnl-progress-pct {
    font-size: 13px;
    color: var(--color-text-faint);
    margin: 8px 0 0;
}

/* ---- State 4: Analysis Chat ---- */
.pnl-chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 260px);
    max-height: 700px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-bg);
    overflow: hidden;
}

.pnl-public-mode .pnl-chat-container {
    height: calc(100vh - 180px);
    max-height: none;
}


.pnl-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, #fff 0%, var(--color-bg-subtle) 100%);
    flex-shrink: 0;
}

.pnl-chat-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pnl-chat-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.pnl-chat-file {
    font-size: 12px;
    color: var(--color-text-faint);
    background: var(--color-bg-muted);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.pnl-chat-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pnl-city-select {
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--color-text-secondary);
    outline: none;
}

/* Chat messages area */
.pnl-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pnl-msg {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    line-height: 1.6;
    animation: pnl-msg-slide 0.3s ease-out;
}

@keyframes pnl-msg-slide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pnl-msg-assistant {
    align-self: flex-start;
    background: var(--color-bg-muted);
    color: var(--color-text);
    border-bottom-left-radius: 4px;
}

.pnl-msg-user {
    align-self: flex-end;
    background: var(--color-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.pnl-msg-assistant h1,
.pnl-msg-assistant h2,
.pnl-msg-assistant h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 16px 0 6px;
    color: var(--color-text);
}

.pnl-msg-assistant h1:first-child,
.pnl-msg-assistant h2:first-child,
.pnl-msg-assistant h3:first-child {
    margin-top: 0;
}

.pnl-msg-assistant p { margin: 6px 0; }

.pnl-msg-assistant ul,
.pnl-msg-assistant ol {
    margin: 6px 0;
    padding-left: 20px;
}

.pnl-msg-assistant li { margin: 4px 0; }

.pnl-msg-assistant strong { font-weight: 700; }

.pnl-msg-assistant table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}

.pnl-msg-assistant th,
.pnl-msg-assistant td {
    padding: 6px 10px;
    border: 1px solid var(--color-border-strong);
    text-align: left;
}

.pnl-msg-assistant th {
    background: var(--color-bg-subtle);
    font-weight: 600;
}

/* Typing indicator */
.pnl-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    align-self: flex-start;
    background: var(--color-bg-muted);
    border-radius: var(--radius-lg);
    border-bottom-left-radius: 4px;
}

.pnl-typing-dot {
    width: 6px;
    height: 6px;
    background: var(--color-text-faint);
    border-radius: 50%;
    animation: pnl-typing-bounce 1.2s infinite;
}

.pnl-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.pnl-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes pnl-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

/* Chat input area */
.pnl-chat-input-area {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-shrink: 0;
}

.pnl-chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: linear-gradient(180deg, #f6f7f8 0%, #eff0f2 100%);
    border-radius: var(--radius-xl);
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    transition: border-color var(--ease-spring), box-shadow var(--ease-spring);
}

.pnl-chat-input-wrapper:focus-within {
    border-color: rgba(79, 70, 229, 0.3);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.pnl-chat-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--color-text);
    outline: none;
    resize: none;
    max-height: 120px;
    line-height: 1.4;
}

.pnl-chat-input::placeholder { color: var(--color-text-faint); }

.pnl-send-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--ease-spring);
}

.pnl-send-btn:hover:not(:disabled) {
    background: var(--color-primary-hover);
    transform: scale(1.05);
}

.pnl-send-btn:disabled {
    background: var(--color-bg-muted);
    color: var(--color-text-faint);
    cursor: not-allowed;
}

.pnl-chat-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* ---- State 5: Questionnaire ---- */
.pnl-questionnaire-card {
    max-width: 480px;
    margin: 24px auto;
}

.pnl-q-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 6px;
}

.pnl-q-desc {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 24px;
}

.pnl-q-form .pnl-field { margin-bottom: 20px; }

.pnl-checkbox-group,
.pnl-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pnl-checkbox,
.pnl-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: all var(--ease-spring);
}

.pnl-checkbox:hover,
.pnl-radio:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

.pnl-checkbox input,
.pnl-radio input {
    accent-color: var(--color-primary);
}

/* Star rating */
.pnl-star-rating {
    display: flex;
    gap: 4px;
}

.pnl-star {
    font-size: 28px;
    background: none;
    border: none;
    color: var(--color-border-strong);
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
}

.pnl-star:hover,
.pnl-star.active {
    color: #f59e0b;
    transform: scale(1.15);
}

/* ---- State 6: Report Download ---- */
.pnl-report-card {
    max-width: 440px;
    margin: 60px auto;
    text-align: center;
}

.pnl-report-icon { margin-bottom: 20px; }

.pnl-report-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px;
}

.pnl-report-desc {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 28px;
    line-height: 1.5;
}

.pnl-report-card .pnl-btn-primary { margin-bottom: 12px; }

/* ---- Responsive ---- */
@media (width <= 768px) {
    .pnl-chat-container {
        height: calc(100vh - 200px);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .pnl-chat-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .pnl-msg { max-width: 95%; }

    .pnl-gate-card,
    .pnl-questionnaire-card,
    .pnl-report-card {
        margin: 16px auto;
    }

    .pnl-dropzone { padding: 32px 20px; }
}