* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', monospace;
    background: #0f0f1a;
    color: #c9d1d9;
    height: 100vh;
    overflow: hidden;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1.5fr 1fr;
    grid-template-areas:
        "left-panel left-panel right-panel"
        "history input console";
    height: 100vh;
    gap: 2px;
}


/* Grid area assignments */

#history-panel {
    grid-area: history;
}

#input-center {
    grid-area: input;
}

#output {
    grid-area: left-panel;
    display: flex;
    flex-direction: column;
}

#right-panel-container {
    grid-area: right-panel;
    display: flex;
    flex-direction: column;
}

#console-panel {
    grid-area: console;
}


.grid-item {
    background: #1a1d29;
    border: 1px solid #2d3748;
    overflow: hidden;
}

.t-input {
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    background: #232a3d;
    border: 1px solid #4a5568;
}

.token-status {
    margin-bottom: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #374151;
}

.daily-stats {
    font-family: 'Courier New', monospace;
    margin-bottom: 3px;
}

.stats-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.stats-row.secondary {
    font-size: 10px;
    opacity: 0.7;
}

.stat-count {
    font-weight: bold;
}

.stats-row:first-child .stat-count {
    font-size: 16px;
    color: #a78bfa;
}

.stats-row.secondary .stat-count {
    font-size: 10px;
    color: #9ca3af;
}

.stat-label {
    font-size: 11px;
    color: #9ca3af;
}

.stats-row.secondary .stat-label {
    font-size: 9px;
}

.stat-target {
    font-size: 10px;
    color: #6b7280;
}

.stat-separator {
    color: #6b7280;
    margin: 0 2px;
}

.wake-up-btn {
    background: none;
    border: none;
    font-size: 12px;
    cursor: pointer;
    margin-left: 8px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.wake-up-btn:hover {
    background: rgba(107, 114, 128, 0.2);
}

.wake-up-btn.awake {
    background: rgba(34, 197, 94, 0.2);
}

.wake-up-btn.awake:hover {
    background: rgba(34, 197, 94, 0.3);
}

.progress-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.progress-bar-words, .progress-bar-tokens {
    flex: 1;
    height: 6px;
    background: #1a1d29;
    border-radius: 3px;
    border: 1px solid #374151;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    width: 0%;
    transition: width 0.3s ease;
}

.progress-percent {
    font-size: 9px;
    color: #6b7280;
    min-width: 28px;
    text-align: right;
    font-family: 'Courier New', monospace;
}

.input-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.input-controls button {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid #6b7280;
    color: #9ca3af;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.input-controls button:hover {
    color: #a78bfa;
    border-color: #a78bfa;
}

#diary-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    outline: none;
    padding: 10px 0;
}

#diary-input::placeholder {
    color: #6b7280;
}

.input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.submit-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-stats {
    font-size: 11px;
    color: #6b7280;
    font-family: 'Courier New', monospace;
    user-select: none;
}

/* Panel tabs for calendar/todo switcher */
.panel-tabs {
    display: flex;
    background: #1a1d29;
    border-bottom: 1px solid #2d3748;
}

.panel-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: #6b7280;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.panel-tab:hover {
    background: #2d3748;
    color: #9ca3af;
}

.panel-tab.active {
    background: #2d3748;
    color: #a78bfa;
    border-bottom: 2px solid #a78bfa;
}

.panel-content {
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
}

/* Todo panel styles */
.t-todo {
    background: #1a1d29;
}

/* Terminal panel styles */
.t-terminal {
    background: #1a1d29;
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #2a2d3a;
    border-bottom: 1px solid #404552;
}

.terminal-title {
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.terminal-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 11px;
    background: #1e2028;
    border-bottom: 1px solid #2a2d3a;
}

.status-indicator {
    font-size: 8px;
    color: #f87171;
}

.status-indicator.connected {
    color: #10b981;
}

.status-text {
    color: #9ca3af;
}

.terminal-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    background: #0f111a;
}

.todo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #2d3748;
    background: #1f2937;
}

.todo-title {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
}

.todo-input-area {
    padding: 10px 15px;
    border-bottom: 1px solid #2d3748;
}

#quick-todo-input {
    width: 100%;
    background: #232a3d;
    border: 1px solid #374151;
    color: #c9d1d9;
    padding: 8px 12px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    border-radius: 4px;
}

#quick-todo-input:focus {
    outline: none;
    border-color: #a78bfa;
}

#quick-todo-input::placeholder {
    color: #6b7280;
}

.todo-content {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px;
}

.todo-item {
    display: flex;
    align-items: flex-start;
    padding: 6px 8px;
    margin-bottom: 2px;
    background: transparent;
    border: none;
    border-radius: 0;
    gap: 8px;
    border-bottom: 1px solid rgba(45, 55, 72, 0.3);
}

.todo-item:hover {
    background: rgba(45, 55, 72, 0.2);
}

.todo-item.completed {
    opacity: 0.6;
}

.todo-item.completed .todo-text {
    color: rgba(16, 185, 129, 0.8);
    text-decoration: none;
}

/* Custom checkbox */
.todo-checkbox {
    display: none;
}

.todo-checkbox-custom {
    width: 14px;
    height: 14px;
    border: 1px solid #4a5568;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    position: relative;
    margin-top: 1px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.todo-checkbox-custom:hover {
    border-color: #6366f1;
}

.todo-item.completed .todo-checkbox-custom {
    background: #6366f1;
    border-color: #6366f1;
}

.todo-item.completed .todo-checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 9px;
    line-height: 1;
    font-weight: bold;
}

.todo-text {
    flex: 1;
    color: #c9d1d9;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    line-height: 1.3;
    word-wrap: break-word;
}

.todo-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.todo-item:hover .todo-actions {
    opacity: 1;
}

.todo-delete-btn {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 11px;
    padding: 0px 2px;
}

.todo-delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 2px;
}

