/* Chrome-like Simple Stylesheet for InvisiProxy */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
	/* Цвета Chrome Dark Theme */
	--chrome-frame-bg: #202124;
	--chrome-toolbar-bg: #35363a;
	--chrome-input-bg: #202124;
	--chrome-border: #1f1f1f;
	--chrome-text: #e8eaed;
	--chrome-text-muted: #9aa0a6;
	--chrome-active-tab: #35363a;
	--chrome-accent: #8ab4f8;
	--chrome-success: #81c995;
	
	--font-primary: 'Roboto', sans-serif;
	--transition: all 0.15s ease-in-out;
}

body.theme-nord {
	--chrome-frame-bg: #0f172a;
	--chrome-toolbar-bg: #1e293b;
	--chrome-input-bg: #0f172a;
	--chrome-border: #334155;
	--chrome-text: #f8fafc;
	--chrome-text-muted: #94a3b8;
	--chrome-active-tab: #1e293b;
	--chrome-accent: #3b82f6;
}

body.theme-midnight {
	--chrome-frame-bg: #000000;
	--chrome-toolbar-bg: #0b0f19;
	--chrome-input-bg: #000000;
	--chrome-border: #1e293b;
	--chrome-text: #ffffff;
	--chrome-text-muted: #64748b;
	--chrome-active-tab: #0b0f19;
	--chrome-accent: #a855f7;
}

body.theme-emerald {
	--chrome-frame-bg: #022c22;
	--chrome-toolbar-bg: #064e3b;
	--chrome-input-bg: #022c22;
	--chrome-border: #065f46;
	--chrome-text: #f0fdf4;
	--chrome-text-muted: #a7f3d0;
	--chrome-active-tab: #064e3b;
	--chrome-accent: #34d399;
}

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

body, html {
	width: 100%;
	height: 100%;
	font-family: var(--font-primary);
	background-color: var(--chrome-frame-bg);
	color: var(--chrome-text);
	overflow: hidden;
}

/* Макет браузера Chrome */
.chrome-browser {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background-color: var(--chrome-frame-bg);
}

/* Панель вкладок (Tab Strip) */
.chrome-tab-strip {
	height: 38px;
	background-color: var(--chrome-frame-bg);
	display: flex;
	align-items: flex-end;
	padding: 0 10px;
	gap: 4px;
	user-select: none;
	position: relative;
}

.chrome-tabs {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	overflow-x: auto;
	height: 100%;
}

.chrome-tabs::-webkit-scrollbar {
	display: none;
}

/* Отдельная вкладка */
.tab-btn {
	height: 32px;
	min-width: 140px;
	max-width: 190px;
	background-color: transparent;
	color: var(--chrome-text-muted);
	border: none;
	border-radius: 8px 8px 0 0;
	display: flex;
	align-items: center;
	padding: 0 10px;
	gap: 8px;
	cursor: pointer;
	font-size: 12px;
	transition: var(--transition);
	position: relative;
}

.tab-btn::before, .tab-btn::after {
	content: '';
	position: absolute;
	bottom: 0;
	width: 8px;
	height: 8px;
	background-color: transparent;
	display: none;
}

.tab-btn:hover {
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--chrome-text);
}

.tab-btn.active {
	background-color: var(--chrome-active-tab);
	color: var(--chrome-text);
	z-index: 2;
}

.tab-favicon {
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--chrome-accent);
}

.tab-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-grow: 1;
	font-weight: 400;
}

.tab-close {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	color: var(--chrome-text-muted);
	cursor: pointer;
	font-size: 10px;
	transition: var(--transition);
}

.tab-close:hover {
	background-color: rgba(255, 255, 255, 0.15);
	color: var(--chrome-text);
}

/* Кнопка плюс */
.chrome-add-tab {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--chrome-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2px;
	transition: var(--transition);
}

.chrome-add-tab:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--chrome-text);
}

/* Верхнее правое меню */
.chrome-top-right-controls {
	margin-left: auto;
	display: flex;
	align-items: center;
	height: 100%;
	padding-bottom: 3px;
}

.chrome-menu-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--chrome-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}

.chrome-menu-btn:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--chrome-text);
}

/* Панель управления (Toolbar) */
.chrome-toolbar {
	height: 40px;
	background-color: var(--chrome-toolbar-bg);
	display: flex;
	align-items: center;
	padding: 0 8px;
	gap: 8px;
	border-bottom: 1px solid var(--chrome-border);
}

.chrome-nav-buttons {
	display: flex;
	gap: 2px;
}

.chrome-nav-btn {
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: var(--chrome-text);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: var(--transition);
}

.chrome-nav-btn:hover:not(:disabled) {
	background-color: rgba(255, 255, 255, 0.08);
}

.chrome-nav-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Поле ввода адреса */
.chrome-address-form {
	flex-grow: 1;
}

.chrome-address-bar {
	display: flex;
	align-items: center;
	background-color: var(--chrome-input-bg);
	border-radius: 14px;
	height: 28px;
	width: 100%;
	padding: 0 12px;
	position: relative;
	border: 1px solid transparent;
	transition: var(--transition);
}

