/* Layout is shared by every theme. Existing theme variables supply the colors. */
#home-screen[data-jiin-view] {
  --jn-bg: var(--jiin-bg, var(--c-bg));
  --jn-surface: var(--jiin-surface, var(--c-header-bg));
  --jn-text: var(--jiin-text, var(--c-title));
  --jn-muted: var(--jiin-muted, var(--c-app-label));
  --jn-accent: var(--jiin-accent, var(--c-accent));
  --jn-border: var(--jiin-border, var(--c-header-border));
  --jn-tabs: calc(52px + env(safe-area-inset-bottom, 0px));
}
.dt-sb-tools-toggle { display: none; }
#home-screen[data-jiin-view] .dt-sb-photo:not([hidden]) { position: relative; display: flex; flex-direction: column; flex: 0 0 auto; min-width: 0; margin: 12px 0 2px; }
#home-screen[data-jiin-view] .dt-sb-photo [hidden] { display: none !important; }
#home-screen[data-jiin-view] .dt-sb-photo-empty { display: flex; flex: 1 1 0; min-height: 250px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 20px; border: 1px dashed var(--jn-border); border-radius: 14px; background: color-mix(in srgb, var(--jn-surface) 25%, transparent); color: var(--jn-muted); font-family: var(--jn-ui-font, 'DM Sans', system-ui, sans-serif); cursor: pointer; }
#home-screen[data-jiin-view] .dt-sb-photo-empty svg { width: 30px; height: 30px; opacity: .75; }
#home-screen[data-jiin-view] .dt-sb-photo-empty strong { font-size: 13px; font-weight: 550; color: var(--jn-text); }
#home-screen[data-jiin-view] .dt-sb-photo-empty span { font-size: 11px; }
#home-screen[data-jiin-view] .dt-sb-photo-frame { position: relative; flex: 0 0 auto; min-height: 0; overflow: visible; border: 1px solid var(--jn-border); border-radius: 14px; background: color-mix(in srgb, var(--jn-surface) 25%, transparent); }
#home-screen[data-jiin-view] .dt-sb-photo-image { display: block; width: 100%; height: auto; padding: 0; box-sizing: border-box; border-radius: 13px; }
#home-screen[data-jiin-view] .dt-sb-photo-menu-toggle { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--jn-border); border-radius: 50%; background: color-mix(in srgb, var(--jn-bg) 85%, transparent); color: var(--jn-text); cursor: pointer; }
#home-screen[data-jiin-view] .dt-sb-photo-menu { position: absolute; top: 44px; right: 8px; z-index: 2; min-width: 124px; padding: 5px; border: 1px solid var(--jn-border); border-radius: 10px; background: var(--jn-bg); box-shadow: 0 4px 18px #0003; }
#home-screen[data-jiin-view] .dt-sb-photo-menu button { display: block; width: 100%; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--jn-text); font-family: var(--jn-ui-font, 'DM Sans', system-ui, sans-serif); font-size: 12px; text-align: left; cursor: pointer; }
#home-screen[data-jiin-view] .dt-sb-photo-menu button:hover { background: var(--jn-menu-hover); }
#home-screen[data-jiin-view] .dt-sb-photo button:focus-visible { outline: 2px solid var(--jn-text); outline-offset: 2px; }
#home-screen[data-jiin-view] .dt-sb-photo button:disabled { cursor: default; opacity: .65; }
#home-screen[data-jiin-view] .dt-sb-photo-status { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; margin: 0; padding: 8px 10px; border: 1px solid var(--jn-border); border-radius: 10px; background: color-mix(in srgb, var(--jn-bg) 94%, transparent); color: var(--jn-text); font-family: var(--jn-ui-font, 'DM Sans', system-ui, sans-serif); font-size: 11px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; pointer-events: none; }
#home-screen[data-jiin-view] .dt-sb-photo-reveal { display: block; width: 100%; padding: 0; border: 0; border-radius: 13px; background: transparent; cursor: pointer; }
#jiin-home-photo { width: 100%; max-width: 420px; margin: 0 auto 22px; }
#home-screen[data-jiin-view] #jiin-home-photo .dt-sb-photo { margin: 0; text-align: left; }
@media (max-width: 1023px) {
  #home-screen[data-jiin-view] .jiin-hero-wordmark { display: none; }
  #home-screen[data-jiin-view] .dt-sb-photo-menu-toggle { width: 44px; height: 44px; }
  #home-screen[data-jiin-view] .dt-sb-photo-menu { top: 60px; }
  #jiin-home-photo .dt-sb-photo-empty { min-height: 220px; }
}
@media (min-width: 1024px) { #jiin-home-photo { display: none; } }

.jiin-shell, .jiin-tabs { font-family: 'DM Sans', system-ui, sans-serif; }
.jiin-shell *, .jiin-tabs * { box-sizing: border-box; }
.jiin-shell :is(h1,h2,h3,p,small,strong,input,textarea) { font-family: inherit; }
.jiin-shell [hidden], .jiin-shell[hidden], .jiin-tabs[hidden] { display: none !important; }
.jiin-shell { position: absolute; inset: 0 0 var(--jn-tabs); z-index: 36; overflow-y: auto; overscroll-behavior: contain; background: var(--jn-bg); color: var(--jn-text); }
.jiin-shell button, .jiin-tabs button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.jiin-shell button:focus-visible, .jiin-tabs button:focus-visible { outline: 2px solid var(--jn-accent, #b08b50); outline-offset: 4px; }
.jiin-shell svg, .jiin-tabs svg { width: 22px; height: 22px; flex-shrink: 0; }
.jiin-top { position: relative; min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top, 0px)) 24px 14px; max-width: 1100px; margin: auto; }
.jiin-top > div:not(.notif-dropdown) { display: flex; gap: 8px; margin-left: auto; }
.jiin-brand { border: 0; background: none; display: flex; align-items: center; gap: 10px; padding: 0; font-size: 26px !important; font-family: Georgia, serif !important; }
.jiin-icon-button { min-width: 44px; min-height: 44px; border: 1px solid var(--jn-border); border-radius: 50%; background: var(--jn-surface); display: inline-grid; place-items: center; }
.jiin-icon-button[aria-expanded="true"] { border-color: var(--jn-accent); color: var(--jn-accent); }
.jiin-profile-panel { position: absolute; top: calc(100% - 2px); right: 24px; z-index: 5; width: min(340px, calc(100% - 40px)); max-height: calc(100dvh - 180px); overflow-y: auto; padding: 18px; border: 1px solid var(--jn-border); border-radius: 20px; background: var(--jn-bg); color: var(--jn-text); box-shadow: 0 18px 50px #0004; }
.jiin-profile-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jiin-profile-heading h2 { margin: 0; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.jiin-profile-heading .jiin-icon-button { min-width: 36px; min-height: 36px; flex-shrink: 0; }
.jiin-profile-heading svg { width: 18px; height: 18px; }
.jiin-profile-description p { margin: 8px 0 18px; color: var(--jn-muted); font-size: 13px; line-height: 1.5; }
.jiin-profile-panel .jiin-settings button { min-height: 49px; padding: 12px 14px; font-size: 14px; }
.jiin-profile-panel .jiin-settings button:hover { background: color-mix(in srgb, var(--jn-accent) 8%, transparent); }
.jiin-top > .notif-dropdown {
  top: calc(100% - 2px);
  right: 24px;
  width: min(360px, calc(100% - 40px));
  max-height: calc(100dvh - 160px);
  border: 1px solid var(--jn-border);
  background: var(--jn-surface);
  color: var(--jn-text);
  backdrop-filter: none;
  text-align: left;
}
.jiin-top > .notif-dropdown .notif-list { min-height: 0; }
.jiin-top > .notif-dropdown :is(.notif-dropdown-header, .notif-text) { color: var(--jn-text); }
.jiin-top > .notif-dropdown :is(.notif-empty, .notif-time, .notif-dropdown-clear) { color: var(--jn-muted); }
.jiin-page { max-width: 950px; margin: auto; padding: 18px 24px 40px; }
/* Üst çubuk yalnız Ana sayfada görünür; diğer sayfalar (Fiyat Takip, Araçlar) durum çubuğu/çentik payını kendisi bırakır. */
.jiin-top[hidden] ~ .jiin-page { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
.jiin-page h1 { font-size: clamp(29px, 5vw, 42px); line-height: 1.14; font-weight: 550; margin: 10px 0 12px; letter-spacing: -.045em; }
.jiin-page h2 { font-size: 17px; font-weight: 600; margin: 28px 0 13px; letter-spacing: -.02em; }
.jiin-page p { line-height: 1.65; color: var(--jn-muted); font-size: 15px; }
.jiin-page-title { margin-bottom: 26px; }
.jiin-home[aria-busy="true"] > #jiin-home-content { visibility: hidden; pointer-events: none; }
.jiin-eyebrow { color: var(--jn-accent); font-size: 10px; letter-spacing: .2em; font-weight: 650; }
.jiin-hero { padding: 26px 0 30px; text-align: center; max-width: 620px; margin: auto; }
.jiin-hero p { margin: 0 0 12px; font-size: 18px; }
.jiin-hero .jiin-chat-invitation { margin: 0 auto 25px; font-size: 18px; line-height: 1.65; }
.jiin-primary { display: inline-flex; gap: 20px; justify-content: space-between; align-items: center; min-height: 54px; padding: 14px 20px; border: 0; border-radius: 15px; background: var(--jn-accent); color: var(--jn-bg) !important; font-weight: 650 !important; }
.jiin-primary span { display: flex; }
.jiin-home-composer { display: flex; align-items: flex-end; gap: 12px; width: 100%; margin: 0 auto; padding: 14px; border: 1px solid var(--jn-border); border-radius: 23px; background: var(--jn-surface); text-align: left; box-shadow: 0 8px 28px #0000000a; transition: border-color .15s; }
.jiin-home-composer:focus-within { border-color: var(--jn-accent); }
.jiin-home-input { flex: 1; min-width: 0; width: 100%; min-height: 58px; max-height: 160px; padding: 8px 4px; resize: none; border: 0; outline: 0; background: transparent; color: var(--jn-text); font: inherit; font-size: 16px; line-height: 1.5; }
.jiin-home-input::placeholder { color: var(--jn-muted); opacity: .85; }
/* Focus belongs to the rounded composer, not a second box around its text. */
#home-screen[data-jiin-view] :is(#jiin-home-input, #chat-input),
#home-screen[data-jiin-view] :is(#jiin-home-input, #chat-input):focus,
#home-screen[data-jiin-view] :is(#jiin-home-input, #chat-input):focus-visible {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
#home-screen[data-jiin-view] .chat-input-wrapper:focus-within {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-tema="koyu-altin"] #home-screen[data-jiin-view] .chat-input-outer:focus-within {
  border-color: var(--jiin-accent);
}
.jiin-home-send { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--jn-accent); color: var(--jn-bg) !important; transition: opacity .15s, transform .15s; }
.jiin-home-send:disabled { opacity: .38; cursor: default; }
.jiin-home-send:not(:disabled):active { transform: scale(.94); }
.jiin-hero .jiin-home-message { margin: 10px 4px 0; font-size: 13px; text-align: left; }
.jiin-home-message:empty { display: none; }
.jiin-resume { display: flex; align-items: center; width: 100%; gap: 14px; background: var(--jn-surface); border: 1px solid var(--jn-border); border-radius: 16px; padding: 17px; text-align: left; }
.jiin-resume > span:first-child { color: var(--jn-accent); }
.jiin-resume > span:nth-child(2) { flex: 1; }
.jiin-resume strong, .jiin-tool strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.jiin-resume small, .jiin-tool small { display: block; color: var(--jn-muted); font-size: 12px; line-height: 1.5; margin-top: 4px; }
.jiin-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 24px 0 13px; }
.jiin-section-heading h2 { margin: 0; }
.jiin-link { padding: 7px 0; display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--jn-accent) !important; font-size: 12px !important; min-height: 40px; }
.jiin-link svg { width: 17px; }
.jiin-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
#jiin-tool-groups > .jiin-tool:last-child:nth-child(odd) { grid-column: 1 / -1; }
.jiin-tool { display: flex; align-items: center; gap: 13px; text-align: left; padding: 17px 14px; border: 1px solid var(--jn-border); border-radius: 16px; background: var(--jn-surface); min-width: 0; min-height: 86px; transition: border-color .16s, transform .16s; }
.jiin-tool:hover { border-color: var(--jn-accent); }
.jiin-tool:active { transform: scale(.98); }
.jiin-tool-icon { display: grid; place-items: center; color: var(--jn-accent); flex: 0 0 34px; }
.jiin-tool > span:nth-child(2) { flex: 1; min-width: 0; }
.jiin-tool-arrow { opacity: .45; }
.jiin-tool-arrow svg { width: 15px; }
.jiin-settings { border: 1px solid var(--jn-border); border-radius: 18px; overflow: hidden; background: var(--jn-surface); }
.jiin-settings button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; min-height: 61px; padding: 17px 20px; background: none; border: 0; border-bottom: 1px solid var(--jn-border); text-align: left; }
.jiin-settings button:last-child { border-bottom: 0; }
.jiin-settings small { color: var(--jn-muted); }
.jiin-tabs { position: absolute; bottom: 0; left: 0; right: 0; height: var(--jn-tabs); z-index: 39; display: flex; justify-content: center; border-top: 1px solid var(--jn-border); background: var(--jn-bg); padding: 4px 12px calc(4px + env(safe-area-inset-bottom, 0px)); color: var(--jn-text); }
.jiin-tabs button { flex: 1; max-width: 180px; border: 0; background: none; opacity: .63; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; font-size: 11px; border-radius: 12px; }
.jiin-tabs button.is-active { opacity: 1; color: var(--jn-accent); background: color-mix(in srgb, var(--jn-accent) 9%, transparent); }
.jiin-feature-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.jiin-feature-actions > [data-action="close-feature"] { margin-left: auto; }
body.jiin-legacy-open :is(#landing-screen .landing-back-btn, #chat-panel-back-btn) { display: none !important; }
.jiin-status { margin: 0 24px; }
#home-screen[data-jiin-view]:not([data-jiin-view="chat"]) > .chat-header,
#home-screen[data-jiin-view]:not([data-jiin-view="chat"]) > .chat-messages,
#home-screen[data-jiin-view]:not([data-jiin-view="chat"]) > .chat-input-area-wrap { visibility: hidden; pointer-events: none; }
/* The previous chat header must stop covering the new route immediately. */
#home-screen[data-jiin-view]:not([data-jiin-view="chat"]) > .chat-header { transition: none; }
/* --jn-keyboard-shift: klavye açıkken giriş kutusunun yükselmesi; tek yazanı jiin-keyboard.js. */
#home-screen[data-jiin-view="chat"] { padding-bottom: calc(var(--jn-tabs) + var(--jn-keyboard-shift, 0px)); }
#home-screen[data-jiin-view="chat"] > .chat-input-area-wrap { bottom: 0; }
/* Kenar sisi: kayan mesajlar görünen üst/alt kenarda eriyerek kaybolur. Değişkenlerin tek yazanı
   jiin-kenar-sisi.js; o yoksa hepsi 0 → maske tam opak, etkisiz. Maske listenin zeminini de açar;
   arkadaki #home-screen zemini temanın rengi olduğundan sis her temada kendiliğinden uyar. */
@property --jn-sis-pay { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --jn-sis-ust { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --jn-sis-alt { syntax: '<length>'; inherits: false; initial-value: 0px; }
#home-screen[data-jiin-view="chat"] > .chat-messages {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--jn-sis-pay, 0px), #000 calc(var(--jn-sis-pay, 0px) + var(--jn-sis-ust, 0px)), #000 calc(100% - var(--jn-sis-alt, 0px)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent var(--jn-sis-pay, 0px), #000 calc(var(--jn-sis-pay, 0px) + var(--jn-sis-ust, 0px)), #000 calc(100% - var(--jn-sis-alt, 0px)), transparent 100%);
}
#home-screen[data-jiin-view] .chat-brand { cursor: pointer; }
/* Real price feature; the module owns its data, this sheet owns its presentation. */
.jiin-price-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jiin-price-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 20px 0; padding: 20px; border: 1px solid var(--jn-border); background: var(--jn-surface); border-radius: 18px; }
.jiin-price-form > h2 { flex-basis: 100%; margin: 0 0 3px; }
.jiin-price-field { display: flex; flex: 1 1 190px; flex-direction: column; gap: 8px; font-size: 12px; color: var(--jn-muted); }
.jiin-price-input { min-height: 46px; width: 100%; padding: 12px; background: var(--jn-bg); border: 1px solid var(--jn-border); border-radius: 10px; color: var(--jn-text); font: inherit; font-size: 16px; }
.jiin-price-input:focus { outline: 2px solid var(--jn-accent); outline-offset: 1px; }
.jiin-price-button { min-height: 44px; padding: 11px 16px; border: 1px solid var(--jn-border); background: var(--jn-surface); border-radius: 11px; }
.jiin-price-primary { background: var(--jn-accent); color: var(--jn-bg) !important; border-color: transparent; font-weight: 650 !important; }
.jiin-price-button:disabled { opacity: .6; cursor: wait; }
.jiin-price-list { display: grid; gap: 12px; }
.jiin-price-card { display: block; width: 100%; text-align: left; padding: 20px; border: 1px solid var(--jn-border); border-radius: 16px; background: var(--jn-surface); color: var(--jn-text); }
.jiin-price-card:hover { border-color: var(--jn-accent); }
.jiin-price-product { font-size: 17px; font-weight: 600; margin-bottom: 12px; overflow-wrap: anywhere; }
.jiin-price-value { font-size: 27px; font-weight: 550; letter-spacing: -.03em; margin: 9px 0; }
.jiin-price-status, .jiin-price-meta, .jiin-price-help { font-size: 13px; color: var(--jn-muted); line-height: 1.65; }
.jiin-price-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.jiin-price-status .jiin-price-value { color: var(--jn-text); margin: 0 0 7px; }
.jiin-price-detail { margin: 20px 0; padding: 24px; border-radius: 18px; border: 1px solid var(--jn-border); background: var(--jn-surface); }
.jiin-price-detail a { color: var(--jn-accent); overflow-wrap: anywhere; }
.jiin-price-proof { margin: 18px 0; padding: 18px 0; border-top: 1px solid var(--jn-border); border-bottom: 1px solid var(--jn-border); }
.jiin-price-proof-title { margin: 0 0 10px; font-size: 15px; }
.jiin-price-proof-state { display: inline-block; margin: 0 0 8px; padding: 4px 10px; border: 1px solid var(--jn-border); border-radius: 9px; font-size: 13px; font-weight: 600; }
.jiin-price-proof-evet { color: var(--jn-accent); }
.jiin-price-proof-value { color: var(--jn-text); font-size: 16px; }
.jiin-price-proof .jiin-price-meta { overflow-wrap: anywhere; white-space: pre-line; }
.jiin-price-proof-toggle { display: block; margin-top: 14px; }
.jiin-price-proof-image { margin: 12px 0 0; padding: 10px; border: 1px solid var(--jn-border); border-radius: 12px; background: var(--jn-bg); }
.jiin-price-proof-image img { display: block; width: 100%; height: auto; max-height: 65vh; object-fit: contain; border-radius: 6px; }
.jiin-price-proof-error { color: var(--jn-text); font-size: 13px; line-height: 1.65; }
.jiin-price-error, .jiin-price-notice { padding: 16px; border: 1px solid var(--jn-border); border-radius: 12px; margin: 15px 0; line-height: 1.6; }
.jiin-price-danger { color: #c85e59 !important; }
.jiin-price-confirm { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; border: 1px solid var(--jn-border); border-radius: 12px; }
/* For you: per-account cards + "Jiin knows you". Colours come from the theme tokens. */
.jiin-foryou-list { display: grid; gap: 11px; }
.jiin-foryou-card { padding: 12px 16px 14px; border: 1px solid var(--jn-border); border-radius: 16px; background: var(--jn-surface); text-align: left; }
.jiin-foryou-head { display: flex; align-items: center; gap: 9px; min-height: 32px; font-size: 12px; color: var(--jn-muted); }
.jiin-foryou-kind { color: var(--jn-accent); font-weight: 600; letter-spacing: .02em; }
.jiin-foryou-dismiss { margin: -6px -10px -6px auto; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; font-size: 20px !important; line-height: 1; color: var(--jn-muted) !important; opacity: .75; }
.jiin-foryou-dismiss:hover { opacity: 1; }
.jiin-page .jiin-foryou-text { margin: 2px 0 12px; color: var(--jn-text); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.jiin-foryou-action { min-height: 40px; padding: 8px 15px; border: 1px solid var(--jn-border); border-radius: 999px; background: none; color: var(--jn-accent) !important; font-size: 13px !important; font-weight: 600 !important; transition: border-color .16s; }
.jiin-foryou-action:hover { border-color: var(--jn-accent); }
.jiin-foryou-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.jiin-foryou-tag { padding: 7px 13px; border: 1px solid var(--jn-border); border-radius: 999px; background: var(--jn-surface); font-size: 13px; line-height: 1.3; text-transform: capitalize; overflow-wrap: anywhere; }
.jiin-page .jiin-foryou-note { margin: 0; font-size: 13px; }
.jiin-known-list { display: grid; gap: 10px; }
.jiin-known-item { padding: 14px 16px 8px; border: 1px solid var(--jn-border); border-radius: 14px; background: var(--jn-surface); }
.jiin-known-item.is-faded { opacity: .62; }
.jiin-page .jiin-known-text { margin: 0; color: var(--jn-text); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.jiin-known-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 4px; }
.jiin-known-ask { font-size: 13px; color: var(--jn-muted); }
.jiin-known-delete { color: #c85e59 !important; }
.jiin-known-input { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--jn-border); border-radius: 11px; background: var(--jn-bg); color: var(--jn-text); font-size: 16px; line-height: 1.5; resize: vertical; }
.jiin-known-input:focus { outline: 0; border-color: var(--jn-accent); }
.jiin-known-input + .jiin-known-actions { margin: 10px 0 8px; gap: 10px; }
.jiin-page .jiin-known-error { padding: 14px 16px; border: 1px solid var(--jn-border); border-radius: 12px; color: var(--jn-text); }
@media (max-width: 600px) {
  .jiin-page { padding: 8px 20px 28px; }
  /* Özellik araç çubuğundaki Kapat ile aynı yükseklik: 12px + inset. */
  .jiin-top[hidden] ~ .jiin-page { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .jiin-top { padding-left: 20px; padding-right: 20px; }
  .jiin-tool { flex-direction: column; align-items: flex-start; gap: 9px; padding: 17px; }
  .jiin-tool-icon { flex-basis: auto; }
  .jiin-tool-arrow { display: none; }
  .jiin-hero { padding-top: 16px; }
  .jiin-price-form { padding: 16px; }
}
@media (min-width: 601px) and (max-width: 1023px) {
  #home-screen[data-jiin-view] { padding-left: 0; }
  #home-screen[data-jiin-view] > .chat-header, #home-screen[data-jiin-view] > .chat-messages, #home-screen[data-jiin-view] > .chat-input-area-wrap { margin-left: 0; left: 0; }
  #home-screen[data-jiin-view] > .chat-input-area-wrap { padding-left: 16px !important; }
}
@media (min-width: 1024px) {
  .jiin-shell, .jiin-tabs { left: var(--dt-sb, 236px); }
  .jiin-hero { padding-top: 35px; }
}
@media (prefers-reduced-motion: reduce) { .jiin-tool { transition: none; } }

/* Palette tokens are separate from the shared layout below. */
html[data-tema="siyah"] #home-screen[data-jiin-view] {
  --jn-surface: var(--mat-surface);
  --jn-muted: var(--mat-muted);
  --jn-sidebar: var(--mat-sidebar);
  --jn-composer: #333333;
  --jn-profile: #232323;
  --jn-card-hover: var(--mat-card-hover);
  --jn-menu-hover: var(--mat-menu-hover);
  --jn-frame-border: #ffffff0d;
  --jn-composer-edge: #ffffff08;
  --jn-bubble: var(--mat-bubble);
  --jn-send: var(--mat-ink);
  --jn-on-send: var(--mat-on-send);
}
html[data-tema="koyu-altin"] #home-screen[data-jiin-view] {
  --jn-sidebar: var(--jiin-surface);
  --jn-composer: var(--jiin-surface-raised);
  --jn-profile: var(--jiin-surface);
  --jn-card-hover: var(--jiin-surface-raised);
  --jn-menu-hover: var(--jiin-surface-raised);
  --jn-frame-border: #d3ad6814;
  --jn-composer-edge: #fff1d508;
  --jn-bubble: var(--c-bubble-user-bg);
  --jn-send: var(--jiin-accent);
  --jn-on-send: var(--jiin-bg);
}
html[data-tema="hardal"] #home-screen[data-jiin-view] {
  --jn-theme-font: "Geist", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif;
  --jn-surface: var(--fi-bombe-yuzey-sade);
  --jn-muted: var(--chat-muted);
  --jn-sidebar: linear-gradient(105deg, #fbf7ee 0%, #f7f2e7 76%, #f1e8d7 100%);
  --jn-composer: linear-gradient(148deg, #fcf8ee 0%, #f8f0e1 66%, #eaddc5 100%);
  --jn-profile: var(--c-menu-bg);
  --jn-card-hover: var(--c-app-hover-bg);
  --jn-menu-hover: var(--c-menu-hover);
  --jn-frame-border: #29241b0d;
  --jn-composer-edge: #ffffff66;
  --jn-bubble: var(--c-bubble-user-bg);
  --jn-send: var(--c-accent);
  --jn-on-send: #fff8ea;
}

/* Shared app layout. Ivory keeps its original typography and raised surfaces. */
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) body::before,
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) body::after { display: none; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] {
  --jn-chat-width: 920px;
  --jn-ui-font: var(--jn-theme-font, "Segoe UI", Arial, sans-serif);
  font-family: var(--jn-ui-font);
  background: var(--jn-bg) !important;
  color: var(--jn-text);
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] :is(.home-bg-system, .gece-deco, #vibe-bg) { display: none !important; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] :is(.jiin-shell, .jiin-tabs, .dt-sb-item, .dt-sb-name, .chat-messages, .chat-input, .chat-msg, .ai-bubble-wrap > .chat-msg.assistant, .user-bubble-wrap > .chat-msg.user, .chat-msg.assistant :is(h1,h2,h3,h4)) {
  font-family: var(--jn-ui-font) !important;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] .chat-input::placeholder { font-family: var(--jn-ui-font) !important; font-style: normal !important; font-weight: 400 !important; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] :is(.chat-msg, .ai-bubble-wrap > .chat-msg.assistant, .user-bubble-wrap > .chat-msg.user) {
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400 !important;
  font-style: normal !important;
  box-shadow: none !important;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-messages { gap: 20px; background: transparent !important; padding-top: calc(110px + env(safe-area-inset-top, 0px)); }
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] .user-bubble-wrap > .chat-msg.user:not(.foto) {
  padding: 12px 18px;
  border-radius: 20px;
  background: var(--jn-bubble) !important;
  border: 0 !important;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .ai-bubble-wrap { border: 0; box-shadow: none; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] .ai-bubble-wrap > .chat-msg.assistant {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 12px 0 !important;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] .chat-msg.assistant :is(h1,h2,h3,h4) { font-style: normal !important; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] :is(.chat-reply-action, .chat-reply-preview-close) { background: var(--jn-surface); color: var(--jn-muted); box-shadow: none; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-header {
  background: var(--jn-bg) !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none;
  padding-top: max(18px, env(safe-area-inset-top, 0px));
  padding-bottom: 16px;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-header-title { display: none !important; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] :is(.chat-voice-call-btn, .chat-menu-btn, .chat-panel-back-btn) {
  width: 40px; height: 40px; min-width: 40px;
  background: transparent; color: var(--jn-text);
  border: 0; border-radius: 12px; box-shadow: none; transform: none;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] #dt-sidebar {
  --dsb-ink: var(--jn-text);
  --dsb-soluk: var(--jn-muted);
  --dsb-vurgu: var(--jn-accent);
  background: var(--jn-sidebar) !important;
  border-right: 0;
  box-shadow: none;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] :is(.dt-sb-brand, .dt-sb-alt) { border: 0; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] :is(.dt-sb-item, .dt-sb-name) { font-weight: 400; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-ico path[fill="#FF0000"] { fill: none; stroke: currentColor; stroke-width: 1.5; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-ico path:is([fill="#ffffff"], [fill="#1C1410"]) { fill: currentColor; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] .dt-sb-item:is(:hover, .active) {
  background: var(--jn-menu-hover); color: var(--jn-text); border-color: transparent; box-shadow: none; transform: none;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-item.active::before { display: none; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] :is(.dt-sb-profil, .dt-sb-profil-btn) { background: transparent; border-color: transparent; box-shadow: none; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] .dt-sb-avatar { background: var(--jn-menu-hover) !important; color: var(--jn-text); }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-tabs { border-top: 0; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-area-wrap { background: transparent !important; padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-area { max-width: var(--jn-chat-width) !important; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] :is(.jiin-home-composer, .chat-input-outer) {
  background: var(--jn-composer) !important;
  border: 1px solid transparent !important;
  border-radius: 26px;
  box-shadow: inset 0 1px 0 var(--jn-composer-edge) !important;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-outer { padding: 12px 14px 12px 18px; gap: 6px; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-wrapper { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input { font-style: normal !important; font-size: 16px; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] :is(.chat-mic-btn:not(.recording), .chat-attach-btn) {
  width: 38px; height: 38px; min-width: 38px; border-radius: 12px;
  background: transparent !important; border: 0 !important; box-shadow: none; color: var(--jn-muted) !important;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] :is(.jiin-home-composer, .chat-input-outer):focus-within {
  border-color: transparent !important;
  background: var(--jn-composer) !important;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"]) #home-screen[data-tema][data-jiin-view] .chat-send-btn { border-radius: 50%; background: var(--jn-send); color: var(--jn-on-send); border: 0; box-shadow: none; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-send-btn svg { stroke: var(--jn-on-send); }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .cevap-uyari { background: transparent; border: 0; color: var(--jn-muted); }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-page h1 { font-weight: 600; letter-spacing: -.025em; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-tool { border-radius: 14px; min-height: 78px; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-profile-panel { border-radius: 16px; background: var(--jn-profile); }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] :is(.jiin-resume, .jiin-tool, .jiin-price-card, .jiin-price-form, .jiin-price-detail, .jiin-settings) {
  border-color: transparent;
  box-shadow: none;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] :is(.jiin-resume, .jiin-tool, .jiin-price-card):hover {
  border-color: transparent;
  background: var(--jn-card-hover);
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-icon-button {
  border-color: transparent;
  background: transparent;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-icon-button:is(:hover, [aria-expanded="true"]) { background: var(--jn-menu-hover); }
@media (min-width: 1024px) {
  /* Desktop already has these destinations in its side navigation. */
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] {
    --jn-tabs: 0px;
    --dt-sb: clamp(256px, 23.6vw, 356px);
    --jn-frame-gap: 8px;
    --jn-header-height: 56px;
    --jn-scroll-inset: 4px;
    --jn-chat-gutter: max(36px, (100vw - var(--dt-sb) - var(--jn-frame-gap) - var(--jn-chat-width)) / 2);
    background: var(--jn-sidebar) !important;
  }
  /* A decorative surface leaves existing dialogs and fixed modules untouched. */
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view]::before {
    content: "";
    display: block !important;
    position: absolute;
    inset: var(--jn-frame-gap) var(--jn-frame-gap) var(--jn-frame-gap) var(--dt-sb);
    z-index: 0;
    pointer-events: none;
    background: var(--jn-bg);
    border: 1px solid var(--jn-frame-border);
    border-radius: 18px;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] #dt-sidebar {
    padding: 0 10px 20px 4px;
    overflow: visible;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-brand {
    flex: 0 0 64px;
    height: auto;
    /* Align the wordmark with the navigation labels below. */
    padding: 0 49px;
    margin: 0 0 4px;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-nav {
    min-height: 0;
    padding: 14px 6px;
    gap: 4px;
    background: var(--jn-bg);
    border-radius: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--c-scrollbar-thumb) transparent;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-nav > .dt-sb-item {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    gap: 10px;
    font-size: 15px;
    font-weight: 550;
    color: color-mix(in srgb, var(--jn-text) 82%, var(--jn-bg));
    line-height: 1.4;
    border-radius: 12px;
  }
  /* The tools group folds in every theme; the photo panel below depends on this toggle. */
  #home-screen[data-jiin-view] .dt-sb-nav > .dt-sb-tools-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    width: 100%;
    min-height: 36px;
    margin: 10px 0 4px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: var(--jn-ui-font, 'DM Sans', system-ui, sans-serif);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
    color: var(--jn-muted);
    cursor: pointer;
    position: relative;
  }
  #home-screen[data-jiin-view] .dt-sb-tools-toggle svg { width: 14px; height: 14px; flex: 0 0 auto; }
  #home-screen[data-jiin-view] .dt-sb-tools-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
  #home-screen[data-jiin-view] .dt-sb-tools-toggle:is(:hover, .has-active-tool) { color: var(--jn-text); background: var(--jn-menu-hover, color-mix(in srgb, var(--jn-text) 8%, transparent)); }
  #home-screen[data-jiin-view] .dt-sb-tools-toggle:focus-visible { outline: 2px solid var(--jn-text); outline-offset: -2px; }
  #home-screen[data-jiin-view] .dt-sb-tools-toggle.has-active-tool::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 22px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: var(--jn-text);
  }
  #home-screen[data-jiin-view] .dt-sb-nav.dt-sb-tools-collapsed > .dt-sb-tools-toggle ~ .dt-sb-item { display: none !important; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-nav > .dt-sb-item:is(:hover, .active) { color: var(--jn-text); }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-nav > .dt-sb-item.active { font-weight: 650; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-nav > .dt-sb-item.active::before {
    display: block;
    left: 0;
    top: 50%;
    width: 3px;
    height: 22px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: var(--jn-text);
    box-shadow: none;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-nav .dt-sb-ico,
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-nav .dt-sb-ico svg { width: 20px; height: 20px; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-alt { flex: 0 0 72px; margin: 20px 0 0; padding: 12px 0 0; justify-content: flex-end; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-profil { padding: 8px 2px; gap: 12px; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-name { font-size: clamp(14px, 1.2vw, 18px); }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .dt-sb-avatar { width: 40px; height: 40px; font-size: 14px; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-tabs { display: none; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-shell {
    top: var(--jn-frame-gap);
    right: var(--jn-frame-gap);
    bottom: var(--jn-frame-gap);
    border: 1px solid var(--jn-frame-border);
    border-radius: 18px;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-shell::-webkit-scrollbar-track {
    /* Keep both ends of the thumb clear of the rounded panel corners. */
    margin: 16px 0;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-shell::-webkit-scrollbar { width: 8px; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-shell::-webkit-scrollbar-thumb { background: var(--c-scrollbar-thumb); border-radius: 4px; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-top {
    min-height: 56px;
    padding: 9px 24px;
    max-width: none;
    gap: 16px;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-top .jiin-brand { display: none; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .jiin-top .jiin-icon-button { min-width: 36px; min-height: 36px; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-header {
    top: calc(var(--jn-frame-gap) + 1px);
    left: calc(var(--dt-sb) + 1px);
    right: calc(var(--jn-frame-gap) + 1px);
    height: var(--jn-header-height);
    box-sizing: border-box;
    padding: 8px 20px 8px 24px;
    border-radius: 17px 17px 0 0;
    transition: none;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-header > * { transform: none; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-area-wrap {
    padding-left: calc(var(--dt-sb) + var(--jn-chat-gutter)) !important;
    padding-right: calc(var(--jn-frame-gap) + var(--jn-chat-gutter)) !important;
    padding-bottom: 24px !important;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-area { max-width: var(--jn-chat-width) !important; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-outer { padding: 14px 16px; gap: 12px; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] > .chat-messages {
    /* Padding alone leaves the scrollbar behind the absolute header. */
    margin-top: calc(var(--jn-frame-gap) + 1px + var(--jn-header-height));
    min-height: 0;
    width: calc(100% - var(--jn-frame-gap) - var(--jn-scroll-inset));
    padding-top: 24px;
    padding-left: calc(var(--dt-sb) + var(--jn-chat-gutter)) !important;
    padding-right: calc(var(--jn-chat-gutter) - var(--jn-scroll-inset)) !important;
    padding-bottom: 28px;
  }
}
@media (min-width: 601px) and (max-width: 1023px) {
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-header { padding-left: 24px; padding-right: 24px; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-messages { padding-left: 24px !important; padding-right: 24px !important; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-area-wrap { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 600px) {
  /* Phone views scroll normally without visible rails, including inner feature dialogs. */
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] :is(.jiin-shell, .jiin-shell *, .chat-messages, .chat-messages *, .chat-input, #jiin-feature-stage, #jiin-feature-stage *) {
    scrollbar-width: none !important;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] :is(.jiin-shell, .jiin-shell *, .chat-messages, .chat-messages *, .chat-input, #jiin-feature-stage, #jiin-feature-stage *)::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-header { padding-left: 14px; padding-right: 12px; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] :is(.chat-voice-call-btn, .chat-menu-btn, .chat-panel-back-btn) { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-messages { padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .user-bubble-wrap { max-width: 90%; }
  /* Güvenli alan payı altındaki sekme çubuğunda; kutuda yeniden sayılırsa kutu 24 px yukarıda asılı kalıyor. */
  #home-screen[data-jiin-view="chat"] > .chat-input-area-wrap { padding-bottom: 10px; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-area-wrap { padding-bottom: 10px !important; }
  html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] :is(.chat-msg, .ai-bubble-wrap > .chat-msg.assistant, .user-bubble-wrap > .chat-msg.user) {
    font-size: 15px;
    line-height: 1.65;
  }
}

/* Black theme conversation sizing. The boxed sidebar above is shared by
   all three available themes, using each theme's own surface and ink. */
@media (min-width: 1024px) {
  html[data-tema="siyah"] #home-screen[data-tema][data-jiin-view] {
    --jn-frame-gap: clamp(8px, 1.5vh, 16px);
    --jn-header-height: 72px;
    --jn-chat-width: 1400px;
    --jn-chat-gutter: 24px;
    --jn-frame-border: transparent;
  }
  html[data-tema="siyah"] #home-screen[data-tema][data-jiin-view] .chat-input-area-wrap { padding-bottom: clamp(24px, 3.65vh, 38px) !important; }
  html[data-tema="siyah"] #home-screen[data-tema][data-jiin-view] .chat-input-outer { min-height: 0; padding: 12px 16px; gap: 6px; border-radius: 24px; }
  html[data-tema="siyah"] #home-screen[data-tema][data-jiin-view] .chat-input-wrapper { min-height: 28px; }
  html[data-tema="siyah"] #home-screen[data-tema][data-jiin-view] .chat-input { min-height: 1.5em; font-size: 16px; }
  html[data-tema="siyah"] #home-screen[data-tema][data-jiin-view] .chat-input-tools .chat-input-tools-frame { display: none; }
  html[data-tema="siyah"] #home-screen[data-tema][data-jiin-view] .chat-send-btn { width: 40px; height: 40px; min-width: 40px; }
}

/* Map new shell components to the original Fildişi Klasik theme. Its source
   remains themes-fildisi.css -> themes-hardal.css; do not repaint that derivative. */
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] :is(.jiin-page h1, .jiin-page h2, .jiin-profile-heading h2, .chat-msg.assistant h1, .chat-msg.assistant h2, .chat-msg.assistant h3, .chat-msg.assistant h4) {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif !important;
  font-weight: 500;
  font-style: italic !important;
  letter-spacing: -.01em;
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] .jiin-home-input::placeholder {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 300;
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] :is(.jiin-resume, .jiin-tool, .jiin-price-card, .jiin-price-form, .jiin-price-detail, .jiin-settings) {
  background: var(--fi-bombe-yuzey);
  border-color: var(--fi-bombe-kenar);
  box-shadow: var(--fi-bombe-golge);
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] :is(.jiin-resume, .jiin-tool, .jiin-price-card):hover {
  background: var(--fi-bombe-yuzey);
  border-color: rgba(154, 116, 44, .38);
  box-shadow: var(--fi-bombe-golge-buyuk);
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] :is(.jiin-resume, .jiin-tool, .jiin-price-card):active {
  box-shadow: var(--fi-bombe-baski);
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] .jiin-profile-panel {
  background: linear-gradient(150deg, rgba(255, 254, 251, .98), rgba(245, 237, 221, .98));
  border-color: var(--fi-bombe-kenar);
  box-shadow: var(--fi-bombe-golge-buyuk);
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] .jiin-icon-button {
  background: var(--fi-bombe-yuzey);
  border-color: var(--fi-bombe-kenar);
  box-shadow: var(--fi-bombe-golge-kucuk), inset 0 1px rgba(255, 255, 255, .48);
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] .jiin-icon-button:is(:hover, [aria-expanded="true"]) {
  background: var(--fi-bombe-yuzey);
  border-color: rgba(154, 116, 44, .38);
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] .jiin-tabs button.is-active {
  background: linear-gradient(145deg, #fffdf8, #eee1c8);
  box-shadow: var(--fi-bombe-baski), 0 1px 5px rgba(82, 63, 30, .08);
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] .jiin-home-composer {
  background: var(--jn-composer);
  border-color: rgba(103, 78, 35, .16);
  border-radius: 28px;
  box-shadow: var(--fi-bombe-golge-buyuk), inset 0 1px 1px rgba(255, 255, 255, .48);
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] .jiin-home-composer:focus-within {
  border-color: rgba(154, 116, 44, .44);
  box-shadow: 0 8px 18px rgba(82, 63, 30, .22), 0 0 0 3px rgba(154, 116, 44, .10), inset 0 1px rgba(255, 255, 255, .32);
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] :is(.jiin-home-send, .jiin-price-primary) {
  background: linear-gradient(145deg, #b78a33, #88641f);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .30), inset 0 -2px 3px rgba(73, 47, 20, .22), 0 6px 11px rgba(116, 82, 25, .34);
}

/* Chat input tools: one translucent glass frame around mic, attachment and the Excel workspace.
   Decoration never clips the controls; the recording timer can still expand.
   A full-height divider on the first pixel column of the last, fixed-width Excel button
   gives it its own compartment; the recording mic keeps the group height. */
.chat-input-tools { display: contents; }
.chat-input-tools-frame { display: none; }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-tools {
  --chat-tool-size: 38px;
  --chat-tool-fill: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025) 65%, rgba(255, 255, 255, .045));
  --chat-tool-highlight: rgba(255, 255, 255, .20);
  --chat-tool-shadow: rgba(0, 0, 0, .10);
  --chat-tool-border: color-mix(in srgb, var(--jn-muted) 28%, transparent);
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  gap: 10px;
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
}
html[data-tema="hardal"] #home-screen[data-tema][data-jiin-view] .chat-input-tools {
  --chat-tool-size: 40px;
  --chat-tool-fill: linear-gradient(135deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, .08) 65%, rgba(255, 255, 255, .18));
  --chat-tool-highlight: rgba(255, 255, 255, .60);
  --chat-tool-shadow: rgba(82, 63, 30, .06);
  --chat-tool-border: color-mix(in srgb, var(--jn-muted) 22%, transparent);
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-tools-frame {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  box-sizing: border-box;
  border: 1px solid var(--chat-tool-border);
  border-radius: 12px;
  background: var(--chat-tool-fill);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: inset 0 1px 0 var(--chat-tool-highlight), inset 0 -1px 0 var(--chat-tool-shadow), 0 2px 6px var(--chat-tool-shadow);
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-tools-frame::before {
  content: "";
  position: absolute;
  right: calc(var(--chat-tool-size) - 2px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--chat-tool-border);
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-tools > .chat-excel-btn { border-radius: 0 12px 12px 0; }
@media (min-width: 1024px) {
  /* Siyah drops the frame on desktop, so the button keeps its own rounding there. */
  html[data-tema="siyah"] #home-screen[data-tema][data-jiin-view] .chat-input-tools > .chat-excel-btn { border-radius: 12px; }
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-tools > :is(.chat-mic-btn:not(.recording), .chat-attach-btn) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-tools > .chat-mic-btn.recording { height: var(--chat-tool-size); }
html:is([data-tema="siyah"], [data-tema="koyu-altin"], [data-tema="hardal"]) #home-screen[data-tema][data-jiin-view] .chat-input-tools > button:focus-visible {
  outline: 2px solid var(--jn-accent);
  outline-offset: 2px;
}

/* One persistent guest entry follows the visible page, including Chat. */
#home-screen .jiin-guest-access[hidden] { display: none !important; }
#home-screen .jiin-guest-access {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  flex: 0 0 auto; color: var(--jn-text); font: 13px 'DM Sans', system-ui, sans-serif;
}
#home-screen .jiin-guest-access button {
  min-height: 40px; padding: 8px 14px; border: 1px solid var(--jn-border); border-radius: 12px;
  background: var(--jn-surface); color: var(--jn-text); font: inherit; font-weight: 600;
  white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
#home-screen .jiin-guest-access button:focus-visible { outline: 2px solid var(--jn-accent); outline-offset: 3px; }
#home-screen .jiin-guest-access .jiin-guest-register { background: var(--jn-accent); color: var(--jn-bg); border-color: var(--jn-accent); }
#home-screen .jiin-top > .jiin-guest-access { margin-left: auto; margin-right: 16px; order: 1; }
#home-screen .jiin-top:has(> .jiin-guest-access:not([hidden])) > div:not(.jiin-guest-access, .notif-dropdown) { order: 2; margin-left: 0; }
#home-screen .chat-header > .jiin-guest-access { margin-right: 16px; }
#home-screen .jiin-page > .jiin-guest-access { margin-bottom: 20px; }
@media (max-width: 800px) {
  #home-screen .jiin-top:has(> .jiin-guest-access:not([hidden])) { flex-wrap: wrap; row-gap: 12px; }
  #home-screen .jiin-top > .jiin-guest-access { order: 3; flex-basis: 100%; margin: 0; }
  #home-screen .chat-header > .jiin-guest-access {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 4px 16px 10px;
    background: var(--jn-bg); transform: none; justify-content: center;
  }
  #home-screen[data-jiin-view="chat"]:has(.jiin-guest-access:not([hidden])) > .chat-messages { padding-top: calc(164px + env(safe-area-inset-top, 0px)) !important; }
}