.add-todo-btn, .clear-completed-btn, .export-todo-btn {
    background: none;
    border: 1px solid #374151;
    color: #9ca3af;
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

.add-todo-btn:hover, .clear-completed-btn:hover, .export-todo-btn:hover {
    background: #374151;
    color: #c9d1d9;
}

/* History panel view modes */
.history-view-btn {
    background: none;
    border: 1px solid #374151;
    color: #9ca3af;
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    min-width: 30px;
}

.history-view-btn:hover {
    background: #374151;
    color: #c9d1d9;
}

/* Full text view styles */
.history-full-entry {
    position: relative;
    border-bottom: 1px solid #374151;
    padding: 4px 0;
}

.history-full-entry:last-child {
    border-bottom: none;
}

.history-entry-content {
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.history-full-entry.active .history-entry-content {
    background: rgba(16, 185, 129, 0.15);
}

.history-full-entry.selected .history-entry-content {
    background: rgba(167, 139, 250, 0.15);
}

.history-full-text {
    font-size: 11px;
    line-height: 1.5;
    color: #c9d1d9;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-right: 60px; /* Space for timestamp */
}

.history-full-entry.active .history-full-text,
.history-full-entry.selected .history-full-text {
    color: #e5e7eb;
}

.history-timestamp {
    position: absolute;
    bottom: 8px;
    right: 0;
    font-size: 8px;
    color: #4b5563;
    font-family: 'Courier New', monospace;
    background: rgba(26, 29, 41, 0.8);
    padding: 1px 4px;
    border-radius: 2px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.history-entry-content:hover .history-timestamp {
    color: #6b7280;
}

.history-menu-container {
    position: absolute;
    top: 8px;
    right: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.history-entry-content:hover .history-menu-container {
    opacity: 1;
}

.history-menu-btn {
    background: transparent;
    border: none;
    color: #6b7280;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.history-menu-btn:hover {
    background: rgba(31, 41, 55, 0.8);
    border: 1px solid #374151;
    border-radius: 4px;
    color: #c9d1d9;
}

.history-menu {
    position: absolute;
    top: 25px;
    right: 0;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 4px;
    min-width: 80px;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.menu-delete {
    background: none;
    border: none;
    color: #ef4444;
    padding: 8px 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    transition: background-color 0.2s ease;
}

.menu-delete:hover {
    background: rgba(239, 68, 68, 0.1);
}

#submit-btn, #save-btn {
    padding: 8px 14px;
    background: transparent;
    color: #a78bfa;
    font-family: 'Courier New', monospace;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
    font-size: 11px;
    min-width: 60px;
    border: 1px solid #8b5cf6;
}

#submit-btn:hover, #save-btn:hover {
    background: #8b5cf6;
    color: #1a1d29;
}

#save-btn {
    border-color: #6b7280;
    color: #9ca3af;
}

#save-btn:hover {
    background: #6b7280;
    color: #fff;
}

.t-output {
    display: flex;
    flex-direction: column;
    background: #161925;
    position: relative;
}

.t-service {
    display: flex;
    flex-direction: column;
    background: #161925;
}

.t-service.t-history {
    background: #1a1d29;
}

.t-service.t-console {
    background: #0a0a0a;
}

.output-header {
    background: #232a3d;
    padding: 8px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
    border-bottom: 1px solid #374151;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Show buttons on panel hover */
.grid-item.t-output:hover .header-buttons,
.grid-item.t-service:hover .header-buttons,
#output:hover .header-buttons {
    opacity: 1;
}

.output-title {
    flex: 1;
}

.header-buttons {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.edit-prompt-btn,
.refresh-btn,
.context-btn {
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 10px;
    transition: all 0.15s ease;
    opacity: 0.7;
}

.edit-prompt-btn:hover,
.refresh-btn:hover,
.context-btn:hover {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
    opacity: 1;
}

.refresh-btn:hover {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.context-btn:hover {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

/* Model indicator styles */
.model-indicator {
    background: transparent;
    color: #6b7280;
    padding: 2px 4px;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 8px;
    font-weight: bold;
    border: 1px solid rgba(107, 114, 128, 0.3);
    min-width: 12px;
    text-align: center;
    cursor: help;
    transition: all 0.15s ease;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
}

.model-indicator.grok {
    color: #8b5cf6;
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.05);
}

.model-indicator.openai {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.05);
}

/* Make model indicator more visible on hover */
.grid-item.t-output:hover .model-indicator {
    opacity: 1;
}

/* Panel collapse functionality */
.panel {
    transition: all 0.3s ease;
    overflow: hidden;
}

.grid-item.collapsed .output-content,
.grid-item.collapsed .status-log,
.grid-item.collapsed .history-content,
.grid-item.collapsed .console-content,
.grid-item.collapsed .calendar-content {
    display: none;
}

.grid-item.collapsed {
    min-height: auto !important;
    height: auto !important;
    align-self: start;  /* Панель занимает минимальную высоту */
    max-height: 50px;   /* Ограничиваем высоту */
}

.output-title, .calendar-title {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
}

.output-title:hover, .calendar-title:hover {
    opacity: 0.8;
}

.output-title::after, .calendar-title::after {
    content: '▼';
    font-size: 10px;
    margin-left: 8px;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

.grid-item.collapsed .output-title::after,
.grid-item.collapsed .calendar-title::after {
    transform: rotate(-90deg);
}

.output-content {
    flex: 1;
    padding: 10px;
    padding-bottom: 38px; /* место для компактного статус лога (32px + border) */
    font-size: 12px;
    line-height: 1.2; /* Сжатый междустрочный интервал */
    overflow-y: auto;
    color: #d1d5db;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap; /* Сохраняем пробелы и переносы для ASCII графики */
}

.output-content p {
    margin: 0 0 4px 0;
}

.output-content p:empty {
    margin: 2px 0;
    height: 0.5em;
}


.output-content strong {
    color: #fbbf24;
    font-weight: bold;
}

.output-content em {
    color: #a78bfa;
    font-style: italic;
}

.output-content h1 {
    color: #fbbf24;
    font-size: 16px;
    margin: 12px 0 8px 0;
    font-weight: bold;
}

.output-content h2 {
    color: #fbbf24;
    font-size: 14px;
    margin: 10px 0 6px 0;
    font-weight: bold;
}

.output-content h3 {
    color: #fbbf24;
    font-size: 12px;
    margin: 8px 0 4px 0;
    font-weight: bold;
}

.output-content code {
    background: #1a1d29;
    color: #10b981;
    padding: 2px 4px;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
}

.output-content pre {
    background: #0f1219;
    border: 1px solid #374151;
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 8px 0;
}

.output-content pre code {
    background: none;
    padding: 0;
    color: #d1d5db;
    font-size: 9px;
    white-space: pre;
    word-wrap: normal;
}

.output-content ul {
    margin: 8px 0;
    padding-left: 16px;
}

.output-content li {
    color: #d1d5db;
    margin-bottom: 4px;
    list-style-type: disc;
}

.output-content::-webkit-scrollbar {
    width: 4px;
}

.output-content::-webkit-scrollbar-track {
    background: #1a1d29;
}

.output-content::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 2px;
}

/* Processing status styles */
.processing-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    color: #9ca3af;
    font-family: 'Courier New', monospace;
}

.status-message {
    font-size: 14px;
    margin-bottom: 20px;
    color: #d1d5db;
    text-align: center;
}

.animated-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 300px;
}

.progress-bar-container {
    flex: 1;
    height: 8px;
    background: #1a1d29;
    border-radius: 4px;
    border: 1px solid #374151;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    border-radius: 3px;
    transition: width 0.05s ease-out;
    position: relative;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 10px;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 100%);
    border-radius: 0 3px 3px 0;
}