.chrome-address-bar:focus-within {
	border-color: var(--chrome-accent);
	box-shadow: 0 0 0 1px var(--chrome-accent);
}

.chrome-lock-icon {
	color: var(--chrome-success);
	font-size: 11px;
	margin-right: 10px;
}

#uv-address {
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	outline: none;
	color: var(--chrome-text);
	font-family: inherit;
	font-size: 13px;
}

.chrome-clear-btn {
	background: none;
	border: none;
	color: var(--chrome-text-muted);
	cursor: pointer;
	font-size: 14px;
	display: none;
	align-items: center;
	justify-content: center;
	margin-left: 5px;
}

.chrome-clear-btn.show {
	display: flex;
}

.chrome-clear-btn:hover {
	color: var(--chrome-text);
}

/* Область контента */
.chrome-content-area {
	flex-grow: 1;
	position: relative;
	overflow: hidden;
}

.chrome-viewport {
	width: 100%;
	height: 100%;
	position: relative;
}

/* Стили вкладок контента */
.tab-content-panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	flex-direction: column;
	background-color: var(--chrome-active-tab);
}

.tab-content-panel.active {
	display: flex;
}

.tab-iframe {
	width: 100%;
	height: 100%;
	border: none;
	background-color: white;
	display: none;
}

.tab-iframe.show {
	display: block;
}

/* Лоадер */
.iframe-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: transparent;
	z-index: 100;
	overflow: hidden;
}

.iframe-loader .bar {
	width: 0%;
	height: 100%;
	background-color: var(--chrome-accent);
	transition: width 0.2s ease;
}

.iframe-loader.loading .bar {
	animation: chrome-loader 2s infinite linear;
}

@keyframes chrome-loader {
	0% { width: 0%; }
	50% { width: 60%; }
	100% { width: 100%; }
}

/* Оверлей настроек */
.chrome-settings-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: none;
	justify-content: center;
	align-items: center;
}

.chrome-settings-overlay.show {
	display: flex;
}

.settings-modal {
	width: 100%;
	max-width: 480px;
	background-color: var(--chrome-toolbar-bg);
	border: 1px solid var(--chrome-border);
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.5);
	overflow: hidden;
}

.settings-header {
	padding: 15px 20px;
	border-bottom: 1px solid var(--chrome-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.settings-header h3 {
	font-size: 16px;
	font-weight: 500;
}

.close-settings {
	background: none;
	border: none;
	color: var(--chrome-text-muted);
	cursor: pointer;
	font-size: 16px;
	transition: var(--transition);
}

.close-settings:hover {
	color: var(--chrome-text);
}

.settings-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-height: 80vh;
	overflow-y: auto;
}

.setting-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.setting-item label {
	font-size: 13px;
	color: var(--chrome-text-muted);
}

.setting-item select {
	height: 36px;
	background-color: var(--chrome-input-bg);
	border: 1px solid var(--chrome-border);
	border-radius: 4px;
	color: var(--chrome-text);
	padding: 0 10px;
	outline: none;
	cursor: pointer;
}

/* Стелс переключатель */
.setting-item .switch {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 22px;
	margin-top: 5px;
}

.setting-item .switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.setting-item .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--chrome-input-bg);
	border: 1px solid var(--chrome-border);
	border-radius: 22px;
	transition: 0.2s;
}

.setting-item .slider:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 3px;
	bottom: 3px;
	background-color: var(--chrome-text-muted);
	border-radius: 50%;
	transition: 0.2s;
}

input:checked + .slider {
	background-color: var(--chrome-accent);
}

input:checked + .slider:before {
	transform: translateX(20px);
	background-color: white;
}

