:root {
    --bg: #000000;
    --card: #0d0d0d;
    --border: #222222;
    --accent: #248bcf;
    --white: #ffffff;
    --gray: #777777;
}

body {
    background: var(--bg);
    color: var(--white);
    font-family: -apple-system, sans-serif;
    margin: 0; padding: 15px;
}

.tabs { display: flex; gap: 5px; margin-bottom: 20px; }
.tab-btn {
    flex: 1; padding: 12px; background: var(--card); border: 1px solid var(--border);
    color: var(--gray); font-size: 0.7rem; text-transform: uppercase; cursor: pointer;
}
.tab-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

.card {
    background: var(--card); border: 1px solid var(--border);
    padding: 20px; border-radius: 12px; margin-bottom: 20px;
}

input, select {
    width: 100%; background: #000000 !important; color: #ffffff !important;
    border: 1px solid var(--border); padding: 14px; border-radius: 8px;
    margin-bottom: 15px; box-sizing: border-box; outline: none; font-size: 1rem;
}
input:focus { border-color: var(--accent); }
input::-webkit-calendar-picker-indicator { filter: invert(1); }

.action-btn {
    width: 100%; background: var(--accent); color: white; border: none;
    padding: 16px; border-radius: 8px; font-weight: bold; cursor: pointer;
}

.list-item {
    background: var(--card); border: 1px solid var(--border);
    padding: 15px; border-radius: 10px; margin-bottom: 10px;
    display: flex; justify-content: space-between; align-items: center;
}

.item-time { font-size: 0.75rem; color: var(--gray); margin-bottom: 2px; }

.delete-icon {
    background: none; border: none; color: #444;
    font-size: 1.2rem; cursor: pointer; padding: 5px;
}
.delete-icon:hover { color: #ff4444; }

#chat-box {
    height: 350px; overflow-y: auto; border: 1px solid var(--border);
    padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column;
}
.msg { padding: 10px 14px; border-radius: 15px; margin-bottom: 8px; max-width: 80%; line-height: 1.4; }
.user-msg { background: var(--accent); align-self: flex-end; }
.ai-msg { background: #1a1a1a; align-self: flex-start; border: 1px solid var(--border); }

.tab-content { display: none; }
.tab-content.active { display: block; }