.progress-percent {
    font-size: 11px;
    color: #9ca3af;
    font-family: 'Courier New', monospace;
    min-width: 35px;
    text-align: right;
}

/* Старые стили удалены - используем новые анимированные выше */

/* Status log styles */
.status-log {
    position: static;
    height: 20px;
    max-height: 20px;
    background: #0f1219;
    border-top: 1px solid #2d3748;
    font-family: 'Courier New', monospace;
    font-size: 8px;
    opacity: 0.9;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 10;
    margin-top: auto;
}

.status-log.expanded {
    height: 140px;
    max-height: 140px;
}

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 4px;
    background: #161925;
    border-bottom: 1px solid #2d3748;
    cursor: pointer;
    user-select: none;
    height: 18px;
    line-height: 1;
    transition: background-color 0.2s ease;
}

.log-header:hover {
    background: #1f2937;
}

.log-title {
    color: #4a5568;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.copy-log-btn {
    background: transparent;
    border: none;
    color: #6b7280;
    font-family: 'Courier New', monospace;
    font-size: 7px;
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 2px;
    transition: all 0.15s ease;
    opacity: 0.7;
}

.copy-log-btn:hover {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
    opacity: 1;
}

.log-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    margin: 0;
    max-height: 0;
    line-height: 1.1;
    display: none;
}

.status-log.expanded .log-content {
    display: block;
    overflow-y: auto;
    max-height: 108px; /* оставляем место для заголовка */
    padding: 2px 4px;
}

.log-entry {
    color: #64748b;
    margin-bottom: 0px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px 1px;
    font-size: 7px; /* немного меньше для лучшего размещения */
}

.log-entry:hover {
    white-space: normal;
    background: #1a1d29;
    padding: 2px;
    border-radius: 2px;
    z-index: 10;
    position: relative;
}

.log-separator {
    display: flex;
    align-items: center;
    margin: 4px 0;
    padding: 2px 0;
}

.separator-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #374151, transparent);
}

.separator-text {
    color: #4a5568;
    font-size: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 6px;
    background: #0f1219;
}

.output {
    position: relative;
}

.loading {
    color: #9ca3af;
    font-style: italic;
}

.media-content {
    max-width: 100%;
    height: auto;
    border: 1px solid #333;
    margin: 8px 0;
}

.media-content img {
    width: 100%;
    height: auto;
}

.media-content video {
    width: 100%;
    height: auto;
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 15, 26, 0.9);
}

.modal-content {
    background: #1a1d29;
    margin: 8% auto;
    border: 1px solid #4a5568;
    width: 70%;
    max-width: 600px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #232a3d;
    border-bottom: 1px solid #4a5568;
}

.modal-title {
    color: #a78bfa;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-close {
    color: #9ca3af;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #fbbf24;
}

.modal-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.history-entry {
    border: 1px solid #4a5568;
    margin-bottom: 20px;
    background: #161925;
}

.history-entry-header {
    background: #232a3d;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #4a5568;
}

.history-entry-date {
    color: #9ca3af;
    font-size: 11px;
}

.history-entry-actions {
    display: flex;
    gap: 8px;
}

.history-entry-actions button {
    background: transparent;
    border: 1px solid #6b7280;
    color: #9ca3af;
    padding: 2px 6px;
    font-size: 9px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
}

.history-entry-actions button:hover {
    color: #a78bfa;
    border-color: #a78bfa;
}

.history-entry-content {
    padding: 5px;
    color: #d1d5db;
    font-size: 12px;
    line-height: 1.4;
}

.history-entry-responses {
    display: none;
    padding: 15px;
    background: #0f1219;
}

.history-response {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #2d3748;
}

.history-response:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.history-response-header {
    color: #9ca3af;
    font-size: 10px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.history-response-content {
    color: #d1d5db;
    font-size: 11px;
    line-height: 1.3;
}

/* Prompt editing styles */
.prompt-edit-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.prompt-edit-form label {
    color: #a78bfa;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.prompt-input {
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.prompt-input:focus {
    outline: none;
    border-color: #a78bfa;
}

.prompt-textarea {
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    padding: 12px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.4;
    resize: vertical;
    min-height: 120px;
}

.prompt-textarea:focus {
    outline: none;
    border-color: #a78bfa;
}

.prompt-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 10px;
}

.prompt-actions button {
    background: transparent;
    border: 1px solid #6b7280;
    color: #9ca3af;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.prompt-actions button:hover {
    border-color: #a78bfa;
    color: #a78bfa;
}

#save-prompt-btn:hover {
    background: #8b5cf6;
    color: #1a1d29;
    border-color: #8b5cf6;
}

#reset-prompt-btn:hover {
    border-color: #fbbf24;
    color: #fbbf24;
}

.color-themes {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    justify-content: center;
}

.color-btn {
    width: 48px;
    height: 48px;
    border: 3px solid #4a5568;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    color: #e2e8f0;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.color-btn:hover {
    border-color: #fbbf24;
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(251,191,36,0.3);
}

.color-btn.active {
    border-color: #10b981 !important;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5) !important;
}

/* Panel history modal styles */
.panel-history-display {
    background: #0f1219;
    border: 1px solid #2d3748;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    line-height: 1.4;
    color: #d1d5db;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0;
}

.request-entry {
    border-bottom: 1px solid #2d3748;
    padding: 15px;
    margin: 0;
}

.request-entry:last-child {
    border-bottom: none;
}

.request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #374151;
}

.request-date {
    color: #9ca3af;
    font-size: 9px;
}

.request-actions {
    display: flex;
    gap: 8px;
}

.toggle-raw-btn,
.copy-request-btn {
    background: transparent;
    border: 1px solid #4a5568;
    color: #9ca3af;
    padding: 2px 6px;
    font-size: 8px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    border-radius: 2px;
    transition: all 0.2s;
}

.toggle-raw-btn:hover,
.copy-request-btn:hover {
    border-color: #a78bfa;
    color: #a78bfa;
}

.request-prompt {
    background: #1a1d29;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    border-left: 3px solid #4f46e5;
}

.request-prompt h4 {
    color: #a78bfa;
    font-size: 9px;
    margin: 0 0 6px 0;
    text-transform: uppercase;
}

.request-response {
    background: #161925;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    border-left: 3px solid #10b981;
}

.request-response h4 {
    color: #10b981;
    font-size: 9px;
    margin: 0 0 6px 0;
    text-transform: uppercase;
}

.request-raw {
    background: #0f0a0a;
    padding: 10px;
    border-radius: 4px;
    border-left: 3px solid #fbbf24;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.request-raw.visible {
    display: block;
}

.request-raw h4 {
    color: #fbbf24;
    font-size: 9px;
    margin: 0 0 6px 0;
    text-transform: uppercase;
}

.request-raw pre {
    margin: 0;
    white-space: pre-wrap;
    font-size: 8px;
    color: #d1d5db;
}

.context-section {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #374151;
}