/* Кнопки тем */
.theme-buttons {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.theme-btn {
	flex: 1;
	height: 32px;
	border-radius: 4px;
	border: 1px solid var(--chrome-border);
	background-color: var(--chrome-input-bg);
	color: var(--chrome-text);
	font-size: 11px;
	cursor: pointer;
	transition: var(--transition);
}

.theme-btn:hover {
	border-color: var(--chrome-accent);
}

.theme-btn.active {
	background-color: var(--chrome-accent);
	color: black;
	border-color: var(--chrome-accent);
	font-weight: 500;
}

/* Кнопки AdBlock */
.adblock-buttons {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.adblock-btn {
	flex: 1;
	height: 32px;
	border-radius: 4px;
	border: 1px solid var(--chrome-border);
	background-color: var(--chrome-input-bg);
	color: var(--chrome-text);
	font-size: 11px;
	cursor: pointer;
	transition: var(--transition);
}

.adblock-btn:hover {
	border-color: var(--chrome-accent);
}

.adblock-btn.active {
	background-color: var(--chrome-accent);
	color: black;
	border-color: var(--chrome-accent);
	font-weight: 500;
}

/* Кнопки Stealth */
.stealth-buttons {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.stealth-btn {
	flex: 1;
	height: 32px;
	border-radius: 4px;
	border: 1px solid var(--chrome-border);
	background-color: var(--chrome-input-bg);
	color: var(--chrome-text);
	font-size: 11px;
	cursor: pointer;
	transition: var(--transition);
}

.stealth-btn:hover {
	border-color: var(--chrome-accent);
}

.stealth-btn.active {
	background-color: var(--chrome-accent);
	color: black;
	border-color: var(--chrome-accent);
	font-weight: 500;
}

/* Дашборд в стиле Chrome (Новая вкладка) */
.chrome-dashboard {
	flex-grow: 1;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background-color: var(--chrome-active-tab);
}

.chrome-logo {
	font-size: 48px;
	font-weight: 700;
	margin-bottom: 25px;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: -1.5px;
	user-select: none;
}

/* Цвета логотипа Chrome/Google */
.g-blue { color: #4285f4; }
.g-red { color: #ea4335; }
.g-yellow { color: #fbbc05; }
.g-green { color: #34a853; }
.g-text { color: var(--chrome-text); font-weight: 400; margin-left: 5px; }

.chrome-search-form {
	width: 100%;
	max-width: 560px;
	margin-bottom: 35px;
}

.chrome-search-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	background-color: var(--chrome-input-bg);
	border-radius: 22px;
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--chrome-border);
	box-shadow: 0 1px 6px rgba(0,0,0,0.2);
	transition: var(--transition);
}

.chrome-search-input-wrapper:focus-within, .chrome-search-input-wrapper:hover {
	box-shadow: 0 1px 8px rgba(0,0,0,0.3);
	background-color: var(--chrome-input-bg);
	border-color: rgba(255,255,255,0.1);
}

.chrome-search-input-wrapper .search-icon {
	color: var(--chrome-text-muted);
	font-size: 16px;
	margin-right: 12px;
}

.chrome-search-input {
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	outline: none;
	color: var(--chrome-text);
	font-family: inherit;
	font-size: 15px;
}

/* Сетка ярлыков быстрого доступа */
.chrome-shortcuts {
	width: 100%;
	max-width: 560px;
}

.shortcuts-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	row-gap: 20px;
	column-gap: 10px;
}

.shortcut-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: var(--chrome-text);
	transition: var(--transition);
	cursor: pointer;
}

.shortcut-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--chrome-input-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 8px;
	border: 1px solid var(--chrome-border);
	transition: var(--transition);
}

.shortcut-item:hover .shortcut-icon {
	background-color: rgba(255, 255, 255, 0.08);
}

.shortcut-title {
	font-size: 11px;
	color: var(--chrome-text-muted);
	text-align: center;
	max-width: 80px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shortcut-item:hover .shortcut-title {
	color: var(--chrome-text);
}

/* Иконки AI/сервисов */
.ai-chatgpt { color: #10a37f; }
.ai-gemini { color: #1a73e8; }
.ai-deepseek { color: #4d80f5; }
.tool-mail { color: #fbbc05; }
.web-google { color: #4285f4; }
.web-github { color: var(--chrome-text); }

/* Статусы сети и логи */
.status-badge {
	font-size: 9px;
	padding: 2px 6px;
	border-radius: 10px;
	background-color: var(--chrome-border);
	color: var(--chrome-text-muted);
	font-weight: 500;
	text-transform: uppercase;
}

.status-badge.status-ok {
	background-color: rgba(129, 201, 149, 0.15);
	color: var(--chrome-success);
}

.status-badge.status-warn {
	background-color: rgba(242, 153, 0, 0.15);
	color: #f29900;
}

.status-badge.status-error {
	background-color: rgba(217, 48, 37, 0.15);
	color: #d93025;
}

.debug-console-pre {
	max-height: 140px;
	overflow-y: auto;
	background-color: var(--chrome-input-bg);
	border: 1px solid var(--chrome-border);
	border-radius: 4px;
	padding: 8px 12px;
	font-family: monospace;
	font-size: 10px;
	color: var(--chrome-text-muted);
	white-space: pre-wrap;
	word-break: break-all;
	margin: 0;
}

/* Стилизация скроллбара для консоли */
.debug-console-pre::-webkit-scrollbar {
	width: 6px;
}

.debug-console-pre::-webkit-scrollbar-track {
	background: transparent;
}

.debug-console-pre::-webkit-scrollbar-thumb {
	background: var(--chrome-border);
	border-radius: 3px;
}

.debug-console-pre::-webkit-scrollbar-thumb:hover {
	background: var(--chrome-text-muted);
}

/* Кнопки Маршрутизации */
.routing-buttons {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.routing-btn {
	flex: 1;
	height: 32px;
	border-radius: 4px;
	border: 1px solid var(--chrome-border);
	background-color: var(--chrome-input-bg);
	color: var(--chrome-text);
	font-size: 11px;
	cursor: pointer;
	transition: var(--transition);
}

.routing-btn:hover {
	border-color: var(--chrome-accent);
}

.routing-btn.active {
	background-color: var(--chrome-accent);
	color: black;
	border-color: var(--chrome-accent);
	font-weight: 500;
}