.context-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.context-section h4 {
    color: #fbbf24;
    margin: 0 0 8px 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.context-entry {
    background: #1a1d29;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 3px;
    border-left: 3px solid #6b7280;
}

.context-entry-date {
    color: #9ca3af;
    font-size: 9px;
    margin-bottom: 4px;
}

.context-entry-text {
    color: #e2e8f0;
}

/* Console panel specific styles */
.t-console .output-header {
    background: #1a1a1a;
    border-bottom: 1px solid #333;
}

.console-content {
    flex: 1;
    padding: 8px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    line-height: 1.2;
    overflow-y: auto;
    background: #0a0a0a;
    color: #c9d1d9;
    white-space: pre-wrap;
    word-break: break-all;
}

.console-content::-webkit-scrollbar {
    width: 4px;
}

.console-content::-webkit-scrollbar-track {
    background: #0a0a0a;
}

.console-content::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

.console-entry {
    margin-bottom: 2px;
    padding: 1px 0;
}

.console-entry.log {
    color: #c9d1d9;
}

.console-entry.error {
    color: #ff6b6b;
}

.console-entry.warn {
    color: #feca57;
}

.console-entry.info {
    color: #48cae4;
}

.console-entry.debug {
    color: #a78bfa;
}

.console-timestamp {
    color: #6b7280;
    margin-right: 8px;
}

.clear-console-btn,
.toggle-autoscroll-btn {
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 10px;
    transition: all 0.2s;
}

.clear-console-btn:hover,
.toggle-autoscroll-btn:hover {
    background: #374151;
    color: #a78bfa;
}

.toggle-autoscroll-btn.active {
    color: #10b981;
    background: #064e3b;
}

/* History panel styles - minimalist terminal */
.t-history .history-content {
    flex: 1;
    padding: 8px;
    font-size: 9px;
    line-height: 1.2;
    overflow-y: auto;
    color: #d1d5db;
}

.history-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    font-size: 10px;
}

.history-clear-btn,
.history-export-btn {
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 10px;
    transition: all 0.2s;
}

.history-clear-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.history-export-btn:hover {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.history-line {
    color: #9ca3af;
    padding: 2px 4px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.1s ease;
    border-left: 2px solid transparent;
}

.history-line:hover {
    background: #232a3d;
    color: #e2e8f0;
    border-left-color: #a78bfa;
}

.history-line.active {
    background: rgba(16, 185, 129, 0.15);
    color: #e5e7eb;
    border-left-color: #10b981;
}

.history-line.active:hover {
    background: rgba(16, 185, 129, 0.2);
}

.history-line.selected {
    background: rgba(167, 139, 250, 0.15);
    color: #e5e7eb;
    border-left-color: #a78bfa;
}

.history-line.selected:hover {
    background: rgba(167, 139, 250, 0.2);
}

.clear-history-btn {
    color: #ef4444 !important;
}

.clear-history-btn:hover {
    background: #7f1d1d;
    color: #fca5a5 !important;
}

/* Font size variations */
.font-size-small .output-content {
    font-size: 10px;
    line-height: 1.3;
}

.font-size-medium .output-content {
    font-size: 12.5px;
    line-height: 1.4;
}

.font-size-large .output-content {
    font-size: 14px;
    line-height: 1.5;
}

.font-size-xlarge .output-content {
    font-size: 16px;
    line-height: 1.6;
}

/* Font size button indicator */
#font-size-btn {
    position: relative;
}

#font-size-btn::after {
    content: attr(data-size);
    position: absolute;
    top: -6px;
    right: -1px;
    font-size: 8px;
    color: #fbbf24;
    background: #0f0f1a;
    padding: 1px 2px;
    border-radius: 2px;
    border: 1px solid #374151;
    pointer-events: none;
    min-width: 8px;
    text-align: center;
}

/* Model selection modal styles */
.model-settings {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.current-model-info h4 {
    color: #a78bfa;
    font-size: 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.current-model {
    background: #0f1219;
    border: 1px solid #374151;
    padding: 8px 12px;
    border-radius: 4px;
    color: #10b981;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.api-keys-section h4,
.model-selection h4 {
    color: #a78bfa;
    font-size: 12px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.api-key-input {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.api-key-input label {
    min-width: 120px;
    color: #d1d5db;
    font-size: 11px;
    font-family: 'Courier New', monospace;
}

.api-key-field {
    flex: 1;
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.api-key-field:focus {
    outline: none;
    border-color: #a78bfa;
}

.save-key-btn {
    background: transparent;
    border: 1px solid #6b7280;
    color: #9ca3af;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.save-key-btn:hover {
    border-color: #10b981;
    color: #10b981;
}

.provider-sections {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.provider-section h5 {
    color: #fbbf24;
    font-size: 13px;
    margin-bottom: 8px;
    font-family: 'Courier New', monospace;
}

.model-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.model-button {
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #d1d5db;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.model-button:hover {
    border-color: #a78bfa;
    color: #a78bfa;
    transform: translateY(-1px);
}

.model-button.active {
    background: #10b981;
    color: #1a1d29;
    border-color: #10b981;
}

.model-button.active::after {
    content: "✓";
    position: absolute;
    top: -2px;
    right: -2px;
    background: #10b981;
    color: white;
    font-size: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* App settings modal styles */
.app-settings {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-section {
    border: 1px solid #374151;
    border-radius: 4px;
    padding: 15px;
    background: #0f1219;
}

.settings-section h4 {
    color: #a78bfa;
    font-size: 12px;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
}

.token-goal-input,
.font-size-setting,
.context-setting {
    display: flex;
    align-items: center;
    gap: 10px;
}

.token-input {
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    width: 80px;
}

.token-input:focus {
    outline: none;
    border-color: #a78bfa;
}

.setting-btn {
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #d1d5db;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.setting-btn:hover {
    border-color: #a78bfa;
    color: #a78bfa;
}

/* Panel model selection in prompt edit */
.panel-model-selection {
    background: #0f1219;
    border: 1px solid #374151;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
}

.current-panel-model {
    background: #232a3d;
    border: 1px solid #4a5568;
    padding: 6px 10px;
    border-radius: 4px;
    color: #10b981;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 10px;
}

.model-selection-grid {
    display: flex;
    gap: 15px;
}

.model-provider-section {
    flex: 1;
}

.model-provider-section h6 {
    color: #fbbf24;
    font-size: 11px;
    margin: 0 0 6px 0;
    font-family: 'Courier New', monospace;
}

.panel-model-buttons {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.panel-model-btn {
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #d1d5db;
    padding: 4px 8px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.panel-model-btn:hover {
    border-color: #a78bfa;
    color: #a78bfa;
}

.panel-model-btn.active {
    background: #10b981;
    color: #1a1d29;
    border-color: #10b981;
}

/* New settings styles */
.system-prompt-textarea {
    width: 100%;
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.4;
    resize: vertical;
    margin-bottom: 10px;
}

.system-prompt-textarea:focus {
    outline: none;
    border-color: #a78bfa;
}

.user-profile-inputs,
.generation-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-input,
.gen-input {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-input label,
.gen-input label {
    color: #d1d5db;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    font-weight: normal;
}

.profile-field,
.gen-field {
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.profile-field:focus,
.gen-field:focus {
    outline: none;
    border-color: #a78bfa;
}

.profile-textarea {
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.3;
    resize: vertical;
}

.profile-textarea:focus {
    outline: none;
    border-color: #a78bfa;
}

/* API Error display styles */
.api-error {
    background: #1a0f0f;
    border: 1px solid #dc2626;
    border-radius: 6px;
    padding: 8px 12px;
    margin: 8px 0;
    font-family: 'Courier New', monospace;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.error-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.error-icon {
    color: #ef4444;
    font-size: 18px;
    font-weight: bold;
}

.error-title {
    color: #fca5a5;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.error-details {
    color: #d1d5db;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #0f0a0a;
    border-radius: 4px;
    border-left: 3px solid #dc2626;
}

.error-suggestions {
    margin-bottom: 16px;
}

.suggestions-title {
    color: #fbbf24;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.suggestion {
    color: #9ca3af;
    font-size: 10px;
    margin-bottom: 2px;
    padding-left: 4px;
}

.error-actions {
    display: flex;
    gap: 8px;
}

.retry-btn,
.copy-error-btn {
    background: transparent;
    border: 1px solid #6b7280;
    color: #9ca3af;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.retry-btn:hover {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.copy-error-btn:hover {
    border-color: #a78bfa;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.1);
}

/* Enhanced Request History Modal Styles */
.request-entry {
    background: #1a1d29;
    border: 1px solid #2d3748;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #161925;
    border-bottom: 1px solid #2d3748;
}

.request-date {
    color: #9ca3af;
    font-size: 11px;
    font-family: 'Courier New', monospace;
}

.request-actions {
    display: flex;
    gap: 6px;
}

.request-actions button {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid #4a5568;
    color: #9ca3af;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Courier New', monospace;
}

.request-actions button:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.request-actions button.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

.request-summary {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-prompt h4,
.summary-response h4 {
    margin: 0 0 6px 0;
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.prompt-preview,
.response-preview {
    background: #0f1219;
    padding: 8px;
    border-radius: 4px;
    font-size: 10px;
    color: #cbd5e0;
    line-height: 1.4;
    font-family: 'Courier New', monospace;
    word-break: break-word;
}

.request-full-prompt,
.request-full-response,
.request-raw {
    border-top: 1px solid #2d3748;
    padding: 16px;
    background: #0f1219;
}

.request-full-prompt h4,
.request-full-response h4,
.request-raw h4 {
    margin: 0 0 12px 0;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.full-prompt-content,
.full-response-content {
    max-height: 400px;
    overflow-y: auto;
}

.formatted-prompt,
.formatted-response {
    background: #161925;
    padding: 12px;
    border-radius: 6px;
    font-size: 10px;
    color: #e2e8f0;
    line-height: 1.5;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid #2d3748;
}

.raw-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.raw-request,
.raw-response {
    background: #161925;
    border: 1px solid #2d3748;
    border-radius: 6px;
    padding: 12px;
}

.raw-request h4,
.raw-response h4 {
    margin: 0 0 8px 0;
    color: #fbbf24;
    font-size: 11px;
}

.raw-json {
    background: #0f1219;
    padding: 8px;
    border-radius: 4px;
    font-size: 9px;
    color: #94a3b8;
    line-height: 1.4;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #374151;
}

/* Scrollbar styling for raw sections */
.raw-json::-webkit-scrollbar,
.full-prompt-content::-webkit-scrollbar,
.full-response-content::-webkit-scrollbar {
    width: 6px;
}

.raw-json::-webkit-scrollbar-track,
.full-prompt-content::-webkit-scrollbar-track,
.full-response-content::-webkit-scrollbar-track {
    background: #1a1d29;
}

.raw-json::-webkit-scrollbar-thumb,
.full-prompt-content::-webkit-scrollbar-thumb,
.full-response-content::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 3px;
}

.raw-json::-webkit-scrollbar-thumb:hover,
.full-prompt-content::-webkit-scrollbar-thumb:hover,
.full-response-content::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}

/* Settings Modal Tabs */
.settings-tabs {
    display: flex;
    border-bottom: 1px solid #374151;
    margin-bottom: 20px;
}

.settings-tab {
    background: transparent;
    border: none;
    color: #9ca3af;
    padding: 12px 16px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.settings-tab:hover {
    color: #e5e7eb;
    background: rgba(156, 163, 175, 0.1);
}

.settings-tab.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.settings-content {
    display: none;
}

.settings-content.active {
    display: block;
}

.settings-section {
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.settings-section h3 {
    margin: 0 0 16px 0;
    color: #e5e7eb;
    font-size: 16px;
    font-family: 'Courier New', monospace;
}

.settings-section p {
    margin: 0 0 16px 0;
    color: #9ca3af;
    font-size: 12px;
}

.api-key-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.api-key-section label {
    min-width: 120px;
    color: #d1d5db;
    font-size: 12px;
    font-family: 'Courier New', monospace;
}

.api-key-input {
    flex: 1;
    padding: 8px 12px;
    background: #111827;
    border: 1px solid #374151;
    color: #e5e7eb;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.toggle-visibility {
    background: transparent;
    border: 1px solid #374151;
    color: #9ca3af;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.toggle-visibility:hover {
    border-color: #6366f1;
    color: #6366f1;
}

.save-btn {
    background: #6366f1;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    transition: background 0.2s;
}

.save-btn:hover {
    background: #4f46e5;
}

.reset-btn {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    transition: all 0.2s;
}

.reset-btn:hover {
    background: #ef4444;
    color: white;
}

.profile-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-field label {
    color: #d1d5db;
    font-size: 12px;
    font-family: 'Courier New', monospace;
}

.profile-field input,
.profile-field textarea,
#app-system-prompt {
    width: 100%;
    padding: 8px 12px;
    background: #111827;
    border: 1px solid #374151;
    color: #e5e7eb;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    resize: vertical;
    box-sizing: border-box;
}

#app-system-prompt {
    min-height: 200px;
    width: 100%;
}

.prompt-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.generation-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.control-group label {
    min-width: 180px;
    color: #d1d5db;
    font-size: 12px;
    font-family: 'Courier New', monospace;
}

.control-group input[type="range"] {
    flex: 1;
    height: 4px;
    background: #374151;
    border-radius: 2px;
    outline: none;
}

.control-group input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: #6366f1;
    border-radius: 50%;
    cursor: pointer;
}

.control-group span {
    min-width: 40px;
    text-align: center;
    color: #e5e7eb;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

/* Minimal Anthropic-style ASCII Block */
.ascii-block {
    background: #0a0a0f;
    border: 1px solid #2a2a35;
    border-radius: 6px;
    margin: 12px 0;
    padding: 16px;
    position: relative;
    transition: border-color 0.2s ease;
}

.ascii-block::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 6px;
    background: linear-gradient(45deg, transparent, #3a3a45, transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ascii-block:hover::before {
    opacity: 0.3;
}

.ascii-content {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.3;
    color: #d4d4d8;
    white-space: pre;
    overflow-x: auto;
    letter-spacing: 0;
    font-weight: 400;
}

/* Syntax highlighting for hierarchical structures */
.ascii-content {
    /* Structural characters */
    background-image:
        /* Tree branches */
        linear-gradient(transparent, transparent);
}

/* Color coding for different elements */
.ascii-content:has-content("├") {
    color: #a1a1aa; /* Tree connectors - subtle gray */
}

/* Scrollbar - minimal style */
.ascii-content::-webkit-scrollbar {
    height: 2px;
}

.ascii-content::-webkit-scrollbar-track {
    background: transparent;
}

.ascii-content::-webkit-scrollbar-thumb {
    background: #3a3a45;
    border-radius: 1px;
}

.ascii-content::-webkit-scrollbar-thumb:hover {
    background: #4a4a55;
}

/* Subtle hover effect */
.ascii-block:hover {
    border-color: #3a3a45;
}

.ascii-block:hover .ascii-content {
    color: #e4e4e7;
}

/* === GRID RESIZE FUNCTIONALITY === */
.grid-container {
    position: relative;
}

.grid-resize-handle {
    position: absolute;
    background: transparent;
    transition: background-color 0.2s ease;
    z-index: 1000;
}

.grid-resize-handle:hover {
    background-color: #4a9eff;
}

.grid-resize-handle.dragging {
    background-color: #6ba3ff !important;
}

/* Vertical resize handles (column dividers) */
.grid-resize-vertical {
    width: 4px;
    height: 100%;
    cursor: col-resize;
    top: 0;
}

/* Horizontal resize handles (row dividers) */
.grid-resize-horizontal {
    height: 4px;
    width: 100%;
    cursor: row-resize;
    left: 0;
}

/* === PANEL FOCUS MODE === */
.panel-expand-btn {
    position: absolute;
    bottom: 28px;
    right: 4px;
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #9ca3af;
    padding: 4px 8px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 15;
    font-weight: normal;
}

/* Special positioning for input panel focus button */
#input-center .panel-expand-btn {
    position: static;
    margin-left: auto;
    opacity: 1;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid #6b7280;
    color: #9ca3af;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

#input-center .panel-expand-btn:hover {
    color: #a78bfa;
    border-color: #a78bfa;
}

.grid-item:hover .panel-expand-btn {
    opacity: 1;
}

.panel-expand-btn:hover {
    border-color: #6366f1;
    color: #6366f1;
    transform: scale(1.02);
}

.focus-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 15, 26, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.focus-modal-overlay.show {
    opacity: 1;
}

.focus-modal {
    width: 90vw;
    max-width: 1200px;
    height: 90vh;
    background: #1a1d29;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 3rem 3rem 1.5rem 3rem;
    transform: scale(0.1);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.focus-modal-overlay.show .focus-modal {
    transform: scale(1);
}

.focus-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    z-index: 10;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
    opacity: 0.7;
}

.focus-close-btn:hover {
    color: #9ca3af;
    background-color: rgba(107, 114, 128, 0.1);
    opacity: 1;
}

#focusEditor {
    flex: 1;
    background: #0f0f1a;
    border: 1px solid #374151;
    border-radius: 6px;
    padding: 2rem;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    line-height: 1.7;
    color: #d1d5db;
    resize: none;
    outline: none;
    transition: all 0.2s ease;
}

#focusEditor:focus {
    border-color: #6b7280;
    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.1);
}

.focus-input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
}

.focus-input-stats {
    font-size: 10px;
    color: #6b7280;
    font-family: 'Courier New', monospace;
}

.focus-submit-buttons {
    display: flex;
    gap: 8px;
}

.focus-save-button,
.focus-process-button {
    padding: 0.5rem 1.5rem;
    background: #374151;
    color: #d1d5db;
    border: 1px solid #4b5563;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    font-family: 'Courier New', monospace;
    transition: all 0.2s ease;
    text-transform: lowercase;
}

.focus-save-button:hover,
.focus-process-button:hover {
    background: #4b5563;
    border-color: #6b7280;
    color: #f3f4f6;
}

.focus-process-button {
    background: #4f46e5;
    border-color: #6366f1;
}

.focus-process-button:hover {
    background: #6366f1;
    border-color: #818cf8;
}

/* Focus modal animations from specific panel positions */
.focus-modal.from-top-left {
    transform-origin: 16.66% 16.66%;
}

.focus-modal.from-top-center {
    transform-origin: 50% 16.66%;
}

.focus-modal.from-top-right {
    transform-origin: 83.33% 16.66%;
}

.focus-modal.from-middle-left {
    transform-origin: 16.66% 50%;
}

.focus-modal.from-middle-center {
    transform-origin: 50% 50%;
}

.focus-modal.from-middle-right {
    transform-origin: 83.33% 50%;
}

.focus-modal.from-bottom-left {
    transform-origin: 16.66% 83.33%;
}

.focus-modal.from-bottom-center {
    transform-origin: 50% 83.33%;
}

.focus-modal.from-bottom-right {
    transform-origin: 83.33% 83.33%;
}

/* === MOBILE RESPONSIVE DESIGN === */
@media (max-width: 1024px) {
    body {
        height: 100vh;
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    .grid-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        grid-template-areas:
            "history"
            "input" !important;
        height: 100vh !important;
        gap: 0px !important;
        padding: 0px !important;
    }

    /* Show mobile tabs container */
    .mobile-tabs-container {
        display: flex !important;
        grid-area: history;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    /* Hide desktop panels on mobile */
    #output-1, #output-2, #output, #console-panel {
        display: none !important;
    }

    /* Create mobile tabbed container */
    .mobile-tabs-container {
        grid-area: tabs;
        display: flex;
        flex-direction: column;
        background: #1a1d29;
        border: 1px solid #2d3748;
        height: 100%;
        max-height: 50vh;
        overflow: hidden;
    }

    /* Mobile tab navigation */
    .mobile-tab-nav {
        display: flex;
        background: #232a3d;
        border-bottom: 1px solid #2d3748;
    }

    .mobile-tab-btn {
        flex: 1;
        background: transparent;
        border: none;
        color: #6b7280;
        font-family: 'Courier New', monospace;
        font-size: 11px;
        padding: 8px 4px;
        cursor: pointer;
        transition: all 0.2s ease;
        border-bottom: 2px solid transparent;
    }

    .mobile-tab-btn:hover {
        color: #9ca3af;
        background: rgba(156, 163, 175, 0.1);
    }

    .mobile-tab-btn.active {
        color: #a78bfa;
        border-bottom-color: #a78bfa;
        background: rgba(167, 139, 250, 0.1);
    }

    /* Mobile tab content */
    .mobile-tab-content {
        flex: 1;
        display: none;
        overflow: hidden;
        position: relative;
    }

    .mobile-tab-content.active {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Fix history content scrolling issues */
    .mobile-tab-content .history-content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }

    /* Hide original panels on mobile */
    #history-panel, #output, #right-panel-container {
        display: none !important;
    }


    /* Mobile input panel */
    #input-center {
        grid-area: input;
        padding: 15px;
    }

    /* Mobile history panel */
    #history-panel {
        grid-area: history;
    }

    /* Adjust input controls for mobile */
    .input-controls {
        flex-wrap: wrap;
        gap: 6px;
    }

    .input-controls button {
        font-size: 12px;
        padding: 6px 12px;
    }

    /* Mobile diary input - smaller */
    #diary-input {
        font-size: 16px; /* Prevents zoom on iOS */
        line-height: 1.4;
        min-height: 60px; /* Reduced from 120px */
    }

    /* Mobile submit buttons - smaller and inline */
    .submit-buttons {
        gap: 8px;
        flex-direction: row;
    }

    #submit-btn, #save-btn {
        font-size: 12px;
        padding: 8px 16px;
        min-width: 60px;
        flex: 1;
    }

    /* Mobile token status */
    .token-status {
        font-size: 12px;
    }

    .daily-stats {
        margin-bottom: 8px;
    }

    .stats-row:first-child .stat-count {
        font-size: 18px;
    }

    /* Mobile history content */
    .history-content {
        padding: 12px;
        font-size: 12px;
    }

    .history-line {
        font-size: 11px;
        padding: 6px;
        line-height: 1.4;
    }

    /* Mobile panel headers */
    .output-header {
        font-size: 12px;
        padding: 10px;
    }

    /* Hide panel expand buttons on mobile */
    .panel-expand-btn {
        display: none !important;
    }

    /* Hide file operation buttons on mobile */
    .input-controls button[onclick*="hist"],
    .input-controls button[onclick*="json"],
    .input-controls button[onclick*="md"],
    .input-controls button[onclick*="imp"],
    .input-controls button[onclick*="export"] {
        display: none !important;
    }

    /* Keep only essential buttons on mobile */
    .input-controls {
        justify-content: center;
    }

    /* Compact mobile statistics - single line */
    .daily-stats {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
        font-size: 11px;
        padding: 4px 0;
    }

    .stats-row {
        margin-bottom: 0;
        gap: 4px;
        align-items: center;
    }

    .stats-row:first-child {
        flex: 1;
    }

    .stats-row:first-child .stat-count {
        font-size: 14px;
        color: #a78bfa;
    }

    .stats-row.secondary {
        font-size: 10px;
        opacity: 0.8;
        gap: 2px;
    }

    .stats-row.secondary .stat-count {
        font-size: 10px;
    }

    .stat-target {
        font-size: 9px;
    }

    /* Hide progress bar on mobile for cleaner look */
    .progress-container {
        display: none;
    }

    /* Adjust wake-up button for mobile */
    .wake-up-btn {
        font-size: 14px;
        padding: 4px 8px;
    }

    /* Mobile progress bars */
    .progress-container {
        gap: 8px;
    }

    .progress-bar-words, .progress-bar-tokens {
        height: 8px;
    }

    .progress-percent {
        font-size: 11px;
    }

    /* Show history view buttons on mobile */
    .history-view-btn {
        display: inline-block !important;
        font-size: 10px;
        padding: 3px 6px;
    }

    /* Keep history clear/export for mobile but smaller */
    .history-clear-btn,
    .history-export-btn {
        font-size: 9px;
        padding: 2px 5px;
    }

    /* Mobile calendar styles */
    .t-calendar {
        font-size: 11px;
    }

    .calendar-header {
        padding: 6px 10px;
        min-height: 30px;
    }

    .calendar-title {
        font-size: 11px;
    }

    .calendar-nav-btn, .view-toggle-btn, .calendar-settings-btn {
        font-size: 9px;
        padding: 2px 6px;
    }

    .calendar-layers {
        padding: 6px 10px;
    }

    .layer-tab {
        font-size: 8px;
        padding: 2px 6px;
    }

    .add-layer-btn {
        font-size: 10px;
        padding: 2px 6px;
    }

    .calendar-content {
        padding: 8px;
    }

    .calendar-month-year {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .calendar-month-nav {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .calendar-grid {
        max-width: 240px;
    }

    .weekday {
        font-size: 9px;
        padding: 2px;
    }

    .calendar-day {
        font-size: 10px;
    }
}

/* Portrait phones */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .grid-container {
        gap: 1px;
        padding: 1px;
    }

    #input-center {
        padding: 12px;
    }

    .input-controls {
        margin-bottom: 8px;
    }

    .input-controls button {
        font-size: 11px;
        padding: 4px 8px;
    }

    #diary-input {
        font-size: 16px;
        min-height: 100px;
    }

    .submit-buttons {
        flex-direction: column;
        gap: 8px;
    }

    #submit-btn, #save-btn {
        width: 100%;
    }

    .daily-stats {
        text-align: center;
    }

    .stats-row {
        justify-content: center;
    }
}

/* === CALENDAR PANEL STYLES === */
.t-calendar {
    display: flex;
    flex-direction: column;
    background: #1a1d29;
    border: 1px solid #2d3748;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #232a3d;
    border-bottom: 1px solid #2d3748;
    min-height: 40px;
}

.calendar-title {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #e2e8f0;
    font-weight: bold;
}

.calendar-nav-btn, .view-toggle-btn, .calendar-settings-btn {
    background: transparent;
    border: 1px solid #6b7280;
    color: #9ca3af;
    padding: 4px 8px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 4px;
}

.calendar-nav-btn:hover, .view-toggle-btn:hover, .calendar-settings-btn:hover {
    color: #a78bfa;
    border-color: #a78bfa;
}

/* Universal Layer Styles */
.calendar-layers, .todo-layers, .message-layers {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(45, 55, 72, 0.3);
    background: transparent;
}

.layer-tabs, .todo-layer-tabs, .message-layer-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
}

.layer-tab, .todo-layer-tab, .message-layer-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #9ca3af;
    padding: 4px 6px;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.layer-tab:hover, .todo-layer-tab:hover, .message-layer-tab:hover {
    color: #c9d1d9;
}

.layer-tab.active, .todo-layer-tab.active, .message-layer-tab.active {
    color: #ffffff;
    border-radius: 3px;
    border-bottom: 2px solid transparent;
}

.add-layer-btn, .add-todo-layer-btn, .add-message-layer-btn {
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 2px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
    line-height: 1;
}

.add-layer-btn:hover, .add-todo-layer-btn:hover, .add-message-layer-btn:hover {
    color: #10b981;
    transform: scale(1.1);
}


/* Layer tags in history */
.layer-tag {
    font-size: 8px;
    font-weight: bold;
    padding: 1px 3px;
    margin-right: 4px;
}

.layer-tag-full {
    font-size: 8px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 2px;
    margin-left: 8px;
}

.history-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Layer Edit Modal */
.layer-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.layer-edit-content {
    background: #1a1d29;
    border: 1px solid #2d3748;
    border-radius: 6px;
    padding: 20px;
    min-width: 300px;
    color: #c9d1d9;
}

.layer-edit-content h3 {
    margin: 0 0 16px 0;
    color: #e2e8f0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

.layer-edit-field {
    margin-bottom: 16px;
}

.layer-edit-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    color: #9ca3af;
    font-family: 'Courier New', monospace;
}

.layer-edit-field input[type="text"] {
    width: 100%;
    background: #0f0f1a;
    border: 1px solid #2d3748;
    color: #c9d1d9;
    padding: 6px 8px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.layer-edit-field input[type="text"]:focus {
    outline: none;
    border-color: #6366f1;
}

.color-picker {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-picker input[type="color"] {
    width: 32px;
    height: 24px;
    border: 1px solid #2d3748;
    border-radius: 3px;
    cursor: pointer;
}

.color-presets {
    display: flex;
    gap: 4px;
}

.color-preset {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s;
}

.color-preset:hover {
    transform: scale(1.2);
}

.layer-edit-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
}

.layer-edit-buttons button {
    background: #374151;
    border: 1px solid #4b5563;
    color: #c9d1d9;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    transition: all 0.2s;
}

.layer-edit-buttons button:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.layer-edit-buttons button.delete-btn {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fca5a5;
}

.layer-edit-buttons button.delete-btn:hover {
    background: #991b1b;
    border-color: #b91c1c;
}

.calendar-content {
    flex: 1;
    padding: 12px;
    overflow: auto;
}

.calendar-month-year {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #e2e8f0;
    font-weight: bold;
    margin-bottom: 16px;
}

.calendar-month-nav {
    background: none;
    border: 1px solid #4a5568;
    color: #9ca3af;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.calendar-month-nav:hover {
    color: #a78bfa;
    border-color: #a78bfa;
}

.calendar-grid {
    max-width: 280px;
    margin: 0 auto;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.weekday {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #6b7280;
    padding: 4px 2px;
    font-weight: bold;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    position: relative;
}

.calendar-day:hover {
    background: #2d3748;
    border-color: #4a5568;
}

.calendar-day.other-month {
    color: #4a5568;
    opacity: 0.5;
}

.calendar-day.today {
    background: rgba(167, 139, 250, 0.05);
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.calendar-day.has-diary {
    position: relative;
}

.calendar-day.has-diary::before {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #6366f1;
}

/* Calendar day states for layers - subtle fills */
.calendar-day.state-positive {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.calendar-day.state-negative {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.calendar-day.state-neutral {
    background: transparent;
    border-color: #4a5568;
    color: #9ca3af;
}

/* Calendar day comment modal */
.calendar-comment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 15, 26, 0.9);
    backdrop-filter: blur(4px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.calendar-comment-modal.show {
    opacity: 1;
}

.calendar-comment-content {
    background: #1a1d29;
    border: 1px solid #2d3748;
    border-radius: 8px;
    padding: 16px;
    min-width: 360px;
    max-width: 500px;
}

.calendar-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.calendar-comment-title {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #e2e8f0;
    font-weight: bold;
}

.calendar-comment-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px;
    background: #232a3d;
    border-radius: 4px;
    border: 1px solid #2d3748;
}

.calendar-layer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.calendar-layer-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: bold;
}

.calendar-state-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #9ca3af;
}

.calendar-state-dot {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.calendar-comment-close {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}

.calendar-comment-close:hover {
    color: #ef4444;
}

.calendar-comment-textarea {
    width: 100%;
    background: #232a3d;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    padding: 12px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    resize: vertical;
    margin-bottom: 16px;
    min-height: 80px;
}

.calendar-comment-textarea:focus {
    outline: none;
    border-color: #6366f1;
}

.calendar-comment-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.calendar-comment-btn {
    background: #232a3d;
    border: 1px solid #6b7280;
    color: #9ca3af;
    padding: 6px 12px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.calendar-comment-btn:hover {
    color: #a78bfa;
    border-color: #a78bfa;
}

.calendar-comment-btn.primary {
    border-color: #6366f1;
    color: #6366f1;
}

.calendar-comment-btn.primary:hover {
    background: #6366f1;
    color: #ffffff;
}

/* Raw data modal styles */
.raw-data-content {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.4;
    max-height: 70vh;
    overflow-y: auto;
    background: #1a202c;
    border-radius: 6px;
    padding: 16px;
}

.raw-data-section {
    margin-bottom: 16px;
    border-bottom: 1px solid #4a5568;
    padding-bottom: 12px;
}

.raw-data-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.raw-data-label {
    font-size: 10px;
    color: #a78bfa;
    font-weight: bold;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.raw-data-value {
    color: #e2e8f0;
    white-space: pre-wrap;
    word-break: break-word;
    background: #2d3748;
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #6366f1;
}

.raw-data-json {
    background: #2d3748;
    padding: 12px;
    border-radius: 4px;
    border-left: 3px solid #10b981;
    overflow-x: auto;
}

.raw-data-json pre {
    margin: 0;
    color: #d1fae5;
    font-size: 10px;
    line-height: 1.3;
}

/* History menu button styles */
.menu-raw {
    background: none;
    border: none;
    color: #a78bfa;
    padding: 8px 16px;
    font-size: 11px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-radius: 3px;
    transition: all 0.2s;
}

.menu-raw:hover {
    background: #4c1d95;
    color: #ddd6fe;
}

/* Sync Indicator */
#sync-indicator {
    position: fixed;
    top: 12px;
    right: 12px;
    padding: 8px 14px;
    background: rgba(15, 15, 26, 0.95);
    border: 1px solid #4a5568;
    color: #e2e8f0;
    border-radius: 6px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    z-index: 10000;
    transition: opacity 0.3s, border-color 0.3s;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#sync-indicator.syncing {
    border-color: #6366f1;
    animation: pulse 1.5s ease-in-out infinite;
}

#sync-indicator.online {
    border-color: #10b981;
}

#sync-indicator.offline {
    border-color: #ef4444;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        border-color: #6366f1;
    }
    50% {
        opacity: 0.7;
        border-color: #818cf8;
    }